A frogger-style CSS box model game where students type the declaration that changes the highlighted space.
Interactive prototype
Type the CSS declaration that fixes the spacing
Each level highlights one part of the box model. Read the arrow, study the mockup, and type the needed CSS declaration like padding-top: 12px;. The last few levels require two declarations, and every declaration must end with a semicolon.
Level 1 of 15
0 levels cleared
🐸
Starter CSS
Press Enter or click Check answer. End every declaration with ;.
Pond crossed.
Download your JPG certificate and upload it to Canvas as proof that you cleared all 15 levels.
Margin levels test outside spacing.
Padding levels test inside spacing.
Border levels now include full-border and side-specific border changes.
The final combo rounds require both padding and margin declarations.