Learn HTML by Building a Cat Photo App - Step 16

HTML-CSS
1

Tell us what’s happening:
how to add h2 p and a in section

Your code so far

<html>
  <body>

<!-- User Editable Region -->

    <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>
      <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>
section:<h2,p,a>
    </main>

<!-- User Editable Region -->

  </body>
</html>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36 Edg/116.0.1938.69

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

Link to the challenge:

2

“Take your h2, comment, p, and anchor (a) elements and nest them in a section element.”

Do you understand what the word “nest” means?

1 Like
3

no, please help me with that

4

how to use section ? is there any command for it

5

To nest something means to put it inside of something else. So the instructions could be rewritten as

“Wrap your h2, comment, p, and anchor (a) elements in a section element.”

Does that help?

6

how to wrap all these ? should i copy all the things with open and close? can you help me with the coding so that i can understand

7

All of these element are already wrapped in a main element. Do you see how there is an opening <main> tag before them and a closing </main> tag after them? That’s how you put things inside of an element, you place them between the opening and closing tags of the element.

So if you wanted to put these element inside of a section element, then you would put them between the opening and closing section tags.

2 Likes
8

thanks for the help,

9
<section

Cat Photos

See more cat photos in our gallery.

A cute orange cat lying on its back. i did this but not working
10

To post your code paste it between the ```` marks that appear when clicking the </> button:

Screenshot 2023-08-22 172147
Screenshot 2023-08-22 1721471134×431 36.7 KB

Also nesting doesn’t mean placing all your code in the opening tag of the element. Instead surround your code with section opening and closing tags.

1 Like
11

i did it, and understood thanks

12

this was very helpful

2 Likes
13 
  <h1>CatPhotoApp</h1>
<main>
  <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>
  <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>
</main>

Hello all, I feel like just doing exactly what it’s been shared in this post but I really don’t get whats going on

14

If you have a question about a specific challenge as it relates to your written code for that challenge and need some help, click the Ask for Help button located on the challenge (it looks like a question mark). This button only appears if you have tried to submit an answer at least three times.

The Ask for Help button will create a new topic with all code you have written and include a link to the challenge also. You will still be able to ask any questions in the post before submitting it to the forum.

Thank you.