Изучите CSS Flexbox в этом БЕСПЛАТНОМ интерактивном руководстве

1665262884 izuchite css flexbox v etom besplatnom interaktivnom rukovodstve

После успеха курса CSS Grid, который я запустил с помощью freeCodeCamp в декабре (более 14 000 студентов!), я решил запустить второй бесплатный курс.

На этот раз вы можете изучить Flexbox, ставший обязательным навыком для разработчиков интерфейса.

Flexbox также был одним из самых частых запросов, которые я получал от студентов, прошедших курс CSS Grid.

В этой статье я объясню, как построен курс Flexbox, чтобы вы могли решить, подходит ли он вам.

Но если вы хотите сразу перейти к курсу, вы можете перейти туда непосредственно и начать.

Обновление: я тоже запустил здесь бесплатный курс CSS Variables.

gflexbox-1
Щелкните здесь, чтобы перейти на курс.

Что охватывает мой курс Flexbox

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

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

В течение курса вы будете создавать панель навигации и экспериментировать с ней, поскольку это типичный случай использования Flexbox.

Давайте посмотрим на каждый из скринкастов:

Урок №1: Ваш первый Flexbox

1*rPzIll98F0gHToNeKZE3RQ

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

Урок №2: Главная ось и поперечная ось

1*1z53nj8_eUtwkdyr6UEAfg

Во втором ящике я объясняю основную концепцию Flexbox, которую важно понять на ранней стадии: оси. Макет Flexbox имеет две оси: главную ось и поперечную ось. По умолчанию главная ось горизонтальная, а поперечная ось вертикальная, но они могут изменять роли.

Урок №3: Как обосновать содержимое

1*oX0mCKg4caqQE7X04CvIiw

The justify-content свойство управляет содержимым вдоль главной оси. В течение всего курса ваша главная ось будет преимущественно горизонтальной, а не вертикальной. Я решил сделать это так, поскольку обнаружил, что горизонтальные макеты Flexbox в реальной жизни более распространены, чем вертикальные.

Урок №4: Как разместить отдельные элементы

1*TK1nvZSGCbi3EfQBwMQbgQ

В этом уроке вы научитесь размещать отдельные элементы с помощью старой хорошей техники установки margin к авто.

Урок №5: свойство flex

1*gnO8ugL8stVg0ytPlTJNEQ

The flex свойство позволяет придавать вашим элементам соответствующую ширину. На самом деле это сокращение трех других свойств: flex-grow, flex-shrink и flex-basis. Но мы сохраним их на конец курса, поскольку они более продвинуты.

Урок №6: Как выровнять элементы

1*bpDqaWA3uSwUtdXDKAwg6w

The align-items свойство управляет элементами вдоль поперечной оси, которая в нашем случае является вертикальной. На рисунке выше мы отцентрировали элементы вдоль этой оси.

Урок №7: Столбик с переменным направлением

1*U9_BLWNTbc91G8zGb9kXFQ

Настройка flex-direction к столбцу перевернет главную ось и поперечную ось, чтобы элементы располагались вниз, а не в сторону.

Урок №8: Обертывание

1*NVE8i0fzYR_lkztjmhgN5w

По умолчанию Flexbox не позволяет повернуть элементы, то есть они будут оставаться в одной строке или строке. Если вы установили flex-wrap укутать же удастся. Я покажу, как это будет происходить.

Урок №9: Flex растет, уменьшается и основание

1*Xbb_jKfJ9rbXTeWqs89MRw

Flex grow, shrink и basis немного сложны для понимания, поэтому это самый длинный скринкаст в курсе. Кратко, flex-basis устанавливает базовую ширину элемента, flex-grow контролирует, как он будет расти над шириной основания, и flex-shrink контролирует, как он будет уменьшаться, если элемент будет уже его основной ширины.

Урок №10: Порядок

1*hyzXwySi5-ep_j8rfCEi9A

Закончим курс лекцией о order собственность. Это познакомит вас с независимость порядка источникачто позволяет устанавливать порядок элементов вне зависимости от того, как они размещены в HTML.

Бонусный раздел

В бонусном разделе вы создадите два макета реального мира от начала до конца.

В первом вы возьмете все, что научились во время курса, и используете это для создания навигации, которая адаптируется к различным размерам экрана.

1*CZikqoB4iZIIrV_rAW_qdg

Во второй дополнительной лекции вы поэкспериментируете с созданием сетки с помощью Flexbox. Если вы прошли мой курс CSS Grid, вы узнаете настройки оттуда:

1*e7EoeCwxU6RCPKsj72KkUg

И все это.

Формат Scrimba

Давайте, наконец, рассмотрим технологию курса. Он создан с помощью Scrimba, инструмента интерактивного кодирования скринкаста, созданного моими двумя замечательными соучредителями Синдром и Магнусом.

Скринкасты Scrimba выглядят как обычные видео, но они полностью интерактивны. Вы можете изменить код внутри кастов.

Вот gif, объясняющий концепцию:

Приостановить скринкаст → Редактировать код → Запустить!  → Просмотрите свои изменения

Приостановить скринкаст → Редактировать код → Запустить! → Просмотрите свои изменения

Это отлично, когда вы чувствуете, что вам нужно поэкспериментировать с кодом, чтобы правильно его понять, или когда вы просто хотите скопировать часть кода.

Кроме того, поскольку скринкасты Scrimba происходят в редакторе кода, они занимают всего около 1% пропускной способности, которую занимает обычное видео. Это означает, что скринкасты Scrimba гораздо легче транслировать, даже если ваше интернет-соединение медленное.

Надеюсь, вам понравится курс. Если у вас есть отзывы или запросы на добавление дополнительных скринкастов, не стесняйтесь сообщить мне об этом в Твиттере, и я буду рад их рассмотреть.

Счастливого кодирования!

Спасибо за чтение! Меня зовут Пер Борген, я соучредитель Scrimba – самый легкий способ научиться кодировать. Если вы хотите научиться создавать современные веб-сайты на профессиональном уровне, посетите наш курс адаптивного веб-дизайна.

буткемп-баннер
Щелкните здесь, чтобы попасть в тренинг для углубленного обучения.

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *