Course

CSS

CSS from selectors and the box model to responsive layouts, Flexbox, Grid, animation, architecture, and accessibility.

Start course

basic to advanced / 21 lessons

Log in to track your progress through this course.

About this course

Who it is for

This course is for learners who know basic HTML and want to style pages with confidence, and for developers who can make CSS work but want to understand why it works. You only need a browser and an editor.

What it covers

It begins with a working setup and the foundations: selectors, the cascade, specificity, the box model, units and typography. The layout module covers positioning, the display property, Flexbox, Grid, responsive design and media queries. You then learn custom properties, transitions, transforms, animations and pseudo-classes and pseudo-elements. The last module covers how to organise CSS in larger projects, accessibility and container queries.

How to use it

Every lesson includes live examples, common mistakes, an exercise, a quiz and interview questions. Layout is where most people get stuck, so spend extra time on the Flexbox and Grid lessons and try their exercises before moving on. Keep the browser developer tools open while you work, because the Styles and Computed panels show exactly which rule won and why.

Course roadmap

Your CSS journey

Milestones
4
Topics
21
Start here
  1. Milestone 1CSS Foundations7 topics
  2. Milestone 2Layout Systems6 topics
  3. Milestone 3Design Tokens and Motion5 topics
  4. Milestone 4Maintainable CSS3 topics
Finish line