awesome-css-learning

An extensive CSS reference offering way more content than

Interactive browser support tables for CSS (and HTML5)

This screencast series will teach you the basics of CSS in about one hour

This article explains what the cascade is and how this affects you

Understanding specificity and inheritance is important to master CSS. This article will help

An article explaining the foundation of layout on the web

Also have a look at the detailed information about the property

Extensive information about all aspects of responsive design to make sites that look great and work well for everyone

Overview covering absolute and relative units

Imparts the basics and shows some nifty use-cases

An introduction to the very basic CSS selectors you need to know

Level up your knowledge. From attribute selectors to CSS3 pseudo classes

Learn how to use CSS selectors with this fun little game

A short introduction to CSS variables

Describes the advantages of locally scoped CSS variables

Patterns and anti-patterns for using CSS variables

In depth article going beyond the basics of CSS Variables using real-world examples

Mindblowing talk about the possibilities of the combination of CSS variables and functional reactive programming in JavaScript

Learn about CSS layout techniques in 5 chapters

Jen Simmons video series about the new CSS Layout possibilities

Introduction of a new layout system encompassing Flexbox, CSS Grid and the Box Alignment Module

In depth information about how to use (and clear) floats

A closer look at a few little-known things related to the CSS positioning layout method

Shows in which cases it makes sense to use the display property for layouting

All you need to know about Flexbox on one page

Play with Flexbox examples on CodePen

A tower defense game in the browser to learn about Flexbox with fun

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

A training course driven by a storyline where you use Flexbox and a crossbow to hunt zombies

A simple, free 20 video course that will help you master CSS Flexbox!

All you need to know about CSS Grid Layout on one page

Besides examples of how to use Grid, this site also has additional useful learning resources

Talk about the new layout possibilities CSS Grid is offering

Lovely game where you write CSS code to grow your carrot garden

GridBugs

Community-curated list of Grid interop issues and workarounds for them

Learn CSS grid layout by mastering an adventure game

Learn CSS grid with Wes Bos - Free 4 hours video course, 25 Videos

An introduction to CSS transitions and CSS (2D) transforms

Also addressing advanced topics from chaining and events to hardware acceleration and animation functions

Multi page tutorial with examples like card flip and carousel effects

Imparts the concepts of CSS animations with keyframes

Nice little page demonstrating which CSS properties are animatable