Track project · 02

Build Static TaskFlow

Build an accessible, responsive TaskFlow interface before introducing JavaScript or React.

Definition of done

What you are building

Build plan

Work through it one observable step at a time

01
Create the HTML document and semantic landmarks.
02
Add a labelled create-task form and explain the label/input relationship.
03
Render a small task list using meaningful list or table markup.
04
Build the desktop layout with normal flow plus Flexbox/Grid where appropriate.
05
Add a narrow mobile breakpoint and verify there is no horizontal page overflow.
06
Add hover, focus-visible, disabled, empty, and error presentation states.
07
Move repeated colors/spacing into CSS custom properties.
08
Test keyboard navigation from the first interactive control to the last.

Evidence

Do not rely on “it seems to work”

Evidence to collect

A clean Git diff or file-tree changeCommands used and their exit/resultBrowser, HTTP, database, test, container, or CI evidence that proves the behaviorOne deliberate failure, the evidence you used, and the root-cause fixA short explanation of why the final responsibility lives in the chosen layer

Project exit ticket

Close the project only when these are true

Completion

I can demonstrate every deliverable.I can reproduce one key part without the walkthrough.I can explain one trade-off I deliberately chose.I can show one failure that my tests, constraints, or runbook now protects against.