Build Your First App With AI

Your first AI-assisted app should be small enough that you can explain every visible behavior. A task list is a useful starting point: one input, one list, and one way to remove an item.

The example below is a browser-only learning prototype. It uses no accounts, external services, or durable storage. Tasks disappear when the page reloads.

Give the coding tool a fixed brief

Ask your chosen AI coding tool to create a single HTML file. Require a labeled task input, rejection of blank titles, a list of tasks, a remove button for each item, and keyboard operation.

Specify that user-entered titles must be inserted as text rather than HTML. Exclude databases, logins, packages, and paid APIs from this first version.

Request an explanation of how the form event changes the page. A useful result includes the behavior and the reasoning, not only a file to copy.

Compare with a complete reference example

Save the following as index.html in a new practice folder. Open it in a browser. The code is intentionally simple so you can trace the event handler.

<!doctype html>
<html lang="en">
<meta charset="utf-8">
<title>Task notebook</title>
<h1>Task notebook</h1>
<p>Practice only. Tasks disappear when you reload.</p>
<form id="task-form">
  <label for="task-title">Task title</label>
  <input id="task-title" maxlength="80" required>
  <button type="submit">Add task</button>
</form>
<p id="status" role="status"></p>
<ul id="tasks"></ul>
<script>
const form = document.querySelector("#task-form");
const input = document.querySelector("#task-title");
const list = document.querySelector("#tasks");
const status = document.querySelector("#status");

form.addEventListener("submit", (event) => {
  event.preventDefault();
  const title = input.value.trim();
  if (!title) {
    status.textContent = "Enter a task title.";
    input.focus();
    return;
  }
  const item = document.createElement("li");
  const label = document.createElement("span");
  label.textContent = title + " ";
  const remove = document.createElement("button");
  remove.type = "button";
  remove.textContent = "Remove " + title;
  remove.addEventListener("click", () => item.remove());
  item.append(label, remove);
  list.append(item);
  form.reset();
  input.focus();
  status.textContent = "Task added.";
});
</script>
</html>

The form handler prevents the default submission, checks the trimmed title, creates a list item, and attaches a removal action to that specific item. textContent displays the title as text.

Check behavior before changing appearance

Add a normal title and confirm it appears. Add a second title and remove only the first. Try whitespace and confirm no empty item is created.

Enter harmless text that contains angle brackets and confirm it appears as text. Use the keyboard to reach the input and buttons. Reload and confirm that the temporary list disappears, as the page explains.

These checks apply to the reference and to the generated version. A screenshot of the list cannot establish that removal or validation works.