Act as my web-development tutor. I want to learn [SKILL OR TOPIC] so I can build [TARGET PROJECT]. My current experience is [CURRENT LEVEL]. I can study [TIME AVAILABLE], using [TOOLS OR STACK]. My current blocker or confusion is [CURRENT BLOCKER]. Create a learning path that teaches the underlying concepts before asking me to use them. Start by diagnosing prerequisite gaps from my inputs, then give a sequence of 4–6 lessons. For each lesson, include: 1. The specific concept and why it matters in the target project. 2. A short explanation at my level, including the mental model and common misconception. 3. A 20–45 minute hands-on exercise that modifies or builds a real part of the project. 4. A check-for-understanding question that I must answer in my own words. 5. A small completion test or observable result. After the plan, provide the first lesson only, with starter code only where it helps me begin. Do not provide the complete solution to exercises unless I first share my attempt and ask for a review. When I share an error, explain what the message means, point to the smallest likely cause, and suggest a debugging sequence before proposing a fix. Use current, stable conventions for [TOOLS OR STACK], but do not invent documentation, APIs, package behavior, or version-specific facts. If a security-sensitive topic appears, explain safe defaults and tell me when to consult official documentation or an experienced reviewer. Before answering, check that every exercise contributes to [TARGET PROJECT] and that the plan does not assume knowledge beyond [CURRENT LEVEL] without teaching it. Ask up to 3 clarifying questions only if a required input is missing.
Fill in
| Placeholder | What to enter | Example |
|---|---|---|
| [SKILL OR TOPIC] | Enter the web-development topic you want to learn, such as React state, CSS layout, or API design. | React state and form handling |
| [TARGET PROJECT] | Enter a small, concrete project or feature you want to build. | a small reading-list app that lets users add, mark, and remove books |
| [CURRENT LEVEL] | Describe what you can already do and what you have not yet learned. | I know HTML, CSS, basic JavaScript functions, and have completed one React tutorial |
| [TIME AVAILABLE] | Enter your realistic weekly study time and any deadline. | four hours per week for six weeks |
| [TOOLS OR STACK] | Enter the languages, frameworks, editor, and environment you plan to use. | JavaScript, React with Vite, CSS, VS Code, and GitHub |
| [CURRENT BLOCKER] | Enter the error, confusing concept, or learning obstacle you currently face. | I can display an array with map but do not understand why state updates should use a setter |
How to use
- Fill in the prompt with a project small enough to complete within your available time.
- Answer each check-for-understanding question before asking for the next lesson.
- Run the completion test yourself and paste the exact error message or code attempt when you get stuck.
- Follow up with: “Here is my attempt at lesson 1: [CODE OR EXPLANATION]. Review it with hints only; do not give the finished solution.”
Variations
Code review tutor
Use this after you have written an attempt and need teaching-focused feedback.
Review my attempt at [FEATURE OR EXERCISE]. My goal is [LEARNING GOAL], my current level is [CURRENT LEVEL], and my code is [CODE]. First explain what the code currently does. Then identify the one or two most important issues, separating correctness, maintainability, and security concerns. Give hints and a debugging sequence before showing any corrected code. End with two questions that test whether I understand the fix. Do not rewrite the whole project or assume missing files behave a certain way. Ask up to 3 questions only if necessary.
Frontend project
Use this when you need a scoped plan for a portfolio-ready interface.
Help me plan a frontend project: [PROJECT IDEA]. I know [CURRENT LEVEL] and will use [STACK]. Define a minimum viable version that fits [TIMEBOX], then list 3 optional extensions. Break the work into accessible UI, state/data flow, responsive layout, and testing checkpoints. For each checkpoint, name a user-visible completion criterion and a likely beginner mistake. Do not prescribe a backend unless it is essential. Check that the scope matches the timebox and that accessibility is included from the first version. Ask up to 3 questions only if inputs are missing.
Debugging session
Use this when an error is blocking progress and you want to learn the cause.
Help me debug this web-development problem. My stack is [STACK], the expected behavior is [EXPECTED BEHAVIOR], the actual behavior is [ACTUAL BEHAVIOR], and the exact error or relevant code is [ERROR OR CODE]. Explain the error in plain language, list the smallest three likely causes in order, and give one test for each cause. Wait for my test results before offering a final patch unless the fix is obvious and low risk. Do not invent unseen files, configuration, or API responses. Check that suggested tests are safe and reversible. Ask up to 3 questions only if required.
Tips
- Choose a project with one user flow first, such as adding and completing a task, before adding accounts, payments, or a database.
- Keep a short learning log of errors, the cause you found, and the test that confirmed it; this turns debugging into reusable knowledge.
- Ask the model to explain a code change in terms of data flow and browser behavior, not only syntax.
- Use official framework documentation to verify version-specific installation and API details before adding packages or configuration.
FAQ
Can I use AI without becoming dependent on it?
Yes. Ask for exercises, hints, and explanation checks first, then compare the final solution with your own attempt. Avoid pasting a full answer before you can describe what each part does.
What project should a beginner start with?
Pick a small interface with local data and one clear user flow, such as a reading list or expense tracker. It teaches more than a clone that depends on many unfamiliar services.
Should AI fix every error for me?
No. Give it the exact error and your attempted diagnosis, then request tests and hints. You will learn faster when you run the checks and explain the cause back.