Design to Code: Turning Email Designs into HTML and CSS
- 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.
- Anyone without prior coding experience who want to learn HTML email development
- Designers who want to code their email design in HTML and CSS
- Introduction to HTML and CSS. Set up your file.04:05
- Introduction to CSS and how to link CSS into HTML file04:34
- Basic HTML template and CSS resets06:08
- Write Codes for CSS reset in <head>1 question
- Build email layout with <table>04:59
- Add images, paragraphs, and buttons to email HTML05:05
- Add videos and footer to email HTML07:00
- Create permanent links for to host your images and other media for free07:03
- Email responsiveness with @media queries05:02
- Animation and hover state & Adding animation with @key frame05:07
- Email accessibility and how to find inspiration for your emails08:21
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.