This is a practice brief, and the client is fictional: Marwa Adel, a potter in Cairo who wants a one-page site instead of taking commissions through Instagram DMs. I built it with an AI design partner, who worked through the design decisions with me and reviewed the HTML I brought back. The code is in the GitHub repo.
Early on I decided against a nav bar. One page, one path, and a nav bar reads as "website" in a way that fights the feel of a small studio. In its place I planned a quiet scroll indicator at the bottom of the hero, a small arrow saying there's more below. I wanted it to be a real anchor link so it stays accessible instead of just decorative.
That's a small feature. It still went wrong three separate ways, after one decision I had to reason through first.
Where does it live?
The scroll indicator was the only thing that would have lived in <header>. Sitting there almost empty felt wrong. It didn't belong loose in <main> either, since it isn't tied to any section.
I worked through it with my design partner. A <header> is for introductory content, and a scroll cue doesn't introduce anything. It points at what comes next. So the indicator isn't its own structural unit. It's part of the hero's job, and it goes inside the hero, right after the tagline.
First wrong turn: the wrong element
When I brought my HTML back for review, I had built a <progress> element instead of the anchor link we'd planned. My design partner caught it. I didn't.
A progress bar and a scroll cue are different features. A progress bar tracks how far down the page you are, needs JavaScript, and usually sits pinned full-width at the top. A scroll cue says there's more below and gives you something to tap. I went back to the plan: an <a href="#about"> inside the hero.
Second wrong turn: an arrow that never appeared
Later, after I'd built the About section, I hit two bugs where nothing looked broken and nothing happened either.
The first was the arrow. I had written content: '↓' and nothing appeared. Used the way I'd used it, a text string in content only takes effect on ::before and ::after. On a regular element it does nothing, and it doesn't complain about it. I put the arrow directly in the HTML instead.
Third wrong turn: a link that went nowhere
Right after that, the link itself wasn't scrolling anywhere. I had made About a class instead of an id. A fragment link like #about looks for an element with that id, so a class gives it nothing to land on. The link rendered fine. It was just pointing at nothing, so clicking it did nothing. The fix was changing the class to an id.
What the last two had in common
Neither bug threw an error or left anything visibly broken. The arrow simply wasn't there, and the link simply didn't scroll. I noted at the time that this was the sneakiest kind.
Where it ended up: the anchor sits inside the hero after the tagline, the arrow is plain text in the HTML, and #about points at an element that actually has that id.
Top comments (0)