Design to Code: Turning Email Designs into HTML and CSS

10 free bite-sized lectures for beginners to learn about basic semantic markups.
Rating: 4.6 out of 5 (26 ratings)
4,325 students
Design to Code: Turning Email Designs into HTML and CSS
Rating: 4.6 out of 5 (26 ratings)
4,326 students
How to turn your email design into HTML and CSS with free bite-sized lectures
Approximately 5 min for each lecture. You’ll learn semantic markups, responsive design and accessibility with 5-minute videos
2 free and ready-to-use HTML email templates provided in the course
Codes for responsive breakpoint, animation, and accessibility can be used again and again for emails and web designs.


  • This course is built for beginners, no previous coding experience required
  • Install Visual Studio Code

This free Udemy course provides 10 free lectures. Each lecture contains approximately 5 min of video. 2 ready-to-use HTML email templates, together with all the codes are posted on Github and you can download and use them for free.

You will learn how to code HTML emails with CSS reset, basic layouts, images, videos, responsive design, and accessibility with just 5 minutes a day.

Who this course is for:
  • Anyone without prior coding experience who want to learn HTML email development
  • Designers who want to code their email design in HTML and CSS
Course content
5 sections • 10 lectures • 57m total length
  • Introduction to HTML and CSS. Set up your file.
  • Introduction to CSS and how to link CSS into HTML file
  • Basic HTML template and CSS resets
  • Write Codes for CSS reset in <head>
    1 question
  • Build email layout with <table>
  • Add images, paragraphs, and buttons to email HTML
  • Add videos and footer to email HTML
  • Create permanent links for to host your images and other media for free
  • Email responsiveness with @media queries
  • Animation and hover state & Adding animation with @key frame
  • Email accessibility and how to find inspiration for your emails

Front-end Dev Tutor, Seneca College. Coordinator, DesignX
Rosy H Nguyen
  • 4.6 Instructor Rating
  • 26 Reviews
  • 4,325 Students
  • 1 Course

I am a full-stack designer. I have been designing digital experiences for 4+ years across a variety of industries.

I am a mentor and tutor for many first-year design students at Seneca College. I am also the Community Coordinator at DesignX.

In case you have any topics you want me to write articles/make videos about it, feel free to ping me on LinkedIn. I'm open to a 1-on-1 chat on LinkedIn.