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-...
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! 🤩
It's coming in Safari 26.2!
November 5, 2025 at 12:58 PM
The new App Store web UI was published with source maps enabled, so someone put all the code on GitHub for us to check.
github.com/rxliuli/apps...
It looks like I have some work to do 👀
github.com/rxliuli/apps...
It looks like I have some work to do 👀
github.com
November 5, 2025 at 11:21 AM
The new App Store web UI was published with source maps enabled, so someone put all the code on GitHub for us to check.
github.com/rxliuli/apps...
It looks like I have some work to do 👀
github.com/rxliuli/apps...
It looks like I have some work to do 👀
I'll send a new email for my layout course newsletter tomorrow with updates on the progress.
If you haven't signed up yet, go ahead :D
layoutmaestro.ishadeed.com
If you haven't signed up yet, go ahead :D
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
November 4, 2025 at 7:57 PM
I'll send a new email for my layout course newsletter tomorrow with updates on the progress.
If you haven't signed up yet, go ahead :D
layoutmaestro.ishadeed.com
If you haven't signed up yet, go ahead :D
layoutmaestro.ishadeed.com
It’s interesting that Figma now has the “Slots” feature, which simply lets you drag and drop a component into another.
I talked about this topic from a CSS context in my Smart Layouts talk. Here is the slide if you're into that:
www.figma.com/deck/NewdIWN...
I talked about this topic from a CSS context in my Smart Layouts talk. Here is the slide if you're into that:
www.figma.com/deck/NewdIWN...
November 2, 2025 at 4:50 PM
It’s interesting that Figma now has the “Slots” feature, which simply lets you drag and drop a component into another.
I talked about this topic from a CSS context in my Smart Layouts talk. Here is the slide if you're into that:
www.figma.com/deck/NewdIWN...
I talked about this topic from a CSS context in my Smart Layouts talk. Here is the slide if you're into that:
www.figma.com/deck/NewdIWN...
Reposted by Ahmad Shadeed
✍️ New Article: Use Cases for Field Sizing
A quick look at field-sizing and where it can be used. I hope this will land in Firefox and Safari soon. The good thing? We can use it as an enhancement.
🔗 ishadeed.com/article/fiel...
A quick look at field-sizing and where it can be used. I hope this will land in Firefox and Safari soon. The good thing? We can use it as an enhancement.
🔗 ishadeed.com/article/fiel...
November 1, 2025 at 6:27 AM
✍️ New Article: Use Cases for Field Sizing
A quick look at field-sizing and where it can be used. I hope this will land in Firefox and Safari soon. The good thing? We can use it as an enhancement.
🔗 ishadeed.com/article/fiel...
A quick look at field-sizing and where it can be used. I hope this will land in Firefox and Safari soon. The good thing? We can use it as an enhancement.
🔗 ishadeed.com/article/fiel...
✍️ New Article: Use Cases for Field Sizing
A quick look at field-sizing and where it can be used. I hope this will land in Firefox and Safari soon. The good thing? We can use it as an enhancement.
🔗 ishadeed.com/article/fiel...
A quick look at field-sizing and where it can be used. I hope this will land in Firefox and Safari soon. The good thing? We can use it as an enhancement.
🔗 ishadeed.com/article/fiel...
November 1, 2025 at 6:27 AM
✍️ New Article: Use Cases for Field Sizing
A quick look at field-sizing and where it can be used. I hope this will land in Firefox and Safari soon. The good thing? We can use it as an enhancement.
🔗 ishadeed.com/article/fiel...
A quick look at field-sizing and where it can be used. I hope this will land in Firefox and Safari soon. The good thing? We can use it as an enhancement.
🔗 ishadeed.com/article/fiel...
📘 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
There’s something magical about physics-based animation. When we use springs instead of Bézier curves, we tend to get way smoother motion.
Up until recently, we’ve needed to use JS libraries for this, but a modern feature lets us emulate springs in native CSS. ✨
Just published a new post:
Up until recently, we’ve needed to use JS libraries for this, but a modern feature lets us emulate springs in native CSS. ✨
Just published a new post:
Springs and Bounces in Native CSS • Josh W. Comeau
The “linear()” timing function is a game-changer; it allows us to model physics-based motion right in vanilla CSS! That said, there are some limitations and quirks to be aware of. I’ve been experiment...
www.joshwcomeau.com
October 28, 2025 at 6:08 PM
There’s something magical about physics-based animation. When we use springs instead of Bézier curves, we tend to get way smoother motion.
Up until recently, we’ve needed to use JS libraries for this, but a modern feature lets us emulate springs in native CSS. ✨
Just published a new post:
Up until recently, we’ve needed to use JS libraries for this, but a modern feature lets us emulate springs in native CSS. ✨
Just published a new post:
Reposted by Ahmad Shadeed
solved by modern CSS: section layout
ishadeed.com/article/mode...
love @ishadeed.com's deep dives like this
🙏🖤
ishadeed.com/article/mode...
love @ishadeed.com's deep dives like this
🙏🖤
Solved By Modern CSS: Section Layout
Building a typical section design with modern CSS.
ishadeed.com
October 28, 2025 at 9:44 AM
solved by modern CSS: section layout
ishadeed.com/article/mode...
love @ishadeed.com's deep dives like this
🙏🖤
ishadeed.com/article/mode...
love @ishadeed.com's deep dives like this
🙏🖤
First time having a proper coffee that I can actually taste in two weeks! 😍
My sore throat ended up lasting longer, setting a new record by catching a virus each week from Alma's kindergarten 🤒
My sore throat ended up lasting longer, setting a new record by catching a virus each week from Alma's kindergarten 🤒
October 28, 2025 at 9:14 AM
First time having a proper coffee that I can actually taste in two weeks! 😍
My sore throat ended up lasting longer, setting a new record by catching a virus each week from Alma's kindergarten 🤒
My sore throat ended up lasting longer, setting a new record by catching a virus each week from Alma's kindergarten 🤒
Reposted by Ahmad Shadeed
Online on a weekend? You can grab access to my web components course for $25 today and tomorrow. Big ol’ discount. Use the code OCT25-26.
(And as usual, if you need further accommodation, just use the email form and we’ll work it out.)
scottjehl.com/learn/webcom...
(And as usual, if you need further accommodation, just use the email form and we’ll work it out.)
scottjehl.com/learn/webcom...
Web Components Demystified online course | Scott Jehl, Web Designer/Developer
A comprehensive, premium course about building dynamic, fast, resilient apps with standard web components.
scottjehl.com
October 25, 2025 at 2:59 PM
Online on a weekend? You can grab access to my web components course for $25 today and tomorrow. Big ol’ discount. Use the code OCT25-26.
(And as usual, if you need further accommodation, just use the email form and we’ll work it out.)
scottjehl.com/learn/webcom...
(And as usual, if you need further accommodation, just use the email form and we’ll work it out.)
scottjehl.com/learn/webcom...
In case you missed it, I wrote about building a section layout with modern CSS.
ishadeed.com/article/mode...
ishadeed.com/article/mode...
October 25, 2025 at 5:08 AM
In case you missed it, I wrote about building a section layout with modern CSS.
ishadeed.com/article/mode...
ishadeed.com/article/mode...
✍️ Solved by Modern CSS: Section Layout
A new interactive article about a typical section layout and exploring how to make it more dynamic with modern CSS. Happy reading!
ishadeed.com/article/mode...
A new interactive article about a typical section layout and exploring how to make it more dynamic with modern CSS. Happy reading!
ishadeed.com/article/mode...
Solved By Modern CSS: Section Layout
Building a typical section design with modern CSS.
ishadeed.com
October 23, 2025 at 7:20 PM
✍️ Solved by Modern CSS: Section Layout
A new interactive article about a typical section layout and exploring how to make it more dynamic with modern CSS. Happy reading!
ishadeed.com/article/mode...
A new interactive article about a typical section layout and exploring how to make it more dynamic with modern CSS. Happy reading!
ishadeed.com/article/mode...
Reposted by Ahmad Shadeed
In 2017 I needed to create a grid of logos for Monotype requiring separators between items. I had to use pseudo-elements & "magic numbers" for simple lines 😩
In 2025: CSS finally solves this!
Styling the gap, with CSS
www.alwaystwisted.com/articles/sty...
In 2025: CSS finally solves this!
Styling the gap, with CSS
www.alwaystwisted.com/articles/sty...
Styling The gap with CSS
Make your components context-aware with CSS inherit(): learn how the new inherit() function lets components derive spacing, colour and motion from their container, reduce token bloat, and implement ro...
www.alwaystwisted.com
October 22, 2025 at 12:05 PM
In 2017 I needed to create a grid of logos for Monotype requiring separators between items. I had to use pseudo-elements & "magic numbers" for simple lines 😩
In 2025: CSS finally solves this!
Styling the gap, with CSS
www.alwaystwisted.com/articles/sty...
In 2025: CSS finally solves this!
Styling the gap, with CSS
www.alwaystwisted.com/articles/sty...
Is there a browser plugin that helps with editing Tailwind CSS in the browser?
Context: I have a set of cards with the same classes, and I want to make quick changes to them at once.
It could have been a class name 😅
Context: I have a set of cards with the same classes, and I want to make quick changes to them at once.
It could have been a class name 😅
October 21, 2025 at 7:37 AM
Is there a browser plugin that helps with editing Tailwind CSS in the browser?
Context: I have a set of cards with the same classes, and I want to make quick changes to them at once.
It could have been a class name 😅
Context: I have a set of cards with the same classes, and I want to make quick changes to them at once.
It could have been a class name 😅
I needed a quick way to generate conditional CSS with :has() and quantity queries, and this tool by @css-only.dev is so helpful.
css-tip.com/quantity-que...
css-tip.com/quantity-que...
October 21, 2025 at 5:40 AM
I needed a quick way to generate conditional CSS with :has() and quantity queries, and this tool by @css-only.dev is so helpful.
css-tip.com/quantity-que...
css-tip.com/quantity-que...
There’s no such thing as “enough CSS articles” about a topic. The more perspectives, the better.
I once talked to a dev who’d never heard of display: contents. He was excited to try after I showed him some use-cases.
My article might not click for someone, but yours could be the one that does!
I once talked to a dev who’d never heard of display: contents. He was excited to try after I showed him some use-cases.
My article might not click for someone, but yours could be the one that does!
October 20, 2025 at 12:46 PM
There’s no such thing as “enough CSS articles” about a topic. The more perspectives, the better.
I once talked to a dev who’d never heard of display: contents. He was excited to try after I showed him some use-cases.
My article might not click for someone, but yours could be the one that does!
I once talked to a dev who’d never heard of display: contents. He was excited to try after I showed him some use-cases.
My article might not click for someone, but yours could be the one that does!