❄️ Codédex Mini Holiday Hackathon
by Iceu · 51 things on Twos
- https://www.codedex.io/holiday-hackathon
- Github Repo
- Steam-Winter-Sale-90s❄️
- Welcome to Steam Winter Sale - 90s Edition, a retro-themed holiday website created for the Codedex Mini Holiday Hackathon! 🎄✨ This is my very first attempt at building a website, and I’m excited to share it with you.
- 🌟 About the Project
- This project is a nostalgic recreation of a 90s-style website, inspired by the Steam Winter Sale. It features:
- A retro design with vibrant colors, marquee text, and blinking Christmas lights.
- A snowfall effect created using JavaScript.
- A selection of classic games with discounts, styled in a 90s aesthetic.
- Background music to enhance the holiday spirit.
- The goal of this project was to combine the charm of 90s web design with the excitement of a holiday sale, all while learning the basics of web development.
- 🛠️ Technologies Used
- HTML: For the structure of the website.
- CSS: For styling and animations (e.g., blinking lights, glowing effects).
- JavaScript: For dynamic effects like the snowfall animation.
- GitHub: To share the project.
- Vercel: For hosting the project.
- 🎮 Features
- Retro Design: A fun and nostalgic 90s aesthetic with marquee text, Comic Sans font, and bright colors.
- Snowfall Animation: A JavaScript-powered snowfall effect to set the holiday mood.
- Game Discounts: A showcase of classic games with discounts, complete with "Buy Now" buttons.
- Background Music: A looping Christmas lo-fi track to enhance the festive atmosphere.
- Interactive Music Control: A "Play Music" button that allows users to toggle the background music on or off.
- 🚀 How to View the Website
- You can view the live version of the website here 👇
- Steam Winter Sale - 90s Edition
- Alternatively, you can clone this repository to your local machine:
- git clone https://github.com/AysuSulucay/Steam-Winter-Sale-90s
- Then, open the index.html file in your browser to view the website locally.
- 🌐 Deployment with Vercel
- This project is deployed using Vercel, a platform that makes it easy to host and deploy web applications. To deploy your own version:
- Push your project to a GitHub repository.
- Connect your GitHub account to Vercel.
- Import the repository into Vercel and deploy it with a single click.
- Vercel will automatically handle the build and deployment process, providing you with a live URL.
- 🎉 My First Website (🌸◡‿◡)
- This is my very first attempt at creating a website, and I’m thrilled to have completed it as part of the Codedex Mini Holiday Hackathon. It was a fun and challenging experience, and I learned a lot about web development along the way.
If you have any feedback or suggestions, feel free to share them! 😊
- Challenges I Face While Creating My 90s Vibe Steam Winter Sale Website
- Let me take you on a journey through my rollercoaster of emotions, and a newfound love-hate relationship with web development. Spoiler alert: CSS and I are no longer on speaking terms.
- HTML: The "Oh, this isn't so bad" phase
- When I first started with HTML I thought, "Hey this is easy Just slap some tags here and there, and voilà, a website" Little did I know, this was just the calm before the storm. Sure, I could throw in some divs and imgs, but as soon as I tried to organize things, I realized I was building a house of cards. One wrong move, and everything collapsed into chaos. But hey, at least I could see something on the screen, so I gave myself a pat on the back.
- CSS: The "Why does this hate me?" phase
- Oh, CSS. My nemesis. My frenemy. My personal tormentor.
I went into this thinking, "How hard can it be to make things look pretty?" Turns out, very hard. 😭 Trying to position game visuals, buttons, and text properly felt like playing Tetris, except the pieces were on fire, and I was blindfolded.
I spent hours tweaking margins and paddings, only to have everything look perfect on one screen size and completely broken on another. Fonts? Oh, don't even get me started. I tried to pick something that screamed "90s gaming nostalgia," but instead, I ended up screaming at my screen. By the end of it, my eyes were so numb from staring at CSS rules that I started dreaming in hex codes. #SendHelp.
- JavaScript: The "At least it's not CSS" phase
- JavaScript was like that one friend who shows up late to the party but doesn’t cause too much trouble. I didn’t do much with it, but when I did, it was a mix of "Wow, this is cool!" and "Wait, why isn’t this working?" I managed to add some basic interactivity, but since I was already emotionally drained from my CSS battles, I didn’t dive too deep. Let’s just say JavaScript and I are on neutral terms for now.
- The Emotional Journey
- This hackathon was my first time coding in HTML, CSS, and JavaScript, and let me tell you, it was like being thrown into the deep end of the pool without knowing how to swim. But despite the frustration, the late two nights, and the occasional existential crisis, I learned so much. I now have a newfound respect for web developers who make this look easy 🙏
And honestly? Even though CSS numbed my eyes and HTML made me question my life choices, I’m proud of what I created. It might not be perfect, but it’s mine. Plus, I think I captured that 90s vibe pretty well—complete with pixelated fonts and a layout that screams "retro chaos."
- Final Thoughts
- In the end, this hackathon was like a crash course in web development, sprinkled with a healthy dose of nostalgia and a pinch of madness. I may have started as a complete newbie, but I came out of it with a website, a lot of lessons learned, and a slightly bruised ego 🙈 And who knows? Maybe one day, CSS and I will reconcile. But for now, I’m keeping my distance 😓