10 Multimedia · 2026
Week 8 · Lesson 16

Projects Section — Cards, Gallery, Image Treatment

Week 8 · 75 minutes · Year 10 Industrial Technology — Multimedia

IND5-2IND5-3IND5-4IND5-6

Learning intentions

  • I can build a reusable card component.
  • I can optimise images for the web (compression and format).
  • I can build a grid gallery of projects.

Success criteria

  • I have at least 3 project cards on my portfolio.
  • Each card has an image, title, description, and link.
  • All card images are under 200KB.

Do Now · 5 min

Count cards: open TikTok, Pinterest, or Instagram. Almost every modern feed is cards. Why?

Cards are a UI pattern that works because: they chunk information, they are scannable, they are reusable, they are responsive-friendly.

I Do · ~10 min Teacher demonstration

Teacher builds one card component in HTML:

<article class="project-card">
  <img src="project1.jpg" alt="Screenshot of my first game">
  <div class="project-card-body">
    <h3>Escape the Island</h3>
    <p>A puzzle game built in Unity for my Game On class.</p>
    <a href="project-1.html">See more →</a>
  </div>
</article>
.project-card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  transition: transform 0.2s;
}
.project-card:hover { transform: translateY(-4px); }
.project-card img { width: 100%; height: 200px; object-fit: cover; }
.project-card-body { padding: 1.5rem; }

Then duplicate to 3 cards, wrap in a grid:

.project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}
Image optimisation:
  • Use Squoosh.app to compress before uploading
  • JPG for photos. PNG for graphics with transparency. WebP for modern browsers.
  • Aim for under 200KB per image
  • Resize to actual display size (don't use 4000px wide if it will display at 400px)

We Do · ~15 min Guided build

Together, build a 3-card row. Then resize the window — watch the grid automatically wrap. That's auto-fit + minmax magic.

You Do · ~35 min Independent practice

Build your projects section:

  1. Think of 3 "projects" to feature. They can be: a past school project, a game you played a lot, a sport you do, a creative piece you made, your Term 1 app idea, a hobby.
  2. Find or make 3 images. Compress each with Squoosh to under 200KB.
  3. Build 3 cards using the exemplar pattern
  4. Wrap in a grid
  5. Test on phone (should stack) and desktop (should be 3-across)
  6. Alt text on every image!

Differentiation

Support

Card HTML/CSS template provided. Student duplicates and fills in content. Teacher helps with image compression.

Core

Build cards from scratch using L10 flexbox or CSS Grid.

Extension

Add a filter system: use HTML/CSS only (radio buttons + :checked selector) to filter cards by category. No JavaScript needed.

Exit Ticket · 5 min

Exit ticket

Paste 3 project titles from your portfolio:

1. __________________________

2. __________________________

3. __________________________

Your total image file size (all 3 images combined): _____ KB

Resources for this lesson

📚 Deeper Reading

External references drawn from Shay Howe's "Learn to Code HTML & CSS" and University of Michigan's "Web Design for Everybody" Coursera specialization. All credit to original authors.