تجاوز إلى المحتوى

المسارات المراحل المعلّم الذكي

اللغةEnglish ابدأ مجانًا

المسارات المراحل المعلّم الذكي

/

تسجيل الدخول ابدأ مجانًا

جارٍ التحميل…

الرئيسية المسارات المعلّم حسابي

اختصارات لوحة المفاتيح

/: البحث
n: الدرس التالي
p: الدرس السابق
b: احفظ الدرس أو ألغِ حفظه
r: مراجعة اليوم
d: لوحتي
Ctrl+Enter: تحقّق من الحل أو شغّل الكود
?: هذه القائمة

مسارات مرتّبة لتعلّم هندسة البرمجيات والذكاء الاصطناعي بالعربي، وكل مثال فيها يشتغل داخل الصفحة.

التعلّم

المسارات هندسة البرمجيات الذكاء الاصطناعي الشبكات الأمن السيبراني

المنصة

عن درب الخصوصية شروط الاستخدام

حسابك

تسجيل الدخول حساب جديد

فكرة وتنفيذ

معاذ المطيري

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

© 2026 درب. كل الحقوق محفوظة.

الواجهات الأمامية · درب

المنهجالمرحلة 1: المبتدئ (Junior)

الواجهات الأمامية

خطوة البناء الأولى: الواجهة، أي ما يراه المستخدم ويضغط عليه. ثمانية دروس من الصفر تمامًا: HTML يبني هيكل الصفحة، وCSS يرتّبها ويجعلها تناسب الجوال، وJavaScript يجعلها تتفاعل وتكلّم الخادم، حتى تبني قائمة مهام كاملة وصفحة طلبات. كل مثال تعدّله وتشاهد نتيجته داخل الدرس.

الدروس: 10 دروس
المرحلة: المرحلة 1: المبتدئ (Junior)

ابدأ المسار

الدروس

نظرة عامةخطوة البناء الأولى: الواجهة، أي ما يراه المستخدم ويضغط عليه. ثمانية دروس من الصفر تمامًا: HTML يبني هيكل الصفحة، وCSS يرتّبها ويجعلها تناسب الجوال، وJavaScript يجعلها تتفاعل وتكلّم الخادم، حتى تبني قائمة مهام كاملة وصفحة طلبات. كل مثال تعدّله وتشاهد نتيجته داخل الدرس.
أول صفحة ويب: HTML من الصفرما هي صفحة الويب أصلًا، وكيف تكتب أول ملف HTML وتفتحه في المتصفح: الوسم والعنصر والخاصية، هيكل الملف، العناوين والفقرات، الروابط والصور، القوائم والجداول، وكيف تكتشف أخطاءك بأدوات المطوّر. كل مثال تعدّله وتشاهد نتيجته فورًا.
HTML الدلالي: هيكل له معنى ونماذج ووصول للجميعتنتقل من «صفحة تظهر» إلى «صفحة صحيحة»: هيكل الصفحة الدلالي، النماذج بكل أنواع الحقول والتحقّق المدمج، الصور المتجاوبة والوسائط، إمكانية الوصول بلوحة المفاتيح والقارئ الصوتي، ومعلومات الصفحة لمحركات البحث والمشاركة.
CSS من الصفر: الألوان والخطوط والصندوقكيف تلبس صفحتك ثوبها: أين تكتب CSS، شكل القاعدة، المحدّدات (العنصر والصنف والمعرّف وحالة المرور)، الألوان، الخطوط والوحدات، نموذج الصندوق بحشوته وإطاره وهامشه، ومن يفوز حين تتعارض قاعدتان. كل قاعدة تغيّرها وتراها فورًا.
CSS للتخطيط: Flexbox وGrid والتجاوبكيف تضع الصناديق بجانب بعضها: Flexbox للصف الواحد، Grid للشبكة وتخطيط الصفحة، التصميم المتجاوب للجوال أولًا واستعلامات الوسائط، المتغيرات والوضع الليلي، الخصائص المنطقية التي تقلب الاتجاه للعربية، والانتقالات الناعمة. تبني صفحة مقهى كاملة تعمل على الجوال والحاسوب.
JavaScript من الصفر: القيم والقرارات والتكرارأول لغة برمجة تشغّلها في المتصفح: أين تكتب JavaScript وأين ترى نتيجتها، المتغيرات const وlet، أنواع القيم (نص ورقم ومنطقي)، العمليات على النصوص والأرقام، المقارنة الصارمة، القرار بـ if، والتكرار بـ for وwhile. تبني حاسبة فاتورة مقهى، وكل مثال تشغّله وتعدّله داخل الدرس.
JavaScript: الدوال والمصفوفات والكائناتالأدوات التي يُبنى بها كل برنامج حقيقي: الدوال (المعاملات والقيمة المعادة والدوال السهمية)، المصفوفات وطرقها map وfilter وreduce وfind وsort، الكائنات والخصائص والطرق، التفكيك والنشر، وJSON لنقل البيانات. تبني تقرير مبيعات مقهى من قائمة طلبات.
JavaScript والـ DOM: صفحة تتفاعلكيف يغيّر JavaScript الصفحة أمامك: شجرة DOM، اختيار العناصر بـ querySelector، تعديل النص والأصناف والخصائص، إنشاء عناصر وحذفها، الأحداث (click وinput وsubmit) وتفويضها، فكرة «الحالة ثم الرسم»، وحفظ البيانات في localStorage، والحماية من XSS. تبني قائمة مهام كاملة تعمل داخل الدرس.
JavaScript غير المتزامن: المؤقّتات وPromise وfetchكيف تنتظر الصفحة شيئًا بطيئًا، كرد خادم، دون أن تتجمّد: حلقة الأحداث والمؤقّتات، الوعود Promise، الكلمتان async وawait، معالجة الأخطاء بـ try وcatch، جلب البيانات من API بـ fetch، وحالات التحميل والخطأ في الواجهة، وتشغيل عدة طلبات معًا.
الخلاصة والمصادرالخلاصة وقاموس المصطلحات لهذا القسم.