Pure JavaScript Instead of jQuery Training

Module 1: Past and Present

• Evolution of browsers and JavaScript frameworks
• Which companies abandoned jQuery and why
• Modern browser capabilities
• Using CanIUse.com to verify feature support

Module 2: DOM Manipulation

• Copying DOM elements
• Wrapping elements
• Moving elements within the DOM
• Removing elements
• Attribute vs. property differences

Module 3: CSS – Selectors and Animations

• Working with classes and inline styles
• Element positions and dimensions
• Using document.querySelector and related APIs
• Using Animate.css for animations

Module 4: Working with Element Collections

• Iterating over NodeLists and HTMLCollections
• Converting collections to arrays
• Batch operations on multiple elements

Module 5: Forms and Events

• Retrieving form values
• Working with FormData
• Using URLSearchParams
• Triggering custom events
• One-time callbacks
• Function shadowing issues: arrow functions vs this

Module 6: AJAX and Deferred

• Callbacks and Deferred patterns
• Modern browser APIs: fetch and Promise
• async / await
• Thenable objects

Module 7: Other Topics

• data-* attributes vs dataset

Module 8: Cross-Browser and Old Browsers Without jQuery

• Browser popularity checks and compatibility tables
• Chromium-based browsers
• Shim vs polyfill

Module 9: Transpilation

• Babel basics
• Babel with polyfills
• Alternative approach: TypeScript and compilation
• Using TypeScript with Babel

Module 10: Web Components

• customElements
• HTML templates
• Shadow DOM
• Web Components vs frameworks

Module 11: Final Project

• Building a modern, framework-free web application
• Applying learned DOM, API, and Web Components concepts