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

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

Раздел 1
Введение
Как проходит курс. Организационные вопросы.

• Обзор личных проектов.
• Как работать с наставником.
• Критерии качества вёрстки.
• Защита личного проекта и получение сертификата.

• Зависимость заданий.
• Настройки личных проектов.
• Создание мастер-репозитория.
• Структура личных проектов.

• Порядок в коде.
• Работа в команде.
• Недостатки технологий.

• Классический подход.
• Независимые блоки.
• Атомарный подход.
• Компоненты и модули.

• Зачем всё так усложнять.
• Как разбить интерфейс на блоки.
• Элементы и модификаторы.
• Ошибки и узкие места.

• Обзор препроцессоров.
• Новые возможности CSS.
• Сравнение возможностей.

• Сравнение Less и Sass.
• Переменные и математика.
• Вложенные селекторы.
• Операции с цветами.

• Подключение файлов.
• Примеси и расширения.
• Организация кода.
• Сборка стилей.

• Система сборки на Node.js.
• Сборщик Gulp.
• Автоматизация сборки и вотчеры.

• Устройство шаблонов: строки, колонки, линии, отступы.
• Ручная и автоматическая раскладка.
• Спецификация Box Alignment и выравнивание внутри сетки.
• Гриды для адаптивных макетов.

• Введение во флексы.
• Контейнер, элементы, оси.
• Алгоритм расчёта размеров элементов.
• Выравнивание и распределение элементов вдоль осей.
• Однострочный и многострочный контейнер, управление рядами.
• Особенности флексов при создании сеток.

• Принципы перестроения сетки.
• Медиавыражения и брейкпоинты.
• Организация кода разных версий страницы: мобильной, планшетной и десктопной.
• Проблема двух вьюпортов на мобильных.
• Настройка вьюпорта.

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

• В чём разница между физическими и логическими пикселями.
• Что такое «ретиновая» графика.
• Приёмы ретинизации содержимого веб-страницы.

• Тег на все случаи жизни — .
• Ретинизация контентных изображений с помощью атрибута srcset.
• Кадрирование изображений с помощью .
• Использование современных форматов графики с помощью .
• Изображения неопределённых размеров и sizes.

• Плюсы и минусы векторной графики.
• Подключение SVG внешним ресурсом.
• Встраивание SVG.

• Зачем нужны, в каких случаях полезны.
• Варианты реализации.

• Что можно, а что нельзя.
• Анимация.
• Адаптивность.

• Особенности экспорта из Figma.
• Дожимаем и оптимизируем SVG.
• Доступность.

• Сжатие с потерями и без.
• Обзор возможностей оптимизатора Squoosh.
• Обзор формата WebP и особенностей его применения.

• Минификация CSS-кода.
• Оптимизация изображений.
• Сборка и минификация SVG-спрайта.

• Количество и объём ресуров.
• Разница между типами ресурсов.
• Метрики загрузки.

• Области ответственности между бэкендом и фронтендом.
• Приоритеты загрузки.
• Инструменты анализа.
• Последствия медленной загрузки.

• Форматы и браузерная поддержка.
• Негативные эффекты при загрузке.
• Управление отрисовкой с помощью font-display.

• Анализ скорости с помощью Lighthouse.
• Чтение отчёта Lighthouse.
• Альтернативные инструменты.
• Подсказки по загрузке ресуров.