You've successfully installed Claude Code. Now, we bridge the gap between having a tool and using it effectively. This module is about building muscle memory for the single most important workflow: turning a plain English idea into a working product. For a consultant, this is the superpower that translates client needs into tangible, value-adding solutions, fast.
This is the pattern you will repeat for almost every task you do with Claude Code. Internalize it, and you'll be able to build anything. This isn't a linear process; it's a rapid loop. You'll cycle through these steps dozens of times to build complex tools, making small, verifiable progress at each stage.
Let's walk through the cycle with a simple, tangible goal. We'll add a button to a blank HTML page. This is your first "rep" to build the muscle memory.
Before we can use Claude Code, you need a code editor installed on your computer. Think of this as the workspace where you'll see files and where Claude Code will show its suggestions.
Let's see if you already have one of these editors installed:
🍎 On Mac:
🪟 On Windows:
💰 Cost: 100% FREE — No credit card, no trial, no hidden fees!
What is VS Code? Visual Studio Code (VS Code) is a free, open-source code editor made by Microsoft. It's what most developers use worldwide, and it's perfect for learning. You get all features for free, forever.
📥 How to Download & Install VS Code:
✅ Success looks like: VS Code opens and you see a welcome screen with "Get Started" options. You're ready to continue!
💰 Cost: FREE for 2 weeks, then $20/month (but you can use the free trial for this tutorial!)
What is Cursor? Cursor is a newer code editor that's built on top of VS Code with extra AI features. If you already have it installed, you can use it instead! Note: While Cursor has paid features, Claude Code itself works the same way in both editors.
🎯 Using Cursor Instead of VS Code:
The good news: Cursor works almost exactly the same as VS Code for our purposes! Anywhere this tutorial says "VS Code," just use "Cursor" instead.
Key differences:
💡 Don't have Cursor but want to try it? Visit cursor.sh to download. Installation is similar to VS Code (download → install → open).
For This Tutorial: Use VS Code. It's 100% free forever and has everything you need. It's simpler for learning, and you can always try Cursor later once you're comfortable with the basics.
If You Already Use Cursor: That's great! Cursor works identically for this tutorial. Just follow along and substitute "Cursor" anywhere you see "VS Code." The Claude Code setup and workflow are exactly the same.
Once you have VS Code or Cursor installed and can open it, you're ready to create your practice workspace below!
Now that you have an editor installed, let's create a safe place to practice. Think of this like setting up a sandbox where you can experiment without breaking anything important.
We'll create a folder called Claude_Practice on your Desktop where you can safely try things out.
🍎 On Mac:
🪟 On Windows:
If your Desktop is synced to OneDrive (common on Windows), your path might look like C:\Users\YourName\OneDrive\Desktop — that's perfectly fine! The folder just needs to be somewhere you can easily find.
Alternative: Use Documents instead
If you're not comfortable with Desktop, create the folder in your Documents folder instead. Same process: just right-click in Documents → New Folder → name it Claude_Practice.
Remember: You're using Windows Explorer/Mac Finder (the normal way!), not typing commands. Just create a folder like you would for any other file.
Now let's create a basic HTML file that we can practice editing. Don't worry if you don't understand HTML — you don't need to!
<!DOCTYPE html>
<html>
<head>
<title>My Practice Page</title>
</head>
<body>
<h1>Hello from Claude Practice!</h1>
</body>
</html>💡 Quick test: Double-click your index.html file. It should open in your web browser and show "Hello from Claude Practice!" — that means it worked!
Now we'll open your practice folder in VS Code (the program where Claude Code lives).
Method 1: Through VS Code (Easiest)
Method 2: Right-click the folder (If you have VS Code installed)
✅ Success looks like:
You now have a safe sandbox where Claude Code can make changes. Nothing you do here will affect your important files. Let's make your first edit!
If you're new to VS Code or can't find where things are, hover over each numbered region below to see what it does:
After clicking the orange Claude icon, you'll see a screen like the one above. Here's how to ACTUALLY start chatting:
Option 1: Use the Keyboard Shortcut (Fastest)
This opens the chat input immediately. Type your request and press Enter!
Option 2: Click "Open Chat" (Visual Method)
Look for the "Open Chat" button in the default screen (see screenshot above)
You'll also see other shortcuts like "Show All Commands" and "Go to File" — ignore those for now.
Option 3: Command Palette
Claude: Open Chat🚨 Don't get stuck here! Most new users see this screen and don't know what to do next. Use Ctrl+Alt+I to start chatting immediately!
Look in the TOP RIGHT corner of VS Code!
The orange sunburst icon is NOT in the left sidebar. It's in the top right toolbar, next to the split panel icon (📱) and the three dots (⋯).
It took me 15 minutes to find it too — VS Code updates change the layout!
If the Claude extension is not installed or needs updating:
💡 Quick Start: Look TOP RIGHT → Click orange sunburst → Press Ctrl+Alt+I → Type request → Enter!
Open the Claude Code side panel in VS Code. In the chat input, type your request clearly and specifically:
Add a blue button that says 'Click Me' and shows an alert when clickedClick below to watch the full cycle: You type → Claude generates → Diff appears → You approve:
Click the Play button to watch the entire workflow — from typing your request to reviewing and approving the changes.
Claude shows a diff and asks for your approval. Review the proposed edits:
<h1>Hello from Claude Practice!</h1>+ <button onclick="alert('Button clicked!')" style="background-color: blue; color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer;">Click Me</button>Your options:
Tip: Type 1 or click the blue button to approve. Green lines = added code. No files change until you say yes!
The most important step in the cycle is reviewing the 'diff' (difference). This is your safety net and your learning tool. It shows you exactly what Claude proposes to change. Hover over each line below for an explanation.
<h1>Hello</h1>
This line is unchanged context. Claude shows it to help you see WHERE the change is happening.
+ <button style="background-color: blue; ..." onclick="alert('Hello!')">
A green '+' means this entire line is being ADDED to your file.
+ Click Me
This is the text that will appear inside the new button.
+ </button>
This closes the new button element, completing the addition.
Exactly how it appears in VS Code. Review the diff:
<h1>Hello from Claude Practice!</h1>
+ <button onclick="alert('Button clicked!')" style="...">Click Me</button>What to do: Press 1 on your keyboard or click the blue "1 Yes" button. Green lines = additions, red = deletions.
Don't be surprised if Claude asks for approval more than once. This is NORMAL and happens when:
What to do: Review each change and select "1 Yes" if it looks good.
For now, as you're learning, it's safe to approve Claude's suggestions. The iterative approval process is a safety feature, not a problem!
This is Claude Code's core philosophy:
AI proposes, humans decide. Every single change requires your explicit approval. No surprises, no automatic edits, no "trust me" moments.
This review step isn't a formality — it's your power. You're the architect, Claude is the builder who shows you blueprints before construction.
Before approving, ask yourself these 3 quick questions:
1. Does it add what I requested?
Example: "A blue button that shows an alert"
✓ YES
2. Is it removing anything I want to keep?
Look for red lines with a '-' sign
✓ NO (safe)
3. Do I understand the gist of what it's doing?
You don't need to understand every detail, just the big picture
✓ YES (adding button code)
✅ Decision: This is a safe and accurate change. Approve it!
After you click Approve in the editor modal, the changes are saved. Now, verify them.
You described what you wanted in English, reviewed the code Claude suggested, approved it, and saw it work in real-time. This is the foundation for everything you will build.
Prompting, reviewing diffs, and contextual editing feel the same across modern AI coding tools. You describe an intent, the assistant proposes a change, and you see exactly what will happen in context.
Claude Code adds an explicit approval loop: every change is presented as a diff, and no file is modified until you approve. This one step is the safety rail that keeps you in control of your codebase.
One extra click = full control. Compliance‑friendly for consultants and analysts.
Beyond chat, Claude Code exposes common actions via your IDE’s command palette for fast workflows:
These map directly to the Request → Diff → Approve loop and keep you in flow.
One of the most powerful commands for beginners is "Explain code like a 5 year old". Here's how to use it:
How to use it:
explain code like a 5 year oldExample Response:
"Imagine you're building with LEGO blocks! Let me explain what each part does: The HTML file is like a toy box with different sections:"
<!DOCTYPE html> - This says "Hey, I'm making a webpage!"<head> section - Like the instruction manual for your toy<style> - Picking colors for your LEGO! Says the button should be blueWhy this matters: Our goal isn't to make you memorize code. But occasional encounters with simple explanations build comfort and pattern recognition. Over time, you'll start recognizing structures without needing to understand every technical detail. It's like learning to drive — you don't need to know how the engine works to navigate safely!
💡 Pro Tip: Use this command whenever you see code that Claude generated and you're curious "What does this actually do?" The gentle explanations help you learn by osmosis, without forcing you to study.
Greatness isn't achieved in one step. The real power of this workflow is how easy it is to refine your work. Let's improve the button we just made.
Back in your terminal, the Claude session is still active. You can continue the conversation, building on the previous context.
Your prompt can be short and direct because Claude remembers what you were just doing.
change the alert message to 'Welcome to my calculator!'Notice how the diff is much smaller. It only shows the single line that changed. This makes reviews incredibly fast and builds confidence.
make the button bigger and center it on the pageYou didn't need to know all the requirements upfront. You started with a basic version, tested it, and then refined it. This Build → Test → Refine loop is how all modern software is built. With Claude Code, each iteration costs pennies and takes seconds.
Right now, your alert box is functional but basic (plain browser alert). Let's apply what you just learned about iteration to make it feel professional with proper centering and styling!
Your Prompt to Claude
"Replace the alert with a custom modal box that:
- Centers horizontally and vertically on the page
- Has a dark background overlay
- Shows a white box with title 'This page says' and message 'Welcome to my calculator!'
- Has an OK button to close it
- Looks professional and modern"
❌ Before (Browser Alert):
• Off-center, awkward positioning
• No character or style
• Can't customize look
✅ After (Custom Modal):
• Perfect center alignment
• Professional appearance
• Full control over design
What to expect
💡 What You're Actually Learning (Without Realizing It):
You're building intuition about modal boxes — those popup overlays you see everywhere (login forms, confirmations, image viewers). By seeing how Claude structures one, you'll start recognizing the pattern: overlay + centered box + close button. Next time you want to add ANY kind of popup to your tools, you'll intuitively know how to ask Claude for it!
Bonus: Once you see the result, try clicking outside the modal box. Ask yourself: "Should that close the modal?" This kind of thinking is UX design — and you're starting to develop that muscle!
You might have noticed "This page says" sounds old-fashioned — that's because it's browser language from the 1990s! Let's iterate one more time to make it sound modern and professional.
The Problem with "This page says"
❌ Old-World Style
"This page says"
→ Feels like a browser error
→ Impersonal and technical
✅ Modern Style
"Welcome!" or "Getting Started"
→ Friendly and inviting
→ App-like experience
Your Next Prompt
"Update the modal to be more modern and welcoming:
- Change title from 'This page says' to 'Welcome! 👋'
- Update message to 'Ready to build something amazing? This is your practice space for creating financial tools.'
- Make the OK button say 'Let's Start!' instead
- Add a subtle animation when the modal appears"
💡 Why This Matters:
Language shapes user experience! "This page says" makes users feel like something went wrong. "Welcome!" makes them feel invited. When you build tools for clients, this attention to welcoming language separates amateur-looking tools from professional ones. You're learning to think like a product designer — not just making things work, but making them feel RIGHT.
What You'll Notice After This Change
Design Insight: Every word, every animation, every color choice either builds trust or creates friction. You're developing an eye for these details!
You've practiced the workflow. Now, let's build something genuinely useful for your work as a financial consultant. This project should take about 20 minutes end‑to‑end. This is not just practice; you are building a reusable asset.
It's best practice to give every new project its own folder. This keeps your work organized and prevents Claude from getting confused by unrelated files.
Most users prefer the GUI method (left column) — it's the familiar way you already know. The terminal commands (right column) are optional and included for reference.
| 🖱️ GUI Method (Recommended for Most Users) | ⌨️ Terminal Method (Optional) |
|---|---|
|
Use Windows Explorer (PC) or Finder (Mac)
💡 Seeing OneDrive in your path? Paths like |
Use Terminal/Command Line Step 1: Navigate to Desktop Step 2: Create and enter CompoundInterest folder |
Our first request will ask for the skeleton of the calculator: the HTML inputs and basic layout. We're not worried about the math yet, just the user interface.
In VS Code: Create an HTML file with a compound interest calculator. Include input fields for: initial investment, monthly contribution, annual interest rate, and number of years. Add a Calculate button.Claude will propose creating a new file (e.g., `calculator.html`). The diff will be all green `+` lines. You should see:
<!DOCTYPE html>, etc.)<style> section with some basic, professional CSS.<body> containing a form with the four <input> fields you requested.<button> and a <div> to hold the results.This is the structure; the logic comes next. Approve it.
The page looks right, but the button does nothing. Now we add the brain: the JavaScript calculation function.
In VS Code: add the calculate() function that computes compound interest with monthly contributions and displays the result showing: future value, total contributions, and interest earned.Claude will add a <script> tag to your HTML file, likely before the closing </body> tag. Inside, you'll see a function named calculate(). You don't need to be a math expert to approve this:
This is the "engine" of your tool. Approve it.
Open `calculator.html` in your browser. It's time to test it like you would any financial tool. Use known values to verify the logic.
Click Calculate. The results should appear. Expected Future Value: $273,915.64.
Try different values. Does it update correctly? Congratulations, you just built a functional, reusable financial tool from scratch using plain English!
Now that it works, you can easily add professional touches. Each of these is a simple, conversational follow-up request.
"show an error message if any fields are empty or if values are negative""format the currency results with commas for thousands separators""add my company name 'Smith Financial Advisors' at the top and use our navy blue color (#003366) for the button and header""using Chart.js, add a pie chart showing the breakdown of total contributions vs interest earned""add a Print Results button that formats the output nicely for printing"Each refinement is just another turn of the Request → Approve → Verify cycle, allowing you to layer on complexity with confidence.
Share your calculator with a simple link. Think of CodePen or JSFiddle as "YouTube for code"—you paste your HTML, and they give you a web page you can share.
calculator.html file in VS Code and copy all its contents.<style> or <script>, paste them into the CSS/JS panels.You don’t need GitHub or hosting to show your work. These sites are point‑and‑click. If something doesn’t look right, ask Claude: “Make this work on CodePen; move styles to CSS and scripts to JS.” Approve the diff and paste again.
Let's check your understanding of these core concepts before moving on.
The quality of your output is directly tied to the quality of your input. Learning to "talk" to Claude effectively is the difference between getting a generic response and a perfect one. Let's master the art of the request.
Vague requests lead to vague results. Specificity is key. Click each pair below to see the difference in action.
This is subjective. "Better" could mean bigger, faster, more colorful, or simpler. Claude has to guess.
Why it's better: It's specific, measurable, and provides clear, actionable instructions. There is no ambiguity.
"Stuff" is meaningless. Claude doesn't know if you want more input fields, a chart, or a print button.
Why it's better: It defines exactly what feature ("inflation rate field") and what behavior ("adjusts the final value") you want.
When something is broken, just saying "fix it" forces Claude to analyze the entire file. It might fix the wrong thing.
Why it's better: It describes the symptom ("button isn't responding") and suggests a location ("onclick handler"), dramatically narrowing the search space and leading to a faster, more accurate fix.
This is far too broad. The result will be a generic template that doesn't meet your needs, wasting time and tokens.
Why it's better: It breaks a large, ambiguous request into specific, structural components. This allows you to build complex pages piece by piece.
To make writing good prompts easy, use this memorable acronym. It structures your thoughts and ensures you provide all the information Claude needs.
Elegant, Claude-ready prompt:
C – Context: Enhance a loan calculator for small business clients.
L – Location: Within calculator.html's results section.
E – Expected Outcome: Display results as a styled, responsive table.
A – Avoid: Do not alter existing input fields or form logic.
R – Reasoning: Clarity and printable results are crucial for client documentation needs.
You know the workflow and how to communicate. Now, let's optimize the process to save time, reduce costs, and build faster.
Each request has a small overhead. Combining related changes into a single, clear request is far more efficient.
$ "Make the button blue"
$ "Make the button bigger"
$ "Center the button"
Why it's slow: Three separate API calls, three approvals, three cycles. Takes longer and costs more.
$ "Make the button blue, larger (about the size of a standard action button), and centered on the page"
Why it's fast: One API call, one approval, one cycle. Completes in seconds.
💡 Tip: Describe visually ("larger", "standard size") instead of using code terms ("padding: 15px 40px").
Let's break down what's really happening when you batch vs. split requests:
3 requests: ~15-20 seconds each = 45-60 sec total wait
1 batched: ~20-25 seconds = 20-25 sec total wait
You save: 25-35 seconds (50% faster!)
3 requests: Each re-sends file context = 3× overhead
1 batched: Context sent once = ~40-60% fewer tokens
Your wallet: Same result, less cost
3 requests: Review diff 3×, context-switch 3×, approve 3×
1 batched: One focused review session
Your brain: Less mental overhead, fewer errors
3 requests: See changes piecemeal, lose big picture
1 batched: See complete transformation in one diff
Your learning: Better grasp of how changes work together
💡 The Real Insight
Each API call has fixed overhead (loading context, initializing, formatting response). It's like making 3 separate trips to the store for milk, eggs, and bread vs. one trip for all three. The per-item time is the same, but you save on travel time. Batch when changes are related; split when they're independent experiments.
Instead of repeating style guides or constraints in every session, create a special instructions file called `CLAUDE.md` in your project's root folder. Claude reads this file automatically at the start of every conversation for context.
Think of it as a sticky note for Claude. It's a simple text file where you write down preferences you want Claude to remember for THIS project (like colors, style, what NOT to change, etc.).
The .md just means "Markdown" (a way to format text). Don't worry about it — you're just typing plain text with a few symbols like # for headings.
Click the button above to copy this example — you'll customize it in a moment:
# Financial Calculator Project
## Style Preferences
- Use navy blue (#003366) as the primary color
- Keep the design clean and professional
- Make sure buttons are large enough to click easily
## Important Rules
- Don't change the calculation formulas
- Always show currency with 2 decimal places
- Keep all error messages friendly and helpful
## Tone
- Use professional language (avoid slang)
- Explain financial terms if you use themThe # and ## are headings, the - makes bullet points. That's it!
📝 When VS Code Asks "Select File Type"
When you click "Save As," VS Code will show a dropdown asking for the file type. You'll see options like "Text File Built-In," "Jupyter Notebook," etc.
Just type the filename directly: CLAUDE.md
💡 Learning moment: The .md extension tells VS Code "this is a Markdown file." VS Code will automatically recognize it and give you nice formatting. The dropdown is just a shortcut — typing the full filename with extension works perfectly!
Ctrl+N)index.html file (probably Claude_Practice or CompoundInterest on your Desktop)Why all caps? It's a convention (like README.md) to make it stand out in file lists. When you have 10-100 files, all caps file name helps easy finding. But honestly? claude.md or Claude.md works just fine! Claude will find it. Use what you prefer.
✓ Success looks like: You see CLAUDE.md with a small "M↓" icon in VS Code's left sidebar, next to your index.html file. The icon means VS Code recognized it as Markdown!
💡 Don't want to write it yourself?
Ask Claude Code: "Create a CLAUDE.md file for this project. I want professional tone and navy blue colors." — Claude will write the whole thing for you!
With this CLAUDE.md file in your project folder, you no longer need to repeat "use navy blue" or "keep it professional" in every request. Claude reads this file automatically at the start of each conversation and remembers your preferences. This saves enormous time and ensures consistency across your entire project.
CLAUDE.mdYou ask Claude the exact same question: "Write a professional email summarizing Q4 results." Watch how the response changes when you have a CLAUDE.md file with your preferences:
CLAUDE.mdGeneric, no personality
Subject: Q4 Summary
Your Q4 summary is complete.
Highlights: revenue, costs, and net margin.
Please review.
CLAUDE.mdProfessional tone, client-friendly language
Subject: Client‑friendly Q4 Summary
Dear Client A — your Q4 summary highlights steady growth with disciplined cost control.
We saw revenue up 6.2% and margin +90 bps.
Next steps: confirm targets for Q1.
💡 The Magic: Claude automatically applied your tone preferences (professional, client-friendly) and style guidelines from CLAUDE.md — without you having to repeat them in your request!
CLAUDE.mdDraft a tiny CLAUDE.md for a fictional financial client project. Use the quick reference below to format it properly.
💡 Pro tip: You don't need to memorize this! Just type normally and add # for headings and - for bullet points. That's 90% of what you'll use.
Draft a CLAUDE.md for a fictional financial tool. Include: project goal, tone preferences, and 2-3 rules.
Practice makes perfect. These timed challenges help you build speed and confidence with the core workflow.
Create an HTML file with a styled button. Can you do it in under 2 minutes?
Target: Under 2 minutes | Your time: --:--
Celebrate your achievements! Click on each badge as you complete the milestone. Hover to see details.
You've learned the workflow. Now it's time to practice on your own! Each exercise below gives you the destination (what to build) and waypoints (key milestones to hit). Your job: Fill in the steps to get there.
Think of this like getting directions: "Drive from New York to Boston. You'll pass through Hartford." We tell you the start, the end, and a few landmarks. You figure out the exact route.
This is how you learn to think independently with Claude, not just follow recipes!
🎯 The Destination
Create a portfolio rebalancing calculator. Include current allocations for stocks/bonds/cash, target allocations, and show how much to buy/sell of each to rebalance.
📍 Waypoints (Key Milestones)
Hit these checkpoints in order. Fill in YOUR steps to get from one to the next:
Create a new HTML file called rebalancer.html
Your steps: _________________
Ask Claude to add 6 input fields: Current Stocks/Bonds/Cash % and Target Stocks/Bonds/Cash %
Your steps: _________________
Add a "Calculate" button that shows how much to buy/sell to rebalance
Your steps: _________________
Test with example: 60/30/10 current → 50/40/10 target
Your steps: _________________
Improve styling: professional colors, clear layout, larger buttons
Your steps: _________________
Show it to a colleague and get feedback!
💪 Challenge upgrade: Add a field for "Portfolio Value" and show dollar amounts to buy/sell, not just percentages!
🎯 The Destination
Build a tool that compares two loan offers side-by-side. Show monthly payment, total interest paid, and which one is better.
📍 Waypoints (Key Milestones)
Create loan-compare.html with a side-by-side layout (two columns)
Your steps: _________________
Each side needs: Loan Amount, Interest Rate %, Loan Term (years)
Your steps: _________________
Add "Compare" button that calculates monthly payment and total interest for both
Your steps: _________________
Highlight the better deal in green, the worse one in yellow
Your steps: _________________
Test with two loans: $200k @ 6% for 30y vs $200k @ 5.5% for 20y
Your steps: _________________
Save it and use it with real clients!
💪 Challenge upgrade: Add a third loan option and show all three side-by-side!
🎯 The Destination
Create a calculator that tells clients when they can retire based on their current savings, monthly contributions, and target retirement amount.
📍 Waypoints (Key Milestones)
Create retirement.html with input fields for Current Age, Current Savings, Monthly Contribution, Target Amount, Expected Return %
Your steps: _________________
Add "Calculate Retirement Age" button
Your steps: _________________
Show result like: "You can retire at age 67" and "That's in 22 years (Year 2047)"
Your steps: _________________
Test with example: Age 35, $50k saved, $1k/month, $2M target, 7% return
Your steps: _________________
Add a visual progress bar showing "% toward goal"
Your steps: _________________
Try different scenarios to see how contributions affect retirement age!
💪 Challenge upgrade: Add a chart showing how savings grow over time!
🎯 The Destination
Build a tool that shows clients which tax bracket they're in and how much they'd save by contributing to a 401k or IRA.
📍 Waypoints (Key Milestones)
Create tax-optimizer.html with input for Annual Income and Filing Status (Single/Married)
Your steps: _________________
Show current tax bracket (e.g., "You're in the 24% bracket")
Your steps: _________________
Add slider for 401k contribution amount ($0-$23,000)
Your steps: _________________
Show "Tax Savings" in big numbers (e.g., "Save $3,840 in taxes this year!")
Your steps: _________________
Test with $100k income, Single, $10k contribution
Your steps: _________________
Show clients real dollar savings to motivate retirement contributions!
💪 Challenge upgrade: Add a comparison showing take-home pay with vs without the contribution!
🎯 The Destination
Help clients decide if they should rent or buy by comparing total 5-year costs including opportunity cost of down payment.
📍 Waypoints (Key Milestones)
Create rent-vs-buy.html with two sections: Rent Scenario and Buy Scenario
Your steps: _________________
Rent section: Monthly Rent, Annual Rent Increase %. Buy section: Home Price, Down Payment %, Interest Rate %, Property Tax, Maintenance
Your steps: _________________
Calculate total 5-year cost for both scenarios
Your steps: _________________
Show recommendation: "Rent saves you $XX,XXX over 5 years" or "Buying is $XX,XXX cheaper"
Your steps: _________________
Test with $2,500/month rent vs $500k home with 20% down
Your steps: _________________
Use it to help clients make the biggest financial decision of their lives!
💪 Challenge upgrade: Add opportunity cost calculation (what if down payment was invested instead?)
Write Down Your Steps FIRST
Before you open VS Code, write down (on paper or in notes) what you think each waypoint will require. "To create rebalancer.html, I'll need to... 1) Open VS Code, 2) Ask Claude..." This makes you THINK, not just follow recipes.
Experiment Without Fear
If you get stuck, try a different prompt. If something breaks, ask Claude "what went wrong?" These are practice tools, not client work. Break things and learn!
Start with Exercise 1, Don't Skip Around
These are ordered by difficulty. Master the portfolio rebalancer before attempting the rent vs buy analyzer. Each one builds skills for the next.
Set a Timer for 45 Minutes
If you're not done in 45 minutes, take a break. Come back fresh. Your brain processes better with rest. This isn't a race.
Want more inspiration? Browse these additional project ideas and try building your own variations!
Take the calculator you built and ask "What if...?" This is how simple tools evolve into powerful applications.
claude "add a 'Save as PDF' button"claude "Create a comparison view with two calculators side-by-side"claude "add a 'Share' button that generates a unique link with the inputs"Technical skill is only half the battle. The other half is overcoming the psychological hurdles of working with a new tool. Let's address the common fears head-on.
Before starting your work, open the terminal, `cd` into a project folder, and ask Claude one simple question like "what's one way to improve this file?" You don't have to implement the change. The goal is to make the terminal a familiar, non-intimidating space.
Every Friday, spend 30 minutes building a small, non-work tool just for you. A personal budget tracker, a recipe cost calculator, a workout logger. No pressure, no stakes. Just the fun of creation. This builds fluency.
This is the golden rule. Build this habit loop:
Approve the change (click "Approve" or type y)
Switch to browser (Alt+Tab on Windows, Cmd+Tab on Mac)
Refresh the page (Ctrl+R on Windows, Cmd+R on Mac)
Test it! Does it work as expected?
Why this matters: This catches problems when they are small and easy to fix, saving you hours of future debugging.
Create a simple file named `wins.md` in your main work folder. Each time you build something, log it. Reviewing this log provides a powerful psychological boost and tracks your progress when you feel stuck.
| Date | What I Built | Time | What I Learned |
|---|---|---|---|
| Oct 5 | Blue button | 5min | Reading diffs is easy |
| Oct 5 | Calculator | 20min | Iteration is cheap |
| Oct 6 | Contact form | 15min | Validation matters |
| Add your own wins here... | |||
Pro tip: Create a file called wins.md in your projects folder and copy this table format. Update it weekly!
Perfection is the enemy of done. For most tools, getting to 85% "good" is the sweet spot. The final 15% of polish can take as much time as the first 85%. Get it working, get it usable, and then move on. You can always iterate later.
One final check to solidify your learning from this module.
You have internalized the core development loop: REQUEST → RESPONSE → DIFF → APPROVE → VERIFY → ITERATE. This is the fundamental pattern for building software with an AI partner.
You can now confidently read diffs (green for added, red for removed), make approval decisions, test results in a browser, and use the CLEAR framework to write effective, unambiguous requests. You've learned that iteration through conversation is more powerful than trying to craft one perfect command.
You've moved beyond theory and built two functional pieces of software from scratch: an interactive button and a genuinely useful compound interest calculator. You know how to take a project from a blank folder to a working tool.
Perhaps most importantly, you've shifted your mindset from "I need to know code to build things" to "I need to clearly describe what I want." You've learned that mistakes are cheap, iteration is fast, and you can't permanently break things in a practice folder. You have built a foundation of confidence.
You can build tools. You can iterate. You can approve changes with confidence. You've created a working compound interest calculator and practiced with 5 real financial tools.
You have to repeat your preferences every single time. "Use navy blue. Keep it professional. Don't change the formulas." This gets tedious fast when you're building real client tools.
Module 4: Teaching Claude About Your Project — You'll learn how to create a project briefing file (CLAUDE.md) that teaches Claude your style, rules, and tone ONCE. From then on, every conversation starts with Claude already knowing your preferences. No more repeating yourself!