Rebuild the markup

One file, index.html. No stylesheet linked, not even an empty one. You are going to look at unstyled HTML for ninety minutes and it will be uncomfortable, and that discomfort is diagnostic, an unstyled page that is hard to read is usually a page with bad structure.

Work top to bottom. Header with a nav. Main with your sections. Each section with a heading at the right level. Article elements for self-contained pieces. Aside for really tangential content. Footer. Forms with labels, fieldsets and legends. Images with alt text that you actually thought about rather than filled in.

Do not look at your generated page’s markup while you do this. Look at the rendered page to remember what is on it, and build the structure yourself. If you find yourself opening the source, close it, the whole exercise is whether you can produce the structure rather than recognise it.

When you think you are done, run the three checks from lesson two. The heading outline via the console one-liner: does it read like a table of contents? Tab from the top: does focus order match reading order, and does every interactive thing receive focus? Screen reader: turn it on and navigate by landmark, then by heading.

Then the hard check, and it is the one that finds the problems: read the page as it is, unstyled, top to bottom, and ask whether a person could use it. Not whether it is pretty, whether the information is in a sensible order, whether the form makes sense, whether the navigation is at the top. If yes, the structure is right and the CSS in the next chapter will be easy. If no, fix it now, because no amount of CSS repairs a document whose order is wrong.

Commit this before you write any CSS. You want the unstyled version in your history, partly as proof, and partly because being able to look back at it is useful later.