Онлайн заработок, создание и монетизация сайтов, веб-разработка, SEO и SMO продвижение, фриланс, партнерки, полезные сервисы вебмастерам, блоггинг.

Главная » Web разработка » Верстка » 20+ сервисов для изучения CSS Grid и Flexbox разметки

Изучаем CSS Grid Layout и Flexbox на практике (20+ сервисов и полезных материалов)

В последнее время при работе с WordPress шаблонами мне все чаще попадается HTML разметка, где вместо олдскульных DIV блоков используется Grid и Flexbox. Я, признаться, все еще откладываю детальное изучения этих подходов из-за отсутствие свободного времени (скорее лени), но постепенно приходится вникать. Ранее в блоге была статья про основы CSS Grid с реальными примерами, а сегодня хочу запостить перевод подборки полезных сервисов для изучения этих двух веб-технологий.

CSS Grid Layout и Flexbox

Если вы совсем уж новичок в данной сфере для начала советую ознакомиться с бесплатным курсом обучения верстке с нуля под названием Interneting is Hard. Проект на английском, но реально очень толковый и наглядный. Хотя, думаю, реально найти какие-то отечественные альтернативы.

А теперь непосредственно к нашей теме. Общая особенность большинства ресурсов и материалов, расположенных ниже, в том, что это “Fun places to learn” (как выражается автор оригинальной статьи). То есть они представляют из себя не сухую методичку с текстовой теорией, а являются плюс-минус интерактивными сервисами с элементами игры, онлайн-конструкторами и видео.

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

Сервисы для обучения Grid Layout

Игры

Grid Garden

Grid Garden

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

CSS Diner

CSS Diner

В принципе, здесь вы можете изучить не только Flexbox/Grid, но и потренироваться с разными другими CSS-селекторами. Игра содержит 32 уровня, в меню допускается выбор интересующего вас задания.

Онлайн-генераторы

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

Grid Visual Playground

Grid Visual Playground

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

Grid by example

Grid by example

Рассмотрение готовых примеров – отличная возможность изучить и понять логику работы данного механизма. На странице расположены разные вариации сетки.

CSS Grid Generator

CSS Grid Generator

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

CSS Grid Layout Generator

CSS Grid Layout Generator

Аналогичный предыдущему проект, но с поддержкой каких-то regions (если честно, не знаю, что это).

CSS Grid Experiments

CSS Grid Experiments

Подборка интересных вариантов использования CSS-сетки. Есть даже весьма сложные и необычные примеры.

CSS Grid: Floor Plan

Шпаргалки (Cheatsheets) и статьи по теме

A Complete Guide to Grid

A Complete Guide to Grid

В популярном веб-проекте CSS Tricks имеется достаточно масштабная шпаргалка со всеми свойствами Grid-сетки в одном месте. На английском, но что поделать. Очень большая работа проделала, сам сайт, кстати, тоже весьма полезный.

GRID

GRID

Ресурс представляет из себя простую «виртуальную шпаргалку» по разным свойствам. Вы можете копировать соответствующий код просто кликнув по элементам на странице. Креативно!

Learn CSS Grid

Learn CSS Grid

Полноценное руководство по нашей теме, созданное в виде одностраничного сайта. Оно состоит из 17ти разделов, помимо текста содержит также и скриншоты.

Introduction to CSS Grid Layout

Introduction to CSS Grid Layout

Кроме теории и примеров здесь интересен пункт про использование Firefox DevTools для работы с Layout-сеткой. В текстах присутствуют примеры кода и анимация/видео. Интересно, есть ли что-то похожее для инструмента разработчиков Chrome Devtools.

Видео

Напоследок не менее полезные материалы – видео.

cssgrid.io

cssgrid.io

Некто Wes Bos с поддержкой от Firefox создал 25 видео по изучению принципов работы Grid Layout. 4 часа видосов! Супер.

Layout Land – Videos on CSS Grid

Layout Land – Videos on CSS Grid

Ссылка на Youtube плейлист с уроками по основам Grid-сетки от Jen Simmons. Всего 15 роликов.

How to use CSS Grid layout in 60 seconds!

How to use CSS grid layout in 60 seconds!

Достаточно веселая и простая видеодемонстрация определения колонок и рядов за 60 секунд.

Сервисы для изучения Flexbox

Что касается Flexbox, то оригинальная статья с подборой полезных материалов была написана 2 года назад. Однако, не смотря на это, все присутствующие там ссылки все равно оказались рабочими. Базовые понятия по Flexbox можно посмотреть в руководстве Interneting is Hard, которое я упоминал в самом начале статьи.

Типы сервисов здесь аналогичны предыдущему разделу – есть игры, генераторы, Cheatsheets, заметки и т.п.

Flexbox Froggy Game

Flexbox Froggy Game

Начнем с веселых развлекательных ресурсов. Ваша задача «перенести» лягушку на лилии с помощью разных CSS-свойств.

Flexbox Defense Game

Flexbox defense Game

Еще одна мини-игра, где нужно будет защищать свою территорию от наступающих врагов.

Visual Guide to CSS3 Flexbox

Visual Guide to CSS3 Flexbox

Пробуйте на практике все доступные свойства веб-технологии дабы понять принцип их использования и синтаксис. Здесь разрешается добавлять/убирать дочерние элементы, выбирать позиционирование и другие опции.

Flexbox Playground

Flexbox playground

Еще одна площадка для тестирования всевозможных фишек Flexbox – задавайте определенные параметры и смотрите на результат.

Flexplorer

Flexplorer

Третий инструмент из той же области, что и предыдущие – тестируйте CSS-Flexbox опции на практике.

Solved By Flexbox

Solved By Flexbox

Готовые решения/примеры позволяют понять какие задачи можно решать с помощью этого принципа веб-разметки. Например, раньше вертикальное позиционирование было сущим кошмаром, сейчас это делается гораздо легче.

Flexbox Patterns

Flexbox Patterns

С помощью данного типа разметки вы можете создавать не только сетку вебстранички, но и более сложные элементы. На сайте найдете разные паттерны, например, табы, карточки товаров и др.

Guide to Flexbox

Guide to Flexbox

Гайд по теме от портала CSS tricks с красочными иллюстрациями, кодом и пояснениями. Подобные материалы полезны не только для изучения вопроса с нуля, но и пригодятся чтобы вспомнить/подсмотреть некоторые нюансы/синтаксис.

Joni Bologna’s fruity Flexbox Cheatsheet

Joni Bologna’s fruity Flexbox Cheatsheet

Кроме веб-версии шпаргалки есть ссылка на PDF книгу для скачивания.

Flexbox Cheatsheet By Yoksel

Flexbox Cheatsheet By Yoksel

Еще один простой мини-сайт по свойствам Flexbox – ориентирование, выравнивание и др.

Итого. Этих ссылок/ресурсов вам должно с головой хватить дабы разобраться с Grid и Flexbox. Исходя из увиденного и прочитанного, мне кажется, технология CSS-Grid более перспективная (пусть и новая, но почти все современные браузеры ее поддерживают). От Flexbox она отличается возможностью задавать расположение блоков в двух изменениях строках/столбцах и имеет более широкий и гибкий набор функций. Однако для общего развития можно изучить оба направления – при правке HTML-кода готовых адаптивных шаблонов могут встречаться разные варианты. Больше знаний уж точно не помешает.

14.07.19

Категории: Верстка.

Теги: , , , , ,

Добавить комментарий

Ваш e-mail не публикуется. Обязательные поля помечены *
Если вы комментируете впервые, то текст будет отправлен на модерацию.