Session 3: Power Tools - PowerShell & Claude Code

Transition from Building Manually to AI-Powered Development

Windows PowerShell Claude Code Anthropic Console Node.js

🚀 Welcome to the Next Level!

Today's Journey: We're moving from copy-paste HTML to having AI build complete applications for you!

By the end of this session, you'll have Claude Code installed and building a custom project tailored to YOUR specific needs.

⚠️ Budget Alert: We'll set a $5 spending limit in Anthropic Console. This is MORE than enough for dozens of projects. Most tasks cost only pennies!
⚡

Part 1: Meet PowerShell - Your Command Center

30 minutes

1 What is PowerShell?

PowerShell is like a super-powered text messenger for your computer. Instead of clicking through menus, you type commands to:

  • Install software automatically
  • Manage files and folders
  • Run Claude Code and other development tools
  • Automate repetitive tasks

Think of it as: Texting instructions to your computer instead of using the mouse!

2 Opening PowerShell (Windows)

Method A: The Quick Way

Press Windows + X then press A

This opens PowerShell as Administrator (recommended)

Method B: The Search Way

  1. Click the Start button
  2. Type "PowerShell"
  3. Right-click "Windows PowerShell"
  4. Select "Run as Administrator"
  5. Click "Yes" when asked for permission
Mac Users: Use Terminal instead. Find it in Applications → Utilities → Terminal

3 Your First PowerShell Commands

Let's test that PowerShell is working. Type these commands one at a time:

# Check PowerShell version PS> $PSVersionTable # See where you are PS> pwd # List files in current folder PS> ls # Create a new folder for our projects PS> mkdir CoordinatorProjects # Move into that folder PS> cd CoordinatorProjects
✅ Success! If you see responses to these commands, PowerShell is working perfectly!
🟢

Part 2: Install Node.js (Required for Claude Code)

20 minutes

1 Why Node.js?

Node.js is like the engine that makes Claude Code run. Without it, Claude Code can't work. It's free and safe!

2 Download and Install Node.js

  1. Open your browser and go to: nodejs.org
  2. Click the big green button that says "LTS" (Long Term Support)
  3. Save the installer to your Downloads folder
  4. Double-click the downloaded file
  5. Click "Next" through all the screens (default options are perfect)
  6. Click "Install" and wait 2-3 minutes
  7. Click "Finish" when done
Important: You must CLOSE and RE-OPEN PowerShell after installing Node.js!

3 Verify Node.js Installation

Re-open PowerShell and test that Node.js is installed:

# Check Node.js version PS> node --version # Should show something like: v20.11.0 # Check npm (Node Package Manager) version PS> npm --version # Should show something like: 10.2.4
If you see... Do this...
"command not found" Close PowerShell, re-open it, and try again
Version numbers Perfect! Node.js is installed correctly
Permission error Make sure you're running PowerShell as Administrator
🤖

Part 3: Set Up Anthropic Console ($5 Budget)

30 minutes

💰 Understanding the Costs

Your $5 budget will get you approximately:

  • 500+ complete website builds
  • 1000+ code generations
  • 2000+ debugging sessions

Typical costs: Most projects cost $0.01-0.03 (1-3 cents!)

1 Create Your Anthropic Console Account

  1. Go to: console.anthropic.com
  2. Click "Sign Up"
  3. Use your work email (or personal if preferred)
  4. Verify your email
  5. Complete the sign-up process

2 Add Your $5 Credit

  1. In the Console, click "Billing" in the left sidebar
  2. Click "Add Payment Method"
  3. Enter your card details (won't be charged yet)
  4. Click "Add Credits"
  5. Enter $5.00 as the amount
  6. Click "Add Credits" to confirm
Auto-recharge OFF: Make sure auto-recharge is disabled so you won't spend more than $5!

3 Create Your API Key

  1. Click "API Keys" in the left sidebar
  2. Click "Create Key"
  3. Name it: "Claude Code Key"
  4. Click "Create"
  5. IMPORTANT: Copy the key immediately (you won't see it again!)
  6. Paste it somewhere safe (like a text file)
Keep your API key secret! It's like a password. Never share it or post it online.
⚡

Part 4: Install Claude Code

15 minutes

1 Install Claude Code via PowerShell

In PowerShell, run this single command:

# Install Claude Code globally PS> npm install -g @anthropic-ai/claude-code

Wait 1-2 minutes for installation to complete. You'll see lots of text scroll by - that's normal!

2 Configure Claude Code with Your API Key

Now we need to tell Claude Code about your API key:

# Start Claude Code PS> claude # When it asks for your API key, paste the key you saved earlier # Press Enter
🎉 Claude Code is ready! You should see a message like "Claude Code is ready to help!"

3 Test Claude Code

Let's make sure everything works:

# In the Claude Code prompt, type: Create a simple HTML file that says "Hello from Claude Code!"

Claude Code should create a file for you. Type exit to leave Claude Code when done testing.

🎯

Part 5: Build Your Custom Project (Best of Both Worlds!)

90 minutes
🎨 Smart Strategy: We'll use Claude.ai for beautiful design FIRST, then Claude Code to manage and modify files automatically!

Choose ONE project that solves a real problem you face:

📊 Automated Report Builder

Generate weekly/monthly reports from data files

Auto-formats, creates charts, exports to PDF

Easy Start

📅 Smart Scheduling Assistant

Manages appointments and sends reminders

Avoids conflicts, suggests optimal times

Medium

🎓 Student Progress Tracker

Dashboard showing individual student progress

Alerts for at-risk students, parent reports

Medium

📧 Email Campaign Manager

Create and schedule bulk emails

Track opens, personalize content

Easy Start

📚 Resource Library System

Searchable database of materials

Categories, tags, usage tracking

Advanced

🔧 Custom Tool

Describe your specific need

We'll design it beautifully!

Varies

🎨 Phase 1: Beautiful Design with Claude.ai (30 minutes)

Step 1: Go to Claude.ai for the pretty version

  1. Open claude.ai in your browser
  2. Start a new conversation
  3. Use this enhanced prompt template:
Create a beautiful, modern [PROJECT NAME] web application. Requirements: - Single HTML file with embedded CSS and JavaScript - Modern, professional design with gradient backgrounds - Smooth animations and hover effects - Mobile responsive layout - Use a cohesive color scheme (suggest one) - Include icons (use emoji or Unicode symbols) Features needed: 1. [Main feature 1] 2. [Main feature 2] 3. [Main feature 3] Make it visually impressive with: - Card-based layouts - Subtle shadows and borders - Professional typography - Interactive elements that feel smooth Start with sample data so I can see it working immediately.

Step 2: Save the beautiful version

  1. Copy ALL the code from Claude.ai
  2. Open VSCodium
  3. Create a new folder "MyBeautifulProject"
  4. Create file "index.html"
  5. Paste the code and save
  6. Open in browser to see your beautiful starting point!
Why this works: Claude.ai creates stunning designs with gradients, animations, and modern styling. Claude Code might be more basic visually, but it's AMAZING at modifying files!

⚡ Phase 2: Power Modifications with Claude Code (60 minutes)

Now we use Claude Code to enhance and modify WITHOUT manual editing!

Step 1: Navigate to your project in PowerShell

PS> cd MyBeautifulProject PS> ls # You should see your index.html file

Step 2: Start Claude Code with your beautiful file

PS> claude # Tell Claude Code about your existing file: I have an index.html file in this folder that's a [PROJECT NAME]. Please read it and understand what it does.

Step 3: Make powerful modifications automatically

Now you can request changes WITHOUT touching the code:

# Example modifications to request: Add a data export feature that downloads results as CSV Add a dark mode toggle in the top right corner Create a separate config.js file for all settings Add local storage to remember user preferences Add a print-friendly CSS section Split this into multiple files (HTML, CSS, JS) Add data validation to all form inputs Create an admin panel with password protection

Step 4: Advanced enhancements

# Add complex features: Add a dashboard that shows statistics with Chart.js Create a search function that filters all content Add keyboard shortcuts for power users Implement auto-save every 30 seconds Add a tutorial overlay for first-time users

🎯 Best Practices for the Two-Phase Approach

Use Claude.ai for:

  • Initial beautiful design
  • Complex layouts
  • Gradient backgrounds
  • Smooth animations
  • Modern UI components
  • Color schemes

Use Claude Code for:

  • Adding new features
  • File management
  • Creating multiple files
  • Database connections
  • Complex logic
  • Debugging issues
Pro Tip: Always test in your browser after each major change. Claude Code will tell you exactly which files it modified!

📝 Example: Complete Student Tracker Project

Phase 1 - Claude.ai Prompt:

Create a beautiful Student Progress Tracker with: - Header with gradient background (blue to purple) - Cards for each student showing name, GPA, attendance - Color coding: green (good), yellow (warning), red (at-risk) - Smooth hover effects on cards - Add student button with modal form - Search bar to filter students - Statistics summary at top (total students, average GPA) - Mobile responsive grid layout Use modern CSS with shadows, rounded corners, smooth transitions

Phase 2 - Claude Code Enhancements:

Read my index.html student tracker and: 1. Add export to CSV functionality 2. Create a separate students-data.json file 3. Add email alert system for at-risk students 4. Implement sorting by name, GPA, or attendance 5. Add a print stylesheet for reports 6. Save all data to localStorage automatically
Cost Tracking: Check your usage anytime at console.anthropic.com → Usage. Most modifications cost only $0.01-0.03!

✅ Session 3 Complete Checklist

You've successfully:

  • Opened and used PowerShell/Terminal
  • Installed Node.js and npm
  • Created an Anthropic Console account
  • Added $5 credit (with auto-recharge OFF)
  • Generated and saved your API key
  • Installed Claude Code globally
  • Connected Claude Code to your API key
  • Built your first custom project

🚀 What You Can Do Now:

  • Use Claude Code to build ANY web application
  • Modify existing projects with simple commands
  • Create professional tools without writing code
  • Debug and fix issues by asking Claude Code
  • Build as many projects as you want (within your $5 budget)

🎯 Quick Reference Commands

PowerShell Basics

  • pwd - Show current location
  • ls - List files
  • cd [folder] - Change directory
  • mkdir [name] - Create folder
  • cls - Clear screen
  • exit - Close PowerShell

Claude Code Commands

  • claude - Start Claude Code
  • exit - Leave Claude Code
  • clear - Clear conversation
  • "modify..." - Change existing code
  • "add..." - Add new features
  • "explain..." - Get explanations
Remember: Your $5 credit will last for months of regular use. Check your usage at console.anthropic.com → Usage. Most commands cost only $0.01-0.03!