Product Landing Page Assignment Week 8
Design and build a complete product landing page from scratch
Two-Phase Project: Pre-design is due May 21, the Figma design is due May 26 at 10:00am for critique, and the coded landing page is due June 2. 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
Thursday, May 21
Style Guide & Theme Rough Draft
Tuesday, May 26 at 10:00am
Design Rough Draft (Figma) - GRADED
Tuesday, May 26
Figma Critique Session
Tuesday, June 2
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: May 26 at 10:00am
View Design Brief → Phase 2: Implementation
Code Requirements
HTML/CSS implementation guide and technical specs
Due: June 2
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.