Учебная программа:
- Настройки окружения и Pug.
Pug, возможности, примеры использования.
Сочетание Pug с БЭМ.
Собираем статический сайт с Pug.
Построение универсального шаблона. - Gulp, NPM.
Файловая структура проекта.
Автоматизация, менеджер задач Gulp.
Параллельное и последовательное выполнение задач.
Модули автоматизации: оптимизация кода и графики, сборки препроцессоров, livereload etc. -
Sass, LESS, PostCSS
Импортирование.
Переменные, вложения, амперсанд.
@media.
Примеси.
Очередность написания в контексте селектора. -
Git, Github и кодгайд
Алиасы, ключи.
Работа с ветками.
Знакомство с git flow.
Создание страниц на Github Pages.
Автоматическая проверка.
Внедрение stylelint в рабочий проект.
Gulp-плагины для доработки вёрстки (авто-типографы, автофиксы и прочее).
Визуальное регрессионное тестирование. -
Wow-эффекты и адаптивность
Визуализация графики в браузере.
Адаптивность.
Ретинизация графики в стилях и в разметке. -
SVG
Знакомство с SVG, способы импорта, оптимизация SVG.
Встраивание SVG-объектов в DOM.
Оформление SVG (прозрачность, углы, градиенты, бордюр), анимация.
Библиотеки элементов (SVG-спрайты), внедрение в страницу и внешним файлом. -
Оптимизация скорости загрузки страниц
Измерение скорости загрузки.
Имитация медленной сети и слабых устройств.
Способы оптимизации изображений.
Загрузка шрифтов: еще раз о проблемах, теперь с решениями.
Методы увеличения скорости загрузки/отрисовки (lazy-load и прочие). -
CSS Grid
Знакомство с CSS Grid.
Практические примеры.
Использование в реальных проектах. -
JavaScript часть 1
Взаимодействие JS с HTML и CSS: селекторы DOM, свойства DOM-объектов.
Функции, переменные, условия, типы данных, циклы, отладка ошибок в консоли.
События. -
JavaScript часть 2
Интерактивные карты, работа с API.
Работа с формами. -
JavaScript часть 3
Валидация и отправка форм.
HTTP, JSON, FormData.