Mini Project – Portfolio Page

Build Alex's complete portfolio homepage by combining semantic HTML, navigation, content sections, and proper structure into one cohesive page.

Time to put everything together. Alex has learned about semantic HTML, forms, images, links, and debugging. Now we'll build their complete portfolio homepage from scratch. A portfolio page shows who you are, what you do, and how people can reach you. Think of it like a digital business card that tells your story. Google, Apple, and thousands of developers use portfolio sites to showcase their work.

Project Overview

Alex's portfolio will have these sections: - A header with navigation - A hero section introducing Alex - An about section with their story - A projects showcase - A contact section - A proper footer Each piece uses semantic HTML elements. These are special tags that describe what content means, not just how it looks. Screen readers and search engines understand semantic tags better than generic div elements.

header - Site navigation and logo
main - Primary content container
section - Hero introduction
section - About Alex
section - Projects showcase
section - Contact information
footer - Copyright and social links

Building the Structure

Start with the basic HTML5 document structure. Alex needs proper meta tags for mobile devices and search engines.

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Character encoding for proper text display -->
    <meta charset="UTF-8">
    <!-- Responsive design for mobile devices -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- SEO description for search engines -->
    <meta name="description" content="Alex Johnson - Frontend Developer specializing in modern web applications">
    <!-- Page title shown in browser tabs -->
    <title>Alex Johnson - Frontend Developer</title>
</head>
<body>
    <!-- Content goes here -->
</body>
</html>

What just happened?

The browser loaded the HTML5 structure with proper meta tags. The viewport meta tag makes the site mobile-friendly, and the description helps search engines understand what Alex's site is about. Try this: View the page source in your browser to see all the meta information.

Adding the Header and Navigation

The header contains Alex's name and a navigation menu. Use the header and nav elements for proper semantic meaning.

<!-- Site header with logo and navigation -->
<header>
    <!-- Alex's name/logo -->
    <h1>Alex Johnson</h1>
    <!-- Main navigation menu -->
    <nav>
        <ul>
            <!-- Navigation links to page sections -->
            <li><a href="#about">About</a></li>
            <li><a href="#projects">Projects</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
    </nav>
</header>

Notice the hash (#) links in the navigation. These are called anchor links - they jump to sections on the same page instead of loading new pages. When someone clicks "About", the browser scrolls to the element with id="about".

Creating the Main Content Sections

Now add the main content inside a main element. Each section has an ID that matches the navigation links.

<!-- Primary page content -->
<main>
    <!-- Hero introduction section -->
    <section id="hero">
        <h2>Frontend Developer &amp; UI Enthusiast</h2>
        <p>I create beautiful, accessible web experiences that users love.</p>
    </section>

    <!-- About Alex section -->
    <section id="about">
        <h2>About Me</h2>
        <p>I'm passionate about clean code and user-centered design. With 3 years of experience in HTML, CSS, and JavaScript, I help businesses build websites that work perfectly on every device.</p>
    </section>
</main>

HTML Entity Alert

Notice & in the hero section? That's an HTML entity - a special code for the ampersand (&) symbol. Always use & instead of & in HTML content to avoid parsing errors.

Adding the Projects Showcase

Alex needs to show off their work. Create a projects section with placeholder content that demonstrates different project types.

<!-- Projects showcase section -->
<section id="projects">
    <h2>Featured Projects</h2>
    
    <!-- First project -->
    <article>
        <h3>E-commerce Dashboard</h3>
        <p>A responsive admin panel built with HTML5 and modern CSS. Features real-time data visualization and mobile-first design.</p>
        <!-- Placeholder for project image -->
        <div style="background:#e2e8f0;padding:20px;text-align:center;color:#64748b;border-radius:4px;">[Project Screenshot]</div>
    </article>

    <!-- Second project -->
    <article>
        <h3>Restaurant Website</h3>
        <p>Clean, accessible website for a local restaurant. Includes online menu, contact forms, and location maps.</p>
        <div style="background:#e2e8f0;padding:20px;text-align:center;color:#64748b;border-radius:4px;">[Project Screenshot]</div>
    </article>
</section>

The article element is perfect for project showcases. It represents complete, standalone content that makes sense on its own. Search engines understand that each article is a separate piece of information about Alex's work.

Contact Section and Footer

Finish with a contact section and footer. The contact area helps visitors reach Alex, while the footer provides additional information and social links.

<!-- Contact information section -->
<section id="contact">
    <h2>Get In Touch</h2>
    <p>Ready to work together? I'd love to hear about your project.</p>
    
    <!-- Contact details list -->
    <ul>
        <li>Email: <a href="mailto:alex@example.com">alex@example.com</a></li>
        <li>Phone: <a href="tel:+1234567890">(123) 456-7890</a></li>
        <li>LinkedIn: <a href="#">/in/alexjohnson</a></li>
    </ul>
</section>

<!-- Site footer -->
<footer>
    <p>&copy; 2024 Alex Johnson. All rights reserved.</p>
    <p>Built with semantic HTML5</p>
</footer>

Special link types: mailto: opens the user's email client, tel: triggers phone dialing on mobile devices. These make it super easy for visitors to contact Alex with one click.

The Complete Portfolio

Here's Alex's finished portfolio page with all sections combined:

<!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="Alex Johnson - Frontend Developer">
    <title>Alex Johnson - Frontend Developer</title>
</head>
<body>
    <header>
        <h1>Alex Johnson</h1>
        <nav>
            <ul>
                <li><a href="#about">About</a></li>
                <li><a href="#projects">Projects</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section id="hero">
            <h2>Frontend Developer &amp; UI Enthusiast</h2>
            <p>I create beautiful, accessible web experiences.</p>
        </section>

        <section id="about">
            <h2>About Me</h2>
            <p>Passionate about clean code and user-centered design.</p>
        </section>

        <section id="projects">
            <h2>Featured Projects</h2>
            <article>
                <h3>E-commerce Dashboard</h3>
                <p>Responsive admin panel with data visualization.</p>
            </article>
        </section>

        <section id="contact">
            <h2>Get In Touch</h2>
            <p>Email: <a href="mailto:alex@example.com">alex@example.com</a></p>
        </section>
    </main>

    <footer>
        <p>&copy; 2024 Alex Johnson</p>
    </footer>
</body>
</html>

What just happened?

Alex now has a complete, semantic HTML portfolio page with proper document structure, navigation, content sections, and contact information. The page uses meaningful HTML5 elements that search engines and screen readers understand perfectly. Try this: Click the navigation links to see how they would jump to different sections on a real website.

Perfect! Alex's portfolio demonstrates everything we've learned: semantic HTML structure, proper meta tags, navigation with anchor links, content sections using appropriate elements, and contact links with special protocols. This foundation is ready for CSS styling and JavaScript interactivity. The portfolio follows web accessibility guidelines by using semantic elements and proper heading hierarchy. Screen readers can navigate through the content easily, and search engines understand the page structure for better SEO rankings.

Quiz

Up Next: Mini Project – Landing Page

Build a complete business landing page with hero sections, feature highlights, testimonials, and call-to-action buttons using advanced HTML structure.

← Previous Course Index Next →