Student Study Guide/Graded Classwork:
Grade 9: Building a 3-Page Mini-Website (Landing Page +
Navigation) with HTML & CSS
Student Directions —
1. Open your text editor (Notepad) on your computer.
2. Create a new folder named ICT_Website_Project on your computer.
3. Inside that folder create three files with these exact names (See this video and this video for details about
how to do that, but you don’t have to write any code to begin…I already wrote the codes you need for the 3
files below…just copy each code and paste it into the file you are instructed to paste it into). The files are:
[Link]
[Link]
[Link]
. Copy and paste the full code below into the matching file exactly as shown (do not change file
names): Code for [Link] — copy the entire code below and paste into [Link] file:
<!DOCTYPE html>
<html>
<head>
<title>My Website - Home</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 50px;
background-color: #f4f6f9;
color: #333;
}
nav {
margin-bottom: 20px;
}
nav a {
text-decoration: none;
margin-right: 15px;
color: #0066cc;
font-weight: bold;
}
nav a:hover {
color: #ff6600;
}
img {
margin-top: 15px;
border-radius: 10px;
}
.container {
background-color: white;
padding: 30px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
</style>
</head>
<body>
<div class="container">
<nav>
<a href="[Link]">Home</a>
<a href="[Link]">About</a>
<a href="[Link]">Contact</a>
</nav>
<h1>Welcome to My Website</h1>
<img src="[Link] alt="Logo">
<p>This is my landing page! Thank you for visiting my mini website project for ICT class.</p>
</div>
</body>
</html>
5. Copy and paste the About page code into [Link] (paste everything between the quotes):
<!DOCTYPE html>
<html>
<head>
<title>About</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 50px;
background-color: #f4f6f9;
color: #333;
}
nav {
margin-bottom: 20px;
}
nav a {
text-decoration: none;
margin-right: 15px;
color: #0066cc;
font-weight: bold;
}
nav a:hover {
color: #ff6600;
}
img {
margin-top: 15px;
border-radius: 10px;
}
.container {
background-color: white;
padding: 30px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
</style>
</head>
<body>
<div class="container">
<nav>
<a href="[Link]">Home</a>
<a href="[Link]">About</a>
<a href="[Link]">Contact</a>
</nav>
<h1>About Me</h1>
<img src="[Link] alt="Logo">
<p>This page tells you more about this website project.</p>
<p>This site was built using HTML for structure and CSS for styling.</p>
</div>
</body>
</html>
6. Copy and paste the Contact page code into [Link] (paste everything between the quotes):
<!DOCTYPE html>
<html>
<head>
<title>Contact</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 50px;
background-color: #f4f6f9;
color: #333;
}
nav {
margin-bottom: 20px;
}
nav a {
text-decoration: none;
margin-right: 15px;
color: #0066cc;
font-weight: bold;
}
nav a:hover {
color: #ff6600;
}
img {
margin-top: 15px;
border-radius: 10px;
}
.container {
background-color: white;
padding: 30px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
</style>
</head>
<body>
<div class="container">
<nav>
<a href="[Link]">Home</a>
<a href="[Link]">About</a>
<a href="[Link]">Contact</a>
</nav>
<h1>Contact</h1>
<p>You can reach me at: student@[Link]</p>
<p>Thank you for viewing my website!</p>
</div>
</body>
</html>
7. After pasting, save each file. Make sure each file is saved inside the ICT_Website_Project folder.
8. Customize the content (required for full credit):
Edit the text to match your topic.
Edit the <h1> headings and <p> paragraphs so they describe your website topic (e.g., My
Gaming Site, Sports Team, Dream Vacation).
Replace the image URLs in
with your chosen, school-appropriate image links.
9. Test your site:
Double-click [Link] to open it in your
browser. Click the About link. Then click
Home to go back.
Click Contact. Then click About or Home. Every link must work both ways.
If a link fails, check the file names and spelling in href (they must be exactly [Link], [Link],
[Link]).
10. Checklist to submit:
All three files saved in the same
folder. Navigation links work both
ways.
Each page has real content (not placeholder text).
CSS styling looks consistent (same font, colors, spacing).
11. If you finish early, add one extra polish feature (optional):
Change the hover color in nav a:hover to a different
color code. Change the placeholder image to a
different image URL.
12. Turn in: Upload the ICT_Website_Project folder as a .zip or submit the three .html files on Teams.