Scribd
Upload
4 views

Web Development I Assignment II

The assignment requires the creation of a personal portfolio website using HTML and CSS, showcasing IT skills and services. It includes sections for a homepage, about, services, contact, and a footer with social media links, along with specific technical requirements for styling and responsiveness. Additionally, a responsive top navigation bar with hover effects is to be implemented as part of the assignment.

Uploaded by

aiensleyshield
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
4 views

Web Development I Assignment II

The assignment requires the creation of a personal portfolio website using HTML and CSS, showcasing IT skills and services. It includes sections for a homepage, about, services, contact, and a footer with social media links, along with specific technical requirements for styling and responsiveness. Additionally, a responsive top navigation bar with hover effects is to be implemented as part of the assignment.

Uploaded by

aiensleyshield
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

Web Development I Assignment II

Personal Portfolio Website [20 marks]

Objective
Question One [15 marks]

Using HTML and CSS Create a personal portfolio website that showcases your soft skills in IT
sector, and the services you can offer to provide IT solution in the society.

Requirements

1. Homepage
o Title of the page should be your name.
o A header with your name and a navigation menu linking to the different sections
(About, Services, Contact).
o A brief introduction about yourself (2-3 sentences).
o A professional-looking image of yourself (optional).
o A background color or image that reflects your personal style.
2. About Section
o A heading (h2) with the title "About Me".
o A paragraph detailing your background, skills, and interests.
o Use at least one list (unordered or ordered) to highlight key skills or experiences.
3. Services Section
o A heading (h2) titled "My Services".
o Showcase at least three projects:
 For each service, include:
 A service title (h3).
 A brief description of the service (1-2 sentences).
 A link to the service (if applicable) or a placeholder link.
 An image or screenshot of the service (optional).
o Use CSS to style the services page in a grid or card layout.
4. Contact Section
o A heading (h2) titled "Contact Me".
o Include a simple contact form with the following fields:
 Name (text input)
 Email (email input)
 Message (textarea)
 Submit button
o Ensure the form is styled for visual clarity.
5. Footer
o Include a footer with your social media links (at least two platforms, e.g.,
LinkedIn, GitHub).
o Add copyright information.
6. Top navigation bar
o Include a top navigation bar with the following link: Home, about us, My
Services, contact us and profile menus to each page
Technical Requirements

 Use CSS for styling (external stylesheet preferred).


 Ensure the website is responsive (adjusts well on different screen sizes).
 Use classes and IDs to apply CSS styles appropriately.
 Include comments in your code to explain different sections.

Question Two [5 marks]

Create a responsive top navigation bar of a webpage using HTML and CSS. the navigation
links/menus should change color when hovered over. Your top navigation bar should contain the
following menus: Home, About Us, Services and contact us

How to submit:

 Zip all the files on a single file and submit them on the eLearning platform (ZDS)

You might also like