Secret Snippets For HTML Email Template Design

A collection of VS Code snippets to streamline HTML email template development.

Overview

This extension provides a comprehensive set of snippets for creating responsive HTML email templates that work across different email clients. These snippets follow email development best practices and include various layout options, components, and utilities.

Installation

Open VS Code
Go to Extensions (Ctrl+Shift+X)
Search for "Secret Snippets For HTML Email Template"
Install and reload VS Code

Available Snippets

Prefix	Description	Details
`ET-boilerplate`	Base email template	Includes DOCTYPE, meta tags, and basic structure
`ET-css`	CSS reset	Complete CSS reset with dark mode support
`ET-img`	Image block	Bulletproof image template with alt text
`ET-button`	Button block	Mobile-friendly button with customizable styles
`ET-content`	Content block	Container for email content
`ET-row`	Row block	Table row structure
`ET-space`	Spacing block	Vertical spacing with configurable height
`ET-mspace`	Mobile spacing	Mobile-only vertical spacing
`ET-mobileblock`	Mobile-only block	Content visible only on mobile devices

Responsive Layouts

Prefix	Description
`ET-rcol1`	Single column responsive layout
`ET-rcol2`	Two column responsive layout
`ET-rcol3`	Three column responsive layout
`ET-rcol4`	Four column responsive layout
`ET-rcol5`	Five column responsive layout

Fluid Layouts

Prefix	Description
`ET-fcol1`	Single column fluid layout
`ET-fcol2`	Two column fluid layout
`ET-fcol3`	Three column fluid layout
`ET-fcol4`	Four column fluid layout
`ET-fcol5`	Five column fluid layout

Hybrid Layouts

Prefix	Description
`ET-hcol1`	Single column hybrid layout
`ET-hcol2`	Two column hybrid layout
`ET-hcol3`	Three column hybrid layout

Special Components

Prefix	Description
`ET-BGHero`	Background hero image section
`ET-BGMobile`	Different backgrounds for mobile/desktop
`ET-preheader`	Hidden preview text
`ET-social`	Social media icons
`ET-footer`	Standard footer with copyright
`ET-unsubscribe`	Unsubscribe section

Usage

Create a new HTML file
Type ET- to see all available snippets
Select the desired snippet
Use Tab to navigate through the customizable fields

Features

Mobile-responsive layouts
Dark mode support
Cross-client compatible
MSO conditional comments for Outlook
Fluid and hybrid layout options
Bulletproof components
Add preheader text for email previews
Implement dark mode support
Ensure mobile responsiveness
Include unsubscribe options

Best Practices

Always test emails across different email clients
Use tables for layout structure
Include proper alt text for images
Maintain a maximum width of 600-640px
Use inline CSS for better compatibility

🎓 Master Freelancing on Fiverr!

Join my comprehensive course: "Fiverr: Get Your First Order (Bangla Advanced Course)"

Transform your freelancing journey with my detailed 5+ hour course (28 videos) that takes you from beginner to landing your first client on Fiverr!

💡 What Makes This Course Special:

Proven strategies to stand out in the Fiverr marketplace
Secret methods for accelerating your success (exclusive content!)
Access to private Telegram group for networking and support
Direct interaction with me and other successful learners
No fluff - straight to the important content!

By enrolling, you're not just getting a course - you're joining a community of successful freelancers and getting access to proven strategies that work!

☕ Your support fuels the creation of more valuable content that helps transform freelancing dreams into reality!

Want to transform your freelancing career? Contact me on WhatsApp to enroll or learn more: WhatsApp: 01754752096

Support

For issues, suggestions, or contributions, please visit our GitHub repository.

License

MIT License - feel free to use in personal and commercial projects.

Author

Created by Akon M Hasib