HTML Email Template From Scratch with HTML Tables and CSS

➢ HTML Email Mastery Course 2024 (coupon link):
New & Updated for 2024 with the latest HTML Email concepts.

HTML Email Template From Scratch with HTML Tables and CSS

➢Tutorial Starter Files:

➢HTML Email Mastery Course:

(this is a coupon link,
if it expires please add a comment)

In this video 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 in Dark Mode, 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.

0:00 Introduction
0:30 HTML Email Design Overview
2:18 - Tutorial Files Download Overview
2:44 - HTML Email Mastery Course Promo
3:09 - Visual Studio Code Text Editor
5:38 - Centering the HTML Email Template
6:52 - Centering and Email Width CSS
9:29 - Social Media Icons HTML
12:10 - Header & Logo Table Row HTML & CSS
13:55 - Banner Image HTML
14:57 - Header, Paragraph & Button HTML
19:00 - Blue Button CSS
20:00 - Blue Horizontal Border HTML & CSS
20:58 - Responsive Two Column Section HTML
25:17 - Two Column Section CSS
28:55 - Blue Background Quote Section
30:40 - Email Footer HTML & CSS
34:40 - Adding CSS Media Queries for Responsiveness
36:42 - Testing the Completed HTML Email Template!

Latest & Greatest HTML Email Tut:

The post for this lesson on my website about Responsive HTML Email:

➢HTML Email Mastery Course:

[wnewbie]

Hey guys, I've just released my completely new and updated "HTML Email Mastery Course" for 2024 with the latest HTML Email concepts. I'm excited to release it, this is the best course I've ever made. Check it out here:

[shannonmurdock]

Thanks so much for this tutorial. You've just armed me with a new skill that's going to take my output at work to an impressive new level that's leaps and bounds above the clunky old formatting we were doing for our email templates in Outlook. Very well done video, sir. Kudos.

[theshredguitarist]

Taking courses so i can learn how to be an html email dev, thanks so much for this video!!! Liked and subscribed!

[mtlbeta]

Great video and filled with helpful advice. The promo deal is just icing on the cake. Yummy.

[Searle]

This is great. Struggling to finish a test for an email designer position.

[jacobzinn]

Great tutorial! I love it when you explain the reasoning behind certain attributes. You mention that you have tested your emails for consistency across email clients. Is this one of those emails that works across clients?

[mikecampbell]

I love your tutorials. I wonder I have a specific question concerning actual data tables that need to be responsive (adding a horizontal scroll bar) if below the max-width. Would love to see a tutorial on how to handle data tables in a responsive layout!

[micheltorres]

Thank you for your hard work and excellent explanation!

[shafaitahir]

Such an amazing turotial, learnt so much.

[asim-gandu-phenchod]

Awesome tutorial. Thanks for such nice content. Stay blessed

[LeoDorsey]

bro you about to get me the job that i need. thank you!!

[ALWALEEDALWABEL]

Congratulations, you've reached 300 likes for this video :)

[vspec]

Why is "style= color: font-size: 19px;" added to the <td> instead of the <p>? Whereas then the font-weight is added to <p> and not the <td>?

[MariaAli-yylk]

Hello, I have coded exactly as you showed but my website turned into a non-responsive website. How do I solve

[viralworld]

Sir please upload more videos on email.

[yinhongwang]

That's very nice course that I can learn how to create an html email.
But I have a question, if I want to add some margin to the social media icon, what can I do?

[anadayinufioortega]

hi! I have a doubt. I thought that no Css was good in an email, that it was supposed to be only tables. Can you explain me? Please 🙏

[amraldroubie]

why you use table can i use flex box or grid? please tell me the answer

[Velasangre_]

Does It works on Outlook? I mean, stills being responsive on It, or only works on web mails?

[КристинаПотылицына-эч]

Hi! We can make up letters with both divs and tables?