This is a submission for Frontend Challenge v24.04.17, Glam Up My Markup: Earth Day Celebration Landing Page

What I Built

I created a landing page with a friendly style, adding illustrations and animations to the provided HTML. My goal was to create a welcoming and playful design.

Demo

Find here a link to my project and in this one you will find a public repo with my code.

Journey

It was really fun to work on this project, as I spent some time trying out ideas I've had for a while and experimenting with animations and CSS.

I learned how to create scroll-driven animations, and it was a great chance to try out the animation timeline CSS property. However, since it's still in an experimental state, I prioritized JavaScript-based animations to move elements based on scroll in my project. So I could ensure a more consistent experience across browsers and devices.
One interesting learning was how to create my own feature detection tests using CSS.suports().
Also, I learned more about DOM manipulation and became more confortable using CSS grid.
Certainly, the most challenging part was achieving an acceptable appearance on small devices while retaining the visual interest of my design.