Die drei Technologien haben klar getrennte Aufgaben:

• HTML: Die Struktur – was auf der Seite ist (Überschriften, Absätze, Bilder)
• CSS: Das Design – wie es aussieht (Farben, Layout, Schriftarten)
• JavaScript: Die Interaktion – was passiert (Klicks, Animationen, Daten laden)

Analogie zum Haus:

• HTML = Mauern, Räume, Türen
• CSS = Farbe, Tapeten, Möbel
• JavaScript = Elektrik, Wasser, Smart-Home

Bilder werden mit dem <img>-Tag eingebunden:

<img src="bild.jpg" alt="Beschreibung" width="300">

Wichtige Attribute:

• src: Pfad oder URL zum Bild
• alt: Alternativtext (Barrierefreiheit!)
• width/height: Größe in Pixeln
• loading="lazy": Lazy Loading

Tipp: Für Platzhalter-Bilder: https://placehold.co/300x200

Flexbox ist ein CSS-Layout-Modul für eindimensionale Anordnungen (Zeile oder Spalte).

Perfekt für:

• Navigation (horizontal)
• Zentrieren von Elementen
• Gleichmäßige Verteilung
• Karten-Layouts

Beispiel:

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

Für 2D-Layouts: CSS Grid verwenden!

event.preventDefault() verhindert das Standardverhalten eines Events.

Typische Anwendungsfälle:

• Formular absenden: Verhindern, dass die Seite neu lädt
• Link-Klick: Navigation verhindern
• Drag & Drop: Standard-Verhalten unterdrücken

Beispiel Formular:

form.addEventListener('submit', (e) => {
  e.preventDefault();
  // Daten per fetch() senden
  console.log('Formular abgefangen');
});

In JavaScript gibt es zwei Vergleichsoperatoren:

• == (locker): Vergleicht Werte nach Typkonvertierung
• === (streng): Vergleicht Wert UND Typ

Beispiele:

1 == '1'    // true  (Typkonvertierung!)
1 === '1'   // false (verschiedene Typen)
0 == false  // true
0 === false // false

Empfehlung: Immer === verwenden! Vermeidet unerwartete Bugs.

CSS einbinden (im <head>):

<link rel="stylesheet" href="styles.css">

JavaScript einbinden (am Ende von <body>):

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

Wichtig:

• CSS im <head> = Kein Flackern
• JS am Ende = DOM ist bereits geladen
• Alternativ: defer-Attribut verwenden

Beide ändern den Inhalt eines Elements, aber unterschiedlich:

• textContent: Setzt reinen Text, HTML wird escaped
• innerHTML: Interpretiert HTML-Tags und rendert sie

Sicherheit:

• textContent: Sicher gegen XSS
• innerHTML: Gefährlich bei Benutzereingaben (XSS!)
• Empfehlung: Bei Nutzereingaben immer textContent

Responsive Design bedeutet, dass sich eine Webseite an verschiedene Bildschirmgrößen anpasst.

Techniken:

• Viewport-Meta: <meta name="viewport" content="width=device-width, initial-scale=1">
• Media Queries: @media (max-width: 768px) { ... }
• Fluide Layouts: Flexbox, Grid
• Relative Einheiten: %, em, rem, vw, vh
• Responsive Images: max-width: 100%, srcset

Mobile First: Zuerst für kleine Bildschirme entwickeln, dann erweitern.

Das hängt vom Projekt ab:

Vanilla JS (kein Framework):

• Kleine Projekte, einfache Seiten
• Lernzwecke (Fundament verstehen)
• Keine Build-Tools nötig
• Maximale Performance

Framework (React, Vue, Svelte):

• Große, komplexe Anwendungen
• Viele interaktive Komponenten
• Team-Zusammenarbeit
• State-Management nötig

Empfehlung für Anfänger: Erst Vanilla JS lernen, dann Framework!

Verschiedene Methoden für Cross-Browser-Testing:

• Browser DevTools: F12 in Chrome, Firefox, Safari, Edge
• Responsive Mode: Gerätesimulation in DevTools
• Can I Use: caniuse.com für Feature-Support
• BrowserStack: Echte Geräte in der Cloud
• LambdaTest: Ähnlich wie BrowserStack
• VirtualBox/VM: Verschiedene OS testen
• Lint-Tools: ESLint, Stylelint