Навчіть себе CSS Flexbox з Foxbox Froggy Game

У минулому ми зачіпали flexbox і основи його роботи. Але фактично застосування flexbox до вашого робочого процесу може бути складним завданням, оскільки це настільки складне доповнення до специфікації CSS.

З Flexbox Froggy ви можете Дізнайтеся всі основи flexbox з веселої веб-гри за участю жаб і lilypads. Я знаю, що це звучить божевільно, але це серйозно.

Ви починаєте з рівня 1 і повільно прокладайте свій шлях через 24 різні рівні викладання багатьох аспектів орієнтації flexbox. Ранні рівні починаються легко, просячи вас вирівняти одну або дві жаби вздовж одного контейнера. Ранні уроки також містять поради та пропозиції, які допоможуть вам у дорозі.

Але як тільки ви отримаєте минулий урок, 10 речей дійсно нагріваються. Вам потрібно навчитися повторно-організувати елементи в контейнері, як організувати зміст вертикально, і як створити рівновіддалені відстані між різними рядами різного змісту.

Милі маленькі жаби можуть заманити вас, але будьте впевнені, що це жорстка гра.

Однак, від початківців до більш досвідчених веб-розробників, гра зроблена для всіх рівнів. Ранні уроки - це легкий вітер, а пізніші уроки можуть залишити вас згорбленими над екраном з грудями волосся на вашому боці.

Повну версію вихідного коду гри можна безкоштовно завантажити на GitHub, щоб ви могли завантажити та відтворити її локально, якщо хочете.

Плюс webapp є багатомовний пропонує 20 мов англійською, французькою, німецькою, італійською, китайською, японською та російською (плюс багато інших).

Я це визнаю перестановка жаб не відразу зробить вас господарем flexbox. Але ці уроки мають на меті ознайомитися з синтаксисом flexbox так що ви можете почувати себе більш комфортно, працюючи в реальних сценаріях.

Якщо ви веб-розробник будь-якого рівня кваліфікації Ви обов'язково повинні перевірити Flexbox Froggy. Це абсолютно безкоштовно, досить цікаво грати і дивно освітять.