Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-21

1 <a>#подборки</a>

2 <ul><li>10 сен 2021</li>

3 <li>0</li>

4 </ul>Последняя надежда для тех, кого уже тошнит от учебников и видеолекций.

5 Альберто Блинчиков для Skillbox Media

6 Востоковед, интересующийся IT. В прошлом редактор раздела "Системный блок" журнала "Fакел", автор журналов Computer Gaming World RE, Upgrade Special, руководитель веб-ресурсов компании 1С-Softclub.

7 Мы уже рассказывали об <a>играх</a>, в которых можно освоить новые языки программирования или просто убить время с пользой. На этот раз мы подобрали 15 игрушек для начинающих веб-программистов.

8 Дисклеймер:вы не станете профессиональным разработчиком, даже если пройдёте все уровни. Зато быстро разберётесь с базовыми технологиями и почувствуете себя увереннее.

9 <a>HTML и CSS</a>

10 <ol><li><a>Super Markup Man</a></li>

11 <li><a>Erase All Kittens</a></li>

12 <li><a>CSS Diner</a></li>

13 <li><a>Flexbox Defense</a></li>

14 <li><a>Flexbox Froggy</a></li>

15 <li><a>Grid Garden</a></li>

16 <li><a>Grid Critters</a></li>

17 <li><a>CSSBattle "LEARN"</a></li>

18 </ol>Скриншот: сайт Super Markup ManЧему научитесь:HTML и CSS.

19 Сколько стоит:102 рубля в Steam.

20 Язык:английский.

21 <a></a>Вы играете за Суперразметчика и CSS-копа, которые без устали таскают теги HTML и селекторы CSS. Нужно переставить блоки так, чтобы скопировать образец веб-страницы. Каждое изменение мгновенно отображается в рабочей области справа.

22 Скриншот: сайт Erase All KittensЧему научитесь:HTML и основам программирования.

23 Сколько стоит:бесплатно.

24 Язык:английский.

25 <a></a>Игра для детей от 8 лет. Управляйте котиком и преодолевайте препятствия, меняя HTML-разметку. Например, добавьте больше текста в тег , чтобы перебраться на другую сторону обрыва. Слоган платформы: "Учись кодить. Спаси котиков. Спаси вселенную".

26 Скриншот: сайт CSS DinerЧему научитесь:управлять селекторами в CSS.

27 Сколько стоит:бесплатно.

28 Язык:английский.

29 <a></a>Перед вами набор элементов HTML в виде столовых приборов и еды. Нужно написать правильный селектор, чтобы убрать предмет со стола. Например, plate apple убирает яблоко с тарелки.

30 Скриншот: сайт Flexbox DefenseЧему научитесь:позиционировать элементы с помощью CSS Flexbox.

31 Сколько стоит:бесплатно.

32 Язык:английский.

33 <a></a>Расставляйте боевые башни с помощью CSS Flexbox, чтобы враги не прошли по дороге. Или пропишите правильные свойства для justify-content и align-items - тогда ваши пушки смогут простреливать нужный угол.

34 Скриншот: сайт Flexbox FroggyЧему научитесь:CSS Flexbox.

35 Сколько стоит:бесплатно.

36 Язык:русский.

37 <a></a>Ещё одна онлайн-обучалка по Flexbox. Помогайте лягушатам добраться до нижней части пруда с помощью CSS. Например, пропишите правильное значение для свойства align-items. В процессе создания игры ни один лягушонок не пострадал :)

38 Скриншот: сайт Grid GardenЧему научитесь:CSS Grid.

39 Сколько стоит:бесплатно.

40 Язык:русский.

41 <a></a>Изучайте CSS Grid, выращивая морковь. Например, чтобы полить грядку, нужно вписать нужное значение для grid-area. На каждом уровне есть подсказки и описание свойств CSS Grid. Хорошая альтернатива поездке на дачу.

42 Скриншот: сайт Grid CrittersЧему научитесь:CSS Grid.

43 Сколько стоит:149 долларов за пожизненный доступ (так пишут на сайте).

44 Язык:английский.

45 <a></a>Вы на загадочной планете Grideros. Ваша миссия - с помощью мощных технологий Grid спасти инопланетных жителей от вымирания. Например, если не хватает места на планете, прописываете grid-template-rows и расширяете свои владения.

46 Скриншот: сайт CSSBattle "LEARN"Чему научитесь:CSS.

47 Сколько стоит:бесплатно.

48 Язык:английский.

49 <a></a>Интерактивный CSS-курс, подходит как для начинающих, так и для опытных разработчиков и даже экспертов. Нужно превратить квадрат в фигуру из задания. На первых уровнях - в круг или треугольник, а на последних - в гитару, гриб или звезду. После курса можно зачелленджить других игроков.

50 Скриншот: сайт CrunchzillaЧему научитесь:JavaScript, статистика.

51 Сколько стоит:бесплатно.

52 Язык:английский.

53 <a></a>Интерактивная обучалка программированию. Есть три уровня: для детей (Code Monster), подростков (Code Maven) и взрослых (Game Maven). Нужно редактировать код и писать его самому. Например, поменять цвета двух квадратов, переместить и объединить их. Возрастное разделение условное - скорее речь об уровне знаний.

54 Скриншот: сайт WarriorjsЧему научитесь:JavaScript.

55 Сколько стоит:бесплатно.

56 Язык:английский.

57 <a></a>Найдите легендарный меч в заброшенной башне, используя JavaScript. Чем выше поднимаетесь по башне, тем сложнее задания. Читайте описание справа, пишите функции и методы вроде warrior.walk(), warrior.think() → наслаждайтесь результатом.

58 Скриншот: сайт JS RobotЧему научитесь:JavaScript.

59 Сколько стоит:бесплатно.

60 Язык:английский.

61 <a></a>Нужно довести робота до флага. Он может пострадать от ловушек или просто разрядиться - тогда придётся начинать всё сначала. На каждом уровне объясняют основы JS: вы читаете инструкции, а потом пишете на вкладке Script примерно такой код:

62 function loop(robot) { robot.action = {type: 'move', amount: 40}; }.Хотя кодить необязательно - можно включить управление с клавиатуры и пройти JS Robot как обычную браузерную игру. На четвёртом уровне автор, видимо, устал писать инструкции, поэтому предлагает вообще забить на код и просто поиграть.

63 Скриншот: сайт Elevator SagaЧему научитесь:JavaScript.

64 Сколько стоит:бесплатно.

65 Язык:английский.

66 <a></a>Игра не для новичков. Нужно программировать движения лифта на JavaScript через методы вроде goToFloor() и выполнять всякие задания. Например, перевезти 15 человек за 60 секунд. Помимо правильности в решениях важна эффективность, поэтому вы параллельно прокачаете алгоритмическое мышление. Кстати, есть хороший хак - можно посмотреть, как решают задачи другие игроки.

67 Скриншот: сайт ScreepsЧему научитесь:JavaScript.

68 Сколько стоит:бесплатно.

69 Язык:английский.

70 <a></a>Многопользовательская онлайн-стратегия в реальном времени. Вы создаёте колонию, добываете ресурсы и строите юнитов. Юниты - это скрипты, отсюда и название игры - сокращённое scripted creeps. Вы программируете скрипсов, после чего они работают самостоятельно: строят здания, добывают ресурсы, ведут торговлю и завоёвывают новые территории.

71 Скриншот: сайт UntrustedЧему научитесь:JavaScript.

72 Сколько стоит:бесплатно.

73 Язык:английский.

74 <a></a>Помогите доктору Эвалу пройти ряд испытаний, решая задачки на JavaScript. Игра не для новичков. Нужно понять код в правом окне и изменить его таким образом, чтобы убрать препятствия на пути @ к прямоугольнику.

75 Скриншот: сайт Return true to winЧему научитесь:PHP.

76 Сколько стоит:бесплатно.

77 Язык:английский.

78 <a></a>Задания для тех, кто хочет прокачаться в PHP. Нужно переписать функцию, чтобы она вернула true. С каждым уровнем сложность растёт. Никаких объяснений и руководств.

79 Когда захватите все территории и посадите морковку, переходите на следующий уровень - в Skillbox. На курсе "<a>Профессия Веб-разработчик</a>" вы освоите несколько языков программирования, актуальные фреймворки и даже прокачаетесь в английском.

80 <a>Бесплатный курс по Python ➞Мини-курс для новичков и для опытных кодеров. 4 крутых проекта в портфолио, живое общение со спикером. Кликните и узнайте, чему можно научиться на курсе. Смотреть программу</a>