Projects
Understand the idea. Try the code. Take one small step forward.
01—02 · Page building
Build a profile and grid, then verify narrow layouts.
03—05 · Small applications
Connect data, state and verification through three apps.
06—08 · Complete utility projects
Build a progress board, focus timer and expense notebook.
Study the mechanism, run the example, then attempt the challenge before opening the solution. Every chapter includes verification and common boundaries.
01 · Personal homepage: structure to release checks
Build a responsive profile with biography, skills and project links, explaining each layout decision.
02 · Course grid: flexible layout and stress testing
Build a course list that adapts from one to multiple columns and tolerates long content.
03 · Todo list: state, persistence and recovery
Implement add, complete, delete and reload recovery with a clear state-to-DOM relationship.
04 · Course finder: combined filters and empty states
Combine keyword and topic criteria with predictable reset and empty-result behavior.
05 · Quiz app: state transitions and duplicate protection
Build selection, grading, explanation, progression and restart, with one score update per question.
06 · Progress board: stages, filters and persistence
Build a persistent goal board with stage changes and filtering, deriving progress from the full dataset.
07 · Focus timer: drift, pause and background recovery
Implement start, pause, resume and reset using a deadline instead of counting timer callbacks.
08 · Expense notebook: parsing, categories and totals
Store integer minor units and implement category filtering, totals and local recovery.