A fluid heading (resize the window)
The preview is narrow, so you'll likely see the minimum sizes. Open the full-screen editor and drag the window wider: the heading grows smoothly, then stops at 48px.
Fluid type grows smoothly with the screen instead of jumping at breakpoints: font-size: clamp(1rem, 0.5rem + 2vw, 2rem) never goes below the minimum or above the maximum, and in between it scales with the viewport; the same idea gives fluid spacing and a whole type scale.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 6 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write a clamp() for an h2 that is 24px at 400px wide and 36px at 1200px wide. Show your working.
Create three fluid spacing variables (small, medium, large) and use them for a card's padding, the gap of a grid, and a section's vertical padding.
A designer asks for the hero title to be 8vw. Rewrite it so it still feels big and fluid but works with zoom and doesn't get tiny on phones.
Explain it without notes
How does clamp() create fluid typography? Walk through the three arguments.
Derive the clamp() for text that is 18px at 360px wide and 24px at 1200px wide.
Why is font-size: 3vw an accessibility problem, and how do you avoid it?
What is a fluid type scale, and why might headings grow faster than body text?
Preview
Console
Nothing logged yet.