Your first document
Practice: build your page shell
Create the complete document shell for a personal page with a doctype, language, useful title, description, and visible content.
We will build one small personal page through the rest of the course.
Create a folder named my-page. Inside it, create index.html.
Start with this document:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sam's web page</title>
<meta
name="description"
content="Projects, notes, and useful links from Sam."
>
</head>
<body>
<h1>Sam's web page</h1>
<p>I am learning how the Web works.</p>
</body>
</html>Replace Sam’s name and description with your own.
Open the file in your browser. The heading and paragraph appear inside the page. The title appears in the browser tab.
Check the invisible parts
Use View Page Source. Confirm that the browser received the same structure you wrote.
Then check these details:
doctypeis the first linehtmlhas the correct languageheadcontains the title and metadatabodycontains the visible page- every opened element is closed
Save this file. Each practice lesson will improve it.
Set lang on html to match the language you write in. If your page is in Italian, use lang="it". Screen readers and translation tools use that value.
If the tab title still says the editor’s default, you saved the wrong file or the browser is showing a cached tab. Hard refresh after each save while you are learning.
Your folder should look like this:
my-page/
index.htmlLater lessons add about.html and an images/ folder beside this file. Keeping paths predictable saves debugging time.
Open the page in two browsers if you can. The default styles differ slightly, but your heading, paragraph, and tab title should appear in both. That confirms you wrote HTML, not browser-specific markup.
You are done when you have a valid page shell that opens locally and has a useful browser-tab title.
Lesson completed