Track Awesome Css Learning Updates Daily

A tiny list limited to the best CSS Learning Resources

🏠 Home · 🔍 Search · 🔥 Feed · 📮 Subscribe · 😺 micromata/awesome-css-learning · ⭐ 2.4K · 🏷️ Learn

[ Daily / Weekly / Overview ]

Aug 09, 2022

Fundamental concepts

• Responsive Design - Extensive information about all aspects of responsive design to make sites that look great and work well for everyone.

Jun 02, 2022

Layout / Grid

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

Mar 23, 2022

CSS in a nutshell

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

Selectors

• Basic CSS Selectors - An introduction to the very basic CSS selectors you need to know.

Layout / Grid

• Grid by Example - Besides examples of how to use Grid, this site also has additional useful learning resources.

Animation / Grid

• CSS Transitions and Transforms for Beginners - An introduction to CSS transitions and CSS (2D) transforms.

Mar 21, 2022

Selectors

• CSS Diner - Learn how to use CSS selectors with this fun little game.

Apr 09, 2021

Animation / Grid

• All you need to know about CSS Transitions - Also addressing advanced topics from chaining and events to hardware acceleration and animation functions.

Dec 13, 2019

Layout / Flexbox

• What the Flexbox? - A simple, free 20 video course that will help you master CSS Flexbox!

Layout / Grid

• Designing with Grid - Talk about the new layout possibilities CSS Grid is offering.

Oct 02, 2018

Layout / Grid

• Grid Critters - Learn CSS grid layout by mastering an adventure game.

May 28, 2018

Layout / Grid

• GridBugs (⭐1.2k) - Community-curated list of Grid interop issues and workarounds for them.

May 11, 2018

Animation / Grid

• CSS 3D transforms - Multi page tutorial with examples like card flip and carousel effects.

• CSS Animation for Beginners - Imparts the concepts of CSS animations with keyframes.

• animatable - Nice little page demonstrating which CSS properties are animatable.

May 09, 2018

Layout

• Learn CSS Layout - Learn about CSS layout techniques in 5 chapters.

Layout / Grid

• Grid Garden - Lovely game where you write CSS code to grow your carrot garden.

May 08, 2018

Layout

• Laying Out The Future With Grid And Flexbox - Introduction of a new layout system encompassing Flexbox, CSS Grid and the Box Alignment Module.

May 07, 2018

CSS References

• Can I use - Interactive browser support tables for CSS (and HTML5).

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.

Selectors

• Advanced CSS Selectors - Level up your knowledge. From attribute selectors to CSS3 pseudo classes.

Custom properties (aka CSS variables)

• CSS Variables: Why Should You Care? - A short introduction to CSS variables.

• Locally Scoped CSS Variables: What, How, and Why - Describes the advantages of locally scoped CSS variables.

• Using CSS variables correctly - Patterns and anti-patterns for using CSS variables.

• Everything you need to know about CSS Variables - In depth article going beyond the basics of CSS Variables using real-world examples.

• Getting Reactive with CSS - Mindblowing talk about the possibilities of the combination of CSS variables and functional reactive programming in JavaScript.

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.

Layout / Flexbox

• Flexbugs (⭐13k) - 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.

May 06, 2018

CSS References

• codrops - An extensive CSS reference offering way more content than MDN.

CSS units

• The Lengths of CSS - Overview covering absolute and relative units.

• Fun with Viewport Units - Imparts the basics and shows some nifty use-cases.

Layout

• Layout Land - Jen Simmons video series about the new CSS Layout possibilities.

Layout / Flexbox

• A Complete Guide to Flexbox - All you need to know about Flexbox on one page.

• 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.

Layout / Grid

• A Complete Guide to Grid - All you need to know about CSS Grid Layout on one page.