Your First App in 10 Minutes.

Walk through building a real app by describing what you want. No code knowledge needed. Just words.

After this lesson you'll know

How to describe an app to AI so it builds what you actually want
The step-by-step process of going from idea to working app
How to review and refine what AI builds
What a real vibe coding session looks and feels like

The Build

We are building a gratitude journal app.

Here is the plan: a simple web app where you write three things you are grateful for each day, see your past entries, and feel good scrolling through them. It is small enough to build in 10 minutes but real enough to actually use.

We are going to walk through this step by step. You will see the exact prompts, the decisions you make along the way, and how the conversation with AI unfolds. Follow along in your own AI coding tool if you want to build it live.

Step-by-Step

The vibe coding process, live.

Step 1: Describe the big picture (30 seconds)

Start with one clear sentence about what you are building. Do not over-explain. Just the core idea.

Your first prompt

Build a gratitude journal web app. Each day, the user
writes 3 things they are grateful for. They can scroll
through past entries. Clean, minimal design with a
warm color palette. Store entries in the browser's
local storage.

That is it. Five lines. No technical jargon. Just a clear description of what you want. The AI takes this and generates a complete working app — HTML, CSS, JavaScript, the whole thing.

Step 2: Review what AI built (2 minutes)

Look at the result. Open it in the preview. Does it look right? Does it work? Click around. Try adding an entry. You are the quality checker here. Not the coder — the user.

Step 3: Refine with follow-up prompts (5 minutes)

The first version is rarely perfect. That is normal. Now you refine. Each follow-up prompt makes it better.

Refinement prompts — send these one at a time

Make the text input bigger and add placeholder text
that says "What are you grateful for today?"

Add the date as a header for each day's entries.

Add a small animation when a new entry is saved —
something gentle, like a fade-in.

The background color is too bright. Use a soft cream
or warm off-white instead.

Step 4: Test it like a real user (2 minutes)

Add a few entries. Refresh the page — are your entries still there? Try it on your phone. Show it to someone. Does it make sense to a person who has never seen it before?

🔒

This lesson is for Pro members

Unlock all 355+ lessons across 36 courses with Academy Pro. Founding members get 90% off — forever.

Go Pro — $4.90/mo ← Back to course

Already a member? Sign in to access your lessons.