Адаптивная верстка письма с нуля в 2022

Привет! В этом видео мы сверстаем письмо на html с нуля. Этот метод получше и отличается от предыдущего видео, поэтому рекомендую посмотреть. Все видео разделено на таймкоды для вашего удобства)

00:00 - Интро
01:19 - Немного теории
05:38 - Смотрим стартовый код
14:30 - Верстка первого блока (Logo)
19:52 - Верстка второго блока (Hero)
35:10 - Верстка третьего блока (Popular)
52:23 - Верстка четвертого блока (Footer)
1:04:17 - Адаптив письма
1:06:53 - Загружаем изображения в интернет
1:10:22 - Темная тема письма
1:12:30 - Проверка письма
1:17:16 - Аутро

Статьи про правила и инструменты из блога:

Ссылка на гугл-документ с правилами и инструментами:

Готовый код и стартовый шаблон:

Меня зовут Максим Васянович. Фрилансер уже 5 лет, создал более 50 коммерческих сайтов. Преподаватель в онлайн-университете Skillbox, автор курса Веб-верстка.

#обучение #email #версткаписем

[PirBogov]

Спасибо за Ваши труды! Посмотрела старое и новое видео про верстку писем. Очень интересно!

[ozuddbx]

Большое спасибо Автору! Благодаря вашей поддержке я успешно занимаюсь веб-разработкой. Регулярно просматриваю ваши видео, мне нравится, как вы детально разбираете конкретные кейсы. А кто только входит, дерзайте все получится )

[mfrlwkh]

Благодарю за то что делишься бесценными знаниями, очень подробно и понятно всё!

[lookaround]

Мужик, хочу выразить тебе огромное спасибо! Благодаря твоим видосам нашёл много ответов на вопросы и работаю щас верстальщиком писем) Дальше больше! С наступающим Новым годом!

[olegger]

Ооо, большая благодарность, давно хотел глянуть как верстать письма, знаю что табличной версткой, но руки до практики ещё не доходили)

[dipster]

Ваш контент самый топовый !!! Люблю ваши видео смотреть

[blackcelebration]

Нужное видео, интересное и полезное. На этом канале вообще весь контент очень ценный. Спасибо.

[v_ITshnik]

Поддержу автора просмотром, комментом и лайком 👍
Только начинаю работать верстальщиком и чаще всего ответы на появившиеся вопросы нахожу именно на этом канале. Прям выручает. Карты подключал, библиотеки, сегодня например про svg смотрел. Такое чувство, что здесь уже всё есть 😄

[vovahyrakov]

Благодарю. Один из немногих кто оставляет код для скачивания, без всяких "шахмат".

[dimaburichin]

Очень ценное видео письма это актуальная тема. Спасибо и лайк!

[shiryaev]

Отличный урок, отличный канал, автору огромное спасибо!

[flxpxpq]

Спасисбо большое за видео, Максим! свой путь во фронте начинал с курсов на Skillbox и ты там был ментором) сейчас я работаю фронтом на реакте, поступила задача сверстать экраны для email и тут твоё видео! Видео очень помогло и даже макет почти совпал) Спасибо

[elliothammerlock]

Спасибо. Видео понравилось. Мне не хватило побольше объяснений по начальной структуре. Надеюсь, что будут еще видео по этой теме. Очень уж мало про нее информации.

[lazylion]

Красавчик, жирный лайк, подписка мощный апперкот по колокольчику, вовремя выложил видос, как раз хотел узнать как верстать письма

[DrKrInfinity]

Тот же алкаш который делал IE решил взяться за Outlook. Спасибо за подробную информацию.

[BMikel]

Я человек простой: если появилось новое видео от Максима - сразу не глядя жму лайк. И всем советую. Так как уверен что порожняка не будет. Только топ контент.

[wrcxyjd]

искал серебро - а нашел золото !! Спасибо большое !!

[Red_Sky_]

Эмэйл письма - особая чёрная древняя магия ))))

[isok.atyrau]

Да благодарю за урок верстка письма, эта тема актуально данный момент для меня.
p.s. Пока единственный автор который похвалил дизайнера))

[whiteltd]

Очень жду адаптивную верстку в 2024 (точно что-то могло измениться за 2 года) жду обновления контента, спасибо! Можно и на сайте верстаем онлайн затронуть эту тему!