Vibe Coding Academy: 50-lesson handbook

For a student who forgets study tasks, the first outcome is recording one task and seeing it after a reload. “A productivity platform” does not identify a testable first outcome.

For a local task board, let the assistant propose code and run local checks. Keep publishing and any external data access as separate, reviewed actions. A sentence saying “deployed” is not a deployment record.

A practice folder contains index.html, style.css and app.js. Its preview serves that folder; edits to another folder do not affect it. A backup copy or version-control checkpoint protects the starting state.

HTML describes the interface, CSS styles it and JavaScript updates behavior in the browser. Hosting serves those files. That arrangement is different from a backend process that stores shared data.

A local task board can use HTML, CSS and JavaScript without accounts. If private team sharing becomes required, reconsider storage, server authorization and deployment instead of pretending browser storage is shared.

The first task board includes add, complete and delete. Notifications and team invitations wait. Keyboard operation remains part of the core, because a working flow must be operable by its intended users.

Given a title containing only spaces, submitting shows an error and leaves the task count unchanged. Given “Read chapter 1”, submitting adds one task and clears the input.

Sketch four views: no tasks, three active tasks, one completed task, and an invalid title with a message. The same state model should explain how the app moves between them.

A task is {id:"t1",title:"Read notes",completed:false}. The id stays stable, title is nonempty after trimming and completed is boolean. An older record missing completed needs an explicit default or rejection policy.

The brief names one learner, one-browser storage, add/complete/delete, blank-input handling and keyboard controls. It excludes accounts and states how persistence failure is explained.

Before a storage fix, ask the assistant to identify the load/save functions, propose a small change and name tests for valid data, malformed JSON and unavailable storage.

For an empty-task defect, provide the submit handler, render function, reproduction and expected result. A screenshot alone cannot show the validation branch or stored values.

“Reject trimmed empty titles in the submit handler; preserve the stored task shape and current layout.” Review the diff to confirm those boundaries were respected.

Fix task validation in app.js and its test. Do not redesign navigation or change storage format. If the bug depends on the format, report that finding before migrating data.

Save the working task board before changing storage. Note the checkpoint identifier and restore method, then review the diff after the change rather than relying on memory.

Trace Add from the form submit handler to title validation, creation of a task record and renderTasks. Explain where an invalid title stops before state changes.

A form submit handler prevents navigation, trims the title, rejects an empty result, adds one task and rerenders. A click-only handler may miss Enter or produce duplicate paths.

Store tasks and a selected filter. Compute the completed count from tasks.filter(t=>t.completed).length. Deleting a completed task then updates the count without a second manual decrement.

A blank title produces “Enter a task title” near the input, leaves the list unchanged and returns focus appropriately. It does not erase all existing tasks or silently ignore the action.

If the assistant proposes a package for trimming a title, ask why native String.trim is insufficient. For a justified dependency, inspect its identity and the installation command before running it.

Implement one complete route: type a title, submit, create a record and render it. Then test that route before adding sorting, filtering or animations.

A task titled <img src=x onerror=...> should appear as literal text. Creating a text node preserves that intent without interpreting the string as an element.

If JSON.parse fails on saved tasks, show a recovery message instead of silently claiming all data loaded. If storage writes fail, keep the session usable and explain the persistence limitation.

A task backup contains version:1 and an array of task records. Restore rejects unknown versions and invalid completed values, then preserves the current list until validation and confirmation succeed.

The first slice accepts a valid title, rejects spaces, marks one chosen task complete and deletes that same task. A short test record includes input, expected result and actual result for each action.

Start with an empty list. Enter three spaces. Submit once. Expected: an error and no task. Actual: one blank task. Record the browser and version where you observed it.

A console log shows the raw title has length three while title.trim() has length zero. That supports a validation hypothesis; it does not justify rewriting the entire rendering system.

Try empty text, spaces, a normal title, a long title and repeated submission. Write expected outcomes first so you are not redefining success after seeing the result.

After the trim validation change, repeat the original spaces-only case, then add a normal task and complete/delete it. Preserve the observed results, not just “tests passed”.

Explain that trimming happens before the emptiness check and before state mutation. If the explanation says rendering fixes the bug but the diff changes validation, investigate the mismatch.

Tab to the title field and submit with Enter. Reach Complete and Delete with the keyboard, confirm visible focus and ensure each control identifies the relevant task.

At a narrow width the task title wraps and controls remain reachable. At increased browser zoom, labels and error messages are still readable without overlapping the form.

The status area distinguishes “Loading tasks”, “No tasks yet” and “Could not load tasks; retry”. A retry does not duplicate a write that might already have succeeded.

Hiding Delete for a non-owner is a UI choice. A shared backend must also reject unauthorized delete requests even if someone constructs the request manually.

Imported task titles are checked for shape and rendered as text. If shared accounts are added later, authorization belongs on the server for each protected action, not in a hidden button.

A task-list endpoint returns an object with an items array, not the array directly. Code that immediately calls response.map fails even though the request succeeded.

Search A starts, then Search B starts and finishes first. A request identifier or cancellation policy prevents A’s later response from replacing B’s current results.

A personal task list can be local. A team task list with private membership needs a trusted service that verifies the requesting user’s access to each team record.

User A can read their own task. Changing a task ID in a request must not reveal User B’s private task simply because User A is signed in.

A failed read may be retried with a bounded policy. A payment or message send should not be repeated automatically without a reliable deduplication strategy.

The local preview works, but a production asset path is wrong. Open the deployed URL and inspect loading errors; do not describe the upload as verified merely because the ZIP was created.

A public API base URL can appear in client configuration. A private signing key cannot. A sample environment file lists variable names with placeholders, not production secrets.

After release, load the real URL, add a test task, reload, complete it and remove it. Record the version and whether each action behaved as expected, then clean up the test data.

Record the previous deployed version, how to restore it, and whether stored data remains compatible. A rollback plan that restores code but cannot read migrated data is incomplete.

Ask “Track and finish one study task” without pointing to controls. Observe hesitation, keyboard use and error recovery, then record a concrete improvement.

For two validation patches, compare the same reproduction and regression cases. Record whether either patch changed unrelated code, not just how quickly the response appeared.

Keep a template containing the goal, context, scope, acceptance checks, checkpoint and review evidence. Replace project-specific decisions rather than copying a previous architecture blindly.

A README states how to start the local preview, where tasks are stored, how to run the checks and that there is no cloud sync. It does not claim a backend that was only discussed.

The assistant repeatedly changed styling while fixing validation. Next time, include an explicit change budget and inspect the diff before rerunning all checks.

A learner demonstrates adding, persisting, completing and deleting a task; shows an invalid-input case; explains the state model; and lists the remaining limitations and rollback procedure.