Focus mode on

Web cheatsheet98 modules13 phasesLive previews and full code

How websites work,from one tag to a full page

Name: How Websites Work: From Raw HTML to Mastery
Author: Shree Kumar Sharma

Start with a single HTML element, learn the three ways to add CSS and JavaScript, build media cards, navbars and heroes, assemble a full single page site, then see why Tailwind, Bootstrap, React and Next.js came up and ship it all in Docker.

By Shree Kumar Sharma, with Claude Design, for Backend Engineering. Progress is saved in this browser only.

Start at module 01 Build a full page Dictionary

HTML structure

<header>

<section>

<article>

<footer>

CSS style

JavaScript behaviour Saved

HTMLCSSJavaScriptReactNext.jsTailwindBootstrapSassDockerViteTypeScriptGit

Phase 00, module 00

Before you start

The web dictionary

Every word this guide uses, explained in plain words, in technical terms, and with an everyday comparison.

Module 00 of 97, phase 00

A word for everything

The web dictionary

Mark as doneCompleted

A catalog of every keyword in this guide. Each entry says what the word means in plain language, what it means technically, and what it is like in everyday life, then links to the module that teaches it.

In detail

Use this module as a reference rather than a lesson. Filter by kind to see only HTML, CSS, JavaScript or tooling words, or type to find one. Tags, properties and functions in the code examples across this page link back to the module that explains them.

Search the dictionary

Client and server

Web

In plain words: Your browser asks, a computer somewhere answers.
Technically: The client sends HTTP requests; the server returns responses with status codes, headers and a body.
Think of it as: A customer ordering at a counter and the kitchen sending the food out.

Learn it in module 01How the web works

URL

Web

In plain words: The full address of a page or file.
Technically: A string with scheme, host, optional port, path, query and fragment, parsed by the URL API.
Think of it as: A postal address down to the flat number.

Learn it in module 02URLs, domains and DNS

DNS

Web

In plain words: The internet's phone book.
Technically: The Domain Name System resolves a host name to an IP address through cached, hierarchical lookups.
Think of it as: Looking up a friend's name to find their phone number.

Learn it in module 02URLs, domains and DNS

HTTP

Web

In plain words: The language browsers and servers use to talk.
Technically: A request response protocol with methods (GET, POST), status codes (200, 404) and headers; HTTPS adds TLS encryption.
Think of it as: The polite script a caller and receptionist follow on the phone.

Learn it in module 03HTTP requests, responses and status codes

Rendering

Web

In plain words: How the browser turns code into pixels.
Technically: Parsing HTML to the DOM and CSS to the CSSOM, building a render tree, then layout, paint and composite.
Think of it as: Reading a recipe, gathering ingredients, then plating the dish.

Learn it in module 04How browsers render a page

DevTools

Tooling

In plain words: The browser's built in toolbox for looking inside a page.
Technically: Panels for Elements, Console, Network, Performance and Application to inspect and debug a live page.
Think of it as: A mechanic's diagnostic computer plugged into a car.

Learn it in module 05Browser developer tools

HTML

In plain words: The words and structure of a page.
Technically: HyperText Markup Language: nested elements written as tags that the browser parses into a document tree.
Think of it as: The frame and rooms of a house before paint or furniture.

Learn it in module 07Anatomy of an HTML document

Element

HTML

In plain words: One building block of a page, like a heading or a link.
Technically: A start tag, content and end tag (or a void tag) forming one node in the DOM.
Think of it as: A single brick in a wall.

Learn it in module 08Elements, attributes and nesting

Attribute

HTML

In plain words: Extra settings written inside a tag.
Technically: A name value pair on an element, such as href, src, alt or class, readable from JavaScript.
Think of it as: The label on a parcel saying where it goes and how to handle it.

Learn it in module 08Elements, attributes and nesting

Semantic HTML

HTML

In plain words: Using tags that say what content is, not how it looks.
Technically: Elements such as header, nav, main, article and footer that carry meaning for assistive tech and search engines.
Think of it as: Labelled boxes when moving house instead of plain cartons.

Learn it in module 17Semantic layout elements

Alt text

HTML

In plain words: A short description of an image in words.
Technically: The alt attribute on img, read by screen readers and shown when the image fails to load.
Think of it as: Describing a photo to a friend over the phone.

Learn it in module 11Images, figures and responsive images

Form

HTML

In plain words: The part of a page where people type or choose things.
Technically: A form element grouping labelled controls whose values are submitted as name value pairs.
Think of it as: A paper application form with boxes and tick boxes.

Learn it in module 15Forms and inputs

Meta tags

HTML

In plain words: Hidden notes in the head that describe the page.
Technically: Elements such as meta description, viewport and Open Graph tags read by browsers, search engines and social sites.
Think of it as: The blurb on the back cover of a book.

Learn it in module 18Meta tags, SEO and social cards

Accessibility

HTML

In plain words: Making pages work for everyone, including people using assistive tools.
Technically: Practices covering semantic markup, labels, focus order, contrast and ARIA so content is perceivable and operable.
Think of it as: Ramps and lifts alongside the stairs.

Learn it in module 19Accessibility basics

CSS

In plain words: The rules that decide how a page looks.
Technically: Cascading Style Sheets: selectors paired with declarations applied through the cascade.
Think of it as: Paint, wallpaper and furniture placement in the house.

Learn it in module 20Inline, internal and external CSS

Inline, internal, external

CSS

In plain words: Three places to write styles or scripts: on the tag, in the page, or in a separate file.
Technically: A style attribute, a style or script element in the document, or a linked .css or .js file cached by the browser.
Think of it as: A sticky note on one item, a notice on the room door, or a rulebook for the whole building.

Learn it in module 20Inline, internal and external CSS

Selector

CSS

In plain words: The part of a CSS rule that picks which elements to style.
Technically: A pattern of types, classes, ids, attributes, combinators and pseudo classes matched against the DOM.
Think of it as: Calling out everyone wearing a red hat in a crowd.

Learn it in module 21Selectors

Specificity

CSS

In plain words: The tie breaker when two rules want to style the same thing.
Technically: A weight computed from ids, classes and types; higher weight wins, and later rules win ties.
Think of it as: A manager's instruction beating a general notice.

Learn it in module 22Specificity, the cascade and inheritance

Cascade

CSS

In plain words: How the browser decides which style finally applies.
Technically: The algorithm ordering declarations by origin, importance, layer, specificity and source order.
Think of it as: A queue of instructions where the most specific and most recent wins.

Learn it in module 22Specificity, the cascade and inheritance

Box model

CSS

In plain words: Every element is a box with stuffing, padding, a border and space around it.
Technically: Content, padding, border and margin, sized by box-sizing content-box or border-box.
Think of it as: A framed picture: the photo, the mount, the frame and the gap on the wall.

Learn it in module 23The box model

Units

CSS

In plain words: The measurements CSS uses, like pixels or percentages.
Technically: Absolute (px), relative (em, rem, %), viewport (vw, vh, dvh) and container (cqi) lengths.
Think of it as: Measuring in centimetres versus saying half the table.

Learn it in module 24Units and sizing

Flexbox

CSS

In plain words: A way to line things up in a row or a column.
Technically: A one dimensional layout model controlled with justify-content, align-items, gap and flex on children.
Think of it as: Books on a shelf sliding to share the space.

Learn it in module 31Flexbox

Grid

CSS

In plain words: A way to lay things out in rows and columns at once.
Technically: A two dimensional layout model with tracks, fr units, template areas and spanning items.
Think of it as: An ice cube tray or a spreadsheet.

Learn it in module 32CSS Grid

Media query

CSS

In plain words: Styles that only apply on certain screens or settings.
Technically: An @media rule testing width, orientation, prefers-color-scheme or prefers-reduced-motion.
Think of it as: Clothes you only wear when it rains.

Learn it in module 30Responsive design and media queries

Custom property

CSS

In plain words: A named value you can reuse across styles.
Technically: A CSS variable such as --accent declared on a selector, inherited, and read with var().
Think of it as: A paint colour code you write once and reuse in every room.

Learn it in module 29Custom properties (CSS variables)

Dark mode

CSS

In plain words: A darker colour scheme that is easier on the eyes at night.
Technically: Swapping token values under prefers-color-scheme or a data-theme attribute, with color-scheme set for controls.
Think of it as: Switching a room to evening lighting.

Learn it in module 37Dark mode and theming

Transition and animation

CSS

In plain words: Smooth change from one look to another.
Technically: transition interpolates property changes; @keyframes defines multi step animations run by animation.
Think of it as: A dimmer switch rather than a light switch.

Learn it in module 35Transitions and transforms

JavaScript

In plain words: The code that makes a page react and change.
Technically: A dynamic language run by the browser's engine with access to the DOM and Web APIs.
Think of it as: The wiring and switches that make the house do things.

Learn it in module 39Inline, internal and external JavaScript

defer and async

JavaScript

In plain words: Ways to load scripts without freezing the page.
Technically: defer runs after parsing in order; async runs as soon as it downloads; type=module defers by default.
Think of it as: Ordering takeaway to arrive after you finish setting the table.

Learn it in module 39Inline, internal and external JavaScript

Variable

JavaScript

In plain words: A named box that holds a value.
Technically: A binding declared with const or let, block scoped, holding primitives or references.
Think of it as: A labelled jar on a shelf.

Learn it in module 40Variables and data types

Function

JavaScript

In plain words: A reusable set of steps with a name.
Technically: A callable object with parameters, a body and a return value; arrow functions keep the outer this.
Think of it as: A recipe you can follow again whenever you like.

Learn it in module 42Functions, scope and closures

Array and object

JavaScript

In plain words: Lists of things and bundles of named things.
Technically: Arrays are ordered, index based collections; objects map string keys to values.
Think of it as: A shopping list and a filled in ID card.

Learn it in module 43Arrays, objects and JSON

Class

JavaScript

In plain words: A blueprint for making similar objects.
Technically: Syntax over prototypes with a constructor, methods, fields and inheritance via extends.
Think of it as: A cookie cutter producing many identical cookies.

Learn it in module 45Classes, objects and this

Module

JavaScript

In plain words: A file that shares only what it chooses to.
Technically: An ES module using import and export, loaded with type=module and scoped to itself.
Think of it as: A shop that only shows what is in the window.

Learn it in module 46ES modules: import and export

Promise and async/await

JavaScript

In plain words: A way to wait for slow work without stopping everything else.
Technically: A Promise represents a future value; await pauses an async function until it settles.
Think of it as: A restaurant buzzer that vibrates when your order is ready.

Learn it in module 47Async code, promises and async await

DOM

In plain words: The live, editable version of the page that JavaScript sees.
Technically: The Document Object Model: a tree of nodes with methods to query, create, change and remove elements.
Think of it as: A family tree you can edit while the family is at dinner.

Learn it in module 49The DOM and selecting elements

querySelector

DOM

In plain words: Finds an element on the page using a CSS selector.
Technically: document.querySelector returns the first matching element or null; querySelectorAll returns a NodeList.
Think of it as: Searching a crowd for the first person in a red hat.

Learn it in module 49The DOM and selecting elements

Event

DOM

In plain words: Something that happened, like a click or a key press.
Technically: An Event object dispatched to targets and bubbling up; handled with addEventListener.
Think of it as: A doorbell ringing and whoever is listening answering.

Learn it in module 51Events and event delegation

Event delegation

DOM

In plain words: One listener on a parent handles clicks for many children.
Technically: Using bubbling and event.target.closest() to handle events from dynamic children at a common ancestor.
Think of it as: One receptionist taking calls for every office.

Learn it in module 51Events and event delegation

fetch

DOM

In plain words: Asks a server for data without reloading the page.
Technically: A promise based API that sends HTTP requests and returns a Response to read as JSON or text.
Think of it as: Sending a text and getting a reply without hanging up the call.

Learn it in module 53Fetch API and JSON

JSON

DOM

In plain words: A plain text format for sending data.
Technically: JavaScript Object Notation, parsed with JSON.parse and produced with JSON.stringify.
Think of it as: A standard form everyone knows how to fill and read.

Learn it in module 53Fetch API and JSON

localStorage

DOM

In plain words: A small notebook the browser keeps for each site.
Technically: Synchronous key value string storage per origin that persists across sessions.
Think of it as: A locker at the gym that keeps your things until you come back.

Learn it in module 54localStorage, sessionStorage, cookies and IndexedDB

IntersectionObserver

DOM

In plain words: Tells you when an element scrolls into view.
Technically: An API that reports visibility changes of targets relative to a root, used for lazy loading and reveals.
Think of it as: A doorbell camera that pings when someone walks up.

Learn it in module 55IntersectionObserver, ResizeObserver and MutationObserver

Card

Component

In plain words: A boxed summary with a picture, title and action.
Technically: A reusable component, usually an article with media, heading, text and a link stretched over it.
Think of it as: A trading card: picture on top, facts underneath.

Learn it in module 57Media items and card components

Hamburger menu

Component

In plain words: The three line button that opens a menu on small screens.
Technically: A button with aria-expanded controlling a navigation panel shown and hidden by JavaScript.
Think of it as: A folded map you open only when you need it.

Learn it in module 58Navbar and hamburger menu

Hero section

Component

In plain words: The big welcome area at the top of a page.
Technically: A first viewport section with headline, supporting text, actions and often an illustration.
Think of it as: The shop window display.

Learn it in module 59Hero sections

Modal dialog

Component

In plain words: A box that pops up over the page and asks for attention.
Technically: The dialog element opened with showModal, trapping focus and closing on Escape.
Think of it as: A waiter stopping by your table to ask one question.

Learn it in module 61Modals with the dialog element

Parallax

Component

In plain words: Layers that move at different speeds as you scroll.
Technically: Translating elements by a fraction of scroll position to create depth, often with smooth scrolling.
Think of it as: Looking out of a train window: near trees rush by, mountains drift.

Learn it in module 69Lenis smooth scrolling and parallax

Sass

Library

In plain words: CSS with extra powers like nesting and loops.
Technically: A preprocessor compiling SCSS with variables, mixins, partials and functions into CSS.
Think of it as: A kitchen gadget that preps ingredients faster, but the dish is the same.

Learn it in module 72Sass and preprocessors

Tailwind CSS

Library

In plain words: Styling by stacking small ready made classes in your HTML.
Technically: A utility first framework generating only the classes you use, configured with design tokens.
Think of it as: Lego bricks: many tiny pieces snapped together.

Learn it in module 73Tailwind CSS (utility first)

Bootstrap

Library

In plain words: A ready made kit of styled components and a grid.
Technically: A component framework with a 12 column grid, utilities and JavaScript plugins, themed through Sass variables.
Think of it as: Flat pack furniture: quick to assemble, recognisable look.

Learn it in module 74Bootstrap and component frameworks

React

Framework

In plain words: A library for building pages from reusable pieces that update themselves.
Technically: A UI library where components are functions of props and state, rendered through a virtual DOM.
Think of it as: A spreadsheet: change one cell and everything depending on it updates.

Learn it in module 79React components, JSX and props

Component

Framework

In plain words: A self contained piece of UI you can reuse.
Technically: A function returning JSX that receives props and may hold state with hooks.
Think of it as: A prefabricated window you can install in any wall.

Learn it in module 79React components, JSX and props

State and hooks

Framework

In plain words: Data that, when it changes, makes the screen change.
Technically: useState stores component state; useEffect syncs with outside systems after render.
Think of it as: A thermostat: change the setting and the heating reacts.

Learn it in module 80State and effects with hooks

Next.js

Framework

In plain words: React with routing, server rendering and deployment built in.
Technically: A React framework with file based routing, server components, data fetching and image optimisation.
Think of it as: A furnished flat instead of an empty one.

Learn it in module 82Why Next.js

SSR, SSG, CSR

Framework

In plain words: Where and when the page HTML gets built.
Technically: Server side rendering per request, static generation at build time, or client side rendering in the browser.
Think of it as: Cooked to order, cooked in the morning and kept warm, or a meal kit you cook at home.

Learn it in module 84CSR, SSR, SSG and ISR

npm

Tooling

In plain words: The app store for JavaScript code libraries.
Technically: The Node package registry and CLI that installs dependencies listed in package.json.
Think of it as: A hardware store for building parts.

Learn it in module 86npm, packages and package.json

Bundler

Tooling

In plain words: A tool that packs your files into fewer, faster ones.
Technically: Vite or webpack resolving imports, transforming code and outputting optimised assets with a dev server.
Think of it as: Packing a suitcase efficiently before a trip.

Learn it in module 87Vite and bundlers

Git

Tooling

In plain words: A time machine for your code.
Technically: A distributed version control system tracking commits, branches and merges.
Think of it as: Saving numbered drafts of an essay you can go back to.

Learn it in module 90Git and GitHub

Core Web Vitals

Tooling

In plain words: Scores that measure how fast and stable a page feels.
Technically: LCP for loading, INP for responsiveness and CLS for visual stability, measured in the field.
Think of it as: A car's 0 to 100 time, steering response and ride smoothness.

Learn it in module 91Web performance and Core Web Vitals

Docker

Tooling

In plain words: A box that packs your site and everything it needs to run anywhere.
Technically: A container image built from a Dockerfile, often serving static files with nginx.
Think of it as: A shipping container that fits any ship, train or truck.

Learn it in module 93Containerising a website with Docker

PWA

Web

In plain words: A website that can be installed and work offline like an app.
Technically: A progressive web app with a manifest, HTTPS and a service worker caching assets.
Think of it as: A food truck that can park anywhere and still serve.

Learn it in module 95Progressive web apps and service workers

Phase 01, modules 01 to 06

How the web works

Browsers, servers and the trip in between

What happens between typing an address and seeing a page, and the tools you use to watch it happen.

Module 01 of 97, phase 01

The trip a page takes

How the web works

Mark as doneCompleted

A browser asks a server for a file over the internet, the server answers, and the browser turns the answer into the page you see. Everything else in web development builds on that loop.

In detail

The client is the browser on your device. The server is a computer that stores and sends files or builds them on demand. They talk using HTTP, find each other using DNS and IP addresses, and keep the conversation private with TLS. A single page usually needs dozens of requests: the HTML first, then the CSS, JavaScript, images and fonts it references.

01You type an addressThe browser reads the URL and decides what to ask for.
02DNS finds the serverThe domain becomes an IP address, usually from a cache.
03A secure line opensTCP and TLS connect the browser and server privately.
04Request and responseGET /index.html goes out, 200 OK and HTML come back.
05More files followCSS, JavaScript, images and fonts referenced by the HTML.
06The page is drawnParse, style, lay out, paint and composite on screen.

Module 02 of 97, phase 01

Addresses and phone books

URLs, domains and DNS

Mark as doneCompleted

A URL tells the browser which protocol, which server and which file to ask for. DNS turns the human friendly domain into the numeric IP address of that server.

In detail

Read a URL left to right: scheme (https), host (example.com), optional port, path (/blog/post), query (?page=2) and fragment (#comments). The fragment never reaches the server; the browser uses it to scroll. DNS lookups are cached at several levels, which is why a changed record can take time to reach everyone.

url-anatomy.js

JavaScript

const url = new URL("https://shop.example.com:8443/blog/post?page=2#comments");url.hostname; // "shop.example.com"url.searchParams.get("page"); // "2"

const url = new URL("https://shop.example.com:8443/blog/post?page=2#comments"); console.log(url.protocol);   // "https:"console.log(url.hostname);   // "shop.example.com"console.log(url.port);       // "8443"console.log(url.pathname);   // "/blog/post"console.log(url.search);     // "?page=2"console.log(url.hash);       // "#comments" // Edit query parameters safely instead of building strings by handurl.searchParams.set("page", "3");url.searchParams.append("tag", "css & html");console.log(url.toString());// https://shop.example.com:8443/blog/post?page=3&tag=css+%26+html#comments

Why it matters URL and URLSearchParams handle encoding for you, so an ampersand inside a value cannot break the query.

Module 03 of 97, phase 01

Ask nicely, get an answer

HTTP requests, responses and status codes

Mark as doneCompleted

HTTP is the language browsers and servers speak. A request has a method, a path and headers; a response has a status code, headers and a body.

In detail

GET reads, POST creates, PUT and PATCH update, DELETE removes. Status codes group by their first digit: 2xx success, 3xx redirect, 4xx the client made a mistake, 5xx the server failed. Headers carry everything else: content type, caching rules, cookies and security policies.

request.http

Shell

GET /blog/post HTTP/1.1Host: example.comAccept: text/html

GET /blog/post HTTP/1.1Host: example.comAccept: text/htmlAccept-Language: en-IN,en;q=0.9User-Agent: Mozilla/5.0 HTTP/1.1 200 OKContent-Type: text/html; charset=utf-8Cache-Control: public, max-age=300Content-Length: 5120 <!doctype html><html lang="en">  <head><title>Blog post</title></head>  <body>...</body></html>

Why it matters The blank line separates headers from the body. Everything before it is metadata about the message.

Module 04 of 97, phase 01

From text to pixels

How browsers render a page

Mark as doneCompleted

The browser parses HTML into the DOM, CSS into the CSSOM, combines them into a render tree, calculates layout, then paints pixels and composites layers.

In detail

This sequence is called the critical rendering path. CSS blocks rendering because the browser needs styles before it can paint; scripts without defer block parsing because they might change the document. Understanding the path explains most performance advice: load CSS early, defer scripts, and avoid forcing layout repeatedly from JavaScript.

01Parse HTMLBytes become tokens, tokens become the DOM tree.
02Parse CSSStylesheets become the CSSOM; this blocks rendering.
03Render treeVisible nodes combined with their computed styles.
04LayoutExact position and size of every box is calculated.
05PaintText, colours, borders and images become pixels.
06CompositeLayers are combined on the GPU; transforms happen here cheaply.

Module 05 of 97, phase 01

X-ray vision for pages

Browser developer tools

Mark as doneCompleted

Every browser ships developer tools: an Elements panel to inspect and edit the DOM and CSS live, a Console for JavaScript, a Network panel for requests, and panels for performance and accessibility.

In detail

Press F12 or Ctrl Shift I. Edit a style in Elements and see it instantly, read errors in Console, and filter Network by type to see what loaded, how big it was and how long it took. Lighthouse audits performance, accessibility and SEO in one click. Device mode previews phones and slow networks.

console-tricks.js

JavaScript

console.table([{ name: "Ada", role: "admin" }]);$0.style.outline = "2px solid red"; // $0 is the selected element

// Pretty print arrays of objects as a tableconsole.table([  { name: "Ada", role: "admin" },  { name: "Linus", role: "editor" },]); // Group related logsconsole.group("Cart");console.log("items", 3);console.warn("coupon expired");console.groupEnd(); // Measure how long something takesconsole.time("render");document.querySelectorAll("li").forEach((li) => li.classList.add("seen"));console.timeEnd("render"); // In the Elements panel, $0 is the element you selected// $0.style.outline = "2px solid red";

Why it matters console.table and console.time turn guessing into reading. They exist in every modern browser.

Module 06 of 97, phase 01

A desk ready for work

Editor and project setup

Mark as doneCompleted

A code editor, a folder with index.html, styles.css and script.js, and a live preview server are all you need to start building.

In detail

VS Code with the Live Server or Live Preview extension reloads the page on every save. Keep files lowercase with hyphens, put images in an assets folder, and always open the page through a local server rather than the file system, because modules and fetch do not work from file URLs.

my-first-site

my-first-site
index.htmlhome page, the entry point
about.htmla second page
css
style.cssexternal stylesheet
js
app.jsloaded with defer
assets
hero.webpoptimised image
logo.svgscalable logo
favicon.ico
README.mdwhat the project is

Lowercase names with hyphens avoid broken links on case sensitive servers.

terminal

Shell

mkdir my-site && cd my-sitetouch index.html styles.css script.jsnpx serve .

# create a project folder with the three core filesmkdir my-site && cd my-sitemkdir -p assets/images assets/fontstouch index.html styles.css script.js # serve it locally (any one of these works)npx serve .python3 -m http.server 8080 # open http://localhost:3000 (serve) or http://localhost:8080 (python)

Why it matters A local server mirrors how a real host serves files, so relative paths, modules and fetch behave correctly.

Phase 02, modules 07 to 19

The skeleton

HTML foundations

Documents, elements, media, forms and the semantic structure every page is built on.

Module 07 of 97, phase 02

The page's birth certificate

Anatomy of an HTML document

Mark as doneCompleted

Every page starts with a doctype, an html element with a language, a head for information about the page, and a body for what people see.

In detail

The doctype switches the browser to standards mode. The head holds the character set, viewport, title, description and links to CSS. The body holds content. Indent nested elements, close every element that needs closing, and validate with the W3C validator when something looks wrong.

index.html

HTML

<!doctype html><html lang="en">  <head><meta charset="utf-8"><title>My page</title></head>  <body><h1>Hello web</h1></body></html>

<!doctype html><html lang="en">  <head>    <meta charset="utf-8" />    <meta name="viewport" content="width=device-width, initial-scale=1" />    <title>My first page</title>    <meta name="description" content="A tiny page to learn the anatomy of HTML." />    <link rel="icon" href="/favicon.svg" />    <link rel="stylesheet" href="styles.css" />    <script src="script.js" defer></script>  </head>  <body>    <header>      <h1>Hello web</h1>    </header>    <main>      <p>This paragraph lives inside the main landmark.</p>    </main>    <footer>      <p>&copy; 2026 My site</p>    </footer>  </body></html>

Why it matters The viewport meta tag is what makes a page responsive on phones. Without it, mobile browsers render a zoomed out desktop layout.

Module 08 of 97, phase 02

Words in labelled boxes

Elements, attributes and nesting

Mark as doneCompleted

An element is an opening tag, content and a closing tag. Attributes inside the opening tag add information such as an id, a class, a link target or alternative text.

In detail

Void elements such as img, input, br and meta have no closing tag. Elements nest like boxes inside boxes and must close in reverse order. Global attributes work on any element: id must be unique, class can repeat, hidden hides, lang sets language, and data-* stores your own values for scripts.

elements.html

HTML

<p class="note" id="intro" data-level="beginner">Read <a href="/guide">the guide</a>.</p><img src="cat.jpg" alt="A cat asleep on a keyboard" />

<!-- element = opening tag + content + closing tag --><p class="note" id="intro" data-level="beginner">  Start with <a href="/guide" title="Open the guide">the guide</a>.</p> <!-- void elements have no closing tag --><img src="cat.jpg" alt="A cat asleep on a keyboard" width="640" height="420" /><br /><input type="email" name="email" required /> <!-- boolean attributes are on when present --><details open>  <summary>More info</summary>  <p hidden>This paragraph is hidden until a script reveals it.</p></details> <!-- data attributes are read in JavaScript as element.dataset.level -->

Why it matters data-* attributes are the clean bridge between HTML and JavaScript. Scripts read them with element.dataset.

Module 09 of 97, phase 02

Say what you mean

Headings, paragraphs and text semantics

Mark as doneCompleted

Headings h1 to h6 build an outline, paragraphs hold prose, and inline elements such as strong, em, code, abbr and time add meaning that browsers, search engines and screen readers understand.

In detail

Use one h1 per page and never skip levels just for size; style with CSS instead. strong means importance, em means emphasis, b and i are only visual. blockquote and cite quote sources, pre keeps whitespace, and time carries a machine readable date.

article.html

HTML

<h2>Why semantics matter</h2><p>Search engines read <strong>meaning</strong>, not just <em>looks</em>.</p>

<article>  <h2>Why semantics matter</h2>  <p>    Search engines read <strong>meaning</strong>, not just <em>looks</em>.    The <abbr title="HyperText Markup Language">HTML</abbr> you choose tells them what matters.  </p>   <h3>A quote worth keeping</h3>  <blockquote cite="https://www.w3.org/">    <p>The power of the Web is in its universality.</p>  </blockquote>  <p>Tim Berners-Lee, <cite>W3C</cite></p>   <h3>Code and dates</h3>  <p>Run <code>npm run build</code> before you deploy.</p>  <p>Published <time datetime="2026-10-04">4 October 2026</time>.</p>  <pre>  keeps   its     spacing</pre></article>

Why it matters Screen reader users jump between headings to scan a page. A skipped level breaks that outline.

Module 10 of 97, phase 02

Doors between pages

Links and navigation

Mark as doneCompleted

The anchor element links to other pages, to sections of the same page, to email and phone, and to downloads.

In detail

Use absolute URLs for other sites, relative URLs inside your site, and #id to jump within a page. Add rel="noopener" with target="_blank" so the new tab cannot control yours. Write link text that makes sense alone; click here tells nobody where they are going.

links.html

HTML

<a href="/pricing">See pricing</a><a href="#faq">Jump to the FAQ</a><a href="https://developer.mozilla.org" target="_blank" rel="noopener">MDN</a>

<nav aria-label="Primary">  <a href="/">Home</a>  <a href="/pricing" aria-current="page">Pricing</a>  <a href="#faq">Jump to the FAQ</a></nav> <!-- external link in a new tab --><a href="https://developer.mozilla.org" target="_blank" rel="noopener noreferrer">MDN Web Docs</a> <!-- email, phone and download --><a href="mailto:hello@example.com?subject=Hi">Email us</a><a href="tel:+911234567890">Call us</a><a href="/files/brochure.pdf" download>Download the brochure (PDF, 2 MB)</a> <section id="faq">  <h2>FAQ</h2></section>

Why it matters aria-current="page" tells assistive technology which link is the current page, and gives CSS a hook to style it.

Module 11 of 97, phase 02

Pictures that load smart

Images, figures and responsive images

Mark as doneCompleted

The img element shows an image with alternative text. srcset, sizes and picture let the browser choose the right file for each screen and format.

In detail

Always write alt text that describes purpose, or alt="" for decoration. Set width and height so the page does not jump while loading. Serve modern formats such as AVIF and WebP through picture with a JPEG fallback, and add loading="lazy" for images below the fold.

Live previewrendered from the code below

figure.html

HTML

<figure>  <img src="lake.jpg" alt="A calm lake at sunrise" width="800" height="533" loading="lazy" />  <figcaption>Sunrise over the lake</figcaption></figure>

<figure class="shot">  <picture>    <source srcset="lake-800.avif 800w, lake-1600.avif 1600w" type="image/avif" />    <source srcset="lake-800.webp 800w, lake-1600.webp 1600w" type="image/webp" />    <img      src="lake-800.jpg"      srcset="lake-800.jpg 800w, lake-1600.jpg 1600w"      sizes="(max-width: 700px) 100vw, 700px"      alt="A calm lake at sunrise with mist over the water"      width="800"      height="533"      loading="lazy"      decoding="async"    />  </picture>  <figcaption>Sunrise over the lake, shot on a phone.</figcaption></figure>

Why it matters sizes tells the browser how wide the image will display, so it can pick the smallest file from srcset that still looks sharp.

Module 12 of 97, phase 02

Sound and motion built in

Audio, video and embeds

Mark as doneCompleted

The video and audio elements play media natively with controls, captions and multiple sources. iframe embeds other pages such as maps and players.

In detail

Give video a poster, provide WebM and MP4 sources, and add a track element with captions. Autoplay only works muted. For iframes set a title for accessibility, loading="lazy" and a sandbox when the content is not yours.

media.html

HTML

<video controls width="640" poster="intro.jpg">  <source src="intro.webm" type="video/webm" />  <source src="intro.mp4" type="video/mp4" /></video>

<video controls playsinline width="640" height="360" poster="intro-poster.jpg" preload="metadata">  <source src="intro.webm" type="video/webm" />  <source src="intro.mp4" type="video/mp4" />  <track kind="captions" src="intro.en.vtt" srclang="en" label="English" default />  Your browser does not support video. <a href="intro.mp4">Download it</a>.</video> <audio controls src="podcast-episode-1.mp3">  <a href="podcast-episode-1.mp3">Download the episode</a></audio> <iframe  title="Office location on a map"  src="https://www.openstreetmap.org/export/embed.html?bbox=77.2,28.6,77.3,28.7"  width="600"  height="400"  loading="lazy"  sandbox="allow-scripts allow-same-origin"></iframe>

Why it matters preload="metadata" loads only the duration and first frame, so a page with several videos stays fast.

Module 13 of 97, phase 02

Things in order, or not

Lists

Mark as doneCompleted

Unordered lists group items without order, ordered lists number them, and description lists pair terms with explanations.

In detail

Navigation menus, card grids and feature lists are usually ul elements styled with CSS, because a screen reader announces how many items there are. ol accepts start and reversed. dl suits glossaries and key value details.

lists.html

HTML

<ul><li>HTML</li><li>CSS</li><li>JavaScript</li></ul><ol><li>Write</li><li>Test</li><li>Ship</li></ol>

<ul class="stack">  <li>HTML for structure</li>  <li>CSS for style</li>  <li>JavaScript for behaviour</li></ul> <ol start="1">  <li>Write the markup</li>  <li>Style it</li>  <li>Add interaction</li></ol> <dl>  <dt>DOM</dt>  <dd>The live tree of objects the browser builds from HTML.</dd>  <dt>CSSOM</dt>  <dd>The same idea for styles.</dd></dl>

Why it matters A list is announced with its length, which helps people know how much is coming before they listen to it all.

Module 14 of 97, phase 02

Rows and columns that mean something

Tables for tabular data

Mark as doneCompleted

Tables present data in rows and columns with headers, a caption and optional groups. They are for data, never for page layout.

In detail

Use thead, tbody and tfoot, mark header cells with th and a scope, and add a caption that describes the table. Two tone rows with nth-child make long tables easy to follow, and wrapping the table in a scrollable container keeps it usable on phones.

Live previewrendered from the code below

Plans and what they include
Plan	Price	Projects
Free	0	1
Pro	12	10
Team	49	Unlimited

pricing-table.html

HTML

<table>  <caption>Plans</caption>  <thead><tr><th scope="col">Plan</th><th scope="col">Price</th></tr></thead>  <tbody><tr><th scope="row">Free</th><td>0</td></tr></tbody></table>

<table class="plans">  <caption>Plans and what they include</caption>  <thead>    <tr>      <th scope="col">Plan</th>      <th scope="col">Price per month</th>      <th scope="col">Projects</th>    </tr>  </thead>  <tbody>    <tr><th scope="row">Free</th><td>0</td><td>1</td></tr>    <tr><th scope="row">Pro</th><td>12</td><td>10</td></tr>    <tr><th scope="row">Team</th><td>49</td><td>Unlimited</td></tr>  </tbody></table> <style>  .plans { border-collapse: collapse; width: 100%; }  .plans th, .plans td { padding: 8px 12px; text-align: left; }  .plans tbody tr:nth-child(even) { background: #eef4ff; }  .plans thead { background: #1d63ed; color: white; }</style>

Why it matters scope tells assistive technology whether a header labels a column or a row, so each cell is read with the right header.

Module 15 of 97, phase 02

Asking people for things

Forms and inputs

Mark as doneCompleted

Forms collect input with labelled controls and send it to a server or to JavaScript. HTML gives you text, email, number, date, checkbox, radio, select, file and more for free.

In detail

Every input needs a label linked by for and id. Group related controls with fieldset and legend. The type attribute changes the mobile keyboard and adds built in checks, and autocomplete hints let browsers fill details for people.

Live previewrendered from the code below

signup.html

HTML

<label for="email">Email</label><input id="email" name="email" type="email" autocomplete="email" required />

<form action="/signup" method="post" class="signup">  <label for="name">Full name</label>  <input id="name" name="name" autocomplete="name" required />   <label for="email">Email</label>  <input id="email" name="email" type="email" autocomplete="email" required />   <fieldset>    <legend>Plan</legend>    <label><input type="radio" name="plan" value="free" checked /> Free</label>    <label><input type="radio" name="plan" value="pro" /> Pro</label>  </fieldset>   <label for="role">Role</label>  <select id="role" name="role">    <option>Developer</option>    <option>Designer</option>  </select>   <label><input type="checkbox" name="terms" required /> I accept the terms</label>  <button type="submit">Create account</button></form>

Why it matters Clicking a label focuses or toggles its control, which doubles the click target for touch users.

Module 16 of 97, phase 02

Catch mistakes before they leave

Built in form validation

Mark as doneCompleted

HTML validates many inputs without JavaScript: required, type, min, max, minlength, maxlength and pattern. CSS can style valid and invalid states.

In detail

Native validation blocks submit and shows a message in the person's language. Style errors with :user-invalid so fields only turn red after someone interacts. Server side validation is still required, because anyone can bypass the browser.

validation.html

HTML

<input type="text" name="pin" pattern="[0-9]{6}" title="Six digits" required />

<form class="checkout">  <label for="pin">PIN code</label>  <input id="pin" name="pin" inputmode="numeric" pattern="[0-9]{6}" title="Enter six digits" required />   <label for="qty">Quantity</label>  <input id="qty" name="qty" type="number" min="1" max="10" value="1" />   <label for="note">Note</label>  <textarea id="note" name="note" maxlength="200"></textarea>   <button>Place order</button></form> <style>  input:user-invalid,  textarea:user-invalid {    border-color: #d93025;    background: #fff5f5;  }  input:user-valid {    border-color: #1e8e3e;  }</style>

Why it matters inputmode="numeric" shows a number pad on phones while keeping the value a string, which suits codes that can start with zero.

Module 17 of 97, phase 02

Rooms with names

Semantic layout elements

Mark as doneCompleted

header, nav, main, article, section, aside and footer describe the regions of a page. They look like div by default but carry meaning.

In detail

Landmarks let screen reader users jump to the main content or navigation instantly, and they help search engines understand structure. Use one main per page, article for self contained content such as a blog post, section for a themed group with a heading, and div only when no meaningful element fits.

<header>logo, site name

<nav>main links

<main>one per page

<article>self contained post

<section>themed group with a heading

<section>another group

<aside>related links

<footer>contact, copyright

layout.html

HTML

<header>...</header><nav>...</nav><main><article>...</article><aside>...</aside></main><footer>...</footer>

<body>  <a class="skip" href="#content">Skip to content</a>  <header class="site-header">    <a href="/" class="logo">Blog</a>    <nav aria-label="Primary">      <ul>        <li><a href="/articles">Articles</a></li>        <li><a href="/about">About</a></li>      </ul>    </nav>  </header>   <main id="content">    <article>      <h1>Learning the web</h1>      <section>        <h2>Start with HTML</h2>        <p>Structure first, style later.</p>      </section>    </article>     <aside aria-label="Related posts">      <h2>Related</h2>    </aside>  </main>   <footer class="site-footer">    <p>Made with care.</p>  </footer></body>

Why it matters The skip link is the first thing keyboard users reach. It lets them bypass the navigation on every page.

Module 18 of 97, phase 02

Be found, be shared

Meta tags, SEO and social cards

Mark as doneCompleted

The head carries metadata for search engines and social apps: title, description, canonical URL, Open Graph and Twitter cards, and structured data in JSON-LD.

In detail

Write a unique title under about sixty characters and a description under about one hundred sixty. Open Graph controls the preview card when a link is shared. JSON-LD describes the page as an article, product or FAQ so search results can show rich snippets.

head-seo.html

HTML

<title>Learn CSS Grid in 10 minutes | Web Guide</title><meta name="description" content="A visual, beginner friendly tour of CSS Grid." /><meta property="og:image" content="https://example.com/og/grid.png" />

<head>  <title>Learn CSS Grid in 10 minutes | Web Guide</title>  <meta name="description" content="A visual, beginner friendly tour of CSS Grid with copy ready examples." />  <link rel="canonical" href="https://example.com/css-grid" />   <meta property="og:type" content="article" />  <meta property="og:title" content="Learn CSS Grid in 10 minutes" />  <meta property="og:description" content="A visual tour of CSS Grid." />  <meta property="og:image" content="https://example.com/og/grid.png" />  <meta name="twitter:card" content="summary_large_image" />   <script type="application/ld+json">    {      "@context": "https://schema.org",      "@type": "Article",      "headline": "Learn CSS Grid in 10 minutes",      "author": { "@type": "Person", "name": "Ada Lovelace" },      "datePublished": "2026-10-04"    }  </script></head>

Why it matters canonical tells search engines which URL is the original when the same page is reachable at several addresses.

Module 19 of 97, phase 02

A page for everyone

Accessibility basics

Mark as doneCompleted

Accessible pages work for keyboard users, screen reader users, people who zoom, and people with low vision or motion sensitivity. Most of it comes from correct HTML.

In detail

Use real buttons and links, label every control, keep visible focus, give images alt text, and keep text contrast at least 4.5 to 1. Reach for ARIA only when no native element exists, and respect prefers-reduced-motion for animation.

a11y.html

HTML

<button type="button" aria-expanded="false" aria-controls="menu">Menu</button><img src="chart.png" alt="Sales rose 20 percent from June to July" />

<!-- a real button, not a clickable div --><button type="button" class="menu-toggle" aria-expanded="false" aria-controls="menu">  <svg aria-hidden="true" width="20" height="20"><use href="#icon-menu" /></svg>  <span class="visually-hidden">Open menu</span></button><ul id="menu" hidden>...</ul> <!-- alt describes purpose, not pixels --><img src="chart.png" alt="Sales rose 20 percent from June to July" /> <style>  .visually-hidden {    position: absolute;    width: 1px;    height: 1px;    overflow: hidden;    clip: rect(0 0 0 0);    white-space: nowrap;  }  :focus-visible {    outline: 3px solid #1d63ed;    outline-offset: 2px;  }  @media (prefers-reduced-motion: reduce) {    * { animation: none !important; transition: none !important; }  }</style>

Why it matters aria-expanded tells assistive technology whether the menu is open. Update it in JavaScript whenever the menu toggles.

Phase 03, modules 20 to 30

The skin

CSS foundations

Three ways to add styles, how the cascade decides, and the box every element lives in.

Module 20 of 97, phase 03

Three doors for style

Inline, internal and external CSS

Mark as doneCompleted

CSS can live in a style attribute on one element, in a style element in the head, or in an external stylesheet linked with link. External files are the default for real sites.

In detail

Inline styles win almost every cascade fight and cannot use media queries or hover, so keep them for values set by JavaScript. Internal styles suit single page demos and critical CSS. External stylesheets are cached by the browser and shared across pages, which makes them fastest after the first visit.

Three ways to add CSS to a page
Way	Where it lives	Cascade strength	Caching	Best for
Inline	`style="color: red"` on one tag	Beats every selector except !important	None, repeated in every page	Values set by JavaScript
Internal	`<style>` inside the head	Normal, by specificity and order	Only with the HTML page	Critical CSS, single page demos
External	`<link rel="stylesheet" href="style.css">`	Normal, by specificity and order	Cached once, shared by every page	Almost everything
@import	Inside another stylesheet	Normal	Extra request, delays rendering	Avoid in production; use a bundler

3 examples

inline

HTML

<p style="color: #1d63ed; font-weight: 600">Inline style</p>

<!-- Inline: one element, highest priority, no media queries or :hover --><p style="color: #1d63ed; font-weight: 600">Inline style on one paragraph</p> <!-- Good use: a value computed by JavaScript --><div class="progress"><span class="bar" style="width: 64%"></span></div>

Why it matters Inline styles are hard to override and impossible to reuse. Keep them for dynamic values.

internal

HTML

<style>  p { color: #1d63ed; }</style>

<!doctype html><html lang="en">  <head>    <meta charset="utf-8" />    <title>Internal CSS</title>    <!-- Internal: styles for this one page only -->    <style>      body { font-family: system-ui, sans-serif; margin: 2rem; }      .card { padding: 1rem; border-radius: 12px; background: #eef4ff; }      .card:hover { background: #dce8ff; }    </style>  </head>  <body>    <div class="card">Styled from the head</div>  </body></html>

Why it matters Internal styles cannot be cached separately, so they reload with every page view. Great for demos and critical above the fold CSS.

external

HTML

<link rel="stylesheet" href="styles.css" />

<!-- index.html --><head>  <link rel="preload" href="fonts/inter.woff2" as="font" type="font/woff2" crossorigin />  <link rel="stylesheet" href="styles.css" />  <link rel="stylesheet" href="print.css" media="print" /></head> /* styles.css */:root { --brand: #1d63ed; }body { font-family: system-ui, sans-serif; }.card { padding: 1rem; border-radius: 12px; background: color-mix(in srgb, var(--brand) 8%, white); }

Why it matters media="print" loads the print stylesheet without blocking the screen render.

Module 21 of 97, phase 03

Pointing at the right things

Selectors

Mark as doneCompleted

Selectors choose which elements a rule styles: by type, class, id, attribute, relationship and state.

In detail

Class selectors are the workhorse. Combinators select by relationship: a space for any descendant, > for direct children, + for the next sibling and ~ for later siblings. Attribute selectors match patterns such as links ending in .pdf. :is() and :where() group selectors, and :where() adds no specificity.

selectors.css

CSS

.card > h3 { margin: 0; }a[href$=".pdf"]::after { content: " (PDF)"; }

/* type, class, id */p { line-height: 1.6; }.card { padding: 1rem; }#hero { min-height: 60vh; } /* relationships */.card > h3 { margin: 0; }          /* direct child */.card p { color: #445; }            /* any descendant */h2 + p { font-size: 1.1rem; }       /* the very next sibling */h2 ~ p { margin-left: 0.5rem; }     /* any later sibling */ /* attributes */a[href^="https://"] { text-decoration-style: dotted; }a[href$=".pdf"]::after { content: " (PDF)"; }input[type="email"] { letter-spacing: 0.02em; } /* grouping */:is(h1, h2, h3):hover { color: #1d63ed; }:where(ul, ol) { padding-left: 1.2rem; } /* zero specificity, easy to override */

Why it matters Prefer classes over ids for styling. Ids carry heavy specificity and make later overrides painful.

Module 22 of 97, phase 03

Who wins the argument

Specificity, the cascade and inheritance

Mark as doneCompleted

When several rules target the same element, the cascade decides: origin and importance first, then cascade layers, then specificity, then source order.

In detail

Specificity is counted as ids, classes and attributes, then types: #nav .link scores 1, 1, 0. Later rules win ties. Some properties such as color and font inherit from parents; others such as margin and border do not. @layer lets you order whole groups of styles so a framework's rules never beat yours by accident.

How selectors are scored (ids, classes, types)
Selector	Ids	Classes, attributes, pseudo classes	Types, pseudo elements	Score
`p`	0	0	1	0, 0, 1
`.card p`	0	1	1	0, 1, 1
`nav a:hover`	0	1	2	0, 1, 2
`input[type="email"]`	0	1	1	0, 1, 1
`#menu .link`	1	1	0	1, 1, 0
`style="..."`	inline			Beats all of the above
`:where(.card) p`	0	0	1	0, 0, 1 (where adds nothing)

cascade.css

CSS

@layer reset, base, components;@layer components { .btn { color: white; } }

/* Declare layer order once: later layers win */@layer reset, base, components, utilities; @layer reset {  * { margin: 0; box-sizing: border-box; }} @layer base {  a { color: #1d63ed; }} @layer components {  .btn { background: #1d63ed; color: white; } /* beats base, regardless of specificity */} @layer utilities {  .text-muted { color: #667 !important; }} /* Specificity examples, read as ids, classes, types */#nav a {}          /* 1, 0, 1 */.nav .link {}      /* 0, 2, 0 */nav a:hover {}     /* 0, 1, 2 */

Why it matters Layers order is decided before specificity, so a simple selector in a later layer still beats a complex one in an earlier layer.

Module 23 of 97, phase 03

Every element is a box

The box model

Mark as doneCompleted

Every element is a rectangle made of content, padding, border and margin. box-sizing decides whether width includes padding and border.

In detail

With the default content-box, width: 200px plus 20px padding makes a 240px wide box. Setting box-sizing: border-box everywhere makes widths predictable. Vertical margins between blocks collapse into the larger one, which surprises everyone once; gap in flex and grid avoids it.

margin

border

padding

contentwidth x height

With box-sizing: border-box, width includes padding and border, so a 200px box stays 200px.

box.css

CSS

*, *::before, *::after { box-sizing: border-box; }.card { width: 300px; padding: 20px; border: 2px solid; margin: 16px; }

/* A sane default for every element */*,*::before,*::after {  box-sizing: border-box;} .card {  width: 300px;            /* includes padding and border with border-box */  padding: 20px 24px;      /* top-bottom, left-right */  border: 2px solid #1d63ed;  border-radius: 14px;  margin: 16px auto;       /* auto left and right centres a block */  outline: 2px dashed transparent; /* outline does not take space */} .card:focus-within {  outline-color: #1d63ed;}

Why it matters outline draws outside the border without changing layout, which is why it is the right tool for focus rings.

Module 24 of 97, phase 03

Measuring in the right ruler

Units and sizing

Mark as doneCompleted

CSS has absolute units such as px and relative units such as rem, em, %, vw, vh, dvh, ch and fr. Relative units make layouts that respect user settings and screen sizes.

In detail

Use rem for font sizes and spacing so everything scales when someone increases their default font. Use % and fr for fluid widths, ch to limit line length, and dvh for full height sections on mobile where browser bars come and go. min(), max() and clamp() combine units into responsive values.

units.css

CSS

h1 { font-size: clamp(2rem, 5vw, 4rem); }.prose { max-width: 65ch; }

html { font-size: 100%; }              /* respect the user's default, usually 16px */ h1 { font-size: clamp(2rem, 1.2rem + 3vw, 4rem); } /* fluid but bounded */p  { font-size: 1rem; margin-block: 0 1em; }      /* em is relative to this element */ .prose   { max-width: 65ch; }          /* about 65 characters per line */.sidebar { width: min(320px, 100%); }  /* never wider than its container */.hero    { min-height: 100dvh; }       /* full height that respects mobile browser bars */.thumb   { aspect-ratio: 16 / 9; width: 100%; } .layout {  display: grid;  grid-template-columns: 1fr 3fr;      /* fr shares leftover space */}

Why it matters clamp(min, preferred, max) replaces whole sets of media queries for font sizes and spacing.

Module 25 of 97, phase 03

Colour and voice

Colours, fonts and typography

Mark as doneCompleted

Colours can be written as hex, rgb, hsl or modern oklch, and fonts are set with font-family stacks, web fonts and properties for size, weight, line height and spacing.

In detail

oklch gives perceptually even colour steps, and color-mix() derives tints from a brand colour. Load web fonts with @font-face and font-display: swap so text shows immediately. Good body text has a line height around 1.5 and a comfortable measure.

type.css

CSS

body { font: 400 1rem/1.6 "Inter", system-ui, sans-serif; color: oklch(25% 0.02 260); }.tint { background: color-mix(in srgb, #1d63ed 12%, white); }

@font-face {  font-family: "Inter";  src: url("fonts/inter-var.woff2") format("woff2");  font-weight: 100 900;  font-display: swap;} :root {  --brand: #1d63ed;  --ink: oklch(25% 0.02 260);} body {  font: 400 1rem/1.6 "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;  color: var(--ink);  -webkit-font-smoothing: antialiased;} h1, h2, h3 {  line-height: 1.15;  letter-spacing: -0.02em;  text-wrap: balance;} .lede { font-weight: 300; color: color-mix(in srgb, var(--ink) 70%, white); }.tint { background: color-mix(in srgb, var(--brand) 12%, white); }.mono { font-family: ui-monospace, "JetBrains Mono", monospace; }

Why it matters text-wrap: balance evens out heading lines so a single word never sits alone on the last line.

Module 26 of 97, phase 03

How boxes line up by default

Display and normal flow

Mark as doneCompleted

Normal flow stacks block elements vertically and lines inline elements up like words. The display property changes that: block, inline, inline-block, flex, grid, none and contents.

In detail

Block boxes take the full width and start on a new line; inline boxes ignore width and vertical margin. inline-block sits in a line but accepts size. display: none removes an element from layout and the accessibility tree, while visibility: hidden only hides it.

display.css

CSS

.tag { display: inline-block; padding: 2px 8px; }.hidden { display: none; }

span.tag {  display: inline-block;   /* flows like text but accepts padding and width */  padding: 2px 8px;  border-radius: 999px;  background: #eef4ff;} a.button {  display: block;          /* full width row */  text-align: center;} .visually-gone { display: none; }          /* removed from layout and screen readers */.invisible     { visibility: hidden; }     /* still takes up space */.wrapper-only  { display: contents; }      /* children act as if the wrapper is absent */

Why it matters display: contents is handy for grid and flex layouts, but test it with a screen reader before using it on buttons or lists.

Module 27 of 97, phase 03

Pinning things in place

Positioning and z-index

Mark as doneCompleted

position: relative, absolute, fixed and sticky move elements out of normal flow or pin them, and z-index decides which overlapping element is on top.

In detail

absolute positions relative to the nearest positioned ancestor, so give the parent position: relative. fixed sticks to the viewport, sticky sticks within its scroll container once you scroll past it. z-index only compares elements in the same stacking context; transforms and opacity create new contexts, which explains most z-index mysteries.

position.css

CSS

.card { position: relative; }.badge { position: absolute; top: 8px; right: 8px; }.header { position: sticky; top: 0; z-index: 10; }

.card {  position: relative;      /* anchor for absolute children */} .card .badge {  position: absolute;  top: 8px;  right: 8px;} .site-header {  position: sticky;        /* scrolls normally, then sticks */  top: 0;  z-index: 10;  backdrop-filter: blur(10px);} .chat-button {  position: fixed;         /* relative to the viewport */  right: 20px;  bottom: max(20px, env(safe-area-inset-bottom));} .overlay {  position: fixed;  inset: 0;                /* top, right, bottom and left all zero */  z-index: 100;}

Why it matters inset: 0 is shorthand for all four offsets and is the quickest way to cover a parent or the screen.

Module 28 of 97, phase 03

States and ghosts

Pseudo classes and pseudo elements

Mark as doneCompleted

Pseudo classes style states such as :hover, :focus-visible, :checked and :nth-child. Pseudo elements such as ::before, ::after and ::placeholder style parts that are not elements.

In detail

Use :focus-visible for keyboard focus rings, :nth-child(even) for two tone rows, :not() to exclude, and :empty to hide empty containers. ::before and ::after need a content property and are perfect for decorative icons, quotes and overlays.

pseudo.css

CSS

tr:nth-child(even) { background: #eef4ff; }.btn:focus-visible { outline: 3px solid #1d63ed; }

/* states */.btn:hover { transform: translateY(-1px); }.btn:active { transform: translateY(1px); }.btn:focus-visible { outline: 3px solid #1d63ed; outline-offset: 2px; }.btn:disabled { opacity: 0.5; cursor: not-allowed; } /* structure */tr:nth-child(even) { background: #eef4ff; }li:not(:last-child) { border-bottom: 1px solid #e3e8f2; }.notice:empty { display: none; } /* pseudo elements */.quote::before {  content: "\201C";  font-size: 3rem;  color: #1d63ed;}.new::after {  content: "New";  margin-left: 6px;  padding: 1px 6px;  border-radius: 999px;  background: #1d63ed;  color: white;  font-size: 0.75em;}input::placeholder { color: #8a94a6; }

Why it matters ::before and ::after are invisible to most screen readers when content is decorative, so never put essential text in them.

Module 29 of 97, phase 03

Variables for your design

Custom properties (CSS variables)

Mark as doneCompleted

Custom properties store values such as colours and spacing under names like --brand, and var() reads them. They cascade and inherit, so changing one value at the top updates everything.

In detail

Define design tokens on :root, override them on a component or under a theme attribute, and update them from JavaScript with style.setProperty. Unlike Sass variables they exist at runtime, which is what makes live theming and dark mode simple.

tokens.css

CSS

:root { --brand: #1d63ed; --radius: 12px; }.btn { background: var(--brand); border-radius: var(--radius); }

:root {  --brand: #1d63ed;  --brand-ink: #ffffff;  --surface: #ffffff;  --radius: 12px;  --space: clamp(12px, 2vw, 20px);} .btn {  padding: calc(var(--space) / 2) var(--space);  border-radius: var(--radius);  background: var(--brand);  color: var(--brand-ink);} /* a variant only swaps the token */.btn--danger { --brand: #d93025; } /* fallback value when the variable is missing */.card { background: var(--card-bg, var(--surface)); } /* JavaScript can change it live *//* document.documentElement.style.setProperty("--brand", "#0db7ed"); */

Why it matters A variant that only changes a token keeps every other rule shared, so buttons cannot drift apart over time.

Module 30 of 97, phase 03

One page, every screen

Responsive design and media queries

Mark as doneCompleted

Responsive design adapts one page to every screen with fluid layouts, flexible media and media queries that change rules at breakpoints.

In detail

Write mobile first: base styles for small screens, then min-width queries add complexity. Choose breakpoints where your content breaks, not at device widths. Media queries also read user preferences: prefers-color-scheme, prefers-reduced-motion and hover capability.

responsive.css

CSS

.grid { display: grid; gap: 16px; }@media (min-width: 700px) { .grid { grid-template-columns: repeat(3, 1fr); } }

/* mobile first: one column */.grid {  display: grid;  gap: 16px;} /* tablets and up */@media (min-width: 700px) {  .grid { grid-template-columns: repeat(2, 1fr); }} /* desktops */@media (min-width: 1100px) {  .grid { grid-template-columns: repeat(3, 1fr); }} /* devices that can hover with a precise pointer */@media (hover: hover) and (pointer: fine) {  .card:hover { transform: translateY(-4px); }} /* or skip queries entirely with an auto fitting grid */.auto-grid {  display: grid;  gap: 16px;  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));}

Why it matters repeat(auto-fit, minmax(260px, 1fr)) builds a responsive card grid with zero media queries.

Phase 04, modules 31 to 38

Layout and motion

Modern CSS layout and animation

Flexbox, grid, container queries, motion, theming and ways to keep big stylesheets sane.

Module 31 of 97, phase 04

Lining things up in a row

Flexbox

Mark as doneCompleted

Flexbox lays items out along one axis, a row or a column, and controls how they grow, shrink, wrap and align.

In detail

Set display: flex on the parent. justify-content aligns along the main axis, align-items across it, and gap spaces items. On children, flex: 1 shares leftover space and flex-wrap lets items move to the next line. Flexbox is ideal for navbars, toolbars, button groups and centering.

justify-content

align-items

123

Live previewrendered from the code below

flex.css

CSS

.toolbar { display: flex; align-items: center; gap: 12px; }.toolbar .spacer { flex: 1; }

.toolbar {  display: flex;  align-items: center;       /* cross axis */  justify-content: space-between; /* main axis */  gap: 12px;  flex-wrap: wrap;} .toolbar .spacer { flex: 1; }          /* takes all leftover space */.toolbar .logo   { flex: 0 0 auto; }   /* never grows or shrinks */ /* perfect centering */.center {  display: flex;  place-items: center;  justify-content: center;  min-height: 50vh;} /* vertical stack with spacing */.stack {  display: flex;  flex-direction: column;  gap: 8px;}

Why it matters gap replaces margin hacks between items and never adds space at the outer edges.

Module 32 of 97, phase 04

Rows and columns at once

CSS Grid

Mark as doneCompleted

Grid lays items out in two dimensions with rows and columns you define, then places items by line numbers or named areas.

In detail

grid-template-columns: repeat(3, 1fr) makes three equal columns. grid-template-areas draws a layout with words. Items can span with grid-column: span 2. subgrid lets nested items align to the parent grid. Use grid for page layouts and card galleries, flexbox for one dimensional rows.

headergrid-area: header

sidebar

maingrid-column: span 2

footer

grid-template-columns: 200px 1fr 1fr;
grid-template-areas:
  "header  header header"
  "sidebar main   main"
  "footer  footer footer";

Live previewrendered from the code below

grid.css

CSS

.page { display: grid; grid-template-areas: "header header" "nav main" "footer footer"; grid-template-columns: 220px 1fr; }

.page {  display: grid;  min-height: 100dvh;  grid-template-columns: 220px 1fr;  grid-template-rows: auto 1fr auto;  grid-template-areas:    "header header"    "nav    main"    "footer footer";  gap: 16px;}.page > header { grid-area: header; }.page > nav    { grid-area: nav; }.page > main   { grid-area: main; }.page > footer { grid-area: footer; } @media (max-width: 700px) {  .page {    grid-template-columns: 1fr;    grid-template-areas: "header" "main" "nav" "footer";  }} /* gallery with a featured item */.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }.gallery .featured { grid-column: span 2; grid-row: span 2; }

Why it matters Rewriting grid-template-areas in one media query rearranges the whole page without touching the HTML order.

Module 33 of 97, phase 04

Components that know their size

Container queries

Mark as doneCompleted

Container queries style a component based on the width of its container, not the screen, so the same card can be compact in a sidebar and wide in the main column.

In detail

Mark a parent with container-type: inline-size and an optional container-name, then write @container rules. Container query units such as cqi size things relative to the container. This is the missing piece that makes truly reusable components possible.

card-cq.css

CSS

.card-wrap { container-type: inline-size; }@container (min-width: 420px) { .card { grid-template-columns: 160px 1fr; } }

.card-wrap {  container-type: inline-size;  container-name: card;} .card {  display: grid;  gap: 12px;} .card img {  width: 100%;  aspect-ratio: 16 / 9;  object-fit: cover;} /* When the card itself is at least 420px wide, go horizontal */@container card (min-width: 420px) {  .card {    grid-template-columns: 160px 1fr;    align-items: center;  }  .card img { aspect-ratio: 1; }  .card h3 { font-size: clamp(1rem, 4cqi, 1.4rem); }}

Why it matters The same card markup now works in a narrow sidebar and a wide feed without a single media query.

Module 34 of 97, phase 04

New superpowers in plain CSS

Nesting, :has(), clamp and logical properties

Mark as doneCompleted

Modern CSS supports nesting without a preprocessor, :has() as a parent selector, logical properties for any writing direction, and accent-color, aspect-ratio and scroll snapping out of the box.

In detail

Nesting with & keeps related rules together. :has() selects an element based on what it contains, such as a card that has an image. margin-inline and padding-block adapt to right to left languages. Check caniuse before relying on the newest features and provide a sensible fallback.

modern.css

CSS

.card {  &:hover { scale: 1.02; }  &:has(img) { padding-top: 0; }}

.card {  padding-block: 16px;          /* top and bottom in any writing mode */  padding-inline: 20px;         /* left and right, flipped for RTL */  border-radius: 14px;  transition: scale 0.2s ease;   & h3 { margin-block: 0 8px; }  &:hover { scale: 1.02; }   /* parent selector: style the card differently when it contains an image */  &:has(img) { padding-block-start: 0; }  &:has(.badge--sale) { outline: 2px solid #d93025; }} /* form row turns red if any field inside is invalid */.row:has(input:user-invalid) label { color: #d93025; } input[type="checkbox"] { accent-color: #1d63ed; } .slider {  display: flex;  overflow-x: auto;  scroll-snap-type: x mandatory;  & > * { scroll-snap-align: start; flex: 0 0 80%; }}

Why it matters :has() removes most of the JavaScript that used to toggle parent classes based on child state.

Module 35 of 97, phase 04

Smooth changes

Transitions and transforms

Mark as doneCompleted

Transitions animate a property from one value to another when it changes, and transforms move, scale and rotate elements without affecting layout.

In detail

Animate transform and opacity whenever possible because the browser can run them on the compositor without recalculating layout. Use individual properties translate, scale and rotate for readability, and pick easing such as ease-out for entrances.

Live previewrendered from the code below

hover-card.css

CSS

.card { transition: transform 0.25s ease, box-shadow 0.25s ease; }.card:hover { transform: translateY(-4px) scale(1.02); }

.card {  border: 1px solid #dde6f7;  border-radius: 16px;  transition:    transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1),    box-shadow 0.25s ease,    border-color 0.25s ease;} .card:hover {  transform: translateY(-4px) scale(1.02);  box-shadow: 0 18px 40px -20px rgba(29, 99, 237, 0.55);  border-color: #1d63ed;} .icon {  transition: rotate 0.3s ease;}.card:hover .icon {  rotate: -8deg;} @media (prefers-reduced-motion: reduce) {  .card, .icon { transition: none; }}

Why it matters Listing exact properties in transition avoids accidentally animating layout properties that cause jank.

Module 36 of 97, phase 04

Motion with a script

Keyframe animations

Mark as doneCompleted

@keyframes define the steps of an animation, and the animation property plays them with a duration, delay, easing, direction and repeat count.

In detail

Use keyframes for loaders, attention pulses, floating illustrations and entrances. Negative delays start an animation partway through, which staggers many items without JavaScript. Scroll driven animations with animation-timeline: view() now link progress to scroll in supporting browsers.

Live previewrendered from the code below

float.css

CSS

@keyframes float { 50% { translate: 0 -10px; } }.bubble { animation: float 4s ease-in-out infinite; }

@keyframes float {  0%, 100% { translate: 0 0; rotate: -2deg; }  50%      { translate: 0 -12px; rotate: 2deg; }} @keyframes spin { to { rotate: 1turn; } } .bubble {  animation: float 4s ease-in-out infinite;}.bubble:nth-child(2) { animation-delay: -1.3s; }   /* start partway: natural stagger */.bubble:nth-child(3) { animation-delay: -2.6s; } .loader {  width: 28px;  aspect-ratio: 1;  border: 3px solid #cfe0ff;  border-top-color: #1d63ed;  border-radius: 50%;  animation: spin 0.8s linear infinite;} /* scroll driven reveal where supported */@supports (animation-timeline: view()) {  .reveal {    animation: fade-up linear both;    animation-timeline: view();    animation-range: entry 0% cover 30%;  }}@keyframes fade-up { from { opacity: 0; translate: 0 24px; } }

Why it matters Negative animation delays make each item start mid animation, so a row of icons bobs out of sync without extra code.

Module 37 of 97, phase 04

Two moods, one stylesheet

Dark mode and theming

Mark as doneCompleted

Theming swaps a small set of custom properties. prefers-color-scheme follows the system, and a data-theme attribute lets people choose for themselves.

In detail

Define light tokens on :root, dark tokens under the media query and under [data-theme="dark"], and make every component use tokens only. Set color-scheme so form controls and scrollbars match. Dark mode is not inverted colours: lower contrast slightly, lift surfaces with lighter greys, and desaturate brand colours.

theme.css

CSS

:root { --bg: #fff; --ink: #111; }:root[data-theme="dark"] { --bg: #0b1220; --ink: #e8eefc; }body { background: var(--bg); color: var(--ink); }

:root {  color-scheme: light;  --bg: #f4f7fc;  --surface: #ffffff;  --ink: #0b1a33;  --brand: #1d63ed;} @media (prefers-color-scheme: dark) {  :root:not([data-theme="light"]) {    color-scheme: dark;    --bg: #0a1020;    --surface: #111a2e;    --ink: #e6edfb;    --brand: #5b93ff;  }} :root[data-theme="dark"] {  color-scheme: dark;  --bg: #0a1020;  --surface: #111a2e;  --ink: #e6edfb;  --brand: #5b93ff;} body {  background: var(--bg);  color: var(--ink);  transition: background-color 0.3s ease, color 0.3s ease;}.card { background: var(--surface); }

Why it matters Writing the dark tokens twice, once for the system preference and once for the explicit choice, lets a manual toggle override the system either way.

Module 38 of 97, phase 04

Stylesheets that scale

CSS architecture: BEM, utilities and layers

Mark as doneCompleted

As a site grows, naming and structure matter more than any single property. BEM, utility classes and cascade layers are three ways to keep CSS predictable.

In detail

BEM names blocks, elements and modifiers as card, card__title and card--featured, which keeps specificity flat and intent obvious. Utility first CSS such as Tailwind composes small single purpose classes. Layers order resets, base, components and utilities so the cascade stays under control. Most teams mix these approaches.

bem.css

CSS

.card {}.card__title {}.card--featured {}

/* Block */.card {  display: grid;  gap: 8px;  padding: 16px;  border-radius: 14px;} /* Elements belong to the block */.card__media  { aspect-ratio: 16 / 9; border-radius: 10px; }.card__title  { font-size: 1.1rem; margin: 0; }.card__meta   { color: #667; font-size: 0.85rem; } /* Modifiers change a variant */.card--featured { outline: 2px solid #1d63ed; }.card--compact  { padding: 10px; } /* HTML<article class="card card--featured">  <img class="card__media" src="..." alt="..." />  <h3 class="card__title">Docker for frontend developers</h3>  <p class="card__meta">6 min read</p></article>*/

Why it matters BEM keeps every selector one class deep, so any rule can be overridden by another single class.

Phase 05, modules 39 to 48

The nervous system

JavaScript foundations

How scripts load, the language itself, and asynchronous code that waits without freezing the page.

Module 39 of 97, phase 05

Three ways to wake a page

Inline, internal and external JavaScript

Mark as doneCompleted

JavaScript can sit in an event attribute, inside a script element, or in an external file loaded with src. How you load external files, with defer, async or type="module", decides when they run.

In detail

Inline handlers such as onclick mix markup and behaviour and are blocked by strict security policies. A plain script in the head blocks parsing. defer downloads in parallel and runs after the HTML is parsed, in order. async runs as soon as it downloads, in any order, which suits independent scripts like analytics. Modules are deferred by default.

Ways to load JavaScript and when each one runs
Way	Markup	Blocks HTML parsing	Runs	Use it for
Inline handler	`onclick="save()"`	No	When the event fires	Avoid, blocked by strict CSP
Internal	`<script>...</script>`	Yes	Immediately, where it sits	Tiny snippets such as a theme preload
External	`<script src="app.js">`	Yes, while downloading and running	Immediately after download	Rarely, prefer defer
defer	`<script defer src>`	No	After parsing, in order	Most page scripts
async	`<script async src>`	Only while running	As soon as downloaded, any order	Independent scripts like analytics
module	`<script type="module" src>`	No, deferred by default	After parsing, with imports	Modern code with import and export

3 examples

inline

HTML

<button onclick="alert('Hi')">Say hi</button>

<!-- Inline handler: quick, but mixes HTML with behaviour --><button onclick="alert('Hi')">Say hi</button> <!-- Blocked by a Content Security Policy without 'unsafe-inline' --><!-- Prefer addEventListener in a script file instead -->

Why it matters Inline handlers cannot be reused, are hard to test, and are the first thing a strict CSP blocks.

internal

HTML

<script>  document.querySelector("button").addEventListener("click", () => alert("Hi"));</script>

<body>  <button id="hi">Say hi</button>   <!-- Internal script at the end of body: the button already exists -->  <script>    const button = document.getElementById("hi");    button.addEventListener("click", () => {      button.textContent = "Hello";    });  </script></body>

Why it matters Placing an internal script at the end of body guarantees the elements above it exist when it runs.

external

HTML

<script src="app.js" defer></script><script type="module" src="main.js"></script>

<head>  <!-- runs after parsing, in document order -->  <script src="vendor.js" defer></script>  <script src="app.js" defer></script>   <!-- runs as soon as it arrives, order not guaranteed: good for analytics -->  <script src="analytics.js" async></script>   <!-- ES modules: deferred by default, can import other files -->  <script type="module" src="main.js"></script>  <script nomodule src="legacy.js"></script></head>

Why it matters defer is the safe default for your own scripts. It never blocks parsing and keeps execution order.

Module 40 of 97, phase 05

Boxes with names

Variables and data types

Mark as doneCompleted

Variables store values. Use const by default, let when the value changes, and never var. JavaScript has primitive types such as string, number, boolean, null and undefined, and objects for everything else.

In detail

const prevents reassignment, not mutation: a const array can still get new items. typeof reports the type, with the famous quirk that typeof null is object. Template literals with backticks embed values in strings. Numbers are floating point, so 0.1 + 0.2 is not exactly 0.3; use BigInt or integers of cents for money.

types.js

JavaScript

const name = "Ada";let count = 0;const greeting = `Hello, ${name}. You have ${count} messages.`;

const name = "Ada";           // stringlet count = 0;                // number, will changeconst isAdmin = false;        // booleanlet selected = null;          // intentionally emptylet notSetYet;                // undefinedconst tags = ["html", "css"]; // object (array)const user = { name, isAdmin }; count += 1;tags.push("js");              // allowed: const stops reassignment, not mutation console.log(typeof name);     // "string"console.log(typeof null);     // "object" (a historic quirk)console.log(Array.isArray(tags)); // true const greeting = `Hello, ${name}. You have ${count} message${count === 1 ? "" : "s"}.`;console.log(greeting); console.log(0.1 + 0.2);       // 0.30000000000000004const priceInPaise = 1999;    // store money as integers

Why it matters Template literals read naturally and avoid the + chains that made old string building error prone.

Module 41 of 97, phase 05

Making decisions

Operators and control flow

Mark as doneCompleted

Comparison, logical and arithmetic operators combine values, and if, else, switch and the ternary operator choose what runs.

In detail

Always compare with === and !==, which do not convert types. && and || short circuit, ?? supplies a default only for null or undefined, and ?. reads deep properties safely. Truthy and falsy values let you write if (list.length) but can surprise you with 0 and empty strings.

control.js

JavaScript

const city = user?.address?.city ?? "Unknown";const label = count > 0 ? `${count} items` : "Empty";

const user = { name: "Ada", address: null, settings: { volume: 0 } }; // strict equality: no type conversionconsole.log(1 === "1");   // falseconsole.log(1 == "1");    // true, avoid == // safe deep access and defaultsconst city = user?.address?.city ?? "Unknown";const volume = user.settings.volume ?? 50;  // 0 is keptconst wrong = user.settings.volume || 50;   // 0 is replaced by 50 // ternary for small choicesconst count = 3;const label = count > 0 ? `${count} items` : "Empty"; // switch for many casesfunction statusText(code) {  switch (Math.floor(code / 100)) {    case 2: return "Success";    case 4: return "Client error";    case 5: return "Server error";    default: return "Other";  }} if (label && city !== "Unknown") {  console.log(`${label} shipping to ${city}`);}

Why it matters ?? only replaces null and undefined, while || also replaces 0 and empty strings. Most default value bugs come from mixing them up.

Module 42 of 97, phase 05

Reusable recipes

Functions, scope and closures

Mark as doneCompleted

Functions package steps you can reuse. They take parameters, return values, and remember the variables around where they were created, which is called a closure.

In detail

Arrow functions are short and do not have their own this. Default parameters and rest parameters keep signatures clean. Variables declared with let and const live in the nearest block. Closures power counters, private state, event handlers and debounce helpers.

functions.js

JavaScript

const add = (a, b = 0) => a + b;function counter() { let n = 0; return () => ++n; }

// declaration: hoisted, usable before this linefunction greet(name = "friend") {  return `Hello, ${name}`;} // arrow function: short, no own `this`const add = (a, b = 0) => a + b; // rest parameters collect the remaining argumentsconst sum = (...numbers) => numbers.reduce((total, n) => total + n, 0); // closure: the inner function remembers `count`function makeCounter() {  let count = 0;  return () => ++count;}const next = makeCounter();next(); // 1next(); // 2 // debounce: wait until typing stopsfunction debounce(fn, ms = 300) {  let timer;  return (...args) => {    clearTimeout(timer);    timer = setTimeout(() => fn(...args), ms);  };}const onSearch = debounce((q) => console.log("search", q), 250);

Why it matters debounce is a closure in disguise: timer survives between calls because the returned function remembers it.

Module 43 of 97, phase 05

Collections of things

Arrays, objects and JSON

Mark as doneCompleted

Arrays hold ordered lists and objects hold named properties. map, filter, find and reduce transform arrays, and destructuring and spread copy and combine them.

In detail

Prefer methods that return new arrays over mutating loops; it makes code easier to follow and fits how frameworks detect changes. JSON is text that looks like objects; JSON.parse reads it and JSON.stringify writes it. structuredClone makes a deep copy.

collections.js

JavaScript

const titles = posts.filter((p) => p.published).map((p) => p.title);const { title, tags = [] } = post;

const posts = [  { id: 1, title: "Flexbox", minutes: 6, published: true, tags: ["css"] },  { id: 2, title: "Fetch API", minutes: 9, published: false, tags: ["js"] },  { id: 3, title: "Semantic HTML", minutes: 4, published: true, tags: ["html"] },]; const published = posts.filter((p) => p.published);const titles = published.map((p) => p.title);const totalMinutes = published.reduce((sum, p) => sum + p.minutes, 0);const fetchPost = posts.find((p) => p.id === 2);const hasCss = posts.some((p) => p.tags.includes("css")); // destructuring with defaults and renamingconst { title, minutes: readTime, author = "Anonymous" } = posts[0]; // spread copies and mergesconst updated = { ...posts[1], published: true };const allTags = [...new Set(posts.flatMap((p) => p.tags))]; // JSON round tripconst text = JSON.stringify(updated);const back = JSON.parse(text);const deepCopy = structuredClone(posts); console.log(titles, totalMinutes, readTime, allTags);

Why it matters Chaining filter, map and reduce describes what you want instead of how to loop, which is easier to read and test.

Module 44 of 97, phase 05

Doing it again and again

Loops and iteration

Mark as doneCompleted

for, for...of, while and array methods repeat work. for...of iterates values of arrays, strings, Maps and Sets; for...in iterates object keys and is rarely what you want.

In detail

Use forEach or for...of to perform side effects, map to transform, and a classic for loop when you need the index and early exit with break. Object.entries turns an object into pairs you can loop over. Map and Set are better than objects when keys are not strings or must be unique.

loops.js

JavaScript

for (const item of cart) total += item.price;for (const [key, value] of Object.entries(settings)) console.log(key, value);

const cart = [{ name: "Mug", price: 299 }, { name: "Tee", price: 799 }]; let total = 0;for (const item of cart) {  total += item.price;} for (let i = 0; i < cart.length; i++) {  if (cart[i].price > 500) {    console.log("First expensive item at index", i);    break;  }} const settings = { theme: "dark", fontSize: 16 };for (const [key, value] of Object.entries(settings)) {  console.log(`${key} = ${value}`);} // Map keeps insertion order and accepts any key typeconst visits = new Map();visits.set("/home", 3).set("/blog", 7);for (const [path, count] of visits) console.log(path, count); // Set removes duplicatesconst unique = new Set(["css", "html", "css"]);console.log(unique.size); // 2

Why it matters Object.entries plus destructuring in for...of is the cleanest way to walk an object's keys and values together.

Module 45 of 97, phase 05

Blueprints for objects

Classes, objects and this

Mark as doneCompleted

Classes are blueprints for objects with shared methods. this refers to the object a method was called on, which changes depending on how the function is called.

In detail

A constructor sets up fields, methods live on the prototype, # fields are truly private, and extends with super builds on another class. In event handlers this is the element unless you use an arrow function or bind. Many modern codebases prefer plain functions and objects, but classes remain common in web components and libraries.

cart.js

JavaScript

class Cart {  #items = [];  add(item) { this.#items.push(item); return this; }}

class Cart {  #items = [];                     // private field   constructor(currency = "INR") {    this.currency = currency;  }   add(item) {    this.#items.push(item);    return this;                    // allows chaining  }   get total() {    return this.#items.reduce((sum, i) => sum + i.price, 0);  }   static fromJSON(json) {    const cart = new Cart();    JSON.parse(json).forEach((i) => cart.add(i));    return cart;  }} class GiftCart extends Cart {  constructor(note) {    super("INR");    this.note = note;  }} const cart = new GiftCart("Happy birthday").add({ name: "Book", price: 499 });console.log(cart.total); // 499

Why it matters #items cannot be read or changed from outside the class, unlike an underscore name that is private only by convention.

Module 46 of 97, phase 05

Code in tidy files

ES modules: import and export

Mark as doneCompleted

Modules split code across files. export shares values, import brings them in, and the browser loads them with script type="module".

In detail

Named exports suit utilities; a default export suits a file with one main thing. Module scripts run in strict mode, are deferred, and load relative paths with the file extension. Dynamic import() loads code only when needed, which is how bundlers and frameworks split large apps.

main.js

JavaScript

import { formatDate } from "./utils/date.js";const { showChart } = await import("./chart.js");

// utils/date.jsexport function formatDate(date, locale = "en-IN") {  return new Intl.DateTimeFormat(locale, { dateStyle: "medium" }).format(date);}export const ONE_DAY = 86_400_000; // theme.jsexport default function applyTheme(name) {  document.documentElement.dataset.theme = name;} // main.js (loaded with <script type="module" src="main.js">)import applyTheme from "./theme.js";import { formatDate, ONE_DAY } from "./utils/date.js"; applyTheme("dark");console.log(formatDate(new Date(Date.now() + ONE_DAY))); // load heavy code only when neededdocument.querySelector("#stats")?.addEventListener("click", async () => {  const { showChart } = await import("./chart.js");  showChart();});

Why it matters Dynamic import keeps the chart code out of the first download until someone actually asks for it.

Module 47 of 97, phase 05

Waiting without freezing

Async code, promises and async await

Mark as doneCompleted

JavaScript runs on one thread, so slow work such as network requests is asynchronous. A promise represents a future value, and async and await let you write that waiting code top to bottom.

In detail

The event loop runs your code, then queued callbacks. A promise is pending, then fulfilled or rejected. await pauses only the current async function, not the page. Promise.all runs tasks in parallel and fails fast, Promise.allSettled waits for all, and AbortController cancels requests.

async.js

JavaScript

const [user, posts] = await Promise.all([getUser(id), getPosts(id)]);

const wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms)); async function loadDashboard(userId) {  console.log("loading");   // sequential: second waits for first  const user = await getJSON(`/api/users/${userId}`);   // parallel: both start at once  const [posts, stats] = await Promise.all([    getJSON(`/api/users/${userId}/posts`),    getJSON(`/api/users/${userId}/stats`),  ]);   // independent extras: none can break the others  const extras = await Promise.allSettled([getJSON("/api/news"), wait(200)]);   return { user, posts, stats, extras };} async function getJSON(url) {  const res = await fetch(url);  if (!res.ok) throw new Error(`${res.status} on ${url}`);  return res.json();} loadDashboard(42).then(console.log).catch((err) => console.error(err.message));

Why it matters Starting independent requests together with Promise.all cuts waiting time to the slowest request instead of the sum of all.

Module 48 of 97, phase 05

When things go wrong

Errors and debugging

Mark as doneCompleted

try, catch and finally handle errors, throw raises them, and the console, breakpoints and the debugger statement help you find their cause.

In detail

Catch errors where you can do something useful, such as showing a message or retrying. Throw Error objects, not strings, so you get a stack trace. Add a global handler for unhandled promise rejections to report crashes. In DevTools, set breakpoints, step through code and inspect variables instead of scattering console.log everywhere.

errors.js

JavaScript

try { save(data); } catch (err) { showToast(err.message); } finally { spinner.hidden = true; }

class ValidationError extends Error {  constructor(field, message) {    super(message);    this.name = "ValidationError";    this.field = field;  }} function parseAge(value) {  const age = Number(value);  if (!Number.isInteger(age) || age < 0) throw new ValidationError("age", "Age must be a whole number");  return age;} async function submit(form) {  const spinner = form.querySelector(".spinner");  spinner.hidden = false;  try {    const age = parseAge(form.age.value);    await saveProfile({ age });  } catch (err) {    if (err instanceof ValidationError) showFieldError(err.field, err.message);    else showToast("Something went wrong. Please try again.");  } finally {    spinner.hidden = true;  // runs whether it worked or not  }} // last line of defence for forgotten awaitswindow.addEventListener("unhandledrejection", (event) => {  console.error("Unhandled:", event.reason);});

Why it matters finally guarantees cleanup such as hiding a spinner even when the request throws.

Phase 06, modules 49 to 56

Talking to the page

DOM, events and browser APIs

Selecting and changing elements, reacting to people, fetching data and remembering things.

Module 49 of 97, phase 06

Finding elements in the tree

The DOM and selecting elements

Mark as doneCompleted

The DOM is the live tree of objects the browser builds from HTML. querySelector and querySelectorAll find elements with the same selectors you use in CSS.

In detail

document is the root. Every element has parent, children and siblings you can walk. querySelector returns the first match or null; querySelectorAll returns a static list you can loop with forEach. closest() walks up to the nearest matching ancestor, which is the key to event delegation.

document

htmldocument.documentElement
headtitle, meta, link
bodydocument.body
header
navquerySelector('nav')
main
article.cardquerySelectorAll('.card')
h2card.querySelector('h2')
p#text node inside
a.card__linkel.closest('.card') walks up
footer

Every element is a node with a parent, children and siblings you can walk from JavaScript.

select.js

JavaScript

const title = document.querySelector("h1");const cards = document.querySelectorAll(".card");

const title = document.querySelector("h1");const cards = document.querySelectorAll(".card");          // NodeListconst nav = document.getElementById("primary-nav");const firstLink = nav?.querySelector("a");                 // search inside an element cards.forEach((card, i) => card.setAttribute("data-index", i)); // walking the treeconst list = document.querySelector("ul");console.log(list.children.length);console.log(list.firstElementChild, list.lastElementChild);console.log(title.parentElement, title.nextElementSibling); // closest finds the nearest ancestor that matchesdocument.addEventListener("click", (e) => {  const card = e.target.closest(".card");  if (card) console.log("clicked card", card.dataset.index);}); // matches tests an element against a selectorconsole.log(title.matches("h1.page-title"));

Why it matters Always check for null after querySelector. A missing element is the most common cause of Cannot read properties of null.

Module 50 of 97, phase 06

Rewriting the page live

Creating and changing elements

Mark as doneCompleted

JavaScript changes text, attributes, classes and styles, and creates, moves and removes elements. classList and dataset are the everyday tools.

In detail

Use textContent to set text safely; innerHTML parses HTML and is a security risk with user input. createElement plus append builds nodes, template elements clone ready made markup, and a DocumentFragment batches many insertions into one update.

render-list.js

JavaScript

const li = document.createElement("li");li.textContent = item.name;list.append(li);

const posts = [  { title: "Flexbox", minutes: 6 },  { title: "Fetch API", minutes: 9 },]; const list = document.querySelector("#posts");const template = document.querySelector("#post-template"); // <template> in the HTML const fragment = document.createDocumentFragment();for (const post of posts) {  const node = template.content.cloneNode(true);  node.querySelector(".title").textContent = post.title;          // safe text  node.querySelector(".meta").textContent = `${post.minutes} min read`;  fragment.append(node);}list.replaceChildren(fragment);                                      // one update // classes, attributes and stylesconst first = list.firstElementChild;first.classList.add("featured");first.classList.toggle("open");first.setAttribute("aria-current", "true");first.dataset.id = "1";first.style.setProperty("--accent", "#0db7ed"); // removelist.lastElementChild?.remove(); /* HTML<ul id="posts"></ul><template id="post-template">  <li class="post"><h3 class="title"></h3><p class="meta"></p></li></template>*/

Why it matters replaceChildren with a fragment updates the list in one go, so the browser lays out once instead of once per item.

Module 51 of 97, phase 06

Listening to people

Events and event delegation

Mark as doneCompleted

Events fire when people click, type, scroll or submit. addEventListener attaches a handler, and the event object says what happened and where.

In detail

Events bubble up from the target to its ancestors, so one listener on a parent can handle clicks on many children. That is event delegation, and it works for elements added later. preventDefault stops default actions such as following a link; passive listeners tell the browser a scroll handler will not block scrolling.

events.js

JavaScript

list.addEventListener("click", (e) => {  const btn = e.target.closest("button[data-action]");  if (btn) handle(btn.dataset.action);});

const list = document.querySelector("#todo"); // delegation: one listener for every current and future buttonlist.addEventListener("click", (event) => {  const button = event.target.closest("button[data-action]");  if (!button) return;  const item = button.closest("li");  if (button.dataset.action === "done") item.classList.toggle("done");  if (button.dataset.action === "delete") item.remove();}); // keyboarddocument.addEventListener("keydown", (event) => {  if (event.key === "Escape") document.querySelector(".modal[open]")?.close();}); // passive scroll listener does not block smooth scrollingwindow.addEventListener("scroll", () => {  document.body.classList.toggle("scrolled", window.scrollY > 40);}, { passive: true }); // run once, then remove itselfdocument.querySelector("#welcome").addEventListener("click", () => console.log("hi"), { once: true }); // custom events between parts of your appdocument.dispatchEvent(new CustomEvent("cart:updated", { detail: { count: 3 } }));document.addEventListener("cart:updated", (e) => console.log(e.detail.count));

Why it matters Delegation means you never re-attach listeners after rendering new items, which removes a whole class of bugs.

Module 52 of 97, phase 06

Forms that feel smart

Handling forms with JavaScript

Mark as doneCompleted

JavaScript can intercept submit, read every field with FormData, validate, show inline errors and send data with fetch without reloading the page.

In detail

Listen for submit on the form rather than click on the button so Enter works. new FormData(form) collects named fields, and Object.fromEntries turns it into an object. setCustomValidity plugs your own rules into native validation messages.

signup.js

JavaScript

form.addEventListener("submit", async (e) => {  e.preventDefault();  const data = Object.fromEntries(new FormData(form));});

const form = document.querySelector("#signup");const status = form.querySelector(".status"); form.password2.addEventListener("input", () => {  const same = form.password.value === form.password2.value;  form.password2.setCustomValidity(same ? "" : "Passwords do not match");}); form.addEventListener("submit", async (event) => {  event.preventDefault();  if (!form.reportValidity()) return;   const data = Object.fromEntries(new FormData(form));  const button = form.querySelector("button[type=submit]");  button.disabled = true;  status.textContent = "Creating your account";   try {    const res = await fetch("/api/signup", {      method: "POST",      headers: { "Content-Type": "application/json" },      body: JSON.stringify(data),    });    if (!res.ok) throw new Error((await res.json()).message ?? "Sign up failed");    status.textContent = "Done. Check your inbox.";    form.reset();  } catch (err) {    status.textContent = err.message;  } finally {    button.disabled = false;  }});

Why it matters Disabling the button while the request is in flight prevents double submissions from impatient clicks.

Module 53 of 97, phase 06

Getting data from servers

Fetch API and JSON

Mark as doneCompleted

fetch sends HTTP requests from JavaScript and returns a promise of a response. You check the status, read JSON, and render it.

In detail

fetch only rejects on network failure, so always check response.ok for 4xx and 5xx. Send JSON with a Content-Type header and JSON.stringify. Use AbortController to cancel stale requests, for example when someone types a new search before the old one returns. Cross origin requests follow CORS rules set by the server.

search.js

JavaScript

const res = await fetch(`/api/search?q=${encodeURIComponent(q)}`);if (!res.ok) throw new Error(res.status);const results = await res.json();

const input = document.querySelector("#search");const output = document.querySelector("#results");let controller; input.addEventListener("input", async () => {  const q = input.value.trim();  controller?.abort();                 // cancel the previous request  if (!q) return output.replaceChildren();   controller = new AbortController();  output.setAttribute("aria-busy", "true");  try {    const res = await fetch(`https://api.example.com/search?q=${encodeURIComponent(q)}`, {      signal: controller.signal,      headers: { Accept: "application/json" },    });    if (!res.ok) throw new Error(`Search failed with ${res.status}`);    const { items } = await res.json();    output.replaceChildren(      ...items.map((item) => {        const li = document.createElement("li");        li.textContent = item.title;        return li;      }),    );  } catch (err) {    if (err.name !== "AbortError") output.textContent = err.message;  } finally {    output.removeAttribute("aria-busy");  }});

Why it matters Aborting the previous request stops a slow old response from overwriting the results for the newer search.

Module 54 of 97, phase 06

Remembering between visits

localStorage, sessionStorage, cookies and IndexedDB

Mark as doneCompleted

Browsers can remember data: localStorage persists strings, sessionStorage lasts for a tab, cookies travel with every request, and IndexedDB stores large structured data.

In detail

Use localStorage for small preferences such as a theme, wrapped in try and catch because it can be full or blocked. Never store tokens or secrets there, since any script on the page can read it. Session cookies set by the server with HttpOnly and Secure are safer for authentication.

prefs.js

JavaScript

localStorage.setItem("theme", "dark");const theme = localStorage.getItem("theme") ?? "light";

const store = {  get(key, fallback = null) {    try {      const raw = localStorage.getItem(key);      return raw === null ? fallback : JSON.parse(raw);    } catch {      return fallback;           // blocked storage or broken JSON    }  },  set(key, value) {    try {      localStorage.setItem(key, JSON.stringify(value));    } catch {      /* quota exceeded or private mode */    }  },}; store.set("prefs", { theme: "dark", fontSize: 17 });const prefs = store.get("prefs", { theme: "light", fontSize: 16 }); // sessionStorage: same API, cleared when the tab closessessionStorage.setItem("draft", "Half written comment"); // react to changes made in another tabwindow.addEventListener("storage", (event) => {  if (event.key === "prefs") console.log("prefs changed elsewhere", event.newValue);});

Why it matters The storage event fires in other tabs, which keeps a theme choice in sync across every open tab.

Module 55 of 97, phase 06

Watching without polling

IntersectionObserver, ResizeObserver and MutationObserver

Mark as doneCompleted

Observers tell you when something changes without checking in a loop: when an element enters the viewport, when it resizes, or when the DOM changes.

In detail

IntersectionObserver powers lazy loading, infinite scroll, scroll reveal animations and the active link in a table of contents. ResizeObserver reacts to an element's size, which media queries cannot see. MutationObserver watches the DOM for added or changed nodes. All of them are cheaper than scroll and resize handlers.

toc-spy.js

JavaScript

const io = new IntersectionObserver((entries) => { /* ... */ }, { rootMargin: "-40% 0px -55% 0px" });document.querySelectorAll("section[id]").forEach((s) => io.observe(s));

// highlight the table of contents link for the section in viewconst links = new Map(  [...document.querySelectorAll(".toc a")].map((a) => [a.getAttribute("href").slice(1), a]),); const spy = new IntersectionObserver(  (entries) => {    for (const entry of entries) {      if (!entry.isIntersecting) continue;      links.forEach((a) => a.classList.remove("active"));      links.get(entry.target.id)?.classList.add("active");    }  },  { rootMargin: "-40% 0px -55% 0px" },);document.querySelectorAll("section[id]").forEach((section) => spy.observe(section)); // react to a component's own sizeconst card = document.querySelector(".card");new ResizeObserver(([entry]) => {  card.classList.toggle("wide", entry.contentRect.width > 480);}).observe(card);

Why it matters The rootMargin shrinks the viewport to a thin band in the middle, so exactly one section counts as current at a time.

Module 56 of 97, phase 06

Doing things on time

Timers and requestAnimationFrame

Mark as doneCompleted

setTimeout runs code once after a delay, setInterval repeats it, and requestAnimationFrame runs code right before the next screen paint for smooth animation.

In detail

Always keep the id so you can clear timers. Use requestAnimationFrame for anything visual: it matches the display refresh rate and pauses in background tabs. Read layout values such as getBoundingClientRect before writing styles in the same frame to avoid forced reflow.

count-up.js

JavaScript

function frame(now) { /* update */ requestAnimationFrame(frame); }requestAnimationFrame(frame);

// animate a number from 0 to target in `duration` msfunction countUp(el, target, duration = 1200) {  const start = performance.now();  const ease = (t) => 1 - Math.pow(1 - t, 3); // ease out cubic   function frame(now) {    const progress = Math.min(1, (now - start) / duration);    el.textContent = Math.round(target * ease(progress)).toLocaleString("en-IN");    if (progress < 1) requestAnimationFrame(frame);  }  requestAnimationFrame(frame);} countUp(document.querySelector("#visitors"), 125000); // timersconst hint = setTimeout(() => console.log("Still there?"), 30_000);clearTimeout(hint); const clock = setInterval(() => {  document.querySelector("#clock").textContent = new Date().toLocaleTimeString();}, 1000);// clearInterval(clock) when the component goes away

Why it matters Basing progress on elapsed time rather than frame count keeps the animation the same length on 60 Hz and 120 Hz screens.

Phase 07, modules 57 to 66

Building blocks

Media, cards and UI components

The pieces every site reuses: cards, navbars, heroes, buttons, dialogs, tabs, carousels, toasts and icons.

Module 57 of 97, phase 07

The most reused box on the web

Media items and card components

Mark as doneCompleted

A card groups an image or video, a title, short text and an action into one clickable unit. Media items are cards laid out horizontally, with the media beside the text.

In detail

Build cards from semantic parts: article for the card, img with aspect-ratio and object-fit for the media, a heading, and one link stretched over the card with a ::after overlay so the whole card is clickable without nesting links. Put cards in an auto fitting grid and let container queries switch to the media item layout when there is room.

Live previewrendered from the code below

card.html

HTML

<article class="card">  <img src="flex.jpg" alt="" />  <h3><a href="/flexbox">Flexbox in 5 minutes</a></h3>  <p>6 min read</p></article>

<ul class="cards" role="list">  <li>    <article class="card">      <img class="card__media" src="flex.jpg" alt="" width="640" height="360" loading="lazy" />      <div class="card__body">        <span class="tag">#css</span>        <h3 class="card__title"><a href="/flexbox">Flexbox in 5 minutes</a></h3>        <p class="card__meta">6 min read</p>      </div>    </article>  </li></ul> <style>  .cards { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); padding: 0; list-style: none; }  .card { position: relative; border: 1px solid #dde6f7; border-radius: 16px; overflow: hidden; background: #fff; transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s; }  .card:hover { transform: translateY(-4px) scale(1.02); border-color: #1d63ed; box-shadow: 0 18px 40px -22px rgba(29, 99, 237, 0.6); }  .card__media { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }  .card__body { padding: 12px 14px; }  .card__title a { color: inherit; text-decoration: none; }  .card__title a::after { content: ""; position: absolute; inset: 0; } /* whole card clickable */  .card:focus-within { outline: 3px solid #1d63ed; }</style>

Why it matters The stretched ::after link makes the whole card clickable while screen readers still hear one clear link, the title.

Module 58 of 97, phase 07

Navbar and hamburger menu

Mark as doneCompleted

A navbar holds the logo and main links. On small screens the links collapse behind a hamburger button that toggles a panel.

In detail

Use a real button with aria-expanded and aria-controls, and update both when it toggles. Keep the menu in the HTML so it works and is indexable even before JavaScript loads. Close it on Escape and when a link is chosen, and trap nothing: let Tab move naturally.

Live previewrendered from the code below

navbar.html

HTML

<button class="burger" aria-expanded="false" aria-controls="menu">Menu</button><ul id="menu" class="menu">...</ul>

<header class="nav">  <a class="logo" href="/">Site</a>  <button class="burger" aria-expanded="false" aria-controls="menu" aria-label="Open menu">    <span></span><span></span><span></span>  </button>  <ul id="menu" class="menu">    <li><a href="#features">Features</a></li>    <li><a href="#pricing">Pricing</a></li>    <li><a href="#faq">FAQ</a></li>  </ul></header> <style>  .nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 20px; }  .menu { display: flex; gap: 20px; list-style: none; margin: 0; padding: 0; }  .burger { display: none; }  @media (max-width: 700px) {    .burger { display: grid; gap: 5px; padding: 10px; background: none; border: 0; }    .burger span { width: 22px; height: 2px; background: currentColor; transition: transform 0.3s, opacity 0.3s; }    .menu { position: absolute; inset: 60px 0 auto; flex-direction: column; padding: 16px 20px; background: white; display: none; }    .menu.open { display: flex; }    .burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }    .burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }    .burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }  }</style> <script>  const burger = document.querySelector(".burger");  const menu = document.getElementById("menu");  const setOpen = (open) => {    burger.setAttribute("aria-expanded", String(open));    menu.classList.toggle("open", open);  };  burger.addEventListener("click", () => setOpen(burger.getAttribute("aria-expanded") !== "true"));  menu.addEventListener("click", (e) => e.target.closest("a") && setOpen(false));  document.addEventListener("keydown", (e) => e.key === "Escape" && setOpen(false));</script>

Why it matters Styling from [aria-expanded="true"] keeps visual state and accessible state in sync, because one attribute drives both.

Module 59 of 97, phase 07

First impressions

Hero sections

Mark as doneCompleted

The hero is the first screen: a headline, a supporting sentence, one primary action, and usually an illustration or image.

In detail

Lead with what the site does in plain words. Give the main button the strongest colour and a secondary link a quieter style. Use a two column grid that stacks on phones, clamp() for the headline size, and preload the hero image so it is not your slowest paint.

Live previewrendered from the code below

hero.html

HTML

<section class="hero">  <h1>Ship websites faster</h1>  <p>Everything you need, nothing you do not.</p>  <a class="btn" href="#start">Get started</a></section>

<section class="hero">  <div class="hero__copy">    <p class="hero__kicker">New guide</p>    <h1 class="hero__title">Build the web, one block at a time</h1>    <p class="hero__lede">From raw HTML to a complete, responsive, animated page.</p>    <div class="hero__ctas">      <a class="btn btn--primary" href="#start">Start reading</a>      <a class="btn" href="#modules">See all modules</a>    </div>  </div>  <img class="hero__art" src="hero.svg" alt="" width="560" height="460" fetchpriority="high" /></section> <style>  .hero { display: grid; grid-template-columns: 1.1fr 0.9fr; align-items: center; gap: 32px; min-height: min(90dvh, 760px); padding: 48px 24px; }  .hero__title { font-size: clamp(2.2rem, 1.2rem + 4vw, 4.2rem); line-height: 1.02; letter-spacing: -0.04em; margin: 8px 0 0; }  .hero__lede { font-size: 1.15rem; max-width: 52ch; color: #4a5872; }  .hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }  @media (max-width: 800px) { .hero { grid-template-columns: 1fr; } }</style>

Why it matters fetchpriority="high" tells the browser to fetch the hero image before other images, which usually improves Largest Contentful Paint.

Module 60 of 97, phase 07

Things that ask to be pressed

Buttons, links and chips

Mark as doneCompleted

Buttons perform actions, links go places, and chips are small pill shaped labels or filters. Getting the right element matters more than the styling.

In detail

Use button for actions and a for navigation, even if they look the same. Give interactive elements a minimum target of about 44 pixels, visible hover, active and focus states, and a disabled style. Chips work well as hashtag style links to topic pages, which also helps search engines connect related content.

Live previewrendered from the code below

buttons.css

CSS

.btn { padding: 10px 18px; border-radius: 10px; }.chip { padding: 4px 10px; border-radius: 999px; }

.btn {  display: inline-flex;  align-items: center;  gap: 8px;  min-height: 44px;  padding: 10px 18px;  border: 1px solid #c9d6ef;  border-radius: 10px;  background: white;  color: #0b1a33;  font: 600 0.95rem/1 system-ui, sans-serif;  cursor: pointer;  transition: transform 0.15s, background-color 0.15s, border-color 0.15s;}.btn:hover { transform: translateY(-1px); border-color: #1d63ed; }.btn:active { transform: translateY(1px); }.btn:focus-visible { outline: 3px solid #1d63ed; outline-offset: 2px; }.btn--primary { background: #1d63ed; border-color: #1d63ed; color: white; }.btn--primary:hover { background: #1450c4; }.btn:disabled { opacity: 0.5; pointer-events: none; } .chip {  display: inline-flex;  align-items: center;  gap: 4px;  padding: 4px 10px;  border-radius: 999px;  background: #eef4ff;  color: #1d63ed;  font: 600 0.8rem/1.4 ui-monospace, monospace;  text-decoration: none;}.chip::before { content: "#"; opacity: 0.7; }

Why it matters min-height: 44px keeps buttons comfortable to tap on phones without changing how they look on desktop.

Module 61 of 97, phase 07

Modals with the dialog element

Mark as doneCompleted

The native dialog element opens as a modal with showModal(), traps focus, closes on Escape, and dims the page with ::backdrop, all without a library.

In detail

Give the dialog a heading and a close button, return focus to the opener when it closes, and use method="dialog" on a form to close it with a value. Keep modals for decisions that block the task; use toasts and inline messages for everything else.

Live previewrendered from the code below

dialog.html

HTML

<dialog id="confirm"><form method="dialog"><button value="yes">Delete</button></form></dialog><script>document.getElementById("confirm").showModal();</script>

<button id="open-delete">Delete project</button> <dialog id="confirm" aria-labelledby="confirm-title">  <form method="dialog">    <h2 id="confirm-title">Delete this project?</h2>    <p>This cannot be undone.</p>    <menu>      <button value="cancel" autofocus>Cancel</button>      <button value="delete" class="danger">Delete</button>    </menu>  </form></dialog> <style>  dialog { border: 0; border-radius: 16px; padding: 24px; width: min(420px, 92vw); box-shadow: 0 30px 80px -30px rgba(0, 20, 60, 0.6); }  dialog::backdrop { background: rgba(11, 33, 74, 0.45); backdrop-filter: blur(3px); }  dialog[open] { animation: pop 0.2s ease-out; }  @keyframes pop { from { opacity: 0; scale: 0.96; } }  menu { display: flex; justify-content: flex-end; gap: 8px; padding: 0; }  .danger { background: #d93025; color: white; }</style> <script>  const dialog = document.getElementById("confirm");  document.getElementById("open-delete").addEventListener("click", () => dialog.showModal());  dialog.addEventListener("close", () => {    if (dialog.returnValue === "delete") console.log("deleting");  });</script>

Why it matters method="dialog" closes the dialog and sets returnValue to the clicked button's value, no submit handler needed.

Module 62 of 97, phase 07

Show one thing at a time

Tabs and accordions

Mark as doneCompleted

Accordions stack collapsible sections and tabs switch between panels. details and summary give you an accessible accordion with no JavaScript at all.

In detail

Add a shared name attribute to details elements to make them exclusive, so opening one closes the others. Tabs need role="tablist", role="tab" with aria-selected and aria-controls, and arrow key navigation; keep content in the HTML so it is indexable.

Live previewrendered from the code below

faq.html

HTML

<details name="faq"><summary>What is HTML?</summary><p>The structure of a page.</p></details>

<section class="faq">  <details name="faq" open>    <summary>What is HTML?</summary>    <p>The language that structures content on a web page.</p>  </details>  <details name="faq">    <summary>What is CSS?</summary>    <p>The language that styles that content.</p>  </details>  <details name="faq">    <summary>What is JavaScript?</summary>    <p>The language that makes the page interactive.</p>  </details></section> <style>  .faq details { border: 1px solid #dde6f7; border-radius: 12px; padding: 12px 16px; margin-bottom: 8px; background: white; }  .faq summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; justify-content: space-between; }  .faq summary::after { content: "+"; color: #1d63ed; transition: rotate 0.2s; }  .faq details[open] summary::after { rotate: 45deg; }</style>

Why it matters Sharing name="faq" across details turns them into an exclusive accordion natively in current browsers.

Module 63 of 97, phase 07

Swipe through, no library

Carousels with scroll snap

Mark as doneCompleted

A horizontal list with overflow and scroll-snap makes a swipeable carousel that works with touch, trackpads and keyboards, using only CSS.

In detail

Each slide snaps into place with scroll-snap-align. Add previous and next buttons that call scrollBy for mouse users, and keep autoplay off or pausable. Native scrolling is smoother and more accessible than most JavaScript sliders.

Live previewrendered from the code below

carousel.css

CSS

.track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; }.slide { flex: 0 0 80%; scroll-snap-align: center; }

.track {  display: flex;  gap: 12px;  overflow-x: auto;  scroll-snap-type: x mandatory;  scroll-padding-inline: 16px;  overscroll-behavior-x: contain;  scrollbar-width: none;  padding: 4px 16px 12px;}.track::-webkit-scrollbar { display: none; } .slide {  flex: 0 0 min(80%, 340px);  scroll-snap-align: center;  border-radius: 16px;  aspect-ratio: 4 / 3;} /* JS for buttons:  next.onclick = () => track.scrollBy({ left: track.clientWidth * 0.8, behavior: "smooth" });  prev.onclick = () => track.scrollBy({ left: -track.clientWidth * 0.8, behavior: "smooth" });*/

Why it matters overscroll-behavior-x: contain stops a horizontal swipe from triggering the browser's back gesture at the end of the track.

Module 64 of 97, phase 07

A quiet tap on the shoulder

Toasts and notifications

Mark as doneCompleted

A toast is a short message that appears briefly in a corner to confirm an action, such as Saved or Copied, then disappears.

In detail

Put toasts in a container with role="status" or aria-live="polite" so screen readers announce them. Do not hide errors that need action in a toast, and pause the timer on hover. The popover attribute is a modern way to layer such UI above everything without z-index battles.

Live previewrendered from the code below

toast.js

JavaScript

function toast(text) {  const el = Object.assign(document.createElement("div"), { className: "toast", textContent: text });  region.append(el); setTimeout(() => el.remove(), 3000);}

// <div id="toasts" class="toasts" role="status" aria-live="polite"></div>const region = document.getElementById("toasts"); export function toast(text, { timeout = 3000, tone = "info" } = {}) {  const el = document.createElement("div");  el.className = `toast toast--${tone}`;  el.textContent = text;  region.append(el);   let timer = setTimeout(close, timeout);  el.addEventListener("mouseenter", () => clearTimeout(timer));  el.addEventListener("mouseleave", () => (timer = setTimeout(close, 1200)));   function close() {    el.classList.add("leaving");    el.addEventListener("animationend", () => el.remove(), { once: true });  }} /* CSS.toasts { position: fixed; right: 16px; bottom: 16px; display: grid; gap: 8px; z-index: 50; }.toast { padding: 10px 14px; border-radius: 12px; background: #0b214a; color: white; animation: in .25s ease-out; }.toast.leaving { animation: out .2s ease-in forwards; }@keyframes in { from { opacity: 0; translate: 0 10px; } }@keyframes out { to { opacity: 0; translate: 0 10px; } }*/

Why it matters A polite live region announces the toast without interrupting what the screen reader was saying.

Module 65 of 97, phase 07

Sharp at every size

Icons and SVG

Mark as doneCompleted

SVG draws icons and illustrations with vectors that stay sharp at any size and can be coloured with CSS. Sprite sheets and icon sets like Iconify make large icon libraries easy.

In detail

Inline SVG with fill="currentColor" inherits text colour, so icons follow themes automatically. A sprite with symbol and use avoids repeating paths. Decorative icons get aria-hidden="true"; meaningful icons need a label. Icon fonts are outdated: they blur, fail to load and confuse screen readers.

Live previewrendered from the code below

icons.html

HTML

<svg class="icon" aria-hidden="true"><use href="#i-check" /></svg>

<!-- sprite once, hidden, usually at the top of body --><svg width="0" height="0" style="position:absolute" aria-hidden="true">  <symbol id="i-check" viewBox="0 0 24 24">    <path d="M5 12l5 5L20 7" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" />  </symbol>  <symbol id="i-heart" viewBox="0 0 24 24">    <path d="M12 21s-7-4.5-9.5-9A5.5 5.5 0 0 1 12 6a5.5 5.5 0 0 1 9.5 6C19 16.5 12 21 12 21z" fill="currentColor" />  </symbol></svg> <!-- reuse anywhere --><button class="btn">  <svg class="icon" aria-hidden="true"><use href="#i-check" /></svg>  Saved</button><span class="like"><svg class="icon" role="img" aria-label="Liked"><use href="#i-heart" /></svg></span> <style>  .icon { width: 1.2em; height: 1.2em; vertical-align: -0.2em; }  .like { color: #d93025; }       /* currentColor picks this up */</style>

Why it matters currentColor means one icon file works in light mode, dark mode and every button colour.

Module 66 of 97, phase 07

Fast pictures

Image and media performance

Mark as doneCompleted

Images are usually the heaviest part of a page. Right sizing, modern formats, lazy loading and reserved space make them fast and stable.

In detail

Export at the largest size actually displayed, compress, and prefer AVIF or WebP. Set width and height or aspect-ratio to avoid layout shift. Lazy load below the fold, but never the hero. Use a CDN that resizes on the fly when you have many images.

images.html

HTML

<img src="photo-800.avif" width="800" height="600" alt="..." loading="lazy" decoding="async" />

<!-- hero: load early, never lazy --><img src="hero-1200.avif" width="1200" height="700" alt="Team at work" fetchpriority="high" /> <!-- below the fold: lazy and async decoding --><img  src="gallery-1-800.avif"  srcset="gallery-1-400.avif 400w, gallery-1-800.avif 800w"  sizes="(max-width: 600px) 100vw, 400px"  width="800"  height="600"  alt="Close up of the dashboard"  loading="lazy"  decoding="async"/> <style>  img { max-width: 100%; height: auto; }              /* keep ratio while fluid */  .thumb { aspect-ratio: 1; object-fit: cover; }      /* square crops from any photo */  .blur-up { background: #dfe8fa; }                   /* placeholder colour while loading */</style>

Why it matters width and height let the browser reserve the right space before the image arrives, which prevents layout shift.

Phase 08, modules 67 to 71

One complete page

Assembling a single page website

Putting every block together into one page with scroll reveals, smooth scrolling, parallax, themes and shortcuts.

Module 67 of 97, phase 08

Every block in its place

Assembling a complete single page

Mark as doneCompleted

A single page website stacks sections on one page: header and navigation, hero, features, cards, testimonials, FAQ and footer, with in page links between them.

In detail

Start with semantic HTML for every section, then a design token layer, layout with grid and flexbox, and components. Add JavaScript last for the hamburger, theme toggle and reveals, so the page still works if a script fails. Give each section an id for deep links and scroll-margin-top so headings are not hidden under a sticky header.

01StructureSemantic HTML for every section, readable with CSS off.
02TokensColours, type and spacing as custom properties, light and dark.
03LayoutGrid for the page, flexbox inside components.
04ComponentsNavbar, hero, cards, chips, tabs, dialog, footer.
05BehaviourHamburger, theme toggle, shortcuts, reveals.
06PolishPerformance, accessibility and SEO checks.

index.html

HTML

<header>...</header><main><section id="hero">...</section><section id="features">...</section></main><footer>...</footer>

<!doctype html><html lang="en">  <head>    <meta charset="utf-8" />    <meta name="viewport" content="width=device-width, initial-scale=1" />    <title>Lumen: build pages fast</title>    <meta name="description" content="A single page site assembled from semantic sections." />    <link rel="stylesheet" href="css/tokens.css" />    <link rel="stylesheet" href="css/layout.css" />    <link rel="stylesheet" href="css/components.css" />    <script type="module" src="js/main.js"></script>  </head>  <body>    <a class="skip" href="#main">Skip to content</a>    <header class="nav">...</header>    <main id="main">      <section id="hero" class="hero">...</section>      <section id="features" class="section reveal">...</section>      <section id="articles" class="section reveal"><ul class="cards">...</ul></section>      <section id="faq" class="section reveal">...</section>    </main>    <footer class="footer">...</footer>    <div id="toasts" class="toasts" role="status" aria-live="polite"></div>  </body></html> /* css/layout.css */.section { padding-block: clamp(48px, 8vw, 96px); scroll-margin-top: 72px; }.container { width: min(1120px, 100% - 32px); margin-inline: auto; }

Why it matters width: min(1120px, 100% - 32px) is a one line container that is fluid on phones and capped on desktops.

Module 68 of 97, phase 08

Content that arrives on cue

Scroll reveal animations

Mark as doneCompleted

Sections fade and slide in as they enter the viewport. IntersectionObserver adds a class once, and CSS does the animation.

In detail

Start content visible and only hide it when JavaScript is running, so nothing stays invisible if a script fails. Animate opacity and transform only, reveal each element once, and stagger children with a CSS variable for delay. Respect prefers-reduced-motion by skipping the effect.

reveal.js

JavaScript

const io = new IntersectionObserver((es) => es.forEach((e) => e.isIntersecting && e.target.classList.add("in")));document.querySelectorAll(".reveal").forEach((el) => io.observe(el));

// js/reveal.jsconst reduce = matchMedia("(prefers-reduced-motion: reduce)").matches;document.documentElement.classList.add("js"); if (!reduce) {  const io = new IntersectionObserver(    (entries) => {      for (const entry of entries) {        if (!entry.isIntersecting) continue;        entry.target.classList.add("in");        io.unobserve(entry.target);          // reveal once      }    },    { threshold: 0.15, rootMargin: "0px 0px -10% 0px" },  );  document.querySelectorAll(".reveal").forEach((el, i) => {    el.style.setProperty("--delay", `${(i % 4) * 80}ms`);    io.observe(el);  });} else {  document.querySelectorAll(".reveal").forEach((el) => el.classList.add("in"));} /* CSS.js .reveal { opacity: 0; translate: 0 24px; transition: opacity .6s ease var(--delay, 0ms), translate .6s ease var(--delay, 0ms); }.js .reveal.in { opacity: 1; translate: 0 0; }*/

Why it matters Hiding only under a .js class means search engines and people without JavaScript always see the content.

Module 69 of 97, phase 08

Smooth scroll and depth

Lenis smooth scrolling and parallax

Mark as doneCompleted

Lenis smooths wheel and trackpad scrolling while keeping native scroll behaviour. Parallax moves layers at different speeds as you scroll to suggest depth.

In detail

Create one Lenis instance, drive it from requestAnimationFrame, and use lenis.scrollTo for in page links. For parallax, read each layer's position on scroll and translate it by a fraction of its distance from the centre of the screen. Turn both off for prefers-reduced-motion, and mark inner scroll areas with data-lenis-prevent.

smooth.js

JavaScript

const lenis = new Lenis({ lerp: 0.1 });function raf(t) { lenis.raf(t); requestAnimationFrame(raf); }requestAnimationFrame(raf);

// <script src="https://cdn.jsdelivr.net/npm/lenis@1.3.26/dist/lenis.min.js"></script>const reduce = matchMedia("(prefers-reduced-motion: reduce)").matches;let lenis = null; if (!reduce) {  lenis = new Lenis({ lerp: 0.1, smoothWheel: true });  const raf = (time) => {    lenis.raf(time);    requestAnimationFrame(raf);  };  requestAnimationFrame(raf);} // in page links glide instead of jumpingdocument.addEventListener("click", (e) => {  const link = e.target.closest('a[href^="#"]');  const target = link && document.querySelector(link.getAttribute("href"));  if (!target) return;  e.preventDefault();  lenis ? lenis.scrollTo(target, { offset: -72 }) : target.scrollIntoView({ behavior: "smooth" });}); // parallax: <div data-speed="-0.15"> moves slower than the pageconst layers = [...document.querySelectorAll("[data-speed]")];function parallax() {  const mid = innerHeight / 2;  for (const el of layers) {    const box = el.parentElement.getBoundingClientRect();    const offset = (box.top + box.height / 2 - mid) * Number(el.dataset.speed);    el.style.transform = `translate3d(0, ${offset.toFixed(1)}px, 0)`;  }}if (!reduce) (lenis ? lenis.on("scroll", parallax) : addEventListener("scroll", parallax, { passive: true }));parallax(); /* CSS required by Lenis *//* html.lenis, html.lenis body { height: auto; } *//* .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } */

Why it matters Measuring each layer against the centre of the viewport keeps parallax offsets small and symmetrical, so nothing drifts off screen.

Module 70 of 97, phase 08

Light or dark, your call

A theme toggle that remembers

Mark as doneCompleted

A theme toggle sets data-theme on the html element, saves the choice, and restores it before the page paints so there is no flash of the wrong theme.

In detail

Read the saved choice in a tiny inline script in the head, before the stylesheet applies, then fall back to the system preference. Update aria-pressed on the button and the theme-color meta tag so the mobile browser bar matches.

theme.js

HTML

const next = root.dataset.theme === "dark" ? "light" : "dark";root.dataset.theme = next; localStorage.setItem("theme", next);

<!-- in <head>, before CSS: prevents a flash of the wrong theme --><script>  try {    const saved = localStorage.getItem("theme");    if (saved) document.documentElement.dataset.theme = saved;  } catch {}</script> <!-- js/theme.js --><script type="module">  const root = document.documentElement;  const button = document.querySelector("#theme");   const current = () =>    root.dataset.theme ?? (matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");   function apply(theme) {    root.dataset.theme = theme;    button.setAttribute("aria-pressed", String(theme === "dark"));    document.querySelector('meta[name="theme-color"]')?.setAttribute("content", theme === "dark" ? "#0a1020" : "#f4f7fc");    try { localStorage.setItem("theme", theme); } catch {}  }   apply(current());  button.addEventListener("click", () => apply(current() === "dark" ? "light" : "dark"));</script>

Why it matters The inline head script runs before first paint, which is the only way to avoid a white flash for people who chose dark.

Module 71 of 97, phase 08

Power at your fingertips

Keyboard shortcuts and full screen

Mark as doneCompleted

Single key shortcuts such as T for theme, F for full screen, M for menu and slash for search make a long page fast to use, as long as they never fire while typing.

In detail

Listen for keydown on document, ignore events with modifier keys and events from inputs, textareas and contenteditable. Document the shortcuts on the page. The Fullscreen API toggles full screen with requestFullscreen and exitFullscreen, and fires fullscreenchange so your button can stay in sync.

shortcuts.js

JavaScript

document.addEventListener("keydown", (e) => {  if (e.target.closest("input, textarea, [contenteditable]")) return;  if (e.key === "t") toggleTheme();});

const actions = {  t: () => toggleTheme(),  f: () => toggleFullscreen(),  m: () => toggleMenu(),  "/": () => document.querySelector("#search")?.focus(),}; document.addEventListener("keydown", (event) => {  if (event.metaKey || event.ctrlKey || event.altKey) return;  if (event.target.closest("input, textarea, select, [contenteditable]")) return;   const action = actions[event.key.toLowerCase()];  if (!action) return;  event.preventDefault();  action();}); function toggleFullscreen() {  if (document.fullscreenElement) document.exitFullscreen();  else document.documentElement.requestFullscreen?.();} document.addEventListener("fullscreenchange", () => {  document.querySelector("#fs")?.setAttribute("aria-pressed", String(!!document.fullscreenElement));});

Why it matters Skipping keys typed into fields is what keeps single letter shortcuts from hijacking a search box.

Phase 09, modules 72 to 77

Styling at scale

Sass, Tailwind, Bootstrap and CSS in JS

Why CSS libraries exist, what each one trades, and how to pick.

Module 72 of 97, phase 09

CSS with superpowers, compiled

Sass and preprocessors

Mark as doneCompleted

Sass adds variables, nesting, mixins, functions and partials to CSS, then compiles to plain CSS. It was the first big answer to large stylesheets.

In detail

Many Sass features now exist natively: custom properties, nesting and color-mix. Sass still shines for loops that generate utility classes, mixins for repeated patterns, and splitting styles into partials joined with @use. Vite and most frameworks compile .scss files automatically once the sass package is installed.

styles.scss

CSS

$brand: #1d63ed;@mixin card { border-radius: 14px; padding: 16px; }.post { @include card; &:hover { border-color: $brand; } }

// _tokens.scss$brand: #1d63ed;$radius: 14px;$breakpoints: (md: 700px, lg: 1100px); // _mixins.scss@use "sass:map";@mixin up($size) {  @media (min-width: map.get($breakpoints, $size)) { @content; }}@mixin card {  border-radius: $radius;  padding: 16px;  border: 1px solid rgba($brand, 0.2);} // main.scss@use "tokens" as *;@use "mixins" as *; .post {  @include card;  &:hover { border-color: $brand; }  &__title { font-size: 1.1rem; }   @include up(md) { display: grid; grid-template-columns: 160px 1fr; }} // generate spacing utilities with a loop@each $n in (1, 2, 3, 4) {  .mt-#{$n} { margin-top: #{$n * 4}px; }}

Why it matters The @each loop writes four utility classes from one rule, something plain CSS still cannot do.

Module 73 of 97, phase 09

Style without leaving the markup

Tailwind CSS (utility first)

Mark as doneCompleted

Tailwind gives you small single purpose classes such as flex, p-4 and text-blue-600 that you combine in HTML. A build step keeps only the classes you use.

In detail

Utility first trades long class lists for speed and consistency: spacing, colours and breakpoints come from one theme, and there is no naming or dead CSS. Prefixes handle states and breakpoints: hover:, md:, dark:. Extract repeated patterns into components in your framework rather than into custom CSS classes.

card-tailwind.html

HTML

<article class="rounded-2xl border p-4 hover:scale-[1.02] transition">...</article>

<!-- npm install tailwindcss @tailwindcss/vite, then @import "tailwindcss"; in your CSS --><article  class="group relative overflow-hidden rounded-2xl border border-slate-200 bg-white transition         hover:-translate-y-1 hover:scale-[1.02] hover:border-blue-600 hover:shadow-xl         dark:border-slate-700 dark:bg-slate-900">  <img class="aspect-video w-full object-cover" src="flex.jpg" alt="" />  <div class="p-4">    <span class="rounded-full bg-blue-50 px-2 py-0.5 font-mono text-xs font-semibold text-blue-600">#css</span>    <h3 class="mt-2 text-lg font-bold text-slate-900 dark:text-white">      <a href="/flexbox" class="after:absolute after:inset-0">Flexbox in 5 minutes</a>    </h3>    <p class="text-sm text-slate-500">6 min read</p>  </div></article> <!-- responsive grid: one column, then two, then three --><ul class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">...</ul>

Why it matters Every hover:, dark: and lg: variant here is generated only because it appears in your files, so the shipped CSS stays tiny.

Module 74 of 97, phase 09

Ready made parts

Bootstrap and component frameworks

Mark as doneCompleted

Bootstrap ships a grid, ready styled components such as navbars, cards and modals, and a JavaScript bundle to make them work. It is the fastest way to a consistent, conventional site.

In detail

Use the 12 column grid with container, row and col classes, add components by copying their markup, and customise colours through Sass variables or CSS variables. The trade off is that Bootstrap sites look alike unless you theme them, and you ship styles for components you may not use.

bootstrap.html

HTML

<div class="container"><div class="row"><div class="col-md-4"><div class="card">...</div></div></div></div>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" /> <div class="container py-5">  <div class="row g-4">    <div class="col-12 col-md-6 col-lg-4">      <div class="card h-100 shadow-sm">        <img src="flex.jpg" class="card-img-top" alt="" />        <div class="card-body">          <span class="badge text-bg-primary">#css</span>          <h5 class="card-title mt-2">Flexbox in 5 minutes</h5>          <p class="card-text text-secondary">6 min read</p>          <a href="/flexbox" class="btn btn-primary stretched-link">Read</a>        </div>      </div>    </div>  </div></div> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

Why it matters stretched-link is Bootstrap's version of the ::after overlay trick that makes the whole card clickable.

Module 75 of 97, phase 09

Styles written in JavaScript

CSS in JS (JSS, styled-components, Emotion)

Mark as doneCompleted

CSS in JS writes styles in JavaScript files next to components, generates unique class names, and can change styles from props. JSS, styled-components and Emotion are the best known.

In detail

It solved global naming clashes and made dynamic styles easy in React. The cost is runtime work in the browser and friction with server components. Newer zero runtime tools such as vanilla-extract and Panda extract static CSS at build time, and many teams now prefer CSS Modules or Tailwind instead.

Button.jsx

JavaScript

const Button = styled.button`  background: ${(p) => (p.$primary ? "#1d63ed" : "white")};`;

import styled from "styled-components";import { createUseStyles } from "react-jss"; // styled-components: a component with styles attachedconst Button = styled.button`  padding: 10px 18px;  border-radius: 10px;  border: 1px solid #c9d6ef;  background: ${(p) => (p.$primary ? "#1d63ed" : "white")};  color: ${(p) => (p.$primary ? "white" : "#0b1a33")};  &:hover { transform: translateY(-1px); }`; // JSS: an object of styles turned into unique class namesconst useStyles = createUseStyles({  card: {    padding: 16,    borderRadius: 14,    "&:hover": { borderColor: "#1d63ed" },  },}); export function Card({ title }) {  const classes = useStyles();  return (    <article className={classes.card}>      <h3>{title}</h3>      <Button $primary>Read</Button>    </article>  );}

Why it matters The $primary prop is a transient prop: styled-components uses it for styling but does not pass it to the DOM.

Module 76 of 97, phase 09

Local by default

CSS Modules

Mark as doneCompleted

CSS Modules are ordinary CSS files whose class names are made unique at build time, so .title in one component never clashes with .title in another.

In detail

Name the file Card.module.css, import it as an object, and use styles.title as the class. You keep plain CSS, zero runtime cost and full support for media queries and variables. Vite and Next.js support CSS Modules without configuration.

Card.module.css

CSS

.card { border-radius: 14px; }/* import styles from "./Card.module.css"; <article className={styles.card}> */

/* Card.module.css */.card {  border: 1px solid #dde6f7;  border-radius: 14px;  padding: 16px;  transition: transform 0.2s;}.card:hover { transform: translateY(-3px); }.title { margin: 0 0 6px; font-size: 1.1rem; }.featured { composes: card; outline: 2px solid #1d63ed; } /* Card.jsximport styles from "./Card.module.css"; export function Card({ title, featured }) {  return (    <article className={featured ? styles.featured : styles.card}>      <h3 className={styles.title}>{title}</h3>    </article>  );}// renders something like class="Card_card__x7Kq2"*/

Why it matters composes reuses another class's rules inside the module, which keeps variants DRY without global names.

Module 77 of 97, phase 09

Do not build every button yourself

Component libraries and design systems

Mark as doneCompleted

Component libraries such as MUI, Chakra, Radix and shadcn/ui ship accessible, themeable components for frameworks. A design system is your own documented set of tokens and components.

In detail

Headless libraries like Radix give behaviour and accessibility with no styles, so you bring Tailwind or CSS. Styled libraries like MUI give a complete look. shadcn/ui copies component source into your project so you own it. Whatever you pick, define tokens first so components stay consistent.

Ways to style a site, compared
Approach	You write	Ships	Strength	Watch out for
Plain CSS	Selectors and properties	Only your CSS	No build, full control	Naming collisions at scale
Sass	SCSS with nesting and mixins	Compiled CSS	Organisation, reuse	Needs a build step
Tailwind	Utility classes in HTML	Only used utilities	Speed, consistency	Long class lists
Bootstrap	Component classes	Framework CSS and JS	Fast prototypes	Sites look alike
CSS Modules	Scoped .module.css files	Hashed class names	No collisions	Framework tooling needed
CSS in JS	Styles inside components	Runtime or extracted CSS	Dynamic styles	Runtime cost
Component libraries	Imported components	Pre built UI	Accessible behaviour	Customising deeply

Phase 10, modules 78 to 85

Why frameworks

React and Next.js

The problem plain DOM code runs into, how React solves it, and why Next.js wraps React for real websites.

Module 78 of 97, phase 10

When the page outgrows by hand

Why React and Next.js came up

Mark as doneCompleted

Plain JavaScript works until the interface has lots of state: you end up writing code that keeps the DOM in sync by hand. Frameworks let you describe what the UI should look like for a given state and update the DOM for you.

In detail

jQuery made DOM work easier but still manual. React, released by Facebook in 2013, introduced components and a declarative model: UI is a function of state. Single page apps rendered in the browser were slow to first paint and hard for search engines, so Next.js added server rendering, static generation, routing and image optimisation on top of React.

1991HTMLTim Berners-Lee publishes the first web pages.
1995JavaScriptBrendan Eich writes it in ten days at Netscape.
1996CSSStyling moves out of the markup.
2006jQueryWrite less, do more: one API over messy browsers.
2010AngularJSTwo way binding and single page apps go mainstream.
2013ReactComponents and UI as a function of state.
2014VueA gentler, progressive framework.
2016Next.jsReact with routing and server rendering built in.
2017TailwindUtility first CSS takes off.
2023Server componentsRendering moves back toward the server.

vanilla vs react

JavaScript

// vanilla: you update the DOM yourselfcount++; label.textContent = count; button.disabled = count >= 10;// react: you describe the result<button disabled={count >= 10}>{count}</button>

// ---------- Vanilla: imperative ----------let count = 0;const button = document.querySelector("#like");const label = document.querySelector("#like-count"); button.addEventListener("click", () => {  count++;  label.textContent = count;            // remember every place that shows count  button.disabled = count >= 10;        // and every rule that depends on it  button.classList.toggle("hot", count > 5);}); // ---------- React: declarative ----------import { useState } from "react"; export function LikeButton() {  const [count, setCount] = useState(0);  return (    <button disabled={count >= 10} className={count > 5 ? "hot" : ""} onClick={() => setCount(count + 1)}>      Like <span>{count}</span>    </button>  );}

Why it matters In React the UI is recalculated from state every time, so a new rule is one expression instead of another manual DOM update.

Module 79 of 97, phase 10

Lego for interfaces

React components, JSX and props

Mark as doneCompleted

A React component is a function that returns JSX, HTML like syntax inside JavaScript. Props pass data into components, and components compose into bigger ones.

In detail

JSX uses className instead of class and htmlFor instead of for, and wraps expressions in braces. Components start with a capital letter. Keep components small and pure: same props, same output. children lets a component wrap other markup, which is how layouts and cards are built.

Card.jsx

JavaScript

export function Card({ title, minutes, children }) {  return <article className="card"><h3>{title}</h3><p>{minutes} min</p>{children}</article>;}

// Card.jsxexport function Card({ title, minutes, tag = "web", image, children }) {  return (    <article className="card">      {image && <img className="card__media" src={image} alt="" />}      <div className="card__body">        <span className="chip">#{tag}</span>        <h3 className="card__title">{title}</h3>        <p className="card__meta">{minutes} min read</p>        {children}      </div>    </article>  );} // App.jsximport { Card } from "./Card.jsx"; export default function App() {  return (    <main className="cards">      <Card title="Flexbox in 5 minutes" minutes={6} tag="css" image="/flex.jpg">        <a href="/flexbox">Read</a>      </Card>      <Card title="Fetch like a pro" minutes={9} tag="js" />    </main>  );}

Why it matters children turns Card into a frame that any content can fill, which is the core of composition in React.

Module 80 of 97, phase 10

Memory and side effects

State and effects with hooks

Mark as doneCompleted

useState gives a component memory that triggers a re-render when it changes. useEffect runs side effects such as fetching data or subscribing to events after render.

In detail

Never mutate state; set a new value. Derive values during render instead of storing duplicates. Effects need a dependency array and a cleanup function for subscriptions and timers. Data fetching in modern apps usually moves to the framework, such as Next.js server components or a library like TanStack Query.

ThemeToggle.jsx

JavaScript

const [theme, setTheme] = useState("light");useEffect(() => { document.documentElement.dataset.theme = theme; }, [theme]);

import { useEffect, useState } from "react"; export function ThemeToggle() {  const [theme, setTheme] = useState(() => localStorage.getItem("theme") ?? "light");   // sync to the outside world after render  useEffect(() => {    document.documentElement.dataset.theme = theme;    localStorage.setItem("theme", theme);  }, [theme]);   // subscribe and clean up  useEffect(() => {    const onKey = (e) => e.key === "t" && setTheme((t) => (t === "dark" ? "light" : "dark"));    window.addEventListener("keydown", onKey);    return () => window.removeEventListener("keydown", onKey);  }, []);   return (    <button aria-pressed={theme === "dark"} onClick={() => setTheme((t) => (t === "dark" ? "light" : "dark"))}>      {theme === "dark" ? "Light mode" : "Dark mode"}    </button>  );}

Why it matters Passing a function to setTheme uses the latest value even when several updates happen quickly.

Module 81 of 97, phase 10

Many items, many inputs

Lists, keys and forms in React

Mark as doneCompleted

Render lists with map and give each item a stable key. Controlled inputs keep form values in state so React is the single source of truth.

In detail

Keys must be unique among siblings and stable, such as an id; using the array index breaks when items are reordered. Filter and sort during render. React 19 form actions let a form call a function directly with FormData, which simplifies submissions.

PostList.jsx

JavaScript

{posts.filter((p) => p.title.includes(q)).map((p) => <li key={p.id}>{p.title}</li>)}

import { useState } from "react"; const POSTS = [  { id: "flex", title: "Flexbox in 5 minutes", tag: "css" },  { id: "fetch", title: "Fetch like a pro", tag: "js" },  { id: "sem", title: "Semantic layout", tag: "html" },]; export function PostList() {  const [query, setQuery] = useState("");  const visible = POSTS.filter((p) => p.title.toLowerCase().includes(query.toLowerCase()));   return (    <section>      <label htmlFor="q">Search posts</label>      <input id="q" value={query} onChange={(e) => setQuery(e.target.value)} placeholder="Type to filter" />       <p aria-live="polite">{visible.length} of {POSTS.length} posts</p>      <ul>        {visible.map((post) => (          <li key={post.id}>            {post.title} <span className="chip">#{post.tag}</span>          </li>        ))}      </ul>    </section>  );}

Why it matters visible is calculated during render instead of stored in state, so it can never fall out of sync with the query.

Module 82 of 97, phase 10

React, ready for the real web

Why Next.js

Mark as doneCompleted

Next.js is a React framework that adds file based routing, server rendering, static generation, image and font optimisation, and API routes, so a React app becomes a fast, indexable website.

In detail

Plain React renders in the browser, so the first HTML is empty until JavaScript loads, which hurts speed and SEO. Next.js renders on the server or at build time and sends real HTML, then React takes over for interactivity. Server Components keep data fetching and heavy code on the server and send less JavaScript.

terminal

Shell

npx create-next-app@latest my-blogcd my-blog && npm run dev

# scaffold with TypeScript, ESLint, Tailwind and the App Routernpx create-next-app@latest my-blog --ts --eslint --tailwind --app cd my-blognpm run dev        # http://localhost:3000 with hot reloadnpm run build      # production build: prerenders static pagesnpm start          # run the production server

Why it matters The build output lists which routes are static and which are dynamic, which is the quickest way to understand how your site is served.

Module 83 of 97, phase 10

Folders become pages

Next.js App Router, layouts and metadata

Mark as doneCompleted

In the App Router, folders in app define routes, page.jsx renders a page, layout.jsx wraps pages with shared UI, and an exported metadata object writes the SEO tags.

In detail

Components are server components by default and can be async to fetch data directly. Add "use client" at the top of a file for state, effects and event handlers. Dynamic segments like [slug] read params, generateStaticParams prerenders them, and next/image and next/link optimise images and navigation.

app/blog/[slug]/page.jsx

JavaScript

export default async function Post({ params }) {  const post = await getPost((await params).slug);  return <article><h1>{post.title}</h1></article>;}

// app/layout.jsxexport const metadata = { title: { default: "My blog", template: "%s | My blog" } };export default function RootLayout({ children }) {  return (    <html lang="en">      <body>        <header>My blog</header>        {children}      </body>    </html>  );} // app/blog/[slug]/page.jsx  (a server component)import Image from "next/image";import { getPost, getAllSlugs } from "@/lib/posts";import LikeButton from "./LikeButton"; // a "use client" component export async function generateStaticParams() {  return (await getAllSlugs()).map((slug) => ({ slug }));} export async function generateMetadata({ params }) {  const post = await getPost((await params).slug);  return { title: post.title, description: post.excerpt, openGraph: { images: [post.cover] } };} export default async function PostPage({ params }) {  const post = await getPost((await params).slug);  return (    <article>      <h1>{post.title}</h1>      <Image src={post.cover} alt="" width={1200} height={630} priority />      <div dangerouslySetInnerHTML={{ __html: post.html }} />      <LikeButton slug={post.slug} />    </article>  );}

Why it matters generateStaticParams turns every post into static HTML at build time, so pages are as fast as plain files.

Module 84 of 97, phase 10

Where and when HTML is made

CSR, SSR, SSG and ISR

Mark as doneCompleted

Rendering strategy decides where HTML is built: in the browser (CSR), on the server per request (SSR), once at build time (SSG), or at build time with periodic refresh (ISR).

In detail

Static is fastest and cheapest, perfect for blogs and docs. Server rendering suits personalised or fast changing pages. Client rendering suits dashboards behind a login. Modern frameworks mix them per route, and streaming sends parts of a page as soon as they are ready.

Where and when the HTML is built
Strategy	HTML built	First load	Freshness	Good for
CSR, client side	In the browser by JavaScript	Slower, blank until JS runs	Always live	Dashboards behind a login
SSR, server side	On the server per request	Fast, full HTML	Always live	Personalised or fast changing pages
SSG, static	At build time	Fastest, from a CDN	Until the next build	Blogs, docs, marketing
ISR, incremental	At build, then regenerated	Fast, from a CDN	Refreshed on a timer or on demand	Large catalogs, news
Streaming and RSC	On the server in chunks	Fast, shell first	Live	Mixed pages in Next.js app router

Module 85 of 97, phase 10

Other ways to build

Vue, Svelte, Angular and Astro

Mark as doneCompleted

React is not the only option. Vue offers approachable templates, Svelte compiles components away, Angular is a full platform, and Astro ships zero JavaScript by default with islands of interactivity.

In detail

Each has a meta framework: Nuxt for Vue, SvelteKit for Svelte, Analog for Angular. Astro suits content sites and blogs because pages are static HTML unless a component opts into JavaScript. The core ideas, components, state, props and routing, transfer between all of them.

Counter.vue

HTML

<script setup>import { ref } from "vue"; const count = ref(0);</script><template><button @click="count++">{{ count }}</button></template>

<!-- Vue: Counter.vue --><script setup>import { ref } from "vue";const count = ref(0);</script><template>  <button @click="count++">Clicked {{ count }} times</button></template> <!-- Svelte 5: Counter.svelte --><script>  let count = $state(0);</script><button onclick={() => count++}>Clicked {count} times</button> <!-- Astro: a static page with one interactive island -->---import Counter from "../components/Counter.jsx";---<h1>Mostly static</h1><Counter client:visible />

Why it matters client:visible hydrates the counter only when it scrolls into view, so the rest of the page ships no JavaScript.

Phase 11, modules 86 to 94

Ship it

Tooling, performance, security and Docker

Packages, bundlers, types, quality checks, version control, speed, safety and shipping in a container.

Module 86 of 97, phase 11

Borrowing other people's code

npm, packages and package.json

Mark as doneCompleted

npm installs open source packages and records them in package.json. Scripts in package.json run common tasks such as dev, build and test.

In detail

dependencies ship with the app, devDependencies are only for building. The lockfile pins exact versions so every machine installs the same thing; commit it. Semantic versions read major.minor.patch, and a caret allows minor and patch updates. Check a package's size and maintenance before adding it.

package.json

JSON

{ "scripts": { "dev": "vite", "build": "vite build" }, "dependencies": { "lenis": "^1.3.26" } }

{  "name": "my-site",  "version": "1.0.0",  "private": true,  "type": "module",  "scripts": {    "dev": "vite",    "build": "vite build",    "preview": "vite preview",    "lint": "eslint .",    "format": "prettier --write ."  },  "dependencies": {    "lenis": "^1.3.26"  },  "devDependencies": {    "vite": "^7.0.0",    "eslint": "^9.0.0",    "prettier": "^3.3.0"  }}

Why it matters "type": "module" makes .js files ES modules in Node, matching how the browser treats your code.

Module 87 of 97, phase 11

From many files to a fast bundle

Vite and bundlers

Mark as doneCompleted

A bundler takes your modules, CSS and assets and produces optimised files for production. Vite serves files instantly in development and bundles with Rollup for production.

In detail

Vite gives a dev server with hot module replacement, supports TypeScript, JSX, CSS Modules, Sass and PostCSS out of the box, and hashes file names so browsers can cache them forever. Webpack, Parcel, esbuild and Turbopack solve the same problem with different trade offs.

terminal

Shell

npm create vite@latest my-site -- --template vanillacd my-site && npm install && npm run dev

# vanilla JS, React, Vue, Svelte and more templatesnpm create vite@latest my-site -- --template vanillacd my-sitenpm installnpm run dev        # instant dev server with hot reloadnpm run build      # outputs dist/ with hashed, minified filesnpm run preview    # serve the production build locally # dist/#   index.html#   assets/index-4f9a2c1b.js#   assets/index-91d0e7aa.css

Why it matters Hashed file names change whenever content changes, so you can cache assets for a year without serving stale code.

Module 88 of 97, phase 11

Catch mistakes before the browser does

TypeScript for the web

Mark as doneCompleted

TypeScript adds types to JavaScript so editors catch mistakes as you type: a missing property, a wrong argument, a possibly null element.

In detail

Types are erased at build time, so the browser still runs JavaScript. Start with type inference, add types to function parameters and shared data, and turn on strict mode early. querySelector returns Element | null, which forces you to handle a missing element instead of crashing.

cart.ts

TypeScript

type Item = { id: string; price: number };const total = (items: Item[]): number => items.reduce((s, i) => s + i.price, 0);

type Item = {  id: string;  name: string;  price: number;        // in paise  tags?: string[];      // optional}; function total(items: Item[]): number {  return items.reduce((sum, item) => sum + item.price, 0);} const badge = document.querySelector<HTMLSpanElement>("#cart-count");if (badge) badge.textContent = String(3);   // TypeScript forces the null check type Theme = "light" | "dark";function applyTheme(theme: Theme) {  document.documentElement.dataset.theme = theme;}applyTheme("dark");// applyTheme("blue");  // error: not assignable to type Theme

Why it matters A union of string literals such as "light" | "dark" turns typos into compile errors.

Module 89 of 97, phase 11

Consistent and careful

Linting and formatting: ESLint and Prettier

Mark as doneCompleted

Prettier formats code the same way for everyone, and ESLint flags likely bugs such as unused variables or missing awaits. Together they end style debates and catch mistakes early.

In detail

Run Prettier on save in your editor, ESLint in the editor and in CI, and a pre commit hook so bad code never lands. Stylelint does the same for CSS, and axe or eslint-plugin-jsx-a11y catch accessibility mistakes.

eslint.config.js

JavaScript

import js from "@eslint/js";export default [js.configs.recommended];

// eslint.config.js (flat config)import js from "@eslint/js";import globals from "globals"; export default [  js.configs.recommended,  {    languageOptions: {      ecmaVersion: "latest",      sourceType: "module",      globals: { ...globals.browser },    },    rules: {      "no-unused-vars": "warn",      eqeqeq: "error",      "prefer-const": "error",    },  },]; // .prettierrc// { "printWidth": 100, "singleQuote": false, "trailingComma": "all" }

Why it matters eqeqeq turns every == into an error, which removes a whole family of type coercion bugs.

Module 90 of 97, phase 11

A time machine for code

Git and GitHub

Mark as doneCompleted

Git records every change to your project so you can go back, branch off and merge. GitHub hosts repositories, reviews pull requests and runs automation.

In detail

Commit small, focused changes with clear messages. Work on a branch, open a pull request, and merge after review. A .gitignore keeps node_modules, builds and secrets out. GitHub Actions can lint, test, build and deploy on every push.

terminal

Shell

git init && git add . && git commit -m "Initial page"git switch -c feature/navbar

git initprintf "node_modules\ndist\n.env\n" > .gitignoregit add .git commit -m "Add semantic page skeleton" git switch -c feature/navbar# ...edit files...git add -p                         # stage chunk by chunkgit commit -m "Add responsive navbar with hamburger menu" git remote add origin git@github.com:me/my-site.gitgit push -u origin feature/navbar  # then open a pull request on GitHub git log --oneline --graph

Why it matters git add -p shows each change before staging it, which keeps unrelated edits out of a commit.

Module 91 of 97, phase 11

Fast is a feature

Web performance and Core Web Vitals

Mark as doneCompleted

Core Web Vitals measure real user experience: Largest Contentful Paint for loading, Interaction to Next Paint for responsiveness, and Cumulative Layout Shift for visual stability.

In detail

Aim for LCP under 2.5 seconds, INP under 200 milliseconds and CLS under 0.1. Ship less JavaScript, compress and cache assets, preload the hero image and fonts, reserve space for media, and break long tasks. Measure with Lighthouse in the lab and with real user data in the field.

vitals.js

JavaScript

import { onLCP, onINP, onCLS } from "web-vitals";onLCP(console.log); onINP(console.log); onCLS(console.log);

// npm install web-vitalsimport { onCLS, onINP, onLCP } from "web-vitals"; function send(metric) {  const body = JSON.stringify({ name: metric.name, value: metric.value, rating: metric.rating, page: location.pathname });  // sendBeacon survives the page being closed  navigator.sendBeacon?.("/analytics/vitals", body) || fetch("/analytics/vitals", { method: "POST", body, keepalive: true });} onLCP(send);onINP(send);onCLS(send); /* quick wins in HTML<link rel="preload" as="image" href="/hero.avif" fetchpriority="high"><link rel="preload" as="font" href="/fonts/inter.woff2" type="font/woff2" crossorigin><script src="/app.js" defer></script>*/

Why it matters Field data from real visitors catches slow phones and networks that a fast laptop running Lighthouse never sees.

Module 92 of 97, phase 11

Locks on every window

Web security basics

Mark as doneCompleted

The most common front end risks are cross site scripting (XSS), unsafe third party scripts, leaking secrets, and mixed content. HTTPS, careful DOM handling and a Content Security Policy prevent most of them.

In detail

Never put untrusted input into innerHTML; use textContent or a sanitiser. Keep API keys on the server, because anything in front end code is public. A CSP header limits where scripts can load from, Subresource Integrity checks CDN files, and cookies for sessions should be HttpOnly, Secure and SameSite.

safe-render.js

JavaScript

el.textContent = userInput;          // safe// el.innerHTML = userInput;         // XSS risk

const comment = new URLSearchParams(location.search).get("comment") ?? ""; // unsafe: a comment like <img src=x onerror=alert(1)> would run// output.innerHTML = comment; // safe: rendered as text, never parsed as HTMLconst output = document.querySelector("#comment");output.textContent = comment; // if you must render HTML from users, sanitise it first// import DOMPurify from "dompurify";// output.innerHTML = DOMPurify.sanitize(comment); /* response header from the serverContent-Security-Policy: default-src 'self'; script-src 'self' https://cdn.jsdelivr.net; img-src 'self' data:; object-src 'none'; base-uri 'self' <script src="https://cdn.jsdelivr.net/npm/lenis@1.3.26/dist/lenis.min.js"        integrity="sha384-..." crossorigin="anonymous"></script>*/

Why it matters textContent can never execute anything, which makes it the default choice for showing data you did not write.

Module 93 of 97, phase 11

Ship it in a box

Containerising a website with Docker

Mark as doneCompleted

Docker packages your site and its web server into an image that runs the same on any machine. A multi stage build compiles with Node, then serves the static files with a tiny Nginx image.

In detail

The first stage installs dependencies and runs the build; the second copies only dist into nginx:alpine, so the final image is a few megabytes with no Node or source code. Add a .dockerignore, an Nginx config for caching and single page app fallbacks, and run it locally with docker compose before deploying.

3 examples

Dockerfile

FROM node:22-alpine AS buildRUN npm ci && npm run buildFROM nginx:alpineCOPY --from=build /app/dist /usr/share/nginx/html

# ---- build stage ----FROM node:22-alpine AS buildWORKDIR /appCOPY package.json package-lock.json ./RUN npm ciCOPY . .RUN npm run build # ---- serve stage ----FROM nginx:1.27-alpineCOPY nginx.conf /etc/nginx/conf.d/default.confCOPY --from=build /app/dist /usr/share/nginx/htmlEXPOSE 80HEALTHCHECK CMD wget -qO- http://127.0.0.1/ || exit 1

Why it matters Copying the lockfile before the source means the npm ci layer is cached until dependencies actually change.

nginx.conf

Shell

location / { try_files $uri $uri/ /index.html; }

server {  listen 80;  root /usr/share/nginx/html;  index index.html;   # long cache for hashed assets  location /assets/ {    add_header Cache-Control "public, max-age=31536000, immutable";  }   # single page apps: unknown paths fall back to index.html  location / {    try_files $uri $uri/ /index.html;  }   gzip on;  gzip_types text/css application/javascript image/svg+xml;  add_header X-Content-Type-Options nosniff;}

Why it matters try_files falls back to index.html so client side routes such as /blog/post work on refresh.

compose.yaml

YAML

services: { web: { build: ., ports: ["8080:80"] } }

services:  web:    build: .    ports:      - "8080:80"    restart: unless-stopped # docker compose up --build# open http://localhost:8080 # .dockerignore# node_modules# dist# .git# .env

Why it matters A .dockerignore keeps node_modules and secrets out of the build context, which speeds up builds and avoids leaking files.

Module 94 of 97, phase 11

Putting it on the internet

Hosting, domains and CDNs

Mark as doneCompleted

Static sites can be hosted on GitHub Pages, Netlify, Vercel or Cloudflare Pages for free; containers run on platforms that accept Docker images. A CDN copies files to servers near your visitors.

In detail

Connect a repository and the host builds and deploys on every push, with preview links for pull requests. Point your domain's DNS at the host and HTTPS certificates are issued automatically. Set cache headers so hashed assets are cached for a year and HTML is revalidated.

deploy.yml

YAML

on: pushjobs: { deploy: { runs-on: ubuntu-latest, steps: [ ... ] } }

# .github/workflows/deploy.yml: build and publish to GitHub Pagesname: Deployon:  push:    branches: [main]permissions:  contents: read  pages: write  id-token: writejobs:  deploy:    runs-on: ubuntu-latest    environment: github-pages    steps:      - uses: actions/checkout@v4      - uses: actions/setup-node@v4        with:          node-version: 22          cache: npm      - run: npm ci      - run: npm run build      - uses: actions/upload-pages-artifact@v3        with:          path: dist      - uses: actions/deploy-pages@v4

Why it matters Every push to main rebuilds and republishes the site, so deploying is just merging a pull request.

Phase 12, modules 95 to 97

Mastery

Progressive apps, web APIs and the capstone

Installable apps, powerful browser APIs, and a final project that uses every phase.

Module 95 of 97, phase 12

A website you can install

Progressive web apps and service workers

Mark as doneCompleted

A progressive web app adds a manifest and a service worker so a site can be installed, open in its own window, and work offline.

In detail

The manifest names the app, sets icons and theme colours, and chooses a display mode. The service worker is a script that sits between the page and the network, caching files so repeat visits are instant and offline visits still work. Start with caching the app shell and a fallback page.

sw.js

JavaScript

self.addEventListener("fetch", (e) => e.respondWith(caches.match(e.request).then((r) => r ?? fetch(e.request))));

// main.jsif ("serviceWorker" in navigator) navigator.serviceWorker.register("/sw.js"); // sw.jsconst CACHE = "site-v1";const SHELL = ["/", "/index.html", "/styles.css", "/main.js", "/offline.html"]; self.addEventListener("install", (event) => {  event.waitUntil(caches.open(CACHE).then((cache) => cache.addAll(SHELL)));}); self.addEventListener("activate", (event) => {  event.waitUntil(    caches.keys().then((keys) => Promise.all(keys.filter((k) => k !== CACHE).map((k) => caches.delete(k)))),  );}); self.addEventListener("fetch", (event) => {  if (event.request.method !== "GET") return;  event.respondWith(    caches.match(event.request).then((hit) => hit ?? fetch(event.request).catch(() => caches.match("/offline.html"))),  );}); /* manifest.webmanifest{ "name": "My Site", "short_name": "Site", "start_url": "/", "display": "standalone",  "theme_color": "#1d63ed", "background_color": "#f4f7fc",  "icons": [{ "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }] }*/

Why it matters Deleting old caches on activate stops a new deploy from serving yesterday's files forever.

Module 96 of 97, phase 12

The browser is a platform

Powerful web APIs

Mark as doneCompleted

Browsers expose rich APIs: Canvas for drawing, Clipboard, Web Share, Geolocation, Notifications, Web Audio, View Transitions and many more.

In detail

Feature detect before using any API and ask for permissions only when the person triggers the feature. The View Transitions API animates between page states with one function call. Web Components let you define your own reusable HTML elements without a framework.

apis.js

JavaScript

await navigator.clipboard.writeText(location.href);document.startViewTransition(() => updateTheDom());

// copy to clipboarddocument.querySelector("#copy").addEventListener("click", async () => {  await navigator.clipboard.writeText(location.href);}); // native share sheet on phonesdocument.querySelector("#share").addEventListener("click", () => {  if (navigator.share) navigator.share({ title: document.title, url: location.href });}); // animate a DOM changefunction switchView(render) {  if (!document.startViewTransition) return render();  document.startViewTransition(render);} // a custom elementclass ReadingTime extends HTMLElement {  connectedCallback() {    const words = document.querySelector("article")?.innerText.split(/\s+/).length ?? 0;    this.textContent = `${Math.max(1, Math.round(words / 220))} min read`;  }}customElements.define("reading-time", ReadingTime);// <reading-time></reading-time>

Why it matters Custom elements work in any framework or none, which makes them good for small widgets shared across sites.

Module 97 of 97, phase 12

Put every piece on the page

Capstone: a complete single page blog

Mark as doneCompleted

Build a single page blog that uses every phase: semantic HTML, a token based theme with dark mode, responsive grid and cards, a hamburger navbar, scroll reveals, Lenis smooth scrolling, keyboard shortcuts, then rebuild one section in React and ship the whole thing in Docker.

In detail

Scope: a hero with an illustration, a module index in a hamburger menu, article cards with hashtag chips, a dictionary, an FAQ accordion, a documentation board and a footer. Keep Lighthouse scores above 90 for performance, accessibility and SEO, test with a keyboard and a screen reader, and deploy from GitHub with a pipeline. This page you are reading is one possible answer.

Semantic sections with one main
Meta, Open Graph and structured data
Design tokens with light and dark themes
Responsive grid of cards
Media cards with hashtag chips
Hamburger menu with the module index
Shortcuts: T theme, F full screen, M menu
Lenis smooth scrolling and parallax
Scroll reveals with IntersectionObserver
FAQ accordion
One section rebuilt in React
Lighthouse above 90
Keyboard and screen reader tested
Shipped in an nginx container

Questions people ask

Short answers to the questions that come up most while learning to build websites, each linked to the module that covers it in depth.

Do I need to learn HTML and CSS before JavaScript?

Yes. JavaScript changes HTML and CSS, so without them it has nothing to work on. A few weeks of HTML and CSS makes every JavaScript lesson easier.

Module 07: Anatomy of an HTML document

Should I put CSS and JavaScript inline, in the page, or in files?

Use external files for almost everything so the browser can cache them. Keep internal code for tiny, critical snippets and avoid inline handlers.

Module 20: Inline, internal and external CSS

Flexbox or Grid?

Grid for two dimensional page layout, flexbox for lining things up in one direction inside components. Most pages use both.

Module 32: CSS Grid

What does semantic HTML actually change?

Screen readers can jump between landmarks, search engines understand structure, and your CSS selectors become clearer.

Module 17: Semantic layout elements

Why did React come up if JavaScript can already change the page?

Keeping many parts of the screen in sync with data by hand gets error prone. React lets you describe the UI for each state and updates the DOM for you.

Module 78: Why React and Next.js came up

Do I need Next.js for every React project?

No. A dashboard behind a login can be plain React with Vite. Next.js pays off when you need routing, SEO friendly server rendering or static generation.

Module 82: Why Next.js

Tailwind or Bootstrap?

Bootstrap gives ready made components quickly. Tailwind gives building blocks for a custom design. Learn plain CSS first so either one makes sense.

Module 73: Tailwind CSS (utility first)

How do I make a site work in dark mode?

Store colours as custom properties, redefine them under prefers-color-scheme: dark and a data-theme attribute, and set color-scheme so form controls follow.

Module 37: Dark mode and theming

Is smooth scrolling and parallax bad for accessibility?

It can be. Respect prefers-reduced-motion, keep motion subtle, and never hide content that only appears through animation.

Module 69: Lenis smooth scrolling and parallax

What should a beginner use to edit and preview pages?

VS Code with a live server extension, a modern browser, and DevTools open on the side.

Module 06: Editor and project setup

Why does my page look different on phones?

Missing a viewport meta tag, fixed widths, or no media queries. Start mobile first and let content flow.

Module 30: Responsive design and media queries

Why would a website need Docker?

A container packs your built site and its web server so it runs the same on your laptop, in CI and in production.

Module 93: Containerising a website with Docker

How is progress saved on this page?

Progress is saved in this browser only, in local storage. Nothing is sent anywhere.

Module 54: localStorage, sessionStorage, cookies and IndexedDB

What keyboard shortcuts does this page support?

T switches theme, F toggles full screen, M opens the menu, slash searches, J and K move between modules, and Esc closes or exits focus.

Module 71: Keyboard shortcuts and full screen

Official documentation and sources

Every source linked from the modules above, grouped by the phase that uses it and then by where it lives. 290 links in total, all opening in a new tab.