38 KiB

Raw Blame History

تطوير الويب للمبتدئين - منهج دراسي

تعلم أساسيات تطوير الويب مع دورتنا الشاملة التي تمتد 12 أسبوعًا بقيادة Microsoft Cloud Advocates. كل درس من الدروس الـ 24 يغوص في JavaScript و CSS و HTML من خلال مشاريع عملية مثل التيراريومز، إضافات المتصفح، وألعاب الفضاء. شارك في الاختبارات، المناقشات، والواجبات العملية. عزز مهاراتك وحقق أفضل استفادة من معرفتك من خلال منهجنا الفعال القائم على المشاريع. ابدأ رحلتك في البرمجة اليوم!

انضم إلى مجتمع Azure AI Foundry على ديسكورد

اتبع هذه الخطوات لتبدأ باستخدام هذه الموارد:

إنشاء فرع من المستودع: انقر
استنساخ المستودع: git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
انضم إلى Azure AI Foundry Discord وقابل الخبراء والمطورين الآخرين

🌐 دعم متعدد اللغات

مدعوم عبر GitHub Action (آلي & محدث دائمًا)

هل تفضل الاستنساخ محليًا؟

يحتوي هذا المستودع على أكثر من 50 ترجمة لغوية مما يزيد بشكل كبير حجم التنزيل. للاستنساخ بدون الترجمات، استخدم sparse checkout:
git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git
cd Web-Dev-For-Beginners
git sparse-checkout set --no-cone '/*' '!translations' '!translated_images'
هذا يمنحك كل ما تحتاجه لإكمال الدورة مع تحميل أسرع بكثير.

إذا كنت ترغب في دعم المزيد من اللغات، قائمة اللغات المدعومة موجودة هنا

🧑‍🎓 هل أنت طالب؟

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

📣 إعلان - تحديات وضع وكيل GitHub Copilot الجديد لإكمالها!

تمت إضافة تحدي جديد، ابحث عن "تحدي وكيل GitHub Copilot 🚀" في معظم الفصول. هذا تحدي جديد لك لتكملته باستخدام GitHub Copilot ووضع الوكيل. إذا لم تستخدم وضع الوكيل من قبل، فهو قادر ليس فقط على توليد النصوص بل يمكنه أيضًا إنشاء وتحرير الملفات، تنفيذ الأوامر والمزيد.

📣 إعلان - مشروع جديد للبناء باستخدام الذكاء الاصطناعي التوليدي

تمت إضافة مشروع مساعد الذكاء الاصطناعي الجديد، تفقده المشروع

📣 إعلان - منهج جديد عن الذكاء الاصطناعي التوليدي للـ JavaScript تم إصداره للتو

لا تفوت منهج الذكاء الاصطناعي التوليدي الجديد!

قم بزيارة https://aka.ms/genai-js-course للبدء!

دروس تغطي كل شيء من الأساسيات إلى RAG.
تفاعل مع شخصيات تاريخية باستخدام GenAI وتطبيقنا المصاحب.
سرد ممتع وجذاب، ستسافر عبر الزمن!

كل درس يتضمن مهمة يجب إتمامها، اختبار معرفة، وتحدي لتوجيهك في تعلم موضوعات مثل:

التهيئة و هندسة التهيئة
إنشاء تطبيقات النصوص والصور
تطبيقات البحث

قم بزيارة https://aka.ms/genai-js-course للبدء!

🌱 البدء

أيها المعلمون، لقد قمنا بتضمين بعض الاقتراحات حول كيفية استخدام هذا المنهج الدراسي. نود الحصول على ملاحظاتكم في منتدى المناقشة الخاص بنا!

المتعلمون، لكل درس، ابدأ باختبار قبل المحاضرة، ثم اقرأ المادة، أكمل الأنشطة المختلفة، وتحقق من فهمك باستخدام اختبار بعدها.

لتعزيز تجربتك التعليمية، تواصل مع زملائك للعمل معًا على المشاريع! نرحب بالنقاشات في منتدى المناقشة حيث سيكون فريق المشرفين متاحًا للرد على أسئلتك.

لتعزيز تعليمك، نوصي بشدة استكشاف Microsoft Learn لمواد دراسية إضافية.

📋 إعداد بيئتك

هذا المنهج يحتوي على بيئة تطوير جاهزة للاستخدام! عند البدء يمكنك الاختيار لتشغيل المنهج في Codespace (بيئة قائمة على المتصفح لا تحتاج للتثبيت), أو محليًا على جهازك باستخدام محرر نصوص مثل Visual Studio Code.

إنشاء مستودعك

لتسهيل حفظ عملك، يُنصح بإنشاء نسخة خاصة بك من هذا المستودع. يمكنك فعل ذلك بالنقر على زر Use this template في أعلى الصفحة. سيُنشئ هذا مستودعًا جديدًا في حساب GitHub الخاص بك مع نسخة من المنهج.

اتبع هذه الخطوات:

إنشاء فرع من المستودع: انقر على زر "Fork" في أعلى يمين هذه الصفحة.
استنساخ المستودع: git clone https://github.com/microsoft/Web-Dev-For-Beginners.git

تشغيل المنهج في Codespace

في نسختك من هذا المستودع التي أنشأتها، انقر على زر Code واختر Open with Codespaces. سيُنشئ هذا Codespace جديدًا لتعمل فيه.

تشغيل المنهج محليًا على جهازك

لتشغيل هذا المنهج محليًا على جهازك، ستحتاج إلى محرر نصوص، متصفح، وأداة سطر أوامر. درسك الأول، مقدمة إلى لغات البرمجة وأدوات المهنة، سيرشدك إلى الخيارات المتنوعة لكل من هذه الأدوات لتختار الأنسب لك.

توصيتنا هي استخدام Visual Studio Code كمحرر، والذي يحتوي أيضًا على طرفية مدمجة. يمكنك تحميل Visual Studio Code من هنا.

استنسخ المستودع إلى جهازك. يمكنك ذلك بالنقر على زر Code ونسخ الرابط:

CodeSpace ثم، افتح Terminal داخل Visual Studio Code وقم بتشغيل الأمر التالي، مع استبدال <your-repository-url> بالرابط الذي نسخته للتو:
```
git clone <your-repository-url>
```
افتح المجلد في Visual Studio Code. يمكنك القيام بذلك بالنقر على ملف > فتح مجلد واختيار المجلد الذي قمت باستنساخه للتو.

الإضافات الموصى بها لـ Visual Studio Code:

Live Server - لمعاينة صفحات HTML داخل Visual Studio Code

Copilot - لمساعدتك على كتابة الكود بشكل أسرع

📂 تتضمن كل درس:

مذكرة تخطيطية اختيارية
فيديو داعم اختياري
اختبار إحماء قبل الدرس
الدرس المكتوب
لدروس المشروع، إرشادات خطوة بخطوة حول كيفية بناء المشروع
اختبارات معرفة
تحدي
قراءة داعمة
مهمة
اختبار بعد الدرس

ملاحظة حول الاختبارات: جميع الاختبارات موجودة في مجلد Quiz-app، مجموع 48 اختبارًا يحتوي كل منها على ثلاث أسئلة. وهي متاحة هنا ويمكن تشغيل تطبيق الاختبارات محليًا أو نشره على Azure؛ اتبع التعليمات في مجلد quiz-app.

🗃️ الدروس

	اسم المشروع	المفاهيم التي يتم تعليمها	الأهداف التعليمية	الدرس المرتبط	المؤلف
01	البدء	مقدمة في البرمجة وأدوات العمل	تعلم الأسس الأساسية التي تقوم عليها معظم لغات البرمجة وعن البرامج التي تساعد المطورين المحترفين في أداء مهامهم	مقدمة في لغات البرمجة وأدوات العمل	Jasmine
02	البدء	أساسيات GitHub، تتضمن العمل ضمن فريق	كيفية استخدام GitHub في مشروعك وكيفية التعاون مع الآخرين على قاعدة الكود	مقدمة إلى GitHub	Floor
03	البدء	الوصولية	تعلم أساسيات الوصولية على الويب	أساسيات الوصولية	Christopher
04	أساسيات JS	أنواع بيانات JavaScript	أساسيات أنواع بيانات JavaScript	أنواع البيانات	Jasmine
05	أساسيات JS	الدوال والطرق	تعلم عن الدوال والطرق لإدارة تدفق منطق التطبيق	الدوال والطرق	Jasmine and Christopher
06	أساسيات JS	اتخاذ القرارات باستخدام JS	تعلم كيفية إنشاء شروط في كودك باستخدام طرق اتخاذ القرار	اتخاذ القرارات	Jasmine
07	أساسيات JS	المصفوفات والحلقات	العمل مع البيانات باستخدام المصفوفات والحلقات في JavaScript	المصفوفات والحلقات	Jasmine
08	Terrarium	HTML في التطبيق العملي	بناء HTML لإنشاء تيراريوم على الإنترنت مع التركيز على بناء التخطيط	مقدمة إلى HTML	Jen
09	Terrarium	CSS في التطبيق العملي	بناء CSS لتنسيق التيراريوم على الإنترنت مع التركيز على أساسيات CSS تشمل جعل الصفحة متجاوبة	مقدمة إلى CSS	Jen
10	Terrarium	إغلاق جافاسكريبت، والتلاعب بالـ DOM	بناء كود JavaScript لجعل التيراريوم يعمل كواجهة سحب وإفلات، مع التركيز على الإغلاقات والتلاعب بـ DOM	إغلاقات JavaScript، والتلاعب بالـ DOM	Jen
11	Typing Game	بناء لعبة كتابة	تعلم كيفية استخدام أحداث لوحة المفاتيح لتشغيل منطق تطبيق JavaScript الخاص بك	البرمجة المعتمدة على الأحداث	Christopher
12	Green Browser Extension	العمل مع المتصفحات	تعلم كيف تعمل المتصفحات، تاريخها وكيفية وضع الهيكل الأول لعناصر ملحق المتصفح	عن المتصفحات	Jen
13	Green Browser Extension	بناء نموذج، استدعاء API وتخزين المتغيرات محليًا	بناء عناصر JavaScript لملحق متصفحك لاستدعاء API باستخدام متغيرات مخزنة في التخزين المحلي	APIs، النماذج، والتخزين المحلي	Jen
14	Green Browser Extension	العمليات الخلفية في المتصفح، أداء الويب	استخدم العمليات الخلفية للمتصفح لإدارة أيقونة الإضافة؛ تعرف على أداء الويب وبعض التحسينات لتحقيق أفضل أداء	المهام الخلفية والأداء	Jen
15	Space Game	تطوير ألعاب أكثر تقدمًا مع JavaScript	تعلم عن الوراثة باستخدام كل من الصفوف والتكوين ونمط النشر والاشتراك، استعدادًا لبناء لعبة	مقدمة لتطوير الألعاب المتقدم	Chris
16	Space Game	الرسم على اللوحة	تعلم عن Canvas API، المستخدمة لرسم العناصر على الشاشة	الرسم على اللوحة	Chris
17	Space Game	تحريك العناصر حول الشاشة	اكتشف كيف تكسب العناصر حركة باستخدام الإحداثيات الكارتيزية وCanvas API	تحريك العناصر	Chris
18	Space Game	اكتشاف التصادم	جعل العناصر تصطدم وتتفاعل مع بعضها باستخدام ضغطات المفاتيح وتوفير دالة تبريد لضمان أداء اللعبة	اكتشاف التصادم	Chris
19	Space Game	الاحتفاظ بالنتيجة	إجراء حسابات رياضية بناءً على حالة اللعبة وأدائها	الاحتفاظ بالنتيجة	Chris
20	Space Game	إنهاء اللعبة وإعادة تشغيلها	تعلم عن إنهاء اللعبة وإعادة تشغيلها، بما في ذلك تنظيف الموارد وإعادة ضبط قيم المتغيرات	شرط النهاية	Chris
21	Banking App	قوالب HTML والمسارات في تطبيق ويب	تعلم كيفية إنشاء هيكل موقع متعدد الصفحات باستخدام التوجيه وقوالب HTML	قوالب HTML والمسارات	Yohan
22	Banking App	بناء نموذج تسجيل الدخول والتسجيل	تعلم عن بناء النماذج والتعامل مع روتين التحقق	النماذج	Yohan
23	Banking App	طرق جلب البيانات واستخدامها	كيف تتدفق البيانات داخل وخارج تطبيقك، كيفية جلبها وتخزينها والتخلص منها	البيانات	Yohan
24	Banking App	مفاهيم إدارة الحالة	تعلم كيف يحتفظ تطبيقك بالحالة وكيفية إدارتها برمجياً	إدارة الحالة	Yohan
25	Browser/VScode Code	العمل مع VScode	تعلم كيفية استخدام محرر الأكواد	استخدام محرر الأكواد VScode	Chris
26	AI Assistants	العمل مع الذكاء الاصطناعي	تعلم كيف تبني مساعدك الذكي الخاص	مشروع مساعد ذكي	Chris

🏫 المنهجية التعليمية

تم تصميم منهجنا الدراسي استنادًا إلى مبدئين تربويين رئيسيين:

التعلم القائم على المشاريع
الاختبارات المتكررة

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

🎓 يمكنك أخذ الدروس القليلة الأولى في هذا المنهج كـ مسار تعلّم على Microsoft Learn!

من خلال ضمان توافق المحتوى مع المشاريع، يصبح التعلم أكثر تشويقًا للطلاب ويزيد من الاحتفاظ بالمفاهيم. كتبنا أيضًا عدة دروس تمهيدية في أساسيات JavaScript لتعريف المفاهيم، مقترنة بفيديو من مجموعة "سلسلة للمبتدئين إلى: JavaScript"، بعض مؤلفيها ساهموا في هذا المنهج.

بالإضافة إلى ذلك، يحدد اختبار منخفض المخاطر قبل الصف نية الطالب نحو تعلم موضوع معين، بينما يضمن اختبار آخر بعد الصف مزيدًا من الاحتفاظ بالمفاهيم. تم تصميم هذا المنهج ليكون مرنًا وممتعًا ويمكن أخذه بالكامل أو جزئيًا. تبدأ المشاريع صغيرة وتصبح أكثر تعقيدًا في نهاية دورة الـ 12 أسبوعًا.

بينما تجنبنا عمدًا تقديم أطر عمل JavaScript للتركيز على المهارات الأساسية التي يحتاجها مطور الويب قبل اعتماد إطار عمل، تكون الخطوة التالية الجيدة بعد إتمام هذا المنهج هي تعلم Node.js عبر مجموعة أخرى من الفيديوهات: "السلسلة للمبتدئين إلى: Node.js".

زر إرشاداتنا في مدونة السلوك والمساهمة. نرحب بتعليقاتك البناءة!

🧭 الوصول دون اتصال

يمكنك تشغيل هذه الوثائق دون اتصال باستخدام Docsify. قم بنسخ هذا المستودع، ثبت Docsify على جهازك المحلي، ثم في المجلد الجذر لهذا المستودع، اكتب docsify serve. سيتم تقديم الموقع على المنفذ 3000 على مضيفك المحلي: localhost:3000.

📘 ملف PDF

يمكن العثور على ملف PDF لجميع الدروس هنا.

🎒 دورات أخرى

فريقنا ينتج دورات أخرى! اطلع على:

LangChain

Azure / Edge / MCP / Agents

سلسلة الذكاء الاصطناعي التوليدي

التعلم الأساسي

سلسلة كوبايلوت

الحصول على المساعدة

إذا واجهت مشاكل أو كان لديك أي أسئلة حول بناء تطبيقات الذكاء الاصطناعي. انضم إلى المتعلمين الآخرين والمطورين ذوي الخبرة في مناقشات حول MCP. إنها مجتمع داعم حيث تُرحب بالأسئلة ويُشارك المعرفة بحرية.

إذا كان لديك ملاحظات على المنتج أو أخطاء أثناء البناء، قم بزيارة:

الترخيص

هذا المستودع مرخص بموجب رخصة MIT. انظر ملف LICENSE للمزيد من المعلومات.

إخلاء مسؤولية: تمت ترجمة هذا المستند باستخدام خدمة الترجمة الآلية Co-op Translator. وبينما نسعى لتحقيق الدقة، يرجى العلم أن الترجمات الآلية قد تحتوي على أخطاء أو عدم دقة. يجب اعتبار المستند الأصلي بلغته الأصلية المصدر الموثوق به. للمعلومات الهامة، يُنصح بالاعتماد على الترجمة البشرية المهنية. نحن غير مسؤولين عن أي سوء فهم أو تفسير ناتج عن استخدام هذه الترجمة.

38 KiB Raw Blame History