Modul 13 von 16 · 📖 5 min Lesezeit · ⏱ 30 min gesamt

FI-AE 13 Frontend-Grundlagen — HTML, CSS, JavaScript

Inhaltsverzeichnis (5 Abschnitte)
  1. Konzepte und Hintergrund
  2. Praktische Schritte
  3. Häufige Fallstricke
  4. Weiterführende Ressourcen
  5. Wissens-Check

FI-AE 13 Frontend-Grundlagen — HTML, CSS, JavaScript

In diesem Modul erlernen Sie die Grundlagen der modernen Webentwicklung. Sie verstehen, wie semantisches HTML die Struktur einer Webseite bildet, wie CSS mit Flexbox und Grid ansprechende Layouts erstellt und wie JavaScript die Interaktivität ermöglicht. Sie beherrschen die DOM-Manipulation, verstehen den Event Loop und können Promises für asynchrone Operationen einsetzen.

Konzepte und Hintergrund

Semantisches HTML
Verwendung von HTML-Tags gemäß ihrer Bedeutung und nicht nur ihrem Aussehen, um die Barrierefreiheit und SEO zu verbessern.
CSS Flexbox
Eindimensionales Layout-Modell, das es ermöglicht, Elemente flexibel in einer Zeile oder Spalte anzuordnen und dynamisch anzupassen.
CSS Grid
Zweidimensionales Layout-Modell, das komplexe Webseitenlayouts mit Zeilen und Spalten ermöglicht und präzise Kontrolle über die Positionierung bietet.
DOM-Manipulation
Das dynamische Ändern des Document Object Model (DOM) mit JavaScript, um die Inhalte, Struktur oder Stile einer Webseite zur Laufzeit zu verändern.
Event Loop
Die zentrale Ausführungsmechanismen in JavaScript, die asynchrone Operationen durch Callback-Funktionen, Promises und async/await ermöglicht.

Praktische Schritte

  1. Erstellen Sie eine grundlegende HTML-Struktur mit semantischen Tags wie header, main, section und footer. Dies verbessert die Barrierefreiheit und SEO.
  2. Definieren Sie CSS-Regeln für ein Flexbox-Layout, um Navigationslemente horizontal zu zentrieren und gleichmäßig zu verteilen.
  3. Implementieren Sie ein CSS-Grid-Layout für eine responsive Bildergalerie, die sich automatisch an verschiedene Bildschirmbreiten anpasst.
  4. Wählen Sie ein DOM-Element aus und ändern Sie seinen Inhalt mit JavaScript document.getElementById().textContent = 'Neuer Text'.
  5. Fügen Sie einen Event Listener hinzu, um auf Benutzerklicks zu reagieren: element.addEventListener('click', function() { alert('Klick erkannt'); });
  6. Implementieren Sie eine asynchrone Funktion mit Promises, um Daten von einer API abzurufen: fetch('https://api.example.com/data').then(response => response.json()).then(data => console.log(data));
  7. Verwenden Sie async/await für eine sauberere asynchrone Programmierung: const data = await fetch('https://api.example.com/data').then(response => response.json());
  8. Validieren Sie Formulareingaben mit JavaScript, bevor sie gesendet werden, um die Benutzerfreundlichkeit zu verbessern.

Häufige Fallstricke

Weiterführende Ressourcen

Wissens-Check

Vier Fragen zur Selbstkontrolle. Klicken Sie jede Frage an, um die richtige Antwort und Erklärung zu sehen.

Welches der folgenden HTML-Tags ist semantisch korrekt, um eine Navigationselemente in einem Webdokument zu gruppieren?
  • A) <div>
  • B) <nav>
  • C) <menu>
  • D) <navbar>

Richtige Antwort: B. Das <nav>-Tag ist speziell für Navigationselemente vorgesehen, während <div> generisch ist, <menu> veraltet ist und <navbar> kein gültiges HTML-Tag ist.

Welche CSS-Eigenschaft muss in einem Flexbox-Container gesetzt werden, um Elemente vertikal auszurichten?
  • A) align-items
  • B) justify-content
  • C) flex-direction
  • D) flex-wrap

Richtige Antwort: A. align-controls die vertikale Ausrichtung von Flex-Items, während justify-content die horizontale Ausrichtung steuert, flex-direction die Ausrichtung der Achsen bestimmt und flex-wrap den Umbruch von Elementen regelt.

Was ist der Hauptzweck des DOM-Manipulation in JavaScript?
  • A) Datenbankverbindungen herstellen
  • B) Die Struktur und Inhalte einer Webseite dynamisch ändern
  • C)</strong) CSS-Stile vordefinieren</li>
  • D)</strong) Serverseitige Operationen durchführen</li>

Richtige Antwort: B. DOM-Manipulation ermöglicht die dynamische Änderung von Inhalten und Struktur einer Webseite, während die anderen Optionen andere Aufgabenbereiche abdecken.

Wie wird eine asynchrone Funktion mit Promises korrekt abgeschlossen, wenn ein Fehler auftritt?
  • A) .catch()
  • B) .then()
  • C) .finally()
  • D) .error()

Richtige Antwort: A. .catch() wird verwendet, um Fehler in einer Promise-Kette zu behandeln, während .then() für erfolgreiche Auflösungen dient, .finally() immer ausgeführt wird und .error() keine gültige Methode ist.