AI Code Starter Guide

Start Here

You do not need to be a programmer to make a simple HTML app. You can ask an AI tool to write the code for you. Then you copy that code, paste it into a text editor, save it as an HTML file, and open it in a browser.

Main idea: ask the AI for a single-file HTML app. That means one file that includes the HTML, CSS, and JavaScript all together.

1

Ask the AI for a single-file app

Example: “Make me a single-file HTML typing game for kids with bright colors and saved progress.”

2

Copy all the code the AI gives you

Usually the code starts with <!DOCTYPE html> and ends with </html>.

3

Paste it into a plain text editor

On Windows this can be Notepad. On Mac this can be TextEdit, but it must be switched to plain text.

4

Save the file as something like MyApp.html

Then double-click it to open it in Chrome, Edge, Safari, or another browser.

What AI Can Do

AI coding tools can create starter code for simple offline apps, especially when you ask clearly. They are best for beginner projects that can live in one HTML file.

Good beginner projects

typing games
math quiz apps
flash cards
matching games
spelling practice
simple trackers
reading comprehension apps

Harder projects

online multiplayer games
apps with user accounts
apps needing databases
mobile app store publishing
big projects with many files

Ask for “single-file HTML with CSS and JavaScript included in the same file” if you want the easiest beginner setup.

How to Ask AI for Code

The more specific you are, the better the code usually is. Tell the AI exactly what you want the app to do, who it is for, and how you want it delivered.

Good prompt formula

Make me a single-file HTML app for [who it is for]. It should [what it does]. Use bright kid-friendly colors. Include all HTML, CSS, and JavaScript in one file. Do not use outside libraries. Make it work offline. Add clear buttons and instructions.

Example prompts

Game example

Make me a single-file HTML memory matching game for kids learning animal names. Use colorful cards, simple sounds if possible, and a replay button. Put all HTML, CSS, and JavaScript in one file.

Learning app example

Make me a single-file HTML multiplication practice app for 3rd graders. Include score tracking, random questions, positive feedback, and big readable buttons. Put everything in one HTML file.

Weak prompt: “Make a game.”
Better prompt: “Make a single-file HTML spelling game for early readers with 10 animal words, large buttons, and offline use.”

Copy the Code from the AI

After the AI writes the code, you need to copy all of it. Do not copy only part of the file.

1

Look for the code block

The code usually starts with <!DOCTYPE html>.

2

Use the copy button if there is one

Many AI tools show a copy icon on code blocks. That is the easiest method.

3

If there is no copy button, highlight everything

Click and drag from the top of the code to the bottom, then copy it.

4

Make sure the last line is included

The file should usually end with </html>.

If you miss part of the code, the app may not work.

Windows Steps

On Windows, Notepad is usually the easiest place to paste the code.

1

Open Notepad

Click Start and type Notepad, then open it.

2

Paste the code

Click inside Notepad and paste everything you copied from the AI.

3

Save As

Go to File → Save As.

4

Name it with .html

Example: TypingGame.html

5

Set file type to All Files if needed

If Notepad tries to save it as a text file, choose All Files and then name it TypingGame.html.

6

Open the file

Go to the folder where you saved it and double-click it.

Windows tip: the file must end in .html, not .txt.

Mac Steps

On Mac, TextEdit often opens in rich text mode. That is a problem for code. You need plain text mode.

1

Open TextEdit

Use Spotlight or open it from Applications.

2

Make a new document

If it opens a rich text page, switch it before pasting code.

3

Change to plain text

Go to Format → Make Plain Text.

4

Paste the code

Paste all the HTML code into the plain text document.

5

Save the file

Use File → Save, and name it something like TypingGame.html.

6

If Mac warns about the extension, keep .html

Do not switch it back to .txt.

Mac tip: if you forget to use plain text, the file may save with extra formatting and break the code.

Open the App

Once the file is saved correctly, you usually just double-click it. It should open in your web browser.

What should happen

the browser opens
your app appears
buttons work
the app runs offline

If double-click does not work

right-click the file
choose Open With
pick Chrome, Edge, or Safari

If the app opens as a web page in a browser, that usually means you saved it correctly.

Common Mistakes

1

The file saved as .txt instead of .html

Rename it so the ending is .html.

2

Only part of the code was copied

Go back to the AI and copy the whole code block again.

3

Mac TextEdit was left in rich text mode

Start over in plain text.

4

The AI created multiple files

Ask again: “Rewrite this as a single-file HTML app with all CSS and JavaScript included.”

5

The app looks broken

Ask the AI: “The code does not work. Please rewrite the full corrected single-file HTML.”

Best beginner rule: if the AI gives you partial fixes, ask for the full rewritten HTML file instead.

Prompt Builder

Fill these in, then copy the finished prompt and paste it into ChatGPT, Claude, Gemini, or Copilot.

Your prompt will appear here.

Tip: after the AI gives you code, copy everything and save it as an HTML file.

Quick Quiz

Test whether you understand the basic idea.

Question 1

What should you ask the AI for if you want the easiest beginner setup?

Question 2

What extra step is usually needed on a Mac in TextEdit?

Question 3

What file ending should the finished app usually have?