Web Application FoundationsPublished

Course 03

Web Programming with JavaScript: From DOM to APIs

Continue Course 02 by turning your order program into a usable web workbench. Understand business rules, state, forms, HTTP, server authority and failure recovery before adopting a framework. Build it yourself and defend each decision with evidence.

After Programming FoundationsEstimated 30 to 40 hours including practice32 lessonsUpdated October 2026

Start learning

Learning outcomes

Translate requests into explicit business rules and testable interface behavior
Build accessible forms with native JavaScript, explicit state and reusable domain policy
Preserve local drafts while handling invalid storage and unsaved changes
Build a local HTTP lab and handle loading, errors, stale responses and recovery
Explain server authority, revision conflicts, request replay and uncertain write outcomes
Challenge implementations and generated code with deterministic counterexamples
Deliver and review an order workbench before evaluating framework abstractions

Prerequisites

Programming Foundations: From Algorithms to JavaScript, including the order project
Comfort with functions, objects, modules and assertions
A desktop browser, a text editor and a currently supported Node.js version with native ES modules, fetch and the built-in test runner

Curriculum

A guided path, lesson by lesson

14 modules · 32 lessons

Module 1

A Real Person Needs to Use Your Program

Continue Course 02: define the interface contract, build a semantic page, render a quote and challenge it with a counterexample. Build your own implementation using guided steps, expected results and your existing domain tests.

Your Program Works. Can Someone Use It?

Turn an interface request into rules and evidence before choosing controls.

40 min 2

Design the Page around the Task

Build a semantic, responsive document that explains the order before adding behavior.

45 min 3

Render the Data, Preserve the Rules

Connect the existing pricing module to the DOM without creating a second source of truth.

50 min 4

Lab: Prove the Interface Preserves the Contract

Build the continuation project, challenge its display and document the evidence before adding more features.

60 to 90 min

Module 2

The Quantity Changes

Turn events into intentions, maintain explicit state and update results without disrupting input.

A Click Is an Intention, Not a Business Rule

Translate a user action into one explicit operation

35 min 2

Where Does the Current Order Live?

Keep one authoritative in-memory draft

40 min 3

Render Results without Fighting the User

Update the display without replacing active inputs

40 min

Module 3

The Person Enters Invalid Data

Parse form values, help people recover from errors and build an editable quote.

Form Values Are Not Yet Order Data

Convert raw form values using explicit contracts

45 min 2

A Rejection Must Explain the Next Action

Associate errors with fields

40 min 3

Lab: Make a Quote Editable without Duplicating Policy

Integrate conversion, domain validation and rendering

90 min

Module 4

An Action Is Forbidden

Define state transitions and enforce business decisions beyond disabled controls.

An Order Has States, Not Just Buttons

Define allowed transitions before building actions

45 min 2

A Disabled Button Is Not Enforcement

Distinguish UI affordances from invariant checks

35 min

Module 5

The Page Reloads

Restore validated drafts and explain unsaved work and multiple-tab limits.

Save a Draft, Not a Promise

Design a versioned draft format and recover from invalid storage

45 min 2

Two Tabs, One Draft

Make overwriting and unsaved-change behavior explicit

35 min

Module 6

Data Arrives Later

Specify HTTP contracts, build a local service and handle loading, empty and failed responses.

HTTP Is a Contract between Two Programs

Specify requests and responses before calling fetch

40 min 2

Build Your Own Local HTTP Lab

Create a small same-origin service for repeatable HTTP experiments

65 min 3

Fetch without Hiding Loading or Failure

Validate API responses and render distinct asynchronous states

50 min

Module 7

Requests Overlap

Control stale responses and distinguish repeatable reads from uncertain writes.

The Last Intention Wins, Not the Last Response

Prevent stale asynchronous work from overwriting newer state

50 min 2

Retry Is a Business Decision

Distinguish retrying a read from duplicating a write

35 min

Module 8

Who Is Authoritative?

Rebuild trusted inputs on the server and simulate revisions and request replay.

The Browser Is Not the Authority

Rebuild trusted order inputs on the service before pricing

55 min 2

Conflicts and Repeat Submissions

Use revisions to reject stale edits and request identities to deduplicate retries

65 min

Module 9

Different Ways to Use the Interface

Verify keyboard workflows, feedback, flexible layouts and measured performance.

Can the Person Finish without a Mouse?

Audit a complete task with keyboard navigation and understandable feedback

45 min 2

Readable Results and Useful Performance

Make the quote resilient to long content and narrow screens

35 min

Module 10

Prove the Behavior

Protect decisions with counterexamples, deterministic races and HTTP/browser acceptance evidence.

Tests That Challenge the Contract

Test domain decisions and adapters independently of the DOM

60 min 2

Test Time Order, Not Just Values

Reproduce overlapping requests without timing-dependent sleeps

50 min

Module 11

Review Generated Code

Evaluate proposed code against contracts and evidence rather than confidence.

Review Generated Code with Evidence

Challenge generated implementations with concrete business counterexamples

45 min

Module 12

The Application Grows

Clarify dependency boundaries, lifecycle ownership and purposeful tooling.

Boundaries before More Files

Organize modules by responsibility and direction of dependency

45 min 2

Lifecycle and Tooling Have a Purpose

Clean up events and requests when a view stops being active

40 min

Module 13

Final Project

Build and review an order workbench, then handle new pricing and freshness requirements.

Final Project: The Order Workbench

Assemble the course increments into a coherent, independently built workbench

150 min 2

Final Review: Can You Handle the Next Change?

Assess understanding through an unfamiliar change request

90 min

Module 14

Why Frameworks Exist

Connect platform responsibilities to framework concepts and assess readiness.

What Would a Framework Actually Own?

Map framework concepts to responsibilities already implemented natively

45 min 2

Framework Readiness: Explain before You Adopt

Demonstrate platform understanding before adopting another abstraction

40 min