Zero to Hero path · Stage 1 of 4

0%

SKIP TO CONTENT

Style With Words: Make It Beautiful

beginner~12 min0/4 steps

Style With Words: Make It Beautiful

Here's the secret nobody tells you: when you vibe code, you don't style with code — you style with adjectives.

You don't memorize CSS properties. You describe the look you want, the way you'd brief a designer: with feelings, adjectives, and references. "Dark, glassy, premium — like a music app." The AI translates the vibe into classes.

Watch one real example.

You say:

"Make my profile card dark and glassy, with soft rounded corners and a premium feel — like Spotify's now-playing screen."

The AI produces:

<body class="bg-gradient-to-br from-slate-950 to-indigo-950 text-white">
  <div class="bg-white/10 backdrop-blur-md border border-white/20 rounded-2xl p-8">

Every adjective became a class:

  • darkbg-gradient-to-br from-slate-950 to-indigo-950
  • glassybg-white/10 backdrop-blur-md border border-white/20
  • premium, soft cornersrounded-2xl p-8

That's the whole trick: adjectives in, classes out. The better your references ("like a music app", "like a bank's landing page", "like a neon arcade"), the better the result.

Below is your profile card from the last lesson — stripped of all styling. Plain white background, default text, zero vibe. Your mission: bring it back to life, one described look at a time.

Instructions

1

Give the <body> a dark gradient background — describe the vibe to yourself first: dark, deep, premium. Then add the classes

Hint: Try: `<body class="bg-gradient-to-br from-slate-950 to-indigo-950 text-white min-h-screen flex items-center justify-center p-8">`

2

Style the card container: frosted glass, soft rounded corners, generous padding — that 'glassy, premium' look

3

Turn the CTA link into a gradient button — bold, colorful, impossible to miss

4

Add a hover effect so the button reacts when the mouse touches it — small details make things feel alive

Your Code

html
30 lines
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

Live Preview

Live Preview