Lesson 1 - Your first webpage

Learning goals

Create a minimal website using index.html and styles.css.
Understand the difference between HTML (structure) and CSS (styling).
Know how browsers load and render files and how to fix common mistakes.

HTML vs CSS — structure vs styling

HTML provides the document structure: headings, paragraphs, lists, links and images. It tells the browser what the content is.

CSS controls presentation: colors, spacing, fonts and layout. It tells the browser how the content should look.

When a browser opens a page it downloads the HTML, parses it into a DOM, then requests any linked CSS files and applies them when building the rendered page.

Project setup

Create a folder called my-site with two files:

my-site/
  ├─ index.html
  └─ styles.css

Put this minimal HTML in index.html:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>My first webpage</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Hello world</h1>
  <p>This is my first webpage.</p>
</body>
</html>

And this minimal CSS in styles.css:

body { font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Arial; line-height: 1.6; padding: 20px; color: #111; }
h1 { color: #0b61a4; }
p { max-width: 60ch; }

Open index.html in your browser to view the result. If you serve it with a local server, visit http://localhost:xxxx.

Basic tags

<html> — the root element that contains the whole document.
<head> — metadata, title and links to CSS/scripts (not visible).
<body> — visible content.
<h1> — main heading (one per page for accessibility).
<p> — paragraph of text.
<small> — fine-print or secondary text.
<div> — generic container for grouping elements.

Reading order

HTML is read top-to-bottom. Headings and element order affect how content is presented and how screen readers announce it. Use semantic headings (h1–h6) to create a clear hierarchy.

Common mistakes & fixes

Missing <link>: Ensure the <link rel="stylesheet" href="styles.css"> line is present in <head>.
Wrong file path: If your file is in a folder, the href must be relative to the HTML file (css/styles.css or ../styles.css).
Missing closing tags: Unclosed tags can break the page. Use an editor that highlights matching tags.
Saved as .txt: Save files as .html and .css, not .txt.
Forgetting to reload: Save and refresh the browser after changes; sometimes hard-refresh to clear caching.

Checklist — I can now…

Create index.html and styles.css.
Link CSS using <link> in the <head>.
Use basic tags: h1, p, div.
Open the page in a browser and see my changes.