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

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

عنوان دوره: CSS for Dashboards: طراحی داشبوردهای مدیریتی

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

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

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

• 1. مقدمه ای بر CSS و اهمیت آن در داشبوردها
• 2. نصب و راه اندازی ابزارهای توسعه دهنده مرورگر
• 3. کار با CSS: ادغام در HTML (Inline, Internal, External)
• 4. قوانین CSS: انتخابگرها (Selectors)
• 5. انتخابگرهای اصلی: تگ، کلاس، آیدی
• 6. انتخابگرهای ترکیبی: والد، فرزند، همسایه
• 7. انتخابگرهای صفتی (Attribute Selectors)
• 8. انتخابگرهای شبه کلاس (Pseudo-classes)
• 9. انتخابگرهای شبه عنصر (Pseudo-elements)
• 10. اولویت بندی قوانین CSS (Specificity)
• 11. کازکیدینگ CSS (The Cascade)
• 12. واحدها در CSS (Units): پیکسل، درصد، em، rem، vh، vw
• 13. رنگ ها در CSS: نام ها، مقادیر هگزادسیمال، RGB، RGBA، HSL، HSLA
• 14. مدیریت رنگ در داشبوردها
• 15. پس زمینه ها (Backgrounds): رنگ، تصویر، تکرار، موقعیت، اندازه
• 16. تنظیم پس زمینه برای المان های داشبورد
• 17. مدیریت فونت ها (Fonts): خانواده، اندازه، وزن، سبک
• 18. انتخاب و مدیریت فونت های مناسب برای داشبورد
• 19. تراز متن (Text Alignment) و فواصل خطوط
• 20. تبدیل متن (Text Transformation) و تزئینات (Decoration)
• 21. جعبه مدل CSS (The CSS Box Model)
• 22. عرض (Width) و ارتفاع (Height) المان ها
• 23. حاشیه (Margin) و فاصله گذاری داخلی (Padding)
• 24. کادر (Border): ضخامت، سبک، رنگ
• 25. مفهوم `box-sizing`: `content-box` و `border-box`
• 26. کار با `border-box` برای طراحی دقیق داشبورد
• 27. طراحی چیدمان (Layout) با CSS: مفاهیم پایه
• 28. انواع چیدمان: Block, Inline, Inline-block
• 29. کنترل نمایش المان ها: `display` (none, block, inline, inline-block, flex, grid)
• 30. استفاده از `display` برای کنترل عناصر داشبورد
• 31. شناخت Flexbox: مقدمه و مفاهیم پایه
• 32. تنظیمات والد Flexbox (Container Properties): `flex-direction`, `justify-content`, `align-items`
• 33. تنظیمات فرزند Flexbox (Item Properties): `flex-grow`, `flex-shrink`, `flex-basis`, `order`
• 34. چیدمان انعطاف پذیر برای اجزای داشبورد
• 35. تراز کردن المان ها با Flexbox
• 36. شناخت Grid Layout: مقدمه و مفاهیم پایه
• 37. تنظیمات والد Grid (Container Properties): `grid-template-columns`, `grid-template-rows`, `gap`
• 38. تنظیمات فرزند Grid (Item Properties): `grid-column`, `grid-row`
• 39. ساخت ساختارهای صفحه ای پیچیده با Grid
• 40. چیدمان اجزای اصلی داشبورد با Grid
• 41. نکات پیشرفته Flexbox و Grid برای داشبوردها
• 42. استفاده از واحد `fr` در Grid
• 43. نسبت دهی (Ratios) در Flexbox و Grid
• 44. طراحی ریسپانسیو (Responsive Design) چیست؟
• 45. Viewport Meta Tag
• 46. مدیریت ابعاد صفحه با واحدهای نسبی
• 47. استفاده از Media Queries
• 48. نوشتن Media Queries برای دستگاه های مختلف
• 49. چیدمان های ریسپانسیو با Flexbox و Grid
• 50. طراحی داشبورد ریسپانسیو
• 51. مدیریت تصاویر در داشبورد: اندازه، تراز، و پس زمینه
• 52. استفاده از `object-fit` برای تصاویر
• 53. شفافیت (Opacity) و انتقال (Transitions)
• 54. انیمیشن های ساده با CSS Transitions
• 55. کار با `transition-property`, `transition-duration`, `transition-timing-function`
• 56. کاربرد Transitions در رابط کاربری داشبورد
• 57. تبدیل ها (Transforms): `translate`, `rotate`, `scale`, `skew`
• 58. ترکیب Transforms برای افکت های بصری
• 59. انیمیشن های پیچیده با CSS Animations
• 60. ساخت Keyframes
• 61. دستورات `animation` (`animation-name`, `animation-duration`, `animation-iteration-count`, `animation-timing-function`)
• 62. ایجاد انیمیشن های جذاب برای داشبورد
• 63. مدیریت تداخل (Overlapping) المان ها: `z-index`
• 64. موقعیت دهی المان ها (Positioning): `static`, `relative`, `absolute`, `fixed`, `sticky`
• 65. کاربرد `position` در طراحی داشبورد
• 66. مدیریت هدر (Header) و فوتر (Footer) ریسپانسیو
• 67. ساخت سایدبار (Sidebar) و محتوای اصلی
• 68. طراحی کارت ها (Cards) و ویجت ها (Widgets)
• 69. چیدمان جدول ها (Tables) در داشبورد
• 70. طراحی فرم ها (Forms) و المان های ورودی
• 71. استایل دهی دکمه ها (Buttons) و لینک ها (Links)
• 72. مدیریت آیکون ها (Icons) در داشبورد (Font Awesome, Material Icons)
• 73. استفاده از CSS Variables (Custom Properties)
• 74. مزایای CSS Variables در مقیاس پذیری
• 75. مدیریت تم ها (Themes) با CSS Variables
• 76. بارگذاری بهینه CSS
• 77. بارگذاری Async و Defer
• 78. Minification و Compression CSS
• 79. استفاده از Preprocessors: SASS/SCSS (مقدماتی)
• 80. مفاهیم متغیرها (Variables) در SASS
• 81. حاشیه نویسی (Nesting) در SASS
• 82. Mixins در SASS
• 83. Extend/Inheritance در SASS
• 84. سازماندهی فایل های CSS بزرگ
• 85. نام گذاری کلاس ها (Naming Conventions): BEM, SMACSS (مقدماتی)
• 86. اصول طراحی مؤلفه ای (Component-based Design)
• 87. مدیریت وضعیت های مختلف المان ها (States): `:hover`, `:focus`, `:active`, `:disabled`
• 88. استایل دهی به اسکرول بارها (Scrollbars)
• 89. طراحی Tooltips و Popovers
• 90. استفاده از SVG در داشبوردها
• 91. استایل دهی به SVG با CSS
• 92. تکنیک های سایه (Shadows): `box-shadow`, `text-shadow`
• 93. کاربرد `box-shadow` برای ایجاد عمق
• 94. مدیریت Overflow (حالت سرریز محتوا)
• 95. استفاده از Pseudo-elements برای جلوه های بصری
• 96. ایجاد عناصر گرافیکی ساده با CSS
• 97. سازگاری مرورگرها (Browser Compatibility)
• 98. ابزارها برای بررسی سازگاری
• 99. اولویت بندی توسعه برای مرورگرهای هدف
• 100. نکات پیشرفته در رنگ بندی داشبورد