Learn HTML by Building a Cat Photo App - Step 56

HTML-CSS
1

Tell us what’s happening:

I don’t know what’s wrong with my code, it isn’t passing the challenge.
It’s step 56.

What's your cat's personality? Loving And here is the code. So if anybody know what's wrong with this code please help me.

Your code so far

<html>
  <body>
    <main>
      <h1>CatPhotoApp</h1>
      <section>
        <h2>Cat Photos</h2>
        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
        <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>
      <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>
      <section>
        <h2>Cat Form</h2>
        <form action="https://freecatphotoapp.com/submit-cat-photo">
          <fieldset>
            <legend>Is your cat an indoor or outdoor cat?</legend>
            <label><input id="indoor" type="radio" name="indoor-outdoor" value="indoor"> Indoor</label>
            <label><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label>
          </fieldset>
          <fieldset>

<!-- User Editable Region -->

            <legend>What's your cat's personality?</legend>
            <input type="checkbox" id="loving">
            <label for="loving">Loving</label>

<!-- User Editable Region -->

          </fieldset>
          <input type="text" name="catphotourl" placeholder="cat photo URL" required>
          <button type="submit">Submit</button>
        </form>
      </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/130.0.0.0 Safari/537.36

Challenge Information:

Learn HTML by Building a Cat Photo App - Step 56

2

these two need to be on the same line

1 Like
3

Hey Buddy, Check Again are you instructed to add label element ?

Or you just need to put word Loving after your input element.

Hope You Understand.

1 Like
5

Already did but still not working.

6

Hi there!

What you did? We didn’t see. Can you post your updated code here.

7

It looks like your code is missing a closing tag for the second <section> element, which could be why it’s not passing the challenge. Every opening tag (<section>, in this case) should have a corresponding closing tag (</section>) to properly structure the HTML.

Try adding </section> right after the unordered list (</ul>), like this:

<section>
  <h2>Cat Lists</h2>
  <h3>Things cats love:</h3>
  <ul>
    <li>cat nip</li>
    <li>laser pointers</li>
    <li>lasagna</li>
  </ul>
</section>

Once you add this, your HTML structure should be complete, and it should pass the challenge! Let me know if you need any more help.

1 Like
9

I don’t know how to post the updated code.
cause copy past isn’t working here.

10

You need to add three back ticks (```) on a separate line before and after your code.

11

Or use </> Preformatted Text option in the reply setting menu, to insert back ticks automatically in your reply.

12 
     <legend>What's your cat's personality?</legend>
            <input type="checkbox" id="loving"><label for="loving">Loving</label>

It’s step 56

13

The instructions didn’t asked to add the label element around the text Loving. Remember, the challenges test is specific about the challenge instructions.
@Jaas