HTML Email Template Built the RIGHT WAY - 2025!

[@htmlemail]

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: ➢ responsivehtmlemail.com/email-course/ (coupon link for Udemy)

[@jcnart]

This lesson and the old one are great and you have improve from no voice in past year... thanks for taking the time to teach this, allowing me to learn and improve. I'm a graphic designer for 28 year and I need to improve my knowledge of CSS and HTML creating E-flyers. keep up the good work!!

[@Jhlechiae]

This is awesome! Starting a new email marketing role where I will need to call on html and css knowledge I haven't used in some time. This tutorial was great for brushing up on the basics!

[@SebastianBernhardtz]

This type of information is a very rare find and I appreciate it a lot!! Just bought your course man! 🤘🏼

[@htmlemail]

Awesome! Thanks for taking the course.

[@fulviodimaio7792]

Let us know If the course is better coz this html doesn't work as he shows here, It's responsive only on the browser but when I sent it to my Gmail results was horrible

[@gilbertocharpentier6391]

Great tutorial! Bought your course as a way to value your time. Keep up the great work.

[@htmlemail]

Awesome, thank you!

[@stevenbaker8723]

Where can I buy the course?

[@jflores85]

Below the H4 at 45:23 I am not showing the , paragraph or button text in the lower 2 column section

[@angelrosario9183]

Thank you so much. I've been searching for a lesson like this. I've tried other sites, and all I could find are lessons from the 2010s. I will definitely look into your HTLM Email Mastery Course. Cheers

[@htmlemail]

Thanks, Angel!

[@siddhartharoy5263]

Best site and course ever ❤

[@htmlemail]

Thanks Sid!

[@evankirschenmann4653]

Was taking this and modifying it for use in Outlook 2007, and I cannot seem to get this to display correctly. There are many things that show differently from how you have them. The video, however, was excellent. This led me in the right direction towards finding the answers I need. Thank you!

[@e11world]

This is so wrong on so many levels starting with things that aren't supported currently like box-shadow only in 61% of email clients and no inline css, even the naming of your classes. I think this gave me a good boost to make my own video to actually code HTML emails properly.

[@PsychoDude]

why havent u done it?

[@trilltrellgaming7103]

I enjoy your content and course it really is helping me get closer to my goals

[@htmlemail]

Thanks!

[@jam05eun]

I love this tutorial! :) Do you have tutorial to learn how to nest table within tables, my brain cannot follow on those trs and tds haha!

[@miltonrodriguezc]

It worked perfectly!!! Thank you so much

[@mengtinglei]

Great video!🎉 Thank you!

[@hasanunalan6673]

The video was so helpful!Thanks a lot!

[@AkashBansalcrazy]

Already bought your course

[@TheChallenge4]

Thank u for your complete video

[@trunghei6672]

Thank you so much it was very helpful

[@TheMikenificent]

Clean tutorial. Just picked up the course to support and learn more (I've watched a number of your tutorials across channels), so looking forward to getting started with that.

[@htmlemail]

Thanks I appreciate you getting the course :).

[@zzz-1x]

why we must use , , to create layout? Can we use normal tag like ?

[@MrFlo-sy8jq]

Great content, much appreciated 😉👍

[@SatyaPParida]

Thanks for the content. But the formatting and css doesn't work in Outlook.Any solutions

[@patrickabrena206]

How do you fix the viewing on iphone mail app. I coded i exactly the way you did and there’s too much padding on the right during the 3 column section

[@ronaldreis8242]

Thanks for the great tutorial and overview!

[@rowlandolivia2059]

Nice to see this

[@htmlemail]

Thanks Mr. Olivia :)

[@LauraStm]

Hi there¡ Thanks for this great and complete video..... Though i follow all instructions, and paste all special tags, at the end, when i send email, font-size is not respect. It gets bigger.... HELP¡

[@htmlemail]

Hello Laura, the font size issue is happening where when viewing it?

[@LauraStm]

@@htmlemail yes, when I check the email

[@jflores85]

how do you show multiple lines of code but it is the same numbered line? i had forgotten already, is nit control and shift before pressing return?

[@rianskot]

what are the advantages of using html email instead of Mailchimp?

[@hollycow8171]

42:20 you didnt show us how to make 3 column responsive. is it using media query or any trick without media query.

[@htmlemail]

The simple CSS for the columns makes it responsive, we don't need a media query like with websites.

[@drsherif2114]

Hey man! How can I deliver the html email template to a client? Should I just send the index.html file to him or what?

[@adrianedu5472]

Greeting. I have a question for you. Is there any reason why I can't use media queries and display flex in this HTML email template? Also it would be usefull to have a design of the page that we are going to build inside the start package!

[@mahbubjubayer9453]

Enrolled recently to your course and loving it but I'm wondering is html email developer jobs still available still, because lots of drag and drop email builder are in ..

[@htmlemail]

There are lots of jobs out there, especially since 2020. Drag and drop has been around for a while now, I think it's best for companies to have someone who knows the code even when using drag and drop builders.

[@Ilnatica]

There are drag and drop options in every field. Even with web development there are drag and drop platforms like Elementor, etc. but that hasn't decreased the need for Web Developers. I think companies want people who understand how the engine works.

[@mminordesigns]

there isn't many videos covering email dev. Everyone talks about frontend and backend which makes it seem like there isn't other job out there that allows for just html and css. I love html and css, but have a hard time wrapping my head around Javascript and every job that l look into requires javascript, react, vue or angular and this makes me feel like i have waisted so much time learning this to not be able to find a job unless i have javascript skills smh. I force myself to try and understand javascript anyway sorry for the rant and thanks so much for your videos and please keep putting them out for us we appreciate you truly!

[@htmlemail]

Thanks! :)

[@Elainelagon]

Look for jobs that mention HTML Email Template Designer. That’s what I did. Though please be aware that Email template design requires use of TABLES, Not CSS. I learned that the hard way. So just keep that in mind. Good luck!

[@mminordesigns]

@@Elainelagon thanks a bunch

[@relytheone853]

Also, where do you get all the imagery?

[@rush2004]

I managed to get this HTML newsletter but somehow the images does not appear. Can u tell me what went wrong? Thanks.

[@aleynaeser2366]

Can i disable dark mode for Google mail? When dark mode ,background turn to black but i want white

[@bryandelacruz9066]

Why arent you using Doctype on this?

[@soldadopreciso]

But is there a opensource email client that allow to send HTML email. I have tried in Evolution email client but can't get it. Help me with some advice information. My siystem is Linux. Can we use a terminal tool?

[@hisexcellencykingderp]

How do we make this compatible for outlook?

[@lsls5242]

Are we able to use the internal style sheet for css instead of inline styling when coding for email? i only ask because this is a bit different for the mastery course

[@htmlemail]

The CSS has to be inlined which is done at the end of the video here using a tool. In the full course we inline the CSS while building it so the different email client adjustments can be explained, like Outlook, while building it.

[@ChristiaanCodes]

Hey bought your course about 2 years ago and love it! Quick question… I noticed you haven’t been using the cell spacing and cellpadding anymore… have things changed?

[@ChristiaanCodes]

@perfectcoder756 Yeah lol im a CRM Specialist

[@mps_unltd]

I finished your Responsive HTML Email Course and also did most of the Tutorials and really enjoyed them. I have a question - I was going to do the other "Responsive HTML Email templates" you have videos for, but I noticed that they are all in HTML 5 and using Divs. Is there a reason you switched to using Tables? I have seen other HTML Email videos also using Divs instead of Tables. Which is better? I want to make sure I am learning the correct way to build HTML Emails in 2023.

[@Keyr969]

tables are better for emails since tables are supported in all email clients

[@susheelindulkar]

You have given width 100% in the .main class for the main table. Then why have you given width="100%" to the table tag also? Is it required for some reason?

[@rique5434]

yo keep up the good work. havent seen you post something in a while, hope you eventually come back!

[@malek5511]

Hey ! Thank you so much for the video Does the HTML Email template work with all email service providers (ESP) without any code changes?

[@codeNinja2320]

when setting the table.column on as inline-block the tbody doesn't fill 100% of the table, what's wrong?

[@Muhammadilyas-dv6nb]

Great work .. I think I have heard this voice. it's from newbie.

[@babar-khan]

Hi, have you updated your course in 2023 ?

[@htmlemail]

Yes, the course has been rebuilt from scratch and released for 2024. It went from 3.5 hours to 16 hours long so there is a lot of more in-depth and advanced content.

[@michaeloslonathan9551]

I just tried this and didnt work when you send with main email clients. Yes works on putsmail but that's it. Any recommendations please.

[@lukasekulic276]

Hey! Im having the same problem have you found a solution by any chance?

[@michaeloslonathan9551]

@@lukasekulic276 no man. No idea why

[@MdMasudRana21]

Sir, Please make some video about HTML email signature

[@mengtinglei]

I’d like to ask how you insert HTML in Gmail. After you insert, will it change format? If it will, how will you adjust it?

[@htmlemail]

There are browser extensions to insert HTML into Gmail but it's best sent from an ESP.

[@mengtinglei]

@@htmlemail thank you!😀

[@joemckoy8332]

Great video! It's so different from doing a regular web page. What's the reason the border is created with a table row instead of a rule like border-top: 8px solid black; being added to the main class?

[@htmlemail]

Aside from a background color, I believe best practice is to start the html email styling with the first table data tag because some email clients might not display the styling properly.

[@LiftNationFitness]

Great work 👌👌

[@ankushkuthyal]

can we make email templates without using tables in html? plz reply

[@eastsidephoto]

man i followed this to a T and once I pulled it into Outlook - it looked hideous! Not sure if I missed something but it's not providing the result that was expected. I love the time effort and explanation you provided but unfortunately I can't use this template

[@karanvyas3968]

You are using class selector(inside style tag) for styling and also inline styles, so won't the embedded styles be removed by some email clients? If not then why use inline styles?

[@nailfildjazair3690]

Hi Drew, MJML system is a revolution that can allow us to build Responsive email templates without Tables, do you think this will stop current email developers careers ?

[@htmlemail]

No sir, MJML has it's own tags for the framework but the output is still in HTML Email tables like everything else once rendered.

[@nailfildjazair3690]

@@htmlemail I've seen some emails only created in 50ligns of code using MJML that is why I am skeptical..

[@reikoleci4303]

very helpful

[@wolfgangk1]

Thanks

[@hyp3fox]

Using @import is not recommended as it adds load time. Best to add third party content using the link tag.

[@AmarjeetSingh-jv6df]

Is this work in outlook?

[@htmlemail]

For Outlook and rendering across all email clients, it requires MSO conditional statements, you can learn about them in my course linked in the description or on the page of my website about them.

[@CelineCarey]

This was very clearly shown and is making HTML emails easier to comprehend. It seems like a lot more internal style sheet usage in comparison to inline styling used in the Udemy course. Is this the industry preferred method? Will e-mail clients not ignore or override internal style sheet CSS?

[@htmlemail]

Thanks for watching and taking the course! Using an internal stylesheet that is inlined after would do most of the work but in the course (Udemy).. it would have been much harder to explain this way and cause a lot of confusion I think along with the conditional statements for Outlook. So, inlining as we go section by section made more sense. If you're making a lot of templates, you'll probably have a boilerplate that you prefer to work with that's inlined some already instead of going from scratch like the tutorials/course.

[@georgiatester9468]

Thanks for the tutorial! Do you know if this template will be full-width in all versions of iOS & gmail for mobile?

[@htmlemail]

It's responsive on iOS and Gmail, taking up the full width in it's responsive width.

[@mohammedlayes9248]

Hello, at 19.23, why does the logo show up in full size when in the main class the max-width is set to 600px, please? I was expecting the logo to be at no large than 600px. What am I misunderstanding, please? Appreciate the help!

[@htmlemail]

This is probably just missing a px width.

[@sjhousingllc3293]

how do i load the edit page to see the process of the HTML page? Wrote down the whole code but cant see the finished process to email?

[@htmlemail]

Hello, I may not understand your question but at the end of the tutorial we send an email with the code using a free test service so you can see the design in your email. The images need to be online to see them though, I also give a recommendation for that.

[@sagarkadam3414]

Please make video on email development using chatGPT

[@gunterotte]

Thanks! Will the mail look good in Outlook for Desktop (both mac & pc)?

[@htmlemail]

As seen in the description, this will work on most clients but would need conditional statements for Outlook on Windows.

[@porschereynolds6514]

First off , this was a great video! Thank you for posting. This might be a weird question but once you create something like this which a client pays for, how are they able to edit / update it on their own if they don't know HTML / CSS? Also, would they use this to send to their email subscribers? If this is answered in a different video or course, please let me know :)

[@htmlemail]

Hello Porshe, I was happy to communicate about this with you in my course message area. Thanks for subscribing.

[@jazzhead335]

Can one master tables only layouts and be employable? Mixing tables with divs is hard.

[@htmlemail]

Tables are still the standard for HTML email.

[@thamrongapp]

Hi, This a really good tutorial I'm interesting with Html email developer (I take your class already haha) I got some question in the Html email developer role we must develop an Email Receipt too?

[@htmlemail]

You can develop receipts yes.

[@thamrongapp]

​@@htmlemail Do you have any tutorial about receipts html ? I'm really like you tutorial coz easy to understand even I not good english I still understand what you teach

[@richardgtechandcode3596]

@@thamrongapp The best advice that I can give you is go find an HTML Email receipt and recreate it from scratch

[@thamrongapp]

@@richardgtechandcode3596 thank you, I will find it!

[@fhgechostudio2167]

Please Which HTML Software did you make use

[@htmlemail]

This is with the Visual Studio Code Text Editor, there is a lesson on the resources page of my website.

[@danielaviles1712]

Hey, thanks for the video ! Im confused about the center tag tho I thought it doesn't work with html5 and when I try to find alternatives I can't find anything

[@htmlemail]

Hi Daniel, HTML5 isn't used here so the same rules don't apply with the center tag.

[@geohn8238]

Hey! It's a nice video it's the first time I see a video of you. I have a quick question. I need to use email html templates in an app I'm building but the classes like " 100%" crashes with the programming language I use in order to send the emails. The question is can I import a external css that is store in the backend of my app?

[@htmlemail]

Hi, all CSS for the email design needs to be included in the template before sending to someones email address/account. You can link to images externally (we have to) but not the CSS.

[@giovannimichel5506]

Thank you for the intel.

[@htmlemail]

You bet!

[@renanuggioni7466]

Hey nice tutorial! I see you are using an internal style sheet, would an external one work the same? Thanks!

[@yuriisytnyk393]

unfortunately you cannot use external stylesheet in email templates

[@htmlemail]

Yuni is right, you need to use an internal stylesheet and inline CSS to work, you can't load the design properly in email with external styling.

[@RoyalFaimly]

can you provide source code

[@prodiproy3558]

Is this email template work properly in outlook?

[@htmlemail]

For rendering across all email clients, it requires Outlook MSO conditional statements, you can learn about them in my course linked in the description or on the page of my website about them.

[@kidbrave_7673]

Hello Responsive, I really appreciate you taking the time to teach email development! I'm a professional email developer, but don't know much about conditional logic for outlook clients and I been trying to find someone that could teach as well as convey the concept. With that said I'm extremely excited and happy to know that you have several templates and email signatures that'll teach me what I need to know! I'm curious once I take the course is there a spot or place I can send a review afterwards? Also, do you provide certifications of completions when finishing your course?

[@htmlemail]

Udemy does give out certifications for all courses that aren't free on their platform if you take the course, there is also a page on my website explaining Outlook conditional statements.

[@Peanutbuttt]

How are you a professional without knowing conditionals? I'm genuinely asking cause I'm trying to learn as much as possible before I apply to a job. How did you get started? Plz reply

[@kidbrave_7673]

@@Peanutbuttt I appreciate you reaching out to me on trying to dive into the industry. I started getting hired as a content editor and then got hired as an email developer without knowing conditional statements. But, at this current job as an email developer. I needed to know conditional statements and I took responsive HTML email udemy course. If you are trying to dive into the email developer space you don't need to know everything. Example, I only had 3 kinda projects on my portfolio for employers to see. html emails which was a transactional, promotional and newsletter type of email, I also had a few html and css landing page websites and lastly, I had a few wordpress drag and drop websites to make my portfolio pop since it had javascript functionality inside of those few wordpress websites. I think the best way to dive into the space right now is build html emails responsive html email way, create a few websites with html and css and and have a combitionation of about 5-6 between the and then start applying to email developer and content editor roles. You're going to applying to at least 50-100 companies, but you'll get some companies reaching back out to you for interviews. I can guarentee it. I'm on my 4 job as a developer and that's all I had to offer to companyies and now I been working for 2 years now in the tech space. PS: I hope this helps you brother, if you have any further questions or a better understanding feel free to comment back to this message and I'll get back to you asap. 😏

[@Peanutbuttt]

@@kidbrave_7673 woooow thanks so much for answering! That's great! Yea I have to work on some landing pages next. I'm familiar with WordPress already so I was thinking of building my portfolio on there. I have photoshop experience too but idk what type of examples to show... When you say apply to hundreds of companies I'm assuming you don't mean all at once right? I don't often see lots of email jobs maybe 10 every few weeks or so. Also some jobs ask for a social presence. I'm not sure what they're are looking for but I assume a portfolio website? Someone said maybe a fiverr but idk. I'm so nervous the imposter syndrome is INTENSE lol

[@hisexcellencykingderp]

@@htmlemail Hey i cant find the page on ur site explaining conditionals

[@vincentkimandrewlemita5815]

How to make an html emailwith editable contents?

[@htmlemail]

Sorry I don't understand your question here.

[@Agustin-jo8mv]

Hey Drew, I've heard when you are working in a professional environment as an email dev, you get a file with everything included to produce an email. I purchased your course on udemy and would really appreciate if you were able to make a sample interview type test. I would pay at least $5-10 for that. haha.

[@htmlemail]

Thanks for buying the course! I have been planing a course update or a second course for some time now but have been busy with other projects, when I get to it I'll add an HTML Email job interview coding test.

[@Agustin-jo8mv]

@@htmlemail haha. Awesome. That would be great. Would you ever be available to talk to? Maybe through zoom? I would be willing to pay like $20 for an hour session. I would want to ask some questions about the details. I think most of these questions about styling would be sorted out when I start testing the Emails I build though. Haha.

[@Agustin-jo8mv]

Just following up. I think a big issue I was having is looking at other code before just trying to build your projects, and going back to reference how and why you structured your code. Your way seems much more reasonable than a random hostgator email I had in my Gmail. Haha. I'll follow up in a few more days when I finish this build. 👌

[@growwithdesign]

Why are you nesting table tags so many times. Many of the layouts can be done without nesting as well. Please explain.

[@htmlemail]

The layering is necessary for the content to have padding and different sections in email clients though we don't include statements specifically for Outlook.

[@sarbjotsingh9998]

how to programatically send this type of email to multiple people? Can we turn this into pdf and then text it? Can we whatsapp it also?

[@htmlemail]

Sarbot, you can send to multiples with the right program.

[@sarbjotsingh9998]

@@htmlemail I meant like can I write code on a node.js server or something to send this custom template

[@htmlemail]

I believe so if you have a mail server or are on a host with it setup.

[@Sam_Pila]

What if we use div ? Is it okay?

[@htmlemail]

Not for best compatibility. Divs work in modern email clients though.

[@kritikadagur1408]

My email doesn't align with phone- what can be the reason?

[@htmlemail]

Hi there, thanks for watching! Typically it's a simple CSS error or unclosed HTML tag. So long as the code matches you will get the same result.

[@azel155]

Hey Drew, I bought the course, but decided to watch your KZbin videos first 🙂 Could you please tell me if having bigger amount of tables is a necessity?:) It just feels I can always manage a table with 1 table>tr>td less than you do. For example, merge the column and content functions into 1 table because it's responsible for the same area. Hope my question was clear for you. Thanks 🙂

[@htmlemail]

Hi there, thanks for taking the course! With this table structure you mention you should lose the ability to control spacing around your content in certain email clients.

[@MonkeyDLuffy-ij9oq]

Making the css inline detroyes fonts. Just like in this video roboto condensed got

[@mdabdurrahim2823]

your font-family is not working.

[@TruthScopeTV]

This is so damn confusing - this entire video is about the code... but when you paste the code into an email only the code itself is visible! How do you send an email with images, CTAs, clickable links, etc without using Constant Contact and other platforms? There isn't a single video anywhere online that explains how to do that! I've tried the method of typing a few numbers into the body of a Gmail message highlighting it, then inspecting, then 'edit as HTML', and then pasting the HTML code in there and nothing shows up in the body of the email... I am at the end of my rope here - PLEASE HELP...

[@htmlemail]

Gmail has made it very difficult to add raw code into an email in the last two years or so, I am not aware of a way to add the code to gmail. There used to be a way to paste it in when inspecting the email body via developer tools Perhaps there is a browser extension that could do this. With HTML Email typically you'll use an inliner tool with a template like this, make sure the images are online (as shown late in the video), then use an email service like MailChimp to send the email. Just know that some ESPs like MailChimp don't allow 100% raw HTML in their free versions.

[@ashwina.k5602]

Really indepth tutorial, thank you for sharing it with us! I have a question, is it possible to add a functionality to hide/show messages with a click of a button or enabling of checkbox? I tried implementing it in HTML and it works fine, but it doesn't seem to render in Outlook. Would really appreciate your response on this!

[@htmlemail]

Hello there, please look for "How to Make an Interactive Email with Click-to-Reveal Code" which is an article by Email on Acid.

[@relytheone853]

Why everything in a table?!?!?

[@Sammysapphira]

Emails don't support flex or grid.

[@paulhetherington3854]

No f(x), in HTML - and run email. Power system

[@PcHabitat]

really nice video sir, too bad we cant use Flexbox or Grid. Would be nice if we can use Tailwind or Boostrap.

[@htmlemail]

Thanks! yes I love the Bootstrap framework, really wish it could be used. There is a framework called "Foundation framework for email" that is sort of like using a Bootstrap type framework but if you're going with a framework might as well be using the MLML. framework.

[@PcHabitat]

@@htmlemail Thank you so much for your reposonse, I know HTML and CSS pretty, can I just jump into MJML? Is there a cheaper way to do testing across all viewports?

[@htmlemail]

I don't know of a cheaper testing solution but maybe you can jump right into MJML. You can start by simply using the VS Code plugin or the editor in their documentation.

[@devenjain7116]

Source code?

[@Sammysapphira]

Watch the video?

[@devenjain7116]

@@Sammysapphira lazy?

[@DEVUNK88]

this makes me want to blow my brains out if you've already designed this in say photoshop, why would you go through the trouble to write the code by hand instead of just using slices? what is the advantage to this? for me as a more of a visual designer, writing code is the very last thing I ever want to be bothered with.

[@obviousabsurdity3181]

how would you write an html or anything software related without writing code? If writing code is the last thing you want to do then you're def watching the wrong videos lol

[@nice_man932]

​@Obvious Absurdity Are you html email developer? Can you help me with something? Is there any jops remotely cause I live outside USA??

[@natimota2040]

Hi, where can I get the link for the html DOCTYPE html1- transitional.dtd? Thanks!

[@htmlemail]

Please visit my website linked in the description, you can copy the doctype on the 'HTML Email Doctype' page.

[@claytonbonner5219]

Do you have an email I can contact you to design my company email template?

[@htmlemail]

Hi there, I'm only available through Udemy for folks to get in touch with me directly at this time.