دوره استایلینگ پیشرفته با Sass و PostCSS در وب پک همراه با فلش‌کارت آموزشی — ارائه روی فلش مموری

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

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

عنوان دوره: دوره استایلینگ پیشرفته با Sass و PostCSS در وب پک

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

موضوع میانی: وب پک (Webpack)

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

• 1. مقدمه‌ای بر وب‌پک و نقش آن در پروژه‌های مدرن
• 2. نصب و پیکربندی اولیه وب‌پک
• 3. آشنایی با مفاهیم اصلی وب‌پک: Entry, Output, Loaders, Plugins
• 4. استفاده از Loaders برای پردازش فایل‌های CSS
• 5. پیکربندی Sass در وب‌پک
• 6. استفاده از PostCSS برای بهبود CSS
• 7. پلاگین Autoprefixer برای سازگاری مرورگرها
• 8. مدیریت تصاویر در وب‌پک
• 9. بارگذاری فونت‌ها با وب‌پک
• 10. استفاده از Babel برای ترانسپایل کردن JavaScript مدرن
• 11. پیکربندی React با وب‌پک
• 12. پیکربندی Vue.js با وب‌پک
• 13. مدیریت فایل‌های JSON و دیگر فرمت‌ها
• 14. توسعه با حالت Hot Module Replacement (HMR)
• 15. بهینه‌سازی کد JavaScript با UglifyJsPlugin
• 16. بهینه‌سازی CSS با CssNano
• 17. تولید فایل‌های مانیفست و Vendor Chunk
• 18. Code Splitting برای بارگذاری بهینه ماژول‌ها
• 19. Lazy Loading ماژول‌ها
• 20. مدیریت متغیرهای محیطی
• 21. پیکربندی سرور توسعه (Dev Server)
• 22. تنظیمات پیشرفته Dev Server
• 23. استفاده از Source Maps برای دیباگینگ
• 24. مدیریت Asset Modules
• 25. پیکربندی Webpack برای PWA
• 26. استفاده از Service Workers
• 27. مدیریت کش در وب‌پک
• 28. بهینه‌سازی عملکرد وب‌پک
• 29. مقدمه‌ای بر Sass: ساختار و سینتکس
• 30. متغیرها در Sass
• 31. تودرتویی (Nesting) در Sass
• 32. Mixins برای کد قابل استفاده مجدد
• 33. Extend/Inheritance در Sass
• 34. توابع (Functions) در Sass
• 35. Import و Partial در Sass
• 36. ساختارهای کنترلی در Sass (If, For, While)
• 37. نقش Sass در طراحی ریسپانسیو
• 38. اصول اولیه PostCSS
• 39. نصب و پیکربندی PostCSS
• 40. استفاده از PostCSS با Sass
• 41. پلاگین `postcss-import`
• 42. پلاگین `postcss-preset-env`
• 43. پلاگین `postcss-nested`
• 44. پلاگین `postcss-simple-vars`
• 45. پلاگین `postcss-mixins`
• 46. پلاگین `postcss-extend`
• 47. پلاگین `postcss-calc`
• 48. پلاگین `postcss-color-function`
• 49. پلاگین `postcss-mq`
• 50. پلاگین `postcss-assets`
• 51. پلاگین `postcss-flexbugs-fixes`
• 52. پلاگین `postcss-utilities`
• 53. مدیریت CSS Variables با PostCSS
• 54. بهینه‌سازی CSS با ابزارهای PostCSS
• 55. اصول طراحی سیستم‌های طراحی
• 56. اهمیت CSS Frameworks
• 57. مقایسه Sass و Less
• 58. مقایسه PostCSS و Sass
• 59. کاربرد Sass و PostCSS در پروژه‌های بزرگ
• 60. اصول معماری نرم‌افزار در فرانت‌اند
• 61. مدیریت وابستگی‌ها در پروژه‌های وب
• 62. بهینه‌سازی تصاویر برای وب
• 63. استفاده از SVG در پروژه‌های وب
• 64. اصول دسترسی‌پذیری (Accessibility) در وب
• 65. تست در فرانت‌اند
• 66. مقدمه‌ای بر CI/CD برای پروژه‌های وب
• 67. استقرار (Deployment) پروژه‌های وب
• 68. مدیریت خطا در برنامه‌های وب
• 69. اصول امنیت در فرانت‌اند
• 70. مقدمه‌ای بر WebAssembly
• 71. استفاده از Web Components
• 72. مدیریت State در برنامه‌های پیچیده
• 73. اصول UI/UX در طراحی وب
• 74. روانشناسی رنگ در طراحی وب
• 75. تایپوگرافی در طراحی وب
• 76. اصول انیمیشن در وب
• 77. ساخت انیمیشن‌های CSS پیشرفته
• 78. استفاده از کتابخانه‌های انیمیشن
• 79. اصول طراحی ریسپانسیو پیشرفته
• 80. مدیریت Layout با CSS Grid
• 81. مدیریت Layout با Flexbox
• 82. اصول طراحی مینیمال در وب
• 83. اصول طراحی مینیمال در CSS
• 84. استفاده از ابزارهای طراحی (Figma, Sketch)
• 85. مقدمه‌ای بر Design Systems
• 86. پیاده‌سازی Design Systems با Sass
• 87. پیاده‌سازی Design Systems با PostCSS
• 88. مدیریت تم‌ها (Theming) در CSS
• 89. اصول معماری CSS (BEM, SMACSS, OOCSS)
• 90. کاربرد BEM در پروژه‌های Sass
• 91. کاربرد SMACSS در پروژه‌های Sass
• 92. کاربرد OOCSS در پروژه‌های Sass
• 93. استفاده از ابزارهای Linter برای CSS
• 94. نکات پیشرفته در پیکربندی وب‌پک
• 95. استراتژی‌های بهینه‌سازی پیشرفته
• 96. مدیریت منابع در پروژه‌های وب
• 97. آینده وب‌پک و ابزارهای مشابه