فلش‌کارت‌های آموزشی طراحی و ساخت فریم‌ورک CSS سفارشی

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

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

عنوان دوره: دوره طراحی و ساخت فریم‌ورک CSS سفارشی

موضوع کلی: توسعه وب و طراحی رابط کاربری

موضوع میانی: استانداردهای طراحی و برنامه‌نویسی فرانت‌اند

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

• 1. مقدمه‌ای بر توسعه وب و فریم‌ورک‌های CSS
• 2. اصول طراحی رابط کاربری (UI) و تجربه کاربری (UX)
• 3. HTML5: مبانی و عناصر ساختاری
• 4. CSS3: مقدمه‌ای بر استایل‌دهی و انتخابگرها
• 5. مدل جعبه (Box Model) در CSS
• 6. مفاهیم لایه‌بندی و موقعیت‌دهی در CSS
• 7. استفاده از Flexbox برای طراحی‌های واکنش‌گرا
• 8. Grid Layout: طراحی‌های پیچیده با CSS
• 9. متغیرهای CSS (CSS Variables) و توابع سفارشی
• 10. پیش‌پردازنده‌های CSS: Sass و Less
• 11. نصب و پیکربندی Sass و Less
• 12. مفاهیم برنامه‌نویسی ماژولار در CSS
• 13. استفاده از Mixinها و Functionها در Sass
• 14. استفاده از Nesting در Sass و Less
• 15. سازگاری مرورگرها و Cross-Browser Compatibility
• 16. بهینه‌سازی CSS برای بهبود عملکرد وب‌سایت
• 17. فشرده‌سازی و Minify کردن CSS
• 18. ابزارهای توسعه‌دهنده مرورگر برای اشکال‌زدایی CSS
• 19. طراحی سیستم Grid سفارشی
• 20. طراحی سیستم تایپوگرافی سفارشی
• 21. ایجاد کامپوننت‌های CSS قابل استفاده مجدد
• 22. مفاهیم BEM (Block, Element, Modifier)
• 23. ساختاردهی پروژه CSS
• 24. استفاده از ابزارهای Build مانند Gulp و Webpack
• 25. اتوماتیک‌سازی وظایف CSS با Gulp
• 26. مدیریت دارایی‌ها (Asset Management) در CSS
• 27. بهینه‌سازی تصاویر برای وب
• 28. مقدمه‌ای بر Accessibility (دسترسی‌پذیری) در وب
• 29. نوشتن CSS برای افراد دارای معلولیت
• 30. تست و اعتبارسنجی CSS
• 31. ابزارهای تست خودکار CSS
• 32. معرفی فریم‌ورک‌های CSS موجود (Bootstrap, Tailwind CSS)
• 33. مقایسه فریم‌ورک‌های CSS و انتخاب مناسب
• 34. طراحی واکنش‌گرا (Responsive Design) و Media Queries
• 35. مفاهیم Mobile-First در طراحی وب
• 36. استفاده از Viewport Meta Tag
• 37. طراحی برای دستگاه‌های مختلف
• 38. آشنایی با اصول طراحی Material Design
• 39. پیاده‌سازی Material Design با CSS
• 40. آشنایی با اصول طراحی Flat Design
• 41. پیاده‌سازی Flat Design با CSS
• 42. ایجاد انیمیشن‌های CSS
• 43. انیمیشن‌های Transition و Keyframes
• 44. بهینه‌سازی انیمیشن‌های CSS برای عملکرد
• 45. استفاده از CSS Filters و Effects
• 46. آشنایی با Shadow DOM و Web Components
• 47. ایجاد کامپوننت‌های سفارشی با Web Components
• 48. مقدمه‌ای بر CSS-in-JS
• 49. استفاده از Styled Components
• 50. استفاده از Emotion
• 51. آشنایی با PostCSS و پلاگین‌های آن
• 52. بهینه‌سازی CSS با Autoprefixer
• 53. آشنایی با CSS Modules
• 54. مدیریت وابستگی‌های CSS
• 55. طراحی سیستم آیکون‌سازی سفارشی
• 56. استفاده از SVG در CSS
• 57. آشنایی با CSS Houdini
• 58. آینده CSS و نوآوری‌ها
• 59. تست و اشکال‌زدایی CSS در محیط‌های مختلف
• 60. بهبود عملکرد CSS در وب‌سایت‌های بزرگ
• 61. استفاده از CDN برای تحویل CSS
• 62. امنیت در CSS و جلوگیری از حملات XSS
• 63. بهبود سئو (SEO) با CSS
• 64. بهینه‌سازی CSS برای موتورهای جستجو
• 65. تنظیمات CSS برای پرینت
• 66. طراحی CSS برای حالت تاریک (Dark Mode)
• 67. بهبود خوانایی CSS با کامنت‌گذاری و فرمت‌بندی
• 68. مستندسازی CSS
• 69. آشنایی با ابزارهای مدیریت پروژه CSS
• 70. همکاری در پروژه‌های CSS تیمی
• 71. بهینه‌سازی CSS برای وب‌سایت‌های چندزبانه (RTL/LTR)
• 72. آشنایی با ابزارهای Linting CSS
• 73. استانداردهای کدنویسی CSS
• 74. بهبود قابلیت نگهداری CSS
• 75. نوشتن CSS قابل توسعه
• 76. استفاده از الگوهای طراحی CSS
• 77. آشنایی با معماری CSS
• 78. طراحی سیستم رنگ‌بندی سفارشی
• 79. آشنایی با تئوری رنگ
• 80. استفاده از ابزارهای انتخاب رنگ
• 81. بهینه‌سازی CSS برای وب‌سایت‌های تک‌صفحه‌ای (SPA)
• 82. آشنایی با Shadow Parts و CSS Selectors Level 4
• 83. بهینه‌سازی CSS برای وب‌سایت‌های تعاملی
• 84. آشنایی با Web Animations API
• 85. استفاده از CSS Variables برای تم‌بندی پویا
• 86. آشنایی با CSS Containment
• 87. بهینه‌سازی CSS برای Lazy Loading تصاویر
• 88. آشنایی با CSS Image Set
• 89. بهینه‌سازی CSS برای وب‌سایت‌های با ترافیک بالا
• 90. آشنایی با HTTP/2 و Push
• 91. بهبود زمان بارگذاری CSS
• 92. استفاده از Critical CSS
• 93. آشنایی با Server-Side Rendering (SSR) و CSS
• 94. بهینه‌سازی CSS برای وب‌اپلیکیشن‌های پیشرو (PWA)
• 95. آشنایی با Workbox و CSS Caching
• 96. بهبود تجربه کاربری با CSS Transitions و Animations
• 97. آشنایی با CSS Best Practices
• 98. بهینه‌سازی CSS برای وب‌سایت‌های E-commerce
• 99. آشنایی با CSS Custom Properties در React
• 100. بهینه‌سازی CSS برای وب‌سایت‌های خبری