Zero to Hero path · Stage 1 of 4

0%

SKIP TO CONTENT

What is Vibe Coding? Build Something in 10 Minutes

beginner~10 min0/4 steps

What is Vibe Coding?

Vibe coding is simple: you describe what you want, and AI builds it.

No syntax memorization. No Stack Overflow rabbit holes. You're the architect — you describe the vision, the AI lays the bricks. In this first lesson, you'll build a personal profile card just by writing HTML. You'll understand what AI is actually generating when you talk to it, and you'll ship something real in under 10 minutes.

Instructions

1

Add an <h1> with your name — this is YOUR profile card

Hint: Try: `<h1 class="text-2xl font-bold text-white text-center mb-2">Your Name</h1>`

2

Add a <p class="bio"> with one sentence about what you do or who you are

3

Add a <ul class="skills"> with 3 <li> items — what are you good at?

4

Add an <a class="cta-link"> button at the bottom — a link people can click to connect with you

Your Code

html
21 lines
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

Live Preview

Live Preview