Demo Mode

No student ID available

Activity 9 of 16

Activity 9: AI Development Foundations

Practice and reinforce the concepts from Lesson 9

Activity 9: AI Development Foundations

Objective

Practice the foundational skills of vibe engineering: navigating the terminal, choosing AI models, and understanding AI capabilities. By the end of this activity, you'll be comfortable with the tools you need for the Spelling Bee project.

Prerequisites: Trae IDE installed, Concept 10A reading completed, terminal access

Practice essential terminal commands. Open Terminal in Trae IDE (Cmd+J or Ctrl+J) and complete each task:

Task	Command	Success Criteria	Your Notes
Find current location	`pwd`	Write down the path	_____________
List files	`ls`	Count files/folders visible	_____________
Detailed listing	`ls -la`	Note additional info (sizes, permissions, hidden files)	_____________
Navigate to home	`cd ~` then `pwd`	Record home directory path	_____________
Return to start	`cd [path from task 1]`	Verify with `pwd`	_____________
Create practice folder	`cd ~/Desktop` then `mkdir vibe-engineering-practice`	Folder appears in Desktop	_____________
Enter folder	`cd vibe-engineering-practice` then `pwd`	Path ends with folder name	_____________
Create web files	`touch index.html style.css script.js`	Run `ls` to verify 3 files	_____________
Create subfolder	`mkdir assets` then `cd assets`	Verify with `pwd`	_____________
Navigate up	`cd ..` then `pwd`	Back in practice folder	_____________
Test error handling	`cd fake-folder-that-does-not-exist`	Record error message	_____________
Fix and retry	`mkdir fake-folder-that-does-not-exist` then `cd` into it	Successfully enters folder	✓

💡 Tip: Error messages are your friend. They tell you exactly what went wrong. Most errors can be fixed by reading the message carefully.

Exercise 2: AI Model Comparison

Compare how different AI models respond to the same coding task.

Test Prompt: "Create a JavaScript function that takes an array of numbers and returns only the even numbers."

Model	Response Code	Response Speed	Code Quality Notes
Claude Sonnet	(Paste code here)	Fast / Medium / Slow	_________________
GPT-4	(Paste code here)	Fast / Medium / Slow	_________________
Claude Haiku (optional)	(Paste code here)	Fast / Medium / Slow	_________________

Analysis Questions:

Did all models produce working code? Yes / No
Which response was most readable? _______________________
Which model gave the most detailed explanation? _______________________
Did any model include error handling? Yes / No (If yes, which one? _______)
Which model would you choose for this task and why? _______________________

Exercise 3: AI Capabilities Testing

Test your preferred model with these prompts to understand AI strengths and limitations:

Prompt Type	Test Prompt	Success Criteria	Your Results
Code Generation	"Create an HTML button with id='startBtn' that says 'Start Game' and has a green background color."	Working HTML code generated	Time: _____ sec ✓ / ✗
Code Explanation	Paste: `const words = ['apple', 'banana', 'cherry'];` `const uppercased = words.map(w => w.toUpperCase());` Ask: "Explain step-by-step"	Clear, accurate explanation	Most helpful part: _____________
Vague Request (Limitation)	"Make my website better"	AI asks clarifying questions	AI's response: Better prompt:
Debugging	"This code gives error 'Cannot read property textContent of null': `document.getElementById('score-display').textContent = score;` Why?"	Multiple solution suggestions	Solutions: One. _____________ 2. _____________ 3. _____________

Exercise 4: Vibe Engineering Self-Assessment

Check all statements that describe you RIGHT NOW:

Stage	Characteristics	Checked 3+?
Stage One: Beginner	☐ I can ask AI to generate code ☐ I copy-paste AI's code into my project ☐ I test to see if code works ☐ I often don't understand how AI's code works ☐ When code breaks, I ask AI to fix it without investigating	You're at Stage 1 (normal for beginners!)
Stage 2: Intermediate	☐ I read AI-generated code before using it ☐ I understand most of what the code does ☐ I can modify AI's code to fit my needs ☐ I notice when AI makes small mistakes ☐ I can fix simple bugs myself	You're progressing to Stage 2!
Stage 3: Advanced	☐ I design features first, then use AI to implement ☐ I can review AI code and suggest improvements ☐ I use AI for specific components, not entire projects ☐ I understand when to use AI vs. code myself ☐ I can debug complex issues with AI's help	You're reaching Stage 3 (advanced!)
Stage 4: Master	☐ I collaborate with AI as an equal partner ☐ I delegate routine tasks to AI ☐ I contribute improvements to AI-generated code ☐ I build production-quality applications with AI ☐ I teach others to use AI effectively	You're a vibe engineering master!

Your Learning Goals:

My current stage: _____________________________________________________
Goal for Spelling Bee project: _____________________________________________________
Goal for Smart Farm project: _____________________________________________________
Goal for final project: _____________________________________________________

Reflection:

What excites you most about vibe engineering? _____________________________________________________
What worries or confuses you? _____________________________________________________
What's one specific skill you want to improve? _____________________________________________________
How will mastering vibe engineering help you in the future? _____________________________________________________

Exercise 5: Spelling Bee Project Setup

Create your project structure and test your development environment.

Step One: Create Project Structure

bash

cd ~/Desktop
mkdir spelling-bee-project
cd spelling-bee-project
touch index.html style.css script.js words.js
mkdir assets
ls  # Should show: assets/ index.html script.js style.css words.js

Step 2: Test AI-Generated Setup

Open spelling-bee-project folder in Trae IDE (File -> Open Folder)

Prompt AI (Claude Sonnet recommended):

vbnet

Create a basic HTML structure for a spelling game with:
- Title: "Spelling Bee Challenge"
- A div with id="word-display" to show the current word
- An input field with id="answer-input" for user's answer
- A button with id="submit-btn" that says "Submit"
- Link to style.css and script.js

Copy AI's response into index.html
Start Live Server in Trae IDE
Verify page loads in browser
Take screenshot, save to assets/setup-screenshot.png

Checkpoint: ☐ All files visible in Trae's file explorer ☐ Page loads in browser

Summary & Submission

What You Practiced: ✓ Terminal navigation (pwd, ls, cd) ✓ File/folder creation from command line ✓ AI model comparison ✓ AI strengths and limitations ✓ Vibe engineering self-assessment ✓ Project structure setup

💡 Remember: Terminal commands save time, AI models have different strengths, and vibe engineering is a journey from copy-paste to collaboration.

Submission Requirements:

Upload screenshots of:

Terminal showing successful navigation commands (Exercise 1)
AI model comparison responses (Exercise 2)
Spelling Bee setup page running in browser (Exercise 5)

Submit to: Activity Submission Form

Next Steps: In Lesson 11A, you'll master prompting techniques to get even better results from AI. But first, let's build the Spelling Bee project using the foundations you just learned!

Bonus Challenges (Optional)

Challenge	Task	Success Criteria
Terminal Speed Run	Navigate from home directory to `spelling-bee-project` folder using only terminal commands	Complete in under 10 seconds
Model Stress Test	Give Sonnet, GPT-4, and Haiku this prompt: "Create a scoring system that awards 5 base points, adds 2 points per correct streak, and subtracts 2 points per hint used. Return the total score."	Compare which model handles complexity best
Error Recovery	Intentionally create an error in `index.html` (e.g., missing closing tag), then use AI to debug by pasting error message	Successfully identify and fix error with AI help

Great job! You're now equipped with the vibe engineering foundations. Let's build something amazing!

Activity 9 of 16