لن تخسر أموالك —
بل سَتَرْبَح المال.

الحلقة 1: انطلاقة البرمجة بالذكاء الاصطناعي وتشريح الكود من الصفر

رحلتك تبدأ هنا بأبسط وأقوى الطرق. نستعرض البرامج الأساسية المجانية 100% لتطوير المواقع بالذكاء الاصطناعي خطوة بخطوة. ستكتب أول Prompt وتكتشف كيف تطوره للوصول إلى تصميم UI/UX مبهر بدلاً من النتائج العشوائية. لن نغرق في نظريات معقدة؛ سنشرح HTML و CSS و JavaScript بطريقة ممتعة ومبسطة، ونتدرب على ملف تجريبي لفهم بنية ما ينشئه الذكاء الاصطناعي وكيف ترتبط كل قطعة بالأخرى، مع تقسيم الكود إلى ملفات مستقلة وواضحة، واحتراف فحص وتعديل العناصر مباشرة من المتصفح.

📸 Preview Snapshots

الحلقة 2: احتراف الـ Navbar، التجاوب (Responsive) وأسرار الـ CSS

بعد تثبيت الأساسيات، نغوص في بناء شريط التنقل (Navbar) الذي يمثل قلب أي موقع احترافي. ستفهم معنى الـ Navbar ولماذا سُمي بهذا الاسم وما هي عناصره الضرورية. ستتعلم كيف تحول صورة أو طلب عميل إلى شريط تنقل واقعي، وكيف تجعله متجاوباً تماماً (Responsive) ليعمل بسلاسة على الهواتف والشاشات بأبسط الأوامر. سنتعلم مفهوم الـ Border وتعديله بالأوامر ويدوياً عبر الـ ClassName، وتثبيت إضافة Live Server، والتحكم في تموضع الشريط الثابت (Fixed Position) وشرح مواضع الـ CSS (Static, Relative, Fixed)، مع أهم الكلمات المفتاحية لتعديل مظهر الـ Navbar بكل سهولة.

📸 Preview Snapshots

الحلقة 3: بناء مشروع حقيقي، تصميم الـ Hero Section بالـ Figma وتعدد الثيمات

هنا ننتقل من المشاريع الوهمية إلى مشروع حقيقي متكامل كما في سوق العمل. نركز على واجهة الـ Hero Section وأهميتها الحاسمة في جذب الزوار. ستتعلم تفريغ الصور باحتراف عبر Photoroom، وتصميم الـ Hero بشكل بسيط وسريع على Figma لفهم دورة العمل، ثم تحويل ذلك التصميم بالملي إلى كود حقيقي باستخدام الـ Prompts فقط. سنضيف سلايدر تفاعلي (Carousel)، ونبرمج ثيماً ثانياً (Dark / Light Mode)، ونغير الخطوط بالذكاء الاصطناعي، ونتعلم تقنيات التكبير والتحجيم (Scaling) والتحكم المطلق في تموضع العناصر كاختصارات احترافية.

📸 Preview Snapshots

الحلقة 4: بطاقات المنتجات، الفيديوهات، تقنيات GitHub وأسرار التفاعل والـ UI/UX

هذه الحلقة مليئة بالأسرار العملية للواجهات الجذابة. سنتعلم تبديل وتحديث صور المنتجات، وتقنية جديدة للعثور على العناصر داخل الكود بواسطة التعليقات (Comments). سنضيف عناصر الفيديو وخصائصها البرمجية، ونولد صوراً احترافية بالذكاء الاصطناعي لبطاقات العرض، ونتحكم في أبعاد الصور غير المتناسقة داخل الـ Containers بالـ CSS. سنشرح ونبرمج النوافذ المنبثقة (Popups)، ونستكشف قوالب الـ Cursors وصفحات التحميل والـ Cards وتعديلها. ستتعلم حل أخطاء الذكاء الاصطناعي يدوياً، واستخدام GitHub للاستفادة من التأثيرات البصرية الجاهزة، وكسر الشكل النمطي لبطاقات الذكاء الاصطناعي على شاشات الهاتف عبر بدائل لتأثير الـ Hover، وتطبيق حيل نفسية وتصميمية لجذب عين المستخدم وزيادة النقرات والرغبة في الشراء.

📸 Preview Snapshots

الحلقة 5: الـ Footer، صفحة المنتج، الربط مع Google Sheets، حل المشاكل، النشر وتحقيق أول أرباح

تتويج كل ما تعلمته في نظام متكامل وعالي القيمة. سنبدأ ببناء الـ Footer وما يجب أن يحتويه، ثم نبني صفحة المنتج (Product Page) مع شروط وعمليات تحقق دقيقة. ستتعلم التفكير كمبرمج حقيقي: اكتشاف المشاكل الصامتة من فحص الـ UI، وفهم أين ترتبط صفحة المنتج بالرئيسية وكيف تتنقل بين الملفات، وتتبع الأخطاء باستخدام الـ Console و Console.log. والميزة الأقوى: درس تطبيقي كامل لربط صفحة المنتج بـ Google Sheets لحفظ الطلبات والبيانات تلقائياً مع حيل استخراج التعليمات بالذكاء الاصطناعي! سنضيف شروط التحقق على المدخلات وتنبيهات الأخطاء، ونبني صفحة شكر (Thank You Page) وإشعارات الـ Toast، ونرفع الموقع على الإنترنت بالـ CLI، مع أسهل الطرق العملية لتحقيق أول أرباحك وتوليد الدخل مما تعلمته.

📸 Preview Snapshots