diff --git a/.eslintrc.js b/.eslintrc.js new file mode 100644 index 000000000000..4e601ec76c23 --- /dev/null +++ b/.eslintrc.js @@ -0,0 +1,25 @@ +module.exports = { + "env": { + "browser": true, + "es2021": true + }, + "extends": "standard", + "overrides": [ + { + "env": { + "node": true + }, + "files": [ + ".eslintrc.{js,cjs}" + ], + "parserOptions": { + "sourceType": "script" + } + } + ], + "parserOptions": { + "ecmaVersion": "latest" + }, + "rules": { + } +} diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md index 807fd83e50ff..88e8941dedc3 100644 --- a/.github/ISSUE_TEMPLATE/bug_report.md +++ b/.github/ISSUE_TEMPLATE/bug_report.md @@ -9,7 +9,7 @@ assignees: "" Complete the following REQUIRED checkboxes: -- [ ] I have thoroughly read and understand [The Odin Project Contributing Guide](https://github.com/TheOdinProject/theodinproject/blob/main/CONTRIBUTING.md) +- [ ] I have thoroughly read and understand [The Odin Project Contributing Guide](https://github.com/TheOdinProject/.github/blob/main/CONTRIBUTING.md) - [ ] The title of this issue follows the `Bug - location of bug: brief description of bug` format, e.g. `Bug - Grid exercises: CSS not properly linked to HTML files` The following checkbox is OPTIONAL: diff --git a/.github/ISSUE_TEMPLATE/feature_request.md b/.github/ISSUE_TEMPLATE/feature_request.md index 3e1c93c6a075..cc9be57b35fe 100644 --- a/.github/ISSUE_TEMPLATE/feature_request.md +++ b/.github/ISSUE_TEMPLATE/feature_request.md @@ -9,7 +9,7 @@ assignees: "" Complete the following REQUIRED checkboxes: -- [ ] I have thoroughly read and understand [The Odin Project Contributing Guide](https://github.com/TheOdinProject/theodinproject/blob/main/CONTRIBUTING.md) +- [ ] I have thoroughly read and understand [The Odin Project Contributing Guide](https://github.com/TheOdinProject/.github/blob/main/CONTRIBUTING.md) - [ ] The title of this issue follows the `location for request: brief description of request` format, e.g. `Foundations exercises: Add exercise for XYZ` The following checkbox is OPTIONAL: @@ -19,8 +19,8 @@ The following checkbox is OPTIONAL:
**1. Description of the Feature Request:** - diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md index 03cf1baeaca9..1edf6010f7e4 100644 --- a/.github/PULL_REQUEST_TEMPLATE.md +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -24,7 +24,7 @@ Closes #XXXXX ## Pull Request Requirements -- [ ] I have thoroughly read and understand [The Odin Project Contributing Guide](https://github.com/TheOdinProject/theodinproject/blob/main/CONTRIBUTING.md) +- [ ] I have thoroughly read and understand [The Odin Project Contributing Guide](https://github.com/TheOdinProject/.github/blob/main/CONTRIBUTING.md) - [ ] The title of this PR follows the `location of change: brief description of change` format, e.g. `01-flex-center: Update self check` - [ ] The `Because` section summarizes the reason for this PR - [ ] The `This PR` section has a bullet point list describing the changes in this PR diff --git a/LICENSE b/LICENSE new file mode 100644 index 000000000000..9110b1664827 --- /dev/null +++ b/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2023 The Odin Project + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/README.md b/README.md index e6e063255d61..8745b868a613 100644 --- a/README.md +++ b/README.md @@ -1,29 +1,34 @@ # CSS Exercises -These exercises are a series of CSS related tasks intended to complement the HTML and CSS content on The Odin Project (TOP). They should only be done when instructed during the course of the curriculum. +These exercises consist of a series of CSS-related tasks intended to complement the HTML and CSS content on The Odin Project (TOP). They should only be completed when instructed during the course of the curriculum. -When doing these exercises, please use all the documentation and resources you need to accomplish them. You are _not_ intended to have any of this stuff memorized at this point. Check the docs, use Google, do what you need to do (besides checking the solutions) to get them done. +When doing these exercises, please use all documentation and resources you need to accomplish them. You are _not_ intended to have any of this stuff memorized at this point. Check the docs, use Google, and do what you need to do (besides checking the solutions) to get them done. + +> [!IMPORTANT] +> We encourage you to practice your git skills by committing your changes and pushing them to your own fork. However, please **DO NOT** open a Pull Request to have your solutions merged into this repo or to show your solution. If we were to merge your changes the exercises would no longer be available as intended for new learners, and opening a PR only causes additional work for us, as we have to close it without merging. ## Contributing -If you have a suggestion to improve an exercise, an idea for a new exercise, or notice an issue with an exercise, please feel free to open an issue after thoroughly reading our [contributing guide](https://github.com/TheOdinProject/theodinproject/blob/main/CONTRIBUTING.md) in our main TOP repo. +If you have suggestions to improve an exercise, ideas for a new exercise, or notice an issue with an exercise, please feel free to open an issue after thoroughly reading our [contributing guide](https://github.com/TheOdinProject/.github/blob/main/CONTRIBUTING.md). + +## How To Use These Exercises -## How To Use These Exercises +1. Fork and clone this repository. To learn how to fork a repository, see the GitHub documentation on how to [fork a repo](https://docs.github.com/en/get-started/quickstart/fork-a-repo). + - Copies of repositories on your machine are called clones. If you need help cloning to your local environment, you can learn how from the GitHub documentation on [cloning a repository](https://docs.github.com/en/github/creating-cloning-and-archiving-repositories/cloning-a-repository-from-github/cloning-a-repository). +1. Go to an exercise directory and open the HTML file in a web browser. You can open the file directly or use something like VSCode's Live Server extension. +1. For each exercise, read the README thoroughly before starting any work. + - Each README has a "Self Check" list. Use this to ensure you haven't missed any important details in your implementation. +1. Make your edits in the `index.html` and/or the `style.css` files in order to make the output in your browser look like the Desired Outcome image(s). + - Depending on the instructions of the exercise, you may only need to make edits in one of these files. +1. Once you successfully finish an exercise, check TOP's solution to compare it with yours. + - You should not be checking the solution for an exercise until you finish it! + - If your solution differs wildly from TOP's solution (and still passes the exercise's requirements), that's completely fine. Do feel free to ask about it in our Discord if there are parts you do not understand. -1. Fork and clone this repository. To learn how to fork a repository, see the GitHub documentation on how to [fork a repo](https://docs.github.com/en/get-started/quickstart/fork-a-repo). - * Copies of repositories on your machine are called clones. If you need help cloning to your local environment you can learn how from the GitHub documentation on [cloning a repository](https://docs.github.com/en/github/creating-cloning-and-archiving-repositories/cloning-a-repository-from-github/cloning-a-repository). -2. Go to an exercise directory and open the HTML file in your browser. You can either open the file directly, or use something like VSCode's Live Server extension. -3. For each exercise, read the README thoroughly before starting any work. - * Each README has a "Self Check" list. Use this to make sure you haven't missed any important details in your implementation. -4. Make your edits in the `index.html` and/or the `style.css` files in order to make the output in your browser look like the Desired Outcome image(s). - * Depending on the instructions of the exercise, you may only need to make edits in one of these files. -5. Once you successfully finish an exercise, check TOP's solution to compare it with yours. - * You should not be checking the solution for an exercise until you finish it! - * Keep in mind that TOP's solution is not the only solution. If your solution differs wildly from TOP's solution (and still passes the self-check criteria), feel free to ask about it in the chatroom. -6. Do not submit your solutions to this repo, as any PRs that do so will be closed without merging. +> [!IMPORTANT] +> Do not submit your solutions to this repo, as any PRs that do so will be closed without merging. ## Some Hints -- The official solutions put all changes at the _end_ of the CSS file, which may duplicate some selectors (e.g. there might be a `body {}` in the given CSS, and another `body {}` in the solution). When you are working on an exercise, it is best practice to add your CSS to existing selectors instead of duplicating them at the end of the file. We're sacrificing this best practice in our official solutions to make it extra clear to you what things we changed to solve 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`, or that the margin is _exactly_ `42px`. -- You may need to add some elements to your HTML to get things into the right spot. (For the first few exercises we make it explicit when this needs to happen.) -- You may need to add more selectors to your CSS file. The first few exercises have almost everything already done for you, but as you progress you'll find that you need to add more and more to get the correct result. +- The official solutions put all changes at the _end_ of the CSS file, which may duplicate some selectors (e.g. there might be a `body {}` in the given CSS and another `body {}` in the solution). When you are working on an exercise, it is best practice to add your CSS to existing selectors instead of duplicating them at the end of the file. We're sacrificing this best practice in our official solutions to make it extra clear to you what things we changed to solve 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` or that the margin is _exactly_ `42px`. +- You may need to add some elements to your HTML to get things into the right spot. (For the first few exercises, we make it explicit when this needs to happen.) +- You may need to add more selectors to your CSS file. The first few exercises have almost everything already done for you, but as you progress, you'll find that you need to add more and more selectors to get the correct result. diff --git a/animation/01-button-hover/README.md b/advanced-html-css/animation/01-button-hover/README.md similarity index 100% rename from animation/01-button-hover/README.md rename to advanced-html-css/animation/01-button-hover/README.md diff --git a/animation/01-button-hover/desired-outcome.gif b/advanced-html-css/animation/01-button-hover/desired-outcome.gif similarity index 100% rename from animation/01-button-hover/desired-outcome.gif rename to advanced-html-css/animation/01-button-hover/desired-outcome.gif diff --git a/animation/01-button-hover/index.html b/advanced-html-css/animation/01-button-hover/index.html similarity index 100% rename from animation/01-button-hover/index.html rename to advanced-html-css/animation/01-button-hover/index.html diff --git a/animation/01-button-hover/solution/solution.css b/advanced-html-css/animation/01-button-hover/solution/solution.css similarity index 100% rename from animation/01-button-hover/solution/solution.css rename to advanced-html-css/animation/01-button-hover/solution/solution.css diff --git a/animation/01-button-hover/solution/solution.html b/advanced-html-css/animation/01-button-hover/solution/solution.html similarity index 100% rename from animation/01-button-hover/solution/solution.html rename to advanced-html-css/animation/01-button-hover/solution/solution.html diff --git a/animation/01-button-hover/style.css b/advanced-html-css/animation/01-button-hover/style.css similarity index 100% rename from animation/01-button-hover/style.css rename to advanced-html-css/animation/01-button-hover/style.css diff --git a/animation/02-pop-up/README.md b/advanced-html-css/animation/02-pop-up/README.md similarity index 100% rename from animation/02-pop-up/README.md rename to advanced-html-css/animation/02-pop-up/README.md diff --git a/animation/02-pop-up/desired-outcome.gif b/advanced-html-css/animation/02-pop-up/desired-outcome.gif similarity index 100% rename from animation/02-pop-up/desired-outcome.gif rename to advanced-html-css/animation/02-pop-up/desired-outcome.gif diff --git a/animation/02-pop-up/index.html b/advanced-html-css/animation/02-pop-up/index.html similarity index 100% rename from animation/02-pop-up/index.html rename to advanced-html-css/animation/02-pop-up/index.html diff --git a/animation/02-pop-up/script.js b/advanced-html-css/animation/02-pop-up/script.js similarity index 67% rename from animation/02-pop-up/script.js rename to advanced-html-css/animation/02-pop-up/script.js index 4f7c25cb0fc9..ae59fb52e6a7 100644 --- a/animation/02-pop-up/script.js +++ b/advanced-html-css/animation/02-pop-up/script.js @@ -1,13 +1,12 @@ const openButton = document.getElementById('trigger-modal'); const closeButton = document.getElementById('close-modal'); -const backdrop = document.getElementById('backdrop') function toggleModal() { const modalDiv = document.querySelector('.popup-modal'); - const backdrop = document.querySelector('.backdrop') + const backdrop = document.querySelector('.backdrop'); modalDiv.classList.toggle('show'); backdrop.classList.toggle('show'); } openButton.addEventListener('click', toggleModal); -closeButton.addEventListener('click', toggleModal); +closeButton.addEventListener('click', toggleModal); \ No newline at end of file diff --git a/animation/02-pop-up/solution/solution.css b/advanced-html-css/animation/02-pop-up/solution/solution.css similarity index 92% rename from animation/02-pop-up/solution/solution.css rename to advanced-html-css/animation/02-pop-up/solution/solution.css index 5182e96f3e99..a1923d9cbb35 100644 --- a/animation/02-pop-up/solution/solution.css +++ b/advanced-html-css/animation/02-pop-up/solution/solution.css @@ -40,8 +40,9 @@ button { opacity: 0%; text-align: center; } + .popup-modal p { - margin-bottom: 24px + margin-bottom: 24px; } .backdrop { @@ -64,12 +65,10 @@ button { /* SOLUTION */ .popup-modal { - transition: transform .3s ease-in-out, opacity .4s ease; + transition: transform 0.3s ease-in-out, opacity 0.4s ease; transform: translate(-50%, -100%); } .popup-modal.show { transform: translate(-50%, -50%); } - - diff --git a/animation/02-pop-up/solution/solution.html b/advanced-html-css/animation/02-pop-up/solution/solution.html similarity index 100% rename from animation/02-pop-up/solution/solution.html rename to advanced-html-css/animation/02-pop-up/solution/solution.html diff --git a/animation/02-pop-up/solution/solution.js b/advanced-html-css/animation/02-pop-up/solution/solution.js similarity index 89% rename from animation/02-pop-up/solution/solution.js rename to advanced-html-css/animation/02-pop-up/solution/solution.js index 4f7c25cb0fc9..0e139a5e7ae6 100644 --- a/animation/02-pop-up/solution/solution.js +++ b/advanced-html-css/animation/02-pop-up/solution/solution.js @@ -1,6 +1,5 @@ const openButton = document.getElementById('trigger-modal'); const closeButton = document.getElementById('close-modal'); -const backdrop = document.getElementById('backdrop') function toggleModal() { const modalDiv = document.querySelector('.popup-modal'); diff --git a/animation/02-pop-up/style.css b/advanced-html-css/animation/02-pop-up/style.css similarity index 97% rename from animation/02-pop-up/style.css rename to advanced-html-css/animation/02-pop-up/style.css index 058533f12bf7..093a97e566b3 100644 --- a/animation/02-pop-up/style.css +++ b/advanced-html-css/animation/02-pop-up/style.css @@ -40,8 +40,9 @@ button { opacity: 0%; text-align: center; } + .popup-modal p { - margin-bottom: 24px + margin-bottom: 24px; } .backdrop { @@ -60,4 +61,3 @@ button { .backdrop.show { opacity: 30%; } - diff --git a/advanced-html-css/animation/03-dropdown-menu/README.md b/advanced-html-css/animation/03-dropdown-menu/README.md new file mode 100644 index 000000000000..0d12b6ac8467 --- /dev/null +++ b/advanced-html-css/animation/03-dropdown-menu/README.md @@ -0,0 +1,18 @@ +# Dropdown Menu + +We've set up a dropdown menu in this exercise. Load up the page, you can see a single menu title, with a dropdown menu that will open upon clicking on the title. + +Your task is to add animation to the dropdown menu so that it will have an effect of expanding. Check out the desired outcome below, and notice the _bounce_ illusion when the dropdown expands close to its final end state. + +### Hints +- You need to specify a _transform-origin_ property to make the dropdown menu start transforming from the top +- You need to add an intermediate step to the keyframe at rule to implement the _bounce_ illusion. + +## Desired Outcome + +![outcome](./desired-outcome.gif) + +### 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 diff --git a/advanced-html-css/animation/03-dropdown-menu/desired-outcome.gif b/advanced-html-css/animation/03-dropdown-menu/desired-outcome.gif new file mode 100644 index 000000000000..282e7a4576ad Binary files /dev/null and b/advanced-html-css/animation/03-dropdown-menu/desired-outcome.gif differ diff --git a/advanced-html-css/animation/03-dropdown-menu/index.html b/advanced-html-css/animation/03-dropdown-menu/index.html new file mode 100644 index 000000000000..c08e141d7c86 --- /dev/null +++ b/advanced-html-css/animation/03-dropdown-menu/index.html @@ -0,0 +1,23 @@ + + + + + + + Dropdown Menu + + + +
+
MENU
+ +
+ + + diff --git a/advanced-html-css/animation/03-dropdown-menu/script.js b/advanced-html-css/animation/03-dropdown-menu/script.js new file mode 100644 index 000000000000..a6aea30f023a --- /dev/null +++ b/advanced-html-css/animation/03-dropdown-menu/script.js @@ -0,0 +1,15 @@ +const dropdownContainer = document.querySelector(".dropdown-container"); +const menuTitle = document.querySelector(".menu-title"); +const dropdownMenu = document.querySelector(".dropdown-menu"); + +menuTitle.addEventListener("click", (e) => { + if (e.target === e.currentTarget) { + dropdownMenu.classList.toggle("visible"); + } +}) + +window.addEventListener("click", (e) => { + if (!dropdownContainer.contains(e.target)) { + dropdownMenu.classList.remove("visible") + } +}) \ No newline at end of file diff --git a/advanced-html-css/animation/03-dropdown-menu/solution/solution.css b/advanced-html-css/animation/03-dropdown-menu/solution/solution.css new file mode 100644 index 000000000000..5c12c216ef14 --- /dev/null +++ b/advanced-html-css/animation/03-dropdown-menu/solution/solution.css @@ -0,0 +1,52 @@ +.dropdown-container { + max-width: 250px; + margin: 40px auto; + text-align: center; + line-height: 50px; + font-size: 15px; + color: rgb(247, 247, 247); + cursor: pointer; +} + +.menu-title { + background-color: rgb(163, 162, 162); +} + +.dropdown-menu { + list-style: none; + padding: 0; + margin: 0; + background-color: rgb(99, 97, 97); + + display: none; +} + +ul.dropdown-menu li:hover { + background: rgb(47, 46, 46); +} + +.visible { + display: block; +} + +/* SOLUTION */ + +.visible { + animation: expand 500ms ease-in-out; + transform-origin: top; +} + +@keyframes expand { + 0% { + transform: scaleY(0); + } + + 70% { + transform: scaleY(1.1); + } + + 100% { + transform: scaleY(1); + } +} + diff --git a/advanced-html-css/animation/03-dropdown-menu/solution/solution.html b/advanced-html-css/animation/03-dropdown-menu/solution/solution.html new file mode 100644 index 000000000000..482777709978 --- /dev/null +++ b/advanced-html-css/animation/03-dropdown-menu/solution/solution.html @@ -0,0 +1,23 @@ + + + + + + + Dropdown Menu + + + +
+
MENU
+ +
+ + + diff --git a/advanced-html-css/animation/03-dropdown-menu/solution/solution.js b/advanced-html-css/animation/03-dropdown-menu/solution/solution.js new file mode 100644 index 000000000000..a6aea30f023a --- /dev/null +++ b/advanced-html-css/animation/03-dropdown-menu/solution/solution.js @@ -0,0 +1,15 @@ +const dropdownContainer = document.querySelector(".dropdown-container"); +const menuTitle = document.querySelector(".menu-title"); +const dropdownMenu = document.querySelector(".dropdown-menu"); + +menuTitle.addEventListener("click", (e) => { + if (e.target === e.currentTarget) { + dropdownMenu.classList.toggle("visible"); + } +}) + +window.addEventListener("click", (e) => { + if (!dropdownContainer.contains(e.target)) { + dropdownMenu.classList.remove("visible") + } +}) \ No newline at end of file diff --git a/advanced-html-css/animation/03-dropdown-menu/style.css b/advanced-html-css/animation/03-dropdown-menu/style.css new file mode 100644 index 000000000000..9f47d7754225 --- /dev/null +++ b/advanced-html-css/animation/03-dropdown-menu/style.css @@ -0,0 +1,32 @@ +.dropdown-container { + max-width: 250px; + margin: 40px auto; + text-align: center; + line-height: 50px; + font-size: 15px; + color: rgb(247, 247, 247); + cursor: pointer; +} + +.menu-title { + background-color: rgb(163, 162, 162); +} + +.dropdown-menu { + list-style: none; + padding: 0; + margin: 0; + background-color: rgb(99, 97, 97); + + display: none; +} + +ul.dropdown-menu li:hover { + background: rgb(47, 46, 46); +} + +.visible { + display: block; +} + + diff --git a/flex/06-flex-layout/desired-outcome.png b/flex/06-flex-layout/desired-outcome.png deleted file mode 100644 index 4d7fd35894ab..000000000000 Binary files a/flex/06-flex-layout/desired-outcome.png and /dev/null differ diff --git a/foundations/02-class-id-selectors/desired-outcome.png b/foundations/02-class-id-selectors/desired-outcome.png deleted file mode 100644 index cb4670df8e2d..000000000000 Binary files a/foundations/02-class-id-selectors/desired-outcome.png and /dev/null differ diff --git a/foundations/03-grouping-selectors/README.md b/foundations/03-grouping-selectors/README.md deleted file mode 100644 index 8b5d20634c24..000000000000 --- a/foundations/03-grouping-selectors/README.md +++ /dev/null @@ -1,20 +0,0 @@ -# Grouping Selectors - -Let's build a little off the previous exercise, in which you (hopefully) added multiple classes to a single element in order to apply two different rules to it. - -Instead of having a single element with two different rules applied, though, you're instead going to give two elements each a unique class name, then add rules for styles that both elements share as well as their own unique styles. Make sure you take a good look at the outcome image below to see exactly what is unique about each element, and what both elements have in common. - -This will help you further practice adding classes and using class selectors, so be sure you add the class attribute in the HTML file. For the remainder of these exercises, the format of any colors is entirely up to you; we trust you'll practice using the different values! The properties you need to add to each element are: - -* **The first element**: a black background and white text -* **The second element**: a yellow background -* **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 -![desired outcome](./desired-outcome.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? diff --git a/foundations/03-grouping-selectors/desired-outcome.png b/foundations/03-grouping-selectors/desired-outcome.png deleted file mode 100644 index 3f3942317669..000000000000 Binary files a/foundations/03-grouping-selectors/desired-outcome.png and /dev/null differ diff --git a/foundations/04-chaining-selectors/index.html b/foundations/04-chaining-selectors/index.html deleted file mode 100644 index 31061010069a..000000000000 --- a/foundations/04-chaining-selectors/index.html +++ /dev/null @@ -1,22 +0,0 @@ - - - - - - - Chaining Selectors - - - - -
- Woman with glasses - Man with surprised expression -
- -
- Woman with glasses - Man with surprised expression -
- - \ No newline at end of file diff --git a/foundations/04-chaining-selectors/solution/solution.html b/foundations/04-chaining-selectors/solution/solution.html deleted file mode 100644 index ae43339499b6..000000000000 --- a/foundations/04-chaining-selectors/solution/solution.html +++ /dev/null @@ -1,20 +0,0 @@ - - - - - - - Chaining Selectors - - - -
- Woman with glasses - Man with surprised expression -
-
- Woman with glasses - Man with surprised expression -
- - \ No newline at end of file diff --git a/foundations/05-descendant-combinator/desired-outcome.png b/foundations/05-descendant-combinator/desired-outcome.png deleted file mode 100644 index f71c7f97a6bf..000000000000 Binary files a/foundations/05-descendant-combinator/desired-outcome.png and /dev/null differ diff --git a/foundations/05-descendant-combinator/style.css b/foundations/05-descendant-combinator/style.css deleted file mode 100644 index e69de29bb2d1..000000000000 diff --git a/margin-and-padding/01-margin-and-padding-1/README.md b/foundations/block-and-inline/01-margin-and-padding-1/README.md similarity index 100% rename from margin-and-padding/01-margin-and-padding-1/README.md rename to foundations/block-and-inline/01-margin-and-padding-1/README.md diff --git a/margin-and-padding/01-margin-and-padding-1/desired-outcome.png b/foundations/block-and-inline/01-margin-and-padding-1/desired-outcome.png similarity index 100% rename from margin-and-padding/01-margin-and-padding-1/desired-outcome.png rename to foundations/block-and-inline/01-margin-and-padding-1/desired-outcome.png diff --git a/margin-and-padding/01-margin-and-padding-1/index.html b/foundations/block-and-inline/01-margin-and-padding-1/index.html similarity index 100% rename from margin-and-padding/01-margin-and-padding-1/index.html rename to foundations/block-and-inline/01-margin-and-padding-1/index.html diff --git a/margin-and-padding/01-margin-and-padding-1/solution/solution.css b/foundations/block-and-inline/01-margin-and-padding-1/solution/solution.css similarity index 100% rename from margin-and-padding/01-margin-and-padding-1/solution/solution.css rename to foundations/block-and-inline/01-margin-and-padding-1/solution/solution.css diff --git a/margin-and-padding/01-margin-and-padding-1/solution/solution.html b/foundations/block-and-inline/01-margin-and-padding-1/solution/solution.html similarity index 100% rename from margin-and-padding/01-margin-and-padding-1/solution/solution.html rename to foundations/block-and-inline/01-margin-and-padding-1/solution/solution.html diff --git a/margin-and-padding/01-margin-and-padding-1/style.css b/foundations/block-and-inline/01-margin-and-padding-1/style.css similarity index 100% rename from margin-and-padding/01-margin-and-padding-1/style.css rename to foundations/block-and-inline/01-margin-and-padding-1/style.css diff --git a/margin-and-padding/02-margin-and-padding-2/README.md b/foundations/block-and-inline/02-margin-and-padding-2/README.md similarity index 100% rename from margin-and-padding/02-margin-and-padding-2/README.md rename to foundations/block-and-inline/02-margin-and-padding-2/README.md diff --git a/foundations/block-and-inline/02-margin-and-padding-2/desired-outcome.png b/foundations/block-and-inline/02-margin-and-padding-2/desired-outcome.png new file mode 100644 index 000000000000..c1286b682a71 Binary files /dev/null and b/foundations/block-and-inline/02-margin-and-padding-2/desired-outcome.png differ diff --git a/margin-and-padding/02-margin-and-padding-2/index.html b/foundations/block-and-inline/02-margin-and-padding-2/index.html similarity index 100% rename from margin-and-padding/02-margin-and-padding-2/index.html rename to foundations/block-and-inline/02-margin-and-padding-2/index.html diff --git a/margin-and-padding/02-margin-and-padding-2/solution/solution.css b/foundations/block-and-inline/02-margin-and-padding-2/solution/solution.css similarity index 98% rename from margin-and-padding/02-margin-and-padding-2/solution/solution.css rename to foundations/block-and-inline/02-margin-and-padding-2/solution/solution.css index f4e3a33821b7..ca08aedf0f4a 100644 --- a/margin-and-padding/02-margin-and-padding-2/solution/solution.css +++ b/foundations/block-and-inline/02-margin-and-padding-2/solution/solution.css @@ -39,7 +39,6 @@ We separated it out here to make it extra clear what has changed. */ } .title { - margin-top: 0; margin-bottom: 8px; font-size: 16px; padding: 8px; diff --git a/margin-and-padding/02-margin-and-padding-2/solution/solution.html b/foundations/block-and-inline/02-margin-and-padding-2/solution/solution.html similarity index 100% rename from margin-and-padding/02-margin-and-padding-2/solution/solution.html rename to foundations/block-and-inline/02-margin-and-padding-2/solution/solution.html diff --git a/margin-and-padding/02-margin-and-padding-2/style.css b/foundations/block-and-inline/02-margin-and-padding-2/style.css similarity index 100% rename from margin-and-padding/02-margin-and-padding-2/style.css rename to foundations/block-and-inline/02-margin-and-padding-2/style.css diff --git a/foundations/06-cascade-fix/README.md b/foundations/cascade/01-cascade-fix/README.md similarity index 75% rename from foundations/06-cascade-fix/README.md rename to foundations/cascade/01-cascade-fix/README.md index a5e56ceecf62..5daa9a9298c8 100644 --- a/foundations/06-cascade-fix/README.md +++ b/foundations/cascade/01-cascade-fix/README.md @@ -1,17 +1,18 @@ # CSS Methods + This final exercise for CSS Foundations is going to give you a closer look at the cascade, in particular specificity and rule order. Both the HTML and CSS files are filled out for you, so instead of adding rules yourself, you will simply be editing what is provided. There are a few elements that have some sort of specificity or rule order issue in the provided CSS file. It's up to you to figure out what issue is affecting an element, and how to fix it. You can edit the CSS file by adding, removing, or editing selectors for a declaration block, or by moving declaration blocks around. **You should not edit the HTML file or any of the actual styles in the CSS**. -There are multiple ways to solve this exercise, and we did our best to include all of the possible solutions for each element. +There are multiple ways to solve this exercise, so we have provided some of the possible solutions for each element. Issues with the cascade can be the bane of their existence for many when it comes to CSS. While you won't become a cascade expert from this exercise alone, and there are other ways to deal with these issues, it is still super helpful to see how these issues affect our final styles and why it's important to order rules carefully. ## Desired Outcome + ![desired outcome](./desired-outcome.png) ### 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? - -_Note: for accessibility reasons, the style in this exercise has changed. For new and old students, we propose to carry out the exercise noting how important it is to pay attention to the accessibility of the web, and we encourage more and more practices like this._ diff --git a/foundations/06-cascade-fix/desired-outcome.png b/foundations/cascade/01-cascade-fix/desired-outcome.png similarity index 100% rename from foundations/06-cascade-fix/desired-outcome.png rename to foundations/cascade/01-cascade-fix/desired-outcome.png diff --git a/foundations/06-cascade-fix/index.html b/foundations/cascade/01-cascade-fix/index.html similarity index 100% rename from foundations/06-cascade-fix/index.html rename to foundations/cascade/01-cascade-fix/index.html diff --git a/foundations/06-cascade-fix/solution/solution.css b/foundations/cascade/01-cascade-fix/solution/solution.css similarity index 94% rename from foundations/06-cascade-fix/solution/solution.css rename to foundations/cascade/01-cascade-fix/solution/solution.css index a56cf5a23a06..8dfe5f7234a5 100644 --- a/foundations/06-cascade-fix/solution/solution.css +++ b/foundations/cascade/01-cascade-fix/solution/solution.css @@ -1,5 +1,5 @@ body{ - font-family:Arial, Helvetica, sans-serif + font-family:Arial, Helvetica, sans-serif; } .para, @@ -85,7 +85,7 @@ div.text { } Then we added another selector to create a descendant combinator. If we only created a descendant combinator, the specificity would be tied with the - div.text selector and it would come down to rule order, and if we only moved it the div.text selector would still have a higher specificity. + div.text selector and it would come down to rule order, and if we only moved it, the div.text selector would still have a higher specificity. Another solution would be to keep the rule where it was and just replace the div selector with the .text selector: diff --git a/foundations/06-cascade-fix/solution/solution.html b/foundations/cascade/01-cascade-fix/solution/solution.html similarity index 100% rename from foundations/06-cascade-fix/solution/solution.html rename to foundations/cascade/01-cascade-fix/solution/solution.html diff --git a/foundations/06-cascade-fix/style.css b/foundations/cascade/01-cascade-fix/style.css similarity index 90% rename from foundations/06-cascade-fix/style.css rename to foundations/cascade/01-cascade-fix/style.css index b5104293b105..daf07e0e8a47 100644 --- a/foundations/06-cascade-fix/style.css +++ b/foundations/cascade/01-cascade-fix/style.css @@ -1,5 +1,5 @@ -body{ - font-family:Arial, Helvetica, sans-serif +body { + font-family: Arial, Helvetica, sans-serif; } .para, diff --git a/flex/01-flex-center/README.md b/foundations/flex/01-flex-center/README.md similarity index 100% rename from flex/01-flex-center/README.md rename to foundations/flex/01-flex-center/README.md diff --git a/flex/01-flex-center/desired-outcome.png b/foundations/flex/01-flex-center/desired-outcome.png similarity index 100% rename from flex/01-flex-center/desired-outcome.png rename to foundations/flex/01-flex-center/desired-outcome.png diff --git a/flex/01-flex-center/index.html b/foundations/flex/01-flex-center/index.html similarity index 100% rename from flex/01-flex-center/index.html rename to foundations/flex/01-flex-center/index.html diff --git a/flex/01-flex-center/solution/solution.css b/foundations/flex/01-flex-center/solution/solution.css similarity index 100% rename from flex/01-flex-center/solution/solution.css rename to foundations/flex/01-flex-center/solution/solution.css diff --git a/flex/01-flex-center/solution/solution.html b/foundations/flex/01-flex-center/solution/solution.html similarity index 100% rename from flex/01-flex-center/solution/solution.html rename to foundations/flex/01-flex-center/solution/solution.html diff --git a/flex/01-flex-center/style.css b/foundations/flex/01-flex-center/style.css similarity index 100% rename from flex/01-flex-center/style.css rename to foundations/flex/01-flex-center/style.css diff --git a/flex/02-flex-header/README.md b/foundations/flex/02-flex-header/README.md similarity index 90% rename from flex/02-flex-header/README.md rename to foundations/flex/02-flex-header/README.md index c28e61d93a2b..fce7035581cb 100644 --- a/flex/02-flex-header/README.md +++ b/foundations/flex/02-flex-header/README.md @@ -15,4 +15,6 @@ wide: - 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. \ No newline at end of file +- 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 diff --git a/flex/02-flex-header/desired-outcome-narrow.png b/foundations/flex/02-flex-header/desired-outcome-narrow.png similarity index 100% rename from flex/02-flex-header/desired-outcome-narrow.png rename to foundations/flex/02-flex-header/desired-outcome-narrow.png diff --git a/flex/02-flex-header/desired-outcome-wide.png b/foundations/flex/02-flex-header/desired-outcome-wide.png similarity index 100% rename from flex/02-flex-header/desired-outcome-wide.png rename to foundations/flex/02-flex-header/desired-outcome-wide.png diff --git a/flex/02-flex-header/index.html b/foundations/flex/02-flex-header/index.html similarity index 100% rename from flex/02-flex-header/index.html rename to foundations/flex/02-flex-header/index.html diff --git a/flex/02-flex-header/solution/solution.css b/foundations/flex/02-flex-header/solution/solution.css similarity index 100% rename from flex/02-flex-header/solution/solution.css rename to foundations/flex/02-flex-header/solution/solution.css diff --git a/flex/02-flex-header/solution/solution.html b/foundations/flex/02-flex-header/solution/solution.html similarity index 100% rename from flex/02-flex-header/solution/solution.html rename to foundations/flex/02-flex-header/solution/solution.html diff --git a/flex/02-flex-header/style.css b/foundations/flex/02-flex-header/style.css similarity index 100% rename from flex/02-flex-header/style.css rename to foundations/flex/02-flex-header/style.css diff --git a/flex/03-flex-header-2/README.md b/foundations/flex/03-flex-header-2/README.md similarity index 100% rename from flex/03-flex-header-2/README.md rename to foundations/flex/03-flex-header-2/README.md diff --git a/flex/03-flex-header-2/desired-outcome.gif b/foundations/flex/03-flex-header-2/desired-outcome.gif similarity index 100% rename from flex/03-flex-header-2/desired-outcome.gif rename to foundations/flex/03-flex-header-2/desired-outcome.gif diff --git a/flex/03-flex-header-2/desired-outcome.png b/foundations/flex/03-flex-header-2/desired-outcome.png similarity index 100% rename from flex/03-flex-header-2/desired-outcome.png rename to foundations/flex/03-flex-header-2/desired-outcome.png diff --git a/flex/03-flex-header-2/index.html b/foundations/flex/03-flex-header-2/index.html similarity index 75% rename from flex/03-flex-header-2/index.html rename to foundations/flex/03-flex-header-2/index.html index fa39648cda18..21d56170b0b8 100644 --- a/flex/03-flex-header-2/index.html +++ b/foundations/flex/03-flex-header-2/index.html @@ -13,9 +13,9 @@ LOGO
Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur excepturi id soluta, numquam minima rerum doloremque eveniet aspernatur beatae commodi. Cupiditate recusandae ad repellendus quidem consectetur sequi amet aspernatur cumque!
diff --git a/flex/05-flex-modal/solution/solution.css b/foundations/flex/05-flex-modal/solution/solution.css similarity index 89% rename from flex/05-flex-modal/solution/solution.css rename to foundations/flex/05-flex-modal/solution/solution.css index d60d5eff683d..aa438da8d00a 100644 --- a/flex/05-flex-modal/solution/solution.css +++ b/foundations/flex/05-flex-modal/solution/solution.css @@ -46,9 +46,12 @@ body { display: flex; align-items: center; justify-content: center; + border: 1px solid #eee; + padding: 0; } button { + cursor: pointer; padding: 8px 16px; border-radius: 8px; } @@ -77,7 +80,7 @@ button.cancel { /* this keeps the icon from getting smashed by the text */ flex-shrink: 0; } - +/* header container should be wrapped around the button element as well in order for flex style to work */ .header { display: flex; align-items: center; diff --git a/flex/05-flex-modal/solution/solution.html b/foundations/flex/05-flex-modal/solution/solution.html similarity index 83% rename from flex/05-flex-modal/solution/solution.html rename to foundations/flex/05-flex-modal/solution/solution.html index 818e5f393cb0..09385bfe3021 100644 --- a/flex/05-flex-modal/solution/solution.html +++ b/foundations/flex/05-flex-modal/solution/solution.html @@ -10,9 +10,11 @@
!
+
+
Are you sure you want to do that? -
✖
+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur excepturi id soluta, numquam minima rerum doloremque eveniet aspernatur beatae commodi. Cupiditate recusandae ad repellendus quidem consectetur sequi amet aspernatur cumque!
diff --git a/flex/05-flex-modal/style.css b/foundations/flex/05-flex-modal/style.css similarity index 94% rename from flex/05-flex-modal/style.css rename to foundations/flex/05-flex-modal/style.css index 58fda8bfa33a..780b355ef3de 100644 --- a/flex/05-flex-modal/style.css +++ b/foundations/flex/05-flex-modal/style.css @@ -46,9 +46,12 @@ body { display: flex; align-items: center; justify-content: center; + border: 1px solid #eee; + padding: 0; } button { + cursor: pointer; padding: 8px 16px; border-radius: 8px; } diff --git a/flex/06-flex-layout/README.md b/foundations/flex/06-flex-layout/README.md similarity index 100% rename from flex/06-flex-layout/README.md rename to foundations/flex/06-flex-layout/README.md diff --git a/foundations/flex/06-flex-layout/desired-outcome.png b/foundations/flex/06-flex-layout/desired-outcome.png new file mode 100644 index 000000000000..d511a2b456fd Binary files /dev/null and b/foundations/flex/06-flex-layout/desired-outcome.png differ diff --git a/flex/06-flex-layout/index.html b/foundations/flex/06-flex-layout/index.html similarity index 100% rename from flex/06-flex-layout/index.html rename to foundations/flex/06-flex-layout/index.html diff --git a/flex/06-flex-layout/logo.png b/foundations/flex/06-flex-layout/logo.png similarity index 100% rename from flex/06-flex-layout/logo.png rename to foundations/flex/06-flex-layout/logo.png diff --git a/flex/06-flex-layout/solution/logo.png b/foundations/flex/06-flex-layout/solution/logo.png similarity index 100% rename from flex/06-flex-layout/solution/logo.png rename to foundations/flex/06-flex-layout/solution/logo.png diff --git a/flex/06-flex-layout/solution/solution.css b/foundations/flex/06-flex-layout/solution/solution.css similarity index 97% rename from flex/06-flex-layout/solution/solution.css rename to foundations/flex/06-flex-layout/solution/solution.css index 4969e8364cdd..d628095173cd 100644 --- a/flex/06-flex-layout/solution/solution.css +++ b/foundations/flex/06-flex-layout/solution/solution.css @@ -23,7 +23,6 @@ input { border-radius: 16px; padding: 8px 24px; width: 400px; - margin-bottom: 16px; } /* SOLUTION */ @@ -43,6 +42,7 @@ button { align-items: center; justify-content: center; flex-direction: column; + gap: 16px; } a { diff --git a/flex/06-flex-layout/solution/solution.html b/foundations/flex/06-flex-layout/solution/solution.html similarity index 100% rename from flex/06-flex-layout/solution/solution.html rename to foundations/flex/06-flex-layout/solution/solution.html diff --git a/flex/06-flex-layout/style.css b/foundations/flex/06-flex-layout/style.css similarity index 94% rename from flex/06-flex-layout/style.css rename to foundations/flex/06-flex-layout/style.css index 743aa09f4ca1..3777aef335f0 100644 --- a/flex/06-flex-layout/style.css +++ b/foundations/flex/06-flex-layout/style.css @@ -23,5 +23,4 @@ input { border-radius: 16px; padding: 8px 24px; width: 400px; - margin-bottom: 16px; } diff --git a/flex/07-flex-layout-2/README.md b/foundations/flex/07-flex-layout-2/README.md similarity index 86% rename from flex/07-flex-layout-2/README.md rename to foundations/flex/07-flex-layout-2/README.md index 30a834625b5a..bde265c234c6 100644 --- a/flex/07-flex-layout-2/README.md +++ b/foundations/flex/07-flex-layout-2/README.md @@ -20,6 +20,8 @@ On a smaller screen it will look like this: ![smaller](./desired-outcome-smaller.png) +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. @@ -29,5 +31,5 @@ On a smaller screen it will look like this: - 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 32px padding around the 'cards' section. +- 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/flex/07-flex-layout-2/desired-outcome-smaller.png b/foundations/flex/07-flex-layout-2/desired-outcome-smaller.png similarity index 100% rename from flex/07-flex-layout-2/desired-outcome-smaller.png rename to foundations/flex/07-flex-layout-2/desired-outcome-smaller.png diff --git a/flex/07-flex-layout-2/desired-outcome.png b/foundations/flex/07-flex-layout-2/desired-outcome.png similarity index 100% rename from flex/07-flex-layout-2/desired-outcome.png rename to foundations/flex/07-flex-layout-2/desired-outcome.png diff --git a/flex/07-flex-layout-2/index.html b/foundations/flex/07-flex-layout-2/index.html similarity index 100% rename from flex/07-flex-layout-2/index.html rename to foundations/flex/07-flex-layout-2/index.html diff --git a/flex/07-flex-layout-2/solution/solution.css b/foundations/flex/07-flex-layout-2/solution/solution.css similarity index 97% rename from flex/07-flex-layout-2/solution/solution.css rename to foundations/flex/07-flex-layout-2/solution/solution.css index 6355f53a4adf..f7dc683d5475 100644 --- a/flex/07-flex-layout-2/solution/solution.css +++ b/foundations/flex/07-flex-layout-2/solution/solution.css @@ -70,14 +70,14 @@ a { } .container { - padding: 32px; + padding: 48px; display: flex; flex-wrap: wrap; + gap: 32px; } .card { padding: 16px; - margin: 16px; width: 300px; } diff --git a/flex/07-flex-layout-2/solution/solution.html b/foundations/flex/07-flex-layout-2/solution/solution.html similarity index 100% rename from flex/07-flex-layout-2/solution/solution.html rename to foundations/flex/07-flex-layout-2/solution/solution.html diff --git a/flex/07-flex-layout-2/style.css b/foundations/flex/07-flex-layout-2/style.css similarity index 100% rename from flex/07-flex-layout-2/style.css rename to foundations/flex/07-flex-layout-2/style.css diff --git a/foundations/01-css-methods/README.md b/foundations/intro-to-css/01-css-methods/README.md similarity index 99% rename from foundations/01-css-methods/README.md rename to foundations/intro-to-css/01-css-methods/README.md index 8763459e36b5..9059c6dc7c02 100644 --- a/foundations/01-css-methods/README.md +++ b/foundations/intro-to-css/01-css-methods/README.md @@ -3,7 +3,7 @@ In this exercise, you're going to practice adding CSS to an HTML file using all There are three elements for you to add styles to, each of which uses a different method of adding CSS to it, as noted in the outcome image below. All other exercises in this section will have a CSS file provided and linked for you, but for this exercise you will have to create the file and link it in the HTML file yourself. This is all about practicing using these different methods and getting the syntax right. -> ## quick tip: +> ## Quick tip: > Do not worry about details in these exercises that are not specifically mentioned in the exercise or self check section. Because the desired outcomes are screenshots, your browser may show a different font, the colors may appear different on your machine, or the spacing between elements may look different. Only concern yourself with the specific items you are supposed to be learning for each exercise. The properties you need to add to each element are: diff --git a/foundations/01-css-methods/desired-outcome.png b/foundations/intro-to-css/01-css-methods/desired-outcome.png similarity index 100% rename from foundations/01-css-methods/desired-outcome.png rename to foundations/intro-to-css/01-css-methods/desired-outcome.png diff --git a/foundations/01-css-methods/index.html b/foundations/intro-to-css/01-css-methods/index.html similarity index 100% rename from foundations/01-css-methods/index.html rename to foundations/intro-to-css/01-css-methods/index.html diff --git a/foundations/01-css-methods/solution/solution.css b/foundations/intro-to-css/01-css-methods/solution/solution.css similarity index 100% rename from foundations/01-css-methods/solution/solution.css rename to foundations/intro-to-css/01-css-methods/solution/solution.css diff --git a/foundations/01-css-methods/solution/solution.html b/foundations/intro-to-css/01-css-methods/solution/solution.html similarity index 100% rename from foundations/01-css-methods/solution/solution.html rename to foundations/intro-to-css/01-css-methods/solution/solution.html diff --git a/foundations/02-class-id-selectors/README.md b/foundations/intro-to-css/02-class-id-selectors/README.md similarity index 100% rename from foundations/02-class-id-selectors/README.md rename to foundations/intro-to-css/02-class-id-selectors/README.md diff --git a/foundations/intro-to-css/02-class-id-selectors/desired-outcome.png b/foundations/intro-to-css/02-class-id-selectors/desired-outcome.png new file mode 100644 index 000000000000..bc664ae7933c Binary files /dev/null and b/foundations/intro-to-css/02-class-id-selectors/desired-outcome.png differ diff --git a/foundations/02-class-id-selectors/index.html b/foundations/intro-to-css/02-class-id-selectors/index.html similarity index 100% rename from foundations/02-class-id-selectors/index.html rename to foundations/intro-to-css/02-class-id-selectors/index.html diff --git a/foundations/02-class-id-selectors/solution/solution.css b/foundations/intro-to-css/02-class-id-selectors/solution/solution.css similarity index 100% rename from foundations/02-class-id-selectors/solution/solution.css rename to foundations/intro-to-css/02-class-id-selectors/solution/solution.css diff --git a/foundations/02-class-id-selectors/solution/solution.html b/foundations/intro-to-css/02-class-id-selectors/solution/solution.html similarity index 100% rename from foundations/02-class-id-selectors/solution/solution.html rename to foundations/intro-to-css/02-class-id-selectors/solution/solution.html diff --git a/foundations/02-class-id-selectors/style.css b/foundations/intro-to-css/02-class-id-selectors/style.css similarity index 100% rename from foundations/02-class-id-selectors/style.css rename to foundations/intro-to-css/02-class-id-selectors/style.css diff --git a/foundations/intro-to-css/03-grouping-selectors/README.md b/foundations/intro-to-css/03-grouping-selectors/README.md new file mode 100644 index 000000000000..cd214616f7ef --- /dev/null +++ b/foundations/intro-to-css/03-grouping-selectors/README.md @@ -0,0 +1,19 @@ +# Grouping Selectors + +Let's build a little off the previous exercise. Here, you're going to give two elements each a unique class name, then add rules for styles that both elements share as well as their own unique styles. Make sure you take a good look at the outcome image below to see exactly what is unique about each element, and what both elements have in common. + +This will help you further practice adding classes and using class selectors, so be sure you add the class attribute in the HTML file. For the remainder of these exercises, the format of any colors is entirely up to you; we trust you'll practice using the different values! The properties you need to add to each element are: + +- **The first element**: a black background and white text +- **The second element**: a yellow background +- **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 + +![desired outcome](./desired-outcome.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? diff --git a/foundations/intro-to-css/03-grouping-selectors/desired-outcome.png b/foundations/intro-to-css/03-grouping-selectors/desired-outcome.png new file mode 100644 index 000000000000..d2cf644a4402 Binary files /dev/null and b/foundations/intro-to-css/03-grouping-selectors/desired-outcome.png differ diff --git a/foundations/03-grouping-selectors/index.html b/foundations/intro-to-css/03-grouping-selectors/index.html similarity index 100% rename from foundations/03-grouping-selectors/index.html rename to foundations/intro-to-css/03-grouping-selectors/index.html diff --git a/foundations/03-grouping-selectors/solution/solution.css b/foundations/intro-to-css/03-grouping-selectors/solution/solution.css similarity index 98% rename from foundations/03-grouping-selectors/solution/solution.css rename to foundations/intro-to-css/03-grouping-selectors/solution/solution.css index 16e676098444..c4b3e3a899df 100644 --- a/foundations/03-grouping-selectors/solution/solution.css +++ b/foundations/intro-to-css/03-grouping-selectors/solution/solution.css @@ -11,4 +11,4 @@ .fancy { background-color: yellow; -} \ No newline at end of file +} diff --git a/foundations/03-grouping-selectors/solution/solution.html b/foundations/intro-to-css/03-grouping-selectors/solution/solution.html similarity index 100% rename from foundations/03-grouping-selectors/solution/solution.html rename to foundations/intro-to-css/03-grouping-selectors/solution/solution.html diff --git a/foundations/03-grouping-selectors/style.css b/foundations/intro-to-css/03-grouping-selectors/style.css similarity index 100% rename from foundations/03-grouping-selectors/style.css rename to foundations/intro-to-css/03-grouping-selectors/style.css diff --git a/foundations/04-chaining-selectors/README.md b/foundations/intro-to-css/04-chaining-selectors/README.md similarity index 74% rename from foundations/04-chaining-selectors/README.md rename to foundations/intro-to-css/04-chaining-selectors/README.md index 47a8619b5884..0f1fda9755ff 100644 --- a/foundations/04-chaining-selectors/README.md +++ b/foundations/intro-to-css/04-chaining-selectors/README.md @@ -1,8 +1,9 @@ # Chaining Selectors -Credits for the images in this exercise go to [Katho Mutodo](https://www.pexels.com/@photobykatho?utm_content=attributionCopyText&utm_medium=referral&utm_source=pexels) and [Andrea Piacquadio](https://www.pexels.com/@olly?utm_content=attributionCopyText&utm_medium=referral&utm_source=pexels). +Credits for the images in this exercise go to [Katho Mutodo](https://linktr.ee/photobykatho_) and [Andrea Piacquadio](https://www.pexels.com/@olly?utm_content=attributionCopyText&utm_medium=referral&utm_source=pexels). -With this exercise, we've provided you a completed HTML file, so you will only have to edit the CSS file. For this exercise, it's more important to understand how chaining different selectors works than how to actually add the attributes. + +With this exercise, we've provided you with a partially completed HTML file which you'll configure. The purpose of this exercise is to focus on understanding how to chain different selectors, rather than solely adding attributes. Additionally, you'll have the chance to review your HTML images. We have two images for you to style, each with two class names, where one of the class names is shared. The goal here is to chain the selectors for both elements, so that each have a unique style applied, despite using a shared class selector. For example, you want an element that has both X and Y to have one set of styles, while an element with X and Z has a completely different set of styles. We included the original images as well, so that you can see how the styles you will be adding look in comparison, so do not add any styles to them. diff --git a/foundations/04-chaining-selectors/desired-outcome.png b/foundations/intro-to-css/04-chaining-selectors/desired-outcome.png similarity index 100% rename from foundations/04-chaining-selectors/desired-outcome.png rename to foundations/intro-to-css/04-chaining-selectors/desired-outcome.png diff --git a/foundations/04-chaining-selectors/pexels-andrea-piacquadio-3777931.jpg b/foundations/intro-to-css/04-chaining-selectors/images/pexels-andrea-piacquadio-3777931.jpg similarity index 100% rename from foundations/04-chaining-selectors/pexels-andrea-piacquadio-3777931.jpg rename to foundations/intro-to-css/04-chaining-selectors/images/pexels-andrea-piacquadio-3777931.jpg diff --git a/foundations/04-chaining-selectors/pexels-katho-mutodo-8434791.jpg b/foundations/intro-to-css/04-chaining-selectors/images/pexels-katho-mutodo-8434791.jpg similarity index 100% rename from foundations/04-chaining-selectors/pexels-katho-mutodo-8434791.jpg rename to foundations/intro-to-css/04-chaining-selectors/images/pexels-katho-mutodo-8434791.jpg diff --git a/foundations/intro-to-css/04-chaining-selectors/index.html b/foundations/intro-to-css/04-chaining-selectors/index.html new file mode 100644 index 000000000000..c8db425966b3 --- /dev/null +++ b/foundations/intro-to-css/04-chaining-selectors/index.html @@ -0,0 +1,23 @@ + + + + + + + Chaining Selectors + + + + + +
+ Woman with glasses + Man with surprised expression +
+ +
+ Woman with glasses + Man with surprised expression +
+ + \ No newline at end of file diff --git a/foundations/intro-to-css/04-chaining-selectors/solution/images/pexels-andrea-piacquadio-3777931.jpg b/foundations/intro-to-css/04-chaining-selectors/solution/images/pexels-andrea-piacquadio-3777931.jpg new file mode 100644 index 000000000000..1f7652cf6006 Binary files /dev/null and b/foundations/intro-to-css/04-chaining-selectors/solution/images/pexels-andrea-piacquadio-3777931.jpg differ diff --git a/foundations/intro-to-css/04-chaining-selectors/solution/images/pexels-katho-mutodo-8434791.jpg b/foundations/intro-to-css/04-chaining-selectors/solution/images/pexels-katho-mutodo-8434791.jpg new file mode 100644 index 000000000000..4844432820e8 Binary files /dev/null and b/foundations/intro-to-css/04-chaining-selectors/solution/images/pexels-katho-mutodo-8434791.jpg differ diff --git a/foundations/04-chaining-selectors/solution/solution.css b/foundations/intro-to-css/04-chaining-selectors/solution/solution.css similarity index 100% rename from foundations/04-chaining-selectors/solution/solution.css rename to foundations/intro-to-css/04-chaining-selectors/solution/solution.css diff --git a/foundations/intro-to-css/04-chaining-selectors/solution/solution.html b/foundations/intro-to-css/04-chaining-selectors/solution/solution.html new file mode 100644 index 000000000000..2a646fa71e50 --- /dev/null +++ b/foundations/intro-to-css/04-chaining-selectors/solution/solution.html @@ -0,0 +1,20 @@ + + + + + + + Chaining Selectors + + + +
+ Woman with glasses + Man with surprised expression +
+
+ Woman with glasses + Man with surprised expression +
+ + \ No newline at end of file diff --git a/foundations/intro-to-css/04-chaining-selectors/style.css b/foundations/intro-to-css/04-chaining-selectors/style.css new file mode 100644 index 000000000000..d55c2c5c7090 --- /dev/null +++ b/foundations/intro-to-css/04-chaining-selectors/style.css @@ -0,0 +1 @@ +/* Add CSS Styling */ \ No newline at end of file diff --git a/foundations/05-descendant-combinator/README.md b/foundations/intro-to-css/05-descendant-combinator/README.md similarity index 100% rename from foundations/05-descendant-combinator/README.md rename to foundations/intro-to-css/05-descendant-combinator/README.md diff --git a/foundations/intro-to-css/05-descendant-combinator/desired-outcome.png b/foundations/intro-to-css/05-descendant-combinator/desired-outcome.png new file mode 100644 index 000000000000..5927af257cd5 Binary files /dev/null and b/foundations/intro-to-css/05-descendant-combinator/desired-outcome.png differ diff --git a/foundations/05-descendant-combinator/index.html b/foundations/intro-to-css/05-descendant-combinator/index.html similarity index 100% rename from foundations/05-descendant-combinator/index.html rename to foundations/intro-to-css/05-descendant-combinator/index.html diff --git a/foundations/05-descendant-combinator/solution/solution.css b/foundations/intro-to-css/05-descendant-combinator/solution/solution.css similarity index 91% rename from foundations/05-descendant-combinator/solution/solution.css rename to foundations/intro-to-css/05-descendant-combinator/solution/solution.css index 687e5f359ab5..7b57d3eae812 100644 --- a/foundations/05-descendant-combinator/solution/solution.css +++ b/foundations/intro-to-css/05-descendant-combinator/solution/solution.css @@ -1,6 +1,6 @@ .container .text { background-color: yellow; - color: red; + color: #E00000; font-size: 20px; text-align: center; } diff --git a/foundations/05-descendant-combinator/solution/solution.html b/foundations/intro-to-css/05-descendant-combinator/solution/solution.html similarity index 100% rename from foundations/05-descendant-combinator/solution/solution.html rename to foundations/intro-to-css/05-descendant-combinator/solution/solution.html diff --git a/foundations/04-chaining-selectors/style.css b/foundations/intro-to-css/05-descendant-combinator/style.css similarity index 100% rename from foundations/04-chaining-selectors/style.css rename to foundations/intro-to-css/05-descendant-combinator/style.css diff --git a/grid/01-grid-layout-1/desired-outcome.png b/grid/01-grid-layout-1/desired-outcome.png deleted file mode 100644 index 6c1ceda93da4..000000000000 Binary files a/grid/01-grid-layout-1/desired-outcome.png and /dev/null differ diff --git a/grid/02-grid-layout-2/desired-outcome-narrow.png b/grid/02-grid-layout-2/desired-outcome-narrow.png deleted file mode 100644 index 8c66ee9f41d8..000000000000 Binary files a/grid/02-grid-layout-2/desired-outcome-narrow.png and /dev/null differ diff --git a/grid/02-grid-layout-2/desired-outcome-wide.png b/grid/02-grid-layout-2/desired-outcome-wide.png deleted file mode 100644 index f86d25e8e9cb..000000000000 Binary files a/grid/02-grid-layout-2/desired-outcome-wide.png and /dev/null differ diff --git a/grid/03-grid-layout-3/desired-outcome-stretched.png b/grid/03-grid-layout-3/desired-outcome-stretched.png deleted file mode 100644 index 18a8b1035e18..000000000000 Binary files a/grid/03-grid-layout-3/desired-outcome-stretched.png and /dev/null differ diff --git a/grid/03-grid-layout-3/desired-outcome.png b/grid/03-grid-layout-3/desired-outcome.png deleted file mode 100644 index 31283eabd1ad..000000000000 Binary files a/grid/03-grid-layout-3/desired-outcome.png and /dev/null differ diff --git a/grid/02-grid-layout-2/README.md b/intermediate-html-css/advanced-grid/01-responsive-holy-grail/README.md similarity index 85% rename from grid/02-grid-layout-2/README.md rename to intermediate-html-css/advanced-grid/01-responsive-holy-grail/README.md index b6b9f284e006..44dfa514369f 100644 --- a/grid/02-grid-layout-2/README.md +++ b/intermediate-html-css/advanced-grid/01-responsive-holy-grail/README.md @@ -23,5 +23,6 @@ When the browser is stretched wide: - 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 rows and columns stretch wider when making the browser window bigger -- The rows and columns stretch taller when making the browser window smaller +- 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/01-responsive-holy-grail/desired-outcome-narrow.png b/intermediate-html-css/advanced-grid/01-responsive-holy-grail/desired-outcome-narrow.png new file mode 100644 index 000000000000..ae001abcb8db Binary files /dev/null and b/intermediate-html-css/advanced-grid/01-responsive-holy-grail/desired-outcome-narrow.png differ diff --git a/intermediate-html-css/advanced-grid/01-responsive-holy-grail/desired-outcome-wide.png b/intermediate-html-css/advanced-grid/01-responsive-holy-grail/desired-outcome-wide.png new file mode 100644 index 000000000000..8c7d24165279 Binary files /dev/null and b/intermediate-html-css/advanced-grid/01-responsive-holy-grail/desired-outcome-wide.png differ diff --git a/grid/02-grid-layout-2/index.html b/intermediate-html-css/advanced-grid/01-responsive-holy-grail/index.html similarity index 100% rename from grid/02-grid-layout-2/index.html rename to intermediate-html-css/advanced-grid/01-responsive-holy-grail/index.html diff --git a/grid/02-grid-layout-2/solution/solution.css b/intermediate-html-css/advanced-grid/01-responsive-holy-grail/solution/solution.css similarity index 83% rename from grid/02-grid-layout-2/solution/solution.css rename to intermediate-html-css/advanced-grid/01-responsive-holy-grail/solution/solution.css index 96f7ebae9833..0ed7d246f1c0 100644 --- a/grid/02-grid-layout-2/solution/solution.css +++ b/intermediate-html-css/advanced-grid/01-responsive-holy-grail/solution/solution.css @@ -1,4 +1,5 @@ -body, html { +body, +html { height: 100%; margin: 0; } @@ -20,21 +21,21 @@ body, html { } .header { - background-color: #FFDE22; + background-color: #006157; grid-column: 1 / 3; } .sidebar { - background-color: #FF7755; + background-color: #005B94; grid-row: 2 / 4; } .nav { - background-color: #00DDFF; + background-color: #642cde; } .article { - background-color: #bccbde; + background-color: #7E1DC3; } .article p { @@ -56,4 +57,4 @@ body, html { grid-template-columns: 1fr 3fr; grid-template-rows: 1fr 1fr 5fr 1fr; gap: 15px; -} +} \ No newline at end of file diff --git a/grid/02-grid-layout-2/solution/solution.html b/intermediate-html-css/advanced-grid/01-responsive-holy-grail/solution/solution.html similarity index 100% rename from grid/02-grid-layout-2/solution/solution.html rename to intermediate-html-css/advanced-grid/01-responsive-holy-grail/solution/solution.html diff --git a/grid/02-grid-layout-2/style.css b/intermediate-html-css/advanced-grid/01-responsive-holy-grail/style.css similarity index 79% rename from grid/02-grid-layout-2/style.css rename to intermediate-html-css/advanced-grid/01-responsive-holy-grail/style.css index 6574067cb461..fceb431a76f3 100644 --- a/grid/02-grid-layout-2/style.css +++ b/intermediate-html-css/advanced-grid/01-responsive-holy-grail/style.css @@ -1,4 +1,5 @@ -body, html { +body, +html { height: 100%; margin: 0; } @@ -20,21 +21,21 @@ body, html { } .header { - background-color: #FFDE22; + background-color: #006157; grid-column: 1 / 3; } .sidebar { - background-color: #FF7755; + background-color: #005B94; grid-row: 2 / 4; } .nav { - background-color: #00DDFF; + background-color: #642cde; } .article { - background-color: #bccbde; + background-color: #7E1DC3; } .article p { @@ -47,4 +48,4 @@ body, html { .footer { background-color: #393f4d; grid-column: 1 / 3; -} +} \ No newline at end of file diff --git a/grid/03-grid-layout-3/README.md b/intermediate-html-css/advanced-grid/02-holy-grail-mockup/README.md similarity index 100% rename from grid/03-grid-layout-3/README.md rename to intermediate-html-css/advanced-grid/02-holy-grail-mockup/README.md diff --git a/intermediate-html-css/advanced-grid/02-holy-grail-mockup/desired-outcome-stretched.png b/intermediate-html-css/advanced-grid/02-holy-grail-mockup/desired-outcome-stretched.png new file mode 100644 index 000000000000..fbd5316b6174 Binary files /dev/null and b/intermediate-html-css/advanced-grid/02-holy-grail-mockup/desired-outcome-stretched.png differ diff --git a/intermediate-html-css/advanced-grid/02-holy-grail-mockup/desired-outcome.png b/intermediate-html-css/advanced-grid/02-holy-grail-mockup/desired-outcome.png new file mode 100644 index 000000000000..6a1c86759f30 Binary files /dev/null and b/intermediate-html-css/advanced-grid/02-holy-grail-mockup/desired-outcome.png differ diff --git a/grid/03-grid-layout-3/index.html b/intermediate-html-css/advanced-grid/02-holy-grail-mockup/index.html similarity index 100% rename from grid/03-grid-layout-3/index.html rename to intermediate-html-css/advanced-grid/02-holy-grail-mockup/index.html diff --git a/grid/03-grid-layout-3/solution/solution.css b/intermediate-html-css/advanced-grid/02-holy-grail-mockup/solution/solution.css similarity index 93% rename from grid/03-grid-layout-3/solution/solution.css rename to intermediate-html-css/advanced-grid/02-holy-grail-mockup/solution/solution.css index c4763e2db2b0..726d7885d038 100644 --- a/grid/03-grid-layout-3/solution/solution.css +++ b/intermediate-html-css/advanced-grid/02-holy-grail-mockup/solution/solution.css @@ -26,7 +26,7 @@ } .sidebar { - background-color: #FF7755; + background-color: #C50208; } .sidebar .photo { @@ -46,7 +46,7 @@ } .nav { - background-color: #FF7755; + background-color: #C50208; } @@ -89,7 +89,7 @@ .footer p { font-size: 13px; - font-weight: normal; + font-weight: normal; } /* SOLUTION */ @@ -130,8 +130,9 @@ gap: 50px; } -.side-content, .photo { - display: grid; +.side-content, +.photo { + display: grid; align-items: center; } @@ -157,4 +158,4 @@ .footer { grid-column: 1 / 3; -} +} \ No newline at end of file diff --git a/grid/03-grid-layout-3/solution/solution.html b/intermediate-html-css/advanced-grid/02-holy-grail-mockup/solution/solution.html similarity index 100% rename from grid/03-grid-layout-3/solution/solution.html rename to intermediate-html-css/advanced-grid/02-holy-grail-mockup/solution/solution.html diff --git a/grid/03-grid-layout-3/style.css b/intermediate-html-css/advanced-grid/02-holy-grail-mockup/style.css similarity index 92% rename from grid/03-grid-layout-3/style.css rename to intermediate-html-css/advanced-grid/02-holy-grail-mockup/style.css index abcc92f343fd..20502720c601 100644 --- a/grid/03-grid-layout-3/style.css +++ b/intermediate-html-css/advanced-grid/02-holy-grail-mockup/style.css @@ -25,7 +25,7 @@ } .sidebar { - background-color: #FF7755; + background-color: #C50208; } .sidebar .photo { @@ -45,7 +45,7 @@ } .nav { - background-color: #FF7755; + background-color: #C50208; } .nav ul li { @@ -87,5 +87,5 @@ .footer p { font-size: 13px; - font-weight: normal; -} + font-weight: normal; +} \ No newline at end of file diff --git a/grid/01-grid-layout-1/README.md b/intermediate-html-css/positioning-grid/01-basic-holy-grail/README.md similarity index 100% rename from grid/01-grid-layout-1/README.md rename to intermediate-html-css/positioning-grid/01-basic-holy-grail/README.md diff --git a/intermediate-html-css/positioning-grid/01-basic-holy-grail/desired-outcome.png b/intermediate-html-css/positioning-grid/01-basic-holy-grail/desired-outcome.png new file mode 100644 index 000000000000..ca46d112d307 Binary files /dev/null and b/intermediate-html-css/positioning-grid/01-basic-holy-grail/desired-outcome.png differ diff --git a/grid/01-grid-layout-1/index.html b/intermediate-html-css/positioning-grid/01-basic-holy-grail/index.html similarity index 100% rename from grid/01-grid-layout-1/index.html rename to intermediate-html-css/positioning-grid/01-basic-holy-grail/index.html diff --git a/grid/01-grid-layout-1/solution/solution.css b/intermediate-html-css/positioning-grid/01-basic-holy-grail/solution/solution.css similarity index 84% rename from grid/01-grid-layout-1/solution/solution.css rename to intermediate-html-css/positioning-grid/01-basic-holy-grail/solution/solution.css index c037f5e58aa6..1ca3402c70b2 100644 --- a/grid/01-grid-layout-1/solution/solution.css +++ b/intermediate-html-css/positioning-grid/01-basic-holy-grail/solution/solution.css @@ -1,4 +1,5 @@ -body, html { +body, +html { height: 100%; margin: 0; } @@ -20,19 +21,23 @@ body, html { } .header { - background-color: #FFDE22; + background-color: #006157 } .sidebar { - background-color: #FF7755; + background-color: #005B94 } .nav { - background-color: #00DDFF; + background-color: #642cde } .article { - background-color: #bccbde; + background-color: #7E1DC3 +} + +.footer { + background-color: #393f4d; } .article p { @@ -42,10 +47,6 @@ body, html { text-align: left; } -.footer { - background-color: #393f4d; -} - /* SOLUTION */ .container { @@ -65,4 +66,4 @@ body, html { .footer { grid-column: 1 / 3; -} +} \ No newline at end of file diff --git a/grid/01-grid-layout-1/solution/solution.html b/intermediate-html-css/positioning-grid/01-basic-holy-grail/solution/solution.html similarity index 100% rename from grid/01-grid-layout-1/solution/solution.html rename to intermediate-html-css/positioning-grid/01-basic-holy-grail/solution/solution.html diff --git a/grid/01-grid-layout-1/style.css b/intermediate-html-css/positioning-grid/01-basic-holy-grail/style.css similarity index 77% rename from grid/01-grid-layout-1/style.css rename to intermediate-html-css/positioning-grid/01-basic-holy-grail/style.css index ecf1a425ea5c..6ce91a11d80e 100644 --- a/grid/01-grid-layout-1/style.css +++ b/intermediate-html-css/positioning-grid/01-basic-holy-grail/style.css @@ -1,4 +1,5 @@ -body, html { +body, +html { height: 100%; margin: 0; } @@ -20,19 +21,23 @@ body, html { } .header { - background-color: #FFDE22; + background-color: #006157; } .sidebar { - background-color: #FF7755; + background-color: #005B94; } .nav { - background-color: #00DDFF; + background-color: #642cde; } .article { - background-color: #bccbde; + background-color: #7E1DC3; +} + +.footer { + background-color: #393f4d; } .article p { @@ -40,8 +45,4 @@ body, html { font-family: sans-serif; color: white; text-align: left; -} - -.footer { - background-color: #393f4d; -} +} \ No newline at end of file diff --git a/margin-and-padding/02-margin-and-padding-2/desired-outcome.png b/margin-and-padding/02-margin-and-padding-2/desired-outcome.png deleted file mode 100644 index 0cdf63ea8c3e..000000000000 Binary files a/margin-and-padding/02-margin-and-padding-2/desired-outcome.png and /dev/null differ