Google Chrome Team
Learn CSS — web.dev
The Chrome team's CSS course — box model, cascade and specificity first, then Flexbox, Grid, container queries and animation across ~39 modules.
Intermediate4–10 hours
Structure and appearance — the two things every web page needs before it needs anything else. HTML and CSS get dismissed as the easy part, and then people spend years not really understanding the cascade, which is why their layouts fight back.
Four entries in this category, all free, and they divide neatly between courses that make you build and references that make you understand.
Responsive Web Design is freeCodeCamp's rebuilt 2022 certification: twenty projects, each with a test suite you have to pass, covering semantic HTML, forms, accessibility, Flexbox and Grid. You can't fake your way through it, which is the point. The Odin Project: Foundations goes wider — command line, Git, HTML, CSS, Flexbox and JavaScript — and teaches through specifications and curated reading rather than walkthroughs. Harder road, better habits, and putting Git before anything else is a decision that pays off for years. It's also the only entry here that has you working on your own machine rather than in a browser.
Learn CSS from the Chrome team spends its early modules on the box model, the cascade and specificity before it touches layout, then covers Flexbox, Grid, container queries and animation across around 39 modules. That ordering is unusual and correct — most CSS frustration is a cascade misunderstanding wearing a costume. MDN: Learn Web Development is Mozilla's structured area covering HTML, CSS layout, JavaScript, accessibility and version control, with dozens of articles per module and nothing to sell you.
Between them these cover the fundamentals thoroughly, and then stop. Nothing on Tailwind or any utility framework, which a large share of jobs now expect. Nothing on Sass or CSS architecture at scale. Nothing on CSS animation as a subject, nothing on design tokens or theming, and nothing recent on newer layout features beyond what web.dev includes. For a category this foundational, the advanced shelf is empty.
freeCodeCamp for the projects, web.dev for the mental model, MDN when something surprises you. Skip the tutorial-hopping — the difference between people who are good at CSS and people who aren't is almost entirely whether they understand specificity.
Google Chrome Team
The Chrome team's CSS course — box model, cascade and specificity first, then Flexbox, Grid, container queries and animation across ~39 modules.
MDN Web Docs
Mozilla's structured learning area — HTML, CSS layout, JavaScript, accessibility and version control across dozens of articles per module, no product to sell.
freeCodeCamp
freeCodeCamp's rebuilt 2022 certification — semantic HTML, forms, accessibility, Flexbox and Grid, taught by building 20 projects with test suites to pass.
The Odin Project
The Odin Project's open-source entry path — command line, Git, HTML, CSS, Flexbox and JavaScript, taught through specs and curated reading, not walkthroughs.