First Web Page: HTML, CSS and a Little JavaScript for Ages 10–14

Twelve lessons that turn a plain text file on your own computer into a real website — headings, links, pictures, colours, layout, and buttons that do things — with no installing and no account.

What you'll be able to do

• Write a valid HTML page by hand with headings, paragraphs, lists, links and pictures, and know why every tag has a closing tag
• Link several pages together into one small site inside a folder, using relative links that still work when the folder moves
• Style pages with a CSS file: colours, fonts, spacing, boxes, and a simple flexbox layout that works on a phone
• Write JavaScript that reacts to a click, reads what someone typed, makes a decision with if, and repeats with a loop
• Find and fix your own mistakes using the browser's developer tools
• Explain the difference between a file on your computer and a website on a server, and what a server adds

Before you start

• Comfortable reading and typing in English
• A computer (Windows, Mac or Linux) with a browser — a phone or tablet is not enough for this course
• About 20–30 minutes per lesson; a grown-up nearby for lessons 4 and 12 is helpful but not required

Curriculum

Lesson 1 is free to read, no account needed. The rest unlock the moment you buy.

1. 1 Your first web page Preview free A web page is a text file with tags in it. Make one, open it in a browser, change it, and reload — the habit you will use in every lesson. 3 min
2. 2 Tags, headings and paragraphs Six headings, paragraphs, bold and italic, line breaks, comments — and the rules that make tags nest properly. 3 min
3. 3 Lists and links Bulleted and numbered lists, links to other websites, and — the important one — links between pages in your own folder. 3 min
4. 4 Pictures on your page The img tag, why alt text is not optional, sizing, captions — and whose pictures you are allowed to use. 3 min
5. 5 Your first CSS HTML says what things are; CSS says how they look. Colours, fonts and sizes, first inside the page and then in a stylesheet every page shares. 3 min
6. 6 Boxes — margin, padding and border Every element is a box. Once you can see the boxes, you can space them, outline them, round them and centre the whole page — and the browser's developer tools show you the boxes. 3 min
7. 7 Layout — putting things side by side Header, navigation, main and footer tags; flexbox for a menu across the top and cards in a row; and making sure it all still works on a phone. 3 min
8. 8 Your first JavaScript The third language: one that runs. Variables, the console, and a button that changes the page when you click it. 3 min
9. 9 Deciding and repeating if and else let code choose; loops let it repeat. A click counter, a dice roller and a loop that builds a list — the three shapes behind every program. 3 min
10. 10 Forms that react Text boxes and buttons: read what someone typed, check it, and answer. A greeting, a number-guessing game — and the moment you discover the page forgets everything. 3 min
11. 11 Your personal site — the project Put it all together: three pages, one stylesheet, a shared header, one interactive page, a checklist to test against, and a short list of things not to put on a page you might share. 3 min
12. 12 What a server does (and what comes next) Your site is a folder of files on one computer. A website is the same files on a computer that never switches off — plus programs that run there. Here is the whole picture, and the door to the next course. 4 min

How it works

1. 1 · Buy once

   One payment in your own currency, no subscription. An adult buys; the account is created from the email you pay with.

2. 2 · Log in and read

   Every lesson opens in the adult's account on any device. Mark each one done and pick up where you left off.

3. 3 · Keep the Word file

   The whole course as a .docx — annotate it, print it, read it offline. Re-download it any time from your orders.

Questions about this course