Log inSign up
Image
user avatar
Ahmad Shadeed
@shadeed9
Design Engineer. 🎼 CSS Course: thelayoutmaestro.com 📘 debuggingcss.com ✍️ ishadeed.com 📪 buttondown.com/ishadeed 📂 defensivecss.dev, rtlstyling.com
Tulkarm, Palestine
ishadeed.com
Born June 1, 1992
Joined July 2010
208
Following
25.5K
Followers
  • Pinned
    user avatar
    Ahmad Shadeed
    @shadeed9
    Mar 25
    After a year of building, The Layout Maestro is officially live! 🎹🥳 An interactive CSS course that teaches you how to think in CSS layouts. 70+ lessons, 7 layouts, 150+ interactive demos! Ready to level up your layout skills? Enroll now👇: thelayoutmaestro.com
    A tablet displaying the landing page for 'The Layout Maestro,' a practical CSS course by Ahmad Shadeed. The desk setup includes a cup of coffee, colorful pencils, and LEGO pieces, creating a bright and creative atmosphere.
    10K
  • user avatar
    Ahmad Shadeed
    @shadeed9
    Feb 10, 2023
    Have you ever wondered why padding is inconsistent above and below text elements? We can fix that with `leading-trim`. Available now in Safari Technology Preview. 🤩 Demo: codepen.io/shadeed/pen/gO… CSS Spec: w3.org/TR/css-inline-…
    Image
    00:00
    624K
  • user avatar
    Ahmad Shadeed
    @shadeed9
    Jul 20, 2024
    ✍️ New Guide: CSS Grid Areas I wrote a new ✨ interactive ✨ guide that explores CSS grid areas, line numbers, line names, and includes many interactive examples to experiment with. Happy learning! 🔗 ishadeed.com/article/css-gr…
    Image
    00:00
    118K
  • user avatar
    Ahmad Shadeed
    @shadeed9
    Apr 1, 2022
    Say hello to the CSS tint() color function! 🎉 Pick a color and a percentage, and you're good to go. It works by altering the color L value. So excited about this 🤩
    Image
  • user avatar
    Ahmad Shadeed
    @shadeed9
    Apr 1, 2021
    BIG NEWS: TailwindCSS is coming to Chromium! From now on, you will build websites with literally 0KB CSS!! 🤯
    Image
  • user avatar
    Ahmad Shadeed
    @shadeed9
    Mar 2, 2021
    I have a CSS joke but it's not supported yet
  • user avatar
    Ahmad Shadeed
    @shadeed9
    Apr 13, 2021
    ✍️ New Article: Say Hello To CSS Container Queries I wrote about CSS container queries, how they work, why to use them, with use-cases and examples. I enjoyed learning and writing about them. Happy reading! 🔗 ishadeed.com/article/say-he…
    Image
    Image
    Image
  • user avatar
    Ahmad Shadeed
    @shadeed9
    Aug 30, 2022
    Container queries are finally here. This is a big day for CSS 🎉 To celebrate that, I'm starting a new lab to try all things container queries at lab.ishadeed.com/container-quer…. This is inspired by @jensimmons's amazing CSS grid lab. Article: ishadeed.com/article/contai…
    Image
  • user avatar
    Ahmad Shadeed
    @shadeed9
    Jun 10, 2021
    💡 CSS Tip You can use `mix-blend-mode: multiply` to remove white backgrounds from logo images. Useful for quick testing in CSS. More details in "Aligning Logo Images in CSS": ishadeed.com/article/aligni…
    Image
  • user avatar
    Ahmad Shadeed
    @shadeed9
    Dec 7, 2021
    ✍️ New Article: Defensive CSS I compiled a list of defensive CSS techniques to avoid possible issues. This is usually a checklist I use when I'm working on a new web project. Hope you find it useful. 🔗 ishadeed.com/article/defens…
    Image
    Image
    Image
    Image
  • user avatar
    Ahmad Shadeed
    @shadeed9
    Jan 12, 2024
    The safe triangle is magical! 🤩 It's a method used to expand the target area in context menus. 🔗 Learn about it here: ishadeed.com/article/target…
    Image
    00:00
    88K
  • user avatar
    Ahmad Shadeed
    @shadeed9
    Mar 27, 2021
    Here is a CSS fix to the Ever Given cargo ship.
    Image
  • user avatar
    Ahmad Shadeed
    @shadeed9
    Jan 25, 2021
    CSS is magic 👌 On the left, I have an ordered list of articles. I want the numbers to be aligned. By using `font-feature-settings: 'tnum'`, the browser enables monospaced numbers. With that, the numbers are perfectly aligned. 🥳 h/t: @piccalilli_
    Image
  • user avatar
    Ahmad Shadeed
    @shadeed9
    Apr 15, 2022
    💡The CSS :has selector is magical! You can theme a website via a select menu and change the CSS variables. No JS is needed! html:has(option[value="purple"]:checked) { --color-1: purple; --color-2: orchid; } Article: ishadeed.com/article/css-ha… Demo: codepen.io/shadeed/pen/OJ…
    A figure that shows how we can change a website theme by using the :has selector to change a website's CSS color variables.