Product Landing Page Assignment Week 8
Design and build a complete product landing page from scratch
Two-Phase Project: Design in Figma first (graded Nov 24), then implement with HTML/CSS (graded Dec 3). Design and code are graded separately.
This is your competency project—a culmination of everything you've learned about HTML, CSS, forms, tables, and responsive design before your final portfolio.
Project Timeline
Wednesday, Nov 19
Style Guide & Theme Rough Draft
Sunday, Nov 24
Design Rough Draft (Figma) - GRADED
Monday, Nov 25
Figma Critique Session
Tuesday, Dec 3
Final Code Due - GRADED
Assignment Documents
Follow these documents in order. Each builds on the previous one.
Start Here
Assignment Overview
Complete project scope, learning objectives, timeline, and grading criteria
Read Overview → Phase 1: Design
Design Brief
Figma design requirements and specifications
Due: Nov 24
View Design Brief → Phase 2: Implementation
Code Requirements
HTML/CSS implementation guide and technical specs
Due: Dec 3
View Requirements → Optional Challenge
Stretch Goals
Advanced JavaScript challenges for early finishers
2-4 hours each
View Stretch Goals →What You'll Build
- Fixed navigation header with logo
- Hero section with compelling call-to-action
- Embedded product video
- Feature cards using semantic HTML
- Product data table (displayed in-page)
- Contact form with HTML5 validation
- Responsive footer
Critical Requirements
Table Location: Your data table must appear in the page (not in a modal). Modal implementation is an optional stretch goal.
Video Required: Embed a product-related video with
id="video". Can be YouTube iframe or HTML5 video element.
Design First: Complete your Figma design before writing any code. The design is your roadmap.