Hands-on guide
This vibe code tutorial for beginners walks you through making a simple task-list page. Describe what it should do, inspect the result, and use what you see to guide the next change.
A small task-list page is enough to practice the full loop. You do not need to plan an entire app before writing your first prompt.
Use this short loop each time you vibe code: request a narrow result, try it yourself, then ask for one specific correction.
Ask for a task-list page with a text field, an add button, checkboxes, and a way to clear completed tasks. Say what should happen after a refresh, and keep the visual request simple.
Add a task, mark it complete, clear completed tasks, and reload the page. Note the exact action that fails instead of judging the whole project by its appearance.
Report the failing action and the expected behavior: for example, tasks disappear after refresh, but they should remain. Retest the same action after the change.
The required items keep this tutorial focused on observable behavior. The optional items make it easier to spot rough edges.
A browser where you can open and interact with the generated page — You need to click controls and reload the page to verify behavior.
A one-sentence description of your task-list page — Name the user action and what should happen next.
A short test list: add, complete, clear, and refresh — Use the same checks after each relevant change.
Sample task names without private information — Try ordinary text first, then an empty entry and a long entry.
A narrow mobile browser windowoptional — Use it to check whether buttons and task text remain usable.
Once this small page works, move to a project with one new challenge rather than adding every feature at once.
The tools changed, but the useful habit in this tutorial remains the same: inspect an output before asking for another one.
GitHub Copilot's technical preview brought AI code suggestions into an editor workflow. A developer still had to read the suggestion and decide whether it fit.
ChatGPT's public launch made it straightforward to describe a programming task in everyday language and ask follow-up questions about a result.
Tools with generated interface previews made it easier to compare a requested screen with what appeared, then describe a concrete change.
Andrej Karpathy popularized the term vibe coding. For a beginner, the practical takeaway is not to accept every output: run the page and report what actually happens.
Treat an unexpected result as evidence for the next prompt. These checks are more reliable than repeatedly asking for a better version.
1
Click Add with a short task name. If no new row appears, tell Vibe Code which button you clicked, what you entered, and what you expected to see. Ask it to make that one interaction work before requesting styling changes. After the fix, try an empty entry as well: the page should either reject it clearly or handle it deliberately.
2
First confirm that adding and completing tasks work before you reload. Then refresh and observe whether the list returns. If it disappears, request persistence for the browser session or local device and state that the existing add and complete actions must keep working. This makes the correction measurable and helps prevent a fix that breaks another control.
3
Reduce the browser width and look for clipped buttons, overflowing task names, or controls too close together. Describe the specific screen problem instead of asking for a complete redesign. After the layout changes, test the task actions again at both narrow and wide widths; visual edits can accidentally affect clickable areas.
A working demo is a useful milestone, not proof that every edge case is solved. Keep these limits in mind as you extend it.
The task-list page may look complete while a checkbox, clear action, or refresh behavior is broken.
What to do instead
Run the same four-action test list after each change, and record exactly which action fails.
A small local exercise cannot establish that generated code is safe for sensitive data or public deployment.
What to do instead
Use fictional sample tasks, avoid entering secrets, and arrange a separate code and security review before handling real user data.
Empty input, unusually long text, and repeated clicks may behave differently from the happy path.
What to do instead
Add edge cases to your test list one at a time and request a specific correction for each failure.
Keeping tasks after a refresh on one device does not mean they will appear in another browser or on another device.
What to do instead
Decide whether cross-device access is actually needed before asking for storage or account-related features.
Use the task-list prompt to begin, then check each action yourself. This vibe code tutorial for beginners is most useful when every follow-up names an observed problem and a testable outcome.
Make a task-list page with an input, an Add button, checkboxes, and a clear-completed action. Each control has an outcome you can see, which makes the result easier to test than a large, loosely described app.
You can start by describing the page in ordinary language and testing its controls in a browser. Learning to read basic error messages and recognize the parts of a page will help you make more precise corrections.
Name the page, its essential controls, and what each control should do. Include one important requirement, such as keeping tasks after refresh, but leave decorative details for a later pass.
Describe the action you took, what happened, and what you expected instead. For example, say that clicking Add after entering a task creates no row, then ask for that interaction to be fixed and retest it.
For this exercise, it is finished when you can add a task, mark it complete, clear completed tasks, and refresh without losing tasks unexpectedly. Try an empty entry and a narrow screen before calling the first version done.