Building your first website can be exciting… and slightly scary.
I still remember how I googled “how to make a website from scratch” and ended up staring at a blank Visual Studio Code screen.
But that journey taught me so much — and today, I’m sharing all of it with you: the tools I used, the mistakes I made, and tips I wish someone had told me earlier.

1. My Goal: Why I Wanted to Build My First Website from Scratch

Before touching any code, I had one goal:

“I want to make websites on my own — from scratch — and eventually build client projects and blogs.”

That one thought gave me the push to explore tools like HTML, CSS, WordPress, and even XAMPP for local development.

2. Tools I Used to Build My First Website (Simple but Powerful)

a. Visual Studio Code (VS Code)

• Free and beginner-friendly.

• I loved using Emmet shortcuts — typing ! + Enter to start HTML felt magical!

b. Google Chrome Developer Tools

• Helped me inspect and test live changes.

• I learned to fix padding/margin issues quickly here.

c. W3Schools & YouTube

• W3Schools was my go-to for quick reference.

• YouTube tutorials made things visually clear.

d. XAMPP

• Used it to create a local server environment and test PHP pages.

• Installing it was easy, but I forgot the .php extension once and wondered why localhost wasn’t working!

3. The Process: How I Built My First Website Step-by-Step

Here’s a quick breakdown of my workflow:

4. Mistakes I Made While Building My First Website (So You Don’t Have To)

1. I jumped into design before content.

I spent hours choosing fonts and colors before deciding what the site was even about.

Tip: Finalize your structure/content first. Design comes later.

2. Ignored responsiveness at first.

It looked perfect on my laptop… but completely broken on mobile.

Tip: Start mobile-first or keep checking it side-by-side.

3. Didn’t optimize image sizes.

The website loaded so slowly because I used high-res banner images without compression.

Tip: Use TinyPNG or Squoosh to reduce image size before uploading.

5. Final Touches That Made It Feel Real

• Added a favicon

• Linked to social media pages

• Used Google Fonts for better typography

• Uploaded to Hostinger (which I highly recommend for beginners)

6. What I’d Do Differently Today

Now that I know better, I’d:

• Use Bootstrap for faster styling

• Structure my CSS with better comments

• Start every project by understanding the goal and user

Conclusion: You Don’t Need to Be an Expert to Start

I wasn’t a pro when I built my first website. I just started — with curiosity, trial-and-error, and lots of Ctrl+Z. If you’re reading this wondering if you can do it, my answer is:
Yes. 100%. Start today.

Even if you mess up, you’ll learn. And one day, you’ll smile looking back at that “ugly but special” first website. Just like I do.