Build Your Homepage — 64 lessons

Your first deployment in a single line of code

Learn the modern workflow where pushing to GitHub triggers Vercel to auto-deploy your site. End the lesson with a working https://your-name.vercel.app homepage.

Selectors, colors, layout — all the way to responsive

Transform the plain homepage from Lesson 1 into something you would actually want to share. Learn selectors, color, the box model, Flexbox, and responsive design — enough CSS to make any site look intentional.

Commit and push from the terminal — for real

Stop uploading files through the GitHub web UI. Install git, set up your identity, and learn the daily workflow: clone, add, commit, push, pull, branch, and merge.

From a static page to a "living" page

Add real behavior to your homepage: respond to clicks, change content with the DOM, fetch data, and store state. Just enough JavaScript to feel the spark.

Components, state, and routing as used in industry

Step up from plain HTML files. Create a Next.js project, break the UI into reusable components, manage state with useState, and ship it to Vercel just like a real product team.

DOCTYPE · head/body · core tags · strong · em · blockquote · code · pre · sub/sup · href · target · rel · srcset · figure/figcaption

Learn the structure of an HTML document: DOCTYPE, head/body, and the most common tags. Build a clean foundation before styling or scripting. Use the right tag for the right meaning. Master inline text elements like strong, em, code, and the typographic helpers blockquote, sub, sup. Go beyond <a href="...">. Learn safe targets, accessible image patterns, responsive images with srcset, and figure/figcaption for captions.

table · thead/tbody · colspan/rowspan · accessibility · input types · label · validation · button · header · nav · main · article · section · aside · footer

Tables are for tabular data. Learn the correct structure (thead/tbody/tfoot), spans, and the small extras that make tables accessible. Forms collect user input. Learn the modern input types, the proper label-for pairing, built-in HTML validation, and the right button types. Replace generic <div> soup with semantic elements that describe meaning. Better SEO, better accessibility, easier styling.

Three ways to apply · selectors · specificity · color systems · web fonts · line-height · content · padding · border · margin · box-sizing · background-image · gradients · box-shadow

Get the fundamentals right: how CSS attaches to HTML, the main selectors, and how specificity decides which rule wins when several match. Pick colors with intent and set typography that actually reads well. Learn HSL/OKLCH, web fonts, and the rhythm of line-height and letter-spacing. Every element is a box made of four layers. Master padding vs margin, box-sizing: border-box, and how negative margins behave. Add depth and personality with backgrounds, gradients, and shadows. Use the right tool — performance and aesthetics depend on the choice.

display:flex · justify-content · align-items · gap · display:grid · template · areas · auto-fit · viewport · media queries · mobile-first · clamp()

Flexbox makes 1-D layout (a row or a column) intuitive. Master the container and item properties and you will solve 80% of layout problems. Grid handles 2-D layout — rows and columns together. The right tool for dashboards, magazine layouts, and complex page templates. Build one layout that works on phones, tablets, and desktops. Use a mobile-first approach, sensible breakpoints, and fluid units like clamp() for typography.

let · const · primitive vs object · typeof · if · switch · for · while · ternary · declaration · arrow · default params · rest/spread · map · filter · reduce · find · sort

Declare variables properly with let and const, understand JavaScript's primitive and object types, and use typeof to inspect values. Make decisions and repeat actions: if/else chains, switch, for/of/in, while, and the ternary expression for one-liners. Master the three function forms (declaration, expression, arrow), default and rest parameters, and the spread operator. Stop writing for-loops for array transformations. Use map, filter, reduce, find, and sort — the bread and butter of modern JavaScript.

literal · destructuring · Object.keys · spread · shorthand · querySelector · classList · innerHTML vs textContent · click · input · submit · delegation · preventDefault · Promise · async/await · fetch · error handling

Master JavaScript's most-used data structure: objects. Learn destructuring, the shorthand syntax, Object.keys / values / entries, and immutable updates with spread. Reach into the page from JavaScript. Select elements, change content, toggle classes, and create new nodes — without external libraries. Respond to user actions: handle clicks, form input, submissions, and delegate events for dynamic lists. Stop default behaviors when needed. Stop blocking the UI. Use Promises, async/await, and fetch to talk to APIs cleanly — with proper error handling and loading states.

Why Node? · install · REPL · running scripts · fs · path · os · http · package.json · npm install · scripts · semver · routing · middleware · JSON parser · static files

Run JavaScript outside the browser. Install Node, use the REPL, run scripts, and understand the runtime model and event loop at a high level. Use Node's built-in modules: read and write files with fs, build paths safely with path, inspect the OS, and serve HTTP with the built-in http module. Use npm to manage dependencies, run scripts, and publish your own packages. Understand semver and lockfiles. Build real HTTP servers fast with Express. Learn routing, middleware composition, JSON body parsing, and serving static files.

Resources · status codes · CRUD · CORS · Persisting state · read/write JSON · race conditions

Design and implement a REST API: pick correct status codes, model resources around URLs, support CRUD, and enable CORS for browser clients. Before introducing a real database, persist data to disk as JSON. Learn the limitations (concurrency, scale) and when to graduate to SQLite/PostgreSQL.

Relational vs NoSQL · schema · primary key · normalization · SELECT · INSERT · UPDATE · DELETE · WHERE · ORDER BY · JOIN · GROUP BY · HAVING · subqueries · indexes

Understand why we need databases, the difference between relational and NoSQL, and core concepts: tables, rows, columns, primary keys, and normalization. Learn the four core SQL operations (CRUD) plus filtering, sorting, and limiting. Practice on a sample SQLite database. Combine data across tables with JOINs, summarize with GROUP BY, filter aggregates with HAVING, and speed things up with indexes.

better-sqlite3 · prepared statements · transactions · schema · migrate · client · type-safe queries · documents · collections · find · aggregation · Atlas

Use SQLite from Node with better-sqlite3 — a fast, synchronous, zero-config SQL database. Cover prepared statements and transactions. Stop writing raw SQL strings. Prisma gives you a schema file, automatic migrations, and a fully typed client — works with SQLite, PostgreSQL, and more. Try a NoSQL approach with MongoDB: schemaless documents, flexible queries, aggregation pipelines, and managed hosting on Atlas.

Why TS · install · types · tsconfig · type · any · unknown · never · narrowing · interface · extends · structural typing · constructor · public/private · readonly · abstract

Add static types to JavaScript with TypeScript. Set up tsc, learn the primitive types, type inference, and the most useful tsconfig flags. Name complex types with type aliases, understand any (escape hatch), unknown (safe any), and never (impossible). Learn type narrowing. When to use interface and when to use type. Learn extends, declaration merging, and how structural typing decides assignability. Use TypeScript's class features: access modifiers, parameter properties, readonly, and abstract classes for shared base behavior.

<T> · constraints · keyof · utility types · Component props · useState · useEffect · events

Write reusable, type-safe abstractions with generics. Master constraints, keyof, and the built-in utility types Partial, Pick, Omit, Record. Type your React components properly: props, state, refs, and event handlers. Just enough TypeScript to make React feel like a proper language.

JSX · props · function components · useState · side effects · cleanup · dependencies · data fetching · Prop drilling · Context.Provider · custom provider · Reducer pattern · dispatch · actions · when over useState

Compose UI from reusable components. Pass data with props, manage local state with useState, and re-render automatically when state changes. Run side effects (data fetches, subscriptions, timers) outside the render cycle. Learn the dependency array, cleanup, and how to fetch data correctly. Stop drilling props through layers. Use Context to share theme, auth, or i18n state — wrapped in a clean custom provider component. Handle complex state with useReducer — a tiny reducer function and dispatched actions. Predictable, testable, and great for multi-step state.

Extracting logic · naming rules · composition · memo · useMemo · useCallback · profiler · file-based routing · layouts · loading · error · dynamic routes · When to reach for Zustand / Redux / Jotai · TanStack Query for server state

Move repeated stateful logic into reusable hook functions. Learn the naming rules, common patterns (useToggle, useFetch, useLocalStorage), and composition. Stop unnecessary re-renders. Learn React.memo, useMemo, useCallback, and how to read the React Profiler — but only optimize when you have actually measured a problem. Master Next.js App Router: folders become routes, layouts wrap pages, dynamic segments handle slugs, and special files give you loading and error UI for free. Decide between local state, Context, and a state library. Compare Zustand, Redux Toolkit, and Jotai briefly, and use TanStack Query for server state.

Trunk-based · Git Flow · feature branches · naming · merge · rebase · conflict markers · tooling · Opening a PR · description · review etiquette · interactive rebase · cherry-pick · reflog · bisect

Pick a branching strategy that fits team size and release cadence. Compare trunk-based with Git Flow, and adopt sane naming conventions. Conflicts are part of working with others. Learn to read conflict markers, choose between merge and rebase, and use VS Code's three-way merge tool. Open clear, reviewable pull requests. Write good PR descriptions, structure commits, leave actionable review comments, and respond gracefully to feedback. Reach for the power tools when you need them: interactive rebase, cherry-pick, reflog for recovery, and bisect for hunting a regression.

WCAG · POUR · screen readers · why it matters · Roles · states · properties · the first rule of ARIA · label · fieldset · errors · keyboard · focus management · alt text · captions · contrast · prefers-reduced-motion

Accessibility is not a nice-to-have. Learn the WCAG framework (POUR), how screen readers consume your page, and the legal/business case. ARIA exists for cases where HTML semantics fall short. Use semantic HTML first; reach for ARIA only when needed. Master the basics: role, aria-label, aria-expanded. Forms are the most accessibility-critical part of your app. Pair labels properly, group with fieldset, announce errors clearly, and manage focus. Make images, video, color, and animation usable for everyone. Write meaningful alt text, caption video, hit contrast ratios, and respect reduced-motion preferences.

Stored · reflected · DOM · escaping · CSP · SameSite cookies · tokens · JWT · session · Prepared statements · ORM · input validation · TLS · env vars · .env · CSP · HSTS · helmet

XSS lets attackers inject scripts that run in your users' browsers. Learn the three flavors, how to escape output, and how Content Security Policy gives defense in depth. Protect authenticated endpoints from CSRF. Use SameSite cookies, CSRF tokens, and understand the trade-offs between session cookies and JWT tokens. SQL injection is decades old and still happening. Always use prepared statements, validate at boundaries, and treat ORM queries with the same care. Encrypt traffic with HTTPS, keep secrets out of git, and harden HTTP responses with the right headers (CSP, HSTS, X-Frame-Options).