Email Developer Course: Build Bulletproof HTML Emails

1

How Email Rendering Works

7 lessons

1. What Email Development Is, and Why It's Its Own Craft
2. Email Clients and Rendering Engines
3. Why Email Still Runs on Tables and Inline CSS
4. Build the Email Boilerplate
5. Add a Hidden Preheader
6. Project: Your First Complete Email Skeleton
7. Resources: Important Links

2

Table Layouts and Inline CSS

9 lessons

1. Your First Table Cell
2. Rows and Columns With Tables
3. Nested Tables for Real Layouts
4. Spacing: Padding, Margins, and Spacer Rows
5. Background Colors and Borders
6. The Bulletproof Content Container
7. Two-Column Layout With Tables
8. Fixed vs Fluid Width, and When to Use Each
9. Mini-Build: Single-Column Newsletter

3

The Component Library

9 lessons

1. Component: Logo and Navigation Header
2. Component: Hero Section
3. Component: Text Content Block
4. Component: Image Content Block
5. Component: Product Card
6. Component: Dividers and Spacers
7. Component: Social Icons Row
8. Component: Footer and Unsubscribe Area
9. Mini-Build: Assemble Your Component Library

4

Bulletproof Elements

10 lessons

1. Why Standard Buttons and Backgrounds Fail
2. Bulletproof Button: The Table Method
3. Bulletproof Button: The Padding Method
4. Bulletproof Button: The Border Method
5. VML Buttons for Outlook
6. Full-Width Buttons on Mobile
7. Bulletproof Background Images
8. Images: Retina, Alt Text, and Dimensions
9. Designing Emails That Survive Image Blocking
10. Mini-Build: CTA Library and an Outlook-Safe Hero

5

Responsive and Hybrid

8 lessons

1. Responsive, Fluid, or Hybrid: The Map
2. Email-Safe Media Queries
3. Stacking Columns on Mobile
4. Mobile-Only and Desktop-Only Content
5. The Fluid Plus Max-Width Pattern
6. Ghost Tables and Conditional Comments
7. The Hybrid (Spongy) Layout
8. Starting From Battle-Tested Templates: Cerberus

6

Dark Mode and Accessibility

7 lessons

1. How Email Clients Apply Dark Mode
2. Dark Mode: Meta Tags and Media Queries
3. Protecting Logos and Choosing Resilient Colors
4. Accessibility Inside Email's Constraints
5. Semantic Structure: Roles, Headings, and Lang
6. Alt Text, Contrast, and Descriptive Links
7. Mini-Build: An Accessible, Dark-Mode-Ready Email

7

Project: Promotional Email (Fluid)

9 lessons

1. Project Preview: The Promotional Email
2. Scaffold the Fluid Shell
3. Preheader and Logo Header
4. The Sale Hero
5. The Offer Block
6. The Bulletproof CTA Button
7. Footer and Unsubscribe
8. Fluid Images and Final Polish
9. Test It Live

8

Project: Newsletter (Responsive)

10 lessons

1. Project Preview: The Newsletter
2. Scaffold the Responsive Skeleton
3. Header, Preheader, and Nav
4. The Featured Article
5. Two-Column Article Cards
6. Stack the Columns on Mobile
7. The Short Links Section
8. Social Row and Footer
9. Mobile Typography and Spacing
10. Test It Live

9

Project: Transactional Receipt (Hybrid)

9 lessons

1. Project Preview: The Order Receipt
2. Scaffold the Hybrid Shell
3. Header and Order Confirmation Banner
4. The Order Summary Table
5. Totals, Shipping, and Tax
6. Hybrid Columns That Reflow Without Media Queries
7. Track Order CTA and Support Footer
8. The Outlook Fallbacks Pass
9. Test It Live

10

Ship It: Testing, Deliverability, and AI

9 lessons

1. Why Browser Preview Is Not Inbox Testing
2. Send a Real Test With HTML Test Email
3. Testing Across Clients With Testi.at
4. Deliverability Fundamentals: SPF, DKIM, DMARC
5. Gmail Clipping and Email File Size
6. Unsubscribe, Address, and Compliance
7. ESP Integration and Merge Tags
8. Personalization With Safe Fallbacks
9. Using AI Without Losing Quality Control

11

AMP for Email

11 lessons

1. AMP for Email Fundamentals
2. The AMP Email Document Structure
3. AMP Validation and the Rules
4. AMP Carousels
5. Forms Inside Email
6. Dynamic Data with amp-list
7. Live Content and Freshness
8. AMP Security Requirements
9. Inbox Support and Sender Registration
10. HTML Fallback Versions
11. Project: Build an Interactive AMP Email

12

Where to Go From Here

1 lessons

1. Where to Go From Here