</>Code Temper

Beginner · Free · In your browser

Learn JavaScript in the Browser

Put JavaScript to work in real web pages. Find and change elements safely and build them from data and templates; react to clicks, keys and forms; keep state, render it and remember it with localStorage; make changes accessible; load and send data with fetch, with loading, error and retry states; then add a debounced search, confirmation dialogs, keyboard shortcuts and timers, and finish with a course catalogue that brings it all together.

20 lessons6 modules4.4 hours of practice4 challenges
Start the JavaScript in the Browser course →

No installation. Your code runs right in the browser. Finish JavaScript Foundations first, or be comfortable with variables, functions, arrays, objects and loops. Basic HTML and CSS help too.

What you will be able to do

Course outline

Module 1

The page is a tree

Find, change and create elements safely, from data and templates.

  1. Find elements on the pagequerySelector, querySelectorAll & textContent · 9 min
  2. Change content safelytextContent, classList, attributes & dataset · 11 min
  3. Create elements from datacreateElement, append & textContent · 11 min
  4. Reuse markup with templates<template> & cloneNode · 10 min
Module 2

Respond to people

Clicks, the event object, one listener for a whole list, and forms.

  1. React to clicksaddEventListener & state · 10 min
  2. Use the event objectevent.target, event.key & preventDefault · 11 min
  3. One listener for a whole listEvent delegation & closest() · 12 min
  4. Handle forms the right waysubmit, preventDefault, FormData & validation · 12 min
Module 3

State, storage and accessibility

Render from state, remember with localStorage, accessible updates, and a shopping list project.

  1. Keep state, then renderOne source of truth & a render function · 13 min
  2. Remember things with localStoragelocalStorage, JSON & safe defaults · 12 min
  3. Accessible dynamic interfacesaria-expanded, live regions & focus management · 13 min
  4. Project: a shopping list appFoundation project · state, rendering, events & storage · 22 min
Module 4

Talk to a server

Load data with fetch, loading and error states, and sending data.

  1. Load data with fetchfetch, async/await & JSON · 12 min
  2. Loading and error statesresponse.ok, try/catch & retrying · 13 min
  3. Send data with POSTRequest options, JSON bodies & server validation · 13 min
Module 5

Smoother interactions

A debounced search, confirmation dialogs, and keyboard shortcuts.

  1. Wait for a pause in typingDebouncing with setTimeout & clearTimeout · 12 min
  2. Confirm with a dialog<dialog>, showModal() & returnValue · 12 min
  3. Keyboard shortcutskeydown on document, modifier keys & focus · 12 min
Module 6

Timers and the capstone

Intervals and a countdown, then a complete course catalogue.

  1. Timers and intervalssetInterval, clearInterval & formatting time · 13 min
  2. Capstone: a course catalogueCapstone · fetch, templates, state, events, storage & accessibility · 30 min

Ready for your first line?

Every lesson is short, hands-on, and checked automatically.

Start learning JavaScript in the Browser →