Homework — make the page prove it's semantic, to a machine and to a keyboard.

1. Landmarks and real controls. Read your own <body>. Every structural part should be the element that means it: <nav> for the links, one <main> for the content, <article> for each picture, a real <button> for each favourite. If any control is a <div> dressed up with CSS, replace it.
2. One <h1>. The page has exactly one <h1> — the hero title. Each card title is an <h2>. Confirm you didn't pick a heading level by how big it looks.
3. Run the validator. Open validator.w3.org, choose Validate by Direct Input, and paste your whole index.html. Fix anything it reports until it comes back with no errors. A validator catches the mistakes your eyes skate over — an unclosed tag, an attribute in the wrong place.
4. Test it with the keyboard only. Click the address bar, then press Tab. The first thing that takes focus must be the skip link. Press Enter — focus should jump to the content. Keep tabbing: you must be able to reach every nav link and every card's favourite button, and see clearly where focus is.

Try it alone: disable style.css in the dev tools and read the bare page top to bottom. It should still make sense as a document — a navigation, a heading, an intro, a list of pictures each with a title. If any part turns into an unlabelled blob, that part is still div soup; give it the right element.

Required result: the page validates with no errors, and it is fully usable with the keyboard alone — skip link first, every control reachable.

To submit: a screenshot of the validator showing no errors, and one sentence naming the first element the keyboard reaches.

Next. Your page is semantic and styled — but every link looks identical, and the pictures are just dropped in with no thought to how they load or what happens when one is missing. Next lesson: links, images and colour — the details that decide whether a page is pleasant or painful to actually use.