Responsives Webdesign mit CSS Flexbox

49,00 €*

Lieferzeit Sofort lieferbar

Lernen Sie alle Konzepte und Eigenschaften der CSS Flexbox, um vielseitige Layouts für das Web zu erstellen. IT-Experte Erik Behrends zeigt in seinem Videokurs alle Inhalte Schritt für Schritt. Sie können direkt mitmachen und Ihr erlerntes Wissen anhand von Quiz überprüfen.

  • CSS Flexbox anschaulich erklärt in 30 Lektionen
  • Prüfen Sie das Gelernte in Wissenstests
  • Stellen Sie den Experten Fragen über das Q&A-Modul
  • Machen Sie mit bei praktischen Übungen
Anzahl:
Artikel-Beschreibung

Bei der Gestaltung mit CSS ist das Flexbox-Layout nicht mehr wegzudenken. Mit Flexbox steht ein umfangreicher und vielseitiger Ansatz zur Verfügung, um mit CSS ein responsives Layout zu erhalten. Flexbox ist ein eigenständiger Teil von CSS, der auf bestimmten Konzepten und einer Reihe von CSS-Eigenschaften basiert. Diese stellt Erik Behrends in seinem Kurs schrittweise vor und erläutert sie im Detail.

Der Kurs behandelt ausschließlich das Thema Flexbox in CSS. Daher sollten Sie sich bereits etwas mit den Grundlagen der Webentwicklung in HTML und CSS auskennen. Ansonsten sind keine weiteren Vorkenntnisse nötig, damit Sie in diesem Kurs das Flexbox-Layout erlernen und in Ihren Projekten einsetzen können.

Länge: 1:38 Stunden




Alle Video-Lektionen im Überblick:

  • Herzlich willkommen zu diesem Kurs
  • Einleitung
    • Kapitelüberblick
    • Flexible Web-Layouts mit Flexbox gestalten
    • Beispiel-Code herunterladen
    • Entwicklungsumgebung einrichten
  • Grundlagen des Flexbox-Layouts
    • Kapitelüberblick
    • Der Flex-Container mit seinen Flex-Items
    • Die Achsen im Flex-Container
    • Vorgehen zur Erstellung eines Flexbox-Layouts
    • Überblick der relevanten Flexbox-Eigenschaften
    • Quiz: Grundlagen des Flexbox-Layouts
  • Der Flex-Container und seine Achsen
    • Kapitelüberblick
    • Das erste Beispiel öffnen und starten
    • Flex-Container mit display:flex aktivieren
    • Ausrichtung der Hauptachse mit flex-direction festlegen
    • justify-content legt die Darstellung an der Hauptachse fest
    • align-items bestimmt die Anordnung entlang der Querachse
    • Bedeutung von stretch und baseline bei align-items
    • Quiz: Der Flex-Container und seine Achsen
  • Weitere Eigenschaften des Flex-Containers
    • Kapitelüberblick
    • Umbrüche im Container mit flex-wrap kontrollieren
    • Die kombinierte Eigenschaft flex-flow
    • align-content für den Zeilenabstand in mehrzeiligen Containern
    • Abstände innerhalb des Containers mit gap bestimmen
    • Quiz: Weitere Eigenschaften des Flex-Containers
  • Inhalte im Flex-Container beeinflussen
    • Intro – Vorschau des Kapitels
    • Individuelle Reihenfolge von Items mit order festlegen
    • Die Querachsen-Anordnung mittels align-self überschreiben
    • Größenzuwachs mit flex-grow ermöglichen
    • flex-shrink lässt einzelne Einträge schrumpfen
    • Ausgangsgröße für Items durch flex-basis angeben
    • Die kombinierte Eigenschaft flex
    • Quiz: Inhalte im Flex-Container beeinflussen
  • Abschluss
    • Fazit und Kursabschluss

  • Über den Trainer:

    Erik Behrends ist Professor für Informatik und unterrichtet an der DHBW Lörrach verschiedene Themen der Programmierung und der App-Entwicklung. Vor seiner Zeit an der Hochschule hat er viele Jahre in IT-Unternehmen als Softwareentwickler gearbeitet. Und auch heute programmiert er noch regelmäßig neben seiner Haupttätigkeit in einigen App-Projekten.

    So lernen Sie mit diesem Videokurs:
    In den Videokursen von heise Academy lernen Sie IT-Themen anschaulich und verständlich. In den Videos schauen Sie den Experten bei der praktischen Arbeit zu und lassen sich dabei alles genau erklären. Das Wissen ist in kleine Lernschritte und Aufgaben unterteilt, sodass Sie den Kurs Lektion für Lektion durcharbeiten oder gezielt zu Themen springen können, die Sie interessieren. Die persönliche Lernumgebung der heise Academy hält viele Funktionen für Sie bereit, die Ihnen beim Lernen helfen können:

    • Flexibler Videoplayer mit vielen Steuerungsmöglichkeiten
    • Wissensquiz zur Lernkontrolle
    • Lernhistorie und Lernfortschritt
    • Lesezeichen und Notizen
    • Volltextsuche in den Videos
    • Frage-den-Experten-Modul
    • Übungsmaterial zum Mitmachen
    • Responsive Web-App und Videostreaming für alle Endgeräte

    Technische Voraussetzungen:
    Für diesen Videokurs werden lediglich ein Browser (mit eingeschalteter JavaScript-Funktionalität) und eine Internetverbindung benötigt.

    Artikel-Details
    Anbieter:
    Heise Medien GmbH & Co. KG
    Artikelnummer:
    css-flexbox-layout-2086
    Veröffentlicht:
    03.11.2022