Learn HTML by Building a Cat Photo App - Step 12

HTML-CSS
1

Hello please I need help I
m hooked here

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">link to cat pictures</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/117.0.0.0 Safari/537.36 Edg/117.0.2045.41

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

Link to the challenge:

2

Hallo,

the task was to turn the words “cat photos” into a link by adding opening and closing anchor <a> tags around these words.

Have a closer look to the paragraph, where the change has to be. It looks like:
<p>See more cat photos in our gallery…

So you have to place the opening anchor-tag in front of the part "cat photos" and the closing anchor-tag behind "cat photo"s, in front of “in our gallery”.

The part of text, which should be turned into a link must always be surrounded by the opening and the closing anchor-tag.

3

see more cat photos in our gallery

that’s what I have been doing it’s still not working out

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

I don’t think you want two opening a tags in a row like that.

Likewise, you don’t want two closing a tags.

You are only adding one link. Thus, you should only add one opening a tag and one closing a tag.

Also, do not add extra spaces inside the link. The only space that should be inside the link is the space between “cat” and “photos”. The space separating “photos” and “in” should be outside of the link.

1 Like
7 
<p>see more <a href="https://freecatphotoapp.com">cat photos</a> in our gallery </p>
8

Look at the hint you are getting:

“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.”

Is the text in the p element exactly as the hint says it should be. (Hint: it is not :slightly_smiling_face: ).

Be very careful not to make any unexpected changes that aren’t asked for in the instructions. Even the smallest change can cause the tests to fail. You are doing the link correctly now. You just changed a few other things you shouldn’t have. You might want to reset the step to get the original HTML back and then be careful to only add the opening and closing a tags and change nothing else.

1 Like
9

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