Lesson 4 - Working with Code and Artifacts
Learn to work with Claude's code artifacts: understanding what's generated, running code locally, making modifications, and building runnable projects without deep programming knowledge.
Duration: 2-3 hours
Learning Objectives
By the end of this lesson, you will be able to:
- ✓Understand what artifacts are and how to use them effectively
- ✓Set up a basic local environment to run Claude-generated code
- ✓Read and modify code artifacts without deep programming knowledge
- ✓Test and troubleshoot Claude-generated code independently
Videos
Artifacts Explained: Your Code Workspace
What artifacts are, how they work, and how to think about code Claude generates for you.
Duration: 6 minutes
Setting Up Your Dev Environment (The Minimum)
What tools you actually need to run code locally — no fancy IDE required.
Duration: 6 minutes
Reading Code for Non-Programmers
How to navigate code files, understand structure, and make simple changes without breaking things.
Duration: 7 minutes
Key Concepts
Types of Artifacts and When to Use Each
**1. CODE (HTML/JavaScript/React)**
Best for: Interactive web pages, apps, UIs
How to use: Save as .html or follow Claude's setup instructions
Example prompt: 'Create an interactive todo list I can run in my browser'
**2. REACT COMPONENT**
Best for: Reusable UI pieces for web apps
How to use: Copy into your React project's components folder
Example prompt: 'Create a signup form component with email validation'
**3. DOCUMENT (Markdown)**
Best for: Documentation, guides, content
How to use: Copy to a .md file or use as-is
Example prompt: 'Create a README for my project'
**4. DIAGRAM (SVG/Mermaid)**
Best for: Flowcharts, architecture diagrams, visualizations
How to use: Download SVG or render Mermaid in a viewer
Example prompt: 'Create a flowchart for my user onboarding process'
**5. TEXT/SCRIPTS**
Best for: Utilities, configurations, data files
How to use: Save with appropriate extension (.json, .sh, .py)
Example prompt: 'Create a script to rename all my image files'
**Choosing:**
- Want something interactive? → Code/React
- Want to document? → Document
- Want to visualize? → Diagram
- Want to automate? → Script
The Basic Dev Environment Checklist
**Essential Tools (one-time setup):**
1. **Text Editor: VS Code**
- Download: https://code.visualstudio.com/
- Why: Free, beginner-friendly, works for any language
- Install extensions: Prettier (auto-format), ESLint (catch errors)
2. **Node.js + npm**
- Download: https://nodejs.org/ (get LTS version)
- Why: Runs modern JavaScript projects
- Test install: Open terminal, type `node -v`
3. **Web Browser**
- Chrome or Firefox (you probably already have this)
- Why: See your projects running
4. **Terminal/Command Line**
- Mac: Built-in Terminal app
- Windows: Command Prompt or PowerShell
- Why: Run commands Claude gives you
**Optional but Helpful:**
- Git (for version control): https://git-scm.com/
- GitHub Desktop (easier Git): https://desktop.github.com/
**That's it!** You don't need XCode, Android Studio, or fancy IDEs.
**First-Time Setup Workflow:**
1. Install VS Code
2. Install Node.js
3. Open VS Code terminal (View → Terminal)
4. You're ready to run Claude's code!
Running Claude's Code: Step-by-Step
**For Simple HTML Files:**
1. Copy Claude's code
2. Paste into a new file, save as `index.html`
3. Double-click the file → opens in browser
4. Done!
**For Node.js/React Projects:**
1. Copy all of Claude's code into appropriately named files
2. Open terminal in the project folder
3. Run: `npm install` (downloads dependencies)
- Wait for it to finish (can take 1-2 minutes)
4. Run: `npm run dev` (or `npm start`, Claude will tell you)
5. Open browser to `http://localhost:3000`
6. See your app running!
**Making Changes:**
1. Edit the file in VS Code
2. Save (Cmd+S / Ctrl+S)
3. Refresh browser (most modern setups auto-refresh)
4. See changes immediately
**If Something Breaks:**
1. Check terminal for error messages
2. Copy the full error
3. Ask Claude: 'I got this error: [paste error]. How do I fix it?'
4. Apply Claude's fix
5. Try again
**Pro tip:** Keep the terminal open while developing. Errors appear there first.
What You Can Safely Change in Code
**✅ SAFE TO EDIT:**
**Text in Quotes:**
```javascript
<h1>"Welcome!"</h1> // Change to "Hello!"
const message = "Hi there" // Change to any text
```
**Numbers (spacing, sizes, delays):**
```javascript
width: 300 // Try 400, 500, etc.
setTimeout(() => {}, 1000) // 1000 = 1 second, try 2000
padding: 20px // Try 10px, 30px
```
**Colors (hex codes or names):**
```javascript
background: "#3498db" // Try "#e74c3c" or "blue"
color: "white" // Try "black", "red", etc.
```
**URLs and Paths:**
```javascript
fetch("https://api.example.com") // Change to your API
image src="/logo.png" // Change to your image path
```
**Boolean flags (true/false):**
```javascript
const isVisible = true // Try false
<Component disabled={false} /> // Try true
```
**⚠️ BE CAREFUL WITH:**
**Brackets and Syntax:**
```javascript
function doThing() { // Don't delete { or }
return "value" // Don't forget closing }
}
```
**Imports:**
```javascript
import React from 'react' // Don't edit unless you know why
```
**Variable Names:**
Changing `userName` to `name` might break other code that references it.
**When in doubt:**
'Claude, how do I change [X] in this code?' → Safer than guessing!
Troubleshooting Common Issues
**Error: 'node' is not recognized**
→ Node.js not installed or not in PATH
→ Fix: Install Node.js, restart terminal
**Error: 'npm install' fails**
→ Network issue or permission problem
→ Fix: Try `npm install --force` or check internet connection
**Error: Port 3000 already in use**
→ Another app is using that port
→ Fix: Stop other dev servers, or use a different port with `PORT=3001 npm run dev`
**Error: Module not found**
→ Missing dependency
→ Fix: Run `npm install [missing-module]`
**Error: Syntax error in browser**
→ Code has a typo or bracket mismatch
→ Fix: Check VS Code for red squiggly lines, or ask Claude to review
**Nothing appears in browser**
→ Check terminal for errors
→ Check browser console (F12 → Console tab)
→ Make sure you're on the right URL (localhost:3000)
**Changes don't appear**
→ Hard refresh: Cmd+Shift+R (Mac) or Ctrl+Shift+R (Windows)
→ Check if file is saved (dot on VS Code tab means unsaved)
**General debugging process:**
1. Read the error message fully
2. Google '[error message] + [technology]' (e.g., 'module not found react')
3. Ask Claude with full error text
4. If still stuck, ask in community (Discord, Stack Overflow)
Key Definitions
**Artifact:** A discrete output from Claude (code, document, diagram) shown in a separate panel
**Localhost:** A web address (http://localhost:3000) that means 'this computer' — only you can access it
**npm (Node Package Manager):** Tool for installing JavaScript libraries/dependencies
**Dependencies:** External code libraries your project needs to run
**Terminal/Command Line:** Text-based interface for running commands
**Package.json:** File listing your project's dependencies and scripts
**Source Code (src/):** The folder containing your app's main code
**Dev Server:** A local server that runs your project for testing
Common Mistakes & Pitfalls
❌ Not running 'npm install' before 'npm start'
Dependencies must be downloaded first. Always run npm install after getting new code.
❌ Editing code in the browser instead of VS Code
Browser changes are temporary. Edit the actual files in VS Code, then refresh.
❌ Deleting brackets or quotes while changing text
Keep the syntax intact. Only change what's inside quotes, not the quotes themselves.
❌ Not checking the terminal for errors
Terminal shows errors first. If something breaks, look there before Googling.
❌ Running random commands without understanding
If Claude says 'run X', ask 'What does this command do?' before running it.
Exercises
Exercise 1: Setup and Run Your First Artifact
60 minutesSet up your dev environment and successfully run a Claude-generated code artifact.
Expected Output:
A running local project (screenshot of it in your browser at localhost:3000) plus documentation of setup steps you followed
Success Criteria:
- •Installed VS Code and Node.js
- •Generated a simple web project with Claude (HTML or React)
- •Successfully ran npm install (if needed)
- •Got the project running in browser
- •Screenshot shows working project
- •Documented any issues encountered and how you solved them
Exercise 2: Customize an Artifact
45 minutesTake a Claude-generated artifact and make 5 meaningful changes without breaking it.
Expected Output:
Before/after screenshots showing your changes, plus the modified code and a list of what you changed
Success Criteria:
- •Made at least 5 distinct changes (text, colors, sizes, etc.)
- •Project still runs after changes
- •Changes are visible and intentional (not random)
- •Can explain what each change does
- •Tested after each change to catch breaks early
Exercise 3: Debug and Fix
30 minutesIntentionally break a working artifact, then use Claude to help you fix it.
Expected Output:
Debug log showing: (1) What you broke, (2) Error message, (3) Prompt you used to ask Claude for help, (4) Claude's fix, (5) Proof it works again
Success Criteria:
- •Intentionally introduced a clear break (deleted a bracket, typo'd a variable, etc.)
- •Captured the full error message from terminal/browser
- •Asked Claude a good debugging question (included error + context)
- •Applied Claude's fix successfully
- •Project works again (screenshot proof)
- •Learned one lesson about what NOT to do
Lesson Reflection
Take a moment to reflect on what you've learned:
- 1. What feels more intimidating: writing code from scratch or modifying Claude's code? Why?
- 2. Think of a simple change you'd want to make to a website you use. Could you make that change in Claude's code?
- 3. How confident do you feel running terminal commands? What would help you feel more comfortable?