Quick reference · for all tutorials

Cheat sheet

All the commands from my tutorials at a glance: what each does, a short example and the way back to the chapter. When printed, all parts appear one below the other.

For everyoneGerman and EnglishNew

HTML30 commands

Basic structure

<!DOCTYPE html>

Declaration: this is an HTML page. Goes at the very top.Your first website, chapter 3 · Glossary

<html lang="en">

Wraps the whole page, with the language.HTML 101, chapter 3

<head> … </head>

Invisible head for the browser.HTML 101, chapter 3

<meta charset="UTF-8">

Display umlauts and special characters correctly.Your first website, chapter 3

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Phone uses its real width.Your first website, chapter 8 · Glossary

<title> … </title>

Title in the browser tab.HTML 101, chapter 3

<body> … </body>

The stage: everything you see.HTML 101, chapter 3

Comment, not displayed.HTML 101, chapter 3 · Glossary

Text

<h1> … <h6>

Headings, h1 only once per page.<h1>Hello World!</h1>HTML 101, chapter 4 · Glossary

<p>

Paragraph.<p>George is a cat.</p>HTML 101, chapter 4 · Glossary

<strong>

Bold, important.HTML 101, chapter 4

<em>

Italic, emphasised.HTML 101, chapter 4

<br>

Line break, no end tag.HTML 101, chapter 4

<hr>

Dividing line, no end tag.HTML 101, chapter 8

Links and pictures

<a href="page.html">

Link to one of your own pages.<a href="toys.html">Toys</a>Your first website, chapter 5 · Glossary

<a href="https://…">

Link to another website.<a href="https://example.org">Example</a>Your first website, chapter 5

<img src="…" alt="…">

Picture with path and description, no end tag.<img src="images/george.jpg" alt="George on the sofa">Your first website, chapter 4 · Glossary

Lists and tables

<ul> <li>

Bullet list, order does not matter.Your first website, chapter 6 · Glossary

<ol> <li>

Numbered list, order matters.Your first website, chapter 6 · Glossary

<table> <tr> <th> <td>

Table, row, header cell, cell.Your first website, chapter 6 · Glossary

Page layout

<nav>

Menu, the same on every page.<nav><ul><li><a href="index.html">Home</a></li></ul></nav>Your first website, chapter 7 · Glossary

<footer>

Footer at the very bottom.HTML 101, chapter 8 · Glossary

Form

<label for="name">

Caption, matches id="name".HTML 101, chapter 7 · Glossary

<input type="text">

Single-line text field.HTML 101, chapter 7 · Glossary

<input type="email">

Email field with check.HTML 101, chapter 7

<input type="checkbox">

Tick box.HTML 101, chapter 7

<textarea>

Multi-line text field.HTML 101, chapter 7

<select>

Drop-down list.HTML 101, chapter 7

<button type="submit">

Submit button.HTML 101, chapter 7

required

Required field.HTML 101, chapter 7 · Glossary

CSS35 commands

Including

<link rel="stylesheet" href="css/style.css">

Separate CSS file for all pages (in the head).CSS 101, chapter 2 · Glossary

* { margin: 0; padding: 0; box-sizing: border-box; }

Reset: same starting point in all browsers.CSS 101, chapter 2 · Glossary

Selectors

p { }

All elements with this tag.CSS 101, chapter 3 · Glossary

.class-name { }

All with class="klasse".CSS 101, chapter 3 · Glossary

#id { }

The one element with id="id".CSS 101, chapter 3 · Glossary

.card p { }

p inside .card.CSS 101, chapter 3

:hover

When the mouse is over it.CSS 101, chapter 3 · Glossary

::after

Extra after the element, needs content.CSS 101, chapter 3 · Glossary

Variables and colours

:root { --primary: #00b4d8; }

Define a variable.CSS 101, chapter 1 · Glossary

color: var(--primary);

Use a variable.CSS 101, chapter 1

#e03030

Colour as HEX.CSS 101, chapter 4 · Glossary

rgba(0, 180, 216, 0.5)

Red, green, blue, transparency.CSS 101, chapter 4

hsl(195, 100%, 42%)

Hue, saturation, lightness.CSS 101, chapter 4

linear-gradient(135deg, #00b4d8, #f72585)

Gradient in one direction.CSS 101, chapter 4 · Glossary

radial-gradient(…)

Gradient from the centre outwards.CSS 101, chapter 4

Text

font-family

Typeface with fallback.font-family: 'DM Sans', sans-serif;CSS 101, chapter 5 · Glossary

font-size: 1.2rem;

Font size, rem recommended.CSS 101, chapter 5 · Glossary

font-weight: 700;

Weight: 300 light, 400 normal, 700 bold.CSS 101, chapter 5

line-height: 1.6;

Line spacing.CSS 101, chapter 5

letter-spacing

Letter spacing.CSS 101, chapter 5

text-align: center;

Alignment.CSS 101, chapter 5

text-transform: uppercase;

Upper or lower case.CSS 101, chapter 5

text-decoration: none;

Remove underline, for example on links.CSS 101, chapter 5

Box model

padding: 1rem 1.5rem;

Padding: top/bottom, left/right.CSS 101, chapter 6 · Glossary

margin: 0 auto;

Margin, centred horizontally.CSS 101, chapter 6

border: 1px solid #333;

Border: width, style, colour.CSS 101, chapter 6

border-radius: 12px;

Rounded corners.CSS 101, chapter 6

Layout

display: flex;

Children side by side (one direction).CSS 101, chapter 7 · Glossary

justify-content: space-between;

Spread along the main direction.CSS 101, chapter 7

align-items: center;

Align across it.CSS 101, chapter 7

gap: 1rem;

Space between the children.CSS 101, chapter 7

flex-wrap: wrap;

Allow wrapping.CSS 101, chapter 7

display: grid; grid-template-columns: 1fr 1fr 1fr;

Grid with three equal columns.CSS 101, chapter 7 · Glossary

Responsive

@media (min-width: 768px) { … }

Applies from 768 pixels wide (tablet).CSS 101, chapter 8 · Glossary

@media (min-width: 1024px) { … }

Applies from 1024 pixels (desktop).CSS 101, chapter 8 · Glossary

CSS animation20 commands

Transition

transition: all 0.3s ease;

Animate everything smoothly.CSS Animation 101, chapter 1 · Glossary

transition: color .2s, transform .4s;

Several properties, each with its own duration.CSS Animation 101, chapter 1

Keyframes

@keyframes name { from { } to { } }

Simple sequence from A to B.CSS Animation 101, chapter 2 · Glossary

0% { } 50% { } 100% { }

Several in-between points.CSS Animation 101, chapter 2

animation: name .6s ease forwards;

Play once, keep the end state.CSS Animation 101, chapter 3

animation: spin 1s linear infinite;

Spin endlessly.CSS Animation 101, chapter 3

animation-delay: .2s;

Delay before starting.CSS Animation 101, chapter 3 · Glossary

animation-direction: alternate;

Back and forth.CSS Animation 101, chapter 3

animation-play-state: paused;

Pause.CSS Animation 101, chapter 3

Timing

linear

Steady, mechanical.CSS Animation 101, chapter 4 · Glossary

ease-out

Brakes gently: things arriving.CSS Animation 101, chapter 4

ease-in

Speeds up: things leaving.CSS Animation 101, chapter 4

ease-in-out

Symmetrical, for loops and hover.CSS Animation 101, chapter 4

cubic-bezier(x1, y1, x2, y2)

Your own curve.CSS Animation 101, chapter 4

steps(n)

Jumps instead of a transition (pixel art).CSS Animation 101, chapter 4

Transform

transform: translateX(50px);

Move.CSS Animation 101, chapter 5 · Glossary

transform: rotate(45deg);

Rotate.CSS Animation 101, chapter 5

transform: scale(1.5);

Enlarge to 150 %.CSS Animation 101, chapter 5

transform: skewX(15deg);

Skew.CSS Animation 101, chapter 5

transform: translateY(-10px) rotate(5deg) scale(1.05);

Combine; order matters.CSS Animation 101, chapter 5

JavaScript32 commands

Including and testing

<script src="script.js" defer></script>

Include JavaScript, before </body>.JS 101, chapter 1 · Glossary

console.log(value);

Show in the console (F12).JS 101, chapter 1 · Glossary

Variables and types

let points = 0;

Variable that may change.JS 101, chapter 2 · Glossary

const name = "Mikey";

Variable that stays the same.JS 101, chapter 2

typeof value

Which data type?JS 101, chapter 2 · Glossary

`Hello ${name}!`

Template string with an inserted value.JS 101, chapter 5 · Glossary

Calculating and deciding

+ - * / % **

Arithmetic; % is the remainder, ** the power.JS 101, chapter 3 · Glossary

=== !==

Equal or not equal (type and value).JS 101, chapter 3 · Glossary

&& || !

And, or, not.JS 101, chapter 3

if (…) { } else { }

If, otherwise.JS 101, chapter 3 · Glossary

Lists and loops

const list = ["HTML", "CSS"];

Create an array.JS 101, chapter 4 · Glossary

list[0]

First element (index 0).JS 101, chapter 4 · Glossary

list.push(x) / list.pop() / list.length

Add at the end, remove the last, count.JS 101, chapter 4 · Glossary

for (let i = 0; i < 5; i++) { }

Counting loop.JS 101, chapter 4 · Glossary

list.forEach(x => { })

For each element.JS 101, chapter 4

list.map(x => …) / list.filter(x => …)

Transform into a new list or filter it.JS 101, chapter 4

Functions

function name(param) { return …; }

Function with a return value.JS 101, chapter 5 · Glossary

(param) => …

Arrow function, short.JS 101, chapter 5 · Glossary

Changing the page (DOM)

document.querySelector(".card")

Find the first matching element.JS 101, chapter 6 · Glossary

document.querySelectorAll(".card")

Find all matching ones.JS 101, chapter 6

document.getElementById("id")

Find an element by ID.JS 101, chapter 6

el.textContent = "…";

Change text.JS 101, chapter 6

el.classList.add("active");

Add a class (also remove, toggle).JS 101, chapter 6

document.createElement("li"); el.appendChild(item);

Create a new element and insert it.JS 101, chapter 6

Events

el.addEventListener("click", fn);

React to a click.JS 101, chapter 7 · Glossary

"click" "input" "submit" "keydown"

Common events.JS 101, chapter 7 · Glossary

e.target / e.preventDefault()

Triggering element, stop default behaviour.JS 101, chapter 7 · Glossary

Data

{ name: "Mikey", points: 350 }

Object.JS 101, chapter 8 · Glossary

JSON.stringify(obj) / JSON.parse(text)

Object to text and back.JS 101, chapter 8 · Glossary

const r = await fetch(url); const d = await r.json();

Get data from the internet (in an async function).JS 101, chapter 9 · Glossary

try { } catch (error) { }

Catch errors.JS 101, chapter 9 · Glossary

localStorage.setItem("k", "v") / getItem("k") / removeItem("k")

Store, read, delete in the browser (text only).JS 101, chapter 10 · Glossary

As of November 2026. Explanations of the technical terms are in the glossary.