Building a Personal Portfolio Website Using HTML & CSS
Mark Haverbeke
TABLE OF CONTENTS
1 . Why Build a Personal Portfolio?
2 . Planning the Structure: Content Before Code
3 . Writing Semantic HTML
4 . Creating a Responsive Layout
5 . Creating the Responsive Layout
6 . Styling with Flexbox and Grid
7 . Adding Animations and Transitions
8 . Making It Mobile-Friendly
9 . Hosting on GitHub Pages or Netlify
10 . Optimization Tips
Conclusion
Your personal portfolio is more than a digital resume, it’s your identity, your online business card, and your personal brand. Whether you’re a developer, designer, writer, or student, having a clean, responsive, and professional portfolio helps you stand out in a crowded marketplace.
This comprehensive guide will walk you through creating a portfolio website using HTML and CSS. We’ll go from planning to responsive layout, styling with Flexbox/Grid, adding animations, making it mobile-friendly, and deploying it for free.
1 . Why Build a Personal Portfolio?
Your portfolio is the first impression you give to potential clients, employers, or collaborators. It tells your story, highlights your skills, and demonstrates your work ethic and passion.
Benefits of building your own portfolio:
- Showcases your personal brand
- Builds credibility and trust
- Demonstrates technical and design skills
- Improves your visibility on Google
- Acts as a resume that never sleeps
And by using HTML and CSS, you’ll gain more control, performance, and customization than website builders.
2 . Planning the Structure: Content Before Code
Before opening your text editor, it’s critical to plan your portfolio’s content and structure. Ask yourself:
- What are my primary goals?
- Who is my target audience?
- What kind of projects or skills do I want to highlight?
Here’s a suggested structure:
Homepage
- Welcome message
- Brief introduction
- Navigation links
About Page
- Biography
- Skills and tools
- Education and achievements
Projects Page
- Grid of portfolio items
- Screenshots and descriptions
- Links to GitHub or live demos
Contact Page
- Contact form
- Email and social links
- Optional: embedded map or calendar
Folder structure:
├── index.html
├── about.html
├── projects.html
├── contact.html
├── css/
│ └── style.css
└── assets/
├── images/
└── fonts/
Start with wireframes or sketches to map out the layout of each section.
3 . Writing Semantic HTML
Semantic HTML improves accessibility, SEO, and code readability. Use descriptive tags such as
<header>, <main>, <section>, and <footer>
to outline your site.
Sample Homepage Structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/styles.css">
<title>My Portfolio</title>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section class="hero">
<h1>Hi, I'm Alex</h1>
<p>A Web Developer crafting interactive digital experiences.</p>
<a href="projects.html">View My Work</a>
</section>
</main>
<footer>
<p>© 2025 Alex Smith</p>
</footer>
</body>
</html>
4 . Creating a Responsive Layout
Responsiveness ensures your site looks great on all devices.
Key Techniques:
- Use meta viewport tag for scaling:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- Use relative units like em, rem, %, vw, and vh
- Structure with Flexbox and Grid
- Add media queries to adapt layout
5 . Creating the Responsive Layout
A responsive layout adapts to various screen sizes using CSS techniques like fluid grids, media queries, and flexible units.
Use semantic HTML to create structure: Example: index.html
php-template
<main>
<section class="intro">
<h1>Hello, I'm Jane Doe</h1>
<p>Frontend Developer & Designer</p>
</section>
</main>
<footer>
<p>© 2025 Jane Doe</p>
</footer>
</body> </html>
6 . Styling with Flexbox and Grid
Flexbox and Grid are modern layout tools in CSS that make responsive design easier and cleaner.
Flexbox Example:
.container {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
Use Grid for complex layouts:
.projects {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1rem;
}
Grid automatically rearranges items based on screen size using auto-fit and minmax.
7 . Adding Animations and Transitions
Add a touch of interactivity and life using CSS transitions and keyframe animations.
Hover Effect:
.card:hover {
transform: scale(1.05);
transition: transform 0.3s ease-in-out;
}
Fade-in Animation:
@keyframes fadeIn {
0% { opacity: 0; transform: translateY(20px); }
100% { opacity: 1; transform: translateY(0); }
}
.section {
animation: fadeIn 1s ease-in-out;
}
Use animations sparingly to enhance UX, not distract.
8 . Making It Mobile-Friendly
Use these best practices for mobile responsiveness:
Set viewport meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Use relative units (%, rem, vw) instead of fixed pixels
Set max-width on images:
img {
max-width: 100%;
height: auto;
}
Use media queries for breakpoints:
@media (max-width: 768px) {
.nav ul {
flex-direction: column;
gap: 1rem;
}
.intro h1 {
font-size: 1.5rem;
}
}
Test your site on different devices using DevTools or tools like BrowserStack.
9 . Hosting on GitHub Pages or Netlify
Hosting your portfolio is easy and free.
Option 1: GitHub Pages
- Push your code to a GitHub repository
- Go to Settings > Pages
- Select branch: main, folder: root or /docs
- Your site will be available at https://username.github.io/portfolio
Option 2: Netlify
- Go to netlify.com, create an account
- Connect your GitHub repo
- Configure build settings (for static sites, no build is required)
- Netlify provides custom domains, HTTPS, and continuous deployment
10 . Optimization Tips
For faster load times and better SEO:
- Minify your CSS using tools like CSSNano
- Optimize images with TinyPNG or ImageOptim
Use lazy loading:
<img src="project.jpg" loading="lazy" alt="Project Screenshot">
- Add alt tags to all images for accessibility
- Preload fonts or host them locally
- Use semantic tags:
<section>, <article>, <nav>, <footer>
- Add a robots.txt and sitemap.xml
Bonus Tip: Use Lighthouse (in Chrome DevTools) to audit performance and accessibility.
Conclusion
Creating a personal portfolio website with just HTML and CSS not only strengthens your foundational skills but also gives you complete control over your digital presence. From thoughtful planning and modern layouts to subtle animations and real-time deployment, this guide gives you everything you need to launch a stunning and professional online portfolio in 2025.
Whether you’re applying for jobs, landing freelance gigs, or building your online identity, this project is an essential milestone in your web development journey.
Start building today, and make sure your work has the digital home it deserves.
Mark Haverbeke
Senior Frontend Engineer
Mark is a passionate software developer and author with expertise in JavaScript and Python. He enjoys simplifying complex programming concepts and sharing practical coding tips.
