Изучаем CSS Flexbox прямо в игре

Весна уже вовсю идёт, но лягушата не могут добраться до своих кувшинок. Помогите рассадить их по местам с помощью CSS-кода:

https://flexboxfroggy.com/#ru

В игре доступно 24 уровня, где вы постепенно изучите свойства justify-content, align-items, flex-direction, order, align-self, flex-wrap, flex-flow и align-content.

#веб #css #фронтенд

Готовы к дачному сезону?

Попробуйте вырастить морковь прямо в браузере. Вам предстоит с помощью свойств CSS Grid Layout поливать грядки с морковкой, а также избавляться от назойливых сорняков.

В процессе игры вы изучите свойства grid: 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/#ru

#css #веб #фронтенд

​Браузерные игры, которые помогут легко изучить CSS

1. Flexbox Froggy — с помощью подсказок нужно помочь группе лягушек добраться до их кувшинок. На каждом уровне нужно выбрать какое свойство CSS использовать.

2. CSS Diner — в игре даётся таблица блюд, HTML форма и таблица с элементами. Игроку нужно подготовиться к ужину и разместить все предметы. Эта игра отлично подойдёт для изучения CSS селекторов.

3. Flexbox Defense — классическая игра жанра Tower Defense. Вам нужно отбить свою базу от врагов, расставляя защитные башни с помощью знаний в CSS.

#css