filmov
tv
Прохождение Flexbox Froggy, все 24 уровня с пояснениями | Практика Flexbox CSS

Показать описание
Шпаргалка по прохождению Flexbox Froggy:
Подписывайся на альтернативные каналы:
Рассмотрим такую популярную обучающую игру по Flexbox CSS, как Flexbox Froggy.
В ней нам предстоит использовать флексбокс-свойства, чтобы расставить разноцветных лягушек по своим местам.
Данный тренажер содержит 24 уровня от простого к более сложному.
Давайте пройдем их вместе с вами, а я постараюсь объяснить все принимаемые мной решения.
0:00 - Об игре Flexbox Froggy
0:33 - 1. Знакомство с justify-content, смещение к концу главной оси
1:17 - 2. Выравнивание по центру главной оси
1:42 - 3. Значение space-around, равномерное распределение с отступами
2:04 - 4. Значение space-between, равномерное распределение с прижатием
2:21 - 5. Свойство align-items, выравнвиание по поперечной оси
3:08 - 6. Выравнивание элемента по центру
3:38 - 7. Выравнивание элементов по обеим осям
4:06 - 8. Свойство flex-direction, вращение главной оси
4:42 - 9. Вертикальное положение главной оси
5:11 - 10. Использование flex-direction и justify-content по горизонтали
5:53 - 11. Использование flex-direction и justify-content по вертикали
6:24 - 12. Разворот по вертикали с равномерным распределением
7:01 - 13. Закрепление изученных свойство
7:44 - 14. Свойство order, порядок элементов
8:37 - 15. Отрицательный порядок элемента
8:54 - 16. Свойство align-self, выравнивание элемента по поперечной оси
9:32 - 17. Свойства order и align-self
10:06 - 18. Свойства flex-wrap, многострочный макет
10:40 - 19. Многострочный макет по вертикали
11:07 - 20. Свойство flex-flow, направление потока
11:33 - 21. Свойство align-content, выравнивание рядов
12:10 - 22. Прижатие рядов в концу поперечной оси
12:30 - 23. Вертикальный макет с выравниванием рядов по центру
13:10 - 24. Финальное испытание на знание свойств Flexbox
14:27 - Послесловие
#FlexboxFroggy
Если тебе интересна данная тематика, подпишись на канал!
Для меня это также станет дополнительным стимулом продолжать свою работу.
Здесь вы найдете подробные интерактивные курсы по веб-разработке.
Подписывайся на альтернативные каналы:
Рассмотрим такую популярную обучающую игру по Flexbox CSS, как Flexbox Froggy.
В ней нам предстоит использовать флексбокс-свойства, чтобы расставить разноцветных лягушек по своим местам.
Данный тренажер содержит 24 уровня от простого к более сложному.
Давайте пройдем их вместе с вами, а я постараюсь объяснить все принимаемые мной решения.
0:00 - Об игре Flexbox Froggy
0:33 - 1. Знакомство с justify-content, смещение к концу главной оси
1:17 - 2. Выравнивание по центру главной оси
1:42 - 3. Значение space-around, равномерное распределение с отступами
2:04 - 4. Значение space-between, равномерное распределение с прижатием
2:21 - 5. Свойство align-items, выравнвиание по поперечной оси
3:08 - 6. Выравнивание элемента по центру
3:38 - 7. Выравнивание элементов по обеим осям
4:06 - 8. Свойство flex-direction, вращение главной оси
4:42 - 9. Вертикальное положение главной оси
5:11 - 10. Использование flex-direction и justify-content по горизонтали
5:53 - 11. Использование flex-direction и justify-content по вертикали
6:24 - 12. Разворот по вертикали с равномерным распределением
7:01 - 13. Закрепление изученных свойство
7:44 - 14. Свойство order, порядок элементов
8:37 - 15. Отрицательный порядок элемента
8:54 - 16. Свойство align-self, выравнивание элемента по поперечной оси
9:32 - 17. Свойства order и align-self
10:06 - 18. Свойства flex-wrap, многострочный макет
10:40 - 19. Многострочный макет по вертикали
11:07 - 20. Свойство flex-flow, направление потока
11:33 - 21. Свойство align-content, выравнивание рядов
12:10 - 22. Прижатие рядов в концу поперечной оси
12:30 - 23. Вертикальный макет с выравниванием рядов по центру
13:10 - 24. Финальное испытание на знание свойств Flexbox
14:27 - Послесловие
#FlexboxFroggy
Если тебе интересна данная тематика, подпишись на канал!
Для меня это также станет дополнительным стимулом продолжать свою работу.
Здесь вы найдете подробные интерактивные курсы по веб-разработке.
Комментарии