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

HTML-CSS
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.

1 Like
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.

1 Like
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ā€¦