diff --git a/advanced-html-css/animation/01-button-hover/README.md b/advanced-html-css/animation/01-button-hover/README.md index 3aa1a1e6e788..8136026306cf 100644 --- a/advanced-html-css/animation/01-button-hover/README.md +++ b/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? diff --git a/advanced-html-css/animation/02-pop-up/README.md b/advanced-html-css/animation/02-pop-up/README.md index 7f72e8650323..ad0ce1502ee8 100644 --- a/advanced-html-css/animation/02-pop-up/README.md +++ b/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 \ No newline at end of file +- [ ] 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 diff --git a/advanced-html-css/animation/03-dropdown-menu/README.md b/advanced-html-css/animation/03-dropdown-menu/README.md index 0d12b6ac8467..b01300ba3684 100644 --- a/advanced-html-css/animation/03-dropdown-menu/README.md +++ b/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 \ No newline at end of file +- [ ] The dropdown menu expands after you click on the menu title +- [ ] There's a _bounce_ illusion towards the end of the animation diff --git a/foundations/block-and-inline/01-margin-and-padding-1/README.md b/foundations/block-and-inline/01-margin-and-padding-1/README.md index c09aecbf2d12..6207e2091858 100644 --- a/foundations/block-and-inline/01-margin-and-padding-1/README.md +++ b/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.). \ No newline at end of file +- [ ] 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.). diff --git a/foundations/block-and-inline/02-margin-and-padding-2/README.md b/foundations/block-and-inline/02-margin-and-padding-2/README.md index 244decc04360..badef1444db4 100644 --- a/foundations/block-and-inline/02-margin-and-padding-2/README.md +++ b/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. diff --git a/foundations/cascade/01-cascade-fix/README.md b/foundations/cascade/01-cascade-fix/README.md index 5daa9a9298c8..68a550f1f2f5 100644 --- a/foundations/cascade/01-cascade-fix/README.md +++ b/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? diff --git a/foundations/flex/01-flex-center/README.md b/foundations/flex/01-flex-center/README.md index 56cbbb6ac26f..fe454d5d850e 100644 --- a/foundations/flex/01-flex-center/README.md +++ b/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? diff --git a/foundations/flex/02-flex-header/README.md b/foundations/flex/02-flex-header/README.md index fce7035581cb..85eaabdcc436 100644 --- a/foundations/flex/02-flex-header/README.md +++ b/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. \ No newline at end of file +Note: For this exercise, it's completely acceptable to not match the font-family. diff --git a/foundations/flex/03-flex-header-2/README.md b/foundations/flex/03-flex-header-2/README.md index 3d952160cf5a..1bb0fc9a587d 100644 --- a/foundations/flex/03-flex-header-2/README.md +++ b/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. diff --git a/foundations/flex/04-flex-information/README.md b/foundations/flex/04-flex-information/README.md index f035b6308c3b..fe8b4504b6c4 100644 --- a/foundations/flex/04-flex-information/README.md +++ b/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. diff --git a/foundations/flex/05-flex-modal/README.md b/foundations/flex/05-flex-modal/README.md index 1b89892e77f6..4101687fb006 100644 --- a/foundations/flex/05-flex-modal/README.md +++ b/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. diff --git a/foundations/flex/06-flex-layout/README.md b/foundations/flex/06-flex-layout/README.md index e5fceebfd2b3..6a5136f4e880 100644 --- a/foundations/flex/06-flex-layout/README.md +++ b/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. diff --git a/foundations/flex/07-flex-layout-2/README.md b/foundations/flex/07-flex-layout-2/README.md index bde265c234c6..4b9d263f91b0 100644 --- a/foundations/flex/07-flex-layout-2/README.md +++ b/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. diff --git a/foundations/intro-to-css/01-css-methods/README.md b/foundations/intro-to-css/01-css-methods/README.md index 9059c6dc7c02..7987898e5121 100644 --- a/foundations/intro-to-css/01-css-methods/README.md +++ b/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? diff --git a/foundations/intro-to-css/02-class-id-selectors/README.md b/foundations/intro-to-css/02-class-id-selectors/README.md index a2a4c67b00ef..5527dd04362e 100644 --- a/foundations/intro-to-css/02-class-id-selectors/README.md +++ b/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? diff --git a/foundations/intro-to-css/03-grouping-selectors/README.md b/foundations/intro-to-css/03-grouping-selectors/README.md index cd214616f7ef..8c338ea3a3c2 100644 --- a/foundations/intro-to-css/03-grouping-selectors/README.md +++ b/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? diff --git a/foundations/intro-to-css/04-chaining-selectors/README.md b/foundations/intro-to-css/04-chaining-selectors/README.md index 0f1fda9755ff..282375a07f51 100644 --- a/foundations/intro-to-css/04-chaining-selectors/README.md +++ b/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? diff --git a/foundations/intro-to-css/05-descendant-combinator/README.md b/foundations/intro-to-css/05-descendant-combinator/README.md index 7577c4e73ecc..071e777a371c 100644 --- a/foundations/intro-to-css/05-descendant-combinator/README.md +++ b/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? diff --git a/intermediate-html-css/advanced-grid/01-responsive-holy-grail/README.md b/intermediate-html-css/advanced-grid/01-responsive-holy-grail/README.md index 44dfa514369f..6ab30b8e5a93 100644 --- a/intermediate-html-css/advanced-grid/01-responsive-holy-grail/README.md +++ b/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 diff --git a/intermediate-html-css/advanced-grid/02-holy-grail-mockup/README.md b/intermediate-html-css/advanced-grid/02-holy-grail-mockup/README.md index beea0c825a39..d4b7eea5c0c1 100644 --- a/intermediate-html-css/advanced-grid/02-holy-grail-mockup/README.md +++ b/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 diff --git a/intermediate-html-css/positioning-grid/01-basic-holy-grail/README.md b/intermediate-html-css/positioning-grid/01-basic-holy-grail/README.md index e3a3ecf40fa1..574f850d2aa2 100644 --- a/intermediate-html-css/positioning-grid/01-basic-holy-grail/README.md +++ b/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