Build a Kanban Task Board (HTML/CSS/JS)

Free Review to certify

Build a Kanban Task Board (HTML/CSS/JS)

Ship a drag-or-click Kanban board with localStorage — a classic frontend interview demo.

Skills you'll learn

DOM manipulation JS state localStorage UI interactions Front-end debugging

~100 min · +50 pts

IT recruiters love seeing an interactive board you can demo live.

Starter: /assets/templates/kanban-board/
Requirements:
- Columns: To do / Doing / Done
- Add / edit / delete cards
- Persist with localStorage
- Responsive layout
- Optional: simple drag-and-drop or Move buttons

Submit a public demo link (or clear local demo notes) + reflection (120+ chars).

Environment setup (start here)

Same as the portfolio lab: browser + local files. You will use localStorage — opening via file:// is fine for practice.

Browser only

Pick your OS and follow from step 1:

Windows macOS

1) Folder: C:\Users\YourName\kanban-lab
2) Download index.html, board.js, styles.css from the starter pack.
3) Open index.html in Chrome/Edge.
4) Open DevTools (F12) → Application → Local Storage to inspect saved cards later.
5) Use VS Code to edit board.js; save and refresh to test.

1) Folder: ~/Documents/kanban-lab
2) Download starter files into the folder.
3) Open index.html in Chrome.
4) DevTools (Cmd+Option+I) → Application → Local Storage.
5) Edit board.js in VS Code; Cmd+S and refresh.

How do I know it worked?

Board shows three columns. Adding a card works; after refresh, cards remain (localStorage).

Common issues

Cards disappear after refresh → check board.js save logic and browser storage not blocked in private mode.

Starter pack

Download the Kanban starter, finish CRUD + localStorage, and prepare a live demo.

Preview index.html board.js styles.css README

/assets/templates/kanban-board/