Недавно мы запустили курс бесплатных видеоуроков по веб-программированию на HTML и CSS на нашем YouTube-канале. По этому случаю делимся подборкой игр, которые помогут натренировать навыки верстки и закрепят знания HTML и CSS.
Для справки: HTML — это язык гипертекстовой разметки, необходимый для того, чтобы браузер понимал, как нужно отображать содержимое веб-сайта. Таблица стилей CSS — это язык описания внешнего вида веб-страницы. HTML и CSS составляют основу любой веб-страницы и не сложны в освоении.
1. Hex Invaders
Hex Invaders — это HTML-игра для детей , благодаря которой ребенок может запомнить обозначения цветов. Сюжет игры простой: нужно с помощью пушки уничтожить всех пришельцев до того, как они доберутся до земли. Игрок должен угадать, какой цвет спрятан в шестизначном шифре (например, # 008000), и, следовательно, по какому пришельцу нужно выстрелить, чтобы убрать сразу троих. По мере прохождения уровней коды цветов откладываются в голове и становится понятен принцип их шифрования.
2. Flexbox Zombies (сейчас при регистрации можно играть бесплатно)
Эта игра создана для обучения CSS Flexbox — современной технологии, которая позволяет правильно разместить элементы на веб-странице и создавать сложные макеты. Сюжет: герой сражается с зомби при помощи арбалета. Для управления арбалетом используется код Flexbox. Всего в игре 12 уровней, каждый из которых сопровождается инструкциями и раскрывает новые элементы сюжета. Диалоги и инструкции написаны на английском языке.
3. Flexbox Defence
Еще одна игра, которая обучает CSS Flexbox. Она создана в жанре Tower Defence: по сюжету нужно возводить башни, чтобы одержать победу над противником. Крепости строятся с помощью CSS-кода, каждый уровень сопровождается инструкциями на английском языке.
4. Flexbox Froggy
Эта игра тоже обучает CSS Flexbox, но доступна на русском языке. Игроку предстоит изучить свойства позиционирования объектов на веб-странице. Сюжет игры: с помощью текстового кода нужно перенести лягушонка Фрогги на соответствующий лист кувшинки. Всего в игре 24 уровня, и на каждом лягушат становится все больше.
Подробнее эту игру и несколько следующих мы разобрали в видео.
5. Grid Garden
Grid Garden схож с Flexbox Froggy и интерфейсом, и структурой. Однако, эта игра направлена на изучение CSS Grid — технологии для быстрого создания шаблонов с помощью системы сеток. Игрок изучает свойства CSS Grid, которые помогают ему выращивать урожай, поливать морковь и избавляться от сорняков. В игре 28 уровней, есть инструкции на русском языке.
6. CSS Diner
В этой игре можно как изучить селекторы CSS, так и тренировать навыки HTML-верстки. Сюжет: игроку нужно поместить на столе посуду и продукты. Инструкции даны на английском языке. Селекторы усложняются по мере продвижения, всего в игре 32 уровня.
7. Pixactly
Эта небольшая игра-тренажер позволяет проверить, насколько хорошо вы представляете размеры объекта. В игре вам даются параметры ширины и высоты в пикселях, ваша задача — нарисовать по ним прямоугольник. Чем ближе фигура получается к заданным цифрам, тем больше баллов вы получаете. Игра поможет развить глазомер, что очень важно в верстке.
Если вам нужен наставник в изучении HTML, CSS и JavaScript, загляните в Школу программирования для детей “Пиксель”.
Подписывайтесь на наш канал! Мы публикуем статьи об образовании и досуге детей, рассказываем, как открыть детям мир IT-технологий.
Будет интересно:
• Программирование на Scratch для детей от 8 лет (Скретч) — бесплатные видеоуроки
• Программирование на Python в Minecraft для детей от 9 лет — бесплатные видеоуроки
