JavaScript + HTML/CSS

Build a page with HTML, style it with CSS, then make it react with JavaScript. Everything runs right here in the page.

Start lesson 1 Open the playground

0 / 13 lessons done

01 HTML: tags, elements and nestingLearn how HTML describes a web page with tags and elements, how to nest them properly, and build your first headings, paragraphs and lists. 2 exercises
02 CSS: selectors, colour, fonts and classesStyle HTML with CSS. Learn rules, selectors, colours, fonts and classes, and how to target exactly the elements you want. 2 exercises
03 The box model and flexboxEvery element is a box. Learn padding, border and margin, then use flexbox to line boxes up in a row and space them out. 2 exercises
04 console.log, values and typesStart writing JavaScript. Print with console.log, meet strings, numbers and booleans, and check what type a value is with typeof. 2 exercises
05 let, const and template literalsStore values in variables with let and const, learn when to use each, and build strings the easy way with template literals. 2 exercises
06 if, else and comparing thingsMake decisions in JavaScript with if, else if and else. Learn the comparison operators and why === beats == almost every time. 2 exercises
07 Loops: doing things againRepeat code with for and while loops in JavaScript. Learn the three parts of a for loop and how to avoid the classic off-by-one bug. 2 exercises
08 Functions and returnWrite reusable JavaScript functions with parameters and return values, learn arrow functions, and see why return is not the same as console.log. 2 exercises
09 Arrays and their methodsStore lists in JavaScript arrays. Learn indexes, length and push, loop over items, and transform lists with map and filter. 2 exercises
10 Objects: grouping dataGroup related data in JavaScript objects. Learn keys and values, dot notation, updating and adding properties, and arrays of objects. 2 exercises
11 The DOM: changing the page with JavaScriptUse JavaScript to find elements on a web page with querySelector, change their text with textContent and their style with classList. 2 exercises
12 Events: making buttons do thingsReact to clicks with addEventListener. Build a working click counter and a toggle button using JavaScript events and the DOM. 2 exercises
13 Forms: reading what people typeRead text boxes with JavaScript. Use input.value, turn text into numbers with Number(), react to typing with the input event and handle a form submit. 2 exercises

Projects for this track

FreeWeb · 45 min

Bill splitter

Two inputs, one button, one answer. Read values from a form, do some maths, show the result on the page.

Make inputs for the bill total and the number of people.
On click, read both values with Number(input.value).
Show each person's share with two decimals using toFixed(2).

Start in the playground

FreeWeb · 40 min

One-question quiz

A question, three buttons, and a page that tells you if you got it right. Clicks, classList and a bit of CSS so it feels like a real app.

Give each answer button a data-correct attribute set to "yes" or "no".
On click, add a right or wrong class to the button and show a message in the #result paragraph.
Disable all the buttons after the first click so nobody can cheat.

Start in the playground

Pro, coming soonWeb · 3 hours

To-do app that remembers

Add, tick off and delete tasks, saved in localStorage so they survive a refresh. The classic, done properly.

Get told when it opens