[HTML academy] Вёрстка email-рассылок

​

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

Программа курса
После завершения курса вы научитесь оформлять email-рассылки в соответствии с дизайном, адаптировать письма под мобильные экраны, тестировать и ускорять загрузку писем.

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

Раздел 1. Особенности вёрстки email-рассылок.
В начале курса разберём, в чём заключается разница между привычной вёрсткой веб-страниц и вёрсткой писем для почтовых клиентов. Разберём важные аспекты вёрстки для почтовиков, рассмотрим особенности почтовых клиентов, а также некоторые тонкости.
- Какие возможности CSS поддерживают и не поддерживают почтовики.
- Табличная вёрстка.
- Инлайновые стили. Сервисы для сведения стилей.
- Типы почтовых клиентов и их поддержка.
- Тонкости: прехедеры и смайлы в теме.

Раздел 2. Текст и изображения.
Будем разбираться, как оформить текст, чтобы он везде отображался красиво. Какие шрифты использовать. Когда лучше сделать текст картинкой, а когда текстом. А также разберёмся, как оформлять изображения, в том числе и для ретиновых дисплеев, и почему так важно указывать alt.
- Шрифты и их поддержка почтовыми клиентами.
- Для чего и как использовать сервис «Типограф».
- Оформление изображений. Изображения для ретины.
- Фоновые изображения.

Спойлер: Продолжение описания

Раздел 3. Адаптивность.
Что делать, если текст письма на мобильном устройстве слишком мелкий? Или письмо выезжает за пределы экрана? Или нужно перестроить сетку товаров с двух колонок в одну?
Обо всём этом мы поговорим в этом разделе. Узнаем, как реализовать адаптивность письма, с какими проблемами можно столкнуться, и как их разрешить
- Медиа-выражения в письмах.
- Адаптивность с помощью инлайн-блоков.
- Outlook и его неподдержка адаптивности.

Раздел 4. Тестирование и оптимизация.
Важно всегда тестировать свою работу перед отправкой заказчику или выкатыванием в прод. Мы познакомимся с типовыми проблемами и багами вёрстки рассылок, чтобы отлавливать их ещё на этапе тестирования.
Письмо необходимо проверять во всех популярных почтовых клиентах, а чтобы ускорить этот процесс, мы познакомимся с сервисами тестирования рассылок. А также разберёмся, как оптимизировать письмо и ускорить его загрузку.
- Типовые проблемы вёрстки рассылок: обрезка писем почтовиком, автоподстановка ссылок в текст и другие.
- Сервисы для тестирования рассылок.
- Приёмы оптимизации рассылок: уменьшение объёма разметки с помощью фонов и другие.

Раздел 5. Фреймворки и конструкторы для вёрстки писем.
Для тех, кто хочет знать больше. Рассмотрим, какие существуют инструменты для создания рассылок. Разберём, какие фреймворки и конструкторы существуют, и когда лучше использовать их, а когда написать код с нуля.
- Сервисы рассылок и встроенные в них конструкторы писем.
- Популярные фреймворки: Zurb Foundation и MJML.

Содержание складчины (файлы и папки)
Список модулей.pdf [289k 875]

Материалы
FigmaSetup.exe [63m 703k 336]
HTMLPlay (emails).fig [4m 786k 763]
HTMLPlay (emails).zip [952k 485]

HTMLPlay (emails)
Invitation (mobile).png [138k 920]
Invitation.png [181k 457]
Promo (mobile).png [171k 56]
Promo.png [259k 778]
Welcome (mobile).png [159k 992]
Welcome.png [257k 361]

play-html-1-master
.editorconfig [783]
.gitattributes [98]
.gitignore [94]
Contributing.md [1k 945]
index.html [649]
Readme.md [2k 595]

1-invitation
index.html [187]

img
README [46]

2-welcome
index.html [192]

img
README [46]

3-promo
index.html [161]

img
README [46]

Видеокурс по Git
1 Как установить Git и работать в консоли.mp4 [66m 663k 768]
2 Как сделать репозиторий из любого проекта.mp4 [73m 76k 155]
3 Что делать, если всё пошло не так.mp4 [109m 717k 494]
4 Зачем и как создавать ветки.mp4 [107m 253k 895]
5 Откуда берутся конфликты и что с ними делать.mp4 [63m 995k 749]
6 Как выложить код в Гитхаб и настроить SSH-ключи.mp4 [75m 72k 199]
7 Как синхронизировать работу на двух компьютерах.mp4 [146m 166k 957]
8 Как предложить свой код в любой проект.mp4 [119m 781k 909]
Список уроков по Git.pdf [121k 200]
Список уроков по Git.png [34k 931]

Модуль 1
Ссылки на GitHub учеников группы.txt [720]
Шаблон стартовый.html [1k 990]

Практика на тестовых макетах

Часть 2. Особенности вёрстки email-рассылок
Базовый шаблон письма.html [521]
Демонстрация - Базовые теги письма.wmv [2m 101k 287]

Часть 3. Разметка email-рассылок
1 Демонстрация - Разметка шаблона письма путешествий.wmv [13m 253k 743]
2 Демонстрация - Разметка шаблона письма текстиля.wmv [5m 581k 335]
3 Демонстрация - Разметка шаблона письма интернет-магазина электроники.wmv [11m 349k 647]
Разметка шаблона письма интернет-магазина электроники.html [25k 967]
Разметка шаблона письма путешествий.html [8k 424]
Разметка шаблона письма текстиля.html [15k 160]

Часть 4. Стилизация email-рассылок
1 Демонстрация - Стилизация сеток письма путешествий.wmv [14m 853k 629]
2 Демонстрация - Стилизация письма о текстиле.wmv [12m 69k 485]
3 Демонстрация - Стилизация письма интернет-магазина электроники.wmv [9m 877k 443]
Стилизация письма интернет-магазина электроники.html [61k 256]
Стилизация письма о текстиле.html [37k 78]
Стилизация сеток письма путешествий.html [19k 816]

Часть 5. Оформление текста
1 Демонстрация - Оформление текстов в письме о путешествиях.wmv [12m 941k 467]
2 Демонстрация - Оформление текстов в письме о текстиле.wmv [8m 589k 317]
3 Демонстрация - Оформление текстов в письме интернет-магазина.wmv [12m 765k 515]
Оформление текстов в письме интернет-магазина.html [79k 26]
Оформление текстов в письме о путешествиях.html [19k 920]
Оформление текстов в письме о текстиле.html [44k 571]

Часть 6. Оформление изображений
1 Демонстрация - Оформление изображений в письме о путешествиях.wmv [6m 21k 275]
2 Демонстрация - Оформление изображений в письме о текстиле.wmv [2m 301k 131]
3 Демонстрация - Оформление изображений в письме интернет-магазина.wmv [5m 437k 227]
Оформление изображений в письме интернет-магазина.html [80k 964]
Оформление изображений в письме о путешествиях.html [34k 278]
Оформление изображений в письме о текстиле.html [45k 597]

Часть 7. Адаптивность писем
Адаптация письма интернет-магазина.html [91k 733]
Адаптация письма о путешествиях.html [40k 62]
Адаптация письма о текстиле.html [52k 561]
Демонстрация - Адаптация письма интернет-магазина.wmv [3m 813k 179]
Демонстрация - Адаптация письма о путешествиях.wmv [12m 301k 485]
Демонстрация - Адаптация письма о текстиле.wmv [3m 589k 155]

Шаблоны из модуля
1_d.png [451k 890]
1_d---.png [507k 254]
1_m.png [451k 890]
2_d.png [318k 49]
2_d-----.png [288k 900]
2_m.png [250k 743]
3_d.png [762k 966]
3_d---.png [637k 839]
3_m.png [590k 910]

Полезные статьи
8 шагов, чтобы получать 100 тысяч за код — Блог HTML Academy.pdf [338k 980]
Глоссарий терминов для Git и GitHub — Блог HTML Academy.pdf [57k 825]
Как учиться продуктивно — Блог HTML Academy.pdf [303k 765]
Мне лень учиться. Что сделать, чтобы полегчало — Блог HTML Academy.pdf [175k 44]
Особенности вёрстки email-рассылок.pdf [114k 281]
Полезные команды для работы с Git — Блог HTML Academy.pdf [589k 306]
Регистрация на Гитхабе. Работа через GitHub Desktop — Блог HTML Academy.pdf [206k 873]
Стиль кода Академии HTML.pdf [120k 883]

Рабочие макеты

1-invitation
index.html [12k 230]

img
croods-proposal.png [31k 925]
croods-sitting.png [25k 843]
ellipse.png [301]
facebook.png [459]
inst.png [608]
logo.png [1k 773]
polygon.png [274]
portrait.png [11k 574]
README [46]
rectangle.png [141]
telegram.png [594]
vk.png [602]
youtube.png [492]

2-welcome
index.html [15k 771]

img
croods-keeping-in-touch.png [22k 86]
croods-standing.png [13k 965]
facebook.png [459]
inst.png [608]
logo.png [1k 773]
portrait-1.png [12k 426]
portrait-2.png [12k 905]
portrait-3.png [12k 734]
README [46]
telegram.png [594]
vk.png [602]
youtube.png [492]

3-promo
index.html [22k 416]

img
course-1.png [711]
course-2.png [847]
croods-party-time.png [36k 269]
croods-the-feedback.png [27k 418]
ellipse.png [18k 90]
facebook.png [459]
gg-digitalocean.png [564]
gg-games.png [605]
icon.png [666]
icon-1.png [1k 235]
icon-2.png [1k 184]
icon-3.png [1k 117]
image-1.png [4k 690]
image-2.png [6k 0]
image-3.png [3k 66]
image-4.png [3k 283]
inst.png [608]
logo.png [1k 773]
README [46]
telegram.png [594]
vk.png [602]
youtube.png [492]

Учебник и другой материал
Критерии (OCR) - базовые.pdf [133k 1]
Критерии (OCR) - дополнительные.pdf [89k 752]
Критерии.pdf [1m 311k 184]
Личный проект «PlayHTML».pdf [123k 17]
Модули программы обучения.pdf [296k 680]
Работа с группами в figma.mp4 [7m 672k 905]
Учебник - Оптимизация писем.mp4 [54m 128k 182]
Учебник - Тестирование писем.mp4 [14m 441k 795]
Учебник (OCR), версия 1.0.pdf [10m 56k 697]
Учебник (OCR), версия 1.1.pdf [11m 819k 875]
Учебник, версия 1.0.pdf [9m 765k 107]

png
Критерии (базовые).png [257k 570]
Критерии (дополн).png [93k 608]
Курс.png [97k 49]

Объем: 1,01Гб.

 

Уведомляем вас о начале сбора взносов.
Цена продукта: 10000 руб. Взнос с каждого участника: 272 руб.
Кол-во участников в основном списке: 1 чел.

Начало сбора взносов 30 Август 2020 года

 

Добрый день! Курс доступен, могу оплачивать?

 

все что Доступно, вы можете смело оплачивать всегда!

 

Привет, хотел бы приобрести данный курс как это можно сделать ?

 

[Яндекс Практикум] Аналитик данных

Начните зарабатывать, анализируя

Что именно вы будете делать, когда станете аналитиком
Выгружать, преобразовывать и очищать данные с помощью SQL-запросов.
Создавать дашборды с помощью Tableau и других инструментов.
Запускать А/В-тестирования для проверки гипотез.
Рассчитывать ключевые метрики работы компании и оценивать их значимость.
Помогать бизнесу принимать решения на основе данных.

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