Responsive Media and Media Integration Review Exercise

Campus Café Specials: Responsive Promo Cards

Purpose (read this first):

This is a confidence-building review—not a trick and not a “gotcha.” You already learned these skills across 12 lessons. This exercise simply helps you connect them in one realistic build, so you can quickly see what you know and what to review before the exam.

Grading (Completion / Review Credit):

This is graded pass/fail for review credit.

• Pass (full points): mostly complete and clearly demonstrates the main responsiveness decisions (see “Minimum Pass Version”).

• Fail (no points): mostly incomplete or missing the core responsiveness decisions.

Time

• This will vary by student, but it should take you about 60 minutes to complete. It will take more if you need to go back and consult the previous lessons.

What You’re Building

A single page called “Campus Café Specials” with:

1. A responsive grid of 6 Promo Cards (main content area)

2. A sidebar column that displays the same Promo Card component in a narrow container (to prove container responsiveness)

Each Promo Card must include:

• A responsive image

• A small SVG badge (ex: “NEW”, “VEGAN”, “SPICY”)

• A title + short description

• An action button

• One media element: audio OR video (your choice)

Visual Reference

Expectations

Don't worry about “fancy design.” Use simple baseline styles:

• clear spacing (padding/gap)

• visible card borders

• consistent type hierarchy

• images do not stretch

Multiple correct solutions are possible. 

Workflow

The 12 Moves Checklist (Do in order)

Each move maps to a lesson. If you get stuck, the “Review” line tells you exactly where to go.

Move 1 — Build the page structure

Create a header, a main grid section, and a sidebar test section. Review: Lesson 2 (Responsive design is a decision)

Move 2 — Make the grid intrinsically responsive (Grid chooses columns)

Your grid should automatically adjust how many cards fit per row. Review: Flexible Fitting in CSS Grid + Grid Responsiveness

Move 3 — Set a minimum card width (don’t let cards become tiny)

Cards should stop shrinking before readability collapses. Review: Flexible Fitting in CSS Grid 

Move 4 — Add fluid spacing (smooth scaling)

Use a fluid approach so spacing scales smoothly (not only snapping). Review: Fluid Layouts

Move 5 — Add exactly ONE media query (page/viewport decision)

Use one MQ for a global layout change (header layout, overall padding, etc.). Review: Responsive Design is a Decision + Media Queries Revisited

Move 6 — Make the card layout responsive inside itself (Flexbox helps)

Inside the card, use layout rules so content aligns and reflows cleanly. Review: Responsiveness Inside Layouts

Move 7 — Add a container query (component responds to its container)

The Promo Card must change layout when placed in the narrow sidebar container. Review: Container Queries

Move 8 — Make images responsive (no distortion)

Images should scale with the card and keep correct proportions. Review: Responsive Images and Media

Move 9 — Choose ONE: picture OR srcset + sizes

• Choose picture if you want different crops/art direction

• Choose srcset + sizes if you want resolution switchingWrite 1 sentence: “I chose ____ because ____.”

Review: Responsive Images and Image Types

Move 10 — Responsive typography (readable at all sizes)

Use a responsive strategy (ex: fluid sizing) so type stays readable.

Review: Responsive Typography

Move 11 — Add an SVG badge that scales + can be styled

SVG should scale cleanly and be styleable with CSS (inline SVG preferred).

Review: SVGs

Move 12 — Add media accessibly (audio OR video)

Pick one:

• Audio with controls + a short text fallback/transcript stub, OR

• Video with controls + a caption/track stub (or clear fallback text)

Review: Audio and Video on the Web

If You Get Stuck

1. Get the grid working first (Moves 2–3).

2. Make one card look correct (Moves 6, 8, 10).

3. Prove the sidebar container change (Move 7).

4. Add one MQ (Move 5).

5. Add the “extras” (Moves 9, 11, 12).

Minimum Pass Version (This = PASS)

To earn full completion credit, you must complete:

• Moves 1–7 (structure + grid + MQ decision + container query decision)

• Move 8 (basic responsive image behavior)

• Move 10 (responsive typography)

Moves 9, 11, 12 are strongly recommended—do them if you have time.

What to Submit

1. Screenshots showing:

   1. wide view

   2. narrow view

   3. sidebar container view (same card in a narrow container)

2. A 12-line checklist (one sentence per move: what you did + why). You can add this in the text entry on Canvas.

Quick Confidence Check

If your page:

• adjusts columns naturally,

• uses one media query intentionally,

• changes the card layout via container query in the sidebar,

• keeps images + type readable…

  
  

…you’re in very good shape for the exam.