Challenge 3 of 5

Challenge 3: Create a card

The visual building block of every modern UI.

0 of 5 complete 3/5 ✓ Completed

What you're building

Build a rounded, padded container with a subtle shadow. Cards are the lego piece of modern web design — once you can make one, you can make a feed, a dashboard, a portfolio.

How the editor knows you're done

The code mentions card as a class name, or uses border-radius anywhere in CSS.

A starting point

Drop this into the HTML panel:

<div class="card">
  <h3>A tidy card</h3>
  <p>It has padding, a border, and a shadow.</p>
</div>

And this into the CSS panel:

.card {
  padding: 20px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

Now duplicate the <div class="card"> a few times. Congratulations — that's a feed.

Open in editor → Back to all challenges →