Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Entwicklung & Design

Flexbox: CSS leicht gemacht mit diesem 20-teiligen Videokurs

Wer jetzt denkt, dass dieses Bild etwas mit CSS Flexbox zu tun haben könnte, sollte den Artikel möglicherweise doch nicht lesen ;-)

Das CSS-Box-Modell ist ein hakeliges Dingen, mit dessen Hilfe sich etwas anspruchsvollere Websites nur unter Schmerzen erstellen lassen. Insbesondere für responsive Designs wird man sich als Entwickler bereits aus Gründen des Selbsterhaltungstriebs nach Alternativen umsehen. Eine der besten dieser Alternativen ist Flexbox. Ein leicht verständlicher Videokurs führt in die Materie ein.

Wer einmal mit Flexbox gearbeitet hat, geht definitiv nicht zurück. Dabei ist der Einsatz des alternativen Modells zwar nicht ausgesprochen schwierig, jedoch durchaus mit einer Lernkurve ausgestattet. Der kostenlose Videokurs, den wir euch heute vorstellen wollen, hilft da ungemein.

WTF heißt natürlich „What the Flexbox”. Was dachtet ihr denn? (Screenshot: flexbox.io)
WTF heißt natürlich „What the Flexbox”. Was dachtet ihr denn? (Screenshot: flexbox.io)

What the Flexbox: Über 160 Minuten Flexbox-Wissen

Der großzügige Spender des Kurses „What the Flexbox” stammt aus Kanada, heißt Wes Bos, und ist seines Zeichens sowohl Vollblut-Entwickler als auch Vollblut-Trainer. Mit einem Zeitaufwand von über 60 Stunden erstellte er jüngst einen umfangreichen, dabei leicht verständlichen Videokurs zu CSS Flexbox.

Dieser umfasst 20 einzelne Tutorials mit einer Länge zwischen vier und 16 Minuten. In den ersten 13 Teilen beschäftigt sich Bos mit den Grundlagen der Verwendung, während die folgenden sieben Teile Beispiele realer Anwendungsfälle, etwa eine Preistabelle oder ein Layout für eine Mobil-App, vorstellen.

„What the Flexbox” besteht aus 20 einzelnen Teilen unterschiedlicher Länge (Screenshot: flexbox.io)
„What the Flexbox” besteht aus 20 einzelnen Teilen unterschiedlicher Länge (Screenshot: flexbox.io)

Um an dem Kurs teilzunehmen, sind lediglich zwei Voraussetzungen zu erfüllen. Ihr müsst zum einen eine gültige E-Mail-Adresse angeben, an die Wes euch den Link zum Tutorial und zu den Beispieldateien schicken kann. Zum anderen müsst ihr der englischen Sprache mächtig sein, soweit man es im alltäglichen Webentwickler-Gebrauch benötigt. Wes formuliert schon sehr einfach und in kurzen Sätzen, sowie von der Aussprache her sehr deutlich. Ich würde sagen, wer „Harry Potter and the Sorcerer's Stone” lesen oder erfolgreich hören konnte, wird auch mit „What the Flexbox” keine Probleme haben. Da habe ich schon ganz andere Tutorials auf die Ohren bekommen...

Wer sich nur kurz über die wichtigsten Aspekte des Flexbox-Modells informieren will, sollte auf jeden Fall das Tutorial hier bei t3n nicht versäumen. Die zwölf Minuten sollten drin sein.

Richtig in die Tiefe geht es dann mit „What the Flexbox”. Dafür benötigt ihr ungefähr drei Stunden, seid danach aber auch bestens informiert. Zu allen Beispielen liefert Wes die erforderlichen CSS- und HTML-Dateien als gepacktes Archiv zum Download mit. Es bietet sich an, mal einen intensiven Flexbox-Tag einzulegen und sich das gesamte Material in Ruhe zu Gemüte zu führen. Ich garantiere einen deutlichen Erkenntnisgewinn.

„What the Flexbox” ist durchgängig nachvollziehbar und sinnvoll strukturiert (Screenshot: flexbox.io)
„What the Flexbox” ist durchgängig nachvollziehbar und sinnvoll strukturiert (Screenshot: flexbox.io)

Leider lassen sich die Videos nicht für den Offline-Konsum herunterladen, da sich Wes für die Bereitstellung via YouTube entschieden hat. Andererseits sollte man beim Schauen der Tutorials ohnehin am Rechner aktiv mitarbeiten und durch die sehr codelastige Erklärungsmethode bringt ein Betrachten auf kleinen Mobil-Screens keinen erkennbaren Nutzen.

Mein Fazit fällt sehr eindeutig aus: Wer sich mit Flexbox beschäftigen will und der englischen Sprache mächtig ist, kommt an „What the Flexbox” nicht vorbei. Die Qualität des Kurses habe ich persönlich bei so manchem Bezahl-Content nicht gesehen. Prädikat: besonders wertvoll.

Bitte beachte unsere Community-Richtlinien

3 Reaktionen
Stefan

Cooles Ding!
Hab mich mit Flexbox jetzt noch nicht so viel auseinandergesetzt, das 12 minütige Video von t3n ist aber schon mal nett anzusehen.

Wenn ich aber schaue bei caniuse sieht man halt auch wieder das alte Problem der Kompatibilität.
Gibt es da schon ein CSS-Reset/Normalizer der es für ältere Browser behebt?

nazeK

Der wird wohl kaum via CSSReset möglich sein. Flexbox kannst du ohne zusätzliches HTML nicht CSS-only nacharmen ... Da braucsht du JS.

nazeK

Cooler MixUp journalistischer Stilformen ... nicht ...

Da hat sich der Gute aber richtig viel Arbeit gemacht. Aber was will er mit meiner E-Mailadresse?

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Finde einen Job, den du liebst