diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md new file mode 100644 index 0000000..807fd83 --- /dev/null +++ b/.github/ISSUE_TEMPLATE/bug_report.md @@ -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: "" +--- + + + +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: + +- [ ] I would like to be assigned this issue to work on it + +
+ +**1. Description of the Bug:** + + + +**2. How To Reproduce:** + + + +**3. Expected Behavior:** + + + +**4. Desktop/Device:** + +- Device: +- OS: +- Browser: +- Version: + +**5. Additional Information:** + + diff --git a/.github/ISSUE_TEMPLATE/feature_request.md b/.github/ISSUE_TEMPLATE/feature_request.md new file mode 100644 index 0000000..3e1c93c --- /dev/null +++ b/.github/ISSUE_TEMPLATE/feature_request.md @@ -0,0 +1,38 @@ +--- +name: Feature Request +about: Suggest a new feature or enhancement for this project +title: "" +labels: "Status: Needs Review" +assignees: "" +--- + + + +Complete the following REQUIRED checkboxes: +- [ ] I have thoroughly read and understand [The Odin Project Contributing Guide](https://github.com/TheOdinProject/theodinproject/blob/main/CONTRIBUTING.md) +- [ ] 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: + +- [ ] I would like to be assigned this issue to work on it + +
+ +**1. Description of the Feature Request:** + + + +**2. Acceptance Criteria:** + + + +**3. Additional Information:** + + diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md index 8edabc4..3a7b485 100644 --- a/.github/PULL_REQUEST_TEMPLATE.md +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -1,19 +1,30 @@ - + - -- [ ] 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: + +- [ ] 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` - -- [ ] 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** - +
+**1. Because:** + +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:** + + + +**3. Additional Information:** + + diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..89d5c43 --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +# Ignore MacOS autogenerated +.DS_Store diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md deleted file mode 100644 index d211bb1..0000000 --- a/CONTRIBUTING.md +++ /dev/null @@ -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 `` text with your actual GitHub username: - ```bash - # If you have SSH set up with Git - git clone git@github.com:/css-exercises.git - # Otherwise for HTTPS - git clone https://github.com//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 `` with an actual branch name, e.g. "flex_exercises": - ```bash - git checkout -b - ``` - -2. Add commits as you work on your issue, replacing the `` text with your actual commit message: - ```bash - git commit -m "" - ``` - -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 `` with the branch you've been working on locally: - ```bash - $ git push origin - ``` - -### 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: - - ![GitHub branch dropdown menu](https://user-images.githubusercontent.com/70952936/150646139-bc080c64-db57-4776-8db1-6525b7b47be2.jpg) - - * 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: - - ![Reviewers section of GitHub's sidebar](https://user-images.githubusercontent.com/70952936/150647064-4fdd59d1-82a4-4f18-894d-0e43a5ee0ffb.jpg) - - -## 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). diff --git a/README.md b/README.md index ad7908f..e6e0632 100644 --- a/README.md +++ b/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. - diff --git a/flex/04-flex-information/solution/solution.css b/flex/04-flex-information/solution/solution.css index 95a7ef8..2e53bb8 100644 --- a/flex/04-flex-information/solution/solution.css +++ b/flex/04-flex-information/solution/solution.css @@ -20,7 +20,7 @@ img { right: 0; height: 52px; display: flex; - align-items: center;; + align-items: center; justify-content: center; background: #eee; } diff --git a/foundations/06-cascade-fix/README.md b/foundations/06-cascade-fix/README.md index ddd73c9..989a6eb 100644 --- a/foundations/06-cascade-fix/README.md +++ b/foundations/06-cascade-fix/README.md @@ -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. diff --git a/foundations/06-cascade-fix/desired-outcome.png b/foundations/06-cascade-fix/desired-outcome.png index d4685d6..bcff976 100644 Binary files a/foundations/06-cascade-fix/desired-outcome.png and b/foundations/06-cascade-fix/desired-outcome.png differ diff --git a/foundations/06-cascade-fix/index.html b/foundations/06-cascade-fix/index.html index e1fbc6c..4b5777c 100644 --- a/foundations/06-cascade-fix/index.html +++ b/foundations/06-cascade-fix/index.html @@ -8,15 +8,15 @@ -

I'm just a simple paragraph!

-

I'm a smaller paragraph!

+

I'm just a paragraph with red text!

+

I'm a smaller paragraph, also with red text!

-
I'm not related to those divs down there.
-
I have a child! -
My ancestor is so embarrassing.
+
I'm a div with green text!
+
I'm a div with green text and a child div! +
I'm a smaller child div with red text.
\ No newline at end of file diff --git a/foundations/06-cascade-fix/solution/solution.css b/foundations/06-cascade-fix/solution/solution.css index 44bee02..7242ee3 100644 --- a/foundations/06-cascade-fix/solution/solution.css +++ b/foundations/06-cascade-fix/solution/solution.css @@ -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; } @@ -90,4 +87,4 @@ div.text { div .child { color: red; font-size: 14px; -} \ No newline at end of file +} diff --git a/foundations/06-cascade-fix/solution/solution.html b/foundations/06-cascade-fix/solution/solution.html index 4a0a306..c113940 100644 --- a/foundations/06-cascade-fix/solution/solution.html +++ b/foundations/06-cascade-fix/solution/solution.html @@ -1,5 +1,6 @@ + @@ -8,15 +9,15 @@ -

I'm just a simple paragraph!

-

I'm a smaller paragraph!

+

I'm just a paragraph with red text!

+

I'm a smaller paragraph, also with red text!

-
I'm not related to those divs down there.
-
I have a child! -
My ancestor is so embarrassing.
+
I'm a div with green text!
+
I'm a div with green text and a child div! +
I'm a smaller child div with red text.
\ No newline at end of file diff --git a/foundations/06-cascade-fix/style.css b/foundations/06-cascade-fix/style.css index 9965754..7ad1694 100644 --- a/foundations/06-cascade-fix/style.css +++ b/foundations/06-cascade-fix/style.css @@ -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; } \ No newline at end of file diff --git a/grid/01-grid-layout-1/README.md b/grid/01-grid-layout-1/README.md index 1793fce..e3a3ecf 100644 --- a/grid/01-grid-layout-1/README.md +++ b/grid/01-grid-layout-1/README.md @@ -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 ![desired outcome](./desired-outcome.png) ### 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 diff --git a/grid/02-grid-layout-2/README.md b/grid/02-grid-layout-2/README.md index 11b7059..6e79c57 100644 --- a/grid/02-grid-layout-2/README.md +++ b/grid/02-grid-layout-2/README.md @@ -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 diff --git a/grid/03-grid-layout-3/README.md b/grid/03-grid-layout-3/README.md index f71527b..99f7f6d 100644 --- a/grid/03-grid-layout-3/README.md +++ b/grid/03-grid-layout-3/README.md @@ -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