Project 4: Photo Gallery

HTML Masterclass

Builds on these lessons

Img Responsive Images Img Srcset Img Sizes Img Picture Element Img Webp Img Avif Img Lazy Loading

Step 1 of 4

Project

Gallery Skeleton with Figure & Figcaption

Build the gallery skeleton with a <main class="gallery"> holding two <figure> elements, each wrapping an <img> and a <figcaption> that credits or describes the photo. <figure>/<figcaption> ties an image to its caption semantically, which a bare <img> next to a <p> never does.

🎯 Your Task

Please add the exact code shown in the light gray box below to your editor.Do not delete your previous code, just insert these new lines in the correct place!

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Coastal Trails | Photo Gallery</title>
</head>
<body>
  <h1>Coastal Trails</h1>
  <main class="gallery">
    <figure>
      <img src="cliffs.jpg" alt="Sea cliffs at sunset with waves crashing below">
      <figcaption>Sea cliffs, Big Sur — golden hour.</figcaption>
    </figure>
    <figure>
      <img src="tidepool.jpg" alt="A shallow tidepool with an orange starfish">
      <figcaption>Tidepool find near Point Reyes.</figcaption>
    </figure>
  </main>
</body>
</html>

← Previous Next →