HTML & CSS Mastery Path¶

Mastery Path

BOOTCAMP

VINOD BHANUJA

Every website, app screen and email you've ever read was drawn by a browser from HTML and CSS. They're the two languages nobody can avoid on the web, and two of the most underestimated. Most people learn enough to get a page on screen, then spend years fighting the same problems: a style that won't apply, a layout that breaks on phones, a z-index that does nothing, a form a screen-reader user can't complete. Nearly all of those problems disappear once you understand what the browser is actually doing with your markup and your rules — and that's what this course teaches.

It starts from an empty file and ends at production. Level 1 covers how browsers parse and render, document structure, semantic text, images, tables, forms, selectors, the cascade and the box model, ending with a validated recipe page. Level 2 is layout and style: typography, colour and contrast, Flexbox and Grid in depth, positioning and stacking contexts, responsive design and custom properties, ending with a responsive, dark-mode product page. Level 3 is accessibility and modern CSS: the accessibility tree, landmarks, keyboard and focus, ARIA, accessible forms, container queries, :has(), nesting, cascade layers, motion, and the native <dialog>, <details> and popover, ending with a keyboard-tested component gallery. Level 4 is production: rendering and loading performance, CSS architecture, design tokens, internationalization and right-to-left layouts, metadata and structured data, print, browser support and automated testing, ending with a conference website and a complete quality pipeline.

Every lesson has a How It Actually Works section — why the parser inserts a <tbody> you never wrote, how specificity is compared, why a flex item refuses to shrink below its content, why z-index: 9999 loses to z-index: 10, why a container query can collapse its container to zero width.

Checked in real browsers — and honest about what couldn't be

Examples in this course were run in headless Chromium and WebKit (Safari's engine) while it was written, and the output shown — computed styles, measured box sizes, accessibility trees, validator and linter messages, test results — is output we actually observed, including first attempts that failed. Where something couldn't be observed from an automated browser (screen-reader speech, search-engine behaviour, Firefox in our environment), the lesson says so.

How the program is organized¶

Level	Focus	Modules
Level 1 · Entry	How browsers render, document structure, semantic text and links, images and media, tables, forms, selectors, the cascade, the box model	9 topics + 1 project (a recipe page)
Level 2 · Intermediate	Typography, colour and contrast, Flexbox fundamentals and sizing, Grid fundamentals and advanced Grid, positioning and stacking, responsive design, custom properties	9 topics + 1 project (a responsive product page)
Level 3 · Advanced	Accessibility foundations, landmarks and headings, keyboard and focus, ARIA, accessible forms, container queries, modern selectors and layers, motion, native interactive elements	9 topics + 1 project (an accessible component gallery)
Level 4 · Master	Rendering and loading performance, CSS architecture, design tokens, logical properties and i18n, metadata and SEO, print, progressive enhancement, testing and auditing	9 topics + 1 capstone (a conference website)

How to use this site¶

Keep a browser and an editor side by side. Every lesson is meant to be typed and tried. Code blocks are titled with a file name when they belong to a file you're building.
Live in devtools. The Elements, Styles, Computed, Accessibility and Layout panels answer most "why does it look like that?" questions faster than any article. Lessons tell you which panel to open.
Test like a user who isn't you. Use the keyboard alone, zoom to 200%, switch to dark mode, and try a screen reader — from Level 1 onward, not as an afterthought.
Next steps. When you're ready for scripting, continue with JavaScript Mastery Path and TypeScript Mastery Path; for component frameworks, React, Vue.js and Angular Mastery Paths all build on what's here; for end-to-end testing, Playwright Mastery Path.
Do the Exercise at the end of each lesson; the module-10 projects build on them.