Пропускаем часть тренажёра — Тренажёр HTML Academy

В этой небольшой заметке немного поругаю Тренажёры HTML Academy с позиции подписчика. Объясню почему пропустил в статьях один большой блок из «среднего уровня» тренажёров.

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

Повторение — мать учения

Дело в том, что блоки тренажёров делаются в разное время и разными людьми. Я даже уже об этом писал в одной из прошлых статей в части про float. Из-за чего встречаются повторы, особенно заметные в последних блоках.

Я проходил эти блоки во время апрельского интенсива и как раз там впервые встретил сумбурность и какую-то нелогичность блоков тренажёра. Вот скрин одного из дней интенсива:

Текст обрезал - он не особо важен, главное заголовки

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

Тут главное понять — интенсив бесплатный, поэтому и на том можно сказать «спасибо», так как иначе эти блоки только по подписке. Но я-то с оплаченной подпиской, поэтому был немного расстроен.

В общем, интенсив шёл в хаотичном порядке, не в том, что указан в сетке тренажёра, что наталкивает на мысль, что порядок как таковой не существует:

И даже если проигнорировать интенсив, то есть как бы я пошел в том порядке, что сетка в тренажёре, то получается что:

«Погружение в HTML и CSS» про блочную модель, флексы и гриды. Этот блок сделан явно позже остальных, о чем говорит номер в адресе.
«Продвинутый HTML и CSS» про таблицы, формы и селекторы.
Дальше идет «Великий Кексби, этап 1» — это блок одной большой практики, про него как раз следующая статья. Возможно, про оба этапа.
«Построение сеток» опять про блочную модель, сетки на float, флексы и гриды, то есть последние три статьи как раз этот блок.

Видно, что 1. и 4. об одном и том же, правда, подход к повествованию у них разный. У первого ставится задача, например, сверстать карточку тарифа, и по мере выполнения рассматриваются свойства. У четвёртого все более подробно, плюс есть часть про сетки на float и inline-block.

К чему я всё это — я не буду разбирать отдельно блок «Погружение в HTML и CSS», потому что это тупо повторение уже пройденного. В рамках тренажёра оно может иметь смысл, в рамках конспекта и статей точно нет.

Я специально за основу взял блок «Построение сеток» как более подробный и детальный, взяв часть из первого блока про выравнивание. Но в блоке есть практика, давайте о ней и поговорим.

Испытания

В блоке три части и в каждой по два испытания. Как и писал выше здесь всё хаотично, например, даже в первом блоке у нас и гриды и флексы. Поэтому, первое испытание на понимание гридов:

А второе на флексбоксе:

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

Второй и третий блок про «Микросетки», то есть про сетки внутри сеток. Да, нам здесь как раз говорят о том, что в одном проекте нормально использовать разные подходы к разным задачам. На гриде может быть структура страницы, а отдельные блоки вполне себе на флексах.

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

Четвёртое испытание учит пользоваться продвинутыми способами создания грид сетки — repeat(), auto-fit, minmax():

Пятое испытание показывает на примере как можно сверстать на флексах нечто типа панели управления. Флексбокс во флексбоксе:

И последнее испытание на грид, на именованные области и на выравнивание элементов в них — верстаем визитку:

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

Большое спасибо за ваше внимание! Буду рад если это поможет кому-то разобраться в тренажёрах академии.

Ссылки на предыдущие статьи по HTML Academy:

Знакомство с Веб-разработкой
Знакомство с HTML и CSS
Знакомство с JavaScript
Знакомство с PHP
Таблицы и подробно о формах
Наследование, каскады и селекторы
Блочная модель, поток и сетка на float
Гибкие флексбоксы display: flex
Удобные сетки на гридах display: grid
Пропуск блока «Погружение» <- Вы здесь
Позиционирование и двумерные трансформации
Теневое искусство и линейные градиенты
CSS-фильтры и Кекстаграм
Мастерские
Продвинутые Мастерские
...