How to run AI-generated HTML, CSS and JavaScript

Import a working daily-plan example, edit its heading and test real JavaScript interactions. Learn which AI code can run without a build step.

You have received code from an AI assistant. Before pasting it into an editor, check what kind of project it is. A complete HTML document can run in a browser. A React component, a package.json file or a set of npm commands describes a different workflow. This lesson uses plain HTML, CSS and JavaScript with no external libraries.

Start with a working example

Download the daily-plan ZIP below and extract it. It contains index.html, styles.css, app.js and a README. The page has three tasks, checkboxes and an input for adding another task. It does not need an account or a server, and its tasks reset when you reload it.

Open the English workspace and select Import tutorial example. This replaces the current editor contents, so export any project you want to keep first. Alternatively, use Import HTML / CSS / JS and select the three extracted code files together. Do not select the ZIP itself.
In the HTML tab, find <h1>My daily plan</h1>. Change the text to My study plan. Keep the opening and closing tags.
Select the run button. The heading in the preview should now say My study plan.
Check the first task. The completed count should change from 0 / 3 to 1 / 3.
Enter Review one lesson in the task input and press Add. A fourth task should appear, and the count should read 1 / 4.

What each successful check tells you

A visible heading shows that HTML loaded. Colors, spacing and rounded panels show that the stylesheet loaded. A changing counter and a newly added task demonstrate that JavaScript ran. Check those layers in that order. A screenshot of a page alone does not show whether its buttons work.

When your own AI code does not run

Raw code appears: remove Markdown fences such as three backticks. Save the file as index.html, not index.html.txt.
The page has no styling: import the CSS file or paste its contents into the CSS tab. Run the project again.
Buttons do nothing: import app.js into the JavaScript tab. Check that IDs used by the script still match the HTML. Renaming task-form in only one file breaks this example.
The code imports React or another package: use that project's build instructions, or request a standalone vanilla HTML/CSS/JS version from your AI assistant.
A remote image or API is missing: this workspace's preview blocks external network requests and dependencies. Test network-dependent code in an appropriately configured development environment.

Finish with one small change

Edit the subtitle as well as the heading. Run the project and repeat both interaction checks. Your result should be a working page with your own text, not just untested code. Continue to the mobile lesson to check whether the same interface works at a narrow width.