A structured, interactive learning resource covering modern JavaScript from core fundamentals to advanced concepts, including asynchronous programming and DOM manipulation.
This project is a self-contained JavaScript learning platform built from the ground up. It provides a structured progression through essential concepts using interactive examples, practical demonstrations, and well-commented code.
- Learners building a strong JavaScript foundation
- Developers reviewing core concepts
- Interview preparation and revision
- Hands-on exploration of modern JavaScript features
- Book-style interface with clear navigation
- 9 organized chapters covering 49+ JavaScript topics
- Syntax-highlighted code examples
- Interactive demos for DOM manipulation and events
- Side-panel JavaScript file viewer
- Sliding split-view panel
- Syntax highlighting for keywords, strings, and comments
- Integrated on every page
- Run examples for async JavaScript concepts
- Real-time setTimeout demonstrations
- Promises, Async/Await, and Fetch API examples
- Clean console output for each run
- Works across desktop, tablet, and mobile
- Clean and consistent styling
- Smooth transitions and hover effects
| Chapter | Topic | Key Areas Covered |
|---|---|---|
| 1 | JavaScript Basics | Variables, types, operators, input, Math object |
| 2 | Control Flow & Strings | Conditionals, switch, string manipulation |
| 3 | Loops & Functions | Iteration, logical operators, functions |
| 4 | Arrays & Callbacks | Array operations, spread/rest, callbacks |
| 5 | Functional Methods | map, filter, reduce, arrow functions |
| 6 | OOP | Classes, inheritance, constructors |
| 7 | Modules & Errors | ES modules, JSON, error handling |
| 8 | Async JavaScript | Promises, Async/Await, Fetch API |
| 9 | DOM & Events | Dynamic UI, event handling, selectors |
- Any modern web browser (Chrome, Firefox, Safari, Edge)
- Basic familiarity with HTML is helpful
- Clone the repository:
git clone https://github.com/UmerAzmi/javascript-mastery.git
cd javascript-mastery- Open in browser:
# Open home.html directly
# OR run a local server
# And visit: http://localhost:8000/home.html- Begin learning from any chapter.
javascript-mastery/
│
├── home.html # Homepage with navigation
│
├── 1.html & 1.js # Chapter 1: JavaScript Basics
├── 2.html & 2.js # Chapter 2: Control Flow & Strings
├── 3.html & 3.js # Chapter 3: Loops & Functions
├── 4.html & 4.js # Chapter 4: Arrays & Callbacks
├── 5.html & 5.js # Chapter 5: Array Methods & Functions
├── 6.html & 6.js # Chapter 6: OOP Concepts
├── 7.html & 7.js # Chapter 7: Modules & Error Handling
├── 8.html & 8.js # Chapter 8: Async JavaScript
└── 9.html & 9.js # Chapter 9: DOM Manipulation & Events
Simple Structure Benefits:
- All files at root level (no nested folders)
- Easy navigation and deployment
- Clean, numbered organization
- No path configuration needed
- let, const, template literals
- Arrow functions
- Destructuring (arrays & objects)
- Spread and rest operators
- Classes and inheritance
- ES modules
- Callback patterns
- Promises
- Async/Await
- Fetch API
- Error handling
- Query selectors
- Dynamic element creation
- Event handling
- Content updates
- Interactive UI behavior
- Functional array methods
- Object manipulation
- Constructors and classes
- Method chaining
- Integrated source code viewer on every page
- Interactive async demonstrations
- Extensive in-code explanations
- Focus on practical understanding
- Pure vanilla JavaScript implementation (no frameworks)
- Begin with Chapter 1 if new to JavaScript
- Progress through Chapters 2–5 for fundamentals
- Study Chapter 6 for object-oriented concepts
- Master Chapter 8 for asynchronous programming
- Practice Chapter 9 to understand DOM interaction
Umer Azmi
This project is open source and available under the MIT License.
Happy Learning 🚀