Aus dem Kurs: Webtechniken lernen 3: Responsive CSS-Layouts mit Media Queries, Flexbox und Grid
So erhalten Sie Zugriff auf diesen Kurs
Werden Sie noch heute Mitglied und erhalten Sie Zugriff auf mehr als 23.200 Kurse von Branchenfachleuten.
Ein kurzer Blick in die Zukunft von CSS
Aus dem Kurs: Webtechniken lernen 3: Responsive CSS-Layouts mit Media Queries, Flexbox und Grid
Ein kurzer Blick in die Zukunft von CSS
Am Anfang dieses Kurses hatte die Übungswebsite ein einfaches einspaltiges Layout. Und das haben Sie so nach und nach mit Technik wie Position, Float, Flexbox und Grid zu einem mehrspaltigen responsiven Layout erweitert, das auf allen Geräten eine gute Figur macht, wie man hier sieht. So, und es ist navigierbar, also ob Mobil oder Tablett oder Desktop, das spielt für dieses Layout keine Rolle. Aber CSS steht nicht still und es wird ständig weiter entwickeln, und ich möchte Ihnen zum Abschluss des Kurses noch kurz ein paar Entwicklungen vorstellen, die da demnächst auf uns zukommen werden. Zu allererst CSS Subgrid - verschachtelte Grids. Sie haben auch ein paar Karten gebaut zu Teamvorstellung. Und hier sehen Sie 3 Karten mit verschiedenen Überschriften, und das wäre schön, wenn die so aussehen würde, denn momentan ist es mehr so wie hier, dass die Header unterschiedlich hoch sind. Erst wenn das Subgrid Feature wirklich umgesetzt wird, und die Browser das verstehen, dann wird es so…
Laden Sie Kurse herunter und lernen Sie auch unterwegs.
Sehen Sie sich Kurse auf Ihrem Mobilgerät ohne Internetverbindung an. Laden Sie Kurse mit der LinkedIn Learning-App für iOS oder Android herunter.
Inhalt
-
-
(Gesperrt)
Die Übungswebsite im Überblick - vom klassischen zum modernen Layout2 Min. 11 Sek.
-
(Gesperrt)
Ein modernes Layout: 1. Zusätzliche div-Elemente für die Layoutbereiche hinzufügen5 Min. 13 Sek.
-
(Gesperrt)
Ein modernes Layout: 2. Die Layoutbereiche gestalten4 Min. 16 Sek.
-
(Gesperrt)
Ein modernes Layout: 3. Das Fine-Tuning der Abstände4 Min. 21 Sek.
-
(Gesperrt)
"Custom properties": Eigene Eigenschaften definieren und als CSS-Variablen nutzen4 Min. 44 Sek.
-
(Gesperrt)
Challenge: Farbwerte für die Übungswebsite mit CSS-Variablen definieren1 Min. 25 Sek.
-
(Gesperrt)
Solution: Farbwerte für die Übungswebsite mit CSS-Variablen definieren3 Min. 47 Sek.
-
(Gesperrt)
-
-
(Gesperrt)
Responsives Webdesign: Das Web wird flexibel3 Min. 15 Sek.
-
(Gesperrt)
Medientypen definieren das Ausgabemedium3 Min. 45 Sek.
-
(Gesperrt)
Media Queries sind Medientypen plus Medienfeatures3 Min. 23 Sek.
-
(Gesperrt)
Media Queries brauchen den "Meta-Viewport"3 Min. 10 Sek.
-
(Gesperrt)
Auf der Suche nach dem richtigen Breakpoint3 Min. 41 Sek.
-
(Gesperrt)
Challenge: Responsive Schriftgröße per Media Query1 Min. 20 Sek.
-
(Gesperrt)
Solution: Responsive Schriftgröße per Media Query2 Min. 35 Sek.
-
(Gesperrt)
-
-
(Gesperrt)
Block- und Inline-Boxen im Flow: Der Block Formatting Context3 Min. 23 Sek.
-
(Gesperrt)
Block-Boxen im Flow und die Eigenschaft "position" im Überblick3 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 kombinieren3 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 Navigation2 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 platzieren1 Min. 16 Sek.
-
(Gesperrt)
Solution: Eine Bildbeschriftung über dem Bild platzieren2 Min. 23 Sek.
-
(Gesperrt)
-
-
(Gesperrt)
Die Eigenschaft "float" im Überblick3 Min. 5 Sek.
-
(Gesperrt)
Gefloatete Elemente sind nicht mehr ganz im Flow2 Min. 15 Sek.
-
(Gesperrt)
"float" und "clear" im Fließtext2 Min. 4 Sek.
-
(Gesperrt)
Praktisch: Klassen zum Floaten und Clearen3 Min. 50 Sek.
-
(Gesperrt)
Floats umschließen mit einem neuen Block Formatting Context3 Min. 21 Sek.
-
Floats umschließen für alle Browser mit @supports3 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.
-
(Gesperrt)
-
-
(Gesperrt)
Flexbox und Grid: das moderne CSS-Layout1 Min. 45 Sek.
-
(Gesperrt)
Flexbox: display:flex erzeugt einen Flex-Container und Flex-Items4 Min. 4 Sek.
-
(Gesperrt)
Mehrspaltige Layouts per Flexbox: Neue Möglichkeiten ohne alte Probleme3 Min. 1 Sek.
-
(Gesperrt)
Die Fließrichtung von Flex-Items kontrollieren mit flex-direction, flex-wrap und flex-flow4 Min. 3 Sek.
-
(Gesperrt)
Die Ausrichtung von Flex-Items kontrollieren mit justify-content, align-items und align-self5 Min. 2 Sek.
-
(Gesperrt)
Automatische Abstände für Flex-Items mit margin: auto2 Min. 44 Sek.
-
Flexibilität für Flex-Items: Die Zauberformel flex: 14 Min. 53 Sek.
-
(Gesperrt)
Sticky Footer: Den Fußbereich mit flex: 1 am unteren Rand des Viewports platzieren4 Min. 4 Sek.
-
(Gesperrt)
Die Reihenfolge von Flex-Items definieren und Zwischenräume festlegen5 Min.
-
(Gesperrt)
Die wichtigsten Flexbox-Eigenschaften auf einen Blick2 Min. 48 Sek.
-
(Gesperrt)
Challenge: Die Navigation im Fußbereich gestalten1 Min. 29 Sek.
-
(Gesperrt)
Solution: Die Navigation im Fußbereich gestalten3 Min. 46 Sek.
-
(Gesperrt)
-
-
Die responsive Navigation im Überblick4 Min. 3 Sek.
-
(Gesperrt)
Schritt 1: Prüfen, ob JavaScript aktiv ist3 Min. 16 Sek.
-
(Gesperrt)
Schritt 2: Die mobile Navigation gestalten2 Min. 53 Sek.
-
(Gesperrt)
Schritt 3: Den Menübutton im HTML einfügen2 Min. 57 Sek.
-
(Gesperrt)
Schritt 4: Den Menübutton per CSS gestalten3 Min. 22 Sek.
-
(Gesperrt)
Schritt 5: Die Navigation per CSS ausblenden1 Min. 59 Sek.
-
(Gesperrt)
Schritt 6: Die Navigation mit dem Menübutton einblenden5 Min. 3 Sek.
-
(Gesperrt)
Challenge: Eine horizontale Navigation für breitere Viewports1 Min. 32 Sek.
-
(Gesperrt)
Solution: Eine horizontale Navigation für breitere Viewports3 Min. 10 Sek.
-
-
-
(Gesperrt)
Ein Grid ist ein Raster und schafft Ordnung1 Min. 58 Sek.
-
(Gesperrt)
Mehrspaltige Layouts nur für moderne Browser: @supports2 Min. 21 Sek.
-
(Gesperrt)
Die wichtigsten Begriffe: Grid-Container, Grid-Items & Co.3 Min. 29 Sek.
-
(Gesperrt)
Das erste Grid-Layout: Die Infoboxen nebeneinander platzieren5 Min. 8 Sek.
-
(Gesperrt)
Flexbox und Grid sind ein gutes Team4 Min. 10 Sek.
-
Grid-Items manuell platzieren: 1. Mit nummerierten Linien4 Min. 48 Sek.
-
(Gesperrt)
Grid-Items manuell platzieren: 2. Mit benannten Bereichen5 Min. 10 Sek.
-
(Gesperrt)
Das Team: 1. HTML und grundlegende Gestaltung per CSS3 Min. 15 Sek.
-
Das Team: 2. Ein responsives Grid ohne Media Query4 Min. 51 Sek.
-
(Gesperrt)
Ein unregelmäßiges Grid-Layout mit unterschiedlich breiten Spalten und Zeilen3 Min. 18 Sek.
-
(Gesperrt)
Die wichtigsten Grid-Eigenschaften auf einen Blick3 Min. 29 Sek.
-
(Gesperrt)
Challenge: Die Kontaktseite per Grid gestalten1 Min. 31 Sek.
-
(Gesperrt)
Solution: Die Kontaktseite per Grid gestalten3 Min. 8 Sek.
-
(Gesperrt)