Your First Page: Save It, Open It, See It Break

Your first page will break. That is normal. The goal of this lesson is to create a file, open it, recognise the usual blank-page causes, and set up a folder you will reuse for every example.

Create the file

1. Create a folder named htmlcss-course somewhere easy to find, for example on your Desktop.
2. Open a plain text editor (Notepad, Notepad++, VS Code, or similar). Not Word. Word adds formatting that breaks HTML.
3. Paste this:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>My first page</title>
</head>
<body>
  <h1>It worked</h1>
  <p>If you can read this, the file opened as HTML.</p>
</body>
</html>

1. Save as index.html inside htmlcss-course. The extension must be .html, not .txt and not .html.txt.

Open it in the browser

Ways that work:

• Double-click index.html (opens in your default browser).
• Or drag the file onto a Chrome or Edge window.
• Or in the browser: Ctrl+O (Cmd+O on Mac) and pick the file.

The address bar should start with file:/// and end with index.html. You should see "It worked" as a heading.

When it looks blank or wrong

Check these in order. Most "my page is broken" reports are one of them.

1. Wrong extension. If the tab shows the raw tags as text, or the file icon looks like a text document, rename it so it ends in .html only.
2. You edited a different copy. Search your disk for another index.html. Open the one in htmlcss-course again.
3. The file didn't save. Change the heading to It worked 2, save, reload the browser tab (F5). If the old text stays, you are looking at an unsaved buffer or the wrong file.
4. Broken tags. Delete a closing </h1> on purpose, save, reload. Some browsers still show content; some hide a chunk. Put the tag back. Get used to Save → Reload as your loop.

<!-- Broken on purpose: missing </h1> -->
<h1>It worked
<p>The heading never closed.</p>

Fix:

<h1>It worked</h1>
<p>The heading closed.</p>

Add a stylesheet next to the page

Create styles.css in the same folder:

body {
  font-family: Arial, sans-serif;
  margin: 2rem;
  color: #080b0e;
}

h1 {
  color: #034bff;
}

Link it from the HTML <head>:

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

Save both files. Reload. The heading should turn blue. If it does not:

• Confirm styles.css is in the same folder as index.html.
• Confirm the href spelling matches the file name exactly (case matters on some systems).
• Open DevTools (F12) → Network, reload, and see if styles.css is 404.

A folder for this course

Keep one folder per lesson if you like, or one folder with many files. What matters:

• HTML and its CSS live together or with clear relative paths.
• You open the HTML file, not the CSS file, in the browser.
• You never paste course examples into a live production site without reviewing them.

What happens if you skip this

If you only follow screenshots in an online sandbox, you will not know how files on your computer map to what the browser shows. The first offline assignment then feels like a different subject.

Open your page now. Change the paragraph text. Save. Reload. Did the browser show the new words? If yes, you have the loop this course depends on.