Learn HTML by building a Cat Photo App-Step 22

HTML-CSS
1

After the unordered list, add a new image with an src attribute value set to:

https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg

And its alt attribute value to:

A slice of lasagna on a plate.

      <li>cat nip</li>
      <li>laser pointers</li>
      <li>lasagna</li>  
      <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">/img></ul>
    </ul>

**

2

to add an element after another element, you should always add it after the closing tag of the previous element.
For eg. if I want to add an img tag after a p tag then I would do this
<p>paragraph text</p><img src="something">

Notice that the img must come after the previous element is completely closed (after its closing tag)

3 
   <ul>
      <li>cat nip</li>
      <li>laser pointers</li>
      <li>lasagna</li>
      <img src= "https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate"</ul></img>
    </ul>
4

Hey sunny, look at the end of your <img>. You have an unnecessary </ul> inside of your img. Get rid of that, and keep the </ul> at the end of the code

5

Image tag don’t have end tag & remove the ul tag. It is not needed.

6 
      <li>cat nip</li>
      <li>laser pointers</li>
      <li>lasagna</li>
      <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.""></img>
      
    </ul>
7

Do you have a question? You are now missing the opening <ul> at the top. Here is an example of what it should look like

<ul>
   <li>one</li>
   <li>two</li>
   <li>three</li>
   <img src="image link" alt="text specifying image">
</ul>

The more you can explain in words on what issues you are having, what you tried, and what your thinking of the solution is then the better we can help clear up your confusion

8

I moved it around and still cant get it to pass

 <ul>
      <li>cat nip</li>
      <li>laser pointers</li>
      <li>lasagna</li>
      <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt=" A slice of lasagna on a plate."></img>                                                                                                     </ul>
9

What issues are you having? What does the challenge say when you try to submit the current code? Its hard to help without exactly knowing the issue is. However, in the code you posted you are now missing a closing </ul> after the end of the img.

You do not need to add a </img> at the end of your image. If you look back at my example it looks like

  <img src="image link" alt="text specifying image">
10

This is what it keep saying

Sorry, your code does not pass. Keep trying.

Hint

There should be an img element right after the closing </ul> tag.

   <ul>
      <li>cat nip</li>
      <li>laser pointers</li>
      <li>lasagna</li>
      <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
   </ul>
11

Ok, look at the hint it gives you " There should be an img element right after the closing </ul> tag. It tells you the image needs to come AFTER the closing </ul>. Look at your code, and look at the hint. Can you see why your current code does not work?

12

so right after the closeing.

13

Blockquote

14

Blockquote

               </ul></img
15

No, you are just adding the closing image after the closing </ul>. your entire image needs to start after the closing </ul>. I added an example, you can click on it if you still are unsure. In my example I set the image on the outside of the ul, but I did not include the image text. You will still need to fill that out yourself

Example:

 <ul>
      <li>cat nip</li>
      <li>laser pointers</li>
      <li>lasagna</li>
   </ul>
<img src="link for example" alt="example text">
16

hahahah omg I placed it in between the open and closeing of

    thank you cody .

17

Glad you finally got it working!