learn.web
Menu
Living curriculum August 2026

THE WEB IS YOUR MATERIAL.

Learn by building real things with the platform itself. No filler. No framework treadmill. Just durable ideas, modern capabilities, and a studio that remembers your progress.

Choose your path Open the lab
YOUR BROWSER / LIVE SIGNAL
View transitionschecking
Anchor positionchecking
CSS highlightschecking
Navigation APIchecking
Scroll to enter

01 / THE METHOD

A better way to become excellent

Tutorials tell you what to type. Practice teaches you what to notice.

Every lesson is built around a decision, a small artifact, and a clear definition of done. Read less. Make more. Explain what changed. Ship something another person can use.

  1. 01BuildStart with a useful outcome.
  2. 02BreakChange constraints on purpose.
  3. 03ExplainName the principle at work.
  4. 04ShipTest with a real person.

02 / CURRICULUM

Six paths. Thirty-six studio lessons.

Choose the kind of maker you want to become.

New here? and we’ll point you somewhere useful.

01

6 lessons6 hoursOn-ramp

Web Foundations

How the web works, how to use the browser as a studio, and the HTML, CSS, and JavaScript for your first real page.

  • First page
  • DevTools
  • Publish
Explore path
02

6 lessons8 hoursCore

Modern Web Platform

Semantic HTML, expressive CSS, resilient JavaScript, performance, and the browser capabilities that landed in 2026.

  • HTML
  • CSS
  • JavaScript
Explore path
03

6 lessons7 hoursDesign

UX & Product Design

Turn real needs into clear flows, useful interfaces, honest feedback, and products people can understand.

  • Research
  • IA
  • Testing
Explore path
04

6 lessons7 hoursEssential

Accessibility

Build for different bodies, minds, devices, and situations using WCAG 2.2 and human testing.

  • WCAG
  • ARIA
  • Inclusive
Explore path
05

6 lessons6 hoursGrowth

Search & AI Discovery

Create original, evidence-rich information that people, search systems, and generative experiences can trust.

  • SEO
  • GEO
  • Evidence
Explore path
06

6 lessons8 hoursAdvanced

AI Product Engineering

Design useful AI features with good context, streaming UX, evaluations, safety, and human control.

  • Agents
  • RAG
  • Evals
Explore path

03 / THE PLATFORM NOW

Verified for August 2026

The browser learned new moves.

These capabilities crossed the interoperability line or arrived in current engines. Use the stable core; layer newer ideas as progressive enhancements.

CSS / 001

Anchor positioning

Place a tooltip, menu, or callout relative to its trigger—and let the browser choose a fallback when space runs out.

Baseline 2026
CSS / 002

Container style queries

Respond to a component’s custom-property state, not only its dimensions. Design systems can become genuinely contextual.

Baseline 2026
CSS / 003

:open and gap decorations

Style open controls consistently, and decorate Grid or Flexbox gaps without extra borders or pseudo-elements.

New in 2026
JS / 004

Navigation API

Observe and coordinate navigations with a single modern interface while preserving links, history, and progressive enhancement.

Baseline 2026
JS / 005

Trusted Types

Move DOM XSS protection into enforceable browser policy instead of relying only on team discipline and code review.

Baseline 2026
MOTION / 006

Scroll & view transitions

Build spatial continuity and scroll-linked storytelling in CSS, with reduced-motion behavior kept as a first-class requirement.

Progressive

04 / LIVE LAB

Read it. Change it. See it.

A tiny browser inside your browser.

Edit the specimen and run it. The preview is sandboxed, so experimentation stays in the lab.

Zero setupKeyboard readySandboxed
Ready
ResultSandboxed frame

05 / WHAT GOOD LOOKS LIKE

Not “course complete.”
Capability unlocked.

The portfolio is the assessment. By the end, you will have made artifacts that prove what you can do.

01

A semantic interface

Works with a keyboard, screen reader, touch, and no JavaScript.

02

A responsive system

Adapts at the component level and stays stable under real content.

03

An evidence-rich guide

Useful to a person, indexable by search, and easy to cite accurately.

04

A responsible AI feature

Evaluated, observable, privacy-aware, and clear about uncertainty.

06 / FIELD NOTES

Short, practical, current

Ideas worth keeping close.

Platform

What entered Baseline in 2026?

Official feature status, without the guesswork.

 Accessibility

WCAG 2.2: the working standard

Use the stable standard; follow WCAG 3 as work in progress.

 Discovery

SEO still matters in AI search

Original value and crawlable fundamentals remain the foundation.

 Performance

LCP, INP, CLS—measured in the field

Design for lived experience, not only a lab score.

07 / MY STUDIO

Your work, your proof

What you make is the assessment.

Submitted artifacts, progress, backups, and your certificate — all stored on this device.

0lessons complete /36
0artifacts submitted

The next page is yours

MAKE SOMETHING
THE WEB DESERVES.

Start with the platform

Learning path

Progress0/6

    Lesson 1 of 6

    Time
    Mode
    Learn → Make → Check
    Progress
    Not started

    Before you begin

    By the end, you can…

      01 / Understand

      02 / Apply

      03 / Make

      Your studio task

        Definition of done

        Preparing your workspace…

        Private field notes

        What changed in your thinking?

        Saved only in this browser.

        Ready

        04 / Check

        Knowledge check

        Finish lesson

        Turn understanding into progress.

        Submit your studio artifact and pass the knowledge check to finish this lesson.

        Placement check

        About 2 minutes

        Four honest questions. No right answers — just the best place to start.

        WHERE TO START

        Which path fits you today?

        SITE CHANGELOG

        What’s new in learn.web

        The curriculum is a living document. Subscribe to the updates feed to follow it.

        Certificate

        Your proof of capability

        learn.web Certificate of completion

        This certifies that

        Your name

        has completed all 0 project-based lessons across six paths — Web Foundations, Modern Web Platform, UX & Product Design, Accessibility, Search & AI Discovery, and AI Product Engineering — building real artifacts as proof of capability.

        Awarded

        About & privacy

        How this field guide works

        Who makes it

        learn.web is written and maintained by Mark Lee. It is an independent, self-published project — not a company, not a course platform.

        The editorial method

        Lessons are organized around artifacts and definitions of done because capability is proven by making, not watching. The curriculum is a living document: content is reviewed against current standards (Web Platform Baseline, WCAG 2.2, Google Search Central guidance) and every release is recorded in the and the updates feed.

        Privacy and analytics

        Your progress, field notes, and studio artifacts are stored only in this browser (localStorage) and never leave your device — unless you export a backup yourself. Nothing you type in notes, code, or artifacts is sent to any server.

        The site runs Google Analytics 4 for anonymous page-view statistics and loads display fonts from Google Fonts. Both involve third-party requests from your browser; no learner-created content is included in them.

        The code preview uses a sandboxed runner loaded from a public static CDN in production so learner code runs outside the app page. Code is passed between browser frames and is not uploaded by learn.web.

        Corrections and reuse

        Found an error or an outdated claim? Open an issue on GitHub. Content is licensed under CC BY 4.0; code is MIT.
        Search the curriculum Try “anchor”, “research”, “WCAG”, or “where should I start”