JavaScript · Beginner level

Beginner level · Module 5 of 5 · 10 guided hours

Interactive Page Project

Plan, build and debug the Market Price Board using everything from the Beginner level.

Learning objectives

  • Plan the data and interface of a small interactive page
  • Build it step by step with the render pattern
  • Debug with DevTools and test with a written plan

Topics

  • planning data and UI
  • render pattern
  • sorting and highlighting
  • DevTools debugging and breakpoints
  • test records
  • presentation

Lessons

  1. Lesson 1 Planning the Price Board

    Decide the data shape, the page layout and the functions before writing code.

    data modelwireframefunction listbuild order

  2. Lesson 2 Building the Price Board

    Implement the features one at a time using the render pattern, checking the page after each step.

    render after changesorting with compare functionshighlighting with classesincremental build

  3. Lesson 3 Debugging and Testing in the Browser

    Find bugs with DevTools breakpoints and the console, then test the finished page with a written plan.

    Sources panelbreakpoint and stepconsole errorstest plan

Practical activity

Build the Market Price Board level project in three stages with a short review after each.

Expected outcomes

  • A working interactive page
  • Basic debugging skills with DevTools

Assessment

The level project assessed against its criteria, with a short demonstration.

Free taster lesson Problem Solving with JavaScript Read a free self-study lesson on this topic in the Free Course Library.

Taught live by an instructor — online or in person. Free course lessons are for self-study and do not lead to a certificate — see registration options.