The latest articles on DEV Community by Deepak Kumar (@deepak6299). https://dev.to/deepak6299 https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2604383%2F31bed4dc-f301-4889-aadc-80f9c127474d.jpeg https://dev.to/deepak6299 en Deepak Kumar Mon, 23 Dec 2024 07:13:29 +0000 https://dev.to/deepak6299/glam-up-my-markup-winter-solstice-a9j https://dev.to/deepak6299/glam-up-my-markup-winter-solstice-a9j <p>This is a submission for Frontend Challenge - December Edition, Glam Up My Markup: Winter Solstice.</p> <h2> What I Built </h2> <p>"I built a landing page to celebrate the Winter Solstice, featuring information on the science behind the event, celebrations around the world, and the differences in the solstice across hemispheres. The goal was to create an informative yet visually engaging page, using animations like falling snowflakes and smooth scrolling navigation."</p> <h2> Demo </h2> <p>"You can view the live demo of the landing page <a href="https://github.com/deepak6299/-Glam-Up-My-Markup--Winter-Solstice" rel="noopener noreferrer">Git link</a>. I’ve used HTML, CSS, and JavaScript to create a smooth, interactive experience. You can also access the full source code <a href="https://codepen.io/onnzhnaa-the-decoder/pen/WbeObpz" rel="noopener noreferrer">Codepen Link</a>."</p> <h2> Journey </h2> <p>"This project was a great learning experience for me. I focused on improving my front-end skills by experimenting with CSS animations for the snowflakes effect. I also enhanced my understanding of smooth scrolling and navigation. One challenge was ensuring that the page’s design remains responsive across all devices. I’m particularly proud of the custom snowflake animation that adds a unique touch to the page. Next, I hope to work on optimizing performance and adding more interactivity."</p> devchallenge frontendchallenge css javascript Deepak Kumar Mon, 23 Dec 2024 06:54:30 +0000 https://dev.to/deepak6299/css-art-december-winter-solstice-snow-globe-1c41 https://dev.to/deepak6299/css-art-december-winter-solstice-snow-globe-1c41 <p><em>This is a submission for <a href="https://dev.to/challenges/frontend-2024-12-04">Frontend Challenge - December Edition, CSS Art: December</a>.</em></p> <p>Inspiration<br> For the month of December, I wanted to create something that evokes the feeling of winter and the Winter Solstice. A snow globe came to mind, symbolizing winter festivities, the holiday season, and the beauty of snowfall.</p> <p>Demo<br> Here is a demo of my CSS Art: <a href="https://github.com/deepak6299/CSS-Art-December" rel="noopener noreferrer">Git Link</a></p> <p>You can view and interact with the code in CodePen: <a href="https://codepen.io/onnzhnaa-the-decoder/pen/ogvwgbg" rel="noopener noreferrer">CodePen Link</a></p> <p>Journey<br> I started by sketching out the basic shape of the snow globe, then used HTML to structure it. The key challenge was animating the snowfall effect with CSS animations. I used a radial gradient for the snowflakes and tweaked the keyframes for a smooth snowfall. The Christmas tree was made using a clip-path and linear gradient for the tree's look.</p> <p>I learned a lot about CSS animations, especially how to combine them with JavaScript for more interactive elements like random snowflakes falling across the snow globe.</p> <p>Next, I plan to experiment with adding more interactive features like a snow globe shaker effect using JavaScript.</p> frontendchallenge devchallenge css