-
Notifications
You must be signed in to change notification settings - Fork 2
Expand file tree
/
Copy pathindex.html
More file actions
998 lines (957 loc) · 55.2 KB
/
index.html
File metadata and controls
998 lines (957 loc) · 55.2 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
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Better Dev - Learn Maths & DSA</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=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="topbar">
<button class="sidebar-toggle" aria-label="Open navigation" aria-expanded="false">
<span class="hamburger-icon"></span>
</button>
<a href="index.html" class="logo">Better Dev</a>
</header>
<div class="sidebar-backdrop" aria-hidden="true"></div>
<aside class="sidebar" aria-label="Site navigation">
<div class="sidebar-header">
<span class="sidebar-title">Navigation</span>
<button class="sidebar-close" aria-label="Close navigation">×</button>
</div>
<div class="sidebar-search">
<input type="text" class="sidebar-search-input" placeholder="Search topics..." aria-label="Search topics">
<div class="sidebar-search-results"></div>
</div>
<nav class="sidebar-nav">
<div class="sidebar-group">
<a href="index.html">Home</a>
</div>
<div class="sidebar-group">
<div class="sidebar-group-label">Mathematics</div>
<a href="pre-algebra.html">Pre-Algebra</a>
<a href="algebra.html">Algebra</a>
<a href="sequences-series.html">Sequences & Series</a>
<a href="geometry.html">Geometry</a>
<a href="calculus.html">Calculus</a>
<a href="discrete-math.html">Discrete Math</a>
<a href="linear-algebra.html">Linear Algebra</a>
<a href="probability.html">Probability & Statistics</a>
<a href="binary-systems.html">Binary & Number Systems</a>
<a href="number-theory.html">Number Theory for CP</a>
<a href="computational-geometry.html">Computational Geometry</a>
<a href="game-theory.html">Game Theory</a>
</div>
<div class="sidebar-group">
<div class="sidebar-group-label">Data Structures & Algorithms</div>
<a href="dsa-foundations.html">DSA Foundations</a>
<a href="arrays.html">Arrays & Strings</a>
<a href="stacks-queues.html">Stacks & Queues</a>
<a href="hashmaps.html">Hash Maps & Sets</a>
<a href="linked-lists.html">Linked Lists</a>
<a href="trees.html">Trees & BST</a>
<a href="graphs.html">Graphs</a>
<a href="sorting.html">Sorting & Searching</a>
<a href="patterns.html">LeetCode Patterns</a>
<a href="dp.html">Dynamic Programming</a>
<a href="advanced.html">Advanced Topics</a>
<a href="string-algorithms.html">String Algorithms</a>
<a href="advanced-graphs.html">Advanced Graphs</a>
<a href="advanced-dp.html">Advanced DP</a>
<a href="advanced-ds.html">Advanced Data Structures</a>
<a href="leetcode-650.html">The 650 Problems</a>
<a href="competitive-programming.html">CP Roadmap</a>
</div>
<div class="sidebar-group">
<div class="sidebar-group-label">Languages & Systems</div>
<a href="cpp.html">C++</a>
<a href="golang.html">Go</a>
<a href="javascript.html">JavaScript Deep Dive</a>
<a href="typescript.html">TypeScript</a>
<a href="nodejs.html">Node.js Internals</a>
<a href="os.html">Operating Systems</a>
<a href="linux.html">Linux</a>
<a href="git.html">Git</a>
<a href="backend.html">Backend</a>
<a href="system-design.html">System Design</a>
<a href="networking.html">Networking</a>
<a href="cloud.html">Cloud & Infrastructure</a>
<a href="docker.html">Docker & Compose</a>
<a href="kubernetes.html">Kubernetes</a>
<a href="message-queues.html">Queues & Pub/Sub</a>
<a href="selfhosting.html">VPS & Self-Hosting</a>
<a href="databases.html">PostgreSQL & MySQL</a>
<a href="stripe.html">Stripe & Payments</a>
<a href="distributed-systems.html">Distributed Systems</a>
<a href="backend-engineering.html">Backend Engineering</a>
</div>
<div class="sidebar-group">
<div class="sidebar-group-label">JS/TS Ecosystem</div>
<a href="js-tooling.html">Tooling & Bundlers</a>
<a href="js-testing.html">Testing</a>
<a href="ts-projects.html">Building with TS</a>
</div>
</nav>
</aside>
<div class="container">
<div class="hero">
<h1>Better Dev</h1>
<p>Everything you need to go from zero to cracked in maths, DSA, systems, and software engineering. Follow the site top to bottom -- each section builds on the last. <strong>The order IS the roadmap.</strong></p>
</div>
<!-- ============================================================ -->
<!-- PHASE 1: FOUNDATIONS -->
<!-- ============================================================ -->
<h2 class="section-title">Phase 1 -- Foundations</h2>
<p>Build the base. Math fundamentals, your first data structures, your tools, and your first language. Everything after this depends on nailing these. Go in order.</p>
<div class="roadmap">
<a href="pre-algebra.html" class="roadmap-step">
<div class="step-num">1</div>
<div class="step-label">Pre-Algebra</div>
<div class="step-desc">Numbers, BODMAS, fractions, ratios</div>
</a>
<a href="algebra.html" class="roadmap-step">
<div class="step-num">2</div>
<div class="step-label">Algebra</div>
<div class="step-desc">Variables, equations, functions</div>
</a>
<a href="sequences-series.html" class="roadmap-step">
<div class="step-num">3</div>
<div class="step-label">Sequences & Series</div>
<div class="step-desc">Progressions, sum formulas</div>
</a>
<a href="geometry.html" class="roadmap-step">
<div class="step-num">4</div>
<div class="step-label">Geometry</div>
<div class="step-desc">Shapes, trig, coordinate geometry</div>
</a>
<a href="binary-systems.html" class="roadmap-step">
<div class="step-num">5</div>
<div class="step-label">Binary & Number Systems</div>
<div class="step-desc">Binary, hex, bitwise ops</div>
</a>
<a href="linux.html" class="roadmap-step">
<div class="step-num">6</div>
<div class="step-label">Linux</div>
<div class="step-desc">Shell, filesystem, commands</div>
</a>
<a href="git.html" class="roadmap-step">
<div class="step-num">7</div>
<div class="step-label">Git</div>
<div class="step-desc">Version control, branches, workflows</div>
</a>
<a href="javascript.html" class="roadmap-step">
<div class="step-num">8</div>
<div class="step-label">JavaScript</div>
<div class="step-desc">V8, closures, event loop, async</div>
</a>
<a href="dsa-foundations.html" class="roadmap-step">
<div class="step-num">9</div>
<div class="step-label">DSA Foundations</div>
<div class="step-desc">Time complexity, Big-O, core structures</div>
</a>
<a href="arrays.html" class="roadmap-step">
<div class="step-num">10</div>
<div class="step-label">Arrays & Strings</div>
<div class="step-desc">Two pointers, sliding window, prefix sum</div>
</a>
<a href="hashmaps.html" class="roadmap-step">
<div class="step-num">11</div>
<div class="step-label">Hash Maps & Sets</div>
<div class="step-desc">Frequency counting, Two Sum</div>
</a>
<a href="stacks-queues.html" class="roadmap-step">
<div class="step-num">12</div>
<div class="step-label">Stacks & Queues</div>
<div class="step-desc">LIFO, FIFO, monotonic stack</div>
</a>
<a href="linked-lists.html" class="roadmap-step">
<div class="step-num">13</div>
<div class="step-label">Linked Lists</div>
<div class="step-desc">Fast/slow pointers, reversal, cycles</div>
</a>
</div>
<div class="cards">
<a href="pre-algebra.html" class="card">
<div class="icon">🔢</div>
<h3>Pre-Algebra</h3>
<p>Numbers, BODMAS, fractions, decimals, percentages, ratios, exponents, and negative numbers.</p>
<span class="tag green">Start Here</span>
</a>
<a href="algebra.html" class="card">
<div class="icon">📐</div>
<h3>Algebra</h3>
<p>Variables, equations, functions, polynomials, quadratics, logarithms, and exponent rules.</p>
<span class="tag green">Phase 1</span>
</a>
<a href="sequences-series.html" class="card">
<div class="icon">📊</div>
<h3>Sequences & Series</h3>
<p>Arithmetic and geometric progressions, sum formulas, n(n+1)/2, and why nested loops are O(n²).</p>
<span class="tag green">Phase 1</span>
</a>
<a href="geometry.html" class="card">
<div class="icon">📏</div>
<h3>Geometry</h3>
<p>Shapes, angles, area, volume, trigonometry, coordinate geometry, and transformations.</p>
<span class="tag green">Phase 1</span>
</a>
<a href="binary-systems.html" class="card">
<div class="icon">01</div>
<h3>Binary & Number Systems</h3>
<p>Binary, hex, octal, bitwise operations (AND, OR, XOR), bit manipulation, how data is stored as bytes, and C++ bitwise programming.</p>
<span class="tag green">Phase 1</span>
</a>
<a href="linux.html" class="card">
<div class="icon">🐧</div>
<h3>Learn Linux</h3>
<p>What Linux is, the kernel and shell, directory structure, apt, Bash scripting, .bashrc, and ANSI terminal codes.</p>
<span class="tag green">Phase 1</span>
</a>
<a href="git.html" class="card">
<div class="icon">🔀</div>
<h3>Master Git</h3>
<p>Git internals, branches as pointers, the DAG, rebase, cherry-pick, reset vs revert, reflog, and GitHub CLI.</p>
<span class="tag green">Phase 1</span>
</a>
<a href="javascript.html" class="card">
<div class="icon">🟨</div>
<h3>JavaScript Deep Dive</h3>
<p>V8 engine, execution context, closures, prototypes, the event loop, Proxy/Reflect, ES6+, modules, and memory management.</p>
<span class="tag green">Phase 1</span>
</a>
<a href="dsa-foundations.html" class="card">
<div class="icon">🧱</div>
<h3>DSA Foundations</h3>
<p>Everything from zero: what data structures are, time complexity with the math, every core structure, algorithms, and a problem-solving framework.</p>
<span class="tag green">Phase 1</span>
</a>
<a href="arrays.html" class="card">
<div class="icon">📊</div>
<h3>Arrays & Strings</h3>
<p>Array operations, two pointers, sliding window, prefix sum, and string manipulation.</p>
<span class="tag green">Phase 1</span>
</a>
<a href="hashmaps.html" class="card">
<div class="icon">🗂️</div>
<h3>Hash Maps & Sets</h3>
<p>Hash map internals, frequency counting, Two Sum, Group Anagrams, and building from scratch.</p>
<span class="tag green">Phase 1</span>
</a>
<a href="stacks-queues.html" class="card">
<div class="icon">📚</div>
<h3>Stacks & Queues</h3>
<p>LIFO and FIFO structures, implementations, deques, and monotonic stack patterns.</p>
<span class="tag green">Phase 1</span>
</a>
<a href="linked-lists.html" class="card">
<div class="icon">🔗</div>
<h3>Linked Lists</h3>
<p>Singly and doubly linked lists, fast/slow pointers, reversal, and cycle detection.</p>
<span class="tag green">Phase 1</span>
</a>
</div>
<div class="tip-box" style="margin-top: 1.5rem;">
<div class="label">Phase 1 LeetCode Target</div>
<p>2-3 Easy problems per day. Focus on Arrays, Strings, Hash Maps. Time yourself: 20 min per Easy. If stuck after 20 min, read the solution, understand it, then redo it tomorrow.</p>
</div>
<!-- ============================================================ -->
<!-- PHASE 2: CORE CS -->
<!-- ============================================================ -->
<h2 class="section-title">Phase 2 -- Core Computer Science</h2>
<p>The real CS begins. Advanced math, trees, graphs, DP, and understanding how computers actually work at the OS and network level. This is where you go from beginner to competent.</p>
<div class="roadmap">
<a href="discrete-math.html" class="roadmap-step">
<div class="step-num">14</div>
<div class="step-label">Discrete Math</div>
<div class="step-desc">Logic, sets, proofs, combinatorics</div>
</a>
<a href="calculus.html" class="roadmap-step">
<div class="step-num">15</div>
<div class="step-label">Calculus</div>
<div class="step-desc">Limits, derivatives, integrals</div>
</a>
<a href="linear-algebra.html" class="roadmap-step">
<div class="step-num">16</div>
<div class="step-label">Linear Algebra</div>
<div class="step-desc">Vectors, matrices, transformations</div>
</a>
<a href="probability.html" class="roadmap-step">
<div class="step-num">17</div>
<div class="step-label">Probability & Statistics</div>
<div class="step-desc">Bayes, distributions, expected value</div>
</a>
<a href="trees.html" class="roadmap-step">
<div class="step-num">18</div>
<div class="step-label">Trees & BST</div>
<div class="step-desc">Traversals, DFS, BFS, balanced trees</div>
</a>
<a href="graphs.html" class="roadmap-step">
<div class="step-num">19</div>
<div class="step-label">Graphs</div>
<div class="step-desc">BFS, DFS, Dijkstra's, topo sort</div>
</a>
<a href="sorting.html" class="roadmap-step">
<div class="step-num">20</div>
<div class="step-label">Sorting & Searching</div>
<div class="step-desc">All sorts, binary search variants</div>
</a>
<a href="patterns.html" class="roadmap-step">
<div class="step-num">21</div>
<div class="step-label">LeetCode Patterns</div>
<div class="step-desc">All 13 patterns, sweep line, greedy</div>
</a>
<a href="dp.html" class="roadmap-step">
<div class="step-num">22</div>
<div class="step-label">Dynamic Programming</div>
<div class="step-desc">Top-down, bottom-up, 1D/2D, knapsack</div>
</a>
<a href="advanced.html" class="roadmap-step">
<div class="step-num">23</div>
<div class="step-label">Advanced Topics</div>
<div class="step-desc">Heaps, tries, union-find, segment trees</div>
</a>
</div>
<div class="cards">
<a href="discrete-math.html" class="card">
<div class="icon">🧠</div>
<h3>Discrete Math</h3>
<p>Logic, sets, proofs, counting, graph theory, Big-O notation, and recurrence relations.</p>
<span class="tag orange">Phase 2</span>
</a>
<a href="calculus.html" class="card">
<div class="icon">📈</div>
<h3>Calculus</h3>
<p>Limits, derivatives, integrals, and their applications in CS and machine learning.</p>
<span class="tag orange">Phase 2</span>
</a>
<a href="linear-algebra.html" class="card">
<div class="icon">🔀</div>
<h3>Linear Algebra</h3>
<p>Vectors, matrices, eigenvalues, transformations, and applications in ML and graphics.</p>
<span class="tag orange">Phase 2</span>
</a>
<a href="probability.html" class="card">
<div class="icon">🎲</div>
<h3>Probability & Statistics</h3>
<p>Probability rules, Bayes' theorem, distributions, statistics, and CS applications.</p>
<span class="tag orange">Phase 2</span>
</a>
<a href="typescript.html" class="card">
<div class="icon">🔷</div>
<h3>TypeScript</h3>
<p>Generics, conditional types, mapped types, utility types, infer, keyof, decorators, and tsconfig deep dive.</p>
<span class="tag orange">Phase 2</span>
</a>
<a href="cpp.html" class="card">
<div class="icon">⚙️</div>
<h3>C++</h3>
<p>Data types, pointers (single through triple indirection), RAII, smart pointers, vectors, strings, STL containers, and modern C++ features.</p>
<span class="tag orange">Phase 2</span>
</a>
<a href="trees.html" class="card">
<div class="icon">🌳</div>
<h3>Trees & BST</h3>
<p>Binary search trees, all traversals, DFS, BFS, and balanced tree concepts.</p>
<span class="tag orange">Phase 2</span>
</a>
<a href="graphs.html" class="card">
<div class="icon">🕸️</div>
<h3>Graphs</h3>
<p>BFS, DFS, Dijkstra's, topological sort, union-find, and cycle detection.</p>
<span class="tag orange">Phase 2</span>
</a>
<a href="sorting.html" class="card">
<div class="icon">🔄</div>
<h3>Sorting & Searching</h3>
<p>All sorting algorithms, binary search variants, and built-in sorting pitfalls.</p>
<span class="tag orange">Phase 2</span>
</a>
<a href="patterns.html" class="card">
<div class="icon">🧩</div>
<h3>LeetCode Patterns</h3>
<p>Two pointers, sliding window, backtracking, prefix sum, greedy, sweep line, and the pattern cheat sheet.</p>
<span class="tag orange">Phase 2</span>
</a>
<a href="dp.html" class="card">
<div class="icon">💡</div>
<h3>Dynamic Programming</h3>
<p>Top-down vs bottom-up, 1D and 2D DP, knapsack, LCS, and the 5-step framework.</p>
<span class="tag orange">Phase 2</span>
</a>
<a href="advanced.html" class="card">
<div class="icon">⚡</div>
<h3>Advanced Topics</h3>
<p>Heaps, tries, union-find, segment trees, bit manipulation, and math for interviews.</p>
<span class="tag orange">Phase 2</span>
</a>
<a href="os.html" class="card">
<div class="icon">🖥️</div>
<h3>Operating Systems</h3>
<p>Processes, syscalls, scheduling, threads, locks, virtual memory, paging, file systems, and security.</p>
<span class="tag orange">Phase 2</span>
</a>
<a href="networking.html" class="card">
<div class="icon">🌐</div>
<h3>Networking</h3>
<p>OSI model, TCP/IP, DNS, HTTP/HTTPS, TLS, WebSockets, REST vs GraphQL vs gRPC, and socket programming.</p>
<span class="tag orange">Phase 2</span>
</a>
<a href="nodejs.html" class="card">
<div class="icon">🟢</div>
<h3>Node.js Internals</h3>
<p>V8 + libuv architecture, event loop phases, streams, buffers, child_process, worker threads, and cluster.</p>
<span class="tag orange">Phase 2</span>
</a>
<a href="backend.html" class="card">
<div class="icon">🗄️</div>
<h3>Backend</h3>
<p>Binary data, buffers, streams, transactions, indexes, connection pooling, and database scaling.</p>
<span class="tag orange">Phase 2</span>
</a>
<a href="databases.html" class="card">
<div class="icon">🐘</div>
<h3>PostgreSQL & MySQL</h3>
<p>Setup, CLI, SQL fundamentals, joins, aggregation, database design, normalization, indexes, transactions, ACID, JSONB, connection from Node.js, and schema design exercises.</p>
<span class="tag orange">Phase 2</span>
</a>
<a href="leetcode-650.html" class="card">
<div class="icon">🏋️</div>
<h3>The PythonWithSean 650</h3>
<p>650 curated LeetCode problems organized by topic. Start working through this during Phase 2.</p>
<span class="tag orange">Phase 2</span>
</a>
</div>
<div class="tip-box" style="margin-top: 1.5rem;">
<div class="label">Phase 2 LeetCode Target</div>
<p>2 Medium problems per day. Start the Blind 75 / NeetCode 150. Time yourself: 30 min per Medium. Do the problems in topic order (trees, then graphs, then DP). If you can't solve it in 30 min, study the solution and redo it next week.</p>
</div>
<!-- ============================================================ -->
<!-- PHASE 3: ADVANCED + COMPETITIVE -->
<!-- ============================================================ -->
<h2 class="section-title">Phase 3 -- Advanced & Competitive</h2>
<p>This is where you become dangerous. Advanced math for CP, advanced algorithms that win contests, advanced data structures that solve impossible problems, and production infrastructure skills.</p>
<div class="roadmap">
<a href="number-theory.html" class="roadmap-step">
<div class="step-num">24</div>
<div class="step-label">Number Theory for CP</div>
<div class="step-desc">Fermat's, CRT, combinatorics, FFT</div>
</a>
<a href="string-algorithms.html" class="roadmap-step">
<div class="step-num">25</div>
<div class="step-label">String Algorithms</div>
<div class="step-desc">KMP, Z, Rabin-Karp, edit distance</div>
</a>
<a href="advanced-graphs.html" class="roadmap-step">
<div class="step-num">26</div>
<div class="step-label">Advanced Graphs</div>
<div class="step-desc">MST, SCC, LCA, max flow, bridges</div>
</a>
<a href="advanced-dp.html" class="roadmap-step">
<div class="step-num">27</div>
<div class="step-label">Advanced DP</div>
<div class="step-desc">Tree DP, bitmask, digit, SOS, CHT</div>
</a>
<a href="advanced-ds.html" class="roadmap-step">
<div class="step-num">28</div>
<div class="step-label">Advanced Data Structures</div>
<div class="step-desc">BIT, segment tree, HLD, Mo's</div>
</a>
<a href="computational-geometry.html" class="roadmap-step">
<div class="step-num">29</div>
<div class="step-label">Computational Geometry</div>
<div class="step-desc">Convex hull, sweep line, intersections</div>
</a>
<a href="game-theory.html" class="roadmap-step">
<div class="step-num">30</div>
<div class="step-label">Game Theory</div>
<div class="step-desc">Nim, Sprague-Grundy, minimax</div>
</a>
</div>
<div class="cards">
<a href="number-theory.html" class="card">
<div class="icon">#</div>
<h3>Number Theory for CP</h3>
<p>Fast exponentiation, Fermat's little theorem, extended Euclidean, Euler's totient, CRT, combinatorics (nCr mod p), Catalan numbers, matrix exponentiation, FFT, and Mobius inversion.</p>
<span class="tag red">Phase 3</span>
</a>
<a href="string-algorithms.html" class="card">
<div class="icon">abc</div>
<h3>String Algorithms</h3>
<p>KMP, Z-algorithm, Rabin-Karp hashing, edit distance (Levenshtein), suffix arrays, Aho-Corasick, Manacher's, string DP, and real-world applications like typing accuracy and fuzzy matching.</p>
<span class="tag red">Phase 3</span>
</a>
<a href="advanced-graphs.html" class="card">
<div class="icon">◆</div>
<h3>Advanced Graphs</h3>
<p>MST (Kruskal/Prim), bridges and articulation points, SCCs (Tarjan/Kosaraju), LCA (binary lifting), max flow (Dinic's), bipartite matching, Euler paths, Floyd-Warshall, and 2-SAT.</p>
<span class="tag red">Phase 3</span>
</a>
<a href="advanced-dp.html" class="card">
<div class="icon">∞</div>
<h3>Advanced DP</h3>
<p>DP on trees, bitmask DP, digit DP, interval DP, SOS DP, convex hull trick, divide and conquer optimization, Knuth's optimization, and profile DP.</p>
<span class="tag red">Phase 3</span>
</a>
<a href="advanced-ds.html" class="card">
<div class="icon">★</div>
<h3>Advanced Data Structures</h3>
<p>Fenwick trees (BIT), segment trees with lazy propagation, sparse tables, heavy-light decomposition, centroid decomposition, treaps, Li Chao trees, Mo's algorithm, and persistent structures.</p>
<span class="tag red">Phase 3</span>
</a>
<a href="computational-geometry.html" class="card">
<div class="icon">△</div>
<h3>Computational Geometry</h3>
<p>Cross products, convex hull, point-in-polygon, line segment intersection, closest pair, sweep line, polygon area, rotating calipers, and half-plane intersection.</p>
<span class="tag red">Phase 3</span>
</a>
<a href="game-theory.html" class="card">
<div class="icon">♟</div>
<h3>Game Theory</h3>
<p>Combinatorial game theory, Nim and Nim-sum, Sprague-Grundy theorem, Grundy numbers, minimax, alpha-beta pruning, Wythoff's game, and common CP game problems.</p>
<span class="tag red">Phase 3</span>
</a>
<a href="competitive-programming.html" class="card">
<div class="icon">🏆</div>
<h3>CP Roadmap</h3>
<p>Full competitive programming roadmap: Regular to Legendary tier algorithms, practice platforms, tournaments with prizes, and weekly training schedule.</p>
<span class="tag red">Phase 3</span>
</a>
<a href="golang.html" class="card">
<div class="icon">🐹</div>
<h3>Go (Golang)</h3>
<p>Go fundamentals, structs, interfaces, goroutines & channels, building HTTP backends, CLIs, testing, and concurrency patterns.</p>
<span class="tag red">Phase 3</span>
</a>
<a href="system-design.html" class="card">
<div class="icon">🏗️</div>
<h3>System Design</h3>
<p>Requirements gathering, estimation, components, trade-offs, and the system design interview framework.</p>
<span class="tag red">Phase 3</span>
</a>
<a href="docker.html" class="card">
<div class="icon">🐳</div>
<h3>Docker & Compose</h3>
<p>Containers from scratch -- images, Dockerfiles, volumes, networking, Compose, and production best practices.</p>
<span class="tag red">Phase 3</span>
</a>
<a href="cloud.html" class="card">
<div class="icon">☁️</div>
<h3>Cloud & Infrastructure</h3>
<p>AWS/GCP/Azure, compute & storage, serverless, CI/CD, Terraform, load balancers, CDNs, and managed databases.</p>
<span class="tag red">Phase 3</span>
</a>
<a href="kubernetes.html" class="card">
<div class="icon">☸️</div>
<h3>Kubernetes</h3>
<p>Container orchestration -- Pods, Deployments, Services, scaling, self-healing, YAML configs, and kubectl.</p>
<span class="tag red">Phase 3</span>
</a>
<a href="message-queues.html" class="card">
<div class="icon">📨</div>
<h3>Queues & Pub/Sub</h3>
<p>Message queues, Pub/Sub patterns, RabbitMQ, Apache Kafka, consumer groups, and event-driven architecture.</p>
<span class="tag red">Phase 3</span>
</a>
<a href="selfhosting.html" class="card">
<div class="icon">🏠</div>
<h3>VPS & Self-Hosting</h3>
<p>Set up a VPS from scratch, SSH keys, firewalls, reverse proxies, SSL, Docker deployments, and self-hosted tools.</p>
<span class="tag red">Phase 3</span>
</a>
<a href="stripe.html" class="card">
<div class="icon">💳</div>
<h3>Stripe & Payments</h3>
<p>How payments work, Payment Intents, Checkout, Elements, subscriptions, webhooks, testing, security, PCI compliance, and full Node.js integration examples.</p>
<span class="tag red">Phase 3</span>
</a>
<a href="distributed-systems.html" class="card">
<div class="icon">🌍</div>
<h3>Distributed Systems</h3>
<p>CAP theorem, consensus (Raft/Paxos), replication, sharding, consistent hashing, distributed transactions (2PC/sagas), gossip protocols, caching, rate limiting, idempotency, and observability.</p>
<span class="tag red">Phase 3</span>
</a>
<a href="backend-engineering.html" class="card">
<div class="icon">⚙</div>
<h3>Backend Engineering</h3>
<p>REST APIs, middleware, JWT/OAuth auth, rate limiting (token bucket, sliding window), pagination, caching (Redis), WebSockets, event-driven architecture, RabbitMQ, BullMQ, error handling, and deployment patterns.</p>
<span class="tag red">Phase 3</span>
</a>
</div>
<div class="tip-box" style="margin-top: 1.5rem;">
<div class="label">Phase 3 LeetCode + CP Target</div>
<p>1-2 Hard problems per day. Virtual contests on Codeforces/AtCoder weekly. Work through The 650 Problems. Target: Codeforces 1400+ rating. Start entering real competitions (ICPC, Google Code Jam, Meta Hacker Cup).</p>
</div>
<!-- ============================================================ -->
<!-- PHASE 4: ECOSYSTEM + SHIPPING -->
<!-- ============================================================ -->
<h2 class="section-title">Phase 4 -- Ecosystem & Shipping</h2>
<p>You know the theory. Now build real things. Master your ecosystem tooling, testing, and ship production software.</p>
<div class="cards">
<a href="js-tooling.html" class="card">
<div class="icon">🔧</div>
<h3>Tooling & Bundlers</h3>
<p>npm/yarn/pnpm, package.json, Webpack, Vite, esbuild, Babel, SWC, module resolution, linting, and monorepos.</p>
<span class="tag">Phase 4</span>
</a>
<a href="js-testing.html" class="card">
<div class="icon">🧪</div>
<h3>Testing</h3>
<p>Vitest, Jest, mocking, spies, async testing, HTTP API testing, snapshots, coverage, TDD, and Playwright for E2E.</p>
<span class="tag">Phase 4</span>
</a>
<a href="ts-projects.html" class="card">
<div class="icon">🏗️</div>
<h3>Building with TS</h3>
<p>Build CLIs, TUIs with Ink, HTTP APIs (Express/Fastify/Hono), SDKs, npm publishing, and Docker for TS.</p>
<span class="tag">Phase 4</span>
</a>
</div>
<!-- RESOURCES -->
<h2 class="section-title">Free Resources</h2>
<p>The best free resources to supplement your learning. Use these alongside this site.</p>
<div class="cards">
<a href="https://www.youtube.com/@ProfessorLeonard" target="_blank" class="card">
<div class="icon">🎓</div>
<h3>Professor Leonard</h3>
<p>Full-length university lectures on Pre-Algebra through Calculus III. The best maths teacher on YouTube -- explains everything from fundamentals with patience and clarity.</p>
<span class="tag green">Highly Recommended</span>
</a>
<a href="https://www.khanacademy.org/math" target="_blank" class="card">
<div class="icon">📖</div>
<h3>Khan Academy</h3>
<p>Free video lessons and practice for every maths topic from arithmetic to linear algebra. Perfect for filling gaps.</p>
</a>
<a href="https://www.youtube.com/@3blue1brown" target="_blank" class="card">
<div class="icon">🎬</div>
<h3>3Blue1Brown</h3>
<p>Beautiful visual explanations of linear algebra, calculus, and more. Watch Essence of Linear Algebra and Essence of Calculus.</p>
</a>
<a href="https://neetcode.io" target="_blank" class="card">
<div class="icon">💻</div>
<h3>NeetCode</h3>
<p>Curated LeetCode roadmap with video explanations for every problem. The best free DSA resource.</p>
</a>
<a href="https://leetcode.com/problemset/" target="_blank" class="card">
<div class="icon">🏆</div>
<h3>LeetCode</h3>
<p>Practice coding problems sorted by topic, difficulty, and company.</p>
</a>
<a href="https://visualgo.net" target="_blank" class="card">
<div class="icon">👁️</div>
<h3>VisualGo</h3>
<p>Animated visualizations of data structures and algorithms. See exactly how they work step by step.</p>
</a>
</div>
<!-- FAITH & CODE -->
<h2 class="section-title">Faith & Code</h2>
<p>Programming is a craft that glorifies God when you use it to serve others, build discipline, and steward the mind He gave you. Here are some ways to keep your faith at the center of your dev journey.</p>
<div class="cards">
<a href="https://www.bible.com/reading-plans" target="_blank" class="card">
<div class="icon">📖</div>
<h3>YouVersion Reading Plans</h3>
<p>Start your coding day with Scripture. Short daily reading plans to keep God first. Try "Devotions for Developers" or any plan that fits your season.</p>
<span class="tag green">Daily</span>
</a>
<a href="https://www.faithtech.com" target="_blank" class="card">
<div class="icon">✝️</div>
<h3>FaithTech</h3>
<p>A global community of Christians in tech. Meetups, hackathons, and projects that use technology to serve the Kingdom.</p>
<span class="tag green">Community</span>
</a>
<a href="https://www.yourmorningbasket.com/blog/devotions-for-tech-workers" target="_blank" class="card">
<div class="icon">🙏</div>
<h3>Dev Devotionals</h3>
<p>"Whatever you do, work at it with all your heart, as working for the Lord." — Colossians 3:23. Let your grind honor God.</p>
</a>
</div>
<div class="strategy-list">
<ul>
<li>
<div class="num">✝️</div>
<div><strong>Pray before you code.</strong> Ask God for wisdom, patience, and focus. He cares about your craft.</div>
</li>
<li>
<div class="num">📖</div>
<div><strong>Read Scripture daily.</strong> Even 10 minutes in the Word before grinding LeetCode sets the right foundation.</div>
</li>
<li>
<div class="num">🤝</div>
<div><strong>Build for others.</strong> Use your skills to serve your church, community, and people who need help. That's the real flex.</div>
</li>
<li>
<div class="num">⏰</div>
<div><strong>Rest on the Sabbath.</strong> God designed rest. Taking a day off from grinding makes the other 6 days more productive.</div>
</li>
<li>
<div class="num">💪</div>
<div><strong>Discipline = Discipleship.</strong> The same discipline that makes you a cracked programmer makes you a stronger follower of Christ. "No discipline seems pleasant at the time, but later it produces a harvest of righteousness." — Hebrews 12:11</div>
</li>
</ul>
</div>
<!-- AI & LEARNING -->
<h2 class="section-title">AI Won't Make You a Better Engineer -- You Will</h2>
<p>There's a growing narrative that you should just let AI write all your code and "focus on reviewing." That advice is for senior engineers who already paid the price of learning. As a student or early-career dev, <strong>you haven't built the mental models yet.</strong> Here's the truth:</p>
<ul class="strategy-list">
<li>
<div class="num">1</div>
<div><strong>You can't debug what you don't understand.</strong> If AI writes a function using p-limit, concurrency patterns, or design patterns you've never seen -- and it breaks -- you're stuck. You'll stare at the error with no idea where to even start. The engineer who wrote it themselves would trace the bug in minutes because they understand the <em>why</em> behind every line.</div>
</li>
<li>
<div class="num">2</div>
<div><strong>Reading docs IS the learning.</strong> When you let AI skip the docs for you, you skip the part where real understanding happens. Reading the p-limit README teaches you about concurrency, promise throttling, and resource management. That knowledge compounds over years. AI-generated code gives you the answer but steals the lesson.</div>
</li>
<li>
<div class="num">3</div>
<div><strong>"Just review the AI code" assumes you already know what good code looks like.</strong> You build that judgment by writing bad code, hitting walls, reading error messages, and figuring out why things break. There's no shortcut. Reviewing code you couldn't have written yourself is just reading -- not learning.</div>
</li>
<li>
<div class="num">4</div>
<div><strong>Lack of context creates fundamental bugs.</strong> AI doesn't understand your codebase the way you do (or should). It generates plausible-looking code that might work in isolation but breaks in your specific architecture. If you don't understand the context yourself, you'll ship those bugs to production and not know why things are failing.</div>
</li>
<li>
<div class="num">5</div>
<div><strong>The fundamentals are the point right now.</strong> As a student, your job isn't to ship fast -- it's to build the mental models that let you ship fast <em>for the rest of your career</em>. Every function you write yourself, every doc you read, every bug you trace -- that's an investment that pays dividends for decades.</div>
</li>
</ul>
<div class="tip-box" style="margin-top: 1.5rem;">
<div class="label">The Right Way to Use AI as a Student</div>
<p>
<strong>Use AI as a teacher, not a replacement.</strong> When you hit something you don't understand, that's not a problem -- that's the curriculum.<br><br>
<strong>Write the code yourself first.</strong> Struggle with it. Read the docs. Try and fail. Then if you're truly stuck, ask AI to explain the concept -- not to write the code for you.<br><br>
<strong>If AI already wrote code you don't understand -- go back and learn it.</strong> It's not too late. Open every file, read every function, look up every library. Make the codebase yours. That's how you turn AI-assisted code into real knowledge.<br><br>
<strong>The engineer on LinkedIn already paid the price of learning.</strong> He can review AI code because he spent years writing it himself first. You still need to pay that price. And honestly, paying it now while you're in university is the cheapest it'll ever be.
</p>
</div>
<!-- BACKEND ENGINEERING CARD (was missing) -->
<!-- ============================================================ -->
<!-- PROJECTS THAT MAKE YOU CRACKED -->
<!-- ============================================================ -->
<h2 class="section-title">Projects That Make You Cracked</h2>
<p>These aren't random portfolio projects. Each one <strong>forces you to use real algorithms and systems knowledge</strong> to solve real problems. You can't fake your way through these -- you either understand the algorithm or it doesn't work. Build them in order alongside the phases above.</p>
<div class="tip-box" style="margin-top: 1rem; margin-bottom: 1.5rem;">
<div class="label">The Rule</div>
<p>Every project below has an <strong>algorithmic core</strong> and a <strong>systems core</strong>. You need both. A CRUD app teaches you nothing. A project where you have to implement edit distance, build a B-tree, or design a consistent hashing ring -- that's where growth happens. <strong>No AI when implementing the algorithm.</strong> Use AI for boilerplate and setup, never for the hard part.</p>
</div>
<div class="cards">
<div class="card" style="cursor:default;">
<div class="icon">P1</div>
<h3>Typing Accuracy Service</h3>
<p><strong>The problem you already had.</strong> User listens to audio and types what they hear. You need to determine accuracy.<br><br>
<strong>Algorithms:</strong> Levenshtein distance (edit distance), longest common subsequence, diff algorithm, fuzzy matching with string hashing.<br>
<strong>Systems:</strong> WebSocket for real-time typing, REST API, PostgreSQL for storing results, Redis for session state.<br>
<strong>What you'll learn:</strong> Why your char-map solution was O(1) but wrong, and why edit distance is O(nm) but correct. This is the project that bridges string algorithms to real software.</p>
<span class="tag green">Phase 1-2 -- Start Here</span>
</div>
<div class="card" style="cursor:default;">
<div class="icon">P2</div>
<h3>Key-Value Store (Go)</h3>
<p><strong>You already started this -- finish it and make it production-grade.</strong><br><br>
<strong>Algorithms:</strong> Hash tables with open addressing, B-trees for disk storage, LSM trees, bloom filters for fast negative lookups, LRU cache eviction.<br>
<strong>Systems:</strong> TCP server, serialization/deserialization, file I/O, WAL (write-ahead log) for crash recovery, goroutine-per-connection concurrency.<br>
<strong>Levels:</strong> Level 1: in-memory hashmap with TCP interface. Level 2: persist to disk with B-tree. Level 3: add TTL, LRU eviction. Level 4: add replication to a second node.</p>
<span class="tag orange">Phase 2-3</span>
</div>
<div class="card" style="cursor:default;">
<div class="icon">P3</div>
<h3>URL Shortener with Analytics</h3>
<p><strong>Simple concept, deep execution.</strong><br><br>
<strong>Algorithms:</strong> Base62 encoding, consistent hashing for distribution, HyperLogLog for unique visitor counting, bloom filters to check if URL exists without DB hit.<br>
<strong>Systems:</strong> Rate limiting (sliding window), caching (Redis), database design (PostgreSQL), background job to aggregate analytics, API design.<br>
<strong>What you'll learn:</strong> How to think about scale. What happens when you have 100M URLs? That's where the algorithms matter.</p>
<span class="tag orange">Phase 2</span>
</div>
<div class="card" style="cursor:default;">
<div class="icon">P4</div>
<h3>Search Engine (Go or Node)</h3>
<p><strong>Build a search engine that indexes and searches text documents.</strong><br><br>
<strong>Algorithms:</strong> Inverted index, TF-IDF ranking, trie for autocomplete, string hashing for deduplication, edit distance for "did you mean?" suggestions.<br>
<strong>Systems:</strong> File crawling, concurrent indexing, query parsing, HTTP API for search, pagination with cursor-based approach.<br>
<strong>What you'll learn:</strong> How Google actually works at a basic level. Tries, inverted indexes, and ranking algorithms are used everywhere.</p>
<span class="tag red">Phase 3</span>
</div>
<div class="card" style="cursor:default;">
<div class="icon">P5</div>
<h3>Load Balancer (Go)</h3>
<p><strong>Route HTTP requests across multiple backend servers.</strong><br><br>
<strong>Algorithms:</strong> Round-robin, weighted round-robin, least connections (min-heap), consistent hashing (hash ring with virtual nodes), health check with exponential backoff.<br>
<strong>Systems:</strong> TCP/HTTP proxying, goroutines for concurrent connections, graceful shutdown, connection draining, metrics endpoint.<br>
<strong>What you'll learn:</strong> How NGINX and cloud load balancers work. Consistent hashing is asked in every system design interview.</p>
<span class="tag red">Phase 3</span>
</div>
<div class="card" style="cursor:default;">
<div class="icon">P6</div>
<h3>DNS Resolver from Scratch (Go)</h3>
<p><strong>Send raw UDP packets and resolve domain names.</strong><br><br>
<strong>Algorithms:</strong> Binary parsing (DNS packet format), trie for cache lookup, LRU eviction, recursion (root -> TLD -> authoritative).<br>
<strong>Systems:</strong> UDP sockets, binary protocol implementation, caching with TTL, concurrent request handling.<br>
<strong>What you'll learn:</strong> How the internet actually works at the DNS level. Parsing binary protocols is a skill most web devs never learn.</p>
<span class="tag red">Phase 3</span>
</div>
<div class="card" style="cursor:default;">
<div class="icon">P7</div>
<h3>Rate Limiter Library (Go + Node)</h3>
<p><strong>Publish a real rate limiting library to npm and Go modules.</strong><br><br>
<strong>Algorithms:</strong> Token bucket, sliding window log, sliding window counter, fixed window. Each is a different trade-off.<br>
<strong>Systems:</strong> Redis integration for distributed rate limiting, middleware pattern for Express/Gin, thread safety, benchmarking.<br>
<strong>What you'll learn:</strong> How to build and publish a real library. Rate limiting appears in every backend system.</p>
<span class="tag orange">Phase 2-3</span>
</div>
<div class="card" style="cursor:default;">
<div class="icon">P8</div>
<h3>Database from Scratch (Go)</h3>
<p><strong>The ultimate systems project. Build a simple SQL database.</strong><br><br>
<strong>Algorithms:</strong> B+ tree for indexes, query parsing (recursive descent parser), hash join, sort-merge join, buffer pool (LRU page replacement).<br>
<strong>Systems:</strong> Page-based file storage, WAL for crash recovery, lock manager for transactions, SQL tokenizer and parser.<br>
<strong>What you'll learn:</strong> How PostgreSQL works under the hood. This is the project that separates good engineers from great ones. Only attempt after completing Phase 3 of the site.</p>
<span class="tag red">Phase 3 -- Boss Level</span>
</div>
</div>
<div class="warning-box" style="margin-top: 1.5rem;">
<div class="label">Projects You Should NOT Build Right Now</div>
<p>
<strong>Another CRUD todo app</strong> -- teaches nothing new.<br>
<strong>A portfolio website</strong> -- not engineering, it's design.<br>
<strong>An AI wrapper</strong> -- calling an API is not engineering. The API call is 3 lines. The interesting part is the system around it (queue, caching, rate limiting).<br>
<strong>A "vibe coded" SaaS</strong> -- if AI wrote 90% of it, you learned 10% of it. Ship it for money if you want, but don't count it as learning.
</p>
</div>
<div class="tip-box" style="margin-top: 1.5rem;">
<div class="label">Your Personal Project Order (Starting Today)</div>
<p>
<strong>1. Typing Accuracy Service</strong> -- you already have the problem in your head. Implement Levenshtein distance yourself. Build the WebSocket server. This bridges what you already know to what you need to learn.<br><br>
<strong>2. Finish the KV Store in Go</strong> -- get it to Level 3 (disk persistence + LRU eviction). This is your systems foundation project.<br><br>
<strong>3. URL Shortener</strong> -- quick to build, teaches database design, caching, and rate limiting. Good for interviews.<br><br>
<strong>4. Search Engine OR Load Balancer</strong> -- pick whichever excites you more. Both are Phase 3 projects that will push you hard.<br><br>
<strong>5. Database from Scratch</strong> -- this is the final boss. Attempt this after you've done the others and completed Phase 3 of the site.
</p>
</div>
<!-- LIFE ROADMAP -->
<h2 class="section-title">Your Roadmap -- Just Follow the Site</h2>
<p>The site is organized so that scrolling down IS the roadmap. Phase 1 → Phase 2 → Phase 3 → Phase 4. Go through each card in order. By the time you finish Phase 4, you'll have the math, algorithms, systems knowledge, and practical skills to be a cracked backend and systems engineer.</p>
<div class="tip-box" style="margin-top: 1.5rem;">
<div class="label">How to Use This Site</div>
<p>
<strong>1. Start at Phase 1, card 1.</strong> Open each topic in order. Read it. Do the practice problems. Move to the next card.<br><br>
<strong>2. Don't skip ahead.</strong> Every topic builds on the previous ones. If you skip Discrete Math, you won't understand graph theory. If you skip Binary Systems, bit manipulation problems will destroy you.<br><br>
<strong>3. Do LeetCode alongside.</strong> Each phase has a LeetCode target at the bottom. Hit it daily.<br><br>
<strong>4. The numbered roadmap bars show the exact order.</strong> Follow the numbers 1 through 30. That's it. That's the plan.
</p>
</div>
<div class="tip-box" style="margin-top: 1.5rem;">
<div class="label">The Daily Grind Schedule</div>
<p>
<strong>Morning (30 min):</strong> Bible/prayer. Set your mind right before anything else.<br>
<strong>Morning (30-45 min):</strong> 1 LeetCode problem, timed. No AI. If you solve it, move on. If you can't after 25 min, read the solution approach (not code), then implement it yourself.<br>
<strong>Afternoon (2-3 hrs):</strong> Study from this site -- one topic per session. Read the theory, then do the practice problems by hand. Take notes.<br>
<strong>Evening (1-2 hrs):</strong> Build your current project. Implement one feature per session. The algorithm part gets done without AI. The boilerplate (Express setup, Docker config) is fine with AI.<br>
<strong>Saturday:</strong> Virtual contest (Codeforces Div 2 or LeetCode weekly). Even if you only solve 1-2 problems, that's progress. Review the editorial for every problem you couldn't solve.<br>
<strong>Sunday:</strong> Rest. Church. No code. This is non-negotiable. Burnout is real and it's already hit you. Rest is what makes the other 6 days work.
</p>
</div>
<div class="warning-box" style="margin-top: 1rem;">
<div class="label">When You're Burnt Out (Be Honest With Yourself)</div>
<p>
If you can't focus, if you're watching anime all day, if you're binge eating and lying in bed -- that's burnout, not laziness. It means you've been sprinting too hard without recovery.<br><br>
<strong>The fix is not "try harder."</strong> The fix is: pick ONE thing. Not LeetCode AND networking revision AND SharpSharp AND exams AND job apps. ONE thing per day. Today it might just be "solve one Easy problem." Tomorrow it might be "read one section of this site." Small consistent actions beat heroic sprints every time.<br><br>
<strong>You got a Google internship from Kent.</strong> You've built real software for real clients. You're not behind. You're just tired. Rest, then start small.
</p>
</div>
<!-- LEETCODE STRATEGY -->
<h2 class="section-title">LeetCode Strategy</h2>
<ul class="strategy-list">
<li>
<div class="num">1</div>
<div><strong>Start with Easy problems.</strong> Build confidence and pattern recognition before attempting Medium.</div>
</li>
<li>
<div class="num">2</div>
<div><strong>Learn patterns, not solutions.</strong> Understand <em>why</em> a technique works. Patterns transfer; memorized solutions don't.</div>
</li>
<li>
<div class="num">3</div>
<div><strong>Do the Blind 75 / NeetCode 150.</strong> Complete them in topic order rather than randomly.</div>
</li>
<li>
<div class="num">4</div>
<div><strong>Time yourself.</strong> 20 min Easy, 30 min Medium, 45 min Hard. If stuck, look at the solution then redo it the next day.</div>
</li>
<li>
<div class="num">5</div>
<div><strong>Brute force first, then optimize.</strong> A working O(n^2) beats a broken O(n). Start simple, find the bottleneck, improve.</div>
</li>
</ul>
</div>
<footer>
<p>Better Dev -- built for self-learners. Keep going, you've got this.</p>
<p style="margin-top: 1rem; font-size: 0.85rem;"><a href="https://github.com/pythonwithsean/BetterDev/blob/main/index.html" target="_blank" rel="noopener noreferrer" class="edit-link">Edit this page on GitHub <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align: middle; margin-left: 2px;"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg></a></p>
</footer>
<script>
(function(){
var sidebar=document.querySelector('.sidebar');
var backdrop=document.querySelector('.sidebar-backdrop');
var toggleBtn=document.querySelector('.sidebar-toggle');
var closeBtn=document.querySelector('.sidebar-close');
function openSidebar(){
sidebar.classList.add('open');
backdrop.classList.add('visible');
document.body.classList.add('sidebar-open');
toggleBtn.setAttribute('aria-expanded','true');
var si=sidebar.querySelector('.sidebar-search-input');
if(si)si.focus();
}
function closeSidebar(){
sidebar.classList.remove('open');
backdrop.classList.remove('visible');
document.body.classList.remove('sidebar-open');
toggleBtn.setAttribute('aria-expanded','false');
}
if(toggleBtn)toggleBtn.addEventListener('click',function(){
sidebar.classList.contains('open')?closeSidebar():openSidebar();
});
if(closeBtn)closeBtn.addEventListener('click',closeSidebar);
if(backdrop)backdrop.addEventListener('click',closeSidebar);
document.addEventListener('keydown',function(e){
if(e.key==='Escape'&&sidebar.classList.contains('open'))closeSidebar();
});
// Active page detection
var currentPage=window.location.pathname.split('/').pop()||'index.html';
var navLinks=document.querySelectorAll('.sidebar-nav a');
for(var i=0;i<navLinks.length;i++){
if(navLinks[i].getAttribute('href')===currentPage)navLinks[i].classList.add('active');
}
// Search
var input=document.querySelector('.sidebar-search-input');
var box=document.querySelector('.sidebar-search-results');
if(!input||!box)return;
var links=[].slice.call(document.querySelectorAll('.sidebar-nav a'));
var topics=links.map(function(a){return{text:a.textContent.trim(),href:a.getAttribute('href')};});
var idx=-1;
function render(q){
if(!q){box.classList.remove('visible');box.innerHTML='';idx=-1;return;}
var lc=q.toLowerCase();
var matches=topics.filter(function(t){return t.text.toLowerCase().indexOf(lc)!==-1;});
if(matches.length===0){box.innerHTML='<div class="no-results">No topics found</div>';box.classList.add('visible');idx=-1;return;}
box.innerHTML=matches.map(function(m){return'<a href="'+m.href+'">'+m.text+'</a>';}).join('');
box.classList.add('visible');
idx=-1;
}
function highlight(items){
for(var i=0;i<items.length;i++){items[i].classList.toggle('highlighted',i===idx);}
}
input.addEventListener('input',function(){render(this.value);});
input.addEventListener('keydown',function(e){
var items=box.querySelectorAll('a');
if(!items.length)return;
if(e.key==='ArrowDown'){e.preventDefault();idx=Math.min(idx+1,items.length-1);highlight(items);items[idx].scrollIntoView({block:'nearest'});}
else if(e.key==='ArrowUp'){e.preventDefault();idx=Math.max(idx-1,0);highlight(items);items[idx].scrollIntoView({block:'nearest'});}
else if(e.key==='Enter'&&idx>=0){e.preventDefault();items[idx].click();}
});
input.addEventListener('blur',function(){setTimeout(function(){box.classList.remove('visible');idx=-1;},200);});
input.addEventListener('focus',function(){if(this.value)render(this.value);});
})();
</script>
</body>
</html>