Programming · Lesson 2 of 7
Your First App with Claude
The best way to learn programming is to build something real.
After This Lesson, You Will Be Able To
Build a working, functional web application using Claude as your coding partner — from idea to running in a browser.
The Mindset for Building with AI
This back-and-forth iteration is how real software is built — even by professional developers.
What to Build for Your First Project
Good first project criteria
Scope: something you can describe in 10 sentences or less. Output: produces something visible in a browser. Usefulness: something you'd actually use or show someone. Examples: a tip calculator, a to-do list, a quiz app, a personal budget tracker, a simple portfolio page.
Avoid for your first project
Anything requiring user accounts, payments, or database integration. These add significant complexity. Your first project should demonstrate that you can build something — not that you can build everything.
The Step-by-Step Build Process
Step 1: Describe the full spec
Tell Claude exactly what you want to build: what it looks like, what the user can do, what happens when they interact with it. Be specific. 'Build a tip calculator where the user enters a bill amount and selects 10%, 15%, or 20%, and it shows the tip and total amounts.' That's specific enough to build.
Step 2: Run the code
Copy the HTML/CSS/JavaScript Claude provides into a file called index.html. Open it in a browser. See if it works. If it does, great. If it doesn't, copy the error message back to Claude and ask it to fix it.
Step 3: Iterate
Add one feature at a time. 'Now add a field for the number of people and split the bill equally.' Tell Claude what's broken or missing. Each iteration teaches you how the code works by watching it change.
Exercise
~10 minutes · ChatGPT or Claude
Prompt to use
Build me a [describe your app — tip calculator / to-do list / quiz / budget tracker / etc.]. Requirements: [list 4–6 specific features it should have]. It should be: a single HTML file with embedded CSS and JavaScript (no external dependencies or frameworks). Make it: 1) Mobile-responsive, 2) Clean and professional-looking with a simple color scheme, 3) Functional — every feature should work when I open it in a browser. After the code, explain in 3 sentences what each main section of the code does, so I can understand what I'm looking at.
Most people think they need to learn programming before they can build something. You just built something to learn programming. What feature would you add to your app if you knew Claude would write the code in 30 seconds?
Key Takeaways
Your first app should be small, specific, and run in a browser. Build that before anything else.
The build loop is: describe → code → test → fix → repeat. This is how all software gets built.
A single HTML file with embedded CSS and JS is the easiest starting point — no setup required.
Every iteration teaches you something. The errors are the lesson.
Build your first app and show it to someone today.
Use the prompt above to build your chosen app. Get it running in your browser. Take a screenshot. Show it to one person and explain what it does. You just became someone who builds software. That's not nothing.
Next Lesson
Reading and Understanding AI-Generated Code
Programming · Lesson 3 of 7 · 10 min