-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathlearn.html
More file actions
595 lines (572 loc) · 29.5 KB
/
learn.html
File metadata and controls
595 lines (572 loc) · 29.5 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Learn — Cybersecurity, Hacking & Linux</title>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: { brand: "#10b981" },
},
},
};
</script>
<style>
.fade-out {
opacity: 0;
transform: translateY(6px);
transition: opacity 0.25s ease, transform 0.25s ease;
}
.fade-in {
opacity: 1;
transform: translateY(0px);
transition: opacity 0.25s ease, transform 0.25s ease;
}
.gradient-text {
background: linear-gradient(to right, #10b981, #34d399);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
</style>
</head>
<body class="bg-gray-900 text-white">
<!-- NAVBAR -->
<header class="fixed inset-x-0 top-0 z-50 bg-gray-900/90 backdrop-blur border-b border-white/10">
<nav class="mx-auto flex max-w-7xl items-center justify-between px-4 sm:px-6 lg:px-8 h-14" aria-label="Global">
<div class="flex items-center gap-2">
<a href="/" class="flex items-center gap-2 group">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-brand group-hover:scale-110 transition-transform">
<path d="M11 21.73a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73z"/>
<path d="M12 22V12"/>
<polyline points="3.29 7 12 12 20.71 7"/>
<path d="m7.5 4.27 9 5.15"/>
</svg>
<span class="font-bold">Serhii</span>
</a>
</div>
<div class="flex items-center gap-6 text-sm">
<a href="/shop" class="text-gray-300 hover:text-white transition">Shop</a>
<a href="/learn" class="text-brand font-semibold">Learn</a>
<a href="/contact" class="text-gray-300 hover:text-white transition">Contact</a>
</div>
</nav>
</header>
<div class="flex min-h-screen pt-14">
<!-- SIDEBAR -->
<aside class="hidden lg:block w-72 bg-gray-900/40 border-r border-white/10 p-6 space-y-6 sticky top-14 h-[calc(100vh-3.5rem)] overflow-y-auto">
<div>
<h1 class="text-2xl font-bold">
<span class="gradient-text">Learn</span>
</h1>
<p class="text-sm text-gray-400 mt-2">Cybersecurity • Hacking • Linux • Coding</p>
</div>
<div class="space-y-1 text-sm" id="lessonLinks">
<button data-lesson="1" class="block w-full text-left px-3 py-2 rounded-lg bg-brand/10 text-brand font-medium border border-brand/20">1 — What is Cybersecurity?</button>
<button data-lesson="2" class="block w-full text-left px-3 py-2 rounded-lg text-gray-300 hover:text-white hover:bg-gray-800/50 transition">2 — Types of Attacks</button>
<button data-lesson="3" class="block w-full text-left px-3 py-2 rounded-lg text-gray-300 hover:text-white hover:bg-gray-800/50 transition">3 — Malware Basics</button>
<button data-lesson="4" class="block w-full text-left px-3 py-2 rounded-lg text-gray-300 hover:text-white hover:bg-gray-800/50 transition">4 — Social Engineering</button>
<button data-lesson="5" class="block w-full text-left px-3 py-2 rounded-lg text-gray-300 hover:text-white hover:bg-gray-800/50 transition">5 — Passwords & Auth</button>
<button data-lesson="6" class="block w-full text-left px-3 py-2 rounded-lg text-gray-300 hover:text-white hover:bg-gray-800/50 transition">6 — Networks 101</button>
<button data-lesson="7" class="block w-full text-left px-3 py-2 rounded-lg text-gray-300 hover:text-white hover:bg-gray-800/50 transition">7 — Ethical Hacking</button>
<button data-lesson="8" class="block w-full text-left px-3 py-2 rounded-lg text-gray-300 hover:text-white hover:bg-gray-800/50 transition">8 — Safe Lab Setup (Linux)</button>
<button data-lesson="9" class="block w-full text-left px-3 py-2 rounded-lg text-gray-300 hover:text-white hover:bg-gray-800/50 transition">9 — Linux Terminal Basics</button>
<button data-lesson="10" class="block w-full text-left px-3 py-2 rounded-lg text-gray-300 hover:text-white hover:bg-gray-800/50 transition">10 — Files & Permissions</button>
<button data-lesson="11" class="block w-full text-left px-3 py-2 rounded-lg text-gray-300 hover:text-white hover:bg-gray-800/50 transition">11 — Web Basics (HTTP)</button>
<button data-lesson="12" class="block w-full text-left px-3 py-2 rounded-lg text-gray-300 hover:text-white hover:bg-gray-800/50 transition">12 — Input & XSS Overview</button>
<button data-lesson="13" class="block w-full text-left px-3 py-2 rounded-lg text-gray-300 hover:text-white hover:bg-gray-800/50 transition">13 — SQL Injection Overview</button>
<button data-lesson="14" class="block w-full text-left px-3 py-2 rounded-lg text-gray-300 hover:text-white hover:bg-gray-800/50 transition">14 — Logging & Monitoring</button>
<button data-lesson="15" class="block w-full text-left px-3 py-2 rounded-lg text-gray-300 hover:text-white hover:bg-gray-800/50 transition">15 — JavaScript for Security</button>
<button data-lesson="16" class="block w-full text-left px-3 py-2 rounded-lg text-gray-300 hover:text-white hover:bg-gray-800/50 transition">16 — Python for Automation</button>
<button data-lesson="17" class="block w-full text-left px-3 py-2 rounded-lg text-gray-300 hover:text-white hover:bg-gray-800/50 transition">17 — OSINT Basics</button>
<button data-lesson="18" class="block w-full text-left px-3 py-2 rounded-lg text-gray-300 hover:text-white hover:bg-gray-800/50 transition">18 — Personal Security & OPSEC</button>
<button data-lesson="19" class="block w-full text-left px-3 py-2 rounded-lg text-gray-300 hover:text-white hover:bg-gray-800/50 transition">19 — CTFs & Practice</button>
<button data-lesson="20" class="block w-full text-left px-3 py-2 rounded-lg text-gray-300 hover:text-white hover:bg-gray-800/50 transition">20 — Next Steps</button>
</div>
</aside>
<!-- MAIN CONTENT -->
<main class="flex-1 p-6 md:p-12 max-w-4xl mx-auto">
<!-- Mobile lesson selector -->
<div class="lg:hidden mb-8">
<label class="block text-sm font-medium text-gray-300 mb-2">Select Lesson</label>
<select id="mobileLessonSelect" class="w-full bg-gray-800 border border-white/10 rounded-lg px-4 py-2 text-white">
<option value="1">1 — What is Cybersecurity?</option>
<option value="2">2 — Types of Attacks</option>
<option value="3">3 — Malware Basics</option>
<option value="4">4 — Social Engineering</option>
<option value="5">5 — Passwords & Auth</option>
<option value="6">6 — Networks 101</option>
<option value="7">7 — Ethical Hacking</option>
<option value="8">8 — Safe Lab Setup (Linux)</option>
<option value="9">9 — Linux Terminal Basics</option>
<option value="10">10 — Files & Permissions</option>
<option value="11">11 — Web Basics (HTTP)</option>
<option value="12">12 — Input & XSS Overview</option>
<option value="13">13 — SQL Injection Overview</option>
<option value="14">14 — Logging & Monitoring</option>
<option value="15">15 — JavaScript for Security</option>
<option value="16">16 — Python for Automation</option>
<option value="17">17 — OSINT Basics</option>
<option value="18">18 — Personal Security & OPSEC</option>
<option value="19">19 — CTFs & Practice</option>
<option value="20">20 — Next Steps</option>
</select>
</div>
<div id="lessonContent" class="fade-in prose prose-invert max-w-none"></div>
<div class="flex justify-between mt-12 pt-8 border-t border-white/10">
<button id="backBtn" class="flex items-center gap-2 px-6 py-3 rounded-lg bg-gray-800 hover:bg-gray-700 transition text-gray-200 hover:text-white disabled:opacity-40 disabled:cursor-not-allowed">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
</svg>
<span>Back</span>
</button>
<button id="nextBtn" class="flex items-center gap-2 px-6 py-3 rounded-lg bg-brand hover:bg-brand/80 transition text-black font-semibold disabled:opacity-40 disabled:cursor-not-allowed">
<span>Next</span>
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
</svg>
</button>
</div>
</main>
</div>
<script>
const lessons = {
1: {
title: "Lesson 1 — What is Cybersecurity?",
body: `
<p class="text-gray-300 mb-4 leading-relaxed">
Cybersecurity is about protecting computers, phones, servers, and networks from attacks.
Instead of thinking "my device just works", cybersecurity forces you to ask "what could break this?"
</p>
<p class="text-gray-300 mb-4 leading-relaxed">
Good security is a mix of technology (firewalls, encryption, updates), people (not falling for scams),
and processes (backups, policies, rules). If any of those are weak, attackers get an opening.
</p>
<p class="text-gray-300 leading-relaxed">
In this course you'll see both sides: how attacks work at a high level and how to defend against them,
plus how Linux and coding fit into all of it.
</p>
`
},
2: {
title: "Lesson 2 — Types of Cyber Attacks",
body: `
<p class="text-gray-300 mb-4 leading-relaxed">
There are many kinds of attacks, but a few categories show up over and over again:
malware, social engineering, web attacks, network attacks, and account takeovers.
</p>
<p class="text-gray-300 mb-4 leading-relaxed">
Malware is software designed to harm or spy. Social engineering targets the human brain:
phishing emails, fake login pages, "tech support" scammers, and so on. Web attacks try
to break websites by abusing how input is handled.
</p>
<p class="text-gray-300 leading-relaxed">
As you go through the lessons, try to classify each example: "Is this hitting the human,
the software, or the network?" That mindset is exactly how defenders think.
</p>
`
},
3: {
title: "Lesson 3 — Malware Basics",
body: `
<p class="text-gray-300 mb-4 leading-relaxed">
Malware includes viruses, worms, trojans, ransomware, spyware, and more. Each type has
the same core idea: run code on a system without the user really wanting it there.
</p>
<p class="text-gray-300 mb-4 leading-relaxed">
A virus usually attaches to another program or file. A worm spreads on its own across
networks. Trojans pretend to be helpful apps but hide bad behavior. Ransomware encrypts
files and demands payment to unlock them.
</p>
<p class="text-gray-300 leading-relaxed">
Modern operating systems, browsers, and antivirus tools are all built with malware in mind.
As you learn more, you'll see that writing malware is much less interesting than
learning to spot and block it.
</p>
`
}, 4: {
title: "Lesson 4 — Social Engineering & Phishing",
body: `
<p class="text-gray-300 mb-4 leading-relaxed">
Social engineering is hacking people instead of machines. If an attacker can convince you
to share your password, click a link, or run a program, they don't need a fancy exploit.
</p>
<p class="text-gray-300 mb-4 leading-relaxed">
Phishing emails and fake login pages are a classic example. They often copy the design of
popular sites and pressure you with messages like "your account will be closed in 24 hours".
The goal is to make you panic and act quickly.
</p>
<p class="text-gray-300 leading-relaxed">
Defending against this is mostly about habits: check the URL, be suspicious of "urgent"
messages, and never type your password into a page you reached from a random link.
</p>
`
},
5: {
title: "Lesson 5 — Passwords & Authentication",
body: `
<p class="text-gray-300 mb-4 leading-relaxed">
Passwords are still everywhere, even though they aren't perfect. Attackers try to guess
weak passwords, reuse leaked ones, or steal them with phishing.
</p>
<p class="text-gray-300 mb-4 leading-relaxed">
Good defense means using long, unique passwords for each site, ideally stored in a password
manager. Two-factor authentication (2FA) adds another layer: even if a password leaks, a code
from your phone is still required.
</p>
<p class="text-gray-300 leading-relaxed">
As you learn more about security, you'll see other options like hardware keys and passkeys.
For now, the main idea is simple: one password should not unlock your entire digital life.
</p>
`
},
6: {
title: "Lesson 6 — Networks 101",
body: `
<p class="text-gray-300 mb-4 leading-relaxed">
When devices talk to each other, they do it over a network using IP addresses. You can think
of an IP as a street address for computers. Data is broken into small packets that move from
router to router until they reach the destination.
</p>
<p class="text-gray-300 mb-4 leading-relaxed">
Most attacks that happen "over the internet" are really just packets with specific data that
trigger bugs, misconfigurations, or weak settings. Understanding networks helps you see
where firewalls, VPNs, and monitoring tools fit in.
</p>
<p class="text-gray-300 leading-relaxed">
Later, when you explore tools like ping, traceroute, or network scanners inside your Linux lab,
you'll be looking directly at how machines find and talk to each other.
</p>
`
},
7: {
title: "Lesson 7 — What is Ethical Hacking?",
body: `
<p class="text-gray-300 mb-4 leading-relaxed">
Ethical hacking is using hacking skills for defense, not for chaos. Ethical hackers look
for weaknesses so they can be fixed before real attackers find them.
</p>
<p class="text-gray-300 mb-4 leading-relaxed">
The most important rule is permission. Testing systems you don't own or control is not
ethical hacking — it's just hacking. Real professionals always work with written agreements,
clear scopes, and strict rules.
</p>
<p class="text-gray-300 leading-relaxed">
In this course we stay on the safe side: your own lab, your own machines, and public
practice platforms that are designed for learning.
</p>
`
}, 8: {
title: "Lesson 8 — Setting Up a Safe Lab (Linux)",
body: `
<p class="text-gray-300 mb-4 leading-relaxed">
Before experimenting with security tools, it's best to have a safe playground: a lab that
you can break without hurting anything important. The easiest way is to use a virtual
machine (VM) instead of installing Linux directly on your main computer.
</p>
<p class="text-gray-300 mb-4 leading-relaxed">
You'll need: a computer with enough RAM and disk space, a virtualization app
(like VirtualBox or similar), and a Linux ISO image from a trusted distribution's
official website. Download the ISO, create a new VM, and attach the ISO as the
"virtual disc" to boot from.
</p>
<p class="text-gray-300 mb-4 leading-relaxed">
Inside the VM you can install Linux by following the on-screen installer. When it asks
about disks, choose the virtual disk, not your real one. Because the VM is just a file,
you can make snapshots or delete it if something breaks.
</p>
<p class="text-gray-300 leading-relaxed">
Once the VM is running, you have a safe place to practice commands, install tools, and
explore security concepts without touching your main operating system.
</p>
`
},
9: {
title: "Lesson 9 — Linux Terminal Basics",
body: `
<p class="text-gray-300 mb-4 leading-relaxed">
The terminal is where Linux really shines. Instead of clicking through windows,
you type commands that tell the system exactly what to do.
</p>
<p class="text-gray-300 mb-4 leading-relaxed">
A few core commands:
</p>
<pre class="bg-gray-800/80 border border-white/10 rounded-lg p-4 text-sm text-gray-200 mb-4 overflow-x-auto">ls # list files
pwd # print current directory
cd folder # change directory
mkdir test # create a folder</pre>
<p class="text-gray-300 leading-relaxed">
Being comfortable in the terminal makes every later lesson easier. Most security tools
and scripts you'll use are built with the command line in mind.
</p>
`
}, 10: {
title: "Lesson 10 — Files & Permissions in Linux",
body: `
<p class="text-gray-300 mb-4 leading-relaxed">
Linux tracks who owns each file and what they're allowed to do with it. The three basic
actions are read, write, and execute — often shown as <code class="text-brand">r</code>, <code class="text-brand">w</code>,
and <code class="text-brand">x</code>.
</p>
<p class="text-gray-300 mb-4 leading-relaxed">
Every file has permissions for three groups: the owner, the group, and others. Tools like
<code class="text-brand">ls -l</code> show a long view that includes permissions, owner, and group for each item.
</p>
<pre class="bg-gray-800/80 border border-white/10 rounded-lg p-4 text-sm text-gray-200 mb-4 overflow-x-auto">ls -l
chmod 755 script.sh</pre>
<p class="text-gray-300 leading-relaxed">
Understanding permissions is key for security. Misconfigured permissions can allow other
users on the system to read secrets or run files they shouldn't.
</p>
`
},
11: {
title: "Lesson 11 — Web Basics (HTTP & Requests)",
body: `
<p class="text-gray-300 mb-4 leading-relaxed">
When you open a website, your browser sends an HTTP request to a server, and the server
replies with a response (HTML, CSS, JS, etc.). URLs, methods like GET/POST, and headers
are all part of that conversation.
</p>
<p class="text-gray-300 mb-4 leading-relaxed">
From a security view, HTTP is where a lot of interesting behavior happens: cookies store
session data, forms send user input, and APIs move data between services.
</p>
<p class="text-gray-300 leading-relaxed">
Tools like browser devtools or command-line clients let you inspect these requests.
Later, this is how you'll test whether a site handles input safely or exposes too much info.
</p>
`
}, 12: {
title: "Lesson 12 — Input Validation & XSS Overview",
body: `
<p class="text-gray-300 mb-4 leading-relaxed">
Any time a website accepts input — search boxes, comments, forms — it needs to check and
sanitize that input. When it doesn't, attackers can inject data that changes how the page behaves.
</p>
<p class="text-gray-300 mb-4 leading-relaxed">
Cross-Site Scripting (XSS) is a type of attack where untrusted input is treated as if it
were part of the page's code. A secure site never directly trusts what users send; it escapes
or filters the data before showing it.
</p>
<p class="text-gray-300 leading-relaxed">
As a beginner, you don't need to perform XSS attacks. It's enough to understand that "user
input must be treated as dangerous" unless proven safe.
</p>
`
},
13: {
title: "Lesson 13 — SQL Injection Overview",
body: `
<p class="text-gray-300 mb-4 leading-relaxed">
Many websites use SQL databases to store users, posts, and other data. If an app combines
user input directly into SQL queries, attackers may be able to change what the database does.
</p>
<p class="text-gray-300 mb-4 leading-relaxed">
SQL injection (SQLi) is the name for that class of bug. Instead of seeing input as just
data, the database treats parts of it as commands.
</p>
<p class="text-gray-300 leading-relaxed">
The correct defense is parameterized queries and strict input handling. Modern frameworks
make this easier, but legacy apps and rushed projects sometimes still get it wrong.
</p>
`
},
14: {
title: "Lesson 14 — Logging & Monitoring",
body: `
<p class="text-gray-300 mb-4 leading-relaxed">
Even the best defenses can fail, so systems keep logs: records of logins, requests,
errors, and important actions. When something weird happens, logs are the first place
defenders look.
</p>
<p class="text-gray-300 mb-4 leading-relaxed">
Good logging isn't just "turn everything on". Too little logging and you miss attacks,
too much and you drown in noise. Security teams often send logs to a central place to
search and alert on patterns.
</p>
<p class="text-gray-300 leading-relaxed">
As you practice, get used to checking logs when something fails or behaves strangely.
It's one of the best habits you can build early.
</p>
`
}, 15: {
title: "Lesson 15 — JavaScript for Security Work",
body: `
<p class="text-gray-300 mb-4 leading-relaxed">
JavaScript runs in the browser and is great for understanding how front-end behavior
works. Inspecting and writing small JS snippets can help you debug forms, test basic ideas,
and understand client-side validation.
</p>
<p class="text-gray-300 mb-4 leading-relaxed">
The simplest example is just printing to the console. Open DevTools, go to the Console tab,
and run:
</p>
<pre class="bg-gray-800/80 border border-white/10 rounded-lg p-4 text-sm text-gray-200 mb-4 overflow-x-auto">console.log("hi");</pre>
<p class="text-gray-300 leading-relaxed">
JavaScript can do much more, but even this tiny step teaches you that the browser is not
a black box — you can inspect and interact with what it's doing.
</p>
`
},
16: {
title: "Lesson 16 — Python for Automation",
body: `
<p class="text-gray-300 mb-4 leading-relaxed">
Python is insanely popular in security because it's easy to read and has tons of libraries.
You can use it to automate boring tasks, parse logs, talk to APIs, or prototype tools.
</p>
<p class="text-gray-300 mb-4 leading-relaxed">
A tiny example:
</p>
<pre class="bg-gray-800/80 border border-white/10 rounded-lg p-4 text-sm text-gray-200 mb-4 overflow-x-auto">name = "Serhii"
print("Hello,", name)</pre>
<p class="text-gray-300 leading-relaxed">
As you get more comfortable, writing small Python scripts to explore data or test ideas
will feel natural — and it pairs perfectly with Linux.
</p>
`
},
17: {
title: "Lesson 17 — OSINT Basics",
body: `
<p class="text-gray-300 mb-4 leading-relaxed">
OSINT (Open-Source Intelligence) is about gathering information from public sources:
search engines, social media, public records, and more. It's used in investigations,
security assessments, and sometimes by attackers to plan attacks.
</p>
<p class="text-gray-300 mb-4 leading-relaxed">
OSINT is powerful but also sensitive. Even though the data is public, you should still
think about ethics and privacy. Just because you can find something doesn't mean you
should share it everywhere.
</p>
<p class="text-gray-300 leading-relaxed">
For now, it's enough to know that OSINT exists and that many security tasks start with
simply understanding what is already exposed online.
</p>
`
}, 18: {
title: "Lesson 18 — Personal Security & OPSEC",
body: `
<p class="text-gray-300 mb-4 leading-relaxed">
OPSEC (Operational Security) is a fancy way of saying "don't accidentally leak information
about yourself or what you're doing". It matters in everyday life too.
</p>
<p class="text-gray-300 mb-4 leading-relaxed">
Examples: using strong unique passwords, thinking before you post screenshots (they can
show usernames, IDs, or locations), and being picky about which apps you install.
</p>
<p class="text-gray-300 leading-relaxed">
As you dig deeper into security and hacking topics, OPSEC becomes more important — it lets
you experiment and learn without revealing more about yourself than you intend.
</p>
`
},
19: {
title: "Lesson 19 — CTFs & Practice Platforms",
body: `
<p class="text-gray-300 mb-4 leading-relaxed">
CTFs (Capture the Flag) and practice platforms are safe environments built for learning.
They contain intentionally vulnerable challenges that you're allowed to attack.
</p>
<p class="text-gray-300 mb-4 leading-relaxed">
These sites usually give you a "flag" string when you solve a challenge. You can work on
web, crypto, forensics, reversing, and more — all legally.
</p>
<p class="text-gray-300 leading-relaxed">
When you're ready, CTFs are one of the best ways to turn theory into practical skill
without touching real-world systems.
</p>
`
},
20: {
title: "Lesson 20 — Recap & Next Steps",
body: `
<p class="text-gray-300 mb-4 leading-relaxed">
You've seen the big picture: cybersecurity basics, common attacks, ethical hacking mindset,
Linux fundamentals, web concepts, and a bit of coding with JavaScript and Python.
</p>
<p class="text-gray-300 mb-4 leading-relaxed">
The next step is practice: use your Linux lab, explore commands, read logs, write small
scripts, and try beginner-friendly CTFs or tutorials that are designed for learning.
</p>
<p class="text-gray-300 leading-relaxed">
Security is a huge field, but the habits you build now — curiosity, caution, and respect
for permissions — will carry you a long way.
</p>
`
}
};
const totalLessons = 20;
let currentLesson = 1;
function renderLesson(num) {
const content = document.getElementById("lessonContent");
content.classList.remove("fade-in");
content.classList.add("fade-out");
setTimeout(() => {
const lesson = lessons[num];
content.innerHTML = `
<h2 class="text-4xl font-bold mb-6"><span class="gradient-text">${lesson.title}</span></h2>
<div class="space-y-4">
${lesson.body}
</div>
`;
content.classList.remove("fade-out");
content.classList.add("fade-in");
window.scrollTo({ top: 0, behavior: 'smooth' });
}, 200);
currentLesson = num;
updateButtons();
updateSidebarHighlight();
updateMobileSelect();
}
function updateButtons() {
const backBtn = document.getElementById("backBtn");
const nextBtn = document.getElementById("nextBtn");
backBtn.disabled = currentLesson === 1;
nextBtn.disabled = currentLesson === totalLessons;
}
function updateSidebarHighlight() {
document.querySelectorAll("#lessonLinks button").forEach(btn => {
const lessonNum = parseInt(btn.dataset.lesson, 10);
if (lessonNum === currentLesson) {
btn.className = "block w-full text-left px-3 py-2 rounded-lg bg-brand/10 text-brand font-medium border border-brand/20";
} else {
btn.className = "block w-full text-left px-3 py-2 rounded-lg text-gray-300 hover:text-white hover:bg-gray-800/50 transition";
}
});
}
function updateMobileSelect() {
const select = document.getElementById("mobileLessonSelect");
if (select) select.value = currentLesson;
}
// Sidebar clicks
document.querySelectorAll("#lessonLinks button").forEach(button => {
button.addEventListener("click", () => {
const num = parseInt(button.dataset.lesson, 10);
renderLesson(num);
});
});
// Mobile dropdown
const mobileSelect = document.getElementById("mobileLessonSelect");
if (mobileSelect) {
mobileSelect.addEventListener("change", (e) => {
const num = parseInt(e.target.value, 10);
renderLesson(num);
});
}
// Back / Next
document.getElementById("backBtn").addEventListener("click", () => {
if (currentLesson > 1) renderLesson(currentLesson - 1);
});
document.getElementById("nextBtn").addEventListener("click", () => {
if (currentLesson < totalLessons) renderLesson(currentLesson + 1);
});
// Initial load
renderLesson(1);
</script>
</body>
</html>