DEV Community

Cover image for Winter Solstice Celebrations - DEV Frontend Challenge Submission
Parnab Bagchi
Parnab Bagchi

Posted on

Winter Solstice Celebrations - DEV Frontend Challenge Submission

This is a submission for Frontend Challenge - December Edition, Glam Up My Markup: Winter Solstice

What We Built

This project is a simple, accessible, and responsive landing page that celebrates the Winter Solstice. It focuses on presenting the science, traditions, and global celebrations surrounding the event. The page is crafted using only HTML and CSS, emphasizing clean design and usability. The goal was to deliver an educational and visually appealing experience while staying true to the theme of the Winter Solstice.

Demo

Check out the live demo of the project here: https://parnab03.github.io/winter-solstice/index.html

Explore the code on GitHub:

GitHub logo Parnab03 / winter-solstice

A simple and interactive website showcasing the science, traditions, and global celebrations of the Winter Solstice, built using HTML, CSS

πŸ₯Ά Winter Solstice Celebrations

This project is a submission for the DEV Frontend Challenge: December Edition. It is a simple, informative website about the Winter Solstice, featuring its science, traditions, and global celebrations.


🍨 Features

  • Highlights the significance of the Winter Solstice.
  • Covers traditions and celebrations across the world.
  • Built with HTML and CSS for structure and styling.

🧊 How to Use

  1. Clone the repository:
    git clone <repository-url>  
    Enter fullscreen mode Exit fullscreen mode
  2. Open index.html in your browser to view the website.



YouTube video:

Journey

This project was a delightful experience that allowed us to dive deep into the theme of the Winter Solstice while refining frontend development skills. Here’s a brief overview of the journey:

  • Planning: We began by researching the science, cultural significance, and global traditions associated with the Winter Solstice to inform the structure and content of the website.
  • Design: Focused on creating a clean, minimalistic layout with a seasonal aesthetic using CSS.
  • Development: Built the landing page entirely with HTML and CSS, emphasizing semantic markup and responsive design.
  • Challenges & Learnings: It was a great exercise in designing without JavaScript while achieving interactivity through CSS effects. We also learned to balance accessibility with aesthetics.

Next steps include exploring how JavaScript could be added for interactive features like animations or quizzes without compromising simplicity.

Team

This submission was created by:
@parnab03 (Web Developer)
@shankhadeep_paria (Designer)
@soumik_ghosh_6f3d3918d6b3 (Web Developer)

Top comments (0)