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

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

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

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

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

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

• 1. مقدمه‌ای بر CSS در نرم‌افزارهای مدیریت ناوگان
• 2. نقش و اهمیت CSS در طراحی رابط کاربری (UI)
• 3. آناتومی یک قانون CSS: انتخابگر، خصوصیت، مقدار
• 4. روش‌های افزودن CSS به صفحه: داخلی، خارجی و درون‌خطی
• 5. کامنت‌گذاری در CSS
• 6. انتخابگرهای اصلی: نوع، کلاس و شناسه
• 7. انتخابگرهای ترکیبی و گروه‌بندی
• 8. انتخابگرهای فرزند و نواده (Descendant and Child Combinators)
• 9. انتخابگرهای همسایه (Sibling Combinators)
• 10. اولویت‌بندی در CSS: آبشار (Cascade)، ویژگی (Specificity) و وراثت (Inheritance)
• 11. قانون !important و موارد استفاده صحیح
• 12. تشریح مدل جعبه‌ای (Box Model)
• 13. خصوصیت margin و ایجاد فاصله خارجی
• 14. خصوصیت padding و ایجاد فاصله داخلی
• 15. خصوصیت border و استایل‌دهی به حاشیه‌ها
• 16. مفهوم box-sizing: content-box در مقابل border-box
• 17. واحد‌های اندازه‌گیری مطلق و نسبی (px, %, em, rem)
• 18. استایل‌دهی به متن: color, font-family, font-size
• 19. ترازبندی و دکوراسیون متن (text-align, text-decoration)
• 20. وزن و استایل فونت (font-weight, font-style)
• 21. کار با رنگ‌ها: HEX, RGB, HSL
• 22. پس‌زمینه‌ها: رنگ، تصویر و موقعیت
• 23. کنترل ابعاد عناصر: width, height, min/max-width/height
• 24. خصوصیت display: بلاک، درون‌خطی و درون‌خطی-بلاک
• 25. مفهوم جریان عادی صفحه (Normal Flow)
• 26. موقعیت‌یابی (Positioning): static و relative
• 27. موقعیت‌یابی (Positioning): absolute و fixed
• 28. موقعیت‌یابی (Positioning): sticky
• 29. کنترل لایه‌ها با z-index
• 30. معرفی Flexbox و دلایل استفاده از آن
• 31. مفاهیم Flex Container و Flex Items
• 32. محور اصلی و متقاطع در Flexbox
• 33. خصوصیت flex-direction برای تعیین جهت
• 34. تراز کردن در محور اصلی با justify-content
• 35. تراز کردن در محور متقاطع با align-items
• 36. مدیریت شکست خط با flex-wrap
• 37. رشد و کوچک شدن آیتم‌ها: flex-grow, flex-shrink, flex-basis
• 38. خصوصیت shorthand به نام flex
• 39. تغییر ترتیب آیتم‌ها با order
• 40. معرفی CSS Grid و کاربرد آن در داشبوردها
• 41. مفاهیم Grid Container و Grid Items
• 42. تعریف سطر و ستون با grid-template-rows/columns
• 43. استفاده از واحد fr برای ستون‌های انعطاف‌پذیر
• 44. ایجاد فاصله بین آیتم‌ها با gap
• 45. موقعیت‌دهی به آیتم‌ها با شماره خطوط
• 46. نام‌گذاری خطوط و نواحی در گرید
• 47. ادغام سلول‌ها با grid-column و grid-row
• 48. ترکیب Flexbox و Grid برای طرح‌بندی‌های پیچیده
• 49. استایل‌دهی به دکمه‌ها و لینک‌های عملیاتی
• 50. طراحی فرم‌های ورود اطلاعات: استایل‌دهی به input ها
• 51. استایل‌دهی به Checkbox و Radio Button های سفارشی
• 52. استایل‌دهی به منوهای کشویی (select)
• 53. حالت‌های اعتبارسنجی فرم با :valid, :invalid, :required
• 54. طراحی فرم‌های پیچیده با Flexbox و Grid
• 55. ساخت کامپوننت فرم ورود به پنل مدیریت
• 56. استایل‌دهی به جداول داده: سربرگ و سطرها
• 57. ایجاد جداول راه‌راه (Zebra-Striped Tables) برای خوانایی بهتر
• 58. افزودن حالت hover به سطرهای جدول
• 59. ساخت جداول واکنش‌گرا با الگوی اسکرول افقی
• 60. طراحی جدول لیست خودروها
• 61. ایجاد نشانگرهای وضعیت (Status Indicators): آنلاین، آفلاین، در حال تعمیر
• 62. طراحی نوارهای پیشرفت (Progress Bars) برای سوخت یا سرویس دوره‌ای
• 63. ساخت کارت‌های UI برای نمایش خلاصه اطلاعات خودرو/راننده
• 64. طراحی منوی ناوبری اصلی داشبورد
• 65. ایجاد یک منوی کناری (Sidebar) قابل جمع شدن
• 66. استایل‌دهی به مودال‌ها (Modals) برای هشدارها و پیام‌ها
• 67. ایجاد Tooltip های سفارشی
• 68. طراحی Breadcrumbs برای نمایش مسیر کاربر
• 69. ایجاد تایم‌لاین (Timeline) برای تاریخچه فعالیت خودرو
• 70. اصول استایل‌دهی به عناصر نقشه (مارکرها و پاپ‌آپ‌ها)
• 71. ساخت کامپوننت نوار جستجو
• 72. طراحی کامپوننت صفحه‌بندی (Pagination) برای داده‌های حجیم
• 73. مقدمه‌ای بر طراحی واکنش‌گرا (Responsive Design)
• 74. متا تگ Viewport و اهمیت آن
• 75. رویکرد Mobile-First در مقابل Desktop-First
• 76. آشنایی با Media Queries و نقاط شکست (Breakpoints)
• 77. طراحی واکنش‌گرا برای تبلت‌ها
• 78. طراحی واکنش‌گرا برای دسکتاپ
• 79. مدیریت تصاویر واکنش‌گرا
• 80. کلاس‌های کاذب (Pseudo-classes): :hover, :focus, :active
• 81. کلاس‌های کاذب ساختاری: :first-child, :last-child, :nth-child
• 82. عناصر کاذب (Pseudo-elements): ::before و ::after
• 83. استفاده از انتخابگرهای ویژگی (Attribute Selectors)
• 84. مقدمه‌ای بر متغیرهای CSS (Custom Properties)
• 85. استفاده از متغیرها برای تم‌بندی (Theming)
• 86. ایجاد حالت تاریک (Dark Mode) برای داشبورد
• 87. انتقال‌های نرم با CSS Transitions
• 88. کنترل زمان‌بندی Transitions با timing-function
• 89. انیمیشن‌های کلیدی با @keyframes
• 90. کنترل انیمیشن‌ها با خصوصیت animation
• 91. بهینه‌سازی انیمیشن‌ها برای عملکرد بهتر
• 92. تابع ()calc برای محاسبات پویا
• 93. استفاده از سایه‌ها: box-shadow و text-shadow
• 94. فیلترهای CSS برای افکت‌های تصویری
• 95. حالت‌های ترکیب (Blend Modes)
• 96. مفهوم معماری CSS و اهمیت آن در پروژه‌های بزرگ
• 97. آشنایی با متدولوژی BEM
• 98. سازماندهی فایل‌های CSS
• 99. مقدمه‌ای بر پیش‌پردازنده‌های CSS مانند Sass/SCSS
• 100. مفهوم Nesting در Sass