Web Development Foundations

Appearance

12-day course plan ​

Use this plan to see how the lessons build on one another and what you will practice at each stage.

Lesson 1 is available now. Materials for Lessons 2–12 are not available yet. Their sections below describe the planned learning goals and projects.

For tools and setup, read the course overview. To scan the sequence, use the at-a-glance plan, or choose a day from On this page.

Learning with your teacher ​

The course is planned for 12 days and 72 hours of learning:

  • 3 hours of guided learning each day: follow your teacher's explanations, make changes in your own project, and compare results at the checkpoints.
  • 3 hours of independent practice each day: apply the ideas to a new brief, check your work, and explain what you built.

Use the companion reference when you need a reminder. If you get stuck, show your teacher the result you expected, what happened, and what you have already tried.

What you will learn ​

By the end of the planned course, you should be able to:

  1. Build a readable page with HTML, CSS, and clearly labeled form controls.
  2. Use browser tools to inspect a page and investigate problems.
  3. Write JavaScript calculations, decisions, loops, and reusable functions.
  4. Organize data with objects and arrays, then search, filter, and summarize it.
  5. Respond to browser events and update the page from user input.
  6. Split code into modules and handle work whose results arrive later.
  7. Exchange JSON data with an API and show useful loading, success, and error messages.
  8. Build and explain a small application from written requirements.

The daily sections below introduce the technical terms as you reach each topic.

Tools and learning materials ​

Tool or materialWhat you will use it forWhen
Visual Studio CodeEditing files and running commands in a terminalLesson 1 onward
Chrome or Edge and DevToolsViewing pages, inspecting markup, and checking code and requestsLesson 1 onward
Node.js, npm, and ViteInstalling development tools and serving your exercise files locallyLesson 1 onward
Sample data in JavaScript filesPracticing with objects and arraysPlanned from Day 4
GitRecording versions of your workPlanned from Day 7
A practice API supplied for classLoading and changing sample dataPlanned for Days 9–12
Documentation referencesLooking up language features and browser behaviorThroughout

An API provides a way for your page to exchange data with a service. The later exercises are planned around a supplied practice service; you will focus on the browser code that uses it.

At-a-glance curriculum ​

DayTopicWhat you will build or improveMaterials
1HTML, CSS, and the browserTravel Desk and Travel Request pagesAvailable
2Values, variables, and expressionsTravel Budget Calculator in the ConsolePlanned
3Conditions, loops, and functionsTravel Approval RulesPlanned
4Objects and arraysTravel data and utility functionsPlanned
5Array methodsTravel Search LogicPlanned
6DOM, events, and formsInteractive Travel Requests pagePlanned
7Modules and project organizationTravel application split into modulesPlanned
8Asynchronous JavaScript and PromisesTravel Lookup with loading and error feedbackPlanned
9JSON, HTTP, and APIsTravel list loaded from an APIPlanned
10Changing API dataForms and controls to create, edit, and delete recordsPlanned
11Debugging and testingRepaired Travel Dashboard and testsPlanned
12Final projectSupport Request TrackerPlanned

Day 1 — HTML, CSS, and browser tools ​

Build a Travel Desk page with your teacher and inspect it in the browser. You will connect the HTML and CSS you save in your files with the page you see on screen.

What you will learn ​

  • Distinguish HTML structure, CSS presentation, and JavaScript behavior.
  • Use headings, navigation, sections, cards, and labeled form controls to structure the page.
  • Use basic selectors, classes, spacing, and Flexbox.
  • Explain the DOM at a high level.
  • Run a vanilla JavaScript project locally and inspect it in DevTools.

With your teacher — 3 hours ​

  1. Browser, DOM, HTML/CSS/JS relationship (20 min).
  2. Check your tools, create a Vite project, and open its local URL (25 min).
  3. Semantic HTML and accessible form basics (40 min).
  4. CSS selectors, box model, Flexbox, and startup script (35 min).
  5. DevTools inspection and a label repair (40 min).
  6. Independent checkpoint and knowledge check (20 min).

Open the guided lesson for the step-by-step build.

Independent practice — 3 hours ​

Build your own Travel Request page from the practice brief. Include the three sample journeys, all six form controls, and a layout that works at narrow and wide widths. Check native form validation and use DevTools to investigate and repair a label mismatch.

Check your work ​

Use the guided lesson checklist and the practice acceptance criteria. Submit your project, two screenshots, and a README explaining your observations and label repair. The demo form sends values in the URL but does not save a travel booking.

Day 2 — JavaScript fundamentals: values, variables and expressions (planned) ​

Use JavaScript to represent values and calculate travel costs. You will run small expressions in the Console and explain their results.

What you will learn ​

  • Declare values with const and let.
  • Work with strings, numbers, booleans, null, and undefined.
  • Use arithmetic, comparisons and logical operators.
  • Compare === with == and explain when a comparison converts types.
  • Use template literals and basic conversions.

With your teacher — 3 hours ​

Predict the result of an expression, run it in the Console, and compare the result with your prediction. Practice numbers, strings, booleans, conversions, comparisons, and template literals for inserting values into text.

Independent practice — 3 hours ​

Create a Travel Budget Calculator using supplied values for flights, hotels, and daily expenses. Convert numeric strings, calculate totals, and print a clear summary in the Console. Compare the total with a budget using a boolean expression. Functions and branching come on Day 3; form input and validation come on Day 6.

Check your work ​

Compare your calculations with the expected results for the supplied values. Explain one example where converting a string to a number changes the result.

Day 3 — Decisions, repetition and functions (planned) ​

Use conditions to choose what happens, loops to repeat work, and functions to reuse a calculation or decision.

What you will learn ​

  • Use if/else and switch appropriately.
  • Use for and for...of loops.
  • Write functions with parameters and return values.
  • Recognize function scope and avoid unnecessary global state.
  • Use arrow functions for simple operations and callbacks.

With your teacher — 3 hours ​

Trace the path through a condition or loop, then write functions with clear parameters and return values. Compare function declarations and arrow functions, and inspect variables to understand their scope.

Independent practice — 3 hours ​

Implement Travel Approval Rules: classify requests by cost and trip duration, report missing data, calculate allowances, and produce a decision summary from multiple sample inputs. Use helper functions for calculations or rules that appear more than once.

Check your work ​

Run the supplied input/output checks and compare your results. Explain the path through one condition and what a function returns.

Day 4 — Objects, arrays and structured application data (planned) ​

Represent trips, customers, and bookings with objects and arrays. You will read and update their values and compare changing an existing object with creating a copy.

What you will learn ​

  • Create and read object properties, including nested properties.
  • Store and traverse arrays of objects.
  • Distinguish changing an object from creating a copy.
  • Use destructuring and spread syntax.
  • Recognize optional chaining and common missing-value cases.

With your teacher — 3 hours ​

Build sample objects and arrays, inspect nested values, and compare references with copies. Practice destructuring, spread syntax, and optional chaining using the sample data.

Independent practice — 3 hours ​

Create and update a local dataset containing Travels, Customers, and Bookings. Write functions that locate records, update statuses safely, construct summaries, and return new objects/arrays when appropriate.

Check your work ​

Show that your functions return the expected records and summaries. Explain which operations change the original data and which return new values.

Day 5 — Array methods and data transformation (planned) ​

Use array methods to find records, filter a list, and calculate summaries. Choose a method based on the result you need.

What you will learn ​

  • Use map, filter, find, some, every, and reduce.
  • Choose the right array method for a requirement.
  • Compose multiple transformations without unnecessary mutation.
  • Sort arrays deliberately and recognize sorting side effects.
  • Explain the role of callback functions.

With your teacher — 3 hours ​

Compare the result of each array method and trace the callback, the function passed to the array method. Practice filtering, searching, summarizing with reduce, and sorting without unintentionally changing the original array.

Independent practice — 3 hours ​

Build Travel Search Logic: filter by status and destination, search by text, find specific bookings, sort by departure date, and calculate total expense by category. Include empty-result behavior.

Check your work ​

Check your functions with several matching records, one match, and no matches. Show the expected order and totals, and explain which array method you chose.

Day 6 — DOM, events, forms and first mini-project (planned) ​

Add JavaScript to your Lesson 1 page so it can display new requests and respond to form input. You will work with the DOM, the browser's representation of the page.

What you will learn ​

  • Select and update DOM elements safely.
  • Use event listeners and read event data.
  • Read and validate form values.
  • Use preventDefault where needed.
  • Render lists from arrays and update visible status.
  • Avoid using unsanitized innerHTML for user-supplied content; prefer textContent and DOM creation APIs.

With your teacher — 3 hours ​

Select and create DOM elements, listen for events, and handle form submission. Read and validate input, display text using DOM APIs, and show a useful message when a value needs correcting.

Independent practice — 3 hours: Mini-project 1 — Travel Requests UI ​

Extend your static page so users can add a request, see it in a list, filter the list, and change a request's status. Keep the requests in browser memory; reloading resets them. Continue using Vite to serve the project files locally.

Check your work ​

Add a request, find it with a filter, and change its status. Test invalid input and an empty result. Explain how the event handler updates the data and visible page.

Day 7 — JavaScript modules and maintainable project structure (planned) ​

Split your application into JavaScript modules: files that share code through imports and exports. You will also use Git to record a working version.

What you will learn ​

  • Use ES module export and import.
  • Explain the difference between default and named exports.
  • Organize code by responsibility: data, logic, DOM rendering, and events.
  • Understand the purpose of package.json and common npm scripts.
  • Use basic Git operations to record progress.

With your teacher — 3 hours ​

Move related functions into separate files and connect them with imports and exports. Read the project's npm scripts, check that the page still runs, and record a working version with Git.

Independent practice — 3 hours ​

Refactor the Day 6 app by separating data access, validation, page updates, and startup code. Keep the existing behavior working, then commit a working version to Git.

Check your work ​

Repeat the Day 6 interaction checks after reorganizing the code. Explain what each module does and show the Git commit containing your working version.

Day 8 — Asynchronous JavaScript and Promises (planned) ​

Work with operations whose results arrive later. You will use Promises to represent those results and update the page while waiting or when an operation fails.

What you will learn ​

  • Distinguish synchronous from asynchronous work.
  • Explain pending, fulfilled, and rejected Promise states.
  • Read simple .then() and .catch() chains.
  • Write async functions using await.
  • Use try/catch and appropriate feedback for failures.
  • Avoid assuming a Promise result is available immediately.

With your teacher — 3 hours ​

Trace a delayed operation from start to completion. Read Promise chains, then use async/await and try/catch to handle results and failures. Show loading, empty, and error messages at the appropriate points.

Independent practice — 3 hours ​

Implement an Async Travel Lookup using provided functions that return delayed Promises. Show loading messages, results, and failures. Handle repeated requests without confusing the user about what is still loading.

Check your work ​

Demonstrate a successful lookup and a failure. Check that the loading message ends in both cases and that repeated lookups do not leave misleading results on screen.

Day 9 — JSON, HTTP, APIs and fetch (planned) ​

Load data from a supplied practice API. You will read JSON, a text format for structured data, and inspect HTTP requests and responses in the browser.

What you will learn ​

  • Recognize valid JSON and distinguish it from JavaScript object syntax.
  • Use JSON.parse and JSON.stringify.
  • Explain URL paths, query strings, request methods, response status codes and headers.
  • Use fetch and parse JSON responses.
  • Check response.ok and handle HTTP failures.
  • Inspect requests/responses in DevTools Network.
  • Recognize same-origin policy and CORS as browser access concepts.

With your teacher — 3 hours ​

Inspect a JSON response and follow an HTTP request in Network. Use fetch, check the response status, and read the response data. Discuss how browser origin rules can affect access to a service.

Independent practice — 3 hours ​

Use a Travel API supplied for class. Fetch travel and customer collections, display results, and use query parameters where supported. Intentionally request a nonexistent resource and handle the failure gracefully.

Check your work ​

Show data loaded from the API and the message displayed for a failed request. Use Network to explain the URL, status, and response for each case.

Day 10 — API changes, forms and reliable async UI (planned) ​

Extend your application so users can create, edit, and delete records through the practice API. Show what happened after each request and let users recover from errors.

What you will learn ​

  • Understand the purposes of POST, PUT, PATCH, and DELETE.
  • Send JSON request bodies and suitable headers.
  • Handle success and error HTTP responses.
  • Connect form validation with asynchronous submission.
  • Represent disabled/submitting, success, and failure states.
  • Understand when to refresh displayed data after a change.

With your teacher — 3 hours ​

Send JSON in a request body, check the response, and update the page after a change succeeds. Prevent repeated submissions while a request is pending, and restore usable controls when it fails.

Independent practice — 3 hours ​

Extend the travel application with a new request form, status edits, and deletion using the supplied practice API. Test an invalid form and a rejected request, then check that the controls can be used again.

Check your work ​

Demonstrate creating, reading, updating, and deleting a sample record. Trigger a failed operation and show that the page explains the error and lets you try again.

Day 11 — Debugging, simple tests and code quality (planned) ​

Investigate a broken application using error messages, breakpoints, and network requests. Use what you observe to explain a problem, make a focused fix, and check it.

What you will learn ​

  • Use Console errors and stack traces.
  • Set breakpoints, step through code, and inspect local values.
  • Inspect DOM changes and HTTP request outcomes.
  • Distinguish syntax, logic, event, async, and network problems.
  • Write a few basic tests for pure JavaScript functions.
  • Improve readability and avoid common state-management mistakes.

With your teacher — 3 hours ​

Read an error and its stack trace, pause execution with a breakpoint, and inspect variable values. Compare this evidence with the request log, then use the supplied test setup to check small functions.

Independent practice — 3 hours ​

Repair a supplied Travel Dashboard with problems in array filtering, event handling, module imports, and an API request. Record what you observed, explain each cause, and add tests for two utility functions.

Check your work ​

Demonstrate the repaired behavior and passing tests. For each problem, explain the symptom, the evidence you used, the cause, and how you checked the fix.

Day 12 — Final integrated practical project (planned) ​

Apply the course skills to a Support Request Tracker. You will work from a written brief, organize the code, and demonstrate how your application meets the requirements.

What you will learn ​

  • Translate a written brief into data structures and UI behavior.
  • Divide an application into meaningful modules.
  • Use objects, arrays, functions, and callbacks correctly.
  • Handle browser events and validate user input.
  • Consume an HTTP JSON API with fetch and async/await.
  • Handle loading, empty, and error states.
  • Debug and explain defects independently.

With your teacher — 3 hours ​

Read the project brief with your teacher, identify the required behavior, and review how the work will be assessed. Discuss how to divide the application into modules and how to investigate a problem when the next step is unclear.

Independent practice — 3 hours: Final project — Support Request Tracker ​

Using a supplied starter page and practice API, build a request tracker that supports:

  • displaying requests in a list;
  • searching and filtering by status or category;
  • viewing request details;
  • creating a request with validation;
  • changing status and persisting the change;
  • displaying loading, success and failure feedback;
  • structuring the code into ES modules;
  • at least one simple automated test or acceptance check;
  • using DevTools to explain one observed request/response.

Use the supplied starter and API description to plan your implementation. The API description tells you which data fields and operations the service supports. Check each required behavior as you build.

Check your work ​

Demonstrate the required interactions using the project checklist. Explain your module structure, how the page handles an API response, and one debugging decision you made.

Check your progress ​

Checkpoint A — End of Day 3 ​

You can write a function, describe its inputs and return value, and explain which path a condition takes.

Checkpoint B — End of Day 6 ​

You can add a request through a form, update the visible list, and explain the event handler that connects those actions.

Checkpoint C — End of Day 10 ​

You can load data from the practice API, make a supported change, and show useful feedback when a request fails.

Final assessment — Day 12 ​

Use the final project requirements to check these areas before your demonstration:

AreaWhat you should be able to show
HTML/CSSShow a readable page with meaningful headings, labeled controls, and a usable layout
JavaScriptExplain your functions and data structures, and demonstrate filtering or transforming records
ModulesExplain what each module does and how the modules work together
DOM/eventsDemonstrate form and list interactions, validate values, and display user input as text
Async/HTTPLoad and change API data, showing what happens while waiting and when a request fails
DevToolsUse browser evidence to explain a problem or a request and response
QualityShow how you checked the required behavior, including at least one test or documented check

Be ready to explain your decisions and show how you checked the result. Refer to the final project brief for its detailed submission requirements when that lesson becomes available.

Documentation for reference ​

Course focus ​

You will build with plain HTML, CSS, and JavaScript. The focus is browser programming: understanding your files, responding to users, working with data, and finding and fixing problems.

The plan uses supplied APIs for the later exercises. Building a backend service, designing a database, deploying an application, and learning a frontend framework are topics for further study.

Start Lesson 1 →