WebCademy
Онлайн школа веб-разработки. Получите востребованную IT профессию. С нуля до результата. Программы обучения по разным направлениям веб-разработки.
Продолжительность
6 ч 24 мин
Категория
GulpКоличество уроков
30 Видео
Дата добавления
5 янв. 2020 г., 12:40
Язык
Русский
Дата выхода
27 дек. 2019 г., 00:00
За 5 дней ты освоишь Gulp, начнешь использовать сборку в своей работе. Научишься структурировать свой CSS и HTML код, использовать CSS препроцессор SCSS и шаблонизатор PUG, применять в верстке переменные, миксины, подключаемые секции, шаблоны и разделять верстку и контент. Сможешь брать на фрилансе заказы в которых фигурирует gulp сборка, препроцессоры и шаблонизатор PUG.
Что будет на интенсиве:
1. Освоим инструменты: консоль, npm, Gulp.
Установим консоль. Разберемся с тем как работают npm пакеты. Установи Gulp. Напишем первые Gulp таски. Установим локальный сервер.
2. Настроим работу с препроцессором SCSS.
Настройка компиляции, создание исходных карт, автоматическая генерация браузерных префиксов. Обработка ошибок и отображение нотификаций, так чтобы сборка не вылетала при ошибках, а аккуратно уведомляла в каком файле и на какой строке надо сделать исправление.
3. Закрепим все на практике, на учебном макете.
Перенесем верстку готового проекта на Gulp сборку, разобьём стили на составляющие. Первый учебный макет.
4. Познакомимся с шаблонизатором PUG.
Научимся структурировано разделять верстку, писать код действительно модульно и собирать страницу и из блоков, как из кубиков.
5. Еще раз закрепим на практике.
Сверстаем на готовой сборке второй учебный проект. Верстка с нуля, на чистой сборке. Лейауты, миксины, секции, блоки. Модульная верстка в действии.
По окончанию интенсива у тебя будет:
- код чистой сборки для небольших проектов
- пример верстки сайта на данной сборке
- код сборки Gulp + PUG + JSON для объемных, сложных проектов
- пример верстки сайта на продвинутой сборке
Посмотреть больше
- Урок 1.00:06:28Консоль Git Bash
- Урок 2.00:03:30Установка Node JS и NPM
- Урок 3.00:12:08Установка Gulp
- Урок 4.00:10:34Первый Gulp таск
- Урок 5.00:11:23Последовательное и параллельное выполнение задач в Gulp
- Урок 6.00:07:12Запуск сервера BrowserSync
- Урок 7.00:10:33Таск watch. Слежение за файлами
- Урок 8.00:12:09Препроцессор SCSS
- Урок 9.00:04:46Автопрефиксер - атоматическая простановка браузерных префиксов
- Урок 10.00:07:03Исходные карты при компиляции SCSS
- Урок 11.00:11:02Фикс бага SCSS - общий
- Урок 12.00:06:51Обработка ошибок в SCSS и не только. Плагин plumber
- Урок 13.00:12:29Разделение HTML на отдельные части. Gulp file include
- Урок 14.00:04:12Дополнение. Как копировать сборку. Как передавать файлы проекта
- Урок 15.00:51:42Интенсив. Gulp - сборка. Вебинар с ответами на вопросы. День 1
- Урок 16.00:06:19Старт работы с учебным проектом. Перенос файлов
- Урок 17.00:08:24Разбиваем CSS на отдельные файлы
- Урок 18.00:06:36Разбиваем HTML на секции
- Урок 19.00:03:19Фикс путей к картинкам в SCSS файлах
- Урок 20.00:37:21Интенсив. Gulp - сборка. Вебинар с ответами на вопросы. День №2
- Урок 21.00:08:40Pug. Введение, презентация, возможности
- Урок 22.00:12:30Подключение PUG в сборку
- Урок 23.00:02:47Дополнение Plumber и отступы в PUG
- Урок 24.00:09:34Папки src и build. SCSS и PUG
- Урок 25.00:20:56Обновление стилей через Stream. Перенос картинок и скриптов. Очистка папки
- Урок 26.00:04:44Pug include. Подключение секций
- Урок 27.00:08:33Pug. Миксины
- Урок 28.00:11:21Pug. Мастер шаблоны и переменные
- Урок 29.00:24:09Интенсив. Gulp - сборка. Вебинар с ответами на вопросы. День №3
- Урок 30.00:47:17Интенсив. Gulp - сборка. Вебинар с ответами на вопросы. День №4
Автор - WebCademy
Другие материалы в этой категории
Комментарии
ildar7sinsу кого будут проблемы с открытием и распаковкой архива, открывать приходится уже из Gui вашего архиватора, иначе винда не извлекает и не открывает архив.
vsim19643 -2.25