All exercises: Add checkboxes to the READMEs

advanced-html-css/animation/01-button-hover/README.md

@@ -7,6 +7,6 @@ Use a transition to scale the button when you hover your mouse over it.
 ![outcome](./desired-outcome.gif)
 
 ### Self Check
-- Does the button grow when you hover it?
-- Do other properties of the button remain unchanged?
-- Does the `:hover` pseudo-class trigger the transition?
+- [ ] Does the button grow when you hover it?
+- [ ] Do other properties of the button remain unchanged?
+- [ ] Does the `:hover` pseudo-class trigger the transition?

advanced-html-css/animation/02-pop-up/README.md

@@ -16,5 +16,5 @@ You don't need to worry about the actual functionality here; we've just written
 
 ### Self Check
 
-- The pop-up slides down into position when you click the open button and slides back up when you click 'close modal'
-- The opacity fades smoothly in and out when toggling the modal
+- [ ] The pop-up slides down into position when you click the open button and slides back up when you click 'close modal'
+- [ ] The opacity fades smoothly in and out when toggling the modal

advanced-html-css/animation/03-dropdown-menu/README.md

@@ -14,5 +14,5 @@ Your task is to add animation to the dropdown menu so that it will have an effec
 
 ### Self Check
 
-- The dropdown menu expands after you click on the menu title
-- There's a _bounce_ illusion towards the end of the animation
+- [ ] The dropdown menu expands after you click on the menu title
+- [ ] There's a _bounce_ illusion towards the end of the animation

foundations/block-and-inline/01-margin-and-padding-1/README.md

@@ -4,11 +4,11 @@ For this first exercise, simply edit the `style.css` file so that the divs look
 
 ![outcome](./desired-outcome.png)
 
-### Self-check 
+### 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, flexbox, etc.).
+- [ ] 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, flexbox, etc.).

foundations/block-and-inline/02-margin-and-padding-2/README.md

@@ -8,11 +8,11 @@ This one is a little nicer looking, and a little closer to something you might s
 ### 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.
 
-- There is 8px between the edge of the card and its content (the blue sections).
-- There is an 8px gap between each of the blue sections inside the card.
-- The title of the card uses a 16px font.
-- There are 8px between the title text and the edge of the title section.
-- The content section has 16px space on the top and bottom, and 8px on either side.
-- Everything inside the `.button-container` section is centered, and there is 8px padding.
-- The Big Button is centered on its own line.
-- The Big Button has 24px space on the sides, and 8px on top and bottom.
+- [ ] There is 8px between the edge of the card and its content (the blue sections).
+- [ ] There is an 8px gap between each of the blue sections inside the card.
+- [ ] The title of the card uses a 16px font.
+- [ ] There are 8px between the title text and the edge of the title section.
+- [ ] The content section has 16px space on the top and bottom, and 8px on either side.
+- [ ] Everything inside the `.button-container` section is centered, and there is 8px padding.
+- [ ] The Big Button is centered on its own line.
+- [ ] The Big Button has 24px space on the sides, and 8px on top and bottom.

foundations/cascade/01-cascade-fix/README.md

@@ -14,5 +14,5 @@ Issues with the cascade can be the bane of their existence for many when it come
 
 ### Self Check
 
-- Did you make sure to not edit the HTML file?
-- If you added selectors to the CSS, do they target a valid HTML element?
+- [ ] Did you make sure to not edit the HTML file?
+- [ ] If you added selectors to the CSS, do they target a valid HTML element?

foundations/flex/01-flex-center/README.md

@@ -7,6 +7,6 @@ All you need to do is center the red div inside the blue container.
 ![outcome](./desired-outcome.png)
 
 ### Self Check
-- Is the red div centered?
-- Did you _only_ use flexbox to center it?
+- [ ] Is the red div centered?
+- [ ] Did you _only_ use flexbox to center it?
 

foundations/flex/02-flex-header/README.md

@@ -11,10 +11,10 @@ wide:
 ![wide](./desired-outcome-wide.png)
 
 ### Self Check
-- There is space between all items and the edge of the header (specific px amount doesn't matter here).
-- Logo is centered vertically and horizontally.
-- list-items are horizontal, and are centered vertically inside the header.
-- left-links and right-links are pushed all the way to the left and right, and stay at the edge of the header when the page is resized.
-- Your solution does not use floats, inline-block, or absolute positioning.
+- [ ] There is space between all items and the edge of the header (specific px amount doesn't matter here).
+- [ ] Logo is centered vertically and horizontally.
+- [ ] list-items are horizontal, and are centered vertically inside the header.
+- [ ] left-links and right-links are pushed all the way to the left and right, and stay at the edge of the header when the page is resized.
+- [ ] Your solution does not use floats, inline-block, or absolute positioning.
 
-- Note: For this exercise, it's completely acceptable to not match the font-family.
+Note: For this exercise, it's completely acceptable to not match the font-family.

foundations/flex/03-flex-header-2/README.md

@@ -14,8 +14,8 @@ As with the last example, this one needs to be flexible in the middle, with item
 ![gif](./desired-outcome.gif)
 
 ### Self Check
-- Everything is centered vertically inside the header.
-- There is 8px space between everything and the edge of the header.
-- Items are arranged horizontally as seen in the outcome image.
-- There is 16px between each item on both sides of the header.
-- flex is used to arrange everything.
+- [ ] Everything is centered vertically inside the header.
+- [ ] There is 8px space between everything and the edge of the header.
+- [ ] Items are arranged horizontally as seen in the outcome image.
+- [ ] There is 16px between each item on both sides of the header.
+- [ ] flex is used to arrange everything.

foundations/flex/04-flex-information/README.md

@@ -10,10 +10,10 @@ For this one you will need to edit the HTML a little bit too. We can't be making
 
 ### Self Check
 
-- All items are centered on the page (horizontally, not vertically).
-- The title is centered on the page.
-- There is 32px between the title and the 'items.'
-- There is 52px between each item.
-- The items are arranged horizontally on the page.
-- The items are only 200px wide and the text wraps.
-- The item text is centered.
+- [ ] All items are centered on the page (horizontally, not vertically).
+- [ ] The title is centered on the page.
+- [ ] There is 32px between the title and the 'items.'
+- [ ] There is 52px between each item.
+- [ ] The items are arranged horizontally on the page.
+- [ ] The items are only 200px wide and the text wraps.
+- [ ] The item text is centered.

foundations/flex/05-flex-modal/README.md

@@ -10,9 +10,9 @@ Depending on how you approach this one, you might need to revisit the `flex-shri
 
 ### Self Check
 
-- The blue icon is aligned to the left.
-- There is equal space on either side of the icon (the gaps between the icon and the edge of the card, and the icon and the text, are the same).
-- There is padding around the edge of the modal.
-- The header, text, and buttons are aligned with each other.
-- The header is bold and a slightly larger text-size than the text.
-- The close button is vertically aligned with the header, and aligned in the top-right of the card.
+- [ ] The blue icon is aligned to the left.
+- [ ] There is equal space on either side of the icon (the gaps between the icon and the edge of the card, and the icon and the text, are the same).
+- [ ] There is padding around the edge of the modal.
+- [ ] The header, text, and buttons are aligned with each other.
+- [ ] The header is bold and a slightly larger text-size than the text.
+- [ ] The close button is vertically aligned with the header, and aligned in the top-right of the card.

foundations/flex/06-flex-layout/README.md

@@ -12,11 +12,11 @@ Flexbox is useful for laying out entire pages as well as the smaller components
 
 ### Self Check
 
-- The header is at the top of the page, the footer is at the bottom, and they stay in place if you resize your screen.
-- The header and footer have padding.
-- The links in the header and footer are pushed to either side.
-- There is space between the links in the header and footer.
-- The footer has a light gray background (`#eeeeee`).
-- The logo, input and buttons are centered in the screen.
-- The buttons have an appropriate amount of padding.
-- There is space between the logo, input and buttons.
+- [ ] The header is at the top of the page, the footer is at the bottom, and they stay in place if you resize your screen.
+- [ ] The header and footer have padding.
+- [ ] The links in the header and footer are pushed to either side.
+- [ ] There is space between the links in the header and footer.
+- [ ] The footer has a light gray background (`#eeeeee`).
+- [ ] The logo, input and buttons are centered in the screen.
+- [ ] The buttons have an appropriate amount of padding.
+- [ ] There is space between the logo, input and buttons.

foundations/flex/07-flex-layout-2/README.md

@@ -23,13 +23,13 @@ On a smaller screen it will look like this:
 Note: The emojis may instead show up as one or several text symbols (e.g. ☆♂) if you don't have an emoji-based font family installed on your operating system. This does not affect the exercise and can be ignored.
 
 ### Self Check
-- The header text is size 32px and weight 900.
-- The header text is vertically centered and 16px from the edge of the screen.
-- The footer is pushed to the bottom of the screen (the footer may go _below_ the bottom of the screen if the content of the 'cards' section overflows and/or if your screen is shorter).
-- The footer text is centered horizontally and vertically.
-- The sidebar and cards take up all available space above the footer.
-- The sidebar is 300px wide (and it doesn't shrink).
-- The sidebar links are size 24px, are white, and do not have the underline text decoration.
-- The sidebar has 16px padding.
-- There is 48px padding around the 'cards' section.
-- The cards are arranged horizontally, but wrap to multiple lines when they run out of room on the page.
+- [ ] The header text is size 32px and weight 900.
+- [ ] The header text is vertically centered and 16px from the edge of the screen.
+- [ ] The footer is pushed to the bottom of the screen (the footer may go _below_ the bottom of the screen if the content of the 'cards' section overflows and/or if your screen is shorter).
+- [ ] The footer text is centered horizontally and vertically.
+- [ ] The sidebar and cards take up all available space above the footer.
+- [ ] The sidebar is 300px wide (and it doesn't shrink).
+- [ ] The sidebar links are size 24px, are white, and do not have the underline text decoration.
+- [ ] The sidebar has 16px padding.
+- [ ] There is 48px padding around the 'cards' section.
+- [ ] The cards are arranged horizontally, but wrap to multiple lines when they run out of room on the page.

foundations/intro-to-css/01-css-methods/README.md

@@ -17,8 +17,8 @@ The properties you need to add to each element are:
 
 
 ### Self Check
-- Did you use all three methods of adding CSS to an HTML file?
-- Did you properly link the external CSS file in the HTML file?
-- Does the `div` element have CSS added via the external method?
-- Does the `p` element have CSS added via the internal method?
-- Does the `button` element have CSS added via the inline method?
+- [ ] Did you use all three methods of adding CSS to an HTML file?
+- [ ] Did you properly link the external CSS file in the HTML file?
+- [ ] Does the `div` element have CSS added via the external method?
+- [ ] Does the `p` element have CSS added via the internal method?
+- [ ] Does the `button` element have CSS added via the inline method?

foundations/intro-to-css/02-class-id-selectors/README.md

@@ -20,6 +20,6 @@ Quick tip: in VS Code, you can change which format colors are displayed in RGB,
 
 
 ### Self Check
-- Do the odd numbered `p` elements share a class?
-- Do the even numbered `div` elements have unique IDs?
-- Does the Number 3 element have multiple classes?
+- [ ] Do the odd numbered `p` elements share a class?
+- [ ] Do the even numbered `div` elements have unique IDs?
+- [ ] Does the Number 3 element have multiple classes?

foundations/intro-to-css/03-grouping-selectors/README.md

@@ -14,6 +14,6 @@ This will help you further practice adding classes and using class selectors, so
 
 ### Self Check
 
-- Does each element have a unique class name?
-- Did you use the grouping selector for styles that both elements share?
-- Did you make separate rules for the styles unique to each element?
+- [ ] Does each element have a unique class name?
+- [ ] Did you use the grouping selector for styles that both elements share?
+- [ ] Did you make separate rules for the styles unique to each element?

foundations/intro-to-css/04-chaining-selectors/README.md

@@ -16,6 +16,6 @@ The properties you need to add to each element are:
 ![desired outcome](./desired-outcome.png)
 
 ### Self Check
-- Did you properly chain class selectors for each rule?
-- Does the `proportioned` image retain its original square proportions?
-- Does the `distorted` image end up looking squished and, well, distorted?
+- [ ] Did you properly chain class selectors for each rule?
+- [ ] Does the `proportioned` image retain its original square proportions?
+- [ ] Does the `distorted` image end up looking squished and, well, distorted?

foundations/intro-to-css/05-descendant-combinator/README.md

@@ -14,5 +14,5 @@ The properties you need to add are:
 
 
 ### Self Check
-- Do the elements that contain the text "This should be styled" have the correct styles applied?
-- Do the elements that contain the text "This should be unstyled" have no styles applied?
+- [ ] Do the elements that contain the text "This should be styled" have the correct styles applied?
+- [ ] Do the elements that contain the text "This should be unstyled" have no styles applied?

intermediate-html-css/advanced-grid/01-responsive-holy-grail/README.md

@@ -17,12 +17,12 @@ When the browser is stretched wide:
 ![desired outcome wide](./desired-outcome-wide.png)
 
 ### Self Check
-- The gap is 15px
-- The grid has two columns
-- The grid has four rows
-- The grid tracks do not use static sizes (no pixels!)
-- The second column is three times larger than the other
-- The third row is five times larger than the others
-- The columns narrow and widen as the viewport changes size
-- Row 3 gets taller to accomodate text wrapping as you narrow the viewport size 
+- [ ] The gap is 15px
+- [ ] The grid has two columns
+- [ ] The grid has four rows
+- [ ] The grid tracks do not use static sizes (no pixels!)
+- [ ] The second column is three times larger than the other
+- [ ] The third row is five times larger than the others
+- [ ] The columns narrow and widen as the viewport changes size
+- [ ] Row 3 gets taller to accomodate text wrapping as you narrow the viewport size 
 

intermediate-html-css/advanced-grid/02-holy-grail-mockup/README.md

@@ -18,18 +18,18 @@ If you use the tools in the Advanced Grid Properties lesson you should be able t
 ![desired outcome stretched](./desired-outcome-stretched.png)
 
 ### Self Check
-- The container element has two columns
-- The container's second column is 4 times larger than the first column
-- The container element has a gap of 4px
-- The header element has two columns
-- The `ul` inside the menu element contains another grid
-- The `ul` inside the nav element contains another grid
-- The sidebar element has a gap of 50px
-- The text elements in the sidebar are centered with grid
-- The article element should set grid columns using `repeat` along with the `auto-fit` and `minmax` properties
-- The article columns should have a minimum value of 250px and a maximum of 1fr unit
-- The article element has a gap of 15px
-- The card elements inside the article container have a height of 200px
-- The header and footer span across both columns
-- The sidebar only spans across the first column
-- The nav and article elements only span across the second column
+- [ ] The container element has two columns
+- [ ] The container's second column is 4 times larger than the first column
+- [ ] The container element has a gap of 4px
+- [ ] The header element has two columns
+- [ ] The `ul` inside the menu element contains another grid
+- [ ] The `ul` inside the nav element contains another grid
+- [ ] The sidebar element has a gap of 50px
+- [ ] The text elements in the sidebar are centered with grid
+- [ ] The article element should set grid columns using `repeat` along with the `auto-fit` and `minmax` properties
+- [ ] The article columns should have a minimum value of 250px and a maximum of 1fr unit
+- [ ] The article element has a gap of 15px
+- [ ] The card elements inside the article container have a height of 200px
+- [ ] The header and footer span across both columns
+- [ ] The sidebar only spans across the first column
+- [ ] The nav and article elements only span across the second column

intermediate-html-css/positioning-grid/01-basic-holy-grail/README.md

@@ -14,11 +14,11 @@ Now it's time to practice the Grid tools we've learned and create a layout that
 
 ### Self Check
 
-- The gap is 15px
-- The grid has two columns
-- The grid has four rows
-- The second column is three times larger than the first
-- The third row is five times larger than the others
-- The header and footer elements span across both columns
-- The sidebar element only spans across the first column
-- The nav and article elements span across the second column
+- [ ] The gap is 15px
+- [ ] The grid has two columns
+- [ ] The grid has four rows
+- [ ] The second column is three times larger than the first
+- [ ] The third row is five times larger than the others
+- [ ] The header and footer elements span across both columns
+- [ ] The sidebar element only spans across the first column
+- [ ] The nav and article elements span across the second column