Build Your First Website

Tutorial Overview

In this tutorial, you’ll build a complete personal portfolio website using HTML and CSS. By the end, you’ll have a live website you can share with others.

What You’ll Build

A homepage with your introduction
An about page
A projects showcase
A contact section

Prerequisites

Basic understanding of HTML
Text editor (VS Code recommended)
Web browser

Step 1: Set Up Your Project

Create a new folder called my-portfolio and create these files:

index.html
about.html
styles.css

Step 2: Create the Homepage

Open index.html and add:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Portfolio</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <nav>
            <a href="index.html">Home</a>
            <a href="about.html">About</a>
        </nav>
    </header>
    
    <main>
        <section class="hero">
            <h1>Welcome to My Portfolio</h1>
            <p>I'm a web developer passionate about creating beautiful websites.</p>
        </section>
    </main>
    
    <footer>
        <p>&copy; 2025 My Portfolio</p>
    </footer>
</body>
</html>

Step 3: Add Styling

Create styles.css:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
}

header {
    background: #333;
    color: white;
    padding: 1rem;
}

nav a {
    color: white;
    margin-right: 1rem;
    text-decoration: none;
}

.hero {
    text-align: center;
    padding: 4rem 2rem;
    background: #f4f4f4;
}

footer {
    background: #333;
    color: white;
    text-align: center;
    padding: 1rem;
    margin-top: 2rem;
}

Step 4: Test Your Website

Open index.html in your web browser to see your website!

Next Steps

Add more pages
Include images
Make it responsive
Deploy to GitHub Pages

Congratulations! You’ve built your first website!