Ahmad Shadeed is a design engineer, author, and Google Developer Expert in Web UI. He writes and speaks about CSS, UI design, and front-end engineering, blending design and code to build better web experiences.
70 articles from this blog
Explores the CSS field-sizing property, demonstrating its use cases for dynamic form and UI element sizing based on content.
A tutorial on CSS Anchor Positioning, explaining how to position elements relative to others without traditional absolute positioning limitations.
A speaker shares insights from his CSS Day talk on 'Smart Layouts', advocating for fluid, self-adapting CSS using modern features like clamp and container queries.
A tutorial on using modern CSS container queries and the :has() selector to create a responsive feature image component with dynamic caption styling.
Explores the debate on whether CSS masonry layout should be part of CSS Grid or a separate module, with examples and syntax considerations.
A designer and developer shares the process and reasoning behind a personal website redesign, focusing on branding and self-representation.
An interactive guide explaining the CSS Grid template areas feature, highlighting its simplicity and power for layout positioning compared to line numbers.
An interactive guide explaining CSS container queries, their purpose, and how to implement them for responsive component design.
A front-end developer explores the inconsistent UX of CSS nesting in browser DevTools and proposes solutions for better visualization.
An introduction to native CSS nesting, a new feature now supported in all major browsers, with examples and use cases.
A front-end developer analyzes the CSS techniques used in Adobe's new web-based Photoshop, focusing on layout, flexbox, and interesting implementation details.
A technical analysis of the CSS and layout structure used in the Meta Threads web app, exploring UI patterns and potential bugs.
A technical case study exploring how to rebuild the TechCrunch website layout using modern CSS techniques like Flexbox and Grid.
Exploring the Virtual Keyboard API to solve the problem of fixed UI elements being hidden by mobile keyboards, with examples and browser support details.
A technical analysis of the CSS implementation in Meta's Threads app, focusing on its use of CSS Grid for post layouts.
Explains new CSS viewport units (svh, lvh, dvh) that solve mobile layout issues caused by dynamic browser UI elements like address bars.
Explores upcoming CSS State Container Queries, including 'stuck' and 'wrap' states, for styling based on element conditions without JavaScript.
Explores the need for CSS flex-wrap detection, detailing use cases like responsive headers and tabs for better layout control.
A developer shares a personal wishlist of desired CSS features, including flex wrapping detection, logical gradients, and easing for smoother visual effects.
A guide exploring modern responsive web design techniques, including fluid layouts, container queries, and user preference media queries for 2023 and beyond.
