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

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

عنوان دوره: HTML و Custom Elements: گسترش قابلیت‌های HTML با عناصر سفارشی

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

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

📋 سرفصل‌های دوره (100 موضوع)

• 1. مقدمه‌ای بر وب و استانداردهای آن
• 2. تاریخچه و تکامل HTML
• 3. آشنایی با ساختار یک سند HTML
• 4. تگ‌های اصلی: html, head, body
• 5. مفهوم تگ‌ها، عناصر و ت‌ها
• 6. عنوان صفحه و متا تگ‌ها (Title & Meta Tags)
• 7. اتصال فایل‌های CSS و JavaScript
• 8. عناصر سرتیتر (Headings) از h1 تا h6
• 9. پاراگراف‌ها و قالب‌بندی متن
• 10. لیست‌های مرتب و نامرتب (Ordered & Unordered Lists)
• 11. لینک‌ها و انواع آن
• 12. کار با تصاویر و ت‌های ضروری
• 13. جداول: ساختار و کاربرد
• 14. مفهوم HTML معنایی (Semantic HTML)
• 15. عناصر ساختاری: header, footer, nav, main
• 16. عناصر محتوایی: section, article, aside
• 17. فرم‌ها و عناصر ورودی (Forms & Inputs)
• 18. انواع مختلف Input در فرم‌ها
• 19. برچسب‌ها، نواحی متنی و دکمه‌ها (Labels, Textareas, Buttons)
• 20. عناصر انتخاب (Select & Option)
• 21. اعتبارسنجی فرم‌ها در سمت کلاینت
• 22. عناصر چندرسانه‌ای: Audio و Video
• 23. جاسازی محتوا با Iframe
• 24. کامنت‌گذاری در HTML
• 25. موجودیت‌های کاراکتری (Character Entities)
• 26. ویژگی‌های سراسری (Global Attributes) مانند id و class
• 27. مفهوم عناصر Block و Inline
• 28. آشنایی با ویژگی‌های data-*
• 29. مقدمه‌ای بر دسترس‌پذیری وب (Accessibility)
• 30. اعتبارسنجی کد HTML با W3C Validator
• 31. چرا به جاوا اسکریپت در کنار HTML نیاز داریم؟
• 32. معرفی مدل شیءگرای سند (DOM)
• 33. انتخاب عناصر DOM با getElementById و getElementsByClassName
• 34. انتخاب عناصر با querySelector و querySelectorAll
• 35. دستکاری محتوای عناصر: innerHTML و textContent
• 36. تغییر ویژگی‌های (Attributes) عناصر
• 37. کار با کلاس‌های CSS از طریق classList
• 38. ایجاد، افزودن و حذف عناصر DOM
• 39. مقدمه‌ای بر رویدادها (Events) در جاوا اسکریپت
• 40. افزودن شنونده رویداد (Event Listener)
• 41. مقدمه‌ای بر کلاس‌ها در ES6 (Classes)
• 42. معرفی Web Components: یک نمای کلی
• 43. Custom Elements چیست؟ چرا به آنها نیاز داریم؟
• 44. تفاوت عناصر سفارشی خودگردان و سفارشی‌سازی شده
• 45. تعریف یک عنصر سفارشی با customElements.define()
• 46. چرخه حیات (Lifecycle) یک عنصر سفارشی
• 47. متد connectedCallback: اتصال به DOM
• 48. متد disconnectedCallback: جداسازی از DOM
• 49. متد adoptedCallback: جابجایی بین اسناد
• 50. متد attributeChangedCallback: واکنش به تغییر ویژگی‌ها
• 51. مشاهده ویژگی‌ها با static get observedAttributes()
• 52. مقدمه‌ای بر Shadow DOM: کپسوله‌سازی استایل و ساختار
• 53. ایجاد یک Shadow Root با attachShadow()
• 54. تفاوت Shadow DOM باز و بسته (Open vs. Closed)
• 55. کار با درخت Shadow DOM
• 56. استایل‌دهی ایزوله در Shadow DOM
• 57. شبه‌کلاس host: برای استایل‌دهی به خود عنصر
• 58. شبه‌کلاس host(): استایل‌دهی شرطی به عنصر میزبان
• 59. مقدمه‌ای بر اسلات‌ها (Slots)
• 60. استفاده از اسلات پیش‌فرض
• 61. استفاده از اسلات‌های نام‌گذاری شده (Named Slots)
• 62. استایل‌دهی به محتوای اسلات با slotted()
• 63. عنصر template: محتوای غیرفعال و قابل استفاده مجدد
• 64. کلون کردن محتوای template
• 65. ترکیب همه چیز: ساخت اولین کامپوننت کامل
• 66. ارث‌بری از عناصر داخلی HTML (Customized built-in elements)
• 67. ثبت یک عنصر سفارشی‌سازی شده داخلی
• 68. ارسال داده به کامپوننت‌ها از طریق Attributes
• 69. کار با داده‌های پیچیده (مانند JSON) در Attributes
• 70. تفاوت Properties و Attributes و نحوه همگام‌سازی آنها
• 71. ایجاد و ارسال رویدادهای سفارشی (Custom Events)
• 72. گوش دادن به رویدادهای سفارشی از خارج کامپوننت
• 73. ترکیب کامپوننت‌ها: عناصر سفارشی تودرتو
• 74. مدیریت وضعیت (State) داخلی در یک عنصر سفارشی
• 75. الگوهای ساده اتصال داده (Data Binding)
• 76. مبحث پیشرفته: دسترس‌پذیری در عناصر سفارشی
• 77. استفاده از نقش‌ها و ویژگی‌های ARIA
• 78. مدیریت فوکوس در Shadow DOM
• 79. ارتباط عناصر سفارشی با فرم‌ها (Form-associated custom elements)
• 80. استفاده از ElementInternals API
• 81. ساخت یک عنصر ورودی فرم سفارشی
• 82. بارگذاری تنبل (Lazy Loading) عناصر سفارشی
• 83. استراتژی‌های استایل‌دهی: استفاده از CSS Custom Properties برای تم‌بندی
• 84. عبور استایل از Light DOM به Shadow DOM
• 85. استایل‌دهی بخش‌های داخلی کامپوننت با CSS Parts (::part)
• 86. یکپارچه‌سازی با فریمورک‌ها: یک نمای کلی
• 87. استفاده از عناصر سفارشی در یک پروژه React
• 88. استفاده از عناصر سفارشی در یک پروژه Angular
• 89. استفاده از عناصر سفارشی در یک پروژه Vue.js
• 90. ساختار پروژه برای یک کتابخانه کامپوننت
• 91. معرفی ابزارهای ساخت (Build Tools) مانند Vite
• 92. بسته‌بندی (Bundling) کامپوننت‌ها برای توزیع
• 93. استفاده از Polyfill برای مرورگرهای قدیمی
• 94. نوشتن مستندات برای کامپوننت‌ها
• 95. استفاده از Storybook برای توسعه و نمایش کامپوننت‌ها
• 96. تست واحد (Unit Testing) عناصر سفارشی
• 97. بهترین شیوه‌ها در نام‌گذاری عناصر و ویژگی‌ها
• 98. انتشار کامپوننت‌ها در NPM
• 99. استراتژی‌های نسخه‌بندی و نگهداری
• 100. پروژه نهایی: ساخت یک کتابخانه کوچک از عناصر سفارشی

HTML و Custom Elements: جهشی به سوی توسعه وب نوین

معرفی دوره

آیا می‌خواهید از HTML فراتر رفته و قابلیت‌های آن را به سطحی جدید ارتقا دهید؟ آیا به دنبال راهی برای ساخت کامپوننت‌های وب قابل استفاده مجدد و سفارشی هستید؟ دوره HTML و Custom Elements به شما این امکان را می‌دهد تا با استفاده از قدرت عناصر سفارشی، وب‌سایت‌ها و اپلیکیشن‌های وب پیچیده و تعاملی بسازید.

در این دوره جامع، شما نه تنها با مبانی HTML به صورت عمیق آشنا می‌شوید، بلکه یاد می‌گیرید چگونه با استفاده از Custom Elements، اجزای وب منحصر به فرد و قابل استفاده مجدد ایجاد کنید. این مهارت به شما کمک می‌کند تا کدهای تمیزتر، سازمان‌یافته‌تر و با قابلیت نگهداری بالاتری بنویسید. خود را برای ورود به دنیای توسعه وب پیشرفته و ساخت رابط‌های کاربری فوق‌العاده آماده کنید!

با شرکت در این دوره، شما دیگر تنها یک کدنویس HTML نخواهید بود، بلکه یک معمار وب خواهید شد که قادر است با استفاده از خلاقیت و دانش خود، وب‌سایت‌ها و اپلیکیشن‌هایی با عملکرد بی‌نظیر خلق کند.

درباره دوره

این دوره یک برنامه آموزشی جامع و عملی است که شما را از سطح مبتدی تا پیشرفته در زمینه HTML و Custom Elements هدایت می‌کند. با شروع از اصول اساسی HTML، شما به تدریج با مفاهیم پیشرفته‌تر مانند Web Components و Custom Elements آشنا می‌شوید. هر مبحث با مثال‌های عملی و پروژه‌های واقعی همراه است تا شما بتوانید دانش خود را به طور کامل به کار ببرید.

موضوعات کلیدی

• مبانی و اصول HTML
• آشنایی با Web Components
• ایجاد و استفاده از Custom Elements
• خصوصیات و متدهای Custom Elements
• اتصال Custom Elements به DOM
• Styling Custom Elements با CSS
• Event Handling در Custom Elements
• بهینه‌سازی عملکرد Custom Elements
• استفاده از Shadow DOM برای کپسوله‌سازی
• ایجاد کتابخانه کامپوننت‌های سفارشی

مخاطبان دوره

این دوره برای افراد زیر مناسب است:

• توسعه‌دهندگان وب مبتدی که می‌خواهند HTML را به صورت حرفه‌ای یاد بگیرند.
• توسعه‌دهندگان فرانت‌اند که به دنبال گسترش مهارت‌های خود و یادگیری Custom Elements هستند.
• طراحان وب که می‌خواهند درک عمیق‌تری از HTML و ساختار وب‌سایت‌ها داشته باشند.
• دانشجویان و فارغ‌التحصیلان رشته‌های کامپیوتر و IT که علاقه‌مند به توسعه وب هستند.
• هر کسی که می‌خواهد وب‌سایت‌ها و اپلیکیشن‌های وب مدرن و تعاملی بسازد.

چرا این دوره را بگذرانیم؟

• یادگیری HTML عمیق: از مبانی تا مفاهیم پیشرفته، HTML را به طور کامل فرا بگیرید.
• تسلط بر Custom Elements: مهارت ساخت کامپوننت‌های وب سفارشی و قابل استفاده مجدد را کسب کنید.
• افزایش بهره‌وری: با استفاده از Custom Elements، کدهای تمیزتر و سازمان‌یافته‌تری بنویسید.
• ارتقای رزومه: مهارت‌های خود را در زمینه توسعه وب مدرن افزایش دهید و رزومه خود را تقویت کنید.
• پروژه‌های عملی: با انجام پروژه‌های واقعی، دانش خود را به عمل تبدیل کنید.
• پشتیبانی مدرس: از پشتیبانی مستقیم مدرس و پاسخ به سوالات خود بهره‌مند شوید.
• دسترسی مادام‌العمر: به محتوای دوره و آپدیت‌های آن به صورت مادام‌العمر دسترسی داشته باشید.
• یادگیری با سرعت خود: در هر زمان و مکانی که می‌خواهید، درس‌ها را مرور کنید و تمرین کنید.
• ساخت وب‌سایت‌های مدرن: توانایی ساخت وب‌سایت‌ها و اپلیکیشن‌های وب با رابط کاربری جذاب و کارآمد را پیدا کنید.
• جلوگیری از عقب ماندن از تکنولوژی: یادگیری Custom Elements به شما کمک می‌کند تا از جدیدترین تکنولوژی‌ها در توسعه وب بهره‌مند شوید.

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

این دوره شامل بیش از 100 سرفصل جامع است که به شما کمک می‌کند تا به یک متخصص HTML و Custom Elements تبدیل شوید. در اینجا تنها به بخشی از سرفصل‌های اصلی اشاره می‌کنیم:

• بخش 1: مقدمه‌ای بر HTML
  • تاریخچه و تکامل HTML
  • ساختار اصلی یک سند HTML
  • آشنایی با تگ‌ها، عناصر و ویژگی‌ها
  • تگ‌های اصلی HTML (heading, paragraph, links, images, lists)
  • ایجاد و ویرایش یک سند HTML
  • اعتبارسنجی HTML
  • مفاهیم SEO و HTML
  • بهترین شیوه‌های نوشتن کد HTML
  • ابزارهای توسعه HTML
  • ... (سرفصل‌های بیشتر)
• بخش 2: عناصر پیشرفته HTML
  • جداول در HTML
  • فرم‌ها در HTML
  • عناصر چندرسانه‌ای (صوت و تصویر)
  • عناصر معنایی HTML5 (header, nav, article, aside, footer)
  • Canvas و SVG
  • GeoLocation API
  • Web Storage API
  • WebSockets
  • Drag and Drop API
  • ... (سرفصل‌های بیشتر)
• بخش 3: CSS و استایل‌دهی HTML
  • مقدمه‌ای بر CSS
  • انتخابگرها (Selectors) در CSS
  • مدل جعبه‌ای (Box Model)
  • تغییر فونت و رنگ
  • چیدمان عناصر (Layout) با CSS
  • Flexbox و Grid
  • رسپانسیو دیزاین (Responsive Design)
  • انیمیشن‌ها و ترانزیشن‌ها
  • پیش‌پردازنده‌های CSS (Sass, Less)
  • ... (سرفصل‌های بیشتر)
• بخش 4: جاوااسکریپت و HTML
  • مقدمه‌ای بر جاوااسکریپت
  • دستکاری DOM با جاوااسکریپت
  • Event Handling در جاوااسکریپت
  • آشنایی با AJAX
  • استفاده از کتابخانه‌های جاوااسکریپت (jQuery)
  • فریم‌ورک‌های جاوااسکریپت (React, Angular, Vue)
  • ... (سرفصل‌های بیشتر)
• بخش 5: Web Components و Custom Elements
  • مقدمه‌ای بر Web Components
  • آشنایی با Custom Elements
  • تعریف یک Custom Element
  • ثبت یک Custom Element
  • چرخه حیات Custom Elements
  • خصوصیات (Attributes) و پراپرتی‌ها (Properties) در Custom Elements
  • Event Handling در Custom Elements
  • Shadow DOM و کپسوله‌سازی
  • Templates و Slots
  • ... (سرفصل‌های بیشتر)
• بخش 6: پروژه‌های عملی Custom Elements
  • ساخت یک کامپوننت تقویم سفارشی
  • ساخت یک کامپوننت اسلایدر تصاویر
  • ساخت یک کامپوننت آکاردئون
  • ساخت یک کامپوننت Modal
  • ساخت یک کامپوننت فرم اعتبارسنجی
  • ... (سرفصل‌های بیشتر)
• بخش 7: بهینه‌سازی و نگهداری Custom Elements
  • بهینه‌سازی عملکرد Custom Elements
  • تست کردن Custom Elements
  • مستندسازی Custom Elements
  • اشتراک‌گذاری Custom Elements
  • استفاده از کتابخانه‌های Custom Elements
  • ... (سرفصل‌های بیشتر)
• بخش 8: مباحث تکمیلی و پیشرفته
  • دسترسی‌پذیری (Accessibility) در Custom Elements
  • بین‌المللی‌سازی (Internationalization) در Custom Elements
  • امنیت در Custom Elements
  • ... (سرفصل‌های بیشتر)
• بخش 9: استقرار و انتشار وبسایت
  • آشنایی با هاستینگ و دامنه‌ها
  • استقرار وبسایت بر روی سرور
  • تنظیمات DNS
  • گواهینامه SSL
  • ... (سرفصل‌های بیشتر)
• بخش 10: پروژه‌ی نهایی
  • شروع پروژه‌ی پایانی با راهنمایی مدرس
  • پیاده سازی کامل پروژه
  • ارائه و دریافت بازخورد
  • ... (سرفصل‌های بیشتر)

و بسیاری سرفصل‌های دیگر که در طول دوره به آن‌ها خواهیم پرداخت...