TarefaQuick recap. Write CSS that uses all 4 B4-B6 fundamentals. body { font-family: system-ui, sans-serif; }. h1 { font-size: clamp(24px, 5vw, 48px); }. .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; }. .card { overflow-wrap: anywhere; padding: 12px; background: #eef; }.
Recap: Typography, color, responsive
50 XP5 min
Teoria
Quick recap β Modules B4-B6
Typography, color, breakpoint-free responsive. The 4 properties that stop you reaching for a framework:
- `clamp(min, preferred, max)` β fluid type/size without a single
@mediaquery. - System font stack β
font-family: system-ui, sans-serifships native UI typeface, zero load cost. - `grid-template-columns: repeat(auto-fit, minmax(180px, 1fr))` β responsive cards without breakpoints.
- `overflow-wrap: anywhere` β long URLs / hashes / tokens don't blow out a card.
If any feels random, redo B4-03 / B4-01 / B6-04 / B6-13 then come back.
π
Regista-te para começar a programar
A teoria estΓ‘ aberta a todos. O editor, a prΓ©-visualização e o check desbloqueiam-se com um teste gratuito de 7 dias β cartΓ£o obrigatΓ³rio, cancelΓ‘vel a qualquer momento.
Registar β teste grΓ‘tis βAs primeiras 10 liçáes de cada trilha sΓ£o grΓ‘tis. Sem cartΓ£o necessΓ‘rio.