Build your first app with AI – no coding experience needed

Step 1: Describe the problem in your own words

Shopping is something almost everyone does, which makes it a perfect first project. You do not need to understand programming to tell whether a shopping list works: you type bread, milk and eggs, you see the total, and you tick things off as you buy them. The result is something you can actually use this week.

Before you open any AI tool, finish these three sentences on paper or in a note. This is the most important programming skill in the whole book: turning a wish into concrete rules.

1. I need to write down… (for example: each item, how many I need and the price of one).
2. I want the program to work out… (for example: the price of each line and the total for the whole shop).
3. I will know the program works when… (for example: two items at 25 each show 50, and ticking an item off does not change the total).

Step 2: Build the first small version

The first version is a single file that opens in your web browser. There is no programming environment to install, no server and no login. Copy the prompt below into your AI assistant (Claude, ChatGPT or similar) exactly as it is.

Help me build my first simple app. I am a complete beginner.

Create a shopping list in a single file called shopping.html that I can open in my web browser. Put all the styles and all the JavaScript inside this one file, with no external libraries.

I want to enter the item name, the quantity and the price of one item. A button adds the item to the list. Show the price of each line and, at the bottom, the total for the whole shop. Let me delete an item and mark it as bought. Marking an item as bought must not change the total.

Reject an empty name, invalid numbers, a negative price and a quantity of zero or less. Accept both a decimal point and a decimal comma in the price.

First explain the plan briefly. Then write the complete code and the exact steps to save and open the file. Do not add any other features yet.

1. Copy the code. Use the copy button in the AI's answer so you get the whole code, from the first line to the last.
2. Save it as shopping.html. Open a plain text editor (Notepad on Windows, TextEdit in plain-text mode on a Mac), paste the code and save it as shopping.html. Choose 'All files' as the file type, not 'Text document'.
3. Open it in the browser. Double-click the file, or drag it into a browser window. You should see your shopping list, not a page full of code.

Step 3: Check that it is not just a pretty picture

An app that looks right is not the same as an app that works. Go through this table one row at a time and compare what you see with the correct result. This is your first real test.

If any row fails, do not fix the code by hand yet. Tell the AI exactly which row failed, what you entered and what you saw instead, and ask it to fix only that problem.

Step 4: Make one change yourself

Now make your first change without the AI writing it for you. Ask the AI: 'Where in my code is the heading of the app?' It will point to a line that looks something like <h1>Shopping list</h1>.

1. Find the heading. Open shopping.html in your text editor and find the line the AI pointed to.
2. Change the text. Replace the words between <h1> and </h1> with your own title, for example 'Saturday shop'. Do not delete the angle brackets.
3. Save and refresh. Save the file, go back to the browser and refresh the page. Your new title should appear.

Then ask the AI to explain your own file in three parts, using your code as the example. You will see that every web app is built from the same three layers:

Step 5: Teach the app a new skill

Real programs grow in small steps. Add one new feature, then test again. Send the AI this follow-up in the same conversation:

Add a budget to my shopping list. Let me type the amount I want to spend. Show how much is left. If the total goes over the budget, show a clear warning with the amount by which I am over. Keep everything else working exactly as before, and show me the complete updated file.

You have now built, run, tested and changed a real app. That is not the whole of programming, but it is the routine you will repeat in every lesson that follows: describe clearly, let the AI generate, check against expected results, and change one thing at a time.