کتاب صوتی CSS for Fleet Management Websites

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

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

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

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

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

📋 سرفصل‌های دوره

• 1. مقدمه‌ای بر CSS و نقش آن در وب‌سایت‌های مدیریت ناوگان
• 2. CSS چیست و چرا برای داشبوردهای مدیریتی حیاتی است؟
• 3. نحوه اتصال فایل‌های CSS به HTML: داخلی، خارجی و درون‌خطی
• 4. آشنایی با ساختار (Syntax) یک قانون CSS
• 5. اولین استایل شما: تغییر رنگ و پس‌زمینه داشبورد
• 6. مفهوم انتخابگرها (Selectors) در CSS
• 7. انتخابگرهای اصلی: تگ، کلاس و شناسه (ID)
• 8. گروه‌بندی انتخابگرها برای اعمال استایل‌های مشترک
• 9. انتخابگرهای فرزند و نسل (Descendant and Child)
• 10. انتخابگرهای همسایه و خواهر و برادر (Adjacent and General Sibling)
• 11. انتخابگرهای ویژگی (Attribute Selectors) برای فیلدهای فرم
• 12. مفهوم Cascade وراثت و اولویت در CSS
• 13. اهمیت Specificity و نحوه محاسبه آن
• 14. استفاده از !important و نکات مربوط به آن
• 15. واحدها در CSS: پیکسل (px)، درصد (%) و em
• 16. واحدهای مدرن: rem، vw و vh برای طراحی واکنش‌گرا
• 17. مدل جعبه‌ای (Box Model): محتوا، Padding، Border و Margin
• 18. خاصیت box-sizing و تاثیر آن بر طرح‌بندی
• 19. استایل‌دهی به حاشیه (Border): ضخامت، نوع و رنگ
• 20. کار با رنگ‌ها: نام، هگزادسیمال، RGB و RGBA
• 21. کار با پس‌زمینه‌ها: background-color و background-image
• 22. گرادینت‌های خطی و شعاعی برای پس‌زمینه
• 23. استایل‌دهی به متون و تایپوگرافی در داشبورد
• 24. کار با فونت‌ها: font-family، font-size و font-weight
• 25. وارد کردن فونت‌های سفارشی با @font-face
• 26. تنظیم فاصله بین خطوط (line-height) و حروف (letter-spacing)
• 27. تراز کردن متن و دکوراسیون آن (text-align, text-decoration)
• 28. شبه-کلاس‌ها (Pseudo-classes): :hover, :focus, :active
• 29. شبه-کلاس‌های ساختاری: :first-child, :last-child, :nth-child
• 30. شبه-المان‌ها (Pseudo-elements): ::before و ::after
• 31. کاربرد ::before و ::after برای افزودن آیکون‌های وضعیت
• 32. موقعیت‌یابی (Positioning): static, relative, absolute
• 33. موقعیت‌یابی (Positioning): fixed و sticky برای هدر و سایدبار
• 34. مفهوم z-index و مدیریت لایه‌ها
• 35. نمایش (Display): block, inline, inline-block
• 36. خاصیت display: none و visibility: hidden
• 37. مقدمه‌ای بر Flexbox برای چیدمان‌های مدرن
• 38. مفاهیم اصلی Flexbox: کانتینر و آیتم‌ها
• 39. ویژگی‌های کانتینر Flexbox: flex-direction, justify-content
• 40. ویژگی‌های کانتینر Flexbox: align-items, flex-wrap
• 41. ویژگی‌های آیتم‌های Flexbox: flex-grow, flex-shrink, flex-basis
• 42. ساخت نوار ناوبری (Navbar) اصلی داشبورد با Flexbox
• 43. چیدمان کارت‌های اطلاعات خودرو با Flexbox
• 44. مقدمه‌ای بر CSS Grid برای طرح‌بندی‌های پیچیده
• 45. مفاهیم اصلی Grid: کانتینر، آیتم‌ها، سطرها و ستون‌ها
• 46. تعریف ستون‌ها و سطرها با grid-template-columns و grid-template-rows
• 47. واحد fr در CSS Grid
• 48. ایجاد طرح‌بندی کلی داشبord با grid-template-areas
• 49. فاصله‌گذاری بین آیتم‌ها با gap
• 50. استایل‌دهی به فرم‌ها: مقدمه و ساختار کلی
• 51. استایل‌دهی به فیلدهای ورودی (input) و ناحیه متنی (textarea)
• 52. استایل‌دهی به دکمه‌ها (Buttons) و حالت‌های مختلف آن
• 53. استایل‌دهی به چک‌باکس‌ها و دکمه‌های رادیویی
• 54. اعتبارسنجی فرم با CSS: شبه‌کلاس‌های :valid و :invalid
• 55. استایل‌دهی به جداول داده (Data Tables)
• 56. استایل‌دهی به سربرگ (thead) و بدنه (tbody) جدول
• 57. ایجاد سطرهای شطرنجی (Zebra Striping) در جداول
• 58. استایل‌دهی به سطرها هنگام هاور شدن (hover)
• 59. طراحی جداول واکنش‌گرا برای نمایش در موبایل
• 60. استایل‌دهی به لیست‌ها: لیست‌های نامرتب و مرتب
• 61. ساخت منوهای سایدبار با لیست‌ها
• 62. استایل‌دهی به کارت‌ها (Cards) برای نمایش اطلاعات خودرو یا راننده
• 63. افزودن سایه (box-shadow) به کارت‌ها برای ایجاد عمق
• 64. استفاده از آیکون‌ها (Icon Fonts مانند Font Awesome یا SVG)
• 65. استایل‌دهی به نشانگرهای وضعیت خودرو (فعال، متوقف، در حال تعمیر)
• 66. ساخت نوارهای پیشرفت (Progress Bars) با CSS
• 67. استایل‌دهی به مودال‌ها (Modals) و پاپ‌آپ‌ها
• 68. مقدمه‌ای بر Transitionها برای انیمیشن‌های نرم
• 69. ویژگی transition-property, transition-duration, transition-timing-function
• 70. اعمال Transition بر روی دکمه‌ها و لینک‌ها
• 71. مقدمه‌ای بر Transformهای دو بعدی: translate, rotate, scale
• 72. مقدمه‌ای بر انیمیشن‌های پیچیده‌تر با @keyframes
• 73. ساخت انیمیشن لودینگ (Loading Spinner) با CSS
• 74. متغیرهای CSS (Custom Properties) و کاربرد آن در تم‌بندی
• 75. تعریف و استفاده از متغیرها برای رنگ‌ها و اندازه‌ها
• 76. پیاده‌سازی تم روشن و تاریک (Light/Dark Mode) با متغیرهای CSS
• 77. تابع calc() برای محاسبات دینامیک در CSS
• 78. فیلترهای CSS: grayscale, blur, brightness
• 79. مقدمه‌ای بر طراحی واکنش‌گرا (Responsive Web Design)
• 80. مفهوم Viewport و متا تگ آن
• 81. استفاده از Media Queries برای اعمال استایل‌های شرطی
• 82. رویکرد Mobile-First در طراحی واکنش‌گرا
• 83. طراحی واکنش‌گرای نوار ناوبری اصلی
• 84. طراحی واکنش‌گرای طرح‌بندی داشبورد با Grid و Flexbox
• 85. مخفی کردن و نمایش المان‌ها در اندازه‌های مختلف صفحه
• 86. استایل‌دهی به نقشه‌ها (مانند Google Maps یا Leaflet)
• 87. سفارشی‌سازی ظاهر پنجره‌های اطلاعاتی (InfoWindows) روی نقشه
• 88. استایل‌دهی به مسیرهای ترسیم شده روی نقشه
• 89. ایجاد استایل‌های مخصوص چاپ (Print Stylesheets)
• 90. مخفی کردن المان‌های غیرضروری در نسخه چاپی گزارشات
• 91. تنظیمات صفحه و فونت برای چاپ
• 92. مبحث دسترسی‌پذیری (Accessibility) در CSS
• 93. استایل‌دهی به حالت :focus برای ناوبری با کیبورد
• 94. استفاده از prefers-reduced-motion برای کاربران حساس
• 95. سازماندهی فایل‌های CSS و معماری‌های رایج (مانند BEM)
• 96. نکات بهینه‌سازی عملکرد CSS: فشرده‌سازی و کاهش حجم فایل
• 97. پروژه نهایی: ساخت کامل یک صفحه داشبورد مدیریت ناوگان
• 98. جمع‌بندی و مراحل بعدی برای یادگیری پیشرفته CSS
• 99. **طراحی واکنش‌گرا (Responsive Design) در CSS: بهینه‌سازی داشبورد برای دستگاه‌های مختلف (موبایل، تبلت، دسکتاپ)**
• 100. **CSS Grid و Flexbox: ایجاد طرح‌بندی‌های (Layouts) پیچیده و انعطاف‌پذیر برای داشبورد مدیریت ناوگان**