-
Notifications
You must be signed in to change notification settings - Fork 0
/
azure_learning_roadmap.html
369 lines (338 loc) · 16.7 KB
/
azure_learning_roadmap.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Skunkworks Academy presents an enhanced Azure Learning Roadmap tailored for Senior Platform Engineers, covering Azure DevOps, cloud tools, and more.">
<link href="https://github.com/skunkworksza/www/blob/main/assets/skunkworks/logo-skunkworks-trans%2040%20%C3%97%2040%20px.png?raw=true" rel="icon" type="image/png" />
<title>Azure Learning Roadmap for Azure DevOps Senior Platform Engineers | Skunkworks Academy</title>
<!-- Load Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- External Libraries -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/ScrollTrigger.min.js"></script>
<!-- Tailwind CSS Custom Configuration -->
<script>
tailwind.config = {
theme: {
extend: {
colors: {
msblue: '#0078D4',
mslight: '#50E6FF',
msdark: '#005A9E',
},
animation: {
'bounce-slow': 'bounce 3s infinite',
}
}
}
}
</script>
<!-- Custom Styles -->
<style>
/* Flip card styles */
.flip-card {
perspective: 1000px;
}
.flip-card-inner {
transition: transform 0.6s;
transform-style: preserve-3d;
}
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}
.flip-card-front, .flip-card-back {
backface-visibility: hidden;
}
.flip-card-back {
transform: rotateY(180deg);
}
/* Disclosed list styles */
.disclosed-list {
background-color: #f9f9f9;
border-radius: 5px;
padding: 10px;
margin-bottom: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
.disclosed-list:hover {
transform: translateY(-5px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
.disclosed-list-header {
font-size: 1.1rem;
font-weight: bold;
margin-bottom: 5px;
}
.disclosed-list-content {
padding-left: 20px;
list-style-type: disc;
}
/* Accessibility improvements */
img[alt] {
max-height: 100%;
width: auto;
}
/* Animated background */
.animated-bg {
background: linear-gradient(-45deg, #0078D4, #50E6FF, #005A9E, #00B7C3);
background-size: 400% 400%;
animation: gradient 15s ease infinite;
}
@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
/* Responsive padding for container */
@media (min-width: 640px) {
.container {
max-width: 640px;
}
}
@media (min-width: 768px) {
.container {
max-width: 768px;
}
}
@media (min-width: 1024px) {
.container {
max-width: 1024px;
}
}
</style>
</head>
<body class="bg-gray-100 font-sans antialiased">
<!-- Header Section -->
<header class="animated-bg text-white py-6">
<div class="container mx-auto px-4 flex items-center justify-between">
<div>
<h1 class="text-4xl font-bold animate-bounce-slow">Azure Learning Roadmap</h1>
<p class="mt-2 text-lg">For Azure DevOps Senior Platform Engineers</p>
</div>
<img src="https://azure.microsoft.com/svghandler/azure-blue.svg" alt="Microsoft Azure Logo" class="h-12" loading="lazy">
</div>
</header>
<main class="container mx-auto px-4 py-8">
<!-- Learning Path Overview Section -->
<section class="mb-12 opacity-0" id="learning-path-overview">
<h2 class="text-3xl font-semibold mb-4 text-msdark">Learning Path Overview</h2>
<p class="mb-6 text-lg leading-relaxed">
Embark on a comprehensive journey through Microsoft Azure, tailored specifically for Senior Platform Engineers in the retail sector. This program equips you with the skills and knowledge needed to leverage Azure's powerful cloud capabilities. Each session is 30-60 minutes long, designed to run outside of office hours, ensuring a balance between learning and professional commitments.
</p>
<!-- Week 1: Core Azure Tools & Cloud Fundamentals -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="bg-white rounded-lg shadow-md p-6 border-t-4 border-msblue">
<h3 class="text-xl font-semibold mb-4 text-msblue">Week 1: Core Azure Tools & Cloud Fundamentals</h3>
<div class="disclosed-list mb-4">
<div class="disclosed-list-header font-semibold">Azure Portal (Day 1)</div>
<ul class="disclosed-list-content list-disc pl-5 mt-2">
<li>Master the Azure user interface, manage resources efficiently, and explore key services such as Virtual Machines, App Services, and Azure Storage.</li>
<li>Learn to navigate the Azure portal effectively and understand resource management principles.</li>
</ul>
</div>
<div class="disclosed-list mb-4">
<div class="disclosed-list-header font-semibold">GitHub & GitHub Actions (Day 2)</div>
<ul class="disclosed-list-content list-disc pl-5 mt-2">
<li>Dive into version control with Git, create and manage repositories, and automate workflows using GitHub Actions.</li>
<li>Set up CI/CD pipelines for streamlined deployments to Azure.</li>
<li>Learn best practices for collaborative development and code review processes.</li>
</ul>
</div>
<div class="disclosed-list mb-4">
<div class="disclosed-list-header font-semibold">SSMS & Azure SQL Databases (Day 3)</div>
<ul class="disclosed-list-content list-disc pl-5 mt-2">
<li>Explore SQL Server Management Studio, connect to Azure SQL Databases, and perform essential cloud-based database management tasks.</li>
<li>Understand data migration strategies and security best practices for Azure SQL.</li>
</ul>
</div>
<p class="mt-4 text-sm italic">Hands-on Project: Deploy a basic web application to Azure App Service using GitHub Actions for continuous deployment.</p>
</div>
</div>
</section>
<!-- Other sections (Week 2, Pricing, Skills Progress, Key Features, FAQs) would follow here -->
<!-- FAQs Section -->
<section class="mb-12 opacity-0" id="faqs">
<h2 class="text-3xl font-semibold mb-4 text-msdark">Frequently Asked Questions</h2>
<div class="space-y-4">
<details class="bg-white rounded-lg shadow-md p-6">
<summary class="text-xl font-semibold cursor-pointer text-msblue">What prerequisites are required for this course?</summary>
<p class="mt-2 leading-relaxed">Basic IT knowledge and familiarity with cloud concepts are recommended. Experience in retail IT is beneficial but not mandatory. No specific Azure experience is required, as we'll cover everything from the ground up.</p>
</details>
<details class="bg-white rounded-lg shadow-md p-6">
<summary class="text-xl font-semibold cursor-pointer text-msblue">How long does the program take to complete?</summary>
<p class="mt-2 leading-relaxed">The program is designed to be completed in 4 weeks, with detailed modules spread across each week. Each day consists of a 30-60 minute session, allowing you to balance learning with your professional commitments.</p>
</details>
</div>
</section>
</main>
<footer class="bg-msdark text-white py-8">
<div class="container mx-auto px-4">
<div class="flex flex-wrap justify-between items-start">
<!-- Branding Section -->
<div class="w-full md:w-1/2 lg:w-1/3 mb-6">
<h3 class="text-2xl font-bold mb-2">Skunkworks Academy</h3>
<p class="leading-relaxed">Empowering Senior Platform Engineers with cutting-edge Azure expertise and industry-focused learning experiences.</p>
</div>
<!-- Contact Section -->
<div class="w-full md:w-1/2 lg:w-1/3 mb-6">
<h4 class="text-lg font-semibold mb-2">Contact Us</h4>
<ul class="leading-relaxed">
<li>Email: <a href="mailto:support@skunkworksacademy.com" class="underline hover:text-mslight">support@skunkworksacademy.com</a></li>
<li>Phone: <a href="tel:+27871645398" class="underline hover:text-mslight">+27 87 164 5398</a></li>
</ul>
</div>
</div>
<!-- Divider -->
<hr class="my-6 border-mslight">
<!-- Legal Section -->
<div class="text-center">
<p class="mb-4">© 2024 Skunkworks Academy. All rights reserved.</p>
<p class="text-sm leading-relaxed">Disclaimer: Skunkworks Academy provides training and educational materials. All materials and course content are proprietary and must not be distributed without prior consent. Skunkworks Academy is not responsible for any direct or indirect loss caused by the use of its content. Confidentiality agreements may apply for specific engagements. By using this roadmap, you agree to these terms.</p>
</div>
</div>
</footer>
<script>
// Gantt Chart
google.charts.load('current', {'packages': ['gantt']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Task ID');
data.addColumn('string', 'Task Name');
data.addColumn('string', 'Resource');
data.addColumn('date', 'Start Date');
data.addColumn('date', 'End Date');
data.addColumn('number', 'Duration');
data.addColumn('number', 'Percent Complete');
data.addColumn('string', 'Dependencies');
data.addRows([
['1', 'Core Azure Tools & Cloud Fundamentals', 'Azure', new Date(2024, 9, 10), new Date(2024, 9, 14), null, 100, null],
['2', 'DevOps & Automation', 'DevOps', new Date(2024, 9, 15), new Date(2024, 9, 19), null, 100, '1'],
['3', 'Cost Optimization & Monitoring', 'Cost', new Date(2024, 9, 22), new Date(2024, 9, 26), null, 100, '2'],
['4', 'AI & Data Tools', 'AI', new Date(2024, 9, 29), new Date(2024, 10, 2), null, 100, '3']
]);
var options = {
height: 400,
gantt: {
trackHeight: 35,
criticalPathEnabled: true,
arrow: {
angle: 100,
width: 2,
color: '#007bff'
}
}
};
var chart = new google.visualization.Gantt(document.getElementById('gantt_chart_div'));
chart.draw(data, options);
window.addEventListener('resize', function() {
chart.draw(data, options);
});
}
// Skills Progress Chart
var ctx = document.getElementById('skillsChart').getContext('2d');
var skillsChart = new Chart(ctx, {
type: 'radar',
data: {
labels: ['Azure Fundamentals', 'DevOps', 'Kubernetes', 'AI & ML', 'Data Management', 'Cloud Security'],
datasets: [{
label: 'Your Skills',
data: [0, 0, 0, 0, 0, 0],
backgroundColor: 'rgba(0, 120, 212, 0.2)',
borderColor: 'rgba(0, 120, 212, 1)',
pointBackgroundColor: 'rgba(0, 120, 212, 1)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgba(0, 120, 212, 1)'
}]
},
options: {
scale: {
ticks: {
beginAtZero: true,
max: 100
}
}
}
});
// Function to update skills progress
function updateSkillsProgress(skill, value) {
const index = skillsChart.data.labels.indexOf(skill);
if (index !== -1) {
skillsChart.data.datasets[0].data[index] = value;
skillsChart.update();
}
}
// Simulating skills progress update
setTimeout(() => updateSkillsProgress('Azure Fundamentals', 60), 1000);
setTimeout(() => updateSkillsProgress('DevOps', 75), 2000);
setTimeout(() => updateSkillsProgress('Kubernetes', 40), 3000);
setTimeout(() => updateSkillsProgress('AI & ML', 30), 4000);
setTimeout(() => updateSkillsProgress('Data Management', 50), 5000);
setTimeout(() => updateSkillsProgress('Cloud Security', 65), 6000);
// GSAP Animations
gsap.registerPlugin(ScrollTrigger);
// Fade in sections on scroll
gsap.utils.toArray("section").forEach(section => {
gsap.from(section, {
opacity: 0,
y: 50,
duration: 1,
scrollTrigger: {
trigger: section,
start: "top 80%",
end: "bottom 20%",
toggleActions: "play none none reverse"
}
});
});
// Animate contact button
gsap.to("#contactButton", {
scale: 1.1,
duration: 0.5,
repeat: -1,
yoyo: true
});
// Contact Form Modal
const contactButton = document.getElementById('contactButton');
contactButton.addEventListener('click', (e) => {
e.preventDefault();
const modal = document.createElement('div');
modal.className = 'fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50';
modal.innerHTML = `
<div class="bg-white p-8 rounded-lg max-w-md w-full">
<h2 class="text-2xl font-bold mb-4">Contact Us</h2>
<form id="contactForm">
<input type="text" placeholder="Name" class="w-full p-2 mb-4 border rounded" required>
<input type="email" placeholder="Email" class="w-full p-2 mb-4 border rounded" required>
<textarea placeholder="Message" class="w-full p-2 mb-4 border rounded" rows="4" required></textarea>
<button type="submit" class="bg-msblue text-white py-2 px-4 rounded hover:bg-msdark transition duration-300">Send</button>
</form>
<button id="closeModal" class="mt-4 text-msblue hover:underline">Close</button>
</div>
`;
document.body.appendChild(modal);
const closeModal = document.getElementById('closeModal');
closeModal.addEventListener('click', () => {
document.body.removeChild(modal);
});
const contactForm = document.getElementById('contactForm');
contactForm.addEventListener('submit', (e) => {
e.preventDefault();
alert('Thank you for your message. We will get back to you soon!');
document.body.removeChild(modal);
});
});
</script>
</body>
</html>