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 frontend developer explains the thought process and CSS techniques (grid, flexbox, logical properties) used to build a responsive article layout.
A frontend developer shares their detailed thought process and decision-making while building a responsive hero section with modern CSS.
Explores practical use cases for CSS comparison functions like clamp(), max(), and min(), including fluid sizing, decorative elements, and hero sections.
CSS container queries are now supported in modern browsers, enabling responsive component design based on parent container size instead of viewport.
A technical guide explaining CSS Subgrid, its use cases, and how it solves layout alignment problems in modern web design.
A CSS tutorial on creating a dynamic line separator between flexbox items that adapts to screen size, using pseudo-elements and flexbox properties.
Explains CSS Cascade Layers, a new feature for managing specificity and organizing styles in large projects.
Explores using SVG with CSS to build dynamic UI components like cut-out avatars, highlighting advantages over pure CSS for responsiveness and cross-browser compatibility.
Explains why CSS `position: sticky` fails inside CSS Grid containers and how to fix it by overriding the default `align-items: stretch` behavior.
A deep dive into the HTML and CSS structure of Facebook Messenger's chat bubble component, covering its variations and design considerations.
Explains a clever CSS technique used by Facebook to conditionally toggle border-radius based on element width vs viewport width.
Explores modern CSS techniques to replace absolute positioning with flexbox and grid for common layout challenges like card overlays.
A tutorial on building responsive, accessible stepper components using HTML and CSS, covering layout, styling, and separator lines.
A technical guide on fixing vertical alignment issues in button labels caused by font line-height, using CSS pseudo-elements.
A guide for UI designers and developers on techniques to accurately compare coded web components with original design mockups, ensuring visual fidelity.
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.
