Kurs: HTML und CSS

Was du in 8 Einheiten lernst

1. 1

   Browser, Server und HTTP-Anfragen

   Hier starten

   Erkläre, was zwischen der Eingabe einer URL und der Anzeige einer Seite geschieht, einschließlich Browsern, Servern, HTTP-Anfragen und HTTP-Antworten sowie der Aufgaben von HTML, CSS und JavaScript.

   5 Lernziele

   Was du lernst

   1. 1.Beschreibe, wie eine Webseite auf deinen Bildschirm gelangt
   2. 2.Lies Webadressen und Domainnamen
   3. 3.Lies HTTP-Anfragen, HTTP-Antworten und Statuscodes
   4. 4.Erkläre die Aufgaben von HTML, CSS und JavaScript
   5. 5.Richte deine Werkzeuge ein und untersuche bestehende Webseiten
2. 2

   HTML-Elemente und Attribute

   Strukturiere Webseiten mit HTML-Elementen und Attributen und verwende Überschriften, Absätze, Listen, Links, Bilder und semantische Abschnitte.

   5 Lernziele

   Was du lernst

   1. 1.Schreibe korrekt aufgebaute HTML-Dokumente
   2. 2.Strukturiere Text mit Überschriften, Absätzen und Listen
   3. 3.Verknüpfe Seiten und erstelle eine Navigation
   4. 4.Füge Bilder ein, deren Inhalt für alle verständlich ist
   5. 5.Baue Seiten mit semantischen Elementen auf
3. 3

   Webformulare

   Erstelle Formulare mit beschrifteten Eingabefeldern und Validierungsattributen, stelle Daten in Tabellen dar und binde Audio und Video ein.

   5 Lernziele

   Was du lernst

   1. 1.Erstelle Formulare, die die benötigten Informationen erfassen
   2. 2.Prüfe Eingaben mit der integrierten Validierung
   3. 3.Stelle Daten in barrierefreien Tabellen dar
   4. 4.Füge einer Seite Audio und Video hinzu
   5. 5.Binde Inhalte aus anderen Quellen ein
4. 4

   CSS-Selektoren, Kaskade und Boxmodell

   Gestalte Seiten mit CSS-Selektoren, Kaskade und Boxmodell und steuere Farben, Schriften und Abstände.

   6 Lernziele

   Was du lernst

   1. 1.Schreibe CSS und untersuche, wie der Browser es anwendet
   2. 2.Wähle die Elemente aus, die du gestalten möchtest
   3. 3.Bestimme mithilfe von Kaskade, Spezifität und Vererbung, welcher Stil sich durchsetzt
   4. 4.Gib Farben an und wähle Einheiten
   5. 5.Lege Größen und Abstände von Elementen mit dem Boxmodell fest
   6. 6.Gestalte Text, Listen, Links, Hintergründe und Rahmen
5. 5

   CSS-Layout mit Flexbox und Grid

   Ordne Seiten mit normalem Dokumentfluss, Positionierung, Flexbox und CSS Grid an und wähle das passende Layoutverfahren für ein bestimmtes Layout.

   5 Lernziele

   Was du lernst

   1. 1.Verstehe den Dokumentfluss von Boxen und den Einfluss von display
   2. 2.Positioniere Elemente mit der position-Eigenschaft
   3. 3.Erstelle eindimensionale Layouts mit Flexbox
   4. 4.Erstelle zweidimensionale Layouts mit CSS Grid
   5. 5.Wähle und kombiniere Layoutverfahren für Webseiten aus der Praxis
6. 6

   Responsives Webdesign

   Sorge mit dem Viewport-Meta-Tag, relativen Einheiten, Medienabfragen und responsiven Bildern dafür, dass Webseiten auf Smartphones, Tablets und Desktopcomputern gut funktionieren.

   5 Lernziele

   Was du lernst

   1. 1.Bereite eine Seite auf unterschiedliche Bildschirmgrößen vor
   2. 2.Passe Layouts mit Medienabfragen an
   3. 3.Passe Komponenten an ihren Container an
   4. 4.Stelle Bilder und Medien passend für jede Bildschirmgröße bereit
   5. 5.Teste und verbessere responsive Seiten
7. 7

   Barrierefreie Webseiten

   Erstelle Seiten, die mit Tastatur, Screenreader und vergrößerter Ansicht funktionieren: Verwende semantisches HTML, Textalternativen und ausreichenden Kontrast und setze ARIA nur dort ein, wo es nötig ist.

   6 Lernziele

   Was du lernst

   1. 1.Strukturiere Seiten mit semantischem HTML
   2. 2.Stelle Textalternativen für Nicht-Text-Inhalte bereit
   3. 3.Mache jede Funktion mit der Tastatur bedienbar
   4. 4.Sorge für gut lesbare Texte und gut erkennbare Grafiken
   5. 5.Erstelle barrierefreie Formulare
   6. 6.Setze ARIA sparsam ein und teste deine Seiten
8. 8

   Website veröffentlichen und warten

   Organisiere die Dateien einer Website, prüfe Seiten mit Validatoren, behebe Fehler und veröffentliche die Website per statischem Hosting mit eigener Domain und HTTPS.

   6 Lernziele

   Was du lernst

   1. 1.Organisiere ein Website-Projekt und prüfe seinen Code
   2. 2.Finde und behebe Probleme mit den Entwicklerwerkzeugen des Browsers
   3. 3.Sorge dafür, dass Seiten schnell laden
   4. 4.Schreibe suchmaschinenfreundlichen HTML-Quelltext
   5. 5.Veröffentliche eine Website mit statischem Hosting
   6. 6.Nutze deine eigene Domain mit HTTPS und halte die Website in Betrieb