# HTML Email Bootcamp (Self-Paced)

Canonical URL: <https://www.graduateschool.edu/courses/html-email-bootcamp-self-paced>

## Overview

Email marketing is an essential part of modern campaigns, and this self-paced course teaches you how to code custom-designed emails that engage your audience. You’ll learn how HTML and CSS are used specifically for email development and how email coding differs from standard webpage design.

As you work through the course at your own pace, you’ll build responsive emails that display well on different screen sizes and follow the full email workflow, from testing to delivery, using an email service provider such as Mailchimp.

## What you'll learn

- Learn how to code HTML emails that display consistently across major email clients
- Build and work with a variety of layouts, including single-column and multi-column designs
- Develop a strong understanding of email-safe HTML and CSS and how to handle client-specific issues
- Create responsive emails that adapt smoothly to different screen sizes and devices
- Optimize images and swap graphics to improve mobile compatibility
- Use media queries to fine-tune styles for mobile email layouts

## Prerequisites

You should have HTML and CSS coding experience equivalent to our [Web Development with HTML & CSS](/courses/coding-html-css) class.

## Curriculum

### Section 1

#### Simple Responsive Layout

- Coding the table structure
- Fixing a gap below images
- Making the email responsive
- Introduction to CSS media queries

#### 2-Column Layout: Media Queries

- Coding the nested table structure
- Writing styles for desktop & mobile versions
- Media queries for fine-tuning mobile responsive design
- Modifying media queries

#### Mobile-Friendly Column Layout

- Coding the table for the 2-column content
- Converting the mobile layout to 1-column
- Adding the other date listings
- Refining the CSS

### Section 2

#### Optimizing Images for Mobile

- HTML email image quality: a balancing act
- Dealing with hi-res/retina images
- Swapping the banner on mobile
- Further optimizing the mobile banner

#### Responsive Footer

- Structuring the footer layout
- Styling the footer
- Optimizing the footer for smaller screens

#### Sending Tests & Email Fixes (Preflighting)

- Adding a preheader to entice mobile users
- Inlining the CSS
- Sending test emails

## Pricing

**Tuition:** $425