Beginner website
A responsive, accessible learning page built through small AI-assisted changes.
Vibe safely
Turn vibe coding into a disciplined skill: plan, choose models, supervise agents, build, test, secure, deploy, and maintain real products.
By the end
Turn ideas into scoped requirements and verifiable tasks.
Choose model categories using real project evidence.
Supervise coding agents, inspect diffs, and reject unsafe work.
Build accessible frontend, backend, database, auth, and AI features.
Test, threat-model, secure, deploy, monitor, and recover applications.
Explain what shipped, what is uncertain, and what still needs work.
The lesson rhythm
Every lesson follows the same calm loop, so new concepts feel familiar.
Start with one plain-English mental model.
Compare a real example with its visible result.
Make one small change and predict what happens.
Repair a mistake and prove the fix with evidence.
Project ladder
Each project produces something you can show, test, explain, and improve.
A responsive, accessible learning page built through small AI-assisted changes.
Authenticated CRUD with ownership rules, migrations, tests, preview, and rollback.
Structured output, citations, limits, evaluation cases, and cost controls.
An Indic-language, voice, translation, or document workflow using an officially supported model.
Find leaked secrets, broken authorization, unsafe dependencies, prompt injection, and excessive agency.
Global model compass
General reasoning, coding agents, tools, multimodal work, and application APIs.
Model names and recommended defaults change; verify the live catalog.
Coding, long-context review, tool use, and agentic workflows.
Compare capability, speed, cost, and actual task performance.
Multimodal APIs, long context, coding, live media, and open-model options.
Distinguish stable model IDs from preview releases.
Open-weight language and multimodal models for hosted or self-managed projects.
Read the exact model card, license, and acceptable-use terms.
General reasoning, coding, tool use, search-connected work, voice, image, and video APIs.
Capabilities and model aliases change; pin versions when consistency matters.
Smaller language models, multimodal work, and models integrated with Microsoft Foundry.
Separate Microsoft models from third-party models merely hosted in the same catalog.
Text, multimodal understanding, creative media, speech, and agentic workflows through Amazon Bedrock.
Check the exact model version, Bedrock region, and supported modality.
Reasoning, coding, and OpenAI-compatible API workflows.
Check the exact endpoint, model ID, data terms, and current availability.
Multilingual, reasoning, coding, visual, audio, and agent workflows through Model Studio.
Model lifecycle and regional endpoints matter in production.
Long-context reasoning, coding, tool use, and agent workflows.
Verify the current model catalog instead of relying on a remembered model name.
Language, reasoning, coding, visual work, and tool-enabled applications.
Provider, endpoint, and deployment region are separate decisions.
Text, speech, music, image, video, and agent-style application APIs.
Choose a model by the required modality and measured result, not brand familiarity.
Indian-language chat, speech, translation, transliteration, and document workflows.
Indic specialisation does not automatically make every model a coding model.
Open Indian-language datasets, translation, speech, transliteration, and research.
Research releases and production APIs have different support expectations.
Indic language and India-focused open-model research where officially available.
Verify that the chosen release exposes the capability and interface your app needs.
Sovereign Indian text, speech, translation, vision, and dataset initiatives.
Confirm whether a model, weights, or public API is actually available before planning around it.
Commercial APIs, coding, open weights, and local or offline deployments.
Hosted and self-hosted versions have different operational responsibilities.
Open models, Arabic specialisation, reasoning, and efficient deployment.
Read the exact model card and license for the chosen release.
Discovering, evaluating, hosting, and adapting community and open-weight models.
A hub listing is not an endorsement; inspect files, model cards, licenses, and authors.
Open models and data for reasoning, coding, agents, retrieval, speech, and safety.
Budget hardware, inference software, security, and ongoing model operations.
Complete course map
Open one level at a time. Only the first published lesson is marked Start; the rest are being written and tested.
Use AI while keeping human responsibility for the result.
Create an AI can / I must checklist.
Thinking the AI owns the outcome.
Give each part of the AI ecosystem its correct name.
Label a simple ecosystem diagram.
Calling every AI product a model.
See the browser, frontend, backend, database, and hosting together.
Draw one request-and-response flow.
Believing a website is only its visible page.
Know the job of the editor, terminal, browser, DevTools, GitHub, and preview.
Open each tool and identify what evidence it provides.
Installing many tools without understanding any of them.
Read src, public, package.json, README, and configuration without panic.
Create a labelled repository map.
Editing random files based only on filenames.
Ask AI to inspect and explain without changing files.
Check an AI-generated codebase map against the real repository.
Letting an agent edit during an explanation task.
Make one intentional change with a clear boundary.
Change one card's text and colour only.
Asking AI to redesign the whole page.
Prove generated code runs and builds.
Open the local page and complete a successful build.
Assuming generated code automatically works.
Describe what changed and why in plain language.
Write a changed-file summary without AI jargon.
Keeping code nobody on the team can explain.
Use evidence and a small diff to repair a deliberate defect.
Return a working page plus a verification checklist.
Making random edits until the symptom disappears.
Describe the outcome a user should receive.
Rewrite five weak prompts as observable outcomes.
Saying only make it better.
Give the model the files and facts needed for this task.
Assemble a small context packet.
Providing too little context or dumping the whole repository.
Protect unrelated behaviour from accidental changes.
Write must change and must not change lists.
Letting AI rewrite unrelated features.
Define completion with checks instead of feelings.
Turn a feature idea into five pass-or-fail checks.
Accepting looks good as proof.
Make desired and undesired outcomes concrete.
Pair one reference with one anti-reference.
Expecting AI to infer your personal taste.
Review approach, files, risks, and checks before code changes.
Correct one flawed implementation plan.
Approving a large unexplained change.
Move from idea to feature to small verifiable task.
Create an epic, feature, and task board.
One giant build my whole SaaS prompt.
Store repeatable project rules close to the code.
Write a beginner-readable instruction file.
Repeating inconsistent rules in every chat.
Continue long work without losing decisions or current state.
Write a compact session handoff.
Continuing after the model has lost the goal.
Require sources and make uncertainty visible.
Verify one package or API against its official documentation.
Trusting invented APIs, packages, or outdated syntax.
Compare like with like when discussing AI.
Classify a set of product and model cards.
Comparing a consumer chat app with an API model.
Understand what fits in a model request and what may be stale.
Complete a context-budget worksheet.
Assuming a huge context window guarantees understanding.
Match model categories to the work they are designed for.
Complete a task-to-model-type matching game.
Using the largest model for every task.
Choose using multiple project constraints.
Build a weighted model-selection scorecard.
Choosing from benchmark marketing alone.
Understand representative OpenAI, Anthropic, Google, Meta, xAI, Microsoft, and Amazon families.
Compare official catalogs for one real task.
Declaring one US model universally best.
Understand representative DeepSeek, Qwen, Kimi, GLM, MiniMax, ERNIE, and Hunyuan families.
Map each family to documented strengths and access methods.
Treating Chinese models as interchangeable.
Understand Sarvam, Krutrim, AI4Bharat, and BharatGen use cases.
Create an India-focused language, speech, or document use-case map.
Assuming every Indian model is a coding assistant.
Understand Mistral, Falcon, Llama, Gemma, and the open model ecosystem.
Compare hosted and self-hosted options.
Calling open weights automatically free, private, or unrestricted.
Balance privacy, residency, hardware, licensing, and maintenance.
Write a deployment decision record.
Sending private code to a service without checking terms.
Evaluate models on your own tasks and track their lifecycle.
Run ten cases and create a dated model registry.
Switching models after one impressive answer.
Start from a person's need rather than a list of features.
Write a one-paragraph problem statement.
Starting from features instead of a real need.
Describe useful behaviour from the user's point of view.
Write five testable user stories.
Saying the app should do everything.
Choose the smallest version that proves value.
Create a now, later, and never board.
Building payments, chat, AI, and admin together.
Plan happy, empty, failure, and recovery states.
Draw four versions of one important flow.
Designing only the happy path.
Name the information the product must store and relate.
Sketch a small entity relationship map.
Letting AI invent database tables during coding.
Select technology for team skill, product needs, cost, and maintenance.
Write a short architecture decision record.
Selecting every fashionable framework.
Agree on inputs, outputs, errors, and ownership before implementation.
Write two example request and response contracts.
Frontend and backend inventing different formats.
Turn requirements into evidence the build must produce.
Create a feature verification matrix.
Writing tests after forgetting the requirement.
Surface important non-functional risks before code exists.
Create a small pre-build risk register.
Treating safety and accessibility as post-launch jobs.
Give the agent an ordered path and clear points to pause.
Create a milestone plan with approval gates.
Allowing an agent to work indefinitely.
Understand how an agent uses a model and tools over multiple steps.
Draw the loop around one coding task.
Treating an agent like autocomplete.
Protect changes that already belong to someone else.
Produce a clean pre-change report.
Overwriting another person's work.
Separate experiments from the stable branch.
Create a focused feature branch.
Experimenting directly on main.
Check files, architecture, risks, and verification before approval.
Find and correct three assumptions in a sample plan.
Approving because the plan sounds technical.
Make changes that a beginner can inspect and reverse.
Reduce a mixed diff to one feature.
Hundreds of unrelated changed lines.
Decide what an agent may run, must ask about, or may never run.
Create an allow, ask, and deny command policy.
Blindly approving terminal commands.
Review behaviour, data flow, dependencies, and unexpected files.
Annotate one AI-generated diff.
Reviewing only the final screen.
Collect independent evidence that the change is healthy.
Produce a short verification report.
Treating the agent's done message as evidence.
Package work so another person can understand and review it.
Create a focused commit and beginner-friendly pull request.
One huge final changes commit.
Undo a bad change without destroying unrelated work.
Revert a demo commit and write a recovery note.
Manually deleting code to undo history.
Build with meaningful regions and elements.
Create an accessible landing-page skeleton.
Building every element with generic containers.
Turn a design direction into consistent rules.
Create a small style-token sheet.
Random colours and one-off spacing.
Recognize reusable interface pieces and their data.
Build one reusable lesson card.
Copying the same UI repeatedly.
Make one interface work on phone, tablet, and desktop.
Verify three useful viewport sizes.
Testing only one laptop width.
Include accessibility in the definition of done.
Complete a manual accessibility checklist.
Assuming attractive means accessible.
Help users enter valid data and recover from errors.
Build a usable signup form with clear messages.
Validation only after submission fails.
Design the full life of a feature, not just ideal data.
Create a complete state gallery.
Designing only the full-data state.
Compare reference, current output, and intended correction visibly.
Create a before, reference, and after review.
Asking for pixel perfect without visual evidence.
Keep a premium interface fast and stable.
Optimise a page and record before-and-after evidence.
Adding a heavy library for a tiny effect.
Combine clarity, responsiveness, accessibility, and restrained polish.
Ship and verify a complete learning page.
Accepting decorative complexity over readability.
Trace a browser request into server logic and back.
Draw and inspect one API request.
Putting private server logic in the browser.
Create predictable validated endpoints.
Build a small endpoint with one fixed response shape.
Returning arbitrary shapes from each response.
Model stored information without one giant table.
Sketch a small relational schema.
Storing everything in one table.
Make database changes repeatable across machines and deployments.
Create and rehearse one migration.
Manually editing production tables.
Create, read, update, and delete only the right user's records.
Build a personal notes feature.
Trusting an owner ID sent by the user.
Separate proving identity from permission to act.
Protect a server-side action after login.
Hiding a button and calling it security.
Enforce ownership close to the data and at sensitive actions.
Write policies for users to access only their records.
Exposing every authenticated user's data.
Know which values may reach the browser.
Create a correct environment-variable map.
Shipping a service or admin key to the frontend.
Verify external events and keep integrations idempotent.
Validate a signed mock webhook.
Trusting incoming webhook data.
Make important operations safe under failure and repetition.
Design a resilient API operation.
Retrying a payment and charging twice.
Translate the error, location, and context into plain language.
Explain one stack trace before changing code.
Pasting only it doesn't work.
Create exact steps that make a bug appear.
Write a minimal reproduction checklist.
Fixing a bug that cannot be reproduced.
Collect browser-side evidence instead of asking AI to guess.
Capture and explain one failed request.
Ignoring the browser's actual error.
Follow a failure through useful server frames.
Trace a sample error to its root cause.
Fixing only the final error line.
Run small experiments that can prove an idea wrong.
Keep a short hypothesis and result log.
Randomly changing many files.
Test observable behaviour around focused functions.
Write edge-case tests for one utility.
Tests that only repeat the implementation.
Verify important parts work together.
Test one API and database flow.
Mocking every meaningful dependency.
Test a real user journey and important accessible behaviour.
Automate one browser journey and manually verify keyboard use.
Testing internal selectors instead of user-visible behaviour.
Run checks automatically for every proposed change.
Create or inspect a GitHub Actions quality check.
Running tests only on one laptop.
Make a fix fail before it passes and challenge the happy path.
Add a failing-then-passing regression test.
Fixing the symptom without preventing its return.
Name valuable assets, likely attackers, entry points, and impact.
Create a compact threat map.
Protecting all data as if it has equal risk.
Keep credentials out of code and respond correctly to leaks.
Remove and rotate a deliberately leaked demo key.
Deleting the secret only from the latest commit.
Review the code your project imports and its origin.
Produce a dependency review report.
Installing a package because AI named it.
Reject unexpected data at a trusted server boundary.
Add schema validation to one endpoint.
Trusting input because it came from your own UI.
Render user and AI output without turning it into executable page code.
Repair an unsafe rendering example.
Rendering generated HTML directly.
Check permission for the exact resource and action.
Attempt and block cross-user record access.
Checking login without checking ownership.
Understand how a signed-in state is protected and ended.
Complete a secure-session checklist.
Storing sensitive tokens carelessly.
Restrict what the server accepts, fetches, and stores.
Design a limited upload flow.
Letting users make the server fetch any URL.
Prevent unlimited public use of costly actions.
Define per-user limits and a spend alert.
An unlimited public AI or API endpoint.
Collect useful evidence without storing secrets or unnecessary personal data.
Redact logs and rehearse a small restore.
Logging tokens, passwords, or complete personal records.
Understand each layer in an agent system.
Create a correct architecture diagram.
Treating MCP as another AI model.
Evaluate a connector before installing or authorizing it.
Complete an MCP trust checklist.
Installing a server from a random command.
Give tools only the exact access and time they need.
Design a read-only scoped integration.
Giving an agent administrator access.
Run untrusted or experimental work away from personal and production systems.
Map an isolated test environment.
Running unknown code on the main machine.
Recognize malicious instructions in user input and retrieved content.
Investigate a malicious webpage simulation.
Believing a system prompt completely solves injection.
Treat every model response as untrusted data.
Validate and sanitize structured model output.
Executing model output as trusted code.
Limit actions, time, turns, money, and reachable systems.
Create an autonomy budget.
Letting an agent decide and execute everything.
Require exact-target review before email, delete, payment, or publish actions.
Design an approval gate.
Approving a batch without seeing exact targets.
Separate project data from instructions embedded inside that data.
Resolve an instruction-conflict exercise.
Following hidden instructions in retrieved content.
Observe agent actions and stop them safely.
Create a red-team report and emergency stop plan.
Deploying autonomy without action-level visibility.
Call a model without exposing the secret to the browser.
Build a small protected API route.
Calling a paid model directly from frontend code.
Keep authority and untrusted content visibly separated.
Create a role-separated prompt structure.
Mixing retrieved data with high-authority instructions.
Request predictable data and still validate it in your application.
Parse a typed JSON result.
Parsing free-form prose with fragile string rules.
Let a model choose a tool while your code controls execution.
Build a safe calculator-style tool.
Letting the model invent tool arguments.
Keep long model calls responsive and bounded.
Create a stream with cancel and failure states.
Infinite loaders and unsafe automatic retries.
Ground an answer in selected sources and expose those sources.
Build a small cited document assistant.
Calling retrieval a guarantee of truth.
Store only useful context with user control.
Design memory and delete settings.
Saving complete chats forever by default.
Combine several safety controls and a human path.
Draw an input-and-output safety pipeline.
Treating one filter as complete safety.
Measure model behaviour on a repeatable set of cases.
Create a twenty-case feature evaluation.
Judging quality from one demo prompt.
Control quality, latency, availability, and cost over time.
Design a cost-aware model router.
Always using the most expensive model.
Give each environment a clear job and risk level.
Create an environment map.
Testing experimental code on real users.
Use separate credentials and settings across environments.
Build a development, preview, and production variable matrix.
Reusing one credential everywhere.
Share a realistic build before production promotion.
Publish and inspect a preview URL.
Sending the first successful build directly to production.
Require lint, test, and build checks before deployment.
Create a release gate checklist.
Deploying despite failed checks.
Prepare for code and data changes to fail.
Rehearse a restore and rollback.
Assuming hosting automatically equals a database backup.
Observe how the production system behaves for users and the business.
Create a small monitoring dashboard plan.
Discovering failures only from users.
Collect release evidence across devices and user needs.
Complete a release evidence pack.
Checking only the developer's browser.
Respond to failures and changing dependencies after launch.
Run a simulated incident and model migration.
Treating launch as the end of engineering.
Combine requirements, architecture, threats, tests, and rollback before the final build.
Produce an approved capstone plan.
Starting the final product from one huge prompt.
Ship a product with evidence, limits, and honest next steps.
Publish the app, repository, verification report, and postmortem.
Presenting a working demo as production-ready software.
Evidence, not internet soup
These links are starting points, not decoration. Model and software details are rechecked against official documentation before a lesson is published.
Keep free learning visible
A GitHub star is a tiny thank-you that helps the next vibe coder discover these free lessons.