# Teaching Notes

## User Preferences

- Has done basic tutorials before but "nothing stuck" — passive learning is the enemy. Every lesson must be hands-on.
- Prefers building over watching. Introduce concepts only when immediately needed for a build task.
- Aggressive timeline (3 months). Don't pad lessons with unnecessary theory. Get to the point.

## Session Notes

- 2026-06-21: First session. Workspace initialized. Starting from absolute foundations (HTML) since prior tutorial knowledge proved shallow. First lesson: understanding what HTML _is_ and writing your first page.
- 2026-07-15: Lesson 3 delivered — HTML Forms & Tables. Covers input types, label-input connection, validation attributes, textarea/select/button, and table anatomy (thead/tbody/tfoot/th/td/colspan). Build challenge: create a contact form + pricing table. Next logical step: CSS foundations (selectors, box model, colors, typography).
- 2026-07-15: Lesson 4 delivered — CSS Foundations. Phase 2 begins. New reusable component: css-playground.js (live CSS editor + shadow DOM preview). Covers selectors, specificity, box model, box-sizing, colors (hex/rgb/hsl), units (px/rem/em/%), typography, Google Fonts. Build challenge: style the Lesson 2 portfolio page. Next logical step: CSS Layout with Flexbox.
- 2026-07-24: Lesson 5 learning record retroactively logged (0005-css-in-action-mastered.md). Lesson 6 delivered — CSS Layout with Flexbox. New reusable component: flex-playground.js (interactive flex container property editor with live preview + CSS output). New reference: flexbox-cheatsheet.html. Covers: the problem flexbox solves, display:flex, two-axis mental model (main/cross), flex-direction, justify-content (6 values), align-items (5 values), gap, flex-wrap, flex item properties (grow/shrink/basis/shorthand), 3 real-world patterns (navbar, hero, card row), 6-question quiz, fill-in-the-blank retrieval exercise. Build challenge: portfolio layout with Flexbox (nav, hero, cards, footer). Next logical step: CSS Grid.
- 2026-07-25: Lesson 6 learning record logged (0006-css-flexbox-mastered.md). Lesson 7 delivered — CSS Grid. New reusable component: grid-playground.js (interactive grid container property editor with live preview + CSS output, mirrors flex-playground pattern). New reference: css-grid-cheatsheet.html. Covers: Flexbox vs Grid decision framework, display:grid, grid-template-columns/rows, the fr unit (gap-aware), repeat() function, minmax() + auto-fill for responsive grids without media queries, grid line numbering system, explicit item placement (grid-column/grid-row, span keyword, negative line numbers), alignment properties table (justify-items/align-items/justify-content/align-content), 3 real-world patterns (Holy Grail layout, responsive card grid, dashboard with spanning), Grid vs Flexbox decision table, 6-question quiz, fill-in-the-blank retrieval exercise. Build challenge: mini analytics dashboard with Grid page layout + Flexbox inside widgets. Next logical step: Responsive Design (media queries, mobile-first approach, responsive images).
- 2026-08-05: Lesson 9 delivered — JavaScript Foundations. Phase 3 begins. New reusable component: js-playground.js (live JS editor with line numbers, run/reset buttons, error capture, console panel). New reference: javascript-foundations.html. Covers: JS vs HTML vs CSS roles (structure/presentation/behavior), the script tag (external, end of body), console.log + DevTools Console, variables (let/const/var), 5 primitive data types (string/number/boolean/null/undefined) with the string-vs-number trap, arithmetic operators, template literals with ${} interpolation. Includes 3 SVG diagrams (three-languages flowchart, write→run loop, variable anatomy) + data type cards. 6-question quiz, fill-in-the-blank retrieval exercise. Build challenge: inject a profile card into the Lesson 8 portfolio via template literal + innerHTML (data → template → inject pattern). Next logical step: functions and event handlers (addEventListener).
- 2026-08-06: Lesson 10 delivered — Functions & Events. New reference: functions-and-events.html. Covers: function anatomy (name, parameters, body, return), three ways to create functions (declaration, expression, arrow function ⭐), parameter vs argument terminology, default parameters, return values + ASI newline trap, scope (global vs local/function, one-way mirror analogy), call stack visual execution (4-step SVG diagram), addEventListener syntax + the crucial handleClick vs handleClick() mistake, the event object (e.type, e.target, e.target.value, e.preventDefault(), e.key), common event types table (click/input/change/submit/keydown/mouseenter/mouseleave), real-world form example with live preview + submit prevention + validation, interview questions (hoisting, TDZ trap, addEventListener vs onclick), best practices. Interactive: JS playground, 6-question quiz, 6 fill-in-the-blank retrieval exercises, 10 graded practice questions, mini project (interactive profile card generator with form), coding challenge (grade calculator). Next logical step: conditionals & logic (if/else, comparison operators, logical operators, ternary).
- 2026-08-13: Lesson 12 delivered — Arrays & Objects. Written deliberately in plain, simple English (short sentences, one idea per sentence, consistent terms) per user request to teach using the "wait-what" skill's Simplified Technical English spirit — note: this workspace has no CONTEXT.md ubiquitous-language file, so terms were kept consistent within the lesson + reference doc instead. New reference: arrays-and-objects.html. Covers: arrays (ordered lists, zero-based indexing, .length, .push()/.pop()), objects (keys, values, properties, dot vs bracket notation, nested objects), the array-of-objects pattern (the shape of real API responses / DB records), and the for...of loop as a minimal iteration tool. Interactive: JS playground (contact list demo), 3-question quiz, 3 fill-in-the-blank exercises, 8 practice questions, build challenge (contact list array of objects). Deliberately scoped smaller than recent lessons to keep working memory load low. Next logical step: Array Methods (.map(), .filter(), .reduce()) — set up directly by today's array-of-objects pattern, and the exact tool React uses to render lists.