Advanced Projects
Prerequisites: Level 3 — Advanced
Build these using cascade layers, modern color, architecture, build tools, and the performance and accessibility techniques from Level 3.
1. A Small Design System
Design tokens as custom properties (color scales in oklch, spacing, type
scale, radii), a reset and base layer, and a set of components (button,
card, form field, alert) organized in @layers, with a documentation page
showing every variant in light and dark mode.
2. Rebuild a Page Two Ways
Build the same marketing page once with BEM-named classes and native nesting, and once with Tailwind utilities. Compare the CSS output size, the HTML readability, and how easy each is to change.
3. A Performance and Accessibility Audit
Take an existing site, measure it with Lighthouse and the browser Performance panel, and fix CSS problems: unused CSS, render-blocking styles, layout shifts, missing focus styles, insufficient contrast, and animations that ignore reduced-motion. Write up before-and-after numbers.