What You'll Build
In this project, you'll use an AI assistant (Claude, ChatGPT, or any tool you prefer) to create a browser-based terminal command trainer. The finished tool will let you:
- Type commands into a realistic terminal interface with a blinking cursor and command prompt
- Complete guided challenges that teach real Claude Code commands step by step
- Get hints when stuck and see success messages when you complete each challenge
- Track your progress with a visual progress bar and completion counter
- Switch to a free-play mode where you can type any command and explore on your own
What You'll Need
An AI Chat Tool
Claude, ChatGPT, Gemini, or any AI assistant that can generate code. Free tiers work fine.
A Text Editor
VS Code, Notepad, TextEdit — anything that lets you save an .html file.
No coding experience needed
This project is designed for complete beginners. The AI does the heavy coding — you learn how to guide it.
Build the Terminal Interface
Open your AI tool and start a new conversation. The first step is building a terminal that looks and feels realistic. Terminals have a very specific aesthetic — monospace font, dark background, blinking cursor — and you need to describe all of it so the AI nails it.
Build me a single HTML file with a terminal simulator. It should look like a real macOS/Linux terminal window. Here's what I need:
- A terminal window with a dark background (#0d1117), rounded corners, and a title bar with red/yellow/green dots (like macOS)
- The title bar should say "claude-code — terminal"
- A command prompt that shows "~ $" in green, followed by a blinking cursor
- When the user types a command and presses Enter, the command appears in the terminal output
- The terminal should show a simulated response below the command (for now, just echo back "Command not recognized. Type 'help' for available commands.")
- If the user types "help", show a list of fake commands: help, clear, hello, version
- If the user types "clear", clear all terminal output
- If the user types "hello", respond with "Hello! Welcome to the Claude Code terminal trainer."
- If the user types "version", respond with "Claude Code v1.0.0"
- All text should use a monospace font (JetBrains Mono or similar)
- The terminal should auto-scroll to the bottom when new output appears
- The input should auto-focus so the user can start typing immediately
Use a dark theme, Tailwind CSS via CDN, everything in one file.
This prompt is detailed because terminals have a very specific look and feel. The macOS-style title bar, the green prompt, the monospace font — these details make the difference between something that feels like a toy and something that feels authentic.
Add Command Challenges with Hints
Now that the terminal works, turn it into a learning tool by adding guided challenges. Each challenge will ask the user to type a specific Claude Code command and provide hints if they get stuck.
Add a challenge mode to the terminal simulator. Create 10 progressive challenges that teach Claude Code commands:
Challenge 1: "Start Claude Code" — answer: claude
Challenge 2: "Ask Claude to explain this codebase" — answer: claude "explain this codebase"
Challenge 3: "Start Claude in chat mode" — answer: claude chat
Challenge 4: "Resume your last conversation" — answer: claude --continue
Challenge 5: "Check your Claude Code version" — answer: claude --version
Challenge 6: "Ask Claude to fix the bugs in app.js" — answer: claude "fix the bugs in app.js"
Challenge 7: "Start Claude with a specific model" — answer: claude --model sonnet
Challenge 8: "View your usage and cost" — answer: claude usage
Challenge 9: "Ask Claude to write tests for utils.js" — answer: claude "write tests for utils.js"
Challenge 10: "Clear your conversation history" — answer: claude clear
For each challenge:
- Show the challenge description in a yellow/amber banner above the terminal
- Show a "Hint" button that reveals the first few characters of the answer (e.g., "Try typing: claude --c...")
- When the user types the correct command, show a green success message and auto-advance to the next challenge after 1.5 seconds
- If the command is wrong, show a red message: "Not quite — try again or click Hint"
- Accept the answer even if there are extra spaces, and make matching case-insensitive
Keep the same terminal look, same file, same dark theme.
What to look for when testing:
- Does the first challenge appear automatically when the page loads?
- Does the hint reveal just enough to help without giving away the full answer?
- Does typing the correct answer trigger a green success message?
- Does the next challenge load automatically after a short delay?
- Does it accept answers with slightly different spacing or capitalization?
Add Progress Tracking
A learning tool needs to show progress. Users should see how far they've come and feel motivated to complete all the challenges. Ask the AI to add a progress system:
Add a progress tracking system to the terminal command trainer:
- Add a progress bar above the terminal that fills up as challenges are completed (e.g., "3 of 10 completed")
- The progress bar should be green and animate smoothly when it advances
- Save completed challenges to localStorage so progress persists across page refreshes
- Add a small stats panel in the top right showing: challenges completed, total hints used, and current streak (consecutive correct answers without using a hint)
- When all 10 challenges are completed, show a congratulations screen with:
- A large checkmark or trophy icon
- "You've mastered the basics of Claude Code!" message
- Final stats: total time, hints used, best streak
- A "Restart" button to reset progress and start over
- A "Free Play" button to enter free-play mode (more on this in the next step)
- Add a "Skip" button on each challenge for users who want to move on (counts as incomplete, doesn't break the streak)
Keep the same file, same terminal styling, same dark theme.
Here are common issues and how to ask the AI to fix them:
Progress doesn't save between refreshes
Tell the AI: "The progress resets when I refresh the page. Make sure completed challenges are saved to localStorage as an array of challenge IDs, and load them on page init to restore the correct state and challenge index."
Progress bar doesn't match actual progress
Tell the AI: "The progress bar shows 50% after completing 3 of 10 challenges. The width should be calculated as (completed / total) * 100 percent. Make sure the bar updates after each challenge completes, not before."
Congratulations screen appears too early
Tell the AI: "The completion screen shows up after challenge 9 instead of after challenge 10. Check that the completion check runs after the challenge counter increments, and uses >= total not > total - 1."
Add Free-Play Mode
After completing the challenges, users should be able to explore freely. Free-play mode turns the terminal into a sandbox where any command gets a simulated response, so users can experiment without fear of breaking anything.
Add a free-play mode to the terminal command trainer:
- Add a toggle at the top to switch between "Challenge Mode" and "Free Play" mode
- In Free Play mode, hide the challenge banner and progress bar
- The terminal should recognize and respond to these commands with realistic simulated output:
- "claude" → "Starting Claude Code... Type your request or use /help for commands."
- "claude --help" → Show a help menu with common flags: --model, --continue, --version, --verbose
- "claude --version" → "Claude Code v1.0.42"
- "claude chat" → "Entering chat mode. Type /exit to leave."
- "claude --model sonnet" → "Using model: claude-sonnet. Ready for input."
- "claude usage" → Show a formatted table with fake usage stats (tokens used, cost, sessions)
- "ls" → Show a fake file listing: "app.js index.html package.json README.md utils.js"
- "pwd" → "/home/user/my-project"
- "clear" → Clear the terminal
- "help" → Show all available commands in a formatted list
- Any unrecognized command → "Command not found. Type 'help' to see available commands."
- Add a subtle "Free Play" label in the terminal title bar when in this mode
Same file, same styling.
This free-play mode turns the trainer into something users will actually come back to. They can practice commands they learned in the challenges without the pressure of getting the exact answer right.
Polish the Terminal Look
The final step is making the terminal feel authentic and polished. Small visual details sell the illusion that this is a real terminal environment:
Polish the visual design of the terminal command trainer:
- The blinking cursor should be a thin vertical line (not a block) that blinks with a smooth CSS animation at 1-second intervals
- Add command history navigation — pressing the Up arrow key should cycle through previously typed commands (like a real terminal)
- Color-code the terminal output: commands in white, success messages in green (#4ade80), errors in red (#fb7185), hints in amber (#fbbf24), help text in cyan (#22d3ee)
- Add a subtle scan-line effect over the terminal (very faint horizontal lines) for a retro CRT feel
- When a command runs, show a brief "processing" animation — a spinner character that cycles through |, /, -, \ for 0.5 seconds before showing the result
- Add a shadow behind the terminal window for depth: a large, soft, dark shadow with a slight green tint
- The terminal should have a minimum height of 400px and resize responsively
- Add keyboard shortcut: Ctrl+L clears the terminal (same as the clear command)
Keep everything in the same single HTML file. Same dark theme.
What You Learned
This project teaches more than just terminal commands. By completing it, you practiced:
Building Interactive Learning Tools
You learned how to design educational software with guided challenges, progressive difficulty, and immediate feedback — patterns used in every learning platform.
Terminal UI Simulation
You described a complex, specific UI to an AI — blinking cursors, scan lines, color-coded output — and iterated until it felt authentic.
Gamification with Progress Tracking
You added streaks, completion stats, progress bars, and a congratulations screen — the same gamification patterns that make Duolingo and Codecademy addictive.
Command-Line Basics
You now know key Claude Code commands — how to start sessions, continue conversations, choose models, and check usage — all from building the tool that teaches them.
Tips for Working with AI on This Project
Get the terminal looking right first. Spend time on Step 1 before adding challenges. If the terminal doesn't look realistic, the whole experience falls flat. Ask the AI to tweak colors, fonts, and spacing until it feels like a real terminal.
Paste error messages. If something breaks, open the browser console (F12) and paste the error into the chat. The AI can usually fix it immediately.
Test keyboard input carefully. Terminal apps rely heavily on keyboard events. Test that Enter submits, Up arrow shows history, and the cursor stays in the right place. These are easy things for the AI to get slightly wrong.
Add your own challenges. Once the trainer works, try adding your own challenges by editing the challenge array in the code. It's a great way to start understanding the code the AI wrote.
Ready for your next project?
Explore more hands-on projects, or check out the tutorials for deeper dives into specific AI tools.