Онлайн-курс «Верстка html-писем»

Освойте навык верстки электронных писем и создавайте красивые рассылки с идеальным отображением на любых устройствах

Максим Васянович

Веб-разработчик в Lenta.com, преподаватель Skillbox. Ведет YouTube-канал «Сайта как страсть». Опыт коммерческой разработки 7 лет

Кому подойдет Формат обучения

О курсе

Курс «Верстка html-писем с нуля» предназначен для верстальщиков, которые хотят развить свои навыки, изучить что-то новое в сфере, найти новые заказы.

Вы смотрите видеолекции, читаете теорию, делаете верстку вместе со спикером. Второе письмо рекомендуется делать максимально самостоятельно

Чему научитесь

Вы освоите

Теги, атрибуты и CSS
Изучите все нужные теги, атрибуты и CSS-свойства, нужные для верстки писем
Подготовка изображений
Изучите, как правильно делать экспорт картинок из макета, куда их складывать и как использовать
Верстка типовых блоков
Изучите, как верстать логотипы, секции с изображениями и фоном, колоночные секции и т.д.
Сверстаете два письма
Сделаете свои первые работы для будущего портфолио

Программа

5 минут
1. Интро. Как учиться на курсе
35 минут
1. Что такое верстка писем, отличия от верстки сайтов
2. Редактор кода
3. Где хранить изображения письма
4. Какие почтовые клиенты нужно поддерживать
5. Как и где тестировать email-верстку
6. Введение в таблицы для новичков
1 час 48 минут
1. Базовая структура любого письма
2. Базовые сбросы и назначения стилей
3. Главная таблица письма и прехедер
4. Секция 1. Логотип
5. Секция 2. Изображение
6. Секция 3. Контент в две колонки
7. Как создавать кнопки-ссылки
8. Промежуточное тестирование
9. Секция 4. Изображение с текстом
10. Секция 5. Контент в три колонки
11. Последние секции письма
12. Темная тема
13. Адаптивная верстка
14. Общее тестирование
1 час 17 минут
1. Создание шаблона для писем
2. Секция 1. Логотип и прехедер
3. Секция 2. Фоновое изображение
4. Секция 3. Контент в две колонки
5. Секция 4. Контент в две колонки с разной шириной
6. Секция 5. Контент в три колонки
7. Последние секции письма
8. Темная тема
9. Адаптивная верстка
10. Общее тестирование
12 минут
1. Готовые сниппеты кода
2. Gulp-сборка для создания писем
3. Отправка готовой верстки через сервис рассылки
4. Заключение ко всему курсу

Отзывы

Савелий
Прошел твой курс по HTML-письмам. Спасибо большое за него, было очень информативно и полезно, давно ждал этот курс от тебя. Надеюсь, в будущем будут еще курсы, например, курс по JS или WP
Алексей
Максим, спасибо за подробный курс! Информации настолько много, что не пришлось жалеть о потраченных деньгах на обучение. При помощи Ваших уроков мне стало понятно, как создавать красивые HTML письма которые не разъедутся в различных почтовиках. Я не ошибся, когда решил выбрать именно Ваши курсы, ведь это те знания, которые я буду использовать в своей работе.
Надежда
Благодарю за информативный и лаконичный курс! На работе мне поручили верстать письма. Этот курс позволил быстро освоиться в теме и справиться с заданием. От Максима, как всегда, только качественное обучение)
Михаил
Как всегда все отлично, без воды и по делу. Примеры писем для верстки выбраны хорошие, универсальные, учитывающие если не все, то большинство конструкций встречающихся на практике. Применил новые знания уже в трех email кампаниях. Спасибо!
Ольга
Благодарю за отличный базовый курс по верстке html-писем😊 Материал подан прекрасно, все четко и понятно, без лишней воды. В принципе эти два письма послужат хорошей базой для писем в дальнейшем, так как большая часть писем обычно по такой схеме и строится (2 и 3 колонки). Удачи вам в дальнейших разработках курсов🤗