Learn HTML by Building a Cat Photo App - Step 56

HTML-CSS
1

Tell us what’s happening:
I need help with this step 56, I’ve been trying to see and fix my mistakes and it doesn’t get better. I have been trying to nest the text “loving” with the attribute label but with no luck.

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>

<!-- User Editable Region -->

            <input id="loving" type="checkbox"> <label for="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/117.0.0.0 Safari/537.36

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

Link to the challenge:

2

for="loving“ should be equal to id="loving " to create an association. You have a typo

3 Likes
3

input elements sit within label elements. Have a look at the line you’re having difficulty with and see if rearranging would make a difference. Have a good look at all of the elements and check they are formatted correctly. it’s easy to miss a character or 2.

2 Likes
4

Hello!

You are making great progress.

For this step, the input, as you currently have it, is correct. It is not to be placed inside the label tags for this step. Only the text Loving is to be nested between the tags.

However, I noticed the opening label tag is missing its closing > bracket and the Loving text is missing. This would cause the step to fail.

I hope between all of the guidance on this post helps you move on to the next step in your coding journey!

Keep up you great progress! :slight_smile:

3 Likes
5

Dude you give a gud trial but it should be equal to id in input

And need to put some text between in too :blush:

<label>Text</label>

Hope you understand :blush:

1 Like
6

As well, as pointed out by @anayebbandi the for attribute value and the id attribute in the input element should match. It appears in the instructions both should be entered with the capital L .

3 Likes
7

Thank you so much. Your explanation really helped.

1 Like
8

I do. Much appreciated :smiling_face:

1 Like