Всем привет, с вами Артем Леванов, Front Lead в WebRise. Когда тебе, как члену жюри, приходится выбирать лучшую работу среди сильных участников, на первый план выходят не только pixel-perfect, но и детали, которые создают ощущение качественного продукта. В чем была наша задача на чемпионате по верстке от HTML Academy, с какими работами мы столкнулись и какие решения заслуживают отдельного внимания — разбираю на реальных примерах финалистов.
Описание чемпионата
Двенадцатого сентября завершился чемпионат по верстке от HTML Academy. Участвовал в качестве жюри, где оценивал шесть финальных работ. Критериев было много, и они довольно строгие. Они подробно описаны в статье от академии (ссылка).
В качестве макета участникам предложили макет сайта Paratype, который собрал множество наград на различных конкурсах. Сам макет был немного оптимизирован под чемпионат. Участниками были начинающие разработчики. Макет для них довольно сложный, а js нужно было делать только свой, без использования библиотек. Сборки можно было использовать любые, но участники в основном использовали сборки, которые давались на курсах академии. На реализацию проекта было выделено 2 недели.
Что требовалось от жюри
Задача жюри заключалась не в проверке формального соответствия критериям (это сделали другие), а в целостной оценке проекта — как если бы мы принимали готовую работу у коллеги. Можно было руководствоваться любыми принципами, но для меня ключевым стал пользовательский опыт: насколько удобно, приятно и современно выглядит итоговый продукт.
Выбранные работы
Поскольку общий уровень работ был высоким, я искал работы, которые выделяются нестандартными, но при этом технически грамотными решениями. В своей тройке лидеров я выделил работы Степана, Анастасии и Кристины.
Степан (5 баллов)
Работа Степана — пример качественного и добротного исполнения по всем стандартам. Она показала самый высокий балл по техническим критериям Академии
Из плюсов отметил хорошую анимацию меню по наведению.
В сетке с промо шрифтами реализовано пропорциональное уменьшение элементов в зависимости от ширины экрана. Прекрасный вариант заботы о пользователях, у которых устройства попадают между заложенными брейкпоинтами.
Все интерактивные элементы имеют анимацию взаимодействия.
Из минусов отметил, что почти все анимации с интерактивными элементами просто меняют прозрачность, она не очень выразительна и часто не заметна для пользователя. Это формализует подход к такой важной части и не хватает оригинальности в этом компоненте.
В пиктограммах со шрифтами используется img, что не позволяет хорошо анимировать данный блок. Было бы интереснее, если бы вставлялся непосредственно svg.
В меню на адаптиве не хватило проработки и оно съезжает, что визуально ломает дизайн.
Эти недостатки могли не так сильно бросаться в глаза, если бы у остальных участников было так же. Однако в других работах эти места проработаны и это выгодно выделяло их на фоне работы Степана.
Анастасия (10 баллов)
Хорошая работа с множеством приятных решений.
Отлично реализован свитч переключателя темы. Плавные анимация, работает по табу.
Проработана его доступность:
Понравилось решение для смены цвета иконок через mask. Это относительно новые css, который стал доступен не так давно, в начале 2024го года.
.theme__label {
--bg-color: #{$color-text-basic};
--icon: url("/__spritemap#sprite-sun-view");
box-sizing: border-box;
display: grid;
grid-template-columns: 20px 1fr;
align-items: center;
min-height: 40px;
padding: calc(10px / $mobile-size \* 100vw);
font-weight: 600;
font-size: 12px;
text-transform: uppercase;
color: $color-text-basic;
transition: color 0.3s;
cursor: pointer;
@media #{$tablet-width} {
padding: 20px;
font-size: 16px;
}
@media #{$desktop-width} {
grid-template-columns: 1fr;
justify-items: center;
width: 40px;
padding: 0;
}
&::before {
content: "";
width: 20px;
height: 20px;
background-color: var(--bg-color);
mask-image: var(--icon);
mask-position: center;
mask-size: 100% 100%;
mask-repeat: no-repeat;
transition: background-color 0.3s transform 0.3s;
}
}
.theme__label--dark {
--icon: url("/__spritemap#sprite-moon-view");
padding: 10px 20px 10px 15px;
@media #{$desktop-width} {
padding: 0;
}
}
.theme__label--light {
--bg-color: #{$color-white};
color: $color-white;
}
.theme__toggle--dark .theme__label--light {
--bg-color: #{$color-text-basic};
color: $color-text-basic;
}
.theme__toggle--dark .theme__label--dark {
--bg-color: #{$color-white};
color: $color-white;
}Следующим плюсом для меня стал грамотный адаптив с пропорциональным уменьшением блоков между брейкпоинтами, который сохраняет сетку и заложенный дизайн.
Очень понравилась анимация в двух блоках промо баннера. Не стандартно и в точку.
Хорошая попытка анимации пиктограмм со шрифтами. Однако стоило бы вместо img, для картинки шрифтов, использовать svg и переход в белую анимацию самого шрифта, как мы увидим в следующей работе.
Из недочетов, отмечу меню модалки, которое не заполняет в открытом состоянии весь экран.
Цифры в кружках не по центру на мобильной версии.
В целом это достойная работа джуниор разработчика.
Кристина (15 баллов)
Пожалуй самая стильная и смелая работа. Из плюсов отмечу сразу пропорциональное уменьшение размеров при адаптиве. Самое большое кол-во блоков реализовано, работают корректно.
Вот пример меню:
Пример блока с промо шрифтами
Прекрасная реализация анимации пиктограмм со шрифтами. Шрифты в виде svg, при наведении меняют цвет, смотрится эффектно и профессионально. Адаптив пиктограмм сделан хорошо. Нет переносов, как т��лько экран меньше длины всего блока, начинает работать скролл.
Отличная, реализация переключателя switch. Плавная анимация, подсветка. Подсветка правда только для ночной темы. Не хватает ее для дневной темы.
Отличное применение -webkit-tap-highlight-color для скрытия синего фона при тапе. Работает везде. Сравните
Реализация Кристины
Другие реализации
Из минусов отмечу блок с описанием шрифта, который закрывается уже при наведении на вылетевшее описание
Нет анимации переключения сетки промо шрифтов.
Данная работа не опирается на какие-то однотипные практики или варианты реализации на оригинальном сайте, а предлагает свои решения, которые во многом удачны и даже лучше оригинала. Именно с точки зрения пользовательского опыта эта работа мне понравилась больше всего, поэтому ей был отдан наивысший балл.
Итоги
Итоговый лайв с HTML Academy и другими членами жюри стал яркой точкой в чемпионате. Мы подробно разобрали работы, обсудили сильные стороны каждого участника и с трудом, определили победителя — им стала Анастасия. Выбор победителя был особенно сложным, ведь работы финалисток были превосходно проработаны.
Хочу выразить благодарность HTML Academy за доверие и возможность оценить такие сильные проекты, которые уже приближаются к уровню middle-разработчика. Это был невероятно позитивный и вдохновляющий опыт.
Важно отметить, что все финалисты не просто следуют макету, а предлагают собственные, зачастую более удачные, решения и уверенно идут в ногу с современными подходами к вёрстке. Уверен, троих финалистов ждут большие успехи в карьере. Наши поздравления!
Запись эфира доступна по ссылке.