Learn HTML by Building a Cat Photo App - Step 55

HTML-CSS
1

Tell us what’s happening:
I am just not getting this, no matter how I do it, the hint does not help at all. I have looked at other posts tried what they suggest and it still does not pass. I really do not know how to do this. A better example would help or just out right showing what it should be.

  **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>
    <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>
          <input id="loving" type="checkbox"> Loving
        </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; rv:103.0) Gecko/20100101 Firefox/103.0

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

Link to the challenge:

2

I don’t see where you added the label? Do you have a specific question about this step?

4

That’s because I have no idea what to put there. Everything I tried did not work. I tried adding a label with (for=“loving”) above the input, I tried to the left and right of input. I tried nesting input in the label various ways and could not figure it out. I looked at a bunch of the other forum responses on step 55 and could not get anything to work. I need to know what exactly goes there so I can see what I am not getting about this.

5

The instructions say:

“Associate the text Loving with the checkbox by only nesting the text Loving in a label element”

To nest something is to put it inside of something else. So “nesting the text Loving in a label element” means to put the text Loving inside a label element.

Does that help?

6

Did that, didn’t work

7

Did what? You have to show us. We speak HTML here :slight_smile:

To display your code in here you need to wrap it in triple back ticks. On a line by itself type three back ticks. Then on the first line below the three back ticks paste in your code. Then below your code on a new line type three more back ticks. The back tick on my keyboard is in the upper left just above the Tab key and below the Esc key.

9

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