Accessibility Quiz Step 19

HTML-CSS
#1

Firstly, I am really grateful for this opportunity to have this platform to learn from. However, I feel the instructions are EXTREMELY poorly written. I find the instructions lacking on at least, and furthermore the help-hints usually give poor information. But I have met my match on this one.

Step 19

Filling out the content of the quiz, below #student-info, add three div elements with a class of info.
Then, within each div nest one label element, and one input element.

Test: Sorry, your code does not pass. Keep trying.

Hint: You should nest three div elements below the h2#student-info element.

I have tried so many different versions of this code to no avail. Here are 3 examples, but I have tried it many more.

    <section role="region" aria-labelledby="student-info">
      <h2 id="student-info">Student Info</h2>
      <div class="info">
        <label><input></label>
        <div class="info">
          <label><input></label>
          <div class="info">
            <label><input></label>
          </div>       
        </div>
      </div>
    </section>

  1.  <section role="region" aria-labelledby="student-info">
   <h2 id="student-info">Student Info</h2>
   <div class="info">
     <label><input></label>
   </div>
   <div class="info">
     <label><input></label>
   </div>
   <div class="info">
     <label><input></label>
   </div>
 </section>

  2.  <section role="region" aria-labelledby="student-info">
   <h2 id="student-info">Student Info</h2>
   <div class="info">
     <label><input>
   </div>
   <div class="info">
     <input>
   </div>
   <div class="info">
     <input></label>
   </div>
 </section>
#2

Figured it out. I guess there was an error and after I restarted the step it accepted my code which I have tried previously numerous times, putting the input after the label.

#3

I’m very happy that you figured it out, and about the platform, FCC is just a start to your coding journey, you need to read and to watch other courses and to practice a lot and a lot

#4

Omg I was about to lose my head, but yea, sometimes instructions can be a bit tricky. I wonder If they do it in purpose just to tell if you’re paying attention, lol.

Upon taking a closer look it says to place the input element AFTER the label, not in between.But so far we’ve only used inputs nested INSIDE labels… maybe it’s just inertia?

#5

Yes. I did that first, but it didn’t work. The nested inside ones were the last ones I tried, because I remembered we did that before, and thought; “maybe the instructions were bad?” I think something had a problem or glitched out, because I had to “restart step” and then it finally worked.

I think they may do it on purpose also to get us used to “googling the answer” as that was a big step of learning C# for me, and I still do from time to time. From a teaching standpoint, I think they are just trying to show you that you can do achieve the same output a hundred different ways. That way you can just find what works best for you and use that.

#6

Student Info

This is the code you were looking for
#7

Student Info

#8

what is the code? ive also tired what feels like at least a thousand different ways to do it.

#9

You need to use a label closing tag immediately after creating it, after your label closing tag use the input tag and you should be good!