Tutorial

This tutorial series grows a single Todo app step by step. Each chapter starts with code, explains what the code means, and shows the result you should see in the browser.

The main track stays local-first and keeps the scope intentionally small. Optional Deployment extras show how the same app can be packaged and published.

Main track (local-first)

1. 01 - First page - prepare the empty Todo app shell and data shape.
2. 02 - Data and output - show draft data on the page with interpolation.
3. 03 - Events - change visible draft data from a click event.
4. 04 - Forms - edit the draft Todo title through a text input.
5. 05 - Conditions - show Todo completion state with *if and *else.
6. 06 - Loops - replace repeated Todo rows with *for.
7. 07 - Add items - add new Todos from a lazy input.
8. 08 - Toggle items - toggle each item from inside the loop.
9. 09 - Save and load - store and restore the Todo list in this browser.

Deployment extras (optional)

• Extra A - Hand off to Capacitor - prepare the finished Sercrod Todo app as static files for a Capacitor wrapper.
• Extra B - SSG plus dynamic block - generate static pages, keep only the todo area dynamic.
• Extra C - WebSocket demo - sync changes between multiple clients with a minimal server, local-first rules still apply.

Notes

• One chapter introduces one major idea.
• Every chapter ends with a working page.
• The Reference remains the source of exact rules.

Recommended starting points:

• Guide
• Reference