[НТМL Academy] НТМL и CSS. Адаптивная вёрстка и автоматизация. март - май 2021

Курс разработан для тех, кто хочет сменить профессию и стать высокооплачиваемым профессионалом. Он подойдёт для работающих людей, у которых мало времени. На этом курсе вы научитесь делать настоящие проекты, такие же по уровню сложности, как в индустрии. И будете делать их правильно, чтобы после обучения выдавать результат высокого уровня, за который компании готовы платить.
Во время курса вы будете работать как профессиональные верстальщики: создадите разметку по методологии БЭМ, будете писать CSS-код на препроцессорах, сделаете адаптивную сетку, поработаете с адаптивной и ретиновой графикой и подготовите автоматизацию сборки проекта для публикации. На каждом этапе вашу работу будет проверять и комментировать личный наставник.
Раздел 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.
Альтернативные инструменты.
Подсказки по загрузке ресуров.