chintanonwebThis 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.
