
Here is where I would open the browser developer tools with Ctrl + Shift + I and spend some time inspecting how it works. One thing I would be distracted by is the animations when you complete a todo and notice if you double-click the todo you can edit it.

It’s mostly a text input field adding what you just typed to the screen. It might be intimidating at first but let’s break everything into smaller parts. Let’s say you were tasked to make something like TodoMVC. The more you work on things the more experience you have and your tool belt helps you solve more problems like Batman (ignoring striking fear in the hearts of criminals at night 🦇). I understand a lot of you might struggle with how to get started and I want you to know that’s normal. We’re going to be making a todo list app based on TodoMVC which is one of my favorite examples when learning anything new because it teaches us everything we need to know about what we’re trying to learn because everything you build includes creating, reading, updating and deleting content. This is just an excuse for us to learn more about how using Svelte might look in a real project and in another post I’m going to show you how to add tests to have more confidence your code works as expected.

I know from the title of the post some of you might be yawning 🥱 at the idea of yet another todo app but stick around!

I also want to share my thought process instead of just making you do things because that’s not a great way to learn and I’d rather you learn by working on things you care about. In the previous Svelte For Beginners post we learned Svelte fundamentals and now it’s time to put what we learned into practice.Īt the end I told you to go and build something but sometimes it’s nice to have a friend to guide you through it. You can watch the Make A Svelte Todo App playlist on YouTube and find the source files on GitHub.
