Всем привет, с вами Артем Леванов, 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-разработчика. Это был невероятно позитивный и вдохновляющий опыт.

Важно отметить, что все финалисты не просто следуют макету, а предлагают собственные, зачастую более удачные, решения и уверенно идут в ногу с современными подходами к вёрстке. Уверен, троих финалистов ждут большие успехи в карьере. Наши поздравления!

Запись эфира доступна по ссылке.