فلش‌کارت‌های آموزشی ساخت وب‌سایت پورتفولیو پویا با React و Framer Motion

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

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

عنوان دوره: دوره ساخت وب‌سایت پورتفولیو پویا با React و Framer Motion

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

موضوع میانی: طراحی واسط کاربری و تجربه کاربری با React

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

• 1. مقدمه بر توسعه وب و React
• 2. آشنایی با مفاهیم پایه React
• 3. ساختار پروژه‌های React
• 4. کامپوننت‌های تابعی و کلاس
• 5. مدیریت وضعیت (State) در React
• 6. مدیریت props و ارتباط بین کامپوننت‌ها
• 7. رویدادها و مدیریت آن‌ها در React
• 8. Conditional Rendering در React
• 9. List Rendering در React
• 10. Forms و مدیریت ورودی‌ها در React
• 11. Hooks در React: useState
• 12. Hooks در React: useEffect
• 13. Hooks در React: useContext
• 14. Hooks در React: useRef
• 15. Hooks در React: useMemo و useCallback
• 16. مقدمه بر Framer Motion
• 17. نصب و راه‌اندازی Framer Motion
• 18. مفاهیم پایه انیمیشن در Framer Motion
• 19. انواع انیمیشن‌ها: Transition
• 20. انواع انیمیشن‌ها: Animation Properties
• 21. انیمیشن‌های Motion Components
• 22. انیمیشن‌های Motion Div, Span, etc.
• 23. انیمیشن‌های Motion SVG
• 24. انیمیشن‌های Layout Animation
• 25. انیمیشن‌های Scroll-based
• 26. کنترل انیمیشن‌ها با useAnimation
• 27. استفاده از Gestures در Framer Motion
• 28. انیمیشن‌های Drag and Drop
• 29. انیمیشن‌های Hover Effects
• 30. انیمیشن‌های Click Effects
• 31. انیمیشن‌های Keyframes
• 32. مدیریت ترتیب انیمیشن‌ها (Sequencing)
• 33. انیمیشن‌های پیچیده با Variants
• 34. ساختار پروژه پورتفولیو
• 35. طراحی ساختار صفحه اصلی
• 36. کامپوننت Hero Section
• 37. کامپوننت About Me Section
• 38. کامپوننت Projects Section
• 39. کامپوننت Contact Section
• 40. کامپوننت Footer Section
• 41. استایل‌دهی کامپوننت‌ها با CSS Modules
• 42. استایل‌دهی کامپوننت‌ها با Styled Components
• 43. استایل‌دهی کامپوننت‌ها با Tailwind CSS (در صورت تطابق)
• 44. استفاده از React Router برای ناوبری
• 45. پیاده‌سازی مسیرهای مختلف برنامه
• 46. مدیریت state سراسری با Context API
• 47. بهبود تجربه کاربری (UX)
• 48. اصول طراحی واسط کاربری (UI)
• 49. اصول طراحی واکنش‌گرا (Responsive Design)
• 50. بهینه‌سازی تصاویر و منابع
• 51. بهینه‌سازی عملکرد برنامه
• 52. تست کردن کامپوننت‌ها
• 53. مقدمه بر CI/CD (در صورت نیاز و تطابق)
• 54. نکات امنیتی در توسعه وب
• 55. ساخت بخش نمایش پروژه‌ها
• 56. جزئیات هر پروژه
• 57. پیوند به مخازن کد (مانند گیت‌هاب)
• 58. نمایش دموهای زنده پروژه‌ها
• 59. پیاده‌سازی فرم تماس امن
• 60. اعتبارسنجی ورودی‌های فرم
• 61. ارسال پیام‌ها به سرور (با رویکرد امن)
• 62. مدیریت خطاها در برنامه
• 63. اضافه کردن انیمیشن به Hero Section
• 64. اضافه کردن انیمیشن به About Me Section
• 65. اضافه کردن انیمیشن به Projects Section
• 66. اضافه کردن انیمیشن به هر کارت پروژه
• 67. اضافه کردن انیمیشن به عناصر ناوبری
• 68. اضافه کردن انیمیشن به فرم تماس
• 69. انیمیشن‌های هنگام اسکرول
• 70. انیمیشن‌های ورود و خروج کامپوننت‌ها
• 71. استفاده از Framer Motion برای ایجاد جلوه‌های بصری
• 72. انیمیشن‌های سفارشی برای عناصر خاص
• 73. مدیریت انیمیشن‌های پیچیده با State
• 74. سازگاری با مرورگرهای مختلف
• 75. بهبود دسترسی‌پذیری (Accessibility)
• 76. مستندسازی پروژه
• 77. نشر وب‌سایت (Deployment)
• 78. مقدمه بر ابزارهای توسعه
• 79. آشنایی با Git و GitHub
• 80. اصول برنامه‌نویسی تمیز (Clean Code)
• 81. نکات تکمیلی در Framer Motion
• 82. ساخت پورتفولیو حرفه‌ای
• 83. جمع‌بندی مباحث
• 84. آموزش‌های تکمیلی و منابع بیشتر