The "original" photos in this exercise have hyphenated class values (original-proportioned/original-distorted).

This makes it so that the exercise is solvable by only selecting the unique classes in the "avatar" photos. There's no need to chain the avatar class, since "proportioned" and "distorted" are not actually shared between the elements.

Solution: Remove hyphens from the second set of photos.

Having spent 2 hours debugging an extremely simple fix, I propose adding a single line to self-check section to avoid wasting time for new learners:

• Ensure each card has a width of 300px

Is it supposed to be like this?

Solution: add flex: 1; to the card container instead of sidebar.
This is the solution output:

a green background, white text, and a font size of 18px

The Readme for the CSS Exercises https://github.com/TheOdinProject/css-exercises/blob/main/README.md main folder says to "fork and clone" the Github repository, but the curriculum never explains how to "fork" a repository when we get to this point.

When following the curriculum and getting to the "Practice" section of "CSS Foundations" lessons https://www.theodinproject.com/paths/foundations/courses/foundations/lessons/css-foundations, we are directed for the first time to "fork" a repository with no prior instructions on HOW to fork. We are directed to follow a link to TOP Github and to follow the "ReadMe" file. The "Readme" file says to "fork and clone" the repository. A link is provided on how to "clone" but now how to "fork". Two completely different processes.

Some more detailed instructions on how to "fork" to your own repository and clone will be helpful for newbies.

Thanks

I'll be glad to tackle this.

In solution.css file, there are two parts:

• CSS code extracted from style.css that we are supposed to work from
• the /* Solution */ part.

The problem:

In solution.css, .card's width: 300px which is part of the solution, is added to the .card in the part extracted from style.css, instead of under the /* Solution */ part, where it belongs.

Complete the following REQUIRED checkboxes:

• I have thoroughly read and understand The Odin Project Contributing Guide
• 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:

Complete the following REQUIRED checkboxes:

• I have thoroughly read and understand The Odin Project Contributing Guide
• 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 enhancement :

In the chaining selectors lesson, it's required from the learner to set the height to auto so the image keeps it's aspect ratio (proportions), but the height is automatically set to auto by the browser.

Why provide more details in the solution?: The learner can become confused of what he/she should do if the aspect ratio is already as requested.

Suggested improvement: When the learner looks into the solution it would be better to explain that height: auto; adjusts the height to preserve the original aspect ratio of the image, and that the image square aspect ratio was preserved even without writing height: auto; in the css because the height is automatically set to auto by the browser.

Example

.avatar.proportioned {
  width: 300px;
  height: auto;
  /* 
     Setting the height property to auto tells the browser to adjust the height of the image
     to preserve the proportions (aspect ratio) of it,
     (e.g. If the the proportions of the image is 1:2 (width:height), and the width is set to 100px,
     then the height will be adjusted to 200px automatically.
  */
  /*
     The proportions of the image is preserved automatically event without typing height: auto;,
     because height is automatically set to auto by the browser.
  */
}

2. Acceptance Criteria:

• A comment in solution.css that explains to the learner what height: auto; does, and why it's effect was applied even when we didn't write it in the css;

Adding a CODE OF CONDUCT makes it easier for contributors and like-minded developers to find it easier to fit in the community and makes it a healthy environment to persevere. Assign this task to me with the hacktoberfest tag!! #wagmi

In CSS exercise margin and padding 2 section, It will better if we use a different class name. Seems trivial but I was confused while styling the third div in this assignment. It will be better if the class name would be changed to something like container. or sub__container (I use BEM case when writing class names but it's not necessary. ) Please do look into it as it may save many students like us some time.

Complete the following REQUIRED checkboxes:

• I have thoroughly read and understand The Odin Project Contributing Guide
• 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:

I'm not sure if it's just me, but the solution doesn't align the close-button to the top right of the page. I can't seem to figure out how to do that.

Complete the following REQUIRED checkboxes:

[ Yes ] I have thoroughly read and understand The Odin Project Contributing Guide
[ Yes] 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:

[ Yes ] I would like to be assigned this issue to work on it

1. Description of the Feature Request:
   I want to add cheasheet and short before-hand codes for solving these exercises, such that the codes are on the fingertips of the coder.

2. Acceptance Criteria:
   A folder will be added
   Containing Links ns shorcut tricks of css

3. Additional Information:

Complete the following REQUIRED checkboxes:

• I have thoroughly read and understand The Odin Project Contributing Guide
• [ X] 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:

Images won't load. I believe its because the pexels reference no longer works.

2. How To Reproduce:

3. Expected Behavior:

4. Desktop/Device:

• Device: Laptop
• OS: Linux
• Browser: Chrome
• Version: 103

5. Additional Information:

a green background, white text, and a font size of 18px

Complete the following REQUIRED checkboxes:

• [x ] I have thoroughly read and understand The Odin Project Contributing Guide
• [ x] 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:

The readme gives no hint or self-check for the "content" class flex elements leading to a simple "text-align: center;" fulfilling the basic criteria.

2. How To Reproduce:

Following hint and self-check in the readme.md in 06-flex-layout, add "text-align: center;" to content class to match the desired-outcome.png. Compare to solution.css which uses five flex elements to accomplish this but also fulfills and unlisted requirement to shrink the content as the browser window is resized.

3. Expected Behavior:

Following hint and self-check in the readme.md in 06-flex-layout, add flex elements to content class to match the desired-outcome.png.

4. Desktop/Device:

• Device:
• OS:
• Browser:
• Version:

5. Additional Information:

Add hints and/or self-check items to the readme so that users know to add flex elements instead of the simpler text-align element.

• I have thoroughly read and understand The Odin Project Contributing Guide

• The title of this issue is similar to the file, exercise/lesson, or folder: brief description of bug format, e.g. `01 flex center: solution files do not match desired outcome

• If approved, I would like to be assigned this issue to work on it

1. Description of the Bug
The provided .css solution file does not match the necessary outcome.

2. How To Reproduce
Copy and paste the .css and .html file within the solutions folder, and launch the respective index.html file.

3. Expected Behavior
The expected outcome is listed and displayed within the README.md file in the 05-flex-modal folder.

4. Desktop/Device:

• Device: Desktop
• OS: Xubuntu
• Browser: Chrome

Complete the following REQUIRED checkboxes:

• I have thoroughly read and understand The Odin Project Contributing Guide
• 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:

Either add a working url link to href in html files or assign it as a task for the exercise. As of now, all (8) links leads you to a "Your file couldn’t be accessed" webpage.

2. Acceptance Criteria:

[x] Add href="#" to every anchor.
or
[x] Add the full url of "http://www.google.com" webpage (which seemed to be the original intention as the href was initially "google.com""
or
[x] Make it a task in the assignment

-Fix the url to make the page redirect to google
or
-Fix the url to redirect to the same page.

3. Additional Information:

Currently

• I have thoroughly read and understand The Odin Project Contributing Guide
• The title of this issue is similar to the file, exercise/lesson, or folder: brief description of bug format, e.g. React section: Knowledge Checks don't link to resource

• I would like to be assigned this issue to work on it

1. Description of the Bug

It states in the README.md that "This is also the first example where you'll be nesting flex containers inside each other." This is not correct as in the solution provided for exercise 2, there is another flex container added to the unordered lists. Just a simple error, but figured I'd mention it.

Complete the following REQUIRED checkboxes:

• I have thoroughly read and understand The Odin Project Contributing Guide
• 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:

Hello TOP, thanks for this content. It helps solidify understanding.

However, can I suggest a minor update to README.md? It is best to specify that learners go to the top-right in Github, click Fork, before cloning.

Otherwise, learners (like myself) would face the following hint when trying to commit to their own GitHub repo adding embedded git repository

Issue:
In exercise 02-class-id-selectors, solution does not match with desired outcome.
solution.css does not apply font-family to all html elements
Desired outcome:

Solution:

Link To exercise
I believe logic should be reversed for the highlighted / boxed self check item below:

It should be something along the lines of

- The second column is three times larger than the first

The solution provided also aligns with the second column being three times larger than the first column.

issue:

• rightmost header components (button and notification) are not aligned with the desired outcome

solution link:

• https://github.com/TheOdinProject/css-exercises/blob/main/flex/03-flex-header-2/solution/solution.css, line 50 and beyond

The content of the information blurbs aren't all aligned. Pepper is slightly lower than the other three.
It bothers me, could fixing that be added to the solution?

It's caused by the lack of a third line the that particular one.

I didn't have the same issue, as I made each blurb it's own flex container, instead of one whole flex container.

Complete the following REQUIRED checkboxes:

• I have thoroughly read and understand The Odin Project Contributing Guide
• 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:

Currently both the style.css and the pre-solution portion of the solution.css files for this exercise include empty declaration blocks, e.g:

.logo {
}

These empty declaration blocks are not used in other exercises in this repo and should be removed for consistency, and to avoid leading users towards a specific way of doing things (since this repo emphasizes that there are multiple ways of doing things).

2. Acceptance Criteria:

• Remove empty declaration blocks in the style.css and solution.css files

3. Additional Information:

I want to change some colors in your code for better user interface

Complete the following REQUIRED checkboxes:

• I have thoroughly read and understand The Odin Project Contributing Guide
• 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:

Add full descendant combinator solution for this exercise to let us see the possibilities which we may have never thought of.

File Path: css-exercises>foundations>05-descendant-combinator>solution>solutions.css

2. Acceptance Criteria:

• Add to solutions.css file either by css comment or by code.

/* Other possible combinations of selectors

div p
div .text
.container p

*/

or

div p {
  background-color: yellow;
  color: red;
  font-size: 20px;
  text-align: center;
}

div .text {
  background-color: yellow;
  color: red;
  font-size: 20px;
  text-align: center;
}

.container p {
  background-color: yellow;
  color: red;
  font-size: 20px;
  text-align: center;
}

Complete the following REQUIRED checkboxes:

• I have thoroughly read and understand The Odin Project Contributing Guide
• 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:
What steps one might need to take in order to reproduce this bug, e.g.:

1. Move solution.html and solution.css into a folder and launch the html page.
2. Be confused because your test window is maximized and shows the background extending across the entire page
3. Realize after looking up "how to reduce background color width" that the screenshot is in a smaller window.
   To a new user, the top image does not replicate the bottom and causes frustration.
   
   

3. Expected Behavior:

1. See the expected outcome does not have to be exactly bordering the text, for the external case
2. If a user has an expanded window, the red border will be much larger than as is shown

4. Desktop/Device:
The more information you are able to provide, the better.

• Device: PC
• OS: W11
• Browser: Firefox
• Version: 103.0.2

5. Additional Information:
We should replace the desired outcome picture of

with one that a more inexperienced user might come across:

a red background, white text, a font size of 32px, center aligned, and bold

The desired outcome image shows the close-button on the right hand side:

But, when pulling up the solution in my browser, this is what I get:

Either the initial html code is incorrect, or the solution html code is incorrect. I have figured out the correct solution, but wasn't sure if I should open a pull request to fix it. Not sure if it should be fixed in the index.html or solution.html?

The correct code is:

<div class="header">Are you sure you want to do that?
        <div class="close-button">✖</div>
</div>

Instead of:

<div class="header">Are you sure you want to do that?</div>
<div class="close-button">✖</div>

in the exercise 06-cascade-fix the colors red and green were used, but for people that have colorblindness it is difficult to see the difference. If possible it would be better to use opposite colors like yellow/blue, red/yellow, blue/green.

To improve comprehension consider adding a third image and shared property to the challenge.
Currently the avatar class is redundant as the desired outcome can be achieved without chaining selectors.

In other words you can complete the challenge by assigning the prescribed properties (of height and width) to .proportioned and .distorted without chaining to .avatar. Students wanting to learn when and how to use the chaining selector method would benefit from a challenge where chaining was actually necessary.

Complete the following REQUIRED checkboxes:

• [ /] I have thoroughly read and understand The Odin Project Contributing Guide
• [/ ] The title of this issue follows the location for request: brief description of request

The following checkbox is OPTIONAL:

• [/ ] I would like to be assigned this issue to work on it

1. Description of the Feature Request:
One is missing , so it can behaves as expected

2. Acceptance Criteria:

3. Additional Information:

I have already submit the correction on one of my repositories

an orange background and a font size of 18px

At solution.css:

.odd {
  background-color: rgb(255, 167, 167);
  --> font-family: Verdana, DejaVu Sans, sans-serif; <--
}

font-family: Verdana, DejaVu Sans, sans-serif; should be font-family: Verdana, "DejaVu Sans", sans-serif;

Complete the following REQUIRED checkboxes:

• I have thoroughly read and understand The Odin Project Contributing Guide
• 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:

The 06 exercise in the foundations directory needs to be updated to not rely on color for the two groups of texts (currently green and red). One suggestion on Discord was to use black and gray or rely on font weight (200 and 900). Another option could be to have all text be black, but have one group have a background color.

The goal should be to use CSS properties mentioned in the CSS Foundations lesson

2. Acceptance Criteria:

• The exercise is updated to not rely on text color alone to differentiate the two groups of texts, or use a better combination of colors
• The solution image in the README is updated to reflect the new solution criteria

3. Additional Information:

Complete the following REQUIRED checkboxes:

• I have thoroughly read and understand The Odin Project Contributing Guide
• 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:
The solution html for 05-flex-modal exercise is missing a comment that highlights that the div closing tag for the header was moved to create a container that encompasses both the header text and close-button div.

2. How To Reproduce:

1. Open flex/05-flex-modal/solution/solution.html
2. Review for non-existent comment re: adjusted closing div tag.

3. Expected Behavior:

1. There should be a comment in the solution.css that highlights that the closing header div tag needs to be moved to create a container that encompasses both the header text and close-button div in order for the flex properties to apply.

5. Additional Information:
There are two other closed issues that were trying to get at this issue, but framed it as the solution being incorrect.
This would also address much of the confusion also discussed in Discord, as users are stumped by the solution not working on their end.

It may also be worth clarifying the instructions in the READ.ME (the "edit the HTML a bit" sentence).
Thus far in the curriculum, we've be assuming/expecting the index.html to be "correct as is," so a bigger emphasis might need to be placed on really reviewing that given index.html.

Complete the following REQUIRED checkboxes:

• [ Yes ] I have thoroughly read and understand The Odin Project Contributing Guide
• [ Yes] 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:

• [ Yes ] I would like to be assigned this issue to work on it

1. Description of the Feature Request:
I want to add cheasheet and short before-hand codes for solving these exercises, such that the codes are on the fingertips of the coder.

2. Acceptance Criteria:
A folder will be added
Containing Links ns shorcut tricks of css

3. Additional Information:

Complete the following REQUIRED checkboxes:

• I have thoroughly read and understand The Odin Project Contributing Guide
• 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:

• I have thoroughly read and understand The Odin Project Contributing Guide
• The title of this issue is similar to the file, exercise/lesson, or folder: brief description of bug format, e.g. React section: Knowledge Checks don't link to resource

• I would like to be assigned this issue to work on it

1. Description of the Bug

The line in the README.md file says: "- The first column is three times larger than the other".
In reality, according to the desired-outcome.png file, the second column is bigger than the other.

2. How To Reproduce

Open the README.md file and read the README.md file (line 19) :)

3. Expected Behavior

The line in the README.md file should say: "- The second column is three times larger than the other".

4. Desktop/Device:

• Device:
• OS:
• Browser:
• Version:

5. Additional Information

I would change it myself, and really it isn't that big of a problem, but I haven't learnt all about git yet and I don't want to take a bigger detour than I currently am. But I'd like to contribute, sometime.

In other words, I am not yet confident in my abilities (for some reason, I mean it's probably quite easy to do). In fact, I'll fix it.

• I have thoroughly read and understand The Odin Project Contributing Guide
• The title of this issue is similar to the file, exercise/lesson, or folder: brief description of request format, e.g. Global SCSS file: Buttons should have XYZ

• I would like to be assigned this issue to work on it

1. Description of the Feature Request

I think it'd be a good idea to put the Self Checks in a collapsed (by default) drop-down list. This would help users avoid accidentally reading hints as they're reading the instructions, before completing the exercises.

2. Additional Information

The drop-down list is already collapsed by default.
Example code to implement this as seen in the screenshot above:

### Self Check

<details>
  <summary>View self check list</summary>

  - 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.
  - The header and footer have padding.
  - The links in the header and footer are pushed to either side.
  - There is space between the links in the header and footer.
  - The footer has a light gray background (`#eeeeee`).
  - The logo, input and buttons are centered in the screen.
  - The buttons have an appropriate amount of padding.
  - There is space between the logo, input and buttons.

</details>

The screenshot in the README.md file (https://user-images.githubusercontent.com/70952936/131268858-5360bb32-27ba-4ce0-be59-5fda97f5eb12.png) shows all text as sans-serif (potentially Verdana).

The instructions state to only make the odd-numbered elements Verdana: "* All odd numbered elements: a light red/pink background, and a list of fonts containing Verdana as the first option and sans-serif as a fallback"

When the solutions HTML file is previewed, the even-numbered elements are indeed in a serif (default) font.

This mismatch between screenshot, instructions, and the solution file might cause an issue to people working based on the screenshot file as they will think their output doesn't match the provided screenshot.

Complete the following REQUIRED checkboxes:

• I have thoroughly read and understand The Odin Project Contributing Guide
• 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:

Four html files were missing the alt attribute in the img tag. This compromises accessibility. In addition, the use of alternative texts is considered a good practice and should be encouraged whenever appropriate.

2. Acceptance Criteria:

• Add alternative texts where missing

It said twice in the self-check section that items should be arranged horizontally, not vertically. Yet in the solution there is align-items: center property in the .container class. Is that how it supposed to be? Third plant icon is visibly lover than others due to that.

The curriculum repo provides a wiki page with a contributing guide and references a PR template that is used by that repo. This repo doesn't have a contributing guide nor does it link to the curriculum one and it doesn't have a PR template.

To me it seems that the same template and guide could be used in this repo and other exercise repos if needed.

Hi-
The solution in for the style.css doc in the margin-and-padding-2 exercise eliminates the background color for the boxes.

Complete the following REQUIRED checkboxes:

• I have thoroughly read and understand The Odin Project Contributing Guide
• 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:

The exercise can be solved without modifying the markdown by using margin-left: auto to split the navigation, as introduced in the assigned readings for the lesson (here and here). This simplifies the solution and practices a concept that would otherwise remain untested (as far as I can tell).

2. Acceptance Criteria:

• solution.css applies margin-left: auto to the notification class.
• The markdown in solution.html does not add any containers.
• The introductory text about editing the markdown in the README is moved to the next exercise.
• [Optional] A hint that points towards the auto property is added to the README.

3. Additional Information:

My solution can be found here.

Complete the following REQUIRED checkboxes:

• I have thoroughly read and understand The Odin Project Contributing Guide
• 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:

Just like the broken links in exercise 06. As of now, all (4) links leads you to a "Cannot GET /flex/07-flex-layout-2/solution/google.com" webpage. Requesting to make the links "work" (or not lead to an error page).

2. Acceptance Criteria:

Possible solutions:

[x] Add href="#" to every anchor.
or
[x] Add the full url of "http://www.google.com/" webpage (which seemed to be the original intention as the href was initially "google.com""
or
[x] Make it a task in the assignment

-Fix the url to make the page redirect to google
or
-Fix the url to redirect to the same page.

3. Additional Information:

Currently