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

Your first Python program

Python reads almost like English. Write a small converter, see its output, and open the project in /code to keep editing.

Build·beginner·8 min

Build a program with AI

The vibe-coder path for Go: the idioms you must recognise, the prompt, and the review that catches dropped errors.

Build·beginner·14 min

Your first C++ program

C++ trades a little ceremony for a lot of speed and control. Write a first program, learn the compile-then-run cycle, and open it in /code.

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.