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

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

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

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

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

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

• 1. مقدمه‌ای بر CSS و کاربرد آن در تحلیل بازار مدیریت ناوگان
• 2. نقش CSS در مصورسازی داده‌های ناوگان
• 3. آشنایی با ساختار یک سند HTML برای داشبورد
• 4. روش‌های افزودن CSS به صفحه: Inline, Internal, External
• 5. آشنایی با سینتکس CSS: انتخابگرها، خصوصیات و مقادیر
• 6. مفاهیم پایه انتخابگرها: Element, Class, ID
• 7. کامنت‌گذاری و بهترین شیوه‌ها در کدنویسی CSS
• 8. کار با ابزارهای توسعه‌دهنده مرورگر (Developer Tools) برای دیباگ CSS
• 9. مفهوم Cascade و وراثت (Inheritance) در CSS
• 10. مدل جعبه‌ای (Box Model): Content, Padding, Border, Margin
• 11. واحد اندازه‌گیری Box Sizing: تفاوت content-box و border-box
• 12. واحدهای اندازه‌گیری مطلق و نسبی (px, em, rem, %, vh, vw)
• 13. کار با رنگ‌ها: نام‌های کلیدی، HEX, RGB, HSL
• 14. تنظیم پس‌زمینه: رنگ، تصویر و موقعیت
• 15. خصوصیات پیشرفته پس‌زمینه: background-size و background-attachment
• 16. استایل‌دهی به متون: Font Family, Font Size, Font Weight
• 17. تراز کردن و دکوراسیون متن (Text Alignment & Decoration)
• 18. وارد کردن فونت‌های سفارشی (مانند Google Fonts)
• 19. استایل‌دهی به لیست‌ها: مرتب و نامرتب
• 20. مدیریت سرریز محتوا با خصوصیت Overflow
• 21. خصوصیت Display: درک مقادیر block, inline, inline-block
• 22. مخفی‌سازی عناصر با display: none و visibility: hidden
• 23. مفهوم Specificity: کدام استایل اعمال می‌شود؟
• 24. اولویت‌بندی استایل‌ها با important! (و چرا باید از آن پرهیز کرد)
• 25. انتخابگرهای ترکیبی (Combinators): Descendant, Child, Sibling
• 26. انتخابگرهای ویژگی (Attribute Selectors)
• 27. کلاس‌های کاذب (Pseudo-classes): مفهوم و کاربرد :hover, :active, :focus
• 28. کلاس‌های کاذب ساختاری: :first-child, :last-child, :nth-child
• 29. عناصر کاذب (Pseudo-elements): کاربرد ::before و ::after
• 30. موقعیت‌یابی (Positioning): Static و Relative
• 31. موقعیت‌یابی پیشرفته: Absolute و Fixed
• 32. کنترل لایه‌ها با Z-Index
• 33. موقعیت‌یابی Sticky برای هدر جداول و منوها
• 34. مقدمه‌ای بر Flexbox برای طراحی لی‌آوت‌های داشبورد
• 35. ویژگی‌های Flex Container بخش اول: flex-direction, flex-wrap
• 36. ویژگی‌های Flex Container بخش دوم: justify-content, align-items
• 37. ویژگی‌های Flex Container بخش سوم: align-content
• 38. ویژگی‌های Flex Items: order, flex-grow, flex-shrink, flex-basis
• 39. ساخت نوار ناوبری (Navbar) داشبورد با Flexbox
• 40. طراحی کارت‌های اطلاعاتی (Cards) برای نمایش وضعیت هر خودرو با Flexbox
• 41. مقدمه‌ای بر CSS Grid برای لی‌آوت‌های پیچیده داشبورد
• 42. تعریف ستون‌ها و ردیف‌ها در Grid: fr unit
• 43. ایجاد فاصله بین عناصر گرید با Gap
• 44. موقعیت‌دهی آیتم‌ها در Grid با شماره خطوط
• 45. نام‌گذاری نواحی در گرید با grid-template-areas
• 46. توابع پیشرفته در Grid: minmax() و repeat()
• 47. طراحی ساختار اصلی داشبورد مدیریت ناوگان با CSS Grid
• 48. استایل‌دهی به دکمه‌ها و فراخوان‌ها (Call-to-Action)
• 49. استایل‌دهی به فرم‌های ورود داده: فیلترها و جستجو
• 50. شخصی‌سازی Input ها، Textarea و Select Box
• 51. استایل‌دهی به Checkbox و Radio Button های سفارشی
• 52. ایجاد جداول داده خوانا برای گزارش‌های ناوگان
• 53. افزودن Zebra Stripes و Hover Effects به جداول
• 54. ایجاد هدر ثابت (Sticky Header) برای جداول طولانی
• 55. استایل‌دهی به آیکون‌ها (SVG و Font Icons) برای نمایش وضعیت‌ها
• 56. طراحی کارت‌های پروفایل رانندگان و مشخصات خودرو
• 57. ساخت Tooltip های اطلاعاتی برای نمودارها و نقشه‌ها
• 58. استایل‌دهی به نوارهای پیشرفت (Progress Bars) برای نمایش مصرف سوخت
• 59. طراحی مودال‌ها و پاپ‌آپ‌ها برای هشدارها و اعلان‌ها
• 60. مفهوم Transitions برای ایجاد انیمیشن‌های نرم
• 61. کنترل زمان‌بندی و تاخیر در Transitions
• 62. ترکیب Transition با Transform: Scale, Rotate, Translate
• 63. ایجاد انیمیشن‌های پیچیده‌تر با Keyframes
• 64. کنترل انیمیشن‌ها: direction, iteration-count, fill-mode
• 65. انیمیشن متحرک‌سازی آیکون خودرو روی نقشه (مفهومی)
• 66. مقدمه‌ای بر متغیرهای CSS (Custom Properties)
• 67. استفاده از متغیرها برای ساخت تم روشن و تاریک (Light/Dark Mode)
• 68. سازماندهی متغیرهای CSS برای برندینگ و ثبات طراحی
• 69. استفاده از تابع ()calc برای محاسبات دینامیک
• 70. استایل‌دهی به نمودارهای میله‌ای (Bar Charts) با CSS خالص
• 71. استایل‌دهی به نمودارهای دایره‌ای (Pie/Donut Charts) با Conic Gradients
• 72. اعمال فیلترهای بصری: blur, grayscale, brightness
• 73. ایجاد سایه برای جعبه‌ها و متون (Box Shadow & Text Shadow)
• 74. طراحی گرادینت‌های خطی و شعاعی برای پس‌زمینه‌ها
• 75. مقدمه‌ای بر طراحی واکنش‌گرا (Responsive Design)
• 76. کار با Viewport Meta Tag
• 77. استفاده از Media Queries برای تعریف Breakpoint ها
• 78. رویکرد Mobile-First در طراحی واکنش‌گرا
• 79. طراحی واکنش‌گرای جداول داده
• 80. واکنش‌گرا کردن تصاویر با max-width و تگ picture
• 81. تایپوگرافی واکنش‌گرا با واحدهای vw و تابع ()clamp
• 82. طراحی لی‌آوت‌های Flexbox و Grid واکنش‌گرا
• 83. مقدمه‌ای بر مفاهیم دسترسی‌پذیری (Accessibility) در وب
• 84. اهمیت کنتراست رنگ در داشبوردهای داده‌محور
• 85. بهبود تجربه کاربری با استایل‌های focus-visible:
• 86. سازماندهی فایل‌های CSS در پروژه‌های بزرگ
• 87. معرفی متدولوژی BEM برای نام‌گذاری کلاس‌ها
• 88. مقدمه‌ای بر پیش‌پردازنده‌های CSS مانند Sass
• 89. متغیرها و Nesting در Sass
• 90. استفاده از Mixin ها در Sass برای کدهای قابل استفاده مجدد
• 91. معرفی فریمورک‌های CSS (Bootstrap/Tailwind) و جایگاه آنها
• 92. بهینه‌سازی عملکرد CSS: کاهش حجم فایل و حذف کدهای بی‌استفاده
• 93. تکنیک‌های چاپ (Print Stylesheet) برای گزارش‌های مدیریتی
• 94. شروع پروژه نهایی: طراحی داشبورد تحقیقات بازار مدیریت ناوگان
• 95. بخش اول پروژه: ساختار HTML و لی‌آوت اصلی با Grid
• 96. بخش دوم پروژه: استایل‌دهی به هدر، سایدبار و منوی ناوبری
• 97. بخش سوم پروژه: طراحی و استایل‌دهی کارت‌های KPI (شاخص کلیدی عملکرد)
• 98. بخش چهارم پروژه: استایل‌دهی به جدول اصلی "وضعیت ناوگان"
• 99. بخش پنجم پروژه: پیاده‌سازی یک نمودار ساده با CSS
• 100. بخش ششم پروژه: افزودن افکت‌های Hover و انیمیشن‌های ظریف