Scribd
Upload
2 views

Group Assignments HTML Web Development & Design

The document outlines group assignments for HTML web development and design, focusing on four projects: a personal portfolio website, a school website homepage, an e-commerce product page, and a tourist attraction landing page. Each project includes specific objectives, requirements, optional enhancements, and deliverables such as HTML files, asset folders, and documentation. The assignments cover key skill areas including HTML5, semantic structure, and responsive design basics.

Uploaded by

timothyojuang75
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
2 views

Group Assignments HTML Web Development & Design

The document outlines group assignments for HTML web development and design, focusing on four projects: a personal portfolio website, a school website homepage, an e-commerce product page, and a tourist attraction landing page. Each project includes specific objectives, requirements, optional enhancements, and deliverables such as HTML files, asset folders, and documentation. The assignments cover key skill areas including HTML5, semantic structure, and responsive design basics.

Uploaded by

timothyojuang75
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

Group Assignments: HTML Web Development & Design

HTML Web Development

Skill Areas Covered: HTML5, semantic structure, forms, tables, multimedia embedding,
responsive design basics.

Group 1: Personal Portfolio Website

Objective:
Design and develop a personal portfolio website for a student or freelancer.

Requirements:

• Home, About Me, Projects, and Contact pages.


• Use <header>, <nav>, <main>, <section>, and <footer>.
• Include a profile photo and links to social media.
• Use a contact form with input fields (no backend needed).
• Ensure consistent layout across all pages.

Optional Enhancements:

• Use internal CSS for basic styling.


• Add hover effects for navigation links.

Deliverables:

• Complete HTML files.


• Folder with images and assets.
• Screenshot of each page.
• Brief documentation (e.g., structure explanation or site map).

Group 2: School Website Homepage

Objective:
Create a homepage for a fictional school or college.

Requirements:

• Include logo, navigation menu, welcome message, and featured news.


• Add sections for About Us, Departments, Admissions, and News.
• Use a table to show the weekly class schedule.
• Embed a YouTube video or local video about the school.

Optional Enhancements:

• Add CSS for color theme and layout styling.


• Use lists for key information (e.g., facilities, achievements).

Deliverables:

• HTML file(s) and asset folder.


• Class schedule table in HTML.
• Embedded video section.
• Presentation explaining the design structure.
Group 3: E-Commerce Product Page

Objective:
Design a single product page for an online store.

Requirements:

• Include product title, image, price, description, and specifications.


• Create a product comparison table.
• Add an “Add to Cart” button (non-functional).
• Include customer review section using HTML comments or blockquotes.
• Use semantic HTML tags.

Optional Enhancements:

• Add a gallery of related products.


• Use inline CSS for layout adjustments.

Deliverables:

• HTML file with all required elements.


• Images folder for product photos.
• Sample product data (in table or list format).
• Brief written explanation of structure.

Group 4: Tourist Attraction Landing Page

Objective:
Build a landing page for promoting a tourist attraction or destination.

Requirements:

• Add a large banner image (hero section).


• Include sections for Overview, Attractions, Photo Gallery, and Contact.
• Use an ordered or unordered list for things to do.
• Embed a Google Map or static map image of the location.
• Create a contact form with required fields.

Optional Enhancements:

• Style the page using embedded CSS for visual appeal.


• Add testimonials using blockquotes.

Deliverables:

• Completed HTML page and assets.


• Screenshot of layout on browser.
• Documentation of page sections and their purpose.

You might also like