📜 HTML & CSS – Frontend Interview Questions & Answers

لو داخل على إنترفيو Frontend Developer سواء جونيور أو ميد أو سينيور فـ مهم تكون مش بس عارف الأساسيات لكن فاهم الحاجات العميقة اللي بتميز أي حد قوي في المجال. علشان كده جمعتلك مجموعة أسئلة تقيلة هتختبر مستواك الحقيقي

اسئله (HTML & CSS):

• 1️⃣ إيه الفرق بين em, rem, و px في CSS؟ وامتى تستخدم كل واحد؟

  • px: وحدة ثابتة، يعني لو كتبت font-size: 16px; هيفضل 16px على أي شاشة.
  • em: بيتحسب بناءً على الـ font-size للأب المباشر، يعني لو الأب font-size: 20px; والابن font-size: 2em; هيكون 40px.
  • rem: بيتحسب بناءً على الـ font-size للـ html، وده بيخليه أكتر ثباتًا وأسهل في التحكم في المشروع كله.

  
  
  امتى تستخدمهم؟
  
  

  px لو عايز حاجة ثابتة، em لو عايز يعتمد على الأب، rem لو عايز يكون متناسق مع المشروع كله وسهل تعديله عالميًا.

• 2️⃣ إيه الفرق بين absolute, relative, fixed, و sticky في الـ Positioning؟

  • relative: بيتحرك بالنسبة لمكانه الطبيعي.
  • absolute: بيتحرك بالنسبة لأقرب position: relative; عليه أو لو مفيش، يبقى بالنسبة للـ body.
  • fixed: ثابت في نفس المكان حتى لو عملت Scroll، زي الـ Navbar اللي بيظهر في كل الصفحة.

  • sticky: بيبدأ عادي، ولما توصل لنقطة معينة بيبقى Fixed.

  
  
  مثال عملي؟
  
  
  الـ Navbar بتاعك لو عايزه يفضل ثابت يبقى fixed، لكن لو عايزه يتحرك عادي وبعد كده يثبت يبقى sticky.

• 3️⃣ إزاي الـ Critical Rendering Path بيأثر على سرعة تحميل الصفحة؟

  • ببساطة، المتصفح مش بيعرض الصفحة غير لما يخلص تحميل الـ HTML, CSS, و JavaScript، فلو عندك ملفات ضخمة أو حاجات بتأخر الـ Render زي الـ @import في CSS أو render-blocking scripts، الصفحة هتظهر ببطء.

  
  
  والحل؟
  
  
  استخدم async/defer مع السكريبتات، قلل حجم الـ CSS، استخدم Lazy Loading للصور.

• 4️⃣ إيه الفرق بين inline, block, و inline-block؟

  • inline: بيكون في نفس السطر مع العناصر التانية بس مبيقبلش تعديلات في width أو height، زي ال span.
  • block: بياخد سطر لوحده وبيقبل التعديلات على الحجم، زي ال div.
  • inline-block: نفس الـ inline بس بيقبل تعديلات في width و height، زي ال img.

  
  
  طيب امتى تستخدمهم؟
  
  
  لو عايز عنصر يكون جنب حاجة تانية لكن بتتحكم في حجمه، استخدم inline-block.

• 5️⃣ إيه هي الـ Paint & Layout في الـ Rendering Engine؟ وازاي تقلل تأثيرهم على الأداء؟

  • Layout: المتصفح بيحسب أماكن العناصر بعد أي تغيير في الصفحة.
  • Paint: المتصفح بيبدأ يرسم الألوان و الباكجراوند، والحدود.
  • Composite: بيركب كل ده مع بعض.

  
  
  طيب إزاي تحسن الأداء؟
  
  قلل التعديلات على width و height بقدر الإمكان, واستخدم will-change مع الحاجات اللي هتتغير كتير زي animations واستخدم transform: translateZ(0); عشان تفعل الـ GPU وتسهل الحركات.

• 6️⃣ إزاي تتجنب الـ Cumulative Layout Shift (CLS) وتحسن تجربة المستخدم؟

  
  
  CLS
  
  
  بيحصل لما الصفحة تحمل وعناصرها تتحرك بشكل مفاجئ، وده بيضايق المستخدم

  
  
  والحل؟
  
  

  • حدد أبعاد الصور والفيديوهات (width و height).
  • استخدم font-display: swap; عشان ميحصلش تأخير في تحميل الخطوط.
  • متحملش إعلانات أو عناصر بشكل مفاجئ بدون Placeholder.

• 7️⃣ إيه الفرق بين z-index والـ stacking context في CSS؟

  • z-index بيحدد ترتيب العناصر فوق بعض، بس مش لوحده، لازم يكون مع position (زي relative أو absolute).
  • stacking context هو مفهوم أكبر، وبيحصل لما عنصر معين يكون عنده opacity < 1 أو position: fixed; وبيأثر على ترتيب الطبقات.

  
  
  امتى تحصل مشاكل؟
  
  
  لما تحط z-index: 9999; ومتلاقيش العنصر فوق كل حاجة غالبا المشكلة مش في الرقم لكن في الـ stacking context.

• 8️⃣ إزاي تتأكد إن موقعك Responsive لكل الشاشات؟

  • استخدم Flexbox و Grid بدل float القديم.
  • جرب تستخدم ال Media Queries
  • استخدم clamp(), min(), max() في الـ font-size عشان يكون متجاوب بدون Media Queries.