Repository navigation
Expand file tree
/
Copy pathindex.html
More file actions
183 lines (170 loc) · 10.3 KB
/
Copy pathindex.html
File metadata and controls
183 lines (170 loc) · 10.3 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Mastery Roadmap | Student Explorer</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<style>
:root {
--bg-dark: #0a0e17;
--bg-card: #111827;
--border-color: rgba(255, 255, 255, 0.08);
--primary: #f59e0b;
--primary-glow: rgba(245, 158, 11, 0.35);
--text-main: #f8fafc;
--text-muted: #94a3b8;
--accent-green: #10b981;
}
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Plus Jakarta Sans', sans-serif; }
body {
background-color: var(--bg-dark);
color: var(--text-main);
min-height: 100vh;
background-image:
radial-gradient(circle at 15% 20%, rgba(245, 158, 11, 0.15) 0%, transparent 40%),
radial-gradient(circle at 85% 60%, rgba(59, 130, 246, 0.08) 0%, transparent 45%);
}
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
header { padding: 20px 0; border-bottom: 1px solid var(--border-color); background: rgba(10, 14, 23, 0.85); backdrop-filter: blur(12px); position: sticky; top: 0; z-index: 50; }
.header-content { display: flex; justify-content: space-between; align-items: center; }
.brand { display: flex; align-items: center; gap: 12px; font-size: 1.25rem; font-weight: 700; color: #fff; text-decoration: none; }
.brand i { color: var(--primary); font-size: 1.5rem; }
.nav-link { color: var(--text-muted); text-decoration: none; font-size: 0.95rem; display: flex; align-items: center; gap: 8px; }
.nav-link:hover { color: #fff; }
.hero { padding: 50px 0 30px; text-align: center; }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 9999px; background: rgba(245, 158, 11, 0.1); border: 1px solid rgba(245, 158, 11, 0.3); color: var(--primary); font-size: 0.85rem; font-weight: 600; margin-bottom: 16px; }
.hero h1 { font-size: 2.75rem; font-weight: 800; margin-bottom: 12px; }
.hero p { color: var(--text-muted); max-width: 700px; margin: 0 auto 30px; font-size: 1.1rem; line-height: 1.6; }
.modules-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); gap: 20px; margin-bottom: 60px; }
.module-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 14px; padding: 24px; display: flex; flex-direction: column; justify-content: space-between; transition: all 0.25s ease; }
.module-card:hover { transform: translateY(-4px); border-color: rgba(245, 158, 11, 0.4); box-shadow: 0 12px 24px -10px var(--primary-glow); }
.module-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; }
.module-num { font-size: 0.85rem; font-family: 'JetBrains Mono', monospace; color: var(--primary); font-weight: 600; }
.module-card h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 8px; color: #fff; }
.module-card p { color: var(--text-muted); font-size: 0.9rem; line-height: 1.5; margin-bottom: 18px; }
.btn-link { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: rgba(245, 158, 11, 0.15); border: 1px solid var(--primary); color: #fff; padding: 10px 18px; border-radius: 8px; font-size: 0.9rem; font-weight: 600; text-decoration: none; width: 100%; transition: background 0.2s; }
.btn-link:hover { background: var(--primary); color: #000; }
footer { padding: 30px 0; border-top: 1px solid var(--border-color); text-align: center; color: var(--text-muted); font-size: 0.9rem; }
</style>
</head>
<body>
<header>
<div class="container header-content">
<a href="../index.html" class="brand">
<i class="fa-brands fa-js"></i>
<span>JavaScript Mastery Roadmap</span>
</a>
<a href="../index.html" class="nav-link">
<i class="fa-solid fa-arrow-left"></i>
<span>Back to Programming Hub</span>
</a>
</div>
</header>
<main class="container">
<section class="hero">
<span class="badge"><i class="fa-solid fa-bolt"></i> ECMAScript ES2026+ Standards</span>
<h1>From Fundamentals to Senior JavaScript Engineer</h1>
<p>Master execution contexts, closures, prototypes, event loops, promises, and modern asynchronous concurrency.</p>
</section>
<section class="modules-grid">
<div class="module-card">
<div>
<div class="module-header"><span class="module-num">MODULE 01</span></div>
<h3>Basics & Data Types</h3>
<p>Stack vs Heap memory, type coercion, BigInt, Symbol, and Temporal Dead Zone.</p>
</div>
<a href="./01_Basics_and_Data_Types/" class="btn-link">Explore Module</a>
</div>
<div class="module-card">
<div>
<div class="module-header"><span class="module-num">MODULE 02</span></div>
<h3>Operators & Control Flow</h3>
<p>Strict equality, Nullish Coalescing (??), Optional Chaining (?.), and switch expressions.</p>
</div>
<a href="./02_Operators_and_Control_Flow/" class="btn-link">Explore Module</a>
</div>
<div class="module-card">
<div>
<div class="module-header"><span class="module-num">MODULE 03</span></div>
<h3>Functions & Scope (Closures)</h3>
<p>Lexical scope, higher-order functions, encapsulation, and closure memory retention.</p>
</div>
<a href="./03_Functions_and_Scope/01_closures_and_lexical_scope.js" class="btn-link">View Code & Docs</a>
</div>
<div class="module-card">
<div>
<div class="module-header"><span class="module-num">MODULE 04</span></div>
<h3>Arrays, Objects & Destructuring</h3>
<p>Map, filter, reduce transformations, rest/spread operators, and deep cloning.</p>
</div>
<a href="./04_Arrays_and_Objects/" class="btn-link">Explore Module</a>
</div>
<div class="module-card">
<div>
<div class="module-header"><span class="module-num">MODULE 05</span></div>
<h3>DOM & Event Delegation</h3>
<p>Event bubbling vs capturing phases, passive listeners, and high-performance DOM traversal.</p>
</div>
<a href="./05_DOM_Manipulation_and_Events/" class="btn-link">Explore Module</a>
</div>
<div class="module-card">
<div>
<div class="module-header"><span class="module-num">MODULE 06</span></div>
<h3>Async JS & Promises</h3>
<p>Promise lifecycles, async/await, Promise.all vs allSettled, and error boundaries.</p>
</div>
<a href="./06_Asynchronous_JavaScript/01_promises_async_await.js" class="btn-link">View Code & Docs</a>
</div>
<div class="module-card">
<div>
<div class="module-header"><span class="module-num">MODULE 07</span></div>
<h3>Event Loop & Engine Internals</h3>
<p>Call Stack, Microtask Queue vs Macrotask Queue, and tick execution priorities.</p>
</div>
<a href="./07_Event_Loop_and_Internals/01_event_loop_explained.js" class="btn-link">View Code & Docs</a>
</div>
<div class="module-card">
<div>
<div class="module-header"><span class="module-num">MODULE 08</span></div>
<h3>Prototypes & OOP</h3>
<p>Prototype chaining, class syntax, this binding (call, apply, bind), and inheritance.</p>
</div>
<a href="./08_OOP_and_Prototypes/" class="btn-link">Explore Module</a>
</div>
<div class="module-card">
<div>
<div class="module-header"><span class="module-num">MODULE 09</span></div>
<h3>Web APIs & Storage</h3>
<p>Fetch API, LocalStorage, SessionStorage, IntersectionObserver, and Web Workers.</p>
</div>
<a href="./09_Web_APIs_and_Storage/" class="btn-link">Explore Module</a>
</div>
<div class="module-card">
<div>
<div class="module-header"><span class="module-num">MODULE 10</span></div>
<h3>Real-World Projects</h3>
<p>Interactive Kanban board with drag-and-drop, and live weather telemetry app.</p>
</div>
<a href="./10_Real_World_Projects/" class="btn-link">Explore Projects</a>
</div>
<div class="module-card" style="border-color: rgba(245, 158, 11, 0.4); background: rgba(245, 158, 11, 0.05);">
<div>
<div class="module-header"><span class="module-num">MODULE 11</span></div>
<h3>Top 50 JavaScript Interview Q&A</h3>
<p>High-yield technical screening questions on closures, event loops, and engine internals.</p>
</div>
<a href="./11_Interview_Questions_and_Assignments/01_top_50_javascript_interview_questions.md" class="btn-link">Open Interview Guide</a>
</div>
</section>
</main>
<footer>
<div class="container">
<p>© 2026 Programming Hub | Part of Abhishek Kumar's Open-Source Developer Ecosystem.</p>
</div>
</footer>
</body>
</html>