Arcade
Some things are better
played than read.
Anything with rules and instant feedback becomes a game.
Phase 01 · Take It Apart
7 of 7 playableSelector Hunt18m
Selectors, combinators, :has()Write one CSS selector that hits every target element and nothing else.PlayWeigh In14m
Specificity, :is(), :where()Two selectors, one element. Call the winner, then write one that beats them both.PlayTiebreak18m
The cascade, in orderPredict which declaration survives when origin, layers, specificity and order disagree.PlayFlex Freight20m
Flexbox alignment and distributionLoad the crates onto the marked bays using only flex properties on the container.PlayGrid Plot20m
Grid tracks, lines and spansPlace every tile on the plot with grid lines and spans. No absolute positioning.PlayLayout Arena20m
Choosing the right engineReproduce a given layout using the fewest flex and grid declarations.PlayStack Up18m
z-index and stacking contextsThree overlapping cards, three probe points. Make the right one win at each.PlayPhase 02 · Design Craft
3 of 3 playableContrast Lab15m
Colour and contrastTune hue, saturation and lightness until a real WCAG ratio clears the bar.PlayEasing16m
cubic-bezier, read as distanceMatch a motion curve from the spacing of twelve evenly-timed dots.PlayLandmark20m
Semantic HTML and the accessibility treeChoose elements until the page announces the way a screen reader needs it to.Play