Learn HTML by Building a Cat Photo App - Step 15

challenge in step 15

Your code so far

<html>
  <body>
    <main>
      <h1>CatPhotoApp</h1>
      <h2>Cat Photos</h2>
      <!-- TODO: Add link to cat photos -->
      <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>

<!-- User Editable Region -->

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

<!-- User Editable Region -->

    </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/117.0.0.0 Safari/537.36 Edg/117.0.2045.60

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

Link to the challenge:

Hello, perhaps carefully read the directions as you want to wrap certain content within the “a” tag. Hope this helps :slightly_smiling_face:

“Turn the image into a link by → surrounding it ← with necessary element tags.”

Instead of surrounding the image with a tags you put the a tags inside of the img tag.

Look at how you created the “cat photos” link:

<a target="_blank" href="https://freecatphotoapp.com">cat photos</a>

Do you see how you surrounded the words “cat photos” with an opening and closing a tag? That’s exactly what you want to do to the img tag.

1 Like

This step is telling you to wrap your img tag into link element.

And when your wrap your img tag into a link then you image will convert into a link.

For example

<a href="link">
<img src="link">
</a>

See how I wrap it.

Hope this will help you.

2 Likes

@ruchikumari - I was just wondering : there are 2 links in this code so how does it know which one to link to? (apologies if this is a simple stupid question!)

Hello!

No question is stupid!

This is how we all learn!

Keep up the great progress!

3 Likes

Very good question.

We use href attribute in anchor tag.

And we use src attribute in img tag.

Hope you find your answer.

@Gray.n.Grey
It took me about a week of leaving the topic then coming back to revisit it, and now I finally understand! It’s actually simple but I just didn’t see it: the [img src] is sourcing an image and displaying it on the webpage (this is how the cat is displayed in this exercise). The [a href] is where the link is provided. This link can be applied to texts or to images, and can be opened up separately as a webpage on the browser. Thank you for taking the time to explain this!

2 Likes

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