Courses / Layout for developers
Layout for developers
Compose a page section on a column grid. Choose the grid, place content by span, share alignment edges, set one spacing scale, give text a measure and reflow it for a narrow screen.
Layout as a set of decisions you can defend: column grids, spans, alignment edges, spacing scales, measure and narrow reflow. Typography beyond measure and leading, colour and motion are outside this course.
Fit a lab into a lunch break or stay for a spare hour. Progress is saved so you can come and go. Labs need a laptop or desktop; the outline is available on any device.
Included with the Course pass or The Vault. Each learner needs their own account and access.
12 columns · 24px gutter · 2 left edges
The curriculum
7 practical labs.
Decisions you can use.
Every lesson starts with a short principle and a page that needs work. You make the changes. The feedback tells you which relationships work and what to try next.
By the end, you can
- Choose a column grid, gutter and margin that divide
- Place content by span so the section reads
- Reduce a layout to shared alignment edges
- Use one spacing scale with clear roles
- Set a readable measure from span and size
- Reflow a grid for a narrow screen
Basic HTML and CSS, including CSS grid. Visual hierarchy for developers is recommended preparation. No design software and no animation. Use a laptop or desktop with a browser window at least 1024px wide. Work at your own pace; there is no timer.
- 01Choose the grid7 min
- 02Place content by span8 min
- 03Align to shared edges6 min
- 04Set a spacing scale7 min
- 05Give text a measure6 min
- 06Reflow for a narrow screen7 min
- 07A fresh brief10 min
Proper interaction.
Place blocks by dragging their edges on a grid ruler, pick spacing from a scale ladder, watch a measure ruler count characters per line, and toggle grid and spacing overlays on a live section. Every drag has keyboard controls and a numeric field.
A completion record.
Pass the practical checks in each lab to create an optional certificate with your name and a verification link. This records course completion; it is not an accredited qualification.
For you, or your team.
This course is included with the Course pass or the Vault. Each person needs their own account and access, with a separate learning record and optional certificate.
