Your First Web Page

All you need to make a web page is a text editor and a browser. This lesson walks through creating an HTML file, opening it, editing it, and using the browser's developer tools to inspect what you built.

Step 1: choose an editor

Any plain-text editor works, but a code editor makes life much easier with syntax colouring, auto-closing tags and previews:

• VS Code — free, popular, with excellent HTML support. The "Live Server" extension reloads the page every time you save.
• Other good options: Sublime Text, Zed, WebStorm.
• Avoid word processors like Microsoft Word — they add hidden formatting that isn't HTML.

Step 2: create a file

Make a folder for your site, then create a file inside it called index.html. Type (or paste) this:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>My First Page</title>
</head>
<body>
  <h1>Hello! I'm learning HTML.</h1>
  <p>This page was written by hand.</p>
</body>
</html>

Save it. The .html extension tells the computer and the browser what kind of file it is. index.html is the conventional name for a site's home page — web servers show it automatically when someone visits a folder.

Step 3: open it in a browser

Double-click the file, or drag it onto a browser window. The address bar will show something like file:///Users/you/site/index.html — you're viewing a local file, not something on the internet. Change the text, save, and refresh the browser to see your edit.

Try it here

The editor below works the same way, without saving or refreshing. Change the heading, add another paragraph, or put your name in:

Step 4: inspect with developer tools

Every browser has built-in developer tools. Right-click an element on the page and choose Inspect (or press F12). The Elements panel shows:

• the page's HTML as a tree you can expand and collapse;
• which element is which, highlighted on the page as you hover;
• the CSS applied to the selected element.

You can even edit the HTML right there to experiment — changes disappear when you reload, so nothing breaks.

Step 5: organise your files

As a site grows, a tidy folder structure helps:

my-site/
├── index.html
├── about.html
├── css/
│   └── styles.css
├── js/
│   └── main.js
└── images/
    └── photo.jpg

Some rules that avoid problems later:

• Use lowercase file names without spaces: about-me.html, not About Me.html. Web servers are often case-sensitive, and spaces turn into %20 in URLs.
• Keep images, styles and scripts in their own folders.
• Link between pages with relative paths, like href="about.html" (lesson 10).

Step 6: putting it online

To share a site, its files have to be on a web server. Free static hosting services such as GitHub Pages, Netlify, Cloudflare Pages and Vercel let you upload a folder (or connect a Git repository) and give you a public URL in minutes. Since an HTML site is just files, it works on any host.