Learn HTML by Building a Cat Photo App - Step 12

HTML-CSS
1

Tell us what’s happening:
I’ve been having trouble with this particular stage and i need HELP! This is the stage where i have to put the anchor element and link text in the P element .I’ve gone through all solutions on this problem but none is working out

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.</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 (Linux; Android 13; SM-A515F) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Mobile Safari/537.36

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

Link to the challenge:

2

I believe for this one you need to put the link inside the p element. Currently it’s underneath the p in your code

3

The code you pasted above is the same as the original HTML. Can you try to add the link and if it still doesn’t work then you can paste your broken HTML in here and we can help you. Until we can see what you are doing it is hard to know what help you need.

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

You’ll want to learn how to use the triple back tick method to post your code in here. Posting pics of code is not the best way to show us.

It also looks like you might be using an older version of this challenge. Trying pressing Ctrl + F5 a few times to clear our your browser’s cache. And then I would restart the step to get the correct HTML. The sentence inside the p element should be:

See more cat photos in our gallery.

And then you just want to turn the words cat photos into a link by wrapping them in a tags.

1 Like
6

Below is one of my many solutions on this question that doesn’t still work.
I’m also not using a laptop currently so ill be unable to do as you said above
Please help from here.

7

HereBelow is one of my many solutions on this question that doesn’t still work.
I’m also not using a laptop currently so ill be unable to do as you said above

8

I’ve tried it…it’s not still working out, i don’t understand what the issue is

9 
  <p>See more<a href= "https://freecatphotoapp.com">cat photos</a>in our gallery.</a></p>

The preview for this is: See more cat photos in our gallery.

This is the exception:

“After nesting the anchor (a ) element, the only p element content visible in the browser should be See more cat photos in our gallery. Double check the text, spacing, or punctuation of both the p and nested anchor element.”

10

You are so close. Look at the preview window. Do you see how there is no space between the words “more” and “cat” and the words “photos” and “in”. You need to keep the spaces there.

1 Like
11

Thank you so much, i finally figured it out❤️

12

Thank you so much, i figured it out with your explanation also, i just had to put some spaces❤️