Merge branch 'main' into main
This commit is contained in:
Scoozy
GitHub
commit
73a0b5ee4f
|
|
@ -0,0 +1,54 @@
|
|||
---
|
||||
name: Bug Report
|
||||
about: Create a report to help us improve something that is not working correctly
|
||||
title: "Bug - :"
|
||||
labels: "Status: Needs Review, Type: Bug"
|
||||
assignees: ""
|
||||
---
|
||||
|
||||
<!-- Thank you for taking the time to submit a bug report to The Odin Project. In order to get issues closed in a reasonable amount of time, you must include a baseline of information about the bug in question. Please read this template in its entirety before filling it out to ensure that it is filled out correctly. -->
|
||||
|
||||
Complete the following REQUIRED checkboxes:
|
||||
- [ ] I have thoroughly read and understand [The Odin Project Contributing Guide](https://github.com/TheOdinProject/theodinproject/blob/main/CONTRIBUTING.md)
|
||||
- [ ] The title of this issue follows the `Bug - location of bug: brief description of bug` format, e.g. `Bug - Grid exercises: CSS not properly linked to HTML files`
|
||||
|
||||
The following checkbox is OPTIONAL:
|
||||
<!-- Completing this checkbox does not guarantee you will be assigned this issue, but rather lets us know you are interested in working on it. -->
|
||||
- [ ] I would like to be assigned this issue to work on it
|
||||
|
||||
<hr>
|
||||
|
||||
**1. Description of the Bug:**
|
||||
<!-- A clear and concise description of what the bug is. Include any screenshots that may help show the bug in action. -->
|
||||
|
||||
|
||||
**2. How To Reproduce:**
|
||||
<!--
|
||||
What steps one might need to take in order to reproduce this bug, e.g.:
|
||||
1. Log in
|
||||
2. Visit a lesson page
|
||||
3. Click the complete button
|
||||
4. The complete button does not update
|
||||
-->
|
||||
|
||||
|
||||
**3. Expected Behavior:**
|
||||
<!--
|
||||
A brief description of what you expected to happen, e.g.:
|
||||
1. Log in
|
||||
2. Visit a lesson page
|
||||
3. Click the complete button
|
||||
4. The complete button updates correctly
|
||||
-->
|
||||
|
||||
|
||||
**4. Desktop/Device:**
|
||||
<!-- The more information you are able to provide, the better. -->
|
||||
- Device: <!-- [e.g. iPhone6] -->
|
||||
- OS: <!-- [e.g. iOS] -->
|
||||
- Browser: <!-- [e.g. chrome, safari] -->
|
||||
- Version: <!-- [e.g. 22] -->
|
||||
|
||||
**5. Additional Information:**
|
||||
<!-- Any additional information about the bug. -->
|
||||
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
---
|
||||
name: Feature Request
|
||||
about: Suggest a new feature or enhancement for this project
|
||||
title: ""
|
||||
labels: "Status: Needs Review"
|
||||
assignees: ""
|
||||
---
|
||||
|
||||
<!-- Thank you for taking the time to submit a new feature request to The Odin Project. In order to get issues closed in a reasonable amount of time, you must include a baseline of information about the feature/enhancement you are proposing. Please read this template in its entirety before filling it out to ensure that it is filled out correctly. -->
|
||||
|
||||
Complete the following REQUIRED checkboxes:
|
||||
- [ ] I have thoroughly read and understand [The Odin Project Contributing Guide](https://github.com/TheOdinProject/theodinproject/blob/main/CONTRIBUTING.md)
|
||||
- [ ] The title of this issue follows the `location for request: brief description of request` format, e.g. `Foundations exercises: Add exercise for XYZ`
|
||||
|
||||
The following checkbox is OPTIONAL:
|
||||
<!-- Completing this checkbox does not guarantee you will be assigned this issue, but rather lets us know you are interested in working on it. -->
|
||||
- [ ] I would like to be assigned this issue to work on it
|
||||
|
||||
<hr>
|
||||
|
||||
**1. Description of the Feature Request:**
|
||||
<!--
|
||||
A clear and concise description of what the feature or enhancement is, including how it would be useful/beneficial or what problem(s) it would solve.
|
||||
-->
|
||||
|
||||
|
||||
**2. Acceptance Criteria:**
|
||||
<!--
|
||||
A list of checkbox items that explain the requirements needed to be met to resolve this request, e.g.:
|
||||
- [ ] A theme toggle is present on the dashboard
|
||||
- [ ] Clicking the theme toggle changes between light and dark
|
||||
- [ ] A user's theme choice persists after leaving the website
|
||||
-->
|
||||
|
||||
|
||||
**3. Additional Information:**
|
||||
<!-- Any additional information about the feature request, such as a link to a Discord discussion, screenshots, etc. -->
|
||||
|
||||
|
|
@ -1,19 +1,30 @@
|
|||
<!-- Thank you for taking the time to contribute to The Odin Project. In order to get pull requests (PRs) closed in a reasonable amount of time, you must include a baseline of information about the changes you are proposing. Please read this template in its entirety before filling it out to ensure that it is filled out correctly. -->
|
||||
<!-- Thank you for taking the time to contribute to The Odin Project. In order to get a pull request (PR) closed in a reasonable amount of time, you must include a baseline of information about the changes you are proposing. Please read this template in its entirety before filling it out to ensure that it is filled out correctly. -->
|
||||
|
||||
<!-- 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)
|
||||
- [ ] The title of this PR is in `file/exercise/folder: brief description of changes` format e.g. `01 flex center: add hint for XYZ`
|
||||
Complete the following REQUIRED checkboxes:
|
||||
<!-- While editing this template, replace the whitespace between the square brackets with an 'x', e.g. [x] -->
|
||||
- [ ] I have thoroughly read and understand [The Odin Project Contributing Guide](https://github.com/TheOdinProject/theodinproject/blob/main/CONTRIBUTING.md)
|
||||
- [ ] The title of this PR follows the `location of change: brief description of change` format, e.g. `01-flex-center: Update self check`
|
||||
|
||||
<!-- 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 changes were requested, I have made them and re-requested a review from the maintainer (top of the right sidebar)
|
||||
Complete the following checkbox ONLY IF it is applicable to your PR. You can complete it later if it is not currently applicable:
|
||||
- [ ] I have ensured that the TOP solution files match the Desired Outcome image
|
||||
|
||||
**1. Description of the Changes**
|
||||
<!-- A clear and concise description of your changes. If this PR is not related to an open issue also include why you are proposing these changes, such as what benefits the changes have or what problem(s) they solve. -->
|
||||
<hr>
|
||||
|
||||
**1. Because:**
|
||||
<!--
|
||||
If this PR closes an open issue, replace the XXXXX below with the issue number, e.g. Closes #2013. Or if the issue is in another TOP repo replace the #XXXXX with the URL of the issue, e.g. Closes https://github.com/TheOdinProject/curriculum/issues/XXXXX
|
||||
|
||||
**2. Related Issue**
|
||||
<!-- If the PR is not related to any open issue, skip this step.
|
||||
|
||||
Otherwise, replace the XXXXX with the issue number, e.g. Closes #2013, or if the issue is in another TOP repo replace #XXXXX with the URL of the issue, e.g. Closes https://github.com/TheOdinProject/curriculum/issues/XXXXX -->
|
||||
Otherwise, provide a clear and concise reason for your pull request, e.g. what problem it solves or what benefit it provides. If this PR is related to, but does not close, another issue or PR, you can also link it as above without the 'Closes' keyword, e.g. "Related to #2013".
|
||||
-->
|
||||
Closes #XXXXX
|
||||
|
||||
|
||||
**2. This PR:**
|
||||
<!--
|
||||
A bullet point list of one or more items outlining what was done in this PR to solve the problem(s) or implement the feature/enhancement.
|
||||
-->
|
||||
|
||||
|
||||
**3. Additional Information:**
|
||||
<!-- Any additional information about the PR, such as a link to a Discord discussion, etc. -->
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,2 @@
|
|||
# Ignore MacOS autogenerated
|
||||
.DS_Store
|
||||
|
|
@ -1,97 +0,0 @@
|
|||
# CSS Exercises Contributing Guide
|
||||
|
||||
Thank you for expressing interest in contributing to our CSS exercises! Please be sure to read this guide thoroughly before contributing, as it will lessen the chances of any issues arising during the process.
|
||||
|
||||
**Please do not open a pull request (PR) with your solutions to any exercises in this repo**. Your PR will be immediately closed without being merged. The exercises are for you to do and keep on your own local machine or your personal GitHub.
|
||||
|
||||
## How to Contribute
|
||||
|
||||
### Being Assigned an Issue
|
||||
|
||||
If you would like to work on an existing issue in the repo:
|
||||
|
||||
1) Find an issue that is not currently assigned to anyone
|
||||
* A couple of good places to start are ["help wanted" issues](https://github.com/TheOdinProject/css-exercises/labels/Help%20Wanted) or ["good first issue" issues](https://github.com/TheOdinProject/css-exercises/labels/good%20first%20issue)
|
||||
|
||||
2) Ask to be assigned the issue by a maintainer
|
||||
* **If you are not a maintainer, do not give others permission to work on an issue**
|
||||
|
||||
3) **Wait to be assigned the issue before starting any work**
|
||||
|
||||
4) After being assigned, address each item listed in the acceptance criteria
|
||||
* If there are no acceptance criteria stated in the issue, ask the maintainer that assigned you the issue if any exist
|
||||
|
||||
If you would like to propose a small change (fixing a typo, updating a link, etc.) that is not part of an existing issue, you are welcome to make the change and submit a PR without an official issue.
|
||||
|
||||
### Creating an Issue
|
||||
|
||||
If you would like to propose a more significant change:
|
||||
|
||||
1. Go through the open issues and make sure an issue doesn't already exist
|
||||
* If the issue already exists, but there are details you feel are missing, leave a comment on the already opened issue
|
||||
|
||||
2. If the issue doesn't already exist, create a new one and **read the issue template in its entirety and fill out all applicable sections**
|
||||
|
||||
### Setting Up Your Local Clone
|
||||
|
||||
Before you begin working on anything, be sure you follow these steps in order to set up a clone on your local machine:
|
||||
|
||||
1. Fork this repo to your own GitHub account. If you don't know how to do so, follow the GitHub documentation on how to [fork a repo](https://docs.github.com/en/get-started/quickstart/fork-a-repo)
|
||||
|
||||
2. Clone this repo to your local machine with one of the following commands, replacing the `<your username>` text with your actual GitHub username:
|
||||
```bash
|
||||
# If you have SSH set up with Git
|
||||
git clone git@github.com:<your username>/css-exercises.git
|
||||
# Otherwise for HTTPS
|
||||
git clone https://github.com/<your username>/css-exercises.git
|
||||
```
|
||||
|
||||
3. `cd` into the directory of your local clone, then set the upstream remote so you can keep your local clone synced with TOP's original repo:
|
||||
```bash
|
||||
# If you have SSH set up with Git
|
||||
git remote add upstream git@github.com:TheOdinProject/css-exercises.git
|
||||
# Otherwise for HTTPS
|
||||
git remote add upstream https://github.com/TheOdinProject/css-exercises.git
|
||||
```
|
||||
|
||||
### Working on an Issue
|
||||
|
||||
Once you have the repo forked and cloned, and the upstream remote has been set, you can begin working on your issue:
|
||||
|
||||
1. Create a new branch, replacing the `<your branch name>` with an actual branch name, e.g. "flex_exercises":
|
||||
```bash
|
||||
git checkout -b <your branch name>
|
||||
```
|
||||
|
||||
2. Add commits as you work on your issue, replacing the `<your commit message>` text with your actual commit message:
|
||||
```bash
|
||||
git commit -m "<your commit message>"
|
||||
```
|
||||
|
||||
3. Sync your work with the upstream remote every so often. Follow the [ongoing workflow](https://www.theodinproject.com/paths/full-stack-ruby-on-rails/courses/ruby-programming/lessons/using-git-in-the-real-world#ongoing-workflow) section in our Using Git in the Real World lesson.
|
||||
|
||||
4. Push your branch to your forked repo, replacing the `<your branch name>` with the branch you've been working on locally:
|
||||
```bash
|
||||
$ git push origin <your branch name>
|
||||
```
|
||||
|
||||
### Opening a Pull Request
|
||||
|
||||
1. After pushing your changes, go to your forked repo on GitHub and click the "Compare & pull request" button
|
||||
* If you don't see this button, you can click the branch dropdown menu and then select the branch you just pushed from your local clone:
|
||||
|
||||
|
||||
|
||||
* Once you have switched to the correct branch on GitHub, click the "Contribute" dropdown and then click the "Open pull request" button
|
||||
|
||||
2. **Read the PR template in its entirety and fill out all applicable sections** before submitting your PR
|
||||
|
||||
3. At this point a maintainer will either leave general comments, request changes, or approve and merge your PR
|
||||
* It is important to respond to any comments or requested changes in a timely manner, otherwise your PR may be closed without being merged due to inactivity
|
||||
* After pushing any requested changes to the branch you opened the PR with, be sure to re-request a review from the maintainer that requested those changes at the top of the right sidebar:
|
||||
|
||||
|
||||
|
||||
|
||||
## Need Further Help?
|
||||
Please let us know if you require any help doing any of the steps in this guide in our Discord's [contribution-suggestions channel](https://discordapp.com/channels/505093832157691914/540903304046182425).
|
||||
30
README.md
30
README.md
|
|
@ -1,23 +1,29 @@
|
|||
# CSS Exercises
|
||||
|
||||
These exercises are a series of CSS related tasks intended to complement the HTML and CSS content on The Odin Project.
|
||||
These exercises are a series of CSS related tasks intended to complement the HTML and CSS content on The Odin Project (TOP). They should only be done when instructed during the course of the curriculum.
|
||||
|
||||
These exercises should be done when instructed during the course of the curriculum.
|
||||
When doing these exercises, please use all the documentation and resources you need to accomplish them. You are _not_ intended to have any of this stuff memorized at this point. Check the docs, use Google, do what you need to do (besides checking the solutions) to get them done.
|
||||
|
||||
> When doing the following 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.
|
||||
## Contributing
|
||||
|
||||
## How to use these exercises
|
||||
If you have a suggestion to improve an exercise, an idea for a new exercise, or notice an issue with an exercise, please feel free to open an issue after thoroughly reading our [contributing guide](https://github.com/TheOdinProject/theodinproject/blob/main/CONTRIBUTING.md) in our main TOP repo.
|
||||
|
||||
1. Fork and copy this repository. To learn how to fork a repository, see the GitHub documentation on how to [fork a repo](https://docs.github.com/en/get-started/quickstart/fork-a-repo). Copies of repositories on your machine are called clones. If you need help cloning to your local environment you can learn how from the GitHub documentation on [cloning a repository](https://docs.github.com/en/github/creating-cloning-and-archiving-repositories/cloning-a-repository-from-github/cloning-a-repository).
|
||||
2. Go to an exercise directory and open the HTML file in your browser. You can either open the file directly, or use something like VSCode's Live Server.
|
||||
3. For each exercise, view the README, and edit the CSS file to make the output in your browser look like the images provided.
|
||||
4. Each README has a "Self Check" list. Use this to make sure you haven't missed any important details in your implementation.
|
||||
5. Don't check the solutions until you're done!
|
||||
## How To Use These Exercises
|
||||
|
||||
## Some hints
|
||||
1. Fork and clone this repository. To learn how to fork a repository, see the GitHub documentation on how to [fork a repo](https://docs.github.com/en/get-started/quickstart/fork-a-repo).
|
||||
* Copies of repositories on your machine are called clones. If you need help cloning to your local environment you can learn how from the GitHub documentation on [cloning a repository](https://docs.github.com/en/github/creating-cloning-and-archiving-repositories/cloning-a-repository-from-github/cloning-a-repository).
|
||||
2. Go to an exercise directory and open the HTML file in your browser. You can either open the file directly, or use something like VSCode's Live Server extension.
|
||||
3. For each exercise, read the README thoroughly before starting any work.
|
||||
* Each README has a "Self Check" list. Use this to make sure you haven't missed any important details in your implementation.
|
||||
4. Make your edits in the `index.html` and/or the `style.css` files in order to make the output in your browser look like the Desired Outcome image(s).
|
||||
* Depending on the instructions of the exercise, you may only need to make edits in one of these files.
|
||||
5. Once you successfully finish an exercise, check TOP's solution to compare it with yours.
|
||||
* You should not be checking the solution for an exercise until you finish it!
|
||||
* Keep in mind that TOP's solution is not the only solution. If your solution differs wildly from TOP's solution (and still passes the self-check criteria), feel free to ask about it in the chatroom.
|
||||
6. Do not submit your solutions to this repo, as any PRs that do so will be closed without merging.
|
||||
|
||||
## Some Hints
|
||||
- The official solutions put all changes at the _end_ of the CSS file, which may duplicate some selectors (e.g. there might be a `body {}` in the given CSS, and another `body {}` in the solution). When you are working on an exercise, it is best practice to add your CSS to existing selectors instead of duplicating them at the end of the file. We're sacrificing this best practice in our official solutions to make it extra clear to you what things we changed to solve the exercise.
|
||||
- Unless listed in the self-check section, do not worry about getting the exact pixel value for things like margin, padding and font-size. These exercises are intended to test your knowledge of CSS, not your ability to guess that a screenshot is using `font: sans-serif bold 16px`, or that the margin is _exactly_ `42px`.
|
||||
- You may need to add some elements to your HTML to get things into the right spot. (For the first few exercises we make it explicit when this needs to happen.)
|
||||
- You may need to add more selectors to your CSS file. The first few exercises have almost everything already done for you, but as you progress you'll find that you need to add more and more to get the correct result.
|
||||
- In many cases, there will be multiple correct ways to solve these problems. The official solution isn't necessarily the _only right way_, but it is possible to do things in ways that are overall unhelpful. If your solution differs wildly from the official solution (and still passes the self-check criteria), feel free to ask about it in the chatroom.
|
||||
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ img {
|
|||
right: 0;
|
||||
height: 52px;
|
||||
display: flex;
|
||||
align-items: center;;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #eee;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
# CSS Methods
|
||||
This final exercise for CSS Foundations is going to give you a closer look at the cascade, in particular specificity and rule order. Both the HTML and CSS files are filled out for you, so instead of adding rules yourself, you will simply be editing what is provided.
|
||||
|
||||
There are a few elements that have some sort of specificity or rule order issue in the provided CSS file. It's up to you to figure out what issue is affecting an element, and how to fix it. You can edit the CSS file by adding or removing selectors or moving stuff around, but you should not edit the HTML file or any of the actual style declarations in the CSS.
|
||||
There are a few elements that have some sort of specificity or rule order issue in the provided CSS file. It's up to you to figure out what issue is affecting an element, and how to fix it. You can edit the CSS file by adding, removing, or editing selectors for a declaration block, or by moving declaration blocks around. **You should not edit the HTML file or any of the actual styles in the CSS**.
|
||||
|
||||
There are multiple ways to solve this exercise, and we did our best to include all of the possible solutions for each element.
|
||||
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 48 KiB After Width: | Height: | Size: 69 KiB |
|
|
@ -8,15 +8,15 @@
|
|||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<p class="para">I'm just a simple paragraph!</p>
|
||||
<p class="para small-para">I'm a smaller paragraph!</p>
|
||||
<p class="para">I'm just a paragraph with red text!</p>
|
||||
<p class="para small-para">I'm a smaller paragraph, also with red text!</p>
|
||||
|
||||
<button id="confirm-button" class="button confirm">Confirm</button>
|
||||
<button id="cancel-button" class="button cancel">Cancel</button>
|
||||
|
||||
<div class="text">I'm not related to those divs down there.</div>
|
||||
<div class="text">I have a child!
|
||||
<div class="text child">My ancestor is so embarrassing.</div>
|
||||
<div class="text">I'm a div with green text!</div>
|
||||
<div class="text">I'm a div with green text and a child div!
|
||||
<div class="text child">I'm a smaller child div with red text.</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -8,14 +8,14 @@
|
|||
}
|
||||
|
||||
.button {
|
||||
background-color: #ffc0cb;
|
||||
color: black;
|
||||
background-color: rgb(255, 255, 255);
|
||||
color: rgb(0, 0, 0);
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
div.text {
|
||||
color: green;
|
||||
font-size: 28px;
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
/* SOLUTION */
|
||||
|
|
@ -24,7 +24,7 @@ div.text {
|
|||
For the following rule, we removed it from its original position in the file:
|
||||
|
||||
.small-para {
|
||||
font-size: 12px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
Then we placed it after the .para selector, taking advantage of the rule order since both selectors have the same specificity.
|
||||
|
|
@ -37,7 +37,7 @@ div.text {
|
|||
*/
|
||||
|
||||
.small-para {
|
||||
font-size: 12px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/*
|
||||
|
|
@ -46,7 +46,6 @@ div.text {
|
|||
.confirm {
|
||||
background: green;
|
||||
color: white;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
|
@ -57,7 +56,6 @@ div.text {
|
|||
.button.confirm {
|
||||
background: green;
|
||||
color: white;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
}
|
||||
*/
|
||||
|
|
@ -65,7 +63,6 @@ div.text {
|
|||
#confirm-button {
|
||||
background: green;
|
||||
color: white;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
|
|
@ -8,15 +9,15 @@
|
|||
<link rel="stylesheet" href="solution.css">
|
||||
</head>
|
||||
<body>
|
||||
<p class="para">I'm just a simple paragraph!</p>
|
||||
<p class="para small-para">I'm a smaller paragraph!</p>
|
||||
<p class="para">I'm just a paragraph with red text!</p>
|
||||
<p class="para small-para">I'm a smaller paragraph, also with red text!</p>
|
||||
|
||||
<button id="confirm-button" class="button confirm">Confirm</button>
|
||||
<button id="cancel-button" class="button cancel">Cancel</button>
|
||||
|
||||
<div class="text">I'm not related to those divs down there.</div>
|
||||
<div class="text">I have a child!
|
||||
<div class="text child">My ancestor is so embarrassing.</div>
|
||||
<div class="text">I'm a div with green text!</div>
|
||||
<div class="text">I'm a div with green text and a child div!
|
||||
<div class="text child">I'm a smaller child div with red text.</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -4,7 +4,7 @@
|
|||
}
|
||||
|
||||
.small-para {
|
||||
font-size: 12px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.para {
|
||||
|
|
@ -14,13 +14,12 @@
|
|||
.confirm {
|
||||
background: green;
|
||||
color: white;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.button {
|
||||
background-color: #ffc0cb;
|
||||
color: black;
|
||||
background-color: rgb(255, 255, 255);
|
||||
color: rgb(0, 0, 0);
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
|
|
@ -31,5 +30,5 @@
|
|||
|
||||
div.text {
|
||||
color: green;
|
||||
font-size: 28px;
|
||||
font-size: 22px;
|
||||
}
|
||||
|
|
@ -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!
|
||||
|
||||
### Hints
|
||||
|
||||
- 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
|
||||
- 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
|
|||
|
||||
|
||||
### Self Check
|
||||
|
||||
- The gap is 15px
|
||||
- The grid has two columns
|
||||
- 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 header and footer elements span across both columns
|
||||
- The sidebar element only spans across the first column
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ When the browser is stretched wide:
|
|||
- The grid has two columns
|
||||
- The grid has four rows
|
||||
- The grid tracks do not use static sizes (no pixels!)
|
||||
- The first column is three times larger than the other
|
||||
- The second column is three times larger than the other
|
||||
- The third row is five times larger than the others
|
||||
- The rows and columns stretch wider when making the browser window bigger
|
||||
- The rows and columns stretch taller when making the browser window smaller
|
||||
|
|
|
|||
|
|
@ -22,7 +22,6 @@ If you use the tools in the Advanced Grid Properties lesson you should be able t
|
|||
- The container's second column is 4 times larger than the first column
|
||||
- The container element has a gap of 4px
|
||||
- The header element has two columns
|
||||
- The header element contains another grid that has two columns
|
||||
- The `ul` inside the menu element contains another grid
|
||||
- The `ul` inside the nav element contains another grid
|
||||
- The sidebar element has a gap of 50px
|
||||
|
|
|
|||
Loading…
Reference in New Issue