Build a Cat Photo App - Step 17

HTML-CSS
1

Tell us what’s happening:

Hi guys i very new to coding i am triyng to learn but i just don’t understand You should have an img element with a src value of https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg. You may have accidentally deleted it.

Your code so far

<html>
  <body>
    <main>
      <h1>CatPhotoApp</h1>
      <h2>Cat Photos</h2>
      <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
      
      <a <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>

<!-- User Editable Region -->

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

<!-- User Editable Region -->

    </main>
  </body>
</html>

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/146.0.0.0 Safari/537.36

Challenge Information:

Build a Cat Photo App - Step 17

2

hi, and welcome to the forum!

Please click on the reset button (it may look like a circular arrow button) in order to retrieve the original code for this step.

Once you’ve done that, the original code will look like this:

<html>
  <body>
    <main>
      <h1>CatPhotoApp</h1>
      <h2>Cat Photos</h2>
      <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
      <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
      <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
    </main>
  </body>
</html>

Your goal is to add an anchor element.
The anchor element is supposed to encase the img element so that the img becomes clickable.

Here’s an example of a valid anchor element:
<a href="www.google.com">Some Content Here</a>

Notice how the anchor element has an opening tag and a closing tag that surrounds Some Content Here which is the part we want to become a link?
Also notice that the opening tag has an href attribute?
The href attribute contains the value of the URL we want to go to when someone clicks our new link.
And notice the placement of the angled brackets? Each tag starts with a < and ends with a > (so in that example we have 4 angled brackets in total).

Make sure that when you add the new anchor tags, you write them in full with all their brackets and the href attribute

3

Have a look at the example code which gives the correct syntax, and then follow the instruction.

<a href="example-link">
  <img src="image-link.jpg" alt="A photo of a cat.">
</a>