Structure First, Then Text, Style, Behavior

Why this matters

Beginners style first: colors and fonts on placeholder text, then real text breaks the layout, then behavior is bolted onto shifting markup. Every layer reworks the one before. Structure-first reverses the waste: headings and sections checked, then real words, then the look fitted to real words, then behavior wired to stable markup. Four passes, each ending with evidence.

Concepts

Pass 1: structure. Headings, sections, form fields with labels, buttons. No real text beyond placeholders, no styling, no script. Check: open it, the outline reads correctly, tab order is sensible. This pass answers "is everything there and named?"

Pass 2: text. Real words from the brief in every section. Check: read it against the brief line by line. This pass answers "does it say the right things?" Styling the wrong words is polishing a draft; write first.

Pass 3: style. Readability on phone and desktop, headings visibly above body, everything fitting at 360px. Check: narrow the browser, read every section. This pass answers "can everyone read it?" Real text matters here: long dish names and real hours break layouts that lorem ipsum never did.

Pass 4: behavior. Form echo, validation messages, persistence (M05 extends this). Check: fill, submit, reload, break with empty input. This pass answers "does it do the right things?" Behavior last because it reads the markup the first three passes stabilized.

Untangling. A page built in the wrong order is not rewritten; it is re-passed. Freeze behavior, confirm text against the brief, fix layout at phone width, then rewire behavior onto the stabilized markup. Order restores itself one pass at a time.

Worked example

The bakery page in four evenings. Monday: skeleton with three headings and a labeled form, checked by reading the outline. Tuesday: real menu, hours and order text, checked against the brief. Wednesday: styling fitted to the real words, checked at 360px and desktop. Thursday: form echo wired, checked by fill and submit. Friday is free, because nothing needs untangling.

Expected result: your page built (or rebuilt) in four passes with a check noted after each.

The common wrong move

Skipping to behavior on placeholder markup ("wire the form, text comes later"), then rewriting the markup and rewiring the behavior. Stable markup first; wiring once beats wiring twice.

Lab and next step

Lab A10 (paired with lesson 13) produces the skeleton plus real text through the tool with checks. Next, lesson 15 fixes the two most common visual failures: mobile overflow and unlabeled form fields.