de.hideout-lastation.com
Paradies Für Designer Und Entwickler


Unterrichte CSS Flexbox mit dem Flexbox Froggy Spiel

In der Vergangenheit haben wir über Flexbox und die Grundlagen wie es funktioniert beschönigt. Das Anwenden von flexbox auf Ihren Workflow kann jedoch eine Herausforderung darstellen, da es sich um eine so komplizierte Ergänzung der CSS-Spezifikation handelt.

Mit Flexbox Froggy können Sie alle Grundlagen von Flexbox mit einem lustigen Webspiel mit Fröschen und Lilypads lernen . Ich weiß, es klingt verrückt, aber das ist wirklich eine tolle Webapp.

Sie beginnen auf Level 1 und arbeiten sich langsam durch 24 verschiedene Levels, um die vielen Aspekte der Flexbox-Orientierung zu lernen. Die ersten Level beginnen einfach, indem Sie einen oder zwei Frösche an einem einzelnen Container ausrichten . Frühe Lektionen enthalten auch Tipps und Vorschläge, um Ihnen auf dem Weg zu helfen.

Aber sobald du die Lektion 10 hinter dir hast, werden die Dinge wirklich heiß. Sie müssen lernen, Elemente in einem Container neu zu organisieren, Inhalte vertikal zu organisieren und äquidistante Abstände zwischen verschiedenen Zeilen mit unterschiedlichen Inhalten zu erstellen.

Die niedlichen kleinen Frösche können dich reinlocken, aber sei dir sicher, das ist ein hartes Spiel.

Von kompletten Neulingen bis hin zu erfahreneren Webentwicklern ist das Spiel für alle Levels geeignet. Die frühen Lektionen sind ein Kinderspiel und die späteren Lektionen können dich mit Haarbüscheln an deiner Seite über den Bildschirm gebeugt lassen.

Der vollständige Spiel-Quellcode ist auf GitHub kostenlos erhältlich, so dass Sie ihn lokal herunterladen und abspielen können, wenn Sie möchten.

Plus die Webapp ist mehrsprachig und bietet 20 Sprachen einschließlich Englisch, Französisch, Deutsch, Italienisch, Chinesisch, Japanisch und Russisch (und viele andere).

Ich gebe zu, dass das Umsortieren von Fröschen Sie nicht sofort zu einem Meister der Flexbox machen wird. Aber diese Lektionen sollen Sie mit der Flexbox-Syntax vertraut machen, damit Sie sich in realen Szenarien besser fühlen können.

Wenn Sie ein Webentwickler mit einem beliebigen Skilllevel sind, sollten Sie Flexbox Froggy auf jeden Fall ausprobieren. Es ist völlig kostenlos, ziemlich lustig zu spielen und überraschend lehrreich.

20 wunderschöne Beispiele der Zeitleiste im Web Design für Inspiration

20 wunderschöne Beispiele der Zeitleiste im Web Design für Inspiration

Ich bin mir ziemlich sicher, dass die meisten von Ihnen sich der Verwendung von Timeline im Design bewusst sind, zumal alle Facebook-Profile jetzt auf diese Weise angezeigt werden. Darüber hinaus verwenden einige Smartphone-Apps wie Path oder Tweetbot auch Timeline-basiertes Design, um ihre Geschichten zu präsentieren.

(Tech- und Design-Tipps)

40 Clevere und kreative Valentinstag-Anzeigen

40 Clevere und kreative Valentinstag-Anzeigen

Für manche Menschen hat der Valentinstag seine Bedeutung verloren - sie denken, dass es sich um eine zu kommerzialisierte Feier handelt. Für andere ist der 14. Februar der romantischste Tag des Jahres, der, wenn er gefeiert wird, der Beziehung eine besondere Bedeutung verleiht.Ganz gleich, wie Sie sich bewegen, der Valentinstag wird immer eine Erinnerung für die Massen sein, wie wir uns immer mit verlorenen Lieben einfühlen und die Beziehungen beneiden können, die dauern . Mit

(Tech- und Design-Tipps)