<!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>@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 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-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 id="preview-text">
<span style="display: none; max-height: 0; overflow: hidden;">
Separation of concerns, a website showdown, and better transitions and animations.
</span>
<span style="display: none; max-height: 0; overflow: hidden;">
͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏
</span>
</div>
<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/o8ung5wvw2hqh6peww3hvhqwm3e6eaoh528x/3ohphkh30058xwip/aHR0cHM6Ly9ja2FyY2hpdmUuY29tL2Ivdjh1M2hyaHZsNm9vMnVscTIyOXE1c3YwZW5rNzBmOWh4ZzV6" target="_blank" class="ck-link" rel="noopener noreferrer" style="color:#5858ae" url-id="1836310223">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="">This week, I’m formatting things a little differently because the comments on a YouTube video I posted got me a little riled up 😅.</p>
<p style="font-family:-apple-system, BlinkMacSystemFont, sans-serif;font-size:18px;color:#353535;font-weight:400;line-height:1.5" class="">So, starting with that video, I took a look at <a href="https://b59b20d1.click.convertkit-mail4.com/o8ung5wvw2hqh6peww3hvhqwm3e6eaoh528x/48hvhehmvvd3v5uq/aHR0cHM6Ly9jb2RlcGVuLmlvL3RfYWZpZi9wZW4vWVBXTW1PUA==" target="_blank" class="ck-link" rel="noopener noreferrer" style="color:#0000ff" url-id="1836310225">Temani Afif’s mind-blowing CSS-only graph theory CodePen</a>.</p>
<!--[if mso]><table><tr><td width="800"><![endif]--><a href="https://b59b20d1.click.convertkit-mail4.com/o8ung5wvw2hqh6peww3hvhqwm3e6eaoh528x/reh8hohm44lp47f6/aHR0cHM6Ly93d3cueW91dHViZS5jb20vd2F0Y2g_dj1ZLTN0UERaQ2sybw==" style="display:block;width:100%;max-width:480px;margin:0 auto 0 0;border:0;text-decoration:none" url-id="1836310227"><img alt="video preview" src="https://functions-js.kit.com/playbutton?play=%233197e0&accent=%23ffffff&thumbnailof=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DY-3tPDZCk2o&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" class="">And while most people were pretty blown away by this as well, there were a fair number of comments about how this is breaking the separation of concerns and how CSS shouldn’t be able to do things like this.</p>
<p style="font-family:-apple-system, BlinkMacSystemFont, sans-serif;font-size:18px;color:#353535;font-weight:400;line-height:1.5" class="">To me, this is more about “this is doing what I’ve traditionally had to use JS for,” rather than “this is what JS should be used for,” and I went off on this idea over on the second channel.</p>
<!--[if mso]><table><tr><td width="800"><![endif]--><a href="https://b59b20d1.click.convertkit-mail4.com/o8ung5wvw2hqh6peww3hvhqwm3e6eaoh528x/vqh3hrholl96lkhw/aHR0cHM6Ly93d3cueW91dHViZS5jb20vd2F0Y2g_dj1HVENKMDgyaGotdw==" style="display:block;width:100%;max-width:480px;margin:0 auto 0 0;border:0;text-decoration:none" url-id="1836310230"><img alt="video preview" src="https://functions-js.kit.com/playbutton?play=%233197e0&accent=%23ffffff&thumbnailof=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DGTCJ082hj-w&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]--><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="">🙋♂️ What I've been up to this week</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:0" class="">📺 F1 Website Championship</h3>
<!--[if mso]><table><tr><td width="800"><![endif]--><a href="https://b59b20d1.click.convertkit-mail4.com/o8ung5wvw2hqh6peww3hvhqwm3e6eaoh528x/m2h7h5h3vv6xv8il/aHR0cHM6Ly93d3cueW91dHViZS5jb20vd2F0Y2g_dj1QQkRVMmtydHkwTQ==" style="display:block;width:100%;max-width:480px;margin:0 auto 0 0;border:0;text-decoration:none" url-id="1836310232"><img alt="video preview" src="https://functions-js.kit.com/playbutton?play=%233197e0&accent=%23ffffff&thumbnailof=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DPBDU2krty0M&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="">As a life-long F1 fan, and the 2026 season starting next week, I decided to do an F1 website championship, where I pitted the teams against one another with rounds for design, performance, accessibility, and CSS.</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="">The design rankings were my own opinions, but I used Lighthouse for the performance and accessibility scores, and <a href="https://b59b20d1.click.convertkit-mail4.com/o8ung5wvw2hqh6peww3hvhqwm3e6eaoh528x/e0hph7h7663z6qa7/aHR0cHM6Ly93d3cucHJvamVjdHdhbGxhY2UuY29tLw==" target="_blank" class="ck-link" rel="noopener noreferrer" style="color:#0000ff" url-id="1836310234">Project Wallace</a> for the CSS score.</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="">Each round is scored using the F1 point system, and while not particularly educational, I had fun putting it together 😅.</p>
<hr style="margin-top:24px;margin-bottom:24px">
<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:0" class="">⚡Instantly improve your transitions and animations with linear()</h3>
<!--[if mso]><table><tr><td width="800"><![endif]--><a href="https://b59b20d1.click.convertkit-mail4.com/o8ung5wvw2hqh6peww3hvhqwm3e6eaoh528x/owhkhqhwppmep5fq/aHR0cHM6Ly95b3V0dWJlLmNvbS9zaG9ydHMvbUhnUFNNa1VIdFE_ZmVhdHVyZT1zaGFyZQ==" style="display:block;width:100%;max-width:480px;margin:0 auto 0 0;border:0;text-decoration:none" url-id="1836310236"><img alt="video preview" src="https://functions-js.kit.com/playbutton?play=%233197e0&accent=%23ffffff&thumbnailof=https%3A%2F%2Fyoutube.com%2Fshorts%2FmHgPSMkUHtQ%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="">A quick look at how we can instantly create better animations and transitions by using <code style="font-size:16px;background:#f1edf1;border-radius:4px;padding:0px 2px">linear()</code> timing functions (with the help of <a href="https://b59b20d1.click.convertkit-mail4.com/o8ung5wvw2hqh6peww3hvhqwm3e6eaoh528x/p8heh9h4mmwemmfr/aHR0cHM6Ly9lYXNpbmd3aXphcmQuY29tLw==" target="_blank" class="ck-link" rel="noopener noreferrer" style="color:#0000ff" url-id="1836310238">Easing Wizard</a>).</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>
<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="">So in the video at the top people complained about CSS being too much of a programming language with it able to do some graph theory… don’t let them know <a href="https://b59b20d1.click.convertkit-mail4.com/o8ung5wvw2hqh6peww3hvhqwm3e6eaoh528x/6qheh8hlzz84zeu9/aHR0cHM6Ly9ic2t5LmFwcC9wcm9maWxlL3JlYmFuZTIwMDEuYnNreS5zb2NpYWw=" target="_blank" class="ck-link" rel="noopener noreferrer" style="color:#0000ff" url-id="1836310240">Rebane</a> made <a href="https://b59b20d1.click.convertkit-mail4.com/o8ung5wvw2hqh6peww3hvhqwm3e6eaoh528x/58hvh7hgqqdwqdi7/aHR0cHM6Ly9seXJhLmhvcnNlL3g4NmNzcy8=" target="_blank" class="ck-link" rel="noopener noreferrer" style="color:#0000ff" url-id="1836310242">an entire x86 emulator using only CSS</a> 😆.</p>
<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>You can fill out your bracket for the upcoming <a href="https://b59b20d1.click.convertkit-mail4.com/o8ung5wvw2hqh6peww3hvhqwm3e6eaoh528x/qvh8h7hdzzm3zkug/aHR0cHM6Ly9tYWRjc3MuY29tLw==" target="_blank" class="ck-link" rel="noopener noreferrer" style="color:#0000ff" url-id="1836310244">March MadCSS tournament</a> (of which I am one of the contestants).</span></li>
<li class="list_item"><span><a href="https://b59b20d1.click.convertkit-mail4.com/o8ung5wvw2hqh6peww3hvhqwm3e6eaoh528x/9qhzhnhd00v808fz/aHR0cHM6Ly9ic2t5LmFwcC9wcm9maWxlL2lzaGFkZWVkLmNvbQ==" target="_blank" class="ck-link" rel="noopener noreferrer" style="color:#0000ff" url-id="1836310246">Ahmad Shadeed</a>’s <a href="https://b59b20d1.click.convertkit-mail4.com/o8ung5wvw2hqh6peww3hvhqwm3e6eaoh528x/n2hohvhvmm94qwu0/aHR0cHM6Ly93d3cueW91dHViZS5jb20vd2F0Y2g_dj1fbmpVeGc1VWZSMA==" target="_blank" class="ck-link" rel="noopener noreferrer" style="color:#0000ff" url-id="1836310248">CSS Day talk from last year, Smart Layouts</a>, is now on YouTube!</span></li>
<li class="list_item"><span><a href="https://b59b20d1.click.convertkit-mail4.com/o8ung5wvw2hqh6peww3hvhqwm3e6eaoh528x/wnh2hghqnn2d7khl/aHR0cHM6Ly9jb21pY3NzLmFydC9nYW1lcy8xMC8=" target="_blank" class="ck-link" rel="noopener noreferrer" style="color:#0000ff" url-id="1836310250">A new CSS game landed on comicss</a>, where you need to figure out the named colors, with a few hints to help.</span></li>
<li class="list_item"><span><a href="https://b59b20d1.click.convertkit-mail4.com/o8ung5wvw2hqh6peww3hvhqwm3e6eaoh528x/08hwh9h2vv64ewtp/aHR0cHM6Ly9oYWNrcy5tb3ppbGxhLm9yZy8yMDI2LzAyL2dvb2RieWUtaW5uZXJodG1sLWhlbGxvLXNldGh0bWwtc3Ryb25nZXIteHNzLXByb3RlY3Rpb24taW4tZmlyZWZveC0xNDgv" target="_blank" class="ck-link" rel="noopener noreferrer" style="color:#0000ff" url-id="1836310252">Firefox has added <code style="font-size:16px;background:#f1edf1;border-radius:4px;padding:0px 2px">setHTML</code></a>, which is essentially a safe version of <code style="font-size:16px;background:#f1edf1;border-radius:4px;padding:0px 2px">innerHTML</code>. Nice to see Firefox being the first to ship cool features again.</span></li>
<li class="list_item"><span><a href="https://b59b20d1.click.convertkit-mail4.com/o8ung5wvw2hqh6peww3hvhqwm3e6eaoh528x/vqh3hrholl960ksw/aHR0cHM6Ly9ic2t5LmFwcC9wcm9maWxlL2NocmlzY295aWVyLm5ldA==" target="_blank" class="ck-link" rel="noopener noreferrer" style="color:#0000ff" url-id="1836310254">Chris Coyier</a> with <a href="https://b59b20d1.click.convertkit-mail4.com/o8ung5wvw2hqh6peww3hvhqwm3e6eaoh528x/m2h7h5h3vv6x58bl/aHR0cHM6Ly9ic2t5LmFwcC9wcm9maWxlL2NvZGVwZW4uaW8vcG9zdC8zbWZrajNmd3U2NjI0" target="_blank" class="ck-link" rel="noopener noreferrer" style="color:#0000ff" url-id="1836310256">a super quick demo on <code style="font-size:16px;background:#f1edf1;border-radius:4px;padding:0px 2px">sibling-index()</code></a> .</span></li>
<li class="list_item"><span><a href="https://b59b20d1.click.convertkit-mail4.com/o8ung5wvw2hqh6peww3hvhqwm3e6eaoh528x/7qh7h8h9qq2elzc9/aHR0cHM6Ly9ic2t5LmFwcC9wcm9maWxlL2Nzc3dlZWtseS5jb20=" target="_blank" class="ck-link" rel="noopener noreferrer" style="color:#0000ff" url-id="1836310259">Zoran Jambor</a> explores <a href="https://b59b20d1.click.convertkit-mail4.com/o8ung5wvw2hqh6peww3hvhqwm3e6eaoh528x/z2hghnhenn2z65hz/aHR0cHM6Ly93d3cueW91dHViZS5jb20vd2F0Y2g_dj1yVU9TLXphVnJBRQ==" target="_blank" class="ck-link" rel="noopener noreferrer" style="color:#0000ff" url-id="1836310261">the <code style="font-size:16px;background:#f1edf1;border-radius:4px;padding:0px 2px">text-index</code> keywords</a> including a few that I had no idea about.</span></li>
</ul>
</div></td></tr></tbody></table>
<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="">Have a fantastic week! <br>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/o8ung5wvw2hqh6peww3hvhqwm3e6eaoh528x/x0hph6heoovm22ig/aHR0cHM6Ly9sZWFybi5rZXZpbnBvd2VsbC5jbw==" target="_blank" class="ck-link" rel="noopener noreferrer" style="color:#0000ff" url-id="1836310263">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/o8ung5wvw2hqh6peww3hvhqwm3e6eaoh528x/e0hph7h7663zvgi7/aHR0cHM6Ly9jc3NkZW15c3RpZmllZC5jb20v" target="_blank" class="ck-link" rel="noopener noreferrer" style="color:#0000ff" url-id="1836310265">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/o8ung5wvw2hqh6peww3hvhqwm3e6eaoh528x/owhkhqhwppme92aq/aHR0cHM6Ly9mcm9udGVuZG1hc3RlcnMuY29tL2NvdXJzZXMvcHJvLWNzcy8_Y29kZT1QT1dFTEwmdXRtX2NhbXBhaWduPXBvd2VsbCZ1dG1fbWVkaXVtPXNvY2lhbCZ1dG1fc291cmNlPXRlYWNoZXItZGlzY291bnQ=" target="_blank" class="ck-link" rel="noopener noreferrer" style="color:#0000ff" url-id="1836310267">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/o8ung5wvw2hqh6peww3hvhqwm3e6eaoh528x" 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/o8ung5wvw2hqh6peww3hvhqwm3e6eaoh528x" 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/o8ung5wvw2hqh6peww3hvhqwm3e6eaoh528x" alt="" style="display:block">
</body>
</html>