Learn HTML by Building a Cat Photo App - Step 12

I’m stuck on step 12 with this…
href http://freecatphotoapp.com
It’s saying it should be nested in the p element and I just don’t understand.
Please help.
Thank you,
Jane

  **Your code so far**
<html>
<body>
  <h1>CatPhotoApp</h1>
  <main>
    <h2>Cat Photos</h2>
    <!-- TODO: Add link to cat photos -->
  <a> href http://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>
  **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.5112.102 Safari/537.36 Edg/104.0.1293.70

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

Link to the challenge:

Try restarting the step. This will return the original code which includes the p element back.

Once restarted, review this instruction:

In the text of your p element, turn the words cat photos into a link to https://freecatphotoapp.com .

This means that you are to add a link inside the p element. The link should make the two words “cat photos” become clickable. Let us know once you have tried this exercise again if you still need help with that.

It’s not working. Idk what I’m doing wrong

It says to remove any extra anchors. this is what I have.
<p>Click here to view more https://freecatphotoapp.com</p>

I’ve edited your post 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.

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

Take a look at this post. Hopefully it will help you move forward in this step

Thanks I’m still stuck

hi Jane,

Sorry to hear that. Can you tell me what you attempted next?
Please also post your newest code following your latest attempt.

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

That is what I put last

1 Like

great, you’ve created a link but now you just need to go and reset the exercise and this time do not erase any of the code that you are given. Just add code…

Once you restart the exercise it will give you the original paragraph, and if you add the link to that without erasing anything (a link nested inside the paragraph), it will be what the exercise intended.

I’m just not understanding :frowning:

alrighty, no worries, let me try this a different way.

First, can you click on the “Restart Step” button and let me know once you’ve done that and reloaded the page? I will wait for you to post here…

1 Like

ok done. thank you for being so patient with me. Newbie here trying to change careers at 42 lol

no worries at all, I’m a few years older :slight_smile: (also here learning)

Okay so you’ve restarted and at this point you have an html paragraph which looks like this:

<p>Click here to view more cat photos.</p>

If you look on the right-hand-side of your screen, there’s a preview page which shows these words right now. They are just plain text like this:

Click here to view more cat photos.

What we are trying to learn is how to turn the last two words of that sentence “cat photos” into a clickable link in the browser.

So as you know, links are made up of anchor tags. And anchor tags are made of three parts.
1- <a href="a link on the internet">
we call this part the start tag
2- some words that we want to become clickable
we call this the link text
3- </a>
and this ending tag

So thinking about the words “cat photos” and my three-part explanation of the anchor tag, which part do you think it belongs in? Part 1, Part 2 or Part 3?

we want it to become clickable right? so 2?

perfect yes.

so now looking again at the whole anchor tag in general we know it looks like this:

<a href="a link">some words we want to click</a>

We determined the words we want to click are cat photos.
Now we just need to find those two words in the original paragraph and carefully place a starting achor tag on the left as well as an ending anchor tag on the right of these words.

If we do it carefully enough, the words become a link and change color.

Try and let me know how it went.

1 Like

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


This is what I did but it’s still not right


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

I’ve edited your post 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.

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

You are getting closer! Don’t worry…

Now you have this code:

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

The link you created says “cat photos.” with a period right?
If you look back at the instructions, they are asking for the link without the period, so just move your right-hand-side (ending tag) so it does not enclose the period. (ps. I just saw that you didn’t put an ending tag yet. So just add that in carefully and it should work)

Finally if you look back at the steps you need to done one more thing after that… (should be an easy one, but let me know if not)