MARJ
SIGN IN
VIL1checked 1d ago
VI · Technical FoundationsTC-0913 MIN

Your First Page With HTML and CSS

→ A styled web page you built by hand — real HTML and CSS in one file, opened in a browser

⚠️ Version note: HTML and CSS themselves are stable; only editor menus drift. If a step's UI differs, the "If it moved" notes cover it. Last checked: 25 July 2026.

Every web page is just two things: structure and style

The web can feel like a wall of frameworks and jargon, but underneath every website you've ever visited are two simple languages doing two separate jobs:

  • HTML says what things are — this is a heading, this is a paragraph, this is a link, this is an image. It's the structure, the skeleton.
  • CSS says how things look — this heading is big and dark red, this text is centred, there's space around that box. It's the style, the skin.

That's the whole foundation. A billion-dollar website and your first page use the same two languages; the difference is quantity, not kind. And the best part: you need nothing but a text file and a browser you already have. No install, no framework, no server (yet — that's TC-10). By the end you'll have made a real web page, by hand, and understood every line of it.

What you'll have at the end

  • HTML structure: the handful of tags that cover most pages
  • CSS styling: selectors and properties to make it look intentional
  • One real page, built and opened in your browser

HTML: structure with tags

HTML marks up content with tags in angle brackets. Most come in pairs — an opening <p> and a closing </p> — wrapping the content they describe. That wrapped unit is an element.

Create a file called index.html, put this in it, and open it in your browser (double-click, or File → Open):

<!DOCTYPE html>
<html>
<head>
  <title>My First Page</title>
</head>
<body>
  <h1>Hello, I'm building a web page</h1>
  <p>This is a paragraph. It's the first thing I made with HTML.</p>
  <h2>Things I like</h2>
  <ul>
    <li>Making things</li>
    <li>Learning how the web works</li>
  </ul>
  <p>Here's a <a href="https://example.com">link to somewhere</a>.</p>
</body>
</html>

The pieces:

  • <!DOCTYPE html> — "this is a modern HTML page." Always first.
  • <html> wraps everything; <head> holds info about the page (the <title> shows in the browser tab); <body> holds what you actually see.
  • <h1>…<h6> — headings, biggest to smallest. <p> — a paragraph. <ul> with <li> items — a bulleted list. <a href="..."> — a link (the href is where it goes). <img src="..."> — an image.

Notice HTML is a tree: <body> contains headings and paragraphs, a <ul> contains <li>s. That nesting is the page structure — and it's the same tree the browser built in TC-02 when it rendered a page.

✅ Check: your page opens in the browser and shows the heading, paragraph, list and link.

CSS: style with selectors and properties

Right now it's black text on white — pure structure, no style. CSS changes that. A CSS rule has two parts: a selector (which elements) and properties (what to change). Add a <style> block inside the <head>:

<style>
  body {
    font-family: sans-serif;
    max-width: 640px;
    margin: 40px auto;      /* centre the page, space at top */
    color: #16203a;
    line-height: 1.6;
  }
  h1 {
    color: #dc3a26;         /* a red heading */
  }
  a {
    color: #dc3a26;
  }
  li {
    margin-bottom: 6px;
  }
</style>

How to read a rule: h1 { color: #dc3a26; } means "for every <h1> element, set the text colour to this red." The selector (h1) picks the elements; each property: value; pair inside the braces changes one thing.

  • Selectors can target a tag (p), or — for more control — a class you add: put class="intro" on an element and target it with .intro { ... }. Classes are how you style some paragraphs and not others.
  • Common properties: color (text colour), font-family, font-size, background, margin (space outside), padding (space inside), text-align. Colours can be names (red) or hex codes (#dc3a26).

Reload the page — it should now look designed rather than default.

✅ Check: the heading is coloured, the page is centred with breathing room, and it looks intentional.

The box model (the one layout idea to hold)

The thing that confuses beginners most is spacing, and it's governed by one model: every element is a box, and around its content sits padding (space inside the box, between content and edge), then the border, then margin (space outside, pushing other boxes away).

   margin        (space outside — pushes neighbours away)
  ┌───────────────────────────┐
  │  border                   │
  │  ┌─────────────────────┐  │
  │  │ padding             │  │
  │  │   ┌───────────────┐ │  │
  │  │   │  content      │ │  │
  │  │   └───────────────┘ │  │
  │  └─────────────────────┘  │
  └───────────────────────────┘

Almost all "why is this too close / too far / not lining up?" comes down to margin and padding on these boxes. Once you see every element as a box with space inside and outside, layout stops being guesswork.

How the browser turns this into a page

This connects back to TC-02: the browser reads your HTML top to bottom, builds the tree of elements, then applies your CSS rules to style each box, then paints it. When a real site loads, the HTML and CSS arrived from a server as an HTTP response — but the browser does the exact same thing with them that it just did with your local file. Your page and a live website are the same kind of object; yours just isn't on a server yet (that's TC-10).

You can see any site's structure: right-click → Inspect (dev tools, TC-02) and you'll see the same tags and CSS rules you just wrote, on a real page.

What this means for you

  • Every web page = HTML (structure: what things are) + CSS (style: how they look). Same two languages, tiny page or huge site.
  • HTML uses tags forming an element tree (<h1>, <p>, <ul>/<li>, <a>, <img>); it's the same tree the browser renders (TC-02).
  • CSS rules = selector { property: value; }; target tags or classes for control.
  • The box model (content ▸ padding ▸ border ▸ margin) governs spacing — most layout confusion is margin/padding.
  • Your file and a live website are the same kind of thing — it just needs a server to go live (TC-10).

Exercise (45 min, verifiable output)

  1. Create index.html and build a real page about something you care about: a title, a couple of headings, paragraphs, a list, a link, and (optionally) an image.
  2. Open it in your browser and confirm the structure shows.
  3. Add a <style> block and style it: a readable font, a centred column with margins, coloured headings/links, spacing on list items. Reload as you go.
  4. Adjust padding and margin on at least one element until the spacing looks right — feel the box model.
  5. Inspect a real website (right-click → Inspect) and find a <p> and a CSS rule — the same things you just wrote.

✅ Finish check: a real index.html you built, with proper HTML structure and a CSS style block, that opens in your browser looking intentional — and you've spotted the same tags/rules on a live site.

Summary card

  • Web page = HTML (structure) + CSS (style) — two jobs, two languages, same for any site.
  • HTML: tags → elements → a tree (<h1>, <p>, <ul>/<li>, <a>, <img>), inside <html><head><body>.
  • CSS: selector { property: value; }; target tags or .classes; set color, font, margin, padding, etc.
  • Box model: content ▸ padding ▸ border ▸ margin — the source of nearly all spacing questions.
  • Your file and a real website are the same object — put it on a server to ship it (TC-10).

Sources

  1. MDN Web Docs — Learn HTML and CSS (reference)
  2. Duckett, J. — HTML and CSS: Design and Build Websites, 2011
  3. Marcotte, E. — Responsive Web Design, 2011

Next lesson: TC-10 — Ship Your Own Site: Domain, Hosting, Deploy (L2) Related: TC-02 How the Internet Works · TC-13 Building a Project End to End · TC-06 Git and GitHub · CR-03 Your Portfolio Path: related — the front end from scratch

Mark it when you've got the output in hand.

← All Technical Foundations lessons