Living curriculum July 2026

THE WEB IS YOUR MATERIAL.

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.

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

02 / CURRICULUM

Five paths. Thirty studio lessons.

Choose the kind of maker you want to become.

6 lessons8 hoursCore

Modern Web Platform

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

6 lessons7 hoursDesign

UX & Product Design

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

6 lessons6 hoursGrowth

Search & AI Discovery

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

6 lessons8 hoursAdvanced

AI Product Engineering

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

03 / THE PLATFORM NOW

Verified for July 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

<button class="anchor" popovertarget="note">New in CSS</button>
<aside id="note" popover>
  <strong>Anchored.</strong>
  <span>No coordinates. No library.</span>
</aside>

:root { color-scheme: dark; }
body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  margin: 0;
  background: #111218;
  color: #f5f4ed;
  font: 700 1rem system-ui;
}
.anchor {
  anchor-name: --trigger;
  border: 0;
  border-radius: 99px;
  padding: 1rem 1.4rem;
  background: #d9ff43;
  color: #111218;
  cursor: pointer;
}
#note {
  position-anchor: --trigger;
  position-area: block-start;
  margin: 0 0 .75rem;
  padding: 1rem 1.2rem;
  border: 1px solid #5b5d6b;
  border-radius: 1rem;
  background: #22242d;
  color: #f5f4ed;
}
#note span { display: block; opacity: .65; margin-top: .25rem; }

document.querySelector('#note')
  .addEventListener('toggle', ({ newState }) => {
    document.querySelector('.anchor').textContent =
      newState === 'open' ? 'It works →' : 'New in CSS';
  });

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.

A semantic interface

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

A responsive system

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

An evidence-rich guide

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

A responsible AI feature

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

06 / FIELD NOTES

Short, practical, current

Ideas worth keeping close.

Platform

THE WEB IS YOUR MATERIAL.

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

Choose the kind of maker you want to become.

Modern Web Platform

UX & Product Design

Search & AI Discovery

AI Product Engineering

The browser learned new moves.

Anchor positioning

Container style queries

`:open` and gap decorations

Navigation API

Trusted Types

Scroll & view transitions

A tiny browser inside your browser.

Not “course complete.”
Capability unlocked.

A semantic interface

A responsive system

An evidence-rich guide

A responsible AI feature

Ideas worth keeping close.

What entered Baseline in 2026?

WCAG 2.2: the working standard

SEO still matters in AI search

LCP, INP, CLS—measured in the field

MAKE SOMETHING
THE WEB DESERVES.

By the end, you can…

Your studio task

What changed in your thinking?

Knowledge check

Turn understanding into progress.

THE WEB IS YOUR MATERIAL.

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

Choose the kind of maker you want to become.

Modern Web Platform

UX & Product Design

Accessibility

Search & AI Discovery

AI Product Engineering

The browser learned new moves.

Anchor positioning

Container style queries

:open and gap decorations

Navigation API

Trusted Types

Scroll & view transitions

A tiny browser inside your browser.

Not “course complete.”Capability unlocked.

A semantic interface

A responsive system

An evidence-rich guide

A responsible AI feature

Ideas worth keeping close.

What entered Baseline in 2026?

WCAG 2.2: the working standard

SEO still matters in AI search

LCP, INP, CLS—measured in the field

MAKE SOMETHINGTHE WEB DESERVES.

`:open` and gap decorations

Not “course complete.”
Capability unlocked.

MAKE SOMETHING
THE WEB DESERVES.