Learn HTML by Building a Cat Photo App - Step 16

HTML-CSS
1

I’m unable to a second section. Please help

  **Your code so far**

<html>
<body>
  <h1>CatPhotoApp</h1>
  <main>
    <section>
      <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 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>
  </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/104.0.0.0 Safari/537.36

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

Link to the challenge:

2

This looks like the starting code. What have you tried? Where did you get stuck attempting to add a section element?

3

It says i should add a second section below the first one. I tried so many methods of adding the second section but its incorrect .

4

What does the code look like for some of these ‘so many methods’? I can’t help you with code that you don’t show me.

5

Here is the tag <section></section>

6

Ok, that’s a correct section element, but where did you put it?

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

I’ve edited your post 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 (').

9

This exact code here passes for me.

1 Like
10

you are given code that includes a section element. I’ve pasted the code of the existing section element here for you to refer to.

What do we notice about this code? If we distill it down to just the highlights:

<section>
   <h2>...
   <!-- ...
   <p>...  <a ...
   <a href...  <img ...
</section>

So I see 1 section tag (starting and closing)
Nested inside the section I see an h2 tag.
Following the h2, there is a comment line.
Following that there is a paragraph. And then an anchor tag.
Following that there is another anchor tag. And then an image tag.

So that’s what we’ve got in terms of the code so far.
The instructions say to add another section tag.

Okay what does a section tag look like? (refer to the above…)
Just add that new tag (left and right side, don’t forget) to a new line below
the existing section tag block.

Hope this helps

11

It works here. Thanks for your time

1 Like
12

Thanks for your time

13

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