iiinova — where your digital self keeps evolving

Ahmad Shadeed @ishadeed.com · 27/09/2026

Thank you! I noted at the beginning of the article that the demos work in browsers that support scroll-driven animations and anchor positioning. Maybe I should move it to the very beginning to make it clearer.

a screenshot from the blog post shows a note about the demos: "The demos in this article work in browsers that support both scroll-driven animations and anchor positioning".

120

Ahmad Shadeed @ishadeed.com · 19/09/2026

Made cookies for this week and mainly for Alma's lunch box. 🍪 I used a combination of 100% + 64% dark chocolate, the taste is balanced and less sugary.

A top view photo on a counter top that shows a cookies try, and a paper dish on a scale.

A hand fully open with 3 cookies on it. In the background, there is a coffee corner, and a box full of rest of the cookies on a scale.

091

Ahmad Shadeed @ishadeed.com · 15/09/2026

While working on a project, I paused a bit to style an icon + text. When the text is short, the icon is vertically centered. If the text wraps, the icon is aligned with the first line. ishadeed.com/article/alig... This is a result of using lh, aspect-ratio, height: auto, flexbox and more.

A screenshot from one demo shows controls for icon, font and list. In the middle, there is a checkmark icon next to "How to align an icon to a label".

7768

Ahmad Shadeed @ishadeed.com · 27/08/2026

It looks like Chrome is displaying range syntax media queries by default now in Devtools when using `max/min-width` in CSS. I like that! But not sure how devs with no knowledge of range syntax will perceive it. Maybe a tooltip might help?

140

Ahmad Shadeed @ishadeed.com · 01/08/2026

The LH unit in CSS is cool! In my new article, I wrote about it and shared my favorite demos. ishadeed.com/article/lh-u...

A screenshot of the vertical spacing demo.

A screenshot of aligning an image height with the nearest line of text.

87812

Ahmad Shadeed @ishadeed.com · 20/07/2026

I wrote about how to build a sport standings layout with grid and subgrid. If you haven't learned subgrid yet, this might be a good use case to see how it works! ✨ ishadeed.com/article/fifa...

A screenshot from the articles that shows how the grid layout nesting works with subgrid.

2262

Ahmad Shadeed @ishadeed.com · 15/07/2026

I decided to launch the new design for my CSS lab while it's a work in progress. It's still not perfect on mobile, but here we go. I attached the current live result plus a behind the scenes look from the Figma file. lab.ishadeed.com I will use this as the home for any new CSS experiment.

1221

Ahmad Shadeed @ishadeed.com · 01/07/2026

This is useful! Thank you :)

A screenshot from npx npkill showing a saved space of 7.17GB

010

Ahmad Shadeed @ishadeed.com · 11/06/2026

Excited about my new lighting setup! 🤩 I've been wanting to make videos for a while about CSS and design. What would you actually want to see first? 📹

2150

Ahmad Shadeed @ishadeed.com · 28/05/2026

This pricing feels like a punishment. You don't want to pay yearly? Then pay 3x the price monthly. Friends who do video, are there alternatives of ScreenStudio or I should just use it and move on? 😅

The pricing table of ScreenStudio for Mac ($29/month vs $9/monthly for yearly subscriptions).

881

Ahmad Shadeed @ishadeed.com · 17/05/2026

✍️ New Article: Better fluid sizing with round() I wrote about how CSS round() enhances the values you get from clamp() in sizing, typography, and spacing. Why it matters, and how to use it. 🔗 ishadeed.com/article/css-round

712418

Ahmad Shadeed @ishadeed.com · 04/05/2026

✍️ New Article: Media Query Range Syntax I wrote about the range syntax in media queries, how it's different from the usual min-* and max-* prefixes, what problem it solves, and how to use it today. 🔗 ishadeed.com/article/rang...

0549

Ahmad Shadeed @ishadeed.com · 25/04/2026

I'm curious to know if the designer/developer who built this sidebar for Claude Design intentionally set the min width based on when the "import" and "send" collide, so the layout doesn't look broken? What happens when a new button is added?

4120

Ahmad Shadeed @ishadeed.com · 18/04/2026

📄 From the archive: Designing Better Target Sizes (Interactive Guide) This is the most in-depth interactive guide I've created. I consider it as a main part of my portfolio due to the heavy UI work and care given to every single illustration and demo. Have a look: ishadeed.com/article/targ...

0201

Ahmad Shadeed @ishadeed.com · 17/04/2026

Someone please hire me to just design icons all day.. I just love this part 😅😀 From the landing page of my course, The Layout Maestro: thelayoutmaestro.com.

A section with a dark theme shows CSS features like Flexbox, grid, :has() and others from the landing page of Ahmad Shadeed's new course (The Layout Maestro).

A section shows CSS features like Flexbox, grid, :has() and others from the landing page of Ahmad Shadeed's new course (The Layout Maestro).

0410

Ahmad Shadeed @ishadeed.com · 05/04/2026

Sometimes all you need is a good cup of coffee 😄 #Homebarista

A coffee cup with latte art, a grinder in the background

0190

Ahmad Shadeed @ishadeed.com · 04/04/2026

Apparently, Smashing Magazine now accepts articles with AI-generated images that contain broken text. This is a sad turn for a site that inspired so many of us about the web. www.smashingmagazine.com/2026/03/drop...

A figure with broken text, mostly due to the use of AI.

3463

Ahmad Shadeed @ishadeed.com · 26/03/2026

In grid, it's important to grasp how grid areas work. This is one of the examples. I really like grid areas and believe mastering them along with named grid lines gives you precise control over any layout.

161

Ahmad Shadeed @ishadeed.com · 26/03/2026

One of the examples that explains grid-auto-flow. It either flows in rows or columns. This is columns flow.

130

Ahmad Shadeed @ishadeed.com · 26/03/2026

For both flexbox and grid, I use a lego bricks metaphor to explain alignment. Here is a demo for align-self and justify-self. Toggle line numbers and grid axes to see exactly what's happening.

140

Ahmad Shadeed @ishadeed.com · 26/03/2026

My new CSS course is out 🥳, The Layout Maestro. It's all about teaching you how to think and decide what CSS to use. Here is a peek from inside the content.

Landing page for "The Layout Maestro," a CSS course by Ahmad Shadeed.

1103

Ahmad Shadeed @ishadeed.com · 25/03/2026

After a year of building, The Layout Maestro is officially live! 🎹🥳 An interactive CSS course that teaches you how to think in CSS layouts. 70+ lessons, 7 layouts, 150+ interactive demos! Ready to level up your layout skills? Enroll now👇: thelayoutmaestro.com

A tablet displaying the landing page for 'The Layout Maestro,' a practical CSS course by Ahmad Shadeed. The desk setup includes a cup of coffee, colorful pencils, and LEGO pieces, creating a bright and creative atmosphere.

513239

Ahmad Shadeed @ishadeed.com · 21/03/2026

First morning cup of coffee after Ramadan hits different! 😍

933010

Ahmad Shadeed @ishadeed.com · 14/03/2026

Love that "inline-size" chip in Chrome Devtools. Much better than showing "Container" only.

0151

Ahmad Shadeed @ishadeed.com · 03/03/2026

Having so much fun fine-tuning my CSS layout course landing page! 🤩

An illustration shows a card with text going out of its container, and a broken leg. Underneath, there is a "Fix me" button.

0240

Ahmad Shadeed @ishadeed.com · 13/02/2026

I grepped my upcoming CSS course to count how my interactive demos are there and the total is 69 unique components and 238 variations. Adding on that, there are 53+ demos in the building module. Total is 360! 🤯 I think that gives an idea about the level of effort. Excited!

A screenshot with tables showing the number of demos in the course. First table is for Demo Components and the second is for the embed iFrameDemos.

150

Ahmad Shadeed @ishadeed.com · 06/02/2026

❌ Drawing with CSS ✅ Drawing with a milk pitcher

0201

Ahmad Shadeed @ishadeed.com · 05/02/2026

I will keep an eye of this; still not working in the latest Nightly (149)

000

Ahmad Shadeed @ishadeed.com · 05/02/2026

YES!! Style queries are coming to Firefox! 😍😍 I felt that as in the past few days I got over 6 email notifications about the style queries issue on Bugzilla (I didn't mind them at all, of course).

2141

Ahmad Shadeed @ishadeed.com · 30/01/2026

Morning everyone! Happy day 🙌

A teal cup of latte with intricate tulip latte art sits in the foreground on a wooden counter. Behind it, a white plate holds avocado toast topped with mashed avocado and diced tomatoes. An espresso machine and coffee accessories in the background.

1180

Ahmad Shadeed @ishadeed.com · 09/01/2026

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! 👌

A screenshot of browser developer tools showing a CSS variable called "--space" being inspected. A tooltip displays the step-by-step calculation breakdown of a complex calc() function.

3496

Ahmad Shadeed @ishadeed.com · 06/01/2026

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

Hand holding a white cup of latte with a beautiful tulip latte art design, set against a Sage espresso machine background.

0160

Ahmad Shadeed @ishadeed.com · 17/12/2025

Me writing git commits for my CSS layout course 😆

A screenshot from Github Desktop with a commit title saying "Display contents + absolute position - Ready" with the description: "Next it's just time to fine tune and over-engineer the examples."

4190

Ahmad Shadeed @ishadeed.com · 14/12/2025

Hot chocolate, cookies.. can get it more chocolately than that? Winter vibes ☕

Two cups of hot chocolate with latte art on top.

1220

Ahmad Shadeed @ishadeed.com · 28/11/2025

My morning coffee! Good day 😊

A photo of a cup of coffee with latte art. The cup is on top of a black coffee scale, surrounded by an espresso machine, a pile of coffee containers, and a grinder.

1230

Ahmad Shadeed @ishadeed.com · 25/11/2025

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. 😄

280

Ahmad Shadeed @ishadeed.com · 10/11/2025

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 ❤️

331940

Ahmad Shadeed @ishadeed.com · 07/11/2025

Friday morning pour ☕️😋

1431

Ahmad Shadeed @ishadeed.com · 01/11/2025

✍️ 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...

26317

Ahmad Shadeed @ishadeed.com · 28/10/2025

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 🤒

A cup of coffee with latte art on top, placed on a light wooden counter top.

2120

Ahmad Shadeed @ishadeed.com · 25/10/2025

In case you missed it, I wrote about building a section layout with modern CSS. ishadeed.com/article/mode...

1251

Ahmad Shadeed @ishadeed.com · 24/10/2025

Given that the layout itself as an h1, I took a11y into consideration to avoid having duplicates. (Yes, I might be able to do it with one title, but I've some bad experiences where <span>s will join each other without spaces, like "SolvedbyModernCSS..")

110

Ahmad Shadeed @ishadeed.com · 24/10/2025

Nested grids, clamp, oklch.. to mention a few 🤩

110

Ahmad Shadeed @ishadeed.com · 24/10/2025

The article header was so fun to work on. I used some cutting edge stuff like the random() to place a circle randomly in one of the boxes (Safari TP only).

A screenshot from the article header that includes the title "Solved by Modern CSS: Section Layout" in a boxed style.

110

Ahmad Shadeed @ishadeed.com · 21/10/2025

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...

A screenshot from the tool titled "Quantity queries using has() selector" showing an input field with ".container" value, and a select menu with options like "Exactly, At Least, At most, etc" items.

2369

Ahmad Shadeed @ishadeed.com · 13/10/2025

I'm planning a Defensive CSS workshop, focused on practical CSS and design tips that help build future proof user interfaces. Would your team be interested if it's offered live or as a short recorded course? More about Defensive CSS: defensivecss.dev

Ahmad speaking about Defensive CSS at Supermetrics headquarters in Helsinki, Finland.

3305

Ahmad Shadeed @ishadeed.com · 11/10/2025

I discovered a useful feature in Safari DevTools today. We can show the flex items order like (item #1, item #2, etc) and their corresponding order value (if it's changed). It's called "Order Numbers". @webkitgtk.org

A screenshot from Safari shows a navigation highlighted with an arrow pointing to the option “order numbers” in DevTools. Each flex navigation item is overlayed with an “item + number” label.Tools.

2277