Верстка и программирование главной страницы сайта по бронированию морских круизов в Антарктику
- HTML5
- методология BEM
- CSS3, SCSS
- Flexbox, Grid Layout
- JavaScript
- Gulp
- Node.js
- семантическая, кросс-браузерная и адаптивная верстка по BEM
- оптимизация и ретинизация графики, использование SVG, CSS анимации
- интерактивные блоки (мобильное меню, форма с валидацией)
- Яндекс Карты API
- более 90 баллов за показатели производительности, доступности и SEO в Google Lighthouse
- поддержка различных версий браузеров (Chrome, Firefox, Safari) и операционных систем (Android, IOS)
- автоматизация сборки проекта
- проект проходит проверку на валидность w3c-validator
- код соответствует правилам Stylelint и Eslint
- проект соответствует макету по Piхel Perfect
- Брейкопойнты :
- 320px - 767px — мобильная версия;
- 768px - 1023px — планшетная версия;
- 1024px и выше — десктопная версия.
-
При фокусе и наведении на карточку круиза появляется информация о нем и кнопка
Забронировать— ведет на страницу, которой нет в макете. -
Форма должна иметь валидацию.
-
Каждой ссылке в шапке соответствует блок в макете кроме ссылки “Направления”, ведущей на отдельную страницу, которая не отрисована в макете.
-
В шапке нужны ссылки с плавным скролом до соответствующего блока.
-
Нужно подключить карту от Яндекс или Google
Для начала работы у вас должент быть установлен Node.js
- Установка -
npm i - Запуск локального сервера без минификаций -
npm start - Запуск локального сервера c минификациями,
данный вариант не используется в разработке,
он нужен только для тестов производительности
на локальном хосте -npm run dev - Сборка проекта, минификация скриптов
и оптимизация изображений перед деплоем на прод -npm run build - Запуск тестирования на соответствия кодгайдам -
npm test - Создание webp изображений в директории source -
npm run webp