From 8bde6984358b377d74b52a117218ad0e122fb65a Mon Sep 17 00:00:00 2001 From: Eric <70952936+thatblindgeye@users.noreply.github.com> Date: Sun, 29 Aug 2021 19:31:45 -0400 Subject: [PATCH 1/6] Add outcome image --- foundations/01-css-methods/README.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/foundations/01-css-methods/README.md b/foundations/01-css-methods/README.md index c34458f..ce52b50 100644 --- a/foundations/01-css-methods/README.md +++ b/foundations/01-css-methods/README.md @@ -10,11 +10,12 @@ The properties you need to add to each element are: * `button`: an orange background and a font size of 18px ## Desired Outcome - +![outcome](https://user-images.githubusercontent.com/70952936/131268832-f3a3bbde-c9e6-4e73-9b99-79ffa3d2144a.png) + ### 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? \ No newline at end of file +- Does the `button` element have CSS added via the inline method? From 83952eed974ea21d81c2fc1d05261c58fc9a5445 Mon Sep 17 00:00:00 2001 From: Eric <70952936+thatblindgeye@users.noreply.github.com> Date: Sun, 29 Aug 2021 19:32:38 -0400 Subject: [PATCH 2/6] Add outcome image --- foundations/02-class-id-selectors/README.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/foundations/02-class-id-selectors/README.md b/foundations/02-class-id-selectors/README.md index 32880ed..b5417f6 100644 --- a/foundations/02-class-id-selectors/README.md +++ b/foundations/02-class-id-selectors/README.md @@ -13,9 +13,10 @@ It isn't entirely important what class or ID values you use, as the focus here i Quick tip: in VS Code, you can change which format colors are displayed in (RGB, HEX, or HSL) by hovering over the color value in the CSS and clicking the top of the popup that appears! ## Desired Outcome - +![outcome](https://user-images.githubusercontent.com/70952936/131268858-5360bb32-27ba-4ce0-be59-5fda97f5eb12.png) + ### Self Check - Do the odd numbered `div` elements share a class? - Do the even numbered `div` elements have unique ID's? -- Does the 3rd `div` element have multiple classes? \ No newline at end of file +- Does the 3rd `div` element have multiple classes? From fe77c12d4ed40b42a9422716288c229dced2f001 Mon Sep 17 00:00:00 2001 From: Eric <70952936+thatblindgeye@users.noreply.github.com> Date: Sun, 29 Aug 2021 19:33:13 -0400 Subject: [PATCH 3/6] Add outcome image --- foundations/03-grouping-selectors/README.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/foundations/03-grouping-selectors/README.md b/foundations/03-grouping-selectors/README.md index 12e02f4..da7df6f 100644 --- a/foundations/03-grouping-selectors/README.md +++ b/foundations/03-grouping-selectors/README.md @@ -11,9 +11,10 @@ This will help you further practice adding classes and using class selectors, so * **Both elements**: a font size of 28px and a list of fonts containing `Helvetica` and `Times New Roman`, with `sans-serif` as a fallback ## Desired Outcome - +![outcome](https://user-images.githubusercontent.com/70952936/131268881-369972f3-b6b6-4242-965f-512c1335cc3a.png) + ### 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? \ No newline at end of file +- Did you make separate rules for the styles unique to each element? From 7d2385fe7ec21dacbc23ee2ed225d01320a2354c Mon Sep 17 00:00:00 2001 From: Eric <70952936+thatblindgeye@users.noreply.github.com> Date: Sun, 29 Aug 2021 19:34:07 -0400 Subject: [PATCH 4/6] Add outcome image --- foundations/04-chaining-selectors/README.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/foundations/04-chaining-selectors/README.md b/foundations/04-chaining-selectors/README.md index d77fe1f..92da50c 100644 --- a/foundations/04-chaining-selectors/README.md +++ b/foundations/04-chaining-selectors/README.md @@ -12,9 +12,10 @@ The properties you need to add to each element are: * Make the element with both the `avatar` and `distorted` classes 200 pixels wide, then make its height twice as big as its width (here you should hardcode in a pixel value) ## Desired Outcome - +![outcome](https://user-images.githubusercontent.com/70952936/131268893-f2e0b302-ea2e-44b8-ba30-b555a35023c9.jpg) + ### 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? \ No newline at end of file +- Does the `distorted` image end up looking squished and, well, distorted? From b23b1ba59346ab6f16db7ad701073ff85d8afc60 Mon Sep 17 00:00:00 2001 From: Eric <70952936+thatblindgeye@users.noreply.github.com> Date: Sun, 29 Aug 2021 19:34:44 -0400 Subject: [PATCH 5/6] Add outcome image --- foundations/05-descendant-combinator/README.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/foundations/05-descendant-combinator/README.md b/foundations/05-descendant-combinator/README.md index 6c3e18f..954ce67 100644 --- a/foundations/05-descendant-combinator/README.md +++ b/foundations/05-descendant-combinator/README.md @@ -10,8 +10,9 @@ The properties you need to add are: * Only the `p` elements that are descendants of the `div` element should have a yellow background, red text, a font size of 20px, and center aligned ## Desired Outcome - +![outcome](https://user-images.githubusercontent.com/70952936/131268923-75916744-d57f-4609-92f0-4f7ce031726a.png) + ### 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? \ No newline at end of file +- Do the elements that contain the text "This should be unstyled" have no styles applied? From d7b2b79fcc2a6472d52a25443f75b7fd5a7b3a65 Mon Sep 17 00:00:00 2001 From: Eric <70952936+thatblindgeye@users.noreply.github.com> Date: Mon, 30 Aug 2021 17:58:51 -0400 Subject: [PATCH 6/6] Add outcome image --- foundations/06-cascade-fix/README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/foundations/06-cascade-fix/README.md b/foundations/06-cascade-fix/README.md index 9646cac..ecb811e 100644 --- a/foundations/06-cascade-fix/README.md +++ b/foundations/06-cascade-fix/README.md @@ -8,8 +8,8 @@ Specificity issues will require you to either add or remove a selector from an a Issues with the cascade can be the bane for many when it comes to CSS, so once you complete this exercise you'll be one step ahead of the curve and on your way to loving CSS (or at the very least being friendly acquaintances with it). ## Desired Outcome - +![outcome](https://user-images.githubusercontent.com/70952936/131411210-47ff21dd-6d0c-4a7f-b6b1-1ec40f93dd8c.jpg) ### Self Check - Do all rules for elements labeled "Fix specificity" have the correct selector added or removed? -- Are all rules for elements labeled "Fix rule order" placed at the end of the CSS file and in the correct order? \ No newline at end of file +- Are all rules for elements labeled "Fix rule order" placed at the end of the CSS file and in the correct order?