makeabilitylab · jonfroehlich · Jun 24, 2026 · Jun 24, 2026
diff --git a/arduino/arduino-ide.md b/arduino/arduino-ide.md
@@ -19,6 +19,10 @@ usetocbot: true
 {:toc}
 ---
 
+![Screenshot of the Arduino IDE with an empty sketch showing setup() and loop() functions](assets/images/ArduinoIDE_BlankAndAnnotated.png)
+**Figure.** Coming up: by the end of this lesson, you'll have the Arduino IDE installed and configured, with a new sketch open showing the `setup()` and `loop()` functions ready to program your board.
+{: .fs-1 }
+
 The Arduino IDE (Integrated Development Environment) is where you'll write, compile, and upload code to your Arduino board. This page walks through downloading, installing, and configuring the IDE so you're ready to start programming.
 
 ## Download and install the Arduino IDE

diff --git a/arduino/rgb-led-fade.md b/arduino/rgb-led-fade.md
@@ -21,6 +21,12 @@ usetocbot: true
 {:toc}
 ---
 
+<div class="iframe-container">
+  <iframe width="100%" src="https://www.youtube.com/embed/zL7xIWHqVaY" title="Workbench video of an RGB LED smoothly crossfading through the color wheel on an Arduino Uno" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+</div>
+**Video.** Where we're headed: an RGB LED smoothly crossfading through the color wheel, driven by `analogWrite()` and the HSL color space on an Arduino Uno.
+{: .fs-1 }
+
 In this lesson, you will learn how to fade between RGB colors using [`analogWrite`](https://www.arduino.cc/reference/en/language/functions/analog-io/analogwrite/), how to use the [HSL colorspace](https://en.wikipedia.org/wiki/HSL_and_HSV) to more easily (and independently) control hue and brightness, and how to use and load local `C/C++` libraries.
 
 ---

diff --git a/arduino/tone.md b/arduino/tone.md
@@ -21,7 +21,11 @@ usetocbot: true
 {:toc}
 ---
 
-<!-- TODO: Record a video of a melody playing on a piezo buzzer (with an LED flashing in sync) and embed here as the opening hook -->
+<video controls playsinline aria-label="Star Wars Imperial March playing on an Arduino Leonardo with the built-in LED flashing in sync">
+  <source src="assets/videos/Arduino_Tone-PlayImperialMarch_Handheld_web.mp4" type="video/mp4" />
+</video>
+**Video.** A preview of what we'll build: the Imperial March from Star Wars played on a piezo buzzer with the `tone()` function, with the built-in LED flashing in time with each note.
+{: .fs-1 }
 
 So far, every output we've produced has been visual—turning LEDs on, off, fading, and blinking. In this lesson, we'll add a completely new output modality: **sound!** Using a piezo buzzer and the Arduino [`tone()`](https://www.arduino.cc/reference/en/language/functions/advanced-io/tone/) function, we'll learn how to play individual notes, scales, and even melodies.
 

diff --git a/communication/p5js-serial-io.md b/communication/p5js-serial-io.md
@@ -20,6 +20,12 @@ usetocbot: true
 {:toc}
 ---
 
+<video autoplay loop muted playsinline aria-label="Video demonstrating the full DisplayShapeBidirectional demo with p5.js buttons and Arduino buttons controlling shapes">
+  <source src="assets/videos/DisplayShapeBidirectional_TrimmedAndOptimized900w.mp4" type="video/mp4" />
+</video>
+**Video.** A preview of what we'll build: **DisplayShapeBidirectional**, where p5.js buttons *and* physical Arduino buttons control a shape shared between the browser canvas and the OLED display. ([live page](http://makeabilitylab.github.io/p5js/WebSerial/p5js/DisplayShapeBidirectional), [code](https://github.com/makeabilitylab/p5js/tree/main/WebSerial/p5js/DisplayShapeBidirectional))
+{: .fs-1 }
+
 OK, now we're really rolling! We learned about [serial communication](serial-intro.md), then how to use serial in our browsers ([Web Serial!](web-serial.md)), and then how to do this with [p5.js](p5js-serial.md). And we've already made some cool proof-of-concept demos.
 
 Let's take this growing knowledge and momentum to create slightly more sophisticated programs. First, we'll cover the case of using p5.js to control something on our Arduino (`Computer → Arduino`). Then we'll introduce bidirectional communication (`Computer ↔ Arduino`) where the computer and Arduino work together to create a holistic interactive experience. 🎮

diff --git a/communication/p5js-serial.md b/communication/p5js-serial.md
@@ -20,6 +20,12 @@ usetocbot: true
 {:toc}
 ---
 
+<video autoplay loop muted playsinline aria-label="Video demonstrating the GraphIn p5.js app with a potentiometer showing real-time sensor data as colored bars">
+  <source src="assets/videos/AnalogOut.ino-GraphIn-POT-Trimmed-Optimized.mp4" type="video/mp4" />
+</video>
+**Video.** Where we're headed: **GraphIn**, a p5.js sketch that graphs live Arduino sensor data in the browser in real time (here, from a potentiometer). ([live page](https://makeabilitylab.github.io/p5js/WebSerial/p5js/GraphIn/), [code](https://github.com/makeabilitylab/p5js/tree/main/WebSerial/p5js/GraphIn))
+{: .fs-1 }
+
 We've only started to scratch the surface of what's possible when combining Arduino with computers. In this lesson (and the next), we're going to use a creative coding tool called [p5.js](https://p5js.org/) to help demonstrate this potential. It should be fun! 🎨
 
 {: .note }

diff --git a/communication/serial-intro.md b/communication/serial-intro.md
@@ -20,6 +20,12 @@ usetocbot: true
 {:toc}
 ---
 
+<video autoplay loop muted playsinline aria-label="Video demonstrating the Arduino IDE Serial Monitor sending numeric text to the Arduino, which receives it, displays it on an OLED, and echoes it back.">
+  <source src="assets/videos/SimpleSerialIn-NoTalking-TrimmedAndSpedUp720p.mp4" type="video/mp4" />
+</video>
+**Video.** Serial communication in action—the focus of this lesson: text typed into the Arduino IDE [Serial Monitor](../arduino/serial-print.md) is sent to an Arduino, shown on an [OLED](../advancedio/oled.md), and echoed back.
+{: .fs-1 }
+
 Devices need to communicate. Sensors talk to microcontrollers. Microcontrollers talk to computers. Computers talk to the Internet. And beyond! Many different protocols have been created to support device-to-device communication—from [Ethernet](https://en.wikipedia.org/wiki/Ethernet) and [Zigbee](https://en.wikipedia.org/wiki/Zigbee) to WiFi and Bluetooth. In this lesson, we will focus on **asynchronous serial communication**, specifically TTL serial (Transistor-Transistor Logic Serial)—an enduring standard that has prevailed since the beginning of personal computers and is what the [Arduino Serial library](https://www.arduino.cc/reference/en/language/functions/communication/serial/) uses.
 
 Unlike other popular serial communication protocols like [I<sup>2</sup>C](https://learn.sparkfun.com/tutorials/i2c/all) and [SPI](https://learn.sparkfun.com/tutorials/serial-peripheral-interface-spi/all), TTL serial is *asynchronous*, which means it does not rely on a shared clock signal (precisely timed voltage pulses) paired with its data lines. This has the benefit of fewer wires but does result in a bit of communication overhead for each transmitted "packet" or data frame.

diff --git a/communication/web-serial.md b/communication/web-serial.md
@@ -20,6 +20,12 @@ usetocbot: true
 {:toc}
 ---
 
+<video autoplay loop muted playsinline aria-label="Video demonstrating the full SliderOut demo with a polished interface controlling an LED via Web Serial">
+  <source src="assets/videos/SimpleSerialIn-JavaScript-SliderOut-TrimmedAndSpedUp720p.mp4" type="video/mp4" />
+</video>
+**Video.** By the end of this lesson, you'll build apps like **SliderOut**—dimming an Arduino's LED from a browser slider, straight over USB via the Web Serial API. ([live page](https://makeabilitylab.github.io/p5js/WebSerial/Basic/SliderOut), [code](https://github.com/makeabilitylab/p5js/tree/main/WebSerial/Basic/SliderOut))
+{: .fs-1 }
+
 In our [previous lesson](serial-intro.md), we learned about asynchronous serial communication, Arduino's [Serial library](https://www.arduino.cc/reference/en/language/functions/communication/serial/), and how to write programs—using [Serial Monitor](../arduino/serial-print.md), the command line, and [Python](https://www.python.org/)—to send data to an Arduino.
 
 In this lesson, we'll apply that knowledge to a new and exciting context: **the web browser!** Using the [Web Serial API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Serial_API), we'll build simple web apps that communicate directly with an Arduino over USB—no drivers, no native installs, just HTML, JavaScript, and a serial cable. 🌐

diff --git a/cpx/analog-input.md b/cpx/analog-input.md
@@ -19,16 +19,18 @@ usetocbot: true
 {:toc}
 ---
 
+<div class="iframe-container">
+  <iframe width="100%" src="https://www.youtube.com/embed/S6X4Y5gfekc?si=RysXDQ5unRU7n79H" title="Overview of analog input on the Circuit Playground Express" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+</div>
+**Video.** In this lesson, we'll connect *external* analog sensors to the CPX—potentiometers, FSRs, flex sensors, and even a lo-fi slide potentiometer made from paper and a pencil.
+{: .fs-1 }
+
 In Lesson 8, we move beyond working with internal sensors on the CPX (light 💡, microphone 🔊, accelerometer 🍎) and show how to connect external sensors using **analog input**.
 
 ## Lesson 8.1: Overview of Analog Input
 
 In this lesson, we introduce **analog input** on the Circuit Playground Express (CPX) primarily focusing on variable resistive sensors like rotary potentiometers, slide potentiometers, force-sensitive resistors (FSRs), flex sensors (Nintendo Power Glove!), softpot position sensors, and more!
 
-<div class="iframe-container">
-  <iframe width="100%" src="https://www.youtube.com/embed/S6X4Y5gfekc?si=RysXDQ5unRU7n79H" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
-</div>
-
 ### Code
 
 - [Graphing Analog Input](https://makecode.com/_TbV5Tx22rdTh). Graphs the A1 value between 0-1023 in console and uses onboard NeoPixels as a graph

diff --git a/cpx/button-piano.md b/cpx/button-piano.md
@@ -19,6 +19,12 @@ usetocbot: true
 {:toc}
 ---
 
+<div class="iframe-container">
+  <iframe width="100%" src="https://www.youtube.com/embed/wCSWP6PhNvY" title="Building a button piano on the Circuit Playground Express in MakeCode" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+</div>
+**Video.** A preview of what we'll build: a Button Piano in MakeCode that plays tones and lights NeoPixels from the CPX's built-in A and B buttons. [Full code](https://makecode.com/_EyqF3g3xb6Cy).
+{: .fs-1 }
+
 In this lesson, we will make our first interactive CPX program in MakeCode—a simple Button Piano—which makes sounds when we press the CPX's built-in buttons.
 
 <!-- Notes to self on lesson:
@@ -27,15 +33,6 @@ In this lesson, we will make our first interactive CPX program in MakeCode—a s
 * If you have a block that doesn't have a notch up top, it means it will run an event when -->
 <!-- Ref: https://youtu.be/NIKu0-Tgh2M (MakeCode Tutorial) -->
 
-## Video Tutorial
-
-<div class="iframe-container">
-  <iframe width="100%" src="https://www.youtube.com/embed/wCSWP6PhNvY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
-</div>
-
-**Video.** Creating a button piano. Here's [the full code](https://makecode.com/_EyqF3g3xb6Cy) and a [link to the video on YouTube](https://youtu.be/wCSWP6PhNvY).
-{: .fs-1 }
-
 ## Code
 
 Here's the final [code](https://makecode.com/_EyqF3g3xb6Cy). Right-click on the code below and select "Open link in a new tab" to open it directly in the MakeCode editor.

diff --git a/cpx/capacitive-touch.md b/cpx/capacitive-touch.md
@@ -19,16 +19,18 @@ usetocbot: true
 {:toc}
 ---
 
+<div class="iframe-container">
+  <iframe width="100%" src="https://www.youtube.com/embed/HKwtXrTdocE" title="Introduction to capacitive touch sensing on the Circuit Playground Express" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+</div>
+**Video.** In this lesson, we'll explore capacitive touch sensing on the CPX—building a touch "piano," visualizing raw capacitance and touch-threshold values, and calibrating touch sensitivity.
+{: .fs-1 }
+
 In Lesson 5 in our CPX series, we will learn how to use capacitive touch sensing. This is a multi-part series starting with an introduction to capacitive sensing.
 
 ## Lesson 5.1: Intro to Capacitive Touch on the CPX
 
 In this lesson, we will first introduce the concept of capacitive sensing before building a simple capacitive touch "piano." We will then show how to visualize the raw capacitance values and capacitance touch threshold values, which are used to trigger capacitance events. Third, we cover how to use both auto-calibration and manual calibration to change the capacitance touch threshold before building a capacitive-responsive instrument (similar to [Lesson 4: Light-Responsive Instrument](sensor-instrument.md)). 
 
-<div class="iframe-container">
-  <iframe width="100%" src="https://www.youtube.com/embed/HKwtXrTdocE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
-</div>
-
 ### Lesson 5.1 Code
 
 Here is a link to the programs we built in Lesson 5.1.

diff --git a/cpx/cpx-keyboard.md b/cpx/cpx-keyboard.md
@@ -19,6 +19,12 @@ usetocbot: true
 {:toc}
 ---
 
+<div class="iframe-container">
+  <iframe width="100%" src="https://www.youtube.com/embed/2ehFfhHLcNQ" title="Using the Circuit Playground Express as a programmable USB keyboard in MakeCode" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+</div>
+**Video.** Coming up: the CPX as a programmable USB keyboard built in MakeCode—from simple A and B button presses to a media-controller keyboard and even an accelerometer keyboard.
+{: .fs-1 }
+
 In Lesson 6 of our CPX series, we will learn how to use the CPX as a programmable keyboard. We'll begin by making the A and B buttons into keyboard presses and then create increasingly fun and interesting keyboards, including a media controller keyboard (Lesson 6.2) and an accelerometer-based keyboard (Lesson 6.3).
 
 {: .note }
@@ -28,10 +34,6 @@ Note: there is some overlapping content with [Lesson 5.3: Making a Capacitive Ke
 
 In this lesson, we will show how to use the CPX as a programmable keyboard
 
-<div class="iframe-container">
-  <iframe width="100%" src="https://www.youtube.com/embed/2ehFfhHLcNQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
-</div>
-
 ### Lesson 6.1 Code
 
 Here's a link to the MakeCode we wrote in this lesson:

diff --git a/cpx/cpx-mouse.md b/cpx/cpx-mouse.md
@@ -19,16 +19,18 @@ usetocbot: true
 {:toc}
 ---
 
+<div class="iframe-container">
+  <iframe width="100%" src="https://www.youtube.com/embed/bOm1qXTDi-o" title="Using the Circuit Playground Express as a programmable USB mouse in MakeCode" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+</div>
+**Video.** The CPX working as a USB mouse, which we'll build in this lesson—first nudging the cursor with the A and B buttons, then steering it continuously by tilting the board.
+{: .fs-1 }
+
 In Lesson 7 of our CPX series, we will learn how to use the CPX as a programmable mouse. We'll begin by making a discrete mouse that shifts the mouse cursor by small amounts with button A and B presses before building a more complex accelerometer-based mouse with continuous input.
 
 ## Lesson 7.1: Making a Programmable Mouse
 
 In this lesson, we will show how to use the CPX as a programmable mouse.
 
-<div class="iframe-container">
-  <iframe width="100%" src="https://www.youtube.com/embed/bOm1qXTDi-o" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
-</div>
-
 ### Lesson 7.1 Code
 
 - [Basic discrete mouse ](https://makecode.com/_fAEg5r42VdoV)

diff --git a/cpx/digital-input.md b/cpx/digital-input.md
@@ -19,16 +19,18 @@ usetocbot: true
 {:toc}
 ---
 
+<div class="iframe-container">
+  <iframe width="100%" src="https://www.youtube.com/embed/raIc-EuHfmc?si=-KCgO3ypF9kPKBVd" title="Overview of digital input on the Circuit Playground Express" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+</div>
+**Video.** By the end of this lesson, you'll wire external buttons to the CPX—and understand the floating-pin problem and how pull-up and pull-down resistors solve it.
+{: .fs-1 }
+
 In Lesson 9, we continue exploring how to hook up and use external electronics with our CPX. In Lesson 8, we worked with analog input—which converts voltage signals from 0 - 3.3V to 0 - 1023. In Lesson 9, we'll work with **digital input**, which converts voltage input signals to either ON (1) or OFF (0). This is useful for components like buttons.
 
 ## Lesson 8.1: Overview of Digital Input
 
 In this lesson, we learn about _what_ is **digital input** and _how_ to use it on the Circuit Playground Express (CPX). We begin similarly to our [analog input lessons](analog-input.md): introducing the 3.3V, GND, and A1 CPX connection pads and showing how the **digital read** function responds to different input voltages (e.g., 3.3V, GND).
 
-<div class="iframe-container">
-  <iframe width="100%" src="https://www.youtube.com/embed/raIc-EuHfmc?si=-KCgO3ypF9kPKBVd" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
-</div>
-
 ## Lesson 8.2: Hooking up Buttons to the CPX & Why Pull-down Resistors?
 
 In this video, we introduce a solution to the "floating pin" problem using pull-down resistors and hook up our first button to the CPX.

diff --git a/cpx/makecode.md b/cpx/makecode.md
@@ -19,16 +19,16 @@ usetocbot: true
 {:toc}
 ---
 
-In this lesson, we will make our first MakeCode+CPX program—called Blinky—which will play a sound effect at the start and then repeatedly flash lights. As we build, we will learn about the MakeCode programming environment, the simulator, and how to load our program on to the CPX.
-
-## The MakeCode Programming Environment
-
 <video aria-label="Rapidly building a simple rainbow NeoPixel animation program by dragging blocks in MakeCode" autoplay loop muted playsinline>
   <source src="assets/videos/Making_SimpleFastAnimationProgram_MakeCode_ScreenRecording.mp4" type="video/mp4" />
 </video>
-**Video.** Rapidly creating a full program with MakeCode: a simple rainbow animation. [Code link](https://makecode.com/_8uY3D8Fc8A5t).
+**Video.** A taste of MakeCode—the block editor we'll use all lesson—here building a quick rainbow NeoPixel animation just by dragging blocks. [Code link](https://makecode.com/_8uY3D8Fc8A5t).
 {: .fs-1 }
 
+In this lesson, we will make our first MakeCode+CPX program—called Blinky—which will play a sound effect at the start and then repeatedly flash lights. As we build, we will learn about the MakeCode programming environment, the simulator, and how to load our program on to the CPX.
+
+## The MakeCode Programming Environment
+
 MakeCode is a visual programming language—like [Scratch](https://scratch.mit.edu/)—built on [Blockly](https://developers.google.com/blockly). As the video above shows, to program the CPX, you simply drag-and-drop "puzzle pieces." We call these pieces *blocks.* As you fit blocks together, you can create interactive programs!
 
 <!-- Some of you may be familiar with similar languages like [Scratch](https://scratch.mit.edu/) or to the intro programming interfaces used by [code.org](https://code.org/student/elementary).  -->