<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>Forem: Sheetal Bajaj</title>
    <description>The latest articles on Forem by Sheetal Bajaj (@sheetal_bajaj).</description>
    <link>https://forem.com/sheetal_bajaj</link>
    <image>
      <url>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%2F2563344%2F8cf593c1-0796-4532-88b6-73a974e37b05.jpg</url>
      <title>Forem: Sheetal Bajaj</title>
      <link>https://forem.com/sheetal_bajaj</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://forem.com/feed/sheetal_bajaj"/>
    <language>en</language>
    <item>
      <title>Before the Code: Why I Chose Web Development and How I Got Started</title>
      <dc:creator>Sheetal Bajaj</dc:creator>
      <pubDate>Sat, 24 May 2025 07:57:00 +0000</pubDate>
      <link>https://forem.com/sheetal_bajaj/before-the-code-why-i-chose-web-development-and-how-i-got-started-14mh</link>
      <guid>https://forem.com/sheetal_bajaj/before-the-code-why-i-chose-web-development-and-how-i-got-started-14mh</guid>
      <description>&lt;h2&gt;
  
  
  Introduction
&lt;/h2&gt;

&lt;p&gt;Every developer’s journey has an origin story. Some are inspired by tech giants, some by a school project, and some ,like me — by the sheer magic of seeing a plain line of code turn into something beautiful on a screen.&lt;/p&gt;

&lt;p&gt;I’ll be honest, when I first opened Visual Studio Code, it felt like staring at the cockpit of a spaceship. Buttons, menus, icons… and me, sitting there with zero clue where to even start.&lt;/p&gt;

&lt;p&gt;But hey :that’s how every journey begins, right?&lt;br&gt;
With one clueless click.&lt;/p&gt;

&lt;p&gt;So today, I want to walk you through why I chose &lt;strong&gt;web development&lt;/strong&gt; initially over the zillion other tech options out there and how I set up my very first developer environment, because trust me, that very first step is magic.&lt;/p&gt;

&lt;p&gt;And maybe if you're at the edge of taking your first step, this blog will give you the little push you need.&lt;/p&gt;
&lt;h2&gt;
  
  
  Why I Chose Web Development
&lt;/h2&gt;

&lt;p&gt;It’s funny how a random video or a simple blog post can sometimes change the course of your learning journey. That’s exactly what happened to me.&lt;/p&gt;

&lt;p&gt;At the start, like many, I was confused between options:&lt;/p&gt;

&lt;p&gt;Should I learn Python first?&lt;br&gt;
Should I explore C++ and dive into Data Structures?&lt;br&gt;
Should I try Android app development or maybe Machine Learning?&lt;/p&gt;

&lt;p&gt;While exploring these, it's was a lazy evening, and I'm watching yet another YouTube video titled “Learn coding in 10 minutes!” (Spoiler: you won’t 😅).&lt;br&gt;
But something about that video made me pause.&lt;br&gt;
In just a few lines of HTML, the creator had written:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;&amp;lt;h1&amp;gt;Hello, World!&amp;lt;/h1&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;And then boom — it appeared in the browser.&lt;/p&gt;

&lt;p&gt;That was it.&lt;br&gt;
Why I fell for web development:&lt;/p&gt;

&lt;p&gt;🔥 &lt;strong&gt;Instant Results:&lt;/strong&gt; I could see my work immediately in a browser&lt;br&gt;
🎨 &lt;strong&gt;Creativity meets Code:&lt;/strong&gt; I could play with colors, fonts, and layouts while using logic&lt;br&gt;
🌍 &lt;strong&gt;Endless Free Resources:&lt;/strong&gt; &lt;em&gt;freeCodeCamp&lt;/em&gt;, YouTube tutorials, blogs (like this one) everywhere&lt;br&gt;
🛠️ &lt;strong&gt;Beginner Friendly:&lt;/strong&gt; A smooth learning curve with HTML, CSS before moving to complex concepts&lt;br&gt;
And honestly — something about building stuff for the web feels powerful.&lt;br&gt;
The idea that anyone, anywhere, with just a link, can see what you created?&lt;br&gt;
&lt;em&gt;Goosebumps.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;✨&lt;strong&gt;Reflection:&lt;/strong&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;“Your first project won’t win awards, but the confidence you gain from creating something from scratch? Priceless.”&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;That’s when I decided — web development would be my starting point.&lt;br&gt;
Before the First Line of Code: What I Needed&lt;br&gt;
&lt;em&gt;Spoiler:&lt;/em&gt; You don’t need an ultra-gaming laptop or a triple-monitor setup to start.&lt;br&gt;
I began on my trusty old laptop with these:&lt;/p&gt;
&lt;h2&gt;
  
  
  🔖 Prerequisites
&lt;/h2&gt;

&lt;ol&gt;
&lt;li&gt;A laptop/PC (any OS)&lt;/li&gt;
&lt;li&gt;Internet connection&lt;/li&gt;
&lt;li&gt;Visual Studio Code (free &amp;amp; lightweight) 👉 Download it&lt;/li&gt;
&lt;li&gt;A pinch of patience&lt;/li&gt;
&lt;li&gt;And a generous sprinkle of curiosity
And that is it!&lt;/li&gt;
&lt;/ol&gt;
&lt;h2&gt;
  
  
  Setting Up My First Developer Space
&lt;/h2&gt;

&lt;p&gt;Okay — so you’ve decided to start web development. Now what?&lt;/p&gt;

&lt;p&gt;First up: &lt;strong&gt;setting up your code editor.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Once I picked web development, the next question was — where do I actually write code?&lt;br&gt;
Typing HTML in Notepad works, but there are smarter, easier, and beginner-friendly tools out there. Enter Visual Studio Code (VS Code).&lt;/p&gt;
&lt;h2&gt;
  
  
  What is Visual Studio Code (VS Code)?
&lt;/h2&gt;

&lt;p&gt;A free, lightweight, modern code editor made by Microsoft. It’s beginner-friendly and widely loved in the developer community.&lt;/p&gt;
&lt;h2&gt;
  
  
  Why VS Code?
&lt;/h2&gt;

&lt;ol&gt;
&lt;li&gt;Free and open-source&lt;/li&gt;
&lt;li&gt;Runs smoothly even on basic laptops&lt;/li&gt;
&lt;li&gt;Tons of helpful extensions&lt;/li&gt;
&lt;li&gt;Built-in terminal (you’ll love this later)
&lt;a href="https://code.visualstudio.com/" rel="noopener noreferrer"&gt;Download it here&lt;/a&gt;
&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ftk595nrwtqkzcp65tafo.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ftk595nrwtqkzcp65tafo.png" alt="Image description" width="800" height="254"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxz86fi8cadwuysybtkn6.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxz86fi8cadwuysybtkn6.png" alt="Image description" width="800" height="417"&gt;&lt;/a&gt;&lt;br&gt;
&lt;em&gt;Pro Tip:&lt;/em&gt; Customize your theme. Dark mode, galaxy wallpapers,JellyFish theme, Matrix-style fonts — it’s your space, make it feel good😉.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fn3ecq0bkdfohn4v1mtb7.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fn3ecq0bkdfohn4v1mtb7.png" alt="Image description" width="800" height="187"&gt;&lt;/a&gt;&lt;/p&gt;
&lt;h2&gt;
  
  
  📌 Essential VS Code Extensions
&lt;/h2&gt;

&lt;p&gt;Extensions enhance VS Code’s capabilities. Here are the ones I installed on day one:&lt;/p&gt;
&lt;h2&gt;
  
  
  Live Server 🔥
&lt;/h2&gt;

&lt;p&gt;I craved instant results. I didn’t want to write code, save it, open it manually in a browser every time.&lt;br&gt;
Then I found Live Server — an extension that auto-refreshes your browser every time you save your file. It automatically opens your HTML file in a browser and refreshes the page whenever you save changes.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;To install:&lt;/strong&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Open VS Code&lt;/li&gt;
&lt;li&gt;Click on Extensions (📦 icon)&lt;/li&gt;
&lt;li&gt;Search “Live Server” by Ritwick Dey&lt;/li&gt;
&lt;li&gt;Hit Install&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fj7hlxq48gbw00ll426lt.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fj7hlxq48gbw00ll426lt.png" alt="Image description" width="800" height="404"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Usage:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Right-click your index.html file&lt;/li&gt;
&lt;li&gt;Click Open with Live Server&lt;/li&gt;
&lt;li&gt;Your browser opens up with a live preview. Every save refreshes the page automatically.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Other Useful Extensions:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Auto Rename Tag&lt;/em&gt; 🏷️: Automatically updates closing tags when you edit the opening one.&lt;br&gt;
&lt;em&gt;Prettier&lt;/em&gt; ✨: Auto-formats your code for readability.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fnhcjw3tjcyf2p2rei1zc.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fnhcjw3tjcyf2p2rei1zc.png" alt="Image description" width="478" height="1008"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F35vx60dvwgz74y6xinnp.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F35vx60dvwgz74y6xinnp.png" alt="Image description" width="746" height="216"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fsuhuaiscnze9hie95nqs.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fsuhuaiscnze9hie95nqs.png" alt="Image description" width="800" height="176"&gt;&lt;/a&gt;&lt;/p&gt;
&lt;h2&gt;
  
  
  Organizing My First Project
&lt;/h2&gt;

&lt;p&gt;Old me: “Let’s dump everything on Desktop.”&lt;br&gt;
New me: “Let’s stay organized.”&lt;/p&gt;

&lt;p&gt;I created a &lt;code&gt;WebDev-Journey folder&lt;/code&gt; with subfolders like:&lt;br&gt;
&lt;code&gt;Day-1&lt;/code&gt;, &lt;code&gt;Mini-Projects&lt;/code&gt;, &lt;code&gt;Experiments&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fnyo8nm4yxihqc8j08en6.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fnyo8nm4yxihqc8j08en6.png" alt="Image description" width="783" height="335"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Tip:&lt;/strong&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;“Clean code starts with clean folders.”&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Clean folders = clean mind.&lt;br&gt;
When you start working on bigger projects, you’ll thank yourself.&lt;/p&gt;
&lt;h2&gt;
  
  
  Writing My First Webpage
&lt;/h2&gt;

&lt;p&gt;And here it was — my very first index.html.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;&amp;lt;!DOCTYPE html&amp;gt;
&amp;lt;html&amp;gt;
  &amp;lt;head&amp;gt;
    &amp;lt;title&amp;gt;My First Webpage&amp;lt;/title&amp;gt;
  &amp;lt;/head&amp;gt;
  &amp;lt;body&amp;gt;
    &amp;lt;h1&amp;gt;Welcome, Web Development!&amp;lt;/h1&amp;gt;
    &amp;lt;p&amp;gt;This is the start of something new.&amp;lt;/p&amp;gt;
  &amp;lt;/body&amp;gt;
&amp;lt;/html&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;Hit Save&lt;/li&gt;
&lt;li&gt;Right-click → Open with Live Server
And saw my very first webpage.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;It wasn’t fancy.&lt;br&gt;
But it was mine.&lt;br&gt;
And it worked.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F73iaxtboleti0pi505c7.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F73iaxtboleti0pi505c7.png" alt="Image description" width="671" height="306"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Reflections:
&lt;/h2&gt;

&lt;p&gt;I realized something important that day:&lt;br&gt;
The time you spend setting up a clean, efficient environment pays off throughout your learning journey.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;_Lessons I learned:&lt;br&gt;
_&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Live Server saves hours of manual refreshing&lt;/li&gt;
&lt;li&gt;A tidy folder structure means zero confusion later&lt;/li&gt;
&lt;li&gt;VS Code extensions make coding faster, smarter, and way more fun&lt;/li&gt;
&lt;li&gt;
&lt;em&gt;Tip:&lt;/em&gt;
&amp;gt; “Don’t rush to write code. First, set up your tools. It’s like sharpening your pencil before drawing.”&lt;/li&gt;
&lt;li&gt;It’s okay to Google every 2 minutes until your concepts have been cleared.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  🚀 What’s Next?
&lt;/h2&gt;

&lt;p&gt;&lt;em&gt;In the next chapter of this series:&lt;/em&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Learn how HTML works&lt;/li&gt;
&lt;li&gt;Add colors, fonts, and backgrounds with CSS&lt;/li&gt;
&lt;li&gt;Build your first styled personal page…………&lt;/li&gt;
&lt;li&gt;Stay tuned for “From Tags to Style: Understanding HTML Structure and Playing with CSS”&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Final Thought: You Got This
&lt;/h2&gt;

&lt;p&gt;If you’re reading this and haven’t started yet — just download VS Code and write your first index.html.&lt;br&gt;
It’s a small file, a short code — but a giant leap for your confidence.&lt;/p&gt;

&lt;p&gt;If there’s one thing I want you to take away from this — it’s that small wins are huge when you’re starting out.&lt;/p&gt;

&lt;p&gt;Creating your first webpage might not seem like much in the grand scheme of things.&lt;br&gt;
But it’s your entry ticket into a world where you’ll soon be building portfolios, games, apps, and projects you can be proud of.&lt;/p&gt;

&lt;p&gt;Let’s celebrate that first page together. 🎉&lt;/p&gt;

&lt;p&gt;🔥 If you loved this, share it with a fellow Web Dev enthusiast!&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Thank You.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;🚀 &lt;strong&gt;Let’s Connect!&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;👉 &lt;em&gt;Visit me at:&lt;/em&gt;&lt;br&gt;
Linkedin: &lt;a href="https://www.linkedin.com/in/sheetal-bajaj-s06091009/" rel="noopener noreferrer"&gt;https://www.linkedin.com/in/sheetal-bajaj-s06091009/&lt;/a&gt;&lt;br&gt;
GitHub:  &lt;a href="https://github.com/Sheetal-cell" rel="noopener noreferrer"&gt;https://github.com/Sheetal-cell&lt;/a&gt;&lt;br&gt;
X: &lt;a href="https://x.com/Sheetal_11" rel="noopener noreferrer"&gt;https://x.com/Sheetal_11&lt;/a&gt;&lt;br&gt;
Email: &lt;a href="mailto:sheetalbajajgodda@gmail.com"&gt;sheetalbajajgodda@gmail.com&lt;/a&gt;&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>vscode</category>
      <category>beginners</category>
      <category>tutorial</category>
    </item>
    <item>
      <title>CSS Styling Tips: Make Your February Calendar Stand Out</title>
      <dc:creator>Sheetal Bajaj</dc:creator>
      <pubDate>Sun, 23 Feb 2025 18:18:00 +0000</pubDate>
      <link>https://forem.com/sheetal_bajaj/css-styling-tips-make-your-event-calendar-stand-out-48pn</link>
      <guid>https://forem.com/sheetal_bajaj/css-styling-tips-make-your-event-calendar-stand-out-48pn</guid>
      <description>&lt;p&gt;&lt;em&gt;This is a submission for &lt;a href="https://dev.to/challenges/frontend-2025-02-12"&gt;Frontend Challenge - February Edition, CSS Art: February&lt;/a&gt;.&lt;/em&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  ✨Introduction: February—A Month of Love, Remembrance, and Change
&lt;/h2&gt;

&lt;p&gt;February isn’t just another month on the calendar—it carries a special significance.&lt;/p&gt;

&lt;p&gt;It’s the shortest month of the year, yet it holds some of the most powerful and emotional events in history. From celebrating love on Valentine’s Week to honoring sacrifices on Pulwama Attack Remembrance Day, February is a month of emotions, achievements, and reflection.&lt;/p&gt;

&lt;p&gt;As a developer, I wanted to bring these emotions into the digital space.&lt;br&gt;
💡 Can a calendar do more than just mark dates?&lt;br&gt;
💡 Can it make users feel the significance of each day?&lt;/p&gt;

&lt;p&gt;This thought inspired me to create a CSS-only interactive event calendar—a project where each date tells a story, evokes emotions, and brings history to life. 🎨✨&lt;/p&gt;
&lt;h2&gt;
  
  
  🌟 Inspiration
&lt;/h2&gt;

&lt;p&gt;The idea for this project stemmed from my desire to create a visually appealing, interactive, and fully responsive event calendar without relying on JavaScript. I wanted to challenge myself to push the boundaries of CSS and ensure that everything, from hover effects to animations, was handled purely with CSS magic.&lt;/p&gt;

&lt;p&gt;Calendars are a fundamental UI element in many applications, from personal planners to event management tools. However, making them both functional and beautiful while maintaining responsiveness can be tricky. This project was my attempt to blend aesthetics with usability.&lt;/p&gt;
&lt;h2&gt;
  
  
  💡 How I Got the Idea
&lt;/h2&gt;

&lt;p&gt;I’ve always loved interactive UI design. But while working on a calendar layout, I noticed a problem—most calendars are just plain grids of numbers. They don’t tell you why a date matters.&lt;/p&gt;

&lt;p&gt;So, I thought:&lt;br&gt;
🧐 What if each date had a unique effect representing the emotions behind it?&lt;br&gt;
✨ What if I could visualize history using only CSS?&lt;/p&gt;

&lt;p&gt;Thus, my mission was set:&lt;br&gt;
✅ Make a calendar that interacts with the user.&lt;br&gt;
✅ Use pure CSS to bring events to life.&lt;br&gt;
✅ Ensure a seamless, responsive experience across all devices.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fppdfkq56ci9bd2pt7vqn.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fppdfkq56ci9bd2pt7vqn.png" alt="Image description" width="800" height="709"&gt;&lt;/a&gt;&lt;/p&gt;
&lt;h2&gt;
  
  
  🎭 Events That Inspired the Calendar
&lt;/h2&gt;

&lt;p&gt;Each date in this calendar represents something powerful. I carefully selected events that carry deep meaning and used CSS effects to reflect their emotions:&lt;br&gt;
✨ USA Freedom Day (February 1) – Celebrates the abolition of slavery with a waving flag animation.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffhcefykkjei2evdtc8xg.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffhcefykkjei2evdtc8xg.jpg" alt="Image description" width="800" height="800"&gt;&lt;/a&gt;&lt;br&gt;
🕊️ Pulwama Attack Remembrance (February 14) – Honors the brave soldiers with a flickering candle effect.&lt;/p&gt;

&lt;p&gt;🎗️ World Cancer Day (February 4) – Spreads awareness with a glowing ribbon animation.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fonkivlui871u7nm5dtwe.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fonkivlui871u7nm5dtwe.jpg" alt="Image description" width="800" height="800"&gt;&lt;/a&gt;&lt;br&gt;
🏆 Champions Trophy beginning (February 19) – Celebrates sportsmanship with a trophy sparkle effect.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F1w4oqmb5s0xe41bb53wd.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F1w4oqmb5s0xe41bb53wd.jpg" alt="Image description" width="800" height="800"&gt;&lt;/a&gt;&lt;br&gt;
🛕 Maha Shivratri (February 26) – Symbolizes divine energy with a shining trident animation.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxc9o1bw47xqioj0b5bmy.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxc9o1bw47xqioj0b5bmy.jpg" alt="Image description" width="800" height="800"&gt;&lt;/a&gt;&lt;br&gt;
👩‍🔬 International Day of Women &amp;amp; Girls in Science (February 11) – Highlights innovation with a lightbulb effect.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fqtl7nmeso4r6fhtn7uj8.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fqtl7nmeso4r6fhtn7uj8.jpg" alt="Image description" width="800" height="800"&gt;&lt;/a&gt;&lt;br&gt;
💖 Valentine’s Week (February 7–14) – Depicts love and romance with floating hearts.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fjvpxg9drskpgt00xqd1b.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fjvpxg9drskpgt00xqd1b.jpg" alt="Image description" width="353" height="200"&gt;&lt;/a&gt;&lt;br&gt;
🔬 National Science Day (February 28) – Celebrates scientific discoveries with light beam effects.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F1syzux1yndzror4v1tbt.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F1syzux1yndzror4v1tbt.jpg" alt="Image description" width="800" height="800"&gt;&lt;/a&gt;&lt;br&gt;
 Indian Coast Guard (February 1) – Honors India’s air warriors with a jet-fly animation.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F72vte8ia6h9t32zz3pqc.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F72vte8ia6h9t32zz3pqc.jpg" alt="Image description" width="800" height="800"&gt;&lt;/a&gt;&lt;/p&gt;
&lt;h2&gt;
  
  
  🚀 Features: What Makes This Calendar Special?
&lt;/h2&gt;

&lt;p&gt;This event calendar is more than just a grid of dates. It includes:&lt;/p&gt;

&lt;p&gt;✅ &lt;strong&gt;Hover-activated event details&lt;/strong&gt; – Users can see event descriptions, images, and even background music for special occasions.&lt;br&gt;
✅ &lt;strong&gt;Smooth CSS animations&lt;/strong&gt; – Events feature zoom-in and pulse effects to make them stand out dynamically.&lt;br&gt;
✅ &lt;strong&gt;A fixed calendar layout&lt;/strong&gt; – The calendar remains in place while scrolling, ensuring accessibility.&lt;br&gt;
✅ &lt;strong&gt;Fully responsive design&lt;/strong&gt; – On mobile, the calendar shifts above the event details for better readability.&lt;br&gt;
✅ &lt;strong&gt;Pure CSS event image animations&lt;/strong&gt; – Images continuously animate for an engaging experience.&lt;br&gt;
✅ &lt;strong&gt;Background music control&lt;/strong&gt; – Ensuring that only one event audio plays at a time (without JS!).&lt;/p&gt;

&lt;p&gt;Of course, implementing these features without JavaScript came with challenges. &lt;em&gt;Here’s how I tackled them&lt;/em&gt;.&lt;/p&gt;
&lt;h3&gt;
  
  
  🎨 Demo – See the Magic!
&lt;/h3&gt;

&lt;p&gt;🔗 Live Demo: &lt;a href="https://february-calender-css-sheetal-bajaj.netlify.app/" rel="noopener noreferrer"&gt;https://february-calender-css-sheetal-bajaj.netlify.app/&lt;/a&gt;&lt;br&gt;
💾 GitHub Repo: &lt;a href="https://github.com/Sheetal-cell/Frontend-challenge" rel="noopener noreferrer"&gt;https://github.com/Sheetal-cell/Frontend-challenge&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;🎭 Hover over each date to experience unique effects!&lt;/p&gt;
&lt;h2&gt;
  
  
  🛠️ Specified Code: Bringing Events to Life
&lt;/h2&gt;
&lt;h3&gt;
  
  
  ✨USA Freedom Day – The Flag Waves in Code!
&lt;/h3&gt;


&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;@keyframes wave {
    0% { transform: rotate(0deg); }
    50% { transform: rotate(3deg); }
    100% { transform: rotate(0deg); }
}
#event1 {
    animation: wave 1s infinite ease-in-out;
}

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;h3&gt;
  
  
  🕊️ Pulwama Attack Remembrance – Tribute to the Brave
&lt;/h3&gt;


&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;@keyframes flicker {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}
#event14 {
    animation: flicker 2s infinite;
}

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;h3&gt;
  
  
  💖 Valentine’s Week – Love in Motion!
&lt;/h3&gt;


&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;@keyframes floatHeart {
    0% { transform: translateY(0px); opacity: 1; }
    50% { transform: translateY(-10px); opacity: 0.8; }
    100% { transform: translateY(0px); opacity: 1; }
}
#event12 {
    animation: floatHeart 1.5s infinite ease-in-out;
}

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;h3&gt;
  
  
  🛕 Maha Shivratri (Shining Trident Animation)
&lt;/h3&gt;


&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;@keyframes shine {
    0% { text-shadow: 0 0 5px gold; }
    50% { text-shadow: 0 0 15px gold; }
    100% { text-shadow: 0 0 5px gold; }
}
#event26 {
    animation: shine 1.5s infinite alternate;
}

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;h3&gt;
  
  
  🔬 National Science Day (Light Beam Effect)
&lt;/h3&gt;


&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;@keyframes beam {
    0% { box-shadow: 0 0 5px cyan; }
    50% { box-shadow: 0 0 15px cyan; }
    100% { box-shadow: 0 0 5px cyan; }
}
#event28 {
    animation: beam 1.5s infinite alternate;
}

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;h3&gt;
  
  
  ✨Indian Air Force Day (Jet-Fly Animation)
&lt;/h3&gt;


&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;@keyframes fly {
    0% { transform: translateX(-10px); opacity: 1; }
    50% { transform: translateX(10px); opacity: 0.8; }
    100% { transform: translateX(-10px); opacity: 1; }
}
#event1_1 {
    animation: fly 1.5s infinite ease-in-out;
}

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;h2&gt;
  
  
  🛠️ Journey: Challenges, Fixes, and Learnings
&lt;/h2&gt;
&lt;h3&gt;
  
  
  🔹 1. Positioning the Calendar &amp;amp; Events Correctly
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Problem&lt;/strong&gt;: My first version was a disaster. 🤦‍♀️ The calendar and event descriptions were overlapping, misaligned, and totally unreadable on mobile.&lt;br&gt;
&lt;strong&gt;Fix:&lt;/strong&gt; I restructured my layout using Flexbox and CSS Grid, ensuring that:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;On desktop, the calendar stays on the left while event details appear beside it.&lt;/li&gt;
&lt;li&gt;On mobile, the calendar shifts above the event details for better readability.
&lt;/li&gt;
&lt;/ul&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;@media (max-width: 1024px) {
    .container {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .calendar {
        order: 1;  /* Move calendar first */
        width: 100%;
    }

    .event-info-container {
        order: 2;
        width: 100%;
    }
}

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;&lt;strong&gt;Lesson&lt;/strong&gt;: Always plan mobile-first design to avoid layout-breaking issues later.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fs5t3n9lgxhnjbyqn0hpf.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fs5t3n9lgxhnjbyqn0hpf.png" alt="Image description" width="493" height="747"&gt;&lt;/a&gt;&lt;/p&gt;
&lt;h3&gt;
  
  
  🔹 2. Making Events Appear on Hover (Without JS)
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Problem&lt;/strong&gt;: I wanted users to hover over a date and reveal event details, but without JavaScript, I had to find a pure CSS solution.&lt;br&gt;
&lt;strong&gt;Fix:&lt;/strong&gt; &lt;em&gt;I used &lt;code&gt;:hover&lt;/code&gt; and &lt;code&gt;:target&lt;/code&gt; selectors to toggle the event details on hover and active states.&lt;/em&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;td:hover + .event-details {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;However, this approach &lt;em&gt;only worked when the event immediately followed the date in HTML&lt;/em&gt;. To avoid structural dependencies, I later used &lt;em&gt;CSS sibling and adjacent selectors for better control&lt;/em&gt;.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Lesson:&lt;/strong&gt; &lt;em&gt;CSS is powerful but has limitations in dynamic interactions—sometimes, using JS could be more efficient.&lt;/em&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  🔹 3. Keeping the Calendar Fixed on Scroll
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Problem:&lt;/strong&gt; When scrolling down to view event details, the calendar moved out of view.&lt;br&gt;
&lt;strong&gt;Fix:&lt;/strong&gt; I used position: sticky; to keep the calendar in place.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;.calendar {
    position: sticky;
    top: 10px;
    height: fit-content;
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;em&gt;Now, the calendar remains visible even when users scroll down to check event details.&lt;/em&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  🔹 4. Adding Continuous Animations to Event Images
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Problem: **I wanted images in event details to gently zoom in and out for a subtle effect.&lt;br&gt;
**Fix:&lt;/strong&gt; Using @keyframes and animation, I created a pulse-zoom effect:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;@keyframes pulseZoom {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.1); opacity: 0.9; }
    100% { transform: scale(1); opacity: 1; }
}

.event-info img {
    animation: pulseZoom 3s ease-in-out infinite alternate;
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;em&gt;This gives life to static images and makes the event details more engaging.&lt;/em&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  🔹 5. Ensuring Only One Background Music Plays at a Time
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Problem:&lt;/strong&gt; Multiple event audios were playing simultaneously, leading to a chaotic user experience.&lt;br&gt;
&lt;strong&gt;Fix:&lt;/strong&gt; While this is better handled in JavaScript, I experimented with using CSS animation delays and &lt;code&gt;hover&lt;/code&gt; effects to indirectly control playback. However, this was a limitation, as CSS alone cannot stop one audio when another starts.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Lesson:&lt;/strong&gt; &lt;em&gt;Some functionalities, like media control, are best suited for JavaScript.&lt;/em&gt;&lt;br&gt;
&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxub61z9kbzrwo08fse8a.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxub61z9kbzrwo08fse8a.png" alt="Image description" width="432" height="75"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  📚 Learnings &amp;amp; Experiences
&lt;/h2&gt;

&lt;p&gt;🌟 &lt;strong&gt;CSS is incredibly powerful&lt;/strong&gt;—you don’t always need JavaScript!&lt;br&gt;
🌟 &lt;strong&gt;Emotions&lt;/strong&gt; can be embedded into UI with the right animations.&lt;br&gt;
🌟 Small design choices (like &lt;strong&gt;hover effects&lt;/strong&gt;) can enhance user experience massively.&lt;/p&gt;

&lt;p&gt;This project gave me a new perspective on UI/UX design—it’s not just about functionality but also about emotion and storytelling.&lt;/p&gt;

&lt;h2&gt;
  
  
  🚀 Final Thoughts &amp;amp; What’s Next?
&lt;/h2&gt;

&lt;h3&gt;
  
  
  ✅ What I Loved
&lt;/h3&gt;

&lt;p&gt;✔ Bringing history and emotions into CSS.&lt;br&gt;
✔ Experimenting with creative animations.&lt;br&gt;
✔ Learning new CSS techniques.&lt;/p&gt;

&lt;h3&gt;
  
  
  🔜 What’s Next?
&lt;/h3&gt;

&lt;p&gt;✨ Adding real audio clips for an immersive experience.&lt;br&gt;
✨ Expanding the calendar to cover more events.&lt;br&gt;
✨ Improving mobile touch interactions.&lt;/p&gt;

&lt;h2&gt;
  
  
  💬 What Do You Think?
&lt;/h2&gt;

&lt;p&gt;Have you ever built something purely with CSS that felt interactive?&lt;br&gt;
What’s your favorite CSS trick for making pages more dynamic?&lt;/p&gt;

&lt;p&gt;👇 Drop your thoughts in the comments—I’d love to hear them! 😊&lt;/p&gt;

&lt;h2&gt;
  
  
  🎯 Conclusion: A Calendar That Tells a Story
&lt;/h2&gt;

&lt;p&gt;✨ Code isn’t just logic—it’s also art.&lt;br&gt;
✨ A simple hover effect can make a user feel something.&lt;br&gt;
✨ Every date on a calendar has a story. Why not let it speak?&lt;br&gt;
Every event on this calendar tells a story—of resilience, love, discovery, and remembrance. Whether it's raising awareness, celebrating achievements, or honoring sacrifices, these moments shape our collective journey. Let’s embrace these occasions not just as dates but as opportunities to inspire, reflect, and unite for a brighter future.&lt;/p&gt;

&lt;p&gt;🔥 If you loved this, share it with a fellow CSS enthusiast!&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;&lt;em&gt;Thank You.&lt;/em&gt;&lt;/strong&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  🚀 Let’s Connect!
&lt;/h3&gt;

&lt;p&gt;👉 &lt;strong&gt;Visit me at:&lt;/strong&gt;&lt;br&gt;
&lt;em&gt;Linkedin:&lt;/em&gt; &lt;a href="https://dev.tourl"&gt;www.linkedin.com/in/sheetal-bajaj-s06091009&lt;/a&gt;&lt;br&gt;
&lt;em&gt;GitHub:&lt;/em&gt; &lt;a href="https://github.com/Sheetal-cell" rel="noopener noreferrer"&gt;https://github.com/Sheetal-cell&lt;/a&gt;&lt;br&gt;
&lt;em&gt;X:&lt;/em&gt; &lt;a href="https://x.com/Sheetal_11" rel="noopener noreferrer"&gt;https://x.com/Sheetal_11&lt;/a&gt;&lt;br&gt;
&lt;em&gt;Email:&lt;/em&gt; &lt;a href="https://dev.tourl"&gt;sheetalbajajgodda@gmail.com&lt;/a&gt;&lt;/p&gt;

</description>
      <category>frontendchallenge</category>
      <category>devchallenge</category>
      <category>css</category>
      <category>html</category>
    </item>
    <item>
      <title>Tech Trends of 2025</title>
      <dc:creator>Sheetal Bajaj</dc:creator>
      <pubDate>Sun, 19 Jan 2025 06:37:26 +0000</pubDate>
      <link>https://forem.com/sheetal_bajaj/tech-trends-of-2025-7pf</link>
      <guid>https://forem.com/sheetal_bajaj/tech-trends-of-2025-7pf</guid>
      <description>&lt;p&gt;&lt;strong&gt;2025: AI, Sustainability, Local Clouds, and Data Detox&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;This is a submission for the &lt;a href="https://dev.to/challenges/newyear"&gt;2025 New Year Writing challenge&lt;/a&gt;: Predicting 2025.&lt;/p&gt;

&lt;p&gt;Welcome to 2025! where technology doesn't just evolve; it grows, adapts, and occasionally drawing interests at our habits. From mind-liked communication that might finally feel texting a thing of the past, to 3D-printed organs(because who wouldn't want to have a backup heart and organs on our hand, right?), the innovations of the future are set to not only disrupt industries but to redefine how one can live, work, and maybe even procrastinate. In this blog, we'll explore the most mind-blowing, game-changing technologies that might become a mainstream in coming years, and let us just say-the future? It might just be stranger (and more exciting) than we think. &lt;br&gt;
So, get ready for a sneak peak into this chapter of human innovation! &lt;/p&gt;

&lt;h2&gt;
  
  
  1. Self-Repairing Code: When Your Program Becomes Its Own IT Guy
&lt;/h2&gt;

&lt;p&gt;Code that gets itself fixed sounds like science fiction, but in 2025, it might be reality.&lt;br&gt;
Self-repairing systems will use advanced AI to identify bugs, rewrite faulty lines, and optimize performance on the fly. No more late-night debugging marathons-&lt;em&gt;your code will wake up more refresh than you&lt;/em&gt;.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Why it's unique:&lt;/strong&gt;&lt;br&gt;
Forget "&lt;em&gt;works on my machine&lt;/em&gt;" excuses. Your program will now debug itself across all environments and even report its own mistakes (if not only humans could do that).&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Data&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;em&gt;McKinsey&lt;/em&gt; estimates that AI-driven software engineering tools will save the tech industry up to _$100 billion annually by 2025 _by automating testing, debugging, and optimization.&lt;/li&gt;
&lt;li&gt;The AI-powered development tools market is expected to reach &lt;em&gt;$13 billion by 2025&lt;/em&gt;, according to &lt;em&gt;IDC&lt;/em&gt;.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;What to expect&lt;/strong&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt; Debugging logs that sound like therapy sessions: "&lt;em&gt;I fixed myself. You're welcome!&lt;/em&gt;"&lt;/li&gt;
&lt;li&gt; A rise in developers saying, "&lt;em&gt;It wasn't me, the AI fixed it.&lt;/em&gt;"
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;I fixed myself. You're welcome!
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fb4cxwovfy00m56lilpxf.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fb4cxwovfy00m56lilpxf.jpg" alt="Image description" width="285" height="177"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  2. Emotionally Intelligent Machines: When your Laptop Knows You're Frustrated
&lt;/h2&gt;

&lt;p&gt;Picture this: you've been debugging for hours, your IDE detects your rising stress levels, and instead of crashing, &lt;em&gt;it dims the light, plays soothing lo-fi beats, and gently suggests a break&lt;/em&gt;. In 2025, emotionally intelligent machines will adapt to your emotions, whether it's a frustrated coder or a tired gamer.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Why it's unique:&lt;/strong&gt;&lt;br&gt;
These systems won't just understand commands; they'll read your mood through typing speed, facial expressions, or voice tones. Imagine an algorithm that tells your boss, "&lt;em&gt;Their message was all caps-looks like they need a moment and a coffee.&lt;/em&gt;"&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Data:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;According to a 2024 report by &lt;em&gt;Gartner&lt;/em&gt;, emotional AI is expected to &lt;em&gt;grow by 42%&lt;/em&gt; annually and reach a &lt;em&gt;$36 billion market&lt;/em&gt; by 2027.&lt;/li&gt;
&lt;li&gt;A study by &lt;em&gt;Harvard Business Review&lt;/em&gt; shows that 85% of people said they felt more productive with tools that responded to their emotional state.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;What's Next:&lt;/strong&gt;&lt;br&gt;
IDEs that pause before suggesting, &lt;code&gt;Have you tried turning it off and on again?&lt;/code&gt;&lt;br&gt;
Personal devices that send alerts when your mood predicted is bad.&lt;br&gt;
&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F952cx9rrtdk80x4voios.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F952cx9rrtdk80x4voios.jpg" alt="Image description" width="800" height="457"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  3.Biodegradable Tech: Compost Your Laptop. Literally!
&lt;/h2&gt;

&lt;p&gt;By the end of 2025, the phrase &lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;throwaway culture&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;might gets glowed up. Enter biodegradable hardware-laptops, phones and wearables that decompose into nutrient-rich soil when their life cycle ends. Tech companies will introduce plant-based plastics, bio-silicon, and materials that break down faster than your software updates.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Why it's unique:&lt;/strong&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Say goodbye to e-waste and hello to guilt-free gadget upgrades.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;&lt;em&gt;Your old smartphone can literally grow into a tree&lt;/em&gt;.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Data&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;em&gt;Statista&lt;/em&gt; reports that global e-waste generation reached a staggering 53.6 million metric tons in 2019, with projections estimating over &lt;em&gt;74 million metric tons by 2030&lt;/em&gt;.&lt;/li&gt;
&lt;li&gt;The global biodegradable electronics market is expected to grow from $5.3 billion in 2020 to $&lt;em&gt;15.8 billion by 2025&lt;/em&gt;, driven by eco-conscious innovation.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;The fun part:&lt;/strong&gt;&lt;br&gt;
Apps that remind you to bury your phone when it dies.&lt;br&gt;
&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fse1pllmq0rm6veta5jr9.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fse1pllmq0rm6veta5jr9.png" alt="Image description" width="800" height="450"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  4.Hyperlocal Cloud Networks: The Cloud Moves to your Neighborhood
&lt;/h2&gt;

&lt;p&gt;&lt;em&gt;Global Clouds?&lt;/em&gt; Too mainstream. By 2025, hyperlocal clouds will dominate-tiny, neighborhood-level data centers that might optimize latency for local services.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Why it's unique:&lt;/strong&gt;&lt;br&gt;
Instead of your data traveling halfway around the world, it'll ping to a server next door (&lt;em&gt;maybe even in your garage&lt;/em&gt;). These hyperlocal setups will also reduce energy consumption and reliance on massive global infrastructure.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Data:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;em&gt;Cisco&lt;/em&gt; reports that by 2025, over &lt;em&gt;75%&lt;/em&gt; of data will be processed at the edge, close to where it is generated, creating the foundation for hyperlocal cloud systems.&lt;/li&gt;
&lt;li&gt;Local cloud solutions can reduce energy costs by 40% compared to traditional data centers, according to a &lt;em&gt;Forbes report&lt;/em&gt;.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Cool Possibilities:&lt;/strong&gt;&lt;br&gt;
Developers building apps that work better in certain zip codes.&lt;br&gt;
Tech meetups hosted in actual neighborhood data centers.&lt;br&gt;
&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fgsgeh661smbvifoipklm.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fgsgeh661smbvifoipklm.jpg" alt="Image description" width="800" height="450"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  5.The Great Data Detox Movement: When Privacy Becomes a Lifestyle
&lt;/h2&gt;

&lt;p&gt;In 2025, privacy isn't just a policy-&lt;em&gt;it's a personal mission&lt;/em&gt;. The  &lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Data Detox&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;trend will inspire people to reclaim their digital footprint, aided by apps that analyze your online presence and help you delete unnecessary or invasive data. Think of it as &lt;em&gt;Marie Kondo&lt;/em&gt; for your digital life.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Why it's unique:&lt;/strong&gt;&lt;br&gt;
Instead of hoarding terabytes of unnecessary files, people will actively reduce their online clutter. Expect social media timelines filled with, &lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;"Just deleted 500 outdated tweets-feels amazing!"&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;&lt;strong&gt;Data:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;A &lt;em&gt;Pew Research&lt;/em&gt; study shows that 81% of Americans feel their data is being misused by companies, spurring the demand for more privacy-conscious tech solutions.&lt;/li&gt;
&lt;li&gt;By 2025, the global market for data privacy solutions is expected to surpass $10 billion, according to &lt;em&gt;MarketsandMarkets&lt;/em&gt;.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;For Developers:&lt;/strong&gt;&lt;br&gt;
Apps that gamify data cleaning: &lt;em&gt;"You've unlocked the 'Clean Cloud badge!"&lt;/em&gt;&lt;br&gt;
More pressure to design systems with &lt;em&gt;privacy-by-default&lt;/em&gt; principles.&lt;br&gt;
&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F1bahdpbmqaz85q2h569b.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F1bahdpbmqaz85q2h569b.png" alt="Image description" width="800" height="300"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Conclusion
&lt;/h2&gt;

&lt;p&gt;2025 is shaping up to be a year where tech isn't just about gadgets-it's about whole new way of living with and interacting through innovations. From emotionally intelligent machines to hyperlocal clouds and biodegradable tech, the future is full of surprises that will make our daily lives &lt;em&gt;smarter, greener and a lot more efficient&lt;/em&gt;.&lt;br&gt;
But, what do you think? Are these trends exciting or little out there? Maybe you have a future trend of your own that's even crazier! Drop a comment below, share your thoughts, or predict a trend that we didn't see coming. Let's start conversation about it-because, after all, we're all part of shaping it.&lt;br&gt;
As developers, creators and consumers, it's our chance to embrace the unexpected and code the future we truly want (&lt;em&gt;or at least one that doesn't crash&lt;/em&gt;)  &lt;/p&gt;

&lt;p&gt;Thank You.&lt;br&gt;
Visit me at:&lt;br&gt;
Linkedin: &lt;a href="http://www.linkedin.com/in/sheetal-bajaj-s06091009" rel="noopener noreferrer"&gt;www.linkedin.com/in/sheetal-bajaj-s06091009&lt;/a&gt;&lt;br&gt;
GitHub: &lt;a href="https://github.com/Sheetal-cell" rel="noopener noreferrer"&gt;https://github.com/Sheetal-cell&lt;/a&gt;&lt;br&gt;
X: &lt;a href="https://x.com/Sheetal_11" rel="noopener noreferrer"&gt;https://x.com/Sheetal_11&lt;/a&gt;&lt;br&gt;
Email: &lt;a href="mailto:sheetalbajajgodda@gmail.com"&gt;sheetalbajajgodda@gmail.com&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F4mzcpvniltfm3bckg02g.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F4mzcpvniltfm3bckg02g.gif" alt="Image description" width="480" height="480"&gt;&lt;/a&gt;&lt;/p&gt;

</description>
      <category>devchallenge</category>
      <category>newyearchallenge</category>
      <category>future</category>
      <category>ai</category>
    </item>
    <item>
      <title>My First Hackathon Experience</title>
      <dc:creator>Sheetal Bajaj</dc:creator>
      <pubDate>Tue, 24 Dec 2024 10:59:30 +0000</pubDate>
      <link>https://forem.com/sheetal_bajaj/my-first-hackathon-experience-386g</link>
      <guid>https://forem.com/sheetal_bajaj/my-first-hackathon-experience-386g</guid>
      <description>&lt;p&gt;&lt;strong&gt;&lt;em&gt;Learning, Growing and Winning as a Fresher.&lt;/em&gt;&lt;/strong&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Introduction
&lt;/h2&gt;

&lt;p&gt;Participating in a hackathon had always been an exciting thought for me, but as a fresher, I had no idea how to perform. So, when the opportunity to participate in our college's hackathon competition came up, I was equally excited and nervous. Hackathons are often described as intense, collaborative problem-solving events, and I was curious to experience it authentically.&lt;/p&gt;

&lt;p&gt;Initially, I had no idea on what and how the project for Hackathon be built. After a couple of weeks and focusing on our learned skills we ended up deciding building a website for Anweshan with combining functionality with aesthetic appeal. Anweshan is not just a fest; it’s a platform where students showcase their talents, network with peers, and experience cutting-edge technology and creativity.&lt;/p&gt;

&lt;p&gt;I didn’t expect that this hackathon would turn out to be a defining moment of my college journey.&lt;/p&gt;

&lt;h2&gt;
  
  
  The Idea and Team Formation
&lt;/h2&gt;

&lt;p&gt;It all began with a simple idea. We noticed that Anweshan, being one of the most anticipated events on campus, could have a digital platform which should be both engaging and informative. Our idea was to create a dynamic website that could act as the central hub for event details, registration, schedules, reviews and more.&lt;/p&gt;

&lt;p&gt;Forming a team was the next step. Could I work well with a team? This was the first thought came to my mind when I had to search for a team. Hackathons are not a solo sport. Working in a team taught me the importance of communication and collaboration. And I could not ask for a better team than I got. We were a group of three freshers from different and same departments, united by our shared passion for learning and building. Each of us brought something unique to the table— designing, coding, planning, presenting and creative problem-solving. Though we were new to hackathons, our enthusiasm took up for our lack of experience.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fzew1dpa7xi3iidhh406f.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fzew1dpa7xi3iidhh406f.png" alt="Image description" width="800" height="399"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Building the Website
&lt;/h2&gt;

&lt;p&gt;The website was more than just a collection of pages; we wanted it to be hands-on. After ideation and mind mapping, we decided on key features:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Home Page&lt;/strong&gt;: Highlighting the theme of Anweshan, with eye-catching posters of events and layout designs.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Event Section&lt;/strong&gt;: Providing details about tech workshops, cultural events, and competitions.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Registration Portal&lt;/strong&gt;: Enabling participants to sign up seamlessly on clicking on the respective posters.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Schedule&lt;/strong&gt; : Keeping attendees updated with real-time information.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Gallery Section&lt;/strong&gt;: Included images and videos for previously organized events.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Review Section&lt;/strong&gt;: Provides feedbacks from experienced participants in previous events to guide in a better way&lt;/p&gt;

&lt;p&gt;Contact Section: Includes links for all social media sites of the event and contact details of the organizing committee and mapping for the address of event.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://anweshan-2k24.netlify.app/" rel="noopener noreferrer"&gt;Here’s our built website&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Our tech stack included HTML and CSS for the front end. Although simple by professional standards, it was ambitious for us as beginners.&lt;/p&gt;

&lt;p&gt;For code used in website visit my GitHub profile:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://github.com/Sheetal-cell/Anweshan-project" rel="noopener noreferrer"&gt;Here’s the GitHub code.&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The process was smooth beside anything. Debugging errors, aligning elements, and ensuring the website was responsive took longer than we expected. But instead of panicking, we divided the work, brainstormed solutions, and resolved it just in time.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fqzqfl8a3spsn08qa2a3k.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fqzqfl8a3spsn08qa2a3k.png" alt="Image description" width="800" height="376"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fl6lurnj9p72aveyilp3w.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fl6lurnj9p72aveyilp3w.png" alt="Image description" width="800" height="372"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffsfuww8zpo9acrd4pli6.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffsfuww8zpo9acrd4pli6.png" alt="Image description" width="800" height="376"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  The Hackathon Experience
&lt;/h2&gt;

&lt;p&gt;Our hackathon venue was buzzing with energy. Teams were discussing away, mentors were walking around offering advice and suggestions to be implemented, and the sound of keyboards filled the air. There was something so inspiring about seeing everyone so focused and driven.&lt;/p&gt;

&lt;p&gt;One of the most memorable moments was when a mentor stopped by our table and complimented our website's user-friendly interface. They suggested we add a "Details about date and information about events in the events section apart from the banners", which turned out to be a game-changer.&lt;/p&gt;

&lt;p&gt;Another highlight was the teamwork. We worked tirelessly through the night, cheering each other on through every small milestone. It was exhausting but exhilarating.&lt;/p&gt;

&lt;p&gt;The competition was of 2 levels. We qualified the first and were selected for the final presentation round.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3yjnlwr4f8wf1776bn29.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3yjnlwr4f8wf1776bn29.jpg" alt="Image description" width="800" height="600"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Flmrve7ja6vgfqsxyo54l.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Flmrve7ja6vgfqsxyo54l.jpg" alt="Image description" width="800" height="600"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  The Presentation and Results
&lt;/h2&gt;

&lt;p&gt;Presenting our project to the judges was both feeling nervous and exciting. We had five minutes to explain our vision and demonstrate the website’s features. We focused on showing how our website made Anweshan more accessible and engaging for participants.&lt;/p&gt;

&lt;p&gt;The judges appreciated our approach, especially considering it was our first hackathon. When the results were announced, and our team won the "&lt;strong&gt;Best Freshers Team&lt;/strong&gt;" award jointly, I was overwhelmed with excitement and joy. All the exhaustion and hard work had paid off!&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3toifcfu67q1mk1hink5.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3toifcfu67q1mk1hink5.jpg" alt="Image description" width="800" height="600"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fr93hi47c1ksp0vqcizuk.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fr93hi47c1ksp0vqcizuk.jpg" alt="Image description" width="800" height="600"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fy7gz7tumykcghtg2dxob.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fy7gz7tumykcghtg2dxob.jpg" alt="Image description" width="800" height="577"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Takeaways and Reflections&lt;/strong&gt;&lt;br&gt;
This hackathon taught me more than just technical skills. I learned how to work effectively in a team, handle pressure, and think creatively under time constraints. It boosted my confidence and showed me the importance of collaboration.&lt;/p&gt;

&lt;p&gt;I realized that we don’t need to be an expert to participate in a hackathon. It’s about learning, experimenting, and pushing your limits. This experience has inspired me to take on more challenges and explore the endless possibilities in the tech world.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Conclusion&lt;/strong&gt;&lt;br&gt;
To all the freshers out there: don’t wait for the perfect coding language to participate in a hackathon. Jump in, even if you feel underprepared. You’ll be amazed at what you can achieve when you step out of your comfort zone even if the result is not as per your expectations.&lt;/p&gt;

&lt;p&gt;I’m grateful to my team for their dedication, to the mentors and seniors for their guidance, and to the organizers for creating such an incredible platform. This was just the beginning of my journey, and I can’t wait to see where it takes me next!&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Thank You&lt;/em&gt;.&lt;/p&gt;

&lt;p&gt;Visit me at:&lt;/p&gt;

&lt;p&gt;Linkedin: &lt;a href="http://www.linkedin.com/in/sheetal-bajaj-s06091009" rel="noopener noreferrer"&gt;www.linkedin.com/in/sheetal-bajaj-s06091009&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;GitHub: &lt;a href="https://github.com/Sheetal-cell" rel="noopener noreferrer"&gt;https://github.com/Sheetal-cell&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;X: &lt;a href="https://x.com/Sheetal_11" rel="noopener noreferrer"&gt;https://x.com/Sheetal_11&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Email: &lt;a href="mailto:sheetalbajajgodda@gmail.com"&gt;sheetalbajajgodda@gmail.com&lt;/a&gt;&lt;/p&gt;

</description>
      <category>hackathon</category>
      <category>webdev</category>
      <category>website</category>
      <category>programming</category>
    </item>
  </channel>
</rss>
