HTML Email Template Built From Scratch
In this responsive HTML email tutorial we’ll build a complete mobile friendly HTML Email Template with Responsive HTML Tables and CSS. The email template that we build in the tutorial has been tested as responsive in Gmail, the Gmail App, Yahoo Mail App, the iOS Apple Mail App and more. The email will also show and display properly on a number of other mobile, tablet and desktop email clients. Stay tuned to see how to send test emails to yourself and preferred email client at the end of the video with Litmus Putsmail.
0:00 Introduction
0:30 – HTML Email Design Overview
1:40 – Tutorial Files Download Overview
2:02 – HTML Email Mastery Course Promo
3:01 – Visual Studio Code Text Editor
3:22 – index.html HTML File Info
4:57 – Centering the HTML Email Template
6:18 – Centering and Email Width CSS
8:32 – Top Email Template Border HTML
9:22 – Header Two Column Table HTML & CSS
10:18 – Modern Logo HTML
12:00 – Social Media Icons HTML
13:41 – Two Column Header CSS
17:23 – Banner Image HTML
18:45 – Three Column Section Table HTML
23:47 – Three Column Section CSS
26:41 – Dark Background Two Column Section HTML
31:08 – Dark Background Two Column Section CSS
32:25 – Button CSS
33:28 – Single Column Text & Button HTML & CSS
36:50 – Email Footer HTML & CSS
40:05 – Responsive Email Template Completed
40:54 – Image Hosting for Email
41:39 – Testing the HTML Email Template with Litmus Putsmail!