All HTML/CSS assignments: Update lessons to reflect restructured css-exercises repo

[Eduardo06sp]

Because

we agreed to restructure the css-exercises repo in order to improve discoverability and clarity (see related Issue).

It also helps avoid user error when having to navigate a confusing directory structure that does not reflect TOP's curriculum structure.

This PR

• updates the following assignments with a specific link to the new directories:
  • intro to css
  • cascade
  • block and inline
  • alignment
  • positioning grid elements
  • advanced grid properties
  • keyframes
• where possible, includes more text as part of the link
  • this makes it easier to click on
  • it also helps clearly describe where the link text is actually taking you to
• simplifies reminder to check the README instructions for some of the assignments

Issue

Related to TheOdinProject/css-exercises#593

Additional Information

Pull Request Requirements

• I have thoroughly read and understand The Odin Project curriculum contributing guide
• The title of this PR follows the location of change: brief description of change format, e.g. Intro to HTML and CSS lesson: Fix link text
• The Because section summarizes the reason for this PR
• The This PR section has a bullet point list describing the changes in this PR
• If this PR addresses an open issue, it is linked in the Issue section
• If any lesson files are included in this PR, they have been previewed with the Markdown preview tool to ensure it is formatted correctly
• If any lesson files are included in this PR, they follow the Layout Style Guide

[Eduardo06sp]

@MaoShizhong I am unable to request a review. I am assuming that there is some sort of access control preventing me from doing so.

(Pinging you since you instructed me to request a review from you.)

[MaoShizhong]

Thanks for doing these. I feel like some of the links text labels fit the situation as well now, especially since some of them imply that the link will take people to the CSS exercises repo, then instructs them to navigate to a directory. I can see some confusion occuring when the link takes them to a place where those directories don't exist.

Perhaps if all of the relevant assignment steps could be reworded to something like the following (suggestion only):

Do the exercises in our CSS exercises repository's intermediate-html-css/advanced-grid directory (remember that the instructions are in the README):

Then those links will also make more sense with assistive tech, e.g. a link navigator will have
CSS exercises repository's intermediate-html-css/advanced-grid directory - link
instead of
CSS exercises repository and do the exercises within the intermediate-html-css/advanced-grid directory - link.

Thoughts?

[Eduardo06sp]

@MaoShizhong I think your suggestion would be best.

I am not the biggest fan of repetition, but in this case, I think it would be completely okay to use the exact same wording for all of the assignments:

Do the exercises in our CSS exercises repository's intermediate-html-css/advanced-grid directory (remember that the instructions are in the README):

(I used a dummy link for this example)

These links are "scattered" throughout the curriculum (as opposed to being all in one place), so the fact that they all use that wording probably won't even be noticeable. Additionally, it may increase the user's familiarity with CSS assignments, so perhaps it will make it easier to spot the CSS exercises throughout the lessons.

I can go ahead and update all the assignments so they look like that example if you would like, or did you think we should do something different?

[MaoShizhong]

I can go ahead and update all the assignments so they look like that example if you would like, or did you think we should do something different?

If you can go ahead and update the relevant assignment steps for each lesson to follow that kind of wording and allow for the link text format above, that'd be awesome 👍

[Eduardo06sp]

@MaoShizhong I apologize if the pings are unnecessary (please let me know if they are).

I updated the exercises so they follow (more-or-less) this wording:

Do the exercises in our CSS exercises repository's advanced-html-css/animation directory (remember that the instructions are in the README) in the order:

I did have a slight concern that throwing in the reminder would break the flow of the sentence, and was considering rewording it to

Do the exercises in our CSS exercises repository's advanced-html-css/animation directory (remember that the instructions are in the README). Do them in the order:

However, the latter version would indeed make it appear too repetitive for my liking.

Please let me know if you need any changes to be made.

[Eduardo06sp]

Additionally, the very first CSS assignment gets an exception since it is the first time the reader is introduced to it. Thus, I left that one as:

Then, once you know how to use the exercises, navigate to the CSS exercises repository's foundations/intro-to-css directory. Review each README file prior to completing the following exercises in order:

- 01-css-methods
- 02-class-id-selectors
- 03-group-selectors
- 04-chain-selectors
- 05-descendant-combinator

Note: Solutions for these exercises can be found in the solution folder of each exercise.

[MaoShizhong]

🚀