Coding: Creating a Simple Website

About 4 minutes

A website is a file on your computer. That is the whole secret. You write it with a language called HTML, save it, and open it in a browser — no special software, no account, nothing to install.

A text editor (Notepad on Windows, TextEdit on a Mac)
A web browser (Chrome, Safari, Firefox — any of them)

The Code

This is a complete website. Every part of it is explained further down.

<!DOCTYPE html>
<html>
<head>
  <title>My First Website</title>
</head>
<body>
  <h1>Hello, World!</h1>
  <p>This is my first website!</p>
</body>
</html>

Open your text editor and start a new, empty file.
Type the code above. Typing it by hand rather than copying is slower and teaches you far more, because every mistake is one you then have to find.
Save it as mywebsite.html. The .html on the end is the part that matters — it is what tells your computer this is a web page.
Open your browser and drag the saved file into it. Your website loads.

What Each Line Does

<!DOCTYPE html> — tells the browser this is an HTML page.
<html> — the wrapper. Everything else lives inside it.
<head> — information about the page rather than content on it.
<title> — the words that appear on the browser tab.
<body> — everything a visitor actually sees.
<h1> — a heading, the biggest text on the page.
<p> — a paragraph.

Notice the pattern: nearly every tag comes in a pair, like <p> and </p>. The one with the slash closes it. The browser reads the opening tag as "start being a paragraph" and the closing tag as "stop now".

Every paragraph ends with a closing tag. What is it for?

It starts a new paragraph
It tells the browser the paragraph stops there
It makes the text bigger

Change It

Rewrite the text inside the <h1> and the <p> so the page says something of yours.
Add a second paragraph by copying the whole <p>…</p> line.
Make a word bold: <p>This is <b>bold</b> text.</p>

Save the file again and reload the browser tab each time. That loop — change, save, reload — is what building a website actually feels like.

If It Goes Wrong

The page is blank. Check the file name really ends in .html.
You can see the code instead of the page. You opened it in the text editor, not the browser.
Something looks wrong. Check every opening tag has a closing one. A missing </h1> will make the whole rest of the page enormous.