awesome-css-learning
github.com/micromata/awesome-css-learning ↗A tiny list limited to the best CSS Learning Resources
Use this list with your AI agent
Add the Context Awesome MCP server to Claude, Cursor, or any MCP client, then ask:
"Show me flexbox resources from awesome-css-learning"
Installation instructions →What's inside
Layout
- A Complete Guide to FlexboxFlexbox
All you need to know about Flexbox on one page.
- A Complete Guide to GridGrid
All you need to know about CSS Grid Layout on one page.
- CSS GridGrid
Learn CSS grid with Wes Bos - Free 4 hours video course, 25 Videos.
- Designing with GridGrid
Talk about the new layout possibilities CSS Grid is offering.
- Flexbox DefenseFlexbox
A tower defense game in the browser to learn about Flexbox with fun.
- Flexbox FroggyFlexbox
Learn all the basics of Flexbox with a fun game involving frogs and lily pads.
Selectors
- Advanced CSS Selectors
Level up your knowledge. From attribute selectors to CSS3 pseudo classes.
- Basic CSS Selectors
An introduction to the very basic CSS selectors you need to know.
- CSS Diner
Learn how to use CSS selectors with this fun little game.
Animation
- All you need to know about CSS Transitions
Also addressing advanced topics from chaining and events to hardware acceleration and animation functions.
- animatable
Nice little page demonstrating which CSS properties are animatable.
- 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.
- CSS Transitions and Transforms for Beginners
An introduction to CSS transitions and CSS (2D) transforms.
Fundamental concepts
- box-sizing
- CSS Box Model
An article explaining the foundation of layout on the web.
- Responsive Design
Extensive information about all aspects of responsive design to make sites that look great and work well for everyone.
- Specificity and inheritance
Understanding specificity and inheritance is important to master CSS. This article will help.
- The cascade
This article explains what the cascade is and how this affects you.
CSS References
Custom properties (aka CSS variables)
- CSS Variables: Why Should You Care?
A short introduction to 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.
- 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.
CSS units
- Fun with Viewport Units
Imparts the basics and shows some nifty use-cases.
- The Lengths of CSS
Overview covering absolute and relative units.
CSS in a nutshell
- Introduction to CSS
This screencast series will teach you the basics of CSS in about one hour.
Showing a sample of 43 resources. View the full list on GitHub →