Awesome CSS Learning Awesome CSS Logo

An awesome list limited to the best CSS learning resources

This list is mainly about CSS – the language and the modules. Not about naming conventions, architecture paradigms, frameworks, pre-processors, post-processors, CSS-in-JS or other aspects of todays CSS ecosystem.

Please read the contribution guidelines before contributing.

Contents


CSS References

  • codrops - An extensive CSS reference offering way more content than MDN.
  • Can I use - Interactive browser support tables for CSS (and HTML5).

CSS in a nutshell

  • Introduction to CSS - This screencast series will teach you the basics of CSS in about one hour.

Fundamental concepts

  • The cascade - This article explains what the cascade is and how this affects you.
  • Specificity and inheritance - Understanding specificity and inheritance is important to master CSS. This article will help.
  • CSS Box Model - An article explaining the foundation of layout on the web.
    • Also have a look at the detailed information about the box-sizing property.
  • Responsive Design - Extensive information about all aspects of responsive design to make sites that look great and work well for everyone.

CSS units

Selectors

  • Basic CSS Selectors - An introduction to the very basic CSS selectors you need to know.
  • Advanced CSS Selectors - Level up your knowledge. From attribute selectors to CSS3 pseudo classes.
  • CSS Diner - Learn how to use CSS selectors with this fun little game.

Custom properties (aka CSS variables)

Layout

Classic layouting

  • Floats - In depth information about how to use (and clear) floats.
  • Positioning Types - A closer look at a few little-known things related to the CSS positioning layout method.
  • inline-block - Shows in which cases it makes sense to use the display property inline-block for layouting.

Flexbox

  • Flexbox playground - Play with Flexbox examples on CodePen.
  • Flexbox Defense - A tower defense game in the browser to learn about Flexbox with fun.
  • Flexbox Froggy - Learn all the basics of Flexbox with a fun game involving frogs and lily pads.
  • Flexbugs - Community-curated list of flexbox issues and cross-browser workarounds for them.
  • Flexbox Zombies - A training course driven by a storyline where you use Flexbox and a crossbow to hunt zombies.
  • What the Flexbox? - A simple, free 20 video course that will help you master CSS Flexbox!

Grid

  • A Complete Guide to Grid - All you need to know about CSS Grid Layout on one page.
  • Grid by Example - Besides examples of how to use Grid, this site also has additional useful learning resources.
  • Designing with Grid - Talk about the new layout possibilities CSS Grid is offering.
  • Grid Garden - Lovely game where you write CSS code to grow your carrot garden.
  • GridBugs - Community-curated list of Grid interop issues and workarounds for them.
  • Grid Critters - Learn CSS grid layout by mastering an adventure game.
  • CSS Grid - Learn CSS grid with Wes Bos - Free 4 hours video course, 25 Videos.

Animation


Related

Awesome JavaScript Learning - A tiny list limited to the best JavaScript learning resources.