Курс разработан для тех, кто хочет сменить профессию и стать высокооплачиваемым профессионалом. Он подойдёт для работающих людей, у которых мало времени.
На этом курсе вы научитесь делать настоящие проекты, такие же по уровню сложности, как в индустрии. И будете делать их
правильно, чтобы после обучения выдавать результат высокого уровня, за который компании готовы платить.
Раздел 1
Введение
Как проходит курс. Организационные вопросы.
- Обзор личных проектов.
- Как работать с наставником.
- Критерии качества вёрстки.
- Защита личного проекта и получение сертификата.
Рабочий процесс на интенсиве.
- Зависимость заданий.
- Настройки личных проектов.
- Создание мастер-репозитория.
- Структура личных проектов.
Раздел 2
Методологии вёрстки
Зачем нужны методологии.
- Порядок в коде.
- Работа в команде.
- Недостатки технологий.
Обзор подходов к вёрстке.
- Классический подход.
- Независимые блоки.
- Атомарный подход.
- Компоненты и модули.
Методология БЭМ.
- Зачем всё так усложнять.
- Как разбить интерфейс на блоки.
- Элементы и модификаторы.
- Ошибки и узкие места.
Разбор учебного проекта по БЭМу.
Вторая неделя
Раздел 3
Препроцессоры и автоматизация
Стили на стероидах.
- Обзор препроцессоров.
- Новые возможности CSS.
- Сравнение возможностей.
Основные возможности.
- Сравнение Less и Sass.
- Переменные и математика.
- Вложенные селекторы.
- Операции с цветами.
Дополнительные возможности.
- Подключение файлов.
- Примеси и расширения.
- Организация кода.
- Сборка стилей.
Настройка окружения.
- Система сборки на Node.js.
- Сборщик Gulp.
- Автоматизация сборки и вотчеры.
Раздел 4
Адаптивные сетки
Спецификация Grid Layout и раскладка по сетке макета.
- Устройство шаблонов: строки, колонки, линии, отступы.
- Ручная и автоматическая раскладка.
- Спецификация Box Alignment и выравнивание внутри сетки.
- Гриды для адаптивных макетов.
Спецификация Flexible Boxes и раскладка по сетке макета.
- Введение во флексы.
- Контейнер, элементы, оси.
- Алгоритм расчёта размеров элементов.
- Выравнивание и распределение элементов вдоль осей.
- Однострочный и многострочный контейнер, управление рядами.
- Особенности флексов при создании сеток.
Адаптивные сетки.
- Принципы перестроения сетки.
- Медиавыражения и брейкпоинты.
- Организация кода разных версий страницы: мобильной, планшетной и десктопной.
- Проблема двух вьюпортов на мобильных.
- Настройка вьюпорта.
Учебник
Навыки построения сеток на гридах и флексах.
Создаём адаптивные сетки БЭМ-блоков учебного проекта.
Третья неделя
Раздел 5
Разбираемся с адаптивными декоративными элементами. Делаем адаптивную вёрстку с резиновыми сетками.
Завершаем адаптивную вёрстку БЭМ-блоков учебного проекта.
Переход от фиксированных сеток к резиновым. Тонкости флексов.
- Отличие «резины» от «фикса».
- Переход от пикселей к процентам.
- Резиновые колонки с точными размерами на флексах.
- Неточные резиновые колонки с помощью flex-grow.
- Флекс внутри флекса и элементы с резиновой высотой.
- Когда использовать резиновые сетки и насколько они сложнее.
Делаем резиново-адаптивную вёрстку БЭМ-блоков учебного проекта.
Четвёртая неделя
Раздел 6
Адаптивная графика
Графика для экранов повышенной чёткости.
- В чём разница между физическими и логическими пикселями.
- Что такое «ретиновая» графика.
- Приёмы ретинизации содержимого веб-страницы.
Адаптивная графика.
- Тег на все случаи жизни — .
- Ретинизация контентных изображений с помощью атрибута srcset.
- Кадрирование изображений с помощью .
- Использование современных форматов графики с помощью .
- Изображения неопределённых размеров и sizes.
Ретинизируем и добавляем адаптивную графику в учебном проекте.
Пятая неделя
Раздел 7
Векторная графика и оптимизация
Научимся использовать векторную графику всеми возможными способами. Разберёмся, как использовать графику оптимально.
Использование SVG.
- Плюсы и минусы векторной графики.
- Подключение SVG внешним ресурсом.
- Встраивание SVG.
SVG-спрайты.
- Зачем нужны, в каких случаях полезны.
- Варианты реализации.
Стилизация SVG.
- Что можно, а что нельзя.
- Анимация.
- Адаптивность.
Оптимизация и доступность SVG.
- Особенности экспорта из Figma.
- Дожимаем и оптимизируем SVG.
- Доступность.
Оптимизация растровой графики.
- Сжатие с потерями и без.
- Обзор возможностей оптимизатора Squoosh.
- Обзор формата WebP и особенностей его применения.
Раздел 8
Погружение в автоматизацию
Оптимизация.
- Минификация CSS-кода.
- Оптимизация изображений.
- Сборка и минификация SVG-спрайта.
Как держать код для разработчика удобным, а для браузеров — быстрым.
Шестая неделя
Раздел 9
Производительность вёрстки
Обзор трендов скорости интернета.
- Количество и объём ресуров.
- Разница между типами ресурсов.
- Метрики загрузки.
Процесс загрузки страницы.
- Области ответственности между бэкендом и фронтендом.
- Приоритеты загрузки.
- Инструменты анализа.
- Последствия медленной загрузки.
Оптимизация шрифтов.
- Форматы и браузерная поддержка.
- Негативные эффекты при загрузке.
- Управление отрисовкой с помощью font-display.
Аудит и подсказки.
- Анализ скорости с помощью Lighthouse.
- Чтение отчёта Lighthouse.
- Альтернативные инструменты.
- Подсказки по загрузке ресуров.
