Published and updated 31 July 2026 · Web Foundations
Published and updated 31 July 2026 · Web Foundations
Web Foundations: HTML, CSS, JavaScript, the Browser, and Git connects the essential decisions in this stage of frontend engineering. You will learn each browser or framework model from first principles, apply it to the progressive Learning Atlas product, diagnose a realistic failure from evidence, and direct an AI collaborator with explicit constraints. The goal is independent judgment, not memorized syntax.
You will advance the semantic and responsive version of Learning Atlas. By the end, you can explain every topic in this chapter, implement one focused slice per topic, adapt those slices under new constraints, and defend the result with browser evidence, strict types, accessibility checks, security boundaries, and a production build.
Bring forward learning-atlas/index.html, styles.css, and app.js and the verification notes from the preceding chapter. Create a narrow Git branch, read the repository rules, and inspect existing changes before editing. When a tool or file is introduced for the first time, its purpose is explained before its syntax.
Use these project-orientation commands:
Before beginning Web Foundations: HTML, CSS, JavaScript, the Browser, and Git, stop if the working tree contains files you do not understand. Do not delete, reset, or rewrite another person's work to make the lesson cleaner.
The browser builds cooperating models rather than painting a screenshot: HTML creates meaning, CSS resolves layout and presentation, and JavaScript responds to events while preserving the document's accessible structure. The topics below are ordered because each creates evidence needed by the next. Experienced readers may jump to a topic, but should still complete its failure investigation and adaptation task.
Semantic elements expose relationships before styling: landmarks organize regions, headings label sections, lists express collections, buttons perform actions, and links navigate. Correct native elements provide keyboard and accessibility behavior that generic containers must otherwise recreate.
The current artifact for semantic html and accessible document structure is learning-atlas/index.html. Before editing, predict the visible behavior and name the source of truth. Then implement or study this complete focused slice:
Scenario: A clickable div opens a topic with a mouse but has no keyboard behavior, role, accessible name, or predictable place in the focus order.
Evidence to collect: Inspect the accessibility tree and tab sequence; compare the element's computed role, name, states, and supported keyboard activation with a native button.
Minimal repair rule: For semantic html and accessible document structure, correct the first boundary that violates the documented model, preserve the rest of the working path, and add a regression check based on the observed evidence.
Replace a div-heavy article page with landmarks and native controls without changing its visual layout, then compare both accessibility trees.
CSS resolves competing declarations through origin, layer, importance, specificity, scope, and source order. Some properties inherit; every visible box has content, padding, border, and margin. Debug computed results before adding another selector.
The current artifact for css mental models: cascade, specificity, inheritance, and the box model is learning-atlas/styles.css. Before editing, predict the visible behavior and name the source of truth. Then implement or study this complete focused slice:
Scenario: A new high-specificity selector fixes one card but prevents the shared focus style and dark-theme token from taking effect.
Evidence to collect: Use the Styles and Computed panels to find the winning declaration, inherited value, box dimensions, and overridden token; disable rules one at a time.
Minimal repair rule: For css mental models: cascade, specificity, inheritance, and the box model, correct the first boundary that violates the documented model, preserve the rest of the working path, and add a regression check based on the observed evidence.
Predict the winner in five competing declarations, verify it in DevTools, then refactor the cascade so no selector needs an ID or important flag.
Normal flow handles most documents. Flexbox distributes items along one main axis; Grid coordinates rows and columns; positioned elements use a containing block and may leave flow. Choose the model from the relationship, not from a memorized property.
The current artifact for layout with flexbox, grid, normal flow, and positioning is learning-atlas/styles.css. Before editing, predict the visible behavior and name the source of truth. Then implement or study this complete focused slice:
Scenario: An absolutely positioned badge looks correct on one card but overlaps long translated titles because the card did not reserve space and the containing block was accidental.
Evidence to collect: Inspect the containing block, overlay flex/grid tracks, disable positioning, add long content, and observe whether the parent size accounts for the child.
Minimal repair rule: For layout with flexbox, grid, normal flow, and positioning, correct the first boundary that violates the documented model, preserve the rest of the working path, and add a regression check based on the observed evidence.
Implement the same curriculum layout with flow, flex, and grid; document where each model becomes simpler or more fragile.
Responsive design lets content adapt to available space, input, zoom, and preferences. Start with the smallest robust flow, add enhancements when content needs them, and use container queries when a component depends on its own width rather than the viewport.
The current artifact for responsive design, mobile-first thinking, and container queries is learning-atlas/styles.css. Before editing, predict the visible behavior and name the source of truth. Then implement or study this complete focused slice:
Scenario: A two-column component works at a desktop viewport but overflows in a narrow sidebar because its breakpoint watches the page instead of the component container.
Evidence to collect: Resize the containing panel independently, inspect scroll width and container query conditions, test long content, and zoom to 200%.
Minimal repair rule: For responsive design, mobile-first thinking, and container queries, correct the first boundary that violates the documented model, preserve the rest of the working path, and add a regression check based on the observed evidence.
Place one topic list in a wide main region and a narrow sidebar; make both adapt correctly without JavaScript width checks.
JavaScript programs transform values. Functions name transformations, objects group named values, arrays preserve ordered collections, and modules define explicit dependencies. Mutation, identity, scope, coercion, and missing values explain many beginner surprises.
The current artifact for javascript essentials: values, functions, objects, arrays, and modules is learning-atlas/topics.js. Before editing, predict the visible behavior and name the source of truth. Then implement or study this complete focused slice:
Scenario: Filtering topics seems to update the UI, but the function mutates the original array and another view silently loses its items.
Evidence to collect: Log references before and after the function, freeze test input, inspect array methods, and verify whether callers receive a new value or shared mutation.
Minimal repair rule: For javascript essentials: values, functions, objects, arrays, and modules, correct the first boundary that violates the documented model, preserve the rest of the working path, and add a regression check based on the observed evidence.
Write pure functions that sort and group topics without changing the input; prove it with frozen data and two independent callers.
The DOM is the browser's object model of a document. Events travel through capture and bubble phases; forms already know how to collect and submit named controls; storage persists strings; accessibility APIs expose semantics derived from the DOM.
The current artifact for the browser runtime: dom, events, forms, storage, and accessibility apis is learning-atlas/app.js. Before editing, predict the visible behavior and name the source of truth. Then implement or study this complete focused slice:
Scenario: A form handler listens to a button click, so pressing Enter performs a full navigation and loses the user's unsaved status message.
Evidence to collect: Inspect the submit event, default action, event target, FormData names, Network navigation, focus destination, and accessibility announcement.
Minimal repair rule: For the browser runtime: dom, events, forms, storage, and accessibility apis, correct the first boundary that violates the documented model, preserve the rest of the working path, and add a regression check based on the observed evidence.
Build the same form with native submission first, then enhance it with JavaScript while preserving Enter, validation, focus, and no-script behavior.
A promise represents a future result, not a background thread. Fetch resolves for HTTP error statuses, JSON parsing can fail independently, and concurrent requests can finish out of order. Model cancellation, stale results, retry, and partial failure deliberately.
The current artifact for async javascript, fetch, json, http failures, and race conditions is learning-atlas/load-topics.js. Before editing, predict the visible behavior and name the source of truth. Then implement or study this complete focused slice:
Scenario: Typing quickly sends two searches; the older slow response arrives last and replaces the correct newer result.
Evidence to collect: Throttle the network, record request start and completion order, inspect AbortSignal state and query identity, and confirm response.ok before JSON use.
Minimal repair rule: For async javascript, fetch, json, http failures, and race conditions, correct the first boundary that violates the documented model, preserve the rest of the working path, and add a regression check based on the observed evidence.
Add cancellation or request identity to a search, then simulate slow, malformed, 404, 500, and offline responses.
Git stores snapshots connected by commits. The working tree, staging area, current commit, branches, and remote references are separate states. Safe recovery begins by identifying which state contains the wanted work before running a command that moves or deletes it.
The current artifact for git foundations, branches, diffs, commits, and recovery is terminal. Before editing, predict the visible behavior and name the source of truth. Then implement or study this complete focused slice:
Scenario: A developer tries to discard one generated file and removes several untracked chapters because the cleanup command targeted a directory.
Evidence to collect: Stop writing, inspect status with untracked files, list exact paths, check reflog and stashes, and choose a path-specific recoverable operation.
Minimal repair rule: For git foundations, branches, diffs, commits, and recovery, correct the first boundary that violates the documented model, preserve the rest of the working path, and add a regression check based on the observed evidence.
Create staged, unstaged, committed, and untracked changes in a practice repository, then recover each without using a broad destructive command.
Goal: Advance the semantic and responsive version of Learning Atlas through one learning outcome at a time while keeping the implementation understandable and reversible.
Context to attach: the current web foundations outcome, the product brief, repository rules, package versions, relevant files and callers, shared types or tokens, the current Git diff, and the latest observed failure or command output.
Constraints: while advancing the semantic and responsive version of Learning Atlas, preserve concurrent work; use semantic HTML and strict TypeScript; keep Server Components as the default in Next.js; validate untrusted data on the server; do not expose secrets; include loading, empty, error, success, disabled, and partial states when relevant; make one bounded change.
Acceptance criteria: the web foundations adaptation works from 320 pixels upward; keyboard and focus behavior are complete; color is not the only signal; authorization and validation are enforced at authoritative boundaries; the relevant type, lint, build, and browser checks pass.
Reusable prompt:
We are implementing one outcome from “Web Foundations: HTML, CSS, JavaScript, the Browser, and Git” in the Learning Atlas. Read the attached repository rules, outcome text, relevant files, current diff, and verification evidence. Restate the user-visible result, source of truth, trust boundary, valid states, and unknowns. Propose the smallest reversible vertical slice. Implement only that slice. Then report the exact diff, criterion-to-evidence mapping, remaining risks, and the next discriminating check. Stop before dependency installation, destructive action, public-contract change, authentication decision, or deployment unless explicitly authorized.
For Web Foundations: HTML, CSS, JavaScript, the Browser, and Git, inspect the response without relying on its summary. Read every changed line, compare it with the actual source of truth, and reproduce the evidence yourself. Reject unexplained assertions, broad client boundaries, missing states, invented APIs, suppressed errors, or tests that merely restate implementation details.
A responsive form works with a mouse but pressing Enter navigates away while a late search response overwrites newer results. Trace semantic form behavior, events, request order, DOM status, and Git repair. Write exact reproduction steps and expected versus observed behavior. Follow the value across every relevant boundary until you find the first contradiction.
Within the explain stage of Web Foundations: HTML, CSS, JavaScript, the Browser, and Git, change one cause, not several symptoms. Rerun the original reproduction, one adjacent failure case, keyboard navigation, and the focused static checks. The lab is complete only when you can explain why the repair works and which regression check would have failed before it.
Run the scripts that this project actually defines:
If your learning project later defines a test script, run it as an additional gate; do not report tests as passing when no test command exists. In the browser, resize from 320 pixels upward, use only the keyboard, inspect computed styles, and test success plus failure paths. Repeat the primary journey at 320, 768, and wide desktop widths, at 200% zoom, in both themes, by keyboard, and with reduced motion. For networked work, simulate slow, malformed, unauthorized, empty, and failed responses.
Close Web Foundations: HTML, CSS, JavaScript, the Browser, and Git and draw its models from memory. Pick two outcomes and explain how a decision in the first can cause a failure in the second. Then complete three levels of practice:
You have treated web foundations as a connected engineering system rather than isolated syntax. The durable result is not the example code; it is the ability to predict behavior, expose assumptions, collect evidence, bound AI work, and repair the first broken boundary. Carry the product files and evidence log into the next stage.