⏱️ 90 minutes
Create Something That Solves a Real Problem
Now it's time to put all your new skills to work! You'll design a beautiful application with Claude.ai, then use Claude Code to manage and enhance it.
🎯 Learning Objectives
- Choose a project that addresses your coordinator needs
- Design beautiful UI/UX with Claude.ai
- Use Claude Code to manage project files
- Add features and functionality iteratively
- Test and refine your application
- Deploy your finished project
💡 The Two-Phase Strategy
We'll combine the strengths of both tools:
Phase 1: Claude.ai (Beautiful Design)
- ✨ Generates gorgeous, polished interfaces
- 🎨 Creates complete, working applications
- 📱 Ensures mobile responsiveness
- 🎯 Best for initial design and full-page generation
Phase 2: Claude Code (File Management & Iteration)
- 📂 Manages multiple files easily
- 🔄 Makes targeted updates quickly
- 🐛 Debugs and fixes issues
- ⚡ Adds features without rewriting everything
🎨 Project Ideas
Choose ONE project that solves a real problem you face:
📊 Automated Report Builder
Generate weekly/monthly reports from form inputs. Auto-formats, creates summaries, exports to PDF.
Easy Start📅 Smart Scheduling Assistant
Manages appointments, sends reminders, avoids conflicts, suggests optimal meeting times.
Medium🎓 Student Progress Tracker
Dashboard showing individual student progress, alerts for at-risk students, generates parent reports.
Medium📧 Email Campaign Manager
Create and schedule bulk emails, track opens, personalize content for different audiences.
Easy Start📚 Resource Library System
Searchable database of teaching materials, categories, tags, usage tracking.
Advanced🔧 Custom Tool
Have a unique need? Describe your specific requirement and we'll help you build it!
Varies🎨 Phase 1: Beautiful Design with Claude.ai (30 minutes)
Step 1: Open Claude.ai
- Go to claude.ai in your browser
- Start a new conversation
- Use this enhanced prompt template:
Create a beautiful, modern [PROJECT NAME] web application.
Requirements:
- [Describe what it should do - be specific!]
- [List key features needed]
- [Mention any data it should track]
Design:
- Professional [color scheme] theme
- Mobile-responsive layout
- Clean, intuitive interface
- Modern card-based design
- Smooth animations
Features:
- [Feature 1]
- [Feature 2]
- [Feature 3]
- Data saved in browser localStorage
- Export/print functionality
- Dark mode toggle (optional)
Please provide complete HTML with embedded CSS and JavaScript in a single file.
Step 2: Review and Refine
- Claude will generate complete code
- Ask for changes: "Make the buttons bigger" or "Change to blue theme"
- Iterate until you love the design
Step 3: Save the Code
- Copy all the code Claude generated
- Open VSCodium
- Create new file:
[project-name].html - Paste the code
- Save
- Test in browser
⚡ Phase 2: File Management with Claude Code (60 minutes)
Step 1: Set Up Project in Claude Code
- Open PowerShell
- Navigate to your project folder:
cd Desktop\ClaudeCodeProjects
mkdir MyProject
cd MyProject
- Copy your HTML file into this folder
- Start Claude Code:
claude
Step 2: Enhance with Claude Code
Now you can make targeted improvements:
Add New Features:
Add a search bar to filter results in [filename].html
Fix Issues:
The save button isn't working in [filename].html - please debug and fix it
Improve Styling:
Make the header sticky and add a subtle shadow when scrolling
Add New Sections:
Add a statistics dashboard showing total entries, averages, and trends
Step 3: Organize Multiple Files
If your project grows, Claude Code can split it:
Split [filename].html into separate HTML, CSS, and JavaScript files
Step 4: Test and Iterate
- After each change, test in browser
- Keep refining: "The buttons are too small on mobile"
- Add polish: "Add loading animations"
💡 Pro Tips for Project Success
- Start Simple: Build core functionality first, add features later
- Test Early: Check in browser after every major change
- Save Versions: Copy working files before big changes
- Be Specific: "Add blue submit button in top right" vs "Make it better"
- Use Examples: "Like the Gmail interface" helps AI understand
- Iterate Gradually: One feature at a time prevents errors
- Review Code: Understand what Claude creates (learning opportunity!)
📝 Example: Building a Weekly Report Generator
Phase 1 Prompt (Claude.ai):
Create a beautiful Weekly Report Generator web application.
Requirements:
- Form to input: week dates, meetings held, events organized, achievements, challenges, next week priorities
- Generate formatted report from inputs
- One-click copy to clipboard
- Save drafts in browser storage
Design:
- Professional teal and blue theme
- Card-based layout
- Mobile responsive
- Clean input fields with labels
Features:
- Form validation
- Preview before copy
- Clear form button
- Load previous report
- Print-friendly format
Provide complete HTML with embedded CSS and JavaScript.
Phase 2 Enhancements (Claude Code):
# Add features one by one:
Add email template format option
Add PDF export button
Create templates for different report types
Add data visualization showing weekly trends
Implement autosave every 30 seconds
🚀 Deployment Options
1. Local Use (Easiest)
- Keep on your computer
- Access via file:// in browser
- Perfect for personal tools
2. GitHub Pages (Free Hosting)
- Create GitHub account
- Upload your HTML file
- Enable GitHub Pages
- Get public URL
3. Share with Colleagues
- Email the HTML file
- They open it in their browser
- Works offline once saved
✅ Project Completion Checklist
- ✓ Chose a project that solves real problem
- ✓ Generated beautiful design with Claude.ai
- ✓ Tested initial version in browser
- ✓ Set up project folder for Claude Code
- ✓ Added at least 2 enhancements with Claude Code
- ✓ Fixed any bugs or issues
- ✓ Tested on mobile view
- ✓ Saved and backed up project files
- ✓ Documented how to use the tool
🎉 Congratulations!
You've completed Session 3: Power Tools - PowerShell & Claude Code!
You've mastered:
- ✅ PowerShell command-line navigation
- ✅ Node.js development environment
- ✅ Anthropic Console and API management
- ✅ Claude Code CLI for AI-powered development
- ✅ Building custom applications from scratch
🚀 What's Next in Session 4?
Free Power Tools - Interactive Projects
- Explore LMArena for comparing AI models
- Use NanoBanana platform for no-code development
- Build interactive educational projects
- Create advanced features without coding
- Develop custom applications for free
Time Commitment: 3-4 hours
Cost: $0 (completely free tools!)
💡 Before Session 4
- Complete your custom project from this session
- Use your project daily to find improvement opportunities
- Share with a colleague and get feedback
- Document any issues or desired features
- Backup all your projects to cloud storage
- Celebrate your progress - you're now an AI-powered developer!