HTML-, CSS- und JavaScript-Kurs

Lektion 1 • Einrichten Ihrer Entwicklungsumgebung

Installiert und konfiguriert einen Code-Editor, die Browser-Entwicklerwerkzeuge und eine lokale Dateistruktur. Stellt sicher, dass jeder Teilnehmer einen identischen, funktionsfähigen Arbeitsbereich hat.

Lektion 2 • Versionskontrolle mit Git-Grundlagen

Vermittelt die Arbeitsabläufe von Init, Commit und Push, damit die Teilnehmer jedes Projekt vom ersten Tag an nachverfolgen. Etabliert professionelle Gewohnheiten, bevor die Codekomplexität zunimmt.

Lektion 3 • Wie das Web funktioniert

Behandelt die Client-Server-Kommunikation, HTTP-Anfragen und die Rendering-Pipeline des Browsers. Untermauert alle späteren Programmierentscheidungen mit dem tatsächlichen Browserverhalten.

Lektion 1 • Listen, Links und Navigation

Erstellt geordnete, ungeordnete und Definitionslisten sowie Ankerelemente mit Attributen. Diese Muster bilden das Rückgrat der Navigationsstruktur jeder Website.

Lektion 2 • Text- und Überschriftenelemente

Behandelt h1–h6, p, strong, em und blockquote für die Inhaltshierarchie. Die korrekte Reihenfolge der Überschriften wirkt sich direkt auf die Suchmaschinenoptimierung und die Screenreader-Navigation aus.

Lektion 3 • Bilder, Medien und Figuren

Bettet Bilder, Audio und Video mit korrekten Attributen für Barrierefreiheit und Leistung ein. Alternativtexte und Bildunterschriften werden als erforderlich, nicht als optional behandelt.

Lektion 4 • Semantische Layoutelemente

Ersetzt generische Divs durch header, main, section, article, aside und footer. Semantische Auszeichnung verbessert die maschinelle Lesbarkeit und die Barrierefreiheitsbewertungen.

Lektion 1 • Das Box-Modell erklärt

Vermittelt Inhalt, Innenabstand, Rahmen und Außenabstand als die vier Schichten jedes Elements. Die Beherrschung von box-sizing verhindert Layoutfehler während des gesamten Kurses.

Lektion 2 • CSS-Variablen und Custom Properties

Definiert und verwendet Design-Tokens über CSS-Custom-Properties für wartbare Stylesheets. Variablen reduzieren Wiederholungen und ermöglichen späteres Umschalten von Themen in Projekten.

Lektion 3 • Typografie und Farbe

Legt Schriftfamilien, -größen, -stärken, Zeilenhöhen und Farbwerte mit modernen CSS-Einheiten fest. Konsistente Schrift- und Farbskalen sind die Grundlage visueller Designsysteme.

Lektion 4 • CSS-Selektoren und Spezifität

Behandelt Element-, Klassen-, ID-, Attribut- und Pseudoklassen-Selektoren mit Berechnung der Spezifität. Das Verständnis der Spezifität verhindert Kaskadierungs-Konflikte in größeren Stylesheets.

Lektion 1 • Grid-Platzierung und benannte Bereiche

Platziert Elemente mithilfe von Zeilennummern, dem Schlüsselwort span und benannten Vorlagenbereichen. Benannte Bereiche machen komplexe Layouts lesbar und einfach umstrukturierbar.

Lektion 2 • Flexbox-Container-Eigenschaften

Steuert flex-direction, justify-content, align-items und flex-wrap auf dem Elternelement. Diese Eigenschaften bestimmen, wie Kindelemente entlang beider Achsen verteilt werden.

Lektion 3 • Responsives Design mit Media Queries

Wendet Breakpoints und eine Mobile-First-Strategie an, um Layouts über verschiedene Bildschirmgrößen hinweg anzupassen. Kombiniert Flexbox und Grid mit Media Queries für produktionsreife Responsivität.

Lektion 4 • CSS Grid Grundlagen

Definiert grid-template-columns, grid-template-rows und grid-gap für zweidimensionale Layouts. Grid löst Layoutprobleme, die Flexbox nur umständlich behandelt.

Lektion 1 • Variablen, Datentypen und Operatoren

Deklariert Variablen mit let, const und var und identifiziert primitive Datentypen. Operatorpriorität und Typumwandlung werden behandelt, um häufige Fehler zu vermeiden.

Lektion 2 • Funktionen und Geltungsbereich

Definiert Funktionen mit Deklarationen, Ausdrücken und Pfeilsyntax und erläutert gleichzeitig die Geltungsbereichsketten. Die Beherrschung des Geltungsbereichs verhindert Variablenlecks und Closure-Fehler.

Lektion 3 • Objekte und Objektmethoden

Konstruiert Objekte mit Eigenschaften und Methoden und greift über Punkt- und Klammerschreibweise darauf zu. Objekte modellieren reale Datenstrukturen, die in jeder JS-Anwendung verwendet werden.

Lektion 4 • Arrays und Array-Methoden

Erstellt und manipuliert Arrays mit push, pop, map, filter und reduce. Funktionale Array-Methoden werden in der gesamten DOM-Manipulation und API-Arbeit verwendet.

Lektion 1 • Ändern von Elementen und Stilen

Ändert textContent, innerHTML, Attribute und classList, um die Seite ohne Neuladen zu aktualisieren. Diese Techniken ermöglichen Live-UI-Aktualisierungen in Single-Page-Anwendungen.

Lektion 2 • Erstellen und Entfernen von DOM-Knoten

Erstellt neue Elemente mit createElement, hängt sie an und entfernt veraltete Knoten. Dynamische Knotenerstellung ermöglicht das Rendern von Listen und komponentenartige Muster.

Lektion 3 • Ereignisdelegation und Bubbling

Nutzt Event-Bubbling, um einzelne Listener an übergeordnete Container für dynamische Kinder anzuhängen. Delegation reduziert die Speichernutzung und verarbeitet zur Laufzeit generierte Elemente.

Lektion 4 • Auswählen und Durchlaufen des DOM

Verwendet querySelector, getElementById und Durchlaufeigenschaften, um Elemente präzise anzusprechen. Eine genaue Auswahl ist die Grundlage für jedes dynamische Seitenverhalten.

Lektion 1 • Async/Await-Syntax

Schreibt Promise-Ketten mit async-Funktionen und await-Ausdrücken um, um lesbaren Code zu erhalten. Async/await ist der moderne Standard für alle Fetch-basierten Arbeitsabläufe.

Lektion 2 • Promises und Promise-Verkettung

Erstellt und konsumiert Promises mit .then(), .catch() und .finally() für saubereren asynchronen Code. Promise-Verkettung ersetzt verschachtelte Callbacks bei sequentiellen asynchronen Operationen.

Lektion 3 • Rendern von API-Daten im DOM

Bildet abgerufene JSON-Arrays auf HTML-Elemente ab und behandelt Lade- und Fehlerzustände visuell. Verbindet den asynchronen Datenabruf mit der DOM-Manipulation aus dem vorherigen Kapitel.

Lektion 4 • Datenabruf mit der Fetch-API

Sendet GET- und POST-Anfragen mit fetch(), parst JSON-Antworten und behandelt Fehler. Fetch ist das browser-eigene Werkzeug für die gesamte REST-API-Kommunikation.

Lektion 1 • Deployment und Code-Review

Stellt das Projekt auf einer statischen Hosting-Plattform bereit und führt ein strukturiertes Peer-Code-Review durch. Deployment und Review simulieren echte professionelle Bereitstellungsstandards.

Lektion 2 • Styling mit CSS und responsivem Layout

Wendet ein Designsystem mit CSS-Variablen, Flexbox und Grid mit vollständiger Responsivität an. Konsequentes visuelles Design demonstriert die Beherrschung der Kapitel 3 und 4.

Lektion 3 • Projektplanung und Architektur

Definiert User Stories, Wireframes und eine Komponentenaufteilung, bevor Code geschrieben wird. Planung verhindert Scope Creep und etabliert einen professionellen Entwicklungsworkflow.

Lektion 4 • JavaScript-Logik und API-Integration

Implementiert Fetch-Aufrufe, DOM-Rendering, Ereignisbehandlung und Zustandsverwaltung in Vanilla JS. Integriert alle JS-Kenntnisse aus den Kapiteln 5, 6 und 7 in eine Codebasis.