Give #box a linear gradient from red to blue.
Acceptance criteria
- 1.Give #box a linear gradient from red to blue.
CSS Tutorial · CSS Colors and Backgrounds
These 10 tasks go with the CSS Background Image chapter. 5 of them ask you to build something small from scratch; 5 give you code that is already broken and ask you to work out why. Set aside about 90 minutes for the whole set, though you can do them in any order.
Nothing here is marked by a person. When you press Submit, the editor checks your code against the points listed under each task and tells you straight away what passed and what didn't (you need a free account to submit). If you get stuck, there are hints, and a worked solution once you've had a go. The first 2 tasks are free; the rest are part of the practice plan.
If it's been a while since you read the chapter, here is how it starts: “Add image and gradient backgrounds, control their source and fallback color, and keep decorative images separate from meaningful content.” .
1.Add a gradientexercise · easy · 10 min
Give #box a linear gradient from red to blue.
Passes when: Give #box a linear gradient from red to blue.
2.Set the gradient directionexercise · easy · 10 min · practice plan
Make the red-to-blue gradient run left to right.
Passes when: Make the red-to-blue gradient run left to right.
3.Use a radial gradientexercise · easy · 10 min · practice plan
Give #box a circular red-to-blue gradient.
Passes when: Give #box a circular red-to-blue gradient.
4.Stop the tilingexercise · easy · 10 min · practice plan
Add a gradient and stop the background repeating.
Passes when: Add a gradient and stop the background repeating.
5.Cover and centreexercise · medium · 10 min · practice plan
A no-repeat gradient, sized to cover and centred.
Passes when: A no-repeat gradient, sized to cover and centred.
6.Fix the missing commabug fix · easy · 8 min
Gradient colour stops are comma separated.
Passes when: Gradient colour stops are comma separated.
7.Fix the direction keywordbug fix · easy · 8 min · practice plan
A gradient direction is written as "to right".
Passes when: A gradient direction is written as "to right".
8.Fix linear used where radial was meantbug fix · easy · 8 min · practice plan
This gradient should radiate from the centre.
Passes when: This gradient should radiate from the centre.
9.Fix the repeat valuebug fix · easy · 8 min · practice plan
The value is no-repeat.
Passes when: The value is no-repeat.
10.Fix the size keywordbug fix · easy · 8 min · practice plan
The value is cover, not covers.
Passes when: The value is cover, not covers.
Between them these tasks cover Gradients, background-repeat and size and background-position.
Looking for a different chapter? See every practice set, or switch to the interview theory questions.