Https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-html-by-building-a-cat-photo-app/step-14

Curriculum Help
,
1

I have to turn the image into a link, I have tried almost every combination, but still incorrect. Little help, please. Here is my code so far.

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

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.

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 (’).

4

Please don’t use the challenge url as the post title. We can’t click on the url if it is in the post title.

5

Thank you, sir, I appreciate it.

6

you already made the text ‘cat photos’ into a link.

just do the same with your image but this time nest your <img> element itself in <a> tag

7

I’m sorry, man, but I’m not getting this…

8

Put an anchor element around the image element. What does your code look like when you try to do that?

9

Nest the Content of this <p> element in anchor element
<p> Hi </p>
will become like this.
<p> <a href=""> Hi </a> </p>

Now nest Element itself in an anchor element :
<p> Hi </p>
will become like this :
<a href=""> <p> Hi </p> </a>

since the element image has no content inside it. <img src="" /> the image is in the src attribute so nest all the element in an anchor element

10

Still nothing…Dont know what I’m doing wrong.

11

What is your updated code?

12

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

13

Where’s the part where you tried to add the anchor tag?

14

It was incorrect, so I restarted the step.

15

We can’t help you fix your code if you don’t actually show us what you tried.

16

<a 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.">

This is what I get, the error msg reads, Hint You should have an img element with an src value of https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg. You may have accidentally deleted it.

17

If i may give you a suggestion

watch HTML crash course video .
then watch CSS crash course video .

then come and work with this website you will have a much better background and will help u be more efficient

start with this:

18

You should not change the image element at all.

What you need to do instead is put an opening anchor tag <a.....> before the image element and a closing anchor tag </a>after the image element. That turns the image element into a clickable link, because whatever is between the opening and closing anchor tags becomes a link.

19

I don’t know that ‘go try something else and then come back’ is the most helpful advice. It’s useful advice, sure, but not exactly targeted to the current problem at hand.

20

True, I’ve watched several tutorials and stuff, but they just cover the basics. This is actually the second time I’m going over this, I got it correct the first time, I just dont know what I’m doing wrong this time…