Interactive lab

The Lab

These are the interactive demos from Webpage Anatomy. Each one has its own page here, so you can open, bookmark, or share exactly the one you need.

Every demo, on its own page

All Eight Demos

The frosted glass effect explained with live CSS you can copy.

A complete ten section homepage wireframe with notes. Downloadable as a PNG.

Type in any two colors and get a real, live WCAG contrast ratio.

Colors, type, spacing, and z-index, condensed into one downloadable sheet.

Drag margin, border, and padding and watch a real box respond.

Drag a frame from phone to desktop width and watch a layout reflow.

See a color pair, guess pass or fail, then check your eye against the math.

Questions pulled straight from this page, graded instantly as you answer.