How every project in this course works

Welcome. Over six projects you will build small but complete apps with plain JavaScript. Before we start the first one, here is the approach we will use every time. Having a repeatable approach is what turns "I do not know where to start" into "I know the first three steps".

Step 1: read the brief and sketch the screen

Every project begins with a short brief, a few sentences describing what the app does. Sketch the screen on paper or in a notes app. Mark which parts change and which stay the same. The changing parts are where JavaScript will do its work.

Step 2: decide the state

State is the data your app needs to remember to draw the screen. For a timer, that might be:

const state = {
  secondsLeft: 1500,
  running: false,
  mode: "focus", // or "break"
};

If you can describe the state as a small object, you understand the app. If you cannot, the brief needs more thought before coding.

Step 3: write a render function

A render function reads the state and updates the page to match it. It does not decide anything, it just draws:

function render() {
  timeEl.textContent = formatTime(state.secondsLeft);
  startBtn.textContent = state.running ? "Pause" : "Start";
}

Step 4: wire up events

Event listeners change the state and then call render. They never update the page directly. This keeps all the drawing logic in one place, which makes bugs much easier to find.

startBtn.addEventListener("click", () => {
  state.running = !state.running;
  render();
});

Step 5: polish and accessibility

Finally we check the app with the keyboard, add labels, make sure focus is visible and handle edge cases such as empty lists or failed requests.

Why this pattern

This is a simplified version of how frameworks like React, Vue and Svelte work: state in, UI out. Learning it with plain JavaScript means you will understand what those frameworks automate when you get to them.

Download the starter files for all six projects and open the first folder. Next, we build the focus timer.