<!DOCTYPE html>
<html>
<head>
<style>html,body,table { line-height:1.5; } body { margin:0;padding:0; } h1,h2,h3,h4,h5,h6 { font-weight:bold;font-style:normal;font-size:1em;margin:0; } h2 { margin:1em 0; } h3 { margin:1em 0; } h5 { font-style:italic; } h6 { font-weight:normal;font-style:italic; } p,ol,ul,figure,blockquote,.spaced-block { margin:1em 0; } img { border:0;height:auto;line-height:100%;outline:none;-webkit-text-decoration:none;text-decoration:none; } body,table,td,a { -webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; } table,td { border-collapse:separate;mso-table-lspace:0pt;mso-table-rspace:0pt; } table td { vertical-align:top; } img { -ms-interpolation-mode:bicubic;max-width:100%; } * { -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; } hr { margin:36px 0;border:0;height:1px;background:#eee; } ul,ol { margin-left:1em;padding:0;list-style-position:outside; } ol ol,ul ul,ol ul,ul ol { padding:0 0 0 1em; } li { padding:0 0 0 1em;margin:0 0 0 1em; } .email-button { border:0 none; } .built-with { width:100%;max-width:640px;margin-left:auto;margin-right:auto; } </style>
<style>.ck-link { text-decoration: underline; }</style>
<style>.ck-link { text-decoration: underline; }</style>
<style>.ck-link { text-decoration: underline; }</style>
<style>.ck-link { text-decoration: underline; }</style>
<style>@media only screen and (max-width:600px) { .email-container { padding:0 !important; } }
@media only screen { .email * { word-break: break-word; } }
@media screen and (max-width: 384px) { .mail-message-content { width: 414px !important; } }
@media only screen { .email * { word-break: break-word; } }
@media screen and (max-width: 384px) { .mail-message-content { width: 414px !important; } }
@media only screen { .email * { word-break: break-word; } }
@media screen and (max-width: 384px) { .mail-message-content { width: 414px !important; } }
@media only screen { .email * { word-break: break-word; } }
@media screen and (max-width: 384px) { .mail-message-content { width: 414px !important; } }
@media only screen and (max-width:600px) { .ck-padding-left-none { padding-left:0px !important; } .ck-padding-right-none { padding-right:0px !important; } .ck-padding-left-mobile-friendly { padding-left:18px !important; } .ck-padding-right-mobile-friendly { padding-right:18px !important; } }
@media only screen and (max-width:600px) { .ck-mobile-font-size { font-size:50px !important; } }
@media only screen and (max-width:600px) { .ck-layout-block.ck-layout-stack td { display:block !important;width:100% !important;padding:0 !important; } .ck-column.ck-column-stack { margin-bottom:32px !important; } .ck-padding-3-top-mobile-friendly { padding-top:12px !important; } .ck-padding-3-right-mobile-friendly { padding-right:12px !important; } .ck-padding-3-bottom-mobile-friendly { padding-bottom:12px !important; } .ck-padding-3-left-mobile-friendly { padding-left:12px !important; } }
@media only screen and (max-width:600px) { .ck-mobile-font-size { font-size:50px !important; } }
@media only screen and (max-width:600px) { .ck-layout-block.ck-layout-stack td { display:block !important;width:100% !important;padding:0 !important; } .ck-column.ck-column-stack { margin-bottom:32px !important; } .ck-padding-3-top-mobile-friendly { padding-top:12px !important; } .ck-padding-3-right-mobile-friendly { padding-right:12px !important; } .ck-padding-3-bottom-mobile-friendly { padding-bottom:12px !important; } .ck-padding-3-left-mobile-friendly { padding-left:12px !important; } }
@media only screen and (max-width:600px) { .ck-mobile-font-size { font-size:50px !important; } }
@media only screen and (max-width:600px) { .ck-mobile-font-size { font-size:50px !important; } }
@media only screen and (max-width:600px) { .ck-mobile-font-size { font-size:50px !important; } }
@media only screen and (max-width:600px) { .ck-layout-block.ck-layout-stack td { display:block !important;width:100% !important;padding:0 !important; } .ck-column.ck-column-stack { margin-bottom:32px !important; } .ck-padding-3-top-mobile-friendly { padding-top:12px !important; } .ck-padding-3-right-mobile-friendly { padding-right:12px !important; } .ck-padding-3-bottom-mobile-friendly { padding-bottom:12px !important; } .ck-padding-3-left-mobile-friendly { padding-left:12px !important; } }
@media only screen and (max-width:600px) { .ck-mobile-font-size { font-size:50px !important; } }
@media only screen and (max-width:600px) { .ck-mobile-font-size { font-size:50px !important; } }
@media only screen and (max-width:600px) { .ck-mobile-font-size { font-size:50px !important; } }
@media only screen and (max-width:600px) { .ck-layout-block.ck-layout-stack td { display:block !important;width:100% !important;padding:0 !important; } .ck-column.ck-column-stack { margin-bottom:32px !important; } .ck-padding-3-top-mobile-friendly { padding-top:12px !important; } .ck-padding-3-right-mobile-friendly { padding-right:12px !important; } .ck-padding-3-bottom-mobile-friendly { padding-bottom:12px !important; } .ck-padding-3-left-mobile-friendly { padding-left:12px !important; } }
@media only screen and (max-width:600px) { .ck-mobile-font-size { font-size:50px !important; } }</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<div style="background-color:#ffffff"><table role="presentation" cellpadding="0" cellspacing="0" class="email" style="background:#ffffff !important;width:100%" bgcolor="#ffffff"><tbody><tr>
<td><div class="email-container normal" style="padding-top:0;padding-left:0;padding-bottom:30px;padding-right:0;margin:0 auto;max-width:100%"><table cellpadding="0" cellspacing="0" bgcolor="#ffffff" style="width:100%;margin:0 auto;background-color:#ffffff"><tbody><tr><td>
<div class="ck-section" style="margin:0px auto 0px auto"><center><table cellpadding="0" cellspacing="0" style="width:100%;margin:0 auto;max-width:100%"><tbody><tr>
<td contenteditable="false"></td>
<td width="100%" style="background-color:#f5f5f5;border-radius:0px;box-sizing:border-box;mso-padding-alt:0px 0px 0px 0px" bgcolor="#f5f5f5"><div class="ck-inner-section ck-padding-left-none ck-padding-right-none" style="padding:0px 0px 0px 0px"><div style="margin-left:auto;margin-right:auto;max-width:640px"><p style="font-family:-apple-system, BlinkMacSystemFont, sans-serif;font-size:14px;color:#353535;font-weight:400;line-height:1.5;text-align:center" class=""><a href="https://b59b20d1.click.convertkit-mail4.com/r8ux6g909mhoh3nzlzls2hdolgz66h7hr709/l2hehmhlw4xn44hg/aHR0cHM6Ly9ja2FyY2hpdmUuY29tL2IvOTJ1emhuaDZucnZydnMzcm9vbXJkZnpvbHc2MzNpd2gzcXJt" target="_blank" class="ck-link" rel="noopener noreferrer" style="color:#5858ae" url-id="1816751307">View this email in your browser</a> (or share it with a friend!)</p></div></div></td>
<td contenteditable="false"></td>
</tr></tbody></table></center></div>
<div class="ck-section" style="margin:30px auto 7px auto"><center>
<table cellpadding="0" cellspacing="0" style="width:100%;margin:0 auto;max-width:640px"><tbody><tr>
<td contenteditable="false"></td>
<td width="640" style="border-radius:0px;box-sizing:border-box;mso-padding-alt:0px 4px 0px 4px"><div class="ck-inner-section ck-padding-left-mobile-friendly ck-padding-right-mobile-friendly" style="padding:0px 4px 0px 4px"><div style="margin-left:auto;margin-right:auto">
<p style="font-family:-apple-system, BlinkMacSystemFont, sans-serif;font-size:18px;color:#353535;font-weight:400;line-height:1.5" class="">Hello my front-end friend,</p>
<p style="font-family:-apple-system, BlinkMacSystemFont, sans-serif;font-size:18px;color:#353535;font-weight:400;line-height:1.5" class="">Before we dive into the content of this one, I want to let you know that <strong>this will be the last newsletter of the year</strong>, and I’ll be back in your inboxes sometime in mid-January.</p>
<p style="font-family:-apple-system, BlinkMacSystemFont, sans-serif;font-size:18px;color:#353535;font-weight:400;line-height:1.5" class="">I’ll still have YouTube videos coming out, so you can keep an eye out over there by making sure you’re subscribed (only like 4,000 away from 1 million!). I’ll also do a quick roundup of all the content I put out once the newsletter resumes.</p>
<p style="font-family:-apple-system, BlinkMacSystemFont, sans-serif;font-size:18px;color:#353535;font-weight:400;line-height:1.5" class="">With the family home for the next two weeks, it's the perfect time to wind down a bit, but I've been thinking about why that even feels like something worth mentioning.</p>
<p style="font-family:-apple-system, BlinkMacSystemFont, sans-serif;font-size:18px;color:#353535;font-weight:400;line-height:1.5" class="">This was the first year I actually took a real break from YouTube, with a short period with no videos, and more weeks without a newsletter than I've had in years as well.</p>
<p style="font-family:-apple-system, BlinkMacSystemFont, sans-serif;font-size:18px;color:#353535;font-weight:400;line-height:1.5" class="">It felt really strange, but as you can guess, the world kept on turning just fine (or well, it kept on turning, I’m not so sure how fine things are in the big picture, but you know what I mean 😅).</p>
<p style="font-family:-apple-system, BlinkMacSystemFont, sans-serif;font-size:18px;color:#353535;font-weight:400;line-height:1.5" class="">When we're in the thick of things, it's hard to realize how much we're pushing ourselves. The constant need to produce, or sometimes, the need not to fall behind simply becomes the “normal” state of things.</p>
<p style="font-family:-apple-system, BlinkMacSystemFont, sans-serif;font-size:18px;color:#353535;font-weight:400;line-height:1.5" class="">I know for me, a big part of it is always trying to keep the momentum up, which was why taking a break from YouTube and the newsletter this year was scary for me. I know myself, and how it can be hard to get started back up again.</p>
<p style="font-family:-apple-system, BlinkMacSystemFont, sans-serif;font-size:18px;color:#353535;font-weight:400;line-height:1.5" class="">Now, that’s not to say it’s easy. Sometimes we need to buckle down and simply get things done, whether it’s to finish a job on time or do extra work at night to help pay the bills, but often stepping back isn’t slacking, or giving up. Instead, it’s giving ourselves a chance to breathe for a second so we can come back at things with a bit more energy.</p>
<p style="font-family:-apple-system, BlinkMacSystemFont, sans-serif;font-size:18px;color:#353535;font-weight:400;line-height:1.5" class="">My break this year did more good for me than anything else, and I came back more motivated and excited about making content than I'd been in a while.</p>
<p style="font-family:-apple-system, BlinkMacSystemFont, sans-serif;font-size:18px;color:#353535;font-weight:400;line-height:1.5" class="">So yeah, a little bit of a wind down for me for the next little bit, and I hope you also have a chance to do the same 🙂.</p>
<table class="ck-layout-block" width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#f5f5f5" style="background-color:#f5f5f5;padding:18px 18px 18px 18px;margin:24px 0px 24px 0px;border-radius:6px 6px 6px 6px;overflow:hidden"><tbody><tr><td as="td" class="ck-column ck-column-1" width="100%" style="background-size:cover;background-position:center;border-radius:0px;box-sizing:border-box;vertical-align:top"><div style="padding:0px 0px 0px 0px">
<h2 style="font-family:-apple-system, BlinkMacSystemFont, sans-serif;font-size:24px;color:#353535;font-weight:600;line-height:1.5;margin-top:0;margin-bottom:0" class="">📺 Stop using the legacy color syntax</h2>
<!--[if mso]><table><tr><td width="800"><![endif]--><a href="https://b59b20d1.click.convertkit-mail4.com/r8ux6g909mhoh3nzlzls2hdolgz66h7hr709/7qh7h8h938n680t9/aHR0cHM6Ly95b3V0dS5iZS9VeW5iN0NpOEpNZw==" style="display:block;width:100%;max-width:480px;margin:0 auto 0 0;border:0;text-decoration:none" url-id="1816751311"><img alt="video preview" src="https://functions-js.kit.com/playbutton?play=%233197e0&accent=%23ffffff&thumbnailof=https%3A%2F%2Fyoutu.be%2FUynb7Ci8JMg&width=480&height=270&fit=contain" width="480" height="270" style="display:block;display:block;border-radius:4px;max-width:480px;width:100%;height:auto"></a><!--[if mso]></td></tr></table><![endif]--><p style="font-family:-apple-system, BlinkMacSystemFont, sans-serif;font-size:18px;color:#353535;font-weight:400;line-height:1.5;margin-top:8px;margin-bottom:8px" class="">After talking about this a while ago on Bluesky, it turns out a lot of people didn’t realize that the syntax for CSS colors has changed quite a bit. I wrote <a href="https://b59b20d1.click.convertkit-mail4.com/r8ux6g909mhoh3nzlzls2hdolgz66h7hr709/z2hghnhe07lk7eiz/aHR0cHM6Ly9waWNjYWxpbC5saS9ibG9nL2EtcHJhZ21hdGljLWd1aWRlLXRvLW1vZGVybi1jc3MtY29sb3Vycy1wYXJ0LW9uZS8=" target="_blank" class="ck-link" rel="noopener noreferrer" style="color:#0000ff" url-id="1816751313">a post on Piccalilli</a> that was super well-received, so I figured I’d take the start of that article and turn it into <a href="https://b59b20d1.click.convertkit-mail4.com/r8ux6g909mhoh3nzlzls2hdolgz66h7hr709/7qh7h8h938n680t9/aHR0cHM6Ly95b3V0dS5iZS9VeW5iN0NpOEpNZw==" target="_blank" class="ck-link" rel="noopener noreferrer" style="color:#0000ff" url-id="1816751311">a video</a> 😅.</p>
</div></td></tr></tbody></table>
<table class="ck-layout-block" width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#f6fbfc" style="background-color:#f6fbfc;padding:18px 18px 18px 18px;margin:24px 0px 24px 0px;border-radius:6px 6px 6px 6px;overflow:hidden"><tbody><tr><td as="td" class="ck-column ck-column-1" width="100%" style="background-size:cover;background-position:center;border-radius:0px;box-sizing:border-box;vertical-align:top"><div style="padding:0px 0px 0px 0px">
<h2 style="font-family:-apple-system, BlinkMacSystemFont, sans-serif;font-size:24px;color:#353535;font-weight:600;line-height:1.5;margin-top:0;margin-bottom:0" class="">⚡ 4 color variations from 1 variable super easily</h2>
<!--[if mso]><table><tr><td width="800"><![endif]--><a href="https://b59b20d1.click.convertkit-mail4.com/r8ux6g909mhoh3nzlzls2hdolgz66h7hr709/x0hph6hexzqpz3tg/aHR0cHM6Ly95b3V0dWJlLmNvbS9zaG9ydHMva2RwUEdKTE91MjQ_ZmVhdHVyZT1zaGFyZQ==" style="display:block;width:100%;max-width:480px;margin:0 auto 0 0;border:0;text-decoration:none" url-id="1816751315"><img alt="video preview" src="https://functions-js.kit.com/playbutton?play=%233197e0&accent=%23ffffff&thumbnailof=https%3A%2F%2Fyoutube.com%2Fshorts%2FkdpPGJLOu24%3Ffeature%3Dshare&width=480&height=270&fit=contain" width="480" height="270" style="display:block;display:block;border-radius:4px;max-width:480px;width:100%;height:auto"></a><!--[if mso]></td></tr></table><![endif]--><p style="font-family:-apple-system, BlinkMacSystemFont, sans-serif;font-size:18px;color:#353535;font-weight:400;line-height:1.5;margin-top:8px;margin-bottom:8px" class="">Speaking of new color stuff, <a href="https://b59b20d1.click.convertkit-mail4.com/r8ux6g909mhoh3nzlzls2hdolgz66h7hr709/x0hph6hexzqpz3tg/aHR0cHM6Ly95b3V0dWJlLmNvbS9zaG9ydHMva2RwUEdKTE91MjQ_ZmVhdHVyZT1zaGFyZQ==" target="_blank" class="ck-link" rel="noopener noreferrer" style="color:#0000ff" url-id="1816751315">this week’s short</a> dives into why relative colors is one of my favorite “new” CSS features.</p>
</div></td></tr></tbody></table>
<table class="ck-layout-block" width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#f9fff9" style="background-color:#f9fff9;padding:18px 18px 18px 18px;margin:24px 0px 24px 0px;border-radius:6px 6px 6px 6px;overflow:hidden"><tbody><tr><td as="td" class="ck-column ck-column-1" width="100%" style="background-size:cover;background-position:center;border-radius:0px;box-sizing:border-box;vertical-align:top"><div style="padding:0px 0px 0px 0px">
<h2 style="font-family:-apple-system, BlinkMacSystemFont, sans-serif;font-size:24px;color:#353535;font-weight:600;line-height:1.5;margin-top:0;margin-bottom:0" class="">🔗 Other awesome stuff from around the web</h2>
<ul class="unordered_list" style="font-family:-apple-system, BlinkMacSystemFont, sans-serif;font-size:18px;color:#353535;font-weight:400;line-height:1.5;text-align:left;margin-top:8px;margin-bottom:8px">
<li class="list_item"><span><a href="https://b59b20d1.click.convertkit-mail4.com/r8ux6g909mhoh3nzlzls2hdolgz66h7hr709/kkhmh6hn4ex5ezck/aHR0cHM6Ly9waWNjYWxpbC5saS9ibG9nL3dyYXBwaW5nLXVwLTIwMjUv" target="_blank" class="ck-link" rel="noopener noreferrer" style="color:#0000ff" url-id="1816751317">Picacalilli’s top 10 articles of the past year</a></span></li>
<li class="list_item"><span><a href="https://b59b20d1.click.convertkit-mail4.com/r8ux6g909mhoh3nzlzls2hdolgz66h7hr709/qvh8h7hdqvk4vpag/aHR0cHM6Ly92YWxlLnJvY2tzL3Bvc3RzL2FjY2Vzc2liaWxpdHktaW1wb3J0YW5jZQ==" target="_blank" class="ck-link" rel="noopener noreferrer" style="color:#0000ff" url-id="1816751320">You Can’t Opt-Out of Accessibility</a></span></li>
<li class="list_item"><span><a href="https://b59b20d1.click.convertkit-mail4.com/r8ux6g909mhoh3nzlzls2hdolgz66h7hr709/9qhzhnhdnx56xvhz/aHR0cHM6Ly9jc3MtdHJpY2tzLmNvbS9yZXNwb25zaXZlLWxpc3Qtb2YtYXZhdGFycy11c2luZy1tb2Rlcm4tY3NzLXBhcnQtMi8=" target="_blank" class="ck-link" rel="noopener noreferrer" style="color:#0000ff" url-id="1816751322">Responsive List of Avatars Using Modern CSS (Part 2)</a></span></li>
<li class="list_item"><span><a href="https://b59b20d1.click.convertkit-mail4.com/r8ux6g909mhoh3nzlzls2hdolgz66h7hr709/wnh2hghq840k4dsl/aHR0cHM6Ly9tZWRpZW5iYWVja2VyLmNvbS9hcnRpY2xlcy9kaWFsb2ctdmlldy10cmFuc2l0aW9ucw==" target="_blank" class="ck-link" rel="noopener noreferrer" style="color:#0000ff" url-id="1816751326">Dialog view transitions</a></span></li>
<li class="list_item"><span><a href="https://b59b20d1.click.convertkit-mail4.com/r8ux6g909mhoh3nzlzls2hdolgz66h7hr709/reh8hohmn76378f6/aHR0cHM6Ly9mcm9udGVuZG1hc3RlcnMuY29tL2Jsb2cvaG93LXRvLWNyZWF0ZS0zZC1pbWFnZXMtaW4tY3NzLXdpdGgtdGhlLWxheWVyZWQtcGF0dGVybi8=" target="_blank" class="ck-link" rel="noopener noreferrer" style="color:#0000ff" url-id="1816751327">How to Create 3D Images in CSS with the Layered Pattern</a></span></li>
</ul>
</div></td></tr></tbody></table>
<div>
<table cellpadding="0" cellspacing="0" style="width:100%;margin:0 auto"><tbody><tr><td><table class="ck-layout-block" width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#fffff5" style="background-color:#fffff5;padding:18px 18px 18px 18px;margin:24px 0px 24px 0px;border-radius:0px;overflow:hidden"><tbody><tr><td as="td" class="ck-column ck-column-1" width="100%" style="background-size:cover;background-position:center;border-radius:0px;box-sizing:border-box;vertical-align:top"><div style="padding:0px 0px 0px 0px">
<h2 style="font-family:-apple-system, BlinkMacSystemFont, sans-serif;font-size:24px;color:#353535;font-weight:600;line-height:1.5;margin-top:0;margin-bottom:0" class="">🎙️ Podcast</h2>
<h3 style="font-family:-apple-system, BlinkMacSystemFont, sans-serif;font-size:20px;color:#353535;font-weight:600;line-height:1.5;margin-top:0;margin-bottom:7px" class="">When a passion becomes a grind</h3>
<table style="border-collapse:collapse;padding:0;width:100%;font-family:-apple-system, BlinkMacSystemFont, sans-serif"><tbody><tr style="height:80px"><td align="left" style="height:80px"><a style="text-decoration:none;display:inline-block" href="https://b59b20d1.click.convertkit-mail4.com/r8ux6g909mhoh3nzlzls2hdolgz66h7hr709/vqh3hrho84wv3viw/aHR0cHM6Ly9vcGVuLnNwb3RpZnkuY29tL3Nob3cvMXNjQVNmclRFU2tOS1BmZlVKNENQVw==" url-id="1816751330"><div><table data-testid="show" style="border-collapse:collapse"><tbody><tr><td style="background:#282828;width:332px;height:80px;border-radius:10px;vertical-align:middle"><table cellpadding="0" cellspacing="0"><tr>
<td width="25%"><img src="https://i.scdn.co/image/ab6765630000ba8ad323530b8e3c32f040231319" alt="show" width="65" height="65" style="display:block;width:65px;height:65px;margin-left:6px;object-fit:cover;object-position:center;border-radius:10px"></td>
<td style="padding-left:10px;width:100%">
<div style="color:#fff;font-size:14px;font-weight:500;margin:0 0 4px">When a passion becomes a gri...</div>
<div style="color:#ccc;font-size:12px;margin:0 0 4px">Dec 19 · General Musings with Kev...</div>
<div style="color:#ccc;font-size:14px;margin:0 0 4px">11:22</div>
</td>
<td align="right" style="vertical-align:middle;padding-right:5px">
<div style="margin-right:5px"><div>
<!--[if !mso]>--><img width="18" height="18" style="display:block;width:18px;height:18px" alt="Spotify Logo" src="https://functions-js.convertkit.com/icons?icon=spotify&foreground=ffffff&background=000000&shape=icon-only&scale=1"><!--<![endif]-->
</div></div>
<div style="margin-right:2px;margin-top:10px">
<!--[if !mso]>--><div style="border-radius:50%;margin:0 auto;height:30px;width:30px;background-color:#ffffff;box-sizing:border-box;vertical-align:middle;text-align:center;padding-top:10px;padding-left:4px"><div style="border-color:transparent transparent transparent #282828;border-style:solid;border-width:6px 0 6px 10px;display:block;font-size:0;height:0;margin:0 auto;width:0;padding-bottom:0"> </div></div>
<!--<![endif]-->
</div>
</td>
</tr></table></td></tr></tbody></table></div></a></td></tr></tbody></table>
<p style="font-family:-apple-system, BlinkMacSystemFont, sans-serif;font-size:18px;color:#353535;font-weight:400;line-height:1.5;margin-top:8px;margin-bottom:8px" class="">This week I talk about the transition from enjoying coding for fun to facing the challenges and grind of doing it as a job. It's hard to find that balance between finding meaning in your job, and how you can loose your passion when it turns into a career.</p>
<p style="font-family:-apple-system, BlinkMacSystemFont, sans-serif;font-size:18px;color:#353535;font-weight:400;line-height:1.5;margin-top:8px;margin-bottom:8px" class=""><strong>LISTEN ON</strong>: <a href="https://b59b20d1.click.convertkit-mail4.com/r8ux6g909mhoh3nzlzls2hdolgz66h7hr709/m2h7h5h3w94q00ul/aHR0cHM6Ly9wb2RjYXN0cy5hcHBsZS5jb20vdXMvcG9kY2FzdC9nZW5lcmFsLW11c2luZ3Mtd2l0aC1rZXZpbi1wb3dlbGwvaWQxNzA1MjY3MTEy" target="_blank" class="ck-link" rel="noopener noreferrer" style="color:#0000ff" url-id="1816751332">APPLE</a> | <a href="https://b59b20d1.click.convertkit-mail4.com/r8ux6g909mhoh3nzlzls2hdolgz66h7hr709/vqh3hrho84wv3viw/aHR0cHM6Ly9vcGVuLnNwb3RpZnkuY29tL3Nob3cvMXNjQVNmclRFU2tOS1BmZlVKNENQVw==" target="_blank" class="ck-link" rel="noopener noreferrer" style="color:#0000ff" url-id="1816751330">SPOTIFY</a> | <a href="https://b59b20d1.click.convertkit-mail4.com/r8ux6g909mhoh3nzlzls2hdolgz66h7hr709/e0hph7h75erlwnc7/aHR0cHM6Ly93d3cueW91dHViZS5jb20vcG9zdC9VZ2t4MmJwclNLODl1bzVkeUlfcEQwWDNqbjBxajBQemZaNzk=" target="_blank" class="ck-link" rel="noopener noreferrer" style="color:#0000ff" url-id="1816751334">YOUTUBE</a> | <a href="https://b59b20d1.click.convertkit-mail4.com/r8ux6g909mhoh3nzlzls2hdolgz66h7hr709/owhkhqhw5nq6lrfq/aHR0cHM6Ly9hcGkucml2ZXJzaWRlLmZtL2hvc3RpbmcvdDBQVW93UlEucnNz" target="_blank" class="ck-link" rel="noopener noreferrer" style="color:#0000ff" url-id="1816751336">RSS</a></p>
</div></td></tr></tbody></table></td></tr></tbody></table></div>
<div>
<table cellpadding="0" cellspacing="0" style="width:100%;margin:0 auto"><tbody><tr><td><table class="ck-layout-block" width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#f5f5f5" style="background-color:#f5f5f5;padding:18px 18px 18px 18px;margin:0px 0px 0px 0px;border-radius:6px 6px 6px 6px;overflow:hidden"><tbody><tr><td as="td" class="ck-column ck-column-1" width="100%" style="background-size:cover;background-position:center;border-radius:0px;box-sizing:border-box;vertical-align:top"><div style="padding:0px 0px 0px 0px">
<h2 style="font-family:-apple-system, BlinkMacSystemFont, sans-serif;font-size:21px;color:#000000;font-weight:400;line-height:1.5;text-align:left;margin-top:0;margin-bottom:0" class=""><strong>📝 Quiz time!</strong></h2>
<p style="font-family:-apple-system, BlinkMacSystemFont, sans-serif;font-size:18px;color:#4d4d4d;font-weight:400;line-height:1.5;margin-top:8px;margin-bottom:8px" class="">A few weeks ago I had a tricky selector question that most people got wrong (only 14% got it correct!). This one's tricky too, but a bit different:<strong> Only one of these selectors is valid, which one is it?</strong></p>
<ol class="unordered_list" style="font-family:-apple-system, BlinkMacSystemFont, sans-serif;font-size:18px;color:#4d4d4d;font-weight:400;line-height:1.5;text-align:left;margin-top:8px;margin-bottom:8px">
<li class="list_item"><span>:is(> *)</span></li>
<li class="list_item"><span>:has(> *)</span></li>
<li class="list_item"><span>:not(> *)</span></li>
<li class="list_item"><span>:where(> *)</span></li>
</ol>
<p style="font-family:-apple-system, BlinkMacSystemFont, sans-serif;font-size:18px;color:#4d4d4d;font-weight:400;line-height:1.5;margin-top:8px;margin-bottom:8px" class="">As per usual, you'll have to <a href="https://b59b20d1.click.convertkit-mail4.com/r8ux6g909mhoh3nzlzls2hdolgz66h7hr709/e0hph7h75erlwnc7/aHR0cHM6Ly93d3cueW91dHViZS5jb20vcG9zdC9VZ2t4MmJwclNLODl1bzVkeUlfcEQwWDNqbjBxajBQemZaNzk=" target="_blank" class="ck-link" rel="noopener noreferrer" style="color:#0000ff" url-id="1816751334">head on over to YouTube to take a stab at the quiz</a>, and once you answer, you'll see if you were right or not.</p>
</div></td></tr></tbody></table></td></tr></tbody></table></div>
<h2 style="font-family:-apple-system, BlinkMacSystemFont, sans-serif;font-size:24px;color:#353535;font-weight:600;line-height:1.5" class="">🏁 </newsletter> </h2>
<p style="font-family:-apple-system, BlinkMacSystemFont, sans-serif;font-size:18px;color:#353535;font-weight:400;line-height:1.5" class="">Enjoy the break, happy holidays, and see you in 2026! </p>
<p style="font-family:-apple-system, BlinkMacSystemFont, sans-serif;font-size:18px;color:#353535;font-weight:400;line-height:1.5" class="">Kevin</p>
<hr style="margin-top:24px;margin-bottom:24px">
<div>
<table cellpadding="0" cellspacing="0" style="width:100%;margin:0 auto"><tbody><tr><td>
<p style="font-family:-apple-system, BlinkMacSystemFont, sans-serif;font-size:16px;color:#353535;font-weight:400;line-height:1.5" class=""><strong>Are you looking to step up your CSS?</strong> I've got both free and premium courses to help with that! They cover a range of skill levels too 👇</p>
<table class="ck-layout-block ck-layout-stack" width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="transparent" style="padding:0px 0px 0px 0px;margin:24px 0px 24px 0px;border-radius:0px;overflow:hidden"><tbody><tr>
<td as="td" class="ck-column ck-column-stack ck-column-1" width="33%" style="background-color:#F6F8FA;background-size:cover;background-position:center;border-radius:12px 12px 12px 12px;box-sizing:border-box;vertical-align:top"><div style="padding:16px 16px 16px 16px">
<p style="font-family:Arial, -apple-system, BlinkMacSystemFont, sans-serif;font-size:12px;color:#060606;font-weight:400;line-height:1.5;margin-top:8px;margin-bottom:8px" class="">Beginner friendly (and free)</p>
<h3 style="font-family:Arial, -apple-system, BlinkMacSystemFont, sans-serif;font-size:18px;color:#060606;font-weight:700;line-height:1.5;margin-top:0;margin-bottom:0" class="">HTML & CSS for Absolute Beginners</h3>
<p style="font-family:Arial, -apple-system, BlinkMacSystemFont, sans-serif;font-size:12px;color:#060606;font-weight:400;line-height:1.5;margin-top:8px;margin-bottom:8px" class="">A free course that starts with the absolute basics, and gets to creating some layouts with Flexbox and Grid.</p>
<p style="font-family:Arial, -apple-system, BlinkMacSystemFont, sans-serif;font-size:12px;color:#060606;font-weight:400;line-height:1.5;text-align:left;margin-top:8px;margin-bottom:8px" class=""><a href="https://b59b20d1.click.convertkit-mail4.com/r8ux6g909mhoh3nzlzls2hdolgz66h7hr709/p8heh9h48dq25gur/aHR0cHM6Ly9sZWFybi5rZXZpbnBvd2VsbC5jbw==" target="_blank" class="ck-link" rel="noopener noreferrer" style="color:#0000ff" url-id="1816751338">Enroll →</a></p>
</div></td>
<td style="padding-left:20px"></td>
<td as="td" class="ck-column ck-column-stack ck-column-2" width="33%" style="background-color:#F6F8FA;background-size:cover;background-position:center;border-radius:12px 12px 12px 12px;box-sizing:border-box;vertical-align:top"><div style="padding:18px 18px 18px 18px">
<p style="font-family:Arial, -apple-system, BlinkMacSystemFont, sans-serif;font-size:12px;color:#060606;font-weight:400;line-height:1.5;margin-top:8px;margin-bottom:8px" class="">Intermediate</p>
<h3 style="font-family:Arial, -apple-system, BlinkMacSystemFont, sans-serif;font-size:18px;color:#060606;font-weight:700;line-height:1.5;margin-top:0;margin-bottom:0" class="">CSS Demystified</h3>
<p style="font-family:Arial, -apple-system, BlinkMacSystemFont, sans-serif;font-size:12px;color:#060606;font-weight:400;line-height:1.5;margin-top:8px;margin-bottom:8px" class="">For those who've been writing CSS for a little bit now, but want to step up their game and start writing CSS with confidence!</p>
<p style="font-family:Arial, -apple-system, BlinkMacSystemFont, sans-serif;font-size:12px;color:#060606;font-weight:400;line-height:1.5;text-align:left;margin-top:8px;margin-bottom:8px" class=""><a href="https://b59b20d1.click.convertkit-mail4.com/r8ux6g909mhoh3nzlzls2hdolgz66h7hr709/6qheh8hl0w9560f9/aHR0cHM6Ly9jc3NkZW15c3RpZmllZC5jb20v" target="_blank" class="ck-link" rel="noopener noreferrer" style="color:#0000ff" url-id="1816751340">Enroll →</a></p>
</div></td>
<td style="padding-left:20px"></td>
<td as="td" class="ck-column ck-column-3" width="33%" style="background-color:#F6F8FA;background-size:cover;background-position:center;border-radius:12px 12px 12px 12px;box-sizing:border-box;vertical-align:top"><div style="padding:18px 18px 18px 18px">
<p style="font-family:Arial, -apple-system, BlinkMacSystemFont, sans-serif;font-size:12px;color:#060606;font-weight:400;line-height:1.5;margin-top:8px;margin-bottom:8px" class="">Intermediate (Frontend Masters)</p>
<h3 style="font-family:Arial, -apple-system, BlinkMacSystemFont, sans-serif;font-size:18px;color:#060606;font-weight:700;line-height:1.5;margin-top:0;margin-bottom:0" class="">Build a Modern Site from Scratch</h3>
<p style="font-family:Arial, -apple-system, BlinkMacSystemFont, sans-serif;font-size:12px;color:#060606;font-weight:400;line-height:1.5;margin-top:8px;margin-bottom:8px" class="">Build a fully responsive site using modern CSS features, along with some polished animations.</p>
<p style="font-family:Arial, -apple-system, BlinkMacSystemFont, sans-serif;font-size:12px;color:#060606;font-weight:400;line-height:1.5;text-align:left;margin-top:8px;margin-bottom:8px" class=""><a href="https://b59b20d1.click.convertkit-mail4.com/r8ux6g909mhoh3nzlzls2hdolgz66h7hr709/58hvh7hgl06noqu7/aHR0cHM6Ly9mcm9udGVuZG1hc3RlcnMuY29tL2NvdXJzZXMvcHJvLWNzcy8_Y29kZT1QT1dFTEwmdXRtX2NhbXBhaWduPXBvd2VsbCZ1dG1fbWVkaXVtPXNvY2lhbCZ1dG1fc291cmNlPXRlYWNoZXItZGlzY291bnQ=" target="_blank" class="ck-link" rel="noopener noreferrer" style="color:#0000ff" url-id="1816751342">Enroll →</a> (25% off first month of Frontend Masters if you use this affiliate link)</p>
</div></td>
</tr></tbody></table>
</td></tr></tbody></table></div>
</div></div></td>
<td contenteditable="false"></td>
</tr></tbody></table>
<div><!--[if mso]><br /><br /><![endif]--></div>
</center></div>
<div class="ck-section" style="margin:0px auto 24px auto"><center>
<table cellpadding="0" cellspacing="0" style="width:100%;margin:0 auto;max-width:640px"><tbody><tr>
<td contenteditable="false"></td>
<td width="640" style="background-color:#f7f7f7;border-radius:0px;box-sizing:border-box;mso-padding-alt:18px 18px 18px 18px" bgcolor="#f7f7f7"><div class="ck-inner-section ck-padding-left-mobile-friendly ck-padding-right-mobile-friendly" style="padding:18px 18px 18px 18px"><div style="margin-left:auto;margin-right:auto;max-width:640px"><p style="font-family:-apple-system, BlinkMacSystemFont, sans-serif;font-size:15px;color:#747474;font-weight:400;line-height:1.5" class="">If you no longer want to get any emails from me, you can <a href="https://b59b20d1.unsubscribe.convertkit-mail4.com/r8ux6g909mhoh3nzlzls2hdolgz66h7hr709" target="_blank" class="ck-link" rel="noopener noreferrer" style="color:#006df2">unsubscribe</a> or you can edit your <a href="https://preferences.convertkit-mail4.com/r8ux6g909mhoh3nzlzls2hdolgz66h7hr709" target="_blank" class="ck-link" rel="noopener noreferrer" style="color:#006df2">preferences</a> if you'd like pick which emails you get from me.<br>600 1st Ave, Ste 330 PMB 92768, Seattle, WA 98104-2246</p></div></div></td>
<td contenteditable="false"></td>
</tr></tbody></table>
<div><!--[if mso]><br /><br /><![endif]--></div>
</center></div>
<div class="ck-section" style="margin:0px auto 0px auto"><center><table cellpadding="0" cellspacing="0" style="width:100%;margin:0 auto;max-width:640px"><tbody><tr>
<td contenteditable="false"></td>
<td width="640" style="border-radius:0px;box-sizing:border-box;mso-padding-alt:0px 0px 0px 0px" bgcolor=""><div class="ck-inner-section ck-padding-left-none ck-padding-right-none" style="padding:0px 0px 0px 0px"><div style="margin-left:auto;margin-right:auto;max-width:640px"><div></div></div></div></td>
<td contenteditable="false"></td>
</tr></tbody></table></center></div>
</td></tr></tbody></table></div></td>
<td></td>
</tr></tbody></table></div>
<!-- -->
<img src="https://b59b20d1.open.convertkit-mail4.com/r8ux6g909mhoh3nzlzls2hdolgz66h7hr709" alt="" style="display:block">
</body>
</html>