Игра Super Markup Man

Игра Super Markup Manopen in new window похожа на обычный тренажер по HTML и CSS: на каждом уровне нужно сверстать разметку по макету. Отличие в том, что теги переносятся как в игре-платформере, с помощью специального персонажа. Слева игровое поле, а справа результат:

Ожидаемый результат отображается по Ctrl.

Всего в игре 50 уровней с HTML и 50 c CSS. CSS «редактируется» так же как и HTML:

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

Отдельно присутствует режим Free to play, в котором появляется случайный набор тегов HTML и CSS селекторов. Задания в этом режиме нет, вместо него результат можно экспортировать в html-файл. Тоже довольно странный режим.

При желании, по игре можно изучить некоторые основы HTML и CSS, но для этого есть более простые и быстрые способы. С другой стороны тут акцент смещен с обучения на игру. Присутствуют даже баги, чтобы их убрать, на них нужно прыгать как в Марио:

Относительный недостаток в том, что в игре почти нет объяснений. Что такое HTML, зачем он и как работает из неё не понять. С другой стороны на полноценный курс Super Markup Man и не претендует. На каждом уровне есть подсказки, но для полного понимания происходящего их явно недостаточно:

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

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

Отдельная сложность возникает из-за специфики верстки: в некоторых задачах различия макета от результата трудно заметить. В обычных тренажерах для таких случаев используется отдельный инструмент отображающий различия. Но этих случаев не много и каких-то задач связанных с размером элементов или отступов нет.

Игра из Steam это дополненная версия браузерной игрыopen in new window, кроме того есть мобильная версияopen in new window.