▶ TrainingGet Pro
Menu
All tools & lessonsAll toolsAllGet the appApp
Learning departments Music, Math, Cookery, Programming and Art are open – explore →

HTML and CSS course: build your own web pages

US version. US grades and US spelling. · UK version of this page

20 free lessons for complete beginners (Grades 6–7, ages 11–12). Learn the code behind every web page: HTML says what is on the page, CSS makes it look good. Each lesson is 40 minutes with a 20-minute homework; you build real pages in your browser and they are graded as you go.

For parents and teachers

No knowledge of HTML is needed – Mr Babbage and Miss Lovelace explain each step. Questions are graded by Classfern's own checks in the browser: the page your child builds is drawn by the browser itself and checked, with some hidden checks. The two projects at the end also have a design rubric for you to use. Nothing your child types is sent anywhere.

Unit 1: Web pages and HTML

  1. What is HTML? Tags and elements
  2. The parts of every web page
  3. Headings and paragraphs
  4. Lists: bullets and numbers

Unit 2: Links, images and tables

  1. Links between pages
  2. Images and alt text
  3. Tables of data

Unit 3: Forms

  1. Forms: labels and text boxes
  2. Choices: checkboxes, radio buttons and menus

Unit 4: CSS: style rules

  1. Your first CSS rules
  2. Classes, ids and which rule wins
  3. Color on the web: names, hex and rgb
  4. Styling text: size, weight and alignment

Unit 5: Boxes and layout

  1. The box model: padding, border and margin
  2. Flexbox: boxes in a row
  3. Flexbox: spacing and lining up

Unit 6: Good pages for everyone

  1. Pages everyone can use: accessibility
  2. Header, nav, main and footer
  3. Project: a page about your hobby
  4. Project: your own website + course check

Practice tests

Curriculum

CSTA K–12 Computer Science Standards (2017), grades 6–8: 2-AP-16 – Use existing code, media and libraries in original programs, with attribution; 2-AP-19 – Document programs so they are easier to follow, test and debug; 2-AP-13 – Decompose problems to help design, implement and review programs; 2-IC-21 – Discuss bias and accessibility in the design of existing technologies; 2-DA-08 – Collect data with computational tools and transform it to be more useful and reliable; 2-CS-01 – Suggest device design improvements based on how users interact with them; 2-IC-23 – Describe trade-offs between making information public and keeping it private and secure; 2-AP-17 – Systematically test and refine programs using a range of test cases; 2-DA-07 – Represent data using several encoding schemes; 2-AP-15 – Get feedback from teammates and users to refine a solution.

The standard codes are CSTA's; the descriptions are our own words.

Our lessons and questions are our own. They are not written or endorsed by any government department, testing agency or exam board. HTML and CSS are open web standards; Classfern is not affiliated with the organisations that publish them.