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

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

تعريف بالدورة و Bootstrap

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

كيفية الحصول على Bootstrap

مخططات الواجهات باستخدام flexbox & grid

التعامل مع نماذج البيانات forms

تصميم الجداول وتسيقها لجميع أحجام الشاشات

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

تنسيقات النصوص والصور

خصائص bootstrap لتنسيق أجزاء الصفحات

المؤثرات والتعامل معها

خصائص JavaScript التفاعلية

مكونات bootstrap المخصصة مثل البطاقات والقوائم المنسدلة وغيرها

تنفيذ مشروع متكامل في نهاية الدورة

وصف الدورة

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

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

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

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

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

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

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

المتطلبات

معرفة جيدة بلغة HTML + CSS

ينصح بأخذ هذه الدورة قبل البدء:

إضغط هنا للانتقال للدورة

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

مسار Full Stack Development

ترتيبها ضمن المسار : 3

مسار وخطة تعليمية مخصصة لاكتساب مهارات التطوير المتكاملة Full Stack Development

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

المدة	الدروس (86)
مقدمة الدورة - مقدمة عن الدورة والمدرب والمحتوى وتعريف بـ Bootstrap
04:19	تعريف بالدورة و Bootstrap لا يوجد وصف
الحصول على بوتستراب والبدء بالتصميم + بهذا القسم سنتعرف على كيفية الحصول على بوتستراب ومن ثم سنبدأ بداية سريعة لنعرف كيف يمكننا إدراجه واستخدامه في صفحاتنا
06:33	كيفية الحصول على بوتستراب شاهد وصف الدرس هنا سنأخذ جولة على بوتستراب وطريقة الحصول عليه من الموقع بطرق متعددة
03:21	البداية السريعة وإنشاء الصفحة الأولى هنا سنتعرف على كيفية البداية مع مكتبة بوتستراب داخل الصفحات
المخطط الشبكة Bootstrap Grid + مخطط بوتستراب يعتبر أحد أهم الخصائص المتوفرة فيها حيث يعتبر المسؤول الأول عن التصاميم المرنة وتوافقها مع جميع أحجام الشاشات
03:31	نقاط التوقف Breakpoints يوجد نقاط يتوقف عندها التمدد ويتغير شكل التصميم وهي ما سنتعلمه الآن وتسمى breakpints
03:40	الحاويات و المخططات containers & grids الحاوية هي خاصية تم تصميمها لتقوم باحتواء عناصر الصفحة ويجب علينا استخدامها مع المخططات
05:23	الأعمدة داخل المخططات وصلنا الآن لتقسيم المحتوى على شكل أعمدة
05:41	تغيير احجام الأعمدة بناء على حجم الشاشة سنتعلم الآن أهمية breakpoints وكيف يمكننا تغيير أحجام المخططات بناء على حجم الشاشة الحالي
01:56	الحجم التلقائي للأعمدة يمكننا ترك خيار التمدد تلقائيا للأعمدة بحيث تتمدد حسب محتواها
01:43	تحديد عدد الأعمدة لكل صف تلقائيا في حال صممت المخطط بشكل تلقائيا، يمكنك تحديد عدد الأعمدة لكل صف عن طريق اختصار في bootstrap
05:26	محاذاة الأعمدة داخل الصفوف نستطيع توزيع المحتوى عبر محاذاته داخل الصفوف وهذا ما سنتعلمه الآن
05:07	التحكم بهوامش الصفوف gutters توفر بوتستراب إمكانية تعديل الهوامش بين الأعمدة وتسمى gutters
02:32	صفوف داخل صفوف اخرى! جرعة إضافية يمكنك استخدام صف داخل صف آخر لغرض توزيع المحتوى الخاص بك
02:44	إزاحة الأعمدة offsetting سنتعلم الآن كيف يمكننا إزاحة عمود عن مكانه الافتراضية في الصف
تصميم المحتوى Content + المحتوى داخل الصفحات له خصائص مسبقة التصميم في بوتستراب نستطيع استخدامها لتنسيقه وتصميمه بشكل أفضل
06:25	تصميم النصوص ودعم اللغة العربية اللغة العربية والمحاذاة RTL و كيفية التعامل مع النصوص وتنسيقاتها الإضافية هو ماسنتعلم الآن
02:35	تنسيق القوائم القوائم في بوتستراب تحتوي على تصميم مسبق مثل أن تكون على السطر أو بدون تنسيق
06:28	تنسيق الصور الصور تحتاج إلى عناية خاصة! تعال نعتني فيها شوي
الجداول Tables + الجداول لها طريقة تعامل وتصميم مختلف في bootstrap وذلك من حيث الألوان والأحجام والتوافق مع أحجام الشاشات
05:17	الجداول وألوانها والتفاعل معها هنا سنتعلم كيف تتعامل بوتسراب مع الجداول وماهي الألوان المتوفرة والتفاعلات معها
01:21	إطارات واحجام الجداول هنا سنرى كيف يمكن تغيير اشكال اطارات الجداول واحجامها
01:20	محاذاة محتوى خلية الجدول الخلية في الجدول يمكن تغيير محاذاتها الأفقي عبر بوتستراب
02:08	الجداول المرنة Responsive Tables الجدول قد تزيد عدد الأعمده به عن عرض الصفحة ويأتي هنا دور بوتستراب في جعلها مرنة
النماذج Forms + تسهل Bootstrap تصميم النماذج وتحسن من تجربة المستخدم أيضا لذلك سنتعلم خصائصها خلال هذا القسم من ناحية UI/UX
07:10	التصميم والتخطيط الأساسي للنماذج هنا سنتعلم التخطيط والتصميم الأساسي لنماذج البيانات مابين الحقول والعناوين وكيفية ربطها
03:49	خصائص الحقول وحقول إضافية أخرى سنتعلم الآن اشكال الحقول عند اضافة خصائص لها مع أشكال إضافية لحقول أخرى
02:05	قائمة الاختيار Form Select لها شكل خاص (كلاسات خاصة) لسبب سنتعرف عليه الآن
03:34	حقول checkbox & radio يوجد هيكلة خاصة بالحقول من نوع checkbox و radio وتصاميم مخصصة سنتعلمها بهذا الدرس
02:57	تحويل checkbox إلى switch وتعديل طريقة العرض سنتعلم الآن كيف يمكننا تحويل checkboxes إلى switches وكيف يمكن تحويل طريقة العرض الافتراضية لهذه الحقول من stack إلى inline
02:32	أزرار التفعيل Toggle Buttons متعة جديدة وهي كيف يمكنك استبدال radios او checkbox بأزرار ذات تصميم مخصص
04:29	مجموعات الحقول Input Groups UX تستطيع من خلال بوتستراب ضم الحقل مع إضافة أخرى تسمى addons بحيث يتكون لديك مجموعة تسهل تجربة المستخدم
02:37	تعويم العناوين Floating Labels نعم مثل ما قريت :) سنتعلم كيفية تعويم العناوين بحيث تتحرك للأعلى عند النقر عليها
المكونات Components [الجزء الأول] + توفر Bootstrap عدد كبير من المكونات (التصاميم المُعدة مسبقا) وهي components بحيث تسهل علينا طريقنا في تصميم المواقع من خلال استخدام خصائصها بشكل مباشر بدلا من تصميمها من الصفر
10:21	الأكورديون نعم مثل ما قريتها بالضبط، الأكرديون Accordion هي آلة موسيقية تستخدمها في بوتستراب لكن بشكل مختلف
02:41	التنبيهات أو التحذيرات عنصر التنبيه مخصص للاشعارات والتنبيهات التي ترغب أن يراها المستخدم مع إمكانية إغلاقها
07:32	الشارات الشارة أو badge هو عنصر صغير يستخدم كملحق إضافي للمحتوى
03:45	الأزرار واحجامها وأشكالها يوجد عدد من التصاميم للأزرار سنتعلمها الآن
02:30	مجموعات الأزرار باستخدامك لكلاس btn-group ستتمكن من وضع عدد كبير من الأزرار في مجموعة ذات تصميم مميز
05:09	بطاقات عرض المحتوى البطاقات cards هي حاويات ذات تصميم مسبق بعناوين ومحتوى وربما صور
المكونات Components [الجزء الثاني] + استكمال لمكونات Bootstrap
06:28	شرائح العرض Carousel سنتعلم الآن carousel وهو نظام لعرض شرائح باستخدام بوتستراب
04:19	أزرار التحكم في عرض الشرائح سنتعلم كيف يمكننا التحكم في الشرائح من خلال عرض أزرار (التالي و السابق)
05:13	مؤشرات الشرائح indicators المؤشرات موجودة أسفل كل شريحة عرض تبين لنا عدد الشرائح مع إمكانية تصفحها
04:11	العناوين والنصوص على الشرائح تدعم الشرائح إمكانية أضافة نص عليها كعنوان لها بكل شريحة لوحدها
01:51	التوقيت والمؤثرات في الشرائح وصلنا الآن لكيفية توقيت الشرائح بحيث يمكننا زيادة أو تقليل الوقت لكل شريحة مع إمكانية اختيار مؤثر آخر لها
02:04	البدء التلقائي و خصائص اللمس في الشرائح في الشاشات التي تدعم اللمس يمكننا تصفح الشرائح عبر التمرير من فوقها ويمكن تعطيل أو تشغيل خاصية البدء تلقائيا لها
08:34	إخفاء وإظهار المحتوى collapse يمكننا استخدام تأثير collapse من أجل إخفاء أو إظهار محتوى في الصفحة مع مؤثرات بصرية
06:26	القوائم المنسدلة dropdowns سنتعلم كيف نصنع قائمة منسدلة الآن
02:12	تغيير موضع القائمة المنسدلة يمكن تغيير مكان ظهور القائمة بالنسبة للمكان التي ظهرت منه عبر خصائص معدة مسبقا في بوتستراب
02:59	تغيير سلوك الإغلاق التقائي للقوائم القائمة لها سلوك افتراضي قد نرغب في تغييره وهو سلوك الإغلاق التلقائي لها
06:42	النوافذ الداخلية Modals النافذة الداخلية dialogs هي إمكانية إظهار نافذة داخل الصفحة ذاته
02:54	تثبيت إغلاق Modal والتمرير للمحتوى يمكننا فرض عدم إغلاق النافذة الداخلية إلا من خلال زر الإغلاق فقط وسنتعلم أيضا كيف نمكن خاصية تمرير المحتوى الداخلي
01:56	التوسيط الأفقي في Modals كما هو في العنوان :)
المكونات Components [الجزء الثالث] + تكملة لمكونات بوتستراب
07:25	قوائم الموقع Navbars القوائم الرئيسية بالموقع وتسمى Navbar هي ماسنتعلمه بهذا الدرس
04:25	أمكان القوائم Navbars لا يوجد وصف
05:43	التنقل Navs & Tabs لا يوجد وصف
07:32	ربط المحتوى بالقوائم وإظهارها عموديا لا يوجد وصف
05:00	القوائم العائمة Offcanvas لا يوجد وصف
02:41	سلوك التمرير وتعطيل الإغلاق في offcanvas لا يوجد وصف
04:02	أماكن الظهور والتصميم المرن في offcanvas لا يوجد وصف
05:48	التلميحات tooltips التلميحات هي نصوص شرح قصيرة تظهر على المحتوى عند التمرير عليه
06:19	الصناديق المنبثقة popovers لا يوجد وصف
04:42	عناصر الملء placeholders لا يوجد وصف
02:29	ملخص وبقية العناصر في bootstrap لا يوجد وصف
الأدوات المساعدة Helpers + سندرس هنا الأدوات المساعدة في Bootstrap والتي تحتوي على عدد من الخصائص المسبقه مثل التعويم والتحكم في الأبعاد وتقليص النصوص وغيرها
01:42	تعويم العناصر float & clearfix لا يوجد وصف
03:00	خصائص الموضع position لا يوجد وصف
02:26	التحكم في الأبعاد ratio لا يوجد وصف
03:21	المجموعات stacks لا يوجد وصف
02:57	الروابط المتمددة stretched links لا يوجد وصف
02:48	اجتزاء النصوص truncate لا يوجد وصف
الملحقات Utilities + الملحقات في بوتستراب هي خصائص تتمحور حول تشكيل العناصر والتحكم في عرضها وسندرس هنا خصائص العرض والاطارات والألوان وغيرها
07:55	ألوان الخلفيات والنصوص والروابط لا يوجد وصف
06:07	خصائص العرض والتصميم المرن لا يوجد وصف
06:29	الإطارات وأشكالها لا يوجد وصف
06:08	خاصية العرض flex لا يوجد وصف
03:17	التحكم في تمدد عناصر flex لا يوجد وصف
03:24	ترتيب عناصر flex لا يوجد وصف
03:34	التحكم في تفاعل المستخدم لا يوجد وصف
01:40	التحكم في ظل العناصر لا يوجد وصف
06:39	ضبط الأحجام لا يوجد وصف
05:43	تغيير المسافات في العناصر لا يوجد وصف
03:54	تنسيق النصوص - الجزء 1 لا يوجد وصف
03:49	تنسيق النصوص - الجزء 2 لا يوجد وصف
02:50	المحاذاة الأفقية لا يوجد وصف
01:15	خاصية الرؤية visibility لا يوجد وصف
مشروع الدورة + سنقوم بهذا القسم ببناء مشروع من خلال ماتعلمناه في هذه الدورة
02:36	مقدمة المشروع تمرين هنا راح نشوف ايش راح نسوي ونخطط الصفحة بشكل أساسي
05:05	ضبط قائمة الموقع تمرين لا يوجد وصف
06:44	إعداد القسم التعريفي تمرين لا يوجد وصف
09:37	تصميم قسم الخبرة تمرين لا يوجد وصف
09:05	إعداد قسم التواصل تمرين لا يوجد وصف
06:07	وضع اللمسات الأخيرة على المشروع تمرين لا يوجد وصف
ملفات الدورة + ستجد في هذا القسم جميع ملفات الدورة قابلة للتحميل
مقال	تحميل ملفات الشرح جرعة إضافية هدية هديتي لك، كل ما تم شرحه في الدروس السابقة محفوظ في هذا الملف
مقال	تحميل مشروع الدورة جرعة إضافية هدية هنا هديتي لك مشروع الدورة قابل للتحميل
عرض الكل + إخفاء الكل -

دورات يوصى بها

دورة إدارة نسخ البرمجة باستخدام git

دورة مفاهيم في تصميم واجهات الويب

دورة HTML & CSS وبناء المشاريع بها

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

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

169 ر.س.

إضافة للسلة

169 ر.س.

المستوى : الجميع

مدة الدراسة : من 2 ~ 3 أسابيع

الدروس : 86

التمارين : 6

الوقت المُسجل : 06:08:48 ساعات

آخر تحديث : 2023/01

وصول دائم للمحتوى

ستحصل على شهادة

اسأل المدرب في أي وقت

متابعة مشاريعك مع المدرب

تسويق سيرتك الذاتية ومشاريعك

مجتمع الدورة

الذهاب إلى مجتمع هذه الدورة

المدرب

عبدالمجيب محمد الحميد

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

المزيد ...

الآراء

تحميل المزيد

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

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

تعريف بالدورة و Bootstrap

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

كيفية الحصول على Bootstrap

مخططات الواجهات باستخدام flexbox & grid

التعامل مع نماذج البيانات forms

تصميم الجداول وتسيقها لجميع أحجام الشاشات

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

تنسيقات النصوص والصور

خصائص bootstrap لتنسيق أجزاء الصفحات

المؤثرات والتعامل معها

خصائص JavaScript التفاعلية

مكونات bootstrap المخصصة مثل البطاقات والقوائم المنسدلة وغيرها

تنفيذ مشروع متكامل في نهاية الدورة

وصف الدورة

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

المتطلبات

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

مسار Full Stack Development

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

مقدمة الدورة -

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

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

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

الجداول Tables +

النماذج Forms +

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

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

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

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

الملحقات Utilities +

مشروع الدورة +

ملفات الدورة +

دورات يوصى بها

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

مجتمع الدورة

المدرب

عبدالمجيب محمد الحميد