HTML & CSS Primer

The Big Idea

Every website you've ever visited is built with HTML and CSS. HTML gives a page its structure — the headings, paragraphs, images, and links. CSS gives it its appearance — the colours, fonts, and layout. By the end of this primer, you'll be able to read and write basic HTML and CSS, and you'll understand what you're looking at when you open your blog files.

As you work through this primer, try the examples live in CodePen — a free tool that runs in your browser. Paste HTML in the HTML panel and CSS in the CSS panel and see the result instantly. No setup needed.

Your Roadmap

Section	Time	Required?
What is HTML?	10 min	⚑ Required
Watch	10 min	⚑ Required
What is CSS?	10 min	⚑ Required
Check your understanding with a chatbot	15 min	⚑ Required
Reflect	15 min	⚑ Required
Go further	Open	◎ Optional

What is HTML?

HTML stands for HyperText Markup Language. It is the language used to structure content on the web.

HTML does not control how things look — that's CSS's job. HTML describes what things are: a heading, a paragraph, an image, a link.

What you will be able to do by the end of this section:

Describe what HTML is and what it does
Read a basic HTML file and understand its structure
Identify the most common HTML tags

Tags and elements

HTML is made up of tags. Tags tell the browser what kind of content follows.

Most tags come in pairs — an opening tag and a closing tag:

<p>This is a paragraph.</p>

<p> is the opening tag
</p> is the closing tag (note the /)
Everything between them is the content
The whole thing together is called an element

Some tags don't need a closing tag because they don't wrap content:

<img src="photo.jpg" alt="A photo" /> <br />

A basic HTML page

Every HTML file follows the same skeleton:

<!DOCTYPE html>
<html>
  <head>
    <title>My Page</title>
  </head>
  <body>
    <h1>Kia ora!</h1>
    <p>This is my first web page.</p>
  </body>
</html>

Part	What it does
`<!DOCTYPE html>`	Tells the browser this is an HTML document
`<html>`	Wraps the entire page
`<head>`	Contains information about the page (not visible on screen)
`<title>`	Sets the text shown in the browser tab
`<body>`	Contains everything visible on screen

Note: Indentation is not required by the browser, but it makes your code much easier to read. Indent nested elements with two spaces.

Watch

HTML & CSS Primer (10 min)

Try it: Paste the skeleton from above into the HTML panel in CodePen and see it render in the preview.

Common tags

These are the tags you'll use most often when building your blog:

Headings — six levels, h1 being the largest:

<h1>Main heading</h1>
<h2>Subheading</h2>
<h3>Smaller subheading</h3>

Paragraphs:

<p>This is a paragraph of text.</p>

Links:

<a href="https://devacademy.co.nz">Dev Academy</a>

The href attribute tells the browser where the link goes. The text between the tags is what the user clicks.

Images:

<img src="images/photo.jpg" alt="A description of the photo" />

Always include an alt attribute — it describes the image for screen readers and displays if the image fails to load.

Lists:

<!-- Unordered (bullet) list -->
<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

<!-- Ordered (numbered) list -->
<ol>
  <li>Fork the repo</li>
  <li>Clone it</li>
  <li>Open in VS Code</li>
</ol>

Divs and spans — generic containers with no visual meaning of their own:

<!-- div is a block-level container (takes up the full width) -->
<div>
  <p>This paragraph is inside a div.</p>
</div>

<!-- span is an inline container (sits within a line of text) -->
<p>My name is <span>Aroha</span>.</p>

You'll use divs to group sections of your page. You'll use spans to target a specific word or phrase with CSS.

Try it: Add a few of these tags into your CodePen HTML panel — headings, a paragraph, a link, a list. Change the text and see what happens.

Classes and ids

HTML elements can be given a class or an id to make them easier to target with CSS.

<p class="intro">This paragraph has a class of "intro".</p>
<p id="main-title">This paragraph has an id of "main-title".</p>

	Class	Id
Syntax	`class="name"`	`id="name"`
How many per page	As many as you like	Each id must be unique
Use for	Styling groups of elements	Targeting one specific element

How to know you've nailed it (HTML)

	Level	You can...
🪨	Intro Climb	Write a valid HTML skeleton from memory and identify `head` vs `body`	⚑ Required
🧗	Core Ascent	Use headings, paragraphs, links, images, lists, divs, and add a class or id	⚑ Required
🏔️	Summit	Explain to someone else what each tag does and why you'd use it	◎ Optional

What is CSS?

CSS stands for Cascading Style Sheets. It controls how HTML elements look — their colour, size, font, spacing, and position.

Without CSS, every web page would look like a plain text document. CSS is what makes the web visual.

What you will be able to do by the end of this section:

Link a CSS file to an HTML file
Write basic CSS rules to change colour, font, and size
Understand the box model

How CSS works

CSS works by selecting an HTML element and then applying properties to it:

p {
  color: steelblue;
  font-size: 18px;
}

p is the selector — it targets all <p> elements
color and font-size are properties
steelblue and 18px are values
Each property-value pair is a declaration, ending with a ;
The whole block is a rule

Linking CSS to HTML

CSS lives in a separate file. You connect it to your HTML using a <link> tag inside the <head>:

<head>
  <title>My Page</title>
  <link href="styles/main.css" rel="stylesheet" type="text/css" />
</head>

The href is the path from your HTML file to your CSS file.

Selectors

You can target elements in different ways:

/* By tag — targets every <h1> on the page */
h1 {
  color: darkgreen;
}

/* By class — targets every element with class="intro" */
.intro {
  font-size: 20px;
}

/* By id — targets the one element with id="main-title" */
#main-title {
  font-weight: bold;
}

Note: classes use a . prefix, ids use a # prefix.

Try it: Add a class to one of your HTML elements in CodePen, then target it in the CSS panel — change its colour or font size.

Common properties

Text and colour:

p {
  color: #333333; /* text colour — hex code */
  font-size: 16px; /* text size */
  font-family: sans-serif; /* font style */
  font-weight: bold; /* bold text */
  text-align: center; /* alignment */
}

Background:

body {
  background-color: #f5f5f5;
}

The box model

Every HTML element is a box. The box has four layers:

┌─────────────────────────────┐
│           margin            │  ← space outside the border
│  ┌───────────────────────┐  │
│  │        border         │  │  ← the border itself
│  │  ┌─────────────────┐  │  │
│  │  │     padding     │  │  │  ← space inside the border
│  │  │  ┌───────────┐  │  │  │
│  │  │  │  content  │  │  │  │  ← your text or image
│  │  │  └───────────┘  │  │  │
│  │  └─────────────────┘  │  │
│  └───────────────────────┘  │
└─────────────────────────────┘

div {
  padding: 16px; /* space inside the border */
  border: 2px solid black; /* border around the element */
  margin: 24px; /* space outside the border */
}

Understanding the box model will save you a lot of confusion when things don't line up the way you expect.

Try it: Add a div with some text in CodePen, then apply padding, border, and margin in the CSS panel. Increase each value and watch how the spacing changes around your content.

How to know you've nailed it (CSS)

	Level	You can...
🪨	Intro Climb	Link a CSS file to an HTML file and change the colour of a heading	⚑ Required
🧗	Core Ascent	Target elements by tag, class, and id — and explain the difference between margin, padding, and border	⚑ Required
🏔️	Summit	Style a full page with consistent colours, fonts, and spacing using classes	◎ Optional

Check your understanding with a chatbot

This is not a one-shot prompt. Have a conversation to test what you have just read and practised.

Step 1 — Set the scene:

"I just learned the basics of HTML and CSS for the first time. I want you to check my understanding by asking me questions — don't explain anything yet, just ask."

Step 2 — Answer in your own words. Don't look anything up. It's fine to say "I'm not sure."

Step 3 — Fill the gaps:

"Based on my answers, what's the one concept I'm most unclear on? Explain just that one thing in plain language with a short code example."

Step 4 — Check your analogy:

"I think the CSS box model works like [your analogy]. Is that accurate? What does my analogy miss?"

Why this works: Retrieving from memory — even imperfectly — builds retention far more effectively than re-reading.

Reflect

Open sprint-1/my-reflections-sprint-1.md in your reflections repo and add your answers under the HTML & CSS Primer heading.

Stage, commit, and push your reflections.

The Big Idea (revisited)

HTML gives a page its structure. CSS gives it its appearance. You now know the core building blocks — tags, elements, selectors, properties, and the box model. Everything else you'll learn about HTML and CSS builds on these foundations.

Go further

◎ Optional — come back to this if you finish early or want to go deeper.

◎ MDN HTML reference — the most reliable HTML documentation on the web
◎ MDN CSS reference — same for CSS
◎ W3Schools HTML — beginner-friendly with a live sandpit to try things out
◎ FreeCodeCamp — Basic HTML and HTML5 — structured exercises if you want more practice
◎ FreeCodeCamp — Basic CSS
◎ FreeCodeCamp — Responsive Web Design

Setup Repo and Create Blog

Set Up Your Blog Structure