01 / Project Overview

For your final project, you will create a small multi-page website. Unlike earlier weekly exercises, this project asks you to make more of the design and content decisions independently.

Your website should have a clear purpose, a consistent visual identity, working navigation, and content organized across multiple pages. It should also adapt to different screen sizes and follow basic accessibility and usability practices.

02 / Choose Your Website Topic

Choose a subject that genuinely interests you. Your website can be personal, creative, informational, or connected to a hobby. You do not need to create a real business or use a topic related to computer programming.

Before you begin, answer these questions

• What is the subject of your website?
• Who is the intended audience?
• What should visitors learn, see, or do?
• What kind of visual style best fits the subject?

03 / Required Website Structure

Your website must contain at least three connected pages. Use the following structure as a starting point, adapting the page names and content to your topic.

04 / Plan Before You Code

Before opening CodePen, sketch a simple plan for your website. You can use paper, a digital drawing tool, or a basic wireframe. The goal is to make decisions about content and layout before writing code.

Step 1: Create a simple sitemap

HOME
  |
  |---- ABOUT
  |
  |---- GALLERY / PROJECTS

A sitemap shows which pages belong to your website and how they relate to one another.

Step 2: Sketch each page

Use simple boxes to indicate the header, navigation, main content, images, and footer. You do not need to design every detail yet.

Step 3: Choose your visual direction

• Choose a small, coordinated color palette.
• Select readable typefaces and establish heading sizes.
• Decide how images will be displayed.
• Plan spacing and alignment.
• Keep the visual style consistent across all pages.

05 / Set Up Your Project Files

For this project, create a separate HTML file for each page and one shared CSS file. This makes it easier to maintain consistent styling across your site.

my-website/
|
|-- index.html
|-- about.html
|-- gallery.html
|
|-- css/
|   |-- style.css
|
|-- images/
    |-- project-one.jpg
    |-- project-two.jpg
    |-- project-three.jpg

index.html is the home page. The other HTML files contain the additional pages, while style.css contains the shared design rules. The images folder keeps your visual assets organized.

06 / HTML Starter Template

Use this basic structure for each page. Change the title, heading, and main content to match the page you are creating.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0">
  <title>My Website | Home</title>
  <link rel="stylesheet" href="css/style.css">
</head>

<body>
  <header class="site-header">
    <p class="site-name">My Website</p>

    <nav aria-label="Main navigation">
      <a href="index.html">Home</a>
      <a href="about.html">About</a>
      <a href="gallery.html">Gallery</a>
    </nav>
  </header>

  <main class="page-container">
    <section class="intro">
      <h1>Welcome to My Website</h1>
      <p>Introduce your topic in a few sentences.</p>
    </section>

    <section class="featured">
      <h2>Featured Content</h2>
      <p>Add content that helps visitors explore your topic.</p>
      <a href="gallery.html">Explore the gallery</a>
    </section>
  </main>

  <footer>
    <p>© 2026 My Website</p>
  </footer>
</body>
</html>

For the About and Gallery pages, reuse the header, navigation, stylesheet link, and footer. Change the page title and main content. Reusing a consistent structure helps the site feel like one connected experience.

07 / Shared CSS Starter

This starter stylesheet gives you a clean foundation. Customize the colors, type, spacing, and layout to fit your topic. Use the same stylesheet for all three pages.

/* 1. Base styles */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
  line-height: 1.6;
  color: #172033;
  background: #f5f7fb;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* 2. Header and navigation */
.site-header {
  background: #101b36;
  color: #ffffff;
  padding: 20px 5%;
}

.site-name {
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0 0 12px;
}

nav {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

nav a {
  color: #ffffff;
  text-decoration: none;
  font-weight: 700;
}

nav a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* 3. Main content */
.page-container {
  width: 90%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 32px 0;
}

.intro {
  padding: 28px;
  background: #ffffff;
  border-radius: 12px;
  margin-bottom: 24px;
}

h1, h2 {
  line-height: 1.2;
}

a {
  text-underline-offset: 3px;
}

a:focus-visible {
  outline: 3px solid #2855d9;
  outline-offset: 3px;
}

/* 4. Responsive layout */
@media (min-width: 700px) {
  .site-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .site-name {
    margin: 0;
  }
}

/* 5. Footer */
footer {
  padding: 24px 5%;
  background: #e5eaf3;
  text-align: center;
}

@media (max-width: 500px) {
  .intro {
    padding: 18px;
  }

  .page-container {
    padding: 20px 0;
  }
}

This is a foundation, not a finished design. Add the CSS Grid or Flexbox layouts your content needs, and make sure your chosen colors, typography, and spacing support the subject of your website.

08 / Build a Gallery with CSS Grid

If your site includes projects, artwork, products, or other collections, CSS Grid can help organize them. Here is a simple example you can adapt for your Gallery page.

<section class="gallery">
  <article class="project-card">
    <img src="images/project-one.jpg"
         alt="Describe your first project">
    <h2>Project One</h2>
    <p>A brief description of the project.</p>
  </article>

  <article class="project-card">
    <img src="images/project-two.jpg"
         alt="Describe your second project">
    <h2>Project Two</h2>
    <p>A brief description of the project.</p>
  </article>

  <article class="project-card">
    <img src="images/project-three.jpg"
         alt="Describe your third project">
    <h2>Project Three</h2>
    <p>A brief description of the project.</p>
  </article>
</section>

.gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

.project-card {
  background: #ffffff;
  padding: 16px;
  border-radius: 10px;
}

.project-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

@media (min-width: 600px) {
  .gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .gallery {
    grid-template-columns: repeat(3, 1fr);
  }
}

Add enough project cards to make the page feel complete. Keep image proportions and card spacing consistent, and check that the layout adapts to narrow screens.

09 / Navigation and Page Links

Each page should use the same navigation labels and point to the correct file. If a link works from the home page but fails on another page, check the file path and spelling.

<nav aria-label="Main navigation">
  <a href="index.html">Home</a>
  <a href="about.html">About</a>
  <a href="gallery.html">Gallery</a>
</nav>

These are relative links: they refer to files in the same website. If you put a page inside a folder, you will need to update its path accordingly.

10 / Responsive Design and Accessibility

Your final website should be usable on more than one screen size. It should also follow the accessibility practices introduced in Week 13.

Accessibility checklist

11 / Week 14 Work Session

Use this class session to make real progress on the final website. You should leave with a clear plan and a working foundation for all three pages.

1. Confirm your topic. Decide what your website is about and who will use it.
2. Complete your sitemap. Identify the three required pages and the content each page will contain.
3. Build the shared structure. Create the header, navigation, main content area, and footer.
4. Connect the pages. Make sure the navigation works from every page.
5. Apply your visual design. Add your colors, typography, spacing, and layout styles in the shared stylesheet.
6. Develop the content. Add images, text, project cards, or other material appropriate to your topic.
7. Test and revise. Check responsive behavior, accessibility, and links before moving into final polishing.

12 / Final Project Requirements

13 / What to Submit for Week 14

This week’s submission is a progress checkpoint, not necessarily the finished final project. Show that your site is planned, structured, and actively being developed.

Self-assessment

Before you finish the work session, ask yourself:

• Can a visitor understand what my website is about?
• Does each page have a clear purpose?
• Can visitors navigate between pages?
• Does the visual style feel consistent?
• What still needs improvement before the final submission?

14 / Key Terms