Тестовое задание на позицию Frontend-разработчика

Команда	Результат
npm i	Установить зависимости
npm start	Запустить сборку, сервер и слежение за файлами
npm start ЗАДАЧА	Запустить задачу с названием ЗАДАЧА (список задач в gulpfile.js)

---

Не удаляйте и не обращайте внимание на файлы:

• .editorconfig

• .gitignore

• .travis.yml

• package.json

• .csscomb.json

---

Проделанная работа

https://webistomin.github.io/ggpa-test-task/

Была выполнена адаптивная верстка главной страницы сайта. Старался верстать как можно ближе к макету. Сайт получился рабочим во всех современных браузерах (Safari нет возможности проверить) и IE11 на различных расширениях, начиная с 320px. Разобрался с SASS и Pug, насколько это возможно за короткий срок. Применял бест практисы которые знаю:

1. Сминифицировал все файлы
2. Там где была возможность использовать Webp графику – использовал. (srcset, @supports)
3. Для ретина дисплеев грузил графику @2x
4. Добавил Critical Css. Остальной css подгружал, после наступления события DomContentLoaded
5. Сделал сайт полностью доступных с клавиатуры
6. Применил подход Graceful Degradation. Сайт доступен с выключенным JavaScript
7. Шрифтам задал font-display: swap, чтобы текст был доступен, пока грузятся кастомные
8. Весь JS прогнал через Babel для трансформаций в ES5

Для слайдера использовал готовую библиотеку с хорошей поддержкой на чистом JS. Можно было написать свой простенький слайдер, но не знал как реализовать поддержку тач на мобильных устройствах. Также подключил скролл к якорным ссылкам.

Различные тесты