Выпускной проект профессии "Фронтенд-разработчик"
Студент: Olesia Isichenko. Затрачено времени: 39 часов 40 минут
— Техническое задание
Макет:
Фронтенд Грейдирование - Drink2Go
Сборка:
https://github.com/htmlacademy/html2-basic-template
Less https://github.com/htmlacademy/html2-basic-template/tree/less
Sass https://github.com/htmlacademy/html2-basic-template/tree/sass
Критерии качества:
Грейдирование: Критерии Фронтенд-разработчик
- Адаптивность сетки: мобильная, планшетная и десктопная версии («фикс»).
- Адаптивность графики: ретинизация, векторные изображения.
- Используемая методология: БЭМ.
- Используемый препроцессор: Less или Sass.
- Используемые библиотеки: указаны в техническом задании.
- Кроссбраузерность: Chrome, Firefox, Safari.
- Используемый шрифт: Montserrat.
- Обязательными к вёрстке является первая страница — главная страница.
- Макеты верстаются постепенно: сначала мобильная версия, далее от мобильной версии к планшетной, а затем и к десктопной.
- Рекомендованные сборки и инструкции вы можете найти по ссылке выше.
-
Между версиями (мобильная, планшетная, десктопная) сетка может быть как резиновой, так и фиксированной.
-
При фиксированной сетке контентная область центрируется и не может быть уже макетной ширины. Фоны, которые упираются в края макета должны тянуться на всю страницу.
-
Логотип и текст HTML Academy в футере являются ссылкой на лендинг интенсива «HTML и CSS. Адаптивная вёрстка и автоматизация».
-
Мобильное меню должно быть реализовано с использованием JS. Главное меню в мобильной версии должно открываться при нажатии на иконку «гамбургера». Когда меню открыто, иконка «гамбургера» заменяется на крестик. При нажатии на иконку с крестиком меню закрывается.
-
Промо блок — это слайдер. Сверстать и оживить слайдер. Для оживления слайдера использовать swiper.js. Смена слайда должна происходить менее, чем за 300ms.
-
Изображение и название товара в каталоге — ссылки на страницу с описанием товара. Страницу с описанием товара реализовывать не нужно.
-
Блок карты — интерактивная карта, ширина подстраивается под ширину вьюпорта (но не уже контентной ширины макета). На карте размещён маркер, центр карты соответствует центру блока в макете. Карта реализуется сторонней библиотекой Leaflet. Библиотеку можно подключить с помощью приложенного архива.
Если при подключении карт возникнут проблемы отображения, вы можете использовать тайл 2Gis, вместо OpenStreetMap. Для этого достаточно поставить новый адрес тайла: http://tile2.maps.2gis.com/tiles?x={x}& y={y}& z={z}.