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