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

665 

Описание

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

Отзывы

Отзывов пока нет.

Только зарегистрированные клиенты, купившие данный товар, могут публиковать отзывы.