A structured lesson workspace with readable content, hands-on examples, and a clean path to completion.
| Concern | What to inspect | Typical failure |
|---|---|---|
| Core behavior | Buttons, Cards, Badges, and Navigation Components | A button, link, and badge can look similar while having different semantics and interaction expectations. CSS should not erase that distinction. |
| Production test | Real content and constraints | The rule works only for the demo values |
| Maintenance | Scope and override path | A later fix creates another exception |
The useful mental model here is practical: how small UI primitives can share visual rules while remaining semantically distinct. When a rule looks obvious but the browser produces something else, start by identifying which constraint or rendering phase is actually winning.
<style>.button { display:inline-flex; align-items:center; gap:.5rem; }</style><main class="demo"><button type="button">Example action</button></main>
A good CSS change narrows the problem. Centralize surface, spacing, and type tokens, but keep component-specific interaction rules close to the component itself. This keeps the rule understandable when content, theme, or viewport conditions change later.
<style>.badge { display:inline-flex; padding:.2rem .55rem; border-radius:999px; }</style><main class="badge">Example content</main>
Engineering judgment: Centralize surface, spacing, and type tokens, but keep component-specific interaction rules close to the component itself.
A good CSS change narrows the problem. Centralize surface, spacing, and type tokens, but keep component-specific interaction rules close to the component itself. This keeps the rule understandable when content, theme, or viewport conditions change later.
<style>.card { border:1px solid #e2e8f0; border-radius:1rem; }</style><main class="card">Example content</main>
Card is useful here because it demonstrates buttons, cards, badges, and navigation components under a concrete input rather than as an abstract property list.
<style>.nav-link { padding:.6rem .8rem; }</style><main class="demo"><nav><a href="#">Home</a><a href="#">Docs</a></nav></main>
Nav link is useful here because it demonstrates buttons, cards, badges, and navigation components under a concrete input rather than as an abstract property list.
Finish the lesson once you have worked through the material. This awards ★ 30 XP.