Learn HTML by Building a Cat Photo App - Step 15

HTML-CSS
1

Tell us what’s happening:
Im struggling with step 15 - Turn the image into a link by surrounding it with necessary element tags. Use https://freecatphotoapp.com as the anchor’s href attribute value.

Need your guidance

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" 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/109.0.0.0 Safari/537.36

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

Link to the challenge:

2

If you want to use anchor tags to create a link, you should enclose the text or element completely within opening and closing anchor tags.

You should not alter the original img element, simply nest it complete, inside the anchor tags, then add the corresponding href attribute to the opening anchor tag.

Probably easiest to reset this lesson and then try again.

1 Like
3 
<a href=""> 
<img src="" >
</a>

Can you see the problem? your “a” should not be inside the “img”

1 Like
4

Hey! Welcome to the freeCodeCamp’s community forums.

I’ve tested your code and there are a few things you might need to work on.

  1. This is the code that you’re trying to run atm (I’ve added some line breaks and spaces to make it easier to read)

There are essentially two types of tags used in HTML, paired tags and unpaired tags.

  • Paired tags: When using paired tags, you have to use an opening tag as well as a closing tag, and anything you add between the opening tag as well as the closing tag becomes the content for that HTML element. for example:
opening tag     closing tag
   |                |
<button> Submit </button>
           |
         content
  • Unpaired tags: these do not have a closing tags so you cant wrap them arount any content. for example:
<img />
<hr />

Now that we have this out of the way, the next thing you need to understand is that you can turn most of the HTML elements into clickable links if you surround them with an anchor tag.

A link is is exactly what it sounds like, its a “link” to some other website or webpage i.e. when you click it, it takes you to some other resource on the internet.

You have created links in the previous challenges but you were only using normal text until now. for example:

<a href="link-to-a-website"> Website name </a>

Note that the user will only see “Website name” and when they click on it, the browser will take them to “link-to-a-wesbite” (assuming such a website exists).

The same concept applies to images. You can turn images into clickable links if you surround them with an a tag. the user will only see the image but it will also be a link to some other website.

For example:

<a href="a-random-link">
    <img src="link-to-an-image" />
</a>

Hope this helps! :smile:

1 Like
5

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