Learn HTML by Building a Cat Photo App - Step 21

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

  **Your code so far**
<html>
<body>
  <h1>CatPhotoApp</h1>
  <main>
    <section>
      <h2>Cat Photos</h2>
      <!-- TODO: Add link to cat photos -->
      <p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</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><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate."></ul><img<alt
        <li>cat nip</li>
        <li>laser pointers</li>
        <li>lasagna</li>
     </ul> 
    </section>
  </main>
</body>
</html>
  **Your browser information:**

User Agent is: Mozilla/5.0 (Linux; Android 8.1.0; SM-P585) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36

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

Link to the challenge:

I cant get the step 21 in the cat photo . This is my code:

    A slice of lasagna on a plate.

Hi @labeebah.anjola ,

You are supposed to add the img after the ul element, which means after the closing ul tag :

1 Like

Could you explain why this is how it works?
I had img step/line right after the

    before the first
  • .

When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks.

```
Your code goes here
```

You can also use the “preformatted text” tool in the editor ( </> ) to add backticks around text.

Hi, sorry for that. I’m very new at this and didn’t realize how that format would end up looking.

So I was trying to ask why I have to put the image line under the unlisted in order for that to work.

1 Like

It’s fine, don’t worry about it.

The img element should be after the ul element (the whole ul element).
The ul element consists of :

  • An opening tag <ul>.
  • Multiple li elements.
  • A closing tag </ul>.
   <ul>
      <!-- Place 1 -->
      <li>cat nip</li>
      <li>laser pointers</li>
      <li>lasagna</li>
   </ul> 
   <!-- Place 2 -->

If you put the img after the ul opening tag (Place 1), it would be within the ul element. Which is wrong and the tests won’t accept it.

But if you place it after the closing tag (Place 2), it would be after the ul element which is the right way to pass this step.

Great, thank you for explaining!

1 Like