اپلیکیشن اندرویدی فلش‌کارت آموزشی CSS for Sales Territory Management

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

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

عنوان دوره: دوره CSS for Sales Territory Management

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

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

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

• 1. مقدمه: CSS در سیستم‌های مدیریت مناطق فروش چیست؟
• 2. نقش CSS در مصورسازی داده‌های فروش و عملکرد تیم
• 3. اتصال CSS به HTML: روش‌های داخلی، خارجی و درون‌خطی
• 4. قواعد و سینتکس پایه CSS: انتخابگر، خصوصیت و مقدار
• 5. کامنت‌گذاری در CSS برای مستندسازی کد
• 6. انتخابگرهای اصلی: تگ، کلاس و شناسه (ID)
• 7. انتخابگرهای ترکیبی و فرزندان (Descendant & Child Combinators)
• 8. مفهوم وراثت (Inheritance) در CSS
• 9. اولویت، آبشاری بودن و کلمه کلیدی important!
• 10. مدل جعبه‌ای (Box Model): محتوا، Padding، Border، Margin
• 11. تنظیم ابعاد عناصر: عرض (width) و ارتفاع (height)
• 12. کار با رنگ‌ها: نام، هگز، RGB و HSL
• 13. استایل‌دهی به پس‌زمینه: رنگ، تصویر و موقعیت
• 14. تایپوگرافی پایه: خانواده فونت، اندازه، وزن و استایل
• 15. ترازبندی و دکوراسیون متن (Text Alignment & Decoration)
• 16. واحدهای اندازه‌گیری: px, em, rem, % و واحدهای Viewport
• 17. خصوصیت display: block, inline, inline-block
• 18. خصوصیت visibility و تفاوت آن با display: none
• 19. استفاده از ابزارهای توسعه‌دهنده مرورگر برای دیباگ CSS
• 20. پروژه کوچک: ساخت کارت اطلاعات یک نماینده فروش
• 21. مقدمه‌ای بر چیدمان (Layout) در CSS
• 22. چیدمان با Flexbox: مفاهیم اصلی و کانتینر
• 23. ویژگی‌های Flexbox برای آیتم‌ها (flex-grow, flex-shrink, flex-basis)
• 24. ساخت نوار ناوبری اصلی داشبورد با Flexbox
• 25. ترازبندی و توزیع آیتم‌ها در Flexbox
• 26. چیدمان گرید (Grid): مفاهیم اصلی و تعریف ستون‌ها و ردیف‌ها
• 27. ساختاردهی داشبورد اصلی با CSS Grid
• 28. جایگذاری و چینش آیتم‌ها در Grid
• 29. ترکیب Flexbox و Grid برای چیدمان‌های پیچیده
• 30. موقعیت‌یابی (Positioning): static, relative, absolute
• 31. موقعیت‌یابی: fixed و sticky برای هدرهای ثابت
• 32. کار با Z-index برای مدیریت لایه‌های روی هم (مانند مودال‌ها)
• 33. طراحی واکنش‌گرا (Responsive Design): مقدمه و اهمیت
• 34. استفاده از Viewport Meta Tag
• 35. Media Queries: استایل‌دهی برای صفحات دسکتاپ
• 36. Media Queries: استایل‌دهی برای صفحات تبلت
• 37. Media Queries: استایل‌دهی برای صفحات موبایل
• 38. استراتژی Mobile-First در طراحی واکنش‌گرا
• 39. تصاویر واکنش‌گرا با CSS
• 40. پروژه: واکنش‌گرا کردن داشبورد مدیریت فروش
• 41. استایل‌دهی به فرم‌ها: مقدمه و بهترین شیوه‌ها
• 42. استایل‌دهی به Inputها و Textareaها
• 43. استایل‌دهی به دکمه‌ها و حالت‌های مختلف آن (hover, active, focus)
• 44. استایل‌دهی به Checkboxها و Radio Buttonهای سفارشی
• 45. استایل‌دهی به منوهای کشویی (Select/Dropdown)
• 46. اعتبارسنجی فرم با CSS: شبه‌کلاس‌های valid و invalid
• 47. استایل‌دهی به جداول داده: هدر، بدنه و فوتر
• 48. ایجاد Zebra Stripes برای خوانایی بهتر جداول
• 49. استایل‌دهی شرطی به ردیف‌های جدول (مثلاً برای مناطق پرفروش)
• 50. ساخت جداول واکنش‌گرا برای نمایش در موبایل
• 51. استایل‌دهی به لیست‌ها برای نمایش فعالیت‌های اخیر
• 52. طراحی کارت‌های داشبورد برای نمایش شاخص‌های کلیدی عملکرد (KPI)
• 53. ساخت Progress Bar برای نمایش پیشرفت تارگت فروش
• 54. استایل‌دهی به آیکون‌ها (Font Awesome یا SVG)
• 55. مقدمه‌ای بر استایل‌دهی به نقشه‌های تعاملی (Interactive Maps)
• 56. استایل‌دهی به کانتینر نقشه و کنترل‌های آن (زوم، لایه‌ها)
• 57. طراحی پین‌ها و مارکرهای سفارشی روی نقشه برای مشتریان
• 58. استایل‌دهی به پنجره‌های اطلاعاتی (InfoWindows/Popups) روی نقشه
• 59. رنگ‌آمیزی مناطق فروش (Polygons) بر اساس داده‌ها (مانند حجم فروش)
• 60. افزودن افکت Hover به مناطق فروش روی نقشه
• 61. استایل‌دهی به نمودارها: کانتینر، محورها و لیبل‌ها
• 62. رنگ‌بندی ستون‌ها در نمودارهای میله‌ای (Bar Charts)
• 63. استایل‌دهی به Tooltipها در نمودارها و نقشه
• 64. طراحی مودال‌ها (Modals) برای نمایش جزئیات مشتری یا معامله
• 65. ساخت تب‌ها برای تفکیک اطلاعات در یک صفحه
• 66. طراحی آکاردئون برای نمایش لیست نمایندگان هر منطقه
• 67. استایل‌دهی به اعلان‌ها (Notifications) و هشدارهای سیستم
• 68. ساخت یک Breadcrumb برای نمایش مسیر ناوبری
• 69. طراحی کامپوننت انتخابگر تاریخ (Date Picker)
• 70. پروژه: ساخت صفحه جزئیات یک منطقه فروش
• 71. انتخابگرهای پیشرفته: Attribute Selectors
• 72. انتخابگرهای پیشرفته: شبه‌کلاس‌ها (:nth-child, :first-child, :last-child)
• 73. شبه‌عناصر (Pseudo-elements) ::before و ::after و کاربردهای خلاقانه
• 74. Transitionها برای ایجاد انیمیشن‌های نرم در تغییر حالت
• 75. زمان‌بندی و تأخیر در Transitionها (Timing Functions & Delay)
• 76. انیمیشن‌های پیچیده‌تر با @keyframes
• 77. کنترل اجرای انیمیشن‌ها (animation-iteration-count, direction)
• 78. تبدیل‌های دو بعدی (2D Transforms): جابجایی، چرخش و تغییر مقیاس
• 79. ترکیب Transform و Transition برای افکت‌های تعاملی
• 80. متغیرهای CSS (Custom Properties) برای تم‌سازی و مدیریت رنگ‌ها
• 81. ساخت تم روشن و تاریک (Light/Dark Mode) با متغیرهای CSS
• 82. استفاده از تابع calc() برای محاسبات دینامیک در استایل‌ها
• 83. فیلترهای CSS: grayscale, blur, brightness برای تصاویر و عناصر
• 84. حالت‌های ترکیبی (Blend Modes) برای افکت‌های بصری
• 85. استایل‌دهی بر اساس وضعیت رابط کاربری: :focus, :checked, :disabled
• 86. بهینه‌سازی انیمیشن‌ها برای عملکرد بهتر (GPU Acceleration)
• 87. استایل‌های چاپ (Print Stylesheets) برای تهیه گزارش‌های کاغذی
• 88. طراحی صفحه ورود (Login Page) و فراموشی رمز عبور
• 89. تکنیک‌های ایجاد سایه (box-shadow) و گرادینت‌های زیبا (gradients)
• 90. پروژه: افزودن تعامل‌پذیری و تم تاریک به داشبورد
• 91. سازماندهی فایل‌های CSS: معماری BEM
• 92. مقدمه‌ای بر پیش‌پردازنده‌های CSS مانند Sass/SCSS
• 93. استفاده از متغیرها و Mixinها در Sass برای کدهای قابل استفاده مجدد
• 94. استفاده از Nesting برای کدهای خواناتر در Sass
• 95. بهینه‌سازی CSS: کاهش حجم فایل (Minification)
• 96. حذف کدهای CSS استفاده نشده (Purging CSS)
• 97. استراتژی‌های بارگذاری CSS برای افزایش سرعت صفحه
• 98. اطمینان از سازگاری بین مرورگرها (Cross-browser Compatibility)
• 99. دسترسی‌پذیری (Accessibility): اهمیت کنتراست رنگ و استایل‌های focus
• 100. جمع‌بندی و پروژه نهایی: ساخت کامل داشبورد مدیریت مناطق فروش