دورة تطوير واجهات المواقع باستخدام 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
الملحقات في بوتستراب هي خصائص تتمحور حول تشكيل العناصر والتحكم في عرضها وسندرس هنا خصائص العرض والاطارات والألوان وغيرها
مشروع الدورة
سنقوم بهذا القسم ببناء مشروع من خلال ماتعلمناه في هذه الدورة
ملفات الدورة
ستجد في هذا القسم جميع ملفات الدورة قابلة للتحميل
عينة من الدروس المجانية
-
تعريف بالدورة و Bootstrap
المدة: 04:19
-
كيفية الحصول على بوتستراب
هنا سنأخذ جولة على بوتستراب وطريقة الحصول عليه من الموقع بطرق متعددة
المدة: 06:33
-
البداية السريعة وإنشاء الصفحة الأولى
هنا سنتعرف على كيفية البداية مع مكتبة بوتستراب داخل الصفحات
المدة: 03:21
-
محاذاة الأعمدة داخل الصفوف
نستطيع توزيع المحتوى عبر محاذاته داخل الصفوف وهذا ما سنتعلمه الآن
المدة: 05:26
-
التصميم والتخطيط الأساسي للنماذج
هنا سنتعلم التخطيط والتصميم الأساسي لنماذج البيانات مابين الحقول والعناوين وكيفية ربطها
المدة: 07:10
-
تعويم العناوين Floating Labels
نعم مثل ما قريت :) سنتعلم كيفية تعويم العناوين بحيث تتحرك للأعلى عند النقر عليها
المدة: 02:37
-
الأكورديون
نعم مثل ما قريتها بالضبط، الأكرديون Accordion هي آلة موسيقية تستخدمها في بوتستراب لكن بشكل مختلف
المدة: 10:21
-
شرائح العرض Carousel
سنتعلم الآن carousel وهو نظام لعرض شرائح باستخدام بوتستراب
المدة: 06:28
-
القوائم العائمة Offcanvas
المدة: 05:00