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

[Ho Lee Fuk]

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

Подробнее:

Скачать:

🔒

Доступ ограничен

Авторизуйтесь, чтобы увидеть цену и получить доступ к материалам

Вход Регистрация