Cheat Sheets | HTML · CSS

🧱 HTML Cheat Sheet

Grundstruktur

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8">
    <title>Meine Seite</title>
  </head>
  <body>
    <h1>Überschrift</h1>
    <p>Absatz</p>
  </body>
</html>

Wichtige Tags

<a href=""> → Link
<img src="" alt=""> → Bild
<ul> / <ol> → Listen
<form> → Formulareingaben
<div>, <span> → Container

Semantische Tags

Verwende semantische Elemente für bessere Struktur und SEO:

<header>, <nav>
<main>, <section>, <article>
<aside>, <footer>

🎨 CSS Cheat Sheet

Grundsyntax

selector {
  property: value;
}

Beispiel:

p {
  color: blue;
  font-size: 16px;
}

Box Model

Jedes HTML-Element besteht aus:

Content
Padding
Border
Margin

Wichtige Eigenschaften

color – Textfarbe
background-color – Hintergrundfarbe
margin / padding – Abstände
display – Layout-Typ (block, flex, grid)
position – relative, absolute, fixed, sticky

Flexbox Beispiel

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

⚙️ JavaScript Cheat Sheet

Variablen

let name = "Anna";
const age = 25;
var city = "Berlin";

Funktionen

function greet(name) {
  return "Hallo " + name;
}

const greetArrow = (name) => `Hallo ${name}`;

Arrays & Objekte

const fruits = ["🍎", "🍌", "🍇"];
const person = { name: "Max", age: 30 };

console.log(fruits[0]);
console.log(person.name);

DOM Manipulation

const btn = document.querySelector("button");
btn.addEventListener("click", () => {
  alert("Button clicked!");
});