Advanced HTML CSS: Adding a Project to Animations section

[thatblindgeye]

Discussed in #26390

^{Originally posted by abirbhattacharya82 September 24, 2023}

Describe your suggestion

Per the responses in the above linked discussion, it'd be advantageous to add a project to the Animation section of the Advanced HTML CSS course. A "dancing Odin-bot" had favorable responses; it ultimately came down to the following options:

• An analog clock
• An image carousel (we could just yank the image slider from the Dynamic UI lesson out)
• A solar system
• A funky lil guy (Odin-bot)

Depending on the logistics, a project where users are tasked with making a dancing Odin-bot could be a fun way to really practice animations. We would need to provide the "pieces" (i.e. images) of the odin-bot, then from there provide some loose guidelines for what a user has to do for the project.

Expected work that would need to be done, assuming we can utilize the design of the Odin logo for this (cc @codyloyd):

• Create a rough outline of what the project should entail, including what concepts from the Animation section would be covered. Note: this should not be a full project outline yet! This can simply be an outline posted in this issue.
• Upon maintainer approval, create image files for the different pieces of the Odin-bot. This would probably just include a head, body, arm, and leg pieces. Could include 2 arm and leg pieces if they'd visually be for a left/right side. This may be something a maintainer should/has to do, but we can see about this once we get to this point.
• Upon maintainer approval, write out the project content proper

Path

Full Stack Javascript

Lesson Url

https://www.theodinproject.com/paths/full-stack-javascript/courses/advanced-html-and-css

Checks

• I have thoroughly read and understand The Odin Project Contributing Guide
• Would you like to work on this issue?

(Optional) Discord Name

No response

(Optional) Additional Comments

I would like to happily work on this issue by providing with the project and necessary documents.

[MaoShizhong]

Edit: Oh, you meant to not check that box