HTML Email Development
Role
Independently authored, designed, and coded three HTML email recreations as technical practice exercises, then audited and rebuilt each in MJML in 2026.
Originally created in 2021–2022 using a Foundation for Emails starter template and framework, these responsive email exercises were tested through Litmus across Gmail, Apple Mail, and Microsoft email environments. In 2026, I revisited the original implementations, audited and remediated the markup, and rebuilt each project in MJML to reflect a more modern component-based email development workflow. The rebuilt MJML versions have no Foundation dependency — no Foundation stylesheet, framework markup, or mj-raw escape hatches are used. The new MJML versions have not yet been revalidated across email clients.
I authored the project-specific HTML and styling using a Foundation for Emails starter template and framework.
These are independent technical recreations created for practice and portfolio demonstration. They were not commissioned, endorsed, or produced for the referenced brands.
The Brand — Editorial Newsletter
What it demonstrates
A dark editorial newsletter built around strong headline hierarchy, hero imagery, long-form body copy, and one focused call to action — the shortest and most visually concentrated of the three.
Project note
A short-form editorial newsletter recreation, rebuilt from a 2021–2022 Foundation for Emails build into MJML.
Technical approach
Built with MJML’s mj-section/mj-column/mj-text/mj-image/mj-button primitives inside a dark 600px mj-wrapper. The eyebrow date and headline use dedicated mj-class presets so that typographic hierarchy stays consistent without repeating inline styles.
Representative MJML
<!-- Eyebrow date + headline -->
<mj-section padding="0 40px 0 40px">
<mj-column>
<mj-text mj-class="eyebrow">JUNE 17</mj-text>
<mj-text mj-class="headline">We raised $4.75 million for <strong>The Brand</strong> 💰🚀</mj-text>
</mj-column>
</mj-section>
<!-- Hero image -->
<mj-section padding="25px 0 20px 0">
<mj-column>
<mj-image
src="https://i.postimg.cc/X7TP18kb/CmpBrand.jpg"
alt="Five people standing together, each holding a printed letter card, spelling out BRAND"
width="500px"
padding="0"
/>
</mj-column>
</mj-section>
<!-- Body copy -->
<mj-section padding="0 40px 20px 40px">
<mj-column>
<mj-text mj-class="body-copy">
We announced that The Brand raised $4.75 million to help our vision for a new economic model around
marketing. HFK led the investment round and joined by Pike, Moonworks, Rick Doe - CEO/Founder of Green & Blue Investments
and Mark Daniels - Founder of Super Ventures.
</mj-text>
</mj-column>
</mj-section>Independent recreation exploring The Brand’s visual language and newsletter format — not commissioned, endorsed, or produced for The Brand.
Babylist — Lifecycle / Editorial Email
View full screenshot
What it demonstrates
A longer lifecycle-style email built from multiple stacked modules — a navigation bar, two editorial content sections, and a promotional insert — composed with MJML’s column system so it reflows correctly on narrow screens.
Project note
A longer lifecycle-style editorial email recreation, rebuilt from a 2021–2022 Foundation for Emails build into MJML.
Technical approach
Built with MJML’s mj-navbar component for the Store/Guides/Parenting navigation, plus mj-section/mj-column for the editorial and promotional modules. MJML’s column layout stacks to a single column on narrow viewports by default, so no custom media queries were needed for the mobile layout.
Representative MJML
<!-- Milestone editorial section -->
<mj-section padding="30px 30px 0 30px">
<mj-column>
<mj-text>
<h2 style="margin:0; font-size:20px; font-weight:bold; color:#0a0a0a;">Milestone: Rolling Over</h2>
</mj-text>
<mj-text mj-class="editorial" padding-top="12px">
Remember when your baby’s coolest trick was swatting at something? Now they’re on a roll, literally.
Your kiddo is working extra hard to move from stomach to back (or just accidentally toppling over).
Thanks to all that tummy time, their head, arm and neck muscles are strong enough to make the magic happen.
</mj-text>
<mj-text mj-class="editorial" padding-top="10px">
While going from front to back is more common, some babies will roll from back to front. Don’t panic if they
do this in their sleep. As long as they’re not swaddled, they’ll be able to safely snooze on their stomach.
Although back is best when it comes to reducing the risk of SIDS, when babies are strong enough to roll, there’s no stopping them.
</mj-text>
</mj-column>
</mj-section>
<mj-section padding="20px 30px 30px 30px">
<mj-column>
<mj-button href="#">LEARN MORE</mj-button>
</mj-column>
</mj-section>Independent recreation exploring Babylist’s visual language and lifecycle-email format — not commissioned, endorsed, or produced for Babylist.
Groupon — Transactional Email
View full screenshot
What it demonstrates
A transactional layout organized around order confirmation first, then a multi-column order-detail breakdown, then product recommendations — the most information-dense of the three, using fictional order and pricing data throughout.
Project note
A transactional order-confirmation email recreation, rebuilt from a 2021–2022 Foundation for Emails build into MJML. All customer, order, and pricing details shown (name, order number, date, and prices) are fictional demonstration data, not a real transaction.
Technical approach
Built with MJML’s mj-section/mj-column layout — a 65%/35% column split for order details, and three equal columns for the description/quantity/price breakdown — rather than mj-table, since the order data is a single line item, not a repeating data set.
Representative MJML
<!-- Greeting + intro copy -->
<mj-section padding="40px 40px 20px 40px">
<mj-column>
<mj-text>
<p style="margin:0; font-size:20px;">Hi Joe,</p>
<h1 style="margin:4px 0 0 0; font-size:24px; font-weight:bold; color:#0a0a0a;">Thanks for your order!</h1>
</mj-text>
<mj-text line-height="1.8" padding-top="16px">
Items that ship do not require any additional action - we will ship them as soon as they are ready. For
items that must be redeemed, click "View Redemption Instructions" to see next steps. If you need to edit or
cancel your order, check out our <a href="#" style="color:#1a73e8;">FAQ page</a> for more information.
</mj-text>
<mj-text line-height="1.8" padding-top="16px">
if you do not have our app,<a href="#" style="color:#1a73e8;"> download it</a> - now a top 25 app in the US!
</mj-text>
</mj-column>
</mj-section>
<!-- Order details -->
<mj-section padding="0 40px 0 40px">
<mj-column width="65%">
<mj-text mj-class="section-heading">Order Details</mj-text>
<mj-text padding-top="8px">
The order number for your purchase on July 31, 2021 is <strong>1000-1XXXX-XXXXX.</strong>
</mj-text>
</mj-column>
<mj-column width="35%">
<mj-text padding-top="30px">
<a href="#" style="color:#1a73e8; font-size:12.8px; font-weight:bold;">View Order Status</a>
</mj-text>
</mj-column>
</mj-section>Independent recreation exploring Groupon’s visual language and transactional-email format, using fictional order data — not commissioned, endorsed, or produced for Groupon.