Nature CSS Art : Frontend Challenge: June Edition

#frontendchallenge #devchallenge #css #webdev

This is a submission for Frontend Challenge v24.04.17, CSS Art: June.

Inspiration

I started with a vision of a scenic animation that includes natural elements like the sun, clouds, birds, trees, hills, water, and a ship.
I created a comprehensive HTML structure with nested div elements, each representing a different part of the scene. This hierarchical structure is essential for applying styles and animations effectively.

Demo

Journey

What You Learned

HTML Structure: I gained experience in organizing complex HTML structures, ensuring that each element is properly nested and logically named.
Animation Preparation: By setting up detailed spans and wrapper divs, I learned how to prepare your HTML for advanced CSS animations.
Modularity: The use of classes for each distinct element (like birds, clouds, hills, etc.) highlights the importance of modularity and reusability in web development.

What You Hope to Do Next

CSS Animations: You aim to bring your static HTML to life by adding CSS animations, making the sun rise, clouds float, birds flap their wings, water ripple, and the ship sail.

Take me to the beach Frontend Challenge: June Edition

chintanonweb ・ May 30

#devchallenge #frontendchallenge #css #javascript

Top comments (23)

chintanonweb • Jun 12 • Edited

@thepracticaldev @ben @jess @peter @sloan @noahbrinker have you checked my submissions?

Jess Lee • Jun 14

Hey @chintanonweb, we've noticed your consistent effort and the quality of your submissions in our challenges. Congrats on so many completion badges! While your projects weren't chosen this time, please don't be disheartened. Your creativity and commitment are obvious, and we hope to see more of your excellent work in future challenges.