Learn HTML by Building a Cat Photo App - Step 15

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.
I’m not sure what I’m doing wrong here. I am nesting the img with the anchor, but whenever I add the anchor inside the img, the image itself goes away. I’m so confused.

Your code so far

<html>
  <body>
    <main>
      <h1>CatPhotoApp</h1>
      <h2>Cat Photos</h2>
      <!-- TODO: Add link to cat photos -->
      <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>

<!-- User Editable Region -->

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

<!-- User Editable Region -->

    </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/110.0.0.0 Safari/537.36

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

Link to the challenge:

1 Like
2

This is how you nest an image within anchor tags:

<a href="example.com"><img src="image.jpg" alt="an image"></a>
1 Like
3

So I need to put the close tag at the end of the URL link for the image?

1 Like
5

Screenshot 2023-02-09 112739
Screenshot 2023-02-09 1127391863×22 10.5 KB

1 Like
6

I don’t know how to properly place the code in these replies.

1 Like
7

You have an opening anchor tag without a closing >. Then you have an empty img element. Then a closing anchor tag. Then an attribute which isn’t attached to anything. Then another closing anchor tag. Then an alt attribute which is not attached to anything. Then a random >. It’s a bit of a soup.

All you need is an opening anchor tag (with href attribute). Then an img element (with src and alt attributes). Then a closing anchor tag.

1 Like
8

Huh? The lesson started the code off that way. The > at the end is how the lesson starts. The attribute at the end isn’t attached to anything at the start of the lesson.

1 Like
9

“All you need is an opening anchor tag (with href attribute). Then an img element (with src and alt attributes). Then a closing anchor tag.” I did that and its still saying it isn’t right.

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

This is the code that you start with. An image element with two attributes. Your task is to enclose this element (unaltered), within anchor tags.
So put an opening anchor tag before (with href attribute), and a closing anchor tag after.

1 Like
11

Lol wtf, that’s literally what I did.

Screenshot 2023-02-09 113918
Screenshot 2023-02-09 1139181860×25 9.48 KB

1 Like
12

Your opening anchor tag is missing >.

15

Yeah, idk what you mean, I know what you mean, but I have no idea where I’m supposed to be adding in the second >.

1 Like
16

Previous lesson didn’t say to add in a <> for opening anchors, it only said to add <> to the closing anchor.

17

I’m also looking at the above code from my previous lesson and it doesn’t have <> in the beginning and its linking just fine. I feel like you’re just guessing.

18

I figured it out, thank you for your help.

1 Like
19

No, I wasn’t guessing. I was pointing out the places in your code which were inaccurate, but thanks for the vote of confidence :rofl:

FWIW, all HTML elements must have opening tags of the format <element> and those which are not self-closing must also have closing tags of the format </element>.
Self closing tags such as img or input consist only of an opening tag (e.g. <img>).

1 Like
20

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