تصميم مواقع الويب للمبتدئين
بعد انتهاء دورة أساسيات لغة html للمبتدئين ، حان الآن موعد دورة جديدة في أساسيات لغة css ، والدورة موجهة أيضا للمبتدئين ، دروس مصورة فيديو ، هذه التجميعة الأولى للدروس التي تضم 10 فيديوهات رفعتها على قناتي . لغة css هي لغة تستخدم لتنسيق المحتوى المكتوب بلغة html ، لذلك لا بد لك أن تكون قد شاهدت وطبقت على دورة html ، فإن لم تكن تعرف ماهي html فهذه روابط الدورة في المدونة :
أو يمكنك الدخول ومشاهدتها مباشرة على القناة وهذا رابط البلايليست :
روابط قد تحتاجها :
حمل برنامج محرر براكتس
يمكنك تحميل ملفات موقع w3schools لتصفح الموقع بدون أنترنت
CSS هي اختصار لجملة Cascading Style Sheets ، وقد تم إضافتها منذ الإصدار الرابع للغة html من أجل حل مشكلة التنسيق الذي كان يكتب في صفحة المحتوى html مما جعل ملفات هذا المحتوى طويلة جدا وبالتالي صارت مشاكل في التحميل ، تم حل هذه المشكلة بأكواد css تكتب بثلاث طرق :
الطريقة الأولى : كتابة الكود في ملف خارجي يتم استدعاؤه عن طريق العلامة link ويصطلح عليها ب External Style Sheet .
الطريقة الثانية : كتابة كود مستقل في نفس ملف html ويصطلح عليها ب Internal Style Sheet
الطريقة الثالثة : كتابة الكود داخل الوسم ويصطلح عليها ب Inline Style Sheet
في الدرس الأول من هذه الدورة أي المقدمة ، شرحت بالإضافة إلى ما سبق ماهية لغة css والصيغة التي يكتب بها كود css .
فيديو الدرس الأول
وفي الدرس الثاني شرحت مختلف الخصائص التي تستخدم لتنسيق النصوص والتعامل معها .
فيديو الدرس الثاني
وفي الدرس الثالث شرحت الخلفيات بنوعيها اللونية والصورة ومختلف الخصائص التابعة لها .
فيديو الدرس الثالث
وفي الدرس الرابع شرحت الخطوط والخصائص التي تتحكم فيها من حيث النوع والحجم والشكل .
فيديو الدرس الرابع
في الدرس الخامس تحدثت عن القوائم وتنسيقها بلغة css و الخصائص والقيم التي تستخدم لذلك الغرض .
فيديو الدرس الخامس
وفي الدرس السادس تحدثت عن كيفية عمل الحدود Borders بلغة css و الفرق بين الخاصية border والخاصية outline .
فيديو الدرس السادس
وفي الدرس السابع شرحت مايسمى Box Model نظريا ، وعمليا الفرق بين margin الذي هو مقدار إزاحة العنصر خارجيا ، و padding الذي هو مقدار إزاحة العنصر داخليا .
فيديو الدرس السابع
الدرس الثامن ، التحكم في الأبعاد عن طريق خصائص width و height ومتى وكيف نستخدم min-width و max-width و min-height و max-height .
فيديو الدرس الثامن
الدرس التاسع من الدورة ، خاصية display ومختلف القيم التي تأخذها وخاصية visibility ، والفرق بين display مع القيمة none و visibility مع القيمة hidden مع أن كلتا القاعدتين تخفي العنصر .
فيديو الدرس التاسع
في الدرس العاشر شرحت الوضعيات المختلفة :
- الوضعية النسبية Position relative
- الوضعية المطلقة Position absolute
- الوضعية الثابتة Position fixed
مع الخصائص top و right و bottom و left .
بالإضافة إلى الخاصية z-index التي تساهم في ترتيب هذه الوضعيات من حيث الظهور .
فيديو الدرس العاشر
في الدرس الحادي عشر شرحت خاصية overflow وخاصية cursor التي تتحكم في شكل ظهور مؤشر الماوس .
فيديو الدرس الحادي عشر
في الدرس الثاني عشر شرحت خاصية float وكيفية معالجة تأثيرها على العناصر الأخرى باستخدام خاصية clear أو overflow .
فيديو الدرس الثاني عشر
في الدرس الثالث عشر شرحت خاصية opacity التي تتحكم في شفافية وظهور العنصر وكيفية عمل خلفية لونية شفافة عن طريق rgba .
فيديو الدرس الثالث عشر
نهاية الجزء الأول من الدورة ، موعدنا إن شاء الله في الجزء الثاني مع شرح مفصل لأنواع المعرفات Selectors وشرح Combound Selector وصولا إلى شرح أنواع Advanced Selectors .
دمتم في رعاية الله وحفظه .