Learn HTML by Building a Cat Photo App - Step 12

HTML-CSS
1

I’ve been trying to fix this one but to no avail.

It only says " 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."

<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>

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

<!-- User Editable Region -->

    </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

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

Link to the challenge:

2

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

You did a great job of nesting the words cat photos which you added to the code.

But, what the step asks for is to nest the two words cat photos while they remain in the p element statement.
I can see you have a clear understanding on how to nest the words. I suggest resetting the step and completing the anchor, exactly the same, but with the existing cat photos in the p element.

Great understanding and progress!

Happy coding! :slight_smile:

2 Likes
3

Thank you so much, @anon42932716 :slight_smile:

I tried these also but the step prompts

The link’s text should be cat photos . You have either omitted the text or have a typo.

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

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

Hello!
< element>Here is an < opening anchor> example of what< /closing anchor> it should look similar to, @mavp. < /closing element>
I hope this helps you!

Happy coding! :slight_smile:

1 Like
5

Finally, got the correct code!

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

Thank you, @anon42932716! :slight_smile:

2 Likes
6

Keep up your good progress!

Happy coding! :slight_smile:

7

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