Product Landing Page - Assignment Overview Start Here

Complete project overview, learning objectives, timeline, and grading criteria

Course Context

Course: Web Code 1 (HTML & CSS Focus)
Assignment Type: Competency Project (2nd to last assignment)
Purpose: Culmination of HTML/CSS skills before final portfolio project
Prerequisites: Students have completed lessons on tables and forms

Assignment Summary

Students will design and build a complete product landing page for one product or service of their choice. This two-phase project requires students to first create a design in Figma, then implement it using HTML and CSS.

Important: Design and code are graded separately. All content (including the data table) should be about the chosen product.

Learning Objectives

This assignment assesses students' ability to:

  • Create semantic HTML structure with proper hierarchy
  • Implement responsive layouts using Flexbox/Grid
  • Style and validate HTML forms
  • Create and style data tables with responsive strategies
  • Apply CSS transforms and animations
  • Build fixed navigation with smooth scrolling
  • Follow accessibility best practices
  • Organize and document code professionally
  • Deploy projects to production
  • Work with version control (Git/GitHub)

Project Timeline

Date Deliverable Phase
Wednesday, Nov 19 Style Guide & Theme Rough Draft Design Phase
Sunday, Nov 24 Design Rough Draft (Figma) Design Phase
Monday, Nov 25 Figma Critique Session Design Phase
Tuesday, Dec 3 Final Code Implementation Phase

Project Phases

Phase 1: Design (Figma)

Students create a complete visual design before writing any code. See Design Brief for details.

Deliverables:

  • Nov 19: Style guide with typography, colors, spacing system
  • Nov 24: Complete desktop (1440px) and mobile (375-425px) designs
  • Nov 25: Participate in group critique session

Phase 2: Implementation (HTML/CSS)

Students build their designed landing page using semantic HTML and CSS. See Code Requirements for technical specifications.

Deliverable:

  • Dec 3: Final code with GitHub repository, deployed site, and documentation

Phase 3 (Optional): JavaScript Enhancement

Advanced students can add interactive features using JavaScript. See Stretch Goals for options.

Required Components

1. Fixed Header/Navigation

  • Logo with ID header-img
  • Navigation bar with ID nav-bar
  • Minimum 3 navigation links (class: nav-link)
  • Stays fixed at viewport top when scrolling

2. Hero Section

  • H1 headline (value proposition)
  • Subheading/description
  • Primary call-to-action button

3. Video/Media

  • Embedded video related to product
  • Video element with ID: video
  • Can be YouTube/Vimeo iframe OR HTML5 video element
  • Must be responsive (scales on mobile)

4. Features Section

  • Minimum 3 feature cards using <article> elements
  • Each card has: icon/image, H3 heading, description
  • Layout using Grid or Flexbox

5. Data Table (In-Page)

IMPORTANT: Table must contain product-specific data and appear in the page (not in a modal).

Choose ONE table type that fits your product:

  • Product specifications (technical details, dimensions, capabilities)
  • Feature comparison matrix (compare product tiers/versions)
  • Customer testimonials (reviews with ratings/dates)
  • Pricing breakdown (itemized costs or package details)

Requirements:

  • Table ID: data-table
  • Minimum 3 columns, 4-5 rows
  • Proper <thead> and <tbody> structure
  • Displayed in-page (not in modal)
  • Must be responsive

6. Contact Form

  • Form ID: contact-form
  • Name input (type: text, required)
  • Email input (type: email with HTML5 validation, required)
  • Message textarea (required)
  • Submit button ID: submit
  • All inputs have associated labels

7. Footer

  • Navigation links/sitemap
  • Copyright notice
  • Optional: social media links

CSS Requirements

Must Include:

1. One CSS Transform

Examples:

  • Button hover lift effect
  • Card scale on hover
  • Form field focus transform
  • Image rotation/scale

2. One CSS Animation

Examples:

  • Page load fade-in
  • Slide-up animation with stagger
  • Pulse animation on CTA button
  • Navigation link fade-in sequence

3. Responsive Design

  • At least one media query (recommended: 768px breakpoint)
  • Mobile-first or desktop-first approach
  • Flexible layouts that adapt to screen size

Submission Requirements

1. GitHub Repository

  • Name format: landing-page-[initials]-368
  • Must include README.md with:
    • Project description
    • Which CSS transform implemented
    • Which CSS animation implemented
    • Which table content type chosen
    • Challenges encountered and solutions
    • Key learnings

2. Deployed Live Site

  • Host on: Netlify, GitHub Pages, or Vercel
  • Site must be fully functional
  • No console errors

3. Figma Design File

  • Share link with view access
  • Must show complete design before implementation

4. Canvas Submission

  • Submit all three URLs (GitHub, live site, Figma)

Grading

Important: Design and code are graded separately.

Design Grade (Figma - Due Nov 24)

See Design Brief for detailed assessment criteria:

  • Visual Consistency & Design System (25%)
  • Layout & Hierarchy (25%)
  • Required Components (25%)
  • Interaction Design & Polish (15%)
  • Documentation & Presentation (10%)

Code Grade (HTML/CSS - Due Dec 3)

HTML Structure: 25%

  • Semantic HTML5 elements used appropriately
  • All required elements present with correct IDs/classes
  • Proper form and table structure
  • Valid HTML (W3C validator)
  • Proper heading hierarchy

CSS Implementation: 45%

  • Fixed navigation that stays at top
  • Responsive design with media queries
  • At least one transform implemented
  • At least one animation implemented
  • Form states styled (focus, valid, invalid)
  • Table styled and responsive (in-page display)
  • Implementation matches Figma design

Design & Polish: 20%

  • Visual consistency across sections
  • Smooth hover/focus interactions
  • Typography hierarchy and readability
  • Cohesive color scheme
  • Responsive behavior on multiple devices
  • Professional appearance

Deployment & Documentation: 10%

  • Live site functional and accessible
  • Clear, professional README
  • No console errors or broken links
  • All required URLs submitted

Common Pitfalls to Avoid

  1. Starting to code before completing Figma design
  2. Table not being product-specific (generic filler data)
  3. Table in a modal instead of in-page
  4. Forgetting to include required IDs and classes
  5. Not testing on multiple devices/screen sizes
  6. Skipping accessibility requirements (alt text, labels)
  7. Poor mobile form experience (too small, zooms on focus)
  8. Not using semantic HTML elements
  9. Inline styles instead of external CSS
  10. Not testing form validation
  11. Forgetting to document in README
  12. Deploying with console errors

Resources

Landing Page Fundamentals:

HTML/CSS Reference:

  • MDN Web Docs
  • CSS-Tricks
  • W3Schools

Accessibility Testing:

  • WAVE (WebAIM)
  • axe DevTools
  • Lighthouse (Chrome DevTools)

Validation:

  • W3C HTML Validator
  • W3C CSS Validator