💡 مقدمة: اهم اسئلة انترفيو في مجال الويب:

لو داخل على مقابلة عمل كمطور ويب، أكيد بتسأل نفسك:

"يا ترى هيسألوني في إيه؟ وازاي أجهز نفسي كويس؟"

في المقال ده هنقدملك أشهر وأهم الأسئلة اللي بتتكرر في مقابلات الويب لمطورين الـ Frontend وBackend، مع نصائح وإجابات نموذجية تساعدك تتعامل بثقة في أي Interview.

🎨 أولًا: أسئلة الـ Frontend Developer

1. ما الفرق بين HTML وHTML5؟

الإجابة: HTML5 هي النسخة الأحدث من HTML وبتضيف مميزات زي:

  • عناصر جديدة زي <section>, <article>, <header>
  • دعم الفيديو والصوت بدون إضافات (مثل <video> و <audio>)
  • تحسين التعامل مع الجافاسكريبت عبر LocalStorage وSessionStorage
  • دعم أفضل لتطبيقات الويب التفاعلية

2. ما الفرق بين Inline وBlock Elements في CSS؟

الإجابة:

  • Inline Elements: بتكون في نفس السطر وما بتبدأش سطر جديد (زي <span>)
  • Block Elements: بتبدأ سطر جديد وتاخد العرض الكامل (زي <div>)

3. ما الفرق بين position: absolute و position: relative؟

الإجابة:

  • relative: بتحرك العنصر بالنسبة لمكانه الأصلي
  • absolute: بتحرك العنصر بالنسبة لأقرب عنصر أبوه (Parent) عنده position محدد

4. ما الفرق بين var وlet وconst في JavaScript؟

الإجابة:

  • var: قديمة وبتكون function-scoped
  • let: حديثة وبتكون block-scoped
  • const: زي let بس القيمة ما تتغيرش

5. ما هو الـ DOM؟

الإجابة: DOM هو Document Object Model، بيمثل صفحة الويب كـ "شجرة عناصر" تقدر تتعامل معاها بالجافاسكريبت لتغيير المحتوى أو التنسيق في الوقت الحقيقي.

6. ما الفرق بين React وVanilla JS؟

الإجابة: React مكتبة بتخليك تبني واجهات مستخدم ديناميكية بسهولة باستخدام مبدأ الـ Components، بينما Vanilla JS يعني كتابة كل شيء يدويًا باستخدام JavaScript العادية.

7. ما الفرق بين useState وuseEffect في React؟

الإجابة:

  • useState: لتخزين وتغيير القيم داخل الـ component
  • useEffect: لتنفيذ الأكواد الجانبية (مثل جلب بيانات أو تحديث العنوان)

8. ما هو Virtual DOM؟

الإجابة: هو نسخة خفيفة من DOM الحقيقي، React بتستخدمها عشان تحدد التغييرات اللي لازم تتطبق بدون إعادة تحميل الصفحة بالكامل → أداء أسرع.

9. ما الفرق بين SPA وMPA؟

الإجابة:

  • SPA (Single Page Application): موقع كامل في صفحة واحدة (زي Gmail أو React apps)
  • MPA (Multi Page Application): كل صفحة ليها تحميل منفصل (زي المتاجر القديمة)

10. ازاي تحسن أداء موقع Frontend؟

الإجابة:

  • ضغط الصور والملفات
  • استخدام CDN
  • Lazy Loading
  • تقليل عدد الـ HTTP Requests
  • استخدام الكاش

ثانيًا: أسئلة الـ Backend Developer

1. ما الفرق بين GET وPOST في HTTP؟

الإجابة:

  • GET: بيستخدم لجلب البيانات فقط
  • POST: بيستخدم لإرسال بيانات للسيرفر (زي نموذج تسجيل)

2. ما هو REST API؟

الإجابة: هو أسلوب تصميم لتطبيقات الويب، بيسمح للسيرفر يتواصل مع الواجهة الأمامية (Frontend) باستخدام HTTP requests مثل GET وPOST وPUT وDELETE.

3. ما الفرق بين Authentication وAuthorization؟

الإجابة:

  • Authentication: التحقق من هوية المستخدم (تسجيل الدخول)
  • Authorization: تحديد صلاحيات المستخدم بعد تسجيل الدخول

4. ما الفرق بين SQL وNoSQL؟

الإجابة:

  • SQL: قواعد بيانات منظمة تعتمد على الجداول (زي MySQL, PostgreSQL)
  • NoSQL: غير منظمة وتتعامل مع البيانات المرنة (زي MongoDB, Firebase)

5. ما الفرق بين Middleware وController في Express.js؟

الإجابة:

  • Middleware: كود بين الطلب (Request) والاستجابة (Response)، ممكن يستخدم للتحقق أو تسجيل البيانات
  • Controller: الجزء اللي فيه المنطق الأساسي (Logic) لكل Route

6. ما الفرق بين Synchronous وAsynchronous Code في Node.js؟

الإجابة:

  • Synchronous: الكود بيتنفذ خطوة بخطوة بالتسلسل
  • Asynchronous: بيقدر يشغل أوامر في الخلفية (زي استدعاء API) بدون إيقاف الكود

7. ما الفرق بين Cookies وLocalStorage؟

الإجابة:

  • Cookies: بتُرسل للسيرفر مع كل طلب، ومحدودة المساحة
  • LocalStorage: بتتخزن في المتصفح فقط ومساحتها أكبر

8. ما هو ORM؟

الإجابة: ORM (Object Relational Mapping) أداة بتخليك تتعامل مع قواعد البيانات كأنها كائنات في اللغة، زي Prisma أو Sequelize في Node.js.

9. ما الفرق بين Monolithic & Microservices Architecture؟

الإجابة:

  • Monolithic: تطبيق واحد كبير يحتوي على كل الأكواد
  • Microservices: تقسيم المشروع لخدمات مستقلة تتواصل مع بعضها

10. إزاي تأمن الـ API بتاعتك؟

الإجابة:

  • استخدام Tokens (زي JWT)
  • تشفير البيانات
  • تحديد صلاحيات المستخدمين
  • التحقق من الإدخال (Validation)

🎯 نصائح عامة قبل الانترفيو

  • 📘 راجع المشاريع اللي اشتغلت عليها كويس جدًا
  • ⚙️ افهم المفاهيم مش احفظها – interviewer بيختبر طريقة تفكيرك مش إجابتك
  • 💬 لما تتسأل سؤال صعب، فكر بصوت عالي ووضح منطقك
  • 🧠 درّب نفسك على الـ "حل المشكلات" في مواقع مثل: (LeetCode, HackerRank)
  • ✨ اهتم بشرح مشروعك الشخصي لأنه بيفرق جدًا في تقييمك

💬 الخلاصة

التحضير الجيد لأي مقابلة هو مفتاح الثقة. ابدأ بمرجعة الأسئلة دي، وافهمها مش بس تحفظها، لأن الانترفيو دايمًا بيدور على طريقة تفكيرك كمبرمج مش مجرد معلوماتك.

"التحضير مش إنك تعرف كل الإجابات... التحضير إنك تبقى جاهز تتعلم أي حاجة جديدة." 💪