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-...
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
Reposted by Ahmad Shadeed
I really can't wait to show you my CSS layout course. I'm learning a few things along the way. Currently, I'm working on some grid explanation and it's so much fun to have some aha-moments.
Teaching is learning! ❤️
You can sign up for details: layoutmaestro.ishadeed.com
Teaching is learning! ❤️
You can sign up for details: layoutmaestro.ishadeed.com
November 21, 2025 at 12:12 PM
I really can't wait to show you my CSS layout course. I'm learning a few things along the way. Currently, I'm working on some grid explanation and it's so much fun to have some aha-moments.
Teaching is learning! ❤️
You can sign up for details: layoutmaestro.ishadeed.com
Teaching is learning! ❤️
You can sign up for details: layoutmaestro.ishadeed.com
Reposted by Ahmad Shadeed
If you want the full breakdown of how this is done, here’s the write-up 👇
9elements.com/blog/buildin...
9elements.com/blog/buildin...
Building a multi stage timetable with modern CSS using grid, subgrid, round(), and mod(). - 9elements
Combining finest craftsmanship with elegant design to ship innovative digital experiences.
9elements.com
November 14, 2025 at 7:06 AM
If you want the full breakdown of how this is done, here’s the write-up 👇
9elements.com/blog/buildin...
9elements.com/blog/buildin...
Great post! I made 3 demos early this week and can't wait to share them when I'm back.
Good news!
Range syntax for style queries and if() functions has shipped in Chrome!
Check it out:
una.im/range-style-...
Range syntax for style queries and if() functions has shipped in Chrome!
Check it out:
una.im/range-style-...
una.im | Range Syntax for Style Queries
Learn how to use the new range syntax for CSS style queries and the if() function.
una.im
November 13, 2025 at 6:17 AM
Great post! I made 3 demos early this week and can't wait to share them when I'm back.
On the evening of 9 Nov 2025, a cute little baby boy came to the world. Say hi to Adam! My wife and him are doing great ❤️
November 10, 2025 at 12:21 PM
On the evening of 9 Nov 2025, a cute little baby boy came to the world. Say hi to Adam! My wife and him are doing great ❤️
Friday morning pour ☕️😋
November 7, 2025 at 7:22 AM
Friday morning pour ☕️😋
Adam is killing it! 🤩
a new #CSS enters the ring
try it
codepen.io/argyleink/pe...
source
github.com/argyleink/cs...
try it
codepen.io/argyleink/pe...
source
github.com/argyleink/cs...
November 7, 2025 at 6:29 AM
Adam is killing it! 🤩