Codelab: To-Do List
Build a fully functional to-do list app from scratch — create, complete, delete, and save tasks — using only HTML, CSS, and vanilla JavaScript.
Step 1: Set up the project files
Let's build a real to-do list application! Open your terminal and create a project folder with three files. We'll write everything from scratch — no frameworks, no build tools.
Create a folder, then create `index.html`, `style.css`, and `app.js` inside it. Open the folder in your text editor.
```
mkdir todo-app
cd todo-app
touch index.html style.css app.js
```
Now open `index.html` in your text editor and add the HTML structure shown below. This gives us:
- An `<h1>` title
- A `<form>` with an `<input>` and a submit `<button>`
- An empty `<ul>` where to-do items will appear
- A `<script defer>` tag linking our JS file
The `touch` command creates empty files on Linux and macOS. If you're on Windows, you can create the files through your text editor's File > New menu instead.