Hugging Face's logo

Spaces:
AashishAIHub
/
DataScience
Running

App Files Community
AashishAIHub commited on
Commit
fdbc4cc
·
1 Parent(s): 26201c8

feat: add Azure DevOps & MLOps module with 10 topic cards and 100 interview questions

Browse files

- New AzureDevops/index.html with complete module covering:
DevOps Fundamentals, Azure DevOps Setup, Infrastructure, CI/CD YAML,
Build & Test, Docker, Kubernetes/AKS, Security, MLOps, Monitoring
- Each card has 3 tabs: Key Concepts, Hands-On/YAML, Applications & Interview
- Added module card to landing page with Azure blue accent
- Updated search.js with Azure DevOps topics and path resolution

Files changed (4) hide show
  1. AzureDevops/index.html +1768 -0
  2. index.html +31 -0
  3. shared/css/design-system.css +351 -116
  4. shared/js/search.js +20 -1
AzureDevops/index.html ADDED
@@ -0,0 +1,1768 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Azure DevOps & MLOps Masterclass</title>
8
+
9
+ <!-- Shared Design System -->
10
+ <link rel="stylesheet" href="../shared/css/design-system.css">
11
+ <link rel="stylesheet" href="../shared/css/components.css">
12
+
13
+ <style>
14
+ * {
15
+ margin: 0;
16
+ padding: 0;
17
+ box-sizing: border-box;
18
+ }
19
+
20
+ :root {
21
+ --bg: #0f1419;
22
+ --surface: #1a1f2e;
23
+ --text: #e4e6eb;
24
+ --text-dim: #b0b7c3;
25
+ --cyan: #0078D4;
26
+ --orange: #ff6b35;
27
+ --green: #00ff88;
28
+ --yellow: #ffa500;
29
+ --azure: #0078D4;
30
+ --teal: #00b7c3;
31
+ }
32
+
33
+ body {
34
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
35
+ background: var(--bg);
36
+ color: var(--text);
37
+ line-height: 1.6;
38
+ overflow-x: hidden;
39
+ }
40
+
41
+ .container {
42
+ max-width: 1400px;
43
+ margin: 0 auto;
44
+ padding: 20px;
45
+ }
46
+
47
+ header {
48
+ text-align: center;
49
+ margin-bottom: 40px;
50
+ padding: 30px 0;
51
+ border-bottom: 2px solid var(--azure);
52
+ }
53
+
54
+ h1 {
55
+ font-size: 2.5em;
56
+ background: linear-gradient(135deg, var(--azure), var(--teal));
57
+ background-clip: text;
58
+ -webkit-background-clip: text;
59
+ -webkit-text-fill-color: transparent;
60
+ margin-bottom: 10px;
61
+ }
62
+
63
+ .subtitle {
64
+ color: var(--text-dim);
65
+ font-size: 1.1em;
66
+ }
67
+
68
+ .dashboard {
69
+ display: none;
70
+ }
71
+
72
+ .dashboard.active {
73
+ display: block;
74
+ }
75
+
76
+ .grid {
77
+ display: grid;
78
+ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
79
+ gap: 25px;
80
+ margin: 40px 0;
81
+ }
82
+
83
+ .card {
84
+ background: linear-gradient(135deg, rgba(0, 120, 212, 0.1), rgba(0, 183, 195, 0.1));
85
+ border: 2px solid var(--azure);
86
+ border-radius: 12px;
87
+ padding: 30px;
88
+ cursor: pointer;
89
+ transition: all 0.3s ease;
90
+ text-align: center;
91
+ }
92
+
93
+ .card:hover {
94
+ transform: translateY(-5px);
95
+ box-shadow: 0 10px 30px rgba(0, 120, 212, 0.3);
96
+ border-color: var(--teal);
97
+ }
98
+
99
+ .card-icon {
100
+ font-size: 3em;
101
+ margin-bottom: 15px;
102
+ }
103
+
104
+ .card h3 {
105
+ color: var(--azure);
106
+ font-size: 1.5em;
107
+ margin-bottom: 10px;
108
+ }
109
+
110
+ .card p {
111
+ color: var(--text-dim);
112
+ font-size: 0.95em;
113
+ }
114
+
115
+ .category-label {
116
+ display: inline-block;
117
+ margin-top: 10px;
118
+ padding: 5px 12px;
119
+ background: rgba(0, 120, 212, 0.2);
120
+ border-radius: 20px;
121
+ font-size: 0.85em;
122
+ color: var(--green);
123
+ }
124
+
125
+ .module {
126
+ display: none;
127
+ }
128
+
129
+ .module.active {
130
+ display: block;
131
+ animation: fadeIn 0.3s ease;
132
+ }
133
+
134
+ @keyframes fadeIn {
135
+ from {
136
+ opacity: 0;
137
+ }
138
+
139
+ to {
140
+ opacity: 1;
141
+ }
142
+ }
143
+
144
+ .btn-back {
145
+ padding: 10px 20px;
146
+ background: var(--azure);
147
+ color: white;
148
+ border: none;
149
+ border-radius: 6px;
150
+ cursor: pointer;
151
+ font-weight: 600;
152
+ margin-bottom: 25px;
153
+ transition: all 0.3s ease;
154
+ }
155
+
156
+ .btn-back:hover {
157
+ background: var(--teal);
158
+ }
159
+
160
+ .tabs {
161
+ display: flex;
162
+ gap: 10px;
163
+ margin-bottom: 30px;
164
+ flex-wrap: wrap;
165
+ justify-content: center;
166
+ border-bottom: 1px solid rgba(0, 120, 212, 0.2);
167
+ padding-bottom: 15px;
168
+ overflow-x: auto;
169
+ }
170
+
171
+ .tab-btn {
172
+ padding: 10px 20px;
173
+ background: var(--surface);
174
+ color: var(--text);
175
+ border: 2px solid transparent;
176
+ border-radius: 6px;
177
+ cursor: pointer;
178
+ font-size: 0.95em;
179
+ transition: all 0.3s ease;
180
+ font-weight: 500;
181
+ white-space: nowrap;
182
+ }
183
+
184
+ .tab-btn:hover {
185
+ background: rgba(0, 120, 212, 0.1);
186
+ border-color: var(--azure);
187
+ }
188
+
189
+ .tab-btn.active {
190
+ background: var(--azure);
191
+ color: white;
192
+ border-color: var(--azure);
193
+ }
194
+
195
+ .tab {
196
+ display: none;
197
+ }
198
+
199
+ .tab.active {
200
+ display: block;
201
+ animation: fadeIn 0.3s ease;
202
+ }
203
+
204
+ .section {
205
+ background: var(--surface);
206
+ border: 1px solid rgba(0, 120, 212, 0.2);
207
+ border-radius: 10px;
208
+ padding: 30px;
209
+ margin-bottom: 25px;
210
+ transition: all 0.3s ease;
211
+ }
212
+
213
+ .section:hover {
214
+ border-color: var(--azure);
215
+ box-shadow: 0 0 20px rgba(0, 120, 212, 0.1);
216
+ }
217
+
218
+ h2 {
219
+ color: var(--azure);
220
+ font-size: 1.8em;
221
+ margin-bottom: 15px;
222
+ }
223
+
224
+ h3 {
225
+ color: var(--orange);
226
+ font-size: 1.3em;
227
+ margin-top: 20px;
228
+ margin-bottom: 12px;
229
+ }
230
+
231
+ h4 {
232
+ color: var(--green);
233
+ font-size: 1.1em;
234
+ margin-top: 15px;
235
+ margin-bottom: 10px;
236
+ }
237
+
238
+ p {
239
+ margin-bottom: 15px;
240
+ line-height: 1.8;
241
+ }
242
+
243
+ ul {
244
+ margin-left: 20px;
245
+ margin-bottom: 15px;
246
+ }
247
+
248
+ ul li {
249
+ margin-bottom: 8px;
250
+ }
251
+
252
+ .info-box {
253
+ background: rgba(0, 120, 212, 0.08);
254
+ border: 1px solid rgba(0, 120, 212, 0.2);
255
+ border-radius: 8px;
256
+ padding: 20px;
257
+ margin: 15px 0;
258
+ }
259
+
260
+ .box-title {
261
+ font-weight: bold;
262
+ color: var(--azure);
263
+ margin-bottom: 10px;
264
+ font-size: 1.1em;
265
+ }
266
+
267
+ .box-content {
268
+ color: var(--text-dim);
269
+ line-height: 1.8;
270
+ }
271
+
272
+ .warning-box {
273
+ background: rgba(255, 165, 0, 0.08);
274
+ border: 1px solid rgba(255, 165, 0, 0.3);
275
+ border-radius: 8px;
276
+ padding: 20px;
277
+ margin: 15px 0;
278
+ }
279
+
280
+ .warning-box .box-title {
281
+ color: var(--yellow);
282
+ }
283
+
284
+ table {
285
+ width: 100%;
286
+ border-collapse: collapse;
287
+ margin: 20px 0;
288
+ border-radius: 8px;
289
+ overflow: hidden;
290
+ }
291
+
292
+ th,
293
+ td {
294
+ padding: 12px 16px;
295
+ text-align: left;
296
+ border-bottom: 1px solid rgba(0, 120, 212, 0.15);
297
+ }
298
+
299
+ th {
300
+ background: rgba(0, 120, 212, 0.15);
301
+ color: var(--azure);
302
+ font-weight: 600;
303
+ }
304
+
305
+ td {
306
+ color: var(--text-dim);
307
+ }
308
+
309
+ tr:hover td {
310
+ background: rgba(0, 120, 212, 0.05);
311
+ }
312
+
313
+ .code-block {
314
+ background: #1e1e2e;
315
+ border: 1px solid rgba(0, 120, 212, 0.2);
316
+ border-radius: 8px;
317
+ padding: 20px;
318
+ margin: 15px 0;
319
+ font-family: 'Fira Code', 'Consolas', monospace;
320
+ font-size: 0.9em;
321
+ overflow-x: auto;
322
+ color: #cdd6f4;
323
+ line-height: 1.6;
324
+ }
325
+
326
+ .code-block .comment {
327
+ color: #6c7086;
328
+ }
329
+
330
+ .code-block .keyword {
331
+ color: #cba6f7;
332
+ }
333
+
334
+ .code-block .string {
335
+ color: #a6e3a1;
336
+ }
337
+
338
+ .code-block .key {
339
+ color: #89b4fa;
340
+ }
341
+
342
+ .formula {
343
+ background: rgba(0, 120, 212, 0.08);
344
+ padding: 20px;
345
+ border-radius: 8px;
346
+ margin: 15px 0;
347
+ border-left: 4px solid var(--azure);
348
+ font-family: 'Georgia', serif;
349
+ }
350
+
351
+ .callout {
352
+ padding: 20px;
353
+ border-radius: 8px;
354
+ margin: 15px 0;
355
+ border-left: 4px solid;
356
+ }
357
+
358
+ .callout.insight {
359
+ background: rgba(0, 255, 136, 0.05);
360
+ border-color: var(--green);
361
+ }
362
+
363
+ .callout.insight .callout-title {
364
+ color: var(--green);
365
+ font-weight: bold;
366
+ margin-bottom: 8px;
367
+ }
368
+
369
+ .callout.warning {
370
+ background: rgba(255, 165, 0, 0.05);
371
+ border-color: var(--yellow);
372
+ }
373
+
374
+ .callout.warning .callout-title {
375
+ color: var(--yellow);
376
+ font-weight: bold;
377
+ margin-bottom: 8px;
378
+ }
379
+
380
+ .pipeline-flow {
381
+ display: flex;
382
+ align-items: center;
383
+ gap: 0;
384
+ flex-wrap: wrap;
385
+ justify-content: center;
386
+ margin: 20px 0;
387
+ padding: 20px;
388
+ background: rgba(0, 120, 212, 0.05);
389
+ border-radius: 12px;
390
+ }
391
+
392
+ .pipeline-stage {
393
+ padding: 12px 20px;
394
+ border-radius: 8px;
395
+ font-weight: 600;
396
+ font-size: 0.85em;
397
+ text-align: center;
398
+ min-width: 100px;
399
+ }
400
+
401
+ .pipeline-arrow {
402
+ font-size: 1.5em;
403
+ color: var(--azure);
404
+ padding: 0 4px;
405
+ }
406
+
407
+ .interview-box {
408
+ background: rgba(163, 113, 247, 0.08);
409
+ border: 1px solid rgba(163, 113, 247, 0.25);
410
+ border-radius: 8px;
411
+ padding: 20px;
412
+ margin: 15px 0;
413
+ }
414
+
415
+ .interview-box .box-title {
416
+ color: #a371f7;
417
+ }
418
+
419
+ @media (max-width: 768px) {
420
+ .grid {
421
+ grid-template-columns: 1fr;
422
+ }
423
+
424
+ .pipeline-flow {
425
+ flex-direction: column;
426
+ }
427
+
428
+ .pipeline-arrow {
429
+ transform: rotate(90deg);
430
+ }
431
+
432
+ h1 {
433
+ font-size: 1.8em;
434
+ }
435
+ }
436
+ </style>
437
+ </head>
438
+
439
+ <body>
440
+ <div class="container">
441
+ <!-- Dashboard -->
442
+ <div class="dashboard active" id="dashboard">
443
+ <header>
444
+ <h1>☁️ Azure DevOps & MLOps Masterclass</h1>
445
+ <p class="subtitle">CI/CD Pipelines · Containers · Kubernetes · MLOps — From Zero to Production</p>
446
+ </header>
447
+ <div class="grid" id="modulesGrid"></div>
448
+ </div>
449
+
450
+ <!-- Module Container -->
451
+ <div id="modulesContainer"></div>
452
+ </div>
453
+
454
+ <script>
455
+ const modules = [
456
+ { id: "devops-fundamentals", title: "DevOps Fundamentals", icon: "🔄", category: "Foundations", color: "#0078D4", description: "CI/CD concepts, DevOps culture, and the shift to MLOps" },
457
+ { id: "azure-setup", title: "Azure DevOps Setup", icon: "⚙️", category: "Foundations", color: "#0078D4", description: "Organizations, Projects, Repos, and Git workflows" },
458
+ { id: "infrastructure", title: "Infrastructure & Networking", icon: "🌐", category: "Infrastructure", color: "#00b7c3", description: "VPCs, Security Groups, VMs, and Azure networking" },
459
+ { id: "cicd-yaml", title: "CI/CD Pipeline (YAML)", icon: "📜", category: "Pipeline", color: "#ff6b35", description: "YAML syntax, Triggers, Variables, Stages, Multi-stage pipelines" },
460
+ { id: "build-test", title: "Build & Test", icon: "🧪", category: "Pipeline", color: "#ff6b35", description: "Maven, Unit Tests, SonarQube quality gates, Trivy scanning" },
461
+ { id: "docker", title: "Docker & Containers", icon: "🐳", category: "Containers", color: "#2496ED", description: "Dockerfile, Build, Push to ACR, Image scanning" },
462
+ { id: "kubernetes", title: "Kubernetes & AKS", icon: "☸️", category: "Orchestration", color: "#326CE5", description: "AKS setup, Deployments, Services, Manifests, Helm" },
463
+ { id: "security", title: "Service Connections & Security", icon: "🔐", category: "Security", color: "#e74c3c", description: "Service Principals, RBAC, Key Vault, PAT tokens" },
464
+ { id: "mlops", title: "MLOps Pipeline", icon: "🤖", category: "MLOps", color: "#a371f7", description: "ML lifecycle, Model versioning, Data drift, CT/CI/CD for ML" },
465
+ { id: "monitoring", title: "Monitoring & Automation", icon: "📊", category: "Operations", color: "#2ecc71", description: "Deployment verification, Pipeline automation, Notifications" }
466
+ ];
467
+
468
+ const MODULE_CONTENT = {
469
+ "devops-fundamentals": {
470
+ concepts: `
471
+ <h3>What is DevOps?</h3>
472
+ <p>DevOps is a set of practices that combines <strong>software development (Dev)</strong> and <strong>IT operations (Ops)</strong>. It aims to shorten the software development lifecycle and deliver high-quality software continuously.</p>
473
+ <div class="pipeline-flow">
474
+ <div class="pipeline-stage" style="background: rgba(0,120,212,0.2); color: #0078D4;">Plan</div>
475
+ <span class="pipeline-arrow">→</span>
476
+ <div class="pipeline-stage" style="background: rgba(0,183,195,0.2); color: #00b7c3;">Code</div>
477
+ <span class="pipeline-arrow">→</span>
478
+ <div class="pipeline-stage" style="background: rgba(255,107,53,0.2); color: #ff6b35;">Build</div>
479
+ <span class="pipeline-arrow">→</span>
480
+ <div class="pipeline-stage" style="background: rgba(0,255,136,0.2); color: #00ff88;">Test</div>
481
+ <span class="pipeline-arrow">→</span>
482
+ <div class="pipeline-stage" style="background: rgba(163,113,247,0.2); color: #a371f7;">Release</div>
483
+ <span class="pipeline-arrow">→</span>
484
+ <div class="pipeline-stage" style="background: rgba(46,204,113,0.2); color: #2ecc71;">Deploy</div>
485
+ <span class="pipeline-arrow">→</span>
486
+ <div class="pipeline-stage" style="background: rgba(255,165,0,0.2); color: #ffa500;">Operate</div>
487
+ <span class="pipeline-arrow">→</span>
488
+ <div class="pipeline-stage" style="background: rgba(231,76,60,0.2); color: #e74c3c;">Monitor</div>
489
+ </div>
490
+ <h3>CI/CD Explained</h3>
491
+ <table>
492
+ <tr><th>Concept</th><th>What It Does</th><th>Tools</th></tr>
493
+ <tr><td><strong>Continuous Integration (CI)</strong></td><td>Automatically build & test code on every commit</td><td>Azure Pipelines, Jenkins, GitHub Actions</td></tr>
494
+ <tr><td><strong>Continuous Delivery (CD)</strong></td><td>Automatically deploy to staging after tests pass</td><td>Azure Pipelines, ArgoCD, Spinnaker</td></tr>
495
+ <tr><td><strong>Continuous Deployment</strong></td><td>Auto-deploy to production (no manual gate)</td><td>Azure DevOps + approvals removed</td></tr>
496
+ </table>
497
+ <h3>DevOps vs MLOps</h3>
498
+ <table>
499
+ <tr><th>Aspect</th><th>DevOps</th><th>MLOps</th></tr>
500
+ <tr><td>What ships?</td><td>Code → Application</td><td>Code + Data + Model → Prediction Service</td></tr>
501
+ <tr><td>Testing</td><td>Unit / Integration / E2E</td><td>+ Data validation, Model validation, Fairness</td></tr>
502
+ <tr><td>Versioning</td><td>Code (Git)</td><td>Code + Data + Model + Hyperparams</td></tr>
503
+ <tr><td>Monitoring</td><td>Latency, Errors, CPU</td><td>+ Data drift, Model drift, Prediction quality</td></tr>
504
+ <tr><td>Retraining</td><td>N/A</td><td>Triggered by drift or schedule</td></tr>
505
+ </table>
506
+ <div class="callout insight">
507
+ <div class="callout-title">💡 Key Insight</div>
508
+ MLOps = DevOps + <strong>Data Management</strong> + <strong>Model Management</strong> + <strong>Continuous Training</strong>. The complexity comes from the fact that ML systems have more axes of change than traditional software.
509
+ </div>
510
+ <h3>DevOps Principles (CALMS)</h3>
511
+ <div class="info-box">
512
+ <div class="box-title">🎯 CALMS Framework</div>
513
+ <div class="box-content">
514
+ <strong>C</strong> — Culture: Break silos between Dev and Ops<br>
515
+ <strong>A</strong> — Automation: Automate everything (builds, tests, deploys)<br>
516
+ <strong>L</strong> — Lean: Eliminate waste, small batch sizes<br>
517
+ <strong>M</strong> — Measurement: Measure everything (DORA metrics)<br>
518
+ <strong>S</strong> — Sharing: Share knowledge, feedback loops
519
+ </div>
520
+ </div>
521
+ `,
522
+ handson: `
523
+ <h3>DORA Metrics — Measuring DevOps Performance</h3>
524
+ <table>
525
+ <tr><th>Metric</th><th>Elite</th><th>High</th><th>Medium</th><th>Low</th></tr>
526
+ <tr><td>Deployment Frequency</td><td>Multiple/day</td><td>Weekly</td><td>Monthly</td><td>Months</td></tr>
527
+ <tr><td>Lead Time for Changes</td><td>< 1 hour</td><td>< 1 week</td><td>< 1 month</td><td>> 6 months</td></tr>
528
+ <tr><td>Change Failure Rate</td><td>0-15%</td><td>16-30%</td><td>16-30%</td><td>46-60%</td></tr>
529
+ <tr><td>Time to Restore</td><td>< 1 hour</td><td>< 1 day</td><td>< 1 week</td><td>> 6 months</td></tr>
530
+ </table>
531
+ <h3>Shift-Left Testing</h3>
532
+ <p>Move testing earlier in the development lifecycle:</p>
533
+ <div class="code-block">
534
+ <span class="comment"># Traditional: Test late (expensive to fix)</span>
535
+ Code → Code → Code → <span class="keyword">TEST</span> → Fix → Fix → Deploy
536
+
537
+ <span class="comment"># Shift-Left: Test early (cheap to fix)</span>
538
+ Code → <span class="keyword">TEST</span> → Code → <span class="keyword">TEST</span> → Code → <span class="keyword">TEST</span> → Deploy
539
+ </div>
540
+ <h3>Infrastructure as Code (IaC)</h3>
541
+ <div class="code-block">
542
+ <span class="comment"># Terraform example — Azure Resource Group</span>
543
+ <span class="keyword">resource</span> <span class="string">"azurerm_resource_group"</span> <span class="string">"example"</span> {
544
+ <span class="key">name</span> = <span class="string">"rg-devops-prod"</span>
545
+ <span class="key">location</span> = <span class="string">"East US"</span>
546
+ <span class="key">tags</span> = {
547
+ <span class="key">environment</span> = <span class="string">"production"</span>
548
+ <span class="key">managed_by</span> = <span class="string">"terraform"</span>
549
+ }
550
+ }
551
+ </div>
552
+ <div class="callout insight">
553
+ <div class="callout-title">💡 IaC Benefits</div>
554
+ <strong>Repeatability</strong> — Same infra every time<br>
555
+ <strong>Version Control</strong> — Track changes in Git<br>
556
+ <strong>Audit Trail</strong> — Who changed what and when<br>
557
+ <strong>Self-Documentation</strong> — Infra IS the documentation
558
+ </div>
559
+ `,
560
+ applications: `
561
+ <h3>Real-World Applications</h3>
562
+ <div class="info-box">
563
+ <div class="box-title">🏢 Industry Use Cases</div>
564
+ <div class="box-content">
565
+ <strong>Netflix:</strong> 1000+ deployments/day using CI/CD and canary releases<br>
566
+ <strong>Amazon:</strong> Deploys every 11.7 seconds on average<br>
567
+ <strong>Google:</strong> Pioneered SRE (Site Reliability Engineering)<br>
568
+ <strong>Spotify:</strong> "Squad" model for autonomous DevOps teams<br>
569
+ <strong>Microsoft:</strong> Azure DevOps used internally for all products
570
+ </div>
571
+ </div>
572
+ <div class="interview-box">
573
+ <div class="box-title">📋 Probable Interview Questions</div>
574
+ <div class="box-content">
575
+ 1. What is DevOps and why is it important?<br>
576
+ 2. Explain the difference between CI, CD (Continuous Delivery), and CD (Continuous Deployment).<br>
577
+ 3. What are the DORA metrics and why do they matter?<br>
578
+ 4. How does DevOps differ from MLOps?<br>
579
+ 5. What is "Shift-Left" testing?<br>
580
+ 6. Explain Infrastructure as Code (IaC) and its benefits.<br>
581
+ 7. What is the CALMS framework?<br>
582
+ 8. What are Blue-Green and Canary deployments?<br>
583
+ 9. How do you measure DevOps maturity in an organization?<br>
584
+ 10. What is GitOps and how does it relate to DevOps?
585
+ </div>
586
+ </div>
587
+ `
588
+ },
589
+ "azure-setup": {
590
+ concepts: `
591
+ <h3>Azure DevOps Components</h3>
592
+ <table>
593
+ <tr><th>Service</th><th>Purpose</th><th>Equivalent</th></tr>
594
+ <tr><td><strong>Azure Boards</strong></td><td>Work tracking, Kanban, Sprints</td><td>Jira, Trello</td></tr>
595
+ <tr><td><strong>Azure Repos</strong></td><td>Git repositories</td><td>GitHub, GitLab</td></tr>
596
+ <tr><td><strong>Azure Pipelines</strong></td><td>CI/CD automation</td><td>Jenkins, GitHub Actions</td></tr>
597
+ <tr><td><strong>Azure Test Plans</strong></td><td>Manual & automated testing</td><td>TestRail</td></tr>
598
+ <tr><td><strong>Azure Artifacts</strong></td><td>Package management (npm, Maven, NuGet)</td><td>Nexus, JFrog</td></tr>
599
+ </table>
600
+ <h3>Setting Up Azure DevOps</h3>
601
+ <div class="info-box">
602
+ <div class="box-title">🚀 Setup Flow (from PDF)</div>
603
+ <div class="box-content">
604
+ <strong>Step 1:</strong> Go to portal.azure.com → Search "Azure DevOps Organization"<br>
605
+ <strong>Step 2:</strong> Click "Create new Organization" → Name it (e.g., "myorgforyaml")<br>
606
+ <strong>Step 3:</strong> Create a Project (e.g., "Multi-Tier Application")<br>
607
+ <strong>Step 4:</strong> Set visibility (Private recommended for enterprise)<br>
608
+ <strong>Step 5:</strong> Azure Repos is automatically created with the project
609
+ </div>
610
+ </div>
611
+ <h3>Azure Repos — Git Workflow</h3>
612
+ <p>Azure DevOps uses Git for version control. The common branching strategies are:</p>
613
+ <table>
614
+ <tr><th>Strategy</th><th>Best For</th><th>Branches</th></tr>
615
+ <tr><td><strong>Trunk-Based</strong></td><td>Small teams, fast releases</td><td>main + short-lived feature branches</td></tr>
616
+ <tr><td><strong>GitFlow</strong></td><td>Scheduled releases</td><td>main, develop, feature/*, release/*, hotfix/*</td></tr>
617
+ <tr><td><strong>GitHub Flow</strong></td><td>Continuous deployment</td><td>main + feature branches + PRs</td></tr>
618
+ </table>
619
+ <div class="callout insight">
620
+ <div class="callout-title">💡 From the PDF</div>
621
+ The project uses a "Multi-Tier Application" with all source code pushed to the "main" branch via Git CLI: <code>git init → git add . → git commit → git push</code>
622
+ </div>
623
+ `,
624
+ handson: `
625
+ <h3>Uploading Code to Azure Repos (from PDF)</h3>
626
+ <div class="code-block">
627
+ <span class="comment"># Step 1: Initialize local repo</span>
628
+ <span class="keyword">git</span> init
629
+
630
+ <span class="comment"># Step 2: Stage all files</span>
631
+ <span class="keyword">git</span> add .
632
+
633
+ <span class="comment"># Step 3: Check status</span>
634
+ <span class="keyword">git</span> status
635
+
636
+ <span class="comment"># Step 4: Commit</span>
637
+ <span class="keyword">git</span> commit -m <span class="string">"Initial commit"</span>
638
+
639
+ <span class="comment"># Step 5: Switch to main branch</span>
640
+ <span class="keyword">git</span> branch -M main
641
+
642
+ <span class="comment"># Step 6: Add Azure remote and push</span>
643
+ <span class="keyword">git</span> remote add origin https://myorg@dev.azure.com/myorg/Project/_git/Project
644
+ <span class="keyword">git</span> push -u origin --all
645
+ </div>
646
+ <h3>Branch Policies (Best Practice)</h3>
647
+ <div class="code-block">
648
+ <span class="comment"># Recommended branch policies for 'main':</span>
649
+ ✅ Require pull request reviews (min 1 reviewer)
650
+ ✅ Check for linked work items
651
+ ✅ Build validation (CI must pass)
652
+ ✅ Comment resolution required
653
+ ✅ Limit merge types (squash merge preferred)
654
+ </div>
655
+ <h3>Project Hierarchy</h3>
656
+ <div class="info-box">
657
+ <div class="box-title">📁 Azure DevOps Hierarchy</div>
658
+ <div class="box-content">
659
+ <strong>Organization</strong> (top level — company)<br>
660
+ &nbsp;&nbsp;└── <strong>Project</strong> (team/product)<br>
661
+ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;├── <strong>Repos</strong> (multiple repos per project)<br>
662
+ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;├── <strong>Pipelines</strong> (CI/CD definitions)<br>
663
+ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;├── <strong>Boards</strong> (work items, sprints)<br>
664
+ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;└── <strong>Artifacts</strong> (packages)
665
+ </div>
666
+ </div>
667
+ `,
668
+ applications: `
669
+ <h3>When to Use Azure DevOps vs GitHub</h3>
670
+ <table>
671
+ <tr><th>Feature</th><th>Azure DevOps</th><th>GitHub</th></tr>
672
+ <tr><td>CI/CD</td><td>Azure Pipelines (YAML + Classic)</td><td>GitHub Actions</td></tr>
673
+ <tr><td>Work Tracking</td><td>Azure Boards (enterprise-grade)</td><td>GitHub Issues + Projects</td></tr>
674
+ <tr><td>Packages</td><td>Azure Artifacts</td><td>GitHub Packages</td></tr>
675
+ <tr><td>Best For</td><td>Enterprise, Azure-heavy orgs</td><td>Open source, GitHub-ecosystem</td></tr>
676
+ </table>
677
+ <div class="interview-box">
678
+ <div class="box-title">📋 Probable Interview Questions</div>
679
+ <div class="box-content">
680
+ 1. What are the 5 main services in Azure DevOps?<br>
681
+ 2. How do you set up an Azure DevOps Organization and Project?<br>
682
+ 3. What are the differences between Azure Repos and GitHub?<br>
683
+ 4. Explain branching strategies — Trunk-Based vs GitFlow.<br>
684
+ 5. What are Branch Policies and why are they important?<br>
685
+ 6. How do you push local code to Azure Repos using Git CLI?<br>
686
+ 7. What is a Personal Access Token (PAT) and when is it needed?<br>
687
+ 8. How is Azure Boards used for Agile project management?<br>
688
+ 9. What is Azure Artifacts and when would you use it?<br>
689
+ 10. How do you manage access control in Azure DevOps?
690
+ </div>
691
+ </div>
692
+ `
693
+ },
694
+ "infrastructure": {
695
+ concepts: `
696
+ <h3>Azure Networking for DevOps</h3>
697
+ <p>Before deploying applications, you need a secure network environment. The PDF project sets up isolated networking so no outside entity can access resources directly.</p>
698
+ <table>
699
+ <tr><th>Component</th><th>Purpose</th><th>Azure Equivalent</th></tr>
700
+ <tr><td><strong>VPC / VNet</strong></td><td>Isolated virtual network</td><td>Azure Virtual Network</td></tr>
701
+ <tr><td><strong>Subnet</strong></td><td>Segment within a VNet</td><td>Subnet</td></tr>
702
+ <tr><td><strong>Security Group</strong></td><td>Firewall rules for VMs</td><td>Network Security Group (NSG)</td></tr>
703
+ <tr><td><strong>NAT Gateway</strong></td><td>Outbound internet for private subnets</td><td>Azure NAT Gateway</td></tr>
704
+ <tr><td><strong>Load Balancer</strong></td><td>Distribute traffic across VMs</td><td>Azure Load Balancer</td></tr>
705
+ </table>
706
+ <h3>Virtual Machines in the Pipeline</h3>
707
+ <div class="info-box">
708
+ <div class="box-title">🖥️ VM Roles (from PDF)</div>
709
+ <div class="box-content">
710
+ <strong>Agent VM:</strong> Runs the Azure Pipelines agent. Has Maven, Java, Docker, Trivy installed.<br>
711
+ <strong>SonarQube VM:</strong> Hosts Docker + SonarQube container for code quality analysis.<br>
712
+ Both VMs are placed in security groups with controlled inbound rules.
713
+ </div>
714
+ </div>
715
+ <h3>Security Group Rules (from PDF)</h3>
716
+ <table>
717
+ <tr><th>Port Range</th><th>Protocol</th><th>Purpose</th></tr>
718
+ <tr><td>22</td><td>SSH</td><td>Remote access to VMs</td></tr>
719
+ <tr><td>80 / 443</td><td>HTTP/HTTPS</td><td>Web traffic</td></tr>
720
+ <tr><td>9000</td><td>TCP</td><td>SonarQube dashboard</td></tr>
721
+ <tr><td>30000-32767</td><td>TCP</td><td>Kubernetes NodePort range</td></tr>
722
+ <tr><td>465</td><td>SMTPS</td><td>Email notifications</td></tr>
723
+ </table>
724
+ <div class="callout warning">
725
+ <div class="callout-title">⚠️ Security Best Practice</div>
726
+ Never use "0.0.0.0/0" (open to all) in production. Restrict SSH access to your IP range. Use Azure Bastion for secure VM access instead of public IPs.
727
+ </div>
728
+ `,
729
+ handson: `
730
+ <h3>Creating Azure VNet with CLI</h3>
731
+ <div class="code-block">
732
+ <span class="comment"># Create a resource group</span>
733
+ <span class="keyword">az</span> group create --name rg-devops --location eastus
734
+
735
+ <span class="comment"># Create a VNet with subnet</span>
736
+ <span class="keyword">az</span> network vnet create \\
737
+ --resource-group rg-devops \\
738
+ --name vnet-devops \\
739
+ --address-prefix <span class="string">10.0.0.0/16</span> \\
740
+ --subnet-name subnet-agents \\
741
+ --subnet-prefix <span class="string">10.0.1.0/24</span>
742
+
743
+ <span class="comment"># Create NSG with rules</span>
744
+ <span class="keyword">az</span> network nsg create --resource-group rg-devops --name nsg-agents
745
+
746
+ <span class="keyword">az</span> network nsg rule create \\
747
+ --resource-group rg-devops \\
748
+ --nsg-name nsg-agents \\
749
+ --name AllowSSH \\
750
+ --priority 100 \\
751
+ --destination-port-ranges 22 \\
752
+ --access Allow \\
753
+ --protocol Tcp
754
+ </div>
755
+ <h3>Terraform for Azure Infrastructure</h3>
756
+ <div class="code-block">
757
+ <span class="comment"># main.tf — Azure VNet + Subnet + NSG</span>
758
+ <span class="keyword">resource</span> <span class="string">"azurerm_virtual_network"</span> <span class="string">"devops"</span> {
759
+ <span class="key">name</span> = <span class="string">"vnet-devops"</span>
760
+ <span class="key">address_space</span> = [<span class="string">"10.0.0.0/16"</span>]
761
+ <span class="key">location</span> = azurerm_resource_group.devops.location
762
+ <span class="key">resource_group_name</span> = azurerm_resource_group.devops.name
763
+ }
764
+
765
+ <span class="keyword">resource</span> <span class="string">"azurerm_subnet"</span> <span class="string">"agents"</span> {
766
+ <span class="key">name</span> = <span class="string">"subnet-agents"</span>
767
+ <span class="key">virtual_network_name</span> = azurerm_virtual_network.devops.name
768
+ <span class="key">address_prefixes</span> = [<span class="string">"10.0.1.0/24"</span>]
769
+ }
770
+ </div>
771
+ `,
772
+ applications: `
773
+ <h3>Network Architecture Patterns</h3>
774
+ <div class="info-box">
775
+ <div class="box-title">🏗️ Hub-and-Spoke Pattern</div>
776
+ <div class="box-content">
777
+ <strong>Hub VNet:</strong> Shared services (firewall, DNS, bastion)<br>
778
+ <strong>Spoke VNets:</strong> Application workloads (dev, staging, prod)<br>
779
+ Connected via VNet Peering. This is the recommended architecture for enterprise Azure deployments.
780
+ </div>
781
+ </div>
782
+ <div class="interview-box">
783
+ <div class="box-title">📋 Probable Interview Questions</div>
784
+ <div class="box-content">
785
+ 1. What is an Azure Virtual Network (VNet) and why is it needed?<br>
786
+ 2. Explain the difference between NSG and Azure Firewall.<br>
787
+ 3. What port ranges are needed for a Kubernetes cluster?<br>
788
+ 4. How do you secure SSH access to Azure VMs?<br>
789
+ 5. What is the Hub-and-Spoke network architecture?<br>
790
+ 6. How do you use Azure Bastion for secure VM access?<br>
791
+ 7. What is VNet Peering and when would you use it?<br>
792
+ 8. How do you create a VM for a self-hosted pipeline agent?<br>
793
+ 9. What are Managed Identities and why are they better than passwords?<br>
794
+ 10. How would you design a network for a multi-tier application in Azure?
795
+ </div>
796
+ </div>
797
+ `
798
+ },
799
+ "cicd-yaml": {
800
+ concepts: `
801
+ <h3>YAML Pipeline Components</h3>
802
+ <p>Azure DevOps YAML pipelines are defined in code, giving you version control, code review, and full traceability.</p>
803
+ <table>
804
+ <tr><th>Component</th><th>Purpose</th><th>Scope</th></tr>
805
+ <tr><td><strong>Trigger</strong></td><td>What starts the pipeline</td><td>Branch, PR, Schedule, None (manual)</td></tr>
806
+ <tr><td><strong>Pool</strong></td><td>Where it runs</td><td>Microsoft-hosted or Self-hosted agent</td></tr>
807
+ <tr><td><strong>Variables</strong></td><td>Reusable values</td><td>Pipeline, Stage, Job level</td></tr>
808
+ <tr><td><strong>Stages</strong></td><td>Logical groups</td><td>Build, Test, Deploy</td></tr>
809
+ <tr><td><strong>Jobs</strong></td><td>Units of work within a stage</td><td>Run on an agent</td></tr>
810
+ <tr><td><strong>Steps</strong></td><td>Individual tasks</td><td>Script, Task, Checkout</td></tr>
811
+ </table>
812
+ <h3>Pipeline Hierarchy</h3>
813
+ <div class="info-box">
814
+ <div class="box-title">📐 Structure</div>
815
+ <div class="box-content">
816
+ <strong>Pipeline</strong><br>
817
+ &nbsp;&nbsp;├── trigger<br>
818
+ &nbsp;&nbsp;├── variables<br>
819
+ &nbsp;&nbsp;└── <strong>stages[]</strong><br>
820
+ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;└── <strong>jobs[]</strong><br>
821
+ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;├── pool<br>
822
+ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;└── <strong>steps[]</strong><br>
823
+ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;├── script<br>
824
+ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;├── task<br>
825
+ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;└── checkout
826
+ </div>
827
+ </div>
828
+ <h3>Trigger Types</h3>
829
+ <table>
830
+ <tr><th>Type</th><th>When It Fires</th><th>YAML</th></tr>
831
+ <tr><td>CI Trigger</td><td>Push to branch</td><td><code>trigger: [main]</code></td></tr>
832
+ <tr><td>PR Trigger</td><td>Pull request created</td><td><code>pr: [main]</code></td></tr>
833
+ <tr><td>Scheduled</td><td>Cron schedule</td><td><code>schedules: [{cron: ...}]</code></td></tr>
834
+ <tr><td>Manual</td><td>User clicks Run</td><td><code>trigger: none</code></td></tr>
835
+ </table>
836
+ `,
837
+ handson: `
838
+ <h3>Complete Multi-Stage YAML Pipeline (from PDF)</h3>
839
+ <div class="code-block">
840
+ <span class="comment"># azure-pipelines.yml — Full CI/CD Pipeline</span>
841
+ <span class="key">trigger</span>:
842
+ - main <span class="comment"># Auto-trigger on push to main</span>
843
+
844
+ <span class="key">stages</span>:
845
+ - <span class="key">stage</span>: Compile
846
+ <span class="key">displayName</span>: <span class="string">"Compile Stage"</span>
847
+ <span class="key">jobs</span>:
848
+ - <span class="key">job</span>: compile
849
+ <span class="key">pool</span>:
850
+ <span class="key">name</span>: <span class="string">"myagentpool"</span> <span class="comment"># Self-hosted agent</span>
851
+ <span class="key">steps</span>:
852
+ - <span class="key">task</span>: Maven@4
853
+ <span class="key">inputs</span>:
854
+ <span class="key">mavenPomFile</span>: <span class="string">"pom.xml"</span>
855
+ <span class="key">goals</span>: <span class="string">"compile"</span>
856
+
857
+ - <span class="key">stage</span>: Test
858
+ <span class="key">displayName</span>: <span class="string">"Test Stage"</span>
859
+ <span class="key">dependsOn</span>: Compile
860
+ <span class="key">jobs</span>:
861
+ - <span class="key">job</span>: test
862
+ <span class="key">steps</span>:
863
+ - <span class="key">task</span>: Maven@4
864
+ <span class="key">inputs</span>:
865
+ <span class="key">goals</span>: <span class="string">"test"</span>
866
+
867
+ - <span class="key">stage</span>: SecurityScan
868
+ <span class="key">displayName</span>: <span class="string">"Trivy File System Scan"</span>
869
+ <span class="key">dependsOn</span>: Test
870
+ <span class="key">jobs</span>:
871
+ - <span class="key">job</span>: trivy_scan
872
+ <span class="key">steps</span>:
873
+ - <span class="key">script</span>: |
874
+ trivy fs --format table -o report.html .
875
+ <span class="key">displayName</span>: <span class="string">"Run Trivy FS Scan"</span>
876
+
877
+ - <span class="key">stage</span>: CodeQuality
878
+ <span class="key">displayName</span>: <span class="string">"SonarQube Analysis"</span>
879
+ <span class="key">dependsOn</span>: SecurityScan
880
+
881
+ - <span class="key">stage</span>: BuildImage
882
+ <span class="key">displayName</span>: <span class="string">"Docker Build & Push"</span>
883
+ <span class="key">dependsOn</span>: CodeQuality
884
+
885
+ - <span class="key">stage</span>: Deploy
886
+ <span class="key">displayName</span>: <span class="string">"Deploy to AKS"</span>
887
+ <span class="key">dependsOn</span>: BuildImage
888
+ </div>
889
+ <h3>Variables & Templates</h3>
890
+ <div class="code-block">
891
+ <span class="comment"># Using variables for reusability</span>
892
+ <span class="key">variables</span>:
893
+ <span class="key">dockerRegistry</span>: <span class="string">"myacr.azurecr.io"</span>
894
+ <span class="key">imageName</span>: <span class="string">"myapp"</span>
895
+ <span class="key">imageTag</span>: <span class="string">"$(Build.BuildId)"</span>
896
+ <span class="key">k8sNamespace</span>: <span class="string">"default"</span>
897
+
898
+ <span class="comment"># Use in steps:</span>
899
+ <span class="key">steps</span>:
900
+ - <span class="key">script</span>: |
901
+ docker build -t $(dockerRegistry)/$(imageName):$(imageTag) .
902
+ docker push $(dockerRegistry)/$(imageName):$(imageTag)
903
+ </div>
904
+ `,
905
+ applications: `
906
+ <h3>Pipeline Architecture Patterns</h3>
907
+ <div class="pipeline-flow">
908
+ <div class="pipeline-stage" style="background: rgba(0,120,212,0.2); color: #0078D4;">Compile</div>
909
+ <span class="pipeline-arrow">→</span>
910
+ <div class="pipeline-stage" style="background: rgba(0,183,195,0.2); color: #00b7c3;">Test</div>
911
+ <span class="pipeline-arrow">→</span>
912
+ <div class="pipeline-stage" style="background: rgba(231,76,60,0.2); color: #e74c3c;">Trivy Scan</div>
913
+ <span class="pipeline-arrow">→</span>
914
+ <div class="pipeline-stage" style="background: rgba(163,113,247,0.2); color: #a371f7;">SonarQube</div>
915
+ <span class="pipeline-arrow">→</span>
916
+ <div class="pipeline-stage" style="background: rgba(36,150,237,0.2); color: #2496ED;">Docker Build</div>
917
+ <span class="pipeline-arrow">→</span>
918
+ <div class="pipeline-stage" style="background: rgba(255,107,53,0.2); color: #ff6b35;">Image Scan</div>
919
+ <span class="pipeline-arrow">→</span>
920
+ <div class="pipeline-stage" style="background: rgba(0,255,136,0.2); color: #00ff88;">Push ACR</div>
921
+ <span class="pipeline-arrow">→</span>
922
+ <div class="pipeline-stage" style="background: rgba(46,204,113,0.2); color: #2ecc71;">Deploy AKS</div>
923
+ </div>
924
+ <div class="interview-box">
925
+ <div class="box-title">📋 Probable Interview Questions</div>
926
+ <div class="box-content">
927
+ 1. What are the main components of a YAML pipeline in Azure DevOps?<br>
928
+ 2. Explain the difference between Stages, Jobs, and Steps.<br>
929
+ 3. What are the different types of pipeline triggers?<br>
930
+ 4. How do you use variables and variable groups in Azure Pipelines?<br>
931
+ 5. What is the difference between Microsoft-hosted and self-hosted agents?<br>
932
+ 6. How do you create a multi-stage pipeline with dependencies?<br>
933
+ 7. What are pipeline templates and why are they useful?<br>
934
+ 8. How do you implement approval gates between stages?<br>
935
+ 9. YAML vs Classic editor — when to use which?<br>
936
+ 10. How do you pass variables between stages in a YAML pipeline?
937
+ </div>
938
+ </div>
939
+ `
940
+ },
941
+ "build-test": {
942
+ concepts: `
943
+ <h3>Build Stage — Maven Compile</h3>
944
+ <p>The first stage in the CI pipeline compiles the source code to check for syntax errors and generate bytecode.</p>
945
+ <div class="info-box">
946
+ <div class="box-title">🔨 Maven Build Lifecycle</div>
947
+ <div class="box-content">
948
+ <strong>validate</strong> → Check project is correct<br>
949
+ <strong>compile</strong> → Compile source code<br>
950
+ <strong>test</strong> → Run unit tests<br>
951
+ <strong>package</strong> → Create JAR/WAR file<br>
952
+ <strong>verify</strong> → Run integration tests<br>
953
+ <strong>install</strong> → Install to local repo<br>
954
+ <strong>deploy</strong> → Push to remote repo
955
+ </div>
956
+ </div>
957
+ <h3>Code Quality — SonarQube</h3>
958
+ <p>SonarQube performs static code analysis to detect bugs, vulnerabilities, and code smells.</p>
959
+ <table>
960
+ <tr><th>Metric</th><th>What It Measures</th><th>Quality Gate</th></tr>
961
+ <tr><td>Bugs</td><td>Code errors that will cause failures</td><td>0 new bugs</td></tr>
962
+ <tr><td>Vulnerabilities</td><td>Security weaknesses</td><td>0 new vulnerabilities</td></tr>
963
+ <tr><td>Code Smells</td><td>Maintainability issues</td><td>A rating</td></tr>
964
+ <tr><td>Coverage</td><td>% of code tested</td><td>≥ 80%</td></tr>
965
+ <tr><td>Duplications</td><td>Copy-pasted code</td><td>< 3%</td></tr>
966
+ </table>
967
+ <h3>Security Scanning — Trivy</h3>
968
+ <p>Trivy scans your file system and Docker images for known vulnerabilities (CVEs).</p>
969
+ <table>
970
+ <tr><th>Scan Type</th><th>What It Scans</th><th>Command</th></tr>
971
+ <tr><td>File System</td><td>Dependencies, configs</td><td><code>trivy fs .</code></td></tr>
972
+ <tr><td>Image</td><td>Docker image layers</td><td><code>trivy image myimage:latest</code></td></tr>
973
+ <tr><td>Config</td><td>Terraform, K8s manifests</td><td><code>trivy config .</code></td></tr>
974
+ </table>
975
+ <div class="callout insight">
976
+ <div class="callout-title">💡 From the PDF</div>
977
+ The pipeline runs TWO Trivy scans: first on the file system (before Docker build), then on the built Docker image (before push to ACR). This catches vulnerabilities at both layers.
978
+ </div>
979
+ `,
980
+ handson: `
981
+ <h3>SonarQube Setup (from PDF)</h3>
982
+ <div class="code-block">
983
+ <span class="comment"># Install Docker on SonarQube VM</span>
984
+ <span class="keyword">sudo</span> apt-get update
985
+ <span class="keyword">sudo</span> apt-get install docker.io -y
986
+ <span class="keyword">sudo</span> usermod -aG docker ubuntu
987
+
988
+ <span class="comment"># Run SonarQube container</span>
989
+ <span class="keyword">docker</span> run -d --name sonarqube \\
990
+ -p 9000:9000 \\
991
+ sonarqube:lts-community
992
+
993
+ <span class="comment"># Access at http://&lt;VM-IP&gt;:9000</span>
994
+ <span class="comment"># Default login: admin / admin</span>
995
+ </div>
996
+ <h3>SonarQube Pipeline Stage</h3>
997
+ <div class="code-block">
998
+ <span class="comment"># SonarQube Analysis Stage</span>
999
+ - <span class="key">stage</span>: SonarQube
1000
+ <span class="key">displayName</span>: <span class="string">"SonarQube Analysis"</span>
1001
+ <span class="key">jobs</span>:
1002
+ - <span class="key">job</span>: sonarqube
1003
+ <span class="key">steps</span>:
1004
+ - <span class="key">task</span>: SonarQubePrepare@6
1005
+ <span class="key">inputs</span>:
1006
+ <span class="key">SonarQube</span>: <span class="string">"sonar-conn"</span>
1007
+ <span class="key">scannerMode</span>: <span class="string">"Other"</span>
1008
+ - <span class="key">task</span>: Maven@4
1009
+ <span class="key">inputs</span>:
1010
+ <span class="key">goals</span>: <span class="string">"verify"</span>
1011
+ <span class="key">sonarQubeRunAnalysis</span>: true
1012
+ - <span class="key">task</span>: SonarQubePublish@6
1013
+ <span class="key">inputs</span>:
1014
+ <span class="key">pollingTimeoutSec</span>: <span class="string">"300"</span>
1015
+ </div>
1016
+ <h3>Trivy Scan Stage</h3>
1017
+ <div class="code-block">
1018
+ <span class="comment"># Trivy File System Scan</span>
1019
+ - <span class="key">stage</span>: trivy_fs_scan
1020
+ <span class="key">jobs</span>:
1021
+ - <span class="key">job</span>: trivy_scan
1022
+ <span class="key">steps</span>:
1023
+ - <span class="key">script</span>: |
1024
+ trivy fs --format table -o fs-report.html .
1025
+ <span class="key">displayName</span>: <span class="string">"Trivy File System Scan"</span>
1026
+
1027
+ <span class="comment"># Trivy Image Scan (after Docker build)</span>
1028
+ - <span class="key">stage</span>: trivy_image_scan
1029
+ <span class="key">jobs</span>:
1030
+ - <span class="key">job</span>: trivy_image
1031
+ <span class="key">steps</span>:
1032
+ - <span class="key">script</span>: |
1033
+ trivy image myacr.azurecr.io/dev:latest
1034
+ <span class="key">displayName</span>: <span class="string">"Trivy Image Scan"</span>
1035
+ </div>
1036
+ `,
1037
+ applications: `
1038
+ <h3>Quality Gate Strategy</h3>
1039
+ <div class="info-box">
1040
+ <div class="box-title">🛡️ Defense in Depth</div>
1041
+ <div class="box-content">
1042
+ <strong>Layer 1:</strong> Linting & Static Analysis (SonarQube) → Catch code smells<br>
1043
+ <strong>Layer 2:</strong> Unit Tests (Maven test) → Catch logic errors<br>
1044
+ <strong>Layer 3:</strong> File System Security Scan (Trivy fs) → Catch dependency CVEs<br>
1045
+ <strong>Layer 4:</strong> Image Security Scan (Trivy image) → Catch container CVEs<br>
1046
+ <strong>Layer 5:</strong> Integration Tests → Catch system-level issues
1047
+ </div>
1048
+ </div>
1049
+ <div class="interview-box">
1050
+ <div class="box-title">📋 Probable Interview Questions</div>
1051
+ <div class="box-content">
1052
+ 1. What is the Maven build lifecycle?<br>
1053
+ 2. What is SonarQube and what metrics does it measure?<br>
1054
+ 3. Explain Quality Gates in SonarQube.<br>
1055
+ 4. What is Trivy and how does it differ from OWASP Dependency-Check?<br>
1056
+ 5. Why run both file system and image scans?<br>
1057
+ 6. How do you set up SonarQube as a service connection in Azure DevOps?<br>
1058
+ 7. What is a "code smell" vs a "bug" vs a "vulnerability"?<br>
1059
+ 8. How do you publish test results in Azure Pipelines?<br>
1060
+ 9. What are Azure Pipeline Artifacts and how are they used?<br>
1061
+ 10. How would you fail a pipeline if code coverage drops below 80%?
1062
+ </div>
1063
+ </div>
1064
+ `
1065
+ },
1066
+
1067
+ "docker": {
1068
+ concepts: `
1069
+ <h3>What is Docker?</h3>
1070
+ <p>Docker is a platform for building, shipping, and running applications in <strong>containers</strong> — lightweight, portable, and self-sufficient units that package code with all its dependencies.</p>
1071
+ <table>
1072
+ <tr><th>Concept</th><th>Description</th></tr>
1073
+ <tr><td><strong>Image</strong></td><td>Read-only template with instructions for creating a container</td></tr>
1074
+ <tr><td><strong>Container</strong></td><td>Running instance of an image</td></tr>
1075
+ <tr><td><strong>Dockerfile</strong></td><td>Text file with instructions to build an image</td></tr>
1076
+ <tr><td><strong>Registry</strong></td><td>Repository for Docker images (Docker Hub, ACR)</td></tr>
1077
+ <tr><td><strong>Volume</strong></td><td>Persistent storage for containers</td></tr>
1078
+ <tr><td><strong>Network</strong></td><td>Communication between containers</td></tr>
1079
+ </table>
1080
+ <h3>Docker vs Virtual Machines</h3>
1081
+ <table>
1082
+ <tr><th>Feature</th><th>Docker Container</th><th>Virtual Machine</th></tr>
1083
+ <tr><td>Boot Time</td><td>Seconds</td><td>Minutes</td></tr>
1084
+ <tr><td>Size</td><td>MBs</td><td>GBs</td></tr>
1085
+ <tr><td>Isolation</td><td>Process-level</td><td>Full OS-level</td></tr>
1086
+ <tr><td>Performance</td><td>Near-native</td><td>Hypervisor overhead</td></tr>
1087
+ <tr><td>OS</td><td>Shares host kernel</td><td>Own kernel</td></tr>
1088
+ </table>
1089
+ <h3>Azure Container Registry (ACR)</h3>
1090
+ <div class="info-box">
1091
+ <div class="box-title">📦 ACR (from PDF)</div>
1092
+ <div class="box-content">
1093
+ ACR is a managed Docker registry in Azure. The PDF project creates an ACR to store Docker images built during the CI/CD pipeline.<br><br>
1094
+ <strong>Key Features:</strong> Geo-replication, image scanning, webhook triggers, integrated with AKS
1095
+ </div>
1096
+ </div>
1097
+ `,
1098
+ handson: `
1099
+ <h3>Dockerfile Best Practices</h3>
1100
+ <div class="code-block">
1101
+ <span class="comment"># Multi-stage build for a Java application</span>
1102
+ <span class="keyword">FROM</span> maven:3.9-eclipse-temurin-17 <span class="keyword">AS</span> build
1103
+ <span class="key">WORKDIR</span> /app
1104
+ <span class="key">COPY</span> pom.xml .
1105
+ <span class="keyword">RUN</span> mvn dependency:go-offline
1106
+ <span class="key">COPY</span> src/ ./src/
1107
+ <span class="keyword">RUN</span> mvn package -DskipTests
1108
+
1109
+ <span class="keyword">FROM</span> eclipse-temurin:17-jre-alpine
1110
+ <span class="key">WORKDIR</span> /app
1111
+ <span class="key">COPY</span> --from=build /app/target/*.jar app.jar
1112
+ <span class="key">EXPOSE</span> 8080
1113
+ <span class="key">ENTRYPOINT</span> [<span class="string">"java"</span>, <span class="string">"-jar"</span>, <span class="string">"app.jar"</span>]
1114
+ </div>
1115
+ <h3>Docker Pipeline Stage (from PDF)</h3>
1116
+ <div class="code-block">
1117
+ <span class="comment"># Build, Scan, and Push Docker Image</span>
1118
+ - <span class="key">stage</span>: DockerBuild
1119
+ <span class="key">displayName</span>: <span class="string">"Build Docker Image"</span>
1120
+ <span class="key">jobs</span>:
1121
+ - <span class="key">job</span>: docker_build
1122
+ <span class="key">steps</span>:
1123
+ - <span class="key">task</span>: Docker@2
1124
+ <span class="key">inputs</span>:
1125
+ <span class="key">containerRegistry</span>: <span class="string">"acr-service-conn"</span>
1126
+ <span class="key">repository</span>: <span class="string">"dev"</span>
1127
+ <span class="key">command</span>: <span class="string">"build"</span>
1128
+ <span class="key">tags</span>: <span class="string">"latest"</span>
1129
+
1130
+ - <span class="key">stage</span>: DockerPush
1131
+ <span class="key">displayName</span>: <span class="string">"Push to ACR"</span>
1132
+ <span class="key">jobs</span>:
1133
+ - <span class="key">job</span>: docker_push
1134
+ <span class="key">steps</span>:
1135
+ - <span class="key">task</span>: Docker@2
1136
+ <span class="key">inputs</span>:
1137
+ <span class="key">containerRegistry</span>: <span class="string">"acr-service-conn"</span>
1138
+ <span class="key">repository</span>: <span class="string">"dev"</span>
1139
+ <span class="key">command</span>: <span class="string">"push"</span>
1140
+ <span class="key">tags</span>: <span class="string">"latest"</span>
1141
+ </div>
1142
+ <h3>Essential Docker Commands</h3>
1143
+ <div class="code-block">
1144
+ <span class="comment"># Build an image</span>
1145
+ <span class="keyword">docker</span> build -t myapp:v1 .
1146
+
1147
+ <span class="comment"># Run a container</span>
1148
+ <span class="keyword">docker</span> run -d -p 8080:8080 --name myapp myapp:v1
1149
+
1150
+ <span class="comment"># List running containers</span>
1151
+ <span class="keyword">docker</span> ps
1152
+
1153
+ <span class="comment"># View logs</span>
1154
+ <span class="keyword">docker</span> logs myapp
1155
+
1156
+ <span class="comment"># Push to ACR</span>
1157
+ <span class="keyword">az</span> acr login --name myacr
1158
+ <span class="keyword">docker</span> tag myapp:v1 myacr.azurecr.io/myapp:v1
1159
+ <span class="keyword">docker</span> push myacr.azurecr.io/myapp:v1
1160
+ </div>
1161
+ `,
1162
+ applications: `
1163
+ <h3>Container Best Practices</h3>
1164
+ <div class="info-box">
1165
+ <div class="box-title">✅ Production Checklist</div>
1166
+ <div class="box-content">
1167
+ <strong>Security:</strong> Don't run as root, use minimal base images (Alpine)<br>
1168
+ <strong>Size:</strong> Use multi-stage builds, minimize layers<br>
1169
+ <strong>Scanning:</strong> Scan images with Trivy before pushing<br>
1170
+ <strong>Tagging:</strong> Never use :latest in production, use semantic versioning<br>
1171
+ <strong>Health Checks:</strong> Add HEALTHCHECK in Dockerfile
1172
+ </div>
1173
+ </div>
1174
+ <div class="interview-box">
1175
+ <div class="box-title">📋 Probable Interview Questions</div>
1176
+ <div class="box-content">
1177
+ 1. What is the difference between a Docker image and a container?<br>
1178
+ 2. Explain multi-stage builds and their benefits.<br>
1179
+ 3. How does Docker differ from a virtual machine?<br>
1180
+ 4. What is Azure Container Registry and how do you push images to it?<br>
1181
+ 5. How do you scan Docker images for vulnerabilities?<br>
1182
+ 6. What is a Dockerfile and what are best practices for writing one?<br>
1183
+ 7. Explain Docker networking modes (bridge, host, none).<br>
1184
+ 8. What are Docker volumes and when do you use them?<br>
1185
+ 9. How do you optimize Docker image size?<br>
1186
+ 10. What is Docker Compose and when would you use it over Kubernetes?
1187
+ </div>
1188
+ </div>
1189
+ `
1190
+ },
1191
+ "kubernetes": {
1192
+ concepts: `
1193
+ <h3>What is Kubernetes?</h3>
1194
+ <p>Kubernetes (K8s) is an open-source container orchestration platform that automates deployment, scaling, and management of containerized applications.</p>
1195
+ <table>
1196
+ <tr><th>Component</th><th>Purpose</th></tr>
1197
+ <tr><td><strong>Pod</strong></td><td>Smallest deployable unit — one or more containers</td></tr>
1198
+ <tr><td><strong>Deployment</strong></td><td>Manages Pod replicas and rolling updates</td></tr>
1199
+ <tr><td><strong>Service</strong></td><td>Stable networking endpoint for Pods</td></tr>
1200
+ <tr><td><strong>Namespace</strong></td><td>Virtual cluster for isolation</td></tr>
1201
+ <tr><td><strong>ConfigMap</strong></td><td>External configuration data</td></tr>
1202
+ <tr><td><strong>Secret</strong></td><td>Sensitive data (passwords, tokens)</td></tr>
1203
+ <tr><td><strong>Ingress</strong></td><td>HTTP routing and load balancing</td></tr>
1204
+ </table>
1205
+ <h3>Azure Kubernetes Service (AKS)</h3>
1206
+ <div class="info-box">
1207
+ <div class="box-title">☸️ AKS (from PDF)</div>
1208
+ <div class="box-content">
1209
+ AKS is a managed Kubernetes service in Azure. The PDF project deploys the application to AKS after building and pushing the Docker image to ACR.<br><br>
1210
+ <strong>Benefits:</strong> Managed control plane, auto-scaling, Azure AD integration, monitoring with Azure Monitor
1211
+ </div>
1212
+ </div>
1213
+ <h3>Kubernetes Architecture</h3>
1214
+ <div class="info-box">
1215
+ <div class="box-title">🏗️ Control Plane vs Worker Nodes</div>
1216
+ <div class="box-content">
1217
+ <strong>Control Plane (Master):</strong><br>
1218
+ &nbsp;&nbsp;• API Server — Entry point for all commands<br>
1219
+ &nbsp;&nbsp;• etcd — Key-value store for cluster state<br>
1220
+ &nbsp;&nbsp;• Scheduler — Assigns Pods to nodes<br>
1221
+ &nbsp;&nbsp;• Controller Manager — Maintains desired state<br><br>
1222
+ <strong>Worker Nodes:</strong><br>
1223
+ &nbsp;&nbsp;• kubelet — Manages Pods on the node<br>
1224
+ &nbsp;&nbsp;• kube-proxy — Networking rules<br>
1225
+ &nbsp;&nbsp;• Container Runtime — Docker/containerd
1226
+ </div>
1227
+ </div>
1228
+ `,
1229
+ handson: `
1230
+ <h3>Kubernetes Manifest (from PDF)</h3>
1231
+ <div class="code-block">
1232
+ <span class="comment"># ds.yml — Deployment + Service</span>
1233
+ <span class="key">apiVersion</span>: apps/v1
1234
+ <span class="key">kind</span>: Deployment
1235
+ <span class="key">metadata</span>:
1236
+ <span class="key">name</span>: bankapp
1237
+ <span class="key">spec</span>:
1238
+ <span class="key">replicas</span>: 2
1239
+ <span class="key">selector</span>:
1240
+ <span class="key">matchLabels</span>:
1241
+ <span class="key">app</span>: bankapp
1242
+ <span class="key">template</span>:
1243
+ <span class="key">metadata</span>:
1244
+ <span class="key">labels</span>:
1245
+ <span class="key">app</span>: bankapp
1246
+ <span class="key">spec</span>:
1247
+ <span class="key">containers</span>:
1248
+ - <span class="key">name</span>: bankapp
1249
+ <span class="key">image</span>: <span class="string">sosocicdacr77.azurecr.io/dev:latest</span>
1250
+ <span class="key">ports</span>:
1251
+ - <span class="key">containerPort</span>: 8080
1252
+ ---
1253
+ <span class="key">apiVersion</span>: v1
1254
+ <span class="key">kind</span>: Service
1255
+ <span class="key">metadata</span>:
1256
+ <span class="key">name</span>: bankapp-service
1257
+ <span class="key">spec</span>:
1258
+ <span class="key">type</span>: LoadBalancer
1259
+ <span class="key">selector</span>:
1260
+ <span class="key">app</span>: bankapp
1261
+ <span class="key">ports</span>:
1262
+ - <span class="key">port</span>: 80
1263
+ <span class="key">targetPort</span>: 8080
1264
+ </div>
1265
+ <h3>AKS Deploy Pipeline Stage (from PDF)</h3>
1266
+ <div class="code-block">
1267
+ <span class="comment"># Deploy to AKS Stage</span>
1268
+ - <span class="key">stage</span>: deploy_to_aks
1269
+ <span class="key">displayName</span>: <span class="string">"Deploy to AKS"</span>
1270
+ <span class="key">jobs</span>:
1271
+ - <span class="key">job</span>: deploy_to_aks
1272
+ <span class="key">steps</span>:
1273
+ - <span class="key">task</span>: KubernetesManifest@1
1274
+ <span class="key">inputs</span>:
1275
+ <span class="key">action</span>: <span class="string">"deploy"</span>
1276
+ <span class="key">kubernetesServiceConnection</span>: <span class="string">"k8s-conn"</span>
1277
+ <span class="key">namespace</span>: <span class="string">"default"</span>
1278
+ <span class="key">manifests</span>: <span class="string">"ds.yml"</span>
1279
+ </div>
1280
+ <h3>Essential kubectl Commands</h3>
1281
+ <div class="code-block">
1282
+ <span class="comment"># Get cluster info</span>
1283
+ <span class="keyword">kubectl</span> cluster-info
1284
+ <span class="keyword">kubectl</span> get nodes
1285
+
1286
+ <span class="comment"># Deploy and manage</span>
1287
+ <span class="keyword">kubectl</span> apply -f ds.yml
1288
+ <span class="keyword">kubectl</span> get pods
1289
+ <span class="keyword">kubectl</span> get services
1290
+ <span class="keyword">kubectl</span> describe pod bankapp-xyz
1291
+
1292
+ <span class="comment"># Scale</span>
1293
+ <span class="keyword">kubectl</span> scale deployment bankapp --replicas=3
1294
+
1295
+ <span class="comment"># Logs and debugging</span>
1296
+ <span class="keyword">kubectl</span> logs bankapp-xyz
1297
+ <span class="keyword">kubectl</span> exec -it bankapp-xyz -- /bin/sh
1298
+ </div>
1299
+ `,
1300
+ applications: `
1301
+ <h3>Deployment Strategies</h3>
1302
+ <table>
1303
+ <tr><th>Strategy</th><th>Description</th><th>Risk</th></tr>
1304
+ <tr><td><strong>Rolling Update</strong></td><td>Gradually replace old pods with new</td><td>Low</td></tr>
1305
+ <tr><td><strong>Blue-Green</strong></td><td>Two identical environments, switch traffic</td><td>Very Low</td></tr>
1306
+ <tr><td><strong>Canary</strong></td><td>Route small % of traffic to new version</td><td>Low</td></tr>
1307
+ <tr><td><strong>Recreate</strong></td><td>Kill all old pods, create new ones</td><td>High (downtime)</td></tr>
1308
+ </table>
1309
+ <div class="interview-box">
1310
+ <div class="box-title">📋 Probable Interview Questions</div>
1311
+ <div class="box-content">
1312
+ 1. What is Kubernetes and why is it needed?<br>
1313
+ 2. Explain the difference between a Pod, Deployment, and Service.<br>
1314
+ 3. What is AKS and how does it differ from self-managed Kubernetes?<br>
1315
+ 4. How does a Kubernetes Service expose Pods to the internet?<br>
1316
+ 5. What are the different Kubernetes service types (ClusterIP, NodePort, LoadBalancer)?<br>
1317
+ 6. Explain Rolling Update vs Blue-Green vs Canary deployments.<br>
1318
+ 7. What is a Kubernetes Namespace and when would you use it?<br>
1319
+ 8. How do you troubleshoot a CrashLoopBackOff pod?<br>
1320
+ 9. What is Helm and how does it help with Kubernetes?<br>
1321
+ 10. How do you integrate AKS with Azure DevOps Pipelines?
1322
+ </div>
1323
+ </div>
1324
+ `
1325
+ },
1326
+ "security": {
1327
+ concepts: `
1328
+ <h3>Azure Security Model</h3>
1329
+ <p>Security in Azure DevOps involves identity management, access control, secrets management, and service-to-service authentication.</p>
1330
+ <h3>Service Principals</h3>
1331
+ <div class="info-box">
1332
+ <div class="box-title">🔑 Service Principal (from PDF)</div>
1333
+ <div class="box-content">
1334
+ A Service Principal is an identity for an application/service to access Azure resources. The PDF walks through:<br><br>
1335
+ <strong>1.</strong> Register a new application in Azure AD<br>
1336
+ <strong>2.</strong> Generate a Client Secret (password for the app)<br>
1337
+ <strong>3.</strong> Assign a Role (e.g., Contributor) to the Service Principal
1338
+ </div>
1339
+ </div>
1340
+ <h3>Service Connections (from PDF)</h3>
1341
+ <table>
1342
+ <tr><th>Connection Type</th><th>Connects To</th><th>Used For</th></tr>
1343
+ <tr><td><strong>Azure Resource Manager</strong></td><td>Azure subscription</td><td>Deploy to Azure services</td></tr>
1344
+ <tr><td><strong>SonarQube</strong></td><td>SonarQube server</td><td>Code quality analysis</td></tr>
1345
+ <tr><td><strong>Kubernetes</strong></td><td>AKS cluster</td><td>Deploy manifests</td></tr>
1346
+ <tr><td><strong>Docker Registry</strong></td><td>ACR</td><td>Push/pull images</td></tr>
1347
+ </table>
1348
+ <h3>Personal Access Tokens (PAT)</h3>
1349
+ <div class="callout warning">
1350
+ <div class="callout-title">⚠️ PAT Best Practices</div>
1351
+ • Set minimum required scopes<br>
1352
+ • Set short expiration dates<br>
1353
+ • Never commit PATs to source control<br>
1354
+ • Use Managed Identities when possible instead
1355
+ </div>
1356
+ <h3>Azure Key Vault</h3>
1357
+ <p>Azure Key Vault securely stores secrets, keys, and certificates. Integrate it with Azure Pipelines using variable groups linked to Key Vault.</p>
1358
+ `,
1359
+ handson: `
1360
+ <h3>Creating a Service Principal (from PDF)</h3>
1361
+ <div class="code-block">
1362
+ <span class="comment"># Step 1: Register app in Azure AD</span>
1363
+ <span class="keyword">az</span> ad app create --display-name <span class="string">"devops-pipeline-sp"</span>
1364
+
1365
+ <span class="comment"># Step 2: Create service principal</span>
1366
+ <span class="keyword">az</span> ad sp create --id &lt;APP_ID&gt;
1367
+
1368
+ <span class="comment"># Step 3: Create client secret</span>
1369
+ <span class="keyword">az</span> ad app credential reset \\
1370
+ --id &lt;APP_ID&gt; \\
1371
+ --append
1372
+
1373
+ <span class="comment"># Step 4: Assign Contributor role</span>
1374
+ <span class="keyword">az</span> role assignment create \\
1375
+ --assignee &lt;SP_OBJECT_ID&gt; \\
1376
+ --role Contributor \\
1377
+ --scope /subscriptions/&lt;SUB_ID&gt;
1378
+ </div>
1379
+ <h3>Key Vault Integration with Pipelines</h3>
1380
+ <div class="code-block">
1381
+ <span class="comment"># Link Variable Group to Key Vault</span>
1382
+ <span class="key">variables</span>:
1383
+ - <span class="key">group</span>: <span class="string">"kv-secrets"</span> <span class="comment"># Linked to Azure Key Vault</span>
1384
+
1385
+ <span class="key">steps</span>:
1386
+ - <span class="key">task</span>: AzureKeyVault@2
1387
+ <span class="key">inputs</span>:
1388
+ <span class="key">azureSubscription</span>: <span class="string">"azure-conn"</span>
1389
+ <span class="key">keyVaultName</span>: <span class="string">"my-keyvault"</span>
1390
+ <span class="key">secretsFilter</span>: <span class="string">"db-password,api-key"</span>
1391
+ - <span class="key">script</span>: |
1392
+ echo "Using secret: $(db-password)"
1393
+ </div>
1394
+ <h3>RBAC in Azure DevOps</h3>
1395
+ <table>
1396
+ <tr><th>Role</th><th>Scope</th><th>Permissions</th></tr>
1397
+ <tr><td>Project Admin</td><td>Project</td><td>Full control</td></tr>
1398
+ <tr><td>Build Admin</td><td>Pipelines</td><td>Manage build definitions</td></tr>
1399
+ <tr><td>Contributors</td><td>Project</td><td>Edit code, run pipelines</td></tr>
1400
+ <tr><td>Readers</td><td>Project</td><td>View only</td></tr>
1401
+ </table>
1402
+ `,
1403
+ applications: `
1404
+ <h3>Security Checklist for CI/CD</h3>
1405
+ <div class="info-box">
1406
+ <div class="box-title">🛡️ Production Security Checklist</div>
1407
+ <div class="box-content">
1408
+ ✅ Use Service Principals (not personal accounts) for pipelines<br>
1409
+ ✅ Store secrets in Azure Key Vault, never in code<br>
1410
+ ✅ Enable branch policies and required reviewers<br>
1411
+ ✅ Scan code with SonarQube and dependencies with Trivy<br>
1412
+ ✅ Use Managed Identities for Azure-to-Azure auth<br>
1413
+ ✅ Implement least-privilege RBAC<br>
1414
+ ✅ Rotate secrets regularly<br>
1415
+ ✅ Enable audit logging
1416
+ </div>
1417
+ </div>
1418
+ <div class="interview-box">
1419
+ <div class="box-title">📋 Probable Interview Questions</div>
1420
+ <div class="box-content">
1421
+ 1. What is a Service Principal and how does it differ from a Managed Identity?<br>
1422
+ 2. How do you create and manage Service Connections in Azure DevOps?<br>
1423
+ 3. What is Azure Key Vault and how do you integrate it with pipelines?<br>
1424
+ 4. What are PATs and what are the security risks?<br>
1425
+ 5. Explain RBAC in Azure DevOps.<br>
1426
+ 6. How do you implement least-privilege access in CI/CD?<br>
1427
+ 7. What is Workload Identity Federation?<br>
1428
+ 8. How do you prevent secrets from leaking in pipeline logs?<br>
1429
+ 9. What security scanning tools should be in a CI/CD pipeline?<br>
1430
+ 10. How do you audit who ran a pipeline and what changes were deployed?
1431
+ </div>
1432
+ </div>
1433
+ `
1434
+ },
1435
+ "mlops": {
1436
+ concepts: `
1437
+ <h3>What is MLOps?</h3>
1438
+ <p>MLOps (Machine Learning Operations) applies DevOps principles to the ML lifecycle: data preparation, model training, evaluation, deployment, and monitoring.</p>
1439
+ <div class="pipeline-flow">
1440
+ <div class="pipeline-stage" style="background: rgba(0,120,212,0.2); color: #0078D4;">Data</div>
1441
+ <span class="pipeline-arrow">→</span>
1442
+ <div class="pipeline-stage" style="background: rgba(0,183,195,0.2); color: #00b7c3;">Feature Eng</div>
1443
+ <span class="pipeline-arrow">→</span>
1444
+ <div class="pipeline-stage" style="background: rgba(163,113,247,0.2); color: #a371f7;">Train</div>
1445
+ <span class="pipeline-arrow">→</span>
1446
+ <div class="pipeline-stage" style="background: rgba(255,107,53,0.2); color: #ff6b35;">Evaluate</div>
1447
+ <span class="pipeline-arrow">→</span>
1448
+ <div class="pipeline-stage" style="background: rgba(0,255,136,0.2); color: #00ff88;">Register</div>
1449
+ <span class="pipeline-arrow">→</span>
1450
+ <div class="pipeline-stage" style="background: rgba(46,204,113,0.2); color: #2ecc71;">Deploy</div>
1451
+ <span class="pipeline-arrow">→</span>
1452
+ <div class="pipeline-stage" style="background: rgba(231,76,60,0.2); color: #e74c3c;">Monitor</div>
1453
+ </div>
1454
+ <h3>MLOps Maturity Levels</h3>
1455
+ <table>
1456
+ <tr><th>Level</th><th>Name</th><th>Description</th></tr>
1457
+ <tr><td>0</td><td>No MLOps</td><td>Manual notebooks, no versioning</td></tr>
1458
+ <tr><td>1</td><td>DevOps but no MLOps</td><td>CI/CD for code but not for models</td></tr>
1459
+ <tr><td>2</td><td>Automated Training</td><td>Automated training pipeline, model registry</td></tr>
1460
+ <tr><td>3</td><td>Automated Deployment</td><td>CI/CD for models, A/B testing</td></tr>
1461
+ <tr><td>4</td><td>Full MLOps</td><td>Auto-retraining on drift, canary rollouts, full observability</td></tr>
1462
+ </table>
1463
+ <h3>Key MLOps Concepts</h3>
1464
+ <div class="info-box">
1465
+ <div class="box-title">🧠 The Three Pillars of MLOps</div>
1466
+ <div class="box-content">
1467
+ <strong>1. Data Management:</strong> Data versioning (DVC), data validation, feature stores<br>
1468
+ <strong>2. Model Management:</strong> Model registry, experiment tracking (MLflow), reproducibility<br>
1469
+ <strong>3. Deployment & Monitoring:</strong> Model serving, A/B testing, drift detection, retraining triggers
1470
+ </div>
1471
+ </div>
1472
+ <h3>Data Drift vs Model Drift</h3>
1473
+ <table>
1474
+ <tr><th>Type</th><th>What Changes</th><th>Detection</th></tr>
1475
+ <tr><td><strong>Data Drift</strong></td><td>Input data distribution shifts</td><td>Statistical tests (KS, PSI)</td></tr>
1476
+ <tr><td><strong>Concept Drift</strong></td><td>Relationship between inputs and outputs changes</td><td>Performance monitoring</td></tr>
1477
+ <tr><td><strong>Model Decay</strong></td><td>Model accuracy degrades over time</td><td>Accuracy/F1 dashboards</td></tr>
1478
+ </table>
1479
+ `,
1480
+ handson: `
1481
+ <h3>Azure ML + Azure DevOps Integration</h3>
1482
+ <div class="code-block">
1483
+ <span class="comment"># azure-pipelines.yml — MLOps Pipeline</span>
1484
+ <span class="key">trigger</span>:
1485
+ - main
1486
+
1487
+ <span class="key">stages</span>:
1488
+ - <span class="key">stage</span>: DataValidation
1489
+ <span class="key">jobs</span>:
1490
+ - <span class="key">job</span>: validate_data
1491
+ <span class="key">steps</span>:
1492
+ - <span class="key">script</span>: |
1493
+ python validate_data.py \\
1494
+ --input data/train.csv \\
1495
+ --schema schema.json
1496
+
1497
+ - <span class="key">stage</span>: TrainModel
1498
+ <span class="key">dependsOn</span>: DataValidation
1499
+ <span class="key">jobs</span>:
1500
+ - <span class="key">job</span>: train
1501
+ <span class="key">steps</span>:
1502
+ - <span class="key">task</span>: AzureCLI@2
1503
+ <span class="key">inputs</span>:
1504
+ <span class="key">azureSubscription</span>: <span class="string">"azure-ml-conn"</span>
1505
+ <span class="key">scriptType</span>: <span class="string">"bash"</span>
1506
+ <span class="key">scriptLocation</span>: <span class="string">"inlineScript"</span>
1507
+ <span class="key">inlineScript</span>: |
1508
+ az ml job create -f train_job.yml
1509
+
1510
+ - <span class="key">stage</span>: RegisterModel
1511
+ <span class="key">dependsOn</span>: TrainModel
1512
+ <span class="key">jobs</span>:
1513
+ - <span class="key">job</span>: register
1514
+ <span class="key">steps</span>:
1515
+ - <span class="key">script</span>: |
1516
+ az ml model create \\
1517
+ --name my-model \\
1518
+ --version $(Build.BuildId) \\
1519
+ --path outputs/model.pkl
1520
+
1521
+ - <span class="key">stage</span>: DeployModel
1522
+ <span class="key">dependsOn</span>: RegisterModel
1523
+ <span class="key">jobs</span>:
1524
+ - <span class="key">job</span>: deploy
1525
+ <span class="key">steps</span>:
1526
+ - <span class="key">script</span>: |
1527
+ az ml online-endpoint create -f endpoint.yml
1528
+ az ml online-deployment create -f deployment.yml
1529
+ </div>
1530
+ <h3>MLflow Experiment Tracking</h3>
1531
+ <div class="code-block">
1532
+ <span class="comment"># Python — Track experiments with MLflow</span>
1533
+ <span class="keyword">import</span> mlflow
1534
+
1535
+ mlflow.set_experiment(<span class="string">"fraud-detection"</span>)
1536
+
1537
+ <span class="keyword">with</span> mlflow.start_run():
1538
+ mlflow.log_param(<span class="string">"learning_rate"</span>, 0.01)
1539
+ mlflow.log_param(<span class="string">"n_estimators"</span>, 100)
1540
+
1541
+ model = train_model(X_train, y_train)
1542
+ accuracy = evaluate(model, X_test, y_test)
1543
+
1544
+ mlflow.log_metric(<span class="string">"accuracy"</span>, accuracy)
1545
+ mlflow.log_metric(<span class="string">"f1_score"</span>, f1)
1546
+ mlflow.sklearn.log_model(model, <span class="string">"model"</span>)
1547
+ </div>
1548
+ `,
1549
+ applications: `
1550
+ <h3>MLOps Tools Ecosystem</h3>
1551
+ <table>
1552
+ <tr><th>Category</th><th>Azure</th><th>Open Source</th></tr>
1553
+ <tr><td>Experiment Tracking</td><td>Azure ML Studio</td><td>MLflow, W&B</td></tr>
1554
+ <tr><td>Data Versioning</td><td>Azure ML Datasets</td><td>DVC, LakeFS</td></tr>
1555
+ <tr><td>Model Registry</td><td>Azure ML Registry</td><td>MLflow Registry</td></tr>
1556
+ <tr><td>Model Serving</td><td>Azure ML Endpoints</td><td>Seldon, BentoML</td></tr>
1557
+ <tr><td>Feature Store</td><td>Azure ML Feature Store</td><td>Feast</td></tr>
1558
+ <tr><td>Monitoring</td><td>Azure Monitor + ML</td><td>Evidently, WhyLabs</td></tr>
1559
+ </table>
1560
+ <div class="interview-box">
1561
+ <div class="box-title">📋 Probable Interview Questions</div>
1562
+ <div class="box-content">
1563
+ 1. What is MLOps and how does it differ from DevOps?<br>
1564
+ 2. Explain the MLOps maturity levels.<br>
1565
+ 3. What is data drift and how do you detect it?<br>
1566
+ 4. How do you version ML models and datasets?<br>
1567
+ 5. What is a model registry and why is it important?<br>
1568
+ 6. How do you implement CI/CD for ML models in Azure DevOps?<br>
1569
+ 7. What is a feature store and when do you need one?<br>
1570
+ 8. How do you implement A/B testing for ML models?<br>
1571
+ 9. What is MLflow and how does it integrate with Azure ML?<br>
1572
+ 10. How would you design an automated retraining pipeline triggered by drift?
1573
+ </div>
1574
+ </div>
1575
+ `
1576
+ },
1577
+ "monitoring": {
1578
+ concepts: `
1579
+ <h3>Deployment Verification (from PDF)</h3>
1580
+ <p>After deploying to AKS, verification ensures the application is running correctly:</p>
1581
+ <div class="info-box">
1582
+ <div class="box-title">✅ Verification Steps (from PDF)</div>
1583
+ <div class="box-content">
1584
+ <strong>1.</strong> Go to AKS cluster → Workloads → Verify "bankapp" is running<br>
1585
+ <strong>2.</strong> Go to Services and Ingresses → Get External IP<br>
1586
+ <strong>3.</strong> Access the app via the external IP<br>
1587
+ <strong>4.</strong> Confirm the application is working fine
1588
+ </div>
1589
+ </div>
1590
+ <h3>Pipeline Automation (from PDF)</h3>
1591
+ <p>To automate the pipeline so it triggers on every code change:</p>
1592
+ <div class="callout insight">
1593
+ <div class="callout-title">💡 From the PDF</div>
1594
+ Change <code>trigger: none</code> to <code>trigger: [main]</code> in the YAML pipeline. Then test by creating a new file in Azure Repos — the pipeline should start automatically.
1595
+ </div>
1596
+ <h3>Monitoring Stack</h3>
1597
+ <table>
1598
+ <tr><th>Layer</th><th>What to Monitor</th><th>Azure Tool</th></tr>
1599
+ <tr><td>Infrastructure</td><td>CPU, Memory, Disk, Network</td><td>Azure Monitor</td></tr>
1600
+ <tr><td>Application</td><td>Response time, Error rates, Throughput</td><td>Application Insights</td></tr>
1601
+ <tr><td>Kubernetes</td><td>Pod health, Node status, Resource usage</td><td>Container Insights</td></tr>
1602
+ <tr><td>Pipeline</td><td>Build time, Failure rate, Deployment frequency</td><td>Azure DevOps Analytics</td></tr>
1603
+ <tr><td>ML Models</td><td>Accuracy, Data drift, Prediction latency</td><td>Azure ML Monitoring</td></tr>
1604
+ </table>
1605
+ <h3>Email Notifications (from PDF)</h3>
1606
+ <div class="info-box">
1607
+ <div class="box-title">📧 Email Communication Service</div>
1608
+ <div class="box-content">
1609
+ The PDF demonstrates setting up Azure Email Communication Services to send pipeline notifications. This involves:<br>
1610
+ <strong>1.</strong> Create Email Communication Service resource<br>
1611
+ <strong>2.</strong> Add Azure subdomain or custom domain<br>
1612
+ <strong>3.</strong> Configure pipeline to send notifications on completion
1613
+ </div>
1614
+ </div>
1615
+ `,
1616
+ handson: `
1617
+ <h3>Azure Monitor & Application Insights</h3>
1618
+ <div class="code-block">
1619
+ <span class="comment"># Enable Container Insights on AKS</span>
1620
+ <span class="keyword">az</span> aks enable-addons \\
1621
+ --resource-group rg-devops \\
1622
+ --name my-aks-cluster \\
1623
+ --addons monitoring
1624
+
1625
+ <span class="comment"># Create Application Insights</span>
1626
+ <span class="keyword">az</span> monitor app-insights component create \\
1627
+ --app my-app \\
1628
+ --location eastus \\
1629
+ --resource-group rg-devops
1630
+ </div>
1631
+ <h3>Pipeline Notifications Setup</h3>
1632
+ <div class="code-block">
1633
+ <span class="comment"># Pipeline notification via Azure DevOps REST API</span>
1634
+ <span class="key">stages</span>:
1635
+ - <span class="key">stage</span>: Notify
1636
+ <span class="key">condition</span>: always()
1637
+ <span class="key">jobs</span>:
1638
+ - <span class="key">job</span>: send_notification
1639
+ <span class="key">steps</span>:
1640
+ - <span class="key">script</span>: |
1641
+ <span class="keyword">if</span> [ "$(Agent.JobStatus)" == "Succeeded" ]; then
1642
+ echo "Pipeline PASSED ✅"
1643
+ <span class="keyword">else</span>
1644
+ echo "Pipeline FAILED ❌"
1645
+ <span class="keyword">fi</span>
1646
+ - <span class="key">task</span>: SendEmail@1
1647
+ <span class="key">inputs</span>:
1648
+ <span class="key">to</span>: <span class="string">"team@company.com"</span>
1649
+ <span class="key">subject</span>: <span class="string">"Pipeline $(Build.BuildId) - $(Agent.JobStatus)"</span>
1650
+ </div>
1651
+ <h3>Alerting Rules</h3>
1652
+ <div class="code-block">
1653
+ <span class="comment"># Create Azure Monitor Alert for high CPU</span>
1654
+ <span class="keyword">az</span> monitor metrics alert create \\
1655
+ --name <span class="string">"high-cpu-alert"</span> \\
1656
+ --resource-group rg-devops \\
1657
+ --scopes /subscriptions/.../aks-cluster \\
1658
+ --condition <span class="string">"avg Percentage CPU > 80"</span> \\
1659
+ --action /subscriptions/.../action-group \\
1660
+ --window-size 5m \\
1661
+ --evaluation-frequency 1m
1662
+ </div>
1663
+ `,
1664
+ applications: `
1665
+ <h3>Observability Best Practices</h3>
1666
+ <div class="info-box">
1667
+ <div class="box-title">📊 The Three Pillars of Observability</div>
1668
+ <div class="box-content">
1669
+ <strong>Logs:</strong> Structured logging with correlation IDs (Azure Log Analytics)<br>
1670
+ <strong>Metrics:</strong> Time-series data for dashboards and alerting (Azure Monitor)<br>
1671
+ <strong>Traces:</strong> Distributed tracing across microservices (Application Insights)
1672
+ </div>
1673
+ </div>
1674
+ <div class="interview-box">
1675
+ <div class="box-title">📋 Probable Interview Questions</div>
1676
+ <div class="box-content">
1677
+ 1. How do you verify a deployment in AKS is successful?<br>
1678
+ 2. How do you automate a CI/CD pipeline to trigger on code push?<br>
1679
+ 3. What is Azure Monitor and Container Insights?<br>
1680
+ 4. Explain the three pillars of observability (Logs, Metrics, Traces).<br>
1681
+ 5. How do you set up email notifications for pipeline results?<br>
1682
+ 6. What are Azure Monitor Alerts and how do you configure them?<br>
1683
+ 7. How do you monitor Kubernetes cluster health?<br>
1684
+ 8. What is Application Insights and how does it work?<br>
1685
+ 9. How do you track DORA metrics in Azure DevOps?<br>
1686
+ 10. How would you set up monitoring for an ML model in production?
1687
+ </div>
1688
+ </div>
1689
+ `
1690
+ }
1691
+ };
1692
+
1693
+ function createModuleHTML(module) {
1694
+ const content = MODULE_CONTENT[module.id] || {};
1695
+ return `
1696
+ <div class="module" id="${module.id}-module">
1697
+ <button class="btn-back" onclick="switchTo('dashboard')">← Back to Dashboard</button>
1698
+ <header>
1699
+ <h1>${module.icon} ${module.title}</h1>
1700
+ <p class="subtitle">${module.description}</p>
1701
+ </header>
1702
+ <div class="tabs">
1703
+ <button class="tab-btn active" onclick="switchTab(event, '${module.id}-concepts')">📖 Key Concepts</button>
1704
+ <button class="tab-btn" onclick="switchTab(event, '${module.id}-handson')">🔧 Hands-On / YAML</button>
1705
+ <button class="tab-btn" onclick="switchTab(event, '${module.id}-applications')">🎯 Applications & Interview</button>
1706
+ </div>
1707
+ <div id="${module.id}-concepts" class="tab active">
1708
+ <div class="section">
1709
+ <h2>📖 Key Concepts</h2>
1710
+ ${content.concepts || '<p>Content loading...</p>'}
1711
+ </div>
1712
+ </div>
1713
+ <div id="${module.id}-handson" class="tab">
1714
+ <div class="section">
1715
+ <h2>🔧 Hands-On / YAML</h2>
1716
+ ${content.handson || '<p>Content loading...</p>'}
1717
+ </div>
1718
+ </div>
1719
+ <div id="${module.id}-applications" class="tab">
1720
+ <div class="section">
1721
+ <h2>🎯 Applications & Interview Questions</h2>
1722
+ ${content.applications || '<p>Content loading...</p>'}
1723
+ </div>
1724
+ </div>
1725
+ </div>
1726
+ `;
1727
+ }
1728
+
1729
+ function initDashboard() {
1730
+ const grid = document.getElementById("modulesGrid");
1731
+ const container = document.getElementById("modulesContainer");
1732
+ modules.forEach((module) => {
1733
+ const card = document.createElement("div");
1734
+ card.className = "card";
1735
+ card.style.borderColor = module.color;
1736
+ card.onclick = () => switchTo(module.id + "-module");
1737
+ card.innerHTML = `
1738
+ <div class="card-icon">${module.icon}</div>
1739
+ <h3>${module.title}</h3>
1740
+ <p>${module.description}</p>
1741
+ <span class="category-label">${module.category}</span>
1742
+ `;
1743
+ grid.appendChild(card);
1744
+ container.innerHTML += createModuleHTML(module);
1745
+ });
1746
+ }
1747
+
1748
+ function switchTo(target) {
1749
+ document.querySelectorAll('.dashboard, .module').forEach(el => el.classList.remove('active'));
1750
+ const elem = document.getElementById(target);
1751
+ if (elem) { elem.classList.add('active'); window.scrollTo(0, 0); }
1752
+ }
1753
+
1754
+ function switchTab(e, tabId) {
1755
+ const module = e.target.closest('.module');
1756
+ if (!module) return;
1757
+ module.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
1758
+ module.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
1759
+ const tab = document.getElementById(tabId);
1760
+ if (tab) tab.classList.add('active');
1761
+ e.target.classList.add('active');
1762
+ }
1763
+
1764
+ initDashboard();
1765
+ </script>
1766
+ </body>
1767
+
1768
+ </html>
index.html CHANGED
@@ -317,6 +317,10 @@
317
  --module-color: var(--color-accent-prompt);
318
  }
319
 
 
 
 
 
320
  /* Footer */
321
  .landing-footer {
322
  text-align: center;
@@ -683,6 +687,33 @@
683
  <span class="module-card-arrow">→</span>
684
  </div>
685
  </a>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
686
  </div>
687
  </main>
688
 
 
317
  --module-color: var(--color-accent-prompt);
318
  }
319
 
320
+ .module-devops {
321
+ --module-color: var(--color-accent-devops);
322
+ }
323
+
324
  /* Footer */
325
  .landing-footer {
326
  text-align: center;
 
687
  <span class="module-card-arrow">→</span>
688
  </div>
689
  </a>
690
+
691
+ <!-- Azure DevOps & MLOps -->
692
+ <a href="AzureDevops/index.html" class="module-card module-devops" data-progress-module="azure-devops">
693
+ <div class="module-card-header">
694
+ <span class="badge badge-new">New</span>
695
+ </div>
696
+ <div class="module-card-body">
697
+ <h2 class="module-card-title">Azure DevOps & MLOps</h2>
698
+ <p class="module-card-description">
699
+ CI/CD pipelines, Docker, Kubernetes, AKS, MLOps, Infrastructure as Code, and production ML
700
+ deployment on Azure.
701
+ </p>
702
+ </div>
703
+ <div class="module-progress">
704
+ <div class="module-progress-bar">
705
+ <div class="module-progress-fill progress-bar" style="width: 0%"></div>
706
+ </div>
707
+ <div class="module-progress-label">
708
+ <span>Progress</span>
709
+ <span class="progress-label-value">0/10</span>
710
+ </div>
711
+ </div>
712
+ <div class="module-card-footer">
713
+ <span class="module-card-cta">Explore DevOps</span>
714
+ <span class="module-card-arrow">→</span>
715
+ </div>
716
+ </a>
717
  </div>
718
  </main>
719
 
shared/css/design-system.css CHANGED
@@ -14,72 +14,99 @@
14
  --color-bg-secondary: #161b22;
15
  --color-bg-tertiary: #1a1f2e;
16
  --color-bg-elevated: #21262d;
17
-
18
  --color-text-primary: #e4e6eb;
19
  --color-text-secondary: #8b949e;
20
  --color-text-muted: #6e7681;
21
  --color-text-link: #58a6ff;
22
-
23
  /* Accent Colors */
24
- --color-accent-dl: #ff6b35; /* Deep Learning - Orange */
25
- --color-accent-ml: #00d4ff; /* Machine Learning - Cyan */
26
- --color-accent-math: #a371f7; /* Mathematics - Purple */
27
- --color-accent-stats: #2ecc71; /* Statistics - Green */
28
- --color-accent-viz: #ffce56; /* Visualization - Yellow */
29
- --color-accent-prompt: #f771b6; /* Prompt Eng - Pink */
30
-
 
 
 
 
 
 
 
 
31
  /* Semantic Colors */
32
  --color-success: #2ecc71;
33
  --color-warning: #f39c12;
34
  --color-error: #e74c3c;
35
  --color-info: #3498db;
36
-
37
  /* Borders */
38
  --color-border-default: #30363d;
39
  --color-border-muted: #21262d;
40
  --color-border-hover: #8b949e;
41
-
42
  /* Shadows */
43
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
44
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
45
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.5);
46
  --shadow-glow: 0 0 20px rgba(0, 212, 255, 0.2);
47
-
48
  /* === Typography === */
49
  --font-family-base: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
50
  --font-family-mono: 'Fira Code', 'Monaco', 'Consolas', monospace;
51
-
52
- --font-size-xs: 0.75rem; /* 12px */
53
- --font-size-sm: 0.875rem; /* 14px */
54
- --font-size-base: 1rem; /* 16px */
55
- --font-size-lg: 1.125rem; /* 18px */
56
- --font-size-xl: 1.25rem; /* 20px */
57
- --font-size-2xl: 1.5rem; /* 24px */
58
- --font-size-3xl: 1.875rem; /* 30px */
59
- --font-size-4xl: 2.25rem; /* 36px */
60
- --font-size-5xl: 3rem; /* 48px */
61
-
 
 
 
 
 
 
 
 
 
62
  --font-weight-normal: 400;
63
  --font-weight-medium: 500;
64
  --font-weight-semibold: 600;
65
  --font-weight-bold: 700;
66
-
67
  --line-height-tight: 1.25;
68
  --line-height-normal: 1.6;
69
  --line-height-relaxed: 1.8;
70
-
71
  /* === Spacing === */
72
- --space-1: 0.25rem; /* 4px */
73
- --space-2: 0.5rem; /* 8px */
74
- --space-3: 0.75rem; /* 12px */
75
- --space-4: 1rem; /* 16px */
76
- --space-5: 1.25rem; /* 20px */
77
- --space-6: 1.5rem; /* 24px */
78
- --space-8: 2rem; /* 32px */
79
- --space-10: 2.5rem; /* 40px */
80
- --space-12: 3rem; /* 48px */
81
- --space-16: 4rem; /* 64px */
82
-
 
 
 
 
 
 
 
 
 
 
83
  /* === Layout === */
84
  --container-max-width: 1400px;
85
  --sidebar-width: 280px;
@@ -88,12 +115,12 @@
88
  --border-radius-lg: 12px;
89
  --border-radius-xl: 16px;
90
  --border-radius-full: 9999px;
91
-
92
  /* === Transitions === */
93
  --transition-fast: 150ms ease;
94
  --transition-base: 200ms ease;
95
  --transition-slow: 300ms ease;
96
-
97
  /* === Z-Index Scale === */
98
  --z-dropdown: 100;
99
  --z-sticky: 200;
@@ -110,16 +137,16 @@
110
  --color-bg-secondary: #f6f8fa;
111
  --color-bg-tertiary: #f0f2f5;
112
  --color-bg-elevated: #ffffff;
113
-
114
  --color-text-primary: #1f2328;
115
  --color-text-secondary: #57606a;
116
  --color-text-muted: #6e7781;
117
  --color-text-link: #0969da;
118
-
119
  --color-border-default: #d0d7de;
120
  --color-border-muted: #d8dee4;
121
  --color-border-hover: #57606a;
122
-
123
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08);
124
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
125
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.12);
@@ -129,7 +156,9 @@
129
  2. CSS RESET & BASE STYLES
130
  ======================================== */
131
 
132
- *, *::before, *::after {
 
 
133
  margin: 0;
134
  padding: 0;
135
  box-sizing: border-box;
@@ -181,12 +210,15 @@ body {
181
 
182
  /* Reduced Motion */
183
  @media (prefers-reduced-motion: reduce) {
184
- *, *::before, *::after {
 
 
 
185
  animation-duration: 0.01ms !important;
186
  animation-iteration-count: 1 !important;
187
  transition-duration: 0.01ms !important;
188
  }
189
-
190
  html {
191
  scroll-behavior: auto;
192
  }
@@ -216,36 +248,92 @@ body {
216
  padding: 0 var(--space-6);
217
  }
218
 
219
- .flex { display: flex; }
220
- .flex-col { flex-direction: column; }
221
- .items-center { align-items: center; }
222
- .justify-center { justify-content: center; }
223
- .justify-between { justify-content: space-between; }
224
- .gap-2 { gap: var(--space-2); }
225
- .gap-4 { gap: var(--space-4); }
226
- .gap-6 { gap: var(--space-6); }
227
 
228
- .grid { display: grid; }
229
- .grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
230
- .grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
231
- .grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
232
 
233
  /* ========================================
234
  5. TYPOGRAPHY
235
  ======================================== */
236
 
237
- h1, h2, h3, h4, h5, h6 {
 
 
 
 
 
238
  font-weight: var(--font-weight-semibold);
239
  line-height: var(--line-height-tight);
240
  color: var(--color-text-primary);
241
  }
242
 
243
- h1 { font-size: var(--font-size-4xl); }
244
- h2 { font-size: var(--font-size-3xl); }
245
- h3 { font-size: var(--font-size-2xl); }
246
- h4 { font-size: var(--font-size-xl); }
247
- h5 { font-size: var(--font-size-lg); }
248
- h6 { font-size: var(--font-size-base); }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
249
 
250
  p {
251
  margin-bottom: var(--space-4);
@@ -262,7 +350,8 @@ a:hover {
262
  text-decoration: underline;
263
  }
264
 
265
- code, pre {
 
266
  font-family: var(--font-family-mono);
267
  }
268
 
@@ -311,8 +400,13 @@ pre {
311
  ======================================== */
312
 
313
  @keyframes fadeIn {
314
- from { opacity: 0; }
315
- to { opacity: 1; }
 
 
 
 
 
316
  }
317
 
318
  @keyframes fadeInUp {
@@ -320,6 +414,7 @@ pre {
320
  opacity: 0;
321
  transform: translateY(20px);
322
  }
 
323
  to {
324
  opacity: 1;
325
  transform: translateY(0);
@@ -331,6 +426,7 @@ pre {
331
  opacity: 0;
332
  transform: translateX(-20px);
333
  }
 
334
  to {
335
  opacity: 1;
336
  transform: translateX(0);
@@ -338,20 +434,46 @@ pre {
338
  }
339
 
340
  @keyframes pulse {
341
- 0%, 100% { opacity: 1; }
342
- 50% { opacity: 0.5; }
 
 
 
 
 
 
 
343
  }
344
 
345
  @keyframes spin {
346
- from { transform: rotate(0deg); }
347
- to { transform: rotate(360deg); }
 
 
 
 
 
 
 
 
 
 
 
 
 
348
  }
349
 
350
- .animate-fade-in { animation: fadeIn var(--transition-slow) ease; }
351
- .animate-fade-in-up { animation: fadeInUp var(--transition-slow) ease; }
352
- .animate-slide-in { animation: slideInRight var(--transition-slow) ease; }
353
- .animate-pulse { animation: pulse 2s ease infinite; }
354
- .animate-spin { animation: spin 1s linear infinite; }
 
 
 
 
 
 
355
 
356
  /* ========================================
357
  8. RESPONSIVE BREAKPOINTS
@@ -367,13 +489,18 @@ pre {
367
  :root {
368
  --sidebar-width: 100%;
369
  }
370
-
371
  .container {
372
  padding: 0 var(--space-4);
373
  }
374
-
375
- h1 { font-size: var(--font-size-3xl); }
376
- h2 { font-size: var(--font-size-2xl); }
 
 
 
 
 
377
  }
378
 
379
  @media (max-width: 480px) {
@@ -416,10 +543,21 @@ pre {
416
  box-shadow: 0 0 20px rgba(0, 212, 255, 0.15);
417
  }
418
 
419
- .glow-dl { box-shadow: 0 0 30px rgba(255, 107, 53, 0.2); }
420
- .glow-ml { box-shadow: 0 0 30px rgba(0, 212, 255, 0.2); }
421
- .glow-math { box-shadow: 0 0 30px rgba(163, 113, 247, 0.2); }
422
- .glow-stats { box-shadow: 0 0 30px rgba(46, 204, 113, 0.2); }
 
 
 
 
 
 
 
 
 
 
 
423
 
424
  /* Hover Scale Effects */
425
  .hover-lift {
@@ -452,6 +590,7 @@ pre {
452
  opacity: 0;
453
  transform: translateY(30px);
454
  }
 
455
  to {
456
  opacity: 1;
457
  transform: translateY(0);
@@ -463,23 +602,54 @@ pre {
463
  opacity: 0;
464
  transform: translateX(-20px);
465
  }
 
466
  to {
467
  opacity: 1;
468
  transform: translateX(0);
469
  }
470
  }
471
 
472
- .stagger { animation: staggerFadeIn 0.5s ease forwards; opacity: 0; }
473
- .stagger-1 { animation-delay: 0.05s; }
474
- .stagger-2 { animation-delay: 0.1s; }
475
- .stagger-3 { animation-delay: 0.15s; }
476
- .stagger-4 { animation-delay: 0.2s; }
477
- .stagger-5 { animation-delay: 0.25s; }
478
- .stagger-6 { animation-delay: 0.3s; }
479
- .stagger-7 { animation-delay: 0.35s; }
480
- .stagger-8 { animation-delay: 0.4s; }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
481
 
482
- .slide-in { animation: staggerSlideIn 0.4s ease forwards; opacity: 0; }
 
 
 
483
 
484
  /* ========================================
485
  11. ENHANCED INTERACTIVE STATES
@@ -534,38 +704,103 @@ pre {
534
  background-clip: text;
535
  }
536
 
537
- .text-balance { text-wrap: balance; }
538
- .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 
 
 
 
 
 
 
539
 
540
  /* Display Utilities */
541
- .hidden { display: none !important; }
542
- .block { display: block; }
543
- .inline-block { display: inline-block; }
544
- .flex-wrap { flex-wrap: wrap; }
545
- .flex-1 { flex: 1; }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
546
 
547
  /* Spacing Utilities */
548
- .mx-auto { margin-left: auto; margin-right: auto; }
549
- .mt-0 { margin-top: 0; }
550
- .mb-0 { margin-bottom: 0; }
551
- .p-0 { padding: 0; }
 
 
 
 
 
 
 
 
 
 
 
 
552
 
553
  /* Border Utilities */
554
- .rounded { border-radius: var(--border-radius-md); }
555
- .rounded-lg { border-radius: var(--border-radius-lg); }
556
- .rounded-full { border-radius: var(--border-radius-full); }
 
 
 
 
 
 
 
 
557
 
558
  /* Overflow */
559
- .overflow-hidden { overflow: hidden; }
560
- .overflow-auto { overflow: auto; }
 
 
 
 
 
561
 
562
  /* Position */
563
- .relative { position: relative; }
564
- .absolute { position: absolute; }
565
- .fixed { position: fixed; }
566
- .sticky { position: sticky; }
 
 
 
 
 
 
 
 
 
 
 
567
 
568
  /* Z-Index */
569
- .z-10 { z-index: 10; }
570
- .z-20 { z-index: 20; }
571
- .z-50 { z-index: 50; }
 
 
 
 
 
 
 
 
 
14
  --color-bg-secondary: #161b22;
15
  --color-bg-tertiary: #1a1f2e;
16
  --color-bg-elevated: #21262d;
17
+
18
  --color-text-primary: #e4e6eb;
19
  --color-text-secondary: #8b949e;
20
  --color-text-muted: #6e7681;
21
  --color-text-link: #58a6ff;
22
+
23
  /* Accent Colors */
24
+ --color-accent-dl: #ff6b35;
25
+ /* Deep Learning - Orange */
26
+ --color-accent-ml: #00d4ff;
27
+ /* Machine Learning - Cyan */
28
+ --color-accent-math: #a371f7;
29
+ /* Mathematics - Purple */
30
+ --color-accent-stats: #2ecc71;
31
+ /* Statistics - Green */
32
+ --color-accent-viz: #ffce56;
33
+ /* Visualization - Yellow */
34
+ --color-accent-prompt: #f771b6;
35
+ /* Prompt Eng - Pink */
36
+ --color-accent-devops: #0078D4;
37
+ /* Azure DevOps - Azure Blue */
38
+
39
  /* Semantic Colors */
40
  --color-success: #2ecc71;
41
  --color-warning: #f39c12;
42
  --color-error: #e74c3c;
43
  --color-info: #3498db;
44
+
45
  /* Borders */
46
  --color-border-default: #30363d;
47
  --color-border-muted: #21262d;
48
  --color-border-hover: #8b949e;
49
+
50
  /* Shadows */
51
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
52
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
53
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.5);
54
  --shadow-glow: 0 0 20px rgba(0, 212, 255, 0.2);
55
+
56
  /* === Typography === */
57
  --font-family-base: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
58
  --font-family-mono: 'Fira Code', 'Monaco', 'Consolas', monospace;
59
+
60
+ --font-size-xs: 0.75rem;
61
+ /* 12px */
62
+ --font-size-sm: 0.875rem;
63
+ /* 14px */
64
+ --font-size-base: 1rem;
65
+ /* 16px */
66
+ --font-size-lg: 1.125rem;
67
+ /* 18px */
68
+ --font-size-xl: 1.25rem;
69
+ /* 20px */
70
+ --font-size-2xl: 1.5rem;
71
+ /* 24px */
72
+ --font-size-3xl: 1.875rem;
73
+ /* 30px */
74
+ --font-size-4xl: 2.25rem;
75
+ /* 36px */
76
+ --font-size-5xl: 3rem;
77
+ /* 48px */
78
+
79
  --font-weight-normal: 400;
80
  --font-weight-medium: 500;
81
  --font-weight-semibold: 600;
82
  --font-weight-bold: 700;
83
+
84
  --line-height-tight: 1.25;
85
  --line-height-normal: 1.6;
86
  --line-height-relaxed: 1.8;
87
+
88
  /* === Spacing === */
89
+ --space-1: 0.25rem;
90
+ /* 4px */
91
+ --space-2: 0.5rem;
92
+ /* 8px */
93
+ --space-3: 0.75rem;
94
+ /* 12px */
95
+ --space-4: 1rem;
96
+ /* 16px */
97
+ --space-5: 1.25rem;
98
+ /* 20px */
99
+ --space-6: 1.5rem;
100
+ /* 24px */
101
+ --space-8: 2rem;
102
+ /* 32px */
103
+ --space-10: 2.5rem;
104
+ /* 40px */
105
+ --space-12: 3rem;
106
+ /* 48px */
107
+ --space-16: 4rem;
108
+ /* 64px */
109
+
110
  /* === Layout === */
111
  --container-max-width: 1400px;
112
  --sidebar-width: 280px;
 
115
  --border-radius-lg: 12px;
116
  --border-radius-xl: 16px;
117
  --border-radius-full: 9999px;
118
+
119
  /* === Transitions === */
120
  --transition-fast: 150ms ease;
121
  --transition-base: 200ms ease;
122
  --transition-slow: 300ms ease;
123
+
124
  /* === Z-Index Scale === */
125
  --z-dropdown: 100;
126
  --z-sticky: 200;
 
137
  --color-bg-secondary: #f6f8fa;
138
  --color-bg-tertiary: #f0f2f5;
139
  --color-bg-elevated: #ffffff;
140
+
141
  --color-text-primary: #1f2328;
142
  --color-text-secondary: #57606a;
143
  --color-text-muted: #6e7781;
144
  --color-text-link: #0969da;
145
+
146
  --color-border-default: #d0d7de;
147
  --color-border-muted: #d8dee4;
148
  --color-border-hover: #57606a;
149
+
150
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08);
151
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
152
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.12);
 
156
  2. CSS RESET & BASE STYLES
157
  ======================================== */
158
 
159
+ *,
160
+ *::before,
161
+ *::after {
162
  margin: 0;
163
  padding: 0;
164
  box-sizing: border-box;
 
210
 
211
  /* Reduced Motion */
212
  @media (prefers-reduced-motion: reduce) {
213
+
214
+ *,
215
+ *::before,
216
+ *::after {
217
  animation-duration: 0.01ms !important;
218
  animation-iteration-count: 1 !important;
219
  transition-duration: 0.01ms !important;
220
  }
221
+
222
  html {
223
  scroll-behavior: auto;
224
  }
 
248
  padding: 0 var(--space-6);
249
  }
250
 
251
+ .flex {
252
+ display: flex;
253
+ }
 
 
 
 
 
254
 
255
+ .flex-col {
256
+ flex-direction: column;
257
+ }
258
+
259
+ .items-center {
260
+ align-items: center;
261
+ }
262
+
263
+ .justify-center {
264
+ justify-content: center;
265
+ }
266
+
267
+ .justify-between {
268
+ justify-content: space-between;
269
+ }
270
+
271
+ .gap-2 {
272
+ gap: var(--space-2);
273
+ }
274
+
275
+ .gap-4 {
276
+ gap: var(--space-4);
277
+ }
278
+
279
+ .gap-6 {
280
+ gap: var(--space-6);
281
+ }
282
+
283
+ .grid {
284
+ display: grid;
285
+ }
286
+
287
+ .grid-cols-2 {
288
+ grid-template-columns: repeat(2, 1fr);
289
+ }
290
+
291
+ .grid-cols-3 {
292
+ grid-template-columns: repeat(3, 1fr);
293
+ }
294
+
295
+ .grid-cols-4 {
296
+ grid-template-columns: repeat(4, 1fr);
297
+ }
298
 
299
  /* ========================================
300
  5. TYPOGRAPHY
301
  ======================================== */
302
 
303
+ h1,
304
+ h2,
305
+ h3,
306
+ h4,
307
+ h5,
308
+ h6 {
309
  font-weight: var(--font-weight-semibold);
310
  line-height: var(--line-height-tight);
311
  color: var(--color-text-primary);
312
  }
313
 
314
+ h1 {
315
+ font-size: var(--font-size-4xl);
316
+ }
317
+
318
+ h2 {
319
+ font-size: var(--font-size-3xl);
320
+ }
321
+
322
+ h3 {
323
+ font-size: var(--font-size-2xl);
324
+ }
325
+
326
+ h4 {
327
+ font-size: var(--font-size-xl);
328
+ }
329
+
330
+ h5 {
331
+ font-size: var(--font-size-lg);
332
+ }
333
+
334
+ h6 {
335
+ font-size: var(--font-size-base);
336
+ }
337
 
338
  p {
339
  margin-bottom: var(--space-4);
 
350
  text-decoration: underline;
351
  }
352
 
353
+ code,
354
+ pre {
355
  font-family: var(--font-family-mono);
356
  }
357
 
 
400
  ======================================== */
401
 
402
  @keyframes fadeIn {
403
+ from {
404
+ opacity: 0;
405
+ }
406
+
407
+ to {
408
+ opacity: 1;
409
+ }
410
  }
411
 
412
  @keyframes fadeInUp {
 
414
  opacity: 0;
415
  transform: translateY(20px);
416
  }
417
+
418
  to {
419
  opacity: 1;
420
  transform: translateY(0);
 
426
  opacity: 0;
427
  transform: translateX(-20px);
428
  }
429
+
430
  to {
431
  opacity: 1;
432
  transform: translateX(0);
 
434
  }
435
 
436
  @keyframes pulse {
437
+
438
+ 0%,
439
+ 100% {
440
+ opacity: 1;
441
+ }
442
+
443
+ 50% {
444
+ opacity: 0.5;
445
+ }
446
  }
447
 
448
  @keyframes spin {
449
+ from {
450
+ transform: rotate(0deg);
451
+ }
452
+
453
+ to {
454
+ transform: rotate(360deg);
455
+ }
456
+ }
457
+
458
+ .animate-fade-in {
459
+ animation: fadeIn var(--transition-slow) ease;
460
+ }
461
+
462
+ .animate-fade-in-up {
463
+ animation: fadeInUp var(--transition-slow) ease;
464
  }
465
 
466
+ .animate-slide-in {
467
+ animation: slideInRight var(--transition-slow) ease;
468
+ }
469
+
470
+ .animate-pulse {
471
+ animation: pulse 2s ease infinite;
472
+ }
473
+
474
+ .animate-spin {
475
+ animation: spin 1s linear infinite;
476
+ }
477
 
478
  /* ========================================
479
  8. RESPONSIVE BREAKPOINTS
 
489
  :root {
490
  --sidebar-width: 100%;
491
  }
492
+
493
  .container {
494
  padding: 0 var(--space-4);
495
  }
496
+
497
+ h1 {
498
+ font-size: var(--font-size-3xl);
499
+ }
500
+
501
+ h2 {
502
+ font-size: var(--font-size-2xl);
503
+ }
504
  }
505
 
506
  @media (max-width: 480px) {
 
543
  box-shadow: 0 0 20px rgba(0, 212, 255, 0.15);
544
  }
545
 
546
+ .glow-dl {
547
+ box-shadow: 0 0 30px rgba(255, 107, 53, 0.2);
548
+ }
549
+
550
+ .glow-ml {
551
+ box-shadow: 0 0 30px rgba(0, 212, 255, 0.2);
552
+ }
553
+
554
+ .glow-math {
555
+ box-shadow: 0 0 30px rgba(163, 113, 247, 0.2);
556
+ }
557
+
558
+ .glow-stats {
559
+ box-shadow: 0 0 30px rgba(46, 204, 113, 0.2);
560
+ }
561
 
562
  /* Hover Scale Effects */
563
  .hover-lift {
 
590
  opacity: 0;
591
  transform: translateY(30px);
592
  }
593
+
594
  to {
595
  opacity: 1;
596
  transform: translateY(0);
 
602
  opacity: 0;
603
  transform: translateX(-20px);
604
  }
605
+
606
  to {
607
  opacity: 1;
608
  transform: translateX(0);
609
  }
610
  }
611
 
612
+ .stagger {
613
+ animation: staggerFadeIn 0.5s ease forwards;
614
+ opacity: 0;
615
+ }
616
+
617
+ .stagger-1 {
618
+ animation-delay: 0.05s;
619
+ }
620
+
621
+ .stagger-2 {
622
+ animation-delay: 0.1s;
623
+ }
624
+
625
+ .stagger-3 {
626
+ animation-delay: 0.15s;
627
+ }
628
+
629
+ .stagger-4 {
630
+ animation-delay: 0.2s;
631
+ }
632
+
633
+ .stagger-5 {
634
+ animation-delay: 0.25s;
635
+ }
636
+
637
+ .stagger-6 {
638
+ animation-delay: 0.3s;
639
+ }
640
+
641
+ .stagger-7 {
642
+ animation-delay: 0.35s;
643
+ }
644
+
645
+ .stagger-8 {
646
+ animation-delay: 0.4s;
647
+ }
648
 
649
+ .slide-in {
650
+ animation: staggerSlideIn 0.4s ease forwards;
651
+ opacity: 0;
652
+ }
653
 
654
  /* ========================================
655
  11. ENHANCED INTERACTIVE STATES
 
704
  background-clip: text;
705
  }
706
 
707
+ .text-balance {
708
+ text-wrap: balance;
709
+ }
710
+
711
+ .truncate {
712
+ overflow: hidden;
713
+ text-overflow: ellipsis;
714
+ white-space: nowrap;
715
+ }
716
 
717
  /* Display Utilities */
718
+ .hidden {
719
+ display: none !important;
720
+ }
721
+
722
+ .block {
723
+ display: block;
724
+ }
725
+
726
+ .inline-block {
727
+ display: inline-block;
728
+ }
729
+
730
+ .flex-wrap {
731
+ flex-wrap: wrap;
732
+ }
733
+
734
+ .flex-1 {
735
+ flex: 1;
736
+ }
737
 
738
  /* Spacing Utilities */
739
+ .mx-auto {
740
+ margin-left: auto;
741
+ margin-right: auto;
742
+ }
743
+
744
+ .mt-0 {
745
+ margin-top: 0;
746
+ }
747
+
748
+ .mb-0 {
749
+ margin-bottom: 0;
750
+ }
751
+
752
+ .p-0 {
753
+ padding: 0;
754
+ }
755
 
756
  /* Border Utilities */
757
+ .rounded {
758
+ border-radius: var(--border-radius-md);
759
+ }
760
+
761
+ .rounded-lg {
762
+ border-radius: var(--border-radius-lg);
763
+ }
764
+
765
+ .rounded-full {
766
+ border-radius: var(--border-radius-full);
767
+ }
768
 
769
  /* Overflow */
770
+ .overflow-hidden {
771
+ overflow: hidden;
772
+ }
773
+
774
+ .overflow-auto {
775
+ overflow: auto;
776
+ }
777
 
778
  /* Position */
779
+ .relative {
780
+ position: relative;
781
+ }
782
+
783
+ .absolute {
784
+ position: absolute;
785
+ }
786
+
787
+ .fixed {
788
+ position: fixed;
789
+ }
790
+
791
+ .sticky {
792
+ position: sticky;
793
+ }
794
 
795
  /* Z-Index */
796
+ .z-10 {
797
+ z-index: 10;
798
+ }
799
+
800
+ .z-20 {
801
+ z-index: 20;
802
+ }
803
+
804
+ .z-50 {
805
+ z-index: 50;
806
+ }
shared/js/search.js CHANGED
@@ -146,6 +146,25 @@
146
  { title: 'Chain of Thought', section: 'topic-4' },
147
  { title: 'System Prompts', section: 'topic-5' }
148
  ]
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
149
  }
150
  ];
151
 
@@ -444,7 +463,7 @@
444
  // Find the repo root - it's the first path segment that isn't a module folder
445
  const moduleFolders = ['DeepLearning', 'ml_complete-all-topics', 'complete-statistics',
446
  'math-ds-complete', 'feature-engineering', 'Visualization',
447
- 'prompt-engineering-guide', 'ML', 'shared'];
448
  let rootIndex = 0;
449
  for (let i = 0; i < pathParts.length; i++) {
450
  if (moduleFolders.includes(pathParts[i])) {
 
146
  { title: 'Chain of Thought', section: 'topic-4' },
147
  { title: 'System Prompts', section: 'topic-5' }
148
  ]
149
+ },
150
+ {
151
+ id: 'azure-devops',
152
+ name: 'Azure DevOps & MLOps',
153
+ path: '/AzureDevops/index.html',
154
+ icon: '☁️',
155
+ color: '#0078D4',
156
+ topics: [
157
+ { title: 'DevOps Fundamentals', section: 'devops-fundamentals' },
158
+ { title: 'Azure DevOps Setup', section: 'azure-setup' },
159
+ { title: 'Infrastructure & Networking', section: 'infrastructure' },
160
+ { title: 'CI/CD Pipeline (YAML)', section: 'cicd' },
161
+ { title: 'Build & Test', section: 'build-test' },
162
+ { title: 'Docker & Containers', section: 'docker' },
163
+ { title: 'Kubernetes & AKS', section: 'kubernetes' },
164
+ { title: 'Service Connections & Security', section: 'security' },
165
+ { title: 'MLOps Pipeline', section: 'mlops' },
166
+ { title: 'Monitoring & Automation', section: 'monitoring' }
167
+ ]
168
  }
169
  ];
170
 
 
463
  // Find the repo root - it's the first path segment that isn't a module folder
464
  const moduleFolders = ['DeepLearning', 'ml_complete-all-topics', 'complete-statistics',
465
  'math-ds-complete', 'feature-engineering', 'Visualization',
466
+ 'prompt-engineering-guide', 'AzureDevops', 'ML', 'shared'];
467
  let rootIndex = 0;
468
  for (let i = 0; i < pathParts.length; i++) {
469
  if (moduleFolders.includes(pathParts[i])) {