Course
Web Development from First Principles
Build web pages the way experienced front-end engineers do: semantic HTML that carries meaning, CSS layout that doesn't fight you, responsive design that starts mobile-first, and accessibility that ships in the first draft.
HTML That Means Something
The document is the API. Semantic markup, forms that submit correctly, and why divs are a code smell.
- 01The Document Is the APIWhat a browser actually does with your markup — parsing, the DOM tree, and why document structure matters more than any framework.18mOpen
- 02Semantic HTML: Markup That Describes ItselfWhy `<article>`, `<nav>`, and `<time>` beat a pile of divs — for SEO, for screen readers, and for the next developer who reads your code.20mOpen
- 03Forms That Actually SubmitLabels, fieldsets, and the built-in validation every browser already gives you — before you reach for JavaScript.18mMembers
CSS: Layouts That Don't Fight You
The box model nobody explains properly, flexbox for one-dimensional layouts, grid for two.
- 01The Box Model Nobody Explains ProperlyContent, padding, border, margin — and the one `box-sizing` rule that ends the arithmetic forever.16mOpen
- 02Flexbox for One Dimension, Grid for TwoStop memorizing tricks: pick flexbox when items flow in a line, grid when rows and columns both matter.22mMembers
- 03Modern CSS: Custom Properties, Container Queries, and :has()The CSS that shipped while everyone was using frameworks — design tokens, container queries, and the parent selector we waited twenty years for.20mOpen
Responsive & Accessible by Default
Mobile-first CSS, fluid type, and the accessibility habits that cost you nothing when they're habits.
- 01Mobile-First Isn't a Slogan, It's a CascadeWrite the smallest-screen layout first, then enhance upward with min-width queries — the code gets simpler, not harder.18mMembers
- 02Accessibility Is a Habit, Not a FeatureAlt text, labels, contrast, keyboard focus — the four things that cover 80% of real accessibility work.20mMembers
- 03JavaScript in the Browser: DOM, Events, and fetchThe platform APIs underneath every framework — how the DOM actually works, why events bubble, and fetch patterns that don't leak race conditions.20mOpen