Pro Tips

It's not necessary that you follow them but these can be REALLY useful.

Install NPM

Npm stands for Node Package Manager. Basically you it's like a repository of useful programs for web development like servers, transpilers, compilers, etc. You can use Npm in the same way a apt-get (Linux) or brew (Mac). You install it by installing Node from this site: https://nodejs.org/en/

Let's see an example:
npm install -g less

Here we intalled Less globally (-g). This means we can use it anywhere, like this:
lessc styles.less

On the other hand, we can install it locally (without the -g option), for a specific project. In this case the lessc command will only be available if you are inside your project's root folder, or any other folder contained within it.

Note: if you want to install packages locally, you must first initialize a Node project with npm init

Install Bower

Bower is another package manager which you can use to import resources for your project like Bootstrap and jQuery. It works in the same way as Npm. You can install packages locally and globally, but since most of the times you will be importing resources for your project, you will install most of them locally. If you want to take a look, you can do so here: http://bower.io/

How to install
To install Bower you need Node, Npm and Git.

Once you got those installed, just run:
npm install -g bower

Bower 101 for dummies
Let's see an example:
cd /path/to/my/project/root

Initialize a Bower project
bower init

You can configure each of the options when initializing but it's not necessary. If you want to skip the configuration just "ENTER, ENTER, ENTER, ENTER" until it finishes. You can change these later don't worry :P

Let's say we want to install Bootstrap
bower install bootstrap

Yes, that easy...

All the resources you install with bower are located in a folder called bower_components.

Intall LESS and Clean-CSS

LESS is sort of an extended-language CSS. It let's you define variables, mixins and much more. It uses the same syntax as CSS, so if you are a complete LESS illiterate, just write CSS and it will still work. You can check the documentation in their site: http://lesscss.org/

How does LESS work?
Less has all these awesome-Less features which eventually are translated to pure CSS. The benefit of using Less is that it allows you to write cleaner code faster. Less is NOT an extension of the CSS functionality, it just adds some convenient language features useful for coding.

Install and use
To install simply:
npm install -g less

To use simply:
lessc source_less_file.less -o output_css_file.css

---

Clean-CSS is a code minifier. It reduces the size of css files by removing useless spaces, indentations, etc. This makes css files lighter and thus more efficient to send over the internet. However, these are unreadable for the developer, so we must keep the original css file for code maintenance. The output of a css minification is typically a .min.css file. You can also produce some files called source maps which allow to map the minified code to the original source code, but this is not important for now. You can check it out here: https://www.npmjs.com/package/clean-css

Install and use

To install simply:
npm install clean-css

To use simply:
cleancss my_css_file.css

You can also include the options:
-o name_of_the_output_file.min.css
--source-map