CSS Positioning: Position the boxes

In this activity, we will practice CSS positioning with a series of 7 exercises that all use the same HTML. For each exercise, you will be provided an example image. You will need to write the CSS to make the HTML look like the example image.

Setup the project

• Fork then clone the Activity: CSS Positioning repository on GitHub.

• Open the activity in your code editor

Basic Requirements

All the divs in the example images are 200px x 200px.

There are many ways to solve each exercise. This activity is about experimenting so don't stress if your solution is not pixel perfect to the image.

• Do your best to complete exercises 1-5.
• Don't forget about pseudo selectors like ::before and ::after. They may come in handy for some of these exercises.
• The CSS code and example for the Black Star HTML Symbol, Character, and Entity Codes page will come in handy for exercise 3.

Optional Exercises

Challenge yourself by completing exercises 6 and 7

• Complete exercises 6 and 7
• You may find the inherit keyword and the ::before and ::after pseudo selectors to be helpful when tackling these exercises