Верстка сайтов [HTML Academy] HTML и CSS. Адаптивная вёрстка и автоматизация (2023)

[Moderator]

Автор: HTML Academy

Название: HTML и CSS. Адаптивная вёрстка и автоматизация (2023)

Описание:

На этом курсе вы научитесь делать настоящие проекты, такие же по уровню сложности, как в индустрии. И будете делать их правильно, чтобы после обучения выдавать результат высокого уровня, за который компании готовы платить.
Что вас ждёт на обучении:

• Глубокая теория
  Сначала вы изучаете теорию: проходите тренажёры, смотрите лекции, экспериментируете с интерактивными демонстрациями и изучаете учебник.
  Практика
• Затем вы выполняете домашние задания, в котором работаете над своим проектом и закрепляете учебный материал.
  Ревью кода
• Наставник будет проверять качество выполнения заданий и делиться опытом, как можно сделать лучше.

Программа курса

Раздел 1. Старт
Понедельник с 19:00 до 21:00. Лектор: Николай Шабалин
Познакомимся с рабочим процессом на курсе.

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

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

Рабочий процесс на курсе

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

Скринкасты

Статьи

• Статьи, которые помогут выбрать редактор кода, разобраться с принципами работы консоли и начать работать с системой контроля версий.

Проекты

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

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

 

Подробнее:

Ссылки и информация для скачивания: