HTMLCSSJavaScriptIndexRoadmap

Lernpfad

125 Kapitel

Alle Kapitel in Lernreihenfolge · HTML → CSS → JavaScript

01

HTML

31

Struktur, Inhalt, Medien

Einführung in HTML3

  1. 01HTML Start
  2. 02Was ist HTML?
  3. 03Was brauche ich um anzufangen?

Aufbau eines HTML Dokuments2

  1. 04Die Grundstruktur eines HTML Dokuments
  2. 05Meta-Tags und Zeichencodierung

HTML Elemente und Attribute2

  1. 06HTML-Elemente
  2. 07HTML-Attribute

Textstrukturierung4

  1. 08Überschriften (<h1>-<h6>)
  2. 09Absätze (<p>)
  3. 10Textformatierung
  4. 11Kommentare

Block- und Inline Container Elemente3

  1. 12Unterschied Block- und Inline-Elementen
  2. 13Das <div>-Element (Block-Container)
  3. 14Das <span>-Element (Inline-Container)

Listen und Tabellen3

  1. 15Listen
  2. 16Tabellen
  3. 17Tabellen Stylen

Links und Navigation3

  1. 18Hyperlinks (<a>)
  2. 19Absolute und Relative Dateipfade
  3. 20Ankerlinks

Bilder und Medien4

  1. 21Bilder einfügen <img>
  2. 22Audio einfügen <audio>
  3. 23Video einfügen <video>
  4. 24Einbettungen <iframe>

Semantisches HTML3

  1. 25Warum Semantik wichtig ist
  2. 26Semantische Elemente (<header>, <main>, <footer>)
  3. 27SEO-Grundlagen

HTML Formulare4

  1. 28Grundaufbau Formulare
  2. 29Formular Attribute
  3. 30Formular Elemente
  4. 31Input Typen
02

CSS

44

Gestaltung, Layout, Responsive

Einführung in CSS2

  1. 01CSS Start
  2. 02Was ist CSS?

Einbindung von CSS3

  1. 03Interne Stylesheets
  2. 04Inline Styles
  3. 05Externe Stylesheets

Grundlagen3

  1. 06Grundliegende Syntax (eigenschaften und Werte)
  2. 07CSS Kommentare
  3. 08Einheiten (px, em, rem, %)

Selektoren im Detail6

  1. 09Element-, Klassen- und ID-Selektoren
  2. 10Attributselektoren
  3. 11Interaktions-Pseudoklassen
  4. 12Struktur-Pseudoklassen (:first-child, :last-child, :nth-child(n), etc.)
  5. 13Pseudo-Elemente (::before, ::after)
  6. 14Kombinatoren (>, +, ~)

Farben und Hintergründe5

  1. 15Farbdefinitionen (RGB, HEX, HSL)
  2. 16Hintergrundbilder und -farben
  3. 17Farbverläufe (Gradients)
  4. 18Transparenz (opacity, rgba, hsla, ...)
  5. 19Hintergrundgrößen und -positionen

Text und Schriftgestaltung4

  1. 20Schriftarten und -größen
  2. 21Textausrichtung
  3. 22Textdekoration (unterstrichener Text etc.)
  4. 23Zeilenhöhe, Buchstabenabstand und Wortabstand

Box-Modell2

  1. 24Inhalt, Padding, Border und Margin
  2. 25Box-Sizing

Layout und Positionierung4

  1. 26Display-Typen (block, inline, inline-block, none)
  2. 27Positionierung (static, relative, absolute, fixed, sticky)
  3. 28Float und Clear
  4. 29z-index

Flexbox4

  1. 30Flexbox Grundlagen
  2. 31Eigenschaften des Flexbox Containers
  3. 32Eigenschaften der Flex-Items
  4. 33Flexbox Responsive

CSS Grid6

  1. 34Einführung Grid Layout
  2. 35Grid Layout Container
  3. 36Gaps im Grid
  4. 37Grid Items platzieren
  5. 38Grid Areas
  6. 39CSS Grid Funktionen

CSS Menüs2

  1. 40Horizontale Menüs
  2. 41Vertikale Menüs

Responsive Design3

  1. 42Media Queries in CSS
  2. 43Relative Einheiten
  3. 44Mobile first Prinzip
03

JavaScript

50

Logik, DOM, Interaktion

Einführung in JavaScript2

  1. 01JavaScript Start
  2. 02Was ist JavaScript?

JavaScript Einbinden3

  1. 03Externe JavaScript-Datei
  2. 04JavaScript direkt im HTML-Dokument
  3. 05Inline-JavaScript im HTML-Element

JavaScript im Browser4

  1. 06Output
  2. 07Die Konsole im Browser
  3. 08DOM-Grundlagen
  4. 09DOM Manipulation

Grundlagen der Sprache10

  1. 10Variablen und Konstanten
  2. 11Datentypen
  3. 12Operatoren
  4. 13Strings
  5. 14Arrays und Array-Funktionen
  6. 15Objekte
  7. 16Bedingungen (if/else, switch)
  8. 17Schleifen
  9. 18Funktionen
  10. 19Scope und Hoisting

Events11

  1. 20Grundlagen von Events
  2. 21Das Event-Objekt
  3. 22Maus-Events
  4. 23Tastatur-Events
  5. 24Formular-Events
  6. 25Fenster und Dokument-Events
  7. 26Drag-and-Drop-Events
  8. 27CSS-Klassen mit Events verändern
  9. 28Events auf mehreren Elementen
  10. 29Event Bubbling und Event Delegation
  11. 30Event Listener verwalten

Elemente im DOM verwalten5

  1. 31Was sind Dynamische Elemente?
  2. 32Neue Elemente in DOM erstellen
  3. 33Elemente in das DOM einfügen
  4. 34Elemente aus DOM entfernen
  5. 35Elemente im DOM ersetzen

Elemente dynamisch verändern4

  1. 36Inhalte Dynamisch ändern
  2. 37CSS- Klassen dynamisch verwalten
  3. 38Attribute dynamisch ändern
  4. 39CSS-Eigenschaften per JavaScript ändern

Dynamische Benutzeroberflächen1

  1. 40Dynamische Benutzeroberflächen

Formulare mit JavaScript1

  1. 41Formulare mit JavaScript

Daten strukturieren1

  1. 42JSON (Java Script Object Notation)

LocalStorage1

  1. 43LocalStorage

Interaktive Webseiten3

  1. 44(Responsive) Navigation
  2. 45Tabs und Accordion
  3. 46Theme Toggle (Dark Mode)

Asynchronität und APIs4

  1. 47Asynchronität (Einführung)
  2. 48Promises
  3. 49async await
  4. 50fetch und APIs

Reihenfolge entspricht dem Kurs · jede Spalte von oben nach unten lesen