# A Beginner's Guide to HTML, CSS and JavaScript

Source material for the CT390 Week 3 exercise.

---

## What makes a webpage

A webpage is three layers stacked in one file. HTML is what things are — a
heading is a heading because it is an `h1`, not because it is big. CSS is what
they look like. JavaScript is what the page does after it has loaded.

| Layer | What it does |
| --- | --- |
| **HTML** | What things are — a heading, a paragraph, a list, a link |
| **CSS** | What they look like — size, colour, spacing, position |
| **JavaScript** | What the page does after it loads — responds to clicks, typing and scrolling, and changes what is on screen |

---

## Structure — HTML

HTML says what things are, not what they look like.

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>HTML/CSS/Javascript Basics</title>
  </head>
  <body>
    <h1>HTML/CSS/Javascript Basics</h1>
    <h2>Background color</h2>
    <p>This box is dark, and still readable.</p>
  </body>
</html>
```

- `<!DOCTYPE html>` tells the browser this is a modern HTML document.
- `<html lang="en">` wraps the whole document and declares its language.
- `<head>` holds information about the page — the title, links to stylesheets
  and scripts. Nothing in it is drawn on the page.
- `<body>` holds everything the visitor actually sees.
- `<h1>`, `<h2>`, `<p>` are the elements themselves: a top-level heading, a
  sub-heading, a paragraph.

---

## Styling — CSS

A rule is a selector and a set of declarations. `.color-box` picks the element;
each line inside says one thing about how it looks.

```html
<section class="color-box">
  <h2>Background color</h2>
</section>

<style>
  .color-box {
    background-color: #1e293b;
    color: #ffffff;
    padding: 24px;
  }
</style>
```

- `.color-box` is the **selector** — it matches every element carrying
  `class="color-box"`.
- Everything between the braces is a **declaration block**. Each declaration is
  a property and a value: `padding: 24px;`.

---

## Tailwind CSS

The rule above is CSS written the traditional way: a selector in a `<style>`
block, pointing at a class in the markup, somewhere else in the file. Tailwind
collapses the two into one.

Each Tailwind class is a single CSS declaration under a short name — `bg-white`
is `background: white`, `p-6` is `padding: 24px`, `rounded-xl` is
`border-radius: 12px`. That is the whole idea: what an element looks like is
readable on the element.

```html
<!-- The traditional way -->
<div class="card">…</div>
<style>
  .card { background: white; padding: 24px; border-radius: 12px; }
</style>

<!-- The same card, in Tailwind -->
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<div class="bg-white p-6 rounded-xl">…</div>
```

The one line from the CDN is the development build; a project installs it
properly through npm later on.

### Why the course uses it

Tailwind is everywhere in the training data, and the class name is the design
decision, so an agent can be told "make the hero taller and the body text
smaller" and change two strings. Ordinary CSS makes it hunt through a stylesheet
for a rule that may be overridden somewhere else. This is the practical reason
the course standardizes on it.

### Default spacing and color scales

Tailwind provides a set of default spacing and color tokens so that you don't
have to come up with these every time. These pages have the details on the
defaults as well as instructions on how to customize them:

- <https://v2.tailwindcss.com/docs/customizing-spacing>
- <https://v2.tailwindcss.com/docs/customizing-colors>

---

## Lucide icons

The same open-source set the class Figma file uses. An agent may sometimes
invent icon names, so confirm visually whenever you add one — the full set is at
<https://lucide.dev/icons/>.

```html
<i data-lucide="book-open"></i>

<script src="https://unpkg.com/lucide@latest"></script>
<script>lucide.createIcons();</script>
```

---

## CSS positioning

Everything on a page sits in a flow: blocks stack top to bottom, in the order
you wrote them. `position` is how an element opts out of that flow.

| Value | What it does |
| --- | --- |
| `static` | The default. Sits where it lands in the flow. |
| `relative` | Keeps its space in the flow, then shifts away from it. |
| `absolute` | Leaves the flow. Pins to its nearest positioned parent. |
| `sticky` | Scrolls with its box, pins at an edge — then leaves when the box ends. |
| `fixed` | Leaves the flow and pins to the window. Never leaves. |

### The three that are easiest to confuse

- **static** — sits where it lands. The box below starts where this one ends.
- **relative** — keeps its space, so the gap it would have occupied stays open,
  then shifts away from it. Nothing else moves.
- **absolute** — leaves the flow. The gap closes, the box below moves up, and
  this one pins to a corner of its nearest positioned parent.

### Sticky and fixed

For most of a page, `sticky` and `fixed` behave identically — both labels just
sit there while everything scrolls past. They stop matching in exactly one
place: the end of the box.

- **sticky — "I belong to this box."** Follows you as far as its box goes, and
  no further.
- **fixed — "I belong to the window."** The window never scrolls away, so
  neither does it.

```html
<!-- traditional CSS -->
<style>
  .label-sticky { position: sticky; top: 16px; }
  .label-fixed  { position: fixed;  top: 16px; right: 16px; }
</style>

<!-- the same two, in Tailwind -->
<div class="sticky top-4">I belong to this box</div>
<div class="fixed top-4 right-4">I belong to the window</div>
```

---

## JavaScript

JavaScript is a mechanism by which interactivity and functionality can be added
to websites. A click is also just one event of many.

```html
<button onclick="sayHello()">Say hello</button>
<p id="message"></p>

<script>
  function sayHello() {
    document.getElementById("message").textContent = "Hello!";
  }
</script>
```

- `onclick` is the event: it says *when* to run something.
- `sayHello()` is the function: it says *what* to run.
- `document.getElementById("message")` finds the element on the page, and
  `.textContent` is what is written inside it.

### Events

| Event | Fires when |
| --- | --- |
| `onclick` | someone clicks or taps the element |
| `oninput` | someone types into a field — fires on every keystroke |
| `onsubmit` | a form is sent |
| `onmouseenter` | the pointer moves onto it |
| `onkeydown` | a key goes down — Escape to close, Enter to send |
| `onload` | the page has finished loading |
| `onscroll` | the page or a scrollable box is scrolled — fires the whole way down |

---

## Practice

**Repaint** is an AI-generated game that lets you practice the CSS concepts
above — position, flex, grid, and one line of JavaScript. Every level has a CSS
mode and a Tailwind mode, so you can see the two ways of writing the same rule
next to each other.

Play it at `/games/repaint.html` on the class site.