Vibe Coder
Start here. Build forward.
Use AI assistance to build software you can explain, test and maintain.
Follow the stages in order, or open a topic to check what you already know. Each panel includes learning content, a practice task and a role checkpoint. Save Learning, Done or Skipped as you go. Skipped topics do not count as completed.
Build your foundations
What is vibe coding?
In simple words
Imagine explaining a simple app idea to a coding assistant the way you explain a poster idea to a designer. You describe the result, inspect the draft and request changes. The assistant writes code, but you still check whether it works. A to-do list is a better first project than a banking app.
Two useful terms
Prototype: an early version used to test an idea. Acceptance criteria: specific checks that describe when a feature works.
Build your understanding
Vibe coding uses natural-language instructions to help generate software. A convincing preview is only a starting point: you still need to understand inputs, test behavior and review changes. Build a tiny reading-list app with three actions before adding accounts or payments. This keeps the first experiment small enough to inspect.
Follow the steps
- Write acceptance criteria: add a title, mark it read, delete it.
- Ask for a single-file prototype with mock data and no external services.
- Run it locally and test empty titles, long titles and repeated clicks.
- Request one change at a time and keep a working copy before each change.
Worked example
Build a reading-list prototype. Use local mock data.
Actions: add title, toggle read, delete.
Reject blank titles. Show an empty state.
Explain how to run it and list manual tests.Read the example once, then explain each part aloud in your own words. If it includes Python, you can understand the idea first and run the code later in a local Python environment. Code is shown as text; this page does not execute it.
Try this yourself
Add a search box. Test a match, no match and mixed-case input. Write what should happen before asking the assistant to implement it.
Check your understanding
A useful acceptance test is observable: searching "AI" should match "My AI notes" regardless of letter case. "Make search good" cannot be checked reliably.
A mistake to avoid
Do not paste API secrets into browser code or publish generated authentication code without a review. The assistant can produce a plausible interface with broken behavior.
Before looking at the answer, write a short explanation and one example of your own. Finish by naming one limitation of the method. Use Mark as read when you are ready, or return to the previous lesson if a term is unclear.
Your role checkpoint
For the Vibe Coder path, connect this topic to your capstone: Build a small learning planner with mock data first, then add tested persistence and an accessible mobile interface.
HTML, CSS and accessible interfaces
Understand the concept
A useful AI prototype needs a usable interface. Semantic HTML describes structure, CSS controls presentation and JavaScript handles interaction. Plan loading, empty, error and success states. Keyboard access and readable small-screen layouts matter even in an early prototype.
Learn it step by step
- Use real buttons and labelled inputs.
- Create loading and error states.
- Test keyboard navigation.
- Inspect the layout on a narrow screen.
Build a small proof
Build a mock chat interface that displays a controlled error and lets the user retry.
Ready to move on?
Every control is usable without a mouse and the error explains a useful next step.
Common mistake
A visual mockup is not evidence that forms, permissions or network failures are handled.
Your role checkpoint
For the Vibe Coder path, connect this topic to your capstone: Build a small learning planner with mock data first, then add tested persistence and an accessible mobile interface.
Git and reproducible experiments
Understand the concept
Version control records changes so you can compare experiments and restore a known working state. A commit should describe a coherent change. Keep source code and small configuration files; credentials and large private datasets need separate handling.
Learn it step by step
- Initialise a repository and add a README.
- Commit a working baseline.
- Create a branch for one experiment.
- Compare the change and document how to reproduce it.
Build a small proof
Store two versions of a prompt or data-cleaning script and explain why the second version exists.
Ready to move on?
Another person can run the baseline from your instructions and identify exactly what changed between versions.
Common mistake
Do not commit secrets, private learner records or generated cache folders. Removing a secret from the latest file does not erase Git history.
Your role checkpoint
For the Vibe Coder path, connect this topic to your capstone: Build a small learning planner with mock data first, then add tested persistence and an accessible mobile interface.
Learn the core skills
What is prompt engineering?
In simple words
Suppose you ask a friend to bring food. They need to know what food, how much and for whom. An AI assistant also benefits from a clear request. Instead of “teach me AI”, ask for a beginner explanation with one familiar example and a short question to check understanding. You are designing the instructions, not retraining the model.
Two useful terms
Prompt: the instructions and context you provide. Constraint: a condition the answer should follow, such as a word limit.
Build your understanding
A prompt is a task brief. Give the assistant a clear goal, relevant context, constraints and the output format you need. Good prompting reduces ambiguity; it does not guarantee factual correctness. Start with one representative task, inspect the response and change one instruction at a time.
Follow the steps
- Choose a small task such as summarising a workshop announcement.
- Provide the source text and separate it clearly from instructions.
- Specify audience, length and required fields.
- Compare the output against the source and record missing or invented details.
Worked example
Task: summarise the announcement below for a beginner.
Return: date, prerequisites, three learning outcomes.
Use only the announcement; write "not provided" for missing facts.
Announcement: [paste approved text]Read the example once, then explain each part aloud in your own words. If it includes Python, you can understand the idea first and run the code later in a local Python environment. Code is shown as text; this page does not execute it.
Try this yourself
Remove the date from your source. Run the prompt again and check whether the model invents one. Add this example to your evaluation set.
Check your understanding
The expected date is "not provided". A fluent sentence is not evidence that the date exists in the source.
A mistake to avoid
A long prompt is not automatically better. Repeated, contradictory requirements make it harder to diagnose failures.
Before looking at the answer, write a short explanation and one example of your own. Finish by naming one limitation of the method. Use Mark as read when you are ready, or return to the previous lesson if a term is unclear.
Your role checkpoint
For the Vibe Coder path, connect this topic to your capstone: Build a small learning planner with mock data first, then add tested persistence and an accessible mobile interface.
Python, files and debugging
Understand the concept
Python is the working language for many AI experiments. Learn to inspect small values before connecting a large model. Variables, lists, dictionaries, loops and functions are enough for a first useful script. Errors are information: read the traceback and isolate the smallest failing input.
Learn it step by step
- Create a function with explicit inputs and outputs.
- Read a small JSON file and validate required keys.
- Handle a missing file and malformed input.
- Write checks for normal and empty input.
Build a small proof
Build a script that counts tutorial topics from ten fictional records and reports invalid rows separately.
Ready to move on?
You can explain each line, reproduce one error and fix its cause without hiding the exception. Keep the expected output with the script.
Common mistake
Copying a large generated program without understanding its inputs makes even small changes difficult to verify.
Your role checkpoint
For the Vibe Coder path, connect this topic to your capstone: Build a small learning planner with mock data first, then add tested persistence and an accessible mobile interface.
APIs, validation and authentication
Understand the concept
An API is a contract between software components. Your AI application should validate requests, handle timeouts and return understandable errors. API keys belong on a trusted server. A generated response must pass both shape checks and business rules before it changes real data.
Learn it step by step
- Define input and output fields.
- Validate lengths, types and required values.
- Handle timeout, rate-limit and invalid response cases.
- Keep credentials out of client code and logs.
Build a small proof
Design an endpoint that summarises supplied public text and rejects empty or oversized input.
Ready to move on?
Demonstrate one successful request and three controlled failures. Explain which errors a user can retry.
Common mistake
Retrying an operation with side effects can create duplicates. Use idempotency for actions such as creating a record.
Your role checkpoint
For the Vibe Coder path, connect this topic to your capstone: Build a small learning planner with mock data first, then add tested persistence and an accessible mobile interface.
Practise with real decisions
SQL and relational data
Understand the concept
SQL queries structured tables. Start with filtering, grouping and joins. A join can multiply rows when the relationship is not one-to-one, so check counts before trusting totals. Data engineers and scientists both need to understand what one row represents.
Learn it step by step
- Create fictional learners and enrolments tables.
- Select only necessary columns.
- Join using stable IDs.
- Compare row counts and inspect unmatched records.
Build a small proof
Calculate enrolment counts by course, including a course with zero learners.
Ready to move on?
Explain why an inner join may drop empty courses and how a left join changes that result. Verify totals against the input rows.
Common mistake
Joining on a non-unique display name can double-count or merge different people.
Your role checkpoint
For the Vibe Coder path, connect this topic to your capstone: Build a small learning planner with mock data first, then add tested persistence and an accessible mobile interface.
What are structured AI outputs?
In simple words
A person can read a casual paragraph, but a booking app may need separate fields for event, date and price. Structured output puts information into a predictable shape. Think of filling a form instead of writing a letter. The app must still check the fields: putting an invented date into the right box does not make it correct.
Two useful terms
JSON: a common text format for labelled data. Validation: checking that data follows the expected rules.
Build your understanding
Applications need reliable data shapes. A request for JSON helps communicate a format, but parsing, schema validation and business checks remain separate tasks. Even schema-constrained generation cannot prove that a value is true. Treat model output as untrusted data before using it in code.
Follow the steps
- Define required keys and allowed value types.
- Represent unknown values explicitly with null.
- Parse the response using a JSON parser rather than string splitting.
- Reject invalid dates and values outside your business rules.
Worked example
{"event_title":"Intro to NLP","date":null,"free":true}
Checks: title is a non-empty string; date is null or valid ISO date;
free is a boolean, not the text "yes".Read the example once, then explain each part aloud in your own words. If it includes Python, you can understand the idea first and run the code later in a local Python environment. Code is shown as text; this page does not execute it.
Try this yourself
Write three invalid responses: a missing key, an impossible date and a string instead of a boolean. Describe the validation error for each.
Check your understanding
February 31 can be a well-formed string while being an invalid calendar date. Syntax validation and meaning validation solve different problems.
A mistake to avoid
Never execute generated SQL, shell commands or code simply because it arrived in valid JSON. Validate and authorise the intended action first.
Before looking at the answer, write a short explanation and one example of your own. Finish by naming one limitation of the method. Use Mark as read when you are ready, or return to the previous lesson if a term is unclear.
Your role checkpoint
For the Vibe Coder path, connect this topic to your capstone: Build a small learning planner with mock data first, then add tested persistence and an accessible mobile interface.
AI application security and threat modelling
Understand the concept
Threat modelling starts with what must be protected, who can access it and where untrusted data enters. Model outputs and retrieved documents are untrusted inputs. A language instruction is not an authorisation boundary; server-side policy decides what a user or tool may do.
Learn it step by step
- List assets and trust boundaries.
- Separate public and private data.
- Validate tool inputs and enforce permissions.
- Test malicious instructions using synthetic fixtures in your own sandbox.
Build a small proof
Draw a document assistant showing where access checks happen before retrieval and before tool execution.
Ready to move on?
An unauthorised user cannot retrieve another account’s private document, even when a prompt asks for it.
Common mistake
Do not test real third-party systems without permission or expose secrets in your demonstration.
Your role checkpoint
For the Vibe Coder path, connect this topic to your capstone: Build a small learning planner with mock data first, then add tested persistence and an accessible mobile interface.
Ship, evaluate and improve
What is AI model evaluation?
In simple words
A polished answer is not enough to know whether an AI system works. Evaluation checks specific requirements using examples and scoring rules. For a course assistant, you might check whether it finds the correct course, admits missing information and respects account permissions. Keep failure cases as part of your test collection.
Two useful terms
Test case: an input with an expected behavior. Metric: a defined measurement of performance.
Build your understanding
An AI evaluation checks whether a system meets a defined task. Build examples around realistic successes and failures, not only easy demonstrations. Keep the test set stable enough to compare versions and record the model, prompt and settings used. A single aggregate score can hide critical mistakes.
Follow the steps
- Define success in observable terms.
- Create normal, ambiguous, missing-information and adversarial examples.
- Write expected answers or scoring rules before running the system.
- Compare versions and inspect regressions before accepting a change.
Worked example
FAQ evaluation columns:
question | expected source | required facts | forbidden claim | result
Example: fees unknown | FAQ-3 | say unknown | invented fee | pass/failRead the example once, then explain each part aloud in your own words. If it includes Python, you can understand the idea first and run the code later in a local Python environment. Code is shown as text; this page does not execute it.
Try this yourself
Write five tests for an enrolment assistant. Include a user without Pro access and a request for a nonexistent course.
Check your understanding
A response should not promise enrolment if server-side permissions deny it. Include permission-sensitive cases, not just wording checks.
A mistake to avoid
Do not judge a model solely by another model’s unreviewed score. Human checks and deterministic validation are useful for important requirements.
Before looking at the answer, write a short explanation and one example of your own. Finish by naming one limitation of the method. Use Mark as read when you are ready, or return to the previous lesson if a term is unclear.
Your role checkpoint
For the Vibe Coder path, connect this topic to your capstone: Build a small learning planner with mock data first, then add tested persistence and an accessible mobile interface.
Deployment, containers and rollback
Understand the concept
Deployment makes a working experiment available to users. It needs configuration, a reproducible environment, health checks and a way to roll back. A successful launch does not establish ongoing reliability. Monitor behavior after release and keep a known-good version.
Learn it step by step
- Document dependencies and configuration.
- Run a health check separately from a model call.
- Package a minimal service.
- Practise replacing it with the previous version.
Build a small proof
Deploy a mock prediction service locally in a container and simulate an unavailable dependency.
Ready to move on?
You can rebuild the environment and recover after a failed release without editing production files by hand.
Common mistake
Do not bake secrets into container images or assume the development machine matches production.
Your role checkpoint
For the Vibe Coder path, connect this topic to your capstone: Build a small learning planner with mock data first, then add tested persistence and an accessible mobile interface.
Monitoring quality, latency and cost
Understand the concept
AI monitoring needs more than uptime. Track response time, failures, input volume and task quality using a suitable sample of reviewed outcomes. Quality can change when users or source documents change. Log enough to diagnose failures without retaining unnecessary sensitive input.
Learn it step by step
- Define a service-level target.
- Record request outcome and latency.
- Track a stable evaluation set over releases.
- Create an alert and an investigation checklist.
Build a small proof
Produce a small report comparing two releases on success rate, p95 latency and estimated per-request cost.
Ready to move on?
You can tell whether a change improved usefulness while increasing cost or response time, and explain the trade-off.
Common mistake
An average hides slow tails and rare severe failures. Examine distributions and critical error categories.
Your role checkpoint
For the Vibe Coder path, connect this topic to your capstone: Build a small learning planner with mock data first, then add tested persistence and an accessible mobile interface.
Build something you can explain.
Build a small learning planner with mock data first, then add tested persistence and an accessible mobile interface.
Role expectations vary by company. Use this path as a starting point and build evidence of your skills.