tod
/
odin-default-css-exercises
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'TheOdinProject:main' into thatblindgeye-patch-2

This commit is contained in:
Eric Olkowski 2022-01-31 20:25:27 -05:00 committed by GitHub
parent dd08621c42 0dc37ecae6
commit d492ec84b9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 4 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.github/PULL_REQUEST_TEMPLATE.md vendored
View File

@ -2,7 +2,7 @@
<!-- Complete the following REQUIRED checkboxes by replacing the whitespace between the square brackets with an 'x', e.g. [x]. --> <!-- Complete the following REQUIRED checkboxes by replacing the whitespace between the square brackets with an 'x', e.g. [x]. -->
- [ ] I have thoroughly read and understand the [CSS Exercises Contributing Guide](https://github.com/TheOdinProject/css-exercises/blob/main/CONTRIBUTING.md) - [ ] I have thoroughly read and understand the [CSS Exercises Contributing Guide](https://github.com/TheOdinProject/css-exercises/blob/main/CONTRIBUTING.md)
- [ ] The title of this PR is in `file/exercise/folder: brief description of changes` format e.g. `01 flex center: add hint for XYZ` - [ ] The title of this PR is similar to the `file, exercise/lesson, or folder: brief description of changes` format e.g. `01 flex center: add hint for XYZ`
<!-- Complete the following checkboxes only if they are applicable to your PR. You can complete these later if they are not currently applicable. --> <!-- Complete the following checkboxes only if they are applicable to your PR. You can complete these later if they are not currently applicable. -->
- [ ] If one exists, I have linked a related open issue to this PR in Step 2 below - [ ] If one exists, I have linked a related open issue to this PR in Step 2 below

4
grid/01-grid-layout-1/README.md
View File

@ -3,6 +3,7 @@
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! 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!
### Hints ### Hints
- You only need to add to the CSS selectors - You only need to add to the CSS selectors
- Look back to the Creating a Grid lesson if you forget how to turn an element into a grid - Look back to the Creating a Grid lesson if you forget how to turn an element into a grid
- Use fixed track sizes (e.g. pixels) for your columns and rows - Use fixed track sizes (e.g. pixels) for your columns and rows
@ -12,10 +13,11 @@ Now it's time to practice the Grid tools we've learned and create a layout that
![desired outcome](./desired-outcome.png) ![desired outcome](./desired-outcome.png)
### Self Check ### Self Check
- The gap is 15px - The gap is 15px
- The grid has two columns - The grid has two columns
- The grid has four rows - The grid has four rows
- The first column is three times larger than the other - The second column is three times larger than the first
- The third row is five times larger than the others - The third row is five times larger than the others
- The header and footer elements span across both columns - The header and footer elements span across both columns
- The sidebar element only spans across the first column - The sidebar element only spans across the first column