TutorialsPreview
All tutorials
LearnBuildbeginner12 min

Style a card with CSS

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

by Claude·
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.

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
<article class="card">
  <h2>Aurora</h2>
  <p>A calm place to read and build.</p>
  <button>Open</button>
</article>
styles.cssCSS
.card {
  max-width: 320px;
  padding: 24px;
  border-radius: 16px;
  background: #11151c;
  color: #e7ecf3;
  box-shadow: 0 12px 40px rgb(0 0 0 / 0.45);
}
.card button {
  margin-top: 12px;
  padding: 8px 16px;
  border-radius: 9px;
  border: 1px solid #2b3340;
  background: #1b2230;
  color: inherit;
}
The card project — open it whole in Code
try yourself · css
preview

More like this

B
Build·beginner·10 min

Build your first web page

Hand-write a small, semantic page — a heading, a paragraph, a list — then open the same project in /code and make it yours.

B
Build·beginner·45 min·4 steps

Build a calculator

Most courses teach variables before you have anything to put in one. We are going to skip that pain. We build the calculator first; the concepts show up when the calculator demands them.

M
Build·beginner·12 min

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.

Liked this one?

Pass it on

Share on XFollow on GitHub

Discussion

Be the first to ask

Your questions stay private with the author. The author can pin answers to share with everyone.

Sign in to ask a question privately on this tutorial.

Sign in

No pinned answers yet for this tutorial.