Can't Unsee — гра на уважність до деталей інтерфейсу
Порівнюйте схожі інтерфейси, знаходьте вдаліший варіант і тренуйте увагу до відступів, типографіки, вирівнювання та іконок.
Про ресурс
Flexbox Froggy — навчальна гра Томаса Парка, автора платформи Codepip. На кожному з 24 рівнів потрібно розмістити кольорових жаб на відповідних листках латаття за допомогою CSS Flexbox. Гра розрахована на початківців; базове знайомство з CSS допоможе, але не є обов’язковим. Ви вводите CSS-декларації у вбудованому редакторі й одразу бачите, як змінюється розташування жаб. Коли всі збігаються зі своїми листками, відкривається перехід далі. Короткі інструкції пояснюють завдання, а візуальний результат допомагає пов’язати властивість із її впливом на макет. Вправи охоплюють justify-content, align-items, flex-direction, order, align-self, flex-wrap, flex-flow та align-content. Можна потренувати вирівнювання вздовж головної та поперечної осей, зміну напрямку, порядок елементів і перенесення на кілька рядків. Ці поняття корисні дизайнерам, які вивчають реалізацію вебмакетів. У налаштуваннях є українська та інші мови, режим для користувачів із порушенням сприйняття кольорів і три варіанти складності. Beginner залишає пояснення, Intermediate прибирає їх, а Expert також перемішує рівні. Після першого проходження можна повторити вправи без підказок і перевірити засвоєне. Оригінальна гра безкоштовна, відкривається без реєстрації та встановлення й зберігає прогрес локально у браузері. Codepip пропонує синхронізацію між пристроями через обліковий запис. Автори рекомендують актуальні Chrome, Edge, Firefox або Safari, бажано на комп’ютері чи планшеті. Для введення CSS зручніше користуватися клавіатурою.
Використання та ліцензія
Гра доступна безкоштовно. Код опубліковано за MIT: https://github.com/thomaspark/flexboxfroggy/blob/main/LICENSE. Зображення Flexbox Froggy: Thomas Park / Codepip, CC BY 3.0, https://creativecommons.org/licenses/by/3.0/. Джерело: https://github.com/thomaspark/flexboxfroggy. Для повторного використання зображень потрібно зберегти атрибуцію, посилання на ліцензію та зазначити зміни, якщо вони є; це не означає схвалення з боку автора.
Перед використанням перевірте актуальні умови на сайті автора.Схожі ресурси
Kern Type — гра для тренування кернінгу
Безкоштовна браузерна гра для розвитку відчуття міжлітерних відстаней: розставляйте літери, отримуйте оцінку та порівнюйте результат зі зразком.
Color — гра для тренування відчуття кольору
Браузерна гра з пошуку заданих кольорів на час. Тренує розпізнавання відтінків, насиченості та комплементарних, аналогових, тріадних і тетрадних поєднань.