20 مشروع ويب باستخدام JavaScript الأساسي

وصف الدورة

• قم ببناء 20 مشروعًا للواجهة الأمامية من الصفر
• لا توجد أطر عمل جافا سكريبت أو سي إس إس
• جافا سكريبت الحديثة (ES6+) – الأسهم، جلب البيانات، الوعود، إلخ
• معالجة DOM والأحداث
• الرسوم المتحركة باستخدام CSS و JavaScript
• جلب البيانات و JSON باستخدام واجهات برمجة تطبيقات خارجية
• HTML5 Canvas، واجهة برمجة تطبيقات الكلام، الصوت والفيديو
• مناسب للمبتدئين

توقعات المستوى

• إنشاء تخطيطات وواجهات مستخدم باستخدام HTML/CSS (بدون استخدام أطر عمل CSS)
• الرسوم المتحركة باستخدام CSS (الانتقالات، الإطارات الرئيسية، إلخ، مع مشغلات JS)
• أساسيات جافا سكريبت
• اختيار ومعالجة DOM
• أحداث جافا سكريبت (النماذج، الأزرار، التمرير، إلخ)

محتوى

• مقدمة
• مدقق النماذج | مشروع تمهيدي
• حجز مقاعد السينما | التخزين المحلي والإقليمي
• مشغل فيديو مخصص | واجهة برمجة تطبيقات فيديو HTML5
• حاسبة أسعار الصرف | مقدمة عن Fetch و JSON
• طرق مصفوفات DOM | forEach، map، filter، sort، reduce
• شريط تمرير القائمة والنافذة المنبثقة | DOM و CSS
• لعبة المشنقة | DOM، SVG، الأحداث
• أداة البحث عن الوجبات | واجهة برمجة تطبيقات Fetch و MealDB
• متتبع المصروفات | طرق المصفوفات والتخزين المحلي
• مشغل الموسيقى | واجهة برمجة تطبيقات الصوت HTML5
• منشورات التمرير اللانهائي | جلب، انتظار غير متزامن، مُحمِّل CSS
• لعبة الكتابة | DOM، الفترات، الأحداث
• قارئ النصوص المنطوقة | توليف الكلام
• بطاقات الذاكرة | تأثيرات CSS، التخزين المحلي
• تطبيق البحث عن كلمات الأغاني | جلب، ترقيم الصفحات، واجهة برمجة تطبيقات Lyrics.ovh
• تطبيق الاسترخاء | رسوم متحركة CSS، setTimeout
• لعبة الهروب | واجهة برمجة تطبيقات HTML5 Canvas
• العد التنازلي للعام الجديد | التاريخ والوقت
• لعبة تخمين الأرقام بالنطق | التعرف على الكلام
• واجهة مستخدم تصفية المنتجات