صمّم موقعك بـ CSS مع الذكاء الاصطناعي

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

في الدرس اللي فات عملت أول موقع ليك. النهارده هنخلّيه شكله احترافي، والأهم: هتتعلم تقول للذكاء الاصطناعي بالظبط إنت عايز إيه، بدل «خلّيه أحلى» وخلاص.

على الشاشة: إبراهيم قدام الكاميرا، وجنبه الموقع قبل وبعد التصميم.

المشهد 2: قاعدة CSS

أي سطر CSS ليه تلات أجزاء: مين اللي هيتغير، وإيه اللي هيتغير، وهيبقى قد إيه. في ⁦h1 { color: #1c5d86; }⁩، الـ h1 هو العنصر، وcolor هي الخاصية، والكود اللي بعدها هو القيمة.

على الشاشة: القاعدة مكتوبة كبيرة، وكل جزء بيتلوّن لوحده وعليه اسمه.

المشهد 3: الصندوق

كل عنصر في الصفحة عبارة عن صندوق. جوّه الحدود فيه padding: المسافة بين الكلام والحد. والحد نفسه اسمه border. وبرّه الحدود فيه margin: المسافة بين الصندوق وجيرانه. لما تفهم الصندوق، هتعرف تظبط أي مسافة.

على الشاشة: تسجيل شاشة لنشاط الصندوق: تحريك padding وborder وmargin.

المشهد 4: شكل الكارت

تعالى نلعب بكارت التعريف: نكبّر العنوان، ونزوّد المسافة الداخلية، وندوّر الزوايا، ونضيف ضل خفيف. كل حركة ليها سطر في الكود، وتقدر تشوف السطر بيتغير قدامك.

على الشاشة: تسجيل شاشة لنشاط الكارت، والكود بيتلوّن مع كل تغيير.

المشهد 5: الترتيب بـ Flexbox

عايز الهوايات جنب بعض بدل ما تبقى تحت بعض؟ هنا ييجي Flexbox. display: flex بترص العناصر في صف، وgap بيعمل مسافة بينها، وflex-wrap بتنزّلها سطر جديد لو الشاشة ضيقة. وخد بالك: صفحتنا عربي، فالصف بيبدأ من اليمين.

على الشاشة: تسجيل شاشة لنشاط Flexbox: تغيير الاتجاه والمسافة وعرض الشاشة.

المشهد 6: اطلب التصميم صح

دلوقتي إنت عارف الكلمات. بدل «خلّيه أحلى» قول: «زوّد الـ padding بتاع الكارت لـ 24px، ودوّر الزوايا 16px، وخلّي الهوايات جنب بعض بـ Flexbox». كده الذكاء الاصطناعي هيفهمك من أول مرة.

على الشاشة: مقارنة بين الطلب المبهم والطلب المحدد، وبعدين البرومبت الجاهز.

المشهد 7: التحدي والختام

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

على الشاشة: شاشة التحدي، وبعدين شاشة الأسئلة.