فلش‌کارت‌های آموزشی ساخت فرم ورود و ثبت‌نام واکنش‌گرا با HTML، CSS و JavaScript

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

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

عنوان دوره: دوره ساخت فرم ورود و ثبت‌نام واکنش‌گرا با HTML، CSS و JavaScript

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

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

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

• 1. مقدمه‌ای بر طراحی و توسعه وب
• 2. آشنایی با مفاهیم پایه وب
• 3. ساختار HTML برای فرم‌ها
• 4. عناصر اصلی فرم ورود
• 5. عناصر اصلی فرم ثبت‌نام
• 6. اصول طراحی واکنش‌گرا (Responsive Design)
• 7. مقدمه‌ای بر CSS
• 8. انتخابگرها و خصوصیات CSS
• 9. استایل‌دهی به فرم ورود
• 10. استایل‌دهی به فرم ثبت‌نام
• 11. استفاده از Flexbox برای چیدمان
• 12. استفاده از Grid برای چیدمان
• 13. تنظیمات اولیه صفحه
• 14. استایل‌دهی به دکمه‌ها
• 15. استایل‌دهی به فیلدها
• 16. استایل‌دهی به برچسب‌ها
• 17. تنظیمات فونت و رنگ
• 18. ایجاد پس‌زمینه مناسب
• 19. استایل‌دهی به بخش هدر
• 20. استایل‌دهی به بخش فوتر
• 21. مدیریت فضاهای خالی (Padding & Margin)
• 22. تکنیک‌های Grid در CSS
• 23. ایجاد طرح‌بندی دو ستونی
• 24. تنظیمات برای نمایشگرهای کوچک (Mobile First)
• 25. تنظیمات برای نمایشگرهای متوسط
• 26. تنظیمات برای نمایشگرهای بزرگ
• 27. استفاده از Media Queries
• 28. مثال عملی Media Query
• 29. آشنایی با JavaScript
• 30. متغیرها و انواع داده در JavaScript
• 31. دستورات شرطی (if, else)
• 32. حلقه‌های تکرار (for, while)
• 33. کار با DOM (Document Object Model)
• 34. انتخاب عناصر HTML با JavaScript
• 35. تغییر خصوصیات عناصر HTML
• 36. مدیریت رویدادها (Events)
• 37. رویداد کلیک (Click Event)
• 38. رویداد ورود موس (Mouseover Event)
• 39. اعتبارسنجی فرم ورود (Validation)
• 40. اعتبارسنجی فیلد نام کاربری
• 41. اعتبارسنجی فیلد رمز عبور
• 42. نمایش پیام‌های خطا
• 43. مدیریت نمایش/عدم نمایش پیام خطا
• 44. اعتبارسنجی فرم ثبت‌نام
• 45. اعتبارسنجی فیلد ایمیل
• 46. اعتبارسنجی فیلد تکرار رمز عبور
• 47. تطابق رمز عبور و تکرار آن
• 48. ایجاد انیمیشن‌های ساده با CSS
• 49. انتقال (Transition) در CSS
• 50. تبدیل (Transform) در CSS
• 51. استفاده از @keyframes برای انیمیشن
• 52. انیمیشن ورود فرم
• 53. انیمیشن خروج فرم
• 54. ایجاد حالت فعال (Active State) برای عناصر
• 55. مدیریت فوکوس (Focus State)
• 56. استفاده از Pseudo-classes
• 57. استفاده از Pseudo-elements
• 58. مدیریت فرم‌ها با JavaScript
• 59. ارسال داده‌های فرم (بدون ارسال واقعی)
• 60. جلوگیری از ارسال پیش‌فرض فرم
• 61. ذخیره‌سازی موقت داده‌ها (LocalStorage)
• 62. بازیابی داده‌های ذخیره شده
• 63. پاک کردن داده‌های ذخیره شده
• 64. آشنایی با فرمت JSON
• 65. تبدیل رشته به JSON
• 66. تبدیل JSON به رشته
• 67. استفاده از JSON در JavaScript
• 68. آشنایی با APIهای ساده وب
• 69. مفهوم درخواست (Request) و پاسخ (Response)
• 70. شبیه‌سازی دریافت داده از سرور
• 71. نمایش داده‌های شبیه‌سازی شده
• 72. مدیریت خطا در درخواست‌های شبیه‌سازی شده
• 73. مفهوم Asynchronous JavaScript
• 74. آشنایی با Callbacks
• 75. آشنایی با Promises
• 76. استفاده از async/await
• 77. مدیریت حالت بارگذاری (Loading State)
• 78. ایجاد دکمه‌های فراخوان (Call to Action)
• 79. طراحی دکمه‌های مختلف
• 80. استایل‌دهی به آیکون‌ها
• 81. استفاده از Font Awesome
• 82. تنظیمات فونت و اندازه آیکون‌ها
• 83. بررسی سازگاری مرورگرها (Browser Compatibility)
• 84. ابزارهای توسعه‌دهنده مرورگر (Developer Tools)
• 85. اشکال‌زدایی (Debugging) کدها
• 86. بهینه‌سازی کد CSS
• 87. بهینه‌سازی کد JavaScript
• 88. فشرده‌سازی فایل‌ها (Minification)
• 89. مدیریت نسخه (Versioning)
• 90. اصول اولیه امنیت فرم‌ها
• 91. جلوگیری از حملات XSS (مقدماتی)
• 92. جلوگیری از حملات CSRF (مقدماتی)
• 93. آشنایی با مفاهیم Accessibility (دسترسی‌پذیری)
• 94. استفاده از تگ‌های معنایی HTML
• 95. مدیریت Tab Index
• 96. تنظیمات ARIA برای عناصر
• 97. مراحل نهایی تست و بازبینی
• 98. جمع‌بندی و گام‌های بعدی
• 99. پروژه‌های تکمیلی
• 100. ساخت فرم تماس واکنش‌گرا