Build Your Personal Portfolio Website

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.

Table of Contents

🎯 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>&copy; 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

Build Your Personal Portfolio Website — A kid typing into a computer screen and proudly showing off their personal portfolio website labeled MySite

💡 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

Build Your Personal Portfolio Website | Lecture 50

🎯 Objective:

🧱 What You’ll Build Today

💻 Try This: Build Your Full Portfolio Website

Step 1: Create a New File

Step 2: Add This Code

Step 3: Run with Live Server

💡 Bonus: Save Theme Preference with localStorage

💡 Bonus: Add a Mobile Menu Toggle

Add this JavaScript:

🧪 Try It Yourself!

✅ Summary of What You Built Today

🏁 Congratulations – You Did It!

💬 Final Words for You:

All 50 Lectures

Najeeb Alam

Build Your Personal Portfolio Website | Lecture 50

🎯 Objective:

🧱 What You’ll Build Today

💻 Try This: Build Your Full Portfolio Website

Step 1: Create a New File

Step 2: Add This Code

Step 3: Run with Live Server

💡 Bonus: Save Theme Preference with localStorage

💡 Bonus: Add a Mobile Menu Toggle

Add this JavaScript:

🧪 Try It Yourself!

✅ Summary of What You Built Today

🏁 Congratulations – You Did It!

💬 Final Words for You:

All 50 Lectures

Najeeb Alam

Related Posts

Advanced Analytics with Window Functions

Lecture 49: Organizing Complex Queries with CTEsv

Lecture 48: Working with Dates and Times