Learn HTML by Building a Cat Photo App - Step 15

Tell us what’s happening:
Describe your issue in detail here.
Hello all , I’m am confused on how my code could be wrong but also lost as I look on other help threads and see others add different elements to different sections . Could anybody help and or teach me exactly how this code is wrong and what the right way is ?
Thank you

  **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 (iPhone; CPU iPhone OS 15_6_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.6.1 Mobile/15E148 Safari/604.1

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

Link to the challenge:

At the start of the exercise you are shown this line of code which is an img tag:

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

Right now this image is not a clickable element of the page. (You can try to click it in the preview pane, and nothing will happen)

The exercise wants you to tell the browser to make this image into a clickable element that links to the web URL https://freecatphotoapp.com

To do that you will need to use an anchor tag.
An anchor tag identifies to the browser which words or elements you want to become clickable. And it tells the browser where to go next on the internet when the click happens.

To use it, you will need a format similar to the one below:
<a href="a-link-here">Click Me!</a>

This format consists of 4 things of importance.
1- the opening tag which is <a href="a-link-here">
2- within the tag we see an attribute which is the href attribute (href means hyperlink reference). This href is how the browser knows what to do when someone clicks the link.
3- Click Me! is the text of the link that the user sees and is usually (by default) highlighted in blue so as to appear like a clickable element. You can use text here or an img tag or anything you want. Any element or plain text can go in this position nested within the anchor element.
4- the closing tag </a> this ends the tag so the browser knows where to stop caring about links. (everything between the start and end will be a link).

Hopefully this helps you to figure out what to do next to turn the img into a link.

1 Like

thank you so much reaching out and explaining in a much more simple way , but i am still not passing but when i click on the (preview panel) it shows its suppose to take me to a succesful link ? could you assist a bit more ?https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-html-by-building-a-cat-photo-app/step-15

yes, I can. But you have to post your code again (just reply here and post it but place it within a preformatted code block)

more instructions below if needed:
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.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

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

i do apologize if i did this wrong , but this is currently what i have.

okay, I am not 100% sure if the word “here” is part of your code or not?

But I see a mistake in how you are using the anchor tag.

The anchor tag has to enclose something. The something it encloses is the link.
Right now your anchor tag encloses nothing.
Also your anchor’s opening tag is missing a >
Recall the anchor element should look like this:
<a href="a-link-here">Click Me!</a>

so do you mean
Ex.

<a href="https://freecatphotoapp.com>the img element</a>?
1 Like

Yes. Put the img element inside the open/close tags.

1 Like

thank you so much as the code PASSED! i was a bit confused untill i just stared at your first post then re-examined mine . As you advised my problem element was not enclosing anything untill i inputted ``<, </A> correctly.
Again THANK YOU SO MUCH !

1 Like

My pleasure. Most people get frustrated and quit halfway. Glad you made it.

1 Like