chore: add moon orbit prototype to CSS labs

[zairahira]

Checklist:

• [x] I have read freeCodeCamp's contribution guidelines.
• [x] My pull request has a descriptive title (not a vague title like Update index.md)

Closes #405

The campers would be asked to create an animation of the moon orbiting the earth.

I have kept the user stories open-ended this time and focused on animation part rather than how the prototype should look visually.

[bbsmooth]

I just have one minor nitpick concerning accessibility. A progress bar is an actual HTML element (<progress>). If this were a real progress bar then you would need to either use the progress element or add role="progressbar" to the div that is acting as the progress bar. JS would also be required to update the various attributes on the progress bar as the speed increases. Obviously, this lab is not intended to mimic a real HTML progress bar, but rather to demonstrate how to use CSS animations. That's fine, but I think we need to make this clear.

I think we should get rid of all references to a progress bar in the code and instructions. We could refer to it as an "acceleration graphic" or something similar. I would also add a disclaimer at the beginning of the instructions that clarifies that although this looks like a progress bar, it is not a proper HTML progress bar, which requires further HTML attributes and JS to implement properly, and that you would not use any of the techniques demonstrated here to implement a real progress bar.

Just to be clear, I understand that the intent here is not to implement a real progress bar but rather to demonstrate CSS animations. My main concern is that by using the term "progress bar" in this lab, people may assume that this is an acceptable method for implementing an HTML progress bar. I just want to make sure that doesn't happen.

[zairahira]

I just have one minor nitpick concerning accessibility. A progress bar is an actual HTML element (<progress>). If this were a real progress bar then you would need to either use the progress element or add role="progressbar" to the div that is acting as the progress bar. JS would also be required to update the various attributes on the progress bar as the speed increases. Obviously, this lab is not intended to mimic a real HTML progress bar, but rather to demonstrate how to use CSS animations. That's fine, but I think we need to make this clear.

I think we should get rid of all references to a progress bar in the code and instructions. We could refer to it as an "acceleration graphic" or something similar. I would also add a disclaimer at the beginning of the instructions that clarifies that although this looks like a progress bar, it is not a proper HTML progress bar, which requires further HTML attributes and JS to implement properly, and that you would not use any of the techniques demonstrated here to implement a real progress bar.

Just to be clear, I understand that the intent here is not to implement a real progress bar but rather to demonstrate CSS animations. My main concern is that by using the term "progress bar" in this lab, people may assume that this is an acceptable method for implementing an HTML progress bar. I just want to make sure that doesn't happen.

I have changed the project from a generic "progress bar" to "acceleration meter".

[moT01]

I like the look of this, but the issue says this is about animations and transforms. The animation is pretty minimal, and it would be nice to include a transform.

We have a lot of labs to make, so I would be fine with it - but I would like to see it use a little more of those things.

Maybe we could call the project "Performance Dashboard"

GPT made this for me: https://codepen.io/moT01/pen/bGPNPZm?editors=1100 - it needs some work, but maybe an idea.