كورس تصميم مواقع باستخدام Bootstrap 3 | تعلم تصميم موقع احترافي متجاوب

عدد الدروس : 52 عدد ساعات الدورة : 13:25:16 شهادة معتمدة : نعم التسجيل في الدورة للحصول على شهادة

للحصول على شهادة

  • 1- التسجيل
  • 2- مشاهدة الكورس كاملا
  • 3- متابعة نسبة اكتمال الكورس تدريجيا
  • 4- بعد الانتهاء تظهر الشهادة في الملف الشخصي الخاص بك
كورس شامل لتعلم تصميم موقع كامل باستخدام Bootstrap 3. ستتعلم من البداية كيفية بناء هيكل الموقع، إضافة الأقسام المختلفة (Navbar, Carousel, About, Pricing, Contact)، تنسيق الموقع ليكون متجاوب (Responsive)، وإضافة تأثيرات جذابة لتحسين تجربة المستخدم. الكورس عملي بنسبة 100% ومناسب للمبتدئين والمحترفين.

قائمة الدروس

عن الدورة

مقدمة الكورس:

إذا كنت تبحث عن كيفية تصميم موقع عصري ومتجاوب باستخدام Bootstrap 3، فهذا الكورس هو ما تحتاجه.
كورس "تصميم موقع باستخدام Bootstrap 3" من Elzero Web School يقدم مشروع عملي متكامل من الصفر حتى الانتهاء، يشمل كل الأقسام التي تحتاجها في موقع احترافي.
سوف تتعلم كيفية استخدام شبكة Bootstrap (Grid System)، إنشاء Navbar احترافية، إضافة Carousels، Sliders، وأقسام تفاعلية مثل Testimonials، Pricing Table، Contact Form.


ماذا ستتعلم في الكورس؟

الوحدة الأولى: أساسيات Bootstrap 3 (Bootstrap Basics)

  1. مقدمة عن Bootstrap 3 وأهميته.
  2. كيفية إضافة Bootstrap للموقع (Include It).
  3. كتابة الأكواد الأولى (Start Coding).
  4. التعرف على Grid System - الجزء الأول والثاني.
  5. إخفاء واظهار العناصر (Hidden/Visible).
  6. Column Reset, Offset, Ordering, Nesting.

الوحدة الثانية: بناء الموقع الأساسي (Main Structure)

  1. إنشاء Navbar احترافية (جزء 1 و 2).
  2. إضافة Carousel متجاوب (جزء 1 و 2).
  3. إنشاء قسم About.
  4. قسم Features.

الوحدة الثالثة: إضافة أقسام تفاعلية (Interactive Sections)

  1. Carousel آخر للاستخدام في Testimonials.
  2. جدول الأسعار (Price Table).
  3. قسم Our Team.
  4. إضافة Font Awesome للأيقونات.
  5. قسم Subscribe (نموذج اشتراك).
  6. قسم الإحصائيات (Statistics).

الوحدة الرابعة: تحسين التصميم (UI Enhancements)

  1. تحسين الخلفيات (Backgrounds).
  2. قسم المهارات (Our Skills).
  3. قسم اتصل بنا (Contact Us).
  4. قسم عملائنا (Our Clients).
  5. Footer احترافي (جزء 1 و 2).

الوحدة الخامسة: تحسين التفاعل والاستجابة (Advanced Interactivity & Responsiveness)

  1. استخدام Google Fonts.
  2. إضافة Media Queries لتجاوب الموقع.
  3. تحسين Media Queries.
  4. إضافة Option Box لتغيير ألوان الموقع.
  5. إنشاء شاشة تحميل (Loading Screen).
  6. زر العودة لأعلى (Scroll To Top).
  7. تصحيح الصور في Carousel.
  8. تنظيف ملفات CSS و JS.

الوحدة السادسة: إضافات احترافية (Professional Plugins & Tools)

  1. استخدام Hover CSS.
  2. تحسين السرعة والأداء.
  3. تحقق من صحة ملفات HTML.
  4. استخدام مكتبة WOW.js للتأثيرات.
  5. Nice Scroll لتخصيص أشرطة التمرير.
  6. دعم الاتجاه من اليمين لليسار (Bootstrap RTL).
  7. التعامل مع الروابط والصفحات.

الوحدة السابعة: صفحات إضافية (Additional Pages)

  1. تصميم صفحة About Us.
  2. تصميم صفحة الأسئلة الشائعة (FAQ).

مميزات الكورس:

  • مشروع موقع كامل متجاوب.
  • تصميم عصري وقابل للاستخدام.
  • خطوة بخطوة بأسلوب تطبيقي.
  • شروحات باللغة العربية.
  • تأثيرات جذابة لتحسين تجربة المستخدم.
  • تحسين الأداء والسرعة.
  • استخدام مكتبات وأدوات إضافية لتحسين المظهر.

الفئة المستهدفة:

  • مبتدئين يريدون تعلم تصميم المواقع.
  • مطورو Front-End.
  • مصممو الويب الراغبين في إنشاء مواقع متجاوبة.
  • أي شخص يريد تعلم Bootstrap 3 عمليًا.

متطلبات سابقة:

  • معرفة بسيطة بـ HTML و CSS.
  • محرر أكواد (VS Code أو Sublime).

مدة الكورس:

  • 52 درس فيديو.
  • أكثر من 25 ساعة تدريبية عملية.

نظام التدريب:

  • مشروع واحد متكامل.
  • كل فيديو يغطي جزء محدد.
  • ملفات الكود قابلة للتنزيل.