|
|
4 days ago | |
|---|---|---|
| .. | ||
| 1-getting-started-lessons | 2 weeks ago | |
| 2-js-basics | 2 weeks ago | |
| 3-terrarium | 2 weeks ago | |
| 4-typing-game | 2 weeks ago | |
| 5-browser-extension | 2 weeks ago | |
| 6-space-game | 2 weeks ago | |
| 7-bank-project | 2 weeks ago | |
| 8-code-editor/1-using-a-code-editor | 2 weeks ago | |
| 9-chat-project | 2 weeks ago | |
| 10-ai-framework-project | 2 weeks ago | |
| Git-Basics | 2 weeks ago | |
| docs | 2 weeks ago | |
| lesson-template | 2 weeks ago | |
| memory-game | 2 weeks ago | |
| quiz-app | 2 weeks ago | |
| .co-op-translator.json | 4 days ago | |
| AGENTS.md | 4 days ago | |
| CODE_OF_CONDUCT.md | 2 weeks ago | |
| CONTRIBUTING.md | 2 weeks ago | |
| README.md | 4 days ago | |
| Roadmap.md | 4 days ago | |
| SECURITY.md | 2 weeks ago | |
| SUPPORT.md | 2 weeks ago | |
| _404.md | 2 weeks ago | |
| for-teachers.md | 2 weeks ago | |
README.md
تطوير الويب للمبتدئين - منهج دراسي
تعلم أساسيات تطوير الويب من خلال دورتنا الشاملة التي تستمر 12 أسبوعًا من قبل دعاة مايكروسوفت السحابيين. كل واحدة من الدروس الـ 24 تغوص في JavaScript و CSS و HTML عبر مشاريع عملية مثل التيراريوم، إضافات المتصفح، وألعاب الفضاء. شارك في الاختبارات والنقاشات والتكليفات العملية. حسّن مهاراتك وفعّل استيعابك للمعرفة باستخدام طريقتنا التعليمية القائمة على المشاريع. ابدأ رحلة الترميز الخاصة بك اليوم!
انضم إلى مجتمع Azure AI Foundry على Discord
اتبع هذه الخطوات للبدء باستخدام هذه الموارد:
- افعل فورك للمستودع: اضغط
- انسخ المستودع:
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git - انضم إلى Azure AI Foundry على Discord والتقِ بالخبراء والمطورين الآخرين
🌐 دعم متعدد اللغات
مدعوم عبر GitHub Action (مؤتمت ومُحدث دائمًا)
Arabic | Bengali | Bulgarian | Burmese (Myanmar) | Chinese (Simplified) | Chinese (Traditional, Hong Kong) | Chinese (Traditional, Macau) | Chinese (Traditional, Taiwan) | Croatian | Czech | Danish | Dutch | Estonian | Finnish | French | German | Greek | Hebrew | Hindi | Hungarian | Indonesian | Italian | Japanese | Kannada | Korean | Lithuanian | Malay | Malayalam | Marathi | Nepali | Nigerian Pidgin | Norwegian | Persian (Farsi) | Polish | Portuguese (Brazil) | Portuguese (Portugal) | Punjabi (Gurmukhi) | Romanian | Russian | Serbian (Cyrillic) | Slovak | Slovenian | Spanish | Swahili | Swedish | Tagalog (Filipino) | Tamil | Telugu | Thai | Turkish | Ukrainian | Urdu | Vietnamese
تفضل الاستنساخ محليًا؟
يحتوي هذا المستودع على أكثر من 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 Agent الجديدة لإكمالها!
تم إضافة تحدي جديد، ابحث عن "GitHub Copilot Agent Challenge 🚀" في معظم الفصول. هذا تحدي جديد لك لإكماله باستخدام GitHub Copilot ووضع Agent. إذا لم تستخدم وضع Agent من قبل فهو قادر ليس فقط على توليد النص بل يمكنه أيضًا إنشاء وتحرير الملفات، تشغيل الأوامر والمزيد.
📣 إعلان - مشروع جديد للبناء باستخدام الذكاء الاصطناعي التوليدي
تم إضافة مشروع مساعد الذكاء الاصطناعي الجديد، تفقده المشروع
📣 إعلان - منهج جديد حول الذكاء الاصطناعي التوليدي لـ 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 كمحرر نصوص، والذي يحتوي أيضًا على طرفية (Terminal) مدمجة. يمكنك تنزيل Visual Studio Code من هنا.
-
انسخ المستودع إلى جهازك. يمكنك فعل ذلك بالنقر على زر Code ونسخ الرابط:
CodeSpace ثم، افتح الطرفية داخل 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 | أساسيات JavaScript | أنواع بيانات JavaScript | أساسيات أنواع بيانات JavaScript | أنواع البيانات | Jasmine |
| 05 | أساسيات JavaScript | الدوال والطرق | تعلم عن الدوال والطرق لإدارة منطق التطبيق | الدوال والطرق | Jasmine و Christopher |
| 06 | أساسيات JavaScript | اتخاذ القرارات باستخدام JS | تعلم كيفية إنشاء شروط في الكود باستخدام طرق اتخاذ القرارات | اتخاذ القرارات | Jasmine |
| 07 | أساسيات JavaScript | المصفوفات والحلقات | العمل مع البيانات باستخدام المصفوفات والحلقات في JavaScript | المصفوفات والحلقات | Jasmine |
| 08 | Terrarium | HTML في التطبيق | بناء الـ HTML لإنشاء تيراريوم عبر الإنترنت، مع التركيز على بناء التخطيط | مقدمة إلى HTML | Jen |
| 09 | Terrarium | CSS في التطبيق | بناء CSS لتصميم التيراريوم عبر الإنترنت، مع التركيز على أساسيات CSS بما في ذلك جعل الصفحة متجاوبة | مقدمة إلى CSS | Jen |
| 10 | Terrarium | إغلاق JavaScript، التلاعب بـ DOM | بناء JavaScript لجعل التيراريوم يعمل كواجهة سحب وإفلات، مع التركيز على الإغلاق والتلاعب بـ DOM | إغلاق JavaScript، التلاعب بـ DOM | Jen |
| 11 | لعبة الطباعة | بناء لعبة الطباعة | تعلم كيفية استخدام أحداث لوحة المفاتيح لتحريك منطق تطبيق JavaScript | البرمجة المعتمدة على الأحداث | Christopher |
| 12 | امتداد المتصفح الأخضر | العمل مع المتصفحات | تعلم كيفية عمل المتصفحات، تاريخها، وكيفية إنشاء أول عناصر لامتداد المتصفح | حول المتصفحات | Jen |
| 13 | امتداد المتصفح الأخضر | بناء نموذج، استدعاء API وتخزين المتغيرات في التخزين المحلي | بناء عناصر JavaScript لامتداد المتصفح لاستدعاء API باستخدام متغيرات مخزنة في التخزين المحلي | واجهات برمجة التطبيقات، النماذج، والتخزين المحلي | Jen |
| 14 | امتداد المتصفح الأخضر | عمليات الخلفية في المتصفح، أداء الويب | استخدام عمليات الخلفية في المتصفح لإدارة أيقونة الامتداد؛ تعلم عن أداء الويب وبعض التحسينات لتحقيق الأداء الأفضل | مهام الخلفية والأداء | Jen |
| 15 | لعبة الفضاء | تطوير ألعاب متقدم باستخدام JavaScript | تعلم عن الوراثة باستخدام كل من الفئات والتكوين ونمط النشر/الاشتراك، تحضيرًا لبناء لعبة | مقدمة لتطوير الألعاب المتقدمة | Chris |
| 16 | لعبة الفضاء | الرسم على اللوحة | تعلم عن واجهة برمجة تطبيقات Canvas، المستخدمة لرسم العناصر على الشاشة | الرسم على اللوحة | Chris |
| 17 | لعبة الفضاء | تحريك العناصر على الشاشة | اكتشف كيف يمكن للعناصر أن تتحرك باستخدام الإحداثيات الكارتيزية وواجهة برمجة تطبيقات Canvas | تحريك العناصر | Chris |
| 18 | لعبة الفضاء | كشف التصادم | جعل العناصر تصطدم وتتفاعل مع بعضها باستخدام ضغطات المفاتيح وتوفير دالة تبريد لضمان أداء اللعبة | كشف التصادم | Chris |
| 19 | لعبة الفضاء | تتبع النقاط | إجراء حسابات رياضية بناءً على حالة وأداء اللعبة | تتبع النقاط | Chris |
| 20 | لعبة الفضاء | إنهاء وإعادة تشغيل اللعبة | تعلم عن إنهاء وإعادة تشغيل اللعبة، بما في ذلك تنظيف الموارد وإعادة تعيين قيم المتغيرات | شروط الانتهاء | Chris |
| 21 | تطبيق المصرف | قوالب HTML والمسارات في تطبيق ويب | تعلم كيفية إنشاء هيكل موقع متعدد الصفحات باستخدام التوجيه وقوالب HTML | قوالب HTML والمسارات | Yohan |
| 22 | تطبيق المصرف | بناء نموذج للدخول والتسجيل | تعلم كيفية بناء النماذج والتعامل مع روتين التحقق | النماذج | Yohan |
| 23 | تطبيق المصرف | طرق جلب واستخدام البيانات | كيف تتدفق البيانات في تطبيقك وخارجه، كيفية جلبها وتخزينها والتخلص منها | البيانات | Yohan |
| 24 | تطبيق المصرف | مفاهيم إدارة الحالة | تعلم كيفية احتفاظ تطبيقك بالحالة وكيفية إدارتها برمجيًا | إدارة الحالة | Yohan |
| 25 | كود المتصفح/VSCode | العمل مع VScode | تعلم كيفية استخدام محرر الكود | استخدام محرر VSCode | Chris |
| 26 | المساعدون الذكيون | العمل مع الذكاء الاصطناعي | تعلم كيفية بناء مساعدك الذكي الخاص | مشروع المساعد الذكي | Chris |
🏫 المنهجية التعليمية
تم تصميم منهجنا مع مبادئ تعليمية رئيسية:
- التعلم القائم على المشاريع
- الاختبارات المتكررة
البرنامج يعلم أساسيات JavaScript و HTML و CSS، بالإضافة إلى أحدث الأدوات والتقنيات التي يستخدمها مطورو الويب اليوم. سيتمكن الطلاب من اكتساب خبرة عملية من خلال بناء لعبة طباعة، تيراريوم افتراضي، امتداد متصفح صديق للبيئة، لعبة بأسلوب غزاة الفضاء، وتطبيق مصرفي للأعمال. بحلول نهاية السلسلة، سيكون لدى الطلاب فهم قوي لتطوير الويب.
🎓 يمكنك أخذ الدروس الأولى في هذا المنهج كـ مسار تعلّم على Microsoft Learn!
من خلال ضمان تطابق المحتوى مع المشاريع، يصبح التعلم أكثر متعة للطلاب ويزداد تثبيت المفاهيم. كما كتبنا عدة دروس تمهيدية في أساسيات JavaScript لتقديم المفاهيم، مع فيديو من مجموعة "سلسلة المبتدئين إلى: JavaScript" لتعليم الفيديو، بعض مؤلفيها ساهموا في هذا المنهج.
بالإضافة إلى ذلك، اختبار منخفض المخاطر قبل الدرس يهيئ نية الطالب لتعلم موضوع معين، في حين يضمن اختبار ثاني بعد الدرس مزيدًا من التثبيت. تم تصميم هذا المنهج ليكون مرنًا وممتعًا ويمكن أخذه كاملاً أو جزئيًا. تبدأ المشاريع صغيرة وتزداد تعقيدًا بنهاية دورة الـ 12 أسبوعًا.
على الرغم من أننا تجنبنا عمدًا تقديم أُطُر JavaScript للتركيز على المهارات الأساسية اللازمة كمطور ويب قبل تبني أُطر، فإن الخطوة التالية الجيدة لإكمال هذا المنهج هي تعلم Node.js عبر مجموعة أخرى من الفيديوهات: "سلسلة المبتدئين إلى: Node.js".
قم بزيارة مدونة السلوك وإرشادات المساهمة. نرحب بملاحظاتك البناءة!
🧭 الوصول بدون اتصال
يمكنك تشغيل هذه الوثائق بدون اتصال باستخدام Docsify. قم بتفريع هذا المستودع، تثبيت Docsify على جهازك المحلي، ثم في المجلد الجذر لهذا المستودع، اكتب docsify serve. سيتم تقديم الموقع على المنفذ 3000 على الوجهة المحلية الخاصة بك: localhost:3000.
يمكن العثور على ملف PDF لجميع الدروس هنا.
🎒 دورات أخرى
فريقنا ينتج دورات أخرى! تحقق من:
LangChain
Azure / Edge / MCP / Agents
سلسلة الذكاء الاصطناعي التوليدي
التعلم الأساسي
سلسلة كوبايلوت
الحصول على المساعدة
إذا واجهت صعوبة أو كان لديك أي أسئلة حول بناء تطبيقات الذكاء الاصطناعي. انضم إلى المتعلمين الآخرين والمطورين ذوي الخبرة في مناقشات حول MCP. إنها مجتمع داعم حيث تُرحب بالأسئلة ويُشارك المعرفة بحرية.
إذا كان لديك ملاحظات على المنتج أو أخطاء أثناء البناء قم بزيارة:
الترخيص
هذا المستودع مرخص برخصة MIT. راجع ملف LICENSE لمزيد من المعلومات.
تنويه: تمت ترجمة هذا المستند باستخدام خدمة الترجمة الآلية Co-op Translator. بينما نسعى لضمان الدقة، يرجى العلم أن الترجمات الآلية قد تحتوي على أخطاء أو عدم دقة. يجب اعتبار النسخة الأصلية من المستند بلغتها الأصلية المصدر الرسمي والموثوق. بالنسبة للمعلومات الهامة، يُنصح بالاعتماد على الترجمة البشرية المهنية. نحن غير مسؤولين عن أي سوء فهم أو تفسير ناتج عن استخدام هذه الترجمة.


