98 مكون جاهز للنسخ والتخصيص
زر بسيط مع ألوان قابلة للتخصيص
زر بحدود بدون خلفية
زر بتدرج لوني جذاب
زر شفاف بتأثير hover خفيف
زر مع أيقونة SVG يسار أو يمين النص
زر مع مؤشر تحميل دوار
زر بتأثير توهج نيون جذاب
زر بتأثير 3D عند الضغط
زر مشاركة أو تسجيل دخول بـ GitHub
زر للإجراءات الخطرة مثل الحذف
أزرار متجمعة في صف واحد
زر إجراء عائم (FAB)
زر بشكل حبة دائري ناعم
npm install nouvilزر نسخ مع تأثير تأكيد
زر اشتراك بريد إلكتروني مدمج
دورة شاملة تغطي جميع الأساسيات المهمة للمبتدئين.
بطاقة لعرض دورة تعليمية
مطور ويب
بطاقة تعريف المستخدم
بطاقة لعرض الأرقام والإحصائيات
بطاقة عرض باقة مدفوعة
اكتشف أحدث التقنيات والأساليب المستخدمة من قِبل أفضل المطورين.
بطاقة لعرض مقال أو مدونة
"هذه المنصة غيّرت مساري المهني بالكامل. المحتوى ممتاز والشرح واضح جداً."
بطاقة تقييم المستخدم
تم الحفظ بنجاح!
منذ لحظة
بطاقة إشعار قابل للرفض
نقدم لك أفضل تجربة ممكنة مع أحدث التقنيات المتوفرة.
بطاقة لعرض ميزة منتج
أكملت 50 درساً بنجاح
بطاقة عرض شارة أو إنجاز
const greeting = "مرحباً!";
console.log(greeting);بطاقة لعرض snippet برمجي
شارة نقطة نابضة تدل على الحالة
شارة تدل على المستوى أو الرتبة
شارة تدل على محتوى جديد
شارة تعداد للإشعارات
شارة اسم لغة أو تقنية
شارة نسبة اكتمال المهمة
مجموعة شارات موضوعات
شارة التحقق أو الموثوقية
شارة تصنيف المحتوى
شارة عرض تقييم النجوم
شارة عرض نسبة الخصم
شارة تدل على مستوى صعوبة المحتوى
نموذج دخول بريد + كلمة مرور
حقل بحث متقدم مع أيقونة
أحدث الدروس والمقالات مباشرة إلى بريدك
نموذج اشتراك في النشرة البريدية
نموذج إنشاء حساب جديد
نموذج إرسال رسالة
قيّم تجربتك
نموذج تقييم بالنجوم
أدخل رمز التحقق المرسل إلى بريدك
حقل إدخال رمز التحقق المؤقت
قائمة تنقل جانبية
Breadcrumb للدلالة على الموقع الحالي
نظام تبويبات للتنقل بين الأقسام
مكون pagination للتنقل بين الصفحات
مؤشر خطوات wizard أو onboarding
قائمة تنقل منسدلة عند التحويم
زر رجوع للصفحة السابقة
انضم لأكثر من 50,000 مطور عربي يتعلمون أحدث التقنيات
قسم Hero بخلفية متدرجة
اكتسب مهارات البرمجة الحديثة مع خبراء متخصصين
Hero بتصميم نصف نص ونصف صورة
نقدم محتوى برمجياً عالي الجودة باللغة العربية للمطورين العرب.
Hero نظيف وبسيط بتصميم minimalist
تعلم من أفضل المدربين العرب في العالم
Hero يعرض أرقام وإحصائيات مؤثرة
تقنيات حديثة · خبراء متخصصون · شهادات معتمدة
Hero داكن مع تأثير توهج نيون
دروس عملية لتبني مشاريع حقيقية
Hero يستهدف المطورين مع عرض كود
منصتك المفضلة للتعلم البرمجي باللغة العربية
Hero مع شريط إعلان علوي
أفضل تجربة تعليمية في العالم العربي
أداء فائق السرعة
حماية على مستوى عالٍ
واجهة بسيطة وجميلة
شبكة لعرض ميزات المنتج
"أفضل منصة تعلمت منها البرمجة!"
"محتوى رائع وشرح ممتاز جداً."
قسم آراء العملاء والمستخدمين
قسم accordion للأسئلة المتكررة
أكثر من 50,000 مطور بدأوا هنا
CTA section يحث المستخدم على اتخاذ قرار
أخبار ودروس جديدة كل أسبوع
لا نرسل إيميلات مزعجة 🚫
قسم للاشتراك في النشرة الإخبارية
قسم لعرض أعضاء الفريق
مخطط خطي لعرض البيانات الزمنية
مخطط أعمدة لمقارنة البيانات
مخطط دائري لعرض التوزيعات
مخطط مساحة مع تدرج لوني
مخطط رادار لعرض المهارات والكفاءات
مخطط خطي لمقارنة سلسلتي بيانات
مخطط أعمدة متراكبة لعرض الأجزاء
بطاقة إحصائية مدمجة مع مخطط صغير
مخطط أعمدة أفقية لتصنيف البيانات
لوحة إحصاء متكاملة مع بطاقات ومخطط
مؤشر تحميل دائري بسيط
ثلاث نقاط تتحرك بالتتابع
شريط تحميل متحرك
Skeleton loading لبطاقة محتوى
مؤشر تحميل بحلقة نابضة
أشرطة عمودية ترتفع وتنخفض
شاشة تحميل كاملة للصفحة
مؤشر ثلاث نقاط بنمط الكتابة (chat)
جسيم يدور حول مركز
شريط تحميل متدرج متحرك في أعلى الصفحة
عنصر يظهر تدريجياً بتأثير fade-in
عنصر منزلق ✨
عنصر ينزلق من الجانب
أرقام تتصاعد بتأثير عداد
نص يظهر كما لو يُكتب تلقائياً
عنصر يطفو للأعلى والأسفل بتأثير سلس
نص بتدرج لوني يتحرك باستمرار
بطاقة تنقلب عند التحويم
تأثير اهتزاز للتنبيه على الخطأ
عنصر ينكشف بخط يمشي من اليسار لليمين
نص أو عنصر بتوهج نيون متحرك
| المتعلم | الدورة | التقدم | الحالة |
|---|---|---|---|
| محمد أحمد | JavaScript | 85% | مستمر |
| سارة علي | Python | 62% | مستمر |
| خالد سعد | React | 100% | مكتمل |
جدول بيانات بسيط وأنيق
| المستخدم | الباقة | الإيراد | الحالة |
|---|---|---|---|
| أحمد م. | Pro | $49 | نشط |
| سارة خ. | Free | $0 | نشط |
| عمر ع. | Enterprise | $199 | غير نشط |
جدول متقدم لعرض بيانات المستخدمين
| الدورة | الطلاب | التقييم | المستوى | الحالة |
|---|---|---|---|---|
| JavaScript الأساسي | 1,240 | ⭐ 4.9 | مبتدئ | نشط |
| React المتقدم | 890 | ⭐ 4.8 | متقدم | نشط |
جدول لإدارة قائمة الدورات