Step 4.1 · Gallery pages

Build the gallery pages

Create the first gallery page from the starter file, fill it with your images, then copy it for the other two topics.

You will work in: site/red.html, site/blue.html, site/yellow.html
Learning outcome: Semantic HTML

Each gallery page shares the home page's header, navigation, footer and style sheet. Only the main content changes.

Rename topic-1.html to your first topic, for example red.html, and open it.
Copy the <head> changes from your home page: the Google Fonts code. Then give this page its own title and description.
Copy your finished header and footer from index.html so every page matches. Move aria-current="page" to this page's link in the navigation.

Read the main content. The topic text and the gallery sit side by side on desktop:

site/red.html

<main class="container gallery-page">
    <!-- Topic text -->
    <section class="intro">
      <h1>Topic 1</h1>
      <p>Your topic paragraph (75–120 words) goes here.</p>
    </section>

    <!-- Gallery: copy one <li> for each image (9–12 total) -->
    <ul class="gallery">
      <li>
        <a href="images/large/topic-1-01-lg.jpg" data-caption="Image title. Photo: Creator Name, Unsplash License">
          <img src="images/thumbs/topic-1-01-sm.jpg" alt="Describe what the image shows" width="280" height="280">
        </a>
      </li>
      <li>
        <a href="images/large/topic-1-02-lg.jpg" data-caption="Image title. Photo: Creator Name, CC BY 4.0">
          <img src="images/thumbs/topic-1-02-sm.jpg" alt="Describe what the image shows" width="280" height="280">
        </a>
      </li>
    </ul>
  </main>

Add your topic title and paragraph inside <section class="intro">.

Fill the gallery. Each image is one list item. The link points to the large image and the <img> shows the thumbnail:

Part	Change it to
`a href`	the large image, `images/large/red-01-lg.jpg`
`data-caption`	the caption shown in the lightbox, including the credit from your credits table
`img src`	the thumbnail, `images/thumbs/red-01-sm.jpg`
`alt`	a description of what the image shows

Copy one complete <li>…</li> for each image and change all four parts. No two should be the same.

Preview. Clicking a thumbnail opens the large image on its own page for now. You add the lightbox in step 4.2.
Make the other two pages: choose File > Save As, name the file for your second topic, and replace the title, description, text, images and aria-current link. Repeat for the third topic.

Broken image?

Check the path one folder at a time: is the file really in images/thumbs? Is the name spelled exactly the same, including -sm, .jpg and any capital letters?