Step 33 in Building a Cat Photo app

Hello! I am stuck on step 33. I followed the directions and added a third section element underneath the second section element, but it keeps giving me an error and says that all of my section elements should be between the opening and closing tags of the main element, which they are. I am confused if maybe there is something I am missing.

[CatPhotoApp]https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-html-by-building-a-cat-photo-app/step-33

We can’t help if you don’t post your code here for us to see.

Sorry! I thought I posted the link to my code. I will share again.

  <body>↩
    <main>↩
      <h1>CatPhotoApp</h1>↩
      <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>↩
        </section>↩
        <h2>Cat Lists</h2>↩
        <h3>Things cats love:</h3>↩
        <ul>↩
          <li>cat nip</li>↩
          <li>laser pointers</li>↩
          <li>lasagna</li>↩
        </ul>↩
        <figure>↩
          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">↩
          <figcaption>Cats <em>love</em> lasagna.</figcaption>  ↩
        </figure>↩
        <h3>Top 3 things cats hate:</h3>↩
        <ol>↩
          <li>flea treatment</li>↩
          <li>thunder</li>↩
          <li>other cats</li>↩
        </ol>↩
        <figure>↩
          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">↩
          <figcaption>Cats <strong>hate</strong> other cats.</figcaption>  ↩
        </figure>↩
      </section>↩
      ↩
    </main>↩
  </body>↩
</html>

You added a new section but you placed it within the second one.

You needed to place it below it.

(After the second section’s closing tag)

Unfortunately it still doesn’t seem to work. Is there anything else I might have missed?

try to click reset, then add the section again below the closing tag of the 2nd section.
If you are still stuck please respond here by posting the full code again for review.

It won’t let me post my code again since I am still a new user. If I send you another link would that be okay?

So far within your code, you have two section elements. Add a third below them

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.

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

The above shows the first section element.
You added two opening tags underneath it.

They wanted you to add a new section element after the second section element.

<html>
  <body>
    <main>
      <h1>CatPhotoApp</h1>
      <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>
      </section>
        <h2>Cat Lists</h2>
        <h3>Things cats love:</h3>
        <ul>
          <li>cat nip</li>
          <li>laser pointers</li>
          <li>lasagna</li>
        </ul>
        <figure>
          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
          <figcaption>Cats <em>love</em> lasagna.</figcaption>  
        </figure>
        <h3>Top 3 things cats hate:</h3>
        <ol>
          <li>flea treatment</li>
          <li>thunder</li>
          <li>other cats</li>
        </ol>
        <figure>
          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
          <figcaption>Cats <strong>hate</strong> other cats.</figcaption>  
        </figure>
      </section>
      
    </main>
  </body>
</html>

You need to add the new code after the second section element. You are still not doing that.

you are placing the section after the closing tag of your first section. Place it after your second section

So it should look like this:

<html>
  <body>
    <main>
      <h1>CatPhotoApp</h1>
      <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>
      </section>
        <h2>Cat Lists</h2>
        <h3>Things cats love:</h3>
        <ul>
          <li>cat nip</li>
          <li>laser pointers</li>
          <li>lasagna</li>
        </ul>
        <figure>
          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
          <figcaption>Cats <em>love</em> lasagna.</figcaption>  
        </figure>
        <h3>Top 3 things cats hate:</h3>
        <ol>
          <li>flea treatment</li>
          <li>thunder</li>
          <li>other cats</li>
        </ol>
        <figure>
          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
          <figcaption>Cats <strong>hate</strong> other cats.</figcaption>  
        </figure>
      </section>
    </main>
  </body>
</html>

You have now placed it within the second section element. Place it after the second element

1 Like

Please reread my first post

1 Like

I got it! Thank you so much you guys are so patient!! I thought they wanted it right under the second opening section element. My mistake.

2 Likes

No problem and we were happy to help

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