Build Your First Website

Introduction

This tutorial walks you through building a complete, responsive single-page website from three empty files. You will write real HTML, real CSS, and real JavaScript — no shortcuts, no drag-and-drop builders, no magic. By the end you will have something you can actually show people.

What You Will Build

A single-page portfolio website with:

Responsive sticky navigation
Hero section with a call-to-action button
About section
Project showcase grid
Contact form with submission handling
Mobile-friendly layout

Prerequisites

A computer running macOS, Linux, or Windows
A text editor — VS Code is recommended
A web browser — Chrome or Firefox work well
Basic computer skills (creating folders, saving files)

No prior coding experience required.

Steps

Set Up Your Project
Section titled “Set Up Your Project”
Create a project folder and three starter files.
CLI (macOS / Linux):
Terminal window
```
mkdir my-portfolio
cd my-portfolio
touch index.html styles.css script.js
```
CLI (Windows PowerShell):
Terminal window
```
New-Item -ItemType Directory -Path "my-portfolio"
Set-Location "my-portfolio"
New-Item index.html, styles.css, script.js -ItemType File
```
Your folder structure should look like this:
- Directorymy-portfolio/
  - index.html
  - styles.css
  - script.js
Open the folder in VS Code right away with code . so all three files are visible in the file tree before you start writing.

Create the HTML Structure

Open index.html and 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>My Portfolio</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

    <header>
        <nav>
            <h1>Your Name</h1>
            <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>Welcome to My Portfolio</h2>
            <p>I create amazing websites</p>
            <a href="#contact" class="button">Get in Touch</a>
        </section>

        <section id="about">
            <h2>About Me</h2>
            <p>Your bio goes here...</p>
        </section>

        <section id="projects">
            <h2>My Projects</h2>
            <div class="project-grid">
                <div class="project-card">
                    <h3>Project 1</h3>
                    <p>Description of project 1</p>
                </div>
                <div class="project-card">
                    <h3>Project 2</h3>
                    <p>Description of project 2</p>
                </div>
            </div>
        </section>

        <section id="contact">
            <h2>Contact Me</h2>
            <form id="contact-form">
                <input type="text" id="name" name="name"
                    placeholder="Your Name" required>
                <input type="email" id="email" name="email"
                    placeholder="Your Email" required>
                <textarea id="message" name="message"
                    placeholder="Your Message" required></textarea>
                <button type="submit">Send Message</button>
            </form>
        </section>

    </main>

    <footer>
        <p>&copy; 2025 Your Name. All rights reserved.</p>
    </footer>

    <script src="script.js" defer></script>
</body>
</html>

This creates the full page structure — navigation, hero, projects, contact form, and footer — all in one file.

Add CSS Styling

Open styles.css and add:

/* =============================================
   RESET & BASE
   ============================================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

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

/* =============================================
   NAVIGATION
   ============================================= */
header {
    background: #2c3e50;
    color: white;
    padding: 1rem 0;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
}

nav {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 2rem;
}

nav ul {
    display: flex;
    list-style: none;
    gap: 2rem;
}

nav a {
    color: white;
    text-decoration: none;
    transition: color 0.3s;
}

nav a:hover {
    color: #3498db;
}

/* =============================================
   LAYOUT
   ============================================= */
main {
    margin-top: 60px;
}

section {
    padding: 4rem 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

/* =============================================
   HERO
   ============================================= */
#hero {
    text-align: center;
    padding: 6rem 2rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    max-width: 100%;
}

#hero h2 {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.button {
    display: inline-block;
    padding: 1rem 2rem;
    background: white;
    color: #667eea;
    text-decoration: none;
    border-radius: 50px;
    margin-top: 2rem;
    font-weight: bold;
    transition: transform 0.3s;
}

.button:hover {
    transform: translateY(-3px);
}

/* =============================================
   PROJECTS
   ============================================= */
.project-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.project-card {
    padding: 2rem;
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    transition: transform 0.3s, box-shadow 0.3s;
}

.project-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

/* =============================================
   CONTACT FORM
   ============================================= */
form {
    max-width: 600px;
    margin: 2rem auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

input, textarea {
    padding: 1rem;
    border: 2px solid #e0e0e0;
    border-radius: 5px;
    font-family: inherit;
    font-size: 1rem;
}

input:focus, textarea:focus {
    outline: none;
    border-color: #3498db;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.15);
}

textarea {
    min-height: 150px;
    resize: vertical;
}

button {
    padding: 1rem 2rem;
    background: #3498db;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
    transition: background 0.3s;
}

button:hover {
    background: #2980b9;
}

/* =============================================
   FOOTER
   ============================================= */
footer {
    background: #2c3e50;
    color: white;
    text-align: center;
    padding: 2rem;
}

/* =============================================
   RESPONSIVE — 768px and below
   ============================================= */
@media (max-width: 768px) {
    nav {
        flex-direction: column;
        gap: 1rem;
    }

    #hero h2 {
        font-size: 2rem;
    }

    .project-grid {
        grid-template-columns: 1fr;
    }
}

Add JavaScript Interactivity

Open script.js and add:

/* =============================================
   SMOOTH SCROLL — ANCHOR LINKS
   ============================================= */
document.querySelectorAll('a[href^="#"]').forEach(function(anchor) {
    anchor.addEventListener('click', function(e) {
        e.preventDefault();
        const target = document.querySelector(this.getAttribute('href'));
        if (target) {
            target.scrollIntoView({ behavior: 'smooth' });
        }
    });
});

/* =============================================
   CONTACT FORM — SUBMISSION HANDLER
   ============================================= */
document.querySelector('#contact-form').addEventListener('submit', function(e) {
    e.preventDefault();
    alert('Thank you for your message! (This is a demo)');
    this.reset();
});

/* =============================================
   NAVIGATION — SCROLL SHADOW
   ============================================= */
window.addEventListener('scroll', function() {
    const header = document.querySelector('header');
    if (window.scrollY > 50) {
        header.style.boxShadow = '0 2px 10px rgba(0,0,0,0.1)';
    } else {
        header.style.boxShadow = 'none';
    }
});

This adds three behaviors: smooth scrolling for nav links, a form submission acknowledgment, and a drop shadow on the nav bar when scrolling.

Test Your Site
Section titled “Test Your Site”
Open index.html in your browser — double-click it in Finder or File Explorer, or run open index.html from the CLI.
Work through this checklist before calling it done:
- All navigation links scroll smoothly to the correct section
- The contact form shows an alert on submission and clears itself
- Scrolling down adds a shadow under the nav bar
- Resizing the browser to a narrow width stacks the nav vertically
If something looks wrong, press F12 to open browser DevTools and check the Console tab for error messages. The message usually tells you exactly which file and line number to look at.

What You Learned

HTML document structure with semantic elements
CSS layout using Flexbox and Grid
Responsive design with media queries
Basic JavaScript DOM manipulation and event handling
Form handling with preventDefault()

Next Steps

Ready to go deeper? The intermediate tutorial covers the same foundations with more detail on the reasoning behind each decision, plus CSS custom properties, semantic HTML, inline form validation, and accessibility basics.

Intermediate Tutorial — Build Your First Single-Page Website A step-by-step walkthrough explaining the why behind every HTML, CSS, and JavaScript decision

Deploy Your Website Host your site for free on Cloudflare Pages, Netlify, or GitHub Pages