Ahmad Shadeed

@ishadeed.com

8440 Followers 170 Following

Design Engineer. 🎼 CSS Course: thelayoutmaestro.com 📘 Book: debuggingcss.com ✍️ Blog: ishadeed.com 📪 Newsletter: buttondown.com/ishadeed 📂 Made: defensivecss.dev, rtlstyling.com, a11ymatters.com

A screenshot from the articles that shows how the grid layout nesting works with subgrid.
A screenshot from npx npkill showing a saved space of 7.17GB
A top view of a coffee corner with the cup in focus. The cup has a tulip latte art.
Ahmad is talking about his new lighting setup and asking you what he should make videos about first?
The pricing table of ScreenStudio for Mac ($29/month vs $9/monthly for yearly subscriptions).
Interactive demo showing a blue square resizing inside a lined container with a "Use round()" toggle and base value of 22. As the container shrinks, the square snaps to the line intervals instead of landing on in-between values.
The video displays an interactive timeline illustrating CSS Media Queries Range Syntax across three width thresholds. As a cursor slides past the ≥ 300px and ≥ 500px breakpoints, the target element's background color dynamically shifts from white to purple, and then to orange.
A cup of coffee on a table, an open book about coffee showing an espresso cup and a book library in the background.
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 coffee cup with latte art, a grinder in the background
A figure with broken text, mostly due to the use of AI.
Landing page for "The Layout Maestro," a CSS course by Ahmad Shadeed.
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.
A cup of coffee with latte art
An illustration shows a card with text going out of its container, and a broken leg. Underneath, there is a "Fix me" button.
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.
Top-down video of a latte being poured into a white cup, forming a smooth leaf latte art pattern as the milk settles.
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.
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.
Hand holding a white cup of latte with a beautiful tulip latte art design, set against a Sage espresso machine background.
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."
Two cups of hot chocolate with latte art on top.
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.
A cup of coffee with latte art on top, placed on a light wooden counter top.
A demo showing a horizontal slider labeled “Word Count: 15” positioned at the center. The slider thumb is used to increase the number of words in the description to test how the UI will react.
A screenshot from the article header that includes the title "Solved by Modern CSS: Section Layout" in a boxed style.
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.
Ahmad speaking about Defensive CSS at Supermetrics headquarters in Helsinki, Finland.
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.
A photo from my coffee corner showing a tale cup on a scale, with a tulip latte art.
Partially installed wood-grain countertop sticker.
A grid inspected in Firefox, showing the correct behaviour.
A tulip latte art
a screen record that shows an interactive demo where the user is changing the value of position-area through interacting with a 3x3 grid.
A video of me pouring milk into a coffee cup.
Screen recording of an article header with a styled title and dashed lines showing CSS anchor positioning.
A screenshot from Github Desktop, showing the current branch 'anchor-pos'.
A video of the article header, where there is an interactive demo, taking benefit of the two 'o' letters in 'colors'. When the first 'o' is clicked, the other 'o' will change its color relative to the first by using CSS relative colors.
A screenshot from Time's layout, with Ahmad's photo, surprised, and positioned at the bottom right corner.