Your First Web Page

What you'll learn

• Which tools you need (all free).
• How to create and save an HTML file.
• What each line of the basic page skeleton does.
• How to see your changes in the browser.

The idea

Your tools

You need just two things:

• A web browser. Any modern one: Chrome, Firefox, Safari or Edge.
• A code editor. We recommend Visual Studio Code (VS Code). It's free for Windows, macOS and Linux, and it colours your code and closes tags for you.

You can also use the Notepad app on Windows. Avoid word processors such as Microsoft Word: they save hidden formatting that browsers can't read.

Create the file, step by step

1. Make a new folder on your computer called my-website.
2. In VS Code choose File → Open Folder and open my-website.
3. Choose File → New File and save it as index.html. The name index.html is special: web servers show it automatically when someone visits a folder, so it's always your home page.
4. Type (or paste) the page below and save (Ctrl+S on Windows and Linux, Cmd+S on Mac).
5. Find the file in your folder and double-click it. It opens in your browser.

The skeleton, line by line

Every HTML page uses the same skeleton:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>My first website</title>
</head>
<body>
  <h1>Welcome to my website</h1>
  <p>I'm learning HTML.</p>
</body>
</html>

Edit, save, refresh

This is the routine you'll use every day as a web developer:

1. Edit the file in your editor.
2. Save it.
3. Refresh the browser tab (F5, or Cmd+R on Mac).

Tip: in VS Code, type ! in an empty .html file and accept the suggestion with Enter or Tab. It writes the whole skeleton for you.

Try it

Run this page, then change the title and heading. The title doesn't appear inside the preview because it belongs in a browser tab:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>My first website</title>
</head>
<body>
  <h1>Welcome to my website</h1>
  <p>I'm learning HTML. Today I made my first page!</p>
  <p>Special characters work thanks to UTF-8: café, niño, Müller.</p>
</body>
</html>

Your turn

1. Create my-website/index.html on your own computer with the skeleton above and open it in your browser.
2. Change the <title> and check that the browser tab changes after you save and refresh.
3. Add a paragraph about why you're learning HTML.

Common mistakes

• The file is called index.html.txt. Windows hides file extensions by default, so Notepad may add .txt. In File Explorer turn on View → File name extensions and rename the file.
• Forgetting to save. If the browser doesn't change, save the file and refresh again.
• Putting content in the <head>. Headings and paragraphs belong in the <body>; the head is for information about the page.
• Using curly quotes. Word processors turn " into “ ”, which breaks attributes. Write HTML in a code editor.

Key points

• You need only a browser and a code editor such as VS Code.
• Save your home page as index.html.
• Every page has the same skeleton: <!DOCTYPE html>, <html>, <head> (information about the page) and <body> (what you see).
• Work in a loop: edit, save, refresh.