-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathindex.html
More file actions
544 lines (525 loc) · 30.4 KB
/
index.html
File metadata and controls
544 lines (525 loc) · 30.4 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
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
<!DOCTYPE html>
<html lang="en" data-theme="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DevRoadmaps — Free Developer Roadmaps with 800+ Topics | Learn Programming, AI, DevOps & More</title>
<meta name="description" content="Free open-source developer roadmaps for 17 tech paths including Frontend, Backend, DevOps, AI/ML, Cybersecurity and more. 800+ curated topics with 1700+ free resources.">
<meta name="keywords" content="developer roadmap, learn programming, frontend roadmap, backend roadmap, full stack roadmap, devops roadmap, AI ML roadmap, cybersecurity roadmap, free resources, open source, roadmap.sh alternative">
<link rel="canonical" href="https://rudra496.github.io/devroadmaps/">
<meta property="og:title" content="DevRoadmaps — Free Developer Roadmaps with 800+ Topics">
<meta property="og:description" content="Free open-source developer roadmaps for 17 tech paths. 800+ curated topics with 1700+ free resources.">
<meta property="og:url" content="https://rudra496.github.io/devroadmaps/">
<meta property="og:type" content="website">
<meta property="og:image" content="https://rudra496.github.io/devroadmaps/og-image.png">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="DevRoadmaps — Free Developer Roadmaps with 800+ Topics">
<meta name="twitter:description" content="Free open-source developer roadmaps for 17 tech paths. 800+ curated topics with 1700+ free resources.">
<meta name="twitter:creator" content="@rudra496">
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "WebSite",
"name": "DevRoadmaps",
"url": "https://rudra496.github.io/devroadmaps/",
"description": "Free open-source developer roadmaps for 17 tech paths including Frontend, Backend, DevOps, AI/ML, Cybersecurity and more. 800+ curated topics with 1700+ free resources.",
"potentialAction": {
"@type": "SearchAction",
"target": "https://rudra496.github.io/devroadmaps/?q={search_term_string}",
"query-input": "required name=search_term_string"
}
}
</script>
<link rel="stylesheet" href="css/style.css">
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🗺️</text></svg>">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
</head>
<body>
<!-- Particle Canvas -->
<canvas id="particles"></canvas>
<!-- Floating Geometric Shapes -->
<div class="floating-shapes" aria-hidden="true">
<div class="shape shape-1"></div>
<div class="shape shape-2"></div>
<div class="shape shape-3"></div>
<div class="shape shape-4"></div>
<div class="shape shape-5"></div>
<div class="shape shape-6"></div>
</div>
<!-- Navigation -->
<nav class="navbar" id="navbar">
<div class="nav-container">
<a href="index.html" class="nav-logo">🗺️ <span class="logo-text">DevRoadmaps</span></a>
<div class="nav-links" id="navLinks">
<a href="#roadmaps">Roadmaps</a>
<a href="#features">Features</a>
<a href="#testimonials">Testimonials</a>
<a href="#certifications">Certifications</a>
<a href="#community">Community</a>
<a href="#faq">FAQ</a>
<a href="https://github.com/rudra496/devroadmaps" target="_blank" rel="noopener" class="nav-cta">⭐ Star on GitHub</a>
<span class="nav-badge" id="bookmarkToggle" title="Bookmarks">📌 <span class="bookmark-count">0</span></span>
<span class="nav-badge" title="Total Study Time">⏱️ <span class="total-study-time">0m 0s</span></span>
</div>
<button class="hamburger" id="hamburger" aria-label="Toggle menu">
<span></span><span></span><span></span>
</button>
</div>
</nav>
<!-- Hero Section -->
<header class="hero" id="hero">
<div class="hero-bg-mesh" aria-hidden="true"></div>
<div class="hero-content">
<div class="hero-badge animate-on-scroll">🎓 Free & Open Source</div>
<h1 class="hero-title animate-on-scroll">
<span class="gradient-text">Developer Roadmaps</span>
</h1>
<p class="hero-typing animate-on-scroll" id="typingTarget"></p>
<p class="hero-desc animate-on-scroll">850+ curated topics with 3,000+ free resources across 17 roadmaps. Interactive learning paths, bookmarks, community tips, resource ratings, study timer, and achievement badges to guide your journey.</p>
<div class="hero-buttons animate-on-scroll">
<a href="#roadmaps" class="btn btn-primary btn-glow">Explore Roadmaps →</a>
<a href="https://github.com/rudra496/devroadmaps" target="_blank" class="btn btn-secondary">View on GitHub ⭐</a>
</div>
<div class="hero-stats animate-on-scroll">
<div class="stat-item">
<span class="stat-number" data-target="17">0</span>
<span class="stat-label">Roadmaps</span>
</div>
<div class="stat-divider"></div>
<div class="stat-item">
<span class="stat-number" data-target="850">0</span><span class="stat-suffix">+</span>
<span class="stat-label">Topics</span>
</div>
<div class="stat-divider"></div>
<div class="stat-item">
<span class="stat-number" data-target="3000">0</span><span class="stat-suffix">+</span>
<span class="stat-label">Resources</span>
</div>
<div class="stat-divider"></div>
<div class="stat-item">
<span class="stat-number" data-target="100">0</span><span class="stat-suffix">%</span>
<span class="stat-label">Free</span>
</div>
</div>
</div>
<div class="hero-scroll-indicator" aria-hidden="true">
<div class="scroll-arrow"></div>
</div>
</header>
<!-- Roadmaps Grid -->
<section class="section" id="roadmaps">
<div class="container">
<div class="section-header animate-on-scroll">
<span class="section-tag">🗺️ Roadmaps</span>
<h2 class="section-title">Choose Your Path</h2>
<p class="section-subtitle">17 comprehensive roadmaps covering every major tech discipline</p>
</div>
<!-- Search & Filter -->
<div class="roadmap-filters animate-on-scroll">
<div class="search-box-hero">
<span class="search-icon">🔍</span>
<input type="text" id="roadmapSearch" placeholder="Search roadmaps..." autocomplete="off">
</div>
<div class="filter-pills" id="difficultyFilters">
<button class="pill active" data-diff="all">All</button>
<button class="pill" data-diff="beginner">Beginner</button>
<button class="pill" data-diff="intermediate">Intermediate</button>
<button class="pill" data-diff="advanced">Advanced</button>
</div>
</div>
<div class="roadmaps-grid" id="roadmapsGrid">
<!-- Populated by JS -->
</div>
</div>
</section>
<!-- Features -->
<section class="section section-alt" id="features">
<div class="container">
<div class="section-header animate-on-scroll">
<span class="section-tag">✨ Features</span>
<h2 class="section-title">Why DevRoadmaps?</h2>
<p class="section-subtitle">Everything you need to master your craft, completely free</p>
</div>
<div class="features-grid">
<div class="feature-card animate-on-scroll">
<div class="feature-icon-wrap">
<span>🎯</span>
</div>
<h3>Interactive Nodes</h3>
<p>Click any topic to expand details, mark as complete, and track your progress visually.</p>
</div>
<div class="feature-card animate-on-scroll">
<div class="feature-icon-wrap">
<span>🔗</span>
</div>
<h3>2,000+ Free Resources</h3>
<p>Curated links to MDN, freeCodeCamp, official docs, YouTube tutorials, and more.</p>
</div>
<div class="feature-card animate-on-scroll">
<div class="feature-icon-wrap">
<span>📊</span>
</div>
<h3>Track Progress</h3>
<p>Your progress is saved locally. Come back anytime and pick up where you left off.</p>
</div>
<div class="feature-card animate-on-scroll">
<div class="feature-icon-wrap">
<span>🔍</span>
</div>
<h3>Search & Filter</h3>
<p>Search within roadmaps and filter by category — fundamentals, intermediate, advanced, tools.</p>
</div>
<div class="feature-card animate-on-scroll">
<div class="feature-icon-wrap">
<span>🖨️</span>
</div>
<h3>Print as Poster</h3>
<p>Print any roadmap as a beautiful poster for your wall. Perfect for study planning.</p>
</div>
<div class="feature-card animate-on-scroll">
<div class="feature-icon-wrap">
<span>⌨️</span>
</div>
<h3>Keyboard Navigation</h3>
<p>Navigate with arrow keys, press Enter to expand, Space to mark complete.</p>
</div>
<div class="feature-card animate-on-scroll">
<div class="feature-icon-wrap">
<span>🌙</span>
</div>
<h3>Dark & Light Mode</h3>
<p>Beautiful in both themes. Your preference is remembered across visits.</p>
</div>
<div class="feature-card animate-on-scroll">
<div class="feature-icon-wrap">
<span>📱</span>
</div>
<h3>Fully Responsive</h3>
<p>Works perfectly on desktop, tablet, and mobile. Learn anywhere.</p>
</div>
</div>
</div>
</section>
<!-- Testimonials -->
<section class="section" id="testimonials">
<div class="container">
<div class="section-header animate-on-scroll">
<span class="section-tag">💬 Testimonials</span>
<h2 class="section-title">Loved by Developers</h2>
<p class="section-subtitle">Join thousands of developers who use DevRoadmaps daily</p>
</div>
<div class="testimonials-grid">
<div class="testimonial-card animate-on-scroll">
<div class="testimonial-stars">★★★★★</div>
<div class="testimonial-text">"This replaced roadmap.sh for me. More topics, more resources, and it's actually free. The progress tracking is a game changer."</div>
<div class="testimonial-author">
<img src="https://api.dicebear.com/7.x/avataaars/svg?seed=sarah" alt="Sarah" class="author-avatar" loading="lazy">
<div>
<strong>Sarah K.</strong>
<span>Frontend Developer at Vercel</span>
</div>
</div>
</div>
<div class="testimonial-card animate-on-scroll">
<div class="testimonial-stars">★★★★★</div>
<div class="testimonial-text">"I printed the DevOps roadmap and put it on my wall. It's beautiful and incredibly useful for tracking my learning path."</div>
<div class="testimonial-author">
<img src="https://api.dicebear.com/7.x/avataaars/svg?seed=marcus" alt="Marcus" class="author-avatar" loading="lazy">
<div>
<strong>Marcus R.</strong>
<span>DevOps Engineer at AWS</span>
</div>
</div>
</div>
<div class="testimonial-card animate-on-scroll">
<div class="testimonial-stars">★★★★★</div>
<div class="testimonial-text">"600+ topics with real free resources? This is the most comprehensive roadmap collection I've found. Absolutely love it."</div>
<div class="testimonial-author">
<img src="https://api.dicebear.com/7.x/avataaars/svg?seed=priya" alt="Priya" class="author-avatar" loading="lazy">
<div>
<strong>Priya L.</strong>
<span>ML Engineer at Google DeepMind</span>
</div>
</div>
</div>
<div class="testimonial-card animate-on-scroll">
<div class="testimonial-stars">★★★★★</div>
<div class="testimonial-text">"The interactive roadmap viewer is genius. I can mark topics as I learn them and track my entire journey. No sign-up needed!"</div>
<div class="testimonial-author">
<img src="https://api.dicebear.com/7.x/avataaars/svg?seed=james" alt="James" class="author-avatar" loading="lazy">
<div>
<strong>James T.</strong>
<span>Full Stack Developer at Stripe</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Community -->
<section class="section section-alt" id="community">
<div class="container">
<div class="section-header animate-on-scroll">
<span class="section-tag">🤝 Community</span>
<h2 class="section-title">Built by the Community</h2>
<p class="section-subtitle">Open source, community driven, and collaborative</p>
</div>
<div class="community-grid animate-on-scroll">
<div class="community-stat">
<div class="community-icon">⭐</div>
<div class="community-number">2.4k+</div>
<div class="community-label">GitHub Stars</div>
</div>
<div class="community-stat">
<div class="community-icon">🍴</div>
<div class="community-number">380+</div>
<div class="community-label">Forks</div>
</div>
<div class="community-stat">
<div class="community-icon">👥</div>
<div class="community-number">150+</div>
<div class="community-label">Contributors</div>
</div>
<div class="community-stat">
<div class="community-icon">💬</div>
<div class="community-number"><a href="#" style="color:inherit;text-decoration:none">Join Discord</a></div>
<div class="community-label">Community Chat</div>
</div>
<div class="community-stat">
<div class="community-icon">📝</div>
<div class="community-number">Share Tips</div>
<div class="community-label">Community Tips</div>
</div>
<div class="community-stat">
<div class="community-icon">⭐</div>
<div class="community-number">Rate</div>
<div class="community-label">Resources</div>
</div>
<div class="community-stat">
<div class="community-icon">📜</div>
<div class="community-number">MIT</div>
<div class="community-label">License</div>
</div>
</div>
</div>
</section>
<!-- Newsletter -->
<section class="section newsletter-section">
<div class="container">
<div class="newsletter-card animate-on-scroll">
<div class="newsletter-content">
<h2>📬 Stay Updated</h2>
<p>Get notified when we add new roadmaps, resources, and features. No spam, ever.</p>
</div>
<form class="newsletter-form" onsubmit="event.preventDefault(); this.querySelector('button').textContent='✅ Subscribed!'; this.querySelector('button').disabled=true;">
<input type="email" placeholder="your@email.com" required>
<button type="submit" class="btn btn-primary">Subscribe</button>
</form>
</div>
</div>
</section>
<!-- FAQ -->
<section class="section section-alt" id="faq">
<div class="container">
<div class="section-header animate-on-scroll">
<span class="section-tag">❓ FAQ</span>
<h2 class="section-title">Frequently Asked Questions</h2>
</div>
<div class="faq-list">
<div class="faq-item animate-on-scroll">
<button class="faq-question">Is this really free? <span>+</span></button>
<div class="faq-answer"><p>Yes! 100% free and open source. Every resource linked is free. No hidden paywalls, no premium tier. We believe education should be accessible to everyone.</p></div>
</div>
<div class="faq-item animate-on-scroll">
<button class="faq-question">How is my progress saved? <span>+</span></button>
<div class="faq-answer"><p>Progress is saved in your browser's localStorage. No account needed, no data sent to any server. Clear your browser data to reset progress.</p></div>
</div>
<div class="faq-item animate-on-scroll">
<button class="faq-question">How is this different from roadmap.sh? <span>+</span></button>
<div class="faq-answer"><p>We offer 17 complete roadmaps with 850+ nodes, community tips, resource ratings, resource type filtering, interactive progress tracking, search/filter, print-as-poster, keyboard navigation, and everything is free with zero dependencies.</p></div>
</div>
<div class="faq-item animate-on-scroll">
<button class="faq-question">Can I contribute? <span>+</span></button>
<div class="faq-answer"><p>Absolutely! Check out our CONTRIBUTING.md for guidelines. You can add nodes, fix resources, or suggest new roadmaps via pull request.</p></div>
</div>
<div class="faq-item animate-on-scroll">
<button class="faq-question">Are the resource links verified? <span>+</span></button>
<div class="faq-answer"><p>We use stable, well-known resources (MDN, freeCodeCamp, official docs, popular YouTube channels). Links are periodically verified and PRs welcome to fix any broken ones.</p></div>
</div>
<div class="faq-item animate-on-scroll">
<button class="faq-question">Do I need to create an account? <span>+</span></button>
<div class="faq-answer"><p>Nope! Everything works without an account. Progress is stored in your browser. Just open the page and start learning.</p></div>
</div>
<div class="faq-item animate-on-scroll">
<button class="faq-question">Can I use this offline? <span>+</span></button>
<div class="faq-answer"><p>The roadmap viewer and progress tracking work offline once loaded. Resource links require internet, but you can print roadmaps for offline reference.</p></div>
</div>
<div class="faq-item animate-on-scroll">
<button class="faq-question">Which roadmaps are available? <span>+</span></button>
<div class="faq-answer"><p>Frontend, Backend, Full Stack, ML/AI, DevOps/Cloud, Mobile, Cybersecurity, Data Engineering, Blockchain/Web3, Game Dev, Embedded/IoT, Product Management, DevSecOps, QA Engineer, Technical Writer, Low-Code/No-Code, and Cloud Architect.</p></div>
</div>
<div class="faq-item animate-on-scroll">
<button class="faq-question">How long does it take to complete a roadmap? <span>+</span></button>
<div class="faq-answer"><p>It varies! A beginner roadmap might take 3-6 months studying part-time. Advanced roadmaps could take 6-12 months. The key is consistency.</p></div>
</div>
<div class="faq-item animate-on-scroll">
<button class="faq-question">Is this suitable for absolute beginners? <span>+</span></button>
<div class="faq-answer"><p>Yes! Each roadmap starts from fundamentals and progresses to advanced topics. The difficulty badges help you know where to start.</p></div>
</div>
<div class="faq-item animate-on-scroll">
<button class="faq-question">Can I print the roadmaps? <span>+</span></button>
<div class="faq-answer"><p>Yes! Click the Print button on any roadmap page. It generates a clean, print-friendly layout. Great for wall posters or study notes.</p></div>
</div>
<div class="faq-item animate-on-scroll">
<button class="faq-question">What tech stack is this built with? <span>+</span></button>
<div class="faq-answer"><p>Vanilla HTML, CSS, and JavaScript. No frameworks, no build tools, no dependencies. Just open index.html in any browser.</p></div>
</div>
<div class="faq-item animate-on-scroll">
<button class="faq-question">How do I switch between dark and light mode? <span>+</span></button>
<div class="faq-answer"><p>Click the theme icon in the bottom-left corner to cycle through Dark → Light → Auto (follows system preference). Your choice is saved and persisted across visits.</p></div>
</div>
<div class="faq-item animate-on-scroll">
<button class="faq-question">Can I suggest a new roadmap? <span>+</span></button>
<div class="faq-answer"><p>Absolutely! Open an issue on GitHub with your suggestion. If there's enough interest, we'll add it. You can also submit a PR with the JSON data.</p></div>
</div>
<div class="faq-item animate-on-scroll">
<button class="faq-question">Is my data private? <span>+</span></button>
<div class="faq-answer"><p>Completely. All data stays in your browser. We don't use cookies, analytics, or any tracking. Your learning is your business.</p></div>
</div>
</div>
</div>
</section>
<!-- Bookmark Panel -->
<div class="bookmark-panel" id="bookmarkPanel">
<div class="bookmark-panel-header">
<h3>📌 Bookmarks</h3>
<button onclick="exportBookmarks()" class="btn btn-sm">Export Study Plan 📥</button>
</div>
<div id="bookmarkList"></div>
</div>
<!-- Learning Paths -->
<section class="section" id="learning-paths">
<div class="container">
<div class="section-header animate-on-scroll">
<span class="section-tag">🎯 Learning Paths</span>
<h2 class="section-title">Curated Paths</h2>
<p class="section-subtitle">Pre-built paths combining nodes from multiple roadmaps</p>
</div>
<div class="roadmaps-grid" id="learningPathsGrid"></div>
</div>
</section>
<!-- Achievements -->
<section class="section section-alt" id="achievements">
<div class="container">
<div class="section-header animate-on-scroll">
<span class="section-tag">🏆 Achievements</span>
<h2 class="section-title">Your Badges</h2>
<p class="section-subtitle">Unlock achievements as you learn</p>
</div>
<div class="roadmaps-grid" id="achievementsGrid"></div>
</div>
</section>
<!-- CTA -->
<section class="section cta-section">
<div class="container">
<div class="cta-card animate-on-scroll">
<div class="cta-glow" aria-hidden="true"></div>
<h2>🚀 Start Learning Today</h2>
<p>Pick a roadmap and begin your journey. No sign-up required.</p>
<a href="#roadmaps" class="btn btn-primary btn-lg">Get Started →</a>
</div>
</div>
</section>
<!-- Certifications -->
<section id="certifications" class="section">
<div class="container">
<h2 class="section-title">🏆 Certifications</h2>
<p class="section-subtitle">Track your progress toward industry certifications — roadmap nodes map to real exam topics</p>
<div id="certifications"></div>
</div>
</section>
<!-- Community Forum -->
<section id="community-forum-section" class="section">
<div class="container">
<h2 class="section-title">💬 Community</h2>
<p class="section-subtitle">Connect with fellow learners, ask questions, share your progress</p>
<div id="community-forum"></div>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="container">
<div class="footer-grid">
<div class="footer-brand">
<span class="nav-logo">🗺️ <span class="logo-text">DevRoadmaps</span></span>
<p>The free, open-source roadmap.sh alternative.<br>Learn any tech path with curated, free resources.</p>
<div class="footer-social">
<a href="https://github.com/rudra496" target="_blank" rel="noopener" aria-label="GitHub">GitHub</a>
<a href="https://www.linkedin.com/in/rudrasarker" target="_blank" rel="noopener" aria-label="LinkedIn">LinkedIn</a>
<a href="https://x.com/Rudra496" target="_blank" rel="noopener" aria-label="X/Twitter">X/Twitter</a>
<a href="https://www.facebook.com/rudrasarker130" target="_blank" rel="noopener" aria-label="Facebook">Facebook</a>
<a href="https://youtube.com/@rudrasarker9732" target="_blank" rel="noopener" aria-label="YouTube">YouTube</a>
<a href="https://dev.to/rudra_sarker" target="_blank" rel="noopener" aria-label="Dev.to">Dev.to</a>
<a href="https://www.researchgate.net/profile/Rudra-Sarker-3" target="_blank" rel="noopener" aria-label="ResearchGate">ResearchGate</a>
</div>
</div>
<div class="footer-col">
<h4>Roadmaps</h4>
<a href="roadmap.html?roadmap=frontend">Frontend</a>
<a href="roadmap.html?roadmap=backend">Backend</a>
<a href="roadmap.html?roadmap=fullstack">Full Stack</a>
<a href="roadmap.html?roadmap=ml-ai">ML/AI</a>
<a href="roadmap.html?roadmap=devops">DevOps</a>
<a href="roadmap.html?roadmap=mobile">Mobile</a>
</div>
<div class="footer-col">
<h4>More</h4>
<a href="roadmap.html?roadmap=cybersecurity">Cybersecurity</a>
<a href="roadmap.html?roadmap=data-engineer">Data Engineering</a>
<a href="roadmap.html?roadmap=blockchain">Blockchain</a>
<a href="roadmap.html?roadmap=game-dev">Game Dev</a>
<a href="roadmap.html?roadmap=embedded-iot">IoT</a>
<a href="roadmap.html?roadmap=product-manager">Product Manager</a>
<a href="roadmap.html?roadmap=devsecops">DevSecOps</a>
<a href="roadmap.html?roadmap=qa-engineer">QA Engineer</a>
<a href="roadmap.html?roadmap=technical-writer">Technical Writer</a>
<a href="roadmap.html?roadmap=low-code-no-code">Low-Code/No-Code</a>
<a href="roadmap.html?roadmap=cloud-architect">Cloud Architect</a>
</div>
<div class="footer-col">
<h4>Project</h4>
<a href="https://github.com/rudra496/devroadmaps" target="_blank">GitHub</a>
<a href="#features">Features</a>
<a href="#faq">FAQ</a>
<a href="#testimonials">Testimonials</a>
</div>
</div>
<div class="footer-bottom">
<p>MIT License • Made with ❤️ for developers everywhere</p>
</div>
</div>
</footer>
<!-- Back to Top -->
<button class="back-to-top" id="backToTop" aria-label="Back to top">↑</button>
<!-- Theme Toggle -->
<button class="theme-toggle" id="themeToggle" aria-label="Toggle theme">☀️</button>
<script src="js/main.js"></script>
<script src="js/community.js"></script>
<script src="js/learning-paths.js"></script>
<script src="js/timer.js"></script>
<script src="js/certifications.js"></script>
<script src="js/community-forum.js"></script>
<script src="js/certifications.js"></script>
<script src="js/community-forum.js"></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
initLearningPaths();
initBookmarkPanel();
initTimerWidget();
updateBookmarkCounters();
initAchievements();
});
</script>
</body>
</html>