freeCodeCamp Challenge Guide: Turn an Image into a Link

freeCodeCamp Challenge Guide: Turn an Image into a Link
0

#1

Creating images that link to things is essential and one of the most used things in Web Dev. Nest your image within an a element. Here’s an example:

<a href="#"><img src="http://bit.ly/fcc-running-cats"/></a>

#2

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


#3

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


#4

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.


#5

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


#6

Here’ s the code

<img class="smaller-image thick-green-border"src=’//discourse-user-assets.s3.amazonaws.com/original/3X/3/c/3c47237055bb6d7d55434a9f85a2c0ae6bfc14e0.jpg’/>


#7

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


#8

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


#9

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.


#10

me too it wont work for me either


#13

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>

#14

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.

#15

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.


#16

A cute orange cat lying on its back.


#17

Click here for cat photos

Click here for cat photos.


#18

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


#19

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


#20

A cute orange cat lying on its back.


#21

Thanks for the hit. Got thru :grin:


#22

it

works for me