Stage 1 of 7 · 9 lessons · ~3 months

How the web works, HTML and CSS

What happens between typing a URL and seeing a page, then the structure and styling of that page: semantic HTML, accessible forms, the box model, Flexbox, Grid and layouts that work on a phone first.

Start: From URL to page: DNS, TCP, TLS and HTTP

Lessons· one lesson for each topic, in this order

Start with· follow one of these

CourseFree
The Odin Project
The Odin Project · Beginner
Foundations course: HTML, CSS and the web built in your own editor, not a sandbox
GuideFree
web.dev
Google · Intermediate
Free Learn HTML, Learn CSS and Learn Accessibility courses explain the why behind layout

Practise

Frontend Mentor
Real designs to rebuild, which is where CSS layout finally sticks

Keep handy

MDN Web Docs
The reference for every HTML element and CSS property, with browser support notes
W3Schools
Quick syntax lookups and try it editors when you only need a reminder

Also worth your time

What Happens When You Type a URL? (Step-by-Step Explanation) (opens in a new tab)Read
DNS, TCP, TLS, HTTP and rendering in one read: the request path behind every page
CSS for JavaScript DevelopersGo deeperPaid
Paid, but it turns CSS from guesswork into rules you can reason about

Before moving on: Build a three page responsive site from a Frontend Mentor design with no CSS framework, then use it with only a keyboard and fix every place where focus gets lost or hidden.

Tauseef's advice

Learn Flexbox and Grid properly instead of copying snippets until something lines up. Reach for the right HTML element before a div: a real button and a real label fix most accessibility problems before they start.