Изучение CSS — это не самая увлекательная вещь, но этот процесс можно сделать более веселым. Одна из лучших вещей в обучении программированию — это то, что люди, которые хорошо умеют программировать, также имеют навыки создавать игры, которые учат других людей программировать. Конечно практика и игры не заменят изучения основ CSS, но они определенно помогут в изучении.
Игры для изучения CSS
В этой статье я собрал лучшие игры, которые позволят быстро изучить CSS. Все рассматриваемые игры на английском языке и я бы не сказал, что это минус. Таким образом вы сможете убить двух зайцев — играя изучить CSS и мучаясь выучить английский, а без базового английского как вы понимаете, нечего делать в программирование.
РЕКОМЕНДУЕМ:
Лучший редактор бинарных файлов для Windows
CSS Diner: CSS-селекторы
Выберите элементы, классы, идентификаторы … может быть, псевдоклассы? Что еще там? На самом деле, есть больше способов выбрать элементы, чем вы думаете, и CSS Diner может научить вас, как их использовать.
Некоторые задачки могут быть немного запутанными, но это программирование — можно и погуглить.
Flexbox Zombies
Flexbox Zombies — это очень хорошо разработанная игра / курс, которая обещает обучить, использованию flexbox с интуитивно понятной, увлекательной игрой, которая в основном вращается вокруг вас, стреляя в зомби из оружия, которым управляет код flexbox. Он берет вас от самых базовых до продвинутых вещей на протяжении нескольких уровней, которые сопровождаются сюжетной линией, классной графикой и действием по убийству зомби — вы можете даже забыть, что изучаете CSS.
Flexbox Zombies — отличный повод для игры, которая действительно чему-то вас научит. Вот если бы все образование было таким.
Разработчик также предлагают платный игровой курс для CSS Grid под названием «Grid Critters».
Grid Garden
Лично я думаю, что flexbox — это хорошо, но он действительно подходит для одномерных (строк или столбцов) макетов, поэтому для больших проектов и шаблонов вы захотите обратиться к сетке (возможно, с некоторыми контейнерами flexbox внутри ячеек сетки).
Grid Garden — бесплатная игра, в которой вам нужно разбить сад, выращивать морковь и бороться сорняками, и сетка идеально подходит для этой задачи! Эта игра даст вам четкое представление о базовом позиционировании сетки, которое затем вы сможете применить к своим собственным макетам сайта.
Flexbox Defense
Flexbox Defense — это учебник по флексбоксу, замаскированный под игру «Защита башни», который поможет вам вспомнить, что вы помните свое оправдание и выровняйте себя или умрете. Но вы можете просто попробовать еще раз.
Если вы никогда не были фанатом тех игр, которые принимают только один правильный ответ, вам понравится этот, так как он позволяет вам расположить башни там, где вам нравится, и преуспеть или потерпеть неудачу самостоятельно.
Flexbox Froggy
Вероятно, вы можете получить полноценный игровой день, просто пройдясь по существующим учебным пособиям по Flexbox, но, вероятно, лучше распределить их на несколько дней или недель, просто чтобы убедиться, что у вас будет много освежителей памяти.
Flexbox Froggy идеально подходит для этого — он не поднимает вас с нуля, но если вы когда-нибудь забудете команды, вы можете пройти через эту игру за несколько минут, чтобы вернуться к скорости.
Игры CodePip
Если вы проверили Grid Garden и Flexbox Froggy, вы уже видели несколько примеров работы CodePip. Это всего лишь две бесплатные игры, которые они предлагают. Если вы зарегистрируете профессиональный аккаунт на их сайте, у них также есть игры, которые варьируются от общего обзора CSS до JavaScript.
Помогут ли эти игры в изучении CSS?
Пройдя через эти игры, вы сможете достаточно хорошо изучить некоторые базовые понятия, особенно если вы хотите освоить flexbox. В конечном счете, игры могут только научить вас, какие слова печатать. Вам придется применять их на практике, если вы действительно хотите понять, как их использовать.
РЕКОМЕНДУЕМ:
Как написать безопасный код на JS
Получите хороший редактор кода и некоторые идеи, которые вы хотите реализовать, и начните бездельничать!