Museum

Макет Museum

Этапы работы над проектом:

• Фиксированная вёрстка
• Адаптивная вёрстка
• Добавление JavaScript

Фиксированная вёрстка. Ключевые требования:

• валидная семантическая вёрстка
• легкоподдерживаемый читаемый код
• экспорт стилей и графики из Figma
• работа с растровой и векторной графикой
• подключение шрифтов
• использование flexbox и grid для построения сеток
• вёрстка навигационных элементов интерфейса
• вёрстка карточных элементов интерфейса
• вёрстка и стилизация интерактивных элементов интерфейса (кнопки, ссылки, переключатели)
• вёрстка и стилизация форм

Адаптивная вёрстка. Ключевые требование:

• работа с медиа-запросами
• легкоподдерживаемый читаемый код
• использование подхода "desktop first" при работе с адаптивностью
• корректное отображение вёрстки на большинстве устройств
• использование для адаптации верстки flexbox и/или grid, функции calc(), css-переменных
• рефакторинг кода

Добавление JavaScript. Ключевые требования:

• написание собственного js-кода для реализации указанного в задании функционала
• подключение и использование js-библиотек
• создание бесконечного слайдера/свайпера или добавление его при помощи библиотеки
• создание кастомного HTML5 видеоплеера
• создание слайдера сравнения изображений
• анимация при прокрутке (изображения в секции Galery)
• добавление на сайт калькулятора продажи товаров (калькулятор продажи билетов в секции Tickets и в форме продажи билетов)
• валидация форм
• добавление на сайт интерактивной карты, подключаемой при помощи js-библиотеки mapbox, её кастомизация: добавление маркеров, изменение стиля
• легкоподдерживаемый читаемый качественный код c использованием современных возможностей js