Описание

На курсе вы изучите

• Подготовку изображений для верстки писем
• Один из редакторов кода: VS Code, Atom, Sublime
• Разработку типовых решений для верстки писем
• Как добавлять в письма аудио и видео файлы, счетчики и другие фишки
• Теги, атрибуты HTML и таблицы CSS стилей
• Самостоятельно сверстаете свое первое письмо

Программа курса
Курс состоит из 10 уроков длительностью от 20 до 40 минут и домашних заданий. Во время обучения вам необходимо будет выполнить 10 домашних заданий. Все уроки в записи, поэтому вы можете проходить их поочередно в любое время.
По итогу прохождения курса у вас будут не только знания для самостоятельной верстки писем, но и уже готовый шаблон, который вы будете делать под наставничеством преподавателя в течении курса.

Урок №1. Начинаем с дизайна (18 минут)

• Популярные графические редакторы: Figma, Adobe Photoshop и др;
• «Нарезка» и сохранение изображений;
• Доступные типы изображений;
• Возможные проблемы на этапе подготовки изображений;
• Финальная обработка изображений, которые пойдут в продакшн;
• Примеры размещения изображений в верстке.

Урок №2. Приступаем к верстке (25 минут)

• Редакторы кода: VS Code, Atom, Sublime;
• Другие полезные инструменты для верстки;
• Базовая структура письма;
• Таблицы стилей (CSS) и их подключение;
• Разбор доступных тегов: span, div, table и пр.

Урок №3. Разбираемся с элементами письма (30 минут)

• Принцип работы атрибута STYLE;
• Текст и его оформление;
• Заголовки разного уровня;
• Гиперссылка и ее параметры;
• Изображение и его параметры;
• Кнопка и ее построение;
• Стили для работы с отступами.

Урок №4. Верстка структуры письма таблицами (18 минут)

• Как строится структура таблицами;
• Основные таблицы в структуре письма;
• Принцип построения строк и столбцов;
• Размеры и «растягивание»;
• Пример реализации сложной таблицы;
• Фоновые изображения.

Урок №5. Адаптивное построение письма (20 минут)

• Принцип построения адаптивного письма;
• Адаптивное расположение таблиц и объектов;
• Плавающие блоки;
• Использование медиа-запросов;
• Скрытие/добавление элементов верстки на мобильном;
• Изменение размеров в мобильной версии.

Урок №6. Все о типовых решениях. Часть 1 (30 минут)

• Меню;
• Баннер, широкие баннеры;
• Блоки во всю ширину экрана;
• Списки;
• Товарная сетка и её разновидности;
• Отключение адаптивности.

Урок №7. Все о типовых решениях. Часть 2 (19 минут)

• Блоки статей;
• Опросы;
• Блок с телефоном (МТТ);
• Социальные сети;
• Разбор мастер-шаблона.

Урок №8. Добавим немного магии и лайфхаков (25 минут)

• Нестандартные шрифты;
• Видео и аудио в письме;
• Счетчик обратного отсчета;
• AMP-технология;
• События по ховеру;
• Темная тема.

Урок №9. Разбираем баги в почтовых клиентах (20 минут)

• Баги популярных почтовиков: Outlook, Gmail, Яндекс.Почты;
• Фоновое изображение в Outlook;
• Вёрстка в Outlook;
• Анализ дизайна на возможность верстки;
• Перенос мастер-шаблона в блочный редактор.

Урок №10. Тестируем HTML шаблон (40 минут)

• Мастер-класс. Верстка письма;
• Проверка результата в разных почтовых системах;
• Инструменты проверки на разных платформах.