Learn HTML by Building a Cat Photo App - Step 15

Tell us what’s happening:
Describe your issue in detail here.
I am stuck on the current lesson.: switching “cat photo” link to Photo of a cat to the link itself.

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 <a href="https://freecatphotoapp.com"</a>
      </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>

Your browser information:

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

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

Link to the challenge:

you need to make this img element into a link

what have you tried to get that to happen?

I have moved my anchor (a) every spot possible ran the code and to no avail not any closer to be correct. It’s becoming frustrating and do not have the option to quit, and the more I linger on this simple task Im starting to forget what I previously learned in prior lessons.

well, guessing where it should go is probably not a very good strategy because if you guess correctly, the next time you have to do it, you won’t know why it worked and will end up guessing again with quite possibly worse results.

How did you turn the words cat photos into a link in step 12?

tell me your steps…

Well I just followed the steps before hand. I did start guessing after I tried what I thought might be right but I attributed <a target=_blank (which it didn’t tell me what that was for) the href= “link” > wrote “cat photos” end anchor, end paragraph. I’ve even replaced “cat photos” with the link itself and the code won’t run.

<html>
  <body>
    <main>
      <h1>CatPhotoApp</h1>
      <h2>Cat Photos</h2>
      <!-- TODO: Add link to cat photos -->
      <p>Click here to view more cat photos <a target="_blank" href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>.</p> 

which does turn it into a link but isn’t correct.

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.

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

click the Reset step button please as the code is definitely incorrect now.

Instead focus on the steps to turn something into a link.

We add an anchor element around it.
But how?
Opening tag on the left.
Closing tag on the right.
So without touching any other line of code (after the reset button is clicked and the code is restored), please add the opening anchor tag to the left side of the img element and the closing anchor tag to its right.

<a <img src=“https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg” alt=“A cute orange cat lying on its back.”> I did, and was a no go. I appreciate your help.

I don’t see a proper anchor opening tag or a closing tag.

Here are some resources to help you remember how to create an anchor tag.

Step 10 and step 11.
And/or This post

Pay attention to what it means to have an anchor opening tag and and an anchor closing tag.

I’m sorry I don’t understand. I turned the words “Cat photos” into a usable link, but doing the same thing to the image element is not working. I understand if you can’t spend anymore time on this remedial problem. I understood the previous lessons and breezed through until this part, i’ve been stuck for 3 hours now. I continue to try. thank you for your time.

You just need to write a proper anchor opening tag on the left of the img and a closing tag on the right.

<a href=“something”><img src=“something”></a>

And i tried: <a <img src=“https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg” alt=“A cute orange cat lying on its back.”>

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

<a href=“something”><img src=“something”></a>

Your try is the top line. And my sample code is the bottom line.

Do you see the closing anchor tag in the bottom line? (It is on the right of the img)
Do you see the opening anchor tag and how it has an href attribute and starts and ends with angled brackets? The opening tag is on the left of the img.

A cute orange cat lying on its back finally got it i needed the closing> after the word Something thank you very much, oh my god.

1 Like

I am glad you got it.

If you can, try to reset step 12 and redo it as extra practice.

1 Like

will do, I want to be so much better. thanks for the help.

1 Like

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