Leading Code-Alongs

Learn best practices for leading effective code-alongs that engage scholars and build their coding confidence. Review this before camp to master the approach, then reference as-needed when planning lessons that include live coding demonstrations.

How to Prepare for a Code-Along

Like most things related to excellent instruction, preparation is everything! The most effective code-alongs are thoroughly planned in advance. In the initial planning phase, ask yourself these questions:

What do the scholars need to learn?

What’s the core concept or skill?
What prior knowledge are we building on?

What questions will I ask?

How will I know if scholars are following along?
What questions will encourage scholars to predict what will happen next?

What checkpoints will I have?

Where are natural stopping points to ensure everyone’s code is working?
What will I do if scholars fall behind?

Preparation Steps

Code-alongs are powerful because they let scholars learn by doing, but only if you facilitate them well. The difference between a code-along that builds understanding and one that's just typing practice is how you prepare, what instructional moves you make, and the energy you bring!

Step 1: Practice the code yourself.

Write the code from scratch and time yourself. How long does it actually take? Note where you made mistakes or where scholars could get confused.

Step 2: Script key moments.

Make a reference document for yourself with the code for each step and prepare explanations for why you’re doing each step. Include notes about common errors and how to fix them.

Some ILs like to go a step further and plan exactly what they’ll say at critical points, what they’ll do on the screen, what they’ll drop in the chat, and what they expect from scholars. This doesn’t mean you read from a script, but it does mean you’ve though through each step so you can facilitate smoothly! You may find it helpful to use a template like this one to plan your code-alongs. The following example shows the start of a code-along in a Virtual Web Dev camp.

Step	Say	Do	Drop in Chat	Expect From Scholars
1	"Let's start by adding a heading to our webpage! Follow along with me.”	Type `<h1>Hello Scholars!</h1>` in HTML section	`<h1>Hello Scholars!</h1>`	Typing along with you
2	"We're using an `<h1>` tag here. Can someone from House A tell me in the chat how we expect an `<h1>` to display?"	Pause typing	—	Reply in the chat
3	"Once your heading shows up on the webpage, give me a reaction in the chat!”	Check zoom chat	"React to this message if your heading is working!”	React to the message in the chat: 👍 or ✅
4	"Okay now, let's add some personality by including a picture. Follow along with me.”	Type `<img href="image.png" alt="my cat">`	—	Typing along with you
5	"Hmmm, that's not quite working. Can anyone see why? Drop it in the chat if you see it.”	Pause, wait for chat responses	—	Recognize that you used `href` instead of `src`

The example above is not a full script, but an illustration of some of the key approaches to keep in mind as you plan to lead your own code-alongs. Your scripted plan will likely be longer and more detailed.

Step 3: Plan CFUs and intentional mistakes.

Don’t leave interaction to chance! Identify the exact moments where you will pause to check for comprehension and where you will "accidentally" trip up to model resilience.

Plan your CFUs: Distinguish between Procedural checks ("Give me a green check if you forked the template") and Conceptual checks ("In the chat, tell me why we need a closing tag here").

Design a "Learning Error": Choose one specific mistake to make on purpose (e.g., a missing semicolon or a typo in a variable name). Script how you will "discover" it and how you will use the error message to solve the problem. This normalizes mistakes and models how we want scholars to approach errors.

Setting Up Your Space

To lead a smooth code-along, you need to see your code, your notes, and your scholars all at once. If possible, we highly recommend a dual-monitor setup.

Monitor 1 (The "Stage"): This is what you share on Zoom. It should only contain your IDE (CodeSandbox, SQL Studio, etc.) and maybe the lesson or slides for reference. Keep this clean and clutter-free!

Monitor 2 (The "Backstage"): This is for your eyes only. Keep your Code-Along Script, the Answer Key, the Zoom Chat, and any other resources here.

Code-Along Best Practices

The following strategies will take your Code-Along to the next level!

Accessibility

Before scholars can learn the technical components, they need to be able to see, hear, and access what you’re doing. Strategies that increase accessibility during code-alongs include:

Drop links in the chat before you begin

Make your mouse visible and larger in your system settings

Verbally describe where you’re clicking

Increase the font size in your IDE (at least 18pt)

Intentionally slow down and pause after each line to let scholars catch up

Name special characters and keyboard locations ("The forward slash / is to the left of the shift key")

Instructional Moves

While you're leading the code-along, make intentional instructional decisions that deepen learning. Strategies that encourage high-leverage learning during code-alongs include:

Ask frequent checks for understanding, both technical and procedural

Think out loud: Say WHY, not just WHAT

Engage scholars by asking them to predict, explain or problem-solve:

"What do you think will happen when I run this code?"
"Why do you think I used a for loop instead of a while loop here?"
"Can someone explain what this line of code is doing?"

Create intentional mistakes to teach and model debugging

Plan for people who might fall behind

Tell scholars what to do while you’re modeling:

"Okay, everyone type this with me…"
"You don't need to type this part. Watch what I do and we'll talk about it."

Leveraging the Team

Leading a code-along shouldn't be a solo performance. Think of your Co-Instructor and IAs as your "Co-Pilots" who manage the flight while you focus on the controls.

The Chat Monitor: While you code, your other team members should be active in the chat or circulating the space, answering quick syntax questions ("You missed a bracket on line 10!") and dropping code snippets or links so you don't have to stop your flow.

The Pacing Signal: Agree on a private signal (like a Slack DM or a hand signal) that your team members can use to tell you to "Slow Down" or "Check the Chat" if they notice several scholars are lost.

The Hype Person: Your camp team should be the first ones to react with 🎉 or "Ooooh!" when your code finally works. Their energy encourages scholars to stay engaged.

The Two-Track Split: In Virtual camps, consider offering scholars a choice rather than requiring everyone to follow along during House practice. Scholars who want step-by-step support join the code-along (Track A), while scholars who feel confident work independently (Track B). An IA leads Track A in a separate breakout room while another supports Track B in the main room. If you plan to run a code-along that requires an extra breakout room, request it from the VCC before the session begins. You can't easily add one mid-session!

KWK Magic: Elevate Your Code-Along

Add personality, energy, and connection to make your code-along memorable!

Ask "fun" questions: "Let's change the font color. Awa, what's your favorite color?"

Tap into inside jokes: "Let's use our house theme from yesterday as our example!"

Bring dynamic energy to keep scholars hooked

Celebrate when code works

Show excitement when debugging: "Ooh, an error! Let's figure this out together."

Leverage your co-instructor to answer questions in the chat while you move on

Common Pitfalls to Avoid

❌ Going too fast

The problem: Scholars fall behind and disengage because they can't keep up.

The solution:

Pause after every few lines of code

Check for understanding frequently

Watch for "lost" signals (scholars stop typing, cameras turn off)

❌ Just Typing Without Explaining

The problem: Scholars copy code but don't understand what it does or why.

The solution:

Think out loud constantly

Explain WHAT you're doing AND WHY

Ask scholars to predict what will happen before you run the code

❌ Not Checking for Understanding

The problem: You assume everyone is following along, but half the scholars are lost.

The solution:

Check every 2-3 minutes (not just at the end)

Use Zoom reactions, chat responses, or verbal check-ins

Watch for non-verbal cues (cameras off, scholars not typing)

❌ Avoiding Errors

The problem: You only show perfect code, so scholars think errors are bad.

The solution:

Make intentional mistakes and debug them out loud

When you make accidental mistakes, celebrate them as learning opportunities

Normalize error messages: "An error! Let's read it and see what it's telling us."

❌ Assuming Prior Knowledge

The problem: You use jargon or assume scholars know things they don't.

The solution:

Define every term the first time you use it

Show where to find special characters on the keyboard

Explain your shortcuts or IDE features