تطوير الويب التفاعلي

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

ابدأ رحلتك لإحتراف تطوير الويب

دورة شاملة تأخذك من الصفر إلى بناء مواقع ويب تفاعلية باستخدام أحدث التقنيات الأساسية.

ابدأ التعلم الآن

لبنات البناء الأساسية للويب

تعرّف على الأدوار المتكاملة للغات HTML، CSS، و JavaScript.

🏗️

HTML

الهيكل العظمي لصفحتك. تُستخدم لتحديد بنية المحتوى ومعناه.

🎨

CSS

المظهر الجمالي لصفحتك. تُستخدم لتصميم التخطيط، الألوان، والخطوط.

⚡️

JavaScript

العقل المُدبّر لصفحتك. تُستخدم لإضافة التفاعل، الديناميكية، والوظائف.

المنهج الدراسي التفاعلي

انتقل بين الوحدات لاستكشاف المفاهيم والمشاريع العملية.

بناء هيكل الويب باستخدام HTML

في هذه الوحدة، ستتعلم كيفية بناء الهيكل الأساسي لصفحات الويب. سنغطي كل شيء من النصوص والروابط إلى الصور والنماذج، مع التركيز على الممارسات الدلالية وإمكانية الوصول.

تعرف على العناصر الأساسية مثل العناوين (`

`)، الفقرات (`

`)، الروابط (``)، والصور (``).

<!DOCTYPE html>
<html lang="ar">
  <head>
    <title>صفحتي الأولى</title>
  </head>
  <body>
    <h1>مرحباً بالعالم</h1>
    <p>هذه أول صفحة ويب لي.</p>
    <a href="#">هذا رابط</a>
  </body>
</html>

استخدم وسوم مثل `

`, `

مشروع الوحدة 1

بناء الهيكل الأولي لصفحة محفظة شخصية باستخدام HTML فقط.

تصميم صفحات الويب باستخدام CSS

حوّل هياكل HTML البسيطة إلى تصميمات جذابة ومتجاوبة. ستتعلم كل شيء عن الألوان والخطوط والتخطيطات باستخدام Flexbox واستعلامات الوسائط.

مفهوم أساسي يوضح أن كل عنصر HTML هو صندوق يتكون من: المحتوى (Content)، الحشوة (Padding)، الحدود (Border)، والهامش (Margin).

.my-element {
  width: 200px;
  padding: 20px;
  border: 2px solid black;
  margin: 15px;
}

استخدم Flexbox لإنشاء تخطيطات مرنة ومحاذاة العناصر بسهولة داخل الحاوية.

مشروع الوحدة 2

تطبيق الأنماط على صفحة المحفظة وجعلها متجاوبة مع مختلف أحجام الشاشات.

إضافة التفاعل مع JavaScript

اجعل صفحاتك تنبض بالحياة. ستتعلم أساسيات JavaScript، وكيفية التلاعب بـ DOM للاستجابة لأفعال المستخدم مثل النقرات وإرسال النماذج.

استخدم JavaScript لاختيار عناصر HTML وتغيير محتواها أو أنماطها، والاستماع إلى الأحداث مثل `click`.

const myButton = document.getElementById('myBtn');
const message = document.getElementById('message');

myButton.addEventListener('click', () => {
  message.textContent = 'تم النقر على الزر!';
});

تعلم كيفية تخزين البيانات في المتغيرات وكتابة دوال قابلة لإعادة الاستخدام لتنظيم الكود.

مشروع الوحدة 3

إضافة وظائف تفاعلية إلى صفحة المحفظة، مثل زر "عرض المزيد" أو التحقق من صحة نموذج الاتصال.

الخطوات التالية في رحلتك

الأساسيات هي البداية فقط. استكشف هذه الأدوات والمجتمعات لمواصلة التعلم.

أطر عمل ومكتبات شائعة

منصات ومجتمعات للتعلم

MDN Web Docs freeCodeCamp Stack Overflow Dev.to

أطر عمل ومكتبات شائعة

منصات ومجتمعات للتعلم

باسبورك

القائمة الرئيسية

الصفحات

تطوير الويب التفاعلي

ابدأ رحلتك لإحتراف تطوير الويب

لبنات البناء الأساسية للويب

HTML

CSS

JavaScript

المنهج الدراسي التفاعلي

بناء هيكل الويب باستخدام HTML

`)، الفقرات (`
`)، الروابط (``)، والصور (``).

`<!DOCTYPE html> <html lang="ar"> <head> <title>صفحتي الأولى</title> </head> <body> <h1>مرحباً بالعالم</h1> <p>هذه أول صفحة ويب لي.</p> <a href="#">هذا رابط</a> </body> </html>`

مشروع الوحدة 1

تصميم صفحات الويب باستخدام CSS

مشروع الوحدة 2

إضافة التفاعل مع JavaScript

مشروع الوحدة 3

المشروع النهائي: تطبيق ويب متكامل

اختر مشروعك:

الخطوات التالية في رحلتك

أخر المواضيع من قسم : الذكاء الاصطناعي

تعليقات

إرسال تعليق

القائمة الرئيسية

الصفحات

تطوير الويب التفاعلي

ابدأ رحلتك لإحتراف تطوير الويب

لبنات البناء الأساسية للويب

HTML

CSS

JavaScript

المنهج الدراسي التفاعلي

بناء هيكل الويب باستخدام HTML

`)، الفقرات (``)، الروابط (``)، والصور (``). <!DOCTYPE html> <html lang="ar"> <head> <title>صفحتي الأولى</title> </head> <body> <h1>مرحباً بالعالم</h1> <p>هذه أول صفحة ويب لي.</p> <a href="#">هذا رابط</a> </body> </html>

مشروع الوحدة 1

تصميم صفحات الويب باستخدام CSS

مشروع الوحدة 2

إضافة التفاعل مع JavaScript

مشروع الوحدة 3

المشروع النهائي: تطبيق ويب متكامل

اختر مشروعك:

الخطوات التالية في رحلتك

أطر عمل ومكتبات شائعة

منصات ومجتمعات للتعلم

أخر المواضيع من قسم : الذكاء الاصطناعي

تعليقات

إرسال تعليق

`)، الفقرات (`
`)، الروابط (``)، والصور (``).

`<!DOCTYPE html> <html lang="ar"> <head> <title>صفحتي الأولى</title> </head> <body> <h1>مرحباً بالعالم</h1> <p>هذه أول صفحة ويب لي.</p> <a href="#">هذا رابط</a> </body> </html>`