Create Your Own School Timetable
What You'll Learn
HTML
CSS
Basic Web Design
Project Overview
Build a colorful weekly class schedule using HTML and CSS. You'll learn how websites organize information using tables and how CSS can be used to customize colors, layouts, and design.
By the end of this project, you'll have your own personalized digital timetable that you can customize with your favorite subjects and colors.
Before You Start
Option A: Online (Recommended)
CodePen
Visit codepen.io
Click Start Coding
Use the HTML and CSS sections
Watch your website update live as you type
Replit
Visit replit.com
Click Start Building
Select the HTML, CSS, JS template
Create your project and begin coding
Option B: VS Code
Step 1: Install VS Code
Download from code.visualstudio.com
Complete the installation
Step 2: Install Live Server
Open Extensions
Search for Live Server
Install the extension by Ritwick Dey
Step 3: Create Your Project
Create a folder called:
school-timetable
Inside the folder, create:
index.html
style.css
Step 4: Launch Your Website
Right-click index.html and select:
Open with Live Server
Your website will automatically update whenever you save.
Step 1: Build the Timetable Structure
Create your HTML file using the code below:
[Insert HTML Code]
What Does This Code Do?
TagPurpose<table>Creates a table<tr>Creates a row<th>Creates a header cell<td>Creates a regular cellclass="math"Allows subject-specific colorscolspan="5"Makes lunch stretch across all weekdays
Challenge
Replace the sample subjects and times with your actual school schedule.
Save your file.
Step 2: Style Your Timetable
Add the CSS code below to your style.css file:
[Insert CSS Code]
This code:
Adds colors
Creates borders
Centers content
Makes the timetable easier to read
Challenge
Try creating your own color palette.
Need inspiration? Visit:
Save your file and view the changes.
Bonus Challenges
Beginner
Add a Saturday column
Add additional class periods
Add a homework section
Intermediate
Add icons for each subject
Add hover effects
Create a custom color scheme
Advanced
Create a second timetable for extracurricular activities
Make the timetable mobile-friendly
Publish it online using GitHub Pages
Show Off Your Work
Using CodePen
Save your project and share the link.
Using Replit
Click Share and copy your project URL.
Using VS Code
Take screenshots or record a short demo of your timetable.
Troubleshooting
My CSS Isn't Working
Make sure the file is named style.css
Check that the stylesheet link is inside the <head> section
Save both files
My Changes Aren't Showing
Save your files
Refresh your browser
Restart Live Server if necessary
Real-World STEM Connection
Web developers use HTML and CSS every day to build websites, applications, and online tools. Learning these skills is often the first step toward careers in software engineering, web development, and user experience (UX) design.
