Pick the page

Pick the page you shipped in Phase 00, or another one you have generated since. Good candidates have a header with navigation, a hero, at least two distinct content sections, an image or two, a form, and a footer. That is enough to exercise everything in this phase and small enough to finish.

Bad candidates: a single centred card, which teaches you nothing; and anything with a complex interactive component like a calendar or a data table, which will consume your whole week on one problem.

Before you write anything, do the survey. Open the page and list, honestly, every part you could not build right now without looking something up. Be specific: "the sticky header", "the way the hero image crops", "the mobile menu". That list is your syllabus for the next three chapters, and writing it before you start is the only time you will be honest about it.

Then set the rules, in writing, in the repo. Here are the ones that make this work: the model stays closed for the markup and the CSS. Documentation is allowed and encouraged, MDN, the specifications, this course. Reading your own generated page in DevTools is allowed and is in fact the point. Copying from it is not.

One more rule, and it is the one people skip: no framework, no CSS library, no utility classes. Plain HTML and plain CSS in a file. Not because those tools are bad, you will use them for the rest of your career, but because they are the thing you are trying to see behind. Tailwind is a fine way to write CSS and a poor way to learn what CSS is doing.

Set a time budget before you start: roughly four to five hours across the next three chapters. If the markup alone is taking four hours, the page was too complex, pick a smaller one rather than abandoning the exercise, because a finished rebuild of something modest teaches far more than an abandoned rebuild of something impressive.