TaskRefactor the legacy CSS. Old uses float, hex colors, fixed widths, 3 media queries, !important. Replace with: *, *::before, *::after { box-sizing: border-box; }. :root tokens. .card with flex column gap 16px, padding clamp(16px, 4vw, 24px), bg var(--surface), border 1px solid var(--border), border-radius 12px. .card img with aspect-ratio 16/9, width 100%, object-fit cover, border-radius 8px 8px 0 0 (top corners). .card h3 with margin 0 0 8px. .card p color var(--text-muted), margin 0. .card .cta as button with padding 10px 20px, background var(--primary), color white, border-radius 8px, border none, align-self start, transition. .card .cta:hover background darker. Same HTML stays.
Capstone 10: Legacy → modern CSS refactor
200 XP14 min
Theory
Migrate a Bootstrap-3-era card to 2026 CSS
Given: a card built with float-based layout, hex colors, manual media queries, inline styles, !important wars.
Task: refactor it to use:
- Modern reset (box-sizing).
- Custom-property tokens.
- Flexbox / grid layout.
- OKLCH colors.
- clamp() for fluid sizing.
- :hover transitions.
- No !important.
- Logical properties.
Same visual output, ~40% fewer lines.
🔒
Sign up to start coding
Theory is open to everyone. The interactive editor, live preview, and check are unlocked with a 7-day free trial — card required, cancel anytime.
Sign up — free trial →First 10 lessons in each track are free. No card needed for those.