Your first code change
Open a sample website on its own branch, improve it with an agent and review the diff.
Open the sample#
Download the sample site ↓A one-page website in a small Git repository, made for this tutorial. Free, no account needed.
- 1Unzip the download. You get a sample-site folder: a small Git repository with one commit.
- 2In ADE, switch to Code mode: click the mode name at the top of the sidebar.
- 3Click the folder icon next to Projects in the sidebar and choose Open folder…. Pick sample-site.
- 4When ADE asks how to open the repository, choose Isolated workspaces. Each task then gets its own branch.
- 5Start a new task in the project and open its chat.
Run it#
First prompt
Read index.html and explain what this page does. Start a local static server on a free port, give me the address and keep the server running. Do not change any files yet.Open the address in your browser. You should see the Northwind sample page with three sections. To start the server with the Run button next time, save a run command in Project settings.
Make one change and review it#
Second prompt
Make keyboard focus easy to see on this page. Keep the content and layout. Explain the change, edit the CSS, then check that pressing Tab clearly highlights each link.- 1Reload the page and press Tab to move through the links.
- 2Open the Changes tab in the right panel and read the CSS the agent changed.
- 3Click Review in the right panel header. A new chat reviews the change and adds comments to the diff.
- 4Ask the first chat to fix anything the review found.
Only one chat should edit
Chats in the same task share its files. Let the reviewer read and comment while the first chat makes the edits.
Keep the change#
You are done when the page still works, focus is easy to see and you understand the CSS change. Ask the agent to stop the server.
To keep it, ask the agent to commit the change on this task’s branch. Commit & Push and Create PR need a GitHub remote. To try a pull request, push the sample to your own GitHub repository first.