This is part 2 of a 3 part series on how to create a HTML email. This is based on the email template I released a few weeks ago, Here. This is my first ever screencast series so any kind of feedback would be great. In Part 2 I’ll show you how to convert a PSD into HTML.


To stay updated on next week’s screencast, please sub­scribe by either using E-Mail, RSS Feed or follow us on Twitter.

about Mohammad Koubeissi

Freelance Web Developer - Tailor, Gym Rat and Mountaineer.

  1. 7 years ago

    Mohammad Koubeissi


    Thank you, part 3 should be ready this week.

  2. 7 years ago


    good tutorial video, but needs more explanations.
    im following it but doing it for my own design

    send me you email address and ill send you a copy of it. if you could please tell me about how to go around coding it or send me a copy of your code explaining what i need to edit that would be muchly appreciated.

    1. 7 years ago

      Mohammad Koubeissi

      @Alex Hello Alex, Thanks for your input. I’m kinda new to the whole ‘screencast’ game – It’ll be better next time, promise :). If you need to contact me, please use the contact form here:


  3. 7 years ago


    Tips for your HTML, close the tags as soon as you open one, that way you don’t lose track of what is still open.
    Question, why don’t you use instead of
    Also you repeat the font-family, isn’t it taken care of already in your body tag?
    I would also like more explination while your ‘filming’.

    all in all, as i’m just writting up my first ’email’ I like what you’ve shown, keep up the good work.

  4. 7 years ago

    Mohammad Koubeissi

    Hello Colin,

    Thanks for your comment.

    I completely agree on closing the tags as soon as I open one. I have got rid of my bad habits since then thanks to Textmate.

    Unlike the standard way of building websites; including the font-family in the body would be enough but, when building email templates because of how mail clients render the HTML, one must repeat themselves to make sure the selected font-family is used properly.

    I have just released a new template and I will create a new set of videos with better explanations of my work flow.

  5. 7 years ago


    check this out

    it awesome

    How to code an HTML Email Newsletter – The Email Dance

  6. 7 years ago


    Why don’t you just use margin to create the space between the button and your text? You’re learning some bad habits here.

    Nice tutorial though with a nice result.

    1. 7 years ago

      Mohammad Koubeissi


      Initially I did use margin to create spacing around elements, but had problems with certain mail clients during the testing phase.

  7. 6 years ago


    Terrific screencast. Thanks so much for sharing. I am a designer and I have built a couple of websites using dreamweaver but shifting to tables and the methods of coding for email has made my head hurt.

    BTW, I’m a skydiver so regards your dream of base jumping in Norway; I’d say go for it!

  8. 6 years ago


    This has been really helpful. The last time I coded in html feels like centuries ago and this has really been a useful refresher. I’ve been trying to reverse engineer a few free templates but trying to figure out someone elses code after the fact is a complete nightmare (especially when you have no clue what you are doing!)

  9. 6 years ago


    Just a note, you really should use the slice tool to slice your Photoshop layouts and ‘save for web’ that way rather than using the crop tool. Slicing allows you to name each segment, with set dimensions and not have to re-crop every time. This slice info also saves with the PSD so you never have to use the history/undo to get those back.

  10. 6 years ago

    Mohammad Koubeissi

    @SteveHiggs Bad habit Steve. I already know about the slice tool I just find using the crop tool more comfortable even if it’s a longer process 🙂

  11. 6 years ago


    To trim images:

    1. cmd + click to select image
    2. Option click the layer’s eye ball to turn off the rest of the layers
    3. Then on the top nav go to Image / Trim and select Transparent Pixels

    It is faster this way. Good tut. Thanks.

  12. 6 years ago


    Hey Mohammad I a questio. Are the images url allowed to hold parameters, e.g.



  13. 6 years ago

    Grazone Epic

    Great tutorial thanks

    me from UAE are you egybt

  14. 6 years ago


    Thank you very much for your tutorials they are amazing. Congrats!

  15. 6 years ago

    Thomas Brooks

    Man I love that you go through the stages of building an email template fully for someone like me who is just learning of what an email template is. Much thanks.

  16. 6 years ago


    Thank you for this. It’s difficult for some of us print designers to make this transition. Learning simple techniques (until I can understand the full scope) is what I look for and your layouts are spot-on.

    Yours is a service to the community. That and

  17. 6 years ago



    Muhammad thanks for tutorial, but i am confused.. If you had to make HTML code by hand then why did you make it in Photoshop..?

  18. 6 years ago

    Mohammad Koubeissi


    I designed it in photoshop to give me a ‘wireframe’ to work with.

  19. 6 years ago

    Mohammad Koubeissi


    Yes images can hold parameters. Quite a few tracking services use this technique

Comments are closed.

Beautiful Emails

Copyrights © 2017 ThemeStall All Rights Reserved.