Code Requirements: Product Landing Page Phase 2: Implementation

HTML/CSS implementation guide and technical specifications

Due Date: Tuesday, December 3
What's Graded: Your code implementation (separate from design grade)

About This Phase

You've completed your Figma design—now it's time to bring it to life with HTML and CSS.

Your Figma design is your roadmap. Reference it constantly as you code. The closer your implementation matches your design, the better your final result.

Page Structure: Semantic HTML

Your landing page should use semantic HTML5 elements to create a clear, accessible structure.

Required Outer Structure

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Your Product Name</title>
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>
  <header id="header">
    <!-- Navigation goes here -->
  </header>

  <main>
    <!-- All your main content sections go here -->
  </main>

  <footer>
    <!-- Footer content goes here -->
  </footer>
</body>
</html>

Inside <main>: Use Sections

Break your content into logical <section> elements:

<main>
  <section id="hero">
    <!-- Hero content -->
  </section>

  <section id="video">
    <!-- Embedded video -->
  </section>

  <section id="features">
    <!-- Feature cards using <article> elements -->
  </section>

  <section id="data">
    <!-- Product data table -->
  </section>

  <section id="contact">
    <!-- Contact form -->
  </section>
</main>
Note: Video placement is flexible—place it where it makes sense in your design (could be in hero, its own section, or elsewhere).

Understanding <article> vs <section>

Use <section> for:

  • Thematic groupings of content
  • Major page divisions
  • Content with a heading
  • Example: Features section, Contact section

Use <article> for:

  • Self-contained, independent content
  • Content that could stand alone
  • Reusable components
  • Example: Feature cards, testimonials
Rule of thumb: If the content could be pulled out and used somewhere else independently → use <article>

Example: Features Section with Articles

<section id="features">
  <h2>Features</h2>

  <article>
    <img src="icon1.png" alt="Feature icon">
    <h3>Feature Name</h3>
    <p>Feature description...</p>
  </article>

  <article>
    <img src="icon2.png" alt="Feature icon">
    <h3>Feature Name</h3>
    <p>Feature description...</p>
  </article>

  <article>
    <img src="icon3.png" alt="Feature icon">
    <h3>Feature Name</h3>
    <p>Feature description...</p>
  </article>
</section>

Learn more: MDN - <article> vs <section> →

Required Elements

Your landing page must include all of the following elements with the specified IDs and classes.

1. Header/Navigation

Requirements:

  • Fixed-position header (stays at top when scrolling)
  • Header element with id="header"
  • Logo/brand image with id="header-img"
  • Navigation element with id="nav-bar"
  • Minimum 3 navigation links with class="nav-link"
What you implement: How your Figma design shows the navigation.

2. Hero Section

Requirements:

  • H1 headline (your product's value proposition)
  • Subheading/supporting text
  • Primary call-to-action button

3. Video/Media Section

REQUIRED: Embed a video related to your product.

Requirements:

  • Embedded video with id="video"
  • Can use YouTube/Vimeo <iframe> OR HTML5 <video> element
  • Must be responsive (scales on mobile)

Embedding a YouTube video:

<iframe
  id="video"
  width="560"
  height="315"
  src="https://www.youtube.com/embed/VIDEO_ID"
  title="Product video"
  frameborder="0"
  allowfullscreen>
</iframe>

Making video responsive:

  • Wrap in a container with max-width
  • Maintain 16:9 aspect ratio
  • Consider width: 100%; height: auto; for simple scaling

4. Features Section

Requirements:

  • Minimum 3 feature cards
  • Each feature uses <article> element
  • Each feature has: icon/image, H3 heading, description text
  • Layout using CSS Grid or Flexbox

5. Data Table (In-Page)

IMPORTANT: Table appears in the page (not in a modal). Modal implementation is a stretch goal.

Requirements:

  • Table with id="data-table"
  • Contains product-specific data (specs, pricing, comparisons, testimonials)
  • Minimum 3 columns, 4-5 rows
  • Proper structure with <thead>, <tbody>, <th>, and <td>
  • <th> elements have scope attribute
  • Responsive on mobile

6. Contact Form

Requirements:

  • Form with id="contact-form"
  • Name input (type="text", required)
  • Email input (type="email", required - HTML5 validation)
  • Message textarea (required)
  • Submit button with id="submit"
  • All inputs have associated <label> elements
  • Form has action attribute (can use placeholder URL)

7. Footer

Requirements:

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

CSS Requirements

Must Include:

1. One CSS Transform

Add visual interest with a transform effect. Examples:

  • transform: translateY(-4px) - Button hover lift effect
  • transform: scale(1.05) - Card scale on hover
  • transform: rotate(45deg) - Icon rotation

2. One CSS Animation

Create motion with a @keyframes animation. Examples:

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

3. Responsive Design

Your page must work on multiple screen sizes:

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

4. Form Styling

  • Clear :focus states
  • Validation state styling (:invalid, :valid)
  • Mobile-friendly (16px min font size to prevent iOS zoom)
  • Distinct hover states on buttons

5. Table Styling

  • Border-collapse or border styling
  • Differentiated header row
  • Mobile responsive strategy (scroll, stack, or hide columns)
  • Optional: zebra striping, hover states

Accessibility Requirements

Required:

  • All images have descriptive alt attributes
  • Form inputs have associated labels (explicit or implicit)
  • Visible focus states on all interactive elements
  • Semantic HTML with proper heading hierarchy (H1 → H2 → H3)

Deployment & Submission

1. Deploy Your Site

Deploy your site as usual:

  • Upload all files and associated assets to a week-9 folder in your GitHub workspace
  • Link to your landing page from your course homepage (index.html)

2. Create a project README.md in your week-9 folder

Your README must include:

  • Project description
  • Which CSS transform you implemented
  • Which CSS animation you implemented
  • Which table content type you chose
  • Minimum 3 challenges that you overcame
  • 5 key things that you learned during this project

3. Submit to Canvas

Submit all three URLs:

  • GitHub repository URL
  • Live site URL
  • Figma design file URL

Before You Submit

  • ☐ HTML validates (W3C HTML Validator)
  • ☐ CSS validates (W3C CSS Validator)
  • ☐ All required IDs and classes present
  • ☐ Fixed navigation works (stays at top when scrolling)
  • ☐ Video embeds and plays
  • ☐ Table displays in-page (not in modal)
  • ☐ Form has all required fields with labels
  • ☐ At least one transform implemented
  • ☐ At least one animation implemented
  • ☐ Responsive on mobile (test at 375px, 768px, 1440px)
  • ☐ All images have alt text
  • ☐ No console errors
  • ☐ Site deployed and live
  • ☐ README completed