Create coding tutorials where viewers can actually read the code. Step-by-step guide for developers, educators, and content creators.
Coding tutorials have a unique challenge: code is small text. When you record your IDE at full screen, 14px monospace font becomes an illegible blur. Viewers pause the video, zoom in their video player, lose their place, and eventually give up. The solution isn't increasing your font size to 24px (which looks weird and cuts your visible code in half). The solution is smart zoom that magnifies code when viewers need to see it.
Follow these steps for the best results.
Open your code editor in Chrome (VS Code for the Web, GitHub Codespaces, or any browser-based IDE). If using a desktop IDE, plan to record your full screen. Close unrelated tabs, hide unnecessary panels, and make sure your file is saved. Use your normal font size — don't increase it. Zumie's auto-zoom handles readability.
Outline what you'll build or explain. Break it into logical sections: setup, implementation steps, and testing/verification. For a 'build from scratch' tutorial, plan the order you'll write code. For a 'code walkthrough,' plan which files and functions you'll cover and in what order.
Click the Zumie extension and begin recording. When you're in the code editor, Zumie's auto-zoom will follow your cursor. Type a line of code and the recording zooms in so viewers can read it. Switch to the terminal and the zoom follows. Navigate to another file and the zoom shows the file explorer clearly.
As you type, explain what you're writing and why. 'I'm creating a function called processOrder that takes an order object. We destructure the items array because we'll need to iterate over it.' This dual-channel approach — visual code + verbal explanation — is the most effective teaching method.
After writing code, run it. Switch to the terminal, execute the command, and show the output. Zumie zooms into the terminal automatically, so viewers can read the output, error messages, or test results clearly. This is where most coding tutorials fail — terminal output is tiny. Zumie fixes this.
Scroll through the final code, highlighting key sections. Summarize what was built and what the viewer should try next. This recap reinforces the learning and gives viewers a clear mental model of what they just watched.
Level up your results with these expert techniques.
Don't change your font size, theme, or layout for recording. Zumie's auto-zoom makes any setup readable. Using your natural environment means you're more comfortable, make fewer mistakes, and the tutorial feels authentic.
When you want to draw attention to a specific line, click on it. Zumie's click highlight will mark the location, and the auto-zoom will center the view on that line. This is much more effective than saying 'look at line 47.'
Instead of one continuous recording, consider recording in 5-10 minute segments. This gives you natural break points, makes mistakes easier to recover from, and produces content that's more digestible for viewers.
Cranking your IDE font to 24px means you see fewer lines of code, which forces constant scrolling. It also looks unnatural. Use your normal font size and let Zumie handle the zoom.
You might code at 80+ WPM, but viewers need time to read and understand each line. Type at about 60-70% of your normal speed. The slight slowdown dramatically improves the learning experience.
Real coding has errors. Don't edit them out or pretend they don't happen. Showing how you debug errors is often more educational than showing perfect code. Zumie's terminal zoom ensures error messages are readable.
Watch how Zumie's auto-zoom and click highlights transform a basic screen recording into a polished, professional video.
Any browser-based IDE (VS Code for the Web, GitHub Codespaces, Replit, CodeSandbox) works perfectly with tab-only recording. For desktop IDEs like VS Code desktop, use Zumie's full-screen recording mode.
Yes. Zumie records everything visible in your tab or screen. When you switch between files, split panes, or toggle the terminal, the auto-zoom follows your active interaction.
If you paste a block of code, pause and scroll through it after pasting so viewers can read it. Click on key parts to let Zumie zoom in. Explain what the pasted code does before moving on.
Install Zumie for free and create your first professional recording in minutes. No signup, no credit card, no commitment.
Continue learning with these related how-to guides.
See how professionals use this technique.