Assessment wanted for Test your skills: Styling basics

MDN Learn
#1

Hi :grinning: Could someone kindly check my work on Test your skills: Styling basics?

Thank you very much! :blush:

My work

Test page

#2

Hello @Risa

That’s a nicely styled form. Well done! :tada:

From a technical perspective you used a single-column grid for the <ul> and in every cell a single-row grid. I see two possibilities to make this simpler:

  • Use a multi-column grid for the whole <ul>.
  • Use Flexbox for the <li>s, set the labels to a certain width (to align them) and ditch the Grid for the <ul>.

I hope that gets you some ideas. :slightly_smiling_face:
Michael

1 Like
#3

Hi @mikoMK

Thank you for your feedback!
Now I feel like using flexbox for <li>s and setting labels’ width is the simplest way for this test! :blush:

I actually tried setting a multi-column grid for the <ul> first, but I couldn’t position the labels and inputs/select as I wanted so I made a subgrid.
I wanted to position all the labels to 1/2 column, and all the inputs and select to 2/3 column, but it turned out this way. :disappointed_relieved:

Is this because label, input, and select are not direct children of <li> ?
Is there any way I can manipulate grandchildren elements’ positions in a grid?

1 Like
#4

Yeah, that’s a problem. All items we want to place into the grid need to be direct children. So this would need changing the HTML.
Since the exercise is about styling the form. It’s probably best to use Flexbox for the rows and keep the HTML as it is.

1 Like
#5

Hi @mikoMK,

I see! I 100% agree it’s the best solution to use flexbox for this task. The code became much simpler this way.

Thank you so much! :blush:

1 Like