🎓 دوره آموزشی جامع

📚 اطلاعات دوره

عنوان دوره: CSS for Fleet Management Manuals

موضوع کلی: برنامه نویسی

موضوع میانی: CSS

📋 سرفصل‌های دوره (100 موضوع)

• 1. مقدمه: چرا CSS برای دستورالعمل‌های مدیریت ناوگان حیاتی است؟
• 2. آشنایی با نقش CSS در کنار HTML و جاوا اسکریپت
• 3. ساختار یک دستور CSS: انتخابگر، خصوصیت و مقدار
• 4. روش‌های افزودن CSS به سند: داخلی، خارجی و درون‌خطی
• 5. کامنت‌گذاری در CSS برای مستندسازی کد
• 6. آشنایی با انتخابگرهای پایه: نوع، کلاس و شناسه (ID)
• 7. انتخابگرهای ترکیبی (Descendant, Child, Sibling)
• 8. انتخابگرهای صفت (Attribute Selectors)
• 9. مفهوم آبشار (Cascade) در CSS
• 10. اولویت‌بندی و امتیازدهی در CSS: Specificity
• 11. مفهوم ارث‌بری (Inheritance)
• 12. واحد رنگ‌ها: نام‌های کلیدی، HEX، RGB و HSL
• 13. تنظیم رنگ متن و پس‌زمینه
• 14. استفاده از خصوصیت opacity و رنگ‌های RGBA
• 15. تنظیم تصاویر پس‌زمینه
• 16. کنترل تکرار و موقعیت تصویر پس‌زمینه
• 17. مدل جعبه‌ای (Box Model): محتوا، Padding، Border، Margin
• 18. خصوصیت box-sizing: content-box در مقابل border-box
• 19. واحدهای اندازه‌گیری مطلق: پیکسل (px)
• 20. واحدهای اندازه‌گیری نسبی: درصد (%)، em و rem
• 21. تنظیمات فونت: font-family و فونت‌های امن وب
• 22. خصوصیات فونت: font-size، font-weight و font-style
• 23. تراز کردن متن: text-align
• 24. تزئین متن: text-decoration برای لینک‌ها و عناوین
• 25. فاصله‌گذاری بین حروف و کلمات
• 26. ارتفاع خط (line-height) برای خوانایی بهتر
• 27. استایل‌دهی به لیست‌های مرتب و نامرتب
• 28. مفهوم خصوصیت display: مقادیر block، inline و inline-block
• 29. پنهان کردن عناصر با display: none و visibility: hidden
• 30. موقعیت‌یابی (Positioning): static و relative
• 31. موقعیت‌یابی مطلق (absolute) و ثابت (fixed)
• 32. موقعیت‌یابی چسبنده (sticky) برای هدرها
• 33. مفهوم Z-Index برای مدیریت لایه‌ها
• 34. استفاده از Float برای چیدمان ستون‌ها
• 35. پاک‌سازی Float با استفاده از Clearfix
• 36. مقدمه‌ای بر Flexbox: چرا برای چیدمان مدرن ضروری است؟
• 37. ویژگی‌های کانتینر Flexbox: flex-direction و flex-wrap
• 38. تراز کردن آیتم‌ها در محور اصلی: justify-content
• 39. تراز کردن آیتم‌ها در محور متقاطع: align-items
• 40. تراز کردن خطوط چندگانه: align-content
• 41. ویژگی‌های آیتم‌های Flexbox: flex-grow، flex-shrink و flex-basis
• 42. کنترل ترتیب آیتم‌ها با خصوصیت order
• 43. مقدمه‌ای بر CSS Grid Layout
• 44. تعریف ستون‌ها و ردیف‌ها با grid-template-columns و grid-template-rows
• 45. ایجاد فاصله بین سلول‌ها با gap
• 46. موقعیت‌دهی آیتم‌ها در گرید با grid-column و grid-row
• 47. ایجاد قالب‌های پیچیده برای صفحات دستورالعمل
• 48. انتخابگرهای شبه‌کلاس (Pseudo-classes): :hover, :active, :focus
• 49. شبه‌کلاس‌های ساختاری: :first-child, :last-child, :nth-child
• 50. انتخابگرهای شبه‌عنصر (Pseudo-elements): ::before و ::after
• 51. کاربرد ::before و ::after برای افزودن آیکون‌ها و علائم هشدار
• 52. استایل‌دهی به جداول: border، padding و alignment
• 53. ایجاد جداول واکنش‌گرا برای نمایش داده‌های ناوگان
• 54. زیباسازی ردیف‌های زوج و فرد جداول (Zebra Striping)
• 55. استایل‌دهی به فرم‌ها: input، textarea و button
• 56. طراحی فرم‌های جستجو و گزارش‌گیری در دستورالعمل‌ها
• 57. متغیرهای CSS (Custom Properties) برای ایجاد تم‌های سفارشی
• 58. ایجاد تم روشن و تاریک برای مشاهده آسان در محیط‌های مختلف
• 59. مقدمه‌ای بر Transition برای ایجاد افکت‌های حرکتی نرم
• 60. کنترل زمان‌بندی و تاخیر در Transition ها
• 61. مقدمه‌ای بر Animation و Keyframes
• 62. ایجاد انیمیشن‌های هشداردهنده برای نکات ایمنی
• 63. تغییر شکل دو بعدی عناصر با Transform: translate, rotate, scale
• 64. تغییر شکل سه بعدی عناصر (3D Transforms)
• 65. ایجاد پس‌زمینه‌های گرادیان خطی و شعاعی
• 66. استفاده از چندین تصویر پس‌زمینه
• 67. مفهوم طراحی واکنش‌گرا (Responsive Design)
• 68. کار با Media Queries برای سازگاری با دستگاه‌های مختلف
• 69. رویکرد Mobile-First در طراحی واکنش‌گرا
• 70. بهینه‌سازی تصاویر برای اندازه‌های مختلف صفحه
• 71. استفاده از واحدهای Viewport: vw و vh
• 72. تابع calc() برای محاسبات دینامیک در مقادیر
• 73. استفاده از فیلترهای CSS برای افکت‌های تصویری
• 74. ایجاد سایه برای جعبه‌ها (box-shadow) و متن (text-shadow)
• 75. گرد کردن گوشه‌ها با border-radius
• 76. مقدمه‌ای بر پیش‌پردازنده‌های CSS مانند SASS/SCSS
• 77. استایل‌دهی برای چاپ: معرفی @media print
• 78. کنترل شکست صفحات با page-break-before/after/inside
• 79. مدیریت عناصر بی سرپرست (orphans) و بیوه (widows) در چاپ
• 80. نمایش URL لینک‌ها در نسخه چاپی
• 81. حذف عناصر غیرضروری (مانند منوها) در نسخه چاپی
• 82. ایجاد سرصفحه و پاصفحه سفارشی برای چاپ
• 83. استفاده از شمارنده‌ها (Counters) برای شماره‌گذاری بخش‌ها و فصول
• 84. ایجاد فهرست مطالب قابل کلیک با CSS
• 85. اصول اولیه دسترسی‌پذیری (Accessibility) در CSS
• 86. استفاده از focus-visible برای بهبود تجربه کاربری کیبورد
• 87. سازماندهی فایل‌های CSS: متدولوژی BEM
• 88. ساختاردهی CSS با رویکرد SMACSS
• 89. بهینه‌سازی عملکرد CSS: کوچک‌سازی (Minification)
• 90. ترکیب فایل‌های CSS برای کاهش درخواست‌های HTTP
• 91. بارگذاری فونت‌های سفارشی با @font-face
• 92. استراتژی‌های بارگذاری فونت برای بهبود سرعت
• 93. طراحی اعلان‌ها و جعبه‌های هشدار (Alert Boxes)
• 94. ایجاد راهنمای ابزار (Tooltips) با CSS خالص
• 95. ساخت آکاردئون و تب برای محتوای تودرتو
• 96. طراحی نوارهای پیشرفت (Progress Bars)
• 97. استایل‌دهی به نقل‌قول‌ها (Blockquotes) و بلوک‌های کد
• 98. ایجاد یک راهنمای استایل (Style Guide) برای ثبات در طراحی
• 99. پروژه عملی: ساختار HTML یک صفحه دستورالعمل
• 100. پروژه عملی: پیاده‌سازی چیدمان اصلی با Flexbox یا Grid