Learn HTML by Building a Cat Photo App -step 12 Step 11

HTML-CSS
#1

Tell us what’s happening:
hello.I am currently on step 12 and although i have the used the forum solution for the code i have not been successful.

Your code so far

<html>
  <body>
    <main>
      <h1>CatPhotoApp</h1>
      <h2>Cat Photos</h2>
      <!-- TODO: Add link to cat photos -->
      <p>Click here to view more cat photos.</p>
      <ahref=""https://freecatphotoapp.com">link to cat pictures</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>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.5304.107 Safari/537.36

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

Link to the challenge:

#2

What forum solution do you mean?

Try to read the instructions. Let us know if you need help understanding them or need help implementing them.

#3 
  <p>Click here to view more cat photos.</p>
  <a href="https://freecatphotoapp.com">link to cat pictures</a>

This is the result after step 11. Step 12 says to replace the words"cat photos " in the text of the P element to a link to “https://freecatphotoapp.com” by adding opening and closing anchor (a ) tags around these words. this is where i am getting confused

#4 
 <p>Click here to view more cat photos 
          href="https://freecatphotoapp.com"</p>
  <a href="https://freecatphotoapp.com">link to cat pictures</a>

This is the result i got from the forum but it does’nt seem to work

#5

The code you copied is not a solution. It is broken code that someone posted here so that they can get help.

(The forum is not a place to get code but a place to post broken code and get help. )

I suggest you reset this step back to its initial state.
Then use what you have learned about anchor tags and try to turn the cat photos phrase into a link.

If you need help with that after giving it a few tries, please respond here and show us what you have tried.

#6

ok thank you. i have found this step really frustrating because when i have tried what i think is right which is quite basic it still fails. i will try a few more and show you . thank you so much

1 Like
#7

Yes it is a hard one for a beginner but it is worth trying it based on what you learned so far from step 10 and 11.

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

am i supposed to delete the text “click here to see more” before nesting the link

#9

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

#10

You have to add back the text that was in the paragraph before.

Click here to view more cat photos.

You deleted the
Click here to view more

you also should make the anchor text not have any extra spaces (you have one extra space to the left of the word cat.

Try this and see how it looks in the preview pane.

#11

finally done it. thanks for your help.

1 Like
#12

Your code is not readable unless you go to the trouble of posting it correctly on the forum.
I have posted the instructions here for you, please try them