Learn HTML by Building a Cat Photo App - Step 15

HTML-CSS
1

I don’t see what I’m missing can someone help

Your code so far

<html>
  <body>
    <main>
      <h1>CatPhotoApp</h1>
      <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>
   <a target="_blank" href="http://freecatphotoapp.com"</a><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 browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) 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

please restart this step to reset the code back to the start.

you will notice after that, in the editor, you are presented with an img element.

you are asked to make this img clickable by nesting it inside an anchor element.

recall that to create an anchor element you need 3 parts. here is an example:

<a href=“www.google.com”>Click Me!</a>

the first part to pay attention to is the opening tag. it goes on the left hand side of the words or element that you are making into a link.

so the opening tag here in the example is
<a href=“www.google.com”>

following that is the text “Click Me!” which is what we see and can click on as the users
in this exercise, you want this middle part to be the img element

then finally we have the closing anchor tag </a>

make sure you have all three in the correct order.

3

Thank you, I put it in that order and it says it can’t find the img

4

The image disappears as well.

5

check your syntax. you probably have not closed all the < angled brackets properly >

review my example again.

if you are still stuck, then post your code within a code block like this

```
code
```

6

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

7

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

8

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

9

compare your opening tag to the one I showed you before.

you see the difference in where your right angled bracket is?

also : where is your closing tag? (refer back to my instructions please)

10

things are going backwards

please restart this step and try my instructions again.

11

Oh I did close it but it didn’t show up href=“https://freecatphotoapp.com”
I tried that one too but it still did not work.

12

please pay closer attention to the location of brackets.

edit: i see your closing tag in the code you posted earlier. so you just need to make sure that the opening tag is correct.

1 Like
13

Oh I see thanks I keep not seeing.

14

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