Set a background — practice exercise

What you'll be asked to do

1. 1.Set a backgroundexercise · easy · 10 min

   Give #box a #f0f0f0 background.

   Passes when: Give #box a #f0f0f0 background.

2. 2.Use a translucent backgroundexercise · easy · 10 min · practice plan

   Give #box a black background at 50% opacity.

   Passes when: Give #box a black background at 50% opacity.

3. 3.Match the text colourexercise · easy · 10 min · practice plan

   Make the #box background follow its text colour, which is red.

   Passes when: Make the #box background follow its text colour, which is red.

4. 4.Colour the wrapperexercise · easy · 10 min · practice plan

   Give #wrap a #fffbe6 background.

   Passes when: Give #wrap a #fffbe6 background.

5. 5.Build a readable panelexercise · medium · 10 min · practice plan

   Dark #1a1a1a background with #fafafa text.

   Passes when: Dark #1a1a1a background with #fafafa text.

6. 6.Fix the shorthand that wiped the colourbug fix · easy · 8 min

   A later background shorthand resets background-color.

   Passes when: A later background shorthand resets background-color.

7. 7.Fix the alpha in a hex colourbug fix · easy · 8 min · practice plan

   Use rgba() to get a half-transparent black.

   Passes when: Use rgba() to get a half-transparent black.

8. 8.Fix the misspelled keywordbug fix · easy · 8 min · practice plan

   The keyword is currentColor.

   Passes when: The keyword is currentColor.

9. 9.Fix the colour on the wrong elementbug fix · easy · 8 min · practice plan

   The wrapper should carry the cream background.

   Passes when: The wrapper should carry the cream background.

10. 10.Fix the unreadable pairingbug fix · easy · 8 min · practice plan

    Dark text on a dark background cannot be read.

    Passes when: Dark text on a dark background cannot be read.

Between them these tasks cover background-color, Alpha backgrounds and currentColor.

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