Unit 3 · Stage 2

Hero Image

Under the masthead, a newspaper puts one big photo to draw you in. It is called the hero image. You will add a full-width photo to your front page. (pause on a highlighted word to see what it does)

1 The hero section

We added a <section class="hero"> with a photo inside. Right now the image sits at its natural size. You will stretch it across the whole page.

Native youth in tech: the hero photo sets the tone. Choose an image of your land, a gathering, or your community, and the whole front page speaks for your Nation.

2 Make the image fill the width

A hero image should span the full page and stay a neat shape.

What this code means

width: 100% stretches the image across the full width of the page.
height: A fixed 420px keeps the hero a bold, even band no matter the photo.
object-fit: cover fills that space and crops the extra, so the photo never looks stretched.
display: block removes the small gap browsers leave under an image.

🎮 Try it: add a .hero img rule with width: 100%;, height: 420px;, object-fit: cover;, and display: block; then press ▶ Run.

🤔 Quick check before you go on

What object-fit value fills the box and crops the extra? Type it, then press Submit to unlock the next steps.

3 Make it yours

The photo comes from a free placeholder service. When you are ready, change the web address inside the <img> tag to a picture that fits your story.

🎨 Try it later: swap the picsum web address for a photo of your community, then Run to see your own hero image fill the page.

✓ Finish this stage

To complete Stage 2, your hero image needs object-fit: cover and a set height. Press Check my work when you are ready. This opens Stage 3 and lets your teacher see that you finished.

YOUR CODE

PREVIEW