Learn HTML by Building a Cat Photo App - Step 30

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.

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>
        <figure>

<!-- User Editable Region -->

  <figure><img alt="Five cats looking around a field."src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg"/></figure>

<!-- User Editable Region -->

        </figure>
      </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/113.0.0.0 Safari/537.36

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

Link to the challenge:

2

Did you have a question about this challenge? It’s not only an invaluable skill to be able to describe the issues you’re facing but it also helps us to help you!

3

I added a alt to improve accessibility of the image I added and I was wrong due to not having a figure. I added that and I’m still wrong.
The question ask is:
To improve accessibility of the image you added, add an alt attribute with the text:

Five cats looking around a field.
Then when you type out the alt, you are wrong due it needing to be nested in a figure. So I’m at a lost

  1. List item
4

I’m not sure why you were getting error messages before you added the additional figure element here, but it definitely shouldn’t be there.

I just pasted your entire HTML code into the challenge and removed these figure tags and the step passed for me.

One thing to note is that it’s good practice to separate HTML attributes with spaces (i.e. there should be a single space between your src and alt attributes).

1 Like
5

I’ll start over again and see if that helps

6

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