فلش‌کارت‌های آموزشی CSS for Fleet Management Platforms

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

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

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

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

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

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

• 1. مقدمه ای بر CSS و نقش آن در طراحی وب
• 2. CSS چیست و چرا مهم است؟
• 3. سینتکس (Syntax) CSS: انتخابگرها، خواص و مقادیر
• 4. روش های اعمال CSS: داخلی، خارجی و inline
• 5. انتخابگرهای CSS: تگ ها، کلاس ها و IDها
• 6. انتخابگرهای ترکیبی: فرزند، نسل، مجاور و عمومی
• 7. آشنایی با box model در CSS
• 8. ابعاد (width, height) و padding
• 9. حاشیه (border) و margin
• 10. مفهوم overflow و نحوه مدیریت آن
• 11. موقعیت دهی (positioning) در CSS: static, relative, absolute, fixed, sticky
• 12. ایجاد طرح بندی های ساده با استفاده از position
• 13. درک Z-index و نحوه کنترل لایه بندی عناصر
• 14. خواص متن: فونت، اندازه، رنگ و استایل
• 15. فرمت بندی متن: تراز، فاصله بین خطوط و کلمات
• 16. کار با لیست ها: استایل دهی به لیست های مرتب و نامرتب
• 17. ایجاد لینک ها: استایل دهی به لینک ها و حالت های مختلف آن ها
• 18. استایل دهی به جداول: حاشیه، رنگ، padding و تراز
• 19. آشنایی با مفهوم ارث بری (inheritance) در CSS
• 20. مفهوم specificity و اولویت دهی قوانین CSS
• 21. کار با رنگ ها: نام رنگ ها، RGB، Hex و HSL
• 22. استفاده از گرادیان ها (gradients) در پس زمینه
• 23. استفاده از تصاویر پس زمینه (background images)
• 24. تکرار و موقعیت دهی تصاویر پس زمینه
• 25. ایجاد سایه (shadow) برای متن و عناصر
• 26. Transform: تغییر اندازه، چرخش، و جابجایی عناصر
• 27. Transition: ایجاد انیمیشن های ساده
• 28. Animation: ایجاد انیمیشن های پیشرفته با keyframes
• 29. آشنایی با واحد های اندازه گیری در CSS: px, em, rem, %, vw, vh
• 30. تفاوت بین واحدهای مطلق و نسبی
• 31. مقدمه ای بر طراحی واکنش گرا (responsive design)
• 32. viewport چیست و چگونه تنظیم می شود؟
• 33. آشنایی با media queries
• 34. ایجاد طرح بندی های منعطف با استفاده از media queries
• 35. طراحی برای دستگاه های مختلف: موبایل، تبلت و دسکتاپ
• 36. آشنایی با فریم ورک های CSS: Bootstrap و Tailwind CSS
• 37. نصب و راه اندازی Bootstrap
• 38. استفاده از گرید سیستم Bootstrap برای ایجاد طرح بندی
• 39. کامپوننت های Bootstrap: دکمه ها، فرم ها، نوبار و غیره
• 40. سفارشی سازی Bootstrap با استفاده از Sass
• 41. نصب و راه اندازی Tailwind CSS
• 42. استفاده از کلاس های utility در Tailwind CSS
• 43. سفارشی سازی Tailwind CSS با استفاده از فایل پیکربندی
• 44. مفاهیم پایه Flexbox
• 45. container و items در Flexbox
• 46. جهت (direction) و تراز (justify-content, align-items) در Flexbox
• 47. نحوه ایجاد طرح بندی های پیچیده با استفاده از Flexbox
• 48. مفاهیم پایه CSS Grid
• 49. container و items در Grid
• 50. ردیف ها (rows) و ستون ها (columns) در Grid
• 51. نحوه ایجاد طرح بندی های پیچیده با استفاده از Grid
• 52. تفاوت ها و شباهت های Flexbox و Grid
• 53. انتخاب بین Flexbox و Grid برای طرح بندی های مختلف
• 54. آشنایی با preprocessors CSS: Sass و Less
• 55. نصب و راه اندازی Sass
• 56. متغیرها (variables) در Sass
• 57. mixin ها (mixins) در Sass
• 58. توابع (functions) در Sass
• 59. imports و partials در Sass
• 60. nesting در Sass
• 61. آشنایی با مفاهیم معماری CSS: BEM, OOCSS, SMACSS
• 62. ایجاد یک سیستم نامگذاری کلاس ها با استفاده از BEM
• 63. استفاده از OOCSS برای ایجاد کامپوننت های قابل استفاده مجدد
• 64. ساختاردهی فایل های CSS با استفاده از SMACSS
• 65. بهینه سازی CSS: فشرده سازی و ترکیب فایل ها
• 66. ابزارهای بهینه سازی CSS: Minify CSS, PurgeCSS
• 67. آشنایی با performance CSS و نحوه بهبود آن
• 68. استفاده از Chrome DevTools برای دیباگ CSS
• 69. آشنایی با CSS-in-JS: Styled Components و Emotion
• 70. نحوه استفاده از Styled Components در React
• 71. نحوه استفاده از Emotion در React
• 72. کار با فونت های سفارشی (custom fonts)
• 73. ایجاد transition های پیچیده
• 74. ایجاد انیمیشن های پیشرفته با JavaScript و CSS
• 75. استفاده از SVG در CSS
• 76. ایجاد responsive images
• 77. آشنایی با مفاهیم accessibility (دسترسی پذیری) در CSS
• 78. استفاده از ARIA attributes برای بهبود دسترسی پذیری
• 79. نحوه تست CSS برای دسترسی پذیری
• 80. آشنایی با CSS Modules
• 81. استفاده از CSS Modules در React
• 82. آشنایی با Shadow DOM
• 83. ایجاد کامپوننت های وب (Web Components) با استفاده از Shadow DOM
• 84. استفاده از CSS Variables (Custom Properties)
• 85. ایجاد تم های مختلف برای وب سایت با استفاده از CSS Variables
• 86. آشنایی با مفاهیم critical CSS
• 87. نحوه پیاده سازی critical CSS برای بهبود سرعت بارگذاری صفحه
• 88. استفاده از PostCSS
• 89. آشنایی با normalize.css و reset.css
• 90. استفاده از clip-path برای ایجاد شکل های خاص
• 91. آشنایی با shape-outside
• 92. استفاده از blend modes
• 93. ایجاد افکت های تصویری با استفاده از filters
• 94. آشنایی با Containment
• 95. استفاده از will-change برای بهبود performance
• 96. پیاده سازی Dark Mode
• 97. Localization و Right-to-Left (RTL) Support
• 98. آشنایی با CSS Houdini
• 99. ایجاد انیمیشن های مبتنی بر اسکرول
• 100. ساخت فرم های سفارشی با CSS