دوره HTML و Drag and Drop API: ایجاد قابلیت کشیدن و رها کردن عناصر همراه با فلش‌کارت آموزشی — ارائه روی فلش مموری

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

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

عنوان دوره: دوره HTML و Drag and Drop API: ایجاد قابلیت کشیدن و رها کردن عناصر

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

موضوع میانی: HTML

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

• 1. مقدمه‌ای بر HTML و مفاهیم پایه
• 2. ساختار سند HTML
• 3. تگ‌ها و عناصر اصلی HTML
• 4. ویژگی‌های (Attributes) تگ‌های HTML
• 5. کار با متن و پاراگراف‌ها در HTML
• 6. عناصر تیتر و اهمیت آن‌ها
• 7. کار با لیست‌ها (مرتب و نامرتب)
• 8. پیوندها (Links) و نحوه ایجاد آن‌ها
• 9. تصاویر و نحوه درج آن‌ها در HTML
• 10. جداول (Tables) و ساختاردهی داده‌ها
• 11. فرم‌ها (Forms) و عناصر ورودی
• 12. انواع مختلف ورودی‌های فرم
• 13. دکمه‌ها و نحوه کار با آن‌ها
• 14. عناصر کنترلی پیشرفته فرم
• 15. عناصر معنایی (Semantic Elements) در HTML5
• 16. تگ‌های header, nav, main, footer
• 17. تگ‌های article, section, aside
• 18. کار با iframe برای جاسازی محتوا
• 19. عناصر چندرسانه‌ای: audio و video
• 20. مقدمه‌ای بر CSS و کاربرد آن
• 21. انتخابگرها (Selectors) در CSS
• 22. قواعد (Rules) و خصوصیات (Properties) CSS
• 23. رنگ‌ها و پس‌زمینه‌ها در CSS
• 24. کار با فونت‌ها و متن در CSS
• 25. باکس مدل (Box Model) در CSS
• 26. حاشیه‌ها (Margins) و فاصله‌ها (Padding)
• 27. قاب‌ها (Borders) و استایل‌دهی آن‌ها
• 28. نمایش (Display) و موقعیت‌دهی (Position) عناصر
• 29. فلکس‌باکس (Flexbox) برای چیدمان
• 30. گریدهای CSS (CSS Grid) برای چیدمان
• 31. پاسخ‌گرایی (Responsive Design) در CSS
• 32. مدیا کوئری‌ها (Media Queries)
• 33. کار با واحدها در CSS (px, em, rem, %)
• 34. انتقال‌ها (Transitions) در CSS
• 35. تبدیل‌ها (Transforms) در CSS
• 36. انیمیشن‌ها (Animations) در CSS
• 37. کار با فرم‌ها در CSS
• 38. استایل‌دهی به جداول در CSS
• 39. استایل‌دهی به لیست‌ها در CSS
• 40. استایل‌دهی به لینک‌ها و دکمه‌ها
• 41. مقدمه‌ای بر JavaScript و نقش آن
• 42. متغیرها (Variables) و انواع داده در JS
• 43. عملگرها (Operators) در JavaScript
• 44. دستورات شرطی (Conditional Statements)
• 45. حلقه‌ها (Loops) در JavaScript
• 46. توابع (Functions) در JavaScript
• 47. کار با آرایه‌ها (Arrays) در JS
• 48. کار با اشیاء (Objects) در JS
• 49. مقدمه‌ای بر DOM (Document Object Model)
• 50. انتخاب عناصر DOM
• 51. تغییر محتوای عناصر DOM
• 52. تغییر استایل عناصر DOM
• 53. کار با ویژگی‌های عناصر DOM
• 54. ایجاد و حذف عناصر DOM
• 55. مدیریت رویدادها (Event Handling)
• 56. انواع رویدادها در JS
• 57. مقدمه‌ای بر Drag and Drop API
• 58. مفهوم Drag و Drop
• 59. رویدادهای مرتبط با Drag
• 60. رویدادهای مرتبط با Drop
• 61. تنظیم داده‌های در حال کشیدن
• 62. مکانیسم رها کردن عناصر
• 63. ایجاد یک عنصر قابل کشیدن
• 64. تعیین ناحیه رها کردن
• 65. مدیریت رویدادهای دراپ
• 66. مثال عملی: کشیدن و رها کردن آیتم‌های لیست
• 67. پیاده‌سازی Drag and Drop برای تصاویر
• 68. ساخت گالری تصاویر با Drag and Drop
• 69. کاربرد Drag and Drop در فرم‌ها
• 70. پیاده‌سازی مرتب‌سازی لیست با Drag and Drop
• 71. مدیریت خطاها در Drag and Drop
• 72. بهینه‌سازی عملکرد Drag and Drop
• 73. کتابخانه‌های کمکی برای Drag and Drop (فقط معرفی چارچوب رسمی)
• 74. ملاحظات امنیتی در Drag and Drop
• 75. تست و اشکال‌زدایی Drag and Drop
• 76. کاربرد Drag and Drop در رابط‌های کاربری پیشرفته
• 77. اصول طراحی تجربه کاربری (UX) در Drag and Drop
• 78. ملاحظات دسترسی‌پذیری (Accessibility) در Drag and Drop
• 79. مقدمه‌ای بر فریم‌ورک‌های فرانت‌اند (با تمرکز بر چارچوب رسمی)
• 80. کاربرد HTML، CSS، JS در پروژه‌های بزرگ
• 81. مبانی برنامه‌نویسی شیءگرا در JS
• 82. مفاهیم پیشرفته‌تر DOM
• 83. مدیریت حالت (State Management) در برنامه‌های وب
• 84. کار با API های وب (با رعایت پروتکل‌های رسمی)
• 85. مبانی معماری نرم‌افزار در فرانت‌اند
• 86. نمونه پروژه‌های کاربردی با Drag and Drop (مطابق با الزامات)
• 87. تمرین‌های عملی پیشرفته
• 88. مرور و جمع‌بندی مفاهیم کلیدی