Build A Responsive HTML Email Template with HTML Tables & CSS

by | Aug 24, 2021 | 0 comments

Build A Responsive HTML Email Template with HTML Tables & CSS

by | Aug 24, 2021 | CSS Tips and Tricks | 0 comments



Build A Responsive HTML Email Template with HTML Tables & CSS
➢Tutorial Starter Files:
https://m.w3newbie.com/e/tut-4.zip

➢HTML Email Mastery Course:
https://w3newbie.com/email-course/

In this video we’ll build a complete mobile friendly HTML Email Template with responsive HTML tables. The email template that we build in the tutorial has been tested as responsive in Gmail, the Gmail App, Yahoo Mail App, and on the iOS Email App. The email will also show and display properly on a number of other mobile, tablet and desktop email clients.

0:00 Introduction
0:29 HTML Email Template Design Overview
2:09 – Tutorial Files Download Overview
2:27 – HTML Email Mastery Course Preview
https://w3newbie.com/email-course/

3:33 – Visual Studio Code Text Editor
3:54 – index.html HTML Starter File Overview
6:44 – Centering the HTML Email Template
8:01 – Centering and Email Table Width CSS
11:05 – Social Media Icons HTML & CSS
15:10 – Logo Table Row HTML & CSS
17:20 – Email Banner Image HTML
18:25 – Responsive Two Column Section HTML
24:55 – Two Column Section CSS
30:29 – Two Column Email Client Logos HTML & CSS
34:28 – Email Footer HTML & CSS
40:06 – Adding CSS Media Queries for Responsiveness
42:09 – Testing the Completed HTML Email Template!

Post for this lesson on my website about Responsive HTML Email:
https://responsivehtmlemail.com/build-a-responsive-html-email-template-with-html-tables-css-code/

source

0 Comments

Submit a Comment

What Our Clients Are Saying

Gloss Beauty Truck

Without the support and help of Leland my business would not be half of what it is. he puts the...

Tammie, Gloss Beauty Truck

Dieno Digital Marketing Services
5
2018-04-27T01:09:38+00:00

Tammie, Gloss Beauty Truck

Without the support and help of Leland my business would not be half of what it is. he puts the extra mile in to what he does to help make it easy from someone like myself who is incompetent with computers. I am so lucky to have him apart of my back end team. He's amazing at what he does .

Divorce For Men Publishing

Leland always executes effective social media campaigns that prove to have a return on investment.

C, Divorce For Men Publishing

Dieno Digital Marketing Services
5
2018-04-27T01:11:58+00:00

C, Divorce For Men Publishing

Leland always executes effective social media campaigns that prove to have a return on investment.

Travco RV

Leland lets me focus on running my business while he takes care of the digital marketing for us. He really...

Rod, Travco-Rv.com

Dieno Digital Marketing Services
5
2018-04-27T20:16:51+00:00

Rod, Travco-Rv.com

Leland lets me focus on running my business while he takes care of the digital marketing for us. He really takes care of our companies marketing with his expertise and has a lot of great ideas. We are very fortunate to  have him helping us with fresh new ideas.

British Columbia Coalition Of Motorcyclists

We've been working with Dieno Digital, for the past year and a half now and couldn't be happier with all...

Tara, British Columbia Coalition Of Motorcyclists

Dieno Digital Marketing Services
5
2018-04-27T22:05:28+00:00

Tara, British Columbia Coalition Of Motorcyclists

We've been working with Dieno Digital, for the past year and a half now and couldn't be happier with all the updates  to our website. Leland is always very responsive and able to answer all of questions or fix any issues in no time at all. We look forward to continuing to expanding and broadening our website with Dieno Digital.
5
4
Dieno Digital Marketing Services
[newsletter_form]
<div class="tnp tnp-subscription"> <form method="post" action="https://www.dienodigital.com/?na=s"> <input type="hidden" name="nlang" value=""><div class="tnp-field tnp-field-firstname"><label for="tnp-name">First name or full name</label> <input class="tnp-name" type="text" name="nn" value=""></div> <div class="tnp-field tnp-field-email"><label for="tnp-email">Email</label> <input class="tnp-email" type="email" name="ne" value="" required></div> <div class="tnp-field tnp-field-button"><input class="tnp-submit" type="submit" value="Subscribe" > </div> </form> </div>