دورة مقابلة الواجهة الأمامية
دورة منظمة لمقابلات الواجهة الأمامية تغطي JavaScript وHTML وCSS وReact والمتصفح والأداء وإمكانية الوصول والأمان مع أسئلة مرتبطة.
تقدم الدورة
0 / 5
العودة إلى الدورات
ما ستتعلمه
- فهم شكل المقابلة.
- شرح JavaScript وعدم التزامن.
- إنشاء HTML دلالي وCSS متجاوب.
- استخدام مكونات React وخطافاتها.
- تحسين الأداء وإمكانية الوصول والأمان.
قبل أن تبدأ
- معرفة JavaScript وHTML مفيدة.
- يُنصح بأساسيات React.
- بناء مكونات صغيرة يساعد على التدريب.
درس 1 فهم مقابلة الواجهة الأمامية
تغطي مقابلات الواجهة الأمامية JavaScript وHTML وCSS وReact والمتصفح والأداء وإمكانية الوصول والأمان. يجب شرح المفاهيم وكتابة الكود وحل مشكلات الواجهة. ابدأ بـJavaScript ثم HTML وCSS ثم React ثم الأحداث والأداء والأمان. اشرح event loop ومفاتيح React وCore Web Vitals. تنظم هذه الدورة المواضيع في خمس دروس مع 60 سؤالًا أصليًا.
مثال
مثال: اشرح الإغلاقات والوعود في أساسيات JavaScript.درس 2 أساسيات JavaScript
تبدأ مقابلات JavaScript بالأساسيات: الإغلاقات والرفع والمساواة الصارمة والوعود وحلقة الأحداث وأساليب المصفوفات. يحافظ الإغلاق على النطاق الخارجي وتتجنب === التحويل وتشير الوعود إلى عدم التزامن وتنفذ حلقة الأحداث المهام الدقيقة. map وfilter وreduce أساسية والدالة النقية بلا آثار جانبية وعدم التغيير ينشئ قيمًا جديدة.
مثال
مثال: [1, 2, 3].map(n => n * 2) يعيد [2, 4, 6].درس 3 HTML وCSS والتخطيط
يحسّن HTML الدلالي إمكانية الوصول وتحسين محركات البحث. تحدد الخصوصية قاعدة CSS الفائزة. نموذج الصندوق هو المحتوى والحشوة والحدود والهامش. Flexbox أحادي البعد وGrid ثنائي. rem جذري وem أبوي وvw عرض وvh ارتفاع. تجعل استعلامات الوسائط التصميم متجاوبًا. position: fixed تستخدم العرض وborder-box يشمل الحشوة.
مثال
مثال: استخدم CSS Grid للوحة معلومات مع شريط جانبي ومنطقة محتوى.درس 4 React والمتصفح
يغطي React المكونات والخصائص والحالة والخطافات والعرض. useState وuseEffect وuseMemo خطافات رئيسية. يحسّن DOM الافتراضي التحديثات وتحتاج القوائم إلى مفاتيح. يغطي المتصفح DOM والأحداث وحلقة الأحداث والمهام الدقيقة والكوكيز. تستخدم التفويض مستمعًا أبويًا ويوقف stopPropagation الفقاعة ويمنع preventDefault الإجراء.
مثال
مثال: const [count, setCount] = useState(0) ينشئ حالة عدّاد.درس 5 الأداء وإمكانية الوصول والاستراتيجية
تطلب أسئلة الأداء صفحات أسرع. يؤخر debouncing وينظّم throttling ويؤجل lazy loading. Core Web Vitals: LCP وINP وCLS. إمكانية الوصول: HTML دلالي وARIA ولوحة المفاتيح. الأمان: XSS وCSP وCORS. أجب بهيكل: المشكلة والمقاييس والأسباب والحلول.