کتاب صوتی ساخت کامپوننت‌های کاربردی با Tailwind CSS

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

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

عنوان دوره: دوره ساخت کامپوننت‌های کاربردی با Tailwind CSS

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

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

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

• 1. مقدمه‌ای بر طراحی رابط کاربری وب
• 2. اصول طراحی ریسپانسیو
• 3. معرفی Tailwind CSS
• 4. نصب و راه‌اندازی Tailwind CSS
• 5. پیکربندی Tailwind CSS
• 6. مبانی کلاس‌های Utility در Tailwind
• 7. کاربرد کلاس‌های Flexbox در Tailwind
• 8. استفاده از Grid System در Tailwind
• 9. طراحی فرم‌ها با Tailwind CSS
• 10. تنظیمات رنگ و تایپوگرافی با Tailwind
• 11. ایجاد دکمه‌های سفارشی با Tailwind
• 12. طراحی کارت‌ها و محفظه‌ها با Tailwind
• 13. کامپوننت‌های ناوبری (Navbar) با Tailwind
• 14. فوترها (Footers) با Tailwind CSS
• 15. مدال‌ها (Modals) و پاپ‌اورها (Popovers)
• 16. تب‌ها (Tabs) و آکاردئون‌ها (Accordions)
• 17. اسلایدرها (Sliders) و کاروسل‌ها (Carousels)
• 18. چیدمان صفحات (Page Layouts) با Tailwind
• 19. هدرها (Headers) و بنرها (Banners)
• 20. استفاده از آیکون‌ها در Tailwind
• 21. طراحی جداول (Tables) با Tailwind
• 22. عناصر فرم پیشرفته با Tailwind
• 23. کامپوننت‌های پیش‌بارگذاری (Loaders)
• 24. اعلان‌ها (Notifications) و پیام‌ها
• 25. کاربرد Grid در کامپوننت‌های پیچیده
• 26. استفاده خلاقانه از Flexbox
• 27. انیمیشن‌ها و ترنزیشن‌ها با Tailwind
• 28. طراحی ریسپانسیو برای دستگاه‌های مختلف
• 29. بهینه‌سازی عملکرد با Tailwind
• 30. تست و دیباگ کردن کامپوننت‌ها
• 31. کاربرد Tailwind در پروژه‌های واقعی
• 32. مقدمه‌ای بر ابزارهای مدیریت وضعیت
• 33. مفاهیم state management در React
• 34. استفاده از Context API در React
• 35. مدیریت state با Redux
• 36. مقدمه‌ای بر Redux Toolkit
• 37. ساخت Reducers و Actions
• 38. اتصال کامپوننت‌ها به Redux
• 39. استفاده از Hooks در Redux
• 40. مدیریت state با Zustand
• 41. مقدمه‌ای بر Zustand
• 42. ساخت Store در Zustand
• 43. استفاده از Hooks در Zustand
• 44. مدیریت state با Jotai
• 45. مقدمه‌ای بر Jotai
• 46. ساخت Atom در Jotai
• 47. استفاده از Hooks در Jotai
• 48. مقایسه ابزارهای مدیریت وضعیت
• 49. انتخاب ابزار مناسب برای پروژه
• 50. اصول طراحی سیستم‌های کامپوننتی
• 51. معماری کامپوننت‌ها
• 52. استانداردهای نام‌گذاری کامپوننت‌ها
• 53. مستندسازی کامپوننت‌ها
• 54. استفاده از Storybook
• 55. پیکربندی Storybook
• 56. ساخت Story برای کامپوننت‌ها
• 57. کاربرد Addons در Storybook
• 58. تست کامپوننت‌ها با Jest
• 59. تست رندرینگ کامپوننت‌ها
• 60. تست تعاملات کاربر
• 61. تست پوشش کد
• 62. اصول دسترسی‌پذیری (Accessibility)
• 63. پیاده‌سازی ARIA Attributes
• 64. طراحی برای کاربران با نیازهای ویژه
• 65. استانداردهای WCAG
• 66. مقدمه‌ای بر TypeScript
• 67. انواع داده‌ها در TypeScript
• 68. اینترفیس‌ها (Interfaces) در TypeScript
• 69. کلاس‌ها (Classes) در TypeScript
• 70. Generic Types در TypeScript
• 71. کاربرد TypeScript در پروژه‌های React
• 72. نوشتن type definitions برای کامپوننت‌ها
• 73. مقدمه‌ای بر GraphQL
• 74. اصول GraphQL
• 75. Query ها و Mutation ها
• 76. Schema Definition Language
• 77. کاربرد GraphQL در فرانت‌اند
• 78. اتصال React به GraphQL با Apollo Client
• 79. ساخت Query ها در Apollo Client
• 80. ساخت Mutation ها در Apollo Client
• 81. مدیریت Cache در Apollo Client
• 82. مقدمه‌ای بر CI/CD
• 83. مفاهیم Continuous Integration
• 84. مفاهیم Continuous Deployment
• 85. ابزارهای CI/CD (GitHub Actions)
• 86. پیکربندی GitHub Actions برای پروژه React
• 87. ساخت Pipeline برای Build و Deploy
• 88. استقرار خودکار بر روی سرور
• 89. ملاحظات امنیتی در فرانت‌اند
• 90. پیشگیری از حملات XSS
• 91. پیشگیری از حملات CSRF
• 92. مدیریت امن کلیدهای API
• 93. اصول طراحی UI/UX
• 94. تحقیقات کاربر
• 95. طراحی پروتوتایپ
• 96. تست کاربردپذیری
• 97. بهینه‌سازی تجربه کاربری
• 98. معرفی ابزارهای طراحی (Figma)
• 99. کار با Figma برای طراحی کامپوننت
• 100. اشتراک‌گذاری طرح‌ها با تیم