HTML Email Template Built From Scratch

YouTube player

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!