Class 1 — The Basics

What you will learn

• What programming is.
• What code and programming languages are.
• The difference between HTML, CSS, and JavaScript.
• How AI can help with coding, and why its output needs to be checked.
• How to write a simple HTML page.

Lesson 1

What is programming?

Programming is giving a computer precise instructions so it can do a task. A computer is fast, but it has no common sense. It only does exactly what it is told, in the order it is told.

Think of a recipe. "Make a sandwich" is not enough for a computer. It needs every step: take two slices of bread, spread butter on one slice, add cheese, put the slices together. Those written steps are code, and the language they are written in is a programming language.

If the instructions are wrong or unclear, the output is wrong. Fixing that is called debugging, and you will do plenty of it.

Lesson 2

The three building blocks of a website

Almost every website is built from three languages that work together. Pick a tab to see what each one adds to the same small page.

Lesson 3

Your first HTML page

This is a complete HTML page. Read it first, then press Run Example to see what it makes.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My First Page</title>
</head>
<body>
  <h1>Hello, world!</h1>
  <p>I am learning to code.</p>
</body>
</html>

What the important tags do

<!DOCTYPE html>

Tells the browser this is a modern HTML page.

<html>

Wraps everything. lang="en" says the page is in English.

<head>

Information about the page that is not shown on it.

<meta charset>

Makes letters and symbols display correctly.

<title>

The name shown on the browser tab.

<body>

Everything visitors see goes in here.

<h1>

The main heading. It is the biggest.

<p>

A paragraph of text.

Lesson 4

Coding with AI

An AI assistant can write code, explain it, and help you find bugs. It can also be confidently wrong. Use it like a tutor, not like a vending machine.

1. Describe exactly what you want. Say what the page or program should do.
2. Name the language and the result. For example "in HTML" and "a heading and a list".
3. Ask for an explanation. If you cannot explain a line, ask the AI to.
4. Test it and fix errors. Run the code. If it breaks, paste the error message and ask what it means.

Knowledge check

Test what you learned

Mini project

Build a page about you

Make a simple personal page. Edit the starter code below, replacing each ... with your own words, then press Preview my page. The checklist ticks itself as your page meets each goal.

<h1>Hi, I'm Sam</h1>
<p>I'm 14 and I love building things.</p>
<ul>
  <li>Football</li>
  <li>Drawing</li>
</ul>

Want to keep it? Copy your code into a file named mypage.html on your computer and open it in your browser.