Your First Full Website Project

After this lesson, you will be able to: Combine HTML, CSS, and JavaScript into a complete, original multi-page website that you have built end to end.

This lesson is your first real project. You'll plan, build, and ship a multi-page website using everything from the past four lessons. It will be small but complete, and it's the project you can show people when they ask what you've built.

Prerequisites:JavaScript and the DOM

Project pitch, pick something small but real

Good first projects share three traits: you can finish them in a weekend, they have at least two pages, and they include some interactive behavior. Examples: a personal portfolio site (home, projects, contact), a fan page for a hobby, a recipe directory, or a study tool with a quiz.

Plan before you code

Spend 15 minutes on this before writing a single line.

1
Pick the topic, write one sentence describing the site's purpose
2
Sketch the pages, draw boxes labeled "Home", "About", etc.
3
List the components, header, footer, nav, cards, form, etc.
4
Decide what's interactive, what should the user be able to click or type?
5
Pick a color palette, coolors.co generates one in seconds

File structure for a multi-page site

Keep things organized from day one, it scales as the project grows.

tsx

my-site/
├── index.html           # Home page
├── about.html
├── contact.html
├── styles/
│   └── main.css         # Shared styles
├── scripts/
│   └── main.js          # Shared scripts
└── images/
    └── logo.png

A reusable header pattern

Copy this header into every HTML page. The active page link can be highlighted with a class.

html

<header>
  <nav>
    <a href="index.html">Home</a>
    <a href="about.html">About</a>
    <a href="contact.html" class="active">Contact</a>
  </nav>
</header>

Build the project, recommended order

Don't try to perfect each step. Make it work, then polish.

1
Set up the folder structure and link your CSS/JS to each HTML page
2
Write the HTML for every page first (no styling yet)
3
Add the shared header and footer to all pages
4
Write global CSS, typography, color palette, container width
5
Style each page section by section
6
Add one interactive feature with JS (form validation, toggle, counter, etc.)
7
Test in DevTools mobile view, fix anything that breaks on small screens

Quick Check

Why link the same CSS file from every page instead of copying styles into each?

There's a maintenance reason and a performance reason.

←TypeScript Fundamentals

Back to Web Development

Introduction to Backend Concepts→