Skip to Content
🤝 Want to bring tech2elevate to your company or school? Partner with us
CurriculumWeek 2Lesson

Week 2: Build a Product Card with HTML

Today you’ll build…

A product card, the first building block of your shopping cart. It will include:

  • A product name
  • A product image
  • A price
  • A button labeled “Add to Cart”

This structure sets the foundation for future styling and functionality.

To do that, you’ll learn…

  • What HTML is and how it defines page structure
  • How to create a basic HTML file
  • How to use these HTML elements:
    • <!DOCTYPE html>, <html>, <head>, <body>
    • <div>, <h2>, <p>, <img>, <button>
  • How to use class and id attributes for styling and scripting
  • How to nest elements properly and stay organized

By the end of today…

Each student will have a basic HTML page that displays at least one product card, similar to:

<div class="product-card">
  <img src="..." alt="Product name" class="product-image" />
  <h2>Product Name</h2>
  <p>$19.99</p>
  <button class="add-to-cart-button">Add to Cart</button>
</div>

And this will be wrapped inside a product grid container:

<div class="product-grid">
  <!-- product cards go here -->
</div>

Agenda (1 hour total)

TimeActivity
5 minWarm-up question: “What’s something fun you’ve bought online?”
15 minInstructor walkthrough: set up index.html, create one product card
30 minStudents build their own with 1:1 mentor support
10 minWrap-up and what’s next

Instructor Notes

Setup

  • Students should create a folder with:
    • index.html
    • styles.css (leave empty for now)
    • script.js (leave empty for now)

This week focuses only on index.html.

Instructor Live Coding Goals

  • Build a single product card from scratch, explaining each tag
  • Emphasize semantic structure and visual hierarchy
  • Encourage questions about nesting and element purpose

1:1 Mentor Goals

  • Every student completes one working product card

  • Reinforce best practices:

    • Use of consistent indentation
    • Proper nesting of tags
    • Use of class for styling elements

  • If students finish early:

    • Add a second card
    • Customize product details

Wrap-up and What’s Next

Close the session by reinforcing:

  • HTML is the backbone of every web page
  • We now have structure, next week we’ll make it visually appealing with CSS

Preview:

“Next week, you’ll style your product cards to look like real store items using CSS. The product grid will come to life.”

Last updated on
KickoffCheat Sheet