HTML Email Template Tutorial - Start to Finish with HTML & CSS

in this video we'll build a responsive html email template inside of visual studio code okay guys so before we get started my goal for this video is to get up to 400 likes and if you end up liking the video remember to subscribe and turn on your notifications for new tutorials so later on in the tutorial i'm going to show you how you can send a test email to yourself with the html and css code we layout for our mobile friendly html email template just like you're seeing here in my gmail account so the best way to tell that an email template is truly responsive is to simply size the window down in gmail and it'll only size so much but we'll be able to see that the columns have reached a break point where they went from a two column layout to a single column layout in addition to three columns to two columns and this will work just as well inside of the gmail app but just to show you as an example on the left i have apple mail on my iphone and i'll scroll down so you can see how the layout will appear on mobile phones you'll notice that all of the multi-column sections have gone down to a single column layout and the banner image that we use we're not going to be adding text on top of it here but i have a course where you can learn about that that i'll refer you to later and then on the right we have yahoo mail for ios on apple devices where the three column layout has gone to two columns and a single column underneath that and then the rest of the layout has gone to a single column and we'll get a more in-depth look at the design of the template while we build it in visual studio code but for now let me show you what we'll need to get started so in the description of this video i'm going to have a download with the starter files prepared for us already that we can open up in visual studio code and that includes all of the images that we'll be using throughout the design which you see here in the img folder so along with the index.html file which i've started for us and the image folder you'll see htmlemailcourse.html file which will give you a preview of my complete html email course and i'll also put a coupon link in the video description so you can check it out through there if you wish so in addition to the course project that we develop in the course there are nine bonus templates and an email signature and the template that we're going to be building in this tutorial is based off of the modern html email template from the course bonuses and i'll briefly show you the design as i said it's one of the nine bonus templates included inside of the course and you can see the differences between the html email template that we'll be developing in the youtube tutorial today versus the templates that are included in the course as i show off the long form of the template here so moving back over to the starter files that i prepared for us for the tutorial i already have index.html opened up in visual studio code and we'll go over what's already included for us here in just a moment but first i want to share a resource with you on my website so if you're new to visual studio code on my website on the resources page which i'll link to in the description you'll see there's a visual studio code text editor lesson where you can learn the basics and see the extensions that i use in addition to the settings that i have in my text editor okay so let's go back over to visual studio code and see what's already included for us inside of the starter files so starting at the top of the document in html email we still use xhtml 1.0 transitional as our document type which is the most compatible document type across email clients then next we have our meta tag for careset utf-8 which is the standard character set for numbers and letters on the internet and that's followed by a compatibility meta tag for internet explorer and microsoft edge then are with device with initial scale one meta tag for mobile devices and that's followed by the title tag which isn't necessary when sending html emails but if you want to have your email template live online you can use the title tag then lastly in the head section we have an internal style sheet which later on in the tutorial i'm going to show you how to move these styles in line but for now we'll go over some of the resets so first we have margin 0 which is going to remove any spacing above our template design as well as to the left and right when we size it down underneath 600 pixels in width next we have our background color with all c's for the light gray shade we're seeing to the side of our template design as well as these three border and padding related resets for our table table data tags and images next i'll go down to the lower right hand corner and select the go live button this way we can take a look at the live version that we're working on in visual studio code here in google chrome on the left and just to see that we're connected if i change the background color to white you'll see that change take place and then we'll go back to gray so now we're ready to start adding our html for the template and the first thing that we're going to do is make sure that our email template stays centered inside of email clients and we're going to use a tag in our html down in the body section called center so i'll add the center tag and then i'll give it a class called wrapper so the center tag is no longer valid in html5 but is still useful in email template development and once we lay out that class i'm going to take the closing center tag and move that down to the bottom of the html document so we'll style the wrapper class in just a moment but first let's add our main table underneath that which will contain our html email template and everything that we see inside of it so i'll use the table tag and then i'm going to give this a class called main which will also style and i'll also give it a width of 100 percent so it takes up 100 of the center tag that it's nested inside of then similar to that center tag we'll add the closing table tag down at the bottom of the document just above the center tag and i'll adjust the indentation around it so now what we can do is start adding some styling to the two classes that we added in the wrapper class and the main class starting with the wrapper which will reinforce the gray background color as well as set up the styling for the table that's inside of it so let's reference the wrapper class with a period in our css followed by wrapper and for the center tag that this class is attached to we'll want to make sure that it takes up 100 of the width so when we size the screen down there isn't any spacing off to the sides of the table then the next bit of css that we'll add is something called table dash layout fixed and this is going to set up the table inside of the center tag to make sure that the table tag itself isn't any wider than the center tag that it's inside of now what we can do is reinforce the gray background shade with background color and all c's for the hex value with 6 c's and the last thing that i'll do is i'm going to add some spacing to the bottom of the email template with padding bottom 60 pixels and this is an optional part of the design which you can change as you wish next let's move on to styling the table which we gave the main class which is the main table containing our email template so we'll add the main class and i'm going to give this the white background shade that we're seeing inside of the email template with all fs for the hex value then we'll also reinforce the centering with margin 0 auto and we already added width 100 percent in the attribute inside of that element but i'm going to add that inside of the css as well with width 100 percent and then we'll give it its maximum width of 600 pixels which is the recommended email template width to make sure that it displays properly across email clients then the next bit of css that i'm going to add is border spacing 0 and what border spacing zero is going to do for us is make sure that there's no spacing off to the sides of the main table which you might see in certain email clients then the next thing that i'll do is add a font family here so we don't see the default times new roman font and i'll just keep it simple with sans serif which gives us a nice rounded feel to the characters which you can see in the finished version here then we can also set the color of our font which is going to be an off black dark gray shade with the hex value 171 a1b okay so with that we're ready to start adding our content inside of our main table starting with the top border which we see in black at the very top of the template and each section of our content will start with the table row tag and inside of that we'll have a table data tag then for this first bit of content we'll add a height attribute inside of it and i'll give it a value of 8 which is the equivalent of 8 pixels and now if we save it and take a look we can start to see the white section at the top taking up the 8 pixels and then what we can do is let's add that same hex value that we gave the color of the font for our background color which is the black or dark gray shade and now if we save it and take a look we see the black section and it's going to match the width of our template so now we're ready to move on to the header which will be the first of our two column sections without the design reshaping once we get underneath 600 pixels in width so let's drop down to underneath the logo section html comment and started off similar to how we did the previous sections with a table row table data and table tag then for this first table here i'm going to give it a width of 100 percent using the width attribute followed by 100 and then add some space in between the opening and closing table so now what we'll do before we add the individual columns for the logo and social icons we're going to add something to give some spacing around the two columns with a new set of table row and table data tags and then we're going to give this table data tag a class called two dash columns and this element will make more sense once we get to styling the two columns class but for now we're going to add a new table inside of it for the logo and then for the social icons afterwards and we're going to give this table its own class that we'll simply call column because it's one of the two columns then in order to make it so we can add some padding around the logo image that we'll add we'll add a new set of table row and table data tags and we'll make our image a clickable link with the a or anchor text tag with the image tag inside of it and for the link destination you can send it wherever you want so for example i'll just do a url to my website here with https colon w3 newbie dot com forward slash email dash course which of course you know is the link to my html email course and then for the image itself we'll use the image folder followed by the file name which is simply modern.jpg for the logo and as a reminder as i add the local link here the images will need to be uploaded to the web in order for them to show up in the email box but i'll show you how to get them online later in the tutorial so now with our logo image showing what we can do is resize it using the width attribute which we used earlier for the table so i'll say width and i'll give it a width of 180 pixels and then if we save it that should match up to the original version except for the spacing around it and we also have the option to add a title and alternative text so with the title as you can see it says modern logo when we hover over it and then we can also add this to the alternative text in case the image doesn't display that's the text that you'll see in place of the image so now with the logo set let's move on to adding the content in the second column with the social media links before we go about styling with the padding around this header section so let's drop down and similar to the logo section we'll add a new table which will give the class column and then inside of that we'll have a new set of table row and table data tags and then we can start to add our links and the images and for these links i'll just add a hashtag to make the link blank and for the social media icon file names it's going to be black dash the social media network dot png so we'll go with img forward slash for the folder then black facebook.png and now if we take a look we'll see the icon but it's going to be a little big so what i'll do is i'll add width and then 30 for 30 pixels and then what we can do is simply copy this and paste it in four times for the rest of the icons and all we'll have to do is change the names to the different social media networks so this one will be twitter and then youtube then we have linkedin and instagram is the last one so once we save this and take a look at the version we're working on we'll see all the social media icons but you'll also notice that they're pushed off to the left underneath the modern logo so separate from some inline padding css that will add to space out the modern logo and the social media icons the two columns and column classes will allow us to have these sections in line before they stack on top of one another for the mobile version at the 600 pixel breakpoint so let's start our css off by taking the two columns class and adding that to the internal css sheet up here by adding period to columns and then in order for our content to be centered on mobile we'll add text align center and the next thing that we'll do in order to do away with some inherent spacing around our links since those qualify as text is we're going to say font size 0 and then if i save it you'll see that some spacing around the social media icons in particular disappeared so the next thing that we'll do is add our css to make it so the two columns sit next to one another in line before they stack on top of each other on mobile to do this we'll start off with the same class we just referenced which is the two columns class and then we'll also add the column class after that which is underneath it and nested inside of it so add period column and then we're going to give each one of our columns a width of 100 percent and then we'll give them a max width of pixels so they fit inside of the 600 pixel template width then we'll also add the css display inline dash block and the last bit of css to get the tables to be inline and then stack is called vertical dash align top okay so now if we save it and take a look we'll see that they're in line and if we size it down they'll be stacked on top of one another and we already added text align center to the two columns class but we can add that here as well for good measure before we add some spacing around it so let's first start by adding some padding to the header section itself apart from the logo or social icons themselves which will span to the top and bottom so we'll just add top bottom padding and zero left right so let's add that to the table data tag right here and we'll add style and then padding 14 pixels top zero left right and four pixels bottom because there's already going to be some inherent padding on the bottom of that header and then we can also add some padding around the logo table data tag just above where the link and image is so we'll add the style attribute and then padding 0 top 62 pixels left right and then 10 pixels bottom and what that's going to do is that's going to be half of the distance or about half the distance of the width that way it's going to be centered inside of the 300 pixel column so with that the logo spacing looks good at full width in addition to when we size it down so we can add some spacing around the social media icons now so with the social icons what we're going to do is add some padding on the top and bottom of 10 pixels and then to center it we'll add 72 pixels left right which is going to center it with the width that's given 30 times 5 is about 180 so it's a similar width to the logo and that's going to make it line up nicely on the smaller screens underneath the modern logo so now if we hover back and forth we'll see that the logo and social media icons are matching up to the original and we're ready to drop down to the banner image that sits beneath that and spans the entire width of the template so this section will be relatively simple and we'll start it off with a table row and table data tag then inside of that we'll have our link which will wrap around the image and i'll just leave the link blank then the image here will be img forward slash banner.jpg so with that if we save it and take a look we'll see that our image is displaying but it's displaying outside of the 600 pixel width for the email template so we'll add the width attribute and set it to 600 for 600 pixels and now it's going to take up the full width but if we span it down the template isn't going to resize with the window so we'll need to give this a max width as well in the style attribute of 100 percent so max width 100 that way it's never wider than the width of the window and that will also be true for email clients on desktop web and mobile so in my email course that i mentioned early on in this video we'll have a lesson on how to add banner images with content on top of it but for now we'll just leave it with the image itself with the text included in the image so now we're ready to drop down to the three column section where we see the image the bold text and then the regular paragraph text underneath that which will go to two columns with a single column underneath and then all in a single column on smaller screens so we'll start this section off similar to how we started off the two columns section above except for we'll have a couple more classes in order to style the spacing in between the different columns so let's start the section off with our table row table data tag and then a table inside of that and we're going to give this table a width of 100 to take up the full template similar to the last multi-column section that we added and then inside of this we'll have a new table row with a table data tag that will give a class called 3-columns instead of two dash columns like we used in the header section with the logo and social icons similar to what we did above though we can start our column inside of this with a table using that column class and then inside of this we'll have a table row but instead of adding the padding manually like we did previously with the table data tag in this case we're going to use a table data tag but we're going to give it a class that we'll call padding and we'll add that padding in our internal style sheet in the head section and once that's added we'll add one additional table here that we're going to give a class called content this way we can identify and style the text and image content that's inside of it and don't forget to add a table row and table data tag inside of that and with this there we have our full column for one of the three columns so we could copy and paste that beneath but our content inside of here is going to be similar so we'll just copy it once we've added the image and text content now we're ready to add the first bit of our content which will be the email icon image so we'll wrap that with a link like we did our other images and then i'm going to leave the link blank and the image file for this will be inside of the image folder and it will be email dot png so img forward slash to get into the folder and email.png and now if we save it and take a look we'll see that i didn't do the best job resizing the images for this tutorial so similar to what we did with the other images we can just add that width attribute and resize it to 130 pixels and this column won't have a width that's narrower than 130 pixels but for best practice we're going to add style max width 100 pixels and in my course as well as other email tutorials you'll see that using that css we can resize the images depending on the width of the screen so with that added let's drop down to add our bold text followed by the paragraph text in a new set of table row and table data tags so we can drop down underneath this closing table row tag and add a new one in addition to the td tag inside of it and then we can add the paragraph tag for our e-commerce text so i'll write e-commerce and then we'll add some styling here to make it bold font weight bold so now if we save it we'll see our e-commerce text appearing and we'll position it later but for now we're also going to have it slightly larger than the other text so i'll make this font size 17 pixels instead of the inherent 16 pixels so we'll take care of the positioning in just a moment in our css but for now let's add the additional paragraph text that appears underneath that so i'll just copy this text you can write out some text or use ipsum text and we can just add this inside of a simple paragraph tag without any styling okay so now if we save it we'll see that the content is going to span outside of the column width that we're seeing in the finished version because we haven't added our styling for the columns yet but for now what we'll do is complete adding the content before we go up to our internal style sheet so what i'll do is simply copy this full column and paste it in twice then all we'll have to do is change the file name for the images as well as the title so we'll change email to settings for the second column in addition to changing the e-commerce text to say web design then for the third and last column we'll change the email image to say home and the text to say html email so once we've added this text we'll have all of our html content laid out for the three column section so similar to what we did with the header section which was two columns we can go about adding the css for the classes that we gave to the tables and table data tags starting with the 3-columns class so you can copy this text or type it out in our internal style sheet just make sure you add the period because it's a class instead of an id and then what we'll do is since we have text and images inside of links we'll use text align center to center everything and similar to what we did above we're going to use font size 0 to get rid of inherent spacing that email clients might want to add to our content for now that's going to do away with our paragraph text but we'll add it back in just a moment then we'll also add some spacing to separate the three columns section from the banner above and the section underneath it so we'll add some padding to the top and bottom with padding 15 pixels top zero left right and 25 pixels bottom and you can space it out more or less to fit your content but i think that this spacing looks pretty good above and beneath the section so now what we can do is style the actual column similar to what we did with the two columns section and most of the css will be the same so i'm just going to copy all of the css and then change two columns to three columns for the class then what we can do is change the max width of 300 pixels to 200 which goes into the 600 pixel template with three times so with that we'll have our responsive columns dropping down to new sections when we resize the window and we're ready to add our spacing around the individual columns so if you remember when we laid out our html we added that padding class to the table data tag so what we'll do is reference the three columns class which that's inside of followed by the padding class and i'm going to add padding of 15 pixels all around which will still make it look a little off-center because we don't have the paragraph text taking up the full space that's allowed with the column so let's add back the paragraph content by referencing the content class that's inside the three columns class and that way we can do away with the font size zero styling that's being applied to the paragraph text right now so let's give this font size a size of 15 pixels instead of the inherent 16 pixels with google chrome and i'm going to make the line height 20 pixels to space out the lines of the paragraph text and once we save that css we'll see that the columns have spaced themselves out nicely but i'm also just going to add a little bit of horizontal padding to our content so the text aligns little nicer the padding style declaration with zero top bottom and five pixels left right so now that we have the three column section completed we should be able to toggle back and forth from the original and see that there's no difference so now we're ready to drop down to the two column section with the dark background so let's make our way back down to the html comments the two column section comment and we'll start off with our table row table data and table tag then we can give the table its width of 100 and i'll create some space in between the opening and closing table tags and in this section since we're using the dark background we're going to apply that color to the table data tag up top here so i'll add style and then background color and the hex value is 26292b which we used previously and the top bar above the header and then we're gonna make all of the text white with color and then all f's for the hex value so now we can start laying out the section which will nest our individual column similar to what we did in the header and the three column section so we'll add a table row and then our table data tag will have a class called two columns then so we can add different style to this two column section than the first section we'll add an additional class that we'll call last for this being the last of the two column sections and once we've done that the layout to get to our content will be similar classes to the three column sections so we'll start with our table that has the column class and then inside of that we'll have our table row followed by the table data tag with the class padding and then once we've done that we'll have our table inside of this which will be for our content so that'll be for the image and the text and button content so we'll add table dot content for that class and inside of that we'll have our table row and table data tags okay so now we can add our image content and similar to the previous images we're going to wrap this with a link using the anchor text tag with an a and then we'll have our image tag and i'll leave the link blank and we'll go into the image folder and grab keyboard.jpg then with this image as you can see similar to the previous images it's going to be too big so we're going to resize that and give it a width of 260 pixels which will give us about 20 pixels of padding on either side and then i'm also going to add the maximum width of 260 pixels so now that we have our picture set we'll add the padding around it in a little bit but let's move on to the second column where we have our text and button content so what we can do is simply copy this full column with the table down to the closing table tag and then paste that underneath and all we'll have to change here will be the image content to our text and button so let's replace this with a paragraph tag and we're going to style this first bit of paragraph text with our style attribute and add font weight bold then increase the font size to 18 pixels which will be similar to what we did in the three column section with our first bit of text content and i'll write create custom designs to match the finished version so now if we save it and take a look here we have our text it should be lined up to the right and we'll find out why it isn't in just a moment but first let's add the rest of the text and the button link so i'm going to copy this paragraph text and add that underneath here then for our button we're just going to add the a tag for a link and give it a class called button and the text inside of here will simply be read more and we'll style this class in our internal style sheet so now if we take a look in chrome we're not going to see the text yet because we need to make it white in our css but i'm going to add some spacing that will appear underneath this paragraph text before the button with padding bottom 16 pixels and then for the positioning of the second column let's take a look at the table at the start of this section so if we scroll up the 100 right here should be 100 instead of 100 and that's going to align it off to the right as we want it to so now let's move up to our internal style sheet and we can style the two columns last class which is separate from the two columns css that we added previously so let's go up to that internal style sheet and i'll just paste in the two columns last and then make sure there's no space in between the two columns and last classes then let's add padding around the entire two columns of 15 pixels and we'll also add padding around the individual columns of 20 pixels so we'll add two columns and use the padding class then padding 20 pixels and now what we can do to bring back the paragraph text is let's target the content class similar to what we did with the three columns section and we'll give it its font size of 15 pixels and now we can see the text and i'm going to add the line height of 20 pixels here as well and then let's align the text to the left so once it's saved that should look pretty good except for in order to get the columns next to one another we'll just remove the horizontal padding from the main two column section and then our padding is only on the top and bottom so that 20 pixels of padding will apply to the left right so now we're ready to add our styling to the button which is just the button class if you remember and we're going to give this a background color of white with all f's for our hex value then for our color we'll match the black text that we added previously which is the hex value seven one a one b which is actually darker than the background color of this two column section and then we'll also get rid of the underline with text decoration none and add some spacing around the text inside the button with padding 12 pixels top bottom and 20 pixels left right and to round the corners off let's give it some border radius of 5 pixels and lastly let's make our font more visible with font weight bold so now once we save it we'll see that it looks pretty good and will match up to the original so now we can drop down to the single column section it appears underneath it with the text and the button that will be the opposite colors of our first button so let's move on down and start it off with the table row table data and table tag then we can give our table its width of 100 and then we'll have one more set of table row and table data tags inside of this so we can add some padding to keep our text away from the edges of the template and once we've done that we can start adding our paragraph text so let's start with the html email template course text and we're going to increase the size of this text like we did previously with style and then font size and we're going to make this bigger with font size 20 pixels and also give this a font weight of bold and then to center this text what we'll do is add that to this table data tag with text align center and then we can also add some padding off to the left and right or all around rather with padding 15 pixels to keep the text from the edges of the template so now we can go about adding the paragraph text that appears underneath this text so i'll add the p tag and then i'm going to copy the paragraph text here you can add the ipsum text if you wish and i'll just paste that in and for this text what i'm going to do is add the styling here so let's increase the line height to separate the text by 23 pixels which is a little more than we did previously and i'll make the font size a little smaller with 15 pixels in addition to adding some padding to the top of 5 pixels to separate it from the first bit of text a little more and then 15 pixels on the bottom to separate it from the button that we'll add next so the styling for this button will be similar to the last we'll just invert the colors so similar to the last we'll add a link and then the class we'll use as button dash dark to separate it from the first one which was simply button and i'll add view course here for the text and what we can do is simply go up to our css and take the css from our first button then change the colors around so i'll copy button dark for the class and then paste that in here underneath button then we can simply copy all of the css and paste it in then i'll change the color to white and the background color to the 171 a1b hex value so that looks good except for the spacing underneath it and on top so let's go to the main table data tag for this section and add some padding so for our padding we won't need any additional padding off to the sides only the top and bottom so we'll add padding 15 pixels top zero left right and 50 pixels bottom okay so let's take a look in chrome at our spacing which should be good with the zero left right and that looks pretty good so now we're ready to move on to the footer section which will be the last of our html email template with the dark background so let's add our beginning tags and then give the table its width of 100 percent and then i'll add some space in between and before we add our content let's add the background color to the main table data tag with style and then background color 26292b for the hex value and now we can add our table row and table data tag for our content and we'll start off with the logo image which will be inside of a link and the image for that will be img forward slash modern dash white for the light version of the logo which we can see right there so we'll just need to resize it but first let's align its center with the td that wraps around it adding text align center and then i'm also going to add some padding around it to match the finished version of 45 pixels top bottom and 20 pixels left right and then we can also make our color white here with this main table data tag okay so with that let's resize our logo now to match the original by giving it a width of 180 pixels and now we can move on to the text that appears underneath it starting with the modern html email text that we see here so i'll add the paragraph tag underneath this and then paste the text in and to separate the text here we're going to add some padding around it so i'll add padding of 10 pixels all around and we'll do a similar styling for the text that appears underneath that with the 10 pixels of padding so i'll just change the text here to the street address and now we're ready to add the social media icons that appear underneath it so since the paragraph text will sort of create a line break for us all we'll need to do for these will be to add the images inside of a link to align them center similar to what we did in the header section so let's go up to the header html and simply grab all of those links with the images inside of them for the social media icons then all we'll need to do is change them from black to white for the black background after i change the indentation so i'll just change this to white and then i'll copy the white text and just paste that in to replace the black text for all of the images so once we've done that and we save it let's take a look here in chrome and that looks pretty good so we're matched up to the finished version except for the unsubscribe or subscribe text at the very bottom so i'm going to put that inside of a paragraph tag but you can create a link and style it to have white text if you want so i'll just write subscribe and then i'm also going to add some padding around here like we did the text above it with 10 pixels of padding all around okay so that does it for all of the content in the html email template and now what we can do is take a look at it on mobile so you can open up developer tools in google chrome what i'm going to do is simply open up a responsive web design tester extension that i have so i can see both the full width and the mobile version off to the right so as we can see without even having to add media queries the structure of our tables allows us to have responsiveness of the columns and we sort of have two break points one at the 600 pixel width and then we have that second width where the three column section goes from the two and single column down to all single column so for the rest of the tutorial what i want to do is show you how to send test emails with your new html email template so before we send the test to email early on in the tutorial i mentioned that images have to be uploaded to the web in order for them to be seen in your email so one great resource i'll recommend to you is imgbb.com where you can upload your images for free and link to them directly and that's a resource that i use in my html email course that's in the description one other thing that you can do is simply use placeholder images for now so you can simply replace the images that we added in the tutorial with placeholder images using the dimensions of the images and at placeholder.com you'll see a really simple example of how you can add any dimensions that you want for the placeholder images now for sending test emails to ourselves you'll want to go to putsmail.com which is spelled like the logo in the upper left hand corner and then select create a new test email so as i mentioned early on we won't be designing for outlook but with putsmail this is going to inline our css for us from the internal style sheet that we added into the html elements with those classes so they have an inliner tool or we can just select to inline it when we send our test to email and by inlining though we're not designing for outlook this will give us the best rendering across email clients with the code that we have so let's add the subject line which you can write whatever you want for i'll just write modern html email template and then we can copy all of our html and css from our text editor and since the images here are local as i explained i'm going to copy the html and css off screen with the images that i have uploaded to the internet already from my course and use those then i'll select move my css inline i'm not a robot and don't forget to add the email address that you want to send your email to before you hit send email and just give it one moment and then we can go over to our email in my case it's going to be gmail.com and here we have our completed modern html email template and if we size the gmail window down it's only going to size down so much but that's a good way as i mentioned in the beginning of the video to test that an email template is responsive and then i also showed it on mobile devices at the beginning of the video so that does it for the complete tutorial i want to thank you for watching if you haven't done so already remember to subscribe like the video turn on your notifications and i'll see you in the next video thanks for watching you

Channel: w3newbie

Views: 11,919

Keywords: html email development, html email template, html email tutorial, responsive html email, html email tables, responsive emails tutorial, email client testing, putsmail email template, html email, email development, email design

Id: V-IM0qSMKMw

Length: 43min 58sec (2638 seconds)

Published: Sun Apr 04 2021