Learn HTML by Building a Cat Photo App - Step 12

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.
I don’t know what I’m doing wrong
Your code so far

<html>
  <body>
    <main>
      <h1>CatPhotoApp</h1>
      <h2>Cat Photos</h2>
      <!-- TODO: Add link to cat photos -->

<!-- User Editable Region -->

      <p><a href="https://freecatphotoapp.com">cat photos</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/112.0.0.0 Safari/537.36

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

Link to the challenge:

2

You have a typo. Follow the instructions,your code seems to be incomplete.

3

Its a little more than a typo. You seemed to have deleted a lot of the text that the challenge gave you. You should not have deleted any text, and only put the link around the word “cat photos”. I recommend resetting the lesson so you get back all the text that was deleted.

1 Like
4

What do you mean put the link around the word "cat photos’?
Thanks

5

As you have it right now. Your anchor tag or (link) right now is fine between the words “cat photos”. However, you got rid of all the other text.

<p>See more cat photos in our gallery.</p>

You got rid of all this text, and just kept the words “cat photos” But you still need to have this text. The only thing that should change in that sentence is the anchor tag around “cat photos”

6

I kept the text but it says “The link’s text should be cat photos . You have either omitted the text or have a typo.” Do you know what that means?

7

Can you post your new code for us to see whats going on. You can use the format button which looks like </>. Then just past all the new code between the lines it gives you

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

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

There’s the current code.

10

You now put your link around all of the text. Look at your original post, see how you have the opening anchor tag <a href="> that comes before the words “cat photos”. Then you have the closing tag </a> after the word cat photos. Anything between those two tags are going to be the text that is made into a link. You need to keep all the original text, but “cat photos” are the only words that should between the <a href> and the </a>

11 
<html>
  <body>
    <main>
      <h1>CatPhotoApp</h1>
      <h2>Cat Photos</h2>
      <!-- TODO: Add link to cat photos -->
      <p><a href= "cat photos"</a></p>
      <a href="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>

Are you talking about putting it like that?
If you are it says " The link’s href value should be https://freecatphotoapp.com . You have either omitted the href value or have a typo."

12

No, you need to keep all of the text <p>See more cat photos in our gallery.</p>. You should not delete any of this text, all of this text should be there. The link needs to go
around just the words cat photos, but still keep all the text

This is some text <a href="link"> that has a link</a> around it.

Notice in the example I gave above. I only have the link around the words “that has a link”.
You need to do the same thing, but have your link only arounds “cat photos” While not deleting or moving any text

13

Tell us what’s happening:
I don’t know how to do the link thing
Your code so far

<html>
  <body>
    <main>
      <h1>CatPhotoApp</h1>
      <h2>Cat Photos</h2>
      <!-- TODO: Add link to cat photos -->

<!-- User Editable Region -->

      <p><a href="See more cat photos in our gallery."></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/112.0.0.0 Safari/537.36

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

Link to the challenge:

14

The value of the href attribute should be the URL that the link goes to.

15

OK, so you have a p element with some text and you want to turn a portion of that text into a link.

A p element without a link:

<p>Please visit my website for awesome content</p>

Change the words ‘my website’ into a link:

<p>Please visit <a href="example.com">my website</a> for awesome content</p>

The href attribute holds the url for the link. The anchor tags enclose the content which you wish to make into a link (e.g. the words ‘my website’).

16

Bro nobody explained it that easily, I finally get it now thank you.