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

Learn the structure of an HTML document: DOCTYPE, head/body, and the most common tags. Build a clean foundation before styling or scripting.

strong · em · blockquote · code · pre · sub/sup

Use the right tag for the right meaning. Master inline text elements like strong, em, code, and the typographic helpers blockquote, sub, sup.

href · target · rel · srcset · figure/figcaption

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

Tables are for tabular data. Learn the correct structure (thead/tbody/tfoot), spans, and the small extras that make tables accessible.

input types · label · validation · button

Forms collect user input. Learn the modern input types, the proper label-for pairing, built-in HTML validation, and the right button types.

header · nav · main · article · section · aside · footer

Replace generic <div> soup with semantic elements that describe meaning. Better SEO, better accessibility, easier styling.

Three ways to apply · selectors · specificity

Get the fundamentals right: how CSS attaches to HTML, the main selectors, and how specificity decides which rule wins when several match.

color systems · web fonts · line-height

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.

content · padding · border · margin · box-sizing

Every element is a box made of four layers. Master padding vs margin, box-sizing: border-box, and how negative margins behave.

background-image · gradients · box-shadow

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

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.

display:grid · template · areas · auto-fit

Grid handles 2-D layout — rows and columns together. The right tool for dashboards, magazine layouts, and complex page templates.

viewport · media queries · mobile-first · clamp()

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

Declare variables properly with let and const, understand JavaScript's primitive and object types, and use typeof to inspect values.

if · switch · for · while · ternary

Make decisions and repeat actions: if/else chains, switch, for/of/in, while, and the ternary expression for one-liners.

declaration · arrow · default params · rest/spread

Master the three function forms (declaration, expression, arrow), default and rest parameters, and the spread operator.

map · filter · reduce · find · sort

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

Master JavaScript's most-used data structure: objects. Learn destructuring, the shorthand syntax, Object.keys / values / entries, and immutable updates with spread.

querySelector · classList · innerHTML vs textContent

Reach into the page from JavaScript. Select elements, change content, toggle classes, and create new nodes — without external libraries.

click · input · submit · delegation · preventDefault

Respond to user actions: handle clicks, form input, submissions, and delegate events for dynamic lists. Stop default behaviors when needed.

Promise · async/await · fetch · error handling

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

Run JavaScript outside the browser. Install Node, use the REPL, run scripts, and understand the runtime model and event loop at a high level.

fs · path · os · http

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.

package.json · npm install · scripts · semver

Use npm to manage dependencies, run scripts, and publish your own packages. Understand semver and lockfiles.

routing · middleware · JSON parser · static files

Build real HTTP servers fast with Express. Learn routing, middleware composition, JSON body parsing, and serving static files.

Resources · status codes · CRUD · CORS

Design and implement a REST API: pick correct status codes, model resources around URLs, support CRUD, and enable CORS for browser clients.

Persisting state · read/write JSON · race conditions

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

Understand why we need databases, the difference between relational and NoSQL, and core concepts: tables, rows, columns, primary keys, and normalization.

SELECT · INSERT · UPDATE · DELETE · WHERE · ORDER BY

Learn the four core SQL operations (CRUD) plus filtering, sorting, and limiting. Practice on a sample SQLite database.

JOIN · GROUP BY · HAVING · subqueries · indexes

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

Use SQLite from Node with better-sqlite3 — a fast, synchronous, zero-config SQL database. Cover prepared statements and transactions.

schema · migrate · client · type-safe queries

Stop writing raw SQL strings. Prisma gives you a schema file, automatic migrations, and a fully typed client — works with SQLite, PostgreSQL, and more.

documents · collections · find · aggregation · Atlas

Try a NoSQL approach with MongoDB: schemaless documents, flexible queries, aggregation pipelines, and managed hosting on Atlas.

Why TS · install · types · tsconfig

Add static types to JavaScript with TypeScript. Set up tsc, learn the primitive types, type inference, and the most useful tsconfig flags.

type · any · unknown · never · narrowing

Name complex types with type aliases, understand any (escape hatch), unknown (safe any), and never (impossible). Learn type narrowing.

interface · extends · structural typing

When to use interface and when to use type. Learn extends, declaration merging, and how structural typing decides assignability.

constructor · public/private · readonly · abstract

Use TypeScript's class features: access modifiers, parameter properties, readonly, and abstract classes for shared base behavior.

<T> · constraints · keyof · utility types

Write reusable, type-safe abstractions with generics. Master constraints, keyof, and the built-in utility types Partial, Pick, Omit, Record.

Component props · useState · useEffect · events

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

Compose UI from reusable components. Pass data with props, manage local state with useState, and re-render automatically when state changes.

side effects · cleanup · dependencies · data fetching

Run side effects (data fetches, subscriptions, timers) outside the render cycle. Learn the dependency array, cleanup, and how to fetch data correctly.

Prop drilling · Context.Provider · custom provider

Stop drilling props through layers. Use Context to share theme, auth, or i18n state — wrapped in a clean custom provider component.

Reducer pattern · dispatch · actions · when over useState

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

Move repeated stateful logic into reusable hook functions. Learn the naming rules, common patterns (useToggle, useFetch, useLocalStorage), and composition.

memo · useMemo · useCallback · profiler

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.

file-based routing · layouts · loading · error · dynamic routes

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.

When to reach for Zustand / Redux / Jotai · TanStack Query for server state

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

Pick a branching strategy that fits team size and release cadence. Compare trunk-based with Git Flow, and adopt sane naming conventions.

merge · rebase · conflict markers · tooling

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.

Opening a PR · description · review etiquette

Open clear, reviewable pull requests. Write good PR descriptions, structure commits, leave actionable review comments, and respond gracefully to feedback.

interactive rebase · cherry-pick · reflog · bisect

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

Accessibility is not a nice-to-have. Learn the WCAG framework (POUR), how screen readers consume your page, and the legal/business case.

Roles · states · properties · the first rule of ARIA

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.

label · fieldset · errors · keyboard · focus management

Forms are the most accessibility-critical part of your app. Pair labels properly, group with fieldset, announce errors clearly, and manage focus.

alt text · captions · contrast · prefers-reduced-motion

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

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.

SameSite cookies · tokens · JWT · session

Protect authenticated endpoints from CSRF. Use SameSite cookies, CSRF tokens, and understand the trade-offs between session cookies and JWT tokens.

Prepared statements · ORM · input validation

SQL injection is decades old and still happening. Always use prepared statements, validate at boundaries, and treat ORM queries with the same care.

TLS · env vars · .env · CSP · HSTS · helmet

Encrypt traffic with HTTPS, keep secrets out of git, and harden HTTP responses with the right headers (CSP, HSTS, X-Frame-Options).