Your First HTML Page

Time to write actual HTML. This lesson creates a file that you will keep adding to throughout the next several modules.

Create the file

Create a folder anywhere on your computer — call it something like my-site. Inside that folder, create a new file named:

index.html

Open the file in VS Code and 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, world!</h1>
    <p>This is my first web page.</p>
  </body>
</html>

Open it in a browser

If you installed Live Server: right-click the file in VS Code’s file explorer and choose Open with Live Server.

Otherwise: find the file in your file system and double-click it to open it in your browser.

You should see “Hello, world!” as a large heading and the paragraph below it.

What this structure means

Every HTML page starts with this same skeleton:

Part	Purpose
`<!doctype html>`	Tells the browser this is a modern HTML5 document
`<html lang="en">`	The root element of the page; `lang="en"` declares the language
`<head>`	Contains information about the page — not visible content
`<meta charset="utf-8">`	Tells the browser how to read the text characters
`<meta name="viewport" ...>`	Controls how the page scales on mobile devices
`<title>`	The text that appears in the browser tab
`<body>`	Contains everything visible on the page

You will type <meta charset> and <meta name="viewport"> on every page you build. Module 09 explains in full what each one does and what goes wrong if you leave them out — for now, include them every time.

Exercise

Give your page a real topic now — you will keep building on this file for the next several modules.

Change the <h1> text from Hello, world! to a topic you actually know something about — a hobby, a place, a game, anything.
Change the <p> text to one sentence introducing that topic.
Save the file and refresh your browser (or let Live Server do it automatically) to confirm the changes appear.

Recap

Every HTML file starts with <!doctype html> followed by the same <html>, <head>, and <body> structure.
<head> holds information about the page. <body> holds what appears on screen.
<meta charset="utf-8"> and <meta name="viewport"> belong in every <head> — Module 09 explains why.
<title> sets the text in the browser tab.

Module 02 explains elements and attributes — the building blocks you will use to fill in the <body>.