Outline #wrap in 2px solid red to see its box.
Acceptance criteria
- 1.Outline #wrap in 2px solid red to see its box.
CSS Tutorial · CSS Output & Performance
These 10 tasks go with the Debugging CSS 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: “Trace computed values, layout constraints, stacking contexts, and overflow with browser developer tools. It provides a repeatable workflow for matched rules, computed values, box dimensions, Grid and Flex overlays, stacking contexts, overflow, and reduced test cases.” .
1.Outline an elementexercise · easy · 10 min
Outline #wrap in 2px solid red to see its box.
Passes when: Outline #wrap in 2px solid red to see its box.
2.Outline everythingexercise · easy · 10 min · practice plan
Outline every element in 1px solid magenta.
Passes when: Outline every element in 1px solid magenta.
3.Tint a boxexercise · easy · 10 min · practice plan
Give #text a translucent red tint to see its extent.
Passes when: Give #text a translucent red tint to see its extent.
4.Find the overflowexercise · easy · 10 min · practice plan
Outline #wrap and reveal anything spilling out.
Passes when: Outline #wrap and reveal anything spilling out.
5.Debug without moving anythingexercise · medium · 10 min · practice plan
Outline #text in 4px lime but keep its border at zero.
Passes when: Outline #text in 4px lime but keep its border at zero.
6.Fix the outline with no stylebug fix · easy · 8 min
An outline needs a style to be drawn.
Passes when: An outline needs a style to be drawn.
7.Fix the selector that misses most elementsbug fix · easy · 8 min · practice plan
The universal selector is a star.
Passes when: The universal selector is a star.
8.Fix the opaque debug tintbug fix · easy · 8 min · practice plan
A debug tint should be translucent so content stays readable.
Passes when: A debug tint should be translucent so content stays readable.
9.Fix the hidden overflowbug fix · easy · 8 min · practice plan
Hiding the overflow conceals the very thing being debugged.
Passes when: Hiding the overflow conceals the very thing being debugged.
10.Fix the border used to debugbug fix · easy · 8 min · practice plan
A border changes the layout; use an outline instead.
Passes when: A border changes the layout; use an outline instead.
Between them these tasks cover Outlines over borders, Isolating rules and Finding overflow.
Looking for a different chapter? See every practice set, or switch to the interview theory questions.