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

:neckbeard: Тестовое задание для Frontend-разработчика
https://github.com/webistomin/ggpa-test-task

css3 gulp html5 markdown webp

Last synced: 17 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/webistomin/ggpa-test-task
• Owner: webistomin
• Created: 2018-11-13T11:39:35.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2018-11-22T12:02:06.000Z (about 6 years ago)
• Last Synced: 2024-10-30T05:35:03.712Z (2 months ago)
• Topics: css3, gulp, html5, markdown, webp
• Language: HTML
• Homepage: https://webistomin.github.io/ggpa-test-task/
• Size: 1.35 MB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Тестовое задание на позицию Frontend-разработчика [![Build status][travis-image]][travis-url] [![dependencies Status](https://david-dm.org/webistomin/ggpa-test-task/status.svg)](https://david-dm.org/webistomin/ggpa-test-task) [![Dependency status][dependency-image]][dependency-url] 

  

    

      Команда

      Результат

    

  

  

    

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

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









[travis-image]: https://travis-ci.org/webistomin/ggpa-test-task.svg?branch=master

[travis-url]: https://travis-ci.org/webistomin/ggpa-test-task

[dependency-image]: https://david-dm.org/webistomin/ggpa-test-task/dev-status.svg

[dependency-url]: https://david-dm.org/webistomin/ggpa-test-task