Introduction

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.

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.

But hey: that’s how every journey begins, right?
With one clueless click.

So today, I want to walk you through why I chose web development 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.

And maybe if you're at the edge of taking your first step, this blog will give you the little push you need.

Why I Chose Web Development

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.

At the start, like many, I was confused between options:

• Should I learn Python first?

• Should I explore C++ and dive into Data Structures?

• Should I try Android app development or maybe Machine Learning?

While exploring these, I was along a lazy evening, and was watching yet another YouTube video titled “Learn coding in 10 minutes!” (Spoiler: you won’t 😅).
But something about that video made me pause.

In just a few lines of HTML, the creator had written:

<h1>Hello, World!</h1>

And then boom — it appeared in the browser.

That was it.
Why I fell for web development:

• 🔥 Instant Results: I could see my work immediately in a browser

• 🎨 Creativity meets Code: I could play with colors, fonts, and layouts while using logic

• 🌍 Endless Free Resources: freeCodeCamp, YouTube tutorials, blogs (like this one) everywhere

• 🛠️ Beginner Friendly: A smooth learning curve with HTML, CSS before moving to complex concepts

• And honestly — something about building stuff for the web feels powerful.
  The idea that anyone, anywhere, with just a link, can see what you created?
  Goosebumps.

✨ Reflection:

“Your first project won’t win awards, but the confidence you gain from creating something from scratch? Priceless.”

That’s when I decided — web development would be my starting point.

Before the First Line of Code: What I Needed

Spoiler: You don’t need an ultra-gaming laptop or a triple-monitor setup to start.
I began on my trusty old laptop with these:

🔖 Prerequisites

• A laptop/PC (any OS)

• Internet connection

• Visual Studio Code (free & lightweight) 👉 Download it

• A pinch of patience

• And a generous sprinkle of curiosity

And that is it!

Setting Up My First Developer Space

Okay — so you’ve decided to start web development. Now what?

First up: setting up your code editor.

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

What is Visual Studio Code (VS Code)?

A free, lightweight, modern code editor made by Microsoft. It’s beginner-friendly and widely loved in the developer community.

Why VS Code?

• Free and open-source

• Runs smoothly even on basic laptops

• Tons of helpful extensions

• Built-in terminal (you’ll love this later)

Download it here

Pro Tip: Customize your theme. Dark mode, galaxy wallpapers,JellyFish theme, Matrix-style fonts — it’s your space, make it feel good😉.

📌 Essential VS Code Extensions

Extensions enhance VS Code’s capabilities. Here are the ones I installed on day one:

1. Live Server 🔥

   I craved instant results. I didn’t want to write code, save it, open it manually in a browser every time.
   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.

To install:

1. Open VS Code

2. Click on Extensions (📦 icon)

3. Search “Live Server” by Ritwick Dey

4. Hit Install

Usage:

• Right-click your index.html file

• Click Open with Live Server

• Your browser opens up with a live preview. Every save refreshes the page automatically.

Other Useful Extensions:

• Auto Rename Tag 🏷️: Automatically updates closing tags when you edit the opening one.

• Prettier ✨: Auto-formats your code for readability.

Organizing My First Project

Old me: “Let’s dump everything on Desktop.”
New me: “Let’s stay organized.”

I created a WebDev-Journey folder with subfolders like:
Day-1, Mini-Projects, Experiments

Tip:

“Clean code starts with clean folders.”

Clean folders = clean mind.
When you start working on bigger projects, you’ll thank yourself.

Writing My First Webpage

And here it was — my very first index.html.

<!DOCTYPE html>
<html>
  <head>
    <title>My First Webpage</title>
  </head>
  <body>
    <h1>Welcome, Web Development!</h1>
    <p>This is the start of something new.</p>
  </body>
</html>

Hit Save
Right-click → Open with Live Server
And saw my very first webpage.

It wasn’t fancy.
But it was mine.
And it worked.

Reflections:

I realized something important that day:
The time you spend setting up a clean, efficient environment pays off throughout your learning journey.

Lessons I learned:

• Live Server saves hours of manual refreshing

• A tidy folder structure means zero confusion later

• VS Code extensions make coding faster, smarter, and way more fun

  Tip:
  “Don’t rush to write code. First, set up your tools. It’s like sharpening your pencil before drawing.”

• It’s okay to Google every 2 minutes until your concepts have been cleared.

🚀 What’s Next?

In the next chapter of this series:

• Learn how HTML works

• Add colors, fonts, and backgrounds with CSS

• Build your first styled personal page…………

Stay tuned for “From Tags to Style: Understanding HTML Structure and Playing with CSS”

Final Thought: You Got This

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

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.

Creating your first webpage might not seem like much in the grand scheme of things.
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.

Let’s celebrate that first page together. 🎉

🔥 If you loved this, share it with a fellow Web Dev enthusiast!

Thank You.

🚀 Let’s Connect!

👉 Visit me at:
Linkedin: https://www.linkedin.com/in/sheetal-bajaj-s06091009/
GitHub: https://github.com/Sheetal-cell
X: https://x.com/Sheetal_11
Email: sheetalbajajgodda@gmail.com