HTML & CSS
Web foundations done right — 42 modules, no prerequisites
42 Modules. Foundations to Advanced.
Follow in order. Each module builds on the last. Every concept is introduced exactly when you need it, not before.
What is HTML? How the Web Actually Works
Browsers, servers, the DOM, and the HTTP request/response cycle — the foundation every web page sits on, explained from first principles.
Document Structure — DOCTYPE, html, head, body
Every HTML document follows the same skeleton. What each part actually does, and the mistakes that silently break rendering.
Text Elements & Semantic Structure
Headings, paragraphs, and the semantic tags — header, nav, main, section, article, aside, footer — that give a page real meaning.
Links and Navigation
The anchor tag in full — relative vs absolute paths, targets, anchor links within a page, and building real navigation.
Images and Media
img, alt text, figure/figcaption, audio, video, and the source element — plus lazy loading and why alt text is never optional.
Lists — ul, ol, dl
Ordered, unordered, and description lists — nesting them correctly, and the semantic reasons to choose one over the other.
Tables — Structure and Correct Usage
table, thead/tbody/tfoot, th, td, colspan/rowspan — and exactly why tables should never be used for page layout.
HTML Forms — Inputs & Validation Basics
form, every common input type, labels, placeholder, and the built-in validation attributes browsers already give you for free.
HTML Forms — Advanced
select, textarea, fieldset/legend, radio and checkbox groups, and the form-submission details that trip up beginners.
Semantic HTML & Accessibility Basics
Why semantics matter beyond styling — ARIA basics, accessible forms, and how screen readers and search engines actually read your page.
HTML5 APIs Overview
data-* attributes, contenteditable, and the drag-and-drop API — the browser features beyond plain markup.
Embedding Content — iframe, embed, object
Embedding external content safely — iframe, embed, object, and the security considerations every embed introduces.
Metadata & SEO Fundamentals
meta tags, Open Graph, the viewport meta tag, and favicons — the head content that determines how your page is discovered and shared.
HTML Entities & Special Characters
Why some characters need to be escaped, the entities you will actually use, and the bugs that happen when you forget.
HTML Best Practices & Validation
The W3C validator, void elements, self-closing tag myths, and the conventions that separate clean markup from markup that merely renders.
Building a Complete Static Page
A full project pulling structure, semantics, media, and forms together into one real, complete HTML page — start to finish.
What is CSS? Syntax, Selectors & the Cascade
How CSS actually applies styles — selectors, the cascade, inheritance, and the mental model everything else in CSS builds on.
The Box Model — Margin, Border, Padding, Content
Every element on the page is a box. Understanding the box model precisely is what makes every later layout concept make sense.
Colors, Units & Typography
px vs em vs rem vs %, every color format, font-family stacks, and web fonts — the values you will type in every single stylesheet.
CSS Selectors Deep Dive
Combinators, pseudo-classes, pseudo-elements, and specificity — the rules that decide which style actually wins.
Display & Positioning
display: block/inline/inline-block, and position: static/relative/absolute/fixed/sticky — with z-index and stacking contexts explained properly.
Backgrounds & Borders
Gradients, background-image, border-radius, and box-shadow — the visual polish tools used in almost every real design.
Flexbox — The Complete Guide
Every Flexbox property explained from first principles — the main axis, cross axis, and how flex-grow/shrink/basis actually work together.
Flexbox in Practice — Real Layouts
Building real, common UI patterns with Flexbox — navbars, card grids, centering, and the sticky-footer layout everyone eventually needs.
CSS Grid — The Complete Guide
Two-dimensional layout done right — grid-template-columns/rows, grid areas, and the mental model that makes Grid click.
CSS Grid in Practice — Real Layouts
Real page layouts built with Grid — holy grail layouts, image galleries, and dashboards that would be painful with Flexbox alone.
Flexbox vs Grid — When to Use Each
The decision every layout starts with — one-dimensional vs two-dimensional thinking, and when to combine both in the same page.
Responsive Design & Media Queries
Building layouts that adapt to any screen — media query syntax, common breakpoints, and testing responsively for real.
Mobile-First Design Principles
Why designing for the smallest screen first produces better layouts, and how to structure your CSS to make it painless.
CSS Custom Properties (Variables)
Native CSS variables — scoping, fallbacks, and using them to build a real, maintainable design system without a preprocessor.
CSS Transitions
Smooth, performant state changes — transition-property, timing functions, and the properties that animate cheaply vs expensively.
CSS Animations & Keyframes
@keyframes and the animation property in full — building genuinely custom motion beyond simple hover transitions.
CSS Transforms (2D and 3D)
translate, rotate, scale, skew, and 3D transforms with perspective — how modern interfaces move without touching layout.
Modern Selectors — :has, :is, :where, Container Queries
The newest selectors that changed how CSS is written — the parent selector finally arrives, plus container queries for truly component-based responsive design.
CSS Architecture & Naming Conventions
BEM and other naming systems, organizing large stylesheets, and the patterns that keep CSS maintainable as a project grows.
Intro to Sass — Variables, Nesting, Mixins
The CSS preprocessor that came before CSS variables — nesting, mixins, and why many real codebases still use it today.
Responsive Images & Performance
srcset, sizes, picture, and the image-loading techniques that keep a real page fast on real connections.
CSS Accessibility Best Practices
Focus states, color contrast, prefers-reduced-motion, and the CSS-level decisions that make or break real accessibility.
Cross-Browser Compatibility & Debugging
Vendor prefixes, feature detection, DevTools workflows, and debugging the CSS bug that only shows up in one browser.
Building a Complete Responsive Website
The capstone project — a full, real, responsive website built end-to-end using everything from this entire track.
CSS Best Practices & Common Mistakes
The conventions that separate maintainable CSS from a stylesheet nobody wants to touch — and the mistakes every beginner makes at least once.
HTML & CSS Interview Prep — Common Questions and Patterns
The HTML and CSS questions that come up in real front-end interviews, answered at senior-engineer depth.
All 42 modules are live. Start today.
Start with Module 01 today. Each module is self-contained enough to read on its own — but follow the order. Every concept earns the next one.
Discussion
0Have a better approach? Found something outdated? Share it — your knowledge helps everyone learning here.