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">.
Related tools
HTML Editor Online
An online HTML editor with syntax highlighting, line numbers, and a live preview. No sign-up, no server.
Learn HTML
A free interactive HTML course for beginners — with code examples and practical exercises.
HTML Document Structure
The required html, head, and body tags and what they're for.
Linking CSS
How to link an external CSS file or set styles directly in head.
How to publish an HTML site online
Practical guide: what "publishing" a site actually means, how hosting and domains work, why HTTPS matters, and why a site sometimes doesn't work after upload.