Learn HTML by Building a Cat Photo App - Step 29

Inside the figure element you just added, nest an img element with a src attribute set to `

cats-photo. This is a caption for the image.

Your code so far

<html>
  <body>
    <main>
      <h1>CatPhotoApp</h1>
      <section>
        <h2>Cat Photos</h2>
        <!-- TODO: Add link to cat photos -->
        <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
        <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
      </section>
      <section>
        <h2>Cat Lists</h2>
        <h3>Things cats love:</h3>
        <ul>
          <li>cat nip</li>
          <li>laser pointers</li>
          <li>lasagna</li>
        </ul>
        <figure>
          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
          <figcaption>Cats <em>love</em> lasagna.</figcaption>  
        </figure>
        <h3>Top 3 things cats hate:</h3>
        <ol>
          <li>flea treatment</li>
          <li>thunder</li>
          <li>other cats</li>
        </ol>

<!-- User Editable Region -->

        <figure>
       <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg." alt="cats-photo.">   
         <figcaption>This is a caption for the image.</figcaption>
        </figure>

<!-- User Editable Region -->

      </section>
    </main>
  </body>
</html>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36

Challenge: Learn HTML by Building a Cat Photo App - Step 29

Link to the challenge:

The instructions didn’t ask you to add a figcaption or alt text. You are jumping the gun here. It’s great that you want to add those things, but you should only do what the instructions ask and no more. You will add these things in the following steps.

Also, you added a dot at the end of the image URL. That dot completely changes the meaning of the URL and keeps the image from appearing on the page? Do you notice that the image isn’t appearing? If you remove the dot at the end then you should see the image.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.