|
|
3 months ago | |
|---|---|---|
| .. | ||
| 1-getting-started-lessons | 3 months ago | |
| 2-js-basics | 3 months ago | |
| 3-terrarium | 3 months ago | |
| 4-typing-game | 3 months ago | |
| 5-browser-extension | 3 months ago | |
| 6-space-game | 3 months ago | |
| 7-bank-project | 3 months ago | |
| 8-code-editor/1-using-a-code-editor | 3 months ago | |
| docs | 3 months ago | |
| lesson-template | 3 months ago | |
| quiz-app | 3 months ago | |
| CODE_OF_CONDUCT.md | 3 months ago | |
| CONTRIBUTING.md | 3 months ago | |
| README.md | 3 months ago | |
| SECURITY.md | 3 months ago | |
| SUPPORT.md | 3 months ago | |
| _404.md | 3 months ago | |
| for-teachers.md | 3 months ago | |
README.md
تطوير الويب للمبتدئين - منهج دراسي
تعلم أساسيات تطوير الويب من خلال دورة شاملة لمدة 12 أسبوعًا مقدمة من Microsoft Cloud Advocates. تتناول كل واحدة من الدروس الـ 24 مواضيع JavaScript وCSS وHTML من خلال مشاريع عملية مثل الحدائق المصغرة، إضافات المتصفح، وألعاب الفضاء. شارك في الاختبارات، المناقشات، والمهام العملية. عزز مهاراتك واحتفظ بمعرفتك من خلال منهجنا الفعّال القائم على المشاريع. ابدأ رحلتك في البرمجة اليوم!
🧑🎓 هل أنت طالب؟
قم بزيارة صفحة مركز الطلاب حيث ستجد موارد للمبتدئين، حزم للطلاب وحتى طرق للحصول على قسيمة شهادة مجانية. هذه الصفحة تستحق الإشارة إليها ومراجعتها من وقت لآخر حيث نقوم بتحديث المحتوى شهريًا.
📣 إعلان - منهج جديد حول الذكاء الاصطناعي التوليدي لـ JavaScript تم إطلاقه للتو
لا تفوت منهجنا الجديد حول الذكاء الاصطناعي التوليدي!
قم بزيارة https://aka.ms/genai-js-course للبدء!
- دروس تغطي كل شيء من الأساسيات إلى RAG.
- تفاعل مع شخصيات تاريخية باستخدام الذكاء الاصطناعي التوليدي وتطبيقنا المرافق.
- قصة ممتعة وجذابة، ستسافر عبر الزمن!
كل درس يتضمن مهمة لإكمالها، اختبار معرفة، وتحديًا لتوجيهك في تعلم مواضيع مثل:
- إنشاء التعليمات وتطويرها
- إنشاء تطبيقات النصوص والصور
- تطبيقات البحث
قم بزيارة 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 ونسخ الرابط:
ثم افتح Terminal داخل Visual Studio Code وقم بتشغيل الأمر التالي، مع استبدال
<your-repository-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 | أنواع البيانات في JavaScript | أساسيات أنواع البيانات في JavaScript | أنواع البيانات | Jasmine |
| 05 | أساسيات JS | الوظائف والأساليب | تعلم كيفية استخدام الوظائف والأساليب لإدارة تدفق منطق التطبيق | الوظائف والأساليب | Jasmine and Christopher |
| 06 | أساسيات JS | اتخاذ القرارات باستخدام JS | تعلم كيفية إنشاء شروط في الكود باستخدام طرق اتخاذ القرارات | اتخاذ القرارات | Jasmine |
| 07 | أساسيات JS | المصفوفات والحلقات | العمل مع البيانات باستخدام المصفوفات والحلقات في JavaScript | المصفوفات والحلقات | Jasmine |
| 08 | الحديقة المصغرة | HTML في الممارسة | بناء HTML لإنشاء حديقة مصغرة على الإنترنت، مع التركيز على بناء التخطيط | مقدمة إلى HTML | Jen |
| 09 | الحديقة المصغرة | CSS في الممارسة | بناء CSS لتنسيق الحديقة المصغرة على الإنترنت، مع التركيز على أساسيات CSS بما في ذلك جعل الصفحة متجاوبة | مقدمة إلى CSS | Jen |
| 10 | الحديقة المصغرة | إغلاق JavaScript، التلاعب بـ DOM | بناء JavaScript لجعل الحديقة المصغرة تعمل كواجهة سحب/إفلات، مع التركيز على الإغلاق والتلاعب بـ DOM | إغلاق JavaScript، التلاعب بـ DOM | Jen |
| 11 | لعبة الكتابة | بناء لعبة كتابة | تعلم كيفية استخدام أحداث لوحة المفاتيح لتحريك منطق تطبيق 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 | تعلم عن الوراثة باستخدام الفئات والتركيب ونمط Pub/Sub، كتحضير لبناء لعبة | مقدمة لتطوير الألعاب المتقدم | 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 |
🏫 التربية
تم تصميم منهجنا بناءً على مبدأين تربويين رئيسيين:
- التعلم القائم على المشاريع
- الاختبارات المتكررة
يعلم البرنامج أساسيات JavaScript وHTML وCSS، بالإضافة إلى أحدث الأدوات والتقنيات التي يستخدمها مطورو الويب اليوم. سيحصل الطلاب على فرصة لتطوير خبرة عملية من خلال بناء لعبة كتابة، تيراريوم افتراضي، إضافة متصفح صديقة للبيئة، لعبة بأسلوب غزو الفضاء، وتطبيق مصرفي للشركات. بحلول نهاية السلسلة، سيكون لدى الطلاب فهم قوي لتطوير الويب.
🎓 يمكنك أخذ الدروس الأولى في هذا المنهج كـ مسار تعلم على Microsoft Learn!
من خلال ضمان توافق المحتوى مع المشاريع، تصبح العملية أكثر جاذبية للطلاب ويتم تعزيز الاحتفاظ بالمفاهيم. كما كتبنا عدة دروس تمهيدية في أساسيات JavaScript لتقديم المفاهيم، مقترنة بفيديو من مجموعة "سلسلة المبتدئين: JavaScript" من الفيديوهات التعليمية، التي ساهم بعض مؤلفيها في هذا المنهج.
بالإضافة إلى ذلك، يحدد اختبار منخفض المخاطر قبل الفصل نية الطالب نحو تعلم موضوع معين، بينما يضمن اختبار ثانٍ بعد الفصل تعزيز الاحتفاظ بالمعلومات. تم تصميم هذا المنهج ليكون مرناً وممتعاً ويمكن أخذه كاملاً أو جزئياً. تبدأ المشاريع صغيرة وتصبح أكثر تعقيداً بحلول نهاية دورة الـ 12 أسبوعاً.
بينما تجنبنا عمداً تقديم أطر عمل JavaScript للتركيز على المهارات الأساسية المطلوبة كمطور ويب قبل تبني إطار عمل، فإن الخطوة التالية الجيدة لإكمال هذا المنهج ستكون تعلم Node.js عبر مجموعة أخرى من الفيديوهات: "سلسلة المبتدئين: Node.js".
قم بزيارة مدونة قواعد السلوك وإرشادات المساهمة. نرحب بملاحظاتك البناءة!
🧭 الوصول دون اتصال
يمكنك تشغيل هذا التوثيق دون اتصال باستخدام Docsify. قم باستنساخ هذا المستودع، تثبيت Docsify على جهازك المحلي، ثم في المجلد الجذري لهذا المستودع، اكتب docsify serve. سيتم تشغيل الموقع على المنفذ 3000 على جهازك المحلي: localhost:3000.
يمكن العثور على ملف PDF لجميع الدروس هنا.
🎒 دورات أخرى
فريقنا ينتج دورات أخرى! تحقق من:
- الذكاء الاصطناعي التوليدي للمبتدئين
- الذكاء الاصطناعي التوليدي للمبتدئين .NET
- الذكاء الاصطناعي التوليدي باستخدام JavaScript
- الذكاء الاصطناعي التوليدي باستخدام Java
- الذكاء الاصطناعي للمبتدئين
- علم البيانات للمبتدئين
- تعلم الآلة للمبتدئين
- الأمن السيبراني للمبتدئين
- تطوير الويب للمبتدئين
- إنترنت الأشياء للمبتدئين
- تطوير الواقع الممتد للمبتدئين
- إتقان GitHub Copilot للاستخدام الذكي
- إتقان GitHub Copilot لمطوري C#/.NET
- اختر مغامرتك مع Copilot
الترخيص
هذا المستودع مرخص بموجب ترخيص MIT. انظر ملف LICENSE لمزيد من المعلومات.
إخلاء المسؤولية:
تم ترجمة هذا المستند باستخدام خدمة الترجمة بالذكاء الاصطناعي Co-op Translator. بينما نسعى لتحقيق الدقة، يرجى العلم أن الترجمات الآلية قد تحتوي على أخطاء أو معلومات غير دقيقة. يجب اعتبار المستند الأصلي بلغته الأصلية هو المصدر الموثوق. للحصول على معلومات حاسمة، يُوصى بالاستعانة بترجمة بشرية احترافية. نحن غير مسؤولين عن أي سوء فهم أو تفسيرات خاطئة ناتجة عن استخدام هذه الترجمة.