iSchool
الوحدة 1: استوديو الواجهات

ابنِ موقعكباستخدام Bootstrap

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

3 وحدات · 12 درساًتطوير الواجهة الأمامية
Grade 9 Web Builders hero
المشروع النهائي
منصّة iPlay للتجارة الإلكترونية
ما الذي ستتعلمه

أربع نتائج تعلّم.مطوّر ويب واثق واحد.

مهارات حقيقية وقابلة للنقل تجسر بين الكود النظيف والتصميم الحديث والنشر المباشر.

أتقن هندسة الويب

افهم كيف يعمل الإنترنت واكتب HTML نظيفاً ودلالياً لهيكلة صفحات ويب حديثة.

تخطيطات CSS المتقدّمة

استخدم صندوق النموذج وFlexbox وCSS Grid لتصميم واجهات معقّدة ودقيقة.

تصميم متجاوب سريع

طبّق إطار Bootstrap وMedia Queries لضمان ظهور المواقع بشكل مثالي على أيّ جهاز.

النشر الاحترافي

أدر إصدارات الكود عبر GitHub وأطلق مواقع مباشرة للجمهور باستخدام استضافة Netlify.

الأدوات والتقنيات

منظومة أدوات المطوّر

تعلّم تطوير الواجهة الأمامية عبر العمل التطبيقي بأدوات وأطر معيارية في الصناعة.

VS Code & GitHub logo

VS Code وGitHub

محرّر الكود المعياري في الصناعة مقترناً بأكبر شبكة مطوّرين في العالم لكتابة وتخزين الكود الاحترافي.

HTML & CSS illustration

HTML وCSS

اللبنات الأساسية للإنترنت. يستخدم الطلاب HTML للهيكلة وCSS Grid/Flexbox المتقدّمَين للتنسيق.

Bootstrap framework logo

إطار Bootstrap

إطار CSS حديث وقوي يتيح للمطوّرين بناء تخطيطات مواقع متجاوبة وبأولوية الموبايل بسرعة.

مسار التعلّم

ثلاث وحدات.موقع منشور مباشر في النهاية.

من أوّل سطر HTML إلى موقع مبنيّ على Bootstrap ومنشور مباشرة على الويب.

Module 01

تشريح الويب (HTML وCSS الأساسي)

اكتشف كيف يعمل الإنترنت فعلاً. جهّز بيئة VS Code احترافية وتعلّم كتابة HTML دلالي لهيكلة النصوص والروابط والنماذج والصور.

Module 02

التخطيطات والتصميم المتجاوب

جوهر تصميم الويب الحديث. أتقن صندوق نموذج CSS وتعمّق في Flexbox وCSS Grid، واستخدم Media Queries لجعل مواقعك ملائمة للموبايل.

Module 03

إطار Bootstrap والنشر

سرّع سير عملك! استخدم Bootstrap لبناء أشرطة تنقّل احترافية فوراً. وأخيراً، تعلّم استضافة مشاريعك على نطاقات حقيقية باستخدام GitHub.

المهارات المكتسبة

أكثر من مجرّد كود.

كلّ خرّيج صفّ تاسع يخرج بمهارات تطبيقية في الواجهة الأمامية ومعرفة بالنشر ومهارات شخصية لعرض عمله بثقة.

المهارات التقنية

تخطيطات CSS المتقدّمة

أتقن صندوق النموذج وFlexbox وCSS Grid لتصميم واجهات معقّدة ودقيقة.

إطار عمل Bootstrap

استخدم مكوّنات Bootstrap ونظام الشبكة لبناء تخطيطات مواقع حديثة واحترافية بسرعة.

تصميم الويب المتجاوب

طبّق Media Queries ومبادئ التصميم بأولوية الموبايل لتبدو مواقعك مثالية على كلّ الأجهزة.

GitHub واستضافة Netlify

اعمل على إصدارات كودك على GitHub وانشر مواقع مباشرة عبر استضافة Netlify.

المهارات الشخصية

التخطيط الهيكلي

خطّط لهيكلة الصفحة وتسلسل المحتوى قبل كتابة أيّ سطر من الكود.

تنفيذ UI/UX

حوّل أفكار التصميم إلى واجهات نظيفة وسهلة الوصول يحبّ المستخدمون التنقّل فيها.

بناء البصمة الرقمية

أنشئ حضوراً رقمياً احترافياً عبر مستودعات عامّة ومواقع منشورة مباشرة.

العرض التقني

اعرض عملك التقني بثقة، وأرشد الجمهور خلال قراراتك في الكود والتصميم.

الخاتمة

مشروع التخرّجمنصّة iPlay للتجارة الإلكترونية.

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

منصّة iPlay للتجارة الإلكترونية

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

  • موقع متجاوب متعدّد الصفحات: ابنِ موقعاً كاملاً بنظام تنقّل ومكتبة منتجات وصفحات تفاصيل المنتج.
  • بطاقات منتجات ديناميكية: نسّق بطاقات منتجات قابلة لإعادة الاستخدام باستخدام CSS Grid ومكوّنات Bootstrap مع تفاصيل التسعير وخاصية "أضف إلى العربة."
  • تصميم بأولوية الموبايل: طبّق Media Queries للتأكد من أن تجربة التسوق والدفع على المنصّة مثالية على الهواتف والأجهزة اللوحية وأجهزة سطح المكتب.
iPlay E-Commerce Web Platform preview
Student presenting their GitHub project and live website

إطلاق وعرض على GitHub

اخطُ نحو عالم المطوّرين. ينشر الطلاب كودهم الخام على GitHub، وينشرون موقعهم المباشر عبر Netlify، ويعرضون عملهم أمام أهاليهم.

  • النشر على GitHub: ارفع كودك الخام إلى مستودع عامّ لمجتمع المطوّرين.
  • النشر عبر Netlify: أطلق موقعك المباشر للجمهور برابط حقيقي قابل للمشاركة.
  • العرض أمام الأهل: اشرح لعائلتك الكود وقرارات التصميم والموقع المباشر.
الوحدة 2 : مختبر الفول ستاك

أطلق موقعكباستخدام Node.Js وMongoDB

انتقل إلى تطوير الويب المتكامل (Full Stack)! يتقن الطلاب JavaScript المتقدّمة، ويبنون خوادم خلفية بـNode.js وExpress، ويديرون قواعد البيانات باستخدام MongoDB. سيهندسون بنية تحتية خلفية قوية لتشغيل تطبيق ويب حقيقي وديناميكي.

3 أقسام · 12 درساً · تطوير ويب متكامل
Grade 9 Module 2 hero
المشروع النهائي
تطبيق ويب متكامل
ما الذي ستتعلمه

أربع نتائج تعلّم.مطوّر Full Stack واحد.

مهارات حقيقية وقابلة للنقل تجسر بين واجهات الـFrontend ومنطق الـBackend.

أتقن منطق JavaScript

اكتب نصوص برمجية معقّدة باستخدام دوال ومصفوفات وكائنات ومستمعات أحداث متقدّمة.

تحكّم في الـDOM

حدّث محتوى الموقع وتنسيقاته وسماته ديناميكياً بناءً على تفاعلات المستخدم.

هندسة واجهات REST

استخدم Node.js وExpress لبناء خوادم خلفية تتعامل مع طلبات HTTP الديناميكية وبيانات JSON.

إدارة قواعد البيانات السحابية

اربط التطبيقات بـMongoDB لتتمكّن المواقع من إنشاء البيانات وقراءتها وتحديثها وحذفها بأمان.

أدوات معيارية في الصناعة

منظومة التقنيات.

أطر عمل احترافية وقواعد بيانات سحابية يستخدمها كبار مهندسي البرمجيات.

JavaScript وDOM

إتقان منطق البرمجة الأساسي والمصفوفات والدوال والتحكّم الديناميكي في الـDOM لبناء تجارب واجهة أمامية تفاعلية.

Node.js وExpress

هندسة خوادم خلفية قوية، والتوجيه عبر Express، وبناء واجهات REST تشغّل التطبيقات الديناميكية.

MongoDB وPostman

تصميم قواعد بيانات NoSQL باستخدام MongoDB وMongoose، واختبار نقاط النهاية بـPostman لتدفّقات Full Stack حقيقية.

المنهج

خارطة طريقك خطوة بخطوة.

من نصوص برمجية جهة العميل إلى قاعدة بيانات سحابية منشورة بالكامل.

Module 01

سحر JavaScript وDOM

أتقن منطق الويب! استكشف المتغيرات والحلقات التكرارية والدوال، ثم استخدم الـDOM ومستمعات الأحداث لجعل الصفحات تفاعلية للغاية.

Module 02

Node.js والخوادم الخلفية

اذهب إلى ما وراء الكواليس. شغّل JavaScript على الخادم باستخدام Node.js، وابنِ واجهات REST بـExpress، واختبر الطلبات بـPostman.

Module 03

MongoDB وتكامل Full Stack

اربط قاعدة البيانات! تعلّم نمذجة بيانات NoSQL مع MongoDB وMongoose، ونفّذ عمليات CRUD حيّة لتشغيل موقعك.

المهارات المكتسبة

كود صلب. مهارات ناعمة.

يخرج كلّ خرّيج بمهارات Backend جاهزة للإنتاج، وتفكير نظامي Full Stack، ومهارات شخصية لإطلاق وعرض تطبيق مدفوع بقاعدة بيانات حقيقي بثقة.

المهارات التقنية

JavaScript المتقدّمة

الدوال والمصفوفات والكائنات والبرمجة الموجّهة بالأحداث لتجارب تفاعلية حقيقية.

Node.js وExpress

شغّل JavaScript على الخادم ووجّه طلبات HTTP بإطار Express.

واجهات REST

صمّم نقاط النهاية، وتعامل مع JSON، وابنِ التعاقد بين الواجهة الأمامية والخلفية.

MongoDB وMongoose

نمذج بيانات NoSQL ونفّذ عمليات CRUD حيّة على قاعدة بيانات سحابية.

المهارات الشخصية

هندسة Full Stack

فكّر عبر الطبقات؛ واجهة وخادم وقاعدة بيانات، لتخطّط أنظمة قويّة من الطرف إلى الطرف.

نمذجة البيانات

صمّم مخطّطات وعلاقات نظيفة تطابق سلوك المنتج الفعلي.

اختبار الواجهات

استخدم Postman واختبارات مهيكلة للتحقّق من نقاط النهاية قبل ربط الواجهة.

التصحيح الممنهج

اعزل الأخطاء عبر الـStack وحلّلها عبر السجلّات والطلبات وحالة قاعدة البيانات.

المشروع الختامي

المشروع النهائي.

استعراض هندسة برمجيات متقدّمة مع قاعدة بيانات حقيقية.

الواجهة الخلفية لمتجر iSchool للألعاب

يرتقي الطلاب بمستوى متجر الألعاب الأمامي بهندسة Backend متكامل. باستخدام Node.js وMongoDB، يبنون قاعدة بيانات حيّة لإدارة بيانات المستخدمين وقوائم المنتجات والمخزون الديناميكي.

iSchool Gaming Store Backend
API Testing & Integration

اختبار الواجهات والتكامل

يستخدم الطلاب أدوات احترافية مثل Postman لاختبار واجهات REST، لضمان تواصل قاعدة البيانات بسلاسة مع الواجهة الأمامية، خالقين تجربة Full Stack حقيقية.