Basic HTML and HTML5 - Turn an Image into a Link

HTML-CSS
1

Tell us what’s happening:

I have tried everything but can’t nest img element within a element

Your code so far

<h2>CatPhotoApp</h2>
<main>
  <p>Click here to view more <a href="#">
    <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
    </a>.</p>

  

  <p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
  <p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
</main>

Your browser information:

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

Challenge Information:

Basic HTML and HTML5 - Turn an Image into a Link

2

Hi. You deleted some part of the former code. Please reset the lesson, and try again adding the starting <a> tag in line 4 and the closing tag to line 6. (You can do the nesting also in line 5.)

3

Tell us what’s happening:

Not able to nest img element within a element
Tried every thing

Your code so far

<h2>CatPhotoApp</h2>
<main>
  <p>Click here to view more <a href="#">
    <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
    </a>.</p>

  

  <p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
  <p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
</main>

Your browser information:

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

Challenge Information:

Basic HTML and HTML5 - Turn an Image into a Link

4

The instruction says:

Place an existing image element inside an a(anchor) element.

What this really means is that you should wrap the image element with a new anchor element, not move it into an existing anchor element.

5
  • you’re not supposed to “change” contents within “p” before that given “img” element
  • you need to “deal with” given “img” element only and nest it within an “anchor” element

i would say to restart this step and try again, happy coding :slight_smile:

6

I have merged your two topics for this challenge, do not create multiple topics for the same challenge

7

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