HTML : Cat Photo App - Step 15

HTML-CSS
1

Your anchor element should have an opening tag…I get this error but as far as I can tell I have an opening tag…? The picture has been turned into a link.

<html>
  <body>
    <h1>CatPhotoApp</h1>
    <main>
      <h2>Cat Photos</h2>
      <!-- TODO: Add link to cat photos -->
      <p>Click here to view more cat photos 
      <a href="https://freecatphotoapp.com"> <target="_blank"> <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>.</p>
     
    </main>
  </body>
</html>

Your browser information:

User Agent is: Mozilla/5.0 (X11; CrOS x86_64 14469.59.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/99.0.4844.94 Safari/537.36

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

Link to the challenge:

2

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 (').

1 Like
3

Thank you ! Was just going back in to fix that.

4

What is this?

Why did you blend the p and anchor all together? The p element is outside of the editable region and should not be changed at all.

5

this bit is not correct
remove it and try again

6

It was the assignment in the last step. It makes the link open a new tab…

7

No. That isn’t part of the last step. The full code from the last step is your starting code for this step:

<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>
      <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>
8

Which includes target=“_blank”…I removed it and put the

elements on separate lines and its still not correct. The error is that I should have only one opening anchor (a) tag

<html>
  <body>
    <h1>CatPhotoApp</h1>
    <main>
      <h2>Cat Photos</h2>
      <!-- TODO: Add link to cat photos -->
      <p>Click here to view more cat photos 
      <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>
      </p>
9

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 (').

1 Like
10

It includes target="_blank" as an attribute in another tag, not floating around in its own set of < >

Why are you changing the p element? The instructions do not ask you to change the p element. The p element is outside of the part of the code shown in the editor as the code to edit.

I would reset the Step to remove those changes.

11

Thanks. Was mistakenly using 3 back slash instead of 3 back tick.

12

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