Week 1 — HTML, CSS & React UI foundations

Learn HTML document structure and CSS layout (box model, positioning, Flexbox/Grid), then build React foundations — then ship a Tic-Tac-Toe mini-project.

1. HTML document structure
Document outline, semantic landmarks, headings, lists, links, and basic form controls so you can read markup before JSX.
Open
2. CSS box model & normal flow
Content, padding, border, margin, box-sizing, block vs inline vs inline-block, and margin collapse in normal flow.
Open
3. CSS positioning & stacking
Position modes, containing blocks, offsets, stacking, and when absolute is the wrong tool for page layout.
Open
4. Flexbox & Grid alignment
Flex direction, wrapping, justify-content, align-items, gap; Grid tracks and simple alignment; choosing flex vs grid.
Open
5. What is React?
Declarative UI, component trees, and one-way data flow.
Open
6. Your first component
Function components, component composition, and capitalized component names.
Open
7. Importing and exporting components
Named exports, default exports, and module boundaries.
Open
8. Writing JSX
Single roots, fragments, attributes, and self-closing elements.
Open
9. JavaScript in JSX with curly braces
Expressions vs statements, dynamic attributes, and nullish fallbacks.
Open
10. Passing props to a component
One-way data flow, prop naming, and children.
Open
11. Conditional rendering
Ternary, &&, early return, and empty states.
Open
12. Rendering lists
map, key placement, and why array indexes can break dynamic lists.
Open
13. Keeping components pure
Pure rendering, local mutation, and predictable re-renders.
Open
14. Responding to events
Learn the common React DOM handlers with examples, then the mistakes that cause the most bugs.
Open
15. SPA routing: React Router & route guards
Learn how React apps route with react-router-dom (BrowserRouter, Routes, Link, navigate, params), how public vs private routes work, then how this monorepo uses Next App Router instead for the product shell.
Open
16. State: a component’s memory
useState, setters, and local state ownership.
Open
17. Render and commit
Triggering updates, rendering, reconciliation, and commit work.
Open
18. State as a snapshot
Snapshot semantics, closures, and scheduled renders.
Open
19. Queueing state updates
Batching, functional updaters, and replace versus update operations.
Open
20. Updating objects in state
Immutability, spread syntax, and nested updates.
Open
21. Updating arrays in state
Adding, removing, replacing, and sorting immutable arrays.
Open

End-of-week mini-project · practice only

Tic-Tac-Toe

Build a playable Tic-Tac-Toe board with React components, state, lists, and event handlers.

Definition. A Tic-Tac-Toe mini-project is a small interactive React app that applies document/UI foundations from Week 1 — components, props, conditional rendering, lists with stable keys, and immutable state updates — without Redux, Query, or Next.

In simpler words. Two players take turns on a 3×3 board. You own all the UI and game state in React. No Nest yet.

Deliverables

Square / Board / Game components with props flowing down and events bubbling up
useState for board squares, current player (X/O), and optional move history
Winner / draw / next-player status derived from board state (no DOM queries)
Stable keys if you render a move list; empty vs mid-game vs finished views
Optional: “Jump to move” history like the official React tutorial

Acceptance checklist

- [ ] Board renders 9 squares from state (not hard-coded nine separate states)
- [ ] Clicking a square updates immutable state (no board[i] = 'X' mutation)
- [ ] Winner / draw / next player shown with conditional rendering
- [ ] Handlers are passed, not called during render
- [ ] Empty board ≠ finished game (distinct UI)
- [ ] (Bonus) Move history list uses stable keys

Tips

Follow react.dev’s Tic-Tac-Toe tutorial first, then rebuild from memory without copy-paste.
HTML/CSS foundations still apply: semantic structure, box model, Flexbox for the grid.
Keep this local-only — Nest and Redux arrive in later weeks.

Open example / docs