<!DOCTYPE html><html lang="en"> <head><script>
  const theme = localStorage.getItem("theme")

  if (theme === "system") {
    const systemTheme = window.matchMedia(
      "(prefers-color-scheme: dark)"
    ).matches
      ? "dark"
      : "light"

    document.querySelector("html").className = systemTheme
  } else {
    document.querySelector("html").className = theme
  }
</script> <link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;700&display=swap" rel="stylesheet"><!-- Global Metadata --><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" type="image/png" href="/assets/favicon-32x32.png"><meta name="keywords" content="CSS, tutorials, blog, Ahmad, Shadeed"><meta name="author" content="Ahmad Shadeed"><link rel="canonical" href="https://ishadeed.com/"><meta name="theme-color" content="#3a64d9"><!-- Primary Meta Tags --><title>Home - Ahmad Shadeed</title><meta name="title" content="Home - Ahmad Shadeed"><meta name="description" content="Deep-dive CSS articles, modern CSS and visual CSS explanations."><!-- Open Graph --><meta property="og:type" content="website"><meta property="og:url" content="https://ishadeed.com/"><meta property="og:title" content="Home - Ahmad Shadeed"><meta property="og:description" content="Deep-dive CSS articles, modern CSS and visual CSS explanations."><meta property="og:image" content="https://ishadeed.com/assets/social/card-generic.jpg"><!-- Twitter --><meta property="twitter:card" content="summary_large_image"><meta property="twitter:url" content="https://ishadeed.com/"><meta property="twitter:title" content="Home - Ahmad Shadeed"><meta property="twitter:description" content="Deep-dive CSS articles, modern CSS and visual CSS explanations."><meta property="twitter:image" content="https://ishadeed.com/assets/social/card-generic.jpg"><link rel="alternate" type="application/rss+xml" title="Ahmad Shadeed Blog" href="https://ishadeed.com/feed.xml"><link rel="sitemap" href="/sitemap-index.xml"><script async src="https://www.googletagmanager.com/gtag/js?id=G-44K8CFHF77"></script><script global>
  window.dataLayer = window.dataLayer || []
  function gtag() {
    dataLayer.push(arguments)
  }
  gtag("js", new Date())

  gtag("config", "G-44K8CFHF77")
</script><link rel="stylesheet" href="/prism-night-owl.css"><link rel="stylesheet" href="/_astro/base.CA_366JN.css">
<style>.articles-list{display:grid;gap:1rem}@media(min-width:550px){.articles-list{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}}.articles-list.full{grid-template-columns:1fr}.wrapper{max-width:1120px;margin-inline:auto;padding-inline:1rem}.c-section__header{display:flex;justify-content:space-between}.c-section__header p{margin-top:1rem}.dark .c-section__header p{color:var(--text-secondary)}.c-section--intro__title{font-weight:700;font-size:2rem}.c-section__title{display:flex;align-items:center;gap:1rem;color:var(--section-title-color);font-weight:700;margin-bottom:1rem}.u-flow>*+*{margin-top:var(--space, .5rem)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.u-limit{max-width:70ch}.dark .baseline-status::part(root){color:#fff!important;border-color:var(--nav-border-color)!important}
.theme-toggle[data-astro-cid-oemx5le4]{--size: 1.5rem;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;display:flex;padding:4px 8px;border-radius:8px;background-color:#efefef;transition:background-color .3s ease-out;cursor:pointer}.theme-toggle[data-astro-cid-oemx5le4] svg[data-astro-cid-oemx5le4]{width:var(--size);height:var(--size)}.theme-toggle[data-astro-cid-oemx5le4] path[data-astro-cid-oemx5le4]{fill:var(--theme-switch-item-color);transition:fill .3s ease-out}.theme-toggle[data-astro-cid-oemx5le4][data-current-theme=light] svg[data-astro-cid-oemx5le4].light-theme{display:none}.theme-toggle[data-astro-cid-oemx5le4][data-current-theme=dark] svg[data-astro-cid-oemx5le4].dark-theme{display:none}.theme-toggle[data-astro-cid-oemx5le4][data-current-theme=dark]{background-color:var(--theme-switch-active-item-bg)}.theme-toggle[data-astro-cid-oemx5le4][data-current-theme=dark] path[data-astro-cid-oemx5le4]{fill:var(--theme-switch-active-icon-fill)}
</style>
<link rel="stylesheet" href="/_astro/Footer_astro_astro_type_style_index_0_lang.DKWbsokQ.css">
<style>@charset "UTF-8";.l2-title{font-size:clamp(1.5rem,1.25rem + 1.25vw,2.375rem);font-weight:700;color:var(--color-brand-primary);line-height:1.2}.dark .l2-title.flip{color:var(--color-brand-primary-2)}.l3-title{font-size:24px;font-weight:700;color:var(--color-brand-primary);line-height:1.2}.dark .l3-title.flip{color:var(--color-brand-primary-2)}.mb-1{margin-bottom:1rem}.mb-2{margin-bottom:2rem}.content p{color:#474854;font-family:Hanken Grotesk;font-size:1.05rem;font-weight:400;line-height:1.25}.content p a{color:#222;font-weight:700;text-decoration:underline}.dark .content p{color:#ccd7fa}.dark .content p a{color:var(--color-brand-primary-2)}.content>*+*{margin-top:1rem}.content strong{color:#1f1798}.dark .content strong{color:#fff}.content>ul{padding-inline-start:1rem;line-height:1.35}.content li{list-style-type:"—";color:#474854;padding-inline-start:1.5ch;font-size:1.05rem}.dark .content li{color:#fff}.content li a{color:#222;text-decoration:underline}.dark .content li{color:#ccd7fa}.dark .content li a{color:var(--color-brand-primary-2)}.content li::marker{color:#adb5bd}.dark .content li::marker{color:#fff}.u-flow>*+*{margin-top:var(--space, 1rem)}
.banner[data-astro-cid-iieg7hvt]{position:sticky;top:0;z-index:200;text-align:center;color:#fff;background-color:hsl(from var(--color-brand-primary) calc(h + 110) s l);padding:.75rem 1rem;box-shadow:inset 0 -2px 10px #00000026;border-bottom:1px solid transparent}.banner[data-astro-cid-iieg7hvt] .wrapper[data-astro-cid-iieg7hvt]{display:flex;align-items:center;gap:1rem}.banner[data-astro-cid-iieg7hvt] p[data-astro-cid-iieg7hvt]{flex:1;line-height:1.5;font-size:clamp(.875rem,.83rem + .23vw,1rem)}.banner[data-astro-cid-iieg7hvt] a[data-astro-cid-iieg7hvt]{font-weight:700;color:#fff;text-decoration:underline;text-decoration-color:var(--color-brand-white)}
</style>
<link rel="stylesheet" href="/_astro/Header_astro_astro_type_style_index_0_lang.BQ6bFKLy.css">
<style>.c-article[data-astro-cid-x7mc7pml]{display:flex;flex-direction:column;gap:.5rem;border-top:1px solid var(--article-border-color);padding-block:12px}.c-article[data-astro-cid-x7mc7pml]:has(img){flex-direction:row;border-top:0;padding-block:0}.c-article[data-astro-cid-x7mc7pml]:has(img) a[data-astro-cid-x7mc7pml]{padding-block:0;display:flex;gap:1rem}.c-article[data-astro-cid-x7mc7pml]:has(img) img[data-astro-cid-x7mc7pml]{display:block;width:150px;max-width:100%;aspect-ratio:698/349;border:1px solid var(--article-img-border-color);border-radius:15px;margin-bottom:.5rem}.c-article[data-astro-cid-x7mc7pml]:has(img) h3[data-astro-cid-x7mc7pml]{flex:1}.c-article[data-astro-cid-x7mc7pml]:has(img) time[data-astro-cid-x7mc7pml]{display:none}.c-article[data-astro-cid-x7mc7pml]:has(img) .interactive-tag[data-astro-cid-x7mc7pml]{display:none}@container articles (max-width: 400px){.c-article[data-astro-cid-x7mc7pml]:has(img) a[data-astro-cid-x7mc7pml]{flex-direction:column;gap:0}.c-article[data-astro-cid-x7mc7pml]:has(img) img[data-astro-cid-x7mc7pml]{width:100%;min-width:0}}@container articles (min-width: 500px){.c-article[data-astro-cid-x7mc7pml]{flex-direction:row;align-items:center;gap:1rem;padding-block:0}.c-article[data-astro-cid-x7mc7pml] time[data-astro-cid-x7mc7pml]{flex:0 0 100px;text-align:end}.c-article[data-astro-cid-x7mc7pml] a[data-astro-cid-x7mc7pml]{flex:1;padding-block:1.5rem}}.c-article__title[data-astro-cid-x7mc7pml]{font-size:clamp(14px,14px + 3cqw,20px);text-wrap:pretty;color:var(--article-title-text-color);font-weight:500}.c-article__time[data-astro-cid-x7mc7pml]{font-size:14px;color:var(--article-time-text-color);order:-1}.article-container[data-astro-cid-x7mc7pml]{container-type:inline-size;container-name:articles}
.ButtonLink[data-astro-cid-ggqyuvps]{display:inline-flex;justify-content:center;min-width:120px;padding:.75rem 1rem;gap:.5rem;border:1px solid var(--button-secondary-border-color);background-color:var(--button-secondary-bg-color);color:var(--button-secondary-text-color);border-radius:8px;font-size:1rem;text-align:center;transition:.3s linear}.ButtonLink[data-astro-cid-ggqyuvps]:hover{background-color:var(--color-bg-1);border-color:var(--color-bg-1)}.dark .ButtonLink[data-astro-cid-ggqyuvps]:hover{color:#222}.ButtonLink[data-astro-cid-ggqyuvps].primary{background-color:var(--button-primary-bg-color);border-color:var(--button-primary-border-color);color:var(--button-primary-text-color)}.ButtonLink[data-astro-cid-ggqyuvps].primary:hover{background-color:var(--color-brand-secondary);border-color:var(--color-brand-secondary)}.dark .ButtonLink[data-astro-cid-ggqyuvps].primary:hover{color:#fff}.ButtonLink[data-astro-cid-ggqyuvps].large{padding:1rem 1.25rem;font-size:1rem}.ButtonLink[data-astro-cid-ggqyuvps]:has(.icon){align-items:center;font-size:1rem}.ButtonLink[data-astro-cid-ggqyuvps]:has(.icon) .icon[data-astro-cid-ggqyuvps]{font-size:1.25rem}
</style>
<link rel="stylesheet" href="/_astro/Book.CeBtyvn-.css">
<link rel="stylesheet" href="/_astro/Course2.CvX3rLkS.css">
<style>.contribution-item[data-astro-cid-uruca62j]{position:relative;display:flex;align-items:center;gap:1rem;background-color:var(--color-bg-1);border-radius:15px;padding:1rem;transition:box-shadow .3s ease-in-out}@media(min-width:700px){.contribution-item[data-astro-cid-uruca62j]{display:grid;grid-template-columns:1fr 1fr}}.dark .contribution-item[data-astro-cid-uruca62j]{background-color:#ffffff1a}.dark .contribution-item[data-astro-cid-uruca62j]:hover{box-shadow:0 0 0 3px #ffffff1a}.contribution-item[data-astro-cid-uruca62j] h3[data-astro-cid-uruca62j]{font-size:clamp(1rem,.932rem + .36vw,1.25rem);font-weight:600}.contribution-item[data-astro-cid-uruca62j] p[data-astro-cid-uruca62j]{font-size:clamp(.875rem,.841rem + .18vw,1rem)}.contribution-item[data-astro-cid-uruca62j] h3[data-astro-cid-uruca62j],.contribution-item[data-astro-cid-uruca62j] a[data-astro-cid-uruca62j]{color:#4a4a4a}.dark .contribution-item[data-astro-cid-uruca62j] h3[data-astro-cid-uruca62j],.dark .contribution-item[data-astro-cid-uruca62j] a[data-astro-cid-uruca62j],.contribution-item[data-astro-cid-uruca62j] p[data-astro-cid-uruca62j]{color:var(--color-body)}.contribution-item[data-astro-cid-uruca62j] img[data-astro-cid-uruca62j]{border:clamp(.125rem,.057rem + .36vw,.375rem) solid #ffffff;box-shadow:0 1px 3px #0000001a;border-radius:12px;max-width:clamp(6.25rem,3.906rem + 12.5vw,9.375rem);margin-left:auto}.dark .contribution-item[data-astro-cid-uruca62j] img[data-astro-cid-uruca62j]{border-color:#ffffff1a;box-shadow:0 1px 10px #ffffff0d}@media(min-width:700px){.contribution-item[data-astro-cid-uruca62j] img[data-astro-cid-uruca62j]{max-width:100%;margin-left:initial}}.contribution-item[data-astro-cid-uruca62j] a[data-astro-cid-uruca62j]:after{content:"";position:absolute;inset:0}.contribution-item[data-astro-cid-uruca62j]:hover{box-shadow:0 0 0 3px var(--color-bg-1)}.dark .contribution-item[data-astro-cid-uruca62j] svg[data-astro-cid-uruca62j] path[data-astro-cid-uruca62j]{fill:#fff}.contribution-item__content[data-astro-cid-uruca62j]>[data-astro-cid-uruca62j]+[data-astro-cid-uruca62j]{margin-top:.25rem}
.contributions__header[data-astro-cid-d2pakz6e]{display:flex;align-items:center;flex-wrap:wrap;gap:1rem;margin-bottom:2rem}.contributions__header__content[data-astro-cid-d2pakz6e]{flex:1 1 300px}.contributions__supporting[data-astro-cid-d2pakz6e]{font-size:1rem;font-size:clamp(1rem,.857rem + .71vw,1.5rem);color:var(--color-brand-primary)}.dark .contributions__supporting[data-astro-cid-d2pakz6e]{color:var(--text-secondary)}.contributions__title[data-astro-cid-d2pakz6e]{font-size:2rem;font-size:clamp(2rem,1.286rem + 3.57vw,4.5rem);font-weight:700;color:#3964d7}.grid[data-astro-cid-d2pakz6e]{--cols: 1fr;display:grid;grid-template-columns:var(--cols);gap:20px 24px}@media(min-width:700px){.grid[data-astro-cid-d2pakz6e]{--cols: 1fr 1fr}}
.work-item[data-astro-cid-r7kjq4ip] a[data-astro-cid-r7kjq4ip]{display:flex;flex-direction:column;gap:.5rem}.work-item[data-astro-cid-r7kjq4ip].tuhoon{--bg-color: var(--work-tuhoon)}.work-item[data-astro-cid-r7kjq4ip].accounting{--bg-color: var(--work-accounting)}.work-item[data-astro-cid-r7kjq4ip].news{--bg-color: var(--work-news)}.work-item[data-astro-cid-r7kjq4ip].foodie{--bg-color: var(--work-foodie)}.work-item[data-astro-cid-r7kjq4ip].gooddeeds{--bg-color: var(--work-gooddeeds)}.work-item[data-astro-cid-r7kjq4ip].travel{--bg-color: var(--work-travel)}.work-item[data-astro-cid-r7kjq4ip].mansoub{--bg-color: var(--work-mansoub)}.work-item[data-astro-cid-r7kjq4ip].ink{--bg-color: var(--work-ink)}.work-item[data-astro-cid-r7kjq4ip] h3[data-astro-cid-r7kjq4ip]{color:var(--work-title-title-color);font-weight:700;font-size:19px}.work-item[data-astro-cid-r7kjq4ip] p[data-astro-cid-r7kjq4ip]{color:var(--work-title-desc-color)}@media(hover:hover){.work-item[data-astro-cid-r7kjq4ip]:hover .work-item__thumb[data-astro-cid-r7kjq4ip].web img[data-astro-cid-r7kjq4ip]{transform:scale(1.35)}.work-item[data-astro-cid-r7kjq4ip]:hover .work-item__thumb[data-astro-cid-r7kjq4ip]:not(.web) img[data-astro-cid-r7kjq4ip]{transform:scale(1.05) translateY(-40%)}}.work-item__thumb[data-astro-cid-r7kjq4ip]{height:250px;overflow:hidden;display:flex;justify-content:center;align-items:flex-start;padding-top:1.5rem;background-color:var(--bg-color);border-radius:clamp(.75rem,.602rem + .74vw,1.25rem);border:1px solid var(--work-item-border-color)}@media(min-width:700px){.work-item__thumb[data-astro-cid-r7kjq4ip]{height:350px}}.dark .work-item__thumb[data-astro-cid-r7kjq4ip]{background-color:color-mix(in srgb,var(--bg-color) 50%,#08112b 50%)}.work-item__thumb[data-astro-cid-r7kjq4ip] img[data-astro-cid-r7kjq4ip]{width:220px;transition:.8s ease-in-out}.work-item__thumb[data-astro-cid-r7kjq4ip].web{padding-top:0;align-items:center;transition:.5s ease-in-out}.work-item__thumb[data-astro-cid-r7kjq4ip].web img[data-astro-cid-r7kjq4ip]{width:460px;max-width:90%;transform-origin:var(--direction, top left)}
</style>
<link rel="stylesheet" href="/_astro/index.C2H5FnqN.css"></head> <body class="home"> <svg style="display: none"> <symbol id="arrow-right" width="23.114" height="23.114" viewBox="0 0 23.114 23.114"> <g id="np_arrow_1921082_000000" transform="translate(-2.5 -2.5)"> <path id="Path_18" data-name="Path 18" d="M25.614,14.057A11.557,11.557,0,1,0,14.057,25.614,11.568,11.568,0,0,0,25.614,14.057Zm-21.46,0a9.9,9.9,0,1,1,9.9,9.9,9.927,9.927,0,0,1-9.9-9.9Z"></path> <path id="Path_19" data-name="Path 19" d="M45.262,34.182a.821.821,0,0,0,0-1.167L40.81,28.562a.826.826,0,0,0-1.168,1.168L43.486,33.6l-3.845,3.845a.791.791,0,0,0-.243.584.754.754,0,0,0,.243.584.837.837,0,0,0,1.168,0Z" transform="translate(-27.921 -19.541)"></path> </g> </symbol> <symbol id="link-external" width="16.067" height="16.078" viewBox="0 0 16.067 16.078"> <g fill="#3863d9"> <path data-name="Path 20" d="M14.137 1.15h-3.159a.774.774 0 0 1-.093-.013.551.551 0 0 1-.2-.09.565.565 0 0 1-.235-.488.531.531 0 0 1 .031-.153.543.543 0 0 1 .091-.164.552.552 0 0 1 .167-.141.572.572 0 0 1 .177-.062c.028 0 .035 0 .063-.007q2.262-.063 4.524 0h.049a.491.491 0 0 1 .082.016l.035.01h.011l.019.007h.006a.523.523 0 0 1 .078.041.563.563 0 0 1 .175.174.512.512 0 0 1 .044.084.553.553 0 0 1 .032.108v.075c.042 1.5 0 3.006 0 4.51a.459.459 0 0 1 0 .063.579.579 0 0 1-.052.18.56.56 0 0 1-.131.174.531.531 0 0 1-.131.087.565.565 0 0 1-.567-.048.558.558 0 0 1-.228-.363.517.517 0 0 1-.007-.093V1.943L7.663 9.198a.5.5 0 0 1-.063.054.56.56 0 0 1-.147.078.549.549 0 0 1-.205.031.566.566 0 0 1-.453-.261.574.574 0 0 1-.067-.153.554.554 0 0 1-.019-.166.562.562 0 0 1 .086-.277.656.656 0 0 1 .078-.1l7.255-7.255z" fill-rule="evenodd"></path> <path data-name="Path 21" d="M7.331 1.526a.505.505 0 0 1 .1.021.557.557 0 0 1 .265.17.522.522 0 0 1 .086.134.554.554 0 0 1 .045.153.565.565 0 0 1-.131.446.548.548 0 0 1-.166.131.556.556 0 0 1-.2.06H6.1c-.634 0-1.269.008-1.9.043a10.457 10.457 0 0 0-1.052.1q-.141.022-.283.05-.1.02-.19.045a1.954 1.954 0 0 0-.816.389 1.26 1.26 0 0 0-.121.123 1.6 1.6 0 0 0-.263.452 3.281 3.281 0 0 0-.17.607 7.787 7.787 0 0 0-.112.883c-.04.5-.053 1-.062 1.5-.007.45-.008.9-.008 1.35v1.224c0 .569 0 1.139.017 1.709.013.5.033 1 .09 1.495a8.5 8.5 0 0 0 .054.39 3.713 3.713 0 0 0 .179.7 1.646 1.646 0 0 0 .3.516 1.9 1.9 0 0 0 1.021.522 6.066 6.066 0 0 0 .534.096 14.66 14.66 0 0 0 1.54.1c.606.017 1.214.019 1.82.019H7.89c.49 0 .979 0 1.469-.011s.982-.024 1.47-.068a7.177 7.177 0 0 0 .857-.119 2.844 2.844 0 0 0 .7-.228 1.445 1.445 0 0 0 .355-.247 1.921 1.921 0 0 0 .474-.95 6.313 6.313 0 0 0 .092-.491 9.4 9.4 0 0 0 .049-.411c.043-.439.061-.881.072-1.323.02-.771.017-1.542.017-2.314v-.053c0-.018 0-.035.007-.053a.547.547 0 0 1 .079-.2.536.536 0 0 1 .1-.12.563.563 0 0 1 .446-.131.545.545 0 0 1 .153.045.561.561 0 0 1 .317.4.579.579 0 0 1 .01.106v1.18c0 .387-.006.774-.015 1.161-.007.264-.016.528-.031.792q-.017.305-.046.61a9.298 9.298 0 0 1-.083.639 3.761 3.761 0 0 1-.581 1.571 2.38 2.38 0 0 1-.451.48 2.633 2.633 0 0 1-.5.315 4.49 4.49 0 0 1-1.275.368c-.315.049-.634.079-.952.1s-.668.035-1 .043c-.481.012-.961.015-1.442.017H6.675c-.577 0-1.154 0-1.732-.017a18.4 18.4 0 0 1-1.592-.094 8.742 8.742 0 0 1-.362-.049 3.862 3.862 0 0 1-1.658-.592 2.552 2.552 0 0 1-.2-.159 2.431 2.431 0 0 1-.256-.263 2.234 2.234 0 0 1-.154-.206 3.836 3.836 0 0 1-.539-1.51 8.474 8.474 0 0 1-.092-.737 14.337 14.337 0 0 1-.042-.62c-.016-.31-.024-.62-.031-.929-.007-.4-.01-.8-.011-1.2v-1.51c0-.538 0-1.077.013-1.614.007-.3.016-.609.033-.913a14.246 14.246 0 0 1 .099-1.075c.012-.088.026-.174.042-.261a3.673 3.673 0 0 1 .562-1.485 2.38 2.38 0 0 1 .451-.48 2.664 2.664 0 0 1 .534-.33 4.435 4.435 0 0 1 1.153-.336c.277-.047.557-.077.837-.1s.57-.037.857-.047c.413-.015.828-.021 1.241-.023h1.509z"></path> </g> </symbol> <symbol id="send" width="36.258" height="35.835" viewBox="0 0 36.258 35.835"> <path d="M25.339 13.557a.836.836 0 0 0-1.2-1.153L9.151 25.155l-7.915-3.062a1.925 1.925 0 0 1-.223-3.492L33.871.194a1.619 1.619 0 0 1 2.38 1.579l-2.882 30.045a1.989 1.989 0 0 1-2.72 1.66l-9.633-3.729-6.048 5.665a1.561 1.561 0 0 1-2.628-1.153v-4.45z"></path> </symbol> <symbol id="arrow-up" width="24.737" height="23.502" viewBox="0 0 24.737 23.502"> <path data-name="Path 25" d="M13.244.362a1.236 1.236 0 0 0-1.749 0L.363 11.494a1.237 1.237 0 1 0 1.749 1.749l9.019-9.019v18.041a1.237 1.237 0 1 0 2.474 0V4.224l9.019 9.019a1.237 1.237 0 1 0 1.751-1.747z" fill="#fff"></path> </symbol> </svg> <div class="banner" data-astro-cid-iieg7hvt> <p data-astro-cid-iieg7hvt> <span aria-hidden="true" data-astro-cid-iieg7hvt>&#x23F0;</span> Checkout <a href="https://thelayoutmaestro.com/" target="_blank" data-astro-cid-iieg7hvt>The Layout Maestro <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="display:inline;vertical-align:middle;margin-top:-2px;" data-astro-cid-iieg7hvt><path d="M15 3h6v6" data-astro-cid-iieg7hvt></path><path d="M10 14 21 3" data-astro-cid-iieg7hvt></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" data-astro-cid-iieg7hvt></path></svg></a> course. $75 off until 31 May 2026.
</p> </div>  <header id="header" class="c-header" role="banner" data-astro-cid-3ef6ksr2> <div class="c-header__start" data-astro-cid-3ef6ksr2> <a href="/" class="c-logo" data-astro-cid-3ef6ksr2> <img src="/assets/shadeed.jpg" alt="" data-astro-cid-3ef6ksr2> <div data-astro-cid-3ef6ksr2> <strong data-astro-cid-3ef6ksr2>Ahmad Shadeed</strong> <span class="sr-only" data-astro-cid-3ef6ksr2>,</span> <p data-astro-cid-3ef6ksr2>Design Engineer</p> </div> </a> </div> <div class="c-header__middle" data-astro-cid-3ef6ksr2> <nav class="c-nav__wrapper" data-astro-cid-3ef6ksr2> <ul class="c-nav" data-astro-cid-3ef6ksr2> <li class="c-nav__item home is-active" data-name="home" data-astro-cid-3ef6ksr2> <a href="/" data-astro-cid-3ef6ksr2>Home</a> </li> <li class="c-nav__item course" data-name="notes" data-astro-cid-3ef6ksr2> <a href="https://thelayoutmaestro.com/" target="_blank" rel="noopener noreferrer" data-astro-cid-3ef6ksr2><span data-astro-cid-3ef6ksr2>Course</span></a> </li> <li class="c-nav__item articles" data-name="articles" data-astro-cid-3ef6ksr2> <a href="/articles" data-astro-cid-3ef6ksr2>Articles</a> </li> <li class="c-nav__item work" data-name="work" data-astro-cid-3ef6ksr2> <a href="/work" data-astro-cid-3ef6ksr2>Work</a> </li> <li class="c-nav__item about" data-name="about" data-astro-cid-3ef6ksr2> <a href="/about" data-astro-cid-3ef6ksr2>About</a> </li> <li class="c-nav__item speaking" data-name="speaking" data-astro-cid-3ef6ksr2> <a href="/speaking" data-astro-cid-3ef6ksr2>Speaking</a> </li> <li class="c-nav__item contact" data-name="contact" data-astro-cid-3ef6ksr2> <a href="/contact" data-astro-cid-3ef6ksr2>Contact</a> </li> </ul> </nav> </div> <div class="c-header__end" data-astro-cid-3ef6ksr2> <button class="theme-toggle" data-current-theme="light" data-astro-cid-oemx5le4> <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" class="light-theme" data-astro-cid-oemx5le4> <path d="M16.0003 21.3149C18.9253 21.3149 21.3052 18.9337 21.3052 16.01C21.3052 13.085 18.9252 10.7012 16.0003 10.7012C13.0753 10.7012 10.6953 13.0824 10.6953 16.0061C10.6953 18.9311 13.0753 21.3149 16.0003 21.3149ZM16.0003 12.6212C17.869 12.6212 19.3852 14.1412 19.3852 16.0061C19.3852 17.8749 17.8652 19.3911 16.0003 19.3911C14.1353 19.3911 12.6153 17.8711 12.6153 16.0061C12.6153 14.1412 14.1316 12.6212 16.0003 12.6212Z" fill="black" data-astro-cid-oemx5le4></path> <path d="M15.9991 9.62501C16.5303 9.62501 16.9591 9.19627 16.9591 8.66501V5.92875C16.9591 5.39749 16.5303 4.96875 15.9991 4.96875C15.4678 4.96875 15.0391 5.39749 15.0391 5.92875V8.66501C15.0391 9.19374 15.4678 9.62501 15.9991 9.62501Z" fill="black" data-astro-cid-oemx5le4></path> <path d="M15.0391 23.335V26.0713C15.0391 26.6025 15.4678 27.0313 15.9991 27.0313C16.5303 27.0313 16.9591 26.6025 16.9591 26.0713V23.335C16.9591 22.8037 16.5303 22.375 15.9991 22.375C15.4678 22.375 15.0391 22.8063 15.0391 23.335Z" fill="black" data-astro-cid-oemx5le4></path> <path d="M5.92875 16.9591H8.66501C9.19627 16.9591 9.62501 16.5303 9.62501 15.9991C9.62501 15.4678 9.19627 15.0391 8.66501 15.0391H5.92875C5.39749 15.0391 4.96875 15.4678 4.96875 15.9991C4.96875 16.5303 5.40001 16.9591 5.92875 16.9591Z" fill="black" data-astro-cid-oemx5le4></path> <path d="M22.375 15.9991C22.375 16.5303 22.8037 16.9591 23.335 16.9591H26.0713C26.6025 16.9591 27.0313 16.5303 27.0313 15.9991C27.0313 15.4678 26.6025 15.0391 26.0713 15.0391H23.335C22.8063 15.0391 22.375 15.4678 22.375 15.9991Z" fill="black" data-astro-cid-oemx5le4></path> <path d="M21.0281 11.6181C21.2844 11.6181 21.5406 11.5156 21.7294 11.3168L23.6044 9.3268C23.9694 8.93931 23.9494 8.33428 23.5631 7.97054C23.1756 7.60555 22.5681 7.62555 22.2069 8.01179L20.3319 10.0018C19.9669 10.3893 19.9869 10.9943 20.3731 11.3581C20.5544 11.5318 20.7906 11.6181 21.0281 11.6181Z" fill="black" data-astro-cid-oemx5le4></path> <path d="M10.2733 20.6843L8.39827 22.6743C8.03328 23.0618 8.05328 23.6668 8.43953 24.0306C8.62452 24.2031 8.86202 24.2893 9.09828 24.2893C9.35453 24.2893 9.61079 24.1868 9.79953 23.9881L11.6745 21.998C12.0395 21.6106 12.0195 21.0055 11.6333 20.6418C11.2433 20.278 10.6345 20.2968 10.2733 20.6843Z" fill="black" data-astro-cid-oemx5le4></path> <path d="M10 11.674C10.185 11.8465 10.4225 11.9327 10.6588 11.9327C10.915 11.9327 11.1713 11.8302 11.36 11.6315C11.725 11.244 11.705 10.639 11.3188 10.2752L9.32875 8.40023C8.94126 8.03524 8.33374 8.05524 7.97249 8.44148C7.6075 8.82897 7.6275 9.43399 8.01374 9.79773L10 11.674Z" fill="black" data-astro-cid-oemx5le4></path> <path d="M20.6444 20.3679C20.2794 20.7554 20.2994 21.3604 20.6856 21.7242L22.6756 23.5992C22.8606 23.7717 23.0981 23.8579 23.3344 23.8579C23.5906 23.8579 23.8469 23.7554 24.0356 23.5567C24.4006 23.1692 24.3806 22.5642 23.9944 22.2004L22.0044 20.3254C21.6131 19.9654 21.0081 19.9817 20.6444 20.3679Z" fill="black" data-astro-cid-oemx5le4></path> </svg> <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" class="dark-theme" data-astro-cid-oemx5le4> <path d="M11.7194 4.00057C11.6279 4.00514 11.5387 4.02343 11.4541 4.05544C6.71982 5.81035 4 10.4097 4 15.6436C4 22.4562 9.53447 28 16.3473 28C21.5812 28 26.1897 25.271 27.9446 20.5368C28.0635 20.211 27.9788 19.8463 27.7296 19.605C27.4815 19.3638 27.1134 19.2918 26.7922 19.421C25.594 19.9023 24.277 20.1527 22.8867 20.1527C17.1509 20.1527 11.8473 14.84 11.8473 9.10422C11.8473 7.71402 12.0886 6.39698 12.5699 5.19877C12.6774 4.92325 12.6396 4.61114 12.4681 4.36992C12.2966 4.1287 12.0155 3.98913 11.7194 4.00057ZM10.3566 6.55234C10.1863 7.37891 10.0914 8.23065 10.0914 9.1041C10.0914 15.8974 16.0935 21.9086 22.8868 21.9086C23.7591 21.9086 24.612 21.8046 25.4386 21.6342C23.6048 24.5747 20.2743 26.2438 16.3475 26.2438C10.4838 26.2438 5.75622 21.5072 5.75622 15.6435C5.75622 11.7152 7.41494 8.38594 10.3566 6.55234Z" fill="black" data-astro-cid-oemx5le4></path> </svg> <span class="sr-only" data-astro-cid-oemx5le4>Switch to dark</span> </button>  <script>
  document.addEventListener("DOMContentLoaded", () => {
    const button = document.querySelector(".theme-toggle")
    const themeMeta = document.querySelector(
      'meta[name="theme-color"]'
    )
    const currentTheme = localStorage.getItem("theme") || "light"
    const systemTheme = window.matchMedia(
      "(prefers-color-scheme: dark)"
    ).matches
      ? "dark"
      : "light"

    const themeToApply =
      currentTheme === "system" ? systemTheme : currentTheme

    // Function to update theme color
    const updateThemeColor = (theme) => {
      document.documentElement.classList.remove("light", "dark")
      document.documentElement.classList.add(theme)
      themeMeta.setAttribute(
        "content",
        theme === "light" ? "#fff" : "#08112B" // Adjust the dark color here
      )
      button.dataset.currentTheme = theme
      button.querySelector("span").textContent =
        theme === "light" ? "Switch to dark" : "Switch to light"
      localStorage.setItem("theme", theme)
    }

    // Apply the saved theme or the system theme
    updateThemeColor(themeToApply)

    button.addEventListener("click", () => {
      const newTheme =
        button.dataset.currentTheme === "light" ? "dark" : "light"
      updateThemeColor(newTheme)
    })
  })
</script> </div> </header> <main class="u-flow" style="--space: 3rem;" data-astro-cid-j7pv25f6><section class="c-hero" data-astro-cid-j7pv25f6><h1 data-astro-cid-j7pv25f6><span data-astro-cid-j7pv25f6>UX Design, Web Design Engineering, and UX Audits.</span></h1><p data-astro-cid-j7pv25f6>
A photo of Ahmad speaking at CSS Day Conference in Amsterdam,
        Netherlands.
</p></section><div class="c-hero__content u-flow" style="--space: 1rem;" data-astro-cid-j7pv25f6><h1 class="c-hero__main" data-astro-cid-j7pv25f6><span data-astro-cid-j7pv25f6>I bridge the gap between design and development.</span></h1><p class="c-hero__desc" data-astro-cid-j7pv25f6>
I'm Ahmad, a senior UX Designer and front-end engineer (AKA
        design engineer, or a designer who codes, etc) known for fast,
        creative problem-solving and solid CSS/layout systems. <br data-astro-cid-j7pv25f6><br data-astro-cid-j7pv25f6> I help teams ship modern, responsive, easy to use user interfaces
        with speed and clarity.
</p><!-- Calendly link widget begin --><link href="https://assets.calendly.com/assets/external/widget.css" rel="stylesheet"><script src="https://assets.calendly.com/assets/external/widget.js" type="text/javascript" async></script><a class="ButtonLink primary" href="" onclick="Calendly.initPopupWidget({url: 'https://calendly.com/shadeed9/30min'});return false;" data-astro-cid-j7pv25f6>Book a call</a><!-- Calendly link widget end --></div><section class="layout-maestro u-flow" style="--space: 3rem" data-astro-cid-mxtfffes> <div class="wrapper" data-astro-cid-mxtfffes> <header class="layout-maestro__header" data-astro-cid-mxtfffes> <div class="layout-maestro__header__content" data-astro-cid-mxtfffes> <p class="layout-maestro__supporting" data-astro-cid-mxtfffes>
I built a CSS course <span class="chip" data-astro-cid-mxtfffes>New</span> </p> <h2 class="layout-maestro__title" data-astro-cid-mxtfffes>The Layout Maestro</h2> </div> <a class="ButtonLink primary large" href="https://thelayoutmaestro.com/" target="_blank" data-astro-cid-ggqyuvps>Enroll now</a>  </header> <div class="grid grid-2" data-astro-cid-mxtfffes> <div data-astro-cid-mxtfffes> <p data-astro-cid-mxtfffes>
Build any web layout, with confidence. A written course on
          how to think about CSS layouts, so you can build them from
          scratch or fix the ones AI gets wrong.
</p> </div> </div> </div> <div class="rows-wrapper" data-astro-cid-mxtfffes> <div class="pages-row start" data-astro-cid-mxtfffes> <img draggable="false" width="194" height="278" loading="lazy" src="/course-overview/overview-1.png" alt="Overview 1" data-astro-cid-mxtfffes> <img draggable="false" width="194" height="278" loading="lazy" src="/course-overview/overview-2.png" alt="Overview 2" data-astro-cid-mxtfffes> <img draggable="false" width="194" height="278" loading="lazy" src="/course-overview/overview-3.png" alt="Overview 3" data-astro-cid-mxtfffes> <img draggable="false" width="194" height="278" loading="lazy" src="/course-overview/overview-4.png" alt="Overview 4" data-astro-cid-mxtfffes> <img draggable="false" width="194" height="278" loading="lazy" src="/course-overview/overview-5.png" alt="Overview 5" data-astro-cid-mxtfffes> <img draggable="false" width="194" height="278" loading="lazy" src="/course-overview/overview-6.png" alt="Overview 6" data-astro-cid-mxtfffes> <img draggable="false" width="194" height="278" loading="lazy" src="/course-overview/overview-7.png" alt="Overview 7" data-astro-cid-mxtfffes> <img draggable="false" width="194" height="278" loading="lazy" src="/course-overview/overview-8.png" alt="Overview 8" data-astro-cid-mxtfffes> <img draggable="false" width="194" height="278" loading="lazy" src="/course-overview/overview-9.png" alt="Overview 9" data-astro-cid-mxtfffes> <img draggable="false" width="194" height="278" loading="lazy" src="/course-overview/overview-10.png" alt="Overview 10" data-astro-cid-mxtfffes> <img draggable="false" width="194" height="278" loading="lazy" src="/course-overview/overview-11.png" alt="Overview 11" data-astro-cid-mxtfffes> <img draggable="false" width="194" height="278" loading="lazy" src="/course-overview/overview-12.png" alt="Overview 12" data-astro-cid-mxtfffes> </div> <div class="pages-row end" data-astro-cid-mxtfffes> <img draggable="false" width="194" height="278" loading="lazy" src="/course-overview/overview-13.png" alt="Overview 13" data-astro-cid-mxtfffes> <img draggable="false" width="194" height="278" loading="lazy" src="/course-overview/overview-14.png" alt="Overview 14" data-astro-cid-mxtfffes> <img draggable="false" width="194" height="278" loading="lazy" src="/course-overview/overview-15.png" alt="Overview 15" data-astro-cid-mxtfffes> <img draggable="false" width="194" height="278" loading="lazy" src="/course-overview/overview-16.png" alt="Overview 16" data-astro-cid-mxtfffes> <img draggable="false" width="194" height="278" loading="lazy" src="/course-overview/overview-17.png" alt="Overview 17" data-astro-cid-mxtfffes> <img draggable="false" width="194" height="278" loading="lazy" src="/course-overview/overview-18.png" alt="Overview 18" data-astro-cid-mxtfffes> <img draggable="false" width="194" height="278" loading="lazy" src="/course-overview/overview-19.png" alt="Overview 19" data-astro-cid-mxtfffes> <img draggable="false" width="194" height="278" loading="lazy" src="/course-overview/overview-20.png" alt="Overview 20" data-astro-cid-mxtfffes> <img draggable="false" width="194" height="278" loading="lazy" src="/course-overview/overview-21.png" alt="Overview 21" data-astro-cid-mxtfffes> <img draggable="false" width="194" height="278" loading="lazy" src="/course-overview/overview-22.png" alt="Overview 22" data-astro-cid-mxtfffes> <img draggable="false" width="194" height="278" loading="lazy" src="/course-overview/overview-23.png" alt="Overview 23" data-astro-cid-mxtfffes> <img draggable="false" width="194" height="278" loading="lazy" src="/course-overview/overview-24.png" alt="Overview 24" data-astro-cid-mxtfffes> </div> </div> </section> <section class="c-section" data-astro-cid-j7pv25f6><div class="wrapper" data-astro-cid-j7pv25f6><header class="c-section__header" data-astro-cid-j7pv25f6><div data-astro-cid-j7pv25f6><h2 class="c-section__title" data-astro-cid-j7pv25f6><svg width="32" height="33" viewBox="0 0 32 33" fill="none" xmlns="http://www.w3.org/2000/svg" data-astro-cid-j7pv25f6><path d="M27.7776 4.72249C25.1888 2.12997 23.2438 2.51874 23.2438 2.51874L14.175 11.5875L3.80861 21.9514L1.99609 30.5015L10.5462 28.689L29.9811 9.25759C29.9823 9.25634 30.37 7.31378 27.7776 4.72249ZM10.0374 27.6588L7.12115 28.2863C6.8399 27.7588 6.50115 27.235 5.8824 26.6138C5.2624 25.9938 4.73491 25.655 4.20864 25.3738L4.83613 22.4575L5.67987 21.6175C5.67987 21.6175 7.26861 21.6488 9.05619 23.44C10.8462 25.2325 10.8812 26.8163 10.8812 26.8163L10.0374 27.6588Z" fill="#9D4AD0" data-astro-cid-j7pv25f6></path><path d="M7.69992 15.6171L8.92491 14.3921L3.36491 8.83211L8.33227 3.86475L9.47976 5.01224L7.93227 6.55973C7.59352 6.89723 7.59352 7.44596 7.93227 7.78347C8.26977 8.12222 8.81726 8.12222 9.15602 7.78347L10.7035 6.23598L12.8198 8.35099L11.271 9.89973C10.9323 10.2372 10.9323 10.786 11.2723 11.1235C11.4573 11.3097 11.706 11.3835 11.9498 11.3647L15.116 8.19848L9.44594 2.52968C8.83093 1.91467 7.78095 1.96344 7.10594 2.63968L2.13954 7.60704C1.46453 8.28205 1.41579 9.33078 2.03079 9.94704L7.69992 15.6171Z" fill="#9D4AD0" data-astro-cid-j7pv25f6></path><path d="M29.9684 23.052L24.3021 17.3857L21.0596 20.6283C21.0796 20.8171 21.1508 21.0021 21.2958 21.1471C21.6333 21.4858 22.1808 21.4858 22.5196 21.1471L24.0683 19.5996L26.1846 21.7158L24.6358 23.2633C24.2971 23.6008 24.2971 24.1496 24.6358 24.4871C24.9746 24.8258 25.5221 24.8258 25.8608 24.4871L27.4083 22.9396L28.6345 24.1658H28.6333L23.6669 29.1344L18.1107 23.5783L16.8857 24.802L22.5533 30.4683C23.1683 31.0833 24.217 31.0345 24.8933 30.3595L29.8597 25.3922C30.5359 24.7172 30.5834 23.667 29.9684 23.052Z" fill="#9D4AD0" data-astro-cid-j7pv25f6></path></svg><span data-astro-cid-j7pv25f6>Work</span></h2><p data-astro-cid-j7pv25f6>
I do design and build web and mobile experiences with a
              focus on the user needs.
</p></div><a class="ButtonLink primary false" href="/work" data-astro-cid-ggqyuvps>Explore my work</a> </header><div class="works-list" data-astro-cid-j7pv25f6><article class="work-item tuhoon" style="--direction: top left" data-astro-cid-r7kjq4ip> <a href="/work/tuhoon/" class="u-flow" data-astro-cid-r7kjq4ip> <div class="work-item__thumb false" data-astro-cid-r7kjq4ip> <img src="/assets/works/tuhoon/cover.png" alt="" data-astro-cid-r7kjq4ip> </div> <div class="work-item__content u-flow" style="--space: 0.25rem;" data-astro-cid-r7kjq4ip> <h3 class="c-article__title" data-astro-cid-r7kjq4ip> <span data-astro-cid-r7kjq4ip>Tuhoon</span> </h3> <p data-astro-cid-r7kjq4ip>Better mental health for Arabic speakers.</p> </div> </a> </article> <article class="work-item accounting" style="--direction: top left" data-astro-cid-r7kjq4ip> <a href="/work/accounting/" class="u-flow" data-astro-cid-r7kjq4ip> <div class="work-item__thumb web" data-astro-cid-r7kjq4ip> <img src="/assets/works/accounting/cover.png" alt="" data-astro-cid-r7kjq4ip> </div> <div class="work-item__content u-flow" style="--space: 0.25rem;" data-astro-cid-r7kjq4ip> <h3 class="c-article__title" data-astro-cid-r7kjq4ip> <span data-astro-cid-r7kjq4ip>Accounting app</span> </h3> <p data-astro-cid-r7kjq4ip>UX design for a complex accounting app.</p> </div> </a> </article> </div></div></section><div class="wrapper" data-astro-cid-j7pv25f6><section class="c-section" data-astro-cid-j7pv25f6><header class="c-section__header" data-astro-cid-j7pv25f6><h2 class="c-section__title" data-astro-cid-j7pv25f6><svg width="32" height="33" viewBox="0 0 32 33" fill="none" xmlns="http://www.w3.org/2000/svg" data-astro-cid-j7pv25f6><g clip-path="url(#clip0_1663_147)" data-astro-cid-j7pv25f6><path d="M8.62273 24.6886L26.9402 6.37372C27.8627 5.45122 27.8627 3.94998 26.9402 3.02876L25.5877 1.67625C24.6652 0.753751 23.1652 0.753751 22.2427 1.67625L3.92782 19.995C3.69157 20.2275 0.380296 25.9876 1.50782 27.1111C2.63031 28.2349 8.38785 24.9261 8.62273 24.6886ZM23.5616 2.99356C23.7566 2.79731 24.0741 2.79731 24.2716 2.99356L25.6229 4.34482C25.8179 4.54107 25.8179 4.85983 25.6229 5.05484L24.3554 6.32358L22.2954 4.26233L23.5616 2.99356ZM5.24417 21.3123L5.78042 20.7735L7.84292 22.836L7.32417 23.3573C7.15167 23.501 6.66042 23.761 6.05543 24.0473L4.56545 22.5598C4.8517 21.9598 5.10542 21.4773 5.24417 21.3123Z" fill="#9D4AD0" data-astro-cid-j7pv25f6></path><path d="M30.7267 27.2611H23.8631C21.7743 27.2611 20.9993 28.1136 20.2506 28.9374C19.8156 29.4186 19.3618 29.9149 18.5631 30.3536C17.4706 30.9561 15.7994 29.9061 14.1842 28.8949C13.073 28.1974 12.023 27.5411 11.0005 27.2836C9.03673 26.7886 7.91548 27.7361 7.01167 28.4974C6.55666 28.8811 6.12793 29.2449 5.61042 29.4449C4.46041 29.8886 2.34802 28.6974 1.69778 28.2449C1.36278 28.0124 0.90028 28.0936 0.66652 28.4299C0.431518 28.7649 0.51277 29.2249 0.849019 29.4611C1.17152 29.6861 4.0503 31.6349 6.14662 30.8299C6.89664 30.5399 7.46662 30.0586 7.97286 29.6336C8.80912 28.9261 9.41536 28.4123 10.6416 28.7236C11.4366 28.9248 12.3903 29.5211 13.3991 30.1536C14.8141 31.0423 16.3716 32.0173 17.8477 32.0173C18.3365 32.0173 18.8177 31.9098 19.2803 31.6561C20.2978 31.0998 20.8827 30.4561 21.3528 29.9386C22.0265 29.1961 22.434 28.7473 23.8665 28.7473H30.7302C31.1415 28.7473 31.4727 28.4161 31.4727 28.0048C31.469 27.5923 31.138 27.2611 30.7267 27.2611Z" fill="#9D4AD0" data-astro-cid-j7pv25f6></path></g><defs data-astro-cid-j7pv25f6><clipPath id="clip0_1663_147" data-astro-cid-j7pv25f6><rect width="32" height="32" fill="white" transform="translate(0 0.5)" data-astro-cid-j7pv25f6></rect></clipPath></defs></svg><span data-astro-cid-j7pv25f6>Recent articles</span></h2><a class="ButtonLink primary false" href="/articles" data-astro-cid-ggqyuvps>View all articles</a> </header><div class="articles-list home" data-astro-cid-j7pv25f6><div class="article-container" data-astro-cid-x7mc7pml> <article class="c-article" data-astro-cid-x7mc7pml> <a href="/article/css-round" data-astro-cid-x7mc7pml>  <h3 class="c-article__title" data-astro-cid-x7mc7pml> <span data-astro-cid-x7mc7pml>Better fluid sizing with round()</span>  </h3> </a> <time class="c-article__time" dateTime="Sun May 17 2026 00:00:00 GMT+0000 (Coordinated Universal Time)" data-astro-cid-x7mc7pml> May 17, 2026 </time> </article> </div> <div class="article-container" data-astro-cid-x7mc7pml> <article class="c-article" data-astro-cid-x7mc7pml> <a href="/article/range-syntax" data-astro-cid-x7mc7pml>  <h3 class="c-article__title" data-astro-cid-x7mc7pml> <span data-astro-cid-x7mc7pml>Media Queries Range Syntax</span>  </h3> </a> <time class="c-article__time" dateTime="Mon May 04 2026 00:00:00 GMT+0000 (Coordinated Universal Time)" data-astro-cid-x7mc7pml> May 4, 2026 </time> </article> </div> <div class="article-container" data-astro-cid-x7mc7pml> <article class="c-article" data-astro-cid-x7mc7pml> <a href="/article/too-early-breakpoint" data-astro-cid-x7mc7pml>  <h3 class="c-article__title" data-astro-cid-x7mc7pml> <span data-astro-cid-x7mc7pml>The Too Early Breakpoint</span>  </h3> </a> <time class="c-article__time" dateTime="Sat Jan 31 2026 00:00:00 GMT+0000 (Coordinated Universal Time)" data-astro-cid-x7mc7pml> Jan 31, 2026 </time> </article> </div> <div class="article-container" data-astro-cid-x7mc7pml> <article class="c-article" data-astro-cid-x7mc7pml> <a href="/article/field-sizing" data-astro-cid-x7mc7pml>  <h3 class="c-article__title" data-astro-cid-x7mc7pml> <span data-astro-cid-x7mc7pml>Use Cases for Field Sizing</span>  </h3> </a> <time class="c-article__time" dateTime="Fri Oct 31 2025 00:00:00 GMT+0000 (Coordinated Universal Time)" data-astro-cid-x7mc7pml> Oct 31, 2025 </time> </article> </div> <div class="article-container" data-astro-cid-x7mc7pml> <article class="c-article" data-astro-cid-x7mc7pml> <a href="/article/modern-css-section-layout" data-astro-cid-x7mc7pml>  <h3 class="c-article__title" data-astro-cid-x7mc7pml> <span data-astro-cid-x7mc7pml>Solved By Modern CSS: Section Layout</span>  </h3> </a> <time class="c-article__time" dateTime="Thu Oct 23 2025 00:00:00 GMT+0000 (Coordinated Universal Time)" data-astro-cid-x7mc7pml> Oct 23, 2025 </time> </article> </div> <div class="article-container" data-astro-cid-x7mc7pml> <article class="c-article" data-astro-cid-x7mc7pml> <a href="/article/anchor-positioning" data-astro-cid-x7mc7pml>  <h3 class="c-article__title" data-astro-cid-x7mc7pml> <span data-astro-cid-x7mc7pml>The Basics of Anchor Positioning</span>  </h3> </a> <time class="c-article__time" dateTime="Thu Aug 28 2025 00:00:00 GMT+0000 (Coordinated Universal Time)" data-astro-cid-x7mc7pml> Aug 28, 2025 </time> </article> </div> </div></section></div><section class="debugging-css u-flow" style="--space: 3rem;" data-astro-cid-yk6tdtmc> <div class="wrapper" data-astro-cid-yk6tdtmc> <header class="debugging-css__header" data-astro-cid-yk6tdtmc> <div class="debugging-css__header__content" data-astro-cid-yk6tdtmc> <p class="debugging-css__supporting" data-astro-cid-yk6tdtmc>I wrote a book on</p> <h2 class="debugging-css__title" data-astro-cid-yk6tdtmc>Debugging CSS</h2> </div> <a class="ButtonLink primary large" href="https://debuggingcss.com/" target="_blank" data-astro-cid-ggqyuvps>Buy my book</a>  </header> <div class="grid grid-2" data-astro-cid-yk6tdtmc> <div class="u-flow" style="--space: 1rem;" data-astro-cid-yk6tdtmc> <p data-astro-cid-yk6tdtmc>
Debugging CSS isn’t only about adding an outline to all
          elements.
</p> <div class="code-block" data-astro-cid-yk6tdtmc> <div data-astro-cid-yk6tdtmc>* &#123;</div> <div data-astro-cid-yk6tdtmc>&nbsp;&nbsp;&nbsp;outline: solid 1px red;</div> <div data-astro-cid-yk6tdtmc>&#125;</div> </div> </div> <div data-astro-cid-yk6tdtmc> <p data-astro-cid-yk6tdtmc> <em style="font-style: normal; font-weight: bold;" data-astro-cid-yk6tdtmc>I wrote a book</em> that will help you improve your debugging CSS skills and reduce
          the time you spend on bugs by showing proven methods and techniques.
</p> </div> </div> </div> <div class="rows-wrapper" data-astro-cid-yk6tdtmc> <div class="pages-row start" data-astro-cid-yk6tdtmc> <img draggable="false" width="194" height="278" loading="lazy" src="/assets/general/debugging-css/page-01.png" alt="Page 01" data-astro-cid-yk6tdtmc> <img draggable="false" width="194" height="278" loading="lazy" src="/assets/general/debugging-css/page-02.png" alt="Page 02" data-astro-cid-yk6tdtmc> <img draggable="false" width="194" height="278" loading="lazy" src="/assets/general/debugging-css/page-03.png" alt="Page 03" data-astro-cid-yk6tdtmc> <img draggable="false" width="194" height="278" loading="lazy" src="/assets/general/debugging-css/page-04.png" alt="Page 04" data-astro-cid-yk6tdtmc> <img draggable="false" width="194" height="278" loading="lazy" src="/assets/general/debugging-css/page-05.png" alt="Page 05" data-astro-cid-yk6tdtmc> <img draggable="false" width="194" height="278" loading="lazy" src="/assets/general/debugging-css/page-06.png" alt="Page 06" data-astro-cid-yk6tdtmc> </div> <div class="pages-row end" data-astro-cid-yk6tdtmc> <img draggable="false" width="194" height="278" loading="lazy" src="/assets/general/debugging-css/page-07.png" alt="Page 07" data-astro-cid-yk6tdtmc> <img draggable="false" width="194" height="278" loading="lazy" src="/assets/general/debugging-css/page-08.png" alt="Page 08" data-astro-cid-yk6tdtmc> <img draggable="false" width="194" height="278" loading="lazy" src="/assets/general/debugging-css/page-09.png" alt="Page 09" data-astro-cid-yk6tdtmc> <img draggable="false" width="194" height="278" loading="lazy" src="/assets/general/debugging-css/page-10.png" alt="Page 10" data-astro-cid-yk6tdtmc> <img draggable="false" width="194" height="278" loading="lazy" src="/assets/general/debugging-css/page-11.png" alt="Page 11" data-astro-cid-yk6tdtmc> <img draggable="false" width="194" height="278" loading="lazy" src="/assets/general/debugging-css/page-12.png" alt="Page 12" data-astro-cid-yk6tdtmc> </div> </div> </section> <div class="wrapper" data-astro-cid-j7pv25f6><section class="c-section c-section--with-link" data-astro-cid-d2pakz6e> <header class="contributions__header" data-astro-cid-d2pakz6e> <div class="contributions__header__content" data-astro-cid-d2pakz6e> <p class="contributions__supporting" data-astro-cid-d2pakz6e>
I help the community with
</p> <h2 class="contributions__title" data-astro-cid-d2pakz6e>Web contributions</h2> </div> </header> <div class="grid" data-astro-cid-d2pakz6e> <article class="contribution-item" data-astro-cid-uruca62j> <div class="contribution-item__content" data-astro-cid-uruca62j> <svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg" data-astro-cid-uruca62j> <g opacity="0.5" data-astro-cid-uruca62j> <path d="M14.4602 1H5.5398C2.7602 1 0.5 3.2602 0.5 6.0398V14.9602C0.5 17.7398 2.7602 20 5.5398 20H14.4602C17.2398 20 19.5 17.7398 19.5 14.9602V6.0398C19.5 3.2602 17.2398 1 14.4602 1ZM17.6398 14.9602C17.6398 16.7204 16.2 18.1602 14.4398 18.1602H5.5398C3.77964 18.1602 2.3398 16.7204 2.3398 14.9602V6.0398C2.3398 4.27964 3.77964 2.8398 5.5398 2.8398H14.4602C16.2204 2.8398 17.6602 4.27964 17.6602 6.0398V14.9602H17.6398Z" fill="black" data-astro-cid-uruca62j></path> <path d="M13.9792 5.59961H8.79957C8.27925 5.59961 7.87925 6.01993 7.87925 6.51993C7.87925 7.01993 8.29957 7.44025 8.79957 7.44025H11.7394L5.15977 14.0395C4.79961 14.3996 4.79961 14.9793 5.15977 15.3394C5.33946 15.5191 5.58009 15.6191 5.81993 15.6191C6.05977 15.6191 6.29961 15.5191 6.48009 15.3394L13.0597 8.75985V11.6996C13.0597 12.22 13.48 12.62 13.98 12.62C14.5003 12.62 14.9003 12.1996 14.9003 11.6996L14.8995 6.52005C14.8995 5.99973 14.4995 5.59961 13.9792 5.59961Z" fill="black" data-astro-cid-uruca62j></path> </g> </svg> <h3 data-astro-cid-uruca62j><a href="https://defensivecss.dev/" target="_blank" data-astro-cid-uruca62j>Defensive CSS </a></h3> <p data-astro-cid-uruca62j> It&#39;s a term I coined that is about writing future-proof CSS to reduce broken UIs. </p> </div> <img src="/assets/general/defensive-css.png" alt="" data-astro-cid-uruca62j> </article>  <article class="contribution-item" data-astro-cid-uruca62j> <div class="contribution-item__content" data-astro-cid-uruca62j> <svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg" data-astro-cid-uruca62j> <g opacity="0.5" data-astro-cid-uruca62j> <path d="M14.4602 1H5.5398C2.7602 1 0.5 3.2602 0.5 6.0398V14.9602C0.5 17.7398 2.7602 20 5.5398 20H14.4602C17.2398 20 19.5 17.7398 19.5 14.9602V6.0398C19.5 3.2602 17.2398 1 14.4602 1ZM17.6398 14.9602C17.6398 16.7204 16.2 18.1602 14.4398 18.1602H5.5398C3.77964 18.1602 2.3398 16.7204 2.3398 14.9602V6.0398C2.3398 4.27964 3.77964 2.8398 5.5398 2.8398H14.4602C16.2204 2.8398 17.6602 4.27964 17.6602 6.0398V14.9602H17.6398Z" fill="black" data-astro-cid-uruca62j></path> <path d="M13.9792 5.59961H8.79957C8.27925 5.59961 7.87925 6.01993 7.87925 6.51993C7.87925 7.01993 8.29957 7.44025 8.79957 7.44025H11.7394L5.15977 14.0395C4.79961 14.3996 4.79961 14.9793 5.15977 15.3394C5.33946 15.5191 5.58009 15.6191 5.81993 15.6191C6.05977 15.6191 6.29961 15.5191 6.48009 15.3394L13.0597 8.75985V11.6996C13.0597 12.22 13.48 12.62 13.98 12.62C14.5003 12.62 14.9003 12.1996 14.9003 11.6996L14.8995 6.52005C14.8995 5.99973 14.4995 5.59961 13.9792 5.59961Z" fill="black" data-astro-cid-uruca62j></path> </g> </svg> <h3 data-astro-cid-uruca62j><a href="https://rtlstyling.com/posts/rtl-styling" target="_blank" data-astro-cid-uruca62j>RTL Styling 101 </a></h3> <p data-astro-cid-uruca62j> The most detailed guide on writing CSS for RTL layouts on the internet. </p> </div> <img src="/assets/general/rtl-styling.png" alt="" data-astro-cid-uruca62j> </article>  <article class="contribution-item" data-astro-cid-uruca62j> <div class="contribution-item__content" data-astro-cid-uruca62j> <svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg" data-astro-cid-uruca62j> <g opacity="0.5" data-astro-cid-uruca62j> <path d="M14.4602 1H5.5398C2.7602 1 0.5 3.2602 0.5 6.0398V14.9602C0.5 17.7398 2.7602 20 5.5398 20H14.4602C17.2398 20 19.5 17.7398 19.5 14.9602V6.0398C19.5 3.2602 17.2398 1 14.4602 1ZM17.6398 14.9602C17.6398 16.7204 16.2 18.1602 14.4398 18.1602H5.5398C3.77964 18.1602 2.3398 16.7204 2.3398 14.9602V6.0398C2.3398 4.27964 3.77964 2.8398 5.5398 2.8398H14.4602C16.2204 2.8398 17.6602 4.27964 17.6602 6.0398V14.9602H17.6398Z" fill="black" data-astro-cid-uruca62j></path> <path d="M13.9792 5.59961H8.79957C8.27925 5.59961 7.87925 6.01993 7.87925 6.51993C7.87925 7.01993 8.29957 7.44025 8.79957 7.44025H11.7394L5.15977 14.0395C4.79961 14.3996 4.79961 14.9793 5.15977 15.3394C5.33946 15.5191 5.58009 15.6191 5.81993 15.6191C6.05977 15.6191 6.29961 15.5191 6.48009 15.3394L13.0597 8.75985V11.6996C13.0597 12.22 13.48 12.62 13.98 12.62C14.5003 12.62 14.9003 12.1996 14.9003 11.6996L14.8995 6.52005C14.8995 5.99973 14.4995 5.59961 13.9792 5.59961Z" fill="black" data-astro-cid-uruca62j></path> </g> </svg> <h3 data-astro-cid-uruca62j><a href="https://lab.ishadeed.com/container-queries" target="_blank" data-astro-cid-uruca62j>iShadeed Lab </a></h3> <p data-astro-cid-uruca62j> A corner where I share my cutting-edge CSS experiments. </p> </div> <img src="/assets/general/ishadeed-lab.png" alt="" data-astro-cid-uruca62j> </article>  <article class="contribution-item" data-astro-cid-uruca62j> <div class="contribution-item__content" data-astro-cid-uruca62j> <svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg" data-astro-cid-uruca62j> <g opacity="0.5" data-astro-cid-uruca62j> <path d="M14.4602 1H5.5398C2.7602 1 0.5 3.2602 0.5 6.0398V14.9602C0.5 17.7398 2.7602 20 5.5398 20H14.4602C17.2398 20 19.5 17.7398 19.5 14.9602V6.0398C19.5 3.2602 17.2398 1 14.4602 1ZM17.6398 14.9602C17.6398 16.7204 16.2 18.1602 14.4398 18.1602H5.5398C3.77964 18.1602 2.3398 16.7204 2.3398 14.9602V6.0398C2.3398 4.27964 3.77964 2.8398 5.5398 2.8398H14.4602C16.2204 2.8398 17.6602 4.27964 17.6602 6.0398V14.9602H17.6398Z" fill="black" data-astro-cid-uruca62j></path> <path d="M13.9792 5.59961H8.79957C8.27925 5.59961 7.87925 6.01993 7.87925 6.51993C7.87925 7.01993 8.29957 7.44025 8.79957 7.44025H11.7394L5.15977 14.0395C4.79961 14.3996 4.79961 14.9793 5.15977 15.3394C5.33946 15.5191 5.58009 15.6191 5.81993 15.6191C6.05977 15.6191 6.29961 15.5191 6.48009 15.3394L13.0597 8.75985V11.6996C13.0597 12.22 13.48 12.62 13.98 12.62C14.5003 12.62 14.9003 12.1996 14.9003 11.6996L14.8995 6.52005C14.8995 5.99973 14.4995 5.59961 13.9792 5.59961Z" fill="black" data-astro-cid-uruca62j></path> </g> </svg> <h3 data-astro-cid-uruca62j><a href="https://github.com/shadeed/headers-css" target="_blank" data-astro-cid-uruca62j>Headers CSS </a></h3> <p data-astro-cid-uruca62j> The blueprint HTML and CSS for 17+ website headers. </p> </div> <img src="/assets/general/headers-css.png" alt="" data-astro-cid-uruca62j> </article>  </div> </section> </div><div data-astro-cid-sz7xmlte> <div class="newsletter" data-astro-cid-sz7xmlte> <div class="wrapper" data-astro-cid-sz7xmlte> <div class="newsletter-start" data-astro-cid-sz7xmlte> <div class="card" data-astro-cid-sz7xmlte> <svg width="41" height="40" viewBox="0 0 41 40" fill="none" xmlns="http://www.w3.org/2000/svg" data-astro-cid-sz7xmlte> <path d="M2.50477 36.8746C2.50945 36.8511 2.51258 36.8261 2.51727 36.8027C2.52195 36.7793 2.52508 36.7543 2.53289 36.7308L5.50477 22.3744C5.50477 22.3666 5.50946 22.3588 5.51259 22.351C5.51727 22.315 5.52821 22.2791 5.54071 22.2463C5.5454 22.2385 5.54852 22.226 5.55321 22.215C5.56883 22.1744 5.58915 22.1385 5.60946 22.1025C5.63758 22.0541 5.67352 22.0104 5.71415 21.9666C5.72196 21.9541 5.72977 21.9463 5.74227 21.9354L5.77821 21.9041L21.8438 5.8289L22.7032 4.96954L24.4985 3.16954C25.8422 1.8289 28.0219 1.8289 29.3625 3.16954L37.1625 10.9695C38.5031 12.3102 38.5031 14.493 37.1625 15.8335L35.3625 17.6289L34.5031 18.4882L18.3999 34.5974C18.3874 34.6099 18.3765 34.6209 18.3593 34.6287C18.3234 34.6599 18.2874 34.6927 18.2437 34.7162C18.2031 34.7443 18.1562 34.7646 18.1077 34.7849C18.064 34.8052 18.0156 34.8162 17.9671 34.8287C17.9515 34.8334 17.9359 34.8365 17.9234 34.8365L3.54697 37.813C3.4829 37.8287 3.41884 37.8334 3.35478 37.8334C3.31103 37.8334 3.26259 37.8287 3.21884 37.8209C3.19853 37.8209 3.17822 37.813 3.16259 37.8084C3.14228 37.8052 3.12666 37.8005 3.10635 37.7959C3.09853 37.7912 3.09072 37.7912 3.08291 37.788C3.07822 37.788 3.07822 37.788 3.0751 37.7834C3.04697 37.7709 3.01572 37.763 2.9876 37.7474C2.95166 37.7318 2.91572 37.7115 2.87979 37.688C2.83135 37.6568 2.7876 37.6193 2.74853 37.5802C2.74072 37.5755 2.73603 37.5724 2.72822 37.5646C2.71259 37.549 2.70009 37.5334 2.69228 37.5162C2.67197 37.4959 2.65635 37.4724 2.64072 37.4474C2.63291 37.4349 2.62509 37.424 2.61728 37.4115C2.59384 37.3755 2.57666 37.3396 2.56103 37.299C2.56103 37.2959 2.55634 37.2912 2.55634 37.2865C2.53603 37.2427 2.52509 37.1896 2.51259 37.1427V37.1349C2.50009 37.0834 2.49697 37.0271 2.49697 36.9755C2.49697 36.9412 2.50009 36.9052 2.50478 36.874L2.50477 36.8746ZM16.9516 33.2855L16.9563 33.1542L17.0203 30.8386L14.6125 30.8105L13.7282 30.798C13.4875 30.7933 13.2563 30.6902 13.0969 30.5058C12.9375 30.3261 12.861 30.0855 12.8844 29.8417L12.961 29.1573L13.1813 27.1449L11.0766 27.273L10.3173 27.3167C10.0657 27.3371 9.8329 27.2402 9.6579 27.0683C9.48602 26.8917 9.39383 26.6527 9.40946 26.4089L9.45321 25.6496L9.58915 23.4339L7.21259 23.4105H7.04384L5.53135 30.7073C5.5626 30.7276 5.59542 30.7557 5.62354 30.7839L9.64394 34.7979L16.9516 33.2855ZM33.2892 17.2747L23.0612 7.04669L8.40477 21.7031L10.5094 21.7234C10.7454 21.7234 10.9688 21.8234 11.1298 21.9953C11.2891 22.1672 11.3735 22.4 11.3579 22.6359L11.1813 25.5484L14.0938 25.3718C14.3501 25.3515 14.5938 25.4515 14.7704 25.6359C14.9469 25.8203 15.0297 26.0718 15.0016 26.3234L14.6969 29.0922L17.9172 29.1328C18.1485 29.1328 18.3688 29.2297 18.525 29.3969C18.6844 29.5609 18.7735 29.7844 18.7657 30.0172L18.7141 31.8578L33.2689 17.2986C33.2736 17.2908 33.2814 17.283 33.2892 17.2783L33.2892 17.2747Z" fill="#0E215D" data-astro-cid-sz7xmlte></path> </svg> <h2 class="l2-title mb-1" data-astro-cid-sz7xmlte>Join my mailing list</h2> <p data-astro-cid-sz7xmlte>
Join over <strong data-astro-cid-sz7xmlte>3400+ subscribers</strong> to explore my
            thoughts and favorite links from around the web.
</p> </div> </div> <div class="newsletter-end" data-astro-cid-sz7xmlte> <div class="content" data-astro-cid-sz7xmlte> <p data-astro-cid-sz7xmlte>I will share content that:</p> <ul data-astro-cid-sz7xmlte> <li data-astro-cid-sz7xmlte>
Clear and explain the point without too much words.
</li> <li data-astro-cid-sz7xmlte>Contains at least one figure or clear example.</li> <li data-astro-cid-sz7xmlte>
Make you learn something new, or at least to remind you
              of it.
</li> </ul> <p data-astro-cid-sz7xmlte>
Rest assure that you will receive top notch quality
            content recommendations.
</p> </div> <form action="https://buttondown.email/api/emails/embed-subscribe/ishadeed" method="post" target="popupwindow" onsubmit="window.open('https://buttondown.email/ishadeed', 'popupwindow')" class="embeddable-buttondown-form" data-astro-cid-sz7xmlte> <label for="bd-email" data-astro-cid-sz7xmlte>Your email</label> <input type="email" name="email" id="bd-email" data-astro-cid-sz7xmlte> <input type="submit" value="Subscribe" data-astro-cid-sz7xmlte> </form> </div> </div> </div> <footer class="c-footer" data-astro-cid-sz7xmlte> <div class="wrapper" data-astro-cid-sz7xmlte> <div data-astro-cid-sz7xmlte> <img class="avatar" src="/assets/shadeed.jpg" alt="" data-astro-cid-sz7xmlte> <p style="margin-top: 8px;" data-astro-cid-sz7xmlte>
That's the end of <em data-astro-cid-sz7xmlte>Ahmad Shadeed's website</em>.
</p> </div> <nav class="c-nav" data-astro-cid-sz7xmlte> <div class="c-nav__wrapper" data-astro-cid-sz7xmlte> <ul class="c-nav" data-astro-cid-sz7xmlte> <li class="c-nav__item home is-active" data-name="home" data-astro-cid-sz7xmlte> <a href="/" data-astro-cid-sz7xmlte>Home</a> </li> <li class="c-nav__item articles" data-name="articles" data-astro-cid-sz7xmlte> <a href="/articles" data-astro-cid-sz7xmlte>Articles</a> </li> <li class="c-nav__item work" data-name="work" data-astro-cid-sz7xmlte> <a href="/work" data-astro-cid-sz7xmlte>Work</a> </li> <li class="c-nav__item services" data-name="services" data-astro-cid-sz7xmlte> <a href="/services" data-astro-cid-sz7xmlte>Services</a> </li> <li class="c-nav__item about" data-name="about" data-astro-cid-sz7xmlte> <a href="/about" data-astro-cid-sz7xmlte>About</a> </li> <li class="c-nav__item speaking" data-name="speaking" data-astro-cid-sz7xmlte> <a href="/speaking" data-astro-cid-sz7xmlte>Speaking</a> </li> <li class="c-nav__item contact" data-name="contact" data-astro-cid-sz7xmlte> <a href="/contact" data-astro-cid-sz7xmlte>Contact</a> </li> </ul> </div> </nav> <div data-astro-cid-sz7xmlte> <h3 class="social-title sr-only" data-astro-cid-sz7xmlte>Find me online</h3> <ul class="social-links" data-astro-cid-sz7xmlte> <li data-astro-cid-sz7xmlte> <a href="https://bsky.app/profile/ishadeed.com" target="_blank" data-astro-cid-sz7xmlte> <svg xmlns="http://www.w3.org/2000/svg" width="33" height="32" fill="none" viewBox="0 0 33 32" data-astro-cid-sz7xmlte> <title>BlueSky</title> <g clipPath="url(#clip0_2523_1385)" data-astro-cid-sz7xmlte> <path d="M6.936 3.922c3.67 2.754 7.615 8.339 9.064 11.336 1.449-2.997 5.395-8.582 9.064-11.336C27.71 1.935 32 .397 32 5.29c0 .977-.56 8.21-.889 9.383-1.142 4.082-5.304 5.123-9.007 4.493 6.472 1.102 8.118 4.75 4.563 8.398-6.753 6.93-9.706-1.738-10.462-3.959-.14-.407-.204-.598-.205-.436-.001-.162-.066.029-.205.436-.756 2.221-3.709 10.889-10.462 3.96-3.555-3.649-1.909-7.297 4.563-8.399-3.703.63-7.865-.41-9.007-4.493C.56 13.5 0 6.267 0 5.29 0 .397 4.29 1.935 6.936 3.922" data-astro-cid-sz7xmlte></path> </g> <defs data-astro-cid-sz7xmlte> <clipPath id="clip0_2523_1385" data-astro-cid-sz7xmlte> <path fill="#fff" d="M0 2h32v28.225H0z" data-astro-cid-sz7xmlte></path> </clipPath> </defs> </svg> </a> </li> <li data-astro-cid-sz7xmlte> <a href="https://twitter.com/shadeed9" target="_blank" data-astro-cid-sz7xmlte> <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" data-astro-cid-sz7xmlte> <title>X</title> <path d="M36.6526 3.8078H43.3995L28.6594 20.6548L46 43.5797H32.4225L21.7881 29.6759L9.61989 43.5797H2.86886L18.6349 25.56L2 3.8078H15.9222L25.5348 16.5165L36.6526 3.8078ZM34.2846 39.5414H38.0232L13.8908 7.63406H9.87892L34.2846 39.5414Z" fill="inherit" data-astro-cid-sz7xmlte></path> </svg> </a> </li> <li data-astro-cid-sz7xmlte> <a rel="me" href="https://front-end.social/@shadeed9" target="_blank" data-astro-cid-sz7xmlte><svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" data-astro-cid-sz7xmlte> <title>Matsodon</title> <path d="M33.57 36.585C39.618 35.865 44.88 32.16 45.54 28.776C46.584 23.442 46.5 15.759 46.5 15.759C46.5 5.349 39.642 2.295 39.642 2.295C36.186 0.714 30.249 0.051 24.081 0H23.931C17.76 0.051 11.826 0.714 8.37 2.295C8.37 2.295 1.515 5.346 1.515 15.759L1.509 17.745C1.497 19.665 1.488 21.795 1.542 24.018C1.791 34.2 3.42 44.238 12.882 46.728C17.244 47.877 20.991 48.117 24.009 47.952C29.478 47.652 32.55 46.011 32.55 46.011L32.37 42.06C32.37 42.06 28.461 43.29 24.069 43.14C19.719 42.99 15.129 42.672 14.424 37.356C14.3602 36.8625 14.3271 36.3656 14.325 35.868C14.325 35.868 18.597 36.906 24.009 37.152C27.318 37.302 30.42 36.96 33.573 36.585H33.57ZM38.409 29.175H33.39V16.935C33.39 14.358 32.298 13.05 30.117 13.05C27.705 13.05 26.496 14.601 26.496 17.673V24.372H21.504V17.67C21.504 14.598 20.295 13.047 17.883 13.047C15.702 13.047 14.61 14.355 14.61 16.935V29.172H9.591V16.566C9.591 13.99 10.251 11.944 11.571 10.428C12.939 8.913 14.727 8.136 16.95 8.136C19.518 8.136 21.462 9.12 22.749 11.085L24 13.17L25.251 11.085C26.538 9.12 28.482 8.136 31.053 8.136C33.273 8.136 35.061 8.913 36.426 10.428C37.75 11.942 38.411 13.988 38.409 16.566V29.175Z" fill="inherit" data-astro-cid-sz7xmlte></path> </svg> </a> </li> <li data-astro-cid-sz7xmlte> <a href="https://codepen.io/shadeed/" target="_blank" data-astro-cid-sz7xmlte> <svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512" data-astro-cid-sz7xmlte> <title>Codepen</title> <path d="M502.3 159.7l-234-156c-8-4.9-16.5-5-24.6 0l-234 156C3.7 163.7 0 170.8 0 178v156c0 7.1 3.7 14.3 9.7 18.3l234 156c8 4.9 16.5 5 24.6 0l234-156c6-4 9.7-11.1 9.7-18.3V178c0-7.1-3.7-14.3-9.7-18.3zM278 63.1l172.3 114.9-76.9 51.4L278 165.7V63.1zm-44 0v102.6l-95.4 63.7-76.9-51.4L234 63.1zM44 219.1l55.1 36.9L44 292.8v-73.7zm190 229.7L61.7 334l76.9-51.4L234 346.3v102.6zm22-140.9l-77.7-52 77.7-52 77.7 52-77.7 52zm22 140.9V346.3l95.4-63.7 76.9 51.4L278 448.8zm190-156l-55.1-36.9L468 219.1v73.7z" data-astro-cid-sz7xmlte></path></svg> </a> </li> <li data-astro-cid-sz7xmlte> <a href="https://github.com/shadeed" target="_blank" data-astro-cid-sz7xmlte><svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" data-astro-cid-sz7xmlte> <title>Github</title> <g clip-path="url(#clip0_1374_184)" data-astro-cid-sz7xmlte> <path fill-rule="evenodd" clip-rule="evenodd" d="M24.0199 0C10.7375 0 0 10.8167 0 24.1983C0 34.895 6.87988 43.9495 16.4241 47.1542C17.6174 47.3951 18.0545 46.6335 18.0545 45.9929C18.0545 45.4319 18.0151 43.509 18.0151 41.5055C11.3334 42.948 9.94198 38.6209 9.94198 38.6209C8.86818 35.8164 7.27715 35.0956 7.27715 35.0956C5.09022 33.6132 7.43645 33.6132 7.43645 33.6132C9.86233 33.7735 11.1353 36.0971 11.1353 36.0971C13.2824 39.7827 16.7422 38.7413 18.1341 38.1002C18.3328 36.5377 18.9695 35.456 19.6455 34.8552C14.3163 34.2942 8.70937 32.211 8.70937 22.9161C8.70937 20.2719 9.66321 18.1086 11.1746 16.4261C10.9361 15.8253 10.1008 13.3409 11.4135 10.0157C11.4135 10.0157 13.4417 9.3746 18.0146 12.4996C19.9725 11.9699 21.9916 11.7005 24.0199 11.6982C26.048 11.6982 28.1154 11.979 30.0246 12.4996C34.5981 9.3746 36.6262 10.0157 36.6262 10.0157C37.9389 13.3409 37.1031 15.8253 36.8646 16.4261C38.4158 18.1086 39.3303 20.2719 39.3303 22.9161C39.3303 32.211 33.7234 34.2539 28.3544 34.8552C29.2296 35.6163 29.9848 37.0584 29.9848 39.3421C29.9848 42.5871 29.9454 45.1915 29.9454 45.9924C29.9454 46.6335 30.383 47.3951 31.5758 47.1547C41.12 43.9491 47.9999 34.895 47.9999 24.1983C48.0392 10.8167 37.2624 0 24.0199 0Z" fill="inherit" data-astro-cid-sz7xmlte></path> </g> <defs data-astro-cid-sz7xmlte> <clipPath id="clip0_1374_184" data-astro-cid-sz7xmlte> <rect width="48" height="48" fill="white" data-astro-cid-sz7xmlte></rect> </clipPath> </defs> </svg> </a> </li> <li data-astro-cid-sz7xmlte> <a href="https://www.threads.net/@shadeed9" target="_blank" data-astro-cid-sz7xmlte><svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" data-astro-cid-sz7xmlte> <title>Threads</title> <path d="M35.3843 22.2471C35.1775 22.148 34.9675 22.0526 34.7547 21.9613C34.3842 15.1346 30.654 11.2262 24.3905 11.1862C24.3621 11.1861 24.3339 11.1861 24.3055 11.1861C20.5591 11.1861 17.4433 12.7852 15.5255 15.6952L18.9702 18.0582C20.4029 15.8846 22.6513 15.4212 24.3071 15.4212C24.3263 15.4212 24.3455 15.4212 24.3644 15.4214C26.4268 15.4345 27.983 16.0342 28.9902 17.2035C29.7232 18.0548 30.2135 19.2313 30.4562 20.716C28.6277 20.4052 26.6502 20.3096 24.5362 20.4308C18.5812 20.7738 14.7528 24.247 15.0099 29.073C15.1404 31.521 16.3599 33.627 18.4438 35.0028C20.2056 36.1658 22.4747 36.7345 24.8331 36.6058C27.9475 36.435 30.3907 35.2468 32.0952 33.074C33.3897 31.424 34.2085 29.2857 34.57 26.5915C36.0542 27.4872 37.1542 28.666 37.7617 30.083C38.7947 32.4918 38.855 36.45 35.6253 39.677C32.7955 42.504 29.394 43.727 24.2534 43.7648C18.551 43.7225 14.2384 41.8938 11.4345 38.3293C8.80887 34.9915 7.45192 30.1705 7.4013 24C7.45192 17.8295 8.80887 13.0084 11.4345 9.67068C14.2384 6.10623 18.551 4.2775 24.2533 4.23513C29.997 4.27783 34.3848 6.11535 37.296 9.697C38.7235 11.4534 39.7998 13.6622 40.5093 16.2376L44.546 15.1606C43.686 11.9906 42.3327 9.25893 40.4912 6.9935C36.759 2.40167 31.3005 0.048787 24.2674 0H24.2392C17.2204 0.0486175 11.823 2.41045 8.19707 7.01982C4.97047 11.1216 3.3061 16.8289 3.25017 23.9831L3.25 24L3.25017 24.0169C3.3061 31.171 4.97047 36.8785 8.19707 40.9803C11.823 45.5895 17.2204 47.9515 24.2392 48H24.2674C30.5075 47.9568 34.906 46.323 38.5295 42.7028C43.2702 37.9665 43.1275 32.0298 41.565 28.3853C40.444 25.7717 38.3068 23.649 35.3843 22.2471ZM24.6101 32.3768C22.0001 32.5238 19.2886 31.3523 19.1549 28.843C19.0558 26.9825 20.479 24.9065 24.7703 24.6592C25.2617 24.6309 25.744 24.617 26.2178 24.617C27.7765 24.617 29.2347 24.7684 30.5605 25.0583C30.066 31.2338 27.1655 32.2365 24.6101 32.3768Z" fill="inherit" data-astro-cid-sz7xmlte></path> </svg> </a> </li> <li data-astro-cid-sz7xmlte> <a href="https://www.instagram.com/shadeed9" target="_blank" data-astro-cid-sz7xmlte> <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" data-astro-cid-sz7xmlte> <title>Instagram</title> <g clip-path="url(#clip0_1374_186)" data-astro-cid-sz7xmlte> <path d="M24 4.32187C30.4125 4.32187 31.1719 4.35 33.6938 4.4625C36.0375 4.56562 37.3031 4.95938 38.1469 5.2875C39.2625 5.71875 40.0688 6.24375 40.9031 7.07812C41.7469 7.92188 42.2625 8.71875 42.6938 9.83438C43.0219 10.6781 43.4156 11.9531 43.5188 14.2875C43.6313 16.8187 43.6594 17.5781 43.6594 23.9813C43.6594 30.3938 43.6313 31.1531 43.5188 33.675C43.4156 36.0188 43.0219 37.2844 42.6938 38.1281C42.2625 39.2438 41.7375 40.05 40.9031 40.8844C40.0594 41.7281 39.2625 42.2438 38.1469 42.675C37.3031 43.0031 36.0281 43.3969 33.6938 43.5C31.1625 43.6125 30.4031 43.6406 24 43.6406C17.5875 43.6406 16.8281 43.6125 14.3063 43.5C11.9625 43.3969 10.6969 43.0031 9.85313 42.675C8.7375 42.2438 7.93125 41.7188 7.09688 40.8844C6.25313 40.0406 5.7375 39.2438 5.30625 38.1281C4.97813 37.2844 4.58438 36.0094 4.48125 33.675C4.36875 31.1438 4.34063 30.3844 4.34063 23.9813C4.34063 17.5688 4.36875 16.8094 4.48125 14.2875C4.58438 11.9437 4.97813 10.6781 5.30625 9.83438C5.7375 8.71875 6.2625 7.9125 7.09688 7.07812C7.94063 6.23438 8.7375 5.71875 9.85313 5.2875C10.6969 4.95938 11.9719 4.56562 14.3063 4.4625C16.8281 4.35 17.5875 4.32187 24 4.32187ZM24 0C17.4844 0 16.6688 0.028125 14.1094 0.140625C11.5594 0.253125 9.80625 0.665625 8.2875 1.25625C6.70313 1.875 5.3625 2.69062 4.03125 4.03125C2.69063 5.3625 1.875 6.70313 1.25625 8.27813C0.665625 9.80625 0.253125 11.55 0.140625 14.1C0.028125 16.6687 0 17.4844 0 24C0 30.5156 0.028125 31.3313 0.140625 33.8906C0.253125 36.4406 0.665625 38.1938 1.25625 39.7125C1.875 41.2969 2.69063 42.6375 4.03125 43.9688C5.3625 45.3 6.70313 46.125 8.27813 46.7344C9.80625 47.325 11.55 47.7375 14.1 47.85C16.6594 47.9625 17.475 47.9906 23.9906 47.9906C30.5063 47.9906 31.3219 47.9625 33.8813 47.85C36.4313 47.7375 38.1844 47.325 39.7031 46.7344C41.2781 46.125 42.6188 45.3 43.95 43.9688C45.2813 42.6375 46.1063 41.2969 46.7156 39.7219C47.3063 38.1938 47.7188 36.45 47.8313 33.9C47.9438 31.3406 47.9719 30.525 47.9719 24.0094C47.9719 17.4938 47.9438 16.6781 47.8313 14.1188C47.7188 11.5688 47.3063 9.81563 46.7156 8.29688C46.125 6.70312 45.3094 5.3625 43.9688 4.03125C42.6375 2.7 41.2969 1.875 39.7219 1.26562C38.1938 0.675 36.45 0.2625 33.9 0.15C31.3313 0.028125 30.5156 0 24 0Z" fill="inherit" data-astro-cid-sz7xmlte></path> <path d="M24 11.6719C17.1938 11.6719 11.6719 17.1938 11.6719 24C11.6719 30.8062 17.1938 36.3281 24 36.3281C30.8062 36.3281 36.3281 30.8062 36.3281 24C36.3281 17.1938 30.8062 11.6719 24 11.6719ZM24 31.9969C19.5844 31.9969 16.0031 28.4156 16.0031 24C16.0031 19.5844 19.5844 16.0031 24 16.0031C28.4156 16.0031 31.9969 19.5844 31.9969 24C31.9969 28.4156 28.4156 31.9969 24 31.9969Z" fill="inherit" data-astro-cid-sz7xmlte></path> <path d="M39.6937 11.1844C39.6937 12.7782 38.4 14.0625 36.8156 14.0625C35.2219 14.0625 33.9375 12.7688 33.9375 11.1844C33.9375 9.59065 35.2313 8.30627 36.8156 8.30627C38.4 8.30627 39.6937 9.60003 39.6937 11.1844Z" fill="inherit" data-astro-cid-sz7xmlte></path> </g> <defs data-astro-cid-sz7xmlte> <clipPath id="clip0_1374_186" data-astro-cid-sz7xmlte> <rect width="48" height="48" fill="white" data-astro-cid-sz7xmlte></rect> </clipPath> </defs> </svg> </a> </li> <li data-astro-cid-sz7xmlte> <a href="https://ishadeed.com/feed.xml" target="_blank" data-astro-cid-sz7xmlte><svg width="48" height="49" viewBox="0 0 48 49" fill="none" xmlns="http://www.w3.org/2000/svg" data-astro-cid-sz7xmlte> <title>RSS feed</title> <g clip-path="url(#clip0_1374_197)" data-astro-cid-sz7xmlte> <path fill-rule="evenodd" clip-rule="evenodd" d="M25.2512 47.3869C24.9352 34.0699 14.0461 23.4064 0.75116 23.4064V14.5176C18.8945 14.5176 33.7075 29.0548 34.1375 47.176L25.2512 47.3869Z" fill="inherit" data-astro-cid-sz7xmlte></path> <path fill-rule="evenodd" clip-rule="evenodd" d="M39.7238 47.0039C39.2745 25.8295 22.0213 8.81006 0.75116 8.81006V-0.0787354C26.883 -0.0787354 48.0593 20.8324 48.6106 46.8154L39.7238 47.0039Z" fill="inherit" data-astro-cid-sz7xmlte></path> <path d="M11.6048 40.7941C11.6048 45.952 3.8725 45.952 3.8725 40.7941C3.8725 35.6406 11.6048 35.6406 11.6048 40.7941Z" fill="inherit" data-astro-cid-sz7xmlte></path> <path fill-rule="evenodd" clip-rule="evenodd" d="M8.30914 40.7947C8.3091 40.7945 8.30905 40.7943 8.309 40.7942C8.30286 40.7725 8.29287 40.7426 8.2769 40.706C8.22368 40.5843 8.13751 40.4663 8.03433 40.3745C7.93738 40.2883 7.85337 40.2494 7.80874 40.2335C7.76626 40.2184 7.74429 40.2182 7.73866 40.2182C7.73303 40.2182 7.71106 40.2184 7.66858 40.2335C7.62395 40.2494 7.53994 40.2883 7.44299 40.3745C7.33981 40.4663 7.25363 40.5843 7.20042 40.706C7.18444 40.7426 7.17446 40.7725 7.16832 40.7942C7.16827 40.7943 7.16822 40.7945 7.16817 40.7947C7.17436 40.8167 7.18452 40.8474 7.20098 40.885C7.25453 41.0073 7.34108 41.1257 7.44438 41.2175C7.54144 41.3037 7.62538 41.3425 7.6697 41.3583C7.71188 41.3733 7.73346 41.3734 7.73866 41.3734C7.74386 41.3734 7.76544 41.3733 7.80762 41.3583C7.85194 41.3425 7.93588 41.3037 8.03294 41.2175C8.13624 41.1257 8.22279 41.0073 8.27634 40.885C8.2928 40.8474 8.30296 40.8167 8.30914 40.7947ZM13.3489 34.5731C15.0692 36.1019 16.0492 38.2993 16.0492 40.7942C16.0492 43.2887 15.0702 45.4867 13.3503 47.0164C11.712 48.4735 9.65287 49.107 7.73866 49.107C5.82445 49.107 3.76531 48.4735 2.12702 47.0164C0.407124 45.4867 -0.571899 43.2887 -0.571899 40.7942C-0.571899 38.2993 0.408135 36.1019 2.12842 34.5731C3.76681 33.1172 5.82547 32.4846 7.73866 32.4846C9.65185 32.4846 11.7105 33.1172 13.3489 34.5731Z" fill="inherit" data-astro-cid-sz7xmlte></path> </g> <defs data-astro-cid-sz7xmlte> <clipPath id="clip0_1374_197" data-astro-cid-sz7xmlte> <rect width="48" height="48.8421" fill="white" data-astro-cid-sz7xmlte></rect> </clipPath> </defs> </svg> </a> </li> </ul> </div> <div class="hey" data-astro-cid-sz7xmlte> <p aria-hidden="true" class="emoji" data-astro-cid-sz7xmlte>&#x1F44B;</p> <p data-astro-cid-sz7xmlte>Come and say hello</p> <div id="footerEmail" class="email" data-astro-cid-sz7xmlte> <p data-astro-cid-sz7xmlte><em data-astro-cid-sz7xmlte><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="751d100c351c061d14111010115b161a18">[email&#160;protected]</a></em></p> <button id="copyEmail" aria-label="Copy email" data-astro-cid-sz7xmlte><svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" data-astro-cid-sz7xmlte> <path fill-rule="evenodd" clip-rule="evenodd" d="M9.38896 4.16022C6.50272 4.16022 4.16016 6.50272 4.16016 9.38902V14.8927C4.16016 17.7789 6.50265 20.1215 9.38896 20.1215V18.4702C7.41145 18.4702 5.81136 16.8702 5.81136 14.8926V9.38896C5.81136 7.41145 7.41136 5.81136 9.38896 5.81136H14.8926C16.8701 5.81136 18.4702 7.41136 18.4702 9.38896H20.1215C20.1215 6.50272 17.779 4.16016 14.8927 4.16016L9.38896 4.16022ZM17.1016 11.8729C14.2154 11.8729 11.8728 14.2154 11.8728 17.1017V22.6053C11.8728 25.4916 14.2153 27.8341 17.1016 27.8341H22.6053C25.4915 27.8341 27.8341 25.4916 27.8341 22.6053V17.1017C27.8341 14.2154 25.4916 11.8729 22.6053 11.8729H17.1016ZM13.524 17.1017C13.524 15.1242 15.124 13.5241 17.1016 13.5241H22.6053C24.5828 13.5241 26.1829 15.1241 26.1829 17.1017V22.6053C26.1829 24.5828 24.5829 26.1829 22.6053 26.1829H17.1016C15.1241 26.1829 13.524 24.5829 13.524 22.6053V17.1017Z" fill="white" data-astro-cid-sz7xmlte></path> </svg> </button> </div> <p class="and" data-astro-cid-sz7xmlte>&</p> <p class="grab" data-astro-cid-sz7xmlte>
Let's grab a coffee
<img aria-hidden="true" src="/assets/general/coffee/cup-4.png" alt="Coffee cup" data-astro-cid-sz7xmlte> </p> </div> </div> </footer> </div>  <script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script>
  document.addEventListener("DOMContentLoaded", () => {
    const copyEmail = document.querySelector("#copyEmail")

    copyEmail.addEventListener("click", function () {
      navigator.clipboard.writeText("hey@ishadeed.com")
    })
  })
</script></main> </body></html>