عروض الشرح المباشر عبر Zoom
عروض تعليمية واضحة ومرتبة للمبتدئين، مصممة للشرح المباشر خطوة بخطوة مع أمثلة عملية وتطبيقات حية وملاحظات للمدرب.
12
18h
90m
Zoom
فهرس الدروس الـ 12 الكاملة
اختر الدرس لفتحه في وضع العرض التقديمي مع إمكانية التبديل بين وضع المدرب ووضع المتدرب.
مدخل إلى صناعة المواقع: المواقع سابقًا والآن، وتجهيز أدوات العمل
الدرس الأول (90 دقيقة): كيف تطورت صناعة المواقع، وما الأدوات التي سنثبتها على أجهزتنا، وكيف نختار فكرة مشروعنا؟
معرفة الفرق بين المواقع في السابق والمواقع الحديثة اليوم من حيث الشكل وطريقة البناء والوقت
تخطيط صفحات الموقع وتصميم تجربة واضحة ومريحة للزائر
كيف نختار الصفحات الرئيسية، ونرتب المعلومات من الأعلى للأسفل، ونحول الفكرة إلى تصميم بصري واضح؟
تحديد الصفحات الرئيسية للموقع وترتيب تنقل الزائر بينها بسهولة
كيف تصف فكرتك للذكاء الاصطناعي بوضوح؟ (صياغة الطلب خطوة بخطوة)
الطريقة البسيطة لكتابة طلب واضح يفهمه الذكاء الاصطناعي وينفذه بدقة من أول مرة
فهم لماذا تعطي الأوامر الغامضة القصيرة نتائج عشوائية وغير مفيدة
مراجعة النتيجة وتحسينها خطوة بخطوة مع الذكاء الاصطناعي
كيف نفحص النتيجة الأولى، ونعرف ما يحتاج إلى تعديل، ونطلب التحسين بأمان دون إفساد الموقع؟
إتقان حلقة العمل الخماسية مع الذكاء الاصطناعي من الفكرة إلى التحسين المستمر
تقسيم الصفحة إلى أجزاء منظمة وتجهيز ملفات المشروع
كيف نفكك الصفحة الكبيرة إلى أقسام صغيرة يسهل بناؤها، ونرتب مجلدات مشروعنا بوضوح؟
فهم لماذا نقسم الصفحة الكبيرة إلى أجزاء صغيرة مستقلة (أقسام ومكونات)
بناء الصفحة الأساسية وتنسيقها للهاتف والكمبيوتر (HTML & CSS)
كيف نبني هيكل الصفحة وعناوينها، وننسق ألوانها ومسافاتها لتظهر بشكل مريح على شاشة الهاتف والكمبيوتر؟
فهم الفرق البسيط بين هيكل الصفحة (HTML) ومظهرها البصري (CSS)
إضافة التفاعل الحي وتسهيل تجربة الزائر (JavaScript)
كيف نجعل الصفحة تستجيب لنقرات الزائر: فتح قائمة الهاتف، تصفية المنتجات حسب النوع، وتجهيز رسالة الطلب؟
فهم دور JavaScript ببساطة: تحويل الصفحة الثابتة إلى صفحة تستجيب لضغطات الزائر فورًا
تنظيم الموقع في قوالب وقطع قابلة لإعادة الاستخدام (React Components)
بدل نسخ البطاقة وتكرارها يدويًا، كيف نصنع قالبًا ذكيًا واحدًا ونمرر له بيانات المنتجات بسهولة؟
فهم فكرة المكون (Component) في React كقالب ذكي نصنعه مرة واحدة ونستخدمه في أي مكان
ربط الصفحات وتسريع الموقع وتجهيزه لمحركات البحث (Next.js & SEO)
كيف يفتح موقعك بسرعة على الهاتف، وكيف يظهر بعنوان وصورة جذابة عند البحث عنه في Google أو مشاركة رابطه في واتساب؟
فهم دور Next.js ببساطة: تنظيم صفحات الموقع وجعلها تفتح بسرعة كبيرة
فحص الموقع واختباره الشامل قبل الإطلاق (وضوح المحتوى، الروابط، الهواتف، والأمان)
قائمة فحص عملية من 4 محطات للتأكد من جاهزية الموقع وخلوه من الأخطاء قبل إرساله لأي عميل (المدة: 90 دقيقة)
فحص وضوح النصوص والعناوين وحذف أي نصوص تجريبية أو أرقام افتراضية منسية
نشر الموقع على الإنترنت وعرضه للعملاء بطريقة مقنعة
رفع المشروع على GitHub و Vercel للحصول على رابط حي وتجهيز عرض العمل للعملاء بوضوح وصدق (المدة: 90 دقيقة)
فهم الفرق بين الرابط المحلي على جهازك (localhost) والرابط العالمي المنشور على الإنترنت