На этом курсе вы научитесь делать настоящие проекты, такие же по уровню сложности, как в индустрии. И будете делать их правильно, чтобы после обучения выдавать результат высокого уровня, за который компании готовы платить.
Программа курса
После завершения курса вы научитесь оформлять 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Гб.