HTML Final Project

Build Alex's complete portfolio website using every HTML skill you've learned throughout this course.

Time to put everything together. You've learned HTML tags, forms, semantic elements, accessibility features, and responsive design. Now Alex needs you to build their complete portfolio website from scratch. This project combines every concept from our 39 lessons. You'll create a professional website that showcases Alex's work, tells their story, and provides multiple ways for visitors to connect.

Project Overview

Alex's portfolio needs four main pages that work together as one cohesive website. Each page serves a specific purpose and uses different HTML techniques you've mastered. The website structure follows semantic HTML principles. Every page includes proper meta tags for SEO, accessibility features for screen readers, and clean markup that loads fast on any device.

Home Page (index.html)

Projects Gallery (projects.html)

Contact Form (contact.html)

Blog Posts (blog.html)

Building the Home Page

The home page introduces Alex to visitors. Start with a complete HTML document that includes all the meta tags, semantic structure, and accessibility features. Every portfolio needs a hero section that grabs attention immediately. Alex's hero includes their name, what they do, and a brief personality statement that makes them memorable.

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Essential meta tags for modern browsers -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Alex Morgan - Full Stack Developer specializing in modern web applications">
    <title>Alex Morgan - Developer Portfolio</title>
</head>
<body>
    <!-- Main navigation for the entire site -->
    <nav>
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="projects.html">Projects</a></li>
            <li><a href="contact.html">Contact</a></li>
            <li><a href="blog.html">Blog</a></li>
        </ul>
    </nav>

    <!-- Hero section introduces Alex -->
    <header>
        <h1>Hi, I'm Alex Morgan</h1>
        <p>I build web applications that solve real problems. Coffee enthusiast, dog lover, and believer that great code should be as readable as a good book.</p>
        <a href="contact.html">Get In Touch</a>
    </header>

    <!-- Main content about Alex's skills -->
    <main>
        <section>
            <h2>What I Do</h2>
            <p>I specialize in creating responsive websites and web applications. From front-end interfaces to back-end APIs, I enjoy the entire development process.</p>
        </section>

        <section>
            <h2>Recent Work</h2>
            <p>Check out my <a href="projects.html">latest projects</a> including e-commerce platforms, mobile apps, and open source contributions.</p>
        </section>
    </main>

    <!-- Site footer with social links -->
    <footer>
        <p>&copy; 2024 Alex Morgan. Built with semantic HTML.</p>
    </footer>
</body>
</html>

What just happened?

The browser rendered Alex's home page with semantic HTML structure. Notice how the navigation creates clear site structure, the header introduces Alex personally, and the main content sections organize information logically. Try this: add a section about Alex's technical skills between the existing sections.

Creating the Projects Gallery

The projects page showcases Alex's best work using definition lists and semantic markup. Each project includes a title, description, technologies used, and links to view the live site or code repository. Definition lists work perfectly for project details. The dt tag holds project names, while dd contains descriptions and technical details.

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Same meta setup as home page -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Alex Morgan's web development projects and portfolio gallery">
    <title>Projects - Alex Morgan</title>
</head>
<body>
    <!-- Consistent navigation across all pages -->
    <nav>
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="projects.html" aria-current="page">Projects</a></li>
            <li><a href="contact.html">Contact</a></li>
            <li><a href="blog.html">Blog</a></li>
        </ul>
    </nav>

    <main>
        <!-- Page header explains the projects -->
        <header>
            <h1>My Projects</h1>
            <p>A collection of websites, applications, and experiments I've built while learning and growing as a developer.</p>
        </header>

        <!-- Definition list perfect for project details -->
        <dl>
            <dt>E-Commerce Dashboard</dt>
            <dd>
                <p>A responsive admin interface for managing online store inventory, orders, and customer data.</p>
                <p><strong>Technologies:</strong> HTML5, CSS Grid, JavaScript, REST APIs</p>
                <p><a href="#">View Project</a> | <a href="#">Source Code</a></p>
            </dd>

            <dt>Weather App</dt>
            <dd>
                <p>Clean weather interface that displays current conditions and 5-day forecasts for any city worldwide.</p>
                <p><strong>Technologies:</strong> HTML5, Flexbox, Weather API, Local Storage</p>
                <p><a href="#">View Project</a> | <a href="#">Source Code</a></p>
            </dd>

            <dt>Recipe Collection</dt>
            <dd>
                <p>Personal recipe organizer with search, categories, and meal planning features.</p>
                <p><strong>Technologies:</strong> Semantic HTML, CSS Variables, Form Validation</p>
                <p><a href="#">View Project</a> | <a href="#">Source Code</a></p>
            </dd>
        </dl>
    </main>

    <footer>
        <p><a href="contact.html">Want to work together?</a></p>
    </footer>
</body>
</html>

What just happened?

The definition list creates a clean project gallery where each project name pairs with detailed descriptions. The aria-current="page" attribute tells screen readers which page is active. Try this: add another project with different technologies to see how the pattern scales.

Building the Contact Form

The contact page needs a comprehensive form that captures different types of inquiries. Use fieldsets to group related form controls, proper input types for better mobile experience, and validation attributes to guide users. Remember that real forms need server-side processing. For now, the form demonstrates proper HTML structure and accessibility features that work with any backend system.

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Contact page meta information -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Contact Alex Morgan for web development projects and collaborations">
    <title>Contact - Alex Morgan</title>
</head>
<body>
    <nav>
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="projects.html">Projects</a></li>
            <li><a href="contact.html" aria-current="page">Contact</a></li>
            <li><a href="blog.html">Blog</a></li>
        </ul>
    </nav>

    <main>
        <header>
            <h1>Let's Work Together</h1>
            <p>Have a project idea? Need help with your website? I'd love to hear from you.</p>
        </header>

        <!-- Comprehensive contact form with validation -->
        <form action="#" method="post">
            <fieldset>
                <legend>Contact Information</legend>
                
                <label for="name">Full Name *</label>
                <input type="text" id="name" name="name" required>
                
                <label for="email">Email Address *</label>
                <input type="email" id="email" name="email" required>
                
                <label for="company">Company (Optional)</label>
                <input type="text" id="company" name="company">
            </fieldset>

            <fieldset>
                <legend>Project Details</legend>
                
                <label for="project-type">What type of project?</label>
                <select id="project-type" name="project-type" required>
                    <option value="">Please choose...</option>
                    <option value="website">New Website</option>
                    <option value="redesign">Website Redesign</option>
                    <option value="webapp">Web Application</option>
                    <option value="other">Something Else</option>
                </select>
                
                <label for="budget">Estimated Budget</label>
                <select id="budget" name="budget">
                    <option value="">Prefer not to say</option>
                    <option value="small">Under $5,000</option>
                    <option value="medium">$5,000 - $15,000</option>
                    <option value="large">Over $15,000</option>
                </select>
                
                <label for="message">Tell me about your project *</label>
                <textarea id="message" name="message" rows="6" placeholder="Describe your goals, timeline, and any specific requirements..." required></textarea>
            </fieldset>

            <button type="submit">Send Message</button>
        </form>
    </main>
</body>
</html>

Adding the Blog Page

The blog showcases Alex's expertise through articles about web development. Use the article element for each post, time elements for publication dates, and proper heading hierarchy for accessibility. Blog posts demonstrate Alex's knowledge while providing value to other developers. Each article includes metadata that helps search engines understand the content structure.

Pro tip: Use the <time datetime="2024-01-15"> attribute so machines can parse dates correctly. Search engines and screen readers love this semantic information.

Project Requirements Checklist

Your final project should demonstrate mastery of every HTML concept we've covered. Use this checklist to ensure Alex's portfolio meets professional standards.

Document Structure

Valid HTML5 DOCTYPE
Proper lang attribute
Complete head section
Semantic body structure

SEO & Meta Tags

Unique page titles
Meta descriptions
Viewport meta tag
Character encoding

Accessibility Features

Alt text for images
Form labels properly linked
ARIA current page indicators
Logical heading hierarchy

Form Implementation

Multiple input types
Required field validation
Fieldset organization
Meaningful placeholder text

Common Final Project Mistakes

Don't skip the meta descriptions — each page needs a unique description under 160 characters. Don't forget to validate your HTML using the W3C validator. And don't use placeholder text as a replacement for proper labels.

The complete portfolio demonstrates everything you've learned about HTML. From basic tags to complex forms, semantic structure to accessibility features, Alex's website showcases professional web development skills. Each page works independently but connects as part of a larger user experience. The navigation remains consistent, the content stays focused, and the markup follows web standards throughout. Your HTML foundation is now solid enough to support any design or functionality you want to add. Whether you continue with CSS styling, JavaScript interactivity, or backend integration, semantic HTML provides the reliable structure every great website needs.

Quiz

HTML Course Wrap-Up

Celebrate your HTML mastery and discover what's next in your web development journey.

← Previous Course Index Next →