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.