Design to Code: Turning Email Designs into HTML and CSS

11 free bite-sized lectures for beginners to learn about basic semantic markups.

4.20 (142 reviews)
Udemy
platform
English
language
Web Development
category
6,441
students
1 hour
content
Jun 2021
last update
$44.99
regular price

What you will learn

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.

Description

Knowing how to code HTML email can be so helpful, such as sending pretty custom newsletters to your subscribers or start your job as a digital designer. The best part is coding an email requires just a minimum knowledge of HTML and CSS.

This free Udemy course provides 11 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 in just 5 minutes a day. I will share with you my tips and tricks from my years of coding: from basics of HTML, CSS to Github repo and testing sites.

⭐⭐⭐⭐⭐ "Amazing and clear and concise thanks Rosy... awesome" - JJ Jam

⭐⭐⭐⭐⭐ "Amazing and way above expectations!" - Jeremy Tait

⭐⭐⭐⭐ "It was fairly easy to follow what she was doing. It helped that she provided the code after each section for students to use if they got lost or wanted her code as a reference. She had some very helpful and informative tips on different ways to style or create an email template." - Sarah Rhoad

Content

Introduction and basics about HTML/ CSS

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

Build Your Stunning Static HTML Email Template

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

Responsive Email Design on different devices

Email responsiveness with @media queries

Add Interactivity and Animation to your Email

Animation and hover state & Adding animation with @key frame

Accessibility and testing

Email accessibility and how to find inspiration for your emails

Screenshots

Design to Code: Turning Email Designs into HTML and CSS - Screenshot_01Design to Code: Turning Email Designs into HTML and CSS - Screenshot_02Design to Code: Turning Email Designs into HTML and CSS - Screenshot_03Design to Code: Turning Email Designs into HTML and CSS - Screenshot_04

Reviews

Osunrayi
August 29, 2023
I gained more insights on some other tools, but the course is not really explanatory enough for beginners.
Sabrinna
March 21, 2023
No assignments and no sample code that professor is working on for us to accompany during videos. Moves quickly.
Dianna
June 6, 2022
Some of the tools were difficult to use or did not work as suggested, but overall this was a good course and I learned new things.
Julia
June 1, 2022
She skips through very important information extremely fast. This doesn't feel introductory at all and I can't really understand the information.
Kate
March 24, 2022
It was hard to understand the instructor and some of the code I was instructed to do was not recognized as true code by Visual Studio Code and I received errors. Small assignments for each portion would have been helpful.
Cesar
February 6, 2021
The course is exactly what I was looking for, but I had difficulty understanding the teacher. The learning experience consists of visual, audio, and hands on. By not fully understanding the speaker--audio--this took away from my learning experience.
Sarah
September 18, 2020
I enjoyed this course, I found it easy to follow and having access to the files / images & resources for practice and review was a nice bonus giving you a chance to put your own templates together.
Lucia
August 6, 2020
This course was too fast for me as a beginner. Also, I had feeling that instructor is skipping a steps.
Sarah
July 31, 2020
The instructor went very fast, however it was fairly easy to follow what she was doing. It helped that she provided the code after each section for students to use if they got lost or wanted her code as a reference. She had some very helpful and informative tips on different ways to style or create an email template.
Nguyễn
May 26, 2020
I found that now I can have an understanding about the coding although my background is accounting. I struggled at first but subtitles help me a lot. Thanks you for the free course… and for my 80% progress.

Charts

Price

Design to Code: Turning Email Designs into HTML and CSS - Price chart

Rating

Design to Code: Turning Email Designs into HTML and CSS - Ratings chart

Enrollment distribution

Design to Code: Turning Email Designs into HTML and CSS - Distribution chart

Related Topics

2986716
udemy ID
4/11/2020
course created date
5/21/2020
course indexed date
Angelcrc Seven
course submited by