Css diner как играть

Css diner как играть

You’re about to learn CSS Selectors! Selectors are how you pick which element to apply styles to.

Exhibit 1 — A CSS Rule

Here, the «p» is the selector (selects all

elements) and applies the margin-bottom style.

To play, type in a CSS selector in the editor below to select the correct items on the table.If you get it right, you’ll advance to the next level.

Hover over the items on the table to see their HTML markup.

Get help with selectors on the right! →

Blog

CSS Diner is a very nice place to let you learn CSS very fast. Simply just complete all 32 challenges and make sure you understand the intuition. If you get stuck, read below and again make sure you understand the intuition.

Generally we solve/read the selectors backwards.

Level 1

plate

Intuition: To select all elements of a type, simply just specify the type.

Level 2

bento

Intuition: To select all elements of a type, simply just specify the type.

Level 3

#fancy

Intuition: Use an ID selector. Either use [id=”fancy”] or the shortcut for id, “#”.

Level 4

plate apple

Intuition: A Descadent Selector lets you select children elements of another element.

Level 5

#fancy pickle

Intuition: We want a pickle within a parent of This is a combination of Descedant and ID Selectors.

Level 6

.small

Intuition: Class selector. The “.small” let us select all elements with >

Level 7

orange.small

Intuition: Combination of the Class Selector. We choose every orange with a Remember we don’t need to write out class, but simply just use the “.” (dot).

Level 8

bento orange.small

Intuition: Now we use, what we’ve learnt. First we want a bento element with an orange child, that holds the class “small”.

Level 9

bento, plate

Intuition: Comma Combinator. Use a comma between your selectors to combine them.

Level 10

Intuition: Use the asterisk, “*”, to select everything.

Level 11

plate *

Intuition: Combine the universal selector.

Level 12

plate + apple

Intuition: We can use the Adjacent Sibling Selector to choose all apples next to a plate.

Level 13

bento ~ pickle

Intuition: Use the General Slibling Selector to get all pickle elements next to a bento.

Level 14

plate > apple

Intuition: We use the Child Selector to chose the apple that are a child of a plate.

Level 15

orange:first-child

Intuition: To select the first child of a group of children, use the First Child Pseudo-selector.

Level 16

plate > :only-child

Intuition: Apply the Only Child Pseudo-Selector, “:only-child”, to make sure we only look at the plates that have one child. Then we use the “plate >” to select all children to a plate.

Level 17

.small:last-child

Intuition: We want to look at only the last children elements, hence we use the Last Child Pseudo-Selector, “:last-child”. The elements is children of the “small” class. Pro Tip: Remember we use the “.” (dot) for class.

Level 18

:nth-child(3)

Intuition: We use the Nth Child Pseudo-Selector, “nth-child(3)” and simply just specify, that we want to find an element, that is the third child element of another element. If we had more elements, with 3 or more children, we could use “plate:nth-child(3)”.

Level 19

bento:nth-last-child(3)

Intuition: We select the 3rd child from the end of elements with the Nth Last Child Selector, “:nth-last-child(3)”. Afterwards we tell that we only want to look at “bento” elements.

Level 20

apple:first-of-type

Intuition: We use the First of Type Selector, “:first-of-type” selector and then specify that we want to look at apples.

Level 21

:nth-of-type(even)

Intuition: Using the Nth of Type Selector, “:nth-of-type(even)” we select all even elements, in our case plates are the only elements.

Level 22

:nth-of-type(2n+3)

Intuition: We want to select every second element starting from (and including) the third instance. We could make a it even more specific, if we had different elements with “plate:nth-of-type(2n+3)”.

Level 23

apple:only-of-type

Intuition: With the Only of Type Selector, “:only-of-type”, we select the element apple, if its the only one of it’s type within their parent element. You might want to narrow the selection with “plate apple:only-of-type”.

Level 24

.small:last-of-type

Intuition: Using the Last of Type Selector we find the last element of the class small.

Level 25

bento:empty

Intuition: We use the Empty Selector, “:empty” to find all empty bento’s.

Level 26

apple:not(.small)

Intuition: Now it’s time for the Negation Pseudo-class, “:not”. Here we select all apples, that don’t hold the class “small”.

Level 27

Intuition: We appy the Attribute selector and select all elements with a “for=” attribute.

Level 28

plate[for]

Intuition: Again we use the attribute selector and specify we want to select all plates with a “for=” attribute.

Level 29

[for="Vitaly"]

Intuition: To select Vitaly’s meal we apply the Attribute Value Selector and search for the specific for value, “Vitaly”.

Level 30

[for^="Sa"]

Intuition: Apply the Attribute Starts With Selector and specify the characters, “Sa”.

Level 31

[for$="ato"]

Intuition: Similar as Level 30 we can use the Attribute Ends With Selector and search for the attribute value of for that ends with “ato”.

Level 32

[for*="obb"]

Intuition: Apply the Attribute Wildcard Selector for the for attribute with the value “obb”.

Please Share This Share this content

• Opens in a new window
• Opens in a new window
• Opens in a new window
• Opens in a new window
• Opens in a new window
• Opens in a new window
• Opens in a new window
• Opens in a new window
• Opens in a new window
• Opens in a new window
• Opens in a new window

You Might Also Like

How to use RegEx in Power Automate

June 6, 2022

How to Extract Data With RegEx in UiPath

August 6, 2022

Веб-программирование без скуки: 15 игр для салаг и матёрых

Глоток свежего воздуха для тех, кому надоели учебники и нудные видео-лекции. Проводите свободное время за полезными игрушками! Пусть профи вы с ними не станете, зато отлично освоите базу.

Раздел 1: HTML и CSS

Super Markup Man

• 102 руб. в Steam
• на английском

Управляйте Суперразметчиком и CSS-полицейским, которые перетаскивают теги и селекторы. Располагайте блоки так, чтобы в результате получить точную копию заданной веб-страницы. Все изменения мгновенно показываются в отдельной области окна.

Flexbox Froggy

• бесплатно
• на русском

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

Erase All Kittens

• бесплатно
• на английском

Возраст: 8+. Управляйте котенком и изменяйте HTML-разметку, проходя через препятствия. К примеру, проложить мост над обрывом можно, вставив побольше текста между тегами

CSS Diner

• бесплатно
• на английском

Вы увидите на экране группу HTML-элементов, изображенных в виде продуктов и посуды. Чтобы убрать любой из предметов, нужно написать подходящий селектор.

Flexbox Defense

• бесплатно
• на английском

Используйте CSS Flexboх для расстановки боевых башен и защиты дороги от врагов. Также для обороны вам очень пригодятся пушки, управлять которыми вы будете с помощью свойств.

Grid Garden

• бесплатно
• на русском

Учите CSS Grid, выращивая морковь. Так, для полива грядки укажите соответствующее значение свойства grid-area. Прекрасная альтернатива реального дачного труда, не так ли? А еще здесь есть подсказки!

Grid Critters

• $149 за вечную подписку
• на английском

Оказавшись на таинственной планете Grideros, спасите местных обитателей от вымирания.

CSSBattle «LEARN»

• бесплатно
• на английском

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

Раздел 2: JavaScript

Crunchzilla

• бесплатно
• на английском

Интерактивное обучение программированию трех уровней сложности. Вам придется не только редактировать код, но и писать программы самостоятельно. К примеру, игрокам нужно изменять цвета фигур, перемещать их и объединять.

Warriorjs

• бесплатно
• на английском

Обыщите заброшенный замок в поисках легендарного меча. С каждым этажом здания задания становятся все более сложными. Читайте описание с правой стороны, прописывайте функции с методами и наслаждайтесь полученным результатом.

JS Robot

• бесплатно
• на английском

Проведите робота через ловушки до финишного флага. Но помните, что не только препятствия могут отбросить вас назад: если робот разрядится, тоже придется начинать по новой. На всех уровнях идет качественное объяснение основ языка JS. Сперва вы будете читать инструкции, и только после этого писать код. Тем не менее, в этой игре кодить не обязательно: можно выбрать управление с помощью клавиатуры, чтобы пройти ее как обыкновенную браузерную “бродилку”.

Elevator Saga

• бесплатно
• на английском

Игрушка для тех, кто уже имеет определенный опыт в разработке. Программируйте на JS движения лифта и выполняйте поставленные задания. К примеру, перевезите 10 человек за 50 секунд. Кроме правильного решения здесь будет важна эффективность, т.к. что заодно вы неплохо натренируете алгоритмическое мышление. К слову, есть отличный хак — в этой игре вы можете посмотреть на решения других геймеров.

Screeps

• бесплатно
• на английском

Жанр — многопользовательская стратегия. Игроки в онлайн-режиме создают колонии, стремятся добыть как можно больше ресурсов и занимаются постройкой юнитов,которые представляют собой скрипты. Уже запрограммированные скрипсы самостоятельно возводят здания, запасаются ресурсами, торгуют и захватывают новые земли.

Untrusted

• бесплатно
• на английском

Играя за доктора Эвала, помогите ему справится с различными испытаниями. Для этого вам придется решать много задач, связанных со знанием JavaScript. Сразу предупредим, это развлечение для более опытных программистов. Изменяйте код в окне справа, чтобы устранить препятствия, заграждающие дорогу к прямоугольнику.

Раздел 3: PHP

Return true to win

• бесплатно
• на английском

Переписывайте функции так, чтобы они возвратили true. По мере прохождения уровней сложность будет расти. Никаких подсказок и руководств не ждите — думать придется самостоятельно.

Больше интересных новостей

Изучение Git на реальных примерах

Какие вопросы задают на собеседованиях: Tesla, Apple, Google?

Самые интересные TED-видео о Data Science

Легенды в IT: подборка лучших и влиятельных программистов мира

CSS Game: 8 игр для увлекательного изучения CSS

Должен признаться, мне сложно что-то запоминать. Особенно, если речь идет о CSS. Например, макет Flexbox. Свойство justify-content гибкого контейнера может иметь более 12 различных значений, многие из которых можно комбинировать с ключевыми словами safe или unsafe. Чтобы прочитать полное руководство по flexbox по трюкам CSS, вам нужно прокрутить страницу с двумя столбцами высотой более 20 тыс. Пикселей – и хотя заголовок подразумевает это, они не охватывают все.

Я недавно наткнулся на игру в жанре Tower Defense, в которой учат flexbox, что на самом деле …
Погодите, а что?
Да, оказалось, что существует довольно много игр, помогающих обучать CSS. Я собрал несколько бесплатных игр с CSS, которые были мне полезны и, возможно, помогут вам снова развлечься с CSS!

1. Защита Flexbox

Я как раз упоминал об этой игре. Он охватывает гибкие свойства align-items , justify-content , flex-direction , align-self и order в 12 различных уровней. Особенно последние 4 уровня действительно забавны и немного сложны.

• Игра: http://www.flexboxdefense.com
• Вклад: https://github.com/channingallen/tower-defense
• Создатель: Ченнинг Аллен

2. Flexbox Froggy

Эта игра также о Flexbox и охватывает еще более гибкое свойство: align-items , justify-content , align-content , flex-direction , align-self , flex-wrap , flex-flow и order в 24 различных уровнях. Оставьте комментарий, если вы решили последний уровень ?.

• Игра: https://flexboxfroggy.com
• Вклад: https://github.com/thomaspark/flexboxfroggy
• Создатель: Codepip

3. Садовая сетка

На 28 различных уровнях вы можете изучить CSS Grid Layout. Она включает в себя следующие свойства сетки: grid-column-start , grid-column-end , grid-column , grid-row-start , grid-row-end , grid-row , grid-area , order , grid-template-columns , grid-template-rows и grid-template .

• Игра: https://cssgridgarden.com
• Взносы: https://github.com/thomaspark/gridgarden
• Создатель: Codepip

4. CSS Diner

Это небольшая игра про все виды селекторов CSS. Попробуйте освоить все 32 уровня, чтобы называть себя экспертом по CSS-селекторам ?.

• Игра: http://flukeout.github.io
• Вклад: https://github.com/flukeout/css-diner
• Создатель: Люк Пачольски

5. Unfold

Это не совсем игра, это скорее интерактивная презентация CSS 3D-преобразований. Вы можете подумать, что это скучно, но поверьте мне: анимация, и вы не подумаете, что это возможно с чистым CSS.

• Игра: https://rupl.github.io/unfold
• Вклады: https://github.com/rupl/unfold
• Создатель: Крис Руппел

6. Дорожная карта

Для решения этой маленькой игры, созданной только с использованием CSS и HTML, требуются навыки и скорость. Он не учит напрямую CSS, но изучение исходного кода многому учит clip-path , transform и animation с помощью @keyframes !
Напишите комментарий, сколько попыток нужно было для победы – мне понадобилось 8! ?

• Игра: http://victordarras.fr/cssgame
• Создатель: Виктор Даррас

7. Карнавал

У вас всего 8 секунд, чтобы поразить все цели! Маленькая симпатичная CSS-игра с флажками и CSS-анимацией.

• Игра: https://codepen.io/una/pen/NxZaNr
• Creator: Una Kravets

8. Крестики-нолики.

И наконец классика. Tic-Tac-Toe как игра на чистом CSS с 2 уровнями сложности, также с использованием флажков и анимации CSS.

• Игра: https://codepen.io/alvaromontoro/pen/BexWOw
• Создатель: Альваро Монторо

Бонус

А вот и бонусная часть с рекомендациями из комментариев:

9. Зомби Flexbox

Это обучающий курс, основанный на сюжетной линии, где вы научитесь использовать Flexbox и арбалет для охоты на зомби. Требуется регистрация.

• Игра: https://mastery.games/p/flexbox-zombies
• Цена: $ 179 (но бесплатно на момент написания этой статьи)
• Создатель: Дэйв Геддес

10. Сервисные работники (Service Workies)

В этом приключении вы узнаете, как избежать ловушек PWA. Вы повысите свои навыки и преуспеете с сервисными работниками. Возможно, даже убить диких зверей, которые веками преследовали бедных деревенских рабочих! Требуется регистрация.

• Игра: https://serviceworkies.com
• Цена: $ 179 (но бесплатно на момент написания этой статьи)
• Создатель: Дэйв Геддес

11. Grid Critters

Ваш путь к освоению CSS Grid начинается на загадочной планете Гридерос. Ваша миссия – использовать мощный инструмент сетки вашего корабля, чтобы спасти инопланетных существ от вымирания. Требуется регистрация.

• Игра: https://gridcritters.com
• Цена: 179 долларов
• Создатель: Дэйв Геддес

Подведение итогов

Неважно, новичок вы или эксперт – надеюсь, вам понравилось играть в некоторые игры и в то же время что-то узнавать о CSS! В частности, на Codepen вы можете найти множество потрясающих игр, созданных людьми с использованием HTML и CSS.

Если вы знаете другие отличные обучающие игры по CSS, сообщите об этом в комментариях ниже.

Первоначально опубликовано: 24 октября 2019 г. на Medium