Испытание «Великий Кексби» — Тренажёр HTML Academy
Мы изучили достаточно для того, чтобы приступить к самому большому испытанию в тренажёрах Академии. «Великий Кексби» — это целых 13 частей практики, разделённых на два блока. Или не совсем. В этой статье разберём всё испытание.
Введение
Немного поясню почему «не совсем». Не смотря на то, что частей 13, а заданий итого аж 166, но по сути Испытаниями являются только две части в конце каждого блока.
Остальные части это обычные уроки с подводкой к самостоятельной работе. Разница в том, что тут мы почти всё пишем ручками с нуля и общая идея – вёрстки проекта, а не отдельно взятой задачи.
Испытание заключается в самостоятельной вёрстке макета — нам дают сам макет в виде картинки, архив с текстом и изображениями. Верстать надо у себя в редакторе, а не в браузере. Макет отличается от того, что был в уроках, но сильно похож структурно.
Этап 1 — Вёрстка
Первый этап на 90% состоит из разметки в HTML. Только последние несколько уроков касаются CSS в таблицах, но это не существенно.
И тут сразу хочу поругать эту часть тренажёра за неактуальность или, может быть, ленивость. Помнится, что нам чуть ли не сразу рассказали про «диватоз» и семантическую вёрстку. И вот мы дошли до большого испытания где мы… верстаем все на <div>'ах. Прям вообще всё, включая шапку и подвал.
Наверное, это такое «упрощение», но мы же уже прошли всё это, мы уже знаем как семантически корректно верстать. Почему тут всё нарочно наоборот? Обескураживает. Окей, я понимаю, этот Кексби может быть сделан еще когда гридов даже не было, но, на мой взгляд, такое себе оправдание.
Первый пять частей мы верстаем по указке, а вот шестая часть «Промежуточное испытание» уже самостоятельная работа. Нам дают архив с материалами, картинку и вперёд!
Свёрстанный результат нужно обратно заархивировать и отправить на проверку. Надо сказать, что тут сделано все очень круто, я впечатлён.
Однако, из-за того, что задание проверяется автоматически, код нужно подводить к определённому шаблону. Про этот шаблон сказано в сопроводительном видео и сразу за ним есть «эталонный» вариант.
То есть работа всё-таки не совсем самостоятельная, можно сверяться по ходу написания. Пусть это всего лишь картинки, но по ней можно точно понять, что от тебя требуется в итоге:
Кстати, я пользовался Visual Studio Code и, наверное, продолжу работать на нём. Пока всё удобно и интуитивно понятно:
Итак, готовую работу отправляем на проверку и в течение минуты получаем результат:
У меня получилось всё с первого раза, кроме блока с формой, там проглядел один перенос строки <br>. Повторно отправил уже полностью верно.
Этап 2 — Стилизация
Технически реализовано почти также как и первый этап — первые части блока вводные, показывают как и какими методами будем стилизовать.
Этот блок полностью про CSS, мы кое-где изредка добавляем класс и добавляем контейнер «центровщик» в разметку. Итоговая проверка проходит в таком же формате — нужно отправить архив, теперь уже с прилинкованным файлом стилей.
Однако, есть несколько нюансов, которые я бы хотел написать. Простите, но часть вызвала много негативных эмоций.
Сетка
Методы стилизации выбраны, мягко говоря, интересные. Базовая стилизация — всё ок, а вот сетки мы строим на float. Да, флоаты, да, с clearfix и всем вытекающим из этого геморроем в позиционировании, например, трёх колонок.
Когда я проходил часть про сетки на float я уже тогда понял, что эта технология как минимум не удобная и как оказалось, устаревшая. Почему она в самом большом испытании на все тренажёры? Ну какие нафиг флоуты в 2022?
Да, я понимаю, Кексби как и Кекстаграм, видимо, делались давно, судя по всему, 2014–2016 года или около того. Хотя, даже тогда флексы уже хорошо поддерживались. Оправдывает ли это академию?
Да, я понимаю, что до сих пор огромное количество сайтов свёрстано на флоатах, тот же VK, например, и есть гуру синдрома утёнка, кто и сейчас верстает на них.
Но зачем новичку, который потенциально ни разу не верстал даже на удобных современных сетках, давать самостоятельную работу на супер устаревшем методе? При том, что мы уже прошли все эти методы!
Ах, да, кстати, микросетки — все возможные кнопки и иконки мы тоже делаем на inline-block, тоже с вытекающими, в плане пробелов, нулевого размера шрифта и прочих костылей. Да, это иногда применимо, но тут это везде.
Ладно, может это делается намеренно, ради «тренировки», я не знаю. Допускаю, что у меня бомбит от своего невежества и на самом деле флоат — это мастхэв (сомневаюсь).
Макет
Едем дальше. На этом этапе нам дают уже не картинку JPG, а полноценный макет в PSD формате со слоями и элементами, что очень круто. Можно сказать, бесплатный практический макет с возможностью его проверить!
Начиная от критичных погрешностей в расположении элементов, заканчивая неправильными, не подходящими параметрами текста. Я уже молчу про слои — это просто в кучу сваленные шейпы без подписей, без каких-то группировок.
«Верстальщику не нужны слои», кто-то скажет. А я скажу — попробуйте выделить авто-селектом шейп толщиной 1px чтобы понять «задан ли ему такой тусклый цвет?» или «цвет с прозрачностью?» или «прозрачность задана самой фигуре?».
Почему это меня беспокоит? Да потому, что все три варианта есть на макете. Часть рамок border в сплошном цвете, а часть в полупрозрачном. А учитывая, что прозрачность opacity можно задать еще и слою отдельно — работа с таким макетом превращается в то еще удовольствие. Сиди выясняй — это #404040 или это чёрный полупрозрачный?
Но это всё фигня — дизайнеры разные бывают, тут ок, хотя я бы попросил всё-таки как-то привести в порядок это всё. Ладно.
А вот числовые ошибки уже как-то нихрена не «ладно». У всех заголовков, включая подзаголовки и разные акцентные надписи — в макете указано неверное значение высоты строки line-height.
Везде указано либо 61px, либо там 41px/31px — уже лень искать. Но везде вот этот странный 1 пиксель сверху. Я сначала не придал значения, но при проверке у меня везде, во всех блоках, как бы я там не танцевал туда-сюда по 5px — в эталон проверки не попадало.
Поменял все на 60px и надо же! Сработало! Почему я уверен, что это ошибка макета, а не я где-то упустил эти пиксели? После прохождения всех блоков — получаешь эталонный 100%-й вариант. И что бы вы думали?
И там такого дофига. Размеры таблиц практически наугад задаёшь, высоту полей формы в итоге легче задать фиксировано через height, положение бутылок во втором блоке тоже наугад.
Ах да, еще — высота первого блока в макете тоже неправильная, а это влияет на фоновое изображение. Высота в макете 550px, тогда как высота блока которая должна быть оказывается 490px. Потому что.
«Зачем так придираться?» — спросите вы. Никто же не будет требовать «pixel perfect» от учебного проекта? Тем более такого костыльного?
Проверка задания
Хрен там — скажу я вам! Проверка идёт так же по блокам страницы, но теперь проверяется еще сетка и оформление. Работает также — сравнивается по скрину наложением. Более того проверяется еще и вложенность.
То есть нужно попасть пикселями в эталон без погрешностей, попасть цветом и всеми стилевыми атрибутами и если по вложениям ты что-то поменял, то это тоже ошибка. Например, не забудьте, что лого должно быть в дополнительном контейнере и им обоим надо задать одинаковые размеры.
В самой проверке тоже есть какие-то придурошные приколы — блок с формой заказа, в сетке явно указывает на дополнительный отступ сверху от текста с призывом, а во вкладке стилей все идеально подходит.
И такого там тоже дофига. Большую часть времени ты не занимаешься вёрсткой, ты занимаешься танцами с бубном на одном пальце левой ноги, чтобы понять какой куда там пиксель не попал и почему.
В итоге я плюнул на это дело — тот случай когда перфекционизм нужно отключать и не трахать себе мозги. Выполнил, в среднем, все блоки и все вкладки на 96-97% и хрен с ними, себе дороже.
Итог
Самое обидное, что идея просто потрясающая! И сама реализация тоже крутая, но дьявол, сука, в мелочах. Ну почему всё в дивах? Зачем мы учили семантическую вёрстку до этого?
Ну что мешало сделать задачу на флексах, пусть без всяких flex-grow и других модификаторов? Да если даже с ними, у нас фиксированный макет, с фиксированной шириной!
Ну почему такой убогий макет? Почему в нём ошибки? Они намерено там есть? Типа как в некоторых школах специально дают не полную задачу, что бы тренировать ученика задавать уточняющие вопросы? Так это не про тренажёры! У кого тут спрашивать-то?
После прохождения Кексби, да еще и в комбо со спорным Кекстаграмом до этого, у меня появились сомнения стоит ли вообще в Академии продолжать учиться. Может и на курсах всё также? В любом случае, профессия «Фронтендера» меня там уже ждёт, поэтому никуда я уже не денусь.
Вот такой вот поток эмоций вызвал у меня этот Кексби. Возможно, на момент выхода он был самый крутой, но сейчас мне прям вот вообще не понравилось.
Вам спасибо большое за внимание и прошу прощения за негатив! Надеюсь, вам хотя бы было весело почитать про мои страдания.
Ссылки на другие статьи по HTML Academy:
Знакомство с Веб-разработкой
Знакомство с HTML и CSS
Знакомство с JavaScript
Знакомство с PHP
Таблицы и подробно о формах
Наследование, каскады и селекторы
Блочная модель, поток и сетка на float
Гибкие флексбоксы display: flex
Удобные сетки на гридах display: grid
Пропуск блока «Погружение»
Позиционирование и двумерные трансформации
Теневое искусство и линейные градиенты
CSS-фильтры и Кекстаграм
Мастерские
Продвинутые Мастерские
…
Остальные статьи можно посмотреть у меня на главной странице блога.
Также мои соц. сетки, которые я продолжаю вести:
Мой Twitter
Мой Telegram
Мой Паблик ВК
Заходите куда удобно вам и подписывайтесь! Еще раз спасибо за внимание!