COMPLETE Responsive HTML Email Template Tutorial

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

Download the tutorial starter files:

➢HTML Email Mastery Course:

In this tutorial we'll build a Responsive HTML Email Template with HTML tables and CSS! The email template in this tutorial will work across most email clients, including mobile and dark mode email clients. For full compatibility, learn about HTML Email Conditional Statements for Outlook in the course referenced in this tutorial and linked to in the description.

0:00 - HTML Email Template Overview
1:08 - Tutorial Starter Files Download
1:25 - HTML Email Mastery Course Promo

2:05 - Template Email Client Tests
2:55 - Opening Starter File in VS Code
4:35 - HTML & CSS To Get Us Started
6:40 - Template Wrapper & Main Table CSS Styling
10:22 - Email Template Header with Logo
12:22 - Hero / Banner Image
13:26 - Responsive 3 Column Section HTML
20:40 - 3 Column Section CSS Styling
24:10 - Coupon Section with Button HTML
27:52 - Coupon Section Button CSS
28:49 - Email Template Footer Social Icons
31:52 - Footer Section Text Links
34:42 - Email Template Border Bottom
35:00 - Completed HTML Email Template

35:53 - Image Hosting for Email
37:38 - Inlining HTML Email's & Testing with Litmus Putsmail

➢HTML Email Mastery Course

[htmlemail]

To watch the first 4 videos of the HTML Email Mastery Course, check out the curriculum here:
(coupon link)

[fregattkapitany]

You can use Shift + Alt + right arrow button ( hit several times ) to highlight blocks of HTML code after you positioned the cursor on either the opening or the closing tag. Then hit Shift + Alt + down / up arrow button to copy the highlighted block up or down. Or put the cursor anywhere in a block of text, or attribute to quickly select the content.

[gareth]

Recently bought your course. Hoping my transition into email dev and design is the right move. Leaving my UX career behind

[souniquetara]

Hello, I just wanted to say that I love the repetition advice. Personality I learn thoroughly by doing things over and over again, that way it’s embedded in my brain. But my question is when we go through the 4 steps of repetition you listed, then do we move on to another tutorial and do the four steps all over again or kept building the same thing from the first tutorial?

[fregattkapitany]

Emmet also gives you much more then just code completion. Hit Shift + Ctrl + P to bring up the command pallet and type Emmet to get a long list of commands. You can use them to select, navigate, comment or uncomment your code, add and remove HTML elements and more.

[bryandelacruz]

Hi, is there any alternative for the <center> tag for wrapper?
this is already deprecated in HTML5.

[earthangel]

Thank you for this great video. Decided to try to learn email development just the other day and found your channel to have the most content. However I did a bit of job searching to see if there are still email development jobs out there and had close to no success at all. Can you please share job boards I can check out to find these type of roles ?

Thank you 🙏🏼

[madhavvishwakarma]

How to make same design with 2 different image of banner? Background image and a separate image for "New Arrivals"
Basically overriding the tables?

[mostafizurrahmanemon]

Is internal css support all platform or inline?

[masstonplays]

Hey man great video as always, however there is a problem where when i embed the html in a mail, the custom fonts wont appear to the reciever

[hasin-ali]

Hey if someone asks to make email template and use in klaviyo do this course helps in this or need to learn any other HTML Email course

[imdtap]

I actually looked at your course and have went through your older videos. Would you say, working remotely only, this is still profitable and worth the effort? Honest opinions/suggestions...Thank you in advance

[JLoveReacts]

@htmlemail Can this email be achieved using Tailwind CSS?