38 KiB

Raw Blame History

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

تعلم أساسيات تطوير الويب مع دورتنا الشاملة التي تستمر 12 أسبوعًا من Microsoft Cloud Advocates. كل من الدروس الـ 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 (مؤتمت ويُحدّث دائمًا)

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

يحتوي هذا المستودع على أكثر من 50 ترجمة للغات مما يزيد من حجم التنزيل بشكل كبير. للاكتفاء بالنسخ بدون الترجمات، استخدم sparse checkout:

Bash / macOS / Linux:
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'
CMD (Windows):
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 🚀" في معظم الفصول. هذا تحدٍ جديد يجب عليك إكماله باستخدام 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 كمحرر، والذي يحتوي أيضًا على طرفية مدمجة. يمكنك تنزيل Visual Studio Code من هنا.

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

CodeSpace

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

الإضافات الموصى بها لـ 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	أنواع بيانات جافاسكريبت	الأساسيات المتعلقة بأنواع بيانات جافاسكريبت	أنواع البيانات	Jasmine
05	أساسيات JS	الدوال والطرق	تعلم عن الدوال والطرق لإدارة منطق تطبيق	الدوال والطرق	Jasmine and Christopher
06	أساسيات JS	اتخاذ القرارات باستخدام JS	تعلم كيفية إنشاء الشروط في الكود باستخدام طرق اتخاذ القرار	اتخاذ القرارات	Jasmine
07	أساسيات JS	المصفوفات والحلقات	العمل مع البيانات باستخدام المصفوفات والحلقات في جافاسكريبت	المصفوفات والحلقات	Jasmine
08	Terrarium	HTML في التطبيق	بناء HTML لإنشاء تيراريوم على الإنترنت، مع التركيز على بناء التخطيط	مقدمة في HTML	Jen
09	Terrarium	CSS في التطبيق	بناء CSS لتنسيق التيراريوم على الإنترنت، مع التركيز على أساسيات CSS بما في ذلك جعل الصفحة متجاوبة	مقدمة في CSS	Jen
10	Terrarium	إغلاق الجافاسكريبت، معالجة DOM	بناء جافاسكريبت لجعل التيراريوم يعمل كواجهة السحب والإفلات، مع التركيز على الإغلاق ومعالجة DOM	إغلاق الجافاسكريبت، معالجة DOM	Jen
11	Typing Game	بناء لعبة الطباعة	تعلم كيفية استخدام أحداث لوحة المفاتيح للتحكم في منطق تطبيق جافاسكريبت	برمجة معتمدة على الأحداث	Christopher
12	Green Browser Extension	العمل مع المتصفحات	تعلم كيفية عمل المتصفحات، تاريخها، وكيفية هيكلة العناصر الأولى لإضافة متصفح	حول المتصفحات	Jen
13	Green Browser Extension	بناء نموذج، استدعاء API وتخزين المتغيرات في التخزين المحلي	بناء عناصر جافاسكريبت لإضافة المتصفح لاستدعاء API باستخدام المتغيرات المخزنة في التخزين المحلي	APIs، النماذج والتخزين المحلي	Jen
14	Green Browser Extension	العمليات الخلفية في المتصفح، أداء الويب	استخدام العمليات الخلفية للمتصفح لإدارة أيقونة الإضافة؛ التعرف على أداء الويب وبعض التحسينات لجعل	المهام الخلفية والأداء	Jen
15	Space Game	تطوير الألعاب الأكثر تقدماً باستخدام جافاسكريبت	تعلم عن الوراثة باستخدام الفئات والتكوين ونمط Pub/Sub، تمهيدًا لبناء لعبة	مقدمة في تطوير الألعاب المتقدم	Chris
16	Space Game	الرسم على القماش	تعلم عن واجهة برمجة التطبيقات Canvas، المستخدمة لرسم العناصر على الشاشة	الرسم على القماش	Chris
17	Space Game	تحريك العناصر على الشاشة	اكتشف كيف يمكن للعناصر اكتساب الحركة باستخدام الإحداثيات الكارتيزية وواجهة API الخاصة بـ Canvas	تحريك العناصر	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 أسبوعًا.

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

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

🧭 الوصول في وضع عدم الاتصال

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

📘 ملف PDF

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

🎒 دورات أخرى

يقوم فريقنا بإنتاج دورات أخرى! تفقد:

LangChain

Azure / Edge / MCP / Agents

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

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

سلسلة المساعد الشخصي (Copilot)

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

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

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

الترخيص

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

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

38 KiB Raw Blame History