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

🌟 مقدمة تحفيزية : “أهلاً بك يا بطل ! لقد فعلتها.. قمت بالتعلم ، والتصميم ، وبناء موقعك المتكامل . والآن ، حان الوقت ليراه العالم أجمع ! في هذا الدرس ، سنكسر حاجز الخوف من ‘الاستضافات’ و’النطاقات’ . سأعلمك كيف ترفع ملفات موقعك (التي تعبنا في كتابتها) على الإنترنت مجاناً تماماً ، ليكون لك رابط خاص بك (مثل : myname.netlify.app) ترسله لأصدقائك ، عائلتك ، أو تضعه في سيرتك الذاتية بفخر !”

🏗️ 1. ما هي الاستضافة (Hosting)؟ ببساطة ، الاستضافة هي “بيت” لموقعك . هي جهاز حاسوب قوي يعمل 24 ساعة في اليوم ليتمكن أي شخص في العالم من رؤية ملفاتك في أي وقت .

💻 2. خطوات النشر عبر منصة Netlify (الأسهل للمبتدئين)  سنستخدم منصة Netlify لأنها تتيح لنا نشر المواقع بمجرد “السحب والإفلات”

  1 .   تجهيز الملفات : تأكد أن ملفك الرئيسي يحمل اسم index.html (هذا ضروري جداً ليعرف المتصفح أي صفحة يفتح أولاً) .

  2 .       التوجه للموقع : اذهب إلى Netlify.com .

  3 .          تسجيل الدخول : سجل حساباً مجانياً باستخدام بريدك الإلكتروني .

   4 .       السحر (Drag & Drop) : ابحث عن قسم “Sites” وستجد مربعاً مكتوباً عليه       “Drag and drop your site folder here” .

   5 .           الرفع  :  اسحب مجلد مشروعك بالكامل (الذي يحتوي على ملفات HTML والصور و CSS) وضعه داخل المربع .

    6 .         النتيجة : في ثوانٍ ، سيعطيك الموقع رابطاً أخضر مبروك ! موقعك الآن حيّ على الإنترنت .

🔗 3.  كيف تغير اسم موقعك ؟ 

  الرابط التلقائي يكون صعب الحفظ (مثل fancy-swan-123.netlify.app) .

اذهب إلى Domain Settings .

اختر Options ثم Edit site name .

اكتب اسماً يعبر عنك (مثلاً : qiyaoui-student-web) .

💡 لماذا اخترنا هذه الطريقة في أكاديمية قياوي؟

نحن في الأكاديمية نهتم بـ “البداية السريعة” . هذه الطريقة توفر على الطالب عناء شراء “دومين” أو “سيرفر” في بداياته ، وتمكنه من رؤية ثمار جهده فوراً وبشكل احترافي .

🎯 التحدي النهائي للوحدة الثانية :

“يا مبرمج! قم برفع موقعك الآن ، وانسخ الرابط الخاص بك وضعه في تعليقات الدرس أو أرسله لنا . نحن ننتظر بكل شوق لنرى إبداع طلاب أكاديمية قياوي يرفرف في فضاء الإنترنت !” 

الملخض : بعد أن تعلمنا إنشاء موقع كامل بـ HTML و CSS ، بقي أهم شيء :

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

🟢 الطريقة الأسهل : GitHub Pages نستعمل منصة اسمها :  GitHub Pages  وهي خدمة تسمح لك بنشر موقعك مجاناً . الموقع سيصبح مثلاً : https://username.github.io

🟢 الخطوة 1  : إنشاء حساب اذهب إلى : GitHub ثم : 1️⃣ اضغط Sign Up 

2️⃣ أدخل      • البريد الإلكتروني   ،  • كلمة المرور  ،  •  اسم المستخدم .

🟢 الخطوة  2 : إنشاء Repository بعد الدخول : اضغط New Repository   واكتب اسم المشروع : my-website ثم : ✔ Public ✔ Create Repository

🟢 الخطوة 3  : رفع ملفات الموقع  ، اضغط : Upload files   ثم ارفع  : index.html  style.css images بعدها اضغط :  Commit changes

🟢 الخطوة 4: تفعيل الموقع اذهب إلى : Settings ثم : Pages ثم اختر: Deploy from branch ثم:main بعد ثوانٍ سيظهر الرابط . مثلاً: https://username.github.io/my-website

🎉 أصبح موقعك على الإنترنت .

🧠 نصائح مهمة ✔ اسم الصفحة الرئيسية يجب أن يكون :    index.html ✔ لا تستعمل المسافات في أسماء الملفات . ✔ نظم ملفاتك هكذا : website │ index.html style.css images  .

آية {يَأْتِ بِهَا اللَّهُ ۚ إِنَّ اللَّهَ لَطِيفٌ خَبِيرٌ} (سورة لقمان : 16)  

Scroll to Top