Week 3: Style the Page and Add a Cart Section

Today you’ll build…

A styled product grid that looks more like an online store and a shopping cart section where selected items will appear later. You’ll take last week’s product card, improve how it looks, lay it out on the page, and set up the cart area for future interactivity.

By the end of this session, your page will:

• Display product cards side by side with clean spacing and padding
• Use fonts, colors, and images that are easy to read
• Include a cart section with a heading, placeholder message, item container, and total price area

To do that, you’ll learn…

• How to link a CSS file to an HTML page
• How to write basic CSS rules with:
  • Selectors (.product-card, .product-image, etc.)
  • Properties like color, padding, border-radius, font-size
• How to use display: flex to make a responsive product grid
• How to use semantic HTML to create sections of a page
• How to apply class names and IDs to prepare for styling and future JavaScript

By the end of today…

Each student will have a styled product grid and a cart section that looks something like:

<div>
  <h2 class="section-title">Your Cart</h2>
  <div class="cart-container">
    <p class="empty-cart" id="empty-cart-message">Your cart is empty.</p>
    <ul class="cart-items" id="cart-items"></ul>
    <div class="cart-total" id="cart-total"></div>
  </div>
</div>
 
<div class="product-grid">
  <div class="product-card">
    <img src="..." class="product-image" />
    <h2>Product Name</h2>
    <p>$19.99</p>
    <button class="add-to-cart-button">Add to Cart</button>
  </div>
  <!-- Add another product if time allows -->
</div>

With styles like:

.product-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}
 
.product-card {
  background-color: #f9f9f9;
  border-radius: 5px;
  padding: 15px;
  width: 250px;
  text-align: center;
}
 
.cart-container {
  background-color: #f9f9f9;
  padding: 20px;
  width: 80%;
  max-width: 600px;
  margin: 0 auto;
  text-align: left;
}

Agenda (1 hour total)

Instructor Notes

Setup

• Students should reuse their project from Week 2
• Ensure index.html includes the link to the styles.css file:

<link rel="stylesheet" href="styles.css" />

Instructor Live Coding Goals

• Demonstrate how to write CSS rules in styles.css
• Style .product-card and .product-grid step-by-step
• Show how to structure the cart section with semantic HTML
• Emphasize class-based styling and how styles apply to multiple elements
• Explain id usage for future JavaScript functionality

1:1 Mentor Goals

• Every student links their CSS file successfully

• Students style at least one product card to match the design

• Students add the cart section with correct structure and class names

• Encourage experimenting with:

  • Background colors
  • Border radius
  • Button colors and hover states

• If students finish early:

  • Adjust spacing and layout
  • Experiment with different styles
  • Explore CSS animations

Wrap-up and What’s Next

End by reinforcing:

• CSS makes your HTML look good — structure and style now work together
• The cart section is ready for interactive features later
• You now have the start of a product catalog with a place for items to appear

Preview:

“Next week, we’ll add real products using JavaScript — instead of copy/paste, the product cards will be generated for you and added to the cart.”