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
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.
A comprehensive guide to spacing in CSS, covering margins, padding, grid/flexbox gaps, and practical use cases for layout design.
A guide to CSS viewport units (vw, vh, vmin, vmax) explaining their calculations, differences from percentages, and practical use cases like responsive typography.
A tutorial on using CSS Flexbox and Grid box alignment properties like align-content and justify-content to control layout.
A tutorial on using CSS Grid Template Areas for creating flexible, visually-defined layouts, with examples and comparisons to traditional grid methods.
A guide to the various methods for hiding elements in web development, covering HTML, CSS, accessibility, and animation considerations.
