دوره آموزش جامع HTML برای توسعه‌دهندگان فرانت‌اند همراه با فلش‌کارت آموزشی — ارائه روی فلش مموری

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

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

عنوان دوره: دوره آموزش جامع HTML برای توسعه‌دهندگان فرانت‌اند

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

موضوع میانی: طراحی و پیاده‌سازی واسط کاربری وب

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

• 1. مقدمه‌ای بر توسعه وب و HTML
• 2. تاریخچه و تکامل HTML
• 3. ساختار اصلی یک سند HTML
• 4. تگ‌های اساسی و عناصر صفحه
• 5. مدیریت متن و پاراگراف‌ها
• 6. عناوین و سرفصل‌ها در HTML
• 7. ایجاد لینک‌ها و ناوبری
• 8. تصاویر و رسانه‌ها در صفحات وب
• 9. جداول برای نمایش داده‌ها
• 10. فرم‌ها برای ورودی کاربر
• 11. عناصر کنترلی فرم‌ها
• 12. اعتبارسنجی فرم‌ها
• 13. عناصر معنایی (Semantic Elements)
• 14. تگ‌های بخش‌بندی و طرح‌بندی
• 15. استفاده از `<div>` و `<span>`
• 16. عناصر `header`, `nav`, `main`, `footer`
• 17. عناصر `article`, `section`, `aside`
• 18. تگ `figure` و `figcaption`
• 19. صدا و ویدئو در HTML5
• 20. عنصر `audio`
• 21. عنصر `video`
• 22. کنترل‌های رسانه‌ای سفارشی
• 23. کدها و مثال‌های برنامه‌نویسی
• 24. نمايش کدها در HTML
• 25. عناصر `pre` و `code`
• 26. کار با کاراکترهای خاص
• 27. استانداردسازی و اعتبار سنجی HTML
• 28. ابزارهای اعتبارسنجی HTML
• 29. نکات مهم در نوشتن HTML تمیز
• 30. قالب‌بندی و استایل‌دهی با CSS
• 31. مقدمه‌ای بر CSS
• 32. نحوه اتصال CSS به HTML
• 33. انتخابگرهای CSS
• 34. قواعد CSS و ویژگی‌ها
• 35. رنگ‌ها و پس‌زمینه‌ها
• 36. قلم‌ها و متن
• 37. کادربندی و حاشیه
• 38. فاصله‌گذاری داخلی و خارجی
• 39. نمایش و موقعیت‌دهی عناصر
• 40. مدیریت طرح‌بندی با Flexbox
• 41. مقدمه‌ای بر Flexbox
• 42. ویژگی‌های Flexbox برای والد
• 43. ویژگی‌های Flexbox برای فرزند
• 44. مثال‌های کاربردی Flexbox
• 45. مدیریت طرح‌بندی با Grid
• 46. مقدمه‌ای بر Grid Layout
• 47. ویژگی‌های Grid برای والد
• 48. ویژگی‌های Grid برای فرزند
• 49. مثال‌های کاربردی Grid
• 50. طراحی واکنش‌گرا (Responsive Design)
• 51. مفهوم طراحی واکنش‌گرا
• 52. استفاده از Media Queries
• 53. Viewport و تنظیمات آن
• 54. طراحی برای دستگاه‌های مختلف
• 55. فرم‌ها در طراحی واکنش‌گرا
• 56. بهینه‌سازی تصاویر برای وب
• 57. فرمت‌های رایج تصاویر
• 58. فشرده‌سازی تصاویر
• 59. استفاده از `srcset` و `sizes`
• 60. کار با آیکون‌ها
• 61. کار با فرم‌ها در HTML
• 62. عناصر ورودی پیشرفته
• 63. ویژگی‌های داده سفارشی (Data Attributes)
• 64. ساخت کامپوننت‌های رابط کاربری
• 65. مقدمه‌ای بر کامپوننت‌ها
• 66. استفاده از الگوها (Templates)
• 67. ساخت کامپوننت‌های قابل استفاده مجدد
• 68. مدیریت وضعیت (State Management)
• 69. مقدمه‌ای بر مدیریت وضعیت
• 70. مفاهیم اولیه state
• 71. کار با رویدادها در HTML
• 72. مدیریت رویدادهای کاربر
• 73. رویدادهای صفحه و بارگذاری
• 74. دسترسی‌پذیری (Accessibility) در وب
• 75. مقدمه‌ای بر دسترسی‌پذیری
• 76. استانداردهای WCAG
• 77. استفاده از ویژگی‌های ARIA
• 78. تست دسترسی‌پذیری
• 79. بهینه‌سازی برای موتورهای جستجو (SEO)
• 80. مقدمه‌ای بر SEO
• 81. عناصر HTML برای SEO
• 82. تگ‌های متا و عنوان
• 83. کاربرد تگ‌های معنایی در SEO
• 84. ساخت فرم‌های پیچیده
• 85. فرم‌های چند مرحله‌ای
• 86. استفاده از JavaScript در HTML
• 87. مقدمه‌ای بر JavaScript
• 88. اتصال JavaScript به HTML
• 89. دستکاری DOM با JavaScript
• 90. مدیریت فرم‌ها با JavaScript
• 91. واکنش‌گرایی فرم‌ها با JavaScript
• 92. مفاهیم پیشرفته HTML
• 93. وب کامپوننت‌ها (Web Components)
• 94. سرویس ورکرها (Service Workers)
• 95. ذخیره‌سازی در مرورگر (Browser Storage)
• 96. مفاهیم APIهای وب
• 97. کار با APIهای مفید
• 98. استفاده از SVG در HTML
• 99. مقدمه‌ای بر SVG
• 100. ترسیم اشکال در SVG