Frontend is a free bonus on CodeMentor AI β the main product is Python. Register to save your progress and unlock all 290 Frontend lessons + 1,000+ Python lessons.Sign up β free
TaskBuild a card system. Reset: *, *::before, *::after { box-sizing: border-box; } body { margin: 0; font-family: system-ui, sans-serif; color: #111; }. Tokens on :root: --primary #3B82F6, --bg-card white, --radius 12px, --pad 20px. .card: padding var(--pad), border 1px solid #e5e7eb, border-radius var(--radius), background var(--bg-card), margin 12px. .card.featured: border-color var(--primary), border-width 2px. .badge: display inline-block, padding 2px 8px, background var(--primary), color white, border-radius 999px, font-size 11px, margin-left 8px.
Module capstone: cascade + box + variables in one card
200 XP14 minFREE
Theory
Putting B1 together
Build a complete card component that uses EVERY concept from B1:
- Global reset (box-sizing: border-box) β lesson 6.
- Custom properties for tokens β lesson 9.
- Inherited typography from body β lesson 3.
- Specific .card.featured override that wins by specificity β lesson 2.
- Padding + border + margin β lesson 5.
- Inline-block badge inside the title β lesson 8.
- No reliance on !important β lesson 4.
This card is the kind of component every site ships dozens of. Building it correctly from B1 alone sets the muscle memory for the rest of the CSS track.
Live preview