Style the input — practice exercise

What you'll be asked to do

1. 1.Style the inputexercise · easy · 10 min

   Give #input 8px padding and a 1px solid #cccccc border.

   Passes when: Give #input 8px padding and a 1px solid #cccccc border.

2. 2.Style the buttonexercise · easy · 10 min · practice plan

   Give #btn a navy background and white text.

   Passes when: Give #btn a navy background and white text.

3. 3.Stack the labelexercise · easy · 10 min · practice plan

   Put #label on its own line.

   Passes when: Put #label on its own line.

4. 4.Limit the textarea resizeexercise · easy · 10 min · practice plan

   Let #area resize vertically only.

   Passes when: Let #area resize vertically only.

5. 5.Lay out the formexercise · medium · 10 min · practice plan

   Stack the fields in a column with a 12px gap.

   Passes when: Stack the fields in a column with a 12px gap.

6. 6.Fix the border with no stylebug fix · easy · 8 min

   A border needs a style to be drawn.

   Passes when: A border needs a style to be drawn.

7. 7.Fix the swapped coloursbug fix · easy · 8 min · practice plan

   The button should be navy with white text.

   Passes when: The button should be navy with white text.

8. 8.Fix the inline labelbug fix · easy · 8 min · practice plan

   A label on its own line needs display: block.

   Passes when: A label on its own line needs display: block.

9. 9.Fix the resize valuebug fix · easy · 8 min · practice plan

   Vertical-only resizing uses the value vertical.

   Passes when: Vertical-only resizing uses the value vertical.

10. 10.Fix the row layoutbug fix · easy · 8 min · practice plan

    The fields should stack in a column.

    Passes when: The fields should stack in a column.

Between them these tasks cover Styling inputs and buttons, Label layout and Form layout.

Looking for a different chapter? See every practice set, or switch to the interview theory questions.