How to Code a Simple To-Do List App with Your Kids

Learn to build a basic to-do list app together as a family coding project that teaches programming fundamentals.

  1. Choose Your Coding Platform. Start with a beginner-friendly platform that doesn't require downloading software. Scratch is perfect for younger kids (drag-and-drop blocks), while older kids can try CodePen or Replit for HTML and JavaScript. These websites work right in your browser and save your work automatically. For families wanting to try phone apps, MIT App Inventor lets you create real Android apps using visual blocks instead of typing code.
  2. Plan Your App Together. Before you start coding, sketch out what your app will do. Ask your kids what features they want: adding new tasks, marking things as done, maybe deleting completed items. Keep it simple for your first version. Draw a rough picture of what the screen should look like. This planning step helps kids understand that coding starts with thinking, not just typing.
  3. Build the Basic Structure. Start by creating the main parts: a title at the top, a box where users can type new tasks, an 'Add' button, and a space to show the list of tasks. If using Scratch, drag out sprites and backgrounds. If using HTML, create these as simple text and buttons. Don't worry about making it pretty yet - focus on getting the basic pieces in place first.
  4. Add the 'Add Task' Function. This is where the real coding begins. You need to tell the computer: when someone types in the box and clicks 'Add,' take that text and put it in the task list. In Scratch, use 'when button clicked' blocks connected to 'add item to list' blocks. In JavaScript, you'll capture what's typed in the input box and add it to your task display. Test this step thoroughly - type in different tasks and make sure they all appear correctly.
  5. Create the 'Mark as Done' Feature. Now add a way to mark tasks as completed. You could add a checkbox next to each task, or let people click the task itself to cross it out. This teaches an important coding concept: things on the screen need to respond when users interact with them. In Scratch, use 'when clicked' blocks. In web coding, you'll add click events that change how the text looks (like striking through completed tasks).
  6. Test and Improve Together. Try breaking your app on purpose. What happens if someone adds a blank task? What if they add a really long task? Testing helps kids understand that good programs handle unexpected situations gracefully. Make a family game of finding bugs and fixing them together. Add features one at a time and test each one before moving on.
  7. Make It Your Own. Once the basic app works, let creativity take over. Change colors, add fun sounds when tasks are completed, or create categories for different types of tasks (homework, chores, fun activities). This is where kids really get excited about coding - when they realize they can make the computer do whatever they imagine.