Научете на CSS Flexbox с Flexbox Froggy играта

В миналото сме обръщали внимание на flexbox и основите на неговото функциониране. Но всъщност прилагането на flexbox към вашия работен процес може да бъде предизвикателство, защото е толкова сложно допълнение към спецификацията на CSS.

С Flexbox Froggy можете научете всички основи на flexbox с забавна уеб игра, включваща жаби и lilypads. Знам, че звучи лудо, но това е сериозно страхотно webapp.

Започвате от ниво 1 и бавно се придвижвате през 24 различни нива преподаване на много аспекти на ориентацията на flexbox. Ранните нива започват лесно, като ви молят подравнете една или две жаби по един контейнер. Ранните уроци включват и съвети и предложения, които да ви помогнат по пътя.

Но след като преминете урок 10, нещата наистина се затоплят. Ще трябва да се научите как да го правите отново-организирате елементи в контейнер, как да организирам съдържание вертикално, и как да създавате равноотстоящи разстояния между различни редове с различно съдържание.

Сладките малки жаби може да ви примамят, но бъдете сигурни, че това е трудна игра.

въпреки това, от пълни начинаещи до по-опитни уеб разработчици, играта е направена за всички нива. Ранните уроци са леки, а по-късните уроци могат да ви накарат да прегърнете екрана с кичури от вас.

Пълният изходен код на играта е достъпен безплатно в GitHub, така че можете да го изтеглите и пуснете локално, ако желаете.

Плюс webapp е многоезичен предлага 20 езика включително английски, френски, немски, италиански, китайски, японски и руски (плюс много други).

Ще призная това пренареждането на жабите няма да ви направи веднага господар на flexbox. Но тези уроци са предназначени запознай се със синтаксиса на flexbox така че можете да се чувствате по-удобно да работите в реални сценарии.

Ако сте a уеб разработчик на всяко ниво на умения определено трябва да проверите Flexbox Froggy. Това е напълно безплатно, доста забавно да се играе и изненадващо образователни.