← All courses

Basic Web Development

Learn HTML, CSS, and JavaScript by building small pages.

This course has ten small web pages. Each page is finished and it works. Every lesson gives you your own copy beside the guide. Change the code and the page changes with it.

Do the lessons in order. Each lesson adds one new idea to the one before it. You start with a table, then add colour, then add your first JavaScript. The last lesson gives you a broken page to fix.

You need no accounts and no installs. When you want to keep something, save or copy the files into a folder of your own. Every example is plain HTML, CSS, and JavaScript, so opening the HTML file in a browser is all it takes to run it.

Who it's for
New programmers, about grade 4 to grade 8, and the adults who teach them. Lesson 1 needs no prior knowledge.

Lessons

  1. Geological Wonders

    Put facts in a table with HTML. Then change how the table looks with CSS.

    <table><tr>, <th>, <td>Linking a stylesheetCSS selectors

  2. Zoo Webpage

    Add your first JavaScript: a button that shows a random fact, and a button that turns on night mode.

    ArraysFunctionsMath.random()click events

  3. Times Table Grid

    Build a multiplication table with a loop inside a loop. About 100 cells come from 20 lines of code.

    The counting for loopNested loopsif inside a loopcreateElement

  4. 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

  5. Quote Typer

    Type a quote and get feedback on every keystroke. Green means correct, blue means keep going, red means check your spelling.

    Arrays of objectsMath.random()The input eventstartsWith

  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. Every paragraph and every button is made by JavaScript.

    Functions with parametersHelper functionscreateElementappendChild

  10. 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 and the page marks them for you, question by question, with an explanation wherever you went wrong. A printable version is linked inside each one.