Learn HTML by Building a Cat Photo App - Step 15

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.

  **Your 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>

  **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:104.0) Gecko/20100101 Firefox/104.0

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

Link to the challenge:

1 Like
2

Hello there.

Please Tell us what’s happening in your own words.

Learning to describe problems is hard, but it is an important part of learning how to code.

Also, the more information you give us, the more likely we are to be able to help.

3

This step is asking me:
Turn the image into a link by surrounding it with necessary element tags. Use https://freecatphotoapp.com as the anchor’s href attribute value.
No matter how many times I try , I dont know how to add the (a) element. Where do I add it? Do us use both the opening and closing tags?

4

Yes

You place the anchor element so that the img element is between the opening and closing anchor tags.

5

Where do I add the href attribute with the link?

6

Where did you put the href attribute for your other anchor element?

7

This is what it says at the start of the step:

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

Then they want me to se https://freecatphotoapp.com as the anchor’s href attribute value.

8

I know what the instructions say. I can read them.

9

I just dont know how to make the image a link

10

Did you try placing an opening anchor tag before the img element and a closing anchor tag after the img element?

What does your code look like if you try that?

11

Like this?

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

12

Close. You need

Currently your anchor element has no href attribute.

13

Yes, but every time I add a href attribute, it doesnt work, so I think I am placing it in the wrong spots.

14

I can’t see what’s wrong unless you show code where you tried to add the href attribute.

Attributes go in the opening tag of an element, so your href attribute should go in your opening anchor tag.

15

I have tried:

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


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

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

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

I know I am doing something wrong (obv) but I just cant seem to figure it out.

16

This is not inside of the opening anchor tag. It is floating around outside of any tag.

This is not inside of the opening anchor tag. It is inside of the opening img tag.

This is not inside of the opening anchor tag. It is floating around outside of any tag.

17

Then I am at a complete loss.

18

What is the opening anchor tag?

19

Is it the <a> ? Or the <img? This step kind of just skipped a few things to explain I think.

20

The step is expecting you to remember things you did on the previous 14 steps. That doesn’t always happen unfortunately.

img is in the image tag.

a is in the anchor tag.