Build A Responsive HTML Email Template with HTML Tables & CSS

in this video we'll build a responsive html email template with tables okay guys so i'm excited to share this html email template design with you so my goal for this video is to get up to 500 likes and if you end up liking the video remember to subscribe and turn on your notifications for new tutorials so the best way to tell if an html email template will be responsive is to simply size the window up and down in gmail and if it responds in gmail that will tell us that it will be responsive on mobile devices like the iphone and to show you what you can expect on mobile devices here i am on my iphone in the apple mail app and as you can see the email template has gone from the two column layout into the single column layout then similarly you can see how it will display in the yahoo mail app then in the gmail app you'll see that it's going to convert it to dark mode for us here without us designing for dark mode which i'll cover in just a little bit first let's go over to google chrome where i also have the email template open so we can get a better look at the responsiveness so i'll open up the design using a responsive web design tester so we can see it on a smaller screen and as you can see on the mobile version the images in the two-column section will be larger than at full width which we'll be able to accomplish by styling our html tables using media queries so the layout will include the social media icons the logo the banner image the two columns section with the images text and button and then the two column image section underneath that with the logos followed by the footer at the very bottom so with that the one thing that i'll cover before moving forward is you might notice that the banner image is an image itself without the text and the button on top of it and the reason for that is because in order to have text in a button display on top of a background image properly in email clients that would take up a large percentage of this video and i'll cover a little bit more on email template compatibility but first let me show you what we need to get started with the tutorial in the description of this video will be a download link to the html email template starter files including the index.html file which i have open in the background in my text editor then all of the images used to build the html email template and also included is the html email course file where you can preview my complete html email mastery course which i'll also have a discount link to in the video description so the email template that we'll be building in the tutorial today is the lite version of the project template inside of the html email mastery course so while the template designs may look kind of similar the compatibility will be very different between the course project and the template that we'll be building in the tutorial today so the main difference between the course project and the project that we'll be building in the tutorial here on youtube is we're not going to be designing for outlook or windows email clients so in the tutorial version of the template we won't be designing for outlook or windows compatible email clients and we won't be adding dark mode specific styling in addition to some other compatibility aspects inside of the course project so if you're interested in the html email mastery course be sure to check out the link in the video description or by checking out the preview file included in the starter files download for the tutorial today okay so with that let's get started with the tutorial so i'm going to be using the free program visual studio code as my text editor which i have open in the background and if you'd like to get an introduction to the text editor you can check out the resources page on my website w3nubi.com where i go over the extensions and some of the shortcuts that i'll be using in the tutorial okay so now let's go over to visual studio code and the first thing that i'm going to do is go down to the lower right hand corner to start the live server extension that's covered in the visual studio code lesson that i just referenced and once i hit go live you'll see the gray background because we have the background color set to gray so if i change this to white you'll see live server changing the background color of the document that's open for us in chrome okay so i'm going to go back over to the completed version here in chrome and just size the window down a little bit and then let's go over what's already included for us in index.html starting with the doctype at the top of the document so the preferred doctype in html email is still xhtml 1.0 transitional and while you may find some debate on the best html email doctype email service providers and the large email client testing services still recommend xhtml and moving on to the head section of the website where we'll have our internal css we'll start off with content type and careset utf-8 which is a standard character set for letters and numbers on the internet next we have our compatibility meta tag for microsoft edge and internet explorer followed by viewport with device width initial scale one for mobile devices then the title that you see underneath that we don't necessarily need for our html email but if you want a live version where people can view your html email template on the web you can use the title as your title of that web page then we have our internal css style sheet right here with style type text css and i'll also mention that some of our css will be adding inline with the html and at the end of the tutorial we'll use an inliner to make it so all of the css that we add internally here in the head section will also be inside of the html tags themselves then moving down to the css that's included for us already we'll start off with margin 0 which is going to get rid of the space that would be above our template here in chrome and we already know about the background color that's set to gray and then the other three mentions of border spacing padding and border zero is to get rid of any inherent spacing and padding that email clients want to put on our email template design and underneath that we have our media query for the 600 pixel break point which is where our two column sections are going to turn into a single column with the first row of two columns as well as the logo row underneath them then moving back over to visual studio code the last bit of content here that i've added is just html comments inside of the body section which are the different sections of the template that we'll be laying out starting with the social media icons but before we lay out our first table row we'll need to make sure that our table is centered inside of email clients so here as you can see when i span up the width we have our email template centered and to center the template we're going to start off with the actual center tag which is no longer valid in html5 but with older doctypes in html email it still works just as well and we're also going to give our center tag a class that we'll call wrapper so we can add some styling to it and this center tag is going to wrap around all of our content so we're gonna move the closing center tag down underneath the footer section comment and i'll add some indentation here to match it up with the first starting tag and then we can add our main table tag which will contain all of our table rows with the content inside of them so underneath center let's add the table tag and we're going to give it a class called main then we're also going to make sure that it's aligned centered along with the center tag by saying align center then similar to the center tag let's move the closing table tag to underneath all of the comments that are added for us already and we'll add that above the center tag and i'm going to indent this one more time to match the opening tag so next let's style these classes that we've added for the center and table tags inside of our internal css above underneath the image tag where it says border 0. so we'll start off with the wrapper class and we're going to give the wrapper class a width of 100 percent to make sure that it stays at 100 percent of the width when the document or email client flexes underneath the 600 pixel mark so for example if we take another look at gmail when we flex the window down we want the wrapper content to display at 100 percent of the width but we also don't want it to be any wider than the content that's inside of it which is our table which has the um the main class added to it so what we're going to do in addition to having width 100 is we're going to add something called table layout fixed which will as i mentioned make it so the wrapper itself won't be any wider than the table inside of it then we'll also add a background color set to gray with all c's for the hex value matching the body tag because we don't want our email template to rely on the body styling in email clients for the background color then the last bit of styling that i'm going to add to the wrapper or center tag is to add some padding to the bottom i like the look of a little space underneath the actual email template so we're going to add padding bottom which you can also see here in chrome aside from gmail of 40 pixels so padding bottom 40 pixels and now we can move on to the styling of the main class for the table which we added so we'll add period for the class and then main and we're going to center our table or reinforce the centering in addition to the center tag using margin 0 auto then we'll give our table a width of 100 percent so it displays that 100 percent underneath 600 pixels and we'll give it a max width of 600 pixels which is pretty much the standard width that you want to use for email templates which will render properly across all email clients testable in the email client preview services and once we have the max width set to 600 pixels we can apply a background color to inside of the table itself so we'll set this to white with all f's and that will give us some nice contrast with the gray background then we'll also set the border spacing to zero to make sure that there's no borders displaying around our table which might make space in between the table rows and the edge of the table and we can also set a font family here so i'm going to give this a font family of sans-serif instead of times new roman which i find a little bit softer on the eyes when reading the text and for the color of the text we're going to go with a dark gray shade instead of all zeros for black which will be the hex value 4a 4a for a okay so with our table all set we're ready to drop down to the social media icons comment to start off our first table row including the icons that we see here so each one of our sections of the template will start off with a table row tag followed by our table data tag which we have the padding set to zero for already and then a table tag inside of that so with our table tag we already have border spacing 0 set for that in our css but we'll need to add width 100 percent to make sure that it takes up 100 percent of the table data tag that it's inside of for each one of our tables that we'll be adding so now if we want to start to see our table take form we can add any content here and check in google chrome to see that we have our centered table with the white background displaying then for the content inside of our table row here for the icons we'll want to add styling around them so we'll need a new set of table row and table data tags then the table data tag will be adding some styling to first though let's add our icons so we're going to wrap them all with links meaning the a tag and then inside of the a tag we'll have the image for the icon and i'm going to set the link to blank using the hashtag but you could always link to your social media account here then for the icon we'll need to reference the img folder and then circle dash facebook.png for the first icon so img forward slash circle dash facebook.png and there we see the icon displaying which we'll need to resize to match the original so instead of using css to set the width for email clients we'll need to use the width attribute and then we'll add the width value inside of the attribute so we'll say 32 for 32 pixels and now you can see that the facebook icon matches the original in size so now since we have the first one set all of the rest of the icons will be the same size and have the same html except for the image reference so what we can do is simply copy this html and i'll paste it underneath four times to make it so we have five icons in total and then we can go about changing the images so twitter then youtube linkedin and instagram okay so now if we save it and take a look in chrome we'll have all of our five icons displaying and now we can go about styling the icons row using the table data tag that it's nested inside of so let's add our inline style here starting with text align center which will center our images because they're wrapped in links and then we'll add the padding that we see around it so we're going to add some padding to the top and bottom so we'll say padding 8 pixels top and then 0 left right and four pixels bottom to match the original and then what we can do is add the background color which is sort of the light blue shade complementing the green turquoise shade and the hex value for the background color is eaf6fb then once that's set let's add a border to the top and to the bottom so we'll start with the top with border dash top and we're going to make the border on top 2 pixels and then the bottom one will be a little bit thicker at 3 pixels so we'll say 2 pixels solid and then the green turquoise color will be 2 1 c 6 b 8 for the hex value and what we can do for the border bottom is simply copy this css and paste it underneath then we'll change top to bottom and 2 pixels to 3 pixels okay so once we save it we have our styling complete and if we go back and forth from the original to our version we're not going to be able to tell the difference at least with the social media icons row at the top so let's drop down to the logo section next and since we'll be adding styling around the logo image we'll use the same layout of tags as we did with the social media icons with the first set of table row table data tags in the table making our table 100 percent width so we'll say width 100 percent and then inside of our table we'll add another set of table row and table data tags which as we know we're going to use the table data tag for to add the styling once we have our logo image so similar to the icons let's start off with a link and then our image and as an example here i'll just add a link to my website instead of the hashtag which is a blank link then we can add the logo image which once again will be inside of the img image folder and the logo is going to be the html dash email.png file so we'll say img forward slash and then html-email.png for best practices just for the logo image we'll add alternative text to say logo and then we can also add a title here that says logo that way when we hover over the logo image we'll see the little text pop up where it says logo right there and if for whatever reason the image doesn't display we'll see logo appear as the alternative text so i'll bring the image back and let's set a width of it to 300 pixels so it takes up half of the email template and once we've done that we can add our styling to the table data tag to make sure that our image is centered with text align center and we'll also add some padding to the top and bottom actually all around just in case the device window is underneath or around 300 pixels so we have some space off to the left and right we'll add padding all around of 15 pixels okay so now with the logo set we're ready to drop down to the banner image which will display at 100 percent of the width of the email template so instead of layering the tables with the two separate sets of table row and table data tags we only need one set here because the image inside of the table row and table data will take up 100 of the space so we'll add the link and then the image and the image here will simply be img forward slash banner.jpg now if we save it and take a look the image is going to display outside of the template because it's more than 600 pixels so what we'll do is add inline style here with the style attribute and we'll set the width to a maximum width of 100 percent so we'll say max width 100 and then we can also set the width to 600 to match up with the size of the email template so we'll say width 600 and once we save it with that we're ready to drop down to the two column responsive section of the template so in order to achieve responsiveness and to resize the columns inside of the responsive section we'll need to layer our tables a good bit more than we have in previous sections so let's start off with our table row table data and table tag which will give the width of 100 to using the width so with 100 then inside of the table we'll have an additional set of table row and table data tags and this set is meant to identify the number of columns that we'll be using inside of the section for css purposes so although we're only going to be making two column sections with the responsive layout we're going to call this two columns using the class for the table data tag then inside of this we'll have a table for each one of the columns so our first column will contain the image the text and the button including the padding around it and then the second column will be the second table that we'll be adding and we're going to give this table a class called column and inside of the table we'll have an additional set of table row and table data tags and this table data tag we're going to apply the padding to which surrounds our content meaning the image and the text so the padding is going to disappear when we size down underneath 600 pixels but it's going to be there for the full width so the padding space that we add will be replaced with the additional width to the image and the content underneath the break point so we'll give this a class that we'll simply call padding and then inside of this we'll add our last table which will be for the actual content which as i said will be the image text and button so we'll give this table a class called content to identify it and now we can add our table row and table data which will contain the actual content so the first bit of content being our image will be similar to what we used previously with the trtd and then the link with the image inside of it so we'll say table row table data and inside of that we'll have our link followed by the image and i'm going to leave the link blank then the image source will be inside of the image file and it's going to be man man-teal dot jpg so now if we save it and take a look there we have our first image displaying and for our image we're going to give it a width of 260 pixels so we'll start off with the width attribute so we'll add width to 60 and the reason for using 260 pixels is this is going to give us room for padding of 20 pixels on either side which will be removing underneath the 600 pixel break point so it'll go from 260 to 300 pixels in width so we're going to add style and max width 260 pixels which will later change in the css media query for the 600 pixel breakpoint then for rounded corners we'll add border radius 8 pixels to match the original so now if we save it and take a look we'll have a resized image with the border radius and later we'll add the styling around it but for now let's drop down to the text content so we'll add a new set of table row and table data tags and i'm going to add a little bit of padding to the table data tag so our text content isn't quite as wide as the image by adding padding of 10 pixels all around so we'll add style padding 10 pixels then inside of this td tag we can start off with our paragraph text for the build responsive emails text at the top so already build responsive emails and then if we save it we'll be able to see the text underneath but it's not going to match the original so let's increase the font size of the paragraph text and i'm going to make this font size 17 pixels and then we're going to also make it bold so we'll say font weight bold or you can say font weight 700 and that looks pretty good so now we can add the paragraph text that appears underneath that as well so we'll use a new paragraph tag to give a space between the two automatically and then i'll paste the text content in you can just add ipsum or lorem for dummy text and visual studio code and then before we get down to the button let's add some space underneath this paragraph text so i'm going to add style then padding bottom 15 pixels so now with the button we're just going to add the class for the button inside of a link and then we'll do all of our styling inside of the css in just a little bit so we're going to give this link a class called button and then for the text we can write html email to match the original so now if we save it we're just going to see the link text there and as i said we'll style the button in just a few minutes but first now that we have all of our content laid out for the first column what we could do is simply copy the actual table for the column and paste it underneath for our second column then just adjust a little bit of the html to match the original second column in the template so i'll paste this table in and then what we can do to match the original is let's change the image to the woman which is just going to be woman-teal instead of man-teal then we can move down to change the build responsive emails text to say create custom designs and lastly we'll change the button to say get started instead of html email and i'll just make the g and get capitalized okay so now we have all of our content set up and we can start styling our two column responsive section so to add our styling we're going to go right down the different classes that we added to this section starting with the two columns class and then we'll work our way down through the different classes that we see here so let's go back up to the styling and reference the two columns class and we're going to start off by adding font size zero so this i'll be able to explain better in just a few moments but this is going to temporarily do away with our font and it's going to do away with spacing to the two columns table data tag once we add styling to different sections similarly we'll add text align center which will alter our text temporarily but in just a moment we'll see that that will center our tables underneath 600 pixels but before we move on to our table styling let's add some padding to the top and bottom of our two column section so i'm going to add padding and if we take a look at the original we have some space right here as well as underneath the buttons so we'll add 35 pixels to the top zero left right and 40 pixels to the bottom so now we have some space around the section so now we'll move on to the next class and we'll start off by referencing the two columns class and then we can reference the column class which is for the table so we'll just add column after that two columns class and we're going to start by giving our columns a width of 100 percent and since we're working with a 600 pixel template canvas we're going to give this a maximum width of 300 pixels and now with the width set i can better explain the font size 0 set to the previous two columns class so if we remove that you'll see that we're going to have some space around our table so i'll add that back so we have full control of the 600 pixel spacing with 300 for each table column then to get our tables displaying next to one another we'll say display inline block and now when we flex the window down we'll also want to use a vertical align top to make sure that the email clients respect the responsiveness on uh windows underneath 600 pixels so now with our table styling set i can show you without text align center our tables are going to be positioned off to the left for the columns and we add it back it's corrected so now what we can do is drop down and add the padding using the padding class that we referenced to give it padding of 20 pixels all around so let's say two columns and padding for that class and as we know with the images being 260 that leaves us with 40 pixels or 20 on either side so once again padding 20 pixels all around so now if we save it we should have the same spacing around the images as the finished version and we're ready to move on to the content that appears underneath the images so let's first off reference the content class and we'll want to correct the font size that was taken away earlier with the styling and i'm going to make the font size 15 pixels and let's align our text to the left and then i'm also going to increase the line height of our paragraph text to 20 pixels to space it apart a little bit and that looks good and like the original so now we're ready to style the buttons that appear underneath our paragraph text so if you remember when we added the link for the button text we gave it a class that was simply button so all we need to do is reference that class itself in order to add our styling so let's add our period for the class followed by button and let's give it a background color first which will be the hex value 1e5d7b for that dark blue shade and with that set we can set the color of the text to white with all fs for the hex value and then i'll take away the underline with text decoration none and let's add some padding around the text of 12 pixels top bottom 20 pixels left right then to match the images we'll make the border radius 8 pixels as well and then we can also make our text bold to match the original with font weight bold okay so now if we save it we should match up to the finished version but i'm also going to add some letter spacing here so let's space our letters apart with one pixel that's a little much let's do a half a pixel and that looks pretty good just to separate it from the finished version so now if we size the window down we'll see that our columns are responsive as we know but they're not going to match the original until we add the media query css later in the tutorial but for now let's move down to the next two columns section including the logo images so though we're seeing four logos if i open up explorer here in the sidebar using command b we'll see that each image will contain two of the logos so we're going to use a similar two column layout that we used uh in the section that we just created with this section though we're not going to use padding so what we can do is simply copy our html above the padding class and we'll paste that in to where we have the email icons comment added for us and since we have vertical top bottom padding added to the two columns class what we'll do to separate this section from the last one is we'll just add an additional class here that we'll call last so we can target this to columns class itself so now let's add our first image starting with our table row and table data tag followed by the link and the image and before we add the image and its width let's close out the tags here so we'll close out the table tag for the column then i'll add some space here to close out the two columns table data tag the table row then the table whoops i'll correct that so the table and then we have the table data and table row tag last okay and then what we can do is simply copy this column for the second column with the additional image and now we can add the images and each one will display at 300 pixels so we'll add the img folder followed by email dash one dot jpg then we can give it its width of 300 pixels and we'll also add max width of 300 pixels and now if we save it we'll have our first image displaying and what we can do is simply copy this link with the image inside of it and paste it underneath then just change the image file to email2.jpg so as i mentioned we have some padding on the top and bottom of this section to correct but before we do that let's add the background color to match the image to fill in the white space around it and we'll add the border on top of it as well so let's add some inline styling to the first table data tag here so we'll write style and let's give it the same background color that we used for the social media icons which is eaf6fb for the hex value then we can add the border that appears at the top of the section with border dash top and we'll make it 2 pixels solid than the turquoise hex value of 21c 6b8 okay so once we save it we have our background color matching the background of the images as well as the border up top and now to get rid of the space on the top and bottom to match the original let's reference the last class following the two columns class in our css so write two columns dot last we'll start with padding top zero then to make sure that it overrides the padding top added previously to the two columns class we'll add exclamation point important and actually we can just do padding all around instead of just doing a padding top because we're not going to want padding on any side so padding 0 important and now we're not going to see it take effect we need to just remove the space in between the two columns in the last class because they're within the same element so there we have our spacing corrected for the two columns icon or logo section and we're ready to move on to the footer section of the template okay so let's work our way back down towards the bottom of our index.html file to the footer section comment and we can start off with a new set of table row and table data tags in addition to the table tag which will give a width of 100 percent to once again then we'll add a new set of table row and table data tags so we can add styling around our image and text content in the footer and we're ready to add our logo footer image right here so let's once again start off with a link or a anchor text tag followed by the image tag and i'm going to add a hashtag to leave the link blank and add img forward slash html email white and we're going to give this image a width of 230 pixels and we're not going to be able to see it yet so let's um apply some styling so we can get the background color in addition to the border at the top of the section so with the finished version we have a border similar to the last section on the top which is 2 pixels solid 2 1 c 6 b 8 for the hex value and then the background color for the footer section we're just going to make a little bit darker of a gray with the color 565656 for the hex value and then we'll also add a border to the very bottom of the section similar to the top just a little bit thicker so we'll add border bottom 4 pixels and i'll just change top to bottom and now it looks pretty good except for we want to center our text and image in addition to adding some space to the top and bottom of our content so let's use the inner table data tag then i'll add padding top bottom of 50 pixels and we'll add padding left right of 20 pixels to make sure that there's some space off to the side of our text and logo image on small screens then we can also use text align center to center the image in addition to the text and we'll make our text the color white for when we get to our paragraph text so i'll add color fff or six fs rather for the hex value okay so now we're ready to add our text content underneath the logo image starting with the w3 newbie html email paragraph text so i'll add that inside of the p tag for paragraph okay so once we save it there we have our white paragraph text appearing so we can add the new set of paragraph text which includes the address so i'm going to copy this paragraph and paste that underneath and then i'm just going to copy this text to paste that in and replace the html email text and now if we save it and take a look it looks pretty good except for i'm going to add some additional space underneath the logo by adding padding top to the paragraph text up top here so let's add padding top 18 pixels and see how that looks so that's going to be a little bit more space than the finished version so i'll reduce it to 10 pixels and that's pretty close it's not exact but that looks pretty good you can reduce the padding a little bit more if you want to okay so next let's add our email address which will include a link so we'll add paragraph text followed by a link inside of it and we're going to use a mail to link to prompt and email service to open up so if somebody clicks on the link it's going to prompt them to send an email and then we can add the actual text for the link inside of that and we'll change the color of our links here in the footer in just a few minutes once we complete adding them so we'll add the telephone link next which will include a tell link to prompt a call when somebody clicks on the link or facetime for example if they're on a mac computer and i'll add the actual telephone number text then lastly we can add the unsubscribe text underneath that which i'll just leave blank and i'll write it in all caps and this is going to be a little bit smaller in text size than the rest so we'll make it 13 pixels in size and now if we take a look it looks good except for as i said the text color for the links doesn't match up so let's go back up to our css and reference the links with the a tag and then we'll do away with the underline using text decoration none and i'm going to give them a color of the hex value 37c bbf which is a little bit darker of a turquoise shade or lighter of a turquoise shade rather that we've been using for the border okay so now if we take a look it's going to match up to the original aside from a little bit of the spacing differences that we added to the footer and the buttons and now we can go about our last step which is adding our media query css to change up the sizing of the columns once they drop down to the single column layout from the two columns so as you may remember we're going to get rid of the padding that we have set around our table column by referencing the same css that we added to the full width template and i'm just going to correct the indentation here and we're going to get rid of the padding all around by adding padding 0 exclamation point important so now if we save it and take a look we actually lost the padding to the top and bottom of our two columns so let's just target the padding right and the padding left so we can copy this and paste it underneath then change right to left and now if we save it we see that our text is wider than the original that we had but our image isn't as wide yet so what we'll need to do is increase the size of the image so what we'll do is target the two columns content class which our image is inside of so we can just copy this css and paste that inside of our media query and i'm going to get rid of all of this style here and add img for the image inside of that class then set a width of 300 pixels for the image and we're going to write exclamation point important as well in addition to changing the maximum width so if you remember we have that set to 260 pixels and we'll need to increase that to 300 pixels and i'm also going to write exclamation point important to make sure that it overrides the 260 pixel amount okay so once we save it with that we have our increased images and text content for the two column section once we get down underneath the 600 pixel breakpoint so with that that concludes all of the coding of our html email template so now we can go about testing it and sending it to our own email address to see how it appears in our inbox so as i mentioned early on in the tutorial i'm going to give you a resource to make your images live because when we're testing our emails in email clients like gmail it's not going to be able to reach these local email files that we're linking to inside of the template right now so i'll give you two really quick options and the first is to use a website called imgbb.com which is a free image hosting service where you can upload your images and get a direct link to the image where it's hosted live this way as i said you can see your images displayed when we test our emails which i'm going to show you how to do in just a minute and then another resource that you could use is let me just scroll up here to the or scroll down to the social media icons for example is we can use placeholder images in place of the images replicating the size that we gave them so if you do a google search for placeholder image or go to placeholder.com we can copy one of their image links so i'll just copy this image address and then i'll paste that in and we can change the dimensions of the image to 32 pixels by 32 pixels because our icons are square then go over here and we'll see the placeholder image display which you'll also see display in gmail when you're testing the appearance of your email template then once you're ready to start sending yourself test emails you can go to putsmail.com which you see here and we can use their new test feature or use their inliner feature so this will take our internal css in the head section of our template and move it in line so if we just copy all of our html and paste that in it'll inline the css for us and all of this css as i said which we added internally will now be in line inside of these table classes and so on and we'll also have the option to inline our css when we send the actual test email so if we go over to new test i'm going to add a subject line here saying completed responsive html email then i'll paste in all of the email template code that we built in this tutorial and select move my css inline then i'm not a robot and make sure you add your email address to receive the email then i'll hit send and once it's sent we can go over to our email address in my case gmail to see that we have our responsive html email template displaying for us okay so with that i want to thank you for sticking around for this html email template tutorial please remember to check out my complete course which you can see using the starter files link or check out the link in the description of the video and i thank you for watching you

Channel: Drew Ryan

Views: 11,096

Keywords:

Id: u1HbCkNtrp4

Length: 45min 44sec (2744 seconds)

Published: Mon Oct 05 2020