Start learning →

JavaScript in the browser

Using everything you know on real pages: finding and changing elements, responding to people, loading data from a server, and remembering it between visits.

About 10 hours of study

Learning objectives

Lessons

  1. 1

    HTML and CSS

    The structure of a web page: elements, tags and attributes, the head and body, headings, lists, links, images and forms; and CSS: selectors, the box model, colours and a flexbox layout.

  2. 2

    The DOM: changing the page with JavaScript Intermediate

    The Document Object Model: the page as a tree of objects, finding elements with querySelector, changing text, attributes, classes and styles, and creating and removing elements.

  3. 3

    Events and forms Intermediate

    Making a page respond: addEventListener, the event object, clicks, typing and form submits, preventDefault, event bubbling and delegation, and a small to-do app.

  4. 4

    Fetching data and saving it Intermediate

    How a page talks to a server with fetch and JSON, how to show loading and error states, and how to remember data in the browser with localStorage.

Module practice

Module quiz

1. A script at the top of the head cannot find an element. What is the most likely reason?
2. Why should a comment typed by a user be shown with textContent?
3. Why listen for submit on a form rather than click on its button?
4. A list gains new items while the page is open. What makes their clicks work with no new listeners?
5. A server answers 500. Which is true of const r = await fetch(url)?
6. Why should reading from localStorage be inside a try block?

‹ How JavaScript really worksFinal assessment ›