✦ Chapter 1 — Vibecoding

If you can describe it,
you can build it.

Before you touch an AI, you need to know what you're asking for. This chapter teaches you to see any webpage as a set of named building blocks — then turn those blocks into a prompt that actually works.

"Build me a page with a navbar, hero section, and a card grid."

🧩

Step 01

Identify

Name the components

→

💬

Step 02

Prompt

Describe what you want

→

🚀

Step 03

Deploy

Ship it for free

// Step 01

Know your building blocks

Every webpage is made of the same reusable pieces. Click the ones you want → your prompt builds itself below.

✓

Navigation

Navbar

Top bar with logo and links

✓

Layout

Hero section

Big headline + CTA at the top

✓

Content

Card

Boxed content with title & text

✓

Input

Button

Clickable call-to-action

Get started

✓

Feedback

Toast

Brief popup notification

Saved successfully!

✓

Feedback

Modal

Popup dialog box overlay

✓

Input

Form

Fields + submit for user input

✓

Navigation

Sidebar

Side panel for navigation

✓

Content

Table

Data in rows and columns

✓

Layout

Footer

Bottom section with links

✓

Content

Badge / Tag

Small label to mark status

New Featured Free

✓

Navigation

Tabs

Switch between views

✓

Content

Image block

Image with caption text

🖼

✓

Feedback

Progress bar

Show completion status

60%

✓

Layout

Grid layout

Responsive multi-column grid

✓

Input

Search bar

Text input for searching

🔍

// Step 02

Your prompt, auto-built

Select components above → copy this prompt into Claude, ChatGPT, or any AI builder.

Generated prompt 0 components selected

← Pick components from above to generate your prompt.

// Step 03

Deploy for free

Once the AI builds your page, ship it live with one of these free platforms — no credit card needed.

▲

Vercel

Connect GitHub, deploy instantly. Great for React or HTML sites.

Free tier

🔥

Firebase

Google's platform. Free hosting + database to store real data.

Free tier

◆

Netlify

Drag & drop your folder to publish. Beginner-friendly.

Free tier

🐙

GitHub Pages

Free hosting for HTML/CSS/JS straight from a GitHub repo.

Always free

If you can describe it,you can build it.

If you can describe it,
you can build it.