Responsives Webdesign: Das Web wird flexibel

Inhalt

• Einleitung Einleitung

  • Mit CSS schnell und einfach responsive Layouts erstellen

    59 Sek.
  • Was Sie erwartet und was Sie mitbringen sollten

    3 Min.
• 1. Ein modernes Layout für die Übungswebsite 1. Ein modernes Layout für die Übungswebsite

  • (Gesperrt)
    Die Übungswebsite im Überblick - vom klassischen zum modernen Layout

    2 Min. 11 Sek.
  • (Gesperrt)
    Ein modernes Layout: 1. Zusätzliche div-Elemente für die Layoutbereiche hinzufügen

    5 Min. 13 Sek.
  • (Gesperrt)
    Ein modernes Layout: 2. Die Layoutbereiche gestalten

    4 Min. 16 Sek.
  • (Gesperrt)
    Ein modernes Layout: 3. Das Fine-Tuning der Abstände

    4 Min. 21 Sek.
  • (Gesperrt)
    "Custom properties": Eigene Eigenschaften definieren und als CSS-Variablen nutzen

    4 Min. 44 Sek.
  • (Gesperrt)
    Challenge: Farbwerte für die Übungswebsite mit CSS-Variablen definieren

    1 Min. 25 Sek.
  • (Gesperrt)
    Solution: Farbwerte für die Übungswebsite mit CSS-Variablen definieren

    3 Min. 47 Sek.
• 2. Media Queries und responsives Webdesign 2. Media Queries und responsives Webdesign

  • (Gesperrt)
    Responsives Webdesign: Das Web wird flexibel

    3 Min. 15 Sek.
  • (Gesperrt)
    Medientypen definieren das Ausgabemedium

    3 Min. 45 Sek.
  • (Gesperrt)
    Media Queries sind Medientypen plus Medienfeatures

    3 Min. 23 Sek.
  • (Gesperrt)
    Media Queries brauchen den "Meta-Viewport"

    3 Min. 10 Sek.
  • (Gesperrt)
    Auf der Suche nach dem richtigen Breakpoint

    3 Min. 41 Sek.
  • (Gesperrt)
    Challenge: Responsive Schriftgröße per Media Query

    1 Min. 20 Sek.
  • (Gesperrt)
    Solution: Responsive Schriftgröße per Media Query

    2 Min. 35 Sek.
• 3. Der Flow und die Eigenschaft position 3. Der Flow und die Eigenschaft position

  • (Gesperrt)
    Block- und Inline-Boxen im Flow: Der Block Formatting Context

    3 Min. 23 Sek.
  • (Gesperrt)
    Block-Boxen im Flow und die Eigenschaft "position" im Überblick

    3 Min. 20 Sek.
  • (Gesperrt)
    Versetzt weiterfließen - "position:relative"

    2 Min. 32 Sek.
  • (Gesperrt)
    Raus aus dem Fluss: "position:absolute"

    2 Min. 12 Sek.
  • Praktisch: absolute und relative Positionierung kombinieren

    3 Min. 59 Sek.
  • (Gesperrt)
    Wie ein Fels in der Brandung: "position:fixed"

    2 Min. 40 Sek.
  • (Gesperrt)
    Scrollen und dann stehen bleiben: "position:sticky" für die Navigation

    2 Min. 22 Sek.
  • (Gesperrt)
    Positionierte Boxen und die Stapelreihenfolge mit der Eigenschaft "z-index"

    3 Min. 49 Sek.
  • (Gesperrt)
    Challenge: Eine Bildbeschriftung über dem Bild platzieren

    1 Min. 16 Sek.
  • (Gesperrt)
    Solution: Eine Bildbeschriftung über dem Bild platzieren

    2 Min. 23 Sek.
• 4. Schweben und schweben lassen: float und clear 4. Schweben und schweben lassen: float und clear

  • (Gesperrt)
    Die Eigenschaft "float" im Überblick

    3 Min. 5 Sek.
  • (Gesperrt)
    Gefloatete Elemente sind nicht mehr ganz im Flow

    2 Min. 15 Sek.
  • (Gesperrt)
    "float" und "clear" im Fließtext

    2 Min. 4 Sek.
  • (Gesperrt)
    Praktisch: Klassen zum Floaten und Clearen

    3 Min. 50 Sek.
  • (Gesperrt)
    Floats umschließen mit einem neuen Block Formatting Context

    3 Min. 21 Sek.
  • Floats umschließen für alle Browser mit @supports

    3 Min. 37 Sek.
  • (Gesperrt)
    Challenge: Textfluss um gefloatetes Bild gestalten mit "shape-outside"

    1 Min. 31 Sek.
  • (Gesperrt)
    Solution: Textfluss um gefloatetes Bild gestalten mit "shape-outside"

    3 Min. 5 Sek.
• 5. Flexbox: mehrspaltige Layouts mit display:flex 5. Flexbox: mehrspaltige Layouts mit display:flex

  • (Gesperrt)
    Flexbox und Grid: das moderne CSS-Layout

    1 Min. 45 Sek.
  • (Gesperrt)
    Flexbox: display:flex erzeugt einen Flex-Container und Flex-Items

    4 Min. 4 Sek.
  • (Gesperrt)
    Mehrspaltige Layouts per Flexbox: Neue Möglichkeiten ohne alte Probleme

    3 Min. 1 Sek.
  • (Gesperrt)
    Die Fließrichtung von Flex-Items kontrollieren mit flex-direction, flex-wrap und flex-flow

    4 Min. 3 Sek.
  • (Gesperrt)
    Die Ausrichtung von Flex-Items kontrollieren mit justify-content, align-items und align-self

    5 Min. 2 Sek.
  • (Gesperrt)
    Automatische Abstände für Flex-Items mit margin: auto

    2 Min. 44 Sek.
  • Flexibilität für Flex-Items: Die Zauberformel flex: 1

    4 Min. 53 Sek.
  • (Gesperrt)
    Sticky Footer: Den Fußbereich mit flex: 1 am unteren Rand des Viewports platzieren

    4 Min. 4 Sek.
  • (Gesperrt)
    Die Reihenfolge von Flex-Items definieren und Zwischenräume festlegen

    5 Min.
  • (Gesperrt)
    Die wichtigsten Flexbox-Eigenschaften auf einen Blick

    2 Min. 48 Sek.
  • (Gesperrt)
    Challenge: Die Navigation im Fußbereich gestalten

    1 Min. 29 Sek.
  • (Gesperrt)
    Solution: Die Navigation im Fußbereich gestalten

    3 Min. 46 Sek.
• 6. Eine responsive Navigation erstellen 6. Eine responsive Navigation erstellen

  • Die responsive Navigation im Überblick

    4 Min. 3 Sek.
  • (Gesperrt)
    Schritt 1: Prüfen, ob JavaScript aktiv ist

    3 Min. 16 Sek.
  • (Gesperrt)
    Schritt 2: Die mobile Navigation gestalten

    2 Min. 53 Sek.
  • (Gesperrt)
    Schritt 3: Den Menübutton im HTML einfügen

    2 Min. 57 Sek.
  • (Gesperrt)
    Schritt 4: Den Menübutton per CSS gestalten

    3 Min. 22 Sek.
  • (Gesperrt)
    Schritt 5: Die Navigation per CSS ausblenden

    1 Min. 59 Sek.
  • (Gesperrt)
    Schritt 6: Die Navigation mit dem Menübutton einblenden

    5 Min. 3 Sek.
  • (Gesperrt)
    Challenge: Eine horizontale Navigation für breitere Viewports

    1 Min. 32 Sek.
  • (Gesperrt)
    Solution: Eine horizontale Navigation für breitere Viewports

    3 Min. 10 Sek.
• 7. CSS-Grid: mehrspaltige Layouts mit display:grid 7. CSS-Grid: mehrspaltige Layouts mit display:grid

  • (Gesperrt)
    Ein Grid ist ein Raster und schafft Ordnung

    1 Min. 58 Sek.
  • (Gesperrt)
    Mehrspaltige Layouts nur für moderne Browser: @supports

    2 Min. 21 Sek.
  • (Gesperrt)
    Die wichtigsten Begriffe: Grid-Container, Grid-Items & Co.

    3 Min. 29 Sek.
  • (Gesperrt)
    Das erste Grid-Layout: Die Infoboxen nebeneinander platzieren

    5 Min. 8 Sek.
  • (Gesperrt)
    Flexbox und Grid sind ein gutes Team

    4 Min. 10 Sek.
  • Grid-Items manuell platzieren: 1. Mit nummerierten Linien

    4 Min. 48 Sek.
  • (Gesperrt)
    Grid-Items manuell platzieren: 2. Mit benannten Bereichen

    5 Min. 10 Sek.
  • (Gesperrt)
    Das Team: 1. HTML und grundlegende Gestaltung per CSS

    3 Min. 15 Sek.
  • Das Team: 2. Ein responsives Grid ohne Media Query

    4 Min. 51 Sek.
  • (Gesperrt)
    Ein unregelmäßiges Grid-Layout mit unterschiedlich breiten Spalten und Zeilen

    3 Min. 18 Sek.
  • (Gesperrt)
    Die wichtigsten Grid-Eigenschaften auf einen Blick

    3 Min. 29 Sek.
  • (Gesperrt)
    Challenge: Die Kontaktseite per Grid gestalten

    1 Min. 31 Sek.
  • (Gesperrt)
    Solution: Die Kontaktseite per Grid gestalten

    3 Min. 8 Sek.
• 8. Ein Blick in die Zukunft von CSS 8. Ein Blick in die Zukunft von CSS

  • (Gesperrt)
    Ein kurzer Blick in die Zukunft von CSS

    3 Min. 24 Sek.