← Projects/Tutorials/Cheatsheet
Spickzettel · zu allen Tutorials

Cheatsheet

Alle Befehle aus meinen Tutorials auf einen Blick: was er tut, ein kurzes Beispiel und der Weg zurück ins Kapitel. Zum Drucken erscheinen alle Teile untereinander.

Für alleDeutsch und EnglischNeu

HTML30 Befehle

Grundgerüst

<!DOCTYPE html>
Ansage: Das ist eine HTML-Seite. Steht ganz oben.Deine erste Webseite, Kapitel 3 · Glossar
<html lang="de">
Umschliesst die ganze Seite, mit Sprache.HTML 101, Kapitel 3
<head> … </head>
Unsichtbarer Kopf für den Browser.HTML 101, Kapitel 3
<meta charset="UTF-8">
Umlaute und Sonderzeichen richtig anzeigen.Deine erste Webseite, Kapitel 3
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Handy nimmt seine echte Breite.Deine erste Webseite, Kapitel 8 · Glossar
<title> … </title>
Titel im Browser-Tab.HTML 101, Kapitel 3
<body> … </body>
Die Bühne: alles, was man sieht.HTML 101, Kapitel 3
<!-- Notiz -->
Kommentar, wird nicht angezeigt.HTML 101, Kapitel 3 · Glossar

Text

<h1> … <h6>
Überschriften, h1 nur einmal pro Seite.<h1>Hallo Welt!</h1>HTML 101, Kapitel 4 · Glossar
<p>
Absatz.<p>George ist eine Katze.</p>HTML 101, Kapitel 4 · Glossar
<strong>
Fett, wichtig.HTML 101, Kapitel 4
<em>
Kursiv, betont.HTML 101, Kapitel 4
<br>
Zeilenumbruch, ohne Ende-Tag.HTML 101, Kapitel 4
<hr>
Trennlinie, ohne Ende-Tag.HTML 101, Kapitel 8

Links und Bilder

<a href="seite.html">
Link zu einer eigenen Seite.<a href="spielzeug.html">Spielzeug</a>Deine erste Webseite, Kapitel 5 · Glossar
<a href="https://…">
Link zu einer anderen Webseite.<a href="https://example.org">Beispiel</a>Deine erste Webseite, Kapitel 5
<img src="…" alt="…">
Bild mit Pfad und Beschreibung, ohne Ende-Tag.<img src="bilder/george.jpg" alt="George auf dem Sofa">Deine erste Webseite, Kapitel 4 · Glossar

Listen und Tabellen

<ul> <li>
Liste mit Punkten, Reihenfolge egal.Deine erste Webseite, Kapitel 6 · Glossar
<ol> <li>
Liste mit Nummern, Reihenfolge wichtig.Deine erste Webseite, Kapitel 6 · Glossar
<table> <tr> <th> <td>
Tabelle, Zeile, Kopf-Feld, Feld.Deine erste Webseite, Kapitel 6 · Glossar

Seitenaufbau

<nav>
Menü, auf jeder Seite gleich.<nav><ul><li><a href="index.html">Start</a></li></ul></nav>Deine erste Webseite, Kapitel 7 · Glossar
<footer>
Fussbereich ganz unten.HTML 101, Kapitel 8 · Glossar

Formular

<label for="name">
Beschriftung, passt zu id="name".HTML 101, Kapitel 7 · Glossar
<input type="text">
Einzeiliges Textfeld.HTML 101, Kapitel 7 · Glossar
<input type="email">
E-Mail-Feld mit Prüfung.HTML 101, Kapitel 7
<input type="checkbox">
Häkchen zum Ankreuzen.HTML 101, Kapitel 7
<textarea>
Mehrzeiliges Textfeld.HTML 101, Kapitel 7
<select>
Auswahlliste.HTML 101, Kapitel 7
<button type="submit">
Absenden-Knopf.HTML 101, Kapitel 7
required
Pflichtfeld.HTML 101, Kapitel 7 · Glossar

CSS35 Befehle

Einbinden

<link rel="stylesheet" href="css/style.css">
Eigene CSS-Datei für alle Seiten (im head).CSS 101, Kapitel 2 · Glossar
* { margin: 0; padding: 0; box-sizing: border-box; }
Reset: gleicher Start in allen Browsern.CSS 101, Kapitel 2 · Glossar

Selektoren

p { }
Alle Elemente dieses Tags.CSS 101, Kapitel 3 · Glossar
.klasse { }
Alle mit class="klasse".CSS 101, Kapitel 3 · Glossar
#id { }
Das eine Element mit id="id".CSS 101, Kapitel 3 · Glossar
.card p { }
p innerhalb von .card.CSS 101, Kapitel 3
:hover
Wenn die Maus darüber ist.CSS 101, Kapitel 3 · Glossar
::after
Zusatz nach dem Element, braucht content.CSS 101, Kapitel 3 · Glossar

Variablen und Farben

:root { --primary: #00b4d8; }
Variable festlegen.CSS 101, Kapitel 1 · Glossar
color: var(--primary);
Variable verwenden.CSS 101, Kapitel 1
#e03030
Farbe als HEX.CSS 101, Kapitel 4 · Glossar
rgba(0, 180, 216, 0.5)
Rot, Grün, Blau, Transparenz.CSS 101, Kapitel 4
hsl(195, 100%, 42%)
Farbton, Sättigung, Helligkeit.CSS 101, Kapitel 4
linear-gradient(135deg, #00b4d8, #f72585)
Verlauf in eine Richtung.CSS 101, Kapitel 4 · Glossar
radial-gradient(…)
Verlauf von der Mitte nach aussen.CSS 101, Kapitel 4

Text

font-family
Schriftart mit Ersatz.font-family: 'DM Sans', sans-serif;CSS 101, Kapitel 5 · Glossar
font-size: 1.2rem;
Schriftgrösse, rem empfohlen.CSS 101, Kapitel 5 · Glossar
font-weight: 700;
Stärke: 300 leicht, 400 normal, 700 fett.CSS 101, Kapitel 5
line-height: 1.6;
Zeilenabstand.CSS 101, Kapitel 5
letter-spacing
Buchstabenabstand.CSS 101, Kapitel 5
text-align: center;
Ausrichtung.CSS 101, Kapitel 5
text-transform: uppercase;
Gross- oder Kleinschreibung.CSS 101, Kapitel 5
text-decoration: none;
Unterstrich weg, zum Beispiel bei Links.CSS 101, Kapitel 5

Box Model

padding: 1rem 1.5rem;
Innenabstand: oben/unten, links/rechts.CSS 101, Kapitel 6 · Glossar
margin: 0 auto;
Aussenabstand, waagrecht zentriert.CSS 101, Kapitel 6
border: 1px solid #333;
Rahmen: Dicke, Art, Farbe.CSS 101, Kapitel 6
border-radius: 12px;
Runde Ecken.CSS 101, Kapitel 6

Layout

display: flex;
Kinder nebeneinander (eine Richtung).CSS 101, Kapitel 7 · Glossar
justify-content: space-between;
Verteilen in der Hauptrichtung.CSS 101, Kapitel 7
align-items: center;
Ausrichten quer dazu.CSS 101, Kapitel 7
gap: 1rem;
Abstand zwischen den Kindern.CSS 101, Kapitel 7
flex-wrap: wrap;
Umbruch erlauben.CSS 101, Kapitel 7
display: grid; grid-template-columns: 1fr 1fr 1fr;
Raster mit drei gleichen Spalten.CSS 101, Kapitel 7 · Glossar

Responsive

@media (min-width: 768px) { … }
Gilt ab 768 Pixel Breite (Tablet).CSS 101, Kapitel 8 · Glossar
@media (min-width: 1024px) { … }
Gilt ab 1024 Pixel (Desktop).CSS 101, Kapitel 8 · Glossar

CSS-Animation20 Befehle

Transition

transition: all 0.3s ease;
Alles weich animieren.CSS Animation 101, Kapitel 1 · Glossar
transition: color .2s, transform .4s;
Mehrere Eigenschaften, je eigene Dauer.CSS Animation 101, Kapitel 1

Keyframes

@keyframes name { from { } to { } }
Einfacher Ablauf von A nach B.CSS Animation 101, Kapitel 2 · Glossar
0% { } 50% { } 100% { }
Mehrere Zwischenpunkte.CSS Animation 101, Kapitel 2
animation: name .6s ease forwards;
Einmal abspielen, Endzustand halten.CSS Animation 101, Kapitel 3
animation: spin 1s linear infinite;
Endlos drehen.CSS Animation 101, Kapitel 3
animation-delay: .2s;
Verzögerung vor dem Start.CSS Animation 101, Kapitel 3 · Glossar
animation-direction: alternate;
Hin und zurück.CSS Animation 101, Kapitel 3
animation-play-state: paused;
Pause.CSS Animation 101, Kapitel 3

Timing

linear
Gleichmässig, mechanisch.CSS Animation 101, Kapitel 4 · Glossar
ease-out
Bremst sanft: Dinge, die ankommen.CSS Animation 101, Kapitel 4
ease-in
Wird schneller: Dinge, die weggehen.CSS Animation 101, Kapitel 4
ease-in-out
Symmetrisch, für Loops und Hover.CSS Animation 101, Kapitel 4
cubic-bezier(x1, y1, x2, y2)
Eigene Kurve.CSS Animation 101, Kapitel 4
steps(n)
Sprünge statt Übergang (Pixel-Art).CSS Animation 101, Kapitel 4

Transform

transform: translateX(50px);
Verschieben.CSS Animation 101, Kapitel 5 · Glossar
transform: rotate(45deg);
Drehen.CSS Animation 101, Kapitel 5
transform: scale(1.5);
Vergrössern auf 150 %.CSS Animation 101, Kapitel 5
transform: skewX(15deg);
Schräg stellen.CSS Animation 101, Kapitel 5
transform: translateY(-10px) rotate(5deg) scale(1.05);
Kombinieren, Reihenfolge zählt.CSS Animation 101, Kapitel 5

JavaScript32 Befehle

Einbinden und testen

<script src="script.js" defer></script>
JavaScript einbinden, vor </body>.JS 101, Kapitel 1 · Glossar
console.log(wert);
In der Konsole anzeigen (F12).JS 101, Kapitel 1 · Glossar

Variablen und Typen

let punkte = 0;
Variable, darf sich ändern.JS 101, Kapitel 2 · Glossar
const name = "Mikey";
Variable, bleibt gleich.JS 101, Kapitel 2
typeof wert
Welcher Datentyp?JS 101, Kapitel 2 · Glossar
`Hallo ${name}!`
Template-String mit eingesetztem Wert.JS 101, Kapitel 5 · Glossar

Rechnen und entscheiden

+ - * / % **
Rechnen, % ist der Rest, ** die Potenz.JS 101, Kapitel 3 · Glossar
=== !==
Gleich oder ungleich (Typ und Wert).JS 101, Kapitel 3 · Glossar
&& || !
Und, oder, nicht.JS 101, Kapitel 3
if (…) { } else { }
Wenn, sonst.JS 101, Kapitel 3 · Glossar

Listen und Schleifen

const liste = ["HTML", "CSS"];
Array erstellen.JS 101, Kapitel 4 · Glossar
liste[0]
Erstes Element (Index 0).JS 101, Kapitel 4 · Glossar
liste.push(x) / liste.pop() / liste.length
Hinten anfügen, letztes entfernen, Anzahl.JS 101, Kapitel 4 · Glossar
for (let i = 0; i < 5; i++) { }
Zählschleife.JS 101, Kapitel 4 · Glossar
liste.forEach(x => { })
Für jedes Element.JS 101, Kapitel 4
liste.map(x => …) / liste.filter(x => …)
Neue Liste umwandeln oder aussieben.JS 101, Kapitel 4

Funktionen

function name(param) { return …; }
Funktion mit Rückgabe.JS 101, Kapitel 5 · Glossar
(param) => …
Arrow-Funktion, kurz.JS 101, Kapitel 5 · Glossar

Seite ändern (DOM)

document.querySelector(".card")
Erstes passendes Element finden.JS 101, Kapitel 6 · Glossar
document.querySelectorAll(".card")
Alle passenden finden.JS 101, Kapitel 6
document.getElementById("id")
Element per ID finden.JS 101, Kapitel 6
el.textContent = "…";
Text ändern.JS 101, Kapitel 6
el.classList.add("aktiv");
Klasse hinzufügen (auch remove, toggle).JS 101, Kapitel 6
document.createElement("li"); el.appendChild(neu);
Neues Element erstellen und einfügen.JS 101, Kapitel 6

Ereignisse

el.addEventListener("click", fn);
Auf einen Klick reagieren.JS 101, Kapitel 7 · Glossar
"click" "input" "submit" "keydown"
Häufige Ereignisse.JS 101, Kapitel 7 · Glossar
e.target / e.preventDefault()
Ausgelöstes Element, Standardverhalten stoppen.JS 101, Kapitel 7 · Glossar

Daten

{ name: "Mikey", punkte: 350 }
Objekt.JS 101, Kapitel 8 · Glossar
JSON.stringify(obj) / JSON.parse(text)
Objekt zu Text und zurück.JS 101, Kapitel 8 · Glossar
const r = await fetch(url); const d = await r.json();
Daten aus dem Internet holen (in async-Funktion).JS 101, Kapitel 9 · Glossar
try { } catch (fehler) { }
Fehler abfangen.JS 101, Kapitel 9 · Glossar
localStorage.setItem("k", "v") / getItem("k") / removeItem("k")
Im Browser speichern, lesen, löschen (nur Text).JS 101, Kapitel 10 · Glossar

Stand November 2026. Erklärungen zu den Fachwörtern stehen im Glossar.