Building My First Portfolio Website with HTML, CSS, and JS

TL;DR

Built my first developer portfolio using pure HTML, CSS, and vanilla JavaScript — no frameworks, no build tools. Perfect learning foundation for understanding web fundamentals before jumping into modern frameworks.

Who This Is For

• Complete beginners starting their first web project
• Self-taught developers wanting to understand the fundamentals
• Anyone curious about vanilla web development

Prerequisites: Basic computer skills, text editor, web browser. No prior programming experience needed!

---

Before I ever touched React or any modern frameworks, I decided to build something from scratch: my own developer portfolio. No templates, no build tools — just handcrafted HTML, CSS, and vanilla JavaScript.

I wanted to understand how the web actually works behind the scenes. Looking back, this project feels like the most important learning experience I've had so far.

You can still see the code on GitHub. Even though I've moved on to bigger projects, this little site was where it all began.

🛠 What I Built

• A clean homepage introducing who I am and what I'm passionate about
• A projects section to showcase my earliest experiments
• Fully responsive design using only CSS and media queries
• Smooth navigation and basic interactivity with vanilla JavaScript
• Simple, fast performance without any external dependencies

🧠 What I Learned

1. Mastering the Basics

This project taught me how powerful the fundamentals are. Understanding how HTML structures content, CSS controls presentation, and JavaScript drives interactivity has made me a stronger developer in every project since.

<!-- Example of clean, semantic HTML structure -->
<header class="hero">
  <h1>Maruf Hossain</h1>
  <p>Full-Stack Developer</p>
  <nav>
    <a href="#about">About</a>
    <a href="#projects">Projects</a>
    <a href="#contact">Contact</a>
  </nav>
</header>

2. Real Responsive Design

I had to think critically about layout using flexbox, percent-based widths, and media queries to make sure the site looked good on phones, tablets, and desktops.

/* Example of responsive design approach */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

@media (max-width: 768px) {
  .container {
    padding: 0 15px;
  }
}

3. Version Control and Deployment

I learned how to set up a GitHub repository, commit changes properly, and use GitHub Pages to publish my site with a custom domain. Seeing my work live on the internet for the first time was an incredible feeling.

4. Debugging Without a Safety Net

No frameworks meant no abstractions to hide behind. Every bug, every broken layout, and every JavaScript error was mine to figure out. Spending hours in browser DevTools taught me patience and precision.

🎨 Screenshot

🔗 Explore It Yourself

📌 Next Steps

Ready to build your first portfolio?

1. Start with a simple HTML structure - header, main, footer
2. Add CSS for layout using Flexbox and Grid
3. Learn JavaScript basics with MDN Web Docs
4. Deploy for free on GitHub Pages

Essential skills this project teaches:

• HTML semantic structure and accessibility
• CSS layout fundamentals and responsive design
• Vanilla JavaScript DOM manipulation
• Git version control and deployment workflows

Building your first site? I'd love to see what you create! Share your progress or ask questions at /contact.

— Maruf