add self-check

This commit is contained in:
Cody Loyd 2021-08-18 09:11:35 -05:00
parent 4d49e81012
commit 84276c71bc
2 changed files with 12 additions and 3 deletions

View File

@ -4,6 +4,6 @@ These exercises are a series of css related tasks intended to complement the HTM
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. Unless instructed otherwise, don't stress _too_ much about getting the _exact_ value for font-sizes, margins and paddings. It can be hard to tell from screenshots what the precise value is. If you put in 14px and find the actual value is 16px, consider that a success.
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, feel free to ask about it in the chatroom.
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.

View File

@ -2,4 +2,13 @@
For this first exercise, simply edit the `index.html` file so that the divs look like the image below. Only edit the CSS where instructed in the file. You should only have to change the values of the margin and padding for this exercise. You should not have to add or remove properties in the CSS, or touch the HTML.
![outcome](./desired-outcome.png)
![outcome](./desired-outcome.png)
### Self-check
Use this section to check your work. On _these_ projects, your goal isn't to attain 100% pixel-perfection, but to use the tools you've learned to get relatively close to the desired output.
- Div One and Div Three have 32px between their text and border.
- Div One has 12px between it and any other element on the page.
- There is a 48px gap between Div Two and Div Three.
- Div Three is aligned to the right
- Div Three's alignment is achieved using `margin` (and not float, or flexbox etc.)