Course Content
الوحدة الثانية: سحر التصميم (CSS)
ملخص الوحدة الثانية (Summary) **"مرحباً بك في عالم الجمال والإبداع! في هذه الوحدة 'سحر التصميم'، سننتقل من مرحلة بناء الهياكل الجامدة (HTML) إلى مرحلة منح موقعك روحاً وشخصية فريدة باستخدام لغة CSS. ستتعلم في هذه المرحلة: كيف تختار الألوان والخطوط التي تعبر عن هويتك أو هوية عملائك. سر التحكم في الأزرار وجعلها تتفاعل مع حركة الفأرة (Hover Effects). كيفية تنظيم العناصر في الصفحة بدقة متناهية لتظهر بشكل احترافي على كافة الشاشات. بنهاية هذه الوحدة، لن يكون موقعك مجرد أكواد، بل سيكون لوحة فنية احترافية جاهزة لاستقبال الزوار. هل أنت مستعد لإطلاق المصمم الذي بداخلك؟"**
0/12
المستوى المتوسط: احتراف تنسيق المواقع بلغة CSS

🌟 مقدمة تحفيزية :

“أهلاً بك يا فنان الكود! هل لاحظت أن المواقع الاحترافية تستخدم أيقونة  (🏠) بجانب كلمة الرئيسية ، أو (📧) بجانب اتصل بنا ؟ الأيقونات ليست مجرد زينة ، بل هي أدلة بصرية تجعل تجربة المستخدم أسرع وأجمل . اليوم ، في آخر محطات رحلتنا في عالم التصميم (CSS) ، سنتعلم كيف نضيف آلاف الأيقونات الاحترافية لموقعك بضغطة زر ، لنختم هذه الوحدة بمشروع متكامل ينبض بالاحترافية !”

🏗️ 1.  ما هي مكتبة Font Awesome ؟ هي المكتبة الأشهر عالمياً التي توفر آلاف الأيقونات (مثل أيقونات التواصل الاجتماعي ، الأسهم ، القلوب ، وغيرها) كأنها “خطوط” يمكنك التحكم في لونها وحجمها بسهولة .

🔗 2.  كيف نربط الأيقونات بموقعنا ؟ نضع هذا الرابط السريع (CDN) داخل وسم <head> في ملف الـ HTML :

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">

💻 3.  التطبيق العملي (كيف تضع الأيقونة؟) استخدام الأيقونات سهل جداً، نستخدم وسم مع الكلاس الخاص بالأيقونة :  

<p><i class="fas fa-home"></i> الرئيسية</p>
<p><i class="fas fa-envelope"></i> راسلنا عبر البريد</p>
<p><i class="fab fa-whatsapp"></i> تواصل معنا واتساب</p>

🎨 4.  تنسيق الأيقونات بـ CSS بما أنها تُعامل كـ “نصوص”، يمكنك تغيير لونها وحجمها ببساطة :

i {
    color: #e67e22; /* لون الأكاديمية */
    font-size: 24px;
    margin-left: 10px;
}

🎓 مسك الختام :

ماذا أنجزت في هذه الوحدة ؟

يا بطل “أكاديمية قياوي” ، انظر خلفك لترى حجم الإنجاز :

•  بدأت بصفحة بيضاء ، والآن تملك موقعاً ملوناً ومنسقاً .

•   تعلمت Flexbox و Grid لتوزيع العناصر كالمحترفين .

•    بنيت Navbar احترافي و Landing Page جذابة .

•    استخدمت Bootstrap لتسريع عملك و Font Awesome لتجميله .

•    والأهم.. أن موقعك أصبح منشوراً على الإنترنت يراه الجميع !

🎯 التحدي النهائي (مشروع مسك الختام) :

“قم بإضافة أيقونات لروابط القائمة العلوية (Navbar) ولأزرار التواصل في أسفل الصفحة (Footer) . بمجرد الانتهاء، حدث  موقعك  على Netlify وأرسل  لنا الرابط  النهائي لنحتفل  بتخرجك من المستوى المتوسط !

للتوضيح : 

الأيقونات تجعل الموقع يبدو احترافياً مثل مواقع الشركات . أشهر مكتبة أيقونات في العالم هي: Font Awesome Image Image Image Image Image تستعمل لتمثيل : الهاتف  ، البريد  ،  الدورات  ،  المستخدم  ،  الشبكات الاجتماعية  . 🟢 الخطوة 1 : إضافة المكتبة داخل <head> في ملف index.html انسخ هذا السطر :

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">

🟢 الخطوة 2 : استعمال الأيقونة مثال :

<i class="fa-solid fa-code"></i>

تعطيك أيقونة البرمجة . 🟢 مثال داخل بطاقة

<div class="card">

<i class="fa-solid fa-laptop-code"></i>

<h3>تعلم البرمجة</h3>

<p>ابدأ تعلم HTML و CSS بسهولة</p>

</div>

🟢 تغيير حجم الأيقونة

i{

font-size:40px;

color:#2c7be5;

}

🧠    لماذا الأيقونات مهمة ؟ ✔ تجعل التصميم جميلاً ✔ تساعد على فهم المحتوى بسرعة ✔ تجعل الموقع احترافياً

🟢 الخاتمة النهائية للدورة

🎓 خاتمة الدورة:

رحلتك بدأت الآن هنيئاً لك ! لقد وصلت إلى نهاية هذه الدورة . خلال هذه الرحلة تعلمنا معاً أساسيات تصميم المواقع خطوة بخطوة ، بدءاً من فهم لغة HTML ، ثم تنسيق الصفحات باستخدام CSS ، وصولاً إلى تصميم موقع كامل يعمل على مختلف الأجهزة . تعلمنا أيضاً كيفية :

  • إنشاء صفحات ويب منظمة
  • تصميم مواقع جميلة ومتجاوبة (Responsive)
  • استعمال Flexbox و Grid لتنظيم العناصر
  • إنشاء قائمة تنقل احترافية (Navbar)
  • تصميم صفحة هبوط (Landing Page)
  • نشر الموقع على الإنترنت
  • استعمال Bootstrap لتحسين التصميم
  • إضافة أيقونات احترافية للموقع

لكن تذكر أن نهاية هذه الدورة ليست نهاية التعلم، بل هي بداية طريقك في عالم تطوير الويب. أفضل طريقة لتطوير مهاراتك هي:

  • إنشاء مواقع صغيرة
  • تجربة أفكار جديدة
  • تحليل مواقع احترافية ومحاولة تقليدها

استمر في التعلم والتجربة ، فكل مشروع جديد سيجعلك أقرب إلى الاحتراف . أتمنى لك التوفيق في رحلتك التقنية . Qiyaoui Academy

Scroll to Top