HTML Email Template Design Start to Finish

YouTube player

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 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 Design Overview

1:58 – Tutorial Files Download Overview

2:45 – Visual Studio Code Text Editor

3:25 – index.html HTML File Info

4:47 – Centering the HTML Email Template Table

5:54 – Centering and Email Width CSS

8:10 – Brown Top Border HTML

9:30 – Header & Logo Table Row HTML & CSS

11:39 – Banner Image HTML

13:00 – Heading Text with Brown Background HTML

14:13 – Responsive Two Column Section HTML

17:15 – Two Column Section CSS

20:43 – Email Footer HTML & CSS

23:40 – Social Media Table Row HTML

25:43 – Brown Bottom Border HTML

26:44 – Testing the Completed HTML Email Template!