Learn CSS is a free course on web.dev, the web development site run by Google's Chrome team, written by the front-end developer Andy Bell. It explains how CSS actually works, one concept per module, from the box model to grid and z-index, and every module mixes reading with interactive demos and a short self-assessment. A companion podcast episode covers each topic for learners who prefer listening.
The course is aimed at both beginners and experienced developers. You can read it from start to finish or use it as a reference whenever a layout behaves unexpectedly.
The modules at a glance
| Area | Modules | Why it matters |
|---|---|---|
| How rules apply | Box model, Selectors, The cascade, Specificity, Inheritance | explains why a style does or does not take effect |
| Layout | Layout, Flexbox, Grid, Logical properties, Spacing | builds pages that adapt to any screen |
| Visual styling | Color, Sizing units, Gradients, Backgrounds, Text and typography, Shadows | controls how elements look |
| Behaviour and depth | Z-index and stacking contexts, Pseudo-classes, Pseudo-elements, Transitions, Animations, Focus | adds interaction and accessibility |
| Modern CSS | Functions, Filters, Blend modes | uses newer features supported by current browsers |
Concepts before recipes
Many CSS tutorials show a snippet that solves one problem. This course takes the opposite approach: it starts with the rules that explain every snippet. The box model, the cascade, and specificity come first, because most frustrating CSS bugs, such as margins that collapse or styles that seem to be ignored, are misunderstandings of these three ideas.
The layout modules then compare flexbox and grid, so you learn when a one-dimensional row or column is enough and when a two-dimensional grid is the better tool.
What you need beforehand
The course assumes you can write basic HTML and link a stylesheet. Its introduction points complete newcomers to an HTML primer first; the Learn HTML course on web.dev, also listed in this category, covers that ground.
Getting the most from it
- Keep a small practice page open in a code editor and reproduce each demo there.
- Answer the self-assessment at the end of every module before moving on.
- After the layout modules, rebuild the structure of a website you use daily with grid and flexbox.
- Return to the cascade and specificity modules whenever a style refuses to apply.
The course has no certificate or graded projects. Its value lies in the clarity of the explanations, which makes it a useful companion to any project-based HTML and CSS curriculum.