ฝัง
- เผยแพร่เมื่อ 26 ก.ค. 2024
- ➢ HTML Email Mastery Course 2024 (coupon link):
➢ w3newbie.com/email-course/
New & Updated for 2024 with the latest HTML Email concepts.
HTML Email Template Tutorial - Start to Finish with HTML & CSS
➢Tutorial Starter Files:
m.w3newbie.com/e/tut-9.zip
➢HTML Email Mastery Course:
w3newbie.com/email-course/
(this is a coupon link,
if it expires please add a comment)
In this responsive HTML email tutorial we'll build a complete mobile friendly HTML Email Template with Responsive HTML Tables and CSS. The email template that we build in the tutorial has been tested as responsive in Gmail, the Gmail App, Yahoo Mail App, the iOS Apple Mail App and more. The email will also show and display properly on a number of other mobile, tablet and desktop email clients. Stay tuned to see how to send test emails to yourself and preferred email client at the end of the video with Litmus Putsmail.
0:00 Introduction
0:20 - HTML Email Design Overview
1:30 - Tutorial Files Download Overview
1:50 - HTML Email Mastery Course Promo
w3newbie.com/email-course/
2:45 - Visual Studio Code Text Editor
3:05 - index.html HTML File Info
5:00 - Centering the HTML Email Template
6:18 - Centering and Email Width CSS
8:32 - Top Email Template Border HTML
9:22 - Header Two Column Table HTML & CSS
10:18 - Modern Logo HTML
12:00 - Social Media Icons HTML
13:41 - Two Column Header CSS
17:23 - Banner Image HTML
18:45 - Three Column Section Table HTML
23:47 - Three Column Section CSS
26:41 - Dark Background Two Column Section HTML
31:08 - Dark Background Two Column Section CSS
32:25 - Button CSS
33:28 - Single Column Text & Button HTML & CSS
36:50 - Email Footer HTML & CSS
40:05 - Responsive Email Template Completed
40:54 - Image Hosting for Email
41:39 - Testing the HTML Email Template with Litmus Putsmail!
➢HTML Email Mastery Course
responsivehtmlemail.com/course/
![[ไฮไลต์] ฟุตบอลหญิง เยอรมนี vs ออสเตรเลีย รอบแบ่งกลุ่ม | โอลิมปิก 2024](http://i.ytimg.com/vi/i_8UO61YqO8/mqdefault.jpg)
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:
➢ w3newbie.com/email-course/ (coupon link for Udemy)
liked and subscribed because you're going to help me get out of poverty.. thanks man
Same
Impeccable instructions - well done! Thanks so much!
Thank you a lot! You have no idea how much did you help me! I'm going to see all your videos! Keep the good work!
Thanks! For future HTML Email Tutorials please subscribe to my new channel and turn on notifications: th-cam.com/channels/ZWoe3ezD_dZTZgQnDyBgFQ.html
Thanks for this kind of tutorials! Are really interesting. Regards!
This is a very nice example and help because so many other tutorial include just html without table while a lot of article explain table is the most supported with email (expecially with older email systems)
Thanks! Yes, tables are best but for 100% support you will also need to use HTML Email Conditional Statements. These are covered in my course but not in TH-cam videos due the length (the course is 3.5+ hours).
Great Video - Thank you!
Hey guys, do to the success of some of the HTML Email videos on this channel, I have also made a new channel that will only be HTML Email and Email Marketing content. If you wish to check it out and subscriber, here is a link :) th-cam.com/channels/ZWoe3ezD_dZTZgQnDyBgFQ.html
Thank you so much!
Esse vídeo me ajudou muito!! Obrigada.
Really great video
Thank you so much for your time.
Great Video! Do you have a tutorial on how to code this for outlook and embed images?
Hey, thanks for the tutorial, if possible kindly make a video on how to make a HTML email signature. Thank you
Hi, thank you for this very handy tutorial. I hope it's ok to raise question. @ 16:15 - displaying the "column" class "inline-block" is stocking the elements vertically. Will display "inline" do it?
Thank you for the great tut, quick question I use target="_blank" & rel="noopener" on my links for security reasons. Hope to see more great content from you.
Thanks! For future HTML Email Tutorials please subscribe to my new channel and turn on notifications: th-cam.com/channels/ZWoe3ezD_dZTZgQnDyBgFQ.html
I’m progressing as an Email Developer and I’m just curious as to why you didn’t start most of the sections with a tag? You just went straight into using the and tag. I’m curious as to why that method was used🙂
So we can use less code :). Since the template itself needs to be in a main table.
Great videos I appreciate taking out time to teach… I’ve been having problems getting the social links to align vertically next to the logo I could hack it in but would rather do it ur way. What could stop the tables from aligning vertically following ur method?
Thanks for watching the tutorial. I would check your code to the video and see if the CSS spacing matches up.
What are the emmet prompts to get the metadata at the top? Apart from html:5. Also, is the reset code at the top standard for email templates?
Could anyone lend a hand? I was finally able to get this whole email template working, besides the last two column section. The image and text do not align left and right, but above and below each other (centered). I've triple checked this tutorial, the 260px max width, tried floating the image/text, and everything else I can think of without luck. For once I don't believe I messed the table structure up either! His seems to align left and right from the get go with hardly any styling. Thank you.
Hello there i really like your video and today i buy your cource from udemy but you use tag in start this is deprecated in html it does not effect in email? thank you
watching now sir
Do you mind using div for wrapper instead of center
Bro how to run the HTML, CSS CODES in the Sublime Text editor? Could you please explain and make a video on that Bro please.
Do you have a new course? I finished the one you have. Can you do a transaction email also. 😊
3 columns is very confusing . One question i have , Why do you inner table tags for creating columns . Can't we do it using the colspan and rowSpan ?
This is GREAT! It looks perfect in my Gmail and mobile. However, it came out ugly in outlook.
Thanks! Yes, as I mention in my TH-cam videos (I hope I have in this as well) the design is not set up to work in all email clients such as Outlook. This requires testing with a service like Email on Acid or Litmus and much more attention to detail (such as html email conditional statements). In my complete course I cover all of these nitty-gritty details.
thank you,
so basically this example did not need ghost tables ? for outlook ?, im confused because on your udemy course , you included ghost tables even though there was no divs
Hi Tony, thanks for watching. As I believe I mention in the video (I hope I did as I have previous TH-cam tutorials..) this design will work in most email clients, but won't work on Windows email clients (Outlook). That requires the conditionals statements/ghost tables as you mentioned and much more attention to the inline CSS/testing as seen in the full course. To do this the design would take about 3+ hours like the course design. This design is for beginners who can then progress to the course designing for Outlook.
Any reason not to use a framework like mjml instead of scripting everything manually?
Hey can you suggest how can I use google fonts in gmail because it's not supporting google font in gmail and apple mail
Is this true responsive or just an adaptive design? Because this is very important question in this case.
Looks great in Dreamweaver and when test viewing in the browser, but completely different in Gmail or IOS, and when using the URL for the images, they do not show.
Hi Laura, thanks for watching. Towards the end of the video I explain how to get your images online so they can show in the inbox. Also see the css inlining at the end of the video for best compatibility.
Note for myself: tr td table for the whole table. Another table for two/three columns. Another table for the column. Another table for the content.
- time stamps out of place.
- 25:54
- 33:23
- 11:39 For more two column help
can I use javascript to creat email?
When we forward this email templates classes are breaking.. please help
I have triple checked the code for the three-columns section and all the CSS, but for some reason all three images are shown vertically instead of each taking up 1/3rd of the width in the same row. Any ideas as to what I'm messing up?
same happened to me
@@jaredgraham4455 please let me know if you figure it out!
@@topshelfmusicgroup5899 same, so I'm not the only one going crazy!
Same here
great video but questions, why not put all styles in your CSS? Why are you putting some in CSS up top but some styles in the tags directly? that's a little confusing
The HTML email template CSS in inlined towards the end of the tutorial so we don't have to repeat the CSS in the elements. You are correct though, in HTML email we need our CSS inline.
Your 2nd and 3rd border lines are different colors. Besides that, I've been trying to figure out why my 2nd border is always thinner than my 3rd border. They both contain the EXACT inline styles of 2px height and same color. Does anyone know what I'm missing here? Thanks!
This is a problem on this tutorial and the Sail Chimp Tutorial.
I woke up today and the borders are both the same! I don't have a clue as to what happened lol.
In the outlook, three columns divs become one div, any solution??
can we make responsive email template without using media query?
My icons are pretty close to eachother, how do I put padding between them?
nvm I figured it out!
for implementation, all display not working
Hi,
I'm from Pakistan I want to avail this discount on your udemy course but my payment method is not working any alternative please
Hello, I saw that you have published a course on Udemy, I want to buy but my English is not very good, does it have subtitles? Thank you
Thanks for your interest in the course! There are English subtitles in the course, start to finish. This is the only language subtitled though.
Wait I'm in HTML 5 I can't use center
Noob question: Why people use tables instead of Divs for HTML mails? Seems too confuse for me.
Email client rendering is different from web browsers and html tables are the best option to render across the most email clients.
Sir gmail not support classes
It works and is tested in Gmail.
@@w3newbie but now gmail not support style classes on head section
I think I'm getting something similar... its not recognizing the CSS inline-block on gmail or Outlook
@@lvrry now i solved this problem use two style tag in head section and add cas on second style tag
There is another youtube channel called ''Responsive HTML Email'' that posts your videos. is it your channel?
why don't you teach free how to add text on background image, in your all videos you add only banner image you don't show how to add text over image
Hello, this is complex html email code to render the text on the banner properly. It is covered in my course in the description inside of three video sections.
very bad