Assessment wanted - Advanced Styling 2 Skill Test

MDN Learn
,
#1

Hi there,

Hope you’re well :call_me_hand:

Looking for an assessment and review of my markup for this skill test. Codepen here.

Thank you in advance!

#2

Great work @Phil_G!

I especially like the pulsing of the indeterminate state. Looks very cool. :star_struck:

As an alternative an elegant way to vertically align the label and the text would be by using Flexbox. This, of course, would need a rewrite of the HTML. (no nesting and a wrapper element)
Something like this should basically work:

.wrapper {
  display: flex;
  align-items: center;
}

See you,
Michael

1 Like
#3

Thank you @mikoMK appreciated :pray:t3:

Re your recommendation, I should 1) un-nest the input from within the label and 2) apply the wrapper styling to (say) the form element?

Keeping in mind what you mentioned several posts ago about nesting label/inputs in divs, just wanted to clarify before I make the changes and see how it looks.

Thank you in advance - seems much simpler in principle than the styling I implemented.

#4

Not quite. What I mean is something like this:

<ul>
  <li>
    <label for="pinkie">Pinkie Pie</label>
    <input type="radio" id="pinkie" name="pony" value="pinkie">
  </li>
  <li>
    <label for="rainbow">Rainbow Dash</label>
    <input type="radio" id="rainbow" name="pony" value="rainbow">
  </li>
  <li>
    <label for="twilight">Twilight Sparkle</label>
    <input type="radio" id="twilight" name="pony" value="twilight">
  </li>
</ul>

The labels and inputs are still grouped and are connected through the for attribute and we can now use the <li>s as Flex containers. So you would replace .wrapper in my code above with li and end up with three Flex containers each with a label and a input that can be align.

1 Like