CSS Diner — это интерактивная браузерная игра, созданная для практического изучения CSS-селекторов (представлена в виде анимированной «обеденной тарелки»), где необходимо написать правильный CSS-код, чтобы выбрать определенные элементы на столе. В отличие от скучных лекций, геймификация заставляет игрока прогрессировать от простых селекторов (элемент, класс, id) к сложным псевдоклассам (:nth-child, :first-of-type) и комбинаторам (+, ~, >).

💼Ценность действий:

🟠Геймификация основ веб-верстки (Front-end Fundamentals): Игра снижает порог входа в программирование. Студенты не «зубрят» синтаксис, а пытаются «накормить» питомца, решив головоломку. Это идеально подходит для подростков, начинающих изучать HTML/CSS (курсы 7-9 классов).
🟠Незаменимый тренажер по работе с DOM-деревом: Селекторы — это язык, на котором CSS общается с HTML. Игра наглядно показывает разницу между дочерними, соседними элементами и потомками, что трудно понять по статичным схемам.
🟠Автоматизированная проверка (Без участия учителя): Ученик вводит команду (plate:first-child), и система мгновенно говорит «Верно/Неверно». Учитель может видеть только прогресс (сколько уровней пройдено), что позволяет дифференцировать нагрузку.
🟠Изучение нетипичных селекторов (Power-ups): Обычные курсы редко углубляются в :only-child, :last-of-type или :empty. CSS Diner заставляет пройти через них, доказывая, что они нужны для конкретных (и частых) кейсов верстки.

📂Ключевые функции:
1️⃣Пошаговое усложнение (32 уровня): Начинается с тарелок (<plate>) и заканчивается сложными формулами типа div:not(.happy) span:first-child.
2️⃣Визуальный интерфейс (Режим «Верстальщик»): Слева — код псевдо-страницы (HTML), справа — визуализация этой страницы в виде стола с едой. Сверху — поле ввода селектора.
3️⃣Подсказки и Справка (Cheat Sheet): На каждом уровне справа висит шпаргалка по всем возможным селекторам, что позволяет играть даже без интернета.
4️⃣Инспектор кода (Hover state): При наведении мыши на тарелку или еду в визуальной части, в HTML-коде подсвечивается соответствующая строка. Это учит связывать визуал с разметкой.
5️⃣Пропуск уровней (Skip): Если ученик застрял на сложном селекторе (например, ~ или nth-last-child), можно набрать номер уровня в консоли (например, 15), чтобы перейти дальше.

💰Свободный доступ:
🔵Полностью бесплатно. Проект с открытым исходным кодом (github.com/flukeout/css-diner). Не требует регистрации, работает на любом устройстве (даже на телефоне в лендинге, хотя управление сложнее).

Это реально может помочь?
❤️- да ⛔️- нет

🇿🇼 Канал в: 💬VK 💬TG 🧩 MAX