LearnBuildbeginner12 min

Style a card with CSS

The fast, skimmable path. See it, try it, open it in the editor.

You will build

A polished card component — rounded corners, padding, shadow, a styled button.

You will learn

The box model, a first taste of selectors, and how spacing and shadow create depth.

Open the full project in VS Code

Prerequisites

A browser. No prior CSS needed.

A card is the smallest piece of real UI. Here is the running project — the same one every CSS tier and the /code editor open. Read it, then tweak it.

project · css-card Open in Code

index.htmlHTML

1<article class="card">
2  <h2>Aurora</h2>
3  <p>A calm place to read and build.</p>
4  <button>Open</button>
5</article>

styles.cssCSS

1.card {
2  max-width: 320px;
3  padding: 24px;
4  border-radius: 16px;
5  background: #11151c;
6  color: #e7ecf3;
7  box-shadow: 0 12px 40px rgb(0 0 0 / 0.45);
8}
9.card button {
10  margin-top: 12px;
11  padding: 8px 16px;
12  border-radius: 9px;
13  border: 1px solid #2b3340;
14  background: #1b2230;
15  color: inherit;
16}

The card project — open it whole in Code

try yourself · css

Loading editor…

preview

Concepts covered · 2

CSSintroduced The box modelpracticed

Make a page respond: a click counter

A page becomes alive the moment JavaScript listens for an event and changes the page in response. Build a counter, then open it in /code.

Build·beginner·9 min

Build interaction with AI

The vibe-coder path for JS events: the event→state→render loop you must hold in your head, the prompt, and the review.

Build·beginner·8 min

Build a script with AI

The vibe-coder path for Python: the shape of a small program, the prompt, and the edge cases AI forgets.

Liked this one?

Pass it on

Share on X Follow on GitHub

Discussion

Be the first to ask

Your questions stay private with the team. We can pin answers to share with everyone.

No pinned answers yet for this tutorial.