Learn HTML by Building a Cat Photo App - Step 15

HTML-CSS
1

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

Your code so far

<html>
  <body>
    <main>
      <h1>CatPhotoApp</h1>
      <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>
      <img  src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."<a <elementName> https://freecatphotoapp.com 
    </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/108.0.0.0 Safari/537.36

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

Link to the challenge:

2

i need help, i am a beginner and dont understand what im doing wrong here

3

“Turn the image into a link by surrounding it with necessary element tags.”

This implies that you are going to need to surround the img tag with the necessary a tags to turn it into a link. This is basically the same thing you did when you turned the words cat photos into a link in the p element.

1 Like
4

im still lost, what do you mean surrond then img tag

5

When you surround something you place it between things. For example, to make the words cat photos a link you surrounded it, or placed it between opening and closing a tags.

6

okay, i put a closing a tag on it but its gray. and when i put the ling before the longer link thhat goes to the picture it all turn gray

7

You’ll need to show us your updated HTML so we can see what you did. To display your code in here you need to wrap it in triple back ticks. On a line by itself type three back ticks. Then on the first line below the three back ticks paste in your code. Then below your code on a new line type three more back ticks. The back tick on my keyboard is in the upper left just above the Tab key and below the Esc key. You may also be able to use Ctrl+e to automatically give you the triple back ticks while you are typing in the this editor and the cursor is on a line by itself. Alternatively, with the cursor on a line by itself, you can use the </> button above the editor to add the triple back ticks.

8 
<html>
  <body>
    <main>
      <h1>CatPhotoApp</h1>
      <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>
    <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back." <a <elementName>https://freecatphotoapp.com a>.
    </main>
  </body>
</html>
9

im not sure if i did it right

10

I would restart the step to get the original HTML back.

Look at how you turned the words cat photos into a link:

<a target="_blank" href="https://freecatphotoapp.com">cat photos</a>

Do you see how you surrounded the words cat photos with an opening and closing a tag? That’s exactly what you want to do to the img tag. This is how you turn anything into a link. You surround it with opening/closing a tags.

11

okay i get and i did that but its now telling me to add an elemt name

12

ima going to bed, i do it tm, thank you for your help though i rly appreciate it

13

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