Build: The Setup

Due: Before Day 2 Points: 10 (Complete/Incomplete) Time Estimate: 30–45 minutes

---

Overview

Before you write any JavaScript, you need a place for your code to live. This lab sets up your workspace for the entire quarter — a GitHub repository that starts as a learning log and grows into your portfolio.

By the end of this lab, you'll have a live website where your work will be published throughout the quarter.

---

What You're Learning

• Creating a repository from a template (not forking)
• Enabling GitHub Pages for live publishing
• Maintaining consistent professional presence across platforms
• Verifying that your development environment is ready

---

Requirements

Set up your DESN 378 workspace:

• Create repository from template (not fork)
• Repository is public
• PROFILE.md filled out completely
• All profiles match (GitHub, Figma, CodePen) — same name, same photo
• GitHub Pages enabled and working
• Live portfolio link added to README
• VS Code extensions installed

---

Step-by-Step Guide

Step 1: Create Your Repository (5 min)

1. Go to the template repository: → github.com/sicxz/DESN-378-code-design-2

2. Click "Use this template" → "Create a new repository"

   • ⚠️ Do NOT fork — use the template button

3. Configure your new repo:

   • Repository name: DESN378-code-design-2 (or similar)
   • Visibility: Public (required for GitHub Pages)
   • Click Create repository

4. Clone to your computer using GitHub Desktop:

   • In GitHub Desktop: File → Clone Repository
   • Find your new repo and clone it

Verify: You should see the starter files in your local folder:

├── index.html
├── css/styles.css
├── scripts/main.js
├── assets/
├── labs/
├── PROFILE.md
└── README.md

---

Step 2: Fill Out Your Profile (10 min)

1. Open PROFILE.md in VS Code

2. Fill out all sections:

   • Your name
   • Your @ewu.edu email
   • Links to GitHub, Figma, CodePen profiles
   • Short bio

3. Save the file

Why this matters: Recruiters and collaborators look at your profiles. Consistency builds trust.

---

Step 3: Synchronize Your Profiles (10 min)

Your online presence should be consistent across platforms:

Platform	Update	Location
GitHub	Name, photo, bio	Settings → Profile
Figma	Same name, same photo	Settings → Account
CodePen	Same name, same photo	Settings → Profile

Same name. Same photo. Professional presence.

Use a photo where your face is visible — the same one across all platforms.

---

Step 4: Enable GitHub Pages (5 min)

1. Go to your repository on GitHub.com

2. Click Settings → Pages (in the left sidebar)

3. Under "Source":

   • Select Deploy from a branch
   • Branch: main
   • Folder: / (root)
   • Click Save

4. Wait 2-3 minutes for the initial deployment

5. Your site will be live at:

   https://yourusername.github.io/DESN378-code-design-2
   

Verify: Open your live URL. You should see the starter page.

---

Step 5: Update Your README (5 min)

1. Open README.md in VS Code

2. At the top, add your live links:

   # DESN 378: Code + Design 2
   
   🔗 **[Learning Log](https://yourusername.github.io/DESN378-code-design-2)**
   🔗 **[DESN368 Portfolio](https://yourusername.github.io/your-368-repo)**
   

3. Replace the template content with YOUR version (see Section 4 in the README for a starter template)

4. Save, commit, and push

---

Step 6: Verify Your Tools (5 min)

Open VS Code and confirm these extensions are installed:

Extension	Purpose	How to Check
GitHub Copilot	AI code suggestions	Extensions panel → Search "Copilot"
Live Server	Local preview server	Extensions panel → Search "Live Server"
Prettier	Code formatting	Extensions panel → Search "Prettier"

GitHub Copilot requires GitHub Student Developer Pack. If you don't have it:

1. Go to education.github.com/benefits
2. Verify with your @ewu.edu email
3. Benefits activate within 24-48 hours

---

Complete Criteria

Your lab is complete when:

• Repository exists at github.com/yourusername/DESN378-code-design-2
• Repository is public (not private)
• PROFILE.md is filled out with all your info
• All three profiles match (GitHub, Figma, CodePen)
• GitHub Pages is enabled and your site is live
• README includes your live portfolio link
• VS Code has Copilot, Live Server, and Prettier installed

---

Stretch Goals

Done early? Try these:

1. Customize your starter page — Edit index.html to personalize the content
2. Add a custom favicon — Replace the placeholder in assets/
3. Explore the DevTools Field Guide — Preview the behavioral layer concepts we'll cover in class: resources/dev-tools-fieldguide/index.html

---

Troubleshooting

"Use this template" button missing

Make sure you're signed into GitHub. The button only appears for logged-in users.

GitHub Pages shows 404

1. Check Settings → Pages — is it pointing to the right branch?
2. Wait a few minutes — first deployment takes time
3. Make sure index.html is in the root folder (not inside another folder)
4. Check the Actions tab for build errors

Profiles won't update

• GitHub: Changes may take a few minutes to propagate
• Figma: Make sure you're editing your personal account, not a team
• CodePen: Check Settings → Profile, not just the display name

VS Code extensions not working

1. Make sure you're signed into GitHub in VS Code
2. Try reloading VS Code (Cmd/Ctrl + Shift + P → "Reload Window")
3. For Copilot: Check that your Student Pack is active

"I forked instead of using template"

Delete the forked repo and start over with "Use this template." Forks maintain a connection to the original repo that we don't want.

---

What's Next

With your workspace ready, you're prepared for the rest of Week 0:

• Lab 0-2: Console Explorer — Your first hands-on JavaScript experiments
• Lab 0-3: Portfolio Audit — Peer review of your DESN 368 work

Everything you build this quarter will live in this repository. By Week 10, it becomes your portfolio.

---

Submission

Submit to Canvas:

1. Link to your GitHub repository
2. Link to your live GitHub Pages site
3. Screenshot showing all three profiles match (GitHub, Figma, CodePen side by side)

---

Resources

• GitHub Pages Documentation
• GitHub Student Developer Pack
• Figma Education
• VS Code Extensions Marketplace

Build: The Behavioral Layer

Due: Before Day 2 Points: 10 (Complete/Incomplete) Time Estimate: 45–60 minutes

---

Overview

You've experimented with JavaScript in the console. Now it's time to write code that lives in a file and runs on a real web page.

In this lab, you'll work through MDN's "Adding Interactivity" tutorial and build two interactive features: an image that changes when clicked and a personalized welcome message that remembers your name. These are the same patterns — querySelector, addEventListener, localStorage — that power everything we'll build this quarter.

---

What You're Learning

• How to link a JavaScript file to an HTML page
• Using querySelector() to find elements on the page
• Using addEventListener() to respond to clicks
• Using localStorage to remember data between visits
• The pattern: find → listen → respond

---

Requirements

Complete the MDN tutorial exercises in your GitHub repo:

• Create a week-0 folder
• Add the behavioral-layer project folder
• Build the image changer with two custom images
• Build the personalized welcome message
• Style the "Change user" button
• Code includes LLM-generated explanations as comments
• Code includes your summary comment at the bottom
• Code runs without errors
• Published to GitHub Pages, add the link to your index.html under a week 0 level 2 heading.

---

Step-by-Step Guide

Step 1: Download the Starter Files (2 min)

1. Go to the MDN tutorial: Adding Interactivity
2. Scroll to the "A Hello world!" walkthrough section
3. Download the example code
4. Unzip the file and rename the folder to behavioral-layer
5. Keep this folder ready — you'll drag it into your Codespace next

---

Step 2: Set Up Your Codespace (5 min)

1. Go to your GitHub repository
2. Click the green Code button
3. Select the Codespaces tab
4. Click Create codespace on main

Wait for your Codespace to load — this gives you a full VS Code environment in your browser.

Add your project:

1. In the Codespace file explorer, right-click and create a new folder called week-0
2. Drag your behavioral-layer folder into week-0

Your structure should look like:

week-0/
└── behavioral-layer/
    ├── index.html
    ├── styles/
    │   └── style.css
    └── images/
        └── firefox-icon.png

---

Step 3: Work Through the Tutorial

Go to MDN: JavaScript — Adding Interactivity

Work through each section in order:

1. What is JavaScript? — Try the examples in CodePen
2. A "Hello world!" example — Do this in your Codespace (Step 4)
3. Adding an image changer — Use your own images (Step 5-6)
4. Adding a personalized welcome message — Follow along (Step 7)

---

Required for all code snippets you copy and paste:

1. Paste the code into Claude or ChatGPT and ask: "Explain this code like I'm 5 years old. Use a metaphor if it helps."
2. Read until you understand what each line does.
3. Add the explanation as comments above or below the particular code in your main.js file.

---

Step 4: Hello World in Your Codespace (5 min)

Follow the "A Hello world!" example section in the MDN tutorial, but do it in your Codespace.

Install the Live Server extension:

1. In your Codespace, click the Extensions icon in the left sidebar (or press Ctrl/Cmd + Shift + X)
2. Search for "Live Server" by Ritwick Dey
3. Click Install

How to use Live Server:

• Open your index.html file
• Right-click in the editor → Open with Live Server
• Or click Go Live in the status bar at the bottom

For more options, check the Live Server extension page.

Test your starter files:

Open with Live Server and verify the site loads.

---

Step 5: Find Your Images (5 min)

Use DevTools to find the dimensions of firefox-icon.png. You'll need two images the same size.

Where to find images:

• Unsplash or Pexels for free photos
• Picsum for placeholder images

Requirements:

• Both images must be the same dimensions as the original
• Name them fox1.png and fox2.png (or update the code to match your names)
• Place them in your images/ folder

---

Step 6: Add the Image Changer (15 min)

Follow the "Adding an image changer" section in the tutorial.

---

Step 7: Add the Welcome Message (15 min)

Follow the "Adding a personalized welcome message" section in the tutorial.

Additional requirement: Style the button. You can design it yourself or find styles on CodePen — just cite your source in a comment.

Make it your own: Change the heading text, pick images that mean something to you, customize the colors. This isn't just a tutorial — it's going in your portfolio.

---

Step 8: Write Your Summary

At the bottom of your main.js, add a summary comment:

/*
  SUMMARY:
  This file does two things:
  1. [Your explanation of the image changer]
  2. [Your explanation of the welcome message]

  The key pattern I learned: [your insight here]
*/

---

Step 9: Commit and Push (5 min)

1. Save all files
2. In the Codespace, open the Source Control panel (left sidebar)
3. Stage your changes, write commit message: Add behavioral layer lab
4. Click Commit then Sync Changes
5. Verify your live site at https://yourusername.github.io/DESN378-code-design-2/week-0/behavioral-layer/

---

Complete Criteria

Your lab is complete when:

• Project lives in week-0/behavioral-layer/
• Image changer works (click swaps between two images)
• Welcome message shows your name
• Name persists after page reload (localStorage working)
• "Change user" button lets you update your name
• Button is styled (not default browser style)
• No errors in browser console
• Published to GitHub Pages

---

Stretch Goals

Done early? Try these enhancements:

1. Add keyboard support — Make the image swap when you press Enter or Space while it's focused (add tabindex="0" to the image)

2. Add a transition effect — Use CSS transitions to fade between images instead of an instant swap

3. Add a third image — Modify the code to cycle through three images instead of two

4. Clear localStorage button — Add a "Forget me" button that clears the saved name

---

Troubleshooting

Nothing happens when I click the image

1. Check the console — Open DevTools (Cmd/Ctrl + Option/Shift + I) and look for red errors
2. Is the script linked? — Make sure <script src="main.js"></script> is at the end of <body>
3. File paths correct? — Verify your image paths match exactly (case-sensitive!)

The prompt keeps appearing

This happens if you click "Cancel" or leave the prompt empty. The code asks again to prevent blank names. Enter something to continue.

localStorage isn't working

1. Make sure you're using Live Server in your Codespace, not opening the file directly (file:// URLs can't use localStorage)
2. Check if your browser blocks localStorage in private/incognito mode

Images don't swap

Double-check that:

• Image file names match exactly (including extension: .png vs .jpg)
• Images are in the images/ folder
• The src paths in your JavaScript match the actual paths

Button doesn't do anything

Make sure you have both the addEventListener for the button AND the setUserName function defined above it.

---

Connection to Week 1

The patterns you learned today are the foundation for everything:

This Lab	Week 1: Theme Toggle
querySelector("img")	querySelector(".theme-toggle")
Click to swap images	Click to swap themes
localStorage.setItem("name", ...)	localStorage.setItem("theme", ...)
Remember name on reload	Remember theme on reload

You just built the exact same logic you'll use for dark mode. The only difference is what you're storing and what you're changing.

---

Submission

Submit to Canvas:

1. Link to your GitHub repository
2. Link to your live page: https://yourusername.github.io/DESN378-code-design-2/week-0/behavioral-layer/

---

Resources

• MDN: Adding Interactivity — The tutorial we're working through
• MDN: querySelector — Finding elements
• MDN: addEventListener — Responding to events
• MDN: localStorage — Saving data locally

Week 0: The On-Ramp

Purpose: Prepare students for JavaScript before the first project. Build confidence, not complexity.

Technical Focus:

• What JavaScript is (and isn't)
• DevTools orientation (Console, Elements panel)
• Reading code vs. writing code
• First console experiments
• Script linking basics

By End of Week: Students can open DevTools, type in the console, read simple JavaScript, and aren't scared of it.

---

Context

Students arrive from DESN 368 with:

• ✓ HTML/CSS fundamentals
• ✓ GitHub account and workflow
• ✓ Figma experience
• ✓ VS Code basics
• ✗ Zero JavaScript experience

Week 0 bridges this gap without overwhelming them.

---

Day 1: Lecture Day

Opening: What is JavaScript? (15 min)

Start with the familiar:

"You know HTML gives structure. You know CSS gives style. JavaScript gives behavior."

Draw the layers:

┌─────────────────────────────────┐
│  BEHAVIOR (JavaScript)          │  ← This quarter
├─────────────────────────────────┤
│  APPEARANCE (CSS)               │  ← You know this
├─────────────────────────────────┤
│  STRUCTURE (HTML)               │  ← You know this
└─────────────────────────────────┘

The nervous system metaphor:

"HTML is the skeleton. CSS is the skin and clothes. JavaScript is the nervous system — it senses things and responds."

Examples of JavaScript behavior:

• Button clicks that do something
• Forms that validate before submitting
• Menus that open and close
• Pages that remember your preferences
• Animations that respond to scroll

What JavaScript is NOT:

• Not a design tool (CSS does the styling)
• Not magic (it follows rules)
• Not something you memorize (you look things up)
• Not only for programmers (designers use it too)

---

DevTools Tour (20 min)

Open any website (or your portfolio from 368):

"Right-click → Inspect. Or Cmd+Option+I (Mac) / Ctrl+Shift+I (Windows)."

The Console Tab:

"This is where JavaScript talks to you. Errors appear here. You can type code here."

[DEMO] Type in the console:

2 + 2

"Press Enter. It evaluated your code and showed the result."

"Hello, " + "World"

"You can combine text too. These are called strings."

alert("Welcome to JavaScript!")

"This makes a popup. You just ran JavaScript."

The Elements Tab:

"This shows the live HTML. You already know this from 368."

"But watch — you can change the HTML from JavaScript."

[DEMO] In console:

document.body.style.background = "lightblue"

"The page changed. JavaScript just talked to the DOM and modified it."

---

Reading Code, Not Writing Code (15 min)

The goal this week:

"By Sunday, you need to recognize JavaScript. Not write complex programs. Just recognize."

Vocabulary tour:

// This is a comment. The browser ignores it.

// A variable stores a value
const message = "Hello";

// A function does something when called
function sayHello() {
  console.log("Hello!");
}

// An event listener waits for something to happen
button.addEventListener('click', function() {
  // This runs when the button is clicked
});

Don't memorize. Recognize:

When you see...	It means...
const or let	A variable is being created
function	A reusable piece of code
document.querySelector	Finding something on the page
addEventListener	Waiting for something to happen
console.log	Printing a message to the console

---

Break (10 min)

---

Console Playground (25 min)

Guided experimentation:

Walk students through these, typing together:

1. Math works:

10 * 5
100 / 4
2 ** 8  // 2 to the power of 8

2. Strings (text) work:

"Hello".length  // How many characters?
"hello".toUpperCase()  // Make it uppercase
"JavaScript".includes("Script")  // Does it contain...?

3. The page is accessible:

document.title  // The page title
document.body  // The body element
document.querySelectorAll('a')  // All the links
document.querySelectorAll('a').length  // How many links?

4. You can change things:

document.body.style.fontFamily = "Comic Sans MS"
document.querySelector('h1').textContent = "I changed this!"

Let them explore:

"Try changing colors. Try finding different elements. Break things — you can always refresh."

---

Closing: Assignments (15 min)

Frame the work:

"This week is about getting comfortable. No projects. No pressure. Just exploration."

Assign:

1. Lab 0-1: The Setup (do first!)

   • Create your repository from the template
   • Enable GitHub Pages
   • Sync your profiles (GitHub, Figma, CodePen)
   • Due before Day 2

2. Tutorial 0-1: Codedex Console Fundamentals

   • Complete 5 exercises on codedex.io/javascript
   • Consolidate into single file: tutorial-0-1-codedex-console.js
   • Submit to GitHub + Canvas
   • Exercise 5 (Receipt) can be weekend homework

3. Lab 0-2: Console Explorer

   • Hands-on DevTools exploration
   • Use the DevTools Field Guide as a reference
   • Due before Day 2

Reference:

• DevTools Field Guide — Designer-focused guide to DevTools

Preview:

"Next class, we'll go deeper into DevTools and start connecting scripts to HTML pages. Then Week 1 begins the first project."

---

Day 2: Practice Day

Opening: What Did You Discover? (15 min)

Check-in:

• "What did you try in the console?"
• "What surprised you?"
• "What broke?" (Celebrate the breaking — that's learning)

Address common questions:

• "Why do some things need quotes and some don't?"
• "What's the difference between = and ==?"
• "Why did I get undefined?"

---

Script Linking (20 min)

Moving from console to files:

"The console is great for experiments. But real code lives in files."

[DEMO] Create a simple HTML file:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My First Script</title>
</head>
<body>
  <h1>Hello!</h1>
  <button id="myButton">Click me</button>

  <script src="script.js" defer></script>
</body>
</html>

Create script.js:

console.log("Script loaded!");

const button = document.querySelector('#myButton');
button.addEventListener('click', function() {
  alert("You clicked the button!");
});

Key concepts:

1. <script> tag — links the JavaScript file
2. defer attribute — waits until HTML is loaded
3. src attribute — path to the file

Common mistakes:

Mistake	Result	Fix
Missing defer	Script runs before HTML exists	Add defer
Wrong file path	Console error: "404 not found"	Check the path
Typo in selector	null error	Use DevTools to copy selector

---

Error Reading Practice (15 min)

[DEMO] Break the code intentionally:

const button = document.querySelector('#myButon'); // typo!
button.addEventListener('click', function() { ... });

Console shows:

Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')
    at script.js:2:8

Read the error together:

• TypeError — something's the wrong type
• null — querySelector found nothing
• script.js:2:8 — line 2, character 8

"Every error tells you exactly where to look. Trust the error."

Practice:

Show 3-4 common errors, have students identify the problem:

• Missing semicolon (often works anyway in JS)
• Unclosed string quote
• Undefined variable
• Function called before defined

---

Break (10 min)

---

Structured Work Time (30 min)

Options for students:

1. Finish Tutorial 0-1 if not done (consolidate Codedex exercises into single file)
2. Finish Lab 0-2 if not done
3. Continue MDN exercises from the Scripting module
4. Experiment with linking their own script file

Circulate and help:

• Watch for DevTools confusion
• Watch for path issues with script files
• Encourage console experimentation

---

Closing (10 min)

What you've accomplished:

• Opened DevTools and used the console
• Read JavaScript and recognized key patterns
• Linked a script file to an HTML page
• Read error messages and found the problem

Week 1 preview:

"Monday we start Project 1: 'The System.' You'll build a theme toggle that changes your whole site's colors. Everything from this week — console, querySelector, events — comes together."

Remind:

• Tutorial 0-1 complete (all 5 exercises consolidated, submitted to GitHub + Canvas)
• Lab 0-2 complete
• Finish MDN Scripting module exercises
• Come ready to code on Day 1 of Week 1

---

Tutorials & Labs

Lab 0-1: The Setup

See separate file: labs/lab-0-1-the-setup.md

Students create their workspace for the quarter by setting up the GitHub template repo, enabling GitHub Pages, and synchronizing their profiles across platforms. This is foundational — everything else builds on having a working repository.

Tutorial 0-1: Codedex Console Fundamentals

See separate file: tutorials/tutorial-0-1-codedex-console.md

Students complete 5 exercises on Codedex.io, then consolidate into a single JavaScript file. Dual submission: GitHub (file management practice) + Canvas (fast grading).

Lab 0-2: Console Explorer

See separate file: labs/lab-0-2-console-explorer.md

Hands-on DevTools exploration. Students should use the DevTools Field Guide as a companion reference.

Lab 0-3: Portfolio Audit

See separate file: labs/lab-0-3-portfolio-audit.md

Peer review of DESN 368 portfolios to assess current state before building on them.

---

Course Resource: DevTools Field Guide

Location: resources/dev-tools-fieldguide/

A custom-built, designer-focused guide to browser DevTools. Unlike engineering tutorials that emphasize breakpoints and call stacks, this resource focuses on:

Engineering Focus	Designer Focus
Breakpoints and step debugging	Reading what changed
Call stack analysis	Watching events fire
Memory profiling	Checking element state
Network request debugging	Understanding errors
Source maps and minification	Testing predictions

Pages:

• index.html — Overview and mental model
• visual.html — Elements panel (structure and styles)
• console.html — Console as listener
• bridge.html — The $0 bridge between visual and behavioral
• behavioral.html — Reading element state
• connecting.html — Connecting both panels
• reference.html — Keyboard shortcuts and browser differences

Use throughout: Reference during labs, demos, and when students need DevTools help.

---

Resources

Assigned

• The Console - codexdex.io/javascript
• What is JavaScript? — MDN
• A first splash into JavaScript — MDN
• Variables — MDN (optional but helpful)

Reference

• Chrome DevTools Overview
• Firefox DevTools User Docs

Video

• JavaScript in 100 Seconds — Fireship
• Chrome DevTools Crash Course — Traversy Media

---

Alternatives

If DevTools feels overwhelming:

• Focus only on Console tab
• Skip Elements panel deep dive
• "We'll use more tabs as we need them"

If students are ahead:

• Point them to JavaScript30 Day 1
• Encourage experimentation with more DOM manipulation
• Preview Week 1's theme toggle concept

If students are struggling:

• Pair them with someone more comfortable
• Emphasize reading over writing
• "You don't need to memorize. You need to recognize."

---

Accessibility Checkpoint

This Week's Focus

Week 0 introduces accessibility through DevTools awareness. Students learn that:

1. DevTools has keyboard navigation — Tab through panels, Enter to select, arrow keys within
2. Console output is accessible — Text can be copied for screen readers
3. Errors are informative — Well-written errors help everyone, including those using assistive technology

Concrete Tasks

• During DevTools demo, show keyboard navigation (Tab, Enter, Esc)
• Mention that Console Playground has sufficient color contrast
• When discussing errors, emphasize that good error messages are an accessibility feature
• Preview: "Next week we'll learn about prefers-color-scheme — respecting user preferences"

Connection to Future Weeks

Week	Accessibility Focus
0	DevTools keyboard navigation, error clarity
1-2	prefers-color-scheme, prefers-reduced-motion
3-4	Focus states, keyboard navigation, aria-label
5-7	Motion alternatives, reduced-motion implementation
8-9	Track-specific (canvas aria-hidden, decorative vs. content)
10	Full audit during Delight Audit

---

Open Questions

1. Timing: Is Week 0 before the quarter officially starts (async) or the first in-class week? — Week 0 is the first in-class week
2. MDN depth: The full Scripting module has many lessons. Which are required vs. optional? — See updated Resources section
3. Lab submission: How do students submit Lab 0-1? Screenshot of console? Screen recording? — See Lab 0-1 submission instructions

Engage: Portfolio Audit

Due: Before Week 1, Day 1 Points: 10 (Participation) Time: 30-45 minutes

---

Overview

You'll pair up with a classmate and audit each other's DESN 368 portfolios. This isn't about criticism—it's about helping each other catch issues before they become problems.

By the end of this lab, you'll know exactly what needs fixing in your portfolio.

---

Why This Matters

Your portfolio from DESN 368 might have:

• Broken images — Hosted on temp sites that expired
• Dead links — Netlify policy changes, moved repos
• 404 errors — Projects that aren't deploying
• Outdated info — Old contact details, missing projects

You could find these issues yourself, but a fresh pair of eyes catches things you've learned to overlook.

---

Your Partner

You'll be assigned a partner at the end of Day 1. Exchange portfolio URLs before leaving class.

My partner: _______________________ Their portfolio URL: _______________________

---

The Audit

Review your partner's portfolio using the checklist below. Be thorough but kind—you're helping them, not grading them.

Checklist

Access & Loading

• Portfolio loads without errors (no 404, no blank page)
• Page loads in reasonable time (under 5 seconds)
• No browser console errors (open DevTools → Console)

Images

• All images display correctly
• No broken image icons (the little torn photo symbol)
• Images are appropriately sized (not blurry, not massive)

Links

• All navigation links work
• All project links work
• External links open correctly
• No links to localhost or broken Netlify URLs

Projects

• Each project page is accessible
• Project descriptions are present
• Project images/mockups display

Responsiveness

• Site works on mobile (check on your phone)
• No horizontal scrolling on mobile
• Text is readable without zooming

Content

• Contact info is current (if displayed)
• No placeholder text ("Lorem ipsum", "Coming soon")
• Name is spelled correctly
• Bio/about section exists (if applicable)

---

Issues Found

List specific issues you discovered. Be precise—"image broken" is less helpful than "Hero image on homepage doesn't load."

Issue	Location	Severity
		Low / Medium / High
		Low / Medium / High
		Low / Medium / High
		Low / Medium / High
		Low / Medium / High

Severity Guide:

• High: Portfolio doesn't load, major section broken
• Medium: Images missing, links dead, but site works
• Low: Minor visual issues, typos, outdated info

---

What's Working Well

Don't just list problems. Note what's working:

---

Self-Assessment

After auditing your partner's portfolio, think about your own.

What issues might my portfolio have that I've been ignoring?

_

_

What's the most important thing I need to fix?

_

---

Submission

Submit to Canvas:

1. Partner's name
2. Partner's portfolio URL
3. Completed audit checklist (screenshot or copy the filled-out checklist)
4. Your self-assessment (2-3 sentences)

---

After the Audit

Share your findings with your partner before Week 1. You don't need to fix everything immediately—the goal is to know what needs attention.

We'll address portfolio repairs incrementally throughout the quarter. Some issues you'll fix in Week 1 labs. Others can wait until Week 10 polish time.

---

Evaluation

Criteria	Points
Audit completed thoroughly	5
Specific, helpful feedback	3
Self-assessment included	2
Total	10

---

This audit is about helping each other. The portfolios you're reviewing represent real work from real people. Be honest, be specific, and be kind.

Learn: Codedex Console Tutorial

Due: Before Day 2 Points: 10 (Complete/Incomplete) Time Estimate: 45–60 minutes Platform: Codedex.io

---

Overview

Your first JavaScript practice happens on Codedex.io — an interactive learning platform where you write code and see results instantly. You'll complete 5 short exercises that teach you the fundamentals of console.log() and comments.

After completing the exercises on Codedex, you'll consolidate everything into a single JavaScript file and submit it. This workflow mirrors real development: learn concepts → write code → organize → ship.

Why Codedex?

• Instant feedback (no setup required)
• Gamified learning with progress tracking
• Perfect for first-time JavaScript exposure

---

What You're Learning

• How to output messages with console.log()
• That JavaScript runs one line at a time, top to bottom
• How to write single-line comments with //
• How to write multi-line comments with /* */
• How to format text output for readability

---

The Exercises

Go to codedex.io/javascript and complete these 5 exercises in order:

Exercise 1: Setting Up

Codedex Link: 01. Setting Up

Your first line of JavaScript! You'll write:

console.log("Hello internet!");

This outputs a message to the console. Simple, but powerful — this is how you'll debug and test code throughout the course.

---

Exercise 2: The Console

Codedex Link: 02. The Console

Learn more about console.log() and output your favorite food. You'll discover:

• Messages go inside parentheses and quotes
• Double quotes " or single quotes ' both work
• Semicolons at the end are optional (but good practice)

---

Exercise 3: Letter Tree

Codedex Link: 03. Letter Tree

JavaScript runs one line at a time. You'll create a pattern using multiple console.log() statements:

   a
  b c
 d e f
g h i j
   k

This exercise teaches you that order matters — code runs top to bottom.

---

Exercise 4: Secret Recipe

Codedex Link: 04. Secret Recipe

Comments let you leave notes in your code. You'll learn:

Single-line comments:

// This line is ignored when code runs
console.log("This line runs"); // Comments can go at the end too

Multi-line comments:

/*
Everything between these markers
is ignored by JavaScript.
Great for longer explanations.
*/

Your Task: Write a recipe for your favorite dish. Include ingredients, steps, and a comment about your "secret ingredient."

If you took DESN 368: Use the recipe from your recipe assignment! If you don't have one: Find a recipe you love and adapt it.

---

Exercise 5: Receipt

Codedex Link: 05. Receipt

Put it all together! Create a formatted receipt from a recent purchase using console.log() statements. The output should look something like:

==================================
         McDONALD'S RECEIPT
----------------------------------
           Order Details
----------------------------------
Item           Quantity   Price
----------------------------------
Burger          1          2.99
Fries           1          2.49
Soda            1          1.99
----------------------------------
Total                      7.47
==================================

This is your weekend assignment — take your time making it look good!

---

Consolidating Your Work

After completing all 5 exercises on Codedex, create a single JavaScript file with all your code organized into sections.

File Name

tutorial-0-1-codedex-console.js

File Structure

Use the template below (or download tutorial-0-1-template.js from the course materials):

// ============================================
// TUTORIAL 0-1: CODEDEX CONSOLE FUNDAMENTALS
// Student: [Your Name]
// Date: [Date]
// ============================================

// --------------------------------------------
// EXERCISE 1: SETTING UP
// --------------------------------------------
console.log("Hello internet!");
// Add your custom greeting below:


// --------------------------------------------
// EXERCISE 2: THE CONSOLE
// Your favorite food
// --------------------------------------------


// --------------------------------------------
// EXERCISE 3: LETTER TREE
// The pattern: a, b c, d e f, g h i j, k
// --------------------------------------------


// --------------------------------------------
// EXERCISE 4: SECRET RECIPE
// Use comments to document your recipe
// Include a "secret ingredient" comment
// --------------------------------------------


// --------------------------------------------
// EXERCISE 5: RECEIPT
// Format a receipt from a recent purchase
// --------------------------------------------

---

Testing Your File

Before submitting, run your JavaScript file to make sure everything works:

Option A: Browser Console

1. Open any browser (Chrome, Firefox, Safari)
2. Open DevTools:
   • Mac: Cmd + Option + I
   • Windows: Ctrl + Shift + I
3. Click the Console tab
4. Copy your entire .js file contents
5. Paste into the console and press Enter
6. All your outputs should appear in sequence

Option B: Drag and Drop

1. Open DevTools Console
2. Drag your .js file directly into the console
3. Watch the outputs appear

What you should see:

• Your greeting from Exercise 1
• Your favorite food from Exercise 2
• The letter tree pattern from Exercise 3
• Your recipe (with comments NOT showing — they're ignored!)
• Your formatted receipt from Exercise 5

---

Submission

Submit your work in two places:

1. GitHub (for file management practice)

1. Add your file to your portfolio repository
2. Commit with message: Add Tutorial 0-1 Codedex exercises
3. Push to GitHub

2. Canvas (for grading)

1. Upload tutorial-0-1-codedex-console.js to the Tutorial 0-1 assignment
2. This allows fast downloading and grading

---

Complete Criteria

Your tutorial is complete when:

• File is named tutorial-0-1-codedex-console.js
• All 5 exercise sections are present
• Code runs without errors in browser console
• Exercise 4 uses both single-line and multi-line comments
• Content is personalized (not just copied examples)
• Submitted to both GitHub and Canvas

Grading: 10 points, Complete/Incomplete

---

Common Issues

"My code has an error"

Check for:

• Missing closing quotes on strings
• Mismatched parentheses
• Typos in console.log

"Nothing appears when I run it"

Make sure you're looking at the Console tab, not the Elements tab in DevTools.

"My comments are showing in the output"

Comments should NOT appear in output. If they are, you might have:

• Forgotten the // at the start
• Forgotten to close a multi-line comment with */

"The receipt doesn't line up nicely"

Use spaces to align columns. In a monospace font (like the console), each character takes the same width.

---

Connection to Lab 0-2

This tutorial teaches you console.log() — the tool you'll use constantly for debugging. In Lab 0-2 (Console Explorer), you'll use the console to interact with web pages directly, changing colors, text, and more.

Think of this tutorial as learning to speak; Lab 0-2 is learning to have a conversation with the browser.

---

Resources

• Codedex JavaScript Course
• MDN: console.log()
• MDN: JavaScript Comments
• Chrome DevTools Console

Learn: Console Explorer

Due: Before Day 2 Points: 10 (Complete/Incomplete) Time Estimate: 30–45 minutes

---

Overview

Your first encounter with JavaScript happens in the browser console. This lab is about exploration and discovery — there's no "wrong" answer, just careful experimentation. By the end, you'll be comfortable opening DevTools, typing commands, and seeing how JavaScript can interact with web pages.

---

What You're Learning

• How to open and use Chrome/Firefox DevTools
• The Console as a JavaScript playground for trying ideas and seeing errors
• How JavaScript can read and modify web pages (the DOM)
• How to read and run basic JavaScript expressions
• The $0 bridge between Elements and Console

---

Reference Material

Use the Designer's DevTools Field Guide as a companion to this lab:

→ DevTools Field Guide

The Field Guide explains DevTools from a designer's perspective. If you get stuck or want to go deeper, start there.

---

Before You Start

Go to the Console Playground page:

→ Console Playground

This page is designed for experimentation. All the examples below will work on it, and there's a hidden surprise waiting for you to find.

(You can also experiment on any website, but the Playground has elements that match these examples exactly.)

---

Part 1: Open DevTools (≈5 min)

1. Open the Console Playground (or any website)

2. Open DevTools:

   • Mac: Cmd + Option + K (opens Console directly in Firefox)
   • Windows/Linux: Ctrl + Shift + K
   • Or: Right-click → Inspect → Console tab

3. You should see a blinking cursor — this is where you'll type JavaScript.

💡 Need more guidance? The Field Guide has a step-by-step walkthrough: Your First 15 Minutes

---

Part 2: Basic Expressions (≈10 min)

Type each of these in the console and press Enter. Watch what appears after each one.

Math

2 + 2

100 * 3

50 / 8

2 ** 10

(2 to the power of 10)

Text (Strings)

"Hello, World!"

"Hello, " + "JavaScript!"

"DESN 378".length

"whisper".toUpperCase()

Hint: Strings need quotes; numbers don't.

Short questions (answer in 1–2 sentences each):

• What happens if you type "hello" + 5?
• What does .length measure in the examples above?
• What happens if you forget the closing quote on a string? What error do you see?

---

Part 3: Talking to the Page (≈10 min)

JavaScript can interact with the page you're viewing through the document object and DOM methods.

Reading the page

Try each:

document.title

document.body

document.querySelector('h1')

document.querySelectorAll('a')

document.querySelectorAll('a').length

Changing the page

Then try:

document.body.style.backgroundColor = 'lightblue'

document.body.style.fontFamily = 'Georgia, serif'

document.querySelector('h1').textContent = 'I changed this!'

document.querySelector('h1').style.color = 'tomato'

Note: Refresh the page to undo your changes.

Short questions:

• What does document.querySelector('h1') return when it finds nothing?
• How many links (<a> tags) are on the page you're viewing?

💡 Getting null? That means your selector didn't find anything. See the Field Guide: Reading Errors

---

Part 4: Exploration (≈10 min)

Now it's your turn to explore. Use the console to:

1. Change colors — background, text, or borders
2. Change text — headings, paragraphs, button labels
3. Count elements — How many images? How many <div>s?
4. Intentionally "break" something — What happens when you run invalid code?

Things to try on the Console Playground:

document.querySelector('#counter').textContent = '999'

document.querySelector('.color-box').style.background = 'hotpink'

document.querySelector('#primary-btn').textContent = 'CLICK ME!'

document.querySelector('body').style.transform = 'rotate(2deg)'

alert('Hello from the console!')

console.log('This appears in the console, not a popup')

Challenge: Find the hidden message

Somewhere on the Console Playground, there's a hidden element. Can you find it and make it visible?

Hints:

• Use document.querySelectorAll('*') to see all elements
• Hidden elements often have style.display = 'none'
• Try changing that property to 'block'

💡 Stuck? The Field Guide explains how to select and manipulate elements: The $0 Bridge

You can clear the console at any time with the clear button or the clear() command.

---

Part 5: Reflection (submit these)

Answer in complete sentences (bullet points are fine):

1. What's one thing you changed on a page that surprised you?

2. What error message did you encounter? What did it say, and what caused it?

3. In your own words, what's the difference between alert() and console.log()?

4. Rate your comfort level with DevTools on a scale from 1–5 (1 = "still very unsure", 5 = "very comfortable")

---

Submission

Submit to Canvas:

• A screenshot of your console with at least 5 different commands you typed (not just the provided ones)
• Your answers to the Part 5 reflection questions

Complete criteria (10 pts complete / 0 pts incomplete):

• Screenshot clearly shows the console with multiple commands and results
• At least 3 of the reflection questions are answered thoughtfully
• Evidence of experimentation (not just copying and pasting the examples)

---

Stretch Goals (optional)

If you finish early or want to explore more:

1. Find the CSS — In the Elements/Inspector panel, click an element and look at the Styles pane. Try changing a value (like a color or font size) and see the effect.

2. localStorage preview — Type localStorage in the console. What do you see? (These key–value pairs will matter in Week 2.)

3. Inspect a site you admire — Open DevTools on a favorite site.

   • How is their HTML structured?
   • Can you find their JavaScript files in the Sources or Debugger tab?

---

Common Issues

"I don't see a Console tab"

Click the >> icon in DevTools to see hidden tabs, or use the menu to open the Console panel.

"My code gave an error"

That's expected when learning. Read the error message: which line does it reference, and what does it say?

"I changed something and now the page looks broken"

Refresh the page. Your changes in DevTools are temporary.

"querySelector returns null"

The element you're looking for doesn't exist on this page, or the selector doesn't match anything. Double-check your selector syntax (remember: .class and #id).

---

Connection to Week 1

Everything you practiced here — querySelector, changing .style, reading .textContent — becomes the foundation for your first project.

In Week 1, you'll use these same techniques to build a theme toggle that responds to user clicks. The console is where you'll debug it.

---

Resources

• Chrome DevTools Overview
• Chrome Console Panel
• Firefox DevTools User Docs

Lecture 1: The Behavioral Layer

Week 0, Day 1 Duration: 60 minutes Format: Lecture + Guided Exploration

---

Learning Objectives

By the end of this lecture, students will:

• Understand JavaScript's role as the "behavioral layer" of web design
• Navigate the Chrome DevTools Console
• Execute simple expressions in the console
• Recognize basic JavaScript syntax patterns

---

Pre-Lecture Setup

• Browser open (any website)
• DevTools ready to open
• Students have laptops open and ready to follow along

---

Lecture Outline

Part 1: What is JavaScript? (15 min)

Opening: The Three Layers

"Let's start with what you already know."

Draw on board:

┌─────────────────────────────────────┐
│  BEHAVIOR (JavaScript)              │  ← What it DOES
├─────────────────────────────────────┤
│  PRESENTATION (CSS)                 │  ← How it LOOKS
├─────────────────────────────────────┤
│  STRUCTURE (HTML)                   │  ← What it IS
└─────────────────────────────────────┘

"In 368, you mastered structure and presentation. This quarter, we add behavior."

The Nervous System Metaphor

"Think of a website like a body:"

• HTML is the skeleton — structure, bones, what exists
• CSS is the skin and clothes — appearance, style
• JavaScript is the nervous system — it senses and responds

"JavaScript is what makes a website feel alive. It responds to you."

Examples of JavaScript Behavior

[SHOW LIVE EXAMPLES] (or describe)

• Toggle a dark mode switch → page colors change
• Type in a search box → suggestions appear
• Scroll down → elements animate into view
• Click a button → form submits
• Leave the page → "Are you sure?" popup

"All of these are JavaScript. The page is responding to your actions."

What JavaScript is NOT

JavaScript is NOT...	Instead...
A design tool	CSS handles appearance
Magic	It follows strict rules
Something you memorize	You look things up
Only for "programmers"	Designers use it too

"You don't need to become a computer scientist. You need to make things respond."

---

Part 2: DevTools Tour (20 min)

Opening DevTools

"Everyone open a website. Any website. Your portfolio, Google, anything."

[DEMO]

"Open DevTools:"

• Mac: Cmd + Option + I
• Windows/Linux: Ctrl + Shift + I
• Or: Right-click anywhere → Inspect

"You've seen this in 368. But we're going to a new place."

The Console Tab

[CLICK TO CONSOLE TAB]

"This is the Console. It's where JavaScript lives."

"Two things happen here:"

1. You can type JavaScript and run it immediately
2. The page tells you about errors

[DEMO] Type in console:

2 + 2

"Press Enter. What do you see?"

Response: 4

"You just ran JavaScript. The console evaluated your code and showed the result."

Types of Values

[DEMO] Try these:

10 * 5

"Numbers work like math."

"Hello, World!"

"Text goes in quotes. We call these 'strings'."

"Hello, " + "World!"

"You can combine strings with +."

true

"This is a boolean — true or false. Useful for yes/no questions."

Talking to the Page

"Here's where it gets interesting. JavaScript can see and change the page."

[DEMO]

document.title

"That's the page title. JavaScript just read it from the page."

document.body.style.backgroundColor = "lightblue"

"Whoa. We just changed the page. No CSS file. JavaScript did that."

document.querySelector('h1')

"This finds the first <h1> on the page. querySelector uses the same selectors you use in CSS."

document.querySelector('h1').textContent = "I changed this heading!"

"We found it and changed it."

Key insight:

"JavaScript can find things on the page and change them. That's the foundation of everything we'll do."

---

BREAK (10 min)

---

Part 3: Reading Code (15 min)

The Goal This Week

"I don't expect you to write complex JavaScript yet. I want you to recognize it."

"When you see code, you should be able to say: 'That's a variable,' or 'That's a function.'"

Vocabulary Tour

[SHOW CODE ON SCREEN]

// This is a comment. The browser ignores it.

// A variable stores a value
const greeting = "Hello";

// A function is reusable code
function sayHello() {
  console.log("Hello!");
}

// An event listener waits for something to happen
button.addEventListener('click', function() {
  // This code runs when the button is clicked
});

Walk through each:

When you see...	It means...
//	Comment (ignored by browser)
const or let	Creating a variable
function	Defining reusable code
document.querySelector	Finding an element
addEventListener	Waiting for an event
console.log	Printing to the console

Reading, Not Writing

"You don't need to write this from memory. You need to read it and understand what's happening."

Exercise: Show code, ask what it does:

const name = "Alex";
console.log("Hello, " + name);

"What does this print to the console?"

Answer: Hello, Alex

---

Part 4: Console Playground (25 min)

Guided Experimentation

"Now it's your turn. I'll give you things to try. Type along with me."

Math:

100 / 3
2 ** 8
(10 + 5) * 2

Strings:

"JavaScript".length
"hello".toUpperCase()
"Hello World".includes("World")

Page interaction:

document.querySelectorAll('a')
document.querySelectorAll('a').length
document.querySelectorAll('img').length

"How many links are on this page? How many images?"

Modification:

document.body.style.fontFamily = "Georgia"
document.body.style.transform = "rotate(1deg)"

"Refresh to undo."

Free Exploration (10 min)

"Now experiment. Try to:"

• Change colors
• Change text
• Count different elements
• Break something (it's okay!)

"If you get an error, read it. We'll talk about errors on Day 2."

---

Closing (5 min)

What You Just Did

• Opened DevTools
• Ran JavaScript in the console
• Changed a live web page
• Recognized basic syntax

"That's your first day with JavaScript. You didn't just read about it — you used it."

Assignments

1. Build 0-1: The Setup (do first!)

   • Create your GitHub repo from template
   • Enable GitHub Pages
   • Due before Day 2

2. learn 0-1: Codedex Console Fundamentals

   • Complete exercises 1-5 on Codedex.io
   • Due before Day 2

3. learn 0-2: Console Explorer

   • Guided exploration with the DevTools Field Guide
   • Due before Day 2

Preview

"Day 2: We'll learn how to save JavaScript in files and connect them to HTML pages. Then Week 1 begins the first project."

---

Slide Outline (if using slides)

1. Title: "The Behavioral Layer"
2. Three layers diagram
3. Nervous system metaphor
4. Examples of JS behavior (with GIFs if possible)
5. What JavaScript is NOT
6. DevTools: how to open
7. Console tab screenshot
8. Demo: math in console
9. Demo: strings in console
10. Demo: document.title
11. Demo: changing background color
12. Demo: querySelector
13. Code vocabulary table
14. Reading exercise
15. Playground: try these
16. Assignments

---

Common Questions

"Is this the same as Java?" No. JavaScript and Java are completely different languages. The name is a historical accident.

"Do I need to memorize all this?" No. You need to recognize patterns. You'll look up syntax all the time — professionals do too.

"What if I break the website?" Refresh the page. Your changes are temporary. You can't permanently break anything from the console.

---

Instructor Notes

• Let students type along — muscle memory matters
• Expect some students to be scared of the console. Reassure them.
• The goal is comfort, not mastery
• If someone is ahead, challenge them: "Can you change the font size of every paragraph?"
• If someone is behind, pair them up

Lecture 2: From Console to Files

Week 0, Day 2 Duration: 30 minutes Format: Discussion + Live Demo

---

Learning Objectives

By the end of this lecture, students will:

• Understand how to link JavaScript files to HTML
• Know when and why to use the defer attribute
• Be able to read and interpret common console errors
• Feel confident debugging basic JavaScript issues

---

Pre-Lecture Setup

• A broken demo file ready to debug together
• Students should have Lab 0-1 (The Setup) and Lab 0-2 (Console Explorer) complete (or in progress)

---

Lecture Outline

Part 1: What Did You Discover? (10 min)

Check-in

"Let's hear about your console adventures."

Questions to ask:

• "What did you try in the console?"
• "What surprised you?"
• "What error messages did you see?"

Celebrate the Errors

"If you got errors, that's good. You were experimenting."

"Every error is a clue. JavaScript is trying to tell you what went wrong."

Quick Q&A

Common questions that come up:

• "Why do strings need quotes but numbers don't?"
• "What's the difference between single and double quotes?"
• "What does undefined mean?"

Answer: undefined means "this exists but has no value" or "this function doesn't return anything."

---

Part 2: Linking JavaScript Files (15 min)

The Console vs. Real Code

"The console is great for experiments. But real websites need code that runs automatically, saved in files."

"Let's connect a JavaScript file to an HTML page."

Live Demo: File Structure

Create or show:

my-project/
├── index.html
├── styles.css
└── script.js

"Same structure you know from 368, but now with a .js file."

The HTML

[SHOW index.html]

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My First Script</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Hello!</h1>
  <button id="myButton">Click me</button>

  <script src="script.js" defer></script>
</body>
</html>

The Script

[SHOW script.js]

console.log("Script loaded!");

const button = document.querySelector('#myButton');

button.addEventListener('click', function() {
  alert("You clicked the button!");
});

Key Points

The <script> tag:

<script src="script.js" defer></script>

Part	Meaning
<script>	"Load some JavaScript"
src="script.js"	"From this file"
defer	"Wait until HTML is loaded first"

Why defer matters:

"JavaScript runs as soon as it loads. If your script tries to find a button that doesn't exist yet, it fails."

Without defer:

Script runs → Button doesn't exist yet → Error

With defer:

HTML loads → Script runs → Button exists → Works

"Always use defer unless you have a specific reason not to."

---

Part 3: Reading Errors (10 min)

Errors Are Your Friends

"When JavaScript breaks, it tells you. Let's learn to read the message."

[DEMO: Break the code intentionally]

// Typo in the selector
const button = document.querySelector('#myButon');
button.addEventListener('click', function() {
  alert("Clicked!");
});

Console shows:

Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')
    at script.js:3:8

Anatomy of an Error

[DRAW OR SHOW]

Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')
   │         │                                │                    │
   │         │                                │                    └── What it tried to do
   │         │                                └── What it found (null = nothing)
   │         └── Type of error
   └── It wasn't caught/handled

    at script.js:3:8
         │        │ │
         │        │ └── Character position
         │        └── Line number
         └── File name

The Most Common Error

Cannot read properties of null = querySelector found nothing

Three causes:

1. Typo in selector — #myButon vs #myButton
2. Forgot the dot or hash — myButton vs #myButton
3. Missing defer — script runs before HTML exists

How to fix:

1. Check line 3 (the error told you)
2. Look at the selector
3. Compare to your HTML
4. Fix the typo

[DEMO: Fix the typo, show it working]

Other Common Errors

Error	Usually means
Unexpected token	Typo in syntax (missing quote, bracket)
is not defined	Variable doesn't exist (typo or not created)
is not a function	Trying to call something that isn't a function
Syntax Error	The code is malformed

"The error message always tells you where to look. Trust it."

---

Closing (5 min)

What You've Learned This Week

• ✓ JavaScript is the behavioral layer
• ✓ DevTools Console lets you run JS
• ✓ document.querySelector finds elements
• ✓ addEventListener waits for events
• ✓ <script defer> links files safely
• ✓ Errors tell you exactly where to look

Week 1 Preview

"Monday, we start Project 1: 'The System.'"

"You'll build a theme toggle that changes your whole site's colors. Everything from this week — console, querySelector, events — comes together in a real feature."

Reminders

• Lab 0-1 (The Setup) and Lab 0-2 (Console Explorer) complete
• Tutorial 0-1 (Codedex) complete
• Lab 0-3 (Portfolio Audit) due Sunday
• Come ready to build on Day 1 of Week 1

---

Slide Outline (if using slides)

1. Title: "From Console to Files"
2. What did you discover? (discussion)
3. Console vs. files
4. File structure diagram
5. HTML with script tag
6. The defer attribute
7. Why defer matters (diagram)
8. Broken code example
9. Error message anatomy
10. Common errors table
11. Week summary
12. Week 1 preview

---

Common Questions

"Can I put the script in the head?" Yes, with defer. Without defer, it runs before the body exists.

"What about putting script at the end of body?" Works too, but defer is cleaner and more explicit.

"Why did my code work yesterday but not today?" Check: Did you save the file? Did you refresh the browser? Is the file path correct?

---

Instructor Notes

• Keep this lecture short — students want work time
• The error-reading practice is crucial; don't skip it
• Show real debugging: the typo → error → fix cycle
• If time allows, debug a student's issue live

Reflect: Variables & Strings

Due: Before Day 2 Points: 10 (Complete/Incomplete) Time Estimate: 60–90 minutes (reading + notes)

---

Overview

Before you write complex interactions, you need to understand how JavaScript stores and works with information. This week, you'll complete freeCodeCamp's "Variables and Strings" theory modules and create hand-written visual notes that capture the key concepts.

Visual notes force you to process and synthesize what you're learning — drawing diagrams and writing in your own words helps concepts stick.

---

Required Learning

Navigate to freeCodeCamp: JavaScript Certification

Read The Theory Sections

Variables and Strings

• Introduction to JavaScript

• Introduction to Strings

• Understanding Code Clarity

---

Requirements

Spec	Details
Pages	2–4 pages (5.5" × 8.5" each)
Medium	Moleskine Cahier notebook
Tools	Pen (any color that scans well)
Style	Hand-written with visual elements

---

What to Include

Document anything that helps you process and remember the material:

Variables & Data Types:

• What's a variable? (use a metaphor that works for you)
• The difference between let and const — when do you use each?
• Data types: strings, numbers, booleans — draw examples

Strings:

• What does "immutable" mean for strings?
• String concatenation — how do you combine text?
• Template literals with ${} — how are they different?

Code Clarity:

• Semicolons — required or optional?
• Comments — // vs /* */
• Why do we use console.log()?

Personal additions:

• Questions that came up
• Connections between ideas
• "Aha" moments or things that clicked
• Things you found confusing (bring to class!)

---

Focus Questions

As you take notes, consider these questions:

1. What's the difference between let and const? When would you use one over the other?
2. Why do we use console.log()? What would happen if we couldn't see our output?
3. When should you use comments? What makes a comment helpful vs. noise?

---

Tips for Effective Visual Notes

• Don't copy text — rewrite concepts in your own words
• Draw diagrams — boxes for variables, arrows for assignments
• Use visual metaphors — variables as labeled boxes, strings as chains of characters
• Include code snippets — but annotate them with what each part does
• Leave space — you'll want to add things during class discussion
• Mark confusion — circle or star things you don't fully understand yet

---

Submission

1. Scan your pages using a document scanner or scanning app
2. Create a single PDF file (right-reading order)
3. Name your file: week-0-notes-lastname.pdf

---

Inspiration

For visual note-taking techniques and examples, check out:

• Google's Sketchnotes Gallery
• Search #sketchnotes on social media for community examples

01. Setting Up

# What is JavaScript?

Welcome to The Origins III: JavaScript! Things are about to get fun. ✨

The programming language we're learning is called JavaScript and it powers 97.5% of websites today.

JavaScript

=core languages of the web.

HTML and CSS give a website structure and styling, but JavaScript makes it interactive and come alive. It lets us add basic functionality and dynamic behaviors to our web pages.

But how did it come to be?

The 90s was the dawn of the dot-com era, and an internet browser war was brewing between Netscape and Microsoft. In 1995, a Netscape developer created a buggy new scripting language... in just 10 days. 😵‍💫

Take this clickable button, for example:

Every time you click the button, the date and time get updated! This is but a small demo of what JavaScript can do.

Without further ado, let's write a line of JavaScript code.

Instructions

Copy and paste the following onto line 3 of the code editor on the right.

console.log("Hello internet!");

Press the "Run" button and wait 1-2 seconds.

This should appear in the Console window if you did it correctly:

Hello internet

You are now ready for the journey ahead. ( ⸝⸝•ᴗ•⸝⸝ )੭⁾⁾

Press the "Submit answer" button and then "Next" to continue.

02. The Console

# The Web Console

Hold up, what the heck is a web console?

A web console is a feature in your browser that can run JavaScript code.

It's usually located in the browser's Developer Tools:

It should look something like:

For now, we're going to use the editor and Console window that we created just for your learning experience. 👉🏼

# Console Log

In JavaScript, the console.log() method tells the web console to output a message. We are going to use this a lot.

The message we want to display should be inside parentheses ( ) and surrounded by quotes. They can be double quotes " or single quotes ', but the opening and closing quote marks have to match.

This is an example of a console.log() method:

console.log("👋 Howdy!");
console.log('👋 Howdy!');

In the code above, we instructed our program to print, or log, a message. The message can either be in double or single quotes.

The resulting text that is displayed is referred to as the output.

The output of the message would be:

👋 Howdy!
👋 Howdy!

Note: It's optional to include a ; semicolon at the end of a line in JavaScript.

Now that we know more about the web console and outputting messages, let's try it again!

Instructions

With the editor on the right, use console.log() to output your favorite food! 🍎

Were you able to log the message?

Bonus: Try repeating these instructions in your browser's web console.

03. Letter Tree

# Line by Line

JavaScript runs one line of code at a time.

We can output multiple messages by using multiple console.log() methods. For example, if we want to print out two simple greetings:

console.log("🚌 Greyhound to New York");
console.log("🕥 Departs at 9:30 am");

This will output:

🚌 Greyhound to New York
🕥 Departs at 9:30 am

Now let's use what we just learned to complete a special challenge!

Instructions

Suppose we want the output to look exactly like this pattern below:

   a
  b c
 d e f
g h i j
   k

How can you do that?

Create a JavaScript program that prints this pattern exactly as shown.

This will likely take some trial and error, but give it a shot!

04. Secret Recipe

# Comments

In programming, comments are used to document what our code does, for ourselves and other developers. They can also disable parts of the program. When the program is run, the comments are ignored.

In JavaScript, there are single line comments and multi-line comments.

## Single Line Comments

We can create a single line comment using // two forward slashes:

// console.log("Nada");

console.log("Hi"); // I'm a comment, too!

On each line, anything to the right of the // forward slashes is ignored when the code is run.

• The first line is a comment with code that gets ignored.
• The second line begins with runnable code, and ends with a comment.

The first console.log() is commented out while the other one is not. Therefore, the output would only be "Hi".

## Multi-line Comments

We can create a multi-line comment using /* to start the comment and */ to end it:

/* This is commented out.
console.log("Nada.")
Yep! This is, too.
console.log("Not displayed, either.")
*/

Here, everything inside the /* and */ are commented out. So a multi-line comment can technically be as long as you want!

Instructions

For this I want them to take their recipe assignment from web1 and use it for this. if they don't have a recipe assignment, then they should find a recipe...

Some of the best recipes have one or more secret ingredients that give it epic flavor. 🤤

Famous examples include:

• Coca-Cola formula.
• Kentucky Fried Chicken (KFC)'s 11 herbs and spices.
• The sauce used in a Big Mac at McDonald's.

Write a recipe for your favorite dish. Be sure to include a list of ingredients, step-by-step instructions, and a comment about any "secret ingredient" you might use.

Feel free to use a mix of single line and multiline comments.

This will be homework for the weekend: 05. Receipt

# Congrats!

We've made it to the end of the first chapter! 🎈

console.log("Congrats! You've made it.");

To recap what we've learned:

• The console.log() method outputs messages to the Console window.
• JavaScript code runs one line at a time, from top to bottom.
• Single line comments are created using the // forward slashes.
• Multi-line comments are started by /* and closed with */.

It's time to use what we've learned to build something fun!

Instructions

You are going to recreate a receipt of a purchase from the last store or restaurant that you went to... using JavaScript! 🧾

Make sure to check your pockets and wallet if you forgot.

Use console.log() methods to print the following info:

• Name of the store/restaurant.
• A row that says "Order Details".
• A row with column names for "Item", "Quantity", and "Price".
• At least two items that were purchased.
• The total price for the purchase.

The output should look like:

==================================
         McDONALD'S RECEIPT
----------------------------------
           Order Details
----------------------------------
Item           Quantity   Price
----------------------------------
🍔 Burger       1          2.99
🍟 Fries        1          2.49
🥤 Soda         1          1.99
----------------------------------
Total                      7.47
==================================

When you are done, take a screenshot and click the Twitter icon to share your receipt.

Week 0 Resources: The Workshop

Topics: JavaScript Introduction, DevTools, Console, Script Linking

---

Lectures

Day 1: The Behavioral Layer

→ Lecture Slides

Variables, functions, event listeners, DOM selection — JavaScript fundamentals from a designer's perspective.

Day 2: TBD

Lecture content coming soon

---

Student Repository

→ DESN-378-code-design-2

Your workspace for the quarter. Clone this template to start building your portfolio.

---

Course Resources

Console Playground

→ Console Playground

Interactive sandbox for practicing DevTools and console commands. Use this during Day 1 lecture.

Designer's DevTools Field Guide

→ DevTools Field Guide

A custom-built guide that explains DevTools from a designer's perspective. Reference this throughout the quarter when you need help with:

• Visual Tools (Elements panel) — reading structure and styles
• Behavioral Tools (Console) — understanding state and events

---

Assigned (Required)

Complete these before or during Week 0:

For Day 1

Resource	Type	Time	Notes
JavaScript in 100 Seconds	Video	2 min	Fireship — fast, visual intro
A Designer's Guide to JavaScript	Article	15 min	Designer-focused explanation

For Day 2

Resource	Type	Time	Notes
Adding Interactivity	Tutorial	30 min	MDN — hands-on practice
What went wrong? Troubleshooting JavaScript	Tutorial	20 min	Error reading practice

Tutorial (External Platform)

Resource	Type	Time	Notes
Codedex JavaScript Console	Interactive	45 min	Exercises 1-5 — see Tutorial 0-1

---

Reference

DevTools Documentation

• Firefox DevTools — We use Firefox in this course
• Chrome DevTools Overview — If you prefer Chrome

JavaScript Basics

• MDN JavaScript First Steps — Learning path
• Variables — Deep dive on variables

---

Video

Essential

Video	Duration	Why Watch
JavaScript in 100 Seconds	2 min	Fireship — quick, visual overview
		h

Recommended

Video	Duration	Why Watch
HTML/CSS/JS Crash Course Part 1	15 min	Reviews the three layers
Learn JavaScript in 1 Hour	60 min	Mosh — thorough explanations

For Fun

Video	Duration	Why Watch
The Weird History of JavaScript	10 min	Fireship — explains why JS is quirky

---

Deep Dive (Articles)

Designer-Focused

• JavaScript for Designers — A List Apart, addresses designer fears
• UI/UX: JavaScript for Designers — Medium, practical perspective

Technical Deep Dive

• What is JavaScript? — MDN, conceptual foundation
• JavaScript for Cats — Whimsical but effective introduction
• Eloquent JavaScript, Ch. 1-2 — Free online book, for those wanting depth

---

Tools

Browser DevTools

Tool	Platform	Notes
Firefox DevTools	Firefox	We use this in class
Chrome DevTools	Chrome, Edge	Most popular alternative
Safari Web Inspector	Safari	macOS only

Online Playgrounds

Tool	Best For
CodePen	Quick experiments, sharing
JSFiddle	Simple testing

---

Inspiration

• CodePen Topics — See what's possible
• Active Theory — Award-winning interactive work
• Refokus — Modern web experiences

---

Cheat Sheet

Opening DevTools

Mac:     Cmd + Option + I
Windows: Ctrl + Shift + I
Or:      Right-click → Inspect

Console Basics

// Math
2 + 2                    // 4
10 * 5                   // 50

// Strings
"Hello"                  // "Hello"
"Hello".length           // 5
"hello".toUpperCase()    // "HELLO"

// Finding elements
document.querySelector('h1')
document.querySelectorAll('a')
document.querySelectorAll('a').length

// Changing things
document.body.style.backgroundColor = "lightblue"
document.querySelector('h1').textContent = "New text"

Linking JavaScript

<script src="script.js" defer></script>

---

Week 1 Preview

• CSS Custom Properties (design tokens)
• querySelector + addEventListener
• The $0 Bridge (connecting Inspector to Console)
• Building a theme toggle
• Your first interactive feature!

Week 0: The Workshop

Unit: Pre-Course Foundation Interaction Question: What is JavaScript, and how do I talk to a web page?

---

Learning Outcomes

By the end of this week, students will be able to:

1. Set up a GitHub repository from template with GitHub Pages enabled
2. Explain what JavaScript does in relation to HTML and CSS (the behavioral layer)
3. Navigate Chrome/Firefox DevTools, specifically the Console and Elements panels
4. Execute simple JavaScript expressions in the browser console
5. Recognize basic JavaScript syntax: variables, functions, event listeners
6. Link an external JavaScript file to an HTML document
7. Read console error messages and identify the source of common problems

---

Two-Day Breakdown

Day 1: The Behavioral Layer

Duration: 1 hour lecture + 30 minutes guided practice

Time	Activity	Description
0:00	Opening	What is JavaScript? The three-layer model
0:15	DevTools Tour	Console and Elements panel walkthrough
0:35	Vocabulary	Reading code — variables, functions, events
0:50	Break	—
1:00	Console Playground	Guided experimentation, typing together
1:25	Closing	Assignment overview, preview Week 1

Deliverables assigned:

• Build: The Setup (GitHub repo + Pages)
• Learn: Codedex Console Tutorial
• Learn: Console Explorer

---

Day 2: From Console to Files

Duration: 30 minutes lecture + 60 minutes practice

Time	Activity	Description
0:00	Opening	What did you discover? Q&A
0:15	Script Linking	<script>, defer, file paths
0:35	Error Reading	Anatomy of console errors, common mistakes
0:50	Break	—
1:00	Work Time	Lab completion, MDN exercises, experimentation
1:20	Closing	Week 1 preview, final reminders

---

Topics Covered

Concept	Depth	Notes
GitHub setup	Practical	Template repo, GitHub Pages
JavaScript purpose	Introduction	Mental model, not syntax
DevTools Console	Hands-on	Primary focus this week
DevTools Elements	Overview	Connection to DOM
Variables (const, let)	Recognition	Reading, not writing
Functions	Recognition	See the pattern
Event listeners	Recognition	Conceptual introduction
<script> tag	Practical	defer attribute, file paths
Error messages	Practical	Line numbers, common errors

---

Activities

Type	Activity	Points	Due
Learn	Codedex Console Tutorial	10	Before Day 2
Learn	Console Explorer	10	Before Day 2
Build	The Setup	10	Before Day 2
Engage	Portfolio Audit	10	Sunday
Reflect	Visual Notes	10	Before Day 2

Learn activities use external platforms or self-guided exploration. Build creates infrastructure. Engage involves peer collaboration. Reflect captures understanding visually.

---

Course Resource

Designer's DevTools Field Guide

→ DevTools Field Guide

A custom-built guide explaining DevTools from a designer's perspective. Use alongside Lab 0-2 and throughout the quarter.

Section	Focus
Overview	Mental model, the $0 bridge
Visual Tools	Elements panel, reading structure
Behavioral Tools	Console, watching events
Reading Errors	What errors mean, how to respond

---

Assigned Reading/Tutorials

Resource	Type	Required
JavaScript in 100 Seconds	Video	Yes
A Designer's Guide to JavaScript	Article	Yes
Adding Interactivity	MDN Tutorial	Yes
Variables	MDN Tutorial	Optional

---

Key Vocabulary

Term	Definition
DOM	Document Object Model — the browser's representation of the page
Console	DevTools panel where JavaScript runs and errors appear
Variable	A named container for storing values
Function	A reusable block of code
Event	Something that happens (click, scroll, key press)
Event Listener	Code that waits for an event and responds
defer	Script attribute that waits for HTML to load first
$0	Console shortcut for the currently selected element

---

Common Struggles & Solutions

Struggle	Solution
DevTools feels overwhelming	Focus only on Console tab first; use the Field Guide
"I don't understand the code"	Reading ≠ writing; recognition is the goal
Script doesn't run	Check defer, check file path
"Cannot read properties of null"	querySelector found nothing; check selector
GitHub Pages not deploying	Check Settings → Pages → Source is set to main

---

Demos Available

Demo	Description	Location
Console Playground	Interactive page for console experiments	demos/console-playground.html
DevTools Field Guide	Designer-focused DevTools reference	resources/dev-tools-fieldguide/

---

Accessibility Notes

• DevTools has keyboard navigation (Tab, Enter, arrow keys)
• Console output can be copied for screen reader users
• Code examples should use sufficient color contrast
• Preview: prefers-color-scheme comes in Week 1

---

Connections

Connects To	How
Week 1	querySelector, addEventListener used in theme toggle
Week 2	Console used for debugging localStorage
All weeks	DevTools debugging is fundamental

---

Instructor Notes

• This week is about confidence, not complexity
• Let students break things — refresh fixes everything
• Some students will be ahead; point them to JavaScript30
• Some will struggle; pair them up
• The MDN tutorials are excellent; don't reinvent them
• Reference the DevTools Field Guide during demos

---

Materials Checklist

• Lecture 1 slides/outline ready
• Lecture 2 slides/outline ready
• Build: The Setup brief posted
• Learn: Codedex Console Tutorial brief posted
• Learn: Console Explorer brief posted
• Engage: Portfolio Audit brief posted
• Reflect: Visual Notes brief posted
• DevTools Field Guide complete
• Console Playground demo ready
• Resources page updated

Week 0 Instructor Walkthrough

A step-by-step guide to verify everything works before teaching.

---

Pre-Class: Verify Everything Works

Step 1: Console Playground

Open in Firefox:

curriculum/weeks/week-0/demos/console-playground.html

Test these in the Console (Cmd+Option+K):

Test	Expected Result
document.querySelector('h1')	Returns <h1>Console Playground</h1>
document.querySelector('#counter')	Returns <span id="counter">0</span>
document.querySelector('.color-box')	Returns the blue box div
document.querySelector('#secret')	Returns the hidden div
document.querySelector('#secret').style.display = 'block'	Reveals "🎉 You found the secret message!"

• All queries work
• Image loads from picsum.photos
• No console errors on page load

---

Step 2: DevTools Field Guide

Open in Firefox:

curriculum/weeks/week-0/resources/dev-tools-fieldguide/index.html

Verify:

• Page loads with fonts (DM Sans body, JetBrains Mono code)
• Sidebar shows 4 sections:
  • Get Started: Overview, Your First 15 Minutes
  • Tutorials: The Console, The $0 Bridge, Reading Element State
  • Troubleshooting: Reading Errors, Quick Reminders
  • Reference: Visual Tools, Keyboard Shortcuts
• Click each sidebar link — all 9 pages load
• Navigation footers appear at bottom of tutorial pages

Test Console Playground link from Field Guide:

1. Go to start.html (Your First 15 Minutes)
2. Click the Console Playground link in the callout
3. Should open ../../demos/console-playground.html

• Link works

---

Step 3: Lab Links

Open:

curriculum/weeks/week-0/labs/lab-0-2-console-explorer.md

Verify these links resolve correctly:

• ../resources/dev-tools-fieldguide/index.html → Field Guide
• ../resources/dev-tools-fieldguide/start.html → First 15 Minutes
• ../resources/dev-tools-fieldguide/errors.html → Reading Errors
• ../resources/dev-tools-fieldguide/bridge.html → The $0 Bridge
• ../demos/console-playground.html → Console Playground

---

Day 1: Lecture Day

Before Students Arrive

• Console Playground open in Firefox
• Field Guide index.html open in a tab
• Syllabus ready (brief overview only)
• Test projector/screen share with DevTools visible

Delivery Sequence

1. Syllabus Overview (5-10 min)

• Brief — this is an advanced course
• Key points: 4 projects, accessibility integrated, portfolio focus
• Point to syllabus for details, move on

2. What is JavaScript? (15 min)

• Draw the 3-layer diagram (HTML = structure, CSS = appearance, JS = behavior)
• "Nervous system" metaphor
• Examples: toggles, forms, menus, preferences
• What JS is NOT: not magic, not memorization

3. DevTools Tour (20 min)

• Open Console Playground
• Cmd+Option+K to open Console directly
• Demo these commands live:

2 + 2
"Hello, " + "World"
alert("Welcome to JavaScript!")
document.body.style.backgroundColor = "lightblue"

• Show Elements/Inspector tab briefly: "You know this from 368"

4. Reading Code, Not Writing (15 min)

• Show vocabulary: const, function, querySelector, addEventListener
• "Don't memorize. Recognize."

5. Break (10 min)

6. Console Playground Practice (25 min)

Math:

10 * 5
2 ** 8

Strings:

"Hello".length
"hello".toUpperCase()

Finding elements:

document.querySelector('h1')
document.querySelectorAll('a').length

Changing things:

document.querySelector('h1').textContent = "I changed this!"
document.querySelector('.color-box').style.background = 'hotpink'

Let students explore freely.

7. Assignments (15 min)

• Lab 0-1: The Setup — Create repo, enable GitHub Pages (do first!)
• Tutorial 0-1: Codedex — 5 exercises on codedex.io
• Lab 0-2: Console Explorer — Due before Day 2
• Point to DevTools Field Guide as reference

---

Day 2: Practice Day

Before Students Arrive

• Console Playground open
• VS Code ready for script linking demo
• Field Guide errors.html ready to reference

Delivery Sequence

1. What Did You Discover? (15 min)

• "What did you try in the console?"
• "What surprised you?"
• "What broke?" (celebrate breaking!)
• Address common questions: quotes, =, undefined

2. Script Linking Demo (20 min)

• Create simple HTML file
• Add <script src="script.js" defer></script>
• Create script.js with button click handler
• Key concepts: <script> tag, defer, file paths

Common mistakes:

Mistake	Symptom
Missing defer	"Cannot read property of null"
Wrong file path	Script doesn't run, no errors
Typo in selector	null returned

3. Error Reading Practice (15 min)

• Break code intentionally (typo in selector)
• Read error together: TypeError, null, line number
• Reference: Field Guide errors.html
• Practice 3-4 common errors

4. Break (10 min)

5. Work Time (30 min) Students choose:

• Finish Tutorial 0-1 (consolidate Codedex)
• Finish Lab 0-2
• Experiment with script linking

6. Closing (10 min)

• What you accomplished this week
• Week 1 preview: "Project 1: The System — theme toggle"
• Reminders: Tutorial + Labs due, come ready to code

---

Quick Reference: Key Paths

Resource	Path from week-0/
Console Playground	demos/console-playground.html
Field Guide (start)	resources/dev-tools-fieldguide/index.html
First 15 Minutes	resources/dev-tools-fieldguide/start.html
Errors Guide	resources/dev-tools-fieldguide/errors.html
Quick Reminders	resources/dev-tools-fieldguide/connecting.html
Lab 0-1	labs/lab-0-1-the-setup.md
Lab 0-2	labs/lab-0-2-console-explorer.md
Lab 0-3	labs/lab-0-3-portfolio-audit.md
Tutorial 0-1	tutorials/tutorial-0-1-codedex-console.md

---

If Things Go Wrong

Console Playground won't load:

• Check file path (should be in demos/)
• Use any website as fallback — Console works everywhere

Field Guide links broken:

• Navigate directly to files in resources/dev-tools-fieldguide/
• Paths were fixed — if still broken, check for typos

Students overwhelmed by DevTools:

• Focus ONLY on Console tab
• Skip Elements deep dive
• "We'll use more tabs as we need them"

Students ahead:

• Point to JavaScript30 Day 1
• Let them experiment more
• Preview Week 1 theme toggle concept

---

Files to Have Open

Day 1

1. demos/console-playground.html (Firefox)
2. resources/dev-tools-fieldguide/index.html
3. labs/lab-0-1-the-setup.md
4. labs/lab-0-2-console-explorer.md

Day 2

1. demos/console-playground.html (Firefox)
2. resources/dev-tools-fieldguide/errors.html
3. VS Code (blank, for script linking demo)
4. lectures/lecture-2-from-console-to-files.md