Module · Frontend Engineer
CSS & Design Systems
Layout, type and the tokens that keep a product looking like one product.
TOPIC 01
Layout & Typography
The two skills that decide whether a page feels designed or generated.
What you'll practice
- Build a Layout with Grid — guided · beginner
- Define a Type Scale — practice · intermediate
A command you'll meet
cat ~/frontend/src/styles/layout.cssLayout is the part of CSS that is actually hard. Open the task below for the full walkthrough.
Hands-On Tasks in This Topic (2)
Build a Layout with Grid
Grid and flexbox are two different tools. Use grid for the page skeleton and flexbox for the row inside it.
Define a Type Scale
A type scale is a fixed set of sizes with a fixed ratio. Write it once and stop picking pixel values by hand.
TOPIC 02
Tokens & Theming
Colours and spacing as tokens, and a dark mode that is a token swap rather than a rewrite.
What you'll practice
- Name the Design Tokens — practice · intermediate
- Ship a Dark Mode — challenge · advanced
A command you'll meet
cat ~/frontend/src/styles/tokens.cssTokens are the difference between a theme and a pile of overrides. Open the task below for the full walkthrough.
Hands-On Tasks in This Topic (2)
Name the Design Tokens
A token is a decision with a name. Write the colour and spacing tokens so the product has one source of truth.
Ship a Dark Mode
Dark mode is a token swap, not a second stylesheet. Write the override that changes the tokens and nothing else.