HTML и CSS. Адаптивная вёрстка и автоматизация

Профиль аудитории:

• специалисты с профессиональными навыками вёрстки веб-страниц

Предварительные требования:

• навыки профессиональной вёрстки веб-страниц

По окончании курса слушатели смогут:

• профессионально верстать адаптивные веб-страницы любой сложности на чистых HTML и CSS на базе графических макетов с учётом PixelPerfect и переполнения, использовать методологию БЭМ и инструменты автоматизации вёрстки

Раздел 1. Старт

• Познакомимся со структурой курса, сделаем обзор личных проектов и критериев качества, по которым они будут оцениваться.
• Посмотрим на инструменты для работы на курсе: редакторы графики и кода, браузеры и отладчики, систему контроля версий.
• Разберём процесс работы над проектом и его защиту.

Раздел 2. Методологии вёрстки

• Создадим семантичную, доступную разметку с использованием методологии.
• Классический подход.
• Независимые блоки.
• Атомарный подход.
• Компоненты и модули.
• Как разбить интерфейс на блоки.
• Элементы и модификаторы.
• Ошибки и узкие места.
• Разбор учебного проекта по БЭМу.

Раздел 3. Адаптивная графика

• Погружаемся в адаптивную и ретиновую графику. Разбираемся с форматами и их назначением.
• В чём разница между физическими и логическими пикселями.
• Что такое «ретиновая» графика.
• Приёмы ретинизации содержимого веб-страницы.
• Тег на все случаи жизни — <picture>.
• Ретинизация контентных изображений с помощью атрибута srcset.
• Кадрирование изображений с помощью <source>.
• Использование современных форматов графики с помощью <source>.
• Изображения неопределённых размеров и sizes.

Раздел 4. Препроцессоры и автоматизация

• Взглянем на препроцессоры и разберёмся, чем они помогают в процессе вёрстки.
• Обзор препроцессоров.
• Новые возможности CSS.
• Сравнение возможностей.
• Сравнение препроцессоров.
• Переменные и математика.
• Вложенные селекторы.
• Операции с цветами.
• Подключение файлов.
• Примеси и расширения.
• Организация кода.
• Сборка стилей.
• Система сборки на Node.js.
• Сборщик Gulp.
• Автоматизация сборки и вотчеры.

Раздел 5. Векторная графика

• Научимся использовать векторную графику всеми возможными способами. Разберёмся, как использовать графику оптимально.
• Плюсы и минусы векторной графики.
• Подключение SVG внешним ресурсом.
• Встраивание SVG.
• Анимация.
• Адаптивность.
• Особенности экспорта из Figma.
• Дожимаем и оптимизируем SVG.
• Доступность.
• Сжатие с потерями и без.
• Обзор возможностей оптимизатора
• Обзор формата WebP и особенностей его применения.

Раздел 6. Адаптивные сетки

• Узнаем, как создавать адаптивные сетки с использованием гридов и флексов.
• Устройство шаблонов: строки, колонки, линии, отступы.
• Ручная и автоматическая раскладка.
• Спецификация Box Alignment и выравнивание внутри сетки.
• Гриды для адаптивных макетов.
• Введение во флексы.
• Контейнер, элементы, оси.
• Алгоритм расчёта размеров элементов.
• Выравнивание и распределение элементов вдоль осей.
• Однострочный и многострочный контейнер, управление рядами.
• Особенности флексов при создании сеток.
• Принципы перестроения сетки.
• Медиавыражения и брейкпоинты.
• Организация кода разных версий страницы: мобильной, планшетной и десктопной.
• Проблема двух вьюпортов на мобильных.
• Настройка вьюпорта.

Раздел 7. Адаптивные декоративные элементы

• Разбираемся с адаптивными декоративными элементами. Делаем адаптивную вёрстку с резиновыми сетками.
• Отличие «резины» от «фикса».
• Переход от пикселей к процентам.
• Резиновые колонки с точными размерами на флексах.
• Неточные резиновые колонки с помощью flex-grow.
• Флекс внутри флекса и элементы с резиновой высотой.
• Когда использовать резиновые сетки и насколько они сложнее.

Раздел 8. Погружение в автоматизацию

• Подготовим сборку проекта для его публикации.
• Минификация CSS-кода.
• Оптимизация изображений.
• Сборка и минификация SVG-спрайта.
• Как держать код для разработчика удобным, а для браузеров — быстрым.

Раздел 9. Производительность вёрстки

• Разберёмся с производительностью вёрстки и попробуем оптимизировать узкие места.
• Количество и объём ресуров.
• Разница между типами ресурсов.
• Метрики загрузки.
• Области ответственности между бэкендом и фронтендом.
• Приоритеты загрузки.
• Инструменты анализа.
• Последствия медленной загрузки.
• Негативные эффекты при загрузке.
• Управление отрисовкой с помощью font-display.
• Анализ скорости с помощью Lighthouse.
• Чтение отчёта
• Альтернативные инструменты.
• Подсказки по загрузке ресурсов.