17 тыс подписчиков
5 сервисов для изучения CSS Grid и Flexbox разметки
Подборка сервисов, где можно изучить основы CSS Grid и Flexbox разметки.
Игры
tml.io/...ida — игра, в которой вы изучите свойство justify-content с помощью лягушонка Фогги и его друзей
tml.io/...w42 — игра, которая поможет понять как работает свойство flex: align-items, justify-content, flex-direction, align-self и order.
tml.io/...973 — игра, которая поможет изучить 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.
Онлайн-генераторы
Когда флексы и гриды будут изучены — самое время перейти к практике. Эти два сервиса могут помочь на первых порах генерировать сетки и делать это также нестандартно и интересно.
tml.io/...p0g — онлайн-генератор, позволяющий вам легко построить свою сетку без коддинга.
tml.io/...2qb — подборка интересных вариантов использования CSS-сетки в кодпене. Есть даже весьма сложные и необычные примеры.
Тренажёры Академии по HTML, CSS и JavaScript
Продолжить практиковаться можно с Котом Кексом. Разметите страницу, стилизуете её и напишите свой первый скрипт. Бесплатно.
Клик для начала тренировки — tml.io/...t3a
1 минута
23 сентября 2022
336 читали