Building a web application from scratch—using nothing but HTML, CSS, and JavaScript—is one of the best ways to sharpen your skills and own the full stack of the browser. In this tutorial, you’ll create a complete, polished, and accessible single-page web app: a simple task manager that supports creating, editing, completing, filtering, and persisting tasks to localStorage. You’ll learn how to structure files, author semantic HTML, style with modern CSS, architect JavaScript modules, manage state, handle events via delegation, persist data, and ship to production via static hosting. By the end, you’ll have a professional-quality app and a repeatable pattern for future projects.

What we’ll build

We’ll build a Todo app with:

Add, edit, complete, and delete tasks
Filters: All, Active, Completed
Persistence via localStorage
Accessible markup (labels, roles, keyboard navigation)
Responsive design and polished interactions

Key decisions:

Keep it framework-free (vanilla JS)
Use modules (ES Modules) to organize code
Avoid build tools initially; you can add them later
Keep rendering simple and robust

Prerequisites and tools

You should be comfortable with:

HTML: forms, semantics, ARIA basics
CSS: Flexbox, custom properties, responsive units
JavaScript: ES6+, DOM API, events, modules (import/export)

Tools:

A modern browser (Chrome, Firefox, Edge, Safari)
A code editor (VS Code recommended)
A local web server (VS Code Live Server extension or python -m http.server)

Plan the app

Before coding, outline the app shape and data model.

Features and flows:

User types a task and presses Enter or clicks Add
Task appears in the list with a checkbox and actions (edit, delete)
User toggles completion, edits text inline, or deletes task
Filters adjust the list view
App remembers tasks between sessions

Data model:

Task structure: { id: string, text: string, completed: boolean, createdAt: number }
App state: { tasks: Task[], filter: "all" | "active" | "completed" }

Rendering approach:

Render from state on every change (simple and reliable)
Use event delegation on the list to handle item actions
Keep view functions pure when possible

Accessibility:

Use a form with a label for the input
Use buttons for actions (not links)
Announce changes using aria-live for task count
Ensure keyboard operability

Wireframe the interface:

Header: Title and theme-friendly brand
Form: Text input + Add button
Controls: Filter buttons + Clear Completed
List: Each item has checkbox, text, edit, delete
Footer: Stats (items left)

Initialize the project

Create a folder and the following structure:

index.html
styles.css
js/
- main.js
- state.js
- storage.js
- dom.js

From your terminal:

mkdir simple-todo-app && cd simple-todo-app
mkdir js
touch index.html styles.css js/main.js js/state.js js/storage.js js/dom.js

Author the HTML

We’ll write semantic, accessible HTML with a template for task items.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Simple Tasks</title>
  <link rel="stylesheet" href="styles.css" />
</head>
<body>
  <header class="app-header">
    <h1 class="visually-hidden">Simple Tasks</h1>
    <div class="brand" aria-hidden="true">Simple Tasks</div>
  </header>

  <main class="app" id="app">
    <section aria-labelledby="add-task-heading" class="panel">
      <h2 id="add-task-heading" class="panel-title">Add a task</h2>
      <form id="task-form" class="task-form" autocomplete="off">
        <label for="task-input" class="sr-only">Task</label>
        <input id="task-input" name="task" type="text" placeholder="What needs to be done?" required minlength="1" maxlength="200" />
        <button type="submit" class="btn primary">Add</button>
      </form>
    </section>

    <section aria-labelledby="controls-heading" class="panel controls-panel">
      <h2 id="controls-heading" class="panel-title">Controls</h2>
      <div class="filters" role="group" aria-label="Filter tasks">
        <button class="btn filter is-active" data-filter="all" aria-pressed="true">All</button>
        <button class="btn filter" data-filter="active" aria-pressed="false">Active</button>
        <button class="btn filter" data-filter="completed" aria-pressed="false">Completed</button>
      </div>
      <button class="btn subtle" id="clear-completed" type="button">Clear completed</button>
    </section>

    <section aria-labelledby="list-heading" class="panel">
      <h2 id="list-heading" class="panel-title">Tasks</h2>
      <ul id="todo-list" class="todo-list" aria-live="polite"></ul>

      <!-- Template for tasks -->
      <template id="task-template">
        <li class="todo-item" data-id="">
          <label class="checkbox">
            <input type="checkbox" class="toggle" aria-label="Mark complete" />
            <span class="check"></span>
          </label>
          <div class="item-text" tabindex="0"></div>
          <div class="actions">
            <button class="btn icon edit" aria-label="Edit task" title="Edit">✏️</button>
            <button class="btn icon delete" aria-label="Delete task" title="Delete">🗑️</button>
          </div>
        </li>
      </template>
    </section>

    <footer class="panel footer">
      <div id="stats" aria-live="polite" aria-atomic="true">0 items</div>
    </footer>
  </main>

  <script type="module" src="./js/main.js"></script>
</body>
</html>

Key details:

The h1 is visually hidden to keep semantics without taking space. The “brand” div provides visible title.
The template element stores the item structure to clone for each task.
aria-live on the list and stats ensures screen readers get updates.
Buttons (not links) are used for actions and filters.

Style with modern CSS

We’ll keep it minimal but polished, with CSS custom properties, a small reset, and responsive layout.

:root {
  --bg: #0f172a;
  --panel: #111827;
  --text: #e5e7eb;
  --muted: #9ca3af;
  --accent: #22c55e;
  --accent-2: #10b981;
  --danger: #ef4444;
  --border: #1f2937;
  --focus: #38bdf8;
  --shadow: 0 10px 30px rgba(0,0,0,.25);
  --radius: 12px;
  --space: 14px;
  --font: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; font-family: var(--font); background: radial-gradient(1200px 800px at 20% -10%, #1e293b, transparent),
  radial-gradient(1400px 1000px at 80% 110%, #0b3b2b, transparent), var(--bg); color: var(--text);
}

.visually-hidden, .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.app-header { padding: calc(var(--space) * 2) var(--space); text-align: center; }
.brand { font-weight: 800; font-size: clamp(20px, 5vw, 32px); letter-spacing: .5px; opacity: .95; }

.app { max-width: 800px; margin: 0 auto; padding: var(--space); display: grid; gap: var(--space); }
.panel { background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.005)); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: calc(var(--space) * 1.2); }
.panel-title { margin-top: 0; margin-bottom: var(--space); font-size: 14px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }

.task-form { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
#task-input {
  width: 100%; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--border);
  background: #0b1220; color: var(--text); outline: none; transition: border-color .15s, box-shadow .15s;
}
#task-input:focus { border-color: var(--focus); box-shadow: 0 0 0 3px rgba(56,189,248,.25); }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 10px; padding: 10px 14px; border: 1px solid var(--border);
  background: #0f172a; color: var(--text); cursor: pointer; transition: transform .04s ease, background .15s, border-color .15s; user-select: none;
}
.btn:hover { background: #162035; }
.btn:active { transform: translateY(1px); }
.btn.primary { background: linear-gradient(180deg, var(--accent), var(--accent-2)); border: none; color: #052e16; font-weight: 700; }
.btn.subtle { background: #0b1220; color: var(--muted); }
.btn.icon { padding: 8px 10px; min-width: 36px; }

.controls-panel { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; }
.filters { display: inline-flex; gap: 8px; }
.filter.is-active, .filter[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }

.todo-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.todo-item {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: 12px; padding: 10px; border-radius: 10px; background: #0b1220; border: 1px solid var(--border);
}
.checkbox { position: relative; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; }
.checkbox input { appearance: none; width: 0; height: 0; position: absolute; }
.check {
  width: 20px; height: 20px; border-radius: 6px; border: 2px solid #334155; background: #0b1220; display: inline-block; position: relative; transition: border-color .15s, background .15s;
}
.toggle:focus + .check { outline: 3px solid rgba(56,189,248,.3); }
.toggle:checked + .check { background: var(--accent); border-color: var(--accent); }
.toggle:checked + .check::after { content: "✓"; color: #052e16; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -58%); font-weight: 900; font-size: 14px; }

.item-text { outline: none; min-height: 24px; padding: 6px 8px; border-radius: 8px; }
.todo-item.completed .item-text { color: var(--muted); text-decoration: line-through; }
.item-text:focus { box-shadow: 0 0 0 3px rgba(56,189,248,.25); background: #0f172a; }

.actions { display: inline-flex; gap: 6px; }
.actions .delete:hover { border-color: var(--danger); color: var(--danger); }

.footer { display: flex; justify-content: space-between; align-items: center; color: var(--muted); }

@media (max-width: 560px) {
  .controls-panel { grid-template-columns: 1fr; }
}

Highlights:

Uses a warm, modern look suitable for dark mode.
Visual focus indicators aid accessibility.
Subtle hover and pressed states improve UX.

Architect JavaScript modules

We’ll split logic into modules:

state.js: manages state transitions (pure-ish functions)
storage.js: load/save to localStorage
dom.js: rendering and DOM bindings
main.js: bootstraps app, wires events

state.js: state and pure updates

// js/state.js
export const FILTERS = { ALL: "all", ACTIVE: "active", COMPLETED: "completed" };

export function createInitialState(loadedTasks = []) {
  return {
    tasks: loadedTasks,
    filter: FILTERS.ALL
  };
}

export function addTask(state, text) {
  const newTask = {
    id: generateId(),
    text: text.trim(),
    completed: false,
    createdAt: Date.now()
  };
  return { ...state, tasks: [newTask, ...state.tasks] };
}

export function toggleTask(state, id) {
  return {
    ...state,
    tasks: state.tasks.map(t => t.id === id ? { ...t, completed: !t.completed } : t)
  };
}

export function deleteTask(state, id) {
  return { ...state, tasks: state.tasks.filter(t => t.id !== id) };
}

export function editTask(state, id, newText) {
  const text = newText.trim();
  if (!text) return state; // avoid empty text
  return {
    ...state,
    tasks: state.tasks.map(t => (t.id === id ? { ...t, text } : t))
  };
}

export function clearCompleted(state) {
  return { ...state, tasks: state.tasks.filter(t => !t.completed) };
}

export function setFilter(state, filter) {
  if (!Object.values(FILTERS).includes(filter)) return state;
  return { ...state, filter };
}

export function getVisibleTasks(state) {
  switch (state.filter) {
    case FILTERS.ACTIVE: return state.tasks.filter(t => !t.completed);
    case FILTERS.COMPLETED: return state.tasks.filter(t => t.completed);
    default: return state.tasks;
  }
}

export function remainingCount(state) {
  return state.tasks.filter(t => !t.completed).length;
}

function generateId() {
  // 16-char base36 id: timestamp + random
  return (Date.now().toString(36) + Math.random().toString(36).slice(2, 10)).slice(0, 16);
}

Design notes:

Functions return new state objects; this keeps updates predictable and testable.
The state is a plain object, easy to serialize.

storage.js: persistence

// js/storage.js
const KEY = "simple-tasks/v1";

export function loadTasks() {
  try {
    const raw = localStorage.getItem(KEY);
    if (!raw) return [];
    const parsed = JSON.parse(raw);
    if (!Array.isArray(parsed)) return [];
    // sanitize objects
    return parsed
      .filter(isTaskLike)
      .map(t => ({ id: String(t.id), text: String(t.text), completed: !!t.completed, createdAt: Number(t.createdAt) || Date.now() }));
  } catch {
    return [];
  }
}

export function saveTasks(tasks) {
  try {
    localStorage.setItem(KEY, JSON.stringify(tasks));
  } catch (err) {
    // storage quota errors can happen
    console.warn("Failed to save to localStorage", err);
  }
}

function isTaskLike(v) {
  return v && typeof v === "object" && "id" in v && "text" in v && "completed" in v;
}

Notes:

Sanitizes data to prevent issues from corrupted storage.

dom.js: rendering and DOM helpers

// js/dom.js
import { getVisibleTasks, remainingCount } from "./state.js";

export function bindElements() {
  return {
    form: document.getElementById("task-form"),
    input: document.getElementById("task-input"),
    list: document.getElementById("todo-list"),
    template: document.getElementById("task-template"),
    filters: document.querySelectorAll(".filter"),
    clearCompletedBtn: document.getElementById("clear-completed"),
    stats: document.getElementById("stats")
  };
}

export function render(state, els) {
  // Render the list
  const tasks = getVisibleTasks(state);
  els.list.innerHTML = ""; // simple replace
  const frag = document.createDocumentFragment();

  for (const task of tasks) {
    const node = els.template.content.firstElementChild.cloneNode(true);
    node.dataset.id = task.id;
    if (task.completed) node.classList.add("completed");

    const checkbox = node.querySelector(".toggle");
    const textEl = node.querySelector(".item-text");
    checkbox.checked = task.completed;
    textEl.textContent = task.text;

    frag.appendChild(node);
  }
  els.list.appendChild(frag);

  // Render filters ARIA and active class
  for (const btn of els.filters) {
    const pressed = btn.dataset.filter === state.filter;
    btn.classList.toggle("is-active", pressed);
    btn.setAttribute("aria-pressed", String(pressed));
  }

  // Render stats
  const remaining = remainingCount(state);
  const plural = remaining === 1 ? "item" : "items";
  els.stats.textContent = `${remaining} ${plural} left`;
}

export function focusInput(els) {
  els.input.focus();
  els.input.select?.();
}

main.js: glue code and event handlers

// js/main.js
import {
  createInitialState, addTask, toggleTask, deleteTask,
  editTask, clearCompleted, setFilter, FILTERS
} from "./state.js";
import { loadTasks, saveTasks } from "./storage.js";
import { bindElements, render, focusInput } from "./dom.js";

let state = createInitialState(loadTasks());
const els = bindElements();

function update(nextState) {
  state = nextState;
  render(state, els);
  saveTasks(state.tasks);
}

function onSubmit(e) {
  e.preventDefault();
  const text = els.input.value.trim();
  if (!text) return;
  update(addTask(state, text));
  els.form.reset();
  focusInput(els);
}

function onListClick(e) {
  const item = e.target.closest(".todo-item");
  if (!item) return;
  const id = item.dataset.id;

  if (e.target.matches(".toggle")) {
    update(toggleTask(state, id));
    return;
  }
  if (e.target.matches(".delete")) {
    update(deleteTask(state, id));
    return;
  }
  if (e.target.matches(".edit")) {
    startInlineEdit(item, id);
    return;
  }
}

function startInlineEdit(item, id) {
  const textEl = item.querySelector(".item-text");
  const oldText = textEl.textContent;
  textEl.setAttribute("contenteditable", "true");
  textEl.focus();
  placeCaretEnd(textEl);

  function commit() {
    textEl.removeAttribute("contenteditable");
    const newText = textEl.textContent;
    if (newText.trim() !== oldText.trim()) {
      update(editTask(state, id, newText));
    } else {
      // re-render to normalize text and state
      render(state, els);
    }
    teardown();
  }

  function cancel() {
    textEl.removeAttribute("contenteditable");
    textEl.textContent = oldText;
    teardown();
  }

  function onKeyDown(ev) {
    if (ev.key === "Enter") {
      ev.preventDefault();
      commit();
    } else if (ev.key === "Escape") {
      ev.preventDefault();
      cancel();
    }
  }

  function onBlur() { commit(); }

  textEl.addEventListener("keydown", onKeyDown);
  textEl.addEventListener("blur", onBlur);

  function teardown() {
    textEl.removeEventListener("keydown", onKeyDown);
    textEl.removeEventListener("blur", onBlur);
  }
}

function placeCaretEnd(el) {
  const range = document.createRange();
  range.selectNodeContents(el);
  range.collapse(false);
  const sel = window.getSelection();
  sel.removeAllRanges();
  sel.addRange(range);
}

function onFilterClick(e) {
  const btn = e.target.closest(".filter");
  if (!btn) return;
  const filter = btn.dataset.filter;
  update(setFilter(state, filter));
}

function onClearCompleted() {
  update(clearCompleted(state));
}

function onListChange(e) {
  // Support toggling via keyboard when focusing checkbox
  if (e.target.matches(".toggle")) {
    const item = e.target.closest(".todo-item");
    if (!item) return;
    const id = item.dataset.id;
    update(toggleTask(state, id));
  }
}

// Bootstrap
els.form.addEventListener("submit", onSubmit);
els.list.addEventListener("click", onListClick);
els.list.addEventListener("change", onListChange);
document.querySelector(".filters").addEventListener("click", onFilterClick);
els.clearCompletedBtn.addEventListener("click", onClearCompleted);

// First render
render(state, els);

Notes:

update centralizes rendering and persistence.
Inline editing uses contenteditable with Enter to confirm and Escape to cancel.
We re-render after updates to keep DOM in sync.

Run locally

Open a local server to avoid module/CORS issues:

VS Code: install “Live Server” and click “Go Live”
Python: python3 -m http.server 8000 and open http://localhost:8000
Node: npx http-server

Your app should load with an input box. Add tasks, test filters, reload to confirm persistence.

Why this architecture works

Separation of concerns: state transitions don’t touch the DOM; rendering doesn’t mutate state.
Event delegation: a single listener handles actions for many items, making it efficient and simpler to maintain.
Stateless render: every update redraws visible UI from state, avoiding sync bugs.

Accessibility details and best practices

Labels: The task input has a label (visually hidden) for screen readers.
Buttons vs anchors: Actions use button elements with aria-label for clarity.
Keyboard support:
- Press Enter on the input to submit
- Tab to a task’s text and press Enter to edit, Escape to cancel
- Space toggles a focused checkbox
aria-live regions:
- The list and stats update narrate state changes without grabbing focus.
Focus management:
- After adding a task, focus returns to the input for fast entry.
Color contrast: The palette maintains good contrast; verify with devtools’ accessibility checker.

Pitfalls to avoid:

Don’t put interactive handlers on non-interactive elements without role and keyboard handling.
Keep the “Edit” action keyboard-accessible; the item text is focusable (tabindex="0").

Enhancing the UX with small details

Auto-select input after adding to speed up repetitive entries.
Slight animate-in for new items (optional with CSS transition on transform/opacity).
Use title attributes on edit/delete buttons for hover hints.
Persist filter in localStorage if you prefer (additional enhancement).

Add minor animations (optional)

To animate list item appearance subtly, add:

.todo-item { opacity: 0; transform: translateY(4px); animation: fadeIn .18s ease-out forwards; }
@keyframes fadeIn { to { opacity: 1; transform: translateY(0); } }

This keeps performance high (affecting only opacity/transform, which are GPU-accelerated).

Testing and debugging

Manual tests:

Add, edit, toggle, delete tasks
Switch filters; verify the list updates correctly
Clear completed; confirm remaining tasks persist
Reload the page; verify tasks and completion states remain
Keyboard only: can you accomplish all actions?

Console tests:

Temporarily log state in update() to inspect transitions
Simulate large task lists: In DevTools console, run:
- for (let i=0;i<200;i++) { state = addTask(state, "Task " + i); } render(state, els);

Common bugs:

Not calling preventDefault() on form submission causes a page reload.
Forgetting to set data-id on list items breaks event routing.
contenteditable emptying the text; we guard with a trim in editTask.

Performance considerations

For this size app, re-rendering the visible list on each update is fine. If you scale up:

Diff the list (keyed by id) and update only mutated nodes
Use requestAnimationFrame to batch DOM writes
Defer expensive work off the main thread (not needed here)
Avoid layout thrashing by reading DOM values before writes

LocalStorage performance:

Serialize once per update; it’s acceptable for small payloads (<1 MB)

Persist the filter (enhancement)

To remember the selected filter across sessions, extend storage to also save filter, or use URL hash:

On startup, read location.hash (/#/active or #/completed)
Update setFilter on hashchange
Links become shareable, e.g., yourapp/#/completed

Example tweak:

// in main.js (enhancement)
window.addEventListener("hashchange", () => {
  const val = location.hash.replace("#/", "") || "all";
  update(setFilter(state, val));
});

Responsiveness and layout tweaks

The grid collapses the controls into one column on narrow screens.
Touch targets are at least 36px high for mobile comfort.
Inputs and buttons respond to hover and active states for feedback.

Mobile optimizations:

Use inputmode="text" and autocomplete hints if you add more fields
Ensure buttons are not too close to avoid accidental taps

Deployment: ship your app

Static hosting is perfect for this app.

GitHub Pages:

Create a GitHub repository and push your files
In repository settings, enable GitHub Pages for the main branch, root folder
Your app will be live at https://<username>.github.io/<repo>/

Netlify (drag and drop):

Sign up at Netlify
Drag your project folder onto the dashboard
Netlify deploys and gives you a URL; you can add a custom domain and HTTPS

Vercel:

Similar to Netlify; import the repo, set the root, deploy

Production tips:

Use a meaningful title and meta description in index.html
Add a favicon for polish
Set a Content Security Policy (CSP) if you add external resources

Extend the project

Now that the core is solid, explore features:

Due dates and sorting

Add an optional date input to the form
Extend the task model: { due: number|null }
Provide sort controls (by created, by due, by status)

Bulk actions

“Mark all completed” and “Mark all active” functions
Use array.map and array.every to implement cleanly

Theming

Add a toggle to switch between light and dark
Store the theme in localStorage and set a data-theme attribute on html

Undo/redo history

Keep a stack of previous states
Command pattern: Every update can push an inverse action

Tests

Unit test state functions with a lightweight runner or browser-based asserts
Example: in dev, import state.js in a test page and assert outputs

Internationalization

Wrap text in a message map, switch language dictionaries

PWA (Progressive Web App)

Add a manifest.json and service worker for offline caching
Cache index.html, styles.css, and JS modules

Code health and structure best practices

Single source of truth: State lives in one object
Keep functions pure: state.js never touches DOM/storage
Small modules with clear responsibilities
Prefer const and let over var
Avoid magic strings; centralize constants (filters)
Validate inputs at boundaries (trim, length, required)

Linting (optional):

Add a .editorconfig and Prettier config
Run a linter (ESLint) to enforce code style

Security considerations

localStorage is plain text; don’t store secrets
contenteditable can be abused if you inject HTML; we set textContent, not innerHTML, and do not persist potentially malicious HTML
If you incorporate external APIs later, validate inputs and sanitize outputs

Accessibility checklist

Input has a label (screen-reader visible)
Buttons have aria-labels and visible text or icons with labels
Focus order is logical
Focus styles are visible and consistent
Live regions announce changes without stealing focus
Checkbox has a label and is keyboard togglable

Troubleshooting guide

Nothing happens when submitting:
- Confirm the script tag uses type="module"
- Check console for CORS/module errors; use a local server instead of file://
- Ensure onSubmit prevents default and adds tasks
Edits don’t save:
- editTask trims and prevents empty strings; check for whitespace-only edits
- Confirm you commit on blur/Enter; Escape cancels
Filters don’t change:
- Verify data-filter values match FILTERS
- Confirm the event listener is attached to the parent .filters element
Persistence not working:
- Confirm localStorage is available (private mode may restrict in some browsers)
- Open Application tab in DevTools to inspect stored data
Styles look off:
- Ensure styles.css is correctly linked and loaded
- Check for typos in CSS variables and class names

From tutorial to template: reuse this pattern

This project is an excellent seed for many small web apps:

Replace tasks with notes, bookmarks, or expenses
Swap localStorage for remote APIs with fetch()
Introduce routing with a hash-based router
Keep the same module boundaries and update flow

By mastering this “render-from-state with event delegation” approach, you can confidently build maintainable apps without frameworks and later transition to frameworks with a deeper understanding of what they abstract.

Final polish checklist

Add a favicon (favicon.ico or PNG)
Test on mobile devices (Chrome devtools device emulation)
Verify keyboard-only flow
Confirm color contrast and focus highlights
Minify assets for production (optional)
Add meta tags for social sharing if you publish publicly

Summary

You’ve built a fully functional, accessible, and responsive web application using only HTML, CSS, and JavaScript. You planned the features and data model, structured your project, authored semantic markup, applied modern CSS styling, designed a clean state architecture with ES Modules, implemented event delegation, added inline editing, wired persistence with localStorage, and deployed with a static host.

This pattern scales well and remains understandable. As you add features—sorting, theming, APIs, or PWA support—lean on your separation of concerns and central state. With this foundation, you can confidently ship small apps quickly and maintain them with ease.

Build a Simple Web Application from Scratch with HTML, CSS, and JavaScript: A Full Walkthrough