How to create an HTML page from scratch

This guide walks through the whole path from an empty folder to a working HTML page with CSS attached — no extra theory, just practical steps.

What you need: Notepad or VS Code

HTML doesn't require any special software — even plain Notepad on Windows or TextEdit on Mac works. But for a more comfortable workflow, a code editor helps:

  • Notepad / TextEdit — works, but no syntax highlighting or suggestions. Fine for a first try.
  • VS Code — free, highlights tags, suggests closing elements, shows errors. The recommended option.

The key rule: the file must be saved with a .html extension, not .txt.

Your first code

Create a file named index.html and paste in the basic page skeleton:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My page</title>
</head>
<body>
  <h1>Hello, world!</h1>
</body>
</html>

Save the file and open it directly in a browser (double-click the file) — that's enough, no server needed.

Adding CSS

Create a file named styles.css in the same folder and link it inside <head>:

<link rel="stylesheet" href="styles.css">

Start styles.css with a simple rule:

body {
  font-family: sans-serif;
  max-width: 700px;
  margin: 0 auto;
}

Project file structure

A simple site only needs one folder with this structure:

my-site/
  index.html
  styles.css
  images/
    photo.jpg

Paths in HTML are written relative to the location of index.html, e.g. images/photo.jpg.

Common beginner mistakes

  • A forgotten closing tag — browsers often "forgive" this, but the layout can still break.
  • The file was saved as index.html.txt — check the extension in the file properties.
  • An incorrect path to CSS or an image (letter case matters on most servers).
  • Special characters show up as garbled text — a missing <meta charset="UTF-8">.
▶ Open in HTML Editor ⇩ Download the example .html

Related tools