Skip to Content
🤝 Want to bring tech2elevate to your company or school? Partner with us
CurriculumWeek 3Cheat Sheet

Week 3 Cheatsheet: Styling & Cart Section

What You’re Building

  • A product grid with styled product cards
  • A cart section with a title, placeholder, list, and total area

CSS Concepts You’ll Use

  • Selectors: .class, element, #id
  • Properties: padding, margin, border-radius, font-size, background-color
  • Layout: display: flex, flex-wrap, gap, justify-content

HTML Tags You’ll Use

<section>
  <h2><!-- Section title --></h2>
  <div>
    <p><!-- Empty cart message --></p>
    <ul>
      <!-- List of cart items -->
    </ul>
    <div><!-- Cart total --></div>
  </div>
</section>
 
<div class="product-grid">
  <div class="product-card">
    <img />
    <h3><!-- Product name --></h3>
    <p><!-- Product price --></p>
    <button><!-- Add to Cart --></button>
  </div>
</div>

Example CSS Snippets

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

Tips to Remember

  • Always link your CSS in <head>: <link rel="stylesheet" href="styles.css" />
  • Use classes for styling, IDs for JS hooks later
  • display: flex + gap = easy responsive layouts
  • Duplicate product cards instead of rewriting from scratch
  • Start simple → adjust colors, spacing, borders if you have time
Last updated on
LessonLesson