Scribd
Upload
14 views2 pages

CP 221 Practical Assignment One

The assignment requires the design and development of a personal portfolio website using HTML, CSS, and JavaScript. It should include multiple sections such as Homepage, About Me, Portfolio, Contact Form, and a Survey Page, while adhering to specific HTML, CSS, and JavaScript requirements. Additionally, the submission must include a ZIP file of all files, a live demo link, and a readme document detailing the tools used and challenges faced.

Uploaded by

deonicebilali7
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
14 views2 pages

CP 221 Practical Assignment One

The assignment requires the design and development of a personal portfolio website using HTML, CSS, and JavaScript. It should include multiple sections such as Homepage, About Me, Portfolio, Contact Form, and a Survey Page, while adhering to specific HTML, CSS, and JavaScript requirements. Additionally, the submission must include a ZIP file of all files, a live demo link, and a readme document detailing the tools used and challenges faced.

Uploaded by

deonicebilali7
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

Practical Assignment One

Design and Develop a Personal Portfolio Website

Scenario:

You have recently completed your web development training and want to showcase your
skills to potential employers and clients. Your task is to design and build a fully functional
personal portfolio website using HTML, CSS, and JavaScript, demonstrating industry best
practices in structure, design, and interaction.

Assignment Description:

You will create a multi-page website that includes the following sections:

1. Homepage

2. About Me

3. Portfolio/Projects

4. Contact Form

5. Survey Page

Your website should implement the following core concepts and features:

HTML Requirements

• Use semantic HTML5 tags and specify a correct DOCTYPE.


• Include title and meta tags for SEO (description, keywords, author).
• Use block-level and inline-level elements appropriately.
• Add character entities where necessary (e.g., ©, <).
• Use lists (ordered, unordered, and nested) in your About or Skills section.
• Insert images (with alt text) and create links (absolute, relative, email, and anchor).
• Include at least one image map and iframe (e.g., YouTube video or Google Map).
• Design a survey form on a separate page with:
o Radio buttons, checkboxes, text areas
o Input validations (e.g., required fields, correct email format)
o Submit button

CSS Requirements

• Use a combination of external, internal, and inline CSS (justified).


• Apply CSS selectors: element, class, ID, pseudo-class.
• Style fonts, text, lists, backgrounds.
• Apply the box model to structure elements.
• Create a 2-column layout for the About page and a 3-column layout for the Projects
page.
• Use CSS to:
o Style tables
o Build horizontal and vertical navigation bars
o Implement print-friendly CSS for your resume section
• Practice positioning (relative, absolute, fixed) and z-index for layered content.

JavaScript Requirements

Use JavaScript to:

• Create a greeting function that runs on page load based on time of day.
• Handle form validation using regex for the contact form (e.g., email, phone number).
• Toggle a dark/light mode theme using JavaScript and CSS interaction.
• Manipulate page content dynamically (e.g., show/hide project details).
• Access and update elements using the DOM.
• Use event listeners for mouse clicks or input focus.

Additional Requirements

• Validate your HTML and CSS code using W3C Validator.


• Ensure accessibility best practices: alt attributes, proper label usage, keyboard
navigation.
• Use HTML5.1 new elements like <section>, <article>, <main>, <nav>, <figure>, etc.
• Use responsive design so the site works well on both desktop and mobile devices.

Submission Checklist:

• ZIP file containing all your HTML, CSS, JS files, and images
• A live demo link (if deployed on GitHub Pages etc.)
• A one-page readme document explaining:
o Tools used
o Key features implemented
o Challenges faced and how they were solved

You might also like