Web Development HTML

Design to Code: Turning Email Designs into HTML and CSS

10 free bite-sized lectures for beginners to learn about basic semantic markups.
New
Rating: 4.6 out of 5 (26 ratings)
4,325 students
Created by Rosy H Nguyen
Enroll now
Design to Code: Turning Email Designs into HTML and CSS
New
Rating: 4.6 out of 5 (26 ratings)
4,326 students
Buy now
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.

Requirements

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

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.
    04:05
  • Introduction to CSS and how to link CSS into HTML file
    04:34
  • Basic HTML template and CSS resets
    06:08
  • Write Codes for CSS reset in <head>
    1 question
  • Build email layout with <table>
    04:59
  • Add images, paragraphs, and buttons to email HTML
    05:05
  • Add videos and footer to email HTML
    07:00
  • Create permanent links for to host your images and other media for free
    07:03
  • Email responsiveness with @media queries
    05:02
  • Animation and hover state & Adding animation with @key frame
    05:07
  • Email accessibility and how to find inspiration for your emails
    08:21

Instructor
Rosy H Nguyen
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.