Let’s begin with Lecture 50 of the HTML5 & CSS3 series. Final Project β Build Your Personal Portfolio Website. This lecture is for absolute beginners; even kids can follow along and understand.
π― Objective:
By the end of this lecture, you will:
- Build a complete personal portfolio website using everything you’ve learned
- Combine HTML5 , CSS3 , and JavaScript
- Use semantic tags , Flexbox/Grid , media queries , and interactivity
- Style your site with custom colors, fonts, and animations
- Add dark mode toggle , form validation , and smooth scrolling
- Have a real working website to showcase your coding skills!
π§± What Youβll Build Today
You’ll build a personal portfolio website that includes:
SECTION | DESCRIPTION |
---|---|
Header & Navigation | Logo, links, mobile menu |
About Me | Short intro + image |
Skills | Visual skill tags or progress bars |
Projects | Showcase your HTML/CSS/JS work |
Contact Form | Styled and validated form |
Footer | Copyright info and theme toggle |
Think of it like this:
This is your final test β not on paper, but in code.
You’re building something real, useful, and beautiful β just like a pro!
π» Try This: Build Your Full Portfolio Website
Letβs create a new HTML file called portfolio-site.html
that combines all your knowledge into one stunning page.
Step 1: Create a New File
In your VS Code project folder (MyFirstWebsite
), create a new file named:
portfolio-site.html
Step 2: Add This Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Alex's Portfolio</title>
<!-- Google Fonts (Optional) -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<style>
:root {
--primary-color: #3498db;
--secondary-color: #2ecc71;
--text-color: #333;
--bg-color: #f9f9f9;
--card-bg: white;
--spacing-sm: 10px;
--spacing-md: 20px;
--spacing-lg: 40px;
}
body {
margin: 0;
font-family: 'Roboto', sans-serif;
background-color: var(--bg-color);
color: var(--text-color);
line-height: 1.6;
transition: background-color 0.3s ease;
}
header {
background-color: var(--primary-color);
color: white;
padding: var(--spacing-lg);
text-align: center;
}
nav {
display: flex;
justify-content: center;
gap: var(--spacing-md);
background-color: #2c3e50;
padding: var(--spacing-sm);
}
nav a {
color: white;
text-decoration: none;
font-weight: bold;
}
nav a:hover {
text-decoration: underline;
}
main {
max-width: 1100px;
margin: auto;
padding: var(--spacing-lg);
}
section {
scroll-margin-top: 80px; /* Smooth scroll offset */
}
.about {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-lg);
align-items: center;
justify-content: center;
}
.about img {
width: 150px;
height: 150px;
object-fit: cover;
border-radius: 50%;
}
.skills {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-sm);
}
.skill-tag {
background-color: var(--card-bg);
padding: 8px 15px;
border-radius: 20px;
border: 1px solid #ddd;
transition: background-color 0.3s ease;
}
.skill-tag:hover {
background-color: var(--primary-color);
color: white;
}
.projects {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: var(--spacing-md);
}
.project-card {
background-color: var(--card-bg);
padding: var(--spacing-md);
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
transition: transform 0.3s ease;
}
.project-card:hover {
transform: scale(1.03);
}
footer {
background-color: #2c3e50;
color: white;
text-align: center;
padding: var(--spacing-md);
}
button.theme-toggle {
background-color: var(--secondary-color);
color: white;
border: none;
padding: 10px 15px;
border-radius: 5px;
cursor: pointer;
margin-top: 10px;
}
/* Dark Mode Styles */
.dark-mode {
background-color: #1e1e1e;
color: #eee;
}
.dark-mode header,
.dark-mode .project-card,
.dark-mode .skill-tag,
.dark-mode footer {
background-color: #2d2d2d;
color: #eee;
}
@media (max-width: 768px) {
.about {
flex-direction: column;
text-align: center;
}
nav {
flex-direction: column;
align-items: center;
}
}
</style>
</head>
<body>
<!-- Header -->
<header>
<h1>Alex Johnson</h1>
<p>Web Developer & Learner</p>
</header>
<!-- Navigation -->
<nav>
<a href="#about">About Me</a>
<a href="#skills">Skills</a>
<a href="#projects">Projects</a>
<a href="#contact">Contact</a>
</nav>
<!-- Main Content -->
<main>
<!-- About Me -->
<section id="about">
<div class="about">
<img src=" https://picsum.photos/id/1027/150/150 " alt="Alex Johnson">
<div>
<h2>About Me</h2>
<p>Hello! I'm Alex, a young web developer learning HTML, CSS, and JavaScript.</p>
<p>I enjoy coding, playing games, and reading about space exploration!</p>
</div>
</div>
</section>
<!-- Skills -->
<section id="skills" style="margin-top: 40px;">
<h2>Skills</h2>
<div class="skills">
<div class="skill-tag">HTML</div>
<div class="skill-tag">CSS</div>
<div class="skill-tag">JavaScript</div>
<div class="skill-tag">Problem Solving</div>
<div class="skill-tag">Creativity</div>
</div>
</section>
<!-- Projects -->
<section id="projects" style="margin-top: 40px;">
<h2>My Projects</h2>
<div class="projects">
<div class="project-card">
<h3>Project 1</h3>
<p>My first HTML page with styled buttons and cards</p>
</div>
<div class="project-card">
<h3>Project 2</h3>
<p>Interactive To-Do List App using JavaScript</p>
</div>
<div class="project-card">
<h3>Project 3</h3>
<p>Canvas Drawing App with animation and interactivity</p>
</div>
</div>
</section>
<!-- Contact -->
<section id="contact" style="margin-top: 40px;">
<h2>Contact Me</h2>
<form id="contactForm" onsubmit="validateForm(event)">
<label for="name">Your Name</label>
<input type="text" id="name" name="name" required minlength="2" placeholder="Enter your full name">
<label for="email">Email Address</label>
<input type="email" id="email" name="email" required placeholder="you@example.com">
<label for="message">Your Message</label>
<textarea id="message" name="message" rows="5" required minlength="10"></textarea>
<button type="submit">Send Message</button>
</form>
<div id="formResult" style="margin-top: 20px; display: none;"></div>
</section>
</main>
<!-- Footer -->
<footer>
<p>© 2025 MyPortfolio. All rights reserved.</p>
<button class="theme-toggle" onclick="toggleDarkMode()">Toggle Dark Mode</button>
</footer>
<script>
// Toggle Dark Mode
function toggleDarkMode() {
document.body.classList.toggle("dark-mode");
}
// Simple Form Validation
function validateForm(event) {
event.preventDefault();
let name = document.getElementById("name").value.trim();
let email = document.getElementById("email").value.trim();
let message = document.getElementById("message").value.trim();
let resultDiv = document.getElementById("formResult");
if (!name || !email || !message) {
resultDiv.style.display = "block";
resultDiv.innerHTML = "β Please fill in all fields.";
resultDiv.style.color = "#721c24";
resultDiv.style.background = "#f8d7da";
resultDiv.style.border = "1px solid #f5c6cb";
return false;
}
resultDiv.style.display = "block";
resultDiv.innerHTML = `β
Thank you, ${name}!`;
resultDiv.style.color = "#155724";
resultDiv.style.background = "#d4edda";
resultDiv.style.border = "1px solid #c3e6cb";
document.getElementById("contactForm").reset();
return false;
}
// Smooth Scroll for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
e.preventDefault();
const targetId = this.getAttribute('href');
const targetElement = document.querySelector(targetId);
window.scrollTo({
top: targetElement.offsetTop - 60,
behavior: 'smooth'
});
});
});
</script>
</body>
</html>
Step 3: Run with Live Server
Right-click the code β Show All Commands β Launch Live Server
π Youβve built your final project: a complete personal portfolio website that looks professional, works responsively, and uses:
- Semantic HTML structure
- Flexbox for layout and alignment
- Grid for project cards
- Responsive design with media queries
- JavaScript for dark mode and form validation
- Smooth scrolling between sections

π‘ Bonus: Save Theme Preference with localStorage
Update your toggleDarkMode()
function to remember user choice:
function toggleDarkMode() {
document.body.classList.toggle("dark-mode");
if (document.body.classList.contains("dark-mode")) {
localStorage.setItem("theme", "dark");
} else {
localStorage.removeItem("theme");
}
}
// On load
window.onload = function () {
if (localStorage.getItem("theme") === "dark") {
document.body.classList.add("dark-mode");
}
}
Now users wonβt lose their theme when they refresh!
π‘ Bonus: Add a Mobile Menu Toggle
Add this before your <nav>
:
<button id="menuToggle" style="display: none; margin: 10px auto; background-color: var(--primary-color); color: white; border: none; padding: 10px 15px; border-radius: 5px;">β° Menu</button>
Add this JavaScript:
document.getElementById("menuToggle").addEventListener("click", function () {
let nav = document.querySelector("nav");
nav.style.display = nav.style.display === "none" ? "flex" : "none";
});
And this CSS:
@media (max-width: 768px) {
nav {
display: none;
flex-direction: column;
align-items: center;
}
#menuToggle {
display: block;
}
}
Now users can open/close the menu on phones β perfect for touch navigation!
π§ͺ Try It Yourself!
- Replace the image with your own avatar or photo
- Add a “Skills Progress Bar” using
<progress>
or styled divs - Make your projects look like cards with images inside
- Add social media links at the bottom using icons from Font Awesome
- Link each project card to its own page or GitHub repo
β Summary of What You Built Today
CONCEPT | DESCRIPTION |
---|---|
Semantic HTML | Used<header> ,<main> ,<section> ,<footer> |
Responsive Design | Used media queries for mobile view |
CSS Grid | For responsive project cards |
Flexbox | For navbar, about section, and layout |
Dark Mode | Toggled with JavaScript and remembered with localStorage |
Form Validation | Checked inputs and gave feedback without backend |
Smooth Scrolling | Made anchor links scroll smoothly |
Reusable Template | You can now use this layout for any future site |
π Congratulations β You Did It!
You’ve completed all 50 lectures of our HTML5 & CSS3 series β and even added JavaScript interactivity!
π¬ Final Words for You:
βAnyone can learn to code. But not everyone finishes what they start. You did.β
You are now ready to:
- Build your own websites
- Customize templates
- Start learning more advanced topics like JavaScript frameworks
- Apply for beginner web dev roles or freelance gigs
- Share your portfolio online and show off your work
All 50 Lectures
HTML5 and CSS3 Compleate Series