kor1k / forkio

Forkio-Step

Задание

Сверстать макет psd

Командная работа

На данном проекте все студенты разделены на группы по три человека. Для каждого из участников команды частично определен перечень заданий, которые он должен выполнить. Остальные задания участники команды могут распределить самостоятельно. Участники команды могут самостоятельно решить, кто будет выпонять задание №1, №2 и №3.

Технические требования к верстке:

• Вам будет дан макет в четырех разрешениях - 320 пикселей, 480 пикселей, 768 пикселей, и 1200 пикселей (ширина контента).
• Макет должен быть сделан с учетом принципов адаптивной и резиновой верстки. То есть все блоки/колонки должны занимать всю доступную ширину экрана (с учетом боковых отступов), и менять свое взаимное расположение при изменении пропорций после определенных граничных точек.
• Макет шириной 320 пикселей показывает как будет выглядеть контент при ширине экрана от 320 до 400 пикселей (320 пикселей - минимальная ширина контента, больше он не должен сужаться).
• Макет шириной 480 пикселей показывает как будет выглядеть контент при ширине экрана от 401 до 480 пикселей.
• Макет 768 пикселей показывает как будет выглядеть контент при размере экрана от 481 до 992 (!) пикселей.
• Макет 1200 показывает как будет выглядеть контент при ширине экрана 993-1200 пикселей. То есть там где в макете 768 где-то было две колонки, а в макете 1200 четыре, смена с двух на четыре должна происходить при достижении ширины экрана 993 пикселя.
• Если экран шире чем 1200 пикселей, контент должен занимать ровно 1200 пикселей, и находиться по центру.
• У контейнера с контентом должен быть боковой padding - 10 пикселей с обоих сторон, на всех разрешениях экрана.
• Верстка должна выглядеть хорошо как в указанных граничных точках, так и на любой ширине экрана между ними.
• Есть два дополнительных макета - Forkio Hover и Forkio Dropdown Menu. Hover показывает как должны выглядеть все элементы при наведении курсора мыши. Menu - показывает как должно выглядеть верхнее меню на мобильных устройствах (при ширине до 480 пикселей включительно). Открываться оно должно при наведении курсора мыши.
• Все стили должны быть написаны в файлах SCSS.
• Все классы на странице должны быть заданы с использованием методологии BEM.

Задание для студента №1

• Сверстать шапку сайта с верхним меню (включая выпадающее меню при малом разрешении экрана).
• Сверстать блок Revolutionary Editor. Кнопки watch/star/fork на макете сделаны одним слоем, поэтому с макета не получится скачать иконки. Сами кнопки надо сделать, чтобы выглядели как здесь справа вверху (оттуда же с помощью инспектора можно взять все SVG иконки и скачать используемые на гитхабе стили).

Задание для студента №2

• Светстать секцию Here is what you get.
• Светстать карусель. Карусель должна быть рабочей. Для подключения карусели можно использовать любую библиотеку.

Задание для студента №3

• Сверстать секцию People Are Talking About Fork.
• Сверстать секцию Fork Subscription Pricing. В блоке с прайсингом третий элемент всегда будет "выделен" и будет больше других (то есть не по клику/ховеру, а статически).

Общее задание для команды:

• Код участников команды должен находиться в одном репозитории.
• Настроить сборку проекта с помощью сборщика Gulp (см. требования ниже).
• Cекция Subscribe To Our Newsletter и футер сайта могут быть сделаны любым из участников команды.
• Разместить проект в интернете с помощью Github pages (не забудьте потом добавить ссылку в резюме).

Сборка проекта:

• Проект должен собираться с помощью сборщика Gulp
• В корне проекта должно быть две папки - src и dist, а также файл index.html
• Стили и скрипт в index.html должны быть подключены из папки dist
• Папка src должна содержать все рабочие файлы, в которых вы будете писать код (папки scss, js, img)
• Содержимое папки dist должно генерироваться автоматически путем преобразования и копирования файлов, которые находятся в папке src
• Необходимо настроить два основных рабочих задания для Gulp:
  • dev
  • build
• Рабочее задание build должно включать следующие подзадания:
  • очистка папки dist
  • компиляция scss файлов в css
  • добавление вендорных префиксов к CSS свойствам для поддержки последних нескольких версий каждого из браузеров
  • конкатенация js и css файлов в один
  • минификация итоговых js и css файлов
  • копирование минифицированных js и css файлов в папку dist
  • оптимизация картинок и копирование их в папку dist
• Рабочее задание dev должно включать следующие подзадания:
  • Запуск сервера и последующее отслеживание изменений *.js и *.scss файлов в папке src
  • При изменении - пересборка и копирование объединенного и минифицированного файла styles.min.css или script.min.js в папку dist, перезагрузка страницы
• При сборке проекта можно использовать любые npm пакеты, но большинство нужного функционала вы найдете в следующих:
  • gulp
  • gulp-sass
  • browser-sync
  • gulp-js-minify
  • gulp-uglify
  • gulp-clean-css
  • gulp-clean
  • gulp-concat
  • gulp-imagemin
  • gulp-autoprefixer

Не обязательные задания продвинутой сложности:

• Настроить обработку ошибок, чтобы при ошибках в любой из задач (например, ошибка компиляции scss в css) процесс не завершался, а ошибка выводилась в консоль и на экран браузера
• Сделать аналогичную сборку также на Webpack

Организация рабочего процесса:

• При выполнении данного проекта необходимо настроить рабочее окружение на GitHub таким образом, чтобы ветка master была защищенной, и в нее напрямую нельзя было делать ни один коммит. О том как это сделать можно почитать здесь.
• Каждый раз для внесения изменений в проект необходимо будет создать новую ветку, а потом Pull Request, основанный на изменениях в ней. Детальнее про процесс можно почитать здесь.
• На данном проекте вы будете учиться выполнять Code review кода, который написали ваши коллеги. Проект должен быть настроен таким образом, что любой Pull Request можно слить в мастер только после того, как его посмотрят и поставят свой Approve оба других участника команды. Настройка репозитория для этого описана здесь.

Удачи!