فلش‌کارت‌های آموزشی طراحی پورتفولیوی متحرک با Next.js، Framer Motion و Tailwind CSS

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

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

عنوان دوره: دوره طراحی پورتفولیوی متحرک با Next.js، Framer Motion و Tailwind CSS

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

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

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

• 1. آشنایی با مفاهیم اولیه توسعه وب
• 2. مقدمه‌ای بر Next.js
• 3. نصب و راه‌اندازی محیط توسعه Next.js
• 4. ساختار پروژه در Next.js
• 5. صفحات و مسیریابی در Next.js
• 6. کامپوننت‌های React در Next.js
• 7. مدیریت وضعیت (State Management) در Next.js
• 8. کار با داده‌ها در Next.js (Server-Side Rendering, Static Site Generation)
• 9. مقدمه‌ای بر Tailwind CSS
• 10. نصب و پیکربندی Tailwind CSS در Next.js
• 11. اصول طراحی واکنش‌گرا با Tailwind CSS
• 12. استفاده از کلاس‌های Utility در Tailwind CSS
• 13. ایجاد Layoutهای سفارشی با Tailwind CSS
• 14. استفاده از کامپوننت‌های آماده Tailwind CSS
• 15. مقدمه‌ای بر Framer Motion
• 16. نصب و راه‌اندازی Framer Motion در Next.js
• 17. انیمیشن‌های پایه با Framer Motion
• 18. انتقال (Transition) بین وضعیت‌ها در Framer Motion
• 19. انیمیشن‌های حرکتی (Motion Props) در Framer Motion
• 20. استفاده از AnimatePresence برای انیمیشن ورود و خروج
• 21. انیمیشن‌های پیچیده و سفارشی با Framer Motion
• 22. همگام‌سازی انیمیشن‌ها با Framer Motion
• 23. انیمیشن‌های لیست و آیتم‌ها
• 24. طراحی هدر و ناوبری (Navigation)
• 25. ایجاد بخش معرفی (Hero Section)
• 26. طراحی بخش درباره من (About Section)
• 27. نمایش پروژه‌ها در پورتفولیو
• 28. جزئیات صفحات پروژه
• 29. طراحی بخش مهارت‌ها (Skills Section)
• 30. طراحی بخش تجربیات (Experience Section)
• 31. طراحی بخش تحصیلات (Education Section)
• 32. طراحی بخش تماس با من (Contact Section)
• 33. ایجاد فرم تماس ایمن و سازگار با قوانین
• 34. استفاده از آیکون‌ها و فونت‌ها
• 35. بهینه‌سازی تصاویر برای وب
• 36. مدیریت فونت‌ها در Next.js
• 37. بهینه‌سازی عملکرد وب‌سایت
• 38. اصول سئو (SEO) در Next.js
• 39. تنظیمات متا تگ‌ها و عنوان صفحه
• 40. استفاده از داده‌های ساختاریافته (Structured Data)
• 41. طراحی ریسپانسیو و سازگار با موبایل
• 42. تست و اشکال‌زدایی (Debugging)
• 43. استفاده از ابزارهای توسعه مرورگر
• 44. مدیریت خطاها در Next.js
• 45. مقدمه‌ای بر Git و کنترل نسخه
• 46. استفاده از GitHub برای مدیریت کد
• 47. استقرار (Deployment) وب‌سایت Next.js
• 48. استقرار با Vercel
• 49. استقرار با Netlify
• 50. استقرار با سرویس‌های هاستینگ داخلی
• 51. آشنایی با مفاهیم UX (تجربه کاربری)
• 52. اصول UI (رابط کاربری)
• 53. انتخاب رنگ و پالت رنگی سازگار
• 54. استفاده از تایپوگرافی مناسب
• 55. ایجاد فضای سفید (White Space) مؤثر
• 56. طراحی دکمه‌ها و عناصر تعاملی
• 57. استفاده از انیمیشن‌های ظریف برای بهبود UX
• 58. طراحی حالت‌های مختلف عناصر (Hover, Active, Focus)
• 59. دسترسی‌پذیری (Accessibility) در طراحی وب
• 60. استفاده از ARIA Attributes
• 61. تست دسترسی‌پذیری
• 62. مقدمه‌ای بر طراحی سیستم (Design System)
• 63. ایجاد کامپوننت‌های قابل استفاده مجدد
• 64. مستندسازی کامپوننت‌ها
• 65. اصول طراحی مینیمالیسم
• 66. اصول طراحی مدرن
• 67. استفاده از گرید سیستم (Grid System)
• 68. مدیریت فرم‌ها و ورودی‌ها
• 69. اعتبارسنجی ورودی‌ها در سمت کاربر
• 70. اعتبارسنجی ورودی‌ها در سمت سرور
• 71. امنیت در توسعه وب
• 72. جلوگیری از حملات XSS
• 73. جلوگیری از حملات CSRF
• 74. مدیریت کوکی‌ها و نشست‌ها (Sessions)
• 75. مقدمه‌ای بر تست واحد (Unit Testing)
• 76. نوشتن تست‌های واحد برای کامپوننت‌ها
• 77. مقدمه‌ای بر تست یکپارچگی (Integration Testing)
• 78. نوشتن تست‌های یکپارچگی
• 79. مقدمه‌ای بر طراحی تعاملی (Interactive Design)
• 80. استفاده از انیمیشن برای راهنمایی کاربر
• 81. ایجاد فیدبک بصری برای اقدامات کاربر
• 82. طراحی حالت‌های بارگذاری (Loading States)
• 83. طراحی حالت‌های خالی (Empty States)
• 84. اصول طراحی برای موبایل اول (Mobile-First)
• 85. بهینه‌سازی عملکرد برای دستگاه‌های موبایل
• 86. آشنایی با ابزارهای طراحی (Figma, Adobe XD)
• 87. انتقال طرح‌های گرافیکی به کد
• 88. مدیریت منابع (Assets) در پروژه
• 89. اصول طراحی پورتفولیو مؤثر
• 90. نمایش بهترین پروژه‌ها
• 91. نوشتن توضیحات جذاب برای پروژه‌ها
• 92. دعوت به اقدام (Call to Action)
• 93. بازخورد و بهبود مستمر
• 94. مفاهیم پیشرفته‌تر Framer Motion
• 95. استفاده از SVG در انیمیشن‌ها
• 96. انیمیشن‌های مبتنی بر اسکرول
• 97. استفاده از کتابخانه‌های کمکی Framer Motion
• 98. نکات پیشرفته در Tailwind CSS
• 99. پلاگین‌های Tailwind CSS
• 100. سفارشی‌سازی Tailwind CSS