Level 1
Beginner
Events and the DOM
- The DOM
- Events
- ARIA
- HTML first
About this level
Start here if you're new to JavaScript. Each project is one small, familiar part of a website: a counter, a colour flipper, an accordion, a pop-up, and a set of tabs. Each one teaches you to find elements on the page, listen for what people do, and change the page in response. You'll also learn the accessibility basics that make those parts work for keyboard and screen reader users, and when HTML and CSS can do the job with no JavaScript at all.
Before you start
You only need a browser. Knowing a little HTML and CSS helps, but every project explains its own markup and styles.
What you'll learn
- Find and change elements with querySelector
- Respond to clicks and key presses with event listeners
- Show and hide content in an accessible way
- Use ARIA attributes like aria-expanded and aria-live correctly
- Tell when HTML and CSS can do the job without JavaScript
The projects
- 01
Counter
Count up, down, and back to zero, with the number announced to screen readers.
9 ideas
- 02
Color Flipper
Flip the page to a random colour in HEX, RGB, or HSL, and see its code.
11 ideas
- 03
Accordion
Show and hide answers three ways, from no JavaScript at all to one panel open at a time.
14 ideas · 3 ways
- 04
Modal Box
Open a box on top of the page three ways, from no JavaScript to a full modal with the dialog element.
18 ideas · 3 ways
- 05
Tabs
Switch between panels three ways, from radio buttons with no JavaScript to tabs that work fully with a keyboard.
20 ideas · 3 ways