Лучшие игры для изучения CSS

Игры для изучения CSS

Изучение CSS — это не самая увлекательная вещь, но этот процесс можно сделать более веселым. Одна из лучших вещей в обучении программированию — это то, что люди, которые хорошо умеют программировать, также имеют навыки создавать игры, которые учат других людей программировать. Конечно практика и игры не заменят изучения основ CSS, но они определенно помогут в изучении.

Игры для изучения CSS

В этой статье я собрал лучшие игры, которые позволят быстро изучить CSS. Все рассматриваемые игры на английском языке и я бы не сказал, что это минус. Таким образом вы сможете убить двух зайцев — играя изучить CSS и мучаясь выучить английский, а без базового английского как вы понимаете, нечего делать в программирование.

РЕКОМЕНДУЕМ:
Лучший редактор бинарных файлов для Windows

CSS Diner: CSS-селекторы

Выберите элементы, классы, идентификаторы … может быть, псевдоклассы? Что еще там? На самом деле, есть больше способов выбрать элементы, чем вы думаете, и CSS Diner может научить вас, как их использовать.

Игра для изучения CSS
Diner- игра для изучения CSS

Некоторые задачки могут быть немного запутанными, но это программирование — можно и погуглить.

Flexbox Zombies

Flexbox Zombies — это очень хорошо разработанная игра / курс, которая обещает обучить, использованию flexbox с интуитивно понятной, увлекательной игрой, которая в основном вращается вокруг вас, стреляя в зомби из оружия, которым управляет код flexbox. Он берет вас от самых базовых до продвинутых вещей на протяжении нескольких уровней, которые сопровождаются сюжетной линией, классной графикой и действием по убийству зомби — вы можете даже забыть, что изучаете CSS.

Игра для изучения CSS Flexbox Zombies
Flexbox Zombies — игра для изучения CSS

Flexbox Zombies — отличный повод для игры, которая действительно чему-то вас научит. Вот если бы все образование было таким.

Разработчик также предлагают платный игровой курс для CSS Grid под названием «Grid Critters».

Grid Garden

Лично я думаю, что flexbox — это хорошо, но он действительно подходит для одномерных (строк или столбцов) макетов, поэтому для больших проектов и шаблонов вы захотите обратиться к сетке (возможно, с некоторыми контейнерами flexbox внутри ячеек сетки).

Игра для изучения CSS Grid Garden
Grid Garden — игра для изучения CSS

Grid Garden — бесплатная игра, в которой вам нужно разбить сад, выращивать морковь и бороться сорняками, и сетка идеально подходит для этой задачи! Эта игра даст вам четкое представление о базовом позиционировании сетки, которое затем вы сможете применить к своим собственным макетам сайта.

Flexbox Defense

Flexbox Defense — это учебник по флексбоксу, замаскированный под игру «Защита башни», который поможет вам вспомнить, что вы помните свое оправдание и выровняйте себя или умрете. Но вы можете просто попробовать еще раз.

Игра для изучения CSS Flexbox Defense
Flexbox Defense — игра для изучения CSS

Если вы никогда не были фанатом тех игр, которые принимают только один правильный ответ, вам понравится этот, так как он позволяет вам расположить башни там, где вам нравится, и преуспеть или потерпеть неудачу самостоятельно.

Flexbox Froggy

Вероятно, вы можете получить полноценный игровой день, просто пройдясь по существующим учебным пособиям по Flexbox, но, вероятно, лучше распределить их на несколько дней или недель, просто чтобы убедиться, что у вас будет много освежителей памяти.

Игра для изучения CSS Flexbox Froggy
Flexbox Froggy — игра для изучения CSS

Flexbox Froggy идеально подходит для этого — он не поднимает вас с нуля, но если вы когда-нибудь забудете команды, вы можете пройти через эту игру за несколько минут, чтобы вернуться к скорости.

Игры CodePip

Если вы проверили Grid Garden и Flexbox Froggy, вы уже видели несколько примеров работы CodePip. Это всего лишь две бесплатные игры, которые они предлагают. Если вы зарегистрируете профессиональный аккаунт на их сайте, у них также есть игры, которые варьируются от общего обзора CSS до JavaScript.

Игра для изучения CSS CodePip Games
CodePip Games — игра для изучения CSS

Помогут ли эти игры в изучении CSS?

Пройдя через эти игры, вы сможете достаточно хорошо изучить некоторые базовые понятия, особенно если вы хотите освоить flexbox. В конечном счете, игры могут только научить вас, какие слова печатать. Вам придется применять их на практике, если вы действительно хотите понять, как их использовать.

РЕКОМЕНДУЕМ:
Как написать безопасный код на JS

Получите хороший редактор кода и некоторые идеи, которые вы хотите реализовать, и начните бездельничать!

Понравилась статья? Поделиться с друзьями:
Добавить комментарий