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-along 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: Create notes or an answer key.
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.
Step 3: Script key moments.
The best code-alongs are scripted like a play. Plan what you’ll say at critical points, what questions you’ll ask, what you’ll do on the screen, what you’ll drop in the chat, and what you 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 script will likely be longer and more detailed.
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, preferably 24pt+)
- 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
forloop instead of awhileloop 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."
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
Made with Bullet