2 min read

Step-by-step tutorial

Table of Contents

Tutorials follow a predictable shape: tell people what they’ll have at the end, list what they need, then walk one step at a time with a checkpoint after each.

What you’ll build

One sentence and ideally a screenshot or demo video of the finished result. Readers decide whether to keep going based on this.

Prerequisites

Before you start, make sure you have:

  • Node 20+ (node --version)
  • A terminal and a code editor
  • ~15 minutes

Step 1 — Scaffold the project

Describe the action, then show the exact command:

npm create astro@latest my-app
cd my-app

Checkpoint: running npm run dev opens a starter page at http://localhost:4321.

Step 2 — Add the feature

Explain why before the how, then the code:

// src/lib/greet.ts
export const greet = (name: string) => `hello, ${name}`;

Checkpoint: importing greet and calling greet("world") returns "hello, world".

Step 3 — Verify

Show how to confirm it actually works — a test, a screenshot, an expected output. Don’t make readers guess.

npm run build
# → 0 errors

Troubleshooting

SymptomLikely causeFix
command not foundNode not installed / on PATHInstall Node 20+
Port already in useAnother dev server runninglsof -i :4321 then kill it

Next steps

Point at what to try next, and link related posts.