HTML
Uploaded by
Dishan PiyasiriHTML
Uploaded by
Dishan PiyasiriPractical Assessment Paper: Static Website Development
Module
Course Completion Evaluation - Web Page Layout Development
Date: July 6, 2025
Student Name:
Student ID:
Instructions
This practical assessment evaluates your ability to develop a static website layout using HTML
and CSS, following best practices. A visual preview of a sample Home page for a bookstore
website is provided below, describing and illustrating its layout as it would appear in a browser.
Use this preview as a reference to complete the tasks, which involve creating and displaying a
similar web page layout for a coffee shop website. Submit all files (HTML, CSS, images) and
diagrams on additional sheets or in a code editor. Test your work in a browser to ensure the
layout displays correctly. Total marks: 100. Time allowed: 3 hours. Use a code editor (e.g.,
VS Code) and a browser for testing.
Sample Web Page Preview: Bookstore Home Page
Below is a visual preview of the Home page for a bookstore website, as it would appear in a
browser. The description and diagram illustrate the layout, which you should use as a reference
for the tasks.
Layout Description
The bookstore Home page layout includes: - **Header**: A dark brown background with
a centered logo image (150px wide) at the top, followed by a horizontal navigation bar with
four links (Home, Books, About, Contact) in white text, centered, with gold hover effects. -
**Main Content**: A centered section with a large heading ("Welcome to Our Bookstore"),
a brief paragraph, and a "Featured Books" section. The featured section displays two book
cards in a grid (two columns, white background, shadow, centered text). - **Footer**: A fixed
dark brown bar at the bottom with a centered copyright notice and a social media link in gold
text. The layout is responsive, with the book grid stacking vertically and the navigation bar
becoming vertical on screens smaller than 600px.
1
Layout Diagram
Logo (150px wide, centered)
Navigation: [Home | Books | About | Contact]
Welcome to Our Bookstore (Heading)
Paragraph: Explore our collection...
Featured Books
Book 1 Book 2
l’ 2025 Bookstore | Social Media
1 Assessment Tasks
1.1 Designing Web Page Layout (25 marks)
1. (10 marks) Create a site map for a static website for a small coffee shop with at least four
pages (e.g., Home, Menu, About, Contact). Draw the site map, clearly labeling pages
and navigation links.
2. (15 marks) Draw a wireframe for the Home page of the coffee shop website, inspired by
the sample preview. Include key layout elements (e.g., header with logo, navigation bar,
main content with a welcome message and three featured items, footer) and label their
purpose.
1.2 Implementing Web Page Layout with HTML (30 marks)
3. (20 marks) Write HTML code for the Home page of the coffee shop website, based on
your wireframe and inspired by the sample preview. Include a semantic layout (<header>,
<nav>, <main>, <footer>) with a logo image (assume "coffee-logo.jpg"), a heading, a
2
welcome message, and a section showcasing three featured menu items (use placeholder
text).
4. (10 marks) Write HTML code for the Menu page, including hyperlinks to two external
coffee-related websites (use placeholder URLs). Ensure links open in a new tab and are
styled to be distinguishable, similar to the samples footer link.
1.3 Styling Web Page Layout with CSS (30 marks)
5. (20 marks) Write an external CSS file to style the Home page layout from Question 3,
inspired by the sample preview. Use a responsive grid for the featured items section
(three columns), with a background color, font styling, and consistent spacing. Ensure
the layout adapts to screens smaller than 600px (stack grid and navigation vertically).
6. (10 marks) Style the navigation bar from Question 3 to match the sample previews navi-
gation (horizontal layout, hover effects, responsive stacking for small screens).
1.4 Embedding Media in Layout (15 marks)
7. (15 marks) Embed a promotional banner image (assume "banner.jpg") on the Home page,
in addition to the logo from Question 3. Write HTML and CSS to ensure both images are
responsive, centered, and integrated into the layout with appropriate alt text, following
the sample previews approach.
End of Assessment
Total Marks: 100
For Instructor Use: Score: / 100