Learn HTML by Building a Cat Photo App - Step 14

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 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36

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

Link to the challenge:

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

I cannot figure out what I have wrong in step 14 of the lesson. Turning an image into a link.

A cute orange cat lying on its back.

Turn the image into a link by surrounding it with necessary element tags. Use https://freecatphotoapp.com as the anchor’s href attribute value.

4

The clue here is to use the anchor tag

5

Sure, but can you be more specific about how you are stuck?

I don’t see where you added the requested anchor tag?

6

You need to enclose your code with triple backtick when posting your code in the forum.

Like these

```html
<!-- insert code here -->
```

This is so that the HTML wont be displayed in the forum :grin:

1 Like
7

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

8

Yes, so do you know how to add a link? You have done this before.

Hint: using an anchor element. 7th line of your code

9

I don’t know what i’m doing wrong

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

Can you physically point to where you think the anchor element is in this code you just posted?

11

I edited what I just posted. It didn’t all show up when I posted it.

12

Yes so the thing is…

You can wrap anchor tags around any element and make it able to be clicked and go to another link.

It doesn’t have to be text, it can be img, div, p, and etc.

Try making the img clickable just like how you make the “cat photos” clickable in your code.

Hope that helps :grin:

1 Like
13

My question remains. What part do you think is the anchor element for the image?

14

I assume the https?

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

I am still stumped where to wrap it

15

This doesn’t look like the last anchor element you created here:

You need to make an anchor element the exact same way you did for the text ‘cat photos’, but this time instead of text, the anchor element has an image inside of it.

16

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