تطوير الويب بالعربي: HTML/CSS/JS + مدخل PHP وقواعد البيانات

Name: تطوير الويب بالعربي: HTML/CSS/JS + مدخل PHP وقواعد البيانات
Rating: 4.9 (3 reviews)

دورة عربية عملية لمدة 13 ساعة تغطي HTML/CSS/JS مع مدخل PHP وقواعد البيانات، مشروع تطبيقي يبني موقعًا متجاوبًا خطوة بخطوة

Created byMussab Osman

Last updated 9/2025

Arabic

What you'll learn

ستبني موقعًا متكاملًا متجاوبًا من الفكرة حتى الإطلاق.
تتقن HTML الدلالي لهيكلة صفحات احترافية وسهلة الفهرسة.
تطبّق CSS عصرية (ألوان، خطوط، مسافات) لواجهات جميلة وواضحة.
تصمّم تخطيطات قوية باستخدام Flexbox & Grid بثقة.
تحوّل الصفحات إلى تجربة حيّة بـ JavaScript (DOM, Events, Fetch).
تدير النماذج باحتراف: التحقق من المدخلات وتجربة استخدام سلسة.
تكتب كودًا نظيفًا وقابلًا للتوسّع وفق أفضل الممارسات.
تحفظ بيانات المستخدم محليًا عبر localStorage لبناء مزايا عملية (مثل تفضيلات الثيم).

Course content

6 sections • 50 lectures • 12h 52m total length

مقدمة | Introduction2:42
يفهم الطالب مفهوم لغة البرمجة ودورها في إعطاء أوامر مفهومة للحاسوب.
يتعرّف الطالب على طريقتين لتنفيذ البرامج: الترجمة دفعة واحدة أو تفسير الأوامر سطرًا بسطر.
كيف يعمل الانترنت | How the internet work2:21
يلتقط الطالب الصورة العامة لعمل الشبكات ونقل البيانات بين الأجهزة عبر بروتوكولات قياسية.
يتعرّف على HTTP/HTTPS وFTP وSMTP ولماذا نحتاج كلًّا منها في الويب.
كيف تعمل المواقع الالكترونية | How the websites works2:53
يفهم الطالب أدوار HTML للبنية وCSS للتصميم وJavaScript للتفاعل ضمن صفحة واحدة.

Introduction to HTML | مقدمة الى الـ HTML10:22
في هذا الدرس يتعرّف الطالب على أساسيات لغة HTML ويُنشئ الهيكل الأساسي للصفحة (DOCTYPE, <html>, <head>, <body>)
Setting Up the Development Environment | تجهيز بيئة العمل5:19
Heading Tags | وسوم العناوين14:27
يتعلّم الطالب استخدام وسوم العناوين h1–h6 لبناء هيكل واضح للمحتوى.
Anchor Tags & Tag Attributes | وسوم الربط وسمات الوسوم9:40
يفهم الطالب وسم <a> والخصائص الشائعة للوسوم وكيفية إنشاء روابط صحيحة.
Paragraph & Text Tags | وسوم الفقرات والنصوص5:50
يتعلم الطالب طريقة التعامل مع الفقرات وكسر الأسطر والنصوص المهيأة والمقتبسة بشكل صحيح.
Image & Media Tags | وسوم الصور والوسائط24:25
يتعلم الطالب ادراج الصور والفيديو والصوت مع خصائص الوصولية والحجم المناسبة.
Table Tags | وسوم الجداول7:34
يتعلم الطالب آلية انشاء جداول بيانات بسيطة مع رؤوس وأعمدة ودمج خلايا عند الحاجة.
List Tags | وسوم القوائم4:08
يميّز الطالب بين العناصر البلوكية والداخل السطر وتأثيرها على التخطيط.
Block and Inline Elements | العناصر الكتلية والسطرية6:37
يميّز الطالب في هذا الدرس بين العناصر البلوكية والعناصر السطرية وتأثيرها على التخطيط
Form Tags | وسوم النماذج28:42
يستطيع الطالب بعد اكمال هذا الدرس من بناء نموذجًا بسيطًا لإدخال البيانات مع الحقول والأزرار والخصائص الأساسية.
Form Tags 2 | وسوم النماذج 28:13
يستطيع الطالب بعد اكمال هذا الدرس من بناء نموذجًا بسيطًا لإدخال البيانات مع الحقول والأزرار والخصائص الأساسية.
Unit Final Project | المشروع النهائي للوحدة5:43
تطبيق عملي شامل لبناء صفحة HTML كاملة اعتمادًا على الدروس السابقة.

Unit Overview | نظرة عامة على الوحدة2:34
Introduction to CSS | مقدمة إلى CSS7:30
يتعرّف الطالب على دور CSS في تصميم الصفحة وطرق تضمينها (خارجي/داخلي/ضمني).
CSS Selectors | المحددات14:07
طرق اختيار العناصر بدقة باستخدام المحددات البسيطة والمركّبة .
Text and Font Styling | تنسيق النص والخطوط17:38
الخطوط والأحجام والمحاذاة والتحويلات لتحسين القراءة.
The Box Model | نموذج الصندوق11:22
يتعرف الطالب في هذا الدرس على الخصائص padding/margin/border لعمل حدود وهوامش، وتأثير box-sizing.
Backgrounds and Borders | الخلفيات والحدود14:16
يتعلم الطالب في هذا الدرس تطبيق الخلفيات والصور والخصائص المختصرة والحدود الدائرية.
Sizing and Positioning | القياسات والتموضع21:29
يتعلم الطالب في هذا الدرس طرق التحكم في القياسات ووحدات القياس المختلفة والتموضع الثابت/النسبي/المطلق والثابت.
Display and Layout | العرض والتخطيط5:57
يستوعب الطالب في هذا الدرس أنماط العرض وأنظمة التخطيط الحديثة لبناء واجهات نظيفة.
Flexbox | فليكس بوكس19:02
يتعلم الطالب في هذا الدرس بناء تخطيطات مرنة بمحاذاة وتوزيع ذكي للمساحات.
Grid Layout | تخطيط الشبكة13:45
يتعلم الطالب في هذا الدرس انشاء شبكات ثنائية الأبعاد بصفوف وأعمدة ومساحات مسمّاة.
Transitions and Animations | الانتقالات والحركات13:32
اضافة حركات سلسة عبر transition والرسوم عبر keyframes..
Responsive Design | التصميم المتجاوب9:36
بناء صفحات تعمل جيدًا على الشاشات المختلفة
Advanced CSS Essentials | أساسيات CSS المتقدمة18:51
التعرف على المتغيرات وتقنيات متقدمة وافضل الممارسات في CSS
Unit Final Project | المشروع النهائي للوحدة4:26
تطبيق ما تعلمناه في هذه الوحدة في مشروع متكامل

Unit Overview | نظرة عامة على الوحدة4:44
Introduction to JavaScript | مقدمة إلى JavaScript16:13
يتعرف الطالب دور JavaScript في إضافة التفاعل والمنطق ويقوم بربط ملف خارجي بالصفحة.
Variables and Operators | المتغيرات والمعاملات26:26
يتعرف الطالب في هذا الدرس مع let/const وأنواع البيانات الأساسية والمعاملات الحسابية والمنطقية.
Control Flow | التحكم في تدفق التنفيذ23:14
يتعلم الطالب في هذا الدرس تنفيذ شروط if/else وelse if .
Loops and Iteration | الحلقات والتكرار19:16
يتعلم الطالب في هذا الدرس تكرار التعليمات باستخدام for/while/do-while ويتعامل مع break وcontinue.
Working with the DOM | التعامل مع DOM19:36
يتعرف الطالب في هذا الدرس على طريق اختيار العناصر ويعدّل النصوص والخصائص ويُنشئ/يحذف عناصر ديناميكيًا.
Events and Forms | الأحداث والنماذج24:14
يتعرف الطالب في هذا الدرس على التعامل مع addEventListener ويمنع الإرسال الافتراضي ويتابع قيم الحقول.
Arrays and Objects | المصفوفات والكائنات25:02
يتعلم الطالب في هذا الدرس طرق تخزين بيانات متعددة ويعالجها بالحلقات وطرائق المصفوفات ويعرف تركيب الكائن.
Functions and Scope | الدوالّ والمجال11:54
يتعرف الطالب في هذا الدرس على طريقة كتابة الدوال التقليدية والسهمية ويفهم الإرجاع والمجالات المحلية والعالمية.
Project | مشروع تطبيقي29:29
تطبيق مشروع عملي متكامل يغطي الدروس السابقة
Local Storage and Data Persistence | التخزين المحلي وحفظ البيانات27:46
يتعرف الطالب في هذا الدرس على طريقة حفظ البيانات محليًا باستخدام localStorage مع JSON.stringify/parse.
Working with APIs | التعامل مع واجهات البرمجة API18:08
يتعلم الطالب في هذا الدرس طريقة الاتصال وجلب البيانات باستخدام fetch ويعرضها في الـDOM ويتعامل مع الأخطاء.
Advanced JavaScript Concepts | مفاهيم جافاسكربت المتقدمة17:52
يتعلم الطالب في هذا الدرس مفاهيم الرفع (Hoisting)، وبعض المفاهيم المتقدمة في جافاسكربت

Final Project | المشروع النهائي1:18:31
المشروع الختامي يغطي كل ما تعلمه الطالب خلال الوحدات السابقة ، ويجب عليه التطبيق العملي ومراجعة النتائج مع المشروع المرفق
Practical Project | مشروع عملي8:52
مشروع تطبيقي ، يطبق فيه الطالب ويقارن النتائج مع المشروع المرفق
Publish Your Site | نشر الموقع على الإنترنت8:16
يتعرف الطالب خلال هذا الدرس على طريقة تجهيز الموقع الالكتروني بعد انتهائه من التطوير ، وطرق حجز الدومين والاستضافة ورفع الملفات عبر cPanel ,

Using External Libraries | استخدام المكتبات الخارجية15:29
يتعرف الطالب في هذا الدرس على مبدأ قابلية اعادة الاستخدام وطرق استخدام المكتبات الخارجية
Databases | قواعد البيانات17:44
يتعرف الطالب في هذا الدرس على ماهية قواعد البيانات والفرق بين قواعد البيانات العلائقية والغير علائقة وايضا يتعرف على تعليمات SQL لادارة قواعد البيانات العلائقية
PHP basics | اساسيات لغة ال PHP21:51
في هذا الدرس يتعرف الطالب على لغة الPHP ، وعلى طريقة اعداد السيرفر المحلي XAMPP وايضا يتعرف الطالب في هذا الدرس على PhpMyadmin لادارة قاعدة البيانات MySql وطريقة تنفيذ بعض اوامر SQL
Read Form Data (GET/POST) | قراءة بيانات نماذج HTML بواسطة (GET/POST)6:55
في هذا الدرس يتعرف الطالب على طرق استقبال البيانات من نماذج HTML بواسطة ال PHP
Connect PHP to DB | ربط PHP بقاعدة البيانات37:28
في هذا الدرس يتعرف الطالب على طريقة ربط الPHP بقواعد البيانات MySql وينفذ عمليات CRUD بسيطة

Requirements

لا تُشترط خبرة برمجية مسبقة — سنبدأ من الصفر.
جهاز كمبيوتر (Windows/Mac/Linux)
تخصيص 30–60 دقيقة يوميًا للتمارين والتطبيق.
الصبر والعزيمة وطول البال — الاستمرارية أهم من أي شيء.
حماس للتعلّم بالممارسة وبناء مشروع حقيقي يُضاف إلى بورتفوليوك.

Description

تعلم تطوير المواقع الإلكترونية من الصفر وحتى الاحتراف — دورة عربية مكثفة مدتها 13 ساعة تغطي الأساسيات التي تحتاجها لبناء موقع يعمل فعليًا. نبدأ بـ HTML لصياغة هيكل صفحات نظيف ودلالي (Semantic HTML)، ثم ننتقل إلى CSS لتنسيق احترافي باستخدام Flexbox وGrid مع تصميم متجاوب يلائم مختلف الشاشات. بعد ذلك تتقدم إلى JavaScript لفهم DOM والأحداث، التعامل مع النماذج، وجلب البيانات عبر ‎fetch/JSON لبناء صفحات تفاعلية سلسة. نختم بمدخل عملي إلى PHP وقواعد البيانات لإعداد نماذج إرسال حقيقية مع تحقق من صحة المدخلات، وتخزين بسيط (CRUD)، وتطبيق مبادئ أمان أساسية لتجنّب XSS وSQL Injection.

خلال الدورة ستبني مشروعًا تطبيقيًا نهائيًا: موقعًا متكاملًا يضم صفحة رئيسية واضحة، أقسام خدمات أو نماذج، وصفحة تواصل تعمل فعلًا (إرسال/حفظ/تأكيد)، مع تعديلات في واجهة المستخدم تحسّن التجربة. بعد كل وحدة يوجد تمرين عملي وحلول مشروحة، وتُرفق ملفات كود منظمة لتتعلم هيكلة المشاريع منذ البداية بطريقة عملية وواقعية.

المخرجات المتوقعة:

فهم صلب لـ HTML/CSS/JS وكيفية دمجها لبناء واجهات متجاوبة.
تنفيذ نماذج حقيقية بـ PHP مع تحقق وحماية أساسية.
ربط أولي بقاعدة بيانات لبناء ميزات CRUD صغيرة.

المتطلبات المسبقة: استخدام أساسي للحاسوب، متصفح حديث، ومحرر كود مثل VS Code. لا تُشترط خبرة سابقة بالبرمجة، لكن يلزم إصرار ورغبة حقيقية في التعلّم.

هذه الدورة مناسبة للمبتدئين، والطلاب، ومنتقلي المسار، ولكل من يريد أساسًا عمليًا قويًا بالعربية لاقتحام عالم الويب بثقة. ستجد أسئلة/أجوبة داخل المنصة لمناقشة الاستفسارات التقنية وتبادل الحلول. الهدف واضح: تُنهي الدورة ومعك موقع يعمل، وكود نظيف، وفهم منهجي يمكّنك من اتخاذ الخطوة التالية بثبات.

Who this course is for:

المبتدئين تمامًا في تطوير الويب الراغبين في دخول المجال بخطة واضحة ومشروع تخرّج فعلي.
قد لا تكون هذه الدورة مناسبة إذا كنت تبحث عن محتوى نظري فقط، أو تتوقّع إطارًا متقدّمًا مثل React/Angular ضمن هذا الكورس تحديدًا، أو لديك خبرة متقدّمة وتبحث عن موضوعات متخصّصة جدًا.

تطوير الويب بالعربي: HTML/CSS/JS + مدخل PHP وقواعد البيانات

What you'll learn

Explore related topics

Course content

مقدمة3 lectures • 8min

الوحدة الثانية : HTML12 lectures • 2hr 11min

الوحدة الثالثة : CSS14 lectures • 2hr 54min

الوحدة الرابعة : JavaScript13 lectures • 4hr 24min

الوحدة الخامسة : المشروع الختامي3 lectures • 1hr 36min

Databases & PHP | قواعد البيانات واساسيات لغة PHP5 lectures • 1hr 39min

Requirements

Description

Who this course is for: