├── .github ├── ISSUE_TEMPLATE │ ├── bug_report.md │ └── feature_request.md └── PULL_REQUEST_TEMPLATE.md ├── .gitignore ├── LICENSE ├── README.md ├── animation ├── 01-button-hover │ ├── README.md │ ├── desired-outcome.gif │ ├── index.html │ ├── solution │ │ ├── solution.css │ │ └── solution.html │ └── style.css ├── 02-pop-up │ ├── README.md │ ├── desired-outcome.gif │ ├── index.html │ ├── script.js │ ├── solution │ │ ├── solution.css │ │ ├── solution.html │ │ └── solution.js │ └── style.css └── 03-dropdown-menu │ ├── README.md │ ├── desired-outcome.gif │ ├── index.html │ ├── script.js │ ├── solution │ ├── solution.css │ ├── solution.html │ └── solution.js │ └── style.css ├── flex ├── 01-flex-center │ ├── README.md │ ├── desired-outcome.png │ ├── index.html │ ├── solution │ │ ├── solution.css │ │ └── solution.html │ └── style.css ├── 02-flex-header │ ├── README.md │ ├── desired-outcome-narrow.png │ ├── desired-outcome-wide.png │ ├── index.html │ ├── solution │ │ ├── solution.css │ │ └── solution.html │ └── style.css ├── 03-flex-header-2 │ ├── README.md │ ├── desired-outcome.gif │ ├── desired-outcome.png │ ├── index.html │ ├── solution │ │ ├── solution.css │ │ └── solution.html │ └── style.css ├── 04-flex-information │ ├── README.md │ ├── desired-outcome.png │ ├── images │ │ ├── barberry.png │ │ ├── chilli.png │ │ ├── pepper.png │ │ └── saffron.png │ ├── index.html │ ├── solution │ │ ├── images │ │ │ ├── barberry.png │ │ │ ├── chilli.png │ │ │ ├── pepper.png │ │ │ └── saffron.png │ │ ├── solution.css │ │ └── solution.html │ └── style.css ├── 05-flex-modal │ ├── README.md │ ├── desired-outcome.png │ ├── index.html │ ├── solution │ │ ├── solution.css │ │ └── solution.html │ └── style.css ├── 06-flex-layout │ ├── README.md │ ├── desired-outcome.png │ ├── index.html │ ├── logo.png │ ├── solution │ │ ├── logo.png │ │ ├── solution.css │ │ └── solution.html │ └── style.css └── 07-flex-layout-2 │ ├── README.md │ ├── desired-outcome-smaller.png │ ├── desired-outcome.png │ ├── index.html │ ├── solution │ ├── solution.css │ └── solution.html │ └── style.css ├── foundations ├── 01-css-methods │ ├── README.md │ ├── desired-outcome.png │ ├── index.html │ └── solution │ │ ├── solution.css │ │ └── solution.html ├── 02-class-id-selectors │ ├── README.md │ ├── desired-outcome.png │ ├── index.html │ ├── solution │ │ ├── solution.css │ │ └── solution.html │ └── style.css ├── 03-grouping-selectors │ ├── README.md │ ├── desired-outcome.png │ ├── index.html │ ├── solution │ │ ├── solution.css │ │ └── solution.html │ └── style.css ├── 04-chaining-selectors │ ├── README.md │ ├── desired-outcome.png │ ├── index.html │ ├── pexels-andrea-piacquadio-3777931.jpg │ ├── pexels-katho-mutodo-8434791.jpg │ ├── solution │ │ ├── solution.css │ │ └── solution.html │ └── style.css ├── 05-descendant-combinator │ ├── README.md │ ├── desired-outcome.png │ ├── index.html │ ├── solution │ │ ├── solution.css │ │ └── solution.html │ └── style.css └── 06-cascade-fix │ ├── README.md │ ├── desired-outcome.png │ ├── index.html │ ├── solution │ ├── solution.css │ └── solution.html │ └── style.css ├── grid ├── 01-grid-layout-1 │ ├── README.md │ ├── desired-outcome.png │ ├── index.html │ ├── solution │ │ ├── solution.css │ │ └── solution.html │ └── style.css ├── 02-grid-layout-2 │ ├── README.md │ ├── desired-outcome-narrow.png │ ├── desired-outcome-wide.png │ ├── index.html │ ├── solution │ │ ├── solution.css │ │ └── solution.html │ └── style.css └── 03-grid-layout-3 │ ├── README.md │ ├── desired-outcome-stretched.png │ ├── desired-outcome.png │ ├── index.html │ ├── solution │ ├── solution.css │ └── solution.html │ └── style.css └── margin-and-padding ├── 01-margin-and-padding-1 ├── README.md ├── desired-outcome.png ├── index.html ├── solution │ ├── solution.css │ └── solution.html └── style.css └── 02-margin-and-padding-2 ├── README.md ├── desired-outcome.png ├── index.html ├── solution ├── solution.css └── solution.html └── style.css /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug Report 3 | about: Create a report to help us improve something that is not working correctly 4 | title: "Bug - :" 5 | labels: "Status: Needs Review, Type: Bug" 6 | assignees: "" 7 | --- 8 | 9 | 10 | 11 | Complete the following REQUIRED checkboxes: 12 | - [ ] I have thoroughly read and understand [The Odin Project Contributing Guide](https://github.com/TheOdinProject/.github/blob/main/CONTRIBUTING.md) 13 | - [ ] 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` 14 | 15 | The following checkbox is OPTIONAL: 16 | 17 | - [ ] I would like to be assigned this issue to work on it 18 | 19 |
20 | 21 | **1. Description of the Bug:** 22 | 23 | 24 | 25 | **2. How To Reproduce:** 26 | 33 | 34 | 35 | **3. Expected Behavior:** 36 | 43 | 44 | 45 | **4. Desktop/Device:** 46 | 47 | - Device: 48 | - OS: 49 | - Browser: 50 | - Version: 51 | 52 | **5. Additional Information:** 53 | 54 | 55 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature Request 3 | about: Suggest a new feature or enhancement for this project 4 | title: "" 5 | labels: "Status: Needs Review" 6 | assignees: "" 7 | --- 8 | 9 | 10 | 11 | Complete the following REQUIRED checkboxes: 12 | - [ ] I have thoroughly read and understand [The Odin Project Contributing Guide](https://github.com/TheOdinProject/.github/blob/main/CONTRIBUTING.md) 13 | - [ ] The title of this issue follows the `location for request: brief description of request` format, e.g. `Foundations exercises: Add exercise for XYZ` 14 | 15 | The following checkbox is OPTIONAL: 16 | 17 | - [ ] I would like to be assigned this issue to work on it 18 | 19 |
20 | 21 | **1. Description of the Feature Request:** 22 | 25 | 26 | 27 | **2. Acceptance Criteria:** 28 | 34 | 35 | 36 | **3. Additional Information:** 37 | 38 | 39 | -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | ## Because 4 | 5 | 6 | 7 | ## This PR 8 | 9 | 10 | 11 | ## Issue 12 | 19 | Closes #XXXXX 20 | 21 | ## Additional Information 22 | 23 | 24 | 25 | ## Pull Request Requirements 26 | 27 | - [ ] I have thoroughly read and understand [The Odin Project Contributing Guide](https://github.com/TheOdinProject/.github/blob/main/CONTRIBUTING.md) 28 | - [ ] The title of this PR follows the `location of change: brief description of change` format, e.g. `01-flex-center: Update self check` 29 | - [ ] The `Because` section summarizes the reason for this PR 30 | - [ ] The `This PR` section has a bullet point list describing the changes in this PR 31 | - [ ] If this PR addresses an open issue, it is linked in the `Issue` section 32 | - [ ] If applicable, I have ensured that the TOP solution files match the Desired Outcome image 33 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Ignore MacOS autogenerated 2 | .DS_Store 3 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2023 The Odin Project 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # CSS Exercises 2 | 3 | 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. 4 | 5 | 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. 6 | 7 | ## Contributing 8 | 9 | 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/.github/blob/main/CONTRIBUTING.md). 10 | 11 | ## How To Use These Exercises 12 | 13 | 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). 14 | * 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). 15 | 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. 16 | 3. For each exercise, read the README thoroughly before starting any work. 17 | * Each README has a "Self Check" list. Use this to make sure you haven't missed any important details in your implementation. 18 | 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). 19 | * Depending on the instructions of the exercise, you may only need to make edits in one of these files. 20 | 5. Once you successfully finish an exercise, check TOP's solution to compare it with yours. 21 | * You should not be checking the solution for an exercise until you finish it! 22 | * 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. 23 | 6. Do not submit your solutions to this repo, as any PRs that do so will be closed without merging. 24 | 25 | ## Some Hints 26 | - 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. 27 | - 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`. 28 | - 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.) 29 | - 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. 30 | -------------------------------------------------------------------------------- /animation/01-button-hover/README.md: -------------------------------------------------------------------------------- 1 | # Button Hover 2 | 3 | Use a transition to scale the button when you hover your mouse over it. 4 | 5 | ## Desired Outcome 6 | 7 | ![outcome](./desired-outcome.gif) 8 | 9 | ### Self Check 10 | - Does the button grow when you hover it? 11 | - Do other properties of the button remain unchanged? 12 | - Does the `:hover` pseudo-class trigger the transition? 13 | -------------------------------------------------------------------------------- /animation/01-button-hover/desired-outcome.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ardnyx/css-exercises/9ab349e7d96a947cdfb52745a86b7fee2e954ec0/animation/01-button-hover/desired-outcome.gif -------------------------------------------------------------------------------- /animation/01-button-hover/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Button Hover 8 | 9 | 10 | 11 |
12 | 13 |
14 | 15 | 16 | -------------------------------------------------------------------------------- /animation/01-button-hover/solution/solution.css: -------------------------------------------------------------------------------- 1 | #transition-container { 2 | width: 100vw; 3 | height: 100vh; 4 | display: flex; 5 | flex-direction: column; 6 | justify-content: center; 7 | align-items: center; 8 | font-family: Arial, sans-serif; 9 | } 10 | 11 | button { 12 | border-radius: 8px; 13 | border: none; 14 | background-color: #2563eb; 15 | color: white; 16 | font-size: 18px; 17 | padding: 16px 24px; 18 | text-align: center; 19 | } 20 | 21 | /* SOLUTION */ 22 | 23 | button { 24 | transition: transform .3s ease-in-out; 25 | } 26 | 27 | button:hover { 28 | transform: scale(1.2) 29 | } 30 | -------------------------------------------------------------------------------- /animation/01-button-hover/solution/solution.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Button Hover 8 | 9 | 10 | 11 |
12 | 13 |
14 | 15 | 16 | -------------------------------------------------------------------------------- /animation/01-button-hover/style.css: -------------------------------------------------------------------------------- 1 | #transition-container { 2 | width: 100vw; 3 | height: 100vh; 4 | display: flex; 5 | flex-direction: column; 6 | justify-content: center; 7 | align-items: center; 8 | font-family: Arial, sans-serif; 9 | } 10 | 11 | button { 12 | border-radius: 8px; 13 | border: none; 14 | background-color: #2563eb; 15 | color: white; 16 | font-size: 18px; 17 | padding: 16px 24px; 18 | text-align: center; 19 | } -------------------------------------------------------------------------------- /animation/02-pop-up/README.md: -------------------------------------------------------------------------------- 1 | # Popup 2 | 3 | In this exercise we have set up a simple pop-up dialog for you. It already works! Load up index.html and give it a shot! 4 | 5 | You don't need to worry about the actual functionality here; we've just written a little javascript that adds and removes a `.show` class to the popup and the backdrop. Your task then is to make it _move_, as in the desired-outcome image below. 6 | 7 | ### Hints 8 | - "modal" is another word for 'pop-up' 9 | - In the code we've provided, the popup is sitting in its final position. You'll need to change its initial position and then use a transition to move it back to the center. 10 | - You might want to change the initial opacity from 0% to something like 20% while you're working on it, so you can easily see where it is coming from before you click the button. 11 | - Don't overthink this one... it might seem complicated, but it requires just a few lines of code. 12 | 13 | ## Desired Outcome 14 | 15 | ![outcome](./desired-outcome.gif) 16 | 17 | ### Self Check 18 | 19 | - The pop-up slides down into position when you click the open button and slides back up when you click 'close modal' 20 | - The opacity fades smoothly in and out when toggling the modal -------------------------------------------------------------------------------- /animation/02-pop-up/desired-outcome.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ardnyx/css-exercises/9ab349e7d96a947cdfb52745a86b7fee2e954ec0/animation/02-pop-up/desired-outcome.gif -------------------------------------------------------------------------------- /animation/02-pop-up/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Popup 8 | 9 | 10 | 11 |
12 | 17 |
18 | 19 |
20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /animation/02-pop-up/script.js: -------------------------------------------------------------------------------- 1 | const openButton = document.getElementById('trigger-modal'); 2 | const closeButton = document.getElementById('close-modal'); 3 | 4 | function toggleModal() { 5 | const modalDiv = document.querySelector('.popup-modal'); 6 | const backdrop = document.querySelector('.backdrop'); 7 | modalDiv.classList.toggle('show'); 8 | backdrop.classList.toggle('show'); 9 | } 10 | 11 | openButton.addEventListener('click', toggleModal); 12 | closeButton.addEventListener('click', toggleModal); -------------------------------------------------------------------------------- /animation/02-pop-up/solution/solution.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | } 5 | 6 | body { 7 | overflow: hidden; 8 | } 9 | 10 | .button-container { 11 | width: 100vw; 12 | height: 100vh; 13 | background-color: #ffffff; 14 | opacity: 100%; 15 | display: flex; 16 | align-items: center; 17 | justify-content: center; 18 | } 19 | 20 | button { 21 | padding: 20px; 22 | color: #ffffff; 23 | background-color: #0e79dd; 24 | border: none; 25 | border-radius: 5px; 26 | font-weight: 600; 27 | } 28 | 29 | .popup-modal { 30 | padding: 32px 64px; 31 | background-color: white; 32 | border: 1px solid black; 33 | border-radius: 10px; 34 | position: fixed; 35 | top: 50%; 36 | left: 50%; 37 | transform-origin: center; 38 | transform: translate(-50%, -50%); 39 | pointer-events: none; 40 | opacity: 0%; 41 | text-align: center; 42 | } 43 | 44 | .popup-modal p { 45 | margin-bottom: 24px; 46 | } 47 | 48 | .backdrop { 49 | pointer-events: none; 50 | position: fixed; 51 | inset: 0; 52 | background: #000; 53 | opacity: 0%; 54 | } 55 | 56 | .popup-modal.show { 57 | opacity: 100%; 58 | pointer-events: all; 59 | } 60 | 61 | .backdrop.show { 62 | opacity: 30%; 63 | } 64 | 65 | /* SOLUTION */ 66 | 67 | .popup-modal { 68 | transition: transform 0.3s ease-in-out, opacity 0.4s ease; 69 | transform: translate(-50%, -100%); 70 | } 71 | 72 | .popup-modal.show { 73 | transform: translate(-50%, -50%); 74 | } 75 | -------------------------------------------------------------------------------- /animation/02-pop-up/solution/solution.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Popup 8 | 9 | 10 | 11 |
12 | 17 |
18 | 19 |
20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /animation/02-pop-up/solution/solution.js: -------------------------------------------------------------------------------- 1 | const openButton = document.getElementById('trigger-modal'); 2 | const closeButton = document.getElementById('close-modal'); 3 | const backdrop = document.getElementById('backdrop') 4 | 5 | function toggleModal() { 6 | const modalDiv = document.querySelector('.popup-modal'); 7 | const backdrop = document.querySelector('.backdrop') 8 | modalDiv.classList.toggle('show'); 9 | backdrop.classList.toggle('show'); 10 | } 11 | 12 | openButton.addEventListener('click', toggleModal); 13 | closeButton.addEventListener('click', toggleModal); 14 | -------------------------------------------------------------------------------- /animation/02-pop-up/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | } 5 | 6 | body { 7 | overflow: hidden; 8 | } 9 | 10 | .button-container { 11 | width: 100vw; 12 | height: 100vh; 13 | background-color: #ffffff; 14 | opacity: 100%; 15 | display: flex; 16 | align-items: center; 17 | justify-content: center; 18 | } 19 | 20 | button { 21 | padding: 20px; 22 | color: #ffffff; 23 | background-color: #0e79dd; 24 | border: none; 25 | border-radius: 5px; 26 | font-weight: 600; 27 | } 28 | 29 | .popup-modal { 30 | padding: 32px 64px; 31 | background-color: white; 32 | border: 1px solid black; 33 | border-radius: 10px; 34 | position: fixed; 35 | top: 50%; 36 | left: 50%; 37 | transform-origin: center; 38 | transform: translate(-50%, -50%); 39 | pointer-events: none; 40 | opacity: 0%; 41 | text-align: center; 42 | } 43 | 44 | .popup-modal p { 45 | margin-bottom: 24px; 46 | } 47 | 48 | .backdrop { 49 | pointer-events: none; 50 | position: fixed; 51 | inset: 0; 52 | background: #000; 53 | opacity: 0%; 54 | } 55 | 56 | .popup-modal.show { 57 | opacity: 100%; 58 | pointer-events: all; 59 | } 60 | 61 | .backdrop.show { 62 | opacity: 30%; 63 | } 64 | -------------------------------------------------------------------------------- /animation/03-dropdown-menu/README.md: -------------------------------------------------------------------------------- 1 | # Dropdown Menu 2 | 3 | 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. 4 | 5 | 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. 6 | 7 | ### Hints 8 | - You need to specify a _transform-origin_ property to make the dropdown menu start transforming from the top 9 | - You need to add an intermediate step to the keyframe at rule to implement the _bounce_ illusion. 10 | 11 | ## Desired Outcome 12 | 13 | ![outcome](./desired-outcome.gif) 14 | 15 | ### Self Check 16 | 17 | - The dropdown menu expands after you click on the menu title 18 | - There's a _bounce_ illusion towards the end of the animation -------------------------------------------------------------------------------- /animation/03-dropdown-menu/desired-outcome.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ardnyx/css-exercises/9ab349e7d96a947cdfb52745a86b7fee2e954ec0/animation/03-dropdown-menu/desired-outcome.gif -------------------------------------------------------------------------------- /animation/03-dropdown-menu/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Dropdown Menu 8 | 9 | 10 | 11 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /animation/03-dropdown-menu/script.js: -------------------------------------------------------------------------------- 1 | const dropdownContainer = document.querySelector(".dropdown-container"); 2 | const menuTitle = document.querySelector(".menu-title"); 3 | const dropdownMenu = document.querySelector(".dropdown-menu"); 4 | 5 | menuTitle.addEventListener("click", (e) => { 6 | if (e.target === e.currentTarget) { 7 | dropdownMenu.classList.toggle("visible"); 8 | } 9 | }) 10 | 11 | window.addEventListener("click", (e) => { 12 | if (!dropdownContainer.contains(e.target)) { 13 | dropdownMenu.classList.remove("visible") 14 | } 15 | }) -------------------------------------------------------------------------------- /animation/03-dropdown-menu/solution/solution.css: -------------------------------------------------------------------------------- 1 | .dropdown-container { 2 | max-width: 250px; 3 | margin: 40px auto; 4 | text-align: center; 5 | line-height: 50px; 6 | font-size: 15px; 7 | color: rgb(247, 247, 247); 8 | cursor: pointer; 9 | } 10 | 11 | .menu-title { 12 | background-color: rgb(163, 162, 162); 13 | } 14 | 15 | .dropdown-menu { 16 | list-style: none; 17 | padding: 0; 18 | margin: 0; 19 | background-color: rgb(99, 97, 97); 20 | 21 | display: none; 22 | } 23 | 24 | ul.dropdown-menu li:hover { 25 | background: rgb(47, 46, 46); 26 | } 27 | 28 | .visible { 29 | display: block; 30 | } 31 | 32 | /* SOLUTION */ 33 | 34 | .visible { 35 | animation: expand 500ms ease-in-out; 36 | transform-origin: top; 37 | } 38 | 39 | @keyframes expand { 40 | 0% { 41 | transform: scaleY(0); 42 | } 43 | 44 | 70% { 45 | transform: scaleY(1.1); 46 | } 47 | 48 | 100% { 49 | transform: scaleY(1); 50 | } 51 | } 52 | 53 | -------------------------------------------------------------------------------- /animation/03-dropdown-menu/solution/solution.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Dropdown Menu 8 | 9 | 10 | 11 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /animation/03-dropdown-menu/solution/solution.js: -------------------------------------------------------------------------------- 1 | const dropdownContainer = document.querySelector(".dropdown-container"); 2 | const menuTitle = document.querySelector(".menu-title"); 3 | const dropdownMenu = document.querySelector(".dropdown-menu"); 4 | 5 | menuTitle.addEventListener("click", (e) => { 6 | if (e.target === e.currentTarget) { 7 | dropdownMenu.classList.toggle("visible"); 8 | } 9 | }) 10 | 11 | window.addEventListener("click", (e) => { 12 | if (!dropdownContainer.contains(e.target)) { 13 | dropdownMenu.classList.remove("visible") 14 | } 15 | }) -------------------------------------------------------------------------------- /animation/03-dropdown-menu/style.css: -------------------------------------------------------------------------------- 1 | .dropdown-container { 2 | max-width: 250px; 3 | margin: 40px auto; 4 | text-align: center; 5 | line-height: 50px; 6 | font-size: 15px; 7 | color: rgb(247, 247, 247); 8 | cursor: pointer; 9 | } 10 | 11 | .menu-title { 12 | background-color: rgb(163, 162, 162); 13 | } 14 | 15 | .dropdown-menu { 16 | list-style: none; 17 | padding: 0; 18 | margin: 0; 19 | background-color: rgb(99, 97, 97); 20 | 21 | display: none; 22 | } 23 | 24 | ul.dropdown-menu li:hover { 25 | background: rgb(47, 46, 46); 26 | } 27 | 28 | .visible { 29 | display: block; 30 | } 31 | 32 | 33 | -------------------------------------------------------------------------------- /flex/01-flex-center/README.md: -------------------------------------------------------------------------------- 1 | # CENTER THIS DIV 2 | This one is simple, but it's something that you'll want to do ALL THE TIME. Might as well get it out of the way now. 3 | 4 | All you need to do is center the red div inside the blue container. 5 | 6 | ## Desired Outcome 7 | ![outcome](./desired-outcome.png) 8 | 9 | ### Self Check 10 | - Is the red div centered? 11 | - Did you _only_ use flexbox to center it? 12 | 13 | -------------------------------------------------------------------------------- /flex/01-flex-center/desired-outcome.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ardnyx/css-exercises/9ab349e7d96a947cdfb52745a86b7fee2e954ec0/flex/01-flex-center/desired-outcome.png -------------------------------------------------------------------------------- /flex/01-flex-center/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | CENTER THIS DIV 8 | 9 | 10 | 11 |
12 |
center this div
13 |
14 | 15 | -------------------------------------------------------------------------------- /flex/01-flex-center/solution/solution.css: -------------------------------------------------------------------------------- 1 | .container { 2 | background: dodgerblue; 3 | border: 4px solid midnightblue; 4 | width: 400px; 5 | height: 300px; 6 | } 7 | 8 | .box { 9 | background: palevioletred; 10 | font-weight: bold; 11 | text-align: center; 12 | border: 6px solid maroon; 13 | width: 80px; 14 | height: 80px; 15 | } 16 | 17 | /* SOLUTION */ 18 | 19 | /* disclaimer: duplicating the `.container` selector here isn't best practice. 20 | In your solution you probably put it right inside the existing `.container`, 21 | which _is_ the best practice. 22 | 23 | We separated it out here to make it extra clear what has changed. */ 24 | 25 | .container { 26 | display: flex; 27 | align-items: center; 28 | justify-content: center; 29 | } -------------------------------------------------------------------------------- /flex/01-flex-center/solution/solution.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | CENTER THIS DIV 8 | 9 | 10 | 11 |
12 |
center this div
13 |
14 | 15 | -------------------------------------------------------------------------------- /flex/01-flex-center/style.css: -------------------------------------------------------------------------------- 1 | .container { 2 | background: dodgerblue; 3 | border: 4px solid midnightblue; 4 | width: 400px; 5 | height: 300px; 6 | } 7 | 8 | .box { 9 | background: palevioletred; 10 | font-weight: bold; 11 | text-align: center; 12 | border: 6px solid maroon; 13 | width: 80px; 14 | height: 80px; 15 | } -------------------------------------------------------------------------------- /flex/02-flex-header/README.md: -------------------------------------------------------------------------------- 1 | # A Basic Header 2 | 3 | Use flexbox rules to create this very common webpage header style. The benefit to using flex here is that everything should be _flexible_. Check out the two screenshots below to get an idea of how it should scale with your screen. Besides flex rules, you'll also want to add some rules for margin and padding. (Hint: `ul`s have some default margin/padding that you will need to deal with.) 4 | 5 | ## Desired Outcome 6 | 7 | narrow: 8 | ![narrow](./desired-outcome-narrow.png) 9 | 10 | wide: 11 | ![wide](./desired-outcome-wide.png) 12 | 13 | ### Self Check 14 | - There is space between all items and the edge of the header (specific px amount doesn't matter here). 15 | - Logo is centered vertically and horizontally. 16 | - list-items are horizontal, and are centered vertically inside the header. 17 | - 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. 18 | - Your solution does not use floats, inline-block, or absolute positioning. -------------------------------------------------------------------------------- /flex/02-flex-header/desired-outcome-narrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ardnyx/css-exercises/9ab349e7d96a947cdfb52745a86b7fee2e954ec0/flex/02-flex-header/desired-outcome-narrow.png -------------------------------------------------------------------------------- /flex/02-flex-header/desired-outcome-wide.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ardnyx/css-exercises/9ab349e7d96a947cdfb52745a86b7fee2e954ec0/flex/02-flex-header/desired-outcome-wide.png -------------------------------------------------------------------------------- /flex/02-flex-header/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Flex Header 8 | 9 | 10 | 11 |
12 | 19 | 20 | 27 |
28 | 29 | -------------------------------------------------------------------------------- /flex/02-flex-header/solution/solution.css: -------------------------------------------------------------------------------- 1 | .header { 2 | font-family: monospace; 3 | background: papayawhip; 4 | } 5 | 6 | .logo { 7 | font-size: 48px; 8 | font-weight: 900; 9 | color: tomato; 10 | background: white; 11 | padding: 4px 32px; 12 | } 13 | 14 | ul { 15 | /* this removes the dots on the list items*/ 16 | list-style-type: none; 17 | } 18 | 19 | a { 20 | font-size: 22px; 21 | background: white; 22 | padding: 8px; 23 | /* this removes the line under the links */ 24 | text-decoration: none; 25 | } 26 | 27 | /* SOLUTION */ 28 | 29 | .header { 30 | padding: 8px; 31 | display: flex; 32 | align-items: center; 33 | justify-content: space-between; 34 | } 35 | 36 | ul { 37 | display: flex; 38 | margin: 0; 39 | padding: 0; 40 | gap: 8px; 41 | } -------------------------------------------------------------------------------- /flex/02-flex-header/solution/solution.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Flex Header 8 | 9 | 10 | 11 |
12 | 19 | 20 | 27 |
28 | 29 | -------------------------------------------------------------------------------- /flex/02-flex-header/style.css: -------------------------------------------------------------------------------- 1 | .header { 2 | font-family: monospace; 3 | background: papayawhip; 4 | } 5 | 6 | .logo { 7 | font-size: 48px; 8 | font-weight: 900; 9 | color: tomato; 10 | background: white; 11 | padding: 4px 32px; 12 | } 13 | 14 | ul { 15 | /* this removes the dots on the list items*/ 16 | list-style-type: none; 17 | } 18 | 19 | a { 20 | font-size: 22px; 21 | background: white; 22 | padding: 8px; 23 | /* this removes the line under the links */ 24 | text-decoration: none; 25 | } -------------------------------------------------------------------------------- /flex/03-flex-header-2/README.md: -------------------------------------------------------------------------------- 1 | # Another common header style 2 | 3 | We're starting to sneak in a little more CSS that you haven't seen yet. Don't worry about this for now; we just want things to look a little bit prettier, and this CSS will not interfere with your task. 4 | 5 | For this one you will probably need to edit the HTML a little bit. Often with flexbox you need to add containers around things to make them go where you need them to go. In this case, you probably want to separate the items that go on the left and right of the header. 6 | 7 | Just like you did in the `02-flex-header` exercise, you'll be nesting flex containers inside each other. 8 | 9 | ## Desired outcome 10 | As with the last example, this one needs to be flexible in the middle, with items pushed to the left and right. 11 | 12 | ![png](./desired-outcome.png) 13 | 14 | ![gif](./desired-outcome.gif) 15 | 16 | ### Self Check 17 | - Everything is centered vertically inside the header. 18 | - There is 8px space between everything and the edge of the header. 19 | - Items are arranged horizontally as seen in the outcome image. 20 | - There is 16px between each item on both sides of the header. 21 | - flex is used to arrange everything. 22 | -------------------------------------------------------------------------------- /flex/03-flex-header-2/desired-outcome.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ardnyx/css-exercises/9ab349e7d96a947cdfb52745a86b7fee2e954ec0/flex/03-flex-header-2/desired-outcome.gif -------------------------------------------------------------------------------- /flex/03-flex-header-2/desired-outcome.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ardnyx/css-exercises/9ab349e7d96a947cdfb52745a86b7fee2e954ec0/flex/03-flex-header-2/desired-outcome.png -------------------------------------------------------------------------------- /flex/03-flex-header-2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Flex Header 2 8 | 9 | 10 | 11 |
12 | 15 | 20 | 23 |
24 |
25 | 26 | -------------------------------------------------------------------------------- /flex/03-flex-header-2/solution/solution.css: -------------------------------------------------------------------------------- 1 | /* this is some magical font-importing. 2 | you'll learn about it later. */ 3 | @import url('https://fonts.googleapis.com/css2?family=Besley:ital,wght@0,400;1,900&display=swap'); 4 | 5 | body { 6 | margin: 0; 7 | background: #eee; 8 | font-family: Besley, serif; 9 | } 10 | 11 | .header { 12 | background: white; 13 | border-bottom: 1px solid #ddd; 14 | box-shadow: 0 0 8px rgba(0,0,0,.1); 15 | } 16 | 17 | .profile-image { 18 | background: rebeccapurple; 19 | box-shadow: inset 2px 2px 4px rgba(0,0,0,.5); 20 | border-radius: 50%; 21 | width: 48px; 22 | height: 48px; 23 | } 24 | 25 | .logo { 26 | color: rebeccapurple; 27 | font-size: 32px; 28 | font-weight: 900; 29 | font-style: italic; 30 | } 31 | 32 | button { 33 | border: none; 34 | border-radius: 8px; 35 | background: rebeccapurple; 36 | color: white; 37 | padding: 8px 24px; 38 | } 39 | 40 | a { 41 | /* this removes the line under our links */ 42 | text-decoration: none; 43 | color: rebeccapurple; 44 | } 45 | 46 | ul { 47 | list-style-type: none; 48 | } 49 | 50 | /* SOLUTION */ 51 | 52 | .header { 53 | display: flex; 54 | justify-content: space-between; 55 | padding: 8px; 56 | } 57 | 58 | ul { 59 | display: flex; 60 | margin: 0; 61 | padding: 0; 62 | gap: 16px; 63 | } 64 | 65 | .left, .right { 66 | display: flex; 67 | align-items: center; 68 | gap: 16px; 69 | } 70 | -------------------------------------------------------------------------------- /flex/03-flex-header-2/solution/solution.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Flex Header 2 8 | 9 | 10 | 11 |
12 |
13 | 16 | 21 |
22 |
23 | 26 |
27 |
28 |
29 | 30 | -------------------------------------------------------------------------------- /flex/03-flex-header-2/style.css: -------------------------------------------------------------------------------- 1 | /* this is some magical font-importing. 2 | you'll learn about it later. */ 3 | @import url('https://fonts.googleapis.com/css2?family=Besley:ital,wght@0,400;1,900&display=swap'); 4 | 5 | body { 6 | margin: 0; 7 | background: #eee; 8 | font-family: Besley, serif; 9 | } 10 | 11 | .header { 12 | background: white; 13 | border-bottom: 1px solid #ddd; 14 | box-shadow: 0 0 8px rgba(0,0,0,.1); 15 | } 16 | 17 | .profile-image { 18 | background: rebeccapurple; 19 | box-shadow: inset 2px 2px 4px rgba(0,0,0,.5); 20 | border-radius: 50%; 21 | width: 48px; 22 | height: 48px; 23 | } 24 | 25 | .logo { 26 | color: rebeccapurple; 27 | font-size: 32px; 28 | font-weight: 900; 29 | font-style: italic; 30 | } 31 | 32 | button { 33 | border: none; 34 | border-radius: 8px; 35 | background: rebeccapurple; 36 | color: white; 37 | padding: 8px 24px; 38 | } 39 | 40 | a { 41 | /* this removes the line under our links */ 42 | text-decoration: none; 43 | color: rebeccapurple; 44 | } 45 | 46 | ul { 47 | list-style-type: none; 48 | } 49 | -------------------------------------------------------------------------------- /flex/04-flex-information/README.md: -------------------------------------------------------------------------------- 1 | # A very common website feature 2 | 3 | The goal of this exercise is to recreate a section that is found on many informational websites. 4 | 5 | For this one you will need to edit the HTML a little bit too. We can't be making things _too_ easy for you. You'll want to add containers around the various elements so that you can flex them. Good luck! 6 | 7 | ## Desired outcome 8 | 9 | ![desired outcome](./desired-outcome.png) 10 | 11 | ### Self Check 12 | 13 | - All items are centered on the page (horizontally, not vertically). 14 | - The title is centered on the page. 15 | - There is 32px between the title and the 'items.' 16 | - There is 52px between each item. 17 | - The items are arranged horizontally on the page. 18 | - The items are only 200px wide and the text wraps. 19 | - The item text is centered. 20 | -------------------------------------------------------------------------------- /flex/04-flex-information/desired-outcome.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ardnyx/css-exercises/9ab349e7d96a947cdfb52745a86b7fee2e954ec0/flex/04-flex-information/desired-outcome.png -------------------------------------------------------------------------------- /flex/04-flex-information/images/barberry.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ardnyx/css-exercises/9ab349e7d96a947cdfb52745a86b7fee2e954ec0/flex/04-flex-information/images/barberry.png -------------------------------------------------------------------------------- /flex/04-flex-information/images/chilli.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ardnyx/css-exercises/9ab349e7d96a947cdfb52745a86b7fee2e954ec0/flex/04-flex-information/images/chilli.png -------------------------------------------------------------------------------- /flex/04-flex-information/images/pepper.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ardnyx/css-exercises/9ab349e7d96a947cdfb52745a86b7fee2e954ec0/flex/04-flex-information/images/pepper.png -------------------------------------------------------------------------------- /flex/04-flex-information/images/saffron.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ardnyx/css-exercises/9ab349e7d96a947cdfb52745a86b7fee2e954ec0/flex/04-flex-information/images/saffron.png -------------------------------------------------------------------------------- /flex/04-flex-information/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Information 8 | 9 | 10 | 11 |
Information!
12 | 13 | barberry 14 |
This is a type of plant. We love this one.
15 | 16 | chili 17 |
This is another type of plant. Isn't it nice?
18 | 19 | pepper 20 |
We have so many plants. Yay plants.
21 | 22 | saffron 23 |
I'm running out of things to say about plants.
24 | 25 | 26 | 29 | 30 | -------------------------------------------------------------------------------- /flex/04-flex-information/solution/images/barberry.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ardnyx/css-exercises/9ab349e7d96a947cdfb52745a86b7fee2e954ec0/flex/04-flex-information/solution/images/barberry.png -------------------------------------------------------------------------------- /flex/04-flex-information/solution/images/chilli.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ardnyx/css-exercises/9ab349e7d96a947cdfb52745a86b7fee2e954ec0/flex/04-flex-information/solution/images/chilli.png -------------------------------------------------------------------------------- /flex/04-flex-information/solution/images/pepper.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ardnyx/css-exercises/9ab349e7d96a947cdfb52745a86b7fee2e954ec0/flex/04-flex-information/solution/images/pepper.png -------------------------------------------------------------------------------- /flex/04-flex-information/solution/images/saffron.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ardnyx/css-exercises/9ab349e7d96a947cdfb52745a86b7fee2e954ec0/flex/04-flex-information/solution/images/saffron.png -------------------------------------------------------------------------------- /flex/04-flex-information/solution/solution.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: 'Courier New', Courier, monospace; 3 | } 4 | 5 | img { 6 | width: 100px; 7 | height: 100px; 8 | } 9 | 10 | .title { 11 | font-size: 36px; 12 | font-weight: 900; 13 | } 14 | 15 | /* do not edit this footer */ 16 | .footer { 17 | position: fixed; 18 | bottom: 0; 19 | left: 0; 20 | right: 0; 21 | height: 52px; 22 | display: flex; 23 | align-items: center; 24 | justify-content: center; 25 | background: #eee; 26 | } 27 | 28 | /* SOLUTION */ 29 | 30 | body { 31 | text-align: center; 32 | } 33 | 34 | .title { 35 | margin-bottom: 32px; 36 | } 37 | 38 | .container { 39 | display: flex; 40 | justify-content: center; 41 | gap: 52px; 42 | } 43 | 44 | .info { 45 | max-width: 200px; 46 | } 47 | -------------------------------------------------------------------------------- /flex/04-flex-information/solution/solution.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Information 8 | 9 | 10 | 11 |
Information!
12 | 13 |
14 |
15 | barberry 16 |
This is a type of plant. We love this one.
17 |
18 |
19 | chili 20 |
This is another type of plant. Isn't it nice?
21 |
22 |
23 | pepper 24 |
We have so many plants. Yay plants.
25 |
26 |
27 | saffron 28 |
I'm running out of things to say about plants.
29 |
30 |
31 | 32 | 33 | 36 | 37 | -------------------------------------------------------------------------------- /flex/04-flex-information/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: 'Courier New', Courier, monospace; 3 | } 4 | 5 | img { 6 | width: 100px; 7 | height: 100px; 8 | } 9 | 10 | .title { 11 | font-size: 36px; 12 | font-weight: 900; 13 | } 14 | 15 | /* do not edit this footer */ 16 | .footer { 17 | position: fixed; 18 | bottom: 0; 19 | left: 0; 20 | right: 0; 21 | height: 52px; 22 | display: flex; 23 | align-items: center; 24 | justify-content: center; 25 | background: #eee; 26 | } -------------------------------------------------------------------------------- /flex/05-flex-modal/README.md: -------------------------------------------------------------------------------- 1 | # A common 'modal' style 2 | This one is another very common pattern on the web. The solution to this one is _simple_... but it might not be immediately obvious to you. You'll need to edit the HTML a bit to get everything where it needs to be. 3 | 4 | ### A hint 5 | Depending on how you approach this one, you might need to revisit the `flex-shrink` property to keep a flex item from getting smashed. In addition, pay attention to the structure of the html, specifically look into adding an additional container surrounding the header, button, main text, cancel, and continue divs; and look into moving the header div to encompass the button as well. 6 | 7 | ## Desired outcome 8 | 9 | ![desired outcome](./desired-outcome.png) 10 | 11 | ### Self Check 12 | 13 | - The blue icon is aligned to the left. 14 | - 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). 15 | - There is padding around the edge of the modal. 16 | - The header, text, and buttons are aligned with each other. 17 | - The header is bold and a slightly larger text-size than the text. 18 | - The close button is vertically aligned with the header, and aligned in the top-right of the card. 19 | -------------------------------------------------------------------------------- /flex/05-flex-modal/desired-outcome.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ardnyx/css-exercises/9ab349e7d96a947cdfb52745a86b7fee2e954ec0/flex/05-flex-modal/desired-outcome.png -------------------------------------------------------------------------------- /flex/05-flex-modal/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Modal 9 | 10 | 11 | 19 | 20 | -------------------------------------------------------------------------------- /flex/05-flex-modal/solution/solution.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); 2 | 3 | html, body { 4 | height: 100%; 5 | } 6 | 7 | body { 8 | font-family: Roboto, sans-serif; 9 | margin: 0; 10 | background: #aaa; 11 | color: #333; 12 | /* I'll give you this one for free */ 13 | display: flex; 14 | align-items: center; 15 | justify-content: center; 16 | } 17 | 18 | .modal { 19 | background: white; 20 | width: 480px; 21 | border-radius: 10px; 22 | box-shadow: 2px 4px 16px rgba(0,0,0,.2); 23 | } 24 | 25 | .icon { 26 | color: royalblue; 27 | font-size: 26px; 28 | font-weight: 700; 29 | background: lavender; 30 | width: 42px; 31 | height: 42px; 32 | border-radius: 50%; 33 | display: flex; 34 | align-items: center; 35 | justify-content: center; 36 | } 37 | 38 | .close-button { 39 | background: #eee; 40 | border-radius: 50%; 41 | color: #888; 42 | font-weight: 400; 43 | font-size: 16px; 44 | height: 24px; 45 | width: 24px; 46 | display: flex; 47 | align-items: center; 48 | justify-content: center; 49 | border: 1px solid #eee; 50 | padding: 0; 51 | } 52 | 53 | button { 54 | cursor: pointer; 55 | padding: 8px 16px; 56 | border-radius: 8px; 57 | } 58 | 59 | button.continue { 60 | background: royalblue; 61 | border: 1px solid royalblue; 62 | color: white; 63 | } 64 | 65 | button.cancel { 66 | background: white; 67 | border: 1px solid #ddd; 68 | color: royalblue; 69 | } 70 | 71 | /* SOLUTION: */ 72 | 73 | .modal { 74 | display: flex; 75 | gap: 16px; 76 | padding: 16px; 77 | } 78 | 79 | .icon { 80 | /* this keeps the icon from getting smashed by the text */ 81 | flex-shrink: 0; 82 | } 83 | /* header container should be wrapped around the button element as well in order for flex style to work */ 84 | .header { 85 | display: flex; 86 | align-items: center; 87 | justify-content: space-between; 88 | font-size: 18px; 89 | font-weight: 700; 90 | margin-bottom: 8px; 91 | } 92 | 93 | .text { 94 | margin-bottom: 16px; 95 | } 96 | -------------------------------------------------------------------------------- /flex/05-flex-modal/solution/solution.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Modal 9 | 10 | 11 | 24 | 25 | -------------------------------------------------------------------------------- /flex/05-flex-modal/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); 2 | 3 | html, body { 4 | height: 100%; 5 | } 6 | 7 | body { 8 | font-family: Roboto, sans-serif; 9 | margin: 0; 10 | background: #aaa; 11 | color: #333; 12 | /* I'll give you this one for free lol */ 13 | display: flex; 14 | align-items: center; 15 | justify-content: center; 16 | } 17 | 18 | .modal { 19 | background: white; 20 | width: 480px; 21 | border-radius: 10px; 22 | box-shadow: 2px 4px 16px rgba(0,0,0,.2); 23 | } 24 | 25 | .icon { 26 | color: royalblue; 27 | font-size: 26px; 28 | font-weight: 700; 29 | background: lavender; 30 | width: 42px; 31 | height: 42px; 32 | border-radius: 50%; 33 | display: flex; 34 | align-items: center; 35 | justify-content: center; 36 | } 37 | 38 | .close-button { 39 | background: #eee; 40 | border-radius: 50%; 41 | color: #888; 42 | font-weight: 400; 43 | font-size: 16px; 44 | height: 24px; 45 | width: 24px; 46 | display: flex; 47 | align-items: center; 48 | justify-content: center; 49 | border: 1px solid #eee; 50 | padding: 0; 51 | } 52 | 53 | button { 54 | cursor: pointer; 55 | padding: 8px 16px; 56 | border-radius: 8px; 57 | } 58 | 59 | button.continue { 60 | background: royalblue; 61 | border: 1px solid royalblue; 62 | color: white; 63 | } 64 | 65 | button.cancel { 66 | background: white; 67 | border: 1px solid #ddd; 68 | color: royalblue; 69 | } -------------------------------------------------------------------------------- /flex/06-flex-layout/README.md: -------------------------------------------------------------------------------- 1 | # An entire page! 2 | 3 | Flexbox is useful for laying out entire pages as well as the smaller components we've already been working with. For this exercise, we're leaving you with a little more work to do, with some things you may not have encountered yet. It's perfectly acceptable to google things you're unsure of! 4 | 5 | ### Hints 6 | - You may want to search something like `CSS remove list bullets`. We've done this for you in previous examples, but not here. Yay learning. 7 | - Finding out how to style links in CSS might help you get rid of that pesky underline decoration... 8 | - We've added `height: 100vh` to the `body`... this makes the body exactly the same height as the viewport. To stick the footer to the bottom you will need to use flex and change the direction to column. 9 | 10 | ## Desired Outcome 11 | ![desired outcome](./desired-outcome.png) 12 | 13 | ### Self Check 14 | 15 | - 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. 16 | - The header and footer have padding. 17 | - The links in the header and footer are pushed to either side. 18 | - There is space between the links in the header and footer. 19 | - The footer has a light gray background (`#eeeeee`). 20 | - The logo, input and buttons are centered in the screen. 21 | - The buttons have an appropriate amount of padding. 22 | - There is space between the logo, input and buttons. 23 | -------------------------------------------------------------------------------- /flex/06-flex-layout/desired-outcome.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ardnyx/css-exercises/9ab349e7d96a947cdfb52745a86b7fee2e954ec0/flex/06-flex-layout/desired-outcome.png -------------------------------------------------------------------------------- /flex/06-flex-layout/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | LAYOUT 8 | 9 | 10 | 11 |
12 | 16 | 20 |
21 |
22 | Project logo. Represents odin with the project name. 23 |
24 | 25 |
26 |
27 | 28 | 29 |
30 |
31 | 41 | 42 | -------------------------------------------------------------------------------- /flex/06-flex-layout/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ardnyx/css-exercises/9ab349e7d96a947cdfb52745a86b7fee2e954ec0/flex/06-flex-layout/logo.png -------------------------------------------------------------------------------- /flex/06-flex-layout/solution/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ardnyx/css-exercises/9ab349e7d96a947cdfb52745a86b7fee2e954ec0/flex/06-flex-layout/solution/logo.png -------------------------------------------------------------------------------- /flex/06-flex-layout/solution/solution.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); 2 | 3 | body { 4 | height: 100vh; 5 | margin: 0; 6 | overflow: hidden; 7 | font-family: Roboto, sans-serif; 8 | } 9 | 10 | img { 11 | width: 600px; 12 | } 13 | 14 | button { 15 | font-family: Roboto, sans-serif; 16 | border: none; 17 | border-radius: 8px; 18 | background: #eee; 19 | } 20 | 21 | input { 22 | border: 1px solid #ddd; 23 | border-radius: 16px; 24 | padding: 8px 24px; 25 | width: 400px; 26 | } 27 | 28 | /* SOLUTION */ 29 | 30 | body { 31 | display: flex; 32 | flex-direction: column; 33 | } 34 | 35 | button { 36 | padding: 8px 16px; 37 | } 38 | 39 | .content { 40 | flex: 1; 41 | display: flex; 42 | align-items: center; 43 | justify-content: center; 44 | flex-direction: column; 45 | gap: 16px; 46 | } 47 | 48 | a { 49 | color: #666; 50 | text-decoration: none; 51 | } 52 | 53 | .header, 54 | .footer { 55 | display: flex; 56 | justify-content: space-between; 57 | padding: 16px; 58 | } 59 | 60 | .footer { 61 | background: #eee; 62 | } 63 | 64 | ul { 65 | display: flex; 66 | list-style: none; 67 | margin: 0; 68 | padding: 0; 69 | gap: 16px 70 | } -------------------------------------------------------------------------------- /flex/06-flex-layout/solution/solution.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | LAYOUT 8 | 9 | 10 | 11 |
12 | 16 | 20 |
21 |
22 | Project logo. Represents odin with the project name. 23 |
24 | 25 |
26 |
27 | 28 | 29 |
30 |
31 | 41 | 42 | -------------------------------------------------------------------------------- /flex/06-flex-layout/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); 2 | 3 | body { 4 | height: 100vh; 5 | margin: 0; 6 | overflow: hidden; 7 | font-family: Roboto, sans-serif; 8 | } 9 | 10 | img { 11 | width: 600px; 12 | } 13 | 14 | button { 15 | font-family: Roboto, sans-serif; 16 | border: none; 17 | border-radius: 8px; 18 | background: #eee; 19 | } 20 | 21 | input { 22 | border: 1px solid #ddd; 23 | border-radius: 16px; 24 | padding: 8px 24px; 25 | width: 400px; 26 | margin-bottom: 16px; 27 | } 28 | -------------------------------------------------------------------------------- /flex/07-flex-layout-2/README.md: -------------------------------------------------------------------------------- 1 | # The Holy Grail of Layout 2 | 3 | In this last flexbox exercise you're going to recreate an incredibly common website layout. It is so common that it is often called the [Holy Grail](https://www.google.com/search?q=holy+grail+layout&tbm=isch&sclient=img) layout... and with flexbox it is actually pretty easy to pull off. 4 | 5 | As with the previous exercise, we've left a little more for you to do. 6 | 7 | ### Hints 8 | - You will need to change the flex-direction to push the footer down. 9 | - You will need to add some divs as containers to get things to line up correctly. 10 | - `flex-wrap` will help get the cards aligned correctly. 11 | - Make sure you define how much space the cards should take up, in order for `flex-wrap` to work as intended. 12 | 13 | ## Desired outcome 14 | 15 | ![desired outcome](./desired-outcome.png) 16 | 17 | The number of cards lined up in that section will change based on the width of your screen, so don't stress about getting _exactly_ a 2x3 or 3x2 grid. 18 | 19 | On a smaller screen it will look like this: 20 | 21 | ![smaller](./desired-outcome-smaller.png) 22 | 23 | ### Self Check 24 | - The header text is size 32px and weight 900. 25 | - The header text is vertically centered and 16px from the edge of the screen. 26 | - 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). 27 | - The footer text is centered horizontally and vertically. 28 | - The sidebar and cards take up all available space above the footer. 29 | - The sidebar is 300px wide (and it doesn't shrink). 30 | - The sidebar links are size 24px, are white, and do not have the underline text decoration. 31 | - The sidebar has 16px padding. 32 | - There is 32px padding around the 'cards' section. 33 | - The cards are arranged horizontally, but wrap to multiple lines when they run out of room on the page. 34 | -------------------------------------------------------------------------------- /flex/07-flex-layout-2/desired-outcome-smaller.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ardnyx/css-exercises/9ab349e7d96a947cdfb52745a86b7fee2e954ec0/flex/07-flex-layout-2/desired-outcome-smaller.png -------------------------------------------------------------------------------- /flex/07-flex-layout-2/desired-outcome.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ardnyx/css-exercises/9ab349e7d96a947cdfb52745a86b7fee2e954ec0/flex/07-flex-layout-2/desired-outcome.png -------------------------------------------------------------------------------- /flex/07-flex-layout-2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | The Holy Grail 8 | 9 | 10 | 11 |
12 | MY AWESOME WEBSITE 13 |
14 | 15 | 23 | 24 |
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora, eveniet? Dolorem dignissimos maiores non delectus possimus dolor nulla repudiandae vitae provident quae, obcaecati ipsam unde impedit corrupti veritatis minima porro?
25 |
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quasi quaerat qui iure ipsam maiores velit tempora, deleniti nesciunt fuga suscipit alias vero rem, corporis officia totam saepe excepturi odit ea.
26 |
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis illo ex quas, commodi eligendi aliquam ut, dolor, atque aliquid iure nulla. Laudantium optio accusantium quaerat fugiat, natus officia esse autem?
27 |
Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus nihil impedit eius amet adipisci dolorum vel nostrum sit excepturi corporis tenetur cum, dolore incidunt blanditiis. Unde earum minima laboriosam eos!
28 |
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis illo ex quas, commodi eligendi aliquam ut, dolor, atque aliquid iure nulla. Laudantium optio accusantium quaerat fugiat, natus officia esse autem?
29 |
Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus nihil impedit eius amet adipisci dolorum vel nostrum sit excepturi corporis tenetur cum, dolore incidunt blanditiis. Unde earum minima laboriosam eos!
30 | 31 | 34 | 35 | -------------------------------------------------------------------------------- /flex/07-flex-layout-2/solution/solution.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; 3 | margin: 0; 4 | min-height: 100vh; 5 | } 6 | 7 | .header { 8 | height: 72px; 9 | background: darkmagenta; 10 | color: white; 11 | } 12 | 13 | .footer { 14 | height: 72px; 15 | background: #eee; 16 | color: darkmagenta; 17 | } 18 | 19 | .sidebar { 20 | width: 300px; 21 | background: royalblue; 22 | box-sizing: border-box; 23 | } 24 | 25 | .card { 26 | border: 1px solid #eee; 27 | box-shadow: 2px 4px 16px rgba(0,0,0,.06); 28 | border-radius: 4px; 29 | } 30 | 31 | /* SOLUTION */ 32 | 33 | body { 34 | display: flex; 35 | flex-direction: column; 36 | } 37 | 38 | .header { 39 | display: flex; 40 | align-items: center; 41 | padding: 0 16px; 42 | font-size: 32px; 43 | font-weight: 900; 44 | } 45 | 46 | .body { 47 | flex: 1; 48 | display: flex; 49 | } 50 | 51 | .sidebar { 52 | flex-shrink: 0; 53 | padding: 16px; 54 | } 55 | 56 | ul { 57 | list-style-type: none; 58 | margin: 0; 59 | padding: 0; 60 | } 61 | 62 | li { 63 | margin-bottom: 16px; 64 | } 65 | 66 | a { 67 | color: white; 68 | text-decoration: none; 69 | font-size: 24px; 70 | } 71 | 72 | .container { 73 | padding: 32px; 74 | display: flex; 75 | flex-wrap: wrap; 76 | } 77 | 78 | .card { 79 | padding: 16px; 80 | margin: 16px; 81 | width: 300px; 82 | } 83 | 84 | .footer { 85 | display: flex; 86 | align-items: center; 87 | justify-content: center; 88 | } 89 | -------------------------------------------------------------------------------- /flex/07-flex-layout-2/solution/solution.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | The Holy Grail 8 | 9 | 10 | 11 |
12 | MY AWESOME WEBSITE 13 |
14 |
15 | 23 |
24 |
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora, eveniet? Dolorem dignissimos maiores non delectus possimus dolor nulla repudiandae vitae provident quae, obcaecati ipsam unde impedit corrupti veritatis minima porro?
25 |
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quasi quaerat qui iure ipsam maiores velit tempora, deleniti nesciunt fuga suscipit alias vero rem, corporis officia totam saepe excepturi odit ea.
26 |
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis illo ex quas, commodi eligendi aliquam ut, dolor, atque aliquid iure nulla. Laudantium optio accusantium quaerat fugiat, natus officia esse autem?
27 |
Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus nihil impedit eius amet adipisci dolorum vel nostrum sit excepturi corporis tenetur cum, dolore incidunt blanditiis. Unde earum minima laboriosam eos!
28 |
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis illo ex quas, commodi eligendi aliquam ut, dolor, atque aliquid iure nulla. Laudantium optio accusantium quaerat fugiat, natus officia esse autem?
29 |
Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus nihil impedit eius amet adipisci dolorum vel nostrum sit excepturi corporis tenetur cum, dolore incidunt blanditiis. Unde earum minima laboriosam eos!
30 |
31 |
32 | 35 | 36 | -------------------------------------------------------------------------------- /flex/07-flex-layout-2/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; 3 | margin: 0; 4 | min-height: 100vh; 5 | } 6 | 7 | .header { 8 | height: 72px; 9 | background: darkmagenta; 10 | color: white; 11 | } 12 | 13 | .footer { 14 | height: 72px; 15 | background: #eee; 16 | color: darkmagenta; 17 | } 18 | 19 | .sidebar { 20 | width: 300px; 21 | background: royalblue; 22 | box-sizing: border-box; 23 | } 24 | 25 | .card { 26 | border: 1px solid #eee; 27 | box-shadow: 2px 4px 16px rgba(0,0,0,.06); 28 | border-radius: 4px; 29 | } -------------------------------------------------------------------------------- /foundations/01-css-methods/README.md: -------------------------------------------------------------------------------- 1 | # Methods for Adding CSS 2 | In this exercise, you're going to practice adding CSS to an HTML file using all three methods: external CSS, internal CSS, and inline CSS. You should only be using type selectors for this exercise when adding styles via the external and internal methods. You should also use keywords for colors (e.g. "blue") instead of using RGB or HEX values. 3 | 4 | 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. 5 | 6 | > ## quick tip: 7 | > 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. 8 | 9 | The properties you need to add to each element are: 10 | 11 | * `div`: a red background, white text, a font size of 32px, center aligned, and bold 12 | * `p`: a green background, white text, and a font size of 18px 13 | * `button`: an orange background and a font size of 18px 14 | 15 | ## Desired Outcome 16 | ![desired outcome](./desired-outcome.png) 17 | 18 | 19 | ### Self Check 20 | - Did you use all three methods of adding CSS to an HTML file? 21 | - Did you properly link the external CSS file in the HTML file? 22 | - Does the `div` element have CSS added via the external method? 23 | - Does the `p` element have CSS added via the internal method? 24 | - Does the `button` element have CSS added via the inline method? 25 | -------------------------------------------------------------------------------- /foundations/01-css-methods/desired-outcome.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ardnyx/css-exercises/9ab349e7d96a947cdfb52745a86b7fee2e954ec0/foundations/01-css-methods/desired-outcome.png -------------------------------------------------------------------------------- /foundations/01-css-methods/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Methods for Adding CSS 8 | 9 | 10 |
Style me via the external method!
11 |

I would like to be styled with the internal method, please.

12 | 13 | 14 | -------------------------------------------------------------------------------- /foundations/01-css-methods/solution/solution.css: -------------------------------------------------------------------------------- 1 | div { 2 | background-color: red; 3 | color: white; 4 | font-size: 32px; 5 | text-align: center; 6 | font-weight: bold; 7 | } 8 | -------------------------------------------------------------------------------- /foundations/01-css-methods/solution/solution.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Methods for Adding CSS 8 | 9 | 10 | 17 | 18 | 19 |
Style me via the external method!
20 |

I would like to be styled with the internal method, please.

21 | 22 | 23 | -------------------------------------------------------------------------------- /foundations/02-class-id-selectors/README.md: -------------------------------------------------------------------------------- 1 | # Class and ID Selectors 2 | Knowing how to add class and ID attributes to HTML elements, as well as use their respective selectors, is invaluable. It's important to practice using them. 3 | 4 | There are several elements in the HTML file provided, which you will have to add either class or ID attributes to, as noted in the outcome image below. You will then have to add rules in the CSS file provided using the correct selector syntax. Look over the outcome image carefully, and try to keep in mind which elements look similarly styled (classes), which ones may be completely unique from the rest (ID), and which ones have slight variations from others (multiple classes). 5 | 6 | It isn't entirely important which class or ID values you use, as the focus here is on being able to add the attributes and use the correct selector syntax to style elements. For the colors in this exercise, try using a non-keyword value (RGB, HEX, or HSL). The properties you need to add to each element are: 7 | 8 | * **All odd numbered elements**: a light red/pink background, and a list of fonts containing `Verdana` and `DejaVu Sans` with `sans-serif` as a fallback 9 | * **The second element**: blue text and a font size of 36px 10 | * **The third element**: in addition to the styles for all odd numbered elements, add a font size of 24px 11 | * **The fourth element**: a light green background, a font size of 24px, and bold 12 | 13 | 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! 14 | 15 | > ### Note: 16 | > Part of your task is to add a font to _some_ of these items. Your browser's font's might be different than the one displayed in the desired outcome image. As long as you confirm that the fonts _are_ being applied to the right lines any differences are okay for this exercise. 17 | 18 | ## Desired Outcome 19 | ![desired outcome](./desired-outcome.png) 20 | 21 | 22 | ### Self Check 23 | - Do the odd numbered `p` elements share a class? 24 | - Do the even numbered `div` elements have unique IDs? 25 | - Does the Number 3 element have multiple classes? 26 | -------------------------------------------------------------------------------- /foundations/02-class-id-selectors/desired-outcome.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ardnyx/css-exercises/9ab349e7d96a947cdfb52745a86b7fee2e954ec0/foundations/02-class-id-selectors/desired-outcome.png -------------------------------------------------------------------------------- /foundations/02-class-id-selectors/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Class and ID Selectors 8 | 9 | 10 | 11 |

Number 1 - I'm a class!

12 |
Number 2 - I'm one ID.
13 |

Number 3 - I'm a class, but cooler!

14 |
Number 4 - I'm another ID.
15 |

Number 5 - I'm a class!

16 | 17 | -------------------------------------------------------------------------------- /foundations/02-class-id-selectors/solution/solution.css: -------------------------------------------------------------------------------- 1 | .odd { 2 | background-color: rgb(255, 167, 167); 3 | font-family: Verdana, "DejaVu Sans", sans-serif; 4 | } 5 | 6 | .adjust-font-size { 7 | font-size: 24px; 8 | } 9 | 10 | #two { 11 | color: #0000ff; 12 | font-size: 36px; 13 | } 14 | 15 | /* 16 | In the id selector 'four' below, we could have also 17 | added a rule to set the font size to 24px. 18 | 19 | However, since the elements 'Number 3' and 'Number 4' 20 | in the HTML file share the same font size, we reused 21 | the 'adjust-font-size' class above to help reduce 22 | duplicate code. 23 | */ 24 | #four { 25 | background-color: hsl(120, 100%, 75%); 26 | font-weight: bold; 27 | } 28 | -------------------------------------------------------------------------------- /foundations/02-class-id-selectors/solution/solution.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Class and ID Selectors 8 | 9 | 10 | 11 |

Number 1 - I'm a class!

12 |
Number 2 - I'm one ID.
13 |

Number 3 - I'm a class, but cooler!

14 |
Number 4 - I'm another ID.
15 |

Number 5 - I'm a class!

16 | 17 | -------------------------------------------------------------------------------- /foundations/02-class-id-selectors/style.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ardnyx/css-exercises/9ab349e7d96a947cdfb52745a86b7fee2e954ec0/foundations/02-class-id-selectors/style.css -------------------------------------------------------------------------------- /foundations/03-grouping-selectors/README.md: -------------------------------------------------------------------------------- 1 | # Grouping Selectors 2 | 3 | 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. 4 | 5 | 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. 6 | 7 | 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: 8 | 9 | * **The first element**: a black background and white text 10 | * **The second element**: a yellow background 11 | * **Both elements**: a font size of 28px and a list of fonts containing `Helvetica` and `Times New Roman`, with `sans-serif` as a fallback 12 | 13 | ## Desired Outcome 14 | ![desired outcome](./desired-outcome.png) 15 | 16 | 17 | ### Self Check 18 | - Does each element have a unique class name? 19 | - Did you use the grouping selector for styles that both elements share? 20 | - Did you make separate rules for the styles unique to each element? 21 | -------------------------------------------------------------------------------- /foundations/03-grouping-selectors/desired-outcome.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ardnyx/css-exercises/9ab349e7d96a947cdfb52745a86b7fee2e954ec0/foundations/03-grouping-selectors/desired-outcome.png -------------------------------------------------------------------------------- /foundations/03-grouping-selectors/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Grouping Selectors 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /foundations/03-grouping-selectors/solution/solution.css: -------------------------------------------------------------------------------- 1 | 2 | .inverted, 3 | .fancy { 4 | font-family: Helvetica, "Times New Roman", sans-serif; 5 | font-size: 28px; 6 | } 7 | 8 | .inverted { 9 | background-color: black; 10 | color: white; 11 | } 12 | 13 | .fancy { 14 | background-color: yellow; 15 | } -------------------------------------------------------------------------------- /foundations/03-grouping-selectors/solution/solution.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Grouping Selectors 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /foundations/03-grouping-selectors/style.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ardnyx/css-exercises/9ab349e7d96a947cdfb52745a86b7fee2e954ec0/foundations/03-grouping-selectors/style.css -------------------------------------------------------------------------------- /foundations/04-chaining-selectors/README.md: -------------------------------------------------------------------------------- 1 | # Chaining Selectors 2 | 3 | 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). 4 | 5 | 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. 6 | 7 | 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. 8 | 9 | The properties you need to add to each element are: 10 | 11 | * Make the element with both the `avatar` and `proportioned` classes 300 pixels wide, then give it a height so that it retains its original square proportions (don't hardcode in a pixel value for the height!). 12 | * 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). 13 | 14 | ## Desired Outcome 15 | ![desired outcome](./desired-outcome.png) 16 | 17 | ### Self Check 18 | - Did you properly chain class selectors for each rule? 19 | - Does the `proportioned` image retain its original square proportions? 20 | - Does the `distorted` image end up looking squished and, well, distorted? 21 | -------------------------------------------------------------------------------- /foundations/04-chaining-selectors/desired-outcome.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ardnyx/css-exercises/9ab349e7d96a947cdfb52745a86b7fee2e954ec0/foundations/04-chaining-selectors/desired-outcome.png -------------------------------------------------------------------------------- /foundations/04-chaining-selectors/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Chaining Selectors 8 | 9 | 10 | 11 | 12 |
13 | Woman with glasses 14 | Man with surprised expression 15 |
16 | 17 |
18 | Woman with glasses 19 | Man with surprised expression 20 |
21 | 22 | -------------------------------------------------------------------------------- /foundations/04-chaining-selectors/pexels-andrea-piacquadio-3777931.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ardnyx/css-exercises/9ab349e7d96a947cdfb52745a86b7fee2e954ec0/foundations/04-chaining-selectors/pexels-andrea-piacquadio-3777931.jpg -------------------------------------------------------------------------------- /foundations/04-chaining-selectors/pexels-katho-mutodo-8434791.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ardnyx/css-exercises/9ab349e7d96a947cdfb52745a86b7fee2e954ec0/foundations/04-chaining-selectors/pexels-katho-mutodo-8434791.jpg -------------------------------------------------------------------------------- /foundations/04-chaining-selectors/solution/solution.css: -------------------------------------------------------------------------------- 1 | .avatar.proportioned { 2 | height: auto; 3 | width: 300px; 4 | } 5 | 6 | .avatar.distorted { 7 | height: 400px; 8 | width: 200px; 9 | } -------------------------------------------------------------------------------- /foundations/04-chaining-selectors/solution/solution.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Chaining Selectors 8 | 9 | 10 | 11 |
12 | Woman with glasses 13 | Man with surprised expression 14 |
15 |
16 | Woman with glasses 17 | Man with surprised expression 18 |
19 | 20 | -------------------------------------------------------------------------------- /foundations/04-chaining-selectors/style.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ardnyx/css-exercises/9ab349e7d96a947cdfb52745a86b7fee2e954ec0/foundations/04-chaining-selectors/style.css -------------------------------------------------------------------------------- /foundations/05-descendant-combinator/README.md: -------------------------------------------------------------------------------- 1 | # Descendant Combinator 2 | Understanding how combinators work can become a lot easier when you start playing around with them and see what exactly is affected by them versus what isn't. 3 | 4 | The goal of this exercise is to apply styles to elements that are descendants of another element, while leaving elements that *aren't* descendants of that element unstyled. 5 | 6 | You can use either type or class selectors for this exercise; use whichever you may feel you want to practice with more. The HTML file is set up (so no need to edit anything in it) such that any combination of selectors will work, so if you're feeling adventurous you can even try combining a type *and* class selector for the descendant combinator. 7 | 8 | The properties you need to add are: 9 | 10 | * 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. 11 | 12 | ## Desired Outcome 13 | ![desired outcome](./desired-outcome.png) 14 | 15 | 16 | ### Self Check 17 | - Do the elements that contain the text "This should be styled" have the correct styles applied? 18 | - Do the elements that contain the text "This should be unstyled" have no styles applied? 19 | -------------------------------------------------------------------------------- /foundations/05-descendant-combinator/desired-outcome.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ardnyx/css-exercises/9ab349e7d96a947cdfb52745a86b7fee2e954ec0/foundations/05-descendant-combinator/desired-outcome.png -------------------------------------------------------------------------------- /foundations/05-descendant-combinator/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Descendant Combinator 8 | 9 | 10 | 11 |
12 |

This should be styled.

13 |
14 |

This should be unstyled.

15 |

This should be unstyled.

16 |
17 |

This should be styled.

18 |

This should be styled.

19 |
20 | 21 | -------------------------------------------------------------------------------- /foundations/05-descendant-combinator/solution/solution.css: -------------------------------------------------------------------------------- 1 | .container .text { 2 | background-color: yellow; 3 | color: #E00000; 4 | font-size: 20px; 5 | text-align: center; 6 | } 7 | 8 | /* Below are some other possible descendant combinators: 9 | 10 | div p 11 | div .text 12 | .container p 13 | 14 | */ -------------------------------------------------------------------------------- /foundations/05-descendant-combinator/solution/solution.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Descendant Combinator 8 | 9 | 10 | 11 |
12 |

This should be styled.

13 |
14 |

This should be unstyled.

15 |

This should be unstyled.

16 |
17 |

This should be styled.

18 |

This should be styled.

19 |
20 | 21 | -------------------------------------------------------------------------------- /foundations/05-descendant-combinator/style.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ardnyx/css-exercises/9ab349e7d96a947cdfb52745a86b7fee2e954ec0/foundations/05-descendant-combinator/style.css -------------------------------------------------------------------------------- /foundations/06-cascade-fix/README.md: -------------------------------------------------------------------------------- 1 | # CSS Methods 2 | 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. 3 | 4 | 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**. 5 | 6 | There are multiple ways to solve this exercise, and we did our best to include all of the possible solutions for each element. 7 | 8 | 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. 9 | 10 | ## Desired Outcome 11 | ![desired outcome](./desired-outcome.png) 12 | 13 | ### Self Check 14 | - Did you make sure to not edit the HTML file? 15 | - If you added selectors to the CSS, do they target a valid HTML element? 16 | 17 | _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._ 18 | -------------------------------------------------------------------------------- /foundations/06-cascade-fix/desired-outcome.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ardnyx/css-exercises/9ab349e7d96a947cdfb52745a86b7fee2e954ec0/foundations/06-cascade-fix/desired-outcome.png -------------------------------------------------------------------------------- /foundations/06-cascade-fix/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Fix the Cascade 8 | 9 | 10 | 11 |

I'm just a paragraph with extra bold text!

12 |

I'm a smaller paragraph, also with extra bold text!

13 | 14 | 15 | 16 | 17 |
I'm a div with thin text!
18 |
I'm a div with thin text and a child div! 19 |
I'm a smaller child div with extra bold text.
20 |
21 | 22 | 23 | -------------------------------------------------------------------------------- /foundations/06-cascade-fix/solution/solution.css: -------------------------------------------------------------------------------- 1 | body{ 2 | font-family:Arial, Helvetica, sans-serif 3 | } 4 | 5 | .para, 6 | .small-para { 7 | color: hsl(0, 0%, 0%); 8 | font-weight: 800; 9 | } 10 | 11 | .para { 12 | font-size: 22px; 13 | } 14 | 15 | .button { 16 | background-color: rgb(255, 255, 255); 17 | color: rgb(0, 0, 0); 18 | font-size: 20px; 19 | } 20 | 21 | div.text { 22 | color: rgb(0, 0, 0); 23 | font-weight: 100; 24 | font-size: 22px; 25 | } 26 | 27 | /* SOLUTION */ 28 | 29 | /* 30 | For the following rule, we removed it from its original position in the file: 31 | 32 | .small-para { 33 | font-size: 14px; 34 | font-weight: 800; 35 | } 36 | 37 | Then we placed it after the .para selector, taking advantage of the rule order since both selectors have the same specificity. 38 | 39 | Another solution would be keeping it in its original place and just chaining selectors, giving this rule a higher specificity: 40 | 41 | p.small-para { 42 | font-size: 14px; 43 | font-weight: 800; 44 | } 45 | */ 46 | 47 | .small-para { 48 | font-size: 14px; 49 | font-weight: 800; 50 | } 51 | 52 | /* 53 | For the following rule we removed the original .confirm selector: 54 | 55 | .confirm { 56 | background: green; 57 | color: white; 58 | font-weight: bold; 59 | } 60 | 61 | Then we used an ID selector instead, since it has a higher specificity than the .button selector. 62 | 63 | Other solutions would be to simply move the .confirm rule below the .button rule, or to use the .button.confirm selector without moving it: 64 | 65 | .button.confirm { 66 | background: green; 67 | color: white; 68 | font-weight: bold; 69 | } 70 | */ 71 | 72 | #confirm-button { 73 | background: green; 74 | color: white; 75 | font-weight: bold; 76 | } 77 | 78 | /* 79 | For the following rule we first removed it from its original position in the file: 80 | 81 | .child { 82 | color: rgb(0, 0, 0); 83 | font-weight: 800; 84 | font-size: 14px; 85 | } 86 | 87 | Then we added another selector to create a descendant combinator. If we only created a descendant combinator, the specificity would be tied with the 88 | 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. 89 | 90 | Another solution would be to keep the rule where it was and just replace the div selector with the .text selector: 91 | 92 | .text .child { 93 | color: rgb(0, 0, 0); 94 | font-weight: 800; 95 | font-size: 14px; 96 | } 97 | */ 98 | 99 | div .child { 100 | color: rgb(0, 0, 0); 101 | font-weight: 800; 102 | font-size: 14px; 103 | } 104 | -------------------------------------------------------------------------------- /foundations/06-cascade-fix/solution/solution.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Fix the Cascade 9 | 10 | 11 | 12 |

I'm just a paragraph with extra bold text!

13 |

I'm a smaller paragraph, also with extra bold text!

14 | 15 | 16 | 17 | 18 |
I'm a div with thin text!
19 |
I'm a div with thin text and a child div! 20 |
I'm a smaller child div with extra bold text.
21 |
22 | 23 | 24 | -------------------------------------------------------------------------------- /foundations/06-cascade-fix/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: Arial, Helvetica, sans-serif; 3 | } 4 | 5 | .para, 6 | .small-para { 7 | color: hsl(0, 0%, 0%); 8 | font-weight: 800; 9 | } 10 | 11 | .small-para { 12 | font-size: 14px; 13 | font-weight: 800; 14 | } 15 | 16 | .para { 17 | font-size: 22px; 18 | } 19 | 20 | .confirm { 21 | background: green; 22 | color: white; 23 | font-weight: bold; 24 | } 25 | 26 | .button { 27 | background-color: rgb(255, 255, 255); 28 | color: rgb(0, 0, 0); 29 | font-size: 20px; 30 | } 31 | 32 | .child { 33 | color: rgb(0, 0, 0); 34 | font-weight: 800; 35 | font-size: 14px; 36 | } 37 | 38 | div.text { 39 | color: rgb(0, 0, 0); 40 | font-size: 22px; 41 | font-weight: 100; 42 | } 43 | -------------------------------------------------------------------------------- /grid/01-grid-layout-1/README.md: -------------------------------------------------------------------------------- 1 | # The Holy Grail Layout with Grid 2 | 3 | Now it's time to practice the Grid tools we've learned and create a layout that might seem familiar. We're going to make a Holy Grail Layout like the ones we created using Flexbox. The difference here is that we won't be relying on Flexbox for this exercise. We'll only be using Grid. You'll be able to see the benefits of Grid for yourself! 4 | 5 | ### Hints 6 | 7 | - You only need to add to the CSS selectors 8 | - Look back to the Creating a Grid lesson if you forget how to turn an element into a grid 9 | - Use fixed track sizes (e.g. pixels) for your columns and rows 10 | 11 | ## Desired Outcome 12 | 13 | ![desired outcome](./desired-outcome.png) 14 | 15 | ### Self Check 16 | 17 | - The gap is 15px 18 | - The grid has two columns 19 | - The grid has four rows 20 | - The second column is three times larger than the first 21 | - The third row is five times larger than the others 22 | - The header and footer elements span across both columns 23 | - The sidebar element only spans across the first column 24 | - The nav and article elements span across the second column 25 | -------------------------------------------------------------------------------- /grid/01-grid-layout-1/desired-outcome.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ardnyx/css-exercises/9ab349e7d96a947cdfb52745a86b7fee2e954ec0/grid/01-grid-layout-1/desired-outcome.png -------------------------------------------------------------------------------- /grid/01-grid-layout-1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | The Holy Grail 8 | 9 | 10 | 11 |
12 |
Header
13 | 14 | 15 |
Article 16 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

17 |

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur bibendum turpis quis interdum semper. Sed at pharetra neque, nec lacinia diam. Suspendisse quis faucibus mi, aliquam porttitor ipsum. Vivamus condimentum eros id mattis pharetra. Duis varius eros nibh. Donec a venenatis eros. Fusce in mauris massa. Donec est metus, rhoncus eu leo sed, aliquet posuere nisl.

18 |

Cras ut ex in nibh accumsan ullamcorper. Fusce rutrum, metus id porta porttitor, leo ipsum congue velit, eu hendrerit lectus nisi a odio. Pellentesque tristique eros id nibh finibus euismod. Cras suscipit volutpat elit eget pulvinar. Vivamus at blandit leo. Aenean sodales ex non massa efficitur, et egestas neque dapibus. In consequat hendrerit ex, nec finibus magna faucibus eu. Aliquam a libero non erat sollicitudin condimentum. In ac fringilla nisi. Sed pharetra ut turpis id luctus. Proin posuere tortor ac tempus luctus. Donec vitae est et neque faucibus posuere. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

19 |
20 | 21 |
22 | 23 | 24 | -------------------------------------------------------------------------------- /grid/01-grid-layout-1/solution/solution.css: -------------------------------------------------------------------------------- 1 | body, 2 | html { 3 | height: 100%; 4 | margin: 0; 5 | } 6 | 7 | .container { 8 | text-align: center; 9 | height: 100%; 10 | padding: 16px; 11 | box-sizing: border-box; 12 | } 13 | 14 | .container div { 15 | padding: 15px; 16 | font-size: 32px; 17 | font-family: Helvetica; 18 | font-weight: bold; 19 | color: white; 20 | border-radius: 15px; 21 | } 22 | 23 | .header { 24 | background-color: #006157 25 | } 26 | 27 | .sidebar { 28 | background-color: #005B94 29 | } 30 | 31 | .nav { 32 | background-color: #642cde 33 | } 34 | 35 | .article { 36 | background-color: #7E1DC3 37 | } 38 | 39 | .footer { 40 | background-color: #393f4d; 41 | } 42 | 43 | .article p { 44 | font-size: 18px; 45 | font-family: sans-serif; 46 | color: white; 47 | text-align: left; 48 | } 49 | 50 | /* SOLUTION */ 51 | 52 | .container { 53 | display: grid; 54 | grid-template-columns: 300px 900px; 55 | grid-template-rows: 100px 100px 500px 100px; 56 | gap: 15px; 57 | } 58 | 59 | .header { 60 | grid-column: 1 / 3; 61 | } 62 | 63 | .sidebar { 64 | grid-row: 2 / 4; 65 | } 66 | 67 | .footer { 68 | grid-column: 1 / 3; 69 | } -------------------------------------------------------------------------------- /grid/01-grid-layout-1/solution/solution.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | The Holy Grail 8 | 9 | 10 | 11 |
12 |
Header
13 | 14 | 15 |
Article 16 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

17 |

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur bibendum turpis quis interdum semper. Sed at pharetra neque, nec lacinia diam. Suspendisse quis faucibus mi, aliquam porttitor ipsum. Vivamus condimentum eros id mattis pharetra. Duis varius eros nibh. Donec a venenatis eros. Fusce in mauris massa. Donec est metus, rhoncus eu leo sed, aliquet posuere nisl.

18 |

Cras ut ex in nibh accumsan ullamcorper. Fusce rutrum, metus id porta porttitor, leo ipsum congue velit, eu hendrerit lectus nisi a odio. Pellentesque tristique eros id nibh finibus euismod. Cras suscipit volutpat elit eget pulvinar. Vivamus at blandit leo. Aenean sodales ex non massa efficitur, et egestas neque dapibus. In consequat hendrerit ex, nec finibus magna faucibus eu. Aliquam a libero non erat sollicitudin condimentum. In ac fringilla nisi. Sed pharetra ut turpis id luctus. Proin posuere tortor ac tempus luctus. Donec vitae est et neque faucibus posuere. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

19 |
20 | 21 |
22 | 23 | 24 | -------------------------------------------------------------------------------- /grid/01-grid-layout-1/style.css: -------------------------------------------------------------------------------- 1 | body, 2 | html { 3 | height: 100%; 4 | margin: 0; 5 | } 6 | 7 | .container { 8 | text-align: center; 9 | height: 100%; 10 | padding: 16px; 11 | box-sizing: border-box; 12 | } 13 | 14 | .container div { 15 | padding: 15px; 16 | font-size: 32px; 17 | font-family: Helvetica; 18 | font-weight: bold; 19 | color: white; 20 | border-radius: 15px; 21 | } 22 | 23 | .header { 24 | background-color: #006157; 25 | } 26 | 27 | .sidebar { 28 | background-color: #005B94; 29 | } 30 | 31 | .nav { 32 | background-color: #642cde; 33 | } 34 | 35 | .article { 36 | background-color: #7E1DC3; 37 | } 38 | 39 | .footer { 40 | background-color: #393f4d; 41 | } 42 | 43 | .article p { 44 | font-size: 18px; 45 | font-family: sans-serif; 46 | color: white; 47 | text-align: left; 48 | } -------------------------------------------------------------------------------- /grid/02-grid-layout-2/README.md: -------------------------------------------------------------------------------- 1 | # Responsive Holy Grail Layout with Grid 2 | 3 | For this exercise, we are going to take our Holy Grail Layout from the first exercise and make it responsive. To do this we will simply change our fixed track sizes to be dynamic. Consider this a warmup for the next exercise and make sure your layout is responding properly when resizing the browser window. 4 | 5 | ### Hints 6 | - You only need to add to the CSS selectors 7 | - Use dynamic track sizes for your columns and rows 8 | 9 | ## Desired Outcome 10 | 11 | When the browser is narrow: 12 | 13 | ![desired outcome narrow](./desired-outcome-narrow.png) 14 | 15 | When the browser is stretched wide: 16 | 17 | ![desired outcome wide](./desired-outcome-wide.png) 18 | 19 | ### Self Check 20 | - The gap is 15px 21 | - The grid has two columns 22 | - The grid has four rows 23 | - The grid tracks do not use static sizes (no pixels!) 24 | - The second column is three times larger than the other 25 | - The third row is five times larger than the others 26 | - The rows and columns stretch wider when making the browser window bigger 27 | - The rows and columns stretch taller when making the browser window smaller 28 | -------------------------------------------------------------------------------- /grid/02-grid-layout-2/desired-outcome-narrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ardnyx/css-exercises/9ab349e7d96a947cdfb52745a86b7fee2e954ec0/grid/02-grid-layout-2/desired-outcome-narrow.png -------------------------------------------------------------------------------- /grid/02-grid-layout-2/desired-outcome-wide.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ardnyx/css-exercises/9ab349e7d96a947cdfb52745a86b7fee2e954ec0/grid/02-grid-layout-2/desired-outcome-wide.png -------------------------------------------------------------------------------- /grid/02-grid-layout-2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Responsive Holy Grail 8 | 9 | 10 | 11 |
12 |
Header
13 | 14 | 15 |
Article 16 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

17 |

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur bibendum turpis quis interdum semper. Sed at pharetra neque, nec lacinia diam. Suspendisse quis faucibus mi, aliquam porttitor ipsum. Vivamus condimentum eros id mattis pharetra. Duis varius eros nibh. Donec a venenatis eros. Fusce in mauris massa. Donec est metus, rhoncus eu leo sed, aliquet posuere nisl.

18 |

Cras ut ex in nibh accumsan ullamcorper. Fusce rutrum, metus id porta porttitor, leo ipsum congue velit, eu hendrerit lectus nisi a odio. Pellentesque tristique eros id nibh finibus euismod. Cras suscipit volutpat elit eget pulvinar. Vivamus at blandit leo. Aenean sodales ex non massa efficitur, et egestas neque dapibus. In consequat hendrerit ex, nec finibus magna faucibus eu. Aliquam a libero non erat sollicitudin condimentum. In ac fringilla nisi. Sed pharetra ut turpis id luctus. Proin posuere tortor ac tempus luctus. Donec vitae est et neque faucibus posuere. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

19 |
20 | 21 |
22 | 23 | 24 | -------------------------------------------------------------------------------- /grid/02-grid-layout-2/solution/solution.css: -------------------------------------------------------------------------------- 1 | body, 2 | html { 3 | height: 100%; 4 | margin: 0; 5 | } 6 | 7 | .container { 8 | text-align: center; 9 | height: 100%; 10 | padding: 16px; 11 | box-sizing: border-box; 12 | } 13 | 14 | .container div { 15 | padding: 15px; 16 | font-size: 32px; 17 | font-family: Helvetica; 18 | font-weight: bold; 19 | color: white; 20 | border-radius: 15px; 21 | } 22 | 23 | .header { 24 | background-color: #006157; 25 | grid-column: 1 / 3; 26 | } 27 | 28 | .sidebar { 29 | background-color: #005B94; 30 | grid-row: 2 / 4; 31 | } 32 | 33 | .nav { 34 | background-color: #642cde; 35 | } 36 | 37 | .article { 38 | background-color: #7E1DC3; 39 | } 40 | 41 | .article p { 42 | font-size: 18px; 43 | font-family: sans-serif; 44 | color: white; 45 | text-align: left; 46 | } 47 | 48 | .footer { 49 | background-color: #393f4d; 50 | grid-column: 1 / 3; 51 | } 52 | 53 | /* SOLUTION */ 54 | 55 | .container { 56 | display: grid; 57 | grid-template-columns: 1fr 3fr; 58 | grid-template-rows: 1fr 1fr 5fr 1fr; 59 | gap: 15px; 60 | } -------------------------------------------------------------------------------- /grid/02-grid-layout-2/solution/solution.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Responsive Holy Grail 8 | 9 | 10 | 11 |
12 |
Header
13 | 14 | 15 |
Article 16 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

17 |

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur bibendum turpis quis interdum semper. Sed at pharetra neque, nec lacinia diam. Suspendisse quis faucibus mi, aliquam porttitor ipsum. Vivamus condimentum eros id mattis pharetra. Duis varius eros nibh. Donec a venenatis eros. Fusce in mauris massa. Donec est metus, rhoncus eu leo sed, aliquet posuere nisl.

18 |

Cras ut ex in nibh accumsan ullamcorper. Fusce rutrum, metus id porta porttitor, leo ipsum congue velit, eu hendrerit lectus nisi a odio. Pellentesque tristique eros id nibh finibus euismod. Cras suscipit volutpat elit eget pulvinar. Vivamus at blandit leo. Aenean sodales ex non massa efficitur, et egestas neque dapibus. In consequat hendrerit ex, nec finibus magna faucibus eu. Aliquam a libero non erat sollicitudin condimentum. In ac fringilla nisi. Sed pharetra ut turpis id luctus. Proin posuere tortor ac tempus luctus. Donec vitae est et neque faucibus posuere. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

19 |
20 | 21 |
22 | 23 | 24 | -------------------------------------------------------------------------------- /grid/02-grid-layout-2/style.css: -------------------------------------------------------------------------------- 1 | body, 2 | html { 3 | height: 100%; 4 | margin: 0; 5 | } 6 | 7 | .container { 8 | text-align: center; 9 | height: 100%; 10 | padding: 16px; 11 | box-sizing: border-box; 12 | } 13 | 14 | .container div { 15 | padding: 15px; 16 | font-size: 32px; 17 | font-family: Helvetica; 18 | font-weight: bold; 19 | color: white; 20 | border-radius: 15px; 21 | } 22 | 23 | .header { 24 | background-color: #006157; 25 | grid-column: 1 / 3; 26 | } 27 | 28 | .sidebar { 29 | background-color: #005B94; 30 | grid-row: 2 / 4; 31 | } 32 | 33 | .nav { 34 | background-color: #642cde; 35 | } 36 | 37 | .article { 38 | background-color: #7E1DC3; 39 | } 40 | 41 | .article p { 42 | font-size: 18px; 43 | font-family: sans-serif; 44 | color: white; 45 | text-align: left; 46 | } 47 | 48 | .footer { 49 | background-color: #393f4d; 50 | grid-column: 1 / 3; 51 | } -------------------------------------------------------------------------------- /grid/03-grid-layout-3/README.md: -------------------------------------------------------------------------------- 1 | # Holy Grail Mockup with Grid 2 | 3 | Now that you've made your Holy Grail layout responsive, we are going to have some fun making it a bit more complicated and adding some features. You might find this to be a bit more challenging than you expected. You might even be tempted to use Flexbox. But for the sake of this practice assignment, try and see if you can figure out how to recreate this entire mockup using only Grid. Feel free to add in your own dummy content or styling too! 4 | 5 | ### Hints 6 | - For this exercise you will need to add some CSS declaration blocks to the style.css file. Look through the HTML to see what selectors and combinators you can use. 7 | - Take the layout one section at a time 8 | - You don't need to add or change anything to the HTML, but it will be helpful to look through the parent and child relationships between elements 9 | - Just like with Flexbox, you can easily center an item by making it into a grid 10 | - Don't worry about the placeholder image element stretching when resizing the browser window. This will be covered in the Responsive lessons 11 | 12 | ## Desired Outcome 13 | 14 | ![desired outcome](./desired-outcome.png) 15 | 16 | If you use the tools in the Advanced Grid Properties lesson you should be able to get your article cards to automatically fit as the browser window is adjusted: 17 | 18 | ![desired outcome stretched](./desired-outcome-stretched.png) 19 | 20 | ### Self Check 21 | - The container element has two columns 22 | - The container's second column is 4 times larger than the first column 23 | - The container element has a gap of 4px 24 | - The header element has two columns 25 | - The `ul` inside the menu element contains another grid 26 | - The `ul` inside the nav element contains another grid 27 | - The sidebar element has a gap of 50px 28 | - The text elements in the sidebar are centered with grid 29 | - The article element should set grid columns using `repeat` along with the `auto-fit` and `minmax` properties 30 | - The article columns should have a minimum value of 250px and a maximum of 1fr unit 31 | - The article element has a gap of 15px 32 | - The card elements inside the article container have a height of 200px 33 | - The header and footer span across both columns 34 | - The sidebar only spans across the first column 35 | - The nav and article elements only span across the second column 36 | -------------------------------------------------------------------------------- /grid/03-grid-layout-3/desired-outcome-stretched.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ardnyx/css-exercises/9ab349e7d96a947cdfb52745a86b7fee2e954ec0/grid/03-grid-layout-3/desired-outcome-stretched.png -------------------------------------------------------------------------------- /grid/03-grid-layout-3/desired-outcome.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ardnyx/css-exercises/9ab349e7d96a947cdfb52745a86b7fee2e954ec0/grid/03-grid-layout-3/desired-outcome.png -------------------------------------------------------------------------------- /grid/03-grid-layout-3/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Holy Grail Mockup 8 | 9 | 10 | 11 |
12 | 13 |
14 | 15 | 23 |
24 | 25 | 36 | 37 | 44 | 45 |
46 |
47 |

Article Title

48 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud...

49 |
50 |
51 |

Article Title

52 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud...

53 |
54 |
55 |

Article Title

56 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud...

57 |
58 |
59 |

Article Title

60 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud...

61 |
62 |
63 |

Article Title

64 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud...

65 |
66 |
67 |

Article Title

68 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud...

69 |
70 |
71 |

Article Title

72 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud...

73 |
74 |
75 |

Article Title

76 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud...

77 |
78 |
79 |

Article Title

80 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud...

81 |
82 |
83 |

Article Title

84 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud...

85 |
86 |
87 |

Article Title

88 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud...

89 |
90 |
91 |

Article Title

92 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud...

93 |
94 |
95 | 96 | 99 | 100 |
101 | 102 | -------------------------------------------------------------------------------- /grid/03-grid-layout-3/solution/solution.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | .container { 7 | text-align: center; 8 | } 9 | 10 | .container div { 11 | padding: 15px; 12 | font-size: 32px; 13 | font-family: Helvetica; 14 | font-weight: bold; 15 | color: white; 16 | } 17 | 18 | .header { 19 | background-color: #393f4d; 20 | } 21 | 22 | 23 | .menu ul, 24 | .menu li { 25 | font-size: 16px; 26 | } 27 | 28 | .sidebar { 29 | background-color: #C50208; 30 | } 31 | 32 | .sidebar .photo { 33 | background-color: white; 34 | color: black; 35 | font-size: 12px; 36 | font-weight: normal; 37 | border-radius: 10px; 38 | } 39 | 40 | 41 | .sidebar .side-content { 42 | background-color: white; 43 | color: black; 44 | font-size: 16px; 45 | font-weight: normal; 46 | } 47 | 48 | .nav { 49 | background-color: #C50208; 50 | } 51 | 52 | 53 | .nav ul li { 54 | font-size: 16px; 55 | text-transform: uppercase; 56 | } 57 | 58 | .article { 59 | background-color: #bccbde; 60 | } 61 | 62 | .article p { 63 | font-size: 18px; 64 | font-family: sans-serif; 65 | color: white; 66 | text-align: left; 67 | } 68 | 69 | .article .card { 70 | background-color: #FFFFFF; 71 | color: black; 72 | text-align: center; 73 | } 74 | 75 | .card p { 76 | color: black; 77 | font-weight: normal; 78 | font-size: 14px; 79 | } 80 | 81 | .card .title { 82 | font-size: 18px; 83 | text-align: center; 84 | } 85 | 86 | .footer { 87 | background-color: #393f4d; 88 | } 89 | 90 | .footer p { 91 | font-size: 13px; 92 | font-weight: normal; 93 | } 94 | 95 | /* SOLUTION */ 96 | 97 | .container { 98 | display: grid; 99 | grid-template-columns: 1fr 4fr; 100 | gap: 4px; 101 | } 102 | 103 | .header { 104 | grid-column: 1 / 3; 105 | display: grid; 106 | grid-template-columns: 1fr 2fr; 107 | } 108 | 109 | .logo { 110 | justify-self: start; 111 | } 112 | 113 | .menu { 114 | align-self: center; 115 | } 116 | 117 | .menu ul { 118 | display: grid; 119 | grid-template-columns: 1fr 1fr 1fr 1fr; 120 | } 121 | 122 | .menu ul, 123 | .menu li { 124 | list-style-type: none; 125 | } 126 | 127 | .sidebar { 128 | grid-row: 2 / 4; 129 | display: grid; 130 | gap: 50px; 131 | } 132 | 133 | .side-content, 134 | .photo { 135 | display: grid; 136 | align-items: center; 137 | } 138 | 139 | .nav ul { 140 | list-style-type: none; 141 | display: grid; 142 | grid-template-columns: 1fr 1fr 1fr; 143 | } 144 | 145 | .article { 146 | display: grid; 147 | grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 148 | gap: 15px; 149 | } 150 | 151 | .article .card { 152 | height: 200px; 153 | } 154 | 155 | .card p { 156 | padding: 5px; 157 | } 158 | 159 | .footer { 160 | grid-column: 1 / 3; 161 | } -------------------------------------------------------------------------------- /grid/03-grid-layout-3/solution/solution.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Holy Grail Mockup 8 | 9 | 10 | 11 |
12 | 13 |
14 | 15 | 23 |
24 | 25 | 36 | 37 | 44 | 45 |
46 |
47 |

Article Title

48 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud...

49 |
50 |
51 |

Article Title

52 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud...

53 |
54 |
55 |

Article Title

56 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud...

57 |
58 |
59 |

Article Title

60 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud...

61 |
62 |
63 |

Article Title

64 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud...

65 |
66 |
67 |

Article Title

68 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud...

69 |
70 |
71 |

Article Title

72 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud...

73 |
74 |
75 |

Article Title

76 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud...

77 |
78 |
79 |

Article Title

80 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud...

81 |
82 |
83 |

Article Title

84 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud...

85 |
86 |
87 |

Article Title

88 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud...

89 |
90 |
91 |

Article Title

92 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud...

93 |
94 |
95 | 96 | 99 | 100 |
101 | 102 | -------------------------------------------------------------------------------- /grid/03-grid-layout-3/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | .container { 7 | text-align: center; 8 | } 9 | 10 | .container div { 11 | padding: 15px; 12 | font-size: 32px; 13 | font-family: Helvetica; 14 | font-weight: bold; 15 | color: white; 16 | } 17 | 18 | .header { 19 | background-color: #393f4d; 20 | } 21 | 22 | .menu ul, 23 | .menu li { 24 | font-size: 16px; 25 | } 26 | 27 | .sidebar { 28 | background-color: #C50208; 29 | } 30 | 31 | .sidebar .photo { 32 | background-color: white; 33 | color: black; 34 | font-size: 12px; 35 | font-weight: normal; 36 | border-radius: 10px; 37 | } 38 | 39 | 40 | .sidebar .side-content { 41 | background-color: white; 42 | color: black; 43 | font-size: 16px; 44 | font-weight: normal; 45 | } 46 | 47 | .nav { 48 | background-color: #C50208; 49 | } 50 | 51 | .nav ul li { 52 | font-size: 16px; 53 | text-transform: uppercase; 54 | } 55 | 56 | .article { 57 | background-color: #bccbde; 58 | } 59 | 60 | .article p { 61 | font-size: 18px; 62 | font-family: sans-serif; 63 | color: white; 64 | text-align: left; 65 | } 66 | 67 | .article .card { 68 | background-color: #FFFFFF; 69 | color: black; 70 | text-align: center; 71 | } 72 | 73 | .card p { 74 | color: black; 75 | font-weight: normal; 76 | font-size: 14px; 77 | } 78 | 79 | .card .title { 80 | font-size: 18px; 81 | text-align: center; 82 | } 83 | 84 | .footer { 85 | background-color: #393f4d; 86 | } 87 | 88 | .footer p { 89 | font-size: 13px; 90 | font-weight: normal; 91 | } -------------------------------------------------------------------------------- /margin-and-padding/01-margin-and-padding-1/README.md: -------------------------------------------------------------------------------- 1 | # Margin and Padding practice 2 | 3 | For this first exercise, simply edit the `style.css` file so that the divs look like the image below. Only edit the CSS where instructed in the file. You should only have to change the values of the margin and padding for this exercise. You should not have to add or remove properties in the CSS, or touch the HTML. 4 | 5 | ![outcome](./desired-outcome.png) 6 | 7 | ### Self-check 8 | 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. 9 | 10 | - Div One and Div Three have 32px between their text and border. 11 | - Div One has 12px between it and any other element on the page. 12 | - There is a 48px gap between Div Two and Div Three. 13 | - Div Three is aligned to the right. 14 | - Div Three's alignment is achieved using `margin` (and not float, flexbox, etc.). -------------------------------------------------------------------------------- /margin-and-padding/01-margin-and-padding-1/desired-outcome.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ardnyx/css-exercises/9ab349e7d96a947cdfb52745a86b7fee2e954ec0/margin-and-padding/01-margin-and-padding-1/desired-outcome.png -------------------------------------------------------------------------------- /margin-and-padding/01-margin-and-padding-1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Margin and Padding exercise 8 | 9 | 10 | 11 |
12 | DIV ONE 13 |
14 |
15 | DIV TWO 16 |
17 |
18 | DIV THREE 19 |
20 | 21 | 22 | -------------------------------------------------------------------------------- /margin-and-padding/01-margin-and-padding-1/solution/solution.css: -------------------------------------------------------------------------------- 1 | body { 2 | max-width: 600px; 3 | margin: 0 auto; 4 | } 5 | 6 | .one { 7 | background: pink; 8 | border: 3px solid blue; 9 | /* CHANGE ME */ 10 | padding: 32px; 11 | margin: 12px; 12 | } 13 | 14 | .two { 15 | background: lightblue; 16 | border: 3px solid purple; 17 | /* CHANGE ME */ 18 | margin-bottom: 48px; 19 | } 20 | 21 | .three { 22 | background: peachpuff; 23 | border: 3px solid brown; 24 | width: 200px; 25 | /* CHANGE ME */ 26 | padding: 32px; 27 | margin-left: auto; 28 | } -------------------------------------------------------------------------------- /margin-and-padding/01-margin-and-padding-1/solution/solution.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Margin and Padding exercise 8 | 9 | 10 | 11 |
12 | DIV ONE 13 |
14 |
15 | DIV TWO 16 |
17 |
18 | DIV THREE 19 |
20 | 21 | 22 | -------------------------------------------------------------------------------- /margin-and-padding/01-margin-and-padding-1/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | max-width: 600px; 3 | margin: 0 auto; 4 | } 5 | 6 | .one { 7 | background: pink; 8 | border: 3px solid blue; 9 | /* CHANGE ME */ 10 | padding: 0px; 11 | margin: 0px; 12 | } 13 | 14 | .two { 15 | background: lightblue; 16 | border: 3px solid purple; 17 | /* CHANGE ME */ 18 | margin-bottom: 0px; 19 | } 20 | 21 | .three { 22 | background: peachpuff; 23 | border: 3px solid brown; 24 | width: 200px; 25 | /* CHANGE ME */ 26 | padding: 0px; 27 | margin-left: 0px; 28 | } -------------------------------------------------------------------------------- /margin-and-padding/02-margin-and-padding-2/README.md: -------------------------------------------------------------------------------- 1 | # Margin and Padding #2 2 | 3 | This one is a little nicer looking, and a little closer to something you might see in the real world. You'll need to change a little more than just margin and padding to make it look exactly right. 4 | 5 | ## Desired outcome 6 | ![desired outcome](./desired-outcome.png) 7 | 8 | ### Self Check 9 | 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. 10 | 11 | - There is 8px between the edge of the card and its content (the blue sections). 12 | - There is an 8px gap between each of the blue sections inside the card. 13 | - The title of the card uses a 16px font. 14 | - There are 8px between the title text and the edge of the title section. 15 | - The content section has 16px space on the top and bottom, and 8px on either side. 16 | - Everything inside the `.button-container` section is centered, and there is 8px padding. 17 | - The Big Button is centered on its own line. 18 | - The Big Button has 24px space on the sides, and 8px on top and bottom. 19 | -------------------------------------------------------------------------------- /margin-and-padding/02-margin-and-padding-2/desired-outcome.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ardnyx/css-exercises/9ab349e7d96a947cdfb52745a86b7fee2e954ec0/margin-and-padding/02-margin-and-padding-2/desired-outcome.png -------------------------------------------------------------------------------- /margin-and-padding/02-margin-and-padding-2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Margin and Padding exercise 2 8 | 9 | 10 | 11 |
12 |

I'm a card

13 |
I have content inside me..lorem ipsum blah blah blah. Here's some stuff you need to read.
14 |
and a
15 |
16 | 17 | 18 | -------------------------------------------------------------------------------- /margin-and-padding/02-margin-and-padding-2/solution/solution.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: #eee; 3 | font-family: sans-serif; 4 | } 5 | 6 | .card { 7 | width: 400px; 8 | background: #fff; 9 | margin: 16px auto; 10 | } 11 | 12 | .title { 13 | background: #e3f4ff; 14 | } 15 | 16 | .content { 17 | background: #e3f4ff; 18 | } 19 | 20 | .button-container { 21 | background: #e3f4ff; 22 | } 23 | 24 | button { 25 | background: white; 26 | border: 1px solid #eee; 27 | } 28 | 29 | /* SOLUTION */ 30 | 31 | /* disclaimer: duplicating the selectors here isn't best practice. 32 | In your solution you probably put it right inside the existing selectors, 33 | which _is_ the best practice. 34 | 35 | We separated it out here to make it extra clear what has changed. */ 36 | 37 | .card { 38 | padding: 8px; 39 | } 40 | 41 | .title { 42 | margin-top: 0; 43 | margin-bottom: 8px; 44 | font-size: 16px; 45 | padding: 8px; 46 | } 47 | 48 | .content { 49 | margin-bottom: 8px; 50 | padding: 16px 8px; 51 | } 52 | 53 | .button-container { 54 | text-align: center; 55 | padding: 8px; 56 | } 57 | 58 | button { 59 | display: block; 60 | margin: 0 auto; 61 | padding: 8px 24px; 62 | } -------------------------------------------------------------------------------- /margin-and-padding/02-margin-and-padding-2/solution/solution.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Margin and Padding exercise 2 8 | 9 | 10 | 11 |
12 |

I'm a card

13 |
I have content inside me..lorem ipsum blah blah blah. Here's some stuff you need to read.
14 |
and a
15 |
16 | 17 | 18 | -------------------------------------------------------------------------------- /margin-and-padding/02-margin-and-padding-2/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: #eee; 3 | font-family: sans-serif; 4 | } 5 | 6 | .card { 7 | width: 400px; 8 | background: #fff; 9 | margin: 16px auto; 10 | } 11 | 12 | .title { 13 | background: #e3f4ff; 14 | } 15 | 16 | .content { 17 | background: #e3f4ff; 18 | } 19 | 20 | .button-container { 21 | background: #e3f4ff; 22 | } 23 | 24 | button { 25 | background: white; 26 | border: 1px solid #eee; 27 | } --------------------------------------------------------------------------------