Learn HTML by Building a Cat Photo App - Step 12

Tell us what’s happening:

I’m not sure what I’m doing wrong. can someone tell me what I’m doing wrong? This what my code looks like.

     <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
 </main> <p> <a href="https://freecatphotoapp.com">cat photos</a>  </p> 

html
<html>
  <body>
    <main>
      <h1>CatPhotoApp</h1>
      <h2>Cat Photos</h2>
      <!-- TODO: Add link to cat photos -->

<!-- User Editable Region -->

      
      <p>See more cat photos in our gallery.</p>

<!-- User Editable Region -->

      <a href="https://freecatphotoapp.com">link to cat pictures</a>
      <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
  </main> <p> <a href="https://freecatphotoapp.com">cat photos</a>  </p> 



  </body>
</html>

Your browser information:

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

Challenge Information:

Learn HTML by Building a Cat Photo App - Step 12

Hello, what is the console saying is wrong, have you checked this?
To sum things up you need a link for cat photos when you hover over these words in side the p element. The code that you have is close below the main closing tag just move that up to the p element. Good luck

Buddy this step is telling you to convert the word cat photos into a link !!

You can do this by wrapping it into link

<p> This is a world of <a href="link address">programming</a>  </p>  

See how I converted the word programming into a link

Same you need to do with cat photos !!

Hope you understand !!

Thanks for the reply. But I did that but It said " After nesting the anchor (a ) element, the only p element content visible in the browser should be `See more cat photos in our gallery." So i’m not sure what to do.

Welcome to the forum @leoasawasuwannakul

The anchor element needs to nest the target words in the paragraph element.

You created new text cat photos and nested the anchor to that text.
This is not what the instructions want you to do.

Please reset the step to restore the original code.

Place the opening anchor tag before the word cat in the paragraph element.
Don’t forget to add the href attribute.

Then close the new element by placing the closing anchor tag after the word photos.

Here is an article explaining how to link text and images inside nested elements you may find helpful.

Happy coding

I tried that but It says the link text doesn’t say cat photos. from what I understood this is the code typed in. If I misinterpreted what you said please tell me, and thank you for being patient with me. I’m new to coding so I don’t really know what I’m doing.

here is the code I forgot to put it in to the last comment

cat photos

alt=“A cute orange cat lying on its back.”>

cat photos

Hi @leoasawasuwannakul

So the forum can assist please post your full code.

Use the following method to post code to the forum:

  1. On a separate line type three back ticks.
  2. On a separate line paste your code.
  3. On the last line type three back ticks. Here is a single back tick `

Happy coding

CatPhotoApp

Cat Photos

See more cat photos in our gallery.

link to cat pictures A cute orange cat lying on its back.

cat photos

I’m trying to give you the code but it keeps on showing up as a picture.

You can use the Preformatted Text button to post your code

CatPhotoApp

Cat Photos

See more cat photos in our gallery.

link to cat pictures

<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-

app/relaxing-cat.jpg" alt=“A cute orange cat lying on its back.”>

cat <a href="https://freecatphotoapp.c <p>Blockquote</p> <p>om">photos</a> </p> ```<br> </main></p> </body> </html>`

Please take a closer look at the given example in the instruction.

We have a paragraph:

<p>I think freeCodeCamp is great.</p>

To turn the text freeCodeCamp into a link, we wrapped it inside the <a> </a> tags and set the href attribute. Like this:

<p>I think <a href="https://www.freecodecamp.org">freeCodeCamp</a> is great.</p>

Now, we have a paragraph:

<p>See more cat photos in our gallery.</p>

To turn the text cat photos to a link, you can do the same steps as the example above:

  • Put the text cat photos inside the <a></a> tags. Pay close attention to the spaces, don’t add unnecessary spaces
  • Inside the opening tag <a>, set the href attribute to https://freecatphotoapp.com

Reset your code and try again. Happy coding!

Ok this is the code that I wanted to show. sorry for taking so long.

See more cat photos in our gallery.

 <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">  <p> cat <a href="https://freecatphotoapp.com">cat photos</a> </p> 

You messed up the default code quite a bit.
Reset your code and only make change to the code on line 7.
Follow my instruction above. Happy coding!

Thanks for the help the code works now.

1 Like