Your First Module

Welcome

This is a sample module to show you how vibe-learn lessons work. Everything you see here is written in plain markdown and converted to HTML at build time.

Lessons support all standard markdown: bold, italic, inline code, links, lists, tables, and more.

Code Blocks

Fenced code blocks get automatic syntax highlighting via highlight.js.

def greet(name: str) -> str:
    """Return a greeting."""
    return f"Hello, {name}!"

print(greet("World"))

function greet(name) {
    return `Hello, ${name}!`;
}

console.log(greet("World"));

You can use any language highlight.js supports — just set the language after the opening fence.

Side-by-Side Code Comparisons

If you put a label (italic text) right before a code block, the engine wraps it in a styled header. Two consecutive labeled blocks become a side-by-side comparison:

for i in range(5):
    print(i)

for (let i = 0; i < 5; i++) {
    console.log(i);
}

This is great for showing the same concept in different languages, or before/after refactoring.

Callout Blocks

Use blockquotes with a bold label to create callout boxes:

Tip: This is a callout block. Use them for important notes, warnings, or tips. The bold label at the start sets the tone.

Warning: Callouts support the full range of Markdown formatting, including bold, italic, code, and links.

Tables

Lists

Things you can include in a lesson:

• Markdown text with inline formatting
• Fenced code blocks with syntax highlighting
• Labeled code comparisons (side-by-side)
• Blockquote callouts with bold labels
• Tables, lists, headings, links
• HTML when markdown isn't enough
• Exercise sections (warmups + challenges)

Exercises

Progress through each section in order, or jump to where you need practice.

Practice individual concepts you just learned.

Challenges

Combine concepts and learn patterns. Each challenge has multiple variants at different difficulties.

Module 1 Summary

• Write lessons in markdown — the build script converts them to HTML
• Use fenced code blocks with language tags for syntax highlighting
• Label code blocks with italic text for headers; consecutive labeled blocks go side-by-side
• Use blockquotes with bold labels for callouts
• Add an Exercises section with warmup/challenge containers at the bottom