Grid, Transforms & Animations Tutorial

Part A — Grid Foundation

Mark as complete

A1) Create the Grid Container

Goal: Create a responsive card grid that automatically adapts from 1 column on mobile to 3 columns on desktop.

You're building a gallery of CSS techniques where each card will showcase a different concept. Before we add content, let's master the grid layout that holds everything together.

Your task:

Create a container <div class="card-grid"> inside the .workspace element in the CodePen on the right
Add 6 empty <article class="card"> elements inside the grid
In style.css, apply CSS Grid to .card-grid:
- display: grid
- grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))
- gap: 2rem

Why this matters:

auto-fit automatically creates columns based on available space
minmax(250px, 1fr) means: "Each column is at least 250px, but can grow to fill space"
Cards will wrap to new rows when the viewport shrinks

💡 Temporary styling: Add this to your CSS so you can see the cards while you work:

.card {
  background: yellow;
  min-height: 200px;
  border: 1px solid #ddd;
}

📚 Research checkpoint:

Look up grid-template-columns on MDN. What does the fr unit stand for?

Read MDN: Basic concepts of grid layout
Read CSS Tricks: Complete Guide to Grid (focus on repeat() and minmax())

Hint:

To create a responsive grid without media queries, try using:

grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

Don't forget to set display: grid and a gap!

✅ Checkpoint A

.card-grid exists with display: grid
At least 6 .card elements inside the grid
Grid uses repeat(), auto-fit, and minmax()
Cards automatically wrap on narrow screens

🤔 Reflect (2–3 sentences):

Resize your browser window. At what width do cards start stacking? Why is auto-fit better than hardcoding grid-template-columns: 1fr 1fr 1fr?

Part B — Card Structure & Content

Mark as complete

B1) Build Semantic Cards

Goal: Build semantic, well-structured card components with content.

Now that your grid works, let's fill it with actual content. Each card will showcase a CSS technique—perfect for your landing page features section.

Your task:

Add content to each <article class="card">:
- A <div class="card-icon"> with an emoji or decorative element
- An <h3> with the technique name
- A <p> with a 2-3 sentence description
Create 6 cards with these topics:
- Grid Layout — "Organize content in flexible columns that adapt to any screen."
- Flexbox — "Align items perfectly within containers for navigation and layouts."
- Transforms — "Add depth and dimension with scale, rotate, and translate."
- Animations — "Bring your page to life with smooth, purposeful motion."
- CSS Variables — "Create reusable design tokens for consistent theming."
- Video Backgrounds — "Add dynamic visual interest with embedded video elements."

Card structure example:

<article class="card">
  <div class="card-icon">🎯</div>
  <h3>Grid Layout</h3>
  <p>Organize content in flexible columns that adapt to any screen size.</p>
</article>

3. Good news — the CSS is already written for you!

We've pre-written the card styles so you can focus on learning Grid and Animations. The CSS includes:

Clean white background using var(--card-bg)
Padding, border-radius, and box-shadow
Centered text and proper spacing
Styled icons, headings, and paragraphs

💡 Want to customize? Feel free to change the colors in the :root variables or adjust any of the card styles to match your personal aesthetic!

Solution Code:

.card {
  background: #ffffff;
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.card-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.card h3 {
  margin: 0 0 1rem;
  color: var(--primary-color, #3b82f6);
}

.card p {
  margin: 0;
  color: #666;
  line-height: 1.6;
}

B2) Use CSS Variables for Theming

Goal: Learn to use CSS custom properties (variables) for consistent, maintainable styling.

CSS Variables let you define reusable values once and reference them throughout your stylesheet. This makes it easy to create themes and update colors site-wide.

Your task:

At the top of your CSS, define variables in the :root selector:

:root {
  --primary-color: #6366f1;
  --secondary-color: #8b5cf6;
  --card-bg: #ffffff;
  --text-dark: #1f2937;
}

Update your .card styles to use these variables:
- background: var(--card-bg);
- color: var(--text-dark);
Use var(--primary-color) for your card headings
Bonus: Try changing one variable value and watch all cards update!

Why CSS Variables?

Change your entire color scheme by editing 4 lines
Create dark mode by overriding variables in a media query
More maintainable than find-and-replace

Hint:

Define variables at the top, then reference them with var():

:root {
  --primary-color: #6366f1;
}

.card h3 {
  color: var(--primary-color);
}

Try adding --card-shadow and using it for box-shadow!

✅ Checkpoint B

Each card has icon, heading, and description
Cards use <article> element
Cards have padding, border-radius, and box-shadow
CSS variables defined in :root
Variables used for at least 2 properties

🤔 Reflect (2–3 sentences):

Look at your card grid. Which card catches your eye first? Why? What makes a good feature card for a product landing page?

Part C — Transform Basics

Mark as complete

C1) Add Smooth Hover Effects

Goal: Add smooth hover effects using CSS transforms.

Static cards are fine, but interactive cards feel premium. Transforms let you scale, move, and rotate elements without affecting layout flow.

Your task:

Add a hover state to .card that scales up slightly:
- transform: translateY(-8px) scale(1.02)
- box-shadow should also grow on hover
Add a transition to make the change smooth:
- transition: transform 0.3s ease, box-shadow 0.3s ease

Why these transforms:

translateY(-8px) — Lifts the card up (feels like it's floating toward you)
scale(1.02) — Grows the card by 2% (subtle but noticeable)
Combined: Creates a "lift and grow" effect

📚 Research checkpoint:

Why do we use transform instead of changing width or top/left? (Hint: Performance)

Hint:

Use the :hover pseudo-class to change the transform property.

.card:hover {
  transform: translateY(-8px) ...;
}

Remember to add a transition to the base .card rule so the movement is smooth!

✅ Checkpoint C

Cards have smooth hover transition
Hover state uses transform property
Both translateY() and scale() are applied
Box shadow changes on hover

🤔 Reflect (2–3 sentences):

Hover over your cards. Does the interaction feel smooth? What would happen if you removed the transition property?

Part D — Transform Experimentation

Mark as complete

D1) Unique Hover Effects

Goal: Explore different transform combinations and make each card unique.

Right now all cards have the same hover effect. Let's add variety by giving specific cards unique transforms.

Your task:

Keep the basic hover on all cards
Add unique hover effects to the card icon using nth-child()

Example variations:

/* Card 1: Icon rotates */
.card:nth-child(1):hover .card-icon {
  transform: rotate(360deg);
  transition: transform 0.6s ease;
}

/* Card 2: Icon scales */
.card:nth-child(2):hover .card-icon {
  transform: scale(1.3);
  transition: transform 0.3s ease;
}

Experiment with:

Different rotation angles (180deg, -15deg)
Scale values (0.9 for shrink, 1.4 for big grow)
Multiple transforms combined
Different timing functions (ease-in-out, cubic-bezier())

Solution Code:

/* Unique icon hovers for variety */
.card:nth-child(1):hover .card-icon {
  transform: rotate(360deg);
  transition: transform 0.6s ease;
}

.card:nth-child(2):hover .card-icon {
  transform: scale(1.3);
  transition: transform 0.3s ease;
}

.card:nth-child(3):hover .card-icon {
  transform: translateY(-10px);
  transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.card:nth-child(4):hover .card-icon {
  transform: rotate(-15deg) scale(1.2);
  transition: transform 0.4s ease;
}

.card:nth-child(5):hover .card-icon {
  transform: scale(0.9) rotate(5deg);
  transition: transform 0.3s ease;
}

.card:nth-child(6):hover .card-icon {
  transform: rotateY(180deg);
  transition: transform 0.5s ease;
}

✅ Checkpoint D

At least 4 cards have unique icon hover effects
Different transform types are used (rotate, scale, translate)
Some cards combine multiple transforms
All transitions feel smooth

🤔 Reflect (2–3 sentences):

Which card hover effect feels most professional for a product landing page? Which feels too playful? Why?

Part E — Keyframe Animations

Mark as complete

E1) Create Entrance Animations

Goal: Create entrance animations using @keyframes so cards fade and slide in when the page loads.

Transforms are instant reactions to hover. Animations run automatically over time. Let's make your cards appear with style.

Your task:

Create a fade-in-up animation using @keyframes
Apply it to all cards with staggered delays
Set initial state so cards are invisible until animation runs

Step 1: Define the animation

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

Step 2: Apply to cards

.card {
  /* existing styles */
  animation: fadeInUp 0.6s ease forwards;
  opacity: 0; /* Start invisible */
}

Step 3: Stagger the delays

.card:nth-child(1) { animation-delay: 0s; }
.card:nth-child(2) { animation-delay: 0.1s; }
.card:nth-child(3) { animation-delay: 0.2s; }
/* ...and so on */

Why this works:

forwards keeps the final state (opacity: 1) after animation ends
Staggered delays create a "wave" effect
Cards appear in sequence, not all at once

📚 Research checkpoint:

What is the difference between ease, linear, and ease-in-out?

MDN: animation-timing-function

Hint:

First, define your keyframes:

@keyframes fadeInUp {
.card:nth-child(5) { animation-delay: 0.4s; }
.card:nth-child(6) { animation-delay: 0.5s; }

✅ Checkpoint E

@keyframes fadeInUp animation exists
Cards fade in from invisible to visible
Cards slide up while fading in
Each card has a different animation-delay
Final state persists (cards stay visible)

🤔 Reflect (2–3 sentences):

Refresh the page and watch your cards animate in. Does the timing feel right? Too slow? Too fast? What would you change for a real product page?

Part F (Optional) — Animation Polish & Accessibility

Mark as complete

F1) Respect Reduced Motion

Goal: Respect user preferences and add finishing touches to your animations.

Not everyone wants animations. Users can set a system preference for reduced motion—we should respect it.

Your task:

Wrap your animations in a media query that checks for motion preference
Add a subtle pulse animation to one card to draw attention (optional)

/* Default: no animation */
.card {
  opacity: 1;
  /* existing styles */
}

/* Only animate if motion is okay */
@media (prefers-reduced-motion: no-preference) {
  .card {
    animation: fadeInUp 0.6s ease forwards;
    opacity: 0;
  }
  
  /* Add delays here too */
}

📚 Research checkpoint:

Why is prefers-reduced-motion important for accessibility?

Solution Code:

/* Default: fully visible, no animation */
.card {
  /* ... */
  opacity: 1;
}

/* Animations only if user hasn't requested reduced motion */
@media (prefers-reduced-motion: no-preference) {
  @keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .card {
    animation: fadeInUp 0.6s ease forwards;
    opacity: 0;
  }

  .card:nth-child(1) { animation-delay: 0s; }
  /* ... other delays ... */
}

✅ Checkpoint F

Animations wrapped in @media (prefers-reduced-motion: no-preference)
Cards still visible without animation
Tested with reduced motion enabled

🤔 Reflect (2–3 sentences):

Enable reduced motion in your system settings and refresh the page. What happens? Why is this better than just making animations faster or shorter?

📤 Submission

What to submit

Click "Copy All Reflections" below.
Paste the reflections into your CodePen (HTML tab).
Fork the Pen to save your work.
Submit your Pen URL to Canvas.

CSS Feature Gallery

What You'll Build

Part A — Grid Foundation

A1) Create the Grid Container

Hint:

✅ Checkpoint A

🤔 Reflect (2–3 sentences):

Part B — Card Structure & Content

B1) Build Semantic Cards

Solution Code:

B2) Use CSS Variables for Theming

Hint:

✅ Checkpoint B

🤔 Reflect (2–3 sentences):

Part C — Transform Basics

C1) Add Smooth Hover Effects

Hint:

✅ Checkpoint C

🤔 Reflect (2–3 sentences):

Part D — Transform Experimentation

D1) Unique Hover Effects

Solution Code:

✅ Checkpoint D

🤔 Reflect (2–3 sentences):

Part E — Keyframe Animations

E1) Create Entrance Animations

Hint:

✅ Checkpoint E

🤔 Reflect (2–3 sentences):

Part F (Optional) — Animation Polish & Accessibility

F1) Respect Reduced Motion

Solution Code:

✅ Checkpoint F

🤔 Reflect (2–3 sentences):

📤 Submission

What to submit

Your Workspace