HTML describes content and structure; CSS defines appearance; JavaScript responds to actions and transforms data. The browser interprets all three. A server can deliver files and a backend can process private data, but your first project works without a backend. This separation reduces decisions while you learn the complete flow.
We will build Focus Board: a creator task list. You can add, complete and delete a task. Local storage retains tasks in that browser; it does not synchronize devices and can be cleared. Do not use it for passwords, sensitive data or information whose loss would be critical. The reference app is educational and single-user.
AI can propose code that looks correct and still fails. Your job is to describe behavior, review the change and verify it. You do not need to memorize every API, but you must identify input, state, transformation and output. Keep a working copy before every change so you can roll back.
Worked example
Input: ‘Edit reel’. State: a list of objects with id, text and done. Transformation: append an object on form submission. Output: a row with checkbox and delete button. Persistence: serialize the list as JSON in localStorage. Hosting: serve index.html over HTTPS.
Your turn
Draw the journey from typing a task to seeing it again after reload. Explain what changes when you open the app in another browser.
LAYER | RESPONSIBILITY | EXAMPLE IN MY APP HTML | | CSS | | JavaScript | | Storage | | Hosting | | PROJECT LIMITATIONS:
You can describe each layer without saying ‘AI does it’. You recognize localStorage is not a shared database. You can explain the app's scope and boundaries.