Learn HTML by Building a Cat Photo App - Step 15

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.
how to change an image into alink by surrounding it with necessary tags,what are the extras that there are telling me to remove?
Your code so far

<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.">
      <a href="https://freecatphotoapp.com"<img src="https://cdn.freecodecamp.org"</a></img>
    </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/106.0.0.0 Safari/537.36

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

Link to the challenge:

2

Hi!

It seems there are too many tags. The challenge requires the img tag present from previous lessons to be wrapped in an anchor tag to make it to a link. Let’s take a look.

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

Code provided:

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

Your code:

      <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"<img src="https://cdn.freecodecamp.org"</a></img>

Points:

  1. You’ve got two img tags, the challenge only calls to modify the one there is already, not create a new one (feel free to reset the challenge if you cannot reverse the code to it’s original form)
  2. Your <a> and <img> tags are not nested properly, the way nesting works is you always have to have the nested tag between opening and closing brackets of parent tag.

Example:

<!-- Correct --->
<h1> <p> </p> </h1>

<!-- INCORRECT -->
<h1> <p> </h1> </p>
<h1 <p> > </p> </h1>
...

I’ll not post the correct solution here, try to work it out for yourself :slight_smile:

Happy coding!

3

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