Learn HTML by Building a Cat Photo App - Step 56

HTML-CSS
1

Tell us what’s happening:
As far as I can see, there is mlthing wrong my with my code. But when I look at the site preview, it appears the checkbox doesn’t work together with the label, because the word “loving” appears in front of the checkbox.

Your code so far

<html>
  <body>
    <main>
      <h1>CatPhotoApp</h1>
      <section>
        <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>
      <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>
            <legend>What's your cat's personality?</legend>
            <label for="loving">Loving</label>
            <input type="checkbox" id="loving">
          </fieldset>
          <input type="text" name="catphotourl" placeholder="cat photo URL" required>
          <button type="submit">Submit</button>
        </form>
      </section>
    </main>
  </body>
</html>

Your mobile information:

SM-S908B - Android 14 - Android SDK 34

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

Link to the challenge:

2

Hi there!
Move your label element after your input element

2 Likes
3

That works, thanks! Why does it say to write the label element above the input then?

1 Like
4

The instructions didn’t said that to add label above the input element.
Instructions is only asked to:
Associate the text Loving with the checkbox by nesting only the text Loving in a label element and giving it an appropriate for attribute.
Because the text Loving was previously there after input element. And you added the new text Loving within label element before the input element.

1 Like
5

Ah right, thanks! I just assumed the example was leading…

1 Like
6

its still not working

7

Hi there!
Welcome to the FCC forum. Create your own topic to the challenge using the Help button. That appears below the challenge editor, when you attempting wrong code more than three times

8

i dont understand how i have tu write it

9

Hi there!
Welcome to the FCC forum. Create your own topic to the challenge step using help button.