Learn HTML by Building a Cat Photo App - Step 15

I think I’m adding to much to the code. Any suggestions?

A cute orange cat lying on its back.

    <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>
   <a> <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
  **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/ Safari/537.36

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

Link to the challenge:

hmm, I think it is the reverse. Take a look below at a sample line of code showing how to turn a phrase “Click Me!” into a link:

<a href="a-link-here">Click Me!</a>

This is called an anchor element by the way.
So to turn anything into a link, you must use the anchor element by tagging the words/image/other thing on the left and right as I did with the phrase “Click Me!” above.

1 Like

Thank you, I definitely understand how to code this better but, my current code still isn’t working. Here’s what I got.

<a href="a-link-here">https://freecatphotoapp.com</a>

okay , I need to ask you some questions first. In your last attempt posted above, which part of the anchor tag is the URL and which part is one that the browser will make clickable?

you may want to review this first here; https://codepen.io/hbar1st/full/WNJjOOd

I have reviewed the shared link. I’m still a tad bit lost. The anchor tag url is freecatphotoapp.com and the href part will make it clickable.

That’s not correct unfortunately.

The URL Is the website you want the browser to take you to when you click the link. So in this case it is https://freecatphotoapp.com
So that is what goes inside the href’s value.

The words (or images or elements) in-between the opening and closing tag is what the user will actually see and click on.

Here’s that example code again:
<a href="a-link-here">Click ME!</a>

If you make your anchor tag look the exactly the same, you will not pass the test.
You must replace the URL (the href value) and the words in the middle (Click ME!) with the link and text the exercise is asking you for.

So the href in this case was given as: https://freecatphotoapp.com (put it in the area that currently has “a-link-here”)
And the text in the middle (Click ME!) has to be the given img element (so that people can click on the cat image and go somewhere).

Hope this helps. If not, please try something different based on your current understanding and post the new code if it still doesn’t work.

I’m still getting the incorrect code. Here’s what I have.

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

the href value you are using doesn’t match the one requested in the exercise.
(missing //)

I fixed it. It is still incorrect.

can you post your new code here? (if possible all of it in case something went wrong elsewhere)

Sure here it is.

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

ah sorry I see the issue now.

This exercise wants you to turn the img into a link.
But your solution makes a new word “cat photos” into a link.
You need to put the anchor tags on the left and right of the img instead of the words “cat photos”

I’m still confused.

<a href="https://freecatphotoapp.com">img<a></a>

This is the img I meant

You want this img to become clickable.
So if you put the anchor tag around the image (opening tag to the left, closing tag to the right), then it will become clickable.

The code is still incorrect.

Please share your new code for review.

Here it is.

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

Somehow we are not communicating.
Let me try again differently.

Let’s click on Restart Step first to clear everything and start fresh.

We are shown this line of code to work with:
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">

and this line of code :point_up_2:t4: is what makes the cat photo appear. This line of code is called an image or img element (the whole line of code is the img element, not a subset of it, the whole thing)

Here’s what you see at the moment in the preview pane:
A cute orange cat lying on its back.

it’s a cat image.
Great. Is this cat image clickable?
Go ahead and try.
I can tell you it is not clickable right now.

We want to make it clickable though. How do we do that?
We need to tell the browser that the img line of code (that one I pasted above) should be made into a link.

We need the anchor tag to do that. Anchor tags have an opening an closing part.
The opening part should looks like this:
<a href="the-link-URL-here">
and the closing tag is simply </a>

These two work together to tell the browser what to do.
The first tag tells the browser that the nested text or nested element is the one we want the user to be able to click on.
The second tag tell the browser where to stop looking…
(so everything in between these two becomes a link).

And how does the browser know where to take us when we click?
That’s the href attribute.
We put a website address in there. (right now I have garbage text which will go nowhere).

If you do this correct and put the img tag (that whole line I mentioned above) in between the opening and closing tags of the anchor , then the broswer will make the cat photo clickable.

Do you want to try again or can I explain further something above?

Can you explain a little further about the img tag being in between the opening and closing anchor tags? I understand intellectually what you mean but, need a more in depth explanation. My code isn’t passing.

okay, so the anchor tags are these ones:
<a href="website-link-here">

The first line is called the opening tag.
The second line is called the closing tag.

I can nest anything I want between the opening and closing tag. The browser will understand this to mean that the nested element or text is supposed to become a link.

So here’s an example of me nesting some words “Click Me!” and making them a link to google.

<a href="www.google.com">Click Me!</a>

This exercise wants you to do that, but instead of just plain text, they want you to put the whole image element in between the anchor tags.
The whole image element is the line I mentioned previously (starts with <img and ends with >)

Try again and let me see your code next time if you’re stuck.