CSS Exercises

These exercises are a series of css related tasks intended to complement the HTML and CSS content on The Odin Project.

These exercises should be done when instructed during the course of the curriculum.

Generally, they consist of a simple html file with some markup and some basic CSS. Open the html file in your browser and then do your best to make the output match the desired-output screenshot. Most exercises will include a 'self check' section, with a list of items for you to check after you have completed the exercise. Unless listed in the self-check section, do not worry about getting the exact pixel value for things like margin, padding and font-size. These exercises are intended to test your knowledge of CSS, not your ability to guess that a screenshot is using font: sans-serif bold 16px.

In many cases, there will be multiple correct ways to solve these problems. The official solution isn't necessarily the right way, but it is possible to do things in ways that are overall unhelpful. If your solution differs wildly from the official solution (and still passes the self-check criteria), feel free to ask about it in the chatroom.