LAB 02 / IDEA → MACHINE → YOUR PROJECT

Your idea.
Build it. Remix it.

Tell AI what you want. Try what it makes. Keep changing it until it feels like yours.

Set up your workbench

Open your project folder in VS Code, open your AI chat and keep Live Preview beside it. Save a backup first.

First time? Help me open the tools.

In VS Code choose File → Open Folder. Choose the folder containing index.html.
Open your installed AI extension's chat panel. Need one? Follow the AI setup guide with Ingrid.
Open index.html with Live Preview. This is where you see and try your page.

Use text or voice input if your tool supports it. Give the AI access to your project files, or paste the relevant code into chat.

FIRST BUILD

What should your page do?

Choose something you want to make: a strange room, an interactive poem, a place from your life. Give it one action a visitor can try.

Tell the machine your idea

Send it in your real AI chat. You can say it in your own words instead.

What happens after I send it?

The AI may offer file changes or reply with code. Review and apply its edits. If it replies with code, ask which file it belongs in. Save the changed files and open your preview.

If it cannot see your page, attach the files or paste their code. Tell it what you already have.

I can see my first build in Preview.

PLAY YOUR BUILD

Does it do what you imagined?

Try the action. Click again. Reload the page. What happens?

“The window changes the words, but I want the background to change too. Make it look rainy when I click.”

Tell the AI what you saw and what you want instead. Save and try its next change.

Nothing changed?

Save the files and reload Preview. Check that you are previewing the same folder the AI edited. Tell the AI exactly what you clicked and what happened, including any error message.

I tried the action and checked the result.

MAKE IT YOURS

Choose the next change.

Change the mood, colours, words or behaviour. Ask for one change, then see what it does.

“Make the rain feel lonely. Use dark blue and my own sentence.”

“Make the next click bring the sunshine back.”

“Make the window easier to find and use with a keyboard.”

Keep what works for your idea. Undo what you do not want. Save your project and let someone try it.

I made a change I chose and saved my files.

0 / 3 builds checked

The project in your folder is what you made. These checks are just your own workshop progress.

Take it back to my project →

Prefer to code it yourself?

Use the JavaScript beginner guide and make your own changes. AI is optional.

Example: a button that switches between two sentences

const story = document.querySelector("#story");
const button = document.querySelector("#future");
const originalStory = story.textContent;
let showingFuture = false;

function revealStory() {
  showingFuture = !showingFuture;
  if (showingFuture) {
    story.textContent = "Someone else remembers this place differently.";
  } else {
    story.textContent = originalStory;
  }
}

button.addEventListener("click", revealStory);