Grade 9 HTML & CSS Project Brief
Total Marks: 100
Project Title: Personal Portfolio Website
Due Date: 02 November 2024
Project Overview:
The objective of this project is to apply the HTML and CSS concepts you have
learned to create a personal portfolio website. Your website will showcase your skills,
hobbies, and goals. This project will give you hands-on experience in building a
structured, functional, and visually appealing website.
Project Requirements:
Your personal portfolio website must have the following components:
1. Homepage (25 marks)
➢ Create a homepage with the following sections:
➢ Header: Must include a website title and navigation menu (5 marks)
➢ Introduction Section: A brief paragraph about yourself (5 marks)
➢ Hobbies/Skills Section: List your hobbies or skills with some icons or images
(5 marks)
➢ Footer: Should include your contact information (email, phone, etc.) (5 marks)
➢ Overall layout and responsiveness: Ensure your homepage is clean and
mobile-friendly (5 marks)
2. About Me Page (20 marks)
➢ Title & Introduction (5 marks): A heading with a short bio describing who you
are.
➢ Profile Image (5 marks): Include a picture of yourself or a placeholder image.
➢ Details (10 marks): A paragraph that outlines your academic background,
future goals, and achievements. Use lists, paragraphs, and other relevant
HTML elements.
3. Projects/Portfolio Page (20 marks)
➢ Projects Section (10 marks): Create at least two projects you’ve worked on.
Each project should include a title, description, and a link (real or
placeholder).
➢ Images or Screenshots (5 marks): Add relevant images or screenshots of your
projects.
➢ Responsive Design (5 marks): Ensure the page looks good on both mobile
and desktop.
4. Contact Page (15 marks)
➢ Contact Form (10 marks): Create a simple contact form with fields for Name,
Email, and Message. Ensure all fields are required.
➢ Form Styling (5 marks): Style the form elements to look professional and
visually appealing.
5. General HTML & CSS Requirements (20 marks)
➢ HTML Structure (10 marks): Proper use of semantic HTML elements (e.g.,
`<header>`, `<nav>`, `<section>`, `<footer>`, etc.). Ensure correct nesting of
elements and overall clean code.
➢ CSS Styling (10 marks): Consistent styling throughout the website, including:
➢ Use of classes and IDs for styling
➢ Proper use of colors, fonts, and spacing
➢ Styling of buttons, images, and links.
6. Bonus Features (Optional) (Up to 10 marks)
➢ Add a Media Gallery (images, videos, etc.).
➢ Implement basic JavaScript (e.g., form validation or an image slider).
➢ Use CSS Animations or Hover Effects to enhance user interaction.
Submission Guidelines:
1. Folder Structure: Organize your project in a folder with subfolders for images and
CSS files.
2. Index File Ensure your website has an `[Link]` file as the main page.
3. External CSS File: All your CSS should be placed in an external CSS file and
linked properly.
4. Final Submission: Submit the project as a ZIP file containing all the website files.
Key Learning Objectives:
➢ Structuring web content using HTML.
➢ Styling web pages using CSS.
➢ Creating responsive layouts.
➢ Building a multi-page website.
Good luck with your project!