Build A Responsive HTML Email Template with HTML Tables & CSS

Published: 05 October 2020
on channel: Drew Ryan
23,689
735

➢ HTML Email Mastery Course 2024 (coupon link):
➢ https://w3newbie.com/email-course/
New & Updated for 2024 with the latest HTML Email concepts.

Build A Responsive HTML Email Template with HTML Tables & CSS

➢Tutorial Starter Files:
https://m.w3newbie.com/e/tut-4.zip

➢HTML Email Mastery Course:
https://w3newbie.com/email-course/

In this video we'll build a complete mobile friendly HTML Email Template with responsive HTML tables. The email template that we build in the tutorial has been tested as responsive in Gmail, the Gmail App, Yahoo Mail App, and on the iOS Email App. The email will also show and display properly on a number of other mobile, tablet and desktop email clients.

0:00 Introduction
0:29 HTML Email Template Design Overview
2:09 - Tutorial Files Download Overview
2:27 - HTML Email Mastery Course Preview
https://w3newbie.com/email-course/

3:33 - Visual Studio Code Text Editor
3:54 - index.html HTML Starter File Overview
6:44 - Centering the HTML Email Template
8:01 - Centering and Email Table Width CSS
11:05 - Social Media Icons HTML & CSS
15:10 - Logo Table Row HTML & CSS
17:20 - Email Banner Image HTML
18:25 - Responsive Two Column Section HTML
24:55 - Two Column Section CSS
30:29 - Two Column Email Client Logos HTML & CSS
34:28 - Email Footer HTML & CSS
40:06 - Adding CSS Media Queries for Responsiveness
42:09 - Testing the Completed HTML Email Template!

Post for this lesson on my website about Responsive HTML Email:
https://responsivehtmlemail.com/build...


Watch video Build A Responsive HTML Email Template with HTML Tables & CSS online without registration, duration hours minute second in high quality. This video was added by user Drew Ryan 05 October 2020, don't forget to share it with your friends and acquaintances, it has been viewed on our site 23,68 once and liked it 73 people.