# Tutorial — from empty page to validated, fluid landing Build a real page with every core construct, one step at a time. Each step: what you're about to gain, the code, what actually happened, and a checkpoint you can see. At the end you'll have written the [landing example](https://github.com/AleSaiani/ResponsiveJS/blob/main/examples/landing) yourself — *and* pinned it with a contract so it can never silently regress. Time: ~30 minutes. Prereqs: Node ≥ 20.19, any bundler (we use vite). ```bash npm create vite@latest fluid-landing -- --template vanilla-ts cd fluid-landing && npm i @responsivejs/runtime ``` The page we'll build: a header with logo + nav + (hidden) burger button, a hero, a row of three cards, a sidebar. Plain HTML — grab the markup from the [example](https://github.com/AleSaiani/ResponsiveJS/blob/main/examples/landing/index.html) or write your own with the same class names. --- ## Step 1 — Kill your breakpoints for sizes: fluid tokens **What you gain:** spacing and type that scale smoothly with the viewport — no `@media` ladder, no magic numbers, zero runtime JavaScript for the linear cases. ```typescript // main.ts import { r$ } from '@responsivejs/runtime'; r$.tokens({ '--space-s': r$.fluid(8, 12), '--space-m': r$.fluid(16, 24), '--space-l': r$.fluid(32, 56), '--font-body': r$.fluid(15, 18), '--font-hero': r$.fluid(28, 64, { curve: 'exponential' }), }); ``` ```css body { font-size: var(--font-body); } .hero h1 { font-size: var(--font-hero); } .card { padding: var(--space-m); } main { gap: var(--space-l); } ``` **What happened:** every *linear* token compiled to a static `clamp()` on `:root` — open devtools, look at ``: there's a `