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

“أهلاً بك يا فنان الكود! هل لاحظت أن المواقع الاحترافية تستخدم أيقونة  (🏠) بجانب كلمة الرئيسية ، أو (📧) بجانب اتصل بنا ؟ الأيقونات ليست مجرد زينة ، بل هي أدلة بصرية تجعل تجربة المستخدم أسرع وأجمل . اليوم ، في آخر محطات رحلتنا في عالم التصميم (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

Previous