Einleitung
  • Herzlich Willkommen im Kurs!
  • Ein Hinweis für Teilnehmer
  • Allgemeine Worte zum Kurs
  • Vorstellung des Lehrplans
  • Vorstellung des Praxis-Projekts
Vorbereitung
  • Installation und Einstellungen des Code-Editors (Atom.io)
  • Installation des Browsers (Google Chrome)
Basics: Einführung in HTML
  • Die Grundlagen von HTML I: Elemente
  • Die Grundlagen von HTML II: Attribute
  • Das HTML-Grundgerüst
  • Deine erste Webseite: Das "Hallo Welt!" in HTML
  • Textstrukturierung I: Überschriften, Paragrafen & Zeilenumbrüche
  • Textstrukturierung II: Fett, Kursiv, Unterstrichen & mehr
  • Einführung in HTML
Basics: Einführung in CSS
  • Die Grundlagen von CSS
  • Inline CSS
  • Internal CSS
  • External CSS
  • Einführung in CSS
Basics: CSS-Selektoren
  • Typselektoren und Vererbung
  • Klassenselektoren
  • ID-Selektoren
  • Kindselektor
  • Nachfahrenselektor
  • Geschwisterselektor
  • Kombinierte Selektoren
  • CSS-Selektoren
Praxis: Wir planen unser Projekt!
  • Das Website-Konzept
  • Der Website-Blueprint
Basics: Breite, Höhe, das
und das Box-Model
  • Das HTML-Grundgerüst als Snippet einfügen
  • Breite (width) und Höhe (height)
  • Das
    - Unser bester Freund!
  • Das Box-Model
  • Praxis-Tipp: box-sizing: border-box
  • Innenabstand (padding) und Außenabstand (margin)
  • Rand (border)
Basics: Arten von Größenangaben
  • absolute Größenangaben
  • relative Größenangaben (%)
  • relative Größenangaben (em und rem)
  • Welche Größenangabe? Wann?
Basics: Arten von Farben
  • vordefinierte Farben
  • Hex-Farben
  • RGB- & RGBA-Farben
  • HSL- & HSLA-Farben
Basics: Schriftarten
  • Schriftarten einbinden
  • externe Schriftarten einbinden
  • Schriftarten mit @font-face lokal einbinden I
  • Schriftarten mit @font-face lokal einbinden II
Praxis: Das Projekt-Setup
  • Anlegen von Ordner-Struktur
  • Anlegen der HTML- und CSS-Dateien
  • generelle CSS-Grundregeln
Basics: Inline- und Block-Elemente, Bilder, Kommentare und Seitenstrukturierung
  • Inline- vs. Block-Elemente
  • Die display-Eigenschaft
  • Bilder einbinden
  • Kommentare in HTML und CSS
  • Seitenstrukturierung in HTML5
Basics: Positionierung von Elementen mit CSS
  • position: relative und absolute
  • position: fixed, sticky und static
Basics: Links in HTML
  • Links I: Die Basics
  • Links II: Bookmarks
  • Links III: Links stylen
Basics: Listen in HTML
  • Listen I: geordnete und ungeordnete Listen
  • Listen II: geschachtelte Listen
  • Listen III: Listen stylen
Praxis: Atom-Einstellungen und -Plugins
  • Auto-Funktionen wieder einschalten
  • Hilfreiche Plugins installieren
Basics: Emmet
  • Emmet - Die Grundlagen
  • Emmet - komplexere Abkürzungen
Praxis: Los geht's mit der Navigations-Leiste!
  • Navigationsleiste I: Navigationsleiste & Logo
  • Navigationsleiste II: Navigationsliste
  • Navigationsleiste III: Navigationsliste stylen, klickbares Logo & Active-Class
Basics: Hintergrund
  • Hintergrund I: background-color und background-image
  • Hintergrund II: background-repeat
  • Hintergrund III: background-position
  • Hintergrund IV: background-attachment
  • Hintergrund V: Kurzschreibweise
Praxis: Der Header-Banner
  • Header-Banner I: verschiedene Varianten
  • Header-Banner II: die Variante für Fortgeschrittene
  • Header-Banner III: Banner auf allen Seiten anlegen
Basics: Modernes Webdesign und Grid-Systeme