الدرس الرابع — بناء أول صفحة ويب بالكامل بالذكاء الاصطناعي

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

١. الفكرة — ماذا ستبني اليوم؟

قبل فتح أي أداة، قرر ماذا تريد بالضبط. المبتدئون يقعون في فخ الغموض — يقولون للذكاء الاصطناعي "ابنِ لي موقعاً" ثم يتفاجأون بالنتيجة. اختر مشروعاً واحداً بسيطاً من هذه القائمة:

٢. اختيار الأداة المناسبة

ثلاث أدوات مثالية للمبتدئ — كلها مجانية للبدء:

٣. كتابة أول Prompt احترافي

هنا يكمن الفرق بين نتيجة رائعة ونتيجة محبطة. الـ Prompt هو التعليمات التي تعطيها للذكاء الاصطناعي — كلما كانت أدق وأوضح، كانت النتيجة أفضل.

❌ Prompt ضعيف

ابنِ لي موقعاً شخصياً

✅ Prompt احترافي

ابنِ صفحة ويب شخصية باللغة العربية لمطور اسمه [اسمك].
التصميم: داكن وحديث، ألوان: أزرق وأبيض.
الأقسام المطلوبة:
- Header: الاسم + وصف مختصر (مطور تطبيقات)
- قسم "من أنا": فقرة تعريفية + صورة placeholder
- قسم "مهاراتي": Flutter، Python، Supabase، Vibe Coding
- قسم "أعمالي": ٣ بطاقات مشاريع وهمية
- Footer: روابط تواصل اجتماعي

المتطلبات التقنية:
- HTML وCSS وJavaScript خالص، بدون frameworks
- الاتجاه: RTL عربي كامل
- متجاوب مع الجوال

مكونات الـ Prompt الاحترافي

١. نوع المشروع (ما هو؟)
٢. الجمهور المستهدف (لمن؟)
٣. الأقسام المطلوبة (ماذا يحتوي؟)
٤. التصميم (الألوان، الخط، الأسلوب)
٥. المتطلبات التقنية (HTML فقط؟ React؟ RTL؟)

٤. التعامل مع النتيجة الأولى

فتحت Bolt.new، لصقت الـ Prompt، ضغطت Enter — ظهر الكود في ثوانٍ. ماذا الآن؟

قائمة مراجعة النتيجة الأولى:

• هل الصفحة تُعرض بشكل صحيح؟
• هل الاتجاه RTL عربي؟
• هل الأقسام المطلوبة كلها موجودة؟
• هل التصميم قريب من ما تريد؟
• هل تعمل على الجوال؟

٥. التحسين بالتكرار (Iteration Loop)

هذه أقوى مهارة في Vibe Coding — القدرة على التحسين المتواصل بالحوار. بدلاً من محاولة كتابة الـ Prompt المثالي من أول مرة، ابدأ وحسّن تدريجياً.

تحسين التصميم

"كبّر حجم الخط في العنوان الرئيسي"
"غيّر لون الخلفية إلى #0a0a0a"
"أضف مسافة أكبر بين الأقسام"
"اجعل الأزرار أكثر استدارة"

إضافة وظائف

"اجعل القائمة تختفي عند التمرير للأسفل وتظهر عند التمرير للأعلى"
"أضف تأثير fade-in عند ظهور كل قسم"
"اجعل بطاقات المشاريع تتحرك قليلاً عند المرور عليها"

إصلاح مشاكل

"الصفحة لا تعمل جيداً على الجوال، اجعلها متجاوبة"
"النص العربي يظهر من اليسار، اجعله RTL"
"الصور لا تظهر، استخدم صور placeholder"

دورة التحسين المثالية:

أكتب Prompt ← أرى النتيجة ← أحدد مشكلة واحدة
← أطلب التعديل بدقة ← أرى النتيجة ← أكرر

٦. نشر مشروعك للعالم

بعد رضاك عن النتيجة، حان وقت النشر. ثلاث طرق حسب مستواك:

عبر Bolt.new (الأسهل)

اضغط زر "Deploy" مباشرةً داخل Bolt — ستحصل على رابط حي في ثوانٍ. هذا كل ما في الأمر.

عبر Netlify (الأفضل)

١. اضغط "Export" في Bolt لتحميل الملفات
٢. افتح netlify.com وأنشئ حساباً مجانياً
٣. اسحب مجلد مشروعك وأفلته في Netlify
٤. احصل على رابطك الحي فوراً — مثال:
   https://my-portfolio-abc123.netlify.app

عبر GitHub Pages (للمحترفين)

# ارفع مشروعك على GitHub أولاً
git init
git add .
git commit -m "first portfolio"
git push origin main

# ثم في إعدادات المستودع:
# Settings → Pages → Deploy from main

تمرين عملي