Get 20% off an annual subscription today

Creating the Best Video Programming Tutorials

We surveyed 249 developers and they told us that video tutorials are the most useful way to begin learning a technology. Yet, there’s a lot of crappy online tutorials out there. When it comes to creating learning content, I’m a bit of a perfectionist. So I created the video below which walks you through a bunch of best practices I value, and some from online teachers who I respect.

Watch on YouTube

If this video helped you a bunch, please let me know by tweeting at me. While I recommend you watch the video above, here’s the short version with notes and links.

Tools

1. My friend Peter Bell says:

“Bad audio is much more distracting than low-quality video”

When it comes to coding tutorials, it’s much more important that you get the audio right than the video. People will put up with bad video, so don’t be afraid of using your webcam.

2. Use a good microphone

Anything is better than your computer’s microphone. I recommend a USB Condenser Microphone to get started. You can also get an iPhone lavaliere microphone if you want to film yourself with your iPhone.

3. Do film yourself

It can be seriously boring to stare at someone’s computer screen. Especially when you’re explaining ideas, it’s nice to see your instructor. Even if it’s a laptop webcam in a box, it’s better than nothing.

4. Use natural lighting if possible

I’ve rarely purchased lights to do this stuff, and when I have I’ve regretted it. If you have a nice big window, just set yourself up opposite the window and it’ll be a nice color.

Natural Lighting

5. Find a good backdrop

At Code School we did have a teacher who sent us a video once of her filming in her bathroom. She wasn’t on the toilet or anything, but it looked like she was in the bathroom. Not too busy or messy, find something interesting, or solid wall or curtains.

6. Use a screencasting editor

I love using screenflow on a Mac, but for PCs there’s Camtasia.

7. Use a high-resolution monitor or retina screen

The nice thing about high definition retina screens is that you can zoom way in on the recordings.

Showing High-Resolution Screen

8. Optionally, find a professional

If you can afford it, it can be helpful to find a cameraman with professional equipment or an editor who can do all of your editing.

9. Use Keynote / Powerpoint for slides

When you’re talking about ideas or concepts, definitely create slides. In the video above I show what slide animations look like.

10. Use animations

They allow you to teach one thing at a time and keep things engaging.

11. Get everything captioned

This is not only important for people who are hard of hearing, but also for people who have English as a second or third language.

Instructional Design

1. My friend Brad Schiff says:

Don’t value the “how” over the “why.” Before demonstrating the technical steps of how to do something you need to explain why you’re doing it in the first place. The “why” is what makes people feel engaged and allows them to truly understand the topic.

2. Describe the problem first

Don’t just teach the syntax, start by explaining the problem where the syntax is needed.

3. Give learning objectives

It may seem like common sense, but you’d be surprised how many programming videos don’t say at the beginning of the video what you will learn in it.

4. Show them what you’re going to build

If by the end of the video you will have something built, start by showing people what you’re going to build by the end.

5. My friend Brad Traversy says:

Never assume the viewer has any previous knowledge of the technology. If it is expected for them to know something, make sure that it is stated in the beginning of the video. What do you need to know before the video will make sense to you?

6. Teach with visuals

If your solution is in three steps, consider showing this visually before coding it out.

Step-by-step Explination

7. Show more than one example

First, show the problem and how to solve it. Then show a different problem and a different solution using the same syntax.

8. Challenge the watcher to think

Show one problem, and how to solve it. Then show a second problem, and stop to ask the watcher, how do you think we should solve this? It will help them think and problem-solve using new tools, which increases retention.

9. Show the correct way first

If there is a right and wrong way to solve a problem, don’t bother showing me the wrong way, and show me the right way first. If I’m learning and focusing on remembering code, and in the middle the teacher says “You’d think this would be the right way to do it, but it’s actually like ____,” I wanna pull my hair out!

10. Show common errors

After you’ve shown me the right way, if there are mistakes that lots of people make, show me the mistakes and how to solve them.

11. Provide check-in points

Especially in longer videos or talks, your listeners will inevitably get distracted. However, if you provide check-in points, they can get back on track. ex. “So what did we just learn”

12. Tell them again at the end

If you want them to retain knowledge, you tell them at the beginning (the learning objectives), and again at the end, you review what you taught them.

Filming your Desktop

1. Clean off your desktop & browser extensions

You shouldn’t have a mess of icons for the user to see.

2. Use bigger fonts & increase browser size

I like making everything a little bigger, which allows you to more easily show multiple windows at the same time when it’s useful.

3. Use a good code friendly font

Some fonts are harder than others to read. Being able to see the difference between a 0 and O and I and l is important.

Font Examples

4. Use an accessible color scheme

Some themes will be harder for people to read. If the viewer is colorblind, some themes may be entirely inaccessible for them. Choose a theme with a high contrast between the font and the background, such as this dark theme.

5. Use intelligent code highlighting

Ensure you have proper code highlighting to keep your code readable. Be sensitive to people with color-blindness, or people who can’t see big differences between colors.

6. Show your code side by side with the result

If your code creates a web page, show the resulting code side-by-side with the page. If it creates an app, show the app side-by-side with the code. Sounds obvious, but you’d be surprised how many screencasts just show code and leave you hanging.

7. Avoid switching windows quickly

If you do have to switch full windows, careful with this one. I’ve seen many screencasts (and done it myself sometimes) where you’re coding and then you immediately switch windows, not giving your audience enough time to really understand the code you’ve written before moving on.

8. Call out & zoom in where needed

When there’s a part of the code you’re working on, consider giving that focus using a call out. You can also just zoom into a window if all you’re doing is inside that window.

9. Call attention to the mouse if you’re clicking around

Most of the screencasting apps have ways to call attention to the cursor.

10. If you’re using shortcuts, show your keys

Most of the screencasting apps have a way to broadcast your keys to the screen.

11. My friend John Papa says:

Talk everything out loud. People want to hear what you are thinking. How you are thinking when you’re coding. You don’t necessarily need to be talking while you’re coding, you can record after the fact.

12. Write out code one line at a time

Copy and pasting code is annoying to watch. If you’re trying to teach your users how to write code, write the code. If you’re using code in your slides, take advantage of this and animate one line at a time.

13. Don’t show your face if you don’t want me to watch you

When you’re writing code you’ll want people’s eyeballs to be focused on the code. Don’t be on the screen distracting me with your face when you want me to be concentrating on the code.

Delivery

Be Energetic

1. Be energetic

I’ve made the mistake of recording right after lunch, and even though I was trying to seem energetic, I failed. If you sound tired, they’re going to enjoy listening to you less.

2. Act like you’re happy to see them

Your audience is watching you, so you want to be a friend. Not robotic, not overly animated, but pleasant.

3. Speak more clearly than normal

There are a lot of developers who have English as a second language. You’re going to want to articulate a little more than you normally do.

4. Use a voice volume that’s neither loud or soft

You want to be talking at a conversational voice. I honestly tend to get a little louder than conversational. It helps me annunciate.

5. My friend Peter Bell says:

Make sure that instead of just reciting facts or providing type-along instructions that you provide a narrative context for your videos so people care about the information you’re sharing. Personal stories are always the most entertaining. For as long as there has been language, people have told each other tales. Stories typically have a background, a problem, and a resolution.

Show that you care. The purpose (and opportunity) of videos isn’t just to teach code. It can be used to motivate people to want to learn what you’re teaching.

6. Go on-screen when explaining concepts or telling stories

If you struggled with learning this topic, be honest about it. If you screwed up the first time you coded with this technology, be open about it. The result is that people will see your humanness, and be more interested in learning from you.

7. Wear professional clothes

Your teaching will look more credible if you look credible

8. Don’t use a teleprompter

I don’t know about you, but I can usually tell when someone is reading a teleprompter. Something about their delivery just doesn’t come off as authentic. If I have a script I look at it, remember it the best I can, then deliver it to the camera.

Customer Service

1. Explain how long it will take

It’s important to show your watchers that you value their time, and one way to do that is to tell them roughly how long it will take them to learn what you’re going to teach. Ex. “In just 5 minutes we’ll learn how to fire a banana.”

2. My friend Brad Traversy says:

Do not be overly technical. Not everyone watching is a geek. Many are just regular people that have no experience coding but are interested in learning. Talk like a regular person and do not be over complicated in your terminology or they will feel like they are not in the right place.

Always create a video, series, course, etc like you are being paid 100k for it. Do not sacrifice quality even if it is a Youtube video that will only get 500 views. Create it like it will be a top course.

3. Avoid Profanity

It makes you look unprofessional.

4. Keep your intro video short

If you have a brand you want to show at the beginning or intro video you want to play, keep it short so you can quickly get into the learning.

5. Keep audio at a consistent level

Make sure the levels of your audio are at the right level. It sucks when you have to crank up a video you’re watching, then when you go back to play your music it’s stupid loud. What I usually do is go listen to a popular podcast, put the audio at a comfortable listening level, and then go back to my video and ensure the audio is at the same level.

Audio Levels

6. Show how to install on multiple platforms

If people can install your technology on different platforms, show how to do it on each one, or not at all. You might put up three text tutorials, one for each platform, and tell people to install & configure on those.

7. Let watchers know where to go next

At the end of the video let your students know where to go to continue their learning journey, even if it’s not on your website or course.

8. Update your videos

If the technology gets updated, go update your video or at least tell people who are watching what version of the technology it’s for.

In Conclusion

To be fair, there are a bunch more things that I know I missed, but I think that’s enough to get started. If you’re doing more than 50% of the things above, then you’re definitely creating videos better than 99% of the content on the internet.

If you’d like to see a sample of the kind of content I’ve been creating lately, go watch the first video on my Vue 3 Reactivity course.

If this article / video helped you a bunch, please let me know by tweeting at me.

Download the cheatsheets

Our Vue essentials, Vue 3, and Nuxt.Js cheat sheets save you time and energy by giving you essential syntax at your fingertips.