Skip to main content
HTML for Beginners
CHAPTER 24 Beginner

HTML Project: Build a Portfolio Website

Updated: May 10, 2026
5 min read

# HTML Project: Build a Portfolio Website

1. Introduction

It's time to build a real-world project! A portfolio website is a must-have for any aspiring developer or designer. We will build the structural skeleton for a one-page portfolio.

2. Project Requirements

You must use Semantic HTML tags, provide accessible alt text for images, and use proper heading hierarchies (<h1> through <h3>).

3. The HTML Blueprint

html
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100 
<!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="Portfolio of Jane Doe, Frontend Developer">
    <title>Jane Doe | Portfolio</title>
</head>
<body>

    <!-- 1. HEADER & NAVIGATION -->
    <header>
        <nav>
            <div class="logo">Jane.Dev</div>
            <ul>
                <li><a href="#about">About</a></li>
                <li><a href="#skills">Skills</a></li>
                <li><a href="#projects">Projects</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </header>

    <!-- MAIN CONTENT AREA -->
    <main>
        
        <!-- 2. HERO SECTION -->
        <section id="hero">
            <h1>Hi, I&#039;m Jane Doe.</h1>
            <h2>I build things for the web.</h2>
            <p>I am a software engineer specializing in building exceptional digital experiences.</p>
            <a href="#contact" class="btn">Get In Touch</a>
        </section>

        <!-- 3. ABOUT SECTION -->
        <section id="about">
            <h2>About Me</h2>
            <img src="profile.jpg" alt="Jane Doe smiling at a coffee shop">
            <p>Hello! My name is Jane and I enjoy creating things that live on the internet...</p>
        </section>

        <!-- 4. SKILLS SECTION -->
        <section id="skills">
            <h2>Technical Skills</h2>
            <ul>
                <li>HTML5</li>
                <li>CSS3 & Sass</li>
                <li>JavaScript (ES6+)</li>
                <li>React.js</li>
            </ul>
        </section>

        <!-- 5. PROJECTS SECTION -->
        <section id="projects">
            <h2>Some Things I&#039;ve Built</h2>
            
            <article class="project-card">
                <h3>Weather App</h3>
                <img src="weather-preview.jpg" alt="Screenshot of the Weather App">
                <p>A web app that displays live weather data using the OpenWeather API.</p>
                <a href="#" target="_blank">View Live</a>
            </article>

            <article class="project-card">
                <h3>E-Commerce Store</h3>
                <img src="store-preview.jpg" alt="Screenshot of the E-Commerce Store">
                <p>A fully functional shopping cart built with React and Stripe.</p>
                <a href="#" target="_blank">View Live</a>
            </article>
        </section>

        <!-- 6. CONTACT SECTION -->
        <section id="contact">
            <h2>Get In Touch</h2>
            <p>My inbox is always open. Whether you have a question or just want to say hi!</p>
            <form action="/submit" method="POST">
                <label for="name">Name:</label>
                <input type="text" id="name" name="name" required>
                
                <label for="email">Email:</label>
                <input type="email" id="email" name="email" required>
                
                <label for="message">Message:</label>
                <textarea id="message" name="message" rows="5" required></textarea>
                
                <button type="submit">Say Hello</button>
            </form>
        </section>

    </main>

    <!-- 7. FOOTER -->
    <footer>
        <p>© 2024 Jane Doe. Built from scratch.</p>
        <a href="https://github.com" target="_blank" rel="noopener">GitHub</a>
        <a href="https://linkedin.com" target="_blank" rel="noopener">LinkedIn</a>
    </footer>

</body>
</html>

4. Summary

You just built a production-ready HTML skeleton! It uses <nav>, <section>, <article>, and forms properly. To turn this into a beautiful website, all you have to do is apply CSS (as learned in the CSS course!).

Finish this Chapter

Save your progress on your learning path and prepare for coding interview challenges.

Previous Chapter HTML Best Practices and Clean Structure
Next Chapter HTML Project: Build a Blog Website

Discussion

Join the discussion

Log in or create a free account to participate.

Sort: ·

Explore More

📖 Related Tutorials 6

❓ Related Quizzes 6

🎥 Related Videos 1