L09 Code Demonstration

title: "Code Demonstration in Video Tutorials" weight: 9 description: "Learn techniques for demonstrating code in video tutorials: editor setup, font size and theme, typing speed, annotation during coding, and showing output effectively for developer viewers." date: 2026-06-28 lastmod: 2026-06-28 tags: [technical-writing, video] }

Code demonstration in video tutorials requires specific techniques: proper editor setup, readable font sizes and themes, controlled typing speed, annotations during coding, and clear output display.

In this lesson, you will learn how to set up your code editor for recording, manage typing speed, use annotations during coding, show output effectively, and handle errors on camera.

What You'll Learn

You will learn editor configuration for recording, typing techniques, code annotation during demonstrations, output presentation, and error handling strategies for live coding.

Why It Matters

Code is the core of developer tutorials. Poorly demonstrated code confuses learners and undermines credibility. Well-demonstrated code with clear output is the most valuable part of a tutorial.

Real-World Use

DodaTech video creators use a standardized VS Code setup: font size 24, dark theme with high contrast, line numbers on, and a minimap disabled. This setup is used for all code demonstrations.

def editor_setup_for_recording():
    """Return VS Code configuration for tutorial recording."""
    return {
        "font_size": 24,
        "font_family": "JetBrains Mono",
        "theme": "Dark High Contrast",
        "line_numbers": True,
        "minimap": False,
        "word_wrap": "on",
        "cursor_style": "block",
        "cursor_blinking": "solid",
        "render_whitespace": "boundary",
    }

setup = editor_setup_for_recording()
for key, value in setup.items():
    print(f"{key}: {value}")

def typing_speed_guide():
    """Guide for typing speed during code demonstrations."""
    return {
        "normal_typing": "15 to 20 WPM (slow and deliberate)",
        "pasting_known_code": "Use paste, mention you are pasting",
        "before_running": "Pause 2 seconds. Explain what will happen.",
        "after_output": "Pause 3 seconds. Let viewers read output.",
        "error_handling": "Do not panic. Explain the error and fix it.",
    }

for scenario, advice in typing_speed_guide().items():
    print(f"{scenario}: {advice}")

def code_demonstration_checklist():
    """Checklist for effective code demonstrations."""
    return [
        "Editor font at least 24px",
        "High contrast theme",
        "Terminal font at least 20px",
        "Output visible and readable",
        "Slow typing speed",
        "Verbally explain each line before typing",
        "Show expected output",
        "Demonstrate at least one error and fix",
        "Use annotations to highlight key lines",
        "Provide code download link in description",
    ]

Teacher Mindset

Think of code demonstration as cooking on a TV show. You prepare ingredients beforehand but show the cooking process. Similarly, have your code prepared but type it on camera to show the process. The viewer learns both what to write and how to think about writing it. Do not rush. Every line you type is a teaching moment.

Common Mistakes in Code Demonstration

1. Typing Too Fast

Viewers cannot read code you type at 80 WPM. Type slowly. Say each character or word as you type it.

2. Editor Font Too Small

Code at 12px font is unreadable on mobile. Use at least 24px for editors and 20px for terminals.

3. Not Explaining Before Typing

Typing code without explaining what it does leaves viewers confused. Say what the code will do, then type it.

4. Hiding Errors

Viewers learn from watching you debug. Show errors naturally and explain how to fix them.

5. No Output Shown

Coding without showing output is like cooking without tasting. Always run the code and show the result.

Practice Questions

1. What font size is recommended for code in tutorials? 24px minimum for editors, 20px for terminals. Larger is better. Test readability on a mobile screen.

2. How do you handle errors on camera? Stay calm. Read the error message aloud. Explain what caused it. Fix it on screen. This teaches debugging skills.

3. Should you type code or paste it? Type it slowly for important concepts. Paste repetitive or boilerplate code. Explain what you are pasting.

4. Challenge: Record a 3-minute code demonstration. Set up your editor for recording. Type code slowly with explanations. Show the output. Demonstrate a common error and fix it.

FAQ

Mini Project

Record a 5-minute code tutorial. Set up your editor with proper font size. Type code slowly with explanations. Show output after each step. Include one intentional error and demonstrate the debugging process.

What's Next

Publishing Platforms in the next lesson.