SlillBox - Blanchard

Работа в рамках профессии от SkillBox "Fullstack-разработчик на JavaScript" (курс - Веб-верстка «Базовый уровень»).

Основные характеристики:

  • В названиях классов HTML-элементов использована методология БЭМ
  • Резиновая верстка (flexbox)
  • Адаптивная верстка для любых устройств
  • Верстка pixel perfect всех элементов на всех макетах
  • Блоки сверстаны с учетом использования большого количества текста (переполняемость)
  • Реализованы внешние виды всех активных элементов для состояний hover, focus, и active
  • Реализована возможность “хождения” по сайту с клавиатуры
  • Реализована возможность пользоваться сайтом с помощью скринридера
  • Кроссбраузерность
  • Минимизация "веса" изображений

Макет включает в себя:

  • Прелоадер
  • Шапку сайта у которой в мобильной версии все элементы меняют свое место и некоторые из них свой вид
  • Нижнее меню с выпадающими списками (блоками с набором элементов и кастомным скроллом)
  • Обычный слайдер с эффектом приближения и удаления
  • Кастомный селект
  • Слайдер в две строки, который в мобильной версии трансформируется в однострочный
  • Всплывающие окна
  • Систему "табов": переключение информации при нажатии на нужные ссылки
  • Аккордеон
  • "Плитку" элементов (с возможностью посмотреть все элементы), которая в мобильной версии превращается в слайдер
  • Список кастомных чекбоксов, который в мобильной версии превращается в выпадающий список, где по дефолту отображаются лишь выбранные элементы
  • Кастомный фильтр по цене
  • Слайдер, который в мобильной версии превращается в "плитку" элементов
  • Тултипы в тексте: значки, при нажатии на которые появляется поясняющий текст
  • Карусель логотипов
  • Форму обратной связи с валидацией и AJAX отправкой письме
  • Интерактивную карту с черно-белой цветовой гаммой, стилизованным маркером и отключенным зумом при прокрутке страницы

ДИСКЛЕЙМЕР: В данной верстке картинки в слайдере реализованы через CSS свойство background-image. Я прекрасно понимаю все минусы этого подхода и, что, если бы эту верстку дальше начали бы натягивать на движок, backend-разработчик "сказал бы мне большое спасибо" за то, какую медвежью услугу я ему оказал. В данном случае причиной выбора такого подхода к созданию слайдера стали требования SkillBox.

SlillBox - Blanchard