40 Best Free CSS Learning Resources
HTML and CSS aren’t considered “programming” languages though, simply because they only determine the structure and the style of the webpage you’re building. They don’t contain any instructions like the other front-end languages. Web design is something which is very interesting and this is something which can also be very challenging at times. If you are one of the people who love to design using CSS, there are actually thousands of learning resources which you can try out. This post will cover 40 of the best CSS learning resources, covering fundamental concepts, units, selectors, custom properties, animation and many more.
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.
- 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.
- The Lengths of CSS
Overview covering absolute and relative units.
- Fun with Viewport Units
Imparts the basics and shows some nifty use-cases.
- Basic CSS Selectors
An introducing 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 Dinner
Learn how to use CSS selectors with this fun little game.
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
Other Related Posts
- 250 Free Web Design, UI / UX, CSS, Usability and Programming Ebooks – 2017
Web design brings together plethora of web technologies to create various platforms either for businesses to carry their name, or sell their products, or simply an online home for fans and loyal customers to drop by now and then.
- Other free CSS ebooks and resources
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.
Shows in which cases it makes sense to use the display property
- 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.
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!
- 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.
Community-curated list of Grid interop issues and workarounds for them.
- Grid Critters
Learn CSS grid layout by mastering an adventure game.
- CSS Transitions and Transforms for Beginners
An introduction to to CSS transitions and CSS (2D) transforms.
- All you need to know about CSS Transitions
Also addressing advanced topics from chaining and events to hardware acceleration and animation functions.
- 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.
Nice little page demonstrating which CSS properties are animatable.