All exercises: Restucture folders so they reflect the structure of the curriculum

[Eduardo06sp]

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:

There are multiple users (from the Discord) that accidentally worked through more advanced exercises. I believe that structuring the css-exercises repo similar to the curriculum's structure would serve as a bit of a "fail-safe".

It will also make it easier for everyone else to navigate to the correct exercises.

i.e.
Instead of the folders being laid out like they currently are:

animation  flex  foundations  grid  margin-and-padding

we can structure them just like they appear in the curriculum:

foundations  intermediate-html-and-css  advanced-html-and-css

and the nesting can go deeper if deemed necessary.

However, the drawback is that any potential, future updates to the curriculum's structure will require an update in the css-exercises repo as well. This will, in a way, "couple" this repo's layout to the curriculum's layout.

2. Acceptance Criteria:

N/A

3. Additional Information:

Relevant PR that helped address this concern: TheOdinProject/curriculum#28754

I prefer that a first-time/new contributor takes this one. If no one volunteers after some time, I will likely ask to be assigned to this if the suggestion is accepted.

[abhilash15500]

Hey @Eduardo06sp

This makes a lot of sense to have a folder structure this way: foundations, intermediate-html-and-css, advanced-html-and-css.

A little bit different perspective from my side👇🏼

The problem -
From a Foundations student’s point of view, what was happening before the recent PR changes is that the student would complete exercises 1 to 6, then go back to the main directory and click the animations folder, as it was the first visible option after pressing back. Since they were unaware, they naturally clicked the animations folder and got stuck.

The update -
Now, with the updated assignment, which is split into Step 1 and Step 2, we still leave the learner with the full directory (i.e., we show them all the folders). However, this time we ask them to read the README file.

My thoughts on @Eduardo06sp solution -
What @Eduardo06sp said works and it twould give a lot of clarity but when we show them root folder directory I still know atleast 5/100 are going to still go to intermediate html css folder.

A solution -
Of course, they can still click on the root directory if they want, but if they click on Step 1, they should be given a link to the README file like this: https://github.com/TheOdinProject/css-exercises/blob/main/README.md, and in Step 2, we have already properly linked them to the Foundations directory.

Why this solution -
We can minimize the chances of them navigating to the root directory and accessing the flex or animations folders. They still have access, but it's less likely they'll end up there compared to the current setup, where Step 1 links to the directory containing the animations folder, which a new learner might instinctively click on.

[oceanthunder]

Hi @Eduardo06sp, I'm interested in working on this issue to restructure the folders in the css-exercises repository to align with the curriculum. Could I be assigned to this task? Thank you!

[MaoShizhong]

Thanks for opening the issue and discussion from the original issue/PR in the other repo.

To make a point, there's only so much we can do in terms of people not following instructions. While we can try to make the repo structure more intuitive, there simply will be people who don't read instructions, or get a bit carried away with momentum and forget what they were told to only do.

I think it makes sense to restructure this repo a bit and agree with the top level being the 3 courses separately. This is the directory structure I'm proposing - let me know your thoughts:

├── advanced-html-css
│   └── animation
│       ├── 01-button-hover
│       ├── 02-pop-up
│       └── 03-dropdown-menu
├── foundations
│   ├── cascade
│   │   └── 01-cascade-fix
│   ├── flex
│   │   ├── 01-flex-center
│   │   ├── 02-flex-header
│   │   ├── 03-flex-header-2
│   │   ├── 04-flex-information
│   │   ├── 05-flex-modal
│   │   ├── 06-flex-layout
│   │   └── 07-flex-layout-2
│   ├── intro-to-css
│   │   ├── 01-css-methods
│   │   ├── 02-class-id-selectors
│   │   ├── 03-grouping-selectors
│   │   ├── 04-chaining-selectors
│   │   └── 05-descendant-combinator
│   └── margin-and-padding
│       ├── 01-margin-and-padding-1
│       └── 02-margin-and-padding-2
└── intermediate-html-css
    └── grid
        ├── 01-grid-layout-1
        ├── 02-grid-layout-2
        └── 03-grid-layout-3

We can't change the alphabetical ordering but we can structure it as course -> exercise group -> exercises (exercises are grouped per curriculum lesson assignment). Note that foundations/06-cascade-fix has been moved to its own cascade subdirectory and renumbered to 01. This will hopefully help avoid the common situation where people get carried away and forget the lesson only says to do 1-5, then struggle trying to do 6 too early.

The appropriate lesson files in the curriculum will need updating accordingly, and I think it's sensible to link directly to the relevant exercise group folder for convenience. We'll deal with that later though - get a PR here approved first, then hold off until the curriculum PR is approved, then I can merge together.

Any additional/differing thoughts from the above?

[Eduardo06sp]

@MaoShizhong I think that instead of the margin-and-padding folder, it could be named block-and-inline. That would reflect the name of the lesson where those exercises are to be done.

The grid exercises are split into two different lessons.
We can have:

└── intermediate-html-css
    └── positioning-grid
        ├── 01-grid-layout-1
    └── advanced-grid
        ├── 01-grid-layout-2
        └── 02-grid-layout-3

It does not look as clean, but with these final changes, everything would consistently match the course/lessons as they appear in the curriculum. I skimmed through the lessons just to be sure.

I really like your suggestion best because it's really simple & logically structured. Thank you for taking the time to share that outline. It's already really close to reflecting how everything appears in the curriculum anyways!

[MaoShizhong]

@Eduardo06sp See the updated proposed tree below - let me know what you think. It renames some exercises directories to better reflect the exercise names (and make it less messy as highlight above).

├── advanced-html-css
│   └── animation
│       ├── 01-button-hover
│       ├── 02-pop-up
│       └── 03-dropdown-menu
├── foundations
│   ├── block-and-inline
│   │   ├── 01-margin-and-padding-1
│   │   └── 02-margin-and-padding-2
│   ├── cascade
│   │   └── 01-cascade-fix
│   ├── flex
│   │   ├── 01-flex-center
│   │   ├── 02-flex-header
│   │   ├── 03-flex-header-2
│   │   ├── 04-flex-information
│   │   ├── 05-flex-modal
│   │   ├── 06-flex-layout
│   │   └── 07-flex-layout-2
│   └── intro-to-css
│       ├── 01-css-methods
│       ├── 02-class-id-selectors
│       ├── 03-grouping-selectors
│       ├── 04-chaining-selectors
│       └── 05-descendant-combinator
└── intermediate-html-css
    ├── advanced-grid
    │   ├── 01-responsive-holy-grail
    │   └── 02-holy-grail-mockup
    └── positioning-grid
        └── 01-basic-holy-grail

[Eduardo06sp]

@MaoShizhong I think that makes a lot more sense than what we currently have in this repo.

I'm willing to create a PR in the curriculum repo to update the lessons with the new structure.

Let me know what format/naming you decide on!

[MaoShizhong]

@Eduardo06sp Feel free to PR for all of the relevant lessons to reflect the new repo structure as above. You can do so in a single PR and add "Related to (#593)" in the PR form in place of the usual "Closes #XXXXX" bit. You should also be able to request a review from me via the reviewers drop-down since you're an org member.

@oceanthunder Let me know if you're happy to PR a restructuring of this repo according to the tree above, and I can assign you.

[oceanthunder]

@MaoShizhong Yup! The restructured tree makes more sense to me. I'd be happy to be assigned.

[oceanthunder]

Hey @MaoShizhong I did a PR can you please review it. #604

[Eduardo06sp]

@MaoShizhong Just noticed that the advanced HTML/CSS exercises are under the lesson titled Keyframes.

For the sake of consistency, I am not sure if you want that small bit to look like:

├── advanced-html-css
│   └── keyframes
│       ├── 01-button-hover
│       ├── 02-pop-up
│       └── 03-dropdown-menu

[MaoShizhong]

@MaoShizhong Just noticed that the advanced HTML/CSS exercises are under the lesson titled Keyframes.

For the sake of consistency, I am not sure if you want that small bit to look like:

├── advanced-html-css
│   └── keyframes
│       ├── 01-button-hover
│       ├── 02-pop-up
│       └── 03-dropdown-menu

We'll leave it as it is for now. The exercise group names aren't all 100% the same as the lessons