KITENGELA INTERNATIONAL SCHOOLS
WEB DESIGN PRACTICAL EXAMINATION
TERM 2
SUBJECT: Coding (Web Design)
GRADE: 8 & 9
DURATION: 1 HOURS
TOTAL MARKS: 100
STUDENT NAME: _______________________________________ REG NO: __________
INSTRUCTIONS:
1. You are to design a simple Library Website using only HTML and CSS.
2. Follow each instruction carefully. Use only the specified tags and CSS properties.
3. Save all your work in a folder and submit it via USB after completing the task.
PART 1: SETUP (10 MARKS)
1. Create a folder named: Library_YourName_ID (e.g., Library_Joseph_0707) — (2
marks)
2. Open the folder using VS Code — (1 mark)
3. Create two files inside the folder:
i. [Link]
ii. [Link] — (2 marks)
4. Inside [Link], create a basic HTML page with:
i. <!DOCTYPE html>, <html>, <head>, <title>, <body>
ii. Title: Library Website
iii. Link the CSS file using <link> — (5 marks)
PART 2: HOMEPAGE CONTENT (30 MARKS)
1. Add <h1> with the text: Welcome to Our School Library — (2 marks)
2. Add a <p> describing the library (2–3 lines in your own words) — (3 marks)
3. Create a horizontal navigation menu using a <nav> with links:
i. Home
ii. Catalog
iii. Contact — (4 marks)
1|Page
4. Create a list of book categories using <ul>:
➢ Fiction, Science, History, Technology — (5 marks)
5. Add a library image using:
<img src="your_own_image" alt="Library Image"> — (3 marks)
6. Add a table with 2 rows and 3 columns (Book Title, Author, Status) — (6 marks)
7. Add a footer: © 2025 Our Library. All rights reserved. — (3 marks)
8. Add a <hr> to separate homepage sections — (2 marks)
9. Add a link to another page called [Link] — (2 marks)
PART 3: APPLY CSS STYLING (30 MARKS)
Use only the listed CSS properties.
1. Set the page background to light grey using background-color — (2 marks)
2. Change font to Arial using font-family — (2 marks)
3. Style <h1>: center align and navy color using text-align and color — (4 marks)
4. Style image:
➢ border: 2px solid black
➢ padding: 10px
➢ width: 300px — (5 marks)
5. Style <nav> links:
➢ White text on navy background
➢ Add spacing using margin-right
➢ Add :hover effect to change text color to yellow — (6 marks)
6. Table styling:
➢ border: 1px solid grey on table and cells
➢ text-align: center, and padding: 8px — (5 marks)
7. Footer styling:
➢ Background: black
➢ Text color: white
➢ Text alignment: center — (3 marks)
8. Add spacing between sections using margin or padding — (3 marks)
2|Page
PART 4: LINKED PAGE (10 MARKS)
1. Create a new page: [Link] — (2 marks)
2. Add <h1>: Library Catalog — (2 marks)
3. Add <p>: Browse books in different categories. — (2 marks)
4. Add a link back to Home: [Link] — (2 marks)
5. Link to the same [Link] — (2 marks)
PART 5: FINAL CHECK & SUBMISSION (10 MARKS)
1. Open [Link] in browser and confirm layout — (2 marks)
2. Take a screenshot of your homepage and save it as [Link] — (3 marks)
3. Copy the project folder to the teacher’s USB — (3 marks)
4. Close VS Code and browser — (2 marks)
3|Page
