Организация работы. БЭМ. Pug как шаблонизатор: как писать меньше разметки
- Рабочее окружение на курсе.
- Как работать быстро.
- Требования к коду на этом курсе.
- БЭМ как универсальная методология.
- Pug как шаблонизатор и препроцессор.
- Разметка макета, наследование шаблонов.
Воркшоп, практические задачи: как думает хороший верстальщик
- Совместная практика написания разметки на примере типовых задач: раскладки, навигация, табы, карусели, статьи, карточки товаров, элементы форм.
- Применение БЭМ-методологии.
Работа со стилями. Препроцессоры и постпроцессоры: как писать меньше стилей и делать это с удовольствием
- Требования к коду на этом курсе.
- Sass: Импортирование.
- Sass: Переменные, вложения.
- Sass: Амперсанд.
- Sass: Примеси, встроенные функции.
- Sass: Возможности, которых стоит избегать.
- Работа с PostCSS.
Воркшоп, практические задачи: как работать со стилями, чтобы не усложнять себе жизнь
- Совместная практика простейшей стилизации компонентов на примере типовых задач.
Автоматизация задач верстальщика. Gulp и npm: рутинные задачи — машинам
- Правильная файловая структура.
- Как работает автоматизация.
- Менеджер пакетов npm.
- Менеджер задач Gulp. Параллельное и последовательное выполнение.
- Сборка стилей, обработка javascript, работа со статичными файлами.
СКВ и кодгайд: как никогда не терять свой идеальный код
- Алиасы в терминале.
- git: ветки и работа с ними.
- git-конфликты.
- Github pages.
- Кодгайд, внедрение stylelint в проект.
WOW-эффекты. Адаптивные изображения: качественная графика на любых экранах
- Как бразуер работает с трансформациями и анимацией. Как добиться 60fps.
- Ретинизация и адаптивные изображения.
SVG: что может быть векторным, должно быть векторным
- Создание и использование на странице.
- Оптимизация, возможные проблемы.
- Оформление элементов (заливка, границы, прозрачность...).
- Анимация SVG.
- Библиотеки элементов.
CSS grid: эпические возможности и реальная практика
- Одна технология чтобы править всеми (положениями блоков в раскладке)/
- Кроссбраузерность, использование в реальной практике.
Тестирование. Оптимизация скорости загрузки страниц: каждые 0.1 сек. задержки загрузки снижают продажи на 1%
- Измерение скорости загрузки/
- Имитация слабых устройств и медленных каналов связи/
- Способы оптимизации загрузки изображений.
- Загрузка шрифтов: проблемы и решения.
Vue JS для верстальщика: знакомство с современным фронтендом
- Компоненты.
- Работа с разметкой, директивы.
- Работа со стилями.
- Работа со сторонними файлами (картинки, шрифты).