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

دورة تطوير واجهات المواقع باستخدام Bootstrap V5

دورة تطوير واجهات المواقع باستخدام Bootstrap V5

الوصف

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

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

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

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

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

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

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

 

 

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

  • كيفية الحصول على Bootstrap
  • مخططات الواجهات باستخدام flexbox & grid
  • التعامل مع نماذج البيانات forms
  • تصميم الجداول وتسيقها لجميع أحجام الشاشات
  • التوافق الكامل للمواقع مع الشاشات الصغيرة
  • تنسيقات النصوص والصور
  • خصائص bootstrap لتنسيق أجزاء الصفحات
  • المؤثرات والتعامل معها
  • خصائص JavaScript التفاعلية
  • مكونات bootstrap المخصصة مثل البطاقات والقوائم المنسدلة وغيرها
  • تنفيذ مشروع متكامل في نهاية الدورة

الأقسام

مقدمة الدورة

مقدمة عن الدورة والمدرب والمحتوى وتعريف بـ Bootstrap

الحصول على بوتستراب والبدء بالتصميم

بهذا القسم سنتعرف على كيفية الحصول على بوتستراب ومن ثم سنبدأ بداية سريعة لنعرف كيف يمكننا إدراجه واستخدامه في صفحاتنا

المخطط الشبكة Bootstrap Grid

مخطط بوتستراب يعتبر أحد أهم الخصائص المتوفرة فيها حيث يعتبر المسؤول الأول عن التصاميم المرنة وتوافقها مع جميع أحجام الشاشات

تصميم المحتوى Content

المحتوى داخل الصفحات له خصائص مسبقة التصميم في بوتستراب نستطيع استخدامها لتنسيقه وتصميمه بشكل أفضل

الجداول Tables

الجداول لها طريقة تعامل وتصميم مختلف في bootstrap وذلك من حيث الألوان والأحجام والتوافق مع أحجام الشاشات

النماذج Forms

تسهل Bootstrap تصميم النماذج وتحسن من تجربة المستخدم أيضا لذلك سنتعلم خصائصها خلال هذا القسم من ناحية UI/UX

المكونات Components [الجزء الأول]

توفر Bootstrap عدد كبير من المكونات (التصاميم المُعدة مسبقا) وهي components بحيث تسهل علينا طريقنا في تصميم المواقع من خلال استخدام خصائصها بشكل مباشر بدلا من تصميمها من الصفر

المكونات Components [الجزء الثاني]

استكمال لمكونات Bootstrap

المكونات Components [الجزء الثالث]

تكملة لمكونات بوتستراب

الأدوات المساعدة Helpers

سندرس هنا الأدوات المساعدة في Bootstrap والتي تحتوي على عدد من الخصائص المسبقه مثل التعويم والتحكم في الأبعاد وتقليص النصوص وغيرها

الملحقات Utilities

الملحقات في بوتستراب هي خصائص تتمحور حول تشكيل العناصر والتحكم في عرضها وسندرس هنا خصائص العرض والاطارات والألوان وغيرها

مشروع الدورة

سنقوم بهذا القسم ببناء مشروع من خلال ماتعلمناه في هذه الدورة

ملفات الدورة

ستجد في هذا القسم جميع ملفات الدورة قابلة للتحميل

عينة من الدروس المجانية