HTML Email Template From Scratch with HTML Tables and CSS

Поделиться
HTML-код
  • Опубликовано: 18 дек 2024

Комментарии • 55

  • @w3newbie
    @w3newbie  11 месяцев назад

    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)

  • @shannonmurdock9512
    @shannonmurdock9512 4 года назад +6

    Thanks so much for this tutorial. You've just armed me with a new skill that's going to take my output at work to an impressive new level that's leaps and bounds above the clunky old formatting we were doing for our email templates in Outlook. Very well done video, sir. Kudos.

  • @Searle781
    @Searle781 3 года назад +1

    This is great. Struggling to finish a test for an email designer position.

  • @mtlbeta8420
    @mtlbeta8420 4 года назад +2

    Great video and filled with helpful advice. The promo deal is just icing on the cake. Yummy.

  • @davidherrington5052
    @davidherrington5052 10 месяцев назад

    Excellent detailed instructions

  • @shafaitahir4728
    @shafaitahir4728 Год назад

    Such an amazing turotial, learnt so much.

  • @theshredguitarist25
    @theshredguitarist25 4 года назад +5

    Taking courses so i can learn how to be an html email dev, thanks so much for this video!!! Liked and subscribed!

    • @w3newbie
      @w3newbie  4 года назад +3

      Thanks for subscribing and taking my course :)

  • @asim-gandu-phenchod
    @asim-gandu-phenchod 3 года назад +1

    Awesome tutorial. Thanks for such nice content. Stay blessed

  • @mikecampbell1326
    @mikecampbell1326 3 года назад +1

    I love your tutorials. I wonder I have a specific question concerning actual data tables that need to be responsive (adding a horizontal scroll bar) if below the max-width. Would love to see a tutorial on how to handle data tables in a responsive layout!

  • @jacobzinn9808
    @jacobzinn9808 4 года назад +1

    Great tutorial! I love it when you explain the reasoning behind certain attributes. You mention that you have tested your emails for consistency across email clients. Is this one of those emails that works across clients?

  • @micheltorres65
    @micheltorres65 3 года назад +1

    Thank you for your hard work and excellent explanation!

  • @w3newbie
    @w3newbie  3 года назад +1

    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 :) ruclips.net/channel/UCZWoe3ezD_dZTZgQnDyBgFQ

  • @LeoDorsey
    @LeoDorsey 3 года назад +3

    bro you about to get me the job that i need. thank you!!

  • @zaidrasool3351
    @zaidrasool3351 2 года назад

    which color theme You have used in VScode..?

    • @w3newbie
      @w3newbie  2 года назад +1

      Eagle Oceanic Next with some custom colors in settings. json

  • @anadayinufioortega8652
    @anadayinufioortega8652 2 года назад +1

    hi! I have a doubt. I thought that no Css was good in an email, that it was supposed to be only tables. Can you explain me? Please 🙏

    • @w3newbie
      @w3newbie  2 года назад

      CSS works in HTML Email but it has to be internal and inlined, not an external stylesheet. There are also limitations for certain email clients.

  • @ALWALEEDALWABEL
    @ALWALEEDALWABEL 3 года назад +1

    Congratulations, you've reached 300 likes for this video :)

  • @lusayuri
    @lusayuri 3 года назад

    Hi! If inline CSS is recommended, why using the tag inside the ?

    • @w3newbie
      @w3newbie  3 года назад

      We use an inliner tool late in the video before sending test emails. It makes for a more compact video lesson doing it this way. You can't do this with conditional statements though so in my course everything is done inline without using an inliner tool.

  • @groovebird812
    @groovebird812 3 года назад

    Hi, does max-width at tables mean that they can't be smaller or why they are stacking on smaller screens? Did you test the template only in gmail? There are so many other clients like outlook. Does the template look correctly in outlook?

    • @w3newbie
      @w3newbie  3 года назад

      Hi there, the template will work in new email clients but not Windows based ones such as Outlook which requires much more attention to details (such as html email conditional statements) which I provide in my paid course. The images have a max width but can be changed with media queries on smaller devices so the images take up the full width of the table without padding.

  • @yinhongwang5334
    @yinhongwang5334 4 года назад +1

    That's very nice course that I can learn how to create an html email.
    But I have a question, if I want to add some margin to the social media icon, what can I do?

    • @w3newbie
      @w3newbie  4 года назад +1

      Thanks :) you can add padding between the social media icons to space them out more. This will work in many email clients but won't work in Outlook/windows programs.

  • @vspec15
    @vspec15 3 года назад

    Why is "style= color: #ffffff; font-size: 19px;" added to the instead of the ? Whereas then the font-weight is added to and not the ?

  • @viralworld955
    @viralworld955 3 года назад

    Sir please upload more videos on email.

  • @MariaAli-yy7lk
    @MariaAli-yy7lk Год назад

    Hello ,I have coded exactly as you showed but my website turned into a non-responsive website. How do I solve it?????

  • @KhalilCh
    @KhalilCh 2 года назад

    Great, Is there a way to see the result on all email clients live instead of browser as browser does not always give you the correct result.

    • @w3newbie
      @w3newbie  2 года назад

      At the end of the tutorial we use the free Litmus Putmail program where you can test in your own email clients but to see in all clients you need to pay for (or try a free trial) to Litmus, Email on Acid or another program like this.

  • @sacrac1
    @sacrac1 4 года назад

    very good tutorial !!

  • @КристинаПотылицына-э1ч

    Hi! We can make up letters with both divs and tables?

  • @Velasangre_
    @Velasangre_ 3 года назад

    Does It works on Outlook? I mean, stills being responsive on It, or only works on web mails?

  • @amraldroubie3127
    @amraldroubie3127 3 года назад

    why you use table can i use flex box or grid? please tell me the answer

  • @juicysoup9633
    @juicysoup9633 3 года назад

    Thank you very much!

  • @jaykulsh8179
    @jaykulsh8179 3 года назад +1

    Thanks a lot.

  • @jaykulsh8179
    @jaykulsh8179 3 года назад

    Strange thing is happening in my case. I can create the email and see all the images but when I send it, it only has that old text like 'anything'. Nothing gets saved. BTW, I am using Base64-coding for a few small images. Could that be preventing save?

    • @jaykulsh8179
      @jaykulsh8179 3 года назад +1

      Found answer on my own. Gmail does not support Base64-encoding.

  • @RahulAhire
    @RahulAhire 3 года назад

    Why are you using inline CSS instead of embedding css file to it? Doesn't email client support embedded CSS?

    • @w3newbie
      @w3newbie  3 года назад

      For HTML email client rendering inline CSS is recommended. Newer email clients like Apple Mail allow for internal style sheets to work but using an inliner or inlining while designing is still the best practice.

    • @RahulAhire
      @RahulAhire 3 года назад

      @@w3newbie yep I checked the compatibility in email isn't as standard and uniform as browsers

    • @herambhsharmakhatudham3680
      @herambhsharmakhatudham3680 3 года назад

      @rahul ahire please send me your number

  • @CarlosHernandez-xw9zm
    @CarlosHernandez-xw9zm 3 года назад +1

    Amazing!

  • @krownklarke
    @krownklarke 3 года назад

    will this work with outlook and yahoo?

    • @w3newbie
      @w3newbie  3 года назад

      This will work for Outlook on Macs but not Windows, you will need MSO conditional statements, or ghost tables, as explained in my email course linked in the description.

  • @vivianpham3241
    @vivianpham3241 3 года назад +1

    Thanks so much for this tutorial. May I have the instruction to send the html directly to clients without fwd from the Sample Putsmail email?

    • @w3newbie
      @w3newbie  3 года назад

      Thanks for watching! This video will show you how to add the code directly to Gmail for a single email but inlining the CSS is still recommended: ruclips.net/video/ER3_JXAVqEg/видео.html

  • @kiolh_19880
    @kiolh_19880 3 года назад

    My gmail and outlook change the background color to black :(

  • @erfanshafighnia8259
    @erfanshafighnia8259 3 года назад

    Thank you

  • @spicy_bala
    @spicy_bala 2 года назад

    How to fix outlook issue

  • @zzzzzzzzzzzzzzzzzzz13142
    @zzzzzzzzzzzzzzzzzzz13142 Год назад

    Hello is it your real voice? Sounds like robot 😂