Layer a red-to-blue gradient over a green-to-yellow one.
Acceptance criteria
- 1.Layer a red-to-blue gradient over a green-to-yellow one.
CSS Tutorial · CSS Colors and Backgrounds
These 10 tasks go with the Layered Backgrounds 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: “Layer background images, control their painting area, and use borders that are more than a solid line. You will layer gradients and images, control their size and painting boxes, and create image- or gradient-based border treatments.” .
1.Stack two gradientsexercise · easy · 10 min
Layer a red-to-blue gradient over a green-to-yellow one.
Passes when: Layer a red-to-blue gradient over a green-to-yellow one.
2.Repeat each layer differentlyexercise · easy · 10 min · practice plan
Two layers: the first not repeating, the second repeating on x.
Passes when: Two layers: the first not repeating, the second repeating on x.
3.Position each layerexercise · easy · 10 min · practice plan
Put the first layer top-left and the second bottom-right.
Passes when: Put the first layer top-left and the second bottom-right.
4.Size each layerexercise · easy · 10 min · practice plan
Make the first layer 50px by 50px and the second cover the box.
Passes when: Make the first layer 50px by 50px and the second cover the box.
5.Compose a layered backgroundexercise · medium · 10 min · practice plan
Two gradients, each with its own repeat and size.
Passes when: Two gradients, each with its own repeat and size.
6.Fix the missing second layerbug fix · easy · 8 min
Two gradients are needed, separated by a comma.
Passes when: Two gradients are needed, separated by a comma.
7.Fix the single repeat valuebug fix · easy · 8 min · practice plan
One value applies to every layer; each needs its own.
Passes when: One value applies to every layer; each needs its own.
8.Fix the swapped positionsbug fix · easy · 8 min · practice plan
The first layer belongs top-left.
Passes when: The first layer belongs top-left.
9.Fix the space-separated layersbug fix · easy · 8 min · practice plan
Background layers are separated by commas.
Passes when: Background layers are separated by commas.
10.Fix the reversed sizesbug fix · easy · 8 min · practice plan
The covering layer should be the first one.
Passes when: The covering layer should be the first one.
Between them these tasks cover Layer lists, Per-layer position and size and Stacking order.
Looking for a different chapter? See every practice set, or switch to the interview theory questions.