Neon DistrictISSUE #50 of 50

examples · exercises · quiz · certificate

PrismaVSJank the Janitor

Prisma saysYou’ve covered CSS end to end — now restyle a real page using layout, variables, and motion together.

CSS clicks when you compose. The capstone: take an unstyled page and give it a themeable palette (variables), a responsive grid layout, typographic rhythm, interactive states, and one tasteful animation — all respecting reduced-motion and dark-mode preferences. That proves you can take structure to a finished, accessible interface.

Power-ups you unlock

Compose layout + variables + states + motion
Theme with variables; lay out with grid/flex
Respect prefers-reduced-motion and color-scheme
Next: JavaScript makes it interactive

Jank the Janitor attacks — common mistakes

Learning rules but never styling a full page
Skipping accessibility (contrast, focus, motion)
Reaching for a framework before the basics

Boss battleStyle a full page: variable theme, responsive grid, hover/focus states, and one reduced-motion-safe animation.

Example code

<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<style>:root{--bg:#06040d;--fg:#e6e0ff;--accent:#b388ff}*{box-sizing:border-box;margin:0}body{background:var(--bg);color:var(--fg);font-family:sans-serif;padding:20px;line-height:1.6}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-top:14px}.card{background:#140a28;padding:16px;border-radius:10px;transition:transform .2s}.card:hover{transform:translateY(-3px)}h1{color:var(--accent)}</style></head><body>
<h1>capstone</h1><p>theme + grid + motion, composed.</p>
<div class="grid"><div class="card">a</div><div class="card">b</div><div class="card">c</div></div></body></html>

▶ Open the interactive comic issue

‹ References · Property List · Selectors · Units