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.
76 articles from this blog
There is a common design pattern that sometimes gets missed or overlooked. It’s having a list of items, each with an icon. When the text is one line,
Learn how to balance flexbox items with the new flex-wrap: balance property and alternative container query solutions.
Explore practical use cases for the CSS lh unit, including vertical spacing and paper line effects, with live demos and code examples.
A CSS tutorial on rebuilding FIFA standings layout using CSS Subgrid for better markup and responsive design.
How to use CSS round() with clamp() for predictable fluid sizing in typography and layout.
Explains media queries range syntax as a clearer alternative to min-width/max-width for responsive design, solving breakpoint overlap issues.
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.
