Ahmad Shadeed
@ishadeed.com
Building a CSS course: layoutmaestro.ishadeed.com. Design Engineer. Author of debuggingcss.com • Blogging at ishadeed.com. Made defensivecss.dev, rtlstyling.com, and a11ymatters.com. @GoogleDevExpert in Web UI. 📍 Tulkarm, Palestine.
Pinned
Ahmad Shadeed
@ishadeed.com
· May 25
The Layout Maestro
An interactive course focused on how to think, build, and test a layout with real-world examples.
layoutmaestro.ishadeed.com
I’m working on a CSS course: The Layout Maestro.
👉 Sign up for updates: layoutmaestro.ishadeed.com
📓 Read the note: ishadeed.com/note/layout-...
👉 Sign up for updates: layoutmaestro.ishadeed.com
📓 Read the note: ishadeed.com/note/layout-...
Anchor positioning 😍
Firefox 147 just landed & it's pretty huge in terms of web features:
🎉 CSS anchor positioning
🎉 The navigation API
🎉 View transition types
🎉 Brotli support in Compression/DecompressionStream
🎉 CSS module imports
And more!
https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/147
🎉 CSS anchor positioning
🎉 The navigation API
🎉 View transition types
🎉 Brotli support in Compression/DecompressionStream
🎉 CSS module imports
And more!
https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/147
Firefox 147 release notes for developers (Beta) - Mozilla | MDN
This article provides information about the changes in Firefox 147 that affect developers.
Firefox 147 is the current Beta version of Firefox and ships on January 13, 2026.
developer.mozilla.org
January 13, 2026 at 2:23 PM
Anchor positioning 😍
🇩🇪☕️
To my friends in Germany: I need your top specialty coffee roaster recommendations! 😀
My sis is finishing her postdoc and coming back in early Feb and I’m using 2kg of her luggage for coffee. I have The Barn and Bonanza on my list.
What else should I add? 🤔
To my friends in Germany: I need your top specialty coffee roaster recommendations! 😀
My sis is finishing her postdoc and coming back in early Feb and I’m using 2kg of her luggage for coffee. I have The Barn and Bonanza on my list.
What else should I add? 🤔
January 13, 2026 at 8:17 AM
🇩🇪☕️
To my friends in Germany: I need your top specialty coffee roaster recommendations! 😀
My sis is finishing her postdoc and coming back in early Feb and I’m using 2kg of her luggage for coffee. I have The Barn and Bonanza on my list.
What else should I add? 🤔
To my friends in Germany: I need your top specialty coffee roaster recommendations! 😀
My sis is finishing her postdoc and coming back in early Feb and I’m using 2kg of her luggage for coffee. I have The Barn and Bonanza on my list.
What else should I add? 🤔
Reposted by Ahmad Shadeed
Made a lil' library:
codepen.github.io/slideVars/
Automatically detects CSS custom properties on the :root/html and gives you controls for adjusting them. (But it's also as configurable as you want it to be.)
codepen.github.io/slideVars/
Automatically detects CSS custom properties on the :root/html and gives you controls for adjusting them. (But it's also as configurable as you want it to be.)
January 12, 2026 at 6:52 PM
Made a lil' library:
codepen.github.io/slideVars/
Automatically detects CSS custom properties on the :root/html and gives you controls for adjusting them. (But it's also as configurable as you want it to be.)
codepen.github.io/slideVars/
Automatically detects CSS custom properties on the :root/html and gives you controls for adjusting them. (But it's also as configurable as you want it to be.)
This feature in @developer.chrome.com's DevTools is so helpful. Every time I get stuck on a calc() or other CSS functions, I solve the bug much quicker with it.
Thanks to everyone who worked on this! 👌
Thanks to everyone who worked on this! 👌
January 9, 2026 at 9:21 AM
This feature in @developer.chrome.com's DevTools is so helpful. Every time I get stuck on a calc() or other CSS functions, I solve the bug much quicker with it.
Thanks to everyone who worked on this! 👌
Thanks to everyone who worked on this! 👌
Morning everyone! I’ve been away from the blog and social media, but the good news is that my CSS layout course is shaping up! I’ll send an update within this month.
If you are not subscribed to the course newsletter yet, you definitely should (Or send it to a friend) 😄
layoutmaestro.ishadeed.com
If you are not subscribed to the course newsletter yet, you definitely should (Or send it to a friend) 😄
layoutmaestro.ishadeed.com
January 6, 2026 at 7:43 AM
Morning everyone! I’ve been away from the blog and social media, but the good news is that my CSS layout course is shaping up! I’ll send an update within this month.
If you are not subscribed to the course newsletter yet, you definitely should (Or send it to a friend) 😄
layoutmaestro.ishadeed.com
If you are not subscribed to the course newsletter yet, you definitely should (Or send it to a friend) 😄
layoutmaestro.ishadeed.com
I'm thinking of a thing in 2026 which is to start a weekly office hour to talk with the web community about anything CSS or design-related.
Who is up for that? 😃
Who is up for that? 😃
December 30, 2025 at 2:13 PM
I'm thinking of a thing in 2026 which is to start a weekly office hour to talk with the web community about anything CSS or design-related.
Who is up for that? 😃
Who is up for that? 😃
I'm working on a CSS layout course for early 2026 called The Layout Maestro.
It’s a dump of how my brain approaches and builds CSS layouts.. 😊
layoutmaestro.ishadeed.com
It’s a dump of how my brain approaches and builds CSS layouts.. 😊
layoutmaestro.ishadeed.com
The Layout Maestro
An interactive course focused on how to think, build, and test a layout with real-world examples.
layoutmaestro.ishadeed.com
December 26, 2025 at 9:03 AM
I'm working on a CSS layout course for early 2026 called The Layout Maestro.
It’s a dump of how my brain approaches and builds CSS layouts.. 😊
layoutmaestro.ishadeed.com
It’s a dump of how my brain approaches and builds CSS layouts.. 😊
layoutmaestro.ishadeed.com
omg what I just saw? an AI video for showing a cutting edge CSS feature 🤯
I couldn't even complete watching it :/
Why not just ask a human to create a demo?
I couldn't even complete watching it :/
Why not just ask a human to create a demo?
It's really sad that Chrome laid off one of the world's best CSS developer-designers, and now they have to fake demos of web features. youtu.be/d8J0vs-bEPE?...
Create Scroll-Triggered Animations with CSS
YouTube video by Chrome for Developers
youtu.be
December 22, 2025 at 5:46 AM
omg what I just saw? an AI video for showing a cutting edge CSS feature 🤯
I couldn't even complete watching it :/
Why not just ask a human to create a demo?
I couldn't even complete watching it :/
Why not just ask a human to create a demo?
Reposted by Ahmad Shadeed
Scroll-Triggered Animations … with nothing but CSS … oh yeah 🤩
codepen.io/bramus/pen/Z...
(Coming to Chrome 145. Blogpost in the works.)
codepen.io/bramus/pen/Z...
(Coming to Chrome 145. Blogpost in the works.)
December 12, 2025 at 10:04 AM
Scroll-Triggered Animations … with nothing but CSS … oh yeah 🤩
codepen.io/bramus/pen/Z...
(Coming to Chrome 145. Blogpost in the works.)
codepen.io/bramus/pen/Z...
(Coming to Chrome 145. Blogpost in the works.)
ohh, I can't wait to give this a try. This is so exciting that I'm pausing my work and updating macOS NOW to get the latest Safari TP. 🤩
Have you been wishing masonry layouts would just hurry up and arrive in CSS?? Well, happy holidays!
webkit.org/blog/17660/i...
webkit.org/blog/17660/i...
Introducing CSS Grid Lanes
It’s here!
webkit.org
December 20, 2025 at 6:05 PM
ohh, I can't wait to give this a try. This is so exciting that I'm pausing my work and updating macOS NOW to get the latest Safari TP. 🤩
Me writing git commits for my CSS layout course 😆
December 17, 2025 at 6:21 PM
Me writing git commits for my CSS layout course 😆
I needed to know the number of words in my CSS course to get a quote from the editor. Since the course is a mixed format (text, media, demos), it's not easy.
I used Cursor to count them and told it to exclude (component imports, syntax/code, etc.).
The result ended up 4x what I expected 😅
I used Cursor to count them and told it to exclude (component imports, syntax/code, etc.).
The result ended up 4x what I expected 😅
December 16, 2025 at 8:54 AM
I needed to know the number of words in my CSS course to get a quote from the editor. Since the course is a mixed format (text, media, demos), it's not easy.
I used Cursor to count them and told it to exclude (component imports, syntax/code, etc.).
The result ended up 4x what I expected 😅
I used Cursor to count them and told it to exclude (component imports, syntax/code, etc.).
The result ended up 4x what I expected 😅
Hot chocolate, cookies.. can get it more chocolately than that?
Winter vibes ☕
Winter vibes ☕
December 14, 2025 at 7:11 PM
Hot chocolate, cookies.. can get it more chocolately than that?
Winter vibes ☕
Winter vibes ☕
In one of my course layouts, I used Subgrid in a way I never imagined. If it weren’t for my CSS layout course, I’d have shared it already. So excited.
Sign up to hear about it: layoutmaestro.ishadeed.com
Sign up to hear about it: layoutmaestro.ishadeed.com
The Layout Maestro
An interactive course focused on how to think, build, and test a layout with real-world examples.
layoutmaestro.ishadeed.com
December 11, 2025 at 6:17 AM
In one of my course layouts, I used Subgrid in a way I never imagined. If it weren’t for my CSS layout course, I’d have shared it already. So excited.
Sign up to hear about it: layoutmaestro.ishadeed.com
Sign up to hear about it: layoutmaestro.ishadeed.com
Great one! Lynn annual website redesign is very inspiring. 👌
You too can make a tiny, fixed-width website in the year of our lord 2025 ⚡️ lynnandtonic.com
Lynn Fisher
Lynn Fisher is a web designer, CSS developer, and artist from Phoenix, Arizona.
lynnandtonic.com
December 8, 2025 at 7:57 PM
Great one! Lynn annual website redesign is very inspiring. 👌
100% this! I've putting Replit and Cursor with different models to test and it's okay for typical UIs (media components, list, etc), but it's *very* bad for tricky UIs like the one Josh shared.
Learn CSS.
Learn CSS.
Here’s a question I get a lot:
> “Now that AI can generate front-end UIs for us, what’s the point of learning CSS ourselves?”
I think there are lots of reasons, including that you can use AI much more effectively if you understand CSS yourself.
But is that actually true? Let’s discuss. 🧵
> “Now that AI can generate front-end UIs for us, what’s the point of learning CSS ourselves?”
I think there are lots of reasons, including that you can use AI much more effectively if you understand CSS yourself.
But is that actually true? Let’s discuss. 🧵
November 30, 2025 at 4:44 PM
100% this! I've putting Replit and Cursor with different models to test and it's okay for typical UIs (media components, list, etc), but it's *very* bad for tricky UIs like the one Josh shared.
Learn CSS.
Learn CSS.
Debugging CSS has helped thousands of developers and designers fix CSS issues more logically and faster. The current edition is $19.99.
I’m exploring a potential update, and anyone who buys the book in 2025 will get a discount if a new edition ships.
debuggingcss.com
I’m exploring a potential update, and anyone who buys the book in 2025 will get a discount if a new edition ships.
debuggingcss.com
Master the Skill of Debugging CSS
An ebook with lots of tips and techniques on how to debug CSS the right way with easy and studied methods.
debuggingcss.com
November 29, 2025 at 3:37 PM
Debugging CSS has helped thousands of developers and designers fix CSS issues more logically and faster. The current edition is $19.99.
I’m exploring a potential update, and anyone who buys the book in 2025 will get a discount if a new edition ships.
debuggingcss.com
I’m exploring a potential update, and anyone who buys the book in 2025 will get a discount if a new edition ships.
debuggingcss.com
My morning coffee! Good day 😊
November 28, 2025 at 7:02 AM
My morning coffee! Good day 😊
Reposted by Ahmad Shadeed
10 powerful ways to use #CSS variables
a non-exhaustive list, but a good one nonetheless!
nerdy.dev/custom-prop-...
a non-exhaustive list, but a good one nonetheless!
nerdy.dev/custom-prop-...
10 powerful ways to use CSS variables · January 26, 2023
Tokens, house props, adaptive props, pseudo-private props, partial props, mixin props, swappy props, style query props, meta lang props and typed props. Oh my!
nerdy.dev
December 3, 2024 at 11:49 PM
10 powerful ways to use #CSS variables
a non-exhaustive list, but a good one nonetheless!
nerdy.dev/custom-prop-...
a non-exhaustive list, but a good one nonetheless!
nerdy.dev/custom-prop-...
A thread worth reading! Going through the replies is eye-opening and refreshing.
CSS is so powerful now, it's amazing looking through older CSS and seeing what can be replaced with a one-liner. I'm on the hunt for snippets that used to be multiple lines of CSS that can now be done in one. Show me what you got!
November 26, 2025 at 7:23 PM
A thread worth reading! Going through the replies is eye-opening and refreshing.
Reposted by Ahmad Shadeed
Just another reminder that you get a 50% coupon code with every purchase during the @piccalil.li Black Friday period *and* every course is £60 (~ $80) cheaper.
If you wanted two courses and used your 50% coupon, you'd save over £180 (~ $240) off the full price!
High quality, affordable education
If you wanted two courses and used your 50% coupon, you'd save over £180 (~ $240) off the full price!
High quality, affordable education
Black Friday Deals
piccalil.li
November 26, 2025 at 3:28 PM
Just another reminder that you get a 50% coupon code with every purchase during the @piccalil.li Black Friday period *and* every course is £60 (~ $80) cheaper.
If you wanted two courses and used your 50% coupon, you'd save over £180 (~ $240) off the full price!
High quality, affordable education
If you wanted two courses and used your 50% coupon, you'd save over £180 (~ $240) off the full price!
High quality, affordable education
I played with Framer to build a grid with minmax(), but didn't find any hints about that. All I could find is "Advanced Layout" which sounds like an over-exaggerated way.
Width: 100, min -> This resulted in minmax() in the CSS, but this is not obvious. There is a big potential to enhance the UX. 😄
Width: 100, min -> This resulted in minmax() in the CSS, but this is not obvious. There is a big potential to enhance the UX. 😄
November 25, 2025 at 7:12 PM
I played with Framer to build a grid with minmax(), but didn't find any hints about that. All I could find is "Advanced Layout" which sounds like an over-exaggerated way.
Width: 100, min -> This resulted in minmax() in the CSS, but this is not obvious. There is a big potential to enhance the UX. 😄
Width: 100, min -> This resulted in minmax() in the CSS, but this is not obvious. There is a big potential to enhance the UX. 😄
Reposted by Ahmad Shadeed
📘 Debugging CSS book is $19.99. Get your copy and level up your CSS debugging skills, or tell a friend about it.
debuggingcss.com
debuggingcss.com
Master the Skill of Debugging CSS
An ebook with lots of tips and techniques on how to debug CSS the right way with easy and studied methods.
debuggingcss.com
October 31, 2025 at 7:55 AM
📘 Debugging CSS book is $19.99. Get your copy and level up your CSS debugging skills, or tell a friend about it.
debuggingcss.com
debuggingcss.com