StretchLearn Course
Grids, type scales, color, spacing, and imagery — the visual craft behind pages that convert.
Course Overview
This beginner course teaches the visual craft of web design: how layout grids, modular type scales, accessible color, spacing rhythm, and imagery work together to guide the eye. You will study real frameworks and tools designers use daily, then apply them to a full landing-page build. Every lesson pairs a principle with a concrete, numbers-backed technique you can use immediately.
Learning Outcomes
Build a 12-column responsive layout grid with defined gutters, margins, and breakpoints
Construct a modular type scale and pairing that holds across desktop and mobile
Apply a 60-30-10 color system and verify WCAG AA contrast on every text pair
Establish visual hierarchy using size, weight, color, and an 8-point spacing system
Select, crop, and optimize web imagery for performance and art direction
Critique and refine a landing page using a structured visual QA checklist
Curriculum Preview
Preview the course structure, see how the modules build on one another, and understand the path this program is designed to take you through.
Learn how grids, spacing, and breakpoints give a page structure. You will set up a reusable 12-column responsive grid.
Choose and pair web fonts, build a modular type scale, and set readable body text.
Build an accessible color system and use contrast, weight, and space to direct attention.
Use imagery and consistent components well, then critique and ship a polished landing page.
Built for Application
This program is designed around progression: focused lessons, structured modules, applied resources, assessments, and a course rhythm that turns information into usable capability.