Skip to content

webistomin/ggpa-test-task

Repository files navigation

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

Команда Результат
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. Можно было написать свой простенький слайдер, но не знал как реализовать поддержку тач на мобильных устройствах. Также подключил скролл к якорным ссылкам.

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

About

:neckbeard: Тестовое задание для Frontend-разработчика

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published