03

first build

time to build something. follow these steps — by the end you'll have a working app on your screen.

1

open your AI tool

open your terminal. if you followed the setup steps, you should already be inside your my-first-app folder on your Desktop. if not, run these first:

terminal
cd ~/Desktop/my-first-app

then start your AI coding tool:

terminal
claude

(or codex if you chose OpenAI Codex in the setup step.)

you should see a prompt waiting for you to type something. that means it's ready.

2

pick an idea

don't overthink this. just pick something small and fun. you can always build something bigger later. here are some ideas — pick one or come up with your own:

Build me a personal website with my name, a bio, and links to my socials
Build me a countdown timer app for my next birthday
Build me a simple to-do list app
Build me a quiz app about [topic you love]
3

type your prompt

now just type what you want to build. describe it like you're texting a friend who happens to be a really good programmer. be as specific as you can — the more detail you give, the better the result.

~/Desktop/my-first-app

~/my-first-app $ claude

╭──────────────────────────────────────────╮

Claude Code

╰──────────────────────────────────────────╯

> Build me a personal website with my name, a short bio,

and links to my Twitter, GitHub, and Instagram.

Make it dark themed with a clean minimal design.

thinking...

this is what it looks like when you give the AI a prompt

press enter and watch it go. the AI will start creating files and writing code. you'll see it happening in real time in your terminal. just let it cook — it usually takes 30 seconds to a couple minutes depending on what you asked for.

4

see your app

the AI just built your app. now you need to actually see it. your app lives on your computer — to view it, you need to run it and open it in your browser (Chrome, Safari, Firefox, whatever you use).

tell the AI to run it

the AI doesn't always start your app automatically after building it. so the first thing to do is just ask:

terminal
run the app so I can see it in my browser

the AI will start a local server and give you a link. you'll see something like this show up in your terminal:

terminal
Local:   http://localhost:3000

wait, what's localhost?

normally when you visit a website, you type something like google.com. but your app isn't on the internet yet — it's running on your computer. localhost is just a special address that means “the website running on my own machine right now.”

the :3000 part at the end is like a door number. your app picks a door to run behind. it could be :3000, :5173, :8080 — the AI will tell you which one it picked.

open it in your browser

copy that http://localhost:... URL from your terminal, open your browser, paste it into the address bar, and hit enter. you should see your app. you can also Cmd-click (Mac) or Ctrl-click (Windows/Linux) the link directly in your terminal to open it automatically.

if you don't see a link

sometimes the AI builds the app but doesn't start the server. that's fine — just ask it directly:

terminal
start the dev server

or:

terminal
how do I preview this in my browser?

it'll figure out the right command, run it, and give you the URL.

for simple html apps

if your app is just an HTML file (no server needed), you don't even need localhost. just go to your my-first-app folder on your Desktop, find the index.html file, and double-click it. it'll open right in your browser.

seeing a blank page or an error? totally normal. just tell the AI what you see: “I see a blank white page” or “I'm getting an error that says [paste the error].” it'll fix it.

5

make changes

don't like something? just tell the AI. go back to your terminal and type what you want changed. you're the creative director. some examples:

make the background darker
add more spacing between sections
this button doesn't work, can you fix it?
change the font to something more modern
add a section for my favorite projects
make it look better on mobile

after each change, refresh your browser (Cmd+R on Mac, Ctrl+R on Windows/Linux) to see the update. keep going until you love it.

the whole loop:

1type what you want
2AI builds it
3check it in your browser
4tell it what to change
5repeat until you love it

there's no wrong way to do this. the more specific you are, the better. “make it look cooler” works, but “make the header bigger, add a purple gradient, and center everything” works even better.

if something isn't working:

copy the entire error message and paste it straight into the AI. don't try to summarize it — the full error gives the AI the context it needs to fix it. it might take a couple of tries, but it'll usually figure it out.