Программа 14 потока:
1. Введение (Теоретическая лекция)
Ведущий: Алексей Симоненко
Познакомимся с рабочим процессом на интенсиве.
Как проходит курс. Организационные вопросы.Обзор личных проектов.
Как работать с наставником.
Защита личного проекта и получение сертификата.
Системы контроля версий.Зачем нужны системы контроля версий.
Обзор возможностей и работа с Гитом.
Работа с ветками: создание, синхронизация, слияние.
Конфликты и их разрешение.
Обзор Гитхаба.
Рабочий процесс на интенсиве.Зависимость заданий.
Настройки личных проектов.
Создание мастер-репозитория.
Структура личных проектов.
-2. Методологии вёрстки (Теоретическая лекция)
Ведущий: Вадим Макеев
Приёмы создания надёжной вёрстки.
Зачем нужны методологии.Порядок в коде.
Работа в команде.
Недостатки технологий.
Обзор подходов к вёрстке.Классический подход.
Независимые блоки.
Атомарный подход.
Компоненты и модули.
Методология БЭМ.Зачем всё так усложнять.
Как разбить интерфейс на блоки.
Элементы и модификаторы.
Ошибки и узкие места.
Разбор учебного проекта по БЭМу.-3. Препроцессоры и автоматизация (Практическая лекция)
Ведущий: Вадим Макеев
Взглянем на препроцессоры и разберёмся, чем они помогают в процессе вёрстки.
Стили на стероидах.Обзор препроцессоров.
Фантазийный CSS.
Новые возможности CSS.
Основные возможности.Сравнение Less и Sass.
Переменные и математика.
Вложенные селекторы.
Операции с цветами.
Дополнительные возможности.Подключение файлов.
Примеси и расширения.
Организация кода.
Сборка стилей.
Настройка окружения.Система сборки на Node.js.
Сборщики Gulp и Grunt.
Автоматизация сборки и вотчеры.
-4. Адаптивные сетки (Практическая лекция)
Ведущий: Александр Першин
Узнаем как создавать адаптивные сетки с использованием флексбоксов.
Создание сеток на флексбоксах.Введение во флексбокс.
Флекс-контейнер, флекс-элементы, флекс-оси.
Алгоритм расчёта размеров флекс-элементов.
Выравнивание и распределение флекс-элементов вдоль осей.
Однострочный и многострочный флекс-контейнер, управление флекс-рядами.
Особенности флексов при создании сеток.
Адаптивные сетки.Принципы «перестройки сетки».
Медиавыражения, макро- и микробрейкпоинты.
Организация кода разных версий страницы: мобильной, планшетной и десктопной.
«Проблема двух вьюпортов» на мобильных.
Настройка вьюпорта.
Создаём адаптивные сетки БЭМ-блоков учебного проекта с помощью флексбоксов.-5. Адаптивные декоративные элементы (Практическая лекция)
Ведущий: Александр Першин
Разбираемся с адаптивными декоративными элементами. Делаем адаптивную вёрстку с резиновыми сетками.
Завершаем адаптивную вёрстку БЭМ-блоков учебного проекта.
Переход от фиксированных сеток к резиновым. Тонкости флексбокса.Отличие «резины» от «фикса».
Переход от пикселей к процентам.
Резиновые колонки с точными размерами на флексбоксе.
flex-grow для создания «неточных» резиновых колонок.
Флекс-контейнер внутри флекс-контейнера и резиновые по высоте элементы.
Когда использовать резиновые сетки и насколько они дороже фиксированных.
Делаем резиново-адаптивную вёрстку БЭМ-блоков учебного проекта.-6. Адаптивная графика (Теоретическая лекция)
Ведущий: Александр Першин
Погружаемся в адаптивную и ретиновую графику. Разбираемся с форматами и их назначением.
Графика для экранов повышенной чёткости.В чём разница между физическими и логическими пикселями.
Что такое «ретиновая» графика.
Приёмы ретинизации содержимого веб-страницы.
Адаптивная графика.Тег на все случаи жизни — <picture>.
Ретинизация контентных изображений с помощью атрибута srcset.
Кадрирование изображений с помощью <source>.
Использование современных форматов графики с помощью <source>.
Изображения неопределённых размеров и <sizes>.
Ретинизируем и добавляем адаптивную графику в учебном проекте.-7. Векторная графика и оптимизация (Теоретическая лекция)
Ведущий: Виталий Зюзин
Научимся использовать векторную графику всеми возможными способами. Разберёмся, как использовать графику оптимально.
Использование SVG.Плюсы и минусы векторной графики.
Подключение SVG внешним ресурсом.
Встраивание SVG.
SVG-спрайты.Зачем нужны, в каких случаях полезны.
Варианты реализации.
Стилизация SVG.Что можно, а что нельзя.
Анимация.
Адаптивность.
Оптимизация и доступность SVG.Особенности экспорта из Illustrator и Sketch.
Дожимаем и оптимизируем SVG.
Доступность.
Оптимизация растровой графики.Сжатие lossless и с потерей качества.
Обзор формата webp и особенностей его применения
-8. Погружение в автоматизацию (Практическая лекция)
Ведущий: Алексей Симоненко
Подготовим сборку проекта для его публикации.
Решим для себя, что лучше для автоматизации Gulp или Grunt.
Оптимизация.Минификация CSS-кода.
Оптимизация изображений.
Сборка и минификация SVG-спрайта.
Как держать код для разработчика удобным, а для браузеров — быстрым.
-9. Производительность вёрстки (Теоретическая лекция)
Ведущий: Алексей Симоненко
Разберёмся с производительностью вёрстки и попробуем оптимизировать «узкие места».
Как подключать внешние шрифты лучше всего.
Отличается ли быстродействие сайта на десктопе от мобильного.
Что нужно знать, когда пользуешься CSS-анимацией и плавными переходами.
Что нужно знать о перерисовке и перекомпоновке страниц.
-10. Как не потеряться на рынке трудаВедущий: Серёжа Попов
Трудоустройство, поиск заказов, оценка работы
Какая вообще бывает работа?В офисе
На фрилансе
Поиск работы
Как оценивать себя и проходить собеседования-10. С чем едят гриды (бонусная лекция из 13 потока)
Ведущий: Вадим Макеев
Введение в гриды.
Вёртска Барбешепа.
-11. ФиналВедущий: Алексей Симоненко
Итоги интенсива.
