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.
75 articles from this blog
A developer's analysis of Tailwind CSS, discussing its utility-first approach, benefits like design constraints and speed, and drawbacks like class bloat.
Explores advanced, practical applications of CSS variables beyond basic color tokens, with examples for dynamic styling and code efficiency.
An introduction to CSS Container Queries, a new CSS feature that allows components to respond to their container's size instead of the viewport.
A front-end developer explores how inspecting website elements with DevTools can fuel curiosity and learning, using Instagram's layout as a case study.
A guide to understanding and using CSS logical properties for better RTL and multi-directional web layouts.
A detailed guide to understanding and using the CSS clip-path property for creating clipping regions and visual effects in web design.
A deep dive into building robust, real-world UI components, using a Facebook Messenger card as an example to explore edge cases and scalability.
A tutorial on using CSS Scroll Snap to create smooth, swipeable scrolling containers for galleries and sliders without JavaScript.
A comprehensive guide to the CSS Grid minmax() function, explaining its syntax, behavior, and practical use cases for responsive layouts.
Explores the importance of responsive design for viewport height, not just width, with CSS techniques and examples.
A tutorial on using CSS Flexbox to build modern, responsive website headers, covering layout techniques and common challenges.
Explains how to detect browser support for the CSS flexbox gap property and provides workarounds for unsupported browsers.
A guide to using multiple background images in CSS, covering properties like background-image, position, and size with visual examples.
Explores lesser-known CSS properties like place-items, margin: auto with Flexbox, and ::marker to simplify layouts and styling without extra code.
A guide to aligning and centering logos of varying sizes and orientations in CSS, covering design preparation and responsive implementation.
A guide to implementing and using CSS layout wrappers (containers) for better content readability and design structure.
A guide to using colors in CSS, covering color properties, named colors, hex values, and RGB/RGBA formats with practical examples.
A guide to identifying and solving responsive design issues for intermediate screen sizes, often overlooked between mobile and desktop breakpoints.
An analysis of interesting and unusual CSS techniques used in the Twitter website's design, including aspect ratios and negative margins.
A guide to customizing text selection in CSS using the ::selection pseudo-element and user-select property, with techniques for custom effects and animations.
