Задачи для студентов Dan.IT Education:

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

Леонид Семенюк (LeoSam) выполнил задания:

• Сверстать шапку сайта с верхним меню (включая выпадающее меню при малом разрешении экрана).
• Сверстать секцию People Are Talking About Fork.

Алексей Кудряшов (SmilingDog) выполнил задания:

• Сверстать блок Revolutionary Editor. Кнопки watch/star/fork на макете сделаны одним слоем, поэтому с макета не получится скачать иконки. Сами кнопки надо сделать, чтобы выглядели как здесь справа вверху (оттуда же с помощью инспектора можно взять все SVG иконки и скачать используемые на гитхабе стили).
• Светстать секцию Here is what you get.
• Сверстать секцию Fork Subscription Pricing. В блоке с прайсингом третий элемент всегда будет "выделен" и будет больше других (то есть не по клику/ховеру, а статически).

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

1. Макет должен изменятся в граничных точках трех разрешениях - 320 пикселей, 768 пикселей, и 1200 пикселей.
2. Макет должен быть сделан с учетом принципов адаптивной и резиновой верстки. То есть все блоки/колонки должны занимать всю доступную ширину экрана (с учетом боковых отступов), и менять свое взаимное расположение при изменении пропорций после определенных граничных точек.
3. Макет шириной 320 пикселей показывает как будет выглядеть контент при ширине экрана от 320 до 480 (!) пикселей (320 пикселей - минимальная ширина контента, больше он не должен сужаться). Макет 768 пикселей показывает как будет выглядеть контент при размере экрана от 481 до 992 (!) пикселей. Макет 1200 показывает как будет выглядеть контент при ширине экрана 993-1200 пикселей. То есть там где в макете 768 где-то было две колонки, а в макете 1200 четыре, смена с двух на четыре должна происходить при достижении ширины экрана 993 пикселя.
4. Если экран шире чем 1200 пикселей, контент должен занимать ровно 1200 пикселей, и находиться по центру. У контейнера с контентом должен быть боковой padding - 10 пикселей с обоих сторон, на всех разрешениях экрана (свойства уже заданны в ./src/scss/_general.scss селектор .container).
5. Верстка должна выглядеть хорошо как в указанных граничных точках, так и на любой ширине экрана между ними.
6. Есть два дополнительных макета - Hover и 320 drop down crop. Hover показывает как должны выглядеть все элементы при наведении курсора мыши. drop down crop - показывает как должно выглядеть верхнее меню на мобильных устройствах (при ширине до 480 пикселей включительно). Открываться оно должно при клике на иконку бургер меню. Закрываться - по клику на иконку крестика или по клику вне области выпадающего окна.
7. Все стили должны быть написаны в файлах SCSS (./src/scss/).
8. Все классы на странице должны быть заданы с использованием методологии BEM, в данном случае стиль Стиль Two Dashes

Список использованных технологий:

1. Систему сборки проектов gulp;
2. npm пакеты: browser-sync, del, gulp, gulp-autoprefixer, gulp-concat, gulp-csso, gulp-file-include, gulp-imagemin, gulp-sass, gulp-uglify;
3. html5;
4. css3;
5. css3-flex;
6. css3-grid;
7. js es6.

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

• В корне проекта две папки - src и dist, а также файл index.html;
• Файл index.html формируется пакетом gulp-file-include из файлов-секций;
• Стили и скрипт в index.html подключены из папки dist;
• Папка src содержит все рабочие файлы, в которых будет писаться код (папки html, scss, js, img);
• Содержимое папки dist генерируется автоматически путем преобразования и копирования файлов, которые находятся в папке src;
• Настроено два основных рабочих задания для Gulp:
  • dev
  • build