Part 1 — the big picture

How a modern website is structured

Modern websites aren't just a pile of tags — they're organized into named sections that every developer recognizes. Here's the Riverhawk Rockets site with its sections labeled.

Try it yourself: Read the page from top to bottom and name each section before answering the question.

Riverhawk Rockets FC ☰

HomeSchedulePlayersShopContact

Go Rockets!

Season tickets on sale now. Don't miss a single match.

<main>

<section> — Upcoming Matches

<article> / card

vs. City FC

June 21 · 2pm · Home

<article> / card

vs. North United

June 28 · 3pm · Away

<article> / card

vs. Riverside City

July 5 · 2pm · Home

On the Rockets page, where would you put the team logo and navigation links?

Part 2 — headings

The heading hierarchy: h1 through h6

Headings aren't just about size — they create a logical outline that browsers, search engines, and screen readers use to understand your page. Think of them like a newspaper: one main headline, then sub-headlines, then smaller headers within articles.

<h1>Riverhawk Rockets</h1> ← one per page, the main title <h2>Upcoming Matches</h2> ← major sections <h3>Home Games</h3> ← sub-sections within h2 <h4>June Fixtures</h4> ← deeper still (use sparingly)

Rule of thumb: Only one <h1> per page. Never skip levels — don't jump from <h2> straight to <h4>. Use headings for structure, not just to make text bigger (that's what CSS is for).

Try it yourself: Sketch a quick outline of the page using h1, h2, and h3 labels.

Riverhawk Rockets

Upcoming Matches

Home Games

June Fixtures

The Rockets page has a "Player Profiles" section, and within it a sub-section called "Defenders." Which heading pair makes sense?

Part 3 — key components

The components every website uses

Modern websites are built from repeating components. Once you recognize them, you'll see them everywhere. Here are the most common ones — all shown on the Rockets site.

Nav (navigation)

The links at the top of every page. Usually lives inside <header> in a <nav> tag.

Hero section

The large banner at the top of a landing page. Designed to make a strong first impression — usually big text + image + a button.

Card

A self-contained box of content — a match listing, a player profile, a product. Cards are usually repeated in grids.

Modal

A popup that appears over the page — used for alerts, confirmations, or forms. It dims the page behind it.

Landing page

A page with one goal — buy a ticket, sign up, learn about the team. Usually has a hero + a clear call-to-action button.

Footer

The bottom section of every page. Usually has copyright, secondary links, and contact info.

The Rockets want to promote a special one-day ticket sale. It needs a big image, a headline, and a "Buy Now" button at the top of the page. What component fits?

Part 4 — semantic HTML

Why tag names matter: semantic HTML

You could build an entire website using nothing but <div> tags. Technically it would work. But modern HTML gives us semantic tags — tags whose names describe their purpose. Browsers, search engines, and screen readers all use these names to understand your page.

Non-semantic (avoid)

Semantic (use this)

Semantic HTML is good for accessibility (screen readers announce "navigation" instead of just "div"), good for SEO (search engines weight headings and landmarks), and good for developers (code is easier to read and maintain).

A visually impaired fan uses a screen reader to navigate the Rockets site. Which tag helps the screen reader announce "this is the navigation area"?

Part 5 — error correction

Find the bug in the Rockets page

Every developer makes mistakes. One of the most important skills is reading HTML carefully enough to spot errors. The page below has a bug — something that will break how it displays.

Look at the code below carefully. One line has a problem. Can you find it before reading the question?

<html> <head> <title>Riverhawk Rockets</title> </head> <body> <h1>Riverhawk Rockets</h1> <h2>Upcoming Matches</h2> <ul> <li>vs. City FC — June 21</li> <li>vs. North United — June 28<li> <li>vs. Riverside City — July 5</li> </ul> <a href="tickets.html">Buy Tickets</a> </body> </html>

What is the error on line 10?

Part 6 — responsive design

What is responsive design?

More than half of all web traffic comes from phones. Responsive design means your website automatically adjusts its layout to fit any screen size — phone, tablet, or desktop — without needing a separate mobile site.

Drag the slider below to see how the Rockets page layout changes at different screen widths:

Width: 620px

Riverhawk Rockets HomeSchedulePlayers

Go Rockets!

Season tickets on sale now

vs. City FC
June 21

vs. North United
June 28

vs. Riverside City
July 5

Responsive design is achieved with CSS — specifically media queries, which say "if the screen is smaller than X pixels, use these styles instead." Most modern CSS frameworks (like Bootstrap or Tailwind) handle this automatically.

What does responsive design actually mean for a website?

Results

What you learned across all 3 challenges:
HTML describes content with tags · CSS styles those tags using selectors · Modern pages use semantic sections: <header>, <nav>, <main>, <section>, <footer> · Key components: hero, nav, cards, modals · Headings create a logical outline (h1 → h6) · Common errors are unclosed or mismatched tags · Responsive design uses CSS to adapt to any screen size

You've completed all 3 challenges. You can now read HTML and CSS, understand how modern websites are structured, spot common errors, and explain what responsive design means. These are real skills used by media professionals every day.

Ready to put your skills to work? Head to the lab exercise to modify the Rockets website yourself — editing HTML and CSS, then publishing it to a server.
Go to the Lab Exercise →