Stuck on a problem where I need to surround with necessary element tags

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.

  I can't seem to figure out how to turn the image into a link by surrounding it with necessary element tags. It says to use https://freecatphotoapp.com as the anchor's href attribute value, but I'm not quite sure how to do that. A little help sounds good! Thanks!

<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.">target ="_blank" href="https://freecatphotoapp.com"</a>
  </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/102.0.5005.115 Safari/537.36 OPR/88.0.4412.75

Challenge: Step 14

Link to the challenge:

2

Hi!
First it looks like you’ve put your problem description inside where formatted code goes. Try not to put it inside the three backticks in future, it is hard to read.

Your problem description is great however! The details are very helpful. :smiley:

So when you made the text ‘cat photos’ into a link you did it like this,

<p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>

So, to make this work you need to write out the anchor element and put the img code where the text ‘cat photos’ was in the above example, you will turn the image into a link.

Hope that helps!

3

Hello!
Thanks for the comment! I’m still a little stuck, I copy and pasted the <img src and replaced thee “cat photos” in the above line but now i have two images. When I delete the image that isn’t the link, I get an error message.

4

Hi.
Need to see how your code looks right now.
To make code look like

this

press ctrl-e when writing post.

6 
<p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg"</a>.</p>

like this?

7

yep.
Still need help with this challenge step?

8

yes please! I am completely lost

9

OK. I suggest you reset the step, and we’ll start with this line below, from scratch

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

And I guess I’ll copy the task here:

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

Any task-related questions?

SideNote: I am also lost with my own coding stuff right now, so we are on the same page really :upside_down_face:

10

So I am having a hard time surrounding the image with the anchor’s href attribute value. I am just confused on how to properly add the attribute value.

also im glad im not the only one struggling haha!

11

that sounds a little confusing. Lets decompose the task and figure out what we need to do step by step

That’s the first part. You’ve already done that in previous steps, but with the text.
For now don’t bother with href and attribute and value stuff.
do just something like:

<opening tag><image............></closing tag>

and show me your new code of course

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

Sorry for the late response, but here it is!

13

It’s not like we have deadlines or something)

Ok, that’s correct syntax, but we don’t need p element here.
We need element to make a link, right? p is just paragraph, it is used to deal with bunch of simple text

14

I see, so to make it a link,
it needs to be href’d?

15

I’m going to butt in if that’s okay, and suggest you read these pages on the anchor and paragraph element. As I feel you will benefit from reading up on the basics of them.

This is the w3schools page on the anchor element.

And the w3schools page on the anchor element.

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

This is what I have so far, I read through the steps and even went back and reviewed.

EDIT: I finally figured it out !!!

1 Like
17

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