Advanced HTML CSS: Adding a Project to Animations section

[abirbhattacharya82]

Describe your suggestion

The Animations section under Advanced HTML CSS is pretty theoritical and with very less scope in practical usage. It would be good for learners if there was a project included in this section like most of the other sections.

I would like to suggest a simple project like a carousel of images would be nice implementations of css animations.

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.

[01zulfi]

An animated carousal of images project sounds nice. @TheOdinProject/intermediate-html-css what do y'all think?

[ManonLef]

I do like the idea, but there’s already an image carousel in this lesson, that’s prefaced with

Animations are typically handled by CSS which is a little out of the scope of this lesson, but interactive stuff like this is no fun without a little motion! If you want to take a break and learn more about making stuff move go watch this video.

Perhaps you have a suggestion on how these two exercises would not interfere with each other or become too repetitive?

[wise-king-sullyman]

What if we had a mini project that just added animation to the carousel built in that lesson, and explicitly discourage users from using animations in that lesson as is being discussed in #27247

[abirbhattacharya82]

Hi @ManonLef @01zulfi
I have a better idea as well and I think this project is not yet done.

I am suggesting making an analog clock using html, css. This project will have the applications of transition, transform as well as keyframes. So this will be like combination of all the topics taught in animation section.

[codyloyd]

I'm not opposed to having a project here, but I'm not a fan of any of the suggestions haha.

One project I've done in the past in a workshop was a little CSS/HTML robot. We can provide images of it's body, head, legs, arms and learners would manipulate those to make the robot dance and wave.

... we could make it a little Odin lol

[01zulfi]

^ that would be fun

[wise-king-sullyman]

Another proposed project idea for this section: #27396

[thatblindgeye]

A project would definitely be a good addition. There's several ideas tossed in the hat currently, and we should try to decide on one to go with (unless others feel a project absolutely isn't necessary, which we can also have that discussion).

• 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)

@codyloyd @wise-king-sullyman @01zulfi what do y'all think? The easiest might be the image carousel since we already have some instruction on that. The solar system that is linked from #27396 above looks pretty cool, though has a lot of moving parts (maybe it isn't an issue considering where the project would be placed in the curriculum). The dancing Odin robot sounds pretty fun and I just like the idea of a dancing Odin-bot.

[wise-king-sullyman]

I'm also quite tempted by the dancing Odin-bot

[fadingmorsecode]

Just to chime in and say I immediately noticed the lack of a project here. Granted I'm not to the end of the course yet but it seems like a bit of info that would benefit from being reinforced by a small project. I like the idea of the Odin bot.

[thatblindgeye]

Closing this discussion in favor of an issue to move forward with a project addition.