S3 Web Dev Practical
WEBSITE DEVELOPMENT
PRACTICAL
2 Hours | 100 Marks
Class: S3
Stream: ______________________
Duration: 2 Hours
Total Marks: 100
Date: ______________________
Student Name: ______________________
INSTRUCTIONS
1. This exam has 2 questions. You must complete BOTH.
2. Question 1 is about HTML. Question 2 is about CSS. Each is worth 50 marks.
3. You will work on a computer using VS Code and a browser (Chrome).
4. You may use the internet for Google Fonts and images ONLY — no tutorials, no copying
code from websites.
5. Read the full question carefully before you start coding.
6. Save your work regularly. The teacher will check your files AND your browser.
7. Suggested time: spend roughly 1 hour on each question.
8. Name all files and folders exactly as instructed — marks are awarded for correct naming.
Page 1 of 6
S3 Web Dev Practical
QUESTION 1: Build a Webpage Using HTML
50 marks | Suggested time: 1 hour
📋 SCENARIO 1 — MAMA GRACE’S KITCHEN
Mama Grace runs a small restaurant called “Mama Grace’s Kitchen” in Jinja Town.
She serves Ugandan food — Matooke, Rolex, Grilled Tilapia and Fresh Juices.
She is open Monday to Saturday, 7:00 AM to 9:00 PM.
Target audience: local customers and tourists, mostly using phones.
She wants a simple one-page website where people can see what she offers and how to
contact her.
YOUR TASK
Create a single webpage for Mama Grace using HTML only (no CSS in this question).
STEP-BY-STEP INSTRUCTIONS
Step 1 — Set up your project
Create a folder on the Desktop called: mama-grace
Inside it, create: [Link] and a sub-folder called images
Open the folder in VS Code.
Step 2 — Write the skeleton code
In [Link], write the full HTML skeleton code from memory (DOCTYPE, html, head with charset
+ viewport + title, and body).
The page title must be: Mama Grace’s Kitchen — Jinja Town
Step 3 — Add page content inside <body>
Build the page with ALL of the following:
# What to add Details
1 Main heading (<h1>) The restaurant name
2 Section headings (<h2>) At least 2 section headings (e.g. “Our Menu”, “Contact
Us”)
3 Paragraphs (<p>) At least 2 paragraphs with real content about the
restaurant
4 Bold and italic text Use <strong> at least once and <em> at least once,
Page 2 of 6
S3 Web Dev Practical
where they make sense
5 Unordered list (<ul>) A list of food items Mama Grace serves (at least 4
items)
6 Ordered list (<ol>) Steps to place an order or directions to the restaurant
(at least 3 steps)
7 Image with caption Use <figure>, <img> and <figcaption>. Find a free
food photo online and save it to your images folder.
The alt text must describe the image.
8 Table A table showing opening hours: columns for Day,
Opening Time, Closing Time. At least 3 rows of data.
Must use <thead>, <tbody>, <th> and <td>.
9 Semantic structure Wrap your page in <header>, <main> and <footer>.
The footer must have a copyright line using ©
Step 4 — Check your work
Open [Link] with Live Server. Everything must display correctly in Chrome — no broken
images, no missing content.
🔍 SELF-CHECK BEFORE YOU MOVE TO QUESTION 2
☐ Skeleton code is complete and correct
☐ Page title shows in the browser tab
☐ I have one <h1> and at least two <h2> headings
☐ I have at least 2 paragraphs with <strong> and <em> used meaningfully
☐ I have one <ul> with at least 4 items and one <ol> with at least 3 items
☐ My image loads correctly and has descriptive alt text and a figcaption
☐ My table has <thead>, <tbody>, <th>, <td> and at least 3 data rows
☐ My page uses <header>, <main> and <footer>
☐ My folder is named mama-grace and my image is in the images folder
Page 3 of 6
S3 Web Dev Practical
QUESTION 2: Style a Webpage Using CSS
50 marks | Suggested time: 1 hour
📋 SCENARIO 2 — BRIGHT FUTURE TUTORS
Bright Future Tutors is a small tutoring centre in Kampala that helps students with Maths,
English and Science.
The owner, Mr. Okello, wants his website to look professional and trustworthy.
Brand colours:
Primary = dark blue (#1B4965)
Secondary = light blue (#5FA8D3)
Accent = orange (#E76F51)
Background = white (#FFFFFF)
Text = near-black (#1A1A1A)
Fonts:
Headings = Montserrat (bold)
Body = Open Sans
WHAT YOU ARE GIVEN
An HTML file has already been prepared for you by the teacher. It is saved on your Desktop at:
Desktop / bright-future / [Link]
The HTML already contains: a header with a heading and navigation links, a hero section, a 3-card
services section, and a footer. A css/ folder already exists but [Link] is empty.
Do NOT change the HTML file. You will only write CSS.
YOUR TASK
Open the project in VS Code. Write CSS in css/[Link] to style the page and match Mr. Okello’s
brand.
STEP-BY-STEP INSTRUCTIONS
Step 1 — Link the stylesheet
The HTML file does NOT yet link to [Link]. Open [Link] and add the correct <link> tag inside
the <head>. Look for the comment that tells you where. This is the ONLY change you make to the
HTML.
Page 4 of 6
S3 Web Dev Practical
Step 2 — Set up your CSS foundations
In [Link], write the following:
# What to write Details
1 Import Google Fonts Import Montserrat (bold 700) and Open Sans from Google
Fonts using @import
2 CSS Variables Inside :root { } define all 5 brand colours as variables: --
primary, --secondary, --accent, --white, --dark
3 CSS Reset Use the * selector to set margin: 0, padding: 0 and box-
sizing: border-box
4 Body styling Set the body font to Open Sans, font-size 16px, text colour
to --dark, background to --white, and line-height 1.6
Step 3 — Style the headings, header and footer
# What to style Details
5 Headings (h1, h2, h3) Font: Montserrat. Colour: --primary. Give each a different
font-size using rem units.
6 Header Background: --primary. Text: white. Use padding to give it
breathing space. Nav links should be white with no
underline.
7 Nav link hover When a user hovers over a nav link, the colour should
change to --accent.
8 Footer Background: --dark. Text: white. Centre-aligned. Padding
for breathing space.
Step 4 — Style the cards using Flexbox
# What to style Details
9 Cards container Use display: flex with gap: 24px and flex-wrap: wrap so the
3 cards sit side by side.
10 Individual cards Give each card: a light background, rounded corners
(border-radius), padding, and a subtle box-shadow.
11 Card hover effect When a user hovers over a card, it should lift up slightly
using transform: translateY(-4px) with a smooth transition.
Step 5 — Check your work
Page 5 of 6
S3 Web Dev Practical
Open in Live Server. The page should look clean, professional, and use the correct brand colours
throughout. Nothing should look plain or unstyled.
🔍 SELF-CHECK BEFORE YOU FINISH
☐ [Link] is linked — the page is no longer plain white
☐ Google Fonts are loading — headings look different from body text
☐ Brand colours appear in the header, headings, and footer
☐ CSS variables are defined in :root and used throughout (not hardcoded hex values repeated)
☐ Header has a coloured background with white nav links
☐ Nav links change colour when I hover over them
☐ The 3 cards are side by side with even spacing
☐ Cards lift slightly when I hover over them
☐ Footer is dark with white centred text
☐ No CSS errors — page looks correct in Chrome
— END OF EXAMINATION —
Page 6 of 6