-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathstudy-guide.html
More file actions
1810 lines (1705 loc) · 119 KB
/
study-guide.html
File metadata and controls
1810 lines (1705 loc) · 119 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
999
1000
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Programming Study Guide</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header class="site-header">
<div class="site-header-inner">
<a class="site-brand" href="index.html">LearnToCode</a>
<nav class="site-nav" aria-label="Primary">
<a class="site-nav-link" href="index.html">Home</a>
<a class="site-nav-link" href="workshop.html">Workshop</a>
<a class="site-nav-link" href="about.html">About</a>
</nav>
</div>
</header>
<div class="guide-page-shell">
<aside class="card guide-sidebar" aria-label="Study guide navigation">
<h2>Study Guide Navigation</h2>
<p>Jump directly to any language or track.</p>
<nav class="guide-sidebar-links">
<a class="sidebar-topic-link" data-topic="bash" href="study-guide.html?topic=bash">Bash / Shell</a>
<a class="sidebar-topic-link" data-topic="csharp" href="study-guide.html?topic=csharp">C#</a>
<a class="sidebar-topic-link" data-topic="cpp" href="study-guide.html?topic=cpp">C++</a>
<a class="sidebar-topic-link" data-topic="aiassist" href="study-guide.html?topic=aiassist">AI Coding Assistants</a>
<a class="sidebar-topic-link" data-topic="cloudkit" href="study-guide.html?topic=cloudkit">CloudKit</a>
<a class="sidebar-topic-link" data-topic="dart" href="study-guide.html?topic=dart">Dart + Flutter</a>
<a class="sidebar-topic-link" data-topic="firebase" href="study-guide.html?topic=firebase">Firebase</a>
<a class="sidebar-topic-link" data-topic="go" href="study-guide.html?topic=go">Go</a>
<a class="sidebar-topic-link" data-topic="web" href="study-guide.html?topic=web">HTML + CSS + JavaScript</a>
<a class="sidebar-topic-link" data-topic="ides" href="study-guide.html?topic=ides">IDEs</a>
<a class="sidebar-topic-link" data-topic="java" href="study-guide.html?topic=java">Java</a>
<a class="sidebar-topic-link" data-topic="kotlin" href="study-guide.html?topic=kotlin">Kotlin</a>
<a class="sidebar-topic-link" data-topic="markdown" href="study-guide.html?topic=markdown">Markdown</a>
<a class="sidebar-topic-link" data-topic="php" href="study-guide.html?topic=php">PHP</a>
<a class="sidebar-topic-link" data-topic="python" href="study-guide.html?topic=python">Python</a>
<a class="sidebar-topic-link" data-topic="react" href="study-guide.html?topic=react">React</a>
<a class="sidebar-topic-link" data-topic="rust" href="study-guide.html?topic=rust">Rust</a>
<a class="sidebar-topic-link" data-topic="sql" href="study-guide.html?topic=sql">SQL</a>
<a class="sidebar-topic-link" data-topic="sourcecontrol" href="study-guide.html?topic=sourcecontrol">Source Control</a>
<a class="sidebar-topic-link" data-topic="swift" href="study-guide.html?topic=swift">Swift + SwiftUI</a>
<a class="sidebar-topic-link" data-topic="typescript" href="study-guide.html?topic=typescript">TypeScript</a>
</nav>
</aside>
<main class="app guide-layout">
<header class="header card">
<h1>Study Guide</h1>
<p>
This guide was written specifically for this project to match the quiz topics.
Read a section first, then return to the quiz.
</p>
<p class="study-link-wrap">
<a id="backToQuizLink" class="study-link" href="index.html">Back to Language Options</a>
</p>
<section class="guide-readability-controls" aria-label="Guide readability controls">
<div class="guide-controls-row">
<button type="button" id="guideExpandAllBtn" class="study-link secondary">Expand All Sections</button>
<button type="button" id="guideCollapseAllBtn" class="study-link secondary">Collapse All Sections</button>
<button type="button" id="guideFocusModeBtn" class="study-link secondary">Enable Focus Mode</button>
</div>
<div class="guide-controls-row">
<label for="guideJumpSelect">Jump to section</label>
<select id="guideJumpSelect" class="blank-input"></select>
</div>
<p id="guideReadabilityStatus" class="guide-readability-status">Readability mode ready.</p>
</section>
</header>
<section class="card architecture-prep-card" id="learningSystemCard">
<h2>Zero-to-Proficient Learning System (Start Here)</h2>
<p>
If you have never coded before, use this exact framework first. If you already code,
use it as a skills-gap checklist to make sure your fundamentals are complete.
</p>
<h3>Learning Loop (Use Every Day)</h3>
<ul>
<li><strong>1) Read:</strong> Study one small topic at a time (about 20-30 minutes) from the selected language section.</li>
<li><strong>2) Reproduce:</strong> Type the concept yourself from memory, not copy/paste, and run it until it works.</li>
<li><strong>3) Explain:</strong> Write a 2-3 sentence plain-English explanation of what the code does and why.</li>
<li><strong>4) Modify:</strong> Change one variable, condition, or input and predict the output before running it.</li>
<li><strong>5) Reflect:</strong> Log one mistake you made and one pattern you learned so tomorrow starts stronger.</li>
</ul>
<h3>Beginner Roadmap (0-12 Weeks)</h3>
<ul>
<li><strong>Weeks 1-2:</strong> Learn syntax, variables, conditionals, loops, and functions; build tiny daily exercises and focus on understanding output.</li>
<li><strong>Weeks 3-4:</strong> Practice data structures and basic problem solving; create 2-3 small console or browser mini-projects.</li>
<li><strong>Weeks 5-6:</strong> Learn debugging workflow and error handling; fix broken snippets and document root cause + fix path.</li>
<li><strong>Weeks 7-8:</strong> Build one intermediate project with clear modules/components and reusable functions.</li>
<li><strong>Weeks 9-10:</strong> Add tests, logging, and input validation; make your code robust under bad inputs and edge cases.</li>
<li><strong>Weeks 11-12:</strong> Ship a portfolio-ready capstone with README, architecture notes, and a post-project lessons learned report.</li>
</ul>
<h3>Practice Types You Should Rotate</h3>
<ul>
<li><strong>Vocabulary drills:</strong> Build fluency with language terms, syntax forms, and common APIs.</li>
<li><strong>True/false checks:</strong> Validate conceptual understanding quickly before writing code.</li>
<li><strong>Code-writing reps:</strong> Write short snippets daily so syntax and patterns become automatic.</li>
<li><strong>Debug reps:</strong> Intentionally fix incorrect code to build confidence under real pressure.</li>
<li><strong>Output prediction:</strong> Predict first, run second, compare third to improve reasoning skill.</li>
</ul>
<h3>Beginner Rules That Accelerate Progress</h3>
<ul>
<li><strong>Small scope wins:</strong> Finish tiny projects end-to-end before starting bigger ones.</li>
<li><strong>Consistency over intensity:</strong> One focused hour daily beats occasional long sessions.</li>
<li><strong>No silent confusion:</strong> When stuck, write exactly what you expected vs what happened.</li>
<li><strong>Build while learning:</strong> Every concept should connect to a feature in a real mini-project.</li>
<li><strong>Track mastery:</strong> Revisit weak topics every week until you can teach them clearly.</li>
</ul>
</section>
<section class="card interview-prep-card hidden" id="moduleFocusCard">
<h2 id="moduleFocusTitle">Module Study Focus</h2>
<p id="moduleFocusIntro">Study these focus points before starting the module quiz.</p>
<ul id="moduleFocusList"></ul>
<p class="study-link-wrap">
<a id="startModuleQuizLink" class="study-link" href="trainer.html">Start Module Quiz</a>
</p>
</section>
<section class="card interview-prep-card" id="languageOverviewCard">
<h2 id="guideOverviewTitle">Language Snapshot</h2>
<p id="guideOverviewSubtitle">Choose a language to see its quick snapshot before you start quiz modules.</p>
<h3>Main Use</h3>
<p id="guideOverviewMainUse">Select a language to see what it is most commonly used for.</p>
<h3>Brief History</h3>
<p id="guideOverviewHistory">Select a language to see a short history timeline.</p>
<h3>Popular Industries</h3>
<ul id="guideOverviewIndustries">
<li>Select a language to see where it is commonly used in industry.</li>
</ul>
</section>
<section class="card interview-prep-card" id="interviewPrepCard">
<h2 id="interviewTitle">Interview Prep</h2>
<p id="interviewIntro">Choose a language to see focused interview tips and common test problems.</p>
<h3>Tips</h3>
<ul id="interviewTipsList"></ul>
<h3>Common Problems / Tests</h3>
<ul id="interviewTestsList"></ul>
</section>
<section class="card architecture-prep-card" id="architecturePrepCard">
<h2 id="architectureTitle">Architecture Styles</h2>
<p id="architectureIntro">Learn common architecture patterns and where they fit best.</p>
<h3>Common Patterns (General)</h3>
<ul id="architecturePatternsList"></ul>
<h3>Best Fit for This Language</h3>
<ul id="architectureLanguageList"></ul>
</section>
<section class="card architecture-prep-card" id="completionPrepCard">
<h2 id="completionTitle">Course Completion Pack</h2>
<p id="completionIntro">Use this section to finish each language like a real curriculum, not just a quiz track.</p>
<h3>Capstone Milestones</h3>
<ul id="completionMilestonesList"></ul>
<h3>Production Skills Checklist</h3>
<ul id="completionProductionList"></ul>
<h3>Portfolio Outcome</h3>
<ul id="completionPortfolioList"></ul>
<h3>Assessment Rubric</h3>
<ul id="completionRubricList"></ul>
</section>
<section class="card architecture-prep-card" id="proDepthCard">
<h2>Seasoned Coder Depth Track (Advanced Practice)</h2>
<p>
If you already code, use this track to level up architecture quality, performance,
reliability, and mentoring skills while still sharpening fundamentals.
</p>
<h3>Advanced Weekly Structure</h3>
<ul>
<li><strong>2 sessions:</strong> Deep implementation work (feature build or refactor with measurable outcomes).</li>
<li><strong>1 session:</strong> Performance and observability pass (profiling, logs, bottleneck review, optimization notes).</li>
<li><strong>1 session:</strong> Reliability pass (failure modes, retries, edge-case testing, error taxonomy cleanup).</li>
<li><strong>1 session:</strong> Architecture/documentation pass (design decisions, tradeoffs, and operational readiness).</li>
</ul>
<h3>Engineering Depth Checklist</h3>
<ul>
<li><strong>Architecture:</strong> Can you justify boundaries, interfaces, and dependency direction under change?</li>
<li><strong>Performance:</strong> Do you know top latency/memory hotspots and why they exist?</li>
<li><strong>Reliability:</strong> Are failures observable, recoverable, and user-safe by default?</li>
<li><strong>Security mindset:</strong> Are inputs validated, secrets protected, and dangerous operations constrained?</li>
<li><strong>Maintainability:</strong> Could a teammate ship a safe change in your code within one day?</li>
</ul>
<h3>Deliberate Practice for Senior Growth</h3>
<ul>
<li><strong>Refactor kata:</strong> Take one messy module each week and improve readability, testability, and boundaries.</li>
<li><strong>Failure drills:</strong> Simulate bad network/data/runtime conditions and verify graceful degradation behavior.</li>
<li><strong>Complexity audits:</strong> Identify high-branch or deeply nested logic and simplify with clearer models.</li>
<li><strong>Review writing:</strong> Practice concise code review feedback that explains risk, impact, and suggested fix.</li>
<li><strong>Teaching reps:</strong> Explain one advanced concept to beginners weekly to strengthen your own mental models.</li>
</ul>
<h3>Project Ladder (Beginner to Advanced)</h3>
<ul>
<li><strong>Level 1:</strong> Small utilities and focused exercises (single-file or single-feature projects).</li>
<li><strong>Level 2:</strong> Multi-feature apps with reusable components/modules and clear folder boundaries.</li>
<li><strong>Level 3:</strong> Data-backed apps with robust validation, error handling, and test coverage.</li>
<li><strong>Level 4:</strong> Production-style apps with monitoring, performance tuning, and architecture documentation.</li>
</ul>
</section>
<section class="guide-grid">
<article class="card guide-section" data-topic="swift">
<h2>Swift + SwiftUI</h2>
<h3>Core Mindset</h3>
<ul>
<li><strong>Value-first thinking:</strong> In Swift, many models are structs (value types), which helps avoid accidental shared mutations.</li>
<li><strong>State drives UI:</strong> In SwiftUI, your interface should be a function of data, not a sequence of manual UI updates.</li>
<li><strong>Type safety:</strong> Let the compiler help you early by keeping types explicit when learning.</li>
</ul>
<h3>Beginner</h3>
<ul>
<li><strong>let vs var:</strong> Use <em>let</em> for constants and <em>var</em> for values that can change.</li>
<li><strong>Text view:</strong> <em>Text("Hello")</em> is a basic SwiftUI view for showing text.</li>
<li><strong>Simple output:</strong> You can print values with <em>print(name)</em> in Swift.</li>
<li><strong>View composition:</strong> Build screens from small reusable views instead of one large body.</li>
<li><strong>Type basics:</strong> Swift commonly uses types like <em>String</em>, <em>Int</em>, and <em>Bool</em> for clear, safe code.</li>
<li><strong>Optionals:</strong> A value like <em>String?</em> can be missing (<em>nil</em>), so safely unwrap with <em>if let</em> or <em>guard let</em>.</li>
<li><strong>Functions:</strong> Keep functions short and purpose-driven, for example one function per user intent.</li>
<li><strong>Naming:</strong> Prefer clear labels like <em>fetchCities()</em> over vague names like <em>doWork()</em>.</li>
</ul>
<h3>Medium</h3>
<ul>
<li><strong>@State and @ObservedObject:</strong> @State is local to a view; @ObservedObject watches external model changes.</li>
<li><strong>Data flow:</strong> Parent views own source-of-truth state and pass data down to children.</li>
<li><strong>Layout strategy:</strong> Combine VStack/HStack/ZStack with Spacer and padding for predictable layouts.</li>
<li><strong>Derived UI:</strong> Keep UI derived from state rather than manually toggling visual values.</li>
<li><strong>@Binding usage:</strong> Pass bindings to child views when they need controlled write access to parent-owned state.</li>
<li><strong>View models:</strong> Move non-trivial business logic out of views into dedicated model/view-model types.</li>
<li><strong>Computed properties:</strong> Use computed values for display text and filtered arrays to keep <em>body</em> clean.</li>
<li><strong>Control flow views:</strong> Use <em>if</em>, <em>switch</em>, and <em>ForEach</em> to express dynamic interfaces declaratively.</li>
</ul>
<h3>Advanced</h3>
<ul>
<li><strong>@Binding architecture:</strong> Use @Binding to expose controlled write-access from child to parent state.</li>
<li><strong>Concurrency model:</strong> Use <em>async/await</em>, <em>Task</em>, and <em>@MainActor</em> for responsive UIs and safe updates.</li>
<li><strong>Modeling data:</strong> Prefer small structs and protocols (for example <em>Identifiable</em>) for scalable list rendering.</li>
<li><strong>Performance thinking:</strong> Keep view bodies lightweight and avoid expensive work during rendering.</li>
<li><strong>Networking models:</strong> Use <em>Codable</em> models with async networking to decode API responses safely.</li>
<li><strong>Error strategy:</strong> Use <em>do/catch</em> with user-friendly messages and retry pathways.</li>
<li><strong>Task cancellation:</strong> Be aware async tasks may cancel when a view disappears; design around cancellation safely.</li>
<li><strong>Protocol-oriented design:</strong> Depend on protocols in services to improve testability and maintainability.</li>
<li><strong>Testing direction:</strong> Unit test pure logic and model transformations before snapshot/UI tests.</li>
</ul>
<h3>Common Swift/SwiftUI Mistakes</h3>
<ul>
<li>Mutating state from multiple places without a clear owner.</li>
<li>Doing heavy work directly in <em>body</em> instead of precomputing values.</li>
<li>Forgetting optional handling and forcing unwraps (<em>!</em>) too early.</li>
<li>Overusing global singletons instead of dependency injection.</li>
</ul>
<h3>Mini Syntax Reference</h3>
<ul>
<li><strong>Constant:</strong> <em>let city = "Tokyo"</em></li>
<li><strong>Variable:</strong> <em>var score = 0</em></li>
<li><strong>Optional binding:</strong> <em>if let name = optionalName { ... }</em></li>
<li><strong>State:</strong> <em>@State private var count = 0</em></li>
<li><strong>Binding:</strong> <em>@Binding var isOn: Bool</em></li>
<li><strong>Async call:</strong> <em>let data = try await service.load()</em></li>
</ul>
<h3>SwiftUI Previews (Important)</h3>
<ul>
<li><strong>What previews are:</strong> SwiftUI previews let you render your view in Xcode without running the full app on a simulator each time.</li>
<li><strong>Why they matter:</strong> They speed up UI iteration and make it easier to check spacing, text wrapping, and state-driven layout changes quickly.</li>
<li><strong>Typical shape:</strong> A preview provider (or preview macro in modern templates) creates one or more sample view states.</li>
<li><strong>Best practice:</strong> Preview multiple states (empty/loading/error/populated) so UI issues show up before integration.</li>
<li><strong>Workflow tip:</strong> Keep preview data lightweight and deterministic so design and debugging feedback stays fast.</li>
</ul>
<h3>Deep-Dive Practice Ideas</h3>
<ul>
<li>Create a small task app with add/remove actions and local persistence.</li>
<li>Build a reusable row component and pass actions with closures.</li>
<li>Load data asynchronously, display loading/error states, and retry on failure.</li>
<li>Build a city explorer with favorites, search, and grouped sections.</li>
<li>Create a settings screen that persists user preferences with sensible defaults.</li>
<li>Add accessibility labels and dynamic type support for key controls.</li>
</ul>
<h3>Swift Debugging Workflow</h3>
<ul>
<li><strong>Compiler first:</strong> Resolve compile errors top-to-bottom; one fix often clears multiple errors below.</li>
<li><strong>Print strategically:</strong> Log state changes before and after actions to verify data flow assumptions.</li>
<li><strong>Isolate view logic:</strong> Move computed display logic into properties/functions to debug them separately.</li>
<li><strong>Reproduce quickly:</strong> Create a minimal failing example in a tiny view before touching full screens.</li>
</ul>
<h3>SwiftUI TestFlight + App Store Release Flow</h3>
<ul>
<li><strong>Release config first:</strong> Confirm bundle identifier, version/build numbers, signing team, and capabilities are correct in Xcode before archive.</li>
<li><strong>Archive and validate:</strong> Build a Release archive in Xcode Organizer, then run validation checks to catch signing and metadata issues early.</li>
<li><strong>Upload to App Store Connect:</strong> Distribute the archive to App Store Connect and wait for processing before attaching it to a TestFlight build.</li>
<li><strong>Internal TestFlight:</strong> Start with internal testers for fast checks on crashes, onboarding, and critical user paths.</li>
<li><strong>External TestFlight:</strong> Add test notes, export compliance details, and submit the build for beta review before inviting external testers.</li>
<li><strong>Crash and analytics loop:</strong> Review crashes, hangs, and feedback every build cycle; ship fixes with clear release notes and incremented build numbers.</li>
<li><strong>App Store readiness:</strong> Prepare app privacy, screenshots, age rating, app description, and support URL before final submission.</li>
<li><strong>Submission + rollout:</strong> Submit for App Review, monitor rejection feedback quickly, then release manually or phased rollout after approval.</li>
<li><strong>Post-release discipline:</strong> Watch crash-free rate, login/payment success paths, and update cadence in the first 48 hours after launch.</li>
</ul>
<h3>Production Essentials (Swift Developer Checklist)</h3>
<ul>
<li><strong>Architecture choices:</strong> Keep feature boundaries clear with testable services, view models, and protocol-driven dependencies.</li>
<li><strong>Memory discipline:</strong> Understand ARC strongly/weakly captured references and avoid retain cycles in closures.</li>
<li><strong>Concurrency safety:</strong> Use <em>Task</em>, <em>TaskGroup</em>, and cancellation-aware workflows; keep UI updates on <em>@MainActor</em>.</li>
<li><strong>Networking quality:</strong> Build resilient URLSession clients with retries, timeout strategy, and typed <em>Codable</em> decoding.</li>
<li><strong>Error modeling:</strong> Normalize backend and local failures into user-safe states with meaningful recovery options.</li>
<li><strong>Dependency management:</strong> Prefer Swift Package Manager with pinned versions and modular package boundaries.</li>
<li><strong>Observability:</strong> Add structured logs, analytics events, and crash monitoring for real production diagnosis.</li>
</ul>
<h3>Data, Persistence, and Sync</h3>
<ul>
<li><strong>Local models first:</strong> Model app state with clear entities before wiring network sync.</li>
<li><strong>Persistence options:</strong> Use SwiftData/Core Data intentionally based on complexity, relationships, and query needs.</li>
<li><strong>Offline behavior:</strong> Design for no-network scenarios with cached reads and deterministic retry strategies.</li>
<li><strong>Conflict strategy:</strong> Define merge rules for simultaneous updates so users do not lose data unexpectedly.</li>
<li><strong>Cloud sync boundaries:</strong> Separate private user data from shared/public data and enforce ownership rules.</li>
<li><strong>CloudKit fit:</strong> Prefer CloudKit for Apple-first apps needing iCloud identity, private/shared databases, and platform-native sync.</li>
<li><strong>Firebase fit:</strong> Prefer Firebase when you need cross-platform auth/data services and faster multi-platform backend iteration.</li>
<li><strong>Backend decision skill:</strong> Be able to explain tradeoffs (cost, lock-in, offline behavior, security rules, and team expertise) in interviews.</li>
<li><strong>Migrations:</strong> Plan schema evolution and migration testing early to avoid data loss in app updates.</li>
</ul>
<h3>Job-Readiness Basics (Must-Have for Entry Roles)</h3>
<ul>
<li><strong>State modeling:</strong> Implement idle/loading/success/error states without ambiguous UI transitions.</li>
<li><strong>Networking fundamentals:</strong> Build one clean service layer with URLSession, Codable decoding, retries, and typed errors.</li>
<li><strong>Persistence fundamentals:</strong> Persist and restore user-critical data safely across app restarts.</li>
<li><strong>Testing fundamentals:</strong> Write unit tests for view-model/service logic and show you can prevent regressions.</li>
<li><strong>Debugging fundamentals:</strong> Reproduce bugs, isolate root cause, and explain fix verification steps clearly.</li>
<li><strong>Architecture fundamentals:</strong> Keep view code thin and isolate business logic behind protocol-driven boundaries.</li>
<li><strong>Security fundamentals:</strong> Store sensitive tokens in Keychain and validate untrusted inputs before state mutation.</li>
<li><strong>Delivery fundamentals:</strong> Ship a small app with README, setup steps, architecture notes, and known tradeoffs.</li>
</ul>
<h3>Quality, Security, and Accessibility</h3>
<ul>
<li><strong>Testing pyramid:</strong> Prioritize unit tests for business logic, integration tests for services, and targeted UI tests for critical flows.</li>
<li><strong>Secure storage:</strong> Keep secrets and tokens in Keychain, not plain UserDefaults.</li>
<li><strong>Input hardening:</strong> Validate inputs and server responses at trust boundaries before state mutation.</li>
<li><strong>Privacy readiness:</strong> Request minimal permissions and keep data collection transparent and intentional.</li>
<li><strong>Accessibility baseline:</strong> Ensure VoiceOver labels, Dynamic Type support, and sufficient contrast for key interactions.</li>
<li><strong>Localization mindset:</strong> Externalize strings and test layout behavior across longer translated text.</li>
</ul>
<h3>Course Path Alignment</h3>
<ul>
<li><strong>Guided Start (Modules 1-4):</strong> Learn variables, optionals, arrays, loops, and SwiftUI layout basics.</li>
<li><strong>Debug Lab (Modules 5-7):</strong> Add state management and debug data flow with @State, @Binding, and observable models.</li>
<li><strong>Output Mastery (Modules 8-10):</strong> Predict and validate output for async work, computed views, and user interactions.</li>
<li><strong>Advanced Lab (Modules 11-14):</strong> Improve architecture, accessibility, and performance with production-style patterns.</li>
</ul>
<h3>Swift Self-Check</h3>
<ul>
<li>Can you explain the difference between source of truth and derived values in your UI?</li>
<li>Can you model a screen state clearly (idle/loading/success/error)?</li>
<li>Can you write a small async function and handle failures cleanly?</li>
<li>Can you refactor duplicated view code into a reusable component?</li>
</ul>
</article>
<article class="card guide-section" data-topic="web">
<h2>HTML + CSS + JavaScript</h2>
<p><strong>Full names:</strong> HTML = HyperText Markup Language, CSS = Cascading Style Sheets, and JS = JavaScript.</p>
<h3>Core Mindset</h3>
<ul>
<li><strong>Structure, style, behavior:</strong> HTML defines meaning, CSS defines presentation, JavaScript defines interaction.</li>
<li><strong>Progressive enhancement:</strong> Start with usable HTML first, then layer styles and interactivity.</li>
<li><strong>Debug in layers:</strong> Check markup, then styles, then script behavior instead of guessing.</li>
</ul>
<h3>Beginner</h3>
<ul>
<li><strong>HTML:</strong> Gives your page structure, like headings, paragraphs, and buttons.</li>
<li><strong>CSS:</strong> Controls appearance, such as colors, spacing, and layout.</li>
<li><strong>Basic markup:</strong> A heading can be written as <em><h1>Hello Web</h1></em>.</li>
<li><strong>Separation of concerns:</strong> Keep structure (HTML), styling (CSS), and behavior (JS) logically separated.</li>
<li><strong>Semantic elements:</strong> Tags like <em><header></em>, <em><main></em>, and <em><footer></em> improve readability and accessibility.</li>
<li><strong>Links and forms:</strong> Learn anchors, labels, inputs, and buttons early—they power most websites.</li>
<li><strong>Selector basics:</strong> Class selectors are reusable, IDs should be unique and used intentionally.</li>
<li><strong>DevTools habit:</strong> Inspect elements to see computed styles and layout boundaries.</li>
</ul>
<h3>Medium</h3>
<ul>
<li><strong>Block scope:</strong> In JavaScript, <em>let</em> and <em>const</em> are block-scoped and safer than <em>var</em> in many cases.</li>
<li><strong>DOM events:</strong> Use <em>addEventListener</em> and keep handlers small, predictable, and testable.</li>
<li><strong>CSS box model:</strong> Understand content, padding, border, margin to avoid layout bugs.</li>
<li><strong>State sync:</strong> Keep UI state mirrored in JS variables and update the DOM from that state.</li>
<li><strong>Array transforms:</strong> Practice <em>map</em>, <em>filter</em>, and <em>find</em> to write cleaner data logic.</li>
<li><strong>Component-like patterns:</strong> Build repeatable UI blocks using functions and template strings.</li>
<li><strong>Form handling:</strong> Validate input on submit and provide clear inline error messages.</li>
<li><strong>Responsive design:</strong> Pair relative units with media queries to support phones and desktops.</li>
</ul>
<h3>Advanced</h3>
<ul>
<li><strong>Grid vs Flexbox:</strong> Grid handles two-dimensional systems; Flexbox is ideal for one-dimensional alignment.</li>
<li><strong>Async flows:</strong> Use <em>fetch</em> with <em>async/await</em> and always handle errors.</li>
<li><strong>DOM performance:</strong> Batch updates and avoid unnecessary reflows in large UIs.</li>
<li><strong>Accessibility:</strong> Use semantic HTML, labels, focus states, and keyboard-friendly interactions.</li>
<li><strong>Cross-origin basics:</strong> Understand CORS when calling APIs hosted on a different domain.</li>
<li><strong>Error resilience:</strong> Build loading, empty, and error states as first-class UI states.</li>
<li><strong>Event delegation:</strong> Handle many child events efficiently by listening on a shared parent.</li>
<li><strong>Security basics:</strong> Avoid injecting unsanitized user input into the DOM.</li>
<li><strong>Performance budget:</strong> Reduce bundle size, defer non-critical scripts, and lazy-load heavy assets.</li>
</ul>
<h3>Common Web Mistakes</h3>
<ul>
<li>Using non-semantic divs for everything and losing document meaning.</li>
<li>Skipping keyboard navigation and visible focus indicators.</li>
<li>Mixing data fetching, rendering, and state mutation in one giant function.</li>
<li>Hard-coding layout dimensions that break on smaller screens.</li>
</ul>
<h3>Mini Syntax Reference</h3>
<ul>
<li><strong>Query element:</strong> <em>document.querySelector('.card')</em></li>
<li><strong>Add event:</strong> <em>button.addEventListener('click', handler)</em></li>
<li><strong>Toggle class:</strong> <em>node.classList.toggle('active')</em></li>
<li><strong>Map array:</strong> <em>items.map((item) => item.name)</em></li>
<li><strong>Fetch JSON:</strong> <em>const data = await response.json()</em></li>
<li><strong>Grid layout:</strong> <em>display: grid; grid-template-columns: 1fr 1fr;</em></li>
</ul>
<h3>Deep-Dive Practice Ideas</h3>
<ul>
<li>Build a searchable list that filters as users type.</li>
<li>Create a responsive dashboard using Grid for macro layout and Flexbox for components.</li>
<li>Fetch remote data, show loading/error/success states, and cache results in memory.</li>
<li>Create an accessible modal with escape-key close and focus trapping.</li>
<li>Build a multi-section form with live validation and summary review.</li>
<li>Implement client-side pagination for large datasets.</li>
</ul>
<h3>Web Debugging Workflow</h3>
<ul>
<li><strong>Inspect DOM:</strong> Confirm the expected elements exist before writing event logic.</li>
<li><strong>Trace events:</strong> Log event targets and values to verify handlers fire when expected.</li>
<li><strong>Check computed styles:</strong> Use browser tools to identify overrides and layout constraints.</li>
<li><strong>Validate data shape:</strong> Confirm API responses and guard against missing fields.</li>
</ul>
<h3>Course Path Alignment</h3>
<ul>
<li><strong>Guided Start (Modules 1-4):</strong> Build semantic HTML pages and core CSS layout foundations.</li>
<li><strong>Debug Lab (Modules 5-7):</strong> Debug DOM interactions, event handlers, and styling conflicts.</li>
<li><strong>Output Mastery (Modules 8-10):</strong> Predict runtime behavior for scripts, async fetch flows, and UI state changes.</li>
<li><strong>Advanced Lab (Modules 11-14):</strong> Improve accessibility, performance, and maintainable architecture patterns.</li>
</ul>
<h3>Web Self-Check</h3>
<ul>
<li>Can your UI be used with keyboard only (no mouse)?</li>
<li>Can you explain why a layout should use Grid vs Flexbox in a given case?</li>
<li>Can you recover gracefully when API calls fail or return empty data?</li>
<li>Can you break large scripts into small reusable functions?</li>
</ul>
</article>
<article class="card guide-section" data-topic="react">
<h2>React</h2>
<h3>Core Mindset</h3>
<ul>
<li><strong>UI as a function of state:</strong> Prefer deriving output from state instead of manual DOM manipulation.</li>
<li><strong>Composable components:</strong> Build small components with clear inputs and outputs.</li>
<li><strong>Predictable updates:</strong> Embrace immutable updates so change detection is reliable.</li>
</ul>
<h3>Beginner</h3>
<ul>
<li><strong>JSX:</strong> A syntax extension for writing UI markup in JavaScript.</li>
<li><strong>Components:</strong> Reusable UI pieces, usually named with a capital letter.</li>
<li><strong>Return UI:</strong> A function component returns JSX, such as an h1 element.</li>
<li><strong>One-way data flow:</strong> Parent components pass values down through props.</li>
<li><strong>Fragments:</strong> Use React fragments to return multiple siblings without adding extra DOM nodes.</li>
<li><strong>Props discipline:</strong> Treat props as read-only inputs and avoid mutating them.</li>
<li><strong>Conditional rendering:</strong> Use short-circuit checks and ternaries for simple display logic.</li>
<li><strong>Event handlers:</strong> Pass functions to events and avoid invoking them directly during render.</li>
</ul>
<h3>Medium</h3>
<ul>
<li><strong>useState:</strong> Stores local state and should be updated immutably.</li>
<li><strong>useEffect:</strong> Coordinates side effects such as logging, subscriptions, and API requests.</li>
<li><strong>Dependencies:</strong> Effect dependency arrays define when effects should rerun.</li>
<li><strong>Component boundaries:</strong> Keep components focused and lift state when multiple children need shared data.</li>
<li><strong>List rendering:</strong> Provide stable <em>key</em> values so React can track list item identity.</li>
<li><strong>Derived state:</strong> Compute values during render when possible instead of storing duplicate state.</li>
<li><strong>Controlled inputs:</strong> Bind input values to state for predictable form behavior.</li>
<li><strong>Effect cleanup:</strong> Return cleanup functions for subscriptions, intervals, or listeners.</li>
</ul>
<h3>Advanced</h3>
<ul>
<li><strong>Memoization:</strong> Use <em>useMemo</em> and <em>useCallback</em> only when they solve real re-render costs.</li>
<li><strong>Keys in lists:</strong> Stable keys improve reconciliation and preserve state correctly.</li>
<li><strong>Custom hooks:</strong> Extract repeated stateful logic (for example <em>useToggle</em>, <em>useFetch</em>).</li>
<li><strong>State architecture:</strong> Know when local state is enough and when context or external state libraries are justified.</li>
<li><strong>Context strategy:</strong> Use Context API for shared app-wide values while avoiding unnecessary provider nesting.</li>
<li><strong>Render performance:</strong> Profile before optimizing and target expensive branches instead of global memoization.</li>
<li><strong>Error boundaries:</strong> Catch rendering failures in subtrees to keep the rest of the app usable.</li>
<li><strong>Server interactions:</strong> Distinguish client UI state from server data lifecycle concerns.</li>
<li><strong>State machines:</strong> For complex flows, model explicit states and transitions.</li>
</ul>
<h3>Common React Mistakes</h3>
<ul>
<li>Mutating arrays/objects in state and expecting React to re-render correctly.</li>
<li>Using unstable keys (like array index) for reorderable lists.</li>
<li>Creating effects for logic that could run directly during render.</li>
<li>Passing deeply nested props instead of lifting or using context thoughtfully.</li>
</ul>
<h3>Mini Syntax Reference</h3>
<ul>
<li><strong>State:</strong> <em>const [count, setCount] = useState(0)</em></li>
<li><strong>Effect:</strong> <em>useEffect(() => { ... }, [deps])</em></li>
<li><strong>Conditional:</strong> <em>{isOpen ? <Panel /> : null}</em></li>
<li><strong>List:</strong> <em>items.map((item) => <Row key={item.id} />)</em></li>
<li><strong>Memoized value:</strong> <em>useMemo(() => compute(data), [data])</em></li>
<li><strong>Custom hook:</strong> <em>function useToggle() { ... }</em></li>
</ul>
<h3>Deep-Dive Practice Ideas</h3>
<ul>
<li>Build a multi-step form with validation and derived error messages.</li>
<li>Create a custom data-fetching hook with loading, error, and retry support.</li>
<li>Profile re-renders and optimize only the bottlenecks.</li>
<li>Build a kanban board with drag ordering and persisted state.</li>
<li>Create a reusable modal system using composition and portals.</li>
<li>Implement optimistic UI updates for create/update actions.</li>
</ul>
<h3>React Debugging Workflow</h3>
<ul>
<li><strong>Check props/state first:</strong> Most UI bugs come from data assumptions, not JSX syntax.</li>
<li><strong>Watch render triggers:</strong> Log when components render and why dependencies changed.</li>
<li><strong>Verify effect intent:</strong> Ensure each effect has one responsibility and correct cleanup.</li>
<li><strong>Reduce complexity:</strong> Reproduce bugs in smaller components to isolate state boundaries.</li>
</ul>
<h3>Course Path Alignment</h3>
<ul>
<li><strong>Guided Start (Modules 1-4):</strong> Learn JSX, props, and component composition fundamentals.</li>
<li><strong>Debug Lab (Modules 5-7):</strong> Debug useState updates, controlled inputs, and effect dependency issues.</li>
<li><strong>Output Mastery (Modules 8-10):</strong> Predict re-render behavior and output changes from state transitions.</li>
<li><strong>Advanced Lab (Modules 11-14):</strong> Extract custom hooks, scale shared state, and optimize performance intentionally.</li>
</ul>
<h3>React Self-Check</h3>
<ul>
<li>Can you explain why a component re-renders in a specific interaction?</li>
<li>Can you avoid mutating state and produce immutable updates confidently?</li>
<li>Can you decide when logic belongs in render vs useEffect?</li>
<li>Can you extract repeated stateful behavior into a clean custom hook?</li>
</ul>
</article>
<article class="card guide-section" data-topic="python">
<h2>Python</h2>
<h3>Core Mindset</h3>
<ul>
<li><strong>Readability first:</strong> Python rewards clear naming, small functions, and straightforward control flow.</li>
<li><strong>Use built-ins well:</strong> Lists, dicts, sets, and comprehensions solve many problems without heavy abstractions.</li>
<li><strong>Fast feedback loops:</strong> Validate assumptions with small tests or quick REPL checks early.</li>
</ul>
<h3>Beginner</h3>
<ul>
<li><strong>Data basics:</strong> Variables, strings, numbers, lists/tuples, and conditional branching.</li>
<li><strong>Function shape:</strong> Define clear functions with <em>def</em>, predictable params, and explicit returns.</li>
<li><strong>Loop fluency:</strong> Use <em>for</em>, <em>while</em>, and <em>enumerate</em> intentionally.</li>
</ul>
<h3>Medium</h3>
<ul>
<li><strong>Collections and transforms:</strong> Use dict/set operations and list comprehensions for concise logic.</li>
<li><strong>Module boundaries:</strong> Organize utilities into modules and import with clear ownership.</li>
<li><strong>Error strategy:</strong> Use exceptions intentionally, not as hidden control flow.</li>
</ul>
<h3>Advanced</h3>
<ul>
<li><strong>Generators/iterators:</strong> Stream large data efficiently with <em>yield</em>.</li>
<li><strong>Typing for clarity:</strong> Add type hints to improve readability and tooling support.</li>
<li><strong>Production readiness:</strong> Combine logging, tests, and validation for robust scripts/services.</li>
</ul>
<h3>Common Python Mistakes</h3>
<ul>
<li>Mutating shared lists/dicts unexpectedly across functions.</li>
<li>Broad <em>except</em> blocks that hide real errors.</li>
<li>Inconsistent indentation and unclear variable naming.</li>
<li>Skipping tests for edge cases like empty/None inputs.</li>
</ul>
<h3>Mini Syntax Reference</h3>
<ul>
<li><strong>Function:</strong> <em>def add(a, b): return a + b</em></li>
<li><strong>List comprehension:</strong> <em>[x * 2 for x in nums]</em></li>
<li><strong>Dict lookup safe:</strong> <em>value = data.get("key", default)</em></li>
<li><strong>Try/except:</strong> <em>try: ... except ValueError: ...</em></li>
<li><strong>Type hint:</strong> <em>def parse(items: list[str]) -> int:</em></li>
</ul>
<h3>Deep-Dive Practice Ideas</h3>
<ul>
<li>Build a CLI to parse CSV data and summarize metrics.</li>
<li>Implement a small API client with retry and timeout handling.</li>
<li>Refactor procedural code into testable modules/functions.</li>
<li>Solve algorithm drills and annotate complexity choices.</li>
</ul>
<h3>Python Debugging Workflow</h3>
<ul>
<li><strong>Reproduce reliably:</strong> Isolate the smallest input that still fails.</li>
<li><strong>Inspect data shape:</strong> Print/log critical values before and after transformations.</li>
<li><strong>Check assumptions:</strong> Validate None/empty values at boundaries.</li>
<li><strong>Lock behavior:</strong> Add tests after fixing to prevent regression.</li>
</ul>
<h3>Course Path Alignment</h3>
<ul>
<li><strong>Guided Start (Modules 1-4):</strong> Master syntax, functions, and common collections.</li>
<li><strong>Debug Lab (Modules 5-7):</strong> Build scripts with modules and isolate logic/data bugs quickly.</li>
<li><strong>Output Mastery (Modules 8-10):</strong> Practice output prediction for loops, transforms, and conditional flows.</li>
<li><strong>Advanced Lab (Modules 11-14):</strong> Add testing, logging, type hints, and production-style architecture.</li>
</ul>
<h3>Python Self-Check</h3>
<ul>
<li>Can you explain why a dict vs list is better for a task?</li>
<li>Can you handle bad input and still return useful errors?</li>
<li>Can you split a long script into reusable modules?</li>
<li>Can you write tests for both happy-path and edge cases?</li>
</ul>
</article>
<article class="card guide-section" data-topic="typescript">
<h2>TypeScript</h2>
<h3>Core Mindset</h3>
<ul>
<li><strong>Types as design:</strong> Define data contracts first, then implement logic against them.</li>
<li><strong>Compiler as teammate:</strong> Let strict checks catch issues before runtime.</li>
<li><strong>Runtime still matters:</strong> TypeScript improves safety but does not replace input validation.</li>
</ul>
<h3>Beginner</h3>
<ul>
<li><strong>Type annotations:</strong> Primitives, arrays, and object basics with explicit types.</li>
<li><strong>Function contracts:</strong> Add typed params and return values consistently.</li>
<li><strong>Null awareness:</strong> Handle optional values safely from day one.</li>
</ul>
<h3>Medium</h3>
<ul>
<li><strong>Interface/type aliases:</strong> Model shared domain objects clearly.</li>
<li><strong>Unions and narrowing:</strong> Use guards to safely branch by shape/type.</li>
<li><strong>Generics basics:</strong> Reuse logic with type-safe abstractions.</li>
</ul>
<h3>Advanced</h3>
<ul>
<li><strong>Utility patterns:</strong> Leverage <em>Partial</em>, <em>Pick</em>, <em>Omit</em>, and mapped types.</li>
<li><strong>Advanced narrowing:</strong> Build discriminated unions for state machines.</li>
<li><strong>API robustness:</strong> Validate runtime payloads despite compile-time typing.</li>
</ul>
<h3>Common TypeScript Mistakes</h3>
<ul>
<li>Overusing <em>any</em> and losing type safety where it matters most.</li>
<li>Assuming typed API responses are always valid at runtime.</li>
<li>Ignoring nullability warnings until they become runtime failures.</li>
<li>Creating deep generic complexity without readability benefits.</li>
</ul>
<h3>Mini Syntax Reference</h3>
<ul>
<li><strong>Interface:</strong> <em>interface User { id: number; name: string }</em></li>
<li><strong>Union:</strong> <em>type State = "idle" | "loading" | "done"</em></li>
<li><strong>Generic:</strong> <em>function first<T>(items: T[]): T</em></li>
<li><strong>Narrowing:</strong> <em>if (typeof x === "string") { ... }</em></li>
<li><strong>Optional chaining:</strong> <em>user?.profile?.name</em></li>
</ul>
<h3>Deep-Dive Practice Ideas</h3>
<ul>
<li>Type a full API client with request/response interfaces.</li>
<li>Build form validation using discriminated union states.</li>
<li>Refactor any-heavy codebase to strict mode.</li>
<li>Create reusable generic utilities with tests.</li>
</ul>
<h3>TypeScript Debugging Workflow</h3>
<ul>
<li><strong>Compiler first:</strong> Resolve top-most type errors before runtime checks.</li>
<li><strong>Runtime guard next:</strong> Validate external data shape at boundaries.</li>
<li><strong>Narrow aggressively:</strong> Remove ambiguity before property access.</li>
<li><strong>Lock fixes:</strong> Add tests to cover union/null edge cases.</li>
</ul>
<h3>Course Path Alignment</h3>
<ul>
<li><strong>Guided Start (Modules 1-4):</strong> Learn core annotations and function typing.</li>
<li><strong>Debug Lab (Modules 5-7):</strong> Debug unions, narrowing issues, and null/undefined edge cases.</li>
<li><strong>Output Mastery (Modules 8-10):</strong> Predict runtime outcomes from typed contracts and control-flow narrowing.</li>
<li><strong>Advanced Lab (Modules 11-14):</strong> Add generics, utility types, and strict app-boundary validation.</li>
</ul>
<h3>TypeScript Self-Check</h3>
<ul>
<li>Can you model app state without falling back to <em>any</em>?</li>
<li>Can you explain compile-time vs runtime guarantees clearly?</li>
<li>Can you safely narrow unknown data before using it?</li>
<li>Can you build generic utilities that stay readable?</li>
</ul>
</article>
<article class="card guide-section" data-topic="java">
<h2>Java</h2>
<h3>Core Mindset</h3>
<ul>
<li><strong>Object-oriented clarity:</strong> Design around classes, interfaces, and explicit responsibilities.</li>
<li><strong>Type discipline:</strong> Let the compiler enforce contract correctness early.</li>
<li><strong>Maintainable structure:</strong> Prefer clear package boundaries and small focused methods.</li>
</ul>
<h3>Beginner</h3>
<ul>
<li><strong>Syntax foundation:</strong> Main method, variables, loops, conditionals, and output.</li>
<li><strong>Strong typing:</strong> Match declarations and assignments carefully.</li>
<li><strong>Compilation cycle:</strong> Build often and fix first errors first.</li>
</ul>
<h3>Medium</h3>
<ul>
<li><strong>Class modeling:</strong> Constructors, encapsulation, and behavior methods.</li>
<li><strong>Collections:</strong> Use List/Map/Set intentionally based on access patterns.</li>
<li><strong>Abstractions:</strong> Prefer interfaces and composition over deep inheritance.</li>
</ul>
<h3>Advanced</h3>
<ul>
<li><strong>Robust services:</strong> Exceptions, layering, and dependency injection basics.</li>
<li><strong>Modern APIs:</strong> Streams/lambdas for clear data transformations.</li>
<li><strong>Scalability mindset:</strong> Keep business logic testable and decoupled.</li>
</ul>
<h3>Common Java Mistakes</h3>
<ul>
<li>Overusing static/global state and increasing coupling.</li>
<li>Null handling gaps that cause runtime exceptions.</li>
<li>Huge classes that mix data, logic, and transport concerns.</li>
<li>Ignoring collection choice and causing avoidable performance issues.</li>
</ul>
<h3>Mini Syntax Reference</h3>
<ul>
<li><strong>Class:</strong> <em>class User { private String name; }</em></li>
<li><strong>Main:</strong> <em>public static void main(String[] args)</em></li>
<li><strong>List:</strong> <em>List<String> names = new ArrayList<>();</em></li>
<li><strong>Interface:</strong> <em>interface Repository { ... }</em></li>
<li><strong>Stream map:</strong> <em>items.stream().map(...).toList()</em></li>
</ul>
<h3>Deep-Dive Practice Ideas</h3>
<ul>
<li>Build a layered CRUD API with controller/service/repository separation.</li>
<li>Refactor inheritance-heavy code to interface composition.</li>
<li>Implement collection-based coding challenges with complexity notes.</li>
<li>Add unit tests around service logic and edge cases.</li>
</ul>
<h3>Java Debugging Workflow</h3>
<ul>
<li><strong>Compile first:</strong> Clear syntax/type issues before runtime investigation.</li>
<li><strong>Read stack traces:</strong> Start at the first relevant app frame.</li>
<li><strong>Inspect state:</strong> Use debugger/watch expressions for object values.</li>
<li><strong>Add tests:</strong> Reproduce and lock bug fixes in automated tests.</li>
</ul>
<h3>Course Path Alignment</h3>
<ul>
<li><strong>Guided Start (Modules 1-4):</strong> Master syntax and object-oriented fundamentals.</li>
<li><strong>Debug Lab (Modules 5-7):</strong> Debug null, loop, and collection issues in modular class design.</li>
<li><strong>Output Mastery (Modules 8-10):</strong> Predict outputs and side effects across methods, collections, and conditions.</li>
<li><strong>Advanced Lab (Modules 11-14):</strong> Add interfaces, exceptions, layered architecture, and production profiling practices.</li>
</ul>
<h3>Java Self-Check</h3>
<ul>
<li>Can you justify when to use interface vs abstract class?</li>
<li>Can you diagnose null and collection bugs quickly?</li>
<li>Can you keep service logic independent from transport code?</li>
<li>Can you write tests for both success and failure paths?</li>
</ul>
</article>
<article class="card guide-section" data-topic="kotlin">
<h2>Kotlin</h2>
<h3>Core Mindset</h3>
<ul>
<li><strong>Safety + readability:</strong> Kotlin favors concise code with explicit null handling.</li>
<li><strong>Expression-oriented style:</strong> Use <em>when</em>, data classes, and immutable values for clarity.</li>
<li><strong>Async with structure:</strong> Coroutines should be scoped intentionally to avoid lifecycle bugs.</li>
</ul>
<h3>Beginner</h3>
<ul>
<li><strong>Core syntax:</strong> <em>val</em>/<em>var</em>, strings, conditions, loops, and functions.</li>
<li><strong>Null safety:</strong> Practice nullable types, safe-call, and Elvis operator.</li>
<li><strong>Small clean functions:</strong> Prefer expression bodies where it improves readability.</li>
</ul>
<h3>Medium</h3>
<ul>
<li><strong>Data modeling:</strong> Use data classes for domain objects and copy-based updates.</li>
<li><strong>Collection fluency:</strong> <em>map/filter/groupBy</em> pipelines for readable transforms.</li>
<li><strong>Extension functions:</strong> Add utility behavior without polluting core models.</li>
</ul>
<h3>Advanced</h3>
<ul>
<li><strong>Coroutines:</strong> Structured concurrency, cancellation handling, and dispatcher awareness.</li>
<li><strong>State modeling:</strong> Use sealed classes for exhaustive UI/business states.</li>
<li><strong>Android/backend quality:</strong> Keep coroutine and lifecycle boundaries explicit.</li>
</ul>
<h3>Common Kotlin Mistakes</h3>
<ul>
<li>Using <em>!!</em> too often and reintroducing null crashes.</li>
<li>Launching coroutines in the wrong scope and leaking work.</li>
<li>Mixing UI and business logic without clear layer boundaries.</li>
<li>Ignoring immutable data updates and causing state drift.</li>
</ul>
<h3>Mini Syntax Reference</h3>
<ul>
<li><strong>Read-only value:</strong> <em>val name = "Sam"</em></li>
<li><strong>Safe call + fallback:</strong> <em>val len = text?.length ?: 0</em></li>
<li><strong>Data class:</strong> <em>data class User(val id: Int, val name: String)</em></li>
<li><strong>When expression:</strong> <em>val color = when(state) { ... }</em></li>
<li><strong>Suspend function:</strong> <em>suspend fun load(): Result</em></li>
</ul>
<h3>Deep-Dive Practice Ideas</h3>
<ul>
<li>Build a small Android feature with MVVM + repository + coroutine flows.</li>
<li>Model screen state with sealed classes and exhaustive rendering.</li>
<li>Refactor Java-style code to idiomatic Kotlin expressions.</li>
<li>Add tests for coroutine cancellation and error pathways.</li>
</ul>
<h3>Kotlin Debugging Workflow</h3>
<ul>
<li><strong>Nullability first:</strong> Audit all nullable boundaries before runtime assumptions.</li>
<li><strong>Coroutine tracing:</strong> Verify scope, dispatcher, and cancellation behavior.</li>
<li><strong>State exhaustiveness:</strong> Confirm sealed states are fully handled in <em>when</em>.</li>
<li><strong>Regression guard:</strong> Add tests for fixed null/async edge cases.</li>
</ul>
<h3>Course Path Alignment</h3>
<ul>
<li><strong>Guided Start (Modules 1-4):</strong> Learn syntax, null safety, and function basics.</li>
<li><strong>Debug Lab (Modules 5-7):</strong> Debug nullability issues, coroutine scope problems, and state transitions.</li>
<li><strong>Output Mastery (Modules 8-10):</strong> Predict output for collection pipelines and coroutine-driven flows.</li>
<li><strong>Advanced Lab (Modules 11-14):</strong> Build production-ready architecture with tests and resilient async handling.</li>
</ul>
<h3>Kotlin Self-Check</h3>
<ul>
<li>Can you remove unsafe <em>!!</em> usage with safe alternatives?</li>
<li>Can you explain coroutine scope ownership clearly?</li>
<li>Can you model feature states with sealed classes?</li>
<li>Can you keep Android/business logic layered and testable?</li>
</ul>
</article>
<article class="card guide-section" data-topic="markdown">
<h2>Markdown</h2>
<h3>Core Mindset</h3>
<ul>
<li><strong>Readable source first:</strong> Markdown should remain easy to read in plain text before rendering.</li>
<li><strong>Consistent structure:</strong> Use predictable heading levels and section flow for easy scanning.</li>
<li><strong>Docs as product:</strong> Treat documentation clarity and maintenance as part of software quality.</li>
</ul>
<h3>Beginner</h3>
<ul>
<li><strong>Basics:</strong> Headings, paragraphs, bold/italic text, and bullet lists.</li>
<li><strong>Links and images:</strong> Use correct syntax and meaningful alt text.</li>
<li><strong>Spacing:</strong> Keep blank lines where needed so renderers parse sections clearly.</li>
</ul>
<h3>Medium</h3>
<ul>
<li><strong>Tables and code fences:</strong> Present structured data and code snippets readably.</li>
<li><strong>Nested lists and blockquotes:</strong> Organize procedural docs and callouts clearly.</li>
<li><strong>Cross-linking:</strong> Connect related docs to reduce duplicated explanations.</li>
</ul>
<h3>Advanced</h3>
<ul>
<li><strong>Front matter usage:</strong> Use metadata for static docs systems and publishing pipelines.</li>
<li><strong>Documentation IA:</strong> Build coherent section hierarchy across large doc sets.</li>
<li><strong>Maintenance discipline:</strong> Regularly fix stale links, outdated examples, and naming drift.</li>
</ul>
<h3>Common Markdown Mistakes</h3>
<ul>
<li>Skipping heading levels and creating inconsistent document hierarchy.</li>
<li>Broken links/images from moved files without updates.</li>
<li>Unclosed code fences that break rendering for entire sections.</li>
<li>Overly long blocks without subheadings, making docs hard to scan.</li>
</ul>
<h3>Mini Syntax Reference</h3>
<ul>
<li><strong>Heading:</strong> <em>## Section Title</em></li>
<li><strong>Bold:</strong> <em>**important**</em></li>
<li><strong>Link:</strong> <em>[Docs](https://example.com)</em></li>
<li><strong>Image:</strong> <em></em></li>
<li><strong>Code fence:</strong> <em>```js ... ```</em></li>
</ul>
<h3>Deep-Dive Practice Ideas</h3>
<ul>
<li>Rewrite a long README into a cleaner information architecture with skimmable sections.</li>
<li>Create a docs template that includes overview, setup, usage, troubleshooting, and FAQ blocks.</li>
<li>Convert raw meeting notes into structured implementation docs with decisions and action items.</li>
<li>Build a documentation template for headings, code blocks, callouts, and link conventions across your docs repo.</li>
</ul>
<h3>Markdown Debugging Workflow</h3>
<ul>
<li><strong>Render check first:</strong> Preview output and compare against source to find formatting breaks fast.</li>
<li><strong>Isolate syntax errors:</strong> Validate heading levels, blank lines, list indentation, and fence boundaries.</li>
<li><strong>Verify links/assets:</strong> Test relative paths, anchors, and media references after file moves.</li>
<li><strong>Readability pass:</strong> Ensure sections are scannable and action-oriented for first-time readers.</li>
</ul>
<h3>Course Path Alignment</h3>
<ul>
<li><strong>Guided Start (Modules 1-4):</strong> Master headings, lists, links, emphasis, and clean basic structure.</li>
<li><strong>Debug Lab (Modules 5-7):</strong> Fix malformed lists, broken links, and code fence rendering issues.</li>
<li><strong>Output Mastery (Modules 8-10):</strong> Predict rendered output from complex nested Markdown structures.</li>
<li><strong>Advanced Lab (Modules 11-14):</strong> Build scalable documentation systems with strong IA and maintenance workflows.</li>
</ul>
<h3>Markdown Self-Check</h3>
<ul>
<li>Can a teammate skim your doc and find key actions in under 30 seconds?</li>
<li>Do all links and code examples still work after recent changes?</li>
<li>Are headings consistent and logically nested?</li>
<li>Does the source file stay readable in plain text form?</li>
</ul>
</article>
<article class="card guide-section" data-topic="go">
<h2>Go</h2>
<h3>Core Mindset</h3>
<ul>
<li><strong>Simplicity scales:</strong> Prefer clear, explicit code over clever abstractions.</li>
<li><strong>Concurrency with discipline:</strong> Use goroutines/channels intentionally with ownership boundaries.</li>
<li><strong>Errors are values:</strong> Handle failures explicitly and close to where they occur.</li>
</ul>
<h3>Beginner</h3>
<ul>
<li><strong>Syntax basics:</strong> Learn packages, functions, variables, loops, and conditionals.</li>
<li><strong>Structs and methods:</strong> Model data clearly and keep methods focused.</li>
<li><strong>Standard library first:</strong> Build confidence with core packages before adding dependencies.</li>
</ul>
<h3>Medium</h3>
<ul>
<li><strong>Interfaces:</strong> Depend on behavior contracts to improve flexibility and testing.</li>
<li><strong>Package boundaries:</strong> Organize code by responsibilities, not file size.</li>
<li><strong>HTTP fundamentals:</strong> Build handlers, validation, and consistent response patterns.</li>
</ul>
<h3>Advanced</h3>
<ul>
<li><strong>Concurrency control:</strong> Use context cancellation, worker pools, and bounded goroutines.</li>
<li><strong>Observability:</strong> Add structured logs, metrics, and trace context for production reliability.</li>
<li><strong>Performance:</strong> Profile CPU/memory hotspots before optimizing implementations.</li>
</ul>
<h3>Common Go Mistakes</h3>
<ul>
<li>Ignoring returned errors and losing critical failure information.</li>
<li>Leaking goroutines due to missing cancellation or blocked channels.</li>
<li>Overengineering abstractions instead of leveraging straightforward package design.</li>
<li>Mutating shared state without synchronization discipline.</li>
</ul>
<h3>Mini Syntax Reference</h3>
<ul>
<li><strong>Function:</strong> <em>func add(a int, b int) int { return a + b }</em></li>
<li><strong>Struct:</strong> <em>type User struct { ID int; Name string }</em></li>
<li><strong>Interface:</strong> <em>type Store interface { Save(User) error }</em></li>
<li><strong>Goroutine:</strong> <em>go process(item)</em></li>
<li><strong>Error check:</strong> <em>if err != nil { return err }</em></li>
</ul>
<h3>Deep-Dive Practice Ideas</h3>
<ul>
<li>Build a REST API with clean package boundaries, validation, and middleware.</li>
<li>Implement a concurrent job processor with retries and dead-letter handling.</li>
<li>Add context-driven timeouts/cancellation across service layers.</li>
<li>Profile and optimize a high-throughput endpoint under load.</li>
</ul>
<h3>Go Debugging Workflow</h3>
<ul>