Build six small apps with plain JavaScript and the DOM

Reading about JavaScript only gets you so far. You learn front end development by building things, getting stuck and finding your way out. This course is a set of six small, complete projects built with plain HTML, CSS and JavaScript. No framework, no build step, just the browser.

Each project focuses on a different skill, so by the end you have used the most important browser APIs in a real context:

1. Focus timer: timers, state and updating the page
2. Notes app: forms, lists, editing and localStorage
3. Image gallery: event delegation, keyboard navigation and a dialog
4. Quiz: loading JSON, rendering from state and scoring
5. Weather card: fetch, loading and error states, and geolocation
6. Kanban board: drag and drop with a keyboard alternative

How the projects are built

Every project starts from a short brief and a plain HTML page. We plan the state first, write a render function, then wire up events. This structure repeats in every project, so by the third one you will find yourself planning before writing code. We also make each project accessible: real buttons, labels, focus management and support for keyboard users.

Who it is for

You know the basics of JavaScript, such as variables, functions, arrays and objects, but you have not built many things on your own. If you have completed an introductory course and want practice before learning a framework, this course is for you.