معسكر من أول سطر كود إلى موقع حقيقي

معلومات عن المعسكر:

مدرب المعسكر: محمد الحربي

بكالوريوس علوم حاسب مع مرتبه شرف وماجستير امن سيبراني من جامعة لانكاستر البريطانية، خبرة اكثر من 5 سنوات في مجال تطوير الويب ،مؤسس OryaSoft للحلول التقنية.

تاريخ البداية: 1 Sep

تاريخ النهاية: 16 Sep

الوقت: 7:00 pm إلى 8:30 pm

عن بعد بالكامل عبر منصة Zoom

محاور المعسكر

1. بناء هيكل المواقع: تعلم أساسيات HTML5 لبناء الصفحات وتأسيس المحتوى البرمجي.
2. التصميم والتنسيق: احتراف CSS3 & Flexbox لتنسيق الواجهات، توزيع العناصر، وضبط الهوامش والألوان.
3. التفاعلية والديناميكية: إضافة لمسات حية وتفاعلية للموقع واستجابة لأفعال الزوار عبر JavaScript.
4. حفظ ونشر المشاريع: حفظ وتوثيق أكوادك ونشر موقعك أونلاين عبر GitHub مجاناً دون تعقيدات الأوامر النصية.
5. التهيئة للمستوى المتقدم: مدخل تمهيدي لأطر ومكتبات التنسيق (CSS Frameworks) وتجهيزك للانتقال للمستوى التالي.

الرجاء دخول قروب الورشة عشان تقدر توصل لكل شي يخص الورشة

محتوى المعسكر:

الأسبوع الأول (HTML5 & CSS3)

• اليوم الأول Fundamentals & Introduction to Web
  • آلية عمل Web، الـ Browsers، والـ Web Servers.
  • إعداد بيئة العمل على برنامج VS Code وتثبيت Live Server.
  • كتابة أول مستند بـ HTML5، وتنظيم Headings و Paragraphs.
• اليوم الثاني : Content Management, Links & Media
  • تضمين Images وإدارة مسارات الملفات File Paths.
  • إنشاء Links والتنقل الداخلي والخارجي.
  • تنظيم البيانات في Lists واستخدام Alt Text لتحسين Accessibility.
• اليوم الثالث: Forms & Layout Containers
  • بناء Forms ونماذج التواصل (Inputs, Textarea, Submit Buttons).
  • تقسيم واستخدام Containers مثل <div> و <span>.
  • تجميع وتجهيز أجزاء الواجهة لعملية التنسيق.
• اليوم الرابع : Introduction to CSS
  • ربط External Style Sheets واستخدام CSS Rules.
  • استهداف العناصر عبر Selectors, Classes, and IDs.
  • التحكم بـ Fonts, Colors, and Backgrounds.

الأسبوع الثاني (CSS Layouts & JavaScript)

• اليوم الخامس : Box Model & Flexbox Layouts
  • التحكم في الأبعاد و Box Model (Margins, Padding, Borders).
  • محاذاة وتوزيع العناصر أفقياً وعمودياً بـ Flexbox.
  • تصميم وتنسيق Navigation Bar وشبكة الخدمات بكفاءة.
• اليوم السادس : Introduction to JavaScript & Interactivity
  • دور JavaScript في تحويل Static Pages إلى Dynamic Pages.
  • ربط JS Files وإعلان Variables (let, const).
  • التعامل مع Primitive Data Types (Strings, Numbers, Booleans).
• اليوم السابع : DOM Manipulation & Events
  • الوصول إلى عناصر الصفحة والتعديل عليها عبر DOM Manipulation.
• الاستجابة لـ User Actions باستخدام Event Listeners مثل Click Events.
• إضافة تفاعلات حية وتغيير النصوص والمظهر ديناميكياً.
• اليوم الثامن : (Version Control via GitHub (GUI)
  • مفاهيم Version Control وأهمية Repositories.
  • إنشاء Local Repositories وتتبع التغييرات عبر Commits باستخدام واجهة GitHub.
  • رفع الموقع واستضافته مجاناً أونلاين عبر GitHub Pages.

الأسبوع الثالث (التجهيز والمشروع الختامي)

• اليوم التاسع : Frameworks Overview & Next Steps
  • الفرق بين بناء الصفحات بـ Vanilla JS / Pure CSS واستخدام CSS Frameworks.
  • نظرة عامة مبسطة ومقارنة سريعة بين Bootstrap و Tailwind CSS.
  • كيف تسهل أطر التنسيق العمل في المعسكر المتقدم، مع جلسة Q&A.
• اليوم العاشر : Final Project & Evaluation
  • دمج المهارات لبناء صفحة تعريفية لشركة احترافية وتفاعلية.
  • رفع المشروع أونلاين وتفعيل Live Link عبر GitHub.
  • تقديم Feedback وتحليل أداء المشاريع وتوزيع الشهادات.

البرامج المستخدمة

• VS Code (محرر الأكواد).
• GitHub (لإدارة ورفع المشاريع عبر الواجهة الرسومية).
• Google Chrome (للمعاينة واختبار المتصفح).