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

Review what comes back like a senior

Models produce confident, plausible, well-formatted code — which is exactly what makes their mistakes dangerous. This lesson is the review rubric: the specific failure classes to hunt for, because "it looks right" is not review.

Reference·advanced·18 min

Orchestrate agents without the codebase rotting

Putting it together: context, guardrails, and a verification loop that lets you run coding agents across a real codebase without it drifting into an incoherent pile. This is the senior loop at full speed.

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.

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.