CSS · From your first rule to modern layouts and animation
CSS, start to finish
How the web is styled: selectors, the cascade, the box model, flexbox, grid and motion. Every lesson is a small machine you can step through, then a short quiz.
0 of 18 available lessons completed
Part of: Web developer
Module 01 Beginner
Styling basics
Rules, selectors and how the browser decides which style wins.
-
Lesson 01 · 8 min
What CSS is
9 stepsNot started -
Lesson 02 · 9 min
Selectors
9 stepsNot started -
Lesson 03 · 10 min
The cascade and specificity
8 stepsNot started -
Lesson 04 · 9 min
The box model
7 stepsNot started -
Lesson 05 · 10 min
Colours and units
9 stepsNot started -
Lesson 06 · 9 min
Typography
8 stepsNot started
Module 02 Intermediate
Layout
Putting boxes where you want them, on every screen size.
-
Lesson 07 · 10 min
Display and normal flow
8 stepsNot started -
Lesson 08 · 12 min
Flexbox
9 stepsNot started -
Lesson 09 · 12 min
CSS Grid
8 stepsNot started -
Lesson 10 · 10 min
Positioning
8 stepsNot started -
Lesson 11 · 11 min
Responsive design and media queries
10 stepsNot started -
Lesson 12 · 10 min
Container queries
7 stepsNot started
Module 03 Advanced
Motion and scale
Animation, reusable design systems and how the browser paints.
-
Lesson 13 · 12 min
Transitions and animations
10 stepsNot started -
Lesson 14 · 12 min
Transforms
9 stepsNot started -
Lesson 15 · 11 min
Custom properties (CSS variables)
8 stepsNot started -
Lesson 16 · 10 min
Pseudo-classes and pseudo-elements
10 stepsNot started -
Lesson 17 · 12 min
Organising CSS at scale
9 stepsNot started -
Lesson 18 · 12 min
How the browser renders: style, layout, paint
10 stepsNot started
Go deeper
Special topics
Stand-alone deep dives.