الإنتقال للتصميم الجديد

دورة بناء صفحات الإنترنت المرنة باستخدام Bootstrap V4

تعلم بناء صفحات المواقع و التطبيقات مرنة و متوافقة مع جميع أحجام الشاشات من الصفر بإستخدام Bootstrap v4.

ماذا سنتعلم في هذه الدورة؟

كيفية تحميل Bootstrap V4

بناء مخطط شبكي مرن grid لدعم أحجام الشاشات

التعامل مع الألوان الجاهزة

كيفية دعم اللغة العربية والمحاذات

كيفية التعامل مع الصور

التعامل مع عناصر javascript الخاصة بـ Bootstrap

سنقوم ببناء صفحة عرض منتجات مرنة

وصف الدورة

بوتستراب بالإنجليزية ( Bootstrap ) و كان يُسمّى سابقًا بـ ( Twitter Bootstrap ) و هو : مجموعة من الأدوات مفتوحة المصدر لإنشاء مواقع ويب مُذهلة بسرعة و فعالية، و هدفها توفير مكتبة واسعة و مرنة و موثّقة بشكل جيد للتصاميم " مكررة الإستعمال " المبنية على HTML & CSS & JS لتوفّر الوقت و الجهد .

يعد بوتستراب أشهر إطار عمل خاص بلغة css على الويب حيث هُناك أكثر من 4,000,000 ( 4 ملايين ) موقع يستخدم إطار العمل Bootstrap.

يمكنك تصميم موقع رائع بسهولة مثل هذا في نهاية الدورة :

لماذا نتعلم Bootstrap؟

  • سهولة الإستخدام : لا حاجة لكتابة أكواد لكل عُنصر فـ بوتستراب توفّر لك كُل شيء.
  • دعم المتصفحات : بوتستراب توفّر لك دعم لكافة المتصفحات.
  • الإستجابة : بوتستراب أعدّت ليتناسب تصميمك مع كل مقاسات الشاشة.
  • التوافقية : بوتستراب تتوافق مع أي لغة ويب سواءً PHP أو Ruby أو Python أو غيرهم.

في ماذا تستخدم Bootstrap؟

  • تصميم صفحات الويب.
  • تصميم صفحات لتطبيقات الهجينة للهواتف الذكية.

يمكنك بناء موقع رائع بسهولة مثل هذا في نهاية الدورة

 

 

منهج هذه الدورة

المدة الدروس (23)
الدروس -
لا يوجد وصف
02:33 ماهو Bootstrap؟

تعرف على بوستراب

20:27 ملخص لجميع عناصر بوتستراب

لا يوجد وصف

18:54 بناء صفحة عرض منتجات متكاملة

لا يوجد وصف

03:20 ماذا سنبني؟ المراجع وتعريف الشاشات

لا يوجد وصف

01:42 تحميل بوتستراب يدعم اللغة العربية

الحصول على بوتستراب يدعم المحاذاة من اليمين لليسار

05:37 جافاسكربت: التلميحات

لا يوجد وصف

01:42 جافاسكربت: أحداث popovers

كيفية التعامل مع الأحداث "events" في popovers

17:01 جافاسكربت: popovers

لا يوجد وصف

08:51 جافاسكربت: النوافذ الداخلية modals

لا يوجد وصف

05:35 جافاسكربت: التنبيهات

التعامل مع التنبيهات من خلال javascript

02:01 جافاسكربت: ضبط الصفحة

لا يوجد وصف

06:01 خصائص الجداول

لا يوجد وصف

03:30 بعض الأمثلة على بوتستراب

بعض الأمثلة لصفحات تستخدم بوتستراب

03:32 خصائص الصور

لا يوجد وصف

04:26 التعامل مع النصوص

لا يوجد وصف

05:04 الألوان

مختصر جميع الألوان في بوتستراب

03:38 موازنة الأعمدة offsetting

لا يوجد وصف

03:28 ترتيب العناصر باستخدام classes

لا يوجد وصف

04:55 إلتفاف الأعمدة

ستتعرف على كيفية التفاف الأعمدة في بوتستراب

09:02 محاذاة العناصر أفقيا وعموديا

لا يوجد وصف

17:59 المخطط الشبكي المرن grid

كيفية بناء أعمدة مرنة تتوافق مع الشاشات

04:05 تحميل بوتستراب

طريقة تحميل وتشغيل بوتستراب

مقال (مجانا للطلاب) تحميل مصدر صفحة المنتجات

تحميل مشروع الصفحة التي تم بناءها في هذه الدورة

عرض الكل + إخفاء الكل -

دورة بناء صفحات الإنترنت المرنة باستخدام Bootstrap V4

تعلم بناء صفحات المواقع و التطبيقات مرنة و متوافقة مع جميع أحجام الشاشات من الصفر بإستخدام Bootstrap v4.

129 ر.س.
129 ر.س.
المستوى : الجميع
مدة الدراسة : من 6 ~ 9 أيام
الدروس : 23
الوقت المُسجل : 02:33:23 ساعات
آخر تحديث : 2022/01
وصول دائم للمحتوى
ستحصل على شهادة
اسأل المدرب في أي وقت
متابعة مشاريعك مع المدرب
تسويق سيرتك الذاتية ومشاريعك
كوبون
مشاريع مميزة لطلاب الدورة
Graphics Bot ⚡ Studio
Graphics Bot ⚡ Studio / Bootstrap
منصة مجهول
بسم الله الرحمن الرحيم,,, هذا مشروعي الأول في Bootstrap. *((الفكرة ليست جديدة فقط حبيت أطبق تصميم موقع من أرض الواقع وأختبر نفسي في Bootstrap))*. -الموقع عبارة عن منصة تقدر تنشأ فيها حسابك الخاص وتشارك الرابط الخاص بك في مواقع التواصل الإجتماعي وتبدأ بإستقبال رسائل من متابعيك أو أصدقائك دون الكشف عن هويته. -حاولت قدر المستطاع الإهتمام بواجهةالمستخدم وتجربته UI/UX وأن يكون تصميم الموقع مرتب بسيط جميل وسهل الإستخدام في نفس الوقت. -استخدمة vanilla javascript في بعض جوانب الموقع مثل ضبط مكان الـ footer حسب طول شاشة المستخدم و حفظ تفضيلاته على سبيل المثال: الوضع الليلي والعادي وأمور آخرى أيضاً. -الموقع متوافق مع جميع أحجام الشاشات الكبيرة والصغيرة حتى لو شاشة آلة حاسبة هههه. -حتى الأن الموقع عبارة عن صفحات html لايوجد backend. -تقدر تدخل الموقع من الرابط الموجود وتتصفحه وتعطيني رأيك وملاحظاتك في الردود أو على حسابي في تويتر. *ملاحظة1: اضغط على زر "تسجيل" أو "دخول" وراح تدخل على الملف الشخصي الخاص بك وتتصفح الموقع. *ملاحظة 2: زر "رد" يعمل ويظهر لك واجهة الرد على الرسالة أما زر "إبلاغ" و "حذف" لايعملان (طبيعي لأني لم أبرمج الواجهة الخلفية للموقع حتى الأن). المهم هو نركز على التصميم لأن هذا هو اللي يهمنا في هذه الدورة. -هذا وصلى الله وسلم على نبينا محمد.
Welcome to Arabia
COVER PAGE with Amazing Background Video - SAUDI ARABIA
المدرب

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

المزيد ...