CSS learning resources

To understand the fundamentals, http://learnlayout.com/ is a really good website.

  

Documentation

https://developer.mozilla.org/en-US/docs/Web/CSS (This one is the best and most comprehensive, much better than w3school)

Important concepts to understand:

- “display” property - http://learnlayout.com/display.html / http://learnlayout.com/inline-block.html

- the box model + box-sizing - http://learnlayout.com/box-model.html / http://learnlayout.com/box-sizing.html

- position - http://learnlayout.com/position.html

- float - https://css-tricks.com/all-about-floats/

- clear fix (this one is by far the best and easiest to implement) - http://nicolasgallagher.com/micro-clearfix-hack/

- media queries - http://learnlayout.com/media-queries.html

Advanced links to improve techniques and code clean and maintainable code:

- this is a mini-game that helps understanding flexbox and all its possibilities, very fun and interesting! - http://flexboxfroggy.com/

- specificity, how to keep it low - https://css-tricks.com/strategies-keeping-css-specificity-low/

- mobile-first css coding - https://zellwk.com/blog/how-to-write-mobile-first-css/

- tips for sass - http://www.hongkiat.com/blog/sass-tips-tools-for-developers/

CSS/Sass frameworks and tools that can be helpful

http://postcss.org/ - css post-processor, provides very useful tools such as an autoprefixer to handle browser-compatibility

http://bourbon.io/ - sass library

https://purecss.io/grids/ - there are many other grid frameworks. knowing at least one can really help understanding how to create clean and standardised layouts

Blogs of great front-end developers, full of interesting posts!

https://csswizardry.com/archive/

http://nicolasgallagher.com/

https://www.paulirish.com/

https://una.im/

https://addyosmani.com/blog/

http://thesassway.com/

http://hugogiraudel.com/blog/