Skip to main content

📄 HTML & the platform

The bones of any page — and the contract your backend reads

85 lessons across 7 modules + capstones. Not 30 lessons of <h1>/<p>/<a> — we go deep on what HTML actually is in 2026: the form contract between browser and server, the accessibility tree, the SEO surface, the streaming-render unit. Module 1 ships now; the rest land on a rolling schedule.

91
lessons
8
modules
10
free
▶ Start lesson 1

First 10 lessons free, no card required. The rest unlock with a 7-day Pro trial.

1

Module 01The document, fast

8 lessons

Doctype, head, charset, viewport, lang, preload, prefetch, meta SEO basics. Speed-run the boilerplate — then never write it by hand again.

  1. 1.Doctype and why it's not optional6m · 50xpFREE
  2. 2.The viewport meta tag (or your site looks broken on phones)5m · 50xpFREE
  3. 3.<title> and meta description: what Google actually shows8m · 75xpFREE
  4. 4.lang attribute: not just for screen readers6m · 75xpFREE
  5. 5.Favicon and theme-color (the tab strip details)6m · 75xpFREE
  6. 6.preload and prefetch: telling the browser what you need9m · 100xpFREE
  7. 7.OpenGraph: how your link looks when shared8m · 100xpFREE
  8. 8.Module capstone: a Lighthouse-100 landing page15m · 200xpFREE
2

Module 02Semantic structure (& why screen-readers hate <div>)

12 lessons

<main>, <nav>, <article>, headings hierarchy, landmark roles, accessibility tree. Render in VoiceOver-simulator mode so you HEAR the difference.

  1. 1.Why semantic tags matter (the screen-reader test)7m · 75xpFREE
  2. 2.<main>, <header>, <footer>: page-level landmarks7m · 75xpFREE
  3. 3.<nav> + the role of landmark roles7m · 75xp🔒
  4. 4.<article> vs <section>: when each is right8m · 100xp🔒
  5. 5.<aside>: sidebars, callouts, related6m · 75xp🔒
  6. 6.Heading hierarchy: one h1, never skip levels8m · 100xp🔒
  7. 7.<figure> + <figcaption>: not just for images6m · 75xp🔒
  8. 8.<time>, <address>, <abbr>: micro-semantics7m · 75xp🔒
  9. 9.<details> and <summary>: native collapsibles6m · 75xp🔒
  10. 10.<dialog>: modals without a framework8m · 100xp🔒
  11. 11.ARIA landmarks when semantic tags aren't enough8m · 100xp🔒
  12. 12.Module capstone: rebuild a div-soup page14m · 200xp🔒
3

Module 03Forms as the API contract

20 lessons

Inputs, names, types, validation attributes, the wire shape your backend parses. Plus the security half: CSRF, SameSite, honeypot, novalidate, formdata event, XSS-safe rendering. Every lesson ships against a stub POST and we diff the body.

  1. 1.<form action method>: the request your backend receives8m · 75xp🔒
  2. 2.<input type=email|url|tel>: browser validation, free6m · 75xp🔒
  3. 3.<input type=number>: min, max, step6m · 75xp🔒
  4. 4.Date/time inputs7m · 75xp🔒
  5. 5.required, pattern, minlength, maxlength8m · 100xp🔒
  6. 6.<select> + <option> + <optgroup>7m · 75xp🔒
  7. 7.<textarea>: multi-line text5m · 60xp🔒
  8. 8.<input type=checkbox>: single and grouped7m · 75xp🔒
  9. 9.<input type=radio>: exclusive choice6m · 75xp🔒
  10. 10.<input type=file>: uploads + multipart8m · 100xp🔒
  11. 11.<label>: the accessibility glue7m · 75xp🔒
  12. 12.<fieldset> + <legend>: group related fields6m · 75xp🔒
  13. 13.autocomplete: the attribute everyone forgets6m · 75xp🔒
  14. 14.Module capstone: signup form matching a Pydantic schema14m · 200xp🔒
  15. 15.CSRF tokens: why your form needs a secret the attacker can't read9m · 100xp🔒
  16. 16.SameSite cookies: half of the CSRF defence the browser does for you7m · 75xp🔒
  17. 17.Honeypot fields: a single hidden input that filters 95% of bots6m · 75xp🔒
  18. 18.novalidate: when you take JS control of validation7m · 75xp🔒
  19. 19.The formdata event: edit submissions before they leave8m · 100xp🔒
  20. 20.XSS-safe rendering: textContent vs innerHTML, on user input9m · 100xp🔒
4

Module 04Tables, lists, media

10 lessons

Accessible table headers, <picture>+srcset, <video>+tracks, <audio>, <canvas> intro.

  1. 1.Tables: <caption>, <thead>, <tbody>, <th scope>8m · 100xp🔒
  2. 2.Complex tables: colspan, rowspan, multi-level headers9m · 100xp🔒
  3. 3.<ul> vs <ol>: when order matters4m · 50xp🔒
  4. 4.<dl>: definition / description lists6m · 75xp🔒
  5. 5.<img>: alt, width/height, lazy loading8m · 100xp🔒
  6. 6.<picture> + srcset: responsive images10m · 125xp🔒
  7. 7.<video>: controls, poster, <track>8m · 100xp🔒
  8. 8.<audio>: same shape, different content4m · 60xp🔒
  9. 9.<canvas>: pixel-level graphics intro8m · 100xp🔒
  10. 10.Module capstone: accessible data card12m · 200xp🔒
5

Module 05Accessibility, for real

12 lessons

ARIA when (and when NOT) to use it, focus management, skip links, keyboard traps, color contrast, screen-reader-only text, prefers-reduced-motion.

  1. 1.POUR: the four principles every audit checks6m · 75xp🔒
  2. 2.:focus-visible — visible focus that respects mouse users7m · 100xp🔒
  3. 3.Skip-to-content link6m · 75xp🔒
  4. 4.Color contrast: 4.5:1 for body, 3:1 for large text8m · 100xp🔒
  5. 5.Screen-reader-only text (.sr-only)6m · 75xp🔒
  6. 6.prefers-reduced-motion7m · 100xp🔒
  7. 7.ARIA-live: announce dynamic changes8m · 100xp🔒
  8. 8.Touch target size: 44px minimum6m · 75xp🔒
  9. 9.Keyboard traps: tab gets stuck in a modal7m · 75xp🔒
  10. 10.Error messages: associate via aria-describedby7m · 100xp🔒
  11. 11.Heading-only navigation: design for the screen-reader user6m · 75xp🔒
  12. 12.Module capstone: audit a broken page15m · 200xp🔒
6

Module 06SEO & social

10 lessons

Title tags, meta description, OpenGraph, Twitter cards, JSON-LD structured data, canonical, hreflang, sitemap, robots.txt. Live SERP preview.

  1. 1.The 5 SEO tags that actually matter6m · 75xp🔒
  2. 2.<title> patterns: keyword, page name, brand6m · 75xp🔒
  3. 3.Meta description: 155 chars that earn the click6m · 75xp🔒
  4. 4.canonical: the one true URL7m · 100xp🔒
  5. 5.OpenGraph deep-dive: og:image rules8m · 100xp🔒
  6. 6.X / Twitter cards6m · 75xp🔒
  7. 7.JSON-LD Article: rich-result eligibility9m · 125xp🔒
  8. 8.JSON-LD FAQPage: SERP accordion7m · 100xp🔒
  9. 9.hreflang: 18 languages, one URL hierarchy8m · 100xp🔒
  10. 10.Module capstone: full SEO+social block14m · 200xp🔒
7

Module 07Performance & loading

12 lessons

Critical path, render-blocking resources, defer vs async, font loading, lazy <img loading>, fetchpriority, view-transitions, native popover. Ends shaving 800ms off a slow page.

  1. 1.The critical rendering path6m · 75xp🔒
  2. 2.defer vs async (the right script attribute)7m · 75xp🔒
  3. 3.preload + preconnect for critical resources7m · 100xp🔒
  4. 4.Font loading: font-display swap7m · 100xp🔒
  5. 5.loading='lazy' on images and iframes5m · 75xp🔒
  6. 6.fetchpriority for tuning the resource queue6m · 100xp🔒
  7. 7.Layout shift: width/height + aspect-ratio7m · 100xp🔒
  8. 8.View Transitions API: cross-page animations7m · 100xp🔒
  9. 9.Native popover API7m · 100xp🔒
  10. 10.Service workers: app shell + offline (intro)6m · 75xp🔒
  11. 11.Compression: gzip, brotli, what your server should send6m · 75xp🔒
  12. 12.Module capstone: shave 800ms off a slow page14m · 200xp🔒
8

Module 08Capstones — Ship it

7 lessons

A login + auth flow end-to-end. AI-bot landing handoff to AI-Engineering track. A11y-perfect dashboard scaffold reused by Track C.

  1. 1.Capstone 1: FastAPI login page end-to-end18m · 250xp🔒
  2. 2.Capstone 2: AI demo landing page18m · 250xp🔒
  3. 3.Capstone 3: a11y-perfect dashboard skeleton16m · 250xp🔒
  4. 4.Capstone 4: marketing landing — Lighthouse 100 SEO18m · 250xp🔒
  5. 5.Capstone 5: pricing page (full Lighthouse pass)16m · 250xp🔒
  6. 6.Capstone 6: blog post with full Article markup18m · 250xp🔒
  7. 7.Capstone 7: the full ship-ready document20m · 300xp🔒

How access works: The first 10 lessons in this track are free — no signup needed. Locked lessons (🔒) unlock with a Pro subscription. See pricing.

Get one Python or web tip a day — by email

Short, hand-written, no spam. Unsubscribe in one click.