Learn HTML by Building a Cat Photo App - Step 12

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here. I am not sure what is wrong with this code, I have tried a few variations and cannot get it to pass. Trying to get an <a into a

.

Your code so far

<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.<a href="https://freecatphotoapp.com">cat photos</a></p>
<a href="https://freecatphotoapp.com">link to cat pictures</a>

<!-- User Editable Region -->

      <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
    </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/114.0.0.0 Safari/537.36

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

Link to the challenge:

2

Don’t add any new text. You added a second “cat photos” to the end of the p element. You don’t want to do that.

You want to turn the existing “cat photos” in the middle of the p element into a link.

3

Click here to view more <a href=cat photos

? Is this correct? It is not working. Looks good on the screen, not sure what is missing.
4

You have already added one link:

<a href="https://freecatphotoapp.com">link to cat pictures</a>

Do you see how you turned the words “link to cat pictures” into a link by wrapping them with a tags? You need to do the same thing to the words “cat photos” in the p element.

Try again and if you can’t get it to work then you can paste your updated HTML in here. 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.

5 
<p>Click here to view more <a href=<https://freecatphotoapp.com>cat photos</a></p>

Like this?

6

Welcome to the community!
You appear to have the correct idea. Just not quite there, yet. See how the exampled bbsmooth posted for you is anchored. This is how you would do it in the sentence in the p element.

and your recent post

<p>Click here to view more <a href=<https://freecatphotoapp.com>cat photos</a></p>

If you look closely, you will notice the difference between his example and your post. Look at the way the < a href in his is coded, and then in yours.
I hope this helps you some.
Happy coding!

7

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