Roadmap: HTML, CSS und JavaScript

Die Roadmap hilft dir, die Kapitel in einer sinnvollen Reihenfolge zu lernen.

Grundlagen HTML und CSS

Was brauche ich um Anzufangen?

Interne Stylesheets

Die Grundstruktur eines HTML Dokuments

Inline Stylesheets

Externe Stylesheets

Grundliegende Syntax

Struktur und Inhalt

CSS Grundlagen

Einheiten (px, em, rem, %)

Tabellen stylen

Element-, Klassen- und ID-Selektoren

Text Formatirung

Attributselektoren

Interaktions- Pseudoklassen (:hover, :fokus, etc.)

Selektoren in Detail

Absolute und Relative Dateipfade

Links und Navigation

Struktur-Pseudoklassen (:first-child, :last-child, :nth-child(n), etc.)

Pseudo-Elemente (::before, ::after)

Komninatoren (>,+,~)

Schriftarten und - großen

Bilder einfügen

Textausrichtung

Audio einfügen

Text und Schriftgestaltung

Bilder und Medien

Textdekoration (unterstrichener Text etc.)

Video einfügen

Einbettungen <iframe>

Zeilenhöhe, Buchstabenabstand und Wortabstand

Farbdefinitionen (RGB,HEX, HSL)

Hintergrundbilder und Farben

CSS Farben und Hintergründe

Farbverläufe (Gradients)

Tranzperenz (Opacity, rgba, hsla

Hintergrundgrößen und Positionieren

Unterschied zwischen Block- und Inline- Elementen

Block und Inline Elemente

Das <div>-Element (Block-Container)

Das <span>- Element (Inline-container)

Inhalt, Padding, Border und Margin

Box Modell

Display-Typen (block, inline-block, none

Positionierung (static, relative, absolute,fixed, sticky)

Layout und Positionierung

Float und clear

Eigenschaften des Containers

JavaScipt start

Flex Box

Einfürung in Javascript

Was ist JavaScript?

Eigenschaften der Flex Items

Externe JavaSkript Datei

Javascript einbinden

JavaSkript direkt in HTML Dokument

Inline-JavaScript in HTML Element

Einführung in Grid Sytem

Grid Areas und Vorlagen

Container- und Item- Eigeschaften

Javascript im Browser

CSS Grid

Responsive Design mit Grid

DOM-Manipulation

Grid Layouts in der Webentwicklung

Best Practices für die Anwendung von Grid

Variablen und Konstanten

Horizontale Menüs

CSS Menüs

Grundlagen Javascript

Verticale Menüs

Schleifen (if, else, switch)

Scope und Hoisting

Responsive

Relative Einheiten

Mobile first Prizip

(Responsive) Navigation

Interaktive Webseite

Tabs und Accordion

Grundaufbau Formulare

Warum Samnitik wichtig ist

Formular Attribute

Samantisches HTML

HTML und JavaScript Formulare

Semantische Elemente (<header>,<main>, <footer>)

Formular Elemente

Formulare mit JavaScript

Formular-Events

JavaScript Funktionen Arrays und Objekte

Arrays und Array Funktionen

Daten Strukturieren

Json (JavaScript Object Notation

LocalStorage

Grundlagen von Events

Das Event-Objekt

Tastatur-Events

Fenster und Dokument- Events

Drag and Drop-Events

Events

CSS-Klassen mit Events verändern

Events auf mehreren Elementen

Event Bubbling und Event Delegation

Event Listener verwalten

Dynamische Elemente und Events

Was sind dynamische Elemente?

Neue Elemente erstellen

Elemente in das DOM einfügen

Elemente aud DOM entfernen

Elemente aus DOM ersetzen

Dynamische Elemente

Inhalte dynamisch ändern

CSS Klassen dynamisch verwalten

Auttribute dynamisch ändern

CSS-Eigenschaften per JavaScript ändern

Dynamische Banutzeroberflächen

Asynchronität (Einführung)

Asynchronität und Apis

Kleine Projekte