[НТМ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. Альтернативные инструменты. Подсказки по загрузке ресуров.