TutorialsPreview

Course

Build a Todo App

Four lessons, one app. Structure → add → complete → persist — each step opens whole in /code.

The course that proves the thesis: you read a slice of the project in the lesson, then open the exact same project at that step in the editor and make it yours. By the end you have a real, persistent todo app built in plain HTML, CSS, and JavaScript — no framework, no build step, every line yours.

Start course

All lessons

  1. 1

    Structure & style the app

    Lay down the HTML skeleton and a calm dark style for a todo app. No JavaScript yet — just the shape, so the behaviour you add next has somewhere to live.

    12 min

  2. 2

    Add todos with JavaScript

    Wire the form so typing and pressing Add creates a real item. You will hold the todos in an array and render the list from it — the pattern every UI framework formalises later.

    15 min

  3. 3

    Complete & delete

    Click a row to toggle it done; click the × to delete it. You will do it with a single listener on the list — event delegation — instead of one per row.

    14 min

  4. 4

    Persist & filter

    Save the list to localStorage so it is still there tomorrow, and wire the All / Active / Done filters. This is the lesson that turns a toy into something you would actually use.

    16 min