CSS: From Basics to Expert
Four levels, twelve lessons, every example runnable in the browser
CSS decides what a page looks like. HTML says a thing is a heading; CSS says that headings are 32 pixels, dark blue, and have space above them. The two are deliberately separate, which is why one stylesheet can restyle a thousand pages.
Overview
Modern CSS has also quietly absorbed things that used to need JavaScript or a build step - theming, container-relative layout, cascade control. A good deal of what people still reach for a framework to do, the browser now does.
Introduction
You need to be able to write HTML to start this course; you do not need to have written any CSS. If you have, the honest test is Level 1: if you cannot say why one rule beats another, or what box-sizing actually changes, start there anyway - almost every CSS bug that takes an afternoon comes back to one of those two answers.
Each level is three lessons and a Level Check quiz, with an Expert Exam at the end. Every example is a complete HTML document with its CSS in a style block, so it renders the moment you open it - and the Try yourself button puts it in the playground, where you can change a value and watch the page redraw beside it.
Every lesson ships a complete, professional example: an HTML document with its CSS in a style block, so it renders the moment you open it. Press the "Try yourself!" button under any example and it opens in the playground, where you can edit it on the left and watch the result redraw on the right.
By the end you will be able to lay out a responsive page without a framework and without guessing: a grid that adapts with no media queries, a theme that switches with a single custom property, overlays that stack in the order you intended, and animation that respects somebody who has asked their system for less of it.
What you will be able to do
- Predict which rule wins without opening devtools
- Build a page layout with Flexbox and Grid rather than with margins
- Make a design responsive without writing a media query
- Theme a whole site from one block of custom properties
- Animate without causing layout, and honour reduced-motion
- Use cascade layers and container queries the way frameworks now do
What each level covers
4 levels · 16 lessons
-
Level 1 - Basic
The three questions every CSS rule depends on, answered before anything else. Which selector wins and why specificity is not a popularity contest; how a box is actually measured, and what box-sizing changes about that; and which unit to reach for, which is the difference between a layout that survives a larger font size and one that does not.
4 lessons 34 min of reading
Start with Selectors and the Cascade → -
Level 2 - Intermediate
Layout, which is the part people most often fight. Flexbox handles one dimension at a time and is the right tool far more often than it is used; Grid handles rows and columns together; and the last lesson builds a page that adapts to its space without a single media query, using clamp, minmax and auto-fit.
4 lessons 44 min of reading
Start with Flexbox: One Dimension at a Time → -
Level 3 - Advanced
The CSS that decides what a page looks like, and what covers what. Custom properties make a theme a handful of values rather than a find-and-replace; positioning, stacking contexts and overflow explain the overlay that will not go on top; and the motion lesson covers transitions, keyframes and honouring prefers-reduced-motion.
4 lessons 47 min of reading
Start with Custom Properties and Theming → -
Level 4 - Expert
The modern cascade, and the cost of what you write. Cascade layers let you control specificity deliberately instead of adding another selector; container queries let a component respond to its own space rather than the viewport; and the last lesson is about what makes a page expensive to paint, which is rarely the property you suspect.
4 lessons 56 min of reading
Start with Cascade Layers and Specificity Control →
Guides and articles
Longer reading about this subject, written alongside the course.
Before you start
- You can write basic HTML
- A text editor and a browser
Common questions
- What does the CSS: From Basics to Expert course cover?
- It is 4 levels and 16 lessons: Level 1 - Basic; Level 2 - Intermediate; Level 3 - Advanced; Level 4 - Expert. Each level ends with a quiz, and the last one is an exam over the whole course.
- How long does it take?
- About 181 minutes of reading and exercises - roughly 3 hours. It is self-paced with no cohort and no start date, so you can leave and come back and the site remembers where you were.
- What do I need to know first?
- You can write basic HTML. A text editor and a browser.
- Is it free?
- Yes. Every lesson, example and quiz in this course is free to read, and you do not need an account to read them. Signing in only adds progress tracking and quiz results.
- What will I be able to do afterwards?
- Predict which rule wins without opening devtools. Build a page layout with Flexbox and Grid rather than with margins. Make a design responsive without writing a media query. Theme a whole site from one block of custom properties. Animate without causing layout, and honour reduced-motion. Use cascade layers and container queries the way frameworks now do.