├── README.md ├── final-html-email-template.png ├── images ├── fb.gif ├── h1.gif ├── left.gif ├── right.gif └── tw.gif └── index.html /README.md: -------------------------------------------------------------------------------- 1 | # Tuts+ Tutorial: [Build an HTML Email Template From Scratch](https://webdesign.tutsplus.com/articles/build-an-html-email-template-from-scratch--webdesign-12770) 2 | **Instructor: Nicole Merlin** 3 | 4 | The best way to understand any process is to carry it out yourself, from the ground up. In this tutorial, we’re going to do just that with email design, by building an HTML email template from scratch. 5 | 6 | **Editor’s note:** this tutorial was originally written by Nicole in June 2013. Since then it’s become the go-to reference for industry leaders all over the world, and has been used by millions of beginners as a starting point for their adventures in email. We’ve kept it updated so it’s as relevant today as it was when it was first published. 7 | 8 | [View the demo](https://codepen.io/tutsplus/pen/aboBgLX) 9 | 10 | ![final result for email template](https://raw.githubusercontent.com/tutsplus/build-an-html-email-template-from-scratch/master/final-html-email-template.png) 11 | -------------------------------------------------------------------------------- /final-html-email-template.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tutsplus/build-an-html-email-template-from-scratch/c71f943e0465390748f4e91c138b7a508a2af3f7/final-html-email-template.png -------------------------------------------------------------------------------- /images/fb.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tutsplus/build-an-html-email-template-from-scratch/c71f943e0465390748f4e91c138b7a508a2af3f7/images/fb.gif -------------------------------------------------------------------------------- /images/h1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tutsplus/build-an-html-email-template-from-scratch/c71f943e0465390748f4e91c138b7a508a2af3f7/images/h1.gif -------------------------------------------------------------------------------- /images/left.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tutsplus/build-an-html-email-template-from-scratch/c71f943e0465390748f4e91c138b7a508a2af3f7/images/left.gif -------------------------------------------------------------------------------- /images/right.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tutsplus/build-an-html-email-template-from-scratch/c71f943e0465390748f4e91c138b7a508a2af3f7/images/right.gif -------------------------------------------------------------------------------- /images/tw.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tutsplus/build-an-html-email-template-from-scratch/c71f943e0465390748f4e91c138b7a508a2af3f7/images/tw.gif -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 17 | 20 | 21 | 22 | 23 | 24 | 90 | 91 |

25 | 26 | 27 | 30 | 31 | 32 | 62 | 63 | 64 | 87 | 88 |

28 |

29 |

33 | 34 | 35 | 40 | 41 | 42 | 59 | 60 |

36 |

Creating Email Magic

37 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan et dictum, nisi libero ultricies ipsum, posuere neque at erat.

38 |

In tempus felis blandit

39 |

43 | 44 | 45 | 50 | 51 | 56 | 57 |

46 |

47 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, est nisi libero ultricies ipsum, in posuere mauris neque at erat.

48 |

Blandit ipsum volutpat sed

49 |

52 |

53 |

Morbi porttitor, eget est accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed.

54 |

In tempus felis blandit

55 |

58 |

61 |

65 | 66 | 67 | 72 | 84 | 85 |

68 |

69 | ® Someone, Somewhere 2021
Unsubscribe 70 |

71 |

73 | 74 | 75 | 78 | 81 | 82 |

76 |

77 |