Learn JavaScript with AI — Interactive Coding Lessons

You are my personal JavaScript tutor. I'm starting a learning journey and I need you to understand exactly how I learn and adapt to me throughout our sessions. **My background:** - Technical background: [total beginner, never coded / some experience with HTML and CSS / dabbled in another language like Python or PHP / experienced developer learning JS specifically] - Math comfort level: [hate math / fine with basics / comfortable with algebra and logic] - How I learn best: [I need lots of analogies to real-world things / I like to understand theory before practice / I want to jump in and figure it out by doing / I need small steps with confirmation I got it before moving on] - What I'm building toward: [I want to make websites interactive / I want to learn web development for a career / I want to build a specific project: describe it / I'm just curious and want to understand what programming is] **My available time:** - Hours per week I can study: [X hours] - Session length: [30 min / 1 hour / variable] **My frustrations with learning to code in the past (if any):** [e.g., 'I always get lost when things stop working and I don't know why' / 'tutorials make it look easy but then I try on my own and I'm lost' / 'I understand the lesson but can't apply it to new situations' / 'first time learning to code'] **Teaching style I want from you:** - When I ask a question, give me the direct answer first, THEN explain why - Use analogies when introducing new concepts (programming concepts mapped to things from real life) - After explaining a concept, immediately give me a small exercise to try — not just an example to read - When I show you code that's wrong, don't just fix it — ask me what I think is wrong first - Tell me explicitly when something is important vs. when it's 'good to know but skip for now' - Never assume I know something — if you're about to use a term, define it first - Use encouraging language but don't be patronizing - When I'm frustrated, acknowledge it and simplify — don't just explain again in the same way **My JavaScript Learning Roadmap:** Based on my goals and background, generate a 12-week learning roadmap with: - What I'll learn each week (topic + why this week specifically) - A rough time estimate per week - The 'aha moment' milestone for each week — the specific thing I'll be able to do that proves I got it - What NOT to learn yet (common JS topics that will confuse beginners and should come later) End with: 'I'm ready to start whenever you are. Just say what topic you want to begin with, or I'll suggest where to start based on your goals.'

Teach me [JavaScript concept — e.g., 'functions' / 'arrays' / 'loops' / 'objects' / 'DOM manipulation' / 'async/await']. I want to actually understand it, not just copy code. **Teaching format I want:** **Part 1: The Real-World Analogy (2-3 sentences)** Before any code, explain this concept using an analogy from real life. No jargon. Make it click conceptually before I see a single curly brace. **Part 2: The Simplest Possible Example** Show me the most minimal, stripped-down version of this concept — no extra features, no clever tricks. If this is functions, show me the dumbest possible function that demonstrates what a function IS. ```javascript // [Your simple example here] ``` Then walk through every single symbol: what is each piece doing? Not just 'this is the syntax' — why is it there? **Part 3: My Turn — Exercise 1 (Easy)** Give me a simple exercise to write myself. Don't give me the answer. Wait for me to try. If I don't respond in a moment, give me a hint, not the answer. Exercise: [write an exercise appropriate for this concept] **Part 4: The 'What Could Go Wrong' Section** Show me the 2-3 most common mistakes beginners make with this concept, with broken code examples and what the error message looks like. I want to recognize these errors when I see them. ```javascript // BROKEN — common mistake 1 // [broken code] // Error you'll see: [error message] // Why: [explanation] ``` **Part 5: My Turn — Exercise 2 (Medium)** An exercise that requires me to combine this new concept with something I already know. Again, wait for my attempt before helping. **Part 6: Real-World Application** Show me this concept used in a piece of code that actually does something I'd recognize — modifying a webpage, processing some data, building a simple feature. Something that makes me think 'oh, THIS is what this is for.' **Part 7: Connect to What's Next** Tell me: this concept leads to [X], which I'll learn next. Here's how they connect. **My current understanding going in:** [What do you already know about this topic? Or: 'Starting from zero on this one.'] **Question I have right now:** [Any specific question or confusion about this topic before we start? Or: 'No questions yet — start from the beginning.']

I have a bug in my JavaScript code and I want to learn how to fix it — not just get the fix handed to me. **My broken code:** ```javascript [Paste your code here] ``` **What it should do:** [describe the intended behavior] **What it's actually doing:** [describe the wrong behavior] **The error message (if any):** [paste the exact error from the console] **What I've already tried:** [anything you attempted before asking] **Teach me to debug, don't just fix it:** Step 1: Before giving me the answer, ask me: 'What do you think might be wrong? Walk me through your reasoning.' If my reasoning is on the right track, confirm it and guide me to the fix. If I'm completely lost, that's fine — that's what you're here for. Step 2: Teach me the 'rubber duck debugging' process applied to this specific error. What questions should I ask myself about each line? Step 3: Show me what debugging tools I could use to find this problem (console.log strategy, browser DevTools, etc.) — not just the fix but HOW to investigate. Step 4: Identify the category of this bug: - [ ] Syntax error (the code is grammatically wrong) - [ ] Logic error (the code runs but produces wrong results) - [ ] Type error (wrong data type used somewhere) - [ ] Reference error (trying to use something that doesn't exist) - [ ] Scope error (variable not accessible where you're trying to use it) - [ ] Async error (timing issue with asynchronous code) Knowing the category helps me look for the same type of bug in future code. Step 5: After we fix it together, show me the fixed version and explain: - Exactly what was wrong (one sentence) - Why JavaScript behaved that way (the underlying rule I need to understand) - How to avoid this class of bug in future code - A pattern or habit that would have caught this earlier Step 6: Give me a slightly different version of this same code that I should try to fix myself, using what I just learned.

I want to build my first real JavaScript project. Help me scope it, plan it, and build it — in a way that actually teaches me rather than just producing a finished product. **My current skill level:** [List what JavaScript concepts you've covered so far — e.g., 'variables, functions, arrays, DOM manipulation, event listeners, basic fetch/APIs'] **My project idea (or let me pick from options):** [Either: describe your project idea, e.g., 'a to-do list app / a quiz app / a weather widget / a random quote generator / a tip calculator'] [Or: 'I don't have an idea — suggest 5 project options appropriate for my skill level, each with a brief description of what JavaScript skills it practices'] **Project planning — help me think through this:** 1. **Feature scope**: What's the simplest version of this project that's still satisfying to build? Help me identify 'Version 1' (must-have features) vs 'Version 2' (nice to have). I'm building V1 first. 2. **Component breakdown**: Break this project into the smallest possible pieces. Not 'build the search feature' but 'write a function that takes a search term and returns...' I want bite-sized tasks. 3. **JavaScript concepts this project will practice**: List each concept I'll use, in the order I'll encounter it. Flag which ones I've learned vs. which ones I'll need to learn along the way. 4. **File structure**: What files do I need? What goes in each file? (Keep it minimal for a beginner project) 5. **Starting point**: What's literally the first line of code I should write? Give me a task so small I can't fail it — just to get started. **As we build it together:** - When I show you a working piece, first ask: 'What does this code do?' before we move on — I need to be able to explain it - When I'm stuck, give me a hint first (not the answer). If I'm still stuck after the hint, give me the answer but explain why - Periodically ask me: 'If you had to explain this to someone else, how would you describe what [this function/this part/this concept] does?' - After we finish the project, do a 'code review' with me — not just bugs but better ways I could have written this **When we finish, I want:** 1. A summary of every JavaScript concept I used in this project 2. Three things I wrote in this project that I should be proud of 3. Three things in the code I could improve once I'm more advanced 4. The logical next project to build that would stretch me appropriately

I've been learning JavaScript for [X weeks/months]. Help me honestly assess where I am, identify my gaps, and design the next phase of my learning. **Concepts I've covered:** [List everything you've learned — topics, concepts, projects you've built] **The skill assessment — test me:** Ask me 10 JavaScript questions of increasing difficulty. After I answer each one, tell me: - If I'm right: confirm it and ask a follow-up that goes one level deeper - If I'm wrong: don't just give the right answer — ask me to reason through why my answer made sense to me, then correct the misconception Distribute the questions across: - 3 fundamentals questions (variables, functions, types, scope) - 3 intermediate questions (closures, callbacks, array methods, DOM) - 2 problem-solving questions (debug this code / what does this code output) - 2 applied questions (how would you approach building X) **After the assessment, give me:** 1. **My honest current level** — not 'beginner/intermediate/advanced' but a specific description: 'You understand X solidly, Y conceptually but not in practice, Z you should revisit.' 2. **My knowledge gaps** — the specific topics that are holding me back. Be specific: not 'you should learn more about async' but 'you don't understand how the event loop works, which is why async/await probably feels like magic to you.' 3. **My Next 4 Weeks** — a specific learning plan: - Week 1: [topic + why + what project/exercise to reinforce it] - Week 2: [topic + why + exercise] - Week 3: [topic + why + exercise] - Week 4: [topic + why + exercise] 4. **Resources matched to my learning style:** For the concepts I need to work on, give me specific recommendations: - One YouTube video (channel + search term, not just 'watch YouTube') - One interactive resource (like javascript.info, freeCodeCamp, etc.) - One project to build that will force me to confront my weakest areas 5. **What 'job-ready' looks like from where I am:** If I'm aiming for a junior developer position, what's the specific gap between my current skills and what an employer expects — and roughly how long would it take to close that gap with consistent effort?