What You're Building
By the end of this tutorial, you'll have built a fully styled personal portfolio webpage — a complete, working web page that lives on your computer and can be published online. It will include:
- A navigation bar
- A hero section with your name and intro
- An about section
- A projects/skills section
- A contact section
- A footer
- Responsive styling that looks good on desktop and mobile
This isn't a toy project. A personal portfolio is something you'll actually use — and the skills you practice building it are the exact same skills used to build every website on the internet.
Before You Start
What you need:
- A computer running Windows, macOS, or Linux
- VS Code (Visual Studio Code) — free download at code.visualstudio.com
- A web browser (Chrome or Firefox recommended)
- No prior coding experience required
What you should know:
- How to create and save files on your computer
- How to open a browser
That's it. Everything else, we'll build together.
Time commitment: 2 hours. Go at your own pace — there's no timer.
How This Tutorial Works
Each step tells you exactly what to do, shows you the code to write, and explains what that code is doing and why. Don't copy and paste — type the code yourself. Typing it builds muscle memory and forces you to actually read what you're writing. When something doesn't look right, the troubleshooting note at the end of each step will help.
At several points you'll see ✅ Checkpoint — a moment to check your work before moving forward.
Step 1: Set Up Your Project
What we're doing: Creating the folder and files that your project will live in.
1.1 — Create your project folder
Create a new folder on your computer called my-portfolio. You can put it anywhere — your Desktop, your Documents folder, wherever makes sense to you.
1.2 — Open the folder in VS Code
Open VS Code. Go to File → Open Folder and select your my-portfolio folder. VS Code will open the folder in the Explorer panel on the left.
1.3 — Create your files
In VS Code's Explorer panel, create two new files inside your my-portfolio folder:
index.htmlstyle.css
To create a file: click the New File icon in the Explorer panel (or right-click inside the panel and choose New File). Name it exactly as shown above.
1.4 — Install the Live Server extension
In VS Code, click the Extensions icon in the left sidebar (it looks like four squares). Search for Live Server by Ritwick Dey and install it. This extension automatically refreshes your browser every time you save your HTML or CSS — you'll see your changes instantly without manually refreshing.
✅ Checkpoint: You should have a my-portfolio folder open in VS Code with two files: index.html and style.css. The Live Server extension should be installed.
Troubleshooting: If you can't find the Extensions panel, use the keyboard shortcut Ctrl+Shift+X (Windows/Linux) or Cmd+Shift+X (Mac).
Step 2: Build the HTML Structure
What we're doing: Writing the skeleton of your webpage — the HTML that defines what exists on the page, before any styling.
Open index.html and type the following code exactly:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Personal portfolio of [Your Name] — aspiring web developer and tech learner." />
<title>[Your Name] | Portfolio</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- NAVIGATION -->
<nav class="navbar">
<div class="nav-logo">[Your Name]</div>
<ul class="nav-links">
<li><a href="#about">About</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<!-- HERO SECTION -->
<section class="hero" id="home">
<div class="hero-content">
<p class="hero-greeting">Hello, I'm</p>
<h1 class="hero-name">[Your Name]</h1>
<p class="hero-tagline">Aspiring Developer · Tech Learner · Problem Solver</p>
<a href="#projects" class="btn-primary">See My Work</a>
</div>
</section>
<!-- ABOUT SECTION -->
<section class="about" id="about">
<div class="container">
<h2 class="section-title">About Me</h2>
<p class="about-text">
I'm currently learning web development and building projects to grow my skills.
I'm passionate about technology, problem-solving, and creating things that actually work.
This portfolio is one of my first projects — and definitely not my last.
</p>
</div>
</section>
<!-- PROJECTS / SKILLS SECTION -->
<section class="projects" id="projects">
<div class="container">
<h2 class="section-title">Skills & Projects</h2>
<div class="cards-grid">
<div class="card">
<div class="card-icon">💻</div>
<h3 class="card-title">HTML & CSS</h3>
<p class="card-text">Building structured, styled web pages from scratch.</p>
</div>
<div class="card">
<div class="card-icon">🎨</div>
<h3 class="card-title">Responsive Design</h3>
<p class="card-text">Creating layouts that work on any screen size.</p>
</div>
<div class="card">
<div class="card-icon">🚀</div>
<h3 class="card-title">This Portfolio</h3>
<p class="card-text">My first complete web project — built entirely from scratch.</p>
</div>
</div>
</div>
</section>
<!-- CONTACT SECTION -->
<section class="contact" id="contact">
<div class="container">
<h2 class="section-title">Get In Touch</h2>
<p class="contact-text">
I'm always open to learning opportunities, collaborations, and conversations about tech.
</p>
<a href="mailto:your@email.com" class="btn-primary">Send Me an Email</a>
</div>
</section>
<!-- FOOTER -->
<footer class="footer">
<p>Built with HTML & CSS · [Your Name] · 2026</p>
</footer>
</body>