Naucz się CSS Flexbox z grą Flexbox Froggy

W przeszłości zajmowaliśmy się flexboxem i podstawami jego działania. Ale zastosowanie Flexbox do twojego przepływu pracy może być trudne, ponieważ jest to tak skomplikowany dodatek do specyfikacji CSS.

Z Flexbox Froggy możesz poznaj wszystkie podstawy Flexbox z zabawną grą internetową z udziałem żab i lilypadów. Wiem, że to brzmi szalenie, ale to jest naprawdę niesamowity webapp.

Zaczynasz na poziomie 1 i powoli pracuj na 24 różnych poziomach nauczanie wielu aspektów orientacji flexbox. Wczesne poziomy zaczynają się łatwo, prosząc o to ustaw jedną lub dwie żaby wzdłuż jednego pojemnika. Wczesne lekcje obejmują również porady i sugestie, które pomogą Ci w drodze.

Ale po przejściu lekcji 10 rzeczy naprawdę się rozgrzewają. Musisz nauczyć się, jak ponownie-organizować przedmioty w kontenerze, jak zorganizować zawartość pionowo, i jak tworzyć równoodległe odstępy między różnymi rzędami różnych treści.

Śliczne małe żaby mogą cię zwabić, ale zapewnij, że to trudna gra.

jednak, od kompletnych nowicjuszy do bardziej doświadczonych twórców stron internetowych, gra jest przeznaczona dla wszystkich poziomów. Wczesne lekcje są proste, a późniejsze lekcje mogą sprawić, że będziesz skulony nad ekranem z kępami włosów u boku.

Pełny kod źródłowy gry jest dostępny za darmo na GitHub, więc jeśli chcesz, możesz pobrać go i zagrać na miejscu.

Plus aplikacja internetowa jest wielojęzyczna oferując 20 języków w tym angielski, francuski, niemiecki, włoski, chiński, japoński i rosyjski (plus wiele innych).

Przyznam się do tego przestawianie żab nie spowoduje, że staniesz się mistrzem Flexbox. Ale te lekcje mają na celu zapoznaj się ze składnią Flexbox dzięki czemu możesz czuć się bardziej komfortowo pracując w rzeczywistych scenariuszach.

Jeśli jesteś twórca stron internetowych o dowolnym poziomie umiejętności zdecydowanie powinieneś sprawdzić Flexbox Froggy. Jest całkowicie darmowy, całkiem zabawny i zaskakująco edukacyjny.