Build a Multi Page Website — Teaching Dashboard

 

☰

Teaching Dashboard

• Overview
• Objectives
• Structure
• Pages
• Design
• Assessment

Build a Multi Page Website

Student handout turned into an interactive teaching dashboard. Track progress, explore requirements, and guide your class through every step.

HTML5 CSS3 JavaScript Responsive Dark Mode

0%

Teaching Progress

Check off items as you cover them in class or review student submissions.

Jump to section

• 1Overview✓
• 2Objectives✓
• 3Folder structure✓
• 4Pages✓
• 5Navigation✓
• 6Design✓
• 7Interactivity✓
• 8Dashboard✓
• 9Content✓
• 10Code quality✓
• 11Submission✓
• 12Assessment✓
• 13Extensions✓

📋Project overview

Core

Students will design and build a multi page website using HTML, CSS, and JavaScript. The website must follow a professional folder structure, include a navigation system, and demonstrate basic interactivity.

The final project should be fully functional, visually consistent, and easy to navigate. This project serves as a capstone for front-end fundamentals.

Required 100 points total

• Introduced project to students
• Clarified deliverables and deadlines
• Shared example projects for inspiration

🎯Learning objectives

Skills

By completing this project, students will learn:

• How to structure a website using folders and modular files
• How to write clean, semantic HTML
• How to apply CSS for layout, color, and typography
• How to implement dark mode using CSS variables
• How to add simple JavaScript interactions
• How to design a user friendly navigation system
• How to organize content across multiple pages

• Reviewed HTML semantics with class
• Demonstrated CSS variables and theming
• Taught flexbox and grid fundamentals
• Explained DOM manipulation basics

📁Required folder structure

10 pts

Students must not change folder names. The project must follow this exact structure:

project/
├── index.html
├── about.html
├── contact.html
├── dashboard.html
│
├── css/
│   ├── styles.css
│   ├── layout.css
│   └── theme.css
│
├── js/
│   ├── main.js
│   └── theme-toggle.js
│
├── img/
│   └── (images used in your site)
│
├── assets/
│   └── (PDFs or downloads)
│
└── media/
    └── (videos or audio)

• Students created correct folder hierarchy
• All required files exist in correct locations
• No inline styles or scripts used

📄Pages you must create

Required

Required

🏠

index.html

Homepage — the landing page for the site.

ℹ

about.html

Information about the site or creator.

✉

contact.html

Contact form or contact details.

📊

dashboard.html

Prototype dashboard with layout and interactivity.

Choose at least one

📖

lessons.html

Educational content or tutorials.

💻

projects.html

Showcase of student work.

🖼

gallery.html

Image gallery or portfolio.

📦

resources.html

Downloads and reference materials.

• All 4 required pages created
• At least 1 optional page added
• Consistent layout across all pages

🌐Navigation requirements

15 pts

Every page must include a consistent navigation bar at the top with the following elements:

• Home, About, Contact, Dashboard links
• Dropdown menu with at least 3 links
• Dark mode toggle button

Navigation must:

• Be placed at the top of each page
• Use <nav> and <ul> elements
• Include hover effects
• Work across all pages

• Navigation present on every page
• Dropdown menu has 3+ working links
• Hover effects implemented
• Dark mode toggle functional

🎨Design requirements

20 pts

Layout▾

A header, main content area, footer, responsive grid or flexbox section, and at least 3 card components (info boxes).

Typography▾

At least one custom font, CSS variables for colors, consistent spacing and alignment throughout.

Dark mode▾

CSS variables for light and dark themes, smooth transitions, dark mode aware navigation, cards, and tables. Must be toggled using JavaScript.

• Header, main, footer structure present
• 3+ card components implemented
• Custom font loaded and applied
• CSS variables used for colors
• Dark mode fully implemented with JS toggle

⚡Interactivity requirements

15 pts

At least two interactive features are required:

Required: Dark mode toggle (JavaScript)

Choose one additional:

• Dynamic text update (e.g., "Student Count")
• Button that changes content
• Collapsible section
• Simple form validation
• Hover activated dropdown menu

• Dark mode toggle works via JavaScript
• Second interactive feature implemented
• No inline scripts — all JS is external

📊Dashboard page requirements

20 pts

The dashboard.html page must include:

• A sidebar
• A top bar
• A responsive grid of cards
• A table with at least 3 rows
• One dynamic JavaScript element (e.g., simulated API data)

• Sidebar layout implemented
• Top bar present
• Responsive grid of cards
• Table with 3+ rows of data
• Dynamic JS element (simulated data)

📝Content requirements

10 pts

Original content only. Can be educational, creative, or personal.

📝

300+ words

Original written content across all pages.

🖼

3+ images

Placed in the img/ folder.

📦

1+ download

PDF or text file in assets/.

🎥

1+ media file

Video or audio, local or embedded.

• 300+ words of original text
• 3+ images included
• 1+ downloadable file in assets/
• 1+ video or audio element

💻Code quality requirements

10 pts

• Use semantic HTML (<header>, <main>, <section>, <footer>)
• Use external CSS files (no inline styles)
• Use external JS files (no inline scripts)
• Use meaningful class names
• Comment code where needed
• Avoid duplicate code
• Keep indentation clean and consistent

• Semantic HTML elements used throughout
• No inline styles or scripts
• Class names are meaningful
• Code is commented and well-indented
• No duplicated CSS or HTML patterns

📤Submission requirements

Required

Students must submit:

• The full project folder
• A short reflection (150–250 words) explaining:
  • What they learned
  • What challenges they faced
  • What they would improve

• Full project folder received
• Reflection is 150–250 words
• Reflection covers all three prompts

📈Assessment criteria

Rubric

Category	Points
Folder structure	10
Navigation system	15
Page layout & design	20
Dashboard page	20
Interactivity (JS)	15
Content quality	10
Code quality	10
Total	100

• Rubric shared with students
• Grading completed

🏆Extension challenges

Optional

For students who want to go further:

🔍

Search bar

Add site-wide search functionality.

✨

Animations

CSS transitions and keyframe effects.

🌞

Second theme

e.g., "Solarized Mode" beyond light/dark.

👤

Student profile

Create a personal profile page.

📈

JS chart library

Add data visualization.

📚

Lesson module

Build a multi-page lesson system.

• Extension options explained to advanced students

Built for educators. Based on the "Build a Multi Page Website" student handout.