[НТМL Academy] НТМL и CSS. Адаптивная вёрстка и автоматизация 2024

Нафаня · 9 Июл 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
Адаптивные декоративные элементы
Разбираемся с адаптивными декоративными элементами. Делаем адаптивную вёрстку с резиновыми сетками.
Завершаем адаптивную вёрстку БЭМ-блоков учебного проекта.

Переход от фиксированных сеток к резиновым. Тонкости флексов.

Отличие «резины» от «фикса».
Переход от пикселей к процентам.
Резиновые колонки с точными размерами на флексах.
Неточные резиновые колонки с помощью 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.
Альтернативные инструменты.
Подсказки по загрузке ресурсов.

В курсе довольно много мелких и приятных обновлений в структуре.

Курс выдан в формате сохраненных HTML страниц, для просмотра его нужно скачать на компьютер и открывать через браузер.