Challenges
Click a challenge title to open its instructions. Click again to close them.
-
Basic Box Model
Match the styles with this picture. If you need to see the picture in more detail, right-click and choose "view image" or "open image" to open the full size image.
-
Absolute Positions
Click here to reset the CSS and begin the new challenge. Match the image below. You may wish to inspect the class="workarea" element, which is positioned to provide context for the colored boxes.
BIG HINT: Start with red, then yellow, then black, so that your colored boxes do not overlap in a way that prevents editing them.
-
Basic Layering
Continue from Challenge #2 without resetting. Add z-index values to adjust the layering of your colored boxes to match the picture below.
Click here for some basics about the z-index property, and if you need more details, you can start here for a more comprehensive look at stacking context.
-
Rainbow Snowman
Click here to reset the CSS and begin the new challenge. Match the image below. The CSS border-radius property will help.
-
Simple House
Click here to reset the CSS and begin the new challenge. Match the image below. The CSS Triangle method will help.
-
Hand of Cards
Click here to reset the CSS and begin the new challenge. Match the image below. The CSS rotation transformation will help.
