HTML Email Template Development Tutorial

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, 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

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!