Frontend Challenge - December Edition, Glam Up My Markup: Winter Solstice - Wintice

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

What I Built

I created a landing page for the event "Winter Solstice." My main task was to figure out what it is. Even though I had heard a lot about it, I didn't know how it works. To help others understand it, I decided to add the necessary materials to the website that explain it.

What has been done:

• An interactive navigation menu with beautiful animation, taken from a tutorial but slightly modified.
• Addition of images and videos.
• Zooming in on reduced images.
• Responsive design.

Demo

Live
GitHub

Journey

Actually, I was planning to do a different task. But I started to dig into this one, got involved, and it carried me away. I had never worked directly with the DOM before. I always used some frameworks (React, Astro, Next). Sometimes I used a templating engine (Jinja2). But modifying the DOM directly like this feels amazing; it's like you can change any webpage on the internet (for example, if you don't like its style).
It was interesting to manually toil with responsive design again, without using TailwindCSS or Bootstrap. It was fascinating to see the project through to the end, even though it might seem simple at first glance, it took quite a bit of time for me to figure out and understand how to accomplish what I did.
I feel that this work has brought me one step closer to becoming a web developer. Thank you for the opportunity to participate!

I'm open to criticism! Write down anything you find unsightly or awkward, I'm happy to learn something else!

The above is the detailed content of Frontend Challenge - December Edition, Glam Up My Markup: Winter Solstice - Wintice. For more information, please follow other related articles on the PHP Chinese website!