CSS Diner — это интерактивная браузерная игра, созданная для практического изучения CSS...
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 уровня): Начинается с тарелок () и заканчивается сложными формулами типа 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