Skip to main content
← All courses

JavaScript

Make a page do things: buttons, loops, and decisions.

This course has eleven small web pages. Every one of them does something. A button gives you a random fact. A loop builds a whole times table. A page keeps score across rounds. The last lesson gives you a page that is broken on purpose.

Every page comes with its HTML and CSS already written. That is on purpose. You learn one new thing per lesson. In this course the new thing is always the code. Each lesson gives you your own copy beside the guide. You can change your copy and watch what happens.

Do the lessons in order. Each lesson adds one new idea to the lesson before it. The ideas come in this order: an array, a loop, a loop inside a loop, and then a function of your own.

You do not need an account. You do not need to install anything. Every example is plain HTML, CSS, and JavaScript. To run one, open its HTML file in a browser.

Who it's for
Students who have finished HTML and CSS. This course is also for anyone who can read a web page and knows what a tag and a class are. Lesson 1 is the first JavaScript you write.

Lessons

  1. Zoo Webpage

    Write your first JavaScript. One button shows a random fact. One button turns on night mode.

    ArraysFunctionsMath.random()click events

  2. Times Table Grid

    Build a multiplication table with a loop inside a loop. Twenty lines of code make about 100 cells.

    The counting for loopNested loopsif inside a loopcreateElement

  3. Savings Goal Counter

    You save $15 a week for a $120 skateboard. A while loop counts the weeks for you.

    whileThe accumulator patternCountersStopping a loop

  4. Quote Typer

    Type a quote. The page checks your text on every keystroke. Green means correct. Blue means keep going. Red means check your spelling.

    Arrays of objectsMath.random()The input eventstartsWith

  5. Creature Finder

    A list you can search and filter. Three array methods do all of the work.

    .filter().map().includes().toLowerCase()

  6. Mad Libs

    Fill in a few words. The page puts them into a silly story.

    Reading several inputsTemplate literalsBuilding a string.trim()

  7. Calculator

    Write one function for each operation. Each one takes two numbers and gives an answer back.

    Writing a functionParametersreturnCalling a function

  8. Rock Paper Scissors

    Play against the computer. The page keeps the score across rounds.

    ArraysMath.random()&& and ||if / else if / else

  9. Choose Your Own Adventure

    A story where you click to choose. JavaScript makes every paragraph and every button.

    Functions with parametersHelper functionscreateElementappendChild

  10. Study Timer

    Code that runs when nobody is touching the page. Once a second, until you stop it.

    setIntervalclearIntervalRemainder with %padStart

  11. Bug Hunt

    A page with four features and four bugs. Your job is to find them and fix them.

    How to debugThe F12 consoleconsole.log= and ===

Tests and answer keys

Answer these on screen. The page marks them for you, question by question. It explains every answer you got wrong. Each test also links to a printable version.