[HTML Academy] HTML и CSS. Адаптивная вёрстка и автоматизация [28 марта — 30 мая 2022]

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