اعمل أول موقع ليك بالذكاء الاصطناعي

المشهد 1: البداية

تخيّل إنك عمرك ما كتبت ولا سطر كود، وفي أقل من نص ساعة تقدر تعمل أول موقع ليك بمساعدة الذكاء الاصطناعي. يلا نجرّبها سوا.

على الشاشة: إبراهيم قدام الكاميرا، وبعدين لقطة سريعة للموقع اللي هيتبني في آخر الدرس.

المشهد 2: الأساسيات

الموقع اللي قدامك مش سحر. فيه HTML، ودي اللغة اللي بتحدد عناصر الصفحة، وCSS اللي بتتحكم في شكلها وألوانها، وJavaScript اللي بتخلي الصفحة تتفاعل معاك.

على الشاشة: الصفحة بتتفكك لتلات طبقات: العناصر (HTML)، الألوان والشكل (CSS)، والزرار اللي بيرد عليك (JavaScript).

المشهد 3: كتابة البرومبت

بدل ما تقول للذكاء الاصطناعي اعمل لي موقع وخلاص، لازم تحدد له الموقع لمين، وهيحتوي على إيه، وشكله يكون عامل إزاي.

على الشاشة: مقارنة بين «اعمل لي موقع» وبرومبت واضح فيه: لمين، وفيه إيه، وشكله إزاي.

المشهد 4: التجربة التفاعلية

افتح النشاط واكتب اسمك، وشوف العنوان بيتغير في نفس اللحظة: ده محتوى الصفحة، يعني HTML. اختار هواية تانية، وقسم الهواية هيتغير. دوس على لون، والخلفية كلها هتتلوّن: ده شغل CSS. وفي الآخر دوس «رحّب بيا»، هتطلع لك رسالة باسمك: ده JavaScript، بيستنى منك فعل ويرد عليه. ولو لخبطت الدنيا، زرار «رجّع كل حاجة زي الأول» موجود.

على الشاشة: تسجيل شاشة للنشاط: كتابة الاسم، تغيير الهواية، تغيير اللون، الضغط على «رحّب بيا»، وبعدين زرار الرجوع للأول.

المشهد 5: نفهم الكود

تعالى نبص على الكود اللي ورا الموقع. في HTML هتلاقي ⁦<h1>⁩ وجواه اسمك: ده العنوان الكبير. في CSS هتلاقي قاعدة body وجواها background: ده لون الخلفية، غيّر الكود واللون يتغير. وفي JavaScript هتلاقي addEventListener، ومعناها: «لما حد يدوس على الزرار، اعمل كذا». مش مطلوب تحفظ حاجة من دول؛ المهم تعرف كل جزء بيعمل إيه، عشان تطلب من الذكاء الاصطناعي التعديل اللي عايزه وتتأكد إنه اتعمل صح.

على الشاشة: تسجيل شاشة لـ«افهم الكود»: التنقل بين HTML وCSS وJavaScript، وتعديل اللون جوه الكود، وبعدين نشاط «لاقي الغلطة».

المشهد 6: التحدي

دلوقتي دورك. غيّر شكل الموقع، واختار هواية مختلفة، وضيف لمستك الخاصة. مش مطلوب تحفظ الكود، المطلوب تبدأ تفهمه وتعرف تعدّل عليه.

على الشاشة: قايمة مهام التحدي على الشاشة.

المشهد 7: الختام

لو خلصت التجربة، اختبر نفسك، وبعدها انتقل للدرس اللي بعده. إحنا هنا بنتعلم بالتجربة مش بالحفظ.

على الشاشة: إبراهيم قدام الكاميرا، وبعدين شاشة الأسئلة.