diff --git a/translated_images/1.b6da8c1394b07491afeb6b2a8e5aca73ebd3cf478e27bcc9aeabb187e722648e.hr.png b/translated_images/1.b6da8c1394b07491afeb6b2a8e5aca73ebd3cf478e27bcc9aeabb187e722648e.hr.png
new file mode 100644
index 00000000..6a84d224
Binary files /dev/null and b/translated_images/1.b6da8c1394b07491afeb6b2a8e5aca73ebd3cf478e27bcc9aeabb187e722648e.hr.png differ
diff --git a/translated_images/1.b6da8c1394b07491afeb6b2a8e5aca73ebd3cf478e27bcc9aeabb187e722648e.sk.png b/translated_images/1.b6da8c1394b07491afeb6b2a8e5aca73ebd3cf478e27bcc9aeabb187e722648e.sk.png
new file mode 100644
index 00000000..64a17806
Binary files /dev/null and b/translated_images/1.b6da8c1394b07491afeb6b2a8e5aca73ebd3cf478e27bcc9aeabb187e722648e.sk.png differ
diff --git a/translated_images/1.b6da8c1394b07491afeb6b2a8e5aca73ebd3cf478e27bcc9aeabb187e722648e.sl.png b/translated_images/1.b6da8c1394b07491afeb6b2a8e5aca73ebd3cf478e27bcc9aeabb187e722648e.sl.png
new file mode 100644
index 00000000..bbc78269
Binary files /dev/null and b/translated_images/1.b6da8c1394b07491afeb6b2a8e5aca73ebd3cf478e27bcc9aeabb187e722648e.sl.png differ
diff --git a/translated_images/1.cc07a5cbe114ad1d4728c35134584ac1b87db688eff83cf75985cf31fe0ed95c.hr.png b/translated_images/1.cc07a5cbe114ad1d4728c35134584ac1b87db688eff83cf75985cf31fe0ed95c.hr.png
new file mode 100644
index 00000000..8d00dd08
Binary files /dev/null and b/translated_images/1.cc07a5cbe114ad1d4728c35134584ac1b87db688eff83cf75985cf31fe0ed95c.hr.png differ
diff --git a/translated_images/1.cc07a5cbe114ad1d4728c35134584ac1b87db688eff83cf75985cf31fe0ed95c.sk.png b/translated_images/1.cc07a5cbe114ad1d4728c35134584ac1b87db688eff83cf75985cf31fe0ed95c.sk.png
new file mode 100644
index 00000000..b310f379
Binary files /dev/null and b/translated_images/1.cc07a5cbe114ad1d4728c35134584ac1b87db688eff83cf75985cf31fe0ed95c.sk.png differ
diff --git a/translated_images/1.cc07a5cbe114ad1d4728c35134584ac1b87db688eff83cf75985cf31fe0ed95c.sl.png b/translated_images/1.cc07a5cbe114ad1d4728c35134584ac1b87db688eff83cf75985cf31fe0ed95c.sl.png
new file mode 100644
index 00000000..e1d584d8
Binary files /dev/null and b/translated_images/1.cc07a5cbe114ad1d4728c35134584ac1b87db688eff83cf75985cf31fe0ed95c.sl.png differ
diff --git a/translated_images/2.1dae52ff0804224692cd648afbf2342955d7afe3b0101b617268130dfb427f55.hr.png b/translated_images/2.1dae52ff0804224692cd648afbf2342955d7afe3b0101b617268130dfb427f55.hr.png
new file mode 100644
index 00000000..944019f0
Binary files /dev/null and b/translated_images/2.1dae52ff0804224692cd648afbf2342955d7afe3b0101b617268130dfb427f55.hr.png differ
diff --git a/translated_images/2.1dae52ff0804224692cd648afbf2342955d7afe3b0101b617268130dfb427f55.sk.png b/translated_images/2.1dae52ff0804224692cd648afbf2342955d7afe3b0101b617268130dfb427f55.sk.png
new file mode 100644
index 00000000..a23529fb
Binary files /dev/null and b/translated_images/2.1dae52ff0804224692cd648afbf2342955d7afe3b0101b617268130dfb427f55.sk.png differ
diff --git a/translated_images/2.1dae52ff0804224692cd648afbf2342955d7afe3b0101b617268130dfb427f55.sl.png b/translated_images/2.1dae52ff0804224692cd648afbf2342955d7afe3b0101b617268130dfb427f55.sl.png
new file mode 100644
index 00000000..a2c50479
Binary files /dev/null and b/translated_images/2.1dae52ff0804224692cd648afbf2342955d7afe3b0101b617268130dfb427f55.sl.png differ
diff --git a/translated_images/after-codeswing-extension-pb.0ebddddcf73b550994947a9084e35e2836c713ae13839d49628e3c764c1cfe83.hr.png b/translated_images/after-codeswing-extension-pb.0ebddddcf73b550994947a9084e35e2836c713ae13839d49628e3c764c1cfe83.hr.png
new file mode 100644
index 00000000..07f0f57f
Binary files /dev/null and b/translated_images/after-codeswing-extension-pb.0ebddddcf73b550994947a9084e35e2836c713ae13839d49628e3c764c1cfe83.hr.png differ
diff --git a/translated_images/after-codeswing-extension-pb.0ebddddcf73b550994947a9084e35e2836c713ae13839d49628e3c764c1cfe83.sk.png b/translated_images/after-codeswing-extension-pb.0ebddddcf73b550994947a9084e35e2836c713ae13839d49628e3c764c1cfe83.sk.png
new file mode 100644
index 00000000..052d7639
Binary files /dev/null and b/translated_images/after-codeswing-extension-pb.0ebddddcf73b550994947a9084e35e2836c713ae13839d49628e3c764c1cfe83.sk.png differ
diff --git a/translated_images/after-codeswing-extension-pb.0ebddddcf73b550994947a9084e35e2836c713ae13839d49628e3c764c1cfe83.sl.png b/translated_images/after-codeswing-extension-pb.0ebddddcf73b550994947a9084e35e2836c713ae13839d49628e3c764c1cfe83.sl.png
new file mode 100644
index 00000000..45ebfd85
Binary files /dev/null and b/translated_images/after-codeswing-extension-pb.0ebddddcf73b550994947a9084e35e2836c713ae13839d49628e3c764c1cfe83.sl.png differ
diff --git a/translated_images/background.148a8d43afde57303419a663f50daf586681bc2fabf833f66ef6954073983c66.hr.png b/translated_images/background.148a8d43afde57303419a663f50daf586681bc2fabf833f66ef6954073983c66.hr.png
new file mode 100644
index 00000000..7b43a0de
Binary files /dev/null and b/translated_images/background.148a8d43afde57303419a663f50daf586681bc2fabf833f66ef6954073983c66.hr.png differ
diff --git a/translated_images/background.148a8d43afde57303419a663f50daf586681bc2fabf833f66ef6954073983c66.sk.png b/translated_images/background.148a8d43afde57303419a663f50daf586681bc2fabf833f66ef6954073983c66.sk.png
new file mode 100644
index 00000000..5d3bc5df
Binary files /dev/null and b/translated_images/background.148a8d43afde57303419a663f50daf586681bc2fabf833f66ef6954073983c66.sk.png differ
diff --git a/translated_images/background.148a8d43afde57303419a663f50daf586681bc2fabf833f66ef6954073983c66.sl.png b/translated_images/background.148a8d43afde57303419a663f50daf586681bc2fabf833f66ef6954073983c66.sl.png
new file mode 100644
index 00000000..58c046d6
Binary files /dev/null and b/translated_images/background.148a8d43afde57303419a663f50daf586681bc2fabf833f66ef6954073983c66.sl.png differ
diff --git a/translated_images/backgroundColor.e19c3c60768150c8de229c89233ecb5d859aeabef0ada99d2236dd2c44c1510f.hr.png b/translated_images/backgroundColor.e19c3c60768150c8de229c89233ecb5d859aeabef0ada99d2236dd2c44c1510f.hr.png
new file mode 100644
index 00000000..3bd93a53
Binary files /dev/null and b/translated_images/backgroundColor.e19c3c60768150c8de229c89233ecb5d859aeabef0ada99d2236dd2c44c1510f.hr.png differ
diff --git a/translated_images/backgroundColor.e19c3c60768150c8de229c89233ecb5d859aeabef0ada99d2236dd2c44c1510f.sk.png b/translated_images/backgroundColor.e19c3c60768150c8de229c89233ecb5d859aeabef0ada99d2236dd2c44c1510f.sk.png
new file mode 100644
index 00000000..3bd93a53
Binary files /dev/null and b/translated_images/backgroundColor.e19c3c60768150c8de229c89233ecb5d859aeabef0ada99d2236dd2c44c1510f.sk.png differ
diff --git a/translated_images/backgroundColor.e19c3c60768150c8de229c89233ecb5d859aeabef0ada99d2236dd2c44c1510f.sl.png b/translated_images/backgroundColor.e19c3c60768150c8de229c89233ecb5d859aeabef0ada99d2236dd2c44c1510f.sl.png
new file mode 100644
index 00000000..3bd93a53
Binary files /dev/null and b/translated_images/backgroundColor.e19c3c60768150c8de229c89233ecb5d859aeabef0ada99d2236dd2c44c1510f.sl.png differ
diff --git a/translated_images/browser-console.efaf0b51aaaf67782a29e1a0bb32cc063f189b18e894eb5926e02f1abe864ec2.hr.png b/translated_images/browser-console.efaf0b51aaaf67782a29e1a0bb32cc063f189b18e894eb5926e02f1abe864ec2.hr.png
new file mode 100644
index 00000000..35c49be0
Binary files /dev/null and b/translated_images/browser-console.efaf0b51aaaf67782a29e1a0bb32cc063f189b18e894eb5926e02f1abe864ec2.hr.png differ
diff --git a/translated_images/browser-console.efaf0b51aaaf67782a29e1a0bb32cc063f189b18e894eb5926e02f1abe864ec2.sk.png b/translated_images/browser-console.efaf0b51aaaf67782a29e1a0bb32cc063f189b18e894eb5926e02f1abe864ec2.sk.png
new file mode 100644
index 00000000..8d841434
Binary files /dev/null and b/translated_images/browser-console.efaf0b51aaaf67782a29e1a0bb32cc063f189b18e894eb5926e02f1abe864ec2.sk.png differ
diff --git a/translated_images/browser-console.efaf0b51aaaf67782a29e1a0bb32cc063f189b18e894eb5926e02f1abe864ec2.sl.png b/translated_images/browser-console.efaf0b51aaaf67782a29e1a0bb32cc063f189b18e894eb5926e02f1abe864ec2.sl.png
new file mode 100644
index 00000000..00a2902f
Binary files /dev/null and b/translated_images/browser-console.efaf0b51aaaf67782a29e1a0bb32cc063f189b18e894eb5926e02f1abe864ec2.sl.png differ
diff --git a/translated_images/browser.60317c9be8b7f84adce43e30bff8d47a1ae15793beab762317b2bc6b74337c1a.hr.jpg b/translated_images/browser.60317c9be8b7f84adce43e30bff8d47a1ae15793beab762317b2bc6b74337c1a.hr.jpg
new file mode 100644
index 00000000..cef7412f
Binary files /dev/null and b/translated_images/browser.60317c9be8b7f84adce43e30bff8d47a1ae15793beab762317b2bc6b74337c1a.hr.jpg differ
diff --git a/translated_images/browser.60317c9be8b7f84adce43e30bff8d47a1ae15793beab762317b2bc6b74337c1a.sk.jpg b/translated_images/browser.60317c9be8b7f84adce43e30bff8d47a1ae15793beab762317b2bc6b74337c1a.sk.jpg
new file mode 100644
index 00000000..9368e3f9
Binary files /dev/null and b/translated_images/browser.60317c9be8b7f84adce43e30bff8d47a1ae15793beab762317b2bc6b74337c1a.sk.jpg differ
diff --git a/translated_images/browser.60317c9be8b7f84adce43e30bff8d47a1ae15793beab762317b2bc6b74337c1a.sl.jpg b/translated_images/browser.60317c9be8b7f84adce43e30bff8d47a1ae15793beab762317b2bc6b74337c1a.sl.jpg
new file mode 100644
index 00000000..9cd4a32c
Binary files /dev/null and b/translated_images/browser.60317c9be8b7f84adce43e30bff8d47a1ae15793beab762317b2bc6b74337c1a.sl.jpg differ
diff --git a/translated_images/canvas.fbd605ff8e5b8aff567d398528ce113db304446b90b9cad55c654de3fdfcda34.hr.png b/translated_images/canvas.fbd605ff8e5b8aff567d398528ce113db304446b90b9cad55c654de3fdfcda34.hr.png
new file mode 100644
index 00000000..0faf371f
Binary files /dev/null and b/translated_images/canvas.fbd605ff8e5b8aff567d398528ce113db304446b90b9cad55c654de3fdfcda34.hr.png differ
diff --git a/translated_images/canvas.fbd605ff8e5b8aff567d398528ce113db304446b90b9cad55c654de3fdfcda34.sk.png b/translated_images/canvas.fbd605ff8e5b8aff567d398528ce113db304446b90b9cad55c654de3fdfcda34.sk.png
new file mode 100644
index 00000000..f9992b79
Binary files /dev/null and b/translated_images/canvas.fbd605ff8e5b8aff567d398528ce113db304446b90b9cad55c654de3fdfcda34.sk.png differ
diff --git a/translated_images/canvas.fbd605ff8e5b8aff567d398528ce113db304446b90b9cad55c654de3fdfcda34.sl.png b/translated_images/canvas.fbd605ff8e5b8aff567d398528ce113db304446b90b9cad55c654de3fdfcda34.sl.png
new file mode 100644
index 00000000..d46c3825
Binary files /dev/null and b/translated_images/canvas.fbd605ff8e5b8aff567d398528ce113db304446b90b9cad55c654de3fdfcda34.sl.png differ
diff --git a/translated_images/canvas_grid.5f209da785ded492a01ece440e3032afe51efa500cc2308e5ea4252487ceaf0b.hr.png b/translated_images/canvas_grid.5f209da785ded492a01ece440e3032afe51efa500cc2308e5ea4252487ceaf0b.hr.png
new file mode 100644
index 00000000..537426fc
Binary files /dev/null and b/translated_images/canvas_grid.5f209da785ded492a01ece440e3032afe51efa500cc2308e5ea4252487ceaf0b.hr.png differ
diff --git a/translated_images/canvas_grid.5f209da785ded492a01ece440e3032afe51efa500cc2308e5ea4252487ceaf0b.sk.png b/translated_images/canvas_grid.5f209da785ded492a01ece440e3032afe51efa500cc2308e5ea4252487ceaf0b.sk.png
new file mode 100644
index 00000000..4ffb2f81
Binary files /dev/null and b/translated_images/canvas_grid.5f209da785ded492a01ece440e3032afe51efa500cc2308e5ea4252487ceaf0b.sk.png differ
diff --git a/translated_images/canvas_grid.5f209da785ded492a01ece440e3032afe51efa500cc2308e5ea4252487ceaf0b.sl.png b/translated_images/canvas_grid.5f209da785ded492a01ece440e3032afe51efa500cc2308e5ea4252487ceaf0b.sl.png
new file mode 100644
index 00000000..28c680fc
Binary files /dev/null and b/translated_images/canvas_grid.5f209da785ded492a01ece440e3032afe51efa500cc2308e5ea4252487ceaf0b.sl.png differ
diff --git a/translated_images/character.5c0dd8e067ffd693c16e2c5b7412ab075a2215ce31f998305639fa3a05e14fbe.hr.png b/translated_images/character.5c0dd8e067ffd693c16e2c5b7412ab075a2215ce31f998305639fa3a05e14fbe.hr.png
new file mode 100644
index 00000000..b7ebd2d8
Binary files /dev/null and b/translated_images/character.5c0dd8e067ffd693c16e2c5b7412ab075a2215ce31f998305639fa3a05e14fbe.hr.png differ
diff --git a/translated_images/character.5c0dd8e067ffd693c16e2c5b7412ab075a2215ce31f998305639fa3a05e14fbe.sk.png b/translated_images/character.5c0dd8e067ffd693c16e2c5b7412ab075a2215ce31f998305639fa3a05e14fbe.sk.png
new file mode 100644
index 00000000..285a189d
Binary files /dev/null and b/translated_images/character.5c0dd8e067ffd693c16e2c5b7412ab075a2215ce31f998305639fa3a05e14fbe.sk.png differ
diff --git a/translated_images/character.5c0dd8e067ffd693c16e2c5b7412ab075a2215ce31f998305639fa3a05e14fbe.sl.png b/translated_images/character.5c0dd8e067ffd693c16e2c5b7412ab075a2215ce31f998305639fa3a05e14fbe.sl.png
new file mode 100644
index 00000000..cb54ce43
Binary files /dev/null and b/translated_images/character.5c0dd8e067ffd693c16e2c5b7412ab075a2215ce31f998305639fa3a05e14fbe.sl.png differ
diff --git a/translated_images/click-register.e89a30bf0d4bc9ca867dc537c4cea679a7c26368bd790969082f524fed2355bc.hr.png b/translated_images/click-register.e89a30bf0d4bc9ca867dc537c4cea679a7c26368bd790969082f524fed2355bc.hr.png
new file mode 100644
index 00000000..ccc65305
Binary files /dev/null and b/translated_images/click-register.e89a30bf0d4bc9ca867dc537c4cea679a7c26368bd790969082f524fed2355bc.hr.png differ
diff --git a/translated_images/click-register.e89a30bf0d4bc9ca867dc537c4cea679a7c26368bd790969082f524fed2355bc.sk.png b/translated_images/click-register.e89a30bf0d4bc9ca867dc537c4cea679a7c26368bd790969082f524fed2355bc.sk.png
new file mode 100644
index 00000000..ccc65305
Binary files /dev/null and b/translated_images/click-register.e89a30bf0d4bc9ca867dc537c4cea679a7c26368bd790969082f524fed2355bc.sk.png differ
diff --git a/translated_images/click-register.e89a30bf0d4bc9ca867dc537c4cea679a7c26368bd790969082f524fed2355bc.sl.png b/translated_images/click-register.e89a30bf0d4bc9ca867dc537c4cea679a7c26368bd790969082f524fed2355bc.sl.png
new file mode 100644
index 00000000..ccc65305
Binary files /dev/null and b/translated_images/click-register.e89a30bf0d4bc9ca867dc537c4cea679a7c26368bd790969082f524fed2355bc.sl.png differ
diff --git a/translated_images/clone_repo.5085c48d666ead57664f050d806e325d7f883be6838c821e08bc823ab7c66665.hr.png b/translated_images/clone_repo.5085c48d666ead57664f050d806e325d7f883be6838c821e08bc823ab7c66665.hr.png
new file mode 100644
index 00000000..cc6c71bc
Binary files /dev/null and b/translated_images/clone_repo.5085c48d666ead57664f050d806e325d7f883be6838c821e08bc823ab7c66665.hr.png differ
diff --git a/translated_images/clone_repo.5085c48d666ead57664f050d806e325d7f883be6838c821e08bc823ab7c66665.sk.png b/translated_images/clone_repo.5085c48d666ead57664f050d806e325d7f883be6838c821e08bc823ab7c66665.sk.png
new file mode 100644
index 00000000..ff78e3ee
Binary files /dev/null and b/translated_images/clone_repo.5085c48d666ead57664f050d806e325d7f883be6838c821e08bc823ab7c66665.sk.png differ
diff --git a/translated_images/clone_repo.5085c48d666ead57664f050d806e325d7f883be6838c821e08bc823ab7c66665.sl.png b/translated_images/clone_repo.5085c48d666ead57664f050d806e325d7f883be6838c821e08bc823ab7c66665.sl.png
new file mode 100644
index 00000000..f26047cb
Binary files /dev/null and b/translated_images/clone_repo.5085c48d666ead57664f050d806e325d7f883be6838c821e08bc823ab7c66665.sl.png differ
diff --git a/translated_images/clone_repo.6a202fb230ab6bdd8e8f536661f12088315044ed26899f00b5815db04bff9217.hr.png b/translated_images/clone_repo.6a202fb230ab6bdd8e8f536661f12088315044ed26899f00b5815db04bff9217.hr.png
new file mode 100644
index 00000000..e62641bb
Binary files /dev/null and b/translated_images/clone_repo.6a202fb230ab6bdd8e8f536661f12088315044ed26899f00b5815db04bff9217.hr.png differ
diff --git a/translated_images/clone_repo.6a202fb230ab6bdd8e8f536661f12088315044ed26899f00b5815db04bff9217.sk.png b/translated_images/clone_repo.6a202fb230ab6bdd8e8f536661f12088315044ed26899f00b5815db04bff9217.sk.png
new file mode 100644
index 00000000..61a4bc2e
Binary files /dev/null and b/translated_images/clone_repo.6a202fb230ab6bdd8e8f536661f12088315044ed26899f00b5815db04bff9217.sk.png differ
diff --git a/translated_images/clone_repo.6a202fb230ab6bdd8e8f536661f12088315044ed26899f00b5815db04bff9217.sl.png b/translated_images/clone_repo.6a202fb230ab6bdd8e8f536661f12088315044ed26899f00b5815db04bff9217.sl.png
new file mode 100644
index 00000000..13f235d8
Binary files /dev/null and b/translated_images/clone_repo.6a202fb230ab6bdd8e8f536661f12088315044ed26899f00b5815db04bff9217.sl.png differ
diff --git a/translated_images/create-a-fork.297ab42b4bd0af9989c1a00dc1ad10805a7e109296a5f47acebacaf5ff098a30.hr.png b/translated_images/create-a-fork.297ab42b4bd0af9989c1a00dc1ad10805a7e109296a5f47acebacaf5ff098a30.hr.png
new file mode 100644
index 00000000..567d74eb
Binary files /dev/null and b/translated_images/create-a-fork.297ab42b4bd0af9989c1a00dc1ad10805a7e109296a5f47acebacaf5ff098a30.hr.png differ
diff --git a/translated_images/create-a-fork.297ab42b4bd0af9989c1a00dc1ad10805a7e109296a5f47acebacaf5ff098a30.sk.png b/translated_images/create-a-fork.297ab42b4bd0af9989c1a00dc1ad10805a7e109296a5f47acebacaf5ff098a30.sk.png
new file mode 100644
index 00000000..07eef4e9
Binary files /dev/null and b/translated_images/create-a-fork.297ab42b4bd0af9989c1a00dc1ad10805a7e109296a5f47acebacaf5ff098a30.sk.png differ
diff --git a/translated_images/create-a-fork.297ab42b4bd0af9989c1a00dc1ad10805a7e109296a5f47acebacaf5ff098a30.sl.png b/translated_images/create-a-fork.297ab42b4bd0af9989c1a00dc1ad10805a7e109296a5f47acebacaf5ff098a30.sl.png
new file mode 100644
index 00000000..7e1ca3dc
Binary files /dev/null and b/translated_images/create-a-fork.297ab42b4bd0af9989c1a00dc1ad10805a7e109296a5f47acebacaf5ff098a30.sl.png differ
diff --git a/translated_images/create-new-file-pb.0797800d977ec3ebf484be2545060e443a902973aaa5267219c07fe199b0e2d4.hr.png b/translated_images/create-new-file-pb.0797800d977ec3ebf484be2545060e443a902973aaa5267219c07fe199b0e2d4.hr.png
new file mode 100644
index 00000000..0dc76132
Binary files /dev/null and b/translated_images/create-new-file-pb.0797800d977ec3ebf484be2545060e443a902973aaa5267219c07fe199b0e2d4.hr.png differ
diff --git a/translated_images/create-new-file-pb.0797800d977ec3ebf484be2545060e443a902973aaa5267219c07fe199b0e2d4.sk.png b/translated_images/create-new-file-pb.0797800d977ec3ebf484be2545060e443a902973aaa5267219c07fe199b0e2d4.sk.png
new file mode 100644
index 00000000..79a41f37
Binary files /dev/null and b/translated_images/create-new-file-pb.0797800d977ec3ebf484be2545060e443a902973aaa5267219c07fe199b0e2d4.sk.png differ
diff --git a/translated_images/create-new-file-pb.0797800d977ec3ebf484be2545060e443a902973aaa5267219c07fe199b0e2d4.sl.png b/translated_images/create-new-file-pb.0797800d977ec3ebf484be2545060e443a902973aaa5267219c07fe199b0e2d4.sl.png
new file mode 100644
index 00000000..49b958c5
Binary files /dev/null and b/translated_images/create-new-file-pb.0797800d977ec3ebf484be2545060e443a902973aaa5267219c07fe199b0e2d4.sl.png differ
diff --git a/translated_images/create-new-file.2814e609c2af9aeb6c6fd53156c503ac91c3d538f9cac63073b2dd4a7631f183.hr.png b/translated_images/create-new-file.2814e609c2af9aeb6c6fd53156c503ac91c3d538f9cac63073b2dd4a7631f183.hr.png
new file mode 100644
index 00000000..a1fb99b5
Binary files /dev/null and b/translated_images/create-new-file.2814e609c2af9aeb6c6fd53156c503ac91c3d538f9cac63073b2dd4a7631f183.hr.png differ
diff --git a/translated_images/create-new-file.2814e609c2af9aeb6c6fd53156c503ac91c3d538f9cac63073b2dd4a7631f183.sk.png b/translated_images/create-new-file.2814e609c2af9aeb6c6fd53156c503ac91c3d538f9cac63073b2dd4a7631f183.sk.png
new file mode 100644
index 00000000..a1fb99b5
Binary files /dev/null and b/translated_images/create-new-file.2814e609c2af9aeb6c6fd53156c503ac91c3d538f9cac63073b2dd4a7631f183.sk.png differ
diff --git a/translated_images/create-new-file.2814e609c2af9aeb6c6fd53156c503ac91c3d538f9cac63073b2dd4a7631f183.sl.png b/translated_images/create-new-file.2814e609c2af9aeb6c6fd53156c503ac91c3d538f9cac63073b2dd4a7631f183.sl.png
new file mode 100644
index 00000000..a1fb99b5
Binary files /dev/null and b/translated_images/create-new-file.2814e609c2af9aeb6c6fd53156c503ac91c3d538f9cac63073b2dd4a7631f183.sl.png differ
diff --git a/translated_images/createcodespace.0238bbf4d7a8d955fa8fa7f7b6602a3cb6499a24708fbee589f83211c5a613b7.hr.png b/translated_images/createcodespace.0238bbf4d7a8d955fa8fa7f7b6602a3cb6499a24708fbee589f83211c5a613b7.hr.png
new file mode 100644
index 00000000..006f040d
Binary files /dev/null and b/translated_images/createcodespace.0238bbf4d7a8d955fa8fa7f7b6602a3cb6499a24708fbee589f83211c5a613b7.hr.png differ
diff --git a/translated_images/createcodespace.0238bbf4d7a8d955fa8fa7f7b6602a3cb6499a24708fbee589f83211c5a613b7.sk.png b/translated_images/createcodespace.0238bbf4d7a8d955fa8fa7f7b6602a3cb6499a24708fbee589f83211c5a613b7.sk.png
new file mode 100644
index 00000000..4af73291
Binary files /dev/null and b/translated_images/createcodespace.0238bbf4d7a8d955fa8fa7f7b6602a3cb6499a24708fbee589f83211c5a613b7.sk.png differ
diff --git a/translated_images/createcodespace.0238bbf4d7a8d955fa8fa7f7b6602a3cb6499a24708fbee589f83211c5a613b7.sl.png b/translated_images/createcodespace.0238bbf4d7a8d955fa8fa7f7b6602a3cb6499a24708fbee589f83211c5a613b7.sl.png
new file mode 100644
index 00000000..8cfb80e3
Binary files /dev/null and b/translated_images/createcodespace.0238bbf4d7a8d955fa8fa7f7b6602a3cb6499a24708fbee589f83211c5a613b7.sl.png differ
diff --git a/translated_images/data-flow.fa2354e0908fecc89b488010dedf4871418a992edffa17e73441d257add18da4.hr.png b/translated_images/data-flow.fa2354e0908fecc89b488010dedf4871418a992edffa17e73441d257add18da4.hr.png
new file mode 100644
index 00000000..c158d43c
Binary files /dev/null and b/translated_images/data-flow.fa2354e0908fecc89b488010dedf4871418a992edffa17e73441d257add18da4.hr.png differ
diff --git a/translated_images/data-flow.fa2354e0908fecc89b488010dedf4871418a992edffa17e73441d257add18da4.sk.png b/translated_images/data-flow.fa2354e0908fecc89b488010dedf4871418a992edffa17e73441d257add18da4.sk.png
new file mode 100644
index 00000000..cbfe1a48
Binary files /dev/null and b/translated_images/data-flow.fa2354e0908fecc89b488010dedf4871418a992edffa17e73441d257add18da4.sk.png differ
diff --git a/translated_images/data-flow.fa2354e0908fecc89b488010dedf4871418a992edffa17e73441d257add18da4.sl.png b/translated_images/data-flow.fa2354e0908fecc89b488010dedf4871418a992edffa17e73441d257add18da4.sl.png
new file mode 100644
index 00000000..882f820a
Binary files /dev/null and b/translated_images/data-flow.fa2354e0908fecc89b488010dedf4871418a992edffa17e73441d257add18da4.sl.png differ
diff --git a/translated_images/default-vscode-dev.5d06881d65c1b3234ce50cd9ed3b0028e6031ad5f5b441bcbed96bfa6311f6d0.hr.png b/translated_images/default-vscode-dev.5d06881d65c1b3234ce50cd9ed3b0028e6031ad5f5b441bcbed96bfa6311f6d0.hr.png
new file mode 100644
index 00000000..f4c3b205
Binary files /dev/null and b/translated_images/default-vscode-dev.5d06881d65c1b3234ce50cd9ed3b0028e6031ad5f5b441bcbed96bfa6311f6d0.hr.png differ
diff --git a/translated_images/default-vscode-dev.5d06881d65c1b3234ce50cd9ed3b0028e6031ad5f5b441bcbed96bfa6311f6d0.sk.png b/translated_images/default-vscode-dev.5d06881d65c1b3234ce50cd9ed3b0028e6031ad5f5b441bcbed96bfa6311f6d0.sk.png
new file mode 100644
index 00000000..de6886e2
Binary files /dev/null and b/translated_images/default-vscode-dev.5d06881d65c1b3234ce50cd9ed3b0028e6031ad5f5b441bcbed96bfa6311f6d0.sk.png differ
diff --git a/translated_images/default-vscode-dev.5d06881d65c1b3234ce50cd9ed3b0028e6031ad5f5b441bcbed96bfa6311f6d0.sl.png b/translated_images/default-vscode-dev.5d06881d65c1b3234ce50cd9ed3b0028e6031ad5f5b441bcbed96bfa6311f6d0.sl.png
new file mode 100644
index 00000000..44ecd43a
Binary files /dev/null and b/translated_images/default-vscode-dev.5d06881d65c1b3234ce50cd9ed3b0028e6031ad5f5b441bcbed96bfa6311f6d0.sl.png differ
diff --git a/translated_images/dialog.93bba104afeb79f12f65ebf8f521c5d64e179c40b791c49c242cf15f7e7fab15.hr.png b/translated_images/dialog.93bba104afeb79f12f65ebf8f521c5d64e179c40b791c49c242cf15f7e7fab15.hr.png
new file mode 100644
index 00000000..aaef5474
Binary files /dev/null and b/translated_images/dialog.93bba104afeb79f12f65ebf8f521c5d64e179c40b791c49c242cf15f7e7fab15.hr.png differ
diff --git a/translated_images/dialog.93bba104afeb79f12f65ebf8f521c5d64e179c40b791c49c242cf15f7e7fab15.sk.png b/translated_images/dialog.93bba104afeb79f12f65ebf8f521c5d64e179c40b791c49c242cf15f7e7fab15.sk.png
new file mode 100644
index 00000000..b601b24f
Binary files /dev/null and b/translated_images/dialog.93bba104afeb79f12f65ebf8f521c5d64e179c40b791c49c242cf15f7e7fab15.sk.png differ
diff --git a/translated_images/dialog.93bba104afeb79f12f65ebf8f521c5d64e179c40b791c49c242cf15f7e7fab15.sl.png b/translated_images/dialog.93bba104afeb79f12f65ebf8f521c5d64e179c40b791c49c242cf15f7e7fab15.sl.png
new file mode 100644
index 00000000..3ba0ef9f
Binary files /dev/null and b/translated_images/dialog.93bba104afeb79f12f65ebf8f521c5d64e179c40b791c49c242cf15f7e7fab15.sl.png differ
diff --git a/translated_images/dom-tree.7daf0e763cbbba9273f9a66fe04c98276d7d23932309b195cb273a9cf1819b42.hr.png b/translated_images/dom-tree.7daf0e763cbbba9273f9a66fe04c98276d7d23932309b195cb273a9cf1819b42.hr.png
new file mode 100644
index 00000000..27282d83
Binary files /dev/null and b/translated_images/dom-tree.7daf0e763cbbba9273f9a66fe04c98276d7d23932309b195cb273a9cf1819b42.hr.png differ
diff --git a/translated_images/dom-tree.7daf0e763cbbba9273f9a66fe04c98276d7d23932309b195cb273a9cf1819b42.sk.png b/translated_images/dom-tree.7daf0e763cbbba9273f9a66fe04c98276d7d23932309b195cb273a9cf1819b42.sk.png
new file mode 100644
index 00000000..ec5c52f3
Binary files /dev/null and b/translated_images/dom-tree.7daf0e763cbbba9273f9a66fe04c98276d7d23932309b195cb273a9cf1819b42.sk.png differ
diff --git a/translated_images/dom-tree.7daf0e763cbbba9273f9a66fe04c98276d7d23932309b195cb273a9cf1819b42.sl.png b/translated_images/dom-tree.7daf0e763cbbba9273f9a66fe04c98276d7d23932309b195cb273a9cf1819b42.sl.png
new file mode 100644
index 00000000..b40d3d56
Binary files /dev/null and b/translated_images/dom-tree.7daf0e763cbbba9273f9a66fe04c98276d7d23932309b195cb273a9cf1819b42.sl.png differ
diff --git a/translated_images/earlybrowsers.d984b711cdf3a42ddac919d46c4b5ca7232f68ccfbd81395e04e5a64c0015277.hr.jpg b/translated_images/earlybrowsers.d984b711cdf3a42ddac919d46c4b5ca7232f68ccfbd81395e04e5a64c0015277.hr.jpg
new file mode 100644
index 00000000..e32fa50b
Binary files /dev/null and b/translated_images/earlybrowsers.d984b711cdf3a42ddac919d46c4b5ca7232f68ccfbd81395e04e5a64c0015277.hr.jpg differ
diff --git a/translated_images/earlybrowsers.d984b711cdf3a42ddac919d46c4b5ca7232f68ccfbd81395e04e5a64c0015277.sk.jpg b/translated_images/earlybrowsers.d984b711cdf3a42ddac919d46c4b5ca7232f68ccfbd81395e04e5a64c0015277.sk.jpg
new file mode 100644
index 00000000..92a4b60f
Binary files /dev/null and b/translated_images/earlybrowsers.d984b711cdf3a42ddac919d46c4b5ca7232f68ccfbd81395e04e5a64c0015277.sk.jpg differ
diff --git a/translated_images/earlybrowsers.d984b711cdf3a42ddac919d46c4b5ca7232f68ccfbd81395e04e5a64c0015277.sl.jpg b/translated_images/earlybrowsers.d984b711cdf3a42ddac919d46c4b5ca7232f68ccfbd81395e04e5a64c0015277.sl.jpg
new file mode 100644
index 00000000..5bfd5f23
Binary files /dev/null and b/translated_images/earlybrowsers.d984b711cdf3a42ddac919d46c4b5ca7232f68ccfbd81395e04e5a64c0015277.sl.jpg differ
diff --git a/translated_images/edit-a-file-pb.263555922c14fc523f53f394da84b6e155b1c6d1835dfa572b33ea98a209ef94.hr.png b/translated_images/edit-a-file-pb.263555922c14fc523f53f394da84b6e155b1c6d1835dfa572b33ea98a209ef94.hr.png
new file mode 100644
index 00000000..0e6fbf4a
Binary files /dev/null and b/translated_images/edit-a-file-pb.263555922c14fc523f53f394da84b6e155b1c6d1835dfa572b33ea98a209ef94.hr.png differ
diff --git a/translated_images/edit-a-file-pb.263555922c14fc523f53f394da84b6e155b1c6d1835dfa572b33ea98a209ef94.sk.png b/translated_images/edit-a-file-pb.263555922c14fc523f53f394da84b6e155b1c6d1835dfa572b33ea98a209ef94.sk.png
new file mode 100644
index 00000000..34a2b96b
Binary files /dev/null and b/translated_images/edit-a-file-pb.263555922c14fc523f53f394da84b6e155b1c6d1835dfa572b33ea98a209ef94.sk.png differ
diff --git a/translated_images/edit-a-file-pb.263555922c14fc523f53f394da84b6e155b1c6d1835dfa572b33ea98a209ef94.sl.png b/translated_images/edit-a-file-pb.263555922c14fc523f53f394da84b6e155b1c6d1835dfa572b33ea98a209ef94.sl.png
new file mode 100644
index 00000000..8dc94255
Binary files /dev/null and b/translated_images/edit-a-file-pb.263555922c14fc523f53f394da84b6e155b1c6d1835dfa572b33ea98a209ef94.sl.png differ
diff --git a/translated_images/edit-a-file.52c0ee665ef19f08119d62d63f395dfefddc0a4deb9268d73bfe791f52c5807a.hr.png b/translated_images/edit-a-file.52c0ee665ef19f08119d62d63f395dfefddc0a4deb9268d73bfe791f52c5807a.hr.png
new file mode 100644
index 00000000..57014848
Binary files /dev/null and b/translated_images/edit-a-file.52c0ee665ef19f08119d62d63f395dfefddc0a4deb9268d73bfe791f52c5807a.hr.png differ
diff --git a/translated_images/edit-a-file.52c0ee665ef19f08119d62d63f395dfefddc0a4deb9268d73bfe791f52c5807a.sk.png b/translated_images/edit-a-file.52c0ee665ef19f08119d62d63f395dfefddc0a4deb9268d73bfe791f52c5807a.sk.png
new file mode 100644
index 00000000..cabeebd8
Binary files /dev/null and b/translated_images/edit-a-file.52c0ee665ef19f08119d62d63f395dfefddc0a4deb9268d73bfe791f52c5807a.sk.png differ
diff --git a/translated_images/edit-a-file.52c0ee665ef19f08119d62d63f395dfefddc0a4deb9268d73bfe791f52c5807a.sl.png b/translated_images/edit-a-file.52c0ee665ef19f08119d62d63f395dfefddc0a4deb9268d73bfe791f52c5807a.sl.png
new file mode 100644
index 00000000..b3601e0b
Binary files /dev/null and b/translated_images/edit-a-file.52c0ee665ef19f08119d62d63f395dfefddc0a4deb9268d73bfe791f52c5807a.sl.png differ
diff --git a/translated_images/enemyShip.035a46787bff658cd126f2e02f640e60fc84536ee2d009a1a5792f3e0423c148.hr.png b/translated_images/enemyShip.035a46787bff658cd126f2e02f640e60fc84536ee2d009a1a5792f3e0423c148.hr.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.035a46787bff658cd126f2e02f640e60fc84536ee2d009a1a5792f3e0423c148.hr.png differ
diff --git a/translated_images/enemyShip.035a46787bff658cd126f2e02f640e60fc84536ee2d009a1a5792f3e0423c148.sk.png b/translated_images/enemyShip.035a46787bff658cd126f2e02f640e60fc84536ee2d009a1a5792f3e0423c148.sk.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.035a46787bff658cd126f2e02f640e60fc84536ee2d009a1a5792f3e0423c148.sk.png differ
diff --git a/translated_images/enemyShip.035a46787bff658cd126f2e02f640e60fc84536ee2d009a1a5792f3e0423c148.sl.png b/translated_images/enemyShip.035a46787bff658cd126f2e02f640e60fc84536ee2d009a1a5792f3e0423c148.sl.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.035a46787bff658cd126f2e02f640e60fc84536ee2d009a1a5792f3e0423c148.sl.png differ
diff --git a/translated_images/enemyShip.1a1354d7988de290ea352832e06745922d463e9a4a7cca3b8f89477e934b16b2.hr.png b/translated_images/enemyShip.1a1354d7988de290ea352832e06745922d463e9a4a7cca3b8f89477e934b16b2.hr.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.1a1354d7988de290ea352832e06745922d463e9a4a7cca3b8f89477e934b16b2.hr.png differ
diff --git a/translated_images/enemyShip.1a1354d7988de290ea352832e06745922d463e9a4a7cca3b8f89477e934b16b2.sk.png b/translated_images/enemyShip.1a1354d7988de290ea352832e06745922d463e9a4a7cca3b8f89477e934b16b2.sk.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.1a1354d7988de290ea352832e06745922d463e9a4a7cca3b8f89477e934b16b2.sk.png differ
diff --git a/translated_images/enemyShip.1a1354d7988de290ea352832e06745922d463e9a4a7cca3b8f89477e934b16b2.sl.png b/translated_images/enemyShip.1a1354d7988de290ea352832e06745922d463e9a4a7cca3b8f89477e934b16b2.sl.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.1a1354d7988de290ea352832e06745922d463e9a4a7cca3b8f89477e934b16b2.sl.png differ
diff --git a/translated_images/enemyShip.22cbee6ea27a5809ef09dddc81a4f77714de1a4c8fe2b29ee5d13651f8d60fe0.hr.png b/translated_images/enemyShip.22cbee6ea27a5809ef09dddc81a4f77714de1a4c8fe2b29ee5d13651f8d60fe0.hr.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.22cbee6ea27a5809ef09dddc81a4f77714de1a4c8fe2b29ee5d13651f8d60fe0.hr.png differ
diff --git a/translated_images/enemyShip.22cbee6ea27a5809ef09dddc81a4f77714de1a4c8fe2b29ee5d13651f8d60fe0.sk.png b/translated_images/enemyShip.22cbee6ea27a5809ef09dddc81a4f77714de1a4c8fe2b29ee5d13651f8d60fe0.sk.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.22cbee6ea27a5809ef09dddc81a4f77714de1a4c8fe2b29ee5d13651f8d60fe0.sk.png differ
diff --git a/translated_images/enemyShip.22cbee6ea27a5809ef09dddc81a4f77714de1a4c8fe2b29ee5d13651f8d60fe0.sl.png b/translated_images/enemyShip.22cbee6ea27a5809ef09dddc81a4f77714de1a4c8fe2b29ee5d13651f8d60fe0.sl.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.22cbee6ea27a5809ef09dddc81a4f77714de1a4c8fe2b29ee5d13651f8d60fe0.sl.png differ
diff --git a/translated_images/enemyShip.321ecb1b4eb21f2c5b74a5118216ac3cbdf4cda52de32993a6c157547e7539bd.hr.png b/translated_images/enemyShip.321ecb1b4eb21f2c5b74a5118216ac3cbdf4cda52de32993a6c157547e7539bd.hr.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.321ecb1b4eb21f2c5b74a5118216ac3cbdf4cda52de32993a6c157547e7539bd.hr.png differ
diff --git a/translated_images/enemyShip.321ecb1b4eb21f2c5b74a5118216ac3cbdf4cda52de32993a6c157547e7539bd.sk.png b/translated_images/enemyShip.321ecb1b4eb21f2c5b74a5118216ac3cbdf4cda52de32993a6c157547e7539bd.sk.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.321ecb1b4eb21f2c5b74a5118216ac3cbdf4cda52de32993a6c157547e7539bd.sk.png differ
diff --git a/translated_images/enemyShip.321ecb1b4eb21f2c5b74a5118216ac3cbdf4cda52de32993a6c157547e7539bd.sl.png b/translated_images/enemyShip.321ecb1b4eb21f2c5b74a5118216ac3cbdf4cda52de32993a6c157547e7539bd.sl.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.321ecb1b4eb21f2c5b74a5118216ac3cbdf4cda52de32993a6c157547e7539bd.sl.png differ
diff --git a/translated_images/enemyShip.4fbf2889e6129db41989c4c74999ae81dd8d4dd994f1df01f720e923a5749a36.hr.png b/translated_images/enemyShip.4fbf2889e6129db41989c4c74999ae81dd8d4dd994f1df01f720e923a5749a36.hr.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.4fbf2889e6129db41989c4c74999ae81dd8d4dd994f1df01f720e923a5749a36.hr.png differ
diff --git a/translated_images/enemyShip.4fbf2889e6129db41989c4c74999ae81dd8d4dd994f1df01f720e923a5749a36.sk.png b/translated_images/enemyShip.4fbf2889e6129db41989c4c74999ae81dd8d4dd994f1df01f720e923a5749a36.sk.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.4fbf2889e6129db41989c4c74999ae81dd8d4dd994f1df01f720e923a5749a36.sk.png differ
diff --git a/translated_images/enemyShip.4fbf2889e6129db41989c4c74999ae81dd8d4dd994f1df01f720e923a5749a36.sl.png b/translated_images/enemyShip.4fbf2889e6129db41989c4c74999ae81dd8d4dd994f1df01f720e923a5749a36.sl.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.4fbf2889e6129db41989c4c74999ae81dd8d4dd994f1df01f720e923a5749a36.sl.png differ
diff --git a/translated_images/enemyShip.5df2a822c16650c2fb3c06652e8ec8120cdb9122a6de46b9a1a56d54db22657f.hr.png b/translated_images/enemyShip.5df2a822c16650c2fb3c06652e8ec8120cdb9122a6de46b9a1a56d54db22657f.hr.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.5df2a822c16650c2fb3c06652e8ec8120cdb9122a6de46b9a1a56d54db22657f.hr.png differ
diff --git a/translated_images/enemyShip.5df2a822c16650c2fb3c06652e8ec8120cdb9122a6de46b9a1a56d54db22657f.sk.png b/translated_images/enemyShip.5df2a822c16650c2fb3c06652e8ec8120cdb9122a6de46b9a1a56d54db22657f.sk.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.5df2a822c16650c2fb3c06652e8ec8120cdb9122a6de46b9a1a56d54db22657f.sk.png differ
diff --git a/translated_images/enemyShip.5df2a822c16650c2fb3c06652e8ec8120cdb9122a6de46b9a1a56d54db22657f.sl.png b/translated_images/enemyShip.5df2a822c16650c2fb3c06652e8ec8120cdb9122a6de46b9a1a56d54db22657f.sl.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.5df2a822c16650c2fb3c06652e8ec8120cdb9122a6de46b9a1a56d54db22657f.sl.png differ
diff --git a/translated_images/enemyShip.62983ed4bfb2220fe28986c8c8c5e6f1528caf879a4290bddbf3550469374c5d.hr.png b/translated_images/enemyShip.62983ed4bfb2220fe28986c8c8c5e6f1528caf879a4290bddbf3550469374c5d.hr.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.62983ed4bfb2220fe28986c8c8c5e6f1528caf879a4290bddbf3550469374c5d.hr.png differ
diff --git a/translated_images/enemyShip.62983ed4bfb2220fe28986c8c8c5e6f1528caf879a4290bddbf3550469374c5d.sk.png b/translated_images/enemyShip.62983ed4bfb2220fe28986c8c8c5e6f1528caf879a4290bddbf3550469374c5d.sk.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.62983ed4bfb2220fe28986c8c8c5e6f1528caf879a4290bddbf3550469374c5d.sk.png differ
diff --git a/translated_images/enemyShip.62983ed4bfb2220fe28986c8c8c5e6f1528caf879a4290bddbf3550469374c5d.sl.png b/translated_images/enemyShip.62983ed4bfb2220fe28986c8c8c5e6f1528caf879a4290bddbf3550469374c5d.sl.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.62983ed4bfb2220fe28986c8c8c5e6f1528caf879a4290bddbf3550469374c5d.sl.png differ
diff --git a/translated_images/enemyShip.add7036e1c3c30144d4500534897f937d962ffb178f6d7dbb536c2b19f05d3b7.hr.png b/translated_images/enemyShip.add7036e1c3c30144d4500534897f937d962ffb178f6d7dbb536c2b19f05d3b7.hr.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.add7036e1c3c30144d4500534897f937d962ffb178f6d7dbb536c2b19f05d3b7.hr.png differ
diff --git a/translated_images/enemyShip.add7036e1c3c30144d4500534897f937d962ffb178f6d7dbb536c2b19f05d3b7.sk.png b/translated_images/enemyShip.add7036e1c3c30144d4500534897f937d962ffb178f6d7dbb536c2b19f05d3b7.sk.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.add7036e1c3c30144d4500534897f937d962ffb178f6d7dbb536c2b19f05d3b7.sk.png differ
diff --git a/translated_images/enemyShip.add7036e1c3c30144d4500534897f937d962ffb178f6d7dbb536c2b19f05d3b7.sl.png b/translated_images/enemyShip.add7036e1c3c30144d4500534897f937d962ffb178f6d7dbb536c2b19f05d3b7.sl.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.add7036e1c3c30144d4500534897f937d962ffb178f6d7dbb536c2b19f05d3b7.sl.png differ
diff --git a/translated_images/enemyShip.b39a140287683bf7a409e00e19b41f29793c9dea0220e5d9fb174978fec357a2.hr.png b/translated_images/enemyShip.b39a140287683bf7a409e00e19b41f29793c9dea0220e5d9fb174978fec357a2.hr.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.b39a140287683bf7a409e00e19b41f29793c9dea0220e5d9fb174978fec357a2.hr.png differ
diff --git a/translated_images/enemyShip.b39a140287683bf7a409e00e19b41f29793c9dea0220e5d9fb174978fec357a2.sk.png b/translated_images/enemyShip.b39a140287683bf7a409e00e19b41f29793c9dea0220e5d9fb174978fec357a2.sk.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.b39a140287683bf7a409e00e19b41f29793c9dea0220e5d9fb174978fec357a2.sk.png differ
diff --git a/translated_images/enemyShip.b39a140287683bf7a409e00e19b41f29793c9dea0220e5d9fb174978fec357a2.sl.png b/translated_images/enemyShip.b39a140287683bf7a409e00e19b41f29793c9dea0220e5d9fb174978fec357a2.sl.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.b39a140287683bf7a409e00e19b41f29793c9dea0220e5d9fb174978fec357a2.sl.png differ
diff --git a/translated_images/enemyShip.b9626ed228a17a323a180f11f359f96848de1c9ee48d76702b49cd1cc3ef3821.hr.png b/translated_images/enemyShip.b9626ed228a17a323a180f11f359f96848de1c9ee48d76702b49cd1cc3ef3821.hr.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.b9626ed228a17a323a180f11f359f96848de1c9ee48d76702b49cd1cc3ef3821.hr.png differ
diff --git a/translated_images/enemyShip.b9626ed228a17a323a180f11f359f96848de1c9ee48d76702b49cd1cc3ef3821.sk.png b/translated_images/enemyShip.b9626ed228a17a323a180f11f359f96848de1c9ee48d76702b49cd1cc3ef3821.sk.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.b9626ed228a17a323a180f11f359f96848de1c9ee48d76702b49cd1cc3ef3821.sk.png differ
diff --git a/translated_images/enemyShip.b9626ed228a17a323a180f11f359f96848de1c9ee48d76702b49cd1cc3ef3821.sl.png b/translated_images/enemyShip.b9626ed228a17a323a180f11f359f96848de1c9ee48d76702b49cd1cc3ef3821.sl.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.b9626ed228a17a323a180f11f359f96848de1c9ee48d76702b49cd1cc3ef3821.sl.png differ
diff --git a/translated_images/enemyShip.deb0477a7312f54d5e9b3f707b02af3cfa2cafa04e1e9a3dd5818e6ab0244b2c.hr.png b/translated_images/enemyShip.deb0477a7312f54d5e9b3f707b02af3cfa2cafa04e1e9a3dd5818e6ab0244b2c.hr.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.deb0477a7312f54d5e9b3f707b02af3cfa2cafa04e1e9a3dd5818e6ab0244b2c.hr.png differ
diff --git a/translated_images/enemyShip.deb0477a7312f54d5e9b3f707b02af3cfa2cafa04e1e9a3dd5818e6ab0244b2c.sk.png b/translated_images/enemyShip.deb0477a7312f54d5e9b3f707b02af3cfa2cafa04e1e9a3dd5818e6ab0244b2c.sk.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.deb0477a7312f54d5e9b3f707b02af3cfa2cafa04e1e9a3dd5818e6ab0244b2c.sk.png differ
diff --git a/translated_images/enemyShip.deb0477a7312f54d5e9b3f707b02af3cfa2cafa04e1e9a3dd5818e6ab0244b2c.sl.png b/translated_images/enemyShip.deb0477a7312f54d5e9b3f707b02af3cfa2cafa04e1e9a3dd5818e6ab0244b2c.sl.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.deb0477a7312f54d5e9b3f707b02af3cfa2cafa04e1e9a3dd5818e6ab0244b2c.sl.png differ
diff --git a/translated_images/enemyUFO.bf8585e4e8dcdb68e03f67a534d870334c5db3557ad4f960027eac7782cf7ceb.hr.png b/translated_images/enemyUFO.bf8585e4e8dcdb68e03f67a534d870334c5db3557ad4f960027eac7782cf7ceb.hr.png
new file mode 100644
index 00000000..0431526a
Binary files /dev/null and b/translated_images/enemyUFO.bf8585e4e8dcdb68e03f67a534d870334c5db3557ad4f960027eac7782cf7ceb.hr.png differ
diff --git a/translated_images/enemyUFO.bf8585e4e8dcdb68e03f67a534d870334c5db3557ad4f960027eac7782cf7ceb.sk.png b/translated_images/enemyUFO.bf8585e4e8dcdb68e03f67a534d870334c5db3557ad4f960027eac7782cf7ceb.sk.png
new file mode 100644
index 00000000..0431526a
Binary files /dev/null and b/translated_images/enemyUFO.bf8585e4e8dcdb68e03f67a534d870334c5db3557ad4f960027eac7782cf7ceb.sk.png differ
diff --git a/translated_images/enemyUFO.bf8585e4e8dcdb68e03f67a534d870334c5db3557ad4f960027eac7782cf7ceb.sl.png b/translated_images/enemyUFO.bf8585e4e8dcdb68e03f67a534d870334c5db3557ad4f960027eac7782cf7ceb.sl.png
new file mode 100644
index 00000000..0431526a
Binary files /dev/null and b/translated_images/enemyUFO.bf8585e4e8dcdb68e03f67a534d870334c5db3557ad4f960027eac7782cf7ceb.sl.png differ
diff --git a/translated_images/extension-details.9f8f1fd4e9eb2de5069ae413119eb8ee43172776383ebe2f7cf640e11df2e106.hr.png b/translated_images/extension-details.9f8f1fd4e9eb2de5069ae413119eb8ee43172776383ebe2f7cf640e11df2e106.hr.png
new file mode 100644
index 00000000..686c53ad
Binary files /dev/null and b/translated_images/extension-details.9f8f1fd4e9eb2de5069ae413119eb8ee43172776383ebe2f7cf640e11df2e106.hr.png differ
diff --git a/translated_images/extension-details.9f8f1fd4e9eb2de5069ae413119eb8ee43172776383ebe2f7cf640e11df2e106.sk.png b/translated_images/extension-details.9f8f1fd4e9eb2de5069ae413119eb8ee43172776383ebe2f7cf640e11df2e106.sk.png
new file mode 100644
index 00000000..e0031a1a
Binary files /dev/null and b/translated_images/extension-details.9f8f1fd4e9eb2de5069ae413119eb8ee43172776383ebe2f7cf640e11df2e106.sk.png differ
diff --git a/translated_images/extension-details.9f8f1fd4e9eb2de5069ae413119eb8ee43172776383ebe2f7cf640e11df2e106.sl.png b/translated_images/extension-details.9f8f1fd4e9eb2de5069ae413119eb8ee43172776383ebe2f7cf640e11df2e106.sl.png
new file mode 100644
index 00000000..8726d80a
Binary files /dev/null and b/translated_images/extension-details.9f8f1fd4e9eb2de5069ae413119eb8ee43172776383ebe2f7cf640e11df2e106.sl.png differ
diff --git a/translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.hr.png b/translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.hr.png
new file mode 100644
index 00000000..fd36ad83
Binary files /dev/null and b/translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.hr.png differ
diff --git a/translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.sk.png b/translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.sk.png
new file mode 100644
index 00000000..5e5e3c13
Binary files /dev/null and b/translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.sk.png differ
diff --git a/translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.sl.png b/translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.sl.png
new file mode 100644
index 00000000..a0c0e129
Binary files /dev/null and b/translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.sl.png differ
diff --git a/translated_images/extension-settings.21c752ae4f4cdb78a867f140ccd0680e04619d0c44bb4afb26373e54b829d934.hr.png b/translated_images/extension-settings.21c752ae4f4cdb78a867f140ccd0680e04619d0c44bb4afb26373e54b829d934.hr.png
new file mode 100644
index 00000000..f5015200
Binary files /dev/null and b/translated_images/extension-settings.21c752ae4f4cdb78a867f140ccd0680e04619d0c44bb4afb26373e54b829d934.hr.png differ
diff --git a/translated_images/extension-settings.21c752ae4f4cdb78a867f140ccd0680e04619d0c44bb4afb26373e54b829d934.sk.png b/translated_images/extension-settings.21c752ae4f4cdb78a867f140ccd0680e04619d0c44bb4afb26373e54b829d934.sk.png
new file mode 100644
index 00000000..9172f599
Binary files /dev/null and b/translated_images/extension-settings.21c752ae4f4cdb78a867f140ccd0680e04619d0c44bb4afb26373e54b829d934.sk.png differ
diff --git a/translated_images/extension-settings.21c752ae4f4cdb78a867f140ccd0680e04619d0c44bb4afb26373e54b829d934.sl.png b/translated_images/extension-settings.21c752ae4f4cdb78a867f140ccd0680e04619d0c44bb4afb26373e54b829d934.sl.png
new file mode 100644
index 00000000..6c97eda8
Binary files /dev/null and b/translated_images/extension-settings.21c752ae4f4cdb78a867f140ccd0680e04619d0c44bb4afb26373e54b829d934.sl.png differ
diff --git a/translated_images/extensions.eca0e0c7f59a10b5c88be7fe24b3e32cca6b6058b35a49026c3a9d80b1813b7c.hr.png b/translated_images/extensions.eca0e0c7f59a10b5c88be7fe24b3e32cca6b6058b35a49026c3a9d80b1813b7c.hr.png
new file mode 100644
index 00000000..adbaf8d5
Binary files /dev/null and b/translated_images/extensions.eca0e0c7f59a10b5c88be7fe24b3e32cca6b6058b35a49026c3a9d80b1813b7c.hr.png differ
diff --git a/translated_images/extensions.eca0e0c7f59a10b5c88be7fe24b3e32cca6b6058b35a49026c3a9d80b1813b7c.sk.png b/translated_images/extensions.eca0e0c7f59a10b5c88be7fe24b3e32cca6b6058b35a49026c3a9d80b1813b7c.sk.png
new file mode 100644
index 00000000..6d3aa48c
Binary files /dev/null and b/translated_images/extensions.eca0e0c7f59a10b5c88be7fe24b3e32cca6b6058b35a49026c3a9d80b1813b7c.sk.png differ
diff --git a/translated_images/extensions.eca0e0c7f59a10b5c88be7fe24b3e32cca6b6058b35a49026c3a9d80b1813b7c.sl.png b/translated_images/extensions.eca0e0c7f59a10b5c88be7fe24b3e32cca6b6058b35a49026c3a9d80b1813b7c.sl.png
new file mode 100644
index 00000000..695bf293
Binary files /dev/null and b/translated_images/extensions.eca0e0c7f59a10b5c88be7fe24b3e32cca6b6058b35a49026c3a9d80b1813b7c.sl.png differ
diff --git a/translated_images/favicon.37b561214b36d454f9fd1f725d77f310fe256eb88f2a0ae08b9cb18aeb30650c.hr.png b/translated_images/favicon.37b561214b36d454f9fd1f725d77f310fe256eb88f2a0ae08b9cb18aeb30650c.hr.png
new file mode 100644
index 00000000..26e0ae43
Binary files /dev/null and b/translated_images/favicon.37b561214b36d454f9fd1f725d77f310fe256eb88f2a0ae08b9cb18aeb30650c.hr.png differ
diff --git a/translated_images/favicon.37b561214b36d454f9fd1f725d77f310fe256eb88f2a0ae08b9cb18aeb30650c.sk.png b/translated_images/favicon.37b561214b36d454f9fd1f725d77f310fe256eb88f2a0ae08b9cb18aeb30650c.sk.png
new file mode 100644
index 00000000..26e0ae43
Binary files /dev/null and b/translated_images/favicon.37b561214b36d454f9fd1f725d77f310fe256eb88f2a0ae08b9cb18aeb30650c.sk.png differ
diff --git a/translated_images/favicon.37b561214b36d454f9fd1f725d77f310fe256eb88f2a0ae08b9cb18aeb30650c.sl.png b/translated_images/favicon.37b561214b36d454f9fd1f725d77f310fe256eb88f2a0ae08b9cb18aeb30650c.sl.png
new file mode 100644
index 00000000..26e0ae43
Binary files /dev/null and b/translated_images/favicon.37b561214b36d454f9fd1f725d77f310fe256eb88f2a0ae08b9cb18aeb30650c.sl.png differ
diff --git a/translated_images/form-post.61de4ca1b964d91a9e338416e19f218504dd0af5f762fbebabfe7ae80edf885f.hr.png b/translated_images/form-post.61de4ca1b964d91a9e338416e19f218504dd0af5f762fbebabfe7ae80edf885f.hr.png
new file mode 100644
index 00000000..5a9a8c40
Binary files /dev/null and b/translated_images/form-post.61de4ca1b964d91a9e338416e19f218504dd0af5f762fbebabfe7ae80edf885f.hr.png differ
diff --git a/translated_images/form-post.61de4ca1b964d91a9e338416e19f218504dd0af5f762fbebabfe7ae80edf885f.sk.png b/translated_images/form-post.61de4ca1b964d91a9e338416e19f218504dd0af5f762fbebabfe7ae80edf885f.sk.png
new file mode 100644
index 00000000..9b6f1657
Binary files /dev/null and b/translated_images/form-post.61de4ca1b964d91a9e338416e19f218504dd0af5f762fbebabfe7ae80edf885f.sk.png differ
diff --git a/translated_images/form-post.61de4ca1b964d91a9e338416e19f218504dd0af5f762fbebabfe7ae80edf885f.sl.png b/translated_images/form-post.61de4ca1b964d91a9e338416e19f218504dd0af5f762fbebabfe7ae80edf885f.sl.png
new file mode 100644
index 00000000..97197edb
Binary files /dev/null and b/translated_images/form-post.61de4ca1b964d91a9e338416e19f218504dd0af5f762fbebabfe7ae80edf885f.sl.png differ
diff --git a/translated_images/history.7fdabbafa521e06455b738d3dafa3ff41d3071deae60ead8c7e0844b9ed987d8.hr.png b/translated_images/history.7fdabbafa521e06455b738d3dafa3ff41d3071deae60ead8c7e0844b9ed987d8.hr.png
new file mode 100644
index 00000000..2a0227e9
Binary files /dev/null and b/translated_images/history.7fdabbafa521e06455b738d3dafa3ff41d3071deae60ead8c7e0844b9ed987d8.hr.png differ
diff --git a/translated_images/history.7fdabbafa521e06455b738d3dafa3ff41d3071deae60ead8c7e0844b9ed987d8.sk.png b/translated_images/history.7fdabbafa521e06455b738d3dafa3ff41d3071deae60ead8c7e0844b9ed987d8.sk.png
new file mode 100644
index 00000000..7d11a25d
Binary files /dev/null and b/translated_images/history.7fdabbafa521e06455b738d3dafa3ff41d3071deae60ead8c7e0844b9ed987d8.sk.png differ
diff --git a/translated_images/history.7fdabbafa521e06455b738d3dafa3ff41d3071deae60ead8c7e0844b9ed987d8.sl.png b/translated_images/history.7fdabbafa521e06455b738d3dafa3ff41d3071deae60ead8c7e0844b9ed987d8.sl.png
new file mode 100644
index 00000000..879ef050
Binary files /dev/null and b/translated_images/history.7fdabbafa521e06455b738d3dafa3ff41d3071deae60ead8c7e0844b9ed987d8.sl.png differ
diff --git a/translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.hr.png b/translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.hr.png
new file mode 100644
index 00000000..c1712862
Binary files /dev/null and b/translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.hr.png differ
diff --git a/translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.sk.png b/translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.sk.png
new file mode 100644
index 00000000..b3d3a06c
Binary files /dev/null and b/translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.sk.png differ
diff --git a/translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.sl.png b/translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.sl.png
new file mode 100644
index 00000000..83abe136
Binary files /dev/null and b/translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.sl.png differ
diff --git a/translated_images/install-on-edge.d68781acaf0b3d3dada8b7507cde7a64bf74b7040d9818baaa9070668e819f90.hr.png b/translated_images/install-on-edge.d68781acaf0b3d3dada8b7507cde7a64bf74b7040d9818baaa9070668e819f90.hr.png
new file mode 100644
index 00000000..f2e2d0d8
Binary files /dev/null and b/translated_images/install-on-edge.d68781acaf0b3d3dada8b7507cde7a64bf74b7040d9818baaa9070668e819f90.hr.png differ
diff --git a/translated_images/install-on-edge.d68781acaf0b3d3dada8b7507cde7a64bf74b7040d9818baaa9070668e819f90.sk.png b/translated_images/install-on-edge.d68781acaf0b3d3dada8b7507cde7a64bf74b7040d9818baaa9070668e819f90.sk.png
new file mode 100644
index 00000000..6867502f
Binary files /dev/null and b/translated_images/install-on-edge.d68781acaf0b3d3dada8b7507cde7a64bf74b7040d9818baaa9070668e819f90.sk.png differ
diff --git a/translated_images/install-on-edge.d68781acaf0b3d3dada8b7507cde7a64bf74b7040d9818baaa9070668e819f90.sl.png b/translated_images/install-on-edge.d68781acaf0b3d3dada8b7507cde7a64bf74b7040d9818baaa9070668e819f90.sl.png
new file mode 100644
index 00000000..2133eea4
Binary files /dev/null and b/translated_images/install-on-edge.d68781acaf0b3d3dada8b7507cde7a64bf74b7040d9818baaa9070668e819f90.sl.png differ
diff --git a/translated_images/laserGreen.89904f0f499455604f204b641dfe992cb6f688d5b1c82a2227d1674af84c0b20.hr.png b/translated_images/laserGreen.89904f0f499455604f204b641dfe992cb6f688d5b1c82a2227d1674af84c0b20.hr.png
new file mode 100644
index 00000000..cfd373b4
Binary files /dev/null and b/translated_images/laserGreen.89904f0f499455604f204b641dfe992cb6f688d5b1c82a2227d1674af84c0b20.hr.png differ
diff --git a/translated_images/laserGreen.89904f0f499455604f204b641dfe992cb6f688d5b1c82a2227d1674af84c0b20.sk.png b/translated_images/laserGreen.89904f0f499455604f204b641dfe992cb6f688d5b1c82a2227d1674af84c0b20.sk.png
new file mode 100644
index 00000000..cfd373b4
Binary files /dev/null and b/translated_images/laserGreen.89904f0f499455604f204b641dfe992cb6f688d5b1c82a2227d1674af84c0b20.sk.png differ
diff --git a/translated_images/laserGreen.89904f0f499455604f204b641dfe992cb6f688d5b1c82a2227d1674af84c0b20.sl.png b/translated_images/laserGreen.89904f0f499455604f204b641dfe992cb6f688d5b1c82a2227d1674af84c0b20.sl.png
new file mode 100644
index 00000000..cfd373b4
Binary files /dev/null and b/translated_images/laserGreen.89904f0f499455604f204b641dfe992cb6f688d5b1c82a2227d1674af84c0b20.sl.png differ
diff --git a/translated_images/laserGreenShot.e4fbfc4714c08a5b1a3e94429dde0e5ad4f010c25f0d0b6c321aea62014ed203.hr.png b/translated_images/laserGreenShot.e4fbfc4714c08a5b1a3e94429dde0e5ad4f010c25f0d0b6c321aea62014ed203.hr.png
new file mode 100644
index 00000000..816fdf33
Binary files /dev/null and b/translated_images/laserGreenShot.e4fbfc4714c08a5b1a3e94429dde0e5ad4f010c25f0d0b6c321aea62014ed203.hr.png differ
diff --git a/translated_images/laserGreenShot.e4fbfc4714c08a5b1a3e94429dde0e5ad4f010c25f0d0b6c321aea62014ed203.sk.png b/translated_images/laserGreenShot.e4fbfc4714c08a5b1a3e94429dde0e5ad4f010c25f0d0b6c321aea62014ed203.sk.png
new file mode 100644
index 00000000..816fdf33
Binary files /dev/null and b/translated_images/laserGreenShot.e4fbfc4714c08a5b1a3e94429dde0e5ad4f010c25f0d0b6c321aea62014ed203.sk.png differ
diff --git a/translated_images/laserGreenShot.e4fbfc4714c08a5b1a3e94429dde0e5ad4f010c25f0d0b6c321aea62014ed203.sl.png b/translated_images/laserGreenShot.e4fbfc4714c08a5b1a3e94429dde0e5ad4f010c25f0d0b6c321aea62014ed203.sl.png
new file mode 100644
index 00000000..816fdf33
Binary files /dev/null and b/translated_images/laserGreenShot.e4fbfc4714c08a5b1a3e94429dde0e5ad4f010c25f0d0b6c321aea62014ed203.sl.png differ
diff --git a/translated_images/laserRed.2040e11f55c0a40a9800af7a11247676b4969e6c87e697f29589f605a0192b05.hr.png b/translated_images/laserRed.2040e11f55c0a40a9800af7a11247676b4969e6c87e697f29589f605a0192b05.hr.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.2040e11f55c0a40a9800af7a11247676b4969e6c87e697f29589f605a0192b05.hr.png differ
diff --git a/translated_images/laserRed.2040e11f55c0a40a9800af7a11247676b4969e6c87e697f29589f605a0192b05.sk.png b/translated_images/laserRed.2040e11f55c0a40a9800af7a11247676b4969e6c87e697f29589f605a0192b05.sk.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.2040e11f55c0a40a9800af7a11247676b4969e6c87e697f29589f605a0192b05.sk.png differ
diff --git a/translated_images/laserRed.2040e11f55c0a40a9800af7a11247676b4969e6c87e697f29589f605a0192b05.sl.png b/translated_images/laserRed.2040e11f55c0a40a9800af7a11247676b4969e6c87e697f29589f605a0192b05.sl.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.2040e11f55c0a40a9800af7a11247676b4969e6c87e697f29589f605a0192b05.sl.png differ
diff --git a/translated_images/laserRed.381bc5555491ce677eedc34e728c7c4f5676ce6c74db68d8a4d82fde952cb8fb.hr.png b/translated_images/laserRed.381bc5555491ce677eedc34e728c7c4f5676ce6c74db68d8a4d82fde952cb8fb.hr.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.381bc5555491ce677eedc34e728c7c4f5676ce6c74db68d8a4d82fde952cb8fb.hr.png differ
diff --git a/translated_images/laserRed.381bc5555491ce677eedc34e728c7c4f5676ce6c74db68d8a4d82fde952cb8fb.sk.png b/translated_images/laserRed.381bc5555491ce677eedc34e728c7c4f5676ce6c74db68d8a4d82fde952cb8fb.sk.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.381bc5555491ce677eedc34e728c7c4f5676ce6c74db68d8a4d82fde952cb8fb.sk.png differ
diff --git a/translated_images/laserRed.381bc5555491ce677eedc34e728c7c4f5676ce6c74db68d8a4d82fde952cb8fb.sl.png b/translated_images/laserRed.381bc5555491ce677eedc34e728c7c4f5676ce6c74db68d8a4d82fde952cb8fb.sl.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.381bc5555491ce677eedc34e728c7c4f5676ce6c74db68d8a4d82fde952cb8fb.sl.png differ
diff --git a/translated_images/laserRed.69730edd76f0b3bd5a45ae075c3dd1a064017020ddff4b4c3f007c21d9a62ebc.hr.png b/translated_images/laserRed.69730edd76f0b3bd5a45ae075c3dd1a064017020ddff4b4c3f007c21d9a62ebc.hr.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.69730edd76f0b3bd5a45ae075c3dd1a064017020ddff4b4c3f007c21d9a62ebc.hr.png differ
diff --git a/translated_images/laserRed.69730edd76f0b3bd5a45ae075c3dd1a064017020ddff4b4c3f007c21d9a62ebc.sk.png b/translated_images/laserRed.69730edd76f0b3bd5a45ae075c3dd1a064017020ddff4b4c3f007c21d9a62ebc.sk.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.69730edd76f0b3bd5a45ae075c3dd1a064017020ddff4b4c3f007c21d9a62ebc.sk.png differ
diff --git a/translated_images/laserRed.69730edd76f0b3bd5a45ae075c3dd1a064017020ddff4b4c3f007c21d9a62ebc.sl.png b/translated_images/laserRed.69730edd76f0b3bd5a45ae075c3dd1a064017020ddff4b4c3f007c21d9a62ebc.sl.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.69730edd76f0b3bd5a45ae075c3dd1a064017020ddff4b4c3f007c21d9a62ebc.sl.png differ
diff --git a/translated_images/laserRed.b583dc1728eb8581da951a0ec74c42cf06cf6903e9b939c71baaf04ef1a60f90.hr.png b/translated_images/laserRed.b583dc1728eb8581da951a0ec74c42cf06cf6903e9b939c71baaf04ef1a60f90.hr.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.b583dc1728eb8581da951a0ec74c42cf06cf6903e9b939c71baaf04ef1a60f90.hr.png differ
diff --git a/translated_images/laserRed.b583dc1728eb8581da951a0ec74c42cf06cf6903e9b939c71baaf04ef1a60f90.sk.png b/translated_images/laserRed.b583dc1728eb8581da951a0ec74c42cf06cf6903e9b939c71baaf04ef1a60f90.sk.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.b583dc1728eb8581da951a0ec74c42cf06cf6903e9b939c71baaf04ef1a60f90.sk.png differ
diff --git a/translated_images/laserRed.b583dc1728eb8581da951a0ec74c42cf06cf6903e9b939c71baaf04ef1a60f90.sl.png b/translated_images/laserRed.b583dc1728eb8581da951a0ec74c42cf06cf6903e9b939c71baaf04ef1a60f90.sl.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.b583dc1728eb8581da951a0ec74c42cf06cf6903e9b939c71baaf04ef1a60f90.sl.png differ
diff --git a/translated_images/laserRed.cae9ab24ea9b18fd5fde4b22153f4d71291a363bd611de8108bc6a40cecefe24.hr.png b/translated_images/laserRed.cae9ab24ea9b18fd5fde4b22153f4d71291a363bd611de8108bc6a40cecefe24.hr.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.cae9ab24ea9b18fd5fde4b22153f4d71291a363bd611de8108bc6a40cecefe24.hr.png differ
diff --git a/translated_images/laserRed.cae9ab24ea9b18fd5fde4b22153f4d71291a363bd611de8108bc6a40cecefe24.sk.png b/translated_images/laserRed.cae9ab24ea9b18fd5fde4b22153f4d71291a363bd611de8108bc6a40cecefe24.sk.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.cae9ab24ea9b18fd5fde4b22153f4d71291a363bd611de8108bc6a40cecefe24.sk.png differ
diff --git a/translated_images/laserRed.cae9ab24ea9b18fd5fde4b22153f4d71291a363bd611de8108bc6a40cecefe24.sl.png b/translated_images/laserRed.cae9ab24ea9b18fd5fde4b22153f4d71291a363bd611de8108bc6a40cecefe24.sl.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.cae9ab24ea9b18fd5fde4b22153f4d71291a363bd611de8108bc6a40cecefe24.sl.png differ
diff --git a/translated_images/laserRed.d81ce4986f87c251d4fd93a2fcfb8215c90684ad71d59de7bb0c2561a8e76d56.hr.png b/translated_images/laserRed.d81ce4986f87c251d4fd93a2fcfb8215c90684ad71d59de7bb0c2561a8e76d56.hr.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.d81ce4986f87c251d4fd93a2fcfb8215c90684ad71d59de7bb0c2561a8e76d56.hr.png differ
diff --git a/translated_images/laserRed.d81ce4986f87c251d4fd93a2fcfb8215c90684ad71d59de7bb0c2561a8e76d56.sk.png b/translated_images/laserRed.d81ce4986f87c251d4fd93a2fcfb8215c90684ad71d59de7bb0c2561a8e76d56.sk.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.d81ce4986f87c251d4fd93a2fcfb8215c90684ad71d59de7bb0c2561a8e76d56.sk.png differ
diff --git a/translated_images/laserRed.d81ce4986f87c251d4fd93a2fcfb8215c90684ad71d59de7bb0c2561a8e76d56.sl.png b/translated_images/laserRed.d81ce4986f87c251d4fd93a2fcfb8215c90684ad71d59de7bb0c2561a8e76d56.sl.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.d81ce4986f87c251d4fd93a2fcfb8215c90684ad71d59de7bb0c2561a8e76d56.sl.png differ
diff --git a/translated_images/laserRed.e58ef8db2585dfbe451c9f46f4190d75f555479ddc24e2b75be28fe3a2894f24.hr.png b/translated_images/laserRed.e58ef8db2585dfbe451c9f46f4190d75f555479ddc24e2b75be28fe3a2894f24.hr.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.e58ef8db2585dfbe451c9f46f4190d75f555479ddc24e2b75be28fe3a2894f24.hr.png differ
diff --git a/translated_images/laserRed.e58ef8db2585dfbe451c9f46f4190d75f555479ddc24e2b75be28fe3a2894f24.sk.png b/translated_images/laserRed.e58ef8db2585dfbe451c9f46f4190d75f555479ddc24e2b75be28fe3a2894f24.sk.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.e58ef8db2585dfbe451c9f46f4190d75f555479ddc24e2b75be28fe3a2894f24.sk.png differ
diff --git a/translated_images/laserRed.e58ef8db2585dfbe451c9f46f4190d75f555479ddc24e2b75be28fe3a2894f24.sl.png b/translated_images/laserRed.e58ef8db2585dfbe451c9f46f4190d75f555479ddc24e2b75be28fe3a2894f24.sl.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.e58ef8db2585dfbe451c9f46f4190d75f555479ddc24e2b75be28fe3a2894f24.sl.png differ
diff --git a/translated_images/laserRed.e66e29ace6666064cf451ce990d73b779028e21542cded84ecad88577353aad1.hr.png b/translated_images/laserRed.e66e29ace6666064cf451ce990d73b779028e21542cded84ecad88577353aad1.hr.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.e66e29ace6666064cf451ce990d73b779028e21542cded84ecad88577353aad1.hr.png differ
diff --git a/translated_images/laserRed.e66e29ace6666064cf451ce990d73b779028e21542cded84ecad88577353aad1.sk.png b/translated_images/laserRed.e66e29ace6666064cf451ce990d73b779028e21542cded84ecad88577353aad1.sk.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.e66e29ace6666064cf451ce990d73b779028e21542cded84ecad88577353aad1.sk.png differ
diff --git a/translated_images/laserRed.e66e29ace6666064cf451ce990d73b779028e21542cded84ecad88577353aad1.sl.png b/translated_images/laserRed.e66e29ace6666064cf451ce990d73b779028e21542cded84ecad88577353aad1.sl.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.e66e29ace6666064cf451ce990d73b779028e21542cded84ecad88577353aad1.sl.png differ
diff --git a/translated_images/laserRed.e86e8fb629c6026e20cc7e8507f8a1f2fc82cc355117c721eb08ac67c40d3e6a.hr.png b/translated_images/laserRed.e86e8fb629c6026e20cc7e8507f8a1f2fc82cc355117c721eb08ac67c40d3e6a.hr.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.e86e8fb629c6026e20cc7e8507f8a1f2fc82cc355117c721eb08ac67c40d3e6a.hr.png differ
diff --git a/translated_images/laserRed.e86e8fb629c6026e20cc7e8507f8a1f2fc82cc355117c721eb08ac67c40d3e6a.sk.png b/translated_images/laserRed.e86e8fb629c6026e20cc7e8507f8a1f2fc82cc355117c721eb08ac67c40d3e6a.sk.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.e86e8fb629c6026e20cc7e8507f8a1f2fc82cc355117c721eb08ac67c40d3e6a.sk.png differ
diff --git a/translated_images/laserRed.e86e8fb629c6026e20cc7e8507f8a1f2fc82cc355117c721eb08ac67c40d3e6a.sl.png b/translated_images/laserRed.e86e8fb629c6026e20cc7e8507f8a1f2fc82cc355117c721eb08ac67c40d3e6a.sl.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.e86e8fb629c6026e20cc7e8507f8a1f2fc82cc355117c721eb08ac67c40d3e6a.sl.png differ
diff --git a/translated_images/laserRedShot.c39d066745996a71e5ffb0eeec4eff60fede6dc7fb65bdf8ef8b64193fda04c9.hr.png b/translated_images/laserRedShot.c39d066745996a71e5ffb0eeec4eff60fede6dc7fb65bdf8ef8b64193fda04c9.hr.png
new file mode 100644
index 00000000..28ecda5b
Binary files /dev/null and b/translated_images/laserRedShot.c39d066745996a71e5ffb0eeec4eff60fede6dc7fb65bdf8ef8b64193fda04c9.hr.png differ
diff --git a/translated_images/laserRedShot.c39d066745996a71e5ffb0eeec4eff60fede6dc7fb65bdf8ef8b64193fda04c9.sk.png b/translated_images/laserRedShot.c39d066745996a71e5ffb0eeec4eff60fede6dc7fb65bdf8ef8b64193fda04c9.sk.png
new file mode 100644
index 00000000..28ecda5b
Binary files /dev/null and b/translated_images/laserRedShot.c39d066745996a71e5ffb0eeec4eff60fede6dc7fb65bdf8ef8b64193fda04c9.sk.png differ
diff --git a/translated_images/laserRedShot.c39d066745996a71e5ffb0eeec4eff60fede6dc7fb65bdf8ef8b64193fda04c9.sl.png b/translated_images/laserRedShot.c39d066745996a71e5ffb0eeec4eff60fede6dc7fb65bdf8ef8b64193fda04c9.sl.png
new file mode 100644
index 00000000..28ecda5b
Binary files /dev/null and b/translated_images/laserRedShot.c39d066745996a71e5ffb0eeec4eff60fede6dc7fb65bdf8ef8b64193fda04c9.sl.png differ
diff --git a/translated_images/life.27144b6d4bfdea76e9613184ff89c93d44888d2c9068a8599553a4306cd539ea.hr.png b/translated_images/life.27144b6d4bfdea76e9613184ff89c93d44888d2c9068a8599553a4306cd539ea.hr.png
new file mode 100644
index 00000000..3487f796
Binary files /dev/null and b/translated_images/life.27144b6d4bfdea76e9613184ff89c93d44888d2c9068a8599553a4306cd539ea.hr.png differ
diff --git a/translated_images/life.27144b6d4bfdea76e9613184ff89c93d44888d2c9068a8599553a4306cd539ea.sk.png b/translated_images/life.27144b6d4bfdea76e9613184ff89c93d44888d2c9068a8599553a4306cd539ea.sk.png
new file mode 100644
index 00000000..3487f796
Binary files /dev/null and b/translated_images/life.27144b6d4bfdea76e9613184ff89c93d44888d2c9068a8599553a4306cd539ea.sk.png differ
diff --git a/translated_images/life.27144b6d4bfdea76e9613184ff89c93d44888d2c9068a8599553a4306cd539ea.sl.png b/translated_images/life.27144b6d4bfdea76e9613184ff89c93d44888d2c9068a8599553a4306cd539ea.sl.png
new file mode 100644
index 00000000..3487f796
Binary files /dev/null and b/translated_images/life.27144b6d4bfdea76e9613184ff89c93d44888d2c9068a8599553a4306cd539ea.sl.png differ
diff --git a/translated_images/life.2a159298dd98f4efde6d8b2792eaff08d6944f39e57dbfa65b0b3d7f27addf7e.hr.png b/translated_images/life.2a159298dd98f4efde6d8b2792eaff08d6944f39e57dbfa65b0b3d7f27addf7e.hr.png
new file mode 100644
index 00000000..3487f796
Binary files /dev/null and b/translated_images/life.2a159298dd98f4efde6d8b2792eaff08d6944f39e57dbfa65b0b3d7f27addf7e.hr.png differ
diff --git a/translated_images/life.2a159298dd98f4efde6d8b2792eaff08d6944f39e57dbfa65b0b3d7f27addf7e.sk.png b/translated_images/life.2a159298dd98f4efde6d8b2792eaff08d6944f39e57dbfa65b0b3d7f27addf7e.sk.png
new file mode 100644
index 00000000..3487f796
Binary files /dev/null and b/translated_images/life.2a159298dd98f4efde6d8b2792eaff08d6944f39e57dbfa65b0b3d7f27addf7e.sk.png differ
diff --git a/translated_images/life.2a159298dd98f4efde6d8b2792eaff08d6944f39e57dbfa65b0b3d7f27addf7e.sl.png b/translated_images/life.2a159298dd98f4efde6d8b2792eaff08d6944f39e57dbfa65b0b3d7f27addf7e.sl.png
new file mode 100644
index 00000000..3487f796
Binary files /dev/null and b/translated_images/life.2a159298dd98f4efde6d8b2792eaff08d6944f39e57dbfa65b0b3d7f27addf7e.sl.png differ
diff --git a/translated_images/life.466df3b1692a244ad9189538ae5184e6bb43165d7c3172f66b5a60790a1541cc.hr.png b/translated_images/life.466df3b1692a244ad9189538ae5184e6bb43165d7c3172f66b5a60790a1541cc.hr.png
new file mode 100644
index 00000000..3487f796
Binary files /dev/null and b/translated_images/life.466df3b1692a244ad9189538ae5184e6bb43165d7c3172f66b5a60790a1541cc.hr.png differ
diff --git a/translated_images/life.466df3b1692a244ad9189538ae5184e6bb43165d7c3172f66b5a60790a1541cc.sk.png b/translated_images/life.466df3b1692a244ad9189538ae5184e6bb43165d7c3172f66b5a60790a1541cc.sk.png
new file mode 100644
index 00000000..3487f796
Binary files /dev/null and b/translated_images/life.466df3b1692a244ad9189538ae5184e6bb43165d7c3172f66b5a60790a1541cc.sk.png differ
diff --git a/translated_images/life.466df3b1692a244ad9189538ae5184e6bb43165d7c3172f66b5a60790a1541cc.sl.png b/translated_images/life.466df3b1692a244ad9189538ae5184e6bb43165d7c3172f66b5a60790a1541cc.sl.png
new file mode 100644
index 00000000..3487f796
Binary files /dev/null and b/translated_images/life.466df3b1692a244ad9189538ae5184e6bb43165d7c3172f66b5a60790a1541cc.sl.png differ
diff --git a/translated_images/life.65a2aaceca87528424e6e93a36e953b58d4facfefbfd42dc4d6ad2db43076018.hr.png b/translated_images/life.65a2aaceca87528424e6e93a36e953b58d4facfefbfd42dc4d6ad2db43076018.hr.png
new file mode 100644
index 00000000..3487f796
Binary files /dev/null and b/translated_images/life.65a2aaceca87528424e6e93a36e953b58d4facfefbfd42dc4d6ad2db43076018.hr.png differ
diff --git a/translated_images/life.65a2aaceca87528424e6e93a36e953b58d4facfefbfd42dc4d6ad2db43076018.sk.png b/translated_images/life.65a2aaceca87528424e6e93a36e953b58d4facfefbfd42dc4d6ad2db43076018.sk.png
new file mode 100644
index 00000000..3487f796
Binary files /dev/null and b/translated_images/life.65a2aaceca87528424e6e93a36e953b58d4facfefbfd42dc4d6ad2db43076018.sk.png differ
diff --git a/translated_images/life.65a2aaceca87528424e6e93a36e953b58d4facfefbfd42dc4d6ad2db43076018.sl.png b/translated_images/life.65a2aaceca87528424e6e93a36e953b58d4facfefbfd42dc4d6ad2db43076018.sl.png
new file mode 100644
index 00000000..3487f796
Binary files /dev/null and b/translated_images/life.65a2aaceca87528424e6e93a36e953b58d4facfefbfd42dc4d6ad2db43076018.sl.png differ
diff --git a/translated_images/life.6fb9f50d53ee0413cd91aa411f7c296e10a1a6de5c4a4197c718b49bf7d63ebf.hr.png b/translated_images/life.6fb9f50d53ee0413cd91aa411f7c296e10a1a6de5c4a4197c718b49bf7d63ebf.hr.png
new file mode 100644
index 00000000..3487f796
Binary files /dev/null and b/translated_images/life.6fb9f50d53ee0413cd91aa411f7c296e10a1a6de5c4a4197c718b49bf7d63ebf.hr.png differ
diff --git a/translated_images/life.6fb9f50d53ee0413cd91aa411f7c296e10a1a6de5c4a4197c718b49bf7d63ebf.sk.png b/translated_images/life.6fb9f50d53ee0413cd91aa411f7c296e10a1a6de5c4a4197c718b49bf7d63ebf.sk.png
new file mode 100644
index 00000000..3487f796
Binary files /dev/null and b/translated_images/life.6fb9f50d53ee0413cd91aa411f7c296e10a1a6de5c4a4197c718b49bf7d63ebf.sk.png differ
diff --git a/translated_images/life.6fb9f50d53ee0413cd91aa411f7c296e10a1a6de5c4a4197c718b49bf7d63ebf.sl.png b/translated_images/life.6fb9f50d53ee0413cd91aa411f7c296e10a1a6de5c4a4197c718b49bf7d63ebf.sl.png
new file mode 100644
index 00000000..3487f796
Binary files /dev/null and b/translated_images/life.6fb9f50d53ee0413cd91aa411f7c296e10a1a6de5c4a4197c718b49bf7d63ebf.sl.png differ
diff --git a/translated_images/life.78b6e96a3003767e113e7d6fbb5d57fc59245a92579256c08af23c93f2e2b0a3.hr.png b/translated_images/life.78b6e96a3003767e113e7d6fbb5d57fc59245a92579256c08af23c93f2e2b0a3.hr.png
new file mode 100644
index 00000000..3487f796
Binary files /dev/null and b/translated_images/life.78b6e96a3003767e113e7d6fbb5d57fc59245a92579256c08af23c93f2e2b0a3.hr.png differ
diff --git a/translated_images/life.78b6e96a3003767e113e7d6fbb5d57fc59245a92579256c08af23c93f2e2b0a3.sk.png b/translated_images/life.78b6e96a3003767e113e7d6fbb5d57fc59245a92579256c08af23c93f2e2b0a3.sk.png
new file mode 100644
index 00000000..3487f796
Binary files /dev/null and b/translated_images/life.78b6e96a3003767e113e7d6fbb5d57fc59245a92579256c08af23c93f2e2b0a3.sk.png differ
diff --git a/translated_images/life.78b6e96a3003767e113e7d6fbb5d57fc59245a92579256c08af23c93f2e2b0a3.sl.png b/translated_images/life.78b6e96a3003767e113e7d6fbb5d57fc59245a92579256c08af23c93f2e2b0a3.sl.png
new file mode 100644
index 00000000..3487f796
Binary files /dev/null and b/translated_images/life.78b6e96a3003767e113e7d6fbb5d57fc59245a92579256c08af23c93f2e2b0a3.sl.png differ
diff --git a/translated_images/life.86d843ce9c23289c0094eff7154a7b6d3cada290b7db733424ee1c68864143c5.hr.png b/translated_images/life.86d843ce9c23289c0094eff7154a7b6d3cada290b7db733424ee1c68864143c5.hr.png
new file mode 100644
index 00000000..3487f796
Binary files /dev/null and b/translated_images/life.86d843ce9c23289c0094eff7154a7b6d3cada290b7db733424ee1c68864143c5.hr.png differ
diff --git a/translated_images/life.86d843ce9c23289c0094eff7154a7b6d3cada290b7db733424ee1c68864143c5.sk.png b/translated_images/life.86d843ce9c23289c0094eff7154a7b6d3cada290b7db733424ee1c68864143c5.sk.png
new file mode 100644
index 00000000..3487f796
Binary files /dev/null and b/translated_images/life.86d843ce9c23289c0094eff7154a7b6d3cada290b7db733424ee1c68864143c5.sk.png differ
diff --git a/translated_images/life.86d843ce9c23289c0094eff7154a7b6d3cada290b7db733424ee1c68864143c5.sl.png b/translated_images/life.86d843ce9c23289c0094eff7154a7b6d3cada290b7db733424ee1c68864143c5.sl.png
new file mode 100644
index 00000000..3487f796
Binary files /dev/null and b/translated_images/life.86d843ce9c23289c0094eff7154a7b6d3cada290b7db733424ee1c68864143c5.sl.png differ
diff --git a/translated_images/localstorage.472f8147b6a3f8d141d9551c95a2da610ac9a3c6a73d4a1c224081c98bae09d9.hr.png b/translated_images/localstorage.472f8147b6a3f8d141d9551c95a2da610ac9a3c6a73d4a1c224081c98bae09d9.hr.png
new file mode 100644
index 00000000..6f36e792
Binary files /dev/null and b/translated_images/localstorage.472f8147b6a3f8d141d9551c95a2da610ac9a3c6a73d4a1c224081c98bae09d9.hr.png differ
diff --git a/translated_images/localstorage.472f8147b6a3f8d141d9551c95a2da610ac9a3c6a73d4a1c224081c98bae09d9.sk.png b/translated_images/localstorage.472f8147b6a3f8d141d9551c95a2da610ac9a3c6a73d4a1c224081c98bae09d9.sk.png
new file mode 100644
index 00000000..82dcd8fa
Binary files /dev/null and b/translated_images/localstorage.472f8147b6a3f8d141d9551c95a2da610ac9a3c6a73d4a1c224081c98bae09d9.sk.png differ
diff --git a/translated_images/localstorage.472f8147b6a3f8d141d9551c95a2da610ac9a3c6a73d4a1c224081c98bae09d9.sl.png b/translated_images/localstorage.472f8147b6a3f8d141d9551c95a2da610ac9a3c6a73d4a1c224081c98bae09d9.sl.png
new file mode 100644
index 00000000..082fdf3d
Binary files /dev/null and b/translated_images/localstorage.472f8147b6a3f8d141d9551c95a2da610ac9a3c6a73d4a1c224081c98bae09d9.sl.png differ
diff --git a/translated_images/log.804026979f3707e00eebcfa028b2b5a88cec6292f858767bb6703afba65a7d9c.hr.png b/translated_images/log.804026979f3707e00eebcfa028b2b5a88cec6292f858767bb6703afba65a7d9c.hr.png
new file mode 100644
index 00000000..d4dd3367
Binary files /dev/null and b/translated_images/log.804026979f3707e00eebcfa028b2b5a88cec6292f858767bb6703afba65a7d9c.hr.png differ
diff --git a/translated_images/log.804026979f3707e00eebcfa028b2b5a88cec6292f858767bb6703afba65a7d9c.sk.png b/translated_images/log.804026979f3707e00eebcfa028b2b5a88cec6292f858767bb6703afba65a7d9c.sk.png
new file mode 100644
index 00000000..f426984f
Binary files /dev/null and b/translated_images/log.804026979f3707e00eebcfa028b2b5a88cec6292f858767bb6703afba65a7d9c.sk.png differ
diff --git a/translated_images/log.804026979f3707e00eebcfa028b2b5a88cec6292f858767bb6703afba65a7d9c.sl.png b/translated_images/log.804026979f3707e00eebcfa028b2b5a88cec6292f858767bb6703afba65a7d9c.sl.png
new file mode 100644
index 00000000..84d8717d
Binary files /dev/null and b/translated_images/log.804026979f3707e00eebcfa028b2b5a88cec6292f858767bb6703afba65a7d9c.sl.png differ
diff --git a/translated_images/login-error.416fe019b36a63276764c2349df5d99e04ebda54fefe60c715ee87a28d5d4ad0.hr.png b/translated_images/login-error.416fe019b36a63276764c2349df5d99e04ebda54fefe60c715ee87a28d5d4ad0.hr.png
new file mode 100644
index 00000000..c0afc6e2
Binary files /dev/null and b/translated_images/login-error.416fe019b36a63276764c2349df5d99e04ebda54fefe60c715ee87a28d5d4ad0.hr.png differ
diff --git a/translated_images/login-error.416fe019b36a63276764c2349df5d99e04ebda54fefe60c715ee87a28d5d4ad0.sk.png b/translated_images/login-error.416fe019b36a63276764c2349df5d99e04ebda54fefe60c715ee87a28d5d4ad0.sk.png
new file mode 100644
index 00000000..e9ef2885
Binary files /dev/null and b/translated_images/login-error.416fe019b36a63276764c2349df5d99e04ebda54fefe60c715ee87a28d5d4ad0.sk.png differ
diff --git a/translated_images/login-error.416fe019b36a63276764c2349df5d99e04ebda54fefe60c715ee87a28d5d4ad0.sl.png b/translated_images/login-error.416fe019b36a63276764c2349df5d99e04ebda54fefe60c715ee87a28d5d4ad0.sl.png
new file mode 100644
index 00000000..7117f2af
Binary files /dev/null and b/translated_images/login-error.416fe019b36a63276764c2349df5d99e04ebda54fefe60c715ee87a28d5d4ad0.sl.png differ
diff --git a/translated_images/meteorBig.1e452b3ad7af50adaafcbe25c82b2758be31cdff66d6b417b79f5453bf9ad3e0.hr.png b/translated_images/meteorBig.1e452b3ad7af50adaafcbe25c82b2758be31cdff66d6b417b79f5453bf9ad3e0.hr.png
new file mode 100644
index 00000000..b3cd5407
Binary files /dev/null and b/translated_images/meteorBig.1e452b3ad7af50adaafcbe25c82b2758be31cdff66d6b417b79f5453bf9ad3e0.hr.png differ
diff --git a/translated_images/meteorBig.1e452b3ad7af50adaafcbe25c82b2758be31cdff66d6b417b79f5453bf9ad3e0.sk.png b/translated_images/meteorBig.1e452b3ad7af50adaafcbe25c82b2758be31cdff66d6b417b79f5453bf9ad3e0.sk.png
new file mode 100644
index 00000000..b3cd5407
Binary files /dev/null and b/translated_images/meteorBig.1e452b3ad7af50adaafcbe25c82b2758be31cdff66d6b417b79f5453bf9ad3e0.sk.png differ
diff --git a/translated_images/meteorBig.1e452b3ad7af50adaafcbe25c82b2758be31cdff66d6b417b79f5453bf9ad3e0.sl.png b/translated_images/meteorBig.1e452b3ad7af50adaafcbe25c82b2758be31cdff66d6b417b79f5453bf9ad3e0.sl.png
new file mode 100644
index 00000000..b3cd5407
Binary files /dev/null and b/translated_images/meteorBig.1e452b3ad7af50adaafcbe25c82b2758be31cdff66d6b417b79f5453bf9ad3e0.sl.png differ
diff --git a/translated_images/meteorSmall.0d729bc71c12d41f26f077dfbecaccb9016e21e11dac7966e4f2de825e5de3b6.hr.png b/translated_images/meteorSmall.0d729bc71c12d41f26f077dfbecaccb9016e21e11dac7966e4f2de825e5de3b6.hr.png
new file mode 100644
index 00000000..a61e0e28
Binary files /dev/null and b/translated_images/meteorSmall.0d729bc71c12d41f26f077dfbecaccb9016e21e11dac7966e4f2de825e5de3b6.hr.png differ
diff --git a/translated_images/meteorSmall.0d729bc71c12d41f26f077dfbecaccb9016e21e11dac7966e4f2de825e5de3b6.sk.png b/translated_images/meteorSmall.0d729bc71c12d41f26f077dfbecaccb9016e21e11dac7966e4f2de825e5de3b6.sk.png
new file mode 100644
index 00000000..a61e0e28
Binary files /dev/null and b/translated_images/meteorSmall.0d729bc71c12d41f26f077dfbecaccb9016e21e11dac7966e4f2de825e5de3b6.sk.png differ
diff --git a/translated_images/meteorSmall.0d729bc71c12d41f26f077dfbecaccb9016e21e11dac7966e4f2de825e5de3b6.sl.png b/translated_images/meteorSmall.0d729bc71c12d41f26f077dfbecaccb9016e21e11dac7966e4f2de825e5de3b6.sl.png
new file mode 100644
index 00000000..a61e0e28
Binary files /dev/null and b/translated_images/meteorSmall.0d729bc71c12d41f26f077dfbecaccb9016e21e11dac7966e4f2de825e5de3b6.sl.png differ
diff --git a/translated_images/moodle.94eb93d714a50cb2c97435b408017dee224348b61bc86203ffd43a4f4e57b95f.hr.png b/translated_images/moodle.94eb93d714a50cb2c97435b408017dee224348b61bc86203ffd43a4f4e57b95f.hr.png
new file mode 100644
index 00000000..60157fb1
Binary files /dev/null and b/translated_images/moodle.94eb93d714a50cb2c97435b408017dee224348b61bc86203ffd43a4f4e57b95f.hr.png differ
diff --git a/translated_images/moodle.94eb93d714a50cb2c97435b408017dee224348b61bc86203ffd43a4f4e57b95f.sk.png b/translated_images/moodle.94eb93d714a50cb2c97435b408017dee224348b61bc86203ffd43a4f4e57b95f.sk.png
new file mode 100644
index 00000000..1f500c3e
Binary files /dev/null and b/translated_images/moodle.94eb93d714a50cb2c97435b408017dee224348b61bc86203ffd43a4f4e57b95f.sk.png differ
diff --git a/translated_images/moodle.94eb93d714a50cb2c97435b408017dee224348b61bc86203ffd43a4f4e57b95f.sl.png b/translated_images/moodle.94eb93d714a50cb2c97435b408017dee224348b61bc86203ffd43a4f4e57b95f.sl.png
new file mode 100644
index 00000000..5f3fe476
Binary files /dev/null and b/translated_images/moodle.94eb93d714a50cb2c97435b408017dee224348b61bc86203ffd43a4f4e57b95f.sl.png differ
diff --git a/translated_images/mpa.7f7375a1a2d4aa779d3f928a2aaaf9ad76bcdeb05cfce2dc27ab126024050f51.hr.png b/translated_images/mpa.7f7375a1a2d4aa779d3f928a2aaaf9ad76bcdeb05cfce2dc27ab126024050f51.hr.png
new file mode 100644
index 00000000..034a997c
Binary files /dev/null and b/translated_images/mpa.7f7375a1a2d4aa779d3f928a2aaaf9ad76bcdeb05cfce2dc27ab126024050f51.hr.png differ
diff --git a/translated_images/mpa.7f7375a1a2d4aa779d3f928a2aaaf9ad76bcdeb05cfce2dc27ab126024050f51.sk.png b/translated_images/mpa.7f7375a1a2d4aa779d3f928a2aaaf9ad76bcdeb05cfce2dc27ab126024050f51.sk.png
new file mode 100644
index 00000000..f029702a
Binary files /dev/null and b/translated_images/mpa.7f7375a1a2d4aa779d3f928a2aaaf9ad76bcdeb05cfce2dc27ab126024050f51.sk.png differ
diff --git a/translated_images/mpa.7f7375a1a2d4aa779d3f928a2aaaf9ad76bcdeb05cfce2dc27ab126024050f51.sl.png b/translated_images/mpa.7f7375a1a2d4aa779d3f928a2aaaf9ad76bcdeb05cfce2dc27ab126024050f51.sl.png
new file mode 100644
index 00000000..80c2665d
Binary files /dev/null and b/translated_images/mpa.7f7375a1a2d4aa779d3f928a2aaaf9ad76bcdeb05cfce2dc27ab126024050f51.sl.png differ
diff --git a/translated_images/nebula.55c2933d36d035d359ef8d8422e7a7f260b3f6d15c026a18472bf8e71185d59c.hr.png b/translated_images/nebula.55c2933d36d035d359ef8d8422e7a7f260b3f6d15c026a18472bf8e71185d59c.hr.png
new file mode 100644
index 00000000..75523088
Binary files /dev/null and b/translated_images/nebula.55c2933d36d035d359ef8d8422e7a7f260b3f6d15c026a18472bf8e71185d59c.hr.png differ
diff --git a/translated_images/nebula.55c2933d36d035d359ef8d8422e7a7f260b3f6d15c026a18472bf8e71185d59c.sk.png b/translated_images/nebula.55c2933d36d035d359ef8d8422e7a7f260b3f6d15c026a18472bf8e71185d59c.sk.png
new file mode 100644
index 00000000..75523088
Binary files /dev/null and b/translated_images/nebula.55c2933d36d035d359ef8d8422e7a7f260b3f6d15c026a18472bf8e71185d59c.sk.png differ
diff --git a/translated_images/nebula.55c2933d36d035d359ef8d8422e7a7f260b3f6d15c026a18472bf8e71185d59c.sl.png b/translated_images/nebula.55c2933d36d035d359ef8d8422e7a7f260b3f6d15c026a18472bf8e71185d59c.sl.png
new file mode 100644
index 00000000..75523088
Binary files /dev/null and b/translated_images/nebula.55c2933d36d035d359ef8d8422e7a7f260b3f6d15c026a18472bf8e71185d59c.sl.png differ
diff --git a/translated_images/new-file-github.com.c886796d800e8056561829a181be1382c5303da9d902d8b2dd82b68a4806e21f.hr.png b/translated_images/new-file-github.com.c886796d800e8056561829a181be1382c5303da9d902d8b2dd82b68a4806e21f.hr.png
new file mode 100644
index 00000000..a0f4303e
Binary files /dev/null and b/translated_images/new-file-github.com.c886796d800e8056561829a181be1382c5303da9d902d8b2dd82b68a4806e21f.hr.png differ
diff --git a/translated_images/new-file-github.com.c886796d800e8056561829a181be1382c5303da9d902d8b2dd82b68a4806e21f.sk.png b/translated_images/new-file-github.com.c886796d800e8056561829a181be1382c5303da9d902d8b2dd82b68a4806e21f.sk.png
new file mode 100644
index 00000000..83ccddc0
Binary files /dev/null and b/translated_images/new-file-github.com.c886796d800e8056561829a181be1382c5303da9d902d8b2dd82b68a4806e21f.sk.png differ
diff --git a/translated_images/new-file-github.com.c886796d800e8056561829a181be1382c5303da9d902d8b2dd82b68a4806e21f.sl.png b/translated_images/new-file-github.com.c886796d800e8056561829a181be1382c5303da9d902d8b2dd82b68a4806e21f.sl.png
new file mode 100644
index 00000000..ab52818a
Binary files /dev/null and b/translated_images/new-file-github.com.c886796d800e8056561829a181be1382c5303da9d902d8b2dd82b68a4806e21f.sl.png differ
diff --git a/translated_images/open-palette-menu.46dda01084738da84fc55100956fcc915f33e9de8c19813148ac3b1803871cff.hr.png b/translated_images/open-palette-menu.46dda01084738da84fc55100956fcc915f33e9de8c19813148ac3b1803871cff.hr.png
new file mode 100644
index 00000000..cce8f60c
Binary files /dev/null and b/translated_images/open-palette-menu.46dda01084738da84fc55100956fcc915f33e9de8c19813148ac3b1803871cff.hr.png differ
diff --git a/translated_images/open-palette-menu.46dda01084738da84fc55100956fcc915f33e9de8c19813148ac3b1803871cff.sk.png b/translated_images/open-palette-menu.46dda01084738da84fc55100956fcc915f33e9de8c19813148ac3b1803871cff.sk.png
new file mode 100644
index 00000000..f05b0fe8
Binary files /dev/null and b/translated_images/open-palette-menu.46dda01084738da84fc55100956fcc915f33e9de8c19813148ac3b1803871cff.sk.png differ
diff --git a/translated_images/open-palette-menu.46dda01084738da84fc55100956fcc915f33e9de8c19813148ac3b1803871cff.sl.png b/translated_images/open-palette-menu.46dda01084738da84fc55100956fcc915f33e9de8c19813148ac3b1803871cff.sl.png
new file mode 100644
index 00000000..1de4dbc3
Binary files /dev/null and b/translated_images/open-palette-menu.46dda01084738da84fc55100956fcc915f33e9de8c19813148ac3b1803871cff.sl.png differ
diff --git a/translated_images/open-remote-repository.bd9c2598b8949e7fc283cdfc8f4050c6205a7c7c6d3f78c4b135115d037d6fa2.hr.png b/translated_images/open-remote-repository.bd9c2598b8949e7fc283cdfc8f4050c6205a7c7c6d3f78c4b135115d037d6fa2.hr.png
new file mode 100644
index 00000000..ac63273f
Binary files /dev/null and b/translated_images/open-remote-repository.bd9c2598b8949e7fc283cdfc8f4050c6205a7c7c6d3f78c4b135115d037d6fa2.hr.png differ
diff --git a/translated_images/open-remote-repository.bd9c2598b8949e7fc283cdfc8f4050c6205a7c7c6d3f78c4b135115d037d6fa2.sk.png b/translated_images/open-remote-repository.bd9c2598b8949e7fc283cdfc8f4050c6205a7c7c6d3f78c4b135115d037d6fa2.sk.png
new file mode 100644
index 00000000..2acb16d5
Binary files /dev/null and b/translated_images/open-remote-repository.bd9c2598b8949e7fc283cdfc8f4050c6205a7c7c6d3f78c4b135115d037d6fa2.sk.png differ
diff --git a/translated_images/open-remote-repository.bd9c2598b8949e7fc283cdfc8f4050c6205a7c7c6d3f78c4b135115d037d6fa2.sl.png b/translated_images/open-remote-repository.bd9c2598b8949e7fc283cdfc8f4050c6205a7c7c6d3f78c4b135115d037d6fa2.sl.png
new file mode 100644
index 00000000..8f17c764
Binary files /dev/null and b/translated_images/open-remote-repository.bd9c2598b8949e7fc283cdfc8f4050c6205a7c7c6d3f78c4b135115d037d6fa2.sl.png differ
diff --git a/translated_images/palette-menu.4946174e07f426226afcdad707d19b8d5150e41591c751c45b5dee213affef91.hr.png b/translated_images/palette-menu.4946174e07f426226afcdad707d19b8d5150e41591c751c45b5dee213affef91.hr.png
new file mode 100644
index 00000000..a08efc3f
Binary files /dev/null and b/translated_images/palette-menu.4946174e07f426226afcdad707d19b8d5150e41591c751c45b5dee213affef91.hr.png differ
diff --git a/translated_images/palette-menu.4946174e07f426226afcdad707d19b8d5150e41591c751c45b5dee213affef91.sk.png b/translated_images/palette-menu.4946174e07f426226afcdad707d19b8d5150e41591c751c45b5dee213affef91.sk.png
new file mode 100644
index 00000000..c7ccecd4
Binary files /dev/null and b/translated_images/palette-menu.4946174e07f426226afcdad707d19b8d5150e41591c751c45b5dee213affef91.sk.png differ
diff --git a/translated_images/palette-menu.4946174e07f426226afcdad707d19b8d5150e41591c751c45b5dee213affef91.sl.png b/translated_images/palette-menu.4946174e07f426226afcdad707d19b8d5150e41591c751c45b5dee213affef91.sl.png
new file mode 100644
index 00000000..2f6b7a1e
Binary files /dev/null and b/translated_images/palette-menu.4946174e07f426226afcdad707d19b8d5150e41591c751c45b5dee213affef91.sl.png differ
diff --git a/translated_images/partI-solution.36c53b48c9ffae2a5e15496b23b604ba5393433e4bf91608a7a0a020eb7a2691.hr.png b/translated_images/partI-solution.36c53b48c9ffae2a5e15496b23b604ba5393433e4bf91608a7a0a020eb7a2691.hr.png
new file mode 100644
index 00000000..88783500
Binary files /dev/null and b/translated_images/partI-solution.36c53b48c9ffae2a5e15496b23b604ba5393433e4bf91608a7a0a020eb7a2691.hr.png differ
diff --git a/translated_images/partI-solution.36c53b48c9ffae2a5e15496b23b604ba5393433e4bf91608a7a0a020eb7a2691.sk.png b/translated_images/partI-solution.36c53b48c9ffae2a5e15496b23b604ba5393433e4bf91608a7a0a020eb7a2691.sk.png
new file mode 100644
index 00000000..88783500
Binary files /dev/null and b/translated_images/partI-solution.36c53b48c9ffae2a5e15496b23b604ba5393433e4bf91608a7a0a020eb7a2691.sk.png differ
diff --git a/translated_images/partI-solution.36c53b48c9ffae2a5e15496b23b604ba5393433e4bf91608a7a0a020eb7a2691.sl.png b/translated_images/partI-solution.36c53b48c9ffae2a5e15496b23b604ba5393433e4bf91608a7a0a020eb7a2691.sl.png
new file mode 100644
index 00000000..88783500
Binary files /dev/null and b/translated_images/partI-solution.36c53b48c9ffae2a5e15496b23b604ba5393433e4bf91608a7a0a020eb7a2691.sl.png differ
diff --git a/translated_images/plant1.a876180d8659acb9a51f95b2466b207b95dec201fafa23efcd4137fb62d0acb1.hr.png b/translated_images/plant1.a876180d8659acb9a51f95b2466b207b95dec201fafa23efcd4137fb62d0acb1.hr.png
new file mode 100644
index 00000000..0632233d
Binary files /dev/null and b/translated_images/plant1.a876180d8659acb9a51f95b2466b207b95dec201fafa23efcd4137fb62d0acb1.hr.png differ
diff --git a/translated_images/plant1.a876180d8659acb9a51f95b2466b207b95dec201fafa23efcd4137fb62d0acb1.sk.png b/translated_images/plant1.a876180d8659acb9a51f95b2466b207b95dec201fafa23efcd4137fb62d0acb1.sk.png
new file mode 100644
index 00000000..0632233d
Binary files /dev/null and b/translated_images/plant1.a876180d8659acb9a51f95b2466b207b95dec201fafa23efcd4137fb62d0acb1.sk.png differ
diff --git a/translated_images/plant1.a876180d8659acb9a51f95b2466b207b95dec201fafa23efcd4137fb62d0acb1.sl.png b/translated_images/plant1.a876180d8659acb9a51f95b2466b207b95dec201fafa23efcd4137fb62d0acb1.sl.png
new file mode 100644
index 00000000..0632233d
Binary files /dev/null and b/translated_images/plant1.a876180d8659acb9a51f95b2466b207b95dec201fafa23efcd4137fb62d0acb1.sl.png differ
diff --git a/translated_images/plant10.2f2c47804ae52dd3550b3f97782a76629d5819bba30e8a8b79933a9ccde606d4.hr.png b/translated_images/plant10.2f2c47804ae52dd3550b3f97782a76629d5819bba30e8a8b79933a9ccde606d4.hr.png
new file mode 100644
index 00000000..209ee5d2
Binary files /dev/null and b/translated_images/plant10.2f2c47804ae52dd3550b3f97782a76629d5819bba30e8a8b79933a9ccde606d4.hr.png differ
diff --git a/translated_images/plant10.2f2c47804ae52dd3550b3f97782a76629d5819bba30e8a8b79933a9ccde606d4.sk.png b/translated_images/plant10.2f2c47804ae52dd3550b3f97782a76629d5819bba30e8a8b79933a9ccde606d4.sk.png
new file mode 100644
index 00000000..209ee5d2
Binary files /dev/null and b/translated_images/plant10.2f2c47804ae52dd3550b3f97782a76629d5819bba30e8a8b79933a9ccde606d4.sk.png differ
diff --git a/translated_images/plant10.2f2c47804ae52dd3550b3f97782a76629d5819bba30e8a8b79933a9ccde606d4.sl.png b/translated_images/plant10.2f2c47804ae52dd3550b3f97782a76629d5819bba30e8a8b79933a9ccde606d4.sl.png
new file mode 100644
index 00000000..209ee5d2
Binary files /dev/null and b/translated_images/plant10.2f2c47804ae52dd3550b3f97782a76629d5819bba30e8a8b79933a9ccde606d4.sl.png differ
diff --git a/translated_images/plant11.0ce0081b0ef17aa1793cc5fe6d7de6f8cf7f8cfb24933c3c457386194fc10e77.hr.png b/translated_images/plant11.0ce0081b0ef17aa1793cc5fe6d7de6f8cf7f8cfb24933c3c457386194fc10e77.hr.png
new file mode 100644
index 00000000..201bec9e
Binary files /dev/null and b/translated_images/plant11.0ce0081b0ef17aa1793cc5fe6d7de6f8cf7f8cfb24933c3c457386194fc10e77.hr.png differ
diff --git a/translated_images/plant11.0ce0081b0ef17aa1793cc5fe6d7de6f8cf7f8cfb24933c3c457386194fc10e77.sk.png b/translated_images/plant11.0ce0081b0ef17aa1793cc5fe6d7de6f8cf7f8cfb24933c3c457386194fc10e77.sk.png
new file mode 100644
index 00000000..201bec9e
Binary files /dev/null and b/translated_images/plant11.0ce0081b0ef17aa1793cc5fe6d7de6f8cf7f8cfb24933c3c457386194fc10e77.sk.png differ
diff --git a/translated_images/plant11.0ce0081b0ef17aa1793cc5fe6d7de6f8cf7f8cfb24933c3c457386194fc10e77.sl.png b/translated_images/plant11.0ce0081b0ef17aa1793cc5fe6d7de6f8cf7f8cfb24933c3c457386194fc10e77.sl.png
new file mode 100644
index 00000000..201bec9e
Binary files /dev/null and b/translated_images/plant11.0ce0081b0ef17aa1793cc5fe6d7de6f8cf7f8cfb24933c3c457386194fc10e77.sl.png differ
diff --git a/translated_images/plant12.6b934c4312a00228719509ac56cd568ec45672bfdcc732bac7f42391035d606c.hr.png b/translated_images/plant12.6b934c4312a00228719509ac56cd568ec45672bfdcc732bac7f42391035d606c.hr.png
new file mode 100644
index 00000000..593e1573
Binary files /dev/null and b/translated_images/plant12.6b934c4312a00228719509ac56cd568ec45672bfdcc732bac7f42391035d606c.hr.png differ
diff --git a/translated_images/plant12.6b934c4312a00228719509ac56cd568ec45672bfdcc732bac7f42391035d606c.sk.png b/translated_images/plant12.6b934c4312a00228719509ac56cd568ec45672bfdcc732bac7f42391035d606c.sk.png
new file mode 100644
index 00000000..593e1573
Binary files /dev/null and b/translated_images/plant12.6b934c4312a00228719509ac56cd568ec45672bfdcc732bac7f42391035d606c.sk.png differ
diff --git a/translated_images/plant12.6b934c4312a00228719509ac56cd568ec45672bfdcc732bac7f42391035d606c.sl.png b/translated_images/plant12.6b934c4312a00228719509ac56cd568ec45672bfdcc732bac7f42391035d606c.sl.png
new file mode 100644
index 00000000..593e1573
Binary files /dev/null and b/translated_images/plant12.6b934c4312a00228719509ac56cd568ec45672bfdcc732bac7f42391035d606c.sl.png differ
diff --git a/translated_images/plant13.37d6ab2e2481421f0611f07685309cc07fe42d63e6abbaa963f972dbff7d176d.hr.png b/translated_images/plant13.37d6ab2e2481421f0611f07685309cc07fe42d63e6abbaa963f972dbff7d176d.hr.png
new file mode 100644
index 00000000..0f69b814
Binary files /dev/null and b/translated_images/plant13.37d6ab2e2481421f0611f07685309cc07fe42d63e6abbaa963f972dbff7d176d.hr.png differ
diff --git a/translated_images/plant13.37d6ab2e2481421f0611f07685309cc07fe42d63e6abbaa963f972dbff7d176d.sk.png b/translated_images/plant13.37d6ab2e2481421f0611f07685309cc07fe42d63e6abbaa963f972dbff7d176d.sk.png
new file mode 100644
index 00000000..0f69b814
Binary files /dev/null and b/translated_images/plant13.37d6ab2e2481421f0611f07685309cc07fe42d63e6abbaa963f972dbff7d176d.sk.png differ
diff --git a/translated_images/plant13.37d6ab2e2481421f0611f07685309cc07fe42d63e6abbaa963f972dbff7d176d.sl.png b/translated_images/plant13.37d6ab2e2481421f0611f07685309cc07fe42d63e6abbaa963f972dbff7d176d.sl.png
new file mode 100644
index 00000000..0f69b814
Binary files /dev/null and b/translated_images/plant13.37d6ab2e2481421f0611f07685309cc07fe42d63e6abbaa963f972dbff7d176d.sl.png differ
diff --git a/translated_images/plant14.908791477a46eb7f40a85155f53861fa5734be5075443b5c19f78e758f64d286.hr.png b/translated_images/plant14.908791477a46eb7f40a85155f53861fa5734be5075443b5c19f78e758f64d286.hr.png
new file mode 100644
index 00000000..221277ef
Binary files /dev/null and b/translated_images/plant14.908791477a46eb7f40a85155f53861fa5734be5075443b5c19f78e758f64d286.hr.png differ
diff --git a/translated_images/plant14.908791477a46eb7f40a85155f53861fa5734be5075443b5c19f78e758f64d286.sk.png b/translated_images/plant14.908791477a46eb7f40a85155f53861fa5734be5075443b5c19f78e758f64d286.sk.png
new file mode 100644
index 00000000..221277ef
Binary files /dev/null and b/translated_images/plant14.908791477a46eb7f40a85155f53861fa5734be5075443b5c19f78e758f64d286.sk.png differ
diff --git a/translated_images/plant14.908791477a46eb7f40a85155f53861fa5734be5075443b5c19f78e758f64d286.sl.png b/translated_images/plant14.908791477a46eb7f40a85155f53861fa5734be5075443b5c19f78e758f64d286.sl.png
new file mode 100644
index 00000000..221277ef
Binary files /dev/null and b/translated_images/plant14.908791477a46eb7f40a85155f53861fa5734be5075443b5c19f78e758f64d286.sl.png differ
diff --git a/translated_images/plant2.9e45efea224115b077fade85ce6871246bf85de20f419c57faed6b78e9ac7fcd.hr.png b/translated_images/plant2.9e45efea224115b077fade85ce6871246bf85de20f419c57faed6b78e9ac7fcd.hr.png
new file mode 100644
index 00000000..331ca68d
Binary files /dev/null and b/translated_images/plant2.9e45efea224115b077fade85ce6871246bf85de20f419c57faed6b78e9ac7fcd.hr.png differ
diff --git a/translated_images/plant2.9e45efea224115b077fade85ce6871246bf85de20f419c57faed6b78e9ac7fcd.sk.png b/translated_images/plant2.9e45efea224115b077fade85ce6871246bf85de20f419c57faed6b78e9ac7fcd.sk.png
new file mode 100644
index 00000000..331ca68d
Binary files /dev/null and b/translated_images/plant2.9e45efea224115b077fade85ce6871246bf85de20f419c57faed6b78e9ac7fcd.sk.png differ
diff --git a/translated_images/plant2.9e45efea224115b077fade85ce6871246bf85de20f419c57faed6b78e9ac7fcd.sl.png b/translated_images/plant2.9e45efea224115b077fade85ce6871246bf85de20f419c57faed6b78e9ac7fcd.sl.png
new file mode 100644
index 00000000..331ca68d
Binary files /dev/null and b/translated_images/plant2.9e45efea224115b077fade85ce6871246bf85de20f419c57faed6b78e9ac7fcd.sl.png differ
diff --git a/translated_images/plant3.06efdd0fa0c4b1152034312e11765b1a8fad48ebc00b72a3e7df657f66f45449.hr.png b/translated_images/plant3.06efdd0fa0c4b1152034312e11765b1a8fad48ebc00b72a3e7df657f66f45449.hr.png
new file mode 100644
index 00000000..d94bd097
Binary files /dev/null and b/translated_images/plant3.06efdd0fa0c4b1152034312e11765b1a8fad48ebc00b72a3e7df657f66f45449.hr.png differ
diff --git a/translated_images/plant3.06efdd0fa0c4b1152034312e11765b1a8fad48ebc00b72a3e7df657f66f45449.sk.png b/translated_images/plant3.06efdd0fa0c4b1152034312e11765b1a8fad48ebc00b72a3e7df657f66f45449.sk.png
new file mode 100644
index 00000000..d94bd097
Binary files /dev/null and b/translated_images/plant3.06efdd0fa0c4b1152034312e11765b1a8fad48ebc00b72a3e7df657f66f45449.sk.png differ
diff --git a/translated_images/plant3.06efdd0fa0c4b1152034312e11765b1a8fad48ebc00b72a3e7df657f66f45449.sl.png b/translated_images/plant3.06efdd0fa0c4b1152034312e11765b1a8fad48ebc00b72a3e7df657f66f45449.sl.png
new file mode 100644
index 00000000..d94bd097
Binary files /dev/null and b/translated_images/plant3.06efdd0fa0c4b1152034312e11765b1a8fad48ebc00b72a3e7df657f66f45449.sl.png differ
diff --git a/translated_images/plant4.3b78072b427727c6e6eb08eefc8451b248577412dd025002cefb707238e8bf46.hr.png b/translated_images/plant4.3b78072b427727c6e6eb08eefc8451b248577412dd025002cefb707238e8bf46.hr.png
new file mode 100644
index 00000000..c60f756c
Binary files /dev/null and b/translated_images/plant4.3b78072b427727c6e6eb08eefc8451b248577412dd025002cefb707238e8bf46.hr.png differ
diff --git a/translated_images/plant4.3b78072b427727c6e6eb08eefc8451b248577412dd025002cefb707238e8bf46.sk.png b/translated_images/plant4.3b78072b427727c6e6eb08eefc8451b248577412dd025002cefb707238e8bf46.sk.png
new file mode 100644
index 00000000..c60f756c
Binary files /dev/null and b/translated_images/plant4.3b78072b427727c6e6eb08eefc8451b248577412dd025002cefb707238e8bf46.sk.png differ
diff --git a/translated_images/plant4.3b78072b427727c6e6eb08eefc8451b248577412dd025002cefb707238e8bf46.sl.png b/translated_images/plant4.3b78072b427727c6e6eb08eefc8451b248577412dd025002cefb707238e8bf46.sl.png
new file mode 100644
index 00000000..c60f756c
Binary files /dev/null and b/translated_images/plant4.3b78072b427727c6e6eb08eefc8451b248577412dd025002cefb707238e8bf46.sl.png differ
diff --git a/translated_images/plant5.8ec58b18ac336fa8ec87ce1d5b433ee58c4918e67fdf0315d5407d80cbd97569.hr.png b/translated_images/plant5.8ec58b18ac336fa8ec87ce1d5b433ee58c4918e67fdf0315d5407d80cbd97569.hr.png
new file mode 100644
index 00000000..f2fe32fb
Binary files /dev/null and b/translated_images/plant5.8ec58b18ac336fa8ec87ce1d5b433ee58c4918e67fdf0315d5407d80cbd97569.hr.png differ
diff --git a/translated_images/plant5.8ec58b18ac336fa8ec87ce1d5b433ee58c4918e67fdf0315d5407d80cbd97569.sk.png b/translated_images/plant5.8ec58b18ac336fa8ec87ce1d5b433ee58c4918e67fdf0315d5407d80cbd97569.sk.png
new file mode 100644
index 00000000..f2fe32fb
Binary files /dev/null and b/translated_images/plant5.8ec58b18ac336fa8ec87ce1d5b433ee58c4918e67fdf0315d5407d80cbd97569.sk.png differ
diff --git a/translated_images/plant5.8ec58b18ac336fa8ec87ce1d5b433ee58c4918e67fdf0315d5407d80cbd97569.sl.png b/translated_images/plant5.8ec58b18ac336fa8ec87ce1d5b433ee58c4918e67fdf0315d5407d80cbd97569.sl.png
new file mode 100644
index 00000000..f2fe32fb
Binary files /dev/null and b/translated_images/plant5.8ec58b18ac336fa8ec87ce1d5b433ee58c4918e67fdf0315d5407d80cbd97569.sl.png differ
diff --git a/translated_images/plant6.ca4ff8372e6676b1ffed650fba21cb2af52c70df969a8203e57fb5bedd81e9f0.hr.png b/translated_images/plant6.ca4ff8372e6676b1ffed650fba21cb2af52c70df969a8203e57fb5bedd81e9f0.hr.png
new file mode 100644
index 00000000..82e0db0d
Binary files /dev/null and b/translated_images/plant6.ca4ff8372e6676b1ffed650fba21cb2af52c70df969a8203e57fb5bedd81e9f0.hr.png differ
diff --git a/translated_images/plant6.ca4ff8372e6676b1ffed650fba21cb2af52c70df969a8203e57fb5bedd81e9f0.sk.png b/translated_images/plant6.ca4ff8372e6676b1ffed650fba21cb2af52c70df969a8203e57fb5bedd81e9f0.sk.png
new file mode 100644
index 00000000..82e0db0d
Binary files /dev/null and b/translated_images/plant6.ca4ff8372e6676b1ffed650fba21cb2af52c70df969a8203e57fb5bedd81e9f0.sk.png differ
diff --git a/translated_images/plant6.ca4ff8372e6676b1ffed650fba21cb2af52c70df969a8203e57fb5bedd81e9f0.sl.png b/translated_images/plant6.ca4ff8372e6676b1ffed650fba21cb2af52c70df969a8203e57fb5bedd81e9f0.sl.png
new file mode 100644
index 00000000..82e0db0d
Binary files /dev/null and b/translated_images/plant6.ca4ff8372e6676b1ffed650fba21cb2af52c70df969a8203e57fb5bedd81e9f0.sl.png differ
diff --git a/translated_images/plant7.194d5a42fcf5a88c5dd4960c68e6f78707acdb4e21bf533a6a65f8d002ab660b.hr.png b/translated_images/plant7.194d5a42fcf5a88c5dd4960c68e6f78707acdb4e21bf533a6a65f8d002ab660b.hr.png
new file mode 100644
index 00000000..07cb7054
Binary files /dev/null and b/translated_images/plant7.194d5a42fcf5a88c5dd4960c68e6f78707acdb4e21bf533a6a65f8d002ab660b.hr.png differ
diff --git a/translated_images/plant7.194d5a42fcf5a88c5dd4960c68e6f78707acdb4e21bf533a6a65f8d002ab660b.sk.png b/translated_images/plant7.194d5a42fcf5a88c5dd4960c68e6f78707acdb4e21bf533a6a65f8d002ab660b.sk.png
new file mode 100644
index 00000000..07cb7054
Binary files /dev/null and b/translated_images/plant7.194d5a42fcf5a88c5dd4960c68e6f78707acdb4e21bf533a6a65f8d002ab660b.sk.png differ
diff --git a/translated_images/plant7.194d5a42fcf5a88c5dd4960c68e6f78707acdb4e21bf533a6a65f8d002ab660b.sl.png b/translated_images/plant7.194d5a42fcf5a88c5dd4960c68e6f78707acdb4e21bf533a6a65f8d002ab660b.sl.png
new file mode 100644
index 00000000..07cb7054
Binary files /dev/null and b/translated_images/plant7.194d5a42fcf5a88c5dd4960c68e6f78707acdb4e21bf533a6a65f8d002ab660b.sl.png differ
diff --git a/translated_images/plant8.7b247809ab0eb492105cac4f42b79ac771ce56e401fdf3df170b3b6ef03c5642.hr.png b/translated_images/plant8.7b247809ab0eb492105cac4f42b79ac771ce56e401fdf3df170b3b6ef03c5642.hr.png
new file mode 100644
index 00000000..a0d261a9
Binary files /dev/null and b/translated_images/plant8.7b247809ab0eb492105cac4f42b79ac771ce56e401fdf3df170b3b6ef03c5642.hr.png differ
diff --git a/translated_images/plant8.7b247809ab0eb492105cac4f42b79ac771ce56e401fdf3df170b3b6ef03c5642.sk.png b/translated_images/plant8.7b247809ab0eb492105cac4f42b79ac771ce56e401fdf3df170b3b6ef03c5642.sk.png
new file mode 100644
index 00000000..a0d261a9
Binary files /dev/null and b/translated_images/plant8.7b247809ab0eb492105cac4f42b79ac771ce56e401fdf3df170b3b6ef03c5642.sk.png differ
diff --git a/translated_images/plant8.7b247809ab0eb492105cac4f42b79ac771ce56e401fdf3df170b3b6ef03c5642.sl.png b/translated_images/plant8.7b247809ab0eb492105cac4f42b79ac771ce56e401fdf3df170b3b6ef03c5642.sl.png
new file mode 100644
index 00000000..a0d261a9
Binary files /dev/null and b/translated_images/plant8.7b247809ab0eb492105cac4f42b79ac771ce56e401fdf3df170b3b6ef03c5642.sl.png differ
diff --git a/translated_images/plant9.8fe614c01ded1b1ec05d1b4d6d527047b1ece5edba299c1c516aaf4b05eb19ed.hr.png b/translated_images/plant9.8fe614c01ded1b1ec05d1b4d6d527047b1ece5edba299c1c516aaf4b05eb19ed.hr.png
new file mode 100644
index 00000000..bc09a050
Binary files /dev/null and b/translated_images/plant9.8fe614c01ded1b1ec05d1b4d6d527047b1ece5edba299c1c516aaf4b05eb19ed.hr.png differ
diff --git a/translated_images/plant9.8fe614c01ded1b1ec05d1b4d6d527047b1ece5edba299c1c516aaf4b05eb19ed.sk.png b/translated_images/plant9.8fe614c01ded1b1ec05d1b4d6d527047b1ece5edba299c1c516aaf4b05eb19ed.sk.png
new file mode 100644
index 00000000..bc09a050
Binary files /dev/null and b/translated_images/plant9.8fe614c01ded1b1ec05d1b4d6d527047b1ece5edba299c1c516aaf4b05eb19ed.sk.png differ
diff --git a/translated_images/plant9.8fe614c01ded1b1ec05d1b4d6d527047b1ece5edba299c1c516aaf4b05eb19ed.sl.png b/translated_images/plant9.8fe614c01ded1b1ec05d1b4d6d527047b1ece5edba299c1c516aaf4b05eb19ed.sl.png
new file mode 100644
index 00000000..bc09a050
Binary files /dev/null and b/translated_images/plant9.8fe614c01ded1b1ec05d1b4d6d527047b1ece5edba299c1c516aaf4b05eb19ed.sl.png differ
diff --git a/translated_images/player.137ee0e47f895ffcdb50ba1b316936715ec8decfd6cee3258332a6c60e5d0d04.hr.png b/translated_images/player.137ee0e47f895ffcdb50ba1b316936715ec8decfd6cee3258332a6c60e5d0d04.hr.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.137ee0e47f895ffcdb50ba1b316936715ec8decfd6cee3258332a6c60e5d0d04.hr.png differ
diff --git a/translated_images/player.137ee0e47f895ffcdb50ba1b316936715ec8decfd6cee3258332a6c60e5d0d04.sk.png b/translated_images/player.137ee0e47f895ffcdb50ba1b316936715ec8decfd6cee3258332a6c60e5d0d04.sk.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.137ee0e47f895ffcdb50ba1b316936715ec8decfd6cee3258332a6c60e5d0d04.sk.png differ
diff --git a/translated_images/player.137ee0e47f895ffcdb50ba1b316936715ec8decfd6cee3258332a6c60e5d0d04.sl.png b/translated_images/player.137ee0e47f895ffcdb50ba1b316936715ec8decfd6cee3258332a6c60e5d0d04.sl.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.137ee0e47f895ffcdb50ba1b316936715ec8decfd6cee3258332a6c60e5d0d04.sl.png differ
diff --git a/translated_images/player.2887422f6982c3cd284b2bafd7551ff073a7b7b8a66edd2f0c2c722f94acfd5c.hr.png b/translated_images/player.2887422f6982c3cd284b2bafd7551ff073a7b7b8a66edd2f0c2c722f94acfd5c.hr.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.2887422f6982c3cd284b2bafd7551ff073a7b7b8a66edd2f0c2c722f94acfd5c.hr.png differ
diff --git a/translated_images/player.2887422f6982c3cd284b2bafd7551ff073a7b7b8a66edd2f0c2c722f94acfd5c.sk.png b/translated_images/player.2887422f6982c3cd284b2bafd7551ff073a7b7b8a66edd2f0c2c722f94acfd5c.sk.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.2887422f6982c3cd284b2bafd7551ff073a7b7b8a66edd2f0c2c722f94acfd5c.sk.png differ
diff --git a/translated_images/player.2887422f6982c3cd284b2bafd7551ff073a7b7b8a66edd2f0c2c722f94acfd5c.sl.png b/translated_images/player.2887422f6982c3cd284b2bafd7551ff073a7b7b8a66edd2f0c2c722f94acfd5c.sl.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.2887422f6982c3cd284b2bafd7551ff073a7b7b8a66edd2f0c2c722f94acfd5c.sl.png differ
diff --git a/translated_images/player.391fed427ede24f513d4b559cff8ff60f00818b31c81268b783a7f89054fda90.hr.png b/translated_images/player.391fed427ede24f513d4b559cff8ff60f00818b31c81268b783a7f89054fda90.hr.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.391fed427ede24f513d4b559cff8ff60f00818b31c81268b783a7f89054fda90.hr.png differ
diff --git a/translated_images/player.391fed427ede24f513d4b559cff8ff60f00818b31c81268b783a7f89054fda90.sk.png b/translated_images/player.391fed427ede24f513d4b559cff8ff60f00818b31c81268b783a7f89054fda90.sk.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.391fed427ede24f513d4b559cff8ff60f00818b31c81268b783a7f89054fda90.sk.png differ
diff --git a/translated_images/player.391fed427ede24f513d4b559cff8ff60f00818b31c81268b783a7f89054fda90.sl.png b/translated_images/player.391fed427ede24f513d4b559cff8ff60f00818b31c81268b783a7f89054fda90.sl.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.391fed427ede24f513d4b559cff8ff60f00818b31c81268b783a7f89054fda90.sl.png differ
diff --git a/translated_images/player.3c4f50182552a73a2b22542c75209c57231da2f51d88d571f198382e2fb3b45b.hr.png b/translated_images/player.3c4f50182552a73a2b22542c75209c57231da2f51d88d571f198382e2fb3b45b.hr.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.3c4f50182552a73a2b22542c75209c57231da2f51d88d571f198382e2fb3b45b.hr.png differ
diff --git a/translated_images/player.3c4f50182552a73a2b22542c75209c57231da2f51d88d571f198382e2fb3b45b.sk.png b/translated_images/player.3c4f50182552a73a2b22542c75209c57231da2f51d88d571f198382e2fb3b45b.sk.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.3c4f50182552a73a2b22542c75209c57231da2f51d88d571f198382e2fb3b45b.sk.png differ
diff --git a/translated_images/player.3c4f50182552a73a2b22542c75209c57231da2f51d88d571f198382e2fb3b45b.sl.png b/translated_images/player.3c4f50182552a73a2b22542c75209c57231da2f51d88d571f198382e2fb3b45b.sl.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.3c4f50182552a73a2b22542c75209c57231da2f51d88d571f198382e2fb3b45b.sl.png differ
diff --git a/translated_images/player.47bc9de0714c723dfe0705c328fb8769de71c87b99d340921c2247674d9d631a.hr.png b/translated_images/player.47bc9de0714c723dfe0705c328fb8769de71c87b99d340921c2247674d9d631a.hr.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.47bc9de0714c723dfe0705c328fb8769de71c87b99d340921c2247674d9d631a.hr.png differ
diff --git a/translated_images/player.47bc9de0714c723dfe0705c328fb8769de71c87b99d340921c2247674d9d631a.sk.png b/translated_images/player.47bc9de0714c723dfe0705c328fb8769de71c87b99d340921c2247674d9d631a.sk.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.47bc9de0714c723dfe0705c328fb8769de71c87b99d340921c2247674d9d631a.sk.png differ
diff --git a/translated_images/player.47bc9de0714c723dfe0705c328fb8769de71c87b99d340921c2247674d9d631a.sl.png b/translated_images/player.47bc9de0714c723dfe0705c328fb8769de71c87b99d340921c2247674d9d631a.sl.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.47bc9de0714c723dfe0705c328fb8769de71c87b99d340921c2247674d9d631a.sl.png differ
diff --git a/translated_images/player.57b3107c03012695cedb271fdda06900e2d0d9580ae5fab5c563fdb029ba8584.hr.png b/translated_images/player.57b3107c03012695cedb271fdda06900e2d0d9580ae5fab5c563fdb029ba8584.hr.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.57b3107c03012695cedb271fdda06900e2d0d9580ae5fab5c563fdb029ba8584.hr.png differ
diff --git a/translated_images/player.57b3107c03012695cedb271fdda06900e2d0d9580ae5fab5c563fdb029ba8584.sk.png b/translated_images/player.57b3107c03012695cedb271fdda06900e2d0d9580ae5fab5c563fdb029ba8584.sk.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.57b3107c03012695cedb271fdda06900e2d0d9580ae5fab5c563fdb029ba8584.sk.png differ
diff --git a/translated_images/player.57b3107c03012695cedb271fdda06900e2d0d9580ae5fab5c563fdb029ba8584.sl.png b/translated_images/player.57b3107c03012695cedb271fdda06900e2d0d9580ae5fab5c563fdb029ba8584.sl.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.57b3107c03012695cedb271fdda06900e2d0d9580ae5fab5c563fdb029ba8584.sl.png differ
diff --git a/translated_images/player.606f85953e5e564e7711d22697724750fdcc661d5f7c5295e2da7e46905fd322.hr.png b/translated_images/player.606f85953e5e564e7711d22697724750fdcc661d5f7c5295e2da7e46905fd322.hr.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.606f85953e5e564e7711d22697724750fdcc661d5f7c5295e2da7e46905fd322.hr.png differ
diff --git a/translated_images/player.606f85953e5e564e7711d22697724750fdcc661d5f7c5295e2da7e46905fd322.sk.png b/translated_images/player.606f85953e5e564e7711d22697724750fdcc661d5f7c5295e2da7e46905fd322.sk.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.606f85953e5e564e7711d22697724750fdcc661d5f7c5295e2da7e46905fd322.sk.png differ
diff --git a/translated_images/player.606f85953e5e564e7711d22697724750fdcc661d5f7c5295e2da7e46905fd322.sl.png b/translated_images/player.606f85953e5e564e7711d22697724750fdcc661d5f7c5295e2da7e46905fd322.sl.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.606f85953e5e564e7711d22697724750fdcc661d5f7c5295e2da7e46905fd322.sl.png differ
diff --git a/translated_images/player.680ea4c619b54fe160261abdfe2e68139dedacb8d884b6cb405b9a6ab162940d.hr.png b/translated_images/player.680ea4c619b54fe160261abdfe2e68139dedacb8d884b6cb405b9a6ab162940d.hr.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.680ea4c619b54fe160261abdfe2e68139dedacb8d884b6cb405b9a6ab162940d.hr.png differ
diff --git a/translated_images/player.680ea4c619b54fe160261abdfe2e68139dedacb8d884b6cb405b9a6ab162940d.sk.png b/translated_images/player.680ea4c619b54fe160261abdfe2e68139dedacb8d884b6cb405b9a6ab162940d.sk.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.680ea4c619b54fe160261abdfe2e68139dedacb8d884b6cb405b9a6ab162940d.sk.png differ
diff --git a/translated_images/player.680ea4c619b54fe160261abdfe2e68139dedacb8d884b6cb405b9a6ab162940d.sl.png b/translated_images/player.680ea4c619b54fe160261abdfe2e68139dedacb8d884b6cb405b9a6ab162940d.sl.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.680ea4c619b54fe160261abdfe2e68139dedacb8d884b6cb405b9a6ab162940d.sl.png differ
diff --git a/translated_images/player.bfe14f110bddf56d10a1989066d170af2ce6b1412626c37a7e184963e54c7ef4.hr.png b/translated_images/player.bfe14f110bddf56d10a1989066d170af2ce6b1412626c37a7e184963e54c7ef4.hr.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.bfe14f110bddf56d10a1989066d170af2ce6b1412626c37a7e184963e54c7ef4.hr.png differ
diff --git a/translated_images/player.bfe14f110bddf56d10a1989066d170af2ce6b1412626c37a7e184963e54c7ef4.sk.png b/translated_images/player.bfe14f110bddf56d10a1989066d170af2ce6b1412626c37a7e184963e54c7ef4.sk.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.bfe14f110bddf56d10a1989066d170af2ce6b1412626c37a7e184963e54c7ef4.sk.png differ
diff --git a/translated_images/player.bfe14f110bddf56d10a1989066d170af2ce6b1412626c37a7e184963e54c7ef4.sl.png b/translated_images/player.bfe14f110bddf56d10a1989066d170af2ce6b1412626c37a7e184963e54c7ef4.sl.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.bfe14f110bddf56d10a1989066d170af2ce6b1412626c37a7e184963e54c7ef4.sl.png differ
diff --git a/translated_images/player.c99c25d54a615ca088fc55515a6ee76c766fba0e31b167816062f3ab3d22fbcd.hr.png b/translated_images/player.c99c25d54a615ca088fc55515a6ee76c766fba0e31b167816062f3ab3d22fbcd.hr.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.c99c25d54a615ca088fc55515a6ee76c766fba0e31b167816062f3ab3d22fbcd.hr.png differ
diff --git a/translated_images/player.c99c25d54a615ca088fc55515a6ee76c766fba0e31b167816062f3ab3d22fbcd.sk.png b/translated_images/player.c99c25d54a615ca088fc55515a6ee76c766fba0e31b167816062f3ab3d22fbcd.sk.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.c99c25d54a615ca088fc55515a6ee76c766fba0e31b167816062f3ab3d22fbcd.sk.png differ
diff --git a/translated_images/player.c99c25d54a615ca088fc55515a6ee76c766fba0e31b167816062f3ab3d22fbcd.sl.png b/translated_images/player.c99c25d54a615ca088fc55515a6ee76c766fba0e31b167816062f3ab3d22fbcd.sl.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.c99c25d54a615ca088fc55515a6ee76c766fba0e31b167816062f3ab3d22fbcd.sl.png differ
diff --git a/translated_images/player.dd24c1afa8c71e9b82b2958946d4bad13308681392d4b5ddcc61a0e818ef8088.hr.png b/translated_images/player.dd24c1afa8c71e9b82b2958946d4bad13308681392d4b5ddcc61a0e818ef8088.hr.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.dd24c1afa8c71e9b82b2958946d4bad13308681392d4b5ddcc61a0e818ef8088.hr.png differ
diff --git a/translated_images/player.dd24c1afa8c71e9b82b2958946d4bad13308681392d4b5ddcc61a0e818ef8088.sk.png b/translated_images/player.dd24c1afa8c71e9b82b2958946d4bad13308681392d4b5ddcc61a0e818ef8088.sk.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.dd24c1afa8c71e9b82b2958946d4bad13308681392d4b5ddcc61a0e818ef8088.sk.png differ
diff --git a/translated_images/player.dd24c1afa8c71e9b82b2958946d4bad13308681392d4b5ddcc61a0e818ef8088.sl.png b/translated_images/player.dd24c1afa8c71e9b82b2958946d4bad13308681392d4b5ddcc61a0e818ef8088.sl.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.dd24c1afa8c71e9b82b2958946d4bad13308681392d4b5ddcc61a0e818ef8088.sl.png differ
diff --git a/translated_images/playerDamaged.181703f652fd5176d25dbc286cdab2b79c9d7470dfd95af344dbb024780b6176.hr.png b/translated_images/playerDamaged.181703f652fd5176d25dbc286cdab2b79c9d7470dfd95af344dbb024780b6176.hr.png
new file mode 100644
index 00000000..91d73b26
Binary files /dev/null and b/translated_images/playerDamaged.181703f652fd5176d25dbc286cdab2b79c9d7470dfd95af344dbb024780b6176.hr.png differ
diff --git a/translated_images/playerDamaged.181703f652fd5176d25dbc286cdab2b79c9d7470dfd95af344dbb024780b6176.sk.png b/translated_images/playerDamaged.181703f652fd5176d25dbc286cdab2b79c9d7470dfd95af344dbb024780b6176.sk.png
new file mode 100644
index 00000000..91d73b26
Binary files /dev/null and b/translated_images/playerDamaged.181703f652fd5176d25dbc286cdab2b79c9d7470dfd95af344dbb024780b6176.sk.png differ
diff --git a/translated_images/playerDamaged.181703f652fd5176d25dbc286cdab2b79c9d7470dfd95af344dbb024780b6176.sl.png b/translated_images/playerDamaged.181703f652fd5176d25dbc286cdab2b79c9d7470dfd95af344dbb024780b6176.sl.png
new file mode 100644
index 00000000..91d73b26
Binary files /dev/null and b/translated_images/playerDamaged.181703f652fd5176d25dbc286cdab2b79c9d7470dfd95af344dbb024780b6176.sl.png differ
diff --git a/translated_images/playerLeft.0f928412e66ba5d9455ccc99ef113088d2510843b23f8dbcd3106425b221979f.hr.png b/translated_images/playerLeft.0f928412e66ba5d9455ccc99ef113088d2510843b23f8dbcd3106425b221979f.hr.png
new file mode 100644
index 00000000..941cd3ac
Binary files /dev/null and b/translated_images/playerLeft.0f928412e66ba5d9455ccc99ef113088d2510843b23f8dbcd3106425b221979f.hr.png differ
diff --git a/translated_images/playerLeft.0f928412e66ba5d9455ccc99ef113088d2510843b23f8dbcd3106425b221979f.sk.png b/translated_images/playerLeft.0f928412e66ba5d9455ccc99ef113088d2510843b23f8dbcd3106425b221979f.sk.png
new file mode 100644
index 00000000..941cd3ac
Binary files /dev/null and b/translated_images/playerLeft.0f928412e66ba5d9455ccc99ef113088d2510843b23f8dbcd3106425b221979f.sk.png differ
diff --git a/translated_images/playerLeft.0f928412e66ba5d9455ccc99ef113088d2510843b23f8dbcd3106425b221979f.sl.png b/translated_images/playerLeft.0f928412e66ba5d9455ccc99ef113088d2510843b23f8dbcd3106425b221979f.sl.png
new file mode 100644
index 00000000..941cd3ac
Binary files /dev/null and b/translated_images/playerLeft.0f928412e66ba5d9455ccc99ef113088d2510843b23f8dbcd3106425b221979f.sl.png differ
diff --git a/translated_images/playerRight.e4825f489e29f73719f8e3197ba0e5742e2ffbc178641009b57fe254c6abdc38.hr.png b/translated_images/playerRight.e4825f489e29f73719f8e3197ba0e5742e2ffbc178641009b57fe254c6abdc38.hr.png
new file mode 100644
index 00000000..4e69314c
Binary files /dev/null and b/translated_images/playerRight.e4825f489e29f73719f8e3197ba0e5742e2ffbc178641009b57fe254c6abdc38.hr.png differ
diff --git a/translated_images/playerRight.e4825f489e29f73719f8e3197ba0e5742e2ffbc178641009b57fe254c6abdc38.sk.png b/translated_images/playerRight.e4825f489e29f73719f8e3197ba0e5742e2ffbc178641009b57fe254c6abdc38.sk.png
new file mode 100644
index 00000000..4e69314c
Binary files /dev/null and b/translated_images/playerRight.e4825f489e29f73719f8e3197ba0e5742e2ffbc178641009b57fe254c6abdc38.sk.png differ
diff --git a/translated_images/playerRight.e4825f489e29f73719f8e3197ba0e5742e2ffbc178641009b57fe254c6abdc38.sl.png b/translated_images/playerRight.e4825f489e29f73719f8e3197ba0e5742e2ffbc178641009b57fe254c6abdc38.sl.png
new file mode 100644
index 00000000..4e69314c
Binary files /dev/null and b/translated_images/playerRight.e4825f489e29f73719f8e3197ba0e5742e2ffbc178641009b57fe254c6abdc38.sl.png differ
diff --git a/translated_images/preview.9215f0a010074476f8ab66e6becf3c1b594a30cca0a28b88fb4f3f4821594dc0.hr.jpg b/translated_images/preview.9215f0a010074476f8ab66e6becf3c1b594a30cca0a28b88fb4f3f4821594dc0.hr.jpg
new file mode 100644
index 00000000..dfbe25f0
Binary files /dev/null and b/translated_images/preview.9215f0a010074476f8ab66e6becf3c1b594a30cca0a28b88fb4f3f4821594dc0.hr.jpg differ
diff --git a/translated_images/preview.9215f0a010074476f8ab66e6becf3c1b594a30cca0a28b88fb4f3f4821594dc0.sk.jpg b/translated_images/preview.9215f0a010074476f8ab66e6becf3c1b594a30cca0a28b88fb4f3f4821594dc0.sk.jpg
new file mode 100644
index 00000000..a0c1894f
Binary files /dev/null and b/translated_images/preview.9215f0a010074476f8ab66e6becf3c1b594a30cca0a28b88fb4f3f4821594dc0.sk.jpg differ
diff --git a/translated_images/preview.9215f0a010074476f8ab66e6becf3c1b594a30cca0a28b88fb4f3f4821594dc0.sl.jpg b/translated_images/preview.9215f0a010074476f8ab66e6becf3c1b594a30cca0a28b88fb4f3f4821594dc0.sl.jpg
new file mode 100644
index 00000000..c50e711c
Binary files /dev/null and b/translated_images/preview.9215f0a010074476f8ab66e6becf3c1b594a30cca0a28b88fb4f3f4821594dc0.sl.jpg differ
diff --git a/translated_images/profiler.5a4a62479c5df01cfec9aab74173dba13f91d2c968e1a1ae434c26165792df15.hr.png b/translated_images/profiler.5a4a62479c5df01cfec9aab74173dba13f91d2c968e1a1ae434c26165792df15.hr.png
new file mode 100644
index 00000000..4aa56adf
Binary files /dev/null and b/translated_images/profiler.5a4a62479c5df01cfec9aab74173dba13f91d2c968e1a1ae434c26165792df15.hr.png differ
diff --git a/translated_images/profiler.5a4a62479c5df01cfec9aab74173dba13f91d2c968e1a1ae434c26165792df15.sk.png b/translated_images/profiler.5a4a62479c5df01cfec9aab74173dba13f91d2c968e1a1ae434c26165792df15.sk.png
new file mode 100644
index 00000000..4fab5f77
Binary files /dev/null and b/translated_images/profiler.5a4a62479c5df01cfec9aab74173dba13f91d2c968e1a1ae434c26165792df15.sk.png differ
diff --git a/translated_images/profiler.5a4a62479c5df01cfec9aab74173dba13f91d2c968e1a1ae434c26165792df15.sl.png b/translated_images/profiler.5a4a62479c5df01cfec9aab74173dba13f91d2c968e1a1ae434c26165792df15.sl.png
new file mode 100644
index 00000000..00e5223c
Binary files /dev/null and b/translated_images/profiler.5a4a62479c5df01cfec9aab74173dba13f91d2c968e1a1ae434c26165792df15.sl.png differ
diff --git a/translated_images/project-on-vscode.dev.e79815a9a95ee7feac72ebe5c941c91279716be37c575dbdbf2f43bea2c7d8b6.hr.png b/translated_images/project-on-vscode.dev.e79815a9a95ee7feac72ebe5c941c91279716be37c575dbdbf2f43bea2c7d8b6.hr.png
new file mode 100644
index 00000000..454def95
Binary files /dev/null and b/translated_images/project-on-vscode.dev.e79815a9a95ee7feac72ebe5c941c91279716be37c575dbdbf2f43bea2c7d8b6.hr.png differ
diff --git a/translated_images/project-on-vscode.dev.e79815a9a95ee7feac72ebe5c941c91279716be37c575dbdbf2f43bea2c7d8b6.sk.png b/translated_images/project-on-vscode.dev.e79815a9a95ee7feac72ebe5c941c91279716be37c575dbdbf2f43bea2c7d8b6.sk.png
new file mode 100644
index 00000000..063f766f
Binary files /dev/null and b/translated_images/project-on-vscode.dev.e79815a9a95ee7feac72ebe5c941c91279716be37c575dbdbf2f43bea2c7d8b6.sk.png differ
diff --git a/translated_images/project-on-vscode.dev.e79815a9a95ee7feac72ebe5c941c91279716be37c575dbdbf2f43bea2c7d8b6.sl.png b/translated_images/project-on-vscode.dev.e79815a9a95ee7feac72ebe5c941c91279716be37c575dbdbf2f43bea2c7d8b6.sl.png
new file mode 100644
index 00000000..ba3196fd
Binary files /dev/null and b/translated_images/project-on-vscode.dev.e79815a9a95ee7feac72ebe5c941c91279716be37c575dbdbf2f43bea2c7d8b6.sl.png differ
diff --git a/translated_images/result.96ef01f607bf856aa9789078633e94a4f7664d912f235efce2657299becca483.hr.png b/translated_images/result.96ef01f607bf856aa9789078633e94a4f7664d912f235efce2657299becca483.hr.png
new file mode 100644
index 00000000..0d27f0d1
Binary files /dev/null and b/translated_images/result.96ef01f607bf856aa9789078633e94a4f7664d912f235efce2657299becca483.hr.png differ
diff --git a/translated_images/result.96ef01f607bf856aa9789078633e94a4f7664d912f235efce2657299becca483.sk.png b/translated_images/result.96ef01f607bf856aa9789078633e94a4f7664d912f235efce2657299becca483.sk.png
new file mode 100644
index 00000000..1d5d6879
Binary files /dev/null and b/translated_images/result.96ef01f607bf856aa9789078633e94a4f7664d912f235efce2657299becca483.sk.png differ
diff --git a/translated_images/result.96ef01f607bf856aa9789078633e94a4f7664d912f235efce2657299becca483.sl.png b/translated_images/result.96ef01f607bf856aa9789078633e94a4f7664d912f235efce2657299becca483.sl.png
new file mode 100644
index 00000000..79d75808
Binary files /dev/null and b/translated_images/result.96ef01f607bf856aa9789078633e94a4f7664d912f235efce2657299becca483.sl.png differ
diff --git a/translated_images/screen1.baccbba0f1f93364672eb250d2fbd21574bb1caf79a2155022dc098a741cbdfe.hr.png b/translated_images/screen1.baccbba0f1f93364672eb250d2fbd21574bb1caf79a2155022dc098a741cbdfe.hr.png
new file mode 100644
index 00000000..cfa9a8a3
Binary files /dev/null and b/translated_images/screen1.baccbba0f1f93364672eb250d2fbd21574bb1caf79a2155022dc098a741cbdfe.hr.png differ
diff --git a/translated_images/screen1.baccbba0f1f93364672eb250d2fbd21574bb1caf79a2155022dc098a741cbdfe.sk.png b/translated_images/screen1.baccbba0f1f93364672eb250d2fbd21574bb1caf79a2155022dc098a741cbdfe.sk.png
new file mode 100644
index 00000000..6f603fe6
Binary files /dev/null and b/translated_images/screen1.baccbba0f1f93364672eb250d2fbd21574bb1caf79a2155022dc098a741cbdfe.sk.png differ
diff --git a/translated_images/screen1.baccbba0f1f93364672eb250d2fbd21574bb1caf79a2155022dc098a741cbdfe.sl.png b/translated_images/screen1.baccbba0f1f93364672eb250d2fbd21574bb1caf79a2155022dc098a741cbdfe.sl.png
new file mode 100644
index 00000000..181be0ac
Binary files /dev/null and b/translated_images/screen1.baccbba0f1f93364672eb250d2fbd21574bb1caf79a2155022dc098a741cbdfe.sl.png differ
diff --git a/translated_images/screen2.123c82a831a1d14ab2061994be2fa5de9cec1ce651047217d326d4773a6348e4.hr.png b/translated_images/screen2.123c82a831a1d14ab2061994be2fa5de9cec1ce651047217d326d4773a6348e4.hr.png
new file mode 100644
index 00000000..b95fb635
Binary files /dev/null and b/translated_images/screen2.123c82a831a1d14ab2061994be2fa5de9cec1ce651047217d326d4773a6348e4.hr.png differ
diff --git a/translated_images/screen2.123c82a831a1d14ab2061994be2fa5de9cec1ce651047217d326d4773a6348e4.sk.png b/translated_images/screen2.123c82a831a1d14ab2061994be2fa5de9cec1ce651047217d326d4773a6348e4.sk.png
new file mode 100644
index 00000000..dc2013da
Binary files /dev/null and b/translated_images/screen2.123c82a831a1d14ab2061994be2fa5de9cec1ce651047217d326d4773a6348e4.sk.png differ
diff --git a/translated_images/screen2.123c82a831a1d14ab2061994be2fa5de9cec1ce651047217d326d4773a6348e4.sl.png b/translated_images/screen2.123c82a831a1d14ab2061994be2fa5de9cec1ce651047217d326d4773a6348e4.sl.png
new file mode 100644
index 00000000..0d089c4e
Binary files /dev/null and b/translated_images/screen2.123c82a831a1d14ab2061994be2fa5de9cec1ce651047217d326d4773a6348e4.sl.png differ
diff --git a/translated_images/screenshot.e7a5ad659e3645682a7d44bd944af8147012dc403b4965712a052214b42e77c1.hr.png b/translated_images/screenshot.e7a5ad659e3645682a7d44bd944af8147012dc403b4965712a052214b42e77c1.hr.png
new file mode 100644
index 00000000..0363e782
Binary files /dev/null and b/translated_images/screenshot.e7a5ad659e3645682a7d44bd944af8147012dc403b4965712a052214b42e77c1.hr.png differ
diff --git a/translated_images/screenshot.e7a5ad659e3645682a7d44bd944af8147012dc403b4965712a052214b42e77c1.sk.png b/translated_images/screenshot.e7a5ad659e3645682a7d44bd944af8147012dc403b4965712a052214b42e77c1.sk.png
new file mode 100644
index 00000000..28870fb6
Binary files /dev/null and b/translated_images/screenshot.e7a5ad659e3645682a7d44bd944af8147012dc403b4965712a052214b42e77c1.sk.png differ
diff --git a/translated_images/screenshot.e7a5ad659e3645682a7d44bd944af8147012dc403b4965712a052214b42e77c1.sl.png b/translated_images/screenshot.e7a5ad659e3645682a7d44bd944af8147012dc403b4965712a052214b42e77c1.sl.png
new file mode 100644
index 00000000..d8079abb
Binary files /dev/null and b/translated_images/screenshot.e7a5ad659e3645682a7d44bd944af8147012dc403b4965712a052214b42e77c1.sl.png differ
diff --git a/translated_images/screenshot_gray.0c796099a1f9f25e40aa55ead81f268434c00af30d7092490759945eda63067d.hr.png b/translated_images/screenshot_gray.0c796099a1f9f25e40aa55ead81f268434c00af30d7092490759945eda63067d.hr.png
new file mode 100644
index 00000000..52cbfad0
Binary files /dev/null and b/translated_images/screenshot_gray.0c796099a1f9f25e40aa55ead81f268434c00af30d7092490759945eda63067d.hr.png differ
diff --git a/translated_images/screenshot_gray.0c796099a1f9f25e40aa55ead81f268434c00af30d7092490759945eda63067d.sk.png b/translated_images/screenshot_gray.0c796099a1f9f25e40aa55ead81f268434c00af30d7092490759945eda63067d.sk.png
new file mode 100644
index 00000000..704a8221
Binary files /dev/null and b/translated_images/screenshot_gray.0c796099a1f9f25e40aa55ead81f268434c00af30d7092490759945eda63067d.sk.png differ
diff --git a/translated_images/screenshot_gray.0c796099a1f9f25e40aa55ead81f268434c00af30d7092490759945eda63067d.sl.png b/translated_images/screenshot_gray.0c796099a1f9f25e40aa55ead81f268434c00af30d7092490759945eda63067d.sl.png
new file mode 100644
index 00000000..52cbfad0
Binary files /dev/null and b/translated_images/screenshot_gray.0c796099a1f9f25e40aa55ead81f268434c00af30d7092490759945eda63067d.sl.png differ
diff --git a/translated_images/shield.1b9412b7ca6610ab21f8836483f4e1ec7835b7fe61617f2cead3ff3317ddd56f.hr.png b/translated_images/shield.1b9412b7ca6610ab21f8836483f4e1ec7835b7fe61617f2cead3ff3317ddd56f.hr.png
new file mode 100644
index 00000000..b962a2f1
Binary files /dev/null and b/translated_images/shield.1b9412b7ca6610ab21f8836483f4e1ec7835b7fe61617f2cead3ff3317ddd56f.hr.png differ
diff --git a/translated_images/shield.1b9412b7ca6610ab21f8836483f4e1ec7835b7fe61617f2cead3ff3317ddd56f.sk.png b/translated_images/shield.1b9412b7ca6610ab21f8836483f4e1ec7835b7fe61617f2cead3ff3317ddd56f.sk.png
new file mode 100644
index 00000000..b962a2f1
Binary files /dev/null and b/translated_images/shield.1b9412b7ca6610ab21f8836483f4e1ec7835b7fe61617f2cead3ff3317ddd56f.sk.png differ
diff --git a/translated_images/shield.1b9412b7ca6610ab21f8836483f4e1ec7835b7fe61617f2cead3ff3317ddd56f.sl.png b/translated_images/shield.1b9412b7ca6610ab21f8836483f4e1ec7835b7fe61617f2cead3ff3317ddd56f.sl.png
new file mode 100644
index 00000000..b962a2f1
Binary files /dev/null and b/translated_images/shield.1b9412b7ca6610ab21f8836483f4e1ec7835b7fe61617f2cead3ff3317ddd56f.sl.png differ
diff --git a/translated_images/snapshot.97750180ebcad73794a3594b36925eb5c8dbaac9e03fec7f9b974188c9ac63c7.hr.png b/translated_images/snapshot.97750180ebcad73794a3594b36925eb5c8dbaac9e03fec7f9b974188c9ac63c7.hr.png
new file mode 100644
index 00000000..eb1ce618
Binary files /dev/null and b/translated_images/snapshot.97750180ebcad73794a3594b36925eb5c8dbaac9e03fec7f9b974188c9ac63c7.hr.png differ
diff --git a/translated_images/snapshot.97750180ebcad73794a3594b36925eb5c8dbaac9e03fec7f9b974188c9ac63c7.sk.png b/translated_images/snapshot.97750180ebcad73794a3594b36925eb5c8dbaac9e03fec7f9b974188c9ac63c7.sk.png
new file mode 100644
index 00000000..36dac915
Binary files /dev/null and b/translated_images/snapshot.97750180ebcad73794a3594b36925eb5c8dbaac9e03fec7f9b974188c9ac63c7.sk.png differ
diff --git a/translated_images/snapshot.97750180ebcad73794a3594b36925eb5c8dbaac9e03fec7f9b974188c9ac63c7.sl.png b/translated_images/snapshot.97750180ebcad73794a3594b36925eb5c8dbaac9e03fec7f9b974188c9ac63c7.sl.png
new file mode 100644
index 00000000..759ae650
Binary files /dev/null and b/translated_images/snapshot.97750180ebcad73794a3594b36925eb5c8dbaac9e03fec7f9b974188c9ac63c7.sl.png differ
diff --git a/translated_images/spa.268ec73b41f992c2a21ef9294235c6ae597b3c37e2c03f0494c2d8857325cc57.hr.png b/translated_images/spa.268ec73b41f992c2a21ef9294235c6ae597b3c37e2c03f0494c2d8857325cc57.hr.png
new file mode 100644
index 00000000..2f9a9871
Binary files /dev/null and b/translated_images/spa.268ec73b41f992c2a21ef9294235c6ae597b3c37e2c03f0494c2d8857325cc57.hr.png differ
diff --git a/translated_images/spa.268ec73b41f992c2a21ef9294235c6ae597b3c37e2c03f0494c2d8857325cc57.sk.png b/translated_images/spa.268ec73b41f992c2a21ef9294235c6ae597b3c37e2c03f0494c2d8857325cc57.sk.png
new file mode 100644
index 00000000..f37b6795
Binary files /dev/null and b/translated_images/spa.268ec73b41f992c2a21ef9294235c6ae597b3c37e2c03f0494c2d8857325cc57.sk.png differ
diff --git a/translated_images/spa.268ec73b41f992c2a21ef9294235c6ae597b3c37e2c03f0494c2d8857325cc57.sl.png b/translated_images/spa.268ec73b41f992c2a21ef9294235c6ae597b3c37e2c03f0494c2d8857325cc57.sl.png
new file mode 100644
index 00000000..dc44acdd
Binary files /dev/null and b/translated_images/spa.268ec73b41f992c2a21ef9294235c6ae597b3c37e2c03f0494c2d8857325cc57.sl.png differ
diff --git a/translated_images/speedLine.5bcabb93f48b5ae1fe081a6b8832ed314636560b7bb228889bfbeb75a0322490.hr.png b/translated_images/speedLine.5bcabb93f48b5ae1fe081a6b8832ed314636560b7bb228889bfbeb75a0322490.hr.png
new file mode 100644
index 00000000..03018e7f
Binary files /dev/null and b/translated_images/speedLine.5bcabb93f48b5ae1fe081a6b8832ed314636560b7bb228889bfbeb75a0322490.hr.png differ
diff --git a/translated_images/speedLine.5bcabb93f48b5ae1fe081a6b8832ed314636560b7bb228889bfbeb75a0322490.sk.png b/translated_images/speedLine.5bcabb93f48b5ae1fe081a6b8832ed314636560b7bb228889bfbeb75a0322490.sk.png
new file mode 100644
index 00000000..03018e7f
Binary files /dev/null and b/translated_images/speedLine.5bcabb93f48b5ae1fe081a6b8832ed314636560b7bb228889bfbeb75a0322490.sk.png differ
diff --git a/translated_images/speedLine.5bcabb93f48b5ae1fe081a6b8832ed314636560b7bb228889bfbeb75a0322490.sl.png b/translated_images/speedLine.5bcabb93f48b5ae1fe081a6b8832ed314636560b7bb228889bfbeb75a0322490.sl.png
new file mode 100644
index 00000000..03018e7f
Binary files /dev/null and b/translated_images/speedLine.5bcabb93f48b5ae1fe081a6b8832ed314636560b7bb228889bfbeb75a0322490.sl.png differ
diff --git a/translated_images/spritesheet.bec82852290b14ee8f814b4173f8d823658151a2402c2be8f15b17159290d1ab.hr.png b/translated_images/spritesheet.bec82852290b14ee8f814b4173f8d823658151a2402c2be8f15b17159290d1ab.hr.png
new file mode 100644
index 00000000..c7f6f709
Binary files /dev/null and b/translated_images/spritesheet.bec82852290b14ee8f814b4173f8d823658151a2402c2be8f15b17159290d1ab.hr.png differ
diff --git a/translated_images/spritesheet.bec82852290b14ee8f814b4173f8d823658151a2402c2be8f15b17159290d1ab.sk.png b/translated_images/spritesheet.bec82852290b14ee8f814b4173f8d823658151a2402c2be8f15b17159290d1ab.sk.png
new file mode 100644
index 00000000..c7f6f709
Binary files /dev/null and b/translated_images/spritesheet.bec82852290b14ee8f814b4173f8d823658151a2402c2be8f15b17159290d1ab.sk.png differ
diff --git a/translated_images/spritesheet.bec82852290b14ee8f814b4173f8d823658151a2402c2be8f15b17159290d1ab.sl.png b/translated_images/spritesheet.bec82852290b14ee8f814b4173f8d823658151a2402c2be8f15b17159290d1ab.sl.png
new file mode 100644
index 00000000..c7f6f709
Binary files /dev/null and b/translated_images/spritesheet.bec82852290b14ee8f814b4173f8d823658151a2402c2be8f15b17159290d1ab.sl.png differ
diff --git a/translated_images/starBackground.a897b8acb1b0587dbb2cdbf8beeaa388269510bb3ac3b4165f0141dc893045a2.hr.png b/translated_images/starBackground.a897b8acb1b0587dbb2cdbf8beeaa388269510bb3ac3b4165f0141dc893045a2.hr.png
new file mode 100644
index 00000000..7344ae88
Binary files /dev/null and b/translated_images/starBackground.a897b8acb1b0587dbb2cdbf8beeaa388269510bb3ac3b4165f0141dc893045a2.hr.png differ
diff --git a/translated_images/starBackground.a897b8acb1b0587dbb2cdbf8beeaa388269510bb3ac3b4165f0141dc893045a2.sk.png b/translated_images/starBackground.a897b8acb1b0587dbb2cdbf8beeaa388269510bb3ac3b4165f0141dc893045a2.sk.png
new file mode 100644
index 00000000..7344ae88
Binary files /dev/null and b/translated_images/starBackground.a897b8acb1b0587dbb2cdbf8beeaa388269510bb3ac3b4165f0141dc893045a2.sk.png differ
diff --git a/translated_images/starBackground.a897b8acb1b0587dbb2cdbf8beeaa388269510bb3ac3b4165f0141dc893045a2.sl.png b/translated_images/starBackground.a897b8acb1b0587dbb2cdbf8beeaa388269510bb3ac3b4165f0141dc893045a2.sl.png
new file mode 100644
index 00000000..7344ae88
Binary files /dev/null and b/translated_images/starBackground.a897b8acb1b0587dbb2cdbf8beeaa388269510bb3ac3b4165f0141dc893045a2.sl.png differ
diff --git a/translated_images/starBig.72e9c6d0d18f363d485fd26a32c346d269d465f6a87bc0ca5e94ecd34fcd7362.hr.png b/translated_images/starBig.72e9c6d0d18f363d485fd26a32c346d269d465f6a87bc0ca5e94ecd34fcd7362.hr.png
new file mode 100644
index 00000000..e38c77b7
Binary files /dev/null and b/translated_images/starBig.72e9c6d0d18f363d485fd26a32c346d269d465f6a87bc0ca5e94ecd34fcd7362.hr.png differ
diff --git a/translated_images/starBig.72e9c6d0d18f363d485fd26a32c346d269d465f6a87bc0ca5e94ecd34fcd7362.sk.png b/translated_images/starBig.72e9c6d0d18f363d485fd26a32c346d269d465f6a87bc0ca5e94ecd34fcd7362.sk.png
new file mode 100644
index 00000000..e38c77b7
Binary files /dev/null and b/translated_images/starBig.72e9c6d0d18f363d485fd26a32c346d269d465f6a87bc0ca5e94ecd34fcd7362.sk.png differ
diff --git a/translated_images/starBig.72e9c6d0d18f363d485fd26a32c346d269d465f6a87bc0ca5e94ecd34fcd7362.sl.png b/translated_images/starBig.72e9c6d0d18f363d485fd26a32c346d269d465f6a87bc0ca5e94ecd34fcd7362.sl.png
new file mode 100644
index 00000000..e38c77b7
Binary files /dev/null and b/translated_images/starBig.72e9c6d0d18f363d485fd26a32c346d269d465f6a87bc0ca5e94ecd34fcd7362.sl.png differ
diff --git a/translated_images/starSmall.ed78b961dbcd0898e8b9b721cbaaa8d54a0a1165a52a13f19650064add273eec.hr.png b/translated_images/starSmall.ed78b961dbcd0898e8b9b721cbaaa8d54a0a1165a52a13f19650064add273eec.hr.png
new file mode 100644
index 00000000..56bcfd58
Binary files /dev/null and b/translated_images/starSmall.ed78b961dbcd0898e8b9b721cbaaa8d54a0a1165a52a13f19650064add273eec.hr.png differ
diff --git a/translated_images/starSmall.ed78b961dbcd0898e8b9b721cbaaa8d54a0a1165a52a13f19650064add273eec.sk.png b/translated_images/starSmall.ed78b961dbcd0898e8b9b721cbaaa8d54a0a1165a52a13f19650064add273eec.sk.png
new file mode 100644
index 00000000..56bcfd58
Binary files /dev/null and b/translated_images/starSmall.ed78b961dbcd0898e8b9b721cbaaa8d54a0a1165a52a13f19650064add273eec.sk.png differ
diff --git a/translated_images/starSmall.ed78b961dbcd0898e8b9b721cbaaa8d54a0a1165a52a13f19650064add273eec.sl.png b/translated_images/starSmall.ed78b961dbcd0898e8b9b721cbaaa8d54a0a1165a52a13f19650064add273eec.sl.png
new file mode 100644
index 00000000..56bcfd58
Binary files /dev/null and b/translated_images/starSmall.ed78b961dbcd0898e8b9b721cbaaa8d54a0a1165a52a13f19650064add273eec.sl.png differ
diff --git a/translated_images/terrarium-final.0920f16e87c13a84cd2b553a5af9a3ad1cffbd41fbf8ce715d9e9c43809a5e2c.hr.png b/translated_images/terrarium-final.0920f16e87c13a84cd2b553a5af9a3ad1cffbd41fbf8ce715d9e9c43809a5e2c.hr.png
new file mode 100644
index 00000000..52cbfad0
Binary files /dev/null and b/translated_images/terrarium-final.0920f16e87c13a84cd2b553a5af9a3ad1cffbd41fbf8ce715d9e9c43809a5e2c.hr.png differ
diff --git a/translated_images/terrarium-final.0920f16e87c13a84cd2b553a5af9a3ad1cffbd41fbf8ce715d9e9c43809a5e2c.sk.png b/translated_images/terrarium-final.0920f16e87c13a84cd2b553a5af9a3ad1cffbd41fbf8ce715d9e9c43809a5e2c.sk.png
new file mode 100644
index 00000000..704a8221
Binary files /dev/null and b/translated_images/terrarium-final.0920f16e87c13a84cd2b553a5af9a3ad1cffbd41fbf8ce715d9e9c43809a5e2c.sk.png differ
diff --git a/translated_images/terrarium-final.0920f16e87c13a84cd2b553a5af9a3ad1cffbd41fbf8ce715d9e9c43809a5e2c.sl.png b/translated_images/terrarium-final.0920f16e87c13a84cd2b553a5af9a3ad1cffbd41fbf8ce715d9e9c43809a5e2c.sl.png
new file mode 100644
index 00000000..52cbfad0
Binary files /dev/null and b/translated_images/terrarium-final.0920f16e87c13a84cd2b553a5af9a3ad1cffbd41fbf8ce715d9e9c43809a5e2c.sl.png differ
diff --git a/translated_images/terrarium-final.2f07047ffc597d0a06b06cab28a77801a10dd12fdb6c7fc630e9c40665491c53.hr.png b/translated_images/terrarium-final.2f07047ffc597d0a06b06cab28a77801a10dd12fdb6c7fc630e9c40665491c53.hr.png
new file mode 100644
index 00000000..8c5f0ad7
Binary files /dev/null and b/translated_images/terrarium-final.2f07047ffc597d0a06b06cab28a77801a10dd12fdb6c7fc630e9c40665491c53.hr.png differ
diff --git a/translated_images/terrarium-final.2f07047ffc597d0a06b06cab28a77801a10dd12fdb6c7fc630e9c40665491c53.sk.png b/translated_images/terrarium-final.2f07047ffc597d0a06b06cab28a77801a10dd12fdb6c7fc630e9c40665491c53.sk.png
new file mode 100644
index 00000000..1c0645db
Binary files /dev/null and b/translated_images/terrarium-final.2f07047ffc597d0a06b06cab28a77801a10dd12fdb6c7fc630e9c40665491c53.sk.png differ
diff --git a/translated_images/terrarium-final.2f07047ffc597d0a06b06cab28a77801a10dd12fdb6c7fc630e9c40665491c53.sl.png b/translated_images/terrarium-final.2f07047ffc597d0a06b06cab28a77801a10dd12fdb6c7fc630e9c40665491c53.sl.png
new file mode 100644
index 00000000..8c5f0ad7
Binary files /dev/null and b/translated_images/terrarium-final.2f07047ffc597d0a06b06cab28a77801a10dd12fdb6c7fc630e9c40665491c53.sl.png differ
diff --git a/translated_images/validation-error.8bd23e98d416c22f80076d04829a4bb718e0e550fd622862ef59008ccf0d5dce.hr.png b/translated_images/validation-error.8bd23e98d416c22f80076d04829a4bb718e0e550fd622862ef59008ccf0d5dce.hr.png
new file mode 100644
index 00000000..15fba22b
Binary files /dev/null and b/translated_images/validation-error.8bd23e98d416c22f80076d04829a4bb718e0e550fd622862ef59008ccf0d5dce.hr.png differ
diff --git a/translated_images/validation-error.8bd23e98d416c22f80076d04829a4bb718e0e550fd622862ef59008ccf0d5dce.sk.png b/translated_images/validation-error.8bd23e98d416c22f80076d04829a4bb718e0e550fd622862ef59008ccf0d5dce.sk.png
new file mode 100644
index 00000000..2e56bc32
Binary files /dev/null and b/translated_images/validation-error.8bd23e98d416c22f80076d04829a4bb718e0e550fd622862ef59008ccf0d5dce.sk.png differ
diff --git a/translated_images/validation-error.8bd23e98d416c22f80076d04829a4bb718e0e550fd622862ef59008ccf0d5dce.sl.png b/translated_images/validation-error.8bd23e98d416c22f80076d04829a4bb718e0e550fd622862ef59008ccf0d5dce.sl.png
new file mode 100644
index 00000000..86bc9150
Binary files /dev/null and b/translated_images/validation-error.8bd23e98d416c22f80076d04829a4bb718e0e550fd622862ef59008ccf0d5dce.sl.png differ
diff --git a/translated_images/vs-code-index.e2986cf919471eb984a0afef231380c8b132b000635105f2397bd2754d1b689c.hr.png b/translated_images/vs-code-index.e2986cf919471eb984a0afef231380c8b132b000635105f2397bd2754d1b689c.hr.png
new file mode 100644
index 00000000..aed924e0
Binary files /dev/null and b/translated_images/vs-code-index.e2986cf919471eb984a0afef231380c8b132b000635105f2397bd2754d1b689c.hr.png differ
diff --git a/translated_images/vs-code-index.e2986cf919471eb984a0afef231380c8b132b000635105f2397bd2754d1b689c.sk.png b/translated_images/vs-code-index.e2986cf919471eb984a0afef231380c8b132b000635105f2397bd2754d1b689c.sk.png
new file mode 100644
index 00000000..1e1168ec
Binary files /dev/null and b/translated_images/vs-code-index.e2986cf919471eb984a0afef231380c8b132b000635105f2397bd2754d1b689c.sk.png differ
diff --git a/translated_images/vs-code-index.e2986cf919471eb984a0afef231380c8b132b000635105f2397bd2754d1b689c.sl.png b/translated_images/vs-code-index.e2986cf919471eb984a0afef231380c8b132b000635105f2397bd2754d1b689c.sl.png
new file mode 100644
index 00000000..d5998219
Binary files /dev/null and b/translated_images/vs-code-index.e2986cf919471eb984a0afef231380c8b132b000635105f2397bd2754d1b689c.sl.png differ
diff --git a/translated_images/webdev101-a11y.8ef3025c858d897a403a1a42c0897c76e11b724d9a8a0c0578dd4316f7507622.hr.png b/translated_images/webdev101-a11y.8ef3025c858d897a403a1a42c0897c76e11b724d9a8a0c0578dd4316f7507622.hr.png
new file mode 100644
index 00000000..a52fac2f
Binary files /dev/null and b/translated_images/webdev101-a11y.8ef3025c858d897a403a1a42c0897c76e11b724d9a8a0c0578dd4316f7507622.hr.png differ
diff --git a/translated_images/webdev101-a11y.8ef3025c858d897a403a1a42c0897c76e11b724d9a8a0c0578dd4316f7507622.sk.png b/translated_images/webdev101-a11y.8ef3025c858d897a403a1a42c0897c76e11b724d9a8a0c0578dd4316f7507622.sk.png
new file mode 100644
index 00000000..c45f1fab
Binary files /dev/null and b/translated_images/webdev101-a11y.8ef3025c858d897a403a1a42c0897c76e11b724d9a8a0c0578dd4316f7507622.sk.png differ
diff --git a/translated_images/webdev101-a11y.8ef3025c858d897a403a1a42c0897c76e11b724d9a8a0c0578dd4316f7507622.sl.png b/translated_images/webdev101-a11y.8ef3025c858d897a403a1a42c0897c76e11b724d9a8a0c0578dd4316f7507622.sl.png
new file mode 100644
index 00000000..0e9bb3c8
Binary files /dev/null and b/translated_images/webdev101-a11y.8ef3025c858d897a403a1a42c0897c76e11b724d9a8a0c0578dd4316f7507622.sl.png differ
diff --git a/translated_images/webdev101-css.3f7af5991bf53a200d79e7257e5e450408d8ea97f5b531d31b2e3976317338ee.hr.png b/translated_images/webdev101-css.3f7af5991bf53a200d79e7257e5e450408d8ea97f5b531d31b2e3976317338ee.hr.png
new file mode 100644
index 00000000..cea04420
Binary files /dev/null and b/translated_images/webdev101-css.3f7af5991bf53a200d79e7257e5e450408d8ea97f5b531d31b2e3976317338ee.hr.png differ
diff --git a/translated_images/webdev101-css.3f7af5991bf53a200d79e7257e5e450408d8ea97f5b531d31b2e3976317338ee.sk.png b/translated_images/webdev101-css.3f7af5991bf53a200d79e7257e5e450408d8ea97f5b531d31b2e3976317338ee.sk.png
new file mode 100644
index 00000000..cc331821
Binary files /dev/null and b/translated_images/webdev101-css.3f7af5991bf53a200d79e7257e5e450408d8ea97f5b531d31b2e3976317338ee.sk.png differ
diff --git a/translated_images/webdev101-css.3f7af5991bf53a200d79e7257e5e450408d8ea97f5b531d31b2e3976317338ee.sl.png b/translated_images/webdev101-css.3f7af5991bf53a200d79e7257e5e450408d8ea97f5b531d31b2e3976317338ee.sl.png
new file mode 100644
index 00000000..9faa5eab
Binary files /dev/null and b/translated_images/webdev101-css.3f7af5991bf53a200d79e7257e5e450408d8ea97f5b531d31b2e3976317338ee.sl.png differ
diff --git a/translated_images/webdev101-github.8846d7971abef6f947909b4f9d343e2a23778aa716ca6b9d71df7174ee5009ac.hr.png b/translated_images/webdev101-github.8846d7971abef6f947909b4f9d343e2a23778aa716ca6b9d71df7174ee5009ac.hr.png
new file mode 100644
index 00000000..f131297e
Binary files /dev/null and b/translated_images/webdev101-github.8846d7971abef6f947909b4f9d343e2a23778aa716ca6b9d71df7174ee5009ac.hr.png differ
diff --git a/translated_images/webdev101-github.8846d7971abef6f947909b4f9d343e2a23778aa716ca6b9d71df7174ee5009ac.sk.png b/translated_images/webdev101-github.8846d7971abef6f947909b4f9d343e2a23778aa716ca6b9d71df7174ee5009ac.sk.png
new file mode 100644
index 00000000..55aaf4ef
Binary files /dev/null and b/translated_images/webdev101-github.8846d7971abef6f947909b4f9d343e2a23778aa716ca6b9d71df7174ee5009ac.sk.png differ
diff --git a/translated_images/webdev101-github.8846d7971abef6f947909b4f9d343e2a23778aa716ca6b9d71df7174ee5009ac.sl.png b/translated_images/webdev101-github.8846d7971abef6f947909b4f9d343e2a23778aa716ca6b9d71df7174ee5009ac.sl.png
new file mode 100644
index 00000000..dc965f21
Binary files /dev/null and b/translated_images/webdev101-github.8846d7971abef6f947909b4f9d343e2a23778aa716ca6b9d71df7174ee5009ac.sl.png differ
diff --git a/translated_images/webdev101-html.4389c2067af68e98280c1bde52b6c6269f399eaae3659b7c846018d8a7b0bbd9.hr.png b/translated_images/webdev101-html.4389c2067af68e98280c1bde52b6c6269f399eaae3659b7c846018d8a7b0bbd9.hr.png
new file mode 100644
index 00000000..8fd57f98
Binary files /dev/null and b/translated_images/webdev101-html.4389c2067af68e98280c1bde52b6c6269f399eaae3659b7c846018d8a7b0bbd9.hr.png differ
diff --git a/translated_images/webdev101-html.4389c2067af68e98280c1bde52b6c6269f399eaae3659b7c846018d8a7b0bbd9.sk.png b/translated_images/webdev101-html.4389c2067af68e98280c1bde52b6c6269f399eaae3659b7c846018d8a7b0bbd9.sk.png
new file mode 100644
index 00000000..a112cf2e
Binary files /dev/null and b/translated_images/webdev101-html.4389c2067af68e98280c1bde52b6c6269f399eaae3659b7c846018d8a7b0bbd9.sk.png differ
diff --git a/translated_images/webdev101-html.4389c2067af68e98280c1bde52b6c6269f399eaae3659b7c846018d8a7b0bbd9.sl.png b/translated_images/webdev101-html.4389c2067af68e98280c1bde52b6c6269f399eaae3659b7c846018d8a7b0bbd9.sl.png
new file mode 100644
index 00000000..313ba54d
Binary files /dev/null and b/translated_images/webdev101-html.4389c2067af68e98280c1bde52b6c6269f399eaae3659b7c846018d8a7b0bbd9.sl.png differ
diff --git a/translated_images/webdev101-js-arrays.439d7528b8a294558d0e4302e448d193f8ad7495cc407539cc81f1afe904b470.hr.png b/translated_images/webdev101-js-arrays.439d7528b8a294558d0e4302e448d193f8ad7495cc407539cc81f1afe904b470.hr.png
new file mode 100644
index 00000000..6a4aed2f
Binary files /dev/null and b/translated_images/webdev101-js-arrays.439d7528b8a294558d0e4302e448d193f8ad7495cc407539cc81f1afe904b470.hr.png differ
diff --git a/translated_images/webdev101-js-arrays.439d7528b8a294558d0e4302e448d193f8ad7495cc407539cc81f1afe904b470.sk.png b/translated_images/webdev101-js-arrays.439d7528b8a294558d0e4302e448d193f8ad7495cc407539cc81f1afe904b470.sk.png
new file mode 100644
index 00000000..eeea0c94
Binary files /dev/null and b/translated_images/webdev101-js-arrays.439d7528b8a294558d0e4302e448d193f8ad7495cc407539cc81f1afe904b470.sk.png differ
diff --git a/translated_images/webdev101-js-arrays.439d7528b8a294558d0e4302e448d193f8ad7495cc407539cc81f1afe904b470.sl.png b/translated_images/webdev101-js-arrays.439d7528b8a294558d0e4302e448d193f8ad7495cc407539cc81f1afe904b470.sl.png
new file mode 100644
index 00000000..d97655f6
Binary files /dev/null and b/translated_images/webdev101-js-arrays.439d7528b8a294558d0e4302e448d193f8ad7495cc407539cc81f1afe904b470.sl.png differ
diff --git a/translated_images/webdev101-js-datatypes.4cc470179730702c756480d3ffa46507f746e5975ebf80f99fdaaf1cff09a7f4.hr.png b/translated_images/webdev101-js-datatypes.4cc470179730702c756480d3ffa46507f746e5975ebf80f99fdaaf1cff09a7f4.hr.png
new file mode 100644
index 00000000..2caaae94
Binary files /dev/null and b/translated_images/webdev101-js-datatypes.4cc470179730702c756480d3ffa46507f746e5975ebf80f99fdaaf1cff09a7f4.hr.png differ
diff --git a/translated_images/webdev101-js-datatypes.4cc470179730702c756480d3ffa46507f746e5975ebf80f99fdaaf1cff09a7f4.sk.png b/translated_images/webdev101-js-datatypes.4cc470179730702c756480d3ffa46507f746e5975ebf80f99fdaaf1cff09a7f4.sk.png
new file mode 100644
index 00000000..dfc0d5a4
Binary files /dev/null and b/translated_images/webdev101-js-datatypes.4cc470179730702c756480d3ffa46507f746e5975ebf80f99fdaaf1cff09a7f4.sk.png differ
diff --git a/translated_images/webdev101-js-datatypes.4cc470179730702c756480d3ffa46507f746e5975ebf80f99fdaaf1cff09a7f4.sl.png b/translated_images/webdev101-js-datatypes.4cc470179730702c756480d3ffa46507f746e5975ebf80f99fdaaf1cff09a7f4.sl.png
new file mode 100644
index 00000000..8409ac89
Binary files /dev/null and b/translated_images/webdev101-js-datatypes.4cc470179730702c756480d3ffa46507f746e5975ebf80f99fdaaf1cff09a7f4.sl.png differ
diff --git a/translated_images/webdev101-js-decisions.69e1b20f272dd1f0b1cb2f8adaff3ed2a77c4f91db96d8a0594132a353fa189a.hr.png b/translated_images/webdev101-js-decisions.69e1b20f272dd1f0b1cb2f8adaff3ed2a77c4f91db96d8a0594132a353fa189a.hr.png
new file mode 100644
index 00000000..1e55d18c
Binary files /dev/null and b/translated_images/webdev101-js-decisions.69e1b20f272dd1f0b1cb2f8adaff3ed2a77c4f91db96d8a0594132a353fa189a.hr.png differ
diff --git a/translated_images/webdev101-js-decisions.69e1b20f272dd1f0b1cb2f8adaff3ed2a77c4f91db96d8a0594132a353fa189a.sk.png b/translated_images/webdev101-js-decisions.69e1b20f272dd1f0b1cb2f8adaff3ed2a77c4f91db96d8a0594132a353fa189a.sk.png
new file mode 100644
index 00000000..bdcb3477
Binary files /dev/null and b/translated_images/webdev101-js-decisions.69e1b20f272dd1f0b1cb2f8adaff3ed2a77c4f91db96d8a0594132a353fa189a.sk.png differ
diff --git a/translated_images/webdev101-js-decisions.69e1b20f272dd1f0b1cb2f8adaff3ed2a77c4f91db96d8a0594132a353fa189a.sl.png b/translated_images/webdev101-js-decisions.69e1b20f272dd1f0b1cb2f8adaff3ed2a77c4f91db96d8a0594132a353fa189a.sl.png
new file mode 100644
index 00000000..ba8ee163
Binary files /dev/null and b/translated_images/webdev101-js-decisions.69e1b20f272dd1f0b1cb2f8adaff3ed2a77c4f91db96d8a0594132a353fa189a.sl.png differ
diff --git a/translated_images/webdev101-js-functions.be049c4726e94f8b7605c36330ac42eeb5cd8ed02bcdd60fdac778174d6cb865.hr.png b/translated_images/webdev101-js-functions.be049c4726e94f8b7605c36330ac42eeb5cd8ed02bcdd60fdac778174d6cb865.hr.png
new file mode 100644
index 00000000..dbb38d53
Binary files /dev/null and b/translated_images/webdev101-js-functions.be049c4726e94f8b7605c36330ac42eeb5cd8ed02bcdd60fdac778174d6cb865.hr.png differ
diff --git a/translated_images/webdev101-js-functions.be049c4726e94f8b7605c36330ac42eeb5cd8ed02bcdd60fdac778174d6cb865.sk.png b/translated_images/webdev101-js-functions.be049c4726e94f8b7605c36330ac42eeb5cd8ed02bcdd60fdac778174d6cb865.sk.png
new file mode 100644
index 00000000..dfe9a610
Binary files /dev/null and b/translated_images/webdev101-js-functions.be049c4726e94f8b7605c36330ac42eeb5cd8ed02bcdd60fdac778174d6cb865.sk.png differ
diff --git a/translated_images/webdev101-js-functions.be049c4726e94f8b7605c36330ac42eeb5cd8ed02bcdd60fdac778174d6cb865.sl.png b/translated_images/webdev101-js-functions.be049c4726e94f8b7605c36330ac42eeb5cd8ed02bcdd60fdac778174d6cb865.sl.png
new file mode 100644
index 00000000..49db9045
Binary files /dev/null and b/translated_images/webdev101-js-functions.be049c4726e94f8b7605c36330ac42eeb5cd8ed02bcdd60fdac778174d6cb865.sl.png differ
diff --git a/translated_images/webdev101-js.10280393044d7eaaec7e847574946add7ddae6be2b2194567d848b61d849334a.hr.png b/translated_images/webdev101-js.10280393044d7eaaec7e847574946add7ddae6be2b2194567d848b61d849334a.hr.png
new file mode 100644
index 00000000..18395b35
Binary files /dev/null and b/translated_images/webdev101-js.10280393044d7eaaec7e847574946add7ddae6be2b2194567d848b61d849334a.hr.png differ
diff --git a/translated_images/webdev101-js.10280393044d7eaaec7e847574946add7ddae6be2b2194567d848b61d849334a.sk.png b/translated_images/webdev101-js.10280393044d7eaaec7e847574946add7ddae6be2b2194567d848b61d849334a.sk.png
new file mode 100644
index 00000000..84dc849c
Binary files /dev/null and b/translated_images/webdev101-js.10280393044d7eaaec7e847574946add7ddae6be2b2194567d848b61d849334a.sk.png differ
diff --git a/translated_images/webdev101-js.10280393044d7eaaec7e847574946add7ddae6be2b2194567d848b61d849334a.sl.png b/translated_images/webdev101-js.10280393044d7eaaec7e847574946add7ddae6be2b2194567d848b61d849334a.sl.png
new file mode 100644
index 00000000..7427ae4c
Binary files /dev/null and b/translated_images/webdev101-js.10280393044d7eaaec7e847574946add7ddae6be2b2194567d848b61d849334a.sl.png differ
diff --git a/translated_images/webdev101-programming.d6e3f98e61ac4bff0b27dcbf1c3f16c8ed46984866f2d29988929678b0058fde.hr.png b/translated_images/webdev101-programming.d6e3f98e61ac4bff0b27dcbf1c3f16c8ed46984866f2d29988929678b0058fde.hr.png
new file mode 100644
index 00000000..a6c30c6e
Binary files /dev/null and b/translated_images/webdev101-programming.d6e3f98e61ac4bff0b27dcbf1c3f16c8ed46984866f2d29988929678b0058fde.hr.png differ
diff --git a/translated_images/webdev101-programming.d6e3f98e61ac4bff0b27dcbf1c3f16c8ed46984866f2d29988929678b0058fde.sk.png b/translated_images/webdev101-programming.d6e3f98e61ac4bff0b27dcbf1c3f16c8ed46984866f2d29988929678b0058fde.sk.png
new file mode 100644
index 00000000..5e0c93ad
Binary files /dev/null and b/translated_images/webdev101-programming.d6e3f98e61ac4bff0b27dcbf1c3f16c8ed46984866f2d29988929678b0058fde.sk.png differ
diff --git a/translated_images/webdev101-programming.d6e3f98e61ac4bff0b27dcbf1c3f16c8ed46984866f2d29988929678b0058fde.sl.png b/translated_images/webdev101-programming.d6e3f98e61ac4bff0b27dcbf1c3f16c8ed46984866f2d29988929678b0058fde.sl.png
new file mode 100644
index 00000000..23617c6f
Binary files /dev/null and b/translated_images/webdev101-programming.d6e3f98e61ac4bff0b27dcbf1c3f16c8ed46984866f2d29988929678b0058fde.sl.png differ
diff --git a/translated_images/working-tree-pb.6cd43e5076f23ba3d017f7662394bd87f975e194a068556905e4cc99da9cbfdc.hr.png b/translated_images/working-tree-pb.6cd43e5076f23ba3d017f7662394bd87f975e194a068556905e4cc99da9cbfdc.hr.png
new file mode 100644
index 00000000..75b946c0
Binary files /dev/null and b/translated_images/working-tree-pb.6cd43e5076f23ba3d017f7662394bd87f975e194a068556905e4cc99da9cbfdc.hr.png differ
diff --git a/translated_images/working-tree-pb.6cd43e5076f23ba3d017f7662394bd87f975e194a068556905e4cc99da9cbfdc.sk.png b/translated_images/working-tree-pb.6cd43e5076f23ba3d017f7662394bd87f975e194a068556905e4cc99da9cbfdc.sk.png
new file mode 100644
index 00000000..c07a6098
Binary files /dev/null and b/translated_images/working-tree-pb.6cd43e5076f23ba3d017f7662394bd87f975e194a068556905e4cc99da9cbfdc.sk.png differ
diff --git a/translated_images/working-tree-pb.6cd43e5076f23ba3d017f7662394bd87f975e194a068556905e4cc99da9cbfdc.sl.png b/translated_images/working-tree-pb.6cd43e5076f23ba3d017f7662394bd87f975e194a068556905e4cc99da9cbfdc.sl.png
new file mode 100644
index 00000000..0fb53f65
Binary files /dev/null and b/translated_images/working-tree-pb.6cd43e5076f23ba3d017f7662394bd87f975e194a068556905e4cc99da9cbfdc.sl.png differ
diff --git a/translated_images/working-tree.c58eec08e6335c79cc708c0c220c0b7fea61514bd3c7fb7471905a864aceac7c.hr.png b/translated_images/working-tree.c58eec08e6335c79cc708c0c220c0b7fea61514bd3c7fb7471905a864aceac7c.hr.png
new file mode 100644
index 00000000..56cbd1ce
Binary files /dev/null and b/translated_images/working-tree.c58eec08e6335c79cc708c0c220c0b7fea61514bd3c7fb7471905a864aceac7c.hr.png differ
diff --git a/translated_images/working-tree.c58eec08e6335c79cc708c0c220c0b7fea61514bd3c7fb7471905a864aceac7c.sk.png b/translated_images/working-tree.c58eec08e6335c79cc708c0c220c0b7fea61514bd3c7fb7471905a864aceac7c.sk.png
new file mode 100644
index 00000000..4e7683ae
Binary files /dev/null and b/translated_images/working-tree.c58eec08e6335c79cc708c0c220c0b7fea61514bd3c7fb7471905a864aceac7c.sk.png differ
diff --git a/translated_images/working-tree.c58eec08e6335c79cc708c0c220c0b7fea61514bd3c7fb7471905a864aceac7c.sl.png b/translated_images/working-tree.c58eec08e6335c79cc708c0c220c0b7fea61514bd3c7fb7471905a864aceac7c.sl.png
new file mode 100644
index 00000000..9b528bca
Binary files /dev/null and b/translated_images/working-tree.c58eec08e6335c79cc708c0c220c0b7fea61514bd3c7fb7471905a864aceac7c.sl.png differ
diff --git a/translations/hr/1-getting-started-lessons/1-intro-to-programming-languages/README.md b/translations/hr/1-getting-started-lessons/1-intro-to-programming-languages/README.md
new file mode 100644
index 00000000..23c7b870
--- /dev/null
+++ b/translations/hr/1-getting-started-lessons/1-intro-to-programming-languages/README.md
@@ -0,0 +1,216 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "c63675cfaf1d223b37bb9fecbfe7c252",
+  "translation_date": "2025-08-27T22:59:44+00:00",
+  "source_file": "1-getting-started-lessons/1-intro-to-programming-languages/README.md",
+  "language_code": "hr"
+}
+-->
+# Uvod u programske jezike i alate za rad
+
+Ova lekcija pokriva osnove programskih jezika. Teme obrađene ovdje primjenjive su na većinu modernih programskih jezika danas. U odjeljku 'Alati za rad' naučit ćete o korisnom softveru koji vam pomaže kao programeru.
+
+![Uvod u programiranje](../../../../translated_images/webdev101-programming.d6e3f98e61ac4bff0b27dcbf1c3f16c8ed46984866f2d29988929678b0058fde.hr.png)  
+> Sketchnote autorice [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Kviz prije predavanja  
+[Kviz prije predavanja](https://forms.office.com/r/dru4TE0U9n?origin=lprLink)
+
+## Uvod
+
+U ovoj lekciji obradit ćemo:
+
+- Što je programiranje?  
+- Vrste programskih jezika  
+- Osnovni elementi programa  
+- Koristan softver i alati za profesionalne programere  
+
+> Ovu lekciju možete pratiti na [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon)!
+
+## Što je programiranje?
+
+Programiranje (poznato i kao kodiranje) je proces pisanja uputa za uređaj poput računala ili mobilnog uređaja. Te upute pišemo pomoću programskog jezika, koji uređaj zatim interpretira. Ovi skupovi uputa mogu se nazivati različitim imenima, ali *program*, *računalni program*, *aplikacija (app)* i *izvršna datoteka* su neki od popularnih naziva.
+
+*Program* može biti bilo što što je napisano kodom; web stranice, igre i aplikacije za telefone su programi. Iako je moguće stvoriti program bez pisanja koda, osnovna logika interpretirana od strane uređaja najvjerojatnije je napisana kodom. Program koji *izvršava* kod provodi upute. Uređaj na kojem čitate ovu lekciju pokreće program kako bi je prikazao na vašem ekranu.
+
+✅ Istražite malo: tko se smatra prvim računalnim programerom na svijetu?
+
+## Programska jezici
+
+Programski jezici omogućuju programerima pisanje uputa za uređaje. Uređaji mogu razumjeti samo binarni kod (1 i 0), a za *većinu* programera to nije učinkovit način komunikacije. Programski jezici služe kao most između ljudi i računala.
+
+Programski jezici dolaze u različitim formatima i mogu služiti različitim svrhama. Na primjer, JavaScript se uglavnom koristi za web aplikacije, dok se Bash uglavnom koristi za operativne sustave.
+
+*Niskorazinski jezici* obično zahtijevaju manje koraka nego *visokorazinski jezici* kako bi uređaj interpretirao upute. Međutim, ono što visokorazinske jezike čini popularnima je njihova čitljivost i podrška. JavaScript se smatra visokorazinskim jezikom.
+
+Sljedeći kod ilustrira razliku između visokorazinskog jezika (JavaScript) i niskorazinskog jezika (ARM assembly kod).
+
+```javascript
+let number = 10
+let n1 = 0, n2 = 1, nextTerm;
+
+for (let i = 1; i <= number; i++) {
+    console.log(n1);
+    nextTerm = n1 + n2;
+    n1 = n2;
+    n2 = nextTerm;
+}
+```
+
+```c
+ area ascen,code,readonly
+ entry
+ code32
+ adr r0,thumb+1
+ bx r0
+ code16
+thumb
+ mov r0,#00
+ sub r0,r0,#01
+ mov r1,#01
+ mov r4,#10
+ ldr r2,=0x40000000
+back add r0,r1
+ str r0,[r2]
+ add r2,#04
+ mov r3,r0
+ mov r0,r1
+ mov r1,r3
+ sub r4,#01
+ cmp r4,#00
+ bne back
+ end
+```
+
+Vjerovali ili ne, *oba rade istu stvar*: ispisuju Fibonaccijev niz do 10.
+
+✅ Fibonaccijev niz [definiran je](https://en.wikipedia.org/wiki/Fibonacci_number) kao skup brojeva gdje je svaki broj zbroj prethodna dva, počevši od 0 i 1. Prvih 10 brojeva u Fibonaccijevom nizu su 0, 1, 1, 2, 3, 5, 8, 13, 21 i 34.
+
+## Elementi programa
+
+Jedna uputa u programu naziva se *izjava* i obično ima znak ili razmak koji označava gdje uputa završava, odnosno *završava*. Način na koji program završava razlikuje se ovisno o jeziku.
+
+Izjave unutar programa mogu se oslanjati na podatke koje pruža korisnik ili neki drugi izvor kako bi izvršile upute. Podaci mogu promijeniti ponašanje programa, pa programski jezici dolaze s načinom privremenog pohranjivanja podataka kako bi se mogli koristiti kasnije. To se naziva *varijablama*. Varijable su izjave koje uređaju daju uputu da pohrani podatke u svoju memoriju. Varijable u programima slične su varijablama u algebri, gdje imaju jedinstveno ime, a njihova se vrijednost može mijenjati tijekom vremena.
+
+Postoji mogućnost da neke izjave neće biti izvršene od strane uređaja. To je obično namjerno kada ih napiše programer ili slučajno kada se dogodi neočekivana pogreška. Ova vrsta kontrole nad aplikacijom čini je robusnijom i lakšom za održavanje. Tipično, ove promjene u kontroli događaju se kada su ispunjeni određeni uvjeti. U modernom programiranju često se koristi izjava `if..else` za kontrolu načina na koji program radi.
+
+✅ O ovoj vrsti izjave naučit ćete više u sljedećim lekcijama.
+
+## Alati za rad
+
+[![Alati za rad](https://img.youtube.com/vi/69WJeXGBdxg/0.jpg)](https://youtube.com/watch?v=69WJeXGBdxg "Alati za rad")
+
+> 🎥 Kliknite na sliku iznad za video o alatima
+
+U ovom odjeljku naučit ćete o nekim softverima koji vam mogu biti vrlo korisni dok započinjete svoj profesionalni razvojni put.
+
+**Razvojno okruženje** jedinstven je skup alata i značajki koje programer često koristi pri pisanju softvera. Neki od tih alata prilagođeni su specifičnim potrebama programera i mogu se mijenjati tijekom vremena ako programer promijeni prioritete u radu, osobnim projektima ili kada koristi drugi programski jezik. Razvojna okruženja su jedinstvena kao i sami programeri koji ih koriste.
+
+### Uređivači
+
+Jedan od najvažnijih alata za razvoj softvera je uređivač. Uređivači su mjesta gdje pišete svoj kod, a ponekad i gdje ga pokrećete.
+
+Programeri se oslanjaju na uređivače iz nekoliko dodatnih razloga:
+
+- *Otklanjanje pogrešaka* pomaže otkriti greške i pogreške korak po korak kroz kod, liniju po liniju. Neki uređivači imaju mogućnosti otklanjanja pogrešaka; mogu se prilagoditi i dodati za specifične programske jezike.  
+- *Isticanje sintakse* dodaje boje i formatiranje tekstu koda, čineći ga lakšim za čitanje. Većina uređivača omogućuje prilagodbu isticanja sintakse.  
+- *Proširenja i integracije* su specijalizirani alati za programere, od strane programera. Ovi alati nisu ugrađeni u osnovni uređivač. Na primjer, mnogi programeri dokumentiraju svoj kod kako bi objasnili kako radi. Mogu instalirati proširenje za provjeru pravopisa kako bi pronašli tipfelere unutar dokumentacije. Većina proširenja namijenjena je za korištenje unutar specifičnog uređivača, a većina uređivača dolazi s načinom pretraživanja dostupnih proširenja.  
+- *Prilagodba* omogućuje programerima stvaranje jedinstvenog razvojnog okruženja koje odgovara njihovim potrebama. Većina uređivača je izuzetno prilagodljiva i također može omogućiti programerima stvaranje vlastitih proširenja.
+
+#### Popularni uređivači i proširenja za web razvoj
+
+- [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)  
+  - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker)  
+  - [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare)  
+  - [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)  
+- [Atom](https://atom.io/)  
+  - [spell-check](https://atom.io/packages/spell-check)  
+  - [teletype](https://atom.io/packages/teletype)  
+  - [atom-beautify](https://atom.io/packages/atom-beautify)  
+- [Sublimetext](https://www.sublimetext.com/)  
+  - [emmet](https://emmet.io/)  
+  - [SublimeLinter](http://www.sublimelinter.com/en/stable/)  
+
+### Preglednici
+
+Još jedan ključni alat je preglednik. Web programeri oslanjaju se na preglednik kako bi vidjeli kako njihov kod radi na webu. Također se koristi za prikaz vizualnih elemenata web stranice napisanih u uređivaču, poput HTML-a.
+
+Mnogi preglednici dolaze s *razvojnim alatima* (DevTools) koji sadrže skup korisnih značajki i informacija za pomoć programerima u prikupljanju i bilježenju važnih informacija o njihovoj aplikaciji. Na primjer: Ako web stranica ima pogreške, ponekad je korisno znati kada su se dogodile. DevTools u pregledniku može se konfigurirati za bilježenje tih informacija.
+
+#### Popularni preglednici i DevTools
+
+- [Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)  
+- [Chrome](https://developers.google.com/web/tools/chrome-devtools/)  
+- [Firefox](https://developer.mozilla.org/docs/Tools)  
+
+### Alati naredbenog retka
+
+Neki programeri preferiraju manje grafički prikaz za svoje svakodnevne zadatke i oslanjaju se na naredbeni redak kako bi to postigli. Pisanje koda zahtijeva značajnu količinu tipkanja i neki programeri preferiraju ne prekidati svoj tok na tipkovnici. Koriste tipkovničke prečace za prebacivanje između prozora, rad na različitim datotekama i korištenje alata. Većinu zadataka moguće je obaviti mišem, ali jedna od prednosti korištenja naredbenog retka je što se puno toga može obaviti bez potrebe za prebacivanjem između miša i tipkovnice. Još jedna prednost naredbenog retka je što je prilagodljiv i možete spremiti prilagođenu konfiguraciju, promijeniti je kasnije i uvesti na druge razvojne strojeve. Budući da su razvojna okruženja tako jedinstvena za svakog programera, neki će izbjegavati korištenje naredbenog retka, neki će se u potpunosti oslanjati na njega, a neki preferiraju kombinaciju oboje.
+
+### Popularne opcije naredbenog retka
+
+Opcije za naredbeni redak razlikovat će se ovisno o operativnom sustavu koji koristite.
+
+*💻 = dolazi unaprijed instalirano na operativnom sustavu.*
+
+#### Windows
+
+- [Powershell](https://docs.microsoft.com/powershell/scripting/overview?view=powershell-7/?WT.mc_id=academic-77807-sagibbon) 💻  
+- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands/?WT.mc_id=academic-77807-sagibbon) (poznat i kao CMD) 💻  
+- [Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)  
+- [mintty](https://mintty.github.io/)  
+
+#### MacOS
+
+- [Terminal](https://support.apple.com/guide/terminal/open-or-quit-terminal-apd5265185d-f365-44cb-8b09-71a064a42125/mac) 💻  
+- [iTerm](https://iterm2.com/)  
+- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-macos?view=powershell-7/?WT.mc_id=academic-77807-sagibbon)  
+
+#### Linux
+
+- [Bash](https://www.gnu.org/software/bash/manual/html_node/index.html) 💻  
+- [KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)  
+- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-linux?view=powershell-7/?WT.mc_id=academic-77807-sagibbon)  
+
+#### Popularni alati naredbenog retka
+
+- [Git](https://git-scm.com/) (💻 na većini operativnih sustava)  
+- [NPM](https://www.npmjs.com/)  
+- [Yarn](https://classic.yarnpkg.com/en/docs/cli/)  
+
+### Dokumentacija
+
+Kada programer želi naučiti nešto novo, najvjerojatnije će se obratiti dokumentaciji kako bi naučio kako to koristiti. Programeri se često oslanjaju na dokumentaciju kako bi ih vodila kroz pravilno korištenje alata i jezika, ali i kako bi stekli dublje razumijevanje kako nešto funkcionira.
+
+#### Popularna dokumentacija o web razvoju
+
+- [Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web), od Mozille, izdavača preglednika [Firefox](https://www.mozilla.org/firefox/)  
+- [Frontend Masters](https://frontendmasters.com/learn/)  
+- [Web.dev](https://web.dev), od Googlea, izdavača [Chrome](https://www.google.com/chrome/)  
+- [Microsoftova dokumentacija za programere](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers), za [Microsoft Edge](https://www.microsoft.com/edge)  
+- [W3 Schools](https://www.w3schools.com/where_to_start.asp)  
+
+✅ Istražite: Sada kada znate osnove okruženja web programera, usporedite ga s okruženjem web dizajnera.
+
+---
+
+## 🚀 Izazov
+
+Usporedite neke programske jezike. Koje su jedinstvene karakteristike JavaScripta u usporedbi s Javom? A što je s COBOL-om u usporedbi s Go-om?
+
+## Kviz nakon predavanja  
+[Kviz nakon predavanja](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/2)
+
+## Pregled i samostalno učenje
+
+Proučite različite jezike dostupne programerima. Pokušajte napisati jednu liniju koda u jednom jeziku, a zatim je prepišite u dva druga jezika. Što ste naučili?
+
+## Zadatak
+
+[Čitanje dokumentacije](assignment.md)
+
+---
+
+**Odricanje od odgovornosti**:  
+Ovaj dokument je preveden pomoću AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za ključne informacije preporučuje se profesionalni prijevod od strane ljudskog prevoditelja. Ne preuzimamo odgovornost za bilo kakva nesporazuma ili pogrešna tumačenja koja proizlaze iz korištenja ovog prijevoda.
\ No newline at end of file
diff --git a/translations/hr/1-getting-started-lessons/1-intro-to-programming-languages/assignment.md b/translations/hr/1-getting-started-lessons/1-intro-to-programming-languages/assignment.md
new file mode 100644
index 00000000..274b1c06
--- /dev/null
+++ b/translations/hr/1-getting-started-lessons/1-intro-to-programming-languages/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "1ce4deaec80130d3a0a3c906568459fc",
+  "translation_date": "2025-08-27T23:01:09+00:00",
+  "source_file": "1-getting-started-lessons/1-intro-to-programming-languages/assignment.md",
+  "language_code": "hr"
+}
+-->
+# Čitanje dokumentacije
+
+## Upute
+
+Postoji mnogo alata koje web programer može trebati, a koji se nalaze na [MDN dokumentaciji za alate na strani klijenta](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview). Odaberite 3 alata koji nisu pokriveni u lekciji, objasnite zašto bi ih web programer koristio i potražite alat koji spada u ovu kategoriju te podijelite njegovu dokumentaciju. Nemojte koristiti isti primjer alata iz MDN dokumentacije.
+
+## Rubrika
+
+Primjeran | Zadovoljavajući | Potrebno poboljšanje
+--- | --- | -- |
+|Objašnjeno zašto bi web programer koristio alat| Objašnjeno kako, ali ne zašto bi programer koristio alat| Nije spomenuto kako ni zašto bi programer koristio alat  |
+
+---
+
+**Odricanje od odgovornosti**:  
+Ovaj dokument je preveden pomoću AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za ključne informacije preporučuje se profesionalni prijevod od strane čovjeka. Ne preuzimamo odgovornost za bilo kakve nesporazume ili pogrešne interpretacije koje proizlaze iz korištenja ovog prijevoda.
\ No newline at end of file
diff --git a/translations/hr/1-getting-started-lessons/2-github-basics/README.md b/translations/hr/1-getting-started-lessons/2-github-basics/README.md
new file mode 100644
index 00000000..147c9890
--- /dev/null
+++ b/translations/hr/1-getting-started-lessons/2-github-basics/README.md
@@ -0,0 +1,339 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "05666cecb8983a72cf0ce1d18932b5b7",
+  "translation_date": "2025-08-27T23:06:09+00:00",
+  "source_file": "1-getting-started-lessons/2-github-basics/README.md",
+  "language_code": "hr"
+}
+-->
+# Uvod u GitHub
+
+Ova lekcija pokriva osnove GitHuba, platforme za hostanje i upravljanje promjenama u vašem kodu.
+
+![Uvod u GitHub](../../../../translated_images/webdev101-github.8846d7971abef6f947909b4f9d343e2a23778aa716ca6b9d71df7174ee5009ac.hr.png)
+> Sketchnote od [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Kviz prije predavanja
+[Kviz prije predavanja](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/3)
+
+## Uvod
+
+U ovoj lekciji obradit ćemo:
+
+- praćenje rada na vašem računalu
+- rad na projektima s drugima
+- kako doprinositi softveru otvorenog koda
+
+### Preduvjeti
+
+Prije nego što počnete, provjerite je li Git instaliran. U terminal upišite:  
+`git --version`
+
+Ako Git nije instaliran, [preuzmite Git](https://git-scm.com/downloads). Zatim postavite svoj lokalni Git profil u terminalu:
+* `git config --global user.name "vaše-ime"`
+* `git config --global user.email "vaš-email"`
+
+Da biste provjerili je li Git već konfiguriran, možete upisati:  
+`git config --list`
+
+Također će vam trebati GitHub račun, uređivač koda (poput Visual Studio Code-a) i otvoren terminal (ili: naredbeni redak).
+
+Idite na [github.com](https://github.com/) i kreirajte račun ako već niste, ili se prijavite i ispunite svoj profil.
+
+✅ GitHub nije jedini repozitorij koda na svijetu; postoje i drugi, ali GitHub je najpoznatiji.
+
+### Priprema
+
+Trebat će vam mapa s projektom koda na vašem lokalnom računalu (laptopu ili PC-u) i javni repozitorij na GitHubu, koji će poslužiti kao primjer kako doprinositi projektima drugih.
+
+---
+
+## Upravljanje kodom
+
+Recimo da imate mapu lokalno s nekim projektom koda i želite početi pratiti svoj napredak koristeći git - sustav za kontrolu verzija. Neki ljudi uspoređuju korištenje gita s pisanjem ljubavnog pisma svom budućem ja. Čitajući svoje poruke o commitima danima, tjednima ili mjesecima kasnije, moći ćete se prisjetiti zašto ste donijeli određenu odluku ili "vratiti" promjenu - pod uvjetom da pišete dobre "poruke o commitima".
+
+### Zadatak: Napravite repozitorij i commitajte kod  
+
+> Pogledajte video  
+>  
+> [![Osnove Gita i GitHuba video](https://img.youtube.com/vi/9R31OUPpxU4/0.jpg)](https://www.youtube.com/watch?v=9R31OUPpxU4)
+
+1. **Kreirajte repozitorij na GitHubu**. Na GitHub.com, u kartici repozitorija ili iz navigacijske trake u gornjem desnom kutu, pronađite gumb **new repo**.
+
+   1. Dajte svom repozitoriju (mapi) ime.
+   1. Odaberite **create repository**.
+
+1. **Idite do svoje radne mape**. U terminalu se prebacite u mapu (poznatu i kao direktorij) koju želite početi pratiti. Upišite:
+
+   ```bash
+   cd [name of your folder]
+   ```
+
+1. **Inicijalizirajte git repozitorij**. U svom projektu upišite:
+
+   ```bash
+   git init
+   ```
+
+1. **Provjerite status**. Da biste provjerili status svog repozitorija, upišite:
+
+   ```bash
+   git status
+   ```
+
+   izlaz može izgledati ovako:
+
+   ```output
+   Changes not staged for commit:
+   (use "git add <file>..." to update what will be committed)
+   (use "git checkout -- <file>..." to discard changes in working directory)
+
+        modified:   file.txt
+        modified:   file2.txt
+   ```
+
+   Obično naredba `git status` govori stvari poput toga koji su datoteke spremne za _spremanje_ u repozitorij ili imaju promjene koje biste možda željeli sačuvati.
+
+1. **Dodajte sve datoteke za praćenje**  
+   Ovo se također naziva postavljanje datoteka/dodavanje datoteka u staging područje.
+
+   ```bash
+   git add .
+   ```
+
+   Argument `git add` plus `.` označava da su sve vaše datoteke i promjene spremne za praćenje.
+
+1. **Dodajte odabrane datoteke za praćenje**
+
+   ```bash
+   git add [file or folder name]
+   ```
+
+   Ovo nam pomaže dodati samo odabrane datoteke u staging područje kada ne želimo commitati sve datoteke odjednom.
+
+1. **Uklonite sve datoteke iz staging područja**
+
+   ```bash
+   git reset
+   ```
+
+   Ova naredba pomaže nam ukloniti sve datoteke iz staging područja odjednom.
+
+1. **Uklonite određenu datoteku iz staging područja**
+
+   ```bash
+   git reset [file or folder name]
+   ```
+
+   Ova naredba pomaže nam ukloniti samo određenu datoteku iz staging područja koju ne želimo uključiti u sljedeći commit.
+
+1. **Sačuvajte svoj rad**. U ovom trenutku ste dodali datoteke u tzv. _staging područje_. Mjesto gdje Git prati vaše datoteke. Da biste promjenu učinili trajnom, trebate _commitati_ datoteke. To radite stvaranjem _commita_ pomoću naredbe `git commit`. Commit predstavlja točku spremanja u povijesti vašeg repozitorija. Upišite sljedeće da biste stvorili commit:
+
+   ```bash
+   git commit -m "first commit"
+   ```
+
+   Ovo commitira sve vaše datoteke, dodajući poruku "first commit". Za buduće poruke o commitima želite biti detaljniji u opisu kako biste prenijeli kakvu ste promjenu napravili.
+
+1. **Povežite svoj lokalni Git repozitorij s GitHubom**. Git repozitorij je koristan na vašem računalu, ali u nekom trenutku želite imati sigurnosnu kopiju svojih datoteka negdje i također pozvati druge ljude da rade s vama na vašem repozitoriju. Jedno od sjajnih mjesta za to je GitHub. Sjetite se da smo već kreirali repozitorij na GitHubu, tako da jedino što trebamo učiniti je povezati naš lokalni Git repozitorij s GitHubom. Naredba `git remote add` to će učiniti. Upišite sljedeću naredbu:
+
+   > Napomena: prije nego što upišete naredbu, idite na stranicu svog GitHub repozitorija kako biste pronašli URL repozitorija. Koristit ćete ga u naredbi ispod. Zamijenite ```https://github.com/username/repository_name.git``` s vašim GitHub URL-om.
+
+   ```bash
+   git remote add origin https://github.com/username/repository_name.git
+   ```
+
+   Ovo stvara _remote_, ili vezu, nazvanu "origin" koja pokazuje na GitHub repozitorij koji ste ranije kreirali.
+
+1. **Pošaljite lokalne datoteke na GitHub**. Do sada ste stvorili _vezu_ između lokalnog repozitorija i GitHub repozitorija. Pošaljimo ove datoteke na GitHub pomoću sljedeće naredbe `git push`, ovako:  
+   
+   > Napomena: naziv vaše grane može se razlikovati od ```main```.
+
+   ```bash
+   git push -u origin main
+   ```
+
+   Ovo šalje vaše commitove u vašu "main" granu na GitHub.
+
+2. **Dodajte još promjena**. Ako želite nastaviti s promjenama i slati ih na GitHub, samo ćete trebati koristiti sljedeće tri naredbe:
+
+   ```bash
+   git add .
+   git commit -m "type your commit message here"
+   git push
+   ```
+
+   > Savjet: Možda biste također željeli usvojiti `.gitignore` datoteku kako biste spriječili da se datoteke koje ne želite pratiti pojavljuju na GitHubu - poput bilješki koje pohranjujete u istoj mapi, ali nemaju mjesto u javnom repozitoriju. Možete pronaći predloške za `.gitignore` datoteke na [.gitignore templates](https://github.com/github/gitignore).
+
+#### Poruke o commitima
+
+Sjajna Git commit poruka u naslovu završava sljedeću rečenicu:  
+Ako se primijeni, ovaj commit će <vaša poruka ovdje>
+
+Za naslov koristite imperativ, sadašnje vrijeme: "promijeni" umjesto "promijenio" ili "mijenja".  
+Kao i u naslovu, u tijelu (opcionalno) također koristite imperativ, sadašnje vrijeme. Tijelo bi trebalo uključivati motivaciju za promjenu i usporedbu s prethodnim ponašanjem. Objašnjavate `zašto`, a ne `kako`.
+
+✅ Odvojite nekoliko minuta da pregledate GitHub. Možete li pronaći zaista sjajnu poruku o commitu? Možete li pronaći vrlo minimalnu? Koje informacije smatrate najvažnijima i najkorisnijima za prenijeti u poruci o commitu?
+
+### Zadatak: Suradnja
+
+Glavni razlog za postavljanje stvari na GitHub bio je omogućiti suradnju s drugim programerima.
+
+## Rad na projektima s drugima
+
+> Pogledajte video  
+>  
+> [![Osnove Gita i GitHuba video](https://img.youtube.com/vi/bFCM-PC3cu8/0.jpg)](https://www.youtube.com/watch?v=bFCM-PC3cu8)
+
+U svom repozitoriju idite na `Insights > Community` kako biste vidjeli kako se vaš projekt uspoređuje s preporučenim standardima zajednice.
+
+Evo nekoliko stvari koje mogu poboljšati vaš GitHub repozitorij:
+- **Opis**. Jeste li dodali opis za svoj projekt?
+- **README**. Jeste li dodali README? GitHub pruža smjernice za pisanje [README](https://docs.github.com/articles/about-readmes/?WT.mc_id=academic-77807-sagibbon).
+- **Smjernice za doprinos**. Ima li vaš projekt [smjernice za doprinos](https://docs.github.com/articles/setting-guidelines-for-repository-contributors/?WT.mc_id=academic-77807-sagibbon)?
+- **Kodeks ponašanja**. Ima li vaš projekt [Kodeks ponašanja](https://docs.github.com/articles/adding-a-code-of-conduct-to-your-project/)?
+- **Licenca**. Možda najvažnije, ima li vaš projekt [licencu](https://docs.github.com/articles/adding-a-license-to-a-repository/)?
+
+Svi ovi resursi koristit će za onboardanje novih članova tima. To su obično stvari koje novi suradnici pregledavaju prije nego što uopće pogledaju vaš kod, kako bi saznali je li vaš projekt pravo mjesto za njihovo ulaganje vremena.
+
+✅ README datoteke, iako zahtijevaju vrijeme za pripremu, često su zanemarene od strane zauzetih održavatelja. Možete li pronaći primjer posebno opisnog README-a? Napomena: postoje neki [alati za pomoć pri izradi dobrih README-a](https://www.makeareadme.com/) koje biste mogli isprobati.
+
+### Zadatak: Spojite kod
+
+Dokumentacija za doprinos pomaže ljudima da doprinesu projektu. Objašnjava koje vrste doprinosa tražite i kako proces funkcionira. Suradnici će morati proći kroz niz koraka kako bi mogli doprinositi vašem repozitoriju na GitHubu:
+
+1. **Forkanje vašeg repozitorija**. Vjerojatno ćete htjeti da ljudi _forkaju_ vaš projekt. Forkanje znači stvaranje replike vašeg repozitorija na njihovom GitHub profilu.
+1. **Kloniranje**. Nakon toga će klonirati projekt na svoje lokalno računalo.
+1. **Kreiranje grane**. Tražit ćete od njih da kreiraju _granu_ za svoj rad.
+1. **Fokusiranje promjena na jedno područje**. Zamolite suradnike da se koncentriraju na jedan aspekt doprinosa odjednom - na taj način su veće šanse da možete _spojiti_ njihov rad. Zamislite da napišu ispravak greške, dodaju novu značajku i ažuriraju nekoliko testova - što ako želite ili možete implementirati samo 2 od 3, ili 1 od 3 promjene?
+
+✅ Zamislite situaciju u kojoj su grane posebno ključne za pisanje i isporuku dobrog koda. Koje slučajeve upotrebe možete zamisliti?
+
+> Napomena: Budite promjena koju želite vidjeti u svijetu i kreirajte grane za svoj rad također. Svi commitovi koje napravite bit će napravljeni na grani na kojoj ste trenutno "checked out". Koristite `git status` da vidite na kojoj ste grani.
+
+Prođimo kroz tijek rada suradnika. Pretpostavimo da je suradnik već _forkao_ i _klonirao_ repozitorij, tako da ima Git repozitorij spreman za rad na svom lokalnom računalu:
+
+1. **Kreirajte granu**. Koristite naredbu `git branch` za kreiranje grane koja će sadržavati promjene koje namjeravaju doprinijeti:
+
+   ```bash
+   git branch [branch-name]
+   ```
+
+1. **Prebacite se na radnu granu**. Prebacite se na određenu granu i ažurirajte radni direktorij pomoću `git switch`:
+
+   ```bash
+   git switch [branch-name]
+   ```
+
+1. **Radite na promjenama**. U ovom trenutku želite dodati svoje promjene. Ne zaboravite obavijestiti Git o tome pomoću sljedećih naredbi:
+
+   ```bash
+   git add .
+   git commit -m "my changes"
+   ```
+
+   Osigurajte da svom commitu date dobro ime, za vaše dobro kao i za dobro održavatelja repozitorija kojem pomažete.
+
+1. **Spojite svoj rad s `main` granom**. U nekom trenutku završavate s radom i želite spojiti svoj rad s onim na `main` grani. `Main` grana se možda promijenila u međuvremenu, pa je osigurajte da je prvo ažurirate na najnoviju verziju pomoću sljedećih naredbi:
+
+   ```bash
+   git switch main
+   git pull
+   ```
+
+   U ovom trenutku želite osigurati da se svi _sukobi_, situacije u kojima Git ne može lako _spojiti_ promjene, dogode u vašoj radnoj grani. Stoga pokrenite sljedeće naredbe:
+
+   ```bash
+   git switch [branch_name]
+   git merge main
+   ```
+
+   Ovo će unijeti sve promjene iz `main` grane u vašu granu i nadamo se da možete samo nastaviti. Ako ne, VS Code će vam pokazati gdje je Git _zbunjen_ i samo izmijenite zahvaćene datoteke kako biste odredili koji je sadržaj najtočniji.
+
+1. **Pošaljite svoj rad na GitHub**. Slanje vašeg rada na GitHub znači dvije stvari. Guranje vaše grane na vaš repozitorij i zatim otvaranje PR-a, Pull Requesta.
+
+   ```bash
+   git push --set-upstream origin [branch-name]
+   ```
+
+   Gornja naredba kreira granu na vašem forkiranom repozitoriju.
+
+1. **Otvorite PR**. Zatim želite otvoriti PR. To radite tako da odete na forkirani repozitorij na GitHubu. Vidjet ćete naznaku na GitHubu gdje vas pita želite li kreirati novi PR, kliknite na to i bit ćete preusmjereni na sučelje gdje možete promijeniti naslov poruke o commitu, dati prikladniji opis. Sada održavatelj repozitorija koji ste forkali vidi ovaj PR i _držimo palčeve_ da će ga cijeniti i _spojiti_ vaš PR. Sada ste suradnik, bravo :)
+
+1. **Očistite**. Smatra se dobrom praksom _očistiti_ nakon što uspješno spojite PR. Želite očistiti i svoju lokalnu granu i granu koju ste gurali na GitHub. Prvo je izbrišite lokalno pomoću sljedeće naredbe:
+
+   ```bash
+   git branch -d [branch-name]
+   ```
+Idite na GitHub stranicu za forkani repozitorij i uklonite udaljenu granu koju ste upravo gurnuli na njega.
+
+`Pull request` može zvučati kao čudan izraz jer zapravo želite gurnuti svoje promjene u projekt. No, održavatelj (vlasnik projekta) ili glavni tim mora razmotriti vaše promjene prije nego što ih spoji s "main" granom projekta, pa zapravo tražite odluku o promjeni od održavatelja.
+
+Pull request je mjesto gdje možete usporediti i raspraviti razlike uvedene na grani uz recenzije, komentare, integrirane testove i više. Dobar pull request slijedi otprilike ista pravila kao i poruka commit-a. Možete dodati referencu na problem u trackeru problema, na primjer kada vaš rad rješava neki problem. To se radi pomoću `#` praćenog brojem vašeg problema. Na primjer `#97`.
+
+🤞Držimo palčeve da svi provjeri prođu i da vlasnik(i) projekta spoje vaše promjene u projekt🤞
+
+Ažurirajte svoju trenutnu lokalnu radnu granu sa svim novim commit-ovima iz odgovarajuće udaljene grane na GitHubu:
+
+`git pull`
+
+## Kako doprinijeti otvorenom kodu
+
+Prvo, pronađimo repozitorij (ili **repo**) na GitHubu koji vas zanima i kojem želite doprinijeti promjenom. Željet ćete kopirati njegov sadržaj na svoje računalo.
+
+✅ Dobar način za pronalaženje repozitorija prilagođenih početnicima je [pretraživanje prema oznaci 'good-first-issue'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/).
+
+![Kopirajte repo lokalno](../../../../translated_images/clone_repo.5085c48d666ead57664f050d806e325d7f883be6838c821e08bc823ab7c66665.hr.png)
+
+Postoji nekoliko načina za kopiranje koda. Jedan od načina je "kloniranje" sadržaja repozitorija, koristeći HTTPS, SSH ili GitHub CLI (Command Line Interface).
+
+Otvorite svoj terminal i klonirajte repozitorij ovako:
+`git clone https://github.com/ProjectURL`
+
+Za rad na projektu, prebacite se u odgovarajući folder:
+`cd ProjectURL`
+
+Također možete otvoriti cijeli projekt koristeći [Codespaces](https://github.com/features/codespaces), GitHub-ov ugrađeni uređivač koda / razvojno okruženje u oblaku, ili [GitHub Desktop](https://desktop.github.com/).
+
+Na kraju, možete preuzeti kod u zipanoj mapi.
+
+### Nekoliko zanimljivih stvari o GitHubu
+
+Možete označiti zvjezdicom, pratiti i/ili "forkati" bilo koji javni repozitorij na GitHubu. Svoje označene repozitorije možete pronaći u padajućem izborniku u gornjem desnom kutu. To je poput označavanja stranica, ali za kod.
+
+Projekti imaju tracker problema, uglavnom na GitHubu u kartici "Issues" osim ako nije drugačije naznačeno, gdje ljudi raspravljaju o problemima vezanim za projekt. Kartica Pull Requests je mjesto gdje ljudi raspravljaju i pregledavaju promjene koje su u tijeku.
+
+Projekti također mogu imati rasprave u forumima, mailing listama ili chat kanalima poput Slacka, Discorda ili IRC-a.
+
+✅ Pogledajte svoj novi GitHub repo i isprobajte nekoliko stvari, poput uređivanja postavki, dodavanja informacija u repo i stvaranja projekta (poput Kanban ploče). Puno toga možete učiniti!
+
+---
+
+## 🚀 Izazov
+
+Udružite se s prijateljem kako biste radili na međusobnom kodu. Zajedno stvorite projekt, forkajte kod, kreirajte grane i spojite promjene.
+
+## Kviz nakon predavanja
+[Kviz nakon predavanja](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/4)
+
+## Pregled i samostalno učenje
+
+Pročitajte više o [doprinosu otvorenom softveru](https://opensource.guide/how-to-contribute/#how-to-submit-a-contribution).
+
+[Git cheatsheet](https://training.github.com/downloads/github-git-cheat-sheet/).
+
+Vježbajte, vježbajte, vježbajte. GitHub ima odlične putove za učenje dostupne putem [skills.github.com](https://skills.github.com):
+
+- [Prvi tjedan na GitHubu](https://skills.github.com/#first-week-on-github)
+
+Također ćete pronaći naprednije tečajeve.
+
+## Zadatak
+
+Dovršite [tečaj Prvi tjedan na GitHubu](https://skills.github.com/#first-week-on-github)
+
+---
+
+**Odricanje od odgovornosti**:  
+Ovaj dokument je preveden pomoću AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za ključne informacije preporučuje se profesionalni prijevod od strane ljudskog prevoditelja. Ne preuzimamo odgovornost za nesporazume ili pogrešne interpretacije koje mogu proizaći iz korištenja ovog prijevoda.
\ No newline at end of file
diff --git a/translations/hr/1-getting-started-lessons/3-accessibility/README.md b/translations/hr/1-getting-started-lessons/3-accessibility/README.md
new file mode 100644
index 00000000..f35d0e65
--- /dev/null
+++ b/translations/hr/1-getting-started-lessons/3-accessibility/README.md
@@ -0,0 +1,244 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "e4cd5b1faed4adab5acf720f82798003",
+  "translation_date": "2025-08-27T23:03:17+00:00",
+  "source_file": "1-getting-started-lessons/3-accessibility/README.md",
+  "language_code": "hr"
+}
+-->
+# Izrada pristupačnih web stranica
+
+![Sve o pristupačnosti](../../../../translated_images/webdev101-a11y.8ef3025c858d897a403a1a42c0897c76e11b724d9a8a0c0578dd4316f7507622.hr.png)
+> Sketchnote autor [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Kviz prije predavanja
+[Kviz prije predavanja](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/5)
+
+> Snaga weba leži u njegovoj univerzalnosti. Pristup svima, bez obzira na invaliditet, ključni je aspekt.
+>
+> \- Sir Timothy Berners-Lee, direktor W3C-a i izumitelj World Wide Weba
+
+Ovaj citat savršeno naglašava važnost izrade pristupačnih web stranica. Aplikacija koja nije dostupna svima po definiciji je isključiva. Kao web programeri, uvijek bismo trebali imati pristupačnost na umu. Ako se fokusirate na to od samog početka, bit ćete na dobrom putu da osigurate da svi mogu pristupiti stranicama koje kreirate. U ovoj lekciji naučit ćete o alatima koji vam mogu pomoći da osigurate pristupačnost vaših web resursa i kako graditi s pristupačnošću na umu.
+
+> Ovu lekciju možete pratiti na [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/accessibility/?WT.mc_id=academic-77807-sagibbon)!
+
+## Alati za korištenje
+
+### Čitači ekrana
+
+Jedan od najpoznatijih alata za pristupačnost su čitači ekrana.
+
+[Čitači ekrana](https://en.wikipedia.org/wiki/Screen_reader) su uobičajeni klijenti za osobe s oštećenjem vida. Dok provodimo vrijeme osiguravajući da preglednik pravilno prenosi informacije koje želimo podijeliti, također moramo osigurati da čitač ekrana radi isto.
+
+U svojoj osnovi, čitač ekrana će čitati stranicu od vrha do dna glasovno. Ako je vaša stranica samo tekst, čitač će prenijeti informacije na sličan način kao preglednik. Naravno, web stranice rijetko su samo tekst; sadrže poveznice, grafiku, boje i druge vizualne komponente. Potrebno je paziti da se te informacije pravilno čitaju putem čitača ekrana.
+
+Svaki web programer trebao bi se upoznati s čitačem ekrana. Kao što je gore istaknuto, to je klijent koji će vaši korisnici koristiti. Na isti način na koji ste upoznati s radom preglednika, trebali biste naučiti kako radi čitač ekrana. Srećom, čitači ekrana ugrađeni su u većinu operativnih sustava.
+
+Neki preglednici također imaju ugrađene alate i proširenja koja mogu čitati tekst naglas ili čak pružiti neke osnovne navigacijske značajke, poput [ovih alata za pristupačnost u Edge pregledniku](https://support.microsoft.com/help/4000734/microsoft-edge-accessibility-features). Iako su i oni važni alati za pristupačnost, funkcioniraju vrlo različito od čitača ekrana i ne bi ih trebalo zamijeniti za alate za testiranje čitača ekrana.
+
+✅ Isprobajte čitač ekrana i čitač teksta u pregledniku. Na Windowsu je [Narrator](https://support.microsoft.com/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c172f109bdb1/?WT.mc_id=academic-77807-sagibbon) uključen prema zadanim postavkama, a [JAWS](https://webaim.org/articles/jaws/) i [NVDA](https://www.nvaccess.org/about-nvda/) također se mogu instalirati. Na macOS-u i iOS-u, [VoiceOver](https://support.apple.com/guide/voiceover/welcome/10) je instaliran prema zadanim postavkama.
+
+### Zumiranje
+
+Još jedan alat koji često koriste osobe s oštećenjem vida je zumiranje. Najosnovniji tip zumiranja je statički zum, kontroliran putem `Control + plus znak (+)` ili smanjenjem rezolucije ekrana. Ova vrsta zumiranja uzrokuje promjenu veličine cijele stranice, pa je korištenje [responsivnog dizajna](https://developer.mozilla.org/docs/Learn/CSS/CSS_layout/Responsive_Design) važno za pružanje dobrog korisničkog iskustva pri povećanim razinama zumiranja.
+
+Druga vrsta zumiranja oslanja se na specijalizirani softver za povećanje jednog dijela ekrana i pomicanje, slično korištenju prave povećale. Na Windowsu je [Magnifier](https://support.microsoft.com/windows/use-magnifier-to-make-things-on-the-screen-easier-to-see-414948ba-8b1c-d3bd-8615-0e5e32204198) ugrađen, a [ZoomText](https://www.freedomscientific.com/training/zoomtext/getting-started/) je softver treće strane za povećanje s više značajki i većom korisničkom bazom. I macOS i iOS imaju ugrađeni softver za povećanje pod nazivom [Zoom](https://www.apple.com/accessibility/mac/vision/).
+
+### Provjera kontrasta
+
+Boje na web stranicama moraju biti pažljivo odabrane kako bi zadovoljile potrebe korisnika s daltonizmom ili osoba koje imaju poteškoće s vidom pri niskom kontrastu boja.
+
+✅ Testirajte web stranicu koju volite koristiti za upotrebu boja pomoću proširenja za preglednik poput [WCAG-ovog provjerivača kontrasta boja](https://microsoftedge.microsoft.com/addons/detail/wcag-color-contrast-check/idahaggnlnekelhgplklhfpchbfdmkjp?hl=en-US&WT.mc_id=academic-77807-sagibbon). Što ste naučili?
+
+### Lighthouse
+
+U području alata za razvoj u vašem pregledniku pronaći ćete alat Lighthouse. Ovaj alat je važan za dobivanje prvog pregleda pristupačnosti (kao i drugih analiza) web stranice. Iako je važno ne oslanjati se isključivo na Lighthouse, rezultat od 100% vrlo je koristan kao osnovna vrijednost.
+
+✅ Pronađite Lighthouse u panelu alata za razvoj vašeg preglednika i pokrenite analizu na bilo kojoj stranici. Što ste otkrili?
+
+## Dizajniranje za pristupačnost
+
+Pristupačnost je relativno velika tema. Kako bismo vam pomogli, dostupni su brojni resursi.
+
+- [Accessible U - Sveučilište u Minnesoti](https://accessibility.umn.edu/your-role/web-developers)
+
+Iako nećemo moći pokriti svaki aspekt izrade pristupačnih stranica, u nastavku su neki od osnovnih principa koje ćete htjeti implementirati. Dizajniranje pristupačne stranice od početka **uvijek** je lakše nego vraćanje na postojeću stranicu kako bi se učinila pristupačnom.
+
+## Dobri principi prikaza
+
+### Sigurne palete boja
+
+Ljudi vide svijet na različite načine, uključujući boje. Kada birate shemu boja za svoju stranicu, trebali biste osigurati da je dostupna svima. Jedan odličan [alat za generiranje paleta boja je Color Safe](http://colorsafe.co/).
+
+✅ Identificirajte web stranicu koja ima vrlo problematičnu upotrebu boja. Zašto?
+
+### Koristite ispravan HTML
+
+Uz CSS i JavaScript moguće je učiniti da bilo koji element izgleda kao bilo koja vrsta kontrole. `<span>` se može koristiti za stvaranje `<button>`, a `<b>` može postati hiperveza. Iako se to može smatrati lakšim za stiliziranje, ne prenosi ništa čitaču ekrana. Koristite odgovarajući HTML prilikom kreiranja kontrola na stranici. Ako želite hipervezu, koristite `<a>`. Korištenje pravog HTML-a za pravu kontrolu naziva se korištenjem semantičkog HTML-a.
+
+✅ Posjetite bilo koju web stranicu i provjerite koriste li dizajneri i programeri HTML pravilno. Možete li pronaći gumb koji bi trebao biti poveznica? Savjet: desni klik i odaberite 'View Page Source' u pregledniku kako biste pogledali osnovni kod.
+
+### Kreirajte opisnu hijerarhiju naslova
+
+Korisnici čitača ekrana [uvelike se oslanjaju na naslove](https://webaim.org/projects/screenreadersurvey8/#finding) za pronalaženje informacija i navigaciju kroz stranicu. Pisanje opisnog sadržaja naslova i korištenje semantičkih oznaka naslova važno je za kreiranje lako navigabilne stranice za korisnike čitača ekrana.
+
+### Koristite dobre vizualne tragove
+
+CSS nudi potpunu kontrolu nad izgledom bilo kojeg elementa na stranici. Možete kreirati tekstualne okvire bez obrisa ili hiperveze bez podcrtavanja. Nažalost, uklanjanje tih tragova može otežati nekome tko ovisi o njima da prepozna vrstu kontrole.
+
+## Važnost teksta poveznica
+
+Hiperveze su ključne za navigaciju webom. Kao rezultat toga, osiguravanje da čitač ekrana pravilno čita poveznice omogućuje svim korisnicima navigaciju vašom stranicom.
+
+### Čitači ekrana i poveznice
+
+Kao što biste očekivali, čitači ekrana čitaju tekst poveznica na isti način na koji bi čitali bilo koji drugi tekst na stranici. Imajući to na umu, tekst prikazan u nastavku može se činiti savršeno prihvatljivim.
+
+> Mali pingvin, ponekad poznat kao vilinski pingvin, najmanji je pingvin na svijetu. [Kliknite ovdje](https://en.wikipedia.org/wiki/Little_penguin) za više informacija.
+
+> Mali pingvin, ponekad poznat kao vilinski pingvin, najmanji je pingvin na svijetu. Posjetite https://en.wikipedia.org/wiki/Little_penguin za više informacija.
+
+> **NOTE** Kao što ćete uskoro pročitati, **nikada** ne biste trebali kreirati poveznice koje izgledaju kao gore navedene.
+
+Zapamtite, čitači ekrana su drugačije sučelje od preglednika s drugačijim skupom značajki.
+
+### Problem s korištenjem URL-a
+
+Čitači ekrana čitaju tekst. Ako se URL pojavi u tekstu, čitač ekrana će pročitati URL. Općenito govoreći, URL ne prenosi značajne informacije i može zvučati iritantno. Možda ste to iskusili ako vam je telefon ikada glasovno pročitao tekstualnu poruku s URL-om.
+
+### Problem s "kliknite ovdje"
+
+Čitači ekrana također imaju mogućnost čitanja samo hiperveza na stranici, slično kao što bi osoba s vidom pregledavala stranicu tražeći poveznice. Ako je tekst poveznice uvijek "kliknite ovdje", sve što će korisnik čuti je "kliknite ovdje, kliknite ovdje, kliknite ovdje, kliknite ovdje, kliknite ovdje, ..." Sve poveznice sada su neprepoznatljive jedna od druge.
+
+### Dobar tekst poveznice
+
+Dobar tekst poveznice ukratko opisuje što se nalazi na drugoj strani poveznice. U gore navedenom primjeru koji govori o malim pingvinima, poveznica vodi na Wikipedijinu stranicu o toj vrsti. Fraza *mali pingvini* bila bi savršen tekst poveznice jer jasno daje do znanja što će netko naučiti ako klikne na poveznicu - mali pingvini.
+
+> [Mali pingvin](https://en.wikipedia.org/wiki/Little_penguin), ponekad poznat kao vilinski pingvin, najmanji je pingvin na svijetu.
+
+✅ Surfajte webom nekoliko minuta kako biste pronašli stranice koje koriste nejasne strategije povezivanja. Usporedite ih s drugim, bolje povezanim stranicama. Što ste naučili?
+
+#### Napomene o tražilicama
+
+Kao dodatni bonus za osiguravanje da vaša stranica bude pristupačna svima, pomoći ćete tražilicama da navigiraju vašom stranicom. Tražilice koriste tekst poveznica kako bi saznale teme stranica. Dakle, korištenje dobrog teksta poveznica pomaže svima!
+
+### ARIA
+
+Zamislite sljedeću stranicu:
+
+| Proizvod      | Opis              | Narudžba     |
+| ------------- | ----------------- | ------------ |
+| Widget        | [Opis](../../../../1-getting-started-lessons/3-accessibility/')       | [Narudžba](../../../../1-getting-started-lessons/3-accessibility/') |
+| Super widget  | [Opis](../../../../1-getting-started-lessons/3-accessibility/')       | [Narudžba](../../../../1-getting-started-lessons/3-accessibility/') |
+
+U ovom primjeru, dupliciranje teksta opisa i narudžbe ima smisla za nekoga tko koristi preglednik. Međutim, netko tko koristi čitač ekrana čuo bi samo riječi *opis* i *narudžba* ponavljane bez konteksta.
+
+Kako bi podržali ovakve scenarije, HTML podržava skup atributa poznatih kao [Pristupačne bogate internetske aplikacije (ARIA)](https://developer.mozilla.org/docs/Web/Accessibility/ARIA). Ovi atributi omogućuju pružanje dodatnih informacija čitačima ekrana.
+
+> **NOTE**: Kao i kod mnogih aspekata HTML-a, podrška preglednika i čitača ekrana može varirati. Međutim, većina glavnih klijenata podržava ARIA atribute.
+
+Možete koristiti `aria-label` za opisivanje poveznice kada format stranice to ne dopušta. Opis za widget mogao bi biti postavljen kao
+
+``` html
+<a href="#" aria-label="Widget description">description</a>
+```
+
+✅ Općenito, korištenje semantičkog označavanja kao što je gore opisano nadmašuje upotrebu ARIA-e, ali ponekad ne postoji semantički ekvivalent za razne HTML widgete. Dobar primjer je stablo. Ne postoji HTML ekvivalent za stablo, pa identificirate generički `<div>` za ovaj element s odgovarajućom ulogom i ARIA vrijednostima. [MDN dokumentacija o ARIA-i](https://developer.mozilla.org/docs/Web/Accessibility/ARIA) sadrži više korisnih informacija.
+
+```html
+<h2 id="tree-label">File Viewer</h2>
+<div role="tree" aria-labelledby="tree-label">
+  <div role="treeitem" aria-expanded="false" tabindex="0">Uploads</div>
+</div>
+```
+
+## Slike
+
+Podrazumijeva se da čitači ekrana ne mogu automatski čitati što se nalazi na slici. Osiguravanje pristupačnosti slika ne zahtijeva puno rada - upravo za to služi atribut `alt`. Sve značajne slike trebale bi imati `alt` koji opisuje što su.
+Slike koje su isključivo dekorativne trebale bi imati svoj atribut `alt` postavljen na prazan string: `alt=""`. To sprječava čitače ekrana da nepotrebno najavljuju dekorativnu sliku.
+
+✅ Kao što biste mogli očekivati, tražilice također ne mogu razumjeti što se nalazi na slici. One također koriste alt tekst. Dakle, još jednom, osiguravanje pristupačnosti vaše stranice donosi dodatne bonuse!
+
+## Tipkovnica
+
+Neki korisnici ne mogu koristiti miš ili trackpad, već se oslanjaju na interakcije putem tipkovnice kako bi prelazili s jednog elementa na drugi. Važno je da vaša web stranica prikazuje vaš sadržaj logičnim redoslijedom kako bi korisnik tipkovnice mogao pristupiti svakom interaktivnom elementu dok se kreće kroz dokument. Ako gradite svoje web stranice koristeći semantičko označavanje i koristite CSS za stiliziranje njihovog vizualnog izgleda, vaša stranica bi trebala biti navigabilna tipkovnicom, ali važno je testirati ovaj aspekt ručno. Saznajte više o [strategijama navigacije tipkovnicom](https://webaim.org/techniques/keyboard/).
+
+✅ Posjetite bilo koju web stranicu i pokušajte navigirati kroz nju koristeći samo tipkovnicu. Što funkcionira, što ne funkcionira? Zašto?
+
+## Sažetak
+
+Web koji je dostupan samo nekima nije pravi 'svjetski web'. Najbolji način da osigurate da stranice koje kreirate budu pristupačne jest da od početka uključite najbolje prakse pristupačnosti. Iako postoje dodatni koraci, uključivanje ovih vještina u vaš radni proces sada znači da će sve stranice koje kreirate biti pristupačne.
+
+---
+
+## 🚀 Izazov
+
+Uzmite ovaj HTML i prepišite ga kako bi bio što pristupačniji, koristeći strategije koje ste naučili.
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>
+      Example
+    </title>
+    <link href='../assets/style.css' rel='stylesheet' type='text/css'>
+  </head>
+  <body>
+    <div class="site-header">
+      <p class="site-title">Turtle Ipsum</p>
+      <p class="site-subtitle">The World's Premier Turtle Fan Club</p>
+    </div>
+    <div class="main-nav">
+      <p class="nav-header">Resources</p>
+      <div class="nav-list">
+        <p class="nav-item nav-item-bull"><a href="https://www.youtube.com/watch?v=CMNry4PE93Y">"I like turtles"</a></p>
+        <p class="nav-item nav-item-bull"><a href="https://en.wikipedia.org/wiki/Turtle">Basic Turtle Info</a></p>
+        <p class="nav-item nav-item-bull"><a href="https://en.wikipedia.org/wiki/Turtles_(chocolate)">Chocolate Turtles</a></p>
+      </div>
+    </div>
+    <div class="main-content">
+      <div>
+        <p class="page-title">Welcome to Turtle Ipsum. 
+            <a href="">Click here</a> to learn more.
+        </p>
+        <p class="article-text">
+          Turtle ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
+        </p>
+      </div>
+    </div>
+    <div class="footer">
+      <div class="footer-section">
+        <span class="button">Sign up for turtle news</span>
+      </div><div class="footer-section">
+        <p class="nav-header footer-title">
+          Internal Pages
+        </p>
+        <div class="nav-list">
+          <p class="nav-item nav-item-bull"><a href="../">Index</a></p>
+          <p class="nav-item nav-item-bull"><a href="../semantic">Semantic Example</a></p>
+        </div>
+      </div>
+      <p class="footer-copyright">&copy; 2016 Instrument</span>
+    </div>
+  </body>
+</html>
+```
+
+## Kviz nakon predavanja
+[Kviz nakon predavanja](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/6)
+
+## Pregled i samostalno učenje
+Mnoge vlade imaju zakone koji se odnose na zahtjeve za pristupačnost. Informirajte se o zakonima o pristupačnosti u svojoj zemlji. Što je obuhvaćeno, a što nije? Primjer je [ova vladina web stranica](https://accessibility.blog.gov.uk/).
+
+## Zadatak
+
+[Analizirajte nepristupačnu web stranicu](assignment.md)
+
+Zasluge: [Turtle Ipsum](https://github.com/Instrument/semantic-html-sample) od Instrument
+
+---
+
+**Odricanje od odgovornosti**:  
+Ovaj dokument je preveden pomoću AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za ključne informacije preporučuje se profesionalni prijevod od strane čovjeka. Ne preuzimamo odgovornost za bilo kakva nesporazuma ili pogrešna tumačenja koja proizlaze iz korištenja ovog prijevoda.
\ No newline at end of file
diff --git a/translations/hr/1-getting-started-lessons/3-accessibility/assignment.md b/translations/hr/1-getting-started-lessons/3-accessibility/assignment.md
new file mode 100644
index 00000000..2185b3da
--- /dev/null
+++ b/translations/hr/1-getting-started-lessons/3-accessibility/assignment.md
@@ -0,0 +1,29 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "a258597a194e77d4fd469b3cd976b29e",
+  "translation_date": "2025-08-27T23:05:02+00:00",
+  "source_file": "1-getting-started-lessons/3-accessibility/assignment.md",
+  "language_code": "hr"
+}
+-->
+# Analizirajte nepristupačnu stranicu
+
+## Upute
+
+Identificirajte web stranicu za koju smatrate da NIJE pristupačna i izradite akcijski plan za poboljšanje njezine pristupačnosti.  
+Vaš prvi zadatak bio bi identificirati ovu stranicu, detaljno opisati na koje načine smatrate da je nepristupačna bez korištenja analitičkih alata, a zatim je podvrgnuti analizi pomoću Lighthousea. Snimite PDF rezultata ove analize i izradite detaljan plan s najmanje deset točaka koje pokazuju kako se stranica može poboljšati.
+
+## Tablica za testiranje pristupačnosti stranice
+
+| Kriterij | Izvrsno | Zadovoljavajuće | Potrebno poboljšanje |
+|----------|---------|-----------------|----------------------|
+|          | nedostaje <10% potrebnog | nedostaje 20% potrebnog | nedostaje 50% potrebnog |
+
+----
+Izvješće studenta: uključuje odlomke o tome koliko je stranica nepristupačna, Lighthouse izvješće snimljeno u PDF-u, popis od deset točaka za poboljšanje, s detaljima o tome kako ih poboljšati
+
+---
+
+**Odricanje od odgovornosti**:  
+Ovaj dokument je preveden pomoću AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za kritične informacije preporučuje se profesionalni prijevod od strane ljudskog prevoditelja. Ne preuzimamo odgovornost za bilo kakva nesporazuma ili pogrešna tumačenja koja proizlaze iz korištenja ovog prijevoda.
\ No newline at end of file
diff --git a/translations/hr/1-getting-started-lessons/README.md b/translations/hr/1-getting-started-lessons/README.md
new file mode 100644
index 00000000..1431e4e7
--- /dev/null
+++ b/translations/hr/1-getting-started-lessons/README.md
@@ -0,0 +1,31 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "04683f4cfa46004179b0404b89a3065c",
+  "translation_date": "2025-08-27T22:58:41+00:00",
+  "source_file": "1-getting-started-lessons/README.md",
+  "language_code": "hr"
+}
+-->
+# Početak s web razvojem
+
+U ovom dijelu kurikuluma bit ćete upoznati s konceptima koji nisu vezani uz projekte, a važni su za postajanje profesionalnim programerom.
+
+### Teme
+
+1. [Uvod u programske jezike i alate zanata](1-intro-to-programming-languages/README.md)
+2. [Uvod u GitHub](2-github-basics/README.md)
+3. [Osnove pristupačnosti](3-accessibility/README.md)
+
+### Zasluge
+
+Uvod u programske jezike i alate zanata napisala je s ♥️ [Jasmine Greenaway](https://twitter.com/paladique)
+
+Uvod u GitHub napisala je s ♥️ [Floor Drees](https://twitter.com/floordrees)
+
+Osnove pristupačnosti napisao je s ♥️ [Christopher Harrison](https://twitter.com/geektrainer)
+
+---
+
+**Odricanje od odgovornosti**:  
+Ovaj dokument je preveden pomoću AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati mjerodavnim izvorom. Za ključne informacije preporučuje se profesionalni prijevod od strane stručnjaka. Ne preuzimamo odgovornost za nesporazume ili pogrešna tumačenja koja mogu proizaći iz korištenja ovog prijevoda.
\ No newline at end of file
diff --git a/translations/hr/2-js-basics/1-data-types/README.md b/translations/hr/2-js-basics/1-data-types/README.md
new file mode 100644
index 00000000..cf666bc2
--- /dev/null
+++ b/translations/hr/2-js-basics/1-data-types/README.md
@@ -0,0 +1,216 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "fc6aef8ecfdd5b0ad2afa6e6ba52bfde",
+  "translation_date": "2025-08-27T22:40:23+00:00",
+  "source_file": "2-js-basics/1-data-types/README.md",
+  "language_code": "hr"
+}
+-->
+# Osnove JavaScripta: Tipovi podataka
+
+![Osnove JavaScripta - Tipovi podataka](../../../../translated_images/webdev101-js-datatypes.4cc470179730702c756480d3ffa46507f746e5975ebf80f99fdaaf1cff09a7f4.hr.png)  
+> Sketchnote autorice [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Kviz prije predavanja  
+[Kviz prije predavanja](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/7)
+
+Ova lekcija pokriva osnove JavaScripta, jezika koji omogućuje interaktivnost na webu.
+
+> Ovu lekciju možete pratiti na [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-variables/?WT.mc_id=academic-77807-sagibbon)!
+
+[![Varijable](https://img.youtube.com/vi/JNIXfGiDWM8/0.jpg)](https://youtube.com/watch?v=JNIXfGiDWM8 "Varijable u JavaScriptu")
+
+[![Tipovi podataka u JavaScriptu](https://img.youtube.com/vi/AWfA95eLdq8/0.jpg)](https://youtube.com/watch?v=AWfA95eLdq8 "Tipovi podataka u JavaScriptu")
+
+> 🎥 Kliknite na slike iznad za videozapise o varijablama i tipovima podataka
+
+Krenimo s varijablama i tipovima podataka koji ih ispunjavaju!
+
+## Varijable
+
+Varijable pohranjuju vrijednosti koje se mogu koristiti i mijenjati unutar vašeg koda.
+
+Kreiranje i **deklariranje** varijable ima sljedeću sintaksu **[ključna riječ] [ime]**. Sastoji se od dva dijela:
+
+- **Ključna riječ**. Ključne riječi mogu biti `let` ili `var`.  
+
+✅ Ključna riječ `let` uvedena je u ES6 i daje varijabli tzv. _blok scope_. Preporučuje se koristiti `let` umjesto `var`. Blok scope ćemo detaljnije obraditi u budućim dijelovima.
+
+- **Ime varijable**, ovo je ime koje sami odaberete.
+
+### Zadatak - rad s varijablama
+
+1. **Deklarirajte varijablu**. Deklarirajmo varijablu koristeći ključnu riječ `let`:
+
+    ```javascript
+    let myVariable;
+    ```
+
+   `myVariable` je sada deklarirana koristeći ključnu riječ `let`. Trenutno nema vrijednost.
+
+1. **Dodijelite vrijednost**. Pohranite vrijednost u varijablu koristeći operator `=`, nakon kojeg slijedi očekivana vrijednost.
+
+    ```javascript
+    myVariable = 123;
+    ```
+
+   > Napomena: korištenje `=` u ovoj lekciji znači da koristimo "operator dodjele", koji se koristi za postavljanje vrijednosti varijabli. Ne označava jednakost.
+
+   `myVariable` je sada *inicijalizirana* s vrijednošću 123.
+
+1. **Refaktorirajte**. Zamijenite svoj kod sljedećom naredbom.
+
+    ```javascript
+    let myVariable = 123;
+    ```
+
+    Gornje se naziva _eksplicitna inicijalizacija_ kada se varijabla deklarira i istovremeno joj se dodijeli vrijednost.
+
+1. **Promijenite vrijednost varijable**. Promijenite vrijednost varijable na sljedeći način:
+
+   ```javascript
+   myVariable = 321;
+   ```
+
+   Nakon što je varijabla deklarirana, njezina se vrijednost može promijeniti u bilo kojem trenutku u vašem kodu pomoću operatora `=` i nove vrijednosti.
+
+   ✅ Isprobajte! Možete pisati JavaScript izravno u svom pregledniku. Otvorite prozor preglednika i idite na Alate za razvojne programere. U konzoli ćete pronaći prompt; upišite `let myVariable = 123`, pritisnite Enter, a zatim upišite `myVariable`. Što se događa? Napomena, više o ovim konceptima naučit ćete u sljedećim lekcijama.
+
+## Konstante
+
+Deklaracija i inicijalizacija konstante slijedi iste koncepte kao i varijabla, s izuzetkom ključne riječi `const`. Konstante se obično deklariraju velikim slovima.
+
+```javascript
+const MY_VARIABLE = 123;
+```
+
+Konstante su slične varijablama, s dvije iznimke:
+
+- **Moraju imati vrijednost**. Konstante moraju biti inicijalizirane, inače će se pojaviti greška prilikom pokretanja koda.
+- **Referenca se ne može promijeniti**. Referenca konstante ne može se promijeniti nakon inicijalizacije, inače će se pojaviti greška prilikom pokretanja koda. Pogledajmo dva primjera:
+   - **Jednostavna vrijednost**. Sljedeće NIJE dopušteno:
+   
+      ```javascript
+      const PI = 3;
+      PI = 4; // not allowed
+      ```
+ 
+   - **Referenca objekta je zaštićena**. Sljedeće NIJE dopušteno.
+   
+      ```javascript
+      const obj = { a: 3 };
+      obj = { b: 5 } // not allowed
+      ```
+
+    - **Vrijednost objekta nije zaštićena**. Sljedeće JE dopušteno:
+    
+      ```javascript
+      const obj = { a: 3 };
+      obj.a = 5;  // allowed
+      ```
+
+      Gore mijenjate vrijednost objekta, ali ne i samu referencu, što je dopušteno.
+
+   > Napomena, `const` znači da je referenca zaštićena od ponovnog dodjeljivanja. Međutim, vrijednost nije _nepromjenjiva_ i može se promijeniti, posebno ako je riječ o složenoj strukturi poput objekta.
+
+## Tipovi podataka
+
+Varijable mogu pohranjivati različite vrste vrijednosti, poput brojeva i teksta. Ove različite vrste vrijednosti poznate su kao **tipovi podataka**. Tipovi podataka važan su dio razvoja softvera jer pomažu programerima donijeti odluke o tome kako bi kod trebao biti napisan i kako bi softver trebao raditi. Nadalje, neki tipovi podataka imaju jedinstvene značajke koje pomažu transformirati ili izvući dodatne informacije iz vrijednosti.
+
+✅ Tipovi podataka također se nazivaju JavaScript primitivima podataka, jer su to najniži tipovi podataka koje jezik pruža. Postoji 7 primitivnih tipova podataka: string, number, bigint, boolean, undefined, null i symbol. Odvojite trenutak da vizualizirate što svaki od ovih primitiva može predstavljati. Što je `zebra`? A `0`? `true`?
+
+### Brojevi
+
+U prethodnom odjeljku, vrijednost `myVariable` bila je brojčani tip podataka.
+
+`let myVariable = 123;`
+
+Varijable mogu pohranjivati sve vrste brojeva, uključujući decimalne ili negativne brojeve. Brojevi se također mogu koristiti s aritmetičkim operatorima, koji su obrađeni u [sljedećem odjeljku](../../../../2-js-basics/1-data-types).
+
+### Aritmetički operatori
+
+Postoji nekoliko vrsta operatora za izvođenje aritmetičkih funkcija, a neki su navedeni ovdje:
+
+| Simbol | Opis                                                                     | Primjer                          |
+| ------ | ------------------------------------------------------------------------ | -------------------------------- |
+| `+`    | **Zbrajanje**: Računa zbroj dvaju brojeva                                | `1 + 2 //očekivani rezultat je 3`   |
+| `-`    | **Oduzimanje**: Računa razliku dvaju brojeva                             | `1 - 2 //očekivani rezultat je -1`  |
+| `*`    | **Množenje**: Računa produkt dvaju brojeva                               | `1 * 2 //očekivani rezultat je 2`   |
+| `/`    | **Dijeljenje**: Računa kvocijent dvaju brojeva                           | `1 / 2 //očekivani rezultat je 0.5` |
+| `%`    | **Ostatak**: Računa ostatak od dijeljenja dvaju brojeva                  | `1 % 2 //očekivani rezultat je 1`   |
+
+✅ Isprobajte! Isprobajte aritmetičku operaciju u konzoli vašeg preglednika. Iznenađuju li vas rezultati?
+
+### Stringovi
+
+Stringovi su skupovi znakova koji se nalaze između jednostrukih ili dvostrukih navodnika.
+
+- `'Ovo je string'`
+- `"Ovo je također string"`
+- `let myString = 'Ovo je vrijednost stringa pohranjena u varijabli';`
+
+Zapamtite koristiti navodnike kada pišete string, inače će JavaScript pretpostaviti da je to ime varijable.
+
+### Formatiranje stringova
+
+Stringovi su tekstualni i ponekad će zahtijevati formatiranje.
+
+Za **spajanje** dvaju ili više stringova, koristite operator `+`.
+
+```javascript
+let myString1 = "Hello";
+let myString2 = "World";
+
+myString1 + myString2 + "!"; //HelloWorld!
+myString1 + " " + myString2 + "!"; //Hello World!
+myString1 + ", " + myString2 + "!"; //Hello, World!
+
+```
+
+✅ Zašto `1 + 1 = 2` u JavaScriptu, ali `'1' + '1' = 11?` Razmislite o tome. Što je s `'1' + 1`?
+
+**Predlošci stringova** (template literals) su još jedan način formatiranja stringova, osim što se umjesto navodnika koristi backtick. Sve što nije običan tekst mora biti smješteno unutar zagrada `${ }`. Ovo uključuje sve varijable koje mogu biti stringovi.
+
+```javascript
+let myString1 = "Hello";
+let myString2 = "World";
+
+`${myString1} ${myString2}!` //Hello World!
+`${myString1}, ${myString2}!` //Hello, World!
+```
+
+Svoje ciljeve formatiranja možete postići bilo kojom metodom, ali predlošci stringova poštuju razmake i prijelome linija.
+
+✅ Kada biste koristili predložak stringa umjesto običnog stringa?
+
+### Booleovi
+
+Booleovi mogu imati samo dvije vrijednosti: `true` ili `false`. Booleovi mogu pomoći u donošenju odluka o tome koje linije koda bi se trebale izvršiti kada su ispunjeni određeni uvjeti. U mnogim slučajevima, [operatori](../../../../2-js-basics/1-data-types) pomažu u postavljanju vrijednosti Booleova, a često ćete primijetiti i pisati varijable koje se inicijaliziraju ili njihove vrijednosti ažuriraju pomoću operatora.
+
+- `let myTrueBool = true`
+- `let myFalseBool = false`
+
+✅ Varijabla se može smatrati 'istinitom' (truthy) ako se procijeni kao boolean `true`. Zanimljivo je da su u JavaScriptu [sve vrijednosti istinite osim ako nisu definirane kao lažne](https://developer.mozilla.org/docs/Glossary/Truthy).
+
+---
+
+## 🚀 Izazov
+
+JavaScript je poznat po svojim iznenađujućim načinima rukovanja tipovima podataka. Istražite malo o ovim 'zamkama'. Na primjer: osjetljivost na velika i mala slova može vas zavarati! Isprobajte ovo u svojoj konzoli: `let age = 1; let Age = 2; age == Age` (rezultat je `false` -- zašto?). Koje još zamke možete pronaći?
+
+## Kviz nakon predavanja  
+[Kviz nakon predavanja](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/8)
+
+## Pregled i samostalno učenje
+
+Pogledajte [ovaj popis JavaScript vježbi](https://css-tricks.com/snippets/javascript/) i isprobajte jednu. Što ste naučili?
+
+## Zadatak
+
+[Praksa s tipovima podataka](assignment.md)
+
+---
+
+**Odricanje od odgovornosti**:  
+Ovaj dokument je preveden pomoću AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za ključne informacije preporučuje se profesionalni prijevod od strane ljudskog prevoditelja. Ne preuzimamo odgovornost za bilo kakva nesporazuma ili pogrešna tumačenja koja proizlaze iz korištenja ovog prijevoda.
\ No newline at end of file
diff --git a/translations/hr/2-js-basics/1-data-types/assignment.md b/translations/hr/2-js-basics/1-data-types/assignment.md
new file mode 100644
index 00000000..0036a174
--- /dev/null
+++ b/translations/hr/2-js-basics/1-data-types/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "3869244ceda606c4969d8cdd82679867",
+  "translation_date": "2025-08-27T22:41:36+00:00",
+  "source_file": "2-js-basics/1-data-types/assignment.md",
+  "language_code": "hr"
+}
+-->
+# Vježba s vrstama podataka
+
+## Upute
+
+Zamislite da izrađujete košaricu za kupnju. Napišite dokumentaciju o vrstama podataka koje biste trebali koristiti za dovršavanje iskustva kupnje. Kako ste došli do svojih izbora?
+
+## Rubrika
+
+Kriterij | Izvrsno | Zadovoljavajuće | Potrebno poboljšanje
+--- | --- | --- | --- |
+||Šest vrsta podataka je navedeno i detaljno istraženo, dokumentirajući njihovu upotrebu|Četiri vrste podataka su istražene|Dvije vrste podataka su istražene|
+
+---
+
+**Odricanje od odgovornosti**:  
+Ovaj dokument je preveden pomoću AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za ključne informacije preporučuje se profesionalni prijevod od strane ljudskog prevoditelja. Ne preuzimamo odgovornost za bilo kakve nesporazume ili pogrešne interpretacije koje proizlaze iz korištenja ovog prijevoda.
\ No newline at end of file
diff --git a/translations/hr/2-js-basics/2-functions-methods/README.md b/translations/hr/2-js-basics/2-functions-methods/README.md
new file mode 100644
index 00000000..82a45c57
--- /dev/null
+++ b/translations/hr/2-js-basics/2-functions-methods/README.md
@@ -0,0 +1,210 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "b4612bbb9ace984f374fcc80e3e035ad",
+  "translation_date": "2025-08-27T22:36:35+00:00",
+  "source_file": "2-js-basics/2-functions-methods/README.md",
+  "language_code": "hr"
+}
+-->
+# Osnove JavaScripta: Metode i funkcije
+
+![Osnove JavaScripta - Funkcije](../../../../translated_images/webdev101-js-functions.be049c4726e94f8b7605c36330ac42eeb5cd8ed02bcdd60fdac778174d6cb865.hr.png)
+> Sketchnote autor [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Kviz prije predavanja
+[Kviz prije predavanja](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/9)
+
+Kada razmišljamo o pisanju koda, uvijek želimo osigurati da je naš kod čitljiv. Iako to zvuči kontraintuitivno, kod se čita mnogo više puta nego što se piše. Jedan od osnovnih alata u kutiji s alatima svakog programera za osiguranje održivog koda je **funkcija**.
+
+[![Metode i funkcije](https://img.youtube.com/vi/XgKsD6Zwvlc/0.jpg)](https://youtube.com/watch?v=XgKsD6Zwvlc "Metode i funkcije")
+
+> 🎥 Kliknite na sliku iznad za video o metodama i funkcijama.
+
+> Ovu lekciju možete preuzeti na [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-functions/?WT.mc_id=academic-77807-sagibbon)!
+
+## Funkcije
+
+U svojoj osnovi, funkcija je blok koda koji možemo izvršiti na zahtjev. Ovo je savršeno za scenarije u kojima trebamo obaviti isti zadatak više puta; umjesto da dupliciramo logiku na više mjesta (što bi otežalo ažuriranje kada za to dođe vrijeme), možemo je centralizirati na jednom mjestu i pozvati kad god nam je potrebna operacija - čak možete pozvati funkcije iz drugih funkcija!
+
+Jednako je važna i mogućnost imenovanja funkcije. Iako se to može činiti trivijalnim, ime pruža brz način dokumentiranja dijela koda. Možete to zamisliti kao naljepnicu na gumbu. Ako kliknem na gumb koji kaže "Zaustavi tajmer", znam da će zaustaviti rad sata.
+
+## Kreiranje i pozivanje funkcije
+
+Sintaksa za funkciju izgleda ovako:
+
+```javascript
+function nameOfFunction() { // function definition
+ // function definition/body
+}
+```
+
+Ako želim kreirati funkciju za prikaz pozdrava, mogla bi izgledati ovako:
+
+```javascript
+function displayGreeting() {
+  console.log('Hello, world!');
+}
+```
+
+Kad god želimo pozvati (ili izvršiti) našu funkciju, koristimo ime funkcije praćeno `()`. Vrijedi napomenuti da se naša funkcija može definirati prije ili nakon što odlučimo pozvati je; JavaScript kompajler će je pronaći za vas.
+
+```javascript
+// calling our function
+displayGreeting();
+```
+
+> **NOTE:** Postoji posebna vrsta funkcije poznata kao **metoda**, koju ste već koristili! Zapravo, vidjeli smo to u našem demo primjeru iznad kada smo koristili `console.log`. Ono što metodu razlikuje od funkcije je to što je metoda vezana uz objekt (`console` u našem primjeru), dok je funkcija slobodna. Mnogi programeri koriste ove pojmove naizmjenično.
+
+### Najbolje prakse za funkcije
+
+Postoji nekoliko najboljih praksi koje treba imati na umu prilikom kreiranja funkcija:
+
+- Kao i uvijek, koristite opisna imena kako biste znali što funkcija radi
+- Koristite **camelCasing** za kombiniranje riječi
+- Držite funkcije fokusirane na specifičan zadatak
+
+## Prosljeđivanje informacija funkciji
+
+Kako bi funkcija bila korisnija, često ćete joj željeti proslijediti informacije. Ako uzmemo u obzir naš primjer `displayGreeting` iznad, on će prikazati samo **Hello, world!**. Nije baš najkorisnija funkcija koju bismo mogli kreirati. Ako želimo učiniti funkciju malo fleksibilnijom, poput omogućavanja nekome da odredi ime osobe koju pozdravljamo, možemo dodati **parametar**. Parametar (ponekad nazvan i **argument**) je dodatna informacija koja se šalje funkciji.
+
+Parametri se navode u dijelu definicije unutar zagrada i odvojeni su zarezima, ovako:
+
+```javascript
+function name(param, param2, param3) {
+
+}
+```
+
+Možemo ažurirati naš `displayGreeting` da prihvati ime i prikaže ga.
+
+```javascript
+function displayGreeting(name) {
+  const message = `Hello, ${name}!`;
+  console.log(message);
+}
+```
+
+Kada želimo pozvati našu funkciju i proslijediti parametar, navodimo ga u zagradama.
+
+```javascript
+displayGreeting('Christopher');
+// displays "Hello, Christopher!" when run
+```
+
+## Zadane vrijednosti
+
+Možemo učiniti našu funkciju još fleksibilnijom dodavanjem više parametara. Ali što ako ne želimo zahtijevati da se svaka vrijednost navede? Ostajući pri našem primjeru pozdrava, mogli bismo ostaviti ime kao obavezno (trebamo znati koga pozdravljamo), ali želimo omogućiti da se sam pozdrav prilagodi po želji. Ako netko ne želi prilagoditi pozdrav, možemo pružiti zadanu vrijednost. Da bismo postavili zadanu vrijednost za parametar, postavljamo je na isti način kao što postavljamo vrijednost za varijablu - `parameterName = 'defaultValue'`. Pogledajmo cijeli primjer:
+
+```javascript
+function displayGreeting(name, salutation='Hello') {
+  console.log(`${salutation}, ${name}`);
+}
+```
+
+Kada pozivamo funkciju, tada možemo odlučiti želimo li postaviti vrijednost za `salutation`.
+
+```javascript
+displayGreeting('Christopher');
+// displays "Hello, Christopher"
+
+displayGreeting('Christopher', 'Hi');
+// displays "Hi, Christopher"
+```
+
+## Vrijednosti povrata
+
+Do sada funkcija koju smo izgradili uvijek ispisuje na [konzolu](https://developer.mozilla.org/docs/Web/API/console). Ponekad to može biti upravo ono što tražimo, posebno kada kreiramo funkcije koje će pozivati druge usluge. Ali što ako želim kreirati pomoćnu funkciju za izvođenje izračuna i vratiti vrijednost kako bih je mogao koristiti negdje drugdje?
+
+To možemo učiniti korištenjem **vrijednosti povrata**. Vrijednost povrata vraća funkcija i može se pohraniti u varijablu na isti način kao što bismo mogli pohraniti literalnu vrijednost poput stringa ili broja.
+
+Ako funkcija vraća nešto, tada se koristi ključna riječ `return`. Ključna riječ `return` očekuje vrijednost ili referencu onoga što se vraća, ovako:
+
+```javascript
+return myVariable;
+```  
+
+Mogli bismo kreirati funkciju za kreiranje poruke pozdrava i vratiti vrijednost pozivatelju.
+
+```javascript
+function createGreetingMessage(name) {
+  const message = `Hello, ${name}`;
+  return message;
+}
+```
+
+Kada pozivamo ovu funkciju, pohranit ćemo vrijednost u varijablu. To je vrlo slično načinu na koji bismo postavili varijablu na statičnu vrijednost (poput `const name = 'Christopher'`).
+
+```javascript
+const greetingMessage = createGreetingMessage('Christopher');
+```
+
+## Funkcije kao parametri za funkcije
+
+Kako napredujete u svojoj programerskoj karijeri, naići ćete na funkcije koje prihvaćaju funkcije kao parametre. Ovaj zgodan trik često se koristi kada ne znamo kada će se nešto dogoditi ili završiti, ali znamo da trebamo izvršiti operaciju kao odgovor.
+
+Na primjer, razmislite o [setTimeout](https://developer.mozilla.org/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout), koji započinje tajmer i izvršava kod kada završi. Moramo mu reći koji kod želimo izvršiti. Zvuči kao savršen posao za funkciju!
+
+Ako pokrenete kod ispod, nakon 3 sekunde vidjet ćete poruku **3 sekunde su prošle**.
+
+```javascript
+function displayDone() {
+  console.log('3 seconds has elapsed');
+}
+// timer value is in milliseconds
+setTimeout(displayDone, 3000);
+```
+
+### Anonimne funkcije
+
+Pogledajmo još jednom što smo izgradili. Kreiramo funkciju s imenom koja će se koristiti samo jednom. Kako naša aplikacija postaje složenija, možemo vidjeti da kreiramo puno funkcija koje će se pozvati samo jednom. To nije idealno. Kako se ispostavlja, ne moramo uvijek dati ime!
+
+Kada prosljeđujemo funkciju kao parametar, možemo zaobići kreiranje unaprijed i umjesto toga je izgraditi kao dio parametra. Koristimo istu ključnu riječ `function`, ali je gradimo kao parametar.
+
+Prepišimo kod iznad kako bismo koristili anonimnu funkciju:
+
+```javascript
+setTimeout(function() {
+  console.log('3 seconds has elapsed');
+}, 3000);
+```
+
+Ako pokrenete naš novi kod, primijetit ćete da dobivamo iste rezultate. Kreirali smo funkciju, ali nismo morali dati ime!
+
+### Fat arrow funkcije
+
+Jedan od prečaca uobičajenih u mnogim programskim jezicima (uključujući JavaScript) je mogućnost korištenja tzv. **arrow** ili **fat arrow** funkcije. Koristi poseban indikator `=>`, koji izgleda kao strelica - otuda i naziv! Korištenjem `=>`, možemo preskočiti ključnu riječ `function`.
+
+Prepišimo naš kod još jednom kako bismo koristili fat arrow funkciju:
+
+```javascript
+setTimeout(() => {
+  console.log('3 seconds has elapsed');
+}, 3000);
+```
+
+### Kada koristiti koju strategiju
+
+Sada ste vidjeli da imamo tri načina za prosljeđivanje funkcije kao parametra i možda se pitate kada koristiti koji. Ako znate da ćete funkciju koristiti više puta, kreirajte je na uobičajen način. Ako ćete je koristiti samo na jednom mjestu, općenito je najbolje koristiti anonimnu funkciju. Hoćete li koristiti fat arrow funkciju ili tradicionalniju sintaksu `function` ovisi o vama, ali primijetit ćete da većina modernih programera preferira `=>`.
+
+---
+
+## 🚀 Izazov
+
+Možete li u jednoj rečenici objasniti razliku između funkcija i metoda? Pokušajte!
+
+## Kviz nakon predavanja
+[Kviz nakon predavanja](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/10)
+
+## Pregled i samostalno učenje
+
+Vrijedi [pročitati malo više o arrow funkcijama](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions), jer se sve više koriste u kodnim bazama. Vježbajte pisanje funkcije, a zatim je prepišite koristeći ovu sintaksu.
+
+## Zadatak
+
+[Zabava s funkcijama](assignment.md)
+
+---
+
+**Odricanje od odgovornosti**:  
+Ovaj dokument je preveden pomoću AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za ključne informacije preporučuje se profesionalni prijevod od strane čovjeka. Ne preuzimamo odgovornost za bilo kakve nesporazume ili pogrešne interpretacije koje proizlaze iz korištenja ovog prijevoda.
\ No newline at end of file
diff --git a/translations/hr/2-js-basics/2-functions-methods/assignment.md b/translations/hr/2-js-basics/2-functions-methods/assignment.md
new file mode 100644
index 00000000..1412bfd5
--- /dev/null
+++ b/translations/hr/2-js-basics/2-functions-methods/assignment.md
@@ -0,0 +1,27 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "8973f96157680a13e9446e4bb540ee57",
+  "translation_date": "2025-08-27T22:37:38+00:00",
+  "source_file": "2-js-basics/2-functions-methods/assignment.md",
+  "language_code": "hr"
+}
+-->
+# Zabava s funkcijama
+
+## Upute
+
+Kreirajte različite funkcije, uključujući funkcije koje vraćaju vrijednost i one koje ne vraćaju ništa.
+
+Pokušajte napraviti funkciju koja ima kombinaciju parametara i parametara s zadanim vrijednostima.
+
+## Rubrika
+
+| Kriterij | Izvrsno                                                                               | Zadovoljavajuće                                                  | Potrebno poboljšanje |
+| -------- | ------------------------------------------------------------------------------------- | ---------------------------------------------------------------- | --------------------- |
+|          | Rješenje uključuje dvije ili više dobro izvedenih funkcija s raznolikim parametrima  | Rješenje uključuje jednu funkciju s nekoliko parametara          | Rješenje sadrži greške |
+
+---
+
+**Odricanje od odgovornosti**:  
+Ovaj dokument je preveden pomoću AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za ključne informacije preporučuje se profesionalni prijevod od strane ljudskog prevoditelja. Ne preuzimamo odgovornost za bilo kakve nesporazume ili pogrešne interpretacije koje proizlaze iz korištenja ovog prijevoda.
\ No newline at end of file
diff --git a/translations/hr/2-js-basics/3-making-decisions/README.md b/translations/hr/2-js-basics/3-making-decisions/README.md
new file mode 100644
index 00000000..0e3a0a8e
--- /dev/null
+++ b/translations/hr/2-js-basics/3-making-decisions/README.md
@@ -0,0 +1,232 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "888609c48329c280ca2477d2df40f2e5",
+  "translation_date": "2025-08-27T22:38:13+00:00",
+  "source_file": "2-js-basics/3-making-decisions/README.md",
+  "language_code": "hr"
+}
+-->
+# Osnove JavaScripta: Donošenje odluka
+
+![Osnove JavaScripta - Donošenje odluka](../../../../translated_images/webdev101-js-decisions.69e1b20f272dd1f0b1cb2f8adaff3ed2a77c4f91db96d8a0594132a353fa189a.hr.png)
+
+> Sketchnote autor [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Kviz prije predavanja
+
+[Kviz prije predavanja](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/11)
+
+Donošenje odluka i kontroliranje redoslijeda izvršavanja koda čini vaš kod ponovno upotrebljivim i robusnim. Ovaj dio pokriva sintaksu za kontrolu toka podataka u JavaScriptu i njegovu važnost kada se koristi s Boolean tipovima podataka.
+
+[![Donošenje odluka](https://img.youtube.com/vi/SxTp8j-fMMY/0.jpg)](https://youtube.com/watch?v=SxTp8j-fMMY "Donošenje odluka")
+
+> 🎥 Kliknite na sliku iznad za video o donošenju odluka.
+
+> Ovu lekciju možete pratiti na [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-if-else/?WT.mc_id=academic-77807-sagibbon)!
+
+## Kratki podsjetnik o Booleanima
+
+Booleani mogu imati samo dvije vrijednosti: `true` ili `false`. Booleani pomažu u donošenju odluka o tome koje linije koda treba izvršiti kada su određeni uvjeti ispunjeni.
+
+Postavite svoj Boolean na true ili false ovako:
+
+`let myTrueBool = true`  
+`let myFalseBool = false`
+
+✅ Booleani su dobili ime po engleskom matematičaru, filozofu i logičaru Georgeu Booleu (1815–1864).
+
+## Operatori usporedbe i Booleani
+
+Operatori se koriste za procjenu uvjeta usporedbom koja će stvoriti Boolean vrijednost. Slijedi popis često korištenih operatora.
+
+| Simbol | Opis                                                                                                                                                          | Primjer            |
+| ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ |
+| `<`    | **Manje od**: Uspoređuje dvije vrijednosti i vraća Boolean vrijednost `true` ako je vrijednost na lijevoj strani manja od vrijednosti na desnoj               | `5 < 6 // true`    |
+| `<=`   | **Manje ili jednako**: Uspoređuje dvije vrijednosti i vraća Boolean vrijednost `true` ako je vrijednost na lijevoj strani manja ili jednaka desnoj            | `5 <= 6 // true`   |
+| `>`    | **Veće od**: Uspoređuje dvije vrijednosti i vraća Boolean vrijednost `true` ako je vrijednost na lijevoj strani veća od vrijednosti na desnoj                | `5 > 6 // false`   |
+| `>=`   | **Veće ili jednako**: Uspoređuje dvije vrijednosti i vraća Boolean vrijednost `true` ako je vrijednost na lijevoj strani veća ili jednaka desnoj             | `5 >= 6 // false`  |
+| `===`  | **Stroga jednakost**: Uspoređuje dvije vrijednosti i vraća Boolean vrijednost `true` ako su vrijednosti na lijevoj i desnoj strani jednake I istog tipa podataka | `5 === 6 // false` |
+| `!==`  | **Nejednakost**: Uspoređuje dvije vrijednosti i vraća suprotnu Boolean vrijednost od one koju bi vratio operator stroge jednakosti                           | `5 !== 6 // true`  |
+
+✅ Provjerite svoje znanje pisanjem nekoliko usporedbi u konzoli vašeg preglednika. Iznenađuje li vas neki vraćeni podatak?
+
+## If naredba
+
+If naredba će izvršiti kod unutar svojih blokova ako je uvjet istinit.
+
+```javascript
+if (condition) {
+  //Condition is true. Code in this block will run.
+}
+```
+
+Logički operatori često se koriste za formiranje uvjeta.
+
+```javascript
+let currentMoney;
+let laptopPrice;
+
+if (currentMoney >= laptopPrice) {
+  //Condition is true. Code in this block will run.
+  console.log("Getting a new laptop!");
+}
+```
+
+## If..Else naredba
+
+`else` naredba će izvršiti kod unutar svojih blokova kada je uvjet neistinit. Opcionalna je uz `if` naredbu.
+
+```javascript
+let currentMoney;
+let laptopPrice;
+
+if (currentMoney >= laptopPrice) {
+  //Condition is true. Code in this block will run.
+  console.log("Getting a new laptop!");
+} else {
+  //Condition is false. Code in this block will run.
+  console.log("Can't afford a new laptop, yet!");
+}
+```
+
+✅ Testirajte svoje razumijevanje ovog koda i sljedećeg koda izvršavanjem u konzoli preglednika. Promijenite vrijednosti varijabli `currentMoney` i `laptopPrice` kako biste promijenili vraćeni `console.log()`.
+
+## Switch naredba
+
+`switch` naredba koristi se za izvršavanje različitih radnji na temelju različitih uvjeta. Koristite `switch` naredbu za odabir jednog od mnogih blokova koda koji će se izvršiti.
+
+```javascript
+switch (expression) {
+  case x:
+    // code block
+    break;
+  case y:
+    // code block
+    break;
+  default:
+  // code block
+}
+```
+
+```javascript
+// program using switch statement
+let a = 2;
+
+switch (a) {
+  case 1:
+    a = "one";
+    break;
+  case 2:
+    a = "two";
+    break;
+  default:
+    a = "not found";
+    break;
+}
+console.log(`The value is ${a}`);
+```
+
+✅ Testirajte svoje razumijevanje ovog koda i sljedećeg koda izvršavanjem u konzoli preglednika. Promijenite vrijednosti varijable `a` kako biste promijenili vraćeni `console.log()`.
+
+## Logički operatori i Booleani
+
+Odluke mogu zahtijevati više od jedne usporedbe i mogu se povezati logičkim operatorima kako bi se proizvela Boolean vrijednost.
+
+| Simbol | Opis                                                                                     | Primjer                                                                 |
+| ------ | ----------------------------------------------------------------------------------------- | ----------------------------------------------------------------------- |
+| `&&`   | **Logički AND**: Uspoređuje dva Boolean izraza. Vraća true **samo** ako su obje strane istinite | `(5 > 6) && (5 < 6 ) //Jedna strana je neistina, druga istina. Vraća false` |
+| `\|\|` | **Logički OR**: Uspoređuje dva Boolean izraza. Vraća true ako je barem jedna strana istinita | `(5 > 6) \|\| (5 < 6) //Jedna strana je neistina, druga istina. Vraća true` |
+| `!`    | **Logički NOT**: Vraća suprotnu vrijednost Boolean izraza                                 | `!(5 > 6) // 5 nije veće od 6, ali "!" će vratiti true`                 |
+
+## Uvjeti i odluke s logičkim operatorima
+
+Logički operatori mogu se koristiti za formiranje uvjeta u if..else naredbama.
+
+```javascript
+let currentMoney;
+let laptopPrice;
+let laptopDiscountPrice = laptopPrice - laptopPrice * 0.2; //Laptop price at 20 percent off
+
+if (currentMoney >= laptopPrice || currentMoney >= laptopDiscountPrice) {
+  //Condition is true. Code in this block will run.
+  console.log("Getting a new laptop!");
+} else {
+  //Condition is true. Code in this block will run.
+  console.log("Can't afford a new laptop, yet!");
+}
+```
+
+### Operator negacije
+
+Do sada ste vidjeli kako možete koristiti `if...else` naredbu za stvaranje uvjetne logike. Sve što ide u `if` mora se procijeniti kao true/false. Korištenjem operatora `!` možete _negirati_ izraz. To bi izgledalo ovako:
+
+```javascript
+if (!condition) {
+  // runs if condition is false
+} else {
+  // runs if condition is true
+}
+```
+
+### Ternarni izrazi
+
+`if...else` nije jedini način izražavanja logike odluke. Također možete koristiti nešto što se zove ternarni operator. Sintaksa za njega izgleda ovako:
+
+```javascript
+let variable = condition ? <return this if true> : <return this if false>
+```
+
+Ispod je konkretniji primjer:
+
+```javascript
+let firstNumber = 20;
+let secondNumber = 10;
+let biggestNumber = firstNumber > secondNumber ? firstNumber : secondNumber;
+```
+
+✅ Odvojite trenutak da nekoliko puta pročitate ovaj kod. Razumijete li kako ovi operatori funkcioniraju?
+
+Gore navedeno kaže:
+
+- ako je `firstNumber` veći od `secondNumber`
+- tada dodijelite `firstNumber` varijabli `biggestNumber`
+- inače dodijelite `secondNumber`.
+
+Ternarni izraz je samo kompaktan način pisanja koda ispod:
+
+```javascript
+let biggestNumber;
+if (firstNumber > secondNumber) {
+  biggestNumber = firstNumber;
+} else {
+  biggestNumber = secondNumber;
+}
+```
+
+---
+
+## 🚀 Izazov
+
+Napravite program koji je prvo napisan s logičkim operatorima, a zatim ga prepišite koristeći ternarni izraz. Koja vam sintaksa više odgovara?
+
+---
+
+## Kviz nakon predavanja
+
+[Kviz nakon predavanja](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/12)
+
+## Pregled i samostalno učenje
+
+Pročitajte više o mnogim operatorima dostupnim korisniku [na MDN](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators).
+
+Prođite kroz sjajan [operator lookup](https://joshwcomeau.com/operator-lookup/) Josha Comeaua!
+
+## Zadatak
+
+[Operatori](assignment.md)
+
+---
+
+**Odricanje od odgovornosti**:  
+Ovaj dokument je preveden pomoću AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za ključne informacije preporučuje se profesionalni prijevod od strane ljudskog prevoditelja. Ne preuzimamo odgovornost za bilo kakva nesporazuma ili pogrešna tumačenja koja proizlaze iz korištenja ovog prijevoda.
\ No newline at end of file
diff --git a/translations/hr/2-js-basics/3-making-decisions/assignment.md b/translations/hr/2-js-basics/3-making-decisions/assignment.md
new file mode 100644
index 00000000..e7136235
--- /dev/null
+++ b/translations/hr/2-js-basics/3-making-decisions/assignment.md
@@ -0,0 +1,54 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "bf62b82567e6f9bdf4abda9ae0ccb64a",
+  "translation_date": "2025-08-27T22:39:00+00:00",
+  "source_file": "2-js-basics/3-making-decisions/assignment.md",
+  "language_code": "hr"
+}
+-->
+# Operatori
+
+## Upute
+
+Igrajte se s operatorima. Evo prijedloga za program koji možete implementirati:
+
+Imate skup studenata iz dva različita sustava ocjenjivanja.
+
+### Prvi sustav ocjenjivanja
+
+Jedan sustav ocjenjivanja definira ocjene od 1 do 5, gdje ocjena 3 i više znači da ste položili kolegij.
+
+### Drugi sustav ocjenjivanja
+
+Drugi sustav ocjenjivanja ima sljedeće ocjene: `A, A-, B, B-, C, C-`, gdje je `A` najbolja ocjena, a `C` najniža ocjena za prolaz.
+
+### Zadatak
+
+S obzirom na sljedeći niz `allStudents` koji predstavlja sve studente i njihove ocjene, konstruirajte novi niz `studentsWhoPass` koji sadrži sve studente koji su položili.
+
+> TIP, koristite for-petlju, if...else i operatore usporedbe:
+
+```javascript
+let allStudents = [
+  'A',
+  'B-',
+  1,
+  4,
+  5,
+  2
+]
+
+let studentsWhoPass = [];
+```
+
+## Rubrika
+
+| Kriterij | Izvrsno                        | Zadovoljavajuće               | Potrebno poboljšanje            |
+| -------- | ------------------------------ | ----------------------------- | ------------------------------- |
+|          | Predstavljen je kompletan zadatak | Predstavljen je djelomičan zadatak | Predstavljen je zadatak s greškama |
+
+---
+
+**Odricanje od odgovornosti**:  
+Ovaj dokument je preveden pomoću AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za ključne informacije preporučuje se profesionalni prijevod od strane čovjeka. Ne preuzimamo odgovornost za bilo kakva nesporazuma ili pogrešna tumačenja koja proizlaze iz korištenja ovog prijevoda.
\ No newline at end of file
diff --git a/translations/hr/2-js-basics/4-arrays-loops/README.md b/translations/hr/2-js-basics/4-arrays-loops/README.md
new file mode 100644
index 00000000..8b061de9
--- /dev/null
+++ b/translations/hr/2-js-basics/4-arrays-loops/README.md
@@ -0,0 +1,147 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "3f7f87871312cf6cc12662da7d973182",
+  "translation_date": "2025-08-27T22:42:06+00:00",
+  "source_file": "2-js-basics/4-arrays-loops/README.md",
+  "language_code": "hr"
+}
+-->
+# Osnove JavaScripta: Nizovi i Petlje
+
+![Osnove JavaScripta - Nizovi](../../../../translated_images/webdev101-js-arrays.439d7528b8a294558d0e4302e448d193f8ad7495cc407539cc81f1afe904b470.hr.png)  
+> Sketchnote autorice [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Kviz prije predavanja  
+[Kviz prije predavanja](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/13)
+
+Ova lekcija pokriva osnove JavaScripta, jezika koji omogućuje interaktivnost na webu. U ovoj lekciji naučit ćete o nizovima i petljama, koji se koriste za manipulaciju podacima.
+
+[![Nizovi](https://img.youtube.com/vi/1U4qTyq02Xw/0.jpg)](https://youtube.com/watch?v=1U4qTyq02Xw "Nizovi")
+
+[![Petlje](https://img.youtube.com/vi/Eeh7pxtTZ3k/0.jpg)](https://www.youtube.com/watch?v=Eeh7pxtTZ3k "Petlje")
+
+> 🎥 Kliknite na slike iznad za videozapise o nizovima i petljama.
+
+> Ovu lekciju možete pronaći na [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-arrays/?WT.mc_id=academic-77807-sagibbon)!
+
+## Nizovi
+
+Rad s podacima čest je zadatak u bilo kojem jeziku, a taj zadatak postaje puno lakši kada su podaci organizirani u strukturalnom formatu, poput nizova. Uz nizove, podaci se pohranjuju u strukturi sličnoj popisu. Jedna od glavnih prednosti nizova je ta što možete pohraniti različite vrste podataka u jednom nizu.
+
+✅ Nizovi su svuda oko nas! Možete li smisliti primjer niza iz stvarnog života, poput niza solarnih panela?
+
+Sintaksa za niz je par uglatih zagrada.
+
+```javascript
+let myArray = [];
+```
+
+Ovo je prazan niz, ali nizovi se mogu deklarirati već popunjeni podacima. Višestruke vrijednosti u nizu odvajaju se zarezom.
+
+```javascript
+let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
+```
+
+Vrijednosti u nizu dobivaju jedinstvenu vrijednost zvanu **indeks**, cijeli broj koji se dodjeljuje na temelju udaljenosti od početka niza. U gornjem primjeru, string vrijednost "Chocolate" ima indeks 0, a indeks "Rocky Road" je 4. Koristite indeks s uglatim zagradama za dohvaćanje, promjenu ili umetanje vrijednosti niza.
+
+✅ Iznenađuje li vas što nizovi počinju s indeksom nula? U nekim programskim jezicima indeksi počinju od 1. Postoji zanimljiva povijest o tome, koju možete [pročitati na Wikipediji](https://en.wikipedia.org/wiki/Zero-based_numbering).
+
+```javascript
+let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
+iceCreamFlavors[2]; //"Vanilla"
+```
+
+Indeks možete iskoristiti za promjenu vrijednosti, ovako:
+
+```javascript
+iceCreamFlavors[4] = "Butter Pecan"; //Changed "Rocky Road" to "Butter Pecan"
+```
+
+I možete umetnuti novu vrijednost na određeni indeks ovako:
+
+```javascript
+iceCreamFlavors[5] = "Cookie Dough"; //Added "Cookie Dough"
+```
+
+✅ Češći način dodavanja vrijednosti u niz je korištenje operatora niza poput array.push()
+
+Da biste saznali koliko stavki ima u nizu, koristite svojstvo `length`.
+
+```javascript
+let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
+iceCreamFlavors.length; //5
+```
+
+✅ Isprobajte sami! Koristite konzolu preglednika za stvaranje i manipulaciju nizom po vlastitom izboru.
+
+## Petlje
+
+Petlje nam omogućuju izvođenje ponavljajućih ili **iterativnih** zadataka i mogu uštedjeti puno vremena i koda. Svaka iteracija može se razlikovati u svojim varijablama, vrijednostima i uvjetima. Postoje različite vrste petlji u JavaScriptu, a sve imaju male razlike, ali u suštini rade isto: prolaze kroz podatke.
+
+### For petlja
+
+`for` petlja zahtijeva 3 dijela za iteraciju:
+- `counter` Varijabla koja se obično inicijalizira brojem koji broji broj iteracija
+- `condition` Izraz koji koristi operatore usporedbe kako bi zaustavio petlju kada postane `false`
+- `iteration-expression` Izvodi se na kraju svake iteracije, obično se koristi za promjenu vrijednosti brojača
+
+```javascript
+// Counting up to 10
+for (let i = 0; i < 10; i++) {
+  console.log(i);
+}
+```
+
+✅ Pokrenite ovaj kod u konzoli preglednika. Što se događa kada napravite male promjene u brojaču, uvjetu ili izrazu iteracije? Možete li ga natjerati da radi unatrag, stvarajući odbrojavanje?
+
+### While petlja
+
+Za razliku od sintakse `for` petlje, `while` petlje zahtijevaju samo uvjet koji će zaustaviti petlju kada uvjet postane `false`. Uvjeti u petljama obično ovise o drugim vrijednostima poput brojača i moraju se upravljati tijekom petlje. Početne vrijednosti za brojače moraju se stvoriti izvan petlje, a svi izrazi za ispunjavanje uvjeta, uključujući promjenu brojača, moraju se održavati unutar petlje.
+
+```javascript
+//Counting up to 10
+let i = 0;
+while (i < 10) {
+ console.log(i);
+ i++;
+}
+```
+
+✅ Zašto biste odabrali for petlju umjesto while petlje? 17 tisuća korisnika imalo je isto pitanje na StackOverflowu, a neka od mišljenja [mogla bi vam biti zanimljiva](https://stackoverflow.com/questions/39969145/while-loops-vs-for-loops-in-javascript).
+
+## Petlje i Nizovi
+
+Nizovi se često koriste s petljama jer većina uvjeta zahtijeva duljinu niza za zaustavljanje petlje, a indeks također može biti vrijednost brojača.
+
+```javascript
+let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
+
+for (let i = 0; i < iceCreamFlavors.length; i++) {
+  console.log(iceCreamFlavors[i]);
+} //Ends when all flavors are printed
+```
+
+✅ Eksperimentirajte s prolaskom kroz niz po vlastitom izboru u konzoli preglednika.
+
+---
+
+## 🚀 Izazov
+
+Postoje i drugi načini prolaska kroz nizove osim for i while petlji. Postoje [forEach](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach), [for-of](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/for...of) i [map](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/map). Prepišite svoju petlju kroz niz koristeći jednu od ovih tehnika.
+
+## Kviz nakon predavanja  
+[Kviz nakon predavanja](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/14)
+
+## Pregled i Samostalno Učenje
+
+Nizovi u JavaScriptu imaju mnogo metoda koje su izuzetno korisne za manipulaciju podacima. [Pročitajte o tim metodama](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array) i isprobajte neke od njih (poput push, pop, slice i splice) na nizu po vlastitom izboru.
+
+## Zadatak
+
+[Prođite kroz niz](assignment.md)
+
+---
+
+**Odricanje od odgovornosti**:  
+Ovaj dokument je preveden pomoću AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za ključne informacije preporučuje se profesionalni prijevod od strane čovjeka. Ne preuzimamo odgovornost za bilo kakva nesporazuma ili pogrešna tumačenja koja proizlaze iz korištenja ovog prijevoda.
\ No newline at end of file
diff --git a/translations/hr/2-js-basics/4-arrays-loops/assignment.md b/translations/hr/2-js-basics/4-arrays-loops/assignment.md
new file mode 100644
index 00000000..f3a8fe6c
--- /dev/null
+++ b/translations/hr/2-js-basics/4-arrays-loops/assignment.md
@@ -0,0 +1,27 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "8b2381170bd0fd2870f5889bb8620f02",
+  "translation_date": "2025-08-27T22:42:56+00:00",
+  "source_file": "2-js-basics/4-arrays-loops/assignment.md",
+  "language_code": "hr"
+}
+-->
+# Prolazak kroz niz
+
+## Upute
+
+Izradite program koji ispisuje svaki 3. broj između 1-20 na konzolu.
+
+> TIP: koristite for-petlju i prilagodite izraz za iteraciju
+
+## Rubrika
+
+| Kriterij | Izvrsno                                | Zadovoljavajuće          | Potrebno poboljšanje           |
+| -------- | -------------------------------------- | ------------------------ | ------------------------------ |
+|          | Program ispravno radi i komentiran je  | Program nije komentiran  | Program je nepotpun ili ima greške |
+
+---
+
+**Odricanje od odgovornosti**:  
+Ovaj dokument je preveden pomoću AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za kritične informacije preporučuje se profesionalni prijevod od strane ljudskog prevoditelja. Ne preuzimamo odgovornost za bilo kakva nesporazuma ili pogrešna tumačenja koja proizlaze iz korištenja ovog prijevoda.
\ No newline at end of file
diff --git a/translations/hr/2-js-basics/README.md b/translations/hr/2-js-basics/README.md
new file mode 100644
index 00000000..bb7b0c8b
--- /dev/null
+++ b/translations/hr/2-js-basics/README.md
@@ -0,0 +1,28 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "cc9e70a2f096c67389c8acff1521fc27",
+  "translation_date": "2025-08-27T22:35:53+00:00",
+  "source_file": "2-js-basics/README.md",
+  "language_code": "hr"
+}
+-->
+# Uvod u JavaScript
+
+JavaScript je jezik weba. U ovim četirima lekcijama naučit ćete njegove osnove.
+
+### Teme
+
+1. [Varijable i Tipovi Podataka](1-data-types/README.md)
+2. [Funkcije i Metode](2-functions-methods/README.md)
+3. [Donošenje Odluka s JavaScriptom](3-making-decisions/README.md)
+4. [Nizovi i Petlje](4-arrays-loops/README.md)
+
+### Zasluge
+
+Ove lekcije napisane su s ♥️ od strane [Jasmine Greenaway](https://twitter.com/paladique), [Christopher Harrison](https://twitter.com/geektrainer) i [Chris Noring](https://twitter.com/chris_noring)
+
+---
+
+**Odricanje od odgovornosti**:  
+Ovaj dokument je preveden pomoću AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za ključne informacije preporučuje se profesionalni prijevod od strane čovjeka. Ne preuzimamo odgovornost za bilo kakva nesporazuma ili pogrešna tumačenja koja proizlaze iz korištenja ovog prijevoda.
\ No newline at end of file
diff --git a/translations/hr/3-terrarium/1-intro-to-html/README.md b/translations/hr/3-terrarium/1-intro-to-html/README.md
new file mode 100644
index 00000000..a1d5e2e3
--- /dev/null
+++ b/translations/hr/3-terrarium/1-intro-to-html/README.md
@@ -0,0 +1,249 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "46a0639e719b9cf1dfd062aa24cad639",
+  "translation_date": "2025-08-27T22:45:42+00:00",
+  "source_file": "3-terrarium/1-intro-to-html/README.md",
+  "language_code": "hr"
+}
+-->
+# Projekt Terarij, 1. dio: Uvod u HTML
+
+![Uvod u HTML](../../../../translated_images/webdev101-html.4389c2067af68e98280c1bde52b6c6269f399eaae3659b7c846018d8a7b0bbd9.hr.png)  
+> Sketchnote autorice [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Kviz prije predavanja
+
+[Kviz prije predavanja](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/15)
+
+> Pogledajte video
+
+> 
+> [![Video o osnovama Gita i GitHuba](https://img.youtube.com/vi/1TvxJKBzhyQ/0.jpg)](https://www.youtube.com/watch?v=1TvxJKBzhyQ)
+
+### Uvod
+
+HTML, ili HyperText Markup Language, je 'kostur' weba. Ako CSS 'odijeva' vaš HTML, a JavaScript ga oživljava, HTML je tijelo vaše web aplikacije. Sintaksa HTML-a čak odražava tu ideju, jer uključuje oznake "head", "body" i "footer".
+
+U ovoj lekciji koristit ćemo HTML za postavljanje 'kostura' sučelja našeg virtualnog terarija. Imat će naslov i tri stupca: desni i lijevi stupac gdje će se nalaziti biljke koje se mogu povlačiti, te središnje područje koje će predstavljati stakleni terarij. Do kraja ove lekcije moći ćete vidjeti biljke u stupcima, ali sučelje će izgledati pomalo čudno; ne brinite, u sljedećem dijelu dodat ćete CSS stilove kako bi sučelje izgledalo bolje.
+
+### Zadatak
+
+Na svom računalu stvorite mapu pod nazivom 'terrarium', a unutar nje datoteku pod nazivom 'index.html'. To možete učiniti u Visual Studio Codeu nakon što stvorite mapu terarija tako da otvorite novi prozor VS Codea, kliknete na 'open folder' i odete do svoje nove mape. Kliknite na mali gumb 'file' u Explorer panelu i stvorite novu datoteku:
+
+![explorer u VS Codeu](../../../../translated_images/vs-code-index.e2986cf919471eb984a0afef231380c8b132b000635105f2397bd2754d1b689c.hr.png)
+
+Ili
+
+Koristite ove naredbe u svom git bashu:  
+* `mkdir terrarium`  
+* `cd terrarium`  
+* `touch index.html`  
+* `code index.html` ili `nano index.html`
+
+> Datoteke index.html označavaju pregledniku da je to zadana datoteka u mapi; URL-ovi poput `https://anysite.com/test` mogu biti izgrađeni pomoću strukture mapa koja uključuje mapu pod nazivom `test` s `index.html` unutar nje; `index.html` ne mora biti prikazan u URL-u.
+
+---
+
+## DocType i oznake html
+
+Prvi redak HTML datoteke je njezin doctype. Pomalo je iznenađujuće da ovaj redak mora biti na samom vrhu datoteke, ali on govori starijim preglednicima da trebaju prikazati stranicu u standardnom načinu rada, slijedeći trenutnu HTML specifikaciju.
+
+> Savjet: u VS Codeu možete prijeći mišem preko oznake i dobiti informacije o njezinoj upotrebi iz MDN referentnih vodiča.
+
+Drugi redak trebao bi biti početna oznaka `<html>`, odmah praćena završnom oznakom `</html>`. Ove oznake su korijenski elementi vašeg sučelja.
+
+### Zadatak
+
+Dodajte ove retke na vrh svoje datoteke `index.html`:
+
+```HTML
+<!DOCTYPE html>
+<html></html>
+```
+
+✅ Postoji nekoliko različitih načina rada koji se mogu odrediti postavljanjem DocTypea s upitnim nizom: [Quirks Mode i Standards Mode](https://developer.mozilla.org/docs/Web/HTML/Quirks_Mode_and_Standards_Mode). Ovi načini rada nekada su podržavali vrlo stare preglednike koji se danas rijetko koriste (Netscape Navigator 4 i Internet Explorer 5). Možete se držati standardne deklaracije doctypea.
+
+---
+
+## 'Head' dokumenta
+
+Područje 'head' HTML dokumenta uključuje ključne informacije o vašoj web stranici, poznate i kao [metapodaci](https://developer.mozilla.org/docs/Web/HTML/Element/meta). U našem slučaju, serveru na koji će ova stranica biti poslana za prikazivanje, govorimo ove četiri stvari:
+
+-   naslov stranice  
+-   metapodaci stranice uključujući:  
+    -   'character set', koji govori o tome koje kodiranje znakova se koristi na stranici  
+    -   informacije o pregledniku, uključujući `x-ua-compatible` koji označava da je podržan preglednik IE=edge  
+    -   informacije o tome kako bi se viewport trebao ponašati prilikom učitavanja. Postavljanje početne skale viewporta na 1 kontrolira razinu zumiranja kada se stranica prvi put učita.
+
+### Zadatak
+
+Dodajte blok 'head' u svoj dokument između početne i završne oznake `<html>`.
+
+```html
+<head>
+	<title>Welcome to my Virtual Terrarium</title>
+	<meta charset="utf-8" />
+	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
+	<meta name="viewport" content="width=device-width, initial-scale=1" />
+</head>
+```
+
+✅ Što bi se dogodilo ako biste postavili meta oznaku viewporta ovako: `<meta name="viewport" content="width=600">`? Pročitajte više o [viewportu](https://developer.mozilla.org/docs/Web/HTML/Viewport_meta_tag).
+
+---
+
+## `Body` dokumenta
+
+### HTML oznake
+
+U HTML-u dodajete oznake u svoju .html datoteku kako biste stvorili elemente web stranice. Svaka oznaka obično ima početnu i završnu oznaku, poput ove: `<p>hello</p>` za označavanje paragrafa. Stvorite tijelo svog sučelja dodavanjem skupa `<body>` oznaka unutar para `<html>` oznaka; vaš markup sada izgleda ovako:
+
+### Zadatak
+
+```html
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>Welcome to my Virtual Terrarium</title>
+		<meta charset="utf-8" />
+		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+	</head>
+	<body></body>
+</html>
+```
+
+Sada možete početi graditi svoju stranicu. Obično koristite `<div>` oznake za stvaranje odvojenih elemenata na stranici. Stvorit ćemo niz `<div>` elemenata koji će sadržavati slike.
+
+### Slike
+
+Jedna HTML oznaka koja ne treba završnu oznaku je `<img>` oznaka, jer ima `src` element koji sadrži sve informacije potrebne za prikazivanje stavke na stranici.
+
+Stvorite mapu u svojoj aplikaciji pod nazivom `images` i u nju dodajte sve slike iz [mape izvornog koda](../../../../3-terrarium/solution/images); (ima 14 slika biljaka).
+
+### Zadatak
+
+Dodajte te slike biljaka u dva stupca između oznaka `<body></body>`:
+
+```html
+<div id="page">
+	<div id="left-container" class="container">
+		<div class="plant-holder">
+			<img class="plant" alt="plant" id="plant1" src="./images/plant1.png" />
+		</div>
+		<div class="plant-holder">
+			<img class="plant" alt="plant" id="plant2" src="./images/plant2.png" />
+		</div>
+		<div class="plant-holder">
+			<img class="plant" alt="plant" id="plant3" src="./images/plant3.png" />
+		</div>
+		<div class="plant-holder">
+			<img class="plant" alt="plant" id="plant4" src="./images/plant4.png" />
+		</div>
+		<div class="plant-holder">
+			<img class="plant" alt="plant" id="plant5" src="./images/plant5.png" />
+		</div>
+		<div class="plant-holder">
+			<img class="plant" alt="plant" id="plant6" src="./images/plant6.png" />
+		</div>
+		<div class="plant-holder">
+			<img class="plant" alt="plant" id="plant7" src="./images/plant7.png" />
+		</div>
+	</div>
+	<div id="right-container" class="container">
+		<div class="plant-holder">
+			<img class="plant" alt="plant" id="plant8" src="./images/plant8.png" />
+		</div>
+		<div class="plant-holder">
+			<img class="plant" alt="plant" id="plant9" src="./images/plant9.png" />
+		</div>
+		<div class="plant-holder">
+			<img class="plant" alt="plant" id="plant10" src="./images/plant10.png" />
+		</div>
+		<div class="plant-holder">
+			<img class="plant" alt="plant" id="plant11" src="./images/plant11.png" />
+		</div>
+		<div class="plant-holder">
+			<img class="plant" alt="plant" id="plant12" src="./images/plant12.png" />
+		</div>
+		<div class="plant-holder">
+			<img class="plant" alt="plant" id="plant13" src="./images/plant13.png" />
+		</div>
+		<div class="plant-holder">
+			<img class="plant" alt="plant" id="plant14" src="./images/plant14.png" />
+		</div>
+	</div>
+</div>
+```
+
+> Napomena: Spans vs. Divs. Divovi se smatraju 'blok' elementima, dok su Spans 'inline'. Što bi se dogodilo ako biste ove divove pretvorili u spanove?
+
+S ovim markupom biljke se sada prikazuju na ekranu. Izgleda prilično loše, jer još nisu stilizirane pomoću CSS-a, a to ćemo učiniti u sljedećoj lekciji.
+
+Svaka slika ima alt tekst koji će se pojaviti čak i ako ne možete vidjeti ili prikazati sliku. Ovo je važan atribut za uključivanje radi pristupačnosti. Saznajte više o pristupačnosti u budućim lekcijama; za sada zapamtite da alt atribut pruža alternativne informacije za sliku ako korisnik iz nekog razloga ne može vidjeti sliku (zbog sporog povezivanja, pogreške u src atributu ili ako korisnik koristi čitač ekrana).
+
+✅ Jeste li primijetili da svaka slika ima isti alt tag? Je li to dobra praksa? Zašto ili zašto ne? Možete li poboljšati ovaj kod?
+
+---
+
+## Semantički markup
+
+Općenito, poželjno je koristiti značajan 'semantički' markup prilikom pisanja HTML-a. Što to znači? To znači da koristite HTML oznake za predstavljanje vrste podataka ili interakcije za koje su dizajnirane. Na primjer, glavni naslov na stranici trebao bi koristiti oznaku `<h1>`.
+
+Dodajte sljedeći redak odmah ispod svoje početne oznake `<body>`:
+
+```html
+<h1>My Terrarium</h1>
+```
+
+Korištenje semantičkog markupa, poput postavljanja naslova kao `<h1>` i navođenja neuređenih popisa kao `<ul>`, pomaže čitačima ekrana da se lakše kreću kroz stranicu. Općenito, gumbi bi trebali biti napisani kao `<button>`, a popisi kao `<li>`. Iako je _moguće_ koristiti posebno stilizirane `<span>` elemente s click handlerima za imitaciju gumba, bolje je za korisnike s invaliditetom da koriste tehnologije za određivanje gdje se na stranici nalazi gumb i za interakciju s njim, ako se element pojavljuje kao gumb. Iz tog razloga, pokušajte koristiti semantički markup što je više moguće.
+
+✅ Pogledajte čitač ekrana i [kako on komunicira s web stranicom](https://www.youtube.com/watch?v=OUDV1gqs9GA). Možete li vidjeti zašto bi nesemantički markup mogao frustrirati korisnika?
+
+## Terarij
+
+Posljednji dio ovog sučelja uključuje stvaranje markupa koji će biti stiliziran kako bi stvorio terarij.
+
+### Zadatak:
+
+Dodajte ovaj markup iznad posljednje oznake `</div>`:
+
+```html
+<div id="terrarium">
+	<div class="jar-top"></div>
+	<div class="jar-walls">
+		<div class="jar-glossy-long"></div>
+		<div class="jar-glossy-short"></div>
+	</div>
+	<div class="dirt"></div>
+	<div class="jar-bottom"></div>
+</div>
+```
+
+✅ Iako ste dodali ovaj markup na ekran, apsolutno ništa se ne prikazuje. Zašto?
+
+---
+
+## 🚀Izazov
+
+Postoje neki zanimljivi 'stariji' tagovi u HTML-u koji su još uvijek zabavni za isprobati, iako ne biste trebali koristiti zastarjele oznake poput [ovih oznaka](https://developer.mozilla.org/docs/Web/HTML/Element#Obsolete_and_deprecated_elements) u svom markupu. Ipak, možete li koristiti staru `<marquee>` oznaku kako biste naslov h1 pomicali horizontalno? (ako to učinite, ne zaboravite je kasnije ukloniti)
+
+## Kviz nakon predavanja
+
+[Kviz nakon predavanja](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/16)
+
+## Pregled i samostalno učenje
+
+HTML je 'provjereni i pouzdani' sustav gradnje koji je pomogao izgraditi web kakav danas poznajemo. Naučite malo o njegovoj povijesti proučavajući stare i nove oznake. Možete li shvatiti zašto su neke oznake zastarjele, a neke dodane? Koje bi oznake mogle biti uvedene u budućnosti?
+
+Saznajte više o izradi stranica za web i mobilne uređaje na [Microsoft Learn](https://docs.microsoft.com/learn/modules/build-simple-website/?WT.mc_id=academic-77807-sagibbon).
+
+## Zadatak
+
+[Vježbajte svoj HTML: Izradite maketu bloga](assignment.md)
+
+---
+
+**Odricanje od odgovornosti**:  
+Ovaj dokument je preveden pomoću AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za ključne informacije preporučuje se profesionalni prijevod od strane ljudskog prevoditelja. Ne preuzimamo odgovornost za bilo kakva nesporazuma ili pogrešna tumačenja koja proizlaze iz korištenja ovog prijevoda.
\ No newline at end of file
diff --git a/translations/hr/3-terrarium/1-intro-to-html/assignment.md b/translations/hr/3-terrarium/1-intro-to-html/assignment.md
new file mode 100644
index 00000000..62f30e9b
--- /dev/null
+++ b/translations/hr/3-terrarium/1-intro-to-html/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "970776c81401c9aacb34f365edac6b53",
+  "translation_date": "2025-08-27T22:46:48+00:00",
+  "source_file": "3-terrarium/1-intro-to-html/assignment.md",
+  "language_code": "hr"
+}
+-->
+# Vježbajte svoj HTML: Izradite maketu bloga
+
+## Upute
+
+Zamislite da dizajnirate ili ponovno dizajnirate svoju osobnu web stranicu. Napravite grafičku maketu svoje stranice, a zatim zapišite HTML oznake koje biste koristili za izradu različitih elemenata stranice. To možete učiniti na papiru i skenirati, ili koristiti softver po vašem izboru, samo se pobrinite da ručno napišete HTML oznake.
+
+## Rubrika
+
+| Kriterij | Izvrsno                                                                           | Zadovoljavajuće                                                                  | Potrebno poboljšanje                                                             |
+| -------- | --------------------------------------------------------------------------------- | -------------------------------------------------------------------------------- | --------------------------------------------------------------------------------- |
+|          | Vizualno je prikazan izgled bloga s najmanje 10 elemenata oznaka                  | Vizualno je prikazan izgled bloga s otprilike 5 elemenata oznaka                 | Vizualno je prikazan izgled bloga s najviše 3 elementa oznaka                    |
+
+---
+
+**Odricanje od odgovornosti**:  
+Ovaj dokument je preveden pomoću AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za ključne informacije preporučuje se profesionalni prijevod od strane čovjeka. Ne preuzimamo odgovornost za bilo kakva nesporazuma ili pogrešna tumačenja koja proizlaze iz korištenja ovog prijevoda.
\ No newline at end of file
diff --git a/translations/hr/3-terrarium/2-intro-to-css/README.md b/translations/hr/3-terrarium/2-intro-to-css/README.md
new file mode 100644
index 00000000..d14806bb
--- /dev/null
+++ b/translations/hr/3-terrarium/2-intro-to-css/README.md
@@ -0,0 +1,284 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "e375c2aeb94e2407f2667633d39580bd",
+  "translation_date": "2025-08-27T22:48:02+00:00",
+  "source_file": "3-terrarium/2-intro-to-css/README.md",
+  "language_code": "hr"
+}
+-->
+# Projekt Terarij, 2. dio: Uvod u CSS
+
+![Uvod u CSS](../../../../translated_images/webdev101-css.3f7af5991bf53a200d79e7257e5e450408d8ea97f5b531d31b2e3976317338ee.hr.png)  
+> Sketchnote autorice [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Kviz prije predavanja
+
+[Kviz prije predavanja](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/17)
+
+### Uvod
+
+CSS, ili kaskadni stilovi (Cascading Style Sheets), rješava važan problem u razvoju weba: kako učiniti da vaša web stranica izgleda lijepo. Stiliziranje vaših aplikacija čini ih upotrebljivijima i vizualno privlačnijima; CSS također omogućuje stvaranje responzivnog web dizajna (RWD) - omogućujući vašim aplikacijama da izgledaju dobro bez obzira na veličinu zaslona na kojem se prikazuju. CSS nije samo za uljepšavanje aplikacija; njegova specifikacija uključuje animacije i transformacije koje omogućuju sofisticirane interakcije u vašim aplikacijama. CSS radna grupa održava trenutne specifikacije CSS-a; njihov rad možete pratiti na [web stranici World Wide Web konzorcija](https://www.w3.org/Style/CSS/members).
+
+> Napomena: CSS je jezik koji se razvija, kao i sve na webu, i nisu svi preglednici podržali novije dijelove specifikacije. Uvijek provjerite svoje implementacije konzultirajući [CanIUse.com](https://caniuse.com).
+
+U ovoj lekciji dodat ćemo stilove našem online terariju i naučiti više o nekoliko CSS koncepata: kaskadi, nasljeđivanju, korištenju selektora, pozicioniranju i korištenju CSS-a za izradu izgleda stranice. Tijekom procesa postavit ćemo izgled terarija i stvoriti sam terarij.
+
+### Preduvjet
+
+HTML za vaš terarij trebao bi biti izrađen i spreman za stiliziranje.
+
+> Pogledajte video
+
+> 
+> [![Video o osnovama Gita i GitHuba](https://img.youtube.com/vi/6yIdOIV9p1I/0.jpg)](https://www.youtube.com/watch?v=6yIdOIV9p1I)
+
+### Zadatak
+
+U svojoj mapi za terarij stvorite novu datoteku pod nazivom `style.css`. Uvezite tu datoteku u odjeljak `<head>`:
+
+```html
+<link rel="stylesheet" href="./style.css" />
+```
+
+---
+
+## Kaskada
+
+Kaskadni stilovi uključuju ideju da se stilovi 'kaskadno' primjenjuju prema prioritetu. Stilovi koje postavi autor web stranice imaju prioritet nad onima koje postavi preglednik. Stilovi postavljeni 'inline' imaju prioritet nad onima postavljenima u vanjskoj datoteci sa stilovima.
+
+### Zadatak
+
+Dodajte inline stil "color: red" u svoj `<h1>` tag:
+
+```HTML
+<h1 style="color: red">My Terrarium</h1>
+```
+
+Zatim dodajte sljedeći kod u svoju datoteku `style.css`:
+
+```CSS
+h1 {
+ color: blue;
+}
+```
+
+✅ Koja se boja prikazuje u vašoj web aplikaciji? Zašto? Možete li pronaći način da nadjačate stilove? Kada biste to željeli učiniti, a kada ne?
+
+---
+
+## Nasljeđivanje
+
+Stilovi se nasljeđuju od roditeljskog elementa prema potomcima, tako da ugniježđeni elementi nasljeđuju stilove svojih roditelja.
+
+### Zadatak
+
+Postavite font tijela na određeni font i provjerite font ugniježđenog elementa:
+
+```CSS
+body {
+	font-family: helvetica, arial, sans-serif;
+}
+```
+
+Otvorite konzolu preglednika na kartici 'Elements' i promatrajte font H1 elementa. Nasljeđuje svoj font od tijela, kako je navedeno u pregledniku:
+
+![naslijeđeni font](../../../../translated_images/1.cc07a5cbe114ad1d4728c35134584ac1b87db688eff83cf75985cf31fe0ed95c.hr.png)
+
+✅ Možete li učiniti da ugniježđeni stil naslijedi neko drugo svojstvo?
+
+---
+
+## CSS selektori
+
+### Tagovi
+
+Do sada vaša datoteka `style.css` ima stilizirano samo nekoliko tagova, a aplikacija izgleda prilično čudno:
+
+```CSS
+body {
+	font-family: helvetica, arial, sans-serif;
+}
+
+h1 {
+	color: #3a241d;
+	text-align: center;
+}
+```
+
+Ovaj način stiliziranja taga daje vam kontrolu nad jedinstvenim elementima, ali trebate kontrolirati stilove mnogih biljaka u svom terariju. Da biste to učinili, trebate iskoristiti CSS selektore.
+
+### Id-ovi
+
+Dodajte malo stila za postavljanje lijevih i desnih spremnika. Budući da postoji samo jedan lijevi i jedan desni spremnik, u oznaci su im dodijeljeni id-ovi. Da biste ih stilizirali, koristite `#`:
+
+```CSS
+#left-container {
+	background-color: #eee;
+	width: 15%;
+	left: 0px;
+	top: 0px;
+	position: absolute;
+	height: 100%;
+	padding: 10px;
+}
+
+#right-container {
+	background-color: #eee;
+	width: 15%;
+	right: 0px;
+	top: 0px;
+	position: absolute;
+	height: 100%;
+	padding: 10px;
+}
+```
+
+Ovdje ste postavili ove spremnike s apsolutnim pozicioniranjem na krajnju lijevu i desnu stranu zaslona te koristili postotke za njihovu širinu kako bi se mogli prilagoditi malim mobilnim zaslonima.
+
+✅ Ovaj je kod prilično ponovljen, što nije "DRY" (Don't Repeat Yourself); možete li pronaći bolji način za stiliziranje ovih id-ova, možda kombinacijom id-a i klase? Trebali biste promijeniti oznaku i refaktorirati CSS:
+
+```html
+<div id="left-container" class="container"></div>
+```
+
+### Klase
+
+U gornjem primjeru stilizirali ste dva jedinstvena elementa na zaslonu. Ako želite da se stilovi primjenjuju na više elemenata na zaslonu, možete koristiti CSS klase. Učinite to za postavljanje biljaka u lijeve i desne spremnike.
+
+Primijetite da svaka biljka u HTML oznaci ima kombinaciju id-ova i klasa. Id-ovi se ovdje koriste za JavaScript koji ćete kasnije dodati kako biste manipulirali postavljanjem biljaka u terariju. Klase, međutim, daju svim biljkama određeni stil.
+
+```html
+<div class="plant-holder">
+	<img class="plant" alt="plant" id="plant1" src="./images/plant1.png" />
+</div>
+```
+
+Dodajte sljedeće u svoju datoteku `style.css`:
+
+```CSS
+.plant-holder {
+	position: relative;
+	height: 13%;
+	left: -10px;
+}
+
+.plant {
+	position: absolute;
+	max-width: 150%;
+	max-height: 150%;
+	z-index: 2;
+}
+```
+
+Značajno u ovom isječku je miješanje relativnog i apsolutnog pozicioniranja, o čemu ćemo govoriti u sljedećem odjeljku. Pogledajte kako su visine obrađene pomoću postotaka:
+
+Postavili ste visinu držača biljaka na 13%, što je dobar broj kako bi se sve biljke prikazale u svakom vertikalnom spremniku bez potrebe za pomicanjem.
+
+Držač biljaka pomaknut je ulijevo kako bi biljke bile više centrirane unutar spremnika. Slike imaju veliku količinu prozirne pozadine kako bi bile lakše za povlačenje, pa ih je potrebno pomaknuti ulijevo kako bi bolje pristajale na zaslon.
+
+Zatim, sama biljka ima maksimalnu širinu od 150%. To joj omogućuje da se smanji kako se preglednik smanjuje. Pokušajte promijeniti veličinu preglednika; biljke ostaju u svojim spremnicima, ali se smanjuju kako bi stale.
+
+Također je značajna upotreba z-indeksa, koji kontrolira relativnu visinu elementa (tako da biljke sjede iznad spremnika i izgledaju kao da su unutar terarija).
+
+✅ Zašto su vam potrebni i selektor za držač biljaka i selektor za biljke?
+
+## CSS pozicioniranje
+
+Miješanje svojstava pozicioniranja (postoje statična, relativna, fiksna, apsolutna i ljepljiva pozicioniranja) može biti malo nezgodno, ali kada se pravilno koristi, daje vam dobru kontrolu nad elementima na vašim stranicama.
+
+Apsolutno pozicionirani elementi pozicionirani su u odnosu na svoje najbliže pozicionirane pretke, a ako ih nema, pozicionirani su prema tijelu dokumenta.
+
+Relativno pozicionirani elementi pozicionirani su na temelju CSS-ovih uputa za prilagodbu njihovog položaja u odnosu na početni položaj.
+
+U našem primjeru, `plant-holder` je relativno pozicionirani element koji je pozicioniran unutar apsolutno pozicioniranog spremnika. Rezultirajuće ponašanje je da su bočni spremnici pričvršćeni lijevo i desno, a `plant-holder` je ugniježđen, prilagođavajući se unutar bočnih spremnika, ostavljajući prostor za biljke koje će biti postavljene u vertikalni red.
+
+> Sama `plant` također ima apsolutno pozicioniranje, što je potrebno kako bi bila povlačiva, kao što ćete otkriti u sljedećoj lekciji.
+
+✅ Eksperimentirajte s promjenom vrsta pozicioniranja bočnih spremnika i `plant-holdera`. Što se događa?
+
+## CSS izgledi
+
+Sada ćete koristiti ono što ste naučili kako biste izradili sam terarij, koristeći samo CSS!
+
+Prvo, stilizirajte `.terrarium` div djecu kao zaobljeni pravokutnik koristeći CSS:
+
+```CSS
+.jar-walls {
+	height: 80%;
+	width: 60%;
+	background: #d1e1df;
+	border-radius: 1rem;
+	position: absolute;
+	bottom: 0.5%;
+	left: 20%;
+	opacity: 0.5;
+	z-index: 1;
+}
+
+.jar-top {
+	width: 50%;
+	height: 5%;
+	background: #d1e1df;
+	position: absolute;
+	bottom: 80.5%;
+	left: 25%;
+	opacity: 0.7;
+	z-index: 1;
+}
+
+.jar-bottom {
+	width: 50%;
+	height: 1%;
+	background: #d1e1df;
+	position: absolute;
+	bottom: 0%;
+	left: 25%;
+	opacity: 0.7;
+}
+
+.dirt {
+	width: 60%;
+	height: 5%;
+	background: #3a241d;
+	position: absolute;
+	border-radius: 0 0 1rem 1rem;
+	bottom: 1%;
+	left: 20%;
+	opacity: 0.7;
+	z-index: -1;
+}
+```
+
+Primijetite upotrebu postotaka ovdje. Ako smanjite preglednik, možete vidjeti kako se staklenka također smanjuje. Također primijetite postotke širina i visina za elemente staklenke i kako je svaki element apsolutno pozicioniran u središtu, pričvršćen na dno prikaza.
+
+Također koristimo `rem` za zaobljeni rub (border-radius), duljinu relativnu na font. Pročitajte više o ovoj vrsti relativnog mjerenja u [CSS specifikaciji](https://www.w3.org/TR/css-values-3/#font-relative-lengths).
+
+✅ Pokušajte promijeniti boje i prozirnost staklenke u odnosu na zemlju. Što se događa? Zašto?
+
+---
+
+## 🚀Izazov
+
+Dodajte 'mjehurićasti' sjaj na donji lijevi dio staklenke kako bi izgledala više poput stakla. Stilizirat ćete `.jar-glossy-long` i `.jar-glossy-short` kako bi izgledali kao odsjaj. Evo kako bi to izgledalo:
+
+![završeni terarij](../../../../translated_images/terrarium-final.2f07047ffc597d0a06b06cab28a77801a10dd12fdb6c7fc630e9c40665491c53.hr.png)
+
+Za dovršetak kviza nakon predavanja, prođite kroz ovaj Learn modul: [Stilizirajte svoju HTML aplikaciju pomoću CSS-a](https://docs.microsoft.com/learn/modules/build-simple-website/4-css-basics/?WT.mc_id=academic-77807-sagibbon)
+
+## Kviz nakon predavanja
+
+[Kviz nakon predavanja](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/18)
+
+## Pregled i samostalno učenje
+
+CSS se čini obmanjujuće jednostavnim, ali postoje mnogi izazovi kada pokušavate savršeno stilizirati aplikaciju za sve preglednike i sve veličine zaslona. CSS-Grid i Flexbox alati su razvijeni kako bi posao učinili malo strukturiranijim i pouzdanijim. Naučite o tim alatima igrajući [Flexbox Froggy](https://flexboxfroggy.com/) i [Grid Garden](https://codepip.com/games/grid-garden/).
+
+## Zadatak
+
+[CSS Refaktoriranje](assignment.md)
+
+---
+
+**Odricanje od odgovornosti**:  
+Ovaj dokument je preveden pomoću AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za ključne informacije preporučuje se profesionalni prijevod od strane čovjeka. Ne preuzimamo odgovornost za bilo kakva nesporazuma ili pogrešna tumačenja koja proizlaze iz korištenja ovog prijevoda.
\ No newline at end of file
diff --git a/translations/hr/3-terrarium/2-intro-to-css/assignment.md b/translations/hr/3-terrarium/2-intro-to-css/assignment.md
new file mode 100644
index 00000000..c429a716
--- /dev/null
+++ b/translations/hr/3-terrarium/2-intro-to-css/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "9d4d75af51aaccfe9af778f792c62919",
+  "translation_date": "2025-08-27T22:49:10+00:00",
+  "source_file": "3-terrarium/2-intro-to-css/assignment.md",
+  "language_code": "hr"
+}
+-->
+# Refaktoriranje CSS-a
+
+## Upute
+
+Preoblikujte terarij koristeći ili Flexbox ili CSS Grid i napravite snimke zaslona kako biste pokazali da ste ga testirali na nekoliko preglednika. Možda ćete trebati promijeniti oznake, pa stvorite novu verziju aplikacije s umetnutom umjetnošću za vaš refaktor. Ne brinite o tome da elementi budu povlačivi; za sada samo refaktorirajte HTML i CSS.
+
+## Rubrika
+
+| Kriteriji | Izvrsno                                                          | Zadovoljavajuće               | Potrebno poboljšanje                 |
+| --------- | ---------------------------------------------------------------- | ----------------------------- | ------------------------------------ |
+|           | Prikazati potpuno preoblikovan terarij koristeći Flexbox ili CSS Grid | Preoblikovati nekoliko elemenata | Ne uspjeti preoblikovati terarij uopće |
+
+---
+
+**Odricanje od odgovornosti**:  
+Ovaj dokument je preveden pomoću AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za ključne informacije preporučuje se profesionalni prijevod od strane ljudskog prevoditelja. Ne preuzimamo odgovornost za nesporazume ili pogrešne interpretacije koje mogu proizaći iz korištenja ovog prijevoda.
\ No newline at end of file
diff --git a/translations/hr/3-terrarium/3-intro-to-DOM-and-closures/README.md b/translations/hr/3-terrarium/3-intro-to-DOM-and-closures/README.md
new file mode 100644
index 00000000..bd063743
--- /dev/null
+++ b/translations/hr/3-terrarium/3-intro-to-DOM-and-closures/README.md
@@ -0,0 +1,230 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "30f8903a1f290e3d438dc2c70fe60259",
+  "translation_date": "2025-08-27T22:50:06+00:00",
+  "source_file": "3-terrarium/3-intro-to-DOM-and-closures/README.md",
+  "language_code": "hr"
+}
+-->
+# Projekt Terarij, 3. dio: Manipulacija DOM-a i Zatvaranje (Closure)
+
+![DOM i zatvaranje](../../../../translated_images/webdev101-js.10280393044d7eaaec7e847574946add7ddae6be2b2194567d848b61d849334a.hr.png)
+> Sketchnote autorice [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Kviz prije predavanja
+
+[Kviz prije predavanja](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/19)
+
+### Uvod
+
+Manipulacija DOM-a, ili "Document Object Model-a", ključni je aspekt razvoja weba. Prema [MDN-u](https://developer.mozilla.org/docs/Web/API/Document_Object_Model/Introduction), "Document Object Model (DOM) je podatkovna reprezentacija objekata koji čine strukturu i sadržaj dokumenta na webu." Izazovi vezani uz manipulaciju DOM-a često su bili razlog za korištenje JavaScript okvira umjesto čistog JavaScripta za upravljanje DOM-om, ali mi ćemo se snaći sami!
+
+Osim toga, ovaj će vas sat upoznati s idejom [JavaScript zatvaranja (closure)](https://developer.mozilla.org/docs/Web/JavaScript/Closures), što možete zamisliti kao funkciju unutar druge funkcije, gdje unutarnja funkcija ima pristup opsegu vanjske funkcije.
+
+> JavaScript zatvaranja su široka i složena tema. Ovaj sat dotiče se osnovne ideje da ćete u kodu ovog terarija pronaći zatvaranje: unutarnju funkciju i vanjsku funkciju konstruirane na način da unutarnja funkcija ima pristup opsegu vanjske funkcije. Za mnogo više informacija o tome kako ovo funkcionira, posjetite [opsežnu dokumentaciju](https://developer.mozilla.org/docs/Web/JavaScript/Closures).
+
+Koristit ćemo zatvaranje za manipulaciju DOM-om.
+
+Zamislite DOM kao stablo koje predstavlja sve načine na koje se dokument web stranice može manipulirati. Razni API-ji (Application Program Interfaces) napisani su kako bi programeri, koristeći svoj omiljeni programski jezik, mogli pristupiti DOM-u i uređivati, mijenjati, preuređivati i na druge načine njime upravljati.
+
+![Reprezentacija DOM stabla](../../../../translated_images/dom-tree.7daf0e763cbbba9273f9a66fe04c98276d7d23932309b195cb273a9cf1819b42.hr.png)
+
+> Reprezentacija DOM-a i HTML oznaka koje ga referenciraju. Autorica [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
+
+U ovom ćemo satu dovršiti naš interaktivni projekt terarija stvaranjem JavaScripta koji će omogućiti korisniku manipulaciju biljkama na stranici.
+
+### Preduvjet
+
+Trebali biste imati izrađene HTML i CSS datoteke za svoj terarij. Do kraja ovog sata moći ćete premještati biljke u i izvan terarija povlačenjem.
+
+### Zadatak
+
+U svojoj mapi terarija stvorite novu datoteku pod nazivom `script.js`. Uvezite tu datoteku u odjeljak `<head>`:
+
+```html
+	<script src="./script.js" defer></script>
+```
+
+> Napomena: koristite `defer` prilikom uvoza vanjske JavaScript datoteke u HTML datoteku kako bi se JavaScript izvršio tek nakon što se HTML datoteka u potpunosti učita. Također možete koristiti atribut `async`, koji omogućuje izvršavanje skripte dok se HTML datoteka još parsira, ali u našem slučaju važno je da HTML elementi budu potpuno dostupni za povlačenje prije nego što omogućimo izvršavanje skripte za povlačenje.
+---
+
+## DOM elementi
+
+Prvo što trebate učiniti jest stvoriti reference na elemente koje želite manipulirati u DOM-u. U našem slučaju, to su 14 biljaka koje trenutno čekaju u bočnim trakama.
+
+### Zadatak
+
+```html
+dragElement(document.getElementById('plant1'));
+dragElement(document.getElementById('plant2'));
+dragElement(document.getElementById('plant3'));
+dragElement(document.getElementById('plant4'));
+dragElement(document.getElementById('plant5'));
+dragElement(document.getElementById('plant6'));
+dragElement(document.getElementById('plant7'));
+dragElement(document.getElementById('plant8'));
+dragElement(document.getElementById('plant9'));
+dragElement(document.getElementById('plant10'));
+dragElement(document.getElementById('plant11'));
+dragElement(document.getElementById('plant12'));
+dragElement(document.getElementById('plant13'));
+dragElement(document.getElementById('plant14'));
+```
+
+Što se ovdje događa? Referencirate dokument i pretražujete njegov DOM kako biste pronašli element s određenim Id-om. Sjetite se da ste u prvom satu o HTML-u dali pojedinačne Id-ove svakoj slici biljke (`id="plant1"`)? Sada ćete iskoristiti taj trud. Nakon što identificirate svaki element, prosljeđujete taj element funkciji pod nazivom `dragElement` koju ćete uskoro izraditi. Tako je element u HTML-u sada omogućen za povlačenje, ili će to uskoro biti.
+
+✅ Zašto referenciramo elemente prema Id-u? Zašto ne prema njihovoj CSS klasi? Možete se prisjetiti prethodnog sata o CSS-u kako biste odgovorili na ovo pitanje.
+
+---
+
+## Zatvaranje (Closure)
+
+Sada ste spremni stvoriti zatvaranje `dragElement`, koje je vanjska funkcija koja obuhvaća unutarnju funkciju ili funkcije (u našem slučaju, imat ćemo tri).
+
+Zatvaranja su korisna kada jedna ili više funkcija trebaju pristupiti opsegu vanjske funkcije. Evo primjera:
+
+```javascript
+function displayCandy(){
+	let candy = ['jellybeans'];
+	function addCandy(candyType) {
+		candy.push(candyType)
+	}
+	addCandy('gumdrops');
+}
+displayCandy();
+console.log(candy)
+```
+
+U ovom primjeru, funkcija `displayCandy` okružuje funkciju koja dodaje novu vrstu slatkiša u niz koji već postoji u funkciji. Ako biste pokrenuli ovaj kod, niz `candy` bio bi nedefiniran jer je lokalna varijabla (lokalna za zatvaranje).
+
+✅ Kako možete učiniti niz `candy` dostupnim? Pokušajte ga premjestiti izvan zatvaranja. Na taj način niz postaje globalan, umjesto da ostane dostupan samo lokalnom opsegu zatvaranja.
+
+### Zadatak
+
+Ispod deklaracija elemenata u `script.js` stvorite funkciju:
+
+```javascript
+function dragElement(terrariumElement) {
+	//set 4 positions for positioning on the screen
+	let pos1 = 0,
+		pos2 = 0,
+		pos3 = 0,
+		pos4 = 0;
+	terrariumElement.onpointerdown = pointerDrag;
+}
+```
+
+`dragElement` dobiva svoj objekt `terrariumElement` iz deklaracija na vrhu skripte. Zatim postavljate neke lokalne pozicije na `0` za objekt proslijeđen u funkciju. To su lokalne varijable koje će se manipulirati za svaki element dok dodajete funkcionalnost povlačenja i ispuštanja unutar zatvaranja za svaki element. Terarij će biti popunjen ovim povučenim elementima, pa aplikacija mora pratiti gdje su postavljeni.
+
+Osim toga, `terrariumElement` koji se prosljeđuje ovoj funkciji dodjeljuje se događaj `pointerdown`, koji je dio [web API-ja](https://developer.mozilla.org/docs/Web/API) dizajniranih za pomoć pri upravljanju DOM-om. `onpointerdown` se aktivira kada se pritisne gumb ili, u našem slučaju, dodirne element koji se može povući. Ovaj rukovatelj događajima radi i na [web i mobilnim preglednicima](https://caniuse.com/?search=onpointerdown), uz nekoliko iznimaka.
+
+✅ [Rukovatelj događajima `onclick`](https://developer.mozilla.org/docs/Web/API/GlobalEventHandlers/onclick) ima mnogo veću podršku među preglednicima; zašto ga ovdje ne biste koristili? Razmislite o točnoj vrsti interakcije na ekranu koju pokušavate stvoriti.
+
+---
+
+## Funkcija Pointerdrag
+
+`terrariumElement` je spreman za povlačenje; kada se aktivira događaj `onpointerdown`, poziva se funkcija `pointerDrag`. Dodajte tu funkciju odmah ispod ove linije: `terrariumElement.onpointerdown = pointerDrag;`:
+
+### Zadatak 
+
+```javascript
+function pointerDrag(e) {
+	e.preventDefault();
+	console.log(e);
+	pos3 = e.clientX;
+	pos4 = e.clientY;
+}
+```
+
+Događa se nekoliko stvari. Prvo, sprječavate zadane događaje koji se obično događaju na `pointerdown` pomoću `e.preventDefault();`. Na taj način imate veću kontrolu nad ponašanjem sučelja.
+
+> Vratite se na ovu liniju kada potpuno izgradite datoteku skripte i pokušajte bez `e.preventDefault()` - što se događa?
+
+Drugo, otvorite `index.html` u prozoru preglednika i pregledajte sučelje. Kada kliknete na biljku, možete vidjeti kako se bilježi događaj 'e'. Istražite događaj kako biste vidjeli koliko se informacija prikuplja jednim događajem pointer down!  
+
+Zatim, obratite pažnju na to kako se lokalne varijable `pos3` i `pos4` postavljaju na e.clientX. Te vrijednosti možete pronaći u inspekcijskom prozoru. Ove vrijednosti bilježe x i y koordinate biljke u trenutku kada je kliknete ili dodirnete. Trebat će vam precizna kontrola nad ponašanjem biljaka dok ih klikate i povlačite, pa pratite njihove koordinate.
+
+✅ Postaje li jasnije zašto je cijela aplikacija izgrađena s jednim velikim zatvaranjem? Da nije, kako biste održavali opseg za svaku od 14 biljaka koje se mogu povući?
+
+Dovršite početnu funkciju dodavanjem još dvije manipulacije događajima pokazivača ispod `pos4 = e.clientY`:
+
+```html
+document.onpointermove = elementDrag;
+document.onpointerup = stopElementDrag;
+```
+Sada naznačujete da želite da se biljka povlači zajedno s pokazivačem dok ga pomičete, i da se gesta povlačenja zaustavi kada prestanete odabirati biljku. `onpointermove` i `onpointerup` dio su istog API-ja kao i `onpointerdown`. Sučelje će sada bacati pogreške jer još niste definirali funkcije `elementDrag` i `stopElementDrag`, pa ih izradite sljedeće.
+
+## Funkcije elementDrag i stopElementDrag
+
+Dovršit ćete svoje zatvaranje dodavanjem još dvije unutarnje funkcije koje će upravljati onim što se događa kada povučete biljku i prestanete je povlačiti. Ponašanje koje želite jest da možete povući bilo koju biljku u bilo kojem trenutku i postaviti je bilo gdje na ekranu. Ovo sučelje je prilično neograničeno (nema zone ispuštanja, na primjer) kako biste mogli dizajnirati svoj terarij točno onako kako želite dodavanjem, uklanjanjem i premještanjem biljaka.
+
+### Zadatak
+
+Dodajte funkciju `elementDrag` odmah nakon zatvarajuće vitičaste zagrade funkcije `pointerDrag`:
+
+```javascript
+function elementDrag(e) {
+	pos1 = pos3 - e.clientX;
+	pos2 = pos4 - e.clientY;
+	pos3 = e.clientX;
+	pos4 = e.clientY;
+	console.log(pos1, pos2, pos3, pos4);
+	terrariumElement.style.top = terrariumElement.offsetTop - pos2 + 'px';
+	terrariumElement.style.left = terrariumElement.offsetLeft - pos1 + 'px';
+}
+```
+U ovoj funkciji puno uređujete početne pozicije 1-4 koje ste postavili kao lokalne varijable u vanjskoj funkciji. Što se ovdje događa?
+
+Dok povlačite, ponovno dodjeljujete `pos1` tako da bude jednak `pos3` (koji ste ranije postavili kao `e.clientX`) minus trenutna vrijednost `e.clientX`. Sličnu operaciju radite i za `pos2`. Zatim ponovno postavljate `pos3` i `pos4` na nove X i Y koordinate elementa. Možete pratiti ove promjene u konzoli dok povlačite. Zatim manipulirate CSS stilom biljke kako biste postavili njezinu novu poziciju na temelju novih pozicija `pos1` i `pos2`, računajući gornje i lijeve X i Y koordinate biljke na temelju usporedbe njezinog pomaka s tim novim pozicijama.
+
+> `offsetTop` i `offsetLeft` su CSS svojstva koja postavljaju poziciju elementa na temelju pozicije njegovog roditelja; roditelj može biti bilo koji element koji nije pozicioniran kao `static`. 
+
+Sve ovo ponovno izračunavanje pozicija omogućuje vam fino podešavanje ponašanja terarija i njegovih biljaka.
+
+### Zadatak 
+
+Završni zadatak za dovršetak sučelja je dodavanje funkcije `stopElementDrag` nakon zatvarajuće vitičaste zagrade funkcije `elementDrag`:
+
+```javascript
+function stopElementDrag() {
+	document.onpointerup = null;
+	document.onpointermove = null;
+}
+```
+
+Ova mala funkcija resetira događaje `onpointerup` i `onpointermove` kako biste mogli ponovno započeti povlačenje biljke ili započeti povlačenje nove biljke.
+
+✅ Što se događa ako ne postavite ove događaje na null?
+
+Sada ste dovršili svoj projekt!
+
+🥇Čestitamo! Završili ste svoj prekrasni terarij. ![završeni terarij](../../../../translated_images/terrarium-final.0920f16e87c13a84cd2b553a5af9a3ad1cffbd41fbf8ce715d9e9c43809a5e2c.hr.png)
+
+---
+
+## 🚀Izazov
+
+Dodajte novi rukovatelj događajima svom zatvaranju kako biste učinili nešto više s biljkama; na primjer, dvaput kliknite biljku kako biste je premjestili u prvi plan. Budite kreativni!
+
+## Kviz nakon predavanja
+
+[Kviz nakon predavanja](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/20)
+
+## Pregled i samostalno učenje
+
+Iako povlačenje elemenata po ekranu izgleda trivijalno, postoji mnogo načina za to i mnogo zamki, ovisno o efektu koji želite postići. Zapravo, postoji cijeli [API za povlačenje i ispuštanje](https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_API) koji možete isprobati. Nismo ga koristili u ovom modulu jer je efekt koji smo željeli bio nešto drugačiji, ali isprobajte ovaj API na vlastitom projektu i vidite što možete postići.
+
+Pronađite više informacija o događajima pokazivača na [W3C dokumentaciji](https://www.w3.org/TR/pointerevents1/) i na [MDN web dokumentaciji](https://developer.mozilla.org/docs/Web/API/Pointer_events).
+
+Uvijek provjerite mogućnosti preglednika koristeći [CanIUse.com](https://caniuse.com/).
+
+## Zadatak
+
+[Radite još malo s DOM-om](assignment.md)
+
+---
+
+**Odricanje od odgovornosti**:  
+Ovaj dokument je preveden pomoću AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za ključne informacije preporučuje se profesionalni prijevod od strane ljudskog prevoditelja. Ne preuzimamo odgovornost za bilo kakve nesporazume ili pogrešne interpretacije koje proizlaze iz korištenja ovog prijevoda.
\ No newline at end of file
diff --git a/translations/hr/3-terrarium/3-intro-to-DOM-and-closures/assignment.md b/translations/hr/3-terrarium/3-intro-to-DOM-and-closures/assignment.md
new file mode 100644
index 00000000..f9586027
--- /dev/null
+++ b/translations/hr/3-terrarium/3-intro-to-DOM-and-closures/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "22fb6c3cb570c47f1ac65048393941fa",
+  "translation_date": "2025-08-27T22:51:25+00:00",
+  "source_file": "3-terrarium/3-intro-to-DOM-and-closures/assignment.md",
+  "language_code": "hr"
+}
+-->
+# Radite malo više s DOM-om
+
+## Upute
+
+Istražite DOM malo detaljnije tako što ćete 'usvojiti' jedan DOM element. Posjetite [popis DOM sučelja](https://developer.mozilla.org/docs/Web/API/Document_Object_Model) na MDN-u i odaberite jedno. Pronađite primjer njegove upotrebe na nekoj web stranici i napišite objašnjenje kako se koristi.
+
+## Rubrika
+
+| Kriterij | Izvrsno                                      | Zadovoljavajuće                                  | Potrebno poboljšanje    |
+| -------- | --------------------------------------------- | ------------------------------------------------ | ----------------------- |
+|          | Napisano je objašnjenje u obliku paragrafa s primjerom | Napisano je objašnjenje u obliku paragrafa bez primjera | Objašnjenje nije napisano |
+
+---
+
+**Odricanje od odgovornosti**:  
+Ovaj dokument je preveden pomoću AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za ključne informacije preporučuje se profesionalni prijevod od strane čovjeka. Ne preuzimamo odgovornost za nesporazume ili pogrešna tumačenja koja mogu proizaći iz korištenja ovog prijevoda.
\ No newline at end of file
diff --git a/translations/hr/3-terrarium/README.md b/translations/hr/3-terrarium/README.md
new file mode 100644
index 00000000..69fe8120
--- /dev/null
+++ b/translations/hr/3-terrarium/README.md
@@ -0,0 +1,45 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "7965cd2bc5dc92ad888dc4c6ab2ab70a",
+  "translation_date": "2025-08-27T22:44:47+00:00",
+  "source_file": "3-terrarium/README.md",
+  "language_code": "hr"
+}
+-->
+# Moj Terarij: Projekt za učenje o HTML-u, CSS-u i manipulaciji DOM-a pomoću JavaScripta 🌵🌱
+
+Mala vježba povuci i ispusti. Uz malo HTML-a, JS-a i CSS-a, moći ćete izraditi web sučelje, stilizirati ga i dodati više interakcija po vašem izboru.
+
+![moj terarij](../../../translated_images/screenshot_gray.0c796099a1f9f25e40aa55ead81f268434c00af30d7092490759945eda63067d.hr.png)
+
+# Lekcije
+
+1. [Uvod u HTML](./1-intro-to-html/README.md)
+2. [Uvod u CSS](./2-intro-to-css/README.md)
+3. [Uvod u DOM i zatvaranja u JS-u](./3-intro-to-DOM-and-closures/README.md)
+
+## Zasluge
+
+Napisano s ♥️ od strane [Jen Looper](https://www.twitter.com/jenlooper)
+
+Terarij kreiran pomoću CSS-a inspiriran je staklenkom Jakuba Mandre na [codepen](https://codepen.io/Rotarepmi/pen/rjpNZY).
+
+Umjetnički rad ručno je nacrtala [Jen Looper](http://jenlooper.com) uz pomoć Procreate-a.
+
+## Objavite svoj Terarij
+
+Možete objaviti svoj terarij na webu koristeći Azure Static Web Apps.
+
+1. Forkajte ovaj repo
+
+2. Pritisnite ovaj gumb
+
+[![Gumb za objavu na Azureu](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/?feature.customportal=false&WT.mc_id=academic-77807-sagibbon#create/Microsoft.StaticApp)
+
+3. Prođite kroz čarobnjak za kreiranje vaše aplikacije. Pobrinite se da postavite korijen aplikacije na `/solution` ili korijen vaše baze koda. U ovoj aplikaciji nema API-ja, pa se ne morate brinuti oko dodavanja istog. Github mapa bit će kreirana u vašem forkovanom repozitoriju koja će pomoći Azure Static Web Apps servisima da izgrade i objave vašu aplikaciju na novu URL adresu.
+
+---
+
+**Odricanje od odgovornosti**:  
+Ovaj dokument je preveden pomoću AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za kritične informacije preporučuje se profesionalni prijevod od strane čovjeka. Ne preuzimamo odgovornost za bilo kakva nesporazuma ili pogrešna tumačenja koja proizlaze iz korištenja ovog prijevoda.
\ No newline at end of file
diff --git a/translations/hr/3-terrarium/solution/README.md b/translations/hr/3-terrarium/solution/README.md
new file mode 100644
index 00000000..f55805a5
--- /dev/null
+++ b/translations/hr/3-terrarium/solution/README.md
@@ -0,0 +1,39 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "6329fbe8bd936068debd78cca6f09c0a",
+  "translation_date": "2025-08-27T22:47:13+00:00",
+  "source_file": "3-terrarium/solution/README.md",
+  "language_code": "hr"
+}
+-->
+# Moj terarij: Projekt za učenje o HTML-u, CSS-u i manipulaciji DOM-a pomoću JavaScripta 🌵🌱
+
+Mala vježba povuci i ispusti. Uz malo HTML-a, JS-a i CSS-a, možete izgraditi web sučelje, stilizirati ga i dodati interakciju.
+
+![moj terarij](../../../../translated_images/screenshot_gray.0c796099a1f9f25e40aa55ead81f268434c00af30d7092490759945eda63067d.hr.png)
+
+## Zasluge
+
+Napisano s ♥️ od strane [Jen Looper](https://www.twitter.com/jenlooper)
+
+Terarij kreiran pomoću CSS-a inspiriran je staklenkom Jakuba Mandre na [codepen](https://codepen.io/Rotarepmi/pen/rjpNZY).
+
+Umjetnički rad ručno je nacrtala [Jen Looper](http://jenlooper.com) koristeći Procreate.
+
+## Objavite svoj terarij
+
+Možete objaviti ili postaviti svoj terarij na web koristeći Azure Static Web Apps.
+
+1. Forkajte ovaj repo
+
+2. Pritisnite ovaj gumb
+
+[![Gumb za objavu na Azure](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/?feature.customportal=false&WT.mc_id=academic-77807-sagibbon#create/Microsoft.StaticApp)
+
+3. Prođite kroz čarobnjak za kreiranje vaše aplikacije. Pobrinite se da postavite korijenski direktorij aplikacije na `/solution` ili korijenski direktorij vaše baze koda. U ovoj aplikaciji nema API-ja, pa se ne morate brinuti oko dodavanja istog. `.github` mapa bit će kreirana u vašem forkovanom repozitoriju koja će pomoći servisu za izgradnju i objavu Azure Static Web Apps da izgradi i objavi vašu aplikaciju na novu URL adresu.
+
+---
+
+**Odricanje od odgovornosti**:  
+Ovaj dokument je preveden pomoću AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za ključne informacije preporučuje se profesionalni prijevod od strane ljudskog prevoditelja. Ne preuzimamo odgovornost za bilo kakva nesporazuma ili pogrešna tumačenja koja proizlaze iz korištenja ovog prijevoda.
\ No newline at end of file
diff --git a/translations/hr/4-typing-game/README.md b/translations/hr/4-typing-game/README.md
new file mode 100644
index 00000000..089acc64
--- /dev/null
+++ b/translations/hr/4-typing-game/README.md
@@ -0,0 +1,44 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "957547b822c40042e07d591c4fbfde4f",
+  "translation_date": "2025-08-27T22:55:26+00:00",
+  "source_file": "4-typing-game/README.md",
+  "language_code": "hr"
+}
+-->
+# Programiranje temeljeno na događajima - Izradite igru tipkanja
+
+## Uvod
+
+Tipkanje je jedna od najpodcjenjenijih vještina programera. Sposobnost brzog prenošenja misli iz glave u editor omogućuje slobodan tok kreativnosti. Jedan od najboljih načina za učenje je igranje igre!
+
+> Dakle, izradimo igru tipkanja!
+
+Koristit ćete JavaScript, HTML i CSS vještine koje ste dosad stekli kako biste izradili igru tipkanja. Igra će igraču prikazati nasumični citat (koristimo citate [Sherlocka Holmesa](https://en.wikipedia.org/wiki/Sherlock_Holmes)) i mjeriti koliko je vremena igraču potrebno da ga točno otipka. Koristit ćete JavaScript, HTML i CSS vještine koje ste dosad stekli kako biste izradili igru tipkanja.
+
+![demo](../../../4-typing-game/images/demo.gif)
+
+## Preduvjeti
+
+Ova lekcija pretpostavlja da ste upoznati sa sljedećim konceptima:
+
+- Kreiranje tekstualnih unosa i kontrola gumba
+- CSS i postavljanje stilova pomoću klasa
+- Osnove JavaScripta
+  - Kreiranje niza
+  - Kreiranje nasumičnog broja
+  - Dobivanje trenutnog vremena
+
+## Lekcija
+
+[Kreiranje igre tipkanja pomoću programiranja temeljenog na događajima](./typing-game/README.md)
+
+## Zasluge
+
+Napisano s ♥️ od strane [Christophera Harrisona](http://www.twitter.com/geektrainer)
+
+---
+
+**Odricanje od odgovornosti**:  
+Ovaj dokument je preveden pomoću AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za ključne informacije preporučuje se profesionalni prijevod od strane ljudskog prevoditelja. Ne preuzimamo odgovornost za bilo kakve nesporazume ili pogrešne interpretacije koje proizlaze iz korištenja ovog prijevoda.
\ No newline at end of file
diff --git a/translations/hr/4-typing-game/solution/README.md b/translations/hr/4-typing-game/solution/README.md
new file mode 100644
index 00000000..c7973fa9
--- /dev/null
+++ b/translations/hr/4-typing-game/solution/README.md
@@ -0,0 +1,15 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "068cbb9b3c10a96d503f6cdd6c9ace8c",
+  "translation_date": "2025-08-27T22:58:26+00:00",
+  "source_file": "4-typing-game/solution/README.md",
+  "language_code": "hr"
+}
+-->
+Ovo je rezervirano mjesto, namjerno ostavljeno prazno
+
+---
+
+**Odricanje od odgovornosti**:  
+Ovaj dokument je preveden pomoću AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za ključne informacije preporučuje se profesionalni prijevod od strane čovjeka. Ne preuzimamo odgovornost za bilo kakva nesporazuma ili pogrešna tumačenja koja proizlaze iz korištenja ovog prijevoda.
\ No newline at end of file
diff --git a/translations/hr/4-typing-game/typing-game/README.md b/translations/hr/4-typing-game/typing-game/README.md
new file mode 100644
index 00000000..a2b89233
--- /dev/null
+++ b/translations/hr/4-typing-game/typing-game/README.md
@@ -0,0 +1,353 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "e982871b8388c59c22a41b73b5fca70f",
+  "translation_date": "2025-08-27T22:56:35+00:00",
+  "source_file": "4-typing-game/typing-game/README.md",
+  "language_code": "hr"
+}
+-->
+# Kreiranje igre pomoću događaja
+
+## Kviz prije predavanja
+
+[Kviz prije predavanja](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/21)
+
+## Programiranje vođeno događajima
+
+Kada kreiramo aplikaciju za preglednik, pružamo grafičko korisničko sučelje (GUI) koje korisnik koristi za interakciju s onim što smo izgradili. Najčešći način interakcije s preglednikom je putem klikanja i upisivanja u različite elemente. Izazov s kojim se suočavamo kao programeri je taj što ne znamo kada će korisnik izvesti te operacije!
+
+[Programiranje vođeno događajima](https://en.wikipedia.org/wiki/Event-driven_programming) naziv je za vrstu programiranja koju trebamo koristiti za kreiranje našeg GUI-ja. Ako malo razložimo ovaj izraz, vidimo da je ključna riječ ovdje **događaj**. [Događaj](https://www.merriam-webster.com/dictionary/event), prema Merriam-Websteru, definira se kao "nešto što se događa". Ovo savršeno opisuje našu situaciju. Znamo da će se nešto dogoditi za što želimo izvršiti neki kod kao odgovor, ali ne znamo kada će se to dogoditi.
+
+Način na koji označavamo dio koda koji želimo izvršiti je kreiranjem funkcije. Kada razmišljamo o [proceduralnom programiranju](https://en.wikipedia.org/wiki/Procedural_programming), funkcije se pozivaju određenim redoslijedom. Isto vrijedi i za programiranje vođeno događajima. Razlika je u tome **kako** će se funkcije pozivati.
+
+Za rukovanje događajima (klikovi na gumb, upisivanje itd.), registriramo **slušatelje događaja**. Slušatelj događaja je funkcija koja osluškuje da li se dogodio neki događaj i izvršava se kao odgovor. Slušatelji događaja mogu ažurirati korisničko sučelje, pozivati server ili obavljati bilo što drugo što treba učiniti kao odgovor na korisnikovu akciju. Dodajemo slušatelja događaja pomoću [addEventListener](https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener) i pružamo funkciju za izvršenje.
+
+> **NOTE:** Vrijedi istaknuti da postoji mnogo načina za kreiranje slušatelja događaja. Možete koristiti anonimne funkcije ili kreirati imenovane. Možete koristiti razne prečace, poput postavljanja svojstva `click` ili korištenja `addEventListener`. U našoj vježbi fokusirat ćemo se na `addEventListener` i anonimne funkcije, jer je to vjerojatno najčešća tehnika koju web programeri koriste. Također je najfleksibilnija, jer `addEventListener` radi za sve događaje, a naziv događaja može se pružiti kao parametar.
+
+### Uobičajeni događaji
+
+Postoji [deseci događaja](https://developer.mozilla.org/docs/Web/Events) koje možete osluškivati prilikom kreiranja aplikacije. Gotovo sve što korisnik radi na stranici podiže događaj, što vam daje veliku moć da osigurate da korisnik dobije željeno iskustvo. Srećom, obično će vam trebati samo nekoliko događaja. Evo nekoliko uobičajenih (uključujući dva koja ćemo koristiti prilikom kreiranja naše igre):
+
+- [click](https://developer.mozilla.org/docs/Web/API/Element/click_event): Korisnik je kliknuo na nešto, obično gumb ili hipervezu
+- [contextmenu](https://developer.mozilla.org/docs/Web/API/Element/contextmenu_event): Korisnik je kliknuo desnom tipkom miša
+- [select](https://developer.mozilla.org/docs/Web/API/Element/select_event): Korisnik je označio neki tekst
+- [input](https://developer.mozilla.org/docs/Web/API/Element/input_event): Korisnik je unio neki tekst
+
+## Kreiranje igre
+
+Kreirat ćemo igru kako bismo istražili kako događaji funkcioniraju u JavaScriptu. Naša igra testirat će vještinu tipkanja igrača, što je jedna od najpodcjenjenijih vještina koju bi svi programeri trebali imati. Svi bismo trebali vježbati tipkanje! Opći tijek igre izgledat će ovako:
+
+- Igrač klikne na gumb za početak i dobije citat za tipkanje
+- Igrač što brže može upisuje citat u tekstualni okvir
+  - Svaka riječ koja je završena se ističe
+  - Ako igrač napravi tipkarsku grešku, tekstualni okvir postaje crven
+  - Kada igrač završi citat, prikazuje se poruka o uspjehu s proteklim vremenom
+
+Idemo izgraditi našu igru i naučiti o događajima!
+
+### Struktura datoteka
+
+Trebat će nam ukupno tri datoteke: **index.html**, **script.js** i **style.css**. Počnimo s njihovim postavljanjem kako bismo si olakšali posao.
+
+- Kreirajte novu mapu za svoj rad otvaranjem konzole ili terminalskog prozora i izdavanjem sljedeće naredbe:
+
+```bash
+# Linux or macOS
+mkdir typing-game && cd typing-game
+
+# Windows
+md typing-game && cd typing-game
+```
+
+- Otvorite Visual Studio Code
+
+```bash
+code .
+```
+
+- Dodajte tri datoteke u mapu u Visual Studio Code s sljedećim nazivima:
+  - index.html
+  - script.js
+  - style.css
+
+## Kreiranje korisničkog sučelja
+
+Ako istražimo zahtjeve, znamo da ćemo trebati nekoliko elemenata na našoj HTML stranici. Ovo je poput recepta, gdje trebamo neke sastojke:
+
+- Mjesto za prikaz citata koji korisnik treba upisati
+- Mjesto za prikaz poruka, poput poruke o uspjehu
+- Tekstualni okvir za upisivanje
+- Gumb za početak
+
+Svaki od njih trebat će ID-ove kako bismo mogli raditi s njima u našem JavaScriptu. Također ćemo dodati reference na CSS i JavaScript datoteke koje ćemo kreirati.
+
+Kreirajte novu datoteku pod nazivom **index.html**. Dodajte sljedeći HTML:
+
+```html
+<!-- inside index.html -->
+<html>
+<head>
+  <title>Typing game</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <h1>Typing game!</h1>
+  <p>Practice your typing skills with a quote from Sherlock Holmes. Click **start** to begin!</p>
+  <p id="quote"></p> <!-- This will display our quote -->
+  <p id="message"></p> <!-- This will display any status messages -->
+  <div>
+    <input type="text" aria-label="current word" id="typed-value" /> <!-- The textbox for typing -->
+    <button type="button" id="start">Start</button> <!-- To start the game -->
+  </div>
+  <script src="script.js"></script>
+</body>
+</html>
+```
+
+### Pokretanje aplikacije
+
+Uvijek je najbolje razvijati iterativno kako biste vidjeli kako stvari izgledaju. Pokrenimo našu aplikaciju. Postoji sjajan dodatak za Visual Studio Code pod nazivom [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) koji će lokalno hostirati vašu aplikaciju i osvježiti preglednik svaki put kad spremite.
+
+- Instalirajte [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) slijedeći poveznicu i klikom na **Install**
+  - Preglednik će vas zatražiti da otvorite Visual Studio Code, a zatim će vas Visual Studio Code zatražiti da izvršite instalaciju
+  - Ponovno pokrenite Visual Studio Code ako se to zatraži
+- Nakon instalacije, u Visual Studio Code pritisnite Ctrl-Shift-P (ili Cmd-Shift-P) za otvaranje palete naredbi
+- Upišite **Live Server: Open with Live Server**
+  - Live Server će početi hostirati vašu aplikaciju
+- Otvorite preglednik i navigirajte na **https://localhost:5500**
+- Sada biste trebali vidjeti stranicu koju ste kreirali!
+
+Dodajmo funkcionalnost.
+
+## Dodavanje CSS-a
+
+S našim HTML-om kreiranim, dodajmo CSS za osnovno stiliziranje. Trebamo istaknuti riječ koju igrač treba upisati i obojiti tekstualni okvir ako ono što je upisano nije ispravno. To ćemo učiniti s dvije klase.
+
+Kreirajte novu datoteku pod nazivom **style.css** i dodajte sljedeću sintaksu.
+
+```css
+/* inside style.css */
+.highlight {
+  background-color: yellow;
+}
+
+.error {
+  background-color: lightcoral;
+  border: red;
+}
+```
+
+✅ Kada je riječ o CSS-u, možete rasporediti svoju stranicu kako god želite. Odvojite malo vremena i učinite stranicu privlačnijom:
+
+- Odaberite drugačiji font
+- Obojite naslove
+- Promijenite veličinu elemenata
+
+## JavaScript
+
+S našim korisničkim sučeljem kreiranim, vrijeme je da se fokusiramo na JavaScript koji će pružiti logiku. Podijelit ćemo ovo na nekoliko koraka:
+
+- [Kreiranje konstanti](../../../../4-typing-game/typing-game)
+- [Slušatelj događaja za početak igre](../../../../4-typing-game/typing-game)
+- [Slušatelj događaja za tipkanje](../../../../4-typing-game/typing-game)
+
+Ali prvo, kreirajte novu datoteku pod nazivom **script.js**.
+
+### Dodavanje konstanti
+
+Trebat će nam nekoliko stavki kako bismo si olakšali programiranje. Opet, slično receptu, evo što će nam trebati:
+
+- Polje s popisom svih citata
+- Prazno polje za pohranu svih riječi trenutnog citata
+- Prostor za pohranu indeksa riječi koju igrač trenutno upisuje
+- Vrijeme kada je igrač kliknuo na početak
+
+Također ćemo željeti reference na elemente korisničkog sučelja:
+
+- Tekstualni okvir (**typed-value**)
+- Prikaz citata (**quote**)
+- Poruka (**message**)
+
+```javascript
+// inside script.js
+// all of our quotes
+const quotes = [
+    'When you have eliminated the impossible, whatever remains, however improbable, must be the truth.',
+    'There is nothing more deceptive than an obvious fact.',
+    'I ought to know by this time that when a fact appears to be opposed to a long train of deductions it invariably proves to be capable of bearing some other interpretation.',
+    'I never make exceptions. An exception disproves the rule.',
+    'What one man can invent another can discover.',
+    'Nothing clears up a case so much as stating it to another person.',
+    'Education never ends, Watson. It is a series of lessons, with the greatest for the last.',
+];
+// store the list of words and the index of the word the player is currently typing
+let words = [];
+let wordIndex = 0;
+// the starting time
+let startTime = Date.now();
+// page elements
+const quoteElement = document.getElementById('quote');
+const messageElement = document.getElementById('message');
+const typedValueElement = document.getElementById('typed-value');
+```
+
+✅ Dodajte još citata svojoj igri
+
+> **NOTE:** Elemente možemo dohvatiti kad god želimo u kodu pomoću `document.getElementById`. Zbog činjenice da ćemo se redovito referirati na te elemente, izbjeći ćemo tipkarske greške s literalima stringova koristeći konstante. Okviri poput [Vue.js](https://vuejs.org/) ili [React](https://reactjs.org/) mogu vam pomoći bolje upravljati centralizacijom vašeg koda.
+
+Odvojite trenutak za gledanje videa o korištenju `const`, `let` i `var`
+
+[![Vrste varijabli](https://img.youtube.com/vi/JNIXfGiDWM8/0.jpg)](https://youtube.com/watch?v=JNIXfGiDWM8 "Vrste varijabli")
+
+> 🎥 Kliknite na sliku iznad za video o varijablama.
+
+### Dodavanje logike za početak
+
+Za početak igre, igrač će kliknuti na početak. Naravno, ne znamo kada će kliknuti na početak. Ovdje dolazi [slušatelj događaja](https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener). Slušatelj događaja omogućit će nam da osluškujemo da li se nešto dogodilo (događaj) i izvršimo kod kao odgovor. U našem slučaju, želimo izvršiti kod kada korisnik klikne na početak.
+
+Kada korisnik klikne **start**, trebamo odabrati citat, postaviti korisničko sučelje i postaviti praćenje za trenutnu riječ i vrijeme. Ispod je JavaScript koji trebate dodati; raspravljamo o njemu odmah nakon bloka skripte.
+
+```javascript
+// at the end of script.js
+document.getElementById('start').addEventListener('click', () => {
+  // get a quote
+  const quoteIndex = Math.floor(Math.random() * quotes.length);
+  const quote = quotes[quoteIndex];
+  // Put the quote into an array of words
+  words = quote.split(' ');
+  // reset the word index for tracking
+  wordIndex = 0;
+
+  // UI updates
+  // Create an array of span elements so we can set a class
+  const spanWords = words.map(function(word) { return `<span>${word} </span>`});
+  // Convert into string and set as innerHTML on quote display
+  quoteElement.innerHTML = spanWords.join('');
+  // Highlight the first word
+  quoteElement.childNodes[0].className = 'highlight';
+  // Clear any prior messages
+  messageElement.innerText = '';
+
+  // Setup the textbox
+  // Clear the textbox
+  typedValueElement.value = '';
+  // set focus
+  typedValueElement.focus();
+  // set the event handler
+
+  // Start the timer
+  startTime = new Date().getTime();
+});
+```
+
+Razložimo kod!
+
+- Postavljanje praćenja riječi
+  - Korištenje [Math.floor](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Math/floor) i [Math.random](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Math/random) omogućuje nam da nasumično odaberemo citat iz polja `quotes`
+  - Pretvaramo `quote` u polje `words` kako bismo mogli pratiti riječ koju igrač trenutno upisuje
+  - `wordIndex` postavljamo na 0, jer igrač počinje s prvom riječi
+- Postavljanje korisničkog sučelja
+  - Kreiramo polje `spanWords`, koje sadrži svaku riječ unutar `span` elementa
+    - Ovo će nam omogućiti da istaknemo riječ na prikazu
+  - `join` polja za kreiranje stringa koji možemo koristiti za ažuriranje `innerHTML` na `quoteElement`
+    - Ovo će prikazati citat igraču
+  - Postavljamo `className` prvog `span` elementa na `highlight` kako bismo ga istaknuli žutom bojom
+  - Čistimo `messageElement` postavljanjem `innerText` na `''`
+- Postavljanje tekstualnog okvira
+  - Brišemo trenutni `value` na `typedValueElement`
+  - Postavljamo `focus` na `typedValueElement`
+- Pokrećemo mjerač vremena pozivanjem `getTime`
+
+### Dodavanje logike za tipkanje
+
+Dok igrač tipka, podiže se događaj `input`. Ovaj slušatelj događaja provjerit će je li igrač pravilno upisao riječ i upravljati trenutnim statusom igre. Vraćajući se na **script.js**, dodajte sljedeći kod na kraj. Razložit ćemo ga nakon toga.
+
+```javascript
+// at the end of script.js
+typedValueElement.addEventListener('input', () => {
+  // Get the current word
+  const currentWord = words[wordIndex];
+  // get the current value
+  const typedValue = typedValueElement.value;
+
+  if (typedValue === currentWord && wordIndex === words.length - 1) {
+    // end of sentence
+    // Display success
+    const elapsedTime = new Date().getTime() - startTime;
+    const message = `CONGRATULATIONS! You finished in ${elapsedTime / 1000} seconds.`;
+    messageElement.innerText = message;
+  } else if (typedValue.endsWith(' ') && typedValue.trim() === currentWord) {
+    // end of word
+    // clear the typedValueElement for the new word
+    typedValueElement.value = '';
+    // move to the next word
+    wordIndex++;
+    // reset the class name for all elements in quote
+    for (const wordElement of quoteElement.childNodes) {
+      wordElement.className = '';
+    }
+    // highlight the new word
+    quoteElement.childNodes[wordIndex].className = 'highlight';
+  } else if (currentWord.startsWith(typedValue)) {
+    // currently correct
+    // highlight the next word
+    typedValueElement.className = '';
+  } else {
+    // error state
+    typedValueElement.className = 'error';
+  }
+});
+```
+
+Razložimo kod! Počinjemo dohvaćanjem trenutne riječi i vrijednosti koju je igrač dosad upisao. Zatim imamo logiku "vodopada", gdje provjeravamo je li citat dovršen, riječ dovršena, riječ ispravna ili (na kraju) postoji li greška.
+
+- Citat je dovršen, što je naznačeno time da je `typedValue` jednak `currentWord`, a `wordIndex` jednak jednom manje od `length` polja `words`
+  - Izračunavamo `elapsedTime` oduzimanjem `startTime` od trenutnog vremena
+  - Dijelimo `elapsedTime` s 1.000 kako bismo pretvorili iz milisekundi u sekunde
+  - Prikazujemo poruku o uspjehu
+- Riječ je dovršena, što je naznačeno time da `typedValue` završava razmakom (kraj riječi) i da je `typedValue` jednak `currentWord`
+  - Postavljamo `value` na `typedElement` na `''` kako bismo omogućili upisivanje sljedeće riječi
+  - Povećavamo `wordIndex` kako bismo prešli na sljedeću riječ
+  - Prolazimo kroz sve `childNodes` elementa `quoteElement` kako bismo postavili `className` na `''` za vraćanje na zadani prikaz
+  - Postavljamo `className` trenutne riječi na `highlight` kako bismo je označili kao sljedeću riječ za upisivanje
+- Riječ je trenutno pravilno upisana (ali nije dovršena), što je naznačeno time da `currentWord` počinje s `typedValue`
+  - Osiguravamo da se `typedValueElement` prikazuje kao zadano brisanjem `className`
+- Ako smo stigli ovdje, imamo grešku
+  - Postavljamo `className` na `typedValueElement` na `error`
+
+## Testiranje aplikacije
+
+Stigli ste do kraja! Posljednji korak je osigurati da naša aplikacija radi. Isprobajte! Ne brinite ako postoje greške; **svi programeri** imaju greške. Pregledajte poruke i otklonite ih po potrebi.
+
+Kliknite na **start** i počnite tipkati! Trebalo bi izgledati otprilike kao animacija koju smo vidjeli prije.
+
+![Animacija igre u akciji](../../../../4-typing-game/images/demo.gif)
+
+---
+
+## 🚀 Izazov
+
+Dodajte više funkcionalnosti
+
+- Onemogućite slušatelja događaja `input` nakon završetka i ponovno ga omogućite kada se klikne gumb
+- Onemogućite tekstualni okvir kada igrač završi citat
+- Prikazujte modalni dijalog s porukom o uspjehu
+- Pohranite visoke rezultate koristeći [localStorage](https://developer.mozilla.org/docs/Web/API/Window/localStorage)
+
+## Kviz nakon predavanja
+
+[Kviz nakon predavanja](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/22)
+
+## Pregled i samostalno učenje
+
+Pročitajte o [svim dostupnim događajima](https://developer.mozilla.org/docs/Web/Events) koje web preglednik nudi programerima i razmislite o scenarijima u kojima biste koristili svaki od njih.
+
+## Zadatak
+
+[Kreirajte novu igru s tipkovnicom](assignment.md)
+
+---
+
+**Odricanje od odgovornosti**:  
+Ovaj dokument je preveden pomoću AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za ključne informacije preporučuje se profesionalni prijevod od strane ljudskog prevoditelja. Ne preuzimamo odgovornost za bilo kakva nesporazuma ili pogrešna tumačenja koja proizlaze iz korištenja ovog prijevoda.
\ No newline at end of file
diff --git a/translations/hr/4-typing-game/typing-game/assignment.md b/translations/hr/4-typing-game/typing-game/assignment.md
new file mode 100644
index 00000000..4b4d3423
--- /dev/null
+++ b/translations/hr/4-typing-game/typing-game/assignment.md
@@ -0,0 +1,26 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "de5384c118e15e4d1d0eaa00fc01b112",
+  "translation_date": "2025-08-27T22:58:10+00:00",
+  "source_file": "4-typing-game/typing-game/assignment.md",
+  "language_code": "hr"
+}
+-->
+# Napravite novu igru s tipkovnicom
+
+## Upute
+
+Napravite malu igru koja koristi događaje s tipkovnice za obavljanje zadataka. Može biti drugačija vrsta igre tipkanja ili umjetnička igra koja slika piksele na ekranu pritiskom na tipke. Budite kreativni!
+
+## Kriteriji ocjenjivanja
+
+| Kriterij | Izvrsno                 | Zadovoljavajuće          | Potrebno poboljšanje |
+| -------- | ----------------------- | ------------------------ | -------------------- |
+|          | Predstavljena je cijela igra | Igra je vrlo minimalna | Igra ima greške      |
+|          |                         |                          |                      |
+
+---
+
+**Odricanje od odgovornosti**:  
+Ovaj dokument je preveden pomoću AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za ključne informacije preporučuje se profesionalni prijevod od strane ljudskog prevoditelja. Ne preuzimamo odgovornost za bilo kakve nesporazume ili pogrešne interpretacije koje proizlaze iz korištenja ovog prijevoda.
\ No newline at end of file
diff --git a/translations/hr/5-browser-extension/1-about-browsers/README.md b/translations/hr/5-browser-extension/1-about-browsers/README.md
new file mode 100644
index 00000000..99bb67f9
--- /dev/null
+++ b/translations/hr/5-browser-extension/1-about-browsers/README.md
@@ -0,0 +1,182 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "0bb55e0b98600afab801eea115228873",
+  "translation_date": "2025-08-27T22:13:20+00:00",
+  "source_file": "5-browser-extension/1-about-browsers/README.md",
+  "language_code": "hr"
+}
+-->
+# Projekt proširenja preglednika, 1. dio: Sve o preglednicima
+
+![Browser sketchnote](../../../../translated_images/browser.60317c9be8b7f84adce43e30bff8d47a1ae15793beab762317b2bc6b74337c1a.hr.jpg)
+> Sketchnote autor [Wassim Chegham](https://dev.to/wassimchegham/ever-wondered-what-happens-when-you-type-in-a-url-in-an-address-bar-in-a-browser-3dob)
+
+## Kviz prije predavanja
+
+[Kviz prije predavanja](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/23)
+
+### Uvod
+
+Proširenja preglednika dodaju dodatnu funkcionalnost pregledniku. No, prije nego što izradite jedno, trebali biste naučiti malo o tome kako preglednici obavljaju svoj posao.
+
+### O pregledniku
+
+U ovom nizu lekcija naučit ćete kako izraditi proširenje preglednika koje će raditi na preglednicima Chrome, Firefox i Edge. U ovom dijelu otkrit ćete kako preglednici funkcioniraju i postaviti osnovne elemente proširenja preglednika.
+
+Ali što je zapravo preglednik? To je softverska aplikacija koja omogućuje krajnjem korisniku pristup sadržaju s poslužitelja i prikazuje ga na web stranicama.
+
+✅ Malo povijesti: prvi preglednik zvao se 'WorldWideWeb' i stvorio ga je Sir Timothy Berners-Lee 1990. godine.
+
+![early browsers](../../../../translated_images/earlybrowsers.d984b711cdf3a42ddac919d46c4b5ca7232f68ccfbd81395e04e5a64c0015277.hr.jpg)
+> Neki od ranih preglednika, via [Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing)
+
+Kada se korisnik poveže na internet koristeći URL (Uniform Resource Locator) adresu, obično putem Hypertext Transfer Protocol-a putem `http` ili `https` adrese, preglednik komunicira s web poslužiteljem i dohvaća web stranicu.
+
+U tom trenutku, render engine preglednika prikazuje stranicu na korisnikovom uređaju, koji može biti mobilni telefon, stolno računalo ili prijenosno računalo.
+
+Preglednici također imaju mogućnost predmemoriranja sadržaja kako ga ne bi morali dohvaćati s poslužitelja svaki put. Mogu zabilježiti povijest korisnikovih aktivnosti pregledavanja, pohraniti 'kolačiće', male dijelove podataka koji sadrže informacije o korisnikovim aktivnostima, i još mnogo toga.
+
+Važno je zapamtiti da svi preglednici nisu isti! Svaki preglednik ima svoje prednosti i nedostatke, a profesionalni web programer mora razumjeti kako učiniti da web stranice dobro funkcioniraju na različitim preglednicima. To uključuje prilagodbu malim zaslonima, poput onih na mobilnim telefonima, kao i korisnicima koji su offline.
+
+Vrlo koristan web alat koji biste trebali označiti u svom omiljenom pregledniku je [caniuse.com](https://www.caniuse.com). Kada izrađujete web stranice, vrlo je korisno koristiti popise podržanih tehnologija na caniuse kako biste najbolje podržali svoje korisnike.
+
+✅ Kako možete saznati koji su preglednici najpopularniji među korisnicima vaše web stranice? Provjerite analitiku - možete instalirati razne analitičke pakete kao dio procesa razvoja web stranice, koji će vam reći koji preglednici se najviše koriste.
+
+## Proširenja preglednika
+
+Zašto biste željeli izraditi proširenje preglednika? To je zgodan dodatak pregledniku kada trebate brz pristup zadacima koje često ponavljate. Na primjer, ako često trebate provjeravati boje na raznim web stranicama koje koristite, možete instalirati proširenje za odabir boja. Ako imate problema s pamćenjem lozinki, možete koristiti proširenje za upravljanje lozinkama.
+
+Proširenja preglednika također su zabavna za razvoj. Obično upravljaju ograničenim brojem zadataka koje obavljaju vrlo dobro.
+
+✅ Koja su vaša omiljena proširenja preglednika? Koje zadatke obavljaju?
+
+### Instaliranje proširenja
+
+Prije nego što počnete izrađivati, pogledajte proces izrade i implementacije proširenja preglednika. Iako se svaki preglednik malo razlikuje u načinu upravljanja ovim zadatkom, proces je sličan na Chromeu i Firefoxu kao u ovom primjeru na Edgeu:
+
+![screenshot of the Edge browser showing the open edge://extensions page and open settings menu](../../../../translated_images/install-on-edge.d68781acaf0b3d3dada8b7507cde7a64bf74b7040d9818baaa9070668e819f90.hr.png)
+
+> Napomena: Obavezno uključite način rada za razvojne programere i dopustite proširenja iz drugih trgovina.
+
+U suštini, proces će biti:
+
+- izradite svoje proširenje koristeći `npm run build` 
+- u pregledniku idite na stranicu proširenja koristeći gumb "Postavke i više" (ikona `...`) u gornjem desnom kutu
+- ako je to nova instalacija, odaberite `load unpacked` za učitavanje svježeg proširenja iz njegove mape za izgradnju (u našem slučaju to je `/dist`) 
+- ili kliknite `reload` ako ponovno učitavate već instalirano proširenje
+
+✅ Ove upute odnose se na proširenja koja sami izradite; za instalaciju proširenja koja su objavljena u trgovini proširenja preglednika, trebali biste otići na te [trgovine](https://microsoftedge.microsoft.com/addons/Microsoft-Edge-Extensions-Home) i instalirati proširenje po vašem izboru.
+
+### Početak
+
+Izradit ćete proširenje preglednika koje prikazuje ugljični otisak vaše regije, prikazujući potrošnju energije vaše regije i izvor energije. Proširenje će imati obrazac koji prikuplja API ključ kako biste mogli pristupiti API-ju CO2 Signal.
+
+**Trebat će vam:**
+
+- [API ključ](https://www.co2signal.com/); unesite svoju e-poštu u okvir na ovoj stranici i bit će vam poslan
+- [kod za vašu regiju](http://api.electricitymap.org/v3/zones) koji odgovara [Electricity Map](https://www.electricitymap.org/map) (u Bostonu, na primjer, koristim 'US-NEISO').
+- [početni kod](../../../../5-browser-extension/start). Preuzmite mapu `start`; dovršit ćete kod u ovoj mapi.
+- [NPM](https://www.npmjs.com) - NPM je alat za upravljanje paketima; instalirajte ga lokalno i paketi navedeni u vašoj datoteci `package.json` bit će instalirani za korištenje u vašim web resursima
+
+✅ Saznajte više o upravljanju paketima u ovom [odličnom modulu za učenje](https://docs.microsoft.com/learn/modules/create-nodejs-project-dependencies/?WT.mc_id=academic-77807-sagibbon)
+
+Odvojite trenutak da pregledate bazu koda:
+
+dist
+    -|manifest.json (zadane postavke ovdje)
+    -|index.html (HTML markup za front-end ovdje)
+    -|background.js (pozadinski JS ovdje)
+    -|main.js (izgrađeni JS)
+src
+    -|index.js (vaš JS kod ide ovdje)
+
+✅ Kada imate svoj API ključ i kod regije, spremite ih negdje u bilješku za buduću upotrebu.
+
+### Izrada HTML-a za proširenje
+
+Ovo proširenje ima dva prikaza. Jedan za prikupljanje API ključa i koda regije:
+
+![screenshot of the completed extension open in a browser, displaying a form with inputs for region name and API key.](../../../../translated_images/1.b6da8c1394b07491afeb6b2a8e5aca73ebd3cf478e27bcc9aeabb187e722648e.hr.png)
+
+I drugi za prikaz potrošnje ugljika u regiji:
+
+![screenshot of the completed extension displaying values for carbon usage and fossil fuel percentage for the US-NEISO region.](../../../../translated_images/2.1dae52ff0804224692cd648afbf2342955d7afe3b0101b617268130dfb427f55.hr.png)
+
+Počnimo s izradom HTML-a za obrazac i stiliziranjem pomoću CSS-a.
+
+U mapi `/dist` izradit ćete obrazac i područje za rezultate. U datoteci `index.html`, popunite označeno područje obrasca:
+
+```HTML
+<form class="form-data" autocomplete="on">
+	<div>
+		<h2>New? Add your Information</h2>
+	</div>
+	<div>
+		<label for="region">Region Name</label>
+		<input type="text" id="region" required class="region-name" />
+	</div>
+	<div>
+		<label for="api">Your API Key from tmrow</label>
+		<input type="text" id="api" required class="api-key" />
+	</div>
+	<button class="search-btn">Submit</button>
+</form>	
+```
+Ovo je obrazac gdje će se vaši spremljeni podaci unositi i spremati u lokalnu pohranu.
+
+Zatim, izradite područje za rezultate; ispod završne oznake obrasca dodajte nekoliko divova:
+
+```HTML
+<div class="result">
+	<div class="loading">loading...</div>
+	<div class="errors"></div>
+	<div class="data"></div>
+	<div class="result-container">
+		<p><strong>Region: </strong><span class="my-region"></span></p>
+		<p><strong>Carbon Usage: </strong><span class="carbon-usage"></span></p>
+		<p><strong>Fossil Fuel Percentage: </strong><span class="fossil-fuel"></span></p>
+	</div>
+	<button class="clear-btn">Change region</button>
+</div>
+```
+U ovom trenutku možete pokušati izgradnju. Obavezno instalirajte ovisnosti paketa ovog proširenja:
+
+```
+npm install
+```
+
+Ova naredba će koristiti npm, Node Package Manager, za instalaciju webpacka za proces izgradnje vašeg proširenja. Možete vidjeti izlaz ovog procesa gledajući u `/dist/main.js` - vidjet ćete da je kod spakiran.
+
+Za sada, proširenje bi se trebalo izgraditi i, ako ga implementirate u Edge kao proširenje, vidjet ćete uredno prikazan obrazac.
+
+Čestitamo, napravili ste prve korake prema izradi proširenja preglednika. U sljedećim lekcijama učinit ćete ga funkcionalnijim i korisnijim.
+
+---
+
+## 🚀 Izazov
+
+Pogledajte trgovinu proširenja preglednika i instalirajte jedno u svoj preglednik. Možete pregledati njegove datoteke na zanimljive načine. Što otkrivate?
+
+## Kviz nakon predavanja
+
+[Kviz nakon predavanja](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/24)
+
+## Pregled i samostalno učenje
+
+U ovoj lekciji naučili ste malo o povijesti web preglednika; iskoristite ovu priliku da saznate više o tome kako su izumitelji World Wide Weba zamislili njegovu upotrebu čitajući više o njegovoj povijesti. Neki korisni izvori uključuju:
+
+[Povijest web preglednika](https://www.mozilla.org/firefox/browsers/browser-history/)
+
+[Povijest weba](https://webfoundation.org/about/vision/history-of-the-web/)
+
+[Intervju s Timom Berners-Leejem](https://www.theguardian.com/technology/2019/mar/12/tim-berners-lee-on-30-years-of-the-web-if-we-dream-a-little-we-can-get-the-web-we-want)
+
+## Zadatak 
+
+[Preoblikujte svoje proširenje](assignment.md)
+
+---
+
+**Odricanje od odgovornosti**:  
+Ovaj dokument je preveden pomoću AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za ključne informacije preporučuje se profesionalni prijevod od strane čovjeka. Ne preuzimamo odgovornost za bilo kakva nesporazuma ili pogrešna tumačenja koja proizlaze iz korištenja ovog prijevoda.
\ No newline at end of file
diff --git a/translations/hr/5-browser-extension/1-about-browsers/assignment.md b/translations/hr/5-browser-extension/1-about-browsers/assignment.md
new file mode 100644
index 00000000..f0ddb8c6
--- /dev/null
+++ b/translations/hr/5-browser-extension/1-about-browsers/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "e3c6f2a03c2336e60412612d870af547",
+  "translation_date": "2025-08-27T22:14:19+00:00",
+  "source_file": "5-browser-extension/1-about-browsers/assignment.md",
+  "language_code": "hr"
+}
+-->
+# Promijenite stil svoje ekstenzije
+
+## Upute
+
+Kodna baza za ovu ekstenziju dolazi s unaprijed definiranim stilovima, ali ne morate ih koristiti; prilagodite svoju ekstenziju tako da je restilizirate uređivanjem njezine css datoteke.
+
+## Rubrika
+
+| Kriterij | Izvrsno                                     | Zadovoljavajuće       | Potrebno poboljšanje |
+| -------- | ------------------------------------------- | --------------------- | -------------------- |
+|          | Kod je predan s funkcionalnim novim stilovima | Stiliziranje je nepotpuno | Stilovi su neispravni |
+
+---
+
+**Odricanje od odgovornosti**:  
+Ovaj dokument je preveden pomoću AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za ključne informacije preporučuje se profesionalni prijevod od strane čovjeka. Ne preuzimamo odgovornost za nesporazume ili pogrešna tumačenja koja mogu proizaći iz korištenja ovog prijevoda.
\ No newline at end of file
diff --git a/translations/hr/5-browser-extension/2-forms-browsers-local-storage/README.md b/translations/hr/5-browser-extension/2-forms-browsers-local-storage/README.md
new file mode 100644
index 00000000..6fc0ae15
--- /dev/null
+++ b/translations/hr/5-browser-extension/2-forms-browsers-local-storage/README.md
@@ -0,0 +1,240 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "e10f168beac4e7b05e30e0eb5c92bf11",
+  "translation_date": "2025-08-27T22:23:15+00:00",
+  "source_file": "5-browser-extension/2-forms-browsers-local-storage/README.md",
+  "language_code": "hr"
+}
+-->
+# Projekt proširenja preglednika, dio 2: Pozivanje API-ja, korištenje lokalne pohrane
+
+## Kviz prije predavanja
+
+[Kviz prije predavanja](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/25)
+
+### Uvod
+
+U ovoj lekciji pozvat ćete API slanjem obrasca vašeg proširenja preglednika i prikazati rezultate u proširenju. Osim toga, naučit ćete kako možete pohraniti podatke u lokalnu pohranu preglednika za buduću referencu i upotrebu.
+
+✅ Slijedite numerirane segmente u odgovarajućim datotekama kako biste znali gdje postaviti svoj kod.
+
+### Postavljanje elemenata za manipulaciju u proširenju:
+
+Do sada ste izradili HTML za obrazac i `<div>` za rezultate vašeg proširenja preglednika. Od sada ćete raditi u datoteci `/src/index.js` i graditi svoje proširenje korak po korak. Pogledajte [prethodnu lekciju](../1-about-browsers/README.md) za postavljanje projekta i proces izgradnje.
+
+Radom u svojoj datoteci `index.js`, započnite stvaranjem nekih `const` varijabli za pohranu vrijednosti povezanih s različitim poljima:
+
+```JavaScript
+// form fields
+const form = document.querySelector('.form-data');
+const region = document.querySelector('.region-name');
+const apiKey = document.querySelector('.api-key');
+
+// results
+const errors = document.querySelector('.errors');
+const loading = document.querySelector('.loading');
+const results = document.querySelector('.result-container');
+const usage = document.querySelector('.carbon-usage');
+const fossilfuel = document.querySelector('.fossil-fuel');
+const myregion = document.querySelector('.my-region');
+const clearBtn = document.querySelector('.clear-btn');
+```
+
+Sva ova polja referenciraju se prema njihovoj CSS klasi, kako ste ih postavili u HTML-u u prethodnoj lekciji.
+
+### Dodavanje osluškivača događaja
+
+Zatim dodajte osluškivače događaja za obrazac i gumb za brisanje koji resetira obrazac, tako da se nešto dogodi ako korisnik pošalje obrazac ili klikne na taj gumb za resetiranje. Dodajte i poziv za inicijalizaciju aplikacije na dnu datoteke:
+
+```JavaScript
+form.addEventListener('submit', (e) => handleSubmit(e));
+clearBtn.addEventListener('click', (e) => reset(e));
+init();
+```
+
+✅ Obratite pažnju na skraćeni način slušanja događaja slanja ili klika i kako se događaj prosljeđuje funkcijama `handleSubmit` ili `reset`. Možete li napisati ekvivalent ovog skraćenog zapisa u dužem formatu? Koji vam je način draži?
+
+### Izgradnja funkcija `init()` i `reset()`:
+
+Sada ćete izgraditi funkciju koja inicijalizira proširenje, a zove se `init()`:
+
+```JavaScript
+function init() {
+	//if anything is in localStorage, pick it up
+	const storedApiKey = localStorage.getItem('apiKey');
+	const storedRegion = localStorage.getItem('regionName');
+
+	//set icon to be generic green
+	//todo
+
+	if (storedApiKey === null || storedRegion === null) {
+		//if we don't have the keys, show the form
+		form.style.display = 'block';
+		results.style.display = 'none';
+		loading.style.display = 'none';
+		clearBtn.style.display = 'none';
+		errors.textContent = '';
+	} else {
+        //if we have saved keys/regions in localStorage, show results when they load
+        displayCarbonUsage(storedApiKey, storedRegion);
+		results.style.display = 'none';
+		form.style.display = 'none';
+		clearBtn.style.display = 'block';
+	}
+};
+
+function reset(e) {
+	e.preventDefault();
+	//clear local storage for region only
+	localStorage.removeItem('regionName');
+	init();
+}
+
+```
+
+U ovoj funkciji postoji zanimljiva logika. Čitajući je, možete li vidjeti što se događa?
+
+- postavljaju se dvije `const` varijable kako bi se provjerilo je li korisnik pohranio APIKey i kod regije u lokalnu pohranu.
+- ako je bilo koji od njih null, prikazuje se obrazac promjenom njegovog stila na 'block'.
+- skrivaju se rezultati, učitavanje i `clearBtn`, a tekst pogreške postavlja se na prazan string.
+- ako postoje ključ i regija, pokreće se rutina za:
+  - pozivanje API-ja za dobivanje podataka o potrošnji ugljika,
+  - skrivanje područja rezultata,
+  - skrivanje obrasca,
+  - prikaz gumba za resetiranje.
+
+Prije nego što krenete dalje, korisno je naučiti o vrlo važnom konceptu dostupnom u preglednicima: [LocalStorage](https://developer.mozilla.org/docs/Web/API/Window/localStorage). LocalStorage je koristan način za pohranu stringova u pregledniku kao `key-value` par. Ova vrsta web pohrane može se manipulirati pomoću JavaScripta za upravljanje podacima u pregledniku. LocalStorage ne istječe, dok se SessionStorage, druga vrsta web pohrane, briše kada se preglednik zatvori. Različite vrste pohrane imaju svoje prednosti i nedostatke.
+
+> Napomena - vaše proširenje preglednika ima vlastitu lokalnu pohranu; glavni prozor preglednika je druga instanca i ponaša se odvojeno.
+
+Postavite svoj APIKey da ima vrijednost stringa, na primjer, i možete vidjeti da je postavljen u Edgeu tako da "inspektirate" web stranicu (možete desnim klikom na preglednik otvoriti inspektor) i odete na karticu Applications kako biste vidjeli pohranu.
+
+![Lokalna pohrana](../../../../translated_images/localstorage.472f8147b6a3f8d141d9551c95a2da610ac9a3c6a73d4a1c224081c98bae09d9.hr.png)
+
+✅ Razmislite o situacijama u kojima NE biste željeli pohraniti neke podatke u LocalStorage. Općenito, postavljanje API ključeva u LocalStorage je loša ideja! Možete li vidjeti zašto? U našem slučaju, budući da je naša aplikacija isključivo za učenje i neće biti objavljena u trgovini aplikacija, koristit ćemo ovu metodu.
+
+Primijetite da koristite Web API za manipulaciju LocalStorage-om, bilo pomoću `getItem()`, `setItem()` ili `removeItem()`. Široko je podržan u preglednicima.
+
+Prije nego što izgradite funkciju `displayCarbonUsage()` koja se poziva u `init()`, izgradimo funkcionalnost za rukovanje početnim slanjem obrasca.
+
+### Rukovanje slanjem obrasca
+
+Kreirajte funkciju pod nazivom `handleSubmit` koja prihvaća argument događaja `(e)`. Zaustavite propagaciju događaja (u ovom slučaju želimo zaustaviti osvježavanje preglednika) i pozovite novu funkciju, `setUpUser`, prosljeđujući argumente `apiKey.value` i `region.value`. Na taj način koristite dvije vrijednosti koje se unose putem početnog obrasca kada su odgovarajuća polja popunjena.
+
+```JavaScript
+function handleSubmit(e) {
+	e.preventDefault();
+	setUpUser(apiKey.value, region.value);
+}
+```
+
+✅ Osvježite svoje pamćenje - HTML koji ste postavili u prošloj lekciji ima dva ulazna polja čije se `vrijednosti` hvataju putem `const` varijabli koje ste postavili na vrhu datoteke, a oba su `required`, tako da preglednik sprječava korisnike da unesu null vrijednosti.
+
+### Postavljanje korisnika
+
+Prelazimo na funkciju `setUpUser`, ovdje postavljate vrijednosti lokalne pohrane za apiKey i regionName. Dodajte novu funkciju:
+
+```JavaScript
+function setUpUser(apiKey, regionName) {
+	localStorage.setItem('apiKey', apiKey);
+	localStorage.setItem('regionName', regionName);
+	loading.style.display = 'block';
+	errors.textContent = '';
+	clearBtn.style.display = 'block';
+	//make initial call
+	displayCarbonUsage(apiKey, regionName);
+}
+```
+
+Ova funkcija postavlja poruku učitavanja koja se prikazuje dok se API poziva. U ovom trenutku stigli ste do stvaranja najvažnije funkcije ovog proširenja preglednika!
+
+### Prikaz potrošnje ugljika
+
+Napokon, vrijeme je za upit API-ju!
+
+Prije nego što krenemo dalje, trebali bismo razgovarati o API-jima. API-ji, ili [Application Programming Interfaces](https://www.webopedia.com/TERM/A/API.html), ključni su element alata web programera. Oni pružaju standardne načine za programe da međusobno komuniciraju i povezuju se. Na primjer, ako gradite web stranicu koja treba upitati bazu podataka, netko je možda stvorio API koji možete koristiti. Iako postoji mnogo vrsta API-ja, jedan od najpopularnijih je [REST API](https://www.smashingmagazine.com/2018/01/understanding-using-rest-api/).
+
+✅ Pojam 'REST' označava 'Representational State Transfer' i uključuje korištenje različito konfiguriranih URL-ova za dohvaćanje podataka. Istražite malo o različitim vrstama API-ja dostupnih programerima. Koji vam format najviše odgovara?
+
+Postoje važne stvari koje treba primijetiti o ovoj funkciji. Prvo, obratite pažnju na ključnu riječ [`async`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/async_function). Pisanje vaših funkcija tako da rade asinkrono znači da čekaju na neku radnju, poput vraćanja podataka, prije nego što nastave.
+
+Evo kratkog videa o `async`:
+
+[![Async i Await za upravljanje obećanjima](https://img.youtube.com/vi/YwmlRkrxvkk/0.jpg)](https://youtube.com/watch?v=YwmlRkrxvkk "Async i Await za upravljanje obećanjima")
+
+> 🎥 Kliknite na sliku iznad za video o async/await.
+
+Kreirajte novu funkciju za upit C02Signal API-ju:
+
+```JavaScript
+import axios from '../node_modules/axios';
+
+async function displayCarbonUsage(apiKey, region) {
+	try {
+		await axios
+			.get('https://api.co2signal.com/v1/latest', {
+				params: {
+					countryCode: region,
+				},
+				headers: {
+					'auth-token': apiKey,
+				},
+			})
+			.then((response) => {
+				let CO2 = Math.floor(response.data.data.carbonIntensity);
+
+				//calculateColor(CO2);
+
+				loading.style.display = 'none';
+				form.style.display = 'none';
+				myregion.textContent = region;
+				usage.textContent =
+					Math.round(response.data.data.carbonIntensity) + ' grams (grams C02 emitted per kilowatt hour)';
+				fossilfuel.textContent =
+					response.data.data.fossilFuelPercentage.toFixed(2) +
+					'% (percentage of fossil fuels used to generate electricity)';
+				results.style.display = 'block';
+			});
+	} catch (error) {
+		console.log(error);
+		loading.style.display = 'none';
+		results.style.display = 'none';
+		errors.textContent = 'Sorry, we have no data for the region you have requested.';
+	}
+}
+```
+
+Ovo je velika funkcija. Što se ovdje događa?
+
+- slijedeći najbolje prakse, koristite ključnu riječ `async` kako bi se ova funkcija ponašala asinkrono. Funkcija sadrži blok `try/catch` jer će vratiti obećanje kada API vrati podatke. Budući da nemate kontrolu nad brzinom kojom će API odgovoriti (možda uopće neće odgovoriti!), morate se nositi s ovom neizvjesnošću pozivajući ga asinkrono.
+- upitujete co2signal API kako biste dobili podatke o regiji, koristeći svoj API ključ. Da biste koristili taj ključ, morate koristiti vrstu autentifikacije u parametrima zaglavlja.
+- kada API odgovori, dodjeljujete različite elemente njegovih podataka odgovora dijelovima vašeg zaslona koje ste postavili za prikaz tih podataka.
+- ako postoji pogreška ili nema rezultata, prikazujete poruku o pogrešci.
+
+✅ Korištenje obrazaca asinkronog programiranja još je jedan vrlo koristan alat u vašem alatu. Pročitajte [o različitim načinima](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/async_function) na koje možete konfigurirati ovu vrstu koda.
+
+Čestitamo! Ako izgradite svoje proširenje (`npm run build`) i osvježite ga u svom panelu proširenja, imate funkcionalno proširenje! Jedina stvar koja ne radi je ikona, a to ćete popraviti u sljedećoj lekciji.
+
+---
+
+## 🚀 Izazov
+
+Razgovarali smo o nekoliko vrsta API-ja u ovim lekcijama. Odaberite web API i istražite detaljno što nudi. Na primjer, pogledajte API-je dostupne unutar preglednika, poput [HTML Drag and Drop API](https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_API). Što čini dobar API prema vašem mišljenju?
+
+## Kviz nakon predavanja
+
+[Kviz nakon predavanja](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/26)
+
+## Pregled i samostalno učenje
+
+U ovoj lekciji naučili ste o LocalStorage i API-jima, oba vrlo korisna za profesionalnog web programera. Možete li razmisliti o tome kako ove dvije stvari rade zajedno? Razmislite o tome kako biste osmislili web stranicu koja bi pohranjivala stavke koje koristi API.
+
+## Zadatak
+
+[Usvojite API](assignment.md)
+
+---
+
+**Odricanje od odgovornosti**:  
+Ovaj dokument je preveden korištenjem AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati mjerodavnim izvorom. Za ključne informacije preporučuje se profesionalni prijevod od strane stručnjaka. Ne preuzimamo odgovornost za bilo kakve nesporazume ili pogrešne interpretacije proizašle iz korištenja ovog prijevoda.
\ No newline at end of file
diff --git a/translations/hr/5-browser-extension/2-forms-browsers-local-storage/assignment.md b/translations/hr/5-browser-extension/2-forms-browsers-local-storage/assignment.md
new file mode 100644
index 00000000..6daeb573
--- /dev/null
+++ b/translations/hr/5-browser-extension/2-forms-browsers-local-storage/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "a0c78d1dd9d1acdbf7f52e7cc3ebe1a7",
+  "translation_date": "2025-08-27T22:25:01+00:00",
+  "source_file": "5-browser-extension/2-forms-browsers-local-storage/assignment.md",
+  "language_code": "hr"
+}
+-->
+# Usvojite API
+
+## Upute
+
+API-ji mogu biti vrlo zabavni za korištenje. Evo [popisa mnogih besplatnih API-ja](https://github.com/public-apis/public-apis). Odaberite jedan API i izradite proširenje za preglednik koje rješava neki problem. To može biti mali problem, poput nedostatka slika kućnih ljubimaca (u tom slučaju isprobajte [dog CEO API](https://dog.ceo/dog-api/)) ili nešto veće - zabavite se!
+
+## Rubrika
+
+| Kriterij | Izvrsno                                                                  | Zadovoljavajuće                          | Potrebno poboljšanje    |
+| -------- | ------------------------------------------------------------------------ | ---------------------------------------- | ----------------------- |
+|          | Predano je potpuno proširenje za preglednik koje koristi API s gornjeg popisa | Predano je djelomično proširenje za preglednik | Predano rješenje ima greške |
+
+---
+
+**Odricanje od odgovornosti**:  
+Ovaj dokument je preveden pomoću AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za ključne informacije preporučuje se profesionalni prijevod od strane čovjeka. Ne preuzimamo odgovornost za nesporazume ili pogrešna tumačenja koja mogu proizaći iz korištenja ovog prijevoda.
\ No newline at end of file
diff --git a/translations/hr/5-browser-extension/3-background-tasks-and-performance/README.md b/translations/hr/5-browser-extension/3-background-tasks-and-performance/README.md
new file mode 100644
index 00000000..0fb4c76a
--- /dev/null
+++ b/translations/hr/5-browser-extension/3-background-tasks-and-performance/README.md
@@ -0,0 +1,176 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "f198c6b817b4b2a99749f4662e7cae98",
+  "translation_date": "2025-08-27T22:15:50+00:00",
+  "source_file": "5-browser-extension/3-background-tasks-and-performance/README.md",
+  "language_code": "hr"
+}
+-->
+# Projekt proširenja preglednika, dio 3: Naučite o pozadinskim zadacima i performansama
+
+## Kviz prije predavanja
+
+[Kviz prije predavanja](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/27)
+
+### Uvod
+
+U posljednje dvije lekcije ovog modula naučili ste kako izraditi obrazac i područje za prikaz podataka dohvaćenih s API-ja. To je vrlo standardan način stvaranja web prisutnosti na internetu. Čak ste naučili kako asinkrono dohvaćati podatke. Vaše proširenje preglednika gotovo je dovršeno.
+
+Preostaje upravljati nekim pozadinskim zadacima, uključujući osvježavanje boje ikone proširenja, pa je ovo odličan trenutak za razgovor o tome kako preglednik upravlja ovakvim zadacima. Razmislimo o ovim zadacima preglednika u kontekstu performansi vaših web resursa dok ih gradite.
+
+## Osnove web performansi
+
+> "Performanse web stranice odnose se na dvije stvari: koliko brzo se stranica učitava i koliko brzo se kod na njoj izvršava." -- [Zack Grossbart](https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/)
+
+Tema kako učiniti vaše web stranice iznimno brzim na svim vrstama uređaja, za sve vrste korisnika, u svim vrstama situacija, očekivano je opsežna. Evo nekoliko točaka koje treba imati na umu dok gradite standardni web projekt ili proširenje preglednika.
+
+Prva stvar koju trebate učiniti kako biste osigurali da vaša stranica radi učinkovito jest prikupiti podatke o njezinim performansama. Prvo mjesto za to su razvojni alati vašeg web preglednika. U Edgeu možete odabrati gumb "Postavke i više" (ikona tri točke u gornjem desnom kutu preglednika), zatim navigirati do Više alata > Razvojni alati i otvoriti karticu Performanse. Također možete koristiti tipkovne prečace `Ctrl` + `Shift` + `I` na Windowsu ili `Option` + `Command` + `I` na Macu za otvaranje razvojnih alata.
+
+Kartica Performanse sadrži alat za profiliranje. Otvorite web stranicu (isprobajte, na primjer, [https://www.microsoft.com](https://www.microsoft.com/?WT.mc_id=academic-77807-sagibbon)) i kliknite gumb 'Record', zatim osvježite stranicu. Zaustavite snimanje u bilo kojem trenutku i moći ćete vidjeti rutine koje se generiraju za 'script', 'render' i 'paint' stranice:
+
+![Edge profiler](../../../../translated_images/profiler.5a4a62479c5df01cfec9aab74173dba13f91d2c968e1a1ae434c26165792df15.hr.png)
+
+✅ Posjetite [Microsoft dokumentaciju](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) o kartici Performanse u Edgeu.
+
+> Savjet: kako biste dobili točno očitanje vremena pokretanja vaše stranice, očistite predmemoriju preglednika.
+
+Odaberite elemente vremenske trake profila kako biste se približili događajima koji se događaju dok se vaša stranica učitava.
+
+Dobijte snimku performansi vaše stranice odabirom dijela vremenske trake profila i pregledom sažetka:
+
+![Edge profiler snapshot](../../../../translated_images/snapshot.97750180ebcad73794a3594b36925eb5c8dbaac9e03fec7f9b974188c9ac63c7.hr.png)
+
+Provjerite karticu Dnevnik događaja kako biste vidjeli je li neki događaj trajao dulje od 15 ms:
+
+![Edge event log](../../../../translated_images/log.804026979f3707e00eebcfa028b2b5a88cec6292f858767bb6703afba65a7d9c.hr.png)
+
+✅ Upoznajte svoj alat za profiliranje! Otvorite razvojne alate na ovoj stranici i provjerite postoje li uska grla. Koji je resurs najsporije učitavanje? Najbrže?
+
+## Provjere profiliranja
+
+Općenito, postoje neka "problematična područja" na koja bi svaki web programer trebao paziti prilikom izrade stranice kako bi izbjegao neugodne iznenađenja kada dođe vrijeme za implementaciju u produkciju.
+
+**Veličine resursa**: Web je postao 'teži', a time i sporiji, tijekom posljednjih nekoliko godina. Dio te težine odnosi se na upotrebu slika.
+
+✅ Pregledajte [Internet arhivu](https://httparchive.org/reports/page-weight) za povijesni pregled težine stranica i više.
+
+Dobra praksa je osigurati da su vaše slike optimizirane i isporučene u odgovarajućoj veličini i rezoluciji za vaše korisnike.
+
+**DOM traversali**: Preglednik mora izgraditi svoj Document Object Model na temelju koda koji napišete, pa je u interesu dobrih performansi stranice držati oznake minimalnim, koristeći i stilizirajući samo ono što stranici treba. Na primjer, višak CSS-a povezan s jednom stranicom mogao bi se optimizirati; stilovi koji se trebaju koristiti samo na jednoj stranici ne trebaju biti uključeni u glavnu datoteku stilova.
+
+**JavaScript**: Svaki JavaScript programer trebao bi paziti na 'render-blocking' skripte koje se moraju učitati prije nego što se ostatak DOM-a može obraditi i prikazati u pregledniku. Razmislite o korištenju `defer` s vašim inline skriptama (kao što je učinjeno u modulu Terrarium).
+
+✅ Isprobajte neke stranice na [web stranici za testiranje brzine stranica](https://www.webpagetest.org/) kako biste saznali više o uobičajenim provjerama koje se provode za određivanje performansi stranice.
+
+Sada kada imate ideju o tome kako preglednik prikazuje resurse koje mu šaljete, pogledajmo posljednje stvari koje trebate učiniti kako biste dovršili svoje proširenje:
+
+### Izradite funkciju za izračun boje
+
+Radite u `/src/index.js`, dodajte funkciju pod nazivom `calculateColor()` nakon niza `const` varijabli koje ste postavili za pristup DOM-u:
+
+```JavaScript
+function calculateColor(value) {
+	let co2Scale = [0, 150, 600, 750, 800];
+	let colors = ['#2AA364', '#F5EB4D', '#9E4229', '#381D02', '#381D02'];
+
+	let closestNum = co2Scale.sort((a, b) => {
+		return Math.abs(a - value) - Math.abs(b - value);
+	})[0];
+	console.log(value + ' is closest to ' + closestNum);
+	let num = (element) => element > closestNum;
+	let scaleIndex = co2Scale.findIndex(num);
+
+	let closestColor = colors[scaleIndex];
+	console.log(scaleIndex, closestColor);
+
+	chrome.runtime.sendMessage({ action: 'updateIcon', value: { color: closestColor } });
+}
+```
+
+Što se ovdje događa? Prosljeđujete vrijednost (intenzitet ugljika) iz API poziva koji ste dovršili u posljednjoj lekciji, a zatim izračunavate koliko je njezina vrijednost blizu indeksu prikazanom u polju boja. Zatim šaljete tu najbližu vrijednost boje preko chrome runtime-a.
+
+Chrome.runtime ima [API](https://developer.chrome.com/extensions/runtime) koji upravlja svim vrstama pozadinskih zadataka, a vaše proširenje ga koristi:
+
+> "Koristite chrome.runtime API za dohvaćanje pozadinske stranice, vraćanje detalja o manifestu i slušanje i odgovaranje na događaje u životnom ciklusu aplikacije ili proširenja. Također možete koristiti ovaj API za pretvaranje relativne staze URL-ova u potpuno kvalificirane URL-ove."
+
+✅ Ako razvijate ovo proširenje preglednika za Edge, moglo bi vas iznenaditi da koristite chrome API. Novije verzije Edge preglednika rade na Chromium pregledničkom motoru, pa možete koristiti ove alate.
+
+> Napomena: ako želite profilirati proširenje preglednika, pokrenite razvojne alate unutar samog proširenja, jer je ono vlastita zasebna instanca preglednika.
+
+### Postavite zadanu boju ikone
+
+Sada, u funkciji `init()`, postavite ikonu na generičku zelenu boju za početak tako što ćete ponovno pozvati chromeovu akciju `updateIcon`:
+
+```JavaScript
+chrome.runtime.sendMessage({
+	action: 'updateIcon',
+		value: {
+			color: 'green',
+		},
+});
+```
+
+### Pozovite funkciju, izvršite poziv
+
+Zatim, pozovite tu funkciju koju ste upravo stvorili dodavanjem u obećanje koje vraća C02Signal API:
+
+```JavaScript
+//let CO2...
+calculateColor(CO2);
+```
+
+I na kraju, u `/dist/background.js`, dodajte slušatelja za ove pozadinske pozive akcija:
+
+```JavaScript
+chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) {
+	if (msg.action === 'updateIcon') {
+		chrome.browserAction.setIcon({ imageData: drawIcon(msg.value) });
+	}
+});
+//borrowed from energy lollipop extension, nice feature!
+function drawIcon(value) {
+	let canvas = document.createElement('canvas');
+	let context = canvas.getContext('2d');
+
+	context.beginPath();
+	context.fillStyle = value.color;
+	context.arc(100, 100, 50, 0, 2 * Math.PI);
+	context.fill();
+
+	return context.getImageData(50, 50, 100, 100);
+}
+```
+
+U ovom kodu dodajete slušatelja za sve poruke koje dolaze upravitelju pozadinskih zadataka. Ako se zove 'updateIcon', tada se sljedeći kod izvršava kako bi nacrtao ikonu odgovarajuće boje koristeći Canvas API.
+
+✅ Više o Canvas API-ju naučit ćete u [lekcijama o svemirskoj igri](../../6-space-game/2-drawing-to-canvas/README.md).
+
+Sada ponovno izgradite svoje proširenje (`npm run build`), osvježite i pokrenite svoje proširenje te promatrajte promjenu boje. Je li pravo vrijeme za obaviti neki posao ili oprati suđe? Sada znate!
+
+Čestitamo, izradili ste korisno proširenje preglednika i naučili više o tome kako preglednik radi i kako profilirati njegove performanse.
+
+---
+
+## 🚀 Izazov
+
+Istražite neke open source web stranice koje postoje već dugo vremena i, na temelju njihove povijesti na GitHubu, pokušajte utvrditi kako su optimizirane tijekom godina za performanse, ako uopće jesu. Koja je najčešća bolna točka?
+
+## Kviz nakon predavanja
+
+[Kviz nakon predavanja](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/28)
+
+## Pregled i samostalno učenje
+
+Razmislite o prijavi na [newsletter o performansama](https://perf.email/).
+
+Istražite neke načine na koje preglednici procjenjuju web performanse pregledavajući kartice performansi u njihovim web alatima. Pronalazite li neke velike razlike?
+
+## Zadatak
+
+[Analizirajte stranicu za performanse](assignment.md)
+
+---
+
+**Odricanje od odgovornosti**:  
+Ovaj dokument je preveden pomoću AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za ključne informacije preporučuje se profesionalni prijevod od strane čovjeka. Ne preuzimamo odgovornost za bilo kakva nesporazume ili pogrešne interpretacije koje proizlaze iz korištenja ovog prijevoda.
\ No newline at end of file
diff --git a/translations/hr/5-browser-extension/3-background-tasks-and-performance/assignment.md b/translations/hr/5-browser-extension/3-background-tasks-and-performance/assignment.md
new file mode 100644
index 00000000..09e0a45b
--- /dev/null
+++ b/translations/hr/5-browser-extension/3-background-tasks-and-performance/assignment.md
@@ -0,0 +1,23 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "fc09b0fb314a5ab0507ba99216e6a843",
+  "translation_date": "2025-08-27T22:17:20+00:00",
+  "source_file": "5-browser-extension/3-background-tasks-and-performance/assignment.md",
+  "language_code": "hr"
+}
+-->
+# Analizirajte web stranicu za performanse
+
+Pripremite detaljno izvješće o web stranici, prikazujući područja gdje performanse nisu zadovoljavajuće. Analizirajte zašto je stranica spora i što možete učiniti da je ubrzate. Nemojte se oslanjati samo na alate preglednika, već istražite i druge alate koji mogu pomoći u vašem izvješću.
+
+## Rubrika
+
+| Kriterij | Izvrsno                                                                                                   | Zadovoljavajuće             | Potrebno poboljšanje          |
+| -------- | --------------------------------------------------------------------------------------------------------- | --------------------------- | ----------------------------- |
+|          | Izvješće je predstavljeno s detaljima koji nisu samo iz alata preglednika, već i iz alata trećih strana ako su dostupni | Predstavljeno je osnovno izvješće | Predstavljeno je minimalno izvješće |
+
+---
+
+**Odricanje od odgovornosti**:  
+Ovaj dokument je preveden pomoću AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za kritične informacije preporučuje se profesionalni prijevod od strane ljudskog prevoditelja. Ne preuzimamo odgovornost za bilo kakve nesporazume ili pogrešne interpretacije koje proizlaze iz korištenja ovog prijevoda.
\ No newline at end of file
diff --git a/translations/hr/5-browser-extension/README.md b/translations/hr/5-browser-extension/README.md
new file mode 100644
index 00000000..bc61df8e
--- /dev/null
+++ b/translations/hr/5-browser-extension/README.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "b121a279a6ab39878491f3e572673515",
+  "translation_date": "2025-08-27T22:12:23+00:00",
+  "source_file": "5-browser-extension/README.md",
+  "language_code": "hr"
+}
+-->
+# Izrada ekstenzije za preglednik
+
+Izrada ekstenzija za preglednike zabavan je i zanimljiv način razmišljanja o performansama vaših aplikacija dok gradite drugačiju vrstu web resursa. Ovaj modul uključuje lekcije o tome kako preglednici funkcioniraju, kako implementirati ekstenziju za preglednik, kako izraditi obrazac, pozvati API, koristiti lokalnu pohranu te kako procijeniti performanse vaše web stranice i poboljšati ih.
+
+Izradit ćete ekstenziju za preglednik koja radi na Edgeu, Chromeu i Firefoxu. Ova ekstenzija, koja je poput mini web stranice prilagođene vrlo specifičnom zadatku, provjerava [C02 Signal API](https://www.co2signal.com) za podatke o potrošnji električne energije i intenzitetu ugljika u određenoj regiji te vraća očitanje o ugljičnom otisku te regije.
+
+Ekstenzija se može koristiti ad hoc od strane korisnika nakon što se unesu API ključ i kod regije u obrazac kako bi se odredila lokalna potrošnja električne energije, čime se pružaju podaci koji mogu utjecati na odluke korisnika o potrošnji električne energije. Na primjer, možda bi bilo bolje odgoditi korištenje sušilice za rublje (aktivnost s visokim intenzitetom ugljika) tijekom razdoblja velike potrošnje električne energije u vašoj regiji.
+
+### Teme
+
+1. [O preglednicima](1-about-browsers/README.md)
+2. [Obrasci i lokalna pohrana](2-forms-browsers-local-storage/README.md)
+3. [Pozadinski zadaci i performanse](3-background-tasks-and-performance/README.md)
+
+### Zasluge
+
+![zelena ekstenzija za preglednik](../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.hr.png)
+
+## Zasluge
+
+Ideju za ovaj web projekt usmjeren na ugljik dao je Asim Hussain, voditelj Microsoftovog tima za Green Cloud Advocacy i autor [Green Principles](https://principles.green/). Izvorno je bio [projekt web stranice](https://github.com/jlooper/green).
+
+Struktura ekstenzije za preglednik bila je inspirirana [COVID ekstenzijom Adebole Adenirana](https://github.com/onedebos/covtension).
+
+Koncept sustava ikona 'točkica' predložen je prema strukturi ikona ekstenzije za preglednik [Energy Lollipop](https://energylollipop.com/) za emisije u Kaliforniji.
+
+Ove lekcije napisane su s ♥️ od strane [Jen Looper](https://www.twitter.com/jenlooper)
+
+---
+
+**Odricanje od odgovornosti**:  
+Ovaj dokument je preveden pomoću AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za ključne informacije preporučuje se profesionalni prijevod od strane čovjeka. Ne preuzimamo odgovornost za bilo kakva nesporazuma ili pogrešna tumačenja koja proizlaze iz korištenja ovog prijevoda.
\ No newline at end of file
diff --git a/translations/hr/5-browser-extension/solution/README.md b/translations/hr/5-browser-extension/solution/README.md
new file mode 100644
index 00000000..5a96220f
--- /dev/null
+++ b/translations/hr/5-browser-extension/solution/README.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "fab4e6b4f0efcd587a9029d82991f597",
+  "translation_date": "2025-08-27T22:18:11+00:00",
+  "source_file": "5-browser-extension/solution/README.md",
+  "language_code": "hr"
+}
+-->
+# Carbon Trigger Browser Ekstenzija: Dovršeni Kod
+
+Koristeći tmrow-ov C02 Signal API za praćenje potrošnje električne energije, izradite ekstenziju za preglednik kako biste imali podsjetnik u svom pregledniku o tome koliko je velika potrošnja električne energije u vašoj regiji. Povremeno korištenje ove ekstenzije pomoći će vam da donesete odluke o svojim aktivnostima na temelju tih informacija.
+
+![screenshot ekstenzije](../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.hr.png)
+
+## Početak
+
+Trebat ćete imati instaliran [npm](https://npmjs.com). Preuzmite kopiju ovog koda u mapu na svom računalu.
+
+Instalirajte sve potrebne pakete:
+
+```
+npm install
+```
+
+Izgradite ekstenziju pomoću webpack-a:
+
+```
+npm run build
+```
+
+Za instalaciju na Edge pregledniku, koristite izbornik s 'tri točke' u gornjem desnom kutu preglednika kako biste pronašli panel Ekstenzije. Odatle odaberite 'Učitaj nepakirano' za učitavanje nove ekstenzije. Na upit otvorite mapu 'dist' i ekstenzija će se učitati. Za korištenje, trebat će vam API ključ za CO2 Signal API ([nabavite ga ovdje putem e-pošte](https://www.co2signal.com/) - unesite svoju e-poštu u okvir na ovoj stranici) i [kod za vašu regiju](http://api.electricitymap.org/v3/zones) koji odgovara [Electricity Map](https://www.electricitymap.org/map) (na primjer, u Bostonu koristim 'US-NEISO').
+
+![instalacija](../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.hr.png)
+
+Nakon što unesete API ključ i regiju u sučelje ekstenzije, obojena točka u traci ekstenzije preglednika trebala bi se promijeniti kako bi odražavala potrošnju energije u vašoj regiji i dala vam smjernice o tome koje aktivnosti s velikom potrošnjom energije bi bile prikladne za vas. Koncept iza ovog sustava 'točke' inspiriran je [Energy Lollipop ekstenzijom](https://energylollipop.com/) za emisije u Kaliforniji.
+
+---
+
+**Odricanje od odgovornosti**:  
+Ovaj dokument je preveden korištenjem AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati mjerodavnim izvorom. Za ključne informacije preporučuje se profesionalni prijevod od strane stručnjaka. Ne preuzimamo odgovornost za bilo kakve nesporazume ili pogrešne interpretacije proizašle iz korištenja ovog prijevoda.
\ No newline at end of file
diff --git a/translations/hr/5-browser-extension/solution/translation/README.es.md b/translations/hr/5-browser-extension/solution/translation/README.es.md
new file mode 100644
index 00000000..22fa8e8d
--- /dev/null
+++ b/translations/hr/5-browser-extension/solution/translation/README.es.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "cbaf73f94a9ab4c680a10ef871e92948",
+  "translation_date": "2025-08-27T22:20:16+00:00",
+  "source_file": "5-browser-extension/solution/translation/README.es.md",
+  "language_code": "hr"
+}
+-->
+# Ekstenzija preglednika Carbon Trigger: Potpuni kod
+
+Koristeći API za CO2 Signal od tmrow za praćenje potrošnje električne energije, izradite ekstenziju za preglednik kako biste imali podsjetnik direktno u svom pregledniku o potrošnji električne energije u vašoj regiji. Korištenje ove ad hoc ekstenzije pomoći će vam donositi odluke o vašim aktivnostima na temelju tih informacija.
+
+![screenshot ekstenzije](../../../../../translated_images/extension-screenshot.352c4c3ba54e4041ad2f6af749d562cc5705f527b5826efd53d11c3528f5ae45.hr.png)
+
+## Početak
+
+Morate imati instaliran [npm](https://npmjs.com). Preuzmite kopiju ovog koda u mapu na svom računalu.
+
+Instalirajte sve potrebne pakete:
+
+```
+npm install
+```
+
+Izgradite ekstenziju pomoću webpacka:
+
+```
+npm run build
+```
+
+Za instalaciju u Edgeu, koristite izbornik 'tri točke' u gornjem desnom kutu preglednika kako biste pronašli panel Ekstenzije. Tamo odaberite 'Učitaj raspakirano' za učitavanje nove ekstenzije. Otvorite mapu 'dist' kada se to zatraži i ekstenzija će se učitati. Za korištenje, trebat će vam API ključ za CO2 Signal API ([nabavite ga ovdje putem e-pošte](https://www.co2signal.com/) - unesite svoju e-poštu u okvir na ovoj stranici) i [kod za vašu regiju](http://api.electricitymap.org/v3/zones) koji odgovara [Električnom mapu](https://www.electricitymap.org/map) (na primjer, u Bostonu koristim 'US-NEISO').
+
+![instalacija](../../../../../translated_images/install-on-edge.8bd0ee3ca7dcda1c5334b5195603a43c864e3b38d088b03d57376d25e77b9459.hr.png)
+
+Kada unesete API ključ i regiju u sučelje ekstenzije, točka boje na traci ekstenzije preglednika trebala bi se promijeniti kako bi odražavala potrošnju energije vaše regije i dala vam pokazatelj o aktivnostima koje troše puno energije, a koje bi bile prikladne za vas. Koncept iza ovog sustava "točaka" inspiriran je [ekstenzijom Energy Lollipop](https://energylollipop.com/) za emisije u Kaliforniji.
+
+---
+
+**Odricanje od odgovornosti**:  
+Ovaj dokument je preveden pomoću AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za ključne informacije preporučuje se profesionalni prijevod od strane čovjeka. Ne preuzimamo odgovornost za bilo kakve nesporazume ili pogrešne interpretacije koje proizlaze iz korištenja ovog prijevoda.
\ No newline at end of file
diff --git a/translations/hr/5-browser-extension/solution/translation/README.fr.md b/translations/hr/5-browser-extension/solution/translation/README.fr.md
new file mode 100644
index 00000000..17353a6e
--- /dev/null
+++ b/translations/hr/5-browser-extension/solution/translation/README.fr.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "9361268ca430b2579375009e1eceb5e5",
+  "translation_date": "2025-08-27T22:21:18+00:00",
+  "source_file": "5-browser-extension/solution/translation/README.fr.md",
+  "language_code": "hr"
+}
+-->
+# Proširenje preglednika Carbon Trigger: Završeni kod
+
+Koristeći API C02 Signal od tmrow za praćenje potrošnje električne energije, izradite proširenje preglednika kako biste imali podsjetnik direktno u svom pregledniku o potrošnji električne energije u vašem području. Korištenje ovog prilagođenog proširenja pomoći će vam da donesete odluke o svojim aktivnostima na temelju tih informacija.
+
+![screenshot proširenja](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.hr.png)
+
+## Početak
+
+Morate imati instaliran [npm](https://npmjs.com). Preuzmite kopiju ovog koda u mapu na svom računalu.
+
+Instalirajte sve potrebne pakete:
+
+```
+npm install
+```
+
+Izgradite proširenje pomoću webpacka:
+
+```
+npm run build
+```
+
+Za instalaciju na Edgeu, koristite izbornik 'tri točke' u gornjem desnom kutu preglednika kako biste pronašli panel Proširenja. Odatle odaberite 'Učitaj nekomprimirano proširenje' za učitavanje novog proširenja. Otvorite mapu 'dist' na upit i proširenje će se učitati. Za korištenje, trebat će vam API ključ za CO2 Signal API ([nabavite ga ovdje putem e-pošte](https://www.co2signal.com/) - unesite svoju e-poštu u polje na toj stranici) i [kod za vašu regiju](http://api.electricitymap.org/v3/zones) koji odgovara [Karti električne energije](https://www.electricitymap.org/map) (na primjer, u Bostonu koristim 'US-NEISO').
+
+![instalacija](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.hr.png)
+
+Nakon što unesete API ključ i regiju u sučelje proširenja, obojena točka u traci proširenja preglednika trebala bi se promijeniti kako bi odražavala potrošnju energije u vašem području i pružila vam indikator o energetski intenzivnim aktivnostima koje bi bilo prikladno obavljati. Koncept iza ovog sustava 'točaka' inspiriran je [proširenjem Energy Lollipop](https://energylollipop.com/) za emisije u Kaliforniji.
+
+---
+
+**Odricanje od odgovornosti**:  
+Ovaj dokument je preveden pomoću AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za kritične informacije preporučuje se profesionalni prijevod od strane ljudskog prevoditelja. Ne preuzimamo odgovornost za bilo kakve nesporazume ili pogrešne interpretacije koje proizlaze iz korištenja ovog prijevoda.
\ No newline at end of file
diff --git a/translations/hr/5-browser-extension/solution/translation/README.hi.md b/translations/hr/5-browser-extension/solution/translation/README.hi.md
new file mode 100644
index 00000000..cd6ecac4
--- /dev/null
+++ b/translations/hr/5-browser-extension/solution/translation/README.hi.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "dd58ae1b7707034f055718c1b68bc8de",
+  "translation_date": "2025-08-27T22:18:47+00:00",
+  "source_file": "5-browser-extension/solution/translation/README.hi.md",
+  "language_code": "hr"
+}
+-->
+# Carbon Trigger Browser Extension: Završeni kod
+
+Koristeći tmrow-ov C02 Signal API za praćenje potrošnje električne energije, izrađujemo ekstenziju za preglednik koja vas podsjeća koliko je potrošnja električne energije u vašem području trenutno velika. Korištenje ove ekstenzije može vam pomoći da donesete odluke o svojim aktivnostima na temelju tih informacija.
+
+![Snimka ekstenzije](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.hr.png)
+
+## Početak
+
+Morate instalirati [npm](https://npmjs.com). Preuzmite kopiju ovog koda u mapu na svom računalu.
+
+Instalirajte sve potrebne pakete:
+
+```
+npm install
+```
+
+Izradite ekstenziju pomoću Webpack-a:
+
+```
+npm run build
+```
+
+Za instalaciju na Edge pregledniku, koristite izbornik 'tri točke' u gornjem desnom kutu preglednika kako biste pronašli panel za ekstenzije. Tamo odaberite 'Load unpacked' za učitavanje nove ekstenzije. Na upitu otvorite mapu 'dist' i ekstenzija će se učitati. Za korištenje, trebat će vam API ključ za CO2 Signal ([dobijte ga putem e-pošte ovdje](https://www.co2signal.com/) - unesite svoju e-mail adresu u okvir na toj stranici) i [kod za vaše područje](http://api.electricitymap.org/v3/zones) s [Electricity Map](https://www.electricitymap.org/map) (na primjer, za Boston koristim 'US-NEISO').
+
+![instalacija](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.hr.png)
+
+Nakon što unesete API ključ i kod područja u sučelje ekstenzije, obojena točka u traci ekstenzije preglednika trebala bi se promijeniti kako bi odražavala potrošnju energije u vašem području. To će vam dati indikator o tome koje energetski intenzivne aktivnosti su prikladne za vaše performanse. Koncept ove 'točke' sustava inspiriran je [Energy Lollipop ekstenzijom](https://energylollipop.com/) za emisije u Kaliforniji.
+
+---
+
+**Odricanje od odgovornosti**:  
+Ovaj dokument je preveden pomoću AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za ključne informacije preporučuje se profesionalni prijevod od strane čovjeka. Ne preuzimamo odgovornost za nesporazume ili pogrešna tumačenja koja mogu proizaći iz korištenja ovog prijevoda.
\ No newline at end of file
diff --git a/translations/hr/5-browser-extension/solution/translation/README.it.md b/translations/hr/5-browser-extension/solution/translation/README.it.md
new file mode 100644
index 00000000..df87d711
--- /dev/null
+++ b/translations/hr/5-browser-extension/solution/translation/README.it.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "9a6b22a2eff0f499b66236be973b24ad",
+  "translation_date": "2025-08-27T22:19:14+00:00",
+  "source_file": "5-browser-extension/solution/translation/README.it.md",
+  "language_code": "hr"
+}
+-->
+# Proširenje preglednika Carbon Trigger: kod za početak
+
+Koristit ćemo API Signal CO2 od tmrow za praćenje potrošnje električne energije kako bismo stvorili proširenje za preglednik koje će vam omogućiti da imate podsjetnik direktno u svom pregledniku o tome koliko je intenzivna potrošnja električne energije u vašoj regiji. Korištenje ovog prilagođenog proširenja pomoći će vam da procijenite svoje aktivnosti na temelju tih informacija.
+
+![screenshot proširenja](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.hr.png)
+
+## Za početak
+
+Potrebno je da [npm](https://npmjs.com) bude instaliran. Preuzmite kopiju ovog koda u mapu na svom računalu.
+
+Instalirajte sve potrebne pakete:
+
+```
+npm install
+```
+
+Kreirajte proširenje pomoću webpacka:
+
+```
+npm run build
+```
+
+Za instalaciju na Edge, koristite izbornik "tri točke" u gornjem desnom kutu preglednika kako biste pronašli panel Proširenja. Ako već nije aktiviran, uključite Način za razvojne programere (dolje lijevo). Odaberite "Učitaj raspakirano" kako biste učitali novo proširenje. Otvorite mapu "dist" na upitu i proširenje će biti učitano. Za korištenje, trebat će vam API ključ za CO2 Signal API (možete ga [dobiti ovdje putem e-maila](https://www.co2signal.com/) - unesite svoju e-mail adresu u polje na toj stranici) i [kod za svoju regiju](http://api.electricitymap.org/v3/zones) koji odgovara [električnoj karti](https://www.electricitymap.org/map) (na primjer, za Boston, "US-NEISO").
+
+![instalacija](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.hr.png)
+
+Nakon što unesete API ključ i regiju u sučelje proširenja, obojena točka na traci proširenja preglednika trebala bi se promijeniti kako bi odražavala potrošnju energije u regiji i pružila smjernice o tome koje aktivnosti s visokim energetskim intenzitetom bi bile prikladne za izvođenje. Koncept iza ovog sustava "točaka" inspiriran je [proširenjem Energy Lollipop](https://energylollipop.com/) za emisije u Kaliforniji.
+
+---
+
+**Odricanje od odgovornosti**:  
+Ovaj dokument je preveden pomoću AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za ključne informacije preporučuje se profesionalni prijevod od strane čovjeka. Ne preuzimamo odgovornost za bilo kakve nesporazume ili pogrešne interpretacije koje proizlaze iz korištenja ovog prijevoda.
\ No newline at end of file
diff --git a/translations/hr/5-browser-extension/solution/translation/README.ja.md b/translations/hr/5-browser-extension/solution/translation/README.ja.md
new file mode 100644
index 00000000..d667c735
--- /dev/null
+++ b/translations/hr/5-browser-extension/solution/translation/README.ja.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "3f5e6821e0febccfc5d05e7c944d9e3d",
+  "translation_date": "2025-08-27T22:19:47+00:00",
+  "source_file": "5-browser-extension/solution/translation/README.ja.md",
+  "language_code": "hr"
+}
+-->
+# Proširenje preglednika Carbon Trigger: Završeni kod
+
+Izradite proširenje preglednika koje koristi tmrow API za CO2 Signal kako bi pratilo potrošnju električne energije u vašem području i prikazivalo podsjetnik o tome koliko je potrošnja energije visoka. Ovo proširenje možete koristiti ad hoc kako biste donosili odluke o svojim aktivnostima na temelju tih informacija.
+
+![screenshot proširenja](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.hr.png)
+
+## Početak
+
+Potrebno je da imate instaliran [npm](https://npmjs.com). Preuzmite kopiju ovog koda u mapu na svom računalu.
+
+Instalirajte sve potrebne pakete.
+
+```
+npm install
+```
+
+Izgradite proširenje pomoću webpacka.
+
+```
+npm run build
+```
+
+Za instalaciju na Edge preglednik, pronađite panel "Proširenja" putem izbornika "tri točke" u gornjem desnom kutu preglednika. Tamo odaberite opciju "Load Unpacked" kako biste učitali novo proširenje. Kada se pojavi upit, otvorite mapu "dist" i proširenje će biti učitano. Za korištenje, trebat će vam API ključ za CO2 Signal ([nabavite ga ovdje putem e-maila](https://www.co2signal.com/) - unesite svoj e-mail u okvir na toj stranici) i [kod za vašu regiju](http://api.electricitymap.org/v3/zones) koji odgovara [Electricity Map](https://www.electricitymap.org/map) (na primjer, za Boston koristite 'US-NEISO').
+
+![instalacija](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.hr.png)
+
+Nakon što unesete API ključ i regiju u sučelje proširenja, obojena točka koja se prikazuje na traci proširenja preglednika mijenjat će boju kako bi odražavala potrošnju energije u vašem području. To će vam pomoći da odlučite koje aktivnosti zahtijevaju energiju i kada ih je najbolje obavljati. Koncept ovog sustava "točke" inspiriran je proširenjem [Energy Lollipop](https://energylollipop.com/) za emisije u Kaliforniji.
+
+---
+
+**Odricanje od odgovornosti**:  
+Ovaj dokument je preveden pomoću AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za ključne informacije preporučuje se profesionalni prijevod od strane čovjeka. Ne preuzimamo odgovornost za nesporazume ili pogrešne interpretacije koje mogu proizaći iz korištenja ovog prijevoda.
\ No newline at end of file
diff --git a/translations/hr/5-browser-extension/solution/translation/README.ms.md b/translations/hr/5-browser-extension/solution/translation/README.ms.md
new file mode 100644
index 00000000..024e99fb
--- /dev/null
+++ b/translations/hr/5-browser-extension/solution/translation/README.ms.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "21b364c158c8e4f698de65eeac16c9fe",
+  "translation_date": "2025-08-27T22:20:43+00:00",
+  "source_file": "5-browser-extension/solution/translation/README.ms.md",
+  "language_code": "hr"
+}
+-->
+# Proširenje Preglednika Carbon Trigger: Kompletan Kod
+
+Koristeći API CO2 Signal od tmrow za praćenje potrošnje električne energije, izradite proširenje preglednika kako biste mogli dobiti obavijesti u svom pregledniku o tome koliko je intenzivna potrošnja električne energije u vašoj regiji. Korištenje ovog proširenja može vam pomoći da donesete odluke o svojim aktivnostima na temelju tih informacija.
+
+![screenshot proširenja preglednika](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.hr.png)
+
+## Početak
+
+Potrebno je instalirati [npm](https://npmjs.com). Preuzmite kopiju ovog koda u mapu na svom računalu.
+
+Instalirajte sve potrebne pakete:
+
+```
+npm install
+```
+
+Izgradite proširenje pomoću webpacka:
+
+```
+npm run build
+```
+
+Za instalaciju na Edgeu, koristite izbornik 'tri točke' u gornjem desnom kutu preglednika kako biste pronašli panel Proširenja. Tamo odaberite 'Load Unpacked' za učitavanje novog proširenja. Otvorite mapu 'dist' na zahtjev i proširenje će se učitati. Za korištenje, trebat će vam API ključ za CO2 Signal API ([nabavite ga ovdje putem e-pošte](https://www.co2signal.com/) - unesite svoju e-poštu u polje na stranici) i [kod za vašu regiju](http://api.electricitymap.org/v3/zones) koji odgovara [Electricity Map](https://www.electricitymap.org/map) (u Bostonu, na primjer, koristim 'US-NEISO').
+
+![preuzimanje](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.hr.png)
+
+Nakon što unesete API ključ i regiju u sučelje proširenja, obojena točka na traci proširenja preglednika promijenit će se kako bi odražavala potrošnju energije u vašoj regiji i pružila vam smjernice o aktivnostima koje su prikladne za obavljanje. Koncept sustava 'točke' inspiriran je [proširenjem preglednika Energy Lollipop](https://energylollipop.com/) za emisije u Kaliforniji.
+
+---
+
+**Odricanje od odgovornosti**:  
+Ovaj dokument je preveden pomoću AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati mjerodavnim izvorom. Za ključne informacije preporučuje se profesionalni prijevod od strane stručnjaka. Ne preuzimamo odgovornost za bilo kakve nesporazume ili pogrešne interpretacije proizašle iz korištenja ovog prijevoda.
\ No newline at end of file
diff --git a/translations/hr/5-browser-extension/start/README.md b/translations/hr/5-browser-extension/start/README.md
new file mode 100644
index 00000000..cfb01a60
--- /dev/null
+++ b/translations/hr/5-browser-extension/start/README.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "26fd39046d264ba185dcb086d3a8cf3e",
+  "translation_date": "2025-08-27T22:17:43+00:00",
+  "source_file": "5-browser-extension/start/README.md",
+  "language_code": "hr"
+}
+-->
+# Carbon Trigger Browser Extension: Početni Kod
+
+Koristeći tmrowov C02 Signal API za praćenje potrošnje električne energije, izradite proširenje za preglednik kako biste imali podsjetnik u svom pregledniku o tome koliko je velika potrošnja električne energije u vašoj regiji. Korištenje ovog proširenja ad hoc pomoći će vam da donesete odluke o svojim aktivnostima na temelju tih informacija.
+
+![screenshot proširenja](../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.hr.png)
+
+## Početak
+
+Trebat ćete imati instaliran [npm](https://npmjs.com). Preuzmite kopiju ovog koda u mapu na svom računalu.
+
+Instalirajte sve potrebne pakete:
+
+```
+npm install
+```
+
+Izgradite proširenje pomoću webpacka
+
+```
+npm run build
+```
+
+Za instalaciju na Edgeu, koristite izbornik s 'tri točke' u gornjem desnom kutu preglednika kako biste pronašli panel za proširenja. Tamo odaberite 'Load Unpacked' za učitavanje novog proširenja. Otvorite mapu 'dist' na upitu i proširenje će se učitati. Za korištenje, trebat će vam API ključ za CO2 Signal API ([nabavite ga ovdje putem e-pošte](https://www.co2signal.com/) - unesite svoju e-poštu u okvir na ovoj stranici) i [kod za vašu regiju](http://api.electricitymap.org/v3/zones) koji odgovara [Electricity Map](https://www.electricitymap.org/map) (na primjer, u Bostonu koristim 'US-NEISO').
+
+![instalacija](../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.hr.png)
+
+Nakon što unesete API ključ i regiju u sučelje proširenja, obojena točka u traci proširenja preglednika trebala bi se promijeniti kako bi odražavala potrošnju energije u vašoj regiji i dala vam smjernice o tome koje aktivnosti s velikom potrošnjom energije bi bile prikladne za vas. Koncept iza ovog sustava 'točke' dobio sam od [Energy Lollipop proširenja](https://energylollipop.com/) za emisije u Kaliforniji.
+
+---
+
+**Odricanje od odgovornosti**:  
+Ovaj dokument je preveden korištenjem AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati mjerodavnim izvorom. Za ključne informacije preporučuje se profesionalni prijevod od strane stručnjaka. Ne preuzimamo odgovornost za bilo kakve nesporazume ili pogrešne interpretacije proizašle iz korištenja ovog prijevoda.
\ No newline at end of file
diff --git a/translations/hr/6-space-game/1-introduction/README.md b/translations/hr/6-space-game/1-introduction/README.md
new file mode 100644
index 00000000..7c994353
--- /dev/null
+++ b/translations/hr/6-space-game/1-introduction/README.md
@@ -0,0 +1,238 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "d9da6dc61fb712b29f65e108c79b8a5d",
+  "translation_date": "2025-08-27T22:34:46+00:00",
+  "source_file": "6-space-game/1-introduction/README.md",
+  "language_code": "hr"
+}
+-->
+# Izgradnja svemirske igre, 1. dio: Uvod
+
+![video](../../../../6-space-game/images/pewpew.gif)
+
+## Kviz prije predavanja
+
+[Kviz prije predavanja](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/29)
+
+### Nasljeđivanje i kompozicija u razvoju igara
+
+U prethodnim lekcijama nije bilo potrebe za razmišljanjem o arhitekturi aplikacija koje ste gradili, jer su projekti bili vrlo malog opsega. Međutim, kako vaše aplikacije rastu u veličini i složenosti, arhitektonske odluke postaju važnije. Postoje dva glavna pristupa za stvaranje većih aplikacija u JavaScriptu: *kompozicija* ili *nasljeđivanje*. Oba pristupa imaju svoje prednosti i nedostatke, ali objasnit ćemo ih u kontekstu igre.
+
+✅ Jedna od najpoznatijih knjiga o programiranju bavi se [dizajnerskim obrascima](https://en.wikipedia.org/wiki/Design_Patterns).
+
+U igri imate `objekte igre`, koji su objekti koji postoje na ekranu. To znači da imaju lokaciju u kartezijanskom koordinatnom sustavu, definiranu `x` i `y` koordinatama. Dok razvijate igru, primijetit ćete da svi vaši objekti igre imaju standardna svojstva, zajednička za svaku igru koju kreirate, a to su elementi koji su:
+
+- **temeljeni na lokaciji** Većina, ako ne i svi, elementi igre temelje se na lokaciji. To znači da imaju lokaciju, `x` i `y`.
+- **pokretni** To su objekti koji se mogu premjestiti na novu lokaciju. To je obično heroj, čudovište ili NPC (lik koji nije igrač), ali ne, na primjer, statični objekt poput stabla.
+- **samouništavajući** Ovi objekti postoje samo određeno vrijeme prije nego što se postave za brisanje. Obično je to predstavljeno s `dead` ili `destroyed` booleanom koji signalizira mehanizmu igre da se taj objekt više ne treba prikazivati.
+- **s odgodom** 'Odgoda' je tipično svojstvo među kratkotrajnih objekata. Tipičan primjer je komad teksta ili grafički efekt poput eksplozije koji bi trebao biti vidljiv samo nekoliko milisekundi.
+
+✅ Razmislite o igri poput Pac-Mana. Možete li identificirati četiri gore navedene vrste objekata u ovoj igri?
+
+### Izražavanje ponašanja
+
+Sve što smo gore opisali su ponašanja koja objekti igre mogu imati. Kako ih onda kodirati? Ovo ponašanje možemo izraziti kao metode povezane s klasama ili objektima.
+
+**Klase**
+
+Ideja je koristiti `klase` u kombinaciji s `nasljeđivanjem` kako bismo dodali određeno ponašanje klasi.
+
+✅ Nasljeđivanje je važan koncept za razumijevanje. Saznajte više u [MDN-ovom članku o nasljeđivanju](https://developer.mozilla.org/docs/Web/JavaScript/Inheritance_and_the_prototype_chain).
+
+Izraženo putem koda, objekt igre obično izgleda ovako:
+
+```javascript
+
+//set up the class GameObject
+class GameObject {
+  constructor(x, y, type) {
+    this.x = x;
+    this.y = y;
+    this.type = type;
+  }
+}
+
+//this class will extend the GameObject's inherent class properties
+class Movable extends GameObject {
+  constructor(x,y, type) {
+    super(x,y, type)
+  }
+
+//this movable object can be moved on the screen
+  moveTo(x, y) {
+    this.x = x;
+    this.y = y;
+  }
+}
+
+//this is a specific class that extends the Movable class, so it can take advantage of all the properties that it inherits
+class Hero extends Movable {
+  constructor(x,y) {
+    super(x,y, 'Hero')
+  }
+}
+
+//this class, on the other hand, only inherits the GameObject properties
+class Tree extends GameObject {
+  constructor(x,y) {
+    super(x,y, 'Tree')
+  }
+}
+
+//a hero can move...
+const hero = new Hero();
+hero.moveTo(5,5);
+
+//but a tree cannot
+const tree = new Tree();
+```
+
+✅ Odvojite nekoliko minuta da zamislite Pac-Man heroja (na primjer, Inky, Pinky ili Blinky) i kako bi bio napisan u JavaScriptu.
+
+**Kompozicija**
+
+Drugi način rukovanja nasljeđivanjem objekata je korištenje *kompozicije*. Tada objekti izražavaju svoje ponašanje ovako:
+
+```javascript
+//create a constant gameObject
+const gameObject = {
+  x: 0,
+  y: 0,
+  type: ''
+};
+
+//...and a constant movable
+const movable = {
+  moveTo(x, y) {
+    this.x = x;
+    this.y = y;
+  }
+}
+//then the constant movableObject is composed of the gameObject and movable constants
+const movableObject = {...gameObject, ...movable};
+
+//then create a function to create a new Hero who inherits the movableObject properties
+function createHero(x, y) {
+  return {
+    ...movableObject,
+    x,
+    y,
+    type: 'Hero'
+  }
+}
+//...and a static object that inherits only the gameObject properties
+function createStatic(x, y, type) {
+  return {
+    ...gameObject
+    x,
+    y,
+    type
+  }
+}
+//create the hero and move it
+const hero = createHero(10,10);
+hero.moveTo(5,5);
+//and create a static tree which only stands around
+const tree = createStatic(0,0, 'Tree'); 
+```
+
+**Koji obrazac koristiti?**
+
+Na vama je da odlučite koji obrazac ćete koristiti. JavaScript podržava oba ova pristupa.
+
+--
+
+Još jedan obrazac koji je čest u razvoju igara bavi se problemom upravljanja korisničkim iskustvom i performansama igre.
+
+## Pub/sub obrazac
+
+✅ Pub/Sub označava 'publish-subscribe' (objavi-pretplati se)
+
+Ovaj obrazac se bavi idejom da različiti dijelovi vaše aplikacije ne bi trebali znati jedni za druge. Zašto? To olakšava razumijevanje što se općenito događa ako su različiti dijelovi odvojeni. Također olakšava nagle promjene ponašanja ako je potrebno. Kako to postići? To radimo uspostavljanjem nekih koncepata:
+
+- **poruka**: Poruka je obično tekstualni niz popraćen opcionalnim podatkom (komadom podataka koji pojašnjava o čemu se radi u poruci). Tipična poruka u igri može biti `KEY_PRESSED_ENTER`.
+- **objavitelj**: Ovaj element *objavljuje* poruku i šalje je svim pretplatnicima.
+- **pretplatnik**: Ovaj element *sluša* određene poruke i izvršava neki zadatak kao rezultat primanja te poruke, poput ispaljivanja lasera.
+
+Implementacija je prilično mala, ali je vrlo moćan obrazac. Evo kako se može implementirati:
+
+```javascript
+//set up an EventEmitter class that contains listeners
+class EventEmitter {
+  constructor() {
+    this.listeners = {};
+  }
+//when a message is received, let the listener to handle its payload
+  on(message, listener) {
+    if (!this.listeners[message]) {
+      this.listeners[message] = [];
+    }
+    this.listeners[message].push(listener);
+  }
+//when a message is sent, send it to a listener with some payload
+  emit(message, payload = null) {
+    if (this.listeners[message]) {
+      this.listeners[message].forEach(l => l(message, payload))
+    }
+  }
+}
+
+```
+
+Za korištenje gore navedenog koda možemo stvoriti vrlo malu implementaciju:
+
+```javascript
+//set up a message structure
+const Messages = {
+  HERO_MOVE_LEFT: 'HERO_MOVE_LEFT'
+};
+//invoke the eventEmitter you set up above
+const eventEmitter = new EventEmitter();
+//set up a hero
+const hero = createHero(0,0);
+//let the eventEmitter know to watch for messages pertaining to the hero moving left, and act on it
+eventEmitter.on(Messages.HERO_MOVE_LEFT, () => {
+  hero.move(5,0);
+});
+
+//set up the window to listen for the keyup event, specifically if the left arrow is hit, emit a message to move the hero left
+window.addEventListener('keyup', (evt) => {
+  if (evt.key === 'ArrowLeft') {
+    eventEmitter.emit(Messages.HERO_MOVE_LEFT)
+  }
+});
+```
+
+Gore povezujemo događaj tipkovnice, `ArrowLeft`, i šaljemo poruku `HERO_MOVE_LEFT`. Slušamo tu poruku i kao rezultat pomičemo `heroja`. Snaga ovog obrasca je u tome što slušatelj događaja i heroj ne znaju jedan za drugoga. Možete premapirati `ArrowLeft` na tipku `A`. Osim toga, bilo bi moguće učiniti nešto potpuno drugačije na `ArrowLeft` uz nekoliko izmjena u funkciji `on` eventEmittera:
+
+```javascript
+eventEmitter.on(Messages.HERO_MOVE_LEFT, () => {
+  hero.move(5,0);
+});
+```
+
+Kako stvari postaju složenije kako vaša igra raste, ovaj obrazac ostaje isti u složenosti, a vaš kod ostaje čist. Preporučuje se usvojiti ovaj obrazac.
+
+---
+
+## 🚀 Izazov
+
+Razmislite o tome kako pub-sub obrazac može unaprijediti igru. Koji dijelovi bi trebali emitirati događaje, a kako bi igra trebala reagirati na njih? Sada je vaša prilika da budete kreativni, osmislite novu igru i kako bi se njeni dijelovi mogli ponašati.
+
+## Kviz nakon predavanja
+
+[Kviz nakon predavanja](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/30)
+
+## Pregled i samostalno učenje
+
+Saznajte više o Pub/Sub obrascu [čitajući o njemu](https://docs.microsoft.com/azure/architecture/patterns/publisher-subscriber/?WT.mc_id=academic-77807-sagibbon).
+
+## Zadatak
+
+[Izradite skicu igre](assignment.md)
+
+---
+
+**Odricanje od odgovornosti**:  
+Ovaj dokument je preveden pomoću AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za ključne informacije preporučuje se profesionalni prijevod od strane ljudskog prevoditelja. Ne preuzimamo odgovornost za bilo kakve nesporazume ili pogrešne interpretacije koje proizlaze iz korištenja ovog prijevoda.
\ No newline at end of file
diff --git a/translations/hr/6-space-game/1-introduction/assignment.md b/translations/hr/6-space-game/1-introduction/assignment.md
new file mode 100644
index 00000000..2d5bb959
--- /dev/null
+++ b/translations/hr/6-space-game/1-introduction/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "009bdedee9cc82988264be8cb31f9bf4",
+  "translation_date": "2025-08-27T22:35:35+00:00",
+  "source_file": "6-space-game/1-introduction/assignment.md",
+  "language_code": "hr"
+}
+-->
+# Osmisli igru
+
+## Upute
+
+Koristeći primjere koda iz lekcije, napišite prikaz igre koju volite. Mora biti jednostavna igra, ali cilj je koristiti ili uzorak klase ili uzorak kompozicije te uzorak pub/sub kako biste pokazali kako bi se igra mogla pokrenuti. Budite kreativni!
+
+## Rubrika
+
+| Kriterij | Izvrsno                                                | Zadovoljavajuće                                       | Potrebno poboljšanje                                |
+| -------- | ------------------------------------------------------- | ----------------------------------------------------- | --------------------------------------------------- |
+|          | Tri elementa su postavljena na ekran i manipulirana     | Dva elementa su postavljena na ekran i manipulirana   | Jedan element je postavljen na ekran i manipuliran  |
+
+---
+
+**Odricanje od odgovornosti**:  
+Ovaj dokument je preveden pomoću AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za kritične informacije preporučuje se profesionalni prijevod od strane čovjeka. Ne preuzimamo odgovornost za bilo kakva nesporazuma ili pogrešna tumačenja koja proizlaze iz korištenja ovog prijevoda.
\ No newline at end of file
diff --git a/translations/hr/6-space-game/2-drawing-to-canvas/README.md b/translations/hr/6-space-game/2-drawing-to-canvas/README.md
new file mode 100644
index 00000000..e5c45bf6
--- /dev/null
+++ b/translations/hr/6-space-game/2-drawing-to-canvas/README.md
@@ -0,0 +1,230 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "41be8d35e7f30aa9dad10773c35e89c4",
+  "translation_date": "2025-08-27T22:31:41+00:00",
+  "source_file": "6-space-game/2-drawing-to-canvas/README.md",
+  "language_code": "hr"
+}
+-->
+# Izgradnja svemirske igre, dio 2: Crtanje heroja i čudovišta na platno
+
+## Kviz prije predavanja
+
+[Kviz prije predavanja](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/31)
+
+## Platno
+
+Platno je HTML element koji po defaultu nema sadržaj; to je prazna površina. Morate ga popuniti crtanjem.
+
+✅ Pročitajte [više o Canvas API-ju](https://developer.mozilla.org/docs/Web/API/Canvas_API) na MDN-u.
+
+Evo kako se obično deklarira, kao dio tijela stranice:
+
+```html
+<canvas id="myCanvas" width="200" height="100"></canvas>
+```
+
+Gore postavljamo `id`, `width` i `height`.
+
+- `id`: postavite ovo kako biste mogli dobiti referencu kada trebate interakciju s njim.
+- `width`: ovo je širina elementa.
+- `height`: ovo je visina elementa.
+
+## Crtanje jednostavne geometrije
+
+Platno koristi kartezijanski koordinatni sustav za crtanje. Dakle, koristi x-os i y-os za izražavanje gdje se nešto nalazi. Lokacija `0,0` je gornji lijevi kut, a donji desni kut je ono što ste postavili kao ŠIRINU i VISINU platna.
+
+![mreža platna](../../../../translated_images/canvas_grid.5f209da785ded492a01ece440e3032afe51efa500cc2308e5ea4252487ceaf0b.hr.png)  
+> Slika s [MDN-a](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes)
+
+Da biste crtali na elementu platna, morate proći kroz sljedeće korake:
+
+1. **Dobiti referencu** na element platna.
+2. **Dobiti referencu** na element konteksta koji se nalazi na elementu platna.
+3. **Izvršiti operaciju crtanja** koristeći element konteksta.
+
+Kod za gore navedene korake obično izgleda ovako:
+
+```javascript
+// draws a red rectangle
+//1. get the canvas reference
+canvas = document.getElementById("myCanvas");
+
+//2. set the context to 2D to draw basic shapes
+ctx = canvas.getContext("2d");
+
+//3. fill it with the color red
+ctx.fillStyle = 'red';
+
+//4. and draw a rectangle with these parameters, setting location and size
+ctx.fillRect(0,0, 200, 200) // x,y,width, height
+```
+
+✅ Canvas API uglavnom se fokusira na 2D oblike, ali možete crtati i 3D elemente na web stranici; za to možete koristiti [WebGL API](https://developer.mozilla.org/docs/Web/API/WebGL_API).
+
+Možete crtati razne stvari pomoću Canvas API-ja, poput:
+
+- **Geometrijskih oblika**, već smo pokazali kako nacrtati pravokutnik, ali postoji mnogo više što možete nacrtati.
+- **Teksta**, možete nacrtati tekst s bilo kojim fontom i bojom koju želite.
+- **Slika**, možete nacrtati sliku na temelju slikovne datoteke, poput .jpg ili .png.
+
+✅ Isprobajte! Znate kako nacrtati pravokutnik, možete li nacrtati krug na stranici? Pogledajte neke zanimljive crteže na platnu na CodePenu. Evo [posebno impresivnog primjera](https://codepen.io/dissimulate/pen/KrAwx).
+
+## Učitavanje i crtanje slikovnih datoteka
+
+Slikovnu datoteku učitavate stvaranjem objekta `Image` i postavljanjem njegove `src` vrijednosti. Zatim slušate događaj `load` kako biste znali kada je spreman za korištenje. Kod izgleda ovako:
+
+### Učitavanje datoteke
+
+```javascript
+const img = new Image();
+img.src = 'path/to/my/image.png';
+img.onload = () => {
+  // image loaded and ready to be used
+}
+```
+
+### Uzorak učitavanja datoteke
+
+Preporučuje se da gore navedeno omotate u konstrukciju poput ove, kako bi bilo lakše za korištenje i kako biste manipulirali slikom tek kad je potpuno učitana:
+
+```javascript
+function loadAsset(path) {
+  return new Promise((resolve) => {
+    const img = new Image();
+    img.src = path;
+    img.onload = () => {
+      // image loaded and ready to be used
+      resolve(img);
+    }
+  })
+}
+
+// use like so
+
+async function run() {
+  const heroImg = await loadAsset('hero.png')
+  const monsterImg = await loadAsset('monster.png')
+}
+
+```
+
+Da biste nacrtali elemente igre na ekranu, vaš kod bi izgledao ovako:
+
+```javascript
+async function run() {
+  const heroImg = await loadAsset('hero.png')
+  const monsterImg = await loadAsset('monster.png')
+
+  canvas = document.getElementById("myCanvas");
+  ctx = canvas.getContext("2d");
+  ctx.drawImage(heroImg, canvas.width/2,canvas.height/2);
+  ctx.drawImage(monsterImg, 0,0);
+}
+```
+
+## Vrijeme je da počnete graditi svoju igru
+
+### Što izgraditi
+
+Izgradit ćete web stranicu s Canvas elementom. Trebala bi prikazivati crni ekran `1024*768`. Dostavili smo vam dvije slike:
+
+- Herojski brod
+
+   ![Herojski brod](../../../../translated_images/player.dd24c1afa8c71e9b82b2958946d4bad13308681392d4b5ddcc61a0e818ef8088.hr.png)
+
+- 5*5 čudovišta
+
+   ![Brod čudovišta](../../../../translated_images/enemyShip.5df2a822c16650c2fb3c06652e8ec8120cdb9122a6de46b9a1a56d54db22657f.hr.png)
+
+### Preporučeni koraci za početak razvoja
+
+Pronađite datoteke koje su stvorene za vas u podmapi `your-work`. Trebala bi sadržavati sljedeće:
+
+```bash
+-| assets
+  -| enemyShip.png
+  -| player.png
+-| index.html
+-| app.js
+-| package.json
+```
+
+Otvorite kopiju ove mape u Visual Studio Codeu. Trebate imati postavljeno lokalno razvojno okruženje, po mogućnosti s Visual Studio Codeom, NPM-om i Nodeom instaliranim. Ako nemate postavljen `npm` na svom računalu, [evo kako to učiniti](https://www.npmjs.com/get-npm).
+
+Pokrenite svoj projekt navigacijom do mape `your_work`:
+
+```bash
+cd your-work
+npm start
+```
+
+Gore navedeno će pokrenuti HTTP server na adresi `http://localhost:5000`. Otvorite preglednik i unesite tu adresu. Trenutno je prazna stranica, ali to će se promijeniti.
+
+> Napomena: da biste vidjeli promjene na ekranu, osvježite preglednik.
+
+### Dodavanje koda
+
+Dodajte potrebni kod u `your-work/app.js` kako biste riješili sljedeće:
+
+1. **Nacrtajte** platno s crnom pozadinom  
+   > savjet: dodajte dvije linije ispod odgovarajućeg TODO u `/app.js`, postavljajući `ctx` element da bude crn, a gornje/lijeve koordinate na 0,0 te visinu i širinu da budu jednake onima platna.
+2. **Učitajte** teksture  
+   > savjet: dodajte slike igrača i neprijatelja koristeći `await loadTexture` i prosljeđujući put slike. Još ih nećete vidjeti na ekranu!
+3. **Nacrtajte** heroja u sredini ekrana u donjoj polovici  
+   > savjet: koristite `drawImage` API za crtanje heroImg na ekranu, postavljajući `canvas.width / 2 - 45` i `canvas.height - canvas.height / 4)`.
+4. **Nacrtajte** 5*5 čudovišta  
+   > savjet: sada možete otkomentirati kod za crtanje neprijatelja na ekranu. Zatim idite na funkciju `createEnemies` i izradite je.
+
+   Prvo, postavite neke konstante:
+
+    ```javascript
+    const MONSTER_TOTAL = 5;
+    const MONSTER_WIDTH = MONSTER_TOTAL * 98;
+    const START_X = (canvas.width - MONSTER_WIDTH) / 2;
+    const STOP_X = START_X + MONSTER_WIDTH;
+    ```
+
+    zatim, stvorite petlju za crtanje niza čudovišta na ekranu:
+
+    ```javascript
+    for (let x = START_X; x < STOP_X; x += 98) {
+        for (let y = 0; y < 50 * 5; y += 50) {
+          ctx.drawImage(enemyImg, x, y);
+        }
+      }
+    ```
+
+## Rezultat
+
+Završni rezultat trebao bi izgledati ovako:
+
+![Crni ekran s herojem i 5*5 čudovišta](../../../../translated_images/partI-solution.36c53b48c9ffae2a5e15496b23b604ba5393433e4bf91608a7a0a020eb7a2691.hr.png)
+
+## Rješenje
+
+Pokušajte prvo sami riješiti, ali ako zapnete, pogledajte [rješenje](../../../../6-space-game/2-drawing-to-canvas/solution/app.js).
+
+---
+
+## 🚀 Izazov
+
+Naučili ste o crtanju s Canvas API-jem fokusiranim na 2D; pogledajte [WebGL API](https://developer.mozilla.org/docs/Web/API/WebGL_API) i pokušajte nacrtati 3D objekt.
+
+## Kviz nakon predavanja
+
+[Kviz nakon predavanja](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/32)
+
+## Pregled i samostalno učenje
+
+Saznajte više o Canvas API-ju [čitajući o njemu](https://developer.mozilla.org/docs/Web/API/Canvas_API).
+
+## Zadatak
+
+[Isprobajte Canvas API](assignment.md)
+
+---
+
+**Odricanje od odgovornosti**:  
+Ovaj dokument je preveden pomoću AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za ključne informacije preporučuje se profesionalni prijevod od strane ljudskog prevoditelja. Ne preuzimamo odgovornost za bilo kakve nesporazume ili pogrešne interpretacije koje proizlaze iz korištenja ovog prijevoda.
\ No newline at end of file
diff --git a/translations/hr/6-space-game/2-drawing-to-canvas/assignment.md b/translations/hr/6-space-game/2-drawing-to-canvas/assignment.md
new file mode 100644
index 00000000..5086f45d
--- /dev/null
+++ b/translations/hr/6-space-game/2-drawing-to-canvas/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "ca1cf78a4c60df77ab32a154ec024d7f",
+  "translation_date": "2025-08-27T22:32:25+00:00",
+  "source_file": "6-space-game/2-drawing-to-canvas/assignment.md",
+  "language_code": "hr"
+}
+-->
+# Igrajte se s Canvas API-jem
+
+## Upute
+
+Odaberite jedan element Canvas API-ja i stvorite nešto zanimljivo oko njega. Možete li stvoriti malu galaksiju ponovljenih zvijezda? Možete li stvoriti zanimljivu teksturu obojenih linija? Možete pogledati CodePen za inspiraciju (ali nemojte kopirati).
+
+## Rubrika
+
+| Kriterij | Izvrsno                                                  | Zadovoljavajuće                     | Potrebno poboljšanje  |
+| -------- | --------------------------------------------------------- | ----------------------------------- | --------------------- |
+|          | Kod je predan i prikazuje zanimljivu teksturu ili oblik   | Kod je predan, ali ne radi          | Kod nije predan       |
+
+---
+
+**Odricanje od odgovornosti**:  
+Ovaj dokument je preveden pomoću AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za ključne informacije preporučuje se profesionalni prijevod od strane čovjeka. Ne preuzimamo odgovornost za bilo kakve nesporazume ili pogrešne interpretacije koje proizlaze iz korištenja ovog prijevoda.
\ No newline at end of file
diff --git a/translations/hr/6-space-game/3-moving-elements-around/README.md b/translations/hr/6-space-game/3-moving-elements-around/README.md
new file mode 100644
index 00000000..a77c5543
--- /dev/null
+++ b/translations/hr/6-space-game/3-moving-elements-around/README.md
@@ -0,0 +1,402 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "23f088add24f0f1fa51014a9e27ea280",
+  "translation_date": "2025-08-27T22:26:12+00:00",
+  "source_file": "6-space-game/3-moving-elements-around/README.md",
+  "language_code": "hr"
+}
+-->
+# Izgradnja svemirske igre, dio 3: Dodavanje kretanja
+
+## Kviz prije predavanja
+
+[Kviz prije predavanja](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/33)
+
+Igre nisu baš zabavne dok nemate vanzemaljce koji se kreću po ekranu! U ovoj igri koristit ćemo dvije vrste kretanja:
+
+- **Kretanje pomoću tipkovnice/miša**: kada korisnik koristi tipkovnicu ili miš za pomicanje objekta na ekranu.
+- **Kretanje uzrokovano igrom**: kada igra pomiče objekt u određenim vremenskim intervalima.
+
+Kako pomičemo stvari na ekranu? Sve se svodi na kartezijanske koordinate: mijenjamo lokaciju (x, y) objekta i zatim ponovno crtamo ekran.
+
+Obično su potrebni sljedeći koraci za ostvarivanje *kretanja* na ekranu:
+
+1. **Postavite novu lokaciju** za objekt; to je potrebno kako bi se objekt doživio kao da se pomaknuo.
+2. **Očistite ekran**, ekran treba očistiti između crtanja. To možemo učiniti crtanjem pravokutnika koji ispunimo bojom pozadine.
+3. **Ponovno nacrtajte objekt** na novoj lokaciji. Time konačno ostvarujemo pomicanje objekta s jedne lokacije na drugu.
+
+Evo kako to može izgledati u kodu:
+
+```javascript
+//set the hero's location
+hero.x += 5;
+// clear the rectangle that hosts the hero
+ctx.clearRect(0, 0, canvas.width, canvas.height);
+// redraw the game background and hero
+ctx.fillRect(0, 0, canvas.width, canvas.height)
+ctx.fillStyle = "black";
+ctx.drawImage(heroImg, hero.x, hero.y);
+```
+
+✅ Možete li smisliti razlog zašto ponovno crtanje vašeg heroja mnogo puta u sekundi može uzrokovati troškove performansi? Pročitajte o [alternativama ovom obrascu](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas).
+
+## Rukovanje događajima tipkovnice
+
+Događajima upravljate povezivanjem specifičnih događaja s kodom. Događaji tipkovnice aktiviraju se na cijelom prozoru, dok se događaji miša poput `click` mogu povezati s klikom na određeni element. Koristit ćemo događaje tipkovnice tijekom ovog projekta.
+
+Za rukovanje događajem trebate koristiti metodu `addEventListener()` prozora i pružiti joj dva ulazna parametra. Prvi parametar je naziv događaja, na primjer `keyup`. Drugi parametar je funkcija koja bi se trebala pozvati kao rezultat događaja.
+
+Evo primjera:
+
+```javascript
+window.addEventListener('keyup', (evt) => {
+  // `evt.key` = string representation of the key
+  if (evt.key === 'ArrowUp') {
+    // do something
+  }
+})
+```
+
+Za događaje tipki postoje dva svojstva na događaju koja možete koristiti za provjeru koja je tipka pritisnuta:
+
+- `key`, ovo je tekstualni prikaz pritisnute tipke, na primjer `ArrowUp`.
+- `keyCode`, ovo je brojčani prikaz, na primjer `37`, odgovara `ArrowLeft`.
+
+✅ Manipulacija događajima tipki korisna je i izvan razvoja igara. Koje druge primjene možete zamisliti za ovu tehniku?
+
+### Posebne tipke: upozorenje
+
+Postoje neke *posebne* tipke koje utječu na prozor. To znači da ako slušate događaj `keyup` i koristite te posebne tipke za pomicanje heroja, također će se dogoditi horizontalno pomicanje. Zbog toga ćete možda htjeti *isključiti* ovo ugrađeno ponašanje preglednika dok gradite svoju igru. Trebate kod poput ovog:
+
+```javascript
+let onKeyDown = function (e) {
+  console.log(e.keyCode);
+  switch (e.keyCode) {
+    case 37:
+    case 39:
+    case 38:
+    case 40: // Arrow keys
+    case 32:
+      e.preventDefault();
+      break; // Space
+    default:
+      break; // do not block other keys
+  }
+};
+
+window.addEventListener('keydown', onKeyDown);
+```
+
+Gornji kod osigurava da tipke sa strelicama i razmaknica imaju svoje *zadano* ponašanje isključeno. Mehanizam *isključivanja* događa se kada pozovemo `e.preventDefault()`.
+
+## Kretanje uzrokovano igrom
+
+Možemo učiniti da se stvari same kreću pomoću timera poput funkcija `setTimeout()` ili `setInterval()` koje ažuriraju lokaciju objekta na svakom taktu ili vremenskom intervalu. Evo kako to može izgledati:
+
+```javascript
+let id = setInterval(() => {
+  //move the enemy on the y axis
+  enemy.y += 10;
+})
+```
+
+## Petlja igre
+
+Petlja igre je koncept koji se u osnovi odnosi na funkciju koja se poziva u redovitim intervalima. Zove se petlja igre jer se sve što bi trebalo biti vidljivo korisniku crta unutar petlje. Petlja igre koristi sve objekte igre koji su dio igre, crtajući ih sve osim ako iz nekog razloga više ne bi trebali biti dio igre. Na primjer, ako je objekt neprijatelj kojeg je pogodio laser i eksplodirao, više nije dio trenutne petlje igre (o tome ćete više naučiti u sljedećim lekcijama).
+
+Evo kako petlja igre obično izgleda, izražena u kodu:
+
+```javascript
+let gameLoopId = setInterval(() =>
+  function gameLoop() {
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    ctx.fillStyle = "black";
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+    drawHero();
+    drawEnemies();
+    drawStaticObjects();
+}, 200);
+```
+
+Gornja petlja se poziva svakih `200` milisekundi za ponovno crtanje platna. Imate mogućnost odabrati najbolji interval koji ima smisla za vašu igru.
+
+## Nastavak svemirske igre
+
+Uzet ćete postojeći kod i proširiti ga. Možete započeti s kodom koji ste dovršili tijekom prvog dijela ili koristiti kod iz [Dio II - početni](../../../../6-space-game/3-moving-elements-around/your-work).
+
+- **Pomicanje heroja**: dodati ćete kod kako biste omogućili pomicanje heroja pomoću tipki sa strelicama.
+- **Pomicanje neprijatelja**: također ćete trebati dodati kod kako biste osigurali da se neprijatelji pomiču od vrha prema dnu određenom brzinom.
+
+## Preporučeni koraci
+
+Pronađite datoteke koje su stvorene za vas u podmapi `your-work`. Trebale bi sadržavati sljedeće:
+
+```bash
+-| assets
+  -| enemyShip.png
+  -| player.png
+-| index.html
+-| app.js
+-| package.json
+```
+
+Započnite svoj projekt u mapi `your_work` upisivanjem:
+
+```bash
+cd your-work
+npm start
+```
+
+Gornji kod će pokrenuti HTTP poslužitelj na adresi `http://localhost:5000`. Otvorite preglednik i unesite tu adresu, trenutno bi trebao prikazati heroja i sve neprijatelje; ništa se još ne kreće!
+
+### Dodajte kod
+
+1. **Dodajte posvećene objekte** za `heroja`, `neprijatelja` i `objekt igre`, oni bi trebali imati svojstva `x` i `y`. (Sjetite se dijela o [Nasljeđivanju ili kompoziciji](../README.md)).
+
+   *SAVJET* `objekt igre` trebao bi biti onaj s `x` i `y` te sposobnošću da se nacrta na platnu.
+
+   >savjet: započnite dodavanjem nove klase GameObject s konstruktorom definiranim kao dolje, a zatim ga nacrtajte na platnu:
+  
+    ```javascript
+        
+    class GameObject {
+      constructor(x, y) {
+        this.x = x;
+        this.y = y;
+        this.dead = false;
+        this.type = "";
+        this.width = 0;
+        this.height = 0;
+        this.img = undefined;
+      }
+    
+      draw(ctx) {
+        ctx.drawImage(this.img, this.x, this.y, this.width, this.height);
+      }
+    }
+    ```
+
+    Sada proširite ovaj GameObject kako biste stvorili Heroja i Neprijatelja.
+    
+    ```javascript
+    class Hero extends GameObject {
+      constructor(x, y) {
+        ...it needs an x, y, type, and speed
+      }
+    }
+    ```
+
+    ```javascript
+    class Enemy extends GameObject {
+      constructor(x, y) {
+        super(x, y);
+        (this.width = 98), (this.height = 50);
+        this.type = "Enemy";
+        let id = setInterval(() => {
+          if (this.y < canvas.height - this.height) {
+            this.y += 5;
+          } else {
+            console.log('Stopped at', this.y)
+            clearInterval(id);
+          }
+        }, 300)
+      }
+    }
+    ```
+
+2. **Dodajte rukovatelje događajima tipki** za upravljanje navigacijom tipki (pomicanje heroja gore/dolje lijevo/desno).
+
+   *ZAPAMTITE* to je kartezijanski sustav, gornji lijevi kut je `0,0`. Također zapamtite da dodate kod za zaustavljanje *zadanog ponašanja*.
+
+   >savjet: kreirajte svoju funkciju onKeyDown i povežite je s prozorom:
+
+   ```javascript
+    let onKeyDown = function (e) {
+	      console.log(e.keyCode);
+	        ...add the code from the lesson above to stop default behavior
+	      }
+    };
+
+    window.addEventListener("keydown", onKeyDown);
+   ```
+    
+   Provjerite konzolu preglednika u ovom trenutku i pratite pritiske tipki.
+
+3. **Implementirajte** [Pub sub obrazac](../README.md), ovo će održati vaš kod čistim dok pratite preostale dijelove.
+
+   Da biste dovršili ovaj zadnji dio, možete:
+
+   1. **Dodajte slušatelja događaja** na prozor:
+
+       ```javascript
+        window.addEventListener("keyup", (evt) => {
+          if (evt.key === "ArrowUp") {
+            eventEmitter.emit(Messages.KEY_EVENT_UP);
+          } else if (evt.key === "ArrowDown") {
+            eventEmitter.emit(Messages.KEY_EVENT_DOWN);
+          } else if (evt.key === "ArrowLeft") {
+            eventEmitter.emit(Messages.KEY_EVENT_LEFT);
+          } else if (evt.key === "ArrowRight") {
+            eventEmitter.emit(Messages.KEY_EVENT_RIGHT);
+          }
+        });
+        ```
+
+    1. **Kreirajte klasu EventEmitter** za objavljivanje i pretplatu na poruke:
+
+        ```javascript
+        class EventEmitter {
+          constructor() {
+            this.listeners = {};
+          }
+        
+          on(message, listener) {
+            if (!this.listeners[message]) {
+              this.listeners[message] = [];
+            }
+            this.listeners[message].push(listener);
+          }
+        
+          emit(message, payload = null) {
+            if (this.listeners[message]) {
+              this.listeners[message].forEach((l) => l(message, payload));
+            }
+          }
+        }
+        ```
+
+    1. **Dodajte konstante** i postavite EventEmitter:
+
+        ```javascript
+        const Messages = {
+          KEY_EVENT_UP: "KEY_EVENT_UP",
+          KEY_EVENT_DOWN: "KEY_EVENT_DOWN",
+          KEY_EVENT_LEFT: "KEY_EVENT_LEFT",
+          KEY_EVENT_RIGHT: "KEY_EVENT_RIGHT",
+        };
+        
+        let heroImg, 
+            enemyImg, 
+            laserImg,
+            canvas, ctx, 
+            gameObjects = [], 
+            hero, 
+            eventEmitter = new EventEmitter();
+        ```
+
+    1. **Inicijalizirajte igru**
+
+    ```javascript
+    function initGame() {
+      gameObjects = [];
+      createEnemies();
+      createHero();
+    
+      eventEmitter.on(Messages.KEY_EVENT_UP, () => {
+        hero.y -=5 ;
+      })
+    
+      eventEmitter.on(Messages.KEY_EVENT_DOWN, () => {
+        hero.y += 5;
+      });
+    
+      eventEmitter.on(Messages.KEY_EVENT_LEFT, () => {
+        hero.x -= 5;
+      });
+    
+      eventEmitter.on(Messages.KEY_EVENT_RIGHT, () => {
+        hero.x += 5;
+      });
+    }
+    ```
+
+1. **Postavite petlju igre**
+
+   Refaktorirajte funkciju window.onload kako biste inicijalizirali igru i postavili petlju igre na dobar interval. Također ćete dodati laserski zrak:
+
+    ```javascript
+    window.onload = async () => {
+      canvas = document.getElementById("canvas");
+      ctx = canvas.getContext("2d");
+      heroImg = await loadTexture("assets/player.png");
+      enemyImg = await loadTexture("assets/enemyShip.png");
+      laserImg = await loadTexture("assets/laserRed.png");
+    
+      initGame();
+      let gameLoopId = setInterval(() => {
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        ctx.fillStyle = "black";
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
+        drawGameObjects(ctx);
+      }, 100)
+      
+    };
+    ```
+
+5. **Dodajte kod** za pomicanje neprijatelja u određenim intervalima
+
+    Refaktorirajte funkciju `createEnemies()` kako biste stvorili neprijatelje i dodali ih u novu klasu gameObjects:
+
+    ```javascript
+    function createEnemies() {
+      const MONSTER_TOTAL = 5;
+      const MONSTER_WIDTH = MONSTER_TOTAL * 98;
+      const START_X = (canvas.width - MONSTER_WIDTH) / 2;
+      const STOP_X = START_X + MONSTER_WIDTH;
+    
+      for (let x = START_X; x < STOP_X; x += 98) {
+        for (let y = 0; y < 50 * 5; y += 50) {
+          const enemy = new Enemy(x, y);
+          enemy.img = enemyImg;
+          gameObjects.push(enemy);
+        }
+      }
+    }
+    ```
+    
+    i dodajte funkciju `createHero()` za sličan proces za heroja.
+    
+    ```javascript
+    function createHero() {
+      hero = new Hero(
+        canvas.width / 2 - 45,
+        canvas.height - canvas.height / 4
+      );
+      hero.img = heroImg;
+      gameObjects.push(hero);
+    }
+    ```
+
+    i na kraju, dodajte funkciju `drawGameObjects()` za početak crtanja:
+
+    ```javascript
+    function drawGameObjects(ctx) {
+      gameObjects.forEach(go => go.draw(ctx));
+    }
+    ```
+
+    Vaši neprijatelji bi trebali početi napredovati prema vašem svemirskom brodu heroja!
+
+---
+
+## 🚀 Izazov
+
+Kao što možete vidjeti, vaš kod može postati 'spaghetti kod' kada počnete dodavati funkcije, varijable i klase. Kako možete bolje organizirati svoj kod kako bi bio čitljiviji? Osmislite sustav za organizaciju koda, čak i ako još uvijek ostaje u jednoj datoteci.
+
+## Kviz nakon predavanja
+
+[Kviz nakon predavanja](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/34)
+
+## Pregled i samostalno učenje
+
+Iako pišemo svoju igru bez korištenja okvira, postoji mnogo okvira za razvoj igara temeljenih na JavaScriptu za rad s platnom. Odvojite vrijeme za [čitanje o njima](https://github.com/collections/javascript-game-engines).
+
+## Zadatak
+
+[Komentirajte svoj kod](assignment.md)
+
+---
+
+**Odricanje od odgovornosti**:  
+Ovaj dokument je preveden pomoću AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za ključne informacije preporučuje se profesionalni prijevod od strane ljudskog prevoditelja. Ne preuzimamo odgovornost za bilo kakve nesporazume ili pogrešne interpretacije koje proizlaze iz korištenja ovog prijevoda.
\ No newline at end of file
diff --git a/translations/hr/6-space-game/3-moving-elements-around/assignment.md b/translations/hr/6-space-game/3-moving-elements-around/assignment.md
new file mode 100644
index 00000000..7be75993
--- /dev/null
+++ b/translations/hr/6-space-game/3-moving-elements-around/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "ccfcd8c2932761359fbaff3d6b01ace4",
+  "translation_date": "2025-08-27T22:27:13+00:00",
+  "source_file": "6-space-game/3-moving-elements-around/assignment.md",
+  "language_code": "hr"
+}
+-->
+# Komentirajte svoj kod
+
+## Upute
+
+Pregledajte svoj trenutni /app.js datoteku u mapi igre i pronađite načine kako je komentirati i urediti. Kod vrlo lako može postati neorganiziran, a sada je dobra prilika da dodate komentare kako biste osigurali da je čitljiv i da ga možete koristiti kasnije.
+
+## Rubrika
+
+| Kriterij | Izvrsno                                                          | Zadovoljavajuće                        | Potrebno poboljšanje                                           |
+| -------- | ---------------------------------------------------------------- | -------------------------------------- | -------------------------------------------------------------- |
+|          | Kod u `app.js` je potpuno komentiran i organiziran u logičke blokove | Kod u `app.js` je adekvatno komentiran | Kod u `app.js` je donekle neorganiziran i nedostaju mu dobri komentari |
+
+---
+
+**Odricanje od odgovornosti**:  
+Ovaj dokument je preveden pomoću AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za ključne informacije preporučuje se profesionalni prijevod od strane ljudskog prevoditelja. Ne preuzimamo odgovornost za bilo kakve nesporazume ili pogrešne interpretacije koje proizlaze iz korištenja ovog prijevoda.
\ No newline at end of file
diff --git a/translations/hr/6-space-game/4-collision-detection/README.md b/translations/hr/6-space-game/4-collision-detection/README.md
new file mode 100644
index 00000000..cf6d6b95
--- /dev/null
+++ b/translations/hr/6-space-game/4-collision-detection/README.md
@@ -0,0 +1,311 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "2e83e38c35dc003f046d7cc0bbfd4920",
+  "translation_date": "2025-08-27T22:29:41+00:00",
+  "source_file": "6-space-game/4-collision-detection/README.md",
+  "language_code": "hr"
+}
+-->
+# Izgradnja svemirske igre, dio 4: Dodavanje lasera i detekcija sudara
+
+## Kviz prije predavanja
+
+[Kviz prije predavanja](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/35)
+
+U ovoj lekciji naučit ćete kako pucati lasere pomoću JavaScripta! Dodati ćemo dvije stvari u našu igru:
+
+- **Laser**: laser se ispaljuje iz broda vašeg junaka i kreće se vertikalno prema gore
+- **Detekcija sudara**, kao dio implementacije mogućnosti *pucanja*, dodati ćemo neka pravila igre:
+   - **Laser pogodi neprijatelja**: Neprijatelj umire ako ga pogodi laser
+   - **Laser pogodi vrh ekrana**: Laser se uništava ako pogodi gornji dio ekrana
+   - **Sudar neprijatelja i junaka**: Neprijatelj i junak se uništavaju ako se sudare
+   - **Neprijatelj pogodi dno ekrana**: Neprijatelj i junak se uništavaju ako neprijatelj pogodi dno ekrana
+
+Ukratko, vi -- *junak* -- morate pogoditi sve neprijatelje laserom prije nego što stignu do dna ekrana.
+
+✅ Istražite prvi računalni program za igru ikada napisan. Koja je bila njegova funkcionalnost?
+
+Budimo heroji zajedno!
+
+## Detekcija sudara
+
+Kako provodimo detekciju sudara? Moramo razmišljati o našim objektima u igri kao o pravokutnicima koji se kreću. Zašto, pitate se? Pa, slika koja se koristi za crtanje objekta u igri je pravokutnik: ima `x`, `y`, `širinu` i `visinu`.
+
+Ako se dva pravokutnika, npr. junak i neprijatelj *presijeku*, imate sudar. Što bi se tada trebalo dogoditi ovisi o pravilima igre. Za implementaciju detekcije sudara trebate sljedeće:
+
+1. Način za dobivanje pravokutne reprezentacije objekta u igri, nešto poput ovoga:
+
+   ```javascript
+   rectFromGameObject() {
+     return {
+       top: this.y,
+       left: this.x,
+       bottom: this.y + this.height,
+       right: this.x + this.width
+     }
+   }
+   ```
+
+2. Funkciju za usporedbu, koja može izgledati ovako:
+
+   ```javascript
+   function intersectRect(r1, r2) {
+     return !(r2.left > r1.right ||
+       r2.right < r1.left ||
+       r2.top > r1.bottom ||
+       r2.bottom < r1.top);
+   }
+   ```
+
+## Kako uništiti stvari
+
+Da biste uništili stvari u igri, morate obavijestiti igru da više ne treba crtati taj objekt u petlji igre koja se pokreće u određenim intervalima. Način za to je označiti objekt igre kao *mrtav* kada se nešto dogodi, ovako:
+
+```javascript
+// collision happened
+enemy.dead = true
+```
+
+Zatim možete izdvojiti *mrtve* objekte prije ponovnog crtanja ekrana, ovako:
+
+```javascript
+gameObjects = gameObject.filter(go => !go.dead);
+```
+
+## Kako ispaliti laser
+
+Ispaljivanje lasera znači reagiranje na događaj pritiska tipke i stvaranje objekta koji se kreće u određenom smjeru. Stoga trebamo provesti sljedeće korake:
+
+1. **Stvoriti objekt lasera**: s vrha broda našeg junaka, koji nakon stvaranja počinje se kretati prema vrhu ekrana.
+2. **Povezati kod s događajem pritiska tipke**: trebamo odabrati tipku na tipkovnici koja predstavlja igrača koji ispaljuje laser.
+3. **Stvoriti objekt igre koji izgleda kao laser** kada se pritisne tipka.
+
+## Vremensko ograničenje za laser
+
+Laser treba ispaliti svaki put kad pritisnete tipku, npr. *razmaknicu*. Kako bismo spriječili da igra stvara previše lasera u kratkom vremenu, trebamo to popraviti. Popravak se provodi implementacijom tzv. *vremenskog ograničenja*, timera, koji osigurava da se laser može ispaliti samo u određenim intervalima. To možete implementirati na sljedeći način:
+
+```javascript
+class Cooldown {
+  constructor(time) {
+    this.cool = false;
+    setTimeout(() => {
+      this.cool = true;
+    }, time)
+  }
+}
+
+class Weapon {
+  constructor {
+  }
+  fire() {
+    if (!this.cooldown || this.cooldown.cool) {
+      // produce a laser
+      this.cooldown = new Cooldown(500);
+    } else {
+      // do nothing - it hasn't cooled down yet.
+    }
+  }
+}
+```
+
+✅ Pogledajte lekciju 1 u seriji svemirske igre kako biste se podsjetili na *vremenska ograničenja*.
+
+## Što izgraditi
+
+Uzet ćete postojeći kod (koji ste trebali očistiti i refaktorirati) iz prethodne lekcije i proširiti ga. Možete započeti s kodom iz dijela II ili koristiti kod iz [Dio III - početni kod](../../../../../../../../../your-work).
+
+> savjet: laser s kojim ćete raditi već se nalazi u vašoj mapi s resursima i referenciran je u vašem kodu
+
+- **Dodajte detekciju sudara**, kada laser sudari s nečim, trebaju se primijeniti sljedeća pravila:
+   1. **Laser pogodi neprijatelja**: neprijatelj umire ako ga pogodi laser
+   2. **Laser pogodi vrh ekrana**: laser se uništava ako pogodi gornji dio ekrana
+   3. **Sudar neprijatelja i junaka**: neprijatelj i junak se uništavaju ako se sudare
+   4. **Neprijatelj pogodi dno ekrana**: neprijatelj i junak se uništavaju ako neprijatelj pogodi dno ekrana
+
+## Preporučeni koraci
+
+Pronađite datoteke koje su stvorene za vas u podmapi `your-work`. Trebale bi sadržavati sljedeće:
+
+```bash
+-| assets
+  -| enemyShip.png
+  -| player.png
+  -| laserRed.png
+-| index.html
+-| app.js
+-| package.json
+```
+
+Pokrenite svoj projekt u mapi `your_work` tako da upišete:
+
+```bash
+cd your-work
+npm start
+```
+
+Gornji kod će pokrenuti HTTP server na adresi `http://localhost:5000`. Otvorite preglednik i unesite tu adresu, trenutno bi trebao prikazati junaka i sve neprijatelje, ništa se još ne kreće :).
+
+### Dodajte kod
+
+1. **Postavite pravokutnu reprezentaciju objekta igre za rukovanje sudarima** Sljedeći kod omogućuje vam dobivanje pravokutne reprezentacije `GameObject`. Uredite svoju klasu GameObject kako biste je proširili:
+
+    ```javascript
+    rectFromGameObject() {
+        return {
+          top: this.y,
+          left: this.x,
+          bottom: this.y + this.height,
+          right: this.x + this.width,
+        };
+      }
+    ```
+
+2. **Dodajte kod koji provjerava sudar** Ovo će biti nova funkcija koja testira presijecaju li se dva pravokutnika:
+
+    ```javascript
+    function intersectRect(r1, r2) {
+      return !(
+        r2.left > r1.right ||
+        r2.right < r1.left ||
+        r2.top > r1.bottom ||
+        r2.bottom < r1.top
+      );
+    }
+    ```
+
+3. **Dodajte mogućnost ispaljivanja lasera**
+   1. **Dodajte poruku za događaj pritiska tipke**. Tipka *razmaknica* trebala bi stvoriti laser neposredno iznad broda junaka. Dodajte tri konstante u objekt Messages:
+
+       ```javascript
+        KEY_EVENT_SPACE: "KEY_EVENT_SPACE",
+        COLLISION_ENEMY_LASER: "COLLISION_ENEMY_LASER",
+        COLLISION_ENEMY_HERO: "COLLISION_ENEMY_HERO",
+       ```
+
+   1. **Rukujte tipkom razmaknica**. Uredite funkciju `window.addEventListener` za događaj `keyup` kako biste rukovali razmaknicom:
+
+      ```javascript
+        } else if(evt.keyCode === 32) {
+          eventEmitter.emit(Messages.KEY_EVENT_SPACE);
+        }
+      ```
+
+    1. **Dodajte slušatelje događaja**. Uredite funkciju `initGame()` kako biste osigurali da junak može pucati kada se pritisne razmaknica:
+
+       ```javascript
+       eventEmitter.on(Messages.KEY_EVENT_SPACE, () => {
+        if (hero.canFire()) {
+          hero.fire();
+        }
+       ```
+
+       i dodajte novu funkciju `eventEmitter.on()` kako biste osigurali ponašanje kada neprijatelj sudari s laserom:
+
+          ```javascript
+          eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => {
+            first.dead = true;
+            second.dead = true;
+          })
+          ```
+
+   1. **Pomaknite objekt**, Osigurajte da se laser postupno kreće prema vrhu ekrana. Stvorit ćete novu klasu Laser koja proširuje `GameObject`, kao što ste već radili: 
+   
+      ```javascript
+        class Laser extends GameObject {
+        constructor(x, y) {
+          super(x,y);
+          (this.width = 9), (this.height = 33);
+          this.type = 'Laser';
+          this.img = laserImg;
+          let id = setInterval(() => {
+            if (this.y > 0) {
+              this.y -= 15;
+            } else {
+              this.dead = true;
+              clearInterval(id);
+            }
+          }, 100)
+        }
+      }
+      ```
+
+   1. **Rukujte sudarima**, Implementirajte pravila sudara za laser. Dodajte funkciju `updateGameObjects()` koja testira sudare objekata za pogotke:
+
+      ```javascript
+      function updateGameObjects() {
+        const enemies = gameObjects.filter(go => go.type === 'Enemy');
+        const lasers = gameObjects.filter((go) => go.type === "Laser");
+      // laser hit something
+        lasers.forEach((l) => {
+          enemies.forEach((m) => {
+            if (intersectRect(l.rectFromGameObject(), m.rectFromGameObject())) {
+            eventEmitter.emit(Messages.COLLISION_ENEMY_LASER, {
+              first: l,
+              second: m,
+            });
+          }
+         });
+      });
+
+        gameObjects = gameObjects.filter(go => !go.dead);
+      }  
+      ```
+
+      Pobrinite se da dodate `updateGameObjects()` u petlju igre u `window.onload`.
+
+   4. **Implementirajte vremensko ograničenje** za laser, tako da se može ispaliti samo u određenim intervalima.
+
+      Na kraju, uredite klasu Hero kako bi mogla koristiti vremensko ograničenje:
+
+       ```javascript
+      class Hero extends GameObject {
+        constructor(x, y) {
+          super(x, y);
+          (this.width = 99), (this.height = 75);
+          this.type = "Hero";
+          this.speed = { x: 0, y: 0 };
+          this.cooldown = 0;
+        }
+        fire() {
+          gameObjects.push(new Laser(this.x + 45, this.y - 10));
+          this.cooldown = 500;
+    
+          let id = setInterval(() => {
+            if (this.cooldown > 0) {
+              this.cooldown -= 100;
+            } else {
+              clearInterval(id);
+            }
+          }, 200);
+        }
+        canFire() {
+          return this.cooldown === 0;
+        }
+      }
+      ```
+
+U ovom trenutku, vaša igra ima neku funkcionalnost! Možete se kretati pomoću tipki sa strelicama, ispaliti laser razmaknicom, a neprijatelji nestaju kada ih pogodite. Bravo!
+
+---
+
+## 🚀 Izazov
+
+Dodajte eksploziju! Pogledajte resurse igre u [repozitoriju Space Art](../../../../6-space-game/solution/spaceArt/readme.txt) i pokušajte dodati eksploziju kada laser pogodi vanzemaljca.
+
+## Kviz nakon predavanja
+
+[Kviz nakon predavanja](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/36)
+
+## Pregled i samostalno učenje
+
+Eksperimentirajte s intervalima u vašoj igri do sada. Što se događa kada ih promijenite? Pročitajte više o [JavaScript vremenskim događajima](https://www.freecodecamp.org/news/javascript-timing-events-settimeout-and-setinterval/).
+
+## Zadatak
+
+[Istražite sudare](assignment.md)
+
+---
+
+**Odricanje od odgovornosti**:  
+Ovaj dokument je preveden pomoću AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za ključne informacije preporučuje se profesionalni prijevod od strane ljudskog prevoditelja. Ne preuzimamo odgovornost za bilo kakve nesporazume ili pogrešne interpretacije koje proizlaze iz korištenja ovog prijevoda.
\ No newline at end of file
diff --git a/translations/hr/6-space-game/4-collision-detection/assignment.md b/translations/hr/6-space-game/4-collision-detection/assignment.md
new file mode 100644
index 00000000..928cacfb
--- /dev/null
+++ b/translations/hr/6-space-game/4-collision-detection/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "8a0a097b45e7c75a611e2795e4013f16",
+  "translation_date": "2025-08-27T22:30:40+00:00",
+  "source_file": "6-space-game/4-collision-detection/assignment.md",
+  "language_code": "hr"
+}
+-->
+# Istražite Sudare
+
+## Upute
+
+Kako biste bolje razumjeli kako sudari funkcioniraju, izradite vrlo malu igru s nekoliko predmeta koji se sudaraju. Omogućite im kretanje putem pritisaka tipki ili klikova mišem, i neka se nešto dogodi jednom od predmeta kada dođe do sudara. To može biti, na primjer, meteor koji udara u Zemlju ili sudar autića na sudar. Budite kreativni!
+
+## Rubrika
+
+| Kriterij | Primjeran                                                                                                                | Zadovoljavajući                | Potrebno Poboljšanje |
+| -------- | ------------------------------------------------------------------------------------------------------------------------ | ------------------------------ | --------------------- |
+|          | Proizveden je potpuni radni uzorak koda, s predmetima nacrtanim na platnu, osnovnim sudarima i reakcijama koje se događaju | Kod je na neki način nepotpun  | Kod ne funkcionira    |
+
+---
+
+**Odricanje od odgovornosti**:  
+Ovaj dokument je preveden pomoću AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za ključne informacije preporučuje se profesionalni prijevod od strane čovjeka. Ne preuzimamo odgovornost za nesporazume ili pogrešna tumačenja koja mogu proizaći iz korištenja ovog prijevoda.
\ No newline at end of file
diff --git a/translations/hr/6-space-game/4-collision-detection/solution/README.md b/translations/hr/6-space-game/4-collision-detection/solution/README.md
new file mode 100644
index 00000000..b72734f9
--- /dev/null
+++ b/translations/hr/6-space-game/4-collision-detection/solution/README.md
@@ -0,0 +1,15 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "068cbb9b3c10a96d503f6cdd6c9ace8c",
+  "translation_date": "2025-08-27T22:30:57+00:00",
+  "source_file": "6-space-game/4-collision-detection/solution/README.md",
+  "language_code": "hr"
+}
+-->
+Ovo je rezervirano mjesto, namjerno ostavljeno prazno
+
+---
+
+**Odricanje od odgovornosti**:  
+Ovaj dokument je preveden pomoću AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za ključne informacije preporučuje se profesionalni prijevod od strane čovjeka. Ne preuzimamo odgovornost za nesporazume ili pogrešna tumačenja koja mogu proizaći iz korištenja ovog prijevoda.
\ No newline at end of file
diff --git a/translations/hr/6-space-game/4-collision-detection/your-work/README.md b/translations/hr/6-space-game/4-collision-detection/your-work/README.md
new file mode 100644
index 00000000..e92fbcb1
--- /dev/null
+++ b/translations/hr/6-space-game/4-collision-detection/your-work/README.md
@@ -0,0 +1,15 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "068cbb9b3c10a96d503f6cdd6c9ace8c",
+  "translation_date": "2025-08-27T22:31:11+00:00",
+  "source_file": "6-space-game/4-collision-detection/your-work/README.md",
+  "language_code": "hr"
+}
+-->
+Ovo je rezervirano mjesto, namjerno ostavljeno prazno
+
+---
+
+**Odricanje od odgovornosti**:  
+Ovaj dokument je preveden pomoću AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za ključne informacije preporučuje se profesionalni prijevod od strane ljudskog prevoditelja. Ne preuzimamo odgovornost za nesporazume ili pogrešna tumačenja koja mogu proizaći iz korištenja ovog prijevoda.
\ No newline at end of file
diff --git a/translations/hr/6-space-game/5-keeping-score/README.md b/translations/hr/6-space-game/5-keeping-score/README.md
new file mode 100644
index 00000000..9063f154
--- /dev/null
+++ b/translations/hr/6-space-game/5-keeping-score/README.md
@@ -0,0 +1,203 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "4e8250db84b027c9ff816b4e4c093457",
+  "translation_date": "2025-08-27T22:27:43+00:00",
+  "source_file": "6-space-game/5-keeping-score/README.md",
+  "language_code": "hr"
+}
+-->
+# Izgradnja svemirske igre, dio 5: Bodovi i životi
+
+## Kviz prije predavanja
+
+[Kviz prije predavanja](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/37)
+
+U ovoj lekciji naučit ćete kako dodati bodovanje u igru i izračunati živote.
+
+## Iscrtavanje teksta na ekranu
+
+Kako biste mogli prikazati rezultat igre na ekranu, trebate znati kako postaviti tekst na ekran. Odgovor je korištenje metode `fillText()` na objektu canvas. Također možete kontrolirati druge aspekte poput fonta, boje teksta pa čak i poravnanja (lijevo, desno, centrirano). Ispod je primjer koda koji iscrtava tekst na ekranu.
+
+```javascript
+ctx.font = "30px Arial";
+ctx.fillStyle = "red";
+ctx.textAlign = "right";
+ctx.fillText("show this on the screen", 0, 0);
+```
+
+✅ Pročitajte više o [dodavanju teksta na canvas](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_text) i slobodno učinite svoj tekst vizualno privlačnijim!
+
+## Život kao koncept u igri
+
+Koncept života u igri je samo broj. U kontekstu svemirske igre, uobičajeno je dodijeliti određeni broj života koji se smanjuju jedan po jedan kada vaš brod pretrpi štetu. Lijepo je ako možete prikazati grafičku reprezentaciju toga, poput malih brodova ili srca, umjesto broja.
+
+## Što izraditi
+
+Dodajte sljedeće u svoju igru:
+
+- **Rezultat igre**: Za svaki neprijateljski brod koji uništite, heroj bi trebao dobiti bodove, predlažemo 100 bodova po brodu. Rezultat igre trebao bi biti prikazan u donjem lijevom kutu.
+- **Životi**: Vaš brod ima tri života. Gubite jedan život svaki put kada neprijateljski brod udari u vas. Broj života trebao bi biti prikazan u donjem desnom kutu i sastojati se od sljedeće grafike ![slika života](../../../../translated_images/life.6fb9f50d53ee0413cd91aa411f7c296e10a1a6de5c4a4197c718b49bf7d63ebf.hr.png).
+
+## Preporučeni koraci
+
+Pronađite datoteke koje su već kreirane za vas u podmapi `your-work`. Trebale bi sadržavati sljedeće:
+
+```bash
+-| assets
+  -| enemyShip.png
+  -| player.png
+  -| laserRed.png
+-| index.html
+-| app.js
+-| package.json
+```
+
+Pokrenite svoj projekt u mapi `your_work` upisivanjem:
+
+```bash
+cd your-work
+npm start
+```
+
+Gornja naredba pokrenut će HTTP poslužitelj na adresi `http://localhost:5000`. Otvorite preglednik i unesite tu adresu. Trenutno bi se trebao prikazati heroj i svi neprijatelji, a pritiskom na lijevu i desnu strelicu heroj se pomiče i može pucati na neprijatelje.
+
+### Dodavanje koda
+
+1. **Kopirajte potrebne resurse** iz mape `solution/assets/` u mapu `your-work`; dodajte resurs `life.png`. Dodajte `lifeImg` u funkciju `window.onload`:
+
+    ```javascript
+    lifeImg = await loadTexture("assets/life.png");
+    ```
+
+1. Dodajte `lifeImg` na popis resursa:
+
+    ```javascript
+    let heroImg,
+    ...
+    lifeImg,
+    ...
+    eventEmitter = new EventEmitter();
+    ```
+  
+2. **Dodajte varijable**. Dodajte kod koji predstavlja vaš ukupni rezultat (0) i preostale živote (3), te prikažite te vrijednosti na ekranu.
+
+3. **Proširite funkciju `updateGameObjects()`**. Proširite funkciju `updateGameObjects()` kako bi obrađivala sudare s neprijateljima:
+
+    ```javascript
+    enemies.forEach(enemy => {
+        const heroRect = hero.rectFromGameObject();
+        if (intersectRect(heroRect, enemy.rectFromGameObject())) {
+          eventEmitter.emit(Messages.COLLISION_ENEMY_HERO, { enemy });
+        }
+      })
+    ```
+
+4. **Dodajte `life` i `points`**. 
+   1. **Inicijalizirajte varijable**. Ispod `this.cooldown = 0` u klasi `Hero`, postavite život i bodove:
+
+        ```javascript
+        this.life = 3;
+        this.points = 0;
+        ```
+
+   1. **Iscrtajte varijable na ekranu**. Prikažite te vrijednosti na ekranu:
+
+        ```javascript
+        function drawLife() {
+          // TODO, 35, 27
+          const START_POS = canvas.width - 180;
+          for(let i=0; i < hero.life; i++ ) {
+            ctx.drawImage(
+              lifeImg, 
+              START_POS + (45 * (i+1) ), 
+              canvas.height - 37);
+          }
+        }
+        
+        function drawPoints() {
+          ctx.font = "30px Arial";
+          ctx.fillStyle = "red";
+          ctx.textAlign = "left";
+          drawText("Points: " + hero.points, 10, canvas.height-20);
+        }
+        
+        function drawText(message, x, y) {
+          ctx.fillText(message, x, y);
+        }
+
+        ```
+
+   1. **Dodajte metode u petlju igre**. Pobrinite se da dodate ove funkcije u svoju funkciju `window.onload` ispod `updateGameObjects()`:
+
+        ```javascript
+        drawPoints();
+        drawLife();
+        ```
+
+1. **Implementirajte pravila igre**. Implementirajte sljedeća pravila igre:
+
+   1. **Za svaki sudar heroja i neprijatelja**, oduzmite jedan život.
+   
+      Proširite klasu `Hero` kako biste to omogućili:
+
+        ```javascript
+        decrementLife() {
+          this.life--;
+          if (this.life === 0) {
+            this.dead = true;
+          }
+        }
+        ```
+
+   2. **Za svaki laser koji pogodi neprijatelja**, povećajte rezultat igre za 100 bodova.
+
+      Proširite klasu `Hero` kako biste to omogućili:
+    
+        ```javascript
+          incrementPoints() {
+            this.points += 100;
+          }
+        ```
+
+        Dodajte ove funkcije u svoje emitere događaja sudara:
+
+        ```javascript
+        eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => {
+           first.dead = true;
+           second.dead = true;
+           hero.incrementPoints();
+        })
+
+        eventEmitter.on(Messages.COLLISION_ENEMY_HERO, (_, { enemy }) => {
+           enemy.dead = true;
+           hero.decrementLife();
+        });
+        ```
+
+✅ Istražite druge igre koje su izrađene pomoću JavaScript/Canvas tehnologije. Koje su njihove zajedničke karakteristike?
+
+Na kraju ovog zadatka trebali biste vidjeti male brodove za živote u donjem desnom kutu, bodove u donjem lijevom kutu, te biste trebali vidjeti kako se broj života smanjuje kada se sudarite s neprijateljima, a bodovi povećavaju kada pucate na neprijatelje. Bravo! Vaša igra je gotovo gotova.
+
+---
+
+## 🚀 Izazov
+
+Vaš kod je gotovo dovršen. Možete li zamisliti svoje sljedeće korake?
+
+## Kviz nakon predavanja
+
+[Kviz nakon predavanja](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/38)
+
+## Pregled i samostalno učenje
+
+Istražite načine na koje možete povećavati i smanjivati bodove i živote u igri. Postoje zanimljivi alati za razvoj igara poput [PlayFab](https://playfab.com). Kako bi korištenje jednog od njih moglo unaprijediti vašu igru?
+
+## Zadatak
+
+[Izgradite igru s bodovanjem](assignment.md)
+
+---
+
+**Odricanje od odgovornosti**:  
+Ovaj dokument je preveden pomoću AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za ključne informacije preporučuje se profesionalni prijevod od strane čovjeka. Ne preuzimamo odgovornost za bilo kakva nesporazuma ili pogrešna tumačenja koja proizlaze iz korištenja ovog prijevoda.
\ No newline at end of file
diff --git a/translations/hr/6-space-game/5-keeping-score/assignment.md b/translations/hr/6-space-game/5-keeping-score/assignment.md
new file mode 100644
index 00000000..f03a8681
--- /dev/null
+++ b/translations/hr/6-space-game/5-keeping-score/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "81f292dbda01685b91735e0398dc0504",
+  "translation_date": "2025-08-27T22:28:26+00:00",
+  "source_file": "6-space-game/5-keeping-score/assignment.md",
+  "language_code": "hr"
+}
+-->
+# Izgradite igru bodovanja
+
+## Upute
+
+Kreirajte igru u kojoj na kreativan način prikazujete živote i bodove. Jedan prijedlog je prikazati živote kao srca, a bodove kao veliki broj na donjem središnjem dijelu ekrana. Pogledajte ovdje za [Besplatne resurse za igre](https://www.kenney.nl/)
+
+# Rubrika
+
+| Kriteriji | Izvrsno                | Zadovoljavajuće             | Potrebna poboljšanja       |
+| --------- | ---------------------- | --------------------------- | -------------------------- |
+|           | cijela igra je prikazana | igra je djelomično prikazana | djelomična igra sadrži greške |
+
+---
+
+**Odricanje od odgovornosti**:  
+Ovaj dokument je preveden pomoću AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za ključne informacije preporučuje se profesionalni prijevod od strane ljudskog prevoditelja. Ne preuzimamo odgovornost za bilo kakva nesporazuma ili pogrešna tumačenja koja proizlaze iz korištenja ovog prijevoda.
\ No newline at end of file
diff --git a/translations/hr/6-space-game/5-keeping-score/solution/README.md b/translations/hr/6-space-game/5-keeping-score/solution/README.md
new file mode 100644
index 00000000..a244e73e
--- /dev/null
+++ b/translations/hr/6-space-game/5-keeping-score/solution/README.md
@@ -0,0 +1,15 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "068cbb9b3c10a96d503f6cdd6c9ace8c",
+  "translation_date": "2025-08-27T22:28:42+00:00",
+  "source_file": "6-space-game/5-keeping-score/solution/README.md",
+  "language_code": "hr"
+}
+-->
+Ovo je rezervirano mjesto, namjerno ostavljeno prazno
+
+---
+
+**Odricanje od odgovornosti**:  
+Ovaj dokument je preveden korištenjem AI usluge za prijevod [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati mjerodavnim izvorom. Za ključne informacije preporučuje se profesionalni prijevod od strane stručnjaka. Ne preuzimamo odgovornost za bilo kakva nesporazuma ili pogrešna tumačenja koja mogu proizaći iz korištenja ovog prijevoda.
\ No newline at end of file
diff --git a/translations/hr/6-space-game/5-keeping-score/your-work/README.md b/translations/hr/6-space-game/5-keeping-score/your-work/README.md
new file mode 100644
index 00000000..9a7fe981
--- /dev/null
+++ b/translations/hr/6-space-game/5-keeping-score/your-work/README.md
@@ -0,0 +1,15 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "068cbb9b3c10a96d503f6cdd6c9ace8c",
+  "translation_date": "2025-08-27T22:28:56+00:00",
+  "source_file": "6-space-game/5-keeping-score/your-work/README.md",
+  "language_code": "hr"
+}
+-->
+Ovo je rezervirano mjesto, namjerno ostavljeno prazno
+
+---
+
+**Odricanje od odgovornosti**:  
+Ovaj dokument je preveden pomoću AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za ključne informacije preporučuje se profesionalni prijevod od strane ljudskog prevoditelja. Ne preuzimamo odgovornost za bilo kakve nesporazume ili pogrešne interpretacije koje proizlaze iz korištenja ovog prijevoda.
\ No newline at end of file
diff --git a/translations/hr/6-space-game/6-end-condition/README.md b/translations/hr/6-space-game/6-end-condition/README.md
new file mode 100644
index 00000000..c76d9d63
--- /dev/null
+++ b/translations/hr/6-space-game/6-end-condition/README.md
@@ -0,0 +1,236 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "01336cddd638242e99b133614111ea40",
+  "translation_date": "2025-08-27T22:33:00+00:00",
+  "source_file": "6-space-game/6-end-condition/README.md",
+  "language_code": "hr"
+}
+-->
+# Izgradnja svemirske igre, dio 6: Kraj i ponovno pokretanje
+
+## Kviz prije predavanja
+
+[Kviz prije predavanja](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/39)
+
+Postoji mnogo načina za izražavanje *uvjeta završetka* u igri. Na vama kao kreatoru igre je da odredite zašto je igra završila. Evo nekoliko razloga, pod pretpostavkom da govorimo o svemirskoj igri koju ste do sada gradili:
+
+- **Uništeno je `N` neprijateljskih brodova**: Često je slučaj da, ako podijelite igru na različite razine, trebate uništiti `N` neprijateljskih brodova kako biste završili razinu.
+- **Vaš brod je uništen**: Postoje igre u kojima gubite ako je vaš brod uništen. Drugi uobičajeni pristup je koncept života. Svaki put kada je vaš brod uništen, oduzima se jedan život. Kada izgubite sve živote, gubite igru.
+- **Prikupili ste `N` bodova**: Još jedan uobičajeni uvjet završetka je prikupljanje bodova. Kako ćete dobiti bodove ovisi o vama, ali često se bodovi dodjeljuju za različite aktivnosti, poput uništavanja neprijateljskog broda ili prikupljanja predmeta koji *ispadnu* kada su uništeni.
+- **Završetak razine**: Ovo može uključivati nekoliko uvjeta, poput uništenja `X` neprijateljskih brodova, prikupljanja `Y` bodova ili možda prikupljanja određenog predmeta.
+
+## Ponovno pokretanje
+
+Ako se ljudima svidi vaša igra, vjerojatno će je htjeti ponovno igrati. Kada igra završi iz bilo kojeg razloga, trebali biste ponuditi mogućnost ponovnog pokretanja.
+
+✅ Razmislite malo o uvjetima pod kojima igra završava i kako vas potiču da je ponovno pokrenete.
+
+## Što izgraditi
+
+Dodati ćete sljedeća pravila svojoj igri:
+
+1. **Pobjeda u igri**. Kada su svi neprijateljski brodovi uništeni, pobjeđujete u igri. Također, prikažite neku vrstu poruke o pobjedi.
+1. **Ponovno pokretanje**. Kada izgubite sve živote ili pobijedite u igri, trebali biste ponuditi način za ponovno pokretanje igre. Zapamtite! Trebat ćete ponovno inicijalizirati igru i očistiti prethodno stanje igre.
+
+## Preporučeni koraci
+
+Pronađite datoteke koje su stvorene za vas u podmapi `your-work`. Trebale bi sadržavati sljedeće:
+
+```bash
+-| assets
+  -| enemyShip.png
+  -| player.png
+  -| laserRed.png
+  -| life.png
+-| index.html
+-| app.js
+-| package.json
+```
+
+Pokrenite svoj projekt u mapi `your_work` unosom:
+
+```bash
+cd your-work
+npm start
+```
+
+Gornji unos pokrenut će HTTP poslužitelj na adresi `http://localhost:5000`. Otvorite preglednik i unesite tu adresu. Vaša igra bi trebala biti u stanju za igranje.
+
+> savjet: kako biste izbjegli upozorenja u Visual Studio Codeu, uredite funkciju `window.onload` tako da poziva `gameLoopId` bez `let`, i deklarirajte `gameLoopId` na vrhu datoteke, neovisno: `let gameLoopId;`
+
+### Dodavanje koda
+
+1. **Praćenje uvjeta završetka**. Dodajte kod koji prati broj neprijatelja ili je li herojski brod uništen dodavanjem ove dvije funkcije:
+
+    ```javascript
+    function isHeroDead() {
+      return hero.life <= 0;
+    }
+
+    function isEnemiesDead() {
+      const enemies = gameObjects.filter((go) => go.type === "Enemy" && !go.dead);
+      return enemies.length === 0;
+    }
+    ```
+
+1. **Dodavanje logike u rukovatelje porukama**. Uredite `eventEmitter` kako biste obradili ove uvjete:
+
+    ```javascript
+    eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => {
+        first.dead = true;
+        second.dead = true;
+        hero.incrementPoints();
+
+        if (isEnemiesDead()) {
+          eventEmitter.emit(Messages.GAME_END_WIN);
+        }
+    });
+
+    eventEmitter.on(Messages.COLLISION_ENEMY_HERO, (_, { enemy }) => {
+        enemy.dead = true;
+        hero.decrementLife();
+        if (isHeroDead())  {
+          eventEmitter.emit(Messages.GAME_END_LOSS);
+          return; // loss before victory
+        }
+        if (isEnemiesDead()) {
+          eventEmitter.emit(Messages.GAME_END_WIN);
+        }
+    });
+    
+    eventEmitter.on(Messages.GAME_END_WIN, () => {
+        endGame(true);
+    });
+      
+    eventEmitter.on(Messages.GAME_END_LOSS, () => {
+      endGame(false);
+    });
+    ```
+
+1. **Dodavanje novih tipova poruka**. Dodajte ove poruke u objekt konstanti:
+
+    ```javascript
+    GAME_END_LOSS: "GAME_END_LOSS",
+    GAME_END_WIN: "GAME_END_WIN",
+    ```
+
+2. **Dodavanje koda za ponovno pokretanje** koji ponovno pokreće igru pritiskom na odabranu tipku.
+
+   1. **Slušanje pritiska tipke `Enter`**. Uredite `eventListener` vašeg prozora kako bi slušao ovaj pritisak:
+
+    ```javascript
+     else if(evt.key === "Enter") {
+        eventEmitter.emit(Messages.KEY_EVENT_ENTER);
+      }
+    ```
+
+   1. **Dodavanje poruke za ponovno pokretanje**. Dodajte ovu poruku u svoje konstante poruka:
+
+        ```javascript
+        KEY_EVENT_ENTER: "KEY_EVENT_ENTER",
+        ```
+
+1. **Implementacija pravila igre**. Implementirajte sljedeća pravila igre:
+
+   1. **Uvjet pobjede igrača**. Kada su svi neprijateljski brodovi uništeni, prikažite poruku o pobjedi.
+
+      1. Prvo, kreirajte funkciju `displayMessage()`:
+
+        ```javascript
+        function displayMessage(message, color = "red") {
+          ctx.font = "30px Arial";
+          ctx.fillStyle = color;
+          ctx.textAlign = "center";
+          ctx.fillText(message, canvas.width / 2, canvas.height / 2);
+        }
+        ```
+
+      1. Kreirajte funkciju `endGame()`:
+
+        ```javascript
+        function endGame(win) {
+          clearInterval(gameLoopId);
+        
+          // set a delay so we are sure any paints have finished
+          setTimeout(() => {
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            ctx.fillStyle = "black";
+            ctx.fillRect(0, 0, canvas.width, canvas.height);
+            if (win) {
+              displayMessage(
+                "Victory!!! Pew Pew... - Press [Enter] to start a new game Captain Pew Pew",
+                "green"
+              );
+            } else {
+              displayMessage(
+                "You died !!! Press [Enter] to start a new game Captain Pew Pew"
+              );
+            }
+          }, 200)  
+        }
+        ```
+
+   1. **Logika ponovnog pokretanja**. Kada su svi životi izgubljeni ili je igrač pobijedio, prikažite da se igra može ponovno pokrenuti. Također, ponovno pokrenite igru kada se pritisne tipka za ponovno pokretanje (možete odlučiti koja tipka će biti mapirana za ponovno pokretanje).
+
+      1. Kreirajte funkciju `resetGame()`:
+
+        ```javascript
+        function resetGame() {
+          if (gameLoopId) {
+            clearInterval(gameLoopId);
+            eventEmitter.clear();
+            initGame();
+            gameLoopId = setInterval(() => {
+              ctx.clearRect(0, 0, canvas.width, canvas.height);
+              ctx.fillStyle = "black";
+              ctx.fillRect(0, 0, canvas.width, canvas.height);
+              drawPoints();
+              drawLife();
+              updateGameObjects();
+              drawGameObjects(ctx);
+            }, 100);
+          }
+        }
+        ```
+
+     1. Dodajte poziv `eventEmitter`-u za resetiranje igre u `initGame()`:
+
+        ```javascript
+        eventEmitter.on(Messages.KEY_EVENT_ENTER, () => {
+          resetGame();
+        });
+        ```
+
+     1. Dodajte funkciju `clear()` u EventEmitter:
+
+        ```javascript
+        clear() {
+          this.listeners = {};
+        }
+        ```
+
+👽 💥 🚀 Čestitamo, Kapetane! Vaša igra je gotova! Bravo! 🚀 💥 👽
+
+---
+
+## 🚀 Izazov
+
+Dodajte zvuk! Možete li dodati zvuk kako biste poboljšali igranje, možda kada laser pogodi metu, ili kada heroj umre ili pobijedi? Pogledajte ovaj [sandbox](https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_audio_play) kako biste naučili kako reproducirati zvuk pomoću JavaScripta.
+
+## Kviz nakon predavanja
+
+[Kviz nakon predavanja](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/40)
+
+## Pregled i samostalno učenje
+
+Vaš zadatak je stvoriti novu uzornu igru, pa istražite neke zanimljive igre kako biste vidjeli kakvu biste igru mogli izgraditi.
+
+## Zadatak
+
+[Izgradite uzornu igru](assignment.md)
+
+---
+
+**Odricanje od odgovornosti**:  
+Ovaj dokument je preveden pomoću AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za ključne informacije preporučuje se profesionalni prijevod od strane čovjeka. Ne preuzimamo odgovornost za bilo kakva nesporazuma ili pogrešna tumačenja koja proizlaze iz korištenja ovog prijevoda.
\ No newline at end of file
diff --git a/translations/hr/6-space-game/6-end-condition/assignment.md b/translations/hr/6-space-game/6-end-condition/assignment.md
new file mode 100644
index 00000000..7697ab3e
--- /dev/null
+++ b/translations/hr/6-space-game/6-end-condition/assignment.md
@@ -0,0 +1,33 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "24201cf428c7edba1ccec2a78a0dd8f8",
+  "translation_date": "2025-08-27T22:33:48+00:00",
+  "source_file": "6-space-game/6-end-condition/assignment.md",
+  "language_code": "hr"
+}
+-->
+# Izgradite Uzorak Igre
+
+## Upute
+
+Pokušajte izraditi malu igru u kojoj ćete vježbati različite završne uvjete. Varirajte između postizanja određenog broja bodova, gubitka svih života heroja ili poraza svih čudovišta. Napravite nešto jednostavno, poput avanturističke igre temeljene na konzoli. Koristite dolje navedeni tijek igre kao inspiraciju:
+
+```
+Hero> Strikes with broadsword - orc takes 3p damage
+Orc> Hits with club - hero takes 2p damage
+Hero> Kicks - orc takes 1p damage
+Game> Orc is defeated - Hero collects 2 coins
+Game> ****No more monsters, you have conquered the evil fortress****
+```
+
+## Rubrika
+
+| Kriterij | Izvrsno                | Zadovoljavajuće             | Potrebno Poboljšanje       |
+| -------- | ---------------------- | --------------------------- | -------------------------- |
+|          | cijela igra je prikazana | igra je djelomično prikazana | djelomična igra sadrži greške |
+
+---
+
+**Odricanje od odgovornosti**:  
+Ovaj dokument je preveden pomoću AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za ključne informacije preporučuje se profesionalni prijevod od strane ljudskog prevoditelja. Ne preuzimamo odgovornost za bilo kakva nesporazuma ili pogrešna tumačenja koja proizlaze iz korištenja ovog prijevoda.
\ No newline at end of file
diff --git a/translations/hr/6-space-game/6-end-condition/solution/README.md b/translations/hr/6-space-game/6-end-condition/solution/README.md
new file mode 100644
index 00000000..833311bc
--- /dev/null
+++ b/translations/hr/6-space-game/6-end-condition/solution/README.md
@@ -0,0 +1,15 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "068cbb9b3c10a96d503f6cdd6c9ace8c",
+  "translation_date": "2025-08-27T22:34:04+00:00",
+  "source_file": "6-space-game/6-end-condition/solution/README.md",
+  "language_code": "hr"
+}
+-->
+Ovo je rezervirano mjesto, namjerno ostavljeno prazno
+
+---
+
+**Odricanje od odgovornosti**:  
+Ovaj dokument je preveden pomoću AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za ključne informacije preporučuje se profesionalni prijevod od strane čovjeka. Ne preuzimamo odgovornost za bilo kakve nesporazume ili pogrešne interpretacije koje proizlaze iz korištenja ovog prijevoda.
\ No newline at end of file
diff --git a/translations/hr/6-space-game/6-end-condition/your-work/README.md b/translations/hr/6-space-game/6-end-condition/your-work/README.md
new file mode 100644
index 00000000..9d10ea21
--- /dev/null
+++ b/translations/hr/6-space-game/6-end-condition/your-work/README.md
@@ -0,0 +1,15 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "068cbb9b3c10a96d503f6cdd6c9ace8c",
+  "translation_date": "2025-08-27T22:34:16+00:00",
+  "source_file": "6-space-game/6-end-condition/your-work/README.md",
+  "language_code": "hr"
+}
+-->
+Ovo je rezervirano mjesto, namjerno ostavljeno prazno
+
+---
+
+**Odricanje od odgovornosti**:  
+Ovaj dokument je preveden pomoću AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za kritične informacije preporučuje se profesionalni prijevod od strane čovjeka. Ne preuzimamo odgovornost za nesporazume ili pogrešna tumačenja koja mogu proizaći iz korištenja ovog prijevoda.
\ No newline at end of file
diff --git a/translations/hr/6-space-game/README.md b/translations/hr/6-space-game/README.md
new file mode 100644
index 00000000..f6231c23
--- /dev/null
+++ b/translations/hr/6-space-game/README.md
@@ -0,0 +1,45 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "c40a698395ee5102715f7880bba3f2e7",
+  "translation_date": "2025-08-27T22:25:23+00:00",
+  "source_file": "6-space-game/README.md",
+  "language_code": "hr"
+}
+-->
+# Izgradnja svemirske igre
+
+Svemirska igra za učenje naprednijih osnova JavaScripta
+
+U ovoj lekciji naučit ćete kako izraditi vlastitu svemirsku igru. Ako ste ikada igrali igru "Space Invaders", ova igra ima sličnu ideju: upravljati svemirskim brodom i pucati na čudovišta koja dolaze odozgo. Evo kako će gotova igra izgledati:
+
+![Gotova igra](../../../6-space-game/images/pewpew.gif)
+
+U ovih šest lekcija naučit ćete sljedeće:
+
+- **Interakcija** s Canvas elementom za crtanje na ekranu
+- **Razumijevanje** kartezijanskog koordinatnog sustava
+- **Učenje** Pub-Sub obrasca za stvaranje zvučne arhitekture igre koja je lakša za održavanje i proširenje
+- **Korištenje** Async/Await za učitavanje resursa igre
+- **Rukovanje** događajima s tipkovnice
+
+## Pregled
+
+- Teorija
+   - [Uvod u izradu igara s JavaScriptom](1-introduction/README.md)
+- Praksa
+   - [Crtanje na canvas](2-drawing-to-canvas/README.md)
+   - [Pomicanje elemenata po ekranu](3-moving-elements-around/README.md)
+   - [Otkrivanje sudara](4-collision-detection/README.md)
+   - [Bodovanje](5-keeping-score/README.md)
+   - [Završetak i ponovno pokretanje igre](6-end-condition/README.md)
+
+## Zasluge
+
+Resursi korišteni za ovo preuzeti su s https://www.kenney.nl/.  
+Ako vas zanima izrada igara, ovo su zaista odlični resursi, puno ih je besplatno, a neki su plaćeni.
+
+---
+
+**Odricanje od odgovornosti**:  
+Ovaj dokument je preveden pomoću AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za ključne informacije preporučuje se profesionalni prijevod od strane ljudskog prevoditelja. Ne preuzimamo odgovornost za bilo kakve nesporazume ili pogrešne interpretacije koje proizlaze iz korištenja ovog prijevoda.
\ No newline at end of file
diff --git a/translations/hr/6-space-game/solution/README.md b/translations/hr/6-space-game/solution/README.md
new file mode 100644
index 00000000..c3c6c7ae
--- /dev/null
+++ b/translations/hr/6-space-game/solution/README.md
@@ -0,0 +1,15 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "068cbb9b3c10a96d503f6cdd6c9ace8c",
+  "translation_date": "2025-08-27T22:29:08+00:00",
+  "source_file": "6-space-game/solution/README.md",
+  "language_code": "hr"
+}
+-->
+Ovo je rezervirano mjesto, namjerno ostavljeno prazno
+
+---
+
+**Odricanje od odgovornosti**:  
+Ovaj dokument je preveden pomoću AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za ključne informacije preporučuje se profesionalni prijevod od strane čovjeka. Ne preuzimamo odgovornost za bilo kakva nesporazuma ili pogrešna tumačenja koja proizlaze iz korištenja ovog prijevoda.
\ No newline at end of file
diff --git a/translations/hr/7-bank-project/1-template-route/README.md b/translations/hr/7-bank-project/1-template-route/README.md
new file mode 100644
index 00000000..f711a22f
--- /dev/null
+++ b/translations/hr/7-bank-project/1-template-route/README.md
@@ -0,0 +1,322 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "8da1b5e2c63f749808858c53f37b8ce7",
+  "translation_date": "2025-08-27T22:10:39+00:00",
+  "source_file": "7-bank-project/1-template-route/README.md",
+  "language_code": "hr"
+}
+-->
+# Izrada bankovne aplikacije, 1. dio: HTML predlošci i rute u web aplikaciji
+
+## Kviz prije predavanja
+
+[Kviz prije predavanja](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/41)
+
+### Uvod
+
+Od pojave JavaScripta u preglednicima, web stranice postaju interaktivnije i složenije nego ikad. Web tehnologije se sada često koriste za stvaranje potpuno funkcionalnih aplikacija koje se pokreću izravno u pregledniku, a nazivamo ih [web aplikacijama](https://en.wikipedia.org/wiki/Web_application). Budući da su web aplikacije vrlo interaktivne, korisnici ne žele čekati potpuno ponovno učitavanje stranice svaki put kada se izvrši neka radnja. Zato se JavaScript koristi za ažuriranje HTML-a izravno putem DOM-a, kako bi se pružilo glatko korisničko iskustvo.
+
+U ovoj lekciji postavit ćemo temelje za izradu bankovne web aplikacije, koristeći HTML predloške za stvaranje više ekrana koji se mogu prikazivati i ažurirati bez potrebe za ponovnim učitavanjem cijele HTML stranice.
+
+### Preduvjeti
+
+Trebat će vam lokalni web poslužitelj za testiranje web aplikacije koju ćemo izraditi u ovoj lekciji. Ako ga nemate, možete instalirati [Node.js](https://nodejs.org) i koristiti naredbu `npx lite-server` iz mape vašeg projekta. To će stvoriti lokalni web poslužitelj i otvoriti vašu aplikaciju u pregledniku.
+
+### Priprema
+
+Na svom računalu stvorite mapu pod nazivom `bank` s datotekom `index.html` unutar nje. Počet ćemo s ovim HTML [boilerplateom](https://en.wikipedia.org/wiki/Boilerplate_code):
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Bank App</title>
+  </head>
+  <body>
+    <!-- This is where you'll work -->
+  </body>
+</html>
+```
+
+---
+
+## HTML predlošci
+
+Ako želite stvoriti više ekrana za web stranicu, jedno rješenje bi bilo stvoriti jednu HTML datoteku za svaki ekran koji želite prikazati. Međutim, ovo rješenje dolazi s nekim neugodnostima:
+
+- Morate ponovno učitati cijeli HTML prilikom promjene ekrana, što može biti sporo.
+- Teško je dijeliti podatke između različitih ekrana.
+
+Drugi pristup je imati samo jednu HTML datoteku i definirati više [HTML predložaka](https://developer.mozilla.org/docs/Web/HTML/Element/template) koristeći element `<template>`. Predložak je višekratni HTML blok koji preglednik ne prikazuje i koji se mora instancirati u vrijeme izvođenja pomoću JavaScripta.
+
+### Zadatak
+
+Izradit ćemo bankovnu aplikaciju s dva ekrana: stranica za prijavu i nadzorna ploča. Prvo, dodajmo u HTML tijelo element rezerviranog mjesta koji ćemo koristiti za instanciranje različitih ekrana naše aplikacije:
+
+```html
+<div id="app">Loading...</div>
+```
+
+Dodijelili smo mu `id` kako bismo ga kasnije lakše pronašli pomoću JavaScripta.
+
+> Savjet: budući da će sadržaj ovog elementa biti zamijenjen, možemo staviti poruku ili indikator učitavanja koji će se prikazivati dok se aplikacija učitava.
+
+Zatim, dodajmo ispod HTML predložak za stranicu za prijavu. Za sada ćemo tamo staviti samo naslov i odjeljak koji sadrži poveznicu koju ćemo koristiti za navigaciju.
+
+```html
+<template id="login">
+  <h1>Bank App</h1>
+  <section>
+    <a href="/dashboard">Login</a>
+  </section>
+</template>
+```
+
+Zatim ćemo dodati još jedan HTML predložak za stranicu nadzorne ploče. Ova stranica će sadržavati različite odjeljke:
+
+- Zaglavlje s naslovom i poveznicom za odjavu
+- Trenutni saldo bankovnog računa
+- Popis transakcija prikazan u tablici
+
+```html
+<template id="dashboard">
+  <header>
+    <h1>Bank App</h1>
+    <a href="/login">Logout</a>
+  </header>
+  <section>
+    Balance: 100$
+  </section>
+  <section>
+    <h2>Transactions</h2>
+    <table>
+      <thead>
+        <tr>
+          <th>Date</th>
+          <th>Object</th>
+          <th>Amount</th>
+        </tr>
+      </thead>
+      <tbody></tbody>
+    </table>
+  </section>
+</template>
+```
+
+> Savjet: kada izrađujete HTML predloške, ako želite vidjeti kako će izgledati, možete komentirati linije `<template>` i `</template>` tako da ih obuhvatite s `<!-- -->`.
+
+✅ Zašto mislite da koristimo `id` atribute na predlošcima? Možemo li koristiti nešto drugo, poput klasa?
+
+## Prikazivanje predložaka pomoću JavaScripta
+
+Ako pokušate otvoriti trenutnu HTML datoteku u pregledniku, vidjet ćete da se zaglavilo na prikazu `Loading...`. To je zato što trebamo dodati JavaScript kod za instanciranje i prikazivanje HTML predložaka.
+
+Instanciranje predloška obično se radi u 3 koraka:
+
+1. Dohvatite element predloška u DOM-u, na primjer pomoću [`document.getElementById`](https://developer.mozilla.org/docs/Web/API/Document/getElementById).
+2. Klonirajte element predloška pomoću [`cloneNode`](https://developer.mozilla.org/docs/Web/API/Node/cloneNode).
+3. Priključite ga na DOM ispod vidljivog elementa, na primjer pomoću [`appendChild`](https://developer.mozilla.org/docs/Web/API/Node/appendChild).
+
+✅ Zašto trebamo klonirati predložak prije nego ga priključimo na DOM? Što mislite da bi se dogodilo ako preskočimo ovaj korak?
+
+### Zadatak
+
+Stvorite novu datoteku pod nazivom `app.js` u mapi vašeg projekta i uvezite tu datoteku u `<head>` sekciju vašeg HTML-a:
+
+```html
+<script src="app.js" defer></script>
+```
+
+Sada u `app.js` stvorit ćemo novu funkciju `updateRoute`:
+
+```js
+function updateRoute(templateId) {
+  const template = document.getElementById(templateId);
+  const view = template.content.cloneNode(true);
+  const app = document.getElementById('app');
+  app.innerHTML = '';
+  app.appendChild(view);
+}
+```
+
+Ovdje radimo upravo 3 koraka opisana gore. Instanciramo predložak s `id`-om `templateId` i stavljamo njegov klonirani sadržaj unutar našeg rezerviranog mjesta aplikacije. Napominjemo da trebamo koristiti `cloneNode(true)` kako bismo kopirali cijelo podstablo predloška.
+
+Sada pozovite ovu funkciju s jednim od predložaka i pogledajte rezultat.
+
+```js
+updateRoute('login');
+```
+
+✅ Koja je svrha ovog koda `app.innerHTML = '';`? Što se događa bez njega?
+
+## Stvaranje ruta
+
+Kada govorimo o web aplikaciji, nazivamo *Routing* namjeru mapiranja **URL-ova** na određene ekrane koji bi se trebali prikazati. Na web stranici s više HTML datoteka, to se automatski radi jer se putovi datoteka odražavaju na URL. Na primjer, s ovim datotekama u mapi vašeg projekta:
+
+```
+mywebsite/index.html
+mywebsite/login.html
+mywebsite/admin/index.html
+```
+
+Ako stvorite web poslužitelj s `mywebsite` kao korijenom, mapiranje URL-a bit će:
+
+```
+https://site.com            --> mywebsite/index.html
+https://site.com/login.html --> mywebsite/login.html
+https://site.com/admin/     --> mywebsite/admin/index.html
+```
+
+Međutim, za našu web aplikaciju koristimo jednu HTML datoteku koja sadrži sve ekrane, pa nam ovo zadano ponašanje neće pomoći. Moramo ručno stvoriti ovu mapu i ažurirati prikazani predložak pomoću JavaScripta.
+
+### Zadatak
+
+Koristit ćemo jednostavan objekt za implementaciju [mape](https://en.wikipedia.org/wiki/Associative_array) između URL putova i naših predložaka. Dodajte ovaj objekt na vrh vaše `app.js` datoteke.
+
+```js
+const routes = {
+  '/login': { templateId: 'login' },
+  '/dashboard': { templateId: 'dashboard' },
+};
+```
+
+Sada malo izmijenimo funkciju `updateRoute`. Umjesto da izravno prosljeđujemo `templateId` kao argument, želimo ga dohvatiti prvo gledajući trenutni URL, a zatim koristiti našu mapu za dobivanje odgovarajuće vrijednosti `templateId`. Možemo koristiti [`window.location.pathname`](https://developer.mozilla.org/docs/Web/API/Location/pathname) za dobivanje samo dijela puta iz URL-a.
+
+```js
+function updateRoute() {
+  const path = window.location.pathname;
+  const route = routes[path];
+
+  const template = document.getElementById(route.templateId);
+  const view = template.content.cloneNode(true);
+  const app = document.getElementById('app');
+  app.innerHTML = '';
+  app.appendChild(view);
+}
+```
+
+Ovdje smo mapirali rute koje smo deklarirali na odgovarajući predložak. Možete provjeriti radi li ispravno tako da ručno promijenite URL u pregledniku.
+
+✅ Što se događa ako unesete nepoznati put u URL? Kako bismo to mogli riješiti?
+
+## Dodavanje navigacije
+
+Sljedeći korak za našu aplikaciju je dodavanje mogućnosti navigacije između stranica bez potrebe za ručnim mijenjanjem URL-a. To podrazumijeva dvije stvari:
+
+1. Ažuriranje trenutnog URL-a
+2. Ažuriranje prikazanog predloška na temelju novog URL-a
+
+Drugi dio smo već riješili s funkcijom `updateRoute`, pa moramo smisliti kako ažurirati trenutni URL.
+
+Morat ćemo koristiti JavaScript, a posebno [`history.pushState`](https://developer.mozilla.org/docs/Web/API/History/pushState) koji omogućuje ažuriranje URL-a i stvaranje novog unosa u povijesti pregledavanja, bez ponovnog učitavanja HTML-a.
+
+> Napomena: Iako se HTML element sidra [`<a href>`](https://developer.mozilla.org/docs/Web/HTML/Element/a) može koristiti samostalno za stvaranje hiperveza na različite URL-ove, on će po zadanom učiniti da preglednik ponovno učita HTML. Potrebno je spriječiti ovo ponašanje prilikom rukovanja rutama pomoću prilagođenog JavaScripta, koristeći funkciju `preventDefault()` na događaju klika.
+
+### Zadatak
+
+Stvorimo novu funkciju koju možemo koristiti za navigaciju u našoj aplikaciji:
+
+```js
+function navigate(path) {
+  window.history.pushState({}, path, path);
+  updateRoute();
+}
+```
+
+Ova metoda prvo ažurira trenutni URL na temelju zadanog puta, a zatim ažurira predložak. Svojstvo `window.location.origin` vraća korijen URL-a, omogućujući nam rekonstrukciju kompletnog URL-a iz zadanog puta.
+
+Sada kada imamo ovu funkciju, možemo riješiti problem koji imamo ako put ne odgovara nijednoj definiranoj ruti. Izmijenit ćemo funkciju `updateRoute` dodavanjem povratne opcije na jednu od postojećih ruta ako ne možemo pronaći podudaranje.
+
+```js
+function updateRoute() {
+  const path = window.location.pathname;
+  const route = routes[path];
+
+  if (!route) {
+    return navigate('/login');
+  }
+
+  ...
+```
+
+Ako ruta ne može biti pronađena, sada ćemo preusmjeriti na stranicu `login`.
+
+Sada stvorimo funkciju za dohvaćanje URL-a kada se klikne na poveznicu i za sprječavanje zadano ponašanje preglednika za poveznice:
+
+```js
+function onLinkClick(event) {
+  event.preventDefault();
+  navigate(event.target.href);
+}
+```
+
+Dovršimo navigacijski sustav dodavanjem veza za naše *Login* i *Logout* poveznice u HTML-u.
+
+```html
+<a href="/dashboard" onclick="onLinkClick(event)">Login</a>
+...
+<a href="/login" onclick="onLinkClick(event)">Logout</a>
+```
+
+Objekt `event` iznad hvata događaj `click` i prosljeđuje ga našoj funkciji `onLinkClick`.
+
+Koristeći atribut [`onclick`](https://developer.mozilla.org/docs/Web/API/GlobalEventHandlers/onclick), povežite događaj `click` s JavaScript kodom, ovdje pozivom funkcije `navigate()`.
+
+Pokušajte kliknuti na ove poveznice, sada biste trebali moći navigirati između različitih ekrana vaše aplikacije.
+
+✅ Metoda `history.pushState` dio je HTML5 standarda i implementirana je u [svim modernim preglednicima](https://caniuse.com/?search=pushState). Ako izrađujete web aplikaciju za starije preglednike, postoji trik koji možete koristiti umjesto ove API-je: koristeći [hash (`#`)](https://en.wikipedia.org/wiki/URI_fragment) prije puta možete implementirati rute koje rade s redovnom navigacijom sidra i ne učitavaju ponovno stranicu, jer je njegova svrha bila stvaranje unutarnjih poveznica unutar stranice.
+
+## Rukovanje gumbima za povratak i naprijed u pregledniku
+
+Korištenje `history.pushState` stvara nove unose u povijesti navigacije preglednika. Možete to provjeriti držeći *gumb za povratak* vašeg preglednika, trebao bi prikazati nešto poput ovoga:
+
+![Snimka zaslona povijesti navigacije](../../../../translated_images/history.7fdabbafa521e06455b738d3dafa3ff41d3071deae60ead8c7e0844b9ed987d8.hr.png)
+
+Ako pokušate kliknuti na gumb za povratak nekoliko puta, vidjet ćete da se trenutni URL mijenja i povijest se ažurira, ali isti predložak ostaje prikazan.
+
+To je zato što aplikacija ne zna da trebamo pozvati `updateRoute()` svaki put kada se povijest promijeni. Ako pogledate dokumentaciju za [`history.pushState`](https://developer.mozilla.org/docs/Web/API/History/pushState), možete vidjeti da ako se stanje promijeni - što znači da smo se pomaknuli na drugi URL - događaj [`popstate`](https://developer.mozilla.org/docs/Web/API/Window/popstate_event) se pokreće. Koristit ćemo to za rješavanje ovog problema.
+
+### Zadatak
+
+Kako bismo osigurali da se prikazani predložak ažurira kada se povijest preglednika promijeni, povezat ćemo novu funkciju koja poziva `updateRoute()`. To ćemo učiniti na dnu naše `app.js` datoteke:
+
+```js
+window.onpopstate = () => updateRoute();
+updateRoute();
+```
+
+> Napomena: ovdje smo koristili [arrow funkciju](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions) za deklariranje našeg `popstate` event handlera radi sažetosti, ali regularna funkcija bi radila isto.
+
+Evo osvježavajućeg videa o arrow funkcijama:
+
+[![Arrow Functions](https://img.youtube.com/vi/OP6eEbOj2sc/0.jpg)](https://youtube.com/watch?v=OP6eEbOj2sc "Arrow Functions")
+
+> 🎥 Kliknite na sliku iznad za video o arrow funkcijama.
+
+Sada pokušajte koristiti gumbe za povratak i naprijed u pregledniku i provjerite da se prikazana ruta ispravno ažurira ovaj put.
+
+---
+
+## 🚀 Izazov
+
+Dodajte novi predložak i rutu za treću stranicu koja prikazuje zasluge za ovu aplikaciju.
+
+## Kviz nakon predavanja
+
+[Kviz nakon predavanja](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/42)
+
+## Pregled i samostalno učenje
+
+Routing je jedan od iznenađujuće složenih dijelova web razvoja, posebno kako se web kreće od ponašanja osvježavanja stranica prema osvježavanju stranica u aplikacijama s jednom stranicom (Single Page Application). Pročitajte malo o [kako Azure Static Web App usluga](https://docs.microsoft.com/azure/static-web-apps/routes/?WT.mc_id=academic-77807-sagibbon) rukuje rutama. Možete li objasniti zašto su neke od odluka opisanih u tom dokumentu nužne?
+
+## Zadatak
+
+[Poboljšajte rute](assignment.md)
+
+---
+
+**Odricanje od odgovornosti**:  
+Ovaj dokument je preveden pomoću AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za ključne informacije preporučuje se profesionalni prijevod od strane čovjeka. Ne preuzimamo odgovornost za bilo kakve nesporazume ili pogrešne interpretacije koje proizlaze iz korištenja ovog prijevoda.
\ No newline at end of file
diff --git a/translations/hr/7-bank-project/1-template-route/assignment.md b/translations/hr/7-bank-project/1-template-route/assignment.md
new file mode 100644
index 00000000..38d3644d
--- /dev/null
+++ b/translations/hr/7-bank-project/1-template-route/assignment.md
@@ -0,0 +1,28 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "8223e429218befa731dd5bfd22299520",
+  "translation_date": "2025-08-27T22:11:58+00:00",
+  "source_file": "7-bank-project/1-template-route/assignment.md",
+  "language_code": "hr"
+}
+-->
+# Poboljšajte usmjeravanje
+
+## Upute
+
+Deklaracija ruta trenutno sadrži samo ID predloška koji se koristi. No, kada se prikazuje nova stranica, ponekad je potrebno nešto više. Poboljšajmo našu implementaciju usmjeravanja s dvije dodatne značajke:
+
+- Dodajte naslove svakom predlošku i ažurirajte naslov prozora s novim naslovom kada se predložak promijeni.
+- Dodajte opciju za pokretanje koda nakon promjene predloška. Želimo ispisati `'Dashboard is shown'` u konzoli za razvojne programere svaki put kada se prikaže stranica nadzorne ploče.
+
+## Rubrika
+
+| Kriterij | Izvrsno                                                                                                                            | Zadovoljavajuće                                                                                                                                                                           | Potrebno poboljšanje                                   |
+| -------- | ---------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- |
+|          | Obje značajke su implementirane i rade. Dodavanje naslova i koda također funkcionira za novu rutu dodanu u deklaraciju `routes`.   | Obje značajke rade, ali ponašanje je hardkodirano i nije konfigurabilno putem deklaracije `routes`. Dodavanje treće rute s naslovom i dodavanjem koda ne radi ili djelomično radi.         | Jedna od značajki nedostaje ili ne radi ispravno.      |
+
+---
+
+**Odricanje od odgovornosti**:  
+Ovaj dokument je preveden pomoću AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za ključne informacije preporučuje se profesionalni prijevod od strane ljudskog prevoditelja. Ne preuzimamo odgovornost za bilo kakve nesporazume ili pogrešne interpretacije koje proizlaze iz korištenja ovog prijevoda.
\ No newline at end of file
diff --git a/translations/hr/7-bank-project/2-forms/README.md b/translations/hr/7-bank-project/2-forms/README.md
new file mode 100644
index 00000000..bac33621
--- /dev/null
+++ b/translations/hr/7-bank-project/2-forms/README.md
@@ -0,0 +1,313 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "b667b7d601e2ee19acb5aa9d102dc9f3",
+  "translation_date": "2025-08-27T22:05:13+00:00",
+  "source_file": "7-bank-project/2-forms/README.md",
+  "language_code": "hr"
+}
+-->
+# Izrada Bankovne Aplikacije, 2. dio: Izrada Obrasca za Prijavu i Registraciju
+
+## Pre-Lekcijski Kviz
+
+[Pre-lekcijski kviz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/43)
+
+### Uvod
+
+U gotovo svim modernim web aplikacijama možete kreirati račun kako biste imali svoj privatni prostor. Budući da više korisnika može istovremeno pristupiti web aplikaciji, potreban je mehanizam za odvojeno pohranjivanje osobnih podataka svakog korisnika i odabir informacija koje će se prikazati. Nećemo pokrivati kako [sigurno upravljati identitetom korisnika](https://en.wikipedia.org/wiki/Authentication) jer je to opsežna tema sama po sebi, ali osigurat ćemo da svaki korisnik može kreirati jedan (ili više) bankovnih računa u našoj aplikaciji.
+
+U ovom dijelu koristit ćemo HTML obrasce za dodavanje prijave i registracije u našu web aplikaciju. Vidjet ćemo kako programatski poslati podatke na API poslužitelja i na kraju kako definirati osnovna pravila za validaciju korisničkih unosa.
+
+### Preduvjeti
+
+Potrebno je da ste završili [HTML predloške i rutiranje](../1-template-route/README.md) web aplikacije za ovu lekciju. Također trebate instalirati [Node.js](https://nodejs.org) i [pokrenuti API poslužitelja](../api/README.md) lokalno kako biste mogli slati podatke za kreiranje računa.
+
+**Napomena**
+Imat ćete dva terminala pokrenuta istovremeno, kako je navedeno u nastavku:
+1. Za glavnu bankovnu aplikaciju koju smo izradili u lekciji [HTML predlošci i rutiranje](../1-template-route/README.md)
+2. Za [API poslužitelja bankovne aplikacije](../api/README.md) koji smo upravo postavili.
+
+Potrebno je da oba poslužitelja budu pokrenuta kako biste mogli pratiti ostatak lekcije. Oni slušaju na različitim portovima (port `3000` i port `5000`), tako da bi sve trebalo raditi bez problema.
+
+Možete testirati je li poslužitelj ispravno pokrenut izvršavanjem ove naredbe u terminalu:
+
+```sh
+curl http://localhost:5000/api
+# -> should return "Bank API v1.0.0" as a result
+```
+
+---
+
+## Obrazac i kontrole
+
+Element `<form>` obuhvaća dio HTML dokumenta gdje korisnik može unositi i slati podatke putem interaktivnih kontrola. Postoji mnogo različitih korisničkih sučelja (UI) kontrola koje se mogu koristiti unutar obrasca, a najčešće su `<input>` i `<button>` elementi.
+
+Postoji mnogo različitih [vrsta](https://developer.mozilla.org/docs/Web/HTML/Element/input) `<input>` elemenata. Na primjer, za kreiranje polja u koje korisnik može unijeti svoje korisničko ime možete koristiti:
+
+```html
+<input id="username" name="username" type="text">
+```
+
+Atribut `name` koristit će se kao naziv svojstva kada se podaci obrasca budu slali. Atribut `id` koristi se za povezivanje `<label>` elementa s kontrolom obrasca.
+
+> Pogledajte cijeli popis [`<input>` vrsta](https://developer.mozilla.org/docs/Web/HTML/Element/input) i [ostalih kontrola obrasca](https://developer.mozilla.org/docs/Learn/Forms/Other_form_controls) kako biste dobili ideju o svim nativnim UI elementima koje možete koristiti pri izradi sučelja.
+
+✅ Napomena da je `<input>` [prazan element](https://developer.mozilla.org/docs/Glossary/Empty_element) kojem ne biste trebali dodavati odgovarajuću zatvarajuću oznaku. Međutim, možete koristiti samostalnu `<input/>` notaciju, ali nije obavezno.
+
+Element `<button>` unutar obrasca je malo poseban. Ako ne odredite njegov atribut `type`, automatski će poslati podatke obrasca na poslužitelj kada se pritisne. Evo mogućih vrijednosti za `type`:
+
+- `submit`: Zadano ponašanje unutar `<form>` elementa, gumb pokreće akciju slanja obrasca.
+- `reset`: Gumb resetira sve kontrole obrasca na njihove početne vrijednosti.
+- `button`: Ne dodjeljuje zadano ponašanje kada se gumb pritisne. Možete mu dodijeliti prilagođene akcije pomoću JavaScripta.
+
+### Zadatak
+
+Započnimo dodavanjem obrasca u predložak `login`. Trebat ćemo polje za *korisničko ime* i gumb *Prijava*.
+
+```html
+<template id="login">
+  <h1>Bank App</h1>
+  <section>
+    <h2>Login</h2>
+    <form id="loginForm">
+      <label for="username">Username</label>
+      <input id="username" name="user" type="text">
+      <button>Login</button>
+    </form>
+  </section>
+</template>
+```
+
+Ako pažljivo pogledate, možete primijetiti da smo ovdje dodali i `<label>` element. `<label>` elementi koriste se za dodavanje naziva UI kontrolama, poput našeg polja za korisničko ime. Oznake su važne za čitljivost vaših obrazaca, ali također dolaze s dodatnim prednostima:
+
+- Povezivanjem oznake s kontrolom obrasca pomaže korisnicima koji koriste asistivne tehnologije (poput čitača ekrana) da razumiju koje podatke trebaju unijeti.
+- Klikom na oznaku možete izravno staviti fokus na povezani unos, što olakšava pristup na uređajima s dodirnim zaslonom.
+
+> [Pristupačnost](https://developer.mozilla.org/docs/Learn/Accessibility/What_is_accessibility) na webu vrlo je važna tema koja se često zanemaruje. Zahvaljujući [semantičkim HTML elementima](https://developer.mozilla.org/docs/Learn/Accessibility/HTML) nije teško kreirati pristupačan sadržaj ako ih pravilno koristite. Možete [pročitati više o pristupačnosti](https://developer.mozilla.org/docs/Web/Accessibility) kako biste izbjegli uobičajene pogreške i postali odgovoran programer.
+
+Sada ćemo dodati drugi obrazac za registraciju, odmah ispod prethodnog:
+
+```html
+<hr/>
+<h2>Register</h2>
+<form id="registerForm">
+  <label for="user">Username</label>
+  <input id="user" name="user" type="text">
+  <label for="currency">Currency</label>
+  <input id="currency" name="currency" type="text" value="$">
+  <label for="description">Description</label>
+  <input id="description" name="description" type="text">
+  <label for="balance">Current balance</label>
+  <input id="balance" name="balance" type="number" value="0">
+  <button>Register</button>
+</form>
+```
+
+Koristeći atribut `value` možemo definirati zadanu vrijednost za određeni unos.
+Primijetite također da unos za `balance` ima vrstu `number`. Izgleda li drugačije od ostalih unosa? Pokušajte interaktivno raditi s njim.
+
+✅ Možete li navigirati i interaktivno raditi s obrascima koristeći samo tipkovnicu? Kako biste to učinili?
+
+## Slanje podataka na poslužitelj
+
+Sada kada imamo funkcionalno korisničko sučelje, sljedeći korak je slanje podataka na naš poslužitelj. Napravimo brzi test koristeći naš trenutni kod: što se događa ako kliknete na gumb *Prijava* ili *Registracija*?
+
+Jeste li primijetili promjenu u URL sekciji vašeg preglednika?
+
+![Snimka zaslona promjene URL-a preglednika nakon klika na gumb Registracija](../../../../translated_images/click-register.e89a30bf0d4bc9ca867dc537c4cea679a7c26368bd790969082f524fed2355bc.hr.png)
+
+Zadana akcija za `<form>` je slanje obrasca na trenutni URL poslužitelja koristeći [GET metodu](https://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.3), dodajući podatke obrasca izravno u URL. Ova metoda ima nekoliko nedostataka:
+
+- Podaci koji se šalju vrlo su ograničeni veličinom (oko 2000 znakova)
+- Podaci su izravno vidljivi u URL-u (nije idealno za lozinke)
+- Ne radi s prijenosom datoteka
+
+Zato možete promijeniti metodu na [POST metodu](https://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.5) koja šalje podatke obrasca na poslužitelj u tijelu HTTP zahtjeva, bez prethodnih ograničenja.
+
+> Iako je POST najčešće korištena metoda za slanje podataka, [u nekim specifičnim scenarijima](https://www.w3.org/2001/tag/doc/whenToUseGet.html) preporučljivo je koristiti GET metodu, primjerice kod implementacije polja za pretraživanje.
+
+### Zadatak
+
+Dodajte `action` i `method` svojstva obrascu za registraciju:
+
+```html
+<form id="registerForm" action="//localhost:5000/api/accounts" method="POST">
+```
+
+Sada pokušajte registrirati novi račun sa svojim imenom. Nakon klika na gumb *Registracija* trebali biste vidjeti nešto poput ovoga:
+
+![Prozor preglednika na adresi localhost:5000/api/accounts, prikazuje JSON string s korisničkim podacima](../../../../translated_images/form-post.61de4ca1b964d91a9e338416e19f218504dd0af5f762fbebabfe7ae80edf885f.hr.png)
+
+Ako sve ide kako treba, poslužitelj bi trebao odgovoriti na vaš zahtjev s [JSON](https://www.json.org/json-en.html) odgovorom koji sadrži podatke o kreiranom računu.
+
+✅ Pokušajte se ponovno registrirati s istim imenom. Što se događa?
+
+## Slanje podataka bez osvježavanja stranice
+
+Kao što ste vjerojatno primijetili, postoji mali problem s pristupom koji smo upravo koristili: prilikom slanja obrasca izlazimo iz naše aplikacije i preglednik se preusmjerava na URL poslužitelja. Pokušavamo izbjeći sva osvježavanja stranica u našoj web aplikaciji jer izrađujemo [Jednostranu aplikaciju (SPA)](https://en.wikipedia.org/wiki/Single-page_application).
+
+Kako bismo poslali podatke obrasca na poslužitelj bez prisilnog osvježavanja stranice, moramo koristiti JavaScript kod. Umjesto da stavimo URL u svojstvo `action` elementa `<form>`, možete koristiti bilo koji JavaScript kod s prefiksom `javascript:` za izvođenje prilagođene akcije. Koristeći ovo također znači da ćete morati implementirati neke zadatke koji su se prethodno automatski obavljali od strane preglednika:
+
+- Dohvat podataka obrasca
+- Pretvorba i kodiranje podataka obrasca u odgovarajući format
+- Kreiranje HTTP zahtjeva i slanje na poslužitelj
+
+### Zadatak
+
+Zamijenite `action` obrasca za registraciju s:
+
+```html
+<form id="registerForm" action="javascript:register()">
+```
+
+Otvorite `app.js` i dodajte novu funkciju nazvanu `register`:
+
+```js
+function register() {
+  const registerForm = document.getElementById('registerForm');
+  const formData = new FormData(registerForm);
+  const data = Object.fromEntries(formData);
+  const jsonData = JSON.stringify(data);
+}
+```
+
+Ovdje dohvaćamo element obrasca koristeći `getElementById()` i koristimo pomoćnika [`FormData`](https://developer.mozilla.org/docs/Web/API/FormData) za izdvajanje vrijednosti iz kontrola obrasca kao skup ključ/vrijednost parova. Zatim podatke pretvaramo u običan objekt koristeći [`Object.fromEntries()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/fromEntries) i na kraju serijaliziramo podatke u [JSON](https://www.json.org/json-en.html), format koji se često koristi za razmjenu podataka na webu.
+
+Podaci su sada spremni za slanje na poslužitelj. Kreirajte novu funkciju nazvanu `createAccount`:
+
+```js
+async function createAccount(account) {
+  try {
+    const response = await fetch('//localhost:5000/api/accounts', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: account
+    });
+    return await response.json();
+  } catch (error) {
+    return { error: error.message || 'Unknown error' };
+  }
+}
+```
+
+Što ova funkcija radi? Prvo, primijetite ključnu riječ `async` ovdje. To znači da funkcija sadrži kod koji će se izvršavati [**asinkrono**](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/async_function). Kada se koristi zajedno s ključnom riječi `await`, omogućuje čekanje na izvršenje asinkronog koda - poput čekanja na odgovor poslužitelja ovdje - prije nastavka.
+
+Evo kratkog videa o korištenju `async/await`:
+
+[![Async i Await za upravljanje obećanjima](https://img.youtube.com/vi/YwmlRkrxvkk/0.jpg)](https://youtube.com/watch?v=YwmlRkrxvkk "Async i Await za upravljanje obećanjima")
+
+> 🎥 Kliknite na sliku iznad za video o async/await.
+
+Koristimo `fetch()` API za slanje JSON podataka na poslužitelj. Ova metoda uzima 2 parametra:
+
+- URL poslužitelja, pa ovdje vraćamo `//localhost:5000/api/accounts`.
+- Postavke zahtjeva. Tu postavljamo metodu na `POST` i pružamo `body` za zahtjev. Budući da šaljemo JSON podatke na poslužitelj, također moramo postaviti zaglavlje `Content-Type` na `application/json` kako bi poslužitelj znao kako interpretirati sadržaj.
+
+Budući da će poslužitelj odgovoriti na zahtjev s JSON-om, možemo koristiti `await response.json()` za parsiranje JSON sadržaja i vraćanje rezultirajućeg objekta. Napominjemo da je ova metoda asinkrona, pa ovdje koristimo ključnu riječ `await` prije vraćanja kako bismo osigurali da se eventualne pogreške tijekom parsiranja također uhvate.
+
+Sada dodajte malo koda u funkciju `register` kako biste pozvali `createAccount()`:
+
+```js
+const result = await createAccount(jsonData);
+```
+
+Budući da ovdje koristimo ključnu riječ `await`, moramo dodati ključnu riječ `async` prije funkcije register:
+
+```js
+async function register() {
+```
+
+Na kraju, dodajmo neke logove kako bismo provjerili rezultat. Konačna funkcija trebala bi izgledati ovako:
+
+```js
+async function register() {
+  const registerForm = document.getElementById('registerForm');
+  const formData = new FormData(registerForm);
+  const jsonData = JSON.stringify(Object.fromEntries(formData));
+  const result = await createAccount(jsonData);
+
+  if (result.error) {
+    return console.log('An error occurred:', result.error);
+  }
+
+  console.log('Account created!', result);
+}
+```
+
+To je bilo malo duže, ali stigli smo! Ako otvorite [alate za razvoj preglednika](https://developer.mozilla.org/docs/Learn/Common_questions/What_are_browser_developer_tools) i pokušate registrirati novi račun, ne biste trebali vidjeti nikakvu promjenu na web stranici, ali poruka će se pojaviti u konzoli potvrđujući da sve radi.
+
+![Snimka zaslona koja prikazuje poruku u konzoli preglednika](../../../../translated_images/browser-console.efaf0b51aaaf67782a29e1a0bb32cc063f189b18e894eb5926e02f1abe864ec2.hr.png)
+
+✅ Mislite li da se podaci šalju na poslužitelj sigurno? Što ako netko uspije presresti zahtjev? Možete pročitati o [HTTPS](https://en.wikipedia.org/wiki/HTTPS) kako biste saznali više o sigurnoj komunikaciji podataka.
+
+## Validacija podataka
+
+Ako pokušate registrirati novi račun bez postavljanja korisničkog imena, možete vidjeti da poslužitelj vraća pogrešku sa statusnim kodom [400 (Loš Zahtjev)](https://developer.mozilla.org/docs/Web/HTTP/Status/400#:~:text=The%20HyperText%20Transfer%20Protocol%20(HTTP,%2C%20or%20deceptive%20request%20routing).).
+
+Prije slanja podataka na poslužitelj dobra je praksa [validirati podatke obrasca](https://developer.mozilla.org/docs/Learn/Forms/Form_validation) unaprijed kad god je to moguće, kako biste osigurali da šaljete valjan zahtjev. HTML5 kontrole obrasca pružaju ugrađenu validaciju koristeći razne atribute:
+
+- `required`: polje mora biti popunjeno, inače se obrazac ne može poslati.
+- `minlength` i `maxlength`: definiraju minimalni i maksimalni broj znakova u tekstualnim poljima.
+- `min` i `max`: definiraju minimalnu i maksimalnu vrijednost numeričkog polja.
+- `type`: definira vrstu očekivanih podataka, poput `number`, `email`, `file` ili [ostalih ugrađenih vrsta](https://developer.mozilla.org/docs/Web/HTML/Element/input). Ovaj atribut također može promijeniti vizualni prikaz kontrole obrasca.
+- `pattern`: omogućuje definiranje [regularnog izraza](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Regular_Expressions) za testiranje je li uneseni podatak valjan ili ne.
+Savjet: možete prilagoditi izgled svojih kontrola obrasca ovisno o tome jesu li valjani ili ne koristeći CSS pseudo-klase `:valid` i `:invalid`.
+### Zadatak
+
+Postoje 2 obavezna polja za kreiranje valjanog novog računa: korisničko ime i valuta, dok su ostala polja opcionalna. Ažurirajte HTML forme koristeći atribut `required` i tekst u oznaci polja kako biste to postigli:
+
+```html
+<label for="user">Username (required)</label>
+<input id="user" name="user" type="text" required>
+...
+<label for="currency">Currency (required)</label>
+<input id="currency" name="currency" type="text" value="$" required>
+```
+
+Iako ova konkretna implementacija servera ne nameće specifična ograničenja na maksimalnu duljinu polja, uvijek je dobra praksa definirati razumna ograničenja za unos teksta od strane korisnika.
+
+Dodajte atribut `maxlength` u tekstualna polja:
+
+```html
+<input id="user" name="user" type="text" maxlength="20" required>
+...
+<input id="currency" name="currency" type="text" value="$" maxlength="5" required>
+...
+<input id="description" name="description" type="text" maxlength="100">
+```
+
+Sada, ako pritisnete gumb *Registriraj se* i neko polje ne poštuje pravilo validacije koje smo definirali, trebali biste vidjeti nešto poput ovoga:
+
+![Snimka zaslona koja prikazuje grešku validacije prilikom pokušaja slanja forme](../../../../translated_images/validation-error.8bd23e98d416c22f80076d04829a4bb718e0e550fd622862ef59008ccf0d5dce.hr.png)
+
+Validacija poput ove, koja se obavlja *prije* slanja podataka na server, naziva se **validacija na strani klijenta**. No, imajte na umu da nije uvijek moguće obaviti sve provjere bez slanja podataka. Na primjer, ovdje ne možemo provjeriti postoji li već račun s istim korisničkim imenom bez slanja zahtjeva serveru. Dodatna validacija koja se obavlja na serveru naziva se **validacija na strani servera**.
+
+Obično je potrebno implementirati obje vrste validacije, a dok validacija na strani klijenta poboljšava korisničko iskustvo pružanjem trenutne povratne informacije korisniku, validacija na strani servera ključna je za osiguranje da su podaci korisnika koje obrađujete ispravni i sigurni.
+
+---
+
+## 🚀 Izazov
+
+Prikazati poruku o grešci u HTML-u ako korisnik već postoji.
+
+Evo primjera kako konačna stranica za prijavu može izgledati nakon malo stiliziranja:
+
+![Snimka zaslona stranice za prijavu nakon dodavanja CSS stilova](../../../../translated_images/result.96ef01f607bf856aa9789078633e94a4f7664d912f235efce2657299becca483.hr.png)
+
+## Kviz nakon predavanja
+
+[Kviz nakon predavanja](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/44)
+
+## Pregled i samostalno učenje
+
+Razvijatelji su postali vrlo kreativni u svojim naporima za izradu formi, posebno u vezi strategija validacije. Saznajte više o različitim tokovima formi pregledavajući [CodePen](https://codepen.com); možete li pronaći neke zanimljive i inspirativne forme?
+
+## Zadatak
+
+[Stilizirajte svoju bankovnu aplikaciju](assignment.md)
+
+---
+
+**Odricanje od odgovornosti**:  
+Ovaj dokument je preveden pomoću AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za ključne informacije preporučuje se profesionalni prijevod od strane čovjeka. Ne preuzimamo odgovornost za nesporazume ili pogrešna tumačenja koja mogu proizaći iz korištenja ovog prijevoda.
\ No newline at end of file
diff --git a/translations/hr/7-bank-project/2-forms/assignment.md b/translations/hr/7-bank-project/2-forms/assignment.md
new file mode 100644
index 00000000..ccaafa4d
--- /dev/null
+++ b/translations/hr/7-bank-project/2-forms/assignment.md
@@ -0,0 +1,27 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "474f3ab1ee755ca980fc9104a0316e17",
+  "translation_date": "2025-08-27T22:06:55+00:00",
+  "source_file": "7-bank-project/2-forms/assignment.md",
+  "language_code": "hr"
+}
+-->
+# Stilizirajte svoju bankovnu aplikaciju
+
+## Upute
+
+Kreirajte novu datoteku `styles.css` i dodajte poveznicu na nju u vašoj trenutnoj datoteci `index.html`. U CSS datoteci koju ste upravo kreirali dodajte stilizaciju kako bi stranice *Prijava* i *Nadzorna ploča* izgledale uredno i privlačno. Pokušajte osmisliti tematsku paletu boja kako biste aplikaciji dali vlastiti identitet.
+
+> Savjet: možete izmijeniti HTML i dodati nove elemente i klase ako je potrebno.
+
+## Rubrika
+
+| Kriterij | Izvrsno                                                                                                                | Zadovoljavajuće                                                                | Potrebno poboljšanje                                                                          |
+| -------- | ---------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------- |
+|          | Sve stranice izgledaju čisto i čitljivo, s dosljednom tematskom paletom boja i jasno istaknutim različitim sekcijama.  | Stranice su stilizirane, ali bez teme ili s nejasno razgraničenim sekcijama.   | Stranice nemaju stilizaciju, sekcije izgledaju neorganizirano, a informacije su teško čitljive. |
+
+---
+
+**Odricanje od odgovornosti**:  
+Ovaj dokument je preveden pomoću AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za ključne informacije preporučuje se profesionalni prijevod od strane ljudskog prevoditelja. Ne preuzimamo odgovornost za bilo kakve nesporazume ili pogrešne interpretacije koje proizlaze iz korištenja ovog prijevoda.
\ No newline at end of file
diff --git a/translations/hr/7-bank-project/3-data/README.md b/translations/hr/7-bank-project/3-data/README.md
new file mode 100644
index 00000000..3f804023
--- /dev/null
+++ b/translations/hr/7-bank-project/3-data/README.md
@@ -0,0 +1,347 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "f587e913e3f7c0b1c549a05dd74ee8e5",
+  "translation_date": "2025-08-27T22:01:26+00:00",
+  "source_file": "7-bank-project/3-data/README.md",
+  "language_code": "hr"
+}
+-->
+# Izgradnja bankovne aplikacije, dio 3: Metode dohvaćanja i korištenja podataka
+
+## Kviz prije predavanja
+
+[Kviz prije predavanja](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/45)
+
+### Uvod
+
+U središtu svake web aplikacije nalaze se *podaci*. Podaci mogu imati različite oblike, ali njihova glavna svrha uvijek je prikazivanje informacija korisniku. Kako web aplikacije postaju sve interaktivnije i složenije, način na koji korisnik pristupa i komunicira s informacijama postaje ključni dio razvoja weba.
+
+U ovoj lekciji vidjet ćemo kako asinkrono dohvatiti podatke sa servera i koristiti te podatke za prikaz informacija na web stranici bez ponovnog učitavanja HTML-a.
+
+### Preduvjeti
+
+Potrebno je da ste izradili [Formu za prijavu i registraciju](../2-forms/README.md) kao dio web aplikacije za ovu lekciju. Također trebate instalirati [Node.js](https://nodejs.org) i [pokrenuti API server](../api/README.md) lokalno kako biste dobili podatke o korisničkim računima.
+
+Možete testirati radi li server ispravno izvršavanjem ove naredbe u terminalu:
+
+```sh
+curl http://localhost:5000/api
+# -> should return "Bank API v1.0.0" as a result
+```
+
+---
+
+## AJAX i dohvaćanje podataka
+
+Tradicionalne web stranice ažuriraju prikazani sadržaj kada korisnik odabere poveznicu ili pošalje podatke putem forme, ponovno učitavajući cijelu HTML stranicu. Svaki put kada je potrebno učitati nove podatke, web server vraća potpuno novu HTML stranicu koju preglednik mora obraditi, prekidajući trenutnu korisničku akciju i ograničavajući interakcije tijekom učitavanja. Ovaj način rada naziva se *Višestranična aplikacija* ili *MPA*.
+
+![Radni tijek ažuriranja u višestraničnoj aplikaciji](../../../../translated_images/mpa.7f7375a1a2d4aa779d3f928a2aaaf9ad76bcdeb05cfce2dc27ab126024050f51.hr.png)
+
+Kako su web aplikacije postajale složenije i interaktivnije, pojavila se nova tehnika nazvana [AJAX (Asynchronous JavaScript and XML)](https://en.wikipedia.org/wiki/Ajax_(programming)). Ova tehnika omogućuje web aplikacijama slanje i dohvaćanje podataka sa servera asinkrono pomoću JavaScripta, bez potrebe za ponovnim učitavanjem HTML stranice, što rezultira bržim ažuriranjima i glatkijim korisničkim interakcijama. Kada se novi podaci dobiju sa servera, trenutna HTML stranica može se ažurirati pomoću JavaScripta koristeći [DOM](https://developer.mozilla.org/docs/Web/API/Document_Object_Model) API. S vremenom se ovaj pristup razvio u ono što se danas naziva [*Jednostranična aplikacija* ili *SPA*](https://en.wikipedia.org/wiki/Single-page_application).
+
+![Radni tijek ažuriranja u jednostraničnoj aplikaciji](../../../../translated_images/spa.268ec73b41f992c2a21ef9294235c6ae597b3c37e2c03f0494c2d8857325cc57.hr.png)
+
+Kada je AJAX prvi put uveden, jedini dostupni API za asinkrono dohvaćanje podataka bio je [`XMLHttpRequest`](https://developer.mozilla.org/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest). No, moderni preglednici sada implementiraju praktičniji i moćniji [`Fetch` API](https://developer.mozilla.org/docs/Web/API/Fetch_API), koji koristi obećanja (promises) i bolje je prilagođen za manipulaciju JSON podacima.
+
+> Iako svi moderni preglednici podržavaju `Fetch API`, ako želite da vaša web aplikacija radi na starijim preglednicima, uvijek je dobra ideja provjeriti [tablicu kompatibilnosti na caniuse.com](https://caniuse.com/fetch).
+
+### Zadatak
+
+U [prethodnoj lekciji](../2-forms/README.md) implementirali smo formu za registraciju kako bismo kreirali korisnički račun. Sada ćemo dodati kod za prijavu koristeći postojeći račun i dohvat njegovih podataka. Otvorite datoteku `app.js` i dodajte novu funkciju `login`:
+
+```js
+async function login() {
+  const loginForm = document.getElementById('loginForm')
+  const user = loginForm.user.value;
+}
+```
+
+Ovdje započinjemo dohvaćanjem elementa forme pomoću `getElementById()`, a zatim dobivamo korisničko ime iz unosa pomoću `loginForm.user.value`. Svaki kontrolni element forme može se pristupiti putem njegovog imena (postavljenog u HTML-u pomoću atributa `name`) kao svojstva forme.
+
+Na sličan način kao što smo učinili za registraciju, kreirat ćemo drugu funkciju za izvršavanje zahtjeva prema serveru, ali ovaj put za dohvaćanje podataka o računu:
+
+```js
+async function getAccount(user) {
+  try {
+    const response = await fetch('//localhost:5000/api/accounts/' + encodeURIComponent(user));
+    return await response.json();
+  } catch (error) {
+    return { error: error.message || 'Unknown error' };
+  }
+}
+```
+
+Koristimo `fetch` API za asinkrono dohvaćanje podataka sa servera, ali ovaj put ne trebamo dodatne parametre osim URL-a koji pozivamo, jer samo tražimo podatke. Po defaultu, `fetch` kreira [`GET`](https://developer.mozilla.org/docs/Web/HTTP/Methods/GET) HTTP zahtjev, što je upravo ono što nam treba.
+
+✅ `encodeURIComponent()` je funkcija koja kodira posebne znakove za URL. Koje probleme bismo mogli imati ako ne pozovemo ovu funkciju i direktno koristimo vrijednost `user` u URL-u?
+
+Sada ćemo ažurirati našu funkciju `login` kako bismo koristili `getAccount`:
+
+```js
+async function login() {
+  const loginForm = document.getElementById('loginForm')
+  const user = loginForm.user.value;
+  const data = await getAccount(user);
+
+  if (data.error) {
+    return console.log('loginError', data.error);
+  }
+
+  account = data;
+  navigate('/dashboard');
+}
+```
+
+Prvo, budući da je `getAccount` asinkrona funkcija, moramo je uskladiti s ključnom riječi `await` kako bismo pričekali rezultat servera. Kao i kod svakog zahtjeva prema serveru, također moramo obraditi slučajeve pogreške. Za sada ćemo samo dodati poruku u log za prikaz pogreške i vratiti se na to kasnije.
+
+Zatim moramo pohraniti podatke negdje kako bismo ih kasnije mogli koristiti za prikaz informacija na nadzornoj ploči. Budući da varijabla `account` još ne postoji, kreirat ćemo globalnu varijablu na vrhu naše datoteke:
+
+```js
+let account = null;
+```
+
+Nakon što su korisnički podaci spremljeni u varijablu, možemo se prebaciti s *login* stranice na *dashboard* koristeći funkciju `navigate()` koju već imamo.
+
+Na kraju, trebamo pozvati našu funkciju `login` kada se forma za prijavu pošalje, modificirajući HTML:
+
+```html
+<form id="loginForm" action="javascript:login()">
+```
+
+Testirajte radi li sve ispravno registracijom novog računa i pokušajem prijave koristeći isti račun.
+
+Prije nego što prijeđemo na sljedeći dio, možemo dovršiti funkciju `register` dodavanjem ovoga na kraj funkcije:
+
+```js
+account = result;
+navigate('/dashboard');
+```
+
+✅ Jeste li znali da po defaultu možete pozivati server API-je samo s *iste domene i porta* kao web stranica koju pregledavate? Ovo je sigurnosni mehanizam koji provode preglednici. No, naša web aplikacija radi na `localhost:3000`, dok API server radi na `localhost:5000`. Zašto to funkcionira? Koristeći tehniku nazvanu [Cross-Origin Resource Sharing (CORS)](https://developer.mozilla.org/docs/Web/HTTP/CORS), moguće je izvršavati HTTP zahtjeve između različitih domena ako server dodaje posebne zaglavlja odgovoru, dopuštajući iznimke za određene domene.
+
+> Saznajte više o API-jima kroz ovu [lekciju](https://docs.microsoft.com/learn/modules/use-apis-discover-museum-art/?WT.mc_id=academic-77807-sagibbon).
+
+## Ažuriranje HTML-a za prikaz podataka
+
+Sada kada imamo korisničke podatke, moramo ažurirati postojeći HTML kako bismo ih prikazali. Već znamo kako dohvatiti element iz DOM-a koristeći, na primjer, `document.getElementById()`. Nakon što imate osnovni element, evo nekih API-ja koje možete koristiti za njegovo modificiranje ili dodavanje podređenih elemenata:
+
+- Koristeći svojstvo [`textContent`](https://developer.mozilla.org/docs/Web/API/Node/textContent) možete promijeniti tekst elementa. Imajte na umu da promjena ove vrijednosti uklanja sve podređene elemente (ako ih ima) i zamjenjuje ih pruženim tekstom. Kao takvo, ovo je također učinkovit način za uklanjanje svih podređenih elemenata određenog elementa dodjeljivanjem praznog niza `''`.
+
+- Koristeći [`document.createElement()`](https://developer.mozilla.org/docs/Web/API/Document/createElement) zajedno s metodom [`append()`](https://developer.mozilla.org/docs/Web/API/ParentNode/append) možete kreirati i dodati jedan ili više novih podređenih elemenata.
+
+✅ Koristeći svojstvo [`innerHTML`](https://developer.mozilla.org/docs/Web/API/Element/innerHTML) elementa također je moguće promijeniti njegov HTML sadržaj, ali ovo bi trebalo izbjegavati jer je ranjivo na [cross-site scripting (XSS)](https://developer.mozilla.org/docs/Glossary/Cross-site_scripting) napade.
+
+### Zadatak
+
+Prije nego što prijeđemo na ekran nadzorne ploče, postoji još jedna stvar koju bismo trebali učiniti na *login* stranici. Trenutno, ako pokušate prijaviti se s korisničkim imenom koje ne postoji, poruka se prikazuje u konzoli, ali za običnog korisnika ništa se ne mijenja i ne zna što se događa.
+
+Dodajmo element rezerviranog mjesta u formu za prijavu gdje možemo prikazati poruku o pogrešci ako je potrebno. Dobro mjesto bilo bi neposredno prije gumba za prijavu `<button>`:
+
+```html
+...
+<div id="loginError"></div>
+<button>Login</button>
+...
+```
+
+Ovaj `<div>` element je prazan, što znači da se ništa neće prikazati na ekranu dok mu ne dodamo neki sadržaj. Također mu dodajemo `id` kako bismo ga lako dohvatili pomoću JavaScripta.
+
+Vratite se u datoteku `app.js` i kreirajte novu pomoćnu funkciju `updateElement`:
+
+```js
+function updateElement(id, text) {
+  const element = document.getElementById(id);
+  element.textContent = text;
+}
+```
+
+Ova funkcija je prilično jednostavna: s obzirom na *id* elementa i *tekst*, ažurirat će tekstualni sadržaj DOM elementa s odgovarajućim `id`. Koristimo ovu metodu umjesto prethodne poruke o pogrešci u funkciji `login`:
+
+```js
+if (data.error) {
+  return updateElement('loginError', data.error);
+}
+```
+
+Sada, ako pokušate prijaviti se s nevažećim računom, trebali biste vidjeti nešto poput ovoga:
+
+![Snimka zaslona koja prikazuje poruku o pogrešci tijekom prijave](../../../../translated_images/login-error.416fe019b36a63276764c2349df5d99e04ebda54fefe60c715ee87a28d5d4ad0.hr.png)
+
+Sada imamo tekst pogreške koji se vizualno prikazuje, ali ako ga pokušate koristiti s čitačem ekrana, primijetit ćete da ništa nije najavljeno. Kako bi tekst koji se dinamički dodaje stranici bio najavljen čitačima ekrana, potrebno je koristiti nešto što se zove [Live Region](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/ARIA_Live_Regions). Ovdje ćemo koristiti specifičnu vrstu live regije nazvanu alert:
+
+```html
+<div id="loginError" role="alert"></div>
+```
+
+Implementirajte isto ponašanje za pogreške funkcije `register` (ne zaboravite ažurirati HTML).
+
+## Prikaz informacija na nadzornoj ploči
+
+Koristeći iste tehnike koje smo upravo vidjeli, također ćemo se pobrinuti za prikaz informacija o računu na stranici nadzorne ploče.
+
+Ovako izgleda objekt računa dobiven sa servera:
+
+```json
+{
+  "user": "test",
+  "currency": "$",
+  "description": "Test account",
+  "balance": 75,
+  "transactions": [
+    { "id": "1", "date": "2020-10-01", "object": "Pocket money", "amount": 50 },
+    { "id": "2", "date": "2020-10-03", "object": "Book", "amount": -10 },
+    { "id": "3", "date": "2020-10-04", "object": "Sandwich", "amount": -5 }
+  ],
+}
+```
+
+> Napomena: kako biste si olakšali posao, možete koristiti unaprijed postojeći `test` račun koji je već popunjen podacima.
+
+### Zadatak
+
+Započnimo zamjenom sekcije "Balance" u HTML-u kako bismo dodali elemente rezerviranog mjesta:
+
+```html
+<section>
+  Balance: <span id="balance"></span><span id="currency"></span>
+</section>
+```
+
+Također ćemo dodati novu sekciju odmah ispod za prikaz opisa računa:
+
+```html
+<h2 id="description"></h2>
+```
+
+✅ Budući da opis računa funkcionira kao naslov za sadržaj ispod njega, označen je semantički kao naslov. Saznajte više o tome kako [struktura naslova](https://www.nomensa.com/blog/2017/how-structure-headings-web-accessibility) doprinosi pristupačnosti i kritički pogledajte stranicu kako biste utvrdili što još može biti naslov.
+
+Zatim ćemo kreirati novu funkciju u `app.js` za popunjavanje rezerviranih mjesta:
+
+```js
+function updateDashboard() {
+  if (!account) {
+    return navigate('/login');
+  }
+
+  updateElement('description', account.description);
+  updateElement('balance', account.balance.toFixed(2));
+  updateElement('currency', account.currency);
+}
+```
+
+Prvo provjeravamo imamo li potrebne podatke o računu prije nego što nastavimo dalje. Zatim koristimo funkciju `updateElement()` koju smo ranije kreirali za ažuriranje HTML-a.
+
+> Kako bismo prikaz stanja računa učinili ljepšim, koristimo metodu [`toFixed(2)`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed) kako bismo prisilili prikaz vrijednosti s 2 decimale.
+
+Sada trebamo pozvati našu funkciju `updateDashboard()` svaki put kada se učita stranica nadzorne ploče. Ako ste već završili [zadatak iz lekcije 1](../1-template-route/assignment.md), ovo bi trebalo biti jednostavno, inače možete koristiti sljedeću implementaciju.
+
+Dodajte ovaj kod na kraj funkcije `updateRoute()`:
+
+```js
+if (typeof route.init === 'function') {
+  route.init();
+}
+```
+
+I ažurirajte definiciju ruta s:
+
+```js
+const routes = {
+  '/login': { templateId: 'login' },
+  '/dashboard': { templateId: 'dashboard', init: updateDashboard }
+};
+```
+
+Ovom promjenom, svaki put kada se prikaže stranica nadzorne ploče, poziva se funkcija `updateDashboard()`. Nakon prijave, trebali biste moći vidjeti stanje računa, valutu i opis.
+
+## Dinamičko kreiranje redaka tablice pomoću HTML predložaka
+
+U [prvoj lekciji](../1-template-route/README.md) koristili smo HTML predloške zajedno s metodom [`appendChild()`](https://developer.mozilla.org/docs/Web/API/Node/appendChild) za implementaciju navigacije u našoj aplikaciji. Predlošci također mogu biti manji i koristiti se za dinamičko popunjavanje ponavljajućih dijelova stranice.
+
+Koristit ćemo sličan pristup za prikaz popisa transakcija u HTML tablici.
+
+### Zadatak
+
+Dodajte novi predložak u HTML `<body>`:
+
+```html
+<template id="transaction">
+  <tr>
+    <td></td>
+    <td></td>
+    <td></td>
+  </tr>
+</template>
+```
+
+Ovaj predložak predstavlja jedan redak tablice, s 3 stupca koje želimo popuniti: *datum*, *objekt* i *iznos* transakcije.
+
+Zatim dodajte ovo svojstvo `id` elementu `<tbody>` tablice unutar predloška nadzorne ploče kako biste ga lakše pronašli pomoću JavaScripta:
+
+```html
+<tbody id="transactions"></tbody>
+```
+
+Naš HTML je spreman, sada prelazimo na JavaScript kod i kreiramo novu funkciju `createTransactionRow`:
+
+```js
+function createTransactionRow(transaction) {
+  const template = document.getElementById('transaction');
+  const transactionRow = template.content.cloneNode(true);
+  const tr = transactionRow.querySelector('tr');
+  tr.children[0].textContent = transaction.date;
+  tr.children[1].textContent = transaction.object;
+  tr.children[2].textContent = transaction.amount.toFixed(2);
+  return transactionRow;
+}
+```
+
+Ova funkcija radi upravo ono što joj ime sugerira: koristeći predložak koji smo ranije kreirali, kreira novi redak tablice i popunjava njegov sadržaj koristeći podatke o transakciji. Koristit ćemo ovo u našoj funkciji `updateDashboard()` za popunjavanje tablice:
+
+```js
+const transactionsRows = document.createDocumentFragment();
+for (const transaction of account.transactions) {
+  const transactionRow = createTransactionRow(transaction);
+  transactionsRows.appendChild(transactionRow);
+}
+updateElement('transactions', transactionsRows);
+```
+
+Ovdje koristimo metodu [`document.createDocumentFragment()`](https://developer.mozilla.org/docs/Web/API/Document/createDocumentFragment) koja kreira novi DOM fragment na kojem možemo raditi prije nego što ga konačno dodamo u našu HTML tablicu.
+
+Još uvijek postoji jedna stvar koju moramo učiniti prije nego što ovaj kod može raditi, budući da naša funkcija `updateElement()` trenutno podržava samo tekstualni sadržaj. Promijenimo njezin kod malo:
+
+```js
+function updateElement(id, textOrNode) {
+  const element = document.getElementById(id);
+  element.textContent = ''; // Removes all children
+  element.append(textOrNode);
+}
+```
+
+Koristimo metodu [`append()`](https://developer.mozilla.org/docs/Web/API/ParentNode/append) jer omogućuje dodavanje teksta ili [DOM čvorova](https://developer.mozilla.org/docs/Web/API/Node) roditeljskom elementu, što je savršeno za sve naše slučajeve.
+Ako pokušate koristiti račun `test` za prijavu, sada biste trebali vidjeti popis transakcija na nadzornoj ploči 🎉.
+
+---
+
+## 🚀 Izazov
+
+Suradnjom učinite da stranica nadzorne ploče izgleda kao prava aplikacija za bankarstvo. Ako ste već stilizirali svoju aplikaciju, pokušajte koristiti [media queries](https://developer.mozilla.org/docs/Web/CSS/Media_Queries) kako biste stvorili [responzivni dizajn](https://developer.mozilla.org/docs/Web/Progressive_web_apps/Responsive/responsive_design_building_blocks) koji dobro funkcionira na stolnim računalima i mobilnim uređajima.
+
+Evo primjera stilizirane stranice nadzorne ploče:
+
+![Snimka zaslona primjera rezultata nadzorne ploče nakon stiliziranja](../../../../translated_images/screen2.123c82a831a1d14ab2061994be2fa5de9cec1ce651047217d326d4773a6348e4.hr.png)
+
+## Kviz nakon predavanja
+
+[Kviz nakon predavanja](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/46)
+
+## Zadatak
+
+[Refaktorirajte i komentirajte svoj kod](assignment.md)
+
+---
+
+**Odricanje od odgovornosti**:  
+Ovaj dokument je preveden pomoću AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za kritične informacije preporučuje se profesionalni prijevod od strane čovjeka. Ne preuzimamo odgovornost za nesporazume ili pogrešna tumačenja koja mogu proizaći iz korištenja ovog prijevoda.
\ No newline at end of file
diff --git a/translations/hr/7-bank-project/3-data/assignment.md b/translations/hr/7-bank-project/3-data/assignment.md
new file mode 100644
index 00000000..134593e8
--- /dev/null
+++ b/translations/hr/7-bank-project/3-data/assignment.md
@@ -0,0 +1,29 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "a4abf305ede1cfaadd56a8fab4b4c288",
+  "translation_date": "2025-08-27T22:03:19+00:00",
+  "source_file": "7-bank-project/3-data/assignment.md",
+  "language_code": "hr"
+}
+-->
+# Refaktorirajte i komentirajte svoj kod
+
+## Upute
+
+Kako vaša baza koda raste, važno je često refaktorirati kod kako bi ostao čitljiv i održiv tijekom vremena. Dodajte komentare i refaktorirajte svoj `app.js` kako biste poboljšali kvalitetu koda:
+
+- Izvucite konstante, poput osnovnog URL-a API-ja servera
+- Faktorirajte sličan kod: na primjer, možete kreirati funkciju `sendRequest()` kako biste grupirali kod koji se koristi u funkcijama `createAccount()` i `getAccount()`
+- Preuredite kod kako bi bio lakši za čitanje i dodajte komentare
+
+## Rubrika
+
+| Kriterij | Izvrsno                                                                                                                                                       | Zadovoljavajuće                                                                                  | Potrebno poboljšanje                                                                  |
+| -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- |
+|          | Kod je komentiran, dobro organiziran u različite sekcije i lako čitljiv. Konstante su izdvojene, a faktorirana funkcija `sendRequest()` je kreirana.          | Kod je čist, ali se još uvijek može poboljšati dodavanjem više komentara, izdvajanja konstanti ili faktoriranja. | Kod je neuredan, nije komentiran, konstante nisu izdvojene, a kod nije faktoriran.    |
+
+---
+
+**Odricanje od odgovornosti**:  
+Ovaj dokument je preveden pomoću AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za ključne informacije preporučuje se profesionalni prijevod od strane ljudskog prevoditelja. Ne preuzimamo odgovornost za bilo kakve nesporazume ili pogrešne interpretacije koje proizlaze iz korištenja ovog prijevoda.
\ No newline at end of file
diff --git a/translations/hr/7-bank-project/4-state-management/README.md b/translations/hr/7-bank-project/4-state-management/README.md
new file mode 100644
index 00000000..8537f18b
--- /dev/null
+++ b/translations/hr/7-bank-project/4-state-management/README.md
@@ -0,0 +1,294 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "4fa20c513e367e9cdd401bf49ae16e33",
+  "translation_date": "2025-08-27T22:07:56+00:00",
+  "source_file": "7-bank-project/4-state-management/README.md",
+  "language_code": "hr"
+}
+-->
+# Izgradnja aplikacije za bankarstvo, dio 4: Koncepti upravljanja stanjem
+
+## Kviz prije predavanja
+
+[Kviz prije predavanja](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/47)
+
+### Uvod
+
+Kako web aplikacija raste, postaje izazov pratiti sve tokove podataka. Koji kod dobiva podatke, koja stranica ih koristi, gdje i kada ih treba ažurirati... lako je završiti s neurednim kodom koji je teško održavati. Ovo je posebno istinito kada trebate dijeliti podatke između različitih stranica aplikacije, primjerice korisničke podatke. Koncept *upravljanja stanjem* oduvijek je postojao u svim vrstama programa, ali kako web aplikacije postaju sve složenije, sada je ključno razmišljati o tome tijekom razvoja.
+
+U ovom završnom dijelu, pregledat ćemo aplikaciju koju smo izgradili kako bismo ponovno razmotrili način upravljanja stanjem, omogućujući podršku za osvježavanje preglednika u bilo kojem trenutku i trajno čuvanje podataka tijekom korisničkih sesija.
+
+### Preduvjeti
+
+Potrebno je da ste završili dio aplikacije za web [dohvaćanje podataka](../3-data/README.md) za ovu lekciju. Također trebate instalirati [Node.js](https://nodejs.org) i [pokrenuti API poslužitelja](../api/README.md) lokalno kako biste mogli upravljati podacima o računima.
+
+Možete testirati radi li poslužitelj ispravno izvršavanjem ove naredbe u terminalu:
+
+```sh
+curl http://localhost:5000/api
+# -> should return "Bank API v1.0.0" as a result
+```
+
+---
+
+## Ponovno razmotrite upravljanje stanjem
+
+U [prethodnoj lekciji](../3-data/README.md), predstavili smo osnovni koncept stanja u našoj aplikaciji s globalnom varijablom `account` koja sadrži bankovne podatke za trenutno prijavljenog korisnika. Međutim, naša trenutna implementacija ima neke nedostatke. Pokušajte osvježiti stranicu dok ste na nadzornoj ploči. Što se događa?
+
+Postoje tri problema s trenutnim kodom:
+
+- Stanje nije trajno, jer osvježavanje preglednika vraća vas na stranicu za prijavu.
+- Postoji više funkcija koje mijenjaju stanje. Kako aplikacija raste, to može otežati praćenje promjena i lako je zaboraviti ažurirati jednu.
+- Stanje se ne čisti, pa kada kliknete na *Odjava*, podaci o računu i dalje ostaju, iako ste na stranici za prijavu.
+
+Mogli bismo ažurirati naš kod kako bismo riješili ove probleme jedan po jedan, ali to bi stvorilo više dupliciranja koda i učinilo aplikaciju složenijom i težom za održavanje. Ili bismo mogli zastati na nekoliko minuta i ponovno razmisliti o našoj strategiji.
+
+> Koje probleme zapravo pokušavamo riješiti?
+
+[Upravljanje stanjem](https://en.wikipedia.org/wiki/State_management) odnosi se na pronalaženje dobrog pristupa za rješavanje ova dva specifična problema:
+
+- Kako učiniti tokove podataka u aplikaciji razumljivima?
+- Kako osigurati da su podaci o stanju uvijek sinkronizirani s korisničkim sučeljem (i obrnuto)?
+
+Kada se pobrinete za ovo, svi drugi problemi koje biste mogli imati možda su već riješeni ili su postali lakši za rješavanje. Postoji mnogo mogućih pristupa za rješavanje ovih problema, ali mi ćemo se odlučiti za uobičajeno rješenje koje se sastoji od **centralizacije podataka i načina njihove promjene**. Tokovi podataka izgledali bi ovako:
+
+![Shema koja prikazuje tokove podataka između HTML-a, korisničkih akcija i stanja](../../../../translated_images/data-flow.fa2354e0908fecc89b488010dedf4871418a992edffa17e73441d257add18da4.hr.png)
+
+> Ovdje nećemo pokriti dio gdje podaci automatski pokreću ažuriranje prikaza, jer je to povezano s naprednijim konceptima [reaktivnog programiranja](https://en.wikipedia.org/wiki/Reactive_programming). To je dobra tema za daljnje istraživanje ako ste spremni za dubinsko proučavanje.
+
+✅ Postoji mnogo biblioteka s različitim pristupima upravljanju stanjem, [Redux](https://redux.js.org) je popularna opcija. Pogledajte koncepte i obrasce koji se koriste jer je to često dobar način za učenje o potencijalnim problemima s kojima se možete suočiti u velikim web aplikacijama i kako ih možete riješiti.
+
+### Zadatak
+
+Započet ćemo s malo refaktoriranja. Zamijenite deklaraciju `account`:
+
+```js
+let account = null;
+```
+
+S:
+
+```js
+let state = {
+  account: null
+};
+```
+
+Ideja je *centralizirati* sve podatke naše aplikacije u jednom objektu stanja. Trenutno imamo samo `account` u stanju, pa se puno toga ne mijenja, ali to stvara put za buduće promjene.
+
+Također moramo ažurirati funkcije koje ga koriste. U funkcijama `register()` i `login()` zamijenite `account = ...` s `state.account = ...`;
+
+Na vrhu funkcije `updateDashboard()` dodajte ovaj redak:
+
+```js
+const account = state.account;
+```
+
+Ovo refaktoriranje samo po sebi nije donijelo mnogo poboljšanja, ali ideja je bila postaviti temelje za sljedeće promjene.
+
+## Praćenje promjena podataka
+
+Sada kada smo postavili objekt `state` za pohranu naših podataka, sljedeći korak je centralizacija ažuriranja. Cilj je olakšati praćenje svih promjena i kada se one događaju.
+
+Kako bismo izbjegli promjene na objektu `state`, također je dobra praksa smatrati ga [*nepromjenjivim*](https://en.wikipedia.org/wiki/Immutable_object), što znači da ga uopće nije moguće mijenjati. To također znači da morate stvoriti novi objekt stanja ako želite nešto promijeniti u njemu. Na taj način gradite zaštitu od potencijalno neželjenih [nuspojava](https://en.wikipedia.org/wiki/Side_effect_(computer_science)) i otvarate mogućnosti za nove značajke u svojoj aplikaciji, poput implementacije poništavanja/ponovnog izvršavanja, dok također olakšavate otklanjanje pogrešaka. Na primjer, mogli biste zabilježiti svaku promjenu napravljenu na stanju i zadržati povijest promjena kako biste razumjeli izvor greške.
+
+U JavaScriptu možete koristiti [`Object.freeze()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze) za stvaranje nepromjenjive verzije objekta. Ako pokušate napraviti promjene na nepromjenjivom objektu, bit će podignuta iznimka.
+
+✅ Znate li razliku između *plitkog* i *dubokog* nepromjenjivog objekta? Možete pročitati o tome [ovdje](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze#What_is_shallow_freeze).
+
+### Zadatak
+
+Kreirajmo novu funkciju `updateState()`:
+
+```js
+function updateState(property, newData) {
+  state = Object.freeze({
+    ...state,
+    [property]: newData
+  });
+}
+```
+
+U ovoj funkciji stvaramo novi objekt stanja i kopiramo podatke iz prethodnog stanja koristeći [*operator širenja (`...`)*](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/Spread_syntax#Spread_in_object_literals). Zatim nadjačavamo određeno svojstvo objekta stanja novim podacima koristeći [notaciju zagrada](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Working_with_Objects#Objects_and_properties) `[property]` za dodjelu. Na kraju, zaključavamo objekt kako bismo spriječili izmjene koristeći `Object.freeze()`. Trenutno imamo samo svojstvo `account` pohranjeno u stanju, ali s ovim pristupom možete dodati koliko god svojstava trebate u stanje.
+
+Također ćemo ažurirati inicijalizaciju `state` kako bismo osigurali da je početno stanje također zaključano:
+
+```js
+let state = Object.freeze({
+  account: null
+});
+```
+
+Nakon toga, ažurirajte funkciju `register` zamjenom dodjele `state.account = result;` s:
+
+```js
+updateState('account', result);
+```
+
+Učinite isto s funkcijom `login`, zamjenom `state.account = data;` s:
+
+```js
+updateState('account', data);
+```
+
+Sada ćemo iskoristiti priliku da riješimo problem s podacima o računu koji se ne brišu kada korisnik klikne na *Odjava*.
+
+Kreirajte novu funkciju `logout()`:
+
+```js
+function logout() {
+  updateState('account', null);
+  navigate('/login');
+}
+```
+
+U `updateDashboard()` zamijenite preusmjeravanje `return navigate('/login');` s `return logout()`;
+
+Pokušajte registrirati novi račun, odjaviti se i ponovno prijaviti kako biste provjerili radi li sve ispravno.
+
+> Savjet: možete pogledati sve promjene stanja dodavanjem `console.log(state)` na dno `updateState()` i otvaranjem konzole u alatima za razvoj preglednika.
+
+## Trajno stanje
+
+Većina web aplikacija treba trajno pohranjivati podatke kako bi ispravno funkcionirala. Svi ključni podaci obično se pohranjuju u bazu podataka i pristupaju putem API-ja poslužitelja, poput podataka o korisničkom računu u našem slučaju. No, ponekad je također zanimljivo trajno pohraniti neke podatke na klijentskoj aplikaciji koja se izvodi u vašem pregledniku, za bolje korisničko iskustvo ili za poboljšanje performansi učitavanja.
+
+Kada želite trajno pohraniti podatke u pregledniku, postoji nekoliko važnih pitanja koja biste trebali postaviti:
+
+- *Jesu li podaci osjetljivi?* Trebali biste izbjegavati pohranjivanje bilo kakvih osjetljivih podataka na klijentu, poput korisničkih lozinki.
+- *Koliko dugo trebate zadržati ove podatke?* Planirate li pristupiti ovim podacima samo za trenutnu sesiju ili želite da budu pohranjeni zauvijek?
+
+Postoji više načina za pohranu informacija unutar web aplikacije, ovisno o tome što želite postići. Na primjer, možete koristiti URL-ove za pohranu upita za pretraživanje i učiniti ih dijeljivima između korisnika. Također možete koristiti [HTTP kolačiće](https://developer.mozilla.org/docs/Web/HTTP/Cookies) ako podaci trebaju biti dijeljeni s poslužiteljem, poput informacija o [autentifikaciji](https://en.wikipedia.org/wiki/Authentication).
+
+Druga opcija je korištenje jedne od mnogih API-ja preglednika za pohranu podataka. Dva su posebno zanimljiva:
+
+- [`localStorage`](https://developer.mozilla.org/docs/Web/API/Window/localStorage): [Key/Value store](https://en.wikipedia.org/wiki/Key%E2%80%93value_database) koji omogućuje trajno pohranjivanje podataka specifičnih za trenutnu web stranicu tijekom različitih sesija. Podaci pohranjeni u njemu nikada ne istječu.
+- [`sessionStorage`](https://developer.mozilla.org/docs/Web/API/Window/sessionStorage): radi isto kao `localStorage`, osim što se podaci pohranjeni u njemu brišu kada sesija završi (kada se preglednik zatvori).
+
+Napomena da oba ova API-ja omogućuju pohranu samo [nizova](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String). Ako želite pohraniti složene objekte, morat ćete ih serijalizirati u [JSON](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON) format koristeći [`JSON.stringify()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify).
+
+✅ Ako želite stvoriti web aplikaciju koja ne radi s poslužiteljem, također je moguće stvoriti bazu podataka na klijentu koristeći [`IndexedDB` API](https://developer.mozilla.org/docs/Web/API/IndexedDB_API). Ovo je rezervirano za napredne slučajeve upotrebe ili ako trebate pohraniti značajnu količinu podataka, jer je složenije za korištenje.
+
+### Zadatak
+
+Želimo da naši korisnici ostanu prijavljeni dok eksplicitno ne kliknu na gumb *Odjava*, pa ćemo koristiti `localStorage` za pohranu podataka o računu. Prvo, definirajmo ključ koji ćemo koristiti za pohranu naših podataka.
+
+```js
+const storageKey = 'savedAccount';
+```
+
+Zatim dodajte ovaj redak na kraj funkcije `updateState()`:
+
+```js
+localStorage.setItem(storageKey, JSON.stringify(state.account));
+```
+
+S ovim, podaci o korisničkom računu bit će trajno pohranjeni i uvijek ažurirani jer smo prethodno centralizirali sva ažuriranja stanja. Ovo je trenutak kada počinjemo uživati u svim našim prethodnim refaktoriranjima 🙂.
+
+Kako su podaci pohranjeni, također moramo voditi računa o njihovom vraćanju kada se aplikacija učita. Budući da ćemo početi imati više inicijalizacijskog koda, možda bi bilo dobro stvoriti novu funkciju `init`, koja također uključuje naš prethodni kod na dnu `app.js`:
+
+```js
+function init() {
+  const savedAccount = localStorage.getItem(storageKey);
+  if (savedAccount) {
+    updateState('account', JSON.parse(savedAccount));
+  }
+
+  // Our previous initialization code
+  window.onpopstate = () => updateRoute();
+  updateRoute();
+}
+
+init();
+```
+
+Ovdje dohvaćamo spremljene podatke, i ako ih ima, ažuriramo stanje u skladu s tim. Važno je to učiniti *prije* ažuriranja rute, jer može postojati kod koji se oslanja na stanje tijekom ažuriranja stranice.
+
+Također možemo učiniti stranicu *Nadzorna ploča* zadanom stranicom naše aplikacije, jer sada trajno pohranjujemo podatke o računu. Ako se ne pronađu podaci, nadzorna ploča ionako preusmjerava na stranicu *Prijava*. U `updateRoute()` zamijenite rezervni `return navigate('/login');` s `return navigate('/dashboard');`.
+
+Sada se prijavite u aplikaciju i pokušajte osvježiti stranicu. Trebali biste ostati na nadzornoj ploči. S tim ažuriranjem riješili smo sve naše početne probleme...
+
+## Ažuriranje podataka
+
+...Ali možda smo također stvorili novi problem. Ups!
+
+Idite na nadzornu ploču koristeći račun `test`, zatim pokrenite ovu naredbu u terminalu kako biste stvorili novu transakciju:
+
+```sh
+curl --request POST \
+     --header "Content-Type: application/json" \
+     --data "{ \"date\": \"2020-07-24\", \"object\": \"Bought book\", \"amount\": -20 }" \
+     http://localhost:5000/api/accounts/test/transactions
+```
+
+Pokušajte osvježiti stranicu nadzorne ploče u pregledniku sada. Što se događa? Vidite li novu transakciju?
+
+Stanje je trajno pohranjeno zahvaljujući `localStorage`, ali to također znači da se nikada ne ažurira dok se ne odjavite iz aplikacije i ponovno prijavite!
+
+Jedna moguća strategija za rješavanje ovog problema je ponovno učitavanje podataka o računu svaki put kada se učita nadzorna ploča, kako bi se izbjegli zastarjeli podaci.
+
+### Zadatak
+
+Kreirajte novu funkciju `updateAccountData`:
+
+```js
+async function updateAccountData() {
+  const account = state.account;
+  if (!account) {
+    return logout();
+  }
+
+  const data = await getAccount(account.user);
+  if (data.error) {
+    return logout();
+  }
+
+  updateState('account', data);
+}
+```
+
+Ova metoda provjerava jesmo li trenutno prijavljeni, a zatim ponovno učitava podatke o računu s poslužitelja.
+
+Kreirajte drugu funkciju nazvanu `refresh`:
+
+```js
+async function refresh() {
+  await updateAccountData();
+  updateDashboard();
+}
+```
+
+Ova funkcija ažurira podatke o računu, a zatim se brine o ažuriranju HTML-a stranice nadzorne ploče. To je ono što trebamo pozvati kada se učita ruta nadzorne ploče. Ažurirajte definiciju rute s:
+
+```js
+const routes = {
+  '/login': { templateId: 'login' },
+  '/dashboard': { templateId: 'dashboard', init: refresh }
+};
+```
+
+Pokušajte ponovno učitati nadzornu ploču sada, trebala bi prikazati ažurirane podatke o računu.
+
+---
+
+## 🚀 Izazov
+
+Sada kada ponovno učitavamo podatke o računu svaki put kada se učita nadzorna ploča, mislite li da još uvijek trebamo trajno pohranjivati *sve podatke o računu*?
+
+Pokušajte zajedno raditi na promjeni onoga što se sprema i učitava iz `localStorage` kako biste uključili samo ono što je apsolutno potrebno za rad aplikacije.
+
+## Kviz nakon predavanja
+[Post-predavanje kviz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/48)
+
+## Zadatak
+
+[Implementirajte dijalog "Dodaj transakciju"](assignment.md)
+
+Evo primjera rezultata nakon dovršetka zadatka:
+
+![Snimka zaslona koja prikazuje primjer dijaloga "Dodaj transakciju"](../../../../translated_images/dialog.93bba104afeb79f12f65ebf8f521c5d64e179c40b791c49c242cf15f7e7fab15.hr.png)
+
+---
+
+**Odricanje od odgovornosti**:  
+Ovaj dokument je preveden pomoću AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za ključne informacije preporučuje se profesionalni prijevod od strane ljudskog prevoditelja. Ne preuzimamo odgovornost za bilo kakve nesporazume ili pogrešne interpretacije koje proizlaze iz korištenja ovog prijevoda.
\ No newline at end of file
diff --git a/translations/hr/7-bank-project/4-state-management/assignment.md b/translations/hr/7-bank-project/4-state-management/assignment.md
new file mode 100644
index 00000000..9d3bd3a7
--- /dev/null
+++ b/translations/hr/7-bank-project/4-state-management/assignment.md
@@ -0,0 +1,38 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "f23a868536c07da991b1d4e773161e25",
+  "translation_date": "2025-08-27T22:09:36+00:00",
+  "source_file": "7-bank-project/4-state-management/assignment.md",
+  "language_code": "hr"
+}
+-->
+# Implementirajte dijalog "Dodaj transakciju"
+
+## Upute
+
+Našoj aplikaciji za bankarstvo još uvijek nedostaje jedna važna funkcionalnost: mogućnost unosa novih transakcija. Koristeći sve što ste naučili u prethodna četiri lekcije, implementirajte dijalog "Dodaj transakciju":
+
+- Dodajte gumb "Dodaj transakciju" na stranici nadzorne ploče
+- Ili kreirajte novu stranicu s HTML predloškom, ili koristite JavaScript za prikaz/sakrivanje HTML dijaloga bez napuštanja stranice nadzorne ploče (možete koristiti svojstvo [`hidden`](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/hidden) za to, ili CSS klase)
+- Osigurajte da dijalog podržava [pristupačnost za tipkovnicu i čitače ekrana](https://developer.paciellogroup.com/blog/2018/06/the-current-state-of-modal-dialog-accessibility/)
+- Implementirajte HTML obrazac za unos podataka
+- Kreirajte JSON podatke iz unesenih podataka u obrascu i pošaljite ih na API
+- Ažurirajte stranicu nadzorne ploče s novim podacima
+
+Pogledajte [specifikacije API-ja poslužitelja](../api/README.md) kako biste vidjeli koji API trebate pozvati i koji je očekivani JSON format.
+
+Evo primjera rezultata nakon dovršetka zadatka:
+
+![Snimka zaslona koja prikazuje primjer dijaloga "Dodaj transakciju"](../../../../translated_images/dialog.93bba104afeb79f12f65ebf8f521c5d64e179c40b791c49c242cf15f7e7fab15.hr.png)
+
+## Rubrika
+
+| Kriterij | Primjeran                                                                                         | Dovoljan                                                                                                                | Potrebno poboljšanje                         |
+| -------- | ------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------- | --------------------------------------------|
+|          | Dodavanje transakcije je u potpunosti implementirano slijedeći sve najbolje prakse iz lekcija.    | Dodavanje transakcije je implementirano, ali ne slijedi najbolje prakse iz lekcija ili djelomično funkcionira.          | Dodavanje transakcije uopće ne funkcionira. |
+
+---
+
+**Odricanje od odgovornosti**:  
+Ovaj dokument je preveden pomoću AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za ključne informacije preporučuje se profesionalni prijevod od strane čovjeka. Ne preuzimamo odgovornost za bilo kakva nesporazuma ili pogrešna tumačenja koja proizlaze iz korištenja ovog prijevoda.
\ No newline at end of file
diff --git a/translations/hr/7-bank-project/README.md b/translations/hr/7-bank-project/README.md
new file mode 100644
index 00000000..35c47485
--- /dev/null
+++ b/translations/hr/7-bank-project/README.md
@@ -0,0 +1,35 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "830359535306594b448db6575ce5cdee",
+  "translation_date": "2025-08-27T22:00:16+00:00",
+  "source_file": "7-bank-project/README.md",
+  "language_code": "hr"
+}
+-->
+# :dollar: Izgradite Banku
+
+U ovom projektu naučit ćete kako izgraditi fiktivnu banku. Ove lekcije uključuju upute o tome kako postaviti web aplikaciju i definirati rute, izraditi forme, upravljati stanjem i dohvatiti podatke s API-ja od kojeg možete preuzeti podatke banke.
+
+| ![Screen1](../../../translated_images/screen1.baccbba0f1f93364672eb250d2fbd21574bb1caf79a2155022dc098a741cbdfe.hr.png) | ![Screen2](../../../translated_images/screen2.123c82a831a1d14ab2061994be2fa5de9cec1ce651047217d326d4773a6348e4.hr.png) |
+|--------------------------------|--------------------------------|
+
+## Lekcije
+
+1. [HTML predlošci i rute u web aplikaciji](1-template-route/README.md)
+2. [Izradite formu za prijavu i registraciju](2-forms/README.md)
+3. [Metode dohvaćanja i korištenja podataka](3-data/README.md)
+4. [Koncepti upravljanja stanjem](4-state-management/README.md)
+
+### Zasluge
+
+Ove lekcije napisane su s :hearts: od strane [Yohan Lasorsa](https://twitter.com/sinedied).
+
+Ako vas zanima kako izraditi [server API](/7-bank-project/api/README.md) korišten u ovim lekcijama, možete pratiti [ovu seriju videa](https://aka.ms/NodeBeginner) (posebno videozapise od 17. do 21.).
+
+Također možete pogledati [ovaj interaktivni Learn tutorial](https://aka.ms/learn/express-api).
+
+---
+
+**Odricanje od odgovornosti**:  
+Ovaj dokument je preveden pomoću AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za ključne informacije preporučuje se profesionalni prijevod od strane čovjeka. Ne preuzimamo odgovornost za bilo kakva nesporazuma ili pogrešna tumačenja koja proizlaze iz korištenja ovog prijevoda.
\ No newline at end of file
diff --git a/translations/hr/7-bank-project/api/README.md b/translations/hr/7-bank-project/api/README.md
new file mode 100644
index 00000000..8e656f32
--- /dev/null
+++ b/translations/hr/7-bank-project/api/README.md
@@ -0,0 +1,48 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "9884f8c8a61cf56214450f8b16a094ce",
+  "translation_date": "2025-08-27T22:03:45+00:00",
+  "source_file": "7-bank-project/api/README.md",
+  "language_code": "hr"
+}
+-->
+# Bank API
+
+> Bank API izgrađen pomoću [Node.js](https://nodejs.org) + [Express](https://expressjs.com/).
+
+API je već izgrađen i nije dio ovog zadatka.
+
+Međutim, ako želite naučiti kako izgraditi API poput ovog, možete pratiti ovu seriju videa: https://aka.ms/NodeBeginner (videi od 17 do 21 pokrivaju upravo ovaj API).
+
+Također možete pogledati ovaj interaktivni vodič: https://aka.ms/learn/express-api
+
+## Pokretanje servera
+
+Provjerite imate li instaliran [Node.js](https://nodejs.org).
+
+1. Git klonirajte ovaj repozitorij [The Web-Dev-For-Beginners](https://github.com/microsoft/Web-Dev-For-Beginners).
+2. Otvorite terminal i navigirajte u mapu `Web-Dev-For-Beginners/7-bank-project/api`.
+3. Pokrenite `npm install` i pričekajte da se paketi instaliraju (može potrajati ovisno o kvaliteti vaše internetske veze).
+4. Kada instalacija završi, pokrenite `npm start` i spremni ste.
+
+Server bi trebao početi slušati na portu `5000`.
+*Ovaj server će raditi zajedno s glavnim serverom aplikacije za banku (sluša na portu `3000`), nemojte ga zatvarati.*
+
+> Napomena: svi unosi se pohranjuju u memoriji i nisu trajno spremljeni, tako da se svi podaci gube kada se server zaustavi.
+
+## Detalji API-ja
+
+Ruta                                         | Opis
+---------------------------------------------|------------------------------------
+GET    /api/                                 | Dohvati informacije o serveru
+POST   /api/accounts/                        | Kreiraj račun, npr.: `{ user: 'Yohan', description: 'Moj budžet', currency: 'EUR', balance: 100 }`
+GET    /api/accounts/:user                   | Dohvati sve podatke za određeni račun
+DELETE /api/accounts/:user                   | Ukloni određeni račun
+POST   /api/accounts/:user/transactions      | Dodaj transakciju, npr.: `{ date: '2020-07-23T18:25:43.511Z', object: 'Kupio knjigu', amount: -20 }`
+DELETE  /api/accounts/:user/transactions/:id | Ukloni određenu transakciju
+
+---
+
+**Odricanje od odgovornosti**:  
+Ovaj dokument je preveden pomoću AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za ključne informacije preporučuje se profesionalni prijevod od strane čovjeka. Ne preuzimamo odgovornost za bilo kakva nesporazuma ili pogrešna tumačenja koja proizlaze iz korištenja ovog prijevoda.
\ No newline at end of file
diff --git a/translations/hr/7-bank-project/solution/README.md b/translations/hr/7-bank-project/solution/README.md
new file mode 100644
index 00000000..ed9ed71b
--- /dev/null
+++ b/translations/hr/7-bank-project/solution/README.md
@@ -0,0 +1,27 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "461aa4fc74c6b1789c3a13b5d82c0cd9",
+  "translation_date": "2025-08-27T22:04:09+00:00",
+  "source_file": "7-bank-project/solution/README.md",
+  "language_code": "hr"
+}
+-->
+# Bankovna aplikacija
+
+> Primjer rješenja za projekt bankovne aplikacije, izrađen s osnovnim HTML5, CSS-om i JavaScriptom (bez korištenja frameworka ili biblioteka).
+
+## Pokretanje aplikacije
+
+Prvo se uvjerite da je [API poslužitelj](../api/README.md) pokrenut.
+
+Bilo koji web poslužitelj može se koristiti za pokretanje aplikacije, ali budući da biste ionako trebali imati instaliran [Node.js](https://nodejs.org) za pokretanje API-ja, možete:
+
+1. Klonirati ovaj repozitorij pomoću Gita.
+2. Otvoriti terminal, navigirati do ovog direktorija, a zatim pokrenuti `npx lite-server .`. Ovo će pokrenuti razvojni web poslužitelj na portu `3000`.
+3. Otvoriti `http://localhost:3000` u pregledniku kako biste pokrenuli aplikaciju.
+
+---
+
+**Odricanje od odgovornosti**:  
+Ovaj dokument je preveden pomoću AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za ključne informacije preporučuje se profesionalni prijevod od strane ljudskog prevoditelja. Ne preuzimamo odgovornost za bilo kakve nesporazume ili pogrešne interpretacije koje proizlaze iz korištenja ovog prijevoda.
\ No newline at end of file
diff --git a/translations/hr/8-code-editor/1-using-a-code-editor/README.md b/translations/hr/8-code-editor/1-using-a-code-editor/README.md
new file mode 100644
index 00000000..bc740580
--- /dev/null
+++ b/translations/hr/8-code-editor/1-using-a-code-editor/README.md
@@ -0,0 +1,158 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "7aa6e4f270d38d9cb17f2b5bd86b863d",
+  "translation_date": "2025-08-27T22:52:50+00:00",
+  "source_file": "8-code-editor/1-using-a-code-editor/README.md",
+  "language_code": "hr"
+}
+-->
+# Korištenje uređivača koda
+
+Ova lekcija pokriva osnove korištenja [VSCode.dev](https://vscode.dev), web-baziranog uređivača koda, kako biste mogli mijenjati svoj kod i doprinositi projektu bez instaliranja bilo čega na svoje računalo.
+
+## Ciljevi učenja
+
+U ovoj lekciji naučit ćete kako:
+
+- Koristiti uređivač koda u projektu
+- Pratiti promjene pomoću verzioniranja
+- Prilagoditi uređivač za razvoj
+
+### Preduvjeti
+
+Prije nego što započnete, trebate kreirati račun na [GitHub](https://github.com). Posjetite [GitHub](https://github.com/) i kreirajte račun ako ga već nemate.
+
+### Uvod
+
+Uređivač koda je ključni alat za pisanje programa i suradnju na postojećim projektima. Kada razumijete osnove uređivača i kako koristiti njegove značajke, moći ćete ih primijeniti pri pisanju koda.
+
+## Početak rada s VSCode.dev
+
+[VSCode.dev](https://vscode.dev) je uređivač koda na webu. Ne trebate instalirati ništa da biste ga koristili, baš kao da otvarate bilo koju drugu web stranicu. Za početak, otvorite sljedeći link: [https://vscode.dev](https://vscode.dev). Ako niste prijavljeni na [GitHub](https://github.com/), slijedite upute za prijavu ili kreiranje novog računa, a zatim se prijavite.
+
+Kada se učita, trebao bi izgledati slično ovoj slici:
+
+![Default VSCode.dev](../../../../translated_images/default-vscode-dev.5d06881d65c1b3234ce50cd9ed3b0028e6031ad5f5b441bcbed96bfa6311f6d0.hr.png)
+
+Postoje tri glavna dijela, počevši od krajnje lijeve strane prema desno:
+
+1. _Aktivna traka_ koja uključuje neke ikone, poput povećala 🔎, zupčanika ⚙️ i nekoliko drugih.
+2. Proširena aktivna traka koja prema zadanim postavkama prikazuje _Explorer_, nazvana _bočna traka_.
+3. I na kraju, područje koda na desnoj strani.
+
+Kliknite na svaku od ikona kako biste prikazali različite izbornike. Kada završite, kliknite na _Explorer_ kako biste se vratili na početnu točku.
+
+Kada počnete stvarati kod ili mijenjati postojeći kod, to će se događati u najvećem području na desnoj strani. Ovo područje koristit ćete i za pregled postojećeg koda, što ćete učiniti sljedeće.
+
+## Otvaranje GitHub repozitorija
+
+Prvo što trebate učiniti je otvoriti GitHub repozitorij. Postoji više načina za otvaranje repozitorija. U ovom dijelu vidjet ćete dva različita načina kako možete otvoriti repozitorij i započeti rad na promjenama.
+
+### 1. Korištenjem uređivača
+
+Koristite sam uređivač za otvaranje udaljenog repozitorija. Ako odete na [VSCode.dev](https://vscode.dev), vidjet ćete gumb _"Open Remote Repository"_:
+
+![Open remote repository](../../../../translated_images/open-remote-repository.bd9c2598b8949e7fc283cdfc8f4050c6205a7c7c6d3f78c4b135115d037d6fa2.hr.png)
+
+Također možete koristiti paletu naredbi. Paleta naredbi je okvir za unos u koji možete upisati bilo koju riječ koja je dio naredbe ili radnje kako biste pronašli odgovarajuću naredbu za izvršenje. Koristite izbornik u gornjem lijevom kutu, zatim odaberite _View_, a potom _Command Palette_, ili koristite sljedeću tipkovničku prečicu: Ctrl-Shift-P (na MacOS-u bi to bilo Command-Shift-P).
+
+![Palette Menu](../../../../translated_images/palette-menu.4946174e07f426226afcdad707d19b8d5150e41591c751c45b5dee213affef91.hr.png)
+
+Kada se izbornik otvori, upišite _open remote repository_, a zatim odaberite prvu opciju. Pojavit će se više repozitorija u kojima sudjelujete ili koje ste nedavno otvorili. Također možete koristiti puni GitHub URL za odabir jednog. Koristite sljedeći URL i zalijepite ga u okvir:
+
+```
+https://github.com/microsoft/Web-Dev-For-Beginners
+```
+
+✅ Ako je uspješno, vidjet ćete sve datoteke za ovaj repozitorij učitane u uređivaču teksta.
+
+### 2. Korištenjem URL-a
+
+Možete koristiti i URL izravno za učitavanje repozitorija. Na primjer, puni URL za trenutni repozitorij je [https://github.com/microsoft/Web-Dev-For-Beginners](https://github.com/microsoft/Web-Dev-For-Beginners), ali možete zamijeniti GitHub domenu s `VSCode.dev/github` i učitati repozitorij izravno. Rezultirajući URL bio bi [https://vscode.dev/github/microsoft/Web-Dev-For-Beginners](https://vscode.dev/github/microsoft/Web-Dev-For-Beginners).
+
+## Uređivanje datoteka
+
+Nakon što ste otvorili repozitorij u pregledniku/vscode.dev, sljedeći korak je napraviti ažuriranja ili promjene u projektu.
+
+### 1. Kreiranje nove datoteke
+
+Možete kreirati datoteku unutar postojećeg foldera ili je kreirati u glavnom direktoriju/folderu. Za kreiranje nove datoteke, otvorite lokaciju/direktorij u koji želite spremiti datoteku, odaberite ikonu _'New file ...'_ na aktivnoj traci _(lijevo)_, dodijelite joj ime i pritisnite enter.
+
+![Create a new file](../../../../translated_images/create-new-file.2814e609c2af9aeb6c6fd53156c503ac91c3d538f9cac63073b2dd4a7631f183.hr.png)
+
+### 2. Uređivanje i spremanje datoteke u repozitorij
+
+Korištenje vscode.dev je korisno kad želite brzo ažurirati svoj projekt bez potrebe za lokalnim učitavanjem softvera.  
+Za ažuriranje koda, kliknite na ikonu 'Explorer', također smještenu na aktivnoj traci, kako biste pregledali datoteke i foldere u repozitoriju.  
+Odaberite datoteku kako biste je otvorili u području koda, napravite promjene i spremite.
+
+![Edit a file](../../../../translated_images/edit-a-file.52c0ee665ef19f08119d62d63f395dfefddc0a4deb9268d73bfe791f52c5807a.hr.png)
+
+Kada završite s ažuriranjem projekta, odaberite ikonu _`source control`_ koja sadrži sve nove promjene koje ste napravili u repozitoriju.
+
+Za pregled promjena koje ste napravili u projektu, odaberite datoteku(e) u folderu `Changes` na proširenoj aktivnoj traci. Ovo će otvoriti 'Working Tree' kako biste vizualno vidjeli promjene koje ste napravili u datoteci. Crvena boja označava uklanjanje iz projekta, dok zelena označava dodavanje.
+
+![View changes](../../../../translated_images/working-tree.c58eec08e6335c79cc708c0c220c0b7fea61514bd3c7fb7471905a864aceac7c.hr.png)
+
+Ako ste zadovoljni promjenama koje ste napravili, zadržite pokazivač na folderu `Changes` i kliknite gumb `+` kako biste pripremili promjene za predaju. Priprema znači da ste spremni predati promjene na GitHub.
+
+Ako, međutim, niste zadovoljni nekim promjenama i želite ih odbaciti, zadržite pokazivač na folderu `Changes` i odaberite ikonu `undo`.
+
+Zatim upišite `commit message` _(Opis promjene koju ste napravili u projektu)_, kliknite ikonu `check` kako biste predali i poslali svoje promjene.
+
+Kada završite s radom na projektu, odaberite ikonu `hamburger menu` u gornjem lijevom kutu kako biste se vratili na repozitorij na github.com.
+
+![Stage & commit changes](../../../../8-code-editor/images/edit-vscode.dev.gif)
+
+## Korištenje ekstenzija
+
+Instaliranje ekstenzija na VSCode omogućuje dodavanje novih značajki i prilagodbu opcija za razvojno okruženje u uređivaču kako biste poboljšali tijek rada. Ove ekstenzije također pomažu dodati podršku za više programskih jezika i često su generičke ili specifične za određeni jezik.
+
+Za pregled popisa svih dostupnih ekstenzija, kliknite na ikonu _`Extensions`_ na aktivnoj traci i počnite upisivati ime ekstenzije u tekstualno polje označeno _'Search Extensions in Marketplace'_.  
+Vidjet ćete popis ekstenzija, od kojih svaka sadrži **ime ekstenzije, ime izdavača, kratki opis, broj preuzimanja** i **ocjenu zvjezdicama**.
+
+![Extension details](../../../../translated_images/extension-details.9f8f1fd4e9eb2de5069ae413119eb8ee43172776383ebe2f7cf640e11df2e106.hr.png)
+
+Također možete pregledati sve prethodno instalirane ekstenzije proširivanjem foldera _`Installed`_, popularne ekstenzije koje koriste većina developera u folderu _`Popular`_ i preporučene ekstenzije za vas, bilo od korisnika u istom radnom prostoru ili na temelju vaših nedavno otvorenih datoteka, u folderu _`Recommended`_.
+
+![View extensions](../../../../translated_images/extensions.eca0e0c7f59a10b5c88be7fe24b3e32cca6b6058b35a49026c3a9d80b1813b7c.hr.png)
+
+### 1. Instaliranje ekstenzija
+
+Za instaliranje ekstenzije, upišite ime ekstenzije u polje za pretraživanje i kliknite na nju kako biste vidjeli dodatne informacije o ekstenziji u području koda kada se pojavi na proširenoj aktivnoj traci.
+
+Možete kliknuti _plavi gumb za instalaciju_ na proširenoj aktivnoj traci za instalaciju ili koristiti gumb za instalaciju koji se pojavljuje u području koda kada odaberete ekstenziju za učitavanje dodatnih informacija.
+
+![Install extensions](../../../../8-code-editor/images/install-extension.gif)
+
+### 2. Prilagodba ekstenzija
+
+Nakon instaliranja ekstenzije, možda ćete trebati prilagoditi njezino ponašanje i prilagoditi je prema svojim preferencijama. Za to, odaberite ikonu Extensions, a ovaj put vaša ekstenzija će se pojaviti u folderu _Installed_, kliknite na _**ikonu zupčanika**_ i navigirajte do _Extensions Setting_.
+
+![Modify extension settings](../../../../translated_images/extension-settings.21c752ae4f4cdb78a867f140ccd0680e04619d0c44bb4afb26373e54b829d934.hr.png)
+
+### 3. Upravljanje ekstenzijama
+
+Nakon instaliranja i korištenja ekstenzije, vscode.dev nudi opcije za upravljanje ekstenzijom prema različitim potrebama. Na primjer, možete odabrati:
+
+- **Onemogućiti:** _(Privremeno onemogućite ekstenziju kada vam više nije potrebna, ali je ne želite potpuno deinstalirati)_
+
+    Odaberite instaliranu ekstenziju na proširenoj aktivnoj traci > kliknite ikonu zupčanika > odaberite 'Disable' ili 'Disable (Workspace)' **ILI** otvorite ekstenziju u području koda i kliknite plavi gumb Disable.
+
+- **Deinstalirati:** Odaberite instaliranu ekstenziju na proširenoj aktivnoj traci > kliknite ikonu zupčanika > odaberite 'Uninstall' **ILI** otvorite ekstenziju u području koda i kliknite plavi gumb Uninstall.
+
+---
+
+## Zadatak
+
+[Izradite web stranicu životopisa koristeći vscode.dev](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/8-code-editor/1-using-a-code-editor/assignment.md)
+
+## Pregled i samostalno učenje
+
+Pročitajte više o [VSCode.dev](https://code.visualstudio.com/docs/editor/vscode-web?WT.mc_id=academic-0000-alfredodeza) i nekim njegovim drugim značajkama.
+
+---
+
+**Odricanje od odgovornosti**:  
+Ovaj dokument je preveden pomoću AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za ključne informacije preporučuje se profesionalni prijevod od strane ljudskog prevoditelja. Ne preuzimamo odgovornost za bilo kakve nesporazume ili pogrešne interpretacije koje proizlaze iz korištenja ovog prijevoda.
\ No newline at end of file
diff --git a/translations/hr/8-code-editor/1-using-a-code-editor/assignment.md b/translations/hr/8-code-editor/1-using-a-code-editor/assignment.md
new file mode 100644
index 00000000..0dcced92
--- /dev/null
+++ b/translations/hr/8-code-editor/1-using-a-code-editor/assignment.md
@@ -0,0 +1,247 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "2fcb983b8dbadadb1bc2e97f8c12dac5",
+  "translation_date": "2025-08-27T22:54:21+00:00",
+  "source_file": "8-code-editor/1-using-a-code-editor/assignment.md",
+  "language_code": "hr"
+}
+-->
+# Kreirajte web-stranicu za životopis koristeći vscode.dev
+
+_Kako bi bilo cool da vas regruter zatraži vaš životopis, a vi mu pošaljete URL?_ 😎
+
+## Ciljevi
+
+Nakon ovog zadatka, naučit ćete kako:
+
+- Kreirati web-stranicu za prikaz vašeg životopisa
+
+### Preduvjeti
+
+1. GitHub račun. Posjetite [GitHub](https://github.com/) i kreirajte račun ako ga već nemate.
+
+## Koraci
+
+**Korak 1:** Kreirajte novi GitHub repozitorij i dajte mu ime `my-resume`
+
+**Korak 2:** Kreirajte datoteku `index.html` u svom repozitoriju. Dodati ćemo barem jednu datoteku dok smo još na github.com jer ne možete otvoriti prazan repozitorij na vscode.dev.
+
+Kliknite na poveznicu `creating a new file`, upišite ime `index.html` i odaberite gumb `Commit new file`.
+
+![Kreirajte novu datoteku na github.com](../../../../translated_images/new-file-github.com.c886796d800e8056561829a181be1382c5303da9d902d8b2dd82b68a4806e21f.hr.png)
+
+**Korak 3:** Otvorite [VSCode.dev](https://vscode.dev) i odaberite gumb `Open Remote Repository`.
+
+Kopirajte URL repozitorija koji ste upravo kreirali za svoju stranicu životopisa i zalijepite ga u polje za unos:
+
+_Zamijenite `your-username` svojim GitHub korisničkim imenom._
+
+```
+https://github.com/your-username/my-resume
+```
+
+✅ Ako je uspješno, vidjet ćete svoj projekt i datoteku index.html otvorenu u tekstualnom editoru u pregledniku.
+
+![Kreirajte novu datoteku](../../../../translated_images/project-on-vscode.dev.e79815a9a95ee7feac72ebe5c941c91279716be37c575dbdbf2f43bea2c7d8b6.hr.png)
+
+**Korak 4:** Otvorite datoteku `index.html`, zalijepite kod ispod u svoj kodni prostor i spremite.
+
+<details>
+    <summary><b>HTML kod odgovoran za sadržaj vaše web-stranice životopisa.</b></summary>
+    
+        <html>
+
+            <head>
+                <link href="style.css" rel="stylesheet">
+                <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
+                <title>Vaše ime ovdje!</title>
+            </head>
+            <body>
+                <header id="header">
+                    <!-- zaglavlje životopisa s vašim imenom i titulom -->
+                    <h1>Vaše ime ovdje!</h1>
+                    <hr>
+                    Vaša uloga!
+                    <hr>
+                </header>
+                <main>
+                    <article id="mainLeft">
+                        <section>
+                            <h2>KONTAKT</h2>
+                            <!-- kontakt informacije uključujući društvene mreže -->
+                            <p>
+                                <i class="fa fa-envelope" aria-hidden="true"></i>
+                                <a href="mailto:username@domain.top-level domain">Upišite svoj email ovdje</a>
+                            </p>
+                            <p>
+                                <i class="fab fa-github" aria-hidden="true"></i>
+                                <a href="github.com/yourGitHubUsername">Upišite svoje korisničko ime ovdje!</a>
+                            </p>
+                            <p>
+                                <i class="fab fa-linkedin" aria-hidden="true"></i>
+                                <a href="linkedin.com/yourLinkedInUsername">Upišite svoje korisničko ime ovdje!</a>
+                            </p>
+                        </section>
+                        <section>
+                            <h2>VJEŠTINE</h2>
+                            <!-- vaše vještine -->
+                            <ul>
+                                <li>Vještina 1!</li>
+                                <li>Vještina 2!</li>
+                                <li>Vještina 3!</li>
+                                <li>Vještina 4!</li>
+                            </ul>
+                        </section>
+                        <section>
+                            <h2>OBRAZOVANJE</h2>
+                            <!-- vaše obrazovanje -->
+                            <h3>Upišite svoj studij ovdje!</h3>
+                            <p>
+                                Upišite svoju instituciju ovdje!
+                            </p>
+                            <p>
+                                Početak - Završetak
+                            </p>
+                        </section>            
+                    </article>
+                    <article id="mainRight">
+                        <section>
+                            <h2>O MENI</h2>
+                            <!-- o vama -->
+                            <p>Upišite nešto o sebi!</p>
+                        </section>
+                        <section>
+                            <h2>RADNO ISKUSTVO</h2>
+                            <!-- vaše radno iskustvo -->
+                            <h3>Naziv posla</h3>
+                            <p>
+                                Naziv organizacije ovdje | Početni mjesec – Završni mjesec
+                            </p>
+                            <ul>
+                                    <li>Zadatak 1 - Napišite što ste radili!</li>
+                                    <li>Zadatak 2 - Napišite što ste radili!</li>
+                                    <li>Napišite rezultate/utjecaj vašeg doprinosa</li>
+                                    
+                            </ul>
+                            <h3>Naziv posla 2</h3>
+                            <p>
+                                Naziv organizacije ovdje | Početni mjesec – Završni mjesec
+                            </p>
+                            <ul>
+                                    <li>Zadatak 1 - Napišite što ste radili!</li>
+                                    <li>Zadatak 2 - Napišite što ste radili!</li>
+                                    <li>Napišite rezultate/utjecaj vašeg doprinosa</li>
+                                    
+                            </ul>
+                        </section>
+                    </article>
+                </main>
+            </body>
+        </html>
+</details>
+
+Dodajte detalje svog životopisa kako biste zamijenili _tekst rezerviranog mjesta_ u HTML kodu.
+
+**Korak 5:** Zadržite pokazivač iznad mape My-Resume, kliknite ikonu `New File ...` i kreirajte 2 nove datoteke u svom projektu: `style.css` i `codeswing.json`.
+
+**Korak 6:** Otvorite datoteku `style.css`, zalijepite kod ispod i spremite.
+
+<details>
+        <summary><b>CSS kod za formatiranje izgleda stranice.</b></summary>
+            
+            body {
+                font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+                font-size: 16px;
+                max-width: 960px;
+                margin: auto;
+            }
+            h1 {
+                font-size: 3em;
+                letter-spacing: .6em;
+                padding-top: 1em;
+                padding-bottom: 1em;
+            }
+
+            h2 {
+                font-size: 1.5em;
+                padding-bottom: 1em;
+            }
+
+            h3 {
+                font-size: 1em;
+                padding-bottom: 1em;
+            }
+            main { 
+                display: grid;
+                grid-template-columns: 40% 60%;
+                margin-top: 3em;
+            }
+            header {
+                text-align: center;
+                margin: auto 2em;
+            }
+
+            section {
+                margin: auto 1em 4em 2em;
+            }
+
+            i {
+                margin-right: .5em;
+            }
+
+            p {
+                margin: .2em auto
+            }
+
+            hr {
+                border: none;
+                background-color: lightgray;
+                height: 1px;
+            }
+
+            h1, h2, h3 {
+                font-weight: 100;
+                margin-bottom: 0;
+            }
+            #mainLeft {
+                border-right: 1px solid lightgray;
+            }
+            
+</details>
+
+**Korak 6:** Otvorite datoteku `codeswing.json`, zalijepite kod ispod i spremite.
+
+    {
+    "scripts": [],
+    "styles": []
+    }
+
+**Korak 7:** Instalirajte ekstenziju `Codeswing` kako biste vizualizirali web-stranicu životopisa u kodnom prostoru.
+
+Kliknite ikonu _`Extensions`_ na traci aktivnosti i upišite Codeswing. Kliknite _plavi gumb za instalaciju_ na proširenoj traci aktivnosti za instalaciju ili koristite gumb za instalaciju koji se pojavljuje u kodnom prostoru nakon što odaberete ekstenziju za učitavanje dodatnih informacija. Odmah nakon instalacije ekstenzije, promatrajte promjene u svom projektu 😃
+
+![Instalirajte ekstenzije](../../../../8-code-editor/images/install-extension.gif)
+
+Ovo je ono što ćete vidjeti na svom ekranu nakon instalacije ekstenzije.
+
+![Codeswing ekstenzija u akciji](../../../../translated_images/after-codeswing-extension-pb.0ebddddcf73b550994947a9084e35e2836c713ae13839d49628e3c764c1cfe83.hr.png)
+
+Ako ste zadovoljni promjenama koje ste napravili, zadržite pokazivač iznad mape `Changes` i kliknite gumb `+` za postavljanje promjena.
+
+Upišite poruku za commit _(Opis promjene koju ste napravili u projektu)_ i potvrdite svoje promjene klikom na `check`. Kada završite s radom na projektu, odaberite ikonu hamburger izbornika u gornjem lijevom kutu za povratak na repozitorij na GitHubu.
+
+Čestitamo 🎉 Upravo ste kreirali svoju web-stranicu životopisa koristeći vscode.dev u nekoliko koraka.
+
+## 🚀 Izazov
+
+Otvorite udaljeni repozitorij za koji imate dozvolu za izmjene i ažurirajte neke datoteke. Zatim pokušajte kreirati novu granu sa svojim promjenama i napraviti Pull Request.
+
+## Pregled i samostalno učenje
+
+Pročitajte više o [VSCode.dev](https://code.visualstudio.com/docs/editor/vscode-web?WT.mc_id=academic-0000-alfredodeza) i nekim njegovim drugim značajkama.
+
+---
+
+**Odricanje od odgovornosti**:  
+Ovaj dokument je preveden pomoću AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za kritične informacije preporučuje se profesionalni prijevod od strane ljudskog prevoditelja. Ne preuzimamo odgovornost za bilo kakva nesporazuma ili pogrešna tumačenja koja proizlaze iz korištenja ovog prijevoda.
\ No newline at end of file
diff --git a/translations/hr/CODE_OF_CONDUCT.md b/translations/hr/CODE_OF_CONDUCT.md
new file mode 100644
index 00000000..7c4b26ec
--- /dev/null
+++ b/translations/hr/CODE_OF_CONDUCT.md
@@ -0,0 +1,23 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "b0a9b4cccd918195f58224d5793da1a6",
+  "translation_date": "2025-08-27T21:59:57+00:00",
+  "source_file": "CODE_OF_CONDUCT.md",
+  "language_code": "hr"
+}
+-->
+# Microsoftov Kodeks ponašanja za otvoreni izvor
+
+Ovaj projekt usvojio je [Microsoftov Kodeks ponašanja za otvoreni izvor](https://opensource.microsoft.com/codeofconduct/?WT.mc_id=academic-77807-sagibbon).
+
+Resursi:
+
+- [Microsoftov Kodeks ponašanja za otvoreni izvor](https://opensource.microsoft.com/codeofconduct/?WT.mc_id=academic-77807-sagibbon)
+- [Česta pitanja o Kodeksu ponašanja](https://opensource.microsoft.com/codeofconduct/faq/?WT.mc_id=academic-77807-sagibbon)
+- Obratite se na [opencode@microsoft.com](mailto:opencode@microsoft.com) za pitanja ili zabrinutosti
+
+---
+
+**Odricanje od odgovornosti**:  
+Ovaj dokument je preveden pomoću AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za ključne informacije preporučuje se profesionalni prijevod od strane ljudskog prevoditelja. Ne preuzimamo odgovornost za bilo kakve nesporazume ili pogrešne interpretacije koje proizlaze iz korištenja ovog prijevoda.
\ No newline at end of file
diff --git a/translations/hr/CONTRIBUTING.md b/translations/hr/CONTRIBUTING.md
new file mode 100644
index 00000000..2a67b811
--- /dev/null
+++ b/translations/hr/CONTRIBUTING.md
@@ -0,0 +1,23 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "777400e9f0336c7ee2f9a1200a88478f",
+  "translation_date": "2025-08-27T21:58:17+00:00",
+  "source_file": "CONTRIBUTING.md",
+  "language_code": "hr"
+}
+-->
+# Sudjelovanje
+
+Ovaj projekt pozdravlja doprinose i prijedloge. Većina doprinosa zahtijeva da se složite s Ugovorom o licenci za doprinositelje (CLA), kojim potvrđujete da imate pravo i stvarno dajete prava za korištenje vašeg doprinosa. Za više detalja, posjetite [https://cla.microsoft.com](https://cla.microsoft.com/?WT.mc_id=academic-77807-sagibbon).
+
+Kada pošaljete zahtjev za povlačenje (pull request), CLA-bot će automatski odrediti trebate li dostaviti CLA i odgovarajuće označiti PR (npr. oznakom, komentarom). Jednostavno slijedite upute koje vam bot pruži. Ovo ćete morati učiniti samo jednom za sve repozitorije koji koriste naš CLA. Molimo vas da nam također pokušate objasniti zašto ste napravili tu promjenu kako bismo bolje razumjeli vaš zahtjev.
+
+Ovaj projekt je usvojio [Microsoftov Kodeks ponašanja za otvoreni izvor](https://opensource.microsoft.com/codeofconduct/?WT.mc_id=academic-77807-sagibbon).
+Za više informacija, pogledajte [FAQ o Kodeksu ponašanja](https://opensource.microsoft.com/codeofconduct/faq/?WT.mc_id=academic-77807-sagibbon)
+ili kontaktirajte [opencode@microsoft.com](mailto:opencode@microsoft.com) s dodatnim pitanjima ili komentarima.
+
+---
+
+**Odricanje od odgovornosti**:  
+Ovaj dokument je preveden pomoću AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za ključne informacije preporučuje se profesionalni prijevod od strane ljudskog prevoditelja. Ne preuzimamo odgovornost za bilo kakva nesporazuma ili pogrešna tumačenja koja proizlaze iz korištenja ovog prijevoda.
\ No newline at end of file
diff --git a/translations/hr/README.md b/translations/hr/README.md
new file mode 100644
index 00000000..eaab8900
--- /dev/null
+++ b/translations/hr/README.md
@@ -0,0 +1,206 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "b672130244189715ac084c3259f6ab58",
+  "translation_date": "2025-08-27T21:55:11+00:00",
+  "source_file": "README.md",
+  "language_code": "hr"
+}
+-->
+[![GitHub license](https://img.shields.io/github/license/microsoft/Web-Dev-For-Beginners.svg)](https://github.com/microsoft/Web-Dev-For-Beginners/blob/master/LICENSE)  
+[![GitHub contributors](https://img.shields.io/github/contributors/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/)  
+[![GitHub issues](https://img.shields.io/github/issues/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/)  
+[![GitHub pull-requests](https://img.shields.io/github/issues-pr/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/)  
+[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)  
+
+[![GitHub watchers](https://img.shields.io/github/watchers/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Watch&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/)  
+[![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Fork&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/)  
+[![GitHub stars](https://img.shields.io/github/stars/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Star&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/stargazers/)  
+
+[![](https://dcbadge.vercel.app/api/server/ByRwuEEgH4)](https://discord.gg/zxKYvhSnVp?WT.mc_id=academic-000002-leestott)  
+
+[![Open in Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)  
+
+# Web razvoj za početnike - Kurikulum  
+
+Naučite osnove web razvoja uz naš sveobuhvatni 12-tjedni tečaj koji su osmislili Microsoft Cloud Advocates. Svaka od 24 lekcije istražuje JavaScript, CSS i HTML kroz praktične projekte poput terarija, proširenja za preglednike i svemirskih igara. Sudjelujte u kvizovima, raspravama i praktičnim zadacima. Poboljšajte svoje vještine i optimizirajte zadržavanje znanja uz naš učinkovit pristup temeljen na projektima. Započnite svoje kodersko putovanje već danas!  
+
+#### 🧑‍🎓 _Jeste li student?_  
+
+Posjetite [**Student Hub stranicu**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) gdje ćete pronaći resurse za početnike, studentske pakete, pa čak i načine kako dobiti besplatni certifikat. Ovo je stranica koju želite označiti i povremeno provjeravati jer sadržaj mijenjamo mjesečno.  
+
+### 📣 Obavijest - _Novi kurikulum_ o generativnoj umjetnoj inteligenciji za JavaScript upravo je objavljen  
+
+Ne propustite naš novi kurikulum o generativnoj umjetnoj inteligenciji!  
+
+Posjetite [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) kako biste započeli!  
+
+<div>  
+  <img src="./images/background.png" width="600px" />  
+</div>  
+
+- Lekcije koje pokrivaju sve od osnova do RAG-a.  
+- Interakcija s povijesnim likovima pomoću GenAI i naše prateće aplikacije.  
+- Zabavna i zanimljiva naracija, putovat ćete kroz vrijeme!  
+
+<div>  
+  <img src="./images/character.png" width="600px" />  
+</div>  
+
+Svaka lekcija uključuje zadatak za dovršavanje, provjeru znanja i izazov koji vas vodi kroz teme poput:  
+- Pisanje upita i inženjering upita  
+- Generiranje aplikacija za tekst i slike  
+- Aplikacije za pretraživanje  
+
+Posjetite [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) kako biste započeli!  
+
+## 🌱 Početak  
+
+> **Nastavnici**, [uključili smo nekoliko prijedloga](for-teachers.md) o tome kako koristiti ovaj kurikulum. Voljeli bismo čuti vaše povratne informacije [u našem forumu za raspravu](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!  
+
+**[Polaznici](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, za svaku lekciju započnite kvizom prije predavanja, nastavite čitanjem materijala predavanja, dovršite razne aktivnosti i provjerite svoje razumijevanje kvizom nakon predavanja.  
+
+Kako biste poboljšali svoje iskustvo učenja, povežite se s kolegama i radite na projektima zajedno! Rasprave su dobrodošle u našem [forumu za raspravu](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) gdje će naš tim moderatora biti dostupan za odgovore na vaša pitanja.  
+
+Za daljnje obrazovanje, toplo preporučujemo istraživanje [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) za dodatne materijale za učenje.  
+
+### 📋 Postavljanje vašeg okruženja  
+
+Ovaj kurikulum ima spremno razvojno okruženje! Kada započnete, možete odabrati pokretanje kurikuluma u [Codespace](https://github.com/features/codespaces/) (_okruženje temeljeno na pregledniku, bez potrebe za instalacijom_), ili lokalno na vašem računalu koristeći tekstualni editor poput [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).  
+
+#### Kreirajte svoj repozitorij  
+Kako biste jednostavno spremili svoj rad, preporučuje se da kreirate vlastitu kopiju ovog repozitorija. To možete učiniti klikom na gumb **Use this template** na vrhu stranice. Ovo će kreirati novi repozitorij na vašem GitHub računu s kopijom kurikuluma.  
+
+Slijedite ove korake:  
+1. **Forkajte repozitorij**: Kliknite na gumb "Fork" u gornjem desnom kutu ove stranice.  
+2. **Klonirajte repozitorij**:   `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`  
+
+#### Pokretanje kurikuluma u Codespace-u  
+
+U vašoj kopiji ovog repozitorija koju ste kreirali, kliknite na gumb **Code** i odaberite **Open with Codespaces**. Ovo će kreirati novi Codespace za rad.  
+
+<img src="./images/createcodespace.png" alt="Create codespace" style="width:270px;"/>  
+
+#### Pokretanje kurikuluma lokalno na vašem računalu  
+
+Za pokretanje ovog kurikuluma lokalno na vašem računalu, trebat će vam tekstualni editor, preglednik i alat za naredbeni redak. Naša prva lekcija, [Uvod u programske jezike i alate](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/1-getting-started-lessons/1-intro-to-programming-languages), provest će vas kroz razne opcije za svaki od ovih alata kako biste odabrali ono što vam najbolje odgovara.  
+
+Naša preporuka je korištenje [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) kao vašeg editora, koji također ima ugrađeni [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Možete preuzeti Visual Studio Code [ovdje](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).  
+
+1. Klonirajte svoj repozitorij na vaše računalo. To možete učiniti klikom na gumb **Code** i kopiranjem URL-a:  
+
+    <img src="./images/createcodespace.png" alt="Copy your repository URL" style="width:270px;"/>  
+
+    Zatim otvorite [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) unutar [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) i pokrenite sljedeću naredbu, zamjenjujući `<your-repository-url>` s URL-om koji ste upravo kopirali:  
+
+    ```bash 
+    git clone <your-repository-url>
+    ```  
+
+2. Otvorite mapu u Visual Studio Code. To možete učiniti klikom na **File** > **Open Folder** i odabirom mape koju ste upravo klonirali.  
+
+>  Preporučeni Visual Studio Code dodaci:  
+>  
+> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - za pregled HTML stranica unutar Visual Studio Code  
+> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - za brže pisanje koda  
+
+## 📂 Svaka lekcija uključuje:  
+
+- opcionalni sketchnote  
+- opcionalni dopunski video  
+- kviz za zagrijavanje prije lekcije  
+- pisanu lekciju  
+- za lekcije temeljene na projektima, vodiče korak-po-korak o tome kako izgraditi projekt  
+- provjere znanja  
+- izazov  
+- dopunsko čitanje  
+- zadatak  
+- kviz nakon lekcije  
+
+> **Napomena o kvizovima**: Svi kvizovi nalaze se u mapi Quiz-app, ukupno 48 kvizova s po tri pitanja. Povezani su unutar lekcija, a aplikacija za kviz može se pokrenuti lokalno ili implementirati na Azure; slijedite upute u mapi `quiz-app`. Postupno se lokaliziraju.  
+
+## 🗃️ Lekcije  
+
+|     |                       Naziv projekta                       |                            Naučeni koncepti                             | Ciljevi učenja                                                                                                                 |                                                         Povezana lekcija                                                          |         Autor          |  
+| :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |  
+| 01  |                     Početak                      |           Uvod u programiranje i alate za rad           | Naučite osnovne temelje većine programskih jezika i o softveru koji pomaže profesionalnim programerima u njihovom radu | [Uvod u programske jezike i alate za rad](/1-getting-started-lessons/1-intro-to-programming-languages/README.md) |         Jasmine         |  
+| 02  |                     Početak                      |             Osnove GitHuba, uključujući rad u timu             | Kako koristiti GitHub u svom projektu, kako surađivati s drugima na kodnoj bazi                                                    |                            [Uvod u GitHub](/1-getting-started-lessons/2-github-basics/README.md)                             |          Floor          |  
+| 03  |                     Početak                      |                             Pristupačnost                              | Naučite osnove web pristupačnosti                                                                                               |                       [Osnove pristupačnosti](/1-getting-started-lessons/3-accessibility/README.md)                       |       Christopher       |  
+| 04  |                        Osnove JS                         |                         JavaScript tipovi podataka                          | Osnove JavaScript tipova podataka                                                                                                 |                                       [Tipovi podataka](/2-js-basics/1-data-types/README.md)                                        |         Jasmine         |  
+| 05  |                        Osnove JS                         |                         Funkcije i metode                          | Naučite o funkcijama i metodama za upravljanje logičkim tokom aplikacije                                                             |                              [Funkcije i metode](/2-js-basics/2-functions-methods/README.md)                               | Jasmine i Christopher |  
+| 06  |                        Osnove JS                         |                        Donošenje odluka s JS                        | Naučite kako kreirati uvjete u svom kodu koristeći metode za donošenje odluka                                                           |                                 [Donošenje odluka](/2-js-basics/3-making-decisions/README.md)                                  |         Jasmine         |  
+| 07  |                        Osnove JS                         |                            Nizovi i petlje                            | Radite s podacima koristeći nizove i petlje u JavaScriptu                                                                                 |                                   [Nizovi i petlje](/2-js-basics/4-arrays-loops/README.md)                                    |         Jasmine         |  
+| 08  |       [Terarij](/3-terrarium/solution/README.md)       |                            HTML u praksi                            | Izgradite HTML za kreiranje online terarija, fokusirajući se na izgradnju izgleda                                                         |                                 [Uvod u HTML](/3-terrarium/1-intro-to-html/README.md)                                 |           Jen           |  
+| 09  |       [Terarij](/3-terrarium/solution/README.md)       |                            CSS u praksi                             | Izgradite CSS za stiliziranje online terarija, fokusirajući se na osnove CSS-a uključujući prilagodljivost stranice                     |                                  [Uvod u CSS](/3-terrarium/2-intro-to-css/README.md)                                  |           Jen           |  
+| 10  |            [Terarij](/3-terrarium/solution/README.md)            |                 JavaScript zatvaranja, manipulacija DOM-om                  | Izgradite JavaScript kako bi terarij funkcionirao kao sučelje za povlačenje i ispuštanje, fokusirajući se na zatvaranja i manipulaciju DOM-om             |                  [JavaScript zatvaranja, manipulacija DOM-om](/3-terrarium/3-intro-to-DOM-and-closures/README.md)                   |           Jen           |  
+| 11  |          [Igra tipkanja](/4-typing-game/solution/README.md)          |                          Izgradite igru tipkanja                           | Naučite kako koristiti događaje tipkovnice za upravljanje logikom vaše JavaScript aplikacije                                                          |                                [Programiranje vođeno događajima](/4-typing-game/typing-game/README.md)                                |       Christopher       |  
+| 12  | [Green Browser Extension](/5-browser-extension/solution/README.md) |                         Rad s preglednicima                          | Naučite kako preglednici funkcioniraju, njihovu povijest i kako postaviti prve elemente proširenja za preglednik                    |                               [O preglednicima](/5-browser-extension/1-about-browsers/README.md)                                |           Jen           |
+| 13  | [Green Browser Extension](/5-browser-extension/solution/README.md) | Izrada obrasca, pozivanje API-ja i spremanje varijabli u lokalnu pohranu | Izradite JavaScript elemente vašeg proširenja za preglednik kako biste pozvali API koristeći varijable pohranjene u lokalnoj pohrani |                [API-ji, obrasci i lokalna pohrana](/5-browser-extension/2-forms-browsers-local-storage/README.md)                 |           Jen           |
+| 14  | [Green Browser Extension](/5-browser-extension/solution/README.md) |          Pozadinski procesi u pregledniku, web performanse          | Koristite pozadinske procese preglednika za upravljanje ikonom proširenja; naučite o web performansama i nekim optimizacijama       |             [Pozadinski zadaci i performanse](/5-browser-extension/3-background-tasks-and-performance/README.md)              |           Jen           |
+| 15  |           [Space Game](/6-space-game/solution/README.md)           |             Napredniji razvoj igara s JavaScriptom             | Naučite o nasljeđivanju koristeći klase i kompoziciju te Pub/Sub uzorak, kao pripremu za izradu igre                                |                      [Uvod u napredni razvoj igara](/6-space-game/1-introduction/README.md)                       |          Chris          |
+| 16  |           [Space Game](/6-space-game/solution/README.md)           |                           Crtanje na platnu                            | Naučite o Canvas API-ju, koji se koristi za crtanje elemenata na ekranu                                                             |                                [Crtanje na platnu](/6-space-game/2-drawing-to-canvas/README.md)                                |          Chris          |
+| 17  |           [Space Game](/6-space-game/solution/README.md)           |                   Pomicanje elemenata po ekranu                    | Otkrijte kako elementi mogu dobiti pokret koristeći kartezijske koordinate i Canvas API                                             |                           [Pomicanje elemenata](/6-space-game/3-moving-elements-around/README.md)                           |          Chris          |
+| 18  |           [Space Game](/6-space-game/solution/README.md)           |                          Detekcija sudara                           | Omogućite sudaranje elemenata i njihovu reakciju na pritiske tipki te osigurajte funkciju hlađenja za performanse igre              |                              [Detekcija sudara](/6-space-game/4-collision-detection/README.md)                              |          Chris          |
+| 19  |           [Space Game](/6-space-game/solution/README.md)           |                             Vođenje rezultata                              | Izvršite matematičke izračune na temelju statusa i performansi igre                                                                 |                                    [Vođenje rezultata](/6-space-game/5-keeping-score/README.md)                                    |          Chris          |
+| 20  |           [Space Game](/6-space-game/solution/README.md)           |                     Završavanje i ponovno pokretanje igre                     | Naučite o završavanju i ponovnom pokretanju igre, uključujući čišćenje resursa i resetiranje vrijednosti varijabli                  |                                [Uvjeti završetka](/6-space-game/6-end-condition/README.md)                                 |          Chris          |
+| 21  |         [Banking App](/7-bank-project/solution/README.md)          |                 HTML predlošci i rute u web aplikaciji                 | Naučite kako stvoriti strukturu arhitekture višestranične web stranice koristeći rute i HTML predloške                              |                            [HTML predlošci i rute](/7-bank-project/1-template-route/README.md)                             |          Yohan          |
+| 22  |         [Banking App](/7-bank-project/solution/README.md)          |                  Izrada obrasca za prijavu i registraciju                   | Naučite o izradi obrazaca i rukovanju rutinama za validaciju                                                                         |                                           [Obrasci](/7-bank-project/2-forms/README.md)                                           |          Yohan          |
+| 23  |         [Banking App](/7-bank-project/solution/README.md)          |                   Metode dohvaćanja i korištenja podataka                   | Kako podaci teku u i iz vaše aplikacije, kako ih dohvatiti, pohraniti i ukloniti                                                   |                                            [Podaci](/7-bank-project/3-data/README.md)                                            |          Yohan          |
+| 24  |         [Banking App](/7-bank-project/solution/README.md)          |                      Koncepti upravljanja stanjem                      | Naučite kako vaša aplikacija zadržava stanje i kako ga programatski upravljati                                                      |                                [Upravljanje stanjem](/7-bank-project/4-state-management/README.md)                                |          Yohan          |
+
+
+## 🏫 Pedagogija
+
+Naš kurikulum osmišljen je s dva ključna pedagoška principa:
+* učenje temeljeno na projektima
+* česti kvizovi
+
+Program podučava osnove JavaScripta, HTML-a i CSS-a, kao i najnovije alate i tehnike koje koriste današnji web programeri. Studenti će imati priliku steći praktično iskustvo izradom igre tipkanja, virtualnog terarija, ekološki prihvatljivog proširenja za preglednik, igre u stilu svemirskih napadača i bankovne aplikacije za poslovanje. Do kraja serije, studenti će steći solidno razumijevanje web razvoja.
+
+> 🎓 Prve lekcije iz ovog kurikuluma možete pohađati kao [Put učenja](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) na Microsoft Learn!
+
+Osiguravanjem da sadržaj odgovara projektima, proces postaje zanimljiviji za studente, a zadržavanje koncepata se povećava. Također smo napisali nekoliko početnih lekcija o osnovama JavaScripta za uvod u koncepte, u kombinaciji s videom iz kolekcije "[Serija za početnike: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", čiji su neki autori doprinijeli ovom kurikulumu.
+
+Osim toga, kviz s niskim ulozima prije nastave usmjerava namjeru studenta prema učenju teme, dok drugi kviz nakon nastave osigurava daljnje zadržavanje. Ovaj kurikulum osmišljen je da bude fleksibilan i zabavan te se može pohađati u cijelosti ili djelomično. Projekti započinju jednostavno i postaju sve složeniji do kraja 12-tjednog ciklusa.
+
+Iako smo namjerno izbjegavali uvoditi JavaScript okvire kako bismo se usredotočili na osnovne vještine potrebne web programeru prije usvajanja okvira, dobar sljedeći korak nakon završetka ovog kurikuluma bio bi učenje o Node.js-u putem druge kolekcije videa: "[Serija za početnike: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
+
+> Posjetite naše [Pravila ponašanja](CODE_OF_CONDUCT.md) i [Smjernice za doprinos](CONTRIBUTING.md). Cijenimo vaše konstruktivne povratne informacije!
+
+
+## 🧭 Pristup izvan mreže
+
+Ovu dokumentaciju možete pokrenuti izvan mreže koristeći [Docsify](https://docsify.js.org/#/). Forkajte ovaj repozitorij, [instalirajte Docsify](https://docsify.js.org/#/quickstart) na svoj lokalni uređaj, a zatim u korijenskoj mapi ovog repozitorija upišite `docsify serve`. Web stranica će biti poslužena na portu 3000 na vašem lokalnom računalu: `localhost:3000`.
+
+## 📘 PDF
+
+PDF svih lekcija možete pronaći [ovdje](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
+
+
+## 🎒 Ostali tečajevi
+
+Naš tim proizvodi i druge tečajeve! Pogledajte:
+
+- [Generativna AI za početnike](https://aka.ms/genai-beginners)
+- [Generativna AI za početnike .NET](https://github.com/microsoft/Generative-AI-for-beginners-dotnet)
+- [Generativna AI s JavaScriptom](https://github.com/microsoft/generative-ai-with-javascript)
+- [Generativna AI s Javom](https://github.com/microsoft/Generative-AI-for-beginners-java)
+- [AI za početnike](https://aka.ms/ai-beginners)
+- [Znanost o podacima za početnike](https://aka.ms/datascience-beginners)
+- [Strojno učenje za početnike](https://aka.ms/ml-beginners)
+- [Kibernetička sigurnost za početnike](https://github.com/microsoft/Security-101)
+- [Web razvoj za početnike](https://aka.ms/webdev-beginners)
+- [IoT za početnike](https://aka.ms/iot-beginners)
+- [XR razvoj za početnike](https://github.com/microsoft/xr-development-for-beginners)
+- [Ovladavanje GitHub Copilotom za agentičku upotrebu](https://github.com/microsoft/Mastering-GitHub-Copilot-for-Paired-Programming)
+- [Ovladavanje GitHub Copilotom za C#/.NET programere](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers)
+- [Odaberite svoju vlastitu Copilot avanturu](https://github.com/microsoft/CopilotAdventures)
+
+## Licenca
+
+Ovaj repozitorij licenciran je pod MIT licencom. Pogledajte datoteku [LICENCA](../../LICENSE) za više informacija.
+
+---
+
+**Odricanje od odgovornosti**:  
+Ovaj dokument je preveden pomoću AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za ključne informacije preporučuje se profesionalni prijevod od strane čovjeka. Ne preuzimamo odgovornost za bilo kakva nesporazuma ili pogrešna tumačenja koja proizlaze iz korištenja ovog prijevoda.
\ No newline at end of file
diff --git a/translations/hr/SECURITY.md b/translations/hr/SECURITY.md
new file mode 100644
index 00000000..a24191cd
--- /dev/null
+++ b/translations/hr/SECURITY.md
@@ -0,0 +1,51 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "4ecc3bf2e27983d4c780be6f26ee6228",
+  "translation_date": "2025-08-27T21:58:47+00:00",
+  "source_file": "SECURITY.md",
+  "language_code": "hr"
+}
+-->
+## Sigurnost
+
+Microsoft ozbiljno shvaća sigurnost svojih softverskih proizvoda i usluga, uključujući sve repozitorije izvornog koda kojima upravljamo putem naših GitHub organizacija, koje uključuju [Microsoft](https://github.com/Microsoft), [Azure](https://github.com/Azure), [DotNet](https://github.com/dotnet), [AspNet](https://github.com/aspnet), [Xamarin](https://github.com/xamarin) i [naše GitHub organizacije](https://opensource.microsoft.com/?WT.mc_id=academic-77807-sagibbon).
+
+Ako smatrate da ste pronašli sigurnosni propust u bilo kojem repozitoriju u vlasništvu Microsofta koji zadovoljava [Microsoftovu definiciju sigurnosnog propusta](https://docs.microsoft.com/previous-versions/tn-archive/cc751383(v=technet.10)/?WT.mc_id=academic-77807-sagibbon), molimo da nam ga prijavite na način opisan u nastavku.
+
+## Prijava sigurnosnih problema
+
+**Molimo vas da ne prijavljujete sigurnosne propuste putem javnih GitHub problema.**
+
+Umjesto toga, prijavite ih Microsoftovom centru za sigurnosne odgovore (MSRC) na [https://msrc.microsoft.com/create-report](https://msrc.microsoft.com/create-report/?WT.mc_id=academic-77807-sagibbon).
+
+Ako preferirate prijavu bez prijave, pošaljite e-mail na [secure@microsoft.com](mailto:secure@microsoft.com). Ako je moguće, šifrirajte svoju poruku našim PGP ključem; preuzmite ga sa stranice [Microsoft Security Response Center PGP Key](https://www.microsoft.com/msrc/pgp-key-msrc/?WT.mc_id=academic-77807-sagibbon).
+
+Trebali biste dobiti odgovor unutar 24 sata. Ako iz nekog razloga ne dobijete odgovor, molimo vas da nas kontaktirate putem e-maila kako biste osigurali da smo primili vašu originalnu poruku. Dodatne informacije možete pronaći na [microsoft.com/msrc](https://www.microsoft.com/msrc/?WT.mc_id=academic-77807-sagibbon).
+
+Molimo vas da uključite tražene informacije navedene u nastavku (koliko god možete pružiti) kako biste nam pomogli bolje razumjeti prirodu i opseg mogućeg problema:
+
+  * Vrsta problema (npr. buffer overflow, SQL injekcija, cross-site scripting, itd.)
+  * Puni putovi izvornog file-a povezanog s manifestacijom problema
+  * Lokacija pogođenog izvornog koda (tag/grana/commit ili direktni URL)
+  * Bilo koja posebna konfiguracija potrebna za reprodukciju problema
+  * Korak-po-korak upute za reprodukciju problema
+  * Proof-of-concept ili exploit kod (ako je moguće)
+  * Utjecaj problema, uključujući kako bi napadač mogao iskoristiti problem
+
+Ove informacije pomoći će nam da brže obradimo vaš izvještaj.
+
+Ako prijavljujete za nagradu za otkrivanje grešaka, potpuniji izvještaji mogu doprinijeti većoj nagradi. Posjetite našu stranicu [Microsoft Bug Bounty Program](https://microsoft.com/msrc/bounty/?WT.mc_id=academic-77807-sagibbon) za više detalja o našim aktivnim programima.
+
+## Preferirani jezici
+
+Preferiramo da sva komunikacija bude na engleskom jeziku.
+
+## Politika
+
+Microsoft slijedi načelo [Koordiniranog otkrivanja ranjivosti](https://www.microsoft.com/msrc/cvd/?WT.mc_id=academic-77807-sagibbon).
+
+---
+
+**Odricanje od odgovornosti**:  
+Ovaj dokument je preveden pomoću AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za kritične informacije preporučuje se profesionalni prijevod od strane čovjeka. Ne preuzimamo odgovornost za bilo kakve nesporazume ili pogrešne interpretacije koje proizlaze iz korištenja ovog prijevoda.
\ No newline at end of file
diff --git a/translations/hr/SUPPORT.md b/translations/hr/SUPPORT.md
new file mode 100644
index 00000000..1f968a01
--- /dev/null
+++ b/translations/hr/SUPPORT.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "c9d207ff77b4bb46e46dc2b607a8ec1a",
+  "translation_date": "2025-08-27T21:57:42+00:00",
+  "source_file": "SUPPORT.md",
+  "language_code": "hr"
+}
+-->
+# Podrška
+
+## Kako prijaviti probleme i dobiti pomoć  
+
+Ovaj projekt koristi GitHub Issues za praćenje grešaka i zahtjeva za nove značajke. Prije nego što prijavite novi problem, pretražite postojeće probleme kako biste izbjegli dupliciranje. Za nove probleme, prijavite svoju grešku ili zahtjev za značajku kao novi Issue.
+
+Za pomoć i pitanja o korištenju ovog projekta, molimo pogledajte [naše smjernice za doprinos](CONTRIBUTING.md).
+
+## Microsoftova politika podrške  
+
+Podrška za ovaj projekt ograničena je na gore navedene resurse.
+
+---
+
+**Odricanje od odgovornosti**:  
+Ovaj dokument je preveden pomoću AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za ključne informacije preporučuje se profesionalni prijevod od strane čovjeka. Ne preuzimamo odgovornost za bilo kakva nesporazuma ili pogrešna tumačenja koja proizlaze iz korištenja ovog prijevoda.
\ No newline at end of file
diff --git a/translations/hr/_404.md b/translations/hr/_404.md
new file mode 100644
index 00000000..7831280e
--- /dev/null
+++ b/translations/hr/_404.md
@@ -0,0 +1,21 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "ea9f0804bd62f46d9808e953ec7fc459",
+  "translation_date": "2025-08-27T21:57:58+00:00",
+  "source_file": "_404.md",
+  "language_code": "hr"
+}
+-->
+# U tijeku
+
+Radimo na ovoj stranici. Molimo vas da provjerite kasnije.
+
+Otvorite [problem](https://github.com/microsoft/Web-Dev-For-Beginners/issues/new/choose) ako imate bilo kakvih pitanja.
+
+**[Povratak na početnu](../../../../../../..)**
+
+---
+
+**Odricanje od odgovornosti**:  
+Ovaj dokument je preveden pomoću AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za ključne informacije preporučuje se profesionalni prijevod od strane ljudskog prevoditelja. Ne preuzimamo odgovornost za nesporazume ili pogrešna tumačenja koja mogu proizaći iz korištenja ovog prijevoda.
\ No newline at end of file
diff --git a/translations/hr/docs/_navbar.md b/translations/hr/docs/_navbar.md
new file mode 100644
index 00000000..33db26db
--- /dev/null
+++ b/translations/hr/docs/_navbar.md
@@ -0,0 +1,34 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "3bd2f51ecf4ac9b39277cba748943793",
+  "translation_date": "2025-08-27T22:43:45+00:00",
+  "source_file": "docs/_navbar.md",
+  "language_code": "hr"
+}
+-->
+- Prijevodi
+  - [English (United States)](../../../docs/README)
+  - [বাংলা](../../../docs/README.bn)
+  - [中文(中国)](../../../docs/README.zh-cn)
+  - [中文(台湾)](../../../docs/README.zh-tw)
+  - [Español](../../../docs/README.es)
+  - [Français](../../../docs/README.fr)
+  - [Ελληνικά](../../../docs/README.el)
+  - [हिन्दी](../../../docs/README.hi)
+  - [Bahasa Melayu](../../../docs/README.ms)
+  - [മലയാളം](../../../docs/README.ml)
+  - [தமிழ்](../../../docs/README.ta)
+  - [తెలుగు](../../../docs/README.te)
+  - [Bahasa Indonesia](../../../docs/README.id)
+  - [Italiano](../../../docs/README.it)
+  - [日本語](../../../docs/README.ja)
+  - [Nederlands](../../../docs/README.nl)
+  - [नेपाली](../../../docs/README.np)
+  - [Português](../../../docs/README.pt)
+  - [Русский](../../../docs/README.ru)
+
+---
+
+**Odricanje od odgovornosti**:  
+Ovaj dokument je preveden pomoću AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati mjerodavnim izvorom. Za ključne informacije preporučuje se profesionalni prijevod od strane stručnjaka. Ne preuzimamo odgovornost za bilo kakve nesporazume ili pogrešne interpretacije proizašle iz korištenja ovog prijevoda.
\ No newline at end of file
diff --git a/translations/hr/docs/_sidebar.md b/translations/hr/docs/_sidebar.md
new file mode 100644
index 00000000..684258fa
--- /dev/null
+++ b/translations/hr/docs/_sidebar.md
@@ -0,0 +1,51 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "655c91b5979de46f1d70d97f0c5f1d14",
+  "translation_date": "2025-08-27T22:43:18+00:00",
+  "source_file": "docs/_sidebar.md",
+  "language_code": "hr"
+}
+-->
+- Uvod
+  - [1](../1-getting-started-lessons/1-intro-to-programming-languages/README.md)
+  - [2](../1-getting-started-lessons/2-github-basics/README.md)
+  - [3](../1-getting-started-lessons/3-accessibility/README.md)
+  
+- Osnove JS-a
+  - [4](../2-js-basics/1-data-types/README.md)
+  - [5](../2-js-basics/2-functions-methods/README.md)
+  - [6](../2-js-basics/3-making-decisions/README.md)
+  - [7](../2-js-basics/4-arrays-loops/README.md)
+
+- HTML, CSS, JS
+  - [8](../3-terrarium/1-intro-to-html/README.md)
+  - [9](../3-terrarium/2-intro-to-css/README.md)
+  - [10](../3-terrarium/3-intro-to-DOM-and-closures/README.md)
+
+- Igra tipkanja
+  - [11](../4-typing-game/typing-game/README.md)
+  
+- Proširenje za preglednik
+  - [12](../5-browser-extension/1-about-browsers/README.md)
+  - [13](../5-browser-extension/2-forms-browsers-local-storage/README.md)
+  - [14](../5-browser-extension/3-background-tasks-and-performance/README.md)
+
+- Svemirska igra
+  - [15](../6-space-game/1-introduction/README.md)
+  - [16](../6-space-game/2-drawing-to-canvas/README.md)
+  - [17](../6-space-game/3-moving-elements-around/README.md)
+  - [18](../6-space-game/4-collision-detection/README.md)
+  - [19](../6-space-game/5-keeping-score/README.md)
+  - [20](../6-space-game/6-end-condition/README.md)
+
+- Projekt banke
+  - [21](../7-bank-project/1-template-route/README.md)
+  - [22](../7-bank-project/2-forms/README.md)
+  - [23](../7-bank-project/3-data/README.md)
+  - [24](../7-bank-project/4-state-management/README.md)
+
+---
+
+**Odricanje od odgovornosti**:  
+Ovaj dokument je preveden pomoću AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za ključne informacije preporučuje se profesionalni prijevod od strane stručnjaka. Ne preuzimamo odgovornost za nesporazume ili pogrešne interpretacije koje mogu proizaći iz korištenja ovog prijevoda.
\ No newline at end of file
diff --git a/translations/hr/for-teachers.md b/translations/hr/for-teachers.md
new file mode 100644
index 00000000..a5430014
--- /dev/null
+++ b/translations/hr/for-teachers.md
@@ -0,0 +1,47 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "75cb51f7ca9ea0b097ef4a1287e9290c",
+  "translation_date": "2025-08-27T21:59:26+00:00",
+  "source_file": "for-teachers.md",
+  "language_code": "hr"
+}
+-->
+## Za edukatore
+
+Želite li koristiti ovaj kurikulum u svojoj učionici? Slobodno ga iskoristite!
+
+Zapravo, možete ga koristiti direktno na GitHubu koristeći GitHub Classroom.
+
+Da biste to učinili, forkajte ovaj repozitorij. Trebat ćete kreirati repozitorij za svaku lekciju, pa ćete morati izdvojiti svaku mapu u zaseban repozitorij. Na taj način, [GitHub Classroom](https://classroom.github.com/classrooms) može prepoznati svaku lekciju zasebno.
+
+Ove [detaljne upute](https://github.blog/2020-03-18-set-up-your-digital-classroom-with-github-classroom/) pružit će vam ideju kako postaviti svoju učionicu.
+
+## Korištenje u Moodleu, Canvasu ili Blackboardu
+
+Ovaj kurikulum odlično funkcionira u ovim sustavima za upravljanje učenjem! Koristite [Moodle datoteku za prijenos](../../../../../../../teaching-files/webdev-moodle.mbz) za puni sadržaj ili isprobajte [Common Cartridge datoteku](../../../../../../../teaching-files/webdev-common-cartridge.imscc) koja sadrži dio sadržaja. Moodle Cloud ne podržava potpune Common Cartridge izvoze, pa je bolje koristiti Moodle datoteku za preuzimanje koja se može prenijeti u Canvas. Javite nam kako možemo poboljšati ovo iskustvo.
+
+![Moodle](../../translated_images/moodle.94eb93d714a50cb2c97435b408017dee224348b61bc86203ffd43a4f4e57b95f.hr.png)  
+> Kurikulum u Moodle učionici
+
+![Canvas](../../translated_images/canvas.fbd605ff8e5b8aff567d398528ce113db304446b90b9cad55c654de3fdfcda34.hr.png)  
+> Kurikulum u Canvasu
+
+## Korištenje repozitorija u trenutnom obliku
+
+Ako želite koristiti ovaj repozitorij u trenutnom obliku, bez korištenja GitHub Classrooma, i to je moguće. Trebat ćete komunicirati sa svojim učenicima o tome koju lekciju zajedno obrađujete.
+
+U online formatu (Zoom, Teams ili drugi) možete organizirati breakout sobe za kvizove i mentorirati učenike kako bi se pripremili za učenje. Zatim pozovite učenike na kvizove i neka predaju svoje odgovore kao 'issues' u određeno vrijeme. Isto možete učiniti i sa zadacima ako želite da učenici surađuju javno.
+
+Ako preferirate privatniji format, zamolite učenike da forkaju kurikulum, lekciju po lekciju, u svoje privatne GitHub repozitorije i daju vam pristup. Tada mogu privatno rješavati kvizove i zadatke te ih predati vama putem 'issues' na vašem repozitoriju za učionicu.
+
+Postoji mnogo načina kako ovo može funkcionirati u online učionici. Javite nam što vam najbolje odgovara!
+
+## Podijelite svoje mišljenje s nama!
+
+Želimo da ovaj kurikulum funkcionira za vas i vaše učenike. Povežite se s nama na [Teacher corner](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner) i otvorite [**novi issue**](https://github.com/microsoft/Web-Dev-For-Beginners/issues/new/choose) za bilo kakve zahtjeve, greške i povratne informacije.
+
+---
+
+**Odricanje od odgovornosti**:  
+Ovaj dokument je preveden pomoću AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za kritične informacije preporučuje se profesionalni prijevod od strane čovjeka. Ne preuzimamo odgovornost za bilo kakva nesporazuma ili pogrešna tumačenja koja proizlaze iz korištenja ovog prijevoda.
\ No newline at end of file
diff --git a/translations/hr/lesson-template/README.md b/translations/hr/lesson-template/README.md
new file mode 100644
index 00000000..e9ccc58a
--- /dev/null
+++ b/translations/hr/lesson-template/README.md
@@ -0,0 +1,65 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "0494be70ad7fadd13a8c3d549c23e355",
+  "translation_date": "2025-08-27T22:44:06+00:00",
+  "source_file": "lesson-template/README.md",
+  "language_code": "hr"
+}
+-->
+# [Tema lekcije]
+
+![Umetnite video ovdje](../../../lesson-template/video-url)
+
+## [Kviz prije predavanja](../../../lesson-template/quiz-url)
+
+[Opišite što ćemo naučiti]
+
+### Uvod
+
+Opišite što će biti obuhvaćeno
+
+> Bilješke
+
+### Preduvjeti
+
+Koji koraci su trebali biti obuhvaćeni prije ove lekcije?
+
+### Priprema
+
+Pripremni koraci za početak ove lekcije
+
+---
+
+[Prođite kroz sadržaj u blokovima]
+
+## [Tema 1]
+
+### Zadatak:
+
+Radite zajedno kako biste postupno unaprijedili svoj kodni repozitorij i izgradili projekt sa zajedničkim kodom:
+
+```html
+code blocks
+```
+
+✅ Provjera znanja - iskoristite ovaj trenutak za proširenje znanja učenika otvorenim pitanjima
+
+## [Tema 2]
+
+## [Tema 3]
+
+🚀 Izazov: Dodajte izazov za učenike kako bi surađivali u razredu na unapređenju projekta
+
+Opcionalno: dodajte snimku zaslona korisničkog sučelja dovršene lekcije ako je prikladno
+
+## [Kviz nakon predavanja](../../../lesson-template/quiz-url)
+
+## Pregled i samostalno učenje
+
+**Rok za zadatak [MM/GG]**: [Naziv zadatka](assignment.md)
+
+---
+
+**Odricanje od odgovornosti**:  
+Ovaj dokument je preveden pomoću AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za ključne informacije preporučuje se profesionalni prijevod od strane ljudskog prevoditelja. Ne preuzimamo odgovornost za bilo kakve nesporazume ili pogrešne interpretacije koje proizlaze iz korištenja ovog prijevoda.
\ No newline at end of file
diff --git a/translations/hr/lesson-template/assignment.md b/translations/hr/lesson-template/assignment.md
new file mode 100644
index 00000000..6fec5eba
--- /dev/null
+++ b/translations/hr/lesson-template/assignment.md
@@ -0,0 +1,23 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "b5f62ec256c7e43e771f0d3b4e1a9130",
+  "translation_date": "2025-08-27T22:44:26+00:00",
+  "source_file": "lesson-template/assignment.md",
+  "language_code": "hr"
+}
+-->
+# [Naziv zadatka]
+
+## Upute
+
+## Rubrika
+
+| Kriterij | Izvrsno | Zadovoljavajuće | Potrebno poboljšanje |
+| -------- | -------- | --------------- | -------------------- |
+|          |          |                 |                      |
+
+---
+
+**Odricanje od odgovornosti**:  
+Ovaj dokument je preveden pomoću AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za ključne informacije preporučuje se profesionalni prijevod od strane čovjeka. Ne preuzimamo odgovornost za bilo kakva nesporazuma ili pogrešna tumačenja koja proizlaze iz korištenja ovog prijevoda.
\ No newline at end of file
diff --git a/translations/hr/quiz-app/README.md b/translations/hr/quiz-app/README.md
new file mode 100644
index 00000000..31ac54ea
--- /dev/null
+++ b/translations/hr/quiz-app/README.md
@@ -0,0 +1,191 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "5301875c55bb305e6046bed3a4fd06d2",
+  "translation_date": "2025-08-27T22:51:51+00:00",
+  "source_file": "quiz-app/README.md",
+  "language_code": "hr"
+}
+-->
+# Aplikacija za kviz
+
+Ovi kvizovi su uvodni i završni kvizovi za kurikulum znanosti o podacima na https://aka.ms/webdev-beginners
+
+## Dodavanje prevedenog seta kvizova
+
+Dodajte prijevod kviza stvaranjem odgovarajućih struktura kvizova u mapama `assets/translations`. Izvorni kvizovi nalaze se u `assets/translations/en`. Kvizovi su podijeljeni u nekoliko grupa. Pobrinite se da uskladite numeraciju s odgovarajućim dijelom kviza. Ukupno postoji 40 kvizova u ovom kurikulumu, a brojenje počinje od 0.
+
+  
+<details>
+<summary>Ovako izgleda datoteka prijevoda:</summary>
+
+```
+[
+    {
+        "title": "A title",
+        "complete": "A complete button title",
+        "error": "An error message upon selecting the wrong answer",
+        "quizzes": [
+            {
+                "id": 1,
+                "title": "Title",
+                "quiz": [
+                    {
+                        "questionText": "The question asked",
+                        "answerOptions": [
+                            {
+                                "answerText": "Option 1 title",
+                                "isCorrect": true
+                            },
+                            {
+                                "answerText": "Option 2 title",
+                                "isCorrect": false
+                            }
+                        ]
+                    }
+                ]
+            }
+        ]
+    }
+]
+```
+</details>
+
+Nakon uređivanja prijevoda, uredite datoteku index.js u mapi prijevoda kako biste uvezli sve datoteke prema konvencijama u `en`.
+
+Uredite datoteku `index.js` u `assets/translations` kako biste uvezli nove prevedene datoteke. 
+
+Na primjer, ako je vaš JSON prijevod u `ex.json`, postavite 'ex' kao ključ lokalizacije, a zatim ga unesite kao što je prikazano dolje za uvoz:
+
+<details>
+<summary>index.js</summary>
+
+```
+import ex from "./ex.json";
+
+// if 'ex' is localization key then enter it like so in `messages` to expose it 
+
+const messages = {
+  ex: ex[0],
+};
+
+export default messages;
+```
+
+</details>
+
+## Pokretanje aplikacije za kviz lokalno
+
+### Preduvjeti
+
+- GitHub račun
+- [Node.js i Git](https://nodejs.org/)
+
+### Instalacija i postavljanje
+
+1. Kreirajte repozitorij iz ovog [predloška](https://github.com/new?template_name=Web-Dev-For-Beginners&template_owner=microsoft) 
+
+1. Klonirajte svoj novi repozitorij i navigirajte do aplikacije za kviz
+
+   ```bash
+   git clone https://github.com/your-github-organization/repo-name
+   cd repo-name/quiz-app
+   ```
+
+1. Instalirajte npm pakete i ovisnosti
+
+   ```bash
+   npm install
+   ```
+
+### Izgradnja aplikacije
+
+1. Za izgradnju rješenja, pokrenite:
+
+   ```bash
+   npm run build
+   ```
+
+### Pokretanje aplikacije
+
+1. Za pokretanje rješenja, pokrenite:
+
+    ```bash
+    npm run dev
+    ```
+
+### [Opcionalno] Linting
+
+1. Za provjeru koda, pokrenite:
+
+    ```bash
+    npm run lint
+    ```
+
+## Postavljanje aplikacije za kviz na Azure 
+
+### Preduvjeti
+- Azure pretplata. Prijavite se za besplatnu [ovdje](https://aka.ms/azure-free).
+
+    _Procjena troškova za postavljanje ove aplikacije za kviz: BESPLATNO_
+
+[![Deploy to Azure](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/#create/Microsoft.StaticApp)
+
+Nakon što se prijavite na Azure putem gornje poveznice, odaberite pretplatu i grupu resursa, zatim:
+
+- Detalji statične web aplikacije: Unesite naziv i odaberite plan hostinga
+- GitHub prijava: Postavite izvor postavljanja kao GitHub, zatim se prijavite i ispunite potrebna polja u obrascu:
+    - *Organizacija* – Odaberite svoju organizaciju.
+    - *Repozitorij* – Odaberite repozitorij kurikuluma Web Dev for Beginners. 
+    - *Grana* - Odaberite granu (main) 
+- Predlošci za izgradnju: Azure Static Web Apps koristi algoritam za detekciju kako bi otkrio okvir korišten u vašoj aplikaciji. 
+    - *Lokacija aplikacije* - ./quiz-app
+    - *Lokacija API-ja* -
+    - *Lokacija izlaza* - dist
+- Postavljanje: Kliknite 'Review + Create', zatim 'Create'
+
+    Nakon postavljanja, datoteka radnog tijeka bit će kreirana u *.github* direktoriju vašeg repozitorija. Ova datoteka radnog tijeka sadrži upute o događajima koji će pokrenuti ponovno postavljanje aplikacije na Azure, na primjer, _**push** na granu **main**_ itd.
+
+    <details>
+    <summary>Primjer datoteke radnog tijeka</summary>
+    Evo primjera kako bi datoteka radnog tijeka GitHub Actions mogla izgledati:
+    name: Azure Static Web Apps CI/CD
+
+    ```
+    on:
+    push:
+        branches:
+        - main
+    pull_request:
+        types: [opened, synchronize, reopened, closed]
+        branches:
+        - main
+
+    jobs:
+    build_and_deploy_job:
+        runs-on: ubuntu-latest
+        name: Build and Deploy Job
+        steps:
+        - uses: actions/checkout@v2
+        - name: Build And Deploy
+            id: builddeploy
+            uses: Azure/static-web-apps-deploy@v1
+            with:
+            azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
+            repo_token: ${{ secrets.GITHUB_TOKEN }}
+            action: "upload"
+            app_location: "quiz-app" # App source code path
+            api_location: ""API source code path optional
+            output_location: "dist" #Built app content directory - optional
+    ```
+
+    </details>
+
+- Nakon postavljanja: Nakon što je postavljanje završeno, kliknite na 'Go to Deployment', zatim 'View app in browser'.
+
+Nakon što se vaš GitHub Action (radni tijek) uspješno izvrši, osvježite stranicu uživo kako biste vidjeli svoju aplikaciju.
+
+---
+
+**Odricanje od odgovornosti**:  
+Ovaj dokument je preveden pomoću AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za ključne informacije preporučuje se profesionalni prijevod od strane ljudskog prevoditelja. Ne preuzimamo odgovornost za nesporazume ili pogrešna tumačenja koja mogu proizaći iz korištenja ovog prijevoda.
\ No newline at end of file
diff --git a/translations/sk/1-getting-started-lessons/1-intro-to-programming-languages/README.md b/translations/sk/1-getting-started-lessons/1-intro-to-programming-languages/README.md
new file mode 100644
index 00000000..125cd037
--- /dev/null
+++ b/translations/sk/1-getting-started-lessons/1-intro-to-programming-languages/README.md
@@ -0,0 +1,216 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "c63675cfaf1d223b37bb9fecbfe7c252",
+  "translation_date": "2025-08-27T22:58:55+00:00",
+  "source_file": "1-getting-started-lessons/1-intro-to-programming-languages/README.md",
+  "language_code": "sk"
+}
+-->
+# Úvod do programovacích jazykov a nástrojov pre vývojárov
+
+Táto lekcia pokrýva základy programovacích jazykov. Témy, ktoré sú tu uvedené, sa vzťahujú na väčšinu moderných programovacích jazykov. V sekcii „Nástroje pre vývojárov“ sa dozviete o užitočnom softvéri, ktorý vám ako vývojárovi pomôže.
+
+![Intro Programming](../../../../translated_images/webdev101-programming.d6e3f98e61ac4bff0b27dcbf1c3f16c8ed46984866f2d29988929678b0058fde.sk.png)  
+> Sketchnote od [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Kvíz pred prednáškou  
+[Kvíz pred prednáškou](https://forms.office.com/r/dru4TE0U9n?origin=lprLink)
+
+## Úvod
+
+V tejto lekcii sa budeme venovať:
+
+- Čo je programovanie?  
+- Typy programovacích jazykov  
+- Základné prvky programu  
+- Užitočný softvér a nástroje pre profesionálneho vývojára  
+
+> Túto lekciu si môžete prejsť na [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon)!
+
+## Čo je programovanie?
+
+Programovanie (známe aj ako kódovanie) je proces písania inštrukcií pre zariadenie, ako je počítač alebo mobilné zariadenie. Tieto inštrukcie píšeme pomocou programovacieho jazyka, ktorý zariadenie následne interpretuje. Tieto sady inštrukcií môžu byť označované rôznymi názvami, ako napríklad *program*, *počítačový program*, *aplikácia (app)* alebo *spustiteľný súbor*.
+
+*Program* môže byť čokoľvek, čo je napísané pomocou kódu; webové stránky, hry a aplikácie pre telefóny sú programy. Aj keď je možné vytvoriť program bez písania kódu, základná logika je interpretovaná zariadením a táto logika bola s najväčšou pravdepodobnosťou napísaná pomocou kódu. Program, ktorý *beží* alebo *vykonáva* kód, vykonáva inštrukcie. Zariadenie, na ktorom čítate túto lekciu, práve spúšťa program, aby ju zobrazilo na vašej obrazovke.
+
+✅ Urobte si malý prieskum: Kto je považovaný za prvého programátora na svete?
+
+## Programovacie jazyky
+
+Programovacie jazyky umožňujú vývojárom písať inštrukcie pre zariadenie. Zariadenia rozumejú iba binárnemu kódu (1 a 0), čo však pre *väčšinu* vývojárov nie je veľmi efektívny spôsob komunikácie. Programovacie jazyky sú prostriedkom komunikácie medzi ľuďmi a počítačmi.
+
+Programovacie jazyky majú rôzne formáty a môžu slúžiť rôznym účelom. Napríklad JavaScript sa primárne používa na webové aplikácie, zatiaľ čo Bash sa používa hlavne pre operačné systémy.
+
+*Jazyky nízkej úrovne* zvyčajne vyžadujú menej krokov na interpretáciu inštrukcií zariadením ako *jazyky vysokej úrovne*. Jazyky vysokej úrovne sú však populárne vďaka svojej čitateľnosti a podpore. JavaScript je považovaný za jazyk vysokej úrovne.
+
+Nasledujúci kód ilustruje rozdiel medzi jazykom vysokej úrovne (JavaScript) a jazykom nízkej úrovne (ARM assembly kód).
+
+```javascript
+let number = 10
+let n1 = 0, n2 = 1, nextTerm;
+
+for (let i = 1; i <= number; i++) {
+    console.log(n1);
+    nextTerm = n1 + n2;
+    n1 = n2;
+    n2 = nextTerm;
+}
+```
+
+```c
+ area ascen,code,readonly
+ entry
+ code32
+ adr r0,thumb+1
+ bx r0
+ code16
+thumb
+ mov r0,#00
+ sub r0,r0,#01
+ mov r1,#01
+ mov r4,#10
+ ldr r2,=0x40000000
+back add r0,r1
+ str r0,[r2]
+ add r2,#04
+ mov r3,r0
+ mov r0,r1
+ mov r1,r3
+ sub r4,#01
+ cmp r4,#00
+ bne back
+ end
+```
+
+Verte alebo nie, *oba robia to isté*: vypisujú Fibonacciho postupnosť do čísla 10.
+
+✅ Fibonacciho postupnosť je [definovaná](https://en.wikipedia.org/wiki/Fibonacci_number) ako sada čísel, kde každé číslo je súčtom dvoch predchádzajúcich, počnúc od 0 a 1. Prvých 10 čísel Fibonacciho postupnosti je 0, 1, 1, 2, 3, 5, 8, 13, 21 a 34.
+
+## Prvky programu
+
+Jedna inštrukcia v programe sa nazýva *príkaz* a zvyčajne má znak alebo medzeru, ktorá označuje, kde inštrukcia končí, alebo *končí*. Spôsob, akým program končí, sa líši podľa jazyka.
+
+Príkazy v programe môžu závisieť od údajov poskytnutých používateľom alebo iným zdrojom na vykonanie inštrukcií. Údaje môžu zmeniť správanie programu, preto programovacie jazyky obsahujú spôsob, ako dočasne ukladať údaje, aby sa mohli použiť neskôr. Tieto sa nazývajú *premenné*. Premenné sú príkazy, ktoré inštruujú zariadenie, aby uložilo údaje do svojej pamäte. Premenné v programoch sú podobné premenným v algebre, kde majú jedinečný názov a ich hodnota sa môže časom meniť.
+
+Existuje možnosť, že niektoré príkazy nebudú zariadením vykonané. Zvyčajne je to zámer autora programu alebo náhodou, keď nastane neočakávaná chyba. Tento typ kontroly nad aplikáciou ju robí robustnejšou a udržiavateľnejšou. Typicky k týmto zmenám v kontrole dochádza, keď sú splnené určité podmienky. Bežným príkazom používaným v modernom programovaní na kontrolu behu programu je príkaz `if..else`.
+
+✅ O tomto type príkazu sa dozviete viac v nasledujúcich lekciách.
+
+## Nástroje pre vývojárov
+
+[![Nástroje pre vývojárov](https://img.youtube.com/vi/69WJeXGBdxg/0.jpg)](https://youtube.com/watch?v=69WJeXGBdxg "Nástroje pre vývojárov")
+
+> 🎥 Kliknite na obrázok vyššie pre video o nástrojoch
+
+V tejto sekcii sa dozviete o niektorom softvéri, ktorý môže byť veľmi užitočný na začiatku vašej profesionálnej vývojárskej cesty.
+
+**Vývojové prostredie** je jedinečná sada nástrojov a funkcií, ktoré vývojár často používa pri písaní softvéru. Niektoré z týchto nástrojov boli prispôsobené špecifickým potrebám vývojára a môžu sa časom meniť, ak vývojár zmení priority v práci, osobných projektoch alebo ak používa iný programovací jazyk. Vývojové prostredia sú také jedinečné ako vývojári, ktorí ich používajú.
+
+### Editory
+
+Jedným z najdôležitejších nástrojov pre vývoj softvéru je editor. Editory sú miestom, kde píšete svoj kód a niekedy aj miestom, kde ho spúšťate.
+
+Vývojári sa spoliehajú na editory z niekoľkých ďalších dôvodov:
+
+- *Ladenie* pomáha odhaliť chyby a problémy prechádzaním kódu riadok po riadku. Niektoré editory majú schopnosti ladenia; môžu byť prispôsobené a doplnené pre konkrétne programovacie jazyky.  
+- *Zvýrazňovanie syntaxe* pridáva farby a formátovanie textu do kódu, čo ho robí ľahšie čitateľným. Väčšina editorov umožňuje prispôsobené zvýrazňovanie syntaxe.  
+- *Rozšírenia a integrácie* sú špecializované nástroje pre vývojárov, vytvorené vývojármi. Tieto nástroje neboli súčasťou základného editora. Napríklad mnohí vývojári dokumentujú svoj kód, aby vysvetlili, ako funguje. Môžu si nainštalovať rozšírenie na kontrolu pravopisu, aby našli preklepy v dokumentácii. Väčšina rozšírení je určená na použitie v konkrétnom editore a väčšina editorov obsahuje spôsob, ako vyhľadať dostupné rozšírenia.  
+- *Prispôsobenie* umožňuje vývojárom vytvoriť jedinečné vývojové prostredie, ktoré vyhovuje ich potrebám. Väčšina editorov je extrémne prispôsobiteľná a môže tiež umožniť vývojárom vytvárať vlastné rozšírenia.  
+
+#### Populárne editory a rozšírenia pre webový vývoj
+
+- [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)  
+  - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker)  
+  - [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare)  
+  - [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)  
+- [Atom](https://atom.io/)  
+  - [spell-check](https://atom.io/packages/spell-check)  
+  - [teletype](https://atom.io/packages/teletype)  
+  - [atom-beautify](https://atom.io/packages/atom-beautify)  
+- [Sublimetext](https://www.sublimetext.com/)  
+  - [emmet](https://emmet.io/)  
+  - [SublimeLinter](http://www.sublimelinter.com/en/stable/)  
+
+### Prehliadače
+
+Ďalším kľúčovým nástrojom je prehliadač. Weboví vývojári sa spoliehajú na prehliadač, aby videli, ako ich kód funguje na webe. Prehliadač sa tiež používa na zobrazenie vizuálnych prvkov webovej stránky, ktoré sú napísané v editore, ako je HTML.
+
+Mnohé prehliadače obsahujú *nástroje pre vývojárov* (DevTools), ktoré obsahujú sadu užitočných funkcií a informácií na pomoc vývojárom pri zhromažďovaní a zachytávaní dôležitých informácií o ich aplikácii. Napríklad: Ak má webová stránka chyby, niekedy je užitočné vedieť, kedy k nim došlo. DevTools v prehliadači môžu byť nakonfigurované na zachytenie týchto informácií.
+
+#### Populárne prehliadače a DevTools
+
+- [Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)  
+- [Chrome](https://developers.google.com/web/tools/chrome-devtools/)  
+- [Firefox](https://developer.mozilla.org/docs/Tools)  
+
+### Nástroje príkazového riadku
+
+Niektorí vývojári preferujú menej grafický pohľad na svoje každodenné úlohy a spoliehajú sa na príkazový riadok. Písanie kódu si vyžaduje značné množstvo písania a niektorí vývojári preferujú neprerušovať svoj tok na klávesnici. Používajú klávesové skratky na prepínanie medzi oknami na pracovnej ploche, prácu na rôznych súboroch a používanie nástrojov. Väčšinu úloh je možné vykonať pomocou myši, ale jednou z výhod príkazového riadku je, že veľa vecí sa dá urobiť bez potreby prepínania medzi myšou a klávesnicou. Ďalšou výhodou príkazového riadku je, že je konfigurovateľný a môžete si uložiť vlastnú konfiguráciu, neskôr ju zmeniť a importovať do iných vývojových zariadení. Pretože vývojové prostredia sú také jedinečné pre každého vývojára, niektorí sa príkazovému riadku vyhýbajú, iní sa naň úplne spoliehajú a niektorí preferujú kombináciu oboch.
+
+### Populárne možnosti príkazového riadku
+
+Možnosti príkazového riadku sa líšia v závislosti od operačného systému, ktorý používate.
+
+*💻 = predinštalované v operačnom systéme.*
+
+#### Windows
+
+- [Powershell](https://docs.microsoft.com/powershell/scripting/overview?view=powershell-7/?WT.mc_id=academic-77807-sagibbon) 💻  
+- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands/?WT.mc_id=academic-77807-sagibbon) (známy aj ako CMD) 💻  
+- [Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)  
+- [mintty](https://mintty.github.io/)  
+
+#### MacOS
+
+- [Terminal](https://support.apple.com/guide/terminal/open-or-quit-terminal-apd5265185d-f365-44cb-8b09-71a064a42125/mac) 💻  
+- [iTerm](https://iterm2.com/)  
+- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-macos?view=powershell-7/?WT.mc_id=academic-77807-sagibbon)  
+
+#### Linux
+
+- [Bash](https://www.gnu.org/software/bash/manual/html_node/index.html) 💻  
+- [KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)  
+- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-linux?view=powershell-7/?WT.mc_id=academic-77807-sagibbon)  
+
+#### Populárne nástroje príkazového riadku
+
+- [Git](https://git-scm.com/) (💻 na väčšine operačných systémov)  
+- [NPM](https://www.npmjs.com/)  
+- [Yarn](https://classic.yarnpkg.com/en/docs/cli/)  
+
+### Dokumentácia
+
+Keď sa vývojár chce naučiť niečo nové, pravdepodobne sa obráti na dokumentáciu, aby sa naučil, ako to používať. Vývojári sa často spoliehajú na dokumentáciu, ktorá ich prevedie správnym používaním nástrojov a jazykov, a tiež na získanie hlbšieho pochopenia ich fungovania.
+
+#### Populárna dokumentácia o webovom vývoji
+
+- [Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web), od Mozilly, vydavateľov prehliadača [Firefox](https://www.mozilla.org/firefox/)  
+- [Frontend Masters](https://frontendmasters.com/learn/)  
+- [Web.dev](https://web.dev), od Googlu, vydavateľov prehliadača [Chrome](https://www.google.com/chrome/)  
+- [Microsoftova dokumentácia pre vývojárov](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers), pre [Microsoft Edge](https://www.microsoft.com/edge)  
+- [W3 Schools](https://www.w3schools.com/where_to_start.asp)  
+
+✅ Urobte si prieskum: Teraz, keď poznáte základy prostredia webového vývojára, porovnajte ho s prostredím webového dizajnéra.
+
+---
+
+## 🚀 Výzva
+
+Porovnajte niektoré programovacie jazyky. Aké sú niektoré jedinečné vlastnosti JavaScriptu oproti Jave? A čo COBOL oproti Go?
+
+## Kvíz po prednáške  
+[Kvíz po prednáške](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/2)
+
+## Prehľad a samoštúdium
+
+Študujte rôzne jazyky dostupné pre programátora. Skúste napísať jeden riadok v jednom jazyku a potom ho prepíšte do dvoch ďalších. Čo ste sa naučili?
+
+## Zadanie
+
+[Čítanie dokumentácie](assignment.md)  
+
+---
+
+**Upozornenie**:  
+Tento dokument bol preložený pomocou služby AI prekladu [Co-op Translator](https://github.com/Azure/co-op-translator). Aj keď sa snažíme o presnosť, prosím, berte na vedomie, že automatizované preklady môžu obsahovať chyby alebo nepresnosti. Pôvodný dokument v jeho rodnom jazyku by mal byť považovaný za autoritatívny zdroj. Pre kritické informácie sa odporúča profesionálny ľudský preklad. Nie sme zodpovední za akékoľvek nedorozumenia alebo nesprávne interpretácie vyplývajúce z použitia tohto prekladu.
\ No newline at end of file
diff --git a/translations/sk/1-getting-started-lessons/1-intro-to-programming-languages/assignment.md b/translations/sk/1-getting-started-lessons/1-intro-to-programming-languages/assignment.md
new file mode 100644
index 00000000..8c23d4d4
--- /dev/null
+++ b/translations/sk/1-getting-started-lessons/1-intro-to-programming-languages/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "1ce4deaec80130d3a0a3c906568459fc",
+  "translation_date": "2025-08-27T23:01:01+00:00",
+  "source_file": "1-getting-started-lessons/1-intro-to-programming-languages/assignment.md",
+  "language_code": "sk"
+}
+-->
+# Čítanie dokumentácie
+
+## Pokyny
+
+Existuje mnoho nástrojov, ktoré môže webový vývojár potrebovať, a ktoré sú uvedené na [MDN dokumentácii pre nástroje na strane klienta](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview). Vyberte 3 nástroje, ktoré neboli pokryté v lekcii, vysvetlite, prečo by ich webový vývojár použil, a vyhľadajte nástroj, ktorý spadá do tejto kategórie, a zdieľajte jeho dokumentáciu. Nepoužívajte rovnaký príklad nástroja z MDN dokumentácie.
+
+## Hodnotiace kritériá
+
+Vynikajúce | Dostatočné | Potrebuje zlepšenie
+--- | --- | -- |
+|Vysvetlené, prečo by webový vývojár použil nástroj| Vysvetlené, ako, ale nie prečo by vývojár použil nástroj| Nespomenuté, ako alebo prečo by vývojár použil nástroj  |
+
+---
+
+**Upozornenie**:  
+Tento dokument bol preložený pomocou služby AI prekladu [Co-op Translator](https://github.com/Azure/co-op-translator). Hoci sa snažíme o presnosť, prosím, berte na vedomie, že automatizované preklady môžu obsahovať chyby alebo nepresnosti. Pôvodný dokument v jeho pôvodnom jazyku by mal byť považovaný za autoritatívny zdroj. Pre kritické informácie sa odporúča profesionálny ľudský preklad. Nenesieme zodpovednosť za akékoľvek nedorozumenia alebo nesprávne interpretácie vyplývajúce z použitia tohto prekladu.
\ No newline at end of file
diff --git a/translations/sk/1-getting-started-lessons/2-github-basics/README.md b/translations/sk/1-getting-started-lessons/2-github-basics/README.md
new file mode 100644
index 00000000..b1796f58
--- /dev/null
+++ b/translations/sk/1-getting-started-lessons/2-github-basics/README.md
@@ -0,0 +1,339 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "05666cecb8983a72cf0ce1d18932b5b7",
+  "translation_date": "2025-08-27T23:05:17+00:00",
+  "source_file": "1-getting-started-lessons/2-github-basics/README.md",
+  "language_code": "sk"
+}
+-->
+# Úvod do GitHubu
+
+Táto lekcia pokrýva základy GitHubu, platformy na hosťovanie a správu zmien vo vašom kóde.
+
+![Úvod do GitHubu](../../../../translated_images/webdev101-github.8846d7971abef6f947909b4f9d343e2a23778aa716ca6b9d71df7174ee5009ac.sk.png)
+> Sketchnote od [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Kvíz pred lekciou
+[Kvíz pred lekciou](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/3)
+
+## Úvod
+
+V tejto lekcii sa naučíte:
+
+- sledovať prácu, ktorú robíte na svojom počítači
+- pracovať na projektoch s ostatnými
+- ako prispievať do open source softvéru
+
+### Predpoklady
+
+Predtým, než začnete, musíte skontrolovať, či máte nainštalovaný Git. V termináli zadajte:  
+`git --version`
+
+Ak Git nie je nainštalovaný, [stiahnite Git](https://git-scm.com/downloads). Potom nastavte svoj lokálny Git profil v termináli:
+* `git config --global user.name "vaše-meno"`
+* `git config --global user.email "váš-email"`
+
+Na kontrolu, či je Git už nakonfigurovaný, môžete zadať:
+`git config --list`
+
+Budete tiež potrebovať účet na GitHub, editor kódu (napríklad Visual Studio Code) a otvorený terminál (alebo príkazový riadok).
+
+Prejdite na [github.com](https://github.com/) a vytvorte si účet, ak ho ešte nemáte, alebo sa prihláste a vyplňte svoj profil.
+
+✅ GitHub nie je jediným úložiskom kódu na svete; existujú aj iné, ale GitHub je najznámejší.
+
+### Príprava
+
+Budete potrebovať priečinok s projektom kódu na vašom lokálnom počítači (notebook alebo PC) a verejné úložisko na GitHub, ktoré bude slúžiť ako príklad, ako prispievať do projektov ostatných.
+
+---
+
+## Správa kódu
+
+Predstavte si, že máte lokálny priečinok s projektom kódu a chcete začať sledovať svoj pokrok pomocou git - systému na správu verzií. Niektorí ľudia prirovnávajú používanie git k písaniu milostného listu svojmu budúcemu ja. Čítaním vašich commit správ o dni, týždne alebo mesiace neskôr si budete môcť spomenúť, prečo ste urobili určité rozhodnutie, alebo "vrátiť" zmenu - samozrejme, ak píšete dobré "commit správy".
+
+### Úloha: Vytvorte úložisko a commitnite kód  
+
+> Pozrite si video
+> 
+> [![Video o základoch Git a GitHub](https://img.youtube.com/vi/9R31OUPpxU4/0.jpg)](https://www.youtube.com/watch?v=9R31OUPpxU4)
+
+1. **Vytvorte úložisko na GitHub**. Na GitHub.com, v záložke úložísk alebo z navigačného panela vpravo hore, nájdite tlačidlo **new repo**.
+
+   1. Dajte svojmu úložisku (priečinku) názov.
+   1. Vyberte **create repository**.
+
+1. **Prejdite do pracovného priečinka**. V termináli prepnite do priečinka (tiež známeho ako adresár), ktorý chcete začať sledovať. Zadajte:
+
+   ```bash
+   cd [name of your folder]
+   ```
+
+1. **Inicializujte git úložisko**. Vo vašom projekte zadajte:
+
+   ```bash
+   git init
+   ```
+
+1. **Skontrolujte stav**. Na kontrolu stavu vášho úložiska zadajte:
+
+   ```bash
+   git status
+   ```
+
+   Výstup môže vyzerať nejako takto:
+
+   ```output
+   Changes not staged for commit:
+   (use "git add <file>..." to update what will be committed)
+   (use "git checkout -- <file>..." to discard changes in working directory)
+
+        modified:   file.txt
+        modified:   file2.txt
+   ```
+
+   Typicky príkaz `git status` vám povie veci ako, ktoré súbory sú pripravené na _uloženie_ do úložiska alebo majú zmeny, ktoré by ste mohli chcieť zachovať.
+
+1. **Pridajte všetky súbory na sledovanie**  
+   Toto sa tiež nazýva staging súborov/pridávanie súborov do staging oblasti.
+
+   ```bash
+   git add .
+   ```
+
+   Argument `git add` plus `.` označuje, že všetky vaše súbory a zmeny sú pripravené na sledovanie.
+
+1. **Pridajte vybrané súbory na sledovanie**
+
+   ```bash
+   git add [file or folder name]
+   ```
+
+   Toto nám pomáha pridať iba vybrané súbory do staging oblasti, keď nechceme commitnúť všetky súbory naraz.
+
+1. **Odstráňte všetky súbory zo staging oblasti**
+
+   ```bash
+   git reset
+   ```
+
+   Tento príkaz nám pomáha odstrániť všetky súbory zo staging oblasti naraz.
+
+1. **Odstráňte konkrétny súbor zo staging oblasti**
+
+   ```bash
+   git reset [file or folder name]
+   ```
+
+   Tento príkaz nám pomáha odstrániť iba konkrétny súbor zo staging oblasti, ktorý nechceme zahrnúť do ďalšieho commitu.
+
+1. **Uložte svoju prácu**. V tomto bode ste pridali súbory do tzv. _staging oblasti_. Miesta, kde Git sleduje vaše súbory. Aby ste zmenu urobili trvalou, musíte _commitnúť_ súbory. Na to vytvoríte _commit_ pomocou príkazu `git commit`. _Commit_ predstavuje bod uloženia v histórii vášho úložiska. Zadajte nasledujúce na vytvorenie _commit_:
+
+   ```bash
+   git commit -m "first commit"
+   ```
+
+   Tento commit uloží všetky vaše súbory a pridá správu "first commit". Pre budúce commit správy budete chcieť byť viac popisní vo vašom opise, aby ste vyjadrili, aký typ zmeny ste urobili.
+
+1. **Pripojte svoje lokálne Git úložisko s GitHubom**. Git úložisko je dobré na vašom počítači, ale v určitom bode budete chcieť mať zálohu svojich súborov niekde inde a tiež pozvať ostatných ľudí, aby s vami pracovali na vašom úložisku. Jedným z takých skvelých miest je GitHub. Pamätajte, že sme už vytvorili úložisko na GitHub, takže jediná vec, ktorú musíme urobiť, je pripojiť naše lokálne Git úložisko s GitHubom. Príkaz `git remote add` to urobí. Zadajte nasledujúci príkaz:
+
+   > Poznámka: Predtým, než zadáte príkaz, prejdite na stránku vášho GitHub úložiska, aby ste našli URL úložiska. Použijete ho v nasledujúcom príkaze. Nahraďte ```https://github.com/username/repository_name.git``` vašou GitHub URL.
+
+   ```bash
+   git remote add origin https://github.com/username/repository_name.git
+   ```
+
+   Tento príkaz vytvorí _remote_, alebo pripojenie, nazvané "origin", ktoré ukazuje na GitHub úložisko, ktoré ste vytvorili skôr.
+
+1. **Odošlite lokálne súbory na GitHub**. Doteraz ste vytvorili _pripojenie_ medzi lokálnym úložiskom a GitHub úložiskom. Pošlite tieto súbory na GitHub pomocou nasledujúceho príkazu `git push`, takto: 
+
+   > Poznámka: Názov vašej vetvy môže byť predvolene odlišný od ```main```.
+
+   ```bash
+   git push -u origin main
+   ```
+
+   Tento príkaz odošle vaše commity vo vašej "main" vetve na GitHub.
+
+2. **Pridajte ďalšie zmeny**. Ak chcete pokračovať v robení zmien a ich odosielaní na GitHub, budete potrebovať použiť nasledujúce tri príkazy:
+
+   ```bash
+   git add .
+   git commit -m "type your commit message here"
+   git push
+   ```
+
+   > Tip: Možno budete chcieť prijať súbor `.gitignore`, aby ste zabránili súborom, ktoré nechcete sledovať, aby sa zobrazovali na GitHub - napríklad ten súbor s poznámkami, ktorý uchovávate v rovnakom priečinku, ale nemá miesto vo verejnom úložisku. Šablóny pre súbory `.gitignore` nájdete na [.gitignore templates](https://github.com/github/gitignore).
+
+#### Commit správy
+
+Skvelý predmet commit správy dokončí nasledujúcu vetu:  
+Ak sa použije, tento commit <vaša predmetová správa tu>
+
+Pre predmet použite imperatívny, prítomný čas: "zmeniť" nie "zmenené" ani "zmeny".  
+Rovnako ako v predmete, aj v tele (voliteľné) použite imperatívny, prítomný čas. Telo by malo obsahovať motiváciu pre zmenu a porovnať ju s predchádzajúcim správaním. Vysvetľujete `prečo`, nie `ako`.
+
+✅ Venujte pár minút prehliadaniu GitHubu. Nájdete naozaj skvelú commit správu? Nájdete naozaj minimálnu? Aké informácie si myslíte, že sú najdôležitejšie a najužitočnejšie na vyjadrenie v commit správe?
+
+### Úloha: Spolupracujte
+
+Hlavným dôvodom, prečo veci umiestňujeme na GitHub, je umožniť spoluprácu s ostatnými vývojármi.
+
+## Práca na projektoch s ostatnými
+
+> Pozrite si video
+>
+> [![Video o základoch Git a GitHub](https://img.youtube.com/vi/bFCM-PC3cu8/0.jpg)](https://www.youtube.com/watch?v=bFCM-PC3cu8)
+
+Vo vašom úložisku prejdite na `Insights > Community`, aby ste videli, ako váš projekt porovnáva s odporúčanými komunitnými štandardmi.
+
+   Tu sú niektoré veci, ktoré môžu zlepšiť vaše GitHub úložisko:
+   - **Popis**. Pridali ste popis pre váš projekt?
+   - **README**. Pridali ste README? GitHub poskytuje pokyny na písanie [README](https://docs.github.com/articles/about-readmes/?WT.mc_id=academic-77807-sagibbon).
+   - **Pravidlá prispievania**. Má váš projekt [pravidlá prispievania](https://docs.github.com/articles/setting-guidelines-for-repository-contributors/?WT.mc_id=academic-77807-sagibbon)?
+   - **Kódex správania**. Má váš projekt [kódex správania](https://docs.github.com/articles/adding-a-code-of-conduct-to-your-project/)?
+   - **Licencia**. Možno najdôležitejšie, má váš projekt [licenciu](https://docs.github.com/articles/adding-a-license-to-a-repository/)?
+
+Všetky tieto zdroje budú prospešné pri onboardingu nových členov tímu. A to sú typicky veci, na ktoré sa noví prispievatelia pozerajú predtým, než sa pozrú na váš kód, aby zistili, či je váš projekt správnym miestom, kde by mali tráviť svoj čas.
+
+✅ README súbory, aj keď ich príprava zaberá čas, sú často zanedbávané zaneprázdnenými správcami. Nájdete príklad obzvlášť popisného README? Poznámka: existujú [nástroje na vytváranie dobrých README](https://www.makeareadme.com/), ktoré by ste mohli vyskúšať.
+
+### Úloha: Zlúčte kód
+
+Dokumenty o prispievaní pomáhajú ľuďom prispievať do projektu. Vysvetľujú, aké typy príspevkov hľadáte a ako proces funguje. Prispievatelia budú musieť prejsť sériou krokov, aby mohli prispievať do vášho úložiska na GitHub:
+
+1. **Forkovanie vášho úložiska**. Pravdepodobne budete chcieť, aby ľudia _forkovali_ váš projekt. Forkovanie znamená vytvorenie repliky vášho úložiska na ich GitHub profile.
+1. **Klonovanie**. Odtiaľ si projekt naklonujú na svoj lokálny počítač.
+1. **Vytvorenie vetvy**. Budete chcieť, aby si vytvorili _vetvu_ pre svoju prácu.
+1. **Zameranie zmeny na jednu oblasť**. Požiadajte prispievateľov, aby sa sústredili na jeden príspevok naraz - tým sa zvýši šanca, že ich prácu budete môcť _zlúčiť_. Predstavte si, že opravia chybu, pridajú novú funkciu a aktualizujú niekoľko testov - čo ak chcete, alebo môžete implementovať iba 2 z 3, alebo 1 z 3 zmien?
+
+✅ Predstavte si situáciu, kde sú vetvy obzvlášť kritické pre písanie a dodávanie dobrého kódu. Aké prípady použitia vás napadajú?
+
+> Poznámka: Buďte zmenou, ktorú chcete vidieť vo svete, a vytvorte vetvy aj pre svoju vlastnú prácu. Akékoľvek commity, ktoré urobíte, budú urobené na vetve, na ktorej ste aktuálne "checked out". Použite `git status`, aby ste videli, na ktorej vetve sa nachádzate.
+
+Prejdime si workflow prispievateľa. Predpokladajme, že prispievateľ už _forkoval_ a _klonoval_ úložisko, takže má Git úložisko pripravené na prácu na svojom lokálnom počítači:
+
+1. **Vytvorenie vetvy**. Použite príkaz `git branch` na vytvorenie vetvy, ktorá bude obsahovať zmeny, ktoré chcú prispieť:
+
+   ```bash
+   git branch [branch-name]
+   ```
+
+1. **Prepnite na pracovnú vetvu**. Prepnite na špecifikovanú vetvu a aktualizujte pracovný adresár pomocou `git switch`:
+
+   ```bash
+   git switch [branch-name]
+   ```
+
+1. **Pracujte**. V tomto bode chcete pridať svoje zmeny. Nezabudnite o tom informovať Git pomocou nasledujúcich príkazov:
+
+   ```bash
+   git add .
+   git commit -m "my changes"
+   ```
+
+   Uistite sa, že dávate svojmu commit dobrý názov, pre vaše dobro, ako aj pre správcu úložiska, na ktorom pomáhate.
+
+1. **Zlúčte svoju prácu s vetvou `main`**. V určitom bode ste hotoví s prácou a chcete zlúčiť svoju prácu s tou vo vetve `main`. Vetva `main` sa medzitým mohla zmeniť, takže sa uistite, že ju najskôr aktualizujete na najnovšiu pomocou nasledujúcich príkazov:
+
+   ```bash
+   git switch main
+   git pull
+   ```
+
+   V tomto bode sa chcete uistiť, že akékoľvek _konflikty_, situácie, kde Git nemôže ľahko _zlúčiť_ zmeny, sa objavia vo vašej pracovnej vetve. Preto spustite nasledujúce príkazy:
+
+   ```bash
+   git switch [branch_name]
+   git merge main
+   ```
+
+   Tento príkaz prinesie všetky zmeny z `main` do vašej vetvy a dúfajme, že môžete pokračovať. Ak nie, VS Code vám ukáže, kde je Git _zmätený_ a jednoducho upravíte dotknuté súbory, aby ste určili, ktorý obsah je najpresnejší.
+
+1. **Odošlite svoju prácu na GitHub**. Odoslanie vašej práce na GitHub znamená dve veci. Pushnutie vašej vetvy do vášho úložiska a potom otvorenie PR, Pull Request.
+
+   ```bash
+   git push --set-upstream origin [branch-name]
+   ```
+
+   Vyššie uvedený príkaz vytvorí vetvu vo vašom forkovanom úložisku.
+
+1. **Otvorte PR**. Ďalej chcete otvoriť PR. Urobíte to tak, že prejdete na forkované úložisko na GitHub. Uvidíte indikáciu na GitHub, kde sa vás opýta, či chcete vytvoriť nový PR, kliknete na to a budete presmerovaní na rozhranie, kde môžete zmeniť názov commit správy, dať jej vhodnejší popis. Teraz správca úložiska, ktoré ste forkovali, uvidí tento PR a _držte palce_, že ocení a _zlúči_ váš PR. Teraz ste prispievateľ, hurá :)
+
+1. **Vyčistite**. Považuje sa za dobrú prax _vyčistiť_ po úspešnom zlúčení PR. Chcete vyčistiť svoju lokálnu vetvu aj vetvu, ktorú ste pushli na GitHub. Najskôr ju vymažte lokálne pomocou nasledujúceho príkazu:
+
+   ```bash
+   git branch -d [branch-name]
+   ```
+Uistite sa, že prejdete na stránku GitHub pre forknuté repo a odstránite vzdialenú vetvu, ktorú ste práve naň poslali.
+
+`Pull request` sa môže zdať ako zvláštny termín, pretože v skutočnosti chcete svoje zmeny posunúť do projektu. Ale správca (vlastník projektu) alebo hlavný tím musí zvážiť vaše zmeny pred ich zlúčením s "hlavnou" vetvou projektu, takže v skutočnosti žiadate rozhodnutie o zmene od správcu.
+
+Pull request je miesto, kde môžete porovnať a diskutovať o rozdieloch zavedených vo vetve pomocou recenzií, komentárov, integrovaných testov a ďalších nástrojov. Dobrý pull request dodržiava približne rovnaké pravidlá ako správa commitov. Môžete pridať odkaz na problém v issue trackeri, napríklad keď vaša práca rieši konkrétny problém. Toto sa robí použitím `#` nasledovaného číslom vášho problému. Napríklad `#97`.
+
+🤞Držte palce, aby všetky kontroly prešli a vlastník(y) projektu zlúčili vaše zmeny do projektu🤞
+
+Aktualizujte svoju aktuálnu lokálnu pracovnú vetvu všetkými novými commitmi z príslušnej vzdialenej vetvy na GitHube:
+
+`git pull`
+
+## Ako prispievať do open source
+
+Najprv si nájdime repozitár (alebo **repo**) na GitHube, ktorý vás zaujíma a do ktorého by ste chceli prispieť zmenou. Budete chcieť skopírovať jeho obsah na svoj počítač.
+
+✅ Dobrý spôsob, ako nájsť repozitáre vhodné pre začiatočníkov, je [vyhľadávanie podľa tagu 'good-first-issue'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/).
+
+![Skopírovanie repozitára lokálne](../../../../translated_images/clone_repo.5085c48d666ead57664f050d806e325d7f883be6838c821e08bc823ab7c66665.sk.png)
+
+Existuje niekoľko spôsobov, ako skopírovať kód. Jedným zo spôsobov je "klonovanie" obsahu repozitára pomocou HTTPS, SSH alebo GitHub CLI (Command Line Interface).
+
+Otvorte svoj terminál a klonujte repozitár takto:
+`git clone https://github.com/ProjectURL`
+
+Ak chcete pracovať na projekte, prepnite sa do správneho priečinka:
+`cd ProjectURL`
+
+Celý projekt môžete otvoriť aj pomocou [Codespaces](https://github.com/features/codespaces), integrovaného editora kódu / cloudového vývojového prostredia GitHubu, alebo [GitHub Desktop](https://desktop.github.com/).
+
+Nakoniec si môžete stiahnuť kód v zbalenom priečinku.
+
+### Niekoľko ďalších zaujímavých vecí o GitHube
+
+Na GitHube môžete "hviezdičkovať", sledovať a/alebo "forkovať" akýkoľvek verejný repozitár. Svoje hviezdičkované repozitáre nájdete v rozbaľovacom menu v pravom hornom rohu. Je to ako záložky, ale pre kód.
+
+Projekty majú issue tracker, väčšinou na GitHube v záložke "Issues", pokiaľ nie je uvedené inak, kde ľudia diskutujú o problémoch súvisiacich s projektom. A záložka Pull Requests je miesto, kde ľudia diskutujú a recenzujú zmeny, ktoré sú v procese.
+
+Projekty môžu mať diskusie vo fórach, mailing listoch alebo chatovacích kanáloch ako Slack, Discord alebo IRC.
+
+✅ Prezrite si svoj nový GitHub repozitár a vyskúšajte niekoľko vecí, ako napríklad úpravu nastavení, pridanie informácií do repozitára a vytvorenie projektu (napríklad Kanban tabuľky). Je tu veľa možností!
+
+---
+
+## 🚀 Výzva
+
+Spojte sa s priateľom a pracujte na kóde jeden druhého. Vytvorte projekt spoločne, forkujte kód, vytvorte vetvy a zlúčte zmeny.
+
+## Kvíz po prednáške
+[Kvíz po prednáške](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/4)
+
+## Recenzia a samostatné štúdium
+
+Prečítajte si viac o [prispievaní do open source softvéru](https://opensource.guide/how-to-contribute/#how-to-submit-a-contribution).
+
+[Git cheatsheet](https://training.github.com/downloads/github-git-cheat-sheet/).
+
+Cvičte, cvičte, cvičte. GitHub má skvelé vzdelávacie cesty dostupné cez [skills.github.com](https://skills.github.com):
+
+- [Prvý týždeň na GitHube](https://skills.github.com/#first-week-on-github)
+
+Nájdete tam aj pokročilejšie kurzy.
+
+## Zadanie
+
+Dokončite [kurz Prvý týždeň na GitHube](https://skills.github.com/#first-week-on-github)
+
+---
+
+**Upozornenie**:  
+Tento dokument bol preložený pomocou služby na automatický preklad [Co-op Translator](https://github.com/Azure/co-op-translator). Hoci sa snažíme o presnosť, upozorňujeme, že automatické preklady môžu obsahovať chyby alebo nepresnosti. Pôvodný dokument v jeho pôvodnom jazyku by mal byť považovaný za autoritatívny zdroj. Pre kritické informácie sa odporúča profesionálny ľudský preklad. Nenesieme zodpovednosť za akékoľvek nedorozumenia alebo nesprávne interpretácie vyplývajúce z použitia tohto prekladu.
\ No newline at end of file
diff --git a/translations/sk/1-getting-started-lessons/3-accessibility/README.md b/translations/sk/1-getting-started-lessons/3-accessibility/README.md
new file mode 100644
index 00000000..61dfc178
--- /dev/null
+++ b/translations/sk/1-getting-started-lessons/3-accessibility/README.md
@@ -0,0 +1,176 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "e4cd5b1faed4adab5acf720f82798003",
+  "translation_date": "2025-08-27T23:02:18+00:00",
+  "source_file": "1-getting-started-lessons/3-accessibility/README.md",
+  "language_code": "sk"
+}
+-->
+# Vytváranie prístupných webových stránok
+
+![Všetko o prístupnosti](../../../../translated_images/webdev101-a11y.8ef3025c858d897a403a1a42c0897c76e11b724d9a8a0c0578dd4316f7507622.sk.png)
+> Sketchnote od [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Kvíz pred prednáškou
+[Kvíz pred prednáškou](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/5)
+
+> Sila webu spočíva v jeho univerzálnosti. Prístup pre každého, bez ohľadu na zdravotné postihnutie, je nevyhnutným aspektom.
+>
+> \- Sir Timothy Berners-Lee, riaditeľ W3C a vynálezca World Wide Web
+
+Tento citát dokonale zdôrazňuje dôležitosť vytvárania prístupných webových stránok. Aplikácia, ktorá nie je prístupná pre všetkých, je zo svojej podstaty vylučujúca. Ako weboví vývojári by sme mali mať prístupnosť vždy na pamäti. Ak sa na to zameriate už od začiatku, budete na dobrej ceste zabezpečiť, že všetci budú mať prístup k stránkam, ktoré vytvoríte. V tejto lekcii sa naučíte o nástrojoch, ktoré vám môžu pomôcť zabezpečiť prístupnosť vašich webových zdrojov, a o tom, ako stavať s ohľadom na prístupnosť.
+
+> Túto lekciu si môžete prejsť na [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/accessibility/?WT.mc_id=academic-77807-sagibbon)!
+
+## Nástroje na použitie
+
+### Čítačky obrazovky
+
+Jedným z najznámejších nástrojov na prístupnosť sú čítačky obrazovky.
+
+[Čítačky obrazovky](https://en.wikipedia.org/wiki/Screen_reader) sú bežne používané klientmi so zrakovým postihnutím. Tak ako venujeme čas tomu, aby prehliadač správne sprostredkoval informácie, ktoré chceme zdieľať, musíme zabezpečiť, aby to isté dokázala aj čítačka obrazovky.
+
+V základnej podobe čítačka obrazovky číta stránku odhora nadol nahlas. Ak je vaša stránka čisto textová, čítačka sprostredkuje informácie podobne ako prehliadač. Samozrejme, webové stránky zriedka obsahujú iba text; obsahujú odkazy, grafiku, farby a ďalšie vizuálne prvky. Je potrebné dbať na to, aby tieto informácie boli čítačkou obrazovky správne interpretované.
+
+Každý webový vývojár by sa mal oboznámiť s čítačkou obrazovky. Ako bolo uvedené vyššie, je to klient, ktorý vaši používatelia využívajú. Rovnako ako poznáte fungovanie prehliadača, mali by ste sa naučiť, ako funguje čítačka obrazovky. Našťastie sú čítačky obrazovky zabudované vo väčšine operačných systémov.
+
+Niektoré prehliadače majú tiež zabudované nástroje a rozšírenia, ktoré dokážu čítať text nahlas alebo poskytovať základné navigačné funkcie, ako napríklad [tieto nástroje zamerané na prístupnosť v prehliadači Edge](https://support.microsoft.com/help/4000734/microsoft-edge-accessibility-features). Tieto nástroje sú tiež dôležité, ale fungujú veľmi odlišne od čítačiek obrazovky a nemali by byť považované za nástroje na testovanie čítačiek obrazovky.
+
+✅ Vyskúšajte čítačku obrazovky a čítačku textu v prehliadači. Vo Windows je predvolene zahrnutý [Narrator](https://support.microsoft.com/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c172f109bdb1/?WT.mc_id=academic-77807-sagibbon), a môžete si nainštalovať aj [JAWS](https://webaim.org/articles/jaws/) alebo [NVDA](https://www.nvaccess.org/about-nvda/). Na macOS a iOS je predvolene nainštalovaný [VoiceOver](https://support.apple.com/guide/voiceover/welcome/10).
+
+### Priblíženie (Zoom)
+
+Ďalším nástrojom, ktorý bežne používajú ľudia so zrakovým postihnutím, je priblíženie. Najzákladnejší typ priblíženia je statický zoom, ovládaný pomocou `Control + znamienko plus (+)` alebo znížením rozlíšenia obrazovky. Tento typ priblíženia spôsobí, že sa celá stránka zväčší, takže použitie [responzívneho dizajnu](https://developer.mozilla.org/docs/Learn/CSS/CSS_layout/Responsive_Design) je dôležité na zabezpečenie dobrého používateľského zážitku pri zvýšených úrovniach priblíženia.
+
+Iný typ priblíženia využíva špecializovaný softvér na zväčšenie jednej oblasti obrazovky a posúvanie, podobne ako pri použití skutočnej lupy. Vo Windows je zabudovaný [Magnifier](https://support.microsoft.com/windows/use-magnifier-to-make-things-on-the-screen-easier-to-see-414948ba-8b1c-d3bd-8615-0e5e32204198), a [ZoomText](https://www.freedomscientific.com/training/zoomtext/getting-started/) je softvér tretích strán na zväčšovanie s viacerými funkciami a väčšou používateľskou základňou. Na macOS a iOS je zabudovaný softvér na zväčšovanie s názvom [Zoom](https://www.apple.com/accessibility/mac/vision/).
+
+### Kontrola kontrastu
+
+Farby na webových stránkach musia byť starostlivo vybrané, aby vyhovovali potrebám používateľov s farbosleposťou alebo ľudí, ktorí majú problémy so zrakom pri nízkom kontraste farieb.
+
+✅ Otestujte webovú stránku, ktorú radi používate, z hľadiska použitia farieb pomocou rozšírenia prehliadača, ako je [kontrola kontrastu WCAG](https://microsoftedge.microsoft.com/addons/detail/wcag-color-contrast-check/idahaggnlnekelhgplklhfpchbfdmkjp?hl=en-US&WT.mc_id=academic-77807-sagibbon). Čo ste sa naučili?
+
+### Lighthouse
+
+V oblasti nástrojov pre vývojárov vo vašom prehliadači nájdete nástroj Lighthouse. Tento nástroj je dôležitý na získanie prvého pohľadu na prístupnosť (ako aj iné analýzy) webovej stránky. Aj keď je dôležité nespoliehať sa výlučne na Lighthouse, skóre 100 % je veľmi užitočné ako základ.
+
+✅ Nájdite Lighthouse v paneli nástrojov pre vývojárov vo vašom prehliadači a spustite analýzu na akejkoľvek stránke. Čo ste zistili?
+
+## Navrhovanie s ohľadom na prístupnosť
+
+Prístupnosť je pomerne rozsiahla téma. Aby sme vám pomohli, existuje množstvo dostupných zdrojov.
+
+- [Accessible U - University of Minnesota](https://accessibility.umn.edu/your-role/web-developers)
+
+Aj keď nebudeme schopní pokryť každý aspekt vytvárania prístupných stránok, nižšie sú uvedené niektoré základné princípy, ktoré budete chcieť implementovať. Navrhnúť prístupnú stránku od začiatku je **vždy** jednoduchšie, ako sa vracať k existujúcej stránke a robiť ju prístupnou.
+
+## Dobré princípy zobrazenia
+
+### Bezpečné farebné palety
+
+Ľudia vidia svet rôznymi spôsobmi, a to zahŕňa aj farby. Pri výbere farebnej schémy pre vašu stránku by ste mali zabezpečiť, že bude prístupná pre všetkých. Skvelým [nástrojom na generovanie farebných paliet je Color Safe](http://colorsafe.co/).
+
+✅ Identifikujte webovú stránku, ktorá má veľmi problematické použitie farieb. Prečo?
+
+### Používajte správne HTML
+
+Pomocou CSS a JavaScriptu je možné vytvoriť akýkoľvek prvok, ktorý vyzerá ako akýkoľvek typ ovládacieho prvku. `<span>` by sa mohol použiť na vytvorenie `<button>`, a `<b>` by sa mohol stať hypertextovým odkazom. Aj keď by to mohlo byť považované za jednoduchšie na štýlovanie, čítačke obrazovky to nič nehovorí. Používajte vhodné HTML pri vytváraní ovládacích prvkov na stránke. Ak chcete hypertextový odkaz, použite `<a>`. Používanie správneho HTML pre správny ovládací prvok sa nazýva používanie sémantického HTML.
+
+✅ Prejdite na akúkoľvek webovú stránku a zistite, či dizajnéri a vývojári používajú HTML správne. Nájdete tlačidlo, ktoré by malo byť odkazom? Tip: kliknite pravým tlačidlom myši a vyberte 'Zobraziť zdroj stránky' vo vašom prehliadači, aby ste si pozreli základný kód.
+
+### Vytvorte popisnú hierarchiu nadpisov
+
+Používatelia čítačiek obrazovky [veľmi závisia od nadpisov](https://webaim.org/projects/screenreadersurvey8/#finding) na vyhľadávanie informácií a navigáciu na stránke. Písanie popisného obsahu nadpisov a používanie sémantických značiek nadpisov je dôležité pre vytvorenie ľahko navigovateľnej stránky pre používateľov čítačiek obrazovky.
+
+### Používajte dobré vizuálne stopy
+
+CSS ponúka úplnú kontrolu nad vzhľadom akéhokoľvek prvku na stránke. Môžete vytvoriť textové polia bez obrysu alebo hypertextové odkazy bez podčiarknutia. Bohužiaľ, odstránenie týchto stôp môže sťažiť niekomu, kto na nich závisí, rozpoznať typ ovládacieho prvku.
+
+## Dôležitosť textu odkazov
+
+Hypertextové odkazy sú jadrom navigácie na webe. Preto je zabezpečenie, aby čítačka obrazovky správne čítala odkazy, kľúčové pre umožnenie navigácie všetkým používateľom.
+
+### Čítačky obrazovky a odkazy
+
+Ako by ste očakávali, čítačky obrazovky čítajú text odkazov rovnakým spôsobom, ako čítajú akýkoľvek iný text na stránke. S týmto na pamäti by text uvedený nižšie mohol pôsobiť úplne prijateľne.
+
+> Malý tučniak, niekedy známy ako vílí tučniak, je najmenší tučniak na svete. [Kliknite sem](https://en.wikipedia.org/wiki/Little_penguin) pre viac informácií.
+
+> Malý tučniak, niekedy známy ako vílí tučniak, je najmenší tučniak na svete. Navštívte https://en.wikipedia.org/wiki/Little_penguin pre viac informácií.
+
+> **NOTE** Ako sa chystáte čítať, nikdy by ste nemali vytvárať odkazy, ktoré vyzerajú ako vyššie uvedené.
+
+Pamätajte, že čítačky obrazovky sú iné rozhranie ako prehliadače s inou sadou funkcií.
+
+### Problém s použitím URL
+
+Čítačky obrazovky čítajú text. Ak sa v texte objaví URL, čítačka obrazovky prečíta URL. Vo všeobecnosti URL neobsahuje zmysluplné informácie a môže znieť nepríjemne. Možno ste to zažili, ak váš telefón niekedy nahlas prečítal textovú správu s URL.
+
+### Problém s "kliknite sem"
+
+Čítačky obrazovky majú tiež schopnosť čítať iba hypertextové odkazy na stránke, podobne ako by vidiaci človek prechádzal stránku a hľadal odkazy. Ak je text odkazu vždy "kliknite sem", všetko, čo používateľ bude počuť, je "kliknite sem, kliknite sem, kliknite sem, kliknite sem, kliknite sem, ..." Všetky odkazy sú teraz nerozoznateľné.
+
+### Dobrý text odkazu
+
+Dobrý text odkazu stručne opisuje, čo je na druhej strane odkazu. V uvedenom príklade o malých tučniakoch odkazuje odkaz na stránku Wikipédie o tomto druhu. Fráza *malý tučniak* by bola ideálnym textom odkazu, pretože jasne uvádza, čo sa niekto dozvie, ak klikne na odkaz - malý tučniak.
+
+> [Malý tučniak](https://en.wikipedia.org/wiki/Little_penguin), niekedy známy ako vílí tučniak, je najmenší tučniak na svete.
+
+✅ Surfujte po webe niekoľko minút a nájdite stránky, ktoré používajú nejasné stratégie odkazovania. Porovnajte ich s inými, lepšie prepojenými stránkami. Čo ste sa naučili?
+
+#### Poznámky k vyhľadávačom
+
+Ako bonus za zabezpečenie prístupnosti vašej stránky pomôžete aj vyhľadávačom navigovať na vašej stránke. Vyhľadávače používajú text odkazov na pochopenie tém stránok. Takže používanie dobrého textu odkazov pomáha všetkým!
+
+### ARIA
+
+Predstavte si nasledujúcu stránku:
+
+| Produkt      | Popis             | Objednávka   |
+| ------------ | ----------------- | ------------ |
+| Widget       | [Popis](../../../../1-getting-started-lessons/3-accessibility/')      | [Objednávka](../../../../1-getting-started-lessons/3-accessibility/') |
+| Super widget | [Popis](../../../../1-getting-started-lessons/3-accessibility/')      | [Objednávka](../../../../1-getting-started-lessons/3-accessibility/') |
+
+V tomto príklade dáva duplikovanie textu popisu a objednávky zmysel pre niekoho, kto používa prehliadač. Avšak niekto, kto používa čítačku obrazovky, by počul iba slová *popis* a *objednávka* opakovane bez kontextu.
+
+Na podporu týchto typov scenárov HTML podporuje sadu atribútov známych ako [Accessible Rich Internet Applications (ARIA)](https://developer.mozilla.org/docs/Web/Accessibility/ARIA). Tieto atribúty vám umožňujú poskytnúť čítačkám obrazovky ďalšie informácie.
+
+> **NOTE**: Rovnako ako mnohé aspekty HTML, podpora prehliadačov a čítačiek obrazovky sa môže líšiť. Väčšina hlavných klientov však podporuje atribúty ARIA.
+
+Môžete použiť `aria-label` na popis odkazu, keď formát stránky neumožňuje iný spôsob. Popis pre widget by mohol byť nastavený ako
+
+``` html
+<a href="#" aria-label="Widget description">description</a>
+```
+
+✅ Vo všeobecnosti používanie sémantického označenia, ako je opísané vyššie, prevažuje nad používaním ARIA, ale niekedy neexistuje sémantický ekvivalent pre rôzne HTML widgety. Dobrým príkladom je strom. Neexistuje HTML ekvivalent pre strom, takže identifikujete generický `<div>` pre tento prvok s vhodnou rolou a hodnotami ARIA. [Dokumentácia MDN o ARIA](https://developer.mozilla.org/docs/Web/Accessibility/ARIA) obsahuje viac užitočných informácií.
+
+```html
+<h2 id="tree-label">File Viewer</h2>
+<div role="tree" aria-labelledby="tree-label">
+  <div role="treeitem" aria-expanded="false" tabindex="0">Uploads</div>
+</div>
+```
+
+## Obrázky
+
+Je samozrejmé, že čítačky obrazovky nedokážu automaticky prečítať, čo je na obrázku. Zabezpečenie prístupnosti obrázkov nevyžaduje veľa práce - práve na to slúži atribút `alt`. Všetky významné obrázky by mali mať `alt`, ktorý popisuje, čo zobrazujú. Obrázky, ktoré sú čisto dekoratívne, by mali mať atribút `alt` nastavený na prázdny reťazec: `alt=""`. Tým sa zabráni tomu, aby čítačky obrazovky zbytočne oznamovali dekoratívny obrázok.
+
+✅ Ako by ste očakávali, vyhľadávače tiež nedokážu pochopiť, čo je na obrázku. Používajú tiež text alt. Takže opäť, zabezpečenie prístupnosti vašej stránky prináša ďalšie výhody!
+
+## Klávesnica
+
+Niektorí používatelia nemôžu používať myš alebo trackpad a namiesto toho sa spoliehajú na interakcie pomocou klávesnice, aby prechádzali z jedného prvku na druhý. Je dôležité, aby vaša webová stránka prezentovala váš obsah v logickom poradí, aby používateľ klávesnice mohol pristupovať ku každému interaktívnemu prvku, keď sa posúva dokumentom. Ak vytvárate svoje webové stránky so sémantickým označením a používate CSS na štýlovanie ich vizuálneho roz
+Mnohé vlády majú zákony týkajúce sa požiadaviek na prístupnosť. Preštudujte si zákony o prístupnosti vo vašej krajine. Čo je pokryté a čo nie? Príkladom je [táto vládna webová stránka](https://accessibility.blog.gov.uk/).
+
+## Zadanie
+
+[Analyzujte neprístupnú webovú stránku](assignment.md)
+
+Kredity: [Turtle Ipsum](https://github.com/Instrument/semantic-html-sample) od Instrument
+
+---
+
+**Upozornenie**:  
+Tento dokument bol preložený pomocou služby AI prekladu [Co-op Translator](https://github.com/Azure/co-op-translator). Aj keď sa snažíme o presnosť, prosím, berte na vedomie, že automatizované preklady môžu obsahovať chyby alebo nepresnosti. Pôvodný dokument v jeho pôvodnom jazyku by mal byť považovaný za autoritatívny zdroj. Pre kritické informácie sa odporúča profesionálny ľudský preklad. Nie sme zodpovední za žiadne nedorozumenia alebo nesprávne interpretácie vyplývajúce z použitia tohto prekladu.
\ No newline at end of file
diff --git a/translations/sk/1-getting-started-lessons/3-accessibility/assignment.md b/translations/sk/1-getting-started-lessons/3-accessibility/assignment.md
new file mode 100644
index 00000000..369b6a2d
--- /dev/null
+++ b/translations/sk/1-getting-started-lessons/3-accessibility/assignment.md
@@ -0,0 +1,28 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "a258597a194e77d4fd469b3cd976b29e",
+  "translation_date": "2025-08-27T23:04:55+00:00",
+  "source_file": "1-getting-started-lessons/3-accessibility/assignment.md",
+  "language_code": "sk"
+}
+-->
+# Analyzujte neprístupnú stránku
+
+## Pokyny
+
+Identifikujte webovú stránku, o ktorej si myslíte, že NIE je prístupná, a vytvorte akčný plán na zlepšenie jej prístupnosti. Vašou prvou úlohou bude identifikovať túto stránku, podrobne opísať spôsoby, akými si myslíte, že je neprístupná bez použitia analytických nástrojov, a následne ju podrobiť analýze pomocou Lighthouse. Zachyťte výsledky tejto analýzy vo formáte PDF a vypracujte podrobný plán s minimálne desiatimi bodmi, ktoré ukazujú, ako by sa stránka mohla zlepšiť.
+
+## Tabuľka na testovanie prístupnosti stránky
+
+| Kritérium | Vynikajúce | Dostatočné | Potrebné zlepšenie |
+|-----------|------------|------------|--------------------|
+|           | chýba <10 % požadovaného | chýba 20 % požadovaného | chýba 50 % požadovaného |
+
+----
+Študentská správa: obsahuje odseky o tom, ako je stránka neprístupná, správu Lighthouse zachytenú vo formáte PDF, zoznam desiatich bodov na zlepšenie s podrobnosťami o tom, ako ich zlepšiť
+
+---
+
+**Upozornenie**:  
+Tento dokument bol preložený pomocou služby AI prekladu [Co-op Translator](https://github.com/Azure/co-op-translator). Aj keď sa snažíme o presnosť, prosím, berte na vedomie, že automatizované preklady môžu obsahovať chyby alebo nepresnosti. Pôvodný dokument v jeho rodnom jazyku by mal byť považovaný za autoritatívny zdroj. Pre kritické informácie sa odporúča profesionálny ľudský preklad. Nie sme zodpovední za žiadne nedorozumenia alebo nesprávne interpretácie vyplývajúce z použitia tohto prekladu.
\ No newline at end of file
diff --git a/translations/sk/1-getting-started-lessons/README.md b/translations/sk/1-getting-started-lessons/README.md
new file mode 100644
index 00000000..fb799ca4
--- /dev/null
+++ b/translations/sk/1-getting-started-lessons/README.md
@@ -0,0 +1,31 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "04683f4cfa46004179b0404b89a3065c",
+  "translation_date": "2025-08-27T22:58:35+00:00",
+  "source_file": "1-getting-started-lessons/README.md",
+  "language_code": "sk"
+}
+-->
+# Začíname s webovým vývojom
+
+V tejto časti učebného plánu sa zoznámite s konceptmi, ktoré nie sú založené na projektoch, ale sú dôležité pre to, aby ste sa stali profesionálnym vývojárom.
+
+### Témy
+
+1. [Úvod do programovacích jazykov a nástrojov](1-intro-to-programming-languages/README.md)
+2. [Úvod do GitHubu](2-github-basics/README.md)
+3. [Základy prístupnosti](3-accessibility/README.md)
+
+### Kredity
+
+Úvod do programovacích jazykov a nástrojov bol napísaný s ♥️ [Jasmine Greenaway](https://twitter.com/paladique)
+
+Úvod do GitHubu bol napísaný s ♥️ [Floor Drees](https://twitter.com/floordrees)
+
+Základy prístupnosti boli napísané s ♥️ [Christopher Harrison](https://twitter.com/geektrainer)
+
+---
+
+**Upozornenie**:  
+Tento dokument bol preložený pomocou služby AI prekladu [Co-op Translator](https://github.com/Azure/co-op-translator). Hoci sa snažíme o presnosť, prosím, berte na vedomie, že automatizované preklady môžu obsahovať chyby alebo nepresnosti. Pôvodný dokument v jeho rodnom jazyku by mal byť považovaný za autoritatívny zdroj. Pre kritické informácie sa odporúča profesionálny ľudský preklad. Nenesieme zodpovednosť za akékoľvek nedorozumenia alebo nesprávne interpretácie vyplývajúce z použitia tohto prekladu.
\ No newline at end of file
diff --git a/translations/sk/2-js-basics/1-data-types/README.md b/translations/sk/2-js-basics/1-data-types/README.md
new file mode 100644
index 00000000..1e1a11eb
--- /dev/null
+++ b/translations/sk/2-js-basics/1-data-types/README.md
@@ -0,0 +1,215 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "fc6aef8ecfdd5b0ad2afa6e6ba52bfde",
+  "translation_date": "2025-08-27T22:39:15+00:00",
+  "source_file": "2-js-basics/1-data-types/README.md",
+  "language_code": "sk"
+}
+-->
+# Základy JavaScriptu: Dátové typy
+
+![Základy JavaScriptu - Dátové typy](../../../../translated_images/webdev101-js-datatypes.4cc470179730702c756480d3ffa46507f746e5975ebf80f99fdaaf1cff09a7f4.sk.png)
+> Sketchnote od [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Kvíz pred prednáškou
+[Kvíz pred prednáškou](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/7)
+
+Táto lekcia pokrýva základy JavaScriptu, jazyka, ktorý poskytuje interaktivitu na webe.
+
+> Túto lekciu si môžete prejsť na [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-variables/?WT.mc_id=academic-77807-sagibbon)!
+
+[![Premenné](https://img.youtube.com/vi/JNIXfGiDWM8/0.jpg)](https://youtube.com/watch?v=JNIXfGiDWM8 "Premenné v JavaScripte")
+
+[![Dátové typy v JavaScripte](https://img.youtube.com/vi/AWfA95eLdq8/0.jpg)](https://youtube.com/watch?v=AWfA95eLdq8 "Dátové typy v JavaScripte")
+
+> 🎥 Kliknite na obrázky vyššie pre videá o premenných a dátových typoch
+
+Začnime s premennými a dátovými typmi, ktoré ich napĺňajú!
+
+## Premenné
+
+Premenné ukladajú hodnoty, ktoré môžu byť použité a zmenené v priebehu vášho kódu.
+
+Vytvorenie a **deklarácia** premennej má nasledujúcu syntax **[kľúčové slovo] [názov]**. Skladá sa z dvoch častí:
+
+- **Kľúčové slovo**. Kľúčové slová môžu byť `let` alebo `var`.  
+
+✅ Kľúčové slovo `let` bolo zavedené v ES6 a poskytuje premenným tzv. _blokový rozsah_. Odporúča sa používať `let` namiesto `var`. Blokové rozsahy si podrobnejšie vysvetlíme v ďalších častiach.
+- **Názov premennej**, ktorý si sami zvolíte.
+
+### Úloha - práca s premennými
+
+1. **Deklarujte premennú**. Deklarujme premennú pomocou kľúčového slova `let`:
+
+    ```javascript
+    let myVariable;
+    ```
+
+   `myVariable` bola teraz deklarovaná pomocou kľúčového slova `let`. Momentálne nemá žiadnu hodnotu.
+
+1. **Priraďte hodnotu**. Uložte hodnotu do premennej pomocou operátora `=`, za ktorým nasleduje očakávaná hodnota.
+
+    ```javascript
+    myVariable = 123;
+    ```
+
+   > Poznámka: použitie `=` v tejto lekcii znamená, že používame "priraďovací operátor", ktorý slúži na nastavenie hodnoty premennej. Neznamená rovnosť.
+
+   `myVariable` bola teraz *inicializovaná* s hodnotou 123.
+
+1. **Refaktorujte**. Nahraďte svoj kód nasledujúcim príkazom.
+
+    ```javascript
+    let myVariable = 123;
+    ```
+
+    Vyššie uvedené sa nazýva _explicitná inicializácia_, keď je premenná deklarovaná a zároveň jej je priradená hodnota.
+
+1. **Zmeňte hodnotu premennej**. Zmeňte hodnotu premennej nasledujúcim spôsobom:
+
+   ```javascript
+   myVariable = 321;
+   ```
+
+   Po deklarovaní premennej môžete jej hodnotu kedykoľvek v kóde zmeniť pomocou operátora `=` a novej hodnoty.
+
+   ✅ Vyskúšajte to! Môžete písať JavaScript priamo vo svojom prehliadači. Otvorte okno prehliadača a prejdite do Nástrojov pre vývojárov. V konzole nájdete výzvu; napíšte `let myVariable = 123`, stlačte Enter a potom napíšte `myVariable`. Čo sa stane? Poznámka: o týchto konceptoch sa dozviete viac v ďalších lekciách.
+
+## Konštanty
+
+Deklarácia a inicializácia konštanty nasleduje rovnaké koncepty ako premenná, s výnimkou použitia kľúčového slova `const`. Konštanty sa zvyčajne deklarujú veľkými písmenami.
+
+```javascript
+const MY_VARIABLE = 123;
+```
+
+Konštanty sú podobné premenným, s dvoma výnimkami:
+
+- **Musí mať hodnotu**. Konštanty musia byť inicializované, inak pri spustení kódu dôjde k chybe.
+- **Referenciu nie je možné zmeniť**. Referenciu konštanty nie je možné zmeniť po inicializácii, inak pri spustení kódu dôjde k chybe. Pozrime sa na dva príklady:
+   - **Jednoduchá hodnota**. Nasledujúce NIE JE povolené:
+   
+      ```javascript
+      const PI = 3;
+      PI = 4; // not allowed
+      ```
+ 
+   - **Referenciu objektu nie je možné zmeniť**. Nasledujúce NIE JE povolené.
+   
+      ```javascript
+      const obj = { a: 3 };
+      obj = { b: 5 } // not allowed
+      ```
+
+    - **Hodnotu objektu je možné zmeniť**. Nasledujúce JE povolené:
+    
+      ```javascript
+      const obj = { a: 3 };
+      obj.a = 5;  // allowed
+      ```
+
+      Vyššie meníte hodnotu objektu, ale nie samotnú referenciu, čo je povolené.
+
+   > Poznámka: `const` znamená, že referencia je chránená pred priradením novej hodnoty. Hodnota však nie je _nemenná_ a môže sa zmeniť, najmä ak ide o zložitú štruktúru, ako je objekt.
+
+## Dátové typy
+
+Premenné môžu ukladať rôzne typy hodnôt, ako sú čísla a text. Tieto rôzne typy hodnôt sú známe ako **dátové typy**. Dátové typy sú dôležitou súčasťou vývoja softvéru, pretože pomáhajú vývojárom rozhodovať, ako by mal byť kód napísaný a ako by mal softvér fungovať. Navyše, niektoré dátové typy majú jedinečné vlastnosti, ktoré pomáhajú transformovať alebo extrahovať ďalšie informácie z hodnoty.
+
+✅ Dátové typy sa tiež označujú ako primitíva JavaScriptu, pretože sú to najnižšie úrovne dátových typov poskytovaných jazykom. Existuje 7 primitívnych dátových typov: string, number, bigint, boolean, undefined, null a symbol. Skúste si predstaviť, čo každý z týchto primitív môže predstavovať. Čo je `zebra`? A čo `0`? `true`?
+
+### Čísla
+
+V predchádzajúcej časti bola hodnota `myVariable` dátového typu číslo.
+
+`let myVariable = 123;`
+
+Premenné môžu ukladať všetky typy čísel, vrátane desatinných alebo záporných čísel. Čísla môžu byť tiež použité s aritmetickými operátormi, ktoré sú pokryté v [nasledujúcej časti](../../../../2-js-basics/1-data-types).
+
+### Aritmetické operátory
+
+Existuje niekoľko typov operátorov na vykonávanie aritmetických funkcií, niektoré z nich sú uvedené nižšie:
+
+| Symbol | Popis                                                                  | Príklad                          |
+| ------ | ---------------------------------------------------------------------- | -------------------------------- |
+| `+`    | **Sčítanie**: Vypočíta súčet dvoch čísel                               | `1 + 2 //očakávaný výsledok je 3`   |
+| `-`    | **Odčítanie**: Vypočíta rozdiel dvoch čísel                            | `1 - 2 //očakávaný výsledok je -1`  |
+| `*`    | **Násobenie**: Vypočíta súčin dvoch čísel                              | `1 * 2 //očakávaný výsledok je 2`   |
+| `/`    | **Delenie**: Vypočíta podiel dvoch čísel                               | `1 / 2 //očakávaný výsledok je 0.5` |
+| `%`    | **Zvyšok**: Vypočíta zvyšok z delenia dvoch čísel                      | `1 % 2 //očakávaný výsledok je 1`   |
+
+✅ Vyskúšajte to! Skúste aritmetickú operáciu v konzole vášho prehliadača. Prekvapili vás výsledky?
+
+### Reťazce
+
+Reťazce sú sady znakov, ktoré sa nachádzajú medzi jednoduchými alebo dvojitými úvodzovkami.
+
+- `'Toto je reťazec'`
+- `"Toto je tiež reťazec"`
+- `let myString = 'Toto je hodnota reťazca uložená v premennej';`
+
+Pamätajte, že pri písaní reťazca musíte použiť úvodzovky, inak JavaScript predpokladá, že ide o názov premennej.
+
+### Formátovanie reťazcov
+
+Reťazce sú textové a občas budú vyžadovať formátovanie.
+
+Na **zreťazenie** dvoch alebo viacerých reťazcov, teda ich spojenie, použite operátor `+`.
+
+```javascript
+let myString1 = "Hello";
+let myString2 = "World";
+
+myString1 + myString2 + "!"; //HelloWorld!
+myString1 + " " + myString2 + "!"; //Hello World!
+myString1 + ", " + myString2 + "!"; //Hello, World!
+
+```
+
+✅ Prečo v JavaScripte `1 + 1 = 2`, ale `'1' + '1' = 11`? Zamyslite sa nad tým. A čo `'1' + 1`?
+
+**Šablónové literály** sú ďalším spôsobom formátovania reťazcov, ale namiesto úvodzoviek sa používa spätný apostrof. Čokoľvek, čo nie je obyčajný text, musí byť umiestnené do zátvoriek `${ }`. To zahŕňa aj premenné, ktoré môžu byť reťazcami.
+
+```javascript
+let myString1 = "Hello";
+let myString2 = "World";
+
+`${myString1} ${myString2}!` //Hello World!
+`${myString1}, ${myString2}!` //Hello, World!
+```
+
+Svoje formátovacie ciele môžete dosiahnuť ktoroukoľvek metódou, ale šablónové literály budú rešpektovať akékoľvek medzery a zalomenia riadkov.
+
+✅ Kedy by ste použili šablónový literál namiesto obyčajného reťazca?
+
+### Booleovské hodnoty
+
+Booleovské hodnoty môžu mať iba dve hodnoty: `true` alebo `false`. Booleovské hodnoty môžu pomôcť rozhodnúť, ktoré riadky kódu by sa mali spustiť, keď sú splnené určité podmienky. V mnohých prípadoch [operátory](../../../../2-js-basics/1-data-types) pomáhajú nastaviť hodnotu booleovskej premennej a často si všimnete a napíšete premenné, ktoré sú inicializované alebo ich hodnoty sú aktualizované pomocou operátora.
+
+- `let myTrueBool = true`
+- `let myFalseBool = false`
+
+✅ Premenná môže byť považovaná za 'pravdivú', ak sa vyhodnotí na booleovskú hodnotu `true`. Zaujímavé je, že v JavaScripte sú [všetky hodnoty pravdivé, pokiaľ nie sú definované ako nepravdivé](https://developer.mozilla.org/docs/Glossary/Truthy).
+
+---
+
+## 🚀 Výzva
+
+JavaScript je známy svojimi prekvapivými spôsobmi, ako občas zaobchádza s dátovými typmi. Urobte si malý prieskum o týchto 'nástrahách'. Napríklad: citlivosť na veľké a malé písmená vás môže prekvapiť! Skúste toto vo svojej konzole: `let age = 1; let Age = 2; age == Age` (výsledok je `false` -- prečo?). Aké ďalšie nástrahy nájdete?
+
+## Kvíz po prednáške
+[Kvíz po prednáške](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/8)
+
+## Prehľad a samoštúdium
+
+Pozrite si [tento zoznam cvičení v JavaScripte](https://css-tricks.com/snippets/javascript/) a vyskúšajte jedno. Čo ste sa naučili?
+
+## Zadanie
+
+[Cvičenie na dátové typy](assignment.md)
+
+---
+
+**Upozornenie**:  
+Tento dokument bol preložený pomocou služby AI prekladu [Co-op Translator](https://github.com/Azure/co-op-translator). Hoci sa snažíme o presnosť, prosím, berte na vedomie, že automatizované preklady môžu obsahovať chyby alebo nepresnosti. Pôvodný dokument v jeho rodnom jazyku by mal byť považovaný za autoritatívny zdroj. Pre kritické informácie sa odporúča profesionálny ľudský preklad. Nie sme zodpovední za akékoľvek nedorozumenia alebo nesprávne interpretácie vyplývajúce z použitia tohto prekladu.
\ No newline at end of file
diff --git a/translations/sk/2-js-basics/1-data-types/assignment.md b/translations/sk/2-js-basics/1-data-types/assignment.md
new file mode 100644
index 00000000..d1713167
--- /dev/null
+++ b/translations/sk/2-js-basics/1-data-types/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "3869244ceda606c4969d8cdd82679867",
+  "translation_date": "2025-08-27T22:41:30+00:00",
+  "source_file": "2-js-basics/1-data-types/assignment.md",
+  "language_code": "sk"
+}
+-->
+# Cvičenie s dátovými typmi
+
+## Pokyny
+
+Predstavte si, že vytvárate nákupný košík. Napíšte dokumentáciu o dátových typoch, ktoré by ste potrebovali na dokončenie nákupného procesu. Ako ste dospeli k svojim rozhodnutiam?
+
+## Hodnotiace kritériá
+
+Kritérium | Vynikajúce | Dostatočné | Potrebuje zlepšenie
+--- | --- | --- | --- |
+||Šesť dátových typov je uvedených a podrobne preskúmaných, dokumentujúc ich použitie|Štyri dátové typy sú preskúmané|Dva dátové typy sú preskúmané|
+
+---
+
+**Upozornenie**:  
+Tento dokument bol preložený pomocou služby AI prekladu [Co-op Translator](https://github.com/Azure/co-op-translator). Aj keď sa snažíme o presnosť, prosím, berte na vedomie, že automatizované preklady môžu obsahovať chyby alebo nepresnosti. Pôvodný dokument v jeho pôvodnom jazyku by mal byť považovaný za autoritatívny zdroj. Pre kritické informácie sa odporúča profesionálny ľudský preklad. Nie sme zodpovední za akékoľvek nedorozumenia alebo nesprávne interpretácie vyplývajúce z použitia tohto prekladu.
\ No newline at end of file
diff --git a/translations/sk/2-js-basics/2-functions-methods/README.md b/translations/sk/2-js-basics/2-functions-methods/README.md
new file mode 100644
index 00000000..81729bca
--- /dev/null
+++ b/translations/sk/2-js-basics/2-functions-methods/README.md
@@ -0,0 +1,210 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "b4612bbb9ace984f374fcc80e3e035ad",
+  "translation_date": "2025-08-27T22:36:07+00:00",
+  "source_file": "2-js-basics/2-functions-methods/README.md",
+  "language_code": "sk"
+}
+-->
+# Základy JavaScriptu: Metódy a funkcie
+
+![Základy JavaScriptu - Funkcie](../../../../translated_images/webdev101-js-functions.be049c4726e94f8b7605c36330ac42eeb5cd8ed02bcdd60fdac778174d6cb865.sk.png)
+> Sketchnote od [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Kvíz pred prednáškou
+[Kvíz pred prednáškou](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/9)
+
+Keď premýšľame o písaní kódu, vždy chceme zabezpečiť, aby bol náš kód čitateľný. Aj keď to môže znieť protichodne, kód sa číta oveľa častejšie, než sa píše. Jedným z hlavných nástrojov v arzenáli vývojára na zabezpečenie udržiavateľného kódu je **funkcia**.
+
+[![Metódy a funkcie](https://img.youtube.com/vi/XgKsD6Zwvlc/0.jpg)](https://youtube.com/watch?v=XgKsD6Zwvlc "Metódy a funkcie")
+
+> 🎥 Kliknite na obrázok vyššie pre video o metódach a funkciách.
+
+> Túto lekciu si môžete prejsť na [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-functions/?WT.mc_id=academic-77807-sagibbon)!
+
+## Funkcie
+
+Funkcia je v podstate blok kódu, ktorý môžeme vykonať na požiadanie. To je ideálne pre situácie, keď potrebujeme vykonať rovnakú úlohu viackrát; namiesto duplicity logiky na viacerých miestach (čo by bolo ťažké aktualizovať, keď nastane čas), ju môžeme centralizovať na jednom mieste a zavolať ju vždy, keď potrebujeme operáciu vykonať - funkcie môžete dokonca volať z iných funkcií!
+
+Rovnako dôležité je schopnosť pomenovať funkciu. Aj keď sa to môže zdať triviálne, názov poskytuje rýchly spôsob dokumentovania časti kódu. Môžete si to predstaviť ako štítok na tlačidle. Ak kliknem na tlačidlo s nápisom "Zrušiť časovač", viem, že zastaví beh hodín.
+
+## Vytvorenie a volanie funkcie
+
+Syntax funkcie vyzerá nasledovne:
+
+```javascript
+function nameOfFunction() { // function definition
+ // function definition/body
+}
+```
+
+Ak by som chcel vytvoriť funkciu na zobrazenie pozdravu, mohla by vyzerať takto:
+
+```javascript
+function displayGreeting() {
+  console.log('Hello, world!');
+}
+```
+
+Kedykoľvek chceme funkciu zavolať (alebo spustiť), použijeme názov funkcie nasledovaný `()`. Stojí za zmienku, že funkcia môže byť definovaná pred alebo po jej zavolaní; JavaScriptový kompilátor ju nájde za vás.
+
+```javascript
+// calling our function
+displayGreeting();
+```
+
+> **NOTE:** Existuje špeciálny typ funkcie známy ako **metóda**, ktorú ste už používali! V skutočnosti sme to videli v našej ukážke vyššie, keď sme použili `console.log`. Rozdiel medzi metódou a funkciou je v tom, že metóda je pripojená k objektu (`console` v našom príklade), zatiaľ čo funkcia je voľne plávajúca. Mnoho vývojárov používa tieto pojmy zameniteľne.
+
+### Najlepšie praktiky pri funkciách
+
+Pri vytváraní funkcií je dobré mať na pamäti niekoľko najlepších praktík:
+
+- Ako vždy, používajte popisné názvy, aby ste vedeli, čo funkcia robí
+- Používajte **camelCase** na spájanie slov
+- Udržujte funkcie zamerané na konkrétnu úlohu
+
+## Posielanie informácií do funkcie
+
+Aby bola funkcia viac použiteľná, často do nej budete chcieť posielať informácie. Ak vezmeme náš príklad `displayGreeting` vyššie, zobrazí iba **Hello, world!**. Nie je to najpraktickejšia funkcia, ktorú by ste mohli vytvoriť. Ak ju chceme urobiť trochu flexibilnejšou, napríklad umožniť niekomu špecifikovať meno osoby, ktorú chceme pozdraviť, môžeme pridať **parameter**. Parameter (niekedy nazývaný aj **argument**) je dodatočná informácia poslaná do funkcie.
+
+Parametre sú uvedené v časti definície v zátvorkách a sú oddelené čiarkami, ako napríklad:
+
+```javascript
+function name(param, param2, param3) {
+
+}
+```
+
+Môžeme aktualizovať našu funkciu `displayGreeting`, aby prijímala meno a zobrazila ho.
+
+```javascript
+function displayGreeting(name) {
+  const message = `Hello, ${name}!`;
+  console.log(message);
+}
+```
+
+Keď chceme zavolať našu funkciu a poslať do nej parameter, špecifikujeme ho v zátvorkách.
+
+```javascript
+displayGreeting('Christopher');
+// displays "Hello, Christopher!" when run
+```
+
+## Predvolené hodnoty
+
+Funkciu môžeme urobiť ešte flexibilnejšou pridaním viacerých parametrov. Ale čo ak nechceme vyžadovať, aby bola každá hodnota špecifikovaná? Ak zostaneme pri našom príklade pozdravu, meno môže byť povinné (potrebujeme vedieť, koho pozdravujeme), ale chceme umožniť, aby bol samotný pozdrav prispôsobený podľa potreby. Ak niekto nechce pozdrav prispôsobiť, poskytneme predvolenú hodnotu. Na poskytnutie predvolenej hodnoty parametru ju nastavíme podobne ako hodnotu pre premennú - `parameterName = 'defaultValue'`. Kompletný príklad:
+
+```javascript
+function displayGreeting(name, salutation='Hello') {
+  console.log(`${salutation}, ${name}`);
+}
+```
+
+Keď voláme funkciu, môžeme sa rozhodnúť, či chceme nastaviť hodnotu pre `salutation`.
+
+```javascript
+displayGreeting('Christopher');
+// displays "Hello, Christopher"
+
+displayGreeting('Christopher', 'Hi');
+// displays "Hi, Christopher"
+```
+
+## Návratové hodnoty
+
+Doteraz funkcia, ktorú sme vytvorili, vždy vypíše výstup do [konzoly](https://developer.mozilla.org/docs/Web/API/console). Niekedy to môže byť presne to, čo hľadáme, najmä keď vytvárame funkcie, ktoré budú volať iné služby. Ale čo ak chcem vytvoriť pomocnú funkciu na vykonanie výpočtu a poskytnúť hodnotu späť, aby som ju mohol použiť inde?
+
+Môžeme to urobiť pomocou **návratovej hodnoty**. Návratová hodnota je vrátená funkciou a môže byť uložená do premennej rovnako ako by sme mohli uložiť literálnu hodnotu, napríklad reťazec alebo číslo.
+
+Ak funkcia niečo vracia, použije sa kľúčové slovo `return`. Kľúčové slovo `return` očakáva hodnotu alebo referenciu toho, čo sa vracia, ako napríklad:
+
+```javascript
+return myVariable;
+```  
+
+Môžeme vytvoriť funkciu na vytvorenie pozdravnej správy a vrátiť hodnotu späť volajúcemu.
+
+```javascript
+function createGreetingMessage(name) {
+  const message = `Hello, ${name}`;
+  return message;
+}
+```
+
+Keď voláme túto funkciu, uložíme hodnotu do premennej. Je to veľmi podobné tomu, ako by sme nastavili premennú na statickú hodnotu (napríklad `const name = 'Christopher'`).
+
+```javascript
+const greetingMessage = createGreetingMessage('Christopher');
+```
+
+## Funkcie ako parametre pre funkcie
+
+Ako budete napredovať vo svojej programátorskej kariére, narazíte na funkcie, ktoré prijímajú funkcie ako parametre. Tento šikovný trik sa často používa, keď nevieme, kedy sa niečo stane alebo dokončí, ale vieme, že potrebujeme vykonať operáciu ako odpoveď.
+
+Ako príklad si vezmite [setTimeout](https://developer.mozilla.org/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout), ktorý spustí časovač a vykoná kód, keď sa dokončí. Musíme mu povedať, aký kód chceme vykonať. Znie to ako ideálna práca pre funkciu!
+
+Ak spustíte kód nižšie, po 3 sekundách uvidíte správu **3 sekundy uplynuli**.
+
+```javascript
+function displayDone() {
+  console.log('3 seconds has elapsed');
+}
+// timer value is in milliseconds
+setTimeout(displayDone, 3000);
+```
+
+### Anonymné funkcie
+
+Pozrime sa ešte raz na to, čo sme vytvorili. Vytvárame funkciu s názvom, ktorá bude použitá iba raz. Ako sa naša aplikácia stáva zložitejšou, môžeme si predstaviť, že vytvárame veľa funkcií, ktoré budú použité iba raz. To nie je ideálne. Ako sa ukazuje, nemusíme vždy poskytovať názov!
+
+Keď odovzdávame funkciu ako parameter, môžeme obísť jej predchádzajúce vytvorenie a namiesto toho ju vytvoriť ako súčasť parametra. Používame rovnaké kľúčové slovo `function`, ale namiesto toho ju vytvoríme ako parameter.
+
+Prepíšme kód vyššie tak, aby používal anonymnú funkciu:
+
+```javascript
+setTimeout(function() {
+  console.log('3 seconds has elapsed');
+}, 3000);
+```
+
+Ak spustíte náš nový kód, všimnete si, že dostaneme rovnaké výsledky. Vytvorili sme funkciu, ale nemuseli sme jej dať názov!
+
+### Fat arrow funkcie
+
+Jednou skratkou, ktorá je bežná v mnohých programovacích jazykoch (vrátane JavaScriptu), je schopnosť používať takzvané **arrow** alebo **fat arrow** funkcie. Používa špeciálny indikátor `=>`, ktorý vyzerá ako šípka - odtiaľ názov! Použitím `=>` môžeme preskočiť kľúčové slovo `function`.
+
+Prepíšme náš kód ešte raz, aby používal fat arrow funkciu:
+
+```javascript
+setTimeout(() => {
+  console.log('3 seconds has elapsed');
+}, 3000);
+```
+
+### Kedy použiť ktorú stratégiu
+
+Teraz ste videli, že máme tri spôsoby, ako odovzdať funkciu ako parameter, a možno sa pýtate, kedy použiť ktorý. Ak viete, že funkciu budete používať viackrát, vytvorte ju normálne. Ak ju budete používať iba na jednom mieste, je všeobecne najlepšie použiť anonymnú funkciu. Či už použijete fat arrow funkciu alebo tradičnú syntax `function`, je na vás, ale všimnete si, že väčšina moderných vývojárov preferuje `=>`.
+
+---
+
+## 🚀 Výzva
+
+Dokážete jednou vetou vysvetliť rozdiel medzi funkciami a metódami? Skúste to!
+
+## Kvíz po prednáške
+[Kvíz po prednáške](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/10)
+
+## Prehľad a samostatné štúdium
+
+Stojí za to [prečítať si trochu viac o arrow funkciách](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions), pretože sú čoraz viac používané v kódoch. Precvičte si písanie funkcie a potom ju prepíšte pomocou tejto syntaxe.
+
+## Zadanie
+
+[Zábava s funkciami](assignment.md)
+
+---
+
+**Upozornenie**:  
+Tento dokument bol preložený pomocou služby AI prekladu [Co-op Translator](https://github.com/Azure/co-op-translator). Hoci sa snažíme o presnosť, prosím, berte na vedomie, že automatizované preklady môžu obsahovať chyby alebo nepresnosti. Pôvodný dokument v jeho pôvodnom jazyku by mal byť považovaný za autoritatívny zdroj. Pre kritické informácie sa odporúča profesionálny ľudský preklad. Nie sme zodpovední za akékoľvek nedorozumenia alebo nesprávne interpretácie vyplývajúce z použitia tohto prekladu.
\ No newline at end of file
diff --git a/translations/sk/2-js-basics/2-functions-methods/assignment.md b/translations/sk/2-js-basics/2-functions-methods/assignment.md
new file mode 100644
index 00000000..425bfce9
--- /dev/null
+++ b/translations/sk/2-js-basics/2-functions-methods/assignment.md
@@ -0,0 +1,27 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "8973f96157680a13e9446e4bb540ee57",
+  "translation_date": "2025-08-27T22:37:32+00:00",
+  "source_file": "2-js-basics/2-functions-methods/assignment.md",
+  "language_code": "sk"
+}
+-->
+# Zábava s funkciami
+
+## Pokyny
+
+Vytvorte rôzne funkcie, vrátane funkcií, ktoré niečo vracajú, a funkcií, ktoré nič nevracajú.
+
+Skúste vytvoriť funkciu, ktorá kombinuje parametre a parametre s predvolenými hodnotami.
+
+## Hodnotenie
+
+| Kritérium | Vynikajúce                                                                          | Dostatočné                                                      | Vyžaduje zlepšenie |
+| --------- | ----------------------------------------------------------------------------------- | --------------------------------------------------------------- | ------------------ |
+|           | Riešenie obsahuje dve alebo viac dobre fungujúcich funkcií s rôznorodými parametrami | Riešenie obsahuje jednu funkciu s niekoľkými parametrami         | Riešenie obsahuje chyby |
+
+---
+
+**Upozornenie**:  
+Tento dokument bol preložený pomocou služby AI prekladu [Co-op Translator](https://github.com/Azure/co-op-translator). Aj keď sa snažíme o presnosť, prosím, berte na vedomie, že automatizované preklady môžu obsahovať chyby alebo nepresnosti. Pôvodný dokument v jeho pôvodnom jazyku by mal byť považovaný za autoritatívny zdroj. Pre kritické informácie sa odporúča profesionálny ľudský preklad. Nenesieme zodpovednosť za akékoľvek nedorozumenia alebo nesprávne interpretácie vyplývajúce z použitia tohto prekladu.
\ No newline at end of file
diff --git a/translations/sk/2-js-basics/3-making-decisions/README.md b/translations/sk/2-js-basics/3-making-decisions/README.md
new file mode 100644
index 00000000..d0092a77
--- /dev/null
+++ b/translations/sk/2-js-basics/3-making-decisions/README.md
@@ -0,0 +1,232 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "888609c48329c280ca2477d2df40f2e5",
+  "translation_date": "2025-08-27T22:37:50+00:00",
+  "source_file": "2-js-basics/3-making-decisions/README.md",
+  "language_code": "sk"
+}
+-->
+# Základy JavaScriptu: Rozhodovanie
+
+![Základy JavaScriptu - Rozhodovanie](../../../../translated_images/webdev101-js-decisions.69e1b20f272dd1f0b1cb2f8adaff3ed2a77c4f91db96d8a0594132a353fa189a.sk.png)
+
+> Sketchnote od [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Kvíz pred prednáškou
+
+[Kvíz pred prednáškou](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/11)
+
+Rozhodovanie a kontrola poradia, v akom váš kód beží, robí váš kód opakovane použiteľným a robustným. Táto sekcia pokrýva syntax na kontrolu toku dát v JavaScripte a jeho význam pri použití s ​​Boolean dátovými typmi.
+
+[![Rozhodovanie](https://img.youtube.com/vi/SxTp8j-fMMY/0.jpg)](https://youtube.com/watch?v=SxTp8j-fMMY "Rozhodovanie")
+
+> 🎥 Kliknite na obrázok vyššie pre video o rozhodovaní.
+
+> Túto lekciu si môžete prejsť na [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-if-else/?WT.mc_id=academic-77807-sagibbon)!
+
+## Stručné zhrnutie o Booleans
+
+Booleans môžu mať iba dve hodnoty: `true` alebo `false`. Booleans pomáhajú rozhodovať, ktoré riadky kódu by sa mali spustiť, keď sú splnené určité podmienky.
+
+Nastavte svoj boolean na hodnotu true alebo false takto:
+
+`let myTrueBool = true`  
+`let myFalseBool = false`
+
+✅ Booleans sú pomenované po anglickom matematikovi, filozofovi a logikovi Georgeovi Boolovi (1815–1864).
+
+## Porovnávacie operátory a Booleans
+
+Operátory sa používajú na vyhodnotenie podmienok porovnávaním, ktoré vytvoria Boolean hodnotu. Nasleduje zoznam často používaných operátorov.
+
+| Symbol | Popis                                                                                                                                                        | Príklad            |
+| ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------ |
+| `<`    | **Menej ako**: Porovnáva dve hodnoty a vráti Boolean hodnotu `true`, ak je hodnota na ľavej strane menšia ako na pravej                                       | `5 < 6 // true`    |
+| `<=`   | **Menej alebo rovné**: Porovnáva dve hodnoty a vráti Boolean hodnotu `true`, ak je hodnota na ľavej strane menšia alebo rovná ako na pravej                  | `5 <= 6 // true`   |
+| `>`    | **Väčšie ako**: Porovnáva dve hodnoty a vráti Boolean hodnotu `true`, ak je hodnota na ľavej strane väčšia ako na pravej                                      | `5 > 6 // false`   |
+| `>=`   | **Väčšie alebo rovné**: Porovnáva dve hodnoty a vráti Boolean hodnotu `true`, ak je hodnota na ľavej strane väčšia alebo rovná ako na pravej                 | `5 >= 6 // false`  |
+| `===`  | **Striktná rovnosť**: Porovnáva dve hodnoty a vráti Boolean hodnotu `true`, ak sú hodnoty na pravej a ľavej strane rovnaké A majú rovnaký dátový typ         | `5 === 6 // false` |
+| `!==`  | **Nerovnosť**: Porovnáva dve hodnoty a vráti opačnú Boolean hodnotu, ako by vrátil operátor striktná rovnosť                                                 | `5 !== 6 // true`  |
+
+✅ Otestujte svoje znalosti napísaním niekoľkých porovnaní v konzole vášho prehliadača. Prekvapili vás niektoré vrátené údaje?
+
+## If Statement
+
+If statement spustí kód medzi svojimi blokmi, ak je podmienka pravdivá.
+
+```javascript
+if (condition) {
+  //Condition is true. Code in this block will run.
+}
+```
+
+Logické operátory sa často používajú na vytvorenie podmienky.
+
+```javascript
+let currentMoney;
+let laptopPrice;
+
+if (currentMoney >= laptopPrice) {
+  //Condition is true. Code in this block will run.
+  console.log("Getting a new laptop!");
+}
+```
+
+## If..Else Statement
+
+`else` statement spustí kód medzi svojimi blokmi, keď je podmienka nepravdivá. Je voliteľný s `if` statementom.
+
+```javascript
+let currentMoney;
+let laptopPrice;
+
+if (currentMoney >= laptopPrice) {
+  //Condition is true. Code in this block will run.
+  console.log("Getting a new laptop!");
+} else {
+  //Condition is false. Code in this block will run.
+  console.log("Can't afford a new laptop, yet!");
+}
+```
+
+✅ Otestujte svoje pochopenie tohto kódu a nasledujúceho kódu jeho spustením v konzole prehliadača. Zmeňte hodnoty premenných currentMoney a laptopPrice, aby ste zmenili vrátený `console.log()`.
+
+## Switch Statement
+
+`switch` statement sa používa na vykonanie rôznych akcií na základe rôznych podmienok. Použite `switch` statement na výber jedného z mnohých blokov kódu, ktoré sa majú vykonať.
+
+```javascript
+switch (expression) {
+  case x:
+    // code block
+    break;
+  case y:
+    // code block
+    break;
+  default:
+  // code block
+}
+```
+
+```javascript
+// program using switch statement
+let a = 2;
+
+switch (a) {
+  case 1:
+    a = "one";
+    break;
+  case 2:
+    a = "two";
+    break;
+  default:
+    a = "not found";
+    break;
+}
+console.log(`The value is ${a}`);
+```
+
+✅ Otestujte svoje pochopenie tohto kódu a nasledujúceho kódu jeho spustením v konzole prehliadača. Zmeňte hodnoty premennej a, aby ste zmenili vrátený `console.log()`.
+
+## Logické operátory a Booleans
+
+Rozhodnutia môžu vyžadovať viac ako jedno porovnanie a môžu byť spojené logickými operátormi na vytvorenie Boolean hodnoty.
+
+| Symbol | Popis                                                                                     | Príklad                                                                 |
+| ------ | ----------------------------------------------------------------------------------------- | ----------------------------------------------------------------------- |
+| `&&`   | **Logické AND**: Porovnáva dve Boolean výrazy. Vráti true **iba** ak sú obe strany pravdivé | `(5 > 6) && (5 < 6 ) //Jedna strana je nepravdivá, druhá je pravdivá. Vráti false` |
+| `\|\|` | **Logické OR**: Porovnáva dve Boolean výrazy. Vráti true, ak je aspoň jedna strana pravdivá | `(5 > 6) \|\| (5 < 6) //Jedna strana je nepravdivá, druhá je pravdivá. Vráti true` |
+| `!`    | **Logické NOT**: Vráti opačnú hodnotu Boolean výrazu                                     | `!(5 > 6) // 5 nie je väčšie ako 6, ale "!" vráti true`                 |
+
+## Podmienky a rozhodnutia s logickými operátormi
+
+Logické operátory môžu byť použité na vytvorenie podmienok v if..else statementoch.
+
+```javascript
+let currentMoney;
+let laptopPrice;
+let laptopDiscountPrice = laptopPrice - laptopPrice * 0.2; //Laptop price at 20 percent off
+
+if (currentMoney >= laptopPrice || currentMoney >= laptopDiscountPrice) {
+  //Condition is true. Code in this block will run.
+  console.log("Getting a new laptop!");
+} else {
+  //Condition is true. Code in this block will run.
+  console.log("Can't afford a new laptop, yet!");
+}
+```
+
+### Operátor negácie
+
+Doteraz ste videli, ako môžete použiť `if...else` statement na vytvorenie podmieneného logického výrazu. Čokoľvek, čo ide do `if`, musí byť vyhodnotené ako true/false. Použitím operátora `!` môžete _negovať_ výraz. Vyzeralo by to takto:
+
+```javascript
+if (!condition) {
+  // runs if condition is false
+} else {
+  // runs if condition is true
+}
+```
+
+### Ternárne výrazy
+
+`if...else` nie je jediný spôsob, ako vyjadriť rozhodovací logický výraz. Môžete tiež použiť niečo, čo sa nazýva ternárny operátor. Syntax vyzerá takto:
+
+```javascript
+let variable = condition ? <return this if true> : <return this if false>
+```
+
+Nižšie je konkrétnejší príklad:
+
+```javascript
+let firstNumber = 20;
+let secondNumber = 10;
+let biggestNumber = firstNumber > secondNumber ? firstNumber : secondNumber;
+```
+
+✅ Venujte chvíľu čítaniu tohto kódu niekoľkokrát. Rozumiete tomu, ako tieto operátory fungujú?
+
+Vyššie uvedené hovorí, že:
+
+- ak je `firstNumber` väčšie ako `secondNumber`
+- potom priraďte `firstNumber` k `biggestNumber`
+- inak priraďte `secondNumber`.
+
+Ternárny výraz je len kompaktný spôsob, ako napísať kód nižšie:
+
+```javascript
+let biggestNumber;
+if (firstNumber > secondNumber) {
+  biggestNumber = firstNumber;
+} else {
+  biggestNumber = secondNumber;
+}
+```
+
+---
+
+## 🚀 Výzva
+
+Vytvorte program, ktorý je najskôr napísaný s logickými operátormi, a potom ho prepíšte pomocou ternárneho výrazu. Aká syntax vám vyhovuje viac?
+
+---
+
+## Kvíz po prednáške
+
+[Kvíz po prednáške](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/12)
+
+## Prehľad a samostatné štúdium
+
+Prečítajte si viac o mnohých operátoroch dostupných používateľovi [na MDN](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators).
+
+Prejdite si úžasný [prehľad operátorov](https://joshwcomeau.com/operator-lookup/) od Josha Comeaua!
+
+## Zadanie
+
+[Operátory](assignment.md)
+
+---
+
+**Upozornenie**:  
+Tento dokument bol preložený pomocou služby AI prekladu [Co-op Translator](https://github.com/Azure/co-op-translator). Aj keď sa snažíme o presnosť, prosím, berte na vedomie, že automatizované preklady môžu obsahovať chyby alebo nepresnosti. Pôvodný dokument v jeho rodnom jazyku by mal byť považovaný za autoritatívny zdroj. Pre kritické informácie sa odporúča profesionálny ľudský preklad. Nie sme zodpovední za akékoľvek nedorozumenia alebo nesprávne interpretácie vyplývajúce z použitia tohto prekladu.
\ No newline at end of file
diff --git a/translations/sk/2-js-basics/3-making-decisions/assignment.md b/translations/sk/2-js-basics/3-making-decisions/assignment.md
new file mode 100644
index 00000000..ecf16e1d
--- /dev/null
+++ b/translations/sk/2-js-basics/3-making-decisions/assignment.md
@@ -0,0 +1,54 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "bf62b82567e6f9bdf4abda9ae0ccb64a",
+  "translation_date": "2025-08-27T22:38:53+00:00",
+  "source_file": "2-js-basics/3-making-decisions/assignment.md",
+  "language_code": "sk"
+}
+-->
+# Operátory
+
+## Pokyny
+
+Vyskúšajte operátory. Tu je návrh programu, ktorý môžete implementovať:
+
+Máte skupinu študentov z dvoch rôznych hodnotiacich systémov.
+
+### Prvý hodnotiaci systém
+
+Jeden hodnotiaci systém je definovaný známkami od 1 do 5, pričom známka 3 a vyššie znamená, že študent úspešne absolvoval kurz.
+
+### Druhý hodnotiaci systém
+
+Druhý hodnotiaci systém má nasledujúce známky: `A, A-, B, B-, C, C-`, pričom `A` je najlepšia známka a `C` je najnižšia známka, ktorá znamená úspešné absolvovanie.
+
+### Úloha
+
+Na základe nasledujúceho poľa `allStudents`, ktoré reprezentuje všetkých študentov a ich známky, vytvorte nové pole `studentsWhoPass`, ktoré bude obsahovať všetkých študentov, ktorí úspešne absolvovali.
+
+> TIP: Použite for-cyklus, if...else a porovnávacie operátory:
+
+```javascript
+let allStudents = [
+  'A',
+  'B-',
+  1,
+  4,
+  5,
+  2
+]
+
+let studentsWhoPass = [];
+```
+
+## Hodnotiace kritériá
+
+| Kritérium | Vynikajúce                    | Dostatočné                   | Potrebuje zlepšenie            |
+| --------- | ----------------------------- | ---------------------------- | ------------------------------ |
+|           | Predložené kompletné riešenie | Predložené čiastočné riešenie | Predložené riešenie obsahuje chyby |
+
+---
+
+**Upozornenie**:  
+Tento dokument bol preložený pomocou služby AI prekladu [Co-op Translator](https://github.com/Azure/co-op-translator). Aj keď sa snažíme o presnosť, prosím, berte na vedomie, že automatizované preklady môžu obsahovať chyby alebo nepresnosti. Pôvodný dokument v jeho pôvodnom jazyku by mal byť považovaný za autoritatívny zdroj. Pre kritické informácie sa odporúča profesionálny ľudský preklad. Nenesieme zodpovednosť za akékoľvek nedorozumenia alebo nesprávne interpretácie vyplývajúce z použitia tohto prekladu.
\ No newline at end of file
diff --git a/translations/sk/2-js-basics/4-arrays-loops/README.md b/translations/sk/2-js-basics/4-arrays-loops/README.md
new file mode 100644
index 00000000..4d837ff3
--- /dev/null
+++ b/translations/sk/2-js-basics/4-arrays-loops/README.md
@@ -0,0 +1,147 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "3f7f87871312cf6cc12662da7d973182",
+  "translation_date": "2025-08-27T22:41:47+00:00",
+  "source_file": "2-js-basics/4-arrays-loops/README.md",
+  "language_code": "sk"
+}
+-->
+# Základy JavaScriptu: Polia a cykly
+
+![Základy JavaScriptu - Polia](../../../../translated_images/webdev101-js-arrays.439d7528b8a294558d0e4302e448d193f8ad7495cc407539cc81f1afe904b470.sk.png)
+> Sketchnote od [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Kvíz pred prednáškou
+[Kvíz pred prednáškou](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/13)
+
+Táto lekcia pokrýva základy JavaScriptu, jazyka, ktorý poskytuje interaktivitu na webe. V tejto lekcii sa naučíte o poliach a cykloch, ktoré sa používajú na manipuláciu s dátami.
+
+[![Polia](https://img.youtube.com/vi/1U4qTyq02Xw/0.jpg)](https://youtube.com/watch?v=1U4qTyq02Xw "Polia")
+
+[![Cykly](https://img.youtube.com/vi/Eeh7pxtTZ3k/0.jpg)](https://www.youtube.com/watch?v=Eeh7pxtTZ3k "Cykly")
+
+> 🎥 Kliknite na obrázky vyššie pre videá o poliach a cykloch.
+
+> Túto lekciu si môžete prejsť na [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-arrays/?WT.mc_id=academic-77807-sagibbon)!
+
+## Polia
+
+Práca s dátami je bežnou úlohou v každom programovacom jazyku, a je oveľa jednoduchšia, keď sú dáta organizované v štruktúrovanom formáte, ako sú polia. V poliach sú dáta uložené v štruktúre podobnej zoznamu. Jednou z hlavných výhod polí je, že môžete uložiť rôzne typy dát do jedného poľa.
+
+✅ Polia sú všade okolo nás! Dokážete si predstaviť reálny príklad poľa, ako napríklad pole solárnych panelov?
+
+Syntax pre pole je pár hranatých zátvoriek.
+
+```javascript
+let myArray = [];
+```
+
+Toto je prázdne pole, ale polia môžu byť deklarované už naplnené dátami. Viacero hodnôt v poli je oddelených čiarkou.
+
+```javascript
+let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
+```
+
+Hodnotám v poli je priradená jedinečná hodnota nazývaná **index**, celé číslo, ktoré je priradené na základe jeho vzdialenosti od začiatku poľa. V príklade vyššie má reťazcová hodnota "Chocolate" index 0 a index "Rocky Road" je 4. Použite index s hranatými zátvorkami na získanie, zmenu alebo vloženie hodnôt poľa.
+
+✅ Prekvapuje vás, že polia začínajú na indexe nula? V niektorých programovacích jazykoch indexy začínajú na 1. Je za tým zaujímavá história, ktorú si môžete [prečítať na Wikipédii](https://en.wikipedia.org/wiki/Zero-based_numbering).
+
+```javascript
+let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
+iceCreamFlavors[2]; //"Vanilla"
+```
+
+Index môžete využiť na zmenu hodnoty, napríklad takto:
+
+```javascript
+iceCreamFlavors[4] = "Butter Pecan"; //Changed "Rocky Road" to "Butter Pecan"
+```
+
+A môžete vložiť novú hodnotu na daný index takto:
+
+```javascript
+iceCreamFlavors[5] = "Cookie Dough"; //Added "Cookie Dough"
+```
+
+✅ Bežnejší spôsob pridávania hodnôt do poľa je pomocou operátorov poľa, ako je array.push()
+
+Ak chcete zistiť, koľko položiek je v poli, použite vlastnosť `length`.
+
+```javascript
+let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
+iceCreamFlavors.length; //5
+```
+
+✅ Vyskúšajte si to sami! Použite konzolu vášho prehliadača na vytvorenie a manipuláciu s poľom podľa vášho výberu.
+
+## Cykly
+
+Cykly nám umožňujú vykonávať opakujúce sa alebo **iteratívne** úlohy, a môžu ušetriť veľa času a kódu. Každá iterácia môže mať rôzne premenné, hodnoty a podmienky. V JavaScripte existujú rôzne typy cyklov, ktoré majú malé rozdiely, ale v podstate robia to isté: prechádzajú dáta.
+
+### For cyklus
+
+Cyklus `for` vyžaduje 3 časti na iteráciu:
+- `counter` Premenná, ktorá je zvyčajne inicializovaná číslom, ktoré počíta počet iterácií
+- `condition` Výraz, ktorý používa porovnávacie operátory na zastavenie cyklu, keď je `false`
+- `iteration-expression` Spúšťa sa na konci každej iterácie, zvyčajne sa používa na zmenu hodnoty counteru
+  
+```javascript
+// Counting up to 10
+for (let i = 0; i < 10; i++) {
+  console.log(i);
+}
+```
+
+✅ Spustite tento kód v konzole prehliadača. Čo sa stane, keď urobíte malé zmeny v counteri, podmienke alebo iteratívnom výraze? Dokážete ho spustiť dozadu, vytvoriť odpočítavanie?
+
+### While cyklus
+
+Na rozdiel od syntaxe cyklu `for`, cykly `while` vyžadujú iba podmienku, ktorá zastaví cyklus, keď sa podmienka stane `false`. Podmienky v cykloch zvyčajne závisia od iných hodnôt, ako sú countery, a musia byť spravované počas cyklu. Počiatočné hodnoty counterov musia byť vytvorené mimo cyklu, a akékoľvek výrazy na splnenie podmienky, vrátane zmeny counteru, musia byť udržiavané vo vnútri cyklu.
+
+```javascript
+//Counting up to 10
+let i = 0;
+while (i < 10) {
+ console.log(i);
+ i++;
+}
+```
+
+✅ Prečo by ste si vybrali for cyklus namiesto while cyklu? 17 tisíc divákov malo rovnakú otázku na StackOverflow, a niektoré názory [by vás mohli zaujímať](https://stackoverflow.com/questions/39969145/while-loops-vs-for-loops-in-javascript).
+
+## Cykly a polia
+
+Polia sa často používajú s cyklami, pretože väčšina podmienok vyžaduje dĺžku poľa na zastavenie cyklu, a index môže byť tiež hodnotou counteru.
+
+```javascript
+let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
+
+for (let i = 0; i < iceCreamFlavors.length; i++) {
+  console.log(iceCreamFlavors[i]);
+} //Ends when all flavors are printed
+```
+
+✅ Experimentujte s prechádzaním poľa podľa vášho výberu vo vašej konzole prehliadača. 
+
+---
+
+## 🚀 Výzva
+
+Existujú aj iné spôsoby prechádzania polí než for a while cykly. Existujú [forEach](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach), [for-of](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/for...of) a [map](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/map). Prepíšte váš cyklus poľa pomocou jednej z týchto techník.
+
+## Kvíz po prednáške
+[Kvíz po prednáške](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/14)
+
+## Prehľad a samostatné štúdium
+
+Polia v JavaScripte majú mnoho metód, ktoré sú mimoriadne užitočné na manipuláciu s dátami. [Prečítajte si o týchto metódach](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array) a vyskúšajte niektoré z nich (ako push, pop, slice a splice) na poli podľa vášho výberu.
+
+## Zadanie
+
+[Prejdite pole](assignment.md)
+
+---
+
+**Upozornenie**:  
+Tento dokument bol preložený pomocou služby AI prekladu [Co-op Translator](https://github.com/Azure/co-op-translator). Aj keď sa snažíme o presnosť, prosím, berte na vedomie, že automatizované preklady môžu obsahovať chyby alebo nepresnosti. Pôvodný dokument v jeho rodnom jazyku by mal byť považovaný za autoritatívny zdroj. Pre kritické informácie sa odporúča profesionálny ľudský preklad. Nenesieme zodpovednosť za akékoľvek nedorozumenia alebo nesprávne interpretácie vyplývajúce z použitia tohto prekladu.
\ No newline at end of file
diff --git a/translations/sk/2-js-basics/4-arrays-loops/assignment.md b/translations/sk/2-js-basics/4-arrays-loops/assignment.md
new file mode 100644
index 00000000..3ee310a9
--- /dev/null
+++ b/translations/sk/2-js-basics/4-arrays-loops/assignment.md
@@ -0,0 +1,27 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "8b2381170bd0fd2870f5889bb8620f02",
+  "translation_date": "2025-08-27T22:42:51+00:00",
+  "source_file": "2-js-basics/4-arrays-loops/assignment.md",
+  "language_code": "sk"
+}
+-->
+# Prechádzanie poľa
+
+## Pokyny
+
+Vytvorte program, ktorý vypíše každé 3. číslo medzi 1-20 a zobrazí ho na konzole.
+
+> TIP: použite for-cyklus a upravte výraz iterácie
+
+## Hodnotenie
+
+| Kritérium | Vynikajúce                              | Dostatočné              | Vyžaduje zlepšenie             |
+| --------- | --------------------------------------- | ----------------------- | ------------------------------ |
+|           | Program funguje správne a je okomentovaný | Program nie je okomentovaný | Program je neúplný alebo obsahuje chyby |
+
+---
+
+**Upozornenie**:  
+Tento dokument bol preložený pomocou služby AI prekladu [Co-op Translator](https://github.com/Azure/co-op-translator). Aj keď sa snažíme o presnosť, prosím, berte na vedomie, že automatizované preklady môžu obsahovať chyby alebo nepresnosti. Pôvodný dokument v jeho pôvodnom jazyku by mal byť považovaný za autoritatívny zdroj. Pre kritické informácie sa odporúča profesionálny ľudský preklad. Nie sme zodpovední za akékoľvek nedorozumenia alebo nesprávne interpretácie vyplývajúce z použitia tohto prekladu.
\ No newline at end of file
diff --git a/translations/sk/2-js-basics/README.md b/translations/sk/2-js-basics/README.md
new file mode 100644
index 00000000..8310f450
--- /dev/null
+++ b/translations/sk/2-js-basics/README.md
@@ -0,0 +1,28 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "cc9e70a2f096c67389c8acff1521fc27",
+  "translation_date": "2025-08-27T22:35:47+00:00",
+  "source_file": "2-js-basics/README.md",
+  "language_code": "sk"
+}
+-->
+# Úvod do JavaScriptu
+
+JavaScript je jazyk webu. V týchto štyroch lekciách sa naučíte jeho základy.
+
+### Témy
+
+1. [Premenné a dátové typy](1-data-types/README.md)
+2. [Funkcie a metódy](2-functions-methods/README.md)
+3. [Rozhodovanie pomocou JavaScriptu](3-making-decisions/README.md)
+4. [Polia a cykly](4-arrays-loops/README.md)
+
+### Kredity
+
+Tieto lekcie boli napísané s ♥️ od [Jasmine Greenaway](https://twitter.com/paladique), [Christopher Harrison](https://twitter.com/geektrainer) a [Chris Noring](https://twitter.com/chris_noring)
+
+---
+
+**Upozornenie**:  
+Tento dokument bol preložený pomocou služby AI prekladu [Co-op Translator](https://github.com/Azure/co-op-translator). Aj keď sa snažíme o presnosť, prosím, berte na vedomie, že automatizované preklady môžu obsahovať chyby alebo nepresnosti. Pôvodný dokument v jeho rodnom jazyku by mal byť považovaný za autoritatívny zdroj. Pre kritické informácie sa odporúča profesionálny ľudský preklad. Nie sme zodpovední za akékoľvek nedorozumenia alebo nesprávne interpretácie vyplývajúce z použitia tohto prekladu.
\ No newline at end of file
diff --git a/translations/sk/3-terrarium/1-intro-to-html/README.md b/translations/sk/3-terrarium/1-intro-to-html/README.md
new file mode 100644
index 00000000..23f79451
--- /dev/null
+++ b/translations/sk/3-terrarium/1-intro-to-html/README.md
@@ -0,0 +1,249 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "46a0639e719b9cf1dfd062aa24cad639",
+  "translation_date": "2025-08-27T22:45:05+00:00",
+  "source_file": "3-terrarium/1-intro-to-html/README.md",
+  "language_code": "sk"
+}
+-->
+# Projekt Terrárium Časť 1: Úvod do HTML
+
+![Úvod do HTML](../../../../translated_images/webdev101-html.4389c2067af68e98280c1bde52b6c6269f399eaae3659b7c846018d8a7b0bbd9.sk.png)  
+> Sketchnote od [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Kvíz pred prednáškou
+
+[Kvíz pred prednáškou](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/15)
+
+> Pozrite si video
+
+> 
+> [![Video o základoch Git a GitHub](https://img.youtube.com/vi/1TvxJKBzhyQ/0.jpg)](https://www.youtube.com/watch?v=1TvxJKBzhyQ)
+
+### Úvod
+
+HTML, alebo HyperText Markup Language, je „kostra“ webu. Ak CSS „obliekne“ váš HTML a JavaScript ho oživí, HTML je telom vašej webovej aplikácie. Syntax HTML dokonca odráža túto myšlienku, pretože obsahuje značky ako „head“, „body“ a „footer“.
+
+V tejto lekcii použijeme HTML na vytvorenie „kostry“ rozhrania nášho virtuálneho terária. Bude obsahovať názov a tri stĺpce: pravý a ľavý stĺpec, kde budú umiestnené ťahateľné rastliny, a strednú oblasť, ktorá bude samotným skleneným teráriom. Na konci tejto lekcie budete môcť vidieť rastliny v stĺpcoch, ale rozhranie bude vyzerať trochu zvláštne; nebojte sa, v ďalšej časti pridáte do rozhrania CSS štýly, aby vyzeralo lepšie.
+
+### Úloha
+
+Na svojom počítači vytvorte priečinok s názvom 'terrarium' a v ňom súbor s názvom 'index.html'. Môžete to urobiť vo Visual Studio Code po vytvorení priečinka terrarium tak, že otvoríte nové okno VS Code, kliknete na 'open folder' a prejdete do svojho nového priečinka. Kliknite na malé tlačidlo 'file' v paneli Explorer a vytvorte nový súbor:
+
+![explorer vo VS Code](../../../../translated_images/vs-code-index.e2986cf919471eb984a0afef231380c8b132b000635105f2397bd2754d1b689c.sk.png)
+
+Alebo
+
+Použite tieto príkazy v git bash:
+* `mkdir terrarium`
+* `cd terrarium`
+* `touch index.html`
+* `code index.html` alebo `nano index.html`
+
+> Súbory index.html naznačujú prehliadaču, že ide o predvolený súbor v priečinku; URL ako `https://anysite.com/test` môžu byť vytvorené pomocou štruktúry priečinkov vrátane priečinka s názvom `test` s `index.html` vo vnútri; `index.html` nemusí byť zobrazený v URL.
+
+---
+
+## DocType a značky html
+
+Prvý riadok HTML súboru je jeho doctype. Je trochu prekvapujúce, že tento riadok musí byť na úplnom vrchu súboru, ale hovorí starším prehliadačom, že stránka sa má vykresliť v štandardnom režime podľa aktuálnej špecifikácie HTML.
+
+> Tip: vo VS Code môžete prejsť kurzorom nad značku a získať informácie o jej použití z referenčných príručiek MDN.
+
+Druhý riadok by mal byť otváracou značkou `<html>`, hneď nasledovanou jej zatváracou značkou `</html>`. Tieto značky sú koreňovými prvkami vášho rozhrania.
+
+### Úloha
+
+Pridajte tieto riadky na začiatok vášho súboru `index.html`:
+
+```HTML
+<!DOCTYPE html>
+<html></html>
+```
+
+✅ Existuje niekoľko rôznych režimov, ktoré môžu byť určené nastavením DocType pomocou dotazovacieho reťazca: [Quirks Mode a Standards Mode](https://developer.mozilla.org/docs/Web/HTML/Quirks_Mode_and_Standards_Mode). Tieto režimy sa používali na podporu veľmi starých prehliadačov, ktoré sa dnes už bežne nepoužívajú (Netscape Navigator 4 a Internet Explorer 5). Môžete sa držať štandardného vyhlásenia doctype.
+
+---
+
+## Dokumentová 'head'
+
+Oblasť 'head' HTML dokumentu obsahuje kľúčové informácie o vašej webovej stránke, známe aj ako [metadata](https://developer.mozilla.org/docs/Web/HTML/Element/meta). V našom prípade serveru, na ktorý bude táto stránka odoslaná na vykreslenie, oznamujeme tieto štyri veci:
+
+-   názov stránky
+-   metadáta stránky vrátane:
+    -   'character set', ktorý informuje o tom, aké kódovanie znakov sa používa na stránke
+    -   informácie o prehliadači, vrátane `x-ua-compatible`, čo naznačuje, že je podporovaný prehliadač IE=edge
+    -   informácie o tom, ako by sa mal viewport správať pri načítaní. Nastavenie viewportu na počiatočnú mierku 1 kontroluje úroveň priblíženia pri prvom načítaní stránky.
+
+### Úloha
+
+Pridajte blok 'head' do vášho dokumentu medzi otváracie a zatváracie značky `<html>`.
+
+```html
+<head>
+	<title>Welcome to my Virtual Terrarium</title>
+	<meta charset="utf-8" />
+	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
+	<meta name="viewport" content="width=device-width, initial-scale=1" />
+</head>
+```
+
+✅ Čo by sa stalo, keby ste nastavili meta značku viewport takto: `<meta name="viewport" content="width=600">`? Prečítajte si viac o [viewporte](https://developer.mozilla.org/docs/Web/HTML/Viewport_meta_tag).
+
+---
+
+## Dokumentové `body`
+
+### HTML značky
+
+V HTML pridávate značky do vášho .html súboru na vytvorenie prvkov webovej stránky. Každá značka má zvyčajne otváraciu a zatváraciu značku, napríklad: `<p>hello</p>` na označenie odseku. Vytvorte telo vášho rozhrania pridaním sady značiek `<body>` do páru značiek `<html>`; váš kód teraz vyzerá takto:
+
+### Úloha
+
+```html
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>Welcome to my Virtual Terrarium</title>
+		<meta charset="utf-8" />
+		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+	</head>
+	<body></body>
+</html>
+```
+
+Teraz môžete začať budovať svoju stránku. Zvyčajne používate značky `<div>` na vytvorenie samostatných prvkov na stránke. Vytvoríme sériu prvkov `<div>`, ktoré budú obsahovať obrázky.
+
+### Obrázky
+
+Jedna HTML značka, ktorá nepotrebuje zatváraciu značku, je značka `<img>`, pretože má atribút `src`, ktorý obsahuje všetky informácie potrebné na vykreslenie položky.
+
+Vytvorte priečinok vo vašej aplikácii s názvom `images` a do neho pridajte všetky obrázky z [zdrojového kódu](../../../../3-terrarium/solution/images); (je tam 14 obrázkov rastlín).
+
+### Úloha
+
+Pridajte tieto obrázky rastlín do dvoch stĺpcov medzi značky `<body></body>`:
+
+```html
+<div id="page">
+	<div id="left-container" class="container">
+		<div class="plant-holder">
+			<img class="plant" alt="plant" id="plant1" src="./images/plant1.png" />
+		</div>
+		<div class="plant-holder">
+			<img class="plant" alt="plant" id="plant2" src="./images/plant2.png" />
+		</div>
+		<div class="plant-holder">
+			<img class="plant" alt="plant" id="plant3" src="./images/plant3.png" />
+		</div>
+		<div class="plant-holder">
+			<img class="plant" alt="plant" id="plant4" src="./images/plant4.png" />
+		</div>
+		<div class="plant-holder">
+			<img class="plant" alt="plant" id="plant5" src="./images/plant5.png" />
+		</div>
+		<div class="plant-holder">
+			<img class="plant" alt="plant" id="plant6" src="./images/plant6.png" />
+		</div>
+		<div class="plant-holder">
+			<img class="plant" alt="plant" id="plant7" src="./images/plant7.png" />
+		</div>
+	</div>
+	<div id="right-container" class="container">
+		<div class="plant-holder">
+			<img class="plant" alt="plant" id="plant8" src="./images/plant8.png" />
+		</div>
+		<div class="plant-holder">
+			<img class="plant" alt="plant" id="plant9" src="./images/plant9.png" />
+		</div>
+		<div class="plant-holder">
+			<img class="plant" alt="plant" id="plant10" src="./images/plant10.png" />
+		</div>
+		<div class="plant-holder">
+			<img class="plant" alt="plant" id="plant11" src="./images/plant11.png" />
+		</div>
+		<div class="plant-holder">
+			<img class="plant" alt="plant" id="plant12" src="./images/plant12.png" />
+		</div>
+		<div class="plant-holder">
+			<img class="plant" alt="plant" id="plant13" src="./images/plant13.png" />
+		</div>
+		<div class="plant-holder">
+			<img class="plant" alt="plant" id="plant14" src="./images/plant14.png" />
+		</div>
+	</div>
+</div>
+```
+
+> Poznámka: Spany vs. Divy. Divy sú považované za 'blokové' prvky, zatiaľ čo Spany sú 'riadkové'. Čo by sa stalo, keby ste tieto divy zmenili na spany?
+
+S týmto kódom sa rastliny teraz zobrazia na obrazovke. Vyzerá to dosť zle, pretože ešte nie sú naštýlované pomocou CSS, čo urobíme v ďalšej lekcii.
+
+Každý obrázok má alternatívny text, ktorý sa zobrazí, aj keď obrázok nemôžete vidieť alebo vykresliť. Toto je dôležitý atribút pre prístupnosť. Viac o prístupnosti sa dozviete v budúcich lekciách; zatiaľ si zapamätajte, že atribút alt poskytuje alternatívne informácie pre obrázok, ak ho používateľ z nejakého dôvodu nemôže zobraziť (kvôli pomalému pripojeniu, chybe v atribúte src alebo ak používateľ používa čítačku obrazovky).
+
+✅ Všimli ste si, že každý obrázok má rovnaký alt text? Je to dobrá prax? Prečo áno alebo nie? Môžete tento kód vylepšiť?
+
+---
+
+## Sémantické značkovanie
+
+Vo všeobecnosti je lepšie používať zmysluplné 'sémantiky' pri písaní HTML. Čo to znamená? Znamená to, že používate HTML značky na reprezentáciu typu údajov alebo interakcie, pre ktoré boli navrhnuté. Napríklad hlavný názov textu na stránke by mal používať značku `<h1>`.
+
+Pridajte nasledujúci riadok hneď pod otváraciu značku `<body>`:
+
+```html
+<h1>My Terrarium</h1>
+```
+
+Používanie sémantického značkovania, ako je napríklad použitie hlavičiek `<h1>` a nenačíslovaných zoznamov `<ul>`, pomáha čítačkám obrazovky navigovať cez stránku. Vo všeobecnosti by tlačidlá mali byť napísané ako `<button>` a zoznamy ako `<li>`. Aj keď je _možné_ použiť špeciálne naštýlované `<span>` prvky s obsluhou kliknutí na napodobnenie tlačidiel, je lepšie pre používateľov so zdravotným postihnutím používať technológie na určenie, kde sa na stránke nachádza tlačidlo, a interagovať s ním, ak sa prvok zobrazuje ako tlačidlo. Z tohto dôvodu sa snažte používať sémantické značkovanie čo najviac.
+
+✅ Pozrite si čítačku obrazovky a [ako interaguje s webovou stránkou](https://www.youtube.com/watch?v=OUDV1gqs9GA). Vidíte, prečo by nesémantické značkovanie mohlo používateľa frustrovať?
+
+## Terárium
+
+Posledná časť tohto rozhrania zahŕňa vytvorenie značkovania, ktoré bude naštýlované na vytvorenie terária.
+
+### Úloha:
+
+Pridajte toto značkovanie nad poslednú značku `</div>`:
+
+```html
+<div id="terrarium">
+	<div class="jar-top"></div>
+	<div class="jar-walls">
+		<div class="jar-glossy-long"></div>
+		<div class="jar-glossy-short"></div>
+	</div>
+	<div class="dirt"></div>
+	<div class="jar-bottom"></div>
+</div>
+```
+
+✅ Aj keď ste pridali toto značkovanie na obrazovku, nevidíte nič vykreslené. Prečo?
+
+---
+
+## 🚀Výzva
+
+Existujú niektoré staré 'zábavné' značky v HTML, ktoré je stále zábavné používať, aj keď by ste nemali používať zastarané značky ako [tieto značky](https://developer.mozilla.org/docs/Web/HTML/Element#Obsolete_and_deprecated_elements) vo vašom značkovaní. Napriek tomu, môžete použiť starú značku `<marquee>` na to, aby sa h1 názov posúval horizontálne? (ak to urobíte, nezabudnite ju potom odstrániť)
+
+## Kvíz po prednáške
+
+[Kvíz po prednáške](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/16)
+
+## Prehľad a samostatné štúdium
+
+HTML je „osvedčený“ stavebný systém, ktorý pomohol vybudovať web do podoby, v akej ho poznáme dnes. Naučte sa niečo o jeho histórii štúdiom starých a nových značiek. Dokážete zistiť, prečo boli niektoré značky zastarané a iné pridané? Aké značky by mohli byť zavedené v budúcnosti?
+
+Dozviete sa viac o vytváraní stránok pre web a mobilné zariadenia na [Microsoft Learn](https://docs.microsoft.com/learn/modules/build-simple-website/?WT.mc_id=academic-77807-sagibbon).
+
+## Zadanie
+
+[Precvičte si HTML: Vytvorte maketu blogu](assignment.md)
+
+---
+
+**Upozornenie**:  
+Tento dokument bol preložený pomocou služby AI prekladu [Co-op Translator](https://github.com/Azure/co-op-translator). Hoci sa snažíme o presnosť, prosím, berte na vedomie, že automatizované preklady môžu obsahovať chyby alebo nepresnosti. Pôvodný dokument v jeho rodnom jazyku by mal byť považovaný za autoritatívny zdroj. Pre kritické informácie sa odporúča profesionálny ľudský preklad. Nie sme zodpovední za žiadne nedorozumenia alebo nesprávne interpretácie vyplývajúce z použitia tohto prekladu.
\ No newline at end of file
diff --git a/translations/sk/3-terrarium/1-intro-to-html/assignment.md b/translations/sk/3-terrarium/1-intro-to-html/assignment.md
new file mode 100644
index 00000000..7f567653
--- /dev/null
+++ b/translations/sk/3-terrarium/1-intro-to-html/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "970776c81401c9aacb34f365edac6b53",
+  "translation_date": "2025-08-27T22:46:41+00:00",
+  "source_file": "3-terrarium/1-intro-to-html/assignment.md",
+  "language_code": "sk"
+}
+-->
+# Precvičte si HTML: Vytvorte maketu blogu
+
+## Pokyny
+
+Predstavte si, že navrhujete alebo prepracovávate svoju osobnú webovú stránku. Vytvorte grafickú maketu svojej stránky a potom zapíšte HTML značky, ktoré by ste použili na vytvorenie rôznych prvkov stránky. Môžete to urobiť na papieri a naskenovať, alebo použiť softvér podľa vášho výberu, len sa uistite, že HTML značky napíšete ručne.
+
+## Hodnotiace kritériá
+
+| Kritérium | Vynikajúce                                                                        | Dostatočné                                                                     | Potrebuje zlepšenie                                                              |
+| --------- | --------------------------------------------------------------------------------- | ------------------------------------------------------------------------------ | -------------------------------------------------------------------------------- |
+|           | Rozloženie blogu je vizuálne znázornené s aspoň 10 zobrazenými prvkami značiek    | Rozloženie blogu je vizuálne znázornené s približne 5 zobrazenými prvkami značiek | Rozloženie blogu je vizuálne znázornené s najviac 3 zobrazenými prvkami značiek  |
+
+---
+
+**Upozornenie**:  
+Tento dokument bol preložený pomocou služby AI prekladu [Co-op Translator](https://github.com/Azure/co-op-translator). Aj keď sa snažíme o presnosť, prosím, berte na vedomie, že automatizované preklady môžu obsahovať chyby alebo nepresnosti. Pôvodný dokument v jeho pôvodnom jazyku by mal byť považovaný za autoritatívny zdroj. Pre kritické informácie sa odporúča profesionálny ľudský preklad. Nenesieme zodpovednosť za akékoľvek nedorozumenia alebo nesprávne interpretácie vyplývajúce z použitia tohto prekladu.
\ No newline at end of file
diff --git a/translations/sk/3-terrarium/2-intro-to-css/README.md b/translations/sk/3-terrarium/2-intro-to-css/README.md
new file mode 100644
index 00000000..cdb9210c
--- /dev/null
+++ b/translations/sk/3-terrarium/2-intro-to-css/README.md
@@ -0,0 +1,284 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "e375c2aeb94e2407f2667633d39580bd",
+  "translation_date": "2025-08-27T22:47:29+00:00",
+  "source_file": "3-terrarium/2-intro-to-css/README.md",
+  "language_code": "sk"
+}
+-->
+# Projekt Terrárium, časť 2: Úvod do CSS
+
+![Úvod do CSS](../../../../translated_images/webdev101-css.3f7af5991bf53a200d79e7257e5e450408d8ea97f5b531d31b2e3976317338ee.sk.png)
+> Sketchnote od [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Kvíz pred prednáškou
+
+[Kvíz pred prednáškou](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/17)
+
+### Úvod
+
+CSS, alebo Kaskádové štýly (Cascading Style Sheets), rieši dôležitý problém webového vývoja: ako spraviť váš web pekným. Štýlovanie vašich aplikácií ich robí nielen krajšími, ale aj používateľsky prívetivejšími. CSS môžete použiť aj na vytvorenie responzívneho webového dizajnu (RWD) – vďaka tomu budú vaše aplikácie vyzerať dobre bez ohľadu na veľkosť obrazovky, na ktorej sa zobrazujú. CSS však nie je len o vzhľade; jeho špecifikácia zahŕňa aj animácie a transformácie, ktoré umožňujú sofistikované interakcie vo vašich aplikáciách. CSS pracovná skupina pomáha udržiavať aktuálne špecifikácie CSS; ich prácu môžete sledovať na [stránke World Wide Web Consortium](https://www.w3.org/Style/CSS/members).
+
+> Poznámka: CSS je jazyk, ktorý sa vyvíja, rovnako ako všetko na webe, a nie všetky prehliadače podporujú novšie časti špecifikácie. Vždy si overte svoje implementácie na stránke [CanIUse.com](https://caniuse.com).
+
+V tejto lekcii pridáme štýly do nášho online terrária a naučíme sa viac o niekoľkých konceptoch CSS: kaskáde, dedičnosti, používaní selektorov, pozicionovaní a využití CSS na tvorbu rozložení. Počas tohto procesu navrhneme rozloženie terrária a vytvoríme samotné terrárium.
+
+### Predpoklady
+
+Mali by ste mať pripravený HTML súbor pre vaše terrárium, ktorý je pripravený na štýlovanie.
+
+> Pozrite si video
+
+> 
+> [![Video o základoch Git a GitHub](https://img.youtube.com/vi/6yIdOIV9p1I/0.jpg)](https://www.youtube.com/watch?v=6yIdOIV9p1I)
+
+### Úloha
+
+V priečinku s vaším terráriom vytvorte nový súbor s názvom `style.css`. Importujte tento súbor do sekcie `<head>`:
+
+```html
+<link rel="stylesheet" href="./style.css" />
+```
+
+---
+
+## Kaskáda
+
+Kaskádové štýly zahŕňajú myšlienku, že štýly „kaskádujú“, čo znamená, že aplikácia štýlu je riadená jeho prioritou. Štýly nastavené autorom webovej stránky majú prednosť pred tými, ktoré nastaví prehliadač. Štýly nastavené „inline“ majú prednosť pred tými, ktoré sú nastavené v externom štýlovom súbore.
+
+### Úloha
+
+Pridajte inline štýl „color: red“ do vášho `<h1>` tagu:
+
+```HTML
+<h1 style="color: red">My Terrarium</h1>
+```
+
+Potom pridajte nasledujúci kód do vášho súboru `style.css`:
+
+```CSS
+h1 {
+ color: blue;
+}
+```
+
+✅ Ktorá farba sa zobrazí vo vašej webovej aplikácii? Prečo? Dokážete nájsť spôsob, ako prepísať štýly? Kedy by ste to chceli urobiť, alebo prečo nie?
+
+---
+
+## Dedičnosť
+
+Štýly sa dedia od nadradeného štýlu k podriadenému, takže vnorené prvky dedia štýly svojich rodičov.
+
+### Úloha
+
+Nastavte font tela stránky na určitý font a skontrolujte, či vnorený prvok zdedí tento font:
+
+```CSS
+body {
+	font-family: helvetica, arial, sans-serif;
+}
+```
+
+Otvorte konzolu prehliadača na karte „Elements“ a pozorujte font H1. Dedia svoj font z tela stránky, ako je uvedené v prehliadači:
+
+![zdedený font](../../../../translated_images/1.cc07a5cbe114ad1d4728c35134584ac1b87db688eff83cf75985cf31fe0ed95c.sk.png)
+
+✅ Dokážete nastaviť vnorený štýl tak, aby zdedil inú vlastnosť?
+
+---
+
+## Selektory CSS
+
+### Tagy
+
+Doteraz váš súbor `style.css` obsahuje len niekoľko štýlov pre tagy a aplikácia vyzerá dosť zvláštne:
+
+```CSS
+body {
+	font-family: helvetica, arial, sans-serif;
+}
+
+h1 {
+	color: #3a241d;
+	text-align: center;
+}
+```
+
+Tento spôsob štýlovania tagu vám dáva kontrolu nad unikátnymi prvkami, ale potrebujete kontrolovať štýly viacerých rastlín vo vašom terráriu. Na to musíte využiť selektory CSS.
+
+### Ids
+
+Pridajte štýl na rozloženie ľavého a pravého kontajnera. Keďže existuje len jeden ľavý a jeden pravý kontajner, v značkovaní im boli priradené id. Na ich štýlovanie použite `#`:
+
+```CSS
+#left-container {
+	background-color: #eee;
+	width: 15%;
+	left: 0px;
+	top: 0px;
+	position: absolute;
+	height: 100%;
+	padding: 10px;
+}
+
+#right-container {
+	background-color: #eee;
+	width: 15%;
+	right: 0px;
+	top: 0px;
+	position: absolute;
+	height: 100%;
+	padding: 10px;
+}
+```
+
+Tu ste umiestnili tieto kontajnery s absolútnym pozicionovaním na krajnú ľavú a pravú stranu obrazovky a použili ste percentá pre ich šírku, aby sa mohli prispôsobiť malým mobilným obrazovkám.
+
+✅ Tento kód je dosť opakujúci sa, teda nie je „DRY“ (Don't Repeat Yourself); dokážete nájsť lepší spôsob, ako štýlovať tieto id, možno pomocou id a triedy? Bude potrebné zmeniť značkovanie a refaktorovať CSS:
+
+```html
+<div id="left-container" class="container"></div>
+```
+
+### Triedy
+
+V predchádzajúcom príklade ste štýlovali dva unikátne prvky na obrazovke. Ak chcete, aby sa štýly aplikovali na viacero prvkov na obrazovke, môžete použiť triedy CSS. Urobte to pre rozloženie rastlín v ľavom a pravom kontajneri.
+
+Všimnite si, že každá rastlina v HTML značkovaní má kombináciu id a tried. Id sú tu použité JavaScriptom, ktorý pridáte neskôr, na manipuláciu s umiestnením rastlín v terráriu. Triedy však dávajú všetkým rastlinám určitý štýl.
+
+```html
+<div class="plant-holder">
+	<img class="plant" alt="plant" id="plant1" src="./images/plant1.png" />
+</div>
+```
+
+Pridajte nasledujúci kód do vášho súboru `style.css`:
+
+```CSS
+.plant-holder {
+	position: relative;
+	height: 13%;
+	left: -10px;
+}
+
+.plant {
+	position: absolute;
+	max-width: 150%;
+	max-height: 150%;
+	z-index: 2;
+}
+```
+
+Pozoruhodné v tomto úryvku je miešanie relatívneho a absolútneho pozicionovania, o ktorom sa budeme baviť v ďalšej časti. Pozrite sa na spôsob, akým sú výšky spracované pomocou percent:
+
+Nastavili ste výšku držiaka rastlín na 13 %, čo je dobré číslo na zabezpečenie toho, aby sa všetky rastliny zobrazili v každom vertikálnom kontajneri bez potreby posúvania.
+
+Držiak rastlín ste posunuli doľava, aby boli rastliny viac vycentrované v ich kontajneri. Obrázky majú veľké množstvo priehľadného pozadia, aby boli ľahšie presúvateľné, takže ich treba posunúť doľava, aby lepšie zapadli na obrazovku.
+
+Potom samotná rastlina dostala maximálnu šírku 150 %. To umožňuje, aby sa zmenšila, keď sa prehliadač zmenší. Skúste zmeniť veľkosť prehliadača; rastliny zostanú vo svojich kontajneroch, ale zmenšia sa, aby sa zmestili.
+
+Pozoruhodné je aj použitie z-indexu, ktorý ovláda relatívnu výšku prvku (takže rastliny sedia na vrchu kontajnera a vyzerajú, akoby boli vo vnútri terrária).
+
+✅ Prečo potrebujete selektor CSS pre držiak rastlín aj pre samotnú rastlinu?
+
+## Pozicionovanie CSS
+
+Miešanie vlastností pozicionovania (existujú statické, relatívne, fixné, absolútne a sticky pozície) môže byť trochu zložité, ale ak sa to urobí správne, poskytuje to dobrú kontrolu nad prvkami na vašich stránkach.
+
+Absolútne pozicionované prvky sú umiestnené vzhľadom na ich najbližších pozicionovaných predkov, a ak žiadni nie sú, sú umiestnené podľa tela dokumentu.
+
+Relatívne pozicionované prvky sú umiestnené na základe pokynov CSS na úpravu ich umiestnenia od ich pôvodnej pozície.
+
+V našom príklade je `plant-holder` relatívne pozicionovaný prvok, ktorý je umiestnený v absolútne pozicionovanom kontajneri. Výsledné správanie je, že bočné kontajnery sú pripnuté naľavo a napravo, a `plant-holder` je vnorený, prispôsobujúc sa v rámci bočných kontajnerov, čím vytvára priestor na umiestnenie rastlín do vertikálneho radu.
+
+> Samotná `plant` má tiež absolútne pozicionovanie, čo je nevyhnutné na to, aby bola presúvateľná, ako zistíte v ďalšej lekcii.
+
+✅ Experimentujte so zmenou typov pozicionovania bočných kontajnerov a `plant-holder`. Čo sa stane?
+
+## Rozloženia CSS
+
+Teraz použijete to, čo ste sa naučili, na vytvorenie samotného terrária, a to všetko pomocou CSS!
+
+Najprv naštýlujte deti divu `.terrarium` ako zaoblený obdĺžnik pomocou CSS:
+
+```CSS
+.jar-walls {
+	height: 80%;
+	width: 60%;
+	background: #d1e1df;
+	border-radius: 1rem;
+	position: absolute;
+	bottom: 0.5%;
+	left: 20%;
+	opacity: 0.5;
+	z-index: 1;
+}
+
+.jar-top {
+	width: 50%;
+	height: 5%;
+	background: #d1e1df;
+	position: absolute;
+	bottom: 80.5%;
+	left: 25%;
+	opacity: 0.7;
+	z-index: 1;
+}
+
+.jar-bottom {
+	width: 50%;
+	height: 1%;
+	background: #d1e1df;
+	position: absolute;
+	bottom: 0%;
+	left: 25%;
+	opacity: 0.7;
+}
+
+.dirt {
+	width: 60%;
+	height: 5%;
+	background: #3a241d;
+	position: absolute;
+	border-radius: 0 0 1rem 1rem;
+	bottom: 1%;
+	left: 20%;
+	opacity: 0.7;
+	z-index: -1;
+}
+```
+
+Všimnite si použitie percent tu. Ak zmenšíte svoj prehliadač, môžete vidieť, ako sa nádoba tiež prispôsobuje. Tiež si všimnite šírky a výšky v percentách pre prvky nádoby a ako je každý prvok absolútne pozicionovaný v strede, pripnutý na spodok výhľadu.
+
+Používame aj `rem` pre border-radius, čo je dĺžka relatívna k fontu. Prečítajte si viac o tomto type relatívneho merania v [CSS špecifikácii](https://www.w3.org/TR/css-values-3/#font-relative-lengths).
+
+✅ Skúste zmeniť farby nádoby a nepriehľadnosť oproti tým, ktoré má zem. Čo sa stane? Prečo?
+
+---
+
+## 🚀Výzva
+
+Pridajte „bublinkový“ lesk do ľavej dolnej časti nádoby, aby vyzerala viac ako sklo. Budete štýlovať `.jar-glossy-long` a `.jar-glossy-short`, aby vyzerali ako odraz lesku. Takto by to malo vyzerať:
+
+![hotové terrárium](../../../../translated_images/terrarium-final.2f07047ffc597d0a06b06cab28a77801a10dd12fdb6c7fc630e9c40665491c53.sk.png)
+
+Na dokončenie kvízu po prednáške prejdite tento modul Learn: [Štýlovanie HTML aplikácie pomocou CSS](https://docs.microsoft.com/learn/modules/build-simple-website/4-css-basics/?WT.mc_id=academic-77807-sagibbon)
+
+## Kvíz po prednáške
+
+[Kvíz po prednáške](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/18)
+
+## Recenzia a samoštúdium
+
+CSS sa môže zdať klamlivo jednoduché, ale pri snahe dokonale naštýlovať aplikáciu pre všetky prehliadače a všetky veľkosti obrazoviek sa objavujú mnohé výzvy. CSS-Grid a Flexbox sú nástroje, ktoré boli vyvinuté na to, aby túto prácu urobili štruktúrovanejšou a spoľahlivejšou. Naučte sa o týchto nástrojoch hraním hier [Flexbox Froggy](https://flexboxfroggy.com/) a [Grid Garden](https://codepip.com/games/grid-garden/).
+
+## Zadanie
+
+[Refaktorovanie CSS](assignment.md)
+
+---
+
+**Upozornenie**:  
+Tento dokument bol preložený pomocou služby AI prekladu [Co-op Translator](https://github.com/Azure/co-op-translator). Hoci sa snažíme o presnosť, prosím, berte na vedomie, že automatizované preklady môžu obsahovať chyby alebo nepresnosti. Pôvodný dokument v jeho rodnom jazyku by mal byť považovaný za autoritatívny zdroj. Pre kritické informácie sa odporúča profesionálny ľudský preklad. Nenesieme zodpovednosť za akékoľvek nedorozumenia alebo nesprávne interpretácie vyplývajúce z použitia tohto prekladu.
\ No newline at end of file
diff --git a/translations/sk/3-terrarium/2-intro-to-css/assignment.md b/translations/sk/3-terrarium/2-intro-to-css/assignment.md
new file mode 100644
index 00000000..56308979
--- /dev/null
+++ b/translations/sk/3-terrarium/2-intro-to-css/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "9d4d75af51aaccfe9af778f792c62919",
+  "translation_date": "2025-08-27T22:49:03+00:00",
+  "source_file": "3-terrarium/2-intro-to-css/assignment.md",
+  "language_code": "sk"
+}
+-->
+# Refaktoring CSS
+
+## Pokyny
+
+Preštýlujte terárium pomocou Flexboxu alebo CSS Grid a urobte snímky obrazovky, aby ste ukázali, že ste ho otestovali v niekoľkých prehliadačoch. Možno bude potrebné zmeniť značkovanie, takže vytvorte novú verziu aplikácie s umiestneným umením pre váš refaktoring. Zatiaľ si nerobte starosti s tým, aby boli prvky ťahateľné; momentálne iba refaktorujte HTML a CSS.
+
+## Hodnotiace kritériá
+
+| Kritérium | Vynikajúce                                                      | Dostatočné                   | Potrebuje zlepšenie                 |
+| --------- | --------------------------------------------------------------- | ---------------------------- | ----------------------------------- |
+|           | Predstavte úplne preštýlované terárium pomocou Flexboxu alebo CSS Grid | Preštýlujte niekoľko prvkov  | Nepodarí sa preštýlovať terárium vôbec |
+
+---
+
+**Upozornenie**:  
+Tento dokument bol preložený pomocou služby na automatický preklad [Co-op Translator](https://github.com/Azure/co-op-translator). Aj keď sa snažíme o presnosť, upozorňujeme, že automatické preklady môžu obsahovať chyby alebo nepresnosti. Pôvodný dokument v jeho pôvodnom jazyku by mal byť považovaný za autoritatívny zdroj. Pre dôležité informácie sa odporúča profesionálny ľudský preklad. Nezodpovedáme za akékoľvek nedorozumenia alebo nesprávne interpretácie vyplývajúce z použitia tohto prekladu.
\ No newline at end of file
diff --git a/translations/sk/3-terrarium/3-intro-to-DOM-and-closures/README.md b/translations/sk/3-terrarium/3-intro-to-DOM-and-closures/README.md
new file mode 100644
index 00000000..e97c4823
--- /dev/null
+++ b/translations/sk/3-terrarium/3-intro-to-DOM-and-closures/README.md
@@ -0,0 +1,230 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "30f8903a1f290e3d438dc2c70fe60259",
+  "translation_date": "2025-08-27T22:49:22+00:00",
+  "source_file": "3-terrarium/3-intro-to-DOM-and-closures/README.md",
+  "language_code": "sk"
+}
+-->
+# Projekt Terrárium, časť 3: Manipulácia s DOM a uzáver
+
+![DOM a uzáver](../../../../translated_images/webdev101-js.10280393044d7eaaec7e847574946add7ddae6be2b2194567d848b61d849334a.sk.png)
+> Sketchnote od [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Kvíz pred prednáškou
+
+[Kvíz pred prednáškou](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/19)
+
+### Úvod
+
+Manipulácia s DOM, alebo "Document Object Model", je kľúčovým aspektom vývoja webu. Podľa [MDN](https://developer.mozilla.org/docs/Web/API/Document_Object_Model/Introduction): "Document Object Model (DOM) je dátová reprezentácia objektov, ktoré tvoria štruktúru a obsah dokumentu na webe." Výzvy spojené s manipuláciou DOM na webe často viedli k používaniu JavaScriptových frameworkov namiesto čistého JavaScriptu na správu DOM, ale my to zvládneme sami!
+
+Okrem toho táto lekcia predstaví koncept [JavaScriptového uzáveru (closure)](https://developer.mozilla.org/docs/Web/JavaScript/Closures), ktorý si môžete predstaviť ako funkciu uzavretú inou funkciou, takže vnútorná funkcia má prístup k rozsahu vonkajšej funkcie.
+
+> JavaScriptové uzávery sú rozsiahla a komplexná téma. Táto lekcia sa dotýka najzákladnejšej myšlienky, že v kóde tohto terrária nájdete uzáver: vnútornú funkciu a vonkajšiu funkciu skonštruované tak, aby vnútorná funkcia mala prístup k rozsahu vonkajšej funkcie. Pre oveľa viac informácií o tom, ako to funguje, navštívte [rozsiahlu dokumentáciu](https://developer.mozilla.org/docs/Web/JavaScript/Closures).
+
+Použijeme uzáver na manipuláciu s DOM.
+
+Predstavte si DOM ako strom, ktorý reprezentuje všetky spôsoby, akými je možné manipulovať s dokumentom webovej stránky. Boli napísané rôzne API (Application Program Interfaces), aby programátori mohli pomocou svojho preferovaného programovacieho jazyka pristupovať k DOM a upravovať, meniť, preusporadúvať a inak ho spravovať.
+
+![Reprezentácia stromu DOM](../../../../translated_images/dom-tree.7daf0e763cbbba9273f9a66fe04c98276d7d23932309b195cb273a9cf1819b42.sk.png)
+
+> Reprezentácia DOM a HTML značiek, ktoré naň odkazujú. Od [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
+
+V tejto lekcii dokončíme náš interaktívny projekt terrária vytvorením JavaScriptu, ktorý umožní používateľovi manipulovať s rastlinami na stránke.
+
+### Predpoklad
+
+Mali by ste mať vytvorený HTML a CSS pre vaše terrárium. Na konci tejto lekcie budete schopní presúvať rastliny do a z terrária ich ťahaním.
+
+### Úloha
+
+Vo vašom priečinku terrária vytvorte nový súbor s názvom `script.js`. Importujte tento súbor do sekcie `<head>`:
+
+```html
+	<script src="./script.js" defer></script>
+```
+
+> Poznámka: použite `defer` pri importe externého JavaScriptového súboru do HTML súboru, aby sa JavaScript vykonal až po úplnom načítaní HTML súboru. Môžete tiež použiť atribút `async`, ktorý umožňuje vykonanie skriptu počas parsovania HTML súboru, ale v našom prípade je dôležité, aby boli HTML elementy plne dostupné na ťahanie predtým, ako povolíme vykonanie skriptu na ťahanie.
+---
+
+## Elementy DOM
+
+Prvá vec, ktorú musíte urobiť, je vytvoriť referencie na elementy, ktoré chcete manipulovať v DOM. V našom prípade ide o 14 rastlín, ktoré momentálne čakajú v bočných paneloch.
+
+### Úloha
+
+```html
+dragElement(document.getElementById('plant1'));
+dragElement(document.getElementById('plant2'));
+dragElement(document.getElementById('plant3'));
+dragElement(document.getElementById('plant4'));
+dragElement(document.getElementById('plant5'));
+dragElement(document.getElementById('plant6'));
+dragElement(document.getElementById('plant7'));
+dragElement(document.getElementById('plant8'));
+dragElement(document.getElementById('plant9'));
+dragElement(document.getElementById('plant10'));
+dragElement(document.getElementById('plant11'));
+dragElement(document.getElementById('plant12'));
+dragElement(document.getElementById('plant13'));
+dragElement(document.getElementById('plant14'));
+```
+
+Čo sa tu deje? Odkazujete na dokument a prehľadávate jeho DOM, aby ste našli element s konkrétnym Id. Pamätáte si z prvej lekcie o HTML, že ste každému obrázku rastliny priradili individuálne Id (`id="plant1"`)? Teraz túto prácu využijete. Po identifikovaní každého elementu ho odovzdáte funkcii s názvom `dragElement`, ktorú o chvíľu vytvoríte. Týmto spôsobom sa element v HTML stane ťahateľným, alebo čoskoro bude.
+
+✅ Prečo odkazujeme na elementy podľa Id? Prečo nie podľa ich CSS triedy? Môžete sa vrátiť k predchádzajúcej lekcii o CSS, aby ste odpovedali na túto otázku.
+
+---
+
+## Uzáver
+
+Teraz ste pripravení vytvoriť uzáver `dragElement`, ktorý je vonkajšou funkciou uzatvárajúcou vnútornú funkciu alebo funkcie (v našom prípade budú tri).
+
+Uzávery sú užitočné, keď jedna alebo viac funkcií potrebuje prístup k rozsahu vonkajšej funkcie. Tu je príklad:
+
+```javascript
+function displayCandy(){
+	let candy = ['jellybeans'];
+	function addCandy(candyType) {
+		candy.push(candyType)
+	}
+	addCandy('gumdrops');
+}
+displayCandy();
+console.log(candy)
+```
+
+V tomto príklade funkcia `displayCandy` obklopuje funkciu, ktorá pridáva nový typ cukríka do poľa, ktoré už existuje vo funkcii. Ak by ste tento kód spustili, pole `candy` by bolo nedefinované, pretože ide o lokálnu premennú (lokálnu pre uzáver).
+
+✅ Ako môžete spraviť pole `candy` prístupným? Skúste ho presunúť mimo uzáver. Týmto spôsobom sa pole stane globálnym, namiesto toho, aby zostalo dostupné iba v lokálnom rozsahu uzáveru.
+
+### Úloha
+
+Pod deklaráciami elementov v `script.js` vytvorte funkciu:
+
+```javascript
+function dragElement(terrariumElement) {
+	//set 4 positions for positioning on the screen
+	let pos1 = 0,
+		pos2 = 0,
+		pos3 = 0,
+		pos4 = 0;
+	terrariumElement.onpointerdown = pointerDrag;
+}
+```
+
+`dragElement` získava svoj objekt `terrariumElement` z deklarácií na začiatku skriptu. Potom nastavíte niektoré lokálne pozície na `0` pre objekt odovzdaný do funkcie. Toto sú lokálne premenné, ktoré budú manipulované pre každý element, keď pridáte funkciu ťahania a púšťania v rámci uzáveru pre každý element. Terrárium bude naplnené týmito ťahanými elementmi, takže aplikácia musí sledovať, kde sú umiestnené.
+
+Okrem toho je elementu `terrariumElement`, ktorý je odovzdaný tejto funkcii, priradená udalosť `pointerdown`, ktorá je súčasťou [webových API](https://developer.mozilla.org/docs/Web/API) navrhnutých na pomoc pri správe DOM. `onpointerdown` sa spustí, keď je stlačené tlačidlo, alebo v našom prípade, keď sa dotknete ťahateľného elementu. Tento obslužný program udalostí funguje na [webových aj mobilných prehliadačoch](https://caniuse.com/?search=onpointerdown), s niekoľkými výnimkami.
+
+✅ [Obslužný program udalostí `onclick`](https://developer.mozilla.org/docs/Web/API/GlobalEventHandlers/onclick) má oveľa väčšiu podporu naprieč prehliadačmi; prečo by ste ho tu nepoužili? Zamyslite sa nad presným typom interakcie obrazovky, ktorú sa tu snažíte vytvoriť.
+
+---
+
+## Funkcia Pointerdrag
+
+Element `terrariumElement` je pripravený na ťahanie; keď sa spustí udalosť `onpointerdown`, vyvolá sa funkcia `pointerDrag`. Pridajte túto funkciu hneď pod tento riadok: `terrariumElement.onpointerdown = pointerDrag;`:
+
+### Úloha 
+
+```javascript
+function pointerDrag(e) {
+	e.preventDefault();
+	console.log(e);
+	pos3 = e.clientX;
+	pos4 = e.clientY;
+}
+```
+
+Deje sa niekoľko vecí. Najprv zabránite predvoleným udalostiam, ktoré sa normálne dejú pri pointerdown, pomocou `e.preventDefault();`. Týmto spôsobom máte väčšiu kontrolu nad správaním rozhrania.
+
+> Vráťte sa k tomuto riadku, keď úplne dokončíte súbor skriptu, a skúste to bez `e.preventDefault()` - čo sa stane?
+
+Po druhé, otvorte `index.html` v okne prehliadača a skontrolujte rozhranie. Keď kliknete na rastlinu, môžete vidieť, ako sa zachytáva udalosť 'e'. Preskúmajte udalosť, aby ste videli, koľko informácií sa zhromažďuje jednou udalosťou pointerdown!  
+
+Ďalej si všimnite, ako sú lokálne premenné `pos3` a `pos4` nastavené na e.clientX. Tieto hodnoty zachytávajú súradnice x a y rastliny v momente, keď na ňu kliknete alebo sa jej dotknete. Budete potrebovať jemnú kontrolu nad správaním rastlín, keď na ne kliknete a ťaháte ich, takže sledujete ich súradnice.
+
+✅ Je už jasnejšie, prečo je celá táto aplikácia postavená na jednom veľkom uzávere? Ak by nebola, ako by ste udržali rozsah pre každú z 14 ťahateľných rastlín?
+
+Dokončite počiatočnú funkciu pridaním ďalších dvoch manipulácií udalostí pointer pod `pos4 = e.clientY`:
+
+```html
+document.onpointermove = elementDrag;
+document.onpointerup = stopElementDrag;
+```
+Teraz naznačujete, že chcete, aby sa rastlina ťahala spolu s ukazovateľom, keď ju presúvate, a aby sa gesto ťahania zastavilo, keď rastlinu odznačíte. `onpointermove` a `onpointerup` sú všetky súčasťou rovnakého API ako `onpointerdown`. Rozhranie teraz vyhodí chyby, pretože ste ešte nedefinovali funkcie `elementDrag` a `stopElementDrag`, takže ich teraz vytvorte.
+
+## Funkcie elementDrag a stopElementDrag
+
+Uzáver dokončíte pridaním ďalších dvoch vnútorných funkcií, ktoré budú spracovávať, čo sa stane, keď rastlinu ťaháte a keď prestanete ťahať. Chcete, aby ste mohli kedykoľvek ťahať akúkoľvek rastlinu a umiestniť ju kdekoľvek na obrazovke. Toto rozhranie je pomerne neobmedzené (napríklad neexistuje zóna na púšťanie), aby ste si mohli navrhnúť svoje terrárium presne podľa svojich predstáv pridaním, odstránením a preusporiadaním rastlín.
+
+### Úloha
+
+Pridajte funkciu `elementDrag` hneď za zatváraciu zloženú zátvorku `pointerDrag`:
+
+```javascript
+function elementDrag(e) {
+	pos1 = pos3 - e.clientX;
+	pos2 = pos4 - e.clientY;
+	pos3 = e.clientX;
+	pos4 = e.clientY;
+	console.log(pos1, pos2, pos3, pos4);
+	terrariumElement.style.top = terrariumElement.offsetTop - pos2 + 'px';
+	terrariumElement.style.left = terrariumElement.offsetLeft - pos1 + 'px';
+}
+```
+V tejto funkcii robíte veľa úprav počiatočných pozícií 1-4, ktoré ste nastavili ako lokálne premenné vo vonkajšej funkcii. Čo sa tu deje?
+
+Keď ťaháte, priradíte `pos1` tak, že ho nastavíte na `pos3` (ktoré ste nastavili skôr ako `e.clientX`) mínus aktuálnu hodnotu `e.clientX`. Podobnú operáciu vykonáte s `pos2`. Potom resetujete `pos3` a `pos4` na nové súradnice X a Y elementu. Tieto zmeny môžete sledovať v konzole počas ťahania. Potom manipulujete so štýlom CSS rastliny, aby ste nastavili jej novú pozíciu na základe nových pozícií `pos1` a `pos2`, pričom vypočítate horné a ľavé súradnice X a Y rastliny na základe porovnania jej offsetu s týmito novými pozíciami.
+
+> `offsetTop` a `offsetLeft` sú vlastnosti CSS, ktoré nastavujú pozíciu elementu na základe jeho rodiča; jeho rodičom môže byť akýkoľvek element, ktorý nie je pozicionovaný ako `static`. 
+
+Všetky tieto prepočty pozícií vám umožňujú doladiť správanie terrária a jeho rastlín.
+
+### Úloha 
+
+Poslednou úlohou na dokončenie rozhrania je pridať funkciu `stopElementDrag` za zatváraciu zloženú zátvorku `elementDrag`:
+
+```javascript
+function stopElementDrag() {
+	document.onpointerup = null;
+	document.onpointermove = null;
+}
+```
+
+Táto malá funkcia resetuje udalosti `onpointerup` a `onpointermove`, aby ste mohli buď reštartovať pohyb rastliny tým, že ju začnete znova ťahať, alebo začať ťahať novú rastlinu.
+
+✅ Čo sa stane, ak tieto udalosti nenastavíte na null?
+
+Teraz ste dokončili svoj projekt!
+
+🥇Gratulujeme! Dokončili ste svoje krásne terrárium. ![hotové terrárium](../../../../translated_images/terrarium-final.0920f16e87c13a84cd2b553a5af9a3ad1cffbd41fbf8ce715d9e9c43809a5e2c.sk.png)
+
+---
+
+## 🚀Výzva
+
+Pridajte nový obslužný program udalostí do svojho uzáveru, aby ste s rastlinami mohli robiť niečo viac; napríklad dvojitým kliknutím na rastlinu ju presuňte do popredia. Buďte kreatívni!
+
+## Kvíz po prednáške
+
+[Kvíz po prednáške](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/20)
+
+## Prehľad a samoštúdium
+
+Hoci sa ťahanie elementov po obrazovke môže zdať triviálne, existuje mnoho spôsobov, ako to urobiť, a mnoho úskalí, v závislosti od efektu, ktorý chcete dosiahnuť. V skutočnosti existuje celé [API na ťahanie a púšťanie](https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_API), ktoré môžete vyskúšať. Nepoužili sme ho v tomto module, pretože efekt, ktorý sme chceli, bol trochu iný, ale vyskúšajte toto API na svojom vlastnom projekte a uvidíte, čo dokážete.
+
+Nájdite viac informácií o pointer udalostiach v [dokumentácii W3C](https://www.w3.org/TR/pointerevents1/) a na [MDN web docs](https://developer.mozilla.org/docs/Web/API/Pointer_events).
+
+Vždy si overte schopnosti prehliadačov pomocou [CanIUse.com](https://caniuse.com/).
+
+## Zadanie
+
+[Pracujte trochu viac s DOM](assignment.md)
+
+---
+
+**Upozornenie**:  
+Tento dokument bol preložený pomocou služby AI prekladu [Co-op Translator](https://github.com/Azure/co-op-translator). Hoci sa snažíme o presnosť, prosím, berte na vedomie, že automatizované preklady môžu obsahovať chyby alebo nepresnosti. Pôvodný dokument v jeho pôvodnom jazyku by mal byť považovaný za autoritatívny zdroj. Pre kritické informácie sa odporúča profesionálny ľudský preklad. Nie sme zodpovední za žiadne nedorozumenia alebo nesprávne interpretácie vyplývajúce z použitia tohto prekladu.
\ No newline at end of file
diff --git a/translations/sk/3-terrarium/3-intro-to-DOM-and-closures/assignment.md b/translations/sk/3-terrarium/3-intro-to-DOM-and-closures/assignment.md
new file mode 100644
index 00000000..f735913d
--- /dev/null
+++ b/translations/sk/3-terrarium/3-intro-to-DOM-and-closures/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "22fb6c3cb570c47f1ac65048393941fa",
+  "translation_date": "2025-08-27T22:51:19+00:00",
+  "source_file": "3-terrarium/3-intro-to-DOM-and-closures/assignment.md",
+  "language_code": "sk"
+}
+-->
+# Pracujte trochu viac s DOM
+
+## Pokyny
+
+Preskúmajte DOM trochu viac tým, že si „adoptujete“ DOM element. Navštívte [zoznam DOM rozhraní](https://developer.mozilla.org/docs/Web/API/Document_Object_Model) na MDN a vyberte si jedno. Nájdite jeho použitie na webovej stránke na internete a napíšte vysvetlenie, ako sa používa.
+
+## Hodnotiace kritériá
+
+| Kritérium | Vynikajúce                                  | Dostatočné                                      | Potrebuje zlepšenie     |
+| --------- | ------------------------------------------- | ------------------------------------------------ | ----------------------- |
+|           | Napísaný odsek s príkladom                  | Napísaný odsek bez príkladu                      | Odsek nie je napísaný   |
+
+---
+
+**Upozornenie**:  
+Tento dokument bol preložený pomocou služby AI prekladu [Co-op Translator](https://github.com/Azure/co-op-translator). Aj keď sa snažíme o presnosť, prosím, berte na vedomie, že automatizované preklady môžu obsahovať chyby alebo nepresnosti. Pôvodný dokument v jeho rodnom jazyku by mal byť považovaný za autoritatívny zdroj. Pre kritické informácie sa odporúča profesionálny ľudský preklad. Nenesieme zodpovednosť za akékoľvek nedorozumenia alebo nesprávne interpretácie vyplývajúce z použitia tohto prekladu.
\ No newline at end of file
diff --git a/translations/sk/3-terrarium/README.md b/translations/sk/3-terrarium/README.md
new file mode 100644
index 00000000..eef632b0
--- /dev/null
+++ b/translations/sk/3-terrarium/README.md
@@ -0,0 +1,45 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "7965cd2bc5dc92ad888dc4c6ab2ab70a",
+  "translation_date": "2025-08-27T22:44:36+00:00",
+  "source_file": "3-terrarium/README.md",
+  "language_code": "sk"
+}
+-->
+# Moje terárium: Projekt na učenie sa o HTML, CSS a manipulácii s DOM pomocou JavaScriptu 🌵🌱
+
+Malá meditácia s kódom na princípe drag and drop. S trochou HTML, JS a CSS budete schopní vytvoriť webové rozhranie, naštýlovať ho a dokonca pridať rôzne interakcie podľa vlastného výberu.
+
+![moje terárium](../../../translated_images/screenshot_gray.0c796099a1f9f25e40aa55ead81f268434c00af30d7092490759945eda63067d.sk.png)
+
+# Lekcie
+
+1. [Úvod do HTML](./1-intro-to-html/README.md)
+2. [Úvod do CSS](./2-intro-to-css/README.md)
+3. [Úvod do DOM a uzávierok v JavaScripte](./3-intro-to-DOM-and-closures/README.md)
+
+## Poďakovania
+
+Napísané s ♥️ od [Jen Looper](https://www.twitter.com/jenlooper)
+
+Terárium vytvorené pomocou CSS bolo inšpirované sklenenou nádobou od Jakuba Mandru na [codepen](https://codepen.io/Rotarepmi/pen/rjpNZY).
+
+Ilustrácie sú ručne kreslené [Jen Looper](http://jenlooper.com) s pomocou aplikácie Procreate.
+
+## Nasadenie vášho terária
+
+Svoje terárium môžete nasadiť alebo publikovať na webe pomocou Azure Static Web Apps.
+
+1. Forknite toto repozitórium
+
+2. Stlačte toto tlačidlo
+
+[![Tlačidlo na nasadenie do Azure](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/?feature.customportal=false&WT.mc_id=academic-77807-sagibbon#create/Microsoft.StaticApp)
+
+3. Prejdite sprievodcom na vytvorenie vašej aplikácie. Uistite sa, že nastavíte koreň aplikácie buď na `/solution` alebo na koreň vašej kódovej základne. Táto aplikácia neobsahuje API, takže sa tým nemusíte zaoberať. Váš forkovaný repozitár bude obsahovať priečinok GitHub, ktorý pomôže službám Azure Static Web Apps zostaviť a publikovať vašu aplikáciu na novú URL adresu.
+
+---
+
+**Upozornenie**:  
+Tento dokument bol preložený pomocou služby AI prekladu [Co-op Translator](https://github.com/Azure/co-op-translator). Hoci sa snažíme o presnosť, prosím, berte na vedomie, že automatizované preklady môžu obsahovať chyby alebo nepresnosti. Pôvodný dokument v jeho pôvodnom jazyku by mal byť považovaný za autoritatívny zdroj. Pre kritické informácie sa odporúča profesionálny ľudský preklad. Nie sme zodpovední za akékoľvek nedorozumenia alebo nesprávne interpretácie vyplývajúce z použitia tohto prekladu.
\ No newline at end of file
diff --git a/translations/sk/3-terrarium/solution/README.md b/translations/sk/3-terrarium/solution/README.md
new file mode 100644
index 00000000..80efe114
--- /dev/null
+++ b/translations/sk/3-terrarium/solution/README.md
@@ -0,0 +1,39 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "6329fbe8bd936068debd78cca6f09c0a",
+  "translation_date": "2025-08-27T22:47:01+00:00",
+  "source_file": "3-terrarium/solution/README.md",
+  "language_code": "sk"
+}
+-->
+# Moje terárium: Projekt na učenie sa o HTML, CSS a manipulácii s DOM pomocou JavaScriptu 🌵🌱
+
+Malá meditácia s kódom na princípe drag and drop. S trochou HTML, JS a CSS môžete vytvoriť webové rozhranie, upraviť jeho štýl a pridať interakciu.
+
+![moje terárium](../../../../translated_images/screenshot_gray.0c796099a1f9f25e40aa55ead81f268434c00af30d7092490759945eda63067d.sk.png)
+
+## Poďakovania
+
+Napísané s ♥️ od [Jen Looper](https://www.twitter.com/jenlooper)
+
+Terárium vytvorené pomocou CSS bolo inšpirované sklenenou nádobou od Jakuba Mandru na [codepen](https://codepen.io/Rotarepmi/pen/rjpNZY).
+
+Ilustrácie boli ručne nakreslené [Jen Looper](http://jenlooper.com) pomocou aplikácie Procreate.
+
+## Nasadenie vášho terária
+
+Svoje terárium môžete nasadiť alebo publikovať na web pomocou Azure Static Web Apps.
+
+1. Forknite toto repozitórium
+
+2. Stlačte toto tlačidlo
+
+[![Tlačidlo na nasadenie do Azure](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/?feature.customportal=false&WT.mc_id=academic-77807-sagibbon#create/Microsoft.StaticApp)
+
+3. Prejdite sprievodcom na vytvorenie vašej aplikácie. Uistite sa, že nastavíte koreň aplikácie buď na `/solution`, alebo na koreň vašej kódovej základne. Táto aplikácia neobsahuje API, takže si s tým nemusíte robiť starosti. Vo vašom forknutom repozitári sa vytvorí priečinok .github, ktorý pomôže službe Azure Static Web Apps zostaviť a publikovať vašu aplikáciu na novú URL adresu.
+
+---
+
+**Upozornenie**:  
+Tento dokument bol preložený pomocou služby AI prekladu [Co-op Translator](https://github.com/Azure/co-op-translator). Hoci sa snažíme o presnosť, prosím, berte na vedomie, že automatizované preklady môžu obsahovať chyby alebo nepresnosti. Pôvodný dokument v jeho rodnom jazyku by mal byť považovaný za autoritatívny zdroj. Pre kritické informácie sa odporúča profesionálny ľudský preklad. Nie sme zodpovední za akékoľvek nedorozumenia alebo nesprávne interpretácie vyplývajúce z použitia tohto prekladu.
\ No newline at end of file
diff --git a/translations/sk/4-typing-game/README.md b/translations/sk/4-typing-game/README.md
new file mode 100644
index 00000000..1205ca96
--- /dev/null
+++ b/translations/sk/4-typing-game/README.md
@@ -0,0 +1,44 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "957547b822c40042e07d591c4fbfde4f",
+  "translation_date": "2025-08-27T22:55:18+00:00",
+  "source_file": "4-typing-game/README.md",
+  "language_code": "sk"
+}
+-->
+# Programovanie riadené udalosťami - Vytvorenie hry na písanie
+
+## Úvod
+
+Písanie je jednou z najviac podceňovaných zručností vývojára. Schopnosť rýchlo preniesť myšlienky z hlavy do editora umožňuje voľný tok kreativity. Jedným z najlepších spôsobov, ako sa naučiť, je hrať hru!
+
+> Takže, poďme vytvoriť hru na písanie!
+
+Použijete zručnosti v JavaScripte, HTML a CSS, ktoré ste si doteraz osvojili, na vytvorenie hry na písanie. Hra hráčovi zobrazí náhodný citát (používame citáty [Sherlocka Holmesa](https://en.wikipedia.org/wiki/Sherlock_Holmes)) a zmeria, ako dlho hráčovi trvá, kým ho presne napíše. Použijete zručnosti v JavaScripte, HTML a CSS, ktoré ste si doteraz osvojili, na vytvorenie hry na písanie.
+
+![demo](../../../4-typing-game/images/demo.gif)
+
+## Predpoklady
+
+Táto lekcia predpokladá, že ste oboznámení s nasledujúcimi konceptmi:
+
+- Vytváranie textových vstupov a ovládacích tlačidiel
+- CSS a nastavovanie štýlov pomocou tried
+- Základy JavaScriptu
+  - Vytváranie poľa
+  - Generovanie náhodného čísla
+  - Získanie aktuálneho času
+
+## Lekcia
+
+[Vytvorenie hry na písanie pomocou programovania riadeného udalosťami](./typing-game/README.md)
+
+## Kredity
+
+Napísané s ♥️ od [Christopher Harrison](http://www.twitter.com/geektrainer)
+
+---
+
+**Upozornenie**:  
+Tento dokument bol preložený pomocou služby AI prekladu [Co-op Translator](https://github.com/Azure/co-op-translator). Hoci sa snažíme o presnosť, prosím, berte na vedomie, že automatizované preklady môžu obsahovať chyby alebo nepresnosti. Pôvodný dokument v jeho rodnom jazyku by mal byť považovaný za autoritatívny zdroj. Pre kritické informácie sa odporúča profesionálny ľudský preklad. Nie sme zodpovední za akékoľvek nedorozumenia alebo nesprávne interpretácie vyplývajúce z použitia tohto prekladu.
\ No newline at end of file
diff --git a/translations/sk/4-typing-game/solution/README.md b/translations/sk/4-typing-game/solution/README.md
new file mode 100644
index 00000000..a2d01c06
--- /dev/null
+++ b/translations/sk/4-typing-game/solution/README.md
@@ -0,0 +1,15 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "068cbb9b3c10a96d503f6cdd6c9ace8c",
+  "translation_date": "2025-08-27T22:58:22+00:00",
+  "source_file": "4-typing-game/solution/README.md",
+  "language_code": "sk"
+}
+-->
+Toto je zástupný text, zámerne ponechaný prázdny
+
+---
+
+**Upozornenie**:  
+Tento dokument bol preložený pomocou služby AI prekladu [Co-op Translator](https://github.com/Azure/co-op-translator). Hoci sa snažíme o presnosť, prosím, berte na vedomie, že automatizované preklady môžu obsahovať chyby alebo nepresnosti. Pôvodný dokument v jeho rodnom jazyku by mal byť považovaný za autoritatívny zdroj. Pre kritické informácie sa odporúča profesionálny ľudský preklad. Nenesieme zodpovednosť za akékoľvek nedorozumenia alebo nesprávne interpretácie vyplývajúce z použitia tohto prekladu.
\ No newline at end of file
diff --git a/translations/sk/4-typing-game/typing-game/README.md b/translations/sk/4-typing-game/typing-game/README.md
new file mode 100644
index 00000000..f9deb13a
--- /dev/null
+++ b/translations/sk/4-typing-game/typing-game/README.md
@@ -0,0 +1,353 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "e982871b8388c59c22a41b73b5fca70f",
+  "translation_date": "2025-08-27T22:55:41+00:00",
+  "source_file": "4-typing-game/typing-game/README.md",
+  "language_code": "sk"
+}
+-->
+# Vytvorenie hry pomocou udalostí
+
+## Kvíz pred prednáškou
+
+[Kvíz pred prednáškou](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/21)
+
+## Programovanie riadené udalosťami
+
+Pri vytváraní aplikácie prehliadača poskytujeme grafické používateľské rozhranie (GUI), ktoré používateľ používa na interakciu s tým, čo sme vytvorili. Najbežnejším spôsobom interakcie s prehliadačom je klikanie a písanie do rôznych prvkov. Výzvou pre nás ako vývojárov je, že nevieme, kedy tieto operácie vykonajú!
+
+[Programovanie riadené udalosťami](https://en.wikipedia.org/wiki/Event-driven_programming) je názov pre typ programovania, ktorý potrebujeme na vytvorenie nášho GUI. Ak túto frázu trochu rozoberieme, vidíme, že jadrovým slovom je tu **udalosť**. [Udalosť](https://www.merriam-webster.com/dictionary/event), podľa Merriam-Webster, je definovaná ako „niečo, čo sa stane“. Toto dokonale opisuje našu situáciu. Vieme, že sa niečo stane, na čo chceme reagovať vykonaním kódu, ale nevieme, kedy sa to stane.
+
+Spôsob, akým označíme časť kódu, ktorú chceme vykonať, je vytvorenie funkcie. Keď premýšľame o [procedurálnom programovaní](https://en.wikipedia.org/wiki/Procedural_programming), funkcie sa volajú v konkrétnom poradí. To isté platí aj pre programovanie riadené udalosťami. Rozdiel je v tom, **ako** sa funkcie volajú.
+
+Na spracovanie udalostí (kliknutie na tlačidlo, písanie atď.) registrujeme **poslucháčov udalostí**. Poslucháč udalostí je funkcia, ktorá čaká na výskyt udalosti a vykoná sa ako reakcia. Poslucháči udalostí môžu aktualizovať používateľské rozhranie, vykonávať volania na server alebo čokoľvek iné, čo je potrebné urobiť ako reakcia na akciu používateľa. Poslucháča udalostí pridáme pomocou [addEventListener](https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener) a poskytneme funkciu na vykonanie.
+
+> **NOTE:** Stojí za to zdôrazniť, že existuje množstvo spôsobov, ako vytvoriť poslucháčov udalostí. Môžete použiť anonymné funkcie alebo vytvoriť pomenované. Môžete použiť rôzne skratky, ako je nastavenie vlastnosti `click` alebo použitie `addEventListener`. V našom cvičení sa zameriame na `addEventListener` a anonymné funkcie, pretože je to pravdepodobne najbežnejšia technika, ktorú weboví vývojári používajú. Je to tiež najflexibilnejšie, pretože `addEventListener` funguje pre všetky udalosti a názov udalosti môže byť poskytnutý ako parameter.
+
+### Bežné udalosti
+
+Existuje [množstvo udalostí](https://developer.mozilla.org/docs/Web/Events), ktoré môžete počúvať pri vytváraní aplikácie. Prakticky všetko, čo používateľ na stránke urobí, vyvolá udalosť, čo vám dáva veľkú moc zabezpečiť, aby získal požadovaný zážitok. Našťastie budete zvyčajne potrebovať iba malú časť udalostí. Tu je niekoľko bežných (vrátane dvoch, ktoré použijeme pri vytváraní našej hry):
+
+- [click](https://developer.mozilla.org/docs/Web/API/Element/click_event): Používateľ klikol na niečo, zvyčajne na tlačidlo alebo hypertextový odkaz
+- [contextmenu](https://developer.mozilla.org/docs/Web/API/Element/contextmenu_event): Používateľ klikol pravým tlačidlom myši
+- [select](https://developer.mozilla.org/docs/Web/API/Element/select_event): Používateľ označil nejaký text
+- [input](https://developer.mozilla.org/docs/Web/API/Element/input_event): Používateľ zadal nejaký text
+
+## Vytvorenie hry
+
+Vytvoríme hru, aby sme preskúmali, ako udalosti fungujú v JavaScripte. Naša hra otestuje hráčove schopnosti písania, čo je jedna z najviac podceňovaných zručností, ktoré by mal mať každý vývojár. Všetci by sme mali trénovať svoje písanie! Všeobecný priebeh hry bude vyzerať takto:
+
+- Hráč klikne na tlačidlo štart a zobrazí sa mu citát na písanie
+- Hráč píše citát čo najrýchlejšie do textového poľa
+  - Po dokončení každého slova sa zvýrazní ďalšie
+  - Ak hráč urobí preklep, textové pole sa zmení na červené
+  - Keď hráč dokončí citát, zobrazí sa správa o úspechu s uplynutým časom
+
+Poďme si hru vytvoriť a naučiť sa niečo o udalostiach!
+
+### Štruktúra súborov
+
+Budeme potrebovať celkovo tri súbory: **index.html**, **script.js** a **style.css**. Začnime ich nastavením, aby sme si uľahčili prácu.
+
+- Vytvorte nový priečinok pre svoju prácu otvorením konzoly alebo terminálového okna a zadaním nasledujúceho príkazu:
+
+```bash
+# Linux or macOS
+mkdir typing-game && cd typing-game
+
+# Windows
+md typing-game && cd typing-game
+```
+
+- Otvorte Visual Studio Code
+
+```bash
+code .
+```
+
+- Pridajte do priečinka vo Visual Studio Code tri súbory s nasledujúcimi názvami:
+  - index.html
+  - script.js
+  - style.css
+
+## Vytvorenie používateľského rozhrania
+
+Ak preskúmame požiadavky, vieme, že na našej HTML stránke budeme potrebovať niekoľko prvkov. Je to niečo ako recept, kde potrebujeme nejaké ingrediencie:
+
+- Miesto na zobrazenie citátu, ktorý má používateľ napísať
+- Miesto na zobrazenie správ, ako je správa o úspechu
+- Textové pole na písanie
+- Tlačidlo štart
+
+Každý z týchto prvkov bude potrebovať ID, aby sme s nimi mohli pracovať v našom JavaScripte. Pridáme tiež odkazy na súbory CSS a JavaScript, ktoré vytvoríme.
+
+Vytvorte nový súbor s názvom **index.html**. Pridajte nasledujúci HTML:
+
+```html
+<!-- inside index.html -->
+<html>
+<head>
+  <title>Typing game</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <h1>Typing game!</h1>
+  <p>Practice your typing skills with a quote from Sherlock Holmes. Click **start** to begin!</p>
+  <p id="quote"></p> <!-- This will display our quote -->
+  <p id="message"></p> <!-- This will display any status messages -->
+  <div>
+    <input type="text" aria-label="current word" id="typed-value" /> <!-- The textbox for typing -->
+    <button type="button" id="start">Start</button> <!-- To start the game -->
+  </div>
+  <script src="script.js"></script>
+</body>
+</html>
+```
+
+### Spustenie aplikácie
+
+Vždy je najlepšie vyvíjať iteratívne, aby ste videli, ako veci vyzerajú. Spustime našu aplikáciu. Existuje skvelé rozšírenie pre Visual Studio Code s názvom [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon), ktoré bude hostiť vašu aplikáciu lokálne a obnoví prehliadač pri každom uložení.
+
+- Nainštalujte [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) podľa odkazu a kliknutím na **Install**
+  - Prehliadač vás vyzve na otvorenie Visual Studio Code a potom vás Visual Studio Code vyzve na vykonanie inštalácie
+  - Reštartujte Visual Studio Code, ak budete vyzvaní
+- Po inštalácii vo Visual Studio Code stlačte Ctrl-Shift-P (alebo Cmd-Shift-P) na otvorenie príkazovej palety
+- Napíšte **Live Server: Open with Live Server**
+  - Live Server začne hostiť vašu aplikáciu
+- Otvorte prehliadač a prejdite na **https://localhost:5500**
+- Teraz by ste mali vidieť stránku, ktorú ste vytvorili!
+
+Pridajme nejakú funkcionalitu.
+
+## Pridanie CSS
+
+S naším HTML vytvoreným pridajme CSS pre základné štýlovanie. Potrebujeme zvýrazniť slovo, ktoré má hráč písať, a zafarbiť textové pole, ak to, čo napísal, nie je správne. Urobíme to pomocou dvoch tried.
+
+Vytvorte nový súbor s názvom **style.css** a pridajte nasledujúcu syntax.
+
+```css
+/* inside style.css */
+.highlight {
+  background-color: yellow;
+}
+
+.error {
+  background-color: lightcoral;
+  border: red;
+}
+```
+
+✅ Pokiaľ ide o CSS, môžete si stránku usporiadať podľa vlastného vkusu. Venujte trochu času a urobte stránku atraktívnejšou:
+
+- Vyberte iné písmo
+- Zafarbite nadpisy
+- Zmeňte veľkosť prvkov
+
+## JavaScript
+
+S naším používateľským rozhraním vytvoreným je čas zamerať našu pozornosť na JavaScript, ktorý poskytne logiku. Rozdelíme to na niekoľko krokov:
+
+- [Vytvorenie konštánt](../../../../4-typing-game/typing-game)
+- [Poslucháč udalostí na spustenie hry](../../../../4-typing-game/typing-game)
+- [Poslucháč udalostí na písanie](../../../../4-typing-game/typing-game)
+
+Najprv však vytvorte nový súbor s názvom **script.js**.
+
+### Pridanie konštánt
+
+Budeme potrebovať niekoľko položiek, aby sme si uľahčili programovanie. Opäť, podobne ako recept, tu je to, čo budeme potrebovať:
+
+- Pole so zoznamom všetkých citátov
+- Prázdne pole na uloženie všetkých slov pre aktuálny citát
+- Priestor na uloženie indexu slova, ktoré hráč práve píše
+- Čas, kedy hráč klikol na štart
+
+Budeme tiež chcieť odkazy na prvky používateľského rozhrania:
+
+- Textové pole (**typed-value**)
+- Zobrazenie citátu (**quote**)
+- Správa (**message**)
+
+```javascript
+// inside script.js
+// all of our quotes
+const quotes = [
+    'When you have eliminated the impossible, whatever remains, however improbable, must be the truth.',
+    'There is nothing more deceptive than an obvious fact.',
+    'I ought to know by this time that when a fact appears to be opposed to a long train of deductions it invariably proves to be capable of bearing some other interpretation.',
+    'I never make exceptions. An exception disproves the rule.',
+    'What one man can invent another can discover.',
+    'Nothing clears up a case so much as stating it to another person.',
+    'Education never ends, Watson. It is a series of lessons, with the greatest for the last.',
+];
+// store the list of words and the index of the word the player is currently typing
+let words = [];
+let wordIndex = 0;
+// the starting time
+let startTime = Date.now();
+// page elements
+const quoteElement = document.getElementById('quote');
+const messageElement = document.getElementById('message');
+const typedValueElement = document.getElementById('typed-value');
+```
+
+✅ Pridajte do svojej hry viac citátov
+
+> **NOTE:** Prvky môžeme kedykoľvek v kóde získať pomocou `document.getElementById`. Pretože sa na tieto prvky budeme pravidelne odkazovať, aby sme sa vyhli preklepom v reťazcových literáloch, použijeme konštanty. Frameworky ako [Vue.js](https://vuejs.org/) alebo [React](https://reactjs.org/) vám môžu pomôcť lepšie centralizovať váš kód.
+
+Venujte chvíľu sledovaniu videa o používaní `const`, `let` a `var`
+
+[![Typy premenných](https://img.youtube.com/vi/JNIXfGiDWM8/0.jpg)](https://youtube.com/watch?v=JNIXfGiDWM8 "Typy premenných")
+
+> 🎥 Kliknite na obrázok vyššie pre video o premenných.
+
+### Pridanie logiky pre štart
+
+Na začatie hry hráč klikne na štart. Samozrejme, nevieme, kedy klikne na štart. Tu prichádza na rad [poslucháč udalostí](https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener). Poslucháč udalostí nám umožní počúvať, kedy sa niečo stane (udalosť), a vykonať kód ako reakciu. V našom prípade chceme vykonať kód, keď používateľ klikne na štart.
+
+Keď používateľ klikne na **štart**, musíme vybrať citát, nastaviť používateľské rozhranie a nastaviť sledovanie aktuálneho slova a času. Nižšie je JavaScript, ktorý budete potrebovať pridať; rozoberieme ho hneď po bloku skriptu.
+
+```javascript
+// at the end of script.js
+document.getElementById('start').addEventListener('click', () => {
+  // get a quote
+  const quoteIndex = Math.floor(Math.random() * quotes.length);
+  const quote = quotes[quoteIndex];
+  // Put the quote into an array of words
+  words = quote.split(' ');
+  // reset the word index for tracking
+  wordIndex = 0;
+
+  // UI updates
+  // Create an array of span elements so we can set a class
+  const spanWords = words.map(function(word) { return `<span>${word} </span>`});
+  // Convert into string and set as innerHTML on quote display
+  quoteElement.innerHTML = spanWords.join('');
+  // Highlight the first word
+  quoteElement.childNodes[0].className = 'highlight';
+  // Clear any prior messages
+  messageElement.innerText = '';
+
+  // Setup the textbox
+  // Clear the textbox
+  typedValueElement.value = '';
+  // set focus
+  typedValueElement.focus();
+  // set the event handler
+
+  // Start the timer
+  startTime = new Date().getTime();
+});
+```
+
+Rozoberme si kód!
+
+- Nastavenie sledovania slov
+  - Použitím [Math.floor](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Math/floor) a [Math.random](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Math/random) umožníme náhodný výber citátu z poľa `quotes`
+  - Prevedieme `quote` na pole `words`, aby sme mohli sledovať slovo, ktoré hráč práve píše
+  - `wordIndex` nastavíme na 0, pretože hráč začne na prvom slove
+- Nastavenie používateľského rozhrania
+  - Vytvoríme pole `spanWords`, ktoré obsahuje každé slovo vo vnútri prvku `span`
+    - To nám umožní zvýrazniť slovo na displeji
+  - `join` pole na vytvorenie reťazca, ktorý môžeme použiť na aktualizáciu `innerHTML` na `quoteElement`
+    - Toto zobrazí citát hráčovi
+  - Nastavíme `className` prvého prvku `span` na `highlight`, aby sme ho zvýraznili na žlto
+  - Vyčistíme `messageElement` nastavením `innerText` na `''`
+- Nastavenie textového poľa
+  - Vyčistíme aktuálnu `value` na `typedValueElement`
+  - Nastavíme `focus` na `typedValueElement`
+- Spustíme časovač volaním `getTime`
+
+### Pridanie logiky pre písanie
+
+Keď hráč píše, vyvolá sa udalosť `input`. Tento poslucháč udalostí skontroluje, či hráč píše slovo správne, a spracuje aktuálny stav hry. Vráťte sa do **script.js** a pridajte nasledujúci kód na koniec. Rozoberieme ho potom.
+
+```javascript
+// at the end of script.js
+typedValueElement.addEventListener('input', () => {
+  // Get the current word
+  const currentWord = words[wordIndex];
+  // get the current value
+  const typedValue = typedValueElement.value;
+
+  if (typedValue === currentWord && wordIndex === words.length - 1) {
+    // end of sentence
+    // Display success
+    const elapsedTime = new Date().getTime() - startTime;
+    const message = `CONGRATULATIONS! You finished in ${elapsedTime / 1000} seconds.`;
+    messageElement.innerText = message;
+  } else if (typedValue.endsWith(' ') && typedValue.trim() === currentWord) {
+    // end of word
+    // clear the typedValueElement for the new word
+    typedValueElement.value = '';
+    // move to the next word
+    wordIndex++;
+    // reset the class name for all elements in quote
+    for (const wordElement of quoteElement.childNodes) {
+      wordElement.className = '';
+    }
+    // highlight the new word
+    quoteElement.childNodes[wordIndex].className = 'highlight';
+  } else if (currentWord.startsWith(typedValue)) {
+    // currently correct
+    // highlight the next word
+    typedValueElement.className = '';
+  } else {
+    // error state
+    typedValueElement.className = 'error';
+  }
+});
+```
+
+Rozoberme si kód! Začneme získaním aktuálneho slova a hodnoty, ktorú hráč doteraz napísal. Potom máme logiku vo forme vodopádu, kde kontrolujeme, či je citát dokončený, slovo je dokončené, slovo je správne alebo (nakoniec), či je tam chyba.
+
+- Citát je dokončený, čo je indikované tým, že `typedValue` sa rovná `currentWord` a `wordIndex` sa rovná o jedno menej ako `length` `words`
+  - Vypočítame `elapsedTime` odčítaním `startTime` od aktuálneho času
+  - Vydelíme `elapsedTime` číslom 1 000, aby sme ho previedli z milisekúnd na sekundy
+  - Zobrazíme správu o úspechu
+- Slovo je dokončené, čo je indikované tým, že `typedValue` končí medzerou (koniec slova) a `typedValue` sa rovná `currentWord`
+  - Nastavíme `value` na `typedElement` na `''`, aby sme umožnili napísanie ďalšieho slova
+  - Zvýšime `wordIndex`, aby sme prešli na ďalšie slovo
+  - Prejdeme všetky `childNodes` `quoteElement` a nastavíme `className` na `''`, aby sme obnovili predvolené zobrazenie
+  - Nastavíme `className` aktuálneho slova na `highlight`, aby sme ho označili ako ďalšie slovo na písanie
+- Slovo je aktuálne napísané správne (ale nie je dokončené), čo je indikované tým, že `currentWord` začína `typedValue`
+  - Zabezpečíme, aby sa `typedValueElement` zobrazoval ako predvolený vymazaním `className`
+- Ak sme sa dostali až sem, máme chybu
+  - Nastavíme `className` na `typedValueElement` na `error`
+
+## Otestujte svoju aplikáciu
+
+Dostali ste sa na koniec! Posledným krokom je zabezpečiť, aby naša aplikácia fungovala. Vyskúšajte si to! Nebojte sa, ak tam budú chyby; **všetci vývojári** robia chyby. Preskúmajte správy a podľa potreby ich opravte.
+
+Kliknite na **štart** a začnite písať! Malo by to vyzerať trochu ako animácia, ktorú sme videli predtým.
+
+![Animácia hry v akcii](../../../../4-typing-game/images/demo.gif)
+
+---
+
+## 🚀 Výzva
+
+Pridajte viac funkcií
+
+- Deaktivujte poslucháč udalostí `input` po dokončení a znova ho aktivujte, keď sa klikne na tlačidlo
+- Deaktivujte textové pole, keď hráč dokončí citát
+- Zobrazte modálne dialógové okno so správou o úspechu
+- Ukladajte najvyššie skóre pomocou [localStorage](https://developer.mozilla.org/docs/Web/API/Window/localStorage)
+
+## Kvíz po prednáške
+
+[Kvíz po prednáške](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/22)
+
+## Prehľad a samostatné štúdium
+
+Prečítajte si o [všetkých dostupných udalostiach](https://developer.mozilla.org/docs/Web/Events) pre vývojára prostredníctvom webového prehliadača a zvážte scenáre, v ktorých by ste každú z nich použili.
+
+## Zadanie
+
+[Vytvorte novú hru na klávesnici](assignment.md)
+
+---
+
+**Upozornenie**:  
+Tento dokument bol preložený pomocou služby na automatický preklad [Co-op Translator](https://github.com/Azure/co-op-translator). Hoci sa snažíme o presnosť, upozorňujeme, že automatické preklady môžu obsahovať chyby alebo nepresnosti. Pôvodný dokument v jeho pôvodnom jazyku by mal byť považovaný za autoritatívny zdroj. Pre kritické informácie sa odporúča profesionálny ľudský preklad. Nenesieme zodpovednosť za akékoľvek nedorozumenia alebo nesprávne interpretácie vyplývajúce z použitia tohto prekladu.
\ No newline at end of file
diff --git a/translations/sk/4-typing-game/typing-game/assignment.md b/translations/sk/4-typing-game/typing-game/assignment.md
new file mode 100644
index 00000000..a6d59105
--- /dev/null
+++ b/translations/sk/4-typing-game/typing-game/assignment.md
@@ -0,0 +1,26 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "de5384c118e15e4d1d0eaa00fc01b112",
+  "translation_date": "2025-08-27T22:58:04+00:00",
+  "source_file": "4-typing-game/typing-game/assignment.md",
+  "language_code": "sk"
+}
+-->
+# Vytvorte novú hru s klávesnicou
+
+## Pokyny
+
+Vytvorte malú hru, ktorá využíva udalosti klávesnice na vykonávanie úloh. Môže to byť iný druh hry na písanie alebo umelecká hra, ktorá kreslí pixely na obrazovku pri stlačení kláves. Buďte kreatívni!
+
+## Kritériá hodnotenia
+
+| Kritérium | Vynikajúce              | Dostatočné              | Potrebuje zlepšenie |
+| --------- | ----------------------- | ----------------------- | ------------------- |
+|           | Predstavená je kompletná hra | Hra je veľmi jednoduchá | Hra obsahuje chyby |
+|           |                         |                         |                     |
+
+---
+
+**Upozornenie**:  
+Tento dokument bol preložený pomocou služby AI prekladu [Co-op Translator](https://github.com/Azure/co-op-translator). Hoci sa snažíme o presnosť, prosím, berte na vedomie, že automatizované preklady môžu obsahovať chyby alebo nepresnosti. Pôvodný dokument v jeho pôvodnom jazyku by mal byť považovaný za autoritatívny zdroj. Pre kritické informácie sa odporúča profesionálny ľudský preklad. Nie sme zodpovední za akékoľvek nedorozumenia alebo nesprávne interpretácie vyplývajúce z použitia tohto prekladu.
\ No newline at end of file
diff --git a/translations/sk/5-browser-extension/1-about-browsers/README.md b/translations/sk/5-browser-extension/1-about-browsers/README.md
new file mode 100644
index 00000000..65e8eec3
--- /dev/null
+++ b/translations/sk/5-browser-extension/1-about-browsers/README.md
@@ -0,0 +1,182 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "0bb55e0b98600afab801eea115228873",
+  "translation_date": "2025-08-27T22:12:44+00:00",
+  "source_file": "5-browser-extension/1-about-browsers/README.md",
+  "language_code": "sk"
+}
+-->
+# Projekt rozšírenia prehliadača, časť 1: Všetko o prehliadačoch
+
+![Sketchnote prehliadača](../../../../translated_images/browser.60317c9be8b7f84adce43e30bff8d47a1ae15793beab762317b2bc6b74337c1a.sk.jpg)
+> Sketchnote od [Wassima Cheghama](https://dev.to/wassimchegham/ever-wondered-what-happens-when-you-type-in-a-url-in-an-address-bar-in-a-browser-3dob)
+
+## Kvíz pred prednáškou
+
+[Kvíz pred prednáškou](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/23)
+
+### Úvod
+
+Rozšírenia prehliadača pridávajú do prehliadača ďalšie funkcie. Predtým, než si jedno vytvoríte, by ste sa mali trochu oboznámiť s tým, ako prehliadače fungujú.
+
+### O prehliadači
+
+V tejto sérii lekcií sa naučíte, ako vytvoriť rozšírenie prehliadača, ktoré bude fungovať v prehliadačoch Chrome, Firefox a Edge. V tejto časti objavíte, ako prehliadače fungujú, a pripravíte základné prvky rozšírenia prehliadača.
+
+Ale čo je to vlastne prehliadač? Je to softvérová aplikácia, ktorá umožňuje koncovému používateľovi pristupovať k obsahu zo servera a zobrazovať ho na webových stránkach.
+
+✅ Trochu histórie: prvý prehliadač sa volal 'WorldWideWeb' a vytvoril ho Sir Timothy Berners-Lee v roku 1990.
+
+![rané prehliadače](../../../../translated_images/earlybrowsers.d984b711cdf3a42ddac919d46c4b5ca7232f68ccfbd81395e04e5a64c0015277.sk.jpg)
+> Niektoré rané prehliadače, zdroj: [Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing)
+
+Keď sa používateľ pripojí na internet pomocou adresy URL (Uniform Resource Locator), zvyčajne cez Hypertext Transfer Protocol pomocou adresy `http` alebo `https`, prehliadač komunikuje s webovým serverom a načíta webovú stránku.
+
+V tomto momente zobrazí renderovací engine prehliadača stránku na zariadení používateľa, ktorým môže byť mobilný telefón, stolný počítač alebo notebook.
+
+Prehliadače majú tiež schopnosť ukladať obsah do vyrovnávacej pamäte, aby sa nemusel zakaždým načítavať zo servera. Môžu zaznamenávať históriu prehliadania používateľa, ukladať 'cookies', čo sú malé kúsky dát obsahujúce informácie o aktivite používateľa, a mnoho ďalšieho.
+
+Je veľmi dôležité si uvedomiť, že prehliadače nie sú všetky rovnaké! Každý prehliadač má svoje silné a slabé stránky a profesionálny webový vývojár musí rozumieť tomu, ako zabezpečiť, aby webové stránky fungovali dobre naprieč rôznymi prehliadačmi. To zahŕňa prispôsobenie sa malým obrazovkám, ako sú mobilné telefóny, ako aj používateľom, ktorí sú offline.
+
+Veľmi užitočná webová stránka, ktorú by ste si mali uložiť do záložiek v akomkoľvek prehliadači, ktorý preferujete, je [caniuse.com](https://www.caniuse.com). Pri tvorbe webových stránok je veľmi užitočné používať zoznamy podporovaných technológií na caniuse, aby ste čo najlepšie podporili svojich používateľov.
+
+✅ Ako zistíte, ktoré prehliadače sú najpopulárnejšie medzi používateľmi vašej webovej stránky? Skontrolujte svoje analytické údaje – môžete nainštalovať rôzne analytické balíky ako súčasť procesu vývoja webu a tie vám ukážu, ktoré prehliadače sú najviac používané.
+
+## Rozšírenia prehliadača
+
+Prečo by ste chceli vytvoriť rozšírenie prehliadača? Je to užitočný nástroj, ktorý si môžete pripojiť k prehliadaču, keď potrebujete rýchly prístup k úlohám, ktoré často opakujete. Napríklad, ak často potrebujete kontrolovať farby na rôznych webových stránkach, ktoré navštevujete, môžete si nainštalovať rozšírenie prehliadača na výber farieb. Ak máte problém zapamätať si heslá, môžete použiť rozšírenie na správu hesiel.
+
+Rozšírenia prehliadača sú tiež zábavné na vývoj. Zvyčajne spravujú obmedzený počet úloh, ktoré vykonávajú dobre.
+
+✅ Aké sú vaše obľúbené rozšírenia prehliadača? Aké úlohy vykonávajú?
+
+### Inštalácia rozšírení
+
+Predtým, než začnete s vývojom, pozrite sa na proces vytvárania a nasadzovania rozšírenia prehliadača. Hoci sa jednotlivé prehliadače v tomto procese trochu líšia, postup je podobný v Chrome a Firefoxe ako v tomto príklade pre Edge:
+
+![screenshot prehliadača Edge zobrazujúci otvorenú stránku edge://extensions a otvorené nastavenia](../../../../translated_images/install-on-edge.d68781acaf0b3d3dada8b7507cde7a64bf74b7040d9818baaa9070668e819f90.sk.png)
+
+> Poznámka: Uistite sa, že ste zapli režim vývojára a povolili rozšírenia z iných obchodov.
+
+V podstate bude proces nasledovný:
+
+- vytvorte svoje rozšírenie pomocou `npm run build` 
+- v prehliadači prejdite na panel rozšírení pomocou tlačidla "Nastavenia a ďalšie" (ikona `...`) v pravom hornom rohu
+- ak ide o novú inštaláciu, vyberte `load unpacked`, aby ste nahrali nové rozšírenie z jeho zložky build (v našom prípade je to `/dist`) 
+- alebo kliknite na `reload`, ak znovu načítavate už nainštalované rozšírenie
+
+✅ Tieto pokyny sa týkajú rozšírení, ktoré si sami vytvoríte; na inštaláciu rozšírení, ktoré boli vydané v obchode s rozšíreniami prehliadača, by ste mali prejsť do týchto [obchodov](https://microsoftedge.microsoft.com/addons/Microsoft-Edge-Extensions-Home) a nainštalovať si rozšírenie podľa vášho výberu.
+
+### Začnite
+
+Vytvoríte rozšírenie prehliadača, ktoré zobrazí uhlíkovú stopu vášho regiónu, ukazujúc spotrebu energie vášho regiónu a zdroj tejto energie. Rozšírenie bude obsahovať formulár, ktorý zhromaždí API kľúč, aby ste mohli pristupovať k API CO2 Signal.
+
+**Potrebujete:**
+
+- [API kľúč](https://www.co2signal.com/); zadajte svoj e-mail do poľa na tejto stránke a kľúč vám bude zaslaný
+- [kód pre váš región](http://api.electricitymap.org/v3/zones) zodpovedajúci [Electricity Map](https://www.electricitymap.org/map) (napríklad v Bostone používam 'US-NEISO').
+- [štartovací kód](../../../../5-browser-extension/start). Stiahnite si zložku `start`; budete dopĺňať kód v tejto zložke.
+- [NPM](https://www.npmjs.com) - NPM je nástroj na správu balíkov; nainštalujte si ho lokálne a balíky uvedené vo vašom súbore `package.json` budú pripravené na použitie vo vašom webovom projekte
+
+✅ Viac o správe balíkov sa dozviete v tomto [vynikajúcom module Learn](https://docs.microsoft.com/learn/modules/create-nodejs-project-dependencies/?WT.mc_id=academic-77807-sagibbon)
+
+Venujte chvíľu prehliadnutiu kódu:
+
+dist
+    -|manifest.json (predvolené nastavenia tu)
+    -|index.html (HTML štruktúra front-endu tu)
+    -|background.js (background JS tu)
+    -|main.js (zostavený JS)
+src
+    -|index.js (váš JS kód ide sem)
+
+✅ Keď budete mať svoj API kľúč a kód regiónu pripravený, uložte si ich niekam do poznámky na neskoršie použitie.
+
+### Vytvorte HTML pre rozšírenie
+
+Toto rozšírenie má dva pohľady. Jeden na zhromaždenie API kľúča a kódu regiónu:
+
+![screenshot hotového rozšírenia otvoreného v prehliadači, zobrazujúci formulár s políčkami na zadanie názvu regiónu a API kľúča.](../../../../translated_images/1.b6da8c1394b07491afeb6b2a8e5aca73ebd3cf478e27bcc9aeabb187e722648e.sk.png)
+
+A druhý na zobrazenie uhlíkovej spotreby regiónu:
+
+![screenshot hotového rozšírenia zobrazujúci hodnoty uhlíkovej spotreby a percento fosílnych palív pre región US-NEISO.](../../../../translated_images/2.1dae52ff0804224692cd648afbf2342955d7afe3b0101b617268130dfb427f55.sk.png)
+
+Začnime vytvorením HTML pre formulár a jeho naštýlovaním pomocou CSS.
+
+V zložke `/dist` vytvorte formulár a oblasť pre výsledky. V súbore `index.html` vyplňte vyznačenú oblasť formulára:
+
+```HTML
+<form class="form-data" autocomplete="on">
+	<div>
+		<h2>New? Add your Information</h2>
+	</div>
+	<div>
+		<label for="region">Region Name</label>
+		<input type="text" id="region" required class="region-name" />
+	</div>
+	<div>
+		<label for="api">Your API Key from tmrow</label>
+		<input type="text" id="api" required class="api-key" />
+	</div>
+	<button class="search-btn">Submit</button>
+</form>	
+```
+Toto je formulár, kde budú vaše uložené informácie zadané a uložené do lokálneho úložiska.
+
+Ďalej vytvorte oblasť pre výsledky; pod posledným tagom formulára pridajte niekoľko divov:
+
+```HTML
+<div class="result">
+	<div class="loading">loading...</div>
+	<div class="errors"></div>
+	<div class="data"></div>
+	<div class="result-container">
+		<p><strong>Region: </strong><span class="my-region"></span></p>
+		<p><strong>Carbon Usage: </strong><span class="carbon-usage"></span></p>
+		<p><strong>Fossil Fuel Percentage: </strong><span class="fossil-fuel"></span></p>
+	</div>
+	<button class="clear-btn">Change region</button>
+</div>
+```
+V tomto bode môžete skúsiť zostaviť projekt. Uistite sa, že ste nainštalovali závislosti balíkov tohto rozšírenia:
+
+```
+npm install
+```
+
+Tento príkaz použije npm, správcu balíkov Node, na inštaláciu webpacku pre proces zostavenia vášho rozšírenia. Výstup tohto procesu môžete vidieť v súbore `/dist/main.js` - uvidíte, že kód bol zbalený.
+
+Zatiaľ by sa malo rozšírenie zostaviť a po jeho nasadení do Edge ako rozšírenia by ste mali vidieť pekne zobrazený formulár.
+
+Gratulujeme, urobili ste prvé kroky k vytvoreniu rozšírenia prehliadača. V ďalších lekciách ho urobíte funkčnejším a užitočnejším.
+
+---
+
+## 🚀 Výzva
+
+Pozrite sa na obchod s rozšíreniami prehliadača a nainštalujte si jedno do svojho prehliadača. Môžete preskúmať jeho súbory zaujímavými spôsobmi. Čo objavíte?
+
+## Kvíz po prednáške
+
+[Kvíz po prednáške](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/24)
+
+## Prehľad a samoštúdium
+
+V tejto lekcii ste sa dozvedeli niečo o histórii webového prehliadača; využite túto príležitosť na to, aby ste sa dozvedeli viac o tom, ako si tvorcovia World Wide Web predstavovali jeho využitie, prečítaním si viac o jeho histórii. Niektoré užitočné stránky zahŕňajú:
+
+[História webových prehliadačov](https://www.mozilla.org/firefox/browsers/browser-history/)
+
+[História webu](https://webfoundation.org/about/vision/history-of-the-web/)
+
+[Rozhovor s Timom Berners-Leem](https://www.theguardian.com/technology/2019/mar/12/tim-berners-lee-on-30-years-of-the-web-if-we-dream-a-little-we-can-get-the-web-we-want)
+
+## Zadanie 
+
+[Zmeňte štýl svojho rozšírenia](assignment.md)
+
+---
+
+**Upozornenie**:  
+Tento dokument bol preložený pomocou služby AI prekladu [Co-op Translator](https://github.com/Azure/co-op-translator). Hoci sa snažíme o presnosť, prosím, berte na vedomie, že automatizované preklady môžu obsahovať chyby alebo nepresnosti. Pôvodný dokument v jeho pôvodnom jazyku by mal byť považovaný za autoritatívny zdroj. Pre kritické informácie sa odporúča profesionálny ľudský preklad. Nie sme zodpovední za akékoľvek nedorozumenia alebo nesprávne interpretácie vyplývajúce z použitia tohto prekladu.
\ No newline at end of file
diff --git a/translations/sk/5-browser-extension/1-about-browsers/assignment.md b/translations/sk/5-browser-extension/1-about-browsers/assignment.md
new file mode 100644
index 00000000..3d04ba1e
--- /dev/null
+++ b/translations/sk/5-browser-extension/1-about-browsers/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "e3c6f2a03c2336e60412612d870af547",
+  "translation_date": "2025-08-27T22:14:12+00:00",
+  "source_file": "5-browser-extension/1-about-browsers/assignment.md",
+  "language_code": "sk"
+}
+-->
+# Zmeňte štýl svojej rozšírenia
+
+## Pokyny
+
+Základný kód pre toto rozšírenie obsahuje štýly, ale nemusíte ich používať; prispôsobte si svoje rozšírenie podľa seba úpravou jeho css súboru.
+
+## Kritériá hodnotenia
+
+| Kritérium | Vynikajúce                                  | Dostatočné           | Potrebuje zlepšenie |
+| --------- | ------------------------------------------- | -------------------- | ------------------- |
+|           | Kód je odoslaný s funkčnými novými štýlmi   | Štýly sú neúplné     | Štýly sú chybné     |
+
+---
+
+**Upozornenie**:  
+Tento dokument bol preložený pomocou služby AI prekladu [Co-op Translator](https://github.com/Azure/co-op-translator). Aj keď sa snažíme o presnosť, prosím, berte na vedomie, že automatizované preklady môžu obsahovať chyby alebo nepresnosti. Pôvodný dokument v jeho rodnom jazyku by mal byť považovaný za autoritatívny zdroj. Pre kritické informácie sa odporúča profesionálny ľudský preklad. Nenesieme zodpovednosť za akékoľvek nedorozumenia alebo nesprávne interpretácie vyplývajúce z použitia tohto prekladu.
\ No newline at end of file
diff --git a/translations/sk/5-browser-extension/2-forms-browsers-local-storage/README.md b/translations/sk/5-browser-extension/2-forms-browsers-local-storage/README.md
new file mode 100644
index 00000000..11719a55
--- /dev/null
+++ b/translations/sk/5-browser-extension/2-forms-browsers-local-storage/README.md
@@ -0,0 +1,240 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "e10f168beac4e7b05e30e0eb5c92bf11",
+  "translation_date": "2025-08-27T22:22:14+00:00",
+  "source_file": "5-browser-extension/2-forms-browsers-local-storage/README.md",
+  "language_code": "sk"
+}
+-->
+# Projekt rozšírenia prehliadača, časť 2: Volanie API, použitie lokálneho úložiska
+
+## Kvíz pred prednáškou
+
+[Kvíz pred prednáškou](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/25)
+
+### Úvod
+
+V tejto lekcii budete volať API odoslaním formulára vášho rozšírenia prehliadača a zobrazíte výsledky v rozšírení. Okrem toho sa naučíte, ako môžete ukladať údaje do lokálneho úložiska prehliadača na budúce použitie.
+
+✅ Postupujte podľa očíslovaných segmentov v príslušných súboroch, aby ste vedeli, kam umiestniť svoj kód.
+
+### Nastavenie prvkov na manipuláciu v rozšírení:
+
+Do tohto momentu ste vytvorili HTML pre formulár a `<div>` pre výsledky vášho rozšírenia prehliadača. Odteraz budete pracovať v súbore `/src/index.js` a postupne budovať svoje rozšírenie. Odkážte sa na [predchádzajúcu lekciu](../1-about-browsers/README.md) o nastavení projektu a procese zostavovania.
+
+Pracujte vo svojom súbore `index.js` a začnite vytvorením niekoľkých premenných `const`, ktoré budú obsahovať hodnoty spojené s rôznymi poľami:
+
+```JavaScript
+// form fields
+const form = document.querySelector('.form-data');
+const region = document.querySelector('.region-name');
+const apiKey = document.querySelector('.api-key');
+
+// results
+const errors = document.querySelector('.errors');
+const loading = document.querySelector('.loading');
+const results = document.querySelector('.result-container');
+const usage = document.querySelector('.carbon-usage');
+const fossilfuel = document.querySelector('.fossil-fuel');
+const myregion = document.querySelector('.my-region');
+const clearBtn = document.querySelector('.clear-btn');
+```
+
+Všetky tieto polia sú referencované podľa ich CSS triedy, ako ste ich nastavili v HTML v predchádzajúcej lekcii.
+
+### Pridanie poslucháčov udalostí
+
+Ďalej pridajte poslucháčov udalostí pre formulár a tlačidlo na vymazanie, ktoré resetuje formulár, aby sa pri odoslaní formulára alebo kliknutí na tlačidlo reset niečo stalo. Na konci súboru pridajte volanie na inicializáciu aplikácie:
+
+```JavaScript
+form.addEventListener('submit', (e) => handleSubmit(e));
+clearBtn.addEventListener('click', (e) => reset(e));
+init();
+```
+
+✅ Všimnite si skrátený zápis použitý na počúvanie udalostí odoslania alebo kliknutia a ako sa udalosť odovzdáva funkciám `handleSubmit` alebo `reset`. Dokážete napísať ekvivalent tohto skráteného zápisu v dlhšom formáte? Ktorý preferujete?
+
+### Vytvorenie funkcií `init()` a `reset()`:
+
+Teraz vytvoríte funkciu, ktorá inicializuje rozšírenie, nazývanú `init()`:
+
+```JavaScript
+function init() {
+	//if anything is in localStorage, pick it up
+	const storedApiKey = localStorage.getItem('apiKey');
+	const storedRegion = localStorage.getItem('regionName');
+
+	//set icon to be generic green
+	//todo
+
+	if (storedApiKey === null || storedRegion === null) {
+		//if we don't have the keys, show the form
+		form.style.display = 'block';
+		results.style.display = 'none';
+		loading.style.display = 'none';
+		clearBtn.style.display = 'none';
+		errors.textContent = '';
+	} else {
+        //if we have saved keys/regions in localStorage, show results when they load
+        displayCarbonUsage(storedApiKey, storedRegion);
+		results.style.display = 'none';
+		form.style.display = 'none';
+		clearBtn.style.display = 'block';
+	}
+};
+
+function reset(e) {
+	e.preventDefault();
+	//clear local storage for region only
+	localStorage.removeItem('regionName');
+	init();
+}
+
+```
+
+V tejto funkcii je zaujímavá logika. Pri čítaní si všimnite, čo sa deje:
+
+- sú nastavené dve `const`, ktoré kontrolujú, či používateľ uložil APIKey a kód regiónu do lokálneho úložiska.
+- ak je niektorá z týchto hodnôt `null`, zobrazí sa formulár zmenou jeho štýlu na 'block'.
+- skryjú sa výsledky, načítavanie a tlačidlo `clearBtn` a akýkoľvek text chyby sa nastaví na prázdny reťazec.
+- ak existuje kľúč a región, spustí sa rutina na:
+  - volanie API na získanie údajov o uhlíkovej stope,
+  - skrytie oblasti výsledkov,
+  - skrytie formulára,
+  - zobrazenie tlačidla reset.
+
+Pred pokračovaním je užitočné naučiť sa o veľmi dôležitom koncepte dostupnom v prehliadačoch: [LocalStorage](https://developer.mozilla.org/docs/Web/API/Window/localStorage). LocalStorage je užitočný spôsob, ako ukladať reťazce v prehliadači ako páry `kľúč-hodnota`. Tento typ webového úložiska môže byť manipulovaný pomocou JavaScriptu na správu údajov v prehliadači. LocalStorage nevyprší, zatiaľ čo SessionStorage, iný typ webového úložiska, sa vymaže pri zatvorení prehliadača. Rôzne typy úložiska majú svoje výhody a nevýhody.
+
+> Poznámka - vaše rozšírenie prehliadača má svoje vlastné lokálne úložisko; hlavné okno prehliadača je iná inštancia a správa sa samostatne.
+
+Nastavte hodnotu APIKey ako reťazec, napríklad, a môžete vidieť, že je nastavená v Edge tým, že "skontrolujete" webovú stránku (môžete kliknúť pravým tlačidlom myši na prehliadač a zvoliť možnosť skontrolovať) a prejdete na kartu Aplikácie, aby ste videli úložisko.
+
+![Panel lokálneho úložiska](../../../../translated_images/localstorage.472f8147b6a3f8d141d9551c95a2da610ac9a3c6a73d4a1c224081c98bae09d9.sk.png)
+
+✅ Premýšľajte o situáciách, kedy by ste NECHCELI ukladať niektoré údaje do LocalStorage. Vo všeobecnosti je umiestnenie API kľúčov do LocalStorage zlý nápad! Vidíte prečo? V našom prípade, keďže naša aplikácia je čisto na učenie a nebude nasadená do obchodu s aplikáciami, použijeme túto metódu.
+
+Všimnite si, že na manipuláciu s LocalStorage používate Web API, buď pomocou `getItem()`, `setItem()` alebo `removeItem()`. Je široko podporované vo všetkých prehliadačoch.
+
+Pred vytvorením funkcie `displayCarbonUsage()`, ktorá je volaná v `init()`, vytvorme funkciu na spracovanie počiatočného odoslania formulára.
+
+### Spracovanie odoslania formulára
+
+Vytvorte funkciu nazvanú `handleSubmit`, ktorá prijíma argument udalosti `(e)`. Zastavte šírenie udalosti (v tomto prípade chceme zastaviť obnovenie prehliadača) a zavolajte novú funkciu `setUpUser`, pričom odovzdáte argumenty `apiKey.value` a `region.value`. Týmto spôsobom použijete dve hodnoty, ktoré sú získané prostredníctvom počiatočného formulára, keď sú príslušné polia vyplnené.
+
+```JavaScript
+function handleSubmit(e) {
+	e.preventDefault();
+	setUpUser(apiKey.value, region.value);
+}
+```
+
+✅ Osviežte si pamäť - HTML, ktoré ste nastavili v poslednej lekcii, má dve vstupné polia, ktorých `hodnoty` sú zachytené prostredníctvom `const`, ktoré ste nastavili na začiatku súboru, a obe sú `povinné`, takže prehliadač zabráni používateľom zadať prázdne hodnoty.
+
+### Nastavenie používateľa
+
+Pokračujeme funkciou `setUpUser`, kde nastavíte hodnoty lokálneho úložiska pre apiKey a regionName. Pridajte novú funkciu:
+
+```JavaScript
+function setUpUser(apiKey, regionName) {
+	localStorage.setItem('apiKey', apiKey);
+	localStorage.setItem('regionName', regionName);
+	loading.style.display = 'block';
+	errors.textContent = '';
+	clearBtn.style.display = 'block';
+	//make initial call
+	displayCarbonUsage(apiKey, regionName);
+}
+```
+
+Táto funkcia nastaví načítavaciu správu, ktorá sa zobrazí počas volania API. V tomto bode ste sa dostali k vytvoreniu najdôležitejšej funkcie tohto rozšírenia prehliadača!
+
+### Zobrazenie uhlíkovej stopy
+
+Nakoniec je čas na dotazovanie API!
+
+Predtým, ako budeme pokračovať, mali by sme diskutovať o API. API, alebo [Application Programming Interfaces](https://www.webopedia.com/TERM/A/API.html), sú kritickým prvkom nástrojov webového vývojára. Poskytujú štandardné spôsoby, ako programy môžu navzájom komunikovať a rozhranie. Napríklad, ak vytvárate webovú stránku, ktorá potrebuje dotazovať databázu, niekto mohol vytvoriť API, ktoré môžete použiť. Hoci existuje mnoho typov API, jedným z najpopulárnejších je [REST API](https://www.smashingmagazine.com/2018/01/understanding-using-rest-api/).
+
+✅ Termín 'REST' znamená 'Representational State Transfer' a zahŕňa používanie rôzne nakonfigurovaných URL na získanie údajov. Urobte si malý prieskum o rôznych typoch API dostupných pre vývojárov. Ktorý formát vás oslovuje?
+
+V tejto funkcii je niekoľko dôležitých vecí. Najprv si všimnite kľúčové slovo [`async`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/async_function). Písanie vašich funkcií tak, aby bežali asynchrónne, znamená, že čakajú na dokončenie akcie, ako je vrátenie údajov, pred pokračovaním.
+
+Tu je krátke video o `async`:
+
+[![Async a Await na správu sľubov](https://img.youtube.com/vi/YwmlRkrxvkk/0.jpg)](https://youtube.com/watch?v=YwmlRkrxvkk "Async a Await na správu sľubov")
+
+> 🎥 Kliknite na obrázok vyššie pre video o async/await.
+
+Vytvorte novú funkciu na dotazovanie API C02Signal:
+
+```JavaScript
+import axios from '../node_modules/axios';
+
+async function displayCarbonUsage(apiKey, region) {
+	try {
+		await axios
+			.get('https://api.co2signal.com/v1/latest', {
+				params: {
+					countryCode: region,
+				},
+				headers: {
+					'auth-token': apiKey,
+				},
+			})
+			.then((response) => {
+				let CO2 = Math.floor(response.data.data.carbonIntensity);
+
+				//calculateColor(CO2);
+
+				loading.style.display = 'none';
+				form.style.display = 'none';
+				myregion.textContent = region;
+				usage.textContent =
+					Math.round(response.data.data.carbonIntensity) + ' grams (grams C02 emitted per kilowatt hour)';
+				fossilfuel.textContent =
+					response.data.data.fossilFuelPercentage.toFixed(2) +
+					'% (percentage of fossil fuels used to generate electricity)';
+				results.style.display = 'block';
+			});
+	} catch (error) {
+		console.log(error);
+		loading.style.display = 'none';
+		results.style.display = 'none';
+		errors.textContent = 'Sorry, we have no data for the region you have requested.';
+	}
+}
+```
+
+Toto je veľká funkcia. Čo sa tu deje?
+
+- podľa najlepších praktík používate kľúčové slovo `async`, aby sa táto funkcia správala asynchrónne. Funkcia obsahuje blok `try/catch`, pretože vráti sľub, keď API vráti údaje. Keďže nemáte kontrolu nad rýchlosťou, akou API odpovie (môže neodpovedať vôbec!), musíte túto neistotu riešiť volaním asynchrónne.
+- dotazujete API co2signal na získanie údajov o vašom regióne, pomocou vášho API kľúča. Na použitie tohto kľúča musíte použiť typ autentifikácie v parametroch hlavičky.
+- keď API odpovie, priradíte rôzne prvky jeho odpovedí k častiam obrazovky, ktoré ste nastavili na zobrazenie týchto údajov.
+- ak dôjde k chybe alebo ak neexistuje žiadny výsledok, zobrazíte chybovú správu.
+
+✅ Používanie asynchrónnych programovacích vzorov je ďalším veľmi užitočným nástrojom vo vašej vývojárskej výbave. Prečítajte si [o rôznych spôsoboch](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/async_function), ako môžete nakonfigurovať tento typ kódu.
+
+Gratulujeme! Ak zostavíte svoje rozšírenie (`npm run build`) a obnovíte ho na paneli rozšírení, máte funkčné rozšírenie! Jediná vec, ktorá nefunguje, je ikona, a to opravíte v ďalšej lekcii.
+
+---
+
+## 🚀 Výzva
+
+V týchto lekciách sme diskutovali o niekoľkých typoch API. Vyberte si webové API a preskúmajte podrobne, čo ponúka. Napríklad sa pozrite na API dostupné v prehliadačoch, ako je [HTML Drag and Drop API](https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_API). Čo podľa vás robí API skvelým?
+
+## Kvíz po prednáške
+
+[Kvíz po prednáške](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/26)
+
+## Prehľad a samoštúdium
+
+V tejto lekcii ste sa naučili o LocalStorage a API, oboch veľmi užitočných pre profesionálneho webového vývojára. Dokážete premýšľať o tom, ako tieto dve veci spolupracujú? Premýšľajte o tom, ako by ste navrhli webovú stránku, ktorá by ukladala položky na použitie API.
+
+## Zadanie
+
+[Prijmite API](assignment.md)
+
+---
+
+**Upozornenie**:  
+Tento dokument bol preložený pomocou služby AI prekladu [Co-op Translator](https://github.com/Azure/co-op-translator). Aj keď sa snažíme o presnosť, prosím, berte na vedomie, že automatizované preklady môžu obsahovať chyby alebo nepresnosti. Pôvodný dokument v jeho pôvodnom jazyku by mal byť považovaný za autoritatívny zdroj. Pre kritické informácie sa odporúča profesionálny ľudský preklad. Nie sme zodpovední za akékoľvek nedorozumenia alebo nesprávne interpretácie vyplývajúce z použitia tohto prekladu.
\ No newline at end of file
diff --git a/translations/sk/5-browser-extension/2-forms-browsers-local-storage/assignment.md b/translations/sk/5-browser-extension/2-forms-browsers-local-storage/assignment.md
new file mode 100644
index 00000000..bf8827c4
--- /dev/null
+++ b/translations/sk/5-browser-extension/2-forms-browsers-local-storage/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "a0c78d1dd9d1acdbf7f52e7cc3ebe1a7",
+  "translation_date": "2025-08-27T22:24:54+00:00",
+  "source_file": "5-browser-extension/2-forms-browsers-local-storage/assignment.md",
+  "language_code": "sk"
+}
+-->
+# Adoptuj API
+
+## Pokyny
+
+API môžu byť veľmi zábavné na hranie. Tu je [zoznam mnohých bezplatných API](https://github.com/public-apis/public-apis). Vyberte si jedno API a vytvorte rozšírenie prehliadača, ktoré rieši nejaký problém. Môže to byť taký malý problém, ako nedostatok obrázkov domácich zvierat (vyskúšajte napríklad [dog CEO API](https://dog.ceo/dog-api/)) alebo niečo väčšie – bavte sa!
+
+## Hodnotiace kritériá
+
+| Kritérium | Vynikajúce                                                                  | Dostatočné                              | Potrebuje zlepšenie     |
+| --------- | -------------------------------------------------------------------------- | --------------------------------------- | ----------------------- |
+|           | Kompletné rozšírenie prehliadača je odoslané s použitím API zo zoznamu vyššie | Čiastočné rozšírenie prehliadača je odoslané | Odoslanie obsahuje chyby |
+
+---
+
+**Upozornenie**:  
+Tento dokument bol preložený pomocou služby AI prekladu [Co-op Translator](https://github.com/Azure/co-op-translator). Hoci sa snažíme o presnosť, prosím, berte na vedomie, že automatizované preklady môžu obsahovať chyby alebo nepresnosti. Pôvodný dokument v jeho pôvodnom jazyku by mal byť považovaný za autoritatívny zdroj. Pre kritické informácie sa odporúča profesionálny ľudský preklad. Nie sme zodpovední za akékoľvek nedorozumenia alebo nesprávne interpretácie vyplývajúce z použitia tohto prekladu.
\ No newline at end of file
diff --git a/translations/sk/5-browser-extension/3-background-tasks-and-performance/README.md b/translations/sk/5-browser-extension/3-background-tasks-and-performance/README.md
new file mode 100644
index 00000000..d165371d
--- /dev/null
+++ b/translations/sk/5-browser-extension/3-background-tasks-and-performance/README.md
@@ -0,0 +1,176 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "f198c6b817b4b2a99749f4662e7cae98",
+  "translation_date": "2025-08-27T22:14:57+00:00",
+  "source_file": "5-browser-extension/3-background-tasks-and-performance/README.md",
+  "language_code": "sk"
+}
+-->
+# Projekt rozšírenia prehliadača, časť 3: Naučte sa o úlohách na pozadí a výkone
+
+## Kvíz pred prednáškou
+
+[Kvíz pred prednáškou](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/27)
+
+### Úvod
+
+V posledných dvoch lekciách tohto modulu ste sa naučili, ako vytvoriť formulár a zobrazovaciu oblasť pre údaje získané z API. Je to veľmi štandardný spôsob vytvárania webovej prítomnosti na internete. Dokonca ste sa naučili, ako asynchrónne získavať údaje. Vaše rozšírenie prehliadača je takmer hotové.
+
+Zostáva spravovať niektoré úlohy na pozadí, vrátane aktualizácie farby ikony rozšírenia, takže je vhodný čas hovoriť o tom, ako prehliadač spravuje tento typ úloh. Poďme premýšľať o týchto úlohách prehliadača v kontexte výkonu vašich webových aktív počas ich vytvárania.
+
+## Základy webového výkonu
+
+> "Výkon webovej stránky závisí od dvoch vecí: ako rýchlo sa stránka načíta a ako rýchlo na nej beží kód." -- [Zack Grossbart](https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/)
+
+Téma, ako urobiť vaše webové stránky extrémne rýchle na všetkých typoch zariadení, pre všetkých typov používateľov a v rôznych situáciách, je pochopiteľne rozsiahla. Tu je niekoľko bodov, ktoré treba mať na pamäti pri vytváraní štandardného webového projektu alebo rozšírenia prehliadača.
+
+Prvá vec, ktorú musíte urobiť, aby ste zabezpečili efektívny chod vašej stránky, je zhromaždiť údaje o jej výkone. Prvým miestom na to sú vývojárske nástroje vášho webového prehliadača. V Edge môžete vybrať tlačidlo "Nastavenia a ďalšie" (ikona troch bodiek v pravom hornom rohu prehliadača), potom prejsť na Viac nástrojov > Vývojárske nástroje a otvoriť kartu Výkon. Na otvorenie vývojárskych nástrojov môžete tiež použiť klávesové skratky `Ctrl` + `Shift` + `I` na Windows alebo `Option` + `Command` + `I` na Mac.
+
+Karta Výkon obsahuje nástroj na profilovanie. Otvorte webovú stránku (vyskúšajte napríklad [https://www.microsoft.com](https://www.microsoft.com/?WT.mc_id=academic-77807-sagibbon)) a kliknite na tlačidlo 'Record', potom stránku obnovte. Nahrávanie môžete kedykoľvek zastaviť a budete môcť vidieť rutiny, ktoré sa generujú na 'skriptovanie', 'renderovanie' a 'maľovanie' stránky:
+
+![Edge profiler](../../../../translated_images/profiler.5a4a62479c5df01cfec9aab74173dba13f91d2c968e1a1ae434c26165792df15.sk.png)
+
+✅ Navštívte [Microsoft Dokumentáciu](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) o paneli Výkon v Edge
+
+> Tip: aby ste získali presné údaje o čase spustenia vašej stránky, vymažte vyrovnávaciu pamäť prehliadača
+
+Vyberte prvky časovej osi profilu, aby ste priblížili udalosti, ktoré sa dejú počas načítania vašej stránky.
+
+Získajte snímku výkonu vašej stránky výberom časti časovej osi profilu a pohľadom na panel so zhrnutím:
+
+![Edge profiler snapshot](../../../../translated_images/snapshot.97750180ebcad73794a3594b36925eb5c8dbaac9e03fec7f9b974188c9ac63c7.sk.png)
+
+Skontrolujte panel denníka udalostí, aby ste zistili, či nejaká udalosť trvala dlhšie ako 15 ms:
+
+![Edge event log](../../../../translated_images/log.804026979f3707e00eebcfa028b2b5a88cec6292f858767bb6703afba65a7d9c.sk.png)
+
+✅ Spoznajte svoj profiler! Otvorte vývojárske nástroje na tejto stránke a zistite, či existujú nejaké úzke miesta. Ktoré aktívum sa načítava najpomalšie? Najrýchlejšie?
+
+## Kontroly profilovania
+
+Vo všeobecnosti existujú niektoré "problémové oblasti", na ktoré by si mal každý webový vývojár dávať pozor pri vytváraní stránky, aby sa vyhol nepríjemným prekvapeniam pri nasadení do produkcie.
+
+**Veľkosti aktív**: Web sa za posledné roky stal "ťažším" a teda pomalším. Časť tejto váhy súvisí s používaním obrázkov.
+
+✅ Prezrite si [Internetový archív](https://httparchive.org/reports/page-weight) pre historický pohľad na váhu stránok a ďalšie informácie.
+
+Dobrou praxou je zabezpečiť, aby vaše obrázky boli optimalizované a doručené vo správnej veľkosti a rozlíšení pre vašich používateľov.
+
+**Prechádzanie DOM**: Prehliadač musí vytvoriť svoj model objektov dokumentu na základe kódu, ktorý napíšete, takže je v záujme dobrého výkonu stránky udržiavať značky minimálne, používať a štýlovať len to, čo stránka potrebuje. Na tento bod by sa mohol optimalizovať nadbytočný CSS spojený so stránkou; štýly, ktoré sa majú používať len na jednej stránke, nemusia byť zahrnuté v hlavnom štýle.
+
+**JavaScript**: Každý vývojár JavaScriptu by si mal dávať pozor na skripty blokujúce renderovanie, ktoré sa musia načítať pred tým, ako sa zvyšok DOM môže prechádzať a maľovať do prehliadača. Zvážte použitie `defer` s vašimi inline skriptami (ako je to urobené v module Terrarium).
+
+✅ Vyskúšajte niektoré stránky na [webovej stránke na testovanie rýchlosti stránok](https://www.webpagetest.org/), aby ste sa dozvedeli viac o bežných kontrolách, ktoré sa vykonávajú na určenie výkonu stránky.
+
+Teraz, keď máte predstavu o tom, ako prehliadač renderuje aktíva, ktoré mu posielate, pozrime sa na posledné veci, ktoré musíte urobiť na dokončenie vášho rozšírenia:
+
+### Vytvorte funkciu na výpočet farby
+
+Pracujte v súbore `/src/index.js` a pridajte funkciu nazvanú `calculateColor()` po sérii premenných `const`, ktoré ste nastavili na získanie prístupu k DOM:
+
+```JavaScript
+function calculateColor(value) {
+	let co2Scale = [0, 150, 600, 750, 800];
+	let colors = ['#2AA364', '#F5EB4D', '#9E4229', '#381D02', '#381D02'];
+
+	let closestNum = co2Scale.sort((a, b) => {
+		return Math.abs(a - value) - Math.abs(b - value);
+	})[0];
+	console.log(value + ' is closest to ' + closestNum);
+	let num = (element) => element > closestNum;
+	let scaleIndex = co2Scale.findIndex(num);
+
+	let closestColor = colors[scaleIndex];
+	console.log(scaleIndex, closestColor);
+
+	chrome.runtime.sendMessage({ action: 'updateIcon', value: { color: closestColor } });
+}
+```
+
+Čo sa tu deje? Odovzdáte hodnotu (intenzitu uhlíka) z API volania, ktoré ste dokončili v poslednej lekcii, a potom vypočítate, ako blízko je jej hodnota k indexu uvedenému v poli farieb. Potom pošlete túto najbližšiu hodnotu farby cez runtime chrome.
+
+Runtime chrome má [API](https://developer.chrome.com/extensions/runtime), ktoré spracováva všetky druhy úloh na pozadí, a vaše rozšírenie ho využíva:
+
+> "Použite API chrome.runtime na získanie stránky na pozadí, vrátenie podrobností o manifeste a počúvanie a reagovanie na udalosti v životnom cykle aplikácie alebo rozšírenia. Toto API môžete tiež použiť na konverziu relatívnej cesty URL na úplne kvalifikované URL."
+
+✅ Ak vyvíjate toto rozšírenie pre Edge, môže vás prekvapiť, že používate API chrome. Novšie verzie prehliadača Edge bežia na prehliadačovom engine Chromium, takže môžete využívať tieto nástroje.
+
+> Poznámka: Ak chcete profilovať rozšírenie prehliadača, spustite vývojárske nástroje priamo z rozšírenia, pretože ide o samostatnú inštanciu prehliadača.
+
+### Nastavte predvolenú farbu ikony
+
+Teraz v funkcii `init()` nastavte ikonu na generickú zelenú farbu na začiatok tým, že opäť zavoláte akciu `updateIcon` v chrome:
+
+```JavaScript
+chrome.runtime.sendMessage({
+	action: 'updateIcon',
+		value: {
+			color: 'green',
+		},
+});
+```
+
+### Zavolajte funkciu, vykonajte volanie
+
+Ďalej zavolajte funkciu, ktorú ste práve vytvorili, pridaním do sľubu vráteného API C02Signal:
+
+```JavaScript
+//let CO2...
+calculateColor(CO2);
+```
+
+A nakoniec, v súbore `/dist/background.js`, pridajte poslucháča pre tieto volania úloh na pozadí:
+
+```JavaScript
+chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) {
+	if (msg.action === 'updateIcon') {
+		chrome.browserAction.setIcon({ imageData: drawIcon(msg.value) });
+	}
+});
+//borrowed from energy lollipop extension, nice feature!
+function drawIcon(value) {
+	let canvas = document.createElement('canvas');
+	let context = canvas.getContext('2d');
+
+	context.beginPath();
+	context.fillStyle = value.color;
+	context.arc(100, 100, 50, 0, 2 * Math.PI);
+	context.fill();
+
+	return context.getImageData(50, 50, 100, 100);
+}
+```
+
+V tomto kóde pridávate poslucháča pre akékoľvek správy prichádzajúce do správcu úloh na pozadí. Ak sa volá 'updateIcon', potom sa spustí nasledujúci kód na nakreslenie ikony správnej farby pomocou API Canvas.
+
+✅ Viac o API Canvas sa dozviete v [lekciách o vesmírnej hre](../../6-space-game/2-drawing-to-canvas/README.md).
+
+Teraz znovu zostavte svoje rozšírenie (`npm run build`), obnovte a spustite svoje rozšírenie a sledujte, ako sa farba mení. Je vhodný čas ísť na nákup alebo umyť riad? Teraz už viete!
+
+Gratulujeme, vytvorili ste užitočné rozšírenie prehliadača a dozvedeli ste sa viac o tom, ako prehliadač funguje a ako profilovať jeho výkon.
+
+---
+
+## 🚀 Výzva
+
+Preskúmajte niektoré open source webové stránky, ktoré existujú už dlho, a na základe ich histórie na GitHube zistite, či boli optimalizované pre výkon v priebehu rokov, ak vôbec. Aký je najbežnejší problém?
+
+## Kvíz po prednáške
+
+[Kvíz po prednáške](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/28)
+
+## Prehľad a samostatné štúdium
+
+Zvážte prihlásenie sa na odber [newsletteru o výkone](https://perf.email/)
+
+Preskúmajte niektoré spôsoby, akými prehliadače hodnotia webový výkon, prezeraním kariet výkonu vo svojich webových nástrojoch. Nájdete nejaké zásadné rozdiely?
+
+## Zadanie
+
+[Analyzujte stránku z hľadiska výkonu](assignment.md)
+
+---
+
+**Upozornenie**:  
+Tento dokument bol preložený pomocou služby AI prekladu [Co-op Translator](https://github.com/Azure/co-op-translator). Hoci sa snažíme o presnosť, prosím, berte na vedomie, že automatizované preklady môžu obsahovať chyby alebo nepresnosti. Pôvodný dokument v jeho rodnom jazyku by mal byť považovaný za autoritatívny zdroj. Pre kritické informácie sa odporúča profesionálny ľudský preklad. Nie sme zodpovední za žiadne nedorozumenia alebo nesprávne interpretácie vyplývajúce z použitia tohto prekladu.
\ No newline at end of file
diff --git a/translations/sk/5-browser-extension/3-background-tasks-and-performance/assignment.md b/translations/sk/5-browser-extension/3-background-tasks-and-performance/assignment.md
new file mode 100644
index 00000000..486c15ac
--- /dev/null
+++ b/translations/sk/5-browser-extension/3-background-tasks-and-performance/assignment.md
@@ -0,0 +1,23 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "fc09b0fb314a5ab0507ba99216e6a843",
+  "translation_date": "2025-08-27T22:17:13+00:00",
+  "source_file": "5-browser-extension/3-background-tasks-and-performance/assignment.md",
+  "language_code": "sk"
+}
+-->
+# Analyzujte webovú stránku z hľadiska výkonu
+
+Poskytnite podrobnú správu o webovej stránke, ktorá ukazuje oblasti, kde výkon zaostáva. Analyzujte, prečo je stránka pomalá a čo by ste mohli urobiť pre jej zrýchlenie. Nespoliehajte sa iba na nástroje prehliadača, ale preskúmajte aj iné nástroje, ktoré môžu pomôcť pri tvorbe vašej správy.
+
+## Kritériá hodnotenia
+
+| Kritérium | Vynikajúce                                                                                                 | Dostatočné                 | Vyžaduje zlepšenie            |
+| --------- | --------------------------------------------------------------------------------------------------------- | -------------------------- | ----------------------------- |
+|           | Správa obsahuje podrobnosti nielen z nástrojov prehliadača, ale aj z dostupných nástrojov tretích strán   | Predložená je základná správa | Predložená je minimálna správa |
+
+---
+
+**Upozornenie**:  
+Tento dokument bol preložený pomocou služby AI prekladu [Co-op Translator](https://github.com/Azure/co-op-translator). Hoci sa snažíme o presnosť, prosím, berte na vedomie, že automatizované preklady môžu obsahovať chyby alebo nepresnosti. Pôvodný dokument v jeho rodnom jazyku by mal byť považovaný za autoritatívny zdroj. Pre kritické informácie sa odporúča profesionálny ľudský preklad. Nenesieme zodpovednosť za akékoľvek nedorozumenia alebo nesprávne interpretácie vyplývajúce z použitia tohto prekladu.
\ No newline at end of file
diff --git a/translations/sk/5-browser-extension/README.md b/translations/sk/5-browser-extension/README.md
new file mode 100644
index 00000000..51a9efba
--- /dev/null
+++ b/translations/sk/5-browser-extension/README.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "b121a279a6ab39878491f3e572673515",
+  "translation_date": "2025-08-27T22:12:13+00:00",
+  "source_file": "5-browser-extension/README.md",
+  "language_code": "sk"
+}
+-->
+# Vytvorenie rozšírenia pre prehliadač
+
+Vytváranie rozšírení pre prehliadače je zábavný a zaujímavý spôsob, ako premýšľať o výkone vašich aplikácií pri vytváraní iného typu webového aktíva. Tento modul obsahuje lekcie o tom, ako fungujú prehliadače, ako nasadiť rozšírenie pre prehliadač, ako vytvoriť formulár, volať API, používať lokálne úložisko, a ako hodnotiť výkon vašej webovej stránky a zlepšiť ho.
+
+Vytvoríte rozšírenie pre prehliadač, ktoré funguje na Edge, Chrome a Firefox. Toto rozšírenie, ktoré je ako mini webová stránka prispôsobená veľmi špecifickej úlohe, kontroluje [C02 Signal API](https://www.co2signal.com) pre spotrebu elektriny a uhlíkovú intenzitu danej oblasti a poskytuje údaje o uhlíkovej stope regiónu.
+
+Toto rozšírenie môže byť používateľom spustené ad hoc po zadaní API kľúča a kódu regiónu do formulára, aby sa určila lokálna spotreba elektriny, čím sa ponúkajú údaje, ktoré môžu ovplyvniť rozhodnutia používateľa o elektrine. Napríklad môže byť vhodnejšie odložiť používanie sušičky na oblečenie (činnosť s vysokou uhlíkovou intenzitou) počas obdobia vysokej spotreby elektriny vo vašom regióne.
+
+### Témy
+
+1. [O prehliadačoch](1-about-browsers/README.md)
+2. [Formuláre a lokálne úložisko](2-forms-browsers-local-storage/README.md)
+3. [Pozadie úloh a výkon](3-background-tasks-and-performance/README.md)
+
+### Kredity
+
+![zelené rozšírenie prehliadača](../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.sk.png)
+
+## Kredity
+
+Myšlienku pre tento webový uhlíkový spúšťač ponúkol Asim Hussain, vedúci tímu Green Cloud Advocacy v Microsoft a autor [Green Principles](https://principles.green/). Pôvodne to bol [projekt webovej stránky](https://github.com/jlooper/green).
+
+Štruktúra rozšírenia pre prehliadač bola ovplyvnená [Adebola Adeniranovým COVID rozšírením](https://github.com/onedebos/covtension).
+
+Koncept systému ikon „bodiek“ bol inšpirovaný štruktúrou ikon rozšírenia prehliadača [Energy Lollipop](https://energylollipop.com/) pre emisie v Kalifornii.
+
+Tieto lekcie boli napísané s ♥️ od [Jen Looper](https://www.twitter.com/jenlooper)
+
+---
+
+**Upozornenie**:  
+Tento dokument bol preložený pomocou služby AI prekladu [Co-op Translator](https://github.com/Azure/co-op-translator). Hoci sa snažíme o presnosť, prosím, berte na vedomie, že automatizované preklady môžu obsahovať chyby alebo nepresnosti. Pôvodný dokument v jeho pôvodnom jazyku by mal byť považovaný za autoritatívny zdroj. Pre kritické informácie sa odporúča profesionálny ľudský preklad. Nie sme zodpovední za žiadne nedorozumenia alebo nesprávne interpretácie vyplývajúce z použitia tohto prekladu.
\ No newline at end of file
diff --git a/translations/sk/5-browser-extension/solution/README.md b/translations/sk/5-browser-extension/solution/README.md
new file mode 100644
index 00000000..72cfb4c1
--- /dev/null
+++ b/translations/sk/5-browser-extension/solution/README.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "fab4e6b4f0efcd587a9029d82991f597",
+  "translation_date": "2025-08-27T22:18:01+00:00",
+  "source_file": "5-browser-extension/solution/README.md",
+  "language_code": "sk"
+}
+-->
+# Rozšírenie prehliadača Carbon Trigger: Hotový kód
+
+Použitím API C02 Signal od tmrow na sledovanie spotreby elektriny vytvorte rozšírenie prehliadača, aby ste mali pripomienku priamo vo svojom prehliadači o tom, aká náročná je spotreba elektriny vo vašom regióne. Používanie tohto rozšírenia ad hoc vám pomôže robiť rozhodnutia o vašich aktivitách na základe týchto informácií.
+
+![screenshot rozšírenia](../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.sk.png)
+
+## Začíname
+
+Budete potrebovať nainštalovaný [npm](https://npmjs.com). Stiahnite si kópiu tohto projektu do priečinka na vašom počítači.
+
+Nainštalujte všetky potrebné balíčky:
+
+```
+npm install
+```
+
+Vytvorte rozšírenie pomocou webpacku:
+
+```
+npm run build
+```
+
+Na inštaláciu v Edge použite menu „tri bodky“ v pravom hornom rohu prehliadača, aby ste našli panel Rozšírenia. Odtiaľ vyberte „Načítať nebalené“ na načítanie nového rozšírenia. Pri výzve otvorte priečinok „dist“ a rozšírenie sa načíta. Na jeho používanie budete potrebovať API kľúč pre API CO2 Signal ([získajte ho tu cez email](https://www.co2signal.com/) - zadajte svoj email do políčka na tejto stránke) a [kód pre váš región](http://api.electricitymap.org/v3/zones) zodpovedajúci [Electricity Map](https://www.electricitymap.org/map) (napríklad v Bostone používam 'US-NEISO').
+
+![inštalácia](../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.sk.png)
+
+Keď zadáte API kľúč a región do rozhrania rozšírenia, farebná bodka v paneli rozšírenia prehliadača by sa mala zmeniť tak, aby odrážala spotrebu energie vo vašom regióne a poskytla vám odporúčanie, aké energeticky náročné aktivity by boli vhodné vykonať. Koncept za týmto systémom „bodky“ mi bol inšpirovaný rozšírením [Energy Lollipop](https://energylollipop.com/) pre emisie v Kalifornii.
+
+---
+
+**Upozornenie**:  
+Tento dokument bol preložený pomocou služby AI prekladu [Co-op Translator](https://github.com/Azure/co-op-translator). Hoci sa snažíme o presnosť, prosím, berte na vedomie, že automatizované preklady môžu obsahovať chyby alebo nepresnosti. Pôvodný dokument v jeho pôvodnom jazyku by mal byť považovaný za autoritatívny zdroj. Pre kritické informácie sa odporúča profesionálny ľudský preklad. Nie sme zodpovední za akékoľvek nedorozumenia alebo nesprávne interpretácie vyplývajúce z použitia tohto prekladu.
\ No newline at end of file
diff --git a/translations/sk/5-browser-extension/solution/translation/README.es.md b/translations/sk/5-browser-extension/solution/translation/README.es.md
new file mode 100644
index 00000000..40573b53
--- /dev/null
+++ b/translations/sk/5-browser-extension/solution/translation/README.es.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "cbaf73f94a9ab4c680a10ef871e92948",
+  "translation_date": "2025-08-27T22:20:04+00:00",
+  "source_file": "5-browser-extension/solution/translation/README.es.md",
+  "language_code": "sk"
+}
+-->
+# Rozšírenie prehliadača Carbon Trigger: Kompletný kód
+
+Pomocou API CO2 Signal od tmrow na sledovanie spotreby elektriny vytvorte rozšírenie prehliadača, ktoré vám umožní mať priamo vo vašom prehliadači pripomienku o spotrebe elektriny vo vašom regióne. Používanie tohto ad hoc rozšírenia vám pomôže robiť rozhodnutia o vašich aktivitách na základe týchto informácií.
+
+![screenshot rozšírenia](../../../../../translated_images/extension-screenshot.352c4c3ba54e4041ad2f6af749d562cc5705f527b5826efd53d11c3528f5ae45.sk.png)
+
+## Začíname
+
+Budete potrebovať nainštalovaný [npm](https://npmjs.com). Stiahnite si kópiu tohto kódu do priečinka vo vašom počítači.
+
+Nainštalujte všetky potrebné balíčky:
+
+```
+npm install
+```
+
+Vytvorte rozšírenie pomocou webpacku:
+
+```
+npm run build
+```
+
+Na inštaláciu v Edge použite menu s 'tromi bodkami' v pravom hornom rohu prehliadača, aby ste našli panel Rozšírenia. Odtiaľ vyberte 'Načítať rozbalené' na načítanie nového rozšírenia. Keď budete vyzvaní, otvorte priečinok 'dist' a rozšírenie sa načíta. Na jeho používanie budete potrebovať API kľúč pre API CO2 Signal ([získajte ho tu e-mailom](https://www.co2signal.com/) - zadajte svoj e-mail do poľa na tejto stránke) a [kód pre váš región](http://api.electricitymap.org/v3/zones) zodpovedajúci [Elektrickej mape](https://www.electricitymap.org/map) (napríklad v Bostone používam 'US-NEISO').
+
+![inštalácia](../../../../../translated_images/install-on-edge.8bd0ee3ca7dcda1c5334b5195603a43c864e3b38d088b03d57376d25e77b9459.sk.png)
+
+Keď zadáte API kľúč a región do rozhrania rozšírenia, farebný bod na lište rozšírenia prehliadača by sa mal zmeniť tak, aby odrážal spotrebu energie vo vašom regióne a poskytol vám indikátor o aktivitách s vysokou spotrebou energie, ktoré by pre vás boli vhodné. Koncept tohto systému "bodov" som získal z [rozšírenia Energy Lollipop](https://energylollipop.com/) pre emisie v Kalifornii.
+
+---
+
+**Upozornenie**:  
+Tento dokument bol preložený pomocou služby AI prekladu [Co-op Translator](https://github.com/Azure/co-op-translator). Hoci sa snažíme o presnosť, prosím, berte na vedomie, že automatizované preklady môžu obsahovať chyby alebo nepresnosti. Pôvodný dokument v jeho pôvodnom jazyku by mal byť považovaný za autoritatívny zdroj. Pre kritické informácie sa odporúča profesionálny ľudský preklad. Nie sme zodpovední za akékoľvek nedorozumenia alebo nesprávne interpretácie vyplývajúce z použitia tohto prekladu.
\ No newline at end of file
diff --git a/translations/sk/5-browser-extension/solution/translation/README.fr.md b/translations/sk/5-browser-extension/solution/translation/README.fr.md
new file mode 100644
index 00000000..922b197a
--- /dev/null
+++ b/translations/sk/5-browser-extension/solution/translation/README.fr.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "9361268ca430b2579375009e1eceb5e5",
+  "translation_date": "2025-08-27T22:21:05+00:00",
+  "source_file": "5-browser-extension/solution/translation/README.fr.md",
+  "language_code": "sk"
+}
+-->
+# Rozšírenie prehliadača Carbon Trigger: Dokončený kód
+
+Pomocou API C02 Signal od tmrow na sledovanie spotreby elektriny vytvorte rozšírenie prehliadača, aby ste mohli mať priamo vo svojom prehliadači pripomienku o spotrebe elektriny vo vašom regióne. Používanie tohto ad hoc rozšírenia vám pomôže robiť rozhodnutia o vašich aktivitách na základe týchto informácií.
+
+![snímka rozšírenia](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.sk.png)
+
+## Začíname
+
+Budete potrebovať nainštalovaný [npm](https://npmjs.com). Stiahnite si kópiu tohto kódu do priečinka vo vašom počítači.
+
+Nainštalujte všetky potrebné balíčky:
+
+```
+npm install
+```
+
+Vytvorte rozšírenie pomocou webpacku:
+
+```
+npm run build
+```
+
+Na inštaláciu v prehliadači Edge použite menu „tri bodky“ v pravom hornom rohu prehliadača na otvorenie panela Rozšírenia. Odtiaľ vyberte „Načítať rozbalené rozšírenie“ na pridanie nového rozšírenia. Pri výzve otvorte priečinok „dist“ a rozšírenie sa načíta. Na jeho používanie budete potrebovať API kľúč pre API CO2 Signal ([získajte ho tu e-mailom](https://www.co2signal.com/) – zadajte svoj e-mail do poľa na tejto stránke) a [kód pre váš región](http://api.electricitymap.org/v3/zones) zodpovedajúci [mape elektriny](https://www.electricitymap.org/map) (napríklad v Bostone používam 'US-NEISO').
+
+![inštalácia](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.sk.png)
+
+Keď zadáte API kľúč a región do rozhrania rozšírenia, farebný bod v paneli rozšírení prehliadača by sa mal zmeniť tak, aby odrážal spotrebu energie vo vašom regióne, a poskytol vám indikátor, ktoré energeticky náročné aktivity by bolo vhodné vykonávať. Koncept tohto systému „bodov“ mi bol inšpirovaný [rozšírením Energy Lollipop](https://energylollipop.com/) pre kalifornské emisie.
+
+---
+
+**Upozornenie**:  
+Tento dokument bol preložený pomocou služby na automatický preklad [Co-op Translator](https://github.com/Azure/co-op-translator). Aj keď sa snažíme o presnosť, upozorňujeme, že automatické preklady môžu obsahovať chyby alebo nepresnosti. Pôvodný dokument v jeho pôvodnom jazyku by mal byť považovaný za autoritatívny zdroj. Pre kritické informácie sa odporúča profesionálny ľudský preklad. Nezodpovedáme za akékoľvek nedorozumenia alebo nesprávne interpretácie vyplývajúce z použitia tohto prekladu.
\ No newline at end of file
diff --git a/translations/sk/5-browser-extension/solution/translation/README.hi.md b/translations/sk/5-browser-extension/solution/translation/README.hi.md
new file mode 100644
index 00000000..cb5b5d69
--- /dev/null
+++ b/translations/sk/5-browser-extension/solution/translation/README.hi.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "dd58ae1b7707034f055718c1b68bc8de",
+  "translation_date": "2025-08-27T22:18:33+00:00",
+  "source_file": "5-browser-extension/solution/translation/README.hi.md",
+  "language_code": "sk"
+}
+-->
+# Karbónový spúšťač: Hotový kód pre rozšírenie prehliadača
+
+Použitie API CO2 Signal od tmrow na sledovanie spotreby elektriny, vytvorenie rozšírenia prehliadača, ktoré vám pripomenie, aká náročná je spotreba elektriny vo vašej oblasti. Používanie tohto rozšírenia vám pomôže robiť rozhodnutia o vašich aktivitách na základe týchto informácií.
+
+![Screenshot rozšírenia](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.sk.png)
+
+## Začíname
+
+Musíte mať nainštalovaný [npm](https://npmjs.com). Stiahnite si kópiu tohto projektu do priečinka na vašom počítači.
+
+Nainštalujte všetky potrebné balíčky:
+
+```
+npm install
+```
+
+Vytvorte rozšírenie pomocou Webpacku:
+
+```
+npm run build
+```
+
+Na inštaláciu v Edge použite menu „tri bodky“ v pravom hornom rohu prehliadača na vyhľadanie panelu rozšírení. Odtiaľ vyberte „Načítať nebalené“ na načítanie nového rozšírenia. V zobrazenom okne otvorte priečinok „dist“ a rozšírenie sa načíta. Na jeho používanie budete potrebovať API kľúč CO2 Signal ([získajte ho e-mailom tu](https://www.co2signal.com/) – zadajte svoj e-mail do políčka na tejto stránke) a [kód pre vašu oblasť](http://api.electricitymap.org/v3/zones) z [Electricity Map](https://www.electricitymap.org/map) (napríklad v Bostone používam „US-NEISO“).
+
+![Inštalácia](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.sk.png)
+
+Keď zadáte API kľúč a kód oblasti do rozhrania rozšírenia, farebný bod v paneli rozšírenia prehliadača by sa mal zmeniť tak, aby odrážal spotrebu energie vo vašej oblasti. Poskytne vám indikátor, ktoré energeticky náročné aktivity sú vhodné pre váš výkon. Koncept tejto „bodovej“ systému mi bol inšpirovaný rozšírením [Energy Lollipop](https://energylollipop.com/) pre emisie v Kalifornii.
+
+---
+
+**Upozornenie**:  
+Tento dokument bol preložený pomocou služby AI prekladu [Co-op Translator](https://github.com/Azure/co-op-translator). Hoci sa snažíme o presnosť, prosím, berte na vedomie, že automatizované preklady môžu obsahovať chyby alebo nepresnosti. Pôvodný dokument v jeho rodnom jazyku by mal byť považovaný za autoritatívny zdroj. Pre kritické informácie sa odporúča profesionálny ľudský preklad. Nie sme zodpovední za akékoľvek nedorozumenia alebo nesprávne interpretácie vyplývajúce z použitia tohto prekladu.
\ No newline at end of file
diff --git a/translations/sk/5-browser-extension/solution/translation/README.it.md b/translations/sk/5-browser-extension/solution/translation/README.it.md
new file mode 100644
index 00000000..5c46c969
--- /dev/null
+++ b/translations/sk/5-browser-extension/solution/translation/README.it.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "9a6b22a2eff0f499b66236be973b24ad",
+  "translation_date": "2025-08-27T22:19:05+00:00",
+  "source_file": "5-browser-extension/solution/translation/README.it.md",
+  "language_code": "sk"
+}
+-->
+# Rozšírenie prehliadača Carbon Trigger: kód na začiatok
+
+Použije sa API Signal CO2 od tmrow na sledovanie spotreby elektriny, aby sa vytvorilo rozšírenie pre prehliadač, ktoré poskytne pripomienku priamo v prehliadači o tom, aká náročná je spotreba elektriny vo vašom regióne. Používanie tohto rozšírenia pomôže lepšie zhodnotiť svoje aktivity na základe týchto informácií.
+
+![screenshot rozšírenia](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.sk.png)
+
+## Začíname
+
+Je potrebné mať nainštalovaný [npm](https://npmjs.com). Stiahnite si kópiu tohto projektu do priečinka na svojom počítači.
+
+Nainštalujte všetky potrebné balíčky:
+
+```
+npm install
+```
+
+Vytvorte rozšírenie pomocou webpacku:
+
+```
+npm run build
+```
+
+Na inštaláciu v Edge použite menu "tri bodky" v pravom hornom rohu prehliadača a vyhľadajte panel Rozšírenia. Ak ešte nie je aktívny, zapnite režim vývojára (v dolnej časti). Vyberte "Načítať rozbalené" na načítanie nového rozšírenia. Otvorte priečinok "dist" v zobrazenom okne a rozšírenie sa načíta. Na jeho používanie budete potrebovať API kľúč pre CO2 Signal API (môžete ho [získať tu e-mailom](https://www.co2signal.com/) - zadajte svoju e-mailovú adresu do políčka na tejto stránke) a [kód pre váš región](http://api.electricitymap.org/v3/zones) zodpovedajúci [elektrickej mape](https://www.electricitymap.org/map) (napríklad v Bostone "US-NEISO").
+
+![inštalácia](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.sk.png)
+
+Keď zadáte API kľúč a región do rozhrania rozšírenia, farebný bod v paneli rozšírenia prehliadača by sa mal zmeniť tak, aby odrážal spotrebu energie vo vašom regióne. Poskytne tiež návod na to, ktoré aktivity s vysokou spotrebou energie by boli vhodné vykonať. Koncept tohto systému "bodov" bol inšpirovaný [rozšírením Energy Lollipop](https://energylollipop.com/) pre emisie v Kalifornii.
+
+---
+
+**Upozornenie**:  
+Tento dokument bol preložený pomocou služby AI prekladu [Co-op Translator](https://github.com/Azure/co-op-translator). Hoci sa snažíme o presnosť, prosím, berte na vedomie, že automatizované preklady môžu obsahovať chyby alebo nepresnosti. Pôvodný dokument v jeho rodnom jazyku by mal byť považovaný za autoritatívny zdroj. Pre kritické informácie sa odporúča profesionálny ľudský preklad. Nenesieme zodpovednosť za akékoľvek nedorozumenia alebo nesprávne interpretácie vyplývajúce z použitia tohto prekladu.
\ No newline at end of file
diff --git a/translations/sk/5-browser-extension/solution/translation/README.ja.md b/translations/sk/5-browser-extension/solution/translation/README.ja.md
new file mode 100644
index 00000000..2f4f145d
--- /dev/null
+++ b/translations/sk/5-browser-extension/solution/translation/README.ja.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "3f5e6821e0febccfc5d05e7c944d9e3d",
+  "translation_date": "2025-08-27T22:19:33+00:00",
+  "source_file": "5-browser-extension/solution/translation/README.ja.md",
+  "language_code": "sk"
+}
+-->
+# Rozšírenie prehliadača Carbon Trigger: Hotový kód
+
+Pomocou API CO2 Signal od tmrow môžete sledovať spotrebu elektrickej energie vo vašej oblasti a zobrazovať pripomienky priamo v prehliadači. Toto rozšírenie vám umožní rozhodovať sa na základe týchto informácií o vašich aktivitách.
+
+![screenshot rozšírenia](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.sk.png)
+
+## Začíname
+
+Musíte mať nainštalovaný [npm](https://npmjs.com). Stiahnite si kópiu tohto projektu do priečinka na vašom počítači.
+
+Nainštalujte všetky potrebné balíčky.
+
+```
+npm install
+```
+
+Vytvorte rozšírenie pomocou webpacku.
+
+```
+npm run build
+```
+
+Ak chcete rozšírenie nainštalovať do Edge, otvorte panel „Rozšírenia“ cez menu „tri bodky“ v pravom hornom rohu prehliadača. Vyberte možnosť „Load Unpacked“ a načítajte nové rozšírenie. Keď sa zobrazí výzva, otvorte priečinok „dist“ a rozšírenie sa načíta. Na používanie budete potrebovať API kľúč CO2 Signal ([získajte ho tu cez e-mail](https://www.co2signal.com/) - zadajte svoj e-mail do políčka na stránke) a [kód pre vašu oblasť](http://api.electricitymap.org/v3/zones) zodpovedajúci [Electricity Map](https://www.electricitymap.org/map) (napríklad pre Boston použite 'US-NEISO').
+
+![inštalácia](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.sk.png)
+
+Po zadaní API kľúča a oblasti do rozhrania rozšírenia sa farba bodky v rozšírenej lište prehliadača zmení, aby odrážala energetickú spotrebu vo vašej oblasti. Táto bodka vám pomôže rozhodnúť, aké aktivity vyžadujúce energiu sú vhodné. Koncept systému „bodky“ som si osvojil z rozšírenia [Energy Lollipop](https://energylollipop.com/) pre emisie v Kalifornii.
+
+---
+
+**Upozornenie**:  
+Tento dokument bol preložený pomocou služby AI prekladu [Co-op Translator](https://github.com/Azure/co-op-translator). Aj keď sa snažíme o presnosť, prosím, berte na vedomie, že automatizované preklady môžu obsahovať chyby alebo nepresnosti. Pôvodný dokument v jeho pôvodnom jazyku by mal byť považovaný za autoritatívny zdroj. Pre kritické informácie sa odporúča profesionálny ľudský preklad. Nie sme zodpovední za akékoľvek nedorozumenia alebo nesprávne interpretácie vyplývajúce z použitia tohto prekladu.
\ No newline at end of file
diff --git a/translations/sk/5-browser-extension/solution/translation/README.ms.md b/translations/sk/5-browser-extension/solution/translation/README.ms.md
new file mode 100644
index 00000000..e33c7f3e
--- /dev/null
+++ b/translations/sk/5-browser-extension/solution/translation/README.ms.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "21b364c158c8e4f698de65eeac16c9fe",
+  "translation_date": "2025-08-27T22:20:34+00:00",
+  "source_file": "5-browser-extension/solution/translation/README.ms.md",
+  "language_code": "sk"
+}
+-->
+# Rozšírenie prehliadača Carbon Trigger: Kompletný kód
+
+Použitím API CO2 Signal od tmrow na sledovanie spotreby elektrickej energie vytvorte rozšírenie prehliadača, ktoré vám umožní dostávať upozornenia o aktuálnej záťaži spotreby elektrickej energie vo vašom regióne. Používanie tohto rozšírenia vám pomôže robiť informované rozhodnutia o vašich aktivitách na základe týchto údajov.
+
+![screenshot rozšírenia prehliadača](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.sk.png)
+
+## Začíname
+
+Najprv si musíte nainštalovať [npm](https://npmjs.com). Stiahnite si kópiu tohto projektu do priečinka na vašom počítači.
+
+Nainštalujte všetky potrebné balíčky:
+
+```
+npm install
+```
+
+Vytvorte rozšírenie pomocou webpacku:
+
+```
+npm run build
+```
+
+Na inštaláciu v Edge použite menu „tri bodky“ v pravom hornom rohu prehliadača a vyhľadajte panel Rozšírenia. Odtiaľ vyberte „Load Unpacked“ na načítanie nového rozšírenia. Otvorte priečinok „dist“ na požiadanie a rozšírenie sa načíta. Na jeho používanie budete potrebovať API kľúč pre CO2 Signal ([získajte ho tu cez e-mail](https://www.co2signal.com/) - zadajte svoj e-mail do políčka na stránke) a [kód pre váš región](http://api.electricitymap.org/v3/zones), ktorý zodpovedá [Elektrickej mape](https://www.electricitymap.org/map) (napríklad v Bostone používam 'US-NEISO').
+
+![sťahovanie](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.sk.png)
+
+Po zadaní API kľúča a regiónu do rozhrania rozšírenia sa farebný bod na paneli rozšírenia prehliadača zmení, aby odrážal spotrebu energie vo vašom regióne, a poskytne vám odporúčania ohľadom vhodných aktivít. Koncept systému „bodov“ mi bol inšpiráciou od [rozšírenia prehliadača Energy Lollipop](https://energylollipop.com/) pre Kaliforniu.
+
+---
+
+**Upozornenie**:  
+Tento dokument bol preložený pomocou služby AI prekladu [Co-op Translator](https://github.com/Azure/co-op-translator). Aj keď sa snažíme o presnosť, prosím, berte na vedomie, že automatizované preklady môžu obsahovať chyby alebo nepresnosti. Pôvodný dokument v jeho pôvodnom jazyku by mal byť považovaný za autoritatívny zdroj. Pre kritické informácie sa odporúča profesionálny ľudský preklad. Nie sme zodpovední za akékoľvek nedorozumenia alebo nesprávne interpretácie vyplývajúce z použitia tohto prekladu.
\ No newline at end of file
diff --git a/translations/sk/5-browser-extension/start/README.md b/translations/sk/5-browser-extension/start/README.md
new file mode 100644
index 00000000..84a6f3ce
--- /dev/null
+++ b/translations/sk/5-browser-extension/start/README.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "26fd39046d264ba185dcb086d3a8cf3e",
+  "translation_date": "2025-08-27T22:17:32+00:00",
+  "source_file": "5-browser-extension/start/README.md",
+  "language_code": "sk"
+}
+-->
+# Rozšírenie prehliadača Carbon Trigger: Štartovací kód
+
+Použitím API C02 Signal od tmrow na sledovanie spotreby elektriny vytvorte rozšírenie prehliadača, aby ste mali pripomienku priamo vo svojom prehliadači o tom, aká náročná je spotreba elektriny vo vašom regióne. Používanie tohto rozšírenia ad hoc vám pomôže robiť rozhodnutia o vašich aktivitách na základe týchto informácií.
+
+![screenshot rozšírenia](../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.sk.png)
+
+## Začíname
+
+Budete potrebovať nainštalovaný [npm](https://npmjs.com). Stiahnite si kópiu tohto kódu do priečinka na vašom počítači.
+
+Nainštalujte všetky potrebné balíčky:
+
+```
+npm install
+```
+
+Vytvorte rozšírenie pomocou webpacku:
+
+```
+npm run build
+```
+
+Na inštaláciu v Edge použite menu „tri bodky“ v pravom hornom rohu prehliadača na nájdenie panelu Rozšírenia. Odtiaľ vyberte „Načítať nebalené“ na načítanie nového rozšírenia. Pri výzve otvorte priečinok „dist“ a rozšírenie sa načíta. Na jeho používanie budete potrebovať API kľúč pre API CO2 Signal ([získajte ho tu cez e-mail](https://www.co2signal.com/) - zadajte svoj e-mail do políčka na tejto stránke) a [kód pre váš región](http://api.electricitymap.org/v3/zones) zodpovedajúci [Electricity Map](https://www.electricitymap.org/map) (napríklad v Bostone používam 'US-NEISO').
+
+![inštalácia](../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.sk.png)
+
+Keď zadáte API kľúč a región do rozhrania rozšírenia, farebná bodka v paneli rozšírenia prehliadača by sa mala zmeniť tak, aby odrážala spotrebu energie vo vašom regióne a poskytla vám návod, aké energeticky náročné aktivity by boli vhodné vykonať. Koncept za týmto systémom „bodky“ mi bol inšpirovaný rozšírením [Energy Lollipop](https://energylollipop.com/) pre emisie v Kalifornii.
+
+---
+
+**Upozornenie**:  
+Tento dokument bol preložený pomocou služby na automatický preklad [Co-op Translator](https://github.com/Azure/co-op-translator). Hoci sa snažíme o presnosť, upozorňujeme, že automatické preklady môžu obsahovať chyby alebo nepresnosti. Pôvodný dokument v jeho pôvodnom jazyku by mal byť považovaný za autoritatívny zdroj. Pre kritické informácie sa odporúča profesionálny ľudský preklad. Nezodpovedáme za žiadne nedorozumenia alebo nesprávne interpretácie vyplývajúce z použitia tohto prekladu.
\ No newline at end of file
diff --git a/translations/sk/6-space-game/1-introduction/README.md b/translations/sk/6-space-game/1-introduction/README.md
new file mode 100644
index 00000000..bc68e984
--- /dev/null
+++ b/translations/sk/6-space-game/1-introduction/README.md
@@ -0,0 +1,238 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "d9da6dc61fb712b29f65e108c79b8a5d",
+  "translation_date": "2025-08-27T22:34:25+00:00",
+  "source_file": "6-space-game/1-introduction/README.md",
+  "language_code": "sk"
+}
+-->
+# Vytvorenie vesmírnej hry, časť 1: Úvod
+
+![video](../../../../6-space-game/images/pewpew.gif)
+
+## Kvíz pred prednáškou
+
+[Kvíz pred prednáškou](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/29)
+
+### Dedičnosť a kompozícia vo vývoji hier
+
+V predchádzajúcich lekciách nebolo potrebné príliš riešiť architektúru aplikácií, pretože projekty boli veľmi malé. Avšak, keď vaše aplikácie narastú na veľkosti a rozsahu, architektonické rozhodnutia sa stávajú dôležitejšími. Existujú dva hlavné prístupy k vytváraniu väčších aplikácií v JavaScripte: *kompozícia* alebo *dedičnosť*. Obe majú svoje výhody a nevýhody, ale poďme si ich vysvetliť v kontexte hry.
+
+✅ Jedna z najslávnejších kníh o programovaní sa zaoberá [návrhovými vzormi](https://en.wikipedia.org/wiki/Design_Patterns).
+
+V hre máte `herné objekty`, ktoré sú objekty existujúce na obrazovke. To znamená, že majú polohu v karteziánskom súradnicovom systéme, charakterizovanú súradnicami `x` a `y`. Pri vývoji hry si všimnete, že všetky vaše herné objekty majú štandardné vlastnosti, ktoré sú spoločné pre každú hru, ktorú vytvoríte, konkrétne prvky, ktoré sú:
+
+- **založené na polohe** Väčšina, ak nie všetky, herné prvky sú založené na polohe. To znamená, že majú polohu, `x` a `y`.
+- **pohyblivé** Ide o objekty, ktoré sa môžu presunúť na nové miesto. Typicky ide o hrdinu, monštrum alebo NPC (nehrateľnú postavu), ale nie napríklad o statický objekt ako strom.
+- **samodeštrukčné** Tieto objekty existujú iba určitý čas, kým sa nenastavia na odstránenie. Zvyčajne je to reprezentované booleanom `dead` alebo `destroyed`, ktorý signalizuje hernému enginu, že tento objekt by sa už nemal vykresľovať.
+- **s časovým obmedzením** 'Časové obmedzenie' je typická vlastnosť krátkodobých objektov. Typickým príkladom je text alebo grafický efekt, ako je explózia, ktorý by mal byť viditeľný iba niekoľko milisekúnd.
+
+✅ Premýšľajte o hre ako Pac-Man. Dokážete identifikovať štyri vyššie uvedené typy objektov v tejto hre?
+
+### Vyjadrenie správania
+
+Všetko, čo sme vyššie popísali, sú správania, ktoré môžu herné objekty mať. Ako ich teda zakódujeme? Toto správanie môžeme vyjadriť ako metódy priradené buď triedam alebo objektom.
+
+**Triedy**
+
+Myšlienkou je použiť `triedy` v spojení s `dedičnosťou`, aby sme pridali určité správanie do triedy.
+
+✅ Dedičnosť je dôležitý koncept na pochopenie. Viac sa dozviete v [článku MDN o dedičnosti](https://developer.mozilla.org/docs/Web/JavaScript/Inheritance_and_the_prototype_chain).
+
+Vyjadrené kódom, herný objekt môže typicky vyzerať takto:
+
+```javascript
+
+//set up the class GameObject
+class GameObject {
+  constructor(x, y, type) {
+    this.x = x;
+    this.y = y;
+    this.type = type;
+  }
+}
+
+//this class will extend the GameObject's inherent class properties
+class Movable extends GameObject {
+  constructor(x,y, type) {
+    super(x,y, type)
+  }
+
+//this movable object can be moved on the screen
+  moveTo(x, y) {
+    this.x = x;
+    this.y = y;
+  }
+}
+
+//this is a specific class that extends the Movable class, so it can take advantage of all the properties that it inherits
+class Hero extends Movable {
+  constructor(x,y) {
+    super(x,y, 'Hero')
+  }
+}
+
+//this class, on the other hand, only inherits the GameObject properties
+class Tree extends GameObject {
+  constructor(x,y) {
+    super(x,y, 'Tree')
+  }
+}
+
+//a hero can move...
+const hero = new Hero();
+hero.moveTo(5,5);
+
+//but a tree cannot
+const tree = new Tree();
+```
+
+✅ Venujte pár minút tomu, aby ste si predstavili hrdinu z Pac-Mana (napríklad Inky, Pinky alebo Blinky) a ako by bol napísaný v JavaScripte.
+
+**Kompozícia**
+
+Iný spôsob riešenia dedičnosti objektov je použitie *kompozície*. Potom objekty vyjadrujú svoje správanie takto:
+
+```javascript
+//create a constant gameObject
+const gameObject = {
+  x: 0,
+  y: 0,
+  type: ''
+};
+
+//...and a constant movable
+const movable = {
+  moveTo(x, y) {
+    this.x = x;
+    this.y = y;
+  }
+}
+//then the constant movableObject is composed of the gameObject and movable constants
+const movableObject = {...gameObject, ...movable};
+
+//then create a function to create a new Hero who inherits the movableObject properties
+function createHero(x, y) {
+  return {
+    ...movableObject,
+    x,
+    y,
+    type: 'Hero'
+  }
+}
+//...and a static object that inherits only the gameObject properties
+function createStatic(x, y, type) {
+  return {
+    ...gameObject
+    x,
+    y,
+    type
+  }
+}
+//create the hero and move it
+const hero = createHero(10,10);
+hero.moveTo(5,5);
+//and create a static tree which only stands around
+const tree = createStatic(0,0, 'Tree'); 
+```
+
+**Ktorý vzor by som mal použiť?**
+
+Je na vás, ktorý vzor si vyberiete. JavaScript podporuje oba tieto prístupy.
+
+--
+
+Ďalší vzor, ktorý je bežný vo vývoji hier, rieši problém správy používateľského zážitku a výkonu hry.
+
+## Vzor Pub/Sub
+
+✅ Pub/Sub znamená 'publish-subscribe' (publikovanie-odber).
+
+Tento vzor rieši myšlienku, že rôzne časti vašej aplikácie by o sebe nemali vedieť. Prečo? Umožňuje to jednoduchšie pochopiť, čo sa deje vo všeobecnosti, ak sú rôzne časti oddelené. Tiež to uľahčuje náhle zmeny správania, ak je to potrebné. Ako to dosiahneme? Zavedením niekoľkých konceptov:
+
+- **správa**: Správa je zvyčajne textový reťazec sprevádzaný voliteľným obsahom (údajmi, ktoré objasňujú, o čom správa je). Typická správa v hre môže byť `KEY_PRESSED_ENTER`.
+- **vydavateľ**: Tento prvok *publikuje* správu a posiela ju všetkým odberateľom.
+- **odberateľ**: Tento prvok *počúva* konkrétne správy a vykonáva určitú úlohu ako výsledok prijatia tejto správy, napríklad vystrelenie lasera.
+
+Implementácia je pomerne malá, ale ide o veľmi silný vzor. Takto to môže byť implementované:
+
+```javascript
+//set up an EventEmitter class that contains listeners
+class EventEmitter {
+  constructor() {
+    this.listeners = {};
+  }
+//when a message is received, let the listener to handle its payload
+  on(message, listener) {
+    if (!this.listeners[message]) {
+      this.listeners[message] = [];
+    }
+    this.listeners[message].push(listener);
+  }
+//when a message is sent, send it to a listener with some payload
+  emit(message, payload = null) {
+    if (this.listeners[message]) {
+      this.listeners[message].forEach(l => l(message, payload))
+    }
+  }
+}
+
+```
+
+Na použitie vyššie uvedeného kódu môžeme vytvoriť veľmi malú implementáciu:
+
+```javascript
+//set up a message structure
+const Messages = {
+  HERO_MOVE_LEFT: 'HERO_MOVE_LEFT'
+};
+//invoke the eventEmitter you set up above
+const eventEmitter = new EventEmitter();
+//set up a hero
+const hero = createHero(0,0);
+//let the eventEmitter know to watch for messages pertaining to the hero moving left, and act on it
+eventEmitter.on(Messages.HERO_MOVE_LEFT, () => {
+  hero.move(5,0);
+});
+
+//set up the window to listen for the keyup event, specifically if the left arrow is hit, emit a message to move the hero left
+window.addEventListener('keyup', (evt) => {
+  if (evt.key === 'ArrowLeft') {
+    eventEmitter.emit(Messages.HERO_MOVE_LEFT)
+  }
+});
+```
+
+Vyššie sme prepojili udalosť klávesnice, `ArrowLeft`, a poslali správu `HERO_MOVE_LEFT`. Počúvame túto správu a ako výsledok presunieme `hrdinu`. Silou tohto vzoru je, že event listener a hrdina o sebe nevedia. Môžete premapovať `ArrowLeft` na kláves `A`. Okrem toho by bolo možné urobiť niečo úplne iné na `ArrowLeft` jednoduchými úpravami funkcie `on` v eventEmitteri:
+
+```javascript
+eventEmitter.on(Messages.HERO_MOVE_LEFT, () => {
+  hero.move(5,0);
+});
+```
+
+Keď sa veci skomplikujú s rastom vašej hry, tento vzor zostáva rovnako jednoduchý a váš kód zostáva čistý. Je skutočne odporúčané prijať tento vzor.
+
+---
+
+## 🚀 Výzva
+
+Premýšľajte o tom, ako môže vzor pub-sub zlepšiť hru. Ktoré časti by mali vysielať udalosti a ako by na ne mala hra reagovať? Teraz máte šancu byť kreatívni, premýšľajúc o novej hre a o tom, ako by sa jej časti mohli správať.
+
+## Kvíz po prednáške
+
+[Kvíz po prednáške](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/30)
+
+## Prehľad a samoštúdium
+
+Dozviete sa viac o Pub/Sub [čítaním o tom](https://docs.microsoft.com/azure/architecture/patterns/publisher-subscriber/?WT.mc_id=academic-77807-sagibbon).
+
+## Zadanie
+
+[Navrhnite hru](assignment.md)
+
+---
+
+**Upozornenie**:  
+Tento dokument bol preložený pomocou služby AI prekladu [Co-op Translator](https://github.com/Azure/co-op-translator). Hoci sa snažíme o presnosť, prosím, berte na vedomie, že automatizované preklady môžu obsahovať chyby alebo nepresnosti. Pôvodný dokument v jeho pôvodnom jazyku by mal byť považovaný za autoritatívny zdroj. Pre kritické informácie sa odporúča profesionálny ľudský preklad. Nenesieme zodpovednosť za akékoľvek nedorozumenia alebo nesprávne interpretácie vyplývajúce z použitia tohto prekladu.
\ No newline at end of file
diff --git a/translations/sk/6-space-game/1-introduction/assignment.md b/translations/sk/6-space-game/1-introduction/assignment.md
new file mode 100644
index 00000000..b20b80b1
--- /dev/null
+++ b/translations/sk/6-space-game/1-introduction/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "009bdedee9cc82988264be8cb31f9bf4",
+  "translation_date": "2025-08-27T22:35:29+00:00",
+  "source_file": "6-space-game/1-introduction/assignment.md",
+  "language_code": "sk"
+}
+-->
+# Vytvorenie návrhu hry
+
+## Pokyny
+
+Pomocou ukážok kódu z lekcie vytvorte reprezentáciu hry, ktorú máte radi. Musí ísť o jednoduchú hru, ale cieľom je použiť buď vzor triedy alebo kompozičný vzor a vzor pub/sub na ukázanie, ako by sa hra mohla spustiť. Buďte kreatívni!
+
+## Hodnotiace kritériá
+
+| Kritérium | Vynikajúce                                             | Dostatočné                                           | Potrebuje zlepšenie                                |
+| --------- | ------------------------------------------------------ | --------------------------------------------------- | ------------------------------------------------- |
+|           | Na obrazovke sú umiestnené tri prvky a manipulované    | Na obrazovke sú umiestnené dva prvky a manipulované | Na obrazovke je umiestnený jeden prvok a manipulovaný |
+
+---
+
+**Upozornenie**:  
+Tento dokument bol preložený pomocou služby AI prekladu [Co-op Translator](https://github.com/Azure/co-op-translator). Aj keď sa snažíme o presnosť, prosím, berte na vedomie, že automatizované preklady môžu obsahovať chyby alebo nepresnosti. Pôvodný dokument v jeho pôvodnom jazyku by mal byť považovaný za autoritatívny zdroj. Pre kritické informácie sa odporúča profesionálny ľudský preklad. Nie sme zodpovední za akékoľvek nedorozumenia alebo nesprávne interpretácie vyplývajúce z použitia tohto prekladu.
\ No newline at end of file
diff --git a/translations/sk/6-space-game/2-drawing-to-canvas/README.md b/translations/sk/6-space-game/2-drawing-to-canvas/README.md
new file mode 100644
index 00000000..aca19674
--- /dev/null
+++ b/translations/sk/6-space-game/2-drawing-to-canvas/README.md
@@ -0,0 +1,230 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "41be8d35e7f30aa9dad10773c35e89c4",
+  "translation_date": "2025-08-27T22:31:20+00:00",
+  "source_file": "6-space-game/2-drawing-to-canvas/README.md",
+  "language_code": "sk"
+}
+-->
+# Vytvorenie vesmírnej hry, časť 2: Kreslenie hrdinu a príšer na plátno
+
+## Kvíz pred prednáškou
+
+[Kvíz pred prednáškou](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/31)
+
+## Plátno
+
+Plátno je HTML element, ktorý nemá predvolene žiadny obsah; je to prázdne plátno. Musíte naň kresliť, aby ste ho naplnili.
+
+✅ Prečítajte si [viac o Canvas API](https://developer.mozilla.org/docs/Web/API/Canvas_API) na MDN.
+
+Takto sa zvyčajne deklaruje ako súčasť tela stránky:
+
+```html
+<canvas id="myCanvas" width="200" height="100"></canvas>
+```
+
+Vyššie nastavujeme `id`, `width` a `height`.
+
+- `id`: nastavte ho, aby ste mohli získať referenciu, keď s ním budete potrebovať pracovať.
+- `width`: šírka elementu.
+- `height`: výška elementu.
+
+## Kreslenie jednoduchých geometrických tvarov
+
+Plátno používa kartézsky súradnicový systém na kreslenie objektov. Používa os x a os y na vyjadrenie polohy objektu. Poloha `0,0` je v ľavom hornom rohu a pravý dolný roh je určený hodnotami WIDTH a HEIGHT plátna.
+
+![mriežka plátna](../../../../translated_images/canvas_grid.5f209da785ded492a01ece440e3032afe51efa500cc2308e5ea4252487ceaf0b.sk.png)  
+> Obrázok z [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes)
+
+Na kreslenie na plátno musíte prejsť nasledujúcimi krokmi:
+
+1. **Získať referenciu** na element plátna.
+2. **Získať referenciu** na element Context, ktorý sa nachádza na plátne.
+3. **Vykonať kresliacu operáciu** pomocou elementu Context.
+
+Kód pre vyššie uvedené kroky zvyčajne vyzerá takto:
+
+```javascript
+// draws a red rectangle
+//1. get the canvas reference
+canvas = document.getElementById("myCanvas");
+
+//2. set the context to 2D to draw basic shapes
+ctx = canvas.getContext("2d");
+
+//3. fill it with the color red
+ctx.fillStyle = 'red';
+
+//4. and draw a rectangle with these parameters, setting location and size
+ctx.fillRect(0,0, 200, 200) // x,y,width, height
+```
+
+✅ Canvas API sa zameriava hlavne na 2D tvary, ale môžete kresliť aj 3D objekty na webovú stránku; na to môžete použiť [WebGL API](https://developer.mozilla.org/docs/Web/API/WebGL_API).
+
+S Canvas API môžete kresliť rôzne veci, ako napríklad:
+
+- **Geometrické tvary**, už sme ukázali, ako nakresliť obdĺžnik, ale môžete kresliť oveľa viac.
+- **Text**, môžete kresliť text s akýmkoľvek fontom a farbou, ktorú si zvolíte.
+- **Obrázky**, môžete kresliť obrázky na základe obrazových súborov, ako napríklad .jpg alebo .png.
+
+✅ Skúste to! Už viete, ako nakresliť obdĺžnik, dokážete nakresliť kruh na stránku? Pozrite si niektoré zaujímavé kresby na plátne na CodePen. Tu je [obzvlášť pôsobivý príklad](https://codepen.io/dissimulate/pen/KrAwx).
+
+## Načítanie a kreslenie obrazového súboru
+
+Obrazový súbor načítate vytvorením objektu `Image` a nastavením jeho vlastnosti `src`. Potom počúvate udalosť `load`, aby ste vedeli, kedy je pripravený na použitie. Kód vyzerá takto:
+
+### Načítanie súboru
+
+```javascript
+const img = new Image();
+img.src = 'path/to/my/image.png';
+img.onload = () => {
+  // image loaded and ready to be used
+}
+```
+
+### Vzor načítania súboru
+
+Odporúča sa obaliť vyššie uvedené do konštruktu, ako je tento, aby sa to ľahšie používalo a aby ste sa pokúsili manipulovať s objektom až vtedy, keď je úplne načítaný:
+
+```javascript
+function loadAsset(path) {
+  return new Promise((resolve) => {
+    const img = new Image();
+    img.src = path;
+    img.onload = () => {
+      // image loaded and ready to be used
+      resolve(img);
+    }
+  })
+}
+
+// use like so
+
+async function run() {
+  const heroImg = await loadAsset('hero.png')
+  const monsterImg = await loadAsset('monster.png')
+}
+
+```
+
+Na kreslenie herných prvkov na obrazovku by váš kód vyzeral takto:
+
+```javascript
+async function run() {
+  const heroImg = await loadAsset('hero.png')
+  const monsterImg = await loadAsset('monster.png')
+
+  canvas = document.getElementById("myCanvas");
+  ctx = canvas.getContext("2d");
+  ctx.drawImage(heroImg, canvas.width/2,canvas.height/2);
+  ctx.drawImage(monsterImg, 0,0);
+}
+```
+
+## Teraz je čas začať budovať vašu hru
+
+### Čo vytvoriť
+
+Vytvoríte webovú stránku s elementom plátna. Mala by zobrazovať čiernu obrazovku `1024*768`. Poskytli sme vám dva obrázky:
+
+- Loď hrdinu
+
+   ![Loď hrdinu](../../../../translated_images/player.dd24c1afa8c71e9b82b2958946d4bad13308681392d4b5ddcc61a0e818ef8088.sk.png)
+
+- 5*5 príšer
+
+   ![Loď príšer](../../../../translated_images/enemyShip.5df2a822c16650c2fb3c06652e8ec8120cdb9122a6de46b9a1a56d54db22657f.sk.png)
+
+### Odporúčané kroky na začatie vývoja
+
+Nájdite súbory, ktoré boli pre vás vytvorené v podpriečinku `your-work`. Mali by obsahovať nasledujúce:
+
+```bash
+-| assets
+  -| enemyShip.png
+  -| player.png
+-| index.html
+-| app.js
+-| package.json
+```
+
+Otvorte kópiu tohto priečinka vo Visual Studio Code. Mali by ste mať nastavené lokálne vývojové prostredie, najlepšie s Visual Studio Code, NPM a Node. Ak nemáte na počítači nastavený `npm`, [tu je návod, ako to urobiť](https://www.npmjs.com/get-npm).
+
+Začnite svoj projekt navigáciou do priečinka `your_work`:
+
+```bash
+cd your-work
+npm start
+```
+
+Vyššie uvedené spustí HTTP server na adrese `http://localhost:5000`. Otvorte prehliadač a zadajte túto adresu. Momentálne je to prázdna stránka, ale to sa zmení.
+
+> Poznámka: aby ste videli zmeny na obrazovke, obnovte prehliadač.
+
+### Pridanie kódu
+
+Pridajte potrebný kód do `your-work/app.js`, aby ste vyriešili nasledujúce:
+
+1. **Nakreslite** plátno s čiernym pozadím  
+   > tip: pridajte dva riadky pod príslušný TODO v `/app.js`, nastavte element `ctx` na čiernu farbu a horné/ľavé súradnice na 0,0, pričom výška a šírka budú rovnaké ako plátno.
+2. **Načítajte** textúry  
+   > tip: pridajte obrázky hráča a nepriateľa pomocou `await loadTexture` a odovzdajte cestu k obrázku. Zatiaľ ich na obrazovke neuvidíte!
+3. **Nakreslite** hrdinu do stredu obrazovky v dolnej polovici  
+   > tip: použite API `drawImage` na nakreslenie heroImg na obrazovku, nastavte `canvas.width / 2 - 45` a `canvas.height - canvas.height / 4)`.
+4. **Nakreslite** 5*5 príšer  
+   > tip: Teraz môžete odkomentovať kód na kreslenie nepriateľov na obrazovku. Potom prejdite do funkcie `createEnemies` a doplňte ju.
+
+   Najskôr nastavte niektoré konštanty:
+
+    ```javascript
+    const MONSTER_TOTAL = 5;
+    const MONSTER_WIDTH = MONSTER_TOTAL * 98;
+    const START_X = (canvas.width - MONSTER_WIDTH) / 2;
+    const STOP_X = START_X + MONSTER_WIDTH;
+    ```
+
+    potom vytvorte slučku na nakreslenie poľa príšer na obrazovku:
+
+    ```javascript
+    for (let x = START_X; x < STOP_X; x += 98) {
+        for (let y = 0; y < 50 * 5; y += 50) {
+          ctx.drawImage(enemyImg, x, y);
+        }
+      }
+    ```
+
+## Výsledok
+
+Hotový výsledok by mal vyzerať takto:
+
+![Čierna obrazovka s hrdinom a 5*5 príšerami](../../../../translated_images/partI-solution.36c53b48c9ffae2a5e15496b23b604ba5393433e4bf91608a7a0a020eb7a2691.sk.png)
+
+## Riešenie
+
+Najskôr sa pokúste vyriešiť úlohu sami, ale ak sa zaseknete, pozrite si [riešenie](../../../../6-space-game/2-drawing-to-canvas/solution/app.js).
+
+---
+
+## 🚀 Výzva
+
+Naučili ste sa kresliť pomocou Canvas API zameraného na 2D; pozrite sa na [WebGL API](https://developer.mozilla.org/docs/Web/API/WebGL_API) a skúste nakresliť 3D objekt.
+
+## Kvíz po prednáške
+
+[Kvíz po prednáške](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/32)
+
+## Prehľad a samoštúdium
+
+Dozviete sa viac o Canvas API [čítaním o ňom](https://developer.mozilla.org/docs/Web/API/Canvas_API).
+
+## Zadanie
+
+[Hrajte sa s Canvas API](assignment.md)
+
+---
+
+**Upozornenie**:  
+Tento dokument bol preložený pomocou služby AI prekladu [Co-op Translator](https://github.com/Azure/co-op-translator). Hoci sa snažíme o presnosť, prosím, berte na vedomie, že automatizované preklady môžu obsahovať chyby alebo nepresnosti. Pôvodný dokument v jeho rodnom jazyku by mal byť považovaný za autoritatívny zdroj. Pre kritické informácie sa odporúča profesionálny ľudský preklad. Nie sme zodpovední za akékoľvek nedorozumenia alebo nesprávne interpretácie vyplývajúce z použitia tohto prekladu.
\ No newline at end of file
diff --git a/translations/sk/6-space-game/2-drawing-to-canvas/assignment.md b/translations/sk/6-space-game/2-drawing-to-canvas/assignment.md
new file mode 100644
index 00000000..eab5e72c
--- /dev/null
+++ b/translations/sk/6-space-game/2-drawing-to-canvas/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "ca1cf78a4c60df77ab32a154ec024d7f",
+  "translation_date": "2025-08-27T22:32:19+00:00",
+  "source_file": "6-space-game/2-drawing-to-canvas/assignment.md",
+  "language_code": "sk"
+}
+-->
+# Hrajte sa s Canvas API
+
+## Pokyny
+
+Vyberte si jeden prvok z Canvas API a vytvorte okolo neho niečo zaujímavé. Dokážete vytvoriť malú galaxiu opakujúcich sa hviezd? Alebo zaujímavú textúru farebných čiar? Môžete sa inšpirovať na CodePen (ale nekopírujte).
+
+## Hodnotiace kritériá
+
+| Kritérium | Vynikajúce                                               | Dostatočné                         | Potrebuje zlepšenie   |
+| --------- | -------------------------------------------------------- | ---------------------------------- | --------------------- |
+|           | Kód je odovzdaný a ukazuje zaujímavú textúru alebo tvar  | Kód je odovzdaný, ale nefunguje    | Kód nie je odovzdaný  |
+
+---
+
+**Upozornenie**:  
+Tento dokument bol preložený pomocou služby AI prekladu [Co-op Translator](https://github.com/Azure/co-op-translator). Aj keď sa snažíme o presnosť, prosím, berte na vedomie, že automatizované preklady môžu obsahovať chyby alebo nepresnosti. Pôvodný dokument v jeho rodnom jazyku by mal byť považovaný za autoritatívny zdroj. Pre kritické informácie sa odporúča profesionálny ľudský preklad. Nenesieme zodpovednosť za akékoľvek nedorozumenia alebo nesprávne interpretácie vyplývajúce z použitia tohto prekladu.
\ No newline at end of file
diff --git a/translations/sk/6-space-game/3-moving-elements-around/README.md b/translations/sk/6-space-game/3-moving-elements-around/README.md
new file mode 100644
index 00000000..f0b62c8d
--- /dev/null
+++ b/translations/sk/6-space-game/3-moving-elements-around/README.md
@@ -0,0 +1,400 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "23f088add24f0f1fa51014a9e27ea280",
+  "translation_date": "2025-08-27T22:25:40+00:00",
+  "source_file": "6-space-game/3-moving-elements-around/README.md",
+  "language_code": "sk"
+}
+-->
+# Vytvorenie vesmírnej hry, časť 3: Pridanie pohybu
+
+## Kvíz pred prednáškou
+
+[Kvíz pred prednáškou](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/33)
+
+Hry nie sú veľmi zábavné, kým sa na obrazovke nezačnú pohybovať mimozemšťania! V tejto hre využijeme dva typy pohybov:
+
+- **Pohyb klávesnicou/myšou**: keď používateľ interaguje s klávesnicou alebo myšou na pohyb objektu na obrazovke.
+- **Pohyb vyvolaný hrou**: keď hra pohybuje objektom v určitých časových intervaloch.
+
+Ako teda pohybujeme vecami na obrazovke? Všetko je to o karteziánskych súradniciach: zmeníme polohu (x, y) objektu a potom prekreslíme obrazovku.
+
+Typicky potrebujete nasledujúce kroky na dosiahnutie *pohybu* na obrazovke:
+
+1. **Nastaviť novú polohu** objektu; to je potrebné na to, aby sa objekt javil ako pohybujúci sa.
+2. **Vyčistiť obrazovku**, obrazovka musí byť vyčistená medzi jednotlivými prekresleniami. Môžeme ju vyčistiť nakreslením obdĺžnika, ktorý vyplníme farbou pozadia.
+3. **Prekresliť objekt** na novej polohe. Týmto konečne dosiahneme pohyb objektu z jedného miesta na druhé.
+
+Takto to môže vyzerať v kóde:
+
+```javascript
+//set the hero's location
+hero.x += 5;
+// clear the rectangle that hosts the hero
+ctx.clearRect(0, 0, canvas.width, canvas.height);
+// redraw the game background and hero
+ctx.fillRect(0, 0, canvas.width, canvas.height)
+ctx.fillStyle = "black";
+ctx.drawImage(heroImg, hero.x, hero.y);
+```
+
+✅ Dokážete si predstaviť dôvod, prečo by prekresľovanie vášho hrdinu mnohokrát za sekundu mohlo spôsobiť výkonové náklady? Prečítajte si o [alternatívach k tomuto vzoru](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas).
+
+## Spracovanie udalostí klávesnice
+
+Udalosti spracovávate pripojením konkrétnych udalostí ku kódu. Udalosti klávesnice sa spúšťajú na celom okne, zatiaľ čo udalosti myši, ako napríklad `click`, môžu byť pripojené ku kliknutiu na konkrétny prvok. Počas tohto projektu budeme používať udalosti klávesnice.
+
+Na spracovanie udalosti musíte použiť metódu `addEventListener()` okna a poskytnúť jej dva vstupné parametre. Prvým parametrom je názov udalosti, napríklad `keyup`. Druhým parametrom je funkcia, ktorá by sa mala spustiť ako výsledok udalosti.
+
+Tu je príklad:
+
+```javascript
+window.addEventListener('keyup', (evt) => {
+  // `evt.key` = string representation of the key
+  if (evt.key === 'ArrowUp') {
+    // do something
+  }
+})
+```
+
+Pre udalosti klávesnice existujú dve vlastnosti na udalosti, ktoré môžete použiť na zistenie, ktorá klávesa bola stlačená:
+
+- `key`, toto je reťazcová reprezentácia stlačenej klávesy, napríklad `ArrowUp`
+- `keyCode`, toto je číselná reprezentácia, napríklad `37`, čo zodpovedá `ArrowLeft`.
+
+✅ Manipulácia s udalosťami klávesnice je užitočná aj mimo vývoja hier. Na aké iné použitia by ste mohli túto techniku využiť?
+
+### Špeciálne klávesy: upozornenie
+
+Existujú niektoré *špeciálne* klávesy, ktoré ovplyvňujú okno. To znamená, že ak počúvate udalosť `keyup` a použijete tieto špeciálne klávesy na pohyb vášho hrdinu, vykoná sa aj horizontálne posúvanie. Z tohto dôvodu možno budete chcieť *vypnúť* toto predvolené správanie prehliadača pri budovaní vašej hry. Potrebujete kód ako tento:
+
+```javascript
+let onKeyDown = function (e) {
+  console.log(e.keyCode);
+  switch (e.keyCode) {
+    case 37:
+    case 39:
+    case 38:
+    case 40: // Arrow keys
+    case 32:
+      e.preventDefault();
+      break; // Space
+    default:
+      break; // do not block other keys
+  }
+};
+
+window.addEventListener('keydown', onKeyDown);
+```
+
+Vyššie uvedený kód zabezpečí, že šípky a medzerník budú mať svoje *predvolené* správanie vypnuté. Mechanizmus *vypnutia* sa spustí, keď zavoláme `e.preventDefault()`.
+
+## Pohyb vyvolaný hrou
+
+Veci môžeme nechať pohybovať sa samé pomocou časovačov, ako sú funkcie `setTimeout()` alebo `setInterval()`, ktoré aktualizujú polohu objektu pri každom tiknutí alebo časovom intervale. Takto to môže vyzerať:
+
+```javascript
+let id = setInterval(() => {
+  //move the enemy on the y axis
+  enemy.y += 10;
+})
+```
+
+## Herná slučka
+
+Herná slučka je koncept, ktorý je v podstate funkciou vyvolávanou v pravidelných intervaloch. Nazýva sa herná slučka, pretože všetko, čo by malo byť viditeľné pre používateľa, sa kreslí v rámci tejto slučky. Herná slučka využíva všetky herné objekty, ktoré sú súčasťou hry, a kreslí ich, pokiaľ z nejakého dôvodu už nie sú súčasťou hry. Napríklad, ak je objekt nepriateľ, ktorý bol zasiahnutý laserom a vybuchne, už nie je súčasťou aktuálnej hernej slučky (o tomto sa dozviete viac v nasledujúcich lekciách).
+
+Takto môže typicky vyzerať herná slučka, vyjadrená v kóde:
+
+```javascript
+let gameLoopId = setInterval(() =>
+  function gameLoop() {
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    ctx.fillStyle = "black";
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+    drawHero();
+    drawEnemies();
+    drawStaticObjects();
+}, 200);
+```
+
+Vyššie uvedená slučka sa vyvoláva každých `200` milisekúnd na prekreslenie plátna. Máte možnosť zvoliť si najlepší interval, ktorý má zmysel pre vašu hru.
+
+## Pokračovanie vo vesmírnej hre
+
+Vezmete existujúci kód a rozšírite ho. Buď začnite s kódom, ktorý ste dokončili počas časti I, alebo použite kód v [časti II - štartér](../../../../6-space-game/3-moving-elements-around/your-work).
+
+- **Pohyb hrdinu**: pridáte kód na zabezpečenie pohybu hrdinu pomocou šípok.
+- **Pohyb nepriateľov**: budete tiež musieť pridať kód na zabezpečenie pohybu nepriateľov zhora nadol v danom tempe.
+
+## Odporúčané kroky
+
+Nájdite súbory, ktoré boli pre vás vytvorené v podpriečinku `your-work`. Mali by obsahovať nasledujúce:
+
+```bash
+-| assets
+  -| enemyShip.png
+  -| player.png
+-| index.html
+-| app.js
+-| package.json
+```
+
+Svoj projekt spustíte v priečinku `your_work` zadaním:
+
+```bash
+cd your-work
+npm start
+```
+
+Vyššie uvedené spustí HTTP server na adrese `http://localhost:5000`. Otvorte prehliadač a zadajte túto adresu, momentálne by sa mal zobraziť hrdina a všetci nepriatelia; nič sa však ešte nehýbe!
+
+### Pridajte kód
+
+1. **Pridajte dedikované objekty** pre `hero`, `enemy` a `game object`, mali by mať vlastnosti `x` a `y`. (Pamätajte na časť o [dedičnosti alebo kompozícii](../README.md)).
+
+   *TIP*: Začnite pridaním novej triedy GameObject s jej konštruktorom definovaným nasledovne a potom ju nakreslite na plátno:
+  
+    ```javascript
+        
+    class GameObject {
+      constructor(x, y) {
+        this.x = x;
+        this.y = y;
+        this.dead = false;
+        this.type = "";
+        this.width = 0;
+        this.height = 0;
+        this.img = undefined;
+      }
+    
+      draw(ctx) {
+        ctx.drawImage(this.img, this.x, this.y, this.width, this.height);
+      }
+    }
+    ```
+
+    Teraz rozšírte tento GameObject na vytvorenie Hero a Enemy.
+    
+    ```javascript
+    class Hero extends GameObject {
+      constructor(x, y) {
+        ...it needs an x, y, type, and speed
+      }
+    }
+    ```
+
+    ```javascript
+    class Enemy extends GameObject {
+      constructor(x, y) {
+        super(x, y);
+        (this.width = 98), (this.height = 50);
+        this.type = "Enemy";
+        let id = setInterval(() => {
+          if (this.y < canvas.height - this.height) {
+            this.y += 5;
+          } else {
+            console.log('Stopped at', this.y)
+            clearInterval(id);
+          }
+        }, 300)
+      }
+    }
+    ```
+
+2. **Pridajte spracovanie udalostí klávesnice** na spracovanie navigácie klávesami (pohyb hrdinu hore/dole, vľavo/vpravo).
+
+   *PAMÄTAJTE*: Je to karteziánsky systém, ľavý horný roh je `0,0`. Tiež nezabudnite pridať kód na zastavenie *predvoleného správania*.
+
+   >tip: vytvorte svoju funkciu onKeyDown a pripojte ju k oknu:
+
+   ```javascript
+    let onKeyDown = function (e) {
+	      console.log(e.keyCode);
+	        ...add the code from the lesson above to stop default behavior
+	      }
+    };
+
+    window.addEventListener("keydown", onKeyDown);
+   ```
+    
+   Skontrolujte konzolu prehliadača v tomto bode a sledujte, ako sa zaznamenávajú stlačenia kláves.
+
+3. **Implementujte** [Pub sub pattern](../README.md), aby bol váš kód čistý, keď budete pokračovať v ďalších častiach.
+
+   Na vykonanie tejto poslednej časti môžete:
+
+   1. **Pridať poslucháča udalostí** na okno:
+
+       ```javascript
+        window.addEventListener("keyup", (evt) => {
+          if (evt.key === "ArrowUp") {
+            eventEmitter.emit(Messages.KEY_EVENT_UP);
+          } else if (evt.key === "ArrowDown") {
+            eventEmitter.emit(Messages.KEY_EVENT_DOWN);
+          } else if (evt.key === "ArrowLeft") {
+            eventEmitter.emit(Messages.KEY_EVENT_LEFT);
+          } else if (evt.key === "ArrowRight") {
+            eventEmitter.emit(Messages.KEY_EVENT_RIGHT);
+          }
+        });
+        ```
+
+    1. **Vytvoriť triedu EventEmitter** na publikovanie a odber správ:
+
+        ```javascript
+        class EventEmitter {
+          constructor() {
+            this.listeners = {};
+          }
+        
+          on(message, listener) {
+            if (!this.listeners[message]) {
+              this.listeners[message] = [];
+            }
+            this.listeners[message].push(listener);
+          }
+        
+          emit(message, payload = null) {
+            if (this.listeners[message]) {
+              this.listeners[message].forEach((l) => l(message, payload));
+            }
+          }
+        }
+        ```
+
+    1. **Pridať konštanty** a nastaviť EventEmitter:
+
+        ```javascript
+        const Messages = {
+          KEY_EVENT_UP: "KEY_EVENT_UP",
+          KEY_EVENT_DOWN: "KEY_EVENT_DOWN",
+          KEY_EVENT_LEFT: "KEY_EVENT_LEFT",
+          KEY_EVENT_RIGHT: "KEY_EVENT_RIGHT",
+        };
+        
+        let heroImg, 
+            enemyImg, 
+            laserImg,
+            canvas, ctx, 
+            gameObjects = [], 
+            hero, 
+            eventEmitter = new EventEmitter();
+        ```
+
+    1. **Inicializovať hru**
+
+    ```javascript
+    function initGame() {
+      gameObjects = [];
+      createEnemies();
+      createHero();
+    
+      eventEmitter.on(Messages.KEY_EVENT_UP, () => {
+        hero.y -=5 ;
+      })
+    
+      eventEmitter.on(Messages.KEY_EVENT_DOWN, () => {
+        hero.y += 5;
+      });
+    
+      eventEmitter.on(Messages.KEY_EVENT_LEFT, () => {
+        hero.x -= 5;
+      });
+    
+      eventEmitter.on(Messages.KEY_EVENT_RIGHT, () => {
+        hero.x += 5;
+      });
+    }
+    ```
+
+1. **Nastavte hernú slučku**
+
+   Refaktorujte funkciu window.onload na inicializáciu hry a nastavenie hernej slučky v dobrom intervale. Tiež pridáte laserový lúč:
+
+    ```javascript
+    window.onload = async () => {
+      canvas = document.getElementById("canvas");
+      ctx = canvas.getContext("2d");
+      heroImg = await loadTexture("assets/player.png");
+      enemyImg = await loadTexture("assets/enemyShip.png");
+      laserImg = await loadTexture("assets/laserRed.png");
+    
+      initGame();
+      let gameLoopId = setInterval(() => {
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        ctx.fillStyle = "black";
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
+        drawGameObjects(ctx);
+      }, 100)
+      
+    };
+    ```
+
+5. **Pridajte kód** na pohyb nepriateľov v určitom intervale.
+
+    Refaktorujte funkciu `createEnemies()` na vytvorenie nepriateľov a ich pridanie do novej triedy gameObjects:
+
+    ```javascript
+    function createEnemies() {
+      const MONSTER_TOTAL = 5;
+      const MONSTER_WIDTH = MONSTER_TOTAL * 98;
+      const START_X = (canvas.width - MONSTER_WIDTH) / 2;
+      const STOP_X = START_X + MONSTER_WIDTH;
+    
+      for (let x = START_X; x < STOP_X; x += 98) {
+        for (let y = 0; y < 50 * 5; y += 50) {
+          const enemy = new Enemy(x, y);
+          enemy.img = enemyImg;
+          gameObjects.push(enemy);
+        }
+      }
+    }
+    ```
+    
+    a pridajte funkciu `createHero()` na vykonanie podobného procesu pre hrdinu.
+    
+    ```javascript
+    function createHero() {
+      hero = new Hero(
+        canvas.width / 2 - 45,
+        canvas.height - canvas.height / 4
+      );
+      hero.img = heroImg;
+      gameObjects.push(hero);
+    }
+    ```
+
+    a nakoniec pridajte funkciu `drawGameObjects()` na spustenie kreslenia:
+
+    ```javascript
+    function drawGameObjects(ctx) {
+      gameObjects.forEach(go => go.draw(ctx));
+    }
+    ```
+
+    Vaši nepriatelia by mali začať postupovať na vašu vesmírnu loď!
+
+---
+
+## 🚀 Výzva
+
+Ako vidíte, váš kód sa môže zmeniť na "špagetový kód", keď začnete pridávať funkcie, premenné a triedy. Ako môžete lepšie organizovať svoj kód, aby bol čitateľnejší? Návrhnite systém na organizáciu vášho kódu, aj keď stále zostáva v jednom súbore.
+
+## Kvíz po prednáške
+
+[Kvíz po prednáške](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/34)
+
+## Prehľad a samoštúdium
+
+Aj keď píšeme našu hru bez použitia frameworkov, existuje mnoho JavaScriptových frameworkov pre vývoj hier na plátne. Nájdite si čas na [čítanie o nich](https://github.com/collections/javascript-game-engines).
+
+## Zadanie
+
+[Okomentujte svoj kód](assignment.md)
+
+---
+
+**Upozornenie**:  
+Tento dokument bol preložený pomocou služby AI prekladu [Co-op Translator](https://github.com/Azure/co-op-translator). Aj keď sa snažíme o presnosť, prosím, berte na vedomie, že automatizované preklady môžu obsahovať chyby alebo nepresnosti. Pôvodný dokument v jeho pôvodnom jazyku by mal byť považovaný za autoritatívny zdroj. Pre kritické informácie sa odporúča profesionálny ľudský preklad. Nie sme zodpovední za akékoľvek nedorozumenia alebo nesprávne interpretácie vyplývajúce z použitia tohto prekladu.
\ No newline at end of file
diff --git a/translations/sk/6-space-game/3-moving-elements-around/assignment.md b/translations/sk/6-space-game/3-moving-elements-around/assignment.md
new file mode 100644
index 00000000..e870527b
--- /dev/null
+++ b/translations/sk/6-space-game/3-moving-elements-around/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "ccfcd8c2932761359fbaff3d6b01ace4",
+  "translation_date": "2025-08-27T22:27:07+00:00",
+  "source_file": "6-space-game/3-moving-elements-around/assignment.md",
+  "language_code": "sk"
+}
+-->
+# Komentujte svoj kód
+
+## Pokyny
+
+Prejdite si svoj aktuálny súbor /app.js v priečinku hry a nájdite spôsoby, ako ho okomentovať a upraviť. Kód sa veľmi ľahko môže stať neprehľadným, a teraz máte dobrú príležitosť pridať komentáre, aby ste zabezpečili, že váš kód bude čitateľný a použiteľný aj neskôr.
+
+## Hodnotiace kritériá
+
+| Kritérium | Vynikajúce                                                        | Dostatočné                           | Vyžaduje zlepšenie                                             |
+| --------- | ----------------------------------------------------------------- | ------------------------------------ | ------------------------------------------------------------- |
+|           | Kód `app.js` je plne okomentovaný a usporiadaný do logických blokov | Kód `app.js` je primerane okomentovaný | Kód `app.js` je čiastočne neorganizovaný a chýbajú mu dobré komentáre |
+
+---
+
+**Upozornenie**:  
+Tento dokument bol preložený pomocou služby AI prekladu [Co-op Translator](https://github.com/Azure/co-op-translator). Aj keď sa snažíme o presnosť, prosím, berte na vedomie, že automatizované preklady môžu obsahovať chyby alebo nepresnosti. Pôvodný dokument v jeho pôvodnom jazyku by mal byť považovaný za autoritatívny zdroj. Pre kritické informácie sa odporúča profesionálny ľudský preklad. Nenesieme zodpovednosť za akékoľvek nedorozumenia alebo nesprávne interpretácie vyplývajúce z použitia tohto prekladu.
\ No newline at end of file
diff --git a/translations/sk/6-space-game/4-collision-detection/README.md b/translations/sk/6-space-game/4-collision-detection/README.md
new file mode 100644
index 00000000..a3691d4f
--- /dev/null
+++ b/translations/sk/6-space-game/4-collision-detection/README.md
@@ -0,0 +1,311 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "2e83e38c35dc003f046d7cc0bbfd4920",
+  "translation_date": "2025-08-27T22:29:17+00:00",
+  "source_file": "6-space-game/4-collision-detection/README.md",
+  "language_code": "sk"
+}
+-->
+# Vytvorenie vesmírnej hry, časť 4: Pridanie lasera a detekcia kolízií
+
+## Kvíz pred prednáškou
+
+[Kvíz pred prednáškou](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/35)
+
+V tejto lekcii sa naučíte, ako strieľať lasery pomocou JavaScriptu! Do našej hry pridáme dve veci:
+
+- **Laser**: tento laser sa vystrelí z lode hrdinu a pohybuje sa vertikálne nahor
+- **Detekcia kolízií**, ako súčasť implementácie schopnosti *strieľať*, pridáme aj niekoľko pravidiel hry:
+   - **Laser zasiahne nepriateľa**: Nepriateľ zomrie, ak ho zasiahne laser
+   - **Laser zasiahne hornú časť obrazovky**: Laser sa zničí, ak zasiahne hornú časť obrazovky
+   - **Kolízia nepriateľa a hrdinu**: Nepriateľ aj hrdina sa zničia, ak sa zrazia
+   - **Nepriateľ zasiahne spodnú časť obrazovky**: Nepriateľ aj hrdina sa zničia, ak nepriateľ zasiahne spodnú časť obrazovky
+
+Stručne povedané, vy -- *hrdina* -- musíte zasiahnuť všetkých nepriateľov laserom skôr, než sa dostanú na spodnú časť obrazovky.
+
+✅ Urobte si malý prieskum o úplne prvej počítačovej hre, ktorá bola kedy napísaná. Aká bola jej funkčnosť?
+
+Buďme spolu hrdinami!
+
+## Detekcia kolízií
+
+Ako vykonáme detekciu kolízií? Musíme si predstaviť naše herné objekty ako obdĺžniky, ktoré sa pohybujú. Prečo? Pretože obrázok použitý na vykreslenie herného objektu je obdĺžnik: má `x`, `y`, `šírku` a `výšku`.
+
+Ak sa dva obdĺžniky, napríklad hrdina a nepriateľ, *pretínajú*, nastane kolízia. Čo by sa malo stať, závisí od pravidiel hry. Na implementáciu detekcie kolízií potrebujete nasledovné:
+
+1. Spôsob, ako získať obdĺžnikovú reprezentáciu herného objektu, niečo takéto:
+
+   ```javascript
+   rectFromGameObject() {
+     return {
+       top: this.y,
+       left: this.x,
+       bottom: this.y + this.height,
+       right: this.x + this.width
+     }
+   }
+   ```
+
+2. Funkciu na porovnanie, ktorá môže vyzerať takto:
+
+   ```javascript
+   function intersectRect(r1, r2) {
+     return !(r2.left > r1.right ||
+       r2.right < r1.left ||
+       r2.top > r1.bottom ||
+       r2.bottom < r1.top);
+   }
+   ```
+
+## Ako ničíme objekty
+
+Na zničenie objektov v hre musíte dať hre vedieť, že tento objekt už nemá byť vykreslený v hernej slučke, ktorá sa spúšťa v určitých intervaloch. Spôsob, ako to urobiť, je označiť herný objekt ako *mŕtvy*, keď sa niečo stane, napríklad takto:
+
+```javascript
+// collision happened
+enemy.dead = true
+```
+
+Potom môžete vyradiť *mŕtve* objekty pred opätovným vykreslením obrazovky, napríklad takto:
+
+```javascript
+gameObjects = gameObject.filter(go => !go.dead);
+```
+
+## Ako vystreliť laser
+
+Vystrelenie lasera znamená reagovať na udalosť stlačenia klávesy a vytvoriť objekt, ktorý sa pohybuje určitým smerom. Preto musíme vykonať nasledujúce kroky:
+
+1. **Vytvoriť objekt lasera**: z vrchnej časti lode hrdinu, ktorý sa po vytvorení začne pohybovať nahor smerom k hornej časti obrazovky.
+2. **Pripojiť kód k udalosti stlačenia klávesy**: musíme vybrať kláves na klávesnici, ktorý bude predstavovať vystrelenie lasera hráčom.
+3. **Vytvoriť herný objekt, ktorý vyzerá ako laser**, keď je kláves stlačený.
+
+## Časový odstup pre laser
+
+Laser musí vystreliť vždy, keď stlačíte kláves, napríklad *medzerník*. Aby sme zabránili tomu, že hra vytvorí príliš veľa laserov v krátkom čase, musíme to opraviť. Oprava spočíva v implementácii tzv. *časového odstupu*, časovača, ktorý zabezpečí, že laser môže byť vystrelený len v určitých intervaloch. Môžete to implementovať nasledovne:
+
+```javascript
+class Cooldown {
+  constructor(time) {
+    this.cool = false;
+    setTimeout(() => {
+      this.cool = true;
+    }, time)
+  }
+}
+
+class Weapon {
+  constructor {
+  }
+  fire() {
+    if (!this.cooldown || this.cooldown.cool) {
+      // produce a laser
+      this.cooldown = new Cooldown(500);
+    } else {
+      // do nothing - it hasn't cooled down yet.
+    }
+  }
+}
+```
+
+✅ Pozrite si lekciu 1 zo série vesmírnych hier, aby ste si pripomenuli *časové odstupy*.
+
+## Čo vytvoriť
+
+Vezmite existujúci kód (ktorý by ste mali vyčistiť a refaktorovať) z predchádzajúcej lekcie a rozšírte ho. Buď začnite s kódom z časti II, alebo použite kód z [časti III - štartovací kód](../../../../../../../../../your-work).
+
+> tip: laser, s ktorým budete pracovať, je už vo vašom priečinku s aktívami a je referencovaný vaším kódom
+
+- **Pridajte detekciu kolízií**, keď laser narazí na niečo, mali by platiť nasledujúce pravidlá:
+   1. **Laser zasiahne nepriateľa**: nepriateľ zomrie, ak ho zasiahne laser
+   2. **Laser zasiahne hornú časť obrazovky**: laser sa zničí, ak zasiahne hornú časť obrazovky
+   3. **Kolízia nepriateľa a hrdinu**: nepriateľ aj hrdina sa zničia, ak sa zrazia
+   4. **Nepriateľ zasiahne spodnú časť obrazovky**: nepriateľ aj hrdina sa zničia, ak nepriateľ zasiahne spodnú časť obrazovky
+
+## Odporúčané kroky
+
+Vyhľadajte súbory, ktoré boli pre vás vytvorené v podpriečinku `your-work`. Mali by obsahovať nasledovné:
+
+```bash
+-| assets
+  -| enemyShip.png
+  -| player.png
+  -| laserRed.png
+-| index.html
+-| app.js
+-| package.json
+```
+
+Spustite svoj projekt v priečinku `your_work` zadaním:
+
+```bash
+cd your-work
+npm start
+```
+
+Vyššie uvedené spustí HTTP server na adrese `http://localhost:5000`. Otvorte prehliadač a zadajte túto adresu, momentálne by sa mal zobraziť hrdina a všetci nepriatelia, zatiaľ sa nič nehýbe :).
+
+### Pridajte kód
+
+1. **Nastavte obdĺžnikovú reprezentáciu vášho herného objektu na spracovanie kolízií** Nasledujúci kód vám umožní získať obdĺžnikovú reprezentáciu `GameObject`. Upraviť triedu GameObject tak, aby ju rozšírila:
+
+    ```javascript
+    rectFromGameObject() {
+        return {
+          top: this.y,
+          left: this.x,
+          bottom: this.y + this.height,
+          right: this.x + this.width,
+        };
+      }
+    ```
+
+2. **Pridajte kód, ktorý kontroluje kolízie** Toto bude nová funkcia, ktorá testuje, či sa dva obdĺžniky pretínajú:
+
+    ```javascript
+    function intersectRect(r1, r2) {
+      return !(
+        r2.left > r1.right ||
+        r2.right < r1.left ||
+        r2.top > r1.bottom ||
+        r2.bottom < r1.top
+      );
+    }
+    ```
+
+3. **Pridajte schopnosť vystreliť laser**
+   1. **Pridajte správu o udalosti stlačenia klávesy**. Kláves *medzerník* by mal vytvoriť laser tesne nad loďou hrdinu. Pridajte tri konštanty do objektu Messages:
+
+       ```javascript
+        KEY_EVENT_SPACE: "KEY_EVENT_SPACE",
+        COLLISION_ENEMY_LASER: "COLLISION_ENEMY_LASER",
+        COLLISION_ENEMY_HERO: "COLLISION_ENEMY_HERO",
+       ```
+
+   1. **Spracujte kláves medzerník**. Upraviť funkciu `window.addEventListener` pre stlačenie klávesy, aby spracovala medzerník:
+
+      ```javascript
+        } else if(evt.keyCode === 32) {
+          eventEmitter.emit(Messages.KEY_EVENT_SPACE);
+        }
+      ```
+
+    1. **Pridajte poslucháčov**. Upraviť funkciu `initGame()`, aby hrdina mohol strieľať, keď je stlačený medzerník:
+
+       ```javascript
+       eventEmitter.on(Messages.KEY_EVENT_SPACE, () => {
+        if (hero.canFire()) {
+          hero.fire();
+        }
+       ```
+
+       a pridajte novú funkciu `eventEmitter.on()`, aby ste zabezpečili správanie, keď nepriateľ narazí na laser:
+
+          ```javascript
+          eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => {
+            first.dead = true;
+            second.dead = true;
+          })
+          ```
+
+   1. **Pohyb objektu**, Zabezpečte, aby sa laser postupne pohyboval k hornej časti obrazovky. Vytvoríte novú triedu Laser, ktorá rozširuje `GameObject`, ako ste to už urobili predtým: 
+   
+      ```javascript
+        class Laser extends GameObject {
+        constructor(x, y) {
+          super(x,y);
+          (this.width = 9), (this.height = 33);
+          this.type = 'Laser';
+          this.img = laserImg;
+          let id = setInterval(() => {
+            if (this.y > 0) {
+              this.y -= 15;
+            } else {
+              this.dead = true;
+              clearInterval(id);
+            }
+          }, 100)
+        }
+      }
+      ```
+
+   1. **Spracujte kolízie**, Implementujte pravidlá kolízií pre laser. Pridajte funkciu `updateGameObjects()`, ktorá testuje kolízie objektov:
+
+      ```javascript
+      function updateGameObjects() {
+        const enemies = gameObjects.filter(go => go.type === 'Enemy');
+        const lasers = gameObjects.filter((go) => go.type === "Laser");
+      // laser hit something
+        lasers.forEach((l) => {
+          enemies.forEach((m) => {
+            if (intersectRect(l.rectFromGameObject(), m.rectFromGameObject())) {
+            eventEmitter.emit(Messages.COLLISION_ENEMY_LASER, {
+              first: l,
+              second: m,
+            });
+          }
+         });
+      });
+
+        gameObjects = gameObjects.filter(go => !go.dead);
+      }  
+      ```
+
+      Uistite sa, že ste pridali `updateGameObjects()` do hernej slučky v `window.onload`.
+
+   4. **Implementujte časový odstup** pre laser, aby mohol byť vystrelený len v určitých intervaloch.
+
+      Nakoniec upravte triedu Hero tak, aby mohla mať časový odstup:
+
+       ```javascript
+      class Hero extends GameObject {
+        constructor(x, y) {
+          super(x, y);
+          (this.width = 99), (this.height = 75);
+          this.type = "Hero";
+          this.speed = { x: 0, y: 0 };
+          this.cooldown = 0;
+        }
+        fire() {
+          gameObjects.push(new Laser(this.x + 45, this.y - 10));
+          this.cooldown = 500;
+    
+          let id = setInterval(() => {
+            if (this.cooldown > 0) {
+              this.cooldown -= 100;
+            } else {
+              clearInterval(id);
+            }
+          }, 200);
+        }
+        canFire() {
+          return this.cooldown === 0;
+        }
+      }
+      ```
+
+V tomto bode má vaša hra určitú funkčnosť! Môžete sa pohybovať pomocou šípok, strieľať laser pomocou medzerníka a nepriatelia zmiznú, keď ich zasiahnete. Skvelá práca!
+
+---
+
+## 🚀 Výzva
+
+Pridajte explóziu! Pozrite sa na herné aktíva v [repozitári Space Art](../../../../6-space-game/solution/spaceArt/readme.txt) a skúste pridať explóziu, keď laser zasiahne mimozemšťana.
+
+## Kvíz po prednáške
+
+[Kvíz po prednáške](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/36)
+
+## Prehľad a samostatné štúdium
+
+Experimentujte s intervalmi vo vašej hre doteraz. Čo sa stane, keď ich zmeníte? Prečítajte si viac o [časových udalostiach v JavaScripte](https://www.freecodecamp.org/news/javascript-timing-events-settimeout-and-setinterval/).
+
+## Zadanie
+
+[Preskúmajte kolízie](assignment.md)
+
+---
+
+**Upozornenie**:  
+Tento dokument bol preložený pomocou služby AI prekladu [Co-op Translator](https://github.com/Azure/co-op-translator). Hoci sa snažíme o presnosť, prosím, berte na vedomie, že automatizované preklady môžu obsahovať chyby alebo nepresnosti. Pôvodný dokument v jeho rodnom jazyku by mal byť považovaný za autoritatívny zdroj. Pre kritické informácie sa odporúča profesionálny ľudský preklad. Nie sme zodpovední za žiadne nedorozumenia alebo nesprávne interpretácie vyplývajúce z použitia tohto prekladu.
\ No newline at end of file
diff --git a/translations/sk/6-space-game/4-collision-detection/assignment.md b/translations/sk/6-space-game/4-collision-detection/assignment.md
new file mode 100644
index 00000000..9a396f3a
--- /dev/null
+++ b/translations/sk/6-space-game/4-collision-detection/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "8a0a097b45e7c75a611e2795e4013f16",
+  "translation_date": "2025-08-27T22:30:34+00:00",
+  "source_file": "6-space-game/4-collision-detection/assignment.md",
+  "language_code": "sk"
+}
+-->
+# Preskúmajte kolízie
+
+## Pokyny
+
+Aby ste lepšie pochopili, ako fungujú kolízie, vytvorte veľmi malú hru s niekoľkými objektmi, ktoré sa zrážajú. Umožnite im pohyb prostredníctvom stlačenia klávesov alebo kliknutí myšou a zabezpečte, aby sa niečo stalo jednému z objektov pri zrážke. Môže to byť napríklad meteorit, ktorý zasiahne Zem, alebo autíčka na nárazníkoch. Buďte kreatívni!
+
+## Hodnotiace kritériá
+
+| Kritérium | Vynikajúce                                                                                                              | Dostatočné                     | Potrebuje zlepšenie |
+| --------- | ----------------------------------------------------------------------------------------------------------------------- | ------------------------------ | ------------------- |
+|           | Vytvorený je kompletný funkčný kód, objekty sú nakreslené na plátno, dochádza k základným kolíziám a reakciám            | Kód je v niektorých ohľadoch neúplný | Kód nefunguje správne |
+
+---
+
+**Upozornenie**:  
+Tento dokument bol preložený pomocou služby AI prekladu [Co-op Translator](https://github.com/Azure/co-op-translator). Hoci sa snažíme o presnosť, prosím, berte na vedomie, že automatizované preklady môžu obsahovať chyby alebo nepresnosti. Pôvodný dokument v jeho rodnom jazyku by mal byť považovaný za autoritatívny zdroj. Pre kritické informácie sa odporúča profesionálny ľudský preklad. Nie sme zodpovední za akékoľvek nedorozumenia alebo nesprávne interpretácie vyplývajúce z použitia tohto prekladu.
\ No newline at end of file
diff --git a/translations/sk/6-space-game/4-collision-detection/solution/README.md b/translations/sk/6-space-game/4-collision-detection/solution/README.md
new file mode 100644
index 00000000..19fae507
--- /dev/null
+++ b/translations/sk/6-space-game/4-collision-detection/solution/README.md
@@ -0,0 +1,15 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "068cbb9b3c10a96d503f6cdd6c9ace8c",
+  "translation_date": "2025-08-27T22:30:53+00:00",
+  "source_file": "6-space-game/4-collision-detection/solution/README.md",
+  "language_code": "sk"
+}
+-->
+Toto je zástupný text, zámerne ponechaný prázdny
+
+---
+
+**Upozornenie**:  
+Tento dokument bol preložený pomocou služby AI prekladu [Co-op Translator](https://github.com/Azure/co-op-translator). Hoci sa snažíme o presnosť, prosím, berte na vedomie, že automatizované preklady môžu obsahovať chyby alebo nepresnosti. Pôvodný dokument v jeho rodnom jazyku by mal byť považovaný za autoritatívny zdroj. Pre kritické informácie sa odporúča profesionálny ľudský preklad. Nie sme zodpovední za akékoľvek nedorozumenia alebo nesprávne interpretácie vyplývajúce z použitia tohto prekladu.
\ No newline at end of file
diff --git a/translations/sk/6-space-game/4-collision-detection/your-work/README.md b/translations/sk/6-space-game/4-collision-detection/your-work/README.md
new file mode 100644
index 00000000..6bfbfe0e
--- /dev/null
+++ b/translations/sk/6-space-game/4-collision-detection/your-work/README.md
@@ -0,0 +1,15 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "068cbb9b3c10a96d503f6cdd6c9ace8c",
+  "translation_date": "2025-08-27T22:31:06+00:00",
+  "source_file": "6-space-game/4-collision-detection/your-work/README.md",
+  "language_code": "sk"
+}
+-->
+Toto je zástupný text, zámerne ponechaný prázdny
+
+---
+
+**Upozornenie**:  
+Tento dokument bol preložený pomocou služby AI prekladu [Co-op Translator](https://github.com/Azure/co-op-translator). Aj keď sa snažíme o presnosť, prosím, berte na vedomie, že automatizované preklady môžu obsahovať chyby alebo nepresnosti. Pôvodný dokument v jeho rodnom jazyku by mal byť považovaný za autoritatívny zdroj. Pre kritické informácie sa odporúča profesionálny ľudský preklad. Nie sme zodpovední za žiadne nedorozumenia alebo nesprávne interpretácie vyplývajúce z použitia tohto prekladu.
\ No newline at end of file
diff --git a/translations/sk/6-space-game/5-keeping-score/README.md b/translations/sk/6-space-game/5-keeping-score/README.md
new file mode 100644
index 00000000..e7ee2a76
--- /dev/null
+++ b/translations/sk/6-space-game/5-keeping-score/README.md
@@ -0,0 +1,203 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "4e8250db84b027c9ff816b4e4c093457",
+  "translation_date": "2025-08-27T22:27:25+00:00",
+  "source_file": "6-space-game/5-keeping-score/README.md",
+  "language_code": "sk"
+}
+-->
+# Vytvorte vesmírnu hru, časť 5: Body a životy
+
+## Kvíz pred prednáškou
+
+[Kvíz pred prednáškou](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/37)
+
+V tejto lekcii sa naučíte, ako pridať bodovanie do hry a počítať životy.
+
+## Zobrazenie textu na obrazovke
+
+Aby ste mohli zobrazovať skóre hry na obrazovke, musíte vedieť, ako umiestniť text na obrazovku. Odpoveďou je použitie metódy `fillText()` na objekte canvas. Môžete tiež ovládať ďalšie aspekty, ako napríklad aké písmo použiť, farbu textu a dokonca aj jeho zarovnanie (vľavo, vpravo, na stred). Nižšie je uvedený kód, ktorý zobrazuje text na obrazovke.
+
+```javascript
+ctx.font = "30px Arial";
+ctx.fillStyle = "red";
+ctx.textAlign = "right";
+ctx.fillText("show this on the screen", 0, 0);
+```
+
+✅ Prečítajte si viac o [tom, ako pridať text na plátno](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_text), a pokojne si ho upravte podľa svojich predstáv!
+
+## Život ako herný koncept
+
+Koncept života v hre je len číslo. V kontexte vesmírnej hry je bežné priradiť určitý počet životov, ktoré sa odpočítavajú jeden po druhom, keď vaša loď utrpí poškodenie. Je pekné, ak môžete namiesto čísla zobraziť grafickú reprezentáciu, ako sú malé lode alebo srdcia.
+
+## Čo vytvoriť
+
+Pridajte do svojej hry nasledujúce prvky:
+
+- **Herné skóre**: Za každú zničenú nepriateľskú loď by mal hrdina získať body, odporúčame 100 bodov za loď. Herné skóre by sa malo zobrazovať v ľavom dolnom rohu.
+- **Životy**: Vaša loď má tri životy. O život prídete zakaždým, keď do vás narazí nepriateľská loď. Počet životov by sa mal zobrazovať v pravom dolnom rohu a mal by byť reprezentovaný nasledujúcou grafikou ![obrázok života](../../../../translated_images/life.6fb9f50d53ee0413cd91aa411f7c296e10a1a6de5c4a4197c718b49bf7d63ebf.sk.png).
+
+## Odporúčané kroky
+
+Nájdite súbory, ktoré boli pre vás vytvorené v podpriečinku `your-work`. Mali by obsahovať nasledujúce:
+
+```bash
+-| assets
+  -| enemyShip.png
+  -| player.png
+  -| laserRed.png
+-| index.html
+-| app.js
+-| package.json
+```
+
+Spustite svoj projekt v priečinku `your_work` zadaním:
+
+```bash
+cd your-work
+npm start
+```
+
+Vyššie uvedené spustí HTTP server na adrese `http://localhost:5000`. Otvorte prehliadač a zadajte túto adresu. Momentálne by sa mal zobraziť hrdina a všetci nepriatelia, a keď stlačíte šípky doľava a doprava, hrdina sa pohybuje a môže zostreľovať nepriateľov.
+
+### Pridanie kódu
+
+1. **Skopírujte potrebné zdroje** z priečinka `solution/assets/` do priečinka `your-work`; pridáte zdroj `life.png`. Pridajte `lifeImg` do funkcie `window.onload`:
+
+    ```javascript
+    lifeImg = await loadTexture("assets/life.png");
+    ```
+
+1. Pridajte `lifeImg` do zoznamu zdrojov:
+
+    ```javascript
+    let heroImg,
+    ...
+    lifeImg,
+    ...
+    eventEmitter = new EventEmitter();
+    ```
+  
+2. **Pridajte premenné**. Pridajte kód, ktorý reprezentuje vaše celkové skóre (0) a zostávajúce životy (3), a zobrazte tieto hodnoty na obrazovke.
+
+3. **Rozšírte funkciu `updateGameObjects()`**. Rozšírte funkciu `updateGameObjects()` tak, aby spracovávala kolízie s nepriateľmi:
+
+    ```javascript
+    enemies.forEach(enemy => {
+        const heroRect = hero.rectFromGameObject();
+        if (intersectRect(heroRect, enemy.rectFromGameObject())) {
+          eventEmitter.emit(Messages.COLLISION_ENEMY_HERO, { enemy });
+        }
+      })
+    ```
+
+4. **Pridajte `life` a `points`**. 
+   1. **Inicializujte premenné**. Pod `this.cooldown = 0` v triede `Hero` nastavte životy a body:
+
+        ```javascript
+        this.life = 3;
+        this.points = 0;
+        ```
+
+   1. **Zobrazte premenné na obrazovke**. Zobrazte tieto hodnoty na obrazovke:
+
+        ```javascript
+        function drawLife() {
+          // TODO, 35, 27
+          const START_POS = canvas.width - 180;
+          for(let i=0; i < hero.life; i++ ) {
+            ctx.drawImage(
+              lifeImg, 
+              START_POS + (45 * (i+1) ), 
+              canvas.height - 37);
+          }
+        }
+        
+        function drawPoints() {
+          ctx.font = "30px Arial";
+          ctx.fillStyle = "red";
+          ctx.textAlign = "left";
+          drawText("Points: " + hero.points, 10, canvas.height-20);
+        }
+        
+        function drawText(message, x, y) {
+          ctx.fillText(message, x, y);
+        }
+
+        ```
+
+   1. **Pridajte metódy do hernej slučky**. Uistite sa, že ste pridali tieto funkcie do funkcie `window.onload` pod `updateGameObjects()`:
+
+        ```javascript
+        drawPoints();
+        drawLife();
+        ```
+
+1. **Implementujte herné pravidlá**. Implementujte nasledujúce herné pravidlá:
+
+   1. **Za každú kolíziu hrdinu s nepriateľom** odpočítajte jeden život.
+   
+      Rozšírte triedu `Hero`, aby vykonávala toto odpočítanie:
+
+        ```javascript
+        decrementLife() {
+          this.life--;
+          if (this.life === 0) {
+            this.dead = true;
+          }
+        }
+        ```
+
+   2. **Za každý laser, ktorý zasiahne nepriateľa**, zvýšte herné skóre o 100 bodov.
+
+      Rozšírte triedu `Hero`, aby vykonávala toto zvýšenie:
+    
+        ```javascript
+          incrementPoints() {
+            this.points += 100;
+          }
+        ```
+
+        Pridajte tieto funkcie do vašich emitorov udalostí kolízie:
+
+        ```javascript
+        eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => {
+           first.dead = true;
+           second.dead = true;
+           hero.incrementPoints();
+        })
+
+        eventEmitter.on(Messages.COLLISION_ENEMY_HERO, (_, { enemy }) => {
+           enemy.dead = true;
+           hero.decrementLife();
+        });
+        ```
+
+✅ Urobte si malý prieskum a objavte ďalšie hry, ktoré sú vytvorené pomocou JavaScriptu/Canvasu. Aké majú spoločné črty?
+
+Na konci tejto práce by ste mali vidieť malé lode reprezentujúce životy v pravom dolnom rohu, body v ľavom dolnom rohu a mali by ste vidieť, ako sa počet životov znižuje pri kolíziách s nepriateľmi a body sa zvyšujú, keď zostreľujete nepriateľov. Skvelá práca! Vaša hra je takmer hotová.
+
+---
+
+## 🚀 Výzva
+
+Váš kód je takmer hotový. Dokážete si predstaviť svoje ďalšie kroky?
+
+## Kvíz po prednáške
+
+[Kvíz po prednáške](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/38)
+
+## Prehľad a samoštúdium
+
+Preskúmajte spôsoby, ako môžete zvyšovať a znižovať herné skóre a životy. Existujú zaujímavé herné enginy, ako napríklad [PlayFab](https://playfab.com). Ako by použitie jedného z nich mohlo vylepšiť vašu hru?
+
+## Zadanie
+
+[Postavte hru s bodovaním](assignment.md)
+
+---
+
+**Upozornenie**:  
+Tento dokument bol preložený pomocou služby na automatický preklad [Co-op Translator](https://github.com/Azure/co-op-translator). Aj keď sa snažíme o presnosť, upozorňujeme, že automatické preklady môžu obsahovať chyby alebo nepresnosti. Pôvodný dokument v jeho pôvodnom jazyku by mal byť považovaný za autoritatívny zdroj. Pre kritické informácie sa odporúča profesionálny ľudský preklad. Nezodpovedáme za akékoľvek nedorozumenia alebo nesprávne interpretácie vyplývajúce z použitia tohto prekladu.
\ No newline at end of file
diff --git a/translations/sk/6-space-game/5-keeping-score/assignment.md b/translations/sk/6-space-game/5-keeping-score/assignment.md
new file mode 100644
index 00000000..db240ca1
--- /dev/null
+++ b/translations/sk/6-space-game/5-keeping-score/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "81f292dbda01685b91735e0398dc0504",
+  "translation_date": "2025-08-27T22:28:20+00:00",
+  "source_file": "6-space-game/5-keeping-score/assignment.md",
+  "language_code": "sk"
+}
+-->
+# Vytvorte bodovaciu hru
+
+## Pokyny
+
+Vytvorte hru, kde kreatívne zobrazíte životy a body. Jedným z návrhov je zobraziť životy ako srdcia a body ako veľké číslo v dolnej strednej časti obrazovky. Pozrite si [Bezplatné herné zdroje](https://www.kenney.nl/)
+
+# Hodnotiace kritériá
+
+| Kritérium | Vynikajúce            | Dostatočné                 | Vyžaduje zlepšenie         |
+| --------- | --------------------- | -------------------------- | -------------------------- |
+|           | kompletná hra je prezentovaná | hra je čiastočne prezentovaná | čiastočná hra obsahuje chyby |
+
+---
+
+**Upozornenie**:  
+Tento dokument bol preložený pomocou služby AI prekladu [Co-op Translator](https://github.com/Azure/co-op-translator). Aj keď sa snažíme o presnosť, prosím, berte na vedomie, že automatizované preklady môžu obsahovať chyby alebo nepresnosti. Pôvodný dokument v jeho pôvodnom jazyku by mal byť považovaný za autoritatívny zdroj. Pre kritické informácie sa odporúča profesionálny ľudský preklad. Nie sme zodpovední za akékoľvek nedorozumenia alebo nesprávne interpretácie vyplývajúce z použitia tohto prekladu.
\ No newline at end of file
diff --git a/translations/sk/6-space-game/5-keeping-score/solution/README.md b/translations/sk/6-space-game/5-keeping-score/solution/README.md
new file mode 100644
index 00000000..59241a52
--- /dev/null
+++ b/translations/sk/6-space-game/5-keeping-score/solution/README.md
@@ -0,0 +1,15 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "068cbb9b3c10a96d503f6cdd6c9ace8c",
+  "translation_date": "2025-08-27T22:28:38+00:00",
+  "source_file": "6-space-game/5-keeping-score/solution/README.md",
+  "language_code": "sk"
+}
+-->
+Toto je zástupný symbol, zámerne ponechaný prázdny
+
+---
+
+**Upozornenie**:  
+Tento dokument bol preložený pomocou služby AI prekladu [Co-op Translator](https://github.com/Azure/co-op-translator). Hoci sa snažíme o presnosť, prosím, berte na vedomie, že automatizované preklady môžu obsahovať chyby alebo nepresnosti. Pôvodný dokument v jeho pôvodnom jazyku by mal byť považovaný za autoritatívny zdroj. Pre kritické informácie sa odporúča profesionálny ľudský preklad. Nie sme zodpovední za žiadne nedorozumenia alebo nesprávne interpretácie vyplývajúce z použitia tohto prekladu.
\ No newline at end of file
diff --git a/translations/sk/6-space-game/5-keeping-score/your-work/README.md b/translations/sk/6-space-game/5-keeping-score/your-work/README.md
new file mode 100644
index 00000000..0a560b9e
--- /dev/null
+++ b/translations/sk/6-space-game/5-keeping-score/your-work/README.md
@@ -0,0 +1,15 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "068cbb9b3c10a96d503f6cdd6c9ace8c",
+  "translation_date": "2025-08-27T22:28:51+00:00",
+  "source_file": "6-space-game/5-keeping-score/your-work/README.md",
+  "language_code": "sk"
+}
+-->
+Toto je zástupný text, zámerne ponechaný prázdny
+
+---
+
+**Upozornenie**:  
+Tento dokument bol preložený pomocou služby AI prekladu [Co-op Translator](https://github.com/Azure/co-op-translator). Hoci sa snažíme o presnosť, prosím, berte na vedomie, že automatizované preklady môžu obsahovať chyby alebo nepresnosti. Pôvodný dokument v jeho pôvodnom jazyku by mal byť považovaný za autoritatívny zdroj. Pre kritické informácie sa odporúča profesionálny ľudský preklad. Nenesieme zodpovednosť za akékoľvek nedorozumenia alebo nesprávne interpretácie vyplývajúce z použitia tohto prekladu.
\ No newline at end of file
diff --git a/translations/sk/6-space-game/6-end-condition/README.md b/translations/sk/6-space-game/6-end-condition/README.md
new file mode 100644
index 00000000..1ba39d1b
--- /dev/null
+++ b/translations/sk/6-space-game/6-end-condition/README.md
@@ -0,0 +1,236 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "01336cddd638242e99b133614111ea40",
+  "translation_date": "2025-08-27T22:32:36+00:00",
+  "source_file": "6-space-game/6-end-condition/README.md",
+  "language_code": "sk"
+}
+-->
+# Vytvorenie vesmírnej hry, časť 6: Koniec a reštart
+
+## Kvíz pred prednáškou
+
+[Kvíz pred prednáškou](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/39)
+
+Existuje viacero spôsobov, ako vyjadriť *koncovú podmienku* v hre. Je na vás ako tvorcovi hry, aby ste určili, prečo hra skončila. Tu sú niektoré dôvody, ak predpokladáme, že hovoríme o vesmírnej hre, ktorú ste doteraz vytvárali:
+
+- **Zničených bolo `N` nepriateľských lodí**: Je bežné, že ak rozdelíte hru na rôzne úrovne, musíte zničiť `N` nepriateľských lodí, aby ste dokončili úroveň.
+- **Vaša loď bola zničená**: Existujú hry, kde prehráte, ak je vaša loď zničená. Ďalším bežným prístupom je koncept životov. Každý raz, keď je vaša loď zničená, stratíte jeden život. Akonáhle prídete o všetky životy, prehráte hru.
+- **Nazbierali ste `N` bodov**: Ďalšou bežnou koncovou podmienkou je nazbieranie bodov. Ako získavate body, je na vás, ale často sa body prideľujú za rôzne aktivity, ako je zničenie nepriateľskej lode alebo zbieranie predmetov, ktoré sa objavia, keď sú zničené.
+- **Dokončenie úrovne**: To môže zahŕňať niekoľko podmienok, ako napríklad zničenie `X` nepriateľských lodí, nazbieranie `Y` bodov alebo možno získanie konkrétneho predmetu.
+
+## Reštartovanie
+
+Ak sa ľuďom vaša hra páči, pravdepodobne ju budú chcieť hrať znova. Keď hra skončí z akéhokoľvek dôvodu, mali by ste ponúknuť možnosť reštartovať ju.
+
+✅ Zamyslite sa nad tým, za akých podmienok hra končí, a ako ste vyzvaní na jej reštartovanie.
+
+## Čo vytvoriť
+
+Do svojej hry pridáte tieto pravidlá:
+
+1. **Výhra v hre**. Keď sú všetky nepriateľské lode zničené, vyhráte hru. Navyše zobrazte nejakú správu o víťazstve.
+1. **Reštart**. Keď prídete o všetky životy alebo vyhráte hru, mali by ste ponúknuť možnosť reštartovať hru. Pamätajte! Budete musieť inicializovať hru odznova a vymazať predchádzajúci stav hry.
+
+## Odporúčané kroky
+
+Nájdite súbory, ktoré boli pre vás vytvorené v podpriečinku `your-work`. Mali by obsahovať nasledujúce:
+
+```bash
+-| assets
+  -| enemyShip.png
+  -| player.png
+  -| laserRed.png
+  -| life.png
+-| index.html
+-| app.js
+-| package.json
+```
+
+Svoj projekt spustíte v priečinku `your_work` zadaním:
+
+```bash
+cd your-work
+npm start
+```
+
+Vyššie uvedené spustí HTTP server na adrese `http://localhost:5000`. Otvorte prehliadač a zadajte túto adresu. Vaša hra by mala byť v hrateľnom stave.
+
+> tip: aby ste sa vyhli varovaniam vo Visual Studio Code, upravte funkciu `window.onload`, aby volala `gameLoopId` tak, ako je (bez `let`), a deklarujte premennú `gameLoopId` na začiatku súboru nezávisle: `let gameLoopId;`
+
+### Pridajte kód
+
+1. **Sledovanie koncovej podmienky**. Pridajte kód, ktorý sleduje počet nepriateľov alebo či bola hrdinská loď zničená, pridaním týchto dvoch funkcií:
+
+    ```javascript
+    function isHeroDead() {
+      return hero.life <= 0;
+    }
+
+    function isEnemiesDead() {
+      const enemies = gameObjects.filter((go) => go.type === "Enemy" && !go.dead);
+      return enemies.length === 0;
+    }
+    ```
+
+1. **Pridajte logiku do spracovania správ**. Upravte `eventEmitter`, aby spracovával tieto podmienky:
+
+    ```javascript
+    eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => {
+        first.dead = true;
+        second.dead = true;
+        hero.incrementPoints();
+
+        if (isEnemiesDead()) {
+          eventEmitter.emit(Messages.GAME_END_WIN);
+        }
+    });
+
+    eventEmitter.on(Messages.COLLISION_ENEMY_HERO, (_, { enemy }) => {
+        enemy.dead = true;
+        hero.decrementLife();
+        if (isHeroDead())  {
+          eventEmitter.emit(Messages.GAME_END_LOSS);
+          return; // loss before victory
+        }
+        if (isEnemiesDead()) {
+          eventEmitter.emit(Messages.GAME_END_WIN);
+        }
+    });
+    
+    eventEmitter.on(Messages.GAME_END_WIN, () => {
+        endGame(true);
+    });
+      
+    eventEmitter.on(Messages.GAME_END_LOSS, () => {
+      endGame(false);
+    });
+    ```
+
+1. **Pridajte nové typy správ**. Pridajte tieto správy do objektu constants:
+
+    ```javascript
+    GAME_END_LOSS: "GAME_END_LOSS",
+    GAME_END_WIN: "GAME_END_WIN",
+    ```
+
+2. **Pridajte kód na reštartovanie hry**. Pridajte kód, ktorý reštartuje hru po stlačení vybraného tlačidla.
+
+   1. **Počúvajte stlačenie klávesu `Enter`**. Upravte eventListener okna, aby počúval toto stlačenie:
+
+    ```javascript
+     else if(evt.key === "Enter") {
+        eventEmitter.emit(Messages.KEY_EVENT_ENTER);
+      }
+    ```
+
+   1. **Pridajte správu o reštarte**. Pridajte túto správu do constants objektu Messages:
+
+        ```javascript
+        KEY_EVENT_ENTER: "KEY_EVENT_ENTER",
+        ```
+
+1. **Implementujte pravidlá hry**. Implementujte nasledujúce pravidlá hry:
+
+   1. **Podmienka výhry hráča**. Keď sú všetky nepriateľské lode zničené, zobrazte správu o víťazstve.
+
+      1. Najprv vytvorte funkciu `displayMessage()`:
+
+        ```javascript
+        function displayMessage(message, color = "red") {
+          ctx.font = "30px Arial";
+          ctx.fillStyle = color;
+          ctx.textAlign = "center";
+          ctx.fillText(message, canvas.width / 2, canvas.height / 2);
+        }
+        ```
+
+      1. Vytvorte funkciu `endGame()`:
+
+        ```javascript
+        function endGame(win) {
+          clearInterval(gameLoopId);
+        
+          // set a delay so we are sure any paints have finished
+          setTimeout(() => {
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            ctx.fillStyle = "black";
+            ctx.fillRect(0, 0, canvas.width, canvas.height);
+            if (win) {
+              displayMessage(
+                "Victory!!! Pew Pew... - Press [Enter] to start a new game Captain Pew Pew",
+                "green"
+              );
+            } else {
+              displayMessage(
+                "You died !!! Press [Enter] to start a new game Captain Pew Pew"
+              );
+            }
+          }, 200)  
+        }
+        ```
+
+   1. **Logika reštartu**. Keď sú všetky životy stratené alebo hráč vyhral hru, zobrazte, že hru je možné reštartovať. Navyše reštartujte hru, keď je stlačený *reštartovací* kláves (môžete si vybrať, ktorý kláves bude mapovaný na reštart).
+
+      1. Vytvorte funkciu `resetGame()`:
+
+        ```javascript
+        function resetGame() {
+          if (gameLoopId) {
+            clearInterval(gameLoopId);
+            eventEmitter.clear();
+            initGame();
+            gameLoopId = setInterval(() => {
+              ctx.clearRect(0, 0, canvas.width, canvas.height);
+              ctx.fillStyle = "black";
+              ctx.fillRect(0, 0, canvas.width, canvas.height);
+              drawPoints();
+              drawLife();
+              updateGameObjects();
+              drawGameObjects(ctx);
+            }, 100);
+          }
+        }
+        ```
+
+     1. Pridajte volanie `eventEmitter` na reštartovanie hry v `initGame()`:
+
+        ```javascript
+        eventEmitter.on(Messages.KEY_EVENT_ENTER, () => {
+          resetGame();
+        });
+        ```
+
+     1. Pridajte funkciu `clear()` do EventEmitter:
+
+        ```javascript
+        clear() {
+          this.listeners = {};
+        }
+        ```
+
+👽 💥 🚀 Gratulujeme, kapitán! Vaša hra je hotová! Skvelá práca! 🚀 💥 👽
+
+---
+
+## 🚀 Výzva
+
+Pridajte zvuk! Dokážete pridať zvuk na zlepšenie herného zážitku, napríklad pri zásahu laserom, smrti hrdinu alebo výhre? Pozrite si tento [sandbox](https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_audio_play), aby ste sa naučili, ako prehrávať zvuk pomocou JavaScriptu.
+
+## Kvíz po prednáške
+
+[Kvíz po prednáške](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/40)
+
+## Prehľad a samoštúdium
+
+Vašou úlohou je vytvoriť novú ukážkovú hru, takže preskúmajte niektoré zaujímavé hry, aby ste zistili, aký typ hry by ste mohli vytvoriť.
+
+## Zadanie
+
+[Vytvorte ukážkovú hru](assignment.md)
+
+---
+
+**Upozornenie**:  
+Tento dokument bol preložený pomocou služby AI prekladu [Co-op Translator](https://github.com/Azure/co-op-translator). Aj keď sa snažíme o presnosť, prosím, berte na vedomie, že automatizované preklady môžu obsahovať chyby alebo nepresnosti. Pôvodný dokument v jeho rodnom jazyku by mal byť považovaný za autoritatívny zdroj. Pre kritické informácie sa odporúča profesionálny ľudský preklad. Nie sme zodpovední za akékoľvek nedorozumenia alebo nesprávne interpretácie vyplývajúce z použitia tohto prekladu.
\ No newline at end of file
diff --git a/translations/sk/6-space-game/6-end-condition/assignment.md b/translations/sk/6-space-game/6-end-condition/assignment.md
new file mode 100644
index 00000000..d4039b3b
--- /dev/null
+++ b/translations/sk/6-space-game/6-end-condition/assignment.md
@@ -0,0 +1,33 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "24201cf428c7edba1ccec2a78a0dd8f8",
+  "translation_date": "2025-08-27T22:33:42+00:00",
+  "source_file": "6-space-game/6-end-condition/assignment.md",
+  "language_code": "sk"
+}
+-->
+# Vytvorte ukážkovú hru
+
+## Pokyny
+
+Skúste vytvoriť malú hru, kde si precvičíte rôzne koncové podmienky. Striedajte medzi získaním určitého počtu bodov, hrdina stratí všetky životy alebo všetci monštrá sú porazení. Vytvorte niečo jednoduché, napríklad dobrodružnú hru založenú na konzole. Použite nižšie uvedený herný tok ako inšpiráciu:
+
+```
+Hero> Strikes with broadsword - orc takes 3p damage
+Orc> Hits with club - hero takes 2p damage
+Hero> Kicks - orc takes 1p damage
+Game> Orc is defeated - Hero collects 2 coins
+Game> ****No more monsters, you have conquered the evil fortress****
+```
+
+## Hodnotiace kritériá
+
+| Kritérium | Vynikajúce            | Dostatočné                  | Vyžaduje zlepšenie         |
+| --------- | --------------------- | --------------------------- | -------------------------- |
+|           | celá hra je prezentovaná | hra je čiastočne prezentovaná | čiastočná hra obsahuje chyby |
+
+---
+
+**Upozornenie**:  
+Tento dokument bol preložený pomocou služby AI prekladu [Co-op Translator](https://github.com/Azure/co-op-translator). Aj keď sa snažíme o presnosť, prosím, berte na vedomie, že automatizované preklady môžu obsahovať chyby alebo nepresnosti. Pôvodný dokument v jeho pôvodnom jazyku by mal byť považovaný za autoritatívny zdroj. Pre kritické informácie sa odporúča profesionálny ľudský preklad. Nie sme zodpovední za akékoľvek nedorozumenia alebo nesprávne interpretácie vyplývajúce z použitia tohto prekladu.
\ No newline at end of file
diff --git a/translations/sk/6-space-game/6-end-condition/solution/README.md b/translations/sk/6-space-game/6-end-condition/solution/README.md
new file mode 100644
index 00000000..f21ab91e
--- /dev/null
+++ b/translations/sk/6-space-game/6-end-condition/solution/README.md
@@ -0,0 +1,15 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "068cbb9b3c10a96d503f6cdd6c9ace8c",
+  "translation_date": "2025-08-27T22:33:59+00:00",
+  "source_file": "6-space-game/6-end-condition/solution/README.md",
+  "language_code": "sk"
+}
+-->
+Toto je zástupný text, zámerne ponechaný prázdny
+
+---
+
+**Upozornenie**:  
+Tento dokument bol preložený pomocou služby AI prekladu [Co-op Translator](https://github.com/Azure/co-op-translator). Aj keď sa snažíme o presnosť, prosím, berte na vedomie, že automatizované preklady môžu obsahovať chyby alebo nepresnosti. Pôvodný dokument v jeho rodnom jazyku by mal byť považovaný za autoritatívny zdroj. Pre kritické informácie sa odporúča profesionálny ľudský preklad. Nenesieme zodpovednosť za akékoľvek nedorozumenia alebo nesprávne interpretácie vyplývajúce z použitia tohto prekladu.
\ No newline at end of file
diff --git a/translations/sk/6-space-game/6-end-condition/your-work/README.md b/translations/sk/6-space-game/6-end-condition/your-work/README.md
new file mode 100644
index 00000000..5c2bf538
--- /dev/null
+++ b/translations/sk/6-space-game/6-end-condition/your-work/README.md
@@ -0,0 +1,15 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "068cbb9b3c10a96d503f6cdd6c9ace8c",
+  "translation_date": "2025-08-27T22:34:12+00:00",
+  "source_file": "6-space-game/6-end-condition/your-work/README.md",
+  "language_code": "sk"
+}
+-->
+Toto je zástupný symbol, zámerne ponechaný prázdny
+
+---
+
+**Upozornenie**:  
+Tento dokument bol preložený pomocou služby AI prekladu [Co-op Translator](https://github.com/Azure/co-op-translator). Hoci sa snažíme o presnosť, prosím, berte na vedomie, že automatizované preklady môžu obsahovať chyby alebo nepresnosti. Pôvodný dokument v jeho rodnom jazyku by mal byť považovaný za autoritatívny zdroj. Pre kritické informácie sa odporúča profesionálny ľudský preklad. Nie sme zodpovední za žiadne nedorozumenia alebo nesprávne interpretácie vyplývajúce z použitia tohto prekladu.
\ No newline at end of file
diff --git a/translations/sk/6-space-game/README.md b/translations/sk/6-space-game/README.md
new file mode 100644
index 00000000..f52d039c
--- /dev/null
+++ b/translations/sk/6-space-game/README.md
@@ -0,0 +1,45 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "c40a698395ee5102715f7880bba3f2e7",
+  "translation_date": "2025-08-27T22:25:14+00:00",
+  "source_file": "6-space-game/README.md",
+  "language_code": "sk"
+}
+-->
+# Vytvorenie vesmírnej hry
+
+Vesmírna hra na učenie pokročilejších základov JavaScriptu
+
+V tejto lekcii sa naučíte, ako si vytvoriť vlastnú vesmírnu hru. Ak ste niekedy hrali hru "Space Invaders", táto hra má podobný koncept: riadiť vesmírnu loď a strieľať na príšery, ktoré prichádzajú zhora. Takto bude vyzerať hotová hra:
+
+![Hotová hra](../../../6-space-game/images/pewpew.gif)
+
+V týchto šiestich lekciách sa naučíte nasledovné:
+
+- **Interakcia** s prvkom Canvas na kreslenie vecí na obrazovku
+- **Pochopenie** karteziánskeho súradnicového systému
+- **Osvojenie** vzoru Pub-Sub na vytvorenie zvukovej hernej architektúry, ktorá je jednoduchšia na údržbu a rozšírenie
+- **Využitie** Async/Await na načítanie herných zdrojov
+- **Spracovanie** udalostí klávesnice
+
+## Prehľad
+
+- Teória
+   - [Úvod do tvorby hier s JavaScriptom](1-introduction/README.md)
+- Prax
+   - [Kreslenie na canvas](2-drawing-to-canvas/README.md)
+   - [Pohyb prvkov po obrazovke](3-moving-elements-around/README.md)
+   - [Detekcia kolízií](4-collision-detection/README.md)
+   - [Počítanie skóre](5-keeping-score/README.md)
+   - [Ukončenie a reštartovanie hry](6-end-condition/README.md)
+
+## Poďakovanie
+
+Použité zdroje pochádzajú z https://www.kenney.nl/.  
+Ak vás baví tvorba hier, tieto zdroje sú naozaj skvelé, veľa z nich je zadarmo a niektoré sú platené.
+
+---
+
+**Upozornenie**:  
+Tento dokument bol preložený pomocou služby AI prekladu [Co-op Translator](https://github.com/Azure/co-op-translator). Aj keď sa snažíme o presnosť, prosím, berte na vedomie, že automatizované preklady môžu obsahovať chyby alebo nepresnosti. Pôvodný dokument v jeho pôvodnom jazyku by mal byť považovaný za autoritatívny zdroj. Pre kritické informácie sa odporúča profesionálny ľudský preklad. Nie sme zodpovední za akékoľvek nedorozumenia alebo nesprávne interpretácie vyplývajúce z použitia tohto prekladu.
\ No newline at end of file
diff --git a/translations/sk/6-space-game/solution/README.md b/translations/sk/6-space-game/solution/README.md
new file mode 100644
index 00000000..98c5796a
--- /dev/null
+++ b/translations/sk/6-space-game/solution/README.md
@@ -0,0 +1,15 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "068cbb9b3c10a96d503f6cdd6c9ace8c",
+  "translation_date": "2025-08-27T22:29:04+00:00",
+  "source_file": "6-space-game/solution/README.md",
+  "language_code": "sk"
+}
+-->
+Toto je zástupný text, zámerne ponechaný prázdny
+
+---
+
+**Upozornenie**:  
+Tento dokument bol preložený pomocou služby AI prekladu [Co-op Translator](https://github.com/Azure/co-op-translator). Aj keď sa snažíme o presnosť, prosím, berte na vedomie, že automatizované preklady môžu obsahovať chyby alebo nepresnosti. Pôvodný dokument v jeho pôvodnom jazyku by mal byť považovaný za autoritatívny zdroj. Pre kritické informácie sa odporúča profesionálny ľudský preklad. Nenesieme zodpovednosť za akékoľvek nedorozumenia alebo nesprávne interpretácie vyplývajúce z použitia tohto prekladu.
\ No newline at end of file
diff --git a/translations/sk/7-bank-project/1-template-route/README.md b/translations/sk/7-bank-project/1-template-route/README.md
new file mode 100644
index 00000000..59578855
--- /dev/null
+++ b/translations/sk/7-bank-project/1-template-route/README.md
@@ -0,0 +1,322 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "8da1b5e2c63f749808858c53f37b8ce7",
+  "translation_date": "2025-08-27T22:09:54+00:00",
+  "source_file": "7-bank-project/1-template-route/README.md",
+  "language_code": "sk"
+}
+-->
+# Vytvorenie bankovej aplikácie, časť 1: HTML šablóny a trasy vo webovej aplikácii
+
+## Kvíz pred prednáškou
+
+[Kvíz pred prednáškou](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/41)
+
+### Úvod
+
+Od vzniku JavaScriptu v prehliadačoch sa webové stránky stávajú interaktívnejšími a zložitejšími ako kedykoľvek predtým. Webové technológie sa dnes bežne používajú na vytváranie plne funkčných aplikácií, ktoré bežia priamo v prehliadači a nazývame ich [webové aplikácie](https://en.wikipedia.org/wiki/Web_application). Keďže webové aplikácie sú vysoko interaktívne, používatelia nechcú čakať na úplné obnovenie stránky zakaždým, keď vykonajú nejakú akciu. Preto sa používa JavaScript na priamu aktualizáciu HTML pomocou DOM, aby sa zabezpečil plynulejší používateľský zážitok.
+
+V tejto lekcii si položíme základy na vytvorenie bankovej webovej aplikácie, pričom použijeme HTML šablóny na vytvorenie viacerých obrazoviek, ktoré sa môžu zobrazovať a aktualizovať bez potreby opätovného načítania celej HTML stránky.
+
+### Predpoklady
+
+Na testovanie webovej aplikácie, ktorú v tejto lekcii vytvoríme, budete potrebovať lokálny webový server. Ak ho nemáte, môžete si nainštalovať [Node.js](https://nodejs.org) a použiť príkaz `npx lite-server` vo vašom projektovom priečinku. Tento príkaz vytvorí lokálny webový server a otvorí vašu aplikáciu v prehliadači.
+
+### Príprava
+
+Na vašom počítači vytvorte priečinok s názvom `bank` a v ňom súbor s názvom `index.html`. Začneme s týmto HTML [boilerplate](https://en.wikipedia.org/wiki/Boilerplate_code):
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Bank App</title>
+  </head>
+  <body>
+    <!-- This is where you'll work -->
+  </body>
+</html>
+```
+
+---
+
+## HTML šablóny
+
+Ak chcete vytvoriť viacero obrazoviek pre webovú stránku, jedným z riešení by bolo vytvoriť jeden HTML súbor pre každú obrazovku, ktorú chcete zobraziť. Toto riešenie však prináša určité nevýhody:
+
+- Pri prepínaní obrazoviek musíte načítať celé HTML, čo môže byť pomalé.
+- Je ťažké zdieľať údaje medzi rôznymi obrazovkami.
+
+Iným prístupom je mať iba jeden HTML súbor a definovať viacero [HTML šablón](https://developer.mozilla.org/docs/Web/HTML/Element/template) pomocou elementu `<template>`. Šablóna je opakovane použiteľný HTML blok, ktorý sa v prehliadači nezobrazuje a musí byť inštanciovaný počas behu pomocou JavaScriptu.
+
+### Úloha
+
+Vytvoríme bankovú aplikáciu s dvoma obrazovkami: prihlasovacou stránkou a dashboardom. Najprv pridajme do tela HTML zástupný element, ktorý použijeme na inštanciovanie rôznych obrazoviek našej aplikácie:
+
+```html
+<div id="app">Loading...</div>
+```
+
+Pridali sme mu atribút `id`, aby sme ho neskôr mohli ľahšie nájsť pomocou JavaScriptu.
+
+> Tip: Keďže obsah tohto elementu bude nahradený, môžeme doň vložiť správu alebo indikátor načítania, ktorý sa zobrazí počas načítavania aplikácie.
+
+Ďalej pridajme pod tento element HTML šablónu pre prihlasovaciu stránku. Zatiaľ do nej vložíme iba nadpis a sekciu obsahujúcu odkaz, ktorý použijeme na navigáciu.
+
+```html
+<template id="login">
+  <h1>Bank App</h1>
+  <section>
+    <a href="/dashboard">Login</a>
+  </section>
+</template>
+```
+
+Potom pridáme ďalšiu HTML šablónu pre stránku dashboardu. Táto stránka bude obsahovať rôzne sekcie:
+
+- Hlavičku s nadpisom a odkazom na odhlásenie
+- Aktuálny zostatok na bankovom účte
+- Zoznam transakcií zobrazený v tabuľke
+
+```html
+<template id="dashboard">
+  <header>
+    <h1>Bank App</h1>
+    <a href="/login">Logout</a>
+  </header>
+  <section>
+    Balance: 100$
+  </section>
+  <section>
+    <h2>Transactions</h2>
+    <table>
+      <thead>
+        <tr>
+          <th>Date</th>
+          <th>Object</th>
+          <th>Amount</th>
+        </tr>
+      </thead>
+      <tbody></tbody>
+    </table>
+  </section>
+</template>
+```
+
+> Tip: Pri vytváraní HTML šablón, ak chcete vidieť, ako budú vyzerať, môžete zakomentovať riadky `<template>` a `</template>` tak, že ich obalíte do `<!-- -->`.
+
+✅ Prečo si myslíte, že používame atribúty `id` na šablónach? Mohli by sme použiť niečo iné, napríklad triedy?
+
+## Zobrazovanie šablón pomocou JavaScriptu
+
+Ak si aktuálny HTML súbor otvoríte v prehliadači, uvidíte, že zostane zobrazené iba `Loading...`. Je to preto, že musíme pridať JavaScriptový kód na inštanciovanie a zobrazenie HTML šablón.
+
+Inštanciovanie šablóny sa zvyčajne vykonáva v 3 krokoch:
+
+1. Získanie elementu šablóny v DOM, napríklad pomocou [`document.getElementById`](https://developer.mozilla.org/docs/Web/API/Document/getElementById).
+2. Klonovanie elementu šablóny pomocou [`cloneNode`](https://developer.mozilla.org/docs/Web/API/Node/cloneNode).
+3. Pripojenie k DOM pod viditeľný element, napríklad pomocou [`appendChild`](https://developer.mozilla.org/docs/Web/API/Node/appendChild).
+
+✅ Prečo musíme šablónu klonovať pred jej pripojením k DOM? Čo si myslíte, že by sa stalo, keby sme tento krok vynechali?
+
+### Úloha
+
+Vytvorte nový súbor s názvom `app.js` vo vašom projektovom priečinku a importujte tento súbor do sekcie `<head>` vášho HTML:
+
+```html
+<script src="app.js" defer></script>
+```
+
+Teraz v `app.js` vytvoríme novú funkciu `updateRoute`:
+
+```js
+function updateRoute(templateId) {
+  const template = document.getElementById(templateId);
+  const view = template.content.cloneNode(true);
+  const app = document.getElementById('app');
+  app.innerHTML = '';
+  app.appendChild(view);
+}
+```
+
+To, čo tu robíme, sú presne 3 kroky popísané vyššie. Inštanciujeme šablónu s `id` `templateId` a jej klonovaný obsah vložíme do nášho zástupného elementu aplikácie. Všimnite si, že musíme použiť `cloneNode(true)`, aby sme skopírovali celý podstrom šablóny.
+
+Teraz zavolajte túto funkciu s jednou zo šablón a pozrite sa na výsledok.
+
+```js
+updateRoute('login');
+```
+
+✅ Aký je účel tohto kódu `app.innerHTML = '';`? Čo sa stane, ak ho vynecháme?
+
+## Vytváranie trás
+
+Keď hovoríme o webovej aplikácii, nazývame *Routing* zámer mapovať **URL adresy** na konkrétne obrazovky, ktoré by sa mali zobraziť. Na webovej stránke s viacerými HTML súbormi sa to deje automaticky, pretože cesty k súborom sa odrážajú v URL. Napríklad s týmito súbormi vo vašom projektovom priečinku:
+
+```
+mywebsite/index.html
+mywebsite/login.html
+mywebsite/admin/index.html
+```
+
+Ak vytvoríte webový server s koreňom `mywebsite`, mapovanie URL bude:
+
+```
+https://site.com            --> mywebsite/index.html
+https://site.com/login.html --> mywebsite/login.html
+https://site.com/admin/     --> mywebsite/admin/index.html
+```
+
+Avšak pre našu webovú aplikáciu používame jeden HTML súbor obsahujúci všetky obrazovky, takže toto predvolené správanie nám nepomôže. Musíme túto mapu vytvoriť manuálne a aktualizovať zobrazenú šablónu pomocou JavaScriptu.
+
+### Úloha
+
+Použijeme jednoduchý objekt na implementáciu [mapy](https://en.wikipedia.org/wiki/Associative_array) medzi cestami URL a našimi šablónami. Pridajte tento objekt na začiatok vášho súboru `app.js`.
+
+```js
+const routes = {
+  '/login': { templateId: 'login' },
+  '/dashboard': { templateId: 'dashboard' },
+};
+```
+
+Teraz trochu upravíme funkciu `updateRoute`. Namiesto toho, aby sme priamo odovzdávali `templateId` ako argument, chceme ho získať najprv pohľadom na aktuálnu URL a potom použiť našu mapu na získanie zodpovedajúcej hodnoty `templateId`. Môžeme použiť [`window.location.pathname`](https://developer.mozilla.org/docs/Web/API/Location/pathname) na získanie iba časti cesty z URL.
+
+```js
+function updateRoute() {
+  const path = window.location.pathname;
+  const route = routes[path];
+
+  const template = document.getElementById(route.templateId);
+  const view = template.content.cloneNode(true);
+  const app = document.getElementById('app');
+  app.innerHTML = '';
+  app.appendChild(view);
+}
+```
+
+Tu sme mapovali trasy, ktoré sme deklarovali, na zodpovedajúce šablóny. Môžete si overiť, že to funguje správne, manuálnou zmenou URL vo vašom prehliadači.
+
+✅ Čo sa stane, ak zadáte neznámu cestu do URL? Ako by sme to mohli vyriešiť?
+
+## Pridanie navigácie
+
+Ďalším krokom pre našu aplikáciu je pridanie možnosti navigovať medzi stránkami bez potreby manuálne meniť URL. To zahŕňa dve veci:
+
+1. Aktualizáciu aktuálnej URL
+2. Aktualizáciu zobrazenej šablóny na základe novej URL
+
+Druhú časť sme už vyriešili pomocou funkcie `updateRoute`, takže musíme zistiť, ako aktualizovať aktuálnu URL.
+
+Budeme musieť použiť JavaScript a konkrétne [`history.pushState`](https://developer.mozilla.org/docs/Web/API/History/pushState), ktorý umožňuje aktualizovať URL a vytvoriť nový záznam v histórii prehliadania bez opätovného načítania HTML.
+
+> Poznámka: Hoci HTML element kotvy [`<a href>`](https://developer.mozilla.org/docs/Web/HTML/Element/a) môže byť použitý na vytváranie hypertextových odkazov na rôzne URL, predvolene spôsobí, že prehliadač načíta HTML znova. Je potrebné zabrániť tomuto správaniu pri spracovaní trás pomocou vlastného JavaScriptu, použitím funkcie `preventDefault()` na udalosti kliknutia.
+
+### Úloha
+
+Vytvorme novú funkciu, ktorú môžeme použiť na navigáciu v našej aplikácii:
+
+```js
+function navigate(path) {
+  window.history.pushState({}, path, path);
+  updateRoute();
+}
+```
+
+Táto metóda najprv aktualizuje aktuálnu URL na základe zadanej cesty a potom aktualizuje šablónu. Vlastnosť `window.location.origin` vráti koreň URL, čo nám umožňuje rekonštruovať úplnú URL z danej cesty.
+
+Teraz, keď máme túto funkciu, môžeme vyriešiť problém, ktorý máme, ak cesta nezodpovedá žiadnej definovanej trase. Upravením funkcie `updateRoute` pridáme záložné riešenie na jednu z existujúcich trás, ak nenájdeme zhodu.
+
+```js
+function updateRoute() {
+  const path = window.location.pathname;
+  const route = routes[path];
+
+  if (!route) {
+    return navigate('/login');
+  }
+
+  ...
+```
+
+Ak sa trasa nenájde, teraz budeme presmerovaní na prihlasovaciu stránku.
+
+Vytvorme teraz funkciu na získanie URL pri kliknutí na odkaz a na zabránenie predvoleného správania prehliadača:
+
+```js
+function onLinkClick(event) {
+  event.preventDefault();
+  navigate(event.target.href);
+}
+```
+
+Dokončime navigačný systém pridaním väzieb na naše odkazy *Login* a *Logout* v HTML.
+
+```html
+<a href="/dashboard" onclick="onLinkClick(event)">Login</a>
+...
+<a href="/login" onclick="onLinkClick(event)">Logout</a>
+```
+
+Objekt `event` vyššie zachytáva udalosť `click` a odovzdáva ju našej funkcii `onLinkClick`.
+
+Pomocou atribútu [`onclick`](https://developer.mozilla.org/docs/Web/API/GlobalEventHandlers/onclick) priraďte udalosť `click` kódu JavaScriptu, tu volaniu funkcie `navigate()`.
+
+Vyskúšajte kliknutie na tieto odkazy, teraz by ste mali byť schopní navigovať medzi rôznymi obrazovkami vašej aplikácie.
+
+✅ Metóda `history.pushState` je súčasťou štandardu HTML5 a je implementovaná vo [všetkých moderných prehliadačoch](https://caniuse.com/?search=pushState). Ak vytvárate webovú aplikáciu pre staršie prehliadače, existuje trik, ktorý môžete použiť namiesto tohto API: použitie [hashu (`#`)](https://en.wikipedia.org/wiki/URI_fragment) pred cestou umožňuje implementovať trasovanie, ktoré funguje s bežnou navigáciou kotvami a nenačítava stránku znova, pretože jeho účelom bolo vytvárať vnútorné odkazy v rámci stránky.
+
+## Spracovanie tlačidiel späť a dopredu v prehliadači
+
+Použitie `history.pushState` vytvára nové záznamy v histórii navigácie prehliadača. Môžete to overiť podržaním *tlačidla späť* vo vašom prehliadači, malo by sa zobraziť niečo takéto:
+
+![Snímka obrazovky histórie navigácie](../../../../translated_images/history.7fdabbafa521e06455b738d3dafa3ff41d3071deae60ead8c7e0844b9ed987d8.sk.png)
+
+Ak skúsite niekoľkokrát kliknúť na tlačidlo späť, uvidíte, že aktuálna URL sa mení a história sa aktualizuje, ale stále sa zobrazuje rovnaká šablóna.
+
+Je to preto, že aplikácia nevie, že musíme zavolať `updateRoute()` zakaždým, keď sa história zmení. Ak sa pozriete na [dokumentáciu `history.pushState`](https://developer.mozilla.org/docs/Web/API/History/pushState), môžete vidieť, že ak sa stav zmení - čo znamená, že sme sa presunuli na inú URL - je spustená udalosť [`popstate`](https://developer.mozilla.org/docs/Web/API/Window/popstate_event). Použijeme to na vyriešenie tohto problému.
+
+### Úloha
+
+Aby sme zabezpečili, že zobrazená šablóna sa aktualizuje, keď sa história prehliadača zmení, pripojíme novú funkciu, ktorá volá `updateRoute()`. Urobíme to na konci nášho súboru `app.js`:
+
+```js
+window.onpopstate = () => updateRoute();
+updateRoute();
+```
+
+> Poznámka: Na deklaráciu nášho obslužného programu udalosti `popstate` sme tu použili [šípkovú funkciu](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions) pre stručnosť, ale fungovala by aj bežná funkcia.
+
+Tu je video na zopakovanie šípkových funkcií:
+
+[![Šípkové funkcie](https://img.youtube.com/vi/OP6eEbOj2sc/0.jpg)](https://youtube.com/watch?v=OP6eEbOj2sc "Šípkové funkcie")
+
+> 🎥 Kliknite na obrázok vyššie pre video o šípkových funkciách.
+
+Teraz skúste použiť tlačidlá späť a dopredu vo vašom prehliadači a overte, že zobrazená trasa sa tentokrát správne aktualizuje.
+
+---
+
+## 🚀 Výzva
+
+Pridajte novú šablónu a trasu pre tretiu stránku, ktorá zobrazí kredity pre túto aplikáciu.
+
+## Kvíz po prednáške
+
+[Kvíz po prednáške](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/42)
+
+## Prehľad a samoštúdium
+
+Trasovanie je jednou z prekvapivo zložitých častí vývoja webu, najmä keď sa web presúva od správania s obnovovaním stránok k obnovovaniu stránok v rámci aplikácií typu Single Page Application. Prečítajte si niečo o tom, [ako služba Azure Static Web App](https://docs.microsoft.com/azure/static-web-apps/routes/?WT.mc_id=academic-77807-sagibbon) spracováva trasovanie. Dokážete vysvetliť, prečo sú niektoré rozhodnutia popísané v tomto dokumente nevyhnutné?
+
+## Zadanie
+
+[Vylepšite trasovanie](assignment.md)
+
+---
+
+**Upozornenie**:  
+Tento dokument bol preložený pomocou služby AI prekladu [Co-op Translator](https://github.com/Azure/co-op-translator). Aj keď sa snažíme o presnosť, prosím, berte na vedomie, že automatizované preklady môžu obsahovať chyby alebo nepresnosti. Pôvodný dokument v jeho pôvodnom jazyku by mal byť považovaný za autoritatívny zdroj. Pre kritické informácie sa odporúča profesionálny ľudský preklad. Nie sme zodpovední za akékoľvek nedorozumenia alebo nesprávne interpretácie vyplývajúce z použitia tohto prekladu.
\ No newline at end of file
diff --git a/translations/sk/7-bank-project/1-template-route/assignment.md b/translations/sk/7-bank-project/1-template-route/assignment.md
new file mode 100644
index 00000000..b6192cf8
--- /dev/null
+++ b/translations/sk/7-bank-project/1-template-route/assignment.md
@@ -0,0 +1,28 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "8223e429218befa731dd5bfd22299520",
+  "translation_date": "2025-08-27T22:11:51+00:00",
+  "source_file": "7-bank-project/1-template-route/assignment.md",
+  "language_code": "sk"
+}
+-->
+# Vylepšenie smerovania
+
+## Inštrukcie
+
+Deklarácia trás momentálne obsahuje iba ID šablóny, ktorú treba použiť. Pri zobrazovaní novej stránky je však niekedy potrebné urobiť viac. Vylepšime našu implementáciu smerovania o dve ďalšie funkcie:
+
+- Pridajte názvy ku každej šablóne a aktualizujte názov okna týmto novým názvom, keď sa šablóna zmení.
+- Pridajte možnosť spustiť nejaký kód po zmene šablóny. Chceme, aby sa v konzole pre vývojárov zobrazilo `'Dashboard is shown'` vždy, keď sa zobrazí stránka dashboardu.
+
+## Kritériá hodnotenia
+
+| Kritérium | Vynikajúce                                                                                                                        | Dostatočné                                                                                                                                                                               | Potrebuje zlepšenie                                   |
+| --------- | ---------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------- |
+|           | Obe funkcie sú implementované a fungujú. Pridanie názvu a kódu funguje aj pre novú trasu pridanú do deklarácie `routes`.            | Obe funkcie fungujú, ale správanie je pevne zakódované a nie je konfigurovateľné prostredníctvom deklarácie `routes`. Pridanie tretej trasy s názvom a kódom nefunguje alebo funguje čiastočne. | Jedna z funkcií chýba alebo nefunguje správne.       |
+
+---
+
+**Upozornenie**:  
+Tento dokument bol preložený pomocou služby AI prekladu [Co-op Translator](https://github.com/Azure/co-op-translator). Hoci sa snažíme o presnosť, prosím, berte na vedomie, že automatizované preklady môžu obsahovať chyby alebo nepresnosti. Pôvodný dokument v jeho pôvodnom jazyku by mal byť považovaný za autoritatívny zdroj. Pre kritické informácie sa odporúča profesionálny ľudský preklad. Nie sme zodpovední za akékoľvek nedorozumenia alebo nesprávne interpretácie vyplývajúce z použitia tohto prekladu.
\ No newline at end of file
diff --git a/translations/sk/7-bank-project/2-forms/README.md b/translations/sk/7-bank-project/2-forms/README.md
new file mode 100644
index 00000000..75595673
--- /dev/null
+++ b/translations/sk/7-bank-project/2-forms/README.md
@@ -0,0 +1,313 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "b667b7d601e2ee19acb5aa9d102dc9f3",
+  "translation_date": "2025-08-27T22:04:23+00:00",
+  "source_file": "7-bank-project/2-forms/README.md",
+  "language_code": "sk"
+}
+-->
+# Vytvorenie bankovej aplikácie, časť 2: Vytvorenie prihlasovacieho a registračného formulára
+
+## Kvíz pred prednáškou
+
+[Kvíz pred prednáškou](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/43)
+
+### Úvod
+
+Takmer vo všetkých moderných webových aplikáciách si môžete vytvoriť účet, aby ste mali svoj vlastný súkromný priestor. Keďže webovú aplikáciu môže naraz používať viacero používateľov, potrebujete mechanizmus na oddelené ukladanie osobných údajov každého používateľa a výber informácií, ktoré sa majú zobraziť. Nebudeme sa zaoberať tým, ako [bezpečne spravovať identitu používateľa](https://en.wikipedia.org/wiki/Authentication), pretože je to rozsiahla téma sama o sebe, ale zabezpečíme, aby si každý používateľ mohol vytvoriť jeden (alebo viac) bankových účtov v našej aplikácii.
+
+V tejto časti použijeme HTML formuláre na pridanie prihlasovania a registrácie do našej webovej aplikácie. Ukážeme si, ako programovo odosielať údaje na serverovú API, a nakoniec, ako definovať základné pravidlá validácie pre vstupy používateľa.
+
+### Predpoklady
+
+Musíte mať dokončenú časť [HTML šablóny a smerovanie](../1-template-route/README.md) webovej aplikácie pre túto lekciu. Tiež musíte nainštalovať [Node.js](https://nodejs.org) a [spustiť serverovú API](../api/README.md) lokálne, aby ste mohli odosielať údaje na vytvorenie účtov.
+
+**Poznámka**
+Budete mať spustené dva terminály naraz, ako je uvedené nižšie:
+1. Pre hlavnú bankovú aplikáciu, ktorú sme vytvorili v lekcii [HTML šablóny a smerovanie](../1-template-route/README.md)
+2. Pre [serverovú API bankovej aplikácie](../api/README.md), ktorú sme práve nastavili vyššie.
+
+Na pokračovanie v lekcii musíte mať oba servery spustené. Počúvajú na rôznych portoch (port `3000` a port `5000`), takže všetko by malo fungovať bez problémov.
+
+Môžete otestovať, či server beží správne, vykonaním tohto príkazu v termináli:
+
+```sh
+curl http://localhost:5000/api
+# -> should return "Bank API v1.0.0" as a result
+```
+
+---
+
+## Formulár a ovládacie prvky
+
+Element `<form>` obklopuje sekciu HTML dokumentu, kde používateľ môže zadávať a odosielať údaje pomocou interaktívnych ovládacích prvkov. Existuje množstvo rôznych používateľských rozhraní (UI) ovládacích prvkov, ktoré sa dajú použiť vo formulári, najbežnejšie sú elementy `<input>` a `<button>`.
+
+Existuje veľa rôznych [typov](https://developer.mozilla.org/docs/Web/HTML/Element/input) `<input>`, napríklad na vytvorenie poľa, kde používateľ môže zadať svoje používateľské meno, môžete použiť:
+
+```html
+<input id="username" name="username" type="text">
+```
+
+Atribút `name` sa použije ako názov vlastnosti, keď sa údaje formulára odošlú. Atribút `id` sa používa na priradenie `<label>` k ovládaciemu prvku formulára.
+
+> Pozrite si celý zoznam [`<input>` typov](https://developer.mozilla.org/docs/Web/HTML/Element/input) a [iných ovládacích prvkov formulára](https://developer.mozilla.org/docs/Learn/Forms/Other_form_controls), aby ste získali predstavu o všetkých natívnych UI elementoch, ktoré môžete použiť pri vytváraní svojho rozhrania.
+
+✅ Všimnite si, že `<input>` je [prázdny element](https://developer.mozilla.org/docs/Glossary/Empty_element), ku ktorému by ste *nemali* pridávať zodpovedajúci zatvárací tag. Môžete však použiť samo-uzatvárací zápis `<input/>`, ale nie je to povinné.
+
+Element `<button>` vo formulári je trochu špeciálny. Ak nešpecifikujete jeho atribút `type`, automaticky odošle údaje formulára na server, keď naň kliknete. Tu sú možné hodnoty atribútu `type`:
+
+- `submit`: Predvolená hodnota vo formulári `<form>`, tlačidlo spustí akciu odoslania formulára.
+- `reset`: Tlačidlo obnoví všetky ovládacie prvky formulára na ich počiatočné hodnoty.
+- `button`: Nepriraďuje predvolené správanie pri stlačení tlačidla. Môžete mu potom priradiť vlastné akcie pomocou JavaScriptu.
+
+### Úloha
+
+Začnime pridaním formulára do šablóny `login`. Budeme potrebovať pole *používateľské meno* a tlačidlo *Prihlásiť sa*.
+
+```html
+<template id="login">
+  <h1>Bank App</h1>
+  <section>
+    <h2>Login</h2>
+    <form id="loginForm">
+      <label for="username">Username</label>
+      <input id="username" name="user" type="text">
+      <button>Login</button>
+    </form>
+  </section>
+</template>
+```
+
+Ak sa pozriete bližšie, môžete si všimnúť, že sme tu pridali aj element `<label>`. Elementy `<label>` sa používajú na pridanie názvu k ovládacím prvkom UI, ako je naše pole používateľského mena. Štítky sú dôležité pre čitateľnosť vašich formulárov, ale majú aj ďalšie výhody:
+
+- Priradením štítku k ovládaciemu prvku formulára pomáha používateľom, ktorí používajú asistívne technológie (napríklad čítačku obrazovky), pochopiť, aké údaje sa od nich očakávajú.
+- Kliknutím na štítok môžete priamo zamerať priradený vstup, čo uľahčuje jeho dosiahnutie na zariadeniach s dotykovou obrazovkou.
+
+> [Prístupnosť](https://developer.mozilla.org/docs/Learn/Accessibility/What_is_accessibility) na webe je veľmi dôležitá téma, ktorá sa často prehliada. Vďaka [semantickým HTML elementom](https://developer.mozilla.org/docs/Learn/Accessibility/HTML) nie je ťažké vytvárať prístupný obsah, ak ich používate správne. Môžete si [prečítať viac o prístupnosti](https://developer.mozilla.org/docs/Web/Accessibility), aby ste sa vyhli bežným chybám a stali sa zodpovedným vývojárom.
+
+Teraz pridáme druhý formulár pre registráciu, hneď pod ten predchádzajúci:
+
+```html
+<hr/>
+<h2>Register</h2>
+<form id="registerForm">
+  <label for="user">Username</label>
+  <input id="user" name="user" type="text">
+  <label for="currency">Currency</label>
+  <input id="currency" name="currency" type="text" value="$">
+  <label for="description">Description</label>
+  <input id="description" name="description" type="text">
+  <label for="balance">Current balance</label>
+  <input id="balance" name="balance" type="number" value="0">
+  <button>Register</button>
+</form>
+```
+
+Pomocou atribútu `value` môžeme definovať predvolenú hodnotu pre daný vstup.
+Všimnite si tiež, že vstup pre `balance` má typ `number`. Vyzerá inak ako ostatné vstupy? Skúste s ním interagovať.
+
+✅ Dokážete navigovať a interagovať s formulármi iba pomocou klávesnice? Ako by ste to urobili?
+
+## Odosielanie údajov na server
+
+Teraz, keď máme funkčné UI, ďalším krokom je odoslanie údajov na náš server. Urobme rýchly test pomocou nášho aktuálneho kódu: čo sa stane, keď kliknete na tlačidlo *Prihlásiť sa* alebo *Registrovať*?
+
+Všimli ste si zmenu v sekcii URL vášho prehliadača?
+
+![Screenshot zmeny URL prehliadača po kliknutí na tlačidlo Registrovať](../../../../translated_images/click-register.e89a30bf0d4bc9ca867dc537c4cea679a7c26368bd790969082f524fed2355bc.sk.png)
+
+Predvolená akcia pre `<form>` je odoslať formulár na aktuálnu URL servera pomocou [metódy GET](https://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.3), pričom údaje formulára sa pripoja priamo k URL. Táto metóda má však určité nedostatky:
+
+- Odoslané údaje sú veľmi obmedzené veľkosťou (asi 2000 znakov)
+- Údaje sú priamo viditeľné v URL (nie je ideálne pre heslá)
+- Nepracuje s nahrávaním súborov
+
+Preto ju môžete zmeniť na použitie [metódy POST](https://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.5), ktorá odosiela údaje formulára na server v tele HTTP požiadavky, bez predchádzajúcich obmedzení.
+
+> Hoci POST je najčastejšie používaná metóda na odosielanie údajov, [v niektorých špecifických scenároch](https://www.w3.org/2001/tag/doc/whenToUseGet.html) je vhodnejšie použiť metódu GET, napríklad pri implementácii vyhľadávacieho poľa.
+
+### Úloha
+
+Pridajte vlastnosti `action` a `method` do registračného formulára:
+
+```html
+<form id="registerForm" action="//localhost:5000/api/accounts" method="POST">
+```
+
+Teraz sa pokúste zaregistrovať nový účet so svojím menom. Po kliknutí na tlačidlo *Registrovať* by ste mali vidieť niečo takéto:
+
+![Okno prehliadača na adrese localhost:5000/api/accounts, zobrazujúce JSON reťazec s údajmi používateľa](../../../../translated_images/form-post.61de4ca1b964d91a9e338416e19f218504dd0af5f762fbebabfe7ae80edf885f.sk.png)
+
+Ak všetko prebehne správne, server by mal odpovedať na vašu požiadavku s [JSON](https://www.json.org/json-en.html) odpoveďou obsahujúcou údaje účtu, ktorý bol vytvorený.
+
+✅ Skúste sa zaregistrovať znova s rovnakým menom. Čo sa stane?
+
+## Odosielanie údajov bez načítania stránky
+
+Ako ste si pravdepodobne všimli, existuje malý problém s prístupom, ktorý sme práve použili: pri odosielaní formulára sa dostaneme mimo našej aplikácie a prehliadač presmeruje na URL servera. Snažíme sa vyhnúť všetkým načítaniam stránok v našej webovej aplikácii, pretože vytvárame [jednostránkovú aplikáciu (SPA)](https://en.wikipedia.org/wiki/Single-page_application).
+
+Aby sme mohli odoslať údaje formulára na server bez núteného načítania stránky, musíme použiť JavaScriptový kód. Namiesto zadania URL do vlastnosti `action` elementu `<form>` môžete použiť akýkoľvek JavaScriptový kód predchádzajúci reťazcom `javascript:`, aby ste vykonali vlastnú akciu. Použitie tohto znamená, že budete musieť implementovať niektoré úlohy, ktoré predtým automaticky vykonával prehliadač:
+
+- Získať údaje formulára
+- Konvertovať a zakódovať údaje formulára do vhodného formátu
+- Vytvoriť HTTP požiadavku a odoslať ju na server
+
+### Úloha
+
+Nahraďte vlastnosť `action` registračného formulára:
+
+```html
+<form id="registerForm" action="javascript:register()">
+```
+
+Otvorte `app.js` a pridajte novú funkciu s názvom `register`:
+
+```js
+function register() {
+  const registerForm = document.getElementById('registerForm');
+  const formData = new FormData(registerForm);
+  const data = Object.fromEntries(formData);
+  const jsonData = JSON.stringify(data);
+}
+```
+
+Tu získavame element formulára pomocou `getElementById()` a používame pomocníka [`FormData`](https://developer.mozilla.org/docs/Web/API/FormData) na extrahovanie hodnôt z ovládacích prvkov formulára ako sadu dvojíc kľúč/hodnota. Potom konvertujeme údaje na bežný objekt pomocou [`Object.fromEntries()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/fromEntries) a nakoniec serializujeme údaje do [JSON](https://www.json.org/json-en.html), formátu bežne používaného na výmenu údajov na webe.
+
+Údaje sú teraz pripravené na odoslanie na server. Vytvorte novú funkciu s názvom `createAccount`:
+
+```js
+async function createAccount(account) {
+  try {
+    const response = await fetch('//localhost:5000/api/accounts', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: account
+    });
+    return await response.json();
+  } catch (error) {
+    return { error: error.message || 'Unknown error' };
+  }
+}
+```
+
+Čo táto funkcia robí? Najprv si všimnite kľúčové slovo `async`. To znamená, že funkcia obsahuje kód, ktorý sa bude vykonávať [**asynchrónne**](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/async_function). Keď sa použije spolu s kľúčovým slovom `await`, umožňuje čakať na vykonanie asynchrónneho kódu - napríklad čakanie na odpoveď servera - pred pokračovaním.
+
+Tu je krátke video o používaní `async/await`:
+
+[![Async a Await na správu sľubov](https://img.youtube.com/vi/YwmlRkrxvkk/0.jpg)](https://youtube.com/watch?v=YwmlRkrxvkk "Async a Await na správu sľubov")
+
+> 🎥 Kliknite na obrázok vyššie pre video o async/await.
+
+Používame API `fetch()` na odoslanie JSON údajov na server. Táto metóda má 2 parametre:
+
+- URL servera, takže tu zadáme `//localhost:5000/api/accounts`.
+- Nastavenia požiadavky. Tu nastavíme metódu na `POST` a poskytneme `body` požiadavky. Keďže odosielame JSON údaje na server, musíme tiež nastaviť hlavičku `Content-Type` na `application/json`, aby server vedel, ako interpretovať obsah.
+
+Keďže server odpovie na požiadavku s JSON, môžeme použiť `await response.json()` na analýzu obsahu JSON a vrátenie výsledného objektu. Všimnite si, že táto metóda je asynchrónna, takže tu používame kľúčové slovo `await`, aby sme sa uistili, že sa zachytia aj chyby počas analýzy.
+
+Teraz pridajte nejaký kód do funkcie `register`, aby zavolala `createAccount()`:
+
+```js
+const result = await createAccount(jsonData);
+```
+
+Keďže tu používame kľúčové slovo `await`, musíme pridať kľúčové slovo `async` pred funkciu register:
+
+```js
+async function register() {
+```
+
+Nakoniec pridajme nejaké logy na kontrolu výsledku. Finálna funkcia by mala vyzerať takto:
+
+```js
+async function register() {
+  const registerForm = document.getElementById('registerForm');
+  const formData = new FormData(registerForm);
+  const jsonData = JSON.stringify(Object.fromEntries(formData));
+  const result = await createAccount(jsonData);
+
+  if (result.error) {
+    return console.log('An error occurred:', result.error);
+  }
+
+  console.log('Account created!', result);
+}
+```
+
+To bolo trochu dlhé, ale dostali sme sa tam! Ak otvoríte [nástroje pre vývojárov prehliadača](https://developer.mozilla.org/docs/Learn/Common_questions/What_are_browser_developer_tools) a pokúsite sa zaregistrovať nový účet, nemali by ste vidieť žiadnu zmenu na webovej stránke, ale v konzole sa objaví správa potvrdzujúca, že všetko funguje.
+
+![Screenshot zobrazujúci logovú správu v konzole prehliadača](../../../../translated_images/browser-console.efaf0b51aaaf67782a29e1a0bb32cc063f189b18e894eb5926e02f1abe864ec2.sk.png)
+
+✅ Myslíte si, že údaje sú odosielané na server bezpečne? Čo ak by niekto dokázal zachytiť požiadavku? Môžete si prečítať o [HTTPS](https://en.wikipedia.org/wiki/HTTPS), aby ste sa dozvedeli viac o bezpečnej komunikácii údajov.
+
+## Validácia údajov
+
+Ak sa pokúsite zaregistrovať nový účet bez nastavenia používateľského mena, môžete vidieť, že server vráti chybu so status kódom [400 (Zlá požiadavka)](https://developer.mozilla.org/docs/Web/HTTP/Status/400#:~:text=The%20HyperText%20Transfer%20Protocol%20(HTTP,%2C%20or%20deceptive%20request%20routing).).
+
+Pred odoslaním údajov na server je dobrým zvykom [validovať údaje formulára](https://developer.mozilla.org/docs/Learn/Forms/Form_validation) vopred, keď je to možné, aby ste sa uistili, že odosielate platnú požiadavku. HTML5 ovládacie prvky formulára poskytujú vstavanú validáciu pomocou rôznych atribútov:
+
+- `required`: pole musí byť vyplnené, inak formulár nemôže byť odoslaný.
+- `minlength` a `maxlength`: definujú minimálny a maximálny počet znakov v textových poliach.
+- `min` a `max`: definujú minimálnu a maximálnu hodnotu číselného poľa.
+- `type`: definuje druh očakávaných údajov, ako `number`, `email`, `file` alebo [iné vstavané typy](https://developer.mozilla.org/docs/Web/HTML/Element/input). Tento atribút môže tiež zmeniť vizuálne zobrazenie ovládacieho prvku formulára.
+- `pattern`: umožňuje definovať [regulárny výraz](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Regular_Expressions) na testovanie, či sú zadané údaje platné alebo nie.
+Tip: môžete prispôsobiť vzhľad ovládacích prvkov formulára podľa toho, či sú platné alebo neplatné, pomocou pseudo-tried CSS `:valid` a `:invalid`.
+### Úloha
+
+Na vytvorenie platného nového účtu sú potrebné dve povinné polia: používateľské meno a mena. Ostatné polia sú voliteľné. Aktualizujte HTML formulára tak, aby ste použili atribút `required` a text v označení poľa:
+
+```html
+<label for="user">Username (required)</label>
+<input id="user" name="user" type="text" required>
+...
+<label for="currency">Currency (required)</label>
+<input id="currency" name="currency" type="text" value="$" required>
+```
+
+Aj keď táto konkrétna implementácia servera nevyžaduje špecifické obmedzenia na maximálnu dĺžku polí, je vždy dobrým zvykom definovať rozumné limity pre akýkoľvek text zadávaný používateľom.
+
+Pridajte atribút `maxlength` do textových polí:
+
+```html
+<input id="user" name="user" type="text" maxlength="20" required>
+...
+<input id="currency" name="currency" type="text" value="$" maxlength="5" required>
+...
+<input id="description" name="description" type="text" maxlength="100">
+```
+
+Ak teraz stlačíte tlačidlo *Registrovať* a niektoré pole nespĺňa pravidlo validácie, ktoré sme definovali, mali by ste vidieť niečo takéto:
+
+![Snímka obrazovky zobrazujúca chybu validácie pri pokuse o odoslanie formulára](../../../../translated_images/validation-error.8bd23e98d416c22f80076d04829a4bb718e0e550fd622862ef59008ccf0d5dce.sk.png)
+
+Validácia, ktorá sa vykonáva *pred* odoslaním akýchkoľvek údajov na server, sa nazýva **validácia na strane klienta**. Ale všimnite si, že nie je vždy možné vykonať všetky kontroly bez odoslania údajov. Napríklad tu nemôžeme overiť, či už existuje účet s rovnakým používateľským menom, bez odoslania požiadavky na server. Ďalšia validácia vykonaná na serveri sa nazýva **validácia na strane servera**.
+
+Zvyčajne je potrebné implementovať obe, a zatiaľ čo validácia na strane klienta zlepšuje používateľskú skúsenosť tým, že poskytuje okamžitú spätnú väzbu používateľovi, validácia na strane servera je nevyhnutná na zabezpečenie toho, aby údaje používateľa, s ktorými pracujete, boli správne a bezpečné.
+
+---
+
+## 🚀 Výzva
+
+Zobrazte chybovú správu v HTML, ak používateľ už existuje.
+
+Tu je príklad, ako môže vyzerať konečná prihlasovacia stránka po troche štýlovania:
+
+![Snímka obrazovky prihlasovacej stránky po pridaní štýlov CSS](../../../../translated_images/result.96ef01f607bf856aa9789078633e94a4f7664d912f235efce2657299becca483.sk.png)
+
+## Kvíz po prednáške
+
+[Kvíz po prednáške](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/44)
+
+## Prehľad a samostatné štúdium
+
+Vývojári sa stali veľmi kreatívnymi pri vytváraní formulárov, najmä pokiaľ ide o stratégie validácie. Zistite viac o rôznych postupoch pri tvorbe formulárov prehliadaním [CodePen](https://codepen.com); nájdete niektoré zaujímavé a inšpiratívne formuláre?
+
+## Zadanie
+
+[Štýlujte svoju bankovú aplikáciu](assignment.md)
+
+---
+
+**Upozornenie**:  
+Tento dokument bol preložený pomocou služby AI prekladu [Co-op Translator](https://github.com/Azure/co-op-translator). Hoci sa snažíme o presnosť, prosím, berte na vedomie, že automatizované preklady môžu obsahovať chyby alebo nepresnosti. Pôvodný dokument v jeho pôvodnom jazyku by mal byť považovaný za autoritatívny zdroj. Pre kritické informácie sa odporúča profesionálny ľudský preklad. Nie sme zodpovední za akékoľvek nedorozumenia alebo nesprávne interpretácie vyplývajúce z použitia tohto prekladu.
\ No newline at end of file
diff --git a/translations/sk/7-bank-project/2-forms/assignment.md b/translations/sk/7-bank-project/2-forms/assignment.md
new file mode 100644
index 00000000..c622fd1b
--- /dev/null
+++ b/translations/sk/7-bank-project/2-forms/assignment.md
@@ -0,0 +1,27 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "474f3ab1ee755ca980fc9104a0316e17",
+  "translation_date": "2025-08-27T22:06:48+00:00",
+  "source_file": "7-bank-project/2-forms/assignment.md",
+  "language_code": "sk"
+}
+-->
+# Štylizujte svoju bankovú aplikáciu
+
+## Pokyny
+
+Vytvorte nový súbor `styles.css` a pridajte odkaz naň do vášho aktuálneho súboru `index.html`. V práve vytvorenom CSS súbore pridajte štýly, aby stránky *Prihlásenie* a *Dashboard* vyzerali pekne a upravene. Pokúste sa vytvoriť farebnú tému, ktorá dodá vašej aplikácii vlastnú identitu.
+
+> Tip: môžete upraviť HTML a pridať nové prvky a triedy, ak je to potrebné.
+
+## Hodnotiace kritériá
+
+| Kritérium | Vynikajúce                                                                                                             | Dostatočné                                                                    | Vyžaduje zlepšenie                                                                           |
+| --------- | ---------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------- |
+|           | Všetky stránky vyzerajú čisté a prehľadné, s konzistentnou farebnou témou a jednotlivé sekcie sú správne zvýraznené.   | Stránky sú naformátované, ale bez témy alebo sekcie nie sú jasne oddelené.    | Stránky nemajú štýl, sekcie vyzerajú neorganizovane a informácie sú ťažko čitateľné.         |
+
+---
+
+**Upozornenie**:  
+Tento dokument bol preložený pomocou služby AI prekladu [Co-op Translator](https://github.com/Azure/co-op-translator). Aj keď sa snažíme o presnosť, prosím, berte na vedomie, že automatizované preklady môžu obsahovať chyby alebo nepresnosti. Pôvodný dokument v jeho rodnom jazyku by mal byť považovaný za autoritatívny zdroj. Pre kritické informácie sa odporúča profesionálny ľudský preklad. Nie sme zodpovední za akékoľvek nedorozumenia alebo nesprávne interpretácie vyplývajúce z použitia tohto prekladu.
\ No newline at end of file
diff --git a/translations/sk/7-bank-project/3-data/README.md b/translations/sk/7-bank-project/3-data/README.md
new file mode 100644
index 00000000..99466de8
--- /dev/null
+++ b/translations/sk/7-bank-project/3-data/README.md
@@ -0,0 +1,347 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "f587e913e3f7c0b1c549a05dd74ee8e5",
+  "translation_date": "2025-08-27T22:00:32+00:00",
+  "source_file": "7-bank-project/3-data/README.md",
+  "language_code": "sk"
+}
+-->
+# Vytvorenie bankovej aplikácie časť 3: Metódy získavania a používania dát
+
+## Kvíz pred prednáškou
+
+[Kvíz pred prednáškou](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/45)
+
+### Úvod
+
+Jadrom každej webovej aplikácie sú *dáta*. Dáta môžu mať rôzne formy, ale ich hlavný účel je vždy zobrazovať informácie používateľovi. S narastajúcou interaktivitou a komplexnosťou webových aplikácií sa spôsob, akým používateľ pristupuje k informáciám a interaguje s nimi, stal kľúčovou súčasťou vývoja webu.
+
+V tejto lekcii sa naučíme, ako asynchrónne získavať dáta zo servera a používať ich na zobrazovanie informácií na webovej stránke bez opätovného načítania HTML.
+
+### Predpoklady
+
+Pre túto lekciu je potrebné, aby ste už vytvorili [formulár na prihlásenie a registráciu](../2-forms/README.md) ako súčasť webovej aplikácie. Tiež je potrebné nainštalovať [Node.js](https://nodejs.org) a [spustiť server API](../api/README.md) lokálne, aby ste získali údaje o účtoch.
+
+Môžete otestovať, či server beží správne, vykonaním tohto príkazu v termináli:
+
+```sh
+curl http://localhost:5000/api
+# -> should return "Bank API v1.0.0" as a result
+```
+
+---
+
+## AJAX a získavanie dát
+
+Tradičné webové stránky aktualizujú zobrazovaný obsah, keď používateľ vyberie odkaz alebo odošle dáta prostredníctvom formulára, opätovným načítaním celej HTML stránky. Pri každom načítaní nových dát webový server vráti úplne novú HTML stránku, ktorú musí prehliadač spracovať, čím sa preruší aktuálna akcia používateľa a obmedzia interakcie počas načítania. Tento pracovný postup sa tiež nazýva *viacstránková aplikácia* alebo *MPA*.
+
+![Pracovný postup aktualizácie vo viacstránkovej aplikácii](../../../../translated_images/mpa.7f7375a1a2d4aa779d3f928a2aaaf9ad76bcdeb05cfce2dc27ab126024050f51.sk.png)
+
+Keď sa webové aplikácie začali stávať komplexnejšími a interaktívnejšími, objavila sa nová technika nazývaná [AJAX (Asynchronous JavaScript and XML)](https://en.wikipedia.org/wiki/Ajax_(programming)). Táto technika umožňuje webovým aplikáciám asynchrónne odosielať a získavať dáta zo servera pomocou JavaScriptu bez nutnosti opätovného načítania HTML stránky, čo vedie k rýchlejším aktualizáciám a plynulejším interakciám používateľa. Keď sú nové dáta prijaté zo servera, aktuálna HTML stránka môže byť aktualizovaná pomocou JavaScriptu prostredníctvom [DOM](https://developer.mozilla.org/docs/Web/API/Document_Object_Model) API. Postupom času sa tento prístup vyvinul do toho, čo sa dnes nazýva [*jednostránková aplikácia* alebo *SPA*](https://en.wikipedia.org/wiki/Single-page_application).
+
+![Pracovný postup aktualizácie v jednostránkovej aplikácii](../../../../translated_images/spa.268ec73b41f992c2a21ef9294235c6ae597b3c37e2c03f0494c2d8857325cc57.sk.png)
+
+Keď bol AJAX prvýkrát predstavený, jediným dostupným API na asynchrónne získavanie dát bolo [`XMLHttpRequest`](https://developer.mozilla.org/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest). Moderné prehliadače však teraz implementujú pohodlnejšie a výkonnejšie [`Fetch` API](https://developer.mozilla.org/docs/Web/API/Fetch_API), ktoré používa promises a je lepšie prispôsobené na manipuláciu s JSON dátami.
+
+> Hoci všetky moderné prehliadače podporujú `Fetch API`, ak chcete, aby vaša webová aplikácia fungovala na starších prehliadačoch, vždy je dobré najskôr skontrolovať [tabuľku kompatibility na caniuse.com](https://caniuse.com/fetch).
+
+### Úloha
+
+V [predchádzajúcej lekcii](../2-forms/README.md) sme implementovali registračný formulár na vytvorenie účtu. Teraz pridáme kód na prihlásenie pomocou existujúceho účtu a získanie jeho dát. Otvorte súbor `app.js` a pridajte novú funkciu `login`:
+
+```js
+async function login() {
+  const loginForm = document.getElementById('loginForm')
+  const user = loginForm.user.value;
+}
+```
+
+Začíname získaním elementu formulára pomocou `getElementById()` a následne získame používateľské meno z inputu pomocou `loginForm.user.value`. Každý ovládací prvok formulára je možné pristupovať podľa jeho názvu (nastaveného v HTML pomocou atribútu `name`) ako vlastnosť formulára.
+
+Podobne ako sme to urobili pri registrácii, vytvoríme ďalšiu funkciu na vykonanie požiadavky na server, tentokrát na získanie údajov o účte:
+
+```js
+async function getAccount(user) {
+  try {
+    const response = await fetch('//localhost:5000/api/accounts/' + encodeURIComponent(user));
+    return await response.json();
+  } catch (error) {
+    return { error: error.message || 'Unknown error' };
+  }
+}
+```
+
+Používame `fetch` API na asynchrónne získanie dát zo servera, ale tentokrát nepotrebujeme žiadne ďalšie parametre okrem URL, ktorú voláme, pretože iba dotazujeme dáta. Predvolene `fetch` vytvára [`GET`](https://developer.mozilla.org/docs/Web/HTTP/Methods/GET) HTTP požiadavku, čo je presne to, čo tu potrebujeme.
+
+✅ `encodeURIComponent()` je funkcia, ktorá uniká špeciálne znaky pre URL. Aké problémy by mohli nastať, ak by sme túto funkciu nevolali a použili priamo hodnotu `user` v URL?
+
+Teraz aktualizujeme našu funkciu `login`, aby používala `getAccount`:
+
+```js
+async function login() {
+  const loginForm = document.getElementById('loginForm')
+  const user = loginForm.user.value;
+  const data = await getAccount(user);
+
+  if (data.error) {
+    return console.log('loginError', data.error);
+  }
+
+  account = data;
+  navigate('/dashboard');
+}
+```
+
+Keďže `getAccount` je asynchrónna funkcia, musíme ju spárovať s kľúčovým slovom `await`, aby sme počkali na výsledok zo servera. Ako pri každej požiadavke na server, musíme sa vysporiadať s chybovými prípadmi. Zatiaľ pridáme iba logovaciu správu na zobrazenie chyby a neskôr sa k tomu vrátime.
+
+Potom musíme uložiť dáta niekde, aby sme ich mohli neskôr použiť na zobrazenie informácií na dashboarde. Keďže premenná `account` zatiaľ neexistuje, vytvoríme globálnu premennú na začiatku nášho súboru:
+
+```js
+let account = null;
+```
+
+Po uložení údajov používateľa do premennej môžeme prejsť zo stránky *login* na *dashboard* pomocou funkcie `navigate()`, ktorú už máme.
+
+Nakoniec musíme zavolať našu funkciu `login`, keď je formulár na prihlásenie odoslaný, úpravou HTML:
+
+```html
+<form id="loginForm" action="javascript:login()">
+```
+
+Otestujte, či všetko funguje správne, registráciou nového účtu a pokusom o prihlásenie pomocou toho istého účtu.
+
+Predtým, než prejdeme na ďalšiu časť, môžeme tiež dokončiť funkciu `register` pridaním tohto na koniec funkcie:
+
+```js
+account = result;
+navigate('/dashboard');
+```
+
+✅ Vedeli ste, že predvolene môžete volať serverové API iba z *rovnakého doménového mena a portu*, ako je webová stránka, ktorú si prezeráte? Toto je bezpečnostný mechanizmus vynucovaný prehliadačmi. Ale počkajte, naša webová aplikácia beží na `localhost:3000`, zatiaľ čo server API beží na `localhost:5000`, prečo to funguje? Použitím techniky nazývanej [Cross-Origin Resource Sharing (CORS)](https://developer.mozilla.org/docs/Web/HTTP/CORS) je možné vykonávať cross-origin HTTP požiadavky, ak server pridá špeciálne hlavičky do odpovede, ktoré umožňujú výnimky pre konkrétne domény.
+
+> Viac o API sa dozviete v tejto [lekcii](https://docs.microsoft.com/learn/modules/use-apis-discover-museum-art/?WT.mc_id=academic-77807-sagibbon)
+
+## Aktualizácia HTML na zobrazenie dát
+
+Teraz, keď máme údaje používateľa, musíme aktualizovať existujúce HTML, aby ich zobrazovalo. Už vieme, ako získať element z DOM pomocou napríklad `document.getElementById()`. Po získaní základného elementu, tu sú niektoré API, ktoré môžete použiť na jeho úpravu alebo pridanie podriadených elementov:
+
+- Pomocou vlastnosti [`textContent`](https://developer.mozilla.org/docs/Web/API/Node/textContent) môžete zmeniť text elementu. Upozorňujeme, že zmena tejto hodnoty odstráni všetky podriadené elementy (ak nejaké existujú) a nahradí ich poskytnutým textom. Preto je to tiež efektívna metóda na odstránenie všetkých podriadených elementov daného elementu priradením prázdneho reťazca `''`.
+
+- Pomocou [`document.createElement()`](https://developer.mozilla.org/docs/Web/API/Document/createElement) spolu s metódou [`append()`](https://developer.mozilla.org/docs/Web/API/ParentNode/append) môžete vytvoriť a pripojiť jeden alebo viac nových podriadených elementov.
+
+✅ Použitím vlastnosti [`innerHTML`](https://developer.mozilla.org/docs/Web/API/Element/innerHTML) elementu je tiež možné zmeniť jeho HTML obsah, ale táto metóda by sa mala vyhnúť, pretože je zraniteľná voči [cross-site scripting (XSS)](https://developer.mozilla.org/docs/Glossary/Cross-site_scripting) útokom.
+
+### Úloha
+
+Predtým, než prejdeme na obrazovku dashboardu, je tu ešte jedna vec, ktorú by sme mali urobiť na stránke *login*. Momentálne, ak sa pokúsite prihlásiť s používateľským menom, ktoré neexistuje, správa sa zobrazí v konzole, ale pre bežného používateľa sa nič nezmení a neviete, čo sa deje.
+
+Pridajme element zástupcu vo formulári na prihlásenie, kde môžeme v prípade potreby zobraziť chybovú správu. Dobré miesto by bolo tesne pred tlačidlom `<button>` na prihlásenie:
+
+```html
+...
+<div id="loginError"></div>
+<button>Login</button>
+...
+```
+
+Tento `<div>` element je prázdny, čo znamená, že na obrazovke sa nič nezobrazí, kým do neho nepridáme nejaký obsah. Tiež mu priradíme `id`, aby sme ho mohli ľahko získať pomocou JavaScriptu.
+
+Vráťte sa do súboru `app.js` a vytvorte novú pomocnú funkciu `updateElement`:
+
+```js
+function updateElement(id, text) {
+  const element = document.getElementById(id);
+  element.textContent = text;
+}
+```
+
+Táto funkcia je pomerne jednoduchá: na základe *id* elementu a *textu* aktualizuje textový obsah DOM elementu s odpovedajúcim `id`. Použime túto metódu namiesto predchádzajúcej chybovej správy vo funkcii `login`:
+
+```js
+if (data.error) {
+  return updateElement('loginError', data.error);
+}
+```
+
+Teraz, ak sa pokúsite prihlásiť s neplatným účtom, mali by ste vidieť niečo takéto:
+
+![Snímka obrazovky zobrazujúca chybovú správu počas prihlásenia](../../../../translated_images/login-error.416fe019b36a63276764c2349df5d99e04ebda54fefe60c715ee87a28d5d4ad0.sk.png)
+
+Teraz máme chybový text, ktorý sa vizuálne zobrazí, ale ak to skúsite s čítačkou obrazovky, všimnete si, že nič nie je oznámené. Aby text, ktorý je dynamicky pridaný na stránku, bol oznámený čítačkami obrazovky, bude potrebné použiť niečo nazývané [Live Region](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/ARIA_Live_Regions). Tu použijeme špecifický typ live region nazývaný alert:
+
+```html
+<div id="loginError" role="alert"></div>
+```
+
+Implementujte rovnaké správanie pre chyby vo funkcii `register` (nezabudnite aktualizovať HTML).
+
+## Zobrazenie informácií na dashboarde
+
+Pomocou rovnakých techník, ktoré sme práve videli, sa postaráme o zobrazenie informácií o účte na stránke dashboardu.
+
+Takto vyzerá objekt účtu prijatý zo servera:
+
+```json
+{
+  "user": "test",
+  "currency": "$",
+  "description": "Test account",
+  "balance": 75,
+  "transactions": [
+    { "id": "1", "date": "2020-10-01", "object": "Pocket money", "amount": 50 },
+    { "id": "2", "date": "2020-10-03", "object": "Book", "amount": -10 },
+    { "id": "3", "date": "2020-10-04", "object": "Sandwich", "amount": -5 }
+  ],
+}
+```
+
+> Poznámka: aby ste si uľahčili prácu, môžete použiť predvytvorený účet `test`, ktorý už obsahuje dáta.
+
+### Úloha
+
+Začnime nahradením sekcie "Balance" v HTML, aby sme pridali zástupné elementy:
+
+```html
+<section>
+  Balance: <span id="balance"></span><span id="currency"></span>
+</section>
+```
+
+Pridáme tiež novú sekciu tesne pod ňu na zobrazenie popisu účtu:
+
+```html
+<h2 id="description"></h2>
+```
+
+✅ Keďže popis účtu funguje ako nadpis pre obsah pod ním, je označený semanticky ako nadpis. Zistite viac o tom, ako [štruktúra nadpisov](https://www.nomensa.com/blog/2017/how-structure-headings-web-accessibility) je dôležitá pre prístupnosť, a kriticky sa pozrite na stránku, aby ste určili, čo iné by mohlo byť nadpisom.
+
+Ďalej vytvoríme novú funkciu v `app.js`, ktorá vyplní zástupné elementy:
+
+```js
+function updateDashboard() {
+  if (!account) {
+    return navigate('/login');
+  }
+
+  updateElement('description', account.description);
+  updateElement('balance', account.balance.toFixed(2));
+  updateElement('currency', account.currency);
+}
+```
+
+Najprv skontrolujeme, či máme potrebné údaje o účte, predtým než budeme pokračovať. Potom použijeme funkciu `updateElement()`, ktorú sme vytvorili skôr, na aktualizáciu HTML.
+
+> Aby bol zobrazený zostatok krajší, používame metódu [`toFixed(2)`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed), aby sme vynútili zobrazenie hodnoty s 2 desatinnými miestami.
+
+Teraz musíme zavolať našu funkciu `updateDashboard()` vždy, keď sa načíta stránka dashboardu. Ak ste už dokončili [úlohu z lekcie 1](../1-template-route/assignment.md), toto by malo byť jednoduché, inak môžete použiť nasledujúcu implementáciu.
+
+Pridajte tento kód na koniec funkcie `updateRoute()`:
+
+```js
+if (typeof route.init === 'function') {
+  route.init();
+}
+```
+
+A aktualizujte definíciu trás s:
+
+```js
+const routes = {
+  '/login': { templateId: 'login' },
+  '/dashboard': { templateId: 'dashboard', init: updateDashboard }
+};
+```
+
+S touto zmenou sa funkcia `updateDashboard()` zavolá vždy, keď sa zobrazí stránka dashboardu. Po prihlásení by ste mali byť schopní vidieť zostatok účtu, menu a popis.
+
+## Dynamické vytváranie riadkov tabuľky pomocou HTML šablón
+
+V [prvej lekcii](../1-template-route/README.md) sme použili HTML šablóny spolu s metódou [`appendChild()`](https://developer.mozilla.org/docs/Web/API/Node/appendChild) na implementáciu navigácie v našej aplikácii. Šablóny môžu byť tiež menšie a používané na dynamické vyplnenie opakujúcich sa častí stránky.
+
+Použijeme podobný prístup na zobrazenie zoznamu transakcií v HTML tabuľke.
+
+### Úloha
+
+Pridajte novú šablónu do `<body>` HTML:
+
+```html
+<template id="transaction">
+  <tr>
+    <td></td>
+    <td></td>
+    <td></td>
+  </tr>
+</template>
+```
+
+Táto šablóna predstavuje jeden riadok tabuľky s 3 stĺpcami, ktoré chceme vyplniť: *dátum*, *objekt* a *suma* transakcie.
+
+Potom pridajte túto vlastnosť `id` do `<tbody>` elementu tabuľky v šablóne dashboardu, aby bolo jednoduchšie ho nájsť pomocou JavaScriptu:
+
+```html
+<tbody id="transactions"></tbody>
+```
+
+Naše HTML je pripravené, prejdime na JavaScript kód a vytvorme novú funkciu `createTransactionRow`:
+
+```js
+function createTransactionRow(transaction) {
+  const template = document.getElementById('transaction');
+  const transactionRow = template.content.cloneNode(true);
+  const tr = transactionRow.querySelector('tr');
+  tr.children[0].textContent = transaction.date;
+  tr.children[1].textContent = transaction.object;
+  tr.children[2].textContent = transaction.amount.toFixed(2);
+  return transactionRow;
+}
+```
+
+Táto funkcia robí presne to, čo naznačuje jej názov: pomocou šablóny, ktorú sme vytvorili skôr, vytvára nový riadok tabuľky a vyplní jeho obsah pomocou údajov o transakcii. Použijeme ju vo funkcii `updateDashboard()` na vyplnenie tabuľky:
+
+```js
+const transactionsRows = document.createDocumentFragment();
+for (const transaction of account.transactions) {
+  const transactionRow = createTransactionRow(transaction);
+  transactionsRows.appendChild(transactionRow);
+}
+updateElement('transactions', transactionsRows);
+```
+
+Tu používame metódu [`document.createDocumentFragment()`](https://developer.mozilla.org/docs/Web/API/Document/createDocumentFragment), ktorá vytvára nový DOM fragment, na ktorom môžeme pracovať, predtým než ho nakoniec pripojíme k našej HTML tabuľke.
+
+Ešte je tu jedna vec, ktorú musíme urobiť, aby tento kód fungoval, keďže naša funkcia `updateElement()` momentálne podporuje iba textový obsah. Zmeňme jej kód trochu:
+
+```js
+function updateElement(id, textOrNode) {
+  const element = document.getElementById(id);
+  element.textContent = ''; // Removes all children
+  element.append(textOrNode);
+}
+```
+
+Používame metódu [`append()`](https://developer.mozilla.org/docs/Web/API/ParentNode/append), pretože umožňuje pripojiť buď text alebo [DOM Nodes](https://developer.mozilla.org/docs/Web/API/Node) k nadradenému elementu, čo je ideálne pre všetky naše prípady použitia.
+Ak sa pokúsite prihlásiť pomocou účtu `test`, mali by ste teraz vidieť zoznam transakcií na hlavnom paneli 🎉.
+
+---
+
+## 🚀 Výzva
+
+Spolupracujte na tom, aby stránka hlavného panela vyzerala ako skutočná banková aplikácia. Ak ste už svoju aplikáciu naformátovali, skúste použiť [media queries](https://developer.mozilla.org/docs/Web/CSS/Media_Queries) na vytvorenie [responzívneho dizajnu](https://developer.mozilla.org/docs/Web/Progressive_web_apps/Responsive/responsive_design_building_blocks), ktorý bude dobre fungovať na stolných počítačoch aj mobilných zariadeniach.
+
+Tu je príklad naformátovanej stránky hlavného panela:
+
+![Snímka obrazovky s príkladom výsledku hlavného panela po naformátovaní](../../../../translated_images/screen2.123c82a831a1d14ab2061994be2fa5de9cec1ce651047217d326d4773a6348e4.sk.png)
+
+## Kvíz po prednáške
+
+[Kvíz po prednáške](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/46)
+
+## Zadanie
+
+[Refaktorujte a okomentujte svoj kód](assignment.md)
+
+---
+
+**Upozornenie**:  
+Tento dokument bol preložený pomocou služby AI prekladu [Co-op Translator](https://github.com/Azure/co-op-translator). Hoci sa snažíme o presnosť, prosím, berte na vedomie, že automatizované preklady môžu obsahovať chyby alebo nepresnosti. Pôvodný dokument v jeho pôvodnom jazyku by mal byť považovaný za autoritatívny zdroj. Pre kritické informácie sa odporúča profesionálny ľudský preklad. Nenesieme zodpovednosť za akékoľvek nedorozumenia alebo nesprávne interpretácie vyplývajúce z použitia tohto prekladu.
\ No newline at end of file
diff --git a/translations/sk/7-bank-project/3-data/assignment.md b/translations/sk/7-bank-project/3-data/assignment.md
new file mode 100644
index 00000000..647347df
--- /dev/null
+++ b/translations/sk/7-bank-project/3-data/assignment.md
@@ -0,0 +1,29 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "a4abf305ede1cfaadd56a8fab4b4c288",
+  "translation_date": "2025-08-27T22:03:11+00:00",
+  "source_file": "7-bank-project/3-data/assignment.md",
+  "language_code": "sk"
+}
+-->
+# Refaktorujte a komentujte svoj kód
+
+## Pokyny
+
+Ako vaša kódová základňa rastie, je dôležité pravidelne refaktorovať kód, aby zostal čitateľný a udržiavateľný v priebehu času. Pridajte komentáre a refaktorujte svoj `app.js`, aby ste zlepšili kvalitu kódu:
+
+- Extrahujte konštanty, ako napríklad základnú URL adresu API servera
+- Zoskupte podobný kód: napríklad môžete vytvoriť funkciu `sendRequest()`, ktorá zoskupí kód použitý v `createAccount()` a `getAccount()`
+- Preorganizujte kód, aby bol ľahšie čitateľný, a pridajte komentáre
+
+## Kritériá hodnotenia
+
+| Kritérium | Vynikajúce                                                                                                                                                     | Dostatočné                                                                                       | Potrebuje zlepšenie                                                                     |
+| --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------- |
+|           | Kód je okomentovaný, dobre organizovaný v rôznych sekciách a ľahko čitateľný. Konštanty sú extrahované a bola vytvorená zoskupená funkcia `sendRequest()`.      | Kód je čistý, ale stále by sa dal zlepšiť pridaním ďalších komentárov, extrakciou konštánt alebo zoskupením. | Kód je neprehľadný, neokomentovaný, konštanty nie sú extrahované a kód nie je zoskupený. |
+
+---
+
+**Upozornenie**:  
+Tento dokument bol preložený pomocou služby AI prekladu [Co-op Translator](https://github.com/Azure/co-op-translator). Aj keď sa snažíme o presnosť, prosím, berte na vedomie, že automatizované preklady môžu obsahovať chyby alebo nepresnosti. Pôvodný dokument v jeho pôvodnom jazyku by mal byť považovaný za autoritatívny zdroj. Pre kritické informácie sa odporúča profesionálny ľudský preklad. Nie sme zodpovední za akékoľvek nedorozumenia alebo nesprávne interpretácie vyplývajúce z použitia tohto prekladu.
\ No newline at end of file
diff --git a/translations/sk/7-bank-project/4-state-management/README.md b/translations/sk/7-bank-project/4-state-management/README.md
new file mode 100644
index 00000000..f9daaf95
--- /dev/null
+++ b/translations/sk/7-bank-project/4-state-management/README.md
@@ -0,0 +1,294 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "4fa20c513e367e9cdd401bf49ae16e33",
+  "translation_date": "2025-08-27T22:07:08+00:00",
+  "source_file": "7-bank-project/4-state-management/README.md",
+  "language_code": "sk"
+}
+-->
+# Vytvorenie bankovej aplikácie, časť 4: Koncepty správy stavu
+
+## Kvíz pred prednáškou
+
+[Kvíz pred prednáškou](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/47)
+
+### Úvod
+
+Ako webová aplikácia rastie, stáva sa čoraz náročnejšie sledovať všetky toky dát. Ktorý kód získava dáta, ktorá stránka ich používa, kde a kedy ich treba aktualizovať... je ľahké skončiť s neprehľadným kódom, ktorý je ťažké udržiavať. Toto je obzvlášť pravdivé, keď potrebujete zdieľať dáta medzi rôznymi stránkami aplikácie, napríklad údaje o používateľovi. Koncept *správy stavu* existoval vždy vo všetkých druhoch programov, ale ako webové aplikácie rastú na komplexnosti, stáva sa kľúčovým bodom, o ktorom treba premýšľať počas vývoja.
+
+V tejto poslednej časti sa pozrieme na aplikáciu, ktorú sme vytvorili, aby sme prehodnotili, ako je spravovaný stav, čo umožní podporu obnovenia prehliadača kedykoľvek a zachovanie dát medzi používateľskými reláciami.
+
+### Predpoklady
+
+Musíte mať dokončenú časť [získavania dát](../3-data/README.md) webovej aplikácie pre túto lekciu. Tiež musíte mať nainštalovaný [Node.js](https://nodejs.org) a [spustený server API](../api/README.md) lokálne, aby ste mohli spravovať údaje o účtoch.
+
+Môžete otestovať, či server beží správne, spustením tohto príkazu v termináli:
+
+```sh
+curl http://localhost:5000/api
+# -> should return "Bank API v1.0.0" as a result
+```
+
+---
+
+## Prehodnotenie správy stavu
+
+V [predchádzajúcej lekcii](../3-data/README.md) sme predstavili základný koncept stavu v našej aplikácii s globálnou premennou `account`, ktorá obsahuje bankové údaje aktuálne prihláseného používateľa. Naša aktuálna implementácia však má niekoľko nedostatkov. Skúste obnoviť stránku, keď ste na hlavnom paneli. Čo sa stane?
+
+Sú tu 3 problémy s aktuálnym kódom:
+
+- Stav nie je zachovaný, pretože obnovenie prehliadača vás vráti na prihlasovaciu stránku.
+- Existuje viacero funkcií, ktoré modifikujú stav. Ako aplikácia rastie, môže byť ťažké sledovať zmeny a ľahko sa zabudne na aktualizáciu jednej z nich.
+- Stav nie je vyčistený, takže keď kliknete na *Odhlásiť sa*, údaje o účte sú stále prítomné, aj keď ste na prihlasovacej stránke.
+
+Mohli by sme aktualizovať náš kód, aby sme tieto problémy riešili jeden po druhom, ale to by vytvorilo viac duplicity kódu a aplikácia by bola zložitejšia a ťažšie udržiavateľná. Alebo by sme sa mohli na chvíľu zastaviť a prehodnotiť našu stratégiu.
+
+> Aké problémy sa tu vlastne snažíme vyriešiť?
+
+[Správa stavu](https://en.wikipedia.org/wiki/State_management) je o nájdení dobrého prístupu na riešenie týchto dvoch konkrétnych problémov:
+
+- Ako udržať toky dát v aplikácii zrozumiteľné?
+- Ako udržať stavové dáta vždy synchronizované s používateľským rozhraním (a naopak)?
+
+Keď sa postaráte o tieto problémy, akékoľvek ďalšie problémy, ktoré by ste mohli mať, môžu byť už vyriešené alebo sa stali jednoduchšími na riešenie. Existuje mnoho možných prístupov na riešenie týchto problémov, ale my sa rozhodneme pre bežné riešenie, ktoré spočíva v **centralizácii dát a spôsobov ich zmeny**. Toky dát by vyzerali takto:
+
+![Schéma zobrazujúca toky dát medzi HTML, používateľskými akciami a stavom](../../../../translated_images/data-flow.fa2354e0908fecc89b488010dedf4871418a992edffa17e73441d257add18da4.sk.png)
+
+> Tu sa nebudeme zaoberať časťou, kde dáta automaticky spúšťajú aktualizáciu zobrazenia, pretože je to spojené s pokročilejšími konceptmi [Reaktívneho programovania](https://en.wikipedia.org/wiki/Reactive_programming). Je to dobrá téma na ďalšie štúdium, ak sa chcete ponoriť hlbšie.
+
+✅ Existuje veľa knižníc s rôznymi prístupmi k správe stavu, pričom [Redux](https://redux.js.org) je populárnou voľbou. Pozrite sa na koncepty a vzory, ktoré používa, pretože často poskytujú dobrý spôsob, ako sa naučiť, aké potenciálne problémy môžete čeliť vo veľkých webových aplikáciách a ako ich možno vyriešiť.
+
+### Úloha
+
+Začneme malou refaktorizáciou. Nahraďte deklaráciu `account`:
+
+```js
+let account = null;
+```
+
+Nasledujúcim:
+
+```js
+let state = {
+  account: null
+};
+```
+
+Myšlienkou je *centralizovať* všetky dáta našej aplikácie do jedného objektu stavu. Zatiaľ máme v stave iba `account`, takže sa veľa nemení, ale vytvára to cestu pre ďalšie rozšírenia.
+
+Musíme tiež aktualizovať funkcie, ktoré ho používajú. Vo funkciách `register()` a `login()` nahraďte `account = ...` za `state.account = ...`;
+
+Na začiatok funkcie `updateDashboard()` pridajte tento riadok:
+
+```js
+const account = state.account;
+```
+
+Táto refaktorizácia sama o sebe nepriniesla veľa zlepšení, ale myšlienkou bolo položiť základy pre ďalšie zmeny.
+
+## Sledovanie zmien dát
+
+Teraz, keď sme zaviedli objekt `state` na ukladanie našich dát, ďalším krokom je centralizácia aktualizácií. Cieľom je uľahčiť sledovanie akýchkoľvek zmien a kedy k nim dochádza.
+
+Aby sme sa vyhli zmenám objektu `state`, je tiež dobrým zvykom považovať ho za [*nemenný*](https://en.wikipedia.org/wiki/Immutable_object), čo znamená, že ho nemožno vôbec modifikovať. To tiež znamená, že musíte vytvoriť nový objekt stavu, ak chcete niečo zmeniť. Týmto spôsobom si vytvoríte ochranu pred potenciálne nežiaducimi [vedľajšími účinkami](https://en.wikipedia.org/wiki/Side_effect_(computer_science)) a otvoríte možnosti pre nové funkcie vo vašej aplikácii, ako je implementácia funkcií späť/znovu, pričom zároveň uľahčíte ladenie. Napríklad by ste mohli zaznamenávať každú zmenu stavu a uchovávať históriu zmien, aby ste pochopili zdroj chyby.
+
+V JavaScripte môžete použiť [`Object.freeze()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze) na vytvorenie nemennej verzie objektu. Ak sa pokúsite vykonať zmeny na nemennom objekte, vyvolá sa výnimka.
+
+✅ Viete, aký je rozdiel medzi *povrchovo* a *hlboko* nemenným objektom? Môžete si o tom prečítať [tu](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze#What_is_shallow_freeze).
+
+### Úloha
+
+Vytvorme novú funkciu `updateState()`:
+
+```js
+function updateState(property, newData) {
+  state = Object.freeze({
+    ...state,
+    [property]: newData
+  });
+}
+```
+
+V tejto funkcii vytvárame nový objekt stavu a kopírujeme dáta z predchádzajúceho stavu pomocou [*spread operátora (`...`)*](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/Spread_syntax#Spread_in_object_literals). Potom prepíšeme konkrétnu vlastnosť objektu stavu novými dátami pomocou [zátvorkovej notácie](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Working_with_Objects#Objects_and_properties) `[property]` pre priradenie. Nakoniec objekt uzamkneme, aby sme zabránili modifikáciám pomocou `Object.freeze()`. Zatiaľ máme v stave uloženú iba vlastnosť `account`, ale s týmto prístupom môžete do stavu pridať toľko vlastností, koľko potrebujete.
+
+Tiež aktualizujeme inicializáciu `state`, aby sme sa uistili, že počiatočný stav je tiež zmrazený:
+
+```js
+let state = Object.freeze({
+  account: null
+});
+```
+
+Potom aktualizujte funkciu `register` nahradením priradenia `state.account = result;` za:
+
+```js
+updateState('account', result);
+```
+
+Urobte to isté s funkciou `login`, nahraďte `state.account = data;` za:
+
+```js
+updateState('account', data);
+```
+
+Teraz využijeme príležitosť na opravu problému, že údaje o účte nie sú vymazané, keď používateľ klikne na *Odhlásiť sa*.
+
+Vytvorte novú funkciu `logout()`:
+
+```js
+function logout() {
+  updateState('account', null);
+  navigate('/login');
+}
+```
+
+V `updateDashboard()` nahraďte presmerovanie `return navigate('/login');` za `return logout();`;
+
+Skúste zaregistrovať nový účet, odhlásiť sa a znova sa prihlásiť, aby ste overili, že všetko stále funguje správne.
+
+> Tip: môžete si pozrieť všetky zmeny stavu pridaním `console.log(state)` na koniec `updateState()` a otvorením konzoly vo vývojárskych nástrojoch vášho prehliadača.
+
+## Zachovanie stavu
+
+Väčšina webových aplikácií potrebuje zachovať dáta, aby mohla správne fungovať. Všetky kritické dáta sú zvyčajne uložené v databáze a prístupné cez server API, ako napríklad údaje o používateľskom účte v našom prípade. Niekedy je však zaujímavé zachovať niektoré dáta na strane klienta, ktorý beží vo vašom prehliadači, pre lepší používateľský zážitok alebo na zlepšenie výkonu načítania.
+
+Keď chcete zachovať dáta vo vašom prehliadači, mali by ste si položiť niekoľko dôležitých otázok:
+
+- *Sú dáta citlivé?* Mali by ste sa vyhnúť ukladaniu akýchkoľvek citlivých dát na strane klienta, ako sú heslá používateľov.
+- *Ako dlho potrebujete tieto dáta uchovávať?* Plánujete k týmto dátam pristupovať iba počas aktuálnej relácie alebo ich chcete uchovávať navždy?
+
+Existuje viacero spôsobov, ako ukladať informácie vo webovej aplikácii, v závislosti od toho, čo chcete dosiahnuť. Napríklad môžete použiť URL na uloženie vyhľadávacieho dotazu a sprístupniť ho na zdieľanie medzi používateľmi. Môžete tiež použiť [HTTP cookies](https://developer.mozilla.org/docs/Web/HTTP/Cookies), ak je potrebné dáta zdieľať so serverom, ako napríklad informácie o [autentifikácii](https://en.wikipedia.org/wiki/Authentication).
+
+Ďalšou možnosťou je použiť jednu z mnohých API prehliadača na ukladanie dát. Dve z nich sú obzvlášť zaujímavé:
+
+- [`localStorage`](https://developer.mozilla.org/docs/Web/API/Window/localStorage): [Key/Value úložisko](https://en.wikipedia.org/wiki/Key%E2%80%93value_database), ktoré umožňuje zachovať dáta špecifické pre aktuálnu webovú stránku medzi rôznymi reláciami. Dáta uložené v ňom nikdy nevypršia.
+- [`sessionStorage`](https://developer.mozilla.org/docs/Web/API/Window/sessionStorage): funguje rovnako ako `localStorage`, okrem toho, že dáta uložené v ňom sú vymazané, keď relácia skončí (keď sa prehliadač zatvorí).
+
+Všimnite si, že obe tieto API umožňujú ukladať iba [reťazce](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String). Ak chcete ukladať zložité objekty, budete ich musieť serializovať do formátu [JSON](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON) pomocou [`JSON.stringify()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify).
+
+✅ Ak chcete vytvoriť webovú aplikáciu, ktorá nepracuje so serverom, je tiež možné vytvoriť databázu na strane klienta pomocou [`IndexedDB` API](https://developer.mozilla.org/docs/Web/API/IndexedDB_API). Táto možnosť je vyhradená pre pokročilé prípady použitia alebo ak potrebujete uložiť významné množstvo dát, pretože je zložitejšia na použitie.
+
+### Úloha
+
+Chceme, aby naši používatelia zostali prihlásení, kým výslovne nekliknú na tlačidlo *Odhlásiť sa*, takže použijeme `localStorage` na uloženie údajov o účte. Najprv definujme kľúč, ktorý použijeme na uloženie našich dát.
+
+```js
+const storageKey = 'savedAccount';
+```
+
+Potom pridajte tento riadok na koniec funkcie `updateState()`:
+
+```js
+localStorage.setItem(storageKey, JSON.stringify(state.account));
+```
+
+Týmto spôsobom budú údaje o používateľskom účte zachované a vždy aktuálne, pretože sme predtým centralizovali všetky aktualizácie stavu. Tu začíname ťažiť zo všetkých našich predchádzajúcich refaktorov 🙂.
+
+Keďže sú dáta uložené, musíme sa tiež postarať o ich obnovenie, keď sa aplikácia načíta. Keďže začneme mať viac inicializačného kódu, môže byť dobrý nápad vytvoriť novú funkciu `init`, ktorá zahŕňa aj náš predchádzajúci kód na konci `app.js`:
+
+```js
+function init() {
+  const savedAccount = localStorage.getItem(storageKey);
+  if (savedAccount) {
+    updateState('account', JSON.parse(savedAccount));
+  }
+
+  // Our previous initialization code
+  window.onpopstate = () => updateRoute();
+  updateRoute();
+}
+
+init();
+```
+
+Tu načítame uložené dáta a ak nejaké existujú, aktualizujeme stav podľa nich. Je dôležité to urobiť *pred* aktualizáciou trasy, pretože môže existovať kód, ktorý sa spolieha na stav počas aktualizácie stránky.
+
+Môžeme tiež urobiť stránku *Dashboard* predvolenou stránkou našej aplikácie, pretože teraz zachovávame údaje o účte. Ak sa nenájdu žiadne dáta, hlavný panel sa postará o presmerovanie na stránku *Login*. V `updateRoute()` nahraďte záložné `return navigate('/login');` za `return navigate('/dashboard');`.
+
+Teraz sa prihláste do aplikácie a skúste obnoviť stránku. Mali by ste zostať na hlavnom paneli. S touto aktualizáciou sme sa postarali o všetky naše počiatočné problémy...
+
+## Obnovenie dát
+
+...Ale mohli sme tiež vytvoriť nový problém. Ups!
+
+Prejdite na hlavný panel pomocou účtu `test`, potom spustite tento príkaz v termináli na vytvorenie novej transakcie:
+
+```sh
+curl --request POST \
+     --header "Content-Type: application/json" \
+     --data "{ \"date\": \"2020-07-24\", \"object\": \"Bought book\", \"amount\": -20 }" \
+     http://localhost:5000/api/accounts/test/transactions
+```
+
+Skúste obnoviť stránku hlavného panela v prehliadači. Čo sa stane? Vidíte novú transakciu?
+
+Stav je zachovaný na neurčito vďaka `localStorage`, ale to tiež znamená, že sa nikdy neaktualizuje, kým sa neodhlásite z aplikácie a znova sa neprihlásite!
+
+Jednou z možných stratégií na opravu tohto problému je načítať údaje o účte zakaždým, keď sa načíta hlavný panel, aby sa predišlo zastaraným dátam.
+
+### Úloha
+
+Vytvorte novú funkciu `updateAccountData`:
+
+```js
+async function updateAccountData() {
+  const account = state.account;
+  if (!account) {
+    return logout();
+  }
+
+  const data = await getAccount(account.user);
+  if (data.error) {
+    return logout();
+  }
+
+  updateState('account', data);
+}
+```
+
+Táto metóda kontroluje, či sme aktuálne prihlásení, a potom načíta údaje o účte zo servera.
+
+Vytvorte ďalšiu funkciu s názvom `refresh`:
+
+```js
+async function refresh() {
+  await updateAccountData();
+  updateDashboard();
+}
+```
+
+Táto funkcia aktualizuje údaje o účte a potom sa postará o aktualizáciu HTML hlavného panela. To je to, čo potrebujeme zavolať, keď sa načíta trasa hlavného panela. Aktualizujte definíciu trasy:
+
+```js
+const routes = {
+  '/login': { templateId: 'login' },
+  '/dashboard': { templateId: 'dashboard', init: refresh }
+};
+```
+
+Skúste teraz obnoviť hlavný panel, mal by zobrazovať aktualizované údaje o účte.
+
+---
+
+## 🚀 Výzva
+
+Teraz, keď zakaždým, keď sa načíta hlavný panel, načítame údaje o účte, myslíte si, že stále potrebujeme zachovať *všetky údaje o účte*?
+
+Skúste spolupracovať na zmene toho, čo sa ukladá a načítava z `localStorage`, aby obsahovalo iba to, čo je absolútne potrebné na fungovanie aplikácie.
+
+## Kvíz po prednáške
+[Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/48)
+
+## Úloha
+
+[Implementovať dialóg "Pridať transakciu"](assignment.md)
+
+Tu je príklad výsledku po dokončení úlohy:
+
+![Snímka obrazovky zobrazujúca príklad dialógu "Pridať transakciu"](../../../../translated_images/dialog.93bba104afeb79f12f65ebf8f521c5d64e179c40b791c49c242cf15f7e7fab15.sk.png)
+
+---
+
+**Upozornenie**:  
+Tento dokument bol preložený pomocou služby AI prekladu [Co-op Translator](https://github.com/Azure/co-op-translator). Hoci sa snažíme o presnosť, prosím, berte na vedomie, že automatizované preklady môžu obsahovať chyby alebo nepresnosti. Pôvodný dokument v jeho rodnom jazyku by mal byť považovaný za autoritatívny zdroj. Pre kritické informácie sa odporúča profesionálny ľudský preklad. Nie sme zodpovední za akékoľvek nedorozumenia alebo nesprávne interpretácie vyplývajúce z použitia tohto prekladu.
\ No newline at end of file
diff --git a/translations/sk/7-bank-project/4-state-management/assignment.md b/translations/sk/7-bank-project/4-state-management/assignment.md
new file mode 100644
index 00000000..176c1455
--- /dev/null
+++ b/translations/sk/7-bank-project/4-state-management/assignment.md
@@ -0,0 +1,39 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "f23a868536c07da991b1d4e773161e25",
+  "translation_date": "2025-08-27T22:09:25+00:00",
+  "source_file": "7-bank-project/4-state-management/assignment.md",
+  "language_code": "sk"
+}
+-->
+# Implementácia dialógu "Pridať transakciu"
+
+## Inštrukcie
+
+Naša banková aplikácia stále chýba jedna dôležitá funkcia: možnosť zadávať nové transakcie. 
+Pomocou všetkého, čo ste sa naučili v predchádzajúcich štyroch lekciách, implementujte dialóg "Pridať transakciu":
+
+- Pridajte tlačidlo "Pridať transakciu" na stránku dashboardu
+- Buď vytvorte novú stránku s HTML šablónou, alebo použite JavaScript na zobrazenie/skrytie HTML dialógu bez opustenia stránky dashboardu (môžete použiť vlastnosť [`hidden`](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/hidden) alebo CSS triedy)
+- Uistite sa, že riešite [prístupnosť pre klávesnicu a čítačky obrazovky](https://developer.paciellogroup.com/blog/2018/06/the-current-state-of-modal-dialog-accessibility/) pre dialóg
+- Implementujte HTML formulár na prijímanie vstupných údajov
+- Vytvorte JSON dáta z údajov formulára a odošlite ich na API
+- Aktualizujte stránku dashboardu s novými údajmi
+
+Pozrite si [špecifikácie serverového API](../api/README.md), aby ste zistili, ktoré API je potrebné zavolať a aký je očakávaný formát JSON.
+
+Tu je príklad výsledku po dokončení úlohy:
+
+![Snímka obrazovky zobrazujúca príklad dialógu "Pridať transakciu"](../../../../translated_images/dialog.93bba104afeb79f12f65ebf8f521c5d64e179c40b791c49c242cf15f7e7fab15.sk.png)
+
+## Hodnotiace kritériá
+
+| Kritérium | Vynikajúce                                                                                       | Dostatočné                                                                                                             | Potrebuje zlepšenie                          |
+| --------- | ------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- |
+|           | Pridanie transakcie je implementované úplne podľa všetkých najlepších praktík z lekcií.          | Pridanie transakcie je implementované, ale nie podľa najlepších praktík z lekcií, alebo funguje len čiastočne.         | Pridanie transakcie vôbec nefunguje.         |
+
+---
+
+**Upozornenie**:  
+Tento dokument bol preložený pomocou služby AI prekladu [Co-op Translator](https://github.com/Azure/co-op-translator). Hoci sa snažíme o presnosť, prosím, berte na vedomie, že automatizované preklady môžu obsahovať chyby alebo nepresnosti. Pôvodný dokument v jeho pôvodnom jazyku by mal byť považovaný za autoritatívny zdroj. Pre kritické informácie sa odporúča profesionálny ľudský preklad. Nie sme zodpovední za akékoľvek nedorozumenia alebo nesprávne interpretácie vyplývajúce z použitia tohto prekladu.
\ No newline at end of file
diff --git a/translations/sk/7-bank-project/README.md b/translations/sk/7-bank-project/README.md
new file mode 100644
index 00000000..6eb4257f
--- /dev/null
+++ b/translations/sk/7-bank-project/README.md
@@ -0,0 +1,35 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "830359535306594b448db6575ce5cdee",
+  "translation_date": "2025-08-27T22:00:08+00:00",
+  "source_file": "7-bank-project/README.md",
+  "language_code": "sk"
+}
+-->
+# :dollar: Vytvorte Banku
+
+V tomto projekte sa naučíte, ako vytvoriť fiktívnu banku. Tieto lekcie obsahujú pokyny, ako navrhnúť webovú aplikáciu a poskytnúť trasy, vytvoriť formuláre, spravovať stav a získavať údaje z API, z ktorého môžete načítať údaje banky.
+
+| ![Screen1](../../../translated_images/screen1.baccbba0f1f93364672eb250d2fbd21574bb1caf79a2155022dc098a741cbdfe.sk.png) | ![Screen2](../../../translated_images/screen2.123c82a831a1d14ab2061994be2fa5de9cec1ce651047217d326d4773a6348e4.sk.png) |
+|--------------------------------|--------------------------------|
+
+## Lekcie
+
+1. [HTML šablóny a trasy vo webovej aplikácii](1-template-route/README.md)
+2. [Vytvorenie prihlasovacieho a registračného formulára](2-forms/README.md)
+3. [Metódy získavania a používania údajov](3-data/README.md)
+4. [Koncepty správy stavu](4-state-management/README.md)
+
+### Kredity
+
+Tieto lekcie boli napísané s :hearts: od [Yohan Lasorsa](https://twitter.com/sinedied).
+
+Ak máte záujem naučiť sa, ako vytvoriť [serverové API](/7-bank-project/api/README.md) použité v týchto lekciách, môžete sledovať [túto sériu videí](https://aka.ms/NodeBeginner) (najmä videá 17 až 21).
+
+Môžete si tiež pozrieť [tento interaktívny návod na Learn](https://aka.ms/learn/express-api).
+
+---
+
+**Upozornenie**:  
+Tento dokument bol preložený pomocou služby AI prekladu [Co-op Translator](https://github.com/Azure/co-op-translator). Hoci sa snažíme o presnosť, prosím, berte na vedomie, že automatizované preklady môžu obsahovať chyby alebo nepresnosti. Pôvodný dokument v jeho pôvodnom jazyku by mal byť považovaný za autoritatívny zdroj. Pre kritické informácie sa odporúča profesionálny ľudský preklad. Nie sme zodpovední za akékoľvek nedorozumenia alebo nesprávne interpretácie vyplývajúce z použitia tohto prekladu.
\ No newline at end of file
diff --git a/translations/sk/7-bank-project/api/README.md b/translations/sk/7-bank-project/api/README.md
new file mode 100644
index 00000000..98ada2fe
--- /dev/null
+++ b/translations/sk/7-bank-project/api/README.md
@@ -0,0 +1,48 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "9884f8c8a61cf56214450f8b16a094ce",
+  "translation_date": "2025-08-27T22:03:35+00:00",
+  "source_file": "7-bank-project/api/README.md",
+  "language_code": "sk"
+}
+-->
+# Bank API
+
+> Bank API vytvorená pomocou [Node.js](https://nodejs.org) + [Express](https://expressjs.com/).
+
+API je už pre vás pripravené a nie je súčasťou cvičenia.
+
+Ak sa však chcete naučiť, ako vytvoriť podobné API, môžete si pozrieť túto sériu videí: https://aka.ms/NodeBeginner (videá 17 až 21 pokrývajú presne toto API).
+
+Môžete si tiež pozrieť tento interaktívny tutoriál: https://aka.ms/learn/express-api
+
+## Spustenie servera
+
+Uistite sa, že máte nainštalovaný [Node.js](https://nodejs.org).
+
+1. Git clone tohto repozitára [The Web-Dev-For-Beginners](https://github.com/microsoft/Web-Dev-For-Beginners).
+2. Otvorte svoj terminál a prejdite do priečinka `Web-Dev-For-Beginners/7-bank-project/api`.
+2. Spustite `npm install` a počkajte, kým sa balíčky nainštalujú (môže to chvíľu trvať v závislosti od kvality vášho internetového pripojenia).
+3. Po dokončení inštalácie spustite `npm start` a môžete začať.
+
+Server by mal začať počúvať na porte `5000`.
+*Tento server bude bežať spolu s hlavným serverom bankovej aplikácie (počúvajúcim na porte `3000`), nezatvárajte ho.*
+
+> Poznámka: všetky záznamy sú uložené v pamäti a nie sú perzistentné, takže po zastavení servera sa všetky údaje stratia.
+
+## Detaily API
+
+Route                                        | Popis
+---------------------------------------------|------------------------------------
+GET    /api/                                 | Získajte informácie o serveri
+POST   /api/accounts/                        | Vytvorte účet, napr.: `{ user: 'Yohan', description: 'Môj rozpočet', currency: 'EUR', balance: 100 }`
+GET    /api/accounts/:user                   | Získajte všetky údaje pre špecifikovaný účet
+DELETE /api/accounts/:user                   | Odstráňte špecifikovaný účet
+POST   /api/accounts/:user/transactions      | Pridajte transakciu, napr.: `{ date: '2020-07-23T18:25:43.511Z', object: 'Kúpil som knihu', amount: -20 }`
+DELETE  /api/accounts/:user/transactions/:id | Odstráňte špecifikovanú transakciu
+
+---
+
+**Upozornenie**:  
+Tento dokument bol preložený pomocou služby AI prekladu [Co-op Translator](https://github.com/Azure/co-op-translator). Aj keď sa snažíme o presnosť, prosím, berte na vedomie, že automatizované preklady môžu obsahovať chyby alebo nepresnosti. Pôvodný dokument v jeho pôvodnom jazyku by mal byť považovaný za autoritatívny zdroj. Pre kritické informácie sa odporúča profesionálny ľudský preklad. Nie sme zodpovední za akékoľvek nedorozumenia alebo nesprávne interpretácie vyplývajúce z použitia tohto prekladu.
\ No newline at end of file
diff --git a/translations/sk/7-bank-project/solution/README.md b/translations/sk/7-bank-project/solution/README.md
new file mode 100644
index 00000000..73ce218e
--- /dev/null
+++ b/translations/sk/7-bank-project/solution/README.md
@@ -0,0 +1,27 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "461aa4fc74c6b1789c3a13b5d82c0cd9",
+  "translation_date": "2025-08-27T22:04:03+00:00",
+  "source_file": "7-bank-project/solution/README.md",
+  "language_code": "sk"
+}
+-->
+# Banková aplikácia
+
+> Príklad riešenia projektu bankovej aplikácie, vytvorený pomocou čistého HTML5, CSS a JavaScriptu (bez použitia frameworkov alebo knižníc).
+
+## Spustenie aplikácie
+
+Najprv sa uistite, že máte spustený [API server](../api/README.md).
+
+Na spustenie aplikácie môžete použiť akýkoľvek webový server, ale keďže by ste mali mať nainštalovaný [Node.js](https://nodejs.org) na spustenie API, môžete:
+
+1. Naklonovať tento repozitár pomocou Git.
+2. Otvoriť terminál, prejsť do tohto adresára a spustiť `npx lite-server .`. Tým sa spustí vývojový webový server na porte `3000`.
+3. Otvoriť `http://localhost:3000` v prehliadači na spustenie aplikácie.
+
+---
+
+**Upozornenie**:  
+Tento dokument bol preložený pomocou služby AI prekladu [Co-op Translator](https://github.com/Azure/co-op-translator). Aj keď sa snažíme o presnosť, prosím, berte na vedomie, že automatizované preklady môžu obsahovať chyby alebo nepresnosti. Pôvodný dokument v jeho pôvodnom jazyku by mal byť považovaný za autoritatívny zdroj. Pre kritické informácie sa odporúča profesionálny ľudský preklad. Nie sme zodpovední za akékoľvek nedorozumenia alebo nesprávne interpretácie vyplývajúce z použitia tohto prekladu.
\ No newline at end of file
diff --git a/translations/sk/8-code-editor/1-using-a-code-editor/README.md b/translations/sk/8-code-editor/1-using-a-code-editor/README.md
new file mode 100644
index 00000000..d0644b67
--- /dev/null
+++ b/translations/sk/8-code-editor/1-using-a-code-editor/README.md
@@ -0,0 +1,158 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "7aa6e4f270d38d9cb17f2b5bd86b863d",
+  "translation_date": "2025-08-27T22:52:20+00:00",
+  "source_file": "8-code-editor/1-using-a-code-editor/README.md",
+  "language_code": "sk"
+}
+-->
+# Používanie editora kódu
+
+Táto lekcia pokrýva základy používania [VSCode.dev](https://vscode.dev), webového editora kódu, aby ste mohli upravovať svoj kód a prispievať do projektu bez nutnosti inštalácie čohokoľvek na vašom počítači.
+
+## Ciele učenia
+
+V tejto lekcii sa naučíte:
+
+- Používať editor kódu v projekte
+- Sledovať zmeny pomocou verzionovacieho systému
+- Prispôsobiť editor pre vývoj
+
+### Predpoklady
+
+Predtým, než začnete, budete si musieť vytvoriť účet na [GitHub](https://github.com). Prejdite na [GitHub](https://github.com/) a vytvorte si účet, ak ho ešte nemáte.
+
+### Úvod
+
+Editor kódu je nevyhnutný nástroj na písanie programov a spoluprácu na existujúcich projektoch. Keď pochopíte základy editora a naučíte sa využívať jeho funkcie, budete ich vedieť aplikovať pri písaní kódu.
+
+## Začíname s VSCode.dev
+
+[VSCode.dev](https://vscode.dev) je editor kódu na webe. Na jeho používanie nemusíte nič inštalovať, stačí ho otvoriť ako akúkoľvek inú webovú stránku. Na začiatok otvorte nasledujúci odkaz: [https://vscode.dev](https://vscode.dev). Ak nie ste prihlásení do [GitHub](https://github.com/), postupujte podľa pokynov na prihlásenie alebo vytvorenie nového účtu a potom sa prihláste.
+
+Po načítaní by mal editor vyzerať podobne ako na tomto obrázku:
+
+![Default VSCode.dev](../../../../translated_images/default-vscode-dev.5d06881d65c1b3234ce50cd9ed3b0028e6031ad5f5b441bcbed96bfa6311f6d0.sk.png)
+
+Existujú tri hlavné sekcie, odľava doprava:
+
+1. _Panel aktivít_, ktorý obsahuje niekoľko ikon, ako lupa 🔎, ozubené koleso ⚙️ a ďalšie.
+2. Rozšírený panel aktivít, ktorý predvolene zobrazuje _Prieskumníka_, nazývaný _bočný panel_.
+3. Nakoniec oblasť kódu napravo.
+
+Kliknite na každú z ikon, aby ste zobrazili rôzne menu. Po dokončení kliknite na _Prieskumníka_, aby ste sa vrátili tam, kde ste začali.
+
+Keď začnete vytvárať kód alebo upravovať existujúci kód, bude sa to diať v najväčšej oblasti napravo. Túto oblasť budete používať aj na vizualizáciu existujúceho kódu, čo si vyskúšate ďalej.
+
+## Otvorenie GitHub repozitára
+
+Prvá vec, ktorú budete potrebovať, je otvoriť GitHub repozitár. Existuje niekoľko spôsobov, ako otvoriť repozitár. V tejto sekcii uvidíte dva rôzne spôsoby, ako môžete otvoriť repozitár a začať pracovať na zmenách.
+
+### 1. Pomocou editora
+
+Použite samotný editor na otvorenie vzdialeného repozitára. Ak prejdete na [VSCode.dev](https://vscode.dev), uvidíte tlačidlo _"Open Remote Repository"_:
+
+![Open remote repository](../../../../translated_images/open-remote-repository.bd9c2598b8949e7fc283cdfc8f4050c6205a7c7c6d3f78c4b135115d037d6fa2.sk.png)
+
+Môžete tiež použiť príkazovú paletu. Príkazová paleta je vstupné pole, kde môžete napísať akékoľvek slovo, ktoré je súčasťou príkazu alebo akcie, aby ste našli správny príkaz na vykonanie. Použite menu v ľavom hornom rohu, potom vyberte _View_ a následne _Command Palette_, alebo použite nasledujúcu klávesovú skratku: Ctrl-Shift-P (na MacOS Command-Shift-P).
+
+![Palette Menu](../../../../translated_images/palette-menu.4946174e07f426226afcdad707d19b8d5150e41591c751c45b5dee213affef91.sk.png)
+
+Keď sa menu otvorí, napíšte _open remote repository_ a potom vyberte prvú možnosť. Zobrazia sa viaceré repozitáre, ktorých ste súčasťou alebo ktoré ste nedávno otvorili. Môžete tiež použiť úplnú URL adresu GitHubu na výber jedného. Použite nasledujúcu URL adresu a vložte ju do poľa:
+
+```
+https://github.com/microsoft/Web-Dev-For-Beginners
+```
+
+✅ Ak ste úspešní, všetky súbory tohto repozitára sa načítajú v textovom editore.
+
+### 2. Použitím URL adresy
+
+Môžete tiež použiť URL adresu na načítanie repozitára. Napríklad úplná URL adresa aktuálneho repozitára je [https://github.com/microsoft/Web-Dev-For-Beginners](https://github.com/microsoft/Web-Dev-For-Beginners), ale môžete nahradiť doménu GitHub za `VSCode.dev/github` a načítať repozitár priamo. Výsledná URL adresa by bola [https://vscode.dev/github/microsoft/Web-Dev-For-Beginners](https://vscode.dev/github/microsoft/Web-Dev-For-Beginners).
+
+## Úprava súborov
+
+Keď ste otvorili repozitár v prehliadači/vscode.dev, ďalším krokom bude vykonanie aktualizácií alebo zmien v projekte.
+
+### 1. Vytvorenie nového súboru
+
+Môžete buď vytvoriť súbor v existujúcom priečinku, alebo ho vytvoriť v koreňovom adresári/priečinku. Na vytvorenie nového súboru otvorte umiestnenie/adresár, do ktorého chcete súbor uložiť, a vyberte ikonu _'New file ...'_ na paneli aktivít _(vľavo)_, zadajte názov a stlačte Enter.
+
+![Create a new file](../../../../translated_images/create-new-file.2814e609c2af9aeb6c6fd53156c503ac91c3d538f9cac63073b2dd4a7631f183.sk.png)
+
+### 2. Úprava a uloženie súboru v repozitári
+
+Používanie vscode.dev je užitočné, kedykoľvek chcete rýchlo aktualizovať svoj projekt bez nutnosti načítania akéhokoľvek softvéru lokálne. 
+
+Na aktualizáciu kódu kliknite na ikonu 'Prieskumník', ktorá sa tiež nachádza na paneli aktivít, aby ste zobrazili súbory a priečinky v repozitári. Vyberte súbor, aby ste ho otvorili v oblasti kódu, vykonajte zmeny a uložte.
+
+![Edit a file](../../../../translated_images/edit-a-file.52c0ee665ef19f08119d62d63f395dfefddc0a4deb9268d73bfe791f52c5807a.sk.png)
+
+Keď dokončíte aktualizáciu projektu, vyberte ikonu _`source control`_, ktorá obsahuje všetky nové zmeny, ktoré ste vykonali vo svojom repozitári.
+
+Na zobrazenie zmien, ktoré ste vykonali vo svojom projekte, vyberte súbor(y) v priečinku `Changes` na rozšírenom paneli aktivít. Tým sa otvorí 'Working Tree', kde vizuálne uvidíte zmeny, ktoré ste vykonali v súbore. Červená označuje vynechanie projektu, zatiaľ čo zelená znamená pridanie.
+
+![View changes](../../../../translated_images/working-tree.c58eec08e6335c79cc708c0c220c0b7fea61514bd3c7fb7471905a864aceac7c.sk.png)
+
+Ak ste spokojní so zmenami, ktoré ste vykonali, prejdite na priečinok `Changes` a kliknite na tlačidlo `+`, aby ste zmeny pripravili na commit. Príprava znamená pripravenie zmien na ich odoslanie do GitHubu.
+
+Ak však nie ste spokojní s niektorými zmenami a chcete ich zrušiť, prejdite na priečinok `Changes` a vyberte ikonu `undo`.
+
+Potom zadajte `commit message` _(popis zmien, ktoré ste vykonali v projekte)_, kliknite na ikonu `check`, aby ste commitovali a odoslali zmeny.
+
+Keď skončíte s prácou na projekte, vyberte ikonu `hamburger menu` v ľavom hornom rohu, aby ste sa vrátili do repozitára na github.com.
+
+![Stage & commit changes](../../../../8-code-editor/images/edit-vscode.dev.gif)
+
+## Používanie rozšírení
+
+Inštalácia rozšírení vo VSCode vám umožňuje pridávať nové funkcie a možnosti prispôsobenia vývojového prostredia vo vašom editore, aby ste zlepšili svoj pracovný tok. Tieto rozšírenia tiež pomáhajú pridávať podporu pre rôzne programovacie jazyky a často sú buď všeobecné rozšírenia alebo jazykovo orientované rozšírenia.
+
+Na prehliadanie zoznamu všetkých dostupných rozšírení kliknite na ikonu _`Extensions`_ na paneli aktivít a začnite písať názov rozšírenia do textového poľa označeného _'Search Extensions in Marketplace'_.
+Uvidíte zoznam rozšírení, z ktorých každé obsahuje **názov rozšírenia, meno vydavateľa, jedno vetové popis, počet stiahnutí** a **hviezdičkové hodnotenie**.
+
+![Extension details](../../../../translated_images/extension-details.9f8f1fd4e9eb2de5069ae413119eb8ee43172776383ebe2f7cf640e11df2e106.sk.png)
+
+Môžete tiež zobraziť všetky predtým nainštalované rozšírenia rozbalením priečinka _`Installed`_, populárne rozšírenia používané väčšinou vývojárov v priečinku _`Popular`_ a odporúčané rozšírenia pre vás buď od používateľov v rovnakom pracovnom priestore alebo na základe vašich nedávno otvorených súborov v priečinku _`Recommended`_.
+
+![View extensions](../../../../translated_images/extensions.eca0e0c7f59a10b5c88be7fe24b3e32cca6b6058b35a49026c3a9d80b1813b7c.sk.png)
+
+### 1. Inštalácia rozšírení
+
+Na inštaláciu rozšírenia zadajte názov rozšírenia do vyhľadávacieho poľa a kliknite naň, aby ste zobrazili ďalšie informácie o rozšírení v oblasti kódu, keď sa objaví na rozšírenom paneli aktivít.
+
+Môžete buď kliknúť na _modré tlačidlo inštalovať_ na rozšírenom paneli aktivít, aby ste ho nainštalovali, alebo použiť tlačidlo inštalovať, ktoré sa objaví v oblasti kódu, keď vyberiete rozšírenie na načítanie ďalších informácií.
+
+![Install extensions](../../../../8-code-editor/images/install-extension.gif)
+
+### 2. Prispôsobenie rozšírení
+
+Po inštalácii rozšírenia možno budete musieť upraviť jeho správanie a prispôsobiť ho podľa svojich preferencií. Na to vyberte ikonu Extensions, a tentoraz sa vaše rozšírenie objaví v priečinku _Installed_, kliknite na _**ikonu ozubeného kolesa**_ a prejdite na _Extensions Setting_.
+
+![Modify extension settings](../../../../translated_images/extension-settings.21c752ae4f4cdb78a867f140ccd0680e04619d0c44bb4afb26373e54b829d934.sk.png)
+
+### 3. Správa rozšírení
+
+Po inštalácii a používaní rozšírenia ponúka vscode.dev možnosti správy rozšírenia podľa rôznych potrieb. Napríklad môžete:
+
+- **Deaktivovať:** _(Dočasne deaktivujete rozšírenie, keď ho už nepotrebujete, ale nechcete ho úplne odinštalovať)_
+
+    Vyberte nainštalované rozšírenie na rozšírenom paneli aktivít > kliknite na ikonu ozubeného kolesa > vyberte 'Disable' alebo 'Disable (Workspace)' **ALEBO** Otvorte rozšírenie v oblasti kódu a kliknite na modré tlačidlo Disable.
+
+- **Odinštalovať:** Vyberte nainštalované rozšírenie na rozšírenom paneli aktivít > kliknite na ikonu ozubeného kolesa > vyberte 'Uninstall' **ALEBO** Otvorte rozšírenie v oblasti kódu a kliknite na modré tlačidlo Uninstall.
+
+---
+
+## Zadanie
+
+[Vytvorte webovú stránku životopisu pomocou vscode.dev](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/8-code-editor/1-using-a-code-editor/assignment.md)
+
+## Prehľad a samostatné štúdium
+
+Prečítajte si viac o [VSCode.dev](https://code.visualstudio.com/docs/editor/vscode-web?WT.mc_id=academic-0000-alfredodeza) a niektorých jeho ďalších funkciách.
+
+---
+
+**Upozornenie**:  
+Tento dokument bol preložený pomocou služby AI prekladu [Co-op Translator](https://github.com/Azure/co-op-translator). Aj keď sa snažíme o presnosť, prosím, berte na vedomie, že automatizované preklady môžu obsahovať chyby alebo nepresnosti. Pôvodný dokument v jeho pôvodnom jazyku by mal byť považovaný za autoritatívny zdroj. Pre kritické informácie sa odporúča profesionálny ľudský preklad. Nie sme zodpovední za akékoľvek nedorozumenia alebo nesprávne interpretácie vyplývajúce z použitia tohto prekladu.
\ No newline at end of file
diff --git a/translations/sk/8-code-editor/1-using-a-code-editor/assignment.md b/translations/sk/8-code-editor/1-using-a-code-editor/assignment.md
new file mode 100644
index 00000000..22b61c49
--- /dev/null
+++ b/translations/sk/8-code-editor/1-using-a-code-editor/assignment.md
@@ -0,0 +1,247 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "2fcb983b8dbadadb1bc2e97f8c12dac5",
+  "translation_date": "2025-08-27T22:53:50+00:00",
+  "source_file": "8-code-editor/1-using-a-code-editor/assignment.md",
+  "language_code": "sk"
+}
+-->
+# Vytvorte webovú stránku životopisu pomocou vscode.dev
+
+_Aké skvelé by bolo, keby si od vás personalista vypýtal životopis a vy by ste mu poslali URL?_ 😎
+
+## Ciele
+
+Po tejto úlohe sa naučíte:
+
+- Vytvoriť webovú stránku na prezentáciu vášho životopisu
+
+### Predpoklady
+
+1. Účet na GitHube. Prejdite na [GitHub](https://github.com/) a vytvorte si účet, ak ho ešte nemáte.
+
+## Kroky
+
+**Krok 1:** Vytvorte nový GitHub repozitár a pomenujte ho `my-resume`
+
+**Krok 2:** Vytvorte súbor `index.html` vo vašom repozitári. Pridáme aspoň jeden súbor priamo na github.com, pretože prázdny repozitár nie je možné otvoriť vo vscode.dev.
+
+Kliknite na odkaz `creating a new file`, zadajte názov `index.html` a vyberte tlačidlo `Commit new file`.
+
+![Vytvorte nový súbor na github.com](../../../../translated_images/new-file-github.com.c886796d800e8056561829a181be1382c5303da9d902d8b2dd82b68a4806e21f.sk.png)
+
+**Krok 3:** Otvorte [VSCode.dev](https://vscode.dev) a vyberte tlačidlo `Open Remote Repository`.
+
+Skopírujte URL adresu repozitára, ktorý ste práve vytvorili pre svoju stránku životopisu, a vložte ju do vstupného poľa:
+
+_Nahraďte `your-username` svojím GitHub používateľským menom._
+
+```
+https://github.com/your-username/my-resume
+```
+
+✅ Ak bolo všetko úspešné, uvidíte svoj projekt a súbor index.html otvorený v textovom editore v prehliadači.
+
+![Vytvorte nový súbor](../../../../translated_images/project-on-vscode.dev.e79815a9a95ee7feac72ebe5c941c91279716be37c575dbdbf2f43bea2c7d8b6.sk.png)
+
+**Krok 4:** Otvorte súbor `index.html`, vložte do kódu nižšie obsah a uložte ho.
+
+<details>
+    <summary><b>HTML kód zodpovedný za obsah vašej webovej stránky životopisu.</b></summary>
+    
+        <html>
+
+            <head>
+                <link href="style.css" rel="stylesheet">
+                <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
+                <title>Vaše meno sem!</title>
+            </head>
+            <body>
+                <header id="header">
+                    <!-- hlavička životopisu s vaším menom a titulom -->
+                    <h1>Vaše meno sem!</h1>
+                    <hr>
+                    Vaša rola!
+                    <hr>
+                </header>
+                <main>
+                    <article id="mainLeft">
+                        <section>
+                            <h2>KONTAKT</h2>
+                            <!-- kontaktné informácie vrátane sociálnych sietí -->
+                            <p>
+                                <i class="fa fa-envelope" aria-hidden="true"></i>
+                                <a href="mailto:username@domain.top-level domain">Napíšte sem svoj email</a>
+                            </p>
+                            <p>
+                                <i class="fab fa-github" aria-hidden="true"></i>
+                                <a href="github.com/yourGitHubUsername">Napíšte sem svoje používateľské meno!</a>
+                            </p>
+                            <p>
+                                <i class="fab fa-linkedin" aria-hidden="true"></i>
+                                <a href="linkedin.com/yourLinkedInUsername">Napíšte sem svoje používateľské meno!</a>
+                            </p>
+                        </section>
+                        <section>
+                            <h2>ZRUČNOSTI</h2>
+                            <!-- vaše zručnosti -->
+                            <ul>
+                                <li>Zručnosť 1!</li>
+                                <li>Zručnosť 2!</li>
+                                <li>Zručnosť 3!</li>
+                                <li>Zručnosť 4!</li>
+                            </ul>
+                        </section>
+                        <section>
+                            <h2>VZDELANIE</h2>
+                            <!-- vaše vzdelanie -->
+                            <h3>Napíšte sem svoj kurz!</h3>
+                            <p>
+                                Napíšte sem svoju inštitúciu!
+                            </p>
+                            <p>
+                                Začiatok - Koniec
+                            </p>
+                        </section>            
+                    </article>
+                    <article id="mainRight">
+                        <section>
+                            <h2>O MNE</h2>
+                            <!-- o vás -->
+                            <p>Napíšte krátky text o sebe!</p>
+                        </section>
+                        <section>
+                            <h2>PRACOVNÉ SKÚSENOSTI</h2>
+                            <!-- vaše pracovné skúsenosti -->
+                            <h3>Názov pozície</h3>
+                            <p>
+                                Názov organizácie sem | Mesiac začiatku – Mesiac konca
+                            </p>
+                            <ul>
+                                    <li>Úloha 1 - Napíšte, čo ste robili!</li>
+                                    <li>Úloha 2 - Napíšte, čo ste robili!</li>
+                                    <li>Napíšte výsledky/dopad vášho príspevku</li>
+                                    
+                            </ul>
+                            <h3>Názov pozície 2</h3>
+                            <p>
+                                Názov organizácie sem | Mesiac začiatku – Mesiac konca
+                            </p>
+                            <ul>
+                                    <li>Úloha 1 - Napíšte, čo ste robili!</li>
+                                    <li>Úloha 2 - Napíšte, čo ste robili!</li>
+                                    <li>Napíšte výsledky/dopad vášho príspevku</li>
+                                    
+                            </ul>
+                        </section>
+                    </article>
+                </main>
+            </body>
+        </html>
+</details>
+
+Nahraďte _zástupný text_ vo vyššie uvedenom HTML kóde detailmi vášho životopisu.
+
+**Krok 5:** Prejdite na priečinok My-Resume, kliknite na ikonu `New File ...` a vytvorte 2 nové súbory vo vašom projekte: `style.css` a `codeswing.json`.
+
+**Krok 6:** Otvorte súbor `style.css`, vložte do kódu nižšie obsah a uložte ho.
+
+<details>
+        <summary><b>CSS kód na formátovanie rozloženia stránky.</b></summary>
+            
+            body {
+                font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+                font-size: 16px;
+                max-width: 960px;
+                margin: auto;
+            }
+            h1 {
+                font-size: 3em;
+                letter-spacing: .6em;
+                padding-top: 1em;
+                padding-bottom: 1em;
+            }
+
+            h2 {
+                font-size: 1.5em;
+                padding-bottom: 1em;
+            }
+
+            h3 {
+                font-size: 1em;
+                padding-bottom: 1em;
+            }
+            main { 
+                display: grid;
+                grid-template-columns: 40% 60%;
+                margin-top: 3em;
+            }
+            header {
+                text-align: center;
+                margin: auto 2em;
+            }
+
+            section {
+                margin: auto 1em 4em 2em;
+            }
+
+            i {
+                margin-right: .5em;
+            }
+
+            p {
+                margin: .2em auto
+            }
+
+            hr {
+                border: none;
+                background-color: lightgray;
+                height: 1px;
+            }
+
+            h1, h2, h3 {
+                font-weight: 100;
+                margin-bottom: 0;
+            }
+            #mainLeft {
+                border-right: 1px solid lightgray;
+            }
+            
+</details>
+
+**Krok 6:** Otvorte súbor `codeswing.json`, vložte do kódu nižšie obsah a uložte ho.
+
+    {
+    "scripts": [],
+    "styles": []
+    }
+
+**Krok 7:** Nainštalujte rozšírenie `Codeswing`, aby ste mohli vizualizovať webovú stránku životopisu v kódovacej oblasti.
+
+Kliknite na ikonu _`Extensions`_ na paneli aktivít a zadajte Codeswing. Buď kliknite na _modré tlačidlo inštalovať_ na rozšírenom paneli aktivít, aby ste ho nainštalovali, alebo použite tlačidlo inštalovať, ktoré sa zobrazí v kódovacej oblasti po výbere rozšírenia na načítanie ďalších informácií. Ihneď po inštalácii rozšírenia si všimnite zmeny vo vašom projekte 😃.
+
+![Inštalácia rozšírení](../../../../8-code-editor/images/install-extension.gif)
+
+Toto uvidíte na obrazovke po inštalácii rozšírenia.
+
+![Codeswing rozšírenie v akcii](../../../../translated_images/after-codeswing-extension-pb.0ebddddcf73b550994947a9084e35e2836c713ae13839d49628e3c764c1cfe83.sk.png)
+
+Ak ste spokojní so zmenami, ktoré ste vykonali, prejdite na priečinok `Changes` a kliknite na tlačidlo `+`, aby ste zmeny pripravili.
+
+Zadajte správu o commite _(Popis zmeny, ktorú ste vykonali v projekte)_ a potvrďte svoje zmeny kliknutím na `check`. Po dokončení práce na projekte vyberte ikonu hamburgerového menu v ľavom hornom rohu, aby ste sa vrátili do repozitára na GitHube.
+
+Gratulujeme 🎉 Práve ste vytvorili svoju webovú stránku životopisu pomocou vscode.dev v niekoľkých krokoch.
+
+## 🚀 Výzva
+
+Otvorte vzdialený repozitár, ku ktorému máte povolenie vykonávať zmeny, a aktualizujte niektoré súbory. Následne skúste vytvoriť novú vetvu so svojimi zmenami a vytvorte Pull Request.
+
+## Recenzia a samoštúdium
+
+Prečítajte si viac o [VSCode.dev](https://code.visualstudio.com/docs/editor/vscode-web?WT.mc_id=academic-0000-alfredodeza) a niektorých jeho ďalších funkciách.
+
+---
+
+**Upozornenie**:  
+Tento dokument bol preložený pomocou služby AI prekladu [Co-op Translator](https://github.com/Azure/co-op-translator). Hoci sa snažíme o presnosť, prosím, berte na vedomie, že automatizované preklady môžu obsahovať chyby alebo nepresnosti. Pôvodný dokument v jeho pôvodnom jazyku by mal byť považovaný za autoritatívny zdroj. Pre kritické informácie sa odporúča profesionálny ľudský preklad. Nie sme zodpovední za žiadne nedorozumenia alebo nesprávne interpretácie vyplývajúce z použitia tohto prekladu.
\ No newline at end of file
diff --git a/translations/sk/CODE_OF_CONDUCT.md b/translations/sk/CODE_OF_CONDUCT.md
new file mode 100644
index 00000000..ff6d8633
--- /dev/null
+++ b/translations/sk/CODE_OF_CONDUCT.md
@@ -0,0 +1,23 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "b0a9b4cccd918195f58224d5793da1a6",
+  "translation_date": "2025-08-27T21:59:51+00:00",
+  "source_file": "CODE_OF_CONDUCT.md",
+  "language_code": "sk"
+}
+-->
+# Kódex správania pre otvorený zdroj od Microsoftu
+
+Tento projekt prijal [Kódex správania pre otvorený zdroj od Microsoftu](https://opensource.microsoft.com/codeofconduct/?WT.mc_id=academic-77807-sagibbon).
+
+Zdroje:
+
+- [Kódex správania pre otvorený zdroj od Microsoftu](https://opensource.microsoft.com/codeofconduct/?WT.mc_id=academic-77807-sagibbon)
+- [Často kladené otázky o kódexe správania](https://opensource.microsoft.com/codeofconduct/faq/?WT.mc_id=academic-77807-sagibbon)
+- Kontaktujte [opencode@microsoft.com](mailto:opencode@microsoft.com) s otázkami alebo obavami
+
+---
+
+**Upozornenie**:  
+Tento dokument bol preložený pomocou služby AI prekladu [Co-op Translator](https://github.com/Azure/co-op-translator). Aj keď sa snažíme o presnosť, prosím, berte na vedomie, že automatizované preklady môžu obsahovať chyby alebo nepresnosti. Pôvodný dokument v jeho pôvodnom jazyku by mal byť považovaný za autoritatívny zdroj. Pre kritické informácie sa odporúča profesionálny ľudský preklad. Nie sme zodpovední za akékoľvek nedorozumenia alebo nesprávne interpretácie vyplývajúce z použitia tohto prekladu.
\ No newline at end of file
diff --git a/translations/sk/CONTRIBUTING.md b/translations/sk/CONTRIBUTING.md
new file mode 100644
index 00000000..a9b1742a
--- /dev/null
+++ b/translations/sk/CONTRIBUTING.md
@@ -0,0 +1,23 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "777400e9f0336c7ee2f9a1200a88478f",
+  "translation_date": "2025-08-27T21:58:08+00:00",
+  "source_file": "CONTRIBUTING.md",
+  "language_code": "sk"
+}
+-->
+# Prispievanie
+
+Tento projekt víta príspevky a návrhy. Väčšina príspevkov vyžaduje, aby ste súhlasili s Licenčnou zmluvou prispievateľa (CLA), ktorá potvrdzuje, že máte právo a skutočne udeľujete nám práva na použitie vášho príspevku. Viac podrobností nájdete na [https://cla.microsoft.com](https://cla.microsoft.com/?WT.mc_id=academic-77807-sagibbon).
+
+Keď odošlete pull request, CLA-bot automaticky určí, či je potrebné poskytnúť CLA, a primerane označí PR (napr. štítok, komentár). Jednoducho postupujte podľa pokynov poskytnutých botom. Toto budete musieť urobiť iba raz vo všetkých repozitároch, ktoré používajú našu CLA. Prosíme vás tiež, aby ste nám povedali, prečo ste vykonali danú zmenu, aby sme lepšie pochopili vašu požiadavku.
+
+Tento projekt prijal [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/?WT.mc_id=academic-77807-sagibbon).
+Viac informácií nájdete v [FAQ k Etickému kódexu](https://opensource.microsoft.com/codeofconduct/faq/?WT.mc_id=academic-77807-sagibbon)
+alebo kontaktujte [opencode@microsoft.com](mailto:opencode@microsoft.com) s akýmikoľvek ďalšími otázkami alebo pripomienkami.
+
+---
+
+**Upozornenie**:  
+Tento dokument bol preložený pomocou služby AI prekladu [Co-op Translator](https://github.com/Azure/co-op-translator). Aj keď sa snažíme o presnosť, prosím, berte na vedomie, že automatizované preklady môžu obsahovať chyby alebo nepresnosti. Pôvodný dokument v jeho pôvodnom jazyku by mal byť považovaný za autoritatívny zdroj. Pre kritické informácie sa odporúča profesionálny ľudský preklad. Nie sme zodpovední za žiadne nedorozumenia alebo nesprávne interpretácie vyplývajúce z použitia tohto prekladu.
\ No newline at end of file
diff --git a/translations/sk/README.md b/translations/sk/README.md
new file mode 100644
index 00000000..27cdd35e
--- /dev/null
+++ b/translations/sk/README.md
@@ -0,0 +1,209 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "b672130244189715ac084c3259f6ab58",
+  "translation_date": "2025-08-27T21:54:00+00:00",
+  "source_file": "README.md",
+  "language_code": "sk"
+}
+-->
+[![GitHub license](https://img.shields.io/github/license/microsoft/Web-Dev-For-Beginners.svg)](https://github.com/microsoft/Web-Dev-For-Beginners/blob/master/LICENSE)  
+[![GitHub contributors](https://img.shields.io/github/contributors/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/)  
+[![GitHub issues](https://img.shields.io/github/issues/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/)  
+[![GitHub pull-requests](https://img.shields.io/github/issues-pr/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/)  
+[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)  
+
+[![GitHub watchers](https://img.shields.io/github/watchers/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Watch&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/)  
+[![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Fork&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/)  
+[![GitHub stars](https://img.shields.io/github/stars/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Star&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/stargazers/)  
+
+[![](https://dcbadge.vercel.app/api/server/ByRwuEEgH4)](https://discord.gg/zxKYvhSnVp?WT.mc_id=academic-000002-leestott)  
+
+[![Open in Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)  
+
+# Web Development for Beginners - Kurz
+
+Naučte sa základy vývoja webu s naším 12-týždňovým komplexným kurzom od Microsoft Cloud Advocates. Každá z 24 lekcií sa zameriava na JavaScript, CSS a HTML prostredníctvom praktických projektov, ako sú teráriá, rozšírenia prehliadača a vesmírne hry. Zapojte sa do kvízov, diskusií a praktických úloh. Zlepšite svoje zručnosti a optimalizujte si zapamätanie vedomostí s našou efektívnou projektovo orientovanou pedagogikou. Začnite svoju cestu kódovania už dnes!
+
+#### 🧑‍🎓 _Ste študent?_
+
+Navštívte [**stránku Student Hub**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon), kde nájdete zdroje pre začiatočníkov, študentské balíčky a dokonca aj spôsoby, ako získať poukaz na bezplatný certifikát. Toto je stránka, ktorú si chcete uložiť do záložiek a pravidelne kontrolovať, pretože obsah sa mení každý mesiac.
+
+### 📣 Oznámenie - _Nový kurz_ o Generatívnej AI pre JavaScript bol práve vydaný
+
+Nezmeškajte náš nový kurz o Generatívnej AI!
+
+Navštívte [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) a začnite!
+
+<div>
+  <img src="./images/background.png" width="600px" />
+</div>
+
+- Lekcie pokrývajúce všetko od základov po RAG.
+- Interakcia s historickými postavami pomocou GenAI a našej sprievodnej aplikácie.
+- Zábavný a pútavý príbeh, budete cestovať v čase!
+
+<div>
+  <img src="./images/character.png" width="600px" />
+</div>
+
+Každá lekcia obsahuje úlohu na dokončenie, kontrolu vedomostí a výzvu, ktorá vás prevedie témami, ako sú:
+- Tvorba a optimalizácia promptov
+- Generovanie textových a obrazových aplikácií
+- Vyhľadávacie aplikácie
+
+Navštívte [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) a začnite!
+
+
+
+## 🌱 Začíname
+
+> **Učitelia**, [pridali sme niekoľko návrhov](for-teachers.md), ako tento kurz využiť. Radi by sme počuli vašu spätnú väzbu [v našom diskusnom fóre](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
+
+**[Študenti](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, pri každej lekcii začnite kvízom pred prednáškou, pokračujte čítaním materiálu, dokončite rôzne aktivity a overte si svoje vedomosti kvízom po prednáške.
+
+Aby ste si zlepšili zážitok z učenia, spojte sa so svojimi rovesníkmi a pracujte na projektoch spoločne! Diskusie sú vítané v našom [diskusnom fóre](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), kde bude náš tím moderátorov k dispozícii na zodpovedanie vašich otázok.
+
+Na ďalšie vzdelávanie dôrazne odporúčame preskúmať [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) pre ďalšie študijné materiály.
+
+### 📋 Nastavenie vášho prostredia
+
+Tento kurz má pripravené vývojové prostredie! Keď začínate, môžete si vybrať, či budete kurz spúšťať v [Codespace](https://github.com/features/codespaces/) (_prostredie založené na prehliadači, bez potreby inštalácie_), alebo lokálne na svojom počítači pomocou textového editora, ako je [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
+
+#### Vytvorte si svoje úložisko
+Aby ste si mohli jednoducho uložiť svoju prácu, odporúčame vám vytvoriť si vlastnú kópiu tohto úložiska. Môžete to urobiť kliknutím na tlačidlo **Use this template** v hornej časti stránky. Tým sa vo vašom účte GitHub vytvorí nové úložisko s kópiou kurzu.
+
+Postupujte podľa týchto krokov:
+1. **Forknite úložisko**: Kliknite na tlačidlo "Fork" v pravom hornom rohu tejto stránky.
+2. **Klonujte úložisko**:   `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
+
+#### Spustenie kurzu v Codespace
+
+Vo svojej kópii tohto úložiska, ktorú ste vytvorili, kliknite na tlačidlo **Code** a vyberte **Open with Codespaces**. Tým sa vytvorí nový Codespace, v ktorom môžete pracovať.
+
+<img src="./images/createcodespace.png" alt="Create codespace" style="width:270px;"/>
+
+#### Spustenie kurzu lokálne na vašom počítači
+
+Ak chcete tento kurz spustiť lokálne na svojom počítači, budete potrebovať textový editor, prehliadač a nástroj príkazového riadku. Naša prvá lekcia, [Úvod do programovacích jazykov a nástrojov](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/1-getting-started-lessons/1-intro-to-programming-languages), vás prevedie rôznymi možnosťami pre každý z týchto nástrojov, aby ste si mohli vybrať, čo vám najviac vyhovuje.
+
+Naše odporúčanie je použiť [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) ako editor, ktorý má tiež zabudovaný [Terminál](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Visual Studio Code si môžete stiahnuť [tu](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
+
+1. Klonujte svoje úložisko do počítača. Môžete to urobiť kliknutím na tlačidlo **Code** a skopírovaním URL:
+
+    <img src="./images/createcodespace.png" alt="Copy your repository URL" style="width:270px;"/>
+
+    Potom otvorte [Terminál](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) vo [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) a spustite nasledujúci príkaz, pričom `<your-repository-url>` nahradíte URL, ktorú ste práve skopírovali:
+
+    ```bash 
+    git clone <your-repository-url>
+    ```
+
+2. Otvorte priečinok vo Visual Studio Code. Môžete to urobiť kliknutím na **File** > **Open Folder** a výberom priečinka, ktorý ste práve klonovali.
+
+>  Odporúčané rozšírenia pre Visual Studio Code:
+>
+> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - na náhľad HTML stránok vo Visual Studio Code
+> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - na rýchlejšie písanie kódu
+
+## 📂 Každá lekcia obsahuje:
+
+- voliteľnú sketchnote
+- voliteľné doplnkové video
+- kvíz na zahriatie pred lekciou
+- písanú lekciu
+- pre projektovo orientované lekcie, podrobné návody na vytvorenie projektu
+- kontrolu vedomostí
+- výzvu
+- doplnkové čítanie
+- úlohu
+- kvíz po lekcii
+
+> **Poznámka o kvízoch**: Všetky kvízy sú obsiahnuté v priečinku Quiz-app, celkovo 48 kvízov, každý s tromi otázkami. Sú prepojené v rámci lekcií a aplikácia kvízov môže byť spustená lokálne alebo nasadená na Azure; postupujte podľa pokynov v priečinku `quiz-app`. Postupne sa lokalizujú.
+
+## 🗃️ Lekcie
+
+|     |                       Názov projektu                       |                            Učené koncepty                             | Ciele učenia                                                                                                                 |                                                         Prepojená lekcia                                                          |         Autor          |
+| :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |
+| 01  |                     Začíname                      |           Úvod do programovania a nástrojov           | Naučte sa základné princípy väčšiny programovacích jazykov a o softvéri, ktorý pomáha profesionálnym vývojárom pri práci | [Úvod do programovacích jazykov a nástrojov](/1-getting-started-lessons/1-intro-to-programming-languages/README.md) |         Jasmine         |
+| 02  |                     Začíname                      |             Základy GitHubu, vrátane práce v tíme             | Ako používať GitHub vo svojom projekte, ako spolupracovať s ostatnými na kódovej báze                                                    |                            [Úvod do GitHubu](/1-getting-started-lessons/2-github-basics/README.md)                             |          Floor          |
+| 03  |                     Začíname                      |                             Prístupnosť                              | Naučte sa základy prístupnosti webu                                                                                               |                       [Základy prístupnosti](/1-getting-started-lessons/3-accessibility/README.md)                       |       Christopher       |
+| 04  |                        Základy JS                         |                         Dátové typy v JavaScripte                          | Základy dátových typov v JavaScripte                                                                                                 |                                       [Dátové typy](/2-js-basics/1-data-types/README.md)                                        |         Jasmine         |
+| 05  |                        Základy JS                         |                         Funkcie a metódy                          | Naučte sa o funkciách a metódach na riadenie logického toku aplikácie                                                             |                              [Funkcie a metódy](/2-js-basics/2-functions-methods/README.md)                               | Jasmine a Christopher |
+| 06  |                        Základy JS                         |                        Rozhodovanie v JS                        | Naučte sa vytvárať podmienky vo svojom kóde pomocou metód rozhodovania                                                           |                                 [Rozhodovanie](/2-js-basics/3-making-decisions/README.md)                                  |         Jasmine         |
+| 07  |                        Základy JS                         |                            Polia a cykly                            | Práca s dátami pomocou polí a cyklov v JavaScripte                                                                                 |                                   [Polia a cykly](/2-js-basics/4-arrays-loops/README.md)                                    |         Jasmine         |
+| 08  |       [Terárium](/3-terrarium/solution/README.md)       |                            HTML v praxi                            | Vytvorte HTML na vytvorenie online terária, zamerané na vytváranie rozloženia                                                         |                                 [Úvod do HTML](/3-terrarium/1-intro-to-html/README.md)                                 |           Jen           |
+| 09  |       [Terárium](/3-terrarium/solution/README.md)       |                            CSS v praxi                             | Vytvorte CSS na štýlovanie online terária, zamerané na základy CSS vrátane vytvárania responzívnych stránok                     |                                  [Úvod do CSS](/3-terrarium/2-intro-to-css/README.md)                                  |           Jen           |
+| 10  |            [Terárium](/3-terrarium/solution/README.md)            |                 Uzávery v JavaScripte, manipulácia s DOM                  | Vytvorte JavaScript na to, aby terárium fungovalo ako rozhranie drag/drop, zamerané na uzávery a manipuláciu s DOM             |                  [Uzávery v JavaScripte, manipulácia s DOM](/3-terrarium/3-intro-to-DOM-and-closures/README.md)                   |           Jen           |
+| 11  |          [Hra na písanie](/4-typing-game/solution/README.md)          |                          Vytvorte hru na písanie                           | Naučte sa používať udalosti klávesnice na riadenie logiky vašej JavaScript aplikácie                                                          |                                [Programovanie riadené udalosťami](/4-typing-game/typing-game/README.md)                                |       Christopher       |
+| 12  | [Green Browser Extension](/5-browser-extension/solution/README.md) |                         Práca s prehliadačmi                          | Naučte sa, ako fungujú prehliadače, ich históriu a ako vytvoriť prvé prvky rozšírenia prehliadača                               |                               [O prehliadačoch](/5-browser-extension/1-about-browsers/README.md)                                |           Jen           |
+| 13  | [Green Browser Extension](/5-browser-extension/solution/README.md) | Vytvorenie formulára, volanie API a ukladanie premenných do lokálneho úložiska | Vytvorte JavaScriptové prvky rozšírenia prehliadača na volanie API pomocou premenných uložených v lokálnom úložisku                      |                [API, formuláre a lokálne úložisko](/5-browser-extension/2-forms-browsers-local-storage/README.md)                 |           Jen           |
+| 14  | [Green Browser Extension](/5-browser-extension/solution/README.md) |          Procesy na pozadí v prehliadači, výkon webu          | Použite procesy na pozadí prehliadača na správu ikony rozšírenia; naučte sa o výkone webu a niektorých optimalizáciách na zlepšenie   |             [Úlohy na pozadí a výkon](/5-browser-extension/3-background-tasks-and-performance/README.md)              |           Jen           |
+| 15  |           [Space Game](/6-space-game/solution/README.md)           |             Pokročilejší vývoj hier s JavaScriptom             | Naučte sa o dedičnosti pomocou tried a kompozície a o vzore Pub/Sub, ako prípravu na vytvorenie hry              |                      [Úvod do pokročilého vývoja hier](/6-space-game/1-introduction/README.md)                       |          Chris          |
+| 16  |           [Space Game](/6-space-game/solution/README.md)           |                           Kreslenie na plátno                            | Naučte sa o API Canvas, ktoré sa používa na kreslenie prvkov na obrazovku                                                                       |                                [Kreslenie na plátno](/6-space-game/2-drawing-to-canvas/README.md)                                |          Chris          |
+| 17  |           [Space Game](/6-space-game/solution/README.md)           |                   Pohyb prvkov po obrazovke                    | Zistite, ako môžu prvky získať pohyb pomocou karteziánskych súradníc a API Canvas                                            |                           [Pohyb prvkov](/6-space-game/3-moving-elements-around/README.md)                           |          Chris          |
+| 18  |           [Space Game](/6-space-game/solution/README.md)           |                          Detekcia kolízií                           | Umožnite prvkom kolidovať a reagovať na seba pomocou stlačení klávesov a poskytnite funkciu cooldown na zabezpečenie výkonu hry    |                              [Detekcia kolízií](/6-space-game/4-collision-detection/README.md)                              |          Chris          |
+| 19  |           [Space Game](/6-space-game/solution/README.md)           |                             Počítanie skóre                              | Vykonávajte matematické výpočty na základe stavu a výkonu hry                                                                |                                    [Počítanie skóre](/6-space-game/5-keeping-score/README.md)                                    |          Chris          |
+| 20  |           [Space Game](/6-space-game/solution/README.md)           |                     Ukončenie a reštartovanie hry                     | Naučte sa o ukončení a reštartovaní hry, vrátane čistenia zdrojov a resetovania hodnôt premenných                              |                                [Podmienka ukončenia](/6-space-game/6-end-condition/README.md)                                 |          Chris          |
+| 21  |         [Banking App](/7-bank-project/solution/README.md)          |                 HTML šablóny a trasy vo webovej aplikácii                 | Naučte sa, ako vytvoriť štruktúru architektúry webovej stránky s viacerými stránkami pomocou trasovania a HTML šablón                             |                            [HTML šablóny a trasy](/7-bank-project/1-template-route/README.md)                             |          Yohan          |
+| 22  |         [Banking App](/7-bank-project/solution/README.md)          |                  Vytvorenie prihlasovacieho a registračného formulára                   | Naučte sa o vytváraní formulárov a spracovaní validačných rutín                                                                          |                                           [Formuláre](/7-bank-project/2-forms/README.md)                                           |          Yohan          |
+| 23  |         [Banking App](/7-bank-project/solution/README.md)          |                   Metódy získavania a používania údajov                   | Ako údaje prúdia do vašej aplikácie a z nej, ako ich získavať, ukladať a likvidovať                                                 |                                            [Údaje](/7-bank-project/3-data/README.md)                                            |          Yohan          |
+| 24  |         [Banking App](/7-bank-project/solution/README.md)          |                      Koncepty správy stavu                      | Naučte sa, ako vaša aplikácia uchováva stav a ako ho programovo spravovať                                                              |                                [Správa stavu](/7-bank-project/4-state-management/README.md)                                |          Yohan          |
+
+
+## 🏫 Pedagogika
+
+Náš učebný plán je navrhnutý s ohľadom na dva kľúčové pedagogické princípy:
+* učenie založené na projektoch
+* časté kvízy
+
+Program učí základy JavaScriptu, HTML a CSS, ako aj najnovšie nástroje a techniky, ktoré používajú dnešní weboví vývojári. Študenti budú mať možnosť získať praktické skúsenosti vytvorením hry na písanie, virtuálneho terária, ekologického rozšírenia prehliadača, hry v štýle Space Invaders a bankovej aplikácie pre podniky. Na konci série študenti získajú pevné základy webového vývoja.
+
+
+> 🎓 Prvé lekcie tohto učebného plánu si môžete vyskúšať ako [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) na Microsoft Learn!
+
+Zabezpečením, že obsah je v súlade s projektmi, sa proces stáva pre študentov pútavejším a zlepšuje sa uchovávanie konceptov. Napísali sme tiež niekoľko úvodných lekcií o základoch JavaScriptu na predstavenie konceptov, spojených s videom zo série "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" kolekcie video tutoriálov, ktorých autori prispeli k tomuto učebnému plánu.
+
+Okrem toho nízko stresový kvíz pred hodinou nastaví študentovu pozornosť na učenie sa témy, zatiaľ čo druhý kvíz po hodine zabezpečí ďalšie uchovanie. Tento učebný plán bol navrhnutý tak, aby bol flexibilný a zábavný a mohol byť absolvovaný celý alebo len jeho časť. Projekty začínajú malé a postupne sa stávajú zložitejšími na konci 12-týždňového cyklu.
+
+Aj keď sme sa zámerne vyhli predstaveniu JavaScriptových frameworkov, aby sme sa sústredili na základné zručnosti potrebné ako webový vývojár pred prijatím frameworku, dobrým ďalším krokom po dokončení tohto učebného plánu by bolo naučiť sa o Node.js prostredníctvom ďalšej kolekcie videí: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
+
+> Navštívte naše [Pravidlá správania](CODE_OF_CONDUCT.md) a [Prispievanie](CONTRIBUTING.md) pokyny. Uvítame vašu konštruktívnu spätnú väzbu!
+
+
+## 🧭 Offline prístup
+
+Túto dokumentáciu môžete spustiť offline pomocou [Docsify](https://docsify.js.org/#/). Forknite tento repozitár, [nainštalujte Docsify](https://docsify.js.org/#/quickstart) na svojom lokálnom počítači a potom v koreňovom priečinku tohto repozitára zadajte `docsify serve`. Webová stránka bude spustená na porte 3000 na vašom localhoste: `localhost:3000`.
+
+## 📘 PDF
+
+PDF všetkých lekcií nájdete [tu](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
+
+
+## 🎒 Ďalšie kurzy
+
+Náš tím vytvára aj ďalšie kurzy! Pozrite si:
+
+- [Generatívna AI pre začiatočníkov](https://aka.ms/genai-beginners)
+- [Generatívna AI pre začiatočníkov .NET](https://github.com/microsoft/Generative-AI-for-beginners-dotnet)
+- [Generatívna AI s JavaScriptom](https://github.com/microsoft/generative-ai-with-javascript)
+- [Generatívna AI s Javou](https://github.com/microsoft/Generative-AI-for-beginners-java)
+- [AI pre začiatočníkov](https://aka.ms/ai-beginners)
+- [Data Science pre začiatočníkov](https://aka.ms/datascience-beginners)
+- [ML pre začiatočníkov](https://aka.ms/ml-beginners)
+- [Kybernetická bezpečnosť pre začiatočníkov](https://github.com/microsoft/Security-101)
+- [Webový vývoj pre začiatočníkov](https://aka.ms/webdev-beginners)
+- [IoT pre začiatočníkov](https://aka.ms/iot-beginners)
+- [XR vývoj pre začiatočníkov](https://github.com/microsoft/xr-development-for-beginners)
+- [Ovládnutie GitHub Copilot pre agentické použitie](https://github.com/microsoft/Mastering-GitHub-Copilot-for-Paired-Programming)
+- [Ovládnutie GitHub Copilot pre vývojárov C#/.NET](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers)
+- [Vyberte si vlastné dobrodružstvo s Copilotom](https://github.com/microsoft/CopilotAdventures)
+
+## Licencia
+
+Tento repozitár je licencovaný pod licenciou MIT. Viac informácií nájdete v súbore [LICENSE](../../LICENSE).
+
+---
+
+**Upozornenie**:  
+Tento dokument bol preložený pomocou služby AI prekladu [Co-op Translator](https://github.com/Azure/co-op-translator). Aj keď sa snažíme o presnosť, prosím, berte na vedomie, že automatizované preklady môžu obsahovať chyby alebo nepresnosti. Pôvodný dokument v jeho rodnom jazyku by mal byť považovaný za autoritatívny zdroj. Pre kritické informácie sa odporúča profesionálny ľudský preklad. Nie sme zodpovední za žiadne nedorozumenia alebo nesprávne interpretácie vyplývajúce z použitia tohto prekladu.
\ No newline at end of file
diff --git a/translations/sk/SECURITY.md b/translations/sk/SECURITY.md
new file mode 100644
index 00000000..6a111074
--- /dev/null
+++ b/translations/sk/SECURITY.md
@@ -0,0 +1,51 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "4ecc3bf2e27983d4c780be6f26ee6228",
+  "translation_date": "2025-08-27T21:58:32+00:00",
+  "source_file": "SECURITY.md",
+  "language_code": "sk"
+}
+-->
+## Bezpečnosť
+
+Spoločnosť Microsoft berie bezpečnosť svojich softvérových produktov a služieb vážne, čo zahŕňa aj všetky repozitáre zdrojového kódu spravované prostredníctvom našich organizácií na GitHube, medzi ktoré patria [Microsoft](https://github.com/Microsoft), [Azure](https://github.com/Azure), [DotNet](https://github.com/dotnet), [AspNet](https://github.com/aspnet), [Xamarin](https://github.com/xamarin) a [naše GitHub organizácie](https://opensource.microsoft.com/?WT.mc_id=academic-77807-sagibbon).
+
+Ak sa domnievate, že ste našli bezpečnostnú zraniteľnosť v akomkoľvek repozitári vlastnenom spoločnosťou Microsoft, ktorá spĺňa [definíciu bezpečnostnej zraniteľnosti spoločnosti Microsoft](https://docs.microsoft.com/previous-versions/tn-archive/cc751383(v=technet.10)/?WT.mc_id=academic-77807-sagibbon), nahláste ju, prosím, podľa nižšie uvedených pokynov.
+
+## Nahlasovanie bezpečnostných problémov
+
+**Prosím, nenahlasujte bezpečnostné zraniteľnosti prostredníctvom verejných GitHub issues.**
+
+Namiesto toho ich nahláste Microsoft Security Response Center (MSRC) na [https://msrc.microsoft.com/create-report](https://msrc.microsoft.com/create-report/?WT.mc_id=academic-77807-sagibbon).
+
+Ak uprednostňujete odoslanie bez prihlásenia, pošlite e-mail na [secure@microsoft.com](mailto:secure@microsoft.com). Ak je to možné, zašifrujte svoju správu pomocou nášho PGP kľúča; stiahnite si ho z [Microsoft Security Response Center PGP Key stránky](https://www.microsoft.com/msrc/pgp-key-msrc/?WT.mc_id=academic-77807-sagibbon).
+
+Odozvu by ste mali dostať do 24 hodín. Ak z nejakého dôvodu nedostanete odpoveď, prosím, kontaktujte nás znova e-mailom, aby ste sa uistili, že sme vašu pôvodnú správu dostali. Ďalšie informácie nájdete na [microsoft.com/msrc](https://www.microsoft.com/msrc/?WT.mc_id=academic-77807-sagibbon).
+
+Prosím, zahrňte nižšie uvedené požadované informácie (v čo najväčšej miere, ako je to možné), aby sme lepšie pochopili povahu a rozsah možného problému:
+
+  * Typ problému (napr. pretečenie vyrovnávacej pamäte, SQL injekcia, cross-site scripting atď.)
+  * Úplné cesty k zdrojovým súborom súvisiacim s prejavom problému
+  * Miesto postihnutého zdrojového kódu (tag/vetva/commit alebo priamy URL)
+  * Akákoľvek špeciálna konfigurácia potrebná na reprodukciu problému
+  * Krok za krokom inštrukcie na reprodukciu problému
+  * Proof-of-concept alebo exploit kód (ak je to možné)
+  * Dopad problému, vrátane toho, ako by mohol útočník problém zneužiť
+
+Tieto informácie nám pomôžu rýchlejšie spracovať vašu správu.
+
+Ak nahlasujete v rámci programu odmien za chyby, podrobnejšie správy môžu prispieť k vyššej odmene. Navštívte, prosím, našu stránku [Microsoft Bug Bounty Program](https://microsoft.com/msrc/bounty/?WT.mc_id=academic-77807-sagibbon) pre viac informácií o našich aktívnych programoch.
+
+## Preferované jazyky
+
+Uprednostňujeme, aby všetka komunikácia prebiehala v angličtine.
+
+## Politika
+
+Spoločnosť Microsoft sa riadi princípom [Koordinovaného zverejňovania zraniteľností](https://www.microsoft.com/msrc/cvd/?WT.mc_id=academic-77807-sagibbon).
+
+---
+
+**Upozornenie**:  
+Tento dokument bol preložený pomocou služby na automatický preklad [Co-op Translator](https://github.com/Azure/co-op-translator). Aj keď sa snažíme o presnosť, upozorňujeme, že automatické preklady môžu obsahovať chyby alebo nepresnosti. Za autoritatívny zdroj by sa mal považovať pôvodný dokument v jeho pôvodnom jazyku. Pre dôležité informácie odporúčame profesionálny ľudský preklad. Nezodpovedáme za žiadne nedorozumenia alebo nesprávne interpretácie vyplývajúce z použitia tohto prekladu.
\ No newline at end of file
diff --git a/translations/sk/SUPPORT.md b/translations/sk/SUPPORT.md
new file mode 100644
index 00000000..0a15d01a
--- /dev/null
+++ b/translations/sk/SUPPORT.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "c9d207ff77b4bb46e46dc2b607a8ec1a",
+  "translation_date": "2025-08-27T21:57:37+00:00",
+  "source_file": "SUPPORT.md",
+  "language_code": "sk"
+}
+-->
+# Podpora
+
+## Ako nahlásiť problémy a získať pomoc  
+
+Tento projekt používa GitHub Issues na sledovanie chýb a požiadaviek na funkcie. Pred nahlásením nového problému si prosím prehliadnite existujúce problémy, aby ste sa vyhli duplicite. Pre nové problémy nahláste svoju chybu alebo požiadavku na funkciu ako nový Issue.
+
+Pre pomoc a otázky týkajúce sa používania tohto projektu si prosím pozrite [naše pokyny pre prispievateľov](CONTRIBUTING.md).
+
+## Politika podpory spoločnosti Microsoft  
+
+Podpora pre tento projekt je obmedzená na vyššie uvedené zdroje.
+
+---
+
+**Upozornenie**:  
+Tento dokument bol preložený pomocou služby AI prekladu [Co-op Translator](https://github.com/Azure/co-op-translator). Aj keď sa snažíme o presnosť, prosím, berte na vedomie, že automatizované preklady môžu obsahovať chyby alebo nepresnosti. Pôvodný dokument v jeho pôvodnom jazyku by mal byť považovaný za autoritatívny zdroj. Pre kritické informácie sa odporúča profesionálny ľudský preklad. Nie sme zodpovední za akékoľvek nedorozumenia alebo nesprávne interpretácie vyplývajúce z použitia tohto prekladu.
\ No newline at end of file
diff --git a/translations/sk/_404.md b/translations/sk/_404.md
new file mode 100644
index 00000000..db1e5f88
--- /dev/null
+++ b/translations/sk/_404.md
@@ -0,0 +1,21 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "ea9f0804bd62f46d9808e953ec7fc459",
+  "translation_date": "2025-08-27T21:57:54+00:00",
+  "source_file": "_404.md",
+  "language_code": "sk"
+}
+-->
+# Pracujeme na tom
+
+Na tejto stránke pracujeme. Prosím, vráťte sa neskôr.
+
+Otvorte [issue](https://github.com/microsoft/Web-Dev-For-Beginners/issues/new/choose), ak máte nejaké otázky.
+
+**[Späť na hlavnú stránku](../../../../../../..)**
+
+---
+
+**Upozornenie**:  
+Tento dokument bol preložený pomocou služby AI prekladu [Co-op Translator](https://github.com/Azure/co-op-translator). Hoci sa snažíme o presnosť, prosím, berte na vedomie, že automatizované preklady môžu obsahovať chyby alebo nepresnosti. Pôvodný dokument v jeho pôvodnom jazyku by mal byť považovaný za autoritatívny zdroj. Pre kritické informácie sa odporúča profesionálny ľudský preklad. Nie sme zodpovední za žiadne nedorozumenia alebo nesprávne interpretácie vyplývajúce z použitia tohto prekladu.
\ No newline at end of file
diff --git a/translations/sk/docs/_navbar.md b/translations/sk/docs/_navbar.md
new file mode 100644
index 00000000..89736857
--- /dev/null
+++ b/translations/sk/docs/_navbar.md
@@ -0,0 +1,34 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "3bd2f51ecf4ac9b39277cba748943793",
+  "translation_date": "2025-08-27T22:43:39+00:00",
+  "source_file": "docs/_navbar.md",
+  "language_code": "sk"
+}
+-->
+- Preklady
+  - [English (United States)](../../../docs/README)
+  - [বাংলা](../../../docs/README.bn)
+  - [中文(中国)](../../../docs/README.zh-cn)
+  - [中文(台湾)](../../../docs/README.zh-tw)
+  - [Español](../../../docs/README.es)
+  - [Français](../../../docs/README.fr)
+  - [Ελληνικά](../../../docs/README.el)
+  - [हिन्दी](../../../docs/README.hi)
+  - [Bahasa Melayu](../../../docs/README.ms)
+  - [മലയാളം](../../../docs/README.ml)
+  - [தமிழ்](../../../docs/README.ta)
+  - [తెలుగు](../../../docs/README.te)
+  - [Bahasa Indonesia](../../../docs/README.id)
+  - [Italiano](../../../docs/README.it)
+  - [日本語](../../../docs/README.ja)
+  - [Nederlands](../../../docs/README.nl)
+  - [नेपाली](../../../docs/README.np)
+  - [Português](../../../docs/README.pt)
+  - [Русский](../../../docs/README.ru)
+
+---
+
+**Upozornenie**:  
+Tento dokument bol preložený pomocou služby AI prekladu [Co-op Translator](https://github.com/Azure/co-op-translator). Hoci sa snažíme o presnosť, prosím, berte na vedomie, že automatizované preklady môžu obsahovať chyby alebo nepresnosti. Pôvodný dokument v jeho rodnom jazyku by mal byť považovaný za autoritatívny zdroj. Pre kritické informácie sa odporúča profesionálny ľudský preklad. Nenesieme zodpovednosť za akékoľvek nedorozumenia alebo nesprávne interpretácie vyplývajúce z použitia tohto prekladu.
\ No newline at end of file
diff --git a/translations/sk/docs/_sidebar.md b/translations/sk/docs/_sidebar.md
new file mode 100644
index 00000000..3de46346
--- /dev/null
+++ b/translations/sk/docs/_sidebar.md
@@ -0,0 +1,51 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "655c91b5979de46f1d70d97f0c5f1d14",
+  "translation_date": "2025-08-27T22:43:07+00:00",
+  "source_file": "docs/_sidebar.md",
+  "language_code": "sk"
+}
+-->
+- Úvod
+  - [1](../1-getting-started-lessons/1-intro-to-programming-languages/README.md)
+  - [2](../1-getting-started-lessons/2-github-basics/README.md)
+  - [3](../1-getting-started-lessons/3-accessibility/README.md)
+  
+- Základy JS
+  - [4](../2-js-basics/1-data-types/README.md)
+  - [5](../2-js-basics/2-functions-methods/README.md)
+  - [6](../2-js-basics/3-making-decisions/README.md)
+  - [7](../2-js-basics/4-arrays-loops/README.md)
+
+- HTML, CSS, JS
+  - [8](../3-terrarium/1-intro-to-html/README.md)
+  - [9](../3-terrarium/2-intro-to-css/README.md)
+  - [10](../3-terrarium/3-intro-to-DOM-and-closures/README.md)
+
+- Písacia hra
+  - [11](../4-typing-game/typing-game/README.md)
+  
+- Rozšírenie prehliadača
+  - [12](../5-browser-extension/1-about-browsers/README.md)
+  - [13](../5-browser-extension/2-forms-browsers-local-storage/README.md)
+  - [14](../5-browser-extension/3-background-tasks-and-performance/README.md)
+
+- Vesmírna hra
+  - [15](../6-space-game/1-introduction/README.md)
+  - [16](../6-space-game/2-drawing-to-canvas/README.md)
+  - [17](../6-space-game/3-moving-elements-around/README.md)
+  - [18](../6-space-game/4-collision-detection/README.md)
+  - [19](../6-space-game/5-keeping-score/README.md)
+  - [20](../6-space-game/6-end-condition/README.md)
+
+- Bankový projekt
+  - [21](../7-bank-project/1-template-route/README.md)
+  - [22](../7-bank-project/2-forms/README.md)
+  - [23](../7-bank-project/3-data/README.md)
+  - [24](../7-bank-project/4-state-management/README.md)
+
+---
+
+**Upozornenie**:  
+Tento dokument bol preložený pomocou služby AI prekladu [Co-op Translator](https://github.com/Azure/co-op-translator). Hoci sa snažíme o presnosť, prosím, berte na vedomie, že automatizované preklady môžu obsahovať chyby alebo nepresnosti. Pôvodný dokument v jeho pôvodnom jazyku by mal byť považovaný za autoritatívny zdroj. Pre kritické informácie sa odporúča profesionálny ľudský preklad. Nenesieme zodpovednosť za akékoľvek nedorozumenia alebo nesprávne interpretácie vyplývajúce z použitia tohto prekladu.
\ No newline at end of file
diff --git a/translations/sk/for-teachers.md b/translations/sk/for-teachers.md
new file mode 100644
index 00000000..c7a14227
--- /dev/null
+++ b/translations/sk/for-teachers.md
@@ -0,0 +1,47 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "75cb51f7ca9ea0b097ef4a1287e9290c",
+  "translation_date": "2025-08-27T21:59:12+00:00",
+  "source_file": "for-teachers.md",
+  "language_code": "sk"
+}
+-->
+## Pre pedagógov
+
+Chceli by ste použiť tento učebný plán vo svojej triede? Neváhajte a využite ho!
+
+V skutočnosti ho môžete použiť priamo na GitHube pomocou GitHub Classroom.
+
+Na to si forknite toto repozitórium. Budete potrebovať vytvoriť samostatné repozitórium pre každú lekciu, takže budete musieť extrahovať každý priečinok do samostatného repozitória. Takto môže [GitHub Classroom](https://classroom.github.com/classrooms) spracovať každú lekciu samostatne.
+
+Tieto [podrobné pokyny](https://github.blog/2020-03-18-set-up-your-digital-classroom-with-github-classroom/) vám poskytnú predstavu o tom, ako nastaviť svoju triedu.
+
+## Použitie v Moodle, Canvas alebo Blackboard
+
+Tento učebný plán funguje výborne aj v týchto systémoch na správu výučby! Použite [Moodle súbor na nahranie](../../../../../../../teaching-files/webdev-moodle.mbz) pre kompletný obsah, alebo vyskúšajte [Common Cartridge súbor](../../../../../../../teaching-files/webdev-common-cartridge.imscc), ktorý obsahuje časť obsahu. Moodle Cloud nepodporuje úplné exporty Common Cartridge, preto je vhodnejšie použiť Moodle súbor na stiahnutie, ktorý je možné nahrať do Canvas. Dajte nám vedieť, ako môžeme tento zážitok zlepšiť.
+
+![Moodle](../../translated_images/moodle.94eb93d714a50cb2c97435b408017dee224348b61bc86203ffd43a4f4e57b95f.sk.png)  
+> Učebný plán v Moodle triede
+
+![Canvas](../../translated_images/canvas.fbd605ff8e5b8aff567d398528ce113db304446b90b9cad55c654de3fdfcda34.sk.png)  
+> Učebný plán v Canvas
+
+## Použitie repozitória v aktuálnom stave
+
+Ak by ste chceli použiť toto repozitórium tak, ako je, bez použitia GitHub Classroom, aj to je možné. Budete musieť komunikovať so svojimi študentmi, ktorou lekciou sa majú spoločne zaoberať.
+
+V online formáte (Zoom, Teams alebo iné) môžete vytvoriť skupinové miestnosti pre kvízy a mentorovať študentov, aby boli pripravení na učenie. Potom pozvite študentov na kvízy a nechajte ich odoslať svoje odpovede ako 'issues' v určitom čase. To isté môžete urobiť s úlohami, ak chcete, aby študenti pracovali spolu verejne.
+
+Ak preferujete súkromnejší formát, požiadajte svojich študentov, aby si forkovali učebný plán, lekciu po lekcii, do svojich vlastných súkromných GitHub repozitórií a dali vám prístup. Potom môžu dokončiť kvízy a úlohy súkromne a odoslať ich vám prostredníctvom issues vo vašom triednom repozitóriu.
+
+Existuje mnoho spôsobov, ako to môže fungovať v online triede. Dajte nám vedieť, čo vám najviac vyhovuje!
+
+## Podeľte sa s nami o svoje názory!
+
+Chceme, aby tento učebný plán fungoval pre vás a vašich študentov. Spojte sa s nami v [Teacher corner](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner) a otvorte [**nový issue**](https://github.com/microsoft/Web-Dev-For-Beginners/issues/new/choose) pre akékoľvek požiadavky, chyby a spätnú väzbu.
+
+---
+
+**Upozornenie**:  
+Tento dokument bol preložený pomocou služby na automatický preklad [Co-op Translator](https://github.com/Azure/co-op-translator). Aj keď sa snažíme o presnosť, upozorňujeme, že automatické preklady môžu obsahovať chyby alebo nepresnosti. Pôvodný dokument v jeho pôvodnom jazyku by mal byť považovaný za autoritatívny zdroj. Pre dôležité informácie sa odporúča profesionálny ľudský preklad. Nezodpovedáme za akékoľvek nedorozumenia alebo nesprávne interpretácie vyplývajúce z použitia tohto prekladu.
\ No newline at end of file
diff --git a/translations/sk/lesson-template/README.md b/translations/sk/lesson-template/README.md
new file mode 100644
index 00000000..6c66bde5
--- /dev/null
+++ b/translations/sk/lesson-template/README.md
@@ -0,0 +1,65 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "0494be70ad7fadd13a8c3d549c23e355",
+  "translation_date": "2025-08-27T22:43:58+00:00",
+  "source_file": "lesson-template/README.md",
+  "language_code": "sk"
+}
+-->
+# [Téma lekcie]
+
+![Vložte video sem](../../../lesson-template/video-url)
+
+## [Kvíz pred prednáškou](../../../lesson-template/quiz-url)
+
+[Opíšte, čo sa naučíme]
+
+### Úvod
+
+Opíšte, čo bude pokryté
+
+> Poznámky
+
+### Predpoklady
+
+Aké kroky by mali byť splnené pred touto lekciou?
+
+### Príprava
+
+Prípravné kroky na začatie tejto lekcie
+
+---
+
+[Prejdite obsahom v blokoch]
+
+## [Téma 1]
+
+### Úloha:
+
+Spolupracujte na postupnom vylepšovaní vášho kódu, aby ste vytvorili projekt so zdieľaným kódom:
+
+```html
+code blocks
+```
+
+✅ Kontrola vedomostí - využite tento moment na rozšírenie vedomostí študentov otvorenými otázkami
+
+## [Téma 2]
+
+## [Téma 3]
+
+🚀 Výzva: Pridajte výzvu pre študentov, aby na projekte spolupracovali v triede a vylepšili ho
+
+Voliteľné: pridajte snímku obrazovky dokončeného používateľského rozhrania lekcie, ak je to vhodné
+
+## [Kvíz po prednáške](../../../lesson-template/quiz-url)
+
+## Prehľad a samostatné štúdium
+
+**Termín odovzdania úlohy [MM/RR]**: [Názov úlohy](assignment.md)
+
+---
+
+**Upozornenie**:  
+Tento dokument bol preložený pomocou služby AI prekladu [Co-op Translator](https://github.com/Azure/co-op-translator). Hoci sa snažíme o presnosť, prosím, berte na vedomie, že automatizované preklady môžu obsahovať chyby alebo nepresnosti. Pôvodný dokument v jeho rodnom jazyku by mal byť považovaný za autoritatívny zdroj. Pre kritické informácie sa odporúča profesionálny ľudský preklad. Nie sme zodpovední za akékoľvek nedorozumenia alebo nesprávne interpretácie vyplývajúce z použitia tohto prekladu.
\ No newline at end of file
diff --git a/translations/sk/lesson-template/assignment.md b/translations/sk/lesson-template/assignment.md
new file mode 100644
index 00000000..70ca4785
--- /dev/null
+++ b/translations/sk/lesson-template/assignment.md
@@ -0,0 +1,23 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "b5f62ec256c7e43e771f0d3b4e1a9130",
+  "translation_date": "2025-08-27T22:44:20+00:00",
+  "source_file": "lesson-template/assignment.md",
+  "language_code": "sk"
+}
+-->
+# [Názov zadania]
+
+## Pokyny
+
+## Hodnotiace kritériá
+
+| Kritériá | Vynikajúce | Dostatočné | Vyžaduje zlepšenie |
+| -------- | ---------- | ---------- | ------------------ |
+|          |            |            |                    |
+
+---
+
+**Upozornenie**:  
+Tento dokument bol preložený pomocou služby AI prekladu [Co-op Translator](https://github.com/Azure/co-op-translator). Aj keď sa snažíme o presnosť, prosím, berte na vedomie, že automatizované preklady môžu obsahovať chyby alebo nepresnosti. Pôvodný dokument v jeho rodnom jazyku by mal byť považovaný za autoritatívny zdroj. Pre kritické informácie sa odporúča profesionálny ľudský preklad. Nie sme zodpovední za akékoľvek nedorozumenia alebo nesprávne interpretácie vyplývajúce z použitia tohto prekladu.
\ No newline at end of file
diff --git a/translations/sk/quiz-app/README.md b/translations/sk/quiz-app/README.md
new file mode 100644
index 00000000..afeb25ac
--- /dev/null
+++ b/translations/sk/quiz-app/README.md
@@ -0,0 +1,191 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "5301875c55bb305e6046bed3a4fd06d2",
+  "translation_date": "2025-08-27T22:51:37+00:00",
+  "source_file": "quiz-app/README.md",
+  "language_code": "sk"
+}
+-->
+# Aplikácia kvízov
+
+Tieto kvízy sú prednáškové a po-prednáškové kvízy pre kurikulum dátovej vedy na https://aka.ms/webdev-beginners
+
+## Pridanie preloženého súboru kvízov
+
+Pridajte preklad kvízov vytvorením zodpovedajúcich štruktúr kvízov v priečinku `assets/translations`. Kanonické kvízy sa nachádzajú v `assets/translations/en`. Kvízy sú rozdelené do niekoľkých skupín. Uistite sa, že číslovanie je zarovnané s príslušnou sekciou kvízov. Celkovo je v tomto kurikule 40 kvízov, pričom číslovanie začína od 0.
+
+  
+<details>
+<summary>Tu je štruktúra prekladového súboru:</summary>
+
+```
+[
+    {
+        "title": "A title",
+        "complete": "A complete button title",
+        "error": "An error message upon selecting the wrong answer",
+        "quizzes": [
+            {
+                "id": 1,
+                "title": "Title",
+                "quiz": [
+                    {
+                        "questionText": "The question asked",
+                        "answerOptions": [
+                            {
+                                "answerText": "Option 1 title",
+                                "isCorrect": true
+                            },
+                            {
+                                "answerText": "Option 2 title",
+                                "isCorrect": false
+                            }
+                        ]
+                    }
+                ]
+            }
+        ]
+    }
+]
+```
+</details>
+
+Po úprave prekladov upravte súbor index.js v priečinku prekladov tak, aby importoval všetky súbory podľa konvencií v `en`.
+
+Upravte súbor `index.js` v `assets/translations`, aby importoval nové preložené súbory. 
+
+Napríklad, ak je váš prekladový JSON v `ex.json`, nastavte 'ex' ako lokalizačný kľúč a potom ho zadajte takto, aby ste ho importovali:
+
+<details>
+<summary>index.js</summary>
+
+```
+import ex from "./ex.json";
+
+// if 'ex' is localization key then enter it like so in `messages` to expose it 
+
+const messages = {
+  ex: ex[0],
+};
+
+export default messages;
+```
+
+</details>
+
+## Spustenie aplikácie kvízov lokálne
+
+### Predpoklady
+
+- Účet na GitHub
+- [Node.js a Git](https://nodejs.org/)
+
+### Inštalácia a nastavenie
+
+1. Vytvorte repozitár z tejto [šablóny](https://github.com/new?template_name=Web-Dev-For-Beginners&template_owner=microsoft) 
+
+1. Naklonujte svoj nový repozitár a prejdite do priečinka quiz-app
+
+   ```bash
+   git clone https://github.com/your-github-organization/repo-name
+   cd repo-name/quiz-app
+   ```
+
+1. Nainštalujte npm balíčky a závislosti
+
+   ```bash
+   npm install
+   ```
+
+### Vytvorenie aplikácie
+
+1. Na vytvorenie riešenia spustite:
+
+   ```bash
+   npm run build
+   ```
+
+### Spustenie aplikácie
+
+1. Na spustenie riešenia spustite:
+
+    ```bash
+    npm run dev
+    ```
+
+### [Voliteľné] Lintovanie
+
+1. Na zabezpečenie správneho lintovania kódu spustite:
+
+    ```bash
+    npm run lint
+    ```
+
+## Nasadenie aplikácie kvízov na Azure 
+
+### Predpoklady
+- Predplatné na Azure. Zaregistrujte sa zadarmo [tu](https://aka.ms/azure-free).
+
+    _Odhad nákladov na nasadenie tejto aplikácie kvízov: ZADARMO_
+
+[![Deploy to Azure](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/#create/Microsoft.StaticApp)
+
+Po prihlásení na Azure cez vyššie uvedený odkaz vyberte predplatné a skupinu zdrojov, potom:
+
+- Detaily statickej webovej aplikácie: Zadajte názov a vyberte hostingový plán
+- Prihlásenie na GitHub: Nastavte zdroj nasadenia ako GitHub, potom sa prihláste a vyplňte požadované polia vo formulári:
+    - *Organizácia* – Vyberte svoju organizáciu.
+    - *Repozitár* – Vyberte repozitár kurikula Web Dev for Beginners. 
+    - *Vetva* - Vyberte vetvu (main) 
+- Prednastavenia zostavenia: Azure Static Web Apps používa detekčný algoritmus na zistenie frameworku použitého vo vašej aplikácii. 
+    - *Umiestnenie aplikácie* - ./quiz-app
+    - *Umiestnenie API* -
+    - *Umiestnenie výstupu* - dist
+- Nasadenie: Kliknite na 'Review + Create', potom 'Create'
+
+    Po nasadení bude vo vašom repozitári v adresári *.github* vytvorený súbor workflow. Tento súbor workflow obsahuje inštrukcie o udalostiach, ktoré spustia opätovné nasadenie aplikácie na Azure, napríklad _**push** na vetvu **main**_ atď.
+
+    <details>
+    <summary>Príklad súboru workflow</summary>
+    Tu je príklad, ako môže vyzerať súbor workflow pre GitHub Actions:
+    name: Azure Static Web Apps CI/CD
+
+    ```
+    on:
+    push:
+        branches:
+        - main
+    pull_request:
+        types: [opened, synchronize, reopened, closed]
+        branches:
+        - main
+
+    jobs:
+    build_and_deploy_job:
+        runs-on: ubuntu-latest
+        name: Build and Deploy Job
+        steps:
+        - uses: actions/checkout@v2
+        - name: Build And Deploy
+            id: builddeploy
+            uses: Azure/static-web-apps-deploy@v1
+            with:
+            azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
+            repo_token: ${{ secrets.GITHUB_TOKEN }}
+            action: "upload"
+            app_location: "quiz-app" # App source code path
+            api_location: ""API source code path optional
+            output_location: "dist" #Built app content directory - optional
+    ```
+
+    </details>
+
+- Po nasadení: Po dokončení nasadenia kliknite na 'Go to Deployment' a potom na 'View app in browser'.
+
+Keď sa váš GitHub Action (workflow) úspešne vykoná, obnovte živú stránku, aby ste si mohli pozrieť svoju aplikáciu.
+
+---
+
+**Upozornenie**:  
+Tento dokument bol preložený pomocou služby AI prekladu [Co-op Translator](https://github.com/Azure/co-op-translator). Aj keď sa snažíme o presnosť, prosím, berte na vedomie, že automatizované preklady môžu obsahovať chyby alebo nepresnosti. Pôvodný dokument v jeho pôvodnom jazyku by mal byť považovaný za autoritatívny zdroj. Pre kritické informácie sa odporúča profesionálny ľudský preklad. Nie sme zodpovední za akékoľvek nedorozumenia alebo nesprávne interpretácie vyplývajúce z použitia tohto prekladu.
\ No newline at end of file
diff --git a/translations/sl/1-getting-started-lessons/1-intro-to-programming-languages/README.md b/translations/sl/1-getting-started-lessons/1-intro-to-programming-languages/README.md
new file mode 100644
index 00000000..f365bb12
--- /dev/null
+++ b/translations/sl/1-getting-started-lessons/1-intro-to-programming-languages/README.md
@@ -0,0 +1,217 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "c63675cfaf1d223b37bb9fecbfe7c252",
+  "translation_date": "2025-08-27T23:00:26+00:00",
+  "source_file": "1-getting-started-lessons/1-intro-to-programming-languages/README.md",
+  "language_code": "sl"
+}
+-->
+# Uvod v programiranje in orodja za razvijalce
+
+Ta lekcija zajema osnove programskih jezikov. Teme, ki jih obravnavamo tukaj, veljajo za večino sodobnih programskih jezikov. V razdelku 'Orodja za razvijalce' boste spoznali uporabno programsko opremo, ki vam pomaga kot razvijalcu.
+
+![Uvod v programiranje](../../../../translated_images/webdev101-programming.d6e3f98e61ac4bff0b27dcbf1c3f16c8ed46984866f2d29988929678b0058fde.sl.png)
+> Sketchnote avtorja [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Predhodni kviz
+[Predhodni kviz](https://forms.office.com/r/dru4TE0U9n?origin=lprLink)
+
+## Uvod
+
+V tej lekciji bomo obravnavali:
+
+- Kaj je programiranje?
+- Vrste programskih jezikov
+- Osnovni elementi programa
+- Uporabna programska oprema in orodja za profesionalne razvijalce
+
+> To lekcijo lahko opravite na [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon)!
+
+## Kaj je programiranje?
+
+Programiranje (znano tudi kot kodiranje) je proces pisanja navodil za napravo, kot je računalnik ali mobilna naprava. Ta navodila pišemo s programskim jezikom, ki ga nato naprava interpretira. Ta sklop navodil ima lahko različna imena, kot so *program*, *računalniški program*, *aplikacija (app)* ali *izvedljiva datoteka*.
+
+*Program* je lahko karkoli, kar je napisano s kodo; spletne strani, igre in aplikacije za telefone so programi. Čeprav je mogoče ustvariti program brez pisanja kode, je osnovna logika interpretirana s strani naprave, ta logika pa je najverjetneje napisana s kodo. Program, ki *izvaja* ali *izvaja kodo*, izvaja navodila. Naprava, na kateri berete to lekcijo, izvaja program, da jo prikaže na vašem zaslonu.
+
+✅ Naredite malo raziskave: kdo velja za prvega računalniškega programerja na svetu?
+
+## Programski jeziki
+
+Programski jeziki omogočajo razvijalcem pisanje navodil za napravo. Naprave razumejo le binarno kodo (1 in 0), kar za *večino* razvijalcev ni učinkovit način komunikacije. Programski jeziki so sredstvo za komunikacijo med ljudmi in računalniki.
+
+Programski jeziki so na voljo v različnih formatih in lahko služijo različnim namenom. Na primer, JavaScript se uporablja predvsem za spletne aplikacije, medtem ko se Bash uporablja predvsem za operacijske sisteme.
+
+*Nizkonivojski jeziki* običajno zahtevajo manj korakov kot *visokonivojski jeziki*, da naprava interpretira navodila. Vendar pa so visokonivojski jeziki priljubljeni zaradi svoje berljivosti in podpore. JavaScript velja za visokonivojski jezik.
+
+Naslednja koda prikazuje razliko med visokonivojskim jezikom (JavaScript) in nizkonivojskim jezikom (ARM assembly koda).
+
+```javascript
+let number = 10
+let n1 = 0, n2 = 1, nextTerm;
+
+for (let i = 1; i <= number; i++) {
+    console.log(n1);
+    nextTerm = n1 + n2;
+    n1 = n2;
+    n2 = nextTerm;
+}
+```
+
+```c
+ area ascen,code,readonly
+ entry
+ code32
+ adr r0,thumb+1
+ bx r0
+ code16
+thumb
+ mov r0,#00
+ sub r0,r0,#01
+ mov r1,#01
+ mov r4,#10
+ ldr r2,=0x40000000
+back add r0,r1
+ str r0,[r2]
+ add r2,#04
+ mov r3,r0
+ mov r0,r1
+ mov r1,r3
+ sub r4,#01
+ cmp r4,#00
+ bne back
+ end
+```
+
+Verjeli ali ne, *obe kodi počneta isto*: izpisujeta Fibonacci zaporedje do 10.
+
+✅ Fibonacci zaporedje je [definirano](https://en.wikipedia.org/wiki/Fibonacci_number) kot niz števil, kjer je vsako število vsota dveh predhodnih, začenši z 0 in 1. Prvih 10 števil v Fibonacci zaporedju je 0, 1, 1, 2, 3, 5, 8, 13, 21 in 34.
+
+## Elementi programa
+
+Posamezno navodilo v programu se imenuje *izjava* in običajno vsebuje znak ali presledek, ki označuje, kje se navodilo konča ali *zaključi*. Način zaključka programa se razlikuje glede na jezik.
+
+Izjave v programu se lahko zanašajo na podatke, ki jih zagotovi uporabnik ali drug vir, da izvedejo navodila. Podatki lahko spremenijo vedenje programa, zato programski jeziki omogočajo začasno shranjevanje podatkov za kasnejšo uporabo. To imenujemo *spremenljivke*. Spremenljivke so izjave, ki napravi naročijo, naj podatke shrani v svoj pomnilnik. Spremenljivke v programih so podobne spremenljivkam v algebri, kjer imajo edinstveno ime in se njihova vrednost lahko spreminja skozi čas.
+
+Obstaja možnost, da nekatere izjave naprava ne bo izvedla. To je običajno načrtovano s strani razvijalca ali pa se zgodi po naključju, ko pride do nepričakovane napake. Takšna kontrola nad aplikacijo jo naredi bolj robustno in vzdržljivo. Te spremembe v kontroli se običajno zgodijo, ko so izpolnjeni določeni pogoji. Pogosta izjava, ki se uporablja v sodobnem programiranju za nadzor delovanja programa, je `if..else` izjava.
+
+✅ Več o tej vrsti izjave boste izvedeli v naslednjih lekcijah.
+
+## Orodja za razvijalce
+
+[![Orodja za razvijalce](https://img.youtube.com/vi/69WJeXGBdxg/0.jpg)](https://youtube.com/watch?v=69WJeXGBdxg "Orodja za razvijalce")
+
+> 🎥 Kliknite zgornjo sliko za video o orodjih
+
+V tem razdelku boste spoznali nekaj programske opreme, ki jo boste morda našli zelo uporabno na začetku svoje profesionalne poti kot razvijalec.
+
+**Razvojno okolje** je edinstven nabor orodij in funkcij, ki jih razvijalec pogosto uporablja pri pisanju programske opreme. Nekatera od teh orodij so prilagojena specifičnim potrebam razvijalca in se lahko sčasoma spremenijo, če razvijalec spremeni prioritete pri delu, osebnih projektih ali ko uporablja drug programski jezik. Razvojna okolja so tako edinstvena kot razvijalci, ki jih uporabljajo.
+
+### Urejevalniki
+
+Eden najpomembnejših pripomočkov za razvoj programske opreme je urejevalnik. Urejevalniki so mesta, kjer pišete svojo kodo in včasih tudi izvajate svojo kodo.
+
+Razvijalci se zanašajo na urejevalnike iz več razlogov:
+
+- *Odpravljanje napak* pomaga odkriti hrošče in napake z analizo kode vrstico po vrstico. Nekateri urejevalniki imajo funkcije za odpravljanje napak; te funkcije je mogoče prilagoditi in dodati za specifične programske jezike.
+- *Označevanje sintakse* dodaja barve in oblikovanje besedila kodi, kar jo naredi bolj berljivo. Večina urejevalnikov omogoča prilagoditev označevanja sintakse.
+- *Razširitve in integracije* so specializirana orodja za razvijalce, ki jih razvijalci niso vključili v osnovni urejevalnik. Na primer, mnogi razvijalci dokumentirajo svojo kodo, da pojasnijo, kako deluje. Morda bodo namestili razširitev za preverjanje črkovanja, da bi odkrili tipkarske napake v dokumentaciji. Večina razširitev je namenjena uporabi znotraj specifičnega urejevalnika, večina urejevalnikov pa omogoča iskanje razpoložljivih razširitev.
+- *Prilagoditev* omogoča razvijalcem ustvarjanje edinstvenega razvojnega okolja, ki ustreza njihovim potrebam. Večina urejevalnikov je izjemno prilagodljiva in omogoča tudi ustvarjanje lastnih razširitev.
+
+#### Priljubljeni urejevalniki in razširitve za spletni razvoj
+
+- [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)
+  - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker)
+  - [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare)
+  - [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
+- [Atom](https://atom.io/)
+  - [spell-check](https://atom.io/packages/spell-check)
+  - [teletype](https://atom.io/packages/teletype)
+  - [atom-beautify](https://atom.io/packages/atom-beautify)
+  
+- [Sublimetext](https://www.sublimetext.com/)
+  - [emmet](https://emmet.io/)
+  - [SublimeLinter](http://www.sublimelinter.com/en/stable/)
+
+### Brskalniki
+
+Drugo ključno orodje je brskalnik. Spletni razvijalci se zanašajo na brskalnik, da vidijo, kako njihova koda deluje na spletu. Brskalnik se uporablja tudi za prikaz vizualnih elementov spletne strani, ki so napisani v urejevalniku, kot je HTML.
+
+Veliko brskalnikov ima *orodja za razvijalce* (DevTools), ki vsebujejo nabor uporabnih funkcij in informacij, ki pomagajo razvijalcem zbirati in zajemati pomembne informacije o njihovi aplikaciji. Na primer: Če ima spletna stran napake, je včasih koristno vedeti, kdaj so se pojavile. DevTools v brskalniku je mogoče konfigurirati za zajemanje teh informacij.
+
+#### Priljubljeni brskalniki in DevTools
+
+- [Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)
+- [Chrome](https://developers.google.com/web/tools/chrome-devtools/)
+- [Firefox](https://developer.mozilla.org/docs/Tools)
+
+### Orodja ukazne vrstice
+
+Nekateri razvijalci imajo raje manj grafični pogled za svoje vsakodnevne naloge in se zanašajo na ukazno vrstico, da to dosežejo. Pisanje kode zahteva veliko tipkanja, nekateri razvijalci pa se raje ne motijo pri uporabi miške. Uporabljajo bližnjice na tipkovnici za preklapljanje med okni na namizju, delo na različnih datotekah in uporabo orodij. Večino nalog je mogoče opraviti z miško, vendar je ena od prednosti uporabe ukazne vrstice ta, da je veliko mogoče opraviti z orodji ukazne vrstice, ne da bi bilo treba preklapljati med miško in tipkovnico. Druga prednost ukazne vrstice je, da so konfigurabilne, lahko shranite prilagojeno konfiguracijo, jo kasneje spremenite in uvozite na druge razvojne naprave. Ker so razvojna okolja tako edinstvena za vsakega razvijalca, nekateri ne uporabljajo ukazne vrstice, nekateri se nanjo popolnoma zanašajo, nekateri pa imajo raje kombinacijo obojega.
+
+### Priljubljene možnosti ukazne vrstice
+
+Možnosti ukazne vrstice se razlikujejo glede na operacijski sistem, ki ga uporabljate.
+
+*💻 = prednameščeno na operacijskem sistemu.*
+
+#### Windows
+
+- [Powershell](https://docs.microsoft.com/powershell/scripting/overview?view=powershell-7/?WT.mc_id=academic-77807-sagibbon) 💻
+- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands/?WT.mc_id=academic-77807-sagibbon) (znana tudi kot CMD) 💻
+- [Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)
+- [mintty](https://mintty.github.io/)
+  
+#### MacOS
+
+- [Terminal](https://support.apple.com/guide/terminal/open-or-quit-terminal-apd5265185d-f365-44cb-8b09-71a064a42125/mac) 💻
+- [iTerm](https://iterm2.com/)
+- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-macos?view=powershell-7/?WT.mc_id=academic-77807-sagibbon)
+
+#### Linux
+
+- [Bash](https://www.gnu.org/software/bash/manual/html_node/index.html) 💻
+- [KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)
+- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-linux?view=powershell-7/?WT.mc_id=academic-77807-sagibbon)
+
+#### Priljubljena orodja ukazne vrstice
+
+- [Git](https://git-scm.com/) (💻 na večini operacijskih sistemov)
+- [NPM](https://www.npmjs.com/)
+- [Yarn](https://classic.yarnpkg.com/en/docs/cli/)
+
+### Dokumentacija
+
+Ko želi razvijalec izvedeti nekaj novega, se najverjetneje obrne na dokumentacijo, da se nauči, kako nekaj uporabljati. Razvijalci se pogosto zanašajo na dokumentacijo, da jih vodi skozi pravilno uporabo orodij in jezikov ter da pridobijo globlje razumevanje, kako delujejo.
+
+#### Priljubljena dokumentacija o spletnem razvoju
+
+- [Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web), od Mozille, založnika brskalnika [Firefox](https://www.mozilla.org/firefox/)
+- [Frontend Masters](https://frontendmasters.com/learn/)
+- [Web.dev](https://web.dev), od Googla, založnika brskalnika [Chrome](https://www.google.com/chrome/)
+- [Microsoftova dokumentacija za razvijalce](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers), za [Microsoft Edge](https://www.microsoft.com/edge)
+- [W3 Schools](https://www.w3schools.com/where_to_start.asp)
+
+✅ Naredite raziskavo: Zdaj, ko poznate osnove okolja spletnega razvijalca, primerjajte in kontrastirajte z okoljem spletnega oblikovalca.
+
+---
+
+## 🚀 Izziv
+
+Primerjajte nekaj programskih jezikov. Katere so nekatere edinstvene značilnosti JavaScripta v primerjavi z Javo? Kaj pa COBOL v primerjavi z Go?
+
+## Kviz po predavanju
+[Kviz po predavanju](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/2)
+
+## Pregled in samostojno učenje
+
+Preučite različne jezike, ki so na voljo programerju. Poskusite napisati vrstico v enem jeziku in jo nato prepisati v dveh drugih. Kaj ste se naučili?
+
+## Naloga
+
+[Branje dokumentacije](assignment.md)
+
+---
+
+**Omejitev odgovornosti**:  
+Ta dokument je bil preveden z uporabo storitve za prevajanje z umetno inteligenco [Co-op Translator](https://github.com/Azure/co-op-translator). Čeprav si prizadevamo za natančnost, vas prosimo, da upoštevate, da lahko avtomatizirani prevodi vsebujejo napake ali netočnosti. Izvirni dokument v njegovem maternem jeziku je treba obravnavati kot avtoritativni vir. Za ključne informacije priporočamo profesionalni človeški prevod. Ne prevzemamo odgovornosti za morebitna nesporazumevanja ali napačne razlage, ki bi nastale zaradi uporabe tega prevoda.
\ No newline at end of file
diff --git a/translations/sl/1-getting-started-lessons/1-intro-to-programming-languages/assignment.md b/translations/sl/1-getting-started-lessons/1-intro-to-programming-languages/assignment.md
new file mode 100644
index 00000000..2e34d50c
--- /dev/null
+++ b/translations/sl/1-getting-started-lessons/1-intro-to-programming-languages/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "1ce4deaec80130d3a0a3c906568459fc",
+  "translation_date": "2025-08-27T23:01:14+00:00",
+  "source_file": "1-getting-started-lessons/1-intro-to-programming-languages/assignment.md",
+  "language_code": "sl"
+}
+-->
+# Branje dokumentacije
+
+## Navodila
+
+Obstaja veliko orodij, ki jih spletni razvijalec morda potrebuje, in so na voljo na [MDN dokumentaciji za orodja na strani odjemalca](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview). Izberite 3 orodja, ki niso zajeta v lekciji, razložite, zakaj bi jih spletni razvijalec uporabil, in poiščite orodje, ki spada v to kategorijo, ter delite njegovo dokumentacijo. Ne uporabljajte istega primera orodja, ki je naveden v MDN dokumentaciji.
+
+## Merila ocenjevanja
+
+Odlično | Zadostno | Potrebne izboljšave
+--- | --- | -- |
+|Razloženo, zakaj bi spletni razvijalec uporabil orodje| Razloženo, kako, vendar ne zakaj bi razvijalec uporabil orodje| Ni omenjeno, kako ali zakaj bi razvijalec uporabil orodje  |
+
+---
+
+**Omejitev odgovornosti**:  
+Ta dokument je bil preveden z uporabo storitve za prevajanje z umetno inteligenco [Co-op Translator](https://github.com/Azure/co-op-translator). Čeprav si prizadevamo za natančnost, vas prosimo, da upoštevate, da lahko avtomatizirani prevodi vsebujejo napake ali netočnosti. Izvirni dokument v njegovem maternem jeziku je treba obravnavati kot avtoritativni vir. Za ključne informacije priporočamo profesionalni človeški prevod. Ne prevzemamo odgovornosti za morebitna napačna razumevanja ali napačne interpretacije, ki bi nastale zaradi uporabe tega prevoda.
\ No newline at end of file
diff --git a/translations/sl/1-getting-started-lessons/2-github-basics/README.md b/translations/sl/1-getting-started-lessons/2-github-basics/README.md
new file mode 100644
index 00000000..6c72352f
--- /dev/null
+++ b/translations/sl/1-getting-started-lessons/2-github-basics/README.md
@@ -0,0 +1,339 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "05666cecb8983a72cf0ce1d18932b5b7",
+  "translation_date": "2025-08-27T23:07:12+00:00",
+  "source_file": "1-getting-started-lessons/2-github-basics/README.md",
+  "language_code": "sl"
+}
+-->
+# Uvod v GitHub
+
+Ta lekcija zajema osnove GitHuba, platforme za gostovanje in upravljanje sprememb v vaši kodi.
+
+![Uvod v GitHub](../../../../translated_images/webdev101-github.8846d7971abef6f947909b4f9d343e2a23778aa716ca6b9d71df7174ee5009ac.sl.png)
+> Sketchnote avtorja [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Predhodni kviz
+[Predhodni kviz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/3)
+
+## Uvod
+
+V tej lekciji bomo obravnavali:
+
+- sledenje delu, ki ga opravljate na svojem računalniku
+- delo na projektih z drugimi
+- kako prispevati k odprtokodni programski opremi
+
+### Predpogoji
+
+Preden začnete, preverite, ali je Git nameščen. V terminal vnesite:  
+`git --version`
+
+Če Git ni nameščen, [prenesite Git](https://git-scm.com/downloads). Nato nastavite svoj lokalni Git profil v terminalu:
+* `git config --global user.name "vaše-ime"`
+* `git config --global user.email "vaš-email"`
+
+Če želite preveriti, ali je Git že konfiguriran, lahko vnesete:
+`git config --list`
+
+Poleg tega boste potrebovali GitHub račun, urejevalnik kode (na primer Visual Studio Code) in odprt terminal (ali ukazni poziv).
+
+Obiščite [github.com](https://github.com/) in ustvarite račun, če ga še nimate, ali se prijavite in izpolnite svoj profil.
+
+✅ GitHub ni edini repozitorij kode na svetu; obstajajo tudi drugi, vendar je GitHub najbolj znan.
+
+### Priprava
+
+Potrebovali boste mapo s projektom kode na svojem lokalnem računalniku (prenosniku ali PC-ju) in javni repozitorij na GitHubu, ki bo služil kot primer, kako prispevati k projektom drugih.
+
+---
+
+## Upravljanje kode
+
+Recimo, da imate lokalno mapo s projektom kode in želite začeti slediti svojemu napredku z uporabo git-a – sistema za nadzor različic. Nekateri primerjajo uporabo git-a s pisanjem ljubezenskega pisma svojemu prihodnjemu jazu. Ko boste čez dneve, tedne ali mesece prebirali svoja sporočila o potrditvah (commit messages), se boste lahko spomnili, zakaj ste sprejeli določeno odločitev, ali pa "razveljavili" spremembo – seveda, če pišete dobra sporočila o potrditvah.
+
+### Naloga: Ustvarite repozitorij in potrdite kodo  
+
+> Oglejte si video
+> 
+> [![Osnove Git in GitHub videa](https://img.youtube.com/vi/9R31OUPpxU4/0.jpg)](https://www.youtube.com/watch?v=9R31OUPpxU4)
+
+1. **Ustvarite repozitorij na GitHubu**. Na GitHub.com, v zavihku repozitoriji ali v zgornji desni navigacijski vrstici poiščite gumb **nov repozitorij**.
+
+   1. Dajte svojemu repozitoriju (mapi) ime.
+   1. Izberite **ustvari repozitorij**.
+
+1. **Pomaknite se do svoje delovne mape**. V terminalu preklopite na mapo (imenovano tudi imenik), ki ji želite začeti slediti. Vnesite:
+
+   ```bash
+   cd [name of your folder]
+   ```
+
+1. **Inicializirajte git repozitorij**. V svojem projektu vnesite:
+
+   ```bash
+   git init
+   ```
+
+1. **Preverite stanje**. Če želite preveriti stanje svojega repozitorija, vnesite:
+
+   ```bash
+   git status
+   ```
+
+   Izpis lahko izgleda nekako takole:
+
+   ```output
+   Changes not staged for commit:
+   (use "git add <file>..." to update what will be committed)
+   (use "git checkout -- <file>..." to discard changes in working directory)
+
+        modified:   file.txt
+        modified:   file2.txt
+   ```
+
+   Običajno ukaz `git status` pove stvari, kot so, katere datoteke so pripravljene za _shranjevanje_ v repozitorij ali imajo spremembe, ki jih morda želite ohraniti.
+
+1. **Dodajte vse datoteke za sledenje**  
+   To se imenuje tudi priprava datotek/dodajanje datotek v pripravljalno območje.
+
+   ```bash
+   git add .
+   ```
+
+   Ukaz `git add` z argumentom `.` označuje, da so vse vaše datoteke in spremembe pripravljene za sledenje.
+
+1. **Dodajte izbrane datoteke za sledenje**
+
+   ```bash
+   git add [file or folder name]
+   ```
+
+   To nam omogoča dodajanje samo izbranih datotek v pripravljalno območje, ko ne želimo potrditi vseh datotek naenkrat.
+
+1. **Odstranite vse datoteke iz pripravljalnega območja**
+
+   ```bash
+   git reset
+   ```
+
+   Ta ukaz nam omogoča, da odstranimo vse datoteke iz pripravljalnega območja naenkrat.
+
+1. **Odstranite določeno datoteko iz pripravljalnega območja**
+
+   ```bash
+   git reset [file or folder name]
+   ```
+
+   Ta ukaz nam omogoča, da odstranimo samo določeno datoteko iz pripravljalnega območja, ki je ne želimo vključiti v naslednjo potrditev.
+
+1. **Ohranite svoje delo**. Na tej točki ste dodali datoteke v tako imenovano _pripravljalno območje_. To je mesto, kjer Git sledi vašim datotekam. Da bi spremembo naredili trajno, morate _potrditi_ datoteke. To storite tako, da ustvarite _potrditev_ z ukazom `git commit`. _Potrditev_ predstavlja točko shranjevanja v zgodovini vašega repozitorija. Vnesite naslednje, da ustvarite _potrditev_:
+
+   ```bash
+   git commit -m "first commit"
+   ```
+
+   To potrdi vse vaše datoteke in doda sporočilo "prva potrditev". Za prihodnja sporočila o potrditvah boste želeli biti bolj opisni, da jasno izrazite, kakšno spremembo ste naredili.
+
+1. **Povežite svoj lokalni Git repozitorij z GitHubom**. Git repozitorij je koristen na vašem računalniku, vendar boste na neki točki želeli imeti varnostno kopijo svojih datotek nekje drugje in povabiti druge ljudi, da delajo z vami na vašem repozitoriju. Eden takšnih odličnih krajev je GitHub. Spomnite se, da smo že ustvarili repozitorij na GitHubu, zato moramo le povezati naš lokalni Git repozitorij z GitHubom. Ukaz `git remote add` bo to storil. Vnesite naslednji ukaz:
+
+   > Opomba: Preden vnesete ukaz, pojdite na stran svojega GitHub repozitorija, da najdete URL repozitorija. Uporabili ga boste v spodnjem ukazu. Zamenjajte ```https://github.com/username/repository_name.git``` z vašim GitHub URL-jem.
+
+   ```bash
+   git remote add origin https://github.com/username/repository_name.git
+   ```
+
+   To ustvari _oddaljeno povezavo_, imenovano "origin", ki kaže na GitHub repozitorij, ki ste ga ustvarili prej.
+
+1. **Pošljite lokalne datoteke na GitHub**. Do sedaj ste ustvarili _povezavo_ med lokalnim repozitorijem in GitHub repozitorijem. Pošljimo te datoteke na GitHub z naslednjim ukazom `git push`, kot sledi:
+
+   > Opomba: Vaše ime veje je lahko privzeto drugačno od ```main```.
+
+   ```bash
+   git push -u origin main
+   ```
+
+   To pošlje vaše potrditve v vaši veji "main" na GitHub.
+
+2. **Dodajte več sprememb**. Če želite nadaljevati z dodajanjem sprememb in njihovim pošiljanjem na GitHub, boste morali uporabiti naslednje tri ukaze:
+
+   ```bash
+   git add .
+   git commit -m "type your commit message here"
+   git push
+   ```
+
+   > Nasvet: Morda boste želeli sprejeti datoteko `.gitignore`, da preprečite, da bi se datoteke, ki jih ne želite slediti, prikazale na GitHubu – na primer tista datoteka z opombami, ki jo shranjujete v isti mapi, vendar nima mesta v javnem repozitoriju. Predloge za `.gitignore` datoteke lahko najdete na [.gitignore templates](https://github.com/github/gitignore).
+
+#### Sporočila o potrditvah
+
+Odličen naslov sporočila o potrditvi Git dopolni naslednji stavek:  
+Če se uporabi, bo ta potrditev <vaš naslov sporočila tukaj>.
+
+Za naslov uporabite ukazni, sedanjik: "spremeni" namesto "spremenjeno" ali "spreminja".  
+Kot pri naslovu, tudi v telesu (neobvezno) uporabite ukazni, sedanjik. Telo naj vključuje motivacijo za spremembo in kontrast s prejšnjim vedenjem. Razlagate `zakaj`, ne `kako`.
+
+✅ Vzemite si nekaj minut za brskanje po GitHubu. Ali lahko najdete res odlično sporočilo o potrditvi? Ali lahko najdete res minimalno? Katere informacije se vam zdijo najpomembnejše in najbolj koristne za sporočanje v sporočilu o potrditvi?
+
+### Naloga: Sodelujte
+
+Glavni razlog za objavo stvari na GitHubu je omogočiti sodelovanje z drugimi razvijalci.
+
+## Delo na projektih z drugimi
+
+> Oglejte si video
+>
+> [![Osnove Git in GitHub videa](https://img.youtube.com/vi/bFCM-PC3cu8/0.jpg)](https://www.youtube.com/watch?v=bFCM-PC3cu8)
+
+V svojem repozitoriju se pomaknite na `Insights > Community`, da vidite, kako se vaš projekt primerja s priporočenimi standardi skupnosti.
+
+   Tukaj je nekaj stvari, ki lahko izboljšajo vaš GitHub repozitorij:
+   - **Opis**. Ali ste dodali opis za svoj projekt?
+   - **README**. Ali ste dodali README? GitHub ponuja smernice za pisanje [README](https://docs.github.com/articles/about-readmes/?WT.mc_id=academic-77807-sagibbon).
+   - **Smernice za prispevanje**. Ali ima vaš projekt [smernice za prispevanje](https://docs.github.com/articles/setting-guidelines-for-repository-contributors/?WT.mc_id=academic-77807-sagibbon)?
+   - **Kodeks ravnanja**. [Kodeks ravnanja](https://docs.github.com/articles/adding-a-code-of-conduct-to-your-project/).
+   - **Licenca**. Morda najpomembneje, [licenca](https://docs.github.com/articles/adding-a-license-to-a-repository/).
+
+Vsi ti viri bodo koristili pri uvajanju novih članov ekipe. To so običajno stvari, ki jih novi sodelavci pregledajo, preden sploh pogledajo vašo kodo, da ugotovijo, ali je vaš projekt pravo mesto za njihovo porabo časa.
+
+✅ README datoteke, čeprav zahtevajo čas za pripravo, pogosto zanemarjajo zaposleni vzdrževalci. Ali lahko najdete primer posebej opisne README datoteke? Opomba: obstajajo nekateri [orodja za pomoč pri ustvarjanju dobrih README datotek](https://www.makeareadme.com/), ki jih morda želite preizkusiti.
+
+### Naloga: Združite nekaj kode
+
+Dokumenti o prispevanju pomagajo ljudem prispevati k projektu. Pojasnjujejo, kakšne vrste prispevkov iščete in kako poteka proces. Sodelavci bodo morali opraviti vrsto korakov, da bodo lahko prispevali k vašemu repozitoriju na GitHubu:
+
+1. **Forkanje vašega repozitorija**. Verjetno boste želeli, da ljudje _forkajo_ vaš projekt. Forkanje pomeni ustvarjanje replike vašega repozitorija na njihovem GitHub profilu.
+1. **Kloniranje**. Od tam bodo klonirali projekt na svoj lokalni računalnik.
+1. **Ustvarjanje veje**. Želeli boste, da ustvarijo _vejo_ za svoje delo.
+1. **Osredotočite spremembo na eno področje**. Prosite sodelavce, naj se osredotočijo na eno stvar naenkrat – tako so možnosti, da lahko _združite_ njihovo delo, večje. Predstavljajte si, da napišejo popravek napake, dodajo novo funkcijo in posodobijo več testov – kaj, če želite ali lahko implementirate le 2 od 3 ali 1 od 3 sprememb?
+
+✅ Predstavljajte si situacijo, kjer so veje še posebej ključne za pisanje in dostavo dobre kode. Katere primere uporabe si lahko zamislite?
+
+> Opomba: Bodite sprememba, ki jo želite videti v svetu, in ustvarite veje za svoje delo. Vsaka potrditev, ki jo naredite, bo narejena na veji, na kateri ste trenutno "prijavljeni". Uporabite `git status`, da vidite, na kateri veji ste.
+
+Pojdimo skozi potek dela sodelavca. Predpostavimo, da je sodelavec že _forkal_ in _kloniral_ repozitorij, tako da ima Git repozitorij pripravljen za delo na svojem lokalnem računalniku:
+
+1. **Ustvarite vejo**. Uporabite ukaz `git branch`, da ustvarite vejo, ki bo vsebovala spremembe, ki jih nameravajo prispevati:
+
+   ```bash
+   git branch [branch-name]
+   ```
+
+1. **Preklopite na delovno vejo**. Preklopite na določeno vejo in posodobite delovni imenik z ukazom `git switch`:
+
+   ```bash
+   git switch [branch-name]
+   ```
+
+1. **Opravite delo**. Na tej točki želite dodati svoje spremembe. Ne pozabite o tem obvestiti Git z naslednjimi ukazi:
+
+   ```bash
+   git add .
+   git commit -m "my changes"
+   ```
+
+   Poskrbite, da boste svoji potrditvi dali dobro ime, tako za vas kot za vzdrževalca repozitorija, ki mu pomagate.
+
+1. **Združite svoje delo z vejo `main`**. Na neki točki ste končali z delom in želite združiti svoje delo z vejo `main`. Veja `main` se je medtem morda spremenila, zato se prepričajte, da jo najprej posodobite na najnovejšo različico z naslednjimi ukazi:
+
+   ```bash
+   git switch main
+   git pull
+   ```
+
+   Na tej točki želite zagotoviti, da se morebitni _konflikti_, situacije, kjer Git ne more zlahka _združiti_ sprememb, zgodijo v vaši delovni veji. Zato zaženite naslednje ukaze:
+
+   ```bash
+   git switch [branch_name]
+   git merge main
+   ```
+
+   To bo prineslo vse spremembe iz `main` v vašo vejo in upajmo, da boste lahko nadaljevali. Če ne, vam bo VS Code pokazal, kje je Git _zmeden_, in preprosto spremenite prizadete datoteke, da določite, katera vsebina je najbolj natančna.
+
+1. **Pošljite svoje delo na GitHub**. Pošiljanje vašega dela na GitHub pomeni dve stvari. Potiskanje vaše veje v vaš repozitorij in nato odpiranje PR (Pull Request).
+
+   ```bash
+   git push --set-upstream origin [branch-name]
+   ```
+
+   Zgornji ukaz ustvari vejo v vašem forked repozitoriju.
+
+1. **Odprite PR**. Nato želite odpreti PR. To storite tako, da se pomaknete do forked repozitorija na GitHubu. Videli boste indikacijo na GitHubu, kjer vas vpraša, ali želite ustvariti nov PR, kliknete to in preusmerjeni boste na vmesnik, kjer lahko spremenite naslov sporočila o potrditvi, mu daste bolj primerno opis. Zdaj bo vzdrževalec repozitorija, ki ste ga forkali, videl ta PR in _držimo pesti_, da ga bo cenil in _združil_ vaš PR. Zdaj ste sodelavec, bravo :)
+
+1. **Počistite**. Velja za dobro prakso, da _počistite_ po uspešnem združevanju PR. Želite počistiti tako lokalno vejo kot vejo, ki ste jo potisnili na GitHub. Najprej jo izbrišimo lokalno z naslednjim ukazom:
+
+   ```bash
+   git branch -d [branch-name]
+   ```
+Pojdi na GitHub stran za razvejan repozitorij in odstrani oddaljeno vejo, ki si jo pravkar potisnil nanjo.
+
+`Pull request` se zdi kot nenavadna fraza, saj v resnici želiš potisniti svoje spremembe v projekt. Vendar mora vzdrževalec (lastnik projekta) ali osrednja ekipa preučiti tvoje spremembe, preden jih združi z "glavno" vejo projekta, zato v bistvu zahtevaš odločitev o spremembi od vzdrževalca.
+
+Pull request je mesto, kjer primerjaš in razpravljaš o razlikah, uvedenih na veji, z ocenami, komentarji, integriranimi testi in še več. Dober pull request sledi približno istim pravilom kot sporočilo ob commitu. Lahko dodaš referenco na težavo v sledilniku težav, na primer, ko tvoje delo odpravi težavo. To se naredi z uporabo `#`, ki mu sledi številka tvoje težave. Na primer `#97`.
+
+🤞Držimo pesti, da vsi pregledi uspejo in da lastnik(i) projekta združijo tvoje spremembe v projekt🤞
+
+Posodobi svojo trenutno lokalno delovno vejo z vsemi novimi commit-i iz ustrezne oddaljene veje na GitHubu:
+
+`git pull`
+
+## Kako prispevati k odprtokodni programski opremi
+
+Najprej poiščimo repozitorij (ali **repo**) na GitHubu, ki te zanima in h kateremu bi rad prispeval spremembo. Njegovo vsebino boš želel kopirati na svoj računalnik.
+
+✅ Dober način za iskanje repozitorijev, prijaznih za začetnike, je [iskanje po oznaki 'good-first-issue'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/).
+
+![Kopiraj repo lokalno](../../../../translated_images/clone_repo.5085c48d666ead57664f050d806e325d7f883be6838c821e08bc823ab7c66665.sl.png)
+
+Obstaja več načinov za kopiranje kode. Eden od načinov je "kloniranje" vsebine repozitorija z uporabo HTTPS, SSH ali GitHub CLI (Command Line Interface).
+
+Odpri svoj terminal in kloniraj repozitorij na naslednji način:
+`git clone https://github.com/ProjectURL`
+
+Za delo na projektu preklopi v pravo mapo:
+`cd ProjectURL`
+
+Celoten projekt lahko odpreš tudi z [Codespaces](https://github.com/features/codespaces), vgrajenim urejevalnikom kode / oblačnim razvojnim okoljem GitHuba, ali z [GitHub Desktop](https://desktop.github.com/).
+
+Nazadnje lahko kodo preneseš v zipani mapi.
+
+### Nekaj zanimivosti o GitHubu
+
+Na GitHubu lahko označiš z zvezdico, spremljaš ali "forkaš" kateri koli javni repozitorij. Svoje označene repozitorije najdeš v spustnem meniju zgoraj desno. To je kot zaznamovanje, vendar za kodo.
+
+Projekti imajo sledilnik težav, večinoma na GitHubu v zavihku "Issues", razen če ni navedeno drugače, kjer ljudje razpravljajo o težavah, povezanih s projektom. Zavihek Pull Requests je mesto, kjer ljudje razpravljajo in ocenjujejo spremembe, ki so v teku.
+
+Projekti imajo lahko tudi razprave v forumih, poštnih seznamih ali klepetalnih kanalih, kot so Slack, Discord ali IRC.
+
+✅ Razglej se po svojem novem GitHub repozitoriju in preizkusi nekaj stvari, kot so urejanje nastavitev, dodajanje informacij v repozitorij in ustvarjanje projekta (na primer Kanban deske). Možnosti je veliko!
+
+---
+
+## 🚀 Izziv
+
+Sodeluj s prijateljem pri delu na kodi drug drugega. Ustvari projekt skupaj, forkaj kodo, ustvari veje in združi spremembe.
+
+## Kviz po predavanju
+[Kviz po predavanju](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/4)
+
+## Pregled in samostojno učenje
+
+Preberi več o [prispevanju k odprtokodni programski opremi](https://opensource.guide/how-to-contribute/#how-to-submit-a-contribution).
+
+[Git goljufija](https://training.github.com/downloads/github-git-cheat-sheet/).
+
+Vadi, vadi, vadi. GitHub ima odlične učne poti, ki so na voljo prek [skills.github.com](https://skills.github.com):
+
+- [Prvi teden na GitHubu](https://skills.github.com/#first-week-on-github)
+
+Najdeš lahko tudi bolj napredne tečaje.
+
+## Naloga
+
+Dokončaj [tečaj Prvi teden na GitHubu](https://skills.github.com/#first-week-on-github).
+
+---
+
+**Omejitev odgovornosti**:  
+Ta dokument je bil preveden z uporabo storitve za prevajanje z umetno inteligenco [Co-op Translator](https://github.com/Azure/co-op-translator). Čeprav si prizadevamo za natančnost, vas prosimo, da upoštevate, da lahko avtomatizirani prevodi vsebujejo napake ali netočnosti. Izvirni dokument v njegovem maternem jeziku je treba obravnavati kot avtoritativni vir. Za ključne informacije priporočamo profesionalni človeški prevod. Ne prevzemamo odgovornosti za morebitna nesporazumevanja ali napačne razlage, ki bi nastale zaradi uporabe tega prevoda.
\ No newline at end of file
diff --git a/translations/sl/1-getting-started-lessons/3-accessibility/README.md b/translations/sl/1-getting-started-lessons/3-accessibility/README.md
new file mode 100644
index 00000000..0fcb37f9
--- /dev/null
+++ b/translations/sl/1-getting-started-lessons/3-accessibility/README.md
@@ -0,0 +1,244 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "e4cd5b1faed4adab5acf720f82798003",
+  "translation_date": "2025-08-27T23:04:00+00:00",
+  "source_file": "1-getting-started-lessons/3-accessibility/README.md",
+  "language_code": "sl"
+}
+-->
+# Ustvarjanje dostopnih spletnih strani
+
+![Vse o dostopnosti](../../../../translated_images/webdev101-a11y.8ef3025c858d897a403a1a42c0897c76e11b724d9a8a0c0578dd4316f7507622.sl.png)
+> Sketchnote avtorja [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Kviz pred predavanjem
+[Kviz pred predavanjem](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/5)
+
+> Moč spleta je v njegovi univerzalnosti. Dostop za vse, ne glede na invalidnost, je bistven vidik.
+>
+> \- Sir Timothy Berners-Lee, direktor W3C in izumitelj svetovnega spleta
+
+Ta citat odlično poudarja pomen ustvarjanja dostopnih spletnih strani. Aplikacija, ki ni dostopna vsem, je po definiciji izključujoča. Kot spletni razvijalci bi morali vedno imeti v mislih dostopnost. Če se na to osredotočimo že od začetka, bomo na dobri poti, da zagotovimo dostopnost strani, ki jih ustvarimo. V tej lekciji boste spoznali orodja, ki vam lahko pomagajo zagotoviti dostopnost vaših spletnih virov, in kako graditi z mislijo na dostopnost.
+
+> To lekcijo lahko opravite na [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/accessibility/?WT.mc_id=academic-77807-sagibbon)!
+
+## Orodja za uporabo
+
+### Bralniki zaslona
+
+Ena najbolj znanih orodij za dostopnost so bralniki zaslona.
+
+[Bralniki zaslona](https://en.wikipedia.org/wiki/Screen_reader) so pogosto uporabljeni pripomočki za osebe z okvarami vida. Tako kot se trudimo, da brskalnik pravilno prikaže informacije, ki jih želimo deliti, moramo zagotoviti, da enako velja za bralnik zaslona.
+
+V svoji osnovni obliki bralnik zaslona zvočno bere stran od zgoraj navzdol. Če je vaša stran sestavljena samo iz besedila, bo bralnik informacije posredoval podobno kot brskalnik. Seveda pa spletne strani redko vsebujejo zgolj besedilo; vključujejo povezave, grafike, barve in druge vizualne komponente. Poskrbeti moramo, da bralnik zaslona te informacije pravilno prebere.
+
+Vsak spletni razvijalec bi se moral seznaniti z delovanjem bralnika zaslona. Kot smo že omenili, je to orodje, ki ga bodo uporabljali vaši uporabniki. Tako kot poznate delovanje brskalnika, bi morali razumeti tudi delovanje bralnika zaslona. Na srečo so bralniki zaslona vgrajeni v večino operacijskih sistemov.
+
+Nekateri brskalniki imajo tudi vgrajena orodja in razširitve, ki lahko berejo besedilo na glas ali celo nudijo osnovne navigacijske funkcije, kot so [ta orodja za dostopnost v brskalniku Edge](https://support.microsoft.com/help/4000734/microsoft-edge-accessibility-features). Ta orodja so prav tako pomembna, vendar delujejo drugače kot bralniki zaslona in jih ne smemo zamenjevati za orodja za testiranje bralnikov zaslona.
+
+✅ Preizkusite bralnik zaslona in brskalniško orodje za branje besedila. Na Windows je privzeto vključen [Narrator](https://support.microsoft.com/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c172f109bdb1/?WT.mc_id=academic-77807-sagibbon), lahko pa namestite tudi [JAWS](https://webaim.org/articles/jaws/) in [NVDA](https://www.nvaccess.org/about-nvda/). Na macOS in iOS je privzeto nameščen [VoiceOver](https://support.apple.com/guide/voiceover/welcome/10).
+
+### Povečava
+
+Drugo pogosto uporabljeno orodje za osebe z okvarami vida je povečava. Najosnovnejša oblika povečave je statična povečava, ki jo nadzorujemo s kombinacijo `Control + znak plus (+)` ali z zmanjšanjem ločljivosti zaslona. Ta vrsta povečave poveča celotno stran, zato je uporaba [odzivnega oblikovanja](https://developer.mozilla.org/docs/Learn/CSS/CSS_layout/Responsive_Design) pomembna za zagotavljanje dobre uporabniške izkušnje pri povečanih ravneh povečave.
+
+Druga vrsta povečave temelji na specializirani programski opremi, ki poveča določen del zaslona in omogoča premikanje, podobno kot uporaba povečevalnega stekla. Na Windows je vgrajeno orodje [Magnifier](https://support.microsoft.com/windows/use-magnifier-to-make-things-on-the-screen-easier-to-see-414948ba-8b1c-d3bd-8615-0e5e32204198), [ZoomText](https://www.freedomscientific.com/training/zoomtext/getting-started/) pa je programska oprema tretjih oseb z več funkcijami in širšo uporabniško bazo. Tako macOS kot iOS imata vgrajeno programsko opremo za povečavo, imenovano [Zoom](https://www.apple.com/accessibility/mac/vision/).
+
+### Preverjevalniki kontrasta
+
+Barve na spletnih straneh je treba skrbno izbrati, da ustrezajo potrebam barvno slepih uporabnikov ali oseb, ki težko vidijo barve z nizkim kontrastom.
+
+✅ Preizkusite spletno stran, ki jo radi uporabljate, glede uporabe barv z razširitvijo brskalnika, kot je [WCAG-ov preverjevalnik barv](https://microsoftedge.microsoft.com/addons/detail/wcag-color-contrast-check/idahaggnlnekelhgplklhfpchbfdmkjp?hl=en-US&WT.mc_id=academic-77807-sagibbon). Kaj ste ugotovili?
+
+### Lighthouse
+
+V razdelku za razvijalce vašega brskalnika boste našli orodje Lighthouse. To orodje je pomembno za prvi vpogled v dostopnost (pa tudi druge analize) spletne strani. Čeprav se ni dobro zanašati izključno na Lighthouse, je 100-odstotna ocena zelo koristna kot izhodišče.
+
+✅ Poiščite Lighthouse v razdelku za razvijalce vašega brskalnika in izvedite analizo na kateri koli strani. Kaj ste odkrili?
+
+## Oblikovanje za dostopnost
+
+Dostopnost je razmeroma obsežna tema. Da bi vam pomagali, je na voljo veliko virov.
+
+- [Accessible U - University of Minnesota](https://accessibility.umn.edu/your-role/web-developers)
+
+Čeprav ne bomo mogli pokriti vseh vidikov ustvarjanja dostopnih strani, so spodaj navedena nekatera osnovna načela, ki jih boste želeli uvesti. Oblikovanje dostopne strani že od začetka je **vedno** lažje kot naknadno prilagajanje obstoječe strani.
+
+## Dobri principi prikaza
+
+### Barvno varne palete
+
+Ljudje vidijo svet na različne načine, kar vključuje tudi barve. Pri izbiri barvne sheme za vašo stran morate zagotoviti, da je dostopna vsem. Odlično [orodje za ustvarjanje barvnih palet je Color Safe](http://colorsafe.co/).
+
+✅ Prepoznajte spletno stran, ki je zelo problematična pri uporabi barv. Zakaj?
+
+### Uporabite pravilni HTML
+
+S CSS in JavaScriptom je mogoče vsak element narediti, da izgleda kot katera koli vrsta kontrolnika. `<span>` bi lahko uporabili za ustvarjanje `<button>`, `<b>` pa bi lahko postal hiperpovezava. Čeprav se to morda zdi lažje za oblikovanje, ne posreduje nobenih informacij bralniku zaslona. Uporabite ustrezen HTML pri ustvarjanju kontrolnikov na strani. Če želite hiperpovezavo, uporabite `<a>`. Uporaba pravilnega HTML-ja za pravi kontrolnik se imenuje uporaba semantičnega HTML-ja.
+
+✅ Obiščite katero koli spletno stran in preverite, ali oblikovalci in razvijalci pravilno uporabljajo HTML. Ali lahko najdete gumb, ki bi moral biti povezava? Namig: z desnim klikom izberite 'Ogled izvorne kode strani' v brskalniku, da si ogledate osnovno kodo.
+
+### Ustvarite opisno hierarhijo naslovov
+
+Uporabniki bralnikov zaslona [močno zanašajo na naslove](https://webaim.org/projects/screenreadersurvey8/#finding) za iskanje informacij in navigacijo po strani. Pisanje opisne vsebine naslovov in uporaba semantičnih oznak naslovov sta pomembna za ustvarjanje strani, ki je enostavna za navigacijo za uporabnike bralnikov zaslona.
+
+### Uporabite dobre vizualne namige
+
+CSS omogoča popoln nadzor nad videzom katerega koli elementa na strani. Lahko ustvarite besedilna polja brez obrobe ali hiperpovezave brez podčrtaja. Na žalost lahko odstranjevanje teh namigov oteži prepoznavanje vrste kontrolnika za nekoga, ki je odvisen od njih.
+
+## Pomen besedila povezav
+
+Hiperpovezave so ključne za navigacijo po spletu. Zato je zagotavljanje, da bralnik zaslona pravilno prebere povezave, ključno za omogočanje navigacije vsem uporabnikom.
+
+### Bralniki zaslona in povezave
+
+Kot bi pričakovali, bralniki zaslona berejo besedilo povezav na enak način kot katero koli drugo besedilo na strani. S tem v mislih se lahko zdi spodnji primer povsem sprejemljiv.
+
+> Mali pingvin, včasih znan kot pravljični pingvin, je najmanjši pingvin na svetu. [Kliknite tukaj](https://en.wikipedia.org/wiki/Little_penguin) za več informacij.
+
+> Mali pingvin, včasih znan kot pravljični pingvin, je najmanjši pingvin na svetu. Obiščite https://en.wikipedia.org/wiki/Little_penguin za več informacij.
+
+> **OPOMBA** Kot boste prebrali, **nikoli** ne ustvarjajte povezav, ki izgledajo kot zgoraj navedene.
+
+Zapomnite si, bralniki zaslona so drugačen vmesnik od brskalnikov z drugačnim naborom funkcij.
+
+### Težava z uporabo URL-ja
+
+Bralniki zaslona berejo besedilo. Če se URL pojavi v besedilu, bo bralnik zaslona prebral URL. Na splošno URL ne posreduje smiselnih informacij in lahko zveni moteče. Morda ste to že doživeli, če vam je telefon kdaj zvočno prebral sporočilo z URL-jem.
+
+### Težava z "kliknite tukaj"
+
+Bralniki zaslona imajo tudi možnost branja samo hiperpovezav na strani, podobno kot bi vidna oseba preletela stran za povezavami. Če je besedilo povezave vedno "kliknite tukaj", bo uporabnik slišal samo "kliknite tukaj, kliknite tukaj, kliknite tukaj, kliknite tukaj, kliknite tukaj, ..." Vse povezave so zdaj med seboj nerazločljive.
+
+### Dobro besedilo povezav
+
+Dobro besedilo povezav na kratko opisuje, kaj je na drugi strani povezave. V zgornjem primeru o malih pingvinih povezava vodi na stran Wikipedije o tej vrsti. Fraza *mali pingvini* bi bila popolno besedilo povezave, saj jasno pove, kaj bo nekdo izvedel, če klikne povezavo - mali pingvini.
+
+> [Mali pingvin](https://en.wikipedia.org/wiki/Little_penguin), včasih znan kot pravljični pingvin, je najmanjši pingvin na svetu.
+
+✅ Brskajte po spletu nekaj minut in poiščite strani, ki uporabljajo nejasne strategije povezovanja. Primerjajte jih z drugimi, bolje povezanimi stranmi. Kaj ste se naučili?
+
+#### Opombe za iskalnike
+
+Kot dodaten bonus zagotavljanja dostopnosti vaše strani boste pomagali tudi iskalnikom pri navigaciji po vaši strani. Iskalniki uporabljajo besedilo povezav za razumevanje tematik strani. Tako uporaba dobrega besedila povezav koristi vsem!
+
+### ARIA
+
+Predstavljajte si naslednjo stran:
+
+| Izdelek      | Opis              | Naročilo          |
+| ------------ | ----------------- | ----------------- |
+| Widget       | [Opis](../../../../1-getting-started-lessons/3-accessibility/')       | [Naročilo](../../../../1-getting-started-lessons/3-accessibility/')   |
+| Super widget | [Opis](../../../../1-getting-started-lessons/3-accessibility/')       | [Naročilo](../../../../1-getting-started-lessons/3-accessibility/')   |
+
+V tem primeru je podvajanje besedila "opis" in "naročilo" smiselno za nekoga, ki uporablja brskalnik. Vendar pa bi nekdo, ki uporablja bralnik zaslona, slišal le besedi *opis* in *naročilo* brez konteksta.
+
+Za podporo takšnim scenarijem HTML podpira nabor atributov, znanih kot [Dostopne bogate internetne aplikacije (ARIA)](https://developer.mozilla.org/docs/Web/Accessibility/ARIA). Ti atributi omogočajo posredovanje dodatnih informacij bralnikom zaslona.
+
+> **OPOMBA**: Tako kot pri mnogih vidikih HTML-ja se lahko podpora brskalnikov in bralnikov zaslona razlikuje. Vendar večina glavnih odjemalcev podpira ARIA atribute.
+
+Atribut `aria-label` lahko uporabite za opis povezave, kadar format strani tega ne omogoča. Opis za widget bi lahko bil nastavljen kot
+
+``` html
+<a href="#" aria-label="Widget description">description</a>
+```
+
+✅ Na splošno uporaba semantičnega označevanja, kot je opisano zgoraj, presega uporabo ARIA, vendar včasih ni semantičnega ekvivalenta za različne HTML pripomočke. Dober primer je drevo. Za drevo ni HTML ekvivalenta, zato identificirate generični `<div>` za ta element s pravilno vlogo in vrednostmi ARIA. [MDN dokumentacija o ARIA](https://developer.mozilla.org/docs/Web/Accessibility/ARIA) vsebuje več uporabnih informacij.
+
+```html
+<h2 id="tree-label">File Viewer</h2>
+<div role="tree" aria-labelledby="tree-label">
+  <div role="treeitem" aria-expanded="false" tabindex="0">Uploads</div>
+</div>
+```
+
+## Slike
+
+Samoumevno je, da bralniki zaslona ne morejo samodejno prebrati, kaj je na sliki. Zagotavljanje dostopnosti slik ne zahteva veliko dela - za to je namenjen atribut `alt`. Vse smiselne slike bi morale imeti `alt`, ki opisuje, kaj predstavljajo.  
+Slike, ki so zgolj dekorativne, bi morale imeti atribut `alt` nastavljen na prazno vrednost: `alt=""`. To preprečuje, da bi bralniki zaslona po nepotrebnem napovedovali dekorativno sliko.
+
+✅ Kot bi pričakovali, tudi iskalniki ne morejo razumeti, kaj je na sliki. Tudi oni uporabljajo besedilo `alt`. Tako zagotavljanje dostopnosti vaše strani prinaša dodatne prednosti!
+
+## Tipkovnica
+
+Nekateri uporabniki ne morejo uporabljati miške ali sledilne ploščice, zato se zanašajo na interakcije s tipkovnico za premikanje od enega elementa do drugega. Pomembno je, da vaša spletna stran predstavi vsebino v logičnem vrstnem redu, tako da lahko uporabnik tipkovnice dostopa do vsakega interaktivnega elementa, ko se premika po dokumentu. Če gradite svoje spletne strani s semantičnim označevanjem in uporabljate CSS za oblikovanje njihovega vizualnega postavitve, bi morala biti vaša stran dostopna s tipkovnico, vendar je pomembno, da ta vidik preizkusite ročno. Več o [strategijah navigacije s tipkovnico](https://webaim.org/techniques/keyboard/) lahko izveste tukaj.
+
+✅ Obiščite katero koli spletno stran in poskusite navigirati po njej samo s tipkovnico. Kaj deluje, kaj ne deluje? Zakaj?
+
+## Povzetek
+
+Splet, ki je dostopen le nekaterim, ni resnično 'svetovni splet'. Najboljši način za zagotavljanje dostopnosti strani, ki jih ustvarite, je vključitev najboljših praks za dostopnost že od začetka. Čeprav so potrebni dodatni koraki, bo vključitev teh veščin v vaš delovni proces zdaj pomenila, da bodo vse strani, ki jih ustvarite, dostopne.
+
+---
+
+## 🚀 Izziv
+
+Vzemite ta HTML in ga prepišite tako, da bo čim bolj dostopen, glede na strategije, ki ste se jih naučili.
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>
+      Example
+    </title>
+    <link href='../assets/style.css' rel='stylesheet' type='text/css'>
+  </head>
+  <body>
+    <div class="site-header">
+      <p class="site-title">Turtle Ipsum</p>
+      <p class="site-subtitle">The World's Premier Turtle Fan Club</p>
+    </div>
+    <div class="main-nav">
+      <p class="nav-header">Resources</p>
+      <div class="nav-list">
+        <p class="nav-item nav-item-bull"><a href="https://www.youtube.com/watch?v=CMNry4PE93Y">"I like turtles"</a></p>
+        <p class="nav-item nav-item-bull"><a href="https://en.wikipedia.org/wiki/Turtle">Basic Turtle Info</a></p>
+        <p class="nav-item nav-item-bull"><a href="https://en.wikipedia.org/wiki/Turtles_(chocolate)">Chocolate Turtles</a></p>
+      </div>
+    </div>
+    <div class="main-content">
+      <div>
+        <p class="page-title">Welcome to Turtle Ipsum. 
+            <a href="">Click here</a> to learn more.
+        </p>
+        <p class="article-text">
+          Turtle ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
+        </p>
+      </div>
+    </div>
+    <div class="footer">
+      <div class="footer-section">
+        <span class="button">Sign up for turtle news</span>
+      </div><div class="footer-section">
+        <p class="nav-header footer-title">
+          Internal Pages
+        </p>
+        <div class="nav-list">
+          <p class="nav-item nav-item-bull"><a href="../">Index</a></p>
+          <p class="nav-item nav-item-bull"><a href="../semantic">Semantic Example</a></p>
+        </div>
+      </div>
+      <p class="footer-copyright">&copy; 2016 Instrument</span>
+    </div>
+  </body>
+</html>
+```
+
+## Kviz po predavanju
+[Kviz po predavanju](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/6)
+
+## Pregled in samostojno učenje
+Mnoge vlade imajo zakone glede zahtev za dostopnost. Preberite zakone o dostopnosti v svoji državi. Kaj je zajeto in kaj ni? Primer je [ta vladna spletna stran](https://accessibility.blog.gov.uk/).
+
+## Naloga
+
+[Analizirajte nedostopno spletno stran](assignment.md)
+
+Zasluge: [Turtle Ipsum](https://github.com/Instrument/semantic-html-sample) avtorja Instrument
+
+---
+
+**Omejitev odgovornosti**:  
+Ta dokument je bil preveden z uporabo storitve za prevajanje z umetno inteligenco [Co-op Translator](https://github.com/Azure/co-op-translator). Čeprav si prizadevamo za natančnost, vas prosimo, da upoštevate, da lahko avtomatizirani prevodi vsebujejo napake ali netočnosti. Izvirni dokument v njegovem maternem jeziku je treba obravnavati kot avtoritativni vir. Za ključne informacije priporočamo profesionalni človeški prevod. Ne prevzemamo odgovornosti za morebitna napačna razumevanja ali napačne interpretacije, ki bi nastale zaradi uporabe tega prevoda.
\ No newline at end of file
diff --git a/translations/sl/1-getting-started-lessons/3-accessibility/assignment.md b/translations/sl/1-getting-started-lessons/3-accessibility/assignment.md
new file mode 100644
index 00000000..a8ab27b9
--- /dev/null
+++ b/translations/sl/1-getting-started-lessons/3-accessibility/assignment.md
@@ -0,0 +1,28 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "a258597a194e77d4fd469b3cd976b29e",
+  "translation_date": "2025-08-27T23:05:10+00:00",
+  "source_file": "1-getting-started-lessons/3-accessibility/assignment.md",
+  "language_code": "sl"
+}
+-->
+# Analizirajte nedostopno spletno mesto
+
+## Navodila
+
+Prepoznajte spletno mesto, za katerega menite, da NI dostopno, in pripravite akcijski načrt za izboljšanje njegove dostopnosti. Vaša prva naloga bo identificirati to spletno mesto, podrobno opisati načine, kako menite, da je nedostopno, ne da bi uporabili analitična orodja, nato pa ga predložiti analizi Lighthouse. Zajamite pdf rezultatov te analize in pripravite podroben načrt z najmanj desetimi točkami, ki prikazujejo, kako bi lahko spletno mesto izboljšali.
+
+## Tabela za testiranje dostopnosti spletnega mesta
+
+| Merila | Odlično | Zadostno | Potrebno izboljšanje |
+|--------|---------|----------|----------------------|
+|        | manjka <10 % zahtevanega | manjka 20 % zahtevanega | manjka 50 % zahtevanega |
+
+----
+Poročilo študenta: vključuje odstavke o tem, kako nedostopno je spletno mesto, poročilo Lighthouse zajeto v pdf, seznam desetih točk za izboljšanje z podrobnostmi, kako jih izboljšati
+
+---
+
+**Omejitev odgovornosti**:  
+Ta dokument je bil preveden z uporabo storitve za prevajanje z umetno inteligenco [Co-op Translator](https://github.com/Azure/co-op-translator). Čeprav si prizadevamo za natančnost, vas prosimo, da upoštevate, da lahko avtomatizirani prevodi vsebujejo napake ali netočnosti. Izvirni dokument v njegovem maternem jeziku je treba obravnavati kot avtoritativni vir. Za ključne informacije priporočamo profesionalni človeški prevod. Ne prevzemamo odgovornosti za morebitna napačna razumevanja ali napačne interpretacije, ki bi nastale zaradi uporabe tega prevoda.
\ No newline at end of file
diff --git a/translations/sl/1-getting-started-lessons/README.md b/translations/sl/1-getting-started-lessons/README.md
new file mode 100644
index 00000000..49617c11
--- /dev/null
+++ b/translations/sl/1-getting-started-lessons/README.md
@@ -0,0 +1,31 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "04683f4cfa46004179b0404b89a3065c",
+  "translation_date": "2025-08-27T22:58:48+00:00",
+  "source_file": "1-getting-started-lessons/README.md",
+  "language_code": "sl"
+}
+-->
+# Začetek z razvojem spletnih aplikacij
+
+V tem delu učnega načrta boste spoznali nekonceptualne teme, ki so pomembne za postati profesionalni razvijalec.
+
+### Teme
+
+1. [Uvod v programske jezike in orodja za delo](1-intro-to-programming-languages/README.md)
+2. [Uvod v GitHub](2-github-basics/README.md)
+3. [Osnove dostopnosti](3-accessibility/README.md)
+
+### Zasluge
+
+Uvod v programske jezike in orodja za delo je bilo napisano z ♥️ avtorice [Jasmine Greenaway](https://twitter.com/paladique)
+
+Uvod v GitHub je bilo napisano z ♥️ avtorice [Floor Drees](https://twitter.com/floordrees)
+
+Osnove dostopnosti je bilo napisano z ♥️ avtorja [Christopher Harrison](https://twitter.com/geektrainer)
+
+---
+
+**Omejitev odgovornosti**:  
+Ta dokument je bil preveden z uporabo storitve za prevajanje z umetno inteligenco [Co-op Translator](https://github.com/Azure/co-op-translator). Čeprav si prizadevamo za natančnost, vas prosimo, da upoštevate, da lahko avtomatizirani prevodi vsebujejo napake ali netočnosti. Izvirni dokument v njegovem maternem jeziku je treba obravnavati kot avtoritativni vir. Za ključne informacije priporočamo profesionalni človeški prevod. Ne prevzemamo odgovornosti za morebitna nesporazumevanja ali napačne razlage, ki bi nastale zaradi uporabe tega prevoda.
\ No newline at end of file
diff --git a/translations/sl/2-js-basics/1-data-types/README.md b/translations/sl/2-js-basics/1-data-types/README.md
new file mode 100644
index 00000000..da7356fb
--- /dev/null
+++ b/translations/sl/2-js-basics/1-data-types/README.md
@@ -0,0 +1,215 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "fc6aef8ecfdd5b0ad2afa6e6ba52bfde",
+  "translation_date": "2025-08-27T22:40:57+00:00",
+  "source_file": "2-js-basics/1-data-types/README.md",
+  "language_code": "sl"
+}
+-->
+# Osnove JavaScripta: Podatkovni tipi
+
+![Osnove JavaScripta - Podatkovni tipi](../../../../translated_images/webdev101-js-datatypes.4cc470179730702c756480d3ffa46507f746e5975ebf80f99fdaaf1cff09a7f4.sl.png)  
+> Sketchnote avtorja [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Kviz pred predavanjem  
+[Kviz pred predavanjem](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/7)
+
+Ta lekcija pokriva osnove JavaScripta, jezika, ki omogoča interaktivnost na spletu.
+
+> To lekcijo lahko opravite na [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-variables/?WT.mc_id=academic-77807-sagibbon)!
+
+[![Spremenljivke](https://img.youtube.com/vi/JNIXfGiDWM8/0.jpg)](https://youtube.com/watch?v=JNIXfGiDWM8 "Spremenljivke v JavaScriptu")
+
+[![Podatkovni tipi v JavaScriptu](https://img.youtube.com/vi/AWfA95eLdq8/0.jpg)](https://youtube.com/watch?v=AWfA95eLdq8 "Podatkovni tipi v JavaScriptu")
+
+> 🎥 Kliknite zgornje slike za videoposnetke o spremenljivkah in podatkovnih tipih.
+
+Začnimo s spremenljivkami in podatkovnimi tipi, ki jih te vsebujejo!
+
+## Spremenljivke
+
+Spremenljivke shranjujejo vrednosti, ki jih lahko uporabljate in spreminjate v svoji kodi.
+
+Ustvarjanje in **deklaracija** spremenljivke ima naslednjo sintakso **[ključna beseda] [ime]**. Sestavljena je iz dveh delov:
+
+- **Ključna beseda**. Ključne besede so lahko `let` ali `var`.  
+
+✅ Ključna beseda `let` je bila uvedena v ES6 in daje vaši spremenljivki tako imenovani _blokovni obseg_. Priporočljivo je, da uporabljate `let` namesto `var`. Blokovne obsege bomo podrobneje obravnavali v prihodnjih delih.  
+- **Ime spremenljivke**, to je ime, ki ga izberete sami.
+
+### Naloga - delo s spremenljivkami
+
+1. **Deklarirajte spremenljivko**. Deklarirajmo spremenljivko z uporabo ključne besede `let`:
+
+    ```javascript
+    let myVariable;
+    ```
+
+   `myVariable` je zdaj deklarirana z uporabo ključne besede `let`. Trenutno nima vrednosti.
+
+1. **Dodelite vrednost**. Shranite vrednost v spremenljivko z operatorjem `=`, ki mu sledi pričakovana vrednost.
+
+    ```javascript
+    myVariable = 123;
+    ```
+
+   > Opomba: uporaba `=` v tej lekciji pomeni, da uporabljamo "operator dodelitve", ki se uporablja za nastavitev vrednosti spremenljivki. Ne označuje enakosti.
+
+   `myVariable` je zdaj *inicializirana* z vrednostjo 123.
+
+1. **Refaktorirajte**. Zamenjajte svojo kodo z naslednjo izjavo.
+
+    ```javascript
+    let myVariable = 123;
+    ```
+
+    Zgornje se imenuje _eksplicitna inicializacija_, ko je spremenljivka deklarirana in ji je hkrati dodeljena vrednost.
+
+1. **Spremenite vrednost spremenljivke**. Spremenite vrednost spremenljivke na naslednji način:
+
+   ```javascript
+   myVariable = 321;
+   ```
+
+   Ko je spremenljivka deklarirana, lahko njeno vrednost kadar koli spremenite v svoji kodi z operatorjem `=` in novo vrednostjo.
+
+   ✅ Poskusite! JavaScript lahko pišete neposredno v svojem brskalniku. Odprite okno brskalnika in pojdite na Orodja za razvijalce. V konzoli boste našli poziv; vnesite `let myVariable = 123`, pritisnite Enter, nato vnesite `myVariable`. Kaj se zgodi? Opomba: več o teh konceptih boste izvedeli v naslednjih lekcijah.
+
+## Konstante
+
+Deklaracija in inicializacija konstante sledi enakim konceptom kot spremenljivka, z izjemo ključne besede `const`. Konstante so običajno deklarirane z velikimi črkami.
+
+```javascript
+const MY_VARIABLE = 123;
+```
+
+Konstante so podobne spremenljivkam, z dvema izjemama:
+
+- **Morajo imeti vrednost**. Konstante morajo biti inicializirane, sicer bo prišlo do napake pri izvajanju kode.
+- **Referenca se ne sme spremeniti**. Referenca konstante se ne sme spremeniti po inicializaciji, sicer bo prišlo do napake pri izvajanju kode. Poglejmo dva primera:
+   - **Preprosta vrednost**. Naslednje NI dovoljeno:
+   
+      ```javascript
+      const PI = 3;
+      PI = 4; // not allowed
+      ```
+ 
+   - **Referenca objekta je zaščitena**. Naslednje NI dovoljeno.
+   
+      ```javascript
+      const obj = { a: 3 };
+      obj = { b: 5 } // not allowed
+      ```
+
+    - **Vrednost objekta ni zaščitena**. Naslednje JE dovoljeno:
+    
+      ```javascript
+      const obj = { a: 3 };
+      obj.a = 5;  // allowed
+      ```
+
+      Zgornje spreminja vrednost objekta, ne pa same reference, kar je dovoljeno.
+
+   > Opomba: `const` pomeni, da je referenca zaščitena pred ponovnim dodeljevanjem. Vrednost pa ni _nespremenljiva_ in se lahko spremeni, še posebej, če gre za kompleksno strukturo, kot je objekt.
+
+## Podatkovni tipi
+
+Spremenljivke lahko shranjujejo različne tipe vrednosti, kot so števila in besedilo. Ti različni tipi vrednosti so znani kot **podatkovni tipi**. Podatkovni tipi so pomemben del razvoja programske opreme, saj razvijalcem pomagajo pri odločanju, kako naj bo koda napisana in kako naj programska oprema deluje. Poleg tega imajo nekateri podatkovni tipi edinstvene lastnosti, ki pomagajo preoblikovati ali pridobiti dodatne informacije iz vrednosti.
+
+✅ Podatkovni tipi so znani tudi kot JavaScriptovi podatkovni primitivni tipi, saj so najnižji nivo podatkovnih tipov, ki jih zagotavlja jezik. Obstaja 7 primitivnih podatkovnih tipov: string, number, bigint, boolean, undefined, null in symbol. Vzemite si trenutek in si predstavljajte, kaj vsak od teh primitivov predstavlja. Kaj je `zebra`? Kaj pa `0`? `true`?
+
+### Števila
+
+V prejšnjem razdelku je bila vrednost `myVariable` podatkovni tip število.
+
+`let myVariable = 123;`
+
+Spremenljivke lahko shranjujejo vse vrste števil, vključno z decimalnimi ali negativnimi števili. Števila se lahko uporabljajo tudi z aritmetičnimi operatorji, ki jih bomo obravnavali v [naslednjem razdelku](../../../../2-js-basics/1-data-types).
+
+### Aritmetični operatorji
+
+Obstaja več vrst operatorjev za izvajanje aritmetičnih funkcij, nekateri so navedeni tukaj:
+
+| Simbol | Opis                                                                      | Primer                          |
+| ------ | ------------------------------------------------------------------------ | -------------------------------- |
+| `+`    | **Seštevanje**: Izračuna vsoto dveh števil                               | `1 + 2 //pričakovani odgovor je 3`   |
+| `-`    | **Odštevanje**: Izračuna razliko dveh števil                             | `1 - 2 //pričakovani odgovor je -1`  |
+| `*`    | **Množenje**: Izračuna produkt dveh števil                               | `1 * 2 //pričakovani odgovor je 2`   |
+| `/`    | **Deljenje**: Izračuna količnik dveh števil                              | `1 / 2 //pričakovani odgovor je 0.5` |
+| `%`    | **Ostanek**: Izračuna ostanek pri deljenju dveh števil                   | `1 % 2 //pričakovani odgovor je 1`   |
+
+✅ Poskusite! Poskusite aritmetično operacijo v konzoli svojega brskalnika. Vas rezultati presenetijo?
+
+### Nizi
+
+Nizi so nizi znakov, ki se nahajajo med enojnimi ali dvojnimi narekovaji.
+
+- `'To je niz'`
+- `"To je tudi niz"`
+- `let myString = 'To je vrednost niza, shranjena v spremenljivki';`
+
+Ne pozabite uporabiti narekovajev pri pisanju niza, sicer bo JavaScript domneval, da gre za ime spremenljivke.
+
+### Oblikovanje nizov
+
+Nizi so besedilni in jih je treba občasno oblikovati.
+
+Za **združevanje** dveh ali več nizov, oziroma njihovo povezovanje, uporabite operator `+`.
+
+```javascript
+let myString1 = "Hello";
+let myString2 = "World";
+
+myString1 + myString2 + "!"; //HelloWorld!
+myString1 + " " + myString2 + "!"; //Hello World!
+myString1 + ", " + myString2 + "!"; //Hello, World!
+
+```
+
+✅ Zakaj `1 + 1 = 2` v JavaScriptu, medtem ko `'1' + '1' = 11?` Razmislite o tem. Kaj pa `'1' + 1`?
+
+**Predloge nizov** so še en način za oblikovanje nizov, le da se namesto narekovajev uporablja poševnica nazaj. Vse, kar ni navadno besedilo, mora biti postavljeno v oklepaje `${ }`. To vključuje vse spremenljivke, ki so lahko nizi.
+
+```javascript
+let myString1 = "Hello";
+let myString2 = "World";
+
+`${myString1} ${myString2}!` //Hello World!
+`${myString1}, ${myString2}!` //Hello, World!
+```
+
+Svoje cilje oblikovanja lahko dosežete z obema metodama, vendar bodo predloge nizov upoštevale vse presledke in prelome vrstic.
+
+✅ Kdaj bi uporabili predlogo niza namesto navadnega niza?
+
+### Logične vrednosti
+
+Logične vrednosti so lahko le dve: `true` ali `false`. Logične vrednosti pomagajo pri odločanju, katere vrstice kode naj se izvedejo, ko so izpolnjeni določeni pogoji. V mnogih primerih [operatorji](../../../../2-js-basics/1-data-types) pomagajo pri nastavitvi vrednosti logične vrednosti, pogosto pa boste opazili in pisali spremenljivke, ki so inicializirane ali katerih vrednosti se posodabljajo z operatorjem.
+
+- `let myTrueBool = true`
+- `let myFalseBool = false`
+
+✅ Spremenljivka se lahko šteje za 'resnično', če se ovrednoti kot logična vrednost `true`. Zanimivo je, da so v JavaScriptu [vse vrednosti resnične, razen če so definirane kot neresnične](https://developer.mozilla.org/docs/Glossary/Truthy).
+
+---
+
+## 🚀 Izziv
+
+JavaScript je znan po svojih presenetljivih načinih obravnave podatkovnih tipov. Raziščite te 'pasti'. Na primer: občutljivost na velike in male črke vas lahko preseneti! Poskusite to v svoji konzoli: `let age = 1; let Age = 2; age == Age` (rezultat je `false` -- zakaj?). Katere druge pasti lahko najdete?
+
+## Kviz po predavanju  
+[Kviz po predavanju](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/8)
+
+## Pregled in samostojno učenje
+
+Oglejte si [ta seznam vaj za JavaScript](https://css-tricks.com/snippets/javascript/) in poskusite eno. Kaj ste se naučili?
+
+## Naloga
+
+[Vaja s podatkovnimi tipi](assignment.md)
+
+---
+
+**Omejitev odgovornosti**:  
+Ta dokument je bil preveden z uporabo storitve za prevajanje z umetno inteligenco [Co-op Translator](https://github.com/Azure/co-op-translator). Čeprav si prizadevamo za natančnost, vas prosimo, da upoštevate, da lahko avtomatizirani prevodi vsebujejo napake ali netočnosti. Izvirni dokument v njegovem izvirnem jeziku je treba obravnavati kot avtoritativni vir. Za ključne informacije priporočamo profesionalni prevod s strani človeka. Ne prevzemamo odgovornosti za morebitna napačna razumevanja ali napačne interpretacije, ki bi nastale zaradi uporabe tega prevoda.
\ No newline at end of file
diff --git a/translations/sl/2-js-basics/1-data-types/assignment.md b/translations/sl/2-js-basics/1-data-types/assignment.md
new file mode 100644
index 00000000..1e61852b
--- /dev/null
+++ b/translations/sl/2-js-basics/1-data-types/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "3869244ceda606c4969d8cdd82679867",
+  "translation_date": "2025-08-27T22:41:41+00:00",
+  "source_file": "2-js-basics/1-data-types/assignment.md",
+  "language_code": "sl"
+}
+-->
+# Praksa podatkovnih tipov
+
+## Navodila
+
+Predstavljajte si, da ustvarjate nakupovalno košarico. Napišite dokumentacijo o podatkovnih tipih, ki bi jih potrebovali za dokončanje nakupovalne izkušnje. Kako ste prišli do svojih odločitev?
+
+## Merila
+
+Kriterij | Odlično | Zadostno | Potrebna izboljšava
+--- | --- | --- | --- |
+||Šest podatkovnih tipov je navedenih in podrobno raziskanih, dokumentirana je njihova uporaba|Štirje podatkovni tipi so raziskani|Raziskana sta dva podatkovna tipa|
+
+---
+
+**Omejitev odgovornosti**:  
+Ta dokument je bil preveden z uporabo storitve za prevajanje z umetno inteligenco [Co-op Translator](https://github.com/Azure/co-op-translator). Čeprav si prizadevamo za natančnost, vas prosimo, da upoštevate, da lahko avtomatizirani prevodi vsebujejo napake ali netočnosti. Izvirni dokument v njegovem maternem jeziku je treba obravnavati kot avtoritativni vir. Za ključne informacije priporočamo profesionalni človeški prevod. Ne prevzemamo odgovornosti za morebitna nesporazume ali napačne razlage, ki bi nastale zaradi uporabe tega prevoda.
\ No newline at end of file
diff --git a/translations/sl/2-js-basics/2-functions-methods/README.md b/translations/sl/2-js-basics/2-functions-methods/README.md
new file mode 100644
index 00000000..d754baf7
--- /dev/null
+++ b/translations/sl/2-js-basics/2-functions-methods/README.md
@@ -0,0 +1,210 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "b4612bbb9ace984f374fcc80e3e035ad",
+  "translation_date": "2025-08-27T22:37:00+00:00",
+  "source_file": "2-js-basics/2-functions-methods/README.md",
+  "language_code": "sl"
+}
+-->
+# Osnove JavaScripta: Metode in funkcije
+
+![Osnove JavaScripta - Funkcije](../../../../translated_images/webdev101-js-functions.be049c4726e94f8b7605c36330ac42eeb5cd8ed02bcdd60fdac778174d6cb865.sl.png)
+> Sketchnote avtorja [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Predhodni kviz
+[Predhodni kviz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/9)
+
+Ko razmišljamo o pisanju kode, si vedno želimo zagotoviti, da je naša koda berljiva. Čeprav se to morda sliši nenavadno, je koda prebrana veliko večkrat, kot je napisana. Eden ključnih orodij v razvijalčevem naboru za zagotavljanje vzdržljive kode je **funkcija**.
+
+[![Metode in funkcije](https://img.youtube.com/vi/XgKsD6Zwvlc/0.jpg)](https://youtube.com/watch?v=XgKsD6Zwvlc "Metode in funkcije")
+
+> 🎥 Kliknite zgornjo sliko za video o metodah in funkcijah.
+
+> To lekcijo lahko opravite na [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-functions/?WT.mc_id=academic-77807-sagibbon)!
+
+## Funkcije
+
+V svojem bistvu je funkcija blok kode, ki ga lahko izvedemo po potrebi. To je idealno za scenarije, kjer moramo večkrat opraviti isto nalogo; namesto da bi logiko podvajali na več mestih (kar bi otežilo posodobitve), jo lahko centraliziramo na enem mestu in jo pokličemo, kadar koli potrebujemo izvedbo operacije – funkcije lahko celo kličete iz drugih funkcij!
+
+Prav tako pomembno je poimenovanje funkcije. Čeprav se to morda zdi nepomembno, ime zagotavlja hiter način dokumentiranja dela kode. To si lahko predstavljate kot nalepko na gumbu. Če kliknem na gumb z napisom "Prekliči časovnik", vem, da bo ustavil delovanje ure.
+
+## Ustvarjanje in klicanje funkcije
+
+Sintaksa za funkcijo je videti takole:
+
+```javascript
+function nameOfFunction() { // function definition
+ // function definition/body
+}
+```
+
+Če bi želel ustvariti funkcijo za prikaz pozdrava, bi to izgledalo takole:
+
+```javascript
+function displayGreeting() {
+  console.log('Hello, world!');
+}
+```
+
+Kadar koli želimo poklicati (ali sprožiti) našo funkcijo, uporabimo ime funkcije, ki mu sledi `()`. Omeniti velja, da je naša funkcija lahko definirana pred ali po tem, ko jo pokličemo; JavaScript prevajalnik jo bo našel namesto vas.
+
+```javascript
+// calling our function
+displayGreeting();
+```
+
+> **NOTE:** Obstaja posebna vrsta funkcije, znana kot **metoda**, ki ste jo že uporabljali! Pravzaprav smo to videli v naši zgornji predstavitvi, ko smo uporabili `console.log`. Kar razlikuje metodo od funkcije, je to, da je metoda povezana z objektom (v našem primeru `console`), medtem ko je funkcija prosto lebdeča. Veliko razvijalcev te izraze uporablja izmenično.
+
+### Najboljše prakse za funkcije
+
+Pri ustvarjanju funkcij je dobro upoštevati nekaj najboljših praks:
+
+- Kot vedno, uporabljajte opisna imena, da veste, kaj funkcija počne
+- Uporabljajte **camelCasing** za združevanje besed
+- Naj bodo vaše funkcije osredotočene na določeno nalogo
+
+## Posredovanje informacij funkciji
+
+Da bi funkcija postala bolj uporabna, ji boste pogosto želeli posredovati informacije. Če pogledamo naš primer `displayGreeting`, bo prikazal le **Hello, world!**. To ni najbolj uporabna funkcija, ki bi jo lahko ustvarili. Če jo želimo narediti nekoliko bolj prilagodljivo, na primer omogočiti nekomu, da določi ime osebe, ki jo pozdravljamo, lahko dodamo **parameter**. Parameter (včasih imenovan tudi **argument**) je dodatna informacija, poslana funkciji.
+
+Parametri so navedeni v definiciji znotraj oklepajev in so ločeni z vejicami, kot sledi:
+
+```javascript
+function name(param, param2, param3) {
+
+}
+```
+
+Našo funkcijo `displayGreeting` lahko posodobimo tako, da sprejme ime in ga prikaže.
+
+```javascript
+function displayGreeting(name) {
+  const message = `Hello, ${name}!`;
+  console.log(message);
+}
+```
+
+Ko želimo poklicati našo funkcijo in posredovati parameter, ga določimo v oklepajih.
+
+```javascript
+displayGreeting('Christopher');
+// displays "Hello, Christopher!" when run
+```
+
+## Privzete vrednosti
+
+Našo funkcijo lahko naredimo še bolj prilagodljivo z dodajanjem več parametrov. Kaj pa, če ne želimo, da je vsaka vrednost obvezna? Če ostanemo pri našem primeru pozdrava, lahko ime pustimo kot obvezno (potrebujemo vedeti, koga pozdravljamo), vendar želimo omogočiti, da se pozdrav prilagodi po želji. Če nekdo ne želi prilagoditi pozdrava, zagotovimo privzeto vrednost. Privzeto vrednost parametru določimo na podoben način, kot določimo vrednost spremenljivki - `parameterName = 'defaultValue'`. Celoten primer:
+
+```javascript
+function displayGreeting(name, salutation='Hello') {
+  console.log(`${salutation}, ${name}`);
+}
+```
+
+Ko pokličemo funkcijo, se lahko odločimo, ali želimo nastaviti vrednost za `salutation`.
+
+```javascript
+displayGreeting('Christopher');
+// displays "Hello, Christopher"
+
+displayGreeting('Christopher', 'Hi');
+// displays "Hi, Christopher"
+```
+
+## Vračanje vrednosti
+
+Do zdaj bo funkcija, ki smo jo ustvarili, vedno izpisovala v [konzolo](https://developer.mozilla.org/docs/Web/API/console). Včasih je to točno tisto, kar iščemo, še posebej, ko ustvarjamo funkcije, ki bodo klicale druge storitve. Kaj pa, če želim ustvariti pomožno funkcijo za izvedbo izračuna in vrniti vrednost, da jo lahko uporabim drugje?
+
+To lahko storimo z uporabo **vrnjene vrednosti**. Vrnjena vrednost je vrnjena s funkcijo in jo lahko shranimo v spremenljivko na enak način, kot bi shranili dobesedno vrednost, kot je niz ali število.
+
+Če funkcija nekaj vrne, se uporabi ključna beseda `return`. Ključna beseda `return` pričakuje vrednost ali referenco tistega, kar se vrača, kot sledi:
+
+```javascript
+return myVariable;
+```  
+
+Lahko ustvarimo funkcijo za ustvarjanje sporočila pozdrava in vrnemo vrednost klicatelju.
+
+```javascript
+function createGreetingMessage(name) {
+  const message = `Hello, ${name}`;
+  return message;
+}
+```
+
+Ko pokličemo to funkcijo, bomo vrednost shranili v spremenljivko. To je zelo podobno, kot bi nastavili spremenljivko na statično vrednost (na primer `const name = 'Christopher'`).
+
+```javascript
+const greetingMessage = createGreetingMessage('Christopher');
+```
+
+## Funkcije kot parametri za funkcije
+
+Ko boste napredovali v svoji programerski karieri, boste naleteli na funkcije, ki sprejemajo funkcije kot parametre. Ta zanimiv trik se pogosto uporablja, ko ne vemo, kdaj se bo nekaj zgodilo ali zaključilo, vendar vemo, da moramo izvesti operacijo kot odziv.
+
+Kot primer si oglejmo [setTimeout](https://developer.mozilla.org/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout), ki začne časovnik in bo izvedel kodo, ko se časovnik zaključi. Povedati mu moramo, katero kodo želimo izvesti. Zveni kot popolna naloga za funkcijo!
+
+Če zaženete spodnjo kodo, boste po 3 sekundah videli sporočilo **3 sekunde so pretekle**.
+
+```javascript
+function displayDone() {
+  console.log('3 seconds has elapsed');
+}
+// timer value is in milliseconds
+setTimeout(displayDone, 3000);
+```
+
+### Anonimne funkcije
+
+Poglejmo še enkrat, kaj smo zgradili. Ustvarjamo funkcijo z imenom, ki bo uporabljena samo enkrat. Ko naša aplikacija postane bolj zapletena, si lahko predstavljamo, da bomo ustvarili veliko funkcij, ki bodo uporabljene samo enkrat. To ni idealno. Kot se izkaže, imena vedno ni treba podati!
+
+Ko funkcijo posredujemo kot parameter, lahko preskočimo njeno predhodno ustvarjanje in jo namesto tega zgradimo kot del parametra. Uporabimo isto ključno besedo `function`, vendar jo zgradimo kot parameter.
+
+Prepišimo zgornjo kodo, da uporabimo anonimno funkcijo:
+
+```javascript
+setTimeout(function() {
+  console.log('3 seconds has elapsed');
+}, 3000);
+```
+
+Če zaženete našo novo kodo, boste opazili, da dobimo enake rezultate. Ustvarili smo funkcijo, vendar ji nismo morali dati imena!
+
+### Fat arrow funkcije
+
+Ena od bližnjic, ki je pogosta v mnogih programskih jezikih (vključno z JavaScriptom), je možnost uporabe tako imenovane **arrow** ali **fat arrow** funkcije. Uporablja poseben indikator `=>`, ki izgleda kot puščica - od tod tudi ime! Z uporabo `=>` lahko preskočimo ključno besedo `function`.
+
+Prepišimo našo kodo še enkrat, da uporabimo fat arrow funkcijo:
+
+```javascript
+setTimeout(() => {
+  console.log('3 seconds has elapsed');
+}, 3000);
+```
+
+### Kdaj uporabiti katero strategijo
+
+Zdaj ste videli tri načine za posredovanje funkcije kot parametra in se morda sprašujete, kdaj uporabiti katerega. Če veste, da boste funkcijo uporabili več kot enkrat, jo ustvarite na običajen način. Če jo boste uporabili samo na enem mestu, je običajno najbolje uporabiti anonimno funkcijo. Ali boste uporabili fat arrow funkcijo ali bolj tradicionalno sintakso `function`, je odvisno od vas, vendar boste opazili, da večina sodobnih razvijalcev raje uporablja `=>`.
+
+---
+
+## 🚀 Izziv
+
+Ali lahko v enem stavku razložite razliko med funkcijami in metodami? Poskusite!
+
+## Kviz po predavanju
+[Kviz po predavanju](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/10)
+
+## Pregled in samostojno učenje
+
+Vredno je [prebrati več o fat arrow funkcijah](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions), saj se vse pogosteje uporabljajo v kodnih bazah. Vadite pisanje funkcije in jo nato prepišite s to sintakso.
+
+## Naloga
+
+[Zabava s funkcijami](assignment.md)
+
+---
+
+**Omejitev odgovornosti**:  
+Ta dokument je bil preveden z uporabo storitve za strojno prevajanje [Co-op Translator](https://github.com/Azure/co-op-translator). Čeprav si prizadevamo za natančnost, vas prosimo, da se zavedate, da lahko avtomatizirani prevodi vsebujejo napake ali netočnosti. Izvirni dokument v njegovem izvirnem jeziku je treba obravnavati kot avtoritativni vir. Za ključne informacije priporočamo strokovno človeško prevajanje. Ne prevzemamo odgovornosti za morebitna nesporazumevanja ali napačne razlage, ki izhajajo iz uporabe tega prevoda.
\ No newline at end of file
diff --git a/translations/sl/2-js-basics/2-functions-methods/assignment.md b/translations/sl/2-js-basics/2-functions-methods/assignment.md
new file mode 100644
index 00000000..0feaa837
--- /dev/null
+++ b/translations/sl/2-js-basics/2-functions-methods/assignment.md
@@ -0,0 +1,27 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "8973f96157680a13e9446e4bb540ee57",
+  "translation_date": "2025-08-27T22:37:44+00:00",
+  "source_file": "2-js-basics/2-functions-methods/assignment.md",
+  "language_code": "sl"
+}
+-->
+# Zabava s funkcijami
+
+## Navodila
+
+Ustvarite različne funkcije, tako tiste, ki nekaj vrnejo, kot tiste, ki ničesar ne vrnejo.
+
+Poskusite ustvariti funkcijo, ki ima kombinacijo parametrov in parametrov z privzetimi vrednostmi.
+
+## Merila
+
+| Merila  | Odlično                                                                                 | Zadostno                                                        | Potrebno izboljšanje |
+| -------- | -------------------------------------------------------------------------------------- | ---------------------------------------------------------------- | --------------------- |
+|          | Rešitev vključuje dve ali več dobro delujočih funkcij z raznolikimi parametri          | Ponujena je delujoča rešitev z eno funkcijo in nekaj parametri   | Rešitev vsebuje napake |
+
+---
+
+**Omejitev odgovornosti**:  
+Ta dokument je bil preveden z uporabo storitve za prevajanje z umetno inteligenco [Co-op Translator](https://github.com/Azure/co-op-translator). Čeprav si prizadevamo za natančnost, vas prosimo, da upoštevate, da lahko avtomatizirani prevodi vsebujejo napake ali netočnosti. Izvirni dokument v njegovem maternem jeziku je treba obravnavati kot avtoritativni vir. Za ključne informacije priporočamo profesionalni človeški prevod. Ne prevzemamo odgovornosti za morebitna nesporazumevanja ali napačne razlage, ki bi nastale zaradi uporabe tega prevoda.
\ No newline at end of file
diff --git a/translations/sl/2-js-basics/3-making-decisions/README.md b/translations/sl/2-js-basics/3-making-decisions/README.md
new file mode 100644
index 00000000..7933b89a
--- /dev/null
+++ b/translations/sl/2-js-basics/3-making-decisions/README.md
@@ -0,0 +1,232 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "888609c48329c280ca2477d2df40f2e5",
+  "translation_date": "2025-08-27T22:38:32+00:00",
+  "source_file": "2-js-basics/3-making-decisions/README.md",
+  "language_code": "sl"
+}
+-->
+# Osnove JavaScripta: Sprejemanje odločitev
+
+![Osnove JavaScripta - Sprejemanje odločitev](../../../../translated_images/webdev101-js-decisions.69e1b20f272dd1f0b1cb2f8adaff3ed2a77c4f91db96d8a0594132a353fa189a.sl.png)
+
+> Sketchnote avtorja [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Predhodni kviz
+
+[Predhodni kviz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/11)
+
+Sprejemanje odločitev in nadzor nad vrstnim redom izvajanja kode omogočata, da je vaša koda ponovno uporabna in robustna. Ta razdelek zajema sintakso za nadzor pretoka podatkov v JavaScriptu ter njen pomen pri uporabi z Boolean podatkovnimi tipi.
+
+[![Sprejemanje odločitev](https://img.youtube.com/vi/SxTp8j-fMMY/0.jpg)](https://youtube.com/watch?v=SxTp8j-fMMY "Sprejemanje odločitev")
+
+> 🎥 Kliknite zgornjo sliko za video o sprejemanju odločitev.
+
+> To lekcijo lahko opravite na [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-if-else/?WT.mc_id=academic-77807-sagibbon)!
+
+## Kratek povzetek o Booleanih
+
+Booleani imajo lahko le dve vrednosti: `true` ali `false`. Booleani pomagajo pri sprejemanju odločitev, katere vrstice kode naj se izvedejo, ko so določeni pogoji izpolnjeni.
+
+Boolean nastavite na true ali false takole:
+
+`let myTrueBool = true`  
+`let myFalseBool = false`
+
+✅ Booleani so poimenovani po angleškem matematiku, filozofu in logiku Georgeu Booleu (1815–1864).
+
+## Primerjalni operatorji in Booleani
+
+Operatorji se uporabljajo za ocenjevanje pogojev z primerjavami, ki ustvarijo Boolean vrednost. Spodaj je seznam pogosto uporabljenih operatorjev.
+
+| Simbol | Opis                                                                                                                                                   | Primer             |
+| ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ |
+| `<`    | **Manj kot**: Primerja dve vrednosti in vrne Boolean vrednost `true`, če je vrednost na levi strani manjša od vrednosti na desni                        | `5 < 6 // true`    |
+| `<=`   | **Manj kot ali enako**: Primerja dve vrednosti in vrne Boolean vrednost `true`, če je vrednost na levi strani manjša ali enaka vrednosti na desni       | `5 <= 6 // true`   |
+| `>`    | **Več kot**: Primerja dve vrednosti in vrne Boolean vrednost `true`, če je vrednost na levi strani večja od vrednosti na desni                          | `5 > 6 // false`   |
+| `>=`   | **Več kot ali enako**: Primerja dve vrednosti in vrne Boolean vrednost `true`, če je vrednost na levi strani večja ali enaka vrednosti na desni         | `5 >= 6 // false`  |
+| `===`  | **Stroga enakost**: Primerja dve vrednosti in vrne Boolean vrednost `true`, če sta vrednosti na desni in levi strani enaki IN sta istega podatkovnega tipa | `5 === 6 // false` |
+| `!==`  | **Neenakost**: Primerja dve vrednosti in vrne nasprotno Boolean vrednost od tiste, ki bi jo vrnil operator stroge enakosti                              | `5 !== 6 // true`  |
+
+✅ Preverite svoje znanje tako, da napišete nekaj primerjav v konzoli brskalnika. Vas je kakšen vrnjen podatek presenetil?
+
+## If stavek
+
+If stavek bo izvedel kodo med svojimi bloki, če je pogoj resničen.
+
+```javascript
+if (condition) {
+  //Condition is true. Code in this block will run.
+}
+```
+
+Logični operatorji se pogosto uporabljajo za oblikovanje pogoja.
+
+```javascript
+let currentMoney;
+let laptopPrice;
+
+if (currentMoney >= laptopPrice) {
+  //Condition is true. Code in this block will run.
+  console.log("Getting a new laptop!");
+}
+```
+
+## If..Else stavek
+
+`else` stavek bo izvedel kodo med svojimi bloki, ko je pogoj neresničen. Je opcijski pri `if` stavku.
+
+```javascript
+let currentMoney;
+let laptopPrice;
+
+if (currentMoney >= laptopPrice) {
+  //Condition is true. Code in this block will run.
+  console.log("Getting a new laptop!");
+} else {
+  //Condition is false. Code in this block will run.
+  console.log("Can't afford a new laptop, yet!");
+}
+```
+
+✅ Preizkusite svoje razumevanje te kode in naslednje kode tako, da jo zaženete v konzoli brskalnika. Spremenite vrednosti spremenljivk currentMoney in laptopPrice, da spremenite vrnjeni `console.log()`.
+
+## Switch stavek
+
+`switch` stavek se uporablja za izvajanje različnih dejanj na podlagi različnih pogojev. Uporabite `switch` stavek za izbiro enega izmed mnogih blokov kode, ki naj se izvedejo.
+
+```javascript
+switch (expression) {
+  case x:
+    // code block
+    break;
+  case y:
+    // code block
+    break;
+  default:
+  // code block
+}
+```
+
+```javascript
+// program using switch statement
+let a = 2;
+
+switch (a) {
+  case 1:
+    a = "one";
+    break;
+  case 2:
+    a = "two";
+    break;
+  default:
+    a = "not found";
+    break;
+}
+console.log(`The value is ${a}`);
+```
+
+✅ Preizkusite svoje razumevanje te kode in naslednje kode tako, da jo zaženete v konzoli brskalnika. Spremenite vrednosti spremenljivke a, da spremenite vrnjeni `console.log()`.
+
+## Logični operatorji in Booleani
+
+Odločitve lahko zahtevajo več kot eno primerjavo, ki jih lahko povežete z logičnimi operatorji, da ustvarite Boolean vrednost.
+
+| Simbol | Opis                                                                                     | Primer                                                                  |
+| ------ | ----------------------------------------------------------------------------------------- | ----------------------------------------------------------------------- |
+| `&&`   | **Logični IN**: Primerja dve Boolean izraza. Vrne true **samo**, če sta obe strani resnični | `(5 > 6) && (5 < 6 ) //Ena stran je neresnična, druga resnična. Vrne false` |
+| `\|\|` | **Logični ALI**: Primerja dve Boolean izraza. Vrne true, če je vsaj ena stran resnična     | `(5 > 6) \|\| (5 < 6) //Ena stran je neresnična, druga resnična. Vrne true` |
+| `!`    | **Logični NE**: Vrne nasprotno vrednost Boolean izraza                                    | `!(5 > 6) // 5 ni večje od 6, vendar "!" bo vrnil true`                 |
+
+## Pogoji in odločitve z logičnimi operatorji
+
+Logične operatorje lahko uporabite za oblikovanje pogojev v if..else stavkih.
+
+```javascript
+let currentMoney;
+let laptopPrice;
+let laptopDiscountPrice = laptopPrice - laptopPrice * 0.2; //Laptop price at 20 percent off
+
+if (currentMoney >= laptopPrice || currentMoney >= laptopDiscountPrice) {
+  //Condition is true. Code in this block will run.
+  console.log("Getting a new laptop!");
+} else {
+  //Condition is true. Code in this block will run.
+  console.log("Can't afford a new laptop, yet!");
+}
+```
+
+### Operator negacije
+
+Do sedaj ste videli, kako lahko uporabite `if...else` stavek za ustvarjanje pogojne logike. Vse, kar gre v `if`, mora biti ovrednoteno kot true/false. Z uporabo operatorja `!` lahko _negirate_ izraz. Videti bi bilo takole:
+
+```javascript
+if (!condition) {
+  // runs if condition is false
+} else {
+  // runs if condition is true
+}
+```
+
+### Ternarni izrazi
+
+`if...else` ni edini način za izražanje logike odločanja. Uporabite lahko tudi nekaj, kar se imenuje ternarni operator. Sintaksa za to je videti takole:
+
+```javascript
+let variable = condition ? <return this if true> : <return this if false>
+```
+
+Spodaj je bolj konkreten primer:
+
+```javascript
+let firstNumber = 20;
+let secondNumber = 10;
+let biggestNumber = firstNumber > secondNumber ? firstNumber : secondNumber;
+```
+
+✅ Vzemite si minuto, da večkrat preberete to kodo. Ali razumete, kako ti operatorji delujejo?
+
+Zgornje pravi:
+
+- če je `firstNumber` večji od `secondNumber`
+- potem dodelite `firstNumber` spremenljivki `biggestNumber`
+- sicer dodelite `secondNumber`.
+
+Ternarni izraz je le kompaktni način pisanja spodnje kode:
+
+```javascript
+let biggestNumber;
+if (firstNumber > secondNumber) {
+  biggestNumber = firstNumber;
+} else {
+  biggestNumber = secondNumber;
+}
+```
+
+---
+
+## 🚀 Izziv
+
+Ustvarite program, ki je najprej napisan z logičnimi operatorji, nato pa ga prepišite z uporabo ternarnega izraza. Katera sintaksa vam je ljubša?
+
+---
+
+## Kviz po predavanju
+
+[Kviz po predavanju](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/12)
+
+## Pregled in samostojno učenje
+
+Preberite več o številnih operatorjih, ki so na voljo uporabniku, [na MDN](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators).
+
+Prebrskajte čudovit [priročnik za operatorje](https://joshwcomeau.com/operator-lookup/) Josha Comeaua!
+
+## Naloga
+
+[Operatorji](assignment.md)
+
+---
+
+**Omejitev odgovornosti**:  
+Ta dokument je bil preveden z uporabo storitve za prevajanje z umetno inteligenco [Co-op Translator](https://github.com/Azure/co-op-translator). Čeprav si prizadevamo za natančnost, vas prosimo, da upoštevate, da lahko avtomatizirani prevodi vsebujejo napake ali netočnosti. Izvirni dokument v njegovem maternem jeziku je treba obravnavati kot avtoritativni vir. Za ključne informacije priporočamo profesionalni prevod s strani človeka. Ne prevzemamo odgovornosti za morebitna napačna razumevanja ali napačne interpretacije, ki bi nastale zaradi uporabe tega prevoda.
\ No newline at end of file
diff --git a/translations/sl/2-js-basics/3-making-decisions/assignment.md b/translations/sl/2-js-basics/3-making-decisions/assignment.md
new file mode 100644
index 00000000..dee6464a
--- /dev/null
+++ b/translations/sl/2-js-basics/3-making-decisions/assignment.md
@@ -0,0 +1,54 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "bf62b82567e6f9bdf4abda9ae0ccb64a",
+  "translation_date": "2025-08-27T22:39:07+00:00",
+  "source_file": "2-js-basics/3-making-decisions/assignment.md",
+  "language_code": "sl"
+}
+-->
+# Operatorji
+
+## Navodila
+
+Preizkusite operaterje. Tukaj je predlog za program, ki ga lahko implementirate:
+
+Imate skupino študentov iz dveh različnih ocenjevalnih sistemov.
+
+### Prvi ocenjevalni sistem
+
+En ocenjevalni sistem določa ocene od 1 do 5, pri čemer ocena 3 ali več pomeni, da ste opravili predmet.
+
+### Drugi ocenjevalni sistem
+
+Drugi ocenjevalni sistem vključuje naslednje ocene: `A, A-, B, B-, C, C-`, kjer je `A` najvišja ocena, `C` pa najnižja ocena za uspešno opravljen predmet.
+
+### Naloga
+
+Glede na naslednje polje `allStudents`, ki predstavlja vse študente in njihove ocene, sestavite novo polje `studentsWhoPass`, ki vsebuje vse študente, ki so opravili.
+
+> TIP: uporabite for-zanko, if...else in primerjalne operaterje:
+
+```javascript
+let allStudents = [
+  'A',
+  'B-',
+  1,
+  4,
+  5,
+  2
+]
+
+let studentsWhoPass = [];
+```
+
+## Merila
+
+| Merilo  | Odlično                        | Zadostno                      | Potrebne izboljšave             |
+| -------- | ------------------------------ | ----------------------------- | ------------------------------- |
+|          | Predstavljena je popolna rešitev | Predstavljena je delna rešitev | Predstavljena rešitev vsebuje napake |
+
+---
+
+**Omejitev odgovornosti**:  
+Ta dokument je bil preveden z uporabo storitve za prevajanje z umetno inteligenco [Co-op Translator](https://github.com/Azure/co-op-translator). Čeprav si prizadevamo za natančnost, vas prosimo, da upoštevate, da lahko avtomatizirani prevodi vsebujejo napake ali netočnosti. Izvirni dokument v njegovem maternem jeziku je treba obravnavati kot avtoritativni vir. Za ključne informacije priporočamo profesionalni človeški prevod. Ne odgovarjamo za morebitne nesporazume ali napačne razlage, ki bi nastale zaradi uporabe tega prevoda.
\ No newline at end of file
diff --git a/translations/sl/2-js-basics/4-arrays-loops/README.md b/translations/sl/2-js-basics/4-arrays-loops/README.md
new file mode 100644
index 00000000..153936f8
--- /dev/null
+++ b/translations/sl/2-js-basics/4-arrays-loops/README.md
@@ -0,0 +1,147 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "3f7f87871312cf6cc12662da7d973182",
+  "translation_date": "2025-08-27T22:42:28+00:00",
+  "source_file": "2-js-basics/4-arrays-loops/README.md",
+  "language_code": "sl"
+}
+-->
+# Osnove JavaScripta: Tabele in Zanke
+
+![Osnove JavaScripta - Tabele](../../../../translated_images/webdev101-js-arrays.439d7528b8a294558d0e4302e448d193f8ad7495cc407539cc81f1afe904b470.sl.png)
+> Sketchnote avtorja [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Kviz pred predavanjem
+[Kviz pred predavanjem](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/13)
+
+Ta lekcija pokriva osnove JavaScripta, jezika, ki omogoča interaktivnost na spletu. V tej lekciji se boste naučili o tabelah in zankah, ki se uporabljajo za manipulacijo podatkov.
+
+[![Tabele](https://img.youtube.com/vi/1U4qTyq02Xw/0.jpg)](https://youtube.com/watch?v=1U4qTyq02Xw "Tabele")
+
+[![Zanke](https://img.youtube.com/vi/Eeh7pxtTZ3k/0.jpg)](https://www.youtube.com/watch?v=Eeh7pxtTZ3k "Zanke")
+
+> 🎥 Kliknite zgornje slike za videoposnetke o tabelah in zankah.
+
+> To lekcijo lahko opravite na [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-arrays/?WT.mc_id=academic-77807-sagibbon)!
+
+## Tabele
+
+Delo s podatki je pogosta naloga v katerem koli jeziku, in ta naloga je veliko lažja, ko so podatki organizirani v strukturirani obliki, kot so tabele. S tabelami so podatki shranjeni v strukturi, podobni seznamu. Ena glavnih prednosti tabel je, da lahko v eni tabeli shranite različne vrste podatkov.
+
+✅ Tabele so povsod okoli nas! Ali lahko pomislite na primer tabele iz resničnega življenja, kot je na primer niz sončnih celic?
+
+Sintaksa za tabelo je par oglatih oklepajev.
+
+```javascript
+let myArray = [];
+```
+
+To je prazna tabela, vendar lahko tabele deklariramo že napolnjene s podatki. Več vrednosti v tabeli je ločenih z vejico.
+
+```javascript
+let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
+```
+
+Vrednosti v tabeli so dodeljene edinstveni vrednosti, imenovani **indeks**, ki je celo število, dodeljeno glede na oddaljenost od začetka tabele. V zgornjem primeru ima niz "Čokolada" indeks 0, indeks "Rocky Road" pa je 4. Indeks uporabite z oglati oklepaji za pridobivanje, spreminjanje ali vstavljanje vrednosti v tabelo.
+
+✅ Vas preseneča, da tabele začnejo z indeksom nič? V nekaterih programskih jezikih indeksi začnejo z 1. Obstaja zanimiva zgodovina o tem, ki jo lahko [preberete na Wikipediji](https://en.wikipedia.org/wiki/Zero-based_numbering).
+
+```javascript
+let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
+iceCreamFlavors[2]; //"Vanilla"
+```
+
+Indeks lahko uporabite za spremembo vrednosti, kot je to:
+
+```javascript
+iceCreamFlavors[4] = "Butter Pecan"; //Changed "Rocky Road" to "Butter Pecan"
+```
+
+In novo vrednost lahko vstavite na določen indeks, kot je to:
+
+```javascript
+iceCreamFlavors[5] = "Cookie Dough"; //Added "Cookie Dough"
+```
+
+✅ Pogostejši način dodajanja vrednosti v tabelo je uporaba operaterjev tabele, kot je array.push().
+
+Če želite izvedeti, koliko elementov je v tabeli, uporabite lastnost `length`.
+
+```javascript
+let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
+iceCreamFlavors.length; //5
+```
+
+✅ Poskusite sami! Uporabite konzolo svojega brskalnika za ustvarjanje in manipulacijo tabele po svoji izbiri.
+
+## Zanke
+
+Zanke nam omogočajo izvajanje ponavljajočih se ali **iterativnih** nalog, kar lahko prihrani veliko časa in kode. Vsaka iteracija se lahko razlikuje po svojih spremenljivkah, vrednostih in pogojih. V JavaScriptu obstajajo različne vrste zank, ki imajo majhne razlike, vendar v bistvu opravljajo isto nalogo: prehajajo skozi podatke.
+
+### Zanka For
+
+Zanka `for` zahteva 3 dele za iteracijo:
+- `števec` Spremenljivka, ki je običajno inicializirana s številom, ki šteje število iteracij
+- `pogoj` Izraz, ki uporablja primerjalne operatorje, da povzroči ustavitev zanke, ko je `false`
+- `iteracijski izraz` Izvede se na koncu vsake iteracije, običajno za spremembo vrednosti števca
+  
+```javascript
+// Counting up to 10
+for (let i = 0; i < 10; i++) {
+  console.log(i);
+}
+```
+
+✅ Zaženite to kodo v konzoli brskalnika. Kaj se zgodi, ko naredite majhne spremembe števca, pogoja ali iteracijskega izraza? Ali lahko naredite, da se izvaja nazaj, kot odštevanje?
+
+### Zanka While
+
+Za razliko od sintakse zanke `for`, zanke `while` zahtevajo le pogoj, ki bo ustavil zanko, ko bo pogoj postal `false`. Pogoji v zankah običajno temeljijo na drugih vrednostih, kot so števci, in jih je treba upravljati med zanko. Začetne vrednosti števcev je treba ustvariti zunaj zanke, vsi izrazi za izpolnitev pogoja, vključno s spreminjanjem števca, pa morajo biti vzdrževani znotraj zanke.
+
+```javascript
+//Counting up to 10
+let i = 0;
+while (i < 10) {
+ console.log(i);
+ i++;
+}
+```
+
+✅ Zakaj bi izbrali zanko for namesto while? 17.000 uporabnikov je imelo isto vprašanje na StackOverflow, in nekatera mnenja [bi vam lahko bila zanimiva](https://stackoverflow.com/questions/39969145/while-loops-vs-for-loops-in-javascript).
+
+## Zanke in tabele
+
+Tabele se pogosto uporabljajo z zankami, ker večina pogojev zahteva dolžino tabele za ustavitev zanke, indeks pa je lahko tudi vrednost števca.
+
+```javascript
+let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
+
+for (let i = 0; i < iceCreamFlavors.length; i++) {
+  console.log(iceCreamFlavors[i]);
+} //Ends when all flavors are printed
+```
+
+✅ Eksperimentirajte z iteracijo skozi tabelo po svoji izbiri v konzoli brskalnika.
+
+---
+
+## 🚀 Izziv
+
+Obstajajo tudi drugi načini iteracije skozi tabele, poleg zank for in while. Obstajajo [forEach](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach), [for-of](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/for...of) in [map](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/map). Prepišite svojo zanko skozi tabelo z eno od teh tehnik.
+
+## Kviz po predavanju
+[Kviz po predavanju](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/14)
+
+## Pregled in samostojno učenje
+
+Tabele v JavaScriptu imajo veliko metod, ki so izjemno uporabne za manipulacijo podatkov. [Preberite o teh metodah](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array) in jih preizkusite (na primer push, pop, slice in splice) na tabeli po svoji izbiri.
+
+## Naloga
+
+[Iterirajte skozi tabelo](assignment.md)
+
+---
+
+**Omejitev odgovornosti**:  
+Ta dokument je bil preveden z uporabo storitve za strojno prevajanje [Co-op Translator](https://github.com/Azure/co-op-translator). Čeprav si prizadevamo za natančnost, vas prosimo, da upoštevate, da lahko avtomatizirani prevodi vsebujejo napake ali netočnosti. Izvirni dokument v njegovem izvirnem jeziku je treba obravnavati kot avtoritativni vir. Za ključne informacije priporočamo strokovno človeško prevajanje. Ne prevzemamo odgovornosti za morebitna nesporazumevanja ali napačne razlage, ki izhajajo iz uporabe tega prevoda.
\ No newline at end of file
diff --git a/translations/sl/2-js-basics/4-arrays-loops/assignment.md b/translations/sl/2-js-basics/4-arrays-loops/assignment.md
new file mode 100644
index 00000000..30d06a18
--- /dev/null
+++ b/translations/sl/2-js-basics/4-arrays-loops/assignment.md
@@ -0,0 +1,27 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "8b2381170bd0fd2870f5889bb8620f02",
+  "translation_date": "2025-08-27T22:43:02+00:00",
+  "source_file": "2-js-basics/4-arrays-loops/assignment.md",
+  "language_code": "sl"
+}
+-->
+# Zanka skozi tabelo
+
+## Navodila
+
+Ustvari program, ki našteje vsako 3. številko med 1-20 in jo izpiše v konzolo.
+
+> TIP: uporabi zanko for in prilagodi izraz za iteracijo
+
+## Merila
+
+| Merila  | Odlično                                 | Zadostno                 | Potrebno izboljšanje          |
+| -------- | --------------------------------------- | ------------------------ | ------------------------------ |
+|          | Program deluje pravilno in je komentiran | Program ni komentiran    | Program je nepopoln ali vsebuje napake |
+
+---
+
+**Omejitev odgovornosti**:  
+Ta dokument je bil preveden z uporabo storitve AI za prevajanje [Co-op Translator](https://github.com/Azure/co-op-translator). Čeprav si prizadevamo za natančnost, vas prosimo, da upoštevate, da lahko avtomatizirani prevodi vsebujejo napake ali netočnosti. Izvirni dokument v njegovem izvirnem jeziku je treba obravnavati kot avtoritativni vir. Za ključne informacije priporočamo profesionalni človeški prevod. Ne prevzemamo odgovornosti za morebitne nesporazume ali napačne razlage, ki bi nastale zaradi uporabe tega prevoda.
\ No newline at end of file
diff --git a/translations/sl/2-js-basics/README.md b/translations/sl/2-js-basics/README.md
new file mode 100644
index 00000000..2fb85bc4
--- /dev/null
+++ b/translations/sl/2-js-basics/README.md
@@ -0,0 +1,28 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "cc9e70a2f096c67389c8acff1521fc27",
+  "translation_date": "2025-08-27T22:36:00+00:00",
+  "source_file": "2-js-basics/README.md",
+  "language_code": "sl"
+}
+-->
+# Uvod v JavaScript
+
+JavaScript je jezik spleta. V teh štirih lekcijah boste spoznali njegove osnove.
+
+### Teme
+
+1. [Spremenljivke in podatkovni tipi](1-data-types/README.md)
+2. [Funkcije in metode](2-functions-methods/README.md)
+3. [Sprejemanje odločitev z JavaScriptom](3-making-decisions/README.md)
+4. [Tabele in zanke](4-arrays-loops/README.md)
+
+### Zasluge
+
+Te lekcije so bile napisane z ♥️ s strani [Jasmine Greenaway](https://twitter.com/paladique), [Christopher Harrison](https://twitter.com/geektrainer) in [Chris Noring](https://twitter.com/chris_noring)
+
+---
+
+**Omejitev odgovornosti**:  
+Ta dokument je bil preveden z uporabo storitve za prevajanje z umetno inteligenco [Co-op Translator](https://github.com/Azure/co-op-translator). Čeprav si prizadevamo za natančnost, vas prosimo, da upoštevate, da lahko avtomatizirani prevodi vsebujejo napake ali netočnosti. Izvirni dokument v njegovem maternem jeziku je treba obravnavati kot avtoritativni vir. Za ključne informacije priporočamo profesionalni človeški prevod. Ne prevzemamo odgovornosti za morebitna nesporazumevanja ali napačne razlage, ki bi nastale zaradi uporabe tega prevoda.
\ No newline at end of file
diff --git a/translations/sl/3-terrarium/1-intro-to-html/README.md b/translations/sl/3-terrarium/1-intro-to-html/README.md
new file mode 100644
index 00000000..d717851e
--- /dev/null
+++ b/translations/sl/3-terrarium/1-intro-to-html/README.md
@@ -0,0 +1,249 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "46a0639e719b9cf1dfd062aa24cad639",
+  "translation_date": "2025-08-27T22:46:16+00:00",
+  "source_file": "3-terrarium/1-intro-to-html/README.md",
+  "language_code": "sl"
+}
+-->
+# Projekt Terrarij, 1. del: Uvod v HTML
+
+![Uvod v HTML](../../../../translated_images/webdev101-html.4389c2067af68e98280c1bde52b6c6269f399eaae3659b7c846018d8a7b0bbd9.sl.png)
+> Sketchnote avtorja [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Predhodni kviz
+
+[Predhodni kviz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/15)
+
+> Oglejte si video
+
+> 
+> [![Video o osnovah Git in GitHub](https://img.youtube.com/vi/1TvxJKBzhyQ/0.jpg)](https://www.youtube.com/watch?v=1TvxJKBzhyQ)
+
+### Uvod
+
+HTML ali HyperText Markup Language je 'okostje' spleta. Če CSS 'obleče' vaš HTML in JavaScript vdahne življenje, je HTML telo vaše spletne aplikacije. Sintaksa HTML celo odraža to idejo, saj vključuje oznake "head", "body" in "footer".
+
+V tej lekciji bomo uporabili HTML za postavitev 'okostja' vmesnika našega virtualnega terarija. Imel bo naslov in tri stolpce: desni in levi stolpec, kjer bodo živele premikajoče se rastline, ter osrednje območje, ki bo dejanski stekleni terarij. Do konca te lekcije boste lahko videli rastline v stolpcih, vendar bo vmesnik videti nekoliko nenavadno; ne skrbite, v naslednjem delu boste dodali CSS sloge, da bo vmesnik videti bolje.
+
+### Naloga
+
+Na svojem računalniku ustvarite mapo z imenom 'terrarium' in v njej datoteko z imenom 'index.html'. To lahko storite v Visual Studio Code, potem ko ustvarite mapo terrarium, tako da odprete novo okno VS Code, kliknete 'open folder' in poiščete svojo novo mapo. Kliknite majhen gumb 'file' v raziskovalnem podoknu in ustvarite novo datoteko:
+
+![raziskovalec v VS Code](../../../../translated_images/vs-code-index.e2986cf919471eb984a0afef231380c8b132b000635105f2397bd2754d1b689c.sl.png)
+
+Ali
+
+Uporabite te ukaze v svojem git bash:
+* `mkdir terrarium`
+* `cd terrarium`
+* `touch index.html`
+* `code index.html` ali `nano index.html`
+
+> Datoteke index.html brskalniku sporočajo, da je to privzeta datoteka v mapi; URL-ji, kot je `https://anysite.com/test`, so lahko zgrajeni z uporabo strukture map, ki vključuje mapo z imenom `test` in datoteko `index.html` v njej; `index.html` ni nujno prikazan v URL-ju.
+
+---
+
+## DocType in oznake html
+
+Prva vrstica datoteke HTML je njen doctype. Presenetljivo je, da mora biti ta vrstica na samem vrhu datoteke, vendar pove starejšim brskalnikom, da mora brskalnik stran prikazati v standardnem načinu, ki sledi trenutni specifikaciji HTML.
+
+> Nasvet: v VS Code lahko z miško premaknete nad oznako in dobite informacije o njeni uporabi iz referenčnih vodnikov MDN.
+
+Druga vrstica mora biti začetna oznaka `<html>`, takoj za njo pa zaključna oznaka `</html>`. Te oznake so korenski elementi vašega vmesnika.
+
+### Naloga
+
+Dodajte te vrstice na vrh svoje datoteke `index.html`:
+
+```HTML
+<!DOCTYPE html>
+<html></html>
+```
+
+✅ Obstaja nekaj različnih načinov, ki jih je mogoče določiti z nastavitvijo DocType z nizom poizvedbe: [Quirks Mode in Standards Mode](https://developer.mozilla.org/docs/Web/HTML/Quirks_Mode_and_Standards_Mode). Ti načini so bili namenjeni podpori resnično starim brskalnikom, ki se danes običajno ne uporabljajo (Netscape Navigator 4 in Internet Explorer 5). Držite se standardne deklaracije doctype.
+
+---
+
+## 'Head' dokumenta
+
+Območje 'head' dokumenta HTML vključuje ključne informacije o vaši spletni strani, znane tudi kot [metadata](https://developer.mozilla.org/docs/Web/HTML/Element/meta). V našem primeru strežniku, na katerega bo ta stran poslana za prikaz, sporočimo te štiri stvari:
+
+-   naslov strani
+-   metapodatke strani, vključno z:
+    -   'character set', ki pove, kakšno kodiranje znakov se uporablja na strani
+    -   informacije o brskalniku, vključno z `x-ua-compatible`, ki označuje, da je podprt brskalnik IE=edge
+    -   informacije o tem, kako naj se obnaša viewport ob nalaganju. Nastavitev viewporta na začetno merilo 1 nadzoruje raven povečave ob prvem nalaganju strani.
+
+### Naloga
+
+Dodajte blok 'head' v svoj dokument med začetne in zaključne oznake `<html>`.
+
+```html
+<head>
+	<title>Welcome to my Virtual Terrarium</title>
+	<meta charset="utf-8" />
+	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
+	<meta name="viewport" content="width=device-width, initial-scale=1" />
+</head>
+```
+
+✅ Kaj bi se zgodilo, če bi nastavili meta oznako viewport, kot je ta: `<meta name="viewport" content="width=600">`? Preberite več o [viewportu](https://developer.mozilla.org/docs/Web/HTML/Viewport_meta_tag).
+
+---
+
+## 'Body' dokumenta
+
+### Oznake HTML
+
+V HTML dodajate oznake v svojo datoteko .html, da ustvarite elemente spletne strani. Vsaka oznaka običajno ima začetno in zaključeno oznako, kot je ta: `<p>hello</p>` za označitev odstavka. Ustvarite telo svojega vmesnika tako, da dodate par oznak `<body>` znotraj para oznak `<html>`; vaša oznaka zdaj izgleda takole:
+
+### Naloga
+
+```html
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>Welcome to my Virtual Terrarium</title>
+		<meta charset="utf-8" />
+		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+	</head>
+	<body></body>
+</html>
+```
+
+Zdaj lahko začnete graditi svojo stran. Običajno uporabljate oznake `<div>` za ustvarjanje ločenih elementov na strani. Ustvarili bomo serijo elementov `<div>`, ki bodo vsebovali slike.
+
+### Slike
+
+Ena oznaka HTML, ki ne potrebuje zaključne oznake, je oznaka `<img>`, ker ima element `src`, ki vsebuje vse informacije, ki jih stran potrebuje za prikaz predmeta.
+
+Ustvarite mapo v svoji aplikaciji z imenom `images` in vanjo dodajte vse slike iz [mape s kodo](../../../../3-terrarium/solution/images); (na voljo je 14 slik rastlin).
+
+### Naloga
+
+Dodajte te slike rastlin v dva stolpca med oznake `<body></body>`:
+
+```html
+<div id="page">
+	<div id="left-container" class="container">
+		<div class="plant-holder">
+			<img class="plant" alt="plant" id="plant1" src="./images/plant1.png" />
+		</div>
+		<div class="plant-holder">
+			<img class="plant" alt="plant" id="plant2" src="./images/plant2.png" />
+		</div>
+		<div class="plant-holder">
+			<img class="plant" alt="plant" id="plant3" src="./images/plant3.png" />
+		</div>
+		<div class="plant-holder">
+			<img class="plant" alt="plant" id="plant4" src="./images/plant4.png" />
+		</div>
+		<div class="plant-holder">
+			<img class="plant" alt="plant" id="plant5" src="./images/plant5.png" />
+		</div>
+		<div class="plant-holder">
+			<img class="plant" alt="plant" id="plant6" src="./images/plant6.png" />
+		</div>
+		<div class="plant-holder">
+			<img class="plant" alt="plant" id="plant7" src="./images/plant7.png" />
+		</div>
+	</div>
+	<div id="right-container" class="container">
+		<div class="plant-holder">
+			<img class="plant" alt="plant" id="plant8" src="./images/plant8.png" />
+		</div>
+		<div class="plant-holder">
+			<img class="plant" alt="plant" id="plant9" src="./images/plant9.png" />
+		</div>
+		<div class="plant-holder">
+			<img class="plant" alt="plant" id="plant10" src="./images/plant10.png" />
+		</div>
+		<div class="plant-holder">
+			<img class="plant" alt="plant" id="plant11" src="./images/plant11.png" />
+		</div>
+		<div class="plant-holder">
+			<img class="plant" alt="plant" id="plant12" src="./images/plant12.png" />
+		</div>
+		<div class="plant-holder">
+			<img class="plant" alt="plant" id="plant13" src="./images/plant13.png" />
+		</div>
+		<div class="plant-holder">
+			<img class="plant" alt="plant" id="plant14" src="./images/plant14.png" />
+		</div>
+	</div>
+</div>
+```
+
+> Opomba: Spans proti Divs. Divs veljajo za 'blokovne' elemente, Spans pa za 'v vrstici'. Kaj bi se zgodilo, če bi te divs spremenili v spans?
+
+S to oznako se rastline zdaj prikažejo na zaslonu. Videti je precej slabo, ker še niso oblikovane s CSS, kar bomo storili v naslednji lekciji.
+
+Vsaka slika ima alt besedilo, ki se prikaže, tudi če slike ne morete videti ali prikazati. To je pomemben atribut za vključitev zaradi dostopnosti. Več o dostopnosti boste izvedeli v prihodnjih lekcijah; za zdaj si zapomnite, da atribut alt zagotavlja alternativne informacije za sliko, če uporabnik iz kakršnega koli razloga ne more videti slike (zaradi počasne povezave, napake v atributu src ali če uporabnik uporablja bralnik zaslona).
+
+✅ Ste opazili, da ima vsaka slika enak alt atribut? Ali je to dobra praksa? Zakaj ali zakaj ne? Ali lahko izboljšate to kodo?
+
+---
+
+## Semantična oznaka
+
+Na splošno je priporočljivo uporabljati smiselno 'semantiko' pri pisanju HTML. Kaj to pomeni? Pomeni, da uporabljate oznake HTML za predstavitev vrste podatkov ali interakcije, za katero so bile zasnovane. Na primer, glavno besedilo naslova na strani naj uporablja oznako `<h1>`.
+
+Dodajte naslednjo vrstico takoj pod začetno oznako `<body>`:
+
+```html
+<h1>My Terrarium</h1>
+```
+
+Uporaba semantične oznake, kot je uporaba naslovov `<h1>` in neurejenih seznamov `<ul>`, pomaga bralnikom zaslona pri navigaciji po strani. Na splošno naj bodo gumbi napisani kot `<button>` in seznami kot `<li>`. Čeprav je _mogoče_ uporabiti posebej oblikovane elemente `<span>` z obdelovalci klikov za simulacijo gumbov, je za uporabnike z omejitvami bolje, da uporabljajo tehnologije za določanje, kje na strani se nahaja gumb, in interakcijo z njim, če se element pojavi kot gumb. Zaradi tega poskušajte čim bolj uporabljati semantično oznako.
+
+✅ Oglejte si bralnik zaslona in [kako interagira s spletno stranjo](https://www.youtube.com/watch?v=OUDV1gqs9GA). Ali vidite, zakaj bi nesemantična oznaka lahko frustrirala uporabnika?
+
+## Terrarij
+
+Zadnji del tega vmesnika vključuje ustvarjanje oznake, ki bo oblikovana za ustvarjanje terarija.
+
+### Naloga:
+
+Dodajte to oznako nad zadnjo oznako `</div>`:
+
+```html
+<div id="terrarium">
+	<div class="jar-top"></div>
+	<div class="jar-walls">
+		<div class="jar-glossy-long"></div>
+		<div class="jar-glossy-short"></div>
+	</div>
+	<div class="dirt"></div>
+	<div class="jar-bottom"></div>
+</div>
+```
+
+✅ Čeprav ste dodali to oznako na zaslon, se ne prikaže ničesar. Zakaj?
+
+---
+
+## 🚀Izziv
+
+Obstajajo nekateri 'starejši' elementi v HTML, ki so še vedno zabavni za uporabo, čeprav ne bi smeli uporabljati zastarelih oznak, kot so [te oznake](https://developer.mozilla.org/docs/Web/HTML/Element#Obsolete_and_deprecated_elements) v svoji oznaki. Kljub temu, ali lahko uporabite staro oznako `<marquee>` za premikanje naslova h1 vodoravno? (če to storite, ne pozabite, da jo kasneje odstranite)
+
+## Zaključni kviz
+
+[Zaključni kviz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/16)
+
+## Pregled in samostojno učenje
+
+HTML je 'preizkušen in zanesljiv' sistem gradnikov, ki je pomagal zgraditi splet v to, kar je danes. Naučite se nekaj o njegovi zgodovini, tako da preučite stare in nove oznake. Ali lahko ugotovite, zakaj so bile nekatere oznake zastarele in nekatere dodane? Katere oznake bi lahko bile uvedene v prihodnosti?
+
+Več o gradnji spletnih mest za splet in mobilne naprave si preberite na [Microsoft Learn](https://docs.microsoft.com/learn/modules/build-simple-website/?WT.mc_id=academic-77807-sagibbon).
+
+## Naloga
+
+[Vadite svoj HTML: Zgradite maketo bloga](assignment.md)
+
+---
+
+**Omejitev odgovornosti**:  
+Ta dokument je bil preveden z uporabo storitve za prevajanje z umetno inteligenco [Co-op Translator](https://github.com/Azure/co-op-translator). Čeprav si prizadevamo za natančnost, vas prosimo, da upoštevate, da lahko avtomatizirani prevodi vsebujejo napake ali netočnosti. Izvirni dokument v njegovem izvirnem jeziku je treba obravnavati kot avtoritativni vir. Za ključne informacije priporočamo profesionalni človeški prevod. Ne prevzemamo odgovornosti za morebitna nesporazumevanja ali napačne razlage, ki bi nastale zaradi uporabe tega prevoda.
\ No newline at end of file
diff --git a/translations/sl/3-terrarium/1-intro-to-html/assignment.md b/translations/sl/3-terrarium/1-intro-to-html/assignment.md
new file mode 100644
index 00000000..ed53459d
--- /dev/null
+++ b/translations/sl/3-terrarium/1-intro-to-html/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "970776c81401c9aacb34f365edac6b53",
+  "translation_date": "2025-08-27T22:46:55+00:00",
+  "source_file": "3-terrarium/1-intro-to-html/assignment.md",
+  "language_code": "sl"
+}
+-->
+# Vadite svoj HTML: Ustvarite maketo bloga
+
+## Navodila
+
+Predstavljajte si, da oblikujete ali preoblikujete svojo osebno spletno stran. Ustvarite grafično maketo svoje strani in nato zapišite HTML oznake, ki bi jih uporabili za izdelavo različnih elementov strani. To lahko naredite na papirju in ga skenirate ali pa uporabite programsko opremo po vaši izbiri, le poskrbite, da ročno napišete HTML oznake.
+
+## Merila
+
+| Merila  | Odlično                                                                           | Zadostno                                                                         | Potrebno izboljšanje                                                              |
+| -------- | ----------------------------------------------------------------------------------- | -------------------------------------------------------------------------------- | --------------------------------------------------------------------------------- |
+|          | Postavitev bloga je vizualno predstavljena z vsaj 10 prikazanimi elementi oznak     | Postavitev bloga je vizualno predstavljena s približno 5 prikazanimi elementi oznak | Postavitev bloga je vizualno predstavljena z največ 3 prikazanimi elementi oznak  |
+
+---
+
+**Omejitev odgovornosti**:  
+Ta dokument je bil preveden z uporabo storitve za prevajanje z umetno inteligenco [Co-op Translator](https://github.com/Azure/co-op-translator). Čeprav si prizadevamo za natančnost, vas prosimo, da upoštevate, da lahko avtomatizirani prevodi vsebujejo napake ali netočnosti. Izvirni dokument v njegovem maternem jeziku je treba obravnavati kot avtoritativni vir. Za ključne informacije priporočamo profesionalni človeški prevod. Ne prevzemamo odgovornosti za morebitna napačna razumevanja ali napačne interpretacije, ki bi nastale zaradi uporabe tega prevoda.
\ No newline at end of file
diff --git a/translations/sl/3-terrarium/2-intro-to-css/README.md b/translations/sl/3-terrarium/2-intro-to-css/README.md
new file mode 100644
index 00000000..8d09db2e
--- /dev/null
+++ b/translations/sl/3-terrarium/2-intro-to-css/README.md
@@ -0,0 +1,284 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "e375c2aeb94e2407f2667633d39580bd",
+  "translation_date": "2025-08-27T22:48:31+00:00",
+  "source_file": "3-terrarium/2-intro-to-css/README.md",
+  "language_code": "sl"
+}
+-->
+# Projekt Terrarij, 2. del: Uvod v CSS
+
+![Uvod v CSS](../../../../translated_images/webdev101-css.3f7af5991bf53a200d79e7257e5e450408d8ea97f5b531d31b2e3976317338ee.sl.png)
+> Sketchnote avtorja [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Predhodni kviz
+
+[Predhodni kviz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/17)
+
+### Uvod
+
+CSS ali kaskadne stilske predloge rešujejo pomemben problem spletnega razvoja: kako narediti, da bo vaša spletna stran videti privlačna. Oblikovanje vaših aplikacij jih naredi bolj uporabne in vizualno privlačne; CSS lahko uporabite tudi za ustvarjanje odzivnega spletnega oblikovanja (RWD) – kar omogoča, da vaše aplikacije izgledajo dobro ne glede na velikost zaslona, na katerem so prikazane. CSS ni namenjen zgolj lepšemu videzu aplikacij; njegova specifikacija vključuje tudi animacije in transformacije, ki omogočajo napredne interakcije v vaših aplikacijah. Skupina za delo na CSS skrbi za vzdrževanje trenutnih specifikacij CSS; njihovo delo lahko spremljate na [spletnem mestu World Wide Web Consortium](https://www.w3.org/Style/CSS/members).
+
+> Opomba: CSS je jezik, ki se razvija, tako kot vse na spletu, in ne vsi brskalniki podpirajo novejše dele specifikacije. Vedno preverite svoje implementacije s pomočjo [CanIUse.com](https://caniuse.com).
+
+V tej lekciji bomo dodali sloge našemu spletnemu terariju in se naučili več o več konceptih CSS: kaskadi, dedovanju, uporabi selektorjev, pozicioniranju in uporabi CSS za gradnjo postavitev. Med procesom bomo postavili terarij in ustvarili dejanski terarij.
+
+### Predpogoj
+
+HTML za vaš terarij mora biti že pripravljen in pripravljen za oblikovanje.
+
+> Oglejte si video
+
+> 
+> [![Osnove Git in GitHub videa](https://img.youtube.com/vi/6yIdOIV9p1I/0.jpg)](https://www.youtube.com/watch?v=6yIdOIV9p1I)
+
+### Naloga
+
+V svoji mapi za terarij ustvarite novo datoteko z imenom `style.css`. To datoteko uvozite v razdelek `<head>`:
+
+```html
+<link rel="stylesheet" href="./style.css" />
+```
+
+---
+
+## Kaskada
+
+Kaskadne stilske predloge vključujejo idejo, da se slogi 'kaskadno' uporabljajo glede na njihovo prioriteto. Slogi, ki jih določi avtor spletnega mesta, imajo prednost pred tistimi, ki jih določi brskalnik. Slogi, določeni 'v vrstici', imajo prednost pred tistimi, ki so določeni v zunanji stilski predlogi.
+
+### Naloga
+
+Dodajte slog "color: red" v vrstici v svojo oznako `<h1>`:
+
+```HTML
+<h1 style="color: red">My Terrarium</h1>
+```
+
+Nato dodajte naslednjo kodo v svojo datoteko `style.css`:
+
+```CSS
+h1 {
+ color: blue;
+}
+```
+
+✅ Katera barva se prikaže v vaši spletni aplikaciji? Zakaj? Ali lahko najdete način za preglasitev slogov? Kdaj bi to želeli storiti ali zakaj ne?
+
+---
+
+## Dedovanje
+
+Slogi se dedujejo od slogov prednika do potomca, tako da gnezdeni elementi podedujejo sloge svojih staršev.
+
+### Naloga
+
+Nastavite pisavo telesa na določeno pisavo in preverite pisavo gnezdenega elementa:
+
+```CSS
+body {
+	font-family: helvetica, arial, sans-serif;
+}
+```
+
+Odprite konzolo brskalnika na zavihku 'Elements' in opazujte pisavo H1. Podeduje svojo pisavo od telesa, kot je navedeno v brskalniku:
+
+![podedovana pisava](../../../../translated_images/1.cc07a5cbe114ad1d4728c35134584ac1b87db688eff83cf75985cf31fe0ed95c.sl.png)
+
+✅ Ali lahko naredite, da gnezden slog podeduje drugo lastnost?
+
+---
+
+## CSS selektorji
+
+### Oznake
+
+Do zdaj ima vaša datoteka `style.css` oblikovane le nekaj oznak, aplikacija pa izgleda precej nenavadno:
+
+```CSS
+body {
+	font-family: helvetica, arial, sans-serif;
+}
+
+h1 {
+	color: #3a241d;
+	text-align: center;
+}
+```
+
+Tak način oblikovanja oznake vam omogoča nadzor nad edinstvenimi elementi, vendar morate nadzorovati sloge mnogih rastlin v svojem terariju. Za to morate uporabiti CSS selektorje.
+
+### Id-ji
+
+Dodajte nekaj sloga za postavitev levega in desnega vsebnika. Ker je le en levi vsebnik in en desni vsebnik, so v oznaki označeni z id-ji. Za njihovo oblikovanje uporabite `#`:
+
+```CSS
+#left-container {
+	background-color: #eee;
+	width: 15%;
+	left: 0px;
+	top: 0px;
+	position: absolute;
+	height: 100%;
+	padding: 10px;
+}
+
+#right-container {
+	background-color: #eee;
+	width: 15%;
+	right: 0px;
+	top: 0px;
+	position: absolute;
+	height: 100%;
+	padding: 10px;
+}
+```
+
+Tukaj ste te vsebnike postavili z absolutnim pozicioniranjem na skrajno levo in desno stran zaslona ter uporabili odstotke za njihovo širino, da se lahko prilagodijo majhnim mobilnim zaslonom.
+
+✅ Ta koda se precej ponavlja, zato ni "DRY" (Don't Repeat Yourself); ali lahko najdete boljši način za oblikovanje teh id-jev, morda z id-jem in razredom? Spremeniti bi morali oznako in preoblikovati CSS:
+
+```html
+<div id="left-container" class="container"></div>
+```
+
+### Razredi
+
+V zgornjem primeru ste oblikovali dva edinstvena elementa na zaslonu. Če želite, da se slogi uporabljajo za več elementov na zaslonu, lahko uporabite CSS razrede. To storite za postavitev rastlin v levem in desnem vsebniku.
+
+Opazite, da ima vsaka rastlina v HTML oznaki kombinacijo id-jev in razredov. Id-ji se tukaj uporabljajo za JavaScript, ki ga boste kasneje dodali za manipulacijo postavitve rastlin v terariju. Razredi pa dajejo vsem rastlinam določen slog.
+
+```html
+<div class="plant-holder">
+	<img class="plant" alt="plant" id="plant1" src="./images/plant1.png" />
+</div>
+```
+
+Dodajte naslednje v svojo datoteko `style.css`:
+
+```CSS
+.plant-holder {
+	position: relative;
+	height: 13%;
+	left: -10px;
+}
+
+.plant {
+	position: absolute;
+	max-width: 150%;
+	max-height: 150%;
+	z-index: 2;
+}
+```
+
+Opazno v tem odlomku je mešanje relativnega in absolutnega pozicioniranja, kar bomo obravnavali v naslednjem razdelku. Oglejte si, kako so višine obravnavane z odstotki:
+
+Višino držala za rastline ste nastavili na 13 %, kar je dobra vrednost, da so vse rastline prikazane v vsakem navpičnem vsebniku brez potrebe po drsenju.
+
+Držalo za rastline ste premaknili v levo, da so rastline bolj centrirane znotraj vsebnika. Slike imajo veliko prosojnega ozadja, da so bolj vlečljive, zato jih je treba potisniti v levo, da se bolje prilegajo zaslonu.
+
+Rastlini sami ste dali največjo širino 150 %. To omogoča, da se zmanjša, ko se brskalnik zmanjša. Poskusite spremeniti velikost brskalnika; rastline ostanejo v svojih vsebnikih, vendar se zmanjšajo, da se prilegajo.
+
+Opazna je tudi uporaba z-indexa, ki nadzoruje relativno višino elementa (tako da rastline sedijo na vsebniku in se zdijo, kot da so znotraj terarija).
+
+✅ Zakaj potrebujete tako držalo za rastline kot tudi selektor za rastline v CSS?
+
+## CSS pozicioniranje
+
+Mešanje lastnosti pozicioniranja (obstajajo statično, relativno, fiksno, absolutno in lepljivo pozicioniranje) je lahko nekoliko zapleteno, vendar vam ob pravilni uporabi omogoča dober nadzor nad elementi na vaših straneh.
+
+Absolutno pozicionirani elementi so pozicionirani glede na svojega najbližjega pozicioniranega prednika, in če ga ni, so pozicionirani glede na telo dokumenta.
+
+Relativno pozicionirani elementi so pozicionirani na podlagi navodil CSS za prilagoditev njihove postavitve glede na njihov začetni položaj.
+
+V našem primeru je `plant-holder` relativno pozicioniran element, ki je pozicioniran znotraj absolutno pozicioniranega vsebnika. Rezultat je, da so stranski vsebniki pritrjeni levo in desno, `plant-holder` pa je gnezden, prilagaja se znotraj stranskih vsebnikov in omogoča prostor za postavitev rastlin v navpično vrsto.
+
+> Rastlina sama ima tudi absolutno pozicioniranje, kar je potrebno, da je vlečljiva, kot boste odkrili v naslednji lekciji.
+
+✅ Eksperimentirajte s spreminjanjem vrst pozicioniranja stranskih vsebnikov in držala za rastline. Kaj se zgodi?
+
+## CSS postavitve
+
+Zdaj boste uporabili, kar ste se naučili, za izdelavo samega terarija, vse z uporabo CSS!
+
+Najprej oblikujte otroke div-a `.terrarium` kot zaobljen pravokotnik z uporabo CSS:
+
+```CSS
+.jar-walls {
+	height: 80%;
+	width: 60%;
+	background: #d1e1df;
+	border-radius: 1rem;
+	position: absolute;
+	bottom: 0.5%;
+	left: 20%;
+	opacity: 0.5;
+	z-index: 1;
+}
+
+.jar-top {
+	width: 50%;
+	height: 5%;
+	background: #d1e1df;
+	position: absolute;
+	bottom: 80.5%;
+	left: 25%;
+	opacity: 0.7;
+	z-index: 1;
+}
+
+.jar-bottom {
+	width: 50%;
+	height: 1%;
+	background: #d1e1df;
+	position: absolute;
+	bottom: 0%;
+	left: 25%;
+	opacity: 0.7;
+}
+
+.dirt {
+	width: 60%;
+	height: 5%;
+	background: #3a241d;
+	position: absolute;
+	border-radius: 0 0 1rem 1rem;
+	bottom: 1%;
+	left: 20%;
+	opacity: 0.7;
+	z-index: -1;
+}
+```
+
+Opazite uporabo odstotkov tukaj. Če zmanjšate brskalnik, lahko vidite, kako se kozarec prav tako prilagaja. Opazite tudi odstotke za širine in višine elementov kozarca ter kako je vsak element absolutno pozicioniran v središču, pritrjen na dno pogleda.
+
+Uporabljamo tudi `rem` za border-radius, dolžino, relativno na pisavo. Več o tej vrsti relativnega merjenja preberite v [CSS specifikaciji](https://www.w3.org/TR/css-values-3/#font-relative-lengths).
+
+✅ Poskusite spremeniti barve in prosojnost kozarca v primerjavi s tistimi za zemljo. Kaj se zgodi? Zakaj?
+
+---
+
+## 🚀Izziv
+
+Dodajte 'mehurček' sijaja na spodnje levo območje kozarca, da bo videti bolj steklen. Oblikovali boste `.jar-glossy-long` in `.jar-glossy-short`, da bosta videti kot odsevni sijaj. Tukaj je, kako bi izgledalo:
+
+![končni terarij](../../../../translated_images/terrarium-final.2f07047ffc597d0a06b06cab28a77801a10dd12fdb6c7fc630e9c40665491c53.sl.png)
+
+Za dokončanje kviza po predavanju pojdite skozi ta modul Learn: [Oblikujte svojo HTML aplikacijo s CSS](https://docs.microsoft.com/learn/modules/build-simple-website/4-css-basics/?WT.mc_id=academic-77807-sagibbon)
+
+## Kviz po predavanju
+
+[Kviz po predavanju](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/18)
+
+## Pregled in samostojno učenje
+
+CSS se zdi na prvi pogled preprost, vendar se pri poskusu popolnega oblikovanja aplikacije za vse brskalnike in vse velikosti zaslonov pojavijo številni izzivi. CSS-Grid in Flexbox sta orodji, razvita za bolj strukturirano in zanesljivo delo. O teh orodjih se učite z igranjem [Flexbox Froggy](https://flexboxfroggy.com/) in [Grid Garden](https://codepip.com/games/grid-garden/).
+
+## Naloga
+
+[CSS Refactoring](assignment.md)
+
+---
+
+**Omejitev odgovornosti**:  
+Ta dokument je bil preveden z uporabo storitve za prevajanje z umetno inteligenco [Co-op Translator](https://github.com/Azure/co-op-translator). Čeprav si prizadevamo za natančnost, vas prosimo, da upoštevate, da lahko avtomatizirani prevodi vsebujejo napake ali netočnosti. Izvirni dokument v njegovem izvirnem jeziku je treba obravnavati kot avtoritativni vir. Za ključne informacije priporočamo profesionalni človeški prevod. Ne prevzemamo odgovornosti za morebitna napačna razumevanja ali napačne interpretacije, ki bi nastale zaradi uporabe tega prevoda.
\ No newline at end of file
diff --git a/translations/sl/3-terrarium/2-intro-to-css/assignment.md b/translations/sl/3-terrarium/2-intro-to-css/assignment.md
new file mode 100644
index 00000000..3898146d
--- /dev/null
+++ b/translations/sl/3-terrarium/2-intro-to-css/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "9d4d75af51aaccfe9af778f792c62919",
+  "translation_date": "2025-08-27T22:49:16+00:00",
+  "source_file": "3-terrarium/2-intro-to-css/assignment.md",
+  "language_code": "sl"
+}
+-->
+# Preoblikovanje CSS
+
+## Navodila
+
+Preoblikujte terarij z uporabo Flexbox ali CSS Grid in naredite posnetke zaslona, da pokažete, da ste ga testirali v več brskalnikih. Morda boste morali spremeniti označevanje, zato ustvarite novo različico aplikacije z umetniškimi elementi, ki so vključeni v vašo preoblikovanje. Ne skrbite za to, da bi elementi postali povlečni; za zdaj samo preoblikujte HTML in CSS.
+
+## Merila
+
+| Merila   | Izjemno                                                         | Zadostno                     | Potrebno izboljšanje                |
+| -------- | --------------------------------------------------------------- | ---------------------------- | ------------------------------------ |
+|          | Predstavite popolnoma preoblikovan terarij z uporabo Flexbox ali CSS Grid | Preoblikujte nekaj elementov | Ne preoblikujete terarija sploh     |
+
+---
+
+**Omejitev odgovornosti**:  
+Ta dokument je bil preveden z uporabo storitve za prevajanje z umetno inteligenco [Co-op Translator](https://github.com/Azure/co-op-translator). Čeprav si prizadevamo za natančnost, vas prosimo, da upoštevate, da lahko avtomatizirani prevodi vsebujejo napake ali netočnosti. Izvirni dokument v njegovem maternem jeziku je treba obravnavati kot avtoritativni vir. Za ključne informacije priporočamo profesionalni človeški prevod. Ne prevzemamo odgovornosti za morebitna nesporazume ali napačne razlage, ki bi nastale zaradi uporabe tega prevoda.
\ No newline at end of file
diff --git a/translations/sl/3-terrarium/3-intro-to-DOM-and-closures/README.md b/translations/sl/3-terrarium/3-intro-to-DOM-and-closures/README.md
new file mode 100644
index 00000000..61e34ba8
--- /dev/null
+++ b/translations/sl/3-terrarium/3-intro-to-DOM-and-closures/README.md
@@ -0,0 +1,230 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "30f8903a1f290e3d438dc2c70fe60259",
+  "translation_date": "2025-08-27T22:50:44+00:00",
+  "source_file": "3-terrarium/3-intro-to-DOM-and-closures/README.md",
+  "language_code": "sl"
+}
+-->
+# Projekt Terrarij, 3. del: Manipulacija DOM-a in zaprtje
+
+![DOM in zaprtje](../../../../translated_images/webdev101-js.10280393044d7eaaec7e847574946add7ddae6be2b2194567d848b61d849334a.sl.png)
+> Sketchnote avtorja [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Predavanje: Kratek kviz
+
+[Predavanje: Kratek kviz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/19)
+
+### Uvod
+
+Manipulacija DOM-a ali "Document Object Model" je ključen vidik spletnega razvoja. Po navedbah [MDN](https://developer.mozilla.org/docs/Web/API/Document_Object_Model/Introduction) je "Document Object Model (DOM) podatkovna predstavitev objektov, ki sestavljajo strukturo in vsebino dokumenta na spletu." Izzivi pri manipulaciji DOM-a na spletu so pogosto spodbudili uporabo JavaScript ogrodij namesto čistega JavaScripta za upravljanje DOM-a, vendar bomo tokrat delali sami!
+
+Poleg tega bo ta lekcija predstavila idejo o [JavaScript zaprtju (closure)](https://developer.mozilla.org/docs/Web/JavaScript/Closures), ki si ga lahko predstavljate kot funkcijo, zaprto znotraj druge funkcije, tako da ima notranja funkcija dostop do obsega zunanje funkcije.
+
+> JavaScript zaprtja so obsežna in zapletena tema. Ta lekcija se dotika osnovne ideje, da boste v kodi za ta terarij našli zaprtje: notranjo funkcijo in zunanjo funkcijo, zasnovani tako, da omogočata notranji funkciji dostop do obsega zunanje funkcije. Za več informacij o tem, kako to deluje, obiščite [obsežno dokumentacijo](https://developer.mozilla.org/docs/Web/JavaScript/Closures).
+
+Uporabili bomo zaprtje za manipulacijo DOM-a.
+
+DOM si predstavljajte kot drevo, ki predstavlja vse načine, kako je mogoče manipulirati z dokumentom spletne strani. Različni API-ji (Application Program Interfaces) so bili napisani, da lahko programerji s svojim programskim jezikom dostopajo do DOM-a in ga urejajo, spreminjajo, preurejajo in drugače upravljajo.
+
+![Predstavitev DOM drevesa](../../../../translated_images/dom-tree.7daf0e763cbbba9273f9a66fe04c98276d7d23932309b195cb273a9cf1819b42.sl.png)
+
+> Predstavitev DOM-a in HTML označevanja, ki se nanj nanaša. Avtor: [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
+
+V tej lekciji bomo dokončali naš interaktivni projekt terarija z ustvarjanjem JavaScript kode, ki bo uporabniku omogočila manipulacijo rastlin na strani.
+
+### Predpogoj
+
+Imeti morate izdelan HTML in CSS za svoj terarij. Do konca te lekcije boste lahko premikali rastline v terarij in iz njega z vlečenjem.
+
+### Naloga
+
+V svoji mapi za terarij ustvarite novo datoteko z imenom `script.js`. To datoteko uvozite v razdelek `<head>`:
+
+```html
+	<script src="./script.js" defer></script>
+```
+
+> Opomba: uporabite `defer` pri uvažanju zunanje JavaScript datoteke v HTML datoteko, da omogočite izvajanje JavaScripta šele po tem, ko je HTML datoteka popolnoma naložena. Lahko bi uporabili tudi atribut `async`, ki omogoča izvajanje skripte med analiziranjem HTML datoteke, vendar je v našem primeru pomembno, da so HTML elementi popolnoma na voljo za vlečenje, preden omogočimo izvajanje skripte za vlečenje.
+---
+
+## DOM elementi
+
+Najprej morate ustvariti reference na elemente, ki jih želite manipulirati v DOM-u. V našem primeru gre za 14 rastlin, ki trenutno čakajo v stranskih vrsticah.
+
+### Naloga
+
+```html
+dragElement(document.getElementById('plant1'));
+dragElement(document.getElementById('plant2'));
+dragElement(document.getElementById('plant3'));
+dragElement(document.getElementById('plant4'));
+dragElement(document.getElementById('plant5'));
+dragElement(document.getElementById('plant6'));
+dragElement(document.getElementById('plant7'));
+dragElement(document.getElementById('plant8'));
+dragElement(document.getElementById('plant9'));
+dragElement(document.getElementById('plant10'));
+dragElement(document.getElementById('plant11'));
+dragElement(document.getElementById('plant12'));
+dragElement(document.getElementById('plant13'));
+dragElement(document.getElementById('plant14'));
+```
+
+Kaj se tukaj dogaja? Sklicujete se na dokument in iščete po njegovem DOM-u, da najdete element z določenim Id-jem. Se spomnite, da ste v prvi lekciji o HTML-ju vsakemu slikovnemu elementu rastline dodelili posamezen Id (`id="plant1"`)? Zdaj boste to delo uporabili. Po identifikaciji vsakega elementa ta element posredujete funkciji `dragElement`, ki jo boste ustvarili čez trenutek. Tako je element v HTML-ju zdaj omogočen za vlečenje ali pa bo kmalu.
+
+✅ Zakaj se sklicujemo na elemente po Id-ju? Zakaj ne po njihovem CSS razredu? Morda se vrnite na prejšnjo lekcijo o CSS-ju, da odgovorite na to vprašanje.
+
+---
+
+## Zaprtje
+
+Zdaj ste pripravljeni ustvariti zaprtje `dragElement`, ki je zunanja funkcija, ki zapira notranjo funkcijo ali funkcije (v našem primeru bomo imeli tri).
+
+Zaprtja so uporabna, kadar ena ali več funkcij potrebuje dostop do obsega zunanje funkcije. Tukaj je primer:
+
+```javascript
+function displayCandy(){
+	let candy = ['jellybeans'];
+	function addCandy(candyType) {
+		candy.push(candyType)
+	}
+	addCandy('gumdrops');
+}
+displayCandy();
+console.log(candy)
+```
+
+V tem primeru funkcija `displayCandy` obdaja funkcijo, ki potisne novo vrsto sladkarije v že obstoječe polje v funkciji. Če bi zagnali to kodo, bi bilo polje `candy` nedoločeno, saj je lokalna spremenljivka (lokalna za zaprtje).
+
+✅ Kako lahko naredite polje `candy` dostopno? Poskusite ga premakniti izven zaprtja. Tako bo polje postalo globalno, namesto da bi ostalo na voljo samo v lokalnem obsegu zaprtja.
+
+### Naloga
+
+Pod deklaracijami elementov v `script.js` ustvarite funkcijo:
+
+```javascript
+function dragElement(terrariumElement) {
+	//set 4 positions for positioning on the screen
+	let pos1 = 0,
+		pos2 = 0,
+		pos3 = 0,
+		pos4 = 0;
+	terrariumElement.onpointerdown = pointerDrag;
+}
+```
+
+`dragElement` dobi svoj objekt `terrariumElement` iz deklaracij na vrhu skripte. Nato nastavite nekaj lokalnih položajev na `0` za objekt, posredovan funkciji. To so lokalne spremenljivke, ki bodo manipulirane za vsak element, ko boste dodali funkcionalnost vlečenja in spuščanja znotraj zaprtja za vsak element. Terrarij bo napolnjen s temi vlečenimi elementi, zato mora aplikacija slediti, kje so postavljeni.
+
+Poleg tega je elementu `terrariumElement`, ki je posredovan tej funkciji, dodeljen dogodek `pointerdown`, ki je del [web API-jev](https://developer.mozilla.org/docs/Web/API), zasnovanih za pomoč pri upravljanju DOM-a. `onpointerdown` se sproži, ko je gumb pritisnjen ali, v našem primeru, ko je dotaknjen vlečljiv element. Ta obdelovalec dogodkov deluje tako na [spletnih kot mobilnih brskalnikih](https://caniuse.com/?search=onpointerdown), z nekaj izjemami.
+
+✅ [Obdelovalec dogodkov `onclick`](https://developer.mozilla.org/docs/Web/API/GlobalEventHandlers/onclick) ima veliko večjo podporo med brskalniki; zakaj ga tukaj ne bi uporabili? Razmislite o točnem tipu interakcije zaslona, ki jo želite ustvariti.
+
+---
+
+## Funkcija Pointerdrag
+
+Element `terrariumElement` je pripravljen za vlečenje; ko se sproži dogodek `onpointerdown`, se pokliče funkcija `pointerDrag`. Dodajte to funkcijo takoj pod to vrstico: `terrariumElement.onpointerdown = pointerDrag;`:
+
+### Naloga 
+
+```javascript
+function pointerDrag(e) {
+	e.preventDefault();
+	console.log(e);
+	pos3 = e.clientX;
+	pos4 = e.clientY;
+}
+```
+
+Dogaja se več stvari. Najprej preprečite privzete dogodke, ki se običajno zgodijo ob `pointerdown`, z uporabo `e.preventDefault();`. Tako imate več nadzora nad vedenjem vmesnika.
+
+> Vrnite se k tej vrstici, ko boste popolnoma zgradili datoteko skripte, in jo poskusite brez `e.preventDefault()` - kaj se zgodi?
+
+Drugič, odprite `index.html` v oknu brskalnika in preglejte vmesnik. Ko kliknete rastlino, lahko vidite, kako je dogodek 'e' zajet. Raziščite dogodek, da vidite, koliko informacij je zbranih z enim dogodkom pointerdown!  
+
+Nato opazite, kako sta lokalni spremenljivki `pos3` in `pos4` nastavljeni na e.clientX. Vrednosti `e` lahko najdete v pregledovalniku. Te vrednosti zajamejo x in y koordinate rastline v trenutku, ko jo kliknete ali se je dotaknete. Potrebovali boste natančen nadzor nad vedenjem rastlin, ko jih kliknete in vlečete, zato spremljate njihove koordinate.
+
+✅ Ali postaja bolj jasno, zakaj je celotna aplikacija zgrajena z enim velikim zaprtjem? Če ne bi bila, kako bi ohranili obseg za vsako od 14 vlečljivih rastlin?
+
+Dokončajte začetno funkcijo z dodajanjem še dveh manipulacij dogodkov pointer pod `pos4 = e.clientY`:
+
+```html
+document.onpointermove = elementDrag;
+document.onpointerup = stopElementDrag;
+```
+Zdaj označujete, da želite, da se rastlina premika skupaj s kazalcem, ko ga premikate, in da se vlečenje ustavi, ko rastlino odznačite. `onpointermove` in `onpointerup` sta del istega API-ja kot `onpointerdown`. Vmesnik bo zdaj metalo napake, saj še niste definirali funkcij `elementDrag` in `stopElementDrag`, zato jih zgradite naslednje.
+
+## Funkciji elementDrag in stopElementDrag
+
+Zaprtje boste dokončali z dodajanjem dveh notranjih funkcij, ki bosta upravljali, kaj se zgodi, ko vlečete rastlino in ko prenehate vleči. Želite, da lahko kadar koli vlečete katero koli rastlino in jo postavite kamor koli na zaslon. Ta vmesnik je precej neomejen (na primer ni območja za spuščanje), da vam omogoči oblikovanje terarija točno tako, kot želite, z dodajanjem, odstranjevanjem in prestavljanjem rastlin.
+
+### Naloga
+
+Dodajte funkcijo `elementDrag` takoj za zapiralno zavito oklepaj funkcije `pointerDrag`:
+
+```javascript
+function elementDrag(e) {
+	pos1 = pos3 - e.clientX;
+	pos2 = pos4 - e.clientY;
+	pos3 = e.clientX;
+	pos4 = e.clientY;
+	console.log(pos1, pos2, pos3, pos4);
+	terrariumElement.style.top = terrariumElement.offsetTop - pos2 + 'px';
+	terrariumElement.style.left = terrariumElement.offsetLeft - pos1 + 'px';
+}
+```
+V tej funkciji veliko urejate začetne položaje 1-4, ki ste jih nastavili kot lokalne spremenljivke v zunanji funkciji. Kaj se dogaja tukaj?
+
+Med vlečenjem ponovno dodelite `pos1`, tako da ga nastavite na `pos3` (ki ste ga prej nastavili kot `e.clientX`) minus trenutno vrednost `e.clientX`. Podobno operacijo izvedete za `pos2`. Nato ponastavite `pos3` in `pos4` na nove X in Y koordinate elementa. Te spremembe lahko spremljate v konzoli med vlečenjem. Nato manipulirate s slogom css rastline, da nastavite njen nov položaj na podlagi novih položajev `pos1` in `pos2`, pri čemer izračunate zgornje in leve X in Y koordinate rastline na podlagi primerjave njenega odmika s temi novimi položaji.
+
+> `offsetTop` in `offsetLeft` sta CSS lastnosti, ki nastavljata položaj elementa glede na položaj njegovega starša; starš je lahko kateri koli element, ki ni pozicioniran kot `static`. 
+
+Vse to ponovno izračunavanje položajev vam omogoča natančno prilagoditev vedenja terarija in njegovih rastlin.
+
+### Naloga 
+
+Zadnja naloga za dokončanje vmesnika je dodajanje funkcije `stopElementDrag` za zapiralno zavito oklepaj funkcije `elementDrag`:
+
+```javascript
+function stopElementDrag() {
+	document.onpointerup = null;
+	document.onpointermove = null;
+}
+```
+
+Ta majhna funkcija ponastavi dogodka `onpointerup` in `onpointermove`, tako da lahko znova začnete premikati rastlino ali začnete premikati novo rastlino.
+
+✅ Kaj se zgodi, če teh dogodkov ne nastavite na null?
+
+Zdaj ste dokončali svoj projekt!
+
+🥇Čestitke! Dokončali ste svoj čudovit terarij. ![dokončan terarij](../../../../translated_images/terrarium-final.0920f16e87c13a84cd2b553a5af9a3ad1cffbd41fbf8ce715d9e9c43809a5e2c.sl.png)
+
+---
+
+## 🚀Izziv
+
+Dodajte nov obdelovalec dogodkov v svoje zaprtje, da naredite nekaj več z rastlinami; na primer, z dvojnim klikom na rastlino jo premaknite v ospredje. Bodite ustvarjalni!
+
+## Po predavanju: Kviz
+
+[Po predavanju: Kviz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/20)
+
+## Pregled in samostojno učenje
+
+Čeprav se zdi premikanje elementov po zaslonu trivialno, obstaja veliko načinov za to in veliko pasti, odvisno od učinka, ki ga želite doseči. Pravzaprav obstaja celoten [API za vlečenje in spuščanje](https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_API), ki ga lahko preizkusite. Nismo ga uporabili v tem modulu, ker je bil učinek, ki smo ga želeli, nekoliko drugačen, vendar poskusite ta API na svojem projektu in preverite, kaj lahko dosežete.
+
+Poiščite več informacij o dogodkih kazalca v [W3C dokumentaciji](https://www.w3.org/TR/pointerevents1/) in na [MDN spletni dokumentaciji](https://developer.mozilla.org/docs/Web/API/Pointer_events).
+
+Vedno preverite zmogljivosti brskalnika z uporabo [CanIUse.com](https://caniuse.com/).
+
+## Naloga
+
+[Delajte še malo z DOM-om](assignment.md)
+
+---
+
+**Omejitev odgovornosti**:  
+Ta dokument je bil preveden z uporabo storitve za prevajanje z umetno inteligenco [Co-op Translator](https://github.com/Azure/co-op-translator). Čeprav si prizadevamo za natančnost, vas prosimo, da upoštevate, da lahko avtomatizirani prevodi vsebujejo napake ali netočnosti. Izvirni dokument v njegovem maternem jeziku je treba obravnavati kot avtoritativni vir. Za ključne informacije priporočamo profesionalni človeški prevod. Ne prevzemamo odgovornosti za morebitne nesporazume ali napačne razlage, ki bi nastale zaradi uporabe tega prevoda.
\ No newline at end of file
diff --git a/translations/sl/3-terrarium/3-intro-to-DOM-and-closures/assignment.md b/translations/sl/3-terrarium/3-intro-to-DOM-and-closures/assignment.md
new file mode 100644
index 00000000..30c58209
--- /dev/null
+++ b/translations/sl/3-terrarium/3-intro-to-DOM-and-closures/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "22fb6c3cb570c47f1ac65048393941fa",
+  "translation_date": "2025-08-27T22:51:30+00:00",
+  "source_file": "3-terrarium/3-intro-to-DOM-and-closures/assignment.md",
+  "language_code": "sl"
+}
+-->
+# Delajte malo več z DOM-om
+
+## Navodila
+
+Raziskujte DOM nekoliko bolj tako, da 'posvojite' DOM element. Obiščite [seznam DOM vmesnikov](https://developer.mozilla.org/docs/Web/API/Document_Object_Model) na MDN in izberite enega. Poiščite primer njegove uporabe na spletni strani in napišite razlago, kako se uporablja.
+
+## Merila ocenjevanja
+
+| Merila   | Odlično                                      | Zadostno                                        | Potrebno izboljšanje    |
+| -------- | --------------------------------------------- | ------------------------------------------------ | ----------------------- |
+|          | Predstavljen je odstavek z zgledom            | Predstavljen je odstavek brez zgleda            | Odstavek ni predstavljen |
+
+---
+
+**Omejitev odgovornosti**:  
+Ta dokument je bil preveden z uporabo storitve za prevajanje z umetno inteligenco [Co-op Translator](https://github.com/Azure/co-op-translator). Čeprav si prizadevamo za natančnost, vas prosimo, da upoštevate, da lahko avtomatizirani prevodi vsebujejo napake ali netočnosti. Izvirni dokument v njegovem maternem jeziku je treba obravnavati kot avtoritativni vir. Za ključne informacije priporočamo profesionalni človeški prevod. Ne prevzemamo odgovornosti za morebitna nesporazumevanja ali napačne razlage, ki bi nastale zaradi uporabe tega prevoda.
\ No newline at end of file
diff --git a/translations/sl/3-terrarium/README.md b/translations/sl/3-terrarium/README.md
new file mode 100644
index 00000000..9d6732cc
--- /dev/null
+++ b/translations/sl/3-terrarium/README.md
@@ -0,0 +1,45 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "7965cd2bc5dc92ad888dc4c6ab2ab70a",
+  "translation_date": "2025-08-27T22:44:55+00:00",
+  "source_file": "3-terrarium/README.md",
+  "language_code": "sl"
+}
+-->
+# Moj terarij: Projekt za učenje o HTML, CSS in manipulaciji DOM z uporabo JavaScript-a 🌵🌱
+
+Majhna vaja za vlečenje in spuščanje kode. Z nekaj HTML-ja, JS-ja in CSS-ja boste lahko ustvarili spletni vmesnik, ga oblikovali in dodali več interakcij po svoji izbiri.
+
+![moj terarij](../../../translated_images/screenshot_gray.0c796099a1f9f25e40aa55ead81f268434c00af30d7092490759945eda63067d.sl.png)
+
+# Lekcije
+
+1. [Uvod v HTML](./1-intro-to-html/README.md)
+2. [Uvod v CSS](./2-intro-to-css/README.md)
+3. [Uvod v DOM in zaprtja v JS](./3-intro-to-DOM-and-closures/README.md)
+
+## Zasluge
+
+Napisano z ♥️  avtorice [Jen Looper](https://www.twitter.com/jenlooper)
+
+Terarij, ustvarjen s pomočjo CSS-ja, je bil navdihnjen z Jakub Mandrinim steklenim kozarcem [codepen](https://codepen.io/Rotarepmi/pen/rjpNZY).
+
+Ilustracije so ročno narisane s strani [Jen Looper](http://jenlooper.com) s pomočjo aplikacije Procreate.
+
+## Objavite svoj terarij
+
+Svoj terarij lahko objavite ali objavite na spletu z uporabo Azure Static Web Apps.
+
+1. Forkajte to repozitorij
+
+2. Pritisnite ta gumb
+
+[![Gumb za objavo na Azure](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/?feature.customportal=false&WT.mc_id=academic-77807-sagibbon#create/Microsoft.StaticApp)
+
+3. Sledite čarovniku za ustvarjanje svoje aplikacije. Prepričajte se, da nastavite koren aplikacije na `/solution` ali na koren vaše kode. V tej aplikaciji ni API-ja, zato vam ni treba skrbeti za dodajanje tega. V vašem fork-anem repozitoriju bo ustvarjena mapa GitHub, ki bo pomagala graditvenim storitvam Azure Static Web Apps, da zgradijo in objavijo vašo aplikacijo na novem URL-ju.
+
+---
+
+**Omejitev odgovornosti**:  
+Ta dokument je bil preveden z uporabo storitve za prevajanje z umetno inteligenco [Co-op Translator](https://github.com/Azure/co-op-translator). Čeprav si prizadevamo za natančnost, vas prosimo, da upoštevate, da lahko avtomatizirani prevodi vsebujejo napake ali netočnosti. Izvirni dokument v njegovem maternem jeziku je treba obravnavati kot avtoritativni vir. Za ključne informacije priporočamo profesionalni človeški prevod. Ne prevzemamo odgovornosti za morebitna napačna razumevanja ali napačne interpretacije, ki bi nastale zaradi uporabe tega prevoda.
\ No newline at end of file
diff --git a/translations/sl/3-terrarium/solution/README.md b/translations/sl/3-terrarium/solution/README.md
new file mode 100644
index 00000000..da3433e8
--- /dev/null
+++ b/translations/sl/3-terrarium/solution/README.md
@@ -0,0 +1,39 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "6329fbe8bd936068debd78cca6f09c0a",
+  "translation_date": "2025-08-27T22:47:21+00:00",
+  "source_file": "3-terrarium/solution/README.md",
+  "language_code": "sl"
+}
+-->
+# Moj terarij: Projekt za učenje o HTML, CSS in manipulaciji DOM z uporabo JavaScript 🌵🌱
+
+Majhna vaja z vlečenjem in spuščanjem. Z nekaj HTML, JS in CSS lahko zgradite spletni vmesnik, ga oblikujete in dodate interakcijo.
+
+![moj terarij](../../../../translated_images/screenshot_gray.0c796099a1f9f25e40aa55ead81f268434c00af30d7092490759945eda63067d.sl.png)
+
+## Zasluge
+
+Napisano z ♥️  avtorice [Jen Looper](https://www.twitter.com/jenlooper)
+
+Terarij, ustvarjen s pomočjo CSS, je bil navdihnjen z Jakub Mandrinim steklenim kozarcem [codepen](https://codepen.io/Rotarepmi/pen/rjpNZY).
+
+Umetniška dela so ročno narisana s strani [Jen Looper](http://jenlooper.com) z uporabo Procreate.
+
+## Objavite svoj terarij
+
+Svoj terarij lahko objavite ali ga naredite dostopnega na spletu z uporabo Azure Static Web Apps.
+
+1. Forkajte ta repozitorij
+
+2. Pritisnite ta gumb
+
+[![Deploy to Azure button](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/?feature.customportal=false&WT.mc_id=academic-77807-sagibbon#create/Microsoft.StaticApp)
+
+3. Sledite čarovniku za ustvarjanje svoje aplikacije. Prepričajte se, da nastavite koren aplikacije na `/solution` ali na koren vaše kode. V tej aplikaciji ni API-ja, zato vam ni treba skrbeti za njegovo dodajanje. V vašem fork-anem repozitoriju bo ustvarjena mapa .github, ki bo pomagala Azure Static Web Apps storitvi za gradnjo in objavo vaše aplikacije na novem URL-ju.
+
+---
+
+**Omejitev odgovornosti**:  
+Ta dokument je bil preveden z uporabo storitve za prevajanje z umetno inteligenco [Co-op Translator](https://github.com/Azure/co-op-translator). Čeprav si prizadevamo za natančnost, vas prosimo, da upoštevate, da lahko avtomatizirani prevodi vsebujejo napake ali netočnosti. Izvirni dokument v njegovem izvirnem jeziku je treba obravnavati kot avtoritativni vir. Za ključne informacije priporočamo profesionalni človeški prevod. Ne prevzemamo odgovornosti za morebitne nesporazume ali napačne razlage, ki bi nastale zaradi uporabe tega prevoda.
\ No newline at end of file
diff --git a/translations/sl/4-typing-game/README.md b/translations/sl/4-typing-game/README.md
new file mode 100644
index 00000000..60c077ca
--- /dev/null
+++ b/translations/sl/4-typing-game/README.md
@@ -0,0 +1,44 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "957547b822c40042e07d591c4fbfde4f",
+  "translation_date": "2025-08-27T22:55:33+00:00",
+  "source_file": "4-typing-game/README.md",
+  "language_code": "sl"
+}
+-->
+# Programiranje na osnovi dogodkov - Ustvarite igro tipkanja
+
+## Uvod
+
+Tipkanje je ena izmed najbolj podcenjenih veščin razvijalca. Sposobnost hitrega prenosa misli iz glave v urejevalnik omogoča, da ustvarjalnost teče brez ovir. Eden najboljših načinov za učenje je igranje igre!
+
+> Torej, ustvarimo igro tipkanja!
+
+Uporabili boste svoje dosedanje znanje JavaScripta, HTML-ja in CSS-ja za ustvarjanje igre tipkanja. Igra bo igralcu prikazala naključen citat (uporabljamo citate [Sherlocka Holmesa](https://en.wikipedia.org/wiki/Sherlock_Holmes)) in merila, koliko časa igralec potrebuje, da ga natančno prepiše. Uporabili boste svoje dosedanje znanje JavaScripta, HTML-ja in CSS-ja za ustvarjanje igre tipkanja.
+
+![demo](../../../4-typing-game/images/demo.gif)
+
+## Predpogoji
+
+Ta lekcija predvideva, da ste seznanjeni z naslednjimi koncepti:
+
+- Ustvarjanje vnosnih polj za besedilo in gumbov
+- CSS in nastavljanje slogov z uporabo razredov
+- Osnove JavaScripta
+  - Ustvarjanje polja
+  - Ustvarjanje naključne številke
+  - Pridobivanje trenutnega časa
+
+## Lekcija
+
+[Ustvarjanje igre tipkanja z uporabo programiranja na osnovi dogodkov](./typing-game/README.md)
+
+## Zasluge
+
+Napisano z ♥️ avtorja [Christopher Harrison](http://www.twitter.com/geektrainer)
+
+---
+
+**Omejitev odgovornosti**:  
+Ta dokument je bil preveden z uporabo storitve za prevajanje z umetno inteligenco [Co-op Translator](https://github.com/Azure/co-op-translator). Čeprav si prizadevamo za natančnost, vas prosimo, da upoštevate, da lahko avtomatizirani prevodi vsebujejo napake ali netočnosti. Izvirni dokument v njegovem maternem jeziku je treba obravnavati kot avtoritativni vir. Za ključne informacije priporočamo profesionalni človeški prevod. Ne prevzemamo odgovornosti za morebitna nesporazumevanja ali napačne razlage, ki bi nastale zaradi uporabe tega prevoda.
\ No newline at end of file
diff --git a/translations/sl/4-typing-game/solution/README.md b/translations/sl/4-typing-game/solution/README.md
new file mode 100644
index 00000000..937fc0e0
--- /dev/null
+++ b/translations/sl/4-typing-game/solution/README.md
@@ -0,0 +1,15 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "068cbb9b3c10a96d503f6cdd6c9ace8c",
+  "translation_date": "2025-08-27T22:58:31+00:00",
+  "source_file": "4-typing-game/solution/README.md",
+  "language_code": "sl"
+}
+-->
+To je rezervirano mesto, namenoma pusteno prazno
+
+---
+
+**Omejitev odgovornosti**:  
+Ta dokument je bil preveden z uporabo storitve za prevajanje z umetno inteligenco [Co-op Translator](https://github.com/Azure/co-op-translator). Čeprav si prizadevamo za natančnost, vas prosimo, da upoštevate, da lahko avtomatizirani prevodi vsebujejo napake ali netočnosti. Izvirni dokument v njegovem maternem jeziku je treba obravnavati kot avtoritativni vir. Za ključne informacije priporočamo profesionalni človeški prevod. Ne prevzemamo odgovornosti za morebitna napačna razumevanja ali napačne interpretacije, ki bi nastale zaradi uporabe tega prevoda.
\ No newline at end of file
diff --git a/translations/sl/4-typing-game/typing-game/README.md b/translations/sl/4-typing-game/typing-game/README.md
new file mode 100644
index 00000000..3e5ecd01
--- /dev/null
+++ b/translations/sl/4-typing-game/typing-game/README.md
@@ -0,0 +1,353 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "e982871b8388c59c22a41b73b5fca70f",
+  "translation_date": "2025-08-27T22:57:17+00:00",
+  "source_file": "4-typing-game/typing-game/README.md",
+  "language_code": "sl"
+}
+-->
+# Ustvarjanje igre z uporabo dogodkov
+
+## Predhodni kviz
+
+[Predhodni kviz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/21)
+
+## Programiranje, ki temelji na dogodkih
+
+Pri ustvarjanju aplikacije za brskalnik uporabniku omogočimo grafični uporabniški vmesnik (GUI), ki ga uporablja za interakcijo z našim izdelkom. Najpogostejši način interakcije z brskalnikom je prek klikanja in tipkanja v različnih elementih. Izziv, s katerim se soočamo kot razvijalci, je, da ne vemo, kdaj bo uporabnik izvedel te operacije!
+
+[Programiranje, ki temelji na dogodkih](https://en.wikipedia.org/wiki/Event-driven_programming) je ime za vrsto programiranja, ki ga potrebujemo za ustvarjanje našega GUI-ja. Če nekoliko razčlenimo ta izraz, vidimo, da je ključna beseda tukaj **dogodek**. [Dogodek](https://www.merriam-webster.com/dictionary/event), po definiciji Merriam-Webster, pomeni "nekaj, kar se zgodi". To popolnoma opisuje našo situacijo. Vemo, da se bo nekaj zgodilo, zaradi česar želimo izvesti določeno kodo kot odziv, vendar ne vemo, kdaj se bo to zgodilo.
+
+Način, kako označimo del kode, ki ga želimo izvesti, je z ustvarjanjem funkcije. Ko razmišljamo o [proceduralnem programiranju](https://en.wikipedia.org/wiki/Procedural_programming), se funkcije kličejo v določenem vrstnem redu. Enako velja za programiranje, ki temelji na dogodkih. Razlika je v tem, **kako** se funkcije kličejo.
+
+Za obravnavo dogodkov (klikanje gumbov, tipkanje itd.) registriramo **poslušalce dogodkov**. Poslušalec dogodkov je funkcija, ki posluša, da se zgodi dogodek, in se nato izvede kot odziv. Poslušalci dogodkov lahko posodobijo uporabniški vmesnik, pokličejo strežnik ali opravijo karkoli drugega, kar je potrebno kot odziv na dejanje uporabnika. Poslušalca dogodkov dodamo z uporabo [addEventListener](https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener) in podamo funkcijo za izvedbo.
+
+> **NOTE:** Pomembno je poudariti, da obstaja veliko načinov za ustvarjanje poslušalcev dogodkov. Uporabite lahko anonimne funkcije ali ustvarite poimenovane. Uporabite lahko različne bližnjice, kot je nastavitev lastnosti `click` ali uporaba `addEventListener`. V naši vaji se bomo osredotočili na `addEventListener` in anonimne funkcije, saj je to verjetno najpogostejša tehnika, ki jo uporabljajo spletni razvijalci. Prav tako je najbolj prilagodljiva, saj `addEventListener` deluje za vse dogodke, ime dogodka pa lahko podamo kot parameter.
+
+### Pogosti dogodki
+
+Na voljo je [na desetine dogodkov](https://developer.mozilla.org/docs/Web/Events), ki jih lahko poslušate pri ustvarjanju aplikacije. V bistvu karkoli uporabnik naredi na strani sproži dogodek, kar vam daje veliko moč, da zagotovite želeno izkušnjo. Na srečo boste običajno potrebovali le nekaj dogodkov. Tukaj je nekaj pogostih (vključno z dvema, ki ju bomo uporabili pri ustvarjanju naše igre):
+
+- [click](https://developer.mozilla.org/docs/Web/API/Element/click_event): Uporabnik je kliknil nekaj, običajno gumb ali hiperpovezavo
+- [contextmenu](https://developer.mozilla.org/docs/Web/API/Element/contextmenu_event): Uporabnik je kliknil z desnim gumbom miške
+- [select](https://developer.mozilla.org/docs/Web/API/Element/select_event): Uporabnik je označil nekaj besedila
+- [input](https://developer.mozilla.org/docs/Web/API/Element/input_event): Uporabnik je vnesel nekaj besedila
+
+## Ustvarjanje igre
+
+Ustvarili bomo igro, da raziščemo, kako dogodki delujejo v JavaScriptu. Naša igra bo preizkusila tipkarske spretnosti igralca, kar je ena najbolj podcenjenih spretnosti, ki bi jo moral imeti vsak razvijalec. Vsi bi morali vaditi tipkanje! Splošen potek igre bo videti takole:
+
+- Igralec klikne gumb za začetek in mu je prikazan citat za tipkanje
+- Igralec čim hitreje vtipka citat v besedilno polje
+  - Ko dokonča vsako besedo, se naslednja beseda označi
+  - Če igralec naredi tipkarsko napako, se besedilno polje obarva rdeče
+  - Ko igralec dokonča citat, se prikaže sporočilo o uspehu z izmerjenim časom
+
+Zgradimo igro in se naučimo o dogodkih!
+
+### Struktura datotek
+
+Potrebovali bomo tri datoteke: **index.html**, **script.js** in **style.css**. Začnimo z nastavitvijo teh datotek, da si olajšamo delo.
+
+- Ustvarite novo mapo za svoje delo tako, da odprete konzolo ali terminal in izvedete naslednji ukaz:
+
+```bash
+# Linux or macOS
+mkdir typing-game && cd typing-game
+
+# Windows
+md typing-game && cd typing-game
+```
+
+- Odprite Visual Studio Code
+
+```bash
+code .
+```
+
+- Dodajte tri datoteke v mapo v Visual Studio Code z naslednjimi imeni:
+  - index.html
+  - script.js
+  - style.css
+
+## Ustvarite uporabniški vmesnik
+
+Če preučimo zahteve, vemo, da bomo na naši HTML strani potrebovali nekaj elementov. To je nekako kot recept, kjer potrebujemo nekaj sestavin:
+
+- Prostor za prikaz citata, ki ga mora uporabnik vtipkati
+- Prostor za prikaz sporočil, kot je sporočilo o uspehu
+- Besedilno polje za tipkanje
+- Gumb za začetek
+
+Vsak od teh elementov bo potreboval ID-je, da bomo lahko z njimi delali v našem JavaScriptu. Dodali bomo tudi reference na datoteke CSS in JavaScript, ki jih bomo ustvarili.
+
+Ustvarite novo datoteko z imenom **index.html**. Dodajte naslednji HTML:
+
+```html
+<!-- inside index.html -->
+<html>
+<head>
+  <title>Typing game</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <h1>Typing game!</h1>
+  <p>Practice your typing skills with a quote from Sherlock Holmes. Click **start** to begin!</p>
+  <p id="quote"></p> <!-- This will display our quote -->
+  <p id="message"></p> <!-- This will display any status messages -->
+  <div>
+    <input type="text" aria-label="current word" id="typed-value" /> <!-- The textbox for typing -->
+    <button type="button" id="start">Start</button> <!-- To start the game -->
+  </div>
+  <script src="script.js"></script>
+</body>
+</html>
+```
+
+### Zaženite aplikacijo
+
+Vedno je najbolje razvijati iterativno, da vidimo, kako stvari izgledajo. Zaženimo našo aplikacijo. Obstaja čudovita razširitev za Visual Studio Code, imenovana [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon), ki bo gostila vašo aplikacijo lokalno in osvežila brskalnik vsakič, ko shranite.
+
+- Namestite [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) tako, da sledite povezavi in kliknete **Install**
+  - Brskalnik vas bo pozval, da odprete Visual Studio Code, nato pa vas bo Visual Studio Code pozval, da izvedete namestitev
+  - Po potrebi znova zaženite Visual Studio Code
+- Ko je nameščen, v Visual Studio Code pritisnite Ctrl-Shift-P (ali Cmd-Shift-P), da odprete paleto ukazov
+- Vnesite **Live Server: Open with Live Server**
+  - Live Server bo začel gostiti vašo aplikacijo
+- Odprite brskalnik in pojdite na **https://localhost:5500**
+- Zdaj bi morali videti stran, ki ste jo ustvarili!
+
+Dodajmo nekaj funkcionalnosti.
+
+## Dodajte CSS
+
+Ko smo ustvarili naš HTML, dodajmo CSS za osnovno oblikovanje. Moramo označiti besedo, ki jo mora igralec vtipkati, in obarvati besedilno polje, če je vneseno besedilo napačno. To bomo storili z dvema razredoma.
+
+Ustvarite novo datoteko z imenom **style.css** in dodajte naslednjo sintakso.
+
+```css
+/* inside style.css */
+.highlight {
+  background-color: yellow;
+}
+
+.error {
+  background-color: lightcoral;
+  border: red;
+}
+```
+
+✅ Pri CSS-ju lahko postavite svojo stran, kakor želite. Vzemite si nekaj časa in naredite stran bolj privlačno:
+
+- Izberite drugačno pisavo
+- Obarvajte naslove
+- Spremenite velikost elementov
+
+## JavaScript
+
+Ko smo ustvarili naš uporabniški vmesnik, se osredotočimo na JavaScript, ki bo zagotovil logiko. Razdelili bomo to na nekaj korakov:
+
+- [Ustvarite konstante](../../../../4-typing-game/typing-game)
+- [Poslušalec dogodkov za začetek igre](../../../../4-typing-game/typing-game)
+- [Poslušalec dogodkov za tipkanje](../../../../4-typing-game/typing-game)
+
+Najprej pa ustvarite novo datoteko z imenom **script.js**.
+
+### Dodajte konstante
+
+Potrebovali bomo nekaj elementov, da si olajšamo programiranje. Spet, podobno kot recept, tukaj je, kaj bomo potrebovali:
+
+- Tabelo z vsemi citati
+- Prazno tabelo za shranjevanje vseh besed trenutnega citata
+- Prostor za shranjevanje indeksa besede, ki jo igralec trenutno tipka
+- Čas, ko je igralec kliknil začetek
+
+Prav tako bomo želeli reference na elemente uporabniškega vmesnika:
+
+- Besedilno polje (**typed-value**)
+- Prikaz citata (**quote**)
+- Sporočilo (**message**)
+
+```javascript
+// inside script.js
+// all of our quotes
+const quotes = [
+    'When you have eliminated the impossible, whatever remains, however improbable, must be the truth.',
+    'There is nothing more deceptive than an obvious fact.',
+    'I ought to know by this time that when a fact appears to be opposed to a long train of deductions it invariably proves to be capable of bearing some other interpretation.',
+    'I never make exceptions. An exception disproves the rule.',
+    'What one man can invent another can discover.',
+    'Nothing clears up a case so much as stating it to another person.',
+    'Education never ends, Watson. It is a series of lessons, with the greatest for the last.',
+];
+// store the list of words and the index of the word the player is currently typing
+let words = [];
+let wordIndex = 0;
+// the starting time
+let startTime = Date.now();
+// page elements
+const quoteElement = document.getElementById('quote');
+const messageElement = document.getElementById('message');
+const typedValueElement = document.getElementById('typed-value');
+```
+
+✅ Dodajte več citatov v svojo igro
+
+> **NOTE:** Elemente lahko kadar koli pridobimo v kodi z uporabo `document.getElementById`. Ker bomo te elemente redno uporabljali, se bomo izognili tipkarskim napakam z uporabo konstant. Okviri, kot sta [Vue.js](https://vuejs.org/) ali [React](https://reactjs.org/), vam lahko pomagajo bolje upravljati centralizacijo vaše kode.
+
+Vzemite si minuto in si oglejte video o uporabi `const`, `let` in `var`.
+
+[![Vrste spremenljivk](https://img.youtube.com/vi/JNIXfGiDWM8/0.jpg)](https://youtube.com/watch?v=JNIXfGiDWM8 "Vrste spremenljivk")
+
+> 🎥 Kliknite zgornjo sliko za video o spremenljivkah.
+
+### Dodajte logiko za začetek
+
+Za začetek igre bo igralec kliknil na gumb za začetek. Seveda ne vemo, kdaj bo kliknil na začetek. Tukaj pride v poštev [poslušalec dogodkov](https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener). Poslušalec dogodkov nam omogoča poslušanje, da se nekaj zgodi (dogodek), in izvedbo kode kot odziv. V našem primeru želimo izvesti kodo, ko uporabnik klikne na začetek.
+
+Ko uporabnik klikne **start**, moramo izbrati citat, nastaviti uporabniški vmesnik in nastaviti sledenje trenutni besedi ter čas. Spodaj je JavaScript, ki ga morate dodati; razložimo ga takoj po bloku kode.
+
+```javascript
+// at the end of script.js
+document.getElementById('start').addEventListener('click', () => {
+  // get a quote
+  const quoteIndex = Math.floor(Math.random() * quotes.length);
+  const quote = quotes[quoteIndex];
+  // Put the quote into an array of words
+  words = quote.split(' ');
+  // reset the word index for tracking
+  wordIndex = 0;
+
+  // UI updates
+  // Create an array of span elements so we can set a class
+  const spanWords = words.map(function(word) { return `<span>${word} </span>`});
+  // Convert into string and set as innerHTML on quote display
+  quoteElement.innerHTML = spanWords.join('');
+  // Highlight the first word
+  quoteElement.childNodes[0].className = 'highlight';
+  // Clear any prior messages
+  messageElement.innerText = '';
+
+  // Setup the textbox
+  // Clear the textbox
+  typedValueElement.value = '';
+  // set focus
+  typedValueElement.focus();
+  // set the event handler
+
+  // Start the timer
+  startTime = new Date().getTime();
+});
+```
+
+Razčlenimo kodo!
+
+- Nastavitev sledenja besedam
+  - Uporaba [Math.floor](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Math/floor) in [Math.random](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Math/random) nam omogoča naključno izbiro citata iz tabele `quotes`
+  - `quote` pretvorimo v tabelo `words`, da lahko sledimo besedi, ki jo igralec trenutno tipka
+  - `wordIndex` nastavimo na 0, saj bo igralec začel z prvo besedo
+- Nastavitev uporabniškega vmesnika
+  - Ustvarimo tabelo `spanWords`, ki vsebuje vsako besedo znotraj elementa `span`
+    - To nam omogoča označevanje besede na prikazu
+  - `join` tabelo, da ustvarimo niz, ki ga lahko uporabimo za posodobitev `innerHTML` na `quoteElement`
+    - To bo prikazalo citat igralcu
+  - Nastavimo `className` prvega elementa `span` na `highlight`, da ga označimo kot rumenega
+  - Očistimo `messageElement` tako, da nastavimo `innerText` na `''`
+- Nastavitev besedilnega polja
+  - Počistimo trenutno `value` na `typedValueElement`
+  - Nastavimo `focus` na `typedValueElement`
+- Zaženemo časovnik z uporabo `getTime`
+
+### Dodajte logiko za tipkanje
+
+Ko igralec tipka, se sproži dogodek `input`. Ta poslušalec dogodkov bo preveril, ali igralec pravilno tipka besedo, in obravnaval trenutni status igre. Vrnite se v **script.js** in na konec dodajte naslednjo kodo. Razčlenili jo bomo takoj zatem.
+
+```javascript
+// at the end of script.js
+typedValueElement.addEventListener('input', () => {
+  // Get the current word
+  const currentWord = words[wordIndex];
+  // get the current value
+  const typedValue = typedValueElement.value;
+
+  if (typedValue === currentWord && wordIndex === words.length - 1) {
+    // end of sentence
+    // Display success
+    const elapsedTime = new Date().getTime() - startTime;
+    const message = `CONGRATULATIONS! You finished in ${elapsedTime / 1000} seconds.`;
+    messageElement.innerText = message;
+  } else if (typedValue.endsWith(' ') && typedValue.trim() === currentWord) {
+    // end of word
+    // clear the typedValueElement for the new word
+    typedValueElement.value = '';
+    // move to the next word
+    wordIndex++;
+    // reset the class name for all elements in quote
+    for (const wordElement of quoteElement.childNodes) {
+      wordElement.className = '';
+    }
+    // highlight the new word
+    quoteElement.childNodes[wordIndex].className = 'highlight';
+  } else if (currentWord.startsWith(typedValue)) {
+    // currently correct
+    // highlight the next word
+    typedValueElement.className = '';
+  } else {
+    // error state
+    typedValueElement.className = 'error';
+  }
+});
+```
+
+Razčlenimo kodo! Začnemo z zajemom trenutne besede in vrednosti, ki jo je igralec doslej vnesel. Nato imamo logiko, kjer preverimo, ali je citat dokončan, beseda dokončana, beseda pravilna ali (nazadnje), ali je prišlo do napake.
+
+- Citat je dokončan, kar je označeno z `typedValue`, ki je enak `currentWord`, in `wordIndex`, ki je enak enemu manj kot `length` tabele `words`
+  - Izračunamo `elapsedTime` tako, da od trenutnega časa odštejemo `startTime`
+  - `elapsedTime` delimo z 1.000, da ga pretvorimo iz milisekund v sekunde
+  - Prikažemo sporočilo o uspehu
+- Beseda je dokončana, kar je označeno z `typedValue`, ki se konča s presledkom (konec besede) in `typedValue`, ki je enak `currentWord`
+  - Nastavimo `value` na `typedElement` na `''`, da omogočimo tipkanje naslednje besede
+  - Povečamo `wordIndex`, da preidemo na naslednjo besedo
+  - Prehodimo vse `childNodes` elementa `quoteElement`, da nastavimo `className` na `''`, da se vrnemo na privzeti prikaz
+  - Nastavimo `className` trenutne besede na `highlight`, da jo označimo kot naslednjo besedo za tipkanje
+- Beseda je trenutno pravilno vtipkana (a ni dokončana), kar je označeno z `currentWord`, ki se začne z `typedValue`
+  - Poskrbimo, da je `typedValueElement` prikazan kot privzet tako, da počistimo `className`
+- Če smo prišli do sem, imamo napako
+  - Nastavimo `className` na `typedValueElement` na `error`
+
+## Preizkusite svojo aplikacijo
+
+Prišli ste do konca! Zadnji korak je, da zagotovite, da vaša aplikacija deluje. Preizkusite jo! Ne skrbite, če so napake; **vsi razvijalci** imajo napake. Preučite sporočila in odpravljajte težave po potrebi.
+
+Kliknite na **start** in začnite tipkati! Videti bi moralo približno tako kot animacija, ki smo jo videli prej.
+
+![Animacija igre v akciji](../../../../4-typing-game/images/demo.gif)
+
+---
+
+## 🚀 Izziv
+
+Dodajte več funkcionalnosti
+
+- Onemogočite poslušalca dogodkov `input` ob zaključku in ga znova omogočite, ko je gumb kliknjen
+- Onemogočite besedilno polje, ko igralec dokonča citat
+- Prikažite modalno okno s sporočilom o uspehu
+- Shranite najvišje rezultate z uporabo [localStorage](https://developer.mozilla.org/docs/Web/API/Window/localStorage)
+
+## Kviz po predavanju
+
+[Kviz po predavanju](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/22)
+
+## Pregled in samostojno učenje
+
+Preberite več o [vseh dogodkih, ki so na voljo](https://developer.mozilla.org/docs/Web/Events) razvijalcem prek spletnega brskalnika, in razmislite o scenarijih, v katerih bi uporabili posameznega.
+
+## Naloga
+
+[Ustvarite novo igro s tipkovnico](assignment.md)
+
+---
+
+**Omejitev odgovornosti**:  
+Ta dokument je bil preveden z uporabo storitve za prevajanje z umetno inteligenco [Co-op Translator](https://github.com/Azure/co-op-translator). Čeprav si prizadevamo za natančnost, vas prosimo, da upoštevate, da lahko avtomatizirani prevodi vsebujejo napake ali netočnosti. Izvirni dokument v njegovem maternem jeziku je treba obravnavati kot avtoritativni vir. Za ključne informacije priporočamo profesionalni človeški prevod. Ne prevzemamo odgovornosti za morebitna nesporazume ali napačne razlage, ki bi nastale zaradi uporabe tega prevoda.
\ No newline at end of file
diff --git a/translations/sl/4-typing-game/typing-game/assignment.md b/translations/sl/4-typing-game/typing-game/assignment.md
new file mode 100644
index 00000000..67925837
--- /dev/null
+++ b/translations/sl/4-typing-game/typing-game/assignment.md
@@ -0,0 +1,26 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "de5384c118e15e4d1d0eaa00fc01b112",
+  "translation_date": "2025-08-27T22:58:15+00:00",
+  "source_file": "4-typing-game/typing-game/assignment.md",
+  "language_code": "sl"
+}
+-->
+# Ustvarite novo igro s tipkovnico
+
+## Navodila
+
+Ustvarite majhno igro, ki uporablja dogodke tipkovnice za izvajanje nalog. Lahko gre za drugačno vrsto igre tipkanja ali umetniško igro, ki ob pritiskih tipk riše piksle na zaslon. Bodite ustvarjalni!
+
+## Merila
+
+| Merila  | Odlično                   | Zadostno                 | Potrebne izboljšave |
+| ------- | ------------------------- | ------------------------ | ------------------- |
+|         | Predstavljena je celotna igra | Igra je zelo osnovna    | Igra vsebuje napake |
+|         |                           |                          |                     |
+
+---
+
+**Omejitev odgovornosti**:  
+Ta dokument je bil preveden z uporabo storitve za prevajanje z umetno inteligenco [Co-op Translator](https://github.com/Azure/co-op-translator). Čeprav si prizadevamo za natančnost, vas prosimo, da upoštevate, da lahko avtomatizirani prevodi vsebujejo napake ali netočnosti. Izvirni dokument v njegovem maternem jeziku je treba obravnavati kot avtoritativni vir. Za ključne informacije priporočamo profesionalni človeški prevod. Ne prevzemamo odgovornosti za morebitna nesporazume ali napačne razlage, ki bi nastale zaradi uporabe tega prevoda.
\ No newline at end of file
diff --git a/translations/sl/5-browser-extension/1-about-browsers/README.md b/translations/sl/5-browser-extension/1-about-browsers/README.md
new file mode 100644
index 00000000..1f7a65fa
--- /dev/null
+++ b/translations/sl/5-browser-extension/1-about-browsers/README.md
@@ -0,0 +1,182 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "0bb55e0b98600afab801eea115228873",
+  "translation_date": "2025-08-27T22:13:46+00:00",
+  "source_file": "5-browser-extension/1-about-browsers/README.md",
+  "language_code": "sl"
+}
+-->
+# Projekt razširitve brskalnika, 1. del: Vse o brskalnikih
+
+![Skica brskalnika](../../../../translated_images/browser.60317c9be8b7f84adce43e30bff8d47a1ae15793beab762317b2bc6b74337c1a.sl.jpg)
+> Skica avtorja [Wassim Chegham](https://dev.to/wassimchegham/ever-wondered-what-happens-when-you-type-in-a-url-in-an-address-bar-in-a-browser-3dob)
+
+## Predhodni kviz
+
+[Predhodni kviz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/23)
+
+### Uvod
+
+Razširitve brskalnika dodajo dodatno funkcionalnost brskalniku. Preden pa začnete graditi svojo, se morate naučiti nekaj o tem, kako brskalniki delujejo.
+
+### O brskalniku
+
+V tej seriji lekcij se boste naučili, kako zgraditi razširitev brskalnika, ki bo delovala v brskalnikih Chrome, Firefox in Edge. V tem delu boste odkrili, kako brskalniki delujejo, in pripravili osnovne elemente razširitve brskalnika.
+
+Kaj pa sploh je brskalnik? To je programska aplikacija, ki omogoča končnemu uporabniku dostop do vsebine s strežnika in njeno prikazovanje na spletnih straneh.
+
+✅ Malo zgodovine: prvi brskalnik se je imenoval 'WorldWideWeb' in ga je leta 1990 ustvaril Sir Timothy Berners-Lee.
+
+![zgodnji brskalniki](../../../../translated_images/earlybrowsers.d984b711cdf3a42ddac919d46c4b5ca7232f68ccfbd81395e04e5a64c0015277.sl.jpg)
+> Nekateri zgodnji brskalniki, prek [Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing)
+
+Ko se uporabnik poveže z internetom z uporabo URL (Uniform Resource Locator) naslova, običajno prek protokola Hypertext Transfer Protocol z naslovom `http` ali `https`, brskalnik komunicira s spletnim strežnikom in pridobi spletno stran.
+
+Na tej točki brskalnikov pogon za upodabljanje prikaže stran na napravi uporabnika, ki je lahko mobilni telefon, namizni računalnik ali prenosnik.
+
+Brskalniki imajo tudi sposobnost predpomnjenja vsebine, da je ni treba vsakič znova pridobiti s strežnika. Lahko beležijo zgodovino uporabnikovega brskanja, shranjujejo 'piškotke', ki so majhni delci podatkov, ki vsebujejo informacije o uporabnikovi aktivnosti, in še več.
+
+Pomembno je vedeti, da vsi brskalniki niso enaki! Vsak brskalnik ima svoje prednosti in slabosti, profesionalni spletni razvijalec pa mora razumeti, kako narediti spletne strani, ki dobro delujejo v različnih brskalnikih. To vključuje obravnavo majhnih zaslonov, kot je mobilni telefon, pa tudi uporabnika, ki je brez povezave.
+
+Zelo uporabna spletna stran, ki jo verjetno želite dodati med zaznamke v brskalniku, ki ga uporabljate, je [caniuse.com](https://www.caniuse.com). Ko gradite spletne strani, je zelo koristno uporabiti sezname podprtih tehnologij na caniuse, da lahko najbolje podprete svoje uporabnike.
+
+✅ Kako lahko ugotovite, kateri brskalniki so najbolj priljubljeni med uporabniki vaše spletne strani? Preverite svojo analitiko - različni analitični paketi, ki jih lahko namestite kot del svojega procesa spletnega razvoja, vam bodo povedali, kateri brskalniki so najbolj uporabljeni.
+
+## Razširitve brskalnika
+
+Zakaj bi želeli zgraditi razširitev brskalnika? To je priročna stvar, ki jo lahko dodate brskalniku, ko potrebujete hiter dostop do nalog, ki jih pogosto ponavljate. Na primer, če pogosto preverjate barve na različnih spletnih straneh, ki jih uporabljate, lahko namestite razširitev za izbiro barv. Če imate težave z zapomnitvijo gesel, lahko uporabite razširitev za upravljanje gesel.
+
+Razširitve brskalnika so tudi zabavne za razvoj. Običajno obvladujejo omejeno število nalog, ki jih opravljajo zelo dobro.
+
+✅ Katere so vaše najljubše razširitve brskalnika? Katere naloge opravljajo?
+
+### Namestitev razširitev
+
+Preden začnete graditi, si oglejte postopek gradnje in uvajanja razširitve brskalnika. Čeprav se vsak brskalnik nekoliko razlikuje v načinu upravljanja tega postopka, je postopek na Chrome in Firefox podoben temu primeru na Edge:
+
+![posnetek zaslona brskalnika Edge, ki prikazuje odprto stran edge://extensions in odprt meni nastavitev](../../../../translated_images/install-on-edge.d68781acaf0b3d3dada8b7507cde7a64bf74b7040d9818baaa9070668e819f90.sl.png)
+
+> Opomba: Prepričajte se, da ste vklopili način za razvijalce in omogočili razširitve iz drugih trgovin.
+
+V bistvu bo postopek takšen:
+
+- zgradite svojo razširitev z uporabo `npm run build` 
+- v brskalniku se pomaknite na razdelek razširitev z uporabo gumba "Nastavitve in več" (ikona `...`) v zgornjem desnem kotu
+- če gre za novo namestitev, izberite `load unpacked`, da naložite novo razširitev iz njene mape za gradnjo (v našem primeru je to `/dist`) 
+- ali pa kliknite `reload`, če ponovno nalagate že nameščeno razširitev
+
+✅ Ta navodila se nanašajo na razširitve, ki jih zgradite sami; za namestitev razširitev, ki so bile objavljene v trgovini razširitev brskalnika, se pomaknite na te [trgovine](https://microsoftedge.microsoft.com/addons/Microsoft-Edge-Extensions-Home) in namestite razširitev po svoji izbiri.
+
+### Začnite
+
+Zgradili boste razširitev brskalnika, ki prikazuje ogljični odtis vaše regije, prikazuje porabo energije vaše regije in vir energije. Razširitev bo imela obrazec, ki zbira ključ API, da lahko dostopate do API-ja CO2 Signal.
+
+**Potrebujete:**
+
+- [ključ API](https://www.co2signal.com/); vnesite svoj e-poštni naslov v polje na tej strani in poslali vam ga bodo
+- [kodo za vašo regijo](http://api.electricitymap.org/v3/zones), ki ustreza [zemljevidu električne energije](https://www.electricitymap.org/map) (v Bostonu na primer uporabljam 'US-NEISO').
+- [začetno kodo](../../../../5-browser-extension/start). Prenesite mapo `start`; v tej mapi boste dokončali kodo.
+- [NPM](https://www.npmjs.com) - NPM je orodje za upravljanje paketov; namestite ga lokalno in paketi, navedeni v vaši datoteki `package.json`, bodo nameščeni za uporabo pri vašem spletnem projektu
+
+✅ Več o upravljanju paketov se naučite v tem [odličnem modulu za učenje](https://docs.microsoft.com/learn/modules/create-nodejs-project-dependencies/?WT.mc_id=academic-77807-sagibbon)
+
+Vzemite si trenutek in si oglejte osnovno kodo:
+
+dist
+    -|manifest.json (privzete nastavitve tukaj)
+    -|index.html (HTML oznake za sprednji del tukaj)
+    -|background.js (ozadje JS tukaj)
+    -|main.js (zgrajen JS)
+src
+    -|index.js (vaša JS koda gre sem)
+
+✅ Ko imate ključ API in kodo regije pripravljeno, ju shranite nekam v beležko za prihodnjo uporabo.
+
+### Zgradite HTML za razširitev
+
+Ta razširitev ima dva pogleda. Enega za zbiranje ključa API in kode regije:
+
+![posnetek zaslona dokončane razširitve, odprte v brskalniku, ki prikazuje obrazec z vnosnimi polji za ime regije in ključ API.](../../../../translated_images/1.b6da8c1394b07491afeb6b2a8e5aca73ebd3cf478e27bcc9aeabb187e722648e.sl.png)
+
+In drugega za prikaz ogljične porabe regije:
+
+![posnetek zaslona dokončane razširitve, ki prikazuje vrednosti za ogljično porabo in odstotek fosilnih goriv za regijo US-NEISO.](../../../../translated_images/2.1dae52ff0804224692cd648afbf2342955d7afe3b0101b617268130dfb427f55.sl.png)
+
+Začnimo z gradnjo HTML-ja za obrazec in njegovim oblikovanjem s CSS.
+
+V mapi `/dist` boste zgradili obrazec in območje za rezultate. V datoteki `index.html` zapolnite označeno območje obrazca:
+
+```HTML
+<form class="form-data" autocomplete="on">
+	<div>
+		<h2>New? Add your Information</h2>
+	</div>
+	<div>
+		<label for="region">Region Name</label>
+		<input type="text" id="region" required class="region-name" />
+	</div>
+	<div>
+		<label for="api">Your API Key from tmrow</label>
+		<input type="text" id="api" required class="api-key" />
+	</div>
+	<button class="search-btn">Submit</button>
+</form>	
+```
+To je obrazec, kjer bodo shranjene informacije vnesene in shranjene v lokalno shrambo.
+
+Nato ustvarite območje za rezultate; pod zadnjo oznako obrazca dodajte nekaj divov:
+
+```HTML
+<div class="result">
+	<div class="loading">loading...</div>
+	<div class="errors"></div>
+	<div class="data"></div>
+	<div class="result-container">
+		<p><strong>Region: </strong><span class="my-region"></span></p>
+		<p><strong>Carbon Usage: </strong><span class="carbon-usage"></span></p>
+		<p><strong>Fossil Fuel Percentage: </strong><span class="fossil-fuel"></span></p>
+	</div>
+	<button class="clear-btn">Change region</button>
+</div>
+```
+Na tej točki lahko poskusite zgraditi. Prepričajte se, da ste namestili odvisnosti paketa te razširitve:
+
+```
+npm install
+```
+
+Ta ukaz bo uporabil npm, upravitelja paketov Node, za namestitev webpacka za proces gradnje vaše razširitve. Webpack je orodje za združevanje, ki obravnava prevajanje kode. Rezultat tega procesa si lahko ogledate v `/dist/main.js` - videli boste, da je koda združena.
+
+Za zdaj bi se morala razširitev zgraditi, in če jo uvedete v Edge kot razširitev, boste videli lepo prikazan obrazec.
+
+Čestitke, naredili ste prve korake k gradnji razširitve brskalnika. V naslednjih lekcijah jo boste naredili bolj funkcionalno in uporabno.
+
+---
+
+## 🚀 Izziv
+
+Oglejte si trgovino z razširitvami brskalnika in namestite eno v svoj brskalnik. Datoteke lahko preučite na zanimive načine. Kaj odkrijete?
+
+## Kviz po predavanju
+
+[Kviz po predavanju](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/24)
+
+## Pregled in samostojno učenje
+
+V tej lekciji ste se naučili nekaj o zgodovini spletnega brskalnika; izkoristite to priložnost, da se naučite, kako so si izumitelji svetovnega spleta zamislili njegovo uporabo, tako da preberete več o njegovi zgodovini. Nekaj uporabnih strani vključuje:
+
+[Zgodovina spletnih brskalnikov](https://www.mozilla.org/firefox/browsers/browser-history/)
+
+[Zgodovina spleta](https://webfoundation.org/about/vision/history-of-the-web/)
+
+[Intervju s Timom Berners-Leejem](https://www.theguardian.com/technology/2019/mar/12/tim-berners-lee-on-30-years-of-the-web-if-we-dream-a-little-we-can-get-the-web-we-want)
+
+## Naloga 
+
+[Preoblikujte svojo razširitev](assignment.md)
+
+---
+
+**Omejitev odgovornosti**:  
+Ta dokument je bil preveden z uporabo storitve za prevajanje z umetno inteligenco [Co-op Translator](https://github.com/Azure/co-op-translator). Čeprav si prizadevamo za natančnost, vas prosimo, da upoštevate, da lahko avtomatizirani prevodi vsebujejo napake ali netočnosti. Izvirni dokument v njegovem maternem jeziku je treba obravnavati kot avtoritativni vir. Za ključne informacije priporočamo profesionalni človeški prevod. Ne prevzemamo odgovornosti za morebitna nesporazumevanja ali napačne razlage, ki bi nastale zaradi uporabe tega prevoda.
\ No newline at end of file
diff --git a/translations/sl/5-browser-extension/1-about-browsers/assignment.md b/translations/sl/5-browser-extension/1-about-browsers/assignment.md
new file mode 100644
index 00000000..bd73b937
--- /dev/null
+++ b/translations/sl/5-browser-extension/1-about-browsers/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "e3c6f2a03c2336e60412612d870af547",
+  "translation_date": "2025-08-27T22:14:25+00:00",
+  "source_file": "5-browser-extension/1-about-browsers/assignment.md",
+  "language_code": "sl"
+}
+-->
+# Preoblikujte svojo razširitev
+
+## Navodila
+
+Izvorna koda te razširitve že vključuje sloge, vendar jih ni treba uporabiti; naredite razširitev unikatno tako, da preoblikujete njen css datoteko.
+
+## Merila
+
+| Merila  | Vzorno                                       | Zadostno              | Potrebne izboljšave |
+| -------- | -------------------------------------------- | --------------------- | ------------------- |
+|          | Koda je oddana z delujočimi novimi slogi     | Oblikovanje je nepopolno | Slogi so hroščati   |
+
+---
+
+**Omejitev odgovornosti**:  
+Ta dokument je bil preveden z uporabo storitve za prevajanje z umetno inteligenco [Co-op Translator](https://github.com/Azure/co-op-translator). Čeprav si prizadevamo za natančnost, vas prosimo, da upoštevate, da lahko avtomatizirani prevodi vsebujejo napake ali netočnosti. Izvirni dokument v njegovem maternem jeziku je treba obravnavati kot avtoritativni vir. Za ključne informacije priporočamo profesionalni človeški prevod. Ne prevzemamo odgovornosti za morebitna nesporazumevanja ali napačne razlage, ki bi nastale zaradi uporabe tega prevoda.
\ No newline at end of file
diff --git a/translations/sl/5-browser-extension/2-forms-browsers-local-storage/README.md b/translations/sl/5-browser-extension/2-forms-browsers-local-storage/README.md
new file mode 100644
index 00000000..82bc534e
--- /dev/null
+++ b/translations/sl/5-browser-extension/2-forms-browsers-local-storage/README.md
@@ -0,0 +1,240 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "e10f168beac4e7b05e30e0eb5c92bf11",
+  "translation_date": "2025-08-27T22:24:21+00:00",
+  "source_file": "5-browser-extension/2-forms-browsers-local-storage/README.md",
+  "language_code": "sl"
+}
+-->
+# Projekt razširitve brskalnika, 2. del: Klic API-ja, uporaba lokalne shrambe
+
+## Predhodni kviz
+
+[Predhodni kviz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/25)
+
+### Uvod
+
+V tej lekciji boste poklicali API tako, da boste oddali obrazec razširitve brskalnika in prikazali rezultate v razširitvi. Poleg tega se boste naučili, kako shraniti podatke v lokalno shrambo brskalnika za prihodnjo uporabo.
+
+✅ Sledite oštevilčenim segmentom v ustreznih datotekah, da boste vedeli, kam postaviti kodo.
+
+### Priprava elementov za manipulacijo v razširitvi:
+
+Do sedaj ste že ustvarili HTML za obrazec in `<div>` za prikaz rezultatov v razširitvi brskalnika. Od zdaj naprej boste delali v datoteki `/src/index.js` in postopoma gradili razširitev. Oglejte si [prejšnjo lekcijo](../1-about-browsers/README.md) za nastavitev projekta in proces gradnje.
+
+V datoteki `index.js` začnite z ustvarjanjem nekaj `const` spremenljivk za shranjevanje vrednosti, povezanih z različnimi polji:
+
+```JavaScript
+// form fields
+const form = document.querySelector('.form-data');
+const region = document.querySelector('.region-name');
+const apiKey = document.querySelector('.api-key');
+
+// results
+const errors = document.querySelector('.errors');
+const loading = document.querySelector('.loading');
+const results = document.querySelector('.result-container');
+const usage = document.querySelector('.carbon-usage');
+const fossilfuel = document.querySelector('.fossil-fuel');
+const myregion = document.querySelector('.my-region');
+const clearBtn = document.querySelector('.clear-btn');
+```
+
+Vsa ta polja so referencirana prek njihovih CSS razredov, kot ste jih nastavili v HTML-ju v prejšnji lekciji.
+
+### Dodajanje poslušalcev dogodkov
+
+Nato dodajte poslušalce dogodkov za obrazec in gumb za ponastavitev, ki ponastavi obrazec, tako da se ob oddaji obrazca ali kliku na gumb zgodi nekaj, ter dodajte klic za inicializacijo aplikacije na dnu datoteke:
+
+```JavaScript
+form.addEventListener('submit', (e) => handleSubmit(e));
+clearBtn.addEventListener('click', (e) => reset(e));
+init();
+```
+
+✅ Opazite skrajšano obliko za poslušanje dogodkov oddaje ali klika ter kako se dogodek posreduje funkcijama `handleSubmit` ali `reset`. Ali lahko napišete ekvivalent te skrajšane oblike v daljši obliki? Katera vam je ljubša?
+
+### Izdelava funkcij `init()` in `reset()`:
+
+Zdaj boste izdelali funkcijo za inicializacijo razširitve, imenovano `init()`:
+
+```JavaScript
+function init() {
+	//if anything is in localStorage, pick it up
+	const storedApiKey = localStorage.getItem('apiKey');
+	const storedRegion = localStorage.getItem('regionName');
+
+	//set icon to be generic green
+	//todo
+
+	if (storedApiKey === null || storedRegion === null) {
+		//if we don't have the keys, show the form
+		form.style.display = 'block';
+		results.style.display = 'none';
+		loading.style.display = 'none';
+		clearBtn.style.display = 'none';
+		errors.textContent = '';
+	} else {
+        //if we have saved keys/regions in localStorage, show results when they load
+        displayCarbonUsage(storedApiKey, storedRegion);
+		results.style.display = 'none';
+		form.style.display = 'none';
+		clearBtn.style.display = 'block';
+	}
+};
+
+function reset(e) {
+	e.preventDefault();
+	//clear local storage for region only
+	localStorage.removeItem('regionName');
+	init();
+}
+
+```
+
+V tej funkciji je nekaj zanimive logike. Ko jo preberete, lahko vidite, kaj se zgodi?
+
+- Dva `const` preverjata, ali je uporabnik shranil APIKey in kodo regije v lokalni shrambi.
+- Če je katera od teh vrednosti `null`, prikažite obrazec tako, da spremenite njegov slog na 'block'.
+- Skrijte območje rezultatov, nalaganje in gumb za ponastavitev ter nastavite besedilo napake na prazno vrednost.
+- Če obstajata ključ in regija, začnite rutino za:
+  - klic API-ja za pridobitev podatkov o porabi ogljika,
+  - skrivanje območja rezultatov,
+  - skrivanje obrazca,
+  - prikaz gumba za ponastavitev.
+
+Preden nadaljujete, je koristno spoznati zelo pomemben koncept, ki je na voljo v brskalnikih: [LocalStorage](https://developer.mozilla.org/docs/Web/API/Window/localStorage). LocalStorage je uporaben način za shranjevanje nizov v brskalniku kot par `ključ-vrednost`. Ta vrsta spletne shrambe se lahko manipulira z JavaScriptom za upravljanje podatkov v brskalniku. LocalStorage ne poteče, medtem ko se SessionStorage, druga vrsta spletne shrambe, izbriše ob zaprtju brskalnika. Različne vrste shrambe imajo prednosti in slabosti pri uporabi.
+
+> Opomba - razširitev brskalnika ima svojo lokalno shrambo; glavno okno brskalnika je ločena instanca in deluje neodvisno.
+
+APIKey nastavite na vrednost niza, na primer, in lahko vidite, da je nastavljen v Edgeu, če "pregledate" spletno stran (z desnim klikom na brskalnik lahko pregledate) in odprete zavihek Applications za ogled shrambe.
+
+![Podokno lokalne shrambe](../../../../translated_images/localstorage.472f8147b6a3f8d141d9551c95a2da610ac9a3c6a73d4a1c224081c98bae09d9.sl.png)
+
+✅ Razmislite o situacijah, kjer NE bi želeli shraniti nekaterih podatkov v LocalStorage. Na splošno je shranjevanje API ključev v LocalStorage slaba ideja! Vidite, zakaj? V našem primeru, ker je naša aplikacija namenjena zgolj učenju in ne bo objavljena v trgovini z aplikacijami, bomo uporabili to metodo.
+
+Opazite, da uporabljate Web API za manipulacijo LocalStorage, bodisi z uporabo `getItem()`, `setItem()` ali `removeItem()`. Podprto je v večini brskalnikov.
+
+Preden zgradite funkcijo `displayCarbonUsage()`, ki se kliče v `init()`, zgradite funkcionalnost za obravnavo začetne oddaje obrazca.
+
+### Obravnava oddaje obrazca
+
+Ustvarite funkcijo `handleSubmit`, ki sprejme argument dogodka `(e)`. Ustavite propagacijo dogodka (v tem primeru želimo ustaviti osvežitev brskalnika) in pokličite novo funkcijo `setUpUser`, ki ji posredujete argumente `apiKey.value` in `region.value`. Na ta način uporabite dve vrednosti, ki sta pridobljeni prek začetnega obrazca, ko sta ustrezni polji izpolnjeni.
+
+```JavaScript
+function handleSubmit(e) {
+	e.preventDefault();
+	setUpUser(apiKey.value, region.value);
+}
+```
+
+✅ Osvežite spomin - HTML, ki ste ga nastavili v prejšnji lekciji, ima dve vnosni polji, katerih `vrednosti` so zajete prek `const`, ki ste jih nastavili na vrhu datoteke, in obe sta `required`, zato brskalnik prepreči uporabnikom vnos praznih vrednosti.
+
+### Nastavitev uporabnika
+
+Nadaljujte z funkcijo `setUpUser`, kjer nastavite vrednosti lokalne shrambe za apiKey in regionName. Dodajte novo funkcijo:
+
+```JavaScript
+function setUpUser(apiKey, regionName) {
+	localStorage.setItem('apiKey', apiKey);
+	localStorage.setItem('regionName', regionName);
+	loading.style.display = 'block';
+	errors.textContent = '';
+	clearBtn.style.display = 'block';
+	//make initial call
+	displayCarbonUsage(apiKey, regionName);
+}
+```
+
+Ta funkcija prikaže sporočilo o nalaganju, medtem ko se kliče API. Na tej točki ste prišli do ustvarjanja najpomembnejše funkcije te razširitve brskalnika!
+
+### Prikaz porabe ogljika
+
+Končno je čas za poizvedbo API-ja!
+
+Preden nadaljujete, se pogovorimo o API-jih. API-ji ali [Application Programming Interfaces](https://www.webopedia.com/TERM/A/API.html) so ključni element v orodjarni spletnega razvijalca. Zagotavljajo standardne načine za interakcijo in povezovanje programov med seboj. Na primer, če gradite spletno stran, ki mora poizvedovati bazo podatkov, je morda nekdo ustvaril API, ki ga lahko uporabite. Medtem ko obstaja veliko vrst API-jev, je eden najbolj priljubljenih [REST API](https://www.smashingmagazine.com/2018/01/understanding-using-rest-api/).
+
+✅ Izraz 'REST' pomeni 'Representational State Transfer' in vključuje uporabo različno konfiguriranih URL-jev za pridobivanje podatkov. Raziskujte različne vrste API-jev, ki so na voljo razvijalcem. Katera oblika vam je najbolj všeč?
+
+V tej funkciji je nekaj pomembnih stvari. Najprej opazite ključni izraz [`async`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/async_function). Pisanje funkcij tako, da delujejo asinhrono, pomeni, da počakajo na dokončanje dejanja, kot je vrnitev podatkov, preden nadaljujejo.
+
+Tukaj je kratek video o `async`:
+
+[![Async in Await za upravljanje obljub](https://img.youtube.com/vi/YwmlRkrxvkk/0.jpg)](https://youtube.com/watch?v=YwmlRkrxvkk "Async in Await za upravljanje obljub")
+
+> 🎥 Kliknite zgornjo sliko za video o async/await.
+
+Ustvarite novo funkcijo za poizvedbo API-ja C02Signal:
+
+```JavaScript
+import axios from '../node_modules/axios';
+
+async function displayCarbonUsage(apiKey, region) {
+	try {
+		await axios
+			.get('https://api.co2signal.com/v1/latest', {
+				params: {
+					countryCode: region,
+				},
+				headers: {
+					'auth-token': apiKey,
+				},
+			})
+			.then((response) => {
+				let CO2 = Math.floor(response.data.data.carbonIntensity);
+
+				//calculateColor(CO2);
+
+				loading.style.display = 'none';
+				form.style.display = 'none';
+				myregion.textContent = region;
+				usage.textContent =
+					Math.round(response.data.data.carbonIntensity) + ' grams (grams C02 emitted per kilowatt hour)';
+				fossilfuel.textContent =
+					response.data.data.fossilFuelPercentage.toFixed(2) +
+					'% (percentage of fossil fuels used to generate electricity)';
+				results.style.display = 'block';
+			});
+	} catch (error) {
+		console.log(error);
+		loading.style.display = 'none';
+		results.style.display = 'none';
+		errors.textContent = 'Sorry, we have no data for the region you have requested.';
+	}
+}
+```
+
+To je velika funkcija. Kaj se tukaj dogaja?
+
+- Po najboljših praksah uporabite ključni izraz `async`, da funkcija deluje asinhrono. Funkcija vsebuje blok `try/catch`, saj bo vrnila obljubo, ko API vrne podatke. Ker nimate nadzora nad hitrostjo odziva API-ja (morda se sploh ne odzove!), morate to negotovost obravnavati z asinhronim klicem.
+- Poizvedujete API co2signal za pridobitev podatkov o regiji, pri čemer uporabljate svoj API ključ. Za uporabo tega ključa morate uporabiti vrsto avtentikacije v parametrih glave.
+- Ko se API odzove, dodelite različne elemente njegovih podatkov odziva delom zaslona, ki ste jih nastavili za prikaz teh podatkov.
+- Če pride do napake ali ni rezultata, prikažete sporočilo o napaki.
+
+✅ Uporaba asinhronih vzorcev programiranja je še eno zelo uporabno orodje v vaši orodjarni. Preberite [o različnih načinih](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/async_function), kako lahko konfigurirate to vrsto kode.
+
+Čestitke! Če zgradite svojo razširitev (`npm run build`) in jo osvežite v podoknu razširitev, imate delujočo razširitev! Edina stvar, ki ne deluje, je ikona, in to boste popravili v naslednji lekciji.
+
+---
+
+## 🚀 Izziv
+
+V teh lekcijah smo obravnavali več vrst API-jev. Izberite spletni API in podrobno raziščite, kaj ponuja. Na primer, si oglejte API-je, ki so na voljo v brskalnikih, kot je [HTML Drag and Drop API](https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_API). Kaj po vašem mnenju naredi odličen API?
+
+## Zaključni kviz
+
+[Zaključni kviz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/26)
+
+## Pregled in samostojno učenje
+
+V tej lekciji ste se naučili o LocalStorage in API-jih, oboje zelo uporabno za profesionalnega spletnega razvijalca. Ali lahko razmislite, kako ti dve stvari delujeta skupaj? Razmislite, kako bi zasnovali spletno stran, ki bi shranjevala elemente za uporabo API-ja.
+
+## Naloga
+
+[Posvojite API](assignment.md)
+
+---
+
+**Omejitev odgovornosti**:  
+Ta dokument je bil preveden z uporabo storitve za prevajanje z umetno inteligenco [Co-op Translator](https://github.com/Azure/co-op-translator). Čeprav si prizadevamo za natančnost, vas prosimo, da upoštevate, da lahko avtomatizirani prevodi vsebujejo napake ali netočnosti. Izvirni dokument v njegovem izvirnem jeziku je treba obravnavati kot avtoritativni vir. Za ključne informacije priporočamo profesionalni človeški prevod. Ne prevzemamo odgovornosti za morebitna nesporazumevanja ali napačne razlage, ki bi nastale zaradi uporabe tega prevoda.
\ No newline at end of file
diff --git a/translations/sl/5-browser-extension/2-forms-browsers-local-storage/assignment.md b/translations/sl/5-browser-extension/2-forms-browsers-local-storage/assignment.md
new file mode 100644
index 00000000..e42e6541
--- /dev/null
+++ b/translations/sl/5-browser-extension/2-forms-browsers-local-storage/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "a0c78d1dd9d1acdbf7f52e7cc3ebe1a7",
+  "translation_date": "2025-08-27T22:25:08+00:00",
+  "source_file": "5-browser-extension/2-forms-browsers-local-storage/assignment.md",
+  "language_code": "sl"
+}
+-->
+# Uporabi API
+
+## Navodila
+
+API-ji so lahko zelo zabavni za uporabo. Tukaj je [seznam mnogih brezplačnih](https://github.com/public-apis/public-apis). Izberi API in ustvari razširitev za brskalnik, ki rešuje določen problem. Problem je lahko majhen, kot na primer pomanjkanje slik hišnih ljubljenčkov (poskusi [dog CEO API](https://dog.ceo/dog-api/)) ali pa nekaj večjega - uživaj pri delu!
+
+## Merila
+
+| Merilo   | Odlično                                                                     | Zadostno                                | Potrebno izboljšanje    |
+| -------- | --------------------------------------------------------------------------- | --------------------------------------- | ----------------------- |
+|          | Popolna razširitev za brskalnik je oddana z uporabo API-ja s seznama zgoraj | Delna razširitev za brskalnik je oddana | Oddaja vsebuje napake  |
+
+---
+
+**Omejitev odgovornosti**:  
+Ta dokument je bil preveden z uporabo storitve za prevajanje z umetno inteligenco [Co-op Translator](https://github.com/Azure/co-op-translator). Čeprav si prizadevamo za natančnost, vas prosimo, da upoštevate, da lahko avtomatizirani prevodi vsebujejo napake ali netočnosti. Izvirni dokument v njegovem maternem jeziku je treba obravnavati kot avtoritativni vir. Za ključne informacije priporočamo profesionalni človeški prevod. Ne prevzemamo odgovornosti za morebitna nesporazume ali napačne razlage, ki bi nastale zaradi uporabe tega prevoda.
\ No newline at end of file
diff --git a/translations/sl/5-browser-extension/3-background-tasks-and-performance/README.md b/translations/sl/5-browser-extension/3-background-tasks-and-performance/README.md
new file mode 100644
index 00000000..80d6a343
--- /dev/null
+++ b/translations/sl/5-browser-extension/3-background-tasks-and-performance/README.md
@@ -0,0 +1,176 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "f198c6b817b4b2a99749f4662e7cae98",
+  "translation_date": "2025-08-27T22:16:47+00:00",
+  "source_file": "5-browser-extension/3-background-tasks-and-performance/README.md",
+  "language_code": "sl"
+}
+-->
+# Projekt razširitve brskalnika, 3. del: Spoznajte ozadna opravila in zmogljivost
+
+## Predhodni kviz
+
+[Predhodni kviz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/27)
+
+### Uvod
+
+V zadnjih dveh lekcijah tega modula ste se naučili, kako zgraditi obrazec in prikazno območje za podatke, pridobljene iz API-ja. To je zelo standarden način ustvarjanja spletne prisotnosti. Naučili ste se tudi, kako obravnavati pridobivanje podatkov asinhrono. Vaša razširitev brskalnika je skoraj končana.
+
+Ostaja še upravljanje nekaterih ozadnih opravil, vključno z osveževanjem barve ikone razširitve, zato je to odličen trenutek za pogovor o tem, kako brskalnik upravlja tovrstna opravila. Razmislimo o teh nalogah brskalnika v kontekstu zmogljivosti vaših spletnih sredstev med njihovim razvojem.
+
+## Osnove spletne zmogljivosti
+
+> "Zmogljivost spletne strani je odvisna od dveh stvari: kako hitro se stran naloži in kako hitro se koda na njej izvaja." -- [Zack Grossbart](https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/)
+
+Tema, kako narediti vaše spletne strani izjemno hitre na vseh vrstah naprav, za vse vrste uporabnikov in v vseh situacijah, je pričakovano obsežna. Tukaj je nekaj točk, ki jih je treba upoštevati pri gradnji standardnega spletnega projekta ali razširitve brskalnika.
+
+Prva stvar, ki jo morate storiti, da zagotovite učinkovito delovanje vaše strani, je zbiranje podatkov o njeni zmogljivosti. Prvo mesto za to so razvojna orodja vašega spletnega brskalnika. V brskalniku Edge lahko izberete gumb "Nastavitve in več" (ikona treh pik v zgornjem desnem kotu brskalnika), nato pa se pomaknete na Več orodij > Razvojna orodja in odprete zavihek Zmogljivost. Razvojna orodja lahko odprete tudi s kombinacijo tipk `Ctrl` + `Shift` + `I` v sistemu Windows ali `Option` + `Command` + `I` v sistemu Mac.
+
+Zavihek Zmogljivost vsebuje orodje za profiliranje. Odprite spletno stran (poskusite na primer [https://www.microsoft.com](https://www.microsoft.com/?WT.mc_id=academic-77807-sagibbon)) in kliknite gumb 'Snemaj', nato osvežite stran. Snemanje lahko kadar koli ustavite, nato pa si lahko ogledate rutine, ki so bile ustvarjene za 'skriptiranje', 'upodabljanje' in 'risanje' strani:
+
+![Edge profiler](../../../../translated_images/profiler.5a4a62479c5df01cfec9aab74173dba13f91d2c968e1a1ae434c26165792df15.sl.png)
+
+✅ Obiščite [Microsoftovo dokumentacijo](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) o zavihku Zmogljivost v brskalniku Edge.
+
+> Nasvet: za natančno merjenje časa zagona vaše spletne strani počistite predpomnilnik brskalnika.
+
+Izberite elemente časovnice profila, da povečate dogodke, ki se zgodijo med nalaganjem vaše strani.
+
+Pridobite posnetek zmogljivosti vaše strani tako, da izberete del časovnice profila in si ogledate povzetek:
+
+![Edge profiler snapshot](../../../../translated_images/snapshot.97750180ebcad73794a3594b36925eb5c8dbaac9e03fec7f9b974188c9ac63c7.sl.png)
+
+Preverite dnevnik dogodkov, da vidite, ali je kateri dogodek trajal dlje kot 15 ms:
+
+![Edge event log](../../../../translated_images/log.804026979f3707e00eebcfa028b2b5a88cec6292f858767bb6703afba65a7d9c.sl.png)
+
+✅ Spoznajte svoj profiler! Odprite razvojna orodja na tej strani in preverite, ali obstajajo ozka grla. Katero sredstvo se nalaga najpočasneje? Najhitreje?
+
+## Preverjanje profiliranja
+
+Na splošno obstajajo nekatera "problematična področja", na katera bi moral biti pozoren vsak spletni razvijalec pri gradnji strani, da se izogne neprijetnim presenečenjem ob času uvedbe v produkcijo.
+
+**Velikosti sredstev**: Splet je v zadnjih nekaj letih postal 'težji' in s tem počasnejši. Del te teže je povezan z uporabo slik.
+
+✅ Prebrskajte [Internetni arhiv](https://httparchive.org/reports/page-weight) za zgodovinski pregled teže strani in več.
+
+Dobra praksa je zagotoviti, da so vaše slike optimizirane in dostavljene v ustrezni velikosti in ločljivosti za vaše uporabnike.
+
+**Prehodi po DOM-u**: Brskalnik mora zgraditi svoj model dokumentnega objekta (DOM) na podlagi kode, ki jo napišete, zato je v interesu dobre zmogljivosti strani, da ohranite oznake minimalne, pri čemer uporabljate in oblikujete le tisto, kar stran potrebuje. Na primer, odvečna CSS, povezana s stranjo, bi lahko bila optimizirana; slogi, ki jih je treba uporabiti le na eni strani, ni treba vključiti v glavno slogovno datoteko.
+
+**JavaScript**: Vsak razvijalec JavaScripta bi moral paziti na skripte, ki blokirajo upodabljanje in jih je treba naložiti, preden se preostali DOM lahko prehodi in nariše v brskalnik. Razmislite o uporabi `defer` z vašimi vgrajenimi skripti (kot je storjeno v modulu Terrarium).
+
+✅ Preizkusite nekaj strani na [spletni strani za testiranje hitrosti](https://www.webpagetest.org/), da se naučite več o običajnih preverjanjih, ki se izvajajo za določanje zmogljivosti strani.
+
+Zdaj, ko imate predstavo o tem, kako brskalnik upodablja sredstva, ki mu jih pošljete, si poglejmo zadnje stvari, ki jih morate storiti za dokončanje vaše razširitve:
+
+### Ustvarite funkcijo za izračun barve
+
+V datoteki `/src/index.js` dodajte funkcijo z imenom `calculateColor()` po seriji spremenljivk `const`, ki jih nastavite za dostop do DOM-a:
+
+```JavaScript
+function calculateColor(value) {
+	let co2Scale = [0, 150, 600, 750, 800];
+	let colors = ['#2AA364', '#F5EB4D', '#9E4229', '#381D02', '#381D02'];
+
+	let closestNum = co2Scale.sort((a, b) => {
+		return Math.abs(a - value) - Math.abs(b - value);
+	})[0];
+	console.log(value + ' is closest to ' + closestNum);
+	let num = (element) => element > closestNum;
+	let scaleIndex = co2Scale.findIndex(num);
+
+	let closestColor = colors[scaleIndex];
+	console.log(scaleIndex, closestColor);
+
+	chrome.runtime.sendMessage({ action: 'updateIcon', value: { color: closestColor } });
+}
+```
+
+Kaj se tukaj dogaja? Posredujete vrednost (intenzivnost ogljika) iz klica API-ja, ki ste ga dokončali v zadnji lekciji, nato pa izračunate, kako blizu je njena vrednost indeksu, predstavljenemu v polju barv. Nato to najbližjo vrednost barve pošljete prek runtime okolja Chrome.
+
+Runtime okolje Chrome ima [API](https://developer.chrome.com/extensions/runtime), ki obravnava vse vrste ozadnih opravil, vaša razširitev pa ga izkorišča:
+
+> "Uporabite API runtime okolja Chrome za pridobitev ozadja strani, vrnitev podrobnosti o manifestu ter poslušanje in odzivanje na dogodke v življenjskem ciklu aplikacije ali razširitve. Ta API lahko uporabite tudi za pretvorbo relativne poti URL-jev v popolnoma kvalificirane URL-je."
+
+✅ Če razvijate to razširitev brskalnika za Edge, vas morda preseneča, da uporabljate API Chrome. Novejše različice brskalnika Edge delujejo na brskalniškem pogonu Chromium, zato lahko izkoristite ta orodja.
+
+> Opomba: če želite profilirati razširitev brskalnika, zaženite razvojna orodja znotraj same razširitve, saj je to ločen brskalniški primerek.
+
+### Nastavite privzeto barvo ikone
+
+Zdaj v funkciji `init()` nastavite ikono na generično zeleno barvo, tako da znova pokličete akcijo `updateIcon` okolja Chrome:
+
+```JavaScript
+chrome.runtime.sendMessage({
+	action: 'updateIcon',
+		value: {
+			color: 'green',
+		},
+});
+```
+
+### Pokličite funkcijo, izvedite klic
+
+Nato pokličite funkcijo, ki ste jo pravkar ustvarili, tako da jo dodate obljubi, ki jo vrne API C02Signal:
+
+```JavaScript
+//let CO2...
+calculateColor(CO2);
+```
+
+In na koncu, v datoteki `/dist/background.js`, dodajte poslušalca za te klice ozadnih akcij:
+
+```JavaScript
+chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) {
+	if (msg.action === 'updateIcon') {
+		chrome.browserAction.setIcon({ imageData: drawIcon(msg.value) });
+	}
+});
+//borrowed from energy lollipop extension, nice feature!
+function drawIcon(value) {
+	let canvas = document.createElement('canvas');
+	let context = canvas.getContext('2d');
+
+	context.beginPath();
+	context.fillStyle = value.color;
+	context.arc(100, 100, 50, 0, 2 * Math.PI);
+	context.fill();
+
+	return context.getImageData(50, 50, 100, 100);
+}
+```
+
+V tej kodi dodajate poslušalca za vse sporočila, ki prihajajo v upravitelja ozadnih opravil. Če je klic imenovan 'updateIcon', se nato izvede naslednja koda za risanje ikone ustrezne barve z uporabo API-ja Canvas.
+
+✅ Več o API-ju Canvas boste izvedeli v [lekcijah o vesoljski igri](../../6-space-game/2-drawing-to-canvas/README.md).
+
+Zdaj ponovno zgradite svojo razširitev (`npm run build`), osvežite in zaženite svojo razširitev ter opazujte spremembo barve. Je pravi čas za opravilo ali pomivanje posode? Zdaj veste!
+
+Čestitamo, zgradili ste uporabno razširitev brskalnika in se naučili več o delovanju brskalnika ter profiliranju njegove zmogljivosti.
+
+---
+
+## 🚀 Izziv
+
+Raziskujte nekatere odprtokodne spletne strani, ki obstajajo že dolgo, in na podlagi njihove zgodovine na GitHubu poskusite ugotoviti, kako so bile optimizirane skozi leta za zmogljivost, če sploh. Kaj je najpogostejša težava?
+
+## Kviz po predavanju
+
+[Kviz po predavanju](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/28)
+
+## Pregled in samostojno učenje
+
+Razmislite o prijavi na [novice o zmogljivosti](https://perf.email/).
+
+Raziskujte nekatere načine, kako brskalniki ocenjujejo spletno zmogljivost, tako da pregledate zavihke zmogljivosti v njihovih spletnih orodjih. Ali opazite kakšne večje razlike?
+
+## Naloga
+
+[Analizirajte zmogljivost spletne strani](assignment.md)
+
+---
+
+**Omejitev odgovornosti**:  
+Ta dokument je bil preveden z uporabo storitve za prevajanje z umetno inteligenco [Co-op Translator](https://github.com/Azure/co-op-translator). Čeprav si prizadevamo za natančnost, vas prosimo, da upoštevate, da lahko avtomatizirani prevodi vsebujejo napake ali netočnosti. Izvirni dokument v njegovem maternem jeziku je treba obravnavati kot avtoritativni vir. Za ključne informacije priporočamo profesionalni človeški prevod. Ne prevzemamo odgovornosti za morebitna nesporazumevanja ali napačne razlage, ki bi nastale zaradi uporabe tega prevoda.
\ No newline at end of file
diff --git a/translations/sl/5-browser-extension/3-background-tasks-and-performance/assignment.md b/translations/sl/5-browser-extension/3-background-tasks-and-performance/assignment.md
new file mode 100644
index 00000000..f02357da
--- /dev/null
+++ b/translations/sl/5-browser-extension/3-background-tasks-and-performance/assignment.md
@@ -0,0 +1,23 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "fc09b0fb314a5ab0507ba99216e6a843",
+  "translation_date": "2025-08-27T22:17:26+00:00",
+  "source_file": "5-browser-extension/3-background-tasks-and-performance/assignment.md",
+  "language_code": "sl"
+}
+-->
+# Analizirajte spletno mesto glede zmogljivosti
+
+Pripravite podrobno poročilo o spletnem mestu, ki prikazuje področja, kjer so težave z zmogljivostjo. Analizirajte, zakaj je spletno mesto počasno in kaj lahko storite, da ga pospešite. Ne zanašajte se samo na orodja brskalnika, ampak raziščite tudi druga orodja, ki lahko pomagajo pri pripravi poročila.
+
+## Merila
+
+| Merila   | Odlično                                                                                                    | Zadostno                    | Potrebna izboljšava           |
+| -------- | ---------------------------------------------------------------------------------------------------------- | --------------------------- | ----------------------------- |
+|          | Predstavljeno je poročilo s podrobnostmi, pridobljenimi ne le iz orodij brskalnika, temveč tudi iz orodij tretjih oseb, če so na voljo | Predstavljeno je osnovno poročilo | Predstavljeno je minimalno poročilo |
+
+---
+
+**Omejitev odgovornosti**:  
+Ta dokument je bil preveden z uporabo storitve za prevajanje z umetno inteligenco [Co-op Translator](https://github.com/Azure/co-op-translator). Čeprav si prizadevamo za natančnost, vas prosimo, da upoštevate, da lahko avtomatizirani prevodi vsebujejo napake ali netočnosti. Izvirni dokument v njegovem maternem jeziku je treba obravnavati kot avtoritativni vir. Za ključne informacije priporočamo profesionalni človeški prevod. Ne prevzemamo odgovornosti za morebitna napačna razumevanja ali napačne interpretacije, ki bi nastale zaradi uporabe tega prevoda.
\ No newline at end of file
diff --git a/translations/sl/5-browser-extension/README.md b/translations/sl/5-browser-extension/README.md
new file mode 100644
index 00000000..bf42ab1c
--- /dev/null
+++ b/translations/sl/5-browser-extension/README.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "b121a279a6ab39878491f3e572673515",
+  "translation_date": "2025-08-27T22:12:34+00:00",
+  "source_file": "5-browser-extension/README.md",
+  "language_code": "sl"
+}
+-->
+# Izdelava razširitve za brskalnik
+
+Izdelava razširitev za brskalnike je zabaven in zanimiv način razmišljanja o zmogljivosti vaših aplikacij, hkrati pa ustvarjate drugačno vrsto spletnega sredstva. Ta modul vključuje lekcije o tem, kako delujejo brskalniki, kako namestiti razširitev za brskalnik, kako zgraditi obrazec, poklicati API, uporabljati lokalno shranjevanje ter kako oceniti zmogljivost vaše spletne strani in jo izboljšati.
+
+Zgradili boste razširitev za brskalnik, ki deluje na Edge, Chrome in Firefox. Ta razširitev, ki je kot mini spletna stran prilagojena zelo specifični nalogi, preverja [C02 Signal API](https://www.co2signal.com) za porabo električne energije in ogljično intenzivnost določene regije ter vrne oceno ogljičnega odtisa regije.
+
+To razširitev lahko uporabnik po potrebi pokliče, ko v obrazec vnese ključ API in kodo regije, da določi lokalno porabo električne energije ter tako pridobi podatke, ki lahko vplivajo na njegove odločitve glede porabe električne energije. Na primer, morda bi bilo bolje odložiti uporabo sušilnega stroja (dejavnost z visoko ogljično intenzivnostjo) v času velike porabe električne energije v vaši regiji.
+
+### Teme
+
+1. [O brskalniku](1-about-browsers/README.md)
+2. [Obrazci in lokalno shranjevanje](2-forms-browsers-local-storage/README.md)
+3. [Ozadna opravila in zmogljivost](3-background-tasks-and-performance/README.md)
+
+### Zasluge
+
+![zelena razširitev za brskalnik](../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.sl.png)
+
+## Zasluge
+
+Idejo za ta spletni ogljični sprožilec je prispeval Asim Hussain, vodja ekipe Green Cloud Advocacy pri Microsoftu in avtor [Green Principles](https://principles.green/). Projekt je bil prvotno [spletna stran](https://github.com/jlooper/green).
+
+Struktura razširitve za brskalnik je bila navdihnjena z [Adebola Adeniranovo razširitvijo za COVID](https://github.com/onedebos/covtension).
+
+Koncept sistema ikon 'pik' je bil predlagan na podlagi strukture ikon razširitve za brskalnik [Energy Lollipop](https://energylollipop.com/) za emisije v Kaliforniji.
+
+Te lekcije so bile napisane z ♥️ s strani [Jen Looper](https://www.twitter.com/jenlooper).
+
+---
+
+**Omejitev odgovornosti**:  
+Ta dokument je bil preveden z uporabo storitve za prevajanje z umetno inteligenco [Co-op Translator](https://github.com/Azure/co-op-translator). Čeprav si prizadevamo za natančnost, vas prosimo, da upoštevate, da lahko avtomatizirani prevodi vsebujejo napake ali netočnosti. Izvirni dokument v njegovem maternem jeziku je treba obravnavati kot avtoritativni vir. Za ključne informacije priporočamo profesionalni človeški prevod. Ne prevzemamo odgovornosti za morebitne nesporazume ali napačne razlage, ki bi nastale zaradi uporabe tega prevoda.
\ No newline at end of file
diff --git a/translations/sl/5-browser-extension/solution/README.md b/translations/sl/5-browser-extension/solution/README.md
new file mode 100644
index 00000000..6a712b2d
--- /dev/null
+++ b/translations/sl/5-browser-extension/solution/README.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "fab4e6b4f0efcd587a9029d82991f597",
+  "translation_date": "2025-08-27T22:18:23+00:00",
+  "source_file": "5-browser-extension/solution/README.md",
+  "language_code": "sl"
+}
+-->
+# Razširitev brskalnika Carbon Trigger: Dokončana koda
+
+Z uporabo tmrow-ovega API-ja C02 Signal za sledenje porabi električne energije ustvarite razširitev za brskalnik, ki vam bo omogočila opomnik neposredno v brskalniku o tem, kako obremenjena je poraba električne energije v vaši regiji. Občasna uporaba te razširitve vam bo pomagala sprejemati odločitve o svojih dejavnostih na podlagi teh informacij.
+
+![posnetek zaslona razširitve](../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.sl.png)
+
+## Začetek
+
+Potrebovali boste nameščen [npm](https://npmjs.com). Prenesite kopijo te kode v mapo na svojem računalniku.
+
+Namestite vse potrebne pakete:
+
+```
+npm install
+```
+
+Sestavite razširitev z uporabo webpacka:
+
+```
+npm run build
+```
+
+Za namestitev v Edge uporabite meni s tremi pikami v zgornjem desnem kotu brskalnika, da odprete ploščo z razširitvami. Tam izberite možnost 'Naloži nepakirano' za nalaganje nove razširitve. Na poziv odprite mapo 'dist' in razširitev se bo naložila. Za uporabo boste potrebovali API ključ za CO2 Signal API ([pridobite ga tukaj preko e-pošte](https://www.co2signal.com/) - vnesite svoj e-poštni naslov v polje na tej strani) in [kodo za vašo regijo](http://api.electricitymap.org/v3/zones), ki ustreza [Electricity Map](https://www.electricitymap.org/map) (na primer, v Bostonu uporabljam 'US-NEISO').
+
+![nameščanje](../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.sl.png)
+
+Ko vmesnik razširitve vnesete API ključ in regijo, bi se morala barvna pika v vrstici razširitev brskalnika spremeniti, da odraža porabo energije v vaši regiji, ter vam dati namig, katere dejavnosti, ki porabijo veliko energije, bi bile primerne za izvedbo. Koncept tega sistema 'pik' sem dobil pri [Energy Lollipop razširitvi](https://energylollipop.com/) za emisije v Kaliforniji.
+
+---
+
+**Omejitev odgovornosti**:  
+Ta dokument je bil preveden z uporabo storitve za prevajanje z umetno inteligenco [Co-op Translator](https://github.com/Azure/co-op-translator). Čeprav si prizadevamo za natančnost, vas prosimo, da upoštevate, da lahko avtomatizirani prevodi vsebujejo napake ali netočnosti. Izvirni dokument v njegovem maternem jeziku je treba obravnavati kot avtoritativni vir. Za ključne informacije priporočamo profesionalni človeški prevod. Ne prevzemamo odgovornosti za morebitne nesporazume ali napačne razlage, ki bi nastale zaradi uporabe tega prevoda.
\ No newline at end of file
diff --git a/translations/sl/5-browser-extension/solution/translation/README.es.md b/translations/sl/5-browser-extension/solution/translation/README.es.md
new file mode 100644
index 00000000..cbe65a95
--- /dev/null
+++ b/translations/sl/5-browser-extension/solution/translation/README.es.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "cbaf73f94a9ab4c680a10ef871e92948",
+  "translation_date": "2025-08-27T22:20:25+00:00",
+  "source_file": "5-browser-extension/solution/translation/README.es.md",
+  "language_code": "sl"
+}
+-->
+# Razširitev brskalnika Carbon Trigger: Celotna koda
+
+Z uporabo API-ja CO2 Signal od tmrow za sledenje porabi električne energije ustvarite razširitev za brskalnik, ki vam omogoča, da imate neposreden opomnik o porabi električne energije v vaši regiji. Uporaba te ad hoc razširitve vam bo pomagala sprejemati odločitve o vaših dejavnostih na podlagi teh informacij.
+
+![posnetek zaslona razširitve](../../../../../translated_images/extension-screenshot.352c4c3ba54e4041ad2f6af749d562cc5705f527b5826efd53d11c3528f5ae45.sl.png)
+
+## Začetek
+
+Imeti morate nameščen [npm](https://npmjs.com). Prenesite kopijo te kode v mapo na vašem računalniku.
+
+Namestite vse potrebne pakete:
+
+```
+npm install
+```
+
+Sestavite razširitev z uporabo webpack:
+
+```
+npm run build
+```
+
+Za namestitev v Edge uporabite meni 'tri pike' v zgornjem desnem kotu brskalnika, da odprete ploščo Razširitve. Tam izberite 'Naloži nepakirano', da naložite novo razširitev. Ko se prikaže poziv, odprite mapo 'dist' in razširitev bo naložena. Za uporabo boste potrebovali API ključ za CO2 Signal API ([pridobite ga tukaj po e-pošti](https://www.co2signal.com/) - vnesite svoj e-poštni naslov v polje na tej strani) ter [kodo za vašo regijo](http://api.electricitymap.org/v3/zones), ki ustreza [Električnemu zemljevidu](https://www.electricitymap.org/map) (na primer v Bostonu uporabljam 'US-NEISO').
+
+![namestitev](../../../../../translated_images/install-on-edge.8bd0ee3ca7dcda1c5334b5195603a43c864e3b38d088b03d57376d25e77b9459.sl.png)
+
+Ko vnesete API ključ in regijo v vmesnik razširitve, bi se morala barvna pika v vrstici razširitev brskalnika spremeniti, da odraža porabo energije v vaši regiji, ter vam dati indikator o dejavnostih z visoko porabo energije, ki bi bile primerne za vas. Koncept za ta sistem "pik" sem dobil od [razširitve Energy Lollipop](https://energylollipop.com/) za emisije v Kaliforniji.
+
+---
+
+**Omejitev odgovornosti**:  
+Ta dokument je bil preveden z uporabo storitve za prevajanje z umetno inteligenco [Co-op Translator](https://github.com/Azure/co-op-translator). Čeprav si prizadevamo za natančnost, vas prosimo, da upoštevate, da lahko avtomatizirani prevodi vsebujejo napake ali netočnosti. Izvirni dokument v njegovem izvirnem jeziku je treba obravnavati kot avtoritativni vir. Za ključne informacije priporočamo profesionalni človeški prevod. Ne prevzemamo odgovornosti za morebitne nesporazume ali napačne razlage, ki bi nastale zaradi uporabe tega prevoda.
\ No newline at end of file
diff --git a/translations/sl/5-browser-extension/solution/translation/README.fr.md b/translations/sl/5-browser-extension/solution/translation/README.fr.md
new file mode 100644
index 00000000..06946a21
--- /dev/null
+++ b/translations/sl/5-browser-extension/solution/translation/README.fr.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "9361268ca430b2579375009e1eceb5e5",
+  "translation_date": "2025-08-27T22:21:27+00:00",
+  "source_file": "5-browser-extension/solution/translation/README.fr.md",
+  "language_code": "sl"
+}
+-->
+# Razširitev brskalnika Carbon Trigger: Dokončana koda
+
+Z uporabo API-ja C02 Signal podjetja tmrow za spremljanje porabe električne energije ustvarite razširitev za brskalnik, ki vam omogoča, da imate neposreden opomnik v brskalniku o porabi električne energije v vaši regiji. Uporaba te namensko razvite razširitve vam bo pomagala sprejemati odločitve o svojih dejavnostih na podlagi teh informacij.
+
+![posnetek razširitve](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.sl.png)
+
+## Začetek
+
+Potrebovali boste nameščen [npm](https://npmjs.com). Prenesite kopijo te kode v mapo na svojem računalniku.
+
+Namestite vse potrebne pakete:
+
+```
+npm install
+```
+
+Sestavite razširitev z uporabo webpacka:
+
+```
+npm run build
+```
+
+Za namestitev na Edge uporabite meni s 'tremi pikami' v zgornjem desnem kotu brskalnika, da odprete ploščo z razširitvami. Tam izberite 'Naloži razširitev iz razpakirane mape', da naložite novo razširitev. Na poziv odprite mapo 'dist' in razširitev se bo naložila. Za uporabo boste potrebovali API ključ za API CO2 Signal ([pridobite ga tukaj po e-pošti](https://www.co2signal.com/) - vnesite svoj e-poštni naslov v polje na tej strani) in [kodo za vašo regijo](http://api.electricitymap.org/v3/zones), ki ustreza [zemljevidu električne energije](https://www.electricitymap.org/map) (na primer v Bostonu uporabljam 'US-NEISO').
+
+![namestitev](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.sl.png)
+
+Ko vmesnik razširitve vnesete API ključ in regijo, bi se morala barvna pika v orodni vrstici razširitve brskalnika spremeniti, da odraža porabo energije v vaši regiji, in vam dati indikator za energijsko intenzivne dejavnosti, ki bi jih bilo smiselno izvajati. Koncept za ta sistem 'pik' sem dobil pri [razširitvi Energy Lollipop](https://energylollipop.com/) za emisije v Kaliforniji.
+
+---
+
+**Omejitev odgovornosti**:  
+Ta dokument je bil preveden z uporabo storitve za prevajanje z umetno inteligenco [Co-op Translator](https://github.com/Azure/co-op-translator). Čeprav si prizadevamo za natančnost, vas prosimo, da upoštevate, da lahko avtomatizirani prevodi vsebujejo napake ali netočnosti. Izvirni dokument v njegovem maternem jeziku je treba obravnavati kot avtoritativni vir. Za ključne informacije priporočamo profesionalni človeški prevod. Ne prevzemamo odgovornosti za morebitna nesporazumevanja ali napačne razlage, ki bi nastale zaradi uporabe tega prevoda.
\ No newline at end of file
diff --git a/translations/sl/5-browser-extension/solution/translation/README.hi.md b/translations/sl/5-browser-extension/solution/translation/README.hi.md
new file mode 100644
index 00000000..c1b58152
--- /dev/null
+++ b/translations/sl/5-browser-extension/solution/translation/README.hi.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "dd58ae1b7707034f055718c1b68bc8de",
+  "translation_date": "2025-08-27T22:18:56+00:00",
+  "source_file": "5-browser-extension/solution/translation/README.hi.md",
+  "language_code": "sl"
+}
+-->
+# Carbon Trigger Brskalni vtičnik: Končna koda
+
+Uporaba tmrow API-ja C02 Signal za sledenje porabi električne energije, izdelava brskalnega vtičnika, ki vas opomni, kako obremenjena je poraba električne energije v vašem območju. Uporaba tega vtičnika vam bo pomagala sprejemati odločitve o vaših dejavnostih na podlagi teh informacij.
+
+![Posnetek zaslona vtičnika](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.sl.png)
+
+## Začetek
+
+Namestiti morate [npm](https://npmjs.com). Prenesite kopijo te kode v mapo na vašem računalniku.
+
+Namestite vse potrebne pakete:
+
+```
+npm install
+```
+
+Ustvarite vtičnik z uporabo Webpacka:
+
+```
+npm run build
+```
+
+Za namestitev v Edge uporabite meni 'tri pike' v zgornjem desnem kotu brskalnika, da poiščete ploščo za vtičnike. Od tam izberite 'Naloži nepakiran' za nalaganje novega vtičnika. V pozivu odprite mapo 'dist' in vtičnik bo naložen. Za uporabo boste potrebovali API ključ za CO2 Signal ([pridobite ga tukaj preko e-pošte](https://www.co2signal.com/) - vnesite svoj e-poštni naslov v polje na tej strani) in [kodo za vaše območje](http://api.electricitymap.org/v3/zones) [električni zemljevid](https://www.electricitymap.org/map) (na primer, v Bostonu uporabljam 'US-NEISO').
+
+![nameščanje](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.sl.png)
+
+Ko so API ključ in območje vneseni v vmesnik vtičnika, bi se morala barvna pika v vrstici brskalnega vtičnika spremeniti, da odraža porabo energije v vašem območju, in vam dati indikator, katere energijsko intenzivne dejavnosti so primerne za vaše delovanje. Koncept te 'pikaste' sistema mi je bil navdihnjen z [Energy Lollipop vtičnikom](https://energylollipop.com/) za emisije v Kaliforniji.
+
+---
+
+**Omejitev odgovornosti**:  
+Ta dokument je bil preveden z uporabo storitve za prevajanje z umetno inteligenco [Co-op Translator](https://github.com/Azure/co-op-translator). Čeprav si prizadevamo za natančnost, vas prosimo, da upoštevate, da lahko avtomatizirani prevodi vsebujejo napake ali netočnosti. Izvirni dokument v njegovem maternem jeziku je treba obravnavati kot avtoritativni vir. Za ključne informacije priporočamo profesionalni človeški prevod. Ne prevzemamo odgovornosti za morebitna napačna razumevanja ali napačne interpretacije, ki bi nastale zaradi uporabe tega prevoda.
\ No newline at end of file
diff --git a/translations/sl/5-browser-extension/solution/translation/README.it.md b/translations/sl/5-browser-extension/solution/translation/README.it.md
new file mode 100644
index 00000000..1526b9c0
--- /dev/null
+++ b/translations/sl/5-browser-extension/solution/translation/README.it.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "9a6b22a2eff0f499b66236be973b24ad",
+  "translation_date": "2025-08-27T22:19:24+00:00",
+  "source_file": "5-browser-extension/solution/translation/README.it.md",
+  "language_code": "sl"
+}
+-->
+# Razširitev brskalnika Carbon Trigger: koda za začetek
+
+Uporabili bomo API Signal CO2 od tmrow za spremljanje porabe električne energije, da ustvarimo razširitev za brskalnik, ki bo omogočala neposreden opomnik v brskalniku o tem, kako obremenjujoča je poraba električne energije v vaši regiji. Uporaba te prilagojene razširitve bo pomagala oceniti vaše dejavnosti na podlagi teh informacij.
+
+![posnetek zaslona razširitve](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.sl.png)
+
+## Za začetek
+
+Poskrbite, da imate nameščen [npm](https://npmjs.com). Prenesite kopijo te kode v mapo na svojem računalniku.
+
+Namestite vse potrebne pakete:
+
+```
+npm install
+```
+
+Ustvarite razširitev z uporabo webpack:
+
+```
+npm run build
+```
+
+Za namestitev na Edge uporabite meni "tri pike" v zgornjem desnem kotu brskalnika, da odprete ploščo Razširitve. Če še ni aktivirana, omogočite Način razvijalca (spodaj levo). Izberite "Naloži nepakirano", da naložite novo razširitev. Na poziv odprite mapo "dist" in razširitev bo naložena. Za uporabo boste potrebovali API ključ za CO2 Signal API (lahko ga [pridobite tukaj preko e-pošte](https://www.co2signal.com/) - vnesite svoj e-poštni naslov v polje na tej strani) ter [kodo za svojo regijo](http://api.electricitymap.org/v3/zones), ki ustreza [električni karti](https://www.electricitymap.org/map) (na primer v Bostonu "US-NEISO").
+
+![namestitev](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.sl.png)
+
+Ko vmesnik razširitve vsebuje API ključ in regijo, bi se morala barvna pika v vrstici razširitve brskalnika spremeniti, da odraža porabo energije v regiji, ter podati namig, katere dejavnosti z visoko porabo energije bi bile primerne za izvedbo. Koncept za ta sistem "pik" je bil navdihnjen z [razširitvijo Energy Lollipop](https://energylollipop.com/) za emisije v Kaliforniji.
+
+---
+
+**Omejitev odgovornosti**:  
+Ta dokument je bil preveden z uporabo storitve za strojno prevajanje [Co-op Translator](https://github.com/Azure/co-op-translator). Čeprav si prizadevamo za natančnost, vas prosimo, da se zavedate, da lahko avtomatizirani prevodi vsebujejo napake ali netočnosti. Izvirni dokument v njegovem izvirnem jeziku je treba obravnavati kot avtoritativni vir. Za ključne informacije priporočamo strokovno človeško prevajanje. Ne prevzemamo odgovornosti za morebitna nesporazumevanja ali napačne razlage, ki izhajajo iz uporabe tega prevoda.
\ No newline at end of file
diff --git a/translations/sl/5-browser-extension/solution/translation/README.ja.md b/translations/sl/5-browser-extension/solution/translation/README.ja.md
new file mode 100644
index 00000000..e2f035de
--- /dev/null
+++ b/translations/sl/5-browser-extension/solution/translation/README.ja.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "3f5e6821e0febccfc5d05e7c944d9e3d",
+  "translation_date": "2025-08-27T22:19:56+00:00",
+  "source_file": "5-browser-extension/solution/translation/README.ja.md",
+  "language_code": "sl"
+}
+-->
+# Razširitev brskalnika Carbon Trigger: Končna koda
+
+Z uporabo API-ja C02 Signal podjetja tmrow lahko zgradite razširitev brskalnika, ki kot opomnik prikazuje, kako intenzivna je poraba električne energije v vaši regiji. To vam omogoča, da na podlagi teh informacij sprejemate odločitve o svojih dejavnostih.
+
+![posnetek zaslona razširitve](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.sl.png)
+
+## Začetek
+
+Poskrbite, da imate nameščen [npm](https://npmjs.com). Prenesite kopijo te kode v mapo na svojem računalniku.
+
+Namestite vse potrebne pakete.
+
+```
+npm install
+```
+
+Razširitev zgradite z uporabo webpack.
+
+```
+npm run build
+```
+
+Za namestitev v Edge poiščite ploščo »Razširitve« prek menija »tri pike« v zgornjem desnem kotu brskalnika. Nato izberite »Load Unpacked« in naložite novo razširitev. Ko se prikaže poziv, odprite mapo »dist«, da se razširitev naloži. Za uporabo boste potrebovali API ključ CO2 Signal ([pridobite ga tukaj prek e-pošte](https://www.co2signal.com/) - vnesite svoj e-poštni naslov v polje na tej strani) ter [kodo za vašo regijo](http://api.electricitymap.org/v3/zones), ki ustreza [Electricity Map](https://www.electricitymap.org/map) (na primer, za Boston uporabite 'US-NEISO').
+
+![nameščanje](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.sl.png)
+
+Ko vmesnik razširitve vnesete API ključ in regijo, se bo barvna pika, ki se prikaže v razširitveni vrstici brskalnika, spremenila glede na porabo energije v vaši regiji. To vam bo pokazalo, katere dejavnosti, ki zahtevajo energijo, so primerne. Koncept sistema »pik« mi je dal [Energy Lollipop extension](https://energylollipop.com/) za emisije v Kaliforniji.
+
+---
+
+**Omejitev odgovornosti**:  
+Ta dokument je bil preveden z uporabo storitve za strojno prevajanje [Co-op Translator](https://github.com/Azure/co-op-translator). Čeprav si prizadevamo za natančnost, vas prosimo, da upoštevate, da lahko avtomatizirani prevodi vsebujejo napake ali netočnosti. Izvirni dokument v njegovem izvirnem jeziku je treba obravnavati kot avtoritativni vir. Za ključne informacije priporočamo strokovno človeško prevajanje. Ne prevzemamo odgovornosti za morebitna nesporazumevanja ali napačne razlage, ki izhajajo iz uporabe tega prevoda.
\ No newline at end of file
diff --git a/translations/sl/5-browser-extension/solution/translation/README.ms.md b/translations/sl/5-browser-extension/solution/translation/README.ms.md
new file mode 100644
index 00000000..eca9c104
--- /dev/null
+++ b/translations/sl/5-browser-extension/solution/translation/README.ms.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "21b364c158c8e4f698de65eeac16c9fe",
+  "translation_date": "2025-08-27T22:20:54+00:00",
+  "source_file": "5-browser-extension/solution/translation/README.ms.md",
+  "language_code": "sl"
+}
+-->
+# Razširitev brskalnika Carbon Trigger: Celotna koda
+
+Z uporabo API-ja CO2 Signal od tmrow za spremljanje porabe električne energije lahko ustvarite razširitev brskalnika, ki vas opozori na obremenjenost porabe električne energije v vaši regiji. Uporaba te razširitve vam bo pomagala sprejemati bolj premišljene odločitve glede vaših dejavnosti na podlagi teh informacij.
+
+![posnetek zaslona razširitve brskalnika](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.sl.png)
+
+## Začetek
+
+Najprej morate namestiti [npm](https://npmjs.com). Prenesite kopijo te kode v mapo na vašem računalniku.
+
+Namestite vse potrebne pakete:
+
+```
+npm install
+```
+
+Sestavite razširitev z uporabo webpacka:
+
+```
+npm run build
+```
+
+Za namestitev v brskalnik Edge uporabite meni s 'tremi pikami' v zgornjem desnem kotu brskalnika, da odprete ploščo Razširitve. Tam izberite 'Naloži nepakirano' za dodajanje nove razširitve. Odprite mapo 'dist', ko vas sistem pozove, in razširitev bo naložena. Za uporabo boste potrebovali API ključ za CO2 Signal API ([pridobite ga tukaj prek e-pošte](https://www.co2signal.com/) - vnesite svoj e-poštni naslov v polje na tej strani) in [kodo za vašo regijo](http://api.electricitymap.org/v3/zones), ki ustreza [zemljevidu električne energije](https://www.electricitymap.org/map) (na primer, v Bostonu uporabljam 'US-NEISO').
+
+![prenos](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.sl.png)
+
+Ko vmesnik razširitve vsebuje vaš API ključ in regijo, se bo barvna pika v vrstici razširitve brskalnika spremenila, da bo odražala porabo energije v vaši regiji, in vam dala namige o tem, katere dejavnosti so primerne za izvajanje. Koncept sistema 'pik' sem povzel po [razširitvi brskalnika Energy Lollipop](https://energylollipop.com/) za emisije v Kaliforniji.
+
+---
+
+**Omejitev odgovornosti**:  
+Ta dokument je bil preveden z uporabo storitve za strojno prevajanje [Co-op Translator](https://github.com/Azure/co-op-translator). Čeprav si prizadevamo za natančnost, vas prosimo, da se zavedate, da lahko avtomatizirani prevodi vsebujejo napake ali netočnosti. Izvirni dokument v njegovem izvirnem jeziku je treba obravnavati kot avtoritativni vir. Za ključne informacije priporočamo strokovno človeško prevajanje. Ne prevzemamo odgovornosti za morebitna nesporazumevanja ali napačne razlage, ki izhajajo iz uporabe tega prevoda.
\ No newline at end of file
diff --git a/translations/sl/5-browser-extension/start/README.md b/translations/sl/5-browser-extension/start/README.md
new file mode 100644
index 00000000..875ba681
--- /dev/null
+++ b/translations/sl/5-browser-extension/start/README.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "26fd39046d264ba185dcb086d3a8cf3e",
+  "translation_date": "2025-08-27T22:17:52+00:00",
+  "source_file": "5-browser-extension/start/README.md",
+  "language_code": "sl"
+}
+-->
+# Carbon Trigger Browser Extension: Začetna koda
+
+Z uporabo tmrow API-ja C02 Signal za spremljanje porabe električne energije ustvarite razširitev za brskalnik, ki vam bo v brskalniku služila kot opomnik o tem, kako obremenjena je poraba električne energije v vaši regiji. Občasna uporaba te razširitve vam bo pomagala sprejemati odločitve o vaših dejavnostih na podlagi teh informacij.
+
+![posnetek zaslona razširitve](../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.sl.png)
+
+## Začetek
+
+Potrebovali boste nameščen [npm](https://npmjs.com). Prenesite kopijo te kode v mapo na vašem računalniku.
+
+Namestite vse potrebne pakete:
+
+```
+npm install
+```
+
+Razširitev sestavite z uporabo webpacka:
+
+```
+npm run build
+```
+
+Za namestitev v Edge uporabite meni 'tri pike' v zgornjem desnem kotu brskalnika, da odprete ploščo z razširitvami. Tam izberite 'Naloži nepakirano', da naložite novo razširitev. Na pozivu odprite mapo 'dist' in razširitev se bo naložila. Za uporabo boste potrebovali API ključ za CO2 Signal API ([pridobite ga tukaj preko e-pošte](https://www.co2signal.com/) - vnesite svoj e-poštni naslov v polje na tej strani) in [kodo za vašo regijo](http://api.electricitymap.org/v3/zones), ki ustreza [Electricity Map](https://www.electricitymap.org/map) (na primer v Bostonu uporabljam 'US-NEISO').
+
+![namestitev](../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.sl.png)
+
+Ko vmesnik razširitve vnesete API ključ in regijo, bi se morala barvna pika v vrstici razširitev brskalnika spremeniti, da odraža porabo energije v vaši regiji, ter vam dati namig, katere dejavnosti, ki porabijo veliko energije, bi bile primerne za izvedbo. Koncept za ta sistem 'pik' sem dobil pri [Energy Lollipop razširitvi](https://energylollipop.com/) za emisije v Kaliforniji.
+
+---
+
+**Omejitev odgovornosti**:  
+Ta dokument je bil preveden z uporabo storitve za prevajanje z umetno inteligenco [Co-op Translator](https://github.com/Azure/co-op-translator). Čeprav si prizadevamo za natančnost, vas prosimo, da upoštevate, da lahko avtomatizirani prevodi vsebujejo napake ali netočnosti. Izvirni dokument v njegovem izvirnem jeziku je treba obravnavati kot avtoritativni vir. Za ključne informacije priporočamo profesionalni prevod s strani človeka. Ne prevzemamo odgovornosti za morebitne nesporazume ali napačne razlage, ki bi nastale zaradi uporabe tega prevoda.
\ No newline at end of file
diff --git a/translations/sl/6-space-game/1-introduction/README.md b/translations/sl/6-space-game/1-introduction/README.md
new file mode 100644
index 00000000..058afc4d
--- /dev/null
+++ b/translations/sl/6-space-game/1-introduction/README.md
@@ -0,0 +1,238 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "d9da6dc61fb712b29f65e108c79b8a5d",
+  "translation_date": "2025-08-27T22:35:07+00:00",
+  "source_file": "6-space-game/1-introduction/README.md",
+  "language_code": "sl"
+}
+-->
+# Ustvari vesoljsko igro, 1. del: Uvod
+
+![video](../../../../6-space-game/images/pewpew.gif)
+
+## Predhodni kviz
+
+[Predhodni kviz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/29)
+
+### Dedovanje in kompozicija pri razvoju iger
+
+V prejšnjih lekcijah ni bilo veliko potrebe po skrbi za arhitekturo aplikacij, ki ste jih ustvarili, saj so bili projekti zelo majhnega obsega. Ko pa vaše aplikacije rastejo v velikosti in obsegu, postanejo arhitekturne odločitve pomembnejše. Obstajata dva glavna pristopa za ustvarjanje večjih aplikacij v JavaScriptu: *kompozicija* ali *dedovanje*. Obe imata svoje prednosti in slabosti, vendar ju bomo razložili v kontekstu igre.
+
+✅ Ena najbolj znanih programerskih knjig vseh časov se ukvarja z [načrtnimi vzorci](https://en.wikipedia.org/wiki/Design_Patterns).
+
+V igri imate `igralne objekte`, ki so objekti, ki obstajajo na zaslonu. To pomeni, da imajo lokacijo v kartezičnem koordinatnem sistemu, ki jo določata koordinati `x` in `y`. Ko razvijate igro, boste opazili, da imajo vsi vaši igralni objekti standardne lastnosti, ki so skupne za vsako igro, ki jo ustvarite, in sicer elementi, ki so:
+
+- **lokacijsko osnovani** Večina, če ne vsi, igralni elementi so osnovani na lokaciji. To pomeni, da imajo lokacijo, `x` in `y`.
+- **premični** To so objekti, ki se lahko premaknejo na novo lokacijo. To je običajno junak, pošast ali NPC (ne-igralni lik), ne pa na primer statični objekt, kot je drevo.
+- **samouničujoči** Ti objekti obstajajo le določen čas, preden se pripravijo na izbris. Običajno je to predstavljeno z logično vrednostjo `mrtvo` ali `uničeno`, ki signalizira igralnemu pogonu, da tega objekta ni več treba prikazovati.
+- **časovno omejeni** 'Časovna omejitev' je tipična lastnost kratkotrajnih objektov. Tipičen primer je kos besedila ali grafični učinek, kot je eksplozija, ki naj bo viden le nekaj milisekund.
+
+✅ Pomislite na igro, kot je Pac-Man. Ali lahko v tej igri prepoznate štiri zgoraj navedene tipe objektov?
+
+### Izražanje vedenja
+
+Vse, kar smo opisali zgoraj, so vedenja, ki jih lahko imajo igralni objekti. Kako jih torej kodiramo? To vedenje lahko izrazimo kot metode, povezane z razredi ali objekti.
+
+**Razredi**
+
+Ideja je uporabiti `razrede` v kombinaciji z `dedovanjem`, da dodamo določeno vedenje razredu.
+
+✅ Dedovanje je pomemben koncept za razumevanje. Več o tem preberite v [članku MDN o dedovanju](https://developer.mozilla.org/docs/Web/JavaScript/Inheritance_and_the_prototype_chain).
+
+Izraženo s kodo, lahko igralni objekt običajno izgleda takole:
+
+```javascript
+
+//set up the class GameObject
+class GameObject {
+  constructor(x, y, type) {
+    this.x = x;
+    this.y = y;
+    this.type = type;
+  }
+}
+
+//this class will extend the GameObject's inherent class properties
+class Movable extends GameObject {
+  constructor(x,y, type) {
+    super(x,y, type)
+  }
+
+//this movable object can be moved on the screen
+  moveTo(x, y) {
+    this.x = x;
+    this.y = y;
+  }
+}
+
+//this is a specific class that extends the Movable class, so it can take advantage of all the properties that it inherits
+class Hero extends Movable {
+  constructor(x,y) {
+    super(x,y, 'Hero')
+  }
+}
+
+//this class, on the other hand, only inherits the GameObject properties
+class Tree extends GameObject {
+  constructor(x,y) {
+    super(x,y, 'Tree')
+  }
+}
+
+//a hero can move...
+const hero = new Hero();
+hero.moveTo(5,5);
+
+//but a tree cannot
+const tree = new Tree();
+```
+
+✅ Vzemite si nekaj minut in si zamislite junaka iz Pac-Mana (na primer Inky, Pinky ali Blinky) ter kako bi bil napisan v JavaScriptu.
+
+**Kompozicija**
+
+Drugačen način obravnave dedovanja objektov je uporaba *kompozicije*. Nato objekti izražajo svoje vedenje takole:
+
+```javascript
+//create a constant gameObject
+const gameObject = {
+  x: 0,
+  y: 0,
+  type: ''
+};
+
+//...and a constant movable
+const movable = {
+  moveTo(x, y) {
+    this.x = x;
+    this.y = y;
+  }
+}
+//then the constant movableObject is composed of the gameObject and movable constants
+const movableObject = {...gameObject, ...movable};
+
+//then create a function to create a new Hero who inherits the movableObject properties
+function createHero(x, y) {
+  return {
+    ...movableObject,
+    x,
+    y,
+    type: 'Hero'
+  }
+}
+//...and a static object that inherits only the gameObject properties
+function createStatic(x, y, type) {
+  return {
+    ...gameObject
+    x,
+    y,
+    type
+  }
+}
+//create the hero and move it
+const hero = createHero(10,10);
+hero.moveTo(5,5);
+//and create a static tree which only stands around
+const tree = createStatic(0,0, 'Tree'); 
+```
+
+**Kateri vzorec naj uporabim?**
+
+Odločitev je vaša, kateri vzorec boste izbrali. JavaScript podpira oba pristopa.
+
+--
+
+Drug pogost vzorec pri razvoju iger obravnava problem upravljanja uporabniške izkušnje in zmogljivosti igre.
+
+## Vzorec Pub/Sub
+
+✅ Pub/Sub pomeni 'objavi-naroči se'
+
+Ta vzorec obravnava idejo, da si različni deli vaše aplikacije ne bi smeli biti medsebojno poznani. Zakaj? To omogoča lažje razumevanje dogajanja na splošno, če so različni deli ločeni. Prav tako omogoča enostavno spreminjanje vedenja, če je to potrebno. Kako to dosežemo? To storimo z vzpostavitvijo nekaterih konceptov:
+
+- **sporočilo**: Sporočilo je običajno besedilni niz, ki mu lahko sledi dodatna vsebina (kos podatkov, ki pojasnjuje, za kaj gre pri sporočilu). Tipično sporočilo v igri je lahko `KEY_PRESSED_ENTER`.
+- **objavljalec**: Ta element *objavi* sporočilo in ga pošlje vsem naročnikom.
+- **naročnik**: Ta element *posluša* določena sporočila in izvede neko nalogo kot rezultat prejetega sporočila, na primer izstreli laser.
+
+Implementacija je precej majhna, vendar je to zelo močan vzorec. Tukaj je, kako ga lahko implementiramo:
+
+```javascript
+//set up an EventEmitter class that contains listeners
+class EventEmitter {
+  constructor() {
+    this.listeners = {};
+  }
+//when a message is received, let the listener to handle its payload
+  on(message, listener) {
+    if (!this.listeners[message]) {
+      this.listeners[message] = [];
+    }
+    this.listeners[message].push(listener);
+  }
+//when a message is sent, send it to a listener with some payload
+  emit(message, payload = null) {
+    if (this.listeners[message]) {
+      this.listeners[message].forEach(l => l(message, payload))
+    }
+  }
+}
+
+```
+
+Za uporabo zgornje kode lahko ustvarimo zelo majhno implementacijo:
+
+```javascript
+//set up a message structure
+const Messages = {
+  HERO_MOVE_LEFT: 'HERO_MOVE_LEFT'
+};
+//invoke the eventEmitter you set up above
+const eventEmitter = new EventEmitter();
+//set up a hero
+const hero = createHero(0,0);
+//let the eventEmitter know to watch for messages pertaining to the hero moving left, and act on it
+eventEmitter.on(Messages.HERO_MOVE_LEFT, () => {
+  hero.move(5,0);
+});
+
+//set up the window to listen for the keyup event, specifically if the left arrow is hit, emit a message to move the hero left
+window.addEventListener('keyup', (evt) => {
+  if (evt.key === 'ArrowLeft') {
+    eventEmitter.emit(Messages.HERO_MOVE_LEFT)
+  }
+});
+```
+
+Zgoraj povežemo dogodek tipkovnice, `ArrowLeft`, in pošljemo sporočilo `HERO_MOVE_LEFT`. Poslušamo to sporočilo in premaknemo `junaka` kot rezultat. Prednost tega vzorca je, da poslušalec dogodkov in junak ne vesta drug za drugega. Lahko premapirate `ArrowLeft` na tipko `A`. Poleg tega bi bilo mogoče narediti nekaj povsem drugega na `ArrowLeft` z nekaj spremembami v funkciji `on` eventEmitterja:
+
+```javascript
+eventEmitter.on(Messages.HERO_MOVE_LEFT, () => {
+  hero.move(5,0);
+});
+```
+
+Ko postanejo stvari bolj zapletene, ko vaša igra raste, ta vzorec ostane enako zapleten in vaša koda ostane čista. Zelo priporočljivo je, da sprejmete ta vzorec.
+
+---
+
+## 🚀 Izziv
+
+Razmislite, kako lahko vzorec pub-sub izboljša igro. Kateri deli naj oddajajo dogodke in kako naj igra nanje reagira? Zdaj imate priložnost, da postanete ustvarjalni in razmislite o novi igri ter o tem, kako bi se njeni deli lahko obnašali.
+
+## Zaključni kviz
+
+[Zaključni kviz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/30)
+
+## Pregled in samostojno učenje
+
+Več o Pub/Sub preberite [tukaj](https://docs.microsoft.com/azure/architecture/patterns/publisher-subscriber/?WT.mc_id=academic-77807-sagibbon).
+
+## Naloga
+
+[Zasnujte igro](assignment.md)
+
+---
+
+**Omejitev odgovornosti**:  
+Ta dokument je bil preveden z uporabo storitve za prevajanje z umetno inteligenco [Co-op Translator](https://github.com/Azure/co-op-translator). Čeprav si prizadevamo za natančnost, vas prosimo, da upoštevate, da lahko avtomatizirani prevodi vsebujejo napake ali netočnosti. Izvirni dokument v njegovem izvirnem jeziku je treba obravnavati kot avtoritativni vir. Za ključne informacije priporočamo profesionalni človeški prevod. Ne prevzemamo odgovornosti za morebitna nesporazumevanja ali napačne razlage, ki bi nastale zaradi uporabe tega prevoda.
\ No newline at end of file
diff --git a/translations/sl/6-space-game/1-introduction/assignment.md b/translations/sl/6-space-game/1-introduction/assignment.md
new file mode 100644
index 00000000..7ad06a7f
--- /dev/null
+++ b/translations/sl/6-space-game/1-introduction/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "009bdedee9cc82988264be8cb31f9bf4",
+  "translation_date": "2025-08-27T22:35:41+00:00",
+  "source_file": "6-space-game/1-introduction/assignment.md",
+  "language_code": "sl"
+}
+-->
+# Ustvari igro
+
+## Navodila
+
+Z uporabo vzorčnih kod iz lekcije napišite predstavitev igre, ki jo imate radi. Igra mora biti preprosta, vendar je cilj uporabiti bodisi vzorec razreda ali vzorec kompozicije ter vzorec pub/sub, da pokažete, kako bi se igra lahko zagnala. Bodite ustvarjalni!
+
+## Merila
+
+| Merila  | Odlično                                                | Zadostno                                              | Potrebno izboljšanje                                |
+| --------| -------------------------------------------------------| -----------------------------------------------------| ---------------------------------------------------|
+|         | Trije elementi so postavljeni na zaslon in manipulirani | Dva elementa sta postavljena na zaslon in manipulirana | En element je postavljen na zaslon in manipuliran |
+
+---
+
+**Omejitev odgovornosti**:  
+Ta dokument je bil preveden z uporabo storitve za prevajanje z umetno inteligenco [Co-op Translator](https://github.com/Azure/co-op-translator). Čeprav si prizadevamo za natančnost, vas prosimo, da upoštevate, da lahko avtomatizirani prevodi vsebujejo napake ali netočnosti. Izvirni dokument v njegovem izvirnem jeziku je treba obravnavati kot avtoritativni vir. Za ključne informacije priporočamo profesionalni človeški prevod. Ne prevzemamo odgovornosti za morebitna nesporazumevanja ali napačne razlage, ki bi nastale zaradi uporabe tega prevoda.
\ No newline at end of file
diff --git a/translations/sl/6-space-game/2-drawing-to-canvas/README.md b/translations/sl/6-space-game/2-drawing-to-canvas/README.md
new file mode 100644
index 00000000..187538ba
--- /dev/null
+++ b/translations/sl/6-space-game/2-drawing-to-canvas/README.md
@@ -0,0 +1,230 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "41be8d35e7f30aa9dad10773c35e89c4",
+  "translation_date": "2025-08-27T22:32:00+00:00",
+  "source_file": "6-space-game/2-drawing-to-canvas/README.md",
+  "language_code": "sl"
+}
+-->
+# Zgradite vesoljsko igro, 2. del: Narišite junaka in pošasti na platno
+
+## Predhodni kviz
+
+[Predhodni kviz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/31)
+
+## Platno
+
+Platno je HTML element, ki privzeto nima vsebine; je prazna površina. Na njem morate risati, da ga zapolnite.
+
+✅ Preberite [več o API-ju za platno](https://developer.mozilla.org/docs/Web/API/Canvas_API) na MDN.
+
+Tukaj je primer, kako je običajno deklarirano kot del telesa strani:
+
+```html
+<canvas id="myCanvas" width="200" height="100"></canvas>
+```
+
+Zgoraj nastavljamo `id`, `width` in `height`.
+
+- `id`: nastavite to, da lahko pridobite referenco, ko želite z njim interagirati.
+- `width`: to je širina elementa.
+- `height`: to je višina elementa.
+
+## Risanje preproste geometrije
+
+Platno uporablja kartezični koordinatni sistem za risanje. Zato uporablja x-os in y-os za izražanje lokacije nečesa. Lokacija `0,0` je zgornji levi položaj, spodnji desni pa je tisto, kar ste nastavili kot ŠIRINO in VIŠINO platna.
+
+![mreža platna](../../../../translated_images/canvas_grid.5f209da785ded492a01ece440e3032afe51efa500cc2308e5ea4252487ceaf0b.sl.png)
+> Slika iz [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes)
+
+Za risanje na element platna morate slediti naslednjim korakom:
+
+1. **Pridobite referenco** na element platna.
+1. **Pridobite referenco** na element Context, ki se nahaja na elementu platna.
+1. **Izvedite operacijo risanja** z uporabo elementa Context.
+
+Koda za zgornje korake običajno izgleda takole:
+
+```javascript
+// draws a red rectangle
+//1. get the canvas reference
+canvas = document.getElementById("myCanvas");
+
+//2. set the context to 2D to draw basic shapes
+ctx = canvas.getContext("2d");
+
+//3. fill it with the color red
+ctx.fillStyle = 'red';
+
+//4. and draw a rectangle with these parameters, setting location and size
+ctx.fillRect(0,0, 200, 200) // x,y,width, height
+```
+
+✅ API za platno se večinoma osredotoča na 2D oblike, vendar lahko na spletno stran narišete tudi 3D elemente; za to lahko uporabite [WebGL API](https://developer.mozilla.org/docs/Web/API/WebGL_API).
+
+S pomočjo API-ja za platno lahko narišete različne stvari, kot so:
+
+- **Geometrijske oblike**, že smo pokazali, kako narisati pravokotnik, vendar je še veliko več, kar lahko narišete.
+- **Besedilo**, lahko narišete besedilo s katero koli pisavo in barvo, ki jo želite.
+- **Slike**, lahko narišete sliko na podlagi slikovnega vira, kot je .jpg ali .png.
+
+✅ Poskusite! Zdaj, ko veste, kako narisati pravokotnik, ali lahko narišete krog na stran? Oglejte si nekaj zanimivih risb na platnu na CodePen. Tukaj je [posebej impresiven primer](https://codepen.io/dissimulate/pen/KrAwx).
+
+## Naložite in narišite slikovni vir
+
+Slikovni vir naložite tako, da ustvarite objekt `Image` in nastavite njegovo lastnost `src`. Nato poslušate dogodek `load`, da veste, kdaj je pripravljen za uporabo. Koda izgleda takole:
+
+### Nalaganje vira
+
+```javascript
+const img = new Image();
+img.src = 'path/to/my/image.png';
+img.onload = () => {
+  // image loaded and ready to be used
+}
+```
+
+### Vzorec nalaganja vira
+
+Priporočljivo je, da zgornje zavijete v konstrukcijo, kot je prikazano spodaj, da je lažje za uporabo in da poskušate z njim manipulirati šele, ko je popolnoma naložen:
+
+```javascript
+function loadAsset(path) {
+  return new Promise((resolve) => {
+    const img = new Image();
+    img.src = path;
+    img.onload = () => {
+      // image loaded and ready to be used
+      resolve(img);
+    }
+  })
+}
+
+// use like so
+
+async function run() {
+  const heroImg = await loadAsset('hero.png')
+  const monsterImg = await loadAsset('monster.png')
+}
+
+```
+
+Za risanje igralnih virov na zaslon bi vaša koda izgledala takole:
+
+```javascript
+async function run() {
+  const heroImg = await loadAsset('hero.png')
+  const monsterImg = await loadAsset('monster.png')
+
+  canvas = document.getElementById("myCanvas");
+  ctx = canvas.getContext("2d");
+  ctx.drawImage(heroImg, canvas.width/2,canvas.height/2);
+  ctx.drawImage(monsterImg, 0,0);
+}
+```
+
+## Zdaj je čas, da začnete graditi svojo igro
+
+### Kaj zgraditi
+
+Zgradili boste spletno stran z elementom platna. Prikazati mora črn zaslon `1024*768`. Na voljo imate dve sliki:
+
+- Junakov ladja
+
+   ![Junakov ladja](../../../../translated_images/player.dd24c1afa8c71e9b82b2958946d4bad13308681392d4b5ddcc61a0e818ef8088.sl.png)
+
+- 5*5 pošasti
+
+   ![Pošastna ladja](../../../../translated_images/enemyShip.5df2a822c16650c2fb3c06652e8ec8120cdb9122a6de46b9a1a56d54db22657f.sl.png)
+
+### Priporočeni koraki za začetek razvoja
+
+Poiščite datoteke, ki so bile ustvarjene za vas v podmapi `your-work`. Vsebujejo naj naslednje:
+
+```bash
+-| assets
+  -| enemyShip.png
+  -| player.png
+-| index.html
+-| app.js
+-| package.json
+```
+
+Odprite kopijo te mape v Visual Studio Code. Potrebujete lokalno razvojno okolje, po možnosti z Visual Studio Code, NPM in Node nameščenimi. Če na vašem računalniku ni nastavljen `npm`, [tukaj je, kako to storiti](https://www.npmjs.com/get-npm).
+
+Začnite svoj projekt tako, da se premaknete v mapo `your_work`:
+
+```bash
+cd your-work
+npm start
+```
+
+Zgornje bo zagnalo HTTP strežnik na naslovu `http://localhost:5000`. Odprite brskalnik in vnesite ta naslov. Trenutno je prazna stran, vendar se bo to spremenilo.
+
+> Opomba: za ogled sprememb na zaslonu osvežite brskalnik.
+
+### Dodajte kodo
+
+Dodajte potrebno kodo v `your-work/app.js`, da rešite spodnje:
+
+1. **Narišite** platno s črnim ozadjem
+   > namig: dodajte dve vrstici pod ustrezen TODO v `/app.js`, nastavite element `ctx`, da bo črn, zgornje/leve koordinate na 0,0 ter višino in širino, da bosta enaki platnu.
+2. **Naložite** teksture
+   > namig: dodajte slike igralca in sovražnika z uporabo `await loadTexture` in podajte pot do slike. Na zaslonu jih še ne boste videli!
+3. **Narišite** junaka na sredino zaslona v spodnji polovici
+   > namig: uporabite API `drawImage`, da narišete heroImg na zaslon, nastavite `canvas.width / 2 - 45` in `canvas.height - canvas.height / 4)`;
+4. **Narišite** 5*5 pošasti
+   > namig: zdaj lahko odstranite komentarje iz kode za risanje sovražnikov na zaslon. Nato pojdite v funkcijo `createEnemies` in jo dokončajte.
+
+   Najprej nastavite nekaj konstant:
+
+    ```javascript
+    const MONSTER_TOTAL = 5;
+    const MONSTER_WIDTH = MONSTER_TOTAL * 98;
+    const START_X = (canvas.width - MONSTER_WIDTH) / 2;
+    const STOP_X = START_X + MONSTER_WIDTH;
+    ```
+
+    nato ustvarite zanko za risanje matrike pošasti na zaslon:
+
+    ```javascript
+    for (let x = START_X; x < STOP_X; x += 98) {
+        for (let y = 0; y < 50 * 5; y += 50) {
+          ctx.drawImage(enemyImg, x, y);
+        }
+      }
+    ```
+
+## Rezultat
+
+Končni rezultat naj izgleda takole:
+
+![Črn zaslon z junakom in 5*5 pošasti](../../../../translated_images/partI-solution.36c53b48c9ffae2a5e15496b23b604ba5393433e4bf91608a7a0a020eb7a2691.sl.png)
+
+## Rešitev
+
+Najprej poskusite rešiti sami, vendar če se zataknete, si oglejte [rešitev](../../../../6-space-game/2-drawing-to-canvas/solution/app.js).
+
+---
+
+## 🚀 Izziv
+
+Naučili ste se risanja z API-jem za platno, ki je osredotočen na 2D; poglejte si [WebGL API](https://developer.mozilla.org/docs/Web/API/WebGL_API) in poskusite narisati 3D objekt.
+
+## Zaključni kviz
+
+[Zaključni kviz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/32)
+
+## Pregled in samostojno učenje
+
+Več o API-ju za platno se naučite z [branjem o njem](https://developer.mozilla.org/docs/Web/API/Canvas_API).
+
+## Naloga
+
+[Preizkusite API za platno](assignment.md)
+
+---
+
+**Omejitev odgovornosti**:  
+Ta dokument je bil preveden z uporabo storitve za prevajanje z umetno inteligenco [Co-op Translator](https://github.com/Azure/co-op-translator). Čeprav si prizadevamo za natančnost, vas prosimo, da upoštevate, da lahko avtomatizirani prevodi vsebujejo napake ali netočnosti. Izvirni dokument v njegovem maternem jeziku je treba obravnavati kot avtoritativni vir. Za ključne informacije priporočamo profesionalni človeški prevod. Ne prevzemamo odgovornosti za morebitna nesporazumevanja ali napačne razlage, ki bi nastale zaradi uporabe tega prevoda.
\ No newline at end of file
diff --git a/translations/sl/6-space-game/2-drawing-to-canvas/assignment.md b/translations/sl/6-space-game/2-drawing-to-canvas/assignment.md
new file mode 100644
index 00000000..7ace2572
--- /dev/null
+++ b/translations/sl/6-space-game/2-drawing-to-canvas/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "ca1cf78a4c60df77ab32a154ec024d7f",
+  "translation_date": "2025-08-27T22:32:31+00:00",
+  "source_file": "6-space-game/2-drawing-to-canvas/assignment.md",
+  "language_code": "sl"
+}
+-->
+# Igraj se z API-jem Canvas
+
+## Navodila
+
+Izberi en element API-ja Canvas in ustvari nekaj zanimivega okoli njega. Ali lahko ustvariš majhno galaksijo ponavljajočih se zvezd? Ali lahko ustvariš zanimivo teksturo barvnih črt? Za navdih lahko pogledaš na CodePen (vendar ne kopiraj).
+
+## Merila
+
+| Merila  | Vrhunsko                                                 | Zadostno                           | Potrebna izboljšava   |
+| -------- | --------------------------------------------------------- | ----------------------------------- | --------------------- |
+|          | Koda je oddana in prikazuje zanimivo teksturo ali obliko | Koda je oddana, vendar ne deluje   | Koda ni oddana        |
+
+---
+
+**Omejitev odgovornosti**:  
+Ta dokument je bil preveden z uporabo storitve za prevajanje z umetno inteligenco [Co-op Translator](https://github.com/Azure/co-op-translator). Čeprav si prizadevamo za natančnost, vas prosimo, da upoštevate, da lahko avtomatizirani prevodi vsebujejo napake ali netočnosti. Izvirni dokument v njegovem maternem jeziku je treba obravnavati kot avtoritativni vir. Za ključne informacije priporočamo profesionalni človeški prevod. Ne prevzemamo odgovornosti za morebitna nesporazumevanja ali napačne razlage, ki bi nastale zaradi uporabe tega prevoda.
\ No newline at end of file
diff --git a/translations/sl/6-space-game/3-moving-elements-around/README.md b/translations/sl/6-space-game/3-moving-elements-around/README.md
new file mode 100644
index 00000000..82dc3562
--- /dev/null
+++ b/translations/sl/6-space-game/3-moving-elements-around/README.md
@@ -0,0 +1,402 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "23f088add24f0f1fa51014a9e27ea280",
+  "translation_date": "2025-08-27T22:26:36+00:00",
+  "source_file": "6-space-game/3-moving-elements-around/README.md",
+  "language_code": "sl"
+}
+-->
+# Ustvarjanje vesoljske igre, 3. del: Dodajanje gibanja
+
+## Predhodni kviz
+
+[Predhodni kviz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/33)
+
+Igre niso prav zabavne, dokler se po zaslonu ne začnejo premikati vesoljci! V tej igri bomo uporabili dve vrsti gibanja:
+
+- **Gibanje s tipkovnico/miško**: ko uporabnik z interakcijo s tipkovnico ali miško premakne objekt na zaslonu.
+- **Gibanje, ki ga sproži igra**: ko igra premakne objekt v določenih časovnih intervalih.
+
+Kako torej premikamo stvari na zaslonu? Vse temelji na kartezičnih koordinatah: spremenimo lokacijo (x, y) objekta in nato ponovno narišemo zaslon.
+
+Običajno potrebujete naslednje korake, da dosežete *gibanje* na zaslonu:
+
+1. **Nastavite novo lokacijo** za objekt; to je potrebno, da se zdi, da se je objekt premaknil.
+2. **Počistite zaslon**, saj ga je treba očistiti med posameznimi risanji. To lahko storimo tako, da narišemo pravokotnik, ki ga zapolnimo z barvo ozadja.
+3. **Ponovno narišite objekt** na novi lokaciji. S tem končno dosežemo premik objekta z ene lokacije na drugo.
+
+Tako lahko to izgleda v kodi:
+
+```javascript
+//set the hero's location
+hero.x += 5;
+// clear the rectangle that hosts the hero
+ctx.clearRect(0, 0, canvas.width, canvas.height);
+// redraw the game background and hero
+ctx.fillRect(0, 0, canvas.width, canvas.height)
+ctx.fillStyle = "black";
+ctx.drawImage(heroImg, hero.x, hero.y);
+```
+
+✅ Ali lahko pomislite na razlog, zakaj bi lahko risanje vašega junaka večkrat na sekundo povzročilo težave z zmogljivostjo? Preberite več o [alternativah temu vzorcu](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas).
+
+## Obdelava dogodkov tipkovnice
+
+Dogodke obdelujete tako, da določene dogodke povežete s kodo. Dogodki tipkovnice se sprožijo na celotnem oknu, medtem ko so dogodki miške, kot je `click`, lahko povezani s klikom na določen element. V tem projektu bomo uporabljali dogodke tipkovnice.
+
+Za obdelavo dogodka morate uporabiti metodo `addEventListener()` okna in ji posredovati dva vhodna parametra. Prvi parameter je ime dogodka, na primer `keyup`. Drugi parameter je funkcija, ki naj se izvede, ko se dogodek zgodi.
+
+Tukaj je primer:
+
+```javascript
+window.addEventListener('keyup', (evt) => {
+  // `evt.key` = string representation of the key
+  if (evt.key === 'ArrowUp') {
+    // do something
+  }
+})
+```
+
+Za dogodke tipk obstajata dve lastnosti dogodka, ki ju lahko uporabite za ugotovitev, katera tipka je bila pritisnjena:
+
+- `key`, to je nizovna predstavitev pritisnjene tipke, na primer `ArrowUp`.
+- `keyCode`, to je številčna predstavitev, na primer `37`, kar ustreza `ArrowLeft`.
+
+✅ Manipulacija dogodkov tipk je uporabna tudi zunaj razvoja iger. Za katere druge namene bi lahko uporabili to tehniko?
+
+### Posebne tipke: opozorilo
+
+Obstajajo nekatere *posebne* tipke, ki vplivajo na okno. To pomeni, da če poslušate dogodek `keyup` in uporabite te posebne tipke za premikanje junaka, bo to povzročilo tudi horizontalno pomikanje. Zaradi tega boste morda želeli *izklopiti* to privzeto vedenje brskalnika med razvojem igre. Potrebujete kodo, kot je ta:
+
+```javascript
+let onKeyDown = function (e) {
+  console.log(e.keyCode);
+  switch (e.keyCode) {
+    case 37:
+    case 39:
+    case 38:
+    case 40: // Arrow keys
+    case 32:
+      e.preventDefault();
+      break; // Space
+    default:
+      break; // do not block other keys
+  }
+};
+
+window.addEventListener('keydown', onKeyDown);
+```
+
+Zgornja koda bo zagotovila, da bodo puščične tipke in preslednica imele svoje *privzeto* vedenje izklopljeno. Mehanizem *izklopa* se zgodi, ko pokličemo `e.preventDefault()`.
+
+## Gibanje, ki ga sproži igra
+
+Stvari lahko premikamo same od sebe z uporabo časovnikov, kot sta funkciji `setTimeout()` ali `setInterval()`, ki posodabljata lokacijo objekta ob vsakem intervalu. Tako lahko to izgleda:
+
+```javascript
+let id = setInterval(() => {
+  //move the enemy on the y axis
+  enemy.y += 10;
+})
+```
+
+## Igralna zanka
+
+Igralna zanka je koncept, ki je v bistvu funkcija, ki se izvaja v rednih intervalih. Imenuje se igralna zanka, ker se v njej nariše vse, kar naj bi bilo vidno uporabniku. Igralna zanka uporablja vse igralne objekte, ki so del igre, in jih nariše, razen če iz kakšnega razloga ne bi smeli biti več del igre. Na primer, če je objekt sovražnik, ki ga je zadela laserska žarka in eksplodira, ni več del trenutne igralne zanke (o tem boste izvedeli več v naslednjih lekcijah).
+
+Tako lahko igralna zanka običajno izgleda, izražena v kodi:
+
+```javascript
+let gameLoopId = setInterval(() =>
+  function gameLoop() {
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    ctx.fillStyle = "black";
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+    drawHero();
+    drawEnemies();
+    drawStaticObjects();
+}, 200);
+```
+
+Zgornja zanka se izvaja vsakih `200` milisekund za ponovno risanje platna. Sami lahko izberete interval, ki najbolj ustreza vaši igri.
+
+## Nadaljevanje vesoljske igre
+
+Obstoječo kodo boste razširili. Lahko začnete s kodo, ki ste jo dokončali v prvem delu, ali uporabite kodo iz [2. dela - začetna koda](../../../../6-space-game/3-moving-elements-around/your-work).
+
+- **Premikanje junaka**: dodali boste kodo, da boste lahko junaka premikali s puščičnimi tipkami.
+- **Premikanje sovražnikov**: prav tako boste morali dodati kodo, da se bodo sovražniki premikali od zgoraj navzdol z določeno hitrostjo.
+
+## Priporočeni koraki
+
+Poiščite datoteke, ki so bile ustvarjene za vas v podmapi `your-work`. Vsebujejo naj naslednje:
+
+```bash
+-| assets
+  -| enemyShip.png
+  -| player.png
+-| index.html
+-| app.js
+-| package.json
+```
+
+Svoj projekt začnete v mapi `your_work` z vnosom:
+
+```bash
+cd your-work
+npm start
+```
+
+Zgornji ukaz bo zagnal HTTP strežnik na naslovu `http://localhost:5000`. Odprite brskalnik in vnesite ta naslov; trenutno bi moral prikazati junaka in vse sovražnike, vendar se še nič ne premika!
+
+### Dodajte kodo
+
+1. **Dodajte namenski objekt** za `hero`, `enemy` in `game object`, ki naj imajo lastnosti `x` in `y`. (Spomnite se dela o [Dedovanju ali kompoziciji](../README.md)).
+
+   *NAMIG*: `game object` naj bo tisti, ki ima lastnosti `x` in `y` ter sposobnost, da se nariše na platno.
+
+   >nasvet: začnite z dodajanjem novega razreda GameObject s konstruktorjem, kot je spodaj, in ga nato narišite na platno:
+  
+    ```javascript
+        
+    class GameObject {
+      constructor(x, y) {
+        this.x = x;
+        this.y = y;
+        this.dead = false;
+        this.type = "";
+        this.width = 0;
+        this.height = 0;
+        this.img = undefined;
+      }
+    
+      draw(ctx) {
+        ctx.drawImage(this.img, this.x, this.y, this.width, this.height);
+      }
+    }
+    ```
+
+    Zdaj razširite ta GameObject, da ustvarite Hero in Enemy.
+    
+    ```javascript
+    class Hero extends GameObject {
+      constructor(x, y) {
+        ...it needs an x, y, type, and speed
+      }
+    }
+    ```
+
+    ```javascript
+    class Enemy extends GameObject {
+      constructor(x, y) {
+        super(x, y);
+        (this.width = 98), (this.height = 50);
+        this.type = "Enemy";
+        let id = setInterval(() => {
+          if (this.y < canvas.height - this.height) {
+            this.y += 5;
+          } else {
+            console.log('Stopped at', this.y)
+            clearInterval(id);
+          }
+        }, 300)
+      }
+    }
+    ```
+
+2. **Dodajte obdelovalce dogodkov tipk** za navigacijo (premikanje junaka gor/dol, levo/desno).
+
+   *SPOMNITE SE*: gre za kartezični sistem, zgornji levi kot je `0,0`. Prav tako ne pozabite dodati kode za zaustavitev *privzetega vedenja*.
+
+   >nasvet: ustvarite svojo funkcijo onKeyDown in jo povežite z oknom:
+
+   ```javascript
+    let onKeyDown = function (e) {
+	      console.log(e.keyCode);
+	        ...add the code from the lesson above to stop default behavior
+	      }
+    };
+
+    window.addEventListener("keydown", onKeyDown);
+   ```
+    
+   Na tej točki preverite konzolo brskalnika in opazujte, kako se beležijo pritiski tipk.
+
+3. **Implementirajte** [vzorec Pub-Sub](../README.md), da bo vaša koda ostala čista, ko boste nadaljevali z naslednjimi deli.
+
+   Za izvedbo tega zadnjega dela lahko:
+
+   1. **Dodate poslušalca dogodkov** na okno:
+
+       ```javascript
+        window.addEventListener("keyup", (evt) => {
+          if (evt.key === "ArrowUp") {
+            eventEmitter.emit(Messages.KEY_EVENT_UP);
+          } else if (evt.key === "ArrowDown") {
+            eventEmitter.emit(Messages.KEY_EVENT_DOWN);
+          } else if (evt.key === "ArrowLeft") {
+            eventEmitter.emit(Messages.KEY_EVENT_LEFT);
+          } else if (evt.key === "ArrowRight") {
+            eventEmitter.emit(Messages.KEY_EVENT_RIGHT);
+          }
+        });
+        ```
+
+    1. **Ustvarite razred EventEmitter** za objavljanje in naročanje na sporočila:
+
+        ```javascript
+        class EventEmitter {
+          constructor() {
+            this.listeners = {};
+          }
+        
+          on(message, listener) {
+            if (!this.listeners[message]) {
+              this.listeners[message] = [];
+            }
+            this.listeners[message].push(listener);
+          }
+        
+          emit(message, payload = null) {
+            if (this.listeners[message]) {
+              this.listeners[message].forEach((l) => l(message, payload));
+            }
+          }
+        }
+        ```
+
+    1. **Dodate konstante** in nastavite EventEmitter:
+
+        ```javascript
+        const Messages = {
+          KEY_EVENT_UP: "KEY_EVENT_UP",
+          KEY_EVENT_DOWN: "KEY_EVENT_DOWN",
+          KEY_EVENT_LEFT: "KEY_EVENT_LEFT",
+          KEY_EVENT_RIGHT: "KEY_EVENT_RIGHT",
+        };
+        
+        let heroImg, 
+            enemyImg, 
+            laserImg,
+            canvas, ctx, 
+            gameObjects = [], 
+            hero, 
+            eventEmitter = new EventEmitter();
+        ```
+
+    1. **Inicializirate igro**
+
+    ```javascript
+    function initGame() {
+      gameObjects = [];
+      createEnemies();
+      createHero();
+    
+      eventEmitter.on(Messages.KEY_EVENT_UP, () => {
+        hero.y -=5 ;
+      })
+    
+      eventEmitter.on(Messages.KEY_EVENT_DOWN, () => {
+        hero.y += 5;
+      });
+    
+      eventEmitter.on(Messages.KEY_EVENT_LEFT, () => {
+        hero.x -= 5;
+      });
+    
+      eventEmitter.on(Messages.KEY_EVENT_RIGHT, () => {
+        hero.x += 5;
+      });
+    }
+    ```
+
+1. **Nastavite igralno zanko**
+
+   Preoblikujte funkcijo window.onload, da inicializira igro in nastavi igralno zanko z ustreznim intervalom. Prav tako boste dodali laserski žarek:
+
+    ```javascript
+    window.onload = async () => {
+      canvas = document.getElementById("canvas");
+      ctx = canvas.getContext("2d");
+      heroImg = await loadTexture("assets/player.png");
+      enemyImg = await loadTexture("assets/enemyShip.png");
+      laserImg = await loadTexture("assets/laserRed.png");
+    
+      initGame();
+      let gameLoopId = setInterval(() => {
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        ctx.fillStyle = "black";
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
+        drawGameObjects(ctx);
+      }, 100)
+      
+    };
+    ```
+
+5. **Dodajte kodo** za premikanje sovražnikov v določenih intervalih.
+
+    Preoblikujte funkcijo `createEnemies()`, da ustvari sovražnike in jih doda v nov razred gameObjects:
+
+    ```javascript
+    function createEnemies() {
+      const MONSTER_TOTAL = 5;
+      const MONSTER_WIDTH = MONSTER_TOTAL * 98;
+      const START_X = (canvas.width - MONSTER_WIDTH) / 2;
+      const STOP_X = START_X + MONSTER_WIDTH;
+    
+      for (let x = START_X; x < STOP_X; x += 98) {
+        for (let y = 0; y < 50 * 5; y += 50) {
+          const enemy = new Enemy(x, y);
+          enemy.img = enemyImg;
+          gameObjects.push(enemy);
+        }
+      }
+    }
+    ```
+    
+    in dodajte funkcijo `createHero()`, da naredite podoben postopek za junaka.
+    
+    ```javascript
+    function createHero() {
+      hero = new Hero(
+        canvas.width / 2 - 45,
+        canvas.height - canvas.height / 4
+      );
+      hero.img = heroImg;
+      gameObjects.push(hero);
+    }
+    ```
+
+    in na koncu dodajte funkcijo `drawGameObjects()`, da začnete risanje:
+
+    ```javascript
+    function drawGameObjects(ctx) {
+      gameObjects.forEach(go => go.draw(ctx));
+    }
+    ```
+
+    Vaši sovražniki bi morali začeti napadati vaš vesoljski ladijski junak!
+
+---
+
+## 🚀 Izziv
+
+Kot lahko vidite, se vaša koda lahko spremeni v 'špagetno kodo', ko začnete dodajati funkcije, spremenljivke in razrede. Kako lahko bolje organizirate svojo kodo, da bo bolj berljiva? Narišite sistem za organizacijo kode, tudi če še vedno ostane v eni datoteki.
+
+## Zaključni kviz
+
+[Zaključni kviz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/34)
+
+## Pregled in samostojno učenje
+
+Čeprav svojo igro pišemo brez uporabe ogrodij, obstaja veliko ogrodij za razvoj iger na osnovi JavaScripta in platna. Vzemite si čas za [branje o teh](https://github.com/collections/javascript-game-engines).
+
+## Naloga
+
+[Komentirajte svojo kodo](assignment.md)
+
+---
+
+**Omejitev odgovornosti**:  
+Ta dokument je bil preveden z uporabo storitve za prevajanje z umetno inteligenco [Co-op Translator](https://github.com/Azure/co-op-translator). Čeprav si prizadevamo za natančnost, vas prosimo, da upoštevate, da lahko avtomatizirani prevodi vsebujejo napake ali netočnosti. Izvirni dokument v njegovem izvirnem jeziku je treba obravnavati kot avtoritativni vir. Za ključne informacije priporočamo profesionalni človeški prevod. Ne prevzemamo odgovornosti za morebitna napačna razumevanja ali napačne interpretacije, ki bi nastale zaradi uporabe tega prevoda.
\ No newline at end of file
diff --git a/translations/sl/6-space-game/3-moving-elements-around/assignment.md b/translations/sl/6-space-game/3-moving-elements-around/assignment.md
new file mode 100644
index 00000000..0335e28b
--- /dev/null
+++ b/translations/sl/6-space-game/3-moving-elements-around/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "ccfcd8c2932761359fbaff3d6b01ace4",
+  "translation_date": "2025-08-27T22:27:19+00:00",
+  "source_file": "6-space-game/3-moving-elements-around/assignment.md",
+  "language_code": "sl"
+}
+-->
+# Komentirajte svojo kodo
+
+## Navodila
+
+Preglejte svojo trenutno datoteko /app.js v mapi igre in poiščite načine, kako jo komentirati in urediti. Koda se lahko zelo hitro zaplete, zato je zdaj dobra priložnost, da dodate komentarje in zagotovite berljivo kodo, ki jo boste lahko uporabili kasneje.
+
+## Merila
+
+| Merila   | Odlično                                                           | Zadostno                             | Potrebno izboljšanje                                           |
+| -------- | ----------------------------------------------------------------- | ------------------------------------ | -------------------------------------------------------------- |
+|          | Koda v `app.js` je popolnoma komentirana in organizirana v logične bloke | Koda v `app.js` je ustrezno komentirana | Koda v `app.js` je nekoliko neorganizirana in ji manjkajo dobri komentarji |
+
+---
+
+**Omejitev odgovornosti**:  
+Ta dokument je bil preveden z uporabo storitve za prevajanje z umetno inteligenco [Co-op Translator](https://github.com/Azure/co-op-translator). Čeprav si prizadevamo za natančnost, vas prosimo, da upoštevate, da lahko avtomatizirani prevodi vsebujejo napake ali netočnosti. Izvirni dokument v njegovem maternem jeziku je treba obravnavati kot avtoritativni vir. Za ključne informacije priporočamo profesionalni človeški prevod. Ne prevzemamo odgovornosti za morebitne nesporazume ali napačne razlage, ki bi nastale zaradi uporabe tega prevoda.
\ No newline at end of file
diff --git a/translations/sl/6-space-game/4-collision-detection/README.md b/translations/sl/6-space-game/4-collision-detection/README.md
new file mode 100644
index 00000000..c27e415d
--- /dev/null
+++ b/translations/sl/6-space-game/4-collision-detection/README.md
@@ -0,0 +1,311 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "2e83e38c35dc003f046d7cc0bbfd4920",
+  "translation_date": "2025-08-27T22:30:05+00:00",
+  "source_file": "6-space-game/4-collision-detection/README.md",
+  "language_code": "sl"
+}
+-->
+# Ustvari vesoljsko igro, 4. del: Dodajanje laserja in zaznavanje trkov
+
+## Predhodni kviz
+
+[Predhodni kviz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/35)
+
+V tej lekciji se boste naučili, kako streljati laserje z JavaScriptom! V igro bomo dodali dve stvari:
+
+- **Laser**: ta laser se izstreli iz ladje junaka in leti navpično navzgor
+- **Zaznavanje trkov**, kot del implementacije streljanja bomo dodali tudi nekaj pravil igre:
+   - **Laser zadene sovražnika**: Sovražnik umre, če ga zadene laser
+   - **Laser zadene zgornji del zaslona**: Laser se uniči, če zadene zgornji del zaslona
+   - **Trk sovražnika in junaka**: Sovražnik in junak se uničita, če trčita drug v drugega
+   - **Sovražnik zadene spodnji del zaslona**: Sovražnik in junak se uničita, če sovražnik doseže spodnji del zaslona
+
+Skratka, vi -- *junak* -- morate zadeti vse sovražnike z laserjem, preden se ti premaknejo na dno zaslona.
+
+✅ Naredite malo raziskave o prvi računalniški igri, ki je bila kdaj napisana. Kakšna je bila njena funkcionalnost?
+
+Bodimo junaki skupaj!
+
+## Zaznavanje trkov
+
+Kako zaznamo trke? Na naše igralne objekte moramo gledati kot na pravokotnike, ki se premikajo. Zakaj, se morda sprašujete? No, slika, ki jo uporabimo za risanje igralnega objekta, je pravokotnik: ima `x`, `y`, `širino` in `višino`.
+
+Če se dva pravokotnika, npr. junak in sovražnik, *prekrivata*, imamo trk. Kaj se zgodi potem, je odvisno od pravil igre. Za implementacijo zaznavanja trkov potrebujete naslednje:
+
+1. Način za pridobitev pravokotne predstavitve igralnega objekta, nekaj takega:
+
+   ```javascript
+   rectFromGameObject() {
+     return {
+       top: this.y,
+       left: this.x,
+       bottom: this.y + this.height,
+       right: this.x + this.width
+     }
+   }
+   ```
+
+2. Funkcijo za primerjavo, ki lahko izgleda takole:
+
+   ```javascript
+   function intersectRect(r1, r2) {
+     return !(r2.left > r1.right ||
+       r2.right < r1.left ||
+       r2.top > r1.bottom ||
+       r2.bottom < r1.top);
+   }
+   ```
+
+## Kako uničimo stvari
+
+Za uničenje stvari v igri morate igri sporočiti, da tega predmeta ne sme več risati v zanki igre, ki se sproži v določenem intervalu. To lahko storite tako, da označite igralni objekt kot *mrtev*, ko se nekaj zgodi, na primer:
+
+```javascript
+// collision happened
+enemy.dead = true
+```
+
+Nato lahko odstranite *mrtve* objekte, preden ponovno narišete zaslon, na primer:
+
+```javascript
+gameObjects = gameObject.filter(go => !go.dead);
+```
+
+## Kako izstrelimo laser
+
+Izstrelitev laserja pomeni odziv na dogodek pritiska tipke in ustvarjanje objekta, ki se premika v določeni smeri. Zato moramo izvesti naslednje korake:
+
+1. **Ustvarite objekt laserja**: iz vrha ladje junaka, ki se ob ustvarjanju začne premikati navzgor proti vrhu zaslona.
+2. **Povežite kodo z dogodkom pritiska tipke**: izberemo tipko na tipkovnici, ki predstavlja streljanje laserja.
+3. **Ustvarite igralni objekt, ki izgleda kot laser**, ko je tipka pritisnjena.
+
+## Časovna omejitev za laser
+
+Laser se mora sprožiti vsakič, ko pritisnete tipko, na primer *preslednico*. Da preprečimo, da bi igra v kratkem času ustvarila preveč laserjev, moramo to popraviti. Popravek izvedemo z implementacijo tako imenovane *časovne omejitve*, časovnika, ki zagotavlja, da se laser lahko sproži le v določenih intervalih. To lahko implementirate na naslednji način:
+
+```javascript
+class Cooldown {
+  constructor(time) {
+    this.cool = false;
+    setTimeout(() => {
+      this.cool = true;
+    }, time)
+  }
+}
+
+class Weapon {
+  constructor {
+  }
+  fire() {
+    if (!this.cooldown || this.cooldown.cool) {
+      // produce a laser
+      this.cooldown = new Cooldown(500);
+    } else {
+      // do nothing - it hasn't cooled down yet.
+    }
+  }
+}
+```
+
+✅ Oglejte si lekcijo 1 v seriji vesoljske igre, da se spomnite, kako delujejo *časovne omejitve*.
+
+## Kaj bomo zgradili
+
+Vzemite obstoječo kodo (ki ste jo morali očistiti in preoblikovati) iz prejšnje lekcije in jo razširite. Lahko začnete s kodo iz drugega dela ali uporabite kodo iz [3. dela - začetna koda](../../../../../../../../../your-work).
+
+> nasvet: laser, s katerim boste delali, je že v vaši mapi z viri in je referenciran v vaši kodi
+
+- **Dodajte zaznavanje trkov**, ko laser trči z nečim, naj veljajo naslednja pravila:
+   1. **Laser zadene sovražnika**: sovražnik umre, če ga zadene laser
+   2. **Laser zadene zgornji del zaslona**: laser se uniči, če zadene zgornji del zaslona
+   3. **Trk sovražnika in junaka**: sovražnik in junak se uničita, če trčita drug v drugega
+   4. **Sovražnik zadene spodnji del zaslona**: sovražnik in junak se uničita, če sovražnik doseže spodnji del zaslona
+
+## Priporočeni koraki
+
+Poiščite datoteke, ki so bile ustvarjene za vas v podmapi `your-work`. Vsebujejo naslednje:
+
+```bash
+-| assets
+  -| enemyShip.png
+  -| player.png
+  -| laserRed.png
+-| index.html
+-| app.js
+-| package.json
+```
+
+Svoj projekt začnete v mapi `your_work` z vnosom:
+
+```bash
+cd your-work
+npm start
+```
+
+Zgornji ukaz bo zagnal HTTP strežnik na naslovu `http://localhost:5000`. Odprite brskalnik in vnesite ta naslov. Trenutno bi morali videti junaka in vse sovražnike, vendar se še nič ne premika :).
+
+### Dodajte kodo
+
+1. **Nastavite pravokotno predstavitev svojega igralnega objekta za obravnavo trkov**. Spodnja koda omogoča pridobitev pravokotne predstavitve `GameObject`. Uredite svoj razred GameObject, da ga razširite:
+
+    ```javascript
+    rectFromGameObject() {
+        return {
+          top: this.y,
+          left: this.x,
+          bottom: this.y + this.height,
+          right: this.x + this.width,
+        };
+      }
+    ```
+
+2. **Dodajte kodo za preverjanje trkov**. To bo nova funkcija, ki preverja, ali se dva pravokotnika prekrivata:
+
+    ```javascript
+    function intersectRect(r1, r2) {
+      return !(
+        r2.left > r1.right ||
+        r2.right < r1.left ||
+        r2.top > r1.bottom ||
+        r2.bottom < r1.top
+      );
+    }
+    ```
+
+3. **Dodajte možnost streljanja laserja**
+   1. **Dodajte sporočilo za dogodek pritiska tipke**. Tipka *preslednica* naj ustvari laser tik nad ladjo junaka. Dodajte tri konstante v objekt Messages:
+
+       ```javascript
+        KEY_EVENT_SPACE: "KEY_EVENT_SPACE",
+        COLLISION_ENEMY_LASER: "COLLISION_ENEMY_LASER",
+        COLLISION_ENEMY_HERO: "COLLISION_ENEMY_HERO",
+       ```
+
+   1. **Obravnavajte tipko preslednica**. Uredite funkcijo `window.addEventListener` za dogodek `keyup`, da obravnava preslednico:
+
+      ```javascript
+        } else if(evt.keyCode === 32) {
+          eventEmitter.emit(Messages.KEY_EVENT_SPACE);
+        }
+      ```
+
+    1. **Dodajte poslušalce dogodkov**. Uredite funkcijo `initGame()`, da zagotovite, da junak lahko strelja, ko je pritisnjena preslednica:
+
+       ```javascript
+       eventEmitter.on(Messages.KEY_EVENT_SPACE, () => {
+        if (hero.canFire()) {
+          hero.fire();
+        }
+       ```
+
+       in dodajte novo funkcijo `eventEmitter.on()`, da zagotovite vedenje, ko sovražnik trči z laserjem:
+
+          ```javascript
+          eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => {
+            first.dead = true;
+            second.dead = true;
+          })
+          ```
+
+   1. **Premikajte objekt**, zagotovite, da se laser postopoma premika proti vrhu zaslona. Ustvarili boste nov razred Laser, ki razširja `GameObject`, kot ste to storili prej: 
+   
+      ```javascript
+        class Laser extends GameObject {
+        constructor(x, y) {
+          super(x,y);
+          (this.width = 9), (this.height = 33);
+          this.type = 'Laser';
+          this.img = laserImg;
+          let id = setInterval(() => {
+            if (this.y > 0) {
+              this.y -= 15;
+            } else {
+              this.dead = true;
+              clearInterval(id);
+            }
+          }, 100)
+        }
+      }
+      ```
+
+   1. **Obravnavajte trke**, implementirajte pravila trkov za laser. Dodajte funkcijo `updateGameObjects()`, ki preverja trke med objekti:
+
+      ```javascript
+      function updateGameObjects() {
+        const enemies = gameObjects.filter(go => go.type === 'Enemy');
+        const lasers = gameObjects.filter((go) => go.type === "Laser");
+      // laser hit something
+        lasers.forEach((l) => {
+          enemies.forEach((m) => {
+            if (intersectRect(l.rectFromGameObject(), m.rectFromGameObject())) {
+            eventEmitter.emit(Messages.COLLISION_ENEMY_LASER, {
+              first: l,
+              second: m,
+            });
+          }
+         });
+      });
+
+        gameObjects = gameObjects.filter(go => !go.dead);
+      }  
+      ```
+
+      Poskrbite, da dodate `updateGameObjects()` v svojo zanko igre v `window.onload`.
+
+   4. **Implementirajte časovno omejitev** za laser, da se lahko sproži le v določenih intervalih.
+
+      Na koncu uredite razred Hero, da omogočite časovno omejitev:
+
+       ```javascript
+      class Hero extends GameObject {
+        constructor(x, y) {
+          super(x, y);
+          (this.width = 99), (this.height = 75);
+          this.type = "Hero";
+          this.speed = { x: 0, y: 0 };
+          this.cooldown = 0;
+        }
+        fire() {
+          gameObjects.push(new Laser(this.x + 45, this.y - 10));
+          this.cooldown = 500;
+    
+          let id = setInterval(() => {
+            if (this.cooldown > 0) {
+              this.cooldown -= 100;
+            } else {
+              clearInterval(id);
+            }
+          }, 200);
+        }
+        canFire() {
+          return this.cooldown === 0;
+        }
+      }
+      ```
+
+Na tej točki ima vaša igra nekaj funkcionalnosti! Premikate se lahko s puščičnimi tipkami, streljate laser s preslednico, in sovražniki izginejo, ko jih zadete. Odlično opravljeno!
+
+---
+
+## 🚀 Izziv
+
+Dodajte eksplozijo! Oglejte si vire igre v [repozitoriju Space Art](../../../../6-space-game/solution/spaceArt/readme.txt) in poskusite dodati eksplozijo, ko laser zadene tujca.
+
+## Zaključni kviz
+
+[Zaključni kviz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/36)
+
+## Pregled in samostojno učenje
+
+Eksperimentirajte z intervali v svoji igri do zdaj. Kaj se zgodi, ko jih spremenite? Preberite več o [časovnih dogodkih v JavaScriptu](https://www.freecodecamp.org/news/javascript-timing-events-settimeout-and-setinterval/).
+
+## Naloga
+
+[Raziščite trke](assignment.md)
+
+---
+
+**Omejitev odgovornosti**:  
+Ta dokument je bil preveden z uporabo storitve za prevajanje z umetno inteligenco [Co-op Translator](https://github.com/Azure/co-op-translator). Čeprav si prizadevamo za natančnost, vas prosimo, da upoštevate, da lahko avtomatizirani prevodi vsebujejo napake ali netočnosti. Izvirni dokument v njegovem maternem jeziku je treba obravnavati kot avtoritativni vir. Za ključne informacije priporočamo profesionalni človeški prevod. Ne prevzemamo odgovornosti za morebitna nesporazume ali napačne razlage, ki bi nastale zaradi uporabe tega prevoda.
\ No newline at end of file
diff --git a/translations/sl/6-space-game/4-collision-detection/assignment.md b/translations/sl/6-space-game/4-collision-detection/assignment.md
new file mode 100644
index 00000000..22f42f45
--- /dev/null
+++ b/translations/sl/6-space-game/4-collision-detection/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "8a0a097b45e7c75a611e2795e4013f16",
+  "translation_date": "2025-08-27T22:30:46+00:00",
+  "source_file": "6-space-game/4-collision-detection/assignment.md",
+  "language_code": "sl"
+}
+-->
+# Raziskovanje trkov
+
+## Navodila
+
+Da bi bolje razumeli, kako delujejo trki, ustvarite zelo majhno igro z nekaj elementi, ki trčijo. Naredite jih premične s pritiskom na tipke ali s klikom miške, in poskrbite, da se nekaj zgodi enemu od elementov, ko pride do trka. To bi lahko bilo nekaj, kot na primer meteor, ki zadene Zemljo, ali avtomobilčki na odbijačih. Bodite ustvarjalni!
+
+## Merila
+
+| Merilo  | Odlično                                                                                                                   | Zadostno                       | Potrebno izboljšanje |
+| -------- | ------------------------------------------------------------------------------------------------------------------------ | ------------------------------ | --------------------- |
+|          | Ustvarjen je popoln delujoč vzorec kode, z elementi narisanimi na platno, osnovnimi trki in reakcijami                   | Koda je na nek način nepopolna | Koda ne deluje        |
+
+---
+
+**Omejitev odgovornosti**:  
+Ta dokument je bil preveden z uporabo storitve za prevajanje z umetno inteligenco [Co-op Translator](https://github.com/Azure/co-op-translator). Čeprav si prizadevamo za natančnost, vas prosimo, da upoštevate, da lahko avtomatizirani prevodi vsebujejo napake ali netočnosti. Izvirni dokument v njegovem maternem jeziku je treba obravnavati kot avtoritativni vir. Za ključne informacije priporočamo profesionalni človeški prevod. Ne prevzemamo odgovornosti za morebitna nesporazumevanja ali napačne razlage, ki bi nastale zaradi uporabe tega prevoda.
\ No newline at end of file
diff --git a/translations/sl/6-space-game/4-collision-detection/solution/README.md b/translations/sl/6-space-game/4-collision-detection/solution/README.md
new file mode 100644
index 00000000..8aea248b
--- /dev/null
+++ b/translations/sl/6-space-game/4-collision-detection/solution/README.md
@@ -0,0 +1,15 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "068cbb9b3c10a96d503f6cdd6c9ace8c",
+  "translation_date": "2025-08-27T22:31:02+00:00",
+  "source_file": "6-space-game/4-collision-detection/solution/README.md",
+  "language_code": "sl"
+}
+-->
+To je označevalnik, namenoma pustljen prazen
+
+---
+
+**Omejitev odgovornosti**:  
+Ta dokument je bil preveden z uporabo storitve za prevajanje z umetno inteligenco [Co-op Translator](https://github.com/Azure/co-op-translator). Čeprav si prizadevamo za natančnost, vas prosimo, da upoštevate, da lahko avtomatizirani prevodi vsebujejo napake ali netočnosti. Izvirni dokument v njegovem maternem jeziku je treba obravnavati kot avtoritativni vir. Za ključne informacije priporočamo profesionalni človeški prevod. Ne prevzemamo odgovornosti za morebitna nesporazume ali napačne razlage, ki bi nastale zaradi uporabe tega prevoda.
\ No newline at end of file
diff --git a/translations/sl/6-space-game/4-collision-detection/your-work/README.md b/translations/sl/6-space-game/4-collision-detection/your-work/README.md
new file mode 100644
index 00000000..fd48e090
--- /dev/null
+++ b/translations/sl/6-space-game/4-collision-detection/your-work/README.md
@@ -0,0 +1,15 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "068cbb9b3c10a96d503f6cdd6c9ace8c",
+  "translation_date": "2025-08-27T22:31:15+00:00",
+  "source_file": "6-space-game/4-collision-detection/your-work/README.md",
+  "language_code": "sl"
+}
+-->
+To je označevalnik, namenoma pustljen prazen
+
+---
+
+**Omejitev odgovornosti**:  
+Ta dokument je bil preveden z uporabo storitve za prevajanje z umetno inteligenco [Co-op Translator](https://github.com/Azure/co-op-translator). Čeprav si prizadevamo za natančnost, vas prosimo, da upoštevate, da lahko avtomatizirani prevodi vsebujejo napake ali netočnosti. Izvirni dokument v njegovem maternem jeziku je treba obravnavati kot avtoritativni vir. Za ključne informacije priporočamo profesionalni človeški prevod. Ne prevzemamo odgovornosti za morebitne nesporazume ali napačne razlage, ki bi nastale zaradi uporabe tega prevoda.
\ No newline at end of file
diff --git a/translations/sl/6-space-game/5-keeping-score/README.md b/translations/sl/6-space-game/5-keeping-score/README.md
new file mode 100644
index 00000000..e4acbdb4
--- /dev/null
+++ b/translations/sl/6-space-game/5-keeping-score/README.md
@@ -0,0 +1,203 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "4e8250db84b027c9ff816b4e4c093457",
+  "translation_date": "2025-08-27T22:28:01+00:00",
+  "source_file": "6-space-game/5-keeping-score/README.md",
+  "language_code": "sl"
+}
+-->
+# Zgradite vesoljsko igro, 5. del: Točkovanje in življenja
+
+## Predhodni kviz
+
+[Predhodni kviz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/37)
+
+V tej lekciji se boste naučili, kako dodati točkovanje v igro in izračunati življenja.
+
+## Risanje besedila na zaslon
+
+Da bi lahko prikazali rezultat igre na zaslonu, morate vedeti, kako postaviti besedilo na zaslon. Odgovor je uporaba metode `fillText()` na objektu canvas. Prav tako lahko nadzorujete druge vidike, kot so izbira pisave, barva besedila in celo poravnava (levo, desno, sredina). Spodaj je nekaj kode, ki riše besedilo na zaslon.
+
+```javascript
+ctx.font = "30px Arial";
+ctx.fillStyle = "red";
+ctx.textAlign = "right";
+ctx.fillText("show this on the screen", 0, 0);
+```
+
+✅ Preberite več o [dodajanju besedila na canvas](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_text) in poskrbite, da bo vaše videti še bolj privlačno!
+
+## Življenje kot koncept v igri
+
+Koncept življenja v igri je zgolj številka. V kontekstu vesoljske igre je običajno dodeliti določeno število življenj, ki se zmanjšujejo eno za drugim, ko vaša ladja utrpi škodo. Lepo je, če lahko to prikažete grafično, na primer z mini ladjami ali srčki, namesto s številko.
+
+## Kaj bomo zgradili
+
+Dodajmo naslednje elemente v vašo igro:
+
+- **Rezultat igre**: Za vsako uničeno sovražno ladjo naj junak prejme nekaj točk, predlagamo 100 točk na ladjo. Rezultat igre naj bo prikazan v spodnjem levem kotu.
+- **Življenje**: Vaša ladja ima tri življenja. Izgubite življenje vsakič, ko sovražna ladja trči v vas. Število življenj naj bo prikazano v spodnjem desnem kotu in naj bo sestavljeno iz naslednje grafike ![slika življenja](../../../../translated_images/life.6fb9f50d53ee0413cd91aa411f7c296e10a1a6de5c4a4197c718b49bf7d63ebf.sl.png).
+
+## Priporočeni koraki
+
+Poiščite datoteke, ki so bile ustvarjene za vas v podmapi `your-work`. Vsebujejo naslednje:
+
+```bash
+-| assets
+  -| enemyShip.png
+  -| player.png
+  -| laserRed.png
+-| index.html
+-| app.js
+-| package.json
+```
+
+Začnite svoj projekt v mapi `your_work` tako, da vnesete:
+
+```bash
+cd your-work
+npm start
+```
+
+Zgornji ukaz bo zagnal HTTP strežnik na naslovu `http://localhost:5000`. Odprite brskalnik in vnesite ta naslov. Trenutno bi moral prikazati junaka in vse sovražnike, ter ob pritisku na levo in desno puščico junak premika in lahko strelja sovražnike.
+
+### Dodajanje kode
+
+1. **Kopirajte potrebne vire** iz mape `solution/assets/` v mapo `your-work`; dodali boste datoteko `life.png`. Dodajte `lifeImg` v funkcijo window.onload:
+
+    ```javascript
+    lifeImg = await loadTexture("assets/life.png");
+    ```
+
+1. Dodajte `lifeImg` na seznam virov:
+
+    ```javascript
+    let heroImg,
+    ...
+    lifeImg,
+    ...
+    eventEmitter = new EventEmitter();
+    ```
+  
+2. **Dodajte spremenljivke**. Dodajte kodo, ki predstavlja vaš skupni rezultat (0) in preostala življenja (3), ter prikažite te vrednosti na zaslonu.
+
+3. **Razširite funkcijo `updateGameObjects()`**. Razširite funkcijo `updateGameObjects()`, da obravnava trke s sovražniki:
+
+    ```javascript
+    enemies.forEach(enemy => {
+        const heroRect = hero.rectFromGameObject();
+        if (intersectRect(heroRect, enemy.rectFromGameObject())) {
+          eventEmitter.emit(Messages.COLLISION_ENEMY_HERO, { enemy });
+        }
+      })
+    ```
+
+4. **Dodajte `življenje` in `točke`**. 
+   1. **Inicializirajte spremenljivke**. Pod `this.cooldown = 0` v razredu `Hero` nastavite življenje in točke:
+
+        ```javascript
+        this.life = 3;
+        this.points = 0;
+        ```
+
+   1. **Narišite spremenljivke na zaslon**. Prikažite te vrednosti na zaslonu:
+
+        ```javascript
+        function drawLife() {
+          // TODO, 35, 27
+          const START_POS = canvas.width - 180;
+          for(let i=0; i < hero.life; i++ ) {
+            ctx.drawImage(
+              lifeImg, 
+              START_POS + (45 * (i+1) ), 
+              canvas.height - 37);
+          }
+        }
+        
+        function drawPoints() {
+          ctx.font = "30px Arial";
+          ctx.fillStyle = "red";
+          ctx.textAlign = "left";
+          drawText("Points: " + hero.points, 10, canvas.height-20);
+        }
+        
+        function drawText(message, x, y) {
+          ctx.fillText(message, x, y);
+        }
+
+        ```
+
+   1. **Dodajte metode v zanko igre**. Poskrbite, da dodate te funkcije v funkcijo window.onload pod `updateGameObjects()`:
+
+        ```javascript
+        drawPoints();
+        drawLife();
+        ```
+
+1. **Implementirajte pravila igre**. Implementirajte naslednja pravila igre:
+
+   1. **Za vsak trk junaka in sovražnika** odštejte eno življenje.
+   
+      Razširite razred `Hero`, da izvedete to odštevanje:
+
+        ```javascript
+        decrementLife() {
+          this.life--;
+          if (this.life === 0) {
+            this.dead = true;
+          }
+        }
+        ```
+
+   2. **Za vsak laser, ki zadene sovražnika**, povečajte rezultat igre za 100 točk.
+
+      Razširite razred `Hero`, da izvedete to povečanje:
+    
+        ```javascript
+          incrementPoints() {
+            this.points += 100;
+          }
+        ```
+
+        Dodajte te funkcije v vaše sprožilce dogodkov trkov:
+
+        ```javascript
+        eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => {
+           first.dead = true;
+           second.dead = true;
+           hero.incrementPoints();
+        })
+
+        eventEmitter.on(Messages.COLLISION_ENEMY_HERO, (_, { enemy }) => {
+           enemy.dead = true;
+           hero.decrementLife();
+        });
+        ```
+
+✅ Raziskujte in odkrijte druge igre, ki so ustvarjene z uporabo JavaScript/Canvas. Kakšne so njihove skupne značilnosti?
+
+Ko zaključite delo, bi morali videti majhne ladje 'življenja' v spodnjem desnem kotu, točke v spodnjem levem kotu, ter opaziti, kako se število življenj zmanjšuje ob trkih s sovražniki in točke povečujejo ob streljanju sovražnikov. Odlično! Vaša igra je skoraj končana.
+
+---
+
+## 🚀 Izziv
+
+Vaša koda je skoraj končana. Ali lahko predvidite naslednje korake?
+
+## Zaključni kviz
+
+[Zaključni kviz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/38)
+
+## Pregled in samostojno učenje
+
+Raziskujte načine, kako lahko povečujete in zmanjšujete rezultate igre ter življenja. Obstajajo zanimivi igralni pogoni, kot je [PlayFab](https://playfab.com). Kako bi uporaba enega od teh izboljšala vašo igro?
+
+## Naloga
+
+[Zgradite igro s točkovanjem](assignment.md)
+
+---
+
+**Omejitev odgovornosti**:  
+Ta dokument je bil preveden z uporabo storitve za strojno prevajanje [Co-op Translator](https://github.com/Azure/co-op-translator). Čeprav si prizadevamo za natančnost, vas prosimo, da upoštevate, da lahko avtomatizirani prevodi vsebujejo napake ali netočnosti. Izvirni dokument v njegovem izvirnem jeziku je treba obravnavati kot avtoritativni vir. Za ključne informacije priporočamo strokovno človeško prevajanje. Ne prevzemamo odgovornosti za morebitna nesporazumevanja ali napačne razlage, ki izhajajo iz uporabe tega prevoda.
\ No newline at end of file
diff --git a/translations/sl/6-space-game/5-keeping-score/assignment.md b/translations/sl/6-space-game/5-keeping-score/assignment.md
new file mode 100644
index 00000000..d350895a
--- /dev/null
+++ b/translations/sl/6-space-game/5-keeping-score/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "81f292dbda01685b91735e0398dc0504",
+  "translation_date": "2025-08-27T22:28:32+00:00",
+  "source_file": "6-space-game/5-keeping-score/assignment.md",
+  "language_code": "sl"
+}
+-->
+# Ustvari igro z ocenjevanjem
+
+## Navodila
+
+Ustvari igro, kjer na kreativen način prikažeš življenje in točke. Predlog je, da prikažeš življenje kot srčke, točke pa kot veliko številko na spodnjem sredinskem delu zaslona. Oglej si [Brezplačne vire za igre](https://www.kenney.nl/)
+
+# Merila ocenjevanja
+
+| Merila   | Odlično                | Zadostno                    | Potrebne izboljšave        |
+| -------- | ---------------------- | --------------------------- | -------------------------- |
+|          | celotna igra je predstavljena | igra je delno predstavljena | delna igra vsebuje napake  |
+
+---
+
+**Omejitev odgovornosti**:  
+Ta dokument je bil preveden z uporabo storitve za prevajanje z umetno inteligenco [Co-op Translator](https://github.com/Azure/co-op-translator). Čeprav si prizadevamo za natančnost, vas prosimo, da upoštevate, da lahko avtomatizirani prevodi vsebujejo napake ali netočnosti. Izvirni dokument v njegovem maternem jeziku je treba obravnavati kot avtoritativni vir. Za ključne informacije priporočamo profesionalni človeški prevod. Ne prevzemamo odgovornosti za morebitna napačna razumevanja ali napačne interpretacije, ki bi nastale zaradi uporabe tega prevoda.
\ No newline at end of file
diff --git a/translations/sl/6-space-game/5-keeping-score/solution/README.md b/translations/sl/6-space-game/5-keeping-score/solution/README.md
new file mode 100644
index 00000000..cddabe2a
--- /dev/null
+++ b/translations/sl/6-space-game/5-keeping-score/solution/README.md
@@ -0,0 +1,15 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "068cbb9b3c10a96d503f6cdd6c9ace8c",
+  "translation_date": "2025-08-27T22:28:47+00:00",
+  "source_file": "6-space-game/5-keeping-score/solution/README.md",
+  "language_code": "sl"
+}
+-->
+To je označevalnik, namenoma pustljen prazen
+
+---
+
+**Omejitev odgovornosti**:  
+Ta dokument je bil preveden z uporabo storitve za strojno prevajanje [Co-op Translator](https://github.com/Azure/co-op-translator). Čeprav si prizadevamo za natančnost, vas prosimo, da se zavedate, da lahko avtomatizirani prevodi vsebujejo napake ali netočnosti. Izvirni dokument v njegovem izvirnem jeziku je treba obravnavati kot avtoritativni vir. Za ključne informacije priporočamo strokovno človeško prevajanje. Ne prevzemamo odgovornosti za morebitna nesporazumevanja ali napačne razlage, ki izhajajo iz uporabe tega prevoda.
\ No newline at end of file
diff --git a/translations/sl/6-space-game/5-keeping-score/your-work/README.md b/translations/sl/6-space-game/5-keeping-score/your-work/README.md
new file mode 100644
index 00000000..f07fe77a
--- /dev/null
+++ b/translations/sl/6-space-game/5-keeping-score/your-work/README.md
@@ -0,0 +1,15 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "068cbb9b3c10a96d503f6cdd6c9ace8c",
+  "translation_date": "2025-08-27T22:29:00+00:00",
+  "source_file": "6-space-game/5-keeping-score/your-work/README.md",
+  "language_code": "sl"
+}
+-->
+To je označevalnik, namenoma pustljen prazen
+
+---
+
+**Omejitev odgovornosti**:  
+Ta dokument je bil preveden z uporabo storitve za prevajanje z umetno inteligenco [Co-op Translator](https://github.com/Azure/co-op-translator). Čeprav si prizadevamo za natančnost, vas prosimo, da upoštevate, da lahko avtomatizirani prevodi vsebujejo napake ali netočnosti. Izvirni dokument v njegovem maternem jeziku je treba obravnavati kot avtoritativni vir. Za ključne informacije priporočamo profesionalni človeški prevod. Ne prevzemamo odgovornosti za morebitna nesporazumevanja ali napačne razlage, ki bi nastale zaradi uporabe tega prevoda.
\ No newline at end of file
diff --git a/translations/sl/6-space-game/6-end-condition/README.md b/translations/sl/6-space-game/6-end-condition/README.md
new file mode 100644
index 00000000..38ba5616
--- /dev/null
+++ b/translations/sl/6-space-game/6-end-condition/README.md
@@ -0,0 +1,236 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "01336cddd638242e99b133614111ea40",
+  "translation_date": "2025-08-27T22:33:20+00:00",
+  "source_file": "6-space-game/6-end-condition/README.md",
+  "language_code": "sl"
+}
+-->
+# Zgradite vesoljsko igro, 6. del: Konec in ponovni začetek
+
+## Predhodni kviz
+
+[Predhodni kviz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/39)
+
+Obstajajo različni načini, kako izraziti *konec igre*. Kot ustvarjalec igre se odločite, zakaj se igra konča. Tukaj je nekaj razlogov, če predpostavimo, da govorimo o vesoljski igri, ki ste jo do zdaj gradili:
+
+- **Uničenih je `N` sovražnih ladij**: Pogosto je v igrah, ki so razdeljene na različne nivoje, potrebno uničiti `N` sovražnih ladij, da dokončate nivo.
+- **Vaša ladja je uničena**: Obstajajo igre, kjer izgubite, če je vaša ladja uničena. Pogost pristop je tudi koncept življenj. Vsakič, ko je vaša ladja uničena, izgubite eno življenje. Ko so vsa življenja izgubljena, izgubite igro.
+- **Zbrali ste `N` točk**: Pogost pogoj za konec igre je zbiranje točk. Kako pridobite točke, je odvisno od vas, vendar je pogosto, da točke dodelite različnim dejavnostim, kot je uničenje sovražne ladje ali zbiranje predmetov, ki jih sovražniki *izpustijo*, ko so uničeni.
+- **Dokončanje nivoja**: To lahko vključuje več pogojev, kot so uničenje `X` sovražnih ladij, zbiranje `Y` točk ali morda zbiranje določenega predmeta.
+
+## Ponovni začetek
+
+Če ljudje uživajo v vaši igri, bodo verjetno želeli igrati znova. Ko se igra konča, ne glede na razlog, bi morali ponuditi možnost za ponovni začetek.
+
+✅ Razmislite, pod kakšnimi pogoji se igra konča in kako vas igra pozove k ponovnemu začetku.
+
+## Kaj boste zgradili
+
+Dodali boste naslednja pravila v svojo igro:
+
+1. **Zmagovanje igre**. Ko so vse sovražne ladje uničene, zmagate. Poleg tega prikažite sporočilo o zmagi.
+1. **Ponovni začetek**. Ko izgubite vsa življenja ali zmagate v igri, bi morali ponuditi možnost za ponovni začetek. Ne pozabite! Ponovno boste morali inicializirati igro, pri čemer se mora prejšnje stanje igre izbrisati.
+
+## Priporočeni koraki
+
+Poiščite datoteke, ki so bile ustvarjene za vas v podmapi `your-work`. Vsebujejo naslednje:
+
+```bash
+-| assets
+  -| enemyShip.png
+  -| player.png
+  -| laserRed.png
+  -| life.png
+-| index.html
+-| app.js
+-| package.json
+```
+
+Svoj projekt začnete v mapi `your_work` z vnosom:
+
+```bash
+cd your-work
+npm start
+```
+
+Zgornji ukaz bo zagnal HTTP strežnik na naslovu `http://localhost:5000`. Odprite brskalnik in vnesite ta naslov. Vaša igra bi morala biti v stanju, ki ga je mogoče igrati.
+
+> nasvet: da se izognete opozorilom v Visual Studio Code, uredite funkcijo `window.onload`, da pokliče `gameLoopId` takšno, kot je (brez `let`), in deklarirajte `gameLoopId` na vrhu datoteke, ločeno: `let gameLoopId;`
+
+### Dodajte kodo
+
+1. **Spremljajte pogoje za konec igre**. Dodajte kodo, ki spremlja število sovražnikov ali če je junakova ladja uničena, z dodajanjem teh dveh funkcij:
+
+    ```javascript
+    function isHeroDead() {
+      return hero.life <= 0;
+    }
+
+    function isEnemiesDead() {
+      const enemies = gameObjects.filter((go) => go.type === "Enemy" && !go.dead);
+      return enemies.length === 0;
+    }
+    ```
+
+1. **Dodajte logiko obdelovalcem sporočil**. Uredite `eventEmitter`, da obravnava te pogoje:
+
+    ```javascript
+    eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => {
+        first.dead = true;
+        second.dead = true;
+        hero.incrementPoints();
+
+        if (isEnemiesDead()) {
+          eventEmitter.emit(Messages.GAME_END_WIN);
+        }
+    });
+
+    eventEmitter.on(Messages.COLLISION_ENEMY_HERO, (_, { enemy }) => {
+        enemy.dead = true;
+        hero.decrementLife();
+        if (isHeroDead())  {
+          eventEmitter.emit(Messages.GAME_END_LOSS);
+          return; // loss before victory
+        }
+        if (isEnemiesDead()) {
+          eventEmitter.emit(Messages.GAME_END_WIN);
+        }
+    });
+    
+    eventEmitter.on(Messages.GAME_END_WIN, () => {
+        endGame(true);
+    });
+      
+    eventEmitter.on(Messages.GAME_END_LOSS, () => {
+      endGame(false);
+    });
+    ```
+
+1. **Dodajte nove vrste sporočil**. Dodajte ta sporočila v objekt constants:
+
+    ```javascript
+    GAME_END_LOSS: "GAME_END_LOSS",
+    GAME_END_WIN: "GAME_END_WIN",
+    ```
+
+2. **Dodajte kodo za ponovni začetek**. Dodajte kodo, ki omogoča ponovni začetek igre ob pritisku izbrane tipke.
+
+   1. **Poslušajte pritisk tipke `Enter`**. Uredite `eventListener` okna, da posluša ta pritisk:
+
+    ```javascript
+     else if(evt.key === "Enter") {
+        eventEmitter.emit(Messages.KEY_EVENT_ENTER);
+      }
+    ```
+
+   1. **Dodajte sporočilo za ponovni začetek**. Dodajte to sporočilo v constants Messages:
+
+        ```javascript
+        KEY_EVENT_ENTER: "KEY_EVENT_ENTER",
+        ```
+
+1. **Implementirajte pravila igre**. Implementirajte naslednja pravila igre:
+
+   1. **Pogoj za zmago igralca**. Ko so vse sovražne ladje uničene, prikažite sporočilo o zmagi.
+
+      1. Najprej ustvarite funkcijo `displayMessage()`:
+
+        ```javascript
+        function displayMessage(message, color = "red") {
+          ctx.font = "30px Arial";
+          ctx.fillStyle = color;
+          ctx.textAlign = "center";
+          ctx.fillText(message, canvas.width / 2, canvas.height / 2);
+        }
+        ```
+
+      1. Ustvarite funkcijo `endGame()`:
+
+        ```javascript
+        function endGame(win) {
+          clearInterval(gameLoopId);
+        
+          // set a delay so we are sure any paints have finished
+          setTimeout(() => {
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            ctx.fillStyle = "black";
+            ctx.fillRect(0, 0, canvas.width, canvas.height);
+            if (win) {
+              displayMessage(
+                "Victory!!! Pew Pew... - Press [Enter] to start a new game Captain Pew Pew",
+                "green"
+              );
+            } else {
+              displayMessage(
+                "You died !!! Press [Enter] to start a new game Captain Pew Pew"
+              );
+            }
+          }, 200)  
+        }
+        ```
+
+   1. **Logika za ponovni začetek**. Ko so vsa življenja izgubljena ali igralec zmaga, prikažite, da je mogoče igro ponovno začeti. Poleg tega ponovno zaženite igro, ko pritisnete tipko za ponovni začetek (lahko sami določite, katera tipka bo dodeljena za ponovni začetek).
+
+      1. Ustvarite funkcijo `resetGame()`:
+
+        ```javascript
+        function resetGame() {
+          if (gameLoopId) {
+            clearInterval(gameLoopId);
+            eventEmitter.clear();
+            initGame();
+            gameLoopId = setInterval(() => {
+              ctx.clearRect(0, 0, canvas.width, canvas.height);
+              ctx.fillStyle = "black";
+              ctx.fillRect(0, 0, canvas.width, canvas.height);
+              drawPoints();
+              drawLife();
+              updateGameObjects();
+              drawGameObjects(ctx);
+            }, 100);
+          }
+        }
+        ```
+
+     1. Dodajte klic na `eventEmitter` za ponovni začetek igre v `initGame()`:
+
+        ```javascript
+        eventEmitter.on(Messages.KEY_EVENT_ENTER, () => {
+          resetGame();
+        });
+        ```
+
+     1. Dodajte funkcijo `clear()` v EventEmitter:
+
+        ```javascript
+        clear() {
+          this.listeners = {};
+        }
+        ```
+
+👽 💥 🚀 Čestitke, kapitan! Vaša igra je končana! Odlično opravljeno! 🚀 💥 👽
+
+---
+
+## 🚀 Izziv
+
+Dodajte zvok! Ali lahko dodate zvok, da izboljšate igranje, morda ob zadetku z laserjem, smrti junaka ali zmagi? Oglejte si ta [sandbox](https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_audio_play), da se naučite, kako predvajati zvok z uporabo JavaScripta.
+
+## Zaključni kviz
+
+[Zaključni kviz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/40)
+
+## Pregled in samostojno učenje
+
+Vaša naloga je ustvariti novo vzorčno igro, zato raziščite nekaj zanimivih iger, da vidite, kakšno igro bi lahko ustvarili.
+
+## Naloga
+
+[Zgradite vzorčno igro](assignment.md)
+
+---
+
+**Omejitev odgovornosti**:  
+Ta dokument je bil preveden z uporabo storitve za prevajanje z umetno inteligenco [Co-op Translator](https://github.com/Azure/co-op-translator). Čeprav si prizadevamo za natančnost, vas prosimo, da upoštevate, da lahko avtomatizirani prevodi vsebujejo napake ali netočnosti. Izvirni dokument v njegovem maternem jeziku je treba obravnavati kot avtoritativni vir. Za ključne informacije priporočamo profesionalni človeški prevod. Ne prevzemamo odgovornosti za morebitna napačna razumevanja ali napačne interpretacije, ki bi nastale zaradi uporabe tega prevoda.
\ No newline at end of file
diff --git a/translations/sl/6-space-game/6-end-condition/assignment.md b/translations/sl/6-space-game/6-end-condition/assignment.md
new file mode 100644
index 00000000..3c19b6a0
--- /dev/null
+++ b/translations/sl/6-space-game/6-end-condition/assignment.md
@@ -0,0 +1,33 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "24201cf428c7edba1ccec2a78a0dd8f8",
+  "translation_date": "2025-08-27T22:33:53+00:00",
+  "source_file": "6-space-game/6-end-condition/assignment.md",
+  "language_code": "sl"
+}
+-->
+# Ustvari vzorčno igro
+
+## Navodila
+
+Poskusi ustvariti majhno igro, kjer vadiš različne končne pogoje. Spreminjaj med doseganjem določene količine točk, junak izgubi vse življenja ali so vsi pošasti poraženi. Ustvari nekaj preprostega, na primer pustolovsko igro, ki temelji na konzoli. Uporabi spodnji potek igre kot navdih:
+
+```
+Hero> Strikes with broadsword - orc takes 3p damage
+Orc> Hits with club - hero takes 2p damage
+Hero> Kicks - orc takes 1p damage
+Game> Orc is defeated - Hero collects 2 coins
+Game> ****No more monsters, you have conquered the evil fortress****
+```
+
+## Merila
+
+| Merilo  | Vrhunsko               | Zadostno                   | Potrebno izboljšanje       |
+| -------- | ---------------------- | --------------------------- | -------------------------- |
+|          | celotna igra je predstavljena | igra je delno predstavljena | delna igra vsebuje napake |
+
+---
+
+**Omejitev odgovornosti**:  
+Ta dokument je bil preveden z uporabo storitve za prevajanje z umetno inteligenco [Co-op Translator](https://github.com/Azure/co-op-translator). Čeprav si prizadevamo za natančnost, vas prosimo, da upoštevate, da lahko avtomatizirani prevodi vsebujejo napake ali netočnosti. Izvirni dokument v njegovem maternem jeziku je treba obravnavati kot avtoritativni vir. Za ključne informacije priporočamo profesionalni človeški prevod. Ne prevzemamo odgovornosti za morebitna nesporazumevanja ali napačne razlage, ki bi nastale zaradi uporabe tega prevoda.
\ No newline at end of file
diff --git a/translations/sl/6-space-game/6-end-condition/solution/README.md b/translations/sl/6-space-game/6-end-condition/solution/README.md
new file mode 100644
index 00000000..8837583f
--- /dev/null
+++ b/translations/sl/6-space-game/6-end-condition/solution/README.md
@@ -0,0 +1,15 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "068cbb9b3c10a96d503f6cdd6c9ace8c",
+  "translation_date": "2025-08-27T22:34:08+00:00",
+  "source_file": "6-space-game/6-end-condition/solution/README.md",
+  "language_code": "sl"
+}
+-->
+To je označevalnik, namenoma pustljen prazen
+
+---
+
+**Omejitev odgovornosti**:  
+Ta dokument je bil preveden z uporabo storitve AI za prevajanje [Co-op Translator](https://github.com/Azure/co-op-translator). Čeprav si prizadevamo za natančnost, vas prosimo, da upoštevate, da lahko avtomatizirani prevodi vsebujejo napake ali netočnosti. Izvirni dokument v njegovem maternem jeziku je treba obravnavati kot avtoritativni vir. Za ključne informacije priporočamo profesionalni človeški prevod. Ne prevzemamo odgovornosti za morebitna napačna razumevanja ali napačne interpretacije, ki bi nastale zaradi uporabe tega prevoda.
\ No newline at end of file
diff --git a/translations/sl/6-space-game/6-end-condition/your-work/README.md b/translations/sl/6-space-game/6-end-condition/your-work/README.md
new file mode 100644
index 00000000..649b69b9
--- /dev/null
+++ b/translations/sl/6-space-game/6-end-condition/your-work/README.md
@@ -0,0 +1,15 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "068cbb9b3c10a96d503f6cdd6c9ace8c",
+  "translation_date": "2025-08-27T22:34:20+00:00",
+  "source_file": "6-space-game/6-end-condition/your-work/README.md",
+  "language_code": "sl"
+}
+-->
+To je rezervirano mesto, namenoma pusteno prazno
+
+---
+
+**Omejitev odgovornosti**:  
+Ta dokument je bil preveden z uporabo storitve za strojno prevajanje [Co-op Translator](https://github.com/Azure/co-op-translator). Čeprav si prizadevamo za natančnost, vas prosimo, da upoštevate, da lahko avtomatizirani prevodi vsebujejo napake ali netočnosti. Izvirni dokument v njegovem izvirnem jeziku je treba obravnavati kot avtoritativni vir. Za ključne informacije priporočamo strokovno človeško prevajanje. Ne prevzemamo odgovornosti za morebitna nesporazumevanja ali napačne razlage, ki izhajajo iz uporabe tega prevoda.
\ No newline at end of file
diff --git a/translations/sl/6-space-game/README.md b/translations/sl/6-space-game/README.md
new file mode 100644
index 00000000..9e1f3fc7
--- /dev/null
+++ b/translations/sl/6-space-game/README.md
@@ -0,0 +1,45 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "c40a698395ee5102715f7880bba3f2e7",
+  "translation_date": "2025-08-27T22:25:32+00:00",
+  "source_file": "6-space-game/README.md",
+  "language_code": "sl"
+}
+-->
+# Ustvari vesoljsko igro
+
+Vesoljska igra za učenje naprednejših osnov JavaScripta
+
+V tej lekciji se boste naučili, kako ustvariti svojo vesoljsko igro. Če ste kdaj igrali igro "Space Invaders", ima ta igra podobno idejo: upravljati vesoljsko ladjo in streljati na pošasti, ki prihajajo od zgoraj. Tukaj je prikaz, kako bo končana igra videti:
+
+![Končana igra](../../../6-space-game/images/pewpew.gif)
+
+V teh šestih lekcijah se boste naučili naslednje:
+
+- **Interakcija** z elementom Canvas za risanje na zaslon
+- **Razumevanje** kartezičnega koordinatnega sistema
+- **Učenje** vzorca Pub-Sub za ustvarjanje zvočne arhitekture igre, ki je lažja za vzdrževanje in razširitev
+- **Uporaba** Async/Await za nalaganje virov igre
+- **Obravnava** dogodkov s tipkovnico
+
+## Pregled
+
+- Teorija
+   - [Uvod v ustvarjanje iger z JavaScriptom](1-introduction/README.md)
+- Praksa
+   - [Risanje na platno](2-drawing-to-canvas/README.md)
+   - [Premikanje elementov po zaslonu](3-moving-elements-around/README.md)
+   - [Zaznavanje trkov](4-collision-detection/README.md)
+   - [Vodenje rezultata](5-keeping-score/README.md)
+   - [Zaključek in ponovni zagon igre](6-end-condition/README.md)
+
+## Zasluge
+
+Viri, uporabljeni za to, so iz https://www.kenney.nl/.  
+Če vas zanima ustvarjanje iger, so to resnično odlični viri, veliko jih je brezplačnih, nekateri pa plačljivi.
+
+---
+
+**Omejitev odgovornosti**:  
+Ta dokument je bil preveden z uporabo storitve za prevajanje z umetno inteligenco [Co-op Translator](https://github.com/Azure/co-op-translator). Čeprav si prizadevamo za natančnost, vas prosimo, da upoštevate, da lahko avtomatizirani prevodi vsebujejo napake ali netočnosti. Izvirni dokument v njegovem izvirnem jeziku je treba obravnavati kot avtoritativni vir. Za ključne informacije priporočamo profesionalni človeški prevod. Ne prevzemamo odgovornosti za morebitna napačna razumevanja ali napačne interpretacije, ki bi nastale zaradi uporabe tega prevoda.
\ No newline at end of file
diff --git a/translations/sl/6-space-game/solution/README.md b/translations/sl/6-space-game/solution/README.md
new file mode 100644
index 00000000..639c0a7f
--- /dev/null
+++ b/translations/sl/6-space-game/solution/README.md
@@ -0,0 +1,15 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "068cbb9b3c10a96d503f6cdd6c9ace8c",
+  "translation_date": "2025-08-27T22:29:12+00:00",
+  "source_file": "6-space-game/solution/README.md",
+  "language_code": "sl"
+}
+-->
+To je rezervirano mesto, namenoma pusteno prazno
+
+---
+
+**Omejitev odgovornosti**:  
+Ta dokument je bil preveden z uporabo storitve za prevajanje z umetno inteligenco [Co-op Translator](https://github.com/Azure/co-op-translator). Čeprav si prizadevamo za natančnost, vas prosimo, da upoštevate, da lahko avtomatizirani prevodi vsebujejo napake ali netočnosti. Izvirni dokument v njegovem izvirnem jeziku je treba obravnavati kot avtoritativni vir. Za ključne informacije priporočamo profesionalni prevod s strani človeka. Ne prevzemamo odgovornosti za morebitna napačna razumevanja ali napačne interpretacije, ki bi nastale zaradi uporabe tega prevoda.
\ No newline at end of file
diff --git a/translations/sl/7-bank-project/1-template-route/README.md b/translations/sl/7-bank-project/1-template-route/README.md
new file mode 100644
index 00000000..e2344cd1
--- /dev/null
+++ b/translations/sl/7-bank-project/1-template-route/README.md
@@ -0,0 +1,322 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "8da1b5e2c63f749808858c53f37b8ce7",
+  "translation_date": "2025-08-27T22:11:14+00:00",
+  "source_file": "7-bank-project/1-template-route/README.md",
+  "language_code": "sl"
+}
+-->
+# Ustvarjanje bančne aplikacije, 1. del: HTML predloge in poti v spletni aplikaciji
+
+## Predhodni kviz
+
+[Predhodni kviz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/41)
+
+### Uvod
+
+Odkar je JavaScript postal del brskalnikov, so spletne strani postale bolj interaktivne in kompleksne kot kdajkoli prej. Spletne tehnologije se zdaj pogosto uporabljajo za ustvarjanje popolnoma funkcionalnih aplikacij, ki delujejo neposredno v brskalniku, in jih imenujemo [spletne aplikacije](https://en.wikipedia.org/wiki/Web_application). Ker so spletne aplikacije zelo interaktivne, uporabniki ne želijo čakati na ponovno nalaganje celotne strani ob vsakem opravljenem dejanju. Zato se JavaScript uporablja za neposredno posodabljanje HTML-ja prek DOM-a, kar omogoča bolj gladko uporabniško izkušnjo.
+
+V tej lekciji bomo postavili temelje za ustvarjanje bančne spletne aplikacije, pri čemer bomo uporabili HTML predloge za ustvarjanje več zaslonov, ki jih je mogoče prikazati in posodobiti brez ponovnega nalaganja celotne HTML strani.
+
+### Predpogoji
+
+Za testiranje spletne aplikacije, ki jo bomo ustvarili v tej lekciji, potrebujete lokalni spletni strežnik. Če ga nimate, lahko namestite [Node.js](https://nodejs.org) in uporabite ukaz `npx lite-server` iz vaše projektne mape. Ta ukaz bo ustvaril lokalni spletni strežnik in odprl vašo aplikacijo v brskalniku.
+
+### Priprava
+
+Na svojem računalniku ustvarite mapo z imenom `bank` in v njej datoteko z imenom `index.html`. Začeli bomo s tem HTML [osnovnim kodnim vzorcem](https://en.wikipedia.org/wiki/Boilerplate_code):
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Bank App</title>
+  </head>
+  <body>
+    <!-- This is where you'll work -->
+  </body>
+</html>
+```
+
+---
+
+## HTML predloge
+
+Če želite ustvariti več zaslonov za spletno stran, bi ena rešitev bila ustvariti eno HTML datoteko za vsak zaslon, ki ga želite prikazati. Vendar pa ta rešitev prinaša nekaj nevšečnosti:
+
+- Ob preklopu zaslona morate ponovno naložiti celoten HTML, kar je lahko počasno.
+- Težko je deliti podatke med različnimi zasloni.
+
+Drugi pristop je uporaba ene same HTML datoteke, v kateri definirate več [HTML predlog](https://developer.mozilla.org/docs/Web/HTML/Element/template) z uporabo elementa `<template>`. Predloga je ponovno uporaben HTML blok, ki ga brskalnik ne prikaže, in ga je treba ustvariti med izvajanjem z uporabo JavaScripta.
+
+### Naloga
+
+Ustvarili bomo bančno aplikacijo z dvema zaslonoma: stran za prijavo in nadzorno ploščo. Najprej dodajmo v telo HTML element, ki bo služil kot mesto za prikaz različnih zaslonov naše aplikacije:
+
+```html
+<div id="app">Loading...</div>
+```
+
+Dodelili smo mu `id`, da ga bomo kasneje lažje našli z JavaScriptom.
+
+> Nasvet: Ker bo vsebina tega elementa zamenjana, lahko vanj postavimo sporočilo ali indikator nalaganja, ki bo prikazan med nalaganjem aplikacije.
+
+Nato dodajmo spodaj HTML predlogo za stran za prijavo. Za zdaj bomo vanjo postavili samo naslov in razdelek, ki vsebuje povezavo za navigacijo.
+
+```html
+<template id="login">
+  <h1>Bank App</h1>
+  <section>
+    <a href="/dashboard">Login</a>
+  </section>
+</template>
+```
+
+Potem dodajmo še eno HTML predlogo za stran nadzorne plošče. Ta stran bo vsebovala različne razdelke:
+
+- Glavo z naslovom in povezavo za odjavo
+- Trenutno stanje bančnega računa
+- Seznam transakcij, prikazan v tabeli
+
+```html
+<template id="dashboard">
+  <header>
+    <h1>Bank App</h1>
+    <a href="/login">Logout</a>
+  </header>
+  <section>
+    Balance: 100$
+  </section>
+  <section>
+    <h2>Transactions</h2>
+    <table>
+      <thead>
+        <tr>
+          <th>Date</th>
+          <th>Object</th>
+          <th>Amount</th>
+        </tr>
+      </thead>
+      <tbody></tbody>
+    </table>
+  </section>
+</template>
+```
+
+> Nasvet: Ko ustvarjate HTML predloge, lahko, če želite videti, kako bodo videti, zakomentirate vrstice `<template>` in `</template>` z uporabo `<!-- -->`.
+
+✅ Zakaj menite, da uporabljamo `id` atribute na predlogah? Ali bi lahko uporabili kaj drugega, kot so razredi?
+
+## Prikazovanje predlog z JavaScriptom
+
+Če poskusite trenutno HTML datoteko v brskalniku, boste videli, da ostane prikazano sporočilo `Loading...`. To je zato, ker moramo dodati nekaj JavaScript kode za ustvarjanje in prikaz HTML predlog.
+
+Ustvarjanje predloge običajno poteka v 3 korakih:
+
+1. Pridobitev elementa predloge v DOM-u, na primer z uporabo [`document.getElementById`](https://developer.mozilla.org/docs/Web/API/Document/getElementById).
+2. Kloniranje elementa predloge z uporabo [`cloneNode`](https://developer.mozilla.org/docs/Web/API/Node/cloneNode).
+3. Priključitev na DOM pod vidnim elementom, na primer z uporabo [`appendChild`](https://developer.mozilla.org/docs/Web/API/Node/appendChild).
+
+✅ Zakaj moramo klonirati predlogo, preden jo priključimo na DOM? Kaj mislite, da bi se zgodilo, če bi ta korak preskočili?
+
+### Naloga
+
+Ustvarite novo datoteko z imenom `app.js` v svoji projektni mapi in jo uvozite v razdelek `<head>` svojega HTML-ja:
+
+```html
+<script src="app.js" defer></script>
+```
+
+Zdaj v `app.js` ustvarimo novo funkcijo `updateRoute`:
+
+```js
+function updateRoute(templateId) {
+  const template = document.getElementById(templateId);
+  const view = template.content.cloneNode(true);
+  const app = document.getElementById('app');
+  app.innerHTML = '';
+  app.appendChild(view);
+}
+```
+
+Tukaj izvajamo točno 3 korake, opisane zgoraj. Ustvarimo predlogo z `id` atributom `templateId` in njeno klonirano vsebino postavimo v naš element za aplikacijo. Upoštevajte, da moramo uporabiti `cloneNode(true)`, da kopiramo celotno drevesno strukturo predloge.
+
+Zdaj pokličite to funkcijo z eno od predlog in si oglejte rezultat.
+
+```js
+updateRoute('login');
+```
+
+✅ Kakšen je namen kode `app.innerHTML = '';`? Kaj se zgodi brez nje?
+
+## Ustvarjanje poti
+
+Ko govorimo o spletni aplikaciji, imenujemo *usmerjanje* namen mapiranja **URL-jev** na določene zaslone, ki naj bi bili prikazani. Na spletni strani z več HTML datotekami se to izvaja samodejno, saj se poti datotek odražajo v URL-ju. Na primer, z naslednjimi datotekami v vaši projektni mapi:
+
+```
+mywebsite/index.html
+mywebsite/login.html
+mywebsite/admin/index.html
+```
+
+Če ustvarite spletni strežnik z `mywebsite` kot korenom, bo mapiranje URL-jev naslednje:
+
+```
+https://site.com            --> mywebsite/index.html
+https://site.com/login.html --> mywebsite/login.html
+https://site.com/admin/     --> mywebsite/admin/index.html
+```
+
+Vendar pa za našo spletno aplikacijo uporabljamo eno samo HTML datoteko, ki vsebuje vse zaslone, zato nam to privzeto vedenje ne bo pomagalo. To mapiranje moramo ustvariti ročno in posodobiti prikazano predlogo z uporabo JavaScripta.
+
+### Naloga
+
+Uporabili bomo preprost objekt za implementacijo [zemljevida](https://en.wikipedia.org/wiki/Associative_array) med URL potmi in našimi predlogami. Dodajte ta objekt na vrh datoteke `app.js`.
+
+```js
+const routes = {
+  '/login': { templateId: 'login' },
+  '/dashboard': { templateId: 'dashboard' },
+};
+```
+
+Zdaj nekoliko spremenimo funkcijo `updateRoute`. Namesto da neposredno podamo `templateId` kot argument, ga želimo pridobiti tako, da najprej pogledamo trenutni URL, nato pa uporabimo naš zemljevid za pridobitev ustrezne vrednosti `templateId`. Uporabimo lahko [`window.location.pathname`](https://developer.mozilla.org/docs/Web/API/Location/pathname) za pridobitev samo dela poti iz URL-ja.
+
+```js
+function updateRoute() {
+  const path = window.location.pathname;
+  const route = routes[path];
+
+  const template = document.getElementById(route.templateId);
+  const view = template.content.cloneNode(true);
+  const app = document.getElementById('app');
+  app.innerHTML = '';
+  app.appendChild(view);
+}
+```
+
+Tukaj smo mapirali poti, ki smo jih deklarirali, na ustrezne predloge. Preverite, ali deluje pravilno, tako da ročno spremenite URL v brskalniku.
+
+✅ Kaj se zgodi, če vnesete neznano pot v URL? Kako bi to lahko rešili?
+
+## Dodajanje navigacije
+
+Naslednji korak za našo aplikacijo je dodajanje možnosti za navigacijo med stranmi brez ročnega spreminjanja URL-ja. To vključuje dve stvari:
+
+1. Posodabljanje trenutnega URL-ja
+2. Posodabljanje prikazane predloge glede na nov URL
+
+Drugi del smo že obravnavali s funkcijo `updateRoute`, zato moramo ugotoviti, kako posodobiti trenutni URL.
+
+Uporabiti bomo morali JavaScript, natančneje [`history.pushState`](https://developer.mozilla.org/docs/Web/API/History/pushState), ki omogoča posodobitev URL-ja in ustvarjanje novega vnosa v zgodovini brskanja, brez ponovnega nalaganja HTML-ja.
+
+> Opomba: Medtem ko se HTML element sidra [`<a href>`](https://developer.mozilla.org/docs/Web/HTML/Element/a) lahko uporablja samostojno za ustvarjanje hiperpovezav na različne URL-je, bo privzeto povzročil ponovno nalaganje HTML-ja. To vedenje je treba preprečiti pri obravnavi usmerjanja s prilagojenim JavaScriptom, z uporabo funkcije `preventDefault()` na dogodku klik.
+
+### Naloga
+
+Ustvarimo novo funkcijo, ki jo lahko uporabimo za navigacijo v naši aplikaciji:
+
+```js
+function navigate(path) {
+  window.history.pushState({}, path, path);
+  updateRoute();
+}
+```
+
+Ta metoda najprej posodobi trenutni URL glede na podano pot, nato pa posodobi predlogo. Lastnost `window.location.origin` vrne koren URL-ja, kar nam omogoča rekonstrukcijo celotnega URL-ja iz podane poti.
+
+Zdaj, ko imamo to funkcijo, lahko rešimo težavo, ki jo imamo, če pot ne ustreza nobeni določeni poti. Spremenili bomo funkcijo `updateRoute` tako, da dodamo privzeto možnost za eno od obstoječih poti, če ne najdemo ujemanja.
+
+```js
+function updateRoute() {
+  const path = window.location.pathname;
+  const route = routes[path];
+
+  if (!route) {
+    return navigate('/login');
+  }
+
+  ...
+```
+
+Če poti ni mogoče najti, bomo zdaj preusmerjeni na stran za prijavo.
+
+Zdaj ustvarimo funkcijo za pridobitev URL-ja, ko je kliknjena povezava, in za preprečitev privzetega vedenja brskalnika pri povezavah:
+
+```js
+function onLinkClick(event) {
+  event.preventDefault();
+  navigate(event.target.href);
+}
+```
+
+Dokončajmo navigacijski sistem z dodajanjem povezav za naše povezave *Prijava* in *Odjava* v HTML.
+
+```html
+<a href="/dashboard" onclick="onLinkClick(event)">Login</a>
+...
+<a href="/login" onclick="onLinkClick(event)">Logout</a>
+```
+
+Zgornji objekt `event` zajame dogodek `click` in ga posreduje naši funkciji `onLinkClick`.
+
+Z uporabo atributa [`onclick`](https://developer.mozilla.org/docs/Web/API/GlobalEventHandlers/onclick) povežemo dogodek `click` z JavaScript kodo, tukaj klicem funkcije `navigate()`.
+
+Poskusite klikniti te povezave, zdaj bi morali biti sposobni navigirati med različnimi zasloni vaše aplikacije.
+
+✅ Metoda `history.pushState` je del standarda HTML5 in implementirana v [vseh sodobnih brskalnikih](https://caniuse.com/?search=pushState). Če gradite spletno aplikacijo za starejše brskalnike, obstaja trik, ki ga lahko uporabite namesto te API: z uporabo [hash (`#`)](https://en.wikipedia.org/wiki/URI_fragment) pred potjo lahko implementirate usmerjanje, ki deluje z običajno navigacijo sidra in ne ponovno naloži strani, saj je bil njegov namen ustvarjanje notranjih povezav znotraj strani.
+
+## Obvladovanje gumbov za nazaj in naprej v brskalniku
+
+Uporaba `history.pushState` ustvari nove vnose v zgodovini navigacije brskalnika. To lahko preverite tako, da držite *gumb za nazaj* v brskalniku, prikazati bi se moralo nekaj takega:
+
+![Posnetek zaslona zgodovine navigacije](../../../../translated_images/history.7fdabbafa521e06455b738d3dafa3ff41d3071deae60ead8c7e0844b9ed987d8.sl.png)
+
+Če poskusite večkrat klikniti gumb za nazaj, boste videli, da se trenutni URL spremeni in zgodovina se posodobi, vendar se ista predloga še naprej prikazuje.
+
+To je zato, ker aplikacija ne ve, da moramo poklicati `updateRoute()` vsakič, ko se zgodovina spremeni. Če si ogledate [dokumentacijo za `history.pushState`](https://developer.mozilla.org/docs/Web/API/History/pushState), lahko vidite, da če se stanje spremeni - kar pomeni, da smo se premaknili na drug URL - se sproži dogodek [`popstate`](https://developer.mozilla.org/docs/Web/API/Window/popstate_event). To bomo uporabili za odpravo te težave.
+
+### Naloga
+
+Da zagotovimo, da se prikazana predloga posodobi, ko se zgodovina brskalnika spremeni, bomo dodali novo funkcijo, ki kliče `updateRoute()`. To bomo storili na dnu datoteke `app.js`:
+
+```js
+window.onpopstate = () => updateRoute();
+updateRoute();
+```
+
+> Opomba: Tukaj smo uporabili [puščično funkcijo](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions) za deklaracijo našega upravljalnika dogodkov `popstate` zaradi jedrnatosti, vendar bi običajna funkcija delovala enako.
+
+Tukaj je osvežitveni video o puščičnih funkcijah:
+
+[![Puščične funkcije](https://img.youtube.com/vi/OP6eEbOj2sc/0.jpg)](https://youtube.com/watch?v=OP6eEbOj2sc "Puščične funkcije")
+
+> 🎥 Kliknite zgornjo sliko za video o puščičnih funkcijah.
+
+Zdaj poskusite uporabiti gumbe za nazaj in naprej v brskalniku ter preverite, ali se prikazana pot pravilno posodobi tokrat.
+
+---
+
+## 🚀 Izziv
+
+Dodajte novo predlogo in pot za tretjo stran, ki prikazuje zasluge za to aplikacijo.
+
+## Kviz po predavanju
+
+[Kviz po predavanju](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/42)
+
+## Pregled in samostojno učenje
+
+Usmerjanje je eden od presenetljivo zahtevnih delov spletnega razvoja, še posebej, ko se splet premika od vedenja osveževanja strani k osveževanju strani v aplikacijah z eno stranjo. Preberite nekaj o tem, [kako storitev Azure Static Web App](https://docs.microsoft.com/azure/static-web-apps/routes/?WT.mc_id=academic-77807-sagibbon) obravnava usmerjanje. Ali lahko razložite, zakaj so nekatere odločitve, opisane v tem dokumentu, potrebne?
+
+## Naloga
+
+[Izboljšajte usmerjanje](assignment.md)
+
+---
+
+**Omejitev odgovornosti**:  
+Ta dokument je bil preveden z uporabo storitve za prevajanje z umetno inteligenco [Co-op Translator](https://github.com/Azure/co-op-translator). Čeprav si prizadevamo za natančnost, vas prosimo, da upoštevate, da lahko avtomatizirani prevodi vsebujejo napake ali netočnosti. Izvirni dokument v njegovem maternem jeziku je treba obravnavati kot avtoritativni vir. Za ključne informacije priporočamo profesionalni človeški prevod. Ne prevzemamo odgovornosti za morebitna napačna razumevanja ali napačne interpretacije, ki bi nastale zaradi uporabe tega prevoda.
\ No newline at end of file
diff --git a/translations/sl/7-bank-project/1-template-route/assignment.md b/translations/sl/7-bank-project/1-template-route/assignment.md
new file mode 100644
index 00000000..d896211c
--- /dev/null
+++ b/translations/sl/7-bank-project/1-template-route/assignment.md
@@ -0,0 +1,28 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "8223e429218befa731dd5bfd22299520",
+  "translation_date": "2025-08-27T22:12:06+00:00",
+  "source_file": "7-bank-project/1-template-route/assignment.md",
+  "language_code": "sl"
+}
+-->
+# Izboljšajte usmerjanje
+
+## Navodila
+
+Deklaracija poti trenutno vsebuje samo ID predloge za uporabo. Vendar pa je včasih pri prikazu nove strani potrebno nekaj več. Izboljšajmo našo implementacijo usmerjanja z dvema dodatnima funkcijama:
+
+- Dodelite naslove vsaki predlogi in posodobite naslov okna z novim naslovom, ko se predloga spremeni.
+- Dodajte možnost za izvajanje kode po spremembi predloge. Želimo, da se v razvijalski konzoli vsakič, ko je prikazana stran nadzorne plošče, izpiše `'Dashboard is shown'`.
+
+## Merila
+
+| Merilo   | Odlično                                                                                                                            | Zadostno                                                                                                                                                                                  | Potrebno izboljšanje                                   |
+| -------- | ---------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------- |
+|          | Obe funkciji sta implementirani in delujeta. Dodajanje naslova in kode deluje tudi za novo pot, dodano v deklaracijo `routes`.      | Obe funkciji delujeta, vendar je vedenje trdno določeno in ni nastavljivo prek deklaracije `routes`. Dodajanje tretje poti z naslovom in dodatkom kode ne deluje ali deluje delno.         | Ena od funkcij manjka ali ne deluje pravilno.         |
+
+---
+
+**Omejitev odgovornosti**:  
+Ta dokument je bil preveden z uporabo storitve za prevajanje z umetno inteligenco [Co-op Translator](https://github.com/Azure/co-op-translator). Čeprav si prizadevamo za natančnost, vas prosimo, da upoštevate, da lahko avtomatizirani prevodi vsebujejo napake ali netočnosti. Izvirni dokument v njegovem maternem jeziku je treba obravnavati kot avtoritativni vir. Za ključne informacije priporočamo profesionalni človeški prevod. Ne prevzemamo odgovornosti za morebitna nesporazumevanja ali napačne razlage, ki bi nastale zaradi uporabe tega prevoda.
\ No newline at end of file
diff --git a/translations/sl/7-bank-project/2-forms/README.md b/translations/sl/7-bank-project/2-forms/README.md
new file mode 100644
index 00000000..2af954c3
--- /dev/null
+++ b/translations/sl/7-bank-project/2-forms/README.md
@@ -0,0 +1,313 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "b667b7d601e2ee19acb5aa9d102dc9f3",
+  "translation_date": "2025-08-27T22:06:00+00:00",
+  "source_file": "7-bank-project/2-forms/README.md",
+  "language_code": "sl"
+}
+-->
+# Izdelava bančne aplikacije, 2. del: Prijavni in registracijski obrazec
+
+## Predhodni kviz pred predavanjem
+
+[Predhodni kviz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/43)
+
+### Uvod
+
+Skoraj vse sodobne spletne aplikacije omogočajo ustvarjanje računa za osebni prostor. Ker lahko več uporabnikov hkrati dostopa do spletne aplikacije, potrebujete mehanizem za ločeno shranjevanje osebnih podatkov vsakega uporabnika in izbiro, katere informacije prikazati. Ne bomo se poglabljali v [varno upravljanje identitete uporabnikov](https://en.wikipedia.org/wiki/Authentication), saj je to obsežna tema, vendar bomo poskrbeli, da bo vsak uporabnik lahko ustvaril enega (ali več) bančnih računov v naši aplikaciji.
+
+V tem delu bomo uporabili HTML obrazce za dodajanje prijave in registracije v našo spletno aplikacijo. Naučili se bomo, kako podatke programatično poslati strežniškemu API-ju, ter kako določiti osnovna pravila za validacijo uporabniških vnosov.
+
+### Predpogoji
+
+Za to lekcijo morate dokončati [HTML predloge in usmerjanje](../1-template-route/README.md) spletne aplikacije. Prav tako morate namestiti [Node.js](https://nodejs.org) in [zagnati strežniški API](../api/README.md) lokalno, da lahko pošiljate podatke za ustvarjanje računov.
+
+**Pomembno**
+Hkrati boste morali imeti odprta dva terminala, kot je navedeno spodaj:
+1. Za glavno bančno aplikacijo, ki smo jo izdelali v lekciji [HTML predloge in usmerjanje](../1-template-route/README.md)
+2. Za [strežniški API bančne aplikacije](../api/README.md), ki smo ga pravkar nastavili zgoraj.
+
+Oba strežnika morata biti zagnana, da lahko sledite preostanku lekcije. Strežnika poslušata na različnih vratih (vrata `3000` in vrata `5000`), zato bi moralo vse delovati brez težav.
+
+Delovanje strežnika lahko preverite z naslednjim ukazom v terminalu:
+
+```sh
+curl http://localhost:5000/api
+# -> should return "Bank API v1.0.0" as a result
+```
+
+---
+
+## Obrazec in kontrolniki
+
+Element `<form>` zajema del HTML dokumenta, kjer lahko uporabnik vnese in pošlje podatke z interaktivnimi kontrolniki. Obstaja veliko različnih uporabniških vmesnikov (UI) kontrolnikov, ki jih lahko uporabite znotraj obrazca, najpogostejša pa sta elementa `<input>` in `<button>`.
+
+Obstaja veliko različnih [tipov](https://developer.mozilla.org/docs/Web/HTML/Element/input) elementa `<input>`. Na primer, za ustvarjanje polja, kjer uporabnik vnese svoje uporabniško ime, lahko uporabite:
+
+```html
+<input id="username" name="username" type="text">
+```
+
+Atribut `name` bo uporabljen kot ime lastnosti, ko bodo podatki obrazca poslani. Atribut `id` pa se uporablja za povezavo `<label>` z obrazcem.
+
+> Oglejte si celoten seznam [tipov `<input>`](https://developer.mozilla.org/docs/Web/HTML/Element/input) in [drugih kontrolnikov obrazca](https://developer.mozilla.org/docs/Learn/Forms/Other_form_controls), da dobite predstavo o vseh UI elementih, ki jih lahko uporabite pri gradnji uporabniškega vmesnika.
+
+✅ Upoštevajte, da je `<input>` [prazni element](https://developer.mozilla.org/docs/Glossary/Empty_element), ki mu *ne* smete dodati ustrezne zapiralne oznake. Lahko pa uporabite samozapiralno oznako `<input/>`, vendar to ni obvezno.
+
+Element `<button>` znotraj obrazca je nekoliko poseben. Če ne določite atributa `type`, bo samodejno poslal podatke obrazca strežniku, ko ga pritisnete. Tukaj so možne vrednosti atributa `type`:
+
+- `submit`: Privzeto znotraj `<form>`, gumb sproži dejanje pošiljanja obrazca.
+- `reset`: Gumb ponastavi vse kontrolnike obrazca na njihove začetne vrednosti.
+- `button`: Gumbu ne dodeli privzetega vedenja ob pritisku. Po želji mu lahko dodelite prilagojena dejanja z uporabo JavaScripta.
+
+### Naloga
+
+Začnimo z dodajanjem obrazca v predlogo `login`. Potrebovali bomo polje za *uporabniško ime* in gumb *Prijava*.
+
+```html
+<template id="login">
+  <h1>Bank App</h1>
+  <section>
+    <h2>Login</h2>
+    <form id="loginForm">
+      <label for="username">Username</label>
+      <input id="username" name="user" type="text">
+      <button>Login</button>
+    </form>
+  </section>
+</template>
+```
+
+Če si podrobneje ogledate, lahko opazite, da smo tukaj dodali tudi element `<label>`. Elementi `<label>` se uporabljajo za dodajanje imena UI kontrolnikom, kot je naše polje za uporabniško ime. Oznake so pomembne za berljivost obrazcev, poleg tega pa prinašajo dodatne koristi:
+
+- Povezava oznake z kontrolnikom obrazca pomaga uporabnikom, ki uporabljajo pripomočke za dostopnost (npr. bralnik zaslona), da razumejo, katere podatke morajo vnesti.
+- Klik na oznako neposredno postavi fokus na povezano polje, kar olajša dostop na napravah z zaslonom na dotik.
+
+> [Dostopnost](https://developer.mozilla.org/docs/Learn/Accessibility/What_is_accessibility) na spletu je zelo pomembna tema, ki je pogosto spregledana. Zahvaljujoč [semantičnim HTML elementom](https://developer.mozilla.org/docs/Learn/Accessibility/HTML) ni težko ustvariti dostopne vsebine, če jih pravilno uporabljate. Več o dostopnosti lahko preberete [tukaj](https://developer.mozilla.org/docs/Web/Accessibility), da se izognete pogostim napakam in postanete odgovoren razvijalec.
+
+Zdaj bomo dodali drugi obrazec za registracijo, takoj pod prejšnjim:
+
+```html
+<hr/>
+<h2>Register</h2>
+<form id="registerForm">
+  <label for="user">Username</label>
+  <input id="user" name="user" type="text">
+  <label for="currency">Currency</label>
+  <input id="currency" name="currency" type="text" value="$">
+  <label for="description">Description</label>
+  <input id="description" name="description" type="text">
+  <label for="balance">Current balance</label>
+  <input id="balance" name="balance" type="number" value="0">
+  <button>Register</button>
+</form>
+```
+
+Z uporabo atributa `value` lahko določimo privzeto vrednost za določeno polje.
+Opazite tudi, da ima polje za `balance` tip `number`. Ali izgleda drugače kot ostala polja? Poskusite interakcijo z njim.
+
+✅ Ali lahko obrazce uporabljate in se po njih premikate samo s tipkovnico? Kako bi to storili?
+
+## Pošiljanje podatkov strežniku
+
+Zdaj, ko imamo funkcionalni UI, je naslednji korak pošiljanje podatkov strežniku. Naredimo hiter test z našo trenutno kodo: kaj se zgodi, če kliknete na gumb *Prijava* ali *Registracija*?
+
+Ste opazili spremembo v URL-ju vašega brskalnika?
+
+![Posnetek zaslona spremembe URL-ja brskalnika po kliku na gumb Registracija](../../../../translated_images/click-register.e89a30bf0d4bc9ca867dc537c4cea679a7c26368bd790969082f524fed2355bc.sl.png)
+
+Privzeto dejanje za `<form>` je pošiljanje obrazca na trenutni URL strežnika z uporabo [GET metode](https://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.3), pri čemer se podatki obrazca dodajo neposredno v URL. Ta metoda ima nekaj pomanjkljivosti:
+
+- Poslani podatki so zelo omejeni po velikosti (približno 2000 znakov)
+- Podatki so neposredno vidni v URL-ju (ni idealno za gesla)
+- Ne deluje z nalaganjem datotek
+
+Zato lahko spremenite metodo na [POST](https://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.5), ki pošlje podatke obrazca strežniku v telo HTTP zahteve, brez prejšnjih omejitev.
+
+> Čeprav je POST najpogosteje uporabljena metoda za pošiljanje podatkov, je [v nekaterih specifičnih scenarijih](https://www.w3.org/2001/tag/doc/whenToUseGet.html) bolje uporabiti metodo GET, na primer pri implementaciji iskalnega polja.
+
+### Naloga
+
+Dodajte lastnosti `action` in `method` obrazcu za registracijo:
+
+```html
+<form id="registerForm" action="//localhost:5000/api/accounts" method="POST">
+```
+
+Zdaj poskusite registrirati nov račun z vašim imenom. Po kliku na gumb *Registracija* bi morali videti nekaj takega:
+
+![Okno brskalnika na naslovu localhost:5000/api/accounts, ki prikazuje JSON niz z uporabniškimi podatki](../../../../translated_images/form-post.61de4ca1b964d91a9e338416e19f218504dd0af5f762fbebabfe7ae80edf885f.sl.png)
+
+Če gre vse po načrtih, bi moral strežnik odgovoriti na vašo zahtevo z [JSON](https://www.json.org/json-en.html) odzivom, ki vsebuje podatke o ustvarjenem računu.
+
+✅ Poskusite se ponovno registrirati z istim imenom. Kaj se zgodi?
+
+## Pošiljanje podatkov brez osveževanja strani
+
+Kot ste verjetno opazili, je pri pristopu, ki smo ga pravkar uporabili, majhna težava: ob pošiljanju obrazca zapustimo našo aplikacijo in brskalnik preusmeri na URL strežnika. Poskušamo se izogniti vsem osvežitvam strani v naši spletni aplikaciji, saj izdelujemo [enostransko aplikacijo (SPA)](https://en.wikipedia.org/wiki/Single-page_application).
+
+Za pošiljanje podatkov obrazca strežniku brez prisilnega osveževanja strani moramo uporabiti JavaScript kodo. Namesto da v lastnost `action` elementa `<form>` vnesete URL, lahko uporabite katero koli JavaScript kodo, ki ji predhodite z nizom `javascript:`, da izvedete prilagojeno dejanje. Uporaba tega pomeni tudi, da boste morali sami implementirati nekatere naloge, ki jih je prej samodejno opravil brskalnik:
+
+- Pridobitev podatkov obrazca
+- Pretvorba in kodiranje podatkov obrazca v ustrezen format
+- Ustvarjanje HTTP zahteve in pošiljanje strežniku
+
+### Naloga
+
+Zamenjajte lastnost `action` obrazca za registracijo z:
+
+```html
+<form id="registerForm" action="javascript:register()">
+```
+
+Odprite `app.js` in dodajte novo funkcijo z imenom `register`:
+
+```js
+function register() {
+  const registerForm = document.getElementById('registerForm');
+  const formData = new FormData(registerForm);
+  const data = Object.fromEntries(formData);
+  const jsonData = JSON.stringify(data);
+}
+```
+
+Tukaj pridobimo element obrazca z uporabo `getElementById()` in uporabimo pripomoček [`FormData`](https://developer.mozilla.org/docs/Web/API/FormData) za pridobitev vrednosti iz kontrolnikov obrazca kot niz ključ/vrednost. Nato podatke pretvorimo v običajen objekt z [`Object.fromEntries()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/fromEntries) in jih na koncu serializiramo v [JSON](https://www.json.org/json-en.html), format, ki se pogosto uporablja za izmenjavo podatkov na spletu.
+
+Podatki so zdaj pripravljeni za pošiljanje strežniku. Ustvarite novo funkcijo z imenom `createAccount`:
+
+```js
+async function createAccount(account) {
+  try {
+    const response = await fetch('//localhost:5000/api/accounts', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: account
+    });
+    return await response.json();
+  } catch (error) {
+    return { error: error.message || 'Unknown error' };
+  }
+}
+```
+
+Kaj počne ta funkcija? Najprej opazite ključni besedi `async`. To pomeni, da funkcija vsebuje kodo, ki se bo izvajala [**asinhrono**](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/async_function). Ko jo uporabimo skupaj s ključnimi besedami `await`, omogoča čakanje na izvajanje asinhrone kode - na primer čakanje na odgovor strežnika - preden nadaljujemo.
+
+Tukaj je kratek video o uporabi `async/await`:
+
+[![Async in Await za upravljanje obljub](https://img.youtube.com/vi/YwmlRkrxvkk/0.jpg)](https://youtube.com/watch?v=YwmlRkrxvkk "Async in Await za upravljanje obljub")
+
+> 🎥 Kliknite zgornjo sliko za video o async/await.
+
+Uporabimo API `fetch()` za pošiljanje JSON podatkov strežniku. Ta metoda sprejme 2 parametra:
+
+- URL strežnika, zato tukaj ponovno vnesemo `//localhost:5000/api/accounts`.
+- Nastavitve zahteve. Tukaj nastavimo metodo na `POST` in zagotovimo `body` zahteve. Ker pošiljamo JSON podatke strežniku, moramo nastaviti tudi glavo `Content-Type` na `application/json`, da strežnik ve, kako interpretirati vsebino.
+
+Ker bo strežnik odgovoril na zahtevo z JSON, lahko uporabimo `await response.json()` za razčlenitev JSON vsebine in vrnitev rezultirajočega objekta. Upoštevajte, da je ta metoda asinhrona, zato tukaj uporabimo ključni besedi `await`, da zagotovimo, da se morebitne napake med razčlenitvijo ujamejo.
+
+Zdaj dodajte nekaj kode funkciji `register`, da pokliče `createAccount()`:
+
+```js
+const result = await createAccount(jsonData);
+```
+
+Ker tukaj uporabljamo ključni besedi `await`, moramo dodati ključni besedi `async` pred funkcijo register:
+
+```js
+async function register() {
+```
+
+Na koncu dodajmo nekaj zapisov za preverjanje rezultata. Končna funkcija bi morala izgledati takole:
+
+```js
+async function register() {
+  const registerForm = document.getElementById('registerForm');
+  const formData = new FormData(registerForm);
+  const jsonData = JSON.stringify(Object.fromEntries(formData));
+  const result = await createAccount(jsonData);
+
+  if (result.error) {
+    return console.log('An error occurred:', result.error);
+  }
+
+  console.log('Account created!', result);
+}
+```
+
+To je bilo nekoliko daljše, vendar smo prišli do cilja! Če odprete [orodja za razvijalce brskalnika](https://developer.mozilla.org/docs/Learn/Common_questions/What_are_browser_developer_tools) in poskusite registrirati nov račun, ne bi smeli opaziti nobene spremembe na spletni strani, vendar se bo v konzoli prikazalo sporočilo, ki potrjuje, da vse deluje.
+
+![Posnetek zaslona, ki prikazuje sporočilo v konzoli brskalnika](../../../../translated_images/browser-console.efaf0b51aaaf67782a29e1a0bb32cc063f189b18e894eb5926e02f1abe864ec2.sl.png)
+
+✅ Ali menite, da so podatki varno poslani strežniku? Kaj če bi nekdo lahko prestregel zahtevo? Več o [HTTPS](https://en.wikipedia.org/wiki/HTTPS) lahko preberete, da se naučite več o varni komunikaciji podatkov.
+
+## Validacija podatkov
+
+Če poskusite registrirati nov račun brez vnosa uporabniškega imena, lahko vidite, da strežnik vrne napako s statusno kodo [400 (Slaba zahteva)](https://developer.mozilla.org/docs/Web/HTTP/Status/400#:~:text=The%20HyperText%20Transfer%20Protocol%20(HTTP,%2C%20or%20deceptive%20request%20routing).).
+
+Pred pošiljanjem podatkov strežniku je dobra praksa, da [validirate podatke obrazca](https://developer.mozilla.org/docs/Learn/Forms/Form_validation) vnaprej, kadar je to mogoče, da zagotovite, da pošljete veljavno zahtevo. HTML5 kontrolniki obrazcev omogočajo vgrajeno validacijo z uporabo različnih atributov:
+
+- `required`: polje mora biti izpolnjeno, sicer obrazca ni mogoče poslati.
+- `minlength` in `maxlength`: določata minimalno in maksimalno število znakov v besedilnih poljih.
+- `min` in `max`: določata minimalno in maksimalno vrednost numeričnega polja.
+- `type`: določa vrsto pričakovanih podatkov, kot so `number`, `email`, `file` ali [druge vgrajene vrste](https://developer.mozilla.org/docs/Web/HTML/Element/input). Ta atribut lahko spremeni tudi vizualni prikaz kontrolnika obrazca.
+- `pattern`: omogoča določitev [regularnega izraza](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Regular_Expressions) za preverjanje, ali so vneseni podatki veljavni ali ne.
+Namig: videz kontrolnikov obrazca lahko prilagodite glede na to, ali so veljavni ali ne, z uporabo CSS psevdo-razredov `:valid` in `:invalid`.
+### Naloga
+
+Za ustvarjanje veljavnega novega računa sta obvezni polji uporabniško ime in valuta, ostala polja so neobvezna. Posodobite HTML obrazca tako, da uporabite atribut `required` in besedilo v oznaki polja, da:
+
+```html
+<label for="user">Username (required)</label>
+<input id="user" name="user" type="text" required>
+...
+<label for="currency">Currency (required)</label>
+<input id="currency" name="currency" type="text" value="$" required>
+```
+
+Čeprav ta posebna implementacija strežnika ne uveljavlja specifičnih omejitev glede največje dolžine polj, je vedno dobra praksa določiti razumne omejitve za vnos besedila uporabnika.
+
+Dodajte atribut `maxlength` v besedilna polja:
+
+```html
+<input id="user" name="user" type="text" maxlength="20" required>
+...
+<input id="currency" name="currency" type="text" value="$" maxlength="5" required>
+...
+<input id="description" name="description" type="text" maxlength="100">
+```
+
+Zdaj, če pritisnete gumb *Registriraj* in polje ne upošteva pravila validacije, ki smo ga določili, bi morali videti nekaj takega:
+
+![Posnetek zaslona, ki prikazuje napako validacije pri poskusu oddaje obrazca](../../../../translated_images/validation-error.8bd23e98d416c22f80076d04829a4bb718e0e550fd622862ef59008ccf0d5dce.sl.png)
+
+Validacija, ki se izvede *preden* se podatki pošljejo na strežnik, se imenuje **validacija na strani odjemalca**. Vendar pa ni vedno mogoče izvesti vseh preverjanj brez pošiljanja podatkov. Na primer, tukaj ne moremo preveriti, ali račun z istim uporabniškim imenom že obstaja, ne da bi poslali zahtevo strežniku. Dodatna validacija, ki se izvede na strežniku, se imenuje **validacija na strani strežnika**.
+
+Običajno je treba implementirati obe vrsti validacije, in čeprav validacija na strani odjemalca izboljša uporabniško izkušnjo z zagotavljanjem takojšnjih povratnih informacij uporabniku, je validacija na strani strežnika ključna za zagotavljanje, da so podatki uporabnika, s katerimi delate, zanesljivi in varni.
+
+---
+
+## 🚀 Izziv
+
+Prikažite sporočilo o napaki v HTML-ju, če uporabnik že obstaja.
+
+Tukaj je primer, kako lahko končna stran za prijavo izgleda po nekaj oblikovanja:
+
+![Posnetek zaslona strani za prijavo po dodajanju CSS stilov](../../../../translated_images/result.96ef01f607bf856aa9789078633e94a4f7664d912f235efce2657299becca483.sl.png)
+
+## Kviz po predavanju
+
+[Kviz po predavanju](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/44)
+
+## Pregled in samostojno učenje
+
+Razvijalci so postali zelo ustvarjalni pri oblikovanju obrazcev, še posebej pri strategijah validacije. Spoznajte različne tokove obrazcev z raziskovanjem [CodePen](https://codepen.com); ali lahko najdete zanimive in navdihujoče obrazce?
+
+## Naloga
+
+[Oblikujte svojo bančno aplikacijo](assignment.md)
+
+---
+
+**Omejitev odgovornosti**:  
+Ta dokument je bil preveden z uporabo storitve za prevajanje z umetno inteligenco [Co-op Translator](https://github.com/Azure/co-op-translator). Čeprav si prizadevamo za natančnost, vas prosimo, da upoštevate, da lahko avtomatizirani prevodi vsebujejo napake ali netočnosti. Izvirni dokument v njegovem izvirnem jeziku je treba obravnavati kot avtoritativni vir. Za ključne informacije priporočamo profesionalni človeški prevod. Ne prevzemamo odgovornosti za morebitna nesporazumevanja ali napačne razlage, ki bi nastale zaradi uporabe tega prevoda.
\ No newline at end of file
diff --git a/translations/sl/7-bank-project/2-forms/assignment.md b/translations/sl/7-bank-project/2-forms/assignment.md
new file mode 100644
index 00000000..b8209080
--- /dev/null
+++ b/translations/sl/7-bank-project/2-forms/assignment.md
@@ -0,0 +1,27 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "474f3ab1ee755ca980fc9104a0316e17",
+  "translation_date": "2025-08-27T22:07:02+00:00",
+  "source_file": "7-bank-project/2-forms/assignment.md",
+  "language_code": "sl"
+}
+-->
+# Oblikujte svojo bančno aplikacijo
+
+## Navodila
+
+Ustvarite novo datoteko `styles.css` in dodajte povezavo nanjo v vašo trenutno datoteko `index.html`. V pravkar ustvarjeni datoteki CSS dodajte nekaj stilov, da bosta strani *Prijava* in *Nadzorna plošča* videti lepo in urejeno. Poskusite ustvariti barvno temo, ki bo vaši aplikaciji dala edinstveno identiteto.
+
+> Nasvet: HTML lahko spremenite in dodate nove elemente ter razrede, če je potrebno.
+
+## Merila ocenjevanja
+
+| Merilo   | Odlično                                                                                                                 | Zadostno                                                                      | Potrebno izboljšanje                                                                         |
+| -------- | ----------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------- |
+|          | Vse strani so videti čiste in berljive, z dosledno barvno temo, različni razdelki pa so jasno izpostavljeni.            | Strani so oblikovane, vendar brez teme ali z razdelki, ki niso jasno ločeni.  | Strani nimajo oblikovanja, razdelki so neurejeni, informacije pa težko berljive.             |
+
+---
+
+**Omejitev odgovornosti**:  
+Ta dokument je bil preveden z uporabo storitve za prevajanje z umetno inteligenco [Co-op Translator](https://github.com/Azure/co-op-translator). Čeprav si prizadevamo za natančnost, vas prosimo, da upoštevate, da lahko avtomatizirani prevodi vsebujejo napake ali netočnosti. Izvirni dokument v njegovem maternem jeziku je treba obravnavati kot avtoritativni vir. Za ključne informacije priporočamo profesionalni prevod s strani človeka. Ne prevzemamo odgovornosti za morebitna nesporazumevanja ali napačne razlage, ki bi nastale zaradi uporabe tega prevoda.
\ No newline at end of file
diff --git a/translations/sl/7-bank-project/3-data/README.md b/translations/sl/7-bank-project/3-data/README.md
new file mode 100644
index 00000000..bcf155ba
--- /dev/null
+++ b/translations/sl/7-bank-project/3-data/README.md
@@ -0,0 +1,347 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "f587e913e3f7c0b1c549a05dd74ee8e5",
+  "translation_date": "2025-08-27T22:02:14+00:00",
+  "source_file": "7-bank-project/3-data/README.md",
+  "language_code": "sl"
+}
+-->
+# Ustvarjanje bančne aplikacije, 3. del: Metode pridobivanja in uporabe podatkov
+
+## Predhodni kviz
+
+[Predhodni kviz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/45)
+
+### Uvod
+
+Jedro vsake spletne aplikacije so *podatki*. Podatki lahko obstajajo v različnih oblikah, vendar je njihov glavni namen prikazovanje informacij uporabniku. Z naraščajočo interaktivnostjo in kompleksnostjo spletnih aplikacij je način, kako uporabnik dostopa do informacij in z njimi interagira, postal ključni del razvoja spletnih aplikacij.
+
+V tej lekciji bomo videli, kako asinhrono pridobiti podatke s strežnika in jih uporabiti za prikaz informacij na spletni strani, ne da bi morali ponovno naložiti HTML.
+
+### Predpogoji
+
+Za to lekcijo morate imeti izdelan [obrazec za prijavo in registracijo](../2-forms/README.md) kot del spletne aplikacije. Prav tako morate namestiti [Node.js](https://nodejs.org) in [lokalno zagnati strežniški API](../api/README.md), da pridobite podatke o računih.
+
+Preverite, ali strežnik pravilno deluje, tako da v terminalu zaženete naslednji ukaz:
+
+```sh
+curl http://localhost:5000/api
+# -> should return "Bank API v1.0.0" as a result
+```
+
+---
+
+## AJAX in pridobivanje podatkov
+
+Tradicionalne spletne strani posodabljajo prikazano vsebino, ko uporabnik izbere povezavo ali pošlje podatke prek obrazca, tako da ponovno naložijo celotno HTML stran. Vsakič, ko je treba naložiti nove podatke, spletni strežnik vrne povsem novo HTML stran, ki jo mora brskalnik obdelati, kar prekine trenutno dejanje uporabnika in omeji interakcije med nalaganjem. Ta način delovanja imenujemo *večstranska aplikacija* ali *MPA*.
+
+![Potek posodobitve v večstranski aplikaciji](../../../../translated_images/mpa.7f7375a1a2d4aa779d3f928a2aaaf9ad76bcdeb05cfce2dc27ab126024050f51.sl.png)
+
+Ko so spletne aplikacije postale bolj kompleksne in interaktivne, se je pojavila nova tehnika, imenovana [AJAX (Asynchronous JavaScript and XML)](https://en.wikipedia.org/wiki/Ajax_(programming)). Ta tehnika omogoča, da spletne aplikacije pošiljajo in pridobivajo podatke s strežnika asinhrono z uporabo JavaScripta, ne da bi bilo treba ponovno naložiti HTML stran, kar omogoča hitrejše posodobitve in bolj gladke interakcije z uporabnikom. Ko so novi podatki pridobljeni s strežnika, je mogoče trenutno HTML stran posodobiti z JavaScriptom z uporabo [DOM](https://developer.mozilla.org/docs/Web/API/Document_Object_Model) API-ja. Sčasoma se je ta pristop razvil v to, kar danes imenujemo [*enostranska aplikacija* ali *SPA*](https://en.wikipedia.org/wiki/Single-page_application).
+
+![Potek posodobitve v enostranski aplikaciji](../../../../translated_images/spa.268ec73b41f992c2a21ef9294235c6ae597b3c37e2c03f0494c2d8857325cc57.sl.png)
+
+Ko je bil AJAX prvič predstavljen, je bil edini API za asinhrono pridobivanje podatkov [`XMLHttpRequest`](https://developer.mozilla.org/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest). Vendar pa sodobni brskalniki zdaj podpirajo bolj priročen in zmogljiv [`Fetch` API](https://developer.mozilla.org/docs/Web/API/Fetch_API), ki uporablja obljube (promises) in je bolje prilagojen za obdelavo podatkov v obliki JSON.
+
+> Čeprav vsi sodobni brskalniki podpirajo `Fetch API`, je vedno dobro preveriti [tabelo združljivosti na caniuse.com](https://caniuse.com/fetch), če želite, da vaša spletna aplikacija deluje tudi v starejših brskalnikih.
+
+### Naloga
+
+V [prejšnji lekciji](../2-forms/README.md) smo implementirali obrazec za registracijo za ustvarjanje računa. Zdaj bomo dodali kodo za prijavo z obstoječim računom in pridobivanje njegovih podatkov. Odprite datoteko `app.js` in dodajte novo funkcijo `login`:
+
+```js
+async function login() {
+  const loginForm = document.getElementById('loginForm')
+  const user = loginForm.user.value;
+}
+```
+
+Začnemo z iskanjem elementa obrazca z `getElementById()`, nato pa pridobimo uporabniško ime iz vnosa z `loginForm.user.value`. Vsak kontrolnik obrazca je mogoče dostopati prek njegovega imena (določenega v HTML-ju z atributom `name`) kot lastnosti obrazca.
+
+Podobno kot pri registraciji bomo ustvarili drugo funkcijo za izvedbo zahteve strežniku, tokrat za pridobivanje podatkov o računu:
+
+```js
+async function getAccount(user) {
+  try {
+    const response = await fetch('//localhost:5000/api/accounts/' + encodeURIComponent(user));
+    return await response.json();
+  } catch (error) {
+    return { error: error.message || 'Unknown error' };
+  }
+}
+```
+
+Uporabimo `fetch` API za asinhrono zahtevo podatkov s strežnika, vendar tokrat ne potrebujemo dodatnih parametrov, razen URL-ja, saj samo poizvedujemo podatke. Privzeto `fetch` ustvari HTTP zahtevo [`GET`](https://developer.mozilla.org/docs/Web/HTTP/Methods/GET), kar je točno tisto, kar potrebujemo.
+
+✅ `encodeURIComponent()` je funkcija, ki pobegne posebne znake za URL. Kakšne težave bi lahko imeli, če te funkcije ne pokličemo in neposredno uporabimo vrednost `user` v URL-ju?
+
+Zdaj posodobimo našo funkcijo `login`, da uporabi `getAccount`:
+
+```js
+async function login() {
+  const loginForm = document.getElementById('loginForm')
+  const user = loginForm.user.value;
+  const data = await getAccount(user);
+
+  if (data.error) {
+    return console.log('loginError', data.error);
+  }
+
+  account = data;
+  navigate('/dashboard');
+}
+```
+
+Ker je `getAccount` asinhrona funkcija, jo moramo združiti z ključnimi besedami `await`, da počakamo na rezultat strežnika. Kot pri vsaki zahtevi strežniku se moramo ukvarjati tudi s primeri napak. Za zdaj bomo dodali le sporočilo v dnevnik, da prikažemo napako, in se k temu vrnili kasneje.
+
+Nato moramo podatke shraniti nekam, da jih lahko kasneje uporabimo za prikaz informacij na nadzorni plošči. Ker spremenljivka `account` še ne obstaja, bomo na vrhu naše datoteke ustvarili globalno spremenljivko:
+
+```js
+let account = null;
+```
+
+Ko so uporabniški podatki shranjeni v spremenljivko, lahko preidemo s strani *login* na *dashboard* z uporabo funkcije `navigate()`, ki jo že imamo.
+
+Nazadnje moramo poklicati našo funkcijo `login`, ko je obrazec za prijavo oddan, tako da spremenimo HTML:
+
+```html
+<form id="loginForm" action="javascript:login()">
+```
+
+Preverite, ali vse deluje pravilno, tako da registrirate nov račun in poskusite prijavo z istim računom.
+
+Preden nadaljujemo na naslednji del, lahko dokončamo funkcijo `register`, tako da na dno funkcije dodamo to:
+
+```js
+account = result;
+navigate('/dashboard');
+```
+
+✅ Ali ste vedeli, da privzeto lahko kličete strežniške API-je samo z *iste domene in porta*, kot je spletna stran, ki jo gledate? To je varnostni mehanizem, ki ga uveljavljajo brskalniki. Ampak počakajte, naša spletna aplikacija deluje na `localhost:3000`, medtem ko strežniški API deluje na `localhost:5000`. Zakaj deluje? Z uporabo tehnike, imenovane [Cross-Origin Resource Sharing (CORS)](https://developer.mozilla.org/docs/Web/HTTP/CORS), je mogoče izvajati zahteve HTTP med različnimi izvoroma, če strežnik doda posebne glave v odgovor, ki omogočajo izjeme za določene domene.
+
+> Več o API-jih lahko izveste v tej [lekciji](https://docs.microsoft.com/learn/modules/use-apis-discover-museum-art/?WT.mc_id=academic-77807-sagibbon).
+
+## Posodobitev HTML-ja za prikaz podatkov
+
+Zdaj, ko imamo uporabniške podatke, moramo posodobiti obstoječi HTML, da jih prikažemo. Že vemo, kako pridobiti element iz DOM-a, na primer z `document.getElementById()`. Ko imate osnovni element, so tukaj nekateri API-ji, ki jih lahko uporabite za njegovo spreminjanje ali dodajanje otroških elementov:
+
+- Z uporabo lastnosti [`textContent`](https://developer.mozilla.org/docs/Web/API/Node/textContent) lahko spremenite besedilo elementa. Upoštevajte, da spreminjanje te vrednosti odstrani vse otroške elemente (če obstajajo) in jih nadomesti z danim besedilom. Tako je to tudi učinkovit način za odstranitev vseh otrok določenega elementa z dodelitvijo praznega niza `''`.
+
+- Z uporabo [`document.createElement()`](https://developer.mozilla.org/docs/Web/API/Document/createElement) skupaj z metodo [`append()`](https://developer.mozilla.org/docs/Web/API/ParentNode/append) lahko ustvarite in pritrdite enega ali več novih otroških elementov.
+
+✅ Z uporabo lastnosti [`innerHTML`](https://developer.mozilla.org/docs/Web/API/Element/innerHTML) elementa je prav tako mogoče spremeniti njegovo HTML vsebino, vendar se je tej treba izogibati, saj je ranljiva za napade [cross-site scripting (XSS)](https://developer.mozilla.org/docs/Glossary/Cross-site_scripting).
+
+### Naloga
+
+Preden nadaljujemo na zaslon nadzorne plošče, moramo na strani *login* narediti še eno stvar. Trenutno, če poskusite prijavo z uporabniškim imenom, ki ne obstaja, se sporočilo prikaže v konzoli, vendar za običajnega uporabnika nič ne spremeni in ne veste, kaj se dogaja.
+
+Dodajmo element z rezerviranim mestom v obrazcu za prijavo, kjer lahko po potrebi prikažemo sporočilo o napaki. Dober kraj bi bil tik pred gumbom za prijavo `<button>`:
+
+```html
+...
+<div id="loginError"></div>
+<button>Login</button>
+...
+```
+
+Ta element `<div>` je prazen, kar pomeni, da na zaslonu ne bo prikazano nič, dokler mu ne dodamo vsebine. Prav tako mu dodelimo `id`, da ga lahko enostavno pridobimo z JavaScriptom.
+
+Vrnite se v datoteko `app.js` in ustvarite novo pomožno funkcijo `updateElement`:
+
+```js
+function updateElement(id, text) {
+  const element = document.getElementById(id);
+  element.textContent = text;
+}
+```
+
+Ta funkcija je precej preprosta: glede na *id* elementa in *besedilo* bo posodobila besedilno vsebino DOM elementa z ustreznim `id`. Uporabimo to metodo namesto prejšnjega sporočila o napaki v funkciji `login`:
+
+```js
+if (data.error) {
+  return updateElement('loginError', data.error);
+}
+```
+
+Zdaj, če poskusite prijavo z neveljavnim računom, bi morali videti nekaj takega:
+
+![Posnetek zaslona, ki prikazuje sporočilo o napaki med prijavo](../../../../translated_images/login-error.416fe019b36a63276764c2349df5d99e04ebda54fefe60c715ee87a28d5d4ad0.sl.png)
+
+Zdaj imamo besedilo o napaki, ki se prikaže vizualno, vendar če ga poskusite z bralnikom zaslona, boste opazili, da se nič ne napove. Da bi besedilo, ki je dinamično dodano na stran, napovedali bralniki zaslona, mora uporabljati nekaj, kar se imenuje [Live Region](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/ARIA_Live_Regions). Tukaj bomo uporabili posebno vrsto live regije, imenovano opozorilo:
+
+```html
+<div id="loginError" role="alert"></div>
+```
+
+Enako vedenje implementirajte za napake funkcije `register` (ne pozabite posodobiti HTML-ja).
+
+## Prikaz informacij na nadzorni plošči
+
+Z uporabo istih tehnik, ki smo jih pravkar videli, bomo poskrbeli tudi za prikaz informacij o računu na strani nadzorne plošče.
+
+Tako izgleda objekt računa, pridobljen s strežnika:
+
+```json
+{
+  "user": "test",
+  "currency": "$",
+  "description": "Test account",
+  "balance": 75,
+  "transactions": [
+    { "id": "1", "date": "2020-10-01", "object": "Pocket money", "amount": 50 },
+    { "id": "2", "date": "2020-10-03", "object": "Book", "amount": -10 },
+    { "id": "3", "date": "2020-10-04", "object": "Sandwich", "amount": -5 }
+  ],
+}
+```
+
+> Opomba: da si olajšate delo, lahko uporabite že obstoječi račun `test`, ki je že napolnjen s podatki.
+
+### Naloga
+
+Začnimo z zamenjavo razdelka "Balance" v HTML-ju, da dodamo elemente z rezerviranim mestom:
+
+```html
+<section>
+  Balance: <span id="balance"></span><span id="currency"></span>
+</section>
+```
+
+Dodali bomo tudi nov razdelek tik pod tem, da prikažemo opis računa:
+
+```html
+<h2 id="description"></h2>
+```
+
+✅ Ker opis računa deluje kot naslov za vsebino pod njim, je označen semantično kot naslov. Več o tem, kako je [struktura naslovov](https://www.nomensa.com/blog/2017/how-structure-headings-web-accessibility) pomembna za dostopnost, in kritično preglejte stran, da ugotovite, kaj bi še lahko bilo naslov.
+
+Nato bomo v `app.js` ustvarili novo funkcijo za zapolnitev rezerviranih mest:
+
+```js
+function updateDashboard() {
+  if (!account) {
+    return navigate('/login');
+  }
+
+  updateElement('description', account.description);
+  updateElement('balance', account.balance.toFixed(2));
+  updateElement('currency', account.currency);
+}
+```
+
+Najprej preverimo, ali imamo potrebne podatke o računu, preden nadaljujemo. Nato uporabimo funkcijo `updateElement()`, ki smo jo ustvarili prej, za posodobitev HTML-ja.
+
+> Da bi bil prikaz stanja lepši, uporabimo metodo [`toFixed(2)`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed), da prisilimo prikaz vrednosti z 2 decimalnima mestoma.
+
+Zdaj moramo poklicati našo funkcijo `updateDashboard()` vsakič, ko je nadzorna plošča naložena. Če ste že dokončali [nalogo iz lekcije 1](../1-template-route/assignment.md), bi moralo biti to enostavno, sicer lahko uporabite naslednjo implementacijo.
+
+Dodajte to kodo na konec funkcije `updateRoute()`:
+
+```js
+if (typeof route.init === 'function') {
+  route.init();
+}
+```
+
+In posodobite definicijo poti z:
+
+```js
+const routes = {
+  '/login': { templateId: 'login' },
+  '/dashboard': { templateId: 'dashboard', init: updateDashboard }
+};
+```
+
+S to spremembo se funkcija `updateDashboard()` pokliče vsakič, ko je prikazana stran nadzorne plošče. Po prijavi bi morali nato videti stanje računa, valuto in opis.
+
+## Dinamično ustvarjanje vrstic tabele z HTML predlogami
+
+V [prvi lekciji](../1-template-route/README.md) smo uporabili HTML predloge skupaj z metodo [`appendChild()`](https://developer.mozilla.org/docs/Web/API/Node/appendChild) za implementacijo navigacije v naši aplikaciji. Predloge so lahko tudi manjše in se uporabljajo za dinamično zapolnjevanje ponavljajočih se delov strani.
+
+Uporabili bomo podoben pristop za prikaz seznama transakcij v HTML tabeli.
+
+### Naloga
+
+Dodajte novo predlogo v `<body>` HTML-ja:
+
+```html
+<template id="transaction">
+  <tr>
+    <td></td>
+    <td></td>
+    <td></td>
+  </tr>
+</template>
+```
+
+Ta predloga predstavlja eno vrstico tabele s tremi stolpci, ki jih želimo zapolniti: *datum*, *objekt* in *znesek* transakcije.
+
+Nato dodajte to lastnost `id` elementu `<tbody>` tabele znotraj predloge nadzorne plošče, da ga lažje najdete z JavaScriptom:
+
+```html
+<tbody id="transactions"></tbody>
+```
+
+Naš HTML je pripravljen, preklopimo na JavaScript kodo in ustvarimo novo funkcijo `createTransactionRow`:
+
+```js
+function createTransactionRow(transaction) {
+  const template = document.getElementById('transaction');
+  const transactionRow = template.content.cloneNode(true);
+  const tr = transactionRow.querySelector('tr');
+  tr.children[0].textContent = transaction.date;
+  tr.children[1].textContent = transaction.object;
+  tr.children[2].textContent = transaction.amount.toFixed(2);
+  return transactionRow;
+}
+```
+
+Ta funkcija naredi točno to, kar njen naziv nakazuje: z uporabo predloge, ki smo jo ustvarili prej, ustvari novo vrstico tabele in zapolni njeno vsebino z podatki o transakciji. To bomo uporabili v naši funkciji `updateDashboard()` za zapolnitev tabele:
+
+```js
+const transactionsRows = document.createDocumentFragment();
+for (const transaction of account.transactions) {
+  const transactionRow = createTransactionRow(transaction);
+  transactionsRows.appendChild(transactionRow);
+}
+updateElement('transactions', transactionsRows);
+```
+
+Tukaj uporabimo metodo [`document.createDocumentFragment()`](https://developer.mozilla.org/docs/Web/API/Document/createDocumentFragment), ki ustvari nov DOM fragment, na katerem lahko delamo, preden ga končno pritrdimo na našo HTML tabelo.
+
+Še vedno moramo narediti eno stvar, preden lahko ta koda deluje, saj naša funkcija `updateElement()` trenutno podpira samo besedilno vsebino. Spremenimo njeno kodo:
+
+```js
+function updateElement(id, textOrNode) {
+  const element = document.getElementById(id);
+  element.textContent = ''; // Removes all children
+  element.append(textOrNode);
+}
+```
+
+Uporabimo metodo [`append()`](https://developer.mozilla.org/docs/Web/API/ParentNode/append), saj omogoča pritrditev bodisi besedila bodisi [DOM vozlišč](https://developer.mozilla.org/docs/Web/API/Node) na starševski element, kar je popolno za vse naše primere uporabe.
+Če poskusite uporabiti račun `test` za prijavo, bi morali zdaj na nadzorni plošči videti seznam transakcij 🎉.
+
+---
+
+## 🚀 Izziv
+
+Sodelujte in poskrbite, da bo stran nadzorne plošče videti kot prava bančna aplikacija. Če ste svojo aplikacijo že oblikovali, poskusite uporabiti [media queries](https://developer.mozilla.org/docs/Web/CSS/Media_Queries), da ustvarite [odziven dizajn](https://developer.mozilla.org/docs/Web/Progressive_web_apps/Responsive/responsive_design_building_blocks), ki bo dobro deloval tako na namiznih kot na mobilnih napravah.
+
+Tukaj je primer oblikovane strani nadzorne plošče:
+
+![Posnetek zaslona primera rezultata nadzorne plošče po oblikovanju](../../../../translated_images/screen2.123c82a831a1d14ab2061994be2fa5de9cec1ce651047217d326d4773a6348e4.sl.png)
+
+## Kviz po predavanju
+
+[Kviz po predavanju](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/46)
+
+## Naloga
+
+[Refaktorirajte in komentirajte svojo kodo](assignment.md)
+
+---
+
+**Omejitev odgovornosti**:  
+Ta dokument je bil preveden z uporabo storitve za prevajanje z umetno inteligenco [Co-op Translator](https://github.com/Azure/co-op-translator). Čeprav si prizadevamo za natančnost, vas prosimo, da upoštevate, da lahko avtomatizirani prevodi vsebujejo napake ali netočnosti. Izvirni dokument v njegovem maternem jeziku je treba obravnavati kot avtoritativni vir. Za ključne informacije priporočamo profesionalni človeški prevod. Ne prevzemamo odgovornosti za morebitna nesporazumevanja ali napačne razlage, ki bi nastale zaradi uporabe tega prevoda.
\ No newline at end of file
diff --git a/translations/sl/7-bank-project/3-data/assignment.md b/translations/sl/7-bank-project/3-data/assignment.md
new file mode 100644
index 00000000..18c80f80
--- /dev/null
+++ b/translations/sl/7-bank-project/3-data/assignment.md
@@ -0,0 +1,29 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "a4abf305ede1cfaadd56a8fab4b4c288",
+  "translation_date": "2025-08-27T22:03:27+00:00",
+  "source_file": "7-bank-project/3-data/assignment.md",
+  "language_code": "sl"
+}
+-->
+# Preoblikujte in komentirajte svojo kodo
+
+## Navodila
+
+Ko vaša koda postaja obsežnejša, je pomembno, da jo pogosto preoblikujete, da ostane berljiva in enostavna za vzdrževanje. Dodajte komentarje in preoblikujte svoj `app.js`, da izboljšate kakovost kode:
+
+- Izločite konstante, kot je osnovni URL API strežnika
+- Poenotite podobno kodo: na primer, ustvarite funkcijo `sendRequest()`, da združite kodo, uporabljeno v `createAccount()` in `getAccount()`
+- Preuredite kodo, da bo bolj pregledna, in dodajte komentarje
+
+## Merila
+
+| Merila  | Odlično                                                                                                                                                        | Zadostno                                                                                         | Potrebno izboljšanje                                                                  |
+| -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- |
+|          | Koda je komentirana, dobro organizirana v različne razdelke in enostavna za branje. Konstante so izločene, ustvarjena je poenotena funkcija `sendRequest()`.    | Koda je čista, vendar bi jo lahko izboljšali z več komentarji, izločanjem konstant ali poenotenjem. | Koda je neurejena, brez komentarjev, konstante niso izločene in koda ni poenotena.    |
+
+---
+
+**Omejitev odgovornosti**:  
+Ta dokument je bil preveden z uporabo storitve za prevajanje z umetno inteligenco [Co-op Translator](https://github.com/Azure/co-op-translator). Čeprav si prizadevamo za natančnost, vas prosimo, da upoštevate, da lahko avtomatizirani prevodi vsebujejo napake ali netočnosti. Izvirni dokument v njegovem maternem jeziku je treba obravnavati kot avtoritativni vir. Za ključne informacije priporočamo profesionalni človeški prevod. Ne prevzemamo odgovornosti za morebitne nesporazume ali napačne razlage, ki bi nastale zaradi uporabe tega prevoda.
\ No newline at end of file
diff --git a/translations/sl/7-bank-project/4-state-management/README.md b/translations/sl/7-bank-project/4-state-management/README.md
new file mode 100644
index 00000000..a18319ba
--- /dev/null
+++ b/translations/sl/7-bank-project/4-state-management/README.md
@@ -0,0 +1,294 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "4fa20c513e367e9cdd401bf49ae16e33",
+  "translation_date": "2025-08-27T22:08:37+00:00",
+  "source_file": "7-bank-project/4-state-management/README.md",
+  "language_code": "sl"
+}
+-->
+# Ustvarjanje bančne aplikacije, 4. del: Koncepti upravljanja stanja
+
+## Predhodni kviz
+
+[Predhodni kviz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/47)
+
+### Uvod
+
+Ko spletna aplikacija raste, postane težko slediti vsem podatkovnim tokovom. Katera koda pridobi podatke, katera stran jih uporablja, kje in kdaj jih je treba posodobiti... hitro lahko nastane zmedena koda, ki jo je težko vzdrževati. To še posebej velja, ko morate deliti podatke med različnimi stranmi aplikacije, na primer uporabniške podatke. Koncept *upravljanja stanja* je vedno obstajal v vseh vrstah programov, vendar je zaradi naraščajoče kompleksnosti spletnih aplikacij postal ključen vidik razvoja.
+
+V tem zadnjem delu bomo pregledali aplikacijo, ki smo jo zgradili, da ponovno premislimo, kako je stanje upravljano, kar bo omogočilo podporo osvežitvi brskalnika kadarkoli in ohranjanje podatkov med uporabniškimi sejami.
+
+### Predpogoji
+
+Za to lekcijo morate dokončati del aplikacije, ki se ukvarja z [pridobivanjem podatkov](../3-data/README.md). Prav tako morate namestiti [Node.js](https://nodejs.org) in [zagnati strežniški API](../api/README.md) lokalno, da lahko upravljate podatke o računih.
+
+Preverite, ali strežnik deluje pravilno, tako da v terminalu izvedete naslednji ukaz:
+
+```sh
+curl http://localhost:5000/api
+# -> should return "Bank API v1.0.0" as a result
+```
+
+---
+
+## Ponovno premislimo upravljanje stanja
+
+V [prejšnji lekciji](../3-data/README.md) smo v aplikaciji uvedli osnovni koncept stanja z globalno spremenljivko `account`, ki vsebuje bančne podatke trenutno prijavljenega uporabnika. Vendar ima naša trenutna implementacija nekaj pomanjkljivosti. Poskusite osvežiti stran, ko ste na nadzorni plošči. Kaj se zgodi?
+
+Trenutna koda ima 3 težave:
+
+- Stanje ni ohranjeno, saj vas osvežitev brskalnika vrne na stran za prijavo.
+- Obstaja več funkcij, ki spreminjajo stanje. Ko aplikacija raste, to oteži sledenje spremembam in zlahka pozabimo posodobiti eno od njih.
+- Stanje ni očiščeno, zato so podatki o računu še vedno prisotni, ko kliknete *Odjava*, čeprav ste na strani za prijavo.
+
+Kodo bi lahko posodobili, da bi te težave rešili eno za drugo, vendar bi to povzročilo podvajanje kode in naredilo aplikacijo bolj zapleteno ter težje vzdrževano. Ali pa si lahko vzamemo nekaj minut in premislimo našo strategijo.
+
+> Katere težave pravzaprav poskušamo rešiti?
+
+[Upravljanje stanja](https://en.wikipedia.org/wiki/State_management) se osredotoča na iskanje dobrega pristopa za reševanje teh dveh specifičnih težav:
+
+- Kako ohraniti podatkovne tokove v aplikaciji razumljive?
+- Kako zagotoviti, da so podatki o stanju vedno usklajeni z uporabniškim vmesnikom (in obratno)?
+
+Ko te težave rešite, so lahko vse druge težave, s katerimi se soočate, že odpravljene ali pa jih je lažje rešiti. Obstaja veliko možnih pristopov za reševanje teh težav, vendar bomo uporabili pogosto rešitev, ki vključuje **centralizacijo podatkov in načinov za njihovo spreminjanje**. Podatkovni tokovi bodo potekali takole:
+
+![Shema, ki prikazuje podatkovne tokove med HTML-jem, uporabniškimi dejanji in stanjem](../../../../translated_images/data-flow.fa2354e0908fecc89b488010dedf4871418a992edffa17e73441d257add18da4.sl.png)
+
+> Tukaj ne bomo obravnavali dela, kjer podatki samodejno sprožijo posodobitev pogleda, saj je to povezano z naprednejšimi koncepti [reaktivnega programiranja](https://en.wikipedia.org/wiki/Reactive_programming). To je dobra tema za nadaljnje raziskovanje, če želite poglobljen vpogled.
+
+✅ Obstaja veliko knjižnic z različnimi pristopi k upravljanju stanja, [Redux](https://redux.js.org) pa je priljubljena izbira. Oglejte si koncepte in vzorce, ki jih uporablja, saj je to pogosto dober način za razumevanje morebitnih težav, s katerimi se lahko soočate v velikih spletnih aplikacijah, in kako jih je mogoče rešiti.
+
+### Naloga
+
+Začeli bomo z nekaj preureditvami. Zamenjajte deklaracijo `account`:
+
+```js
+let account = null;
+```
+
+Z:
+
+```js
+let state = {
+  account: null
+};
+```
+
+Ideja je, da *centraliziramo* vse podatke naše aplikacije v enem samem objektu stanja. Trenutno imamo v stanju samo `account`, zato se veliko ne spremeni, vendar to odpira pot za prihodnje izboljšave.
+
+Prav tako moramo posodobiti funkcije, ki ga uporabljajo. V funkcijah `register()` in `login()` zamenjajte `account = ...` z `state.account = ...`;
+
+Na vrh funkcije `updateDashboard()` dodajte to vrstico:
+
+```js
+const account = state.account;
+```
+
+Ta preureditev sama po sebi ne prinaša veliko izboljšav, vendar je ideja, da postavimo temelje za naslednje spremembe.
+
+## Sledenje spremembam podatkov
+
+Zdaj, ko smo vzpostavili objekt `state` za shranjevanje naših podatkov, je naslednji korak centralizacija posodobitev. Cilj je olajšati sledenje vsem spremembam in kdaj se zgodijo.
+
+Da bi se izognili neželenim spremembam objekta `state`, je dobra praksa, da ga obravnavamo kot [*nespremenljivega*](https://en.wikipedia.org/wiki/Immutable_object), kar pomeni, da ga ni mogoče spreminjati. To pomeni, da morate ustvariti nov objekt stanja, če želite karkoli spremeniti. S tem se zaščitite pred morebitnimi neželenimi [stranskimi učinki](https://en.wikipedia.org/wiki/Side_effect_(computer_science)) in odprete možnosti za nove funkcije v aplikaciji, kot je implementacija razveljavitve/ponovitve, hkrati pa olajšate odpravljanje napak. Na primer, lahko beležite vsako spremembo stanja in hranite zgodovino sprememb, da razumete izvor napake.
+
+V JavaScriptu lahko uporabite [`Object.freeze()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze) za ustvarjanje nespremenljive različice objekta. Če poskusite spremeniti nespremenljiv objekt, bo sprožena izjema.
+
+✅ Ali poznate razliko med *plitkim* in *globokim* nespremenljivim objektom? Več o tem lahko preberete [tukaj](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze#What_is_shallow_freeze).
+
+### Naloga
+
+Ustvarimo novo funkcijo `updateState()`:
+
+```js
+function updateState(property, newData) {
+  state = Object.freeze({
+    ...state,
+    [property]: newData
+  });
+}
+```
+
+V tej funkciji ustvarimo nov objekt stanja in kopiramo podatke iz prejšnjega stanja z uporabo [*operatorja razširitve (`...`)*](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/Spread_syntax#Spread_in_object_literals). Nato z uporabo [notacije z oglatimi oklepaji](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Working_with_Objects#Objects_and_properties) `[property]` prepišemo določeno lastnost objekta stanja z novimi podatki. Na koncu zaklenemo objekt, da preprečimo spremembe, z `Object.freeze()`. Trenutno imamo v stanju shranjeno samo lastnost `account`, vendar lahko s tem pristopom dodate toliko lastnosti, kot jih potrebujete.
+
+Prav tako bomo posodobili inicializacijo `state`, da zagotovimo, da je začetno stanje prav tako zamrznjeno:
+
+```js
+let state = Object.freeze({
+  account: null
+});
+```
+
+Nato posodobite funkcijo `register` tako, da zamenjate `state.account = result;` z:
+
+```js
+updateState('account', result);
+```
+
+Enako storite s funkcijo `login`, tako da zamenjate `state.account = data;` z:
+
+```js
+updateState('account', data);
+```
+
+Zdaj bomo izkoristili priložnost za odpravo težave, da podatki o računu niso očiščeni, ko uporabnik klikne *Odjava*.
+
+Ustvarite novo funkcijo `logout()`:
+
+```js
+function logout() {
+  updateState('account', null);
+  navigate('/login');
+}
+```
+
+V `updateDashboard()` zamenjajte preusmeritev `return navigate('/login');` z `return logout();`;
+
+Poskusite registrirati nov račun, se odjaviti in ponovno prijaviti, da preverite, ali vse še vedno deluje pravilno.
+
+> Nasvet: vse spremembe stanja si lahko ogledate tako, da na dno funkcije `updateState()` dodate `console.log(state)` in odprete konzolo v orodjih za razvijalce vašega brskalnika.
+
+## Ohranjanje stanja
+
+Večina spletnih aplikacij mora ohranjati podatke, da lahko pravilno delujejo. Vsi ključni podatki so običajno shranjeni v bazi podatkov in dostopni prek strežniškega API-ja, kot so podatki o uporabniškem računu v našem primeru. Vendar je včasih zanimivo ohraniti nekatere podatke v odjemalski aplikaciji, ki se izvaja v vašem brskalniku, za boljšo uporabniško izkušnjo ali za izboljšanje zmogljivosti nalaganja.
+
+Ko želite ohraniti podatke v brskalniku, si morate zastaviti nekaj pomembnih vprašanj:
+
+- *Ali so podatki občutljivi?* Izogibajte se shranjevanju občutljivih podatkov na odjemalcu, kot so gesla uporabnikov.
+- *Kako dolgo potrebujete te podatke?* Ali nameravate dostopati do teh podatkov samo med trenutno sejo ali jih želite shraniti za vedno?
+
+Obstaja več načinov za shranjevanje informacij v spletni aplikaciji, odvisno od tega, kaj želite doseči. Na primer, lahko uporabite URL-je za shranjevanje iskalnih poizvedb in jih naredite deljive med uporabniki. Uporabite lahko tudi [HTTP piškotke](https://developer.mozilla.org/docs/Web/HTTP/Cookies), če je treba podatke deliti s strežnikom, na primer informacije o [avtentikaciji](https://en.wikipedia.org/wiki/Authentication).
+
+Druga možnost je uporaba ene od številnih API-jev brskalnika za shranjevanje podatkov. Dva sta še posebej zanimiva:
+
+- [`localStorage`](https://developer.mozilla.org/docs/Web/API/Window/localStorage): [Shramba ključ/vrednost](https://en.wikipedia.org/wiki/Key%E2%80%93value_database), ki omogoča ohranjanje podatkov, specifičnih za trenutno spletno mesto, med različnimi sejami. Podatki, shranjeni v njej, nikoli ne potečejo.
+- [`sessionStorage`](https://developer.mozilla.org/docs/Web/API/Window/sessionStorage): deluje enako kot `localStorage`, razen da se podatki, shranjeni v njej, izbrišejo, ko se seja konča (ko zaprete brskalnik).
+
+Upoštevajte, da oba API-ja omogočata shranjevanje samo [nizov](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String). Če želite shraniti kompleksne objekte, jih boste morali serializirati v format [JSON](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON) z uporabo [`JSON.stringify()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify).
+
+✅ Če želite ustvariti spletno aplikacijo, ki ne deluje s strežnikom, je mogoče ustvariti bazo podatkov na odjemalcu z uporabo API-ja [`IndexedDB`](https://developer.mozilla.org/docs/Web/API/IndexedDB_API). Ta je rezerviran za napredne primere uporabe ali če morate shraniti večjo količino podatkov, saj je bolj zapleten za uporabo.
+
+### Naloga
+
+Želimo, da uporabniki ostanejo prijavljeni, dokler izrecno ne kliknejo gumba *Odjava*, zato bomo uporabili `localStorage` za shranjevanje podatkov o računu. Najprej definirajmo ključ, ki ga bomo uporabili za shranjevanje naših podatkov.
+
+```js
+const storageKey = 'savedAccount';
+```
+
+Nato dodajte to vrstico na konec funkcije `updateState()`:
+
+```js
+localStorage.setItem(storageKey, JSON.stringify(state.account));
+```
+
+S tem bodo podatki o uporabniškem računu ohranjeni in vedno posodobljeni, saj smo prej centralizirali vse posodobitve stanja. Tukaj začnemo izkoriščati vse prejšnje preureditve 🙂.
+
+Ker so podatki shranjeni, moramo poskrbeti tudi za njihovo obnovitev, ko se aplikacija naloži. Ker bomo začeli imeti več inicializacijske kode, je morda dobra ideja, da ustvarimo novo funkcijo `init`, ki vključuje tudi našo prejšnjo kodo na dnu `app.js`:
+
+```js
+function init() {
+  const savedAccount = localStorage.getItem(storageKey);
+  if (savedAccount) {
+    updateState('account', JSON.parse(savedAccount));
+  }
+
+  // Our previous initialization code
+  window.onpopstate = () => updateRoute();
+  updateRoute();
+}
+
+init();
+```
+
+Tukaj pridobimo shranjene podatke in, če obstajajo, ustrezno posodobimo stanje. Pomembno je, da to storimo *pred* posodobitvijo poti, saj lahko obstaja koda, ki se zanaša na stanje med posodobitvijo strani.
+
+Privzeto stran naše aplikacije lahko naredimo tudi *Nadzorno ploščo*, saj zdaj ohranjamo podatke o računu. Če podatki niso najdeni, nadzorna plošča vseeno poskrbi za preusmeritev na stran *Prijava*. V `updateRoute()` zamenjajte privzeto `return navigate('/login');` z `return navigate('/dashboard');`.
+
+Zdaj se prijavite v aplikacijo in poskusite osvežiti stran. Ostati bi morali na nadzorni plošči. S to posodobitvijo smo rešili vse začetne težave...
+
+## Osvežitev podatkov
+
+...Vendar smo morda ustvarili novo težavo. Ups!
+
+Pojdite na nadzorno ploščo z računom `test`, nato v terminalu izvedite ta ukaz za ustvarjanje nove transakcije:
+
+```sh
+curl --request POST \
+     --header "Content-Type: application/json" \
+     --data "{ \"date\": \"2020-07-24\", \"object\": \"Bought book\", \"amount\": -20 }" \
+     http://localhost:5000/api/accounts/test/transactions
+```
+
+Zdaj poskusite osvežiti stran nadzorne plošče v brskalniku. Kaj se zgodi? Ali vidite novo transakcijo?
+
+Stanje je ohranjeno za nedoločen čas zahvaljujoč `localStorage`, vendar to tudi pomeni, da se nikoli ne posodobi, dokler se ne odjavite iz aplikacije in ponovno prijavite!
+
+Ena od možnih strategij za rešitev tega problema je, da vsakič, ko se naloži nadzorna plošča, ponovno naložimo podatke o računu, da se izognemo zastarelim podatkom.
+
+### Naloga
+
+Ustvarite novo funkcijo `updateAccountData`:
+
+```js
+async function updateAccountData() {
+  const account = state.account;
+  if (!account) {
+    return logout();
+  }
+
+  const data = await getAccount(account.user);
+  if (data.error) {
+    return logout();
+  }
+
+  updateState('account', data);
+}
+```
+
+Ta metoda preveri, ali smo trenutno prijavljeni, nato pa ponovno naloži podatke o računu s strežnika.
+
+Ustvarite še eno funkcijo z imenom `refresh`:
+
+```js
+async function refresh() {
+  await updateAccountData();
+  updateDashboard();
+}
+```
+
+Ta funkcija posodobi podatke o računu, nato pa poskrbi za posodobitev HTML-ja na strani nadzorne plošče. To je funkcija, ki jo moramo poklicati, ko se naloži pot nadzorne plošče. Posodobite definicijo poti z:
+
+```js
+const routes = {
+  '/login': { templateId: 'login' },
+  '/dashboard': { templateId: 'dashboard', init: refresh }
+};
+```
+
+Zdaj poskusite osvežiti nadzorno ploščo, prikazati bi se morali posodobljeni podatki o računu.
+
+---
+
+## 🚀 Izziv
+
+Zdaj, ko vsakič, ko se naloži nadzorna plošča, ponovno naložimo podatke o računu, menite, da je še vedno potrebno ohranjati *vse podatke o računu*?
+
+Poskusite skupaj spremeniti, kaj se shrani in naloži iz `localStorage`, tako da vključuje samo tisto, kar je absolutno potrebno za delovanje aplikacije.
+
+## Kviz po predavanju
+[Post-predavanje kviz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/48)
+
+## Naloga
+
+[Izvedite dialog "Dodaj transakcijo"](assignment.md)
+
+Tukaj je primer rezultata po zaključeni nalogi:
+
+![Posnetek zaslona, ki prikazuje primer dialoga "Dodaj transakcijo"](../../../../translated_images/dialog.93bba104afeb79f12f65ebf8f521c5d64e179c40b791c49c242cf15f7e7fab15.sl.png)
+
+---
+
+**Omejitev odgovornosti**:  
+Ta dokument je bil preveden z uporabo storitve za prevajanje z umetno inteligenco [Co-op Translator](https://github.com/Azure/co-op-translator). Čeprav si prizadevamo za natančnost, vas prosimo, da upoštevate, da lahko avtomatizirani prevodi vsebujejo napake ali netočnosti. Izvirni dokument v njegovem izvirnem jeziku je treba obravnavati kot avtoritativni vir. Za ključne informacije priporočamo profesionalni človeški prevod. Ne prevzemamo odgovornosti za morebitna nesporazumevanja ali napačne razlage, ki bi nastale zaradi uporabe tega prevoda.
\ No newline at end of file
diff --git a/translations/sl/7-bank-project/4-state-management/assignment.md b/translations/sl/7-bank-project/4-state-management/assignment.md
new file mode 100644
index 00000000..0b37cf83
--- /dev/null
+++ b/translations/sl/7-bank-project/4-state-management/assignment.md
@@ -0,0 +1,39 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "f23a868536c07da991b1d4e773161e25",
+  "translation_date": "2025-08-27T22:09:46+00:00",
+  "source_file": "7-bank-project/4-state-management/assignment.md",
+  "language_code": "sl"
+}
+-->
+# Implementirajte dialog "Dodaj transakcijo"
+
+## Navodila
+
+Naša bančna aplikacija še vedno nima ene pomembne funkcije: možnosti vnosa novih transakcij. 
+Uporabite vse, kar ste se naučili v štirih prejšnjih lekcijah, da implementirate dialog "Dodaj transakcijo":
+
+- Dodajte gumb "Dodaj transakcijo" na strani nadzorne plošče
+- Ustvarite novo stran s HTML predlogo ali uporabite JavaScript za prikaz/skritje dialoga HTML, ne da bi zapustili stran nadzorne plošče (lahko uporabite lastnost [`hidden`](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/hidden) ali CSS razrede)
+- Poskrbite za [dostopnost s tipkovnico in bralnikom zaslona](https://developer.paciellogroup.com/blog/2018/06/the-current-state-of-modal-dialog-accessibility/) za dialog
+- Implementirajte HTML obrazec za vnos podatkov
+- Ustvarite JSON podatke iz podatkov obrazca in jih pošljite API-ju
+- Posodobite stran nadzorne plošče z novimi podatki
+
+Oglejte si [specifikacije strežniškega API-ja](../api/README.md), da preverite, kateri API morate poklicati in kakšna je pričakovana oblika JSON-a.
+
+Tukaj je primer rezultata po zaključku naloge:
+
+![Posnetek zaslona, ki prikazuje primer dialoga "Dodaj transakcijo"](../../../../translated_images/dialog.93bba104afeb79f12f65ebf8f521c5d64e179c40b791c49c242cf15f7e7fab15.sl.png)
+
+## Merila
+
+| Merila  | Odlično                                                                                           | Zadostno                                                                                                               | Potrebno izboljšanje                        |
+| --------| ------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- | ------------------------------------------- |
+|         | Dodajanje transakcije je popolnoma implementirano v skladu z najboljšimi praksami, ki smo jih obravnavali v lekcijah. | Dodajanje transakcije je implementirano, vendar ne v skladu z najboljšimi praksami iz lekcij ali deluje le delno.      | Dodajanje transakcije sploh ne deluje.      |
+
+---
+
+**Omejitev odgovornosti**:  
+Ta dokument je bil preveden z uporabo storitve za prevajanje z umetno inteligenco [Co-op Translator](https://github.com/Azure/co-op-translator). Čeprav si prizadevamo za natančnost, vas prosimo, da upoštevate, da lahko avtomatizirani prevodi vsebujejo napake ali netočnosti. Izvirni dokument v njegovem maternem jeziku je treba obravnavati kot avtoritativni vir. Za ključne informacije priporočamo profesionalni človeški prevod. Ne prevzemamo odgovornosti za morebitna nesporazumevanja ali napačne razlage, ki bi nastale zaradi uporabe tega prevoda.
\ No newline at end of file
diff --git a/translations/sl/7-bank-project/README.md b/translations/sl/7-bank-project/README.md
new file mode 100644
index 00000000..2acd01cd
--- /dev/null
+++ b/translations/sl/7-bank-project/README.md
@@ -0,0 +1,35 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "830359535306594b448db6575ce5cdee",
+  "translation_date": "2025-08-27T22:00:25+00:00",
+  "source_file": "7-bank-project/README.md",
+  "language_code": "sl"
+}
+-->
+# :dollar: Zgradi banko
+
+V tem projektu se boste naučili, kako zgraditi izmišljeno banko. Te lekcije vključujejo navodila za postavitev spletne aplikacije in zagotavljanje poti, izdelavo obrazcev, upravljanje stanja ter pridobivanje podatkov iz API-ja, iz katerega lahko pridobite podatke banke.
+
+| ![Screen1](../../../translated_images/screen1.baccbba0f1f93364672eb250d2fbd21574bb1caf79a2155022dc098a741cbdfe.sl.png) | ![Screen2](../../../translated_images/screen2.123c82a831a1d14ab2061994be2fa5de9cec1ce651047217d326d4773a6348e4.sl.png) |
+|--------------------------------|--------------------------------|
+
+## Lekcije
+
+1. [HTML predloge in poti v spletni aplikaciji](1-template-route/README.md)
+2. [Izdelava obrazca za prijavo in registracijo](2-forms/README.md)
+3. [Metode pridobivanja in uporabe podatkov](3-data/README.md)
+4. [Koncepti upravljanja stanja](4-state-management/README.md)
+
+### Zasluge
+
+Te lekcije so bile napisane z :hearts: avtorja [Yohan Lasorsa](https://twitter.com/sinedied).
+
+Če vas zanima, kako zgraditi [strežniški API](/7-bank-project/api/README.md), ki se uporablja v teh lekcijah, lahko sledite [temu nizu videoposnetkov](https://aka.ms/NodeBeginner) (zlasti videoposnetki od 17 do 21).
+
+Prav tako si lahko ogledate [ta interaktivni učni vodič](https://aka.ms/learn/express-api).
+
+---
+
+**Omejitev odgovornosti**:  
+Ta dokument je bil preveden z uporabo storitve za prevajanje z umetno inteligenco [Co-op Translator](https://github.com/Azure/co-op-translator). Čeprav si prizadevamo za natančnost, vas prosimo, da upoštevate, da lahko avtomatizirani prevodi vsebujejo napake ali netočnosti. Izvirni dokument v njegovem maternem jeziku je treba obravnavati kot avtoritativni vir. Za ključne informacije priporočamo profesionalni prevod s strani človeka. Ne prevzemamo odgovornosti za morebitne nesporazume ali napačne razlage, ki bi nastale zaradi uporabe tega prevoda.
\ No newline at end of file
diff --git a/translations/sl/7-bank-project/api/README.md b/translations/sl/7-bank-project/api/README.md
new file mode 100644
index 00000000..7d35e746
--- /dev/null
+++ b/translations/sl/7-bank-project/api/README.md
@@ -0,0 +1,48 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "9884f8c8a61cf56214450f8b16a094ce",
+  "translation_date": "2025-08-27T22:03:55+00:00",
+  "source_file": "7-bank-project/api/README.md",
+  "language_code": "sl"
+}
+-->
+# Bank API
+
+> Bank API, zgrajen z [Node.js](https://nodejs.org) + [Express](https://expressjs.com/).
+
+API je že zgrajen in ni del naloge.
+
+Če pa vas zanima, kako zgraditi takšen API, lahko sledite tej seriji videoposnetkov: https://aka.ms/NodeBeginner (videoposnetki od 17 do 21 pokrivajo točno ta API).
+
+Prav tako si lahko ogledate ta interaktivni vodič: https://aka.ms/learn/express-api
+
+## Zagon strežnika
+
+Prepričajte se, da imate nameščen [Node.js](https://nodejs.org).
+
+1. Git clone tega repozitorija [The Web-Dev-For-Beginners](https://github.com/microsoft/Web-Dev-For-Beginners).
+2. Odprite terminal in se pomaknite v mapo `Web-Dev-For-Beginners/7-bank-project/api`.
+3. Zaženite `npm install` in počakajte, da se paketi namestijo (lahko traja nekaj časa, odvisno od kakovosti vaše internetne povezave).
+4. Ko je namestitev končana, zaženite `npm start` in pripravljeni ste.
+
+Strežnik bi moral začeti poslušati na portu `5000`.
+*Ta strežnik bo deloval skupaj z glavnim strežnikom aplikacije banke (ki posluša na portu `3000`), zato ga ne zapirajte.*
+
+> Opomba: vsi vnosi so shranjeni v pomnilniku in niso trajno shranjeni, zato se ob zaustavitvi strežnika vsi podatki izgubijo.
+
+## Podrobnosti API-ja
+
+Pot                                          | Opis
+---------------------------------------------|------------------------------------
+GET    /api/                                 | Pridobi informacije o strežniku
+POST   /api/accounts/                        | Ustvari račun, npr.: `{ user: 'Yohan', description: 'My budget', currency: 'EUR', balance: 100 }`
+GET    /api/accounts/:user                   | Pridobi vse podatke za določen račun
+DELETE /api/accounts/:user                   | Odstrani določen račun
+POST   /api/accounts/:user/transactions      | Dodaj transakcijo, npr.: `{ date: '2020-07-23T18:25:43.511Z', object: 'Bought a book', amount: -20 }`
+DELETE  /api/accounts/:user/transactions/:id | Odstrani določeno transakcijo
+
+---
+
+**Omejitev odgovornosti**:  
+Ta dokument je bil preveden z uporabo storitve za prevajanje z umetno inteligenco [Co-op Translator](https://github.com/Azure/co-op-translator). Čeprav si prizadevamo za natančnost, vas prosimo, da upoštevate, da lahko avtomatizirani prevodi vsebujejo napake ali netočnosti. Izvirni dokument v njegovem izvirnem jeziku je treba obravnavati kot avtoritativni vir. Za ključne informacije priporočamo profesionalni človeški prevod. Ne prevzemamo odgovornosti za morebitne nesporazume ali napačne razlage, ki bi nastale zaradi uporabe tega prevoda.
\ No newline at end of file
diff --git a/translations/sl/7-bank-project/solution/README.md b/translations/sl/7-bank-project/solution/README.md
new file mode 100644
index 00000000..c93ba277
--- /dev/null
+++ b/translations/sl/7-bank-project/solution/README.md
@@ -0,0 +1,27 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "461aa4fc74c6b1789c3a13b5d82c0cd9",
+  "translation_date": "2025-08-27T22:04:16+00:00",
+  "source_file": "7-bank-project/solution/README.md",
+  "language_code": "sl"
+}
+-->
+# Bančna aplikacija
+
+> Primer rešitve za projekt bančne aplikacije, zgrajen z osnovnim HTML5, CSS in JavaScript (brez uporabe ogrodij ali knjižnic).
+
+## Zagon aplikacije
+
+Najprej se prepričajte, da imate zagnan [API strežnik](../api/README.md).
+
+Za zagon aplikacije lahko uporabite kateri koli spletni strežnik, vendar ker bi morali imeti [Node.js](https://nodejs.org) že nameščen za zagon API-ja, lahko:
+
+1. Klonirate ta repozitorij z Git.
+2. Odprete terminal, se pomaknete v to mapo in zaženete `npx lite-server .`. To bo zagnalo razvojni spletni strežnik na vratih `3000`.
+3. V brskalniku odprete `http://localhost:3000` za zagon aplikacije.
+
+---
+
+**Omejitev odgovornosti**:  
+Ta dokument je bil preveden z uporabo storitve za prevajanje z umetno inteligenco [Co-op Translator](https://github.com/Azure/co-op-translator). Čeprav si prizadevamo za natančnost, vas prosimo, da upoštevate, da lahko avtomatizirani prevodi vsebujejo napake ali netočnosti. Izvirni dokument v njegovem maternem jeziku je treba obravnavati kot avtoritativni vir. Za ključne informacije priporočamo profesionalni človeški prevod. Ne prevzemamo odgovornosti za morebitna napačna razumevanja ali napačne interpretacije, ki bi nastale zaradi uporabe tega prevoda.
\ No newline at end of file
diff --git a/translations/sl/8-code-editor/1-using-a-code-editor/README.md b/translations/sl/8-code-editor/1-using-a-code-editor/README.md
new file mode 100644
index 00000000..a8539b38
--- /dev/null
+++ b/translations/sl/8-code-editor/1-using-a-code-editor/README.md
@@ -0,0 +1,158 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "7aa6e4f270d38d9cb17f2b5bd86b863d",
+  "translation_date": "2025-08-27T22:53:20+00:00",
+  "source_file": "8-code-editor/1-using-a-code-editor/README.md",
+  "language_code": "sl"
+}
+-->
+# Uporaba urejevalnika kode
+
+Ta lekcija zajema osnove uporabe [VSCode.dev](https://vscode.dev), spletnega urejevalnika kode, ki vam omogoča spreminjanje kode in prispevanje k projektu brez potrebe po namestitvi programske opreme na vaš računalnik.
+
+## Cilji učenja
+
+V tej lekciji boste spoznali:
+
+- Kako uporabljati urejevalnik kode v projektnem okolju
+- Kako slediti spremembam z različico nadzora
+- Kako prilagoditi urejevalnik za razvoj
+
+### Predpogoji
+
+Preden začnete, morate ustvariti račun na [GitHub](https://github.com). Obiščite [GitHub](https://github.com/) in ustvarite račun, če ga še nimate.
+
+### Uvod
+
+Urejevalnik kode je ključno orodje za pisanje programov in sodelovanje pri obstoječih projektih. Ko boste razumeli osnove urejevalnika in kako uporabljati njegove funkcije, jih boste lahko uporabili pri pisanju kode.
+
+## Začetek z VSCode.dev
+
+[VSCode.dev](https://vscode.dev) je urejevalnik kode na spletu. Ni vam treba ničesar namestiti, saj deluje podobno kot odpiranje katere koli druge spletne strani. Za začetek odprite naslednjo povezavo: [https://vscode.dev](https://vscode.dev). Če niste prijavljeni v [GitHub](https://github.com/), sledite navodilom za prijavo ali ustvarite nov račun in se nato prijavite.
+
+Ko se stran naloži, bo videti podobno kot na tej sliki:
+
+![Privzeti VSCode.dev](../../../../translated_images/default-vscode-dev.5d06881d65c1b3234ce50cd9ed3b0028e6031ad5f5b441bcbed96bfa6311f6d0.sl.png)
+
+Obstajajo tri glavne sekcije, od leve proti desni:
+
+1. _Aktivnostna vrstica_, ki vključuje nekaj ikon, kot so povečevalno steklo 🔎, zobnik ⚙️ in nekaj drugih.
+2. Razširjena aktivnostna vrstica, ki privzeto prikazuje _Raziskovalec_ (_Explorer_), imenovana _stranska vrstica_.
+3. Nazadnje, območje kode na desni.
+
+Kliknite na vsako ikono, da prikažete različne menije. Ko končate, kliknite na _Raziskovalec_, da se vrnete na začetno mesto.
+
+Ko začnete ustvarjati ali spreminjati kodo, se to dogaja v največjem območju na desni. To območje boste uporabili tudi za vizualizacijo obstoječe kode, kar boste storili v naslednjem koraku.
+
+## Odprite GitHub repozitorij
+
+Prva stvar, ki jo potrebujete, je odpreti GitHub repozitorij. Obstaja več načinov za odpiranje repozitorija. V tem razdelku boste spoznali dva različna načina, kako odpreti repozitorij in začeti delati na spremembah.
+
+### 1. Z urejevalnikom
+
+Uporabite urejevalnik za odpiranje oddaljenega repozitorija. Če obiščete [VSCode.dev](https://vscode.dev), boste videli gumb _"Open Remote Repository"_:
+
+![Odpri oddaljeni repozitorij](../../../../translated_images/open-remote-repository.bd9c2598b8949e7fc283cdfc8f4050c6205a7c7c6d3f78c4b135115d037d6fa2.sl.png)
+
+Lahko uporabite tudi ukazno paleto. Ukazna paleta je vnosno polje, kjer lahko vnesete katero koli besedo, ki je del ukaza ali dejanja, da najdete pravi ukaz za izvedbo. Uporabite meni v zgornjem levem kotu, nato izberite _View_ in nato _Command Palette_, ali pa uporabite naslednjo bližnjico na tipkovnici: Ctrl-Shift-P (na MacOS-u Command-Shift-P).
+
+![Meni palete](../../../../translated_images/palette-menu.4946174e07f426226afcdad707d19b8d5150e41591c751c45b5dee213affef91.sl.png)
+
+Ko se meni odpre, vnesite _open remote repository_ in nato izberite prvo možnost. Prikazali se bodo repozitoriji, katerih del ste ali ki ste jih nedavno odprli. Lahko uporabite tudi celoten URL GitHub-a za izbiro enega. Uporabite naslednji URL in ga prilepite v polje:
+
+```
+https://github.com/microsoft/Web-Dev-For-Beginners
+```
+
+✅ Če je uspešno, boste videli vse datoteke tega repozitorija naložene v urejevalniku besedila.
+
+### 2. Z uporabo URL-ja
+
+Repozitorij lahko naložite tudi neposredno z URL-jem. Na primer, celoten URL trenutnega repozitorija je [https://github.com/microsoft/Web-Dev-For-Beginners](https://github.com/microsoft/Web-Dev-For-Beginners), vendar lahko zamenjate domeno GitHub z `VSCode.dev/github` in repozitorij naložite neposredno. Nastali URL bi bil [https://vscode.dev/github/microsoft/Web-Dev-For-Beginners](https://vscode.dev/github/microsoft/Web-Dev-For-Beginners).
+
+## Urejanje datotek
+
+Ko odprete repozitorij v brskalniku/vscode.dev, je naslednji korak posodabljanje ali spreminjanje projekta.
+
+### 1. Ustvarite novo datoteko
+
+Datoteko lahko ustvarite znotraj obstoječe mape ali v korenskem imeniku/mapi. Za ustvarjanje nove datoteke odprite lokacijo/mapo, kamor želite shraniti datoteko, in izberite ikono _'New file ...'_ na aktivnostni vrstici _(levo)_, ji dodelite ime in pritisnite enter.
+
+![Ustvari novo datoteko](../../../../translated_images/create-new-file.2814e609c2af9aeb6c6fd53156c503ac91c3d538f9cac63073b2dd4a7631f183.sl.png)
+
+### 2. Uredite in shranite datoteko v repozitoriju
+
+Uporaba vscode.dev je koristna, kadar želite hitro posodobiti svoj projekt brez potrebe po lokalni namestitvi programske opreme. 
+
+Za posodobitev kode kliknite ikono 'Explorer', ki se nahaja na aktivnostni vrstici, da si ogledate datoteke in mape v repozitoriju. Izberite datoteko, da jo odprete v območju kode, naredite spremembe in shranite.
+
+![Uredi datoteko](../../../../translated_images/edit-a-file.52c0ee665ef19f08119d62d63f395dfefddc0a4deb9268d73bfe791f52c5807a.sl.png)
+
+Ko končate s posodabljanjem projekta, izberite ikono _`source control`_, ki vsebuje vse nove spremembe, ki ste jih naredili v repozitoriju.
+
+Za ogled sprememb, ki ste jih naredili v projektu, izberite datoteke v mapi `Changes` v razširjeni aktivnostni vrstici. To bo odprlo 'Delovno drevo' (_Working Tree_), kjer boste vizualno videli spremembe, ki ste jih naredili v datoteki. Rdeča označuje izbris, zelena pa dodatek.
+
+![Ogled sprememb](../../../../translated_images/working-tree.c58eec08e6335c79cc708c0c220c0b7fea61514bd3c7fb7471905a864aceac7c.sl.png)
+
+Če ste zadovoljni s spremembami, ki ste jih naredili, se pomaknite na mapo `Changes` in kliknite gumb `+`, da pripravite spremembe za oddajo. Priprava pomeni pripravo sprememb za oddajo na GitHub.
+
+Če pa niste zadovoljni z nekaterimi spremembami in jih želite zavreči, se pomaknite na mapo `Changes` in izberite ikono `undo`.
+
+Nato vnesite _sporočilo o oddaji_ (opis spremembe, ki ste jo naredili v projektu), kliknite ikono za preverjanje, da oddate in potisnete spremembe.
+
+Ko končate z delom na projektu, izberite ikono 'hamburger menu' v zgornjem levem kotu, da se vrnete v repozitorij na github.com.
+
+![Priprava in oddaja sprememb](../../../../8-code-editor/images/edit-vscode.dev.gif)
+
+## Uporaba razširitev
+
+Namestitev razširitev v VSCode omogoča dodajanje novih funkcij in možnosti prilagojenega razvojnega okolja v urejevalniku, kar izboljša vaš delovni proces. Te razširitve pomagajo dodati podporo za več programskih jezikov in so pogosto bodisi generične bodisi jezikovno specifične.
+
+Za pregled seznama vseh razpoložljivih razširitev kliknite ikono _`Extensions`_ na aktivnostni vrstici in začnite vnašati ime razširitve v besedilno polje z oznako _'Search Extensions in Marketplace'_.
+Videli boste seznam razširitev, vsaka pa vsebuje **ime razširitve, ime založnika, en stavek opisa, število prenosov** in **oceno z zvezdicami**.
+
+![Podrobnosti razširitev](../../../../translated_images/extension-details.9f8f1fd4e9eb2de5069ae413119eb8ee43172776383ebe2f7cf640e11df2e106.sl.png)
+
+Prav tako lahko pregledate vse prej nameščene razširitve v razširjeni mapi _`Installed`_, priljubljene razširitve, ki jih uporablja večina razvijalcev, v mapi _`Popular`_ in priporočene razširitve za vas bodisi na podlagi uporabnikov v istem delovnem prostoru bodisi na podlagi vaših nedavno odprtih datotek v mapi _`Recommended`_.
+
+![Ogled razširitev](../../../../translated_images/extensions.eca0e0c7f59a10b5c88be7fe24b3e32cca6b6058b35a49026c3a9d80b1813b7c.sl.png)
+
+### 1. Namestitev razširitev
+
+Za namestitev razširitve vnesite ime razširitve v iskalno polje in kliknite nanjo, da si ogledate dodatne informacije o razširitvi v območju kode, ko se prikaže v razširjeni aktivnostni vrstici.
+
+Lahko kliknete _modri gumb za namestitev_ v razširjeni aktivnostni vrstici za namestitev ali uporabite gumb za namestitev, ki se prikaže v območju kode, ko izberete razširitev za nalaganje dodatnih informacij.
+
+![Namestitev razširitev](../../../../8-code-editor/images/install-extension.gif)
+
+### 2. Prilagoditev razširitev
+
+Po namestitvi razširitve boste morda morali prilagoditi njeno delovanje glede na vaše želje. Za to izberite ikono razširitev, in tokrat se bo vaša razširitev pojavila v mapi _Installed_, kliknite na _**ikono zobnika**_ in pojdite na _Extensions Setting_.
+
+![Prilagoditev nastavitev razširitev](../../../../translated_images/extension-settings.21c752ae4f4cdb78a867f140ccd0680e04619d0c44bb4afb26373e54b829d934.sl.png)
+
+### 3. Upravljanje razširitev
+
+Po namestitvi in uporabi razširitve vam vscode.dev ponuja možnosti za upravljanje razširitev glede na različne potrebe. Na primer, lahko se odločite za:
+
+- **Onemogočanje:** _(Začasno onemogočite razširitev, ko je ne potrebujete, vendar je ne želite popolnoma odstraniti)_
+
+    Izberite nameščeno razširitev v razširjeni aktivnostni vrstici > kliknite ikono zobnika > izberite 'Disable' ali 'Disable (Workspace)' **ALI** odprite razširitev v območju kode in kliknite modri gumb Disable.
+
+- **Odstranitev:** Izberite nameščeno razširitev v razširjeni aktivnostni vrstici > kliknite ikono zobnika > izberite 'Uninstall' **ALI** odprite razširitev v območju kode in kliknite modri gumb Uninstall.
+
+---
+
+## Naloga
+
+[Ustvarite spletno stran življenjepisa z uporabo vscode.dev](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/8-code-editor/1-using-a-code-editor/assignment.md)
+
+## Pregled in samostojno učenje
+
+Preberite več o [VSCode.dev](https://code.visualstudio.com/docs/editor/vscode-web?WT.mc_id=academic-0000-alfredodeza) in nekaterih njegovih drugih funkcijah.
+
+---
+
+**Omejitev odgovornosti**:  
+Ta dokument je bil preveden z uporabo storitve za prevajanje z umetno inteligenco [Co-op Translator](https://github.com/Azure/co-op-translator). Čeprav si prizadevamo za natančnost, vas prosimo, da upoštevate, da lahko avtomatizirani prevodi vsebujejo napake ali netočnosti. Izvirni dokument v njegovem maternem jeziku je treba obravnavati kot avtoritativni vir. Za ključne informacije priporočamo profesionalni človeški prevod. Ne prevzemamo odgovornosti za morebitna nesporazumevanja ali napačne razlage, ki bi nastale zaradi uporabe tega prevoda.
\ No newline at end of file
diff --git a/translations/sl/8-code-editor/1-using-a-code-editor/assignment.md b/translations/sl/8-code-editor/1-using-a-code-editor/assignment.md
new file mode 100644
index 00000000..d5d9fa61
--- /dev/null
+++ b/translations/sl/8-code-editor/1-using-a-code-editor/assignment.md
@@ -0,0 +1,247 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "2fcb983b8dbadadb1bc2e97f8c12dac5",
+  "translation_date": "2025-08-27T22:54:48+00:00",
+  "source_file": "8-code-editor/1-using-a-code-editor/assignment.md",
+  "language_code": "sl"
+}
+-->
+# Ustvarite spletno stran za življenjepis z uporabo vscode.dev
+
+_Kako kul bi bilo, če bi vas zaposlovalec prosil za vaš življenjepis, vi pa bi mu poslali kar URL?_ 😎
+
+## Cilji
+
+Po tej nalogi boste znali:
+
+- Ustvariti spletno stran za predstavitev svojega življenjepisa
+
+### Predpogoji
+
+1. GitHub račun. Obiščite [GitHub](https://github.com/) in ustvarite račun, če ga še nimate.
+
+## Koraki
+
+**Korak 1:** Ustvarite novo GitHub repozitorij in mu dajte ime `my-resume`.
+
+**Korak 2:** V svojem repozitoriju ustvarite datoteko `index.html`. Na github.com bomo dodali vsaj eno datoteko, saj praznega repozitorija ni mogoče odpreti v vscode.dev.
+
+Kliknite povezavo `creating a new file`, vnesite ime `index.html` in izberite gumb `Commit new file`.
+
+![Ustvarite novo datoteko na github.com](../../../../translated_images/new-file-github.com.c886796d800e8056561829a181be1382c5303da9d902d8b2dd82b68a4806e21f.sl.png)
+
+**Korak 3:** Odprite [VSCode.dev](https://vscode.dev) in izberite gumb `Open Remote Repository`.
+
+Kopirajte URL repozitorija, ki ste ga pravkar ustvarili za svojo spletno stran življenjepisa, in ga prilepite v vnosno polje:
+
+_Zamenjajte `your-username` z vašim GitHub uporabniškim imenom._
+
+```
+https://github.com/your-username/my-resume
+```
+
+✅ Če je bilo uspešno, boste videli svoj projekt in datoteko index.html odprto v urejevalniku besedila v brskalniku.
+
+![Ustvarite novo datoteko](../../../../translated_images/project-on-vscode.dev.e79815a9a95ee7feac72ebe5c941c91279716be37c575dbdbf2f43bea2c7d8b6.sl.png)
+
+**Korak 4:** Odprite datoteko `index.html`, prilepite spodnjo kodo v območje kode in shranite.
+
+<details>
+    <summary><b>HTML koda, ki je odgovorna za vsebino vaše spletne strani življenjepisa.</b></summary>
+    
+        <html>
+
+            <head>
+                <link href="style.css" rel="stylesheet">
+                <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
+                <title>Vaše ime gre sem!</title>
+            </head>
+            <body>
+                <header id="header">
+                    <!-- glava življenjepisa z vašim imenom in nazivom -->
+                    <h1>Vaše ime gre sem!</h1>
+                    <hr>
+                    Vaša vloga!
+                    <hr>
+                </header>
+                <main>
+                    <article id="mainLeft">
+                        <section>
+                            <h2>KONTAKT</h2>
+                            <!-- kontaktni podatki, vključno s socialnimi omrežji -->
+                            <p>
+                                <i class="fa fa-envelope" aria-hidden="true"></i>
+                                <a href="mailto:username@domain.top-level domain">Vnesite svoj e-poštni naslov tukaj</a>
+                            </p>
+                            <p>
+                                <i class="fab fa-github" aria-hidden="true"></i>
+                                <a href="github.com/yourGitHubUsername">Vnesite svoje uporabniško ime tukaj!</a>
+                            </p>
+                            <p>
+                                <i class="fab fa-linkedin" aria-hidden="true"></i>
+                                <a href="linkedin.com/yourLinkedInUsername">Vnesite svoje uporabniško ime tukaj!</a>
+                            </p>
+                        </section>
+                        <section>
+                            <h2>SPRETNOSTI</h2>
+                            <!-- vaše spretnosti -->
+                            <ul>
+                                <li>Spretnost 1!</li>
+                                <li>Spretnost 2!</li>
+                                <li>Spretnost 3!</li>
+                                <li>Spretnost 4!</li>
+                            </ul>
+                        </section>
+                        <section>
+                            <h2>IZOBRAZBA</h2>
+                            <!-- vaša izobrazba -->
+                            <h3>Vnesite svoj študij tukaj!</h3>
+                            <p>
+                                Vnesite svojo izobraževalno ustanovo tukaj!
+                            </p>
+                            <p>
+                                Začetek - Konec
+                            </p>
+                        </section>            
+                    </article>
+                    <article id="mainRight">
+                        <section>
+                            <h2>O MENI</h2>
+                            <!-- o vas -->
+                            <p>Vnesite nekaj o sebi!</p>
+                        </section>
+                        <section>
+                            <h2>DELOVNE IZKUŠNJE</h2>
+                            <!-- vaše delovne izkušnje -->
+                            <h3>Delovno mesto</h3>
+                            <p>
+                                Ime organizacije gre sem | Začetni mesec – Končni mesec
+                            </p>
+                            <ul>
+                                    <li>Naloga 1 - Napišite, kaj ste počeli!</li>
+                                    <li>Naloga 2 - Napišite, kaj ste počeli!</li>
+                                    <li>Napišite rezultate/vpliv vašega prispevka</li>
+                                    
+                            </ul>
+                            <h3>Delovno mesto 2</h3>
+                            <p>
+                                Ime organizacije gre sem | Začetni mesec – Končni mesec
+                            </p>
+                            <ul>
+                                    <li>Naloga 1 - Napišite, kaj ste počeli!</li>
+                                    <li>Naloga 2 - Napišite, kaj ste počeli!</li>
+                                    <li>Napišite rezultate/vpliv vašega prispevka</li>
+                                    
+                            </ul>
+                        </section>
+                    </article>
+                </main>
+            </body>
+        </html>
+</details>
+
+Dodajte podrobnosti svojega življenjepisa, da zamenjate _nadomestno besedilo_ v HTML kodi.
+
+**Korak 5:** Premaknite kazalec na mapo My-Resume, kliknite ikono `New File ...` in ustvarite 2 novi datoteki v svojem projektu: `style.css` in `codeswing.json`.
+
+**Korak 6:** Odprite datoteko `style.css`, prilepite spodnjo kodo in shranite.
+
+<details>
+        <summary><b>CSS koda za oblikovanje postavitve strani.</b></summary>
+            
+            body {
+                font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+                font-size: 16px;
+                max-width: 960px;
+                margin: auto;
+            }
+            h1 {
+                font-size: 3em;
+                letter-spacing: .6em;
+                padding-top: 1em;
+                padding-bottom: 1em;
+            }
+
+            h2 {
+                font-size: 1.5em;
+                padding-bottom: 1em;
+            }
+
+            h3 {
+                font-size: 1em;
+                padding-bottom: 1em;
+            }
+            main { 
+                display: grid;
+                grid-template-columns: 40% 60%;
+                margin-top: 3em;
+            }
+            header {
+                text-align: center;
+                margin: auto 2em;
+            }
+
+            section {
+                margin: auto 1em 4em 2em;
+            }
+
+            i {
+                margin-right: .5em;
+            }
+
+            p {
+                margin: .2em auto
+            }
+
+            hr {
+                border: none;
+                background-color: lightgray;
+                height: 1px;
+            }
+
+            h1, h2, h3 {
+                font-weight: 100;
+                margin-bottom: 0;
+            }
+            #mainLeft {
+                border-right: 1px solid lightgray;
+            }
+            
+</details>
+
+**Korak 6:** Odprite datoteko `codeswing.json`, prilepite spodnjo kodo in shranite.
+
+    {
+    "scripts": [],
+    "styles": []
+    }
+
+**Korak 7:** Namestite razširitev `Codeswing`, da si ogledate spletno stran življenjepisa na območju kode.
+
+Kliknite ikono _`Extensions`_ na orodni vrstici in vnesite Codeswing. Kliknite _modri gumb za namestitev_ na razširjeni orodni vrstici ali uporabite gumb za namestitev, ki se prikaže na območju kode, ko izberete razširitev za nalaganje dodatnih informacij. Takoj po namestitvi razširitve opazujte spremembe v svojem projektu 😃.
+
+![Namestitev razširitev](../../../../8-code-editor/images/install-extension.gif)
+
+To je tisto, kar boste videli na zaslonu po namestitvi razširitve.
+
+![Razširitev Codeswing v akciji](../../../../translated_images/after-codeswing-extension-pb.0ebddddcf73b550994947a9084e35e2836c713ae13839d49628e3c764c1cfe83.sl.png)
+
+Če ste zadovoljni s spremembami, ki ste jih naredili, premaknite kazalec na mapo `Changes` in kliknite gumb `+`, da pripravite spremembe.
+
+Vnesite sporočilo za commit _(Opis spremembe, ki ste jo naredili v projektu)_ in potrdite svoje spremembe s klikom na `check`. Ko končate z delom na projektu, izberite ikono hamburger menija v zgornjem levem kotu, da se vrnete v repozitorij na GitHubu.
+
+Čestitke 🎉 Pravkar ste ustvarili svojo spletno stran življenjepisa z uporabo vscode.dev v nekaj korakih.
+
+## 🚀 Izziv
+
+Odprite oddaljeni repozitorij, za katerega imate dovoljenja za urejanje, in posodobite nekaj datotek. Nato poskusite ustvariti novo vejo s svojimi spremembami in ustvariti Pull Request.
+
+## Pregled in samostojno učenje
+
+Preberite več o [VSCode.dev](https://code.visualstudio.com/docs/editor/vscode-web?WT.mc_id=academic-0000-alfredodeza) in nekaterih njegovih drugih funkcijah.
+
+---
+
+**Omejitev odgovornosti**:  
+Ta dokument je bil preveden z uporabo storitve za prevajanje z umetno inteligenco [Co-op Translator](https://github.com/Azure/co-op-translator). Čeprav si prizadevamo za natančnost, vas prosimo, da upoštevate, da lahko avtomatizirani prevodi vsebujejo napake ali netočnosti. Izvirni dokument v njegovem izvirnem jeziku je treba obravnavati kot avtoritativni vir. Za ključne informacije priporočamo profesionalni človeški prevod. Ne prevzemamo odgovornosti za morebitna napačna razumevanja ali napačne interpretacije, ki bi nastale zaradi uporabe tega prevoda.
\ No newline at end of file
diff --git a/translations/sl/CODE_OF_CONDUCT.md b/translations/sl/CODE_OF_CONDUCT.md
new file mode 100644
index 00000000..ea0e937b
--- /dev/null
+++ b/translations/sl/CODE_OF_CONDUCT.md
@@ -0,0 +1,23 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "b0a9b4cccd918195f58224d5793da1a6",
+  "translation_date": "2025-08-27T22:00:03+00:00",
+  "source_file": "CODE_OF_CONDUCT.md",
+  "language_code": "sl"
+}
+-->
+# Microsoft Open Source Kodeks ravnanja
+
+Ta projekt je sprejel [Microsoft Open Source Kodeks ravnanja](https://opensource.microsoft.com/codeofconduct/?WT.mc_id=academic-77807-sagibbon).
+
+Viri:
+
+- [Microsoft Open Source Kodeks ravnanja](https://opensource.microsoft.com/codeofconduct/?WT.mc_id=academic-77807-sagibbon)
+- [Microsoft Pogosta vprašanja o kodeksu ravnanja](https://opensource.microsoft.com/codeofconduct/faq/?WT.mc_id=academic-77807-sagibbon)
+- Za vprašanja ali pomisleke se obrnite na [opencode@microsoft.com](mailto:opencode@microsoft.com)
+
+---
+
+**Omejitev odgovornosti**:  
+Ta dokument je bil preveden z uporabo storitve za prevajanje z umetno inteligenco [Co-op Translator](https://github.com/Azure/co-op-translator). Čeprav si prizadevamo za natančnost, vas prosimo, da upoštevate, da lahko avtomatizirani prevodi vsebujejo napake ali netočnosti. Izvirni dokument v njegovem izvirnem jeziku je treba obravnavati kot avtoritativni vir. Za ključne informacije priporočamo profesionalni človeški prevod. Ne prevzemamo odgovornosti za morebitna nesporazumevanja ali napačne razlage, ki bi nastale zaradi uporabe tega prevoda.
\ No newline at end of file
diff --git a/translations/sl/CONTRIBUTING.md b/translations/sl/CONTRIBUTING.md
new file mode 100644
index 00000000..d036c8ad
--- /dev/null
+++ b/translations/sl/CONTRIBUTING.md
@@ -0,0 +1,23 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "777400e9f0336c7ee2f9a1200a88478f",
+  "translation_date": "2025-08-27T21:58:24+00:00",
+  "source_file": "CONTRIBUTING.md",
+  "language_code": "sl"
+}
+-->
+# Prispevanje
+
+Ta projekt pozdravlja prispevke in predloge. Večina prispevkov zahteva, da se strinjate s Pogodbo o licenciranju prispevkov (CLA), s katero izjavljate, da imate pravico in dejansko podeljujete pravice za uporabo vašega prispevka. Za več podrobnosti obiščite [https://cla.microsoft.com](https://cla.microsoft.com/?WT.mc_id=academic-77807-sagibbon).
+
+Ko oddate zahtevo za združitev (pull request), bo CLA-bot samodejno preveril, ali morate predložiti CLA, in ustrezno označil PR (npr. z oznako ali komentarjem). Preprosto sledite navodilom, ki jih zagotovi bot. To boste morali storiti le enkrat za vse repozitorije, ki uporabljajo naš CLA. Prosimo, da nam tudi poskusite pojasniti, zakaj ste izvedli to spremembo, da bomo bolje razumeli vašo zahtevo.
+
+Ta projekt je sprejel [Microsoftov kodeks ravnanja za odprtokodno programsko opremo](https://opensource.microsoft.com/codeofconduct/?WT.mc_id=academic-77807-sagibbon).  
+Za več informacij si oglejte [Pogosta vprašanja o kodeksu ravnanja](https://opensource.microsoft.com/codeofconduct/faq/?WT.mc_id=academic-77807-sagibbon)  
+ali se obrnite na [opencode@microsoft.com](mailto:opencode@microsoft.com) za dodatna vprašanja ali komentarje.
+
+---
+
+**Omejitev odgovornosti**:  
+Ta dokument je bil preveden z uporabo storitve za prevajanje z umetno inteligenco [Co-op Translator](https://github.com/Azure/co-op-translator). Čeprav si prizadevamo za natančnost, vas prosimo, da upoštevate, da lahko avtomatizirani prevodi vsebujejo napake ali netočnosti. Izvirni dokument v njegovem maternem jeziku je treba obravnavati kot avtoritativni vir. Za ključne informacije priporočamo profesionalni človeški prevod. Ne prevzemamo odgovornosti za morebitna nesporazumevanja ali napačne razlage, ki bi nastale zaradi uporabe tega prevoda.
\ No newline at end of file
diff --git a/translations/sl/README.md b/translations/sl/README.md
new file mode 100644
index 00000000..d2e9c5a8
--- /dev/null
+++ b/translations/sl/README.md
@@ -0,0 +1,206 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "b672130244189715ac084c3259f6ab58",
+  "translation_date": "2025-08-27T21:56:22+00:00",
+  "source_file": "README.md",
+  "language_code": "sl"
+}
+-->
+[![GitHub license](https://img.shields.io/github/license/microsoft/Web-Dev-For-Beginners.svg)](https://github.com/microsoft/Web-Dev-For-Beginners/blob/master/LICENSE)  
+[![GitHub contributors](https://img.shields.io/github/contributors/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/)  
+[![GitHub issues](https://img.shields.io/github/issues/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/)  
+[![GitHub pull-requests](https://img.shields.io/github/issues-pr/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/)  
+[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)  
+
+[![GitHub watchers](https://img.shields.io/github/watchers/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Watch&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/)  
+[![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Fork&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/)  
+[![GitHub stars](https://img.shields.io/github/stars/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Star&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/stargazers/)  
+
+[![](https://dcbadge.vercel.app/api/server/ByRwuEEgH4)](https://discord.gg/zxKYvhSnVp?WT.mc_id=academic-000002-leestott)  
+
+[![Open in Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)  
+
+# Spletni razvoj za začetnike - Učni načrt  
+
+Naučite se osnov spletnega razvoja z našim 12-tedenskim celovitim tečajem, ki ga ponujajo Microsoftovi Cloud Advocates. Vsaka od 24 lekcij se poglobi v JavaScript, CSS in HTML prek praktičnih projektov, kot so terariji, razširitve za brskalnik in vesoljske igre. Sodelujte v kvizih, razpravah in praktičnih nalogah. Izboljšajte svoje veščine in optimizirajte svoje znanje z našo učinkovito projektno usmerjeno pedagogiko. Začnite svojo pot kodiranja še danes!  
+
+#### 🧑‍🎓 _Ste študent?_  
+
+Obiščite [**stran Student Hub**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon), kjer boste našli vire za začetnike, pakete za študente in celo načine za pridobitev brezplačnega certifikata. To je stran, ki jo želite dodati med zaznamke in občasno preveriti, saj vsebino mesečno posodabljamo.  
+
+### 📣 Obvestilo - _Nov učni načrt_ o generativni umetni inteligenci za JavaScript je pravkar izšel  
+
+Ne zamudite našega novega učnega načrta o generativni umetni inteligenci!  
+
+Obiščite [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) in začnite!  
+
+<div>  
+  <img src="./images/background.png" width="600px" />  
+</div>  
+
+- Lekcije, ki pokrivajo vse od osnov do RAG.  
+- Interakcija z zgodovinskimi osebnostmi z uporabo GenAI in naše spremljevalne aplikacije.  
+- Zabavna in privlačna pripoved, potovali boste skozi čas!  
+
+<div>  
+  <img src="./images/character.png" width="600px" />  
+</div>  
+
+Vsaka lekcija vključuje nalogo za dokončanje, preverjanje znanja in izziv, ki vas vodi pri učenju tem, kot so:  
+- Oblikovanje pozivov in inženiring pozivov  
+- Generiranje aplikacij za besedilo in slike  
+- Aplikacije za iskanje  
+
+Obiščite [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) in začnite!  
+
+## 🌱 Začetek  
+
+> **Učitelji**, [vključili smo nekaj predlogov](for-teachers.md), kako uporabiti ta učni načrt. Veseli bomo vaših povratnih informacij [v našem forumu za razprave](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!  
+
+**[Učenci](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, za vsako lekcijo začnite s kvizom pred predavanjem, nato preberite gradivo za predavanje, dokončajte različne aktivnosti in preverite svoje razumevanje s kvizom po predavanju.  
+
+Za izboljšanje učne izkušnje se povežite s svojimi vrstniki in skupaj delajte na projektih! Razprave so spodbujene v našem [forumu za razprave](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), kjer bo naša ekipa moderatorjev na voljo za odgovore na vaša vprašanja.  
+
+Za nadaljnje izobraževanje toplo priporočamo raziskovanje [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) za dodatno študijsko gradivo.  
+
+### 📋 Priprava okolja  
+
+Ta učni načrt ima pripravljeno razvojno okolje! Ko začnete, lahko izberete, ali želite učni načrt izvajati v [Codespace](https://github.com/features/codespaces/) (_okolje, ki temelji na brskalniku in ne zahteva namestitev_) ali lokalno na svojem računalniku z uporabo urejevalnika besedila, kot je [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).  
+
+#### Ustvarite svoje repozitorij  
+Da boste svoje delo enostavno shranili, priporočamo, da ustvarite svojo kopijo tega repozitorija. To lahko storite s klikom na gumb **Use this template** na vrhu strani. To bo ustvarilo nov repozitorij v vašem GitHub računu s kopijo učnega načrta.  
+
+Sledite tem korakom:  
+1. **Forkajte repozitorij**: Kliknite gumb "Fork" v zgornjem desnem kotu te strani.  
+2. **Klonirajte repozitorij**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`  
+
+#### Zagon učnega načrta v Codespace  
+
+V svoji kopiji tega repozitorija, ki ste jo ustvarili, kliknite gumb **Code** in izberite **Open with Codespaces**. To bo ustvarilo nov Codespace, v katerem lahko delate.  
+
+<img src="./images/createcodespace.png" alt="Ustvari Codespace" style="width:270px;"/>  
+
+#### Zagon učnega načrta lokalno na vašem računalniku  
+
+Za zagon tega učnega načrta lokalno na vašem računalniku boste potrebovali urejevalnik besedila, brskalnik in orodje za ukazno vrstico. Naša prva lekcija, [Uvod v programske jezike in orodja](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/1-getting-started-lessons/1-intro-to-programming-languages), vas bo vodila skozi različne možnosti za vsako od teh orodij, da izberete tisto, kar vam najbolj ustreza.  
+
+Naše priporočilo je, da uporabite [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) kot urejevalnik, ki ima tudi vgrajen [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Visual Studio Code lahko prenesete [tukaj](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).  
+
+1. Klonirajte svoj repozitorij na svoj računalnik. To lahko storite s klikom na gumb **Code** in kopiranjem URL-ja:  
+
+    <img src="./images/createcodespace.png" alt="Kopirajte URL svojega repozitorija" style="width:270px;"/>  
+
+    Nato odprite [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) v [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) in zaženite naslednji ukaz, pri čemer zamenjajte `<your-repository-url>` z URL-jem, ki ste ga pravkar kopirali:  
+
+    ```bash 
+    git clone <your-repository-url>
+    ```  
+
+2. Odprite mapo v Visual Studio Code. To lahko storite s klikom na **File** > **Open Folder** in izbiro mape, ki ste jo pravkar klonirali.  
+
+> Priporočene razširitve za Visual Studio Code:  
+>  
+> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - za predogled HTML strani znotraj Visual Studio Code  
+> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - za hitrejše pisanje kode  
+
+## 📂 Vsaka lekcija vključuje:  
+
+- neobvezno sketchnote  
+- neobvezni dopolnilni video  
+- kviz za ogrevanje pred lekcijo  
+- pisno lekcijo  
+- za projektno usmerjene lekcije, vodnike po korakih za izdelavo projekta  
+- preverjanje znanja  
+- izziv  
+- dopolnilno branje  
+- nalogo  
+- kviz po lekciji  
+
+> **Opomba o kvizih**: Vsi kvizi so v mapi Quiz-app, skupaj 48 kvizov s po tremi vprašanji. Povezani so znotraj lekcij, aplikacijo za kvize pa je mogoče zagnati lokalno ali namestiti na Azure; sledite navodilom v mapi `quiz-app`. Postopoma jih lokaliziramo.  
+
+## 🗃️ Lekcije  
+
+|     |                       Ime projekta                       |                            Naučene vsebine                            | Učni cilji                                                                                                                          |                                                         Povezana lekcija                                                         |         Avtor          |  
+| :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |  
+| 01  |                     Začetek                              |           Uvod v programiranje in orodja za delo                       | Spoznajte osnovne temelje večine programskih jezikov in programsko opremo, ki pomaga profesionalnim razvijalcem pri delu            | [Uvod v programske jezike in orodja za delo](/1-getting-started-lessons/1-intro-to-programming-languages/README.md)             |         Jasmine         |  
+| 02  |                     Začetek                              |             Osnove GitHuba, vključno z delom v ekipi                   | Kako uporabljati GitHub v svojem projektu in kako sodelovati z drugimi na kodi                                                      |                            [Uvod v GitHub](/1-getting-started-lessons/2-github-basics/README.md)                                 |          Floor          |  
+| 03  |                     Začetek                              |                             Dostopnost                                | Spoznajte osnove spletne dostopnosti                                                                                                 |                       [Osnove dostopnosti](/1-getting-started-lessons/3-accessibility/README.md)                                 |       Christopher       |  
+| 04  |                        Osnove JS                         |                         Podatkovni tipi v JavaScriptu                 | Osnove podatkovnih tipov v JavaScriptu                                                                                              |                                       [Podatkovni tipi](/2-js-basics/1-data-types/README.md)                                     |         Jasmine         |  
+| 05  |                        Osnove JS                         |                         Funkcije in metode                           | Spoznajte funkcije in metode za upravljanje logičnega toka aplikacije                                                               |                              [Funkcije in metode](/2-js-basics/2-functions-methods/README.md)                                    | Jasmine in Christopher |  
+| 06  |                        Osnove JS                         |                        Sprejemanje odločitev z JS                    | Naučite se ustvarjati pogoje v kodi z metodami za sprejemanje odločitev                                                             |                                 [Sprejemanje odločitev](/2-js-basics/3-making-decisions/README.md)                               |         Jasmine         |  
+| 07  |                        Osnove JS                         |                            Tabele in zanke                           | Delo s podatki z uporabo tabel in zank v JavaScriptu                                                                                |                                   [Tabele in zanke](/2-js-basics/4-arrays-loops/README.md)                                       |         Jasmine         |  
+| 08  |       [Terarij](/3-terrarium/solution/README.md)         |                            HTML v praksi                             | Zgradite HTML za ustvarjanje spletnega terarija, osredotočite se na postavitev                                                      |                                 [Uvod v HTML](/3-terrarium/1-intro-to-html/README.md)                                            |           Jen           |  
+| 09  |       [Terarij](/3-terrarium/solution/README.md)         |                            CSS v praksi                              | Zgradite CSS za oblikovanje spletnega terarija, osredotočite se na osnove CSS, vključno z odzivnostjo strani                        |                                  [Uvod v CSS](/3-terrarium/2-intro-to-css/README.md)                                             |           Jen           |  
+| 10  |            [Terarij](/3-terrarium/solution/README.md)    |                 Zaprtja v JavaScriptu, manipulacija DOM               | Zgradite JavaScript za delovanje terarija kot vmesnika za povleci/spusti, osredotočite se na zaprtja in manipulacijo DOM            |                  [Zaprtja v JavaScriptu, manipulacija DOM](/3-terrarium/3-intro-to-DOM-and-closures/README.md)                   |           Jen           |  
+| 11  |          [Igra tipkanja](/4-typing-game/solution/README.md) |                          Zgradite igro tipkanja                      | Naučite se uporabljati dogodke tipkovnice za upravljanje logike vaše JavaScript aplikacije                                          |                                [Programiranje, ki temelji na dogodkih](/4-typing-game/typing-game/README.md)                     |       Christopher       |  
+| 12  | [Green Browser Extension](/5-browser-extension/solution/README.md) |                         Delo z brskalniki                          | Naučite se, kako delujejo brskalniki, njihovo zgodovino in kako postaviti prve elemente razširitve za brskalnik                     |                               [O brskalnikih](/5-browser-extension/1-about-browsers/README.md)                                |           Jen           |
+| 13  | [Green Browser Extension](/5-browser-extension/solution/README.md) | Izdelava obrazca, klicanje API-ja in shranjevanje spremenljivk v lokalni shrambi | Zgradite JavaScript elemente svoje razširitve za brskalnik za klicanje API-ja z uporabo spremenljivk, shranjenih v lokalni shrambi |                [API-ji, obrazci in lokalna shramba](/5-browser-extension/2-forms-browsers-local-storage/README.md)             |           Jen           |
+| 14  | [Green Browser Extension](/5-browser-extension/solution/README.md) |          Ozadni procesi v brskalniku, spletna zmogljivost          | Uporabite ozadne procese brskalnika za upravljanje ikone razširitve; spoznajte spletno zmogljivost in nekaj optimizacij             |             [Ozadne naloge in zmogljivost](/5-browser-extension/3-background-tasks-and-performance/README.md)                 |           Jen           |
+| 15  |           [Space Game](/6-space-game/solution/README.md)           |             Naprednejši razvoj iger z JavaScriptom                 | Spoznajte dedovanje z uporabo razredov in kompozicije ter vzorec Pub/Sub kot pripravo na izdelavo igre                             |                      [Uvod v napredni razvoj iger](/6-space-game/1-introduction/README.md)                                     |          Chris          |
+| 16  |           [Space Game](/6-space-game/solution/README.md)           |                           Risanje na platno                         | Spoznajte API za platno (Canvas API), ki se uporablja za risanje elementov na zaslon                                              |                                [Risanje na platno](/6-space-game/2-drawing-to-canvas/README.md)                                |          Chris          |
+| 17  |           [Space Game](/6-space-game/solution/README.md)           |                   Premikanje elementov po zaslonu                  | Odkrijte, kako lahko elementi pridobijo gibanje z uporabo kartezičnih koordinat in API-ja za platno                                |                           [Premikanje elementov](/6-space-game/3-moving-elements-around/README.md)                             |          Chris          |
+| 18  |           [Space Game](/6-space-game/solution/README.md)           |                          Zaznavanje trkov                          | Poskrbite, da se elementi zaletijo in reagirajo drug na drugega z uporabo pritiskov na tipke ter dodajte funkcijo za ohlajanje     |                              [Zaznavanje trkov](/6-space-game/4-collision-detection/README.md)                                 |          Chris          |
+| 19  |           [Space Game](/6-space-game/solution/README.md)           |                             Beleženje točk                         | Izvajajte matematične izračune na podlagi stanja in zmogljivosti igre                                                              |                                    [Beleženje točk](/6-space-game/5-keeping-score/README.md)                                   |          Chris          |
+| 20  |           [Space Game](/6-space-game/solution/README.md)           |                     Končanje in ponovni zagon igre                 | Naučite se, kako končati in ponovno zagnati igro, vključno s čiščenjem virov in ponastavitvijo vrednosti spremenljivk              |                                [Pogoji za konec](/6-space-game/6-end-condition/README.md)                                      |          Chris          |
+| 21  |         [Banking App](/7-bank-project/solution/README.md)          |                 HTML predloge in poti v spletni aplikaciji         | Naučite se, kako ustvariti osnovo arhitekture večstranske spletne strani z uporabo usmerjanja in HTML predlog                     |                            [HTML predloge in poti](/7-bank-project/1-template-route/README.md)                                 |          Yohan          |
+| 22  |         [Banking App](/7-bank-project/solution/README.md)          |                  Izdelava obrazca za prijavo in registracijo       | Spoznajte izdelavo obrazcev in upravljanje rutine za preverjanje veljavnosti                                                      |                                           [Obrazci](/7-bank-project/2-forms/README.md)                                         |          Yohan          |
+| 23  |         [Banking App](/7-bank-project/solution/README.md)          |                   Metode pridobivanja in uporabe podatkov          | Kako podatki tečejo v vašo aplikacijo in iz nje, kako jih pridobiti, shraniti in odstraniti                                       |                                            [Podatki](/7-bank-project/3-data/README.md)                                         |          Yohan          |
+| 24  |         [Banking App](/7-bank-project/solution/README.md)          |                      Koncepti upravljanja stanja                   | Naučite se, kako vaša aplikacija ohranja stanje in kako ga programersko upravljati                                                |                                [Upravljanje stanja](/7-bank-project/4-state-management/README.md)                              |          Yohan          |
+
+
+## 🏫 Pedagogika
+
+Naš učni načrt temelji na dveh ključnih pedagoških načelih:
+* učenje na podlagi projektov
+* pogosti kvizi
+
+Program poučuje osnove JavaScripta, HTML-ja in CSS-ja ter najnovejša orodja in tehnike, ki jih uporabljajo sodobni spletni razvijalci. Študenti bodo imeli priložnost pridobiti praktične izkušnje z izdelavo igre za tipkanje, virtualnega terarija, okolju prijazne razširitve za brskalnik, igre v slogu vesoljskih napadalcev in bančne aplikacije za podjetja. Do konca serije bodo študenti pridobili trdno razumevanje spletnega razvoja.
+
+> 🎓 Prve lekcije tega učnega načrta lahko opravite kot [učno pot](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) na Microsoft Learn!
+
+Z zagotavljanjem, da vsebina ustreza projektom, je proces za študente bolj privlačen, hkrati pa se izboljša tudi pomnjenje konceptov. Poleg tega smo napisali več začetnih lekcij o osnovah JavaScripta za uvod v koncepte, skupaj z videoposnetkom iz zbirke "[Serija za začetnike: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", katere avtorji so prispevali k temu učnemu načrtu.
+
+Poleg tega nizko tvegan kviz pred predavanjem usmeri pozornost študenta na učenje teme, medtem ko drugi kviz po predavanju zagotavlja nadaljnje pomnjenje. Ta učni načrt je bil zasnovan tako, da je prilagodljiv in zabaven ter ga je mogoče opraviti v celoti ali delno. Projekti se začnejo majhni in postajajo vse bolj zapleteni do konca 12-tedenskega cikla.
+
+Čeprav smo se namerno izognili uvajanju JavaScript ogrodij, da bi se osredotočili na osnovne veščine, potrebne za spletnega razvijalca pred uporabo ogrodja, bi bil naslednji korak po zaključku tega učnega načrta učenje o Node.js prek druge zbirke videoposnetkov: "[Serija za začetnike: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
+
+> Obiščite naša [pravila obnašanja](CODE_OF_CONDUCT.md) in smernice za [prispevanje](CONTRIBUTING.md). Veseli bomo vaših konstruktivnih povratnih informacij!
+
+
+## 🧭 Dostop brez povezave
+
+To dokumentacijo lahko zaženete brez povezave z uporabo [Docsify](https://docsify.js.org/#/). Forkajte to repozitorij, [namestite Docsify](https://docsify.js.org/#/quickstart) na svoj lokalni računalnik in nato v korenski mapi tega repozitorija vnesite `docsify serve`. Spletna stran bo na voljo na vratih 3000 na vašem lokalnem računalniku: `localhost:3000`.
+
+## 📘 PDF
+
+PDF vseh lekcij najdete [tukaj](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
+
+
+## 🎒 Drugi tečaji
+
+Naša ekipa ustvarja tudi druge tečaje! Oglejte si:
+
+- [Generativna umetna inteligenca za začetnike](https://aka.ms/genai-beginners)
+- [Generativna umetna inteligenca za začetnike .NET](https://github.com/microsoft/Generative-AI-for-beginners-dotnet)
+- [Generativna umetna inteligenca z JavaScriptom](https://github.com/microsoft/generative-ai-with-javascript)
+- [Generativna umetna inteligenca z Javo](https://github.com/microsoft/Generative-AI-for-beginners-java)
+- [Umetna inteligenca za začetnike](https://aka.ms/ai-beginners)
+- [Podatkovna znanost za začetnike](https://aka.ms/datascience-beginners)
+- [Strojno učenje za začetnike](https://aka.ms/ml-beginners)
+- [Kibernetska varnost za začetnike](https://github.com/microsoft/Security-101)
+- [Spletni razvoj za začetnike](https://aka.ms/webdev-beginners)
+- [IoT za začetnike](https://aka.ms/iot-beginners)
+- [XR razvoj za začetnike](https://github.com/microsoft/xr-development-for-beginners)
+- [Obvladovanje GitHub Copilota za agentno uporabo](https://github.com/microsoft/Mastering-GitHub-Copilot-for-Paired-Programming)
+- [Obvladovanje GitHub Copilota za razvijalce C#/.NET](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers)
+- [Izberite svojo pustolovščino s Copilotom](https://github.com/microsoft/CopilotAdventures)
+
+## Licenca
+
+Ta repozitorij je licenciran pod licenco MIT. Za več informacij si oglejte datoteko [LICENSE](../../LICENSE).
+
+---
+
+**Omejitev odgovornosti**:  
+Ta dokument je bil preveden z uporabo storitve za prevajanje z umetno inteligenco [Co-op Translator](https://github.com/Azure/co-op-translator). Čeprav si prizadevamo za natančnost, vas prosimo, da upoštevate, da lahko avtomatizirani prevodi vsebujejo napake ali netočnosti. Izvirni dokument v njegovem izvirnem jeziku je treba obravnavati kot avtoritativni vir. Za ključne informacije priporočamo profesionalni človeški prevod. Ne prevzemamo odgovornosti za morebitna nesporazumevanja ali napačne razlage, ki bi nastale zaradi uporabe tega prevoda.
\ No newline at end of file
diff --git a/translations/sl/SECURITY.md b/translations/sl/SECURITY.md
new file mode 100644
index 00000000..74475f16
--- /dev/null
+++ b/translations/sl/SECURITY.md
@@ -0,0 +1,51 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "4ecc3bf2e27983d4c780be6f26ee6228",
+  "translation_date": "2025-08-27T21:59:00+00:00",
+  "source_file": "SECURITY.md",
+  "language_code": "sl"
+}
+-->
+## Varnost
+
+Microsoft jemlje varnost svojih programske opreme in storitev resno, kar vključuje vse repozitorije izvorne kode, ki jih upravljajo naše GitHub organizacije, med katerimi so [Microsoft](https://github.com/Microsoft), [Azure](https://github.com/Azure), [DotNet](https://github.com/dotnet), [AspNet](https://github.com/aspnet), [Xamarin](https://github.com/xamarin) in [naše GitHub organizacije](https://opensource.microsoft.com/?WT.mc_id=academic-77807-sagibbon).
+
+Če menite, da ste odkrili varnostno ranljivost v katerem koli repozitoriju, ki je v lasti Microsofta in ustreza [Microsoftovi definiciji varnostne ranljivosti](https://docs.microsoft.com/previous-versions/tn-archive/cc751383(v=technet.10)/?WT.mc_id=academic-77807-sagibbon), nam to prosimo sporočite, kot je opisano spodaj.
+
+## Prijava varnostnih težav
+
+**Prosimo, da varnostnih ranljivosti ne prijavljate prek javnih GitHub težav.**
+
+Namesto tega jih prijavite Microsoftovemu centru za odziv na varnostne težave (MSRC) na [https://msrc.microsoft.com/create-report](https://msrc.microsoft.com/create-report/?WT.mc_id=academic-77807-sagibbon).
+
+Če želite prijavo oddati brez prijave, pošljite e-pošto na [secure@microsoft.com](mailto:secure@microsoft.com). Če je mogoče, šifrirajte svoje sporočilo z našim PGP ključem; prenesite ga s strani [Microsoft Security Response Center PGP Key](https://www.microsoft.com/msrc/pgp-key-msrc/?WT.mc_id=academic-77807-sagibbon).
+
+Odgovor bi morali prejeti v 24 urah. Če ga iz kakršnega koli razloga ne prejmete, prosimo, da pošljete nadaljnje sporočilo prek e-pošte, da zagotovite, da smo prejeli vaše prvotno sporočilo. Dodatne informacije najdete na [microsoft.com/msrc](https://www.microsoft.com/msrc/?WT.mc_id=academic-77807-sagibbon).
+
+Prosimo, vključite spodaj navedene informacije (kolikor jih lahko zagotovite), da nam pomagate bolje razumeti naravo in obseg možne težave:
+
+  * Vrsta težave (npr. prelivanje medpomnilnika, SQL injekcija, skriptiranje med spletnimi mesti itd.)
+  * Polne poti izvornih datotek, povezanih z manifestacijo težave
+  * Lokacija prizadete izvorne kode (oznaka/veja/commit ali neposredni URL)
+  * Kakršna koli posebna konfiguracija, potrebna za reproduciranje težave
+  * Koraki za reproduciranje težave
+  * Dokaz koncepta ali izkoriščevalna koda (če je mogoče)
+  * Vpliv težave, vključno s tem, kako bi napadalec lahko izkoristil težavo
+
+Te informacije nam bodo pomagale hitreje obdelati vaše poročilo.
+
+Če poročate v okviru programa nagrajevanja za napake, lahko bolj popolna poročila prispevajo k višji nagradi. Prosimo, obiščite našo stran [Microsoft Bug Bounty Program](https://microsoft.com/msrc/bounty/?WT.mc_id=academic-77807-sagibbon) za več podrobnosti o naših aktivnih programih.
+
+## Prednostni jeziki
+
+Prednost dajemo komunikaciji v angleščini.
+
+## Politika
+
+Microsoft sledi načelu [Usklajeno razkritje ranljivosti](https://www.microsoft.com/msrc/cvd/?WT.mc_id=academic-77807-sagibbon).
+
+---
+
+**Omejitev odgovornosti**:  
+Ta dokument je bil preveden z uporabo storitve za prevajanje z umetno inteligenco [Co-op Translator](https://github.com/Azure/co-op-translator). Čeprav si prizadevamo za natančnost, vas prosimo, da upoštevate, da lahko avtomatizirani prevodi vsebujejo napake ali netočnosti. Izvirni dokument v njegovem maternem jeziku je treba obravnavati kot avtoritativni vir. Za ključne informacije priporočamo profesionalni človeški prevod. Ne prevzemamo odgovornosti za morebitna nesporazume ali napačne razlage, ki bi nastale zaradi uporabe tega prevoda.
\ No newline at end of file
diff --git a/translations/sl/SUPPORT.md b/translations/sl/SUPPORT.md
new file mode 100644
index 00000000..fd0d77f7
--- /dev/null
+++ b/translations/sl/SUPPORT.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "c9d207ff77b4bb46e46dc2b607a8ec1a",
+  "translation_date": "2025-08-27T21:57:48+00:00",
+  "source_file": "SUPPORT.md",
+  "language_code": "sl"
+}
+-->
+# Podpora
+
+## Kako prijaviti težave in dobiti pomoč  
+
+Ta projekt uporablja GitHub Issues za sledenje napakam in zahtevam za nove funkcije. Preden prijavite novo težavo, preverite obstoječe težave, da se izognete podvajanju. Za nove težave prijavite svojo napako ali zahtevo za funkcijo kot novo težavo.
+
+Za pomoč in vprašanja o uporabi tega projekta si oglejte [naše smernice za prispevanje](CONTRIBUTING.md).
+
+## Microsoftova politika podpore  
+
+Podpora za ta projekt je omejena na zgoraj navedene vire.
+
+---
+
+**Omejitev odgovornosti**:  
+Ta dokument je bil preveden z uporabo storitve za prevajanje z umetno inteligenco [Co-op Translator](https://github.com/Azure/co-op-translator). Čeprav si prizadevamo za natančnost, vas prosimo, da upoštevate, da lahko avtomatizirani prevodi vsebujejo napake ali netočnosti. Izvirni dokument v njegovem maternem jeziku je treba obravnavati kot avtoritativni vir. Za ključne informacije priporočamo profesionalni človeški prevod. Ne prevzemamo odgovornosti za morebitna napačna razumevanja ali napačne interpretacije, ki izhajajo iz uporabe tega prevoda.
\ No newline at end of file
diff --git a/translations/sl/_404.md b/translations/sl/_404.md
new file mode 100644
index 00000000..a5db09f0
--- /dev/null
+++ b/translations/sl/_404.md
@@ -0,0 +1,21 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "ea9f0804bd62f46d9808e953ec7fc459",
+  "translation_date": "2025-08-27T21:58:03+00:00",
+  "source_file": "_404.md",
+  "language_code": "sl"
+}
+-->
+# Delo v teku
+
+Na tej strani trenutno delamo. Prosimo, preverite kasneje.
+
+Odprite [issue](https://github.com/microsoft/Web-Dev-For-Beginners/issues/new/choose), če imate kakršna koli vprašanja.
+
+**[Nazaj domov](../../../../../../..)**
+
+---
+
+**Omejitev odgovornosti**:  
+Ta dokument je bil preveden z uporabo storitve za prevajanje z umetno inteligenco [Co-op Translator](https://github.com/Azure/co-op-translator). Čeprav si prizadevamo za natančnost, vas prosimo, da upoštevate, da lahko avtomatizirani prevodi vsebujejo napake ali netočnosti. Izvirni dokument v njegovem maternem jeziku je treba obravnavati kot avtoritativni vir. Za ključne informacije priporočamo profesionalni človeški prevod. Ne prevzemamo odgovornosti za morebitna nesporazumevanja ali napačne razlage, ki bi nastale zaradi uporabe tega prevoda.
\ No newline at end of file
diff --git a/translations/sl/docs/_navbar.md b/translations/sl/docs/_navbar.md
new file mode 100644
index 00000000..595adabe
--- /dev/null
+++ b/translations/sl/docs/_navbar.md
@@ -0,0 +1,34 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "3bd2f51ecf4ac9b39277cba748943793",
+  "translation_date": "2025-08-27T22:43:52+00:00",
+  "source_file": "docs/_navbar.md",
+  "language_code": "sl"
+}
+-->
+- Prevajanja
+  - [English (United States)](../../../docs/README)
+  - [বাংলা](../../../docs/README.bn)
+  - [中文(中国)](../../../docs/README.zh-cn)
+  - [中文(台湾)](../../../docs/README.zh-tw)
+  - [Español](../../../docs/README.es)
+  - [Français](../../../docs/README.fr)
+  - [Ελληνικά](../../../docs/README.el)
+  - [हिन्दी](../../../docs/README.hi)
+  - [Bahasa Melayu](../../../docs/README.ms)
+  - [മലയാളം](../../../docs/README.ml)
+  - [தமிழ்](../../../docs/README.ta)
+  - [తెలుగు](../../../docs/README.te)
+  - [Bahasa Indonesia](../../../docs/README.id)
+  - [Italiano](../../../docs/README.it)
+  - [日本語](../../../docs/README.ja)
+  - [Nederlands](../../../docs/README.nl)
+  - [नेपाली](../../../docs/README.np)
+  - [Português](../../../docs/README.pt)
+  - [Русский](../../../docs/README.ru)
+
+---
+
+**Omejitev odgovornosti**:  
+Ta dokument je bil preveden z uporabo storitve za prevajanje z umetno inteligenco [Co-op Translator](https://github.com/Azure/co-op-translator). Čeprav si prizadevamo za natančnost, vas prosimo, da upoštevate, da lahko avtomatizirani prevodi vsebujejo napake ali netočnosti. Izvirni dokument v njegovem maternem jeziku je treba obravnavati kot avtoritativni vir. Za ključne informacije priporočamo profesionalni človeški prevod. Ne prevzemamo odgovornosti za morebitna nesporazume ali napačne razlage, ki bi nastale zaradi uporabe tega prevoda.
\ No newline at end of file
diff --git a/translations/sl/docs/_sidebar.md b/translations/sl/docs/_sidebar.md
new file mode 100644
index 00000000..0b2a8e59
--- /dev/null
+++ b/translations/sl/docs/_sidebar.md
@@ -0,0 +1,51 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "655c91b5979de46f1d70d97f0c5f1d14",
+  "translation_date": "2025-08-27T22:43:28+00:00",
+  "source_file": "docs/_sidebar.md",
+  "language_code": "sl"
+}
+-->
+- Uvod
+  - [1](../1-getting-started-lessons/1-intro-to-programming-languages/README.md)
+  - [2](../1-getting-started-lessons/2-github-basics/README.md)
+  - [3](../1-getting-started-lessons/3-accessibility/README.md)
+  
+- Osnove JS
+  - [4](../2-js-basics/1-data-types/README.md)
+  - [5](../2-js-basics/2-functions-methods/README.md)
+  - [6](../2-js-basics/3-making-decisions/README.md)
+  - [7](../2-js-basics/4-arrays-loops/README.md)
+
+- HTML, CSS, JS
+  - [8](../3-terrarium/1-intro-to-html/README.md)
+  - [9](../3-terrarium/2-intro-to-css/README.md)
+  - [10](../3-terrarium/3-intro-to-DOM-and-closures/README.md)
+
+- Igra tipkanja
+  - [11](../4-typing-game/typing-game/README.md)
+  
+- Razširitev za brskalnik
+  - [12](../5-browser-extension/1-about-browsers/README.md)
+  - [13](../5-browser-extension/2-forms-browsers-local-storage/README.md)
+  - [14](../5-browser-extension/3-background-tasks-and-performance/README.md)
+
+- Vesoljska igra
+  - [15](../6-space-game/1-introduction/README.md)
+  - [16](../6-space-game/2-drawing-to-canvas/README.md)
+  - [17](../6-space-game/3-moving-elements-around/README.md)
+  - [18](../6-space-game/4-collision-detection/README.md)
+  - [19](../6-space-game/5-keeping-score/README.md)
+  - [20](../6-space-game/6-end-condition/README.md)
+
+- Bančni projekt
+  - [21](../7-bank-project/1-template-route/README.md)
+  - [22](../7-bank-project/2-forms/README.md)
+  - [23](../7-bank-project/3-data/README.md)
+  - [24](../7-bank-project/4-state-management/README.md)
+
+---
+
+**Omejitev odgovornosti**:  
+Ta dokument je bil preveden z uporabo storitve za prevajanje z umetno inteligenco [Co-op Translator](https://github.com/Azure/co-op-translator). Čeprav si prizadevamo za natančnost, vas prosimo, da upoštevate, da lahko avtomatizirani prevodi vsebujejo napake ali netočnosti. Izvirni dokument v njegovem izvirnem jeziku je treba obravnavati kot avtoritativni vir. Za ključne informacije priporočamo profesionalni človeški prevod. Ne prevzemamo odgovornosti za morebitna nesporazumevanja ali napačne razlage, ki bi nastale zaradi uporabe tega prevoda.
\ No newline at end of file
diff --git a/translations/sl/for-teachers.md b/translations/sl/for-teachers.md
new file mode 100644
index 00000000..fc845f05
--- /dev/null
+++ b/translations/sl/for-teachers.md
@@ -0,0 +1,47 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "75cb51f7ca9ea0b097ef4a1287e9290c",
+  "translation_date": "2025-08-27T21:59:38+00:00",
+  "source_file": "for-teachers.md",
+  "language_code": "sl"
+}
+-->
+## Za učitelje
+
+Bi radi uporabili ta učni načrt v svoji učilnici? Kar izvolite!
+
+Pravzaprav ga lahko uporabite kar v GitHubu z uporabo GitHub Classroom.
+
+Za to naredite fork tega repozitorija. Za vsako lekcijo boste morali ustvariti ločen repozitorij, zato boste morali vsako mapo izvleči v ločen repozitorij. Na ta način lahko [GitHub Classroom](https://classroom.github.com/classrooms) vsako lekcijo obravnava ločeno.
+
+Te [celotne smernice](https://github.blog/2020-03-18-set-up-your-digital-classroom-with-github-classroom/) vam bodo dale idejo, kako nastaviti svojo učilnico.
+
+## Uporaba v Moodle, Canvas ali Blackboard
+
+Ta učni načrt dobro deluje v teh sistemih za upravljanje učenja! Uporabite [datoteko za prenos v Moodle](../../../../../../../teaching-files/webdev-moodle.mbz) za celotno vsebino ali poskusite [datoteko Common Cartridge](../../../../../../../teaching-files/webdev-common-cartridge.imscc), ki vsebuje del vsebine. Moodle Cloud ne podpira celotnih izvozov Common Cartridge, zato je bolje uporabiti datoteko za prenos v Moodle, ki jo je mogoče naložiti v Canvas. Prosimo, sporočite nam, kako lahko izboljšamo to izkušnjo.
+
+![Moodle](../../translated_images/moodle.94eb93d714a50cb2c97435b408017dee224348b61bc86203ffd43a4f4e57b95f.sl.png)  
+> Učni načrt v učilnici Moodle
+
+![Canvas](../../translated_images/canvas.fbd605ff8e5b8aff567d398528ce113db304446b90b9cad55c654de3fdfcda34.sl.png)  
+> Učni načrt v Canvasu
+
+## Uporaba repozitorija v trenutni obliki
+
+Če želite uporabiti ta repozitorij v trenutni obliki, brez uporabe GitHub Classroom, je to prav tako mogoče. Svojim študentom boste morali sporočiti, katero lekcijo naj skupaj predelajo.
+
+V spletnem formatu (Zoom, Teams ali drugem) lahko oblikujete ločene sobe za kvize in mentorirate študente, da se pripravijo na učenje. Nato povabite študente k reševanju kvizov in oddaji odgovorov kot 'issues' ob določenem času. Podobno lahko ravnate z nalogami, če želite, da študenti sodelujejo javno.
+
+Če imate raje bolj zaseben format, prosite študente, naj naredijo fork učnega načrta, lekcijo za lekcijo, v svoje zasebne GitHub repozitorije in vam omogočijo dostop. Nato lahko kvize in naloge opravijo zasebno ter vam jih oddajo prek issues v vašem učnem repozitoriju.
+
+Obstaja veliko načinov, kako to prilagoditi spletnemu učnemu formatu. Prosimo, sporočite nam, kaj vam najbolj ustreza!
+
+## Prosimo, delite svoje misli!
+
+Želimo, da ta učni načrt deluje za vas in vaše študente. Povežite se z nami v [učiteljskem kotičku](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner) in odprite [**novo težavo**](https://github.com/microsoft/Web-Dev-For-Beginners/issues/new/choose) za kakršne koli zahteve, napake in povratne informacije.
+
+---
+
+**Omejitev odgovornosti**:  
+Ta dokument je bil preveden z uporabo storitve za prevajanje z umetno inteligenco [Co-op Translator](https://github.com/Azure/co-op-translator). Čeprav si prizadevamo za natančnost, vas prosimo, da upoštevate, da lahko avtomatizirani prevodi vsebujejo napake ali netočnosti. Izvirni dokument v njegovem maternem jeziku je treba obravnavati kot avtoritativni vir. Za ključne informacije priporočamo profesionalni človeški prevod. Ne prevzemamo odgovornosti za morebitna nesporazume ali napačne razlage, ki bi nastale zaradi uporabe tega prevoda.
\ No newline at end of file
diff --git a/translations/sl/lesson-template/README.md b/translations/sl/lesson-template/README.md
new file mode 100644
index 00000000..f7dfe7f2
--- /dev/null
+++ b/translations/sl/lesson-template/README.md
@@ -0,0 +1,65 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "0494be70ad7fadd13a8c3d549c23e355",
+  "translation_date": "2025-08-27T22:44:13+00:00",
+  "source_file": "lesson-template/README.md",
+  "language_code": "sl"
+}
+-->
+# [Tema lekcije]
+
+![Vstavi video tukaj](../../../lesson-template/video-url)
+
+## [Pred-predavanje kviz](../../../lesson-template/quiz-url)
+
+[Opis, kaj bomo spoznali]
+
+### Uvod
+
+Opis, kaj bo zajeto v tej lekciji
+
+> Opombe
+
+### Predpogoji
+
+Kateri koraki bi morali biti zaključeni pred to lekcijo?
+
+### Priprava
+
+Pripravljalni koraki za začetek te lekcije
+
+---
+
+[Korak za korakom skozi vsebino]
+
+## [Tema 1]
+
+### Naloga:
+
+Sodelujte pri postopnem izboljševanju svoje kode, da zgradite projekt s skupno kodo:
+
+```html
+code blocks
+```
+
+✅ Preverjanje znanja - izkoristite ta trenutek za razširitev znanja študentov z odprtimi vprašanji
+
+## [Tema 2]
+
+## [Tema 3]
+
+🚀 Izziv: Dodajte izziv, na katerem študenti sodelujejo v razredu, da izboljšajo projekt
+
+Neobvezno: dodajte posnetek zaslona dokončanega uporabniškega vmesnika lekcije, če je primerno
+
+## [Po-predavanje kviz](../../../lesson-template/quiz-url)
+
+## Pregled in samostojno učenje
+
+**Rok za oddajo [MM/YY]**: [Ime naloge](assignment.md)
+
+---
+
+**Omejitev odgovornosti**:  
+Ta dokument je bil preveden z uporabo storitve za prevajanje z umetno inteligenco [Co-op Translator](https://github.com/Azure/co-op-translator). Čeprav si prizadevamo za natančnost, vas prosimo, da upoštevate, da lahko avtomatizirani prevodi vsebujejo napake ali netočnosti. Izvirni dokument v njegovem maternem jeziku je treba obravnavati kot avtoritativni vir. Za ključne informacije priporočamo profesionalni človeški prevod. Ne prevzemamo odgovornosti za morebitna nesporazumevanja ali napačne razlage, ki bi nastale zaradi uporabe tega prevoda.
\ No newline at end of file
diff --git a/translations/sl/lesson-template/assignment.md b/translations/sl/lesson-template/assignment.md
new file mode 100644
index 00000000..cd899a52
--- /dev/null
+++ b/translations/sl/lesson-template/assignment.md
@@ -0,0 +1,23 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "b5f62ec256c7e43e771f0d3b4e1a9130",
+  "translation_date": "2025-08-27T22:44:32+00:00",
+  "source_file": "lesson-template/assignment.md",
+  "language_code": "sl"
+}
+-->
+# [Ime naloge]
+
+## Navodila
+
+## Merila ocenjevanja
+
+| Merila | Odlično | Zadostno | Potrebna izboljšava |
+| ------- | -------- | -------- | ------------------- |
+|         |          |          |                     |
+
+---
+
+**Omejitev odgovornosti**:  
+Ta dokument je bil preveden z uporabo storitve za prevajanje z umetno inteligenco [Co-op Translator](https://github.com/Azure/co-op-translator). Čeprav si prizadevamo za natančnost, vas prosimo, da upoštevate, da lahko avtomatizirani prevodi vsebujejo napake ali netočnosti. Izvirni dokument v njegovem maternem jeziku je treba obravnavati kot avtoritativni vir. Za ključne informacije priporočamo profesionalni človeški prevod. Ne prevzemamo odgovornosti za morebitna napačna razumevanja ali napačne interpretacije, ki bi nastale zaradi uporabe tega prevoda.
\ No newline at end of file
diff --git a/translations/sl/quiz-app/README.md b/translations/sl/quiz-app/README.md
new file mode 100644
index 00000000..06e5ca1a
--- /dev/null
+++ b/translations/sl/quiz-app/README.md
@@ -0,0 +1,191 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "5301875c55bb305e6046bed3a4fd06d2",
+  "translation_date": "2025-08-27T22:52:05+00:00",
+  "source_file": "quiz-app/README.md",
+  "language_code": "sl"
+}
+-->
+# Aplikacija za kvize
+
+Ti kvizi so predhodni in zaključni kvizi za učni načrt podatkovne znanosti na https://aka.ms/webdev-beginners
+
+## Dodajanje prevedenega nabora kvizov
+
+Dodajte prevod kviza tako, da ustvarite ustrezne strukture kvizov v mapah `assets/translations`. Izvirni kvizi so v `assets/translations/en`. Kvizi so razdeljeni v več skupin. Poskrbite, da bo številčenje usklajeno z ustreznim delom kviza. V tem učnem načrtu je skupaj 40 kvizov, pri čemer se šteje od 0 naprej.
+
+  
+<details>
+<summary>Takšna je struktura datoteke s prevodom:</summary>
+
+```
+[
+    {
+        "title": "A title",
+        "complete": "A complete button title",
+        "error": "An error message upon selecting the wrong answer",
+        "quizzes": [
+            {
+                "id": 1,
+                "title": "Title",
+                "quiz": [
+                    {
+                        "questionText": "The question asked",
+                        "answerOptions": [
+                            {
+                                "answerText": "Option 1 title",
+                                "isCorrect": true
+                            },
+                            {
+                                "answerText": "Option 2 title",
+                                "isCorrect": false
+                            }
+                        ]
+                    }
+                ]
+            }
+        ]
+    }
+]
+```
+</details>
+
+Po urejanju prevodov uredite datoteko index.js v mapi za prevode, da uvozite vse datoteke v skladu s konvencijami v `en`.
+
+Uredite datoteko `index.js` v `assets/translations`, da uvozite nove prevedene datoteke.
+
+Na primer, če je vaš prevod JSON v `ex.json`, nastavite 'ex' kot ključ lokalizacije, nato pa ga vnesite, kot je prikazano spodaj, da ga uvozite.
+
+<details>
+<summary>index.js</summary>
+
+```
+import ex from "./ex.json";
+
+// if 'ex' is localization key then enter it like so in `messages` to expose it 
+
+const messages = {
+  ex: ex[0],
+};
+
+export default messages;
+```
+
+</details>
+
+## Zagon aplikacije za kvize lokalno
+
+### Predpogoji
+
+- GitHub račun
+- [Node.js in Git](https://nodejs.org/)
+
+### Namestitev in nastavitev
+
+1. Ustvarite repozitorij iz te [predloge](https://github.com/new?template_name=Web-Dev-For-Beginners&template_owner=microsoft) 
+
+1. Klonirajte svoj novi repozitorij in se pomaknite do aplikacije za kvize
+
+   ```bash
+   git clone https://github.com/your-github-organization/repo-name
+   cd repo-name/quiz-app
+   ```
+
+1. Namestite npm pakete in odvisnosti
+
+   ```bash
+   npm install
+   ```
+
+### Sestavite aplikacijo
+
+1. Za sestavo rešitve zaženite:
+
+   ```bash
+   npm run build
+   ```
+
+### Zaženite aplikacijo
+
+1. Za zagon rešitve zaženite:
+
+    ```bash
+    npm run dev
+    ```
+
+### [Neobvezno] Lintanje
+
+1. Za preverjanje kode zaženite:
+
+    ```bash
+    npm run lint
+    ```
+
+## Namestitev aplikacije za kvize na Azure 
+
+### Predpogoji
+- Naročnina na Azure. Prijavite se za brezplačno [tukaj](https://aka.ms/azure-free).
+
+    _Ocenjeni stroški za namestitev te aplikacije za kvize: BREZPLAČNO_
+
+[![Deploy to Azure](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/#create/Microsoft.StaticApp)
+
+Ko se prijavite v Azure prek zgornje povezave, izberite naročnino in skupino virov, nato:
+
+- Podrobnosti statične spletne aplikacije: Vnesite ime in izberite načrt gostovanja
+- Prijava v GitHub: Nastavite vir namestitve kot GitHub, nato se prijavite in izpolnite zahtevana polja v obrazcu:
+    - *Organizacija* – Izberite svojo organizacijo.
+    - *Repozitorij* – Izberite repozitorij učnega načrta Web Dev for Beginners. 
+    - *Branch* - Izberite vejo (main) 
+- Prednastavitve gradnje: Azure Static Web Apps uporablja algoritem za zaznavanje, da zazna okvir, uporabljen v vaši aplikaciji. 
+    - *Lokacija aplikacije* - ./quiz-app
+    - *Lokacija API-ja* -
+    - *Lokacija izhoda* - dist
+- Namestitev: Kliknite 'Pregled + Ustvari', nato 'Ustvari'
+
+    Ko je aplikacija nameščena, bo datoteka delovnega toka ustvarjena v imeniku *.github* vašega repozitorija. Ta datoteka delovnega toka vsebuje navodila o dogodkih, ki bodo sprožili ponovno namestitev aplikacije na Azure, na primer _**push** na vejo **main**_ itd.
+
+    <details>
+    <summary>Primer datoteke delovnega toka</summary>
+    Tukaj je primer, kako bi lahko izgledala datoteka delovnega toka GitHub Actions:
+    name: Azure Static Web Apps CI/CD
+
+    ```
+    on:
+    push:
+        branches:
+        - main
+    pull_request:
+        types: [opened, synchronize, reopened, closed]
+        branches:
+        - main
+
+    jobs:
+    build_and_deploy_job:
+        runs-on: ubuntu-latest
+        name: Build and Deploy Job
+        steps:
+        - uses: actions/checkout@v2
+        - name: Build And Deploy
+            id: builddeploy
+            uses: Azure/static-web-apps-deploy@v1
+            with:
+            azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
+            repo_token: ${{ secrets.GITHUB_TOKEN }}
+            action: "upload"
+            app_location: "quiz-app" # App source code path
+            api_location: ""API source code path optional
+            output_location: "dist" #Built app content directory - optional
+    ```
+
+    </details>
+
+- Po namestitvi: Ko je namestitev končana, kliknite 'Pojdi na namestitev', nato 'Ogled aplikacije v brskalniku'.
+
+Ko se vaš GitHub Action (delovni tok) uspešno izvede, osvežite živo stran, da si ogledate svojo aplikacijo.
+
+---
+
+**Omejitev odgovornosti**:  
+Ta dokument je bil preveden z uporabo storitve za prevajanje z umetno inteligenco [Co-op Translator](https://github.com/Azure/co-op-translator). Čeprav si prizadevamo za natančnost, vas prosimo, da upoštevate, da lahko avtomatizirani prevodi vsebujejo napake ali netočnosti. Izvirni dokument v njegovem maternem jeziku je treba obravnavati kot avtoritativni vir. Za ključne informacije priporočamo profesionalni človeški prevod. Ne prevzemamo odgovornosti za morebitne nesporazume ali napačne razlage, ki bi nastale zaradi uporabe tega prevoda.
\ No newline at end of file