Copy everything below this point into a text editor and [edit] it as needed. Once done edit is ready to paste it into your preferred ai tool. Once done with ai tool download the zip and upload the app using the Studio > App Studio

Help Me Build My Own App!

I want you to help me create my very own web application. I'm a beginner, and I might not know anything about programming yet.

You are my app-building partner and coding teacher. Help me turn my idea into something real, fun, and functional.

Step 1: Understand My Idea

Here is the app I want to build:

App Name: [Give your app a name]

My Idea: [Describe what you want your app to do. It doesn't have to be technical. Just explain it in your own words.]

Who Will Use It: [Me, my friends, family, students, or anyone]

What I Want It to Look Like: [Colors, styles, themes, or examples of things you like]

If anything is unclear, ask me a few simple questions before building.

Step 2: Plan My App

Before writing the code:

1. Explain my app idea back to me in simple words.
2. Suggest a few features that would make it better.
3. Tell me which features should be in the first version.
4. Explain how someone will use my app.

Keep explanations easy enough for a middle-school student to understand.

Step 3: Build My App

Once we agree on the idea, build a complete, working web application.

Programming Requirements

Use HTML, CSS, and JavaScript.
Do not use PHP, Python, Node.js servers, databases, or other server-side code.
Make the app work on computers, iPhones, and Android phones.
Support both touchscreen and mouse/keyboard controls where appropriate.
Use responsive layouts that adjust to different screen sizes.
Include <meta name="viewport" content="width=device-width, initial-scale=1">.
Use browser localStorage if the app needs to remember information on the same device.
Avoid external libraries and dependencies whenever possible.
Do not include passwords, API keys, or other secrets.
Use relative file paths so the application works when installed in a website subdirectory.
Keep all required application resources self-contained.

IMPORTANT: Creative Studio App Studio Compatibility

This application will be uploaded through my family's Creative Studio App Studio ZIP uploader.

Follow these packaging rules exactly:

1. The ZIP must contain an index.html file at its root.
2. Do not put the application inside a parent folder within the ZIP.
3. Include only files necessary to run the application.
4. Supported application files include:
- .html — HTML files
- .css — CSS stylesheets
- .js — JavaScript files
5. Do not include README.md, Markdown files, documentation, test files, development configuration files, or unrelated files in the ZIP.
6. If images, sounds, or fonts are required, use browser-supported formats and relative paths. Only include assets necessary for the application, and keep in mind that additional asset formats may require verification with the uploader.
7. Do not include node_modules, package.json, build tools, or unnecessary dependencies.
8. Prefer a simple structure:

```text
index.html
styles.css
game.js
```

9. If the application can be built using only index.html, styles.css, and game.js, use that structure.
10. Do not rely on absolute website paths or server-side routing.
11. The game or application must initialize automatically when its index.html loads.
12. Make the app work when embedded in Creative Studio's App Studio viewer, including on mobile devices.

Known working example: The Car Jumpy Jump application successfully uploaded using a ZIP containing only index.html, styles.css, and game.js. A previous ZIP containing an additional README.md did not upload successfully.

Use this known-working structure as your default.

Step 4: Test and Improve

Before finishing:

1. Check JavaScript for syntax errors.
2. Verify all referenced files exist.
3. Check buttons, controls, and interactive features.
4. Review responsive layouts for desktop and mobile.
5. Verify that all resource paths are relative.
6. Confirm that index.html is at the root of the ZIP.
7. Confirm the ZIP contains no documentation or unnecessary files.
8. Verify the archive can be opened and its contents match the required structure.
9. Explain anything that still needs testing in a real browser.

Step 5: Give Me My App

Create an actual downloadable ZIP file containing my completed application.

Critical requirements:

The ZIP must be compatible with Creative Studio App Studio.
Put index.html directly at the ZIP root.
Include only the HTML, CSS, JavaScript, and verified supported assets required to run the app.
Do not include README.md inside the ZIP.
Do not put everything inside an extra parent folder.
Test the ZIP's structure before providing it.
Provide a clickable download link to the actual ZIP file.
Never substitute a code-only answer for the requested ZIP.

Provide installation instructions, code explanations, and any README-style documentation in the ChatGPT conversation outside the ZIP.

If there is a choice between a complex framework-based application and a simple self-contained HTML/CSS/JavaScript application, choose the simple solution.

The goal is for a beginner to upload the ZIP into Creative Studio's App Studio without modifying files or troubleshooting the package structure.

Prompt to create an app using AI