Learn HTML by Building a Cat Photo App - Step 10

HTML-CSS
1

Keeps saying Your anchor (a ) element should be below the p element. You have them in the wrong order. I have put the a element after the P so I am confused.

<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='http://freecatphotoapp.com'></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/116.0.0.0 Safari/537.36 Edg/116.0.1938.76

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

Link to the challenge:

2

Hello and welcome to FCC Forum, a community of people helping each other!

A very tiny typo at the beginning of the link https not http.

Happy coding! :slight_smile:

3

That’s not the hint I am getting when I test your HTML. I am getting:

“Your anchor (a) element should link to https://freecatphotoapp.com. You have either omitted the URL or have a typo.”

And that’s because the URL you are using is not quite correct. It should be https:// not http://.

4

I added the s, that was my mistake however it still says the same thing. Here is what I have so far.

CatPhotoApp

Cat Photos

See more cat photos in our gallery.

5

Seems to be giving me the same issue. A should come after P. I thought I did that.

CatPhotoApp

Cat Photos

See more cat photos in our gallery.

A cute orange cat lying on its back.
6

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.

7

I am sorry I am new and trying to learn. Thank you for your patience. Are these the back ticks```?

8

Yes.

You can also use the </> button in the menu bar at the top of t his editor.

9 
<html>
  <body>
    <main>
      <h1>CatPhotoApp</h1>
      <h2>Cat Photos</h2>
  <!-- TODO: Add link to cat photos --> 
      <p>See more cat photos in our gallery.</p>
      <a href='https://freecatphotoapp.com'></a> 
   <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>
10

The HTML you just pasted in here passes for me.

11

This is what it says for me.
Sorry, your code does not pass. You’re getting there.

Your anchor (a) element should be below the p element. You have them in the wrong order.

12

Hmm. I don’t know why it would say that. Your HTML is correct. I would just move on to the next step.

13

Maybe I will try to do a reset. I don’t think I can move on until it is correct. Hopefully reset will help. Thank you.

14

Sure, try that. You can move on to the next step even if you don’t “officially” pass this one.

15

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