القائمة
الرئيسية الكورسات المسارات المهنية حماية نفسك فاحص الفيروسات
سجّل الآن مجاناً

Front-End Web Development: من الصفر إلي الإحتراف

بواسطة Karim Ahmed التصنيفات : Websites
قائمتي المفضلة مشاركة
مشاركة
رابط الصفحة
مشاركة على وسائل التواصل الاجتماعي

عن الدورة

دورة تدريبية متكاملة تأخذك خطوةً بخطوة من أولى مفاهيم الويب حتى بناء تطبيقات تفاعلية حقيقية. تجمع هذه الدورة بين ثلاث ركائز أساسية — HTML لبناء الهيكل، CSS للتنسيق والتصميم، وJavaScript لإضافة المنطق والتفاعل — بأسلوب تدريجي يضمن رسوخ الأساس قبل الانتقال للمتقدم.

 

المرحلة الوحدات المحور
المرحلة الأولى HTML Basics · HTML & CSS Fundamentals بناء هيكل صفحات الويب
المرحلة الثانية CSS Fundamentals · Advanced Styling · Flexbox & Responsive · Bootstrap تنسيق الصفحات وجعلها متجاوبة
المرحلة الثالثة Final Project 1 & 2 تطبيق عملي شامل بـ HTML & CSS
المرحلة الرابعة JS Fundamentals · Control Flow · Functions & Strings أساسيات البرمجة بـ JavaScript
المرحلة الخامسة Objects & Arrays · Methods & Events · CRUD · Data Management بناء تطبيقات تفاعلية حقيقية
إظهار المزيد

ماذا سوف تتعلم؟

  • بناء هيكل صفحات الويب من الصفر
  • إنشاء نماذج وجداول وروابط وصور
  • استخدام العناصر الدلالية (Semantic Elements)
  • تنسيق وتصميم صفحات الويب احترافيًا
  • إتقان الـ Flexbox لتنظيم العناصر
  • بناء تصاميم متجاوبة تعمل على كل الشاشات
  • استخدام Bootstrap لتسريع التطوير
  • كتابة كود برمجي منطقي من الصفر
  • التحكم في سلوك الصفحة عبر الأحداث (Events)
  • بناء عمليات CRUD كاملة (إضافة / عرض / تعديل / حذف)
  • حفظ البيانات في المتصفح عبر localStorage
  • تطبيق كل ما تعلمته في مشاريع حقيقية
  • قراءة وتحويل تصاميم Figma إلى كود
  • بناء Navbar متجاوب احترافي

محتوى الدورة

MODULE 1: HTML Basics
يتناول هذا الجزء التعرف على أساسيات لغة HTML وبناء الهيكل الأول لصفحات الويب، من إنشاء المشروع وكتابة العناوين والفقرات، إلى إدراج الصور والروابط والنماذج. يهدف هذا القسم إلى تمكين المبتدئ من فهم العناصر الأساسية للصفحة وكيفية تنظيم المحتوى بطريقة صحيحة وواضحة تمهيدًا للانتقال إلى مراحل التنسيق والتطوير المتقدمة.

  • 01- intro web
    00:00
  • 02- create project, heading
    00:00
  • 03- p, span
    00:00
  • 04- img, br
    00:00
  • 05- anchor, hr
    00:00
  • 06- traget
    00:00
  • 07- forms, input
    00:00

MODULE 1: HTML & CSS Fundamentals
يتناول هذا الجزء استكمال عناصر HTML المهمة مثل الجداول والعناصر الدلالية، مع التعرف على وسم وتنظيم الصفحة بشكل صحيح. كما يقدّم مدخلًا إلى لغة CSS، وشرح مفهوم class وid وأنواع عرض العناصر (inline وblock)، مما يمهّد لفهم كيفية تنسيق الصفحات وبنائها بطريقة أكثر تنظيمًا واحترافية.

MODULE 2: CSS Fundamentals
يتناول هذا الجزء أساسيات تنسيق صفحات الويب باستخدام CSS، حيث يتعرّف المتدرّب على كيفية التحكم في المسافات والحدود والخلفيات، وفهم أولوية القواعد (Specificity)، بالإضافة إلى تنسيق الخطوط والألوان بطريقة صحيحة. يهدف هذا القسم إلى مساعدة المبتدئين على تحويل صفحاتهم من شكلٍ بسيط إلى تصميمٍ منسّق وواضح يعكس فهماً سليماً لأساسيات التنسيق.

MODULE 2: CSS Advanced Styling
يتناول هذا الجزء أساليب تموضع العناصر داخل الصفحة باستخدام خصائص position بأنواعها المختلفة، وكيفية التحكم في ترتيبها وظهورها. كما يشرح التعامل مع خاصية overflow، وإخفاء العناصر، والتحكم في الشفافية، بالإضافة إلى إضافة تأثيرات تفاعلية مثل hover وtransition. يساعد هذا القسم المبتدئ على فهم كيفية تنظيم العناصر بصريًا وإضافة لمسات حركية بسيطة تجعل التصميم أكثر احترافية.

MODULE 2: CSS Flexbox & Responsive Design
يتناول هذا الجزء أساليب تنسيق الصفحات الحديثة باستخدام Flexbox لتنظيم العناصر بشكل مرن واحترافي، مع التعرف على متغيرات CSS لتسهيل إدارة القيم داخل المشروع. كما يشرح مفهوم التصميم المتجاوب عبر Media Query، وتطبيق ذلك عمليًا من خلال إنشاء شريط تنقل (Navbar). يهدف هذا القسم إلى تمكين المتدرّب من بناء واجهات مرنة تتكيف مع مختلف أحجام الشاشات بطريقة عملية وواضحة.

MODULE 2: CSS Bootstrp
يتناول هذا الجزء التعرف على إطار العمل Bootstrap واستخدامه في بناء صفحات ويب متجاوبة بسرعة وسهولة. يبدأ بشرح بعض الخصائص المتقدمة في CSS مثل العناصر الوهمية وخصائص الصور، ثم ينتقل إلى أساسيات Bootstrap وأدواته الجاهزة، ونظام الشبكة (Grid System) ونقاط التوقف (Breakpoints). يهدف هذا القسم إلى تمكين المتدرّب من إنشاء تصميمات عملية ومتناسقة تدعم مختلف أحجام الشاشات بأسلوب منظم وواضح.

MODULE 3: Final Project 1
تطبيق عملي شامل بـ HTML & CSS

MODULE 3: Final Project 2
تطبيق عملي شامل بـ HTML & CSS

MODULE 4: JavaScript Fundamentals
"أساسيات البرمجة بـ JavaScript" أو "مقدمة إلى JavaScript" — وهي اللبنة الأولى لأي مبرمج قبل الدخول في المفاهيم المتقدمة.

MODULE 4: JS Control Flow
"التحكم في تدفق البرنامج" أو "Control Flow" — وهي المرحلة التي يبدأ فيها الكود يتخذ قرارات ويكرر مهام بشكل ذكي.

MODULE 4: JS Functions & Strings
"الدوال والتعامل مع النصوص" — وهي المرحلة التي يبدأ فيها الكود يتنظم ويصبح قابلًا لإعادة الاستخدام.

MODULE 5: JS Functions, Objects & Arrays
"Functions, Objects & Arrays" — وهي المرحلة التي يبدأ فيها المبرمج يكتب كودًا منظمًا واحترافيًا ويتعامل مع البيانات المعقدة.

MODULE 5: JS Methods & Events
"DOM Interaction & Methods" — وهي المرحلة التي يبدأ فيها الكود يتفاعل مع الصفحة ويُنجز عمليات حقيقية.

MODULE 5: JS CRUD

MODULE 5: JS Data Management & Browser Storage
"Data Management & Browser Storage" — وهي المرحلة التي يتعلم فيها المبرمج كيف يحفظ البيانات ويتحكم فيها داخل المتصفح.

تقييمات ومراجعات الطلاب

لا يوجد تقييم حتى الآن
لا يوجد تقييم حتى الآن