LearnReferencebeginner12 minBuild a Todo App

Structure & style the app

Lesson 1 of 4 — the markup and CSS the rest of the course brings to life.

You will learn

Semantic structure for a small app and how a stylesheet turns bare markup into something you would actually use.

Open the full project in VS Code

Prerequisites

None. If you can open a file, you can do this lesson.

Step 112 min

Lay down the markup and the look

GoalA static todo layout exists and looks finished — before a line of behaviour.

Good apps are built shape-first. We write the index.html structure (a form, a <ul>, a footer with filter buttons) and a styles.css that makes it calm and dark. Two rows are hard-coded so you can see the design; lesson 2 replaces them with real, JavaScript-driven items.

project · todo-app · Structure & style Open in Code

index.htmlHTML

1<!doctype html>
2<html lang="en">
3  <head>
4    <meta charset="utf-8" />
5    <meta name="viewport" content="width=device-width, initial-scale=1" />
6    <title>Todo</title>
7    <link rel="stylesheet" href="styles.css" />
8  </head>
9  <body>
10    <main class="app">
11      <h1>Today</h1>
12      <form id="new-todo">
13        <input id="title" name="title" placeholder="What needs doing?" autocomplete="off" />
14        <button type="submit">Add</button>
15      </form>
16      <ul id="list" class="list">
17        <li><span class="check"></span><span class="title">Read the brief</span><button class="remove" aria-label="Delete">×</button></li>
18        <li class="done"><span class="check"></span><span class="title">Open the editor</span><button class="remove" aria-label="Delete">×</button></li>
19      </ul>
20      <footer class="bar">
21        <span id="count">1 left</span>
22        <span class="filters">
23          <button data-filter="all" class="active">All</button>
24          <button data-filter="active">Active</button>
25          <button data-filter="done">Done</button>
26        </span>
27      </footer>
28    </main>
29    <script src="app.js"></script>
30  </body>
31</html>

styles.cssCSS

1* { box-sizing: border-box; }
2body {
3  margin: 0;
4  min-height: 100vh;
5  display: grid;
6  place-items: start center;
7  padding: 6vh 16px;
8  font-family: system-ui, -apple-system, sans-serif;
9  background: #0b0e14;
10  color: #e7ecf3;
11}
12.app { width: 100%; max-width: 460px; }
13h1 { font-size: 22px; letter-spacing: -0.01em; margin: 0 0 16px; }
14#new-todo { display: flex; gap: 8px; margin-bottom: 18px; }
15#title {
16  flex: 1;
17  padding: 11px 14px;
18  border-radius: 10px;
19  border: 1px solid #232a36;
20  background: #11151c;
21  color: inherit;
22  font-size: 15px;
23}
24#title:focus { outline: none; border-color: #6ea8fe; }
25#new-todo button {
26  padding: 0 18px;
27  border-radius: 10px;
28  border: 1px solid #2b3340;
29  background: #6ea8fe;
30  color: #0b0e14;
31  font-weight: 600;
32  cursor: pointer;
33}
34.list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
35.list li {
36  display: flex;
37  align-items: center;
38  gap: 12px;
39  padding: 12px 14px;
40  border-radius: 10px;
41  background: #11151c;
42  border: 1px solid #1c2330;
43}
44.check {
45  width: 18px;
46  height: 18px;
47  flex: none;
48  border-radius: 999px;
49  border: 1.5px solid #3a4456;
50  cursor: pointer;
51}
52.list li.done .check { background: #4ade80; border-color: #4ade80; }
53.list li.done .title { color: #5b6675; text-decoration: line-through; }
54.title { flex: 1; }
55.remove {
56  border: none;
57  background: none;
58  color: #5b6675;
59  font-size: 20px;
60  line-height: 1;
61  cursor: pointer;
62}
63.remove:hover { color: #f87171; }
64.bar {
65  display: flex;
66  justify-content: space-between;
67  align-items: center;
68  margin-top: 16px;
69  font-size: 13px;
70  color: #8b93a3;
71}
72.filters { display: flex; gap: 4px; }
73.filters button {
74  border: 1px solid transparent;
75  background: none;
76  color: inherit;
77  padding: 4px 10px;
78  border-radius: 8px;
79  cursor: pointer;
80}
81.filters button.active { border-color: #2b3340; color: #e7ecf3; }

app.jsJAVASCRIPT

1// Step 2 brings this page to life.
2// For now the rows in index.html are hard-coded so you can see the design.

preview

The static app at step 1 — press Open in Code to edit it whole.

Before lesson 2

Try it

In Code, change the <h1> from "Today" to your own list name and re-run the preview.

Concepts covered · 1

The DOMintroduced

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.

Reference·intermediate·16 min

Write the spec the model can hit

A prompt is a specification. The difference between a junior and a senior prompt is the constraints a senior names that a junior leaves to chance. This lesson turns your architecture sketch into a prompt that produces reviewable code.

Reference·beginner·15 min

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.

Liked this one?

Pass it on

Share on X Follow on GitHub

Discussion

Be the first to ask

Your questions stay private with the team. We can pin answers to share with everyone.

No pinned answers yet for this tutorial.