freeCodeCamp Challenge Guide: Turn an Image into a Link

Turn an Image into a Link


Problem Explanation

In a previous challenge you already achieved the task to nest a HTML element into another (e.g. Nest an anchor element within a paragraph )

Now you are asked to solve the same problem with different tags: just put the image url within an img element inside the anchor element and it will become the clickable content of that anchor.

Good luck!

3 Likes

I can’t get any working code for this no matter what I do.

1 Like

Did you ever figure it out? everything I try doesn’t work. I’m doing exactly what it’s saying to do.

1 Like

It wouldn’t work when I would create a brand new a element and then copy-paste the existing img into it.
Instead, I created a new a element around the existing img.
That worked, finally. Was stuck on this one for a while.
Make sure you include the img class, too, and not just the src.

2 Likes

hey, can you send here a code please…Iam new here and I woud be thankfsfull for help.

Here’ s the code

<img class="smaller-image thick-green-border"src=’/uploads/default/original/3X/3/c/3c47237055bb6d7d55434a9f85a2c0ae6bfc14e0.jpg’/>

5 Likes

A cute orange cat lying on its back. this is what you have to do. just add and

can you send me pls. the code for this one? I stuck on this and dont know to move forward :confused:

2 Likes

Been stuck on this one too, just worked it out, it has to be added into the existing image code you’ve already put in, where you’ve added the round green border.

1 Like

me too it wont work for me either

indent preformatted text by 4 spaces

indent preformatted text by 4 spaces
a href="#"><img class="smaller-image thick-green-border" alt="A cute orange cat lying on its back. " src="https://bit.ly/fcc-relaxing-cat"></a>
2 Likes

I got it to work using one set of front and back a elements, as shown in the example. I nested the dead link inside
the front <a element and closed the front a element immediately after the “#”. I entered the back a element in total just before the rear p element.


Remember? <img doesn’t require a back element but the img element still needs to be closed just before the back a element
Hope this helps.
1 Like

I wonder why we need to include class in the a element. Please explain this remarkable idea, behind the success of the code, to me.

1 Like

A cute orange cat lying on its back.

Click here for cat photos

Click here for cat photos.

Im stuck on this point: "Nest the existing img element within an a element."
I don’t get it. :sweat:

3 Likes

it took me some time but you need to adress the classes after <img:

A cute orange cat lying on its back.

your welcome xD

A cute orange cat lying on its back.

Thanks for the hit. Got thru :grin:

1 Like

it

works for me

4 Likes