Skip to main content
← All courses

HTML and CSS

Build web pages you can see. No JavaScript in this course.

This course has seven small web pages. The first page is only words on a white background. The last page is a form that asks you questions and checks your answers. Every lesson gives you your own copy of the code beside the guide. Change the code and the page changes with it.

HTML and CSS are two different jobs. HTML says what each piece of a page is. A piece can be a heading, a paragraph, a picture, or a list. CSS says what each piece should look like. The first two lessons use no CSS on purpose. That lets you see what HTML does on its own. That is why those two lessons look plain.

You do not need an account. You do not need to install anything. A text editor and a browser are enough. Lesson 1 shows one Visual Studio Code shortcut. It is the one shortcut worth learning on your first day.

When you finish this course, go on to JavaScript. JavaScript makes these pages do things.

Who it's for
New programmers, about grade 4 to grade 8, and the adults who teach them. You do not need to know anything before lesson 1.

Lessons

  1. Your First Page

    Make a web page from nothing. One key press writes the skeleton. You write the words.

    ! then Tab<!DOCTYPE html><head> and <body><title>

  2. Postcard

    The tags you will use every day. They are pictures, links, and the two kinds of list.

    <img> with src and alt<a href><ul> and <ol><li>

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

  4. Trading Card

    Give elements a class. Then use the box model to turn nine plain elements into a card.

    classClass selectors<div> and <span>The box model

  5. Cards in a Row

    One line of CSS puts three cards side by side. This is flexbox. Flexbox is how you arrange a page.

    display: flexgapflex-wrapjustify-content

  6. Planet Grid

    Flexbox lays things out in one direction. A grid lays them out in two. One tile takes up four squares.

    display: gridgrid-template-columnsfr unitsrepeat() and auto-fit

  7. Sign-up Form

    The boxes people type into. Every page so far only showed things. This one asks for them.

    <form><label> and for<input> typesrequired

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.