Let's Build Something Real

Time for your first win. In the next 10 minutes, you'll create a real web page that runs in your browser. This isn't a toy example — it's the same process you'll use to build complex apps.

🎯 What We're Building

A personalized greeting page with your name, styled beautifully, running on your computer. Simple but satisfying.

Step 1: Create Your Project Folder

Open your terminal and run:

$ mkdir hello-world
$ cd hello-world

Step 2: Start Claude Code

Launch Claude in this folder:

$ claude

Step 3: Ask Claude to Build It

Type this prompt (replace "Shravan" with your name):

Create a beautiful HTML page that says "Hello, Shravan! Welcome to Vibe Coding." Make it centered on the page with a gradient background from dark blue to purple. Add a subtle animation to the text. Use modern CSS. Save it as index.html.

Step 4: View Your Creation

Once Claude creates the file, open it in your browser:

# On Mac:
$ open index.html
# On Windows:
$ start index.html
# On Linux:
$ xdg-open index.html

🎉 You Did It!

You just built a web page without writing a single line of code yourself. That animated, gradient-background page? You described it in plain English, and Claude made it real.

Bonus: Make Changes

The real power of vibe coding is iteration. Try asking Claude to modify your page:

"Change the gradient to orange and red"

"Add a button that says 'Click me' and shows an alert when clicked"

"Make the text bigger and add my photo from this URL: [paste a URL]"

💡 The Pattern

This is the core loop of vibe coding: Describe → Generate → View → Iterate. Every project you build will follow this same pattern, whether it's a simple page or a complex application.