Download
This repository contains a single, short tutorial that incrementally transforms a bare HTML document into a clean, readable webpage, teaching design by doing. Each step introduces one design decision—typography, spacing, color, alignment, hierarchy—and shows exactly how it changes the page. The lesson is intentionally minimal and time-boxed so beginners can grasp core principles without being overwhelmed by tooling or frameworks. It focuses on taste-building: why certain choices make text easier to scan, why rhythm and whitespace matter, and how contrast guides attention. By the end, readers understand a repeatable baseline they can apply to any content before adding brand style or components. It’s a fast on-ramp for developers who write UI but haven’t studied visual design formally.
Features
- Step-by-step narrative that layers design improvements on a simple page
- Tiny, framework-free CSS that demonstrates core principles clearly
- Emphasis on typography, spacing, color, and visual hierarchy fundamentals
- Before-and-after diffs so you can see exactly what each change accomplishes
- Practical baseline you can reuse for docs, blogs, or internal tools
- Fits in a single sitting, ideal for quick skill leveling
Project Samples
