diff --git a/translated_images/1.b6da8c1394b07491afeb6b2a8e5aca73ebd3cf478e27bcc9aeabb187e722648e.bg.png b/translated_images/1.b6da8c1394b07491afeb6b2a8e5aca73ebd3cf478e27bcc9aeabb187e722648e.bg.png
new file mode 100644
index 00000000..4d47799f
Binary files /dev/null and b/translated_images/1.b6da8c1394b07491afeb6b2a8e5aca73ebd3cf478e27bcc9aeabb187e722648e.bg.png differ
diff --git a/translated_images/1.b6da8c1394b07491afeb6b2a8e5aca73ebd3cf478e27bcc9aeabb187e722648e.ro.png b/translated_images/1.b6da8c1394b07491afeb6b2a8e5aca73ebd3cf478e27bcc9aeabb187e722648e.ro.png
new file mode 100644
index 00000000..664b06b0
Binary files /dev/null and b/translated_images/1.b6da8c1394b07491afeb6b2a8e5aca73ebd3cf478e27bcc9aeabb187e722648e.ro.png differ
diff --git a/translated_images/1.b6da8c1394b07491afeb6b2a8e5aca73ebd3cf478e27bcc9aeabb187e722648e.sr.png b/translated_images/1.b6da8c1394b07491afeb6b2a8e5aca73ebd3cf478e27bcc9aeabb187e722648e.sr.png
new file mode 100644
index 00000000..7dd0dbcc
Binary files /dev/null and b/translated_images/1.b6da8c1394b07491afeb6b2a8e5aca73ebd3cf478e27bcc9aeabb187e722648e.sr.png differ
diff --git a/translated_images/1.cc07a5cbe114ad1d4728c35134584ac1b87db688eff83cf75985cf31fe0ed95c.bg.png b/translated_images/1.cc07a5cbe114ad1d4728c35134584ac1b87db688eff83cf75985cf31fe0ed95c.bg.png
new file mode 100644
index 00000000..12608073
Binary files /dev/null and b/translated_images/1.cc07a5cbe114ad1d4728c35134584ac1b87db688eff83cf75985cf31fe0ed95c.bg.png differ
diff --git a/translated_images/1.cc07a5cbe114ad1d4728c35134584ac1b87db688eff83cf75985cf31fe0ed95c.ro.png b/translated_images/1.cc07a5cbe114ad1d4728c35134584ac1b87db688eff83cf75985cf31fe0ed95c.ro.png
new file mode 100644
index 00000000..a101c98e
Binary files /dev/null and b/translated_images/1.cc07a5cbe114ad1d4728c35134584ac1b87db688eff83cf75985cf31fe0ed95c.ro.png differ
diff --git a/translated_images/1.cc07a5cbe114ad1d4728c35134584ac1b87db688eff83cf75985cf31fe0ed95c.sr.png b/translated_images/1.cc07a5cbe114ad1d4728c35134584ac1b87db688eff83cf75985cf31fe0ed95c.sr.png
new file mode 100644
index 00000000..bccf5da5
Binary files /dev/null and b/translated_images/1.cc07a5cbe114ad1d4728c35134584ac1b87db688eff83cf75985cf31fe0ed95c.sr.png differ
diff --git a/translated_images/2.1dae52ff0804224692cd648afbf2342955d7afe3b0101b617268130dfb427f55.bg.png b/translated_images/2.1dae52ff0804224692cd648afbf2342955d7afe3b0101b617268130dfb427f55.bg.png
new file mode 100644
index 00000000..cf0e3cf9
Binary files /dev/null and b/translated_images/2.1dae52ff0804224692cd648afbf2342955d7afe3b0101b617268130dfb427f55.bg.png differ
diff --git a/translated_images/2.1dae52ff0804224692cd648afbf2342955d7afe3b0101b617268130dfb427f55.ro.png b/translated_images/2.1dae52ff0804224692cd648afbf2342955d7afe3b0101b617268130dfb427f55.ro.png
new file mode 100644
index 00000000..2afc5ae4
Binary files /dev/null and b/translated_images/2.1dae52ff0804224692cd648afbf2342955d7afe3b0101b617268130dfb427f55.ro.png differ
diff --git a/translated_images/2.1dae52ff0804224692cd648afbf2342955d7afe3b0101b617268130dfb427f55.sr.png b/translated_images/2.1dae52ff0804224692cd648afbf2342955d7afe3b0101b617268130dfb427f55.sr.png
new file mode 100644
index 00000000..e5ffce5e
Binary files /dev/null and b/translated_images/2.1dae52ff0804224692cd648afbf2342955d7afe3b0101b617268130dfb427f55.sr.png differ
diff --git a/translated_images/after-codeswing-extension-pb.0ebddddcf73b550994947a9084e35e2836c713ae13839d49628e3c764c1cfe83.bg.png b/translated_images/after-codeswing-extension-pb.0ebddddcf73b550994947a9084e35e2836c713ae13839d49628e3c764c1cfe83.bg.png
new file mode 100644
index 00000000..732296c0
Binary files /dev/null and b/translated_images/after-codeswing-extension-pb.0ebddddcf73b550994947a9084e35e2836c713ae13839d49628e3c764c1cfe83.bg.png differ
diff --git a/translated_images/after-codeswing-extension-pb.0ebddddcf73b550994947a9084e35e2836c713ae13839d49628e3c764c1cfe83.ro.png b/translated_images/after-codeswing-extension-pb.0ebddddcf73b550994947a9084e35e2836c713ae13839d49628e3c764c1cfe83.ro.png
new file mode 100644
index 00000000..a1900653
Binary files /dev/null and b/translated_images/after-codeswing-extension-pb.0ebddddcf73b550994947a9084e35e2836c713ae13839d49628e3c764c1cfe83.ro.png differ
diff --git a/translated_images/after-codeswing-extension-pb.0ebddddcf73b550994947a9084e35e2836c713ae13839d49628e3c764c1cfe83.sr.png b/translated_images/after-codeswing-extension-pb.0ebddddcf73b550994947a9084e35e2836c713ae13839d49628e3c764c1cfe83.sr.png
new file mode 100644
index 00000000..6095fc47
Binary files /dev/null and b/translated_images/after-codeswing-extension-pb.0ebddddcf73b550994947a9084e35e2836c713ae13839d49628e3c764c1cfe83.sr.png differ
diff --git a/translated_images/background.148a8d43afde57303419a663f50daf586681bc2fabf833f66ef6954073983c66.bg.png b/translated_images/background.148a8d43afde57303419a663f50daf586681bc2fabf833f66ef6954073983c66.bg.png
new file mode 100644
index 00000000..41769e3d
Binary files /dev/null and b/translated_images/background.148a8d43afde57303419a663f50daf586681bc2fabf833f66ef6954073983c66.bg.png differ
diff --git a/translated_images/background.148a8d43afde57303419a663f50daf586681bc2fabf833f66ef6954073983c66.ro.png b/translated_images/background.148a8d43afde57303419a663f50daf586681bc2fabf833f66ef6954073983c66.ro.png
new file mode 100644
index 00000000..2b3038ff
Binary files /dev/null and b/translated_images/background.148a8d43afde57303419a663f50daf586681bc2fabf833f66ef6954073983c66.ro.png differ
diff --git a/translated_images/background.148a8d43afde57303419a663f50daf586681bc2fabf833f66ef6954073983c66.sr.png b/translated_images/background.148a8d43afde57303419a663f50daf586681bc2fabf833f66ef6954073983c66.sr.png
new file mode 100644
index 00000000..efc1894a
Binary files /dev/null and b/translated_images/background.148a8d43afde57303419a663f50daf586681bc2fabf833f66ef6954073983c66.sr.png differ
diff --git a/translated_images/backgroundColor.e19c3c60768150c8de229c89233ecb5d859aeabef0ada99d2236dd2c44c1510f.bg.png b/translated_images/backgroundColor.e19c3c60768150c8de229c89233ecb5d859aeabef0ada99d2236dd2c44c1510f.bg.png
new file mode 100644
index 00000000..3bd93a53
Binary files /dev/null and b/translated_images/backgroundColor.e19c3c60768150c8de229c89233ecb5d859aeabef0ada99d2236dd2c44c1510f.bg.png differ
diff --git a/translated_images/backgroundColor.e19c3c60768150c8de229c89233ecb5d859aeabef0ada99d2236dd2c44c1510f.ro.png b/translated_images/backgroundColor.e19c3c60768150c8de229c89233ecb5d859aeabef0ada99d2236dd2c44c1510f.ro.png
new file mode 100644
index 00000000..3bd93a53
Binary files /dev/null and b/translated_images/backgroundColor.e19c3c60768150c8de229c89233ecb5d859aeabef0ada99d2236dd2c44c1510f.ro.png differ
diff --git a/translated_images/backgroundColor.e19c3c60768150c8de229c89233ecb5d859aeabef0ada99d2236dd2c44c1510f.sr.png b/translated_images/backgroundColor.e19c3c60768150c8de229c89233ecb5d859aeabef0ada99d2236dd2c44c1510f.sr.png
new file mode 100644
index 00000000..3bd93a53
Binary files /dev/null and b/translated_images/backgroundColor.e19c3c60768150c8de229c89233ecb5d859aeabef0ada99d2236dd2c44c1510f.sr.png differ
diff --git a/translated_images/browser-console.efaf0b51aaaf67782a29e1a0bb32cc063f189b18e894eb5926e02f1abe864ec2.bg.png b/translated_images/browser-console.efaf0b51aaaf67782a29e1a0bb32cc063f189b18e894eb5926e02f1abe864ec2.bg.png
new file mode 100644
index 00000000..eb6459f4
Binary files /dev/null and b/translated_images/browser-console.efaf0b51aaaf67782a29e1a0bb32cc063f189b18e894eb5926e02f1abe864ec2.bg.png differ
diff --git a/translated_images/browser-console.efaf0b51aaaf67782a29e1a0bb32cc063f189b18e894eb5926e02f1abe864ec2.ro.png b/translated_images/browser-console.efaf0b51aaaf67782a29e1a0bb32cc063f189b18e894eb5926e02f1abe864ec2.ro.png
new file mode 100644
index 00000000..667519a9
Binary files /dev/null and b/translated_images/browser-console.efaf0b51aaaf67782a29e1a0bb32cc063f189b18e894eb5926e02f1abe864ec2.ro.png differ
diff --git a/translated_images/browser-console.efaf0b51aaaf67782a29e1a0bb32cc063f189b18e894eb5926e02f1abe864ec2.sr.png b/translated_images/browser-console.efaf0b51aaaf67782a29e1a0bb32cc063f189b18e894eb5926e02f1abe864ec2.sr.png
new file mode 100644
index 00000000..ab012c4d
Binary files /dev/null and b/translated_images/browser-console.efaf0b51aaaf67782a29e1a0bb32cc063f189b18e894eb5926e02f1abe864ec2.sr.png differ
diff --git a/translated_images/browser.60317c9be8b7f84adce43e30bff8d47a1ae15793beab762317b2bc6b74337c1a.bg.jpg b/translated_images/browser.60317c9be8b7f84adce43e30bff8d47a1ae15793beab762317b2bc6b74337c1a.bg.jpg
new file mode 100644
index 00000000..f7938c7a
Binary files /dev/null and b/translated_images/browser.60317c9be8b7f84adce43e30bff8d47a1ae15793beab762317b2bc6b74337c1a.bg.jpg differ
diff --git a/translated_images/browser.60317c9be8b7f84adce43e30bff8d47a1ae15793beab762317b2bc6b74337c1a.ro.jpg b/translated_images/browser.60317c9be8b7f84adce43e30bff8d47a1ae15793beab762317b2bc6b74337c1a.ro.jpg
new file mode 100644
index 00000000..40f7a6f4
Binary files /dev/null and b/translated_images/browser.60317c9be8b7f84adce43e30bff8d47a1ae15793beab762317b2bc6b74337c1a.ro.jpg differ
diff --git a/translated_images/browser.60317c9be8b7f84adce43e30bff8d47a1ae15793beab762317b2bc6b74337c1a.sr.jpg b/translated_images/browser.60317c9be8b7f84adce43e30bff8d47a1ae15793beab762317b2bc6b74337c1a.sr.jpg
new file mode 100644
index 00000000..4eb3fe52
Binary files /dev/null and b/translated_images/browser.60317c9be8b7f84adce43e30bff8d47a1ae15793beab762317b2bc6b74337c1a.sr.jpg differ
diff --git a/translated_images/canvas.fbd605ff8e5b8aff567d398528ce113db304446b90b9cad55c654de3fdfcda34.bg.png b/translated_images/canvas.fbd605ff8e5b8aff567d398528ce113db304446b90b9cad55c654de3fdfcda34.bg.png
new file mode 100644
index 00000000..274913bb
Binary files /dev/null and b/translated_images/canvas.fbd605ff8e5b8aff567d398528ce113db304446b90b9cad55c654de3fdfcda34.bg.png differ
diff --git a/translated_images/canvas.fbd605ff8e5b8aff567d398528ce113db304446b90b9cad55c654de3fdfcda34.ro.png b/translated_images/canvas.fbd605ff8e5b8aff567d398528ce113db304446b90b9cad55c654de3fdfcda34.ro.png
new file mode 100644
index 00000000..ca12a368
Binary files /dev/null and b/translated_images/canvas.fbd605ff8e5b8aff567d398528ce113db304446b90b9cad55c654de3fdfcda34.ro.png differ
diff --git a/translated_images/canvas.fbd605ff8e5b8aff567d398528ce113db304446b90b9cad55c654de3fdfcda34.sr.png b/translated_images/canvas.fbd605ff8e5b8aff567d398528ce113db304446b90b9cad55c654de3fdfcda34.sr.png
new file mode 100644
index 00000000..48a4b52e
Binary files /dev/null and b/translated_images/canvas.fbd605ff8e5b8aff567d398528ce113db304446b90b9cad55c654de3fdfcda34.sr.png differ
diff --git a/translated_images/canvas_grid.5f209da785ded492a01ece440e3032afe51efa500cc2308e5ea4252487ceaf0b.bg.png b/translated_images/canvas_grid.5f209da785ded492a01ece440e3032afe51efa500cc2308e5ea4252487ceaf0b.bg.png
new file mode 100644
index 00000000..ad358fbb
Binary files /dev/null and b/translated_images/canvas_grid.5f209da785ded492a01ece440e3032afe51efa500cc2308e5ea4252487ceaf0b.bg.png differ
diff --git a/translated_images/canvas_grid.5f209da785ded492a01ece440e3032afe51efa500cc2308e5ea4252487ceaf0b.ro.png b/translated_images/canvas_grid.5f209da785ded492a01ece440e3032afe51efa500cc2308e5ea4252487ceaf0b.ro.png
new file mode 100644
index 00000000..b9c03829
Binary files /dev/null and b/translated_images/canvas_grid.5f209da785ded492a01ece440e3032afe51efa500cc2308e5ea4252487ceaf0b.ro.png differ
diff --git a/translated_images/canvas_grid.5f209da785ded492a01ece440e3032afe51efa500cc2308e5ea4252487ceaf0b.sr.png b/translated_images/canvas_grid.5f209da785ded492a01ece440e3032afe51efa500cc2308e5ea4252487ceaf0b.sr.png
new file mode 100644
index 00000000..a0a0d022
Binary files /dev/null and b/translated_images/canvas_grid.5f209da785ded492a01ece440e3032afe51efa500cc2308e5ea4252487ceaf0b.sr.png differ
diff --git a/translated_images/character.5c0dd8e067ffd693c16e2c5b7412ab075a2215ce31f998305639fa3a05e14fbe.bg.png b/translated_images/character.5c0dd8e067ffd693c16e2c5b7412ab075a2215ce31f998305639fa3a05e14fbe.bg.png
new file mode 100644
index 00000000..6c355f66
Binary files /dev/null and b/translated_images/character.5c0dd8e067ffd693c16e2c5b7412ab075a2215ce31f998305639fa3a05e14fbe.bg.png differ
diff --git a/translated_images/character.5c0dd8e067ffd693c16e2c5b7412ab075a2215ce31f998305639fa3a05e14fbe.ro.png b/translated_images/character.5c0dd8e067ffd693c16e2c5b7412ab075a2215ce31f998305639fa3a05e14fbe.ro.png
new file mode 100644
index 00000000..417c7a98
Binary files /dev/null and b/translated_images/character.5c0dd8e067ffd693c16e2c5b7412ab075a2215ce31f998305639fa3a05e14fbe.ro.png differ
diff --git a/translated_images/character.5c0dd8e067ffd693c16e2c5b7412ab075a2215ce31f998305639fa3a05e14fbe.sr.png b/translated_images/character.5c0dd8e067ffd693c16e2c5b7412ab075a2215ce31f998305639fa3a05e14fbe.sr.png
new file mode 100644
index 00000000..52ce7148
Binary files /dev/null and b/translated_images/character.5c0dd8e067ffd693c16e2c5b7412ab075a2215ce31f998305639fa3a05e14fbe.sr.png differ
diff --git a/translated_images/click-register.e89a30bf0d4bc9ca867dc537c4cea679a7c26368bd790969082f524fed2355bc.bg.png b/translated_images/click-register.e89a30bf0d4bc9ca867dc537c4cea679a7c26368bd790969082f524fed2355bc.bg.png
new file mode 100644
index 00000000..ccc65305
Binary files /dev/null and b/translated_images/click-register.e89a30bf0d4bc9ca867dc537c4cea679a7c26368bd790969082f524fed2355bc.bg.png differ
diff --git a/translated_images/click-register.e89a30bf0d4bc9ca867dc537c4cea679a7c26368bd790969082f524fed2355bc.ro.png b/translated_images/click-register.e89a30bf0d4bc9ca867dc537c4cea679a7c26368bd790969082f524fed2355bc.ro.png
new file mode 100644
index 00000000..ccc65305
Binary files /dev/null and b/translated_images/click-register.e89a30bf0d4bc9ca867dc537c4cea679a7c26368bd790969082f524fed2355bc.ro.png differ
diff --git a/translated_images/click-register.e89a30bf0d4bc9ca867dc537c4cea679a7c26368bd790969082f524fed2355bc.sr.png b/translated_images/click-register.e89a30bf0d4bc9ca867dc537c4cea679a7c26368bd790969082f524fed2355bc.sr.png
new file mode 100644
index 00000000..ccc65305
Binary files /dev/null and b/translated_images/click-register.e89a30bf0d4bc9ca867dc537c4cea679a7c26368bd790969082f524fed2355bc.sr.png differ
diff --git a/translated_images/clone_repo.5085c48d666ead57664f050d806e325d7f883be6838c821e08bc823ab7c66665.bg.png b/translated_images/clone_repo.5085c48d666ead57664f050d806e325d7f883be6838c821e08bc823ab7c66665.bg.png
new file mode 100644
index 00000000..d3fe7cff
Binary files /dev/null and b/translated_images/clone_repo.5085c48d666ead57664f050d806e325d7f883be6838c821e08bc823ab7c66665.bg.png differ
diff --git a/translated_images/clone_repo.5085c48d666ead57664f050d806e325d7f883be6838c821e08bc823ab7c66665.ro.png b/translated_images/clone_repo.5085c48d666ead57664f050d806e325d7f883be6838c821e08bc823ab7c66665.ro.png
new file mode 100644
index 00000000..1fbdf712
Binary files /dev/null and b/translated_images/clone_repo.5085c48d666ead57664f050d806e325d7f883be6838c821e08bc823ab7c66665.ro.png differ
diff --git a/translated_images/clone_repo.5085c48d666ead57664f050d806e325d7f883be6838c821e08bc823ab7c66665.sr.png b/translated_images/clone_repo.5085c48d666ead57664f050d806e325d7f883be6838c821e08bc823ab7c66665.sr.png
new file mode 100644
index 00000000..3f7145e8
Binary files /dev/null and b/translated_images/clone_repo.5085c48d666ead57664f050d806e325d7f883be6838c821e08bc823ab7c66665.sr.png differ
diff --git a/translated_images/clone_repo.6a202fb230ab6bdd8e8f536661f12088315044ed26899f00b5815db04bff9217.bg.png b/translated_images/clone_repo.6a202fb230ab6bdd8e8f536661f12088315044ed26899f00b5815db04bff9217.bg.png
new file mode 100644
index 00000000..08336276
Binary files /dev/null and b/translated_images/clone_repo.6a202fb230ab6bdd8e8f536661f12088315044ed26899f00b5815db04bff9217.bg.png differ
diff --git a/translated_images/clone_repo.6a202fb230ab6bdd8e8f536661f12088315044ed26899f00b5815db04bff9217.ro.png b/translated_images/clone_repo.6a202fb230ab6bdd8e8f536661f12088315044ed26899f00b5815db04bff9217.ro.png
new file mode 100644
index 00000000..0770b94b
Binary files /dev/null and b/translated_images/clone_repo.6a202fb230ab6bdd8e8f536661f12088315044ed26899f00b5815db04bff9217.ro.png differ
diff --git a/translated_images/clone_repo.6a202fb230ab6bdd8e8f536661f12088315044ed26899f00b5815db04bff9217.sr.png b/translated_images/clone_repo.6a202fb230ab6bdd8e8f536661f12088315044ed26899f00b5815db04bff9217.sr.png
new file mode 100644
index 00000000..ef5ef054
Binary files /dev/null and b/translated_images/clone_repo.6a202fb230ab6bdd8e8f536661f12088315044ed26899f00b5815db04bff9217.sr.png differ
diff --git a/translated_images/create-a-fork.297ab42b4bd0af9989c1a00dc1ad10805a7e109296a5f47acebacaf5ff098a30.bg.png b/translated_images/create-a-fork.297ab42b4bd0af9989c1a00dc1ad10805a7e109296a5f47acebacaf5ff098a30.bg.png
new file mode 100644
index 00000000..fc42c11e
Binary files /dev/null and b/translated_images/create-a-fork.297ab42b4bd0af9989c1a00dc1ad10805a7e109296a5f47acebacaf5ff098a30.bg.png differ
diff --git a/translated_images/create-a-fork.297ab42b4bd0af9989c1a00dc1ad10805a7e109296a5f47acebacaf5ff098a30.ro.png b/translated_images/create-a-fork.297ab42b4bd0af9989c1a00dc1ad10805a7e109296a5f47acebacaf5ff098a30.ro.png
new file mode 100644
index 00000000..c6c9bf21
Binary files /dev/null and b/translated_images/create-a-fork.297ab42b4bd0af9989c1a00dc1ad10805a7e109296a5f47acebacaf5ff098a30.ro.png differ
diff --git a/translated_images/create-a-fork.297ab42b4bd0af9989c1a00dc1ad10805a7e109296a5f47acebacaf5ff098a30.sr.png b/translated_images/create-a-fork.297ab42b4bd0af9989c1a00dc1ad10805a7e109296a5f47acebacaf5ff098a30.sr.png
new file mode 100644
index 00000000..f8c88fd1
Binary files /dev/null and b/translated_images/create-a-fork.297ab42b4bd0af9989c1a00dc1ad10805a7e109296a5f47acebacaf5ff098a30.sr.png differ
diff --git a/translated_images/create-new-file-pb.0797800d977ec3ebf484be2545060e443a902973aaa5267219c07fe199b0e2d4.bg.png b/translated_images/create-new-file-pb.0797800d977ec3ebf484be2545060e443a902973aaa5267219c07fe199b0e2d4.bg.png
new file mode 100644
index 00000000..d13c890f
Binary files /dev/null and b/translated_images/create-new-file-pb.0797800d977ec3ebf484be2545060e443a902973aaa5267219c07fe199b0e2d4.bg.png differ
diff --git a/translated_images/create-new-file-pb.0797800d977ec3ebf484be2545060e443a902973aaa5267219c07fe199b0e2d4.ro.png b/translated_images/create-new-file-pb.0797800d977ec3ebf484be2545060e443a902973aaa5267219c07fe199b0e2d4.ro.png
new file mode 100644
index 00000000..3c26bb7d
Binary files /dev/null and b/translated_images/create-new-file-pb.0797800d977ec3ebf484be2545060e443a902973aaa5267219c07fe199b0e2d4.ro.png differ
diff --git a/translated_images/create-new-file-pb.0797800d977ec3ebf484be2545060e443a902973aaa5267219c07fe199b0e2d4.sr.png b/translated_images/create-new-file-pb.0797800d977ec3ebf484be2545060e443a902973aaa5267219c07fe199b0e2d4.sr.png
new file mode 100644
index 00000000..a07c1780
Binary files /dev/null and b/translated_images/create-new-file-pb.0797800d977ec3ebf484be2545060e443a902973aaa5267219c07fe199b0e2d4.sr.png differ
diff --git a/translated_images/create-new-file.2814e609c2af9aeb6c6fd53156c503ac91c3d538f9cac63073b2dd4a7631f183.bg.png b/translated_images/create-new-file.2814e609c2af9aeb6c6fd53156c503ac91c3d538f9cac63073b2dd4a7631f183.bg.png
new file mode 100644
index 00000000..a1fb99b5
Binary files /dev/null and b/translated_images/create-new-file.2814e609c2af9aeb6c6fd53156c503ac91c3d538f9cac63073b2dd4a7631f183.bg.png differ
diff --git a/translated_images/create-new-file.2814e609c2af9aeb6c6fd53156c503ac91c3d538f9cac63073b2dd4a7631f183.ro.png b/translated_images/create-new-file.2814e609c2af9aeb6c6fd53156c503ac91c3d538f9cac63073b2dd4a7631f183.ro.png
new file mode 100644
index 00000000..a1fb99b5
Binary files /dev/null and b/translated_images/create-new-file.2814e609c2af9aeb6c6fd53156c503ac91c3d538f9cac63073b2dd4a7631f183.ro.png differ
diff --git a/translated_images/create-new-file.2814e609c2af9aeb6c6fd53156c503ac91c3d538f9cac63073b2dd4a7631f183.sr.png b/translated_images/create-new-file.2814e609c2af9aeb6c6fd53156c503ac91c3d538f9cac63073b2dd4a7631f183.sr.png
new file mode 100644
index 00000000..a1fb99b5
Binary files /dev/null and b/translated_images/create-new-file.2814e609c2af9aeb6c6fd53156c503ac91c3d538f9cac63073b2dd4a7631f183.sr.png differ
diff --git a/translated_images/createcodespace.0238bbf4d7a8d955fa8fa7f7b6602a3cb6499a24708fbee589f83211c5a613b7.bg.png b/translated_images/createcodespace.0238bbf4d7a8d955fa8fa7f7b6602a3cb6499a24708fbee589f83211c5a613b7.bg.png
new file mode 100644
index 00000000..1dae8d67
Binary files /dev/null and b/translated_images/createcodespace.0238bbf4d7a8d955fa8fa7f7b6602a3cb6499a24708fbee589f83211c5a613b7.bg.png differ
diff --git a/translated_images/createcodespace.0238bbf4d7a8d955fa8fa7f7b6602a3cb6499a24708fbee589f83211c5a613b7.ro.png b/translated_images/createcodespace.0238bbf4d7a8d955fa8fa7f7b6602a3cb6499a24708fbee589f83211c5a613b7.ro.png
new file mode 100644
index 00000000..a6570b00
Binary files /dev/null and b/translated_images/createcodespace.0238bbf4d7a8d955fa8fa7f7b6602a3cb6499a24708fbee589f83211c5a613b7.ro.png differ
diff --git a/translated_images/createcodespace.0238bbf4d7a8d955fa8fa7f7b6602a3cb6499a24708fbee589f83211c5a613b7.sr.png b/translated_images/createcodespace.0238bbf4d7a8d955fa8fa7f7b6602a3cb6499a24708fbee589f83211c5a613b7.sr.png
new file mode 100644
index 00000000..bd423c3c
Binary files /dev/null and b/translated_images/createcodespace.0238bbf4d7a8d955fa8fa7f7b6602a3cb6499a24708fbee589f83211c5a613b7.sr.png differ
diff --git a/translated_images/data-flow.fa2354e0908fecc89b488010dedf4871418a992edffa17e73441d257add18da4.bg.png b/translated_images/data-flow.fa2354e0908fecc89b488010dedf4871418a992edffa17e73441d257add18da4.bg.png
new file mode 100644
index 00000000..6ec91d27
Binary files /dev/null and b/translated_images/data-flow.fa2354e0908fecc89b488010dedf4871418a992edffa17e73441d257add18da4.bg.png differ
diff --git a/translated_images/data-flow.fa2354e0908fecc89b488010dedf4871418a992edffa17e73441d257add18da4.ro.png b/translated_images/data-flow.fa2354e0908fecc89b488010dedf4871418a992edffa17e73441d257add18da4.ro.png
new file mode 100644
index 00000000..6d4598a3
Binary files /dev/null and b/translated_images/data-flow.fa2354e0908fecc89b488010dedf4871418a992edffa17e73441d257add18da4.ro.png differ
diff --git a/translated_images/data-flow.fa2354e0908fecc89b488010dedf4871418a992edffa17e73441d257add18da4.sr.png b/translated_images/data-flow.fa2354e0908fecc89b488010dedf4871418a992edffa17e73441d257add18da4.sr.png
new file mode 100644
index 00000000..723932ca
Binary files /dev/null and b/translated_images/data-flow.fa2354e0908fecc89b488010dedf4871418a992edffa17e73441d257add18da4.sr.png differ
diff --git a/translated_images/default-vscode-dev.5d06881d65c1b3234ce50cd9ed3b0028e6031ad5f5b441bcbed96bfa6311f6d0.bg.png b/translated_images/default-vscode-dev.5d06881d65c1b3234ce50cd9ed3b0028e6031ad5f5b441bcbed96bfa6311f6d0.bg.png
new file mode 100644
index 00000000..6741f6e3
Binary files /dev/null and b/translated_images/default-vscode-dev.5d06881d65c1b3234ce50cd9ed3b0028e6031ad5f5b441bcbed96bfa6311f6d0.bg.png differ
diff --git a/translated_images/default-vscode-dev.5d06881d65c1b3234ce50cd9ed3b0028e6031ad5f5b441bcbed96bfa6311f6d0.ro.png b/translated_images/default-vscode-dev.5d06881d65c1b3234ce50cd9ed3b0028e6031ad5f5b441bcbed96bfa6311f6d0.ro.png
new file mode 100644
index 00000000..005287d2
Binary files /dev/null and b/translated_images/default-vscode-dev.5d06881d65c1b3234ce50cd9ed3b0028e6031ad5f5b441bcbed96bfa6311f6d0.ro.png differ
diff --git a/translated_images/default-vscode-dev.5d06881d65c1b3234ce50cd9ed3b0028e6031ad5f5b441bcbed96bfa6311f6d0.sr.png b/translated_images/default-vscode-dev.5d06881d65c1b3234ce50cd9ed3b0028e6031ad5f5b441bcbed96bfa6311f6d0.sr.png
new file mode 100644
index 00000000..1a03fc9d
Binary files /dev/null and b/translated_images/default-vscode-dev.5d06881d65c1b3234ce50cd9ed3b0028e6031ad5f5b441bcbed96bfa6311f6d0.sr.png differ
diff --git a/translated_images/dialog.93bba104afeb79f12f65ebf8f521c5d64e179c40b791c49c242cf15f7e7fab15.bg.png b/translated_images/dialog.93bba104afeb79f12f65ebf8f521c5d64e179c40b791c49c242cf15f7e7fab15.bg.png
new file mode 100644
index 00000000..4cb1da55
Binary files /dev/null and b/translated_images/dialog.93bba104afeb79f12f65ebf8f521c5d64e179c40b791c49c242cf15f7e7fab15.bg.png differ
diff --git a/translated_images/dialog.93bba104afeb79f12f65ebf8f521c5d64e179c40b791c49c242cf15f7e7fab15.ro.png b/translated_images/dialog.93bba104afeb79f12f65ebf8f521c5d64e179c40b791c49c242cf15f7e7fab15.ro.png
new file mode 100644
index 00000000..413d95c9
Binary files /dev/null and b/translated_images/dialog.93bba104afeb79f12f65ebf8f521c5d64e179c40b791c49c242cf15f7e7fab15.ro.png differ
diff --git a/translated_images/dialog.93bba104afeb79f12f65ebf8f521c5d64e179c40b791c49c242cf15f7e7fab15.sr.png b/translated_images/dialog.93bba104afeb79f12f65ebf8f521c5d64e179c40b791c49c242cf15f7e7fab15.sr.png
new file mode 100644
index 00000000..fb6c0eef
Binary files /dev/null and b/translated_images/dialog.93bba104afeb79f12f65ebf8f521c5d64e179c40b791c49c242cf15f7e7fab15.sr.png differ
diff --git a/translated_images/dom-tree.7daf0e763cbbba9273f9a66fe04c98276d7d23932309b195cb273a9cf1819b42.bg.png b/translated_images/dom-tree.7daf0e763cbbba9273f9a66fe04c98276d7d23932309b195cb273a9cf1819b42.bg.png
new file mode 100644
index 00000000..b4bcad06
Binary files /dev/null and b/translated_images/dom-tree.7daf0e763cbbba9273f9a66fe04c98276d7d23932309b195cb273a9cf1819b42.bg.png differ
diff --git a/translated_images/dom-tree.7daf0e763cbbba9273f9a66fe04c98276d7d23932309b195cb273a9cf1819b42.ro.png b/translated_images/dom-tree.7daf0e763cbbba9273f9a66fe04c98276d7d23932309b195cb273a9cf1819b42.ro.png
new file mode 100644
index 00000000..9cbb9298
Binary files /dev/null and b/translated_images/dom-tree.7daf0e763cbbba9273f9a66fe04c98276d7d23932309b195cb273a9cf1819b42.ro.png differ
diff --git a/translated_images/dom-tree.7daf0e763cbbba9273f9a66fe04c98276d7d23932309b195cb273a9cf1819b42.sr.png b/translated_images/dom-tree.7daf0e763cbbba9273f9a66fe04c98276d7d23932309b195cb273a9cf1819b42.sr.png
new file mode 100644
index 00000000..7d24417d
Binary files /dev/null and b/translated_images/dom-tree.7daf0e763cbbba9273f9a66fe04c98276d7d23932309b195cb273a9cf1819b42.sr.png differ
diff --git a/translated_images/earlybrowsers.d984b711cdf3a42ddac919d46c4b5ca7232f68ccfbd81395e04e5a64c0015277.bg.jpg b/translated_images/earlybrowsers.d984b711cdf3a42ddac919d46c4b5ca7232f68ccfbd81395e04e5a64c0015277.bg.jpg
new file mode 100644
index 00000000..8bfefa5d
Binary files /dev/null and b/translated_images/earlybrowsers.d984b711cdf3a42ddac919d46c4b5ca7232f68ccfbd81395e04e5a64c0015277.bg.jpg differ
diff --git a/translated_images/earlybrowsers.d984b711cdf3a42ddac919d46c4b5ca7232f68ccfbd81395e04e5a64c0015277.ro.jpg b/translated_images/earlybrowsers.d984b711cdf3a42ddac919d46c4b5ca7232f68ccfbd81395e04e5a64c0015277.ro.jpg
new file mode 100644
index 00000000..a1415076
Binary files /dev/null and b/translated_images/earlybrowsers.d984b711cdf3a42ddac919d46c4b5ca7232f68ccfbd81395e04e5a64c0015277.ro.jpg differ
diff --git a/translated_images/earlybrowsers.d984b711cdf3a42ddac919d46c4b5ca7232f68ccfbd81395e04e5a64c0015277.sr.jpg b/translated_images/earlybrowsers.d984b711cdf3a42ddac919d46c4b5ca7232f68ccfbd81395e04e5a64c0015277.sr.jpg
new file mode 100644
index 00000000..85d14ee9
Binary files /dev/null and b/translated_images/earlybrowsers.d984b711cdf3a42ddac919d46c4b5ca7232f68ccfbd81395e04e5a64c0015277.sr.jpg differ
diff --git a/translated_images/edit-a-file-pb.263555922c14fc523f53f394da84b6e155b1c6d1835dfa572b33ea98a209ef94.bg.png b/translated_images/edit-a-file-pb.263555922c14fc523f53f394da84b6e155b1c6d1835dfa572b33ea98a209ef94.bg.png
new file mode 100644
index 00000000..a3476e3e
Binary files /dev/null and b/translated_images/edit-a-file-pb.263555922c14fc523f53f394da84b6e155b1c6d1835dfa572b33ea98a209ef94.bg.png differ
diff --git a/translated_images/edit-a-file-pb.263555922c14fc523f53f394da84b6e155b1c6d1835dfa572b33ea98a209ef94.ro.png b/translated_images/edit-a-file-pb.263555922c14fc523f53f394da84b6e155b1c6d1835dfa572b33ea98a209ef94.ro.png
new file mode 100644
index 00000000..3650c4ed
Binary files /dev/null and b/translated_images/edit-a-file-pb.263555922c14fc523f53f394da84b6e155b1c6d1835dfa572b33ea98a209ef94.ro.png differ
diff --git a/translated_images/edit-a-file-pb.263555922c14fc523f53f394da84b6e155b1c6d1835dfa572b33ea98a209ef94.sr.png b/translated_images/edit-a-file-pb.263555922c14fc523f53f394da84b6e155b1c6d1835dfa572b33ea98a209ef94.sr.png
new file mode 100644
index 00000000..a2df6736
Binary files /dev/null and b/translated_images/edit-a-file-pb.263555922c14fc523f53f394da84b6e155b1c6d1835dfa572b33ea98a209ef94.sr.png differ
diff --git a/translated_images/edit-a-file.52c0ee665ef19f08119d62d63f395dfefddc0a4deb9268d73bfe791f52c5807a.bg.png b/translated_images/edit-a-file.52c0ee665ef19f08119d62d63f395dfefddc0a4deb9268d73bfe791f52c5807a.bg.png
new file mode 100644
index 00000000..9064fd67
Binary files /dev/null and b/translated_images/edit-a-file.52c0ee665ef19f08119d62d63f395dfefddc0a4deb9268d73bfe791f52c5807a.bg.png differ
diff --git a/translated_images/edit-a-file.52c0ee665ef19f08119d62d63f395dfefddc0a4deb9268d73bfe791f52c5807a.ro.png b/translated_images/edit-a-file.52c0ee665ef19f08119d62d63f395dfefddc0a4deb9268d73bfe791f52c5807a.ro.png
new file mode 100644
index 00000000..1c1e81e4
Binary files /dev/null and b/translated_images/edit-a-file.52c0ee665ef19f08119d62d63f395dfefddc0a4deb9268d73bfe791f52c5807a.ro.png differ
diff --git a/translated_images/edit-a-file.52c0ee665ef19f08119d62d63f395dfefddc0a4deb9268d73bfe791f52c5807a.sr.png b/translated_images/edit-a-file.52c0ee665ef19f08119d62d63f395dfefddc0a4deb9268d73bfe791f52c5807a.sr.png
new file mode 100644
index 00000000..ec851675
Binary files /dev/null and b/translated_images/edit-a-file.52c0ee665ef19f08119d62d63f395dfefddc0a4deb9268d73bfe791f52c5807a.sr.png differ
diff --git a/translated_images/enemyShip.035a46787bff658cd126f2e02f640e60fc84536ee2d009a1a5792f3e0423c148.bg.png b/translated_images/enemyShip.035a46787bff658cd126f2e02f640e60fc84536ee2d009a1a5792f3e0423c148.bg.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.035a46787bff658cd126f2e02f640e60fc84536ee2d009a1a5792f3e0423c148.bg.png differ
diff --git a/translated_images/enemyShip.035a46787bff658cd126f2e02f640e60fc84536ee2d009a1a5792f3e0423c148.ro.png b/translated_images/enemyShip.035a46787bff658cd126f2e02f640e60fc84536ee2d009a1a5792f3e0423c148.ro.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.035a46787bff658cd126f2e02f640e60fc84536ee2d009a1a5792f3e0423c148.ro.png differ
diff --git a/translated_images/enemyShip.035a46787bff658cd126f2e02f640e60fc84536ee2d009a1a5792f3e0423c148.sr.png b/translated_images/enemyShip.035a46787bff658cd126f2e02f640e60fc84536ee2d009a1a5792f3e0423c148.sr.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.035a46787bff658cd126f2e02f640e60fc84536ee2d009a1a5792f3e0423c148.sr.png differ
diff --git a/translated_images/enemyShip.1a1354d7988de290ea352832e06745922d463e9a4a7cca3b8f89477e934b16b2.bg.png b/translated_images/enemyShip.1a1354d7988de290ea352832e06745922d463e9a4a7cca3b8f89477e934b16b2.bg.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.1a1354d7988de290ea352832e06745922d463e9a4a7cca3b8f89477e934b16b2.bg.png differ
diff --git a/translated_images/enemyShip.1a1354d7988de290ea352832e06745922d463e9a4a7cca3b8f89477e934b16b2.ro.png b/translated_images/enemyShip.1a1354d7988de290ea352832e06745922d463e9a4a7cca3b8f89477e934b16b2.ro.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.1a1354d7988de290ea352832e06745922d463e9a4a7cca3b8f89477e934b16b2.ro.png differ
diff --git a/translated_images/enemyShip.1a1354d7988de290ea352832e06745922d463e9a4a7cca3b8f89477e934b16b2.sr.png b/translated_images/enemyShip.1a1354d7988de290ea352832e06745922d463e9a4a7cca3b8f89477e934b16b2.sr.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.1a1354d7988de290ea352832e06745922d463e9a4a7cca3b8f89477e934b16b2.sr.png differ
diff --git a/translated_images/enemyShip.22cbee6ea27a5809ef09dddc81a4f77714de1a4c8fe2b29ee5d13651f8d60fe0.bg.png b/translated_images/enemyShip.22cbee6ea27a5809ef09dddc81a4f77714de1a4c8fe2b29ee5d13651f8d60fe0.bg.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.22cbee6ea27a5809ef09dddc81a4f77714de1a4c8fe2b29ee5d13651f8d60fe0.bg.png differ
diff --git a/translated_images/enemyShip.22cbee6ea27a5809ef09dddc81a4f77714de1a4c8fe2b29ee5d13651f8d60fe0.ro.png b/translated_images/enemyShip.22cbee6ea27a5809ef09dddc81a4f77714de1a4c8fe2b29ee5d13651f8d60fe0.ro.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.22cbee6ea27a5809ef09dddc81a4f77714de1a4c8fe2b29ee5d13651f8d60fe0.ro.png differ
diff --git a/translated_images/enemyShip.22cbee6ea27a5809ef09dddc81a4f77714de1a4c8fe2b29ee5d13651f8d60fe0.sr.png b/translated_images/enemyShip.22cbee6ea27a5809ef09dddc81a4f77714de1a4c8fe2b29ee5d13651f8d60fe0.sr.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.22cbee6ea27a5809ef09dddc81a4f77714de1a4c8fe2b29ee5d13651f8d60fe0.sr.png differ
diff --git a/translated_images/enemyShip.321ecb1b4eb21f2c5b74a5118216ac3cbdf4cda52de32993a6c157547e7539bd.bg.png b/translated_images/enemyShip.321ecb1b4eb21f2c5b74a5118216ac3cbdf4cda52de32993a6c157547e7539bd.bg.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.321ecb1b4eb21f2c5b74a5118216ac3cbdf4cda52de32993a6c157547e7539bd.bg.png differ
diff --git a/translated_images/enemyShip.321ecb1b4eb21f2c5b74a5118216ac3cbdf4cda52de32993a6c157547e7539bd.ro.png b/translated_images/enemyShip.321ecb1b4eb21f2c5b74a5118216ac3cbdf4cda52de32993a6c157547e7539bd.ro.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.321ecb1b4eb21f2c5b74a5118216ac3cbdf4cda52de32993a6c157547e7539bd.ro.png differ
diff --git a/translated_images/enemyShip.321ecb1b4eb21f2c5b74a5118216ac3cbdf4cda52de32993a6c157547e7539bd.sr.png b/translated_images/enemyShip.321ecb1b4eb21f2c5b74a5118216ac3cbdf4cda52de32993a6c157547e7539bd.sr.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.321ecb1b4eb21f2c5b74a5118216ac3cbdf4cda52de32993a6c157547e7539bd.sr.png differ
diff --git a/translated_images/enemyShip.4fbf2889e6129db41989c4c74999ae81dd8d4dd994f1df01f720e923a5749a36.bg.png b/translated_images/enemyShip.4fbf2889e6129db41989c4c74999ae81dd8d4dd994f1df01f720e923a5749a36.bg.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.4fbf2889e6129db41989c4c74999ae81dd8d4dd994f1df01f720e923a5749a36.bg.png differ
diff --git a/translated_images/enemyShip.4fbf2889e6129db41989c4c74999ae81dd8d4dd994f1df01f720e923a5749a36.ro.png b/translated_images/enemyShip.4fbf2889e6129db41989c4c74999ae81dd8d4dd994f1df01f720e923a5749a36.ro.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.4fbf2889e6129db41989c4c74999ae81dd8d4dd994f1df01f720e923a5749a36.ro.png differ
diff --git a/translated_images/enemyShip.4fbf2889e6129db41989c4c74999ae81dd8d4dd994f1df01f720e923a5749a36.sr.png b/translated_images/enemyShip.4fbf2889e6129db41989c4c74999ae81dd8d4dd994f1df01f720e923a5749a36.sr.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.4fbf2889e6129db41989c4c74999ae81dd8d4dd994f1df01f720e923a5749a36.sr.png differ
diff --git a/translated_images/enemyShip.5df2a822c16650c2fb3c06652e8ec8120cdb9122a6de46b9a1a56d54db22657f.bg.png b/translated_images/enemyShip.5df2a822c16650c2fb3c06652e8ec8120cdb9122a6de46b9a1a56d54db22657f.bg.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.5df2a822c16650c2fb3c06652e8ec8120cdb9122a6de46b9a1a56d54db22657f.bg.png differ
diff --git a/translated_images/enemyShip.5df2a822c16650c2fb3c06652e8ec8120cdb9122a6de46b9a1a56d54db22657f.ro.png b/translated_images/enemyShip.5df2a822c16650c2fb3c06652e8ec8120cdb9122a6de46b9a1a56d54db22657f.ro.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.5df2a822c16650c2fb3c06652e8ec8120cdb9122a6de46b9a1a56d54db22657f.ro.png differ
diff --git a/translated_images/enemyShip.5df2a822c16650c2fb3c06652e8ec8120cdb9122a6de46b9a1a56d54db22657f.sr.png b/translated_images/enemyShip.5df2a822c16650c2fb3c06652e8ec8120cdb9122a6de46b9a1a56d54db22657f.sr.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.5df2a822c16650c2fb3c06652e8ec8120cdb9122a6de46b9a1a56d54db22657f.sr.png differ
diff --git a/translated_images/enemyShip.62983ed4bfb2220fe28986c8c8c5e6f1528caf879a4290bddbf3550469374c5d.bg.png b/translated_images/enemyShip.62983ed4bfb2220fe28986c8c8c5e6f1528caf879a4290bddbf3550469374c5d.bg.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.62983ed4bfb2220fe28986c8c8c5e6f1528caf879a4290bddbf3550469374c5d.bg.png differ
diff --git a/translated_images/enemyShip.62983ed4bfb2220fe28986c8c8c5e6f1528caf879a4290bddbf3550469374c5d.ro.png b/translated_images/enemyShip.62983ed4bfb2220fe28986c8c8c5e6f1528caf879a4290bddbf3550469374c5d.ro.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.62983ed4bfb2220fe28986c8c8c5e6f1528caf879a4290bddbf3550469374c5d.ro.png differ
diff --git a/translated_images/enemyShip.62983ed4bfb2220fe28986c8c8c5e6f1528caf879a4290bddbf3550469374c5d.sr.png b/translated_images/enemyShip.62983ed4bfb2220fe28986c8c8c5e6f1528caf879a4290bddbf3550469374c5d.sr.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.62983ed4bfb2220fe28986c8c8c5e6f1528caf879a4290bddbf3550469374c5d.sr.png differ
diff --git a/translated_images/enemyShip.add7036e1c3c30144d4500534897f937d962ffb178f6d7dbb536c2b19f05d3b7.bg.png b/translated_images/enemyShip.add7036e1c3c30144d4500534897f937d962ffb178f6d7dbb536c2b19f05d3b7.bg.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.add7036e1c3c30144d4500534897f937d962ffb178f6d7dbb536c2b19f05d3b7.bg.png differ
diff --git a/translated_images/enemyShip.add7036e1c3c30144d4500534897f937d962ffb178f6d7dbb536c2b19f05d3b7.ro.png b/translated_images/enemyShip.add7036e1c3c30144d4500534897f937d962ffb178f6d7dbb536c2b19f05d3b7.ro.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.add7036e1c3c30144d4500534897f937d962ffb178f6d7dbb536c2b19f05d3b7.ro.png differ
diff --git a/translated_images/enemyShip.add7036e1c3c30144d4500534897f937d962ffb178f6d7dbb536c2b19f05d3b7.sr.png b/translated_images/enemyShip.add7036e1c3c30144d4500534897f937d962ffb178f6d7dbb536c2b19f05d3b7.sr.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.add7036e1c3c30144d4500534897f937d962ffb178f6d7dbb536c2b19f05d3b7.sr.png differ
diff --git a/translated_images/enemyShip.b39a140287683bf7a409e00e19b41f29793c9dea0220e5d9fb174978fec357a2.bg.png b/translated_images/enemyShip.b39a140287683bf7a409e00e19b41f29793c9dea0220e5d9fb174978fec357a2.bg.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.b39a140287683bf7a409e00e19b41f29793c9dea0220e5d9fb174978fec357a2.bg.png differ
diff --git a/translated_images/enemyShip.b39a140287683bf7a409e00e19b41f29793c9dea0220e5d9fb174978fec357a2.ro.png b/translated_images/enemyShip.b39a140287683bf7a409e00e19b41f29793c9dea0220e5d9fb174978fec357a2.ro.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.b39a140287683bf7a409e00e19b41f29793c9dea0220e5d9fb174978fec357a2.ro.png differ
diff --git a/translated_images/enemyShip.b39a140287683bf7a409e00e19b41f29793c9dea0220e5d9fb174978fec357a2.sr.png b/translated_images/enemyShip.b39a140287683bf7a409e00e19b41f29793c9dea0220e5d9fb174978fec357a2.sr.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.b39a140287683bf7a409e00e19b41f29793c9dea0220e5d9fb174978fec357a2.sr.png differ
diff --git a/translated_images/enemyShip.b9626ed228a17a323a180f11f359f96848de1c9ee48d76702b49cd1cc3ef3821.bg.png b/translated_images/enemyShip.b9626ed228a17a323a180f11f359f96848de1c9ee48d76702b49cd1cc3ef3821.bg.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.b9626ed228a17a323a180f11f359f96848de1c9ee48d76702b49cd1cc3ef3821.bg.png differ
diff --git a/translated_images/enemyShip.b9626ed228a17a323a180f11f359f96848de1c9ee48d76702b49cd1cc3ef3821.ro.png b/translated_images/enemyShip.b9626ed228a17a323a180f11f359f96848de1c9ee48d76702b49cd1cc3ef3821.ro.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.b9626ed228a17a323a180f11f359f96848de1c9ee48d76702b49cd1cc3ef3821.ro.png differ
diff --git a/translated_images/enemyShip.b9626ed228a17a323a180f11f359f96848de1c9ee48d76702b49cd1cc3ef3821.sr.png b/translated_images/enemyShip.b9626ed228a17a323a180f11f359f96848de1c9ee48d76702b49cd1cc3ef3821.sr.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.b9626ed228a17a323a180f11f359f96848de1c9ee48d76702b49cd1cc3ef3821.sr.png differ
diff --git a/translated_images/enemyShip.deb0477a7312f54d5e9b3f707b02af3cfa2cafa04e1e9a3dd5818e6ab0244b2c.bg.png b/translated_images/enemyShip.deb0477a7312f54d5e9b3f707b02af3cfa2cafa04e1e9a3dd5818e6ab0244b2c.bg.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.deb0477a7312f54d5e9b3f707b02af3cfa2cafa04e1e9a3dd5818e6ab0244b2c.bg.png differ
diff --git a/translated_images/enemyShip.deb0477a7312f54d5e9b3f707b02af3cfa2cafa04e1e9a3dd5818e6ab0244b2c.ro.png b/translated_images/enemyShip.deb0477a7312f54d5e9b3f707b02af3cfa2cafa04e1e9a3dd5818e6ab0244b2c.ro.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.deb0477a7312f54d5e9b3f707b02af3cfa2cafa04e1e9a3dd5818e6ab0244b2c.ro.png differ
diff --git a/translated_images/enemyShip.deb0477a7312f54d5e9b3f707b02af3cfa2cafa04e1e9a3dd5818e6ab0244b2c.sr.png b/translated_images/enemyShip.deb0477a7312f54d5e9b3f707b02af3cfa2cafa04e1e9a3dd5818e6ab0244b2c.sr.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.deb0477a7312f54d5e9b3f707b02af3cfa2cafa04e1e9a3dd5818e6ab0244b2c.sr.png differ
diff --git a/translated_images/enemyUFO.bf8585e4e8dcdb68e03f67a534d870334c5db3557ad4f960027eac7782cf7ceb.bg.png b/translated_images/enemyUFO.bf8585e4e8dcdb68e03f67a534d870334c5db3557ad4f960027eac7782cf7ceb.bg.png
new file mode 100644
index 00000000..0431526a
Binary files /dev/null and b/translated_images/enemyUFO.bf8585e4e8dcdb68e03f67a534d870334c5db3557ad4f960027eac7782cf7ceb.bg.png differ
diff --git a/translated_images/enemyUFO.bf8585e4e8dcdb68e03f67a534d870334c5db3557ad4f960027eac7782cf7ceb.ro.png b/translated_images/enemyUFO.bf8585e4e8dcdb68e03f67a534d870334c5db3557ad4f960027eac7782cf7ceb.ro.png
new file mode 100644
index 00000000..0431526a
Binary files /dev/null and b/translated_images/enemyUFO.bf8585e4e8dcdb68e03f67a534d870334c5db3557ad4f960027eac7782cf7ceb.ro.png differ
diff --git a/translated_images/enemyUFO.bf8585e4e8dcdb68e03f67a534d870334c5db3557ad4f960027eac7782cf7ceb.sr.png b/translated_images/enemyUFO.bf8585e4e8dcdb68e03f67a534d870334c5db3557ad4f960027eac7782cf7ceb.sr.png
new file mode 100644
index 00000000..0431526a
Binary files /dev/null and b/translated_images/enemyUFO.bf8585e4e8dcdb68e03f67a534d870334c5db3557ad4f960027eac7782cf7ceb.sr.png differ
diff --git a/translated_images/extension-details.9f8f1fd4e9eb2de5069ae413119eb8ee43172776383ebe2f7cf640e11df2e106.bg.png b/translated_images/extension-details.9f8f1fd4e9eb2de5069ae413119eb8ee43172776383ebe2f7cf640e11df2e106.bg.png
new file mode 100644
index 00000000..74a3f6d7
Binary files /dev/null and b/translated_images/extension-details.9f8f1fd4e9eb2de5069ae413119eb8ee43172776383ebe2f7cf640e11df2e106.bg.png differ
diff --git a/translated_images/extension-details.9f8f1fd4e9eb2de5069ae413119eb8ee43172776383ebe2f7cf640e11df2e106.ro.png b/translated_images/extension-details.9f8f1fd4e9eb2de5069ae413119eb8ee43172776383ebe2f7cf640e11df2e106.ro.png
new file mode 100644
index 00000000..e589876c
Binary files /dev/null and b/translated_images/extension-details.9f8f1fd4e9eb2de5069ae413119eb8ee43172776383ebe2f7cf640e11df2e106.ro.png differ
diff --git a/translated_images/extension-details.9f8f1fd4e9eb2de5069ae413119eb8ee43172776383ebe2f7cf640e11df2e106.sr.png b/translated_images/extension-details.9f8f1fd4e9eb2de5069ae413119eb8ee43172776383ebe2f7cf640e11df2e106.sr.png
new file mode 100644
index 00000000..db45d5df
Binary files /dev/null and b/translated_images/extension-details.9f8f1fd4e9eb2de5069ae413119eb8ee43172776383ebe2f7cf640e11df2e106.sr.png differ
diff --git a/translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.bg.png b/translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.bg.png
new file mode 100644
index 00000000..61659119
Binary files /dev/null and b/translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.bg.png differ
diff --git a/translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.ro.png b/translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.ro.png
new file mode 100644
index 00000000..95f3459f
Binary files /dev/null and b/translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.ro.png differ
diff --git a/translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.sr.png b/translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.sr.png
new file mode 100644
index 00000000..21470839
Binary files /dev/null and b/translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.sr.png differ
diff --git a/translated_images/extension-settings.21c752ae4f4cdb78a867f140ccd0680e04619d0c44bb4afb26373e54b829d934.bg.png b/translated_images/extension-settings.21c752ae4f4cdb78a867f140ccd0680e04619d0c44bb4afb26373e54b829d934.bg.png
new file mode 100644
index 00000000..7e6a70b6
Binary files /dev/null and b/translated_images/extension-settings.21c752ae4f4cdb78a867f140ccd0680e04619d0c44bb4afb26373e54b829d934.bg.png differ
diff --git a/translated_images/extension-settings.21c752ae4f4cdb78a867f140ccd0680e04619d0c44bb4afb26373e54b829d934.ro.png b/translated_images/extension-settings.21c752ae4f4cdb78a867f140ccd0680e04619d0c44bb4afb26373e54b829d934.ro.png
new file mode 100644
index 00000000..b96c029f
Binary files /dev/null and b/translated_images/extension-settings.21c752ae4f4cdb78a867f140ccd0680e04619d0c44bb4afb26373e54b829d934.ro.png differ
diff --git a/translated_images/extension-settings.21c752ae4f4cdb78a867f140ccd0680e04619d0c44bb4afb26373e54b829d934.sr.png b/translated_images/extension-settings.21c752ae4f4cdb78a867f140ccd0680e04619d0c44bb4afb26373e54b829d934.sr.png
new file mode 100644
index 00000000..4d2c763b
Binary files /dev/null and b/translated_images/extension-settings.21c752ae4f4cdb78a867f140ccd0680e04619d0c44bb4afb26373e54b829d934.sr.png differ
diff --git a/translated_images/extensions.eca0e0c7f59a10b5c88be7fe24b3e32cca6b6058b35a49026c3a9d80b1813b7c.bg.png b/translated_images/extensions.eca0e0c7f59a10b5c88be7fe24b3e32cca6b6058b35a49026c3a9d80b1813b7c.bg.png
new file mode 100644
index 00000000..efe713be
Binary files /dev/null and b/translated_images/extensions.eca0e0c7f59a10b5c88be7fe24b3e32cca6b6058b35a49026c3a9d80b1813b7c.bg.png differ
diff --git a/translated_images/extensions.eca0e0c7f59a10b5c88be7fe24b3e32cca6b6058b35a49026c3a9d80b1813b7c.ro.png b/translated_images/extensions.eca0e0c7f59a10b5c88be7fe24b3e32cca6b6058b35a49026c3a9d80b1813b7c.ro.png
new file mode 100644
index 00000000..6cb200e4
Binary files /dev/null and b/translated_images/extensions.eca0e0c7f59a10b5c88be7fe24b3e32cca6b6058b35a49026c3a9d80b1813b7c.ro.png differ
diff --git a/translated_images/extensions.eca0e0c7f59a10b5c88be7fe24b3e32cca6b6058b35a49026c3a9d80b1813b7c.sr.png b/translated_images/extensions.eca0e0c7f59a10b5c88be7fe24b3e32cca6b6058b35a49026c3a9d80b1813b7c.sr.png
new file mode 100644
index 00000000..b62d8ae2
Binary files /dev/null and b/translated_images/extensions.eca0e0c7f59a10b5c88be7fe24b3e32cca6b6058b35a49026c3a9d80b1813b7c.sr.png differ
diff --git a/translated_images/favicon.37b561214b36d454f9fd1f725d77f310fe256eb88f2a0ae08b9cb18aeb30650c.bg.png b/translated_images/favicon.37b561214b36d454f9fd1f725d77f310fe256eb88f2a0ae08b9cb18aeb30650c.bg.png
new file mode 100644
index 00000000..26e0ae43
Binary files /dev/null and b/translated_images/favicon.37b561214b36d454f9fd1f725d77f310fe256eb88f2a0ae08b9cb18aeb30650c.bg.png differ
diff --git a/translated_images/favicon.37b561214b36d454f9fd1f725d77f310fe256eb88f2a0ae08b9cb18aeb30650c.ro.png b/translated_images/favicon.37b561214b36d454f9fd1f725d77f310fe256eb88f2a0ae08b9cb18aeb30650c.ro.png
new file mode 100644
index 00000000..26e0ae43
Binary files /dev/null and b/translated_images/favicon.37b561214b36d454f9fd1f725d77f310fe256eb88f2a0ae08b9cb18aeb30650c.ro.png differ
diff --git a/translated_images/favicon.37b561214b36d454f9fd1f725d77f310fe256eb88f2a0ae08b9cb18aeb30650c.sr.png b/translated_images/favicon.37b561214b36d454f9fd1f725d77f310fe256eb88f2a0ae08b9cb18aeb30650c.sr.png
new file mode 100644
index 00000000..26e0ae43
Binary files /dev/null and b/translated_images/favicon.37b561214b36d454f9fd1f725d77f310fe256eb88f2a0ae08b9cb18aeb30650c.sr.png differ
diff --git a/translated_images/form-post.61de4ca1b964d91a9e338416e19f218504dd0af5f762fbebabfe7ae80edf885f.bg.png b/translated_images/form-post.61de4ca1b964d91a9e338416e19f218504dd0af5f762fbebabfe7ae80edf885f.bg.png
new file mode 100644
index 00000000..2e3ff8fb
Binary files /dev/null and b/translated_images/form-post.61de4ca1b964d91a9e338416e19f218504dd0af5f762fbebabfe7ae80edf885f.bg.png differ
diff --git a/translated_images/form-post.61de4ca1b964d91a9e338416e19f218504dd0af5f762fbebabfe7ae80edf885f.ro.png b/translated_images/form-post.61de4ca1b964d91a9e338416e19f218504dd0af5f762fbebabfe7ae80edf885f.ro.png
new file mode 100644
index 00000000..2a1b080b
Binary files /dev/null and b/translated_images/form-post.61de4ca1b964d91a9e338416e19f218504dd0af5f762fbebabfe7ae80edf885f.ro.png differ
diff --git a/translated_images/form-post.61de4ca1b964d91a9e338416e19f218504dd0af5f762fbebabfe7ae80edf885f.sr.png b/translated_images/form-post.61de4ca1b964d91a9e338416e19f218504dd0af5f762fbebabfe7ae80edf885f.sr.png
new file mode 100644
index 00000000..c01e5d77
Binary files /dev/null and b/translated_images/form-post.61de4ca1b964d91a9e338416e19f218504dd0af5f762fbebabfe7ae80edf885f.sr.png differ
diff --git a/translated_images/history.7fdabbafa521e06455b738d3dafa3ff41d3071deae60ead8c7e0844b9ed987d8.bg.png b/translated_images/history.7fdabbafa521e06455b738d3dafa3ff41d3071deae60ead8c7e0844b9ed987d8.bg.png
new file mode 100644
index 00000000..35c0c531
Binary files /dev/null and b/translated_images/history.7fdabbafa521e06455b738d3dafa3ff41d3071deae60ead8c7e0844b9ed987d8.bg.png differ
diff --git a/translated_images/history.7fdabbafa521e06455b738d3dafa3ff41d3071deae60ead8c7e0844b9ed987d8.ro.png b/translated_images/history.7fdabbafa521e06455b738d3dafa3ff41d3071deae60ead8c7e0844b9ed987d8.ro.png
new file mode 100644
index 00000000..ef664867
Binary files /dev/null and b/translated_images/history.7fdabbafa521e06455b738d3dafa3ff41d3071deae60ead8c7e0844b9ed987d8.ro.png differ
diff --git a/translated_images/history.7fdabbafa521e06455b738d3dafa3ff41d3071deae60ead8c7e0844b9ed987d8.sr.png b/translated_images/history.7fdabbafa521e06455b738d3dafa3ff41d3071deae60ead8c7e0844b9ed987d8.sr.png
new file mode 100644
index 00000000..1944a9c5
Binary files /dev/null and b/translated_images/history.7fdabbafa521e06455b738d3dafa3ff41d3071deae60ead8c7e0844b9ed987d8.sr.png differ
diff --git a/translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.bg.png b/translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.bg.png
new file mode 100644
index 00000000..285e0f30
Binary files /dev/null and b/translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.bg.png differ
diff --git a/translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.ro.png b/translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.ro.png
new file mode 100644
index 00000000..7a685991
Binary files /dev/null and b/translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.ro.png differ
diff --git a/translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.sr.png b/translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.sr.png
new file mode 100644
index 00000000..672a42c7
Binary files /dev/null and b/translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.sr.png differ
diff --git a/translated_images/install-on-edge.d68781acaf0b3d3dada8b7507cde7a64bf74b7040d9818baaa9070668e819f90.bg.png b/translated_images/install-on-edge.d68781acaf0b3d3dada8b7507cde7a64bf74b7040d9818baaa9070668e819f90.bg.png
new file mode 100644
index 00000000..285e0f30
Binary files /dev/null and b/translated_images/install-on-edge.d68781acaf0b3d3dada8b7507cde7a64bf74b7040d9818baaa9070668e819f90.bg.png differ
diff --git a/translated_images/install-on-edge.d68781acaf0b3d3dada8b7507cde7a64bf74b7040d9818baaa9070668e819f90.ro.png b/translated_images/install-on-edge.d68781acaf0b3d3dada8b7507cde7a64bf74b7040d9818baaa9070668e819f90.ro.png
new file mode 100644
index 00000000..a5c9df5b
Binary files /dev/null and b/translated_images/install-on-edge.d68781acaf0b3d3dada8b7507cde7a64bf74b7040d9818baaa9070668e819f90.ro.png differ
diff --git a/translated_images/install-on-edge.d68781acaf0b3d3dada8b7507cde7a64bf74b7040d9818baaa9070668e819f90.sr.png b/translated_images/install-on-edge.d68781acaf0b3d3dada8b7507cde7a64bf74b7040d9818baaa9070668e819f90.sr.png
new file mode 100644
index 00000000..f9ab6af8
Binary files /dev/null and b/translated_images/install-on-edge.d68781acaf0b3d3dada8b7507cde7a64bf74b7040d9818baaa9070668e819f90.sr.png differ
diff --git a/translated_images/laserGreen.89904f0f499455604f204b641dfe992cb6f688d5b1c82a2227d1674af84c0b20.bg.png b/translated_images/laserGreen.89904f0f499455604f204b641dfe992cb6f688d5b1c82a2227d1674af84c0b20.bg.png
new file mode 100644
index 00000000..cfd373b4
Binary files /dev/null and b/translated_images/laserGreen.89904f0f499455604f204b641dfe992cb6f688d5b1c82a2227d1674af84c0b20.bg.png differ
diff --git a/translated_images/laserGreen.89904f0f499455604f204b641dfe992cb6f688d5b1c82a2227d1674af84c0b20.ro.png b/translated_images/laserGreen.89904f0f499455604f204b641dfe992cb6f688d5b1c82a2227d1674af84c0b20.ro.png
new file mode 100644
index 00000000..cfd373b4
Binary files /dev/null and b/translated_images/laserGreen.89904f0f499455604f204b641dfe992cb6f688d5b1c82a2227d1674af84c0b20.ro.png differ
diff --git a/translated_images/laserGreen.89904f0f499455604f204b641dfe992cb6f688d5b1c82a2227d1674af84c0b20.sr.png b/translated_images/laserGreen.89904f0f499455604f204b641dfe992cb6f688d5b1c82a2227d1674af84c0b20.sr.png
new file mode 100644
index 00000000..cfd373b4
Binary files /dev/null and b/translated_images/laserGreen.89904f0f499455604f204b641dfe992cb6f688d5b1c82a2227d1674af84c0b20.sr.png differ
diff --git a/translated_images/laserGreenShot.e4fbfc4714c08a5b1a3e94429dde0e5ad4f010c25f0d0b6c321aea62014ed203.bg.png b/translated_images/laserGreenShot.e4fbfc4714c08a5b1a3e94429dde0e5ad4f010c25f0d0b6c321aea62014ed203.bg.png
new file mode 100644
index 00000000..816fdf33
Binary files /dev/null and b/translated_images/laserGreenShot.e4fbfc4714c08a5b1a3e94429dde0e5ad4f010c25f0d0b6c321aea62014ed203.bg.png differ
diff --git a/translated_images/laserGreenShot.e4fbfc4714c08a5b1a3e94429dde0e5ad4f010c25f0d0b6c321aea62014ed203.ro.png b/translated_images/laserGreenShot.e4fbfc4714c08a5b1a3e94429dde0e5ad4f010c25f0d0b6c321aea62014ed203.ro.png
new file mode 100644
index 00000000..816fdf33
Binary files /dev/null and b/translated_images/laserGreenShot.e4fbfc4714c08a5b1a3e94429dde0e5ad4f010c25f0d0b6c321aea62014ed203.ro.png differ
diff --git a/translated_images/laserGreenShot.e4fbfc4714c08a5b1a3e94429dde0e5ad4f010c25f0d0b6c321aea62014ed203.sr.png b/translated_images/laserGreenShot.e4fbfc4714c08a5b1a3e94429dde0e5ad4f010c25f0d0b6c321aea62014ed203.sr.png
new file mode 100644
index 00000000..816fdf33
Binary files /dev/null and b/translated_images/laserGreenShot.e4fbfc4714c08a5b1a3e94429dde0e5ad4f010c25f0d0b6c321aea62014ed203.sr.png differ
diff --git a/translated_images/laserRed.2040e11f55c0a40a9800af7a11247676b4969e6c87e697f29589f605a0192b05.bg.png b/translated_images/laserRed.2040e11f55c0a40a9800af7a11247676b4969e6c87e697f29589f605a0192b05.bg.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.2040e11f55c0a40a9800af7a11247676b4969e6c87e697f29589f605a0192b05.bg.png differ
diff --git a/translated_images/laserRed.2040e11f55c0a40a9800af7a11247676b4969e6c87e697f29589f605a0192b05.ro.png b/translated_images/laserRed.2040e11f55c0a40a9800af7a11247676b4969e6c87e697f29589f605a0192b05.ro.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.2040e11f55c0a40a9800af7a11247676b4969e6c87e697f29589f605a0192b05.ro.png differ
diff --git a/translated_images/laserRed.2040e11f55c0a40a9800af7a11247676b4969e6c87e697f29589f605a0192b05.sr.png b/translated_images/laserRed.2040e11f55c0a40a9800af7a11247676b4969e6c87e697f29589f605a0192b05.sr.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.2040e11f55c0a40a9800af7a11247676b4969e6c87e697f29589f605a0192b05.sr.png differ
diff --git a/translated_images/laserRed.381bc5555491ce677eedc34e728c7c4f5676ce6c74db68d8a4d82fde952cb8fb.bg.png b/translated_images/laserRed.381bc5555491ce677eedc34e728c7c4f5676ce6c74db68d8a4d82fde952cb8fb.bg.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.381bc5555491ce677eedc34e728c7c4f5676ce6c74db68d8a4d82fde952cb8fb.bg.png differ
diff --git a/translated_images/laserRed.381bc5555491ce677eedc34e728c7c4f5676ce6c74db68d8a4d82fde952cb8fb.ro.png b/translated_images/laserRed.381bc5555491ce677eedc34e728c7c4f5676ce6c74db68d8a4d82fde952cb8fb.ro.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.381bc5555491ce677eedc34e728c7c4f5676ce6c74db68d8a4d82fde952cb8fb.ro.png differ
diff --git a/translated_images/laserRed.381bc5555491ce677eedc34e728c7c4f5676ce6c74db68d8a4d82fde952cb8fb.sr.png b/translated_images/laserRed.381bc5555491ce677eedc34e728c7c4f5676ce6c74db68d8a4d82fde952cb8fb.sr.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.381bc5555491ce677eedc34e728c7c4f5676ce6c74db68d8a4d82fde952cb8fb.sr.png differ
diff --git a/translated_images/laserRed.69730edd76f0b3bd5a45ae075c3dd1a064017020ddff4b4c3f007c21d9a62ebc.bg.png b/translated_images/laserRed.69730edd76f0b3bd5a45ae075c3dd1a064017020ddff4b4c3f007c21d9a62ebc.bg.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.69730edd76f0b3bd5a45ae075c3dd1a064017020ddff4b4c3f007c21d9a62ebc.bg.png differ
diff --git a/translated_images/laserRed.69730edd76f0b3bd5a45ae075c3dd1a064017020ddff4b4c3f007c21d9a62ebc.ro.png b/translated_images/laserRed.69730edd76f0b3bd5a45ae075c3dd1a064017020ddff4b4c3f007c21d9a62ebc.ro.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.69730edd76f0b3bd5a45ae075c3dd1a064017020ddff4b4c3f007c21d9a62ebc.ro.png differ
diff --git a/translated_images/laserRed.69730edd76f0b3bd5a45ae075c3dd1a064017020ddff4b4c3f007c21d9a62ebc.sr.png b/translated_images/laserRed.69730edd76f0b3bd5a45ae075c3dd1a064017020ddff4b4c3f007c21d9a62ebc.sr.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.69730edd76f0b3bd5a45ae075c3dd1a064017020ddff4b4c3f007c21d9a62ebc.sr.png differ
diff --git a/translated_images/laserRed.b583dc1728eb8581da951a0ec74c42cf06cf6903e9b939c71baaf04ef1a60f90.bg.png b/translated_images/laserRed.b583dc1728eb8581da951a0ec74c42cf06cf6903e9b939c71baaf04ef1a60f90.bg.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.b583dc1728eb8581da951a0ec74c42cf06cf6903e9b939c71baaf04ef1a60f90.bg.png differ
diff --git a/translated_images/laserRed.b583dc1728eb8581da951a0ec74c42cf06cf6903e9b939c71baaf04ef1a60f90.ro.png b/translated_images/laserRed.b583dc1728eb8581da951a0ec74c42cf06cf6903e9b939c71baaf04ef1a60f90.ro.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.b583dc1728eb8581da951a0ec74c42cf06cf6903e9b939c71baaf04ef1a60f90.ro.png differ
diff --git a/translated_images/laserRed.b583dc1728eb8581da951a0ec74c42cf06cf6903e9b939c71baaf04ef1a60f90.sr.png b/translated_images/laserRed.b583dc1728eb8581da951a0ec74c42cf06cf6903e9b939c71baaf04ef1a60f90.sr.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.b583dc1728eb8581da951a0ec74c42cf06cf6903e9b939c71baaf04ef1a60f90.sr.png differ
diff --git a/translated_images/laserRed.cae9ab24ea9b18fd5fde4b22153f4d71291a363bd611de8108bc6a40cecefe24.bg.png b/translated_images/laserRed.cae9ab24ea9b18fd5fde4b22153f4d71291a363bd611de8108bc6a40cecefe24.bg.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.cae9ab24ea9b18fd5fde4b22153f4d71291a363bd611de8108bc6a40cecefe24.bg.png differ
diff --git a/translated_images/laserRed.cae9ab24ea9b18fd5fde4b22153f4d71291a363bd611de8108bc6a40cecefe24.ro.png b/translated_images/laserRed.cae9ab24ea9b18fd5fde4b22153f4d71291a363bd611de8108bc6a40cecefe24.ro.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.cae9ab24ea9b18fd5fde4b22153f4d71291a363bd611de8108bc6a40cecefe24.ro.png differ
diff --git a/translated_images/laserRed.cae9ab24ea9b18fd5fde4b22153f4d71291a363bd611de8108bc6a40cecefe24.sr.png b/translated_images/laserRed.cae9ab24ea9b18fd5fde4b22153f4d71291a363bd611de8108bc6a40cecefe24.sr.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.cae9ab24ea9b18fd5fde4b22153f4d71291a363bd611de8108bc6a40cecefe24.sr.png differ
diff --git a/translated_images/laserRed.d81ce4986f87c251d4fd93a2fcfb8215c90684ad71d59de7bb0c2561a8e76d56.bg.png b/translated_images/laserRed.d81ce4986f87c251d4fd93a2fcfb8215c90684ad71d59de7bb0c2561a8e76d56.bg.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.d81ce4986f87c251d4fd93a2fcfb8215c90684ad71d59de7bb0c2561a8e76d56.bg.png differ
diff --git a/translated_images/laserRed.d81ce4986f87c251d4fd93a2fcfb8215c90684ad71d59de7bb0c2561a8e76d56.ro.png b/translated_images/laserRed.d81ce4986f87c251d4fd93a2fcfb8215c90684ad71d59de7bb0c2561a8e76d56.ro.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.d81ce4986f87c251d4fd93a2fcfb8215c90684ad71d59de7bb0c2561a8e76d56.ro.png differ
diff --git a/translated_images/laserRed.d81ce4986f87c251d4fd93a2fcfb8215c90684ad71d59de7bb0c2561a8e76d56.sr.png b/translated_images/laserRed.d81ce4986f87c251d4fd93a2fcfb8215c90684ad71d59de7bb0c2561a8e76d56.sr.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.d81ce4986f87c251d4fd93a2fcfb8215c90684ad71d59de7bb0c2561a8e76d56.sr.png differ
diff --git a/translated_images/laserRed.e58ef8db2585dfbe451c9f46f4190d75f555479ddc24e2b75be28fe3a2894f24.bg.png b/translated_images/laserRed.e58ef8db2585dfbe451c9f46f4190d75f555479ddc24e2b75be28fe3a2894f24.bg.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.e58ef8db2585dfbe451c9f46f4190d75f555479ddc24e2b75be28fe3a2894f24.bg.png differ
diff --git a/translated_images/laserRed.e58ef8db2585dfbe451c9f46f4190d75f555479ddc24e2b75be28fe3a2894f24.ro.png b/translated_images/laserRed.e58ef8db2585dfbe451c9f46f4190d75f555479ddc24e2b75be28fe3a2894f24.ro.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.e58ef8db2585dfbe451c9f46f4190d75f555479ddc24e2b75be28fe3a2894f24.ro.png differ
diff --git a/translated_images/laserRed.e58ef8db2585dfbe451c9f46f4190d75f555479ddc24e2b75be28fe3a2894f24.sr.png b/translated_images/laserRed.e58ef8db2585dfbe451c9f46f4190d75f555479ddc24e2b75be28fe3a2894f24.sr.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.e58ef8db2585dfbe451c9f46f4190d75f555479ddc24e2b75be28fe3a2894f24.sr.png differ
diff --git a/translated_images/laserRed.e66e29ace6666064cf451ce990d73b779028e21542cded84ecad88577353aad1.bg.png b/translated_images/laserRed.e66e29ace6666064cf451ce990d73b779028e21542cded84ecad88577353aad1.bg.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.e66e29ace6666064cf451ce990d73b779028e21542cded84ecad88577353aad1.bg.png differ
diff --git a/translated_images/laserRed.e66e29ace6666064cf451ce990d73b779028e21542cded84ecad88577353aad1.ro.png b/translated_images/laserRed.e66e29ace6666064cf451ce990d73b779028e21542cded84ecad88577353aad1.ro.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.e66e29ace6666064cf451ce990d73b779028e21542cded84ecad88577353aad1.ro.png differ
diff --git a/translated_images/laserRed.e66e29ace6666064cf451ce990d73b779028e21542cded84ecad88577353aad1.sr.png b/translated_images/laserRed.e66e29ace6666064cf451ce990d73b779028e21542cded84ecad88577353aad1.sr.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.e66e29ace6666064cf451ce990d73b779028e21542cded84ecad88577353aad1.sr.png differ
diff --git a/translated_images/laserRed.e86e8fb629c6026e20cc7e8507f8a1f2fc82cc355117c721eb08ac67c40d3e6a.bg.png b/translated_images/laserRed.e86e8fb629c6026e20cc7e8507f8a1f2fc82cc355117c721eb08ac67c40d3e6a.bg.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.e86e8fb629c6026e20cc7e8507f8a1f2fc82cc355117c721eb08ac67c40d3e6a.bg.png differ
diff --git a/translated_images/laserRed.e86e8fb629c6026e20cc7e8507f8a1f2fc82cc355117c721eb08ac67c40d3e6a.ro.png b/translated_images/laserRed.e86e8fb629c6026e20cc7e8507f8a1f2fc82cc355117c721eb08ac67c40d3e6a.ro.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.e86e8fb629c6026e20cc7e8507f8a1f2fc82cc355117c721eb08ac67c40d3e6a.ro.png differ
diff --git a/translated_images/laserRed.e86e8fb629c6026e20cc7e8507f8a1f2fc82cc355117c721eb08ac67c40d3e6a.sr.png b/translated_images/laserRed.e86e8fb629c6026e20cc7e8507f8a1f2fc82cc355117c721eb08ac67c40d3e6a.sr.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.e86e8fb629c6026e20cc7e8507f8a1f2fc82cc355117c721eb08ac67c40d3e6a.sr.png differ
diff --git a/translated_images/laserRedShot.c39d066745996a71e5ffb0eeec4eff60fede6dc7fb65bdf8ef8b64193fda04c9.bg.png b/translated_images/laserRedShot.c39d066745996a71e5ffb0eeec4eff60fede6dc7fb65bdf8ef8b64193fda04c9.bg.png
new file mode 100644
index 00000000..28ecda5b
Binary files /dev/null and b/translated_images/laserRedShot.c39d066745996a71e5ffb0eeec4eff60fede6dc7fb65bdf8ef8b64193fda04c9.bg.png differ
diff --git a/translated_images/laserRedShot.c39d066745996a71e5ffb0eeec4eff60fede6dc7fb65bdf8ef8b64193fda04c9.ro.png b/translated_images/laserRedShot.c39d066745996a71e5ffb0eeec4eff60fede6dc7fb65bdf8ef8b64193fda04c9.ro.png
new file mode 100644
index 00000000..28ecda5b
Binary files /dev/null and b/translated_images/laserRedShot.c39d066745996a71e5ffb0eeec4eff60fede6dc7fb65bdf8ef8b64193fda04c9.ro.png differ
diff --git a/translated_images/laserRedShot.c39d066745996a71e5ffb0eeec4eff60fede6dc7fb65bdf8ef8b64193fda04c9.sr.png b/translated_images/laserRedShot.c39d066745996a71e5ffb0eeec4eff60fede6dc7fb65bdf8ef8b64193fda04c9.sr.png
new file mode 100644
index 00000000..28ecda5b
Binary files /dev/null and b/translated_images/laserRedShot.c39d066745996a71e5ffb0eeec4eff60fede6dc7fb65bdf8ef8b64193fda04c9.sr.png differ
diff --git a/translated_images/life.27144b6d4bfdea76e9613184ff89c93d44888d2c9068a8599553a4306cd539ea.bg.png b/translated_images/life.27144b6d4bfdea76e9613184ff89c93d44888d2c9068a8599553a4306cd539ea.bg.png
new file mode 100644
index 00000000..3487f796
Binary files /dev/null and b/translated_images/life.27144b6d4bfdea76e9613184ff89c93d44888d2c9068a8599553a4306cd539ea.bg.png differ
diff --git a/translated_images/life.27144b6d4bfdea76e9613184ff89c93d44888d2c9068a8599553a4306cd539ea.ro.png b/translated_images/life.27144b6d4bfdea76e9613184ff89c93d44888d2c9068a8599553a4306cd539ea.ro.png
new file mode 100644
index 00000000..3487f796
Binary files /dev/null and b/translated_images/life.27144b6d4bfdea76e9613184ff89c93d44888d2c9068a8599553a4306cd539ea.ro.png differ
diff --git a/translated_images/life.27144b6d4bfdea76e9613184ff89c93d44888d2c9068a8599553a4306cd539ea.sr.png b/translated_images/life.27144b6d4bfdea76e9613184ff89c93d44888d2c9068a8599553a4306cd539ea.sr.png
new file mode 100644
index 00000000..3487f796
Binary files /dev/null and b/translated_images/life.27144b6d4bfdea76e9613184ff89c93d44888d2c9068a8599553a4306cd539ea.sr.png differ
diff --git a/translated_images/life.2a159298dd98f4efde6d8b2792eaff08d6944f39e57dbfa65b0b3d7f27addf7e.bg.png b/translated_images/life.2a159298dd98f4efde6d8b2792eaff08d6944f39e57dbfa65b0b3d7f27addf7e.bg.png
new file mode 100644
index 00000000..3487f796
Binary files /dev/null and b/translated_images/life.2a159298dd98f4efde6d8b2792eaff08d6944f39e57dbfa65b0b3d7f27addf7e.bg.png differ
diff --git a/translated_images/life.2a159298dd98f4efde6d8b2792eaff08d6944f39e57dbfa65b0b3d7f27addf7e.ro.png b/translated_images/life.2a159298dd98f4efde6d8b2792eaff08d6944f39e57dbfa65b0b3d7f27addf7e.ro.png
new file mode 100644
index 00000000..3487f796
Binary files /dev/null and b/translated_images/life.2a159298dd98f4efde6d8b2792eaff08d6944f39e57dbfa65b0b3d7f27addf7e.ro.png differ
diff --git a/translated_images/life.2a159298dd98f4efde6d8b2792eaff08d6944f39e57dbfa65b0b3d7f27addf7e.sr.png b/translated_images/life.2a159298dd98f4efde6d8b2792eaff08d6944f39e57dbfa65b0b3d7f27addf7e.sr.png
new file mode 100644
index 00000000..3487f796
Binary files /dev/null and b/translated_images/life.2a159298dd98f4efde6d8b2792eaff08d6944f39e57dbfa65b0b3d7f27addf7e.sr.png differ
diff --git a/translated_images/life.466df3b1692a244ad9189538ae5184e6bb43165d7c3172f66b5a60790a1541cc.bg.png b/translated_images/life.466df3b1692a244ad9189538ae5184e6bb43165d7c3172f66b5a60790a1541cc.bg.png
new file mode 100644
index 00000000..3487f796
Binary files /dev/null and b/translated_images/life.466df3b1692a244ad9189538ae5184e6bb43165d7c3172f66b5a60790a1541cc.bg.png differ
diff --git a/translated_images/life.466df3b1692a244ad9189538ae5184e6bb43165d7c3172f66b5a60790a1541cc.ro.png b/translated_images/life.466df3b1692a244ad9189538ae5184e6bb43165d7c3172f66b5a60790a1541cc.ro.png
new file mode 100644
index 00000000..3487f796
Binary files /dev/null and b/translated_images/life.466df3b1692a244ad9189538ae5184e6bb43165d7c3172f66b5a60790a1541cc.ro.png differ
diff --git a/translated_images/life.466df3b1692a244ad9189538ae5184e6bb43165d7c3172f66b5a60790a1541cc.sr.png b/translated_images/life.466df3b1692a244ad9189538ae5184e6bb43165d7c3172f66b5a60790a1541cc.sr.png
new file mode 100644
index 00000000..3487f796
Binary files /dev/null and b/translated_images/life.466df3b1692a244ad9189538ae5184e6bb43165d7c3172f66b5a60790a1541cc.sr.png differ
diff --git a/translated_images/life.65a2aaceca87528424e6e93a36e953b58d4facfefbfd42dc4d6ad2db43076018.bg.png b/translated_images/life.65a2aaceca87528424e6e93a36e953b58d4facfefbfd42dc4d6ad2db43076018.bg.png
new file mode 100644
index 00000000..3487f796
Binary files /dev/null and b/translated_images/life.65a2aaceca87528424e6e93a36e953b58d4facfefbfd42dc4d6ad2db43076018.bg.png differ
diff --git a/translated_images/life.65a2aaceca87528424e6e93a36e953b58d4facfefbfd42dc4d6ad2db43076018.ro.png b/translated_images/life.65a2aaceca87528424e6e93a36e953b58d4facfefbfd42dc4d6ad2db43076018.ro.png
new file mode 100644
index 00000000..3487f796
Binary files /dev/null and b/translated_images/life.65a2aaceca87528424e6e93a36e953b58d4facfefbfd42dc4d6ad2db43076018.ro.png differ
diff --git a/translated_images/life.65a2aaceca87528424e6e93a36e953b58d4facfefbfd42dc4d6ad2db43076018.sr.png b/translated_images/life.65a2aaceca87528424e6e93a36e953b58d4facfefbfd42dc4d6ad2db43076018.sr.png
new file mode 100644
index 00000000..3487f796
Binary files /dev/null and b/translated_images/life.65a2aaceca87528424e6e93a36e953b58d4facfefbfd42dc4d6ad2db43076018.sr.png differ
diff --git a/translated_images/life.6fb9f50d53ee0413cd91aa411f7c296e10a1a6de5c4a4197c718b49bf7d63ebf.bg.png b/translated_images/life.6fb9f50d53ee0413cd91aa411f7c296e10a1a6de5c4a4197c718b49bf7d63ebf.bg.png
new file mode 100644
index 00000000..3487f796
Binary files /dev/null and b/translated_images/life.6fb9f50d53ee0413cd91aa411f7c296e10a1a6de5c4a4197c718b49bf7d63ebf.bg.png differ
diff --git a/translated_images/life.6fb9f50d53ee0413cd91aa411f7c296e10a1a6de5c4a4197c718b49bf7d63ebf.ro.png b/translated_images/life.6fb9f50d53ee0413cd91aa411f7c296e10a1a6de5c4a4197c718b49bf7d63ebf.ro.png
new file mode 100644
index 00000000..3487f796
Binary files /dev/null and b/translated_images/life.6fb9f50d53ee0413cd91aa411f7c296e10a1a6de5c4a4197c718b49bf7d63ebf.ro.png differ
diff --git a/translated_images/life.6fb9f50d53ee0413cd91aa411f7c296e10a1a6de5c4a4197c718b49bf7d63ebf.sr.png b/translated_images/life.6fb9f50d53ee0413cd91aa411f7c296e10a1a6de5c4a4197c718b49bf7d63ebf.sr.png
new file mode 100644
index 00000000..3487f796
Binary files /dev/null and b/translated_images/life.6fb9f50d53ee0413cd91aa411f7c296e10a1a6de5c4a4197c718b49bf7d63ebf.sr.png differ
diff --git a/translated_images/life.78b6e96a3003767e113e7d6fbb5d57fc59245a92579256c08af23c93f2e2b0a3.bg.png b/translated_images/life.78b6e96a3003767e113e7d6fbb5d57fc59245a92579256c08af23c93f2e2b0a3.bg.png
new file mode 100644
index 00000000..3487f796
Binary files /dev/null and b/translated_images/life.78b6e96a3003767e113e7d6fbb5d57fc59245a92579256c08af23c93f2e2b0a3.bg.png differ
diff --git a/translated_images/life.78b6e96a3003767e113e7d6fbb5d57fc59245a92579256c08af23c93f2e2b0a3.ro.png b/translated_images/life.78b6e96a3003767e113e7d6fbb5d57fc59245a92579256c08af23c93f2e2b0a3.ro.png
new file mode 100644
index 00000000..3487f796
Binary files /dev/null and b/translated_images/life.78b6e96a3003767e113e7d6fbb5d57fc59245a92579256c08af23c93f2e2b0a3.ro.png differ
diff --git a/translated_images/life.78b6e96a3003767e113e7d6fbb5d57fc59245a92579256c08af23c93f2e2b0a3.sr.png b/translated_images/life.78b6e96a3003767e113e7d6fbb5d57fc59245a92579256c08af23c93f2e2b0a3.sr.png
new file mode 100644
index 00000000..3487f796
Binary files /dev/null and b/translated_images/life.78b6e96a3003767e113e7d6fbb5d57fc59245a92579256c08af23c93f2e2b0a3.sr.png differ
diff --git a/translated_images/life.86d843ce9c23289c0094eff7154a7b6d3cada290b7db733424ee1c68864143c5.bg.png b/translated_images/life.86d843ce9c23289c0094eff7154a7b6d3cada290b7db733424ee1c68864143c5.bg.png
new file mode 100644
index 00000000..3487f796
Binary files /dev/null and b/translated_images/life.86d843ce9c23289c0094eff7154a7b6d3cada290b7db733424ee1c68864143c5.bg.png differ
diff --git a/translated_images/life.86d843ce9c23289c0094eff7154a7b6d3cada290b7db733424ee1c68864143c5.ro.png b/translated_images/life.86d843ce9c23289c0094eff7154a7b6d3cada290b7db733424ee1c68864143c5.ro.png
new file mode 100644
index 00000000..3487f796
Binary files /dev/null and b/translated_images/life.86d843ce9c23289c0094eff7154a7b6d3cada290b7db733424ee1c68864143c5.ro.png differ
diff --git a/translated_images/life.86d843ce9c23289c0094eff7154a7b6d3cada290b7db733424ee1c68864143c5.sr.png b/translated_images/life.86d843ce9c23289c0094eff7154a7b6d3cada290b7db733424ee1c68864143c5.sr.png
new file mode 100644
index 00000000..3487f796
Binary files /dev/null and b/translated_images/life.86d843ce9c23289c0094eff7154a7b6d3cada290b7db733424ee1c68864143c5.sr.png differ
diff --git a/translated_images/localstorage.472f8147b6a3f8d141d9551c95a2da610ac9a3c6a73d4a1c224081c98bae09d9.bg.png b/translated_images/localstorage.472f8147b6a3f8d141d9551c95a2da610ac9a3c6a73d4a1c224081c98bae09d9.bg.png
new file mode 100644
index 00000000..da918260
Binary files /dev/null and b/translated_images/localstorage.472f8147b6a3f8d141d9551c95a2da610ac9a3c6a73d4a1c224081c98bae09d9.bg.png differ
diff --git a/translated_images/localstorage.472f8147b6a3f8d141d9551c95a2da610ac9a3c6a73d4a1c224081c98bae09d9.ro.png b/translated_images/localstorage.472f8147b6a3f8d141d9551c95a2da610ac9a3c6a73d4a1c224081c98bae09d9.ro.png
new file mode 100644
index 00000000..9ac6ab96
Binary files /dev/null and b/translated_images/localstorage.472f8147b6a3f8d141d9551c95a2da610ac9a3c6a73d4a1c224081c98bae09d9.ro.png differ
diff --git a/translated_images/localstorage.472f8147b6a3f8d141d9551c95a2da610ac9a3c6a73d4a1c224081c98bae09d9.sr.png b/translated_images/localstorage.472f8147b6a3f8d141d9551c95a2da610ac9a3c6a73d4a1c224081c98bae09d9.sr.png
new file mode 100644
index 00000000..62e09245
Binary files /dev/null and b/translated_images/localstorage.472f8147b6a3f8d141d9551c95a2da610ac9a3c6a73d4a1c224081c98bae09d9.sr.png differ
diff --git a/translated_images/log.804026979f3707e00eebcfa028b2b5a88cec6292f858767bb6703afba65a7d9c.bg.png b/translated_images/log.804026979f3707e00eebcfa028b2b5a88cec6292f858767bb6703afba65a7d9c.bg.png
new file mode 100644
index 00000000..29d24bcd
Binary files /dev/null and b/translated_images/log.804026979f3707e00eebcfa028b2b5a88cec6292f858767bb6703afba65a7d9c.bg.png differ
diff --git a/translated_images/log.804026979f3707e00eebcfa028b2b5a88cec6292f858767bb6703afba65a7d9c.ro.png b/translated_images/log.804026979f3707e00eebcfa028b2b5a88cec6292f858767bb6703afba65a7d9c.ro.png
new file mode 100644
index 00000000..06173f06
Binary files /dev/null and b/translated_images/log.804026979f3707e00eebcfa028b2b5a88cec6292f858767bb6703afba65a7d9c.ro.png differ
diff --git a/translated_images/log.804026979f3707e00eebcfa028b2b5a88cec6292f858767bb6703afba65a7d9c.sr.png b/translated_images/log.804026979f3707e00eebcfa028b2b5a88cec6292f858767bb6703afba65a7d9c.sr.png
new file mode 100644
index 00000000..65b3b6e9
Binary files /dev/null and b/translated_images/log.804026979f3707e00eebcfa028b2b5a88cec6292f858767bb6703afba65a7d9c.sr.png differ
diff --git a/translated_images/login-error.416fe019b36a63276764c2349df5d99e04ebda54fefe60c715ee87a28d5d4ad0.bg.png b/translated_images/login-error.416fe019b36a63276764c2349df5d99e04ebda54fefe60c715ee87a28d5d4ad0.bg.png
new file mode 100644
index 00000000..c75ad6f9
Binary files /dev/null and b/translated_images/login-error.416fe019b36a63276764c2349df5d99e04ebda54fefe60c715ee87a28d5d4ad0.bg.png differ
diff --git a/translated_images/login-error.416fe019b36a63276764c2349df5d99e04ebda54fefe60c715ee87a28d5d4ad0.ro.png b/translated_images/login-error.416fe019b36a63276764c2349df5d99e04ebda54fefe60c715ee87a28d5d4ad0.ro.png
new file mode 100644
index 00000000..ce8890f4
Binary files /dev/null and b/translated_images/login-error.416fe019b36a63276764c2349df5d99e04ebda54fefe60c715ee87a28d5d4ad0.ro.png differ
diff --git a/translated_images/login-error.416fe019b36a63276764c2349df5d99e04ebda54fefe60c715ee87a28d5d4ad0.sr.png b/translated_images/login-error.416fe019b36a63276764c2349df5d99e04ebda54fefe60c715ee87a28d5d4ad0.sr.png
new file mode 100644
index 00000000..a7ce57b8
Binary files /dev/null and b/translated_images/login-error.416fe019b36a63276764c2349df5d99e04ebda54fefe60c715ee87a28d5d4ad0.sr.png differ
diff --git a/translated_images/meteorBig.1e452b3ad7af50adaafcbe25c82b2758be31cdff66d6b417b79f5453bf9ad3e0.bg.png b/translated_images/meteorBig.1e452b3ad7af50adaafcbe25c82b2758be31cdff66d6b417b79f5453bf9ad3e0.bg.png
new file mode 100644
index 00000000..b3cd5407
Binary files /dev/null and b/translated_images/meteorBig.1e452b3ad7af50adaafcbe25c82b2758be31cdff66d6b417b79f5453bf9ad3e0.bg.png differ
diff --git a/translated_images/meteorBig.1e452b3ad7af50adaafcbe25c82b2758be31cdff66d6b417b79f5453bf9ad3e0.ro.png b/translated_images/meteorBig.1e452b3ad7af50adaafcbe25c82b2758be31cdff66d6b417b79f5453bf9ad3e0.ro.png
new file mode 100644
index 00000000..b3cd5407
Binary files /dev/null and b/translated_images/meteorBig.1e452b3ad7af50adaafcbe25c82b2758be31cdff66d6b417b79f5453bf9ad3e0.ro.png differ
diff --git a/translated_images/meteorBig.1e452b3ad7af50adaafcbe25c82b2758be31cdff66d6b417b79f5453bf9ad3e0.sr.png b/translated_images/meteorBig.1e452b3ad7af50adaafcbe25c82b2758be31cdff66d6b417b79f5453bf9ad3e0.sr.png
new file mode 100644
index 00000000..b3cd5407
Binary files /dev/null and b/translated_images/meteorBig.1e452b3ad7af50adaafcbe25c82b2758be31cdff66d6b417b79f5453bf9ad3e0.sr.png differ
diff --git a/translated_images/meteorSmall.0d729bc71c12d41f26f077dfbecaccb9016e21e11dac7966e4f2de825e5de3b6.bg.png b/translated_images/meteorSmall.0d729bc71c12d41f26f077dfbecaccb9016e21e11dac7966e4f2de825e5de3b6.bg.png
new file mode 100644
index 00000000..a61e0e28
Binary files /dev/null and b/translated_images/meteorSmall.0d729bc71c12d41f26f077dfbecaccb9016e21e11dac7966e4f2de825e5de3b6.bg.png differ
diff --git a/translated_images/meteorSmall.0d729bc71c12d41f26f077dfbecaccb9016e21e11dac7966e4f2de825e5de3b6.ro.png b/translated_images/meteorSmall.0d729bc71c12d41f26f077dfbecaccb9016e21e11dac7966e4f2de825e5de3b6.ro.png
new file mode 100644
index 00000000..a61e0e28
Binary files /dev/null and b/translated_images/meteorSmall.0d729bc71c12d41f26f077dfbecaccb9016e21e11dac7966e4f2de825e5de3b6.ro.png differ
diff --git a/translated_images/meteorSmall.0d729bc71c12d41f26f077dfbecaccb9016e21e11dac7966e4f2de825e5de3b6.sr.png b/translated_images/meteorSmall.0d729bc71c12d41f26f077dfbecaccb9016e21e11dac7966e4f2de825e5de3b6.sr.png
new file mode 100644
index 00000000..a61e0e28
Binary files /dev/null and b/translated_images/meteorSmall.0d729bc71c12d41f26f077dfbecaccb9016e21e11dac7966e4f2de825e5de3b6.sr.png differ
diff --git a/translated_images/moodle.94eb93d714a50cb2c97435b408017dee224348b61bc86203ffd43a4f4e57b95f.bg.png b/translated_images/moodle.94eb93d714a50cb2c97435b408017dee224348b61bc86203ffd43a4f4e57b95f.bg.png
new file mode 100644
index 00000000..af725df5
Binary files /dev/null and b/translated_images/moodle.94eb93d714a50cb2c97435b408017dee224348b61bc86203ffd43a4f4e57b95f.bg.png differ
diff --git a/translated_images/moodle.94eb93d714a50cb2c97435b408017dee224348b61bc86203ffd43a4f4e57b95f.ro.png b/translated_images/moodle.94eb93d714a50cb2c97435b408017dee224348b61bc86203ffd43a4f4e57b95f.ro.png
new file mode 100644
index 00000000..5c270564
Binary files /dev/null and b/translated_images/moodle.94eb93d714a50cb2c97435b408017dee224348b61bc86203ffd43a4f4e57b95f.ro.png differ
diff --git a/translated_images/moodle.94eb93d714a50cb2c97435b408017dee224348b61bc86203ffd43a4f4e57b95f.sr.png b/translated_images/moodle.94eb93d714a50cb2c97435b408017dee224348b61bc86203ffd43a4f4e57b95f.sr.png
new file mode 100644
index 00000000..8b9d9f1b
Binary files /dev/null and b/translated_images/moodle.94eb93d714a50cb2c97435b408017dee224348b61bc86203ffd43a4f4e57b95f.sr.png differ
diff --git a/translated_images/mpa.7f7375a1a2d4aa779d3f928a2aaaf9ad76bcdeb05cfce2dc27ab126024050f51.bg.png b/translated_images/mpa.7f7375a1a2d4aa779d3f928a2aaaf9ad76bcdeb05cfce2dc27ab126024050f51.bg.png
new file mode 100644
index 00000000..61d48784
Binary files /dev/null and b/translated_images/mpa.7f7375a1a2d4aa779d3f928a2aaaf9ad76bcdeb05cfce2dc27ab126024050f51.bg.png differ
diff --git a/translated_images/mpa.7f7375a1a2d4aa779d3f928a2aaaf9ad76bcdeb05cfce2dc27ab126024050f51.ro.png b/translated_images/mpa.7f7375a1a2d4aa779d3f928a2aaaf9ad76bcdeb05cfce2dc27ab126024050f51.ro.png
new file mode 100644
index 00000000..690403ee
Binary files /dev/null and b/translated_images/mpa.7f7375a1a2d4aa779d3f928a2aaaf9ad76bcdeb05cfce2dc27ab126024050f51.ro.png differ
diff --git a/translated_images/mpa.7f7375a1a2d4aa779d3f928a2aaaf9ad76bcdeb05cfce2dc27ab126024050f51.sr.png b/translated_images/mpa.7f7375a1a2d4aa779d3f928a2aaaf9ad76bcdeb05cfce2dc27ab126024050f51.sr.png
new file mode 100644
index 00000000..010605b4
Binary files /dev/null and b/translated_images/mpa.7f7375a1a2d4aa779d3f928a2aaaf9ad76bcdeb05cfce2dc27ab126024050f51.sr.png differ
diff --git a/translated_images/nebula.55c2933d36d035d359ef8d8422e7a7f260b3f6d15c026a18472bf8e71185d59c.bg.png b/translated_images/nebula.55c2933d36d035d359ef8d8422e7a7f260b3f6d15c026a18472bf8e71185d59c.bg.png
new file mode 100644
index 00000000..75523088
Binary files /dev/null and b/translated_images/nebula.55c2933d36d035d359ef8d8422e7a7f260b3f6d15c026a18472bf8e71185d59c.bg.png differ
diff --git a/translated_images/nebula.55c2933d36d035d359ef8d8422e7a7f260b3f6d15c026a18472bf8e71185d59c.ro.png b/translated_images/nebula.55c2933d36d035d359ef8d8422e7a7f260b3f6d15c026a18472bf8e71185d59c.ro.png
new file mode 100644
index 00000000..75523088
Binary files /dev/null and b/translated_images/nebula.55c2933d36d035d359ef8d8422e7a7f260b3f6d15c026a18472bf8e71185d59c.ro.png differ
diff --git a/translated_images/nebula.55c2933d36d035d359ef8d8422e7a7f260b3f6d15c026a18472bf8e71185d59c.sr.png b/translated_images/nebula.55c2933d36d035d359ef8d8422e7a7f260b3f6d15c026a18472bf8e71185d59c.sr.png
new file mode 100644
index 00000000..75523088
Binary files /dev/null and b/translated_images/nebula.55c2933d36d035d359ef8d8422e7a7f260b3f6d15c026a18472bf8e71185d59c.sr.png differ
diff --git a/translated_images/new-file-github.com.c886796d800e8056561829a181be1382c5303da9d902d8b2dd82b68a4806e21f.bg.png b/translated_images/new-file-github.com.c886796d800e8056561829a181be1382c5303da9d902d8b2dd82b68a4806e21f.bg.png
new file mode 100644
index 00000000..a0754aed
Binary files /dev/null and b/translated_images/new-file-github.com.c886796d800e8056561829a181be1382c5303da9d902d8b2dd82b68a4806e21f.bg.png differ
diff --git a/translated_images/new-file-github.com.c886796d800e8056561829a181be1382c5303da9d902d8b2dd82b68a4806e21f.ro.png b/translated_images/new-file-github.com.c886796d800e8056561829a181be1382c5303da9d902d8b2dd82b68a4806e21f.ro.png
new file mode 100644
index 00000000..943ce0aa
Binary files /dev/null and b/translated_images/new-file-github.com.c886796d800e8056561829a181be1382c5303da9d902d8b2dd82b68a4806e21f.ro.png differ
diff --git a/translated_images/new-file-github.com.c886796d800e8056561829a181be1382c5303da9d902d8b2dd82b68a4806e21f.sr.png b/translated_images/new-file-github.com.c886796d800e8056561829a181be1382c5303da9d902d8b2dd82b68a4806e21f.sr.png
new file mode 100644
index 00000000..8a23494d
Binary files /dev/null and b/translated_images/new-file-github.com.c886796d800e8056561829a181be1382c5303da9d902d8b2dd82b68a4806e21f.sr.png differ
diff --git a/translated_images/open-palette-menu.46dda01084738da84fc55100956fcc915f33e9de8c19813148ac3b1803871cff.bg.png b/translated_images/open-palette-menu.46dda01084738da84fc55100956fcc915f33e9de8c19813148ac3b1803871cff.bg.png
new file mode 100644
index 00000000..ef2d2359
Binary files /dev/null and b/translated_images/open-palette-menu.46dda01084738da84fc55100956fcc915f33e9de8c19813148ac3b1803871cff.bg.png differ
diff --git a/translated_images/open-palette-menu.46dda01084738da84fc55100956fcc915f33e9de8c19813148ac3b1803871cff.ro.png b/translated_images/open-palette-menu.46dda01084738da84fc55100956fcc915f33e9de8c19813148ac3b1803871cff.ro.png
new file mode 100644
index 00000000..5cb80620
Binary files /dev/null and b/translated_images/open-palette-menu.46dda01084738da84fc55100956fcc915f33e9de8c19813148ac3b1803871cff.ro.png differ
diff --git a/translated_images/open-palette-menu.46dda01084738da84fc55100956fcc915f33e9de8c19813148ac3b1803871cff.sr.png b/translated_images/open-palette-menu.46dda01084738da84fc55100956fcc915f33e9de8c19813148ac3b1803871cff.sr.png
new file mode 100644
index 00000000..a6b0ca6b
Binary files /dev/null and b/translated_images/open-palette-menu.46dda01084738da84fc55100956fcc915f33e9de8c19813148ac3b1803871cff.sr.png differ
diff --git a/translated_images/open-remote-repository.bd9c2598b8949e7fc283cdfc8f4050c6205a7c7c6d3f78c4b135115d037d6fa2.bg.png b/translated_images/open-remote-repository.bd9c2598b8949e7fc283cdfc8f4050c6205a7c7c6d3f78c4b135115d037d6fa2.bg.png
new file mode 100644
index 00000000..88c20b95
Binary files /dev/null and b/translated_images/open-remote-repository.bd9c2598b8949e7fc283cdfc8f4050c6205a7c7c6d3f78c4b135115d037d6fa2.bg.png differ
diff --git a/translated_images/open-remote-repository.bd9c2598b8949e7fc283cdfc8f4050c6205a7c7c6d3f78c4b135115d037d6fa2.ro.png b/translated_images/open-remote-repository.bd9c2598b8949e7fc283cdfc8f4050c6205a7c7c6d3f78c4b135115d037d6fa2.ro.png
new file mode 100644
index 00000000..2666fca2
Binary files /dev/null and b/translated_images/open-remote-repository.bd9c2598b8949e7fc283cdfc8f4050c6205a7c7c6d3f78c4b135115d037d6fa2.ro.png differ
diff --git a/translated_images/open-remote-repository.bd9c2598b8949e7fc283cdfc8f4050c6205a7c7c6d3f78c4b135115d037d6fa2.sr.png b/translated_images/open-remote-repository.bd9c2598b8949e7fc283cdfc8f4050c6205a7c7c6d3f78c4b135115d037d6fa2.sr.png
new file mode 100644
index 00000000..4fdea83b
Binary files /dev/null and b/translated_images/open-remote-repository.bd9c2598b8949e7fc283cdfc8f4050c6205a7c7c6d3f78c4b135115d037d6fa2.sr.png differ
diff --git a/translated_images/palette-menu.4946174e07f426226afcdad707d19b8d5150e41591c751c45b5dee213affef91.bg.png b/translated_images/palette-menu.4946174e07f426226afcdad707d19b8d5150e41591c751c45b5dee213affef91.bg.png
new file mode 100644
index 00000000..cc740b48
Binary files /dev/null and b/translated_images/palette-menu.4946174e07f426226afcdad707d19b8d5150e41591c751c45b5dee213affef91.bg.png differ
diff --git a/translated_images/palette-menu.4946174e07f426226afcdad707d19b8d5150e41591c751c45b5dee213affef91.ro.png b/translated_images/palette-menu.4946174e07f426226afcdad707d19b8d5150e41591c751c45b5dee213affef91.ro.png
new file mode 100644
index 00000000..c0e17ff1
Binary files /dev/null and b/translated_images/palette-menu.4946174e07f426226afcdad707d19b8d5150e41591c751c45b5dee213affef91.ro.png differ
diff --git a/translated_images/palette-menu.4946174e07f426226afcdad707d19b8d5150e41591c751c45b5dee213affef91.sr.png b/translated_images/palette-menu.4946174e07f426226afcdad707d19b8d5150e41591c751c45b5dee213affef91.sr.png
new file mode 100644
index 00000000..deb39fc1
Binary files /dev/null and b/translated_images/palette-menu.4946174e07f426226afcdad707d19b8d5150e41591c751c45b5dee213affef91.sr.png differ
diff --git a/translated_images/partI-solution.36c53b48c9ffae2a5e15496b23b604ba5393433e4bf91608a7a0a020eb7a2691.bg.png b/translated_images/partI-solution.36c53b48c9ffae2a5e15496b23b604ba5393433e4bf91608a7a0a020eb7a2691.bg.png
new file mode 100644
index 00000000..88783500
Binary files /dev/null and b/translated_images/partI-solution.36c53b48c9ffae2a5e15496b23b604ba5393433e4bf91608a7a0a020eb7a2691.bg.png differ
diff --git a/translated_images/partI-solution.36c53b48c9ffae2a5e15496b23b604ba5393433e4bf91608a7a0a020eb7a2691.ro.png b/translated_images/partI-solution.36c53b48c9ffae2a5e15496b23b604ba5393433e4bf91608a7a0a020eb7a2691.ro.png
new file mode 100644
index 00000000..88783500
Binary files /dev/null and b/translated_images/partI-solution.36c53b48c9ffae2a5e15496b23b604ba5393433e4bf91608a7a0a020eb7a2691.ro.png differ
diff --git a/translated_images/partI-solution.36c53b48c9ffae2a5e15496b23b604ba5393433e4bf91608a7a0a020eb7a2691.sr.png b/translated_images/partI-solution.36c53b48c9ffae2a5e15496b23b604ba5393433e4bf91608a7a0a020eb7a2691.sr.png
new file mode 100644
index 00000000..88783500
Binary files /dev/null and b/translated_images/partI-solution.36c53b48c9ffae2a5e15496b23b604ba5393433e4bf91608a7a0a020eb7a2691.sr.png differ
diff --git a/translated_images/plant1.a876180d8659acb9a51f95b2466b207b95dec201fafa23efcd4137fb62d0acb1.bg.png b/translated_images/plant1.a876180d8659acb9a51f95b2466b207b95dec201fafa23efcd4137fb62d0acb1.bg.png
new file mode 100644
index 00000000..0632233d
Binary files /dev/null and b/translated_images/plant1.a876180d8659acb9a51f95b2466b207b95dec201fafa23efcd4137fb62d0acb1.bg.png differ
diff --git a/translated_images/plant1.a876180d8659acb9a51f95b2466b207b95dec201fafa23efcd4137fb62d0acb1.ro.png b/translated_images/plant1.a876180d8659acb9a51f95b2466b207b95dec201fafa23efcd4137fb62d0acb1.ro.png
new file mode 100644
index 00000000..0632233d
Binary files /dev/null and b/translated_images/plant1.a876180d8659acb9a51f95b2466b207b95dec201fafa23efcd4137fb62d0acb1.ro.png differ
diff --git a/translated_images/plant1.a876180d8659acb9a51f95b2466b207b95dec201fafa23efcd4137fb62d0acb1.sr.png b/translated_images/plant1.a876180d8659acb9a51f95b2466b207b95dec201fafa23efcd4137fb62d0acb1.sr.png
new file mode 100644
index 00000000..0632233d
Binary files /dev/null and b/translated_images/plant1.a876180d8659acb9a51f95b2466b207b95dec201fafa23efcd4137fb62d0acb1.sr.png differ
diff --git a/translated_images/plant10.2f2c47804ae52dd3550b3f97782a76629d5819bba30e8a8b79933a9ccde606d4.bg.png b/translated_images/plant10.2f2c47804ae52dd3550b3f97782a76629d5819bba30e8a8b79933a9ccde606d4.bg.png
new file mode 100644
index 00000000..209ee5d2
Binary files /dev/null and b/translated_images/plant10.2f2c47804ae52dd3550b3f97782a76629d5819bba30e8a8b79933a9ccde606d4.bg.png differ
diff --git a/translated_images/plant10.2f2c47804ae52dd3550b3f97782a76629d5819bba30e8a8b79933a9ccde606d4.ro.png b/translated_images/plant10.2f2c47804ae52dd3550b3f97782a76629d5819bba30e8a8b79933a9ccde606d4.ro.png
new file mode 100644
index 00000000..209ee5d2
Binary files /dev/null and b/translated_images/plant10.2f2c47804ae52dd3550b3f97782a76629d5819bba30e8a8b79933a9ccde606d4.ro.png differ
diff --git a/translated_images/plant10.2f2c47804ae52dd3550b3f97782a76629d5819bba30e8a8b79933a9ccde606d4.sr.png b/translated_images/plant10.2f2c47804ae52dd3550b3f97782a76629d5819bba30e8a8b79933a9ccde606d4.sr.png
new file mode 100644
index 00000000..209ee5d2
Binary files /dev/null and b/translated_images/plant10.2f2c47804ae52dd3550b3f97782a76629d5819bba30e8a8b79933a9ccde606d4.sr.png differ
diff --git a/translated_images/plant11.0ce0081b0ef17aa1793cc5fe6d7de6f8cf7f8cfb24933c3c457386194fc10e77.bg.png b/translated_images/plant11.0ce0081b0ef17aa1793cc5fe6d7de6f8cf7f8cfb24933c3c457386194fc10e77.bg.png
new file mode 100644
index 00000000..201bec9e
Binary files /dev/null and b/translated_images/plant11.0ce0081b0ef17aa1793cc5fe6d7de6f8cf7f8cfb24933c3c457386194fc10e77.bg.png differ
diff --git a/translated_images/plant11.0ce0081b0ef17aa1793cc5fe6d7de6f8cf7f8cfb24933c3c457386194fc10e77.ro.png b/translated_images/plant11.0ce0081b0ef17aa1793cc5fe6d7de6f8cf7f8cfb24933c3c457386194fc10e77.ro.png
new file mode 100644
index 00000000..201bec9e
Binary files /dev/null and b/translated_images/plant11.0ce0081b0ef17aa1793cc5fe6d7de6f8cf7f8cfb24933c3c457386194fc10e77.ro.png differ
diff --git a/translated_images/plant11.0ce0081b0ef17aa1793cc5fe6d7de6f8cf7f8cfb24933c3c457386194fc10e77.sr.png b/translated_images/plant11.0ce0081b0ef17aa1793cc5fe6d7de6f8cf7f8cfb24933c3c457386194fc10e77.sr.png
new file mode 100644
index 00000000..201bec9e
Binary files /dev/null and b/translated_images/plant11.0ce0081b0ef17aa1793cc5fe6d7de6f8cf7f8cfb24933c3c457386194fc10e77.sr.png differ
diff --git a/translated_images/plant12.6b934c4312a00228719509ac56cd568ec45672bfdcc732bac7f42391035d606c.bg.png b/translated_images/plant12.6b934c4312a00228719509ac56cd568ec45672bfdcc732bac7f42391035d606c.bg.png
new file mode 100644
index 00000000..593e1573
Binary files /dev/null and b/translated_images/plant12.6b934c4312a00228719509ac56cd568ec45672bfdcc732bac7f42391035d606c.bg.png differ
diff --git a/translated_images/plant12.6b934c4312a00228719509ac56cd568ec45672bfdcc732bac7f42391035d606c.ro.png b/translated_images/plant12.6b934c4312a00228719509ac56cd568ec45672bfdcc732bac7f42391035d606c.ro.png
new file mode 100644
index 00000000..593e1573
Binary files /dev/null and b/translated_images/plant12.6b934c4312a00228719509ac56cd568ec45672bfdcc732bac7f42391035d606c.ro.png differ
diff --git a/translated_images/plant12.6b934c4312a00228719509ac56cd568ec45672bfdcc732bac7f42391035d606c.sr.png b/translated_images/plant12.6b934c4312a00228719509ac56cd568ec45672bfdcc732bac7f42391035d606c.sr.png
new file mode 100644
index 00000000..593e1573
Binary files /dev/null and b/translated_images/plant12.6b934c4312a00228719509ac56cd568ec45672bfdcc732bac7f42391035d606c.sr.png differ
diff --git a/translated_images/plant13.37d6ab2e2481421f0611f07685309cc07fe42d63e6abbaa963f972dbff7d176d.bg.png b/translated_images/plant13.37d6ab2e2481421f0611f07685309cc07fe42d63e6abbaa963f972dbff7d176d.bg.png
new file mode 100644
index 00000000..0f69b814
Binary files /dev/null and b/translated_images/plant13.37d6ab2e2481421f0611f07685309cc07fe42d63e6abbaa963f972dbff7d176d.bg.png differ
diff --git a/translated_images/plant13.37d6ab2e2481421f0611f07685309cc07fe42d63e6abbaa963f972dbff7d176d.ro.png b/translated_images/plant13.37d6ab2e2481421f0611f07685309cc07fe42d63e6abbaa963f972dbff7d176d.ro.png
new file mode 100644
index 00000000..0f69b814
Binary files /dev/null and b/translated_images/plant13.37d6ab2e2481421f0611f07685309cc07fe42d63e6abbaa963f972dbff7d176d.ro.png differ
diff --git a/translated_images/plant13.37d6ab2e2481421f0611f07685309cc07fe42d63e6abbaa963f972dbff7d176d.sr.png b/translated_images/plant13.37d6ab2e2481421f0611f07685309cc07fe42d63e6abbaa963f972dbff7d176d.sr.png
new file mode 100644
index 00000000..0f69b814
Binary files /dev/null and b/translated_images/plant13.37d6ab2e2481421f0611f07685309cc07fe42d63e6abbaa963f972dbff7d176d.sr.png differ
diff --git a/translated_images/plant14.908791477a46eb7f40a85155f53861fa5734be5075443b5c19f78e758f64d286.bg.png b/translated_images/plant14.908791477a46eb7f40a85155f53861fa5734be5075443b5c19f78e758f64d286.bg.png
new file mode 100644
index 00000000..221277ef
Binary files /dev/null and b/translated_images/plant14.908791477a46eb7f40a85155f53861fa5734be5075443b5c19f78e758f64d286.bg.png differ
diff --git a/translated_images/plant14.908791477a46eb7f40a85155f53861fa5734be5075443b5c19f78e758f64d286.ro.png b/translated_images/plant14.908791477a46eb7f40a85155f53861fa5734be5075443b5c19f78e758f64d286.ro.png
new file mode 100644
index 00000000..221277ef
Binary files /dev/null and b/translated_images/plant14.908791477a46eb7f40a85155f53861fa5734be5075443b5c19f78e758f64d286.ro.png differ
diff --git a/translated_images/plant14.908791477a46eb7f40a85155f53861fa5734be5075443b5c19f78e758f64d286.sr.png b/translated_images/plant14.908791477a46eb7f40a85155f53861fa5734be5075443b5c19f78e758f64d286.sr.png
new file mode 100644
index 00000000..221277ef
Binary files /dev/null and b/translated_images/plant14.908791477a46eb7f40a85155f53861fa5734be5075443b5c19f78e758f64d286.sr.png differ
diff --git a/translated_images/plant2.9e45efea224115b077fade85ce6871246bf85de20f419c57faed6b78e9ac7fcd.bg.png b/translated_images/plant2.9e45efea224115b077fade85ce6871246bf85de20f419c57faed6b78e9ac7fcd.bg.png
new file mode 100644
index 00000000..331ca68d
Binary files /dev/null and b/translated_images/plant2.9e45efea224115b077fade85ce6871246bf85de20f419c57faed6b78e9ac7fcd.bg.png differ
diff --git a/translated_images/plant2.9e45efea224115b077fade85ce6871246bf85de20f419c57faed6b78e9ac7fcd.ro.png b/translated_images/plant2.9e45efea224115b077fade85ce6871246bf85de20f419c57faed6b78e9ac7fcd.ro.png
new file mode 100644
index 00000000..331ca68d
Binary files /dev/null and b/translated_images/plant2.9e45efea224115b077fade85ce6871246bf85de20f419c57faed6b78e9ac7fcd.ro.png differ
diff --git a/translated_images/plant2.9e45efea224115b077fade85ce6871246bf85de20f419c57faed6b78e9ac7fcd.sr.png b/translated_images/plant2.9e45efea224115b077fade85ce6871246bf85de20f419c57faed6b78e9ac7fcd.sr.png
new file mode 100644
index 00000000..331ca68d
Binary files /dev/null and b/translated_images/plant2.9e45efea224115b077fade85ce6871246bf85de20f419c57faed6b78e9ac7fcd.sr.png differ
diff --git a/translated_images/plant3.06efdd0fa0c4b1152034312e11765b1a8fad48ebc00b72a3e7df657f66f45449.bg.png b/translated_images/plant3.06efdd0fa0c4b1152034312e11765b1a8fad48ebc00b72a3e7df657f66f45449.bg.png
new file mode 100644
index 00000000..d94bd097
Binary files /dev/null and b/translated_images/plant3.06efdd0fa0c4b1152034312e11765b1a8fad48ebc00b72a3e7df657f66f45449.bg.png differ
diff --git a/translated_images/plant3.06efdd0fa0c4b1152034312e11765b1a8fad48ebc00b72a3e7df657f66f45449.ro.png b/translated_images/plant3.06efdd0fa0c4b1152034312e11765b1a8fad48ebc00b72a3e7df657f66f45449.ro.png
new file mode 100644
index 00000000..d94bd097
Binary files /dev/null and b/translated_images/plant3.06efdd0fa0c4b1152034312e11765b1a8fad48ebc00b72a3e7df657f66f45449.ro.png differ
diff --git a/translated_images/plant3.06efdd0fa0c4b1152034312e11765b1a8fad48ebc00b72a3e7df657f66f45449.sr.png b/translated_images/plant3.06efdd0fa0c4b1152034312e11765b1a8fad48ebc00b72a3e7df657f66f45449.sr.png
new file mode 100644
index 00000000..d94bd097
Binary files /dev/null and b/translated_images/plant3.06efdd0fa0c4b1152034312e11765b1a8fad48ebc00b72a3e7df657f66f45449.sr.png differ
diff --git a/translated_images/plant4.3b78072b427727c6e6eb08eefc8451b248577412dd025002cefb707238e8bf46.bg.png b/translated_images/plant4.3b78072b427727c6e6eb08eefc8451b248577412dd025002cefb707238e8bf46.bg.png
new file mode 100644
index 00000000..c60f756c
Binary files /dev/null and b/translated_images/plant4.3b78072b427727c6e6eb08eefc8451b248577412dd025002cefb707238e8bf46.bg.png differ
diff --git a/translated_images/plant4.3b78072b427727c6e6eb08eefc8451b248577412dd025002cefb707238e8bf46.ro.png b/translated_images/plant4.3b78072b427727c6e6eb08eefc8451b248577412dd025002cefb707238e8bf46.ro.png
new file mode 100644
index 00000000..c60f756c
Binary files /dev/null and b/translated_images/plant4.3b78072b427727c6e6eb08eefc8451b248577412dd025002cefb707238e8bf46.ro.png differ
diff --git a/translated_images/plant4.3b78072b427727c6e6eb08eefc8451b248577412dd025002cefb707238e8bf46.sr.png b/translated_images/plant4.3b78072b427727c6e6eb08eefc8451b248577412dd025002cefb707238e8bf46.sr.png
new file mode 100644
index 00000000..c60f756c
Binary files /dev/null and b/translated_images/plant4.3b78072b427727c6e6eb08eefc8451b248577412dd025002cefb707238e8bf46.sr.png differ
diff --git a/translated_images/plant5.8ec58b18ac336fa8ec87ce1d5b433ee58c4918e67fdf0315d5407d80cbd97569.bg.png b/translated_images/plant5.8ec58b18ac336fa8ec87ce1d5b433ee58c4918e67fdf0315d5407d80cbd97569.bg.png
new file mode 100644
index 00000000..f2fe32fb
Binary files /dev/null and b/translated_images/plant5.8ec58b18ac336fa8ec87ce1d5b433ee58c4918e67fdf0315d5407d80cbd97569.bg.png differ
diff --git a/translated_images/plant5.8ec58b18ac336fa8ec87ce1d5b433ee58c4918e67fdf0315d5407d80cbd97569.ro.png b/translated_images/plant5.8ec58b18ac336fa8ec87ce1d5b433ee58c4918e67fdf0315d5407d80cbd97569.ro.png
new file mode 100644
index 00000000..f2fe32fb
Binary files /dev/null and b/translated_images/plant5.8ec58b18ac336fa8ec87ce1d5b433ee58c4918e67fdf0315d5407d80cbd97569.ro.png differ
diff --git a/translated_images/plant5.8ec58b18ac336fa8ec87ce1d5b433ee58c4918e67fdf0315d5407d80cbd97569.sr.png b/translated_images/plant5.8ec58b18ac336fa8ec87ce1d5b433ee58c4918e67fdf0315d5407d80cbd97569.sr.png
new file mode 100644
index 00000000..f2fe32fb
Binary files /dev/null and b/translated_images/plant5.8ec58b18ac336fa8ec87ce1d5b433ee58c4918e67fdf0315d5407d80cbd97569.sr.png differ
diff --git a/translated_images/plant6.ca4ff8372e6676b1ffed650fba21cb2af52c70df969a8203e57fb5bedd81e9f0.bg.png b/translated_images/plant6.ca4ff8372e6676b1ffed650fba21cb2af52c70df969a8203e57fb5bedd81e9f0.bg.png
new file mode 100644
index 00000000..82e0db0d
Binary files /dev/null and b/translated_images/plant6.ca4ff8372e6676b1ffed650fba21cb2af52c70df969a8203e57fb5bedd81e9f0.bg.png differ
diff --git a/translated_images/plant6.ca4ff8372e6676b1ffed650fba21cb2af52c70df969a8203e57fb5bedd81e9f0.ro.png b/translated_images/plant6.ca4ff8372e6676b1ffed650fba21cb2af52c70df969a8203e57fb5bedd81e9f0.ro.png
new file mode 100644
index 00000000..82e0db0d
Binary files /dev/null and b/translated_images/plant6.ca4ff8372e6676b1ffed650fba21cb2af52c70df969a8203e57fb5bedd81e9f0.ro.png differ
diff --git a/translated_images/plant6.ca4ff8372e6676b1ffed650fba21cb2af52c70df969a8203e57fb5bedd81e9f0.sr.png b/translated_images/plant6.ca4ff8372e6676b1ffed650fba21cb2af52c70df969a8203e57fb5bedd81e9f0.sr.png
new file mode 100644
index 00000000..82e0db0d
Binary files /dev/null and b/translated_images/plant6.ca4ff8372e6676b1ffed650fba21cb2af52c70df969a8203e57fb5bedd81e9f0.sr.png differ
diff --git a/translated_images/plant7.194d5a42fcf5a88c5dd4960c68e6f78707acdb4e21bf533a6a65f8d002ab660b.bg.png b/translated_images/plant7.194d5a42fcf5a88c5dd4960c68e6f78707acdb4e21bf533a6a65f8d002ab660b.bg.png
new file mode 100644
index 00000000..07cb7054
Binary files /dev/null and b/translated_images/plant7.194d5a42fcf5a88c5dd4960c68e6f78707acdb4e21bf533a6a65f8d002ab660b.bg.png differ
diff --git a/translated_images/plant7.194d5a42fcf5a88c5dd4960c68e6f78707acdb4e21bf533a6a65f8d002ab660b.ro.png b/translated_images/plant7.194d5a42fcf5a88c5dd4960c68e6f78707acdb4e21bf533a6a65f8d002ab660b.ro.png
new file mode 100644
index 00000000..07cb7054
Binary files /dev/null and b/translated_images/plant7.194d5a42fcf5a88c5dd4960c68e6f78707acdb4e21bf533a6a65f8d002ab660b.ro.png differ
diff --git a/translated_images/plant7.194d5a42fcf5a88c5dd4960c68e6f78707acdb4e21bf533a6a65f8d002ab660b.sr.png b/translated_images/plant7.194d5a42fcf5a88c5dd4960c68e6f78707acdb4e21bf533a6a65f8d002ab660b.sr.png
new file mode 100644
index 00000000..07cb7054
Binary files /dev/null and b/translated_images/plant7.194d5a42fcf5a88c5dd4960c68e6f78707acdb4e21bf533a6a65f8d002ab660b.sr.png differ
diff --git a/translated_images/plant8.7b247809ab0eb492105cac4f42b79ac771ce56e401fdf3df170b3b6ef03c5642.bg.png b/translated_images/plant8.7b247809ab0eb492105cac4f42b79ac771ce56e401fdf3df170b3b6ef03c5642.bg.png
new file mode 100644
index 00000000..a0d261a9
Binary files /dev/null and b/translated_images/plant8.7b247809ab0eb492105cac4f42b79ac771ce56e401fdf3df170b3b6ef03c5642.bg.png differ
diff --git a/translated_images/plant8.7b247809ab0eb492105cac4f42b79ac771ce56e401fdf3df170b3b6ef03c5642.ro.png b/translated_images/plant8.7b247809ab0eb492105cac4f42b79ac771ce56e401fdf3df170b3b6ef03c5642.ro.png
new file mode 100644
index 00000000..a0d261a9
Binary files /dev/null and b/translated_images/plant8.7b247809ab0eb492105cac4f42b79ac771ce56e401fdf3df170b3b6ef03c5642.ro.png differ
diff --git a/translated_images/plant8.7b247809ab0eb492105cac4f42b79ac771ce56e401fdf3df170b3b6ef03c5642.sr.png b/translated_images/plant8.7b247809ab0eb492105cac4f42b79ac771ce56e401fdf3df170b3b6ef03c5642.sr.png
new file mode 100644
index 00000000..a0d261a9
Binary files /dev/null and b/translated_images/plant8.7b247809ab0eb492105cac4f42b79ac771ce56e401fdf3df170b3b6ef03c5642.sr.png differ
diff --git a/translated_images/plant9.8fe614c01ded1b1ec05d1b4d6d527047b1ece5edba299c1c516aaf4b05eb19ed.bg.png b/translated_images/plant9.8fe614c01ded1b1ec05d1b4d6d527047b1ece5edba299c1c516aaf4b05eb19ed.bg.png
new file mode 100644
index 00000000..bc09a050
Binary files /dev/null and b/translated_images/plant9.8fe614c01ded1b1ec05d1b4d6d527047b1ece5edba299c1c516aaf4b05eb19ed.bg.png differ
diff --git a/translated_images/plant9.8fe614c01ded1b1ec05d1b4d6d527047b1ece5edba299c1c516aaf4b05eb19ed.ro.png b/translated_images/plant9.8fe614c01ded1b1ec05d1b4d6d527047b1ece5edba299c1c516aaf4b05eb19ed.ro.png
new file mode 100644
index 00000000..bc09a050
Binary files /dev/null and b/translated_images/plant9.8fe614c01ded1b1ec05d1b4d6d527047b1ece5edba299c1c516aaf4b05eb19ed.ro.png differ
diff --git a/translated_images/plant9.8fe614c01ded1b1ec05d1b4d6d527047b1ece5edba299c1c516aaf4b05eb19ed.sr.png b/translated_images/plant9.8fe614c01ded1b1ec05d1b4d6d527047b1ece5edba299c1c516aaf4b05eb19ed.sr.png
new file mode 100644
index 00000000..bc09a050
Binary files /dev/null and b/translated_images/plant9.8fe614c01ded1b1ec05d1b4d6d527047b1ece5edba299c1c516aaf4b05eb19ed.sr.png differ
diff --git a/translated_images/player.137ee0e47f895ffcdb50ba1b316936715ec8decfd6cee3258332a6c60e5d0d04.bg.png b/translated_images/player.137ee0e47f895ffcdb50ba1b316936715ec8decfd6cee3258332a6c60e5d0d04.bg.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.137ee0e47f895ffcdb50ba1b316936715ec8decfd6cee3258332a6c60e5d0d04.bg.png differ
diff --git a/translated_images/player.137ee0e47f895ffcdb50ba1b316936715ec8decfd6cee3258332a6c60e5d0d04.ro.png b/translated_images/player.137ee0e47f895ffcdb50ba1b316936715ec8decfd6cee3258332a6c60e5d0d04.ro.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.137ee0e47f895ffcdb50ba1b316936715ec8decfd6cee3258332a6c60e5d0d04.ro.png differ
diff --git a/translated_images/player.137ee0e47f895ffcdb50ba1b316936715ec8decfd6cee3258332a6c60e5d0d04.sr.png b/translated_images/player.137ee0e47f895ffcdb50ba1b316936715ec8decfd6cee3258332a6c60e5d0d04.sr.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.137ee0e47f895ffcdb50ba1b316936715ec8decfd6cee3258332a6c60e5d0d04.sr.png differ
diff --git a/translated_images/player.2887422f6982c3cd284b2bafd7551ff073a7b7b8a66edd2f0c2c722f94acfd5c.bg.png b/translated_images/player.2887422f6982c3cd284b2bafd7551ff073a7b7b8a66edd2f0c2c722f94acfd5c.bg.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.2887422f6982c3cd284b2bafd7551ff073a7b7b8a66edd2f0c2c722f94acfd5c.bg.png differ
diff --git a/translated_images/player.2887422f6982c3cd284b2bafd7551ff073a7b7b8a66edd2f0c2c722f94acfd5c.ro.png b/translated_images/player.2887422f6982c3cd284b2bafd7551ff073a7b7b8a66edd2f0c2c722f94acfd5c.ro.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.2887422f6982c3cd284b2bafd7551ff073a7b7b8a66edd2f0c2c722f94acfd5c.ro.png differ
diff --git a/translated_images/player.2887422f6982c3cd284b2bafd7551ff073a7b7b8a66edd2f0c2c722f94acfd5c.sr.png b/translated_images/player.2887422f6982c3cd284b2bafd7551ff073a7b7b8a66edd2f0c2c722f94acfd5c.sr.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.2887422f6982c3cd284b2bafd7551ff073a7b7b8a66edd2f0c2c722f94acfd5c.sr.png differ
diff --git a/translated_images/player.391fed427ede24f513d4b559cff8ff60f00818b31c81268b783a7f89054fda90.bg.png b/translated_images/player.391fed427ede24f513d4b559cff8ff60f00818b31c81268b783a7f89054fda90.bg.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.391fed427ede24f513d4b559cff8ff60f00818b31c81268b783a7f89054fda90.bg.png differ
diff --git a/translated_images/player.391fed427ede24f513d4b559cff8ff60f00818b31c81268b783a7f89054fda90.ro.png b/translated_images/player.391fed427ede24f513d4b559cff8ff60f00818b31c81268b783a7f89054fda90.ro.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.391fed427ede24f513d4b559cff8ff60f00818b31c81268b783a7f89054fda90.ro.png differ
diff --git a/translated_images/player.391fed427ede24f513d4b559cff8ff60f00818b31c81268b783a7f89054fda90.sr.png b/translated_images/player.391fed427ede24f513d4b559cff8ff60f00818b31c81268b783a7f89054fda90.sr.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.391fed427ede24f513d4b559cff8ff60f00818b31c81268b783a7f89054fda90.sr.png differ
diff --git a/translated_images/player.3c4f50182552a73a2b22542c75209c57231da2f51d88d571f198382e2fb3b45b.bg.png b/translated_images/player.3c4f50182552a73a2b22542c75209c57231da2f51d88d571f198382e2fb3b45b.bg.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.3c4f50182552a73a2b22542c75209c57231da2f51d88d571f198382e2fb3b45b.bg.png differ
diff --git a/translated_images/player.3c4f50182552a73a2b22542c75209c57231da2f51d88d571f198382e2fb3b45b.ro.png b/translated_images/player.3c4f50182552a73a2b22542c75209c57231da2f51d88d571f198382e2fb3b45b.ro.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.3c4f50182552a73a2b22542c75209c57231da2f51d88d571f198382e2fb3b45b.ro.png differ
diff --git a/translated_images/player.3c4f50182552a73a2b22542c75209c57231da2f51d88d571f198382e2fb3b45b.sr.png b/translated_images/player.3c4f50182552a73a2b22542c75209c57231da2f51d88d571f198382e2fb3b45b.sr.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.3c4f50182552a73a2b22542c75209c57231da2f51d88d571f198382e2fb3b45b.sr.png differ
diff --git a/translated_images/player.47bc9de0714c723dfe0705c328fb8769de71c87b99d340921c2247674d9d631a.bg.png b/translated_images/player.47bc9de0714c723dfe0705c328fb8769de71c87b99d340921c2247674d9d631a.bg.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.47bc9de0714c723dfe0705c328fb8769de71c87b99d340921c2247674d9d631a.bg.png differ
diff --git a/translated_images/player.47bc9de0714c723dfe0705c328fb8769de71c87b99d340921c2247674d9d631a.ro.png b/translated_images/player.47bc9de0714c723dfe0705c328fb8769de71c87b99d340921c2247674d9d631a.ro.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.47bc9de0714c723dfe0705c328fb8769de71c87b99d340921c2247674d9d631a.ro.png differ
diff --git a/translated_images/player.47bc9de0714c723dfe0705c328fb8769de71c87b99d340921c2247674d9d631a.sr.png b/translated_images/player.47bc9de0714c723dfe0705c328fb8769de71c87b99d340921c2247674d9d631a.sr.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.47bc9de0714c723dfe0705c328fb8769de71c87b99d340921c2247674d9d631a.sr.png differ
diff --git a/translated_images/player.57b3107c03012695cedb271fdda06900e2d0d9580ae5fab5c563fdb029ba8584.bg.png b/translated_images/player.57b3107c03012695cedb271fdda06900e2d0d9580ae5fab5c563fdb029ba8584.bg.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.57b3107c03012695cedb271fdda06900e2d0d9580ae5fab5c563fdb029ba8584.bg.png differ
diff --git a/translated_images/player.57b3107c03012695cedb271fdda06900e2d0d9580ae5fab5c563fdb029ba8584.ro.png b/translated_images/player.57b3107c03012695cedb271fdda06900e2d0d9580ae5fab5c563fdb029ba8584.ro.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.57b3107c03012695cedb271fdda06900e2d0d9580ae5fab5c563fdb029ba8584.ro.png differ
diff --git a/translated_images/player.57b3107c03012695cedb271fdda06900e2d0d9580ae5fab5c563fdb029ba8584.sr.png b/translated_images/player.57b3107c03012695cedb271fdda06900e2d0d9580ae5fab5c563fdb029ba8584.sr.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.57b3107c03012695cedb271fdda06900e2d0d9580ae5fab5c563fdb029ba8584.sr.png differ
diff --git a/translated_images/player.606f85953e5e564e7711d22697724750fdcc661d5f7c5295e2da7e46905fd322.bg.png b/translated_images/player.606f85953e5e564e7711d22697724750fdcc661d5f7c5295e2da7e46905fd322.bg.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.606f85953e5e564e7711d22697724750fdcc661d5f7c5295e2da7e46905fd322.bg.png differ
diff --git a/translated_images/player.606f85953e5e564e7711d22697724750fdcc661d5f7c5295e2da7e46905fd322.ro.png b/translated_images/player.606f85953e5e564e7711d22697724750fdcc661d5f7c5295e2da7e46905fd322.ro.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.606f85953e5e564e7711d22697724750fdcc661d5f7c5295e2da7e46905fd322.ro.png differ
diff --git a/translated_images/player.606f85953e5e564e7711d22697724750fdcc661d5f7c5295e2da7e46905fd322.sr.png b/translated_images/player.606f85953e5e564e7711d22697724750fdcc661d5f7c5295e2da7e46905fd322.sr.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.606f85953e5e564e7711d22697724750fdcc661d5f7c5295e2da7e46905fd322.sr.png differ
diff --git a/translated_images/player.680ea4c619b54fe160261abdfe2e68139dedacb8d884b6cb405b9a6ab162940d.bg.png b/translated_images/player.680ea4c619b54fe160261abdfe2e68139dedacb8d884b6cb405b9a6ab162940d.bg.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.680ea4c619b54fe160261abdfe2e68139dedacb8d884b6cb405b9a6ab162940d.bg.png differ
diff --git a/translated_images/player.680ea4c619b54fe160261abdfe2e68139dedacb8d884b6cb405b9a6ab162940d.ro.png b/translated_images/player.680ea4c619b54fe160261abdfe2e68139dedacb8d884b6cb405b9a6ab162940d.ro.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.680ea4c619b54fe160261abdfe2e68139dedacb8d884b6cb405b9a6ab162940d.ro.png differ
diff --git a/translated_images/player.680ea4c619b54fe160261abdfe2e68139dedacb8d884b6cb405b9a6ab162940d.sr.png b/translated_images/player.680ea4c619b54fe160261abdfe2e68139dedacb8d884b6cb405b9a6ab162940d.sr.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.680ea4c619b54fe160261abdfe2e68139dedacb8d884b6cb405b9a6ab162940d.sr.png differ
diff --git a/translated_images/player.bfe14f110bddf56d10a1989066d170af2ce6b1412626c37a7e184963e54c7ef4.bg.png b/translated_images/player.bfe14f110bddf56d10a1989066d170af2ce6b1412626c37a7e184963e54c7ef4.bg.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.bfe14f110bddf56d10a1989066d170af2ce6b1412626c37a7e184963e54c7ef4.bg.png differ
diff --git a/translated_images/player.bfe14f110bddf56d10a1989066d170af2ce6b1412626c37a7e184963e54c7ef4.ro.png b/translated_images/player.bfe14f110bddf56d10a1989066d170af2ce6b1412626c37a7e184963e54c7ef4.ro.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.bfe14f110bddf56d10a1989066d170af2ce6b1412626c37a7e184963e54c7ef4.ro.png differ
diff --git a/translated_images/player.bfe14f110bddf56d10a1989066d170af2ce6b1412626c37a7e184963e54c7ef4.sr.png b/translated_images/player.bfe14f110bddf56d10a1989066d170af2ce6b1412626c37a7e184963e54c7ef4.sr.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.bfe14f110bddf56d10a1989066d170af2ce6b1412626c37a7e184963e54c7ef4.sr.png differ
diff --git a/translated_images/player.c99c25d54a615ca088fc55515a6ee76c766fba0e31b167816062f3ab3d22fbcd.bg.png b/translated_images/player.c99c25d54a615ca088fc55515a6ee76c766fba0e31b167816062f3ab3d22fbcd.bg.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.c99c25d54a615ca088fc55515a6ee76c766fba0e31b167816062f3ab3d22fbcd.bg.png differ
diff --git a/translated_images/player.c99c25d54a615ca088fc55515a6ee76c766fba0e31b167816062f3ab3d22fbcd.ro.png b/translated_images/player.c99c25d54a615ca088fc55515a6ee76c766fba0e31b167816062f3ab3d22fbcd.ro.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.c99c25d54a615ca088fc55515a6ee76c766fba0e31b167816062f3ab3d22fbcd.ro.png differ
diff --git a/translated_images/player.c99c25d54a615ca088fc55515a6ee76c766fba0e31b167816062f3ab3d22fbcd.sr.png b/translated_images/player.c99c25d54a615ca088fc55515a6ee76c766fba0e31b167816062f3ab3d22fbcd.sr.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.c99c25d54a615ca088fc55515a6ee76c766fba0e31b167816062f3ab3d22fbcd.sr.png differ
diff --git a/translated_images/player.dd24c1afa8c71e9b82b2958946d4bad13308681392d4b5ddcc61a0e818ef8088.bg.png b/translated_images/player.dd24c1afa8c71e9b82b2958946d4bad13308681392d4b5ddcc61a0e818ef8088.bg.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.dd24c1afa8c71e9b82b2958946d4bad13308681392d4b5ddcc61a0e818ef8088.bg.png differ
diff --git a/translated_images/player.dd24c1afa8c71e9b82b2958946d4bad13308681392d4b5ddcc61a0e818ef8088.ro.png b/translated_images/player.dd24c1afa8c71e9b82b2958946d4bad13308681392d4b5ddcc61a0e818ef8088.ro.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.dd24c1afa8c71e9b82b2958946d4bad13308681392d4b5ddcc61a0e818ef8088.ro.png differ
diff --git a/translated_images/player.dd24c1afa8c71e9b82b2958946d4bad13308681392d4b5ddcc61a0e818ef8088.sr.png b/translated_images/player.dd24c1afa8c71e9b82b2958946d4bad13308681392d4b5ddcc61a0e818ef8088.sr.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.dd24c1afa8c71e9b82b2958946d4bad13308681392d4b5ddcc61a0e818ef8088.sr.png differ
diff --git a/translated_images/playerDamaged.181703f652fd5176d25dbc286cdab2b79c9d7470dfd95af344dbb024780b6176.bg.png b/translated_images/playerDamaged.181703f652fd5176d25dbc286cdab2b79c9d7470dfd95af344dbb024780b6176.bg.png
new file mode 100644
index 00000000..91d73b26
Binary files /dev/null and b/translated_images/playerDamaged.181703f652fd5176d25dbc286cdab2b79c9d7470dfd95af344dbb024780b6176.bg.png differ
diff --git a/translated_images/playerDamaged.181703f652fd5176d25dbc286cdab2b79c9d7470dfd95af344dbb024780b6176.ro.png b/translated_images/playerDamaged.181703f652fd5176d25dbc286cdab2b79c9d7470dfd95af344dbb024780b6176.ro.png
new file mode 100644
index 00000000..91d73b26
Binary files /dev/null and b/translated_images/playerDamaged.181703f652fd5176d25dbc286cdab2b79c9d7470dfd95af344dbb024780b6176.ro.png differ
diff --git a/translated_images/playerDamaged.181703f652fd5176d25dbc286cdab2b79c9d7470dfd95af344dbb024780b6176.sr.png b/translated_images/playerDamaged.181703f652fd5176d25dbc286cdab2b79c9d7470dfd95af344dbb024780b6176.sr.png
new file mode 100644
index 00000000..91d73b26
Binary files /dev/null and b/translated_images/playerDamaged.181703f652fd5176d25dbc286cdab2b79c9d7470dfd95af344dbb024780b6176.sr.png differ
diff --git a/translated_images/playerLeft.0f928412e66ba5d9455ccc99ef113088d2510843b23f8dbcd3106425b221979f.bg.png b/translated_images/playerLeft.0f928412e66ba5d9455ccc99ef113088d2510843b23f8dbcd3106425b221979f.bg.png
new file mode 100644
index 00000000..941cd3ac
Binary files /dev/null and b/translated_images/playerLeft.0f928412e66ba5d9455ccc99ef113088d2510843b23f8dbcd3106425b221979f.bg.png differ
diff --git a/translated_images/playerLeft.0f928412e66ba5d9455ccc99ef113088d2510843b23f8dbcd3106425b221979f.ro.png b/translated_images/playerLeft.0f928412e66ba5d9455ccc99ef113088d2510843b23f8dbcd3106425b221979f.ro.png
new file mode 100644
index 00000000..941cd3ac
Binary files /dev/null and b/translated_images/playerLeft.0f928412e66ba5d9455ccc99ef113088d2510843b23f8dbcd3106425b221979f.ro.png differ
diff --git a/translated_images/playerLeft.0f928412e66ba5d9455ccc99ef113088d2510843b23f8dbcd3106425b221979f.sr.png b/translated_images/playerLeft.0f928412e66ba5d9455ccc99ef113088d2510843b23f8dbcd3106425b221979f.sr.png
new file mode 100644
index 00000000..941cd3ac
Binary files /dev/null and b/translated_images/playerLeft.0f928412e66ba5d9455ccc99ef113088d2510843b23f8dbcd3106425b221979f.sr.png differ
diff --git a/translated_images/playerRight.e4825f489e29f73719f8e3197ba0e5742e2ffbc178641009b57fe254c6abdc38.bg.png b/translated_images/playerRight.e4825f489e29f73719f8e3197ba0e5742e2ffbc178641009b57fe254c6abdc38.bg.png
new file mode 100644
index 00000000..4e69314c
Binary files /dev/null and b/translated_images/playerRight.e4825f489e29f73719f8e3197ba0e5742e2ffbc178641009b57fe254c6abdc38.bg.png differ
diff --git a/translated_images/playerRight.e4825f489e29f73719f8e3197ba0e5742e2ffbc178641009b57fe254c6abdc38.ro.png b/translated_images/playerRight.e4825f489e29f73719f8e3197ba0e5742e2ffbc178641009b57fe254c6abdc38.ro.png
new file mode 100644
index 00000000..4e69314c
Binary files /dev/null and b/translated_images/playerRight.e4825f489e29f73719f8e3197ba0e5742e2ffbc178641009b57fe254c6abdc38.ro.png differ
diff --git a/translated_images/playerRight.e4825f489e29f73719f8e3197ba0e5742e2ffbc178641009b57fe254c6abdc38.sr.png b/translated_images/playerRight.e4825f489e29f73719f8e3197ba0e5742e2ffbc178641009b57fe254c6abdc38.sr.png
new file mode 100644
index 00000000..4e69314c
Binary files /dev/null and b/translated_images/playerRight.e4825f489e29f73719f8e3197ba0e5742e2ffbc178641009b57fe254c6abdc38.sr.png differ
diff --git a/translated_images/preview.9215f0a010074476f8ab66e6becf3c1b594a30cca0a28b88fb4f3f4821594dc0.bg.jpg b/translated_images/preview.9215f0a010074476f8ab66e6becf3c1b594a30cca0a28b88fb4f3f4821594dc0.bg.jpg
new file mode 100644
index 00000000..8987973e
Binary files /dev/null and b/translated_images/preview.9215f0a010074476f8ab66e6becf3c1b594a30cca0a28b88fb4f3f4821594dc0.bg.jpg differ
diff --git a/translated_images/preview.9215f0a010074476f8ab66e6becf3c1b594a30cca0a28b88fb4f3f4821594dc0.ro.jpg b/translated_images/preview.9215f0a010074476f8ab66e6becf3c1b594a30cca0a28b88fb4f3f4821594dc0.ro.jpg
new file mode 100644
index 00000000..516d0413
Binary files /dev/null and b/translated_images/preview.9215f0a010074476f8ab66e6becf3c1b594a30cca0a28b88fb4f3f4821594dc0.ro.jpg differ
diff --git a/translated_images/preview.9215f0a010074476f8ab66e6becf3c1b594a30cca0a28b88fb4f3f4821594dc0.sr.jpg b/translated_images/preview.9215f0a010074476f8ab66e6becf3c1b594a30cca0a28b88fb4f3f4821594dc0.sr.jpg
new file mode 100644
index 00000000..8c58aa7a
Binary files /dev/null and b/translated_images/preview.9215f0a010074476f8ab66e6becf3c1b594a30cca0a28b88fb4f3f4821594dc0.sr.jpg differ
diff --git a/translated_images/profiler.5a4a62479c5df01cfec9aab74173dba13f91d2c968e1a1ae434c26165792df15.bg.png b/translated_images/profiler.5a4a62479c5df01cfec9aab74173dba13f91d2c968e1a1ae434c26165792df15.bg.png
new file mode 100644
index 00000000..abe3804e
Binary files /dev/null and b/translated_images/profiler.5a4a62479c5df01cfec9aab74173dba13f91d2c968e1a1ae434c26165792df15.bg.png differ
diff --git a/translated_images/profiler.5a4a62479c5df01cfec9aab74173dba13f91d2c968e1a1ae434c26165792df15.ro.png b/translated_images/profiler.5a4a62479c5df01cfec9aab74173dba13f91d2c968e1a1ae434c26165792df15.ro.png
new file mode 100644
index 00000000..4a5023bd
Binary files /dev/null and b/translated_images/profiler.5a4a62479c5df01cfec9aab74173dba13f91d2c968e1a1ae434c26165792df15.ro.png differ
diff --git a/translated_images/profiler.5a4a62479c5df01cfec9aab74173dba13f91d2c968e1a1ae434c26165792df15.sr.png b/translated_images/profiler.5a4a62479c5df01cfec9aab74173dba13f91d2c968e1a1ae434c26165792df15.sr.png
new file mode 100644
index 00000000..4214a754
Binary files /dev/null and b/translated_images/profiler.5a4a62479c5df01cfec9aab74173dba13f91d2c968e1a1ae434c26165792df15.sr.png differ
diff --git a/translated_images/project-on-vscode.dev.e79815a9a95ee7feac72ebe5c941c91279716be37c575dbdbf2f43bea2c7d8b6.bg.png b/translated_images/project-on-vscode.dev.e79815a9a95ee7feac72ebe5c941c91279716be37c575dbdbf2f43bea2c7d8b6.bg.png
new file mode 100644
index 00000000..1ae052b4
Binary files /dev/null and b/translated_images/project-on-vscode.dev.e79815a9a95ee7feac72ebe5c941c91279716be37c575dbdbf2f43bea2c7d8b6.bg.png differ
diff --git a/translated_images/project-on-vscode.dev.e79815a9a95ee7feac72ebe5c941c91279716be37c575dbdbf2f43bea2c7d8b6.ro.png b/translated_images/project-on-vscode.dev.e79815a9a95ee7feac72ebe5c941c91279716be37c575dbdbf2f43bea2c7d8b6.ro.png
new file mode 100644
index 00000000..e4aa1f71
Binary files /dev/null and b/translated_images/project-on-vscode.dev.e79815a9a95ee7feac72ebe5c941c91279716be37c575dbdbf2f43bea2c7d8b6.ro.png differ
diff --git a/translated_images/project-on-vscode.dev.e79815a9a95ee7feac72ebe5c941c91279716be37c575dbdbf2f43bea2c7d8b6.sr.png b/translated_images/project-on-vscode.dev.e79815a9a95ee7feac72ebe5c941c91279716be37c575dbdbf2f43bea2c7d8b6.sr.png
new file mode 100644
index 00000000..a8548dca
Binary files /dev/null and b/translated_images/project-on-vscode.dev.e79815a9a95ee7feac72ebe5c941c91279716be37c575dbdbf2f43bea2c7d8b6.sr.png differ
diff --git a/translated_images/result.96ef01f607bf856aa9789078633e94a4f7664d912f235efce2657299becca483.bg.png b/translated_images/result.96ef01f607bf856aa9789078633e94a4f7664d912f235efce2657299becca483.bg.png
new file mode 100644
index 00000000..118c952d
Binary files /dev/null and b/translated_images/result.96ef01f607bf856aa9789078633e94a4f7664d912f235efce2657299becca483.bg.png differ
diff --git a/translated_images/result.96ef01f607bf856aa9789078633e94a4f7664d912f235efce2657299becca483.ro.png b/translated_images/result.96ef01f607bf856aa9789078633e94a4f7664d912f235efce2657299becca483.ro.png
new file mode 100644
index 00000000..2ccb4950
Binary files /dev/null and b/translated_images/result.96ef01f607bf856aa9789078633e94a4f7664d912f235efce2657299becca483.ro.png differ
diff --git a/translated_images/result.96ef01f607bf856aa9789078633e94a4f7664d912f235efce2657299becca483.sr.png b/translated_images/result.96ef01f607bf856aa9789078633e94a4f7664d912f235efce2657299becca483.sr.png
new file mode 100644
index 00000000..816fd5af
Binary files /dev/null and b/translated_images/result.96ef01f607bf856aa9789078633e94a4f7664d912f235efce2657299becca483.sr.png differ
diff --git a/translated_images/screen1.baccbba0f1f93364672eb250d2fbd21574bb1caf79a2155022dc098a741cbdfe.bg.png b/translated_images/screen1.baccbba0f1f93364672eb250d2fbd21574bb1caf79a2155022dc098a741cbdfe.bg.png
new file mode 100644
index 00000000..66e03b7d
Binary files /dev/null and b/translated_images/screen1.baccbba0f1f93364672eb250d2fbd21574bb1caf79a2155022dc098a741cbdfe.bg.png differ
diff --git a/translated_images/screen1.baccbba0f1f93364672eb250d2fbd21574bb1caf79a2155022dc098a741cbdfe.ro.png b/translated_images/screen1.baccbba0f1f93364672eb250d2fbd21574bb1caf79a2155022dc098a741cbdfe.ro.png
new file mode 100644
index 00000000..054a5d4c
Binary files /dev/null and b/translated_images/screen1.baccbba0f1f93364672eb250d2fbd21574bb1caf79a2155022dc098a741cbdfe.ro.png differ
diff --git a/translated_images/screen1.baccbba0f1f93364672eb250d2fbd21574bb1caf79a2155022dc098a741cbdfe.sr.png b/translated_images/screen1.baccbba0f1f93364672eb250d2fbd21574bb1caf79a2155022dc098a741cbdfe.sr.png
new file mode 100644
index 00000000..fd27d91e
Binary files /dev/null and b/translated_images/screen1.baccbba0f1f93364672eb250d2fbd21574bb1caf79a2155022dc098a741cbdfe.sr.png differ
diff --git a/translated_images/screen2.123c82a831a1d14ab2061994be2fa5de9cec1ce651047217d326d4773a6348e4.bg.png b/translated_images/screen2.123c82a831a1d14ab2061994be2fa5de9cec1ce651047217d326d4773a6348e4.bg.png
new file mode 100644
index 00000000..e52ef1a8
Binary files /dev/null and b/translated_images/screen2.123c82a831a1d14ab2061994be2fa5de9cec1ce651047217d326d4773a6348e4.bg.png differ
diff --git a/translated_images/screen2.123c82a831a1d14ab2061994be2fa5de9cec1ce651047217d326d4773a6348e4.ro.png b/translated_images/screen2.123c82a831a1d14ab2061994be2fa5de9cec1ce651047217d326d4773a6348e4.ro.png
new file mode 100644
index 00000000..2b997923
Binary files /dev/null and b/translated_images/screen2.123c82a831a1d14ab2061994be2fa5de9cec1ce651047217d326d4773a6348e4.ro.png differ
diff --git a/translated_images/screen2.123c82a831a1d14ab2061994be2fa5de9cec1ce651047217d326d4773a6348e4.sr.png b/translated_images/screen2.123c82a831a1d14ab2061994be2fa5de9cec1ce651047217d326d4773a6348e4.sr.png
new file mode 100644
index 00000000..4bc2353f
Binary files /dev/null and b/translated_images/screen2.123c82a831a1d14ab2061994be2fa5de9cec1ce651047217d326d4773a6348e4.sr.png differ
diff --git a/translated_images/screenshot.e7a5ad659e3645682a7d44bd944af8147012dc403b4965712a052214b42e77c1.bg.png b/translated_images/screenshot.e7a5ad659e3645682a7d44bd944af8147012dc403b4965712a052214b42e77c1.bg.png
new file mode 100644
index 00000000..875b9ae5
Binary files /dev/null and b/translated_images/screenshot.e7a5ad659e3645682a7d44bd944af8147012dc403b4965712a052214b42e77c1.bg.png differ
diff --git a/translated_images/screenshot.e7a5ad659e3645682a7d44bd944af8147012dc403b4965712a052214b42e77c1.ro.png b/translated_images/screenshot.e7a5ad659e3645682a7d44bd944af8147012dc403b4965712a052214b42e77c1.ro.png
new file mode 100644
index 00000000..3ba1993a
Binary files /dev/null and b/translated_images/screenshot.e7a5ad659e3645682a7d44bd944af8147012dc403b4965712a052214b42e77c1.ro.png differ
diff --git a/translated_images/screenshot.e7a5ad659e3645682a7d44bd944af8147012dc403b4965712a052214b42e77c1.sr.png b/translated_images/screenshot.e7a5ad659e3645682a7d44bd944af8147012dc403b4965712a052214b42e77c1.sr.png
new file mode 100644
index 00000000..b9a9f500
Binary files /dev/null and b/translated_images/screenshot.e7a5ad659e3645682a7d44bd944af8147012dc403b4965712a052214b42e77c1.sr.png differ
diff --git a/translated_images/screenshot_gray.0c796099a1f9f25e40aa55ead81f268434c00af30d7092490759945eda63067d.bg.png b/translated_images/screenshot_gray.0c796099a1f9f25e40aa55ead81f268434c00af30d7092490759945eda63067d.bg.png
new file mode 100644
index 00000000..7f77d498
Binary files /dev/null and b/translated_images/screenshot_gray.0c796099a1f9f25e40aa55ead81f268434c00af30d7092490759945eda63067d.bg.png differ
diff --git a/translated_images/screenshot_gray.0c796099a1f9f25e40aa55ead81f268434c00af30d7092490759945eda63067d.ro.png b/translated_images/screenshot_gray.0c796099a1f9f25e40aa55ead81f268434c00af30d7092490759945eda63067d.ro.png
new file mode 100644
index 00000000..d58b49e4
Binary files /dev/null and b/translated_images/screenshot_gray.0c796099a1f9f25e40aa55ead81f268434c00af30d7092490759945eda63067d.ro.png differ
diff --git a/translated_images/screenshot_gray.0c796099a1f9f25e40aa55ead81f268434c00af30d7092490759945eda63067d.sr.png b/translated_images/screenshot_gray.0c796099a1f9f25e40aa55ead81f268434c00af30d7092490759945eda63067d.sr.png
new file mode 100644
index 00000000..0b435434
Binary files /dev/null and b/translated_images/screenshot_gray.0c796099a1f9f25e40aa55ead81f268434c00af30d7092490759945eda63067d.sr.png differ
diff --git a/translated_images/shield.1b9412b7ca6610ab21f8836483f4e1ec7835b7fe61617f2cead3ff3317ddd56f.bg.png b/translated_images/shield.1b9412b7ca6610ab21f8836483f4e1ec7835b7fe61617f2cead3ff3317ddd56f.bg.png
new file mode 100644
index 00000000..b962a2f1
Binary files /dev/null and b/translated_images/shield.1b9412b7ca6610ab21f8836483f4e1ec7835b7fe61617f2cead3ff3317ddd56f.bg.png differ
diff --git a/translated_images/shield.1b9412b7ca6610ab21f8836483f4e1ec7835b7fe61617f2cead3ff3317ddd56f.ro.png b/translated_images/shield.1b9412b7ca6610ab21f8836483f4e1ec7835b7fe61617f2cead3ff3317ddd56f.ro.png
new file mode 100644
index 00000000..b962a2f1
Binary files /dev/null and b/translated_images/shield.1b9412b7ca6610ab21f8836483f4e1ec7835b7fe61617f2cead3ff3317ddd56f.ro.png differ
diff --git a/translated_images/shield.1b9412b7ca6610ab21f8836483f4e1ec7835b7fe61617f2cead3ff3317ddd56f.sr.png b/translated_images/shield.1b9412b7ca6610ab21f8836483f4e1ec7835b7fe61617f2cead3ff3317ddd56f.sr.png
new file mode 100644
index 00000000..b962a2f1
Binary files /dev/null and b/translated_images/shield.1b9412b7ca6610ab21f8836483f4e1ec7835b7fe61617f2cead3ff3317ddd56f.sr.png differ
diff --git a/translated_images/snapshot.97750180ebcad73794a3594b36925eb5c8dbaac9e03fec7f9b974188c9ac63c7.bg.png b/translated_images/snapshot.97750180ebcad73794a3594b36925eb5c8dbaac9e03fec7f9b974188c9ac63c7.bg.png
new file mode 100644
index 00000000..fe6d2e9b
Binary files /dev/null and b/translated_images/snapshot.97750180ebcad73794a3594b36925eb5c8dbaac9e03fec7f9b974188c9ac63c7.bg.png differ
diff --git a/translated_images/snapshot.97750180ebcad73794a3594b36925eb5c8dbaac9e03fec7f9b974188c9ac63c7.ro.png b/translated_images/snapshot.97750180ebcad73794a3594b36925eb5c8dbaac9e03fec7f9b974188c9ac63c7.ro.png
new file mode 100644
index 00000000..191a1e6e
Binary files /dev/null and b/translated_images/snapshot.97750180ebcad73794a3594b36925eb5c8dbaac9e03fec7f9b974188c9ac63c7.ro.png differ
diff --git a/translated_images/snapshot.97750180ebcad73794a3594b36925eb5c8dbaac9e03fec7f9b974188c9ac63c7.sr.png b/translated_images/snapshot.97750180ebcad73794a3594b36925eb5c8dbaac9e03fec7f9b974188c9ac63c7.sr.png
new file mode 100644
index 00000000..29a102d1
Binary files /dev/null and b/translated_images/snapshot.97750180ebcad73794a3594b36925eb5c8dbaac9e03fec7f9b974188c9ac63c7.sr.png differ
diff --git a/translated_images/spa.268ec73b41f992c2a21ef9294235c6ae597b3c37e2c03f0494c2d8857325cc57.bg.png b/translated_images/spa.268ec73b41f992c2a21ef9294235c6ae597b3c37e2c03f0494c2d8857325cc57.bg.png
new file mode 100644
index 00000000..696eb115
Binary files /dev/null and b/translated_images/spa.268ec73b41f992c2a21ef9294235c6ae597b3c37e2c03f0494c2d8857325cc57.bg.png differ
diff --git a/translated_images/spa.268ec73b41f992c2a21ef9294235c6ae597b3c37e2c03f0494c2d8857325cc57.ro.png b/translated_images/spa.268ec73b41f992c2a21ef9294235c6ae597b3c37e2c03f0494c2d8857325cc57.ro.png
new file mode 100644
index 00000000..3fecf0e6
Binary files /dev/null and b/translated_images/spa.268ec73b41f992c2a21ef9294235c6ae597b3c37e2c03f0494c2d8857325cc57.ro.png differ
diff --git a/translated_images/spa.268ec73b41f992c2a21ef9294235c6ae597b3c37e2c03f0494c2d8857325cc57.sr.png b/translated_images/spa.268ec73b41f992c2a21ef9294235c6ae597b3c37e2c03f0494c2d8857325cc57.sr.png
new file mode 100644
index 00000000..4c66e35c
Binary files /dev/null and b/translated_images/spa.268ec73b41f992c2a21ef9294235c6ae597b3c37e2c03f0494c2d8857325cc57.sr.png differ
diff --git a/translated_images/speedLine.5bcabb93f48b5ae1fe081a6b8832ed314636560b7bb228889bfbeb75a0322490.bg.png b/translated_images/speedLine.5bcabb93f48b5ae1fe081a6b8832ed314636560b7bb228889bfbeb75a0322490.bg.png
new file mode 100644
index 00000000..03018e7f
Binary files /dev/null and b/translated_images/speedLine.5bcabb93f48b5ae1fe081a6b8832ed314636560b7bb228889bfbeb75a0322490.bg.png differ
diff --git a/translated_images/speedLine.5bcabb93f48b5ae1fe081a6b8832ed314636560b7bb228889bfbeb75a0322490.ro.png b/translated_images/speedLine.5bcabb93f48b5ae1fe081a6b8832ed314636560b7bb228889bfbeb75a0322490.ro.png
new file mode 100644
index 00000000..03018e7f
Binary files /dev/null and b/translated_images/speedLine.5bcabb93f48b5ae1fe081a6b8832ed314636560b7bb228889bfbeb75a0322490.ro.png differ
diff --git a/translated_images/speedLine.5bcabb93f48b5ae1fe081a6b8832ed314636560b7bb228889bfbeb75a0322490.sr.png b/translated_images/speedLine.5bcabb93f48b5ae1fe081a6b8832ed314636560b7bb228889bfbeb75a0322490.sr.png
new file mode 100644
index 00000000..03018e7f
Binary files /dev/null and b/translated_images/speedLine.5bcabb93f48b5ae1fe081a6b8832ed314636560b7bb228889bfbeb75a0322490.sr.png differ
diff --git a/translated_images/spritesheet.bec82852290b14ee8f814b4173f8d823658151a2402c2be8f15b17159290d1ab.bg.png b/translated_images/spritesheet.bec82852290b14ee8f814b4173f8d823658151a2402c2be8f15b17159290d1ab.bg.png
new file mode 100644
index 00000000..c7f6f709
Binary files /dev/null and b/translated_images/spritesheet.bec82852290b14ee8f814b4173f8d823658151a2402c2be8f15b17159290d1ab.bg.png differ
diff --git a/translated_images/spritesheet.bec82852290b14ee8f814b4173f8d823658151a2402c2be8f15b17159290d1ab.ro.png b/translated_images/spritesheet.bec82852290b14ee8f814b4173f8d823658151a2402c2be8f15b17159290d1ab.ro.png
new file mode 100644
index 00000000..c7f6f709
Binary files /dev/null and b/translated_images/spritesheet.bec82852290b14ee8f814b4173f8d823658151a2402c2be8f15b17159290d1ab.ro.png differ
diff --git a/translated_images/spritesheet.bec82852290b14ee8f814b4173f8d823658151a2402c2be8f15b17159290d1ab.sr.png b/translated_images/spritesheet.bec82852290b14ee8f814b4173f8d823658151a2402c2be8f15b17159290d1ab.sr.png
new file mode 100644
index 00000000..c7f6f709
Binary files /dev/null and b/translated_images/spritesheet.bec82852290b14ee8f814b4173f8d823658151a2402c2be8f15b17159290d1ab.sr.png differ
diff --git a/translated_images/starBackground.a897b8acb1b0587dbb2cdbf8beeaa388269510bb3ac3b4165f0141dc893045a2.bg.png b/translated_images/starBackground.a897b8acb1b0587dbb2cdbf8beeaa388269510bb3ac3b4165f0141dc893045a2.bg.png
new file mode 100644
index 00000000..7344ae88
Binary files /dev/null and b/translated_images/starBackground.a897b8acb1b0587dbb2cdbf8beeaa388269510bb3ac3b4165f0141dc893045a2.bg.png differ
diff --git a/translated_images/starBackground.a897b8acb1b0587dbb2cdbf8beeaa388269510bb3ac3b4165f0141dc893045a2.ro.png b/translated_images/starBackground.a897b8acb1b0587dbb2cdbf8beeaa388269510bb3ac3b4165f0141dc893045a2.ro.png
new file mode 100644
index 00000000..7344ae88
Binary files /dev/null and b/translated_images/starBackground.a897b8acb1b0587dbb2cdbf8beeaa388269510bb3ac3b4165f0141dc893045a2.ro.png differ
diff --git a/translated_images/starBackground.a897b8acb1b0587dbb2cdbf8beeaa388269510bb3ac3b4165f0141dc893045a2.sr.png b/translated_images/starBackground.a897b8acb1b0587dbb2cdbf8beeaa388269510bb3ac3b4165f0141dc893045a2.sr.png
new file mode 100644
index 00000000..7344ae88
Binary files /dev/null and b/translated_images/starBackground.a897b8acb1b0587dbb2cdbf8beeaa388269510bb3ac3b4165f0141dc893045a2.sr.png differ
diff --git a/translated_images/starBig.72e9c6d0d18f363d485fd26a32c346d269d465f6a87bc0ca5e94ecd34fcd7362.bg.png b/translated_images/starBig.72e9c6d0d18f363d485fd26a32c346d269d465f6a87bc0ca5e94ecd34fcd7362.bg.png
new file mode 100644
index 00000000..e38c77b7
Binary files /dev/null and b/translated_images/starBig.72e9c6d0d18f363d485fd26a32c346d269d465f6a87bc0ca5e94ecd34fcd7362.bg.png differ
diff --git a/translated_images/starBig.72e9c6d0d18f363d485fd26a32c346d269d465f6a87bc0ca5e94ecd34fcd7362.ro.png b/translated_images/starBig.72e9c6d0d18f363d485fd26a32c346d269d465f6a87bc0ca5e94ecd34fcd7362.ro.png
new file mode 100644
index 00000000..e38c77b7
Binary files /dev/null and b/translated_images/starBig.72e9c6d0d18f363d485fd26a32c346d269d465f6a87bc0ca5e94ecd34fcd7362.ro.png differ
diff --git a/translated_images/starBig.72e9c6d0d18f363d485fd26a32c346d269d465f6a87bc0ca5e94ecd34fcd7362.sr.png b/translated_images/starBig.72e9c6d0d18f363d485fd26a32c346d269d465f6a87bc0ca5e94ecd34fcd7362.sr.png
new file mode 100644
index 00000000..e38c77b7
Binary files /dev/null and b/translated_images/starBig.72e9c6d0d18f363d485fd26a32c346d269d465f6a87bc0ca5e94ecd34fcd7362.sr.png differ
diff --git a/translated_images/starSmall.ed78b961dbcd0898e8b9b721cbaaa8d54a0a1165a52a13f19650064add273eec.bg.png b/translated_images/starSmall.ed78b961dbcd0898e8b9b721cbaaa8d54a0a1165a52a13f19650064add273eec.bg.png
new file mode 100644
index 00000000..56bcfd58
Binary files /dev/null and b/translated_images/starSmall.ed78b961dbcd0898e8b9b721cbaaa8d54a0a1165a52a13f19650064add273eec.bg.png differ
diff --git a/translated_images/starSmall.ed78b961dbcd0898e8b9b721cbaaa8d54a0a1165a52a13f19650064add273eec.ro.png b/translated_images/starSmall.ed78b961dbcd0898e8b9b721cbaaa8d54a0a1165a52a13f19650064add273eec.ro.png
new file mode 100644
index 00000000..56bcfd58
Binary files /dev/null and b/translated_images/starSmall.ed78b961dbcd0898e8b9b721cbaaa8d54a0a1165a52a13f19650064add273eec.ro.png differ
diff --git a/translated_images/starSmall.ed78b961dbcd0898e8b9b721cbaaa8d54a0a1165a52a13f19650064add273eec.sr.png b/translated_images/starSmall.ed78b961dbcd0898e8b9b721cbaaa8d54a0a1165a52a13f19650064add273eec.sr.png
new file mode 100644
index 00000000..56bcfd58
Binary files /dev/null and b/translated_images/starSmall.ed78b961dbcd0898e8b9b721cbaaa8d54a0a1165a52a13f19650064add273eec.sr.png differ
diff --git a/translated_images/terrarium-final.0920f16e87c13a84cd2b553a5af9a3ad1cffbd41fbf8ce715d9e9c43809a5e2c.bg.png b/translated_images/terrarium-final.0920f16e87c13a84cd2b553a5af9a3ad1cffbd41fbf8ce715d9e9c43809a5e2c.bg.png
new file mode 100644
index 00000000..7f77d498
Binary files /dev/null and b/translated_images/terrarium-final.0920f16e87c13a84cd2b553a5af9a3ad1cffbd41fbf8ce715d9e9c43809a5e2c.bg.png differ
diff --git a/translated_images/terrarium-final.0920f16e87c13a84cd2b553a5af9a3ad1cffbd41fbf8ce715d9e9c43809a5e2c.ro.png b/translated_images/terrarium-final.0920f16e87c13a84cd2b553a5af9a3ad1cffbd41fbf8ce715d9e9c43809a5e2c.ro.png
new file mode 100644
index 00000000..d58b49e4
Binary files /dev/null and b/translated_images/terrarium-final.0920f16e87c13a84cd2b553a5af9a3ad1cffbd41fbf8ce715d9e9c43809a5e2c.ro.png differ
diff --git a/translated_images/terrarium-final.0920f16e87c13a84cd2b553a5af9a3ad1cffbd41fbf8ce715d9e9c43809a5e2c.sr.png b/translated_images/terrarium-final.0920f16e87c13a84cd2b553a5af9a3ad1cffbd41fbf8ce715d9e9c43809a5e2c.sr.png
new file mode 100644
index 00000000..0b435434
Binary files /dev/null and b/translated_images/terrarium-final.0920f16e87c13a84cd2b553a5af9a3ad1cffbd41fbf8ce715d9e9c43809a5e2c.sr.png differ
diff --git a/translated_images/terrarium-final.2f07047ffc597d0a06b06cab28a77801a10dd12fdb6c7fc630e9c40665491c53.bg.png b/translated_images/terrarium-final.2f07047ffc597d0a06b06cab28a77801a10dd12fdb6c7fc630e9c40665491c53.bg.png
new file mode 100644
index 00000000..e2f97c41
Binary files /dev/null and b/translated_images/terrarium-final.2f07047ffc597d0a06b06cab28a77801a10dd12fdb6c7fc630e9c40665491c53.bg.png differ
diff --git a/translated_images/terrarium-final.2f07047ffc597d0a06b06cab28a77801a10dd12fdb6c7fc630e9c40665491c53.ro.png b/translated_images/terrarium-final.2f07047ffc597d0a06b06cab28a77801a10dd12fdb6c7fc630e9c40665491c53.ro.png
new file mode 100644
index 00000000..bb649e99
Binary files /dev/null and b/translated_images/terrarium-final.2f07047ffc597d0a06b06cab28a77801a10dd12fdb6c7fc630e9c40665491c53.ro.png differ
diff --git a/translated_images/terrarium-final.2f07047ffc597d0a06b06cab28a77801a10dd12fdb6c7fc630e9c40665491c53.sr.png b/translated_images/terrarium-final.2f07047ffc597d0a06b06cab28a77801a10dd12fdb6c7fc630e9c40665491c53.sr.png
new file mode 100644
index 00000000..f6258973
Binary files /dev/null and b/translated_images/terrarium-final.2f07047ffc597d0a06b06cab28a77801a10dd12fdb6c7fc630e9c40665491c53.sr.png differ
diff --git a/translated_images/validation-error.8bd23e98d416c22f80076d04829a4bb718e0e550fd622862ef59008ccf0d5dce.bg.png b/translated_images/validation-error.8bd23e98d416c22f80076d04829a4bb718e0e550fd622862ef59008ccf0d5dce.bg.png
new file mode 100644
index 00000000..1881d6ef
Binary files /dev/null and b/translated_images/validation-error.8bd23e98d416c22f80076d04829a4bb718e0e550fd622862ef59008ccf0d5dce.bg.png differ
diff --git a/translated_images/validation-error.8bd23e98d416c22f80076d04829a4bb718e0e550fd622862ef59008ccf0d5dce.ro.png b/translated_images/validation-error.8bd23e98d416c22f80076d04829a4bb718e0e550fd622862ef59008ccf0d5dce.ro.png
new file mode 100644
index 00000000..6c632223
Binary files /dev/null and b/translated_images/validation-error.8bd23e98d416c22f80076d04829a4bb718e0e550fd622862ef59008ccf0d5dce.ro.png differ
diff --git a/translated_images/validation-error.8bd23e98d416c22f80076d04829a4bb718e0e550fd622862ef59008ccf0d5dce.sr.png b/translated_images/validation-error.8bd23e98d416c22f80076d04829a4bb718e0e550fd622862ef59008ccf0d5dce.sr.png
new file mode 100644
index 00000000..449bdb1c
Binary files /dev/null and b/translated_images/validation-error.8bd23e98d416c22f80076d04829a4bb718e0e550fd622862ef59008ccf0d5dce.sr.png differ
diff --git a/translated_images/vs-code-index.e2986cf919471eb984a0afef231380c8b132b000635105f2397bd2754d1b689c.bg.png b/translated_images/vs-code-index.e2986cf919471eb984a0afef231380c8b132b000635105f2397bd2754d1b689c.bg.png
new file mode 100644
index 00000000..b9d23947
Binary files /dev/null and b/translated_images/vs-code-index.e2986cf919471eb984a0afef231380c8b132b000635105f2397bd2754d1b689c.bg.png differ
diff --git a/translated_images/vs-code-index.e2986cf919471eb984a0afef231380c8b132b000635105f2397bd2754d1b689c.ro.png b/translated_images/vs-code-index.e2986cf919471eb984a0afef231380c8b132b000635105f2397bd2754d1b689c.ro.png
new file mode 100644
index 00000000..64cfa1a7
Binary files /dev/null and b/translated_images/vs-code-index.e2986cf919471eb984a0afef231380c8b132b000635105f2397bd2754d1b689c.ro.png differ
diff --git a/translated_images/vs-code-index.e2986cf919471eb984a0afef231380c8b132b000635105f2397bd2754d1b689c.sr.png b/translated_images/vs-code-index.e2986cf919471eb984a0afef231380c8b132b000635105f2397bd2754d1b689c.sr.png
new file mode 100644
index 00000000..539a2531
Binary files /dev/null and b/translated_images/vs-code-index.e2986cf919471eb984a0afef231380c8b132b000635105f2397bd2754d1b689c.sr.png differ
diff --git a/translated_images/webdev101-a11y.8ef3025c858d897a403a1a42c0897c76e11b724d9a8a0c0578dd4316f7507622.bg.png b/translated_images/webdev101-a11y.8ef3025c858d897a403a1a42c0897c76e11b724d9a8a0c0578dd4316f7507622.bg.png
new file mode 100644
index 00000000..707025e4
Binary files /dev/null and b/translated_images/webdev101-a11y.8ef3025c858d897a403a1a42c0897c76e11b724d9a8a0c0578dd4316f7507622.bg.png differ
diff --git a/translated_images/webdev101-a11y.8ef3025c858d897a403a1a42c0897c76e11b724d9a8a0c0578dd4316f7507622.ro.png b/translated_images/webdev101-a11y.8ef3025c858d897a403a1a42c0897c76e11b724d9a8a0c0578dd4316f7507622.ro.png
new file mode 100644
index 00000000..20d49a00
Binary files /dev/null and b/translated_images/webdev101-a11y.8ef3025c858d897a403a1a42c0897c76e11b724d9a8a0c0578dd4316f7507622.ro.png differ
diff --git a/translated_images/webdev101-a11y.8ef3025c858d897a403a1a42c0897c76e11b724d9a8a0c0578dd4316f7507622.sr.png b/translated_images/webdev101-a11y.8ef3025c858d897a403a1a42c0897c76e11b724d9a8a0c0578dd4316f7507622.sr.png
new file mode 100644
index 00000000..a56a39b4
Binary files /dev/null and b/translated_images/webdev101-a11y.8ef3025c858d897a403a1a42c0897c76e11b724d9a8a0c0578dd4316f7507622.sr.png differ
diff --git a/translated_images/webdev101-css.3f7af5991bf53a200d79e7257e5e450408d8ea97f5b531d31b2e3976317338ee.bg.png b/translated_images/webdev101-css.3f7af5991bf53a200d79e7257e5e450408d8ea97f5b531d31b2e3976317338ee.bg.png
new file mode 100644
index 00000000..0c52d0e3
Binary files /dev/null and b/translated_images/webdev101-css.3f7af5991bf53a200d79e7257e5e450408d8ea97f5b531d31b2e3976317338ee.bg.png differ
diff --git a/translated_images/webdev101-css.3f7af5991bf53a200d79e7257e5e450408d8ea97f5b531d31b2e3976317338ee.ro.png b/translated_images/webdev101-css.3f7af5991bf53a200d79e7257e5e450408d8ea97f5b531d31b2e3976317338ee.ro.png
new file mode 100644
index 00000000..78297a61
Binary files /dev/null and b/translated_images/webdev101-css.3f7af5991bf53a200d79e7257e5e450408d8ea97f5b531d31b2e3976317338ee.ro.png differ
diff --git a/translated_images/webdev101-css.3f7af5991bf53a200d79e7257e5e450408d8ea97f5b531d31b2e3976317338ee.sr.png b/translated_images/webdev101-css.3f7af5991bf53a200d79e7257e5e450408d8ea97f5b531d31b2e3976317338ee.sr.png
new file mode 100644
index 00000000..2e1ac1fe
Binary files /dev/null and b/translated_images/webdev101-css.3f7af5991bf53a200d79e7257e5e450408d8ea97f5b531d31b2e3976317338ee.sr.png differ
diff --git a/translated_images/webdev101-github.8846d7971abef6f947909b4f9d343e2a23778aa716ca6b9d71df7174ee5009ac.bg.png b/translated_images/webdev101-github.8846d7971abef6f947909b4f9d343e2a23778aa716ca6b9d71df7174ee5009ac.bg.png
new file mode 100644
index 00000000..1c7032ff
Binary files /dev/null and b/translated_images/webdev101-github.8846d7971abef6f947909b4f9d343e2a23778aa716ca6b9d71df7174ee5009ac.bg.png differ
diff --git a/translated_images/webdev101-github.8846d7971abef6f947909b4f9d343e2a23778aa716ca6b9d71df7174ee5009ac.ro.png b/translated_images/webdev101-github.8846d7971abef6f947909b4f9d343e2a23778aa716ca6b9d71df7174ee5009ac.ro.png
new file mode 100644
index 00000000..211807b6
Binary files /dev/null and b/translated_images/webdev101-github.8846d7971abef6f947909b4f9d343e2a23778aa716ca6b9d71df7174ee5009ac.ro.png differ
diff --git a/translated_images/webdev101-github.8846d7971abef6f947909b4f9d343e2a23778aa716ca6b9d71df7174ee5009ac.sr.png b/translated_images/webdev101-github.8846d7971abef6f947909b4f9d343e2a23778aa716ca6b9d71df7174ee5009ac.sr.png
new file mode 100644
index 00000000..1e5bcc5f
Binary files /dev/null and b/translated_images/webdev101-github.8846d7971abef6f947909b4f9d343e2a23778aa716ca6b9d71df7174ee5009ac.sr.png differ
diff --git a/translated_images/webdev101-html.4389c2067af68e98280c1bde52b6c6269f399eaae3659b7c846018d8a7b0bbd9.bg.png b/translated_images/webdev101-html.4389c2067af68e98280c1bde52b6c6269f399eaae3659b7c846018d8a7b0bbd9.bg.png
new file mode 100644
index 00000000..88558cab
Binary files /dev/null and b/translated_images/webdev101-html.4389c2067af68e98280c1bde52b6c6269f399eaae3659b7c846018d8a7b0bbd9.bg.png differ
diff --git a/translated_images/webdev101-html.4389c2067af68e98280c1bde52b6c6269f399eaae3659b7c846018d8a7b0bbd9.ro.png b/translated_images/webdev101-html.4389c2067af68e98280c1bde52b6c6269f399eaae3659b7c846018d8a7b0bbd9.ro.png
new file mode 100644
index 00000000..a9c6dfa6
Binary files /dev/null and b/translated_images/webdev101-html.4389c2067af68e98280c1bde52b6c6269f399eaae3659b7c846018d8a7b0bbd9.ro.png differ
diff --git a/translated_images/webdev101-html.4389c2067af68e98280c1bde52b6c6269f399eaae3659b7c846018d8a7b0bbd9.sr.png b/translated_images/webdev101-html.4389c2067af68e98280c1bde52b6c6269f399eaae3659b7c846018d8a7b0bbd9.sr.png
new file mode 100644
index 00000000..0e552911
Binary files /dev/null and b/translated_images/webdev101-html.4389c2067af68e98280c1bde52b6c6269f399eaae3659b7c846018d8a7b0bbd9.sr.png differ
diff --git a/translated_images/webdev101-js-arrays.439d7528b8a294558d0e4302e448d193f8ad7495cc407539cc81f1afe904b470.bg.png b/translated_images/webdev101-js-arrays.439d7528b8a294558d0e4302e448d193f8ad7495cc407539cc81f1afe904b470.bg.png
new file mode 100644
index 00000000..751460ba
Binary files /dev/null and b/translated_images/webdev101-js-arrays.439d7528b8a294558d0e4302e448d193f8ad7495cc407539cc81f1afe904b470.bg.png differ
diff --git a/translated_images/webdev101-js-arrays.439d7528b8a294558d0e4302e448d193f8ad7495cc407539cc81f1afe904b470.ro.png b/translated_images/webdev101-js-arrays.439d7528b8a294558d0e4302e448d193f8ad7495cc407539cc81f1afe904b470.ro.png
new file mode 100644
index 00000000..738c68d8
Binary files /dev/null and b/translated_images/webdev101-js-arrays.439d7528b8a294558d0e4302e448d193f8ad7495cc407539cc81f1afe904b470.ro.png differ
diff --git a/translated_images/webdev101-js-arrays.439d7528b8a294558d0e4302e448d193f8ad7495cc407539cc81f1afe904b470.sr.png b/translated_images/webdev101-js-arrays.439d7528b8a294558d0e4302e448d193f8ad7495cc407539cc81f1afe904b470.sr.png
new file mode 100644
index 00000000..d32b9fd5
Binary files /dev/null and b/translated_images/webdev101-js-arrays.439d7528b8a294558d0e4302e448d193f8ad7495cc407539cc81f1afe904b470.sr.png differ
diff --git a/translated_images/webdev101-js-datatypes.4cc470179730702c756480d3ffa46507f746e5975ebf80f99fdaaf1cff09a7f4.bg.png b/translated_images/webdev101-js-datatypes.4cc470179730702c756480d3ffa46507f746e5975ebf80f99fdaaf1cff09a7f4.bg.png
new file mode 100644
index 00000000..4109781c
Binary files /dev/null and b/translated_images/webdev101-js-datatypes.4cc470179730702c756480d3ffa46507f746e5975ebf80f99fdaaf1cff09a7f4.bg.png differ
diff --git a/translated_images/webdev101-js-datatypes.4cc470179730702c756480d3ffa46507f746e5975ebf80f99fdaaf1cff09a7f4.ro.png b/translated_images/webdev101-js-datatypes.4cc470179730702c756480d3ffa46507f746e5975ebf80f99fdaaf1cff09a7f4.ro.png
new file mode 100644
index 00000000..3701fac1
Binary files /dev/null and b/translated_images/webdev101-js-datatypes.4cc470179730702c756480d3ffa46507f746e5975ebf80f99fdaaf1cff09a7f4.ro.png differ
diff --git a/translated_images/webdev101-js-datatypes.4cc470179730702c756480d3ffa46507f746e5975ebf80f99fdaaf1cff09a7f4.sr.png b/translated_images/webdev101-js-datatypes.4cc470179730702c756480d3ffa46507f746e5975ebf80f99fdaaf1cff09a7f4.sr.png
new file mode 100644
index 00000000..84c6f13f
Binary files /dev/null and b/translated_images/webdev101-js-datatypes.4cc470179730702c756480d3ffa46507f746e5975ebf80f99fdaaf1cff09a7f4.sr.png differ
diff --git a/translated_images/webdev101-js-decisions.69e1b20f272dd1f0b1cb2f8adaff3ed2a77c4f91db96d8a0594132a353fa189a.bg.png b/translated_images/webdev101-js-decisions.69e1b20f272dd1f0b1cb2f8adaff3ed2a77c4f91db96d8a0594132a353fa189a.bg.png
new file mode 100644
index 00000000..2db953a2
Binary files /dev/null and b/translated_images/webdev101-js-decisions.69e1b20f272dd1f0b1cb2f8adaff3ed2a77c4f91db96d8a0594132a353fa189a.bg.png differ
diff --git a/translated_images/webdev101-js-decisions.69e1b20f272dd1f0b1cb2f8adaff3ed2a77c4f91db96d8a0594132a353fa189a.ro.png b/translated_images/webdev101-js-decisions.69e1b20f272dd1f0b1cb2f8adaff3ed2a77c4f91db96d8a0594132a353fa189a.ro.png
new file mode 100644
index 00000000..a7b9dcad
Binary files /dev/null and b/translated_images/webdev101-js-decisions.69e1b20f272dd1f0b1cb2f8adaff3ed2a77c4f91db96d8a0594132a353fa189a.ro.png differ
diff --git a/translated_images/webdev101-js-decisions.69e1b20f272dd1f0b1cb2f8adaff3ed2a77c4f91db96d8a0594132a353fa189a.sr.png b/translated_images/webdev101-js-decisions.69e1b20f272dd1f0b1cb2f8adaff3ed2a77c4f91db96d8a0594132a353fa189a.sr.png
new file mode 100644
index 00000000..3dd6c78e
Binary files /dev/null and b/translated_images/webdev101-js-decisions.69e1b20f272dd1f0b1cb2f8adaff3ed2a77c4f91db96d8a0594132a353fa189a.sr.png differ
diff --git a/translated_images/webdev101-js-functions.be049c4726e94f8b7605c36330ac42eeb5cd8ed02bcdd60fdac778174d6cb865.bg.png b/translated_images/webdev101-js-functions.be049c4726e94f8b7605c36330ac42eeb5cd8ed02bcdd60fdac778174d6cb865.bg.png
new file mode 100644
index 00000000..bbd73810
Binary files /dev/null and b/translated_images/webdev101-js-functions.be049c4726e94f8b7605c36330ac42eeb5cd8ed02bcdd60fdac778174d6cb865.bg.png differ
diff --git a/translated_images/webdev101-js-functions.be049c4726e94f8b7605c36330ac42eeb5cd8ed02bcdd60fdac778174d6cb865.ro.png b/translated_images/webdev101-js-functions.be049c4726e94f8b7605c36330ac42eeb5cd8ed02bcdd60fdac778174d6cb865.ro.png
new file mode 100644
index 00000000..18714a98
Binary files /dev/null and b/translated_images/webdev101-js-functions.be049c4726e94f8b7605c36330ac42eeb5cd8ed02bcdd60fdac778174d6cb865.ro.png differ
diff --git a/translated_images/webdev101-js-functions.be049c4726e94f8b7605c36330ac42eeb5cd8ed02bcdd60fdac778174d6cb865.sr.png b/translated_images/webdev101-js-functions.be049c4726e94f8b7605c36330ac42eeb5cd8ed02bcdd60fdac778174d6cb865.sr.png
new file mode 100644
index 00000000..ff79d6ea
Binary files /dev/null and b/translated_images/webdev101-js-functions.be049c4726e94f8b7605c36330ac42eeb5cd8ed02bcdd60fdac778174d6cb865.sr.png differ
diff --git a/translated_images/webdev101-js.10280393044d7eaaec7e847574946add7ddae6be2b2194567d848b61d849334a.bg.png b/translated_images/webdev101-js.10280393044d7eaaec7e847574946add7ddae6be2b2194567d848b61d849334a.bg.png
new file mode 100644
index 00000000..b18db832
Binary files /dev/null and b/translated_images/webdev101-js.10280393044d7eaaec7e847574946add7ddae6be2b2194567d848b61d849334a.bg.png differ
diff --git a/translated_images/webdev101-js.10280393044d7eaaec7e847574946add7ddae6be2b2194567d848b61d849334a.ro.png b/translated_images/webdev101-js.10280393044d7eaaec7e847574946add7ddae6be2b2194567d848b61d849334a.ro.png
new file mode 100644
index 00000000..e0610068
Binary files /dev/null and b/translated_images/webdev101-js.10280393044d7eaaec7e847574946add7ddae6be2b2194567d848b61d849334a.ro.png differ
diff --git a/translated_images/webdev101-js.10280393044d7eaaec7e847574946add7ddae6be2b2194567d848b61d849334a.sr.png b/translated_images/webdev101-js.10280393044d7eaaec7e847574946add7ddae6be2b2194567d848b61d849334a.sr.png
new file mode 100644
index 00000000..c0b316ad
Binary files /dev/null and b/translated_images/webdev101-js.10280393044d7eaaec7e847574946add7ddae6be2b2194567d848b61d849334a.sr.png differ
diff --git a/translated_images/webdev101-programming.d6e3f98e61ac4bff0b27dcbf1c3f16c8ed46984866f2d29988929678b0058fde.bg.png b/translated_images/webdev101-programming.d6e3f98e61ac4bff0b27dcbf1c3f16c8ed46984866f2d29988929678b0058fde.bg.png
new file mode 100644
index 00000000..48b6bc70
Binary files /dev/null and b/translated_images/webdev101-programming.d6e3f98e61ac4bff0b27dcbf1c3f16c8ed46984866f2d29988929678b0058fde.bg.png differ
diff --git a/translated_images/webdev101-programming.d6e3f98e61ac4bff0b27dcbf1c3f16c8ed46984866f2d29988929678b0058fde.ro.png b/translated_images/webdev101-programming.d6e3f98e61ac4bff0b27dcbf1c3f16c8ed46984866f2d29988929678b0058fde.ro.png
new file mode 100644
index 00000000..c3bf5ec5
Binary files /dev/null and b/translated_images/webdev101-programming.d6e3f98e61ac4bff0b27dcbf1c3f16c8ed46984866f2d29988929678b0058fde.ro.png differ
diff --git a/translated_images/webdev101-programming.d6e3f98e61ac4bff0b27dcbf1c3f16c8ed46984866f2d29988929678b0058fde.sr.png b/translated_images/webdev101-programming.d6e3f98e61ac4bff0b27dcbf1c3f16c8ed46984866f2d29988929678b0058fde.sr.png
new file mode 100644
index 00000000..94e9b668
Binary files /dev/null and b/translated_images/webdev101-programming.d6e3f98e61ac4bff0b27dcbf1c3f16c8ed46984866f2d29988929678b0058fde.sr.png differ
diff --git a/translated_images/working-tree-pb.6cd43e5076f23ba3d017f7662394bd87f975e194a068556905e4cc99da9cbfdc.bg.png b/translated_images/working-tree-pb.6cd43e5076f23ba3d017f7662394bd87f975e194a068556905e4cc99da9cbfdc.bg.png
new file mode 100644
index 00000000..48aff4cd
Binary files /dev/null and b/translated_images/working-tree-pb.6cd43e5076f23ba3d017f7662394bd87f975e194a068556905e4cc99da9cbfdc.bg.png differ
diff --git a/translated_images/working-tree-pb.6cd43e5076f23ba3d017f7662394bd87f975e194a068556905e4cc99da9cbfdc.ro.png b/translated_images/working-tree-pb.6cd43e5076f23ba3d017f7662394bd87f975e194a068556905e4cc99da9cbfdc.ro.png
new file mode 100644
index 00000000..cfb99f31
Binary files /dev/null and b/translated_images/working-tree-pb.6cd43e5076f23ba3d017f7662394bd87f975e194a068556905e4cc99da9cbfdc.ro.png differ
diff --git a/translated_images/working-tree-pb.6cd43e5076f23ba3d017f7662394bd87f975e194a068556905e4cc99da9cbfdc.sr.png b/translated_images/working-tree-pb.6cd43e5076f23ba3d017f7662394bd87f975e194a068556905e4cc99da9cbfdc.sr.png
new file mode 100644
index 00000000..3e4ee0ca
Binary files /dev/null and b/translated_images/working-tree-pb.6cd43e5076f23ba3d017f7662394bd87f975e194a068556905e4cc99da9cbfdc.sr.png differ
diff --git a/translated_images/working-tree.c58eec08e6335c79cc708c0c220c0b7fea61514bd3c7fb7471905a864aceac7c.bg.png b/translated_images/working-tree.c58eec08e6335c79cc708c0c220c0b7fea61514bd3c7fb7471905a864aceac7c.bg.png
new file mode 100644
index 00000000..0adc5f4e
Binary files /dev/null and b/translated_images/working-tree.c58eec08e6335c79cc708c0c220c0b7fea61514bd3c7fb7471905a864aceac7c.bg.png differ
diff --git a/translated_images/working-tree.c58eec08e6335c79cc708c0c220c0b7fea61514bd3c7fb7471905a864aceac7c.ro.png b/translated_images/working-tree.c58eec08e6335c79cc708c0c220c0b7fea61514bd3c7fb7471905a864aceac7c.ro.png
new file mode 100644
index 00000000..0684fd46
Binary files /dev/null and b/translated_images/working-tree.c58eec08e6335c79cc708c0c220c0b7fea61514bd3c7fb7471905a864aceac7c.ro.png differ
diff --git a/translated_images/working-tree.c58eec08e6335c79cc708c0c220c0b7fea61514bd3c7fb7471905a864aceac7c.sr.png b/translated_images/working-tree.c58eec08e6335c79cc708c0c220c0b7fea61514bd3c7fb7471905a864aceac7c.sr.png
new file mode 100644
index 00000000..3057bb54
Binary files /dev/null and b/translated_images/working-tree.c58eec08e6335c79cc708c0c220c0b7fea61514bd3c7fb7471905a864aceac7c.sr.png differ
diff --git a/translations/bg/1-getting-started-lessons/1-intro-to-programming-languages/README.md b/translations/bg/1-getting-started-lessons/1-intro-to-programming-languages/README.md
new file mode 100644
index 00000000..d98a630e
--- /dev/null
+++ b/translations/bg/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-27T22:36:02+00:00",
+  "source_file": "1-getting-started-lessons/1-intro-to-programming-languages/README.md",
+  "language_code": "bg"
+}
+-->
+# Въведение в програмните езици и инструменти за разработка
+
+Този урок обхваща основите на програмните езици. Темите, разгледани тук, се отнасят за повечето съвременни програмни езици. В секцията „Инструменти за разработка“ ще научите за полезен софтуер, който помага на разработчиците.
+
+![Въведение в програмирането](../../../../translated_images/webdev101-programming.d6e3f98e61ac4bff0b27dcbf1c3f16c8ed46984866f2d29988929678b0058fde.bg.png)
+> Скица от [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Предварителен тест
+[Предварителен тест](https://forms.office.com/r/dru4TE0U9n?origin=lprLink)
+
+## Въведение
+
+В този урок ще разгледаме:
+
+- Какво е програмиране?
+- Видове програмни езици
+- Основни елементи на програмата
+- Полезен софтуер и инструменти за професионалния разработчик
+
+> Можете да преминете този урок на [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon)!
+
+## Какво е програмиране?
+
+Програмирането (известно още като кодиране) е процесът на писане на инструкции за устройство, като компютър или мобилно устройство. Пишем тези инструкции с помощта на програмен език, който след това се интерпретира от устройството. Тези набори от инструкции могат да бъдат наричани с различни имена, но *програма*, *компютърна програма*, *приложение (app)* и *изпълним файл* са някои от популярните термини.
+
+*Програма* може да бъде всичко, което е написано с код: уебсайтове, игри и приложения за телефони са програми. Въпреки че е възможно да се създаде програма без писане на код, основната логика се интерпретира от устройството, а тази логика най-вероятно е написана с код. Програма, която *изпълнява* или *стартира* код, изпълнява инструкции. Устройството, с което четете този урок, изпълнява програма, за да го покаже на екрана ви.
+
+✅ Направете малко проучване: Кой се счита за първия програмист в света?
+
+## Програмни езици
+
+Програмните езици позволяват на разработчиците да пишат инструкции за устройство. Устройствата могат да разбират само двоичен код (1 и 0), а за *повечето* разработчици това не е много ефективен начин за комуникация. Програмните езици са средство за комуникация между хората и компютрите.
+
+Програмните езици се предлагат в различни формати и могат да служат за различни цели. Например, JavaScript се използва основно за уеб приложения, докато Bash се използва предимно за операционни системи.
+
+*Ниските нива на езиците* обикновено изискват по-малко стъпки за интерпретиране на инструкции от устройството в сравнение с *високите нива на езиците*. Въпреки това, високите нива на езиците са популярни заради тяхната четивност и поддръжка. JavaScript се счита за език от високо ниво.
+
+Следният код илюстрира разликата между език от високо ниво (JavaScript) и език от ниско ниво (ARM assembly code).
+
+```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
+```
+
+Повярвайте или не, *и двата правят едно и също*: отпечатват последователност на Фибоначи до 10.
+
+✅ Последователността на Фибоначи е [дефинирана](https://en.wikipedia.org/wiki/Fibonacci_number) като набор от числа, при които всяко число е сумата от двете предходни, започвайки от 0 и 1. Първите 10 числа в последователността на Фибоначи са 0, 1, 1, 2, 3, 5, 8, 13, 21 и 34.
+
+## Елементи на програмата
+
+Една инструкция в програмата се нарича *израз* и обикновено има символ или разстояние, което маркира къде инструкцията завършва или *се прекратява*. Начинът, по който програмата се прекратява, варира за всеки език.
+
+Изразите в програмата могат да разчитат на данни, предоставени от потребител или друг източник, за да изпълнят инструкции. Данните могат да променят поведението на програмата, затова програмните езици предлагат начин за временно съхранение на данни, за да могат да бъдат използвани по-късно. Това се нарича *променливи*. Променливите са изрази, които инструктират устройството да запази данни в паметта си. Променливите в програмите са подобни на променливите в алгебрата, където имат уникално име и стойността им може да се променя с времето.
+
+Има вероятност някои изрази да не бъдат изпълнени от устройството. Това обикновено е по дизайн, когато е написано от разработчика, или случайно, когато възникне неочаквана грешка. Този тип контрол върху приложението го прави по-устойчиво и лесно за поддръжка. Обикновено тези промени в контрола се случват, когато са изпълнени определени условия. Често използван израз в съвременното програмиране за контрол на изпълнението на програмата е `if..else`.
+
+✅ Ще научите повече за този тип изрази в следващите уроци.
+
+## Инструменти за разработка
+
+[![Инструменти за разработка](https://img.youtube.com/vi/69WJeXGBdxg/0.jpg)](https://youtube.com/watch?v=69WJeXGBdxg "Инструменти за разработка")
+
+> 🎥 Кликнете върху изображението по-горе за видео за инструментите
+
+В тази секция ще научите за някои софтуери, които може да ви бъдат много полезни, когато започнете професионалния си път като разработчик.
+
+**Среда за разработка** е уникален набор от инструменти и функции, които разработчикът често използва при писане на софтуер. Някои от тези инструменти са персонализирани според специфичните нужди на разработчика и могат да се променят с времето, ако разработчикът промени приоритетите си в работата, личните проекти или когато използва различен програмен език. Средите за разработка са толкова уникални, колкото и разработчиците, които ги използват.
+
+### Редактори
+
+Един от най-важните инструменти за разработка на софтуер е редакторът. Редакторите са мястото, където пишете кода си и понякога го изпълнявате.
+
+Разработчиците разчитат на редакторите по няколко допълнителни причини:
+
+- *Дебъгинг* помага за откриване на грешки, като преминава през кода, ред по ред. Някои редактори имат възможности за дебъгинг; те могат да бъдат персонализирани и добавени за специфични програмни езици.
+- *Оцветяване на синтаксиса* добавя цветове и форматиране на текста в кода, което го прави по-лесен за четене. Повечето редактори позволяват персонализирано оцветяване на синтаксиса.
+- *Разширения и интеграции* са специализирани инструменти за разработчици, създадени от разработчици. Тези инструменти не са включени в основния редактор. Например, много разработчици документират кода си, за да обяснят как работи. Те могат да инсталират разширение за проверка на правописа, за да откриват грешки в документацията. Повечето разширения са предназначени за използване в конкретен редактор, а повечето редактори имат начин за търсене на налични разширения.
+- *Персонализация* позволява на разработчиците да създадат уникална среда за разработка, която да отговаря на техните нужди. Повечето редактори са изключително персонализируеми и могат също така да позволят на разработчиците да създават собствени разширения.
+
+#### Популярни редактори и разширения за уеб разработка
+
+- [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/)
+
+### Браузъри
+
+Друг важен инструмент е браузърът. Уеб разработчиците разчитат на браузъра, за да видят как техният код работи в уеб пространството. Той също така се използва за показване на визуалните елементи на уеб страница, които са написани в редактора, като HTML.
+
+Много браузъри идват с *инструменти за разработчици* (DevTools), които съдържат набор от полезни функции и информация, за да помогнат на разработчиците да събират и улавят важна информация за своето приложение. Например: Ако уеб страница има грешки, понякога е полезно да се знае кога са възникнали. DevTools в браузъра могат да бъдат конфигурирани да улавят тази информация.
+
+#### Популярни браузъри и 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)
+
+### Инструменти за команден ред
+
+Някои разработчици предпочитат по-малко графичен изглед за ежедневните си задачи и разчитат на командния ред, за да го постигнат. Писането на код изисква значително количество въвеждане, и някои разработчици предпочитат да не прекъсват потока си на клавиатурата. Те използват клавишни комбинации, за да превключват между прозорци на работния плот, работят върху различни файлове и използват инструменти. Повечето задачи могат да бъдат изпълнени с мишка, но едно от предимствата на командния ред е, че много неща могат да бъдат направени с инструменти за команден ред, без да се налага превключване между мишката и клавиатурата. Друго предимство на командния ред е, че той е конфигурируем и можете да запазите персонализирана конфигурация, да я промените по-късно и да я импортирате на други машини за разработка. Тъй като средите за разработка са толкова уникални за всеки разработчик, някои избягват използването на командния ред, други разчитат изцяло на него, а трети предпочитат комбинация от двете.
+
+### Популярни опции за команден ред
+
+Опциите за команден ред се различават в зависимост от операционната система, която използвате.
+
+*💻 = предварително инсталиран на операционната система.*
+
+#### 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) (известен още като 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)
+
+#### Популярни инструменти за команден ред
+
+- [Git](https://git-scm.com/) (💻 на повечето операционни системи)
+- [NPM](https://www.npmjs.com/)
+- [Yarn](https://classic.yarnpkg.com/en/docs/cli/)
+
+### Документация
+
+Когато разработчик иска да научи нещо ново, най-вероятно ще се обърне към документацията, за да научи как да го използва. Разработчиците често разчитат на документацията, за да ги насочи как правилно да използват инструменти и езици, както и за да придобият по-дълбоки знания за това как работят.
+
+#### Популярна документация за уеб разработка
+
+- [Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web), от Mozilla, издателите на браузъра [Firefox](https://www.mozilla.org/firefox/)
+- [Frontend Masters](https://frontendmasters.com/learn/)
+- [Web.dev](https://web.dev), от Google, издателите на [Chrome](https://www.google.com/chrome/)
+- [Документация на Microsoft за разработчици](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers), за [Microsoft Edge](https://www.microsoft.com/edge)
+- [W3 Schools](https://www.w3schools.com/where_to_start.asp)
+
+✅ Направете проучване: Сега, когато знаете основите на средата на уеб разработчика, сравнете и контрастирайте я със средата на уеб дизайнера.
+
+---
+
+## 🚀 Предизвикателство
+
+Сравнете някои програмни езици. Какви са уникалните характеристики на JavaScript спрямо Java? А какво ще кажете за COBOL спрямо Go?
+
+## Тест след урока
+[Тест след урока](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/2)
+
+## Преглед и самостоятелно обучение
+
+Проучете различните езици, достъпни за програмиста. Опитайте да напишете един ред код на един език и след това го пренапишете на два други. Какво научихте?
+
+## Задание
+
+[Четене на документация](assignment.md)
+
+---
+
+**Отказ от отговорност**:  
+Този документ е преведен с помощта на AI услуга за превод [Co-op Translator](https://github.com/Azure/co-op-translator). Въпреки че се стремим към точност, моля, имайте предвид, че автоматизираните преводи може да съдържат грешки или неточности. Оригиналният документ на неговия роден език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален човешки превод. Ние не носим отговорност за недоразумения или погрешни интерпретации, произтичащи от използването на този превод.
\ No newline at end of file
diff --git a/translations/bg/1-getting-started-lessons/1-intro-to-programming-languages/assignment.md b/translations/bg/1-getting-started-lessons/1-intro-to-programming-languages/assignment.md
new file mode 100644
index 00000000..b4872182
--- /dev/null
+++ b/translations/bg/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-27T22:37:36+00:00",
+  "source_file": "1-getting-started-lessons/1-intro-to-programming-languages/assignment.md",
+  "language_code": "bg"
+}
+-->
+# Четене на документация
+
+## Инструкции
+
+Има много инструменти, които един уеб разработчик може да използва, и те са описани в [MDN документацията за инструменти от страна на клиента](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview). Изберете 3 инструмента, които не са разгледани в урока, обяснете защо един уеб разработчик би ги използвал и потърсете инструмент, който попада в тази категория, като споделите неговата документация. Не използвайте същите примери за инструменти от MDN документацията.
+
+## Критерии за оценка
+
+Отлично | Задоволително | Нуждае се от подобрение
+--- | --- | -- |
+|Обяснено защо уеб разработчик би използвал инструмента| Обяснено как, но не защо разработчик би използвал инструмента| Не е споменато как или защо разработчик би използвал инструмента  |
+
+---
+
+**Отказ от отговорност**:  
+Този документ е преведен с помощта на AI услуга за превод [Co-op Translator](https://github.com/Azure/co-op-translator). Въпреки че се стремим към точност, моля, имайте предвид, че автоматизираните преводи може да съдържат грешки или неточности. Оригиналният документ на неговия роден език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален човешки превод. Ние не носим отговорност за недоразумения или погрешни интерпретации, произтичащи от използването на този превод.
\ No newline at end of file
diff --git a/translations/bg/1-getting-started-lessons/2-github-basics/README.md b/translations/bg/1-getting-started-lessons/2-github-basics/README.md
new file mode 100644
index 00000000..c442b2b0
--- /dev/null
+++ b/translations/bg/1-getting-started-lessons/2-github-basics/README.md
@@ -0,0 +1,339 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "05666cecb8983a72cf0ce1d18932b5b7",
+  "translation_date": "2025-08-27T22:28:25+00:00",
+  "source_file": "1-getting-started-lessons/2-github-basics/README.md",
+  "language_code": "bg"
+}
+-->
+# Въведение в GitHub
+
+Този урок обхваща основите на GitHub, платформа за хостване и управление на промените в кода ви.
+
+![Въведение в GitHub](../../../../translated_images/webdev101-github.8846d7971abef6f947909b4f9d343e2a23778aa716ca6b9d71df7174ee5009ac.bg.png)
+> Скетч от [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Предварителен тест
+[Предварителен тест](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/3)
+
+## Въведение
+
+В този урок ще разгледаме:
+
+- проследяване на работата, която вършите на вашата машина
+- работа по проекти с други хора
+- как да допринасяте за софтуер с отворен код
+
+### Предварителни изисквания
+
+Преди да започнете, трябва да проверите дали Git е инсталиран. В терминала напишете: 
+`git --version`
+
+Ако Git не е инсталиран, [изтеглете Git](https://git-scm.com/downloads). След това настройте локалния си Git профил в терминала:
+* `git config --global user.name "вашето-име"`
+* `git config --global user.email "вашият-имейл"`
+
+За да проверите дали Git вече е конфигуриран, можете да напишете:
+`git config --list`
+
+Ще ви е необходим и GitHub акаунт, редактор за код (като Visual Studio Code) и трябва да отворите терминала си (или командния ред).
+
+Отидете на [github.com](https://github.com/) и създайте акаунт, ако все още нямате такъв, или влезте и попълнете профила си. 
+
+✅ GitHub не е единственото хранилище за код в света; има и други, но GitHub е най-известното.
+
+### Подготовка
+
+Ще ви е необходима папка с проект за код на вашата локална машина (лаптоп или компютър) и публично хранилище в GitHub, което ще служи като пример за това как да допринасяте за проектите на други хора.  
+
+---
+
+## Управление на кода
+
+Да кажем, че имате папка локално с някакъв проект за код и искате да започнете да проследявате напредъка си с помощта на git - системата за контрол на версиите. Някои хора сравняват използването на git с писане на любовно писмо до бъдещото си аз. Четейки съобщенията за комит дни, седмици или месеци по-късно, ще можете да си припомните защо сте взели дадено решение или да "върнете" промяна - стига да пишете добри "съобщения за комит".
+
+### Задача: Създайте хранилище и комитнете код  
+
+> Вижте видеото
+> 
+> [![Основи на Git и GitHub](https://img.youtube.com/vi/9R31OUPpxU4/0.jpg)](https://www.youtube.com/watch?v=9R31OUPpxU4)
+
+1. **Създайте хранилище в GitHub**. На GitHub.com, в раздела за хранилища или от навигационната лента горе вдясно, намерете бутона **new repo**.
+
+   1. Дайте име на вашето хранилище (папка).
+   1. Изберете **create repository**.
+
+1. **Навигирайте до работната си папка**. В терминала си преминете към папката (известна още като директория), която искате да започнете да проследявате. Напишете:
+
+   ```bash
+   cd [name of your folder]
+   ```
+
+1. **Инициализирайте git хранилище**. В проекта си напишете:
+
+   ```bash
+   git init
+   ```
+
+1. **Проверете статуса**. За да проверите статуса на вашето хранилище, напишете:
+
+   ```bash
+   git status
+   ```
+
+   Резултатът може да изглежда така:
+
+   ```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
+   ```
+
+   Обикновено командата `git status` ви казва неща като кои файлове са готови за _записване_ в хранилището или имат промени, които може да искате да запазите.
+
+1. **Добавете всички файлове за проследяване**
+   Това се нарича също "стейджинг" на файлове/ добавяне на файлове към зоната за стейджинг.
+
+   ```bash
+   git add .
+   ```
+
+   Аргументът `git add` плюс `.` показва, че всички ваши файлове и промени са готови за проследяване. 
+
+1. **Добавете избрани файлове за проследяване**
+
+   ```bash
+   git add [file or folder name]
+   ```
+
+   Това ни помага да добавим само избрани файлове към зоната за стейджинг, когато не искаме да комитнем всички файлове наведнъж.
+
+1. **Премахнете всички файлове от зоната за стейджинг**
+
+   ```bash
+   git reset
+   ```
+
+   Тази команда ни помага да премахнем всички файлове от зоната за стейджинг наведнъж.
+
+1. **Премахнете конкретен файл от зоната за стейджинг**
+
+   ```bash
+   git reset [file or folder name]
+   ```
+
+   Тази команда ни помага да премахнем само конкретен файл от зоната за стейджинг, който не искаме да включим в следващия комит.
+
+1. **Запазване на работата ви**. На този етап сте добавили файловете към така наречената _зона за стейджинг_. Място, където Git проследява вашите файлове. За да направите промяната постоянна, трябва да _комитнете_ файловете. За да направите това, създайте _комит_ с командата `git commit`. _Комит_ представлява точка за запазване в историята на вашето хранилище. Напишете следното, за да създадете _комит_:
+
+   ```bash
+   git commit -m "first commit"
+   ```
+
+   Това комитва всички ваши файлове, добавяйки съобщението "first commit". За бъдещи съобщения за комит ще искате да бъдете по-описателни, за да предадете какъв тип промяна сте направили.
+
+1. **Свържете локалното си Git хранилище с GitHub**. Git хранилище е полезно на вашата машина, но в даден момент ще искате да имате резервно копие на вашите файлове някъде и също така да поканите други хора да работят с вас върху вашето хранилище. Едно такова чудесно място за това е GitHub. Помнете, че вече създадохме хранилище в GitHub, така че единственото, което трябва да направим, е да свържем локалното Git хранилище с GitHub. Командата `git remote add` ще направи точно това. Напишете следната команда:
+
+   > Забележка: преди да напишете командата, отидете на страницата на вашето GitHub хранилище, за да намерите URL адреса на хранилището. Ще го използвате в командата по-долу. Заменете ```https://github.com/username/repository_name.git``` с вашия GitHub URL.
+
+   ```bash
+   git remote add origin https://github.com/username/repository_name.git
+   ```
+
+   Това създава _remote_, или връзка, наречена "origin", сочеща към GitHub хранилището, което създадохте по-рано.
+
+1. **Изпратете локалните файлове в GitHub**. Досега сте създали _връзка_ между локалното хранилище и GitHub хранилището. Нека изпратим тези файлове в GitHub с командата `git push`, както следва: 
+   
+   > Забележка: името на вашия branch може да е различно по подразбиране от ```main```.
+
+   ```bash
+   git push -u origin main
+   ```
+
+   Това изпраща вашите комити в "main" branch към GitHub.
+
+2. **Добавете още промени**. Ако искате да продължите да правите промени и да ги изпращате в GitHub, просто ще трябва да използвате следните три команди:
+
+   ```bash
+   git add .
+   git commit -m "type your commit message here"
+   git push
+   ```
+
+   > Съвет: Може също да искате да използвате файл `.gitignore`, за да предотвратите появата на файлове, които не искате да проследявате, в GitHub - например файл с бележки, който съхранявате в същата папка, но няма място в публично хранилище. Можете да намерите шаблони за `.gitignore` файлове на [.gitignore templates](https://github.com/github/gitignore).
+
+#### Съобщения за комит
+
+Добро заглавие на съобщение за комит завършва следното изречение:
+Ако бъде приложено, този комит ще <вашето заглавие тук>
+
+За заглавието използвайте императивно, сегашно време: "променя" вместо "променено" или "промени". 
+Както в заглавието, така и в тялото (по избор) използвайте императивно, сегашно време. Тялото трябва да включва мотивацията за промяната и да я сравни с предишното поведение. Обяснявате `защо`, а не `как`.
+
+✅ Отделете няколко минути, за да разгледате GitHub. Можете ли да намерите наистина добро съобщение за комит? Можете ли да намерите наистина минимално? Каква информация според вас е най-важна и полезна за предаване в съобщение за комит?
+
+### Задача: Сътрудничество
+
+Основната причина за качването на неща в GitHub беше да се направи възможно сътрудничеството с други разработчици.
+
+## Работа по проекти с други хора
+
+> Вижте видеото
+>
+> [![Основи на Git и GitHub](https://img.youtube.com/vi/bFCM-PC3cu8/0.jpg)](https://www.youtube.com/watch?v=bFCM-PC3cu8)
+
+Във вашето хранилище, навигирайте до `Insights > Community`, за да видите как вашият проект се сравнява с препоръчаните стандарти за общността.
+
+   Ето някои неща, които могат да подобрят вашето GitHub хранилище:
+   - **Описание**. Добавихте ли описание за вашия проект?
+   - **README**. Добавихте ли README? GitHub предоставя насоки за писане на [README](https://docs.github.com/articles/about-readmes/?WT.mc_id=academic-77807-sagibbon).
+   - **Насоки за допринасяне**. Има ли вашият проект [насоки за допринасяне](https://docs.github.com/articles/setting-guidelines-for-repository-contributors/?WT.mc_id=academic-77807-sagibbon)? 
+   - **Кодекс на поведение**. [Кодекс на поведение](https://docs.github.com/articles/adding-a-code-of-conduct-to-your-project/). 
+   - **Лиценз**. Може би най-важното, [лиценз](https://docs.github.com/articles/adding-a-license-to-a-repository/)?
+
+
+Всички тези ресурси ще бъдат полезни за въвеждане на нови членове на екипа. Това са обикновено нещата, които новите сътрудници разглеждат, преди дори да погледнат вашия код, за да разберат дали вашият проект е подходящото място за тях да прекарват времето си.
+
+✅ README файловете, въпреки че отнемат време за подготовка, често се пренебрегват от заети поддържащи. Можете ли да намерите пример за особено описателен README? Забележка: има някои [инструменти за създаване на добри README файлове](https://www.makeareadme.com/), които може да искате да опитате.
+
+### Задача: Слейте код
+
+Документите за допринасяне помагат на хората да допринасят за проекта. Те обясняват какви видове приноси търсите и как работи процесът. Сътрудниците ще трябва да преминат през серия от стъпки, за да могат да допринасят за вашето хранилище в GitHub:
+
+
+1. **Fork на вашето хранилище**. Вероятно ще искате хората да направят _fork_ на вашия проект. Fork означава създаване на копие на вашето хранилище в техния GitHub профил.
+1. **Клониране**. Оттам те ще клонират проекта на своята локална машина. 
+1. **Създаване на branch**. Ще искате да ги помолите да създадат _branch_ за своята работа. 
+1. **Фокусиране върху една област**. Помолете сътрудниците да концентрират своите приноси върху едно нещо наведнъж - така шансовете да можете да _слеете_ тяхната работа са по-големи. Представете си, че те пишат поправка на бъг, добавят нова функция и актуализират няколко теста - какво ако искате или можете да приложите само 2 от 3, или 1 от 3 промени?
+
+✅ Представете си ситуация, в която branch-овете са особено критични за писането и доставянето на добър код. Какви случаи на употреба можете да си представите?
+
+> Забележка: бъдете промяната, която искате да видите в света, и създавайте branch-ове за вашата собствена работа също. Всички комити, които правите, ще бъдат направени в branch-а, на който сте "чекнати". Използвайте `git status`, за да видите кой branch е това.
+
+Нека преминем през работния процес на сътрудник. Да предположим, че сътрудникът вече е направил _fork_ и _клонирал_ хранилището, така че има готово Git хранилище на своята локална машина:
+
+1. **Създайте branch**. Използвайте командата `git branch`, за да създадете branch, който ще съдържа промените, които възнамеряват да допринесат:
+
+   ```bash
+   git branch [branch-name]
+   ```
+
+1. **Превключете към работния branch**. Превключете към посочения branch и актуализирайте работната директория с `git switch`:
+
+   ```bash
+   git switch [branch-name]
+   ```
+
+1. **Работете**. На този етап искате да добавите вашите промени. Не забравяйте да кажете на Git за тях със следните команди:
+
+   ```bash
+   git add .
+   git commit -m "my changes"
+   ```
+
+   Уверете се, че давате на вашия комит добро име, за ваше удобство, както и за поддържащия хранилището, на което помагате.
+
+1. **Слейте вашата работа с `main` branch**. В даден момент сте готови с работата си и искате да я слеете с тази на `main` branch. Междувременно `main` branch може да се е променил, така че се уверете, че първо го актуализирате до последната версия със следните команди:
+
+   ```bash
+   git switch main
+   git pull
+   ```
+
+   На този етап искате да се уверите, че всички _конфликти_, ситуации, в които Git не може лесно да _комбинира_ промените, се случват във вашия работен branch. Затова изпълнете следните команди:
+
+   ```bash
+   git switch [branch_name]
+   git merge main
+   ```
+
+   Това ще внесе всички промени от `main` във вашия branch и се надяваме, че можете просто да продължите. Ако не, VS Code ще ви покаже къде Git е _объркан_ и просто променяте засегнатите файлове, за да посочите кое съдържание е най-точно.
+
+1. **Изпратете вашата работа в GitHub**. Изпращането на вашата работа в GitHub означава две неща. Пушване на вашия branch към вашето хранилище и след това отваряне на PR (Pull Request).
+
+   ```bash
+   git push --set-upstream origin [branch-name]
+   ```
+
+   Горната команда създава branch във вашето fork-нато хранилище.
+
+1. **Отворете PR**. След това искате да отворите PR. Това става, като навигирате до fork-натото хранилище в GitHub. Ще видите индикация в GitHub, където се пита дали искате да създадете нов PR, кликвате върху това и ще бъдете отведени до интерфейс, където можете да промените заглавието на съобщението за комит, да му дадете по-подходящо описание. Сега поддържащият хранилището, което сте fork-нали, ще види този PR и _да се надяваме_ ще оцени и _слее_ вашия PR. Вече сте сътрудник, ура :)
+
+1. **Почистете**. Счита се за добра практика да _почистите_ след като успешно слеете PR. Искате да почистите както локалния си branch, така и branch-а, който сте пушнали в GitHub. Първо, нека го изтрием локално със следната команда:
+
+   @@CODE
+Уверете се, че отивате на страницата на GitHub за форкнатото хранилище и премахнете отдалечения клон, който току-що сте качили.
+
+`Pull request` изглежда като странен термин, защото всъщност искате да качите вашите промени в проекта. Но поддръжникът (собственикът на проекта) или основният екип трябва да разгледат вашите промени, преди да ги обединят с "главния" клон на проекта, така че всъщност искате решение за промяна от поддръжника.
+
+Pull request е мястото, където се сравняват и обсъждат разликите, въведени в даден клон, с ревюта, коментари, интегрирани тестове и други. Един добър pull request следва приблизително същите правила като съобщение за commit. Можете да добавите препратка към проблем в тракера за проблеми, например когато вашата работа решава даден проблем. Това се прави, като използвате `#`, последвано от номера на проблема. Например `#97`.
+
+🤞Стискаме палци всички проверки да преминат успешно и собствениците на проекта да обединят вашите промени в проекта🤞
+
+Актуализирайте текущия си локален работен клон с всички нови commit-и от съответния отдалечен клон в GitHub:
+
+`git pull`
+
+## Как да допринесете за отворен код
+
+Първо, нека намерим хранилище (или **repo**) в GitHub, което ви интересува и към което искате да допринесете с промяна. Ще искате да копирате съдържанието му на вашата машина.
+
+✅ Добър начин да намерите хранилища, подходящи за начинаещи, е да [търсите по етикета 'good-first-issue'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/).
+
+![Копиране на хранилище локално](../../../../translated_images/clone_repo.5085c48d666ead57664f050d806e325d7f883be6838c821e08bc823ab7c66665.bg.png)
+
+Има няколко начина за копиране на код. Един от тях е да "клонирате" съдържанието на хранилището, използвайки HTTPS, SSH или GitHub CLI (Command Line Interface).
+
+Отворете вашия терминал и клонирайте хранилището по следния начин:
+`git clone https://github.com/ProjectURL`
+
+За да работите по проекта, преминете към правилната папка:
+`cd ProjectURL`
+
+Можете също така да отворите целия проект, използвайки [Codespaces](https://github.com/features/codespaces), вградения редактор на код / облачна среда за разработка на GitHub, или [GitHub Desktop](https://desktop.github.com/).
+
+Накрая, можете да изтеглите кода в компресиран файл.
+
+### Няколко интересни неща за GitHub
+
+Можете да добавите звезда, да наблюдавате и/или да "форкнете" всяко публично хранилище в GitHub. Можете да намерите вашите хранилища със звезда в падащото меню в горния десен ъгъл. Това е като да запазите отметка, но за код.
+
+Проектите имат тракер за проблеми, най-често в раздела "Issues" в GitHub, освен ако не е посочено друго, където хората обсъждат проблеми, свързани с проекта. А разделът Pull Requests е мястото, където хората обсъждат и преглеждат промени, които са в процес на работа.
+
+Проектите може също да имат дискусии във форуми, пощенски списъци или чат канали като Slack, Discord или IRC.
+
+✅ Разгледайте новото си хранилище в GitHub и опитайте няколко неща, като редактиране на настройки, добавяне на информация към вашето хранилище и създаване на проект (като Канбан дъска). Има много неща, които можете да направите!
+
+---
+
+## 🚀 Предизвикателство
+
+Работете в екип с приятел, за да работите върху кода на другия. Създайте проект съвместно, форкнете код, създайте клонове и обединете промените.
+
+## Тест след лекцията
+[Тест след лекцията](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/4)
+
+## Преглед и самостоятелно обучение
+
+Прочетете повече за [допринасянето към софтуер с отворен код](https://opensource.guide/how-to-contribute/#how-to-submit-a-contribution).
+
+[Git cheatsheet](https://training.github.com/downloads/github-git-cheat-sheet/).
+
+Практикувайте, практикувайте, практикувайте. GitHub предлага страхотни учебни пътеки чрез [skills.github.com](https://skills.github.com):
+
+- [Първата седмица в GitHub](https://skills.github.com/#first-week-on-github)
+
+Ще намерите и по-напреднали курсове.
+
+## Задача
+
+Завършете [курса "Първата седмица в GitHub"](https://skills.github.com/#first-week-on-github)
+
+---
+
+**Отказ от отговорност**:  
+Този документ е преведен с помощта на AI услуга за превод [Co-op Translator](https://github.com/Azure/co-op-translator). Въпреки че се стремим към точност, моля, имайте предвид, че автоматизираните преводи може да съдържат грешки или неточности. Оригиналният документ на неговия роден език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален човешки превод. Ние не носим отговорност за недоразумения или погрешни интерпретации, произтичащи от използването на този превод.
\ No newline at end of file
diff --git a/translations/bg/1-getting-started-lessons/3-accessibility/README.md b/translations/bg/1-getting-started-lessons/3-accessibility/README.md
new file mode 100644
index 00000000..9dcfb77e
--- /dev/null
+++ b/translations/bg/1-getting-started-lessons/3-accessibility/README.md
@@ -0,0 +1,177 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "e4cd5b1faed4adab5acf720f82798003",
+  "translation_date": "2025-08-27T22:32:11+00:00",
+  "source_file": "1-getting-started-lessons/3-accessibility/README.md",
+  "language_code": "bg"
+}
+-->
+# Създаване на достъпни уеб страници
+
+![Всичко за достъпността](../../../../translated_images/webdev101-a11y.8ef3025c858d897a403a1a42c0897c76e11b724d9a8a0c0578dd4316f7507622.bg.png)  
+> Скетч от [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Предварителен тест
+[Предварителен тест](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/5)
+
+> Силата на интернет е в неговата универсалност. Достъпът за всички, независимо от уврежданията, е съществен аспект.
+>
+> \- Сър Тимъти Бърнърс-Лий, директор на W3C и изобретател на световната мрежа
+
+Този цитат перфектно подчертава важността на създаването на достъпни уебсайтове. Приложение, което не може да бъде достъпно за всички, по дефиниция е изключващо. Като уеб разработчици, винаги трябва да имаме предвид достъпността. Ако се фокусираме върху това от самото начало, ще сме на прав път да гарантираме, че всички могат да достъпят страниците, които създаваме. В този урок ще научите за инструментите, които могат да ви помогнат да гарантирате, че вашите уеб ресурси са достъпни, и как да изграждате с мисъл за достъпността.
+
+> Можете да преминете този урок на [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/accessibility/?WT.mc_id=academic-77807-sagibbon)!
+
+## Инструменти за използване
+
+### Четеци на екрана
+
+Един от най-известните инструменти за достъпност са четците на екрана.
+
+[Четеците на екрана](https://en.wikipedia.org/wiki/Screen_reader) са често използвани от хора с увредено зрение. Докато отделяме време, за да гарантираме, че браузърът правилно предава информацията, която искаме да споделим, трябва също така да се уверим, че четецът на екрана прави същото.
+
+В най-основната си форма, четецът на екрана ще чете страницата отгоре надолу на глас. Ако страницата ви е изцяло текстова, четецът ще предаде информацията по подобен начин на браузъра. Разбира се, уеб страниците рядко са само текст; те съдържат връзки, графики, цветове и други визуални компоненти. Трябва да се внимава, за да се гарантира, че тази информация се чете правилно от четеца на екрана.
+
+Всеки уеб разработчик трябва да се запознае с четец на екрана. Както беше подчертано по-горе, това е клиентът, който вашите потребители ще използват. По същия начин, по който сте запознати с начина, по който работи браузърът, трябва да научите как работи четецът на екрана. За щастие, четците на екрана са вградени в повечето операционни системи.
+
+Някои браузъри също имат вградени инструменти и разширения, които могат да четат текст на глас или дори да предоставят някои основни навигационни функции, като например [тези инструменти за достъпност в браузъра Edge](https://support.microsoft.com/help/4000734/microsoft-edge-accessibility-features). Те също са важни инструменти за достъпност, но функционират много различно от четците на екрана и не трябва да се бъркат с инструменти за тестване на четци на екрана.
+
+✅ Изпробвайте четец на екрана и четец на текст в браузър. В Windows [Narrator](https://support.microsoft.com/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c172f109bdb1/?WT.mc_id=academic-77807-sagibbon) е включен по подразбиране, а [JAWS](https://webaim.org/articles/jaws/) и [NVDA](https://www.nvaccess.org/about-nvda/) също могат да бъдат инсталирани. В macOS и iOS [VoiceOver](https://support.apple.com/guide/voiceover/welcome/10) е инсталиран по подразбиране.
+
+### Увеличение
+
+Друг инструмент, често използван от хора с увредено зрение, е увеличението. Най-основният тип увеличение е статичното увеличение, контролирано чрез `Control + плюс (+)` или чрез намаляване на резолюцията на екрана. Този тип увеличение кара цялата страница да се преоразмери, така че използването на [отзивчив дизайн](https://developer.mozilla.org/docs/Learn/CSS/CSS_layout/Responsive_Design) е важно за осигуряване на добро потребителско изживяване при увеличени нива на мащабиране.
+
+Друг тип увеличение разчита на специализиран софтуер за увеличаване на една област от екрана и панорамиране, подобно на използването на истинска лупа. В Windows [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/) е софтуер на трета страна за увеличение с повече функции и по-голяма потребителска база. И macOS, и iOS имат вграден софтуер за увеличение, наречен [Zoom](https://www.apple.com/accessibility/mac/vision/).
+
+### Проверка на контраста
+
+Цветовете на уебсайтовете трябва да бъдат внимателно подбрани, за да отговорят на нуждите на потребители с цветна слепота или хора, които имат затруднения с виждането на цветове с нисък контраст.
+
+✅ Тествайте уебсайт, който харесвате, за използване на цветове с разширение за браузър като [проверка на цветовия контраст на WCAG](https://microsoftedge.microsoft.com/addons/detail/wcag-color-contrast-check/idahaggnlnekelhgplklhfpchbfdmkjp?hl=en-US&WT.mc_id=academic-77807-sagibbon). Какво научавате?
+
+### Lighthouse
+
+В областта за инструменти за разработчици на вашия браузър ще намерите инструмента Lighthouse. Този инструмент е важен за получаване на първоначален поглед върху достъпността (както и други анализи) на уебсайт. Въпреки че е важно да не разчитате изключително на Lighthouse, резултат от 100% е много полезен като базова линия.
+
+✅ Намерете Lighthouse в панела с инструменти за разработчици на вашия браузър и направете анализ на произволен сайт. Какво откривате?
+
+## Дизайн с мисъл за достъпността
+
+Достъпността е сравнително голяма тема. За да ви помогнем, има множество налични ресурси.
+
+- [Accessible U - Университет на Минесота](https://accessibility.umn.edu/your-role/web-developers)
+
+Въпреки че няма да можем да обхванем всеки аспект на създаването на достъпни сайтове, по-долу са някои от основните принципи, които ще искате да приложите. Дизайнът на достъпна страница от самото начало е **винаги** по-лесен, отколкото да се върнете към съществуваща страница, за да я направите достъпна.
+
+## Добри принципи за визуализация
+
+### Безопасни цветови палитри
+
+Хората виждат света по различни начини, включително цветовете. Когато избирате цветова схема за вашия сайт, трябва да се уверите, че тя е достъпна за всички. Един чудесен [инструмент за генериране на цветови палитри е Color Safe](http://colorsafe.co/).
+
+✅ Идентифицирайте уебсайт, който е много проблематичен в използването на цветове. Защо?
+
+### Използвайте правилния HTML
+
+С CSS и JavaScript е възможно да направите всеки елемент да изглежда като всякакъв тип контрол. `<span>` може да се използва за създаване на `<button>`, а `<b>` може да стане хипервръзка. Въпреки че това може да се счита за по-лесно за стилизиране, то не предава нищо на четец на екрана. Използвайте подходящия HTML, когато създавате контроли на страница. Ако искате хипервръзка, използвайте `<a>`. Използването на правилния HTML за правилния контрол се нарича използване на семантичен HTML.
+
+✅ Отидете на произволен уебсайт и вижте дали дизайнерите и разработчиците използват HTML правилно. Можете ли да намерите бутон, който трябва да бъде връзка? Подсказка: щракнете с десния бутон и изберете „Преглед на изходния код на страницата“ в браузъра си, за да разгледате основния код.
+
+### Създайте описателна йерархия на заглавията
+
+Потребителите на четци на екрана [разчитат силно на заглавията](https://webaim.org/projects/screenreadersurvey8/#finding), за да намират информация и да навигират през страница. Писането на описателно съдържание на заглавия и използването на семантични тагове за заглавия са важни за създаването на лесно навигируем сайт за потребителите на четци на екрана.
+
+### Използвайте добри визуални подсказки
+
+CSS предлага пълен контрол върху външния вид на всеки елемент на страница. Можете да създадете текстови полета без контур или хипервръзки без подчертаване. За съжаление, премахването на тези подсказки може да затрудни разпознаването на типа контрол за някой, който зависи от тях.
+
+## Значението на текста на връзките
+
+Хипервръзките са основни за навигацията в интернет. Следователно, гарантирането, че четецът на екрана може правилно да чете връзките, позволява на всички потребители да навигират във вашия сайт.
+
+### Четци на екрана и връзки
+
+Както бихте очаквали, четците на екрана четат текста на връзките по същия начин, по който четат всеки друг текст на страницата. С това наум, текстът, демонстриран по-долу, може да изглежда напълно приемлив.
+
+> Малкият пингвин, понякога наричан феен пингвин, е най-малкият пингвин в света. [Кликнете тук](https://en.wikipedia.org/wiki/Little_penguin) за повече информация.
+
+> Малкият пингвин, понякога наричан феен пингвин, е най-малкият пингвин в света. Посетете https://en.wikipedia.org/wiki/Little_penguin за повече информация.
+
+> **ЗАБЕЛЕЖКА** Както ще прочетете по-долу, никога не трябва да създавате връзки, които изглеждат като горните.
+
+Запомнете, четците на екрана са различен интерфейс от браузърите с различен набор от функции.
+
+### Проблемът с използването на URL
+
+Четците на екрана четат текста. Ако URL се появи в текста, четецът на екрана ще прочете URL. Като цяло, URL не предава смислена информация и може да звучи досадно. Може би сте изпитвали това, ако телефонът ви някога е прочел на глас текстово съобщение с URL.
+
+### Проблемът с „кликнете тук“
+
+Четците на екрана също имат способността да четат само хипервръзките на страница, по същия начин, по който зрящ човек би сканирал страница за връзки. Ако текстът на връзката винаги е „кликнете тук“, всичко, което потребителят ще чуе, е „кликнете тук, кликнете тук, кликнете тук, кликнете тук, кликнете тук, ...“. Всички връзки сега са неразличими една от друга.
+
+### Добър текст на връзките
+
+Добрият текст на връзките накратко описва какво има от другата страна на връзката. В горния пример, който говори за малки пингвини, връзката е към страницата в Уикипедия за вида. Фразата *малки пингвини* би била перфектен текст за връзка, тъй като ясно показва какво ще научи някой, ако кликне върху връзката - малки пингвини.
+
+> [Малкият пингвин](https://en.wikipedia.org/wiki/Little_penguin), понякога наричан феен пингвин, е най-малкият пингвин в света.
+
+✅ Сърфирайте в интернет за няколко минути, за да намерите страници, които използват неясни стратегии за връзки. Сравнете ги с други, по-добре свързани сайтове. Какво научавате?
+
+#### Бележки за търсачките
+
+Като допълнителен бонус за гарантиране, че вашият сайт е достъпен за всички, ще помогнете на търсачките да навигират във вашия сайт. Търсачките използват текста на връзките, за да научат темите на страниците. Така че използването на добър текст на връзките помага на всички!
+
+### ARIA
+
+Представете си следната страница:
+
+| Продукт      | Описание           | Поръчка      |
+| ------------ | ------------------ | ------------ |
+| Джаджа       | [Описание](../../../../1-getting-started-lessons/3-accessibility/')    | [Поръчка](../../../../1-getting-started-lessons/3-accessibility/') |
+| Супер джаджа | [Описание](../../../../1-getting-started-lessons/3-accessibility/')    | [Поръчка](../../../../1-getting-started-lessons/3-accessibility/') |
+
+В този пример дублирането на текста на описание и поръчка има смисъл за някой, който използва браузър. Въпреки това, някой, който използва четец на екрана, ще чуе само думите *описание* и *поръчка*, повторени без контекст.
+
+За да поддържате тези типове сценарии, HTML поддържа набор от атрибути, известни като [Достъпни богати интернет приложения (ARIA)](https://developer.mozilla.org/docs/Web/Accessibility/ARIA). Тези атрибути ви позволяват да предоставите допълнителна информация на четците на екрана.
+
+> **ЗАБЕЛЕЖКА**: Както при много аспекти на HTML, поддръжката на браузъри и четци на екрана може да варира. Въпреки това, повечето основни клиенти поддържат ARIA атрибути.
+
+Можете да използвате `aria-label`, за да опишете връзката, когато форматът на страницата не ви позволява. Описанието за джаджа може да бъде зададено като
+
+``` html
+<a href="#" aria-label="Widget description">description</a>
+```
+
+✅ По принцип използването на семантичен HTML, както е описано по-горе, има предимство пред използването на ARIA, но понякога няма семантичен еквивалент за различни HTML елементи. Добър пример е дърво. Няма HTML еквивалент за дърво, така че идентифицирате общия `<div>` за този елемент с подходяща роля и ARIA стойности. [Документацията на MDN за ARIA](https://developer.mozilla.org/docs/Web/Accessibility/ARIA) съдържа повече полезна информация.
+
+```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>
+```
+
+## Изображения
+
+Очевидно е, че четците на екрана не могат автоматично да четат какво има в изображение. Гарантирането, че изображенията са достъпни, не изисква много работа - това е целта на атрибута `alt`. Всички значими изображения трябва да имат `alt`, за да опишат какво представляват.  
+Изображенията, които са чисто декоративни, трябва да имат атрибута `alt`, зададен на празен низ: `alt=""`. Това предотвратява ненужното обявяване на декоративното изображение от четците на екрана.
+
+✅ Както може да се очаква, търсачките също не могат да разберат какво има в изображение. Те също използват alt текста. Така че, отново, гарантирането, че вашата страница е достъпна, предоставя допълнителни бонуси!
+
+## Клавиатурата
+
+Някои потребители не могат да използват мишка или тъчпад, вместо това разчитат на взаимодействия с клавиатурата, за да преминават от един елемент към друг. Важно е вашият уебсайт да представя съдържанието си в логичен ред, така че потребителят на клавиатурата да може да достъпи всеки инт
+Много правителства имат закони относно изискванията за достъпност. Запознайте се със законите за достъпност във вашата страна. Какво е обхванато и какво не е? Пример за това е [този правителствен уебсайт](https://accessibility.blog.gov.uk/).
+
+## Задача
+
+[Анализирайте недостъпен уебсайт](assignment.md)
+
+Кредити: [Turtle Ipsum](https://github.com/Instrument/semantic-html-sample) от Instrument
+
+---
+
+**Отказ от отговорност**:  
+Този документ е преведен с помощта на AI услуга за превод [Co-op Translator](https://github.com/Azure/co-op-translator). Въпреки че се стремим към точност, моля, имайте предвид, че автоматизираните преводи може да съдържат грешки или неточности. Оригиналният документ на неговия роден език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален човешки превод. Ние не носим отговорност за недоразумения или погрешни интерпретации, произтичащи от използването на този превод.
\ No newline at end of file
diff --git a/translations/bg/1-getting-started-lessons/3-accessibility/assignment.md b/translations/bg/1-getting-started-lessons/3-accessibility/assignment.md
new file mode 100644
index 00000000..b91ff2ad
--- /dev/null
+++ b/translations/bg/1-getting-started-lessons/3-accessibility/assignment.md
@@ -0,0 +1,29 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "a258597a194e77d4fd469b3cd976b29e",
+  "translation_date": "2025-08-27T22:34:54+00:00",
+  "source_file": "1-getting-started-lessons/3-accessibility/assignment.md",
+  "language_code": "bg"
+}
+-->
+# Анализ на недостъпен сайт
+
+## Инструкции
+
+Идентифицирайте уебсайт, който смятате, че НЕ е достъпен, и създайте план за действие за подобряване на неговата достъпност. 
+Вашата първа задача е да идентифицирате този сайт, да опишете начините, по които смятате, че е недостъпен, без да използвате аналитични инструменти, и след това да го подложите на анализ с Lighthouse. Заснемете PDF с резултатите от този анализ и съставете подробен план с минимум десет точки, показващи как сайтът може да бъде подобрен.
+
+## Таблица за тестване на достъпността на сайта
+
+| Критерии | Отлично | Задоволително | Нуждае се от подобрение |
+|----------|---------|---------------|-------------------------|
+|          | липсват <10% от необходимото | липсват 20% от необходимото | липсват 50% от необходимото |
+
+----
+Доклад на студента: включва параграфи за това колко недостъпен е сайтът, докладът от Lighthouse, заснет в PDF, списък с десет точки за подобрение, с подробности как да се подобри.
+
+---
+
+**Отказ от отговорност**:  
+Този документ е преведен с помощта на AI услуга за превод [Co-op Translator](https://github.com/Azure/co-op-translator). Въпреки че се стремим към точност, моля, имайте предвид, че автоматизираните преводи може да съдържат грешки или неточности. Оригиналният документ на неговия роден език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален човешки превод. Ние не носим отговорност за недоразумения или погрешни интерпретации, произтичащи от използването на този превод.
\ No newline at end of file
diff --git a/translations/bg/1-getting-started-lessons/README.md b/translations/bg/1-getting-started-lessons/README.md
new file mode 100644
index 00000000..645a2f25
--- /dev/null
+++ b/translations/bg/1-getting-started-lessons/README.md
@@ -0,0 +1,31 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "04683f4cfa46004179b0404b89a3065c",
+  "translation_date": "2025-08-27T22:27:18+00:00",
+  "source_file": "1-getting-started-lessons/README.md",
+  "language_code": "bg"
+}
+-->
+# Започване с уеб разработка
+
+В тази част от учебната програма ще се запознаете с концепции, които не са свързани с конкретни проекти, но са важни за това да станете професионален разработчик.
+
+### Теми
+
+1. [Въведение в програмните езици и инструменти за работа](1-intro-to-programming-languages/README.md)
+2. [Въведение в GitHub](2-github-basics/README.md)
+3. [Основи на достъпността](3-accessibility/README.md)
+
+### Автори
+
+Въведението в програмните езици и инструменти за работа е написано с ♥️ от [Jasmine Greenaway](https://twitter.com/paladique)
+
+Въведението в GitHub е написано с ♥️ от [Floor Drees](https://twitter.com/floordrees)
+
+Основите на достъпността са написани с ♥️ от [Christopher Harrison](https://twitter.com/geektrainer)
+
+---
+
+**Отказ от отговорност**:  
+Този документ е преведен с помощта на AI услуга за превод [Co-op Translator](https://github.com/Azure/co-op-translator). Въпреки че се стремим към точност, моля, имайте предвид, че автоматизираните преводи може да съдържат грешки или неточности. Оригиналният документ на неговия роден език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален човешки превод. Ние не носим отговорност за недоразумения или погрешни интерпретации, произтичащи от използването на този превод.
\ No newline at end of file
diff --git a/translations/bg/2-js-basics/1-data-types/README.md b/translations/bg/2-js-basics/1-data-types/README.md
new file mode 100644
index 00000000..2d781c29
--- /dev/null
+++ b/translations/bg/2-js-basics/1-data-types/README.md
@@ -0,0 +1,214 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "fc6aef8ecfdd5b0ad2afa6e6ba52bfde",
+  "translation_date": "2025-08-27T22:13:18+00:00",
+  "source_file": "2-js-basics/1-data-types/README.md",
+  "language_code": "bg"
+}
+-->
+# Основи на JavaScript: Типове данни
+
+![Основи на JavaScript - Типове данни](../../../../translated_images/webdev101-js-datatypes.4cc470179730702c756480d3ffa46507f746e5975ebf80f99fdaaf1cff09a7f4.bg.png)
+> Скетч от [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Тест преди лекцията
+[Тест преди лекцията](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/7)
+
+Тази лекция обхваща основите на JavaScript, езикът, който осигурява интерактивност в уеб пространството.
+
+> Можете да преминете тази лекция на [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-variables/?WT.mc_id=academic-77807-sagibbon)!
+
+[![Променливи](https://img.youtube.com/vi/JNIXfGiDWM8/0.jpg)](https://youtube.com/watch?v=JNIXfGiDWM8 "Променливи в JavaScript")
+
+[![Типове данни в JavaScript](https://img.youtube.com/vi/AWfA95eLdq8/0.jpg)](https://youtube.com/watch?v=AWfA95eLdq8 "Типове данни в JavaScript")
+
+> 🎥 Кликнете върху изображенията по-горе за видеа относно променливи и типове данни
+
+Нека започнем с променливите и типовете данни, които ги запълват!
+## Променливи
+
+Променливите съхраняват стойности, които могат да се използват и променят в кода ви.
+
+Създаването и **декларирането** на променлива има следния синтаксис **[ключова дума] [име]**. Състои се от две части:
+
+- **Ключова дума**. Ключовите думи могат да бъдат `let` или `var`.  
+
+✅ Ключовата дума `let` беше въведена в ES6 и предоставя на променливата така наречената _блокова област на действие_. Препоръчително е да използвате `let` вместо `var`. Ще разгледаме блоковите области на действие по-подробно в бъдещи части.
+- **Името на променливата**, това е име, което избирате сами.
+
+### Задача - работа с променливи
+
+1. **Декларирайте променлива**. Нека декларираме променлива, използвайки ключовата дума `let`:
+
+    ```javascript
+    let myVariable;
+    ```
+
+   `myVariable` вече е декларирана с ключовата дума `let`. В момента няма стойност.
+
+1. **Присвояване на стойност**. Съхранете стойност в променлива с оператора `=`, последван от очакваната стойност.
+
+    ```javascript
+    myVariable = 123;
+    ```
+
+   > Забележка: използването на `=` в тази лекция означава, че използваме "оператор за присвояване", който се използва за задаване на стойност на променлива. Не означава равенство.
+
+   `myVariable` вече е *инициализирана* със стойност 123.
+
+1. **Рефакториране**. Заменете кода си със следното изявление.
+
+    ```javascript
+    let myVariable = 123;
+    ```
+
+    Горният пример се нарича _явна инициализация_, когато променлива се декларира и й се присвоява стойност едновременно.
+
+1. **Промяна на стойността на променливата**. Променете стойността на променливата по следния начин:
+
+   ```javascript
+   myVariable = 321;
+   ```
+
+   След като променливата е декларирана, можете да промените стойността й по всяко време в кода си с оператора `=` и новата стойност.
+
+   ✅ Опитайте! Можете да пишете JavaScript директно в браузъра си. Отворете прозорец на браузъра и отидете на Developer Tools. В конзолата ще намерите поле за въвеждане; напишете `let myVariable = 123`, натиснете Enter, след това напишете `myVariable`. Какво се случва? Забележете, че ще научите повече за тези концепции в следващите лекции.
+
+## Константи
+
+Декларирането и инициализацията на константа следват същите концепции като променлива, с изключение на ключовата дума `const`. Константите обикновено се декларират с главни букви.
+
+```javascript
+const MY_VARIABLE = 123;
+```
+
+Константите са подобни на променливите, с две изключения:
+
+- **Трябва да имат стойност**. Константите трябва да бъдат инициализирани, иначе ще възникне грешка при изпълнение на кода.
+- **Референцията не може да бъде променена**. Референцията на константа не може да бъде променена след инициализация, иначе ще възникне грешка при изпълнение на кода. Нека разгледаме два примера:
+   - **Проста стойност**. Следното НЕ е позволено:
+   
+      ```javascript
+      const PI = 3;
+      PI = 4; // not allowed
+      ```
+ 
+   - **Референцията на обект е защитена**. Следното НЕ е позволено.
+   
+      ```javascript
+      const obj = { a: 3 };
+      obj = { b: 5 } // not allowed
+      ```
+
+    - **Стойността на обект не е защитена**. Следното Е позволено:
+    
+      ```javascript
+      const obj = { a: 3 };
+      obj.a = 5;  // allowed
+      ```
+
+      Горният пример показва промяна на стойността на обекта, но не и на самата референция, което го прави позволено.
+
+   > Забележка, `const` означава, че референцията е защитена от преназначаване. Стойността обаче не е _неизменна_ и може да се промени, особено ако е сложна структура като обект.
+
+## Типове данни
+
+Променливите могат да съхраняват много различни типове стойности, като числа и текст. Тези различни типове стойности са известни като **типове данни**. Типовете данни са важна част от разработката на софтуер, защото помагат на разработчиците да вземат решения как трябва да бъде написан кодът и как трябва да работи софтуерът. Освен това, някои типове данни имат уникални характеристики, които помагат за трансформиране или извличане на допълнителна информация от стойност.
+
+✅ Типовете данни също се наричат JavaScript примитиви, тъй като са най-ниското ниво на типове данни, предоставени от езика. Има 7 примитивни типа данни: string, number, bigint, boolean, undefined, null и symbol. Отделете минута, за да си представите какво може да представлява всеки от тези примитиви. Какво е `zebra`? А `0`? `true`?
+
+### Числа
+
+В предишния раздел стойността на `myVariable` беше от тип данни число.
+
+`let myVariable = 123;`
+
+Променливите могат да съхраняват всякакви числа, включително десетични или отрицателни числа. Числата също могат да се използват с аритметични оператори, разгледани в [следващия раздел](../../../../2-js-basics/1-data-types).
+
+### Аритметични оператори
+
+Има няколко типа оператори за използване при изпълнение на аритметични функции, като някои от тях са изброени тук:
+
+| Символ | Описание                                                                 | Пример                          |
+| ------ | ------------------------------------------------------------------------ | -------------------------------- |
+| `+`    | **Събиране**: Изчислява сумата на две числа                              | `1 + 2 //очакван отговор е 3`   |
+| `-`    | **Изваждане**: Изчислява разликата между две числа                       | `1 - 2 //очакван отговор е -1`  |
+| `*`    | **Умножение**: Изчислява произведението на две числа                     | `1 * 2 //очакван отговор е 2`   |
+| `/`    | **Деление**: Изчислява частното на две числа                             | `1 / 2 //очакван отговор е 0.5` |
+| `%`    | **Остатък**: Изчислява остатъка от делението на две числа                | `1 % 2 //очакван отговор е 1`   |
+
+✅ Опитайте! Опитайте аритметична операция в конзолата на браузъра си. Изненадват ли ви резултатите?
+
+### Стрингове
+
+Стринговете са набори от символи, които се намират между единични или двойни кавички.
+
+- `'Това е стринг'`
+- `"Това също е стринг"`
+- `let myString = 'Това е стринг стойност, съхранена в променлива';`
+
+Не забравяйте да използвате кавички, когато пишете стринг, иначе JavaScript ще предположи, че това е име на променлива.
+
+### Форматиране на стрингове
+
+Стринговете са текстови и понякога ще изискват форматиране.
+
+За да **конкатенирате** два или повече стринга, или да ги съедините, използвайте оператора `+`.
+
+```javascript
+let myString1 = "Hello";
+let myString2 = "World";
+
+myString1 + myString2 + "!"; //HelloWorld!
+myString1 + " " + myString2 + "!"; //Hello World!
+myString1 + ", " + myString2 + "!"; //Hello, World!
+
+```
+
+✅ Защо `1 + 1 = 2` в JavaScript, но `'1' + '1' = 11?` Помислете. А какво ще кажете за `'1' + 1`?
+
+**Шаблонни литерали** са друг начин за форматиране на стрингове, освен кавичките, като вместо тях се използва обратна кавичка. Всичко, което не е обикновен текст, трябва да бъде поставено в плейсхолдъри `${ }`. Това включва всякакви променливи, които могат да бъдат стрингове.
+
+```javascript
+let myString1 = "Hello";
+let myString2 = "World";
+
+`${myString1} ${myString2}!` //Hello World!
+`${myString1}, ${myString2}!` //Hello, World!
+```
+
+Можете да постигнете целите си за форматиране с който и да е метод, но шаблонните литерали ще уважават всички интервали и нови редове.
+
+✅ Кога бихте използвали шаблонен литерал вместо обикновен стринг?
+
+### Булеви стойности
+
+Булевите стойности могат да бъдат само две: `true` или `false`. Булевите стойности могат да помогнат при вземане на решения кои редове от кода трябва да се изпълнят, когато са изпълнени определени условия. В много случаи [операторите](../../../../2-js-basics/1-data-types) помагат за задаване на стойността на булева стойност и често ще забележите и пишете променливи, които се инициализират или стойностите им се актуализират с оператор.
+
+- `let myTrueBool = true`
+- `let myFalseBool = false`
+
+✅ Променлива може да се счита за 'истинна', ако се оценява като булева стойност `true`. Интересно е, че в JavaScript [всички стойности са истинни, освен ако не са дефинирани като фалшиви](https://developer.mozilla.org/docs/Glossary/Truthy).
+
+---
+
+## 🚀 Предизвикателство
+
+JavaScript е известен със своите изненадващи начини за обработка на типове данни понякога. Направете малко проучване за тези 'изненади'. Например: чувствителността към големи и малки букви може да ви изненада! Опитайте това в конзолата си: `let age = 1; let Age = 2; age == Age` (резултатът е `false` -- защо?). Какви други изненади можете да откриете?
+
+## Тест след лекцията
+[Тест след лекцията](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/8)
+
+## Преглед и самостоятелно обучение
+
+Разгледайте [този списък с упражнения по JavaScript](https://css-tricks.com/snippets/javascript/) и опитайте едно. Какво научихте?
+
+## Задание
+
+[Практика с типове данни](assignment.md)
+
+---
+
+**Отказ от отговорност**:  
+Този документ е преведен с помощта на AI услуга за превод [Co-op Translator](https://github.com/Azure/co-op-translator). Въпреки че се стремим към точност, моля, имайте предвид, че автоматичните преводи може да съдържат грешки или неточности. Оригиналният документ на неговия изходен език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален превод от човек. Ние не носим отговорност за каквито и да е недоразумения или погрешни интерпретации, произтичащи от използването на този превод.
\ No newline at end of file
diff --git a/translations/bg/2-js-basics/1-data-types/assignment.md b/translations/bg/2-js-basics/1-data-types/assignment.md
new file mode 100644
index 00000000..ff9a771b
--- /dev/null
+++ b/translations/bg/2-js-basics/1-data-types/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "3869244ceda606c4969d8cdd82679867",
+  "translation_date": "2025-08-27T22:14:29+00:00",
+  "source_file": "2-js-basics/1-data-types/assignment.md",
+  "language_code": "bg"
+}
+-->
+# Практика с типове данни
+
+## Инструкции
+
+Представете си, че създавате количка за пазаруване. Напишете документация за типовете данни, които ще са ви необходими, за да завършите пазаруването. Как стигнахте до избора си?
+
+## Критерии за оценка
+
+Критерии | Отлично | Задоволително | Нуждае се от подобрение
+--- | --- | --- | --- |
+||Шест типа данни са изброени и подробно разгледани, като е документирано тяхното използване|Четири типа данни са разгледани|Два типа данни са разгледани|
+
+---
+
+**Отказ от отговорност**:  
+Този документ е преведен с помощта на AI услуга за превод [Co-op Translator](https://github.com/Azure/co-op-translator). Въпреки че се стремим към точност, моля, имайте предвид, че автоматизираните преводи може да съдържат грешки или неточности. Оригиналният документ на неговия роден език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален човешки превод. Ние не носим отговорност за недоразумения или погрешни интерпретации, произтичащи от използването на този превод.
\ No newline at end of file
diff --git a/translations/bg/2-js-basics/2-functions-methods/README.md b/translations/bg/2-js-basics/2-functions-methods/README.md
new file mode 100644
index 00000000..7fee41fc
--- /dev/null
+++ b/translations/bg/2-js-basics/2-functions-methods/README.md
@@ -0,0 +1,210 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "b4612bbb9ace984f374fcc80e3e035ad",
+  "translation_date": "2025-08-27T22:09:09+00:00",
+  "source_file": "2-js-basics/2-functions-methods/README.md",
+  "language_code": "bg"
+}
+-->
+# Основи на JavaScript: Методи и функции
+
+![Основи на JavaScript - Функции](../../../../translated_images/webdev101-js-functions.be049c4726e94f8b7605c36330ac42eeb5cd8ed02bcdd60fdac778174d6cb865.bg.png)
+> Скетч от [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Тест преди лекцията
+[Тест преди лекцията](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/9)
+
+Когато мислим за писане на код, винаги искаме да се уверим, че кодът ни е четим. Макар това да звучи противоречиво, кодът се чете много повече пъти, отколкото се пише. Един от основните инструменти в арсенала на разработчика за осигуряване на поддържаем код е **функцията**.
+
+[![Методи и функции](https://img.youtube.com/vi/XgKsD6Zwvlc/0.jpg)](https://youtube.com/watch?v=XgKsD6Zwvlc "Методи и функции")
+
+> 🎥 Кликнете върху изображението по-горе за видео относно методи и функции.
+
+> Можете да преминете този урок на [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-functions/?WT.mc_id=academic-77807-sagibbon)!
+
+## Функции
+
+В основата си функцията е блок от код, който можем да изпълним при поискване. Това е идеално за ситуации, в които трябва да извършим една и съща задача многократно; вместо да дублираме логиката на различни места (което би затруднило актуализациите), можем да я централизиране на едно място и да я извикваме, когато е необходимо - дори можете да извиквате функции от други функции!
+
+Също толкова важно е и възможността да дадем име на функция. Макар това да изглежда тривиално, името предоставя бърз начин за документиране на част от кода. Можете да го сравните с етикет на бутон. Ако кликна върху бутон с надпис "Отмяна на таймера", знам, че той ще спре таймера.
+
+## Създаване и извикване на функция
+
+Синтаксисът за функция изглежда по следния начин:
+
+```javascript
+function nameOfFunction() { // function definition
+ // function definition/body
+}
+```
+
+Ако искам да създам функция за показване на поздрав, тя може да изглежда така:
+
+```javascript
+function displayGreeting() {
+  console.log('Hello, world!');
+}
+```
+
+Когато искаме да извикаме (или изпълним) нашата функция, използваме името на функцията, последвано от `()`. Струва си да се отбележи, че функцията ни може да бъде дефинирана преди или след като решим да я извикаме; JavaScript компилаторът ще я намери вместо вас.
+
+```javascript
+// calling our function
+displayGreeting();
+```
+
+> **NOTE:** Съществува специален тип функция, известен като **метод**, който вече сте използвали! Всъщност го видяхме в нашия пример по-горе, когато използвахме `console.log`. Това, което прави метода различен от функцията, е, че методът е прикрепен към обект (`console` в нашия пример), докато функцията е свободно плаваща. Много разработчици използват тези термини взаимозаменяемо.
+
+### Най-добри практики за функции
+
+Има няколко добри практики, които трябва да имате предвид при създаването на функции:
+
+- Както винаги, използвайте описателни имена, за да знаете какво ще прави функцията.
+- Използвайте **camelCasing**, за да комбинирате думи.
+- Дръжте функциите си фокусирани върху конкретна задача.
+
+## Предаване на информация на функция
+
+За да направите функцията по-гъвкава, често ще искате да ѝ предавате информация. Ако разгледаме примера с `displayGreeting` по-горе, той ще показва само **Hello, world!**. Не е най-полезната функция, която бихме могли да създадем. Ако искаме да я направим малко по-гъвкава, например да позволим на някого да посочи името на човека, когото поздравяваме, можем да добавим **параметър**. Параметърът (понякога наричан и **аргумент**) е допълнителна информация, която се изпраща на функцията.
+
+Параметрите се изброяват в дефиницията в скоби и са разделени със запетаи, както следва:
+
+```javascript
+function name(param, param2, param3) {
+
+}
+```
+
+Можем да актуализираме `displayGreeting`, за да приема име и да го показва.
+
+```javascript
+function displayGreeting(name) {
+  const message = `Hello, ${name}!`;
+  console.log(message);
+}
+```
+
+Когато искаме да извикаме функцията и да предадем параметъра, го посочваме в скобите.
+
+```javascript
+displayGreeting('Christopher');
+// displays "Hello, Christopher!" when run
+```
+
+## Стойности по подразбиране
+
+Можем да направим функцията си още по-гъвкава, като добавим повече параметри. Но какво, ако не искаме да изискваме всяка стойност да бъде зададена? В примера с поздравите можем да оставим името като задължително (трябва да знаем кого поздравяваме), но искаме да позволим поздравът да бъде персонализиран по желание. Ако някой не иска да го персонализира, предоставяме стойност по подразбиране. За да зададем стойност по подразбиране на параметър, го задаваме по същия начин, по който задаваме стойност на променлива - `parameterName = 'defaultValue'`. Ето пълен пример:
+
+```javascript
+function displayGreeting(name, salutation='Hello') {
+  console.log(`${salutation}, ${name}`);
+}
+```
+
+Когато извикваме функцията, можем да решим дали искаме да зададем стойност за `salutation`.
+
+```javascript
+displayGreeting('Christopher');
+// displays "Hello, Christopher"
+
+displayGreeting('Christopher', 'Hi');
+// displays "Hi, Christopher"
+```
+
+## Връщане на стойности
+
+Досега създадените от нас функции винаги извеждаха резултата в [конзолата](https://developer.mozilla.org/docs/Web/API/console). Понякога това може да е точно това, което търсим, особено когато създаваме функции, които ще извикват други услуги. Но какво, ако искам да създам помощна функция за извършване на изчисление и да върна стойността, за да мога да я използвам другаде?
+
+Можем да направим това, като използваме **върната стойност**. Върнатата стойност се връща от функцията и може да бъде съхранена в променлива по същия начин, по който бихме съхранили буквална стойност като низ или число.
+
+Ако функцията връща нещо, тогава се използва ключовата дума `return`. Ключовата дума `return` очаква стойност или референция на това, което се връща, както следва:
+
+```javascript
+return myVariable;
+```  
+
+Можем да създадем функция за създаване на поздравително съобщение и да върнем стойността обратно на извикващия.
+
+```javascript
+function createGreetingMessage(name) {
+  const message = `Hello, ${name}`;
+  return message;
+}
+```
+
+Когато извикваме тази функция, ще съхраним стойността в променлива. Това е същото, както бихме задали променлива на статична стойност (като `const name = 'Christopher'`).
+
+```javascript
+const greetingMessage = createGreetingMessage('Christopher');
+```
+
+## Функции като параметри за функции
+
+С напредването в програмирането ще срещнете функции, които приемат други функции като параметри. Този удобен трик често се използва, когато не знаем кога нещо ще се случи или завърши, но знаем, че трябва да извършим операция в отговор.
+
+Като пример, разгледайте [setTimeout](https://developer.mozilla.org/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout), който стартира таймер и ще изпълни код, когато той завърши. Трябва да му кажем какъв код искаме да изпълни. Звучи като перфектна работа за функция!
+
+Ако изпълните кода по-долу, след 3 секунди ще видите съобщението **3 секунди изтекоха**.
+
+```javascript
+function displayDone() {
+  console.log('3 seconds has elapsed');
+}
+// timer value is in milliseconds
+setTimeout(displayDone, 3000);
+```
+
+### Анонимни функции
+
+Нека разгледаме отново това, което създадохме. Създаваме функция с име, която ще бъде използвана само веднъж. С усложняването на приложението можем да се окажем с много функции, които ще бъдат извикани само веднъж. Това не е идеално. Оказва се, че не винаги е необходимо да предоставяме име!
+
+Когато предаваме функция като параметър, можем да пропуснем създаването ѝ предварително и вместо това да я изградим като част от параметъра. Използваме същата ключова дума `function`, но я изграждаме като параметър.
+
+Нека пренапишем кода по-горе, за да използваме анонимна функция:
+
+```javascript
+setTimeout(function() {
+  console.log('3 seconds has elapsed');
+}, 3000);
+```
+
+Ако изпълните новия ни код, ще забележите, че получаваме същите резултати. Създадохме функция, но не трябваше да ѝ даваме име!
+
+### Функции със стрелки
+
+Един от съкратените начини, често срещани в много програмни езици (включително JavaScript), е възможността да използваме така наречената **стрелкова** или **дебела стрелкова** функция. Тя използва специален индикатор `=>`, който изглежда като стрелка - оттук и името! С използването на `=>` можем да пропуснем ключовата дума `function`.
+
+Нека пренапишем кода още веднъж, за да използваме стрелкова функция:
+
+```javascript
+setTimeout(() => {
+  console.log('3 seconds has elapsed');
+}, 3000);
+```
+
+### Кога да използваме всяка стратегия
+
+Вече видяхте, че имаме три начина да предадем функция като параметър и може би се чудите кога да използвате всеки от тях. Ако знаете, че ще използвате функцията повече от веднъж, създайте я по обичайния начин. Ако ще я използвате само на едно място, обикновено е най-добре да използвате анонимна функция. Дали ще използвате стрелкова функция или по-традиционния синтаксис с `function`, зависи от вас, но ще забележите, че повечето съвременни разработчици предпочитат `=>`.
+
+---
+
+## 🚀 Предизвикателство
+
+Можете ли да обясните с едно изречение разликата между функции и методи? Опитайте!
+
+## Тест след лекцията
+[Тест след лекцията](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/10)
+
+## Преглед и самостоятелно обучение
+
+Струва си да [прочетете още малко за стрелковите функции](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions), тъй като те все повече се използват в кодовите бази. Практикувайте писането на функция, а след това я пренапишете с този синтаксис.
+
+## Задача
+
+[Забавление с функции](assignment.md)
+
+---
+
+**Отказ от отговорност**:  
+Този документ е преведен с помощта на AI услуга за превод [Co-op Translator](https://github.com/Azure/co-op-translator). Въпреки че се стремим към точност, моля, имайте предвид, че автоматизираните преводи може да съдържат грешки или неточности. Оригиналният документ на неговия роден език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален човешки превод. Ние не носим отговорност за недоразумения или погрешни интерпретации, произтичащи от използването на този превод.
\ No newline at end of file
diff --git a/translations/bg/2-js-basics/2-functions-methods/assignment.md b/translations/bg/2-js-basics/2-functions-methods/assignment.md
new file mode 100644
index 00000000..cd21c0a3
--- /dev/null
+++ b/translations/bg/2-js-basics/2-functions-methods/assignment.md
@@ -0,0 +1,27 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "8973f96157680a13e9446e4bb540ee57",
+  "translation_date": "2025-08-27T22:10:27+00:00",
+  "source_file": "2-js-basics/2-functions-methods/assignment.md",
+  "language_code": "bg"
+}
+-->
+# Забавление с функции
+
+## Инструкции
+
+Създайте различни функции, както такива, които връщат стойност, така и такива, които не връщат нищо.
+
+Опитайте се да създадете функция, която комбинира параметри и параметри с подразбиращи се стойности.
+
+## Критерии за оценка
+
+| Критерии | Примерно изпълнение                                                                     | Задоволително изпълнение                                         | Нуждае се от подобрение |
+| -------- | --------------------------------------------------------------------------------------- | ---------------------------------------------------------------- | ----------------------- |
+|          | Решението включва две или повече добре работещи функции с разнообразни параметри        | Решението включва една работеща функция с няколко параметъра     | Решението съдържа грешки |
+
+---
+
+**Отказ от отговорност**:  
+Този документ е преведен с помощта на AI услуга за превод [Co-op Translator](https://github.com/Azure/co-op-translator). Въпреки че се стремим към точност, моля, имайте предвид, че автоматизираните преводи може да съдържат грешки или неточности. Оригиналният документ на неговия роден език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален човешки превод. Не носим отговорност за недоразумения или погрешни интерпретации, произтичащи от използването на този превод.
\ No newline at end of file
diff --git a/translations/bg/2-js-basics/3-making-decisions/README.md b/translations/bg/2-js-basics/3-making-decisions/README.md
new file mode 100644
index 00000000..efac94b3
--- /dev/null
+++ b/translations/bg/2-js-basics/3-making-decisions/README.md
@@ -0,0 +1,232 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "888609c48329c280ca2477d2df40f2e5",
+  "translation_date": "2025-08-27T22:07:23+00:00",
+  "source_file": "2-js-basics/3-making-decisions/README.md",
+  "language_code": "bg"
+}
+-->
+# Основи на JavaScript: Вземане на решения
+
+![Основи на JavaScript - Вземане на решения](../../../../translated_images/webdev101-js-decisions.69e1b20f272dd1f0b1cb2f8adaff3ed2a77c4f91db96d8a0594132a353fa189a.bg.png)
+
+> Скетч от [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Предварителен тест
+
+[Предварителен тест](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/11)
+
+Вземането на решения и контролирането на реда, в който се изпълнява вашият код, прави кода ви повторяем и устойчив. Тази секция обхваща синтаксиса за контролиране на потока от данни в JavaScript и неговото значение, когато се използва с булеви типове данни.
+
+[![Вземане на решения](https://img.youtube.com/vi/SxTp8j-fMMY/0.jpg)](https://youtube.com/watch?v=SxTp8j-fMMY "Вземане на решения")
+
+> 🎥 Кликнете върху изображението по-горе за видео относно вземането на решения.
+
+> Можете да преминете този урок на [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-if-else/?WT.mc_id=academic-77807-sagibbon)!
+
+## Кратко припомняне за булевите стойности
+
+Булевите стойности могат да имат само две стойности: `true` или `false`. Булевите стойности помагат да се вземат решения кои редове от кода да се изпълнят, когато са изпълнени определени условия.
+
+Задайте булевата стойност като true или false по следния начин:
+
+`let myTrueBool = true`  
+`let myFalseBool = false`
+
+✅ Булевите стойности са кръстени на английския математик, философ и логик Джордж Бул (1815–1864).
+
+## Оператори за сравнение и булеви стойности
+
+Операторите се използват за оценка на условия чрез сравнения, които създават булева стойност. Ето списък с често използвани оператори.
+
+| Символ | Описание                                                                                                                                                   | Пример             |
+| ------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ |
+| `<`    | **По-малко от**: Сравнява две стойности и връща булевата стойност `true`, ако стойността отляво е по-малка от тази отдясно                                  | `5 < 6 // true`    |
+| `<=`   | **По-малко или равно на**: Сравнява две стойности и връща булевата стойност `true`, ако стойността отляво е по-малка или равна на тази отдясно              | `5 <= 6 // true`   |
+| `>`    | **По-голямо от**: Сравнява две стойности и връща булевата стойност `true`, ако стойността отляво е по-голяма от тази отдясно                                | `5 > 6 // false`   |
+| `>=`   | **По-голямо или равно на**: Сравнява две стойности и връща булевата стойност `true`, ако стойността отляво е по-голяма или равна на тази отдясно            | `5 >= 6 // false`  |
+| `===`  | **Строго равенство**: Сравнява две стойности и връща булевата стойност `true`, ако стойностите отдясно и отляво са равни И са от един и същ тип данни       | `5 === 6 // false` |
+| `!==`  | **Неравенство**: Сравнява две стойности и връща обратната булева стойност на това, което би върнал операторът за строго равенство                          | `5 !== 6 // true`  |
+
+✅ Проверете знанията си, като напишете няколко сравнения в конзолата на браузъра си. Изненадва ли ви някоя от върнатите стойности?
+
+## If израз
+
+If изразът ще изпълни кода между своите блокове, ако условието е вярно.
+
+```javascript
+if (condition) {
+  //Condition is true. Code in this block will run.
+}
+```
+
+Логическите оператори често се използват за създаване на условието.
+
+```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 израз
+
+`else` изразът ще изпълни кода между своите блокове, когато условието е невярно. Той е опционален с `if` израз.
+
+```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!");
+}
+```
+
+✅ Тествайте разбирането си за този код и следващия код, като го изпълните в конзолата на браузъра. Променете стойностите на променливите currentMoney и laptopPrice, за да промените върнатия `console.log()`.
+
+## Switch израз
+
+`switch` изразът се използва за изпълнение на различни действия въз основа на различни условия. Използвайте `switch` израза, за да изберете един от многото блокове код за изпълнение.
+
+```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}`);
+```
+
+✅ Тествайте разбирането си за този код и следващия код, като го изпълните в конзолата на браузъра. Променете стойностите на променливата a, за да промените върнатия `console.log()`.
+
+## Логически оператори и булеви стойности
+
+Решенията може да изискват повече от едно сравнение и могат да бъдат свързани с логически оператори, за да се получи булева стойност.
+
+| Символ | Описание                                                                                     | Пример                                                                 |
+| ------ | -------------------------------------------------------------------------------------------- | --------------------------------------------------------------------- |
+| `&&`   | **Логическо И**: Сравнява две булеви изрази. Връща true **само** ако и двете страни са true  | `(5 > 6) && (5 < 6 ) //Едната страна е false, другата е true. Връща false` |
+| `\|\|` | **Логическо ИЛИ**: Сравнява две булеви изрази. Връща true, ако поне едната страна е true     | `(5 > 6) \|\| (5 < 6) //Едната страна е false, другата е true. Връща true` |
+| `!`    | **Логическо НЕ**: Връща обратната стойност на булев израз                                    | `!(5 > 6) // 5 не е по-голямо от 6, но "!" ще върне true`             |
+
+## Условия и решения с логически оператори
+
+Логическите оператори могат да се използват за създаване на условия в if..else изрази.
+
+```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!");
+}
+```
+
+### Оператор за отрицание
+
+Досега видяхте как можете да използвате `if...else` израз, за да създадете условна логика. Всичко, което влиза в `if`, трябва да се оценява като true/false. С помощта на оператора `!` можете да _отрицаете_ израза. Това би изглеждало така:
+
+```javascript
+if (!condition) {
+  // runs if condition is false
+} else {
+  // runs if condition is true
+}
+```
+
+### Тернарни изрази
+
+`if...else` не е единственият начин за изразяване на логика за вземане на решения. Можете също да използвате нещо, наречено тернарен оператор. Синтаксисът му изглежда така:
+
+```javascript
+let variable = condition ? <return this if true> : <return this if false>
+```
+
+По-долу е даден по-осезаем пример:
+
+```javascript
+let firstNumber = 20;
+let secondNumber = 10;
+let biggestNumber = firstNumber > secondNumber ? firstNumber : secondNumber;
+```
+
+✅ Отделете минута, за да прочетете този код няколко пъти. Разбирате ли как работят тези оператори?
+
+Горният код гласи:
+
+- ако `firstNumber` е по-голямо от `secondNumber`
+- тогава присвойте `firstNumber` на `biggestNumber`
+- иначе присвойте `secondNumber`.
+
+Тернарният израз е просто компактен начин за написване на следния код:
+
+```javascript
+let biggestNumber;
+if (firstNumber > secondNumber) {
+  biggestNumber = firstNumber;
+} else {
+  biggestNumber = secondNumber;
+}
+```
+
+---
+
+## 🚀 Предизвикателство
+
+Създайте програма, която първо е написана с логически оператори, а след това я пренапишете с тернарен израз. Кой синтаксис предпочитате?
+
+---
+
+## Тест след лекцията
+
+[Тест след лекцията](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/12)
+
+## Преглед и самостоятелно обучение
+
+Прочетете повече за многото налични оператори [в MDN](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators).
+
+Разгледайте чудесния [справочник за оператори](https://joshwcomeau.com/operator-lookup/) на Josh Comeau!
+
+## Задание
+
+[Оператори](assignment.md)
+
+---
+
+**Отказ от отговорност**:  
+Този документ е преведен с помощта на AI услуга за превод [Co-op Translator](https://github.com/Azure/co-op-translator). Въпреки че се стремим към точност, моля, имайте предвид, че автоматизираните преводи може да съдържат грешки или неточности. Оригиналният документ на неговия роден език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален човешки превод. Ние не носим отговорност за недоразумения или погрешни интерпретации, произтичащи от използването на този превод.
\ No newline at end of file
diff --git a/translations/bg/2-js-basics/3-making-decisions/assignment.md b/translations/bg/2-js-basics/3-making-decisions/assignment.md
new file mode 100644
index 00000000..52ec022e
--- /dev/null
+++ b/translations/bg/2-js-basics/3-making-decisions/assignment.md
@@ -0,0 +1,54 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "bf62b82567e6f9bdf4abda9ae0ccb64a",
+  "translation_date": "2025-08-27T22:08:20+00:00",
+  "source_file": "2-js-basics/3-making-decisions/assignment.md",
+  "language_code": "bg"
+}
+-->
+# Оператори
+
+## Инструкции
+
+Експериментирайте с оператори. Ето предложение за програма, която можете да реализирате:
+
+Имате набор от студенти от две различни системи за оценяване.
+
+### Първа система за оценяване
+
+Едната система за оценяване е дефинирана с оценки от 1 до 5, като 3 и нагоре означава, че сте издържали курса.
+
+### Втора система за оценяване
+
+Другата система за оценяване включва следните оценки: `A, A-, B, B-, C, C-`, където `A` е най-високата оценка, а `C` е най-ниската оценка за успешно преминаване.
+
+### Задачата
+
+Като се използва следният масив `allStudents`, който представлява всички студенти и техните оценки, създайте нов масив `studentsWhoPass`, съдържащ всички студенти, които са издържали.
+
+> TIP, използвайте for-цикъл, if...else и оператори за сравнение:
+
+```javascript
+let allStudents = [
+  'A',
+  'B-',
+  1,
+  4,
+  5,
+  2
+]
+
+let studentsWhoPass = [];
+```
+
+## Критерии за оценка
+
+| Критерии | Отлично                        | Задоволително                 | Нуждае се от подобрение         |
+| -------- | ------------------------------ | ----------------------------- | ------------------------------- |
+|          | Представено е пълно решение    | Представено е частично решение| Представено е решение с грешки |
+
+---
+
+**Отказ от отговорност**:  
+Този документ е преведен с помощта на AI услуга за превод [Co-op Translator](https://github.com/Azure/co-op-translator). Въпреки че се стремим към точност, моля, имайте предвид, че автоматизираните преводи може да съдържат грешки или неточности. Оригиналният документ на неговия роден език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален човешки превод. Ние не носим отговорност за недоразумения или погрешни интерпретации, произтичащи от използването на този превод.
\ No newline at end of file
diff --git a/translations/bg/2-js-basics/4-arrays-loops/README.md b/translations/bg/2-js-basics/4-arrays-loops/README.md
new file mode 100644
index 00000000..51ac5c01
--- /dev/null
+++ b/translations/bg/2-js-basics/4-arrays-loops/README.md
@@ -0,0 +1,147 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "3f7f87871312cf6cc12662da7d973182",
+  "translation_date": "2025-08-27T22:11:03+00:00",
+  "source_file": "2-js-basics/4-arrays-loops/README.md",
+  "language_code": "bg"
+}
+-->
+# Основи на JavaScript: Масиви и Цикли
+
+![Основи на JavaScript - Масиви](../../../../translated_images/webdev101-js-arrays.439d7528b8a294558d0e4302e448d193f8ad7495cc407539cc81f1afe904b470.bg.png)
+> Скетч от [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Предварителен тест
+[Предварителен тест](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/13)
+
+Този урок обхваща основите на JavaScript, езикът, който осигурява интерактивност в уеб. В този урок ще научите за масиви и цикли, които се използват за манипулиране на данни.
+
+[![Масиви](https://img.youtube.com/vi/1U4qTyq02Xw/0.jpg)](https://youtube.com/watch?v=1U4qTyq02Xw "Масиви")
+
+[![Цикли](https://img.youtube.com/vi/Eeh7pxtTZ3k/0.jpg)](https://www.youtube.com/watch?v=Eeh7pxtTZ3k "Цикли")
+
+> 🎥 Кликнете върху изображенията по-горе за видеа относно масиви и цикли.
+
+> Можете да преминете този урок на [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-arrays/?WT.mc_id=academic-77807-sagibbon)!
+
+## Масиви
+
+Работата с данни е често срещана задача за всеки език, и тя става много по-лесна, когато данните са организирани в структурен формат, като масиви. С масивите данните се съхраняват в структура, подобна на списък. Едно от основните предимства на масивите е, че можете да съхранявате различни типове данни в един масив.
+
+✅ Масивите са навсякъде около нас! Можете ли да се сетите за пример от реалния живот за масив, като например масив от слънчеви панели?
+
+Синтаксисът за масив е чифт квадратни скоби.
+
+```javascript
+let myArray = [];
+```
+
+Това е празен масив, но масивите могат да бъдат декларирани вече попълнени с данни. Множеството стойности в масив се разделят със запетая.
+
+```javascript
+let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
+```
+
+Стойностите в масива получават уникална стойност, наречена **индекс**, цяло число, което се определя въз основа на разстоянието му от началото на масива. В горния пример стринговата стойност "Chocolate" има индекс 0, а индексът на "Rocky Road" е 4. Използвайте индекса с квадратни скоби, за да извлечете, промените или добавите стойности в масива.
+
+✅ Изненадва ли ви, че масивите започват от индекс нула? В някои програмни езици индексите започват от 1. Има интересна история за това, която можете да [прочетете в Wikipedia](https://en.wikipedia.org/wiki/Zero-based_numbering).
+
+```javascript
+let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
+iceCreamFlavors[2]; //"Vanilla"
+```
+
+Можете да използвате индекса, за да промените стойност, като това:
+
+```javascript
+iceCreamFlavors[4] = "Butter Pecan"; //Changed "Rocky Road" to "Butter Pecan"
+```
+
+И можете да добавите нова стойност на даден индекс, като това:
+
+```javascript
+iceCreamFlavors[5] = "Cookie Dough"; //Added "Cookie Dough"
+```
+
+✅ По-често срещан начин за добавяне на стойности към масив е чрез оператори като array.push().
+
+За да разберете колко елемента има в масива, използвайте свойството `length`.
+
+```javascript
+let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
+iceCreamFlavors.length; //5
+```
+
+✅ Опитайте сами! Използвайте конзолата на браузъра си, за да създадете и манипулирате масив по ваш избор.
+
+## Цикли
+
+Циклите ни позволяват да изпълняваме повтарящи се или **итеративни** задачи и могат да спестят много време и код. Всяка итерация може да се различава по своите променливи, стойности и условия. В JavaScript има различни видове цикли, които имат малки разлики, но по същество правят едно и също: обхождат данни.
+
+### For цикъл
+
+Цикълът `for` изисква 3 части, за да се изпълни:
+- `counter` Променлива, която обикновено се инициализира с число, което брои итерациите
+- `condition` Израз, който използва оператори за сравнение, за да спре цикъла, когато стане `false`
+- `iteration-expression` Изпълнява се в края на всяка итерация, обикновено се използва за промяна на стойността на брояча
+  
+```javascript
+// Counting up to 10
+for (let i = 0; i < 10; i++) {
+  console.log(i);
+}
+```
+
+✅ Стартирайте този код в конзолата на браузъра. Какво се случва, когато направите малки промени в брояча, условието или израза за итерация? Можете ли да го накарате да работи назад, създавайки обратно броене?
+
+### While цикъл
+
+За разлика от синтаксиса на цикъла `for`, цикълът `while` изисква само условие, което ще спре цикъла, когато условието стане `false`. Условията в циклите обикновено зависят от други стойности като броячи и трябва да се управляват по време на цикъла. Началните стойности за броячите трябва да бъдат създадени извън цикъла, а всички изрази за изпълнение на условието, включително промяната на брояча, трябва да се поддържат вътре в цикъла.
+
+```javascript
+//Counting up to 10
+let i = 0;
+while (i < 10) {
+ console.log(i);
+ i++;
+}
+```
+
+✅ Защо бихте избрали for цикъл вместо while цикъл? 17 хиляди потребители имаха същия въпрос в StackOverflow, а някои от мненията [може да ви бъдат интересни](https://stackoverflow.com/questions/39969145/while-loops-vs-for-loops-in-javascript).
+
+## Цикли и масиви
+
+Масивите често се използват с цикли, защото повечето условия изискват дължината на масива, за да спрат цикъла, а индексът може също да бъде стойността на брояча.
+
+```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
+```
+
+✅ Експериментирайте с обхождане на масив по ваш избор в конзолата на браузъра. 
+
+---
+
+## 🚀 Предизвикателство
+
+Има и други начини за обхождане на масиви освен for и while цикли. Съществуват [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) и [map](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/map). Пренапишете цикъла си за масив, използвайки една от тези техники.
+
+## Финален тест
+[Финален тест](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/14)
+
+## Преглед и самостоятелно обучение
+
+Масивите в JavaScript имат много методи, които са изключително полезни за манипулиране на данни. [Прочетете за тези методи](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array) и изпробвайте някои от тях (като push, pop, slice и splice) върху масив, който сте създали.
+
+## Задача
+
+[Обход на масив](assignment.md)
+
+---
+
+**Отказ от отговорност**:  
+Този документ е преведен с помощта на AI услуга за превод [Co-op Translator](https://github.com/Azure/co-op-translator). Въпреки че се стремим към точност, моля, имайте предвид, че автоматизираните преводи може да съдържат грешки или неточности. Оригиналният документ на неговия роден език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален човешки превод. Ние не носим отговорност за каквито и да е недоразумения или погрешни интерпретации, произтичащи от използването на този превод.
\ No newline at end of file
diff --git a/translations/bg/2-js-basics/4-arrays-loops/assignment.md b/translations/bg/2-js-basics/4-arrays-loops/assignment.md
new file mode 100644
index 00000000..c71f54b1
--- /dev/null
+++ b/translations/bg/2-js-basics/4-arrays-loops/assignment.md
@@ -0,0 +1,27 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "8b2381170bd0fd2870f5889bb8620f02",
+  "translation_date": "2025-08-27T22:11:58+00:00",
+  "source_file": "2-js-basics/4-arrays-loops/assignment.md",
+  "language_code": "bg"
+}
+-->
+# Обхождане на масив
+
+## Инструкции
+
+Създайте програма, която изброява всяко трето число между 1-20 и го отпечатва в конзолата.
+
+> TIP: използвайте for-цикъл и модифицирайте израза за итерация
+
+## Критерии за оценка
+
+| Критерии | Отлично                                | Задоволително           | Нуждае се от подобрение        |
+| -------- | -------------------------------------- | ----------------------- | ------------------------------ |
+|          | Програмата работи правилно и е коментирана | Програмата не е коментирана | Програмата е непълна или има грешки |
+
+---
+
+**Отказ от отговорност**:  
+Този документ е преведен с помощта на AI услуга за превод [Co-op Translator](https://github.com/Azure/co-op-translator). Въпреки че се стремим към точност, моля, имайте предвид, че автоматизираните преводи може да съдържат грешки или неточности. Оригиналният документ на неговия роден език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален човешки превод. Ние не носим отговорност за недоразумения или погрешни интерпретации, произтичащи от използването на този превод.
\ No newline at end of file
diff --git a/translations/bg/2-js-basics/README.md b/translations/bg/2-js-basics/README.md
new file mode 100644
index 00000000..11d34ff9
--- /dev/null
+++ b/translations/bg/2-js-basics/README.md
@@ -0,0 +1,28 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "cc9e70a2f096c67389c8acff1521fc27",
+  "translation_date": "2025-08-27T22:06:48+00:00",
+  "source_file": "2-js-basics/README.md",
+  "language_code": "bg"
+}
+-->
+# Въведение в JavaScript
+
+JavaScript е езикът на уеб. В тези четири урока ще научите основите му.
+
+### Теми
+
+1. [Променливи и типове данни](1-data-types/README.md)
+2. [Функции и методи](2-functions-methods/README.md)
+3. [Вземане на решения с JavaScript](3-making-decisions/README.md)
+4. [Масиви и цикли](4-arrays-loops/README.md)
+
+### Автори
+
+Тези уроци са написани с ♥️ от [Jasmine Greenaway](https://twitter.com/paladique), [Christopher Harrison](https://twitter.com/geektrainer) и [Chris Noring](https://twitter.com/chris_noring)
+
+---
+
+**Отказ от отговорност**:  
+Този документ е преведен с помощта на AI услуга за превод [Co-op Translator](https://github.com/Azure/co-op-translator). Въпреки че се стремим към точност, моля, имайте предвид, че автоматизираните преводи може да съдържат грешки или неточности. Оригиналният документ на неговия роден език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален човешки превод. Ние не носим отговорност за недоразумения или погрешни интерпретации, произтичащи от използването на този превод.
\ No newline at end of file
diff --git a/translations/bg/3-terrarium/1-intro-to-html/README.md b/translations/bg/3-terrarium/1-intro-to-html/README.md
new file mode 100644
index 00000000..87de6745
--- /dev/null
+++ b/translations/bg/3-terrarium/1-intro-to-html/README.md
@@ -0,0 +1,249 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "46a0639e719b9cf1dfd062aa24cad639",
+  "translation_date": "2025-08-27T22:00:12+00:00",
+  "source_file": "3-terrarium/1-intro-to-html/README.md",
+  "language_code": "bg"
+}
+-->
+# Проект Терариум Част 1: Въведение в HTML
+
+![Въведение в HTML](../../../../translated_images/webdev101-html.4389c2067af68e98280c1bde52b6c6269f399eaae3659b7c846018d8a7b0bbd9.bg.png)
+> Скица от [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Тест преди лекцията
+
+[Тест преди лекцията](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/15)
+
+> Вижте видеото
+
+> 
+> [![Видео за основите на Git и GitHub](https://img.youtube.com/vi/1TvxJKBzhyQ/0.jpg)](https://www.youtube.com/watch?v=1TvxJKBzhyQ)
+
+### Въведение
+
+HTML, или HyperText Markup Language, е "скелетът" на уеба. Ако CSS "облича" вашия HTML, а JavaScript го "оживява", то HTML е тялото на вашето уеб приложение. Синтаксисът на HTML дори отразява тази идея, като включва тагове като "head", "body" и "footer".
+
+В този урок ще използваме HTML, за да създадем "скелета" на интерфейса на нашия виртуален терариум. Той ще има заглавие и три колони: дясна и лява колона, където ще се намират плъзгащите се растения, и централна зона, която ще представлява самия стъклен терариум. До края на този урок ще можете да видите растенията в колоните, но интерфейсът ще изглежда малко странно; не се притеснявайте, в следващата секция ще добавим CSS стилове, за да направим интерфейса по-привлекателен.
+
+### Задача
+
+На вашия компютър създайте папка с име 'terrarium' и вътре в нея файл с име 'index.html'. Можете да направите това във Visual Studio Code, като отворите нов прозорец на VS Code, кликнете върху 'open folder' и навигирате до новата си папка. Кликнете върху малкия бутон 'file' в панела Explorer и създайте новия файл:
+
+![Explorer във VS Code](../../../../translated_images/vs-code-index.e2986cf919471eb984a0afef231380c8b132b000635105f2397bd2754d1b689c.bg.png)
+
+Или
+
+Използвайте тези команди в git bash:
+* `mkdir terrarium`
+* `cd terrarium`
+* `touch index.html`
+* `code index.html` или `nano index.html`
+
+> Файловете index.html указват на браузъра, че това е основният файл в папката; URL адреси като `https://anysite.com/test` може да бъдат изградени с помощта на структура от папки, включваща папка с име `test` и файл `index.html` вътре в нея; `index.html` не е задължително да се показва в URL адреса.
+
+---
+
+## DocType и html тагове
+
+Първият ред на HTML файл е неговият doctype. Малко е изненадващо, че трябва да имате този ред най-отгоре на файла, но той указва на по-старите браузъри, че страницата трябва да се рендерира в стандартен режим, следвайки текущата HTML спецификация.
+
+> Съвет: във VS Code можете да задържите курсора върху таг и да получите информация за неговото използване от MDN Reference guides.
+
+Вторият ред трябва да бъде отварящият `<html>` таг, следван веднага от затварящия таг `</html>`. Тези тагове са основните елементи на вашия интерфейс.
+
+### Задача
+
+Добавете тези редове в началото на вашия файл `index.html`:
+
+```HTML
+<!DOCTYPE html>
+<html></html>
+```
+
+✅ Има няколко различни режима, които могат да бъдат определени чрез задаване на DocType с низ за заявка: [Quirks Mode и Standards Mode](https://developer.mozilla.org/docs/Web/HTML/Quirks_Mode_and_Standards_Mode). Тези режими се използваха за поддръжка на много стари браузъри, които вече не се използват често (Netscape Navigator 4 и Internet Explorer 5). Можете да се придържате към стандартната декларация за doctype.
+
+---
+
+## 'head' на документа
+
+Областта 'head' на HTML документа включва важна информация за вашата уеб страница, известна също като [метаданни](https://developer.mozilla.org/docs/Web/HTML/Element/meta). В нашия случай казваме на уеб сървъра, към който тази страница ще бъде изпратена за рендериране, следните четири неща:
+
+-   заглавието на страницата
+-   метаданни на страницата, включително:
+    -   'character set', указващ какво кодиране на символите се използва на страницата
+    -   информация за браузъра, включително `x-ua-compatible`, който указва, че се поддържа браузърът IE=edge
+    -   информация за това как трябва да се държи viewport при зареждане. Задаването на viewport с начален мащаб 1 контролира нивото на увеличение при първоначалното зареждане на страницата.
+
+### Задача
+
+Добавете блок 'head' към вашия документ между отварящия и затварящия `<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>
+```
+
+✅ Какво би се случило, ако зададете meta таг за viewport като този: `<meta name="viewport" content="width=600">`? Прочетете повече за [viewport](https://developer.mozilla.org/docs/Web/HTML/Viewport_meta_tag).
+
+---
+
+## 'body' на документа
+
+### HTML тагове
+
+В HTML добавяте тагове към вашия .html файл, за да създадете елементи на уеб страница. Всеки таг обикновено има отварящ и затварящ таг, като този: `<p>hello</p>`, за да обозначи параграф. Създайте тялото на вашия интерфейс, като добавите комплект `<body>` тагове вътре в `<html>` таговете; вашият код сега изглежда така:
+
+### Задача
+
+```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>
+```
+
+Сега можете да започнете да изграждате вашата страница. Обикновено използвате `<div>` тагове, за да създадете отделни елементи на страницата. Ще създадем серия от `<div>` елементи, които ще съдържат изображения.
+
+### Изображения
+
+Един HTML таг, който не се нуждае от затварящ таг, е `<img>` тагът, защото той има елемент `src`, който съдържа цялата информация, необходима на страницата, за да рендерира елемента.
+
+Създайте папка във вашето приложение с име `images` и в нея добавете всички изображения от [папката с изходен код](../../../../3-terrarium/solution/images); (има 14 изображения на растения).
+
+### Задача
+
+Добавете тези изображения на растения в две колони между `<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>
+```
+
+> Забележка: Spans срещу Divs. Divs се считат за 'блокови' елементи, а Spans са 'вградени'. Какво би се случило, ако преобразувате тези divs в spans?
+
+С този код растенията вече се показват на екрана. Изглежда доста зле, защото все още не са стилизирани с CSS, но ще направим това в следващия урок.
+
+Всяко изображение има alt текст, който ще се появи, дори ако не можете да видите или рендерирате изображение. Това е важен атрибут за включване за достъпност. Научете повече за достъпността в бъдещи уроци; засега запомнете, че атрибутът alt предоставя алтернативна информация за изображение, ако потребителят по някаква причина не може да го види (поради бавна връзка, грешка в src атрибута или ако потребителят използва екранен четец).
+
+✅ Забелязахте ли, че всяко изображение има един и същ alt таг? Това добра практика ли е? Защо или защо не? Можете ли да подобрите този код?
+
+---
+
+## Семантичен маркъп
+
+Като цяло е за предпочитане да използвате смислен 'семантичен' маркъп, когато пишете HTML. Какво означава това? Това означава, че използвате HTML тагове, за да представите типа данни или взаимодействие, за които са предназначени. Например, основният текст на заглавието на страница трябва да използва `<h1>` таг.
+
+Добавете следния ред точно под отварящия `<body>` таг:
+
+```html
+<h1>My Terrarium</h1>
+```
+
+Използването на семантичен маркъп, като например заглавия `<h1>` и неупорядъчени списъци `<ul>`, помага на екранните четци да навигират през страницата. Като цяло бутоните трябва да бъдат написани като `<button>`, а списъците като `<li>`. Въпреки че е _възможно_ да използвате специално стилизирани `<span>` елементи с обработчици на кликвания, за да имитирате бутони, е по-добре за потребителите с увреждания да използват технологии, за да определят къде на страницата се намира бутон и да взаимодействат с него, ако елементът изглежда като бутон. Поради тази причина се опитвайте да използвате семантичен маркъп колкото е възможно повече.
+
+✅ Разгледайте екранен четец и [как той взаимодейства с уеб страница](https://www.youtube.com/watch?v=OUDV1gqs9GA). Можете ли да видите защо несемантичният маркъп може да разочарова потребителя?
+
+## Терариумът
+
+Последната част от този интерфейс включва създаване на маркъп, който ще бъде стилизиран, за да създаде терариум.
+
+### Задача:
+
+Добавете този маркъп над последния `</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>
+```
+
+✅ Въпреки че добавихте този маркъп към екрана, не виждате абсолютно нищо да се рендерира. Защо?
+
+---
+
+## 🚀Предизвикателство
+
+Има някои стари 'по-стари' тагове в HTML, които все още са забавни за използване, въпреки че не трябва да използвате остарели тагове като [тези тагове](https://developer.mozilla.org/docs/Web/HTML/Element#Obsolete_and_deprecated_elements) във вашия маркъп. Все пак, можете ли да използвате стария `<marquee>` таг, за да накарате заглавието h1 да се движи хоризонтално? (ако го направите, не забравяйте да го премахнете след това)
+
+## Тест след лекцията
+
+[Тест след лекцията](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/16)
+
+## Преглед и самостоятелно обучение
+
+HTML е "изпитаната и вярна" система от градивни елементи, която е помогнала за изграждането на уеба такъв, какъвто го познаваме днес. Научете малко за неговата история, като изучите някои стари и нови тагове. Можете ли да разберете защо някои тагове са били остарели, а други добавени? Какви тагове може да бъдат въведени в бъдеще?
+
+Научете повече за изграждането на сайтове за уеб и мобилни устройства на [Microsoft Learn](https://docs.microsoft.com/learn/modules/build-simple-website/?WT.mc_id=academic-77807-sagibbon).
+
+## Задание
+
+[Практикувайте HTML: Създайте макет на блог](assignment.md)
+
+---
+
+**Отказ от отговорност**:  
+Този документ е преведен с помощта на AI услуга за превод [Co-op Translator](https://github.com/Azure/co-op-translator). Въпреки че се стремим към точност, моля, имайте предвид, че автоматизираните преводи може да съдържат грешки или неточности. Оригиналният документ на неговия роден език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален човешки превод. Ние не носим отговорност за недоразумения или погрешни интерпретации, произтичащи от използването на този превод.
\ No newline at end of file
diff --git a/translations/bg/3-terrarium/1-intro-to-html/assignment.md b/translations/bg/3-terrarium/1-intro-to-html/assignment.md
new file mode 100644
index 00000000..1d23bd21
--- /dev/null
+++ b/translations/bg/3-terrarium/1-intro-to-html/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "970776c81401c9aacb34f365edac6b53",
+  "translation_date": "2025-08-27T22:01:44+00:00",
+  "source_file": "3-terrarium/1-intro-to-html/assignment.md",
+  "language_code": "bg"
+}
+-->
+# Практикувайте вашия HTML: Създайте макет на блог
+
+## Инструкции
+
+Представете си, че проектирате или преработвате вашия личен уебсайт. Създайте графичен макет на сайта си и след това запишете HTML кода, който бихте използвали, за да изградите различните елементи на сайта. Можете да направите това на хартия и да го сканирате, или да използвате софтуер по ваш избор, просто се уверете, че ръчно пишете HTML кода.
+
+## Критерии за оценка
+
+| Критерии | Отлично                                                                           | Задоволително                                                                  | Нуждае се от подобрение                                                          |
+| -------- | --------------------------------------------------------------------------------- | ------------------------------------------------------------------------------ | -------------------------------------------------------------------------------- |
+|          | Макетът на блога е представен визуално с поне 10 елемента на HTML код            | Макетът на блога е представен визуално с около 5 елемента на HTML код          | Макетът на блога е представен визуално с най-много 3 елемента на HTML код        |
+
+---
+
+**Отказ от отговорност**:  
+Този документ е преведен с помощта на AI услуга за превод [Co-op Translator](https://github.com/Azure/co-op-translator). Въпреки че се стремим към точност, моля, имайте предвид, че автоматизираните преводи може да съдържат грешки или неточности. Оригиналният документ на неговия роден език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален човешки превод. Ние не носим отговорност за недоразумения или погрешни интерпретации, произтичащи от използването на този превод.
\ No newline at end of file
diff --git a/translations/bg/3-terrarium/2-intro-to-css/README.md b/translations/bg/3-terrarium/2-intro-to-css/README.md
new file mode 100644
index 00000000..497ace54
--- /dev/null
+++ b/translations/bg/3-terrarium/2-intro-to-css/README.md
@@ -0,0 +1,284 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "e375c2aeb94e2407f2667633d39580bd",
+  "translation_date": "2025-08-27T22:04:50+00:00",
+  "source_file": "3-terrarium/2-intro-to-css/README.md",
+  "language_code": "bg"
+}
+-->
+# Проект Терариум Част 2: Въведение в CSS
+
+![Въведение в CSS](../../../../translated_images/webdev101-css.3f7af5991bf53a200d79e7257e5e450408d8ea97f5b531d31b2e3976317338ee.bg.png)
+> Скица от [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Тест преди лекцията
+
+[Тест преди лекцията](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/17)
+
+### Въведение
+
+CSS, или Cascading Style Sheets, решава важен проблем в уеб разработката: как да направите вашия уебсайт да изглежда добре. Стилизирайки вашите приложения, те стават по-удобни за използване и по-привлекателни; можете също така да използвате CSS за създаване на Responsive Web Design (RWD) - позволявайки на вашите приложения да изглеждат добре, независимо от размера на екрана, на който се показват. CSS не е само за външния вид на приложението; спецификацията му включва анимации и трансформации, които могат да създадат сложни взаимодействия за вашите приложения. Работната група за CSS помага за поддържането на актуалните спецификации на CSS; можете да следите тяхната работа на [сайта на World Wide Web Consortium](https://www.w3.org/Style/CSS/members).
+
+> Забележка: CSS е език, който се развива, както всичко в уеб пространството, и не всички браузъри поддържат по-новите части от спецификацията. Винаги проверявайте вашите реализации, като се консултирате с [CanIUse.com](https://caniuse.com).
+
+В този урок ще добавим стилове към нашия онлайн терариум и ще научим повече за няколко концепции в CSS: каскадата, наследяването, използването на селектори, позиционирането и използването на CSS за изграждане на оформления. В процеса ще оформим терариума и ще създадем самия терариум.
+
+### Предпоставки
+
+Трябва да имате HTML за вашия терариум, който е готов за стилизиране.
+
+> Вижте видеото
+
+> 
+> [![Видео за основите на Git и GitHub](https://img.youtube.com/vi/6yIdOIV9p1I/0.jpg)](https://www.youtube.com/watch?v=6yIdOIV9p1I)
+
+### Задача
+
+В папката на вашия терариум създайте нов файл, наречен `style.css`. Импортирайте този файл в секцията `<head>`:
+
+```html
+<link rel="stylesheet" href="./style.css" />
+```
+
+---
+
+## Каскадата
+
+Cascading Style Sheets включват идеята, че стиловете "каскадират", така че приложението на стил се ръководи от неговия приоритет. Стиловете, зададени от автора на уебсайта, имат приоритет над тези, зададени от браузъра. Стиловете, зададени "inline", имат приоритет над тези, зададени във външен стилов файл.
+
+### Задача
+
+Добавете inline стил "color: red" към вашия `<h1>` таг:
+
+```HTML
+<h1 style="color: red">My Terrarium</h1>
+```
+
+След това добавете следния код към вашия файл `style.css`:
+
+```CSS
+h1 {
+ color: blue;
+}
+```
+
+✅ Кой цвят се показва във вашето уеб приложение? Защо? Можете ли да намерите начин да презапишете стиловете? Кога бихте искали да направите това и защо не?
+
+---
+
+## Наследяване
+
+Стиловете се наследяват от стил на предшественик към потомък, така че вложените елементи наследяват стиловете на своите родители.
+
+### Задача
+
+Задайте шрифта на тялото на даден шрифт и проверете шрифта на вложен елемент:
+
+```CSS
+body {
+	font-family: helvetica, arial, sans-serif;
+}
+```
+
+Отворете конзолата на браузъра в таба 'Elements' и наблюдавайте шрифта на H1. Той наследява своя шрифт от тялото, както е посочено в браузъра:
+
+![наследен шрифт](../../../../translated_images/1.cc07a5cbe114ad1d4728c35134584ac1b87db688eff83cf75985cf31fe0ed95c.bg.png)
+
+✅ Можете ли да направите вложен стил да наследи различно свойство?
+
+---
+
+## CSS Селектори
+
+### Тагове
+
+Досега вашият файл `style.css` има само няколко стилизирани тага, и приложението изглежда доста странно:
+
+```CSS
+body {
+	font-family: helvetica, arial, sans-serif;
+}
+
+h1 {
+	color: #3a241d;
+	text-align: center;
+}
+```
+
+Този начин на стилизиране на таг ви дава контрол над уникални елементи, но трябва да контролирате стиловете на много растения в терариума. За да направите това, трябва да използвате CSS селектори.
+
+### Ids
+
+Добавете стил за оформяне на левия и десния контейнер. Тъй като има само един ляв контейнер и само един десен контейнер, те са получили ids в маркировката. За да ги стилизирате, използвайте `#`:
+
+```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;
+}
+```
+
+Тук сте позиционирали тези контейнери с абсолютно позициониране в крайната лява и дясна част на екрана и сте използвали проценти за тяхната ширина, така че да могат да се мащабират за малки мобилни екрани.
+
+✅ Този код е доста повторен, което не е "DRY" (Don't Repeat Yourself); можете ли да намерите по-добър начин за стилизиране на тези ids, може би с id и клас? Ще трябва да промените маркировката и да рефакторирате CSS:
+
+```html
+<div id="left-container" class="container"></div>
+```
+
+### Класове
+
+В горния пример сте стилизирали два уникални елемента на екрана. Ако искате стиловете да се прилагат към много елементи на екрана, можете да използвате CSS класове. Направете това, за да оформите растенията в левия и десния контейнер.
+
+Забележете, че всяко растение в HTML маркировката има комбинация от ids и класове. Ids тук се използват от JavaScript, който ще добавите по-късно, за да манипулирате разположението на растенията в терариума. Класовете обаче дават на всички растения определен стил.
+
+```html
+<div class="plant-holder">
+	<img class="plant" alt="plant" id="plant1" src="./images/plant1.png" />
+</div>
+```
+
+Добавете следното към вашия файл `style.css`:
+
+```CSS
+.plant-holder {
+	position: relative;
+	height: 13%;
+	left: -10px;
+}
+
+.plant {
+	position: absolute;
+	max-width: 150%;
+	max-height: 150%;
+	z-index: 2;
+}
+```
+
+Забележително в този фрагмент е смесването на относително и абсолютно позициониране, което ще разгледаме в следващия раздел. Обърнете внимание на начина, по който височините се обработват чрез проценти:
+
+Задавате височината на държача на растенията на 13%, добро число, за да гарантирате, че всички растения се показват във всеки вертикален контейнер без нужда от превъртане.
+
+Премествате държача на растенията наляво, за да позволите растенията да бъдат по-центрирани в техния контейнер. Изображенията имат голямо количество прозрачен фон, за да бъдат по-лесно премествани, така че трябва да бъдат изтласкани наляво, за да се впишат по-добре на екрана.
+
+След това самото растение получава максимална ширина от 150%. Това му позволява да се мащабира надолу, когато браузърът се мащабира надолу. Опитайте да промените размера на браузъра си; растенията остават в контейнерите си, но се мащабират, за да се впишат.
+
+Също така е забележително използването на z-index, който контролира относителната височина на елемент (така че растенията да седят върху контейнера и да изглеждат сякаш са вътре в терариума).
+
+✅ Защо ви трябват както селектор за държача на растенията, така и селектор за самото растение?
+
+## CSS Позициониране
+
+Смесването на свойства за позициониране (има статично, относително, фиксирано, абсолютно и лепкаво позициониране) може да бъде малко сложно, но когато е направено правилно, ви дава добър контрол върху елементите на вашите страници.
+
+Абсолютно позиционираните елементи се позиционират спрямо най-близките позиционирани предшественици, а ако няма такива, те се позиционират спрямо тялото на документа.
+
+Относително позиционираните елементи се позиционират въз основа на указанията на CSS за коригиране на тяхното разположение спрямо първоначалната им позиция.
+
+В нашия пример, `plant-holder` е елемент с относително позициониране, който е позициониран в контейнер с абсолютно позициониране. Резултатът е, че страничните контейнери са фиксирани вляво и вдясно, а `plant-holder` е вложен, коригирайки се в рамките на страничните контейнери, като дава пространство за растенията да бъдат разположени във вертикален ред.
+
+> Самото `plant` също има абсолютно позициониране, необходимо за да бъде премествано, както ще откриете в следващия урок.
+
+✅ Експериментирайте с промяна на типовете позициониране на страничните контейнери и `plant-holder`. Какво се случва?
+
+## CSS Оформления
+
+Сега ще използвате наученото, за да изградите самия терариум, изцяло с помощта на CSS!
+
+Първо, стилизирайте децата на `.terrarium` div като заоблен правоъгълник с помощта на 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;
+}
+```
+
+Обърнете внимание на използването на проценти тук. Ако намалите размера на браузъра си, можете да видите как бурканът също се мащабира. Също така забележете ширините и височините в проценти за елементите на буркана и как всеки елемент е абсолютно позициониран в центъра, фиксиран към дъното на изгледа.
+
+Използваме и `rem` за радиуса на границата, дължина, относителна към шрифта. Прочетете повече за този тип относително измерване в [CSS спецификацията](https://www.w3.org/TR/css-values-3/#font-relative-lengths).
+
+✅ Опитайте да промените цветовете и прозрачността на буркана спрямо тези на пръстта. Какво се случва? Защо?
+
+---
+
+## 🚀Предизвикателство
+
+Добавете "балон" блясък в долната лява част на буркана, за да изглежда по-стъклен. Ще стилизирате `.jar-glossy-long` и `.jar-glossy-short`, за да изглеждат като отразен блясък. Ето как би изглеждало:
+
+![завършен терариум](../../../../translated_images/terrarium-final.2f07047ffc597d0a06b06cab28a77801a10dd12fdb6c7fc630e9c40665491c53.bg.png)
+
+За да завършите теста след лекцията, преминете през този модул в Learn: [Стилизирайте вашето HTML приложение с CSS](https://docs.microsoft.com/learn/modules/build-simple-website/4-css-basics/?WT.mc_id=academic-77807-sagibbon)
+
+## Тест след лекцията
+
+[Тест след лекцията](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/18)
+
+## Преглед и самостоятелно обучение
+
+CSS изглежда измамно лесен, но има много предизвикателства, когато се опитвате да стилизирате приложение перфектно за всички браузъри и всички размери на екрана. CSS-Grid и Flexbox са инструменти, които са разработени, за да направят задачата малко по-структурирана и по-надеждна. Научете за тези инструменти, като играете [Flexbox Froggy](https://flexboxfroggy.com/) и [Grid Garden](https://codepip.com/games/grid-garden/).
+
+## Задание
+
+[CSS Рефакторинг](assignment.md)
+
+---
+
+**Отказ от отговорност**:  
+Този документ е преведен с помощта на AI услуга за превод [Co-op Translator](https://github.com/Azure/co-op-translator). Въпреки че се стремим към точност, моля, имайте предвид, че автоматизираните преводи може да съдържат грешки или неточности. Оригиналният документ на неговия роден език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален човешки превод. Ние не носим отговорност за недоразумения или погрешни интерпретации, произтичащи от използването на този превод.
\ No newline at end of file
diff --git a/translations/bg/3-terrarium/2-intro-to-css/assignment.md b/translations/bg/3-terrarium/2-intro-to-css/assignment.md
new file mode 100644
index 00000000..cdaa8a93
--- /dev/null
+++ b/translations/bg/3-terrarium/2-intro-to-css/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "9d4d75af51aaccfe9af778f792c62919",
+  "translation_date": "2025-08-27T22:06:02+00:00",
+  "source_file": "3-terrarium/2-intro-to-css/assignment.md",
+  "language_code": "bg"
+}
+-->
+# Рефакториране на CSS
+
+## Инструкции
+
+Престилизирайте терариума, използвайки Flexbox или CSS Grid, и направете скрийншоти, за да покажете, че сте го тествали на няколко браузъра. Може да се наложи да промените маркировката, затова създайте нова версия на приложението с изкуството на място за вашия рефактор. Не се притеснявайте за правенето на елементите плъзгаеми; засега само рефакторирайте HTML и CSS.
+
+## Критерии за оценка
+
+| Критерий | Отлично                                                         | Задоволително                | Нуждае се от подобрение              |
+| -------- | --------------------------------------------------------------- | ---------------------------- | ------------------------------------ |
+|          | Представете напълно престилизиран терариум, използвайки Flexbox или CSS Grid | Престилизирайте някои от елементите | Не успявате да престилизирате терариума изобщо |
+
+---
+
+**Отказ от отговорност**:  
+Този документ е преведен с помощта на AI услуга за превод [Co-op Translator](https://github.com/Azure/co-op-translator). Въпреки че се стремим към точност, моля, имайте предвид, че автоматизираните преводи може да съдържат грешки или неточности. Оригиналният документ на неговия роден език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален човешки превод. Ние не носим отговорност за недоразумения или погрешни интерпретации, произтичащи от използването на този превод.
\ No newline at end of file
diff --git a/translations/bg/3-terrarium/3-intro-to-DOM-and-closures/README.md b/translations/bg/3-terrarium/3-intro-to-DOM-and-closures/README.md
new file mode 100644
index 00000000..92923c41
--- /dev/null
+++ b/translations/bg/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:02:48+00:00",
+  "source_file": "3-terrarium/3-intro-to-DOM-and-closures/README.md",
+  "language_code": "bg"
+}
+-->
+# Проект Терариум Част 3: Манипулация на DOM и Затваряне
+
+![DOM и затваряне](../../../../translated_images/webdev101-js.10280393044d7eaaec7e847574946add7ddae6be2b2194567d848b61d849334a.bg.png)
+> Скица от [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Предварителен тест
+
+[Предварителен тест](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/19)
+
+### Въведение
+
+Манипулирането на DOM, или "Document Object Model", е ключов аспект на уеб разработката. Според [MDN](https://developer.mozilla.org/docs/Web/API/Document_Object_Model/Introduction), "Document Object Model (DOM) е представянето на данни за обектите, които съставляват структурата и съдържанието на документ в уеб." Предизвикателствата около манипулацията на DOM често са били причина за използването на JavaScript рамки вместо чист JavaScript за управление на DOM, но ние ще се справим сами!
+
+Освен това, този урок ще въведе идеята за [JavaScript затваряне](https://developer.mozilla.org/docs/Web/JavaScript/Closures), което можете да си представите като функция, затворена от друга функция, така че вътрешната функция да има достъп до обхвата на външната функция.
+
+> JavaScript затварянията са обширна и сложна тема. Този урок засяга най-основната идея, че в кода на този терариум ще намерите затваряне: вътрешна функция и външна функция, конструирани по начин, който позволява на вътрешната функция достъп до обхвата на външната функция. За много повече информация за това как работи, моля, посетете [обширната документация](https://developer.mozilla.org/docs/Web/JavaScript/Closures).
+
+Ще използваме затваряне, за да манипулираме DOM.
+
+Представете си DOM като дърво, което представлява всички начини, по които документ на уеб страница може да бъде манипулиран. Различни API (Application Program Interfaces) са написани, за да позволят на програмистите, използвайки избрания от тях език за програмиране, да имат достъп до DOM и да го редактират, променят, пренареждат и управляват.
+
+![Представяне на DOM дърво](../../../../translated_images/dom-tree.7daf0e763cbbba9273f9a66fe04c98276d7d23932309b195cb273a9cf1819b42.bg.png)
+
+> Представяне на DOM и HTML маркировката, която го реферира. От [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
+
+В този урок ще завършим нашия интерактивен проект за терариум, като създадем JavaScript, който ще позволи на потребителя да манипулира растенията на страницата.
+
+### Предпоставки
+
+Трябва да имате HTML и CSS за вашия терариум готови. До края на този урок ще можете да местите растенията в и извън терариума чрез влачене.
+
+### Задача
+
+В папката на вашия терариум създайте нов файл, наречен `script.js`. Импортирайте този файл в секцията `<head>`:
+
+```html
+	<script src="./script.js" defer></script>
+```
+
+> Забележка: използвайте `defer`, когато импортирате външен JavaScript файл в HTML файла, за да позволите на JavaScript да се изпълни само след като HTML файлът е напълно зареден. Можете също да използвате атрибута `async`, който позволява скриптът да се изпълнява, докато HTML файлът се парсира, но в нашия случай е важно HTML елементите да са напълно налични за влачене, преди да позволим изпълнението на скрипта за влачене.
+---
+
+## DOM елементите
+
+Първото нещо, което трябва да направите, е да създадете референции към елементите, които искате да манипулирате в DOM. В нашия случай това са 14-те растения, които в момента чакат в страничните ленти.
+
+### Задача
+
+```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'));
+```
+
+Какво се случва тук? Реферирате документа и търсите в неговия DOM, за да намерите елемент с определен Id. Спомнете си в първия урок за HTML, че дадохте индивидуални Id-та на всяко изображение на растение (`id="plant1"`)? Сега ще използвате това усилие. След като идентифицирате всеки елемент, го предавате на функция, наречена `dragElement`, която ще създадете след малко. Така елементът в HTML вече е готов за влачене, или скоро ще бъде.
+
+✅ Защо реферираме елементи по Id? Защо не по техния CSS клас? Можете да се върнете към предишния урок за CSS, за да отговорите на този въпрос.
+
+---
+
+## Затварянето
+
+Сега сте готови да създадете затварянето `dragElement`, което е външна функция, която затваря вътрешна функция или функции (в нашия случай ще имаме три).
+
+Затварянията са полезни, когато една или повече функции трябва да имат достъп до обхвата на външна функция. Ето пример:
+
+```javascript
+function displayCandy(){
+	let candy = ['jellybeans'];
+	function addCandy(candyType) {
+		candy.push(candyType)
+	}
+	addCandy('gumdrops');
+}
+displayCandy();
+console.log(candy)
+```
+
+В този пример функцията `displayCandy` обгражда функция, която добавя нов тип бонбон към масив, който вече съществува във функцията. Ако изпълните този код, масивът `candy` ще бъде недефиниран, тъй като е локална променлива (локална за затварянето).
+
+✅ Как можете да направите масива `candy` достъпен? Опитайте да го преместите извън затварянето. Така масивът става глобален, вместо да остава достъпен само за локалния обхват на затварянето.
+
+### Задача
+
+Под декларациите на елементите в `script.js` създайте функция:
+
+```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` получава своя обект `terrariumElement` от декларациите в началото на скрипта. След това задавате някои локални позиции на `0` за обекта, предаден на функцията. Това са локалните променливи, които ще бъдат манипулирани за всеки елемент, докато добавяте функционалност за влачене и пускане в затварянето към всеки елемент. Терариумът ще бъде попълнен от тези влачени елементи, така че приложението трябва да следи къде са поставени.
+
+Освен това, `terrariumElement`, който се предава на тази функция, получава събитие `pointerdown`, което е част от [web APIs](https://developer.mozilla.org/docs/Web/API), предназначени да помогнат с управлението на DOM. `onpointerdown` се активира, когато бутон е натиснат, или в нашия случай, когато докоснете влачим елемент. Този обработчик на събития работи както на [уеб, така и на мобилни браузъри](https://caniuse.com/?search=onpointerdown), с няколко изключения.
+
+✅ [Обработчикът на събития `onclick`](https://developer.mozilla.org/docs/Web/API/GlobalEventHandlers/onclick) има много повече поддръжка между браузърите; защо не бихте го използвали тук? Помислете за точния тип взаимодействие с екрана, което се опитвате да създадете тук.
+
+---
+
+## Функцията Pointerdrag
+
+`terrariumElement` е готов за влачене; когато събитието `onpointerdown` се активира, се извиква функцията `pointerDrag`. Добавете тази функция точно под този ред: `terrariumElement.onpointerdown = pointerDrag;`:
+
+### Задача 
+
+```javascript
+function pointerDrag(e) {
+	e.preventDefault();
+	console.log(e);
+	pos3 = e.clientX;
+	pos4 = e.clientY;
+}
+```
+
+Няколко неща се случват. Първо, предотвратявате стандартните събития, които обикновено се случват при pointerdown, като използвате `e.preventDefault();`. Така имате повече контрол върху поведението на интерфейса.
+
+> Върнете се към този ред, когато сте изградили напълно файла със скрипта, и опитайте без `e.preventDefault()` - какво се случва?
+
+Второ, отворете `index.html` в прозорец на браузъра и инспектирайте интерфейса. Когато кликнете върху растение, можете да видите как събитието 'e' се улавя. Разгледайте събитието, за да видите колко информация се събира от едно pointerdown събитие!  
+
+След това, обърнете внимание как локалните променливи `pos3` и `pos4` се задават на e.clientX. Можете да намерите стойностите на `e` в панела за инспекция. Тези стойности улавят x и y координатите на растението в момента, когато го кликнете или докоснете. Ще ви е необходим фин контрол върху поведението на растенията, докато ги кликвате и влачите, така че следите техните координати.
+
+✅ Става ли по-ясно защо цялото приложение е изградено с едно голямо затваряне? Ако не беше, как бихте поддържали обхват за всяко от 14-те влачими растения?
+
+Завършете началната функция, като добавите още две манипулации на pointer събития под `pos4 = e.clientY`:
+
+```html
+document.onpointermove = elementDrag;
+document.onpointerup = stopElementDrag;
+```
+Сега посочвате, че искате растението да бъде влачено заедно с показалеца, докато го местите, и жестът на влачене да спре, когато отмените избора на растението. `onpointermove` и `onpointerup` са част от същия API като `onpointerdown`. Интерфейсът ще хвърля грешки сега, тъй като все още не сте дефинирали функциите `elementDrag` и `stopElementDrag`, така че ги изградете следващи.
+
+## Функциите elementDrag и stopElementDrag
+
+Ще завършите вашето затваряне, като добавите още две вътрешни функции, които ще управляват какво се случва, когато влачите растение и спирате да го влачите. Поведението, което искате, е да можете да влачите всяко растение по всяко време и да го поставяте навсякъде на екрана. Този интерфейс е доста непретенциозен (например няма зона за пускане), за да ви позволи да проектирате вашия терариум точно както искате, като добавяте, премахвате и премествате растения.
+
+### Задача
+
+Добавете функцията `elementDrag` точно след затварящата фигурна скоба на `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';
+}
+```
+В тази функция правите много редакции на началните позиции 1-4, които зададохте като локални променливи във външната функция. Какво се случва тук?
+
+Докато влачите, преназначавате `pos1`, като го правите равен на `pos3` (което зададохте по-рано като `e.clientX`) минус текущата стойност на `e.clientX`. Правите подобна операция на `pos2`. След това, нулирате `pos3` и `pos4` на новите X и Y координати на елемента. Можете да наблюдавате тези промени в конзолата, докато влачите. След това манипулирате CSS стила на растението, за да зададете новата му позиция въз основа на новите позиции на `pos1` и `pos2`, изчислявайки горните и левите X и Y координати на растението, като сравнявате неговото отместване с тези нови позиции.
+
+> `offsetTop` и `offsetLeft` са CSS свойства, които задават позицията на елемент въз основа на тази на неговия родител; неговият родител може да бъде всеки елемент, който не е позициониран като `static`. 
+
+Цялото това преизчисляване на позиционирането ви позволява да настроите поведението на терариума и неговите растения.
+
+### Задача 
+
+Последната задача за завършване на интерфейса е да добавите функцията `stopElementDrag` след затварящата фигурна скоба на `elementDrag`:
+
+```javascript
+function stopElementDrag() {
+	document.onpointerup = null;
+	document.onpointermove = null;
+}
+```
+
+Тази малка функция нулира събитията `onpointerup` и `onpointermove`, така че можете или да рестартирате прогреса на вашето растение, като започнете да го влачите отново, или да започнете да влачите ново растение.
+
+✅ Какво се случва, ако не зададете тези събития на null?
+
+Сега сте завършили вашия проект!
+
+🥇Поздравления! Завършихте вашия красив терариум! ![завършен терариум](../../../../translated_images/terrarium-final.0920f16e87c13a84cd2b553a5af9a3ad1cffbd41fbf8ce715d9e9c43809a5e2c.bg.png)
+
+---
+
+## 🚀Предизвикателство
+
+Добавете нов обработчик на събития към вашето затваряне, за да направите нещо повече с растенията; например, двойно кликване върху растение, за да го преместите отпред. Бъдете креативни!
+
+## Финален тест
+
+[Финален тест](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/20)
+
+## Преглед и самостоятелно обучение
+
+Докато влаченето на елементи по екрана изглежда тривиално, има много начини да го направите и много капани, в зависимост от ефекта, който търсите. Всъщност има цял [drag and drop API](https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_API), който можете да опитате. Не го използвахме в този модул, защото ефектът, който искахме, беше малко по-различен, но опитайте този API във ваш собствен проект и вижте какво можете да постигнете.
+
+Намерете повече информация за pointer събитията в [W3C документация](https://www.w3.org/TR/pointerevents1/) и в [MDN web документация](https://developer.mozilla.org/docs/Web/API/Pointer_events).
+
+Винаги проверявайте възможностите на браузъра, използвайки [CanIUse.com](https://caniuse.com/).
+
+## Задание
+
+[Работете още малко с DOM](assignment.md)
+
+---
+
+**Отказ от отговорност**:  
+Този документ е преведен с помощта на AI услуга за превод [Co-op Translator](https://github.com/Azure/co-op-translator). Въпреки че се стремим към точност, моля, имайте предвид, че автоматизираните преводи може да съдържат грешки или неточности. Оригиналният документ на неговия роден език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален човешки превод. Не носим отговорност за недоразумения или погрешни интерпретации, произтичащи от използването на този превод.
\ No newline at end of file
diff --git a/translations/bg/3-terrarium/3-intro-to-DOM-and-closures/assignment.md b/translations/bg/3-terrarium/3-intro-to-DOM-and-closures/assignment.md
new file mode 100644
index 00000000..153f4edb
--- /dev/null
+++ b/translations/bg/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:04:09+00:00",
+  "source_file": "3-terrarium/3-intro-to-DOM-and-closures/assignment.md",
+  "language_code": "bg"
+}
+-->
+# Работете малко повече с DOM
+
+## Инструкции
+
+Проучете DOM малко повече, като „осиновите“ DOM елемент. Посетете [списъка с DOM интерфейси](https://developer.mozilla.org/docs/Web/API/Document_Object_Model) на MDN и изберете един. Намерете го в употреба на уеб сайт в интернет и напишете обяснение за това как се използва.
+
+## Рубрика
+
+| Критерии | Отлично                                      | Задоволително                                   | Нуждае се от подобрение |
+| -------- | -------------------------------------------- | ------------------------------------------------ | ----------------------- |
+|          | Написан е параграф с пример                  | Написан е параграф без пример                    | Няма написан параграф   |
+
+---
+
+**Отказ от отговорност**:  
+Този документ е преведен с помощта на AI услуга за превод [Co-op Translator](https://github.com/Azure/co-op-translator). Въпреки че се стремим към точност, моля, имайте предвид, че автоматизираните преводи може да съдържат грешки или неточности. Оригиналният документ на неговия роден език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален човешки превод. Ние не носим отговорност за недоразумения или погрешни интерпретации, произтичащи от използването на този превод.
\ No newline at end of file
diff --git a/translations/bg/3-terrarium/README.md b/translations/bg/3-terrarium/README.md
new file mode 100644
index 00000000..24d0ceaa
--- /dev/null
+++ b/translations/bg/3-terrarium/README.md
@@ -0,0 +1,45 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "7965cd2bc5dc92ad888dc4c6ab2ab70a",
+  "translation_date": "2025-08-27T21:59:25+00:00",
+  "source_file": "3-terrarium/README.md",
+  "language_code": "bg"
+}
+-->
+# Моето терариумче: Проект за изучаване на HTML, CSS и манипулация на DOM с JavaScript 🌵🌱
+
+Малка медитация с влачене и пускане на код. С малко HTML, JS и CSS ще можете да създадете уеб интерфейс, да го стилизирате и дори да добавите множество интеракции по ваш избор.
+
+![моето терариумче](../../../translated_images/screenshot_gray.0c796099a1f9f25e40aa55ead81f268434c00af30d7092490759945eda63067d.bg.png)
+
+# Уроци
+
+1. [Въведение в HTML](./1-intro-to-html/README.md)
+2. [Въведение в CSS](./2-intro-to-css/README.md)
+3. [Въведение в DOM и JS затваряния](./3-intro-to-DOM-and-closures/README.md)
+
+## Кредити
+
+Написано с ♥️ от [Jen Looper](https://www.twitter.com/jenlooper)
+
+Терариумът, създаден чрез CSS, е вдъхновен от стъкления буркан на Jakub Mandra [codepen](https://codepen.io/Rotarepmi/pen/rjpNZY).
+
+Илюстрациите са ръчно нарисувани от [Jen Looper](http://jenlooper.com) с помощта на Procreate.
+
+## Публикувайте вашето терариумче
+
+Можете да публикувате вашето терариумче в интернет, използвайки Azure Static Web Apps.
+
+1. Направете fork на това хранилище
+
+2. Натиснете този бутон
+
+[![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. Следвайте стъпките в съветника за създаване на вашето приложение. Уверете се, че сте задали корена на приложението да бъде или `/solution`, или коренът на вашата кодова база. В това приложение няма API, така че не се притеснявайте да добавяте такъв. Във вашето fork-нато хранилище ще бъде създадена папка за GitHub, която ще помогне на услугите за изграждане на Azure Static Web Apps да изградят и публикуват вашето приложение на нов URL адрес.
+
+---
+
+**Отказ от отговорност**:  
+Този документ е преведен с помощта на AI услуга за превод [Co-op Translator](https://github.com/Azure/co-op-translator). Въпреки че се стремим към точност, моля, имайте предвид, че автоматизираните преводи може да съдържат грешки или неточности. Оригиналният документ на неговия роден език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален човешки превод. Ние не носим отговорност за недоразумения или погрешни интерпретации, произтичащи от използването на този превод.
\ No newline at end of file
diff --git a/translations/bg/3-terrarium/solution/README.md b/translations/bg/3-terrarium/solution/README.md
new file mode 100644
index 00000000..43e7c9a0
--- /dev/null
+++ b/translations/bg/3-terrarium/solution/README.md
@@ -0,0 +1,39 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "6329fbe8bd936068debd78cca6f09c0a",
+  "translation_date": "2025-08-27T22:06:26+00:00",
+  "source_file": "3-terrarium/solution/README.md",
+  "language_code": "bg"
+}
+-->
+# Моето терариум: Проект за изучаване на HTML, CSS и манипулация на DOM с JavaScript 🌵🌱
+
+Малка медитация с влачене и пускане на код. С малко HTML, JS и CSS можете да създадете уеб интерфейс, да го стилизирате и да добавите взаимодействие.
+
+![моето терариум](../../../../translated_images/screenshot_gray.0c796099a1f9f25e40aa55ead81f268434c00af30d7092490759945eda63067d.bg.png)
+
+## Кредити
+
+Написано с ♥️ от [Jen Looper](https://www.twitter.com/jenlooper)
+
+Терариумът, създаден чрез CSS, е вдъхновен от стъкления буркан на Jakub Mandra [codepen](https://codepen.io/Rotarepmi/pen/rjpNZY).
+
+Илюстрациите са ръчно нарисувани от [Jen Looper](http://jenlooper.com) с помощта на Procreate.
+
+## Публикувайте вашия терариум
+
+Можете да публикувате вашия терариум в интернет, използвайки Azure Static Web Apps.
+
+1. Направете fork на това хранилище
+
+2. Натиснете този бутон
+
+[![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. Следвайте стъпките в съветника за създаване на вашето приложение. Уверете се, че сте задали корена на приложението да бъде `/solution` или корена на вашата кодова база. В това приложение няма API, така че не се притеснявайте да добавяте такъв. Във вашето fork-нато хранилище ще бъде създадена папка .github, която ще помогне на услугата за изграждане на Azure Static Web Apps да изгради и публикува вашето приложение на нов URL адрес.
+
+---
+
+**Отказ от отговорност**:  
+Този документ е преведен с помощта на AI услуга за превод [Co-op Translator](https://github.com/Azure/co-op-translator). Въпреки че се стремим към точност, моля, имайте предвид, че автоматизираните преводи може да съдържат грешки или неточности. Оригиналният документ на неговия роден език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален човешки превод. Ние не носим отговорност за недоразумения или погрешни интерпретации, произтичащи от използването на този превод.
\ No newline at end of file
diff --git a/translations/bg/4-typing-game/README.md b/translations/bg/4-typing-game/README.md
new file mode 100644
index 00000000..626f64f5
--- /dev/null
+++ b/translations/bg/4-typing-game/README.md
@@ -0,0 +1,44 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "957547b822c40042e07d591c4fbfde4f",
+  "translation_date": "2025-08-27T23:07:38+00:00",
+  "source_file": "4-typing-game/README.md",
+  "language_code": "bg"
+}
+-->
+# Програмиране, базирано на събития - Създаване на игра за писане
+
+## Въведение
+
+Писането е едно от най-недооценените умения на разработчика. Способността бързо да прехвърляте мислите си от главата към редактора позволява на креативността да тече свободно. Един от най-добрите начини да се учите е чрез игра!
+
+> И така, нека създадем игра за писане!
+
+Ще използвате уменията си по JavaScript, HTML и CSS, които сте изградили досега, за да създадете игра за писане. Играта ще представи на играча случайна цитата (използваме цитати от [Шерлок Холмс](https://en.wikipedia.org/wiki/Sherlock_Holmes)) и ще измери колко време му отнема да я напише точно. Ще използвате уменията си по JavaScript, HTML и CSS, които сте изградили досега, за да създадете игра за писане.
+
+![демо](../../../4-typing-game/images/demo.gif)
+
+## Предпоставки
+
+Този урок предполага, че сте запознати със следните концепции:
+
+- Създаване на текстови полета за въвеждане и бутони
+- CSS и задаване на стилове чрез класове
+- Основи на JavaScript
+  - Създаване на масив
+  - Създаване на случайно число
+  - Получаване на текущото време
+
+## Урок
+
+[Създаване на игра за писане чрез програмиране, базирано на събития](./typing-game/README.md)
+
+## Кредити
+
+Написано с ♥️ от [Кристофър Харисън](http://www.twitter.com/geektrainer)
+
+---
+
+**Отказ от отговорност**:  
+Този документ е преведен с помощта на AI услуга за превод [Co-op Translator](https://github.com/Azure/co-op-translator). Въпреки че се стремим към точност, моля, имайте предвид, че автоматизираните преводи може да съдържат грешки или неточности. Оригиналният документ на неговия роден език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален човешки превод. Ние не носим отговорност за каквито и да било недоразумения или погрешни интерпретации, произтичащи от използването на този превод.
\ No newline at end of file
diff --git a/translations/bg/4-typing-game/solution/README.md b/translations/bg/4-typing-game/solution/README.md
new file mode 100644
index 00000000..9d0ae71c
--- /dev/null
+++ b/translations/bg/4-typing-game/solution/README.md
@@ -0,0 +1,15 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "068cbb9b3c10a96d503f6cdd6c9ace8c",
+  "translation_date": "2025-08-27T23:07:57+00:00",
+  "source_file": "4-typing-game/solution/README.md",
+  "language_code": "bg"
+}
+-->
+Това е заместител, оставен празен нарочно
+
+---
+
+**Отказ от отговорност**:  
+Този документ е преведен с помощта на AI услуга за превод [Co-op Translator](https://github.com/Azure/co-op-translator). Въпреки че се стремим към точност, моля, имайте предвид, че автоматизираните преводи може да съдържат грешки или неточности. Оригиналният документ на неговия роден език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален човешки превод. Ние не носим отговорност за недоразумения или погрешни интерпретации, произтичащи от използването на този превод.
\ No newline at end of file
diff --git a/translations/bg/4-typing-game/typing-game/README.md b/translations/bg/4-typing-game/typing-game/README.md
new file mode 100644
index 00000000..e88c0b88
--- /dev/null
+++ b/translations/bg/4-typing-game/typing-game/README.md
@@ -0,0 +1,353 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "e982871b8388c59c22a41b73b5fca70f",
+  "translation_date": "2025-08-27T23:08:50+00:00",
+  "source_file": "4-typing-game/typing-game/README.md",
+  "language_code": "bg"
+}
+-->
+# Създаване на игра с използване на събития
+
+## Предварителен тест
+
+[Предварителен тест](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/21)
+
+## Програмиране, базирано на събития
+
+Когато създаваме приложение за браузър, предоставяме графичен потребителски интерфейс (GUI), който потребителят използва за взаимодействие с това, което сме изградили. Най-често срещаният начин за взаимодействие с браузъра е чрез кликване и писане в различни елементи. Предизвикателството, пред което сме изправени като разработчици, е, че не знаем кога потребителят ще извърши тези действия!
+
+[Програмирането, базирано на събития](https://en.wikipedia.org/wiki/Event-driven_programming) е подходът, който трябва да използваме, за да създадем нашия GUI. Ако разгледаме тази фраза, основната дума тук е **събитие**. [Събитие](https://www.merriam-webster.com/dictionary/event), според Merriam-Webster, се определя като "нещо, което се случва". Това описва нашата ситуация перфектно. Знаем, че нещо ще се случи, за което искаме да изпълним код в отговор, но не знаем кога ще се случи.
+
+Начинът, по който маркираме секция от код, която искаме да изпълним, е чрез създаване на функция. Когато мислим за [процедурно програмиране](https://en.wikipedia.org/wiki/Procedural_programming), функциите се извикват в определен ред. Същото важи и за програмирането, базирано на събития. Разликата е **как** функциите ще бъдат извикани.
+
+За да обработваме събития (като кликване на бутон, писане и др.), регистрираме **слушатели на събития**. Слушателят на събитие е функция, която "слуша" за настъпването на събитие и се изпълнява в отговор. Слушателите на събития могат да актуализират потребителския интерфейс, да правят заявки към сървъра или каквото друго е необходимо в отговор на действието на потребителя. Добавяме слушател на събитие чрез [addEventListener](https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener) и предоставяме функция за изпълнение.
+
+> **NOTE:** Струва си да се отбележи, че има множество начини за създаване на слушатели на събития. Можете да използвате анонимни функции или да създавате именувани. Можете да използвате различни преки пътища, като задаване на свойството `click` или използване на `addEventListener`. В нашето упражнение ще се фокусираме върху `addEventListener` и анонимни функции, тъй като това вероятно е най-често използваната техника от уеб разработчиците. Освен това е най-гъвкавата, тъй като `addEventListener` работи за всички събития, а името на събитието може да бъде предоставено като параметър.
+
+### Често срещани събития
+
+Има [десетки събития](https://developer.mozilla.org/docs/Web/Events), които можете да слушате, когато създавате приложение. Всъщност почти всичко, което потребителят прави на страницата, предизвиква събитие, което ви дава голяма сила да осигурите желаното изживяване. За щастие, обикновено ще ви трябват само няколко събития. Ето някои от най-често срещаните (включително двете, които ще използваме при създаването на нашата игра):
+
+- [click](https://developer.mozilla.org/docs/Web/API/Element/click_event): Потребителят е кликнал върху нещо, обикновено бутон или хипервръзка
+- [contextmenu](https://developer.mozilla.org/docs/Web/API/Element/contextmenu_event): Потребителят е кликнал с десния бутон на мишката
+- [select](https://developer.mozilla.org/docs/Web/API/Element/select_event): Потребителят е маркирал текст
+- [input](https://developer.mozilla.org/docs/Web/API/Element/input_event): Потребителят е въвел текст
+
+## Създаване на играта
+
+Ще създадем игра, за да изследваме как работят събитията в JavaScript. Нашата игра ще тества уменията на играча за писане, което е едно от най-недооценените умения, които всички разработчици трябва да притежават. Всички трябва да практикуваме писането си! Общият поток на играта ще изглежда така:
+
+- Играчът кликва върху бутон за старт и му се показва цитат за писане
+- Играчът пише цитата възможно най-бързо в текстово поле
+  - С всяка завършена дума следващата се маркира
+  - Ако играчът направи грешка, текстовото поле се оцветява в червено
+  - Когато играчът завърши цитата, се показва съобщение за успех с изминалото време
+
+Нека изградим нашата игра и научим за събитията!
+
+### Структура на файловете
+
+Ще ни трябват общо три файла: **index.html**, **script.js** и **style.css**. Нека започнем с тях, за да улесним работата си.
+
+- Създайте нова папка за вашата работа, като отворите конзола или терминал и изпълните следната команда:
+
+```bash
+# Linux or macOS
+mkdir typing-game && cd typing-game
+
+# Windows
+md typing-game && cd typing-game
+```
+
+- Отворете Visual Studio Code
+
+```bash
+code .
+```
+
+- Добавете три файла в папката във Visual Studio Code със следните имена:
+  - index.html
+  - script.js
+  - style.css
+
+## Създаване на потребителския интерфейс
+
+Ако разгледаме изискванията, знаем, че ще ни трябват няколко елемента на нашата HTML страница. Това е като рецепта, където ни трябват някои съставки:
+
+- Място за показване на цитата, който потребителят трябва да напише
+- Място за показване на съобщения, като съобщение за успех
+- Текстово поле за писане
+- Бутон за старт
+
+Всеки от тези елементи ще се нуждае от ID, за да можем да работим с тях в нашия JavaScript. Ще добавим и препратки към CSS и JavaScript файловете, които ще създадем.
+
+Създайте нов файл с име **index.html**. Добавете следния 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>
+```
+
+### Стартиране на приложението
+
+Винаги е най-добре да разработвате итеративно, за да видите как изглеждат нещата. Нека стартираме нашето приложение. Има чудесно разширение за Visual Studio Code, наречено [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon), което ще хоства вашето приложение локално и ще обновява браузъра всеки път, когато запазите.
+
+- Инсталирайте [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon), като следвате линка и кликнете **Install**
+  - Браузърът ще ви подкани да отворите Visual Studio Code, а след това Visual Studio Code ще ви подкани да извършите инсталацията
+  - Рестартирайте Visual Studio Code, ако бъдете подканени
+- След като инсталирате, във Visual Studio Code натиснете Ctrl-Shift-P (или Cmd-Shift-P), за да отворите командния палет
+- Напишете **Live Server: Open with Live Server**
+  - Live Server ще започне да хоства вашето приложение
+- Отворете браузър и навигирайте до **https://localhost:5500**
+- Вече трябва да виждате страницата, която създадохте!
+
+Нека добавим малко функционалност.
+
+## Добавяне на CSS
+
+С нашия HTML създаден, нека добавим CSS за основно стилизиране. Трябва да маркираме думата, която играчът трябва да напише, и да оцветим текстовото поле, ако това, което е написано, е грешно. Ще направим това с два класа.
+
+Създайте нов файл с име **style.css** и добавете следния синтаксис.
+
+```css
+/* inside style.css */
+.highlight {
+  background-color: yellow;
+}
+
+.error {
+  background-color: lightcoral;
+  border: red;
+}
+```
+
+✅ Когато става въпрос за CSS, можете да оформите страницата си както пожелаете. Отделете малко време, за да направите страницата по-привлекателна:
+
+- Изберете различен шрифт
+- Оцветете заглавията
+- Променете размера на елементите
+
+## JavaScript
+
+С нашия потребителски интерфейс създаден, е време да насочим вниманието си към JavaScript, който ще предостави логиката. Ще го разделим на няколко стъпки:
+
+- [Създаване на константите](../../../../4-typing-game/typing-game)
+- [Слушател на събитие за старт на играта](../../../../4-typing-game/typing-game)
+- [Слушател на събитие за писане](../../../../4-typing-game/typing-game)
+
+Но първо, създайте нов файл с име **script.js**.
+
+### Добавяне на константите
+
+Ще ни трябват няколко елемента, за да улесним програмирането. Отново, подобно на рецепта, ето какво ще ни трябва:
+
+- Масив със списък на всички цитати
+- Празен масив за съхранение на всички думи от текущия цитат
+- Пространство за съхранение на индекса на думата, която играчът пише в момента
+- Времето, когато играчът е кликнал старт
+
+Също така ще искаме препратки към елементите на потребителския интерфейс:
+
+- Текстовото поле (**typed-value**)
+- Показване на цитата (**quote**)
+- Съобщението (**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');
+```
+
+✅ Добавете още цитати към вашата игра
+
+> **NOTE:** Можем да извличаме елементите, когато пожелаем в кода, като използваме `document.getElementById`. Поради факта, че ще се позоваваме на тези елементи редовно, ще избегнем грешки с низови литерали, като използваме константи. Фреймуъркове като [Vue.js](https://vuejs.org/) или [React](https://reactjs.org/) могат да ви помогнат да управлявате централизирането на вашия код.
+
+Отделете минута, за да гледате видео за използването на `const`, `let` и `var`
+
+[![Типове променливи](https://img.youtube.com/vi/JNIXfGiDWM8/0.jpg)](https://youtube.com/watch?v=JNIXfGiDWM8 "Типове променливи")
+
+> 🎥 Кликнете върху изображението по-горе за видео за променливи.
+
+### Добавяне на логика за старт
+
+За да започне играта, играчът ще кликне върху старт. Разбира се, не знаем кога ще кликне старт. Тук влиза в действие [слушателят на събитие](https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener). Слушателят на събитие ще ни позволи да слушаме за настъпването на нещо (събитие) и да изпълним код в отговор. В нашия случай искаме да изпълним код, когато потребителят кликне върху старт.
+
+Когато потребителят кликне **старт**, трябва да изберем цитат, да настроим потребителския интерфейс и да настроим проследяването на текущата дума и времето. По-долу е JavaScript, който трябва да добавите; ще го обсъдим веднага след блока със скрипта.
+
+```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();
+});
+```
+
+Нека разгледаме кода!
+
+- Настройка на проследяването на думите
+  - Използването на [Math.floor](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Math/floor) и [Math.random](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Math/random) ни позволява случайно да изберем цитат от масива `quotes`
+  - Превръщаме `quote` в масив от `words`, за да можем да проследим думата, която играчът пише в момента
+  - `wordIndex` се задава на 0, тъй като играчът ще започне с първата дума
+- Настройка на потребителския интерфейс
+  - Създаваме масив от `spanWords`, който съдържа всяка дума в `span` елемент
+    - Това ще ни позволи да маркираме думата на дисплея
+  - `join` масива, за да създадем низ, който можем да използваме за актуализиране на `innerHTML` на `quoteElement`
+    - Това ще покаже цитата на играча
+  - Задаваме `className` на първия `span` елемент на `highlight`, за да го маркираме в жълто
+  - Изчистваме `messageElement`, като задаваме `innerText` на `''`
+- Настройка на текстовото поле
+  - Изчистваме текущата `value` на `typedValueElement`
+  - Задаваме `focus` на `typedValueElement`
+- Стартираме таймера, като извикваме `getTime`
+
+### Добавяне на логика за писане
+
+Докато играчът пише, се предизвиква събитие `input`. Този слушател на събитие ще провери дали играчът пише думата правилно и ще обработи текущия статус на играта. Върнете се към **script.js** и добавете следния код в края. Ще го разгледаме след това.
+
+```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';
+  }
+});
+```
+
+Нека разгледаме кода! Започваме, като вземем текущата дума и стойността, която играчът е написал досега. След това имаме логика, където проверяваме дали цитатът е завършен, думата е завършена, думата е правилна или (накрая), ако има грешка.
+
+- Цитатът е завършен, което се указва от `typedValue`, равен на `currentWord`, и `wordIndex`, равен на един по-малко от `length` на `words`
+  - Изчисляваме `elapsedTime`, като изваждаме `startTime` от текущото време
+  - Разделяме `elapsedTime` на 1,000, за да го преобразуваме от милисекунди в секунди
+  - Показваме съобщение за успех
+- Думата е завършена, което се указва от `typedValue`, завършващ с интервал (края на дума) и `typedValue`, равен на `currentWord`
+  - Задаваме `value` на `typedElement` на `''`, за да позволим следващата дума да бъде написана
+  - Увеличаваме `wordIndex`, за да преминем към следващата дума
+  - Преглеждаме всички `childNodes` на `quoteElement`, за да зададем `className` на `''`, за да се върнем към стандартния дисплей
+  - Задаваме `className` на текущата дума на `highlight`, за да я маркираме като следващата дума за писане
+- Думата е написана правилно (но не е завършена), което се указва от `currentWord`, започващ с `typedValue`
+  - Уверяваме се, че `typedValueElement` се показва като стандартен, като изчистваме `className`
+- Ако стигнем дотук, имаме грешка
+  - Задаваме `className` на `typedValueElement` на `error`
+
+## Тествайте вашето приложение
+
+Стигнахте до края! Последната стъпка е да се уверите, че вашето приложение работи. Опитайте го! Не се притеснявайте, ако има грешки; **всички разработчици** имат грешки. Разгледайте съобщенията и отстранявайте проблемите според нуждите.
+
+Кликнете върху **старт** и започнете да пишете! Трябва да изглежда малко като анимацията, която видяхме преди.
+
+![Анимация на играта в действие](../../../../4-typing-game/images/demo.gif)
+
+---
+
+## 🚀 Предизвикателство
+
+Добавете повече функционалност
+
+- Деактивирайте слушателя на събитие `input` при завършване и го активирайте отново, когато бутонът бъде кликнат
+- Деактивирайте текстовото поле, когато играчът завърши цитата
+- Показвайте модален диалогов прозорец със съобщението за успех
+- Съхранявайте високи резултати, използвайки [localStorage](https://developer.mozilla.org/docs/Web/API/Window/localStorage)
+
+## Тест след лекцията
+
+[Тест след лекцията](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/22)
+
+## Преглед и самостоятелно обучение
+
+Прочетете за [всички налични събития](https://developer.mozilla.org/docs/Web/Events), достъпни за разработчика чрез уеб браузъра, и обмислете сценариите, в които бихте използвали всяко от тях.
+
+## Задача
+
+[Създайте нова игра с клавиатура](assignment.md)
+
+---
+
+**Отказ от отговорност**:  
+Този документ е преведен с помощта на AI услуга за превод [Co-op Translator](https://github.com/Azure/co-op-translator). Въпреки че се стремим към точност, моля, имайте предвид, че автоматизираните преводи може да съдържат грешки или неточности. Оригиналният документ на неговия роден език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален човешки превод. Ние не носим отговорност за недоразумения или погрешни интерпретации, произтичащи от използването на този превод.
\ No newline at end of file
diff --git a/translations/bg/4-typing-game/typing-game/assignment.md b/translations/bg/4-typing-game/typing-game/assignment.md
new file mode 100644
index 00000000..3aefbfeb
--- /dev/null
+++ b/translations/bg/4-typing-game/typing-game/assignment.md
@@ -0,0 +1,26 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "de5384c118e15e4d1d0eaa00fc01b112",
+  "translation_date": "2025-08-27T23:10:26+00:00",
+  "source_file": "4-typing-game/typing-game/assignment.md",
+  "language_code": "bg"
+}
+-->
+# Създайте нова игра с клавиатура
+
+## Инструкции
+
+Създайте малка игра, която използва събития от клавиатурата за изпълнение на задачи. Това може да бъде различен вид игра за писане или игра от арт тип, която рисува пиксели на екрана при натискане на клавиши. Бъдете креативни!
+
+## Критерии за оценка
+
+| Критерии | Отлично                  | Задоволително           | Нуждае се от подобрение |
+| -------- | ------------------------ | ------------------------ | ----------------------- |
+|          | Представена е цяла игра  | Играта е много минимална | Играта има грешки       |
+|          |                          |                          |                         |
+
+---
+
+**Отказ от отговорност**:  
+Този документ е преведен с помощта на AI услуга за превод [Co-op Translator](https://github.com/Azure/co-op-translator). Въпреки че се стремим към точност, моля, имайте предвид, че автоматизираните преводи може да съдържат грешки или неточности. Оригиналният документ на неговия роден език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален човешки превод. Ние не носим отговорност за недоразумения или погрешни интерпретации, произтичащи от използването на този превод.
\ No newline at end of file
diff --git a/translations/bg/5-browser-extension/1-about-browsers/README.md b/translations/bg/5-browser-extension/1-about-browsers/README.md
new file mode 100644
index 00000000..7f2dda32
--- /dev/null
+++ b/translations/bg/5-browser-extension/1-about-browsers/README.md
@@ -0,0 +1,182 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "0bb55e0b98600afab801eea115228873",
+  "translation_date": "2025-08-27T22:46:14+00:00",
+  "source_file": "5-browser-extension/1-about-browsers/README.md",
+  "language_code": "bg"
+}
+-->
+# Проект за браузърно разширение, част 1: Всичко за браузърите
+
+![Скица на браузър](../../../../translated_images/browser.60317c9be8b7f84adce43e30bff8d47a1ae15793beab762317b2bc6b74337c1a.bg.jpg)
+> Скица от [Wassim Chegham](https://dev.to/wassimchegham/ever-wondered-what-happens-when-you-type-in-a-url-in-an-address-bar-in-a-browser-3dob)
+
+## Предварителен тест
+
+[Предварителен тест](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/23)
+
+### Въведение
+
+Браузърните разширения добавят допълнителна функционалност към браузъра. Но преди да създадете такова, е добре да научите малко повече за това как браузърите работят.
+
+### За браузъра
+
+В тази серия от уроци ще научите как да създадете браузърно разширение, което ще работи на браузърите Chrome, Firefox и Edge. В тази част ще откриете как работят браузърите и ще изградите основните елементи на браузърното разширение.
+
+Но какво всъщност е браузърът? Това е софтуерно приложение, което позволява на крайния потребител да достъпва съдържание от сървър и да го показва на уеб страници.
+
+✅ Малко история: първият браузър се е наричал 'WorldWideWeb' и е създаден от сър Тимъти Бърнърс-Лий през 1990 година.
+
+![ранни браузъри](../../../../translated_images/earlybrowsers.d984b711cdf3a42ddac919d46c4b5ca7232f68ccfbd81395e04e5a64c0015277.bg.jpg)
+> Някои ранни браузъри, чрез [Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing)
+
+Когато потребителят се свърже с интернет чрез URL (Uniform Resource Locator) адрес, обикновено използвайки Hypertext Transfer Protocol чрез `http` или `https` адрес, браузърът комуникира с уеб сървър и извлича уеб страница.
+
+На този етап, рендериращият двигател на браузъра я показва на устройството на потребителя, което може да бъде мобилен телефон, настолен компютър или лаптоп.
+
+Браузърите също така имат способността да кешират съдържание, така че то да не се извлича от сървъра всеки път. Те могат да записват историята на активността на потребителя, да съхраняват 'бисквитки', които са малки части от данни, съдържащи информация за активността на потребителя, и още много.
+
+Едно много важно нещо, което трябва да запомните за браузърите, е че те не са еднакви! Всеки браузър има своите силни и слаби страни, и професионалният уеб разработчик трябва да разбира как да направи уеб страниците да работят добре на различни браузъри. Това включва работа с малки екрани, като тези на мобилни телефони, както и с потребители, които са офлайн.
+
+Един много полезен уебсайт, който вероятно трябва да запазите в предпочитанията на браузъра, който използвате, е [caniuse.com](https://www.caniuse.com). Когато създавате уеб страници, е много полезно да използвате списъците на caniuse за поддържани технологии, за да можете най-добре да подкрепите своите потребители.
+
+✅ Как можете да разберете кои браузъри са най-популярни сред потребителите на вашия уебсайт? Проверете вашата аналитика - можете да инсталирате различни аналитични пакети като част от процеса на уеб разработка, и те ще ви покажат кои браузъри се използват най-често.
+
+## Браузърни разширения
+
+Защо бихте искали да създадете браузърно разширение? Това е удобен инструмент, който можете да добавите към браузъра си, когато имате нужда от бърз достъп до задачи, които често повтаряте. Например, ако често трябва да проверявате цветовете на различни уеб страници, които използвате, можете да инсталирате браузърно разширение за избор на цветове. Ако имате проблеми с запомнянето на пароли, можете да използвате браузърно разширение за управление на пароли.
+
+Създаването на браузърни разширения е и забавно. Те обикновено управляват ограничен брой задачи, които изпълняват добре.
+
+✅ Кои са вашите любими браузърни разширения? Какви задачи изпълняват?
+
+### Инсталиране на разширения
+
+Преди да започнете да създавате, разгледайте процеса на създаване и разгръщане на браузърно разширение. Въпреки че всеки браузър се различава малко в начина, по който управлява тази задача, процесът е подобен на Chrome и Firefox, както в този пример за Edge:
+
+![екранна снимка на браузъра Edge, показваща отворената страница edge://extensions и менюто с настройки](../../../../translated_images/install-on-edge.d68781acaf0b3d3dada8b7507cde7a64bf74b7040d9818baaa9070668e819f90.bg.png)
+
+> Забележка: Уверете се, че сте включили режим за разработчици и сте разрешили разширения от други магазини.
+
+По същество процесът ще бъде:
+
+- създайте вашето разширение, използвайки `npm run build` 
+- навигирайте в браузъра до панела с разширения, използвайки бутона "Настройки и още" (иконата `...`) в горния десен ъгъл
+- ако е нова инсталация, изберете `load unpacked`, за да качите ново разширение от папката му за изграждане (в нашия случай това е `/dist`) 
+- или, кликнете `reload`, ако презареждате вече инсталирано разширение
+
+✅ Тези инструкции се отнасят за разширения, които създавате сами; за да инсталирате разширения, които са публикувани в магазина за браузърни разширения, свързан с всеки браузър, трябва да навигирате до тези [магазини](https://microsoftedge.microsoft.com/addons/Microsoft-Edge-Extensions-Home) и да инсталирате разширението, което сте избрали.
+
+### Започнете
+
+Ще създадете браузърно разширение, което показва въглеродния отпечатък на вашия регион, като показва енергийното потребление на региона и източника на енергията. Разширението ще има форма, която събира API ключ, за да можете да достъпите API на CO2 Signal.
+
+**Необходимо ви е:**
+
+- [API ключ](https://www.co2signal.com/); въведете вашия имейл в полето на тази страница и ще ви бъде изпратен ключ
+- [код за вашия регион](http://api.electricitymap.org/v3/zones), съответстващ на [Electricity Map](https://www.electricitymap.org/map) (в Бостън, например, използвам 'US-NEISO').
+- [начален код](../../../../5-browser-extension/start). Изтеглете папката `start`; ще завършите кода в тази папка.
+- [NPM](https://www.npmjs.com) - NPM е инструмент за управление на пакети; инсталирайте го локално и пакетите, изброени във вашия файл `package.json`, ще бъдат инсталирани за използване от вашия уеб актив
+
+✅ Научете повече за управлението на пакети в този [отличен модул за обучение](https://docs.microsoft.com/learn/modules/create-nodejs-project-dependencies/?WT.mc_id=academic-77807-sagibbon)
+
+Отделете минута, за да разгледате базата с код:
+
+dist
+    -|manifest.json (тук се задават настройките по подразбиране)
+    -|index.html (тук е HTML маркировката за фронтенда)
+    -|background.js (тук е JS за фоновите процеси)
+    -|main.js (компилиран JS)
+src
+    -|index.js (тук е вашият JS код)
+
+✅ След като разполагате с вашия API ключ и код за региона, запазете ги някъде в бележка за бъдеща употреба.
+
+### Създайте HTML за разширението
+
+Това разширение има два изгледа. Един за събиране на API ключа и кода за региона:
+
+![екранна снимка на завършеното разширение, отворено в браузър, показващо форма с полета за име на регион и API ключ.](../../../../translated_images/1.b6da8c1394b07491afeb6b2a8e5aca73ebd3cf478e27bcc9aeabb187e722648e.bg.png)
+
+И втори за показване на въглеродното потребление на региона:
+
+![екранна снимка на завършеното разширение, показващо стойности за въглеродно потребление и процент на изкопаеми горива за региона US-NEISO.](../../../../translated_images/2.1dae52ff0804224692cd648afbf2342955d7afe3b0101b617268130dfb427f55.bg.png)
+
+Нека започнем със създаването на HTML за формата и стилизирането ѝ с CSS.
+
+В папката `/dist` ще създадете форма и зона за резултати. Във файла `index.html` попълнете обозначената зона за формата:
+
+```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>	
+```
+Това е формата, където вашата запазена информация ще бъде въведена и съхранена в локалното хранилище.
+
+След това създайте зоната за резултати; под последния таг на формата добавете няколко div елемента:
+
+```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>
+```
+На този етап можете да опитате изграждане. Уверете се, че сте инсталирали зависимостите на пакета за това разширение:
+
+```
+npm install
+```
+
+Тази команда ще използва npm, мениджъра на пакети за Node, за да инсталира webpack за процеса на изграждане на вашето разширение. Можете да видите резултата от този процес, като погледнете в `/dist/main.js` - ще видите, че кодът е обединен.
+
+Засега разширението трябва да се изгради и, ако го разположите в Edge като разширение, ще видите форма, която е чисто показана.
+
+Поздравления, направихте първите стъпки към създаването на браузърно разширение. В следващите уроци ще го направите по-функционално и полезно.
+
+---
+
+## 🚀 Предизвикателство
+
+Разгледайте магазин за браузърни разширения и инсталирайте едно на вашия браузър. Можете да разгледате неговите файлове по интересни начини. Какво откривате?
+
+## Тест след лекцията
+
+[Тест след лекцията](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/24)
+
+## Преглед и самостоятелно обучение
+
+В този урок научихте малко за историята на уеб браузъра; използвайте тази възможност, за да научите повече за това как създателите на Световната мрежа са си представяли нейното използване, като прочетете повече за нейната история. Някои полезни сайтове включват:
+
+[История на уеб браузърите](https://www.mozilla.org/firefox/browsers/browser-history/)
+
+[История на мрежата](https://webfoundation.org/about/vision/history-of-the-web/)
+
+[Интервю с Тим Бърнърс-Лий](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)
+
+## Задание 
+
+[Променете стила на вашето разширение](assignment.md)
+
+---
+
+**Отказ от отговорност**:  
+Този документ е преведен с помощта на AI услуга за превод [Co-op Translator](https://github.com/Azure/co-op-translator). Въпреки че се стремим към точност, моля, имайте предвид, че автоматизираните преводи може да съдържат грешки или неточности. Оригиналният документ на неговия роден език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален човешки превод. Ние не носим отговорност за недоразумения или погрешни интерпретации, произтичащи от използването на този превод.
\ No newline at end of file
diff --git a/translations/bg/5-browser-extension/1-about-browsers/assignment.md b/translations/bg/5-browser-extension/1-about-browsers/assignment.md
new file mode 100644
index 00000000..1c1c089f
--- /dev/null
+++ b/translations/bg/5-browser-extension/1-about-browsers/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "e3c6f2a03c2336e60412612d870af547",
+  "translation_date": "2025-08-27T22:47:27+00:00",
+  "source_file": "5-browser-extension/1-about-browsers/assignment.md",
+  "language_code": "bg"
+}
+-->
+# Променете стила на вашето разширение
+
+## Инструкции
+
+Кодовата база на това разширение идва с готови стилове, но не е задължително да ги използвате; направете разширението си уникално, като промените стила му чрез редактиране на css файла.
+
+## Критерии за оценка
+
+| Критерии | Отлично                                     | Задоволително         | Нуждае се от подобрение |
+| -------- | ------------------------------------------- | --------------------- | ----------------------- |
+|          | Кодът е подаден с функционални нови стилове | Стиловете са непълни  | Стиловете са с грешки   |
+
+---
+
+**Отказ от отговорност**:  
+Този документ е преведен с помощта на AI услуга за превод [Co-op Translator](https://github.com/Azure/co-op-translator). Въпреки че се стремим към точност, моля, имайте предвид, че автоматизираните преводи може да съдържат грешки или неточности. Оригиналният документ на неговия роден език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален човешки превод. Ние не носим отговорност за недоразумения или погрешни интерпретации, произтичащи от използването на този превод.
\ No newline at end of file
diff --git a/translations/bg/5-browser-extension/2-forms-browsers-local-storage/README.md b/translations/bg/5-browser-extension/2-forms-browsers-local-storage/README.md
new file mode 100644
index 00000000..c2d9c081
--- /dev/null
+++ b/translations/bg/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:43:08+00:00",
+  "source_file": "5-browser-extension/2-forms-browsers-local-storage/README.md",
+  "language_code": "bg"
+}
+-->
+# Проект за разширение на браузър, част 2: Извикване на API, използване на локално хранилище
+
+## Тест преди лекцията
+
+[Тест преди лекцията](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/25)
+
+### Въведение
+
+В този урок ще извикате API, като изпратите формуляра на вашето разширение за браузър и ще покажете резултатите в него. Освен това ще научите как да съхранявате данни в локалното хранилище на браузъра за бъдеща справка и употреба.
+
+✅ Следвайте номерираните сегменти в съответните файлове, за да разберете къде да поставите кода си.
+
+### Подгответе елементите за манипулиране в разширението:
+
+Дотук вече сте създали HTML за формуляра и `<div>` за резултатите на вашето разширение за браузър. Оттук нататък ще работите във файла `/src/index.js` и ще изграждате разширението си стъпка по стъпка. Обърнете се към [предишния урок](../1-about-browsers/README.md) за настройка на проекта и процеса на изграждане.
+
+Работейки във файла `index.js`, започнете, като създадете няколко `const` променливи, които да държат стойностите, свързани с различни полета:
+
+```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');
+```
+
+Всички тези полета се реферират чрез техния CSS клас, както сте ги настроили в HTML в предишния урок.
+
+### Добавяне на слушатели
+
+След това добавете слушатели на събития към формуляра и бутона за изчистване, който нулира формуляра, така че ако потребителят изпрати формуляра или кликне върху бутона за нулиране, да се случи нещо. Добавете и извикването за инициализиране на приложението в края на файла:
+
+```JavaScript
+form.addEventListener('submit', (e) => handleSubmit(e));
+clearBtn.addEventListener('click', (e) => reset(e));
+init();
+```
+
+✅ Обърнете внимание на съкратената форма, използвана за слушане на събития за изпращане или кликване, и как събитието се предава към функциите `handleSubmit` или `reset`. Можете ли да напишете еквивалента на тази съкратена форма в по-дълъг формат? Кой от двата предпочитате?
+
+### Изграждане на функциите init() и reset():
+
+Сега ще изградите функцията, която инициализира разширението, наречена 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();
+}
+
+```
+
+В тази функция има интересна логика. Четейки я, можете ли да разберете какво се случва?
+
+- Две `const` променливи се създават, за да проверят дали потребителят е съхранил APIKey и регионален код в локалното хранилище.
+- Ако някоя от тях е null, формулярът се показва, като стилът му се променя на 'block'.
+- Скриват се резултатите, зареждането и clearBtn, а текстът за грешка се задава като празен низ.
+- Ако съществуват ключ и регион, започва рутина за:
+  - Извикване на API за получаване на данни за въглеродната употреба.
+  - Скриване на областта с резултатите.
+  - Скриване на формуляра.
+  - Показване на бутона за нулиране.
+
+Преди да продължите, е полезно да научите за много важна концепция, налична в браузърите: [LocalStorage](https://developer.mozilla.org/docs/Web/API/Window/localStorage). LocalStorage е полезен начин за съхраняване на низове в браузъра като двойки `ключ-стойност`. Този тип уеб хранилище може да се манипулира чрез JavaScript за управление на данни в браузъра. LocalStorage не изтича, докато SessionStorage, друг вид уеб хранилище, се изчиства, когато браузърът се затвори. Различните видове хранилища имат своите плюсове и минуси.
+
+> Забележка - вашето разширение за браузър има собствено локално хранилище; основният прозорец на браузъра е отделен екземпляр и се държи независимо.
+
+Можете да зададете стойност на вашия APIKey, например, и да видите, че тя е зададена в Edge, като "инспектирате" уеб страница (можете да кликнете с десния бутон върху браузъра, за да инспектирате) и отидете в раздела Applications, за да видите хранилището.
+
+![Панел за локално хранилище](../../../../translated_images/localstorage.472f8147b6a3f8d141d9551c95a2da610ac9a3c6a73d4a1c224081c98bae09d9.bg.png)
+
+✅ Помислете за ситуации, в които НЕ бихте искали да съхранявате някои данни в LocalStorage. По принцип поставянето на API ключове в LocalStorage е лоша идея! Можете ли да разберете защо? В нашия случай, тъй като приложението ни е само за обучение и няма да бъде публикувано в магазин за приложения, ще използваме този метод.
+
+Обърнете внимание, че използвате Web API за манипулиране на LocalStorage, като използвате `getItem()`, `setItem()` или `removeItem()`. Това е широко поддържано в различни браузъри.
+
+Преди да изградите функцията `displayCarbonUsage()`, която се извиква в `init()`, нека изградим функционалността за обработка на първоначалното изпращане на формуляра.
+
+### Обработка на изпращането на формуляра
+
+Създайте функция, наречена `handleSubmit`, която приема аргумент за събитие `(e)`. Спрете разпространението на събитието (в този случай искаме да спрем браузъра от презареждане) и извикайте нова функция, `setUpUser`, като предадете аргументите `apiKey.value` и `region.value`. По този начин използвате двете стойности, които се въвеждат чрез първоначалния формуляр, когато съответните полета са попълнени.
+
+```JavaScript
+function handleSubmit(e) {
+	e.preventDefault();
+	setUpUser(apiKey.value, region.value);
+}
+```
+
+✅ Освежете паметта си - HTML, който създадохте в последния урок, има две входни полета, чиито `values` се улавят чрез `const`, които създадохте в началото на файла, и те са `required`, така че браузърът спира потребителите от въвеждане на null стойности.
+
+### Настройка на потребителя
+
+Продължавайки към функцията `setUpUser`, тук задавате стойности в локалното хранилище за apiKey и regionName. Добавете нова функция:
+
+```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);
+}
+```
+
+Тази функция задава съобщение за зареждане, което да се покаже, докато API се извиква. На този етап сте стигнали до създаването на най-важната функция на това разширение за браузър!
+
+### Показване на въглеродната употреба
+
+Накрая е време да направите заявка към API!
+
+Преди да продължим, трябва да обсъдим API. API, или [Application Programming Interfaces](https://www.webopedia.com/TERM/A/API.html), са критичен елемент в инструментариума на уеб разработчика. Те предоставят стандартни начини за взаимодействие и интерфейс между програми. Например, ако изграждате уебсайт, който трябва да направи заявка към база данни, някой може да е създал API, който да използвате. Докато има много видове API, един от най-популярните е [REST API](https://www.smashingmagazine.com/2018/01/understanding-using-rest-api/).
+
+✅ Терминът 'REST' означава 'Representational State Transfer' и включва използването на различно конфигурирани URL адреси за извличане на данни. Направете малко проучване за различните видове API, налични за разработчиците. Кой формат ви допада най-много?
+
+Има важни неща, които трябва да отбележите за тази функция. Първо, обърнете внимание на ключовата дума [`async`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/async_function). Писането на вашите функции така, че да работят асинхронно, означава, че те изчакват дадено действие, като връщане на данни, да бъде завършено, преди да продължат.
+
+Ето кратко видео за `async`:
+
+[![Async и Await за управление на обещания](https://img.youtube.com/vi/YwmlRkrxvkk/0.jpg)](https://youtube.com/watch?v=YwmlRkrxvkk "Async и Await за управление на обещания")
+
+> 🎥 Кликнете върху изображението по-горе за видео за async/await.
+
+Създайте нова функция за заявка към 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.';
+	}
+}
+```
+
+Това е голяма функция. Какво се случва тук?
+
+- Следвайки добрите практики, използвате ключовата дума `async`, за да направите тази функция асинхронна. Функцията съдържа блок `try/catch`, тъй като ще върне обещание, когато API върне данни. Тъй като нямате контрол върху скоростта, с която API ще отговори (може изобщо да не отговори!), трябва да се справите с тази несигурност, като я извикате асинхронно.
+- Извиквате API на co2signal, за да получите данни за вашия регион, използвайки вашия API ключ. За да използвате този ключ, трябва да използвате вид автентикация в параметрите на заглавката.
+- След като API отговори, присвоявате различни елементи от данните на отговора към частите на екрана, които сте настроили да показват тези данни.
+- Ако има грешка или няма резултат, показвате съобщение за грешка.
+
+✅ Използването на асинхронни програмни модели е друг много полезен инструмент във вашия инструментариум. Прочетете [за различните начини](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/async_function), по които можете да конфигурирате този тип код.
+
+Поздравления! Ако изградите разширението си (`npm run build`) и го обновите в панела за разширения, вече имате работещо разширение! Единственото нещо, което не работи, е иконата, и ще го поправите в следващия урок.
+
+---
+
+## 🚀 Предизвикателство
+
+Обсъдихме няколко типа API досега в тези уроци. Изберете уеб API и проучете в дълбочина какво предлага. Например, разгледайте API, налични в браузърите, като [HTML Drag and Drop API](https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_API). Какво според вас прави един API страхотен?
+
+## Тест след лекцията
+
+[Тест след лекцията](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/26)
+
+## Преглед и самостоятелно обучение
+
+В този урок научихте за LocalStorage и API, и двете са много полезни за професионалния уеб разработчик. Можете ли да помислите как тези две неща работят заедно? Помислете как бихте проектирали уебсайт, който съхранява елементи, които да се използват от API.
+
+## Задание
+
+[Осиновете API](assignment.md)
+
+---
+
+**Отказ от отговорност**:  
+Този документ е преведен с помощта на AI услуга за превод [Co-op Translator](https://github.com/Azure/co-op-translator). Въпреки че се стремим към точност, моля, имайте предвид, че автоматизираните преводи може да съдържат грешки или неточности. Оригиналният документ на неговия роден език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален човешки превод. Ние не носим отговорност за недоразумения или погрешни интерпретации, произтичащи от използването на този превод.
\ No newline at end of file
diff --git a/translations/bg/5-browser-extension/2-forms-browsers-local-storage/assignment.md b/translations/bg/5-browser-extension/2-forms-browsers-local-storage/assignment.md
new file mode 100644
index 00000000..cea8c165
--- /dev/null
+++ b/translations/bg/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:45:00+00:00",
+  "source_file": "5-browser-extension/2-forms-browsers-local-storage/assignment.md",
+  "language_code": "bg"
+}
+-->
+# Осиновете API
+
+## Инструкции
+
+API-тата могат да бъдат много забавни за използване. Ето [списък с много безплатни API-та](https://github.com/public-apis/public-apis). Изберете API и създайте браузърно разширение, което решава даден проблем. Това може да бъде малък проблем, като липсата на достатъчно снимки на домашни любимци (например, използвайте [dog CEO API](https://dog.ceo/dog-api/)) или нещо по-голямо - забавлявайте се!
+
+## Критерии за оценка
+
+| Критерии | Отлично                                                                  | Задоволително                           | Нуждае се от подобрение |
+| -------- | ------------------------------------------------------------------------ | ---------------------------------------- | ----------------------- |
+|          | Пълно браузърно разширение е представено, използвайки API от горния списък | Частично браузърно разширение е представено | Представеното съдържа грешки |
+
+---
+
+**Отказ от отговорност**:  
+Този документ е преведен с помощта на AI услуга за превод [Co-op Translator](https://github.com/Azure/co-op-translator). Въпреки че се стремим към точност, моля, имайте предвид, че автоматизираните преводи може да съдържат грешки или неточности. Оригиналният документ на неговия роден език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален човешки превод. Ние не носим отговорност за недоразумения или погрешни интерпретации, произтичащи от използването на този превод.
\ No newline at end of file
diff --git a/translations/bg/5-browser-extension/3-background-tasks-and-performance/README.md b/translations/bg/5-browser-extension/3-background-tasks-and-performance/README.md
new file mode 100644
index 00000000..6de0928f
--- /dev/null
+++ b/translations/bg/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:48:56+00:00",
+  "source_file": "5-browser-extension/3-background-tasks-and-performance/README.md",
+  "language_code": "bg"
+}
+-->
+# Проект за браузърно разширение, част 3: Научете за фонови задачи и производителност
+
+## Предварителен тест
+
+[Предварителен тест](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/27)
+
+### Въведение
+
+В последните два урока от този модул научихте как да създадете форма и зона за показване на данни, извлечени от API. Това е много стандартен начин за създаване на уеб присъствие. Дори научихте как да обработвате асинхронно извличане на данни. Вашето браузърно разширение е почти готово.
+
+Остава да управлявате някои фонови задачи, включително обновяване на цвета на иконата на разширението, така че това е чудесен момент да поговорим за това как браузърът управлява този тип задачи. Нека разгледаме тези задачи в контекста на производителността на вашите уеб ресурси, докато ги изграждате.
+
+## Основи на уеб производителността
+
+> "Производителността на уебсайта се свежда до две неща: колко бързо се зарежда страницата и колко бързо работи кодът на нея." -- [Zack Grossbart](https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/)
+
+Темата за това как да направите вашите уебсайтове изключително бързи на всякакви устройства, за всякакви потребители и в различни ситуации, е, разбира се, обширна. Ето някои точки, които да имате предвид, докато изграждате стандартен уеб проект или браузърно разширение.
+
+Първото нещо, което трябва да направите, за да гарантирате, че вашият сайт работи ефективно, е да съберете данни за неговата производителност. Първото място за това са инструментите за разработчици на вашия уеб браузър. В Edge можете да изберете бутона "Настройки и още" (иконата с три точки в горния десен ъгъл на браузъра), след това да навигирате до Още инструменти > Инструменти за разработчици и да отворите раздела Производителност. Можете също да използвате клавишните комбинации `Ctrl` + `Shift` + `I` на Windows или `Option` + `Command` + `I` на Mac, за да отворите инструментите за разработчици.
+
+Разделът Производителност съдържа инструмент за профилиране. Отворете уебсайт (например [https://www.microsoft.com](https://www.microsoft.com/?WT.mc_id=academic-77807-sagibbon)) и кликнете върху бутона 'Запис', след това обновете сайта. Спрете записа по всяко време и ще можете да видите рутините, които се генерират за 'скрипт', 'рендиране' и 'рисуване' на сайта:
+
+![Edge профайлер](../../../../translated_images/profiler.5a4a62479c5df01cfec9aab74173dba13f91d2c968e1a1ae434c26165792df15.bg.png)
+
+✅ Посетете [Microsoft документацията](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) за панела Производителност в Edge
+
+> Съвет: за да получите точни данни за времето за стартиране на вашия сайт, изчистете кеша на браузъра си
+
+Изберете елементи от времевата линия на профила, за да увеличите събитията, които се случват, докато вашата страница се зарежда.
+
+Получете моментна снимка на производителността на вашата страница, като изберете част от времевата линия на профила и погледнете панела с обобщение:
+
+![Edge моментна снимка на профайлер](../../../../translated_images/snapshot.97750180ebcad73794a3594b36925eb5c8dbaac9e03fec7f9b974188c9ac63c7.bg.png)
+
+Проверете панела с дневника на събитията, за да видите дали някое събитие е отнело повече от 15 ms:
+
+![Edge дневник на събитията](../../../../translated_images/log.804026979f3707e00eebcfa028b2b5a88cec6292f858767bb6703afba65a7d9c.bg.png)
+
+✅ Опознайте вашия профайлер! Отворете инструментите за разработчици на този сайт и вижте дали има някакви тесни места. Кой е най-бавно зареждащият се ресурс? Най-бързият?
+
+## Проверки за профилиране
+
+Като цяло, има някои "проблемни области", които всеки уеб разработчик трябва да следи, когато изгражда сайт, за да избегне неприятни изненади, когато дойде време за внедряване в продукция.
+
+**Размери на ресурсите**: Уебът е станал "по-тежък" и следователно по-бавен през последните години. Част от тази тежест се дължи на използването на изображения.
+
+✅ Разгледайте [Архива на интернет](https://httparchive.org/reports/page-weight) за исторически поглед върху теглото на страниците и други.
+
+Добра практика е да се уверите, че вашите изображения са оптимизирани и доставени в правилния размер и резолюция за вашите потребители.
+
+**DOM обходи**: Браузърът трябва да изгради своя модел на обекти на документа (DOM) въз основа на кода, който пишете, така че е в интерес на добрата производителност на страницата да поддържате вашите тагове минимални, използвайки и стилизирайки само това, което страницата изисква. В този контекст, излишният CSS, свързан със страницата, може да бъде оптимизиран; стилове, които трябва да се използват само на една страница, не е необходимо да бъдат включени в основния стилов файл, например.
+
+**JavaScript**: Всеки JavaScript разработчик трябва да следи за скриптове, които блокират рендирането и трябва да бъдат заредени преди останалата част от DOM да може да бъде обходена и нарисувана в браузъра. Помислете за използване на `defer` с вашите вътрешни скриптове (както е направено в модула Terrarium).
+
+✅ Опитайте някои сайтове на [уебсайт за тест на скоростта на сайта](https://www.webpagetest.org/), за да научите повече за общите проверки, които се правят за определяне на производителността на сайта.
+
+Сега, когато имате представа как браузърът рендира ресурсите, които му изпращате, нека разгледаме последните няколко неща, които трябва да направите, за да завършите вашето разширение:
+
+### Създайте функция за изчисляване на цвета
+
+Работейки в `/src/index.js`, добавете функция, наречена `calculateColor()` след серията от `const` променливи, които сте задали, за да получите достъп до 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 } });
+}
+```
+
+Какво се случва тук? Вие подавате стойност (интензивността на въглерода) от API извикването, което завършихте в последния урок, и след това изчислявате колко близка е нейната стойност до индекса, представен в масива с цветове. След това изпращате тази най-близка стойност на цвета към chrome runtime.
+
+Chrome.runtime има [API](https://developer.chrome.com/extensions/runtime), който обработва всякакви фонови задачи, и вашето разширение го използва:
+
+> "Използвайте chrome.runtime API, за да извлечете фоновата страница, да върнете подробности за манифеста и да слушате и отговаряте на събития в жизнения цикъл на приложението или разширението. Можете също така да използвате този API, за да конвертирате относителния път на URL адресите в напълно квалифицирани URL адреси."
+
+✅ Ако разработвате това браузърно разширение за Edge, може да ви изненада, че използвате chrome API. По-новите версии на браузъра Edge работят на браузърния двигател Chromium, така че можете да използвате тези инструменти.
+
+> Забележка: ако искате да профилирате браузърно разширение, стартирайте инструментите за разработчици от самото разширение, тъй като то е отделен браузърен екземпляр.
+
+### Задайте цвят по подразбиране за иконата
+
+Сега, във функцията `init()`, задайте иконата да бъде обикновено зелена в началото, като отново извикате действието `updateIcon` на chrome:
+
+```JavaScript
+chrome.runtime.sendMessage({
+	action: 'updateIcon',
+		value: {
+			color: 'green',
+		},
+});
+```
+
+### Извикайте функцията, изпълнете извикването
+
+След това извикайте функцията, която току-що създадохте, като я добавите към обещанието, върнато от API CO2Signal:
+
+```JavaScript
+//let CO2...
+calculateColor(CO2);
+```
+
+И накрая, в `/dist/background.js`, добавете слушател за тези извиквания на фонови действия:
+
+```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);
+}
+```
+
+В този код добавяте слушател за всякакви съобщения, идващи към мениджъра на фонови задачи. Ако е наречен 'updateIcon', тогава следващият код се изпълнява, за да нарисува икона с правилния цвят, използвайки Canvas API.
+
+✅ Ще научите повече за Canvas API в [уроците за космическата игра](../../6-space-game/2-drawing-to-canvas/README.md).
+
+Сега, изградете отново вашето разширение (`npm run build`), обновете и стартирайте вашето разширение и наблюдавайте промяната на цвета. Добър момент ли е да направите някоя задача или да измиете съдовете? Сега знаете!
+
+Поздравления, създадохте полезно браузърно разширение и научихте повече за това как работи браузърът и как да профилирате неговата производителност.
+
+---
+
+## 🚀 Предизвикателство
+
+Разгледайте някои уебсайтове с отворен код, които съществуват отдавна, и въз основа на тяхната история в GitHub, вижте дали можете да определите как са били оптимизирани през годините за производителност, ако изобщо. Кой е най-често срещаният проблем?
+
+## Тест след лекцията
+
+[Тест след лекцията](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/28)
+
+## Преглед и самостоятелно обучение
+
+Помислете за абониране за [бюлетин за производителност](https://perf.email/)
+
+Разгледайте някои от начините, по които браузърите оценяват уеб производителността, като прегледате разделите за производителност в техните уеб инструменти. Откривате ли някакви значителни разлики?
+
+## Задание
+
+[Анализирайте сайт за производителност](assignment.md)
+
+---
+
+**Отказ от отговорност**:  
+Този документ е преведен с помощта на AI услуга за превод [Co-op Translator](https://github.com/Azure/co-op-translator). Въпреки че се стремим към точност, моля, имайте предвид, че автоматизираните преводи може да съдържат грешки или неточности. Оригиналният документ на неговия роден език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален човешки превод. Ние не носим отговорност за недоразумения или погрешни интерпретации, произтичащи от използването на този превод.
\ No newline at end of file
diff --git a/translations/bg/5-browser-extension/3-background-tasks-and-performance/assignment.md b/translations/bg/5-browser-extension/3-background-tasks-and-performance/assignment.md
new file mode 100644
index 00000000..e1abd8fd
--- /dev/null
+++ b/translations/bg/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:50:40+00:00",
+  "source_file": "5-browser-extension/3-background-tasks-and-performance/assignment.md",
+  "language_code": "bg"
+}
+-->
+# Анализ на сайт за производителност
+
+Предоставете подробен доклад за уебсайт, показващ областите, където производителността е проблематична. Анализирайте защо сайтът е бавен и какво можете да направите, за да го ускорите. Не разчитайте само на инструментите на браузъра, а направете проучване за други инструменти, които могат да помогнат за вашия доклад.
+
+## Критерии за оценка
+
+| Критерии | Отлично                                                                                                   | Задоволително              | Нуждае се от подобрение       |
+| -------- | --------------------------------------------------------------------------------------------------------- | -------------------------- | ----------------------------- |
+|          | Представен е доклад с подробности, извлечени не само от инструментите на браузъра, но и от външни инструменти, ако са налични | Представен е основен доклад | Представен е минимален доклад |
+
+---
+
+**Отказ от отговорност**:  
+Този документ е преведен с помощта на AI услуга за превод [Co-op Translator](https://github.com/Azure/co-op-translator). Въпреки че се стремим към точност, моля, имайте предвид, че автоматизираните преводи може да съдържат грешки или неточности. Оригиналният документ на неговия роден език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален човешки превод. Ние не носим отговорност за каквито и да е недоразумения или погрешни интерпретации, произтичащи от използването на този превод.
\ No newline at end of file
diff --git a/translations/bg/5-browser-extension/README.md b/translations/bg/5-browser-extension/README.md
new file mode 100644
index 00000000..0b7e2a17
--- /dev/null
+++ b/translations/bg/5-browser-extension/README.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "b121a279a6ab39878491f3e572673515",
+  "translation_date": "2025-08-27T22:41:05+00:00",
+  "source_file": "5-browser-extension/README.md",
+  "language_code": "bg"
+}
+-->
+# Създаване на браузър разширение
+
+Създаването на браузър разширения е забавен и интересен начин да се замислите за производителността на вашите приложения, докато създавате различен тип уеб ресурс. Този модул включва уроци за това как работят браузърите, как да разположите браузър разширение, как да създадете форма, да извикате API, да използвате локално хранилище и как да оцените производителността на вашия уебсайт и да я подобрите.
+
+Ще създадете браузър разширение, което работи на Edge, Chrome и Firefox. Това разширение, което е като мини уебсайт, пригоден за много специфична задача, проверява [C02 Signal API](https://www.co2signal.com) за използването на електричество и въглеродната интензивност в даден регион и връща информация за въглеродния отпечатък на региона.
+
+Това разширение може да бъде извикано от потребител, след като въведе API ключ и код на регион във форма, за да определи местното използване на електричество и по този начин да предостави данни, които могат да повлияят на решенията на потребителя относно електричеството. Например, може да е за предпочитане да се отложи използването на сушилня за дрехи (дейност с висока въглеродна интензивност) по време на период на високо електрическо натоварване във вашия регион.
+
+### Теми
+
+1. [За браузъра](1-about-browsers/README.md)
+2. [Форми и локално хранилище](2-forms-browsers-local-storage/README.md)
+3. [Фонови задачи и производителност](3-background-tasks-and-performance/README.md)
+
+### Благодарности
+
+![зелено браузър разширение](../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.bg.png)
+
+## Благодарности
+
+Идеята за този уеб въглероден тригер беше предложена от Асим Хюсеин, ръководител в Microsoft на екипа за зелена облачна адвокация и автор на [Зелените принципи](https://principles.green/). Първоначално това беше [проект за уебсайт](https://github.com/jlooper/green).
+
+Структурата на браузър разширението беше повлияна от [COVID разширението на Адебола Адениран](https://github.com/onedebos/covtension).
+
+Концепцията зад системата с икони „точка“ беше предложена от структурата на иконите на браузър разширението [Energy Lollipop](https://energylollipop.com/) за емисиите в Калифорния.
+
+Тези уроци бяха написани с ♥️ от [Джен Лупър](https://www.twitter.com/jenlooper)
+
+---
+
+**Отказ от отговорност**:  
+Този документ е преведен с помощта на AI услуга за превод [Co-op Translator](https://github.com/Azure/co-op-translator). Въпреки че се стремим към точност, моля, имайте предвид, че автоматизираните преводи може да съдържат грешки или неточности. Оригиналният документ на неговия роден език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален човешки превод. Ние не носим отговорност за недоразумения или погрешни интерпретации, произтичащи от използването на този превод.
\ No newline at end of file
diff --git a/translations/bg/5-browser-extension/solution/README.md b/translations/bg/5-browser-extension/solution/README.md
new file mode 100644
index 00000000..4a58b258
--- /dev/null
+++ b/translations/bg/5-browser-extension/solution/README.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "fab4e6b4f0efcd587a9029d82991f597",
+  "translation_date": "2025-08-27T22:51:06+00:00",
+  "source_file": "5-browser-extension/solution/README.md",
+  "language_code": "bg"
+}
+-->
+# Разширение за браузър Carbon Trigger: Завършен код
+
+Използвайки API на C02 Signal от tmrow за проследяване на електрическата консумация, създайте разширение за браузър, което да ви напомня директно в браузъра колко интензивна е електрическата консумация във вашия регион. Използването на това разширение ще ви помогне да вземате информирани решения за вашите дейности въз основа на тази информация.
+
+![екранна снимка на разширението](../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.bg.png)
+
+## Първи стъпки
+
+Трябва да имате инсталиран [npm](https://npmjs.com). Изтеглете копие на този код в папка на вашия компютър.
+
+Инсталирайте всички необходими пакети:
+
+```
+npm install
+```
+
+Създайте разширението с помощта на webpack:
+
+```
+npm run build
+```
+
+За да го инсталирате в Edge, използвайте менюто с „три точки“ в горния десен ъгъл на браузъра, за да намерите панела „Разширения“. Оттам изберете „Load Unpacked“, за да заредите ново разширение. Отворете папката „dist“ при подканата и разширението ще се зареди. За да го използвате, ще ви е необходим API ключ за API на CO2 Signal ([вземете го тук чрез имейл](https://www.co2signal.com/) - въведете вашия имейл в полето на тази страница) и [код за вашия регион](http://api.electricitymap.org/v3/zones), съответстващ на [Electricity Map](https://www.electricitymap.org/map) (например в Бостън използвам „US-NEISO“).
+
+![инсталиране](../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.bg.png)
+
+След като въведете API ключа и региона в интерфейса на разширението, цветната точка в лентата на разширението на браузъра трябва да се промени, за да отрази енергийната консумация във вашия регион и да ви даде насоки за това кои енергоемки дейности са подходящи за изпълнение. Концепцията зад тази система с „точка“ ми беше вдъхновена от [разширението Energy Lollipop](https://energylollipop.com/) за емисиите в Калифорния.
+
+---
+
+**Отказ от отговорност**:  
+Този документ е преведен с помощта на AI услуга за превод [Co-op Translator](https://github.com/Azure/co-op-translator). Въпреки че се стремим към точност, моля, имайте предвид, че автоматизираните преводи може да съдържат грешки или неточности. Оригиналният документ на неговия роден език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален човешки превод. Ние не носим отговорност за недоразумения или погрешни интерпретации, произтичащи от използването на този превод.
\ No newline at end of file
diff --git a/translations/bg/5-browser-extension/solution/translation/README.es.md b/translations/bg/5-browser-extension/solution/translation/README.es.md
new file mode 100644
index 00000000..459e46cc
--- /dev/null
+++ b/translations/bg/5-browser-extension/solution/translation/README.es.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "cbaf73f94a9ab4c680a10ef871e92948",
+  "translation_date": "2025-08-27T22:51:35+00:00",
+  "source_file": "5-browser-extension/solution/translation/README.es.md",
+  "language_code": "bg"
+}
+-->
+# Разширение за браузър Carbon Trigger: Пълен код
+
+Използвайки API за CO2 Signal от tmrow за проследяване на потреблението на електричество, създайте разширение за браузър, което да ви напомня директно в браузъра за потреблението на електричество във вашия регион. Използването на това разширение ще ви помогне да вземате решения за вашите дейности въз основа на тази информация.
+
+![екранна снимка на разширението](../../../../../translated_images/extension-screenshot.352c4c3ba54e4041ad2f6af749d562cc5705f527b5826efd53d11c3528f5ae45.bg.png)
+
+## Започване
+
+Трябва да имате инсталиран [npm](https://npmjs.com). Изтеглете копие на този код в папка на вашия компютър.
+
+Инсталирайте всички необходими пакети:
+
+```
+npm install
+```
+
+Създайте разширението с помощта на webpack:
+
+```
+npm run build
+```
+
+За да го инсталирате в Edge, използвайте менюто с 'три точки' в горния десен ъгъл на браузъра, за да намерите панела Разширения. Оттам изберете 'Зареди разопаковано', за да добавите ново разширение. Отворете папката 'dist', когато бъдете подканени, и разширението ще бъде заредено. За да го използвате, ще ви е необходим API ключ за CO2 Signal ([вземете го тук чрез имейл](https://www.co2signal.com/) - въведете вашия имейл в полето на тази страница) и [код за вашия регион](http://api.electricitymap.org/v3/zones), съответстващ на [Картата на електричеството](https://www.electricitymap.org/map) (например в Бостън използвам 'US-NEISO').
+
+![инсталиране](../../../../../translated_images/install-on-edge.8bd0ee3ca7dcda1c5334b5195603a43c864e3b38d088b03d57376d25e77b9459.bg.png)
+
+След като въведете API ключа и региона в интерфейса на разширението, цветната точка в лентата на разширението на браузъра трябва да се промени, за да отрази потреблението на енергия във вашия регион и да ви даде индикатор за подходящите дейности с високо енергийно потребление. Концепцията зад тази система с "точки" ми беше вдъхновена от [разширението Energy Lollipop](https://energylollipop.com/) за емисиите в Калифорния.
+
+---
+
+**Отказ от отговорност**:  
+Този документ е преведен с помощта на AI услуга за превод [Co-op Translator](https://github.com/Azure/co-op-translator). Въпреки че се стремим към точност, моля, имайте предвид, че автоматизираните преводи може да съдържат грешки или неточности. Оригиналният документ на неговия роден език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален човешки превод. Не носим отговорност за недоразумения или погрешни интерпретации, произтичащи от използването на този превод.
\ No newline at end of file
diff --git a/translations/bg/5-browser-extension/solution/translation/README.fr.md b/translations/bg/5-browser-extension/solution/translation/README.fr.md
new file mode 100644
index 00000000..2c95d225
--- /dev/null
+++ b/translations/bg/5-browser-extension/solution/translation/README.fr.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "9361268ca430b2579375009e1eceb5e5",
+  "translation_date": "2025-08-27T22:53:11+00:00",
+  "source_file": "5-browser-extension/solution/translation/README.fr.md",
+  "language_code": "bg"
+}
+-->
+# Разширение за браузър Carbon Trigger: Завършен код
+
+Използвайки API-то C02 Signal на tmrow за проследяване на потреблението на електроенергия, създайте разширение за браузър, което да ви напомня директно в браузъра за потреблението на електроенергия във вашия регион. Използването на това разширение ще ви помогне да вземате информирани решения за вашите дейности въз основа на тази информация.
+
+![екранна снимка на разширението](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.bg.png)
+
+## Начало
+
+Трябва да имате инсталиран [npm](https://npmjs.com). Изтеглете копие на този код в папка на вашия компютър.
+
+Инсталирайте всички необходими пакети:
+
+```
+npm install
+```
+
+Създайте разширението с помощта на webpack:
+
+```
+npm run build
+```
+
+За да го инсталирате на Edge, използвайте менюто с „три точки“ в горния десен ъгъл на браузъра, за да намерите панела „Разширения“. Оттам изберете „Зареди разархивирано разширение“, за да добавите ново разширение. Отворете папката 'dist', когато бъдете подканени, и разширението ще се зареди. За да го използвате, ще ви е необходим API ключ за CO2 Signal ([вземете го тук по имейл](https://www.co2signal.com/) - въведете вашия имейл в полето на тази страница) и [код за вашия регион](http://api.electricitymap.org/v3/zones), който съответства на [Картата на електроенергията](https://www.electricitymap.org/map) (например за Бостън използвам 'US-NEISO').
+
+![инсталация](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.bg.png)
+
+След като въведете API ключа и региона в интерфейса на разширението, цветната точка в лентата на разширенията на браузъра трябва да се промени, за да отрази потреблението на енергия във вашия регион. Това ще ви даде индикатор за енергоемките дейности, които е подходящо да извършвате. Концепцията зад тази система с „точки“ ми беше вдъхновена от [разширението Energy Lollipop](https://energylollipop.com/) за емисиите в Калифорния.
+
+---
+
+**Отказ от отговорност**:  
+Този документ е преведен с помощта на AI услуга за превод [Co-op Translator](https://github.com/Azure/co-op-translator). Въпреки че се стремим към точност, моля, имайте предвид, че автоматизираните преводи може да съдържат грешки или неточности. Оригиналният документ на неговия роден език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален човешки превод. Ние не носим отговорност за недоразумения или погрешни интерпретации, произтичащи от използването на този превод.
\ No newline at end of file
diff --git a/translations/bg/5-browser-extension/solution/translation/README.hi.md b/translations/bg/5-browser-extension/solution/translation/README.hi.md
new file mode 100644
index 00000000..51aad1bc
--- /dev/null
+++ b/translations/bg/5-browser-extension/solution/translation/README.hi.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "dd58ae1b7707034f055718c1b68bc8de",
+  "translation_date": "2025-08-27T22:52:08+00:00",
+  "source_file": "5-browser-extension/solution/translation/README.hi.md",
+  "language_code": "bg"
+}
+-->
+# Carbon Trigger Browser Extension: Завършен код
+
+Използвайки API на CO2 Signal от tmrow за проследяване на потреблението на електроенергия, създаваме браузърно разширение, което да ви напомня колко натоварено е потреблението на електроенергия във вашия регион. Използването на това разширение ще ви помогне да вземате решения за вашите дейности въз основа на тази информация.
+
+![Снимка на разширението](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.bg.png)
+
+## Начало
+
+Трябва да инсталирате [npm](https://npmjs.com). Изтеглете копие на този код в папка на вашия компютър.
+
+Инсталирайте всички необходими пакети:
+
+```
+npm install
+```
+
+Създайте разширението с помощта на Webpack:
+
+```
+npm run build
+```
+
+За да го инсталирате в Edge, използвайте менюто с „три точки“ в горния десен ъгъл на браузъра, за да намерите панела за разширения. Оттам изберете „Load unpacked“ (Зареди некомпилирано разширение). В отворения прозорец изберете папката „dist“ и разширението ще бъде заредено. За да го използвате, ще ви е необходим API ключ за CO2 Signal ([получете го тук чрез имейл](https://www.co2signal.com/) – въведете вашия имейл в полето на страницата) и [код за вашия регион](http://api.electricitymap.org/v3/zones) от [Electricity Map](https://www.electricitymap.org/map) (например, за Бостън използвам „US-NEISO“).
+
+![инсталиране](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.bg.png)
+
+След като въведете API ключа и региона в интерфейса на разширението, цветната точка в лентата на браузърните разширения трябва да се промени, за да отрази потреблението на енергия във вашия регион. Това ще ви даде индикатор за това кои енергоемки дейности са подходящи за изпълнение. Концепцията за тази „точкова“ система ми беше вдъхновена от [Energy Lollipop Extension](https://energylollipop.com/) за емисиите в Калифорния.
+
+---
+
+**Отказ от отговорност**:  
+Този документ е преведен с помощта на AI услуга за превод [Co-op Translator](https://github.com/Azure/co-op-translator). Въпреки че се стремим към точност, моля, имайте предвид, че автоматизираните преводи може да съдържат грешки или неточности. Оригиналният документ на неговия роден език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален човешки превод. Ние не носим отговорност за каквито и да било недоразумения или погрешни интерпретации, произтичащи от използването на този превод.
\ No newline at end of file
diff --git a/translations/bg/5-browser-extension/solution/translation/README.it.md b/translations/bg/5-browser-extension/solution/translation/README.it.md
new file mode 100644
index 00000000..70487985
--- /dev/null
+++ b/translations/bg/5-browser-extension/solution/translation/README.it.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "9a6b22a2eff0f499b66236be973b24ad",
+  "translation_date": "2025-08-27T22:53:43+00:00",
+  "source_file": "5-browser-extension/solution/translation/README.it.md",
+  "language_code": "bg"
+}
+-->
+# Разширение за браузър Carbon Trigger: код за стартиране
+
+Ще използваме API Signal CO2 на tmrow, за да следим потреблението на електричество и да създадем разширение за браузър, което да предоставя директно напомняне в браузъра за това колко интензивно е потреблението на електричество в даден регион. Използването на това специално разширение ще помогне да се оценят дейностите въз основа на тази информация.
+
+![екранна снимка на разширението](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.bg.png)
+
+## Начало
+
+Необходимо е [npm](https://npmjs.com) да бъде инсталиран. Изтеглете копие на този код в папка на вашия компютър.
+
+Инсталирайте всички необходими пакети:
+
+```
+npm install
+```
+
+Създайте разширението с помощта на webpack:
+
+```
+npm run build
+```
+
+За да го инсталирате в Edge, използвайте менюто с "три точки" в горния десен ъгъл на браузъра, за да намерите панела за разширения. Ако не е активиран, включете Режим за разработчици (в долния ляв ъгъл). Изберете "Зареди разархивирано", за да добавите ново разширение. Отворете папката "dist" в диалоговия прозорец и разширението ще бъде заредено. За да го използвате, ще ви е необходим API ключ за CO2 Signal API (можете [да го получите тук чрез имейл](https://www.co2signal.com/) - въведете вашия имейл в полето на тази страница) и [код за вашия регион](http://api.electricitymap.org/v3/zones), съответстващ на [електрическата карта](https://www.electricitymap.org/map) (например в Бостън, "US-NEISO").
+
+![инсталация](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.bg.png)
+
+След като API ключът и регионът бъдат въведени в интерфейса на разширението, цветната точка в лентата на разширението на браузъра трябва да се промени, за да отразява потреблението на енергия в региона и да предостави насоки за това кои дейности с висока консумация на енергия биха били подходящи за изпълнение. Концепцията зад тази система с "точки" е вдъхновена от [разширението Energy Lollipop](https://energylollipop.com/) за емисиите в Калифорния.
+
+---
+
+**Отказ от отговорност**:  
+Този документ е преведен с помощта на AI услуга за превод [Co-op Translator](https://github.com/Azure/co-op-translator). Въпреки че се стремим към точност, моля, имайте предвид, че автоматичните преводи може да съдържат грешки или неточности. Оригиналният документ на неговия изходен език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален превод от човек. Не носим отговорност за каквито и да било недоразумения или погрешни интерпретации, произтичащи от използването на този превод.
\ No newline at end of file
diff --git a/translations/bg/5-browser-extension/solution/translation/README.ja.md b/translations/bg/5-browser-extension/solution/translation/README.ja.md
new file mode 100644
index 00000000..6656ad5f
--- /dev/null
+++ b/translations/bg/5-browser-extension/solution/translation/README.ja.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "3f5e6821e0febccfc5d05e7c944d9e3d",
+  "translation_date": "2025-08-27T22:54:18+00:00",
+  "source_file": "5-browser-extension/solution/translation/README.ja.md",
+  "language_code": "bg"
+}
+-->
+# Разширение за браузър Carbon Trigger: Завършен код
+
+Създайте разширение за браузър, което използва API на CO2 Signal от tmrow, за да следи потреблението на електроенергия във вашия регион и да го показва като напомняне директно в браузъра. Това разширение може да се използва, за да вземате информирани решения за вашите дейности въз основа на тази информация.
+
+![екранна снимка на разширението](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.bg.png)
+
+## Въведение
+
+Трябва да имате инсталиран [npm](https://npmjs.com). Изтеглете копие на този код в папка на вашия компютър.
+
+Инсталирайте всички необходими пакети.
+
+```
+npm install
+```
+
+Създайте разширението с помощта на webpack.
+
+```
+npm run build
+```
+
+За да го инсталирате в Edge, намерете панела „Разширения“ от менюто с „три точки“ в горния десен ъгъл на браузъра. Оттам изберете „Load Unpacked“, за да заредите новото разширение. Когато бъдете подканени, отворете папката „dist“, за да заредите разширението. За да го използвате, ще ви е необходим API ключ за CO2 Signal ([вземете го тук чрез имейл](https://www.co2signal.com/) - въведете имейла си в полето на тази страница) и [код за вашия регион](http://api.electricitymap.org/v3/zones), съвместим с [Electricity Map](https://www.electricitymap.org/map) (например за Бостън използвайте 'US-NEISO').
+
+![инсталиране](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.bg.png)
+
+След като въведете API ключа и региона в интерфейса на разширението, цветна точка, която се показва в лентата на разширенията на браузъра, ще се променя, за да отразява потреблението на енергия във вашия регион. Това ще ви помогне да определите кои дейности, изискващи енергия, са подходящи в момента. Концепцията за тази „точкова“ система е вдъхновена от [Energy Lollipop extension](https://energylollipop.com/) за емисиите в Калифорния.
+
+---
+
+**Отказ от отговорност**:  
+Този документ е преведен с помощта на AI услуга за превод [Co-op Translator](https://github.com/Azure/co-op-translator). Въпреки че се стремим към точност, моля, имайте предвид, че автоматизираните преводи може да съдържат грешки или неточности. Оригиналният документ на неговия роден език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален човешки превод. Ние не носим отговорност за недоразумения или погрешни интерпретации, произтичащи от използването на този превод.
\ No newline at end of file
diff --git a/translations/bg/5-browser-extension/solution/translation/README.ms.md b/translations/bg/5-browser-extension/solution/translation/README.ms.md
new file mode 100644
index 00000000..40913689
--- /dev/null
+++ b/translations/bg/5-browser-extension/solution/translation/README.ms.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "21b364c158c8e4f698de65eeac16c9fe",
+  "translation_date": "2025-08-27T22:52:39+00:00",
+  "source_file": "5-browser-extension/solution/translation/README.ms.md",
+  "language_code": "bg"
+}
+-->
+# Разширение за браузър Carbon Trigger: Пълен код
+
+Използвайки API на CO2 Signal от tmrow за проследяване на електрическата консумация, създайте разширение за браузър, което ще ви предупреждава за нивото на електрическа консумация във вашия регион. Това разширение ще ви помогне да вземате информирани решения относно вашите дейности въз основа на тази информация.
+
+![екранна снимка на разширението за браузър](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.bg.png)
+
+## Как да започнете
+
+Трябва да имате инсталиран [npm](https://npmjs.com). Изтеглете копие на този код в папка на вашия компютър.
+
+Инсталирайте всички необходими пакети:
+
+```
+npm install
+```
+
+Създайте разширението с помощта на webpack:
+
+```
+npm run build
+```
+
+За да го инсталирате в Edge, използвайте менюто с „три точки“ в горния десен ъгъл на браузъра, за да намерите панела „Разширения“. Оттам изберете „Load Unpacked“, за да заредите новото разширение. Отворете папката 'dist', когато бъдете подканени, и разширението ще бъде заредено. За да го използвате, ще ви е необходим API ключ за CO2 Signal API ([вземете го тук чрез имейл](https://www.co2signal.com/) - въведете вашия имейл в полето на страницата) и [код за вашия регион](http://api.electricitymap.org/v3/zones), който съответства на [Electricity Map](https://www.electricitymap.org/map) (например за Бостън използвам 'US-NEISO').
+
+![изтегляне](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.bg.png)
+
+След като въведете API ключа и региона в интерфейса на разширението, цветната точка в лентата на разширението на браузъра ще се променя, за да отразява енергийната консумация във вашия регион и ще ви дава насоки за подходящи дейности с висока консумация. Концепцията за системата с „точки“ ми беше вдъхновена от [разширението за браузър Energy Lollipop](https://energylollipop.com/) за емисиите в Калифорния.
+
+---
+
+**Отказ от отговорност**:  
+Този документ е преведен с помощта на AI услуга за превод [Co-op Translator](https://github.com/Azure/co-op-translator). Въпреки че се стремим към точност, моля, имайте предвид, че автоматизираните преводи може да съдържат грешки или неточности. Оригиналният документ на неговия роден език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален човешки превод. Ние не носим отговорност за недоразумения или погрешни интерпретации, произтичащи от използването на този превод.
\ No newline at end of file
diff --git a/translations/bg/5-browser-extension/start/README.md b/translations/bg/5-browser-extension/start/README.md
new file mode 100644
index 00000000..b96e49b5
--- /dev/null
+++ b/translations/bg/5-browser-extension/start/README.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "26fd39046d264ba185dcb086d3a8cf3e",
+  "translation_date": "2025-08-27T22:45:22+00:00",
+  "source_file": "5-browser-extension/start/README.md",
+  "language_code": "bg"
+}
+-->
+# Carbon Trigger Browser Extension: Начален код
+
+Използвайки API на tmrow за CO2 Signal, създайте разширение за браузър, което да ви напомня директно в браузъра колко интензивно е електрическото потребление във вашия регион. Използването на това разширение ще ви помогне да вземате информирани решения за вашите дейности въз основа на тази информация.
+
+![екранна снимка на разширението](../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.bg.png)
+
+## Първи стъпки
+
+Ще трябва да имате инсталиран [npm](https://npmjs.com). Изтеглете копие на този код в папка на вашия компютър.
+
+Инсталирайте всички необходими пакети:
+
+```
+npm install
+```
+
+Създайте разширението с помощта на webpack:
+
+```
+npm run build
+```
+
+За да го инсталирате в Edge, използвайте менюто с „три точки“ в горния десен ъгъл на браузъра, за да намерите панела с разширения. Оттам изберете „Load Unpacked“, за да заредите ново разширение. Отворете папката 'dist', когато бъдете подканени, и разширението ще се зареди. За да го използвате, ще ви е необходим API ключ за API на CO2 Signal ([вземете го тук чрез имейл](https://www.co2signal.com/) - въведете вашия имейл в полето на тази страница) и [код за вашия регион](http://api.electricitymap.org/v3/zones), съответстващ на [Electricity Map](https://www.electricitymap.org/map) (например, в Бостън използвам 'US-NEISO').
+
+![инсталиране](../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.bg.png)
+
+След като въведете API ключа и региона в интерфейса на разширението, цветната точка в лентата на разширението на браузъра трябва да се промени, за да отрази потреблението на енергия във вашия регион и да ви даде насоки за това кои енергоемки дейности са подходящи за извършване. Концепцията зад тази система с „точка“ ми беше вдъхновена от [Energy Lollipop разширението](https://energylollipop.com/) за емисиите в Калифорния.
+
+---
+
+**Отказ от отговорност**:  
+Този документ е преведен с помощта на AI услуга за превод [Co-op Translator](https://github.com/Azure/co-op-translator). Въпреки че се стремим към точност, моля, имайте предвид, че автоматизираните преводи може да съдържат грешки или неточности. Оригиналният документ на неговия роден език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален човешки превод. Ние не носим отговорност за каквито и да е недоразумения или погрешни интерпретации, произтичащи от използването на този превод.
\ No newline at end of file
diff --git a/translations/bg/6-space-game/1-introduction/README.md b/translations/bg/6-space-game/1-introduction/README.md
new file mode 100644
index 00000000..70469c18
--- /dev/null
+++ b/translations/bg/6-space-game/1-introduction/README.md
@@ -0,0 +1,238 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "d9da6dc61fb712b29f65e108c79b8a5d",
+  "translation_date": "2025-08-27T22:24:02+00:00",
+  "source_file": "6-space-game/1-introduction/README.md",
+  "language_code": "bg"
+}
+-->
+# Създаване на космическа игра Част 1: Въведение
+
+![видео](../../../../6-space-game/images/pewpew.gif)
+
+## Предварителен тест
+
+[Предварителен тест](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/29)
+
+### Наследяване и композиция в разработката на игри
+
+В предишните уроци не беше необходимо да се замисляте много за архитектурата на приложенията, които създавахте, тъй като проектите бяха с малък обхват. Но когато приложенията ви нарастват по размер и сложност, архитектурните решения стават по-важни. Има два основни подхода за създаване на по-големи приложения в JavaScript: *композиция* или *наследяване*. И двата подхода имат своите предимства и недостатъци, но нека ги обясним в контекста на игра.
+
+✅ Една от най-известните книги за програмиране е свързана с [дизайн модели](https://en.wikipedia.org/wiki/Design_Patterns).
+
+В една игра имате `обекти на играта`, които са обекти, съществуващи на екрана. Това означава, че те имат местоположение в декартова координатна система, характеризирано с `x` и `y` координати. Докато разработвате игра, ще забележите, че всички обекти на играта имат стандартни свойства, общи за всяка игра, която създавате, а именно елементи, които са:
+
+- **базирани на местоположение** Повечето, ако не всички, елементи на играта са базирани на местоположение. Това означава, че те имат местоположение, `x` и `y`.
+- **подвижни** Това са обекти, които могат да се преместят на ново местоположение. Обикновено това е герой, чудовище или NPC (неигрови персонаж), но не например статичен обект като дърво.
+- **самоунищожаващи се** Това са обекти, които съществуват само за определен период от време, преди да се подготвят за изтриване. Обикновено това се представя чрез булева стойност `dead` или `destroyed`, която сигнализира на игровия двигател, че този обект вече не трябва да се визуализира.
+- **с временно ограничение** 'Временно ограничение' е типично свойство за краткотрайни обекти. Типичен пример е текст или графичен ефект като експлозия, който трябва да се вижда само за няколко милисекунди.
+
+✅ Помислете за игра като Pac-Man. Можете ли да идентифицирате четирите типа обекти, изброени по-горе, в тази игра?
+
+### Изразяване на поведение
+
+Всичко, което описахме по-горе, представлява поведение, което обектите на играта могат да имат. Как можем да кодираме това? Можем да изразим това поведение като методи, свързани с класове или обекти.
+
+**Класове**
+
+Идеята е да използваме `класове` в комбинация с `наследяване`, за да добавим определено поведение към даден клас.
+
+✅ Наследяването е важна концепция за разбиране. Научете повече от [статията на MDN за наследяване](https://developer.mozilla.org/docs/Web/JavaScript/Inheritance_and_the_prototype_chain).
+
+Изразено чрез код, обект на играта обикновено изглежда така:
+
+```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();
+```
+
+✅ Отделете няколко минути, за да си представите герой от Pac-Man (например Inky, Pinky или Blinky) и как би изглеждал в JavaScript.
+
+**Композиция**
+
+Друг начин за управление на наследяването на обекти е чрез използване на *композиция*. Тогава обектите изразяват своето поведение по следния начин:
+
+```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'); 
+```
+
+**Кой модел да използвам?**
+
+Изборът зависи от вас. JavaScript поддържа и двата подхода.
+
+--
+
+Друг модел, често срещан в разработката на игри, се занимава с проблема за управлението на потребителското изживяване и производителността на играта.
+
+## Модел Pub/sub
+
+✅ Pub/Sub означава 'публикуване-абониране'
+
+Този модел разглежда идеята, че различните части на вашето приложение не трябва да знаят една за друга. Защо? Това прави много по-лесно да се разбере какво се случва като цяло, ако различните части са разделени. Също така улеснява внезапната промяна на поведението, ако е необходимо. Как постигаме това? Чрез установяване на някои концепции:
+
+- **съобщение**: Съобщението обикновено е текстов низ, придружен от опционален полезен товар (част от данни, която уточнява за какво е съобщението). Типично съобщение в игра може да бъде `KEY_PRESSED_ENTER`.
+- **публикуващ**: Този елемент *публикува* съобщение и го изпраща до всички абонати.
+- **абонат**: Този елемент *слуша* конкретни съобщения и изпълнява определена задача в резултат на получаването на това съобщение, като например изстрелване на лазер.
+
+Реализацията е доста малка по размер, но това е много мощен модел. Ето как може да бъде реализиран:
+
+```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))
+    }
+  }
+}
+
+```
+
+За да използваме горния код, можем да създадем много малка реализация:
+
+```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)
+  }
+});
+```
+
+Горе свързваме събитие от клавиатурата, `ArrowLeft`, и изпращаме съобщението `HERO_MOVE_LEFT`. Слушаме това съобщение и преместваме `hero` в резултат. Силата на този модел е, че слушателят на събития и героят не знаят един за друг. Можете да пренасочите `ArrowLeft` към клавиша `A`. Освен това е възможно да направите нещо напълно различно при `ArrowLeft`, като направите няколко редакции на функцията `on` на eventEmitter:
+
+```javascript
+eventEmitter.on(Messages.HERO_MOVE_LEFT, () => {
+  hero.move(5,0);
+});
+```
+
+Когато нещата станат по-сложни с разрастването на играта ви, този модел остава със същата сложност, а кодът ви остава чист. Силно се препоръчва да възприемете този модел.
+
+---
+
+## 🚀 Предизвикателство
+
+Помислете как моделът pub-sub може да подобри играта. Кои части трябва да излъчват събития и как играта трябва да реагира на тях? Сега е вашият шанс да бъдете креативни, като измислите нова игра и как нейните части могат да се държат.
+
+## Финален тест
+
+[Финален тест](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/30)
+
+## Преглед и самостоятелно обучение
+
+Научете повече за Pub/Sub, като [прочетете за него](https://docs.microsoft.com/azure/architecture/patterns/publisher-subscriber/?WT.mc_id=academic-77807-sagibbon).
+
+## Задание
+
+[Създайте макет на игра](assignment.md)
+
+---
+
+**Отказ от отговорност**:  
+Този документ е преведен с помощта на AI услуга за превод [Co-op Translator](https://github.com/Azure/co-op-translator). Въпреки че се стремим към точност, моля, имайте предвид, че автоматизираните преводи може да съдържат грешки или неточности. Оригиналният документ на неговия роден език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален човешки превод. Ние не носим отговорност за недоразумения или погрешни интерпретации, произтичащи от използването на този превод.
\ No newline at end of file
diff --git a/translations/bg/6-space-game/1-introduction/assignment.md b/translations/bg/6-space-game/1-introduction/assignment.md
new file mode 100644
index 00000000..651059a0
--- /dev/null
+++ b/translations/bg/6-space-game/1-introduction/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "009bdedee9cc82988264be8cb31f9bf4",
+  "translation_date": "2025-08-27T22:24:56+00:00",
+  "source_file": "6-space-game/1-introduction/assignment.md",
+  "language_code": "bg"
+}
+-->
+# Създайте макет на игра
+
+## Инструкции
+
+Използвайки примерите с код от урока, създайте представяне на игра, която ви харесва. Тя трябва да бъде проста игра, но целта е да използвате или шаблона с класове, или този с композиция, както и модела pub/sub, за да покажете как една игра може да се стартира. Бъдете креативни!
+
+## Критерии за оценка
+
+| Критерий | Отлично                                                | Задоволително                                        | Нуждае се от подобрение                             |
+| -------- | ------------------------------------------------------ | --------------------------------------------------- | -------------------------------------------------- |
+|          | Три елемента са поставени на екрана и манипулирани     | Два елемента са поставени на екрана и манипулирани  | Един елемент е поставен на екрана и манипулиран    |
+
+---
+
+**Отказ от отговорност**:  
+Този документ е преведен с помощта на AI услуга за превод [Co-op Translator](https://github.com/Azure/co-op-translator). Въпреки че се стремим към точност, моля, имайте предвид, че автоматизираните преводи може да съдържат грешки или неточности. Оригиналният документ на неговия роден език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален човешки превод. Ние не носим отговорност за недоразумения или погрешни интерпретации, произтичащи от използването на този превод.
\ No newline at end of file
diff --git a/translations/bg/6-space-game/2-drawing-to-canvas/README.md b/translations/bg/6-space-game/2-drawing-to-canvas/README.md
new file mode 100644
index 00000000..189df107
--- /dev/null
+++ b/translations/bg/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:19:54+00:00",
+  "source_file": "6-space-game/2-drawing-to-canvas/README.md",
+  "language_code": "bg"
+}
+-->
+# Създаване на космическа игра, част 2: Рисуване на герой и чудовища върху Canvas
+
+## Предварителен тест
+
+[Предварителен тест](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/31)
+
+## Canvas
+
+Canvas е HTML елемент, който по подразбиране няма съдържание; той е празно платно. Трябва да добавите съдържание, като рисувате върху него.
+
+✅ Прочетете [повече за Canvas API](https://developer.mozilla.org/docs/Web/API/Canvas_API) на MDN.
+
+Ето как обикновено се декларира като част от тялото на страницата:
+
+```html
+<canvas id="myCanvas" width="200" height="100"></canvas>
+```
+
+Горе задаваме `id`, `width` и `height`.
+
+- `id`: задайте го, за да можете да получите референция, когато трябва да взаимодействате с него.
+- `width`: това е ширината на елемента.
+- `height`: това е височината на елемента.
+
+## Рисуване на прости геометрични фигури
+
+Canvas използва картезианска координатна система за рисуване. Следователно използва x-ос и y-ос, за да изрази местоположението на нещо. Местоположението `0,0` е горният ляв ъгъл, а долният десен е това, което сте задали като WIDTH и HEIGHT на платното.
+
+![мрежата на Canvas](../../../../translated_images/canvas_grid.5f209da785ded492a01ece440e3032afe51efa500cc2308e5ea4252487ceaf0b.bg.png)  
+> Изображение от [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes)
+
+За да рисувате върху елемента Canvas, трябва да преминете през следните стъпки:
+
+1. **Получете референция** към елемента Canvas.
+1. **Получете референция** към елемента Context, който се намира върху Canvas.
+1. **Извършете операция за рисуване** с помощта на елемента Context.
+
+Кодът за горните стъпки обикновено изглежда така:
+
+```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 основно се фокусира върху 2D форми, но можете също да рисувате 3D елементи на уеб страница; за това може да използвате [WebGL API](https://developer.mozilla.org/docs/Web/API/WebGL_API).
+
+С Canvas API можете да рисувате всякакви неща, като:
+
+- **Геометрични фигури**: вече показахме как да нарисувате правоъгълник, но има много повече, което можете да нарисувате.
+- **Текст**: можете да нарисувате текст с всякакъв шрифт и цвят, който пожелаете.
+- **Изображения**: можете да нарисувате изображение, базирано на актив като .jpg или .png например.
+
+✅ Опитайте! Знаете как да нарисувате правоъгълник, можете ли да нарисувате кръг на страницата? Разгледайте някои интересни рисунки с Canvas в CodePen. Ето [особено впечатляващ пример](https://codepen.io/dissimulate/pen/KrAwx).
+
+## Зареждане и рисуване на изображение
+
+Можете да заредите изображение, като създадете обект `Image` и зададете неговото свойство `src`. След това слушате събитието `load`, за да знаете кога е готово за използване. Кодът изглежда така:
+
+### Зареждане на актив
+
+```javascript
+const img = new Image();
+img.src = 'path/to/my/image.png';
+img.onload = () => {
+  // image loaded and ready to be used
+}
+```
+
+### Шаблон за зареждане на актив
+
+Препоръчително е да обвиете горното в конструкция като тази, за да е по-лесно за използване и да се опитате да го манипулирате само когато е напълно заредено:
+
+```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')
+}
+
+```
+
+За да нарисувате активи от играта на екрана, кодът ви би изглеждал така:
+
+```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);
+}
+```
+
+## Време е да започнете изграждането на вашата игра
+
+### Какво да изградите
+
+Ще изградите уеб страница с елемент Canvas. Тя трябва да показва черен екран с размери `1024*768`. Предоставили сме ви две изображения:
+
+- Кораб на героя
+
+   ![Кораб на героя](../../../../translated_images/player.dd24c1afa8c71e9b82b2958946d4bad13308681392d4b5ddcc61a0e818ef8088.bg.png)
+
+- 5*5 чудовища
+
+   ![Кораб на чудовището](../../../../translated_images/enemyShip.5df2a822c16650c2fb3c06652e8ec8120cdb9122a6de46b9a1a56d54db22657f.bg.png)
+
+### Препоръчителни стъпки за започване на разработката
+
+Намерете файловете, които са създадени за вас в подпапката `your-work`. Тя трябва да съдържа следното:
+
+```bash
+-| assets
+  -| enemyShip.png
+  -| player.png
+-| index.html
+-| app.js
+-| package.json
+```
+
+Отворете копие на тази папка в Visual Studio Code. Трябва да имате локална среда за разработка, за предпочитане с Visual Studio Code с NPM и Node инсталирани. Ако нямате `npm` настроен на вашия компютър, [ето как да го направите](https://www.npmjs.com/get-npm).
+
+Започнете проекта си, като навигирате до папката `your_work`:
+
+```bash
+cd your-work
+npm start
+```
+
+Горният код ще стартира HTTP сървър на адрес `http://localhost:5000`. Отворете браузър и въведете този адрес. В момента страницата е празна, но това ще се промени.
+
+> Забележка: за да видите промените на екрана, обновете браузъра си.
+
+### Добавяне на код
+
+Добавете необходимия код към `your-work/app.js`, за да решите следното:
+
+1. **Нарисувайте** Canvas с черен фон  
+   > съвет: добавете два реда под съответния TODO в `/app.js`, задавайки елемента `ctx` да бъде черен, а горните/левите координати да са 0,0, а височината и ширината да съответстват на Canvas.
+2. **Заредете** текстури  
+   > съвет: добавете изображенията на играча и врага, използвайки `await loadTexture` и подавайки пътя на изображението. Все още няма да ги видите на екрана!
+3. **Нарисувайте** героя в центъра на екрана в долната половина  
+   > съвет: използвайте API `drawImage`, за да нарисувате heroImg на екрана, задавайки `canvas.width / 2 - 45` и `canvas.height - canvas.height / 4)`.
+4. **Нарисувайте** 5*5 чудовища  
+   > съвет: Сега можете да разкоментирате кода, за да нарисувате враговете на екрана. След това отидете до функцията `createEnemies` и я изградете.
+
+   Първо, задайте някои константи:
+
+    ```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;
+    ```
+
+    след това създайте цикъл, за да нарисувате масива от чудовища на екрана:
+
+    ```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);
+        }
+      }
+    ```
+
+## Резултат
+
+Завършеният резултат трябва да изглежда така:
+
+![Черен екран с герой и 5*5 чудовища](../../../../translated_images/partI-solution.36c53b48c9ffae2a5e15496b23b604ba5393433e4bf91608a7a0a020eb7a2691.bg.png)
+
+## Решение
+
+Опитайте първо да го решите сами, но ако се затрудните, погледнете [решението](../../../../6-space-game/2-drawing-to-canvas/solution/app.js).
+
+---
+
+## 🚀 Предизвикателство
+
+Научихте за рисуването с 2D-фокусирания Canvas API; разгледайте [WebGL API](https://developer.mozilla.org/docs/Web/API/WebGL_API) и опитайте да нарисувате 3D обект.
+
+## Тест след лекцията
+
+[Тест след лекцията](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/32)
+
+## Преглед и самостоятелно обучение
+
+Научете повече за Canvas API, като [прочетете за него](https://developer.mozilla.org/docs/Web/API/Canvas_API).
+
+## Задание
+
+[Играйте с Canvas API](assignment.md)
+
+---
+
+**Отказ от отговорност**:  
+Този документ е преведен с помощта на AI услуга за превод [Co-op Translator](https://github.com/Azure/co-op-translator). Въпреки че се стремим към точност, моля, имайте предвид, че автоматичните преводи може да съдържат грешки или неточности. Оригиналният документ на неговия изходен език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален превод от човек. Ние не носим отговорност за каквито и да е недоразумения или погрешни интерпретации, произтичащи от използването на този превод.
\ No newline at end of file
diff --git a/translations/bg/6-space-game/2-drawing-to-canvas/assignment.md b/translations/bg/6-space-game/2-drawing-to-canvas/assignment.md
new file mode 100644
index 00000000..437879d9
--- /dev/null
+++ b/translations/bg/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:20:57+00:00",
+  "source_file": "6-space-game/2-drawing-to-canvas/assignment.md",
+  "language_code": "bg"
+}
+-->
+# Игра с Canvas API
+
+## Инструкции
+
+Изберете един елемент от Canvas API и създайте нещо интересно около него. Можете ли да създадете малка галактика от повтарящи се звезди? Можете ли да създадете интересна текстура от цветни линии? Можете да потърсите вдъхновение в CodePen (но не копирайте).
+
+## Критерии за оценка
+
+| Критерии | Отлично                                                  | Задоволително                     | Нуждае се от подобрение |
+| -------- | -------------------------------------------------------- | ---------------------------------- | ----------------------- |
+|          | Кодът е подаден и показва интересна текстура или форма   | Кодът е подаден, но не работи     | Кодът не е подаден      |
+
+---
+
+**Отказ от отговорност**:  
+Този документ е преведен с помощта на AI услуга за превод [Co-op Translator](https://github.com/Azure/co-op-translator). Въпреки че се стремим към точност, моля, имайте предвид, че автоматизираните преводи може да съдържат грешки или неточности. Оригиналният документ на неговия роден език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален човешки превод. Ние не носим отговорност за недоразумения или погрешни интерпретации, произтичащи от използването на този превод.
\ No newline at end of file
diff --git a/translations/bg/6-space-game/3-moving-elements-around/README.md b/translations/bg/6-space-game/3-moving-elements-around/README.md
new file mode 100644
index 00000000..ff13f91c
--- /dev/null
+++ b/translations/bg/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:18:13+00:00",
+  "source_file": "6-space-game/3-moving-elements-around/README.md",
+  "language_code": "bg"
+}
+-->
+# Създаване на космическа игра, част 3: Добавяне на движение
+
+## Предварителен тест
+
+[Предварителен тест](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/33)
+
+Игрите не са много забавни, докато не започнат извънземните да се движат по екрана! В тази игра ще използваме два типа движения:
+
+- **Движение с клавиатура/мишка**: когато потребителят взаимодейства с клавиатурата или мишката, за да премести обект на екрана.
+- **Движение, предизвикано от играта**: когато играта премества обект с определен времеви интервал.
+
+Как всъщност движим нещата на екрана? Всичко се свежда до декартови координати: променяме местоположението (x, y) на обекта и след това прерисуваме екрана.
+
+Обикновено са необходими следните стъпки, за да постигнем *движение* на екрана:
+
+1. **Задаване на ново местоположение** за обект; това е необходимо, за да се възприеме обектът като преместен.
+2. **Изчистване на екрана**, екранът трябва да бъде изчистен между рисуванията. Можем да го изчистим, като нарисуваме правоъгълник, който запълваме с фонов цвят.
+3. **Прерисуване на обекта** на новото местоположение. По този начин най-накрая постигаме преместване на обекта от едно място на друго.
+
+Ето как може да изглежда това в код:
+
+```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);
+```
+
+✅ Можете ли да измислите причина, поради която прерисуването на вашия герой много кадри в секунда може да доведе до разходи за производителност? Прочетете за [алтернативи на този модел](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas).
+
+## Обработка на събития от клавиатурата
+
+Обработвате събития, като свързвате специфични събития с код. Събитията от клавиатурата се задействат върху целия прозорец, докато събитията от мишката, като `click`, могат да бъдат свързани с кликване върху конкретен елемент. Ще използваме събития от клавиатурата през целия проект.
+
+За да обработите събитие, трябва да използвате метода `addEventListener()` на прозореца и да му предоставите два входни параметъра. Първият параметър е името на събитието, например `keyup`. Вторият параметър е функцията, която трябва да бъде извикана в резултат на настъпването на събитието.
+
+Ето пример:
+
+```javascript
+window.addEventListener('keyup', (evt) => {
+  // `evt.key` = string representation of the key
+  if (evt.key === 'ArrowUp') {
+    // do something
+  }
+})
+```
+
+За събития от клавиатурата има две свойства на събитието, които можете да използвате, за да видите кой клавиш е натиснат:
+
+- `key`, това е текстово представяне на натиснатия клавиш, например `ArrowUp`.
+- `keyCode`, това е числово представяне, например `37`, което съответства на `ArrowLeft`.
+
+✅ Манипулирането на събития от клавиатурата е полезно извън разработката на игри. За какви други приложения можете да се сетите за тази техника?
+
+### Специални клавиши: предупреждение
+
+Има някои *специални* клавиши, които влияят на прозореца. Това означава, че ако слушате събитие `keyup` и използвате тези специални клавиши, за да преместите героя си, това също ще извърши хоризонтално превъртане. Поради тази причина може да искате да *изключите* това вградено поведение на браузъра, докато изграждате играта си. Ще ви трябва код като този:
+
+```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);
+```
+
+Горният код ще гарантира, че клавишите със стрелки и клавишът за интервал имат своето *по подразбиране* поведение изключено. Механизмът за *изключване* се случва, когато извикаме `e.preventDefault()`.
+
+## Движение, предизвикано от играта
+
+Можем да накараме нещата да се движат сами, като използваме таймери като функциите `setTimeout()` или `setInterval()`, които актуализират местоположението на обекта на всяко тикване или времеви интервал. Ето как може да изглежда това:
+
+```javascript
+let id = setInterval(() => {
+  //move the enemy on the y axis
+  enemy.y += 10;
+})
+```
+
+## Игровият цикъл
+
+Игровият цикъл е концепция, която представлява функция, извиквана на редовни интервали. Нарича се игрови цикъл, тъй като всичко, което трябва да бъде видимо за потребителя, се рисува в цикъла. Игровият цикъл използва всички игрови обекти, които са част от играта, като рисува всички тях, освен ако по някаква причина не трябва да бъдат част от играта повече. Например, ако обектът е враг, който е бил ударен от лазер и се е взривил, той вече не е част от текущия игрови цикъл (ще научите повече за това в следващите уроци).
+
+Ето как обикновено може да изглежда игровият цикъл, изразен в код:
+
+```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);
+```
+
+Горният цикъл се извиква на всеки `200` милисекунди, за да прерисува платното. Имате възможност да изберете най-добрия интервал, който има смисъл за вашата игра.
+
+## Продължаване на космическата игра
+
+Ще вземете съществуващия код и ще го разширите. Можете да започнете с кода, който сте завършили по време на част I, или да използвате кода в [Част II - стартов](../../../../6-space-game/3-moving-elements-around/your-work).
+
+- **Движение на героя**: ще добавите код, за да гарантирате, че можете да движите героя с помощта на клавишите със стрелки.
+- **Движение на враговете**: ще трябва също да добавите код, за да гарантирате, че враговете се движат отгоре надолу с определена скорост.
+
+## Препоръчителни стъпки
+
+Намерете файловете, които са създадени за вас в подпапката `your-work`. Тя трябва да съдържа следното:
+
+```bash
+-| assets
+  -| enemyShip.png
+  -| player.png
+-| index.html
+-| app.js
+-| package.json
+```
+
+Започнете проекта си в папката `your_work`, като напишете:
+
+```bash
+cd your-work
+npm start
+```
+
+Горният код ще стартира HTTP сървър на адрес `http://localhost:5000`. Отворете браузър и въведете този адрес, в момента трябва да се визуализира героят и всички врагове; нищо не се движи - все още!
+
+### Добавяне на код
+
+1. **Добавете специални обекти** за `hero`, `enemy` и `game object`, те трябва да имат свойства `x` и `y`. (Спомнете си частта за [Наследяване или композиция](../README.md)).
+
+   *ПОДСКАЗКА* `game object` трябва да бъде този с `x` и `y` и способността да се рисува върху платно.
+
+   >съвет: започнете, като добавите нов клас GameObject с неговия конструктор, дефиниран както следва, и след това го нарисувайте върху платното:
+  
+    ```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);
+      }
+    }
+    ```
+
+    Сега разширете този GameObject, за да създадете Hero и 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. **Добавете обработчици на събития от клавиатурата**, за да обработвате навигацията с клавиши (преместване на героя нагоре/надолу, наляво/надясно).
+
+   *ЗАПОМНЕТЕ* това е декартова система, горният ляв ъгъл е `0,0`. Също така не забравяйте да добавите код за спиране на *поведение по подразбиране*.
+
+   >съвет: създайте своя функция onKeyDown и я свържете с прозореца:
+
+   ```javascript
+    let onKeyDown = function (e) {
+	      console.log(e.keyCode);
+	        ...add the code from the lesson above to stop default behavior
+	      }
+    };
+
+    window.addEventListener("keydown", onKeyDown);
+   ```
+    
+   Проверете конзолата на браузъра си на този етап и наблюдавайте регистрирането на натисканията на клавиши.
+
+3. **Реализирайте** [Модела Pub-Sub](../README.md), това ще поддържа кода ви чист, докато следвате останалите части.
+
+   За да направите тази последна част, можете:
+
+   1. **Добавете слушател на събития** към прозореца:
+
+       ```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. **Създайте клас EventEmitter**, за да публикувате и абонирате съобщения:
+
+        ```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. **Добавете константи** и настройте 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. **Инициализирайте играта**
+
+    ```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. **Настройте игровия цикъл**
+
+   Рефакторирайте функцията window.onload, за да инициализирате играта и да настроите игрови цикъл на подходящ интервал. Ще добавите и лазерен лъч:
+
+    ```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. **Добавете код** за движение на враговете на определен интервал
+
+    Рефакторирайте функцията `createEnemies()`, за да създадете враговете и да ги добавите към новия клас 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);
+        }
+      }
+    }
+    ```
+    
+    и добавете функция `createHero()`, за да направите подобен процес за героя.
+    
+    ```javascript
+    function createHero() {
+      hero = new Hero(
+        canvas.width / 2 - 45,
+        canvas.height - canvas.height / 4
+      );
+      hero.img = heroImg;
+      gameObjects.push(hero);
+    }
+    ```
+
+    и накрая, добавете функция `drawGameObjects()`, за да започнете рисуването:
+
+    ```javascript
+    function drawGameObjects(ctx) {
+      gameObjects.forEach(go => go.draw(ctx));
+    }
+    ```
+
+    Вашите врагове трябва да започнат да настъпват към вашия космически кораб!
+
+---
+
+## 🚀 Предизвикателство
+
+Както виждате, вашият код може да се превърне в "спагети код", когато започнете да добавяте функции, променливи и класове. Как можете да организирате кода си по-добре, така че да бъде по-четим? Начертайте система за организиране на кода си, дори ако той все още се намира в един файл.
+
+## Тест след лекцията
+
+[Тест след лекцията](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/34)
+
+## Преглед и самостоятелно обучение
+
+Докато пишем играта си без използване на рамки, има много JavaScript-базирани рамки за платно за разработка на игри. Отделете време да направите [четене за тях](https://github.com/collections/javascript-game-engines).
+
+## Задание
+
+[Коментирайте кода си](assignment.md)
+
+---
+
+**Отказ от отговорност**:  
+Този документ е преведен с помощта на AI услуга за превод [Co-op Translator](https://github.com/Azure/co-op-translator). Въпреки че се стремим към точност, моля, имайте предвид, че автоматизираните преводи може да съдържат грешки или неточности. Оригиналният документ на неговия роден език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален човешки превод. Ние не носим отговорност за недоразумения или погрешни интерпретации, произтичащи от използването на този превод.
\ No newline at end of file
diff --git a/translations/bg/6-space-game/3-moving-elements-around/assignment.md b/translations/bg/6-space-game/3-moving-elements-around/assignment.md
new file mode 100644
index 00000000..97edf708
--- /dev/null
+++ b/translations/bg/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:19:20+00:00",
+  "source_file": "6-space-game/3-moving-elements-around/assignment.md",
+  "language_code": "bg"
+}
+-->
+# Коментирайте своя код
+
+## Инструкции
+
+Прегледайте текущия файл /app.js в папката на вашата игра и намерете начини да го коментирате и подредите. Много лесно е кодът да излезе извън контрол, а сега е добър момент да добавите коментари, за да гарантирате, че имате четим код, който можете да използвате по-късно.
+
+## Критерии за оценка
+
+| Критерии | Отлично                                                          | Задоволително                          | Нуждае се от подобрение                                      |
+| -------- | ---------------------------------------------------------------- | -------------------------------------- | ----------------------------------------------------------- |
+|          | Кодът в `app.js` е напълно коментиран и организиран в логически блокове | Кодът в `app.js` е адекватно коментиран | Кодът в `app.js` е донякъде неорганизиран и липсват добри коментари |
+
+---
+
+**Отказ от отговорност**:  
+Този документ е преведен с помощта на AI услуга за превод [Co-op Translator](https://github.com/Azure/co-op-translator). Въпреки че се стремим към точност, моля, имайте предвид, че автоматичните преводи може да съдържат грешки или неточности. Оригиналният документ на неговия изходен език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален превод от човек. Не носим отговорност за каквито и да било недоразумения или погрешни интерпретации, произтичащи от използването на този превод.
\ No newline at end of file
diff --git a/translations/bg/6-space-game/4-collision-detection/README.md b/translations/bg/6-space-game/4-collision-detection/README.md
new file mode 100644
index 00000000..927349ee
--- /dev/null
+++ b/translations/bg/6-space-game/4-collision-detection/README.md
@@ -0,0 +1,311 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "2e83e38c35dc003f046d7cc0bbfd4920",
+  "translation_date": "2025-08-27T22:21:42+00:00",
+  "source_file": "6-space-game/4-collision-detection/README.md",
+  "language_code": "bg"
+}
+-->
+# Създаване на Космическа Игра Част 4: Добавяне на Лазер и Откриване на Сблъсъци
+
+## Предварителен Тест
+
+[Предварителен тест](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/35)
+
+В този урок ще научите как да стреляте с лазери с помощта на JavaScript! Ще добавим две неща към нашата игра:
+
+- **Лазер**: този лазер се изстрелва от кораба на героя ви и се движи вертикално нагоре
+- **Откриване на сблъсъци**, като част от реализирането на възможността за *стрелба*, ще добавим и някои интересни правила за играта:
+   - **Лазер удря враг**: Врагът умира, ако бъде ударен от лазер
+   - **Лазер удря горната част на екрана**: Лазерът се унищожава, ако удари горната част на екрана
+   - **Сблъсък между враг и герой**: Врагът и героят се унищожават, ако се сблъскат
+   - **Враг удря дъното на екрана**: Врагът и героят се унищожават, ако врагът достигне дъното на екрана
+
+Накратко, вие -- *героят* -- трябва да унищожите всички врагове с лазер, преди те да успеят да достигнат дъното на екрана.
+
+✅ Направете малко проучване за първата компютърна игра, която някога е била създадена. Каква беше нейната функционалност?
+
+Нека бъдем героични заедно!
+
+## Откриване на сблъсъци
+
+Как да откриваме сблъсъци? Трябва да мислим за обектите в играта като за правоъгълници, които се движат. Защо, може би ще попитате? Ами, изображението, използвано за рисуване на обект в играта, е правоъгълник: то има `x`, `y`, `ширина` и `височина`.
+
+Ако два правоъгълника, например герой и враг, *се пресекат*, имаме сблъсък. Какво трябва да се случи след това зависи от правилата на играта. За да реализирате откриване на сблъсъци, ви е необходимо следното:
+
+1. Начин да получите правоъгълно представяне на обект в играта, нещо като това:
+
+   ```javascript
+   rectFromGameObject() {
+     return {
+       top: this.y,
+       left: this.x,
+       bottom: this.y + this.height,
+       right: this.x + this.width
+     }
+   }
+   ```
+
+2. Функция за сравнение, която може да изглежда така:
+
+   ```javascript
+   function intersectRect(r1, r2) {
+     return !(r2.left > r1.right ||
+       r2.right < r1.left ||
+       r2.top > r1.bottom ||
+       r2.bottom < r1.top);
+   }
+   ```
+
+## Как да унищожаваме обекти
+
+За да унищожите обекти в играта, трябва да уведомите играта, че този обект вече не трябва да се рисува в игровия цикъл, който се задейства на определен интервал. Един начин да направите това е да маркирате обект като *мъртъв*, когато нещо се случи, например така:
+
+```javascript
+// collision happened
+enemy.dead = true
+```
+
+След това можете да премахнете *мъртвите* обекти, преди да се прерисува екрана, например така:
+
+```javascript
+gameObjects = gameObject.filter(go => !go.dead);
+```
+
+## Как да изстреляме лазер
+
+Изстрелването на лазер означава да реагираме на клавишно събитие и да създадем обект, който се движи в определена посока. Затова трябва да изпълним следните стъпки:
+
+1. **Създаване на обект лазер**: от върха на кораба на героя, който при създаването си започва да се движи нагоре към горната част на екрана.
+2. **Прикачване на код към клавишно събитие**: трябва да изберем клавиш на клавиатурата, който да представлява стрелбата на лазера от играча.
+3. **Създаване на обект в играта, който изглежда като лазер**, когато клавишът е натиснат.
+
+## Забавяне на лазера
+
+Лазерът трябва да се изстрелва всеки път, когато натиснете клавиш, например *интервал*. За да предотвратим играта да създава твърде много лазери за кратко време, трябва да поправим това. Решението е чрез реализиране на така нареченото *забавяне*, таймер, който гарантира, че лазерът може да се изстрелва само през определен интервал. Можете да го реализирате по следния начин:
+
+```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.
+    }
+  }
+}
+```
+
+✅ Прегледайте урок 1 от серията за космическата игра, за да си припомните какво представлява *забавянето*.
+
+## Какво да изградим
+
+Ще вземете съществуващия код (който трябва да сте почистили и рефакторирали) от предишния урок и ще го разширите. Можете да започнете с кода от част II или да използвате кода от [Част III - стартов код](../../../../../../../../../your-work).
+
+> съвет: лазерът, с който ще работите, вече е в папката с вашите ресурси и е рефериран от вашия код
+
+- **Добавете откриване на сблъсъци**, когато лазерът се сблъска с нещо, трябва да се приложат следните правила:
+   1. **Лазер удря враг**: врагът умира, ако бъде ударен от лазер
+   2. **Лазер удря горната част на екрана**: лазерът се унищожава, ако удари горната част на екрана
+   3. **Сблъсък между враг и герой**: врагът и героят се унищожават, ако се сблъскат
+   4. **Враг удря дъното на екрана**: врагът и героят се унищожават, ако врагът достигне дъното на екрана
+
+## Препоръчителни стъпки
+
+Намерете файловете, които са създадени за вас в подпапката `your-work`. Тя трябва да съдържа следното:
+
+```bash
+-| assets
+  -| enemyShip.png
+  -| player.png
+  -| laserRed.png
+-| index.html
+-| app.js
+-| package.json
+```
+
+Стартирайте проекта си в папката `your_work`, като напишете:
+
+```bash
+cd your-work
+npm start
+```
+
+Горната команда ще стартира HTTP сървър на адрес `http://localhost:5000`. Отворете браузър и въведете този адрес. В момента трябва да виждате героя и всички врагове, но нищо не се движи - все още :).
+
+### Добавете код
+
+1. **Настройте правоъгълно представяне на обектите в играта, за да обработвате сблъсъци**. Следният код ви позволява да получите правоъгълно представяне на `GameObject`. Редактирайте класа `GameObject`, за да го разширите:
+
+    ```javascript
+    rectFromGameObject() {
+        return {
+          top: this.y,
+          left: this.x,
+          bottom: this.y + this.height,
+          right: this.x + this.width,
+        };
+      }
+    ```
+
+2. **Добавете код за проверка на сблъсъци**. Това ще бъде нова функция, която тества дали два правоъгълника се пресичат:
+
+    ```javascript
+    function intersectRect(r1, r2) {
+      return !(
+        r2.left > r1.right ||
+        r2.right < r1.left ||
+        r2.top > r1.bottom ||
+        r2.bottom < r1.top
+      );
+    }
+    ```
+
+3. **Добавете възможност за изстрелване на лазер**
+   1. **Добавете съобщение за клавишно събитие**. Клавишът *интервал* трябва да създава лазер точно над кораба на героя. Добавете три константи в обекта `Messages`:
+
+       ```javascript
+        KEY_EVENT_SPACE: "KEY_EVENT_SPACE",
+        COLLISION_ENEMY_LASER: "COLLISION_ENEMY_LASER",
+        COLLISION_ENEMY_HERO: "COLLISION_ENEMY_HERO",
+       ```
+
+   1. **Обработете клавиша интервал**. Редактирайте функцията `window.addEventListener` за събитие `keyup`, за да обработва интервала:
+
+      ```javascript
+        } else if(evt.keyCode === 32) {
+          eventEmitter.emit(Messages.KEY_EVENT_SPACE);
+        }
+      ```
+
+    1. **Добавете слушатели**. Редактирайте функцията `initGame()`, за да гарантирате, че героят може да стреля, когато се натисне интервалът:
+
+       ```javascript
+       eventEmitter.on(Messages.KEY_EVENT_SPACE, () => {
+        if (hero.canFire()) {
+          hero.fire();
+        }
+       ```
+
+       и добавете нова функция `eventEmitter.on()`, за да осигурите поведение, когато враг се сблъска с лазер:
+
+          ```javascript
+          eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => {
+            first.dead = true;
+            second.dead = true;
+          })
+          ```
+
+   1. **Движение на обекта**. Уверете се, че лазерът се движи постепенно към горната част на екрана. Ще създадете нов клас `Laser`, който разширява `GameObject`, както сте правили преди:
+
+      ```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. **Обработете сблъсъците**. Реализирайте правилата за сблъсъци за лазера. Добавете функция `updateGameObjects()`, която тества сблъсъците между обектите:
+
+      ```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);
+      }  
+      ```
+
+      Уверете се, че сте добавили `updateGameObjects()` в игровия цикъл в `window.onload`.
+
+   4. **Реализирайте забавяне** за лазера, така че да може да се изстрелва само през определен интервал.
+
+      Накрая, редактирайте класа `Hero`, за да може да има забавяне:
+
+       ```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;
+        }
+      }
+      ```
+
+На този етап вашата игра вече има някаква функционалност! Можете да се движите с клавишите със стрелки, да стреляте с лазер с интервала и враговете изчезват, когато ги ударите. Браво!
+
+---
+
+## 🚀 Предизвикателство
+
+Добавете експлозия! Разгледайте ресурсите за играта в [репото Space Art](../../../../6-space-game/solution/spaceArt/readme.txt) и опитайте да добавите експлозия, когато лазер удари извънземен.
+
+## Тест след урока
+
+[Тест след урока](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/36)
+
+## Преглед и Самостоятелно Обучение
+
+Експериментирайте с интервалите във вашата игра досега. Какво се случва, когато ги промените? Прочетете повече за [събития за време в JavaScript](https://www.freecodecamp.org/news/javascript-timing-events-settimeout-and-setinterval/).
+
+## Задание
+
+[Изследвайте сблъсъците](assignment.md)
+
+---
+
+**Отказ от отговорност**:  
+Този документ е преведен с помощта на AI услуга за превод [Co-op Translator](https://github.com/Azure/co-op-translator). Въпреки че се стремим към точност, моля, имайте предвид, че автоматизираните преводи може да съдържат грешки или неточности. Оригиналният документ на неговия роден език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален човешки превод. Не носим отговорност за недоразумения или погрешни интерпретации, произтичащи от използването на този превод.
\ No newline at end of file
diff --git a/translations/bg/6-space-game/4-collision-detection/assignment.md b/translations/bg/6-space-game/4-collision-detection/assignment.md
new file mode 100644
index 00000000..ed3660c8
--- /dev/null
+++ b/translations/bg/6-space-game/4-collision-detection/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "8a0a097b45e7c75a611e2795e4013f16",
+  "translation_date": "2025-08-27T22:22:54+00:00",
+  "source_file": "6-space-game/4-collision-detection/assignment.md",
+  "language_code": "bg"
+}
+-->
+# Изследване на сблъсъци
+
+## Инструкции
+
+За да разберете по-добре как работят сблъсъците, създайте много малка игра с няколко елемента, които се сблъскват. Направете ги да се движат чрез натискания на клавиши или кликове с мишката и накарайте нещо да се случи с един от елементите, когато бъде ударен. Това може да бъде нещо като метеор, който удря земята, или блъскащи се колички. Бъдете креативни!
+
+## Критерии за оценка
+
+| Критерий | Примерен                                                                                                                 | Задоволителен                 | Нуждае се от подобрение |
+| -------- | ------------------------------------------------------------------------------------------------------------------------ | ----------------------------- | ----------------------- |
+|          | Създаден е напълно работещ кодов пример, с елементи, нарисувани върху платно, основен сблъсък и реакции, които се случват | Кодът е непълен по някакъв начин | Кодът не функционира   |
+
+---
+
+**Отказ от отговорност**:  
+Този документ е преведен с помощта на AI услуга за превод [Co-op Translator](https://github.com/Azure/co-op-translator). Въпреки че се стремим към точност, моля, имайте предвид, че автоматизираните преводи може да съдържат грешки или неточности. Оригиналният документ на неговия изходен език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален превод от човек. Ние не носим отговорност за каквито и да е недоразумения или погрешни интерпретации, произтичащи от използването на този превод.
\ No newline at end of file
diff --git a/translations/bg/6-space-game/4-collision-detection/solution/README.md b/translations/bg/6-space-game/4-collision-detection/solution/README.md
new file mode 100644
index 00000000..5590318e
--- /dev/null
+++ b/translations/bg/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:23:29+00:00",
+  "source_file": "6-space-game/4-collision-detection/solution/README.md",
+  "language_code": "bg"
+}
+-->
+Това е заместител, оставен празен нарочно
+
+---
+
+**Отказ от отговорност**:  
+Този документ е преведен с помощта на AI услуга за превод [Co-op Translator](https://github.com/Azure/co-op-translator). Въпреки че се стремим към точност, моля, имайте предвид, че автоматизираните преводи може да съдържат грешки или неточности. Оригиналният документ на неговия роден език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален човешки превод. Ние не носим отговорност за недоразумения или погрешни интерпретации, произтичащи от използването на този превод.
\ No newline at end of file
diff --git a/translations/bg/6-space-game/4-collision-detection/your-work/README.md b/translations/bg/6-space-game/4-collision-detection/your-work/README.md
new file mode 100644
index 00000000..25276893
--- /dev/null
+++ b/translations/bg/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:23:15+00:00",
+  "source_file": "6-space-game/4-collision-detection/your-work/README.md",
+  "language_code": "bg"
+}
+-->
+Това е заместител, оставен празен нарочно
+
+---
+
+**Отказ от отговорност**:  
+Този документ е преведен с помощта на AI услуга за превод [Co-op Translator](https://github.com/Azure/co-op-translator). Въпреки че се стремим към точност, моля, имайте предвид, че автоматизираните преводи може да съдържат грешки или неточности. Оригиналният документ на неговия роден език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален човешки превод. Ние не носим отговорност за недоразумения или погрешни интерпретации, произтичащи от използването на този превод.
\ No newline at end of file
diff --git a/translations/bg/6-space-game/5-keeping-score/README.md b/translations/bg/6-space-game/5-keeping-score/README.md
new file mode 100644
index 00000000..0cd38b26
--- /dev/null
+++ b/translations/bg/6-space-game/5-keeping-score/README.md
@@ -0,0 +1,203 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "4e8250db84b027c9ff816b4e4c093457",
+  "translation_date": "2025-08-27T22:16:14+00:00",
+  "source_file": "6-space-game/5-keeping-score/README.md",
+  "language_code": "bg"
+}
+-->
+# Създаване на космическа игра, част 5: Точки и животи
+
+## Тест преди лекцията
+
+[Тест преди лекцията](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/37)
+
+В този урок ще научите как да добавите точки към играта и да изчислявате животи.
+
+## Изписване на текст на екрана
+
+За да можете да показвате резултата от играта на екрана, трябва да знаете как да поставите текст върху него. Отговорът е чрез метода `fillText()` на обекта canvas. Можете също така да контролирате други аспекти като шрифта, цвета на текста и дори неговото подравняване (ляво, дясно, център). По-долу е даден код, който изписва текст на екрана.
+
+```javascript
+ctx.font = "30px Arial";
+ctx.fillStyle = "red";
+ctx.textAlign = "right";
+ctx.fillText("show this on the screen", 0, 0);
+```
+
+✅ Прочетете повече за [как да добавите текст към canvas](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_text) и не се колебайте да направите вашия текст по-стилен!
+
+## Животът като концепция в играта
+
+Концепцията за живот в играта е просто число. В контекста на космическа игра е обичайно да се зададе определен брой животи, които се намаляват един по един, когато вашият кораб получи щети. Ще е хубаво, ако можете да покажете графично представяне на това, например миникораби или сърца вместо число.
+
+## Какво да създадете
+
+Нека добавим следното към вашата игра:
+
+- **Резултат от играта**: За всеки унищожен вражески кораб, героят трябва да получи точки. Предлагаме 100 точки на кораб. Резултатът от играта трябва да се показва в долния ляв ъгъл.
+- **Живот**: Вашият кораб има три живота. Губите живот всеки път, когато вражески кораб се сблъска с вас. Броят на животите трябва да се показва в долния десен ъгъл и да бъде представен с графика ![life image](../../../../translated_images/life.6fb9f50d53ee0413cd91aa411f7c296e10a1a6de5c4a4197c718b49bf7d63ebf.bg.png).
+
+## Препоръчителни стъпки
+
+Намерете файловете, които са създадени за вас в подпапката `your-work`. Тя трябва да съдържа следното:
+
+```bash
+-| assets
+  -| enemyShip.png
+  -| player.png
+  -| laserRed.png
+-| index.html
+-| app.js
+-| package.json
+```
+
+Започнете проекта си в папката `your_work`, като напишете:
+
+```bash
+cd your-work
+npm start
+```
+
+Горният код ще стартира HTTP сървър на адрес `http://localhost:5000`. Отворете браузър и въведете този адрес. В момента трябва да виждате героя и всички врагове, а когато натискате стрелките наляво и надясно, героят се движи и може да стреля по враговете.
+
+### Добавяне на код
+
+1. **Копирайте необходимите ресурси** от папката `solution/assets/` в папката `your-work`; ще добавите ресурса `life.png`. Добавете lifeImg към функцията window.onload:
+
+    ```javascript
+    lifeImg = await loadTexture("assets/life.png");
+    ```
+
+1. Добавете `lifeImg` към списъка с ресурси:
+
+    ```javascript
+    let heroImg,
+    ...
+    lifeImg,
+    ...
+    eventEmitter = new EventEmitter();
+    ```
+  
+2. **Добавете променливи**. Добавете код, който представлява вашия общ резултат (0) и оставащите животи (3), и покажете тези резултати на екрана.
+
+3. **Разширете функцията `updateGameObjects()`**. Разширете функцията `updateGameObjects()`, за да обработва сблъсъци с врагове:
+
+    ```javascript
+    enemies.forEach(enemy => {
+        const heroRect = hero.rectFromGameObject();
+        if (intersectRect(heroRect, enemy.rectFromGameObject())) {
+          eventEmitter.emit(Messages.COLLISION_ENEMY_HERO, { enemy });
+        }
+      })
+    ```
+
+4. **Добавете `life` и `points`**. 
+   1. **Инициализирайте променливи**. Под `this.cooldown = 0` в класа `Hero`, задайте life и points:
+
+        ```javascript
+        this.life = 3;
+        this.points = 0;
+        ```
+
+   1. **Изпишете променливите на екрана**. Покажете тези стойности на екрана:
+
+        ```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. **Добавете методи към игровия цикъл**. Уверете се, че сте добавили тези функции към вашата функция window.onload под `updateGameObjects()`:
+
+        ```javascript
+        drawPoints();
+        drawLife();
+        ```
+
+1. **Реализирайте правилата на играта**. Реализирайте следните правила:
+
+   1. **За всеки сблъсък между герой и враг**, намалете един живот.
+   
+      Разширете класа `Hero`, за да направите това намаление:
+
+        ```javascript
+        decrementLife() {
+          this.life--;
+          if (this.life === 0) {
+            this.dead = true;
+          }
+        }
+        ```
+
+   2. **За всеки лазер, който удари враг**, увеличете резултата от играта със 100 точки.
+
+      Разширете класа Hero, за да направите това увеличение:
+    
+        ```javascript
+          incrementPoints() {
+            this.points += 100;
+          }
+        ```
+
+        Добавете тези функции към вашите Collision Event Emitters:
+
+        ```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();
+        });
+        ```
+
+✅ Направете малко проучване, за да откриете други игри, създадени с JavaScript/Canvas. Какви са техните общи черти?
+
+След като завършите тази работа, трябва да виждате малките кораби за живот в долния десен ъгъл, точки в долния ляв ъгъл, и трябва да виждате как броят на животите намалява при сблъсък с врагове, а точките се увеличават, когато стреляте по врагове. Браво! Вашата игра е почти завършена.
+
+---
+
+## 🚀 Предизвикателство
+
+Вашият код е почти завършен. Можете ли да си представите следващите стъпки?
+
+## Тест след лекцията
+
+[Тест след лекцията](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/38)
+
+## Преглед и самостоятелно обучение
+
+Проучете някои начини, по които можете да увеличавате и намалявате резултати и животи в играта. Съществуват интересни игрови двигатели като [PlayFab](https://playfab.com). Как използването на един от тях би подобрило вашата игра?
+
+## Задание
+
+[Създайте игра с точки](assignment.md)
+
+---
+
+**Отказ от отговорност**:  
+Този документ е преведен с помощта на AI услуга за превод [Co-op Translator](https://github.com/Azure/co-op-translator). Въпреки че се стремим към точност, моля, имайте предвид, че автоматизираните преводи може да съдържат грешки или неточности. Оригиналният документ на неговия роден език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален човешки превод. Ние не носим отговорност за недоразумения или погрешни интерпретации, произтичащи от използването на този превод.
\ No newline at end of file
diff --git a/translations/bg/6-space-game/5-keeping-score/assignment.md b/translations/bg/6-space-game/5-keeping-score/assignment.md
new file mode 100644
index 00000000..3284963b
--- /dev/null
+++ b/translations/bg/6-space-game/5-keeping-score/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "81f292dbda01685b91735e0398dc0504",
+  "translation_date": "2025-08-27T22:17:01+00:00",
+  "source_file": "6-space-game/5-keeping-score/assignment.md",
+  "language_code": "bg"
+}
+-->
+# Създайте игра за събиране на точки
+
+## Инструкции
+
+Създайте игра, в която показвате живота и точките по креативен начин. Едно предложение е да представите живота като сърца, а точките като голямо число в долната централна част на екрана. Вижте тук за [Безплатни ресурси за игри](https://www.kenney.nl/)
+
+# Критерии за оценка
+
+| Критерии | Отлично представяне    | Задоволително представяне   | Нуждае се от подобрение    |
+| -------- | ---------------------- | --------------------------- | -------------------------- |
+|          | цялата игра е представена | играта е частично представена | частичната игра съдържа грешки |
+
+---
+
+**Отказ от отговорност**:  
+Този документ е преведен с помощта на AI услуга за превод [Co-op Translator](https://github.com/Azure/co-op-translator). Въпреки че се стремим към точност, моля, имайте предвид, че автоматичните преводи може да съдържат грешки или неточности. Оригиналният документ на неговия изходен език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален превод от човек. Не носим отговорност за каквито и да е недоразумения или погрешни интерпретации, произтичащи от използването на този превод.
\ No newline at end of file
diff --git a/translations/bg/6-space-game/5-keeping-score/solution/README.md b/translations/bg/6-space-game/5-keeping-score/solution/README.md
new file mode 100644
index 00000000..26a5fa26
--- /dev/null
+++ b/translations/bg/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:17:31+00:00",
+  "source_file": "6-space-game/5-keeping-score/solution/README.md",
+  "language_code": "bg"
+}
+-->
+Това е заместител, оставен празен нарочно
+
+---
+
+**Отказ от отговорност**:  
+Този документ е преведен с помощта на AI услуга за превод [Co-op Translator](https://github.com/Azure/co-op-translator). Въпреки че се стремим към точност, моля, имайте предвид, че автоматизираните преводи може да съдържат грешки или неточности. Оригиналният документ на неговия роден език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален човешки превод. Ние не носим отговорност за недоразумения или погрешни интерпретации, произтичащи от използването на този превод.
\ No newline at end of file
diff --git a/translations/bg/6-space-game/5-keeping-score/your-work/README.md b/translations/bg/6-space-game/5-keeping-score/your-work/README.md
new file mode 100644
index 00000000..1b7878f4
--- /dev/null
+++ b/translations/bg/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:17:18+00:00",
+  "source_file": "6-space-game/5-keeping-score/your-work/README.md",
+  "language_code": "bg"
+}
+-->
+Това е заместител, оставен празен умишлено
+
+---
+
+**Отказ от отговорност**:  
+Този документ е преведен с помощта на AI услуга за превод [Co-op Translator](https://github.com/Azure/co-op-translator). Въпреки че се стремим към точност, моля, имайте предвид, че автоматизираните преводи може да съдържат грешки или неточности. Оригиналният документ на неговия роден език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален човешки превод. Ние не носим отговорност за недоразумения или погрешни интерпретации, произтичащи от използването на този превод.
\ No newline at end of file
diff --git a/translations/bg/6-space-game/6-end-condition/README.md b/translations/bg/6-space-game/6-end-condition/README.md
new file mode 100644
index 00000000..1f4b491d
--- /dev/null
+++ b/translations/bg/6-space-game/6-end-condition/README.md
@@ -0,0 +1,236 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "01336cddd638242e99b133614111ea40",
+  "translation_date": "2025-08-27T22:25:35+00:00",
+  "source_file": "6-space-game/6-end-condition/README.md",
+  "language_code": "bg"
+}
+-->
+# Създаване на космическа игра, част 6: Край и рестарт
+
+## Предварителен тест
+
+[Предварителен тест](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/39)
+
+Има различни начини да се изрази *условие за край* в една игра. Вие, като създател на играта, решавате защо играта приключва. Ето някои причини, ако приемем, че говорим за космическата игра, която създавате досега:
+
+- **Унищожени са `N` вражески кораба**: Често срещано е, ако играта е разделена на различни нива, да трябва да унищожите `N` вражески кораба, за да завършите нивото.
+- **Вашият кораб е унищожен**: Има игри, в които губите, ако вашият кораб бъде унищожен. Друг често срещан подход е концепцията за животи. Всеки път, когато вашият кораб бъде унищожен, се отнема един живот. Когато всички животи бъдат загубени, играта приключва.
+- **Събрали сте `N` точки**: Друго често срещано условие за край е събирането на точки. Как ще получите точки зависи от вас, но е обичайно да се присъждат точки за различни дейности, като унищожаване на вражески кораб или събиране на предмети, които се *пускат*, когато бъдат унищожени.
+- **Завършване на ниво**: Това може да включва няколко условия, като унищожени `X` вражески кораба, събрани `Y` точки или може би събиране на конкретен предмет.
+
+## Рестартиране
+
+Ако хората харесват вашата игра, вероятно ще искат да я играят отново. След като играта приключи по каквато и да е причина, трябва да предложите опция за рестарт.
+
+✅ Помислете малко за условията, при които една игра приключва, и как ви подканват да я рестартирате.
+
+## Какво да създадете
+
+Ще добавите следните правила към вашата игра:
+
+1. **Победа в играта**. Когато всички вражески кораби бъдат унищожени, печелите играта. Освен това покажете някакво съобщение за победа.
+1. **Рестарт**. Когато всички животи бъдат загубени или играта бъде спечелена, трябва да предложите начин за рестартиране на играта. Запомнете! Ще трябва да инициализирате играта отново и да изчистите предишното състояние на играта.
+
+## Препоръчителни стъпки
+
+Намерете файловете, които са създадени за вас в подпапката `your-work`. Тя трябва да съдържа следното:
+
+```bash
+-| assets
+  -| enemyShip.png
+  -| player.png
+  -| laserRed.png
+  -| life.png
+-| index.html
+-| app.js
+-| package.json
+```
+
+Започнете проекта си в папката `your_work`, като въведете:
+
+```bash
+cd your-work
+npm start
+```
+
+Горната команда ще стартира HTTP сървър на адрес `http://localhost:5000`. Отворете браузър и въведете този адрес. Вашата игра трябва да е в състояние за игра.
+
+> съвет: за да избегнете предупреждения в Visual Studio Code, редактирайте функцията `window.onload`, така че да извиква `gameLoopId` без `let`, и декларирайте `gameLoopId` в началото на файла, независимо: `let gameLoopId;`
+
+### Добавяне на код
+
+1. **Проследяване на условието за край**. Добавете код, който следи броя на враговете или дали героичният кораб е унищожен, като добавите тези две функции:
+
+    ```javascript
+    function isHeroDead() {
+      return hero.life <= 0;
+    }
+
+    function isEnemiesDead() {
+      const enemies = gameObjects.filter((go) => go.type === "Enemy" && !go.dead);
+      return enemies.length === 0;
+    }
+    ```
+
+1. **Добавяне на логика към обработчиците на съобщения**. Редактирайте `eventEmitter`, за да обработва тези условия:
+
+    ```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. **Добавяне на нови типове съобщения**. Добавете тези съобщения към обекта constants:
+
+    ```javascript
+    GAME_END_LOSS: "GAME_END_LOSS",
+    GAME_END_WIN: "GAME_END_WIN",
+    ```
+
+2. **Добавяне на код за рестарт**. Добавете код, който рестартира играта при натискане на избран бутон.
+
+   1. **Слушане за натискане на клавиш `Enter`**. Редактирайте eventListener на вашия прозорец, за да слуша за това натискане:
+
+    ```javascript
+     else if(evt.key === "Enter") {
+        eventEmitter.emit(Messages.KEY_EVENT_ENTER);
+      }
+    ```
+
+   1. **Добавяне на съобщение за рестарт**. Добавете това съобщение към constants на Messages:
+
+        ```javascript
+        KEY_EVENT_ENTER: "KEY_EVENT_ENTER",
+        ```
+
+1. **Прилагане на правила за играта**. Прилагайте следните правила за играта:
+
+   1. **Условие за победа на играча**. Когато всички вражески кораби бъдат унищожени, покажете съобщение за победа.
+
+      1. Първо, създайте функция `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. Създайте функция `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. **Логика за рестарт**. Когато всички животи бъдат загубени или играчът спечели играта, покажете, че играта може да бъде рестартирана. Освен това рестартирайте играта, когато бъде натиснат клавишът за *рестарт* (можете да решите кой клавиш да бъде свързан с рестарт).
+
+      1. Създайте функция `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. Добавете извикване към `eventEmitter`, за да рестартирате играта в `initGame()`:
+
+        ```javascript
+        eventEmitter.on(Messages.KEY_EVENT_ENTER, () => {
+          resetGame();
+        });
+        ```
+
+     1. Добавете функция `clear()` към EventEmitter:
+
+        ```javascript
+        clear() {
+          this.listeners = {};
+        }
+        ```
+
+👽 💥 🚀 Поздравления, капитане! Вашата игра е завършена! Браво! 🚀 💥 👽
+
+---
+
+## 🚀 Предизвикателство
+
+Добавете звук! Можете ли да добавите звук, за да подобрите играта си, например когато има лазерен удар, или когато героят загине или спечели? Разгледайте този [sandbox](https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_audio_play), за да научите как да възпроизвеждате звук с JavaScript.
+
+## Финален тест
+
+[Финален тест](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/40)
+
+## Преглед и самостоятелно обучение
+
+Вашата задача е да създадете нова примерна игра, така че разгледайте някои от интересните игри, за да видите какъв тип игра бихте могли да създадете.
+
+## Задание
+
+[Създайте примерна игра](assignment.md)
+
+---
+
+**Отказ от отговорност**:  
+Този документ е преведен с помощта на AI услуга за превод [Co-op Translator](https://github.com/Azure/co-op-translator). Въпреки че се стремим към точност, моля, имайте предвид, че автоматизираните преводи може да съдържат грешки или неточности. Оригиналният документ на неговия роден език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален човешки превод. Ние не носим отговорност за недоразумения или погрешни интерпретации, произтичащи от използването на този превод.
\ No newline at end of file
diff --git a/translations/bg/6-space-game/6-end-condition/assignment.md b/translations/bg/6-space-game/6-end-condition/assignment.md
new file mode 100644
index 00000000..27aa8c1b
--- /dev/null
+++ b/translations/bg/6-space-game/6-end-condition/assignment.md
@@ -0,0 +1,33 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "24201cf428c7edba1ccec2a78a0dd8f8",
+  "translation_date": "2025-08-27T22:26:21+00:00",
+  "source_file": "6-space-game/6-end-condition/assignment.md",
+  "language_code": "bg"
+}
+-->
+# Създайте примерна игра
+
+## Инструкции
+
+Опитайте се да създадете малка игра, в която да упражнявате различни условия за край. Варирайте между събиране на определен брой точки, героят губи всички животи или всички чудовища са победени. Създайте нещо просто, като например приключенска игра в конзолен формат. Използвайте следния игрови поток като вдъхновение:
+
+```
+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****
+```
+
+## Критерии за оценка
+
+| Критерий | Отлично представяне    | Задоволително представяне   | Нуждае се от подобрение    |
+| -------- | ---------------------- | --------------------------- | -------------------------- |
+|          | представена е цяла игра | представена е частична игра | частичната игра съдържа грешки |
+
+---
+
+**Отказ от отговорност**:  
+Този документ е преведен с помощта на AI услуга за превод [Co-op Translator](https://github.com/Azure/co-op-translator). Въпреки че се стремим към точност, моля, имайте предвид, че автоматизираните преводи може да съдържат грешки или неточности. Оригиналният документ на неговия роден език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален човешки превод. Ние не носим отговорност за недоразумения или погрешни интерпретации, произтичащи от използването на този превод.
\ No newline at end of file
diff --git a/translations/bg/6-space-game/6-end-condition/solution/README.md b/translations/bg/6-space-game/6-end-condition/solution/README.md
new file mode 100644
index 00000000..d5c83a5d
--- /dev/null
+++ b/translations/bg/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:26:50+00:00",
+  "source_file": "6-space-game/6-end-condition/solution/README.md",
+  "language_code": "bg"
+}
+-->
+Това е заместител, оставен празен нарочно
+
+---
+
+**Отказ от отговорност**:  
+Този документ е преведен с помощта на AI услуга за превод [Co-op Translator](https://github.com/Azure/co-op-translator). Въпреки че се стремим към точност, моля, имайте предвид, че автоматизираните преводи може да съдържат грешки или неточности. Оригиналният документ на неговия роден език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален човешки превод. Ние не носим отговорност за каквито и да било недоразумения или погрешни интерпретации, произтичащи от използването на този превод.
\ No newline at end of file
diff --git a/translations/bg/6-space-game/6-end-condition/your-work/README.md b/translations/bg/6-space-game/6-end-condition/your-work/README.md
new file mode 100644
index 00000000..75970b12
--- /dev/null
+++ b/translations/bg/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:26:38+00:00",
+  "source_file": "6-space-game/6-end-condition/your-work/README.md",
+  "language_code": "bg"
+}
+-->
+Това е заместител, оставен празен нарочно
+
+---
+
+**Отказ от отговорност**:  
+Този документ е преведен с помощта на AI услуга за превод [Co-op Translator](https://github.com/Azure/co-op-translator). Въпреки че се стремим към точност, моля, имайте предвид, че автоматизираните преводи може да съдържат грешки или неточности. Оригиналният документ на неговия роден език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален човешки превод. Не носим отговорност за недоразумения или погрешни интерпретации, произтичащи от използването на този превод.
\ No newline at end of file
diff --git a/translations/bg/6-space-game/README.md b/translations/bg/6-space-game/README.md
new file mode 100644
index 00000000..bc879d45
--- /dev/null
+++ b/translations/bg/6-space-game/README.md
@@ -0,0 +1,45 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "c40a698395ee5102715f7880bba3f2e7",
+  "translation_date": "2025-08-27T22:15:39+00:00",
+  "source_file": "6-space-game/README.md",
+  "language_code": "bg"
+}
+-->
+# Създаване на космическа игра
+
+Космическа игра за изучаване на по-напреднали основи на JavaScript
+
+В този урок ще научите как да създадете своя собствена космическа игра. Ако някога сте играли играта "Space Invaders", тази игра има същата идея: да управлявате космически кораб и да стреляте по чудовища, които се спускат отгоре. Ето как ще изглежда завършената игра:
+
+![Завършена игра](../../../6-space-game/images/pewpew.gif)
+
+В тези шест урока ще научите следното:
+
+- **Взаимодействие** с елемента Canvas за рисуване на екрана
+- **Разбиране** на картезианската координатна система
+- **Научаване** на модела Pub-Sub за създаване на здрава архитектура на играта, която е по-лесна за поддръжка и разширяване
+- **Използване** на Async/Await за зареждане на ресурси за играта
+- **Обработка** на събития от клавиатурата
+
+## Преглед
+
+- Теория
+   - [Въведение в създаването на игри с JavaScript](1-introduction/README.md)
+- Практика
+   - [Рисуване върху canvas](2-drawing-to-canvas/README.md)
+   - [Придвижване на елементи по екрана](3-moving-elements-around/README.md)
+   - [Откриване на сблъсъци](4-collision-detection/README.md)
+   - [Поддържане на резултат](5-keeping-score/README.md)
+   - [Приключване и рестартиране на играта](6-end-condition/README.md)
+
+## Кредити
+
+Ресурсите, използвани за тази игра, са взети от https://www.kenney.nl/.  
+Ако се интересувате от създаване на игри, това са наистина качествени ресурси, много от тях са безплатни, а някои са платени.
+
+---
+
+**Отказ от отговорност**:  
+Този документ е преведен с помощта на AI услуга за превод [Co-op Translator](https://github.com/Azure/co-op-translator). Въпреки че се стремим към точност, моля, имайте предвид, че автоматизираните преводи може да съдържат грешки или неточности. Оригиналният документ на неговия роден език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален човешки превод. Ние не носим отговорност за недоразумения или погрешни интерпретации, произтичащи от използването на този превод.
\ No newline at end of file
diff --git a/translations/bg/6-space-game/solution/README.md b/translations/bg/6-space-game/solution/README.md
new file mode 100644
index 00000000..e757c718
--- /dev/null
+++ b/translations/bg/6-space-game/solution/README.md
@@ -0,0 +1,15 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "068cbb9b3c10a96d503f6cdd6c9ace8c",
+  "translation_date": "2025-08-27T22:27:03+00:00",
+  "source_file": "6-space-game/solution/README.md",
+  "language_code": "bg"
+}
+-->
+Това е заместител, оставен празен нарочно
+
+---
+
+**Отказ от отговорност**:  
+Този документ е преведен с помощта на AI услуга за превод [Co-op Translator](https://github.com/Azure/co-op-translator). Въпреки че се стремим към точност, моля, имайте предвид, че автоматизираните преводи може да съдържат грешки или неточности. Оригиналният документ на неговия роден език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален човешки превод. Ние не носим отговорност за недоразумения или погрешни интерпретации, произтичащи от използването на този превод.
\ No newline at end of file
diff --git a/translations/bg/7-bank-project/1-template-route/README.md b/translations/bg/7-bank-project/1-template-route/README.md
new file mode 100644
index 00000000..1e6bf8e6
--- /dev/null
+++ b/translations/bg/7-bank-project/1-template-route/README.md
@@ -0,0 +1,322 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "8da1b5e2c63f749808858c53f37b8ce7",
+  "translation_date": "2025-08-27T23:02:03+00:00",
+  "source_file": "7-bank-project/1-template-route/README.md",
+  "language_code": "bg"
+}
+-->
+# Създаване на банково приложение, част 1: HTML шаблони и маршрути в уеб приложение
+
+## Предварителен тест
+
+[Предварителен тест](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/41)
+
+### Въведение
+
+С появата на JavaScript в браузърите, уебсайтовете стават все по-интерактивни и сложни. Уеб технологиите вече често се използват за създаване на напълно функционални приложения, които работят директно в браузъра и които наричаме [уеб приложения](https://en.wikipedia.org/wiki/Web_application). Тъй като уеб приложенията са силно интерактивни, потребителите не искат да чакат пълно презареждане на страницата всеки път, когато се извършва действие. Затова JavaScript се използва за директно обновяване на HTML чрез DOM, за да се осигури по-гладко потребителско изживяване.
+
+В този урок ще положим основите за създаване на банково уеб приложение, използвайки HTML шаблони за създаване на множество екрани, които могат да се показват и обновяват без необходимост от презареждане на цялата HTML страница.
+
+### Предварителни изисквания
+
+Ще ви е необходим локален уеб сървър, за да тествате уеб приложението, което ще създадем в този урок. Ако нямате такъв, можете да инсталирате [Node.js](https://nodejs.org) и да използвате командата `npx lite-server` от папката на вашия проект. Това ще създаде локален уеб сървър и ще отвори приложението ви в браузър.
+
+### Подготовка
+
+На вашия компютър създайте папка с име `bank` и файл с име `index.html` вътре в нея. Ще започнем с този HTML [шаблон](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 шаблони
+
+Ако искате да създадете множество екрани за уеб страница, едно решение би било да създадете отделен HTML файл за всеки екран, който искате да покажете. Въпреки това, този подход има някои неудобства:
+
+- Трябва да презареждате целия HTML при смяна на екрана, което може да бъде бавно.
+- Трудно е да се споделят данни между различните екрани.
+
+Друг подход е да имате само един HTML файл и да дефинирате множество [HTML шаблони](https://developer.mozilla.org/docs/Web/HTML/Element/template), използвайки елемента `<template>`. Шаблонът е многократно използваем HTML блок, който не се показва от браузъра и трябва да бъде създаден по време на изпълнение с помощта на JavaScript.
+
+### Задача
+
+Ще създадем банково приложение с два екрана: страницата за вход и таблото за управление. Първо, нека добавим в HTML тялото елемент за запазване на място, който ще използваме за създаване на различните екрани на нашето приложение:
+
+```html
+<div id="app">Loading...</div>
+```
+
+Даваме му `id`, за да го намираме по-лесно с JavaScript по-късно.
+
+> Съвет: тъй като съдържанието на този елемент ще бъде заменено, можем да поставим съобщение за зареждане или индикатор, който ще се показва, докато приложението се зарежда.
+
+След това нека добавим HTML шаблон за страницата за вход. Засега ще поставим само заглавие и секция, съдържаща връзка, която ще използваме за навигация.
+
+```html
+<template id="login">
+  <h1>Bank App</h1>
+  <section>
+    <a href="/dashboard">Login</a>
+  </section>
+</template>
+```
+
+След това ще добавим друг HTML шаблон за страницата на таблото за управление. Тази страница ще съдържа различни секции:
+
+- Заглавна част с заглавие и връзка за изход
+- Текущото салдо на банковата сметка
+- Списък с транзакции, показан в таблица
+
+```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>
+```
+
+> Съвет: когато създавате HTML шаблони, ако искате да видите как ще изглеждат, можете да коментирате линиите `<template>` и `</template>`, като ги оградите с `<!-- -->`.
+
+✅ Защо мислите, че използваме `id` атрибути за шаблоните? Можем ли да използваме нещо друго, като класове?
+
+## Показване на шаблони с JavaScript
+
+Ако опитате текущия HTML файл в браузър, ще видите, че той остава на `Loading...`. Това е така, защото трябва да добавим JavaScript код, за да създадем и покажем HTML шаблоните.
+
+Създаването на шаблон обикновено се извършва в 3 стъпки:
+
+1. Извличане на елемента шаблон в DOM, например с [`document.getElementById`](https://developer.mozilla.org/docs/Web/API/Document/getElementById).
+2. Клониране на елемента шаблон, използвайки [`cloneNode`](https://developer.mozilla.org/docs/Web/API/Node/cloneNode).
+3. Прикачване към DOM под видим елемент, например с [`appendChild`](https://developer.mozilla.org/docs/Web/API/Node/appendChild).
+
+✅ Защо трябва да клонираме шаблона, преди да го прикачим към DOM? Какво мислите, че би се случило, ако пропуснем тази стъпка?
+
+### Задача
+
+Създайте нов файл с име `app.js` в папката на вашия проект и го импортирайте в секцията `<head>` на вашия HTML:
+
+```html
+<script src="app.js" defer></script>
+```
+
+Сега в `app.js` ще създадем нова функция `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);
+}
+```
+
+Това, което правим тук, са точно 3-те описани стъпки. Създаваме шаблона с `id` `templateId` и поставяме неговото клонирано съдържание в нашия елемент за запазване на място. Забележете, че трябва да използваме `cloneNode(true)`, за да копираме цялото поддърво на шаблона.
+
+Сега извикайте тази функция с един от шаблоните и вижте резултата.
+
+```js
+updateRoute('login');
+```
+
+✅ Каква е целта на този код `app.innerHTML = '';`? Какво се случва без него?
+
+## Създаване на маршрути
+
+Когато говорим за уеб приложение, наричаме *маршрутизация* намерението да се свържат **URL адреси** със специфични екрани, които трябва да бъдат показани. В уебсайт с множество HTML файлове това се прави автоматично, тъй като пътищата на файловете се отразяват в URL адреса. Например, с тези файлове в папката на вашия проект:
+
+```
+mywebsite/index.html
+mywebsite/login.html
+mywebsite/admin/index.html
+```
+
+Ако създадете уеб сървър с `mywebsite` като корен, картографирането на URL адресите ще бъде:
+
+```
+https://site.com            --> mywebsite/index.html
+https://site.com/login.html --> mywebsite/login.html
+https://site.com/admin/     --> mywebsite/admin/index.html
+```
+
+Въпреки това, за нашето уеб приложение използваме един HTML файл, съдържащ всички екрани, така че това стандартно поведение няма да ни помогне. Трябва да създадем тази карта ръчно и да обновим показания шаблон с помощта на JavaScript.
+
+### Задача
+
+Ще използваме прост обект, за да реализираме [карта](https://en.wikipedia.org/wiki/Associative_array) между пътищата на URL адресите и нашите шаблони. Добавете този обект в началото на вашия файл `app.js`.
+
+```js
+const routes = {
+  '/login': { templateId: 'login' },
+  '/dashboard': { templateId: 'dashboard' },
+};
+```
+
+Сега нека модифицираме малко функцията `updateRoute`. Вместо директно да предаваме `templateId` като аргумент, искаме първо да погледнем текущия URL адрес и след това да използваме нашата карта, за да получим съответната стойност на `templateId`. Можем да използваме [`window.location.pathname`](https://developer.mozilla.org/docs/Web/API/Location/pathname), за да получим само секцията с пътя от 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);
+}
+```
+
+Тук картографирахме маршрутите, които декларирахме, към съответния шаблон. Можете да опитате дали работи правилно, като промените URL адреса ръчно в браузъра си.
+
+✅ Какво се случва, ако въведете неизвестен път в URL адреса? Как бихме могли да решим този проблем?
+
+## Добавяне на навигация
+
+Следващата стъпка за нашето приложение е да добавим възможност за навигация между страниците, без да се налага ръчно да променяме URL адреса. Това включва две неща:
+
+1. Обновяване на текущия URL адрес
+2. Обновяване на показания шаблон въз основа на новия URL адрес
+
+Вече се погрижихме за втората част с функцията `updateRoute`, така че трябва да разберем как да обновим текущия URL адрес.
+
+Ще трябва да използваме JavaScript и по-конкретно [`history.pushState`](https://developer.mozilla.org/docs/Web/API/History/pushState), който позволява обновяване на URL адреса и създаване на нов запис в историята на браузъра, без да се презарежда HTML.
+
+> Забележка: Докато HTML елементът за връзка [`<a href>`](https://developer.mozilla.org/docs/Web/HTML/Element/a) може да се използва самостоятелно за създаване на хипервръзки към различни URL адреси, той по подразбиране ще накара браузъра да презареди HTML. Необходимо е да се предотврати това поведение при обработка на маршрутизация с персонализиран JavaScript, използвайки функцията `preventDefault()` върху събитието за кликване.
+
+### Задача
+
+Нека създадем нова функция, която можем да използваме за навигация в нашето приложение:
+
+```js
+function navigate(path) {
+  window.history.pushState({}, path, path);
+  updateRoute();
+}
+```
+
+Този метод първо обновява текущия URL адрес въз основа на дадения път, след това обновява шаблона. Свойството `window.location.origin` връща корена на URL адреса, което ни позволява да реконструираме пълен URL адрес от даден път.
+
+Сега, когато имаме тази функция, можем да се погрижим за проблема, който имаме, ако пътят не съответства на някой от дефинираните маршрути. Ще модифицираме функцията `updateRoute`, като добавим резервен вариант към един от съществуващите маршрути, ако не можем да намерим съвпадение.
+
+```js
+function updateRoute() {
+  const path = window.location.pathname;
+  const route = routes[path];
+
+  if (!route) {
+    return navigate('/login');
+  }
+
+  ...
+```
+
+Ако маршрут не може да бъде намерен, сега ще пренасочим към страницата за вход.
+
+Сега нека създадем функция за получаване на URL адреса, когато се кликне върху връзка, и за предотвратяване на стандартното поведение на браузъра за връзки:
+
+```js
+function onLinkClick(event) {
+  event.preventDefault();
+  navigate(event.target.href);
+}
+```
+
+Нека завършим системата за навигация, като добавим връзки към нашите *Login* и *Logout* връзки в HTML.
+
+```html
+<a href="/dashboard" onclick="onLinkClick(event)">Login</a>
+...
+<a href="/login" onclick="onLinkClick(event)">Logout</a>
+```
+
+Обектът `event` по-горе улавя събитието `click` и го предава на нашата функция `onLinkClick`.
+
+Използвайки атрибута [`onclick`](https://developer.mozilla.org/docs/Web/API/GlobalEventHandlers/onclick), свържете събитието `click` с JavaScript код, тук извикването на функцията `navigate()`.
+
+Опитайте да кликнете върху тези връзки, сега трябва да можете да навигирате между различните екрани на вашето приложение.
+
+✅ Методът `history.pushState` е част от стандарта HTML5 и е имплементиран във [всички модерни браузъри](https://caniuse.com/?search=pushState). Ако създавате уеб приложение за по-стари браузъри, има трик, който можете да използвате вместо този API: използвайки [хеш (`#`)](https://en.wikipedia.org/wiki/URI_fragment) преди пътя, можете да реализирате маршрутизация, която работи с обикновена навигация чрез връзки и не презарежда страницата, тъй като целта му е да създава вътрешни връзки в рамките на страница.
+
+## Обработка на бутоните за назад и напред в браузъра
+
+Използването на `history.pushState` създава нови записи в историята на навигацията на браузъра. Можете да проверите това, като задържите *бутона за назад* на браузъра си, той трябва да показва нещо подобно:
+
+![Екранна снимка на историята на навигацията](../../../../translated_images/history.7fdabbafa521e06455b738d3dafa3ff41d3071deae60ead8c7e0844b9ed987d8.bg.png)
+
+Ако опитате да кликнете върху бутона за назад няколко пъти, ще видите, че текущият URL адрес се променя и историята се обновява, но същият шаблон продължава да се показва.
+
+Това е така, защото приложението не знае, че трябва да извика `updateRoute()` всеки път, когато историята се промени. Ако погледнете документацията за [`history.pushState`](https://developer.mozilla.org/docs/Web/API/History/pushState), можете да видите, че ако състоянието се промени - което означава, че сме преминали към различен URL адрес - се задейства събитието [`popstate`](https://developer.mozilla.org/docs/Web/API/Window/popstate_event). Ще използваме това, за да поправим проблема.
+
+### Задача
+
+За да се уверим, че показаният шаблон се обновява, когато историята на браузъра се променя, ще прикачим нова функция, която извиква `updateRoute()`. Ще направим това в края на нашия файл `app.js`:
+
+```js
+window.onpopstate = () => updateRoute();
+updateRoute();
+```
+
+> Забележка: използвахме [стрелкова функция](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions), за да декларираме нашия обработчик на събития `popstate` за краткост, но обикновена функция би работила по същия начин.
+
+Ето видео за освежаване на знанията за стрелкови функции:
+
+[![Стрелкови функции](https://img.youtube.com/vi/OP6eEbOj2sc/0.jpg)](https://youtube.com/watch?v=OP6eEbOj2sc "Стрелкови функции")
+
+> 🎥 Кликнете върху изображението по-горе за видео за стрелкови функции.
+
+Сега опитайте да използвате бутоните за назад и напред на браузъра си и проверете дали показаният маршрут се обновява правилно този път.
+
+---
+
+## 🚀 Предизвикателство
+
+Добавете нов шаблон и маршрут за трета страница, която показва кредитите за това приложение.
+
+## Тест след урока
+
+[Тест след урока](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/42)
+
+## Преглед и самостоятелно обучение
+
+Маршрутизацията е една от изненадващо сложните части на уеб разработката, особено когато уебът преминава от поведения с презареждане на страници към презареждания на страници в приложения с една страница (Single Page Application). Прочетете малко за [как услугата Azure Static Web App](https://docs.microsoft.com/azure/static-web-apps/routes/?WT.mc_id=academic-77807-sagibbon) обработва маршрутизацията. Можете ли да обясните защо някои от решенията, описани в този документ, са необходими?
+
+## Задание
+
+[Подобрете маршрутизацията](assignment.md)
+
+---
+
+**Отказ от отговорност**:  
+Този документ е преведен с помощта на AI услуга за превод [Co-op Translator](https://github.com/Azure/co-op-translator). Въпреки че се стремим към точност, моля, имайте предвид, че автоматичните преводи може да съдържат грешки или неточности. Оригиналният документ на неговия изходен език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален превод от човек. Ние не носим отговорност за каквито и да било недоразумения или погрешни интерпретации, произтичащи от използването на този превод.
\ No newline at end of file
diff --git a/translations/bg/7-bank-project/1-template-route/assignment.md b/translations/bg/7-bank-project/1-template-route/assignment.md
new file mode 100644
index 00000000..f4d4b6d5
--- /dev/null
+++ b/translations/bg/7-bank-project/1-template-route/assignment.md
@@ -0,0 +1,28 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "8223e429218befa731dd5bfd22299520",
+  "translation_date": "2025-08-27T23:03:36+00:00",
+  "source_file": "7-bank-project/1-template-route/assignment.md",
+  "language_code": "bg"
+}
+-->
+# Подобряване на маршрутизацията
+
+## Инструкции
+
+Декларацията на маршрутите в момента съдържа само ID на шаблона, който да се използва. Но при показване на нова страница понякога е необходимо малко повече. Нека подобрим нашата имплементация на маршрутизацията с две допълнителни функции:
+
+- Дайте заглавия на всеки шаблон и актуализирайте заглавието на прозореца с това ново заглавие, когато шаблонът се промени.
+- Добавете опция за изпълнение на код след промяната на шаблона. Искаме да отпечатваме `'Dashboard is shown'` в конзолата за разработчици всеки път, когато страницата на таблото се показва.
+
+## Критерии за оценка
+
+| Критерий | Отлично                                                                                                                            | Задоволително                                                                                                                                                                             | Нуждае се от подобрение                                |
+| -------- | ----------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------- |
+|          | Двете функции са имплементирани и работят. Добавянето на заглавие и код също работи за нов маршрут, добавен в декларацията `routes`. | Двете функции работят, но поведението е твърдо кодирано и не е конфигурируемо чрез декларацията `routes`. Добавянето на трети маршрут със заглавие и код работи частично или не работи. | Една от функциите липсва или не работи правилно.      |
+
+---
+
+**Отказ от отговорност**:  
+Този документ е преведен с помощта на AI услуга за превод [Co-op Translator](https://github.com/Azure/co-op-translator). Въпреки че се стремим към точност, моля, имайте предвид, че автоматизираните преводи може да съдържат грешки или неточности. Оригиналният документ на неговия роден език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален човешки превод. Ние не носим отговорност за недоразумения или погрешни интерпретации, произтичащи от използването на този превод.
\ No newline at end of file
diff --git a/translations/bg/7-bank-project/2-forms/README.md b/translations/bg/7-bank-project/2-forms/README.md
new file mode 100644
index 00000000..e79aad54
--- /dev/null
+++ b/translations/bg/7-bank-project/2-forms/README.md
@@ -0,0 +1,313 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "b667b7d601e2ee19acb5aa9d102dc9f3",
+  "translation_date": "2025-08-27T22:56:22+00:00",
+  "source_file": "7-bank-project/2-forms/README.md",
+  "language_code": "bg"
+}
+-->
+# Създаване на Банкова Приложение Част 2: Създаване на Форма за Вход и Регистрация
+
+## Предварителен Тест
+
+[Предварителен тест](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/43)
+
+### Въведение
+
+В почти всички съвременни уеб приложения можете да създадете акаунт, за да имате свое собствено лично пространство. Тъй като множество потребители могат да имат достъп до уеб приложението едновременно, е необходим механизъм за съхранение на личните данни на всеки потребител отделно и за избор на информацията, която да се показва. Няма да разглеждаме как да управляваме [потребителската идентичност сигурно](https://en.wikipedia.org/wiki/Authentication), тъй като това е обширна тема сама по себе си, но ще се уверим, че всеки потребител може да създаде един (или повече) банкови акаунти в нашето приложение.
+
+В тази част ще използваме HTML форми, за да добавим вход и регистрация към нашето уеб приложение. Ще видим как да изпращаме данни към сървърна API програмно и в крайна сметка как да дефинираме основни правила за валидиране на потребителски вход.
+
+### Предпоставки
+
+Трябва да сте завършили [HTML шаблони и маршрутизация](../1-template-route/README.md) на уеб приложението за този урок. Също така трябва да инсталирате [Node.js](https://nodejs.org) и [да стартирате сървърната API](../api/README.md) локално, за да можете да изпращате данни за създаване на акаунти.
+
+**Обърнете внимание**
+Ще имате два терминала, работещи едновременно, както е описано по-долу:
+1. За основното банково приложение, което създадохме в урока [HTML шаблони и маршрутизация](../1-template-route/README.md)
+2. За [сървърната API на Банковото Приложение](../api/README.md), която току-що настроихме.
+
+Трябва да стартирате и двата сървъра, за да продължите с останалата част от урока. Те слушат на различни портове (порт `3000` и порт `5000`), така че всичко трябва да работи добре.
+
+Можете да тествате дали сървърът работи правилно, като изпълните тази команда в терминал:
+
+```sh
+curl http://localhost:5000/api
+# -> should return "Bank API v1.0.0" as a result
+```
+
+---
+
+## Форма и контроли
+
+Елементът `<form>` обхваща секция от HTML документ, където потребителят може да въвежда и изпраща данни чрез интерактивни контроли. Съществуват всякакви потребителски интерфейсни (UI) контроли, които могат да се използват в рамките на форма, като най-често срещаните са елементите `<input>` и `<button>`.
+
+Има много различни [типове](https://developer.mozilla.org/docs/Web/HTML/Element/input) `<input>`, например за създаване на поле, където потребителят може да въведе своето потребителско име, можете да използвате:
+
+```html
+<input id="username" name="username" type="text">
+```
+
+Атрибутът `name` ще се използва като име на свойството, когато данните от формата бъдат изпратени. Атрибутът `id` се използва за асоцииране на `<label>` с контролата на формата.
+
+> Разгледайте целия списък с [`<input>` типове](https://developer.mozilla.org/docs/Web/HTML/Element/input) и [други контроли на формата](https://developer.mozilla.org/docs/Learn/Forms/Other_form_controls), за да получите представа за всички вградени UI елементи, които можете да използвате при изграждането на вашия интерфейс.
+
+✅ Забележете, че `<input>` е [празен елемент](https://developer.mozilla.org/docs/Glossary/Empty_element), на който не трябва да добавяте съответстващ затварящ таг. Можете обаче да използвате самозатварящата се нотация `<input/>`, но това не е задължително.
+
+Елементът `<button>` в рамките на форма е малко специален. Ако не зададете неговия атрибут `type`, той автоматично ще изпрати данните от формата към сървъра, когато бъде натиснат. Ето възможните стойности за `type`:
+
+- `submit`: По подразбиране в рамките на `<form>`, бутонът задейства действието за изпращане на формата.
+- `reset`: Бутонът нулира всички контроли на формата до техните начални стойности.
+- `button`: Не задава никакво поведение по подразбиране, когато бутонът бъде натиснат. Можете да му зададете персонализирани действия с помощта на JavaScript.
+
+### Задача
+
+Нека започнем с добавяне на форма към шаблона `login`. Ще ни трябва поле за *потребителско име* и бутон *Вход*.
+
+```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>
+```
+
+Ако погледнете по-отблизо, можете да забележите, че тук сме добавили и елемент `<label>`. Елементите `<label>` се използват за добавяне на име към UI контроли, като нашето поле за потребителско име. Етикетите са важни за четимостта на вашите форми, но също така идват с допълнителни предимства:
+
+- Чрез асоцииране на етикет с контрола на формата, това помага на потребителите, използващи асистивни технологии (като екранен четец), да разберат какви данни се очаква да предоставят.
+- Можете да кликнете върху етикета, за да поставите директно фокуса върху свързаното поле, което улеснява достъпа на устройства с тъчскрийн.
+
+> [Достъпността](https://developer.mozilla.org/docs/Learn/Accessibility/What_is_accessibility) в уеб е много важна тема, която често се пренебрегва. Благодарение на [семантичните HTML елементи](https://developer.mozilla.org/docs/Learn/Accessibility/HTML) не е трудно да създадете достъпно съдържание, ако ги използвате правилно. Можете [да прочетете повече за достъпността](https://developer.mozilla.org/docs/Web/Accessibility), за да избегнете често срещани грешки и да станете отговорен разработчик.
+
+Сега ще добавим втора форма за регистрация, точно под предишната:
+
+```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>
+```
+
+С помощта на атрибута `value` можем да дефинираме стойност по подразбиране за дадено поле.
+Забележете също, че полето за `balance` има тип `number`. Изглежда ли различно от другите полета? Опитайте да взаимодействате с него.
+
+✅ Можете ли да навигирате и взаимодействате с формите само с клавиатура? Как бихте направили това?
+
+## Изпращане на данни към сървъра
+
+Сега, когато имаме функционален интерфейс, следващата стъпка е да изпратим данните към сървъра. Нека направим бърз тест с текущия код: какво се случва, ако кликнете върху бутона *Вход* или *Регистрация*?
+
+Забелязахте ли промяната в секцията с URL на браузъра?
+
+![Снимка на промяната в URL на браузъра след клик върху бутона Регистрация](../../../../translated_images/click-register.e89a30bf0d4bc9ca867dc537c4cea679a7c26368bd790969082f524fed2355bc.bg.png)
+
+По подразбиране действието на `<form>` е да изпрати формата към текущия URL на сървъра, използвайки [GET метода](https://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.3), като добавя данните от формата директно към URL. Този метод обаче има някои недостатъци:
+
+- Изпратените данни са много ограничени по размер (около 2000 символа)
+- Данните са директно видими в URL (не е подходящо за пароли)
+- Не работи с качване на файлове
+
+Затова можете да го промените, за да използва [POST метода](https://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.5), който изпраща данните от формата към сървъра в тялото на HTTP заявката, без предишните ограничения.
+
+> Въпреки че POST е най-често използваният метод за изпращане на данни, [в някои специфични сценарии](https://www.w3.org/2001/tag/doc/whenToUseGet.html) е за предпочитане да се използва GET метод, например при имплементиране на поле за търсене.
+
+### Задача
+
+Добавете свойства `action` и `method` към формата за регистрация:
+
+```html
+<form id="registerForm" action="//localhost:5000/api/accounts" method="POST">
+```
+
+Сега опитайте да регистрирате нов акаунт с вашето име. След като кликнете върху бутона *Регистрация*, трябва да видите нещо подобно:
+
+![Прозорец на браузъра на адрес localhost:5000/api/accounts, показващ JSON низ с потребителски данни](../../../../translated_images/form-post.61de4ca1b964d91a9e338416e19f218504dd0af5f762fbebabfe7ae80edf885f.bg.png)
+
+Ако всичко върви добре, сървърът трябва да отговори на вашата заявка с [JSON](https://www.json.org/json-en.html) отговор, съдържащ данните за създадения акаунт.
+
+✅ Опитайте да се регистрирате отново със същото име. Какво се случва?
+
+## Изпращане на данни без презареждане на страницата
+
+Както вероятно забелязахте, има малък проблем с подхода, който току-що използвахме: при изпращане на формата, излизаме от нашето приложение и браузърът се пренасочва към URL на сървъра. Опитваме се да избегнем всички презареждания на страницата с нашето уеб приложение, тъй като създаваме [Едностранично приложение (SPA)](https://en.wikipedia.org/wiki/Single-page_application).
+
+За да изпратим данните от формата към сървъра без да принуждаваме презареждане на страницата, трябва да използваме JavaScript код. Вместо да поставяме URL в свойството `action` на елемента `<form>`, можете да използвате произволен JavaScript код, предшестван от низа `javascript:`, за да изпълните персонализирано действие. Използването на това също означава, че ще трябва да имплементирате някои задачи, които преди това се изпълняваха автоматично от браузъра:
+
+- Извличане на данните от формата
+- Конвертиране и кодиране на данните в подходящ формат
+- Създаване на HTTP заявка и изпращането й към сървъра
+
+### Задача
+
+Заменете `action` на формата за регистрация с:
+
+```html
+<form id="registerForm" action="javascript:register()">
+```
+
+Отворете `app.js` и добавете нова функция с име `register`:
+
+```js
+function register() {
+  const registerForm = document.getElementById('registerForm');
+  const formData = new FormData(registerForm);
+  const data = Object.fromEntries(formData);
+  const jsonData = JSON.stringify(data);
+}
+```
+
+Тук извличаме елемента на формата с помощта на `getElementById()` и използваме помощника [`FormData`](https://developer.mozilla.org/docs/Web/API/FormData), за да извлечем стойностите от контролите на формата като набор от ключ/стойност двойки. След това конвертираме данните в обикновен обект с помощта на [`Object.fromEntries()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/fromEntries) и накрая сериализираме данните в [JSON](https://www.json.org/json-en.html), формат, който често се използва за обмен на данни в уеб.
+
+Данните вече са готови за изпращане към сървъра. Създайте нова функция с име `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' };
+  }
+}
+```
+
+Какво прави тази функция? Първо, забележете ключовата дума `async` тук. Това означава, че функцията съдържа код, който ще се изпълнява [**асинхронно**](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/async_function). Когато се използва заедно с ключовата дума `await`, тя позволява изчакване за изпълнение на асинхронен код - като изчакване за отговор от сървъра тук - преди да продължи.
+
+Ето кратко видео за използването на `async/await`:
+
+[![Async и Await за управление на обещания](https://img.youtube.com/vi/YwmlRkrxvkk/0.jpg)](https://youtube.com/watch?v=YwmlRkrxvkk "Async и Await за управление на обещания")
+
+> 🎥 Кликнете върху изображението по-горе за видео за async/await.
+
+Използваме API `fetch()`, за да изпратим JSON данни към сървъра. Този метод приема 2 параметъра:
+
+- URL на сървъра, така че тук поставяме `//localhost:5000/api/accounts`.
+- Настройките на заявката. Тук задаваме метода на `POST` и предоставяме `body` за заявката. Тъй като изпращаме JSON данни към сървъра, трябва също да зададем заглавката `Content-Type` на `application/json`, за да може сървърът да интерпретира съдържанието.
+
+Тъй като сървърът ще отговори на заявката с JSON, можем да използваме `await response.json()`, за да анализираме JSON съдържанието и да върнем получения обект. Забележете, че този метод е асинхронен, така че използваме ключовата дума `await` тук, преди да върнем, за да се уверим, че всички грешки по време на анализа също са уловени.
+
+Сега добавете малко код към функцията `register`, за да извикате `createAccount()`:
+
+```js
+const result = await createAccount(jsonData);
+```
+
+Тъй като използваме ключовата дума `await` тук, трябва да добавим ключовата дума `async` преди функцията register:
+
+```js
+async function register() {
+```
+
+Накрая, нека добавим някои логове, за да проверим резултата. Финалната функция трябва да изглежда така:
+
+```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);
+}
+```
+
+Това беше малко дълго, но стигнахме до целта! Ако отворите [инструментите за разработчици на браузъра](https://developer.mozilla.org/docs/Learn/Common_questions/What_are_browser_developer_tools) и опитате да регистрирате нов акаунт, не трябва да виждате никаква промяна на уеб страницата, но съобщение ще се появи в конзолата, потвърждавайки, че всичко работи.
+
+![Снимка, показваща съобщение в конзолата на браузъра](../../../../translated_images/browser-console.efaf0b51aaaf67782a29e1a0bb32cc063f189b18e894eb5926e02f1abe864ec2.bg.png)
+
+✅ Смятате ли, че данните се изпращат към сървъра сигурно? Какво би станало, ако някой успее да прихване заявката? Можете да прочетете за [HTTPS](https://en.wikipedia.org/wiki/HTTPS), за да научите повече за сигурната комуникация на данни.
+
+## Валидиране на данни
+
+Ако опитате да регистрирате нов акаунт, без да зададете потребителско име, можете да видите, че сървърът връща грешка със статус код [400 (Bad Request)](https://developer.mozilla.org/docs/Web/HTTP/Status/400#:~:text=The%20HyperText%20Transfer%20Protocol%20(HTTP,%2C%20or%20deceptive%20request%20routing).).
+
+Преди да изпращате данни към сървъра, е добра практика [да валидирате данните от формата](https://developer.mozilla.org/docs/Learn/Forms/Form_validation) предварително, когато е възможно, за да се уверите, че изпращате валидна заявка. HTML5 контролите на формите предоставят вградена валидирация чрез различни атрибути:
+
+- `required`: полето трябва да бъде попълнено, иначе формата не може да бъде изпратена.
+- `minlength` и `maxlength`: дефинират минималния и максималния брой символи в текстови полета.
+- `min` и `max`: дефинират минималната и максималната стойност на числово поле.
+- `type`: дефинира вида на очакваните данни, като `number`, `email`, `file` или [други вградени типове](https://developer.mozilla.org/docs/Web/HTML/Element/input). Този атрибут може също да промени визуалното представяне на контролата на формата.
+- `pattern`: позволява дефиниране на [регулярен израз](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Regular_Expressions), за да се провери дали въведените данни са валидни или не.
+> Съвет: можете да персонализирате външния вид на вашите контролни елементи във формуляра в зависимост от това дали са валидни или не, като използвате CSS псевдокласовете `:valid` и `:invalid`.
+### Задача
+
+Има два задължителни полета за създаване на валиден нов акаунт: потребителско име и валута, като останалите полета са по избор. Актуализирайте HTML формата, като използвате както атрибута `required`, така и текст в етикета на полето, за да направите следното:
+
+```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>
+```
+
+Въпреки че тази конкретна сървърна имплементация не налага специфични ограничения за максималната дължина на полетата, винаги е добра практика да се задават разумни ограничения за всяко текстово поле, което потребителят попълва.
+
+Добавете атрибут `maxlength` към текстовите полета:
+
+```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">
+```
+
+Сега, ако натиснете бутона *Регистрация* и някое поле не спазва зададените правила за валидиране, трябва да видите нещо подобно:
+
+![Скрийншот, показващ грешка при валидиране, когато се опитвате да изпратите формата](../../../../translated_images/validation-error.8bd23e98d416c22f80076d04829a4bb718e0e550fd622862ef59008ccf0d5dce.bg.png)
+
+Валидацията, която се извършва *преди* изпращането на данни към сървъра, се нарича **клиентска валидация**. Но имайте предвид, че не винаги е възможно да се извършат всички проверки без изпращане на данни. Например, тук не можем да проверим дали вече съществува акаунт със същото потребителско име, без да изпратим заявка към сървъра. Допълнителната валидация, която се извършва на сървъра, се нарича **сървърна валидация**.
+
+Обикновено и двете трябва да бъдат имплементирани, като клиентската валидация подобрява потребителското изживяване чрез предоставяне на незабавна обратна връзка, а сървърната валидация е от съществено значение, за да се гарантира, че данните, които обработвате, са надеждни и безопасни.
+
+---
+
+## 🚀 Предизвикателство
+
+Покажете съобщение за грешка в HTML, ако потребителят вече съществува.
+
+Ето пример за това как може да изглежда финалната страница за вход след малко стилизиране:
+
+![Скрийншот на страницата за вход след добавяне на CSS стилове](../../../../translated_images/result.96ef01f607bf856aa9789078633e94a4f7664d912f235efce2657299becca483.bg.png)
+
+## Тест след лекцията
+
+[Тест след лекцията](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/44)
+
+## Преглед и самостоятелно обучение
+
+Разработчиците са станали много креативни в усилията си за създаване на форми, особено по отношение на стратегии за валидация. Научете повече за различни подходи към формите, като разгледате [CodePen](https://codepen.com); можете ли да намерите интересни и вдъхновяващи форми?
+
+## Задание
+
+[Стилизирайте вашето банково приложение](assignment.md)
+
+---
+
+**Отказ от отговорност**:  
+Този документ е преведен с помощта на AI услуга за превод [Co-op Translator](https://github.com/Azure/co-op-translator). Въпреки че се стремим към точност, моля, имайте предвид, че автоматизираните преводи може да съдържат грешки или неточности. Оригиналният документ на неговия роден език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален човешки превод. Не носим отговорност за недоразумения или погрешни интерпретации, произтичащи от използването на този превод.
\ No newline at end of file
diff --git a/translations/bg/7-bank-project/2-forms/assignment.md b/translations/bg/7-bank-project/2-forms/assignment.md
new file mode 100644
index 00000000..3fd2ed50
--- /dev/null
+++ b/translations/bg/7-bank-project/2-forms/assignment.md
@@ -0,0 +1,27 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "474f3ab1ee755ca980fc9104a0316e17",
+  "translation_date": "2025-08-27T22:58:30+00:00",
+  "source_file": "7-bank-project/2-forms/assignment.md",
+  "language_code": "bg"
+}
+-->
+# Стилизирайте вашето банково приложение
+
+## Инструкции
+
+Създайте нов файл `styles.css` и добавете връзка към него в текущия файл `index.html`. В CSS файла, който току-що създадохте, добавете стилове, за да направите страниците *Вход* и *Табло* да изглеждат добре и подредено. Опитайте се да създадете цветова тема, която да придаде на приложението ви собствена идентичност.
+
+> Съвет: можете да промените HTML и да добавите нови елементи и класове, ако е необходимо.
+
+## Критерии за оценка
+
+| Критерии | Отлично                                                                                                                | Задоволително                                                                  | Нуждае се от подобрение                                                                          |
+| -------- | ---------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------- |
+|          | Всички страници изглеждат чисти и четливи, с последователна цветова тема и ясно разграничени различни секции.          | Страниците са стилизирани, но без тема или със секции, които не са ясно отделени. | Страниците липсват стилове, секциите изглеждат неподредени и информацията е трудна за четене.   |
+
+---
+
+**Отказ от отговорност**:  
+Този документ е преведен с помощта на AI услуга за превод [Co-op Translator](https://github.com/Azure/co-op-translator). Въпреки че се стремим към точност, моля, имайте предвид, че автоматизираните преводи може да съдържат грешки или неточности. Оригиналният документ на неговия роден език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален човешки превод. Ние не носим отговорност за недоразумения или погрешни интерпретации, произтичащи от използването на този превод.
\ No newline at end of file
diff --git a/translations/bg/7-bank-project/3-data/README.md b/translations/bg/7-bank-project/3-data/README.md
new file mode 100644
index 00000000..856d3be3
--- /dev/null
+++ b/translations/bg/7-bank-project/3-data/README.md
@@ -0,0 +1,337 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "f587e913e3f7c0b1c549a05dd74ee8e5",
+  "translation_date": "2025-08-27T22:59:23+00:00",
+  "source_file": "7-bank-project/3-data/README.md",
+  "language_code": "bg"
+}
+-->
+# Създаване на банково приложение, част 3: Методи за извличане и използване на данни
+
+## Предварителен тест
+
+[Предварителен тест](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/45)
+
+### Въведение
+
+В основата на всяко уеб приложение стои *данните*. Данните могат да приемат различни форми, но основната им цел винаги е да предоставят информация на потребителя. С развитието на уеб приложенията към по-голяма интерактивност и сложност, начинът, по който потребителят достъпва и взаимодейства с информацията, се превръща в ключова част от уеб разработката.
+
+В този урок ще разгледаме как да извличаме данни от сървър асинхронно и да ги използваме за показване на информация на уеб страница, без да презареждаме HTML.
+
+### Предпоставки
+
+Трябва да сте изградили [Формата за вход и регистрация](../2-forms/README.md) като част от уеб приложението за този урок. Също така трябва да инсталирате [Node.js](https://nodejs.org) и [да стартирате API сървъра](../api/README.md) локално, за да получите данни за акаунта.
+
+Можете да тествате дали сървърът работи правилно, като изпълните тази команда в терминала:
+
+```sh
+curl http://localhost:5000/api
+# -> should return "Bank API v1.0.0" as a result
+```
+
+---
+
+## AJAX и извличане на данни
+
+Традиционните уеб сайтове обновяват съдържанието, когато потребителят избере линк или изпрати данни чрез форма, като презареждат цялата HTML страница. Всеки път, когато трябва да се заредят нови данни, уеб сървърът връща изцяло нова HTML страница, която трябва да бъде обработена от браузъра, прекъсвайки текущото действие на потребителя и ограничавайки взаимодействията по време на презареждането. Този работен процес се нарича *многостранично приложение* или *MPA*.
+
+![Работен процес на обновяване в многостранично приложение](../../../../translated_images/mpa.7f7375a1a2d4aa779d3f928a2aaaf9ad76bcdeb05cfce2dc27ab126024050f51.bg.png)
+
+С развитието на уеб приложенията към по-голяма сложност и интерактивност се появи нова техника, наречена [AJAX (Асинхронен JavaScript и XML)](https://en.wikipedia.org/wiki/Ajax_(programming)). Тази техника позволява на уеб приложенията да изпращат и получават данни от сървър асинхронно, използвайки JavaScript, без да се налага презареждане на HTML страницата, което води до по-бързи обновления и по-гладко взаимодействие с потребителя. Когато нови данни се получат от сървъра, текущата HTML страница може да бъде обновена с JavaScript, използвайки [DOM](https://developer.mozilla.org/docs/Web/API/Document_Object_Model) API. С течение на времето този подход еволюира в това, което сега се нарича [*Едностранично приложение* или *SPA*](https://en.wikipedia.org/wiki/Single-page_application).
+
+![Работен процес на обновяване в едностранично приложение](../../../../translated_images/spa.268ec73b41f992c2a21ef9294235c6ae597b3c37e2c03f0494c2d8857325cc57.bg.png)
+
+Когато AJAX беше въведен за първи път, единственият наличен API за асинхронно извличане на данни беше [`XMLHttpRequest`](https://developer.mozilla.org/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest). Но съвременните браузъри вече поддържат по-удобния и мощен [`Fetch` API](https://developer.mozilla.org/docs/Web/API/Fetch_API), който използва обещания и е по-подходящ за манипулиране на JSON данни.
+
+> Въпреки че всички съвременни браузъри поддържат `Fetch API`, ако искате вашето уеб приложение да работи на стари браузъри, винаги е добра идея първо да проверите [таблицата за съвместимост на caniuse.com](https://caniuse.com/fetch).
+
+### Задача
+
+В [предишния урок](../2-forms/README.md) реализирахме формата за регистрация за създаване на акаунт. Сега ще добавим код за вход с вече съществуващ акаунт и извличане на неговите данни. Отворете файла `app.js` и добавете нова функция `login`:
+
+```js
+async function login() {
+  const loginForm = document.getElementById('loginForm')
+  const user = loginForm.user.value;
+}
+```
+
+Тук започваме с извличане на елемента на формата чрез `getElementById()`, след което получаваме потребителското име от входа с `loginForm.user.value`. Всеки контрол на формата може да бъде достъпен чрез неговото име (зададено в HTML чрез атрибута `name`) като свойство на формата.
+
+По подобен начин на това, което направихме за регистрацията, ще създадем друга функция за изпълнение на заявка към сървъра, но този път за извличане на данни за акаунта:
+
+```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' };
+  }
+}
+```
+
+Използваме `fetch` API, за да заявим данните асинхронно от сървъра, но този път не ни трябват допълнителни параметри освен URL, който да извикаме, тъй като само правим заявка за данни. По подразбиране `fetch` създава [`GET`](https://developer.mozilla.org/docs/Web/HTTP/Methods/GET) HTTP заявка, което е точно това, което търсим тук.
+
+✅ `encodeURIComponent()` е функция, която избягва специални символи за URL. Какви проблеми бихме могли да имаме, ако не извикаме тази функция и използваме директно стойността на `user` в URL?
+
+Сега ще обновим нашата функция `login`, за да използва `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');
+}
+```
+
+Първо, тъй като `getAccount` е асинхронна функция, трябва да я съчетаем с ключовата дума `await`, за да изчакаме резултата от сървъра. Както при всяка заявка към сървъра, трябва да се справим и с грешки. Засега ще добавим само съобщение за грешка в логовете и ще се върнем към това по-късно.
+
+След това трябва да съхраним данните някъде, за да можем по-късно да ги използваме за показване на информацията на таблото. Тъй като променливата `account` все още не съществува, ще създадем глобална променлива за нея в началото на нашия файл:
+
+```js
+let account = null;
+```
+
+След като данните за потребителя са запазени в променлива, можем да преминем от страницата за *вход* към *таблото* с помощта на функцията `navigate()`, която вече имаме.
+
+Накрая трябва да извикаме нашата функция `login`, когато формата за вход е изпратена, като модифицираме HTML:
+
+```html
+<form id="loginForm" action="javascript:login()">
+```
+
+Тествайте дали всичко работи правилно, като регистрирате нов акаунт и опитате да влезете с него.
+
+Преди да преминем към следващата част, можем също да завършим функцията `register`, като добавим това в края на функцията:
+
+```js
+account = result;
+navigate('/dashboard');
+```
+
+✅ Знаете ли, че по подразбиране можете да извиквате API на сървъра само от *същия домейн и порт*, от който разглеждате уеб страницата? Това е механизъм за сигурност, наложен от браузърите. Но чакайте, нашето уеб приложение работи на `localhost:3000`, докато API сървърът работи на `localhost:5000`. Защо работи? С помощта на техника, наречена [Cross-Origin Resource Sharing (CORS)](https://developer.mozilla.org/docs/Web/HTTP/CORS), е възможно да се изпълняват HTTP заявки между различни източници, ако сървърът добави специални заглавия към отговора, позволявайки изключения за конкретни домейни.
+
+> Научете повече за API, като вземете този [урок](https://docs.microsoft.com/learn/modules/use-apis-discover-museum-art/?WT.mc_id=academic-77807-sagibbon).
+
+## Обновяване на HTML за показване на данни
+
+Сега, когато имаме данните за потребителя, трябва да обновим съществуващия HTML, за да ги покажем. Вече знаем как да извличаме елемент от DOM, например с `document.getElementById()`. След като имате основен елемент, ето някои API, които можете да използвате, за да го модифицирате или добавите дъщерни елементи към него:
+
+- С помощта на свойството [`textContent`](https://developer.mozilla.org/docs/Web/API/Node/textContent) можете да промените текста на елемент. Имайте предвид, че промяната на тази стойност премахва всички дъщерни елементи на елемента (ако има такива) и ги заменя с предоставения текст. По този начин това е и ефективен метод за премахване на всички дъщерни елементи на даден елемент, като му зададете празен низ `''`.
+
+- С помощта на [`document.createElement()`](https://developer.mozilla.org/docs/Web/API/Document/createElement) заедно с метода [`append()`](https://developer.mozilla.org/docs/Web/API/ParentNode/append) можете да създавате и прикачвате един или повече нови дъщерни елементи.
+
+✅ С помощта на свойството [`innerHTML`](https://developer.mozilla.org/docs/Web/API/Element/innerHTML) на елемент също е възможно да промените неговото HTML съдържание, но това трябва да се избягва, тъй като е уязвимо към [атаки чрез междусайтово скриптиране (XSS)](https://developer.mozilla.org/docs/Glossary/Cross-site_scripting).
+
+### Задача
+
+Преди да преминем към екрана на таблото, има още нещо, което трябва да направим на страницата за *вход*. В момента, ако се опитате да влезете с потребителско име, което не съществува, съобщение се показва в конзолата, но за обикновения потребител нищо не се променя и не знае какво се случва.
+
+Нека добавим елемент за запазване на място във формата за вход, където можем да показваме съобщение за грешка, ако е необходимо. Добро място би било точно преди бутона за вход `<button>`:
+
+```html
+...
+<div id="loginError"></div>
+<button>Login</button>
+...
+```
+
+Този `<div>` елемент е празен, което означава, че нищо няма да се показва на екрана, докато не добавим съдържание към него. Също така му даваме `id`, за да можем лесно да го извлечем с JavaScript.
+
+Върнете се към файла `app.js` и създайте нова помощна функция `updateElement`:
+
+```js
+function updateElement(id, text) {
+  const element = document.getElementById(id);
+  element.textContent = text;
+}
+```
+
+Тази функция е доста проста: като се даде *id* на елемент и *текст*, тя ще обнови текстовото съдържание на DOM елемента с съответстващото `id`. Нека използваме този метод вместо предишното съобщение за грешка във функцията `login`:
+
+```js
+if (data.error) {
+  return updateElement('loginError', data.error);
+}
+```
+
+Сега, ако се опитате да влезете с невалиден акаунт, трябва да видите нещо подобно:
+
+![Снимка на екрана, показваща съобщението за грешка при вход](../../../../translated_images/login-error.416fe019b36a63276764c2349df5d99e04ebda54fefe60c715ee87a28d5d4ad0.bg.png)
+
+Сега имаме текст за грешка, който се показва визуално, но ако го опитате със скрийн рийдър, ще забележите, че нищо не се обявява. За да може текст, който се добавя динамично към страница, да бъде обявен от скрийн рийдъри, той трябва да използва нещо, наречено [Жива област (Live Region)](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/ARIA_Live_Regions). Тук ще използваме специфичен тип жива област, наречена предупреждение:
+
+```html
+<div id="loginError" role="alert"></div>
+```
+
+Реализирайте същото поведение за грешките във функцията `register` (не забравяйте да обновите HTML).
+
+## Показване на информация на таблото
+
+Използвайки същите техники, които току-що разгледахме, ще се погрижим и за показването на информацията за акаунта на страницата на таблото.
+
+Ето как изглежда обектът на акаунта, получен от сървъра:
+
+```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 }
+  ],
+}
+```
+
+> Забележка: за да улесните работата си, можете да използвате предварително съществуващия акаунт `test`, който вече е попълнен с данни.
+
+### Задача
+
+Нека започнем с подмяна на секцията "Баланс" в HTML, за да добавим елементи за запазване на място:
+
+```html
+<section>
+  Balance: <span id="balance"></span><span id="currency"></span>
+</section>
+```
+
+Също така ще добавим нова секция точно под нея, за да покажем описанието на акаунта:
+
+```html
+<h2 id="description"></h2>
+```
+
+✅ Тъй като описанието на акаунта функционира като заглавие за съдържанието под него, то е маркирано семантично като заглавие. Научете повече за това как [структурата на заглавията](https://www.nomensa.com/blog/2017/how-structure-headings-web-accessibility) е важна за достъпността и направете критичен преглед на страницата, за да определите какво още може да бъде заглавие.
+
+След това ще създадем нова функция в `app.js`, за да попълним елементите за запазване на място:
+
+```js
+function updateDashboard() {
+  if (!account) {
+    return navigate('/login');
+  }
+
+  updateElement('description', account.description);
+  updateElement('balance', account.balance.toFixed(2));
+  updateElement('currency', account.currency);
+}
+```
+
+Първо, проверяваме дали имаме необходимите данни за акаунта, преди да продължим. След това използваме функцията `updateElement()`, която създадохме по-рано, за да обновим HTML.
+
+> За да направим показването на баланса по-привлекателно, използваме метода [`toFixed(2)`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed), за да принудим показването на стойността с 2 цифри след десетичната точка.
+
+Сега трябва да извикаме нашата функция `updateDashboard()` всеки път, когато таблото се зарежда. Ако вече сте завършили [задачата от урок 1](../1-template-route/assignment.md), това трябва да е лесно, в противен случай можете да използвате следната реализация.
+
+Добавете този код в края на функцията `updateRoute()`:
+
+```js
+if (typeof route.init === 'function') {
+  route.init();
+}
+```
+
+И обновете дефиницията на маршрутите с:
+
+```js
+const routes = {
+  '/login': { templateId: 'login' },
+  '/dashboard': { templateId: 'dashboard', init: updateDashboard }
+};
+```
+
+С тази промяна, всеки път, когато страницата на таблото се показва, се извиква функцията `updateDashboard()`. След вход трябва да можете да видите баланса на акаунта, валутата и описанието.
+
+## Създаване на редове в таблица динамично с HTML шаблони
+
+В [първия урок](../1-template-route/README.md) използвахме HTML шаблони заедно с метода [`appendChild()`](https://developer.mozilla.org/docs/Web/API/Node/appendChild), за да реализираме навигацията в нашето приложение. Шаблоните могат да бъдат и по-малки и да се използват за динамично попълване на повтарящи се части от страница.
+
+Ще използваме подобен подход, за да покажем списъка с транзакции в HTML таблицата.
+
+### Задача
+
+Добавете нов шаблон в HTML `<body>`:
+
+```html
+<template id="transaction">
+  <tr>
+    <td></td>
+    <td></td>
+    <td></td>
+  </tr>
+</template>
+```
+
+Този шаблон представлява един ред в таблицата с трите колони, които искаме да попълним: *дата*, *обект* и *сума* на транзакцията.
+
+След това добавете този `id` атрибут към `<tbody>` елемента на таблицата в шаблона на таблото, за да го направите по-лесен за намиране с JavaScript:
+
+```html
+<tbody id="transactions"></tbody>
+```
+
+Нашият HTML е готов, нека преминем към JavaScript кода и създадем нова функция `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;
+}
+```
+
+Тази функция прави точно това, което предполага името ѝ: използвайки шаблона, който създадохме по-рано, тя създава нов ред в таблицата и попълва съдържанието му с данни за транзакцията. Ще я използваме във функцията `updateDashboard()`, за да попълним таблицата:
+
+```js
+const transactionsRows = document.createDocumentFragment();
+for (const transaction of account.transactions) {
+  const transactionRow = createTransactionRow(transaction);
+  transactionsRows.appendChild(transactionRow);
+}
+updateElement('transactions', transactionsRows);
+```
+
+Тук използваме метода [`document.createDocumentFragment()`](https://developer.mozilla.org/docs/Web/API/Document/createDocumentFragment), който създава нов DOM фрагмент, върху който можем да работим, преди накрая да го прикачим към нашата HTML таблица.
+
+Има още едно нещо, което трябва да направим, преди този код да заработи, тъй като нашата функция `updateElement()` в момента поддържа само текстово съдър
+Ако опитате да влезете с акаунта `test`, вече трябва да виждате списък с транзакции на таблото 🎉.
+
+---
+
+## 🚀 Предизвикателство
+
+Работете заедно, за да направите страницата на таблото да изглежда като истинско банково приложение. Ако вече сте стилизирали приложението си, опитайте да използвате [медийни заявки](https://developer.mozilla.org/docs/Web/CSS/Media_Queries), за да създадете [отзивчив дизайн](https://developer.mozilla.org/docs/Web/Progressive_web_apps/Responsive/responsive_design_building_blocks), който работи добре както на настолни, така и на мобилни устройства.
+
+Ето пример за стилизирана страница на таблото:
+
+![Снимка на примерен резултат на таблото след стилизиране](../../../../translated_images/screen2.123c82a831a1d14ab2061994be2fa5de9cec1ce651047217d326d4773a6348e4.bg.png)
+
+## Тест след лекцията
+
+[Тест след лекцията](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/46)
+
+## Задание
+
+[Рефакторирайте и коментирайте кода си](assignment.md)
+
+---
+
+**Отказ от отговорност**:  
+Този документ е преведен с помощта на AI услуга за превод [Co-op Translator](https://github.com/Azure/co-op-translator). Въпреки че се стремим към точност, моля, имайте предвид, че автоматизираните преводи може да съдържат грешки или неточности. Оригиналният документ на неговия роден език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален човешки превод. Ние не носим отговорност за недоразумения или погрешни интерпретации, произтичащи от използването на този превод.
\ No newline at end of file
diff --git a/translations/bg/7-bank-project/3-data/assignment.md b/translations/bg/7-bank-project/3-data/assignment.md
new file mode 100644
index 00000000..dc8f42a5
--- /dev/null
+++ b/translations/bg/7-bank-project/3-data/assignment.md
@@ -0,0 +1,29 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "a4abf305ede1cfaadd56a8fab4b4c288",
+  "translation_date": "2025-08-27T23:01:12+00:00",
+  "source_file": "7-bank-project/3-data/assignment.md",
+  "language_code": "bg"
+}
+-->
+# Рефакторирайте и коментирайте вашия код
+
+## Инструкции
+
+С разрастването на вашия кодов проект е важно често да рефакторирате кода, за да остане четим и лесен за поддръжка с времето. Добавете коментари и рефакторирайте вашия `app.js`, за да подобрите качеството на кода:
+
+- Извлечете константи, като например основния URL на сървърния API
+- Факторизирайте подобен код: например можете да създадете функция `sendRequest()`, за да обедините кода, използван както в `createAccount()`, така и в `getAccount()`
+- Реорганизирайте кода, за да го направите по-лесен за четене, и добавете коментари
+
+## Критерии за оценка
+
+| Критерии | Отлично                                                                                                                                                     | Задоволително                                                                                     | Нуждае се от подобрение                                                                     |
+| -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------ |
+|          | Кодът е коментиран, добре организиран в различни секции и лесен за четене. Константите са извлечени и е създадена факторизирана функция `sendRequest()`.      | Кодът е чист, но може да бъде подобрен с повече коментари, извличане на константи или факторизация. | Кодът е хаотичен, не е коментиран, константите не са извлечени и кодът не е факторизиран.   |
+
+---
+
+**Отказ от отговорност**:  
+Този документ е преведен с помощта на AI услуга за превод [Co-op Translator](https://github.com/Azure/co-op-translator). Въпреки че се стремим към точност, моля, имайте предвид, че автоматизираните преводи може да съдържат грешки или неточности. Оригиналният документ на неговия роден език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален човешки превод. Не носим отговорност за недоразумения или погрешни интерпретации, произтичащи от използването на този превод.
\ No newline at end of file
diff --git a/translations/bg/7-bank-project/4-state-management/README.md b/translations/bg/7-bank-project/4-state-management/README.md
new file mode 100644
index 00000000..9875ddad
--- /dev/null
+++ b/translations/bg/7-bank-project/4-state-management/README.md
@@ -0,0 +1,275 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "4fa20c513e367e9cdd401bf49ae16e33",
+  "translation_date": "2025-08-27T23:04:53+00:00",
+  "source_file": "7-bank-project/4-state-management/README.md",
+  "language_code": "bg"
+}
+-->
+# Създаване на Банкова Приложение Част 4: Концепции за Управление на Състоянието
+
+## Предварителен Тест
+
+[Предварителен тест](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/47)
+
+### Въведение
+
+С разрастването на уеб приложението става предизвикателство да се следят всички потоци от данни. Кой код получава данните, коя страница ги използва, къде и кога трябва да бъдат актуализирани... лесно е да се стигне до объркан код, който е труден за поддръжка. Това е особено вярно, когато трябва да споделяте данни между различни страници на приложението, например данни за потребителя. Концепцията за *управление на състоянието* винаги е съществувала във всички видове програми, но с нарастването на сложността на уеб приложенията, тя вече е ключова точка за обмисляне по време на разработката.
+
+В тази последна част ще разгледаме приложението, което създадохме, за да преосмислим как се управлява състоянието, като позволим поддръжка за обновяване на браузъра по всяко време и запазване на данните между потребителските сесии.
+
+### Предпоставки
+
+Трябва да сте завършили частта за [извличане на данни](../3-data/README.md) от уеб приложението за този урок. Също така трябва да инсталирате [Node.js](https://nodejs.org) и [да стартирате сървърния API](../api/README.md) локално, за да можете да управлявате данните за акаунта.
+
+Можете да тествате дали сървърът работи правилно, като изпълните тази команда в терминала:
+
+```sh
+curl http://localhost:5000/api
+# -> should return "Bank API v1.0.0" as a result
+```
+
+---
+
+## Преосмисляне на управлението на състоянието
+
+В [предишния урок](../3-data/README.md) въведохме основна концепция за състояние в нашето приложение с глобалната променлива `account`, която съдържа банковите данни за текущо влезлия потребител. Въпреки това, текущата ни имплементация има някои недостатъци. Опитайте да обновите страницата, когато сте на таблото. Какво се случва?
+
+Има 3 проблема с текущия код:
+
+- Състоянието не се запазва, тъй като обновяването на браузъра ви връща обратно на страницата за вход.
+- Има множество функции, които модифицират състоянието. С разрастването на приложението това може да направи трудно проследяването на промените и лесно да се забрави актуализирането на някоя от тях.
+- Състоянието не се изчиства, така че когато кликнете върху *Изход*, данните за акаунта все още са там, въпреки че сте на страницата за вход.
+
+Можем да актуализираме кода си, за да се справим с тези проблеми един по един, но това би създало повече дублиране на код и би направило приложението по-сложно и трудно за поддръжка. Или можем да спрем за няколко минути и да преосмислим стратегията си.
+
+> Какви проблеми всъщност се опитваме да решим тук?
+
+[Управлението на състоянието](https://en.wikipedia.org/wiki/State_management) е свързано с намирането на добър подход за решаване на тези два конкретни проблема:
+
+- Как да направим потоците от данни в приложението разбираеми?
+- Как да поддържаме данните за състоянието винаги синхронизирани с потребителския интерфейс (и обратно)?
+
+След като се погрижите за тези въпроси, всички други проблеми, които може да имате, или ще бъдат вече решени, или ще станат по-лесни за решаване. Има много възможни подходи за решаване на тези проблеми, но ние ще изберем често срещано решение, което се състои в **централизиране на данните и начините за тяхната промяна**. Потокът от данни би изглеждал така:
+
+![Схема, показваща потоците от данни между HTML, действията на потребителя и състоянието](../../../../translated_images/data-flow.fa2354e0908fecc89b488010dedf4871418a992edffa17e73441d257add18da4.bg.png)
+
+> Тук няма да покрием частта, при която данните автоматично задействат актуализацията на изгледа, тъй като тя е свързана с по-напреднали концепции на [Реактивното Програмиране](https://en.wikipedia.org/wiki/Reactive_programming). Това е добра тема за последващо задълбочаване.
+
+✅ Има много библиотеки с различни подходи за управление на състоянието, като [Redux](https://redux.js.org) е популярна опция. Разгледайте концепциите и моделите, които се използват, тъй като често това е добър начин да научите какви потенциални проблеми може да срещнете в големи уеб приложения и как те могат да бъдат решени.
+
+### Задача
+
+Ще започнем с малко рефакториране. Заменете декларацията на `account`:
+
+```js
+let account = null;
+```
+
+С:
+
+```js
+let state = {
+  account: null
+};
+```
+
+Идеята е да *централизираме* всички данни на приложението в един обект за състояние. Засега имаме само `account` в състоянието, така че това не променя много, но създава основа за бъдещи подобрения.
+
+Също така трябва да актуализираме функциите, които го използват. Във функциите `register()` и `login()` заменете `account = ...` със `state.account = ...`;
+
+В началото на функцията `updateDashboard()` добавете този ред:
+
+```js
+const account = state.account;
+```
+
+Това рефакториране само по себе си не донесе много подобрения, но идеята беше да се положи основата за следващите промени.
+
+## Проследяване на промените в данните
+
+Сега, когато сме въвели обекта `state` за съхранение на нашите данни, следващата стъпка е да централизираме актуализациите. Целта е да направим по-лесно проследяването на всички промени и кога те се случват.
+
+За да избегнем нежелани промени в обекта `state`, добра практика е да го считаме за [*непроменим*](https://en.wikipedia.org/wiki/Immutable_object), което означава, че той изобщо не може да бъде модифициран. Това също означава, че трябва да създадете нов обект за състояние, ако искате да промените нещо в него. По този начин изграждате защита срещу потенциално нежелани [странични ефекти](https://en.wikipedia.org/wiki/Side_effect_(computer_science)) и отваряте възможности за нови функции в приложението, като например имплементиране на undo/redo, като същевременно улеснявате отстраняването на грешки. Например, можете да записвате всяка промяна в състоянието и да поддържате история на промените, за да разберете източника на грешка.
+
+В JavaScript можете да използвате [`Object.freeze()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze), за да създадете непроменима версия на обект. Ако се опитате да направите промени в непроменим обект, ще бъде хвърлено изключение.
+
+✅ Знаете ли разликата между *повърхностно* и *дълбоко* непроменим обект? Можете да прочетете за това [тук](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze#What_is_shallow_freeze).
+
+### Задача
+
+Нека създадем нова функция `updateState()`:
+
+```js
+function updateState(property, newData) {
+  state = Object.freeze({
+    ...state,
+    [property]: newData
+  });
+}
+```
+
+В тази функция създаваме нов обект за състояние и копираме данни от предишното състояние, използвайки [*оператора за разпръскване (`...`)*](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/Spread_syntax#Spread_in_object_literals). След това презаписваме конкретно свойство на обекта за състояние с новите данни, използвайки [нотацията с квадратни скоби](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Working_with_Objects#Objects_and_properties) `[property]` за присвояване. Накрая заключваме обекта, за да предотвратим модификации, използвайки `Object.freeze()`. Засега имаме само свойството `account`, съхранено в състоянието, но с този подход можете да добавите толкова свойства, колкото са ви необходими.
+
+Също така ще актуализираме инициализацията на `state`, за да сме сигурни, че началното състояние също е заключено:
+
+```js
+let state = Object.freeze({
+  account: null
+});
+```
+
+След това актуализирайте функцията `register`, като замените присвояването `state.account = result;` със:
+
+```js
+updateState('account', result);
+```
+
+Направете същото и с функцията `login`, като замените `state.account = data;` със:
+
+```js
+updateState('account', data);
+```
+
+Сега ще използваме възможността да поправим проблема с това, че данните за акаунта не се изчистват, когато потребителят кликне върху *Изход*.
+
+Създайте нова функция `logout()`:
+
+```js
+function logout() {
+  updateState('account', null);
+  navigate('/login');
+}
+```
+
+В `updateDashboard()` заменете пренасочването `return navigate('/login');` с `return logout();`.
+
+Опитайте да регистрирате нов акаунт, да излезете и да влезете отново, за да проверите дали всичко все още работи правилно.
+
+> Съвет: можете да разгледате всички промени в състоянието, като добавите `console.log(state)` в края на `updateState()` и отворите конзолата в инструментите за разработчици на браузъра.
+
+## Запазване на състоянието
+
+Повечето уеб приложения трябва да запазват данни, за да могат да работят правилно. Всички критични данни обикновено се съхраняват в база данни и се достъпват чрез сървърен API, като например данните за потребителски акаунт в нашия случай. Но понякога е интересно да се запазят някои данни в клиентското приложение, което работи в браузъра, за по-добро потребителско изживяване или за подобряване на производителността при зареждане.
+
+Когато искате да запазите данни в браузъра, има няколко важни въпроса, които трябва да си зададете:
+
+- *Данните чувствителни ли са?* Трябва да избягвате съхраняването на чувствителни данни на клиента, като например пароли на потребители.
+- *За колко време трябва да запазите тези данни?* Планирате ли да достъпвате тези данни само за текущата сесия или искате те да бъдат съхранявани завинаги?
+
+Има множество начини за съхранение на информация в уеб приложение, в зависимост от това, което искате да постигнете. Например, можете да използвате URL адресите, за да съхранявате заявка за търсене и да я направите споделима между потребителите. Можете също така да използвате [HTTP бисквитки](https://developer.mozilla.org/docs/Web/HTTP/Cookies), ако данните трябва да бъдат споделени със сървъра, като например информация за [автентикация](https://en.wikipedia.org/wiki/Authentication).
+
+Друга опция е да използвате един от многото API-та на браузъра за съхранение на данни. Два от тях са особено интересни:
+
+- [`localStorage`](https://developer.mozilla.org/docs/Web/API/Window/localStorage): [Key/Value хранилище](https://en.wikipedia.org/wiki/Key%E2%80%93value_database), което позволява запазване на данни, специфични за текущия уебсайт, между различни сесии. Данните, съхранени в него, никога не изтичат.
+- [`sessionStorage`](https://developer.mozilla.org/docs/Web/API/Window/sessionStorage): работи по същия начин като `localStorage`, с изключение на това, че данните, съхранени в него, се изчистват, когато сесията приключи (когато браузърът се затвори).
+
+Имайте предвид, че и двата API-та позволяват съхранение само на [низове](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String). Ако искате да съхранявате сложни обекти, ще трябва да ги сериализирате във формат [JSON](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON), използвайки [`JSON.stringify()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify).
+
+✅ Ако искате да създадете уеб приложение, което не работи със сървър, е възможно също така да създадете база данни на клиента, използвайки [`IndexedDB` API](https://developer.mozilla.org/docs/Web/API/IndexedDB_API). Това е запазено за напреднали случаи на употреба или ако трябва да съхранявате значително количество данни, тъй като е по-сложно за използване.
+
+### Задача
+
+Искаме нашите потребители да останат влезли, докато изрично не кликнат върху бутона *Изход*, така че ще използваме `localStorage`, за да съхраняваме данните за акаунта. Първо, нека дефинираме ключ, който ще използваме за съхранение на нашите данни.
+
+```js
+const storageKey = 'savedAccount';
+```
+
+След това добавете този ред в края на функцията `updateState()`:
+
+```js
+localStorage.setItem(storageKey, JSON.stringify(state.account));
+```
+
+С това данните за потребителския акаунт ще бъдат запазени и винаги актуални, тъй като централизирахме всички актуализации на състоянието. Това е моментът, в който започваме да се възползваме от всички предишни рефакторирания 🙂.
+
+Тъй като данните се запазват, трябва също така да се погрижим за тяхното възстановяване, когато приложението се зареди. Тъй като ще започнем да имаме повече код за инициализация, може би е добра идея да създадем нова функция `init`, която също включва предишния код в края на `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();
+```
+
+Тук извличаме запазените данни и, ако има такива, актуализираме състоянието съответно. Важно е да направим това *преди* актуализирането на маршрута, тъй като може да има код, който разчита на състоянието по време на актуализацията на страницата.
+
+Също така можем да направим страницата *Табло* основна страница на нашето приложение, тъй като сега запазваме данните за акаунта. Ако не се намерят данни, таблото се грижи за пренасочването към страницата *Вход* така или иначе. В `updateRoute()` заменете резервния `return navigate('/login');` с `return navigate('/dashboard');`.
+
+Сега влезте в приложението и опитайте да обновите страницата. Трябва да останете на таблото. С тази актуализация се погрижихме за всички първоначални проблеми...
+
+## Обновяване на данните
+
+...Но може би създадохме нов проблем. Опа!
+
+Отидете на таблото, използвайки акаунта `test`, след това изпълнете тази команда в терминала, за да създадете нова транзакция:
+
+```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
+```
+
+Опитайте да обновите страницата на таблото в браузъра сега. Какво се случва? Виждате ли новата транзакция?
+
+Състоянието се запазва за неопределено време благодарение на `localStorage`, но това също означава, че то никога не се актуализира, докато не излезете от приложението и не влезете отново!
+
+Една възможна стратегия за решаване на този проблем е да презареждаме данните за акаунта всеки път, когато таблото се зарежда, за да избегнем остарели данни.
+
+### Задача
+
+Създайте нова функция `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);
+}
+```
+
+Този метод проверява дали в момента сме влезли, след което презарежда данните за акаунта от сървъра.
+
+Създайте друга функция, наречена `refresh`:
+
+```js
+async function refresh() {
+  await updateAccountData();
+  updateDashboard();
+}
+```
+
+Тази функция актуализира данните за акаунта, след което се грижи за актуализирането на HTML на страницата на таблото. Това е функцията, която трябва да извикаме, когато маршрутът на таблото се зареди. Актуализирайте дефиницията на
+[Тест след лекцията](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/48)
+
+## Задача
+
+[Реализирайте диалогов прозорец "Добавяне на транзакция"](assignment.md)
+
+Ето примерен резултат след изпълнение на задачата:
+
+![Екранна снимка, показваща примерен диалогов прозорец "Добавяне на транзакция"](../../../../translated_images/dialog.93bba104afeb79f12f65ebf8f521c5d64e179c40b791c49c242cf15f7e7fab15.bg.png)
+
+---
+
+**Отказ от отговорност**:  
+Този документ е преведен с помощта на AI услуга за превод [Co-op Translator](https://github.com/Azure/co-op-translator). Въпреки че се стремим към точност, моля, имайте предвид, че автоматизираните преводи може да съдържат грешки или неточности. Оригиналният документ на неговия роден език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален човешки превод. Не носим отговорност за недоразумения или погрешни интерпретации, произтичащи от използването на този превод.
\ No newline at end of file
diff --git a/translations/bg/7-bank-project/4-state-management/assignment.md b/translations/bg/7-bank-project/4-state-management/assignment.md
new file mode 100644
index 00000000..8fd118da
--- /dev/null
+++ b/translations/bg/7-bank-project/4-state-management/assignment.md
@@ -0,0 +1,39 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "f23a868536c07da991b1d4e773161e25",
+  "translation_date": "2025-08-27T23:06:37+00:00",
+  "source_file": "7-bank-project/4-state-management/assignment.md",
+  "language_code": "bg"
+}
+-->
+# Реализиране на диалог "Добавяне на транзакция"
+
+## Инструкции
+
+Нашето банково приложение все още липсва една важна функция: възможността за въвеждане на нови транзакции. 
+Използвайки всичко, което сте научили в предишните четири урока, реализирайте диалог "Добавяне на транзакция":
+
+- Добавете бутон "Добавяне на транзакция" на страницата на таблото.
+- Или създайте нова страница с HTML шаблон, или използвайте JavaScript, за да покажете/скриете HTML на диалога, без да напускате страницата на таблото (можете да използвате свойството [`hidden`](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/hidden) за това, или CSS класове).
+- Уверете се, че обработвате [достъпността за клавиатура и екранни четци](https://developer.paciellogroup.com/blog/2018/06/the-current-state-of-modal-dialog-accessibility/) за диалога.
+- Реализирайте HTML форма за получаване на входни данни.
+- Създайте JSON данни от данните на формата и ги изпратете към API.
+- Актуализирайте страницата на таблото с новите данни.
+
+Прегледайте [спецификациите на сървърното API](../api/README.md), за да видите кое API трябва да извикате и какъв е очакваният JSON формат.
+
+Ето примерен резултат след завършване на задачата:
+
+![Снимка на екрана, показваща примерен диалог "Добавяне на транзакция"](../../../../translated_images/dialog.93bba104afeb79f12f65ebf8f521c5d64e179c40b791c49c242cf15f7e7fab15.bg.png)
+
+## Критерии за оценка
+
+| Критерий | Отлично                                                                                          | Задоволително                                                                                                         | Нуждае се от подобрение                     |
+| -------- | ------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------- | ------------------------------------------- |
+|          | Добавянето на транзакция е реализирано напълно, следвайки всички най-добри практики от уроците.   | Добавянето на транзакция е реализирано, но не следва най-добрите практики от уроците или работи само частично.         | Добавянето на транзакция изобщо не работи.  |
+
+---
+
+**Отказ от отговорност**:  
+Този документ е преведен с помощта на AI услуга за превод [Co-op Translator](https://github.com/Azure/co-op-translator). Въпреки че се стремим към точност, моля, имайте предвид, че автоматизираните преводи може да съдържат грешки или неточности. Оригиналният документ на неговия роден език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален човешки превод. Ние не носим отговорност за каквито и да е недоразумения или погрешни интерпретации, произтичащи от използването на този превод.
\ No newline at end of file
diff --git a/translations/bg/7-bank-project/README.md b/translations/bg/7-bank-project/README.md
new file mode 100644
index 00000000..0da56f7a
--- /dev/null
+++ b/translations/bg/7-bank-project/README.md
@@ -0,0 +1,35 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "830359535306594b448db6575ce5cdee",
+  "translation_date": "2025-08-27T22:54:44+00:00",
+  "source_file": "7-bank-project/README.md",
+  "language_code": "bg"
+}
+-->
+# :dollar: Създайте банка
+
+В този проект ще научите как да създадете измислена банка. Тези уроци включват инструкции за това как да структурирате уеб приложение и да предоставите маршрути, да създавате форми, да управлявате състояние и да извличате данни от API, от който можете да получите данните на банката.
+
+| ![Екран1](../../../translated_images/screen1.baccbba0f1f93364672eb250d2fbd21574bb1caf79a2155022dc098a741cbdfe.bg.png) | ![Екран2](../../../translated_images/screen2.123c82a831a1d14ab2061994be2fa5de9cec1ce651047217d326d4773a6348e4.bg.png) |
+|--------------------------------|--------------------------------|
+
+## Уроци
+
+1. [HTML шаблони и маршрути в уеб приложение](1-template-route/README.md)
+2. [Създаване на форма за вход и регистрация](2-forms/README.md)
+3. [Методи за извличане и използване на данни](3-data/README.md)
+4. [Концепции за управление на състоянието](4-state-management/README.md)
+
+### Благодарности
+
+Тези уроци са написани с :hearts: от [Йоан Ласорса](https://twitter.com/sinedied).
+
+Ако искате да научите как да създадете [сървърния API](/7-bank-project/api/README.md), използван в тези уроци, можете да следвате [тази серия от видеа](https://aka.ms/NodeBeginner) (по-специално видеа от 17 до 21).
+
+Можете също така да разгледате [този интерактивен урок в Learn](https://aka.ms/learn/express-api).
+
+---
+
+**Отказ от отговорност**:  
+Този документ е преведен с помощта на AI услуга за превод [Co-op Translator](https://github.com/Azure/co-op-translator). Въпреки че се стремим към точност, моля, имайте предвид, че автоматизираните преводи може да съдържат грешки или неточности. Оригиналният документ на неговия роден език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален човешки превод. Ние не носим отговорност за каквито и да било недоразумения или погрешни интерпретации, произтичащи от използването на този превод.
\ No newline at end of file
diff --git a/translations/bg/7-bank-project/api/README.md b/translations/bg/7-bank-project/api/README.md
new file mode 100644
index 00000000..1571f43b
--- /dev/null
+++ b/translations/bg/7-bank-project/api/README.md
@@ -0,0 +1,48 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "9884f8c8a61cf56214450f8b16a094ce",
+  "translation_date": "2025-08-27T22:55:11+00:00",
+  "source_file": "7-bank-project/api/README.md",
+  "language_code": "bg"
+}
+-->
+# Bank API
+
+> Bank API, създаден с [Node.js](https://nodejs.org) + [Express](https://expressjs.com/).
+
+API-то вече е изградено за вас и не е част от упражнението.
+
+Ако обаче искате да научите как да създадете подобно API, можете да следвате тази серия от видеа: https://aka.ms/NodeBeginner (видеа от 17 до 21 обхващат точно това API).
+
+Можете също така да разгледате този интерактивен урок: https://aka.ms/learn/express-api
+
+## Стартиране на сървъра
+
+Уверете се, че имате инсталиран [Node.js](https://nodejs.org).
+
+1. Клонирайте това хранилище [The Web-Dev-For-Beginners](https://github.com/microsoft/Web-Dev-For-Beginners).
+2. Отворете терминала си и навигирайте до папката `Web-Dev-For-Beginners/7-bank-project/api`.
+3. Стартирайте `npm install` и изчакайте пакетите да се инсталират (може да отнеме известно време в зависимост от качеството на вашата интернет връзка).
+4. Когато инсталацията приключи, стартирайте `npm start` и сте готови.
+
+Сървърът трябва да започне да слуша на порт `5000`.
+*Този сървър ще работи заедно с основния сървър на приложението за банката (който слуша на порт `3000`), не го затваряйте.*
+
+> Забележка: всички записи се съхраняват в паметта и не се запазват, така че когато сървърът бъде спрян, всички данни се губят.
+
+## Подробности за API-то
+
+Маршрут                                     | Описание
+--------------------------------------------|------------------------------------
+GET    /api/                                | Получаване на информация за сървъра
+POST   /api/accounts/                       | Създаване на акаунт, напр.: `{ user: 'Yohan', description: 'My budget', currency: 'EUR', balance: 100 }`
+GET    /api/accounts/:user                  | Получаване на всички данни за конкретен акаунт
+DELETE /api/accounts/:user                  | Изтриване на конкретен акаунт
+POST   /api/accounts/:user/transactions     | Добавяне на транзакция, напр.: `{ date: '2020-07-23T18:25:43.511Z', object: 'Bought a book', amount: -20 }`
+DELETE  /api/accounts/:user/transactions/:id| Изтриване на конкретна транзакция
+
+---
+
+**Отказ от отговорност**:  
+Този документ е преведен с помощта на AI услуга за превод [Co-op Translator](https://github.com/Azure/co-op-translator). Въпреки че се стремим към точност, моля, имайте предвид, че автоматизираните преводи може да съдържат грешки или неточности. Оригиналният документ на неговия роден език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален човешки превод. Ние не носим отговорност за недоразумения или погрешни интерпретации, произтичащи от използването на този превод.
\ No newline at end of file
diff --git a/translations/bg/7-bank-project/solution/README.md b/translations/bg/7-bank-project/solution/README.md
new file mode 100644
index 00000000..d624daaa
--- /dev/null
+++ b/translations/bg/7-bank-project/solution/README.md
@@ -0,0 +1,27 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "461aa4fc74c6b1789c3a13b5d82c0cd9",
+  "translation_date": "2025-08-27T23:03:57+00:00",
+  "source_file": "7-bank-project/solution/README.md",
+  "language_code": "bg"
+}
+-->
+# Банкова апликация
+
+> Примерно решение за проекта на банковата апликация, създадено с чист HTML5, CSS и JavaScript (без използване на рамки или библиотеки).
+
+## Стартиране на апликацията
+
+Първо се уверете, че [API сървърът](../api/README.md) работи.
+
+Може да използвате всеки уеб сървър за стартиране на апликацията, но тъй като трябва да имате инсталиран [Node.js](https://nodejs.org), за да стартирате API, можете:
+
+1. Да клонирате този репозиторий с Git.
+2. Да отворите терминал, да навигирате до тази директория и да изпълните `npx lite-server .`. Това ще стартира уеб сървър за разработка на порт `3000`.
+3. Да отворите `http://localhost:3000` в браузър, за да стартирате апликацията.
+
+---
+
+**Отказ от отговорност**:  
+Този документ е преведен с помощта на AI услуга за превод [Co-op Translator](https://github.com/Azure/co-op-translator). Въпреки че се стремим към точност, моля, имайте предвид, че автоматизираните преводи може да съдържат грешки или неточности. Оригиналният документ на неговия роден език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален човешки превод. Ние не носим отговорност за каквито и да било недоразумения или погрешни интерпретации, произтичащи от използването на този превод.
\ No newline at end of file
diff --git a/translations/bg/8-code-editor/1-using-a-code-editor/README.md b/translations/bg/8-code-editor/1-using-a-code-editor/README.md
new file mode 100644
index 00000000..83156f73
--- /dev/null
+++ b/translations/bg/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:38:25+00:00",
+  "source_file": "8-code-editor/1-using-a-code-editor/README.md",
+  "language_code": "bg"
+}
+-->
+# Използване на редактор за код
+
+Този урок обхваща основите на използването на [VSCode.dev](https://vscode.dev), уеб-базиран редактор за код, който ви позволява да правите промени в кода си и да допринасяте към проект, без да инсталирате нищо на компютъра си.
+
+## Цели на обучението
+
+В този урок ще научите как да:
+
+- Използвате редактор за код в проект
+- Следите промените с помощта на контрол на версиите
+- Персонализирате редактора за разработка
+
+### Предпоставки
+
+Преди да започнете, ще трябва да създадете акаунт в [GitHub](https://github.com). Отидете на [GitHub](https://github.com/) и създайте акаунт, ако все още нямате такъв.
+
+### Въведение
+
+Редакторът за код е основен инструмент за писане на програми и сътрудничество по съществуващи проекти. След като разберете основите на редактора и как да използвате неговите функции, ще можете да ги прилагате при писане на код.
+
+## Започване с VSCode.dev
+
+[VSCode.dev](https://vscode.dev) е редактор за код в уеб. Не е необходимо да инсталирате нищо, за да го използвате – просто го отворете като всеки друг уебсайт. За да започнете с редактора, отворете следния линк: [https://vscode.dev](https://vscode.dev). Ако не сте влезли в [GitHub](https://github.com/), следвайте указанията, за да влезете или да създадете нов акаунт и след това влезте.
+
+След като се зареди, трябва да изглежда подобно на този образ:
+
+![Default VSCode.dev](../../../../translated_images/default-vscode-dev.5d06881d65c1b3234ce50cd9ed3b0028e6031ad5f5b441bcbed96bfa6311f6d0.bg.png)
+
+Има три основни секции, започвайки от най-ляво и преминавайки надясно:
+
+1. _Лентата за активност_, която включва някои икони, като лупа 🔎, зъбно колело ⚙️ и няколко други.
+2. Разширената лента за активност, която по подразбиране е _Explorer_, наречена _странична лента_.
+3. И накрая, зоната за код вдясно.
+
+Кликнете върху всяка от иконите, за да покажете различно меню. След като приключите, кликнете върху _Explorer_, за да се върнете там, откъдето сте започнали.
+
+Когато започнете да създавате код или да модифицирате съществуващ код, това ще се случи в най-голямата зона вдясно. Ще използвате тази зона и за визуализиране на съществуващ код, което ще направите следващо.
+
+## Отваряне на GitHub хранилище
+
+Първото нещо, което ще трябва да направите, е да отворите GitHub хранилище. Има няколко начина за отваряне на хранилище. В този раздел ще видите два различни начина, по които можете да отворите хранилище, за да започнете работа по промените.
+
+### 1. С редактора
+
+Използвайте самия редактор, за да отворите отдалечено хранилище. Ако отидете на [VSCode.dev](https://vscode.dev), ще видите бутон _"Open Remote Repository"_:
+
+![Open remote repository](../../../../translated_images/open-remote-repository.bd9c2598b8949e7fc283cdfc8f4050c6205a7c7c6d3f78c4b135115d037d6fa2.bg.png)
+
+Можете също да използвате командната палитра. Командната палитра е поле за въвеждане, където можете да напишете всяка дума, която е част от команда или действие, за да намерите правилната команда за изпълнение. Използвайте менюто в горния ляв ъгъл, след това изберете _View_, и след това изберете _Command Palette_, или използвайте следния клавишен пряк път: Ctrl-Shift-P (на MacOS това би било Command-Shift-P).
+
+![Palette Menu](../../../../translated_images/palette-menu.4946174e07f426226afcdad707d19b8d5150e41591c751c45b5dee213affef91.bg.png)
+
+След като менюто се отвори, напишете _open remote repository_, и след това изберете първата опция. Ще се покажат множество хранилища, на които сте част или които сте отваряли наскоро. Можете също да използвате пълен GitHub URL, за да изберете едно. Използвайте следния URL и го поставете в полето:
+
+```
+https://github.com/microsoft/Web-Dev-For-Beginners
+```
+
+✅ Ако е успешно, ще видите всички файлове за това хранилище, заредени в текстовия редактор.
+
+### 2. Използване на URL
+
+Можете също да използвате URL директно, за да заредите хранилище. Например, пълният URL за текущото хранилище е [https://github.com/microsoft/Web-Dev-For-Beginners](https://github.com/microsoft/Web-Dev-For-Beginners), но можете да замените домейна на GitHub с `VSCode.dev/github` и да заредите хранилището директно. Полученият URL би бил [https://vscode.dev/github/microsoft/Web-Dev-For-Beginners](https://vscode.dev/github/microsoft/Web-Dev-For-Beginners).
+
+## Редактиране на файлове
+
+След като сте отворили хранилището в браузъра/vscode.dev, следващата стъпка е да направите актуализации или промени в проекта.
+
+### 1. Създаване на нов файл
+
+Можете да създадете файл вътре в съществуваща папка или да го създадете в основната директория/папка. За да създадете нов файл, отворете местоположение/директория, в която искате файлът да бъде запазен, и изберете иконата _'New file ...'_ на лентата за активност _(вляво)_, дайте му име и натиснете Enter.
+
+![Create a new file](../../../../translated_images/create-new-file.2814e609c2af9aeb6c6fd53156c503ac91c3d538f9cac63073b2dd4a7631f183.bg.png)
+
+### 2. Редактиране и запазване на файл в хранилището
+
+Използването на vscode.dev е полезно, когато искате да направите бързи актуализации на проекта си, без да зареждате софтуер локално.  
+За да актуализирате кода си, кликнете върху иконата 'Explorer', също разположена на лентата за активност, за да видите файловете и папките в хранилището.  
+Изберете файл, за да го отворите в зоната за код, направете промените си и запазете.
+
+![Edit a file](../../../../translated_images/edit-a-file.52c0ee665ef19f08119d62d63f395dfefddc0a4deb9268d73bfe791f52c5807a.bg.png)
+
+След като приключите с актуализирането на проекта си, изберете иконата _`source control`_, която съдържа всички нови промени, които сте направили в хранилището си.
+
+За да видите промените, които сте направили в проекта си, изберете файла(ите) в папката `Changes` в разширената лента за активност. Това ще отвори 'Работно дърво', за да визуализирате промените, които сте направили във файла. Червеното показва премахване от проекта, докато зеленото означава добавяне.
+
+![View changes](../../../../translated_images/working-tree.c58eec08e6335c79cc708c0c220c0b7fea61514bd3c7fb7471905a864aceac7c.bg.png)
+
+Ако сте доволни от промените, които сте направили, задръжте курсора върху папката `Changes` и кликнете върху бутона `+`, за да подготвите промените. Подготовката означава просто да подготвите промените си за комитване към GitHub.
+
+Ако обаче не сте доволни от някои промени и искате да ги отхвърлите, задръжте курсора върху папката `Changes` и изберете иконата `undo`.
+
+След това напишете `commit message` _(Описание на промяната, която сте направили в проекта)_, кликнете върху иконата `check`, за да комитнете и изпратите промените си.
+
+След като приключите с работата по проекта си, изберете иконата `hamburger menu` в горния ляв ъгъл, за да се върнете към хранилището на github.com.
+
+![Stage & commit changes](../../../../8-code-editor/images/edit-vscode.dev.gif)
+
+## Използване на разширения
+
+Инсталирането на разширения в VSCode ви позволява да добавяте нови функции и опции за персонализирана среда за разработка в редактора си, за да подобрите работния си процес. Тези разширения също ви помагат да добавите поддръжка за множество програмни езици и често са или общи разширения, или базирани на език.
+
+За да разгледате списъка с всички налични разширения, кликнете върху иконата _`Extensions`_ на лентата за активност и започнете да пишете името на разширението в текстовото поле, обозначено _'Search Extensions in Marketplace'_.  
+Ще видите списък с разширения, всяко от които съдържа **името на разширението, името на издателя, кратко описание, броя на изтеглянията** и **оценка със звезди**.
+
+![Extension details](../../../../translated_images/extension-details.9f8f1fd4e9eb2de5069ae413119eb8ee43172776383ebe2f7cf640e11df2e106.bg.png)
+
+Можете също да видите всички предварително инсталирани разширения, като разширите папката _`Installed`_, популярни разширения, използвани от повечето разработчици, в папката _`Popular`_, и препоръчани разширения за вас, базирани на потребители в същото работно пространство или на наскоро отворени файлове, в папката _`Recommended`_.
+
+![View extensions](../../../../translated_images/extensions.eca0e0c7f59a10b5c88be7fe24b3e32cca6b6058b35a49026c3a9d80b1813b7c.bg.png)
+
+### 1. Инсталиране на разширения
+
+За да инсталирате разширение, напишете името на разширението в полето за търсене и кликнете върху него, за да видите допълнителна информация за разширението в зоната за код, след като се появи в разширената лента за активност.
+
+Можете или да кликнете върху _синия бутон за инсталиране_ в разширената лента за активност, за да го инсталирате, или да използвате бутона за инсталиране, който се появява в зоната за код, след като изберете разширението, за да заредите допълнителна информация.
+
+![Install extensions](../../../../8-code-editor/images/install-extension.gif)
+
+### 2. Персонализиране на разширения
+
+След като инсталирате разширението, може да се наложи да модифицирате неговото поведение и да го персонализирате според вашите предпочитания. За да направите това, изберете иконата Extensions, и този път вашето разширение ще се появи в папката _Installed_, кликнете върху _**Gear icon**_ и навигирайте до _Extensions Setting_.
+
+![Modify extension settings](../../../../translated_images/extension-settings.21c752ae4f4cdb78a867f140ccd0680e04619d0c44bb4afb26373e54b829d934.bg.png)
+
+### 3. Управление на разширения
+
+След като инсталирате и използвате разширението си, vscode.dev предлага опции за управление на разширението според различни нужди. Например, можете да изберете:
+
+- **Деактивиране:** _(Можете временно да деактивирате разширение, когато вече не ви е необходимо, но не искате да го деинсталирате напълно)_
+
+    Изберете инсталираното разширение в разширената лента за активност > кликнете върху иконата Gear > изберете 'Disable' или 'Disable (Workspace)' **ИЛИ** Отворете разширението в зоната за код и кликнете върху синия бутон Disable.
+
+- **Деинсталиране:** Изберете инсталираното разширение в разширената лента за активност > кликнете върху иконата Gear > изберете 'Uninstall' **ИЛИ** Отворете разширението в зоната за код и кликнете върху синия бутон Uninstall.
+
+---
+
+## Задание
+
+[Създайте уебсайт за автобиография, използвайки vscode.dev](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/8-code-editor/1-using-a-code-editor/assignment.md)
+
+## Преглед и самостоятелно обучение
+
+Прочетете повече за [VSCode.dev](https://code.visualstudio.com/docs/editor/vscode-web?WT.mc_id=academic-0000-alfredodeza) и някои от неговите други функции.
+
+---
+
+**Отказ от отговорност**:  
+Този документ е преведен с помощта на AI услуга за превод [Co-op Translator](https://github.com/Azure/co-op-translator). Въпреки че се стремим към точност, моля, имайте предвид, че автоматизираните преводи може да съдържат грешки или неточности. Оригиналният документ на неговия роден език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален човешки превод. Ние не носим отговорност за каквито и да е недоразумения или погрешни интерпретации, произтичащи от използването на този превод.
\ No newline at end of file
diff --git a/translations/bg/8-code-editor/1-using-a-code-editor/assignment.md b/translations/bg/8-code-editor/1-using-a-code-editor/assignment.md
new file mode 100644
index 00000000..db7915c9
--- /dev/null
+++ b/translations/bg/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:39:59+00:00",
+  "source_file": "8-code-editor/1-using-a-code-editor/assignment.md",
+  "language_code": "bg"
+}
+-->
+# Създайте уебсайт за автобиография с помощта на vscode.dev
+
+_Колко готино би било, ако рекрутер поиска вашата автобиография и вие му изпратите URL?_ 😎
+
+## Цели
+
+След това задание ще научите как да:
+
+- Създадете уебсайт, който да представя вашата автобиография
+
+### Предварителни изисквания
+
+1. Акаунт в GitHub. Посетете [GitHub](https://github.com/) и създайте акаунт, ако все още нямате такъв.
+
+## Стъпки
+
+**Стъпка 1:** Създайте ново GitHub хранилище и му дайте име `my-resume`.
+
+**Стъпка 2:** Създайте файл `index.html` във вашето хранилище. Ще добавим поне един файл директно в github.com, защото не можете да отворите празно хранилище във vscode.dev.
+
+Кликнете върху линка `creating a new file`, въведете името `index.html` и изберете бутона `Commit new file`.
+
+![Създаване на нов файл в github.com](../../../../translated_images/new-file-github.com.c886796d800e8056561829a181be1382c5303da9d902d8b2dd82b68a4806e21f.bg.png)
+
+**Стъпка 3:** Отворете [VSCode.dev](https://vscode.dev) и изберете бутона `Open Remote Repository`.
+
+Копирайте URL адреса на хранилището, което току-що създадохте за вашия уебсайт с автобиография, и го поставете в полето за въвеждане:
+
+_Заменете `your-username` с вашето потребителско име в GitHub._
+
+```
+https://github.com/your-username/my-resume
+```
+
+✅ Ако всичко е успешно, ще видите вашия проект и файла index.html, отворени в текстовия редактор в браузъра.
+
+![Създаване на нов файл](../../../../translated_images/project-on-vscode.dev.e79815a9a95ee7feac72ebe5c941c91279716be37c575dbdbf2f43bea2c7d8b6.bg.png)
+
+**Стъпка 4:** Отворете файла `index.html`, поставете кода по-долу в кода си и запазете.
+
+<details>
+    <summary><b>HTML код, отговорен за съдържанието на вашия уебсайт с автобиография.</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>Вашето име тук!</title>
+            </head>
+            <body>
+                <header id="header">
+                    <!-- заглавие на автобиографията с вашето име и длъжност -->
+                    <h1>Вашето име тук!</h1>
+                    <hr>
+                    Вашата роля!
+                    <hr>
+                </header>
+                <main>
+                    <article id="mainLeft">
+                        <section>
+                            <h2>КОНТАКТИ</h2>
+                            <!-- информация за контакт, включително социални мрежи -->
+                            <p>
+                                <i class="fa fa-envelope" aria-hidden="true"></i>
+                                <a href="mailto:username@domain.top-level domain">Напишете вашия имейл тук</a>
+                            </p>
+                            <p>
+                                <i class="fab fa-github" aria-hidden="true"></i>
+                                <a href="github.com/yourGitHubUsername">Напишете вашето потребителско име тук!</a>
+                            </p>
+                            <p>
+                                <i class="fab fa-linkedin" aria-hidden="true"></i>
+                                <a href="linkedin.com/yourLinkedInUsername">Напишете вашето потребителско име тук!</a>
+                            </p>
+                        </section>
+                        <section>
+                            <h2>УМЕНИЯ</h2>
+                            <!-- вашите умения -->
+                            <ul>
+                                <li>Умение 1!</li>
+                                <li>Умение 2!</li>
+                                <li>Умение 3!</li>
+                                <li>Умение 4!</li>
+                            </ul>
+                        </section>
+                        <section>
+                            <h2>ОБРАЗОВАНИЕ</h2>
+                            <!-- вашето образование -->
+                            <h3>Напишете вашата специалност тук!</h3>
+                            <p>
+                                Напишете вашата институция тук!
+                            </p>
+                            <p>
+                                Начална - Крайна дата
+                            </p>
+                        </section>            
+                    </article>
+                    <article id="mainRight">
+                        <section>
+                            <h2>ЗА МЕН</h2>
+                            <!-- информация за вас -->
+                            <p>Напишете кратко описание за себе си!</p>
+                        </section>
+                        <section>
+                            <h2>ПРОФЕСИОНАЛЕН ОПИТ</h2>
+                            <!-- вашият професионален опит -->
+                            <h3>Длъжност</h3>
+                            <p>
+                                Името на организацията тук | Начален месец – Краен месец
+                            </p>
+                            <ul>
+                                    <li>Задача 1 - Опишете какво сте правили!</li>
+                                    <li>Задача 2 - Опишете какво сте правили!</li>
+                                    <li>Опишете резултатите/влиянието на вашия принос</li>
+                                    
+                            </ul>
+                            <h3>Длъжност 2</h3>
+                            <p>
+                                Името на организацията тук | Начален месец – Краен месец
+                            </p>
+                            <ul>
+                                    <li>Задача 1 - Опишете какво сте правили!</li>
+                                    <li>Задача 2 - Опишете какво сте правили!</li>
+                                    <li>Опишете резултатите/влиянието на вашия принос</li>
+                                    
+                            </ul>
+                        </section>
+                    </article>
+                </main>
+            </body>
+        </html>
+</details>
+
+Добавете детайлите на вашата автобиография, като замените _текста за попълване_ в HTML кода.
+
+**Стъпка 5:** Задръжте курсора върху папката My-Resume, кликнете върху иконата `New File ...` и създайте 2 нови файла във вашия проект: `style.css` и `codeswing.json`.
+
+**Стъпка 6:** Отворете файла `style.css`, поставете кода по-долу и запазете.
+
+<details>
+        <summary><b>CSS код за форматиране на оформлението на сайта.</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>
+
+**Стъпка 6:** Отворете файла `codeswing.json`, поставете кода по-долу и запазете.
+
+    {
+    "scripts": [],
+    "styles": []
+    }
+
+**Стъпка 7:** Инсталирайте разширението `Codeswing`, за да визуализирате уебсайта с автобиография в кода.
+
+Кликнете върху иконата _`Extensions`_ в лентата с инструменти и въведете Codeswing. Или кликнете върху _синия бутон за инсталиране_ в разширената лента с инструменти, за да инсталирате, или използвайте бутона за инсталиране, който се появява в кода, след като изберете разширението, за да заредите допълнителна информация. Веднага след инсталирането на разширението, наблюдавайте промените във вашия проект 😃.
+
+![Инсталиране на разширения](../../../../8-code-editor/images/install-extension.gif)
+
+Това е, което ще видите на екрана си след инсталирането на разширението.
+
+![Codeswing разширение в действие](../../../../translated_images/after-codeswing-extension-pb.0ebddddcf73b550994947a9084e35e2836c713ae13839d49628e3c764c1cfe83.bg.png)
+
+Ако сте доволни от направените промени, задръжте курсора върху папката `Changes` и кликнете върху бутона `+`, за да подготвите промените.
+
+Въведете съобщение за комит _(Описание на промените, които сте направили в проекта)_ и комитнете промените, като кликнете върху `check`. След като приключите с работата по проекта, изберете иконата на менюто (хамбургер) в горния ляв ъгъл, за да се върнете към хранилището в GitHub.
+
+Поздравления 🎉 Току-що създадохте вашия уебсайт за автобиография с помощта на vscode.dev само в няколко стъпки.
+
+## 🚀 Предизвикателство
+
+Отворете отдалечено хранилище, за което имате разрешение да правите промени, и актуализирайте някои файлове. След това опитайте да създадете нов клон с вашите промени и направете Pull Request.
+
+## Преглед и самостоятелно обучение
+
+Прочетете повече за [VSCode.dev](https://code.visualstudio.com/docs/editor/vscode-web?WT.mc_id=academic-0000-alfredodeza) и някои от другите му функции.
+
+---
+
+**Отказ от отговорност**:  
+Този документ е преведен с помощта на AI услуга за превод [Co-op Translator](https://github.com/Azure/co-op-translator). Въпреки че се стремим към точност, моля, имайте предвид, че автоматизираните преводи може да съдържат грешки или неточности. Оригиналният документ на неговия роден език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален човешки превод. Ние не носим отговорност за недоразумения или погрешни интерпретации, произтичащи от използването на този превод.
\ No newline at end of file
diff --git a/translations/bg/CODE_OF_CONDUCT.md b/translations/bg/CODE_OF_CONDUCT.md
new file mode 100644
index 00000000..e2dc7e5c
--- /dev/null
+++ b/translations/bg/CODE_OF_CONDUCT.md
@@ -0,0 +1,23 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "b0a9b4cccd918195f58224d5793da1a6",
+  "translation_date": "2025-08-27T21:57:37+00:00",
+  "source_file": "CODE_OF_CONDUCT.md",
+  "language_code": "bg"
+}
+-->
+# Кодекс за поведение при отворен код на Microsoft
+
+Този проект е приел [Кодекса за поведение при отворен код на Microsoft](https://opensource.microsoft.com/codeofconduct/?WT.mc_id=academic-77807-sagibbon).
+
+Ресурси:
+
+- [Кодекс за поведение при отворен код на Microsoft](https://opensource.microsoft.com/codeofconduct/?WT.mc_id=academic-77807-sagibbon)
+- [Често задавани въпроси за Кодекса за поведение на Microsoft](https://opensource.microsoft.com/codeofconduct/faq/?WT.mc_id=academic-77807-sagibbon)
+- Свържете се с [opencode@microsoft.com](mailto:opencode@microsoft.com) при въпроси или притеснения
+
+---
+
+**Отказ от отговорност**:  
+Този документ е преведен с помощта на AI услуга за превод [Co-op Translator](https://github.com/Azure/co-op-translator). Въпреки че се стремим към точност, моля, имайте предвид, че автоматизираните преводи може да съдържат грешки или неточности. Оригиналният документ на неговия роден език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален човешки превод. Ние не носим отговорност за недоразумения или погрешни интерпретации, произтичащи от използването на този превод.
\ No newline at end of file
diff --git a/translations/bg/CONTRIBUTING.md b/translations/bg/CONTRIBUTING.md
new file mode 100644
index 00000000..0f288748
--- /dev/null
+++ b/translations/bg/CONTRIBUTING.md
@@ -0,0 +1,23 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "777400e9f0336c7ee2f9a1200a88478f",
+  "translation_date": "2025-08-27T21:59:00+00:00",
+  "source_file": "CONTRIBUTING.md",
+  "language_code": "bg"
+}
+-->
+# Принос
+
+Този проект приветства приноси и предложения. Повечето приноси изискват от вас да се съгласите с Лицензионно споразумение за принос (CLA), което декларира, че имате правото и действително предоставяте правата за използване на вашия принос. За повече подробности, посетете [https://cla.microsoft.com](https://cla.microsoft.com/?WT.mc_id=academic-77807-sagibbon).
+
+Когато изпратите pull request, CLA-бот автоматично ще определи дали трябва да предоставите CLA и ще маркира PR съответно (например, с етикет или коментар). Просто следвайте инструкциите, предоставени от бота. Ще трябва да направите това само веднъж за всички хранилища, които използват нашия CLA. Моля, опитайте се също така да ни обясните защо сте направили тази промяна, за да можем по-добре да разберем вашата заявка.
+
+Този проект е приел [Кодекса за поведение на Microsoft за отворен код](https://opensource.microsoft.com/codeofconduct/?WT.mc_id=academic-77807-sagibbon).  
+За повече информация, вижте [Често задавани въпроси за Кодекса за поведение](https://opensource.microsoft.com/codeofconduct/faq/?WT.mc_id=academic-77807-sagibbon)  
+или се свържете с [opencode@microsoft.com](mailto:opencode@microsoft.com) за допълнителни въпроси или коментари.
+
+---
+
+**Отказ от отговорност**:  
+Този документ е преведен с помощта на AI услуга за превод [Co-op Translator](https://github.com/Azure/co-op-translator). Въпреки че се стремим към точност, моля, имайте предвид, че автоматизираните преводи може да съдържат грешки или неточности. Оригиналният документ на неговия роден език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален човешки превод. Ние не носим отговорност за недоразумения или погрешни интерпретации, произтичащи от използването на този превод.
\ No newline at end of file
diff --git a/translations/bg/README.md b/translations/bg/README.md
new file mode 100644
index 00000000..cc8f3962
--- /dev/null
+++ b/translations/bg/README.md
@@ -0,0 +1,206 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "b672130244189715ac084c3259f6ab58",
+  "translation_date": "2025-08-27T21:54:18+00:00",
+  "source_file": "README.md",
+  "language_code": "bg"
+}
+-->
+[![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)  
+
+# Уеб разработка за начинаещи - учебна програма  
+
+Научете основите на уеб разработката с нашия 12-седмичен курс, създаден от Microsoft Cloud Advocates. Всяка от 24-те лекции разглежда JavaScript, CSS и HTML чрез практически проекти като терариуми, разширения за браузъри и космически игри. Участвайте в тестове, дискусии и практически задачи. Подобрете уменията си и оптимизирайте запаметяването на знания с нашата ефективна проектно-базирана методология. Започнете своето кодиращо пътешествие още днес!  
+
+#### 🧑‍🎓 _Студент ли сте?_  
+
+Посетете [**страницата за студенти**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon), където ще намерите ресурси за начинаещи, студентски пакети и дори начини да получите безплатен ваучер за сертификат. Това е страницата, която трябва да запазите и проверявате редовно, тъй като съдържанието се обновява ежемесечно.  
+
+### 📣 Съобщение - _Нова учебна програма_ за Генеративен AI за JavaScript вече е налична  
+
+Не пропускайте нашата нова учебна програма за Генеративен AI!  
+
+Посетете [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course), за да започнете!  
+
+<div>  
+  <img src="./images/background.png" width="600px" />  
+</div>  
+
+- Уроци, обхващащи всичко от основите до RAG.  
+- Взаимодействие с исторически личности чрез GenAI и нашето придружаващо приложение.  
+- Забавен и ангажиращ разказ, ще пътувате във времето!  
+
+<div>  
+  <img src="./images/character.png" width="600px" />  
+</div>  
+
+Всеки урок включва задача за изпълнение, проверка на знанията и предизвикателство, които ще ви насочат към изучаване на теми като:  
+- Създаване на заявки и инженеринг на заявки  
+- Генериране на текстови и визуални приложения  
+- Приложения за търсене  
+
+Посетете [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course), за да започнете!  
+
+## 🌱 Започнете  
+
+> **Учители**, ние сме [включили някои предложения](for-teachers.md) за това как да използвате тази учебна програма. Ще се радваме на вашата обратна връзка [в нашия форум за дискусии](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!  
+
+**[Ученици](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, за всеки урок започнете с предварителен тест и продължете с четене на учебния материал, изпълнение на различните дейности и проверете разбирането си с тест след лекцията.  
+
+За да подобрите учебния си опит, свържете се с вашите колеги, за да работите заедно по проектите! Дискусиите са насърчени в нашия [форум за дискусии](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), където нашият екип от модератори ще бъде на разположение да отговори на вашите въпроси.  
+
+За да продължите образованието си, силно препоръчваме да разгледате [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) за допълнителни учебни материали.  
+
+### 📋 Настройка на вашата среда  
+
+Тази учебна програма има готова за използване среда за разработка! Когато започнете, можете да изберете да изпълните учебната програма в [Codespace](https://github.com/features/codespaces/) (_среда, базирана на браузър, без нужда от инсталации_), или локално на вашия компютър, използвайки текстов редактор като [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).  
+
+#### Създайте вашето хранилище  
+За да запазите лесно работата си, препоръчваме да създадете свое собствено копие на това хранилище. Можете да направите това, като кликнете върху бутона **Use this template** в горната част на страницата. Това ще създаде ново хранилище във вашия GitHub акаунт с копие на учебната програма.  
+
+Следвайте тези стъпки:  
+1. **Fork на хранилището**: Кликнете върху бутона "Fork" в горния десен ъгъл на тази страница.  
+2. **Клониране на хранилището**:   `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`  
+
+#### Изпълнение на учебната програма в Codespace  
+
+В копието на хранилището, което сте създали, кликнете върху бутона **Code** и изберете **Open with Codespaces**. Това ще създаде нов Codespace, в който да работите.  
+
+<img src="./images/createcodespace.png" alt="Create codespace" style="width:270px;"/>  
+
+#### Изпълнение на учебната програма локално на вашия компютър  
+
+За да изпълните учебната програма локално на вашия компютър, ще ви е необходим текстов редактор, браузър и инструмент за команден ред. Нашият първи урок, [Въведение в програмните езици и инструменти](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/1-getting-started-lessons/1-intro-to-programming-languages), ще ви преведе през различни опции за всеки от тези инструменти, за да изберете това, което работи най-добре за вас.  
+
+Нашата препоръка е да използвате [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) като ваш редактор, който също има вграден [Терминал](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Можете да изтеглите Visual Studio Code [тук](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).  
+
+1. Клонирайте вашето хранилище на вашия компютър. Можете да направите това, като кликнете върху бутона **Code** и копирате URL адреса:  
+
+    <img src="./images/createcodespace.png" alt="Copy your repository URL" style="width:270px;"/>  
+
+    След това отворете [Терминал](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) в [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) и изпълнете следната команда, заменяйки `<your-repository-url>` с URL адреса, който току-що копирахте:  
+
+    ```bash 
+    git clone <your-repository-url>
+    ```  
+
+2. Отворете папката във Visual Studio Code. Можете да направите това, като кликнете върху **File** > **Open Folder** и изберете папката, която току-що сте клонирали.  
+
+>  Препоръчани разширения за Visual Studio Code:  
+>  
+> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - за преглед на HTML страници във Visual Studio Code  
+> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - за помощ при писане на код  
+
+## 📂 Всеки урок включва:  
+
+- опционална скица  
+- опционално допълнително видео  
+- предварителен тест  
+- писмен урок  
+- за проектно-базирани уроци, ръководства стъпка по стъпка за изграждане на проекта  
+- проверки на знанията  
+- предизвикателство  
+- допълнително четиво  
+- задача  
+- тест след урока  
+
+> **Бележка за тестовете**: Всички тестове се намират в папката Quiz-app, общо 48 теста с по три въпроса всеки. Те са свързани с уроците, приложението за тестове може да се изпълнява локално или да се разположи в Azure; следвайте инструкциите в папката `quiz-app`. Те постепенно се локализират.  
+
+## 🗃️ Уроци  
+
+|     |                       Име на проекта                       |                            Преподавани концепции                             | Цели на обучението                                                                                                                 |                                                         Свързан урок                                                          |         Автор          |  
+| :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |  
+| 01  |                     Започваме                      |           Въведение в програмирането и инструментите           | Научете основите на повечето програмни езици и за софтуера, който помага на професионалните разработчици да вършат работата си | [Въведение в програмните езици и инструменти](/1-getting-started-lessons/1-intro-to-programming-languages/README.md) |         Jasmine         |  
+| 02  |                     Започваме                      |             Основи на GitHub, включително работа в екип             | Как да използвате GitHub във вашия проект, как да си сътрудничите с други върху кодова база                                                    |                            [Въведение в GitHub](/1-getting-started-lessons/2-github-basics/README.md)                             |          Floor          |  
+| 03  |                     Започваме                      |                             Достъпност                              | Научете основите на уеб достъпността                                                                                               |                       [Основи на достъпността](/1-getting-started-lessons/3-accessibility/README.md)                       |       Christopher       |  
+| 04  |                        Основи на JS                         |                         Типове данни в JavaScript                          | Основите на типовете данни в JavaScript                                                                                                 |                                       [Типове данни](/2-js-basics/1-data-types/README.md)                                        |         Jasmine         |  
+| 05  |                        Основи на JS                         |                         Функции и методи                          | Научете за функциите и методите за управление на логическия поток на приложението                                                             |                              [Функции и методи](/2-js-basics/2-functions-methods/README.md)                               | Jasmine и Christopher |  
+| 06  |                        Основи на JS                         |                        Вземане на решения с JS                        | Научете как да създавате условия в кода си, използвайки методи за вземане на решения                                                           |                                 [Вземане на решения](/2-js-basics/3-making-decisions/README.md)                                  |         Jasmine         |  
+| 07  |                        Основи на JS                         |                            Масиви и цикли                            | Работа с данни, използвайки масиви и цикли в JavaScript                                                                                 |                                   [Масиви и цикли](/2-js-basics/4-arrays-loops/README.md)                                    |         Jasmine         |  
+| 08  |       [Терариум](/3-terrarium/solution/README.md)       |                            HTML на практика                            | Създайте HTML за онлайн терариум, фокусирайки се върху изграждането на оформление                                                         |                                 [Въведение в HTML](/3-terrarium/1-intro-to-html/README.md)                                 |           Jen           |  
+| 09  |       [Терариум](/3-terrarium/solution/README.md)       |                            CSS на практика                             | Създайте CSS за стилизиране на онлайн терариум, фокусирайки се върху основите на CSS, включително правенето на страницата отзивчива                     |                                  [Въведение в CSS](/3-terrarium/2-intro-to-css/README.md)                                  |           Jen           |  
+| 10  |            [Терариум](/3-terrarium/solution/README.md)            |                 Затваряния в JavaScript, манипулация на DOM                  | Създайте JavaScript, за да направите терариума функционален като интерфейс за влачене/пускане, фокусирайки се върху затваряния и манипулация на DOM             |                  [Затваряния в JavaScript, манипулация на DOM](/3-terrarium/3-intro-to-DOM-and-closures/README.md)                   |           Jen           |  
+| 11  |          [Игра за писане](/4-typing-game/solution/README.md)          |                          Създаване на игра за писане                           | Научете как да използвате събития от клавиатурата, за да управлявате логиката на вашето JavaScript приложение                                                          |                                [Програмиране, базирано на събития](/4-typing-game/typing-game/README.md)                                |       Christopher       |  
+| 12  | [Green Browser Extension](/5-browser-extension/solution/README.md) |                         Работа с браузъри                          | Научете как работят браузърите, тяхната история и как да създадете първите елементи на браузърно разширение                               |                               [За браузърите](/5-browser-extension/1-about-browsers/README.md)                                |           Jen           |
+| 13  | [Green Browser Extension](/5-browser-extension/solution/README.md) | Създаване на форма, извикване на API и съхраняване на променливи в локално хранилище | Създайте JavaScript елементите на вашето браузърно разширение, за да извикате API, използвайки променливи, съхранени в локално хранилище                      |                [API, форми и локално хранилище](/5-browser-extension/2-forms-browsers-local-storage/README.md)                 |           Jen           |
+| 14  | [Green Browser Extension](/5-browser-extension/solution/README.md) |          Фонови процеси в браузъра, уеб производителност          | Използвайте фоновите процеси на браузъра, за да управлявате иконата на разширението; научете за уеб производителност и някои оптимизации   |             [Фонови задачи и производителност](/5-browser-extension/3-background-tasks-and-performance/README.md)              |           Jen           |
+| 15  |           [Space Game](/6-space-game/solution/README.md)           |             По-напреднало разработване на игри с JavaScript             | Научете за наследяване, използвайки както класове, така и композиция, както и за модела Pub/Sub, като подготовка за създаване на игра              |                      [Въведение в напреднало разработване на игри](/6-space-game/1-introduction/README.md)                       |          Chris          |
+| 16  |           [Space Game](/6-space-game/solution/README.md)           |                           Рисуване върху canvas                            | Научете за Canvas API, използван за рисуване на елементи на екрана                                                                       |                                [Рисуване върху canvas](/6-space-game/2-drawing-to-canvas/README.md)                                |          Chris          |
+| 17  |           [Space Game](/6-space-game/solution/README.md)           |                   Преместване на елементи по екрана                    | Открийте как елементите могат да се движат, използвайки картезиански координати и Canvas API                                            |                           [Преместване на елементи](/6-space-game/3-moving-elements-around/README.md)                           |          Chris          |
+| 18  |           [Space Game](/6-space-game/solution/README.md)           |                          Откриване на сблъсъци                           | Направете елементите да се сблъскват и реагират един на друг, използвайки натискания на клавиши, и осигурете функция за охлаждане за производителността на играта    |                              [Откриване на сблъсъци](/6-space-game/4-collision-detection/README.md)                              |          Chris          |
+| 19  |           [Space Game](/6-space-game/solution/README.md)           |                             Поддържане на резултат                              | Извършвайте математически изчисления, базирани на състоянието и производителността на играта                                                                |                                    [Поддържане на резултат](/6-space-game/5-keeping-score/README.md)                                    |          Chris          |
+| 20  |           [Space Game](/6-space-game/solution/README.md)           |                     Завършване и рестартиране на играта                     | Научете за завършване и рестартиране на играта, включително почистване на ресурси и нулиране на стойности на променливи                              |                                [Условие за край](/6-space-game/6-end-condition/README.md)                                 |          Chris          |
+| 21  |         [Banking App](/7-bank-project/solution/README.md)          |                 HTML шаблони и маршрути в уеб приложение                 | Научете как да създадете структурата на архитектурата на многостраничен уебсайт, използвайки маршрути и HTML шаблони                             |                            [HTML шаблони и маршрути](/7-bank-project/1-template-route/README.md)                             |          Yohan          |
+| 22  |         [Banking App](/7-bank-project/solution/README.md)          |                  Създаване на форма за вход и регистрация                   | Научете за създаване на форми и обработка на процедури за валидиране                                                                          |                                           [Форми](/7-bank-project/2-forms/README.md)                                           |          Yohan          |
+| 23  |         [Banking App](/7-bank-project/solution/README.md)          |                   Методи за извличане и използване на данни                   | Как данните се движат в и извън вашето приложение, как да ги извличате, съхранявате и изтривате                                                 |                                            [Данни](/7-bank-project/3-data/README.md)                                            |          Yohan          |
+| 24  |         [Banking App](/7-bank-project/solution/README.md)          |                      Концепции за управление на състояние                      | Научете как вашето приложение запазва състояние и как да го управлявате програмно                                                              |                                [Управление на състояние](/7-bank-project/4-state-management/README.md)                                |          Yohan          |
+
+
+## 🏫 Педагогика
+
+Нашата учебна програма е създадена с две ключови педагогически принципа:
+* обучение чрез проекти
+* чести тестове
+
+Програмата учи основите на JavaScript, HTML и CSS, както и най-новите инструменти и техники, използвани от съвременните уеб разработчици. Студентите ще имат възможност да придобият практически опит, като създадат игра за писане, виртуален терариум, екологично браузърно разширение, игра в стил "Space Invaders" и банково приложение за бизнеси. До края на серията студентите ще са придобили солидно разбиране за уеб разработката.
+
+> 🎓 Можете да вземете първите няколко урока от тази учебна програма като [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) на Microsoft Learn!
+
+Като гарантираме, че съдържанието е свързано с проекти, процесът става по-ангажиращ за студентите и запазването на концепциите се подобрява. Също така написахме няколко начални урока за основите на JavaScript, за да въведем концепции, съчетани с видео от "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" колекцията от видео уроци, някои от чиито автори допринесоха за тази учебна програма.
+
+Освен това, тест с нисък риск преди час задава намерението на студента към изучаване на тема, докато втори тест след час осигурява допълнително запазване на знанията. Тази учебна програма е проектирана да бъде гъвкава и забавна и може да бъде взета изцяло или частично. Проектите започват малки и стават все по-сложни до края на 12-седмичния цикъл.
+
+Докато умишлено избягвахме въвеждането на JavaScript рамки, за да се концентрираме върху основните умения, необходими като уеб разработчик преди приемането на рамка, добра следваща стъпка след завършване на тази учебна програма би била изучаването на Node.js чрез друга колекция от видеа: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
+
+> Посетете нашите [Правила за поведение](CODE_OF_CONDUCT.md) и [Насоки за принос](CONTRIBUTING.md). Очакваме вашата конструктивна обратна връзка!
+
+
+## 🧭 Офлайн достъп
+
+Можете да стартирате тази документация офлайн, използвайки [Docsify](https://docsify.js.org/#/). Форкнете този репозиторий, [инсталирайте Docsify](https://docsify.js.org/#/quickstart) на вашата локална машина и след това в основната папка на този репозиторий въведете `docsify serve`. Уебсайтът ще бъде достъпен на порт 3000 на вашия localhost: `localhost:3000`.
+
+## 📘 PDF
+
+PDF на всички уроци може да бъде намерен [тук](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
+
+
+## 🎒 Други курсове
+
+Нашият екип създава и други курсове! Вижте:
+
+- [Generative AI for Beginners](https://aka.ms/genai-beginners)
+- [Generative AI for Beginners .NET](https://github.com/microsoft/Generative-AI-for-beginners-dotnet)
+- [Generative AI with JavaScript](https://github.com/microsoft/generative-ai-with-javascript)
+- [Generative AI with Java](https://github.com/microsoft/Generative-AI-for-beginners-java)
+- [AI for Beginners](https://aka.ms/ai-beginners)
+- [Data Science for Beginners](https://aka.ms/datascience-beginners)
+- [ML for Beginners](https://aka.ms/ml-beginners)
+- [Cybersecurity for Beginners](https://github.com/microsoft/Security-101)
+- [Web Dev for Beginners](https://aka.ms/webdev-beginners)
+- [IoT for Beginners](https://aka.ms/iot-beginners)
+- [XR Development for Beginners](https://github.com/microsoft/xr-development-for-beginners)
+- [Mastering GitHub Copilot for Agentic use](https://github.com/microsoft/Mastering-GitHub-Copilot-for-Paired-Programming)
+- [Mastering GitHub Copilot for C#/.NET Developers](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers)
+- [Choose Your Own Copilot Adventure](https://github.com/microsoft/CopilotAdventures)
+
+## Лиценз
+
+Този репозиторий е лицензиран под MIT лиценза. Вижте файла [LICENSE](../../LICENSE) за повече информация.
+
+---
+
+**Отказ от отговорност**:  
+Този документ е преведен с помощта на AI услуга за превод [Co-op Translator](https://github.com/Azure/co-op-translator). Въпреки че се стремим към точност, моля, имайте предвид, че автоматизираните преводи може да съдържат грешки или неточности. Оригиналният документ на неговия роден език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален човешки превод. Ние не носим отговорност за недоразумения или погрешни интерпретации, произтичащи от използването на този превод.
\ No newline at end of file
diff --git a/translations/bg/SECURITY.md b/translations/bg/SECURITY.md
new file mode 100644
index 00000000..6d263c8d
--- /dev/null
+++ b/translations/bg/SECURITY.md
@@ -0,0 +1,51 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "4ecc3bf2e27983d4c780be6f26ee6228",
+  "translation_date": "2025-08-27T21:58:21+00:00",
+  "source_file": "SECURITY.md",
+  "language_code": "bg"
+}
+-->
+## Сигурност
+
+Microsoft приема сигурността на своите софтуерни продукти и услуги сериозно, включително всички хранилища с изходен код, управлявани чрез нашите GitHub организации, които включват [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) и [нашите GitHub организации](https://opensource.microsoft.com/?WT.mc_id=academic-77807-sagibbon).
+
+Ако смятате, че сте открили уязвимост в сигурността в някое хранилище, притежавано от Microsoft, която отговаря на [определението на Microsoft за уязвимост в сигурността](https://docs.microsoft.com/previous-versions/tn-archive/cc751383(v=technet.10)/?WT.mc_id=academic-77807-sagibbon), моля, докладвайте я, както е описано по-долу.
+
+## Докладване на проблеми със сигурността
+
+**Моля, не докладвайте уязвимости в сигурността чрез публични GitHub въпроси.**
+
+Вместо това, докладвайте ги на Центъра за отговор на сигурността на Microsoft (MSRC) на [https://msrc.microsoft.com/create-report](https://msrc.microsoft.com/create-report/?WT.mc_id=academic-77807-sagibbon).
+
+Ако предпочитате да изпратите доклад без да влизате в системата, изпратете имейл на [secure@microsoft.com](mailto:secure@microsoft.com). Ако е възможно, криптирайте съобщението си с нашия PGP ключ; можете да го изтеглите от [страницата за PGP ключ на Центъра за отговор на сигурността на Microsoft](https://www.microsoft.com/msrc/pgp-key-msrc/?WT.mc_id=academic-77807-sagibbon).
+
+Трябва да получите отговор в рамките на 24 часа. Ако по някаква причина не получите такъв, моля, последвайте с имейл, за да се уверите, че сме получили първоначалното ви съобщение. Допълнителна информация можете да намерите на [microsoft.com/msrc](https://www.microsoft.com/msrc/?WT.mc_id=academic-77807-sagibbon).
+
+Моля, включете исканата информация, изброена по-долу (доколкото можете да я предоставите), за да ни помогнете да разберем по-добре естеството и обхвата на възможния проблем:
+
+  * Тип на проблема (например препълване на буфер, SQL инжекция, cross-site scripting и др.)
+  * Пълни пътища на изходния файл(ове), свързани с проявата на проблема
+  * Местоположение на засегнатия изходен код (таг/клон/комит или директен URL)
+  * Специална конфигурация, необходима за възпроизвеждане на проблема
+  * Стъпка по стъпка инструкции за възпроизвеждане на проблема
+  * Доказателство за концепция или експлойт код (ако е възможно)
+  * Въздействие на проблема, включително как нападател може да го използва
+
+Тази информация ще ни помогне да обработим вашия доклад по-бързо.
+
+Ако докладвате за програма за награди за грешки, по-пълните доклади могат да допринесат за по-висока награда. Моля, посетете страницата на [Програмата за награди за грешки на Microsoft](https://microsoft.com/msrc/bounty/?WT.mc_id=academic-77807-sagibbon) за повече подробности относно активните програми.
+
+## Предпочитани езици
+
+Предпочитаме всички комуникации да бъдат на английски.
+
+## Политика
+
+Microsoft следва принципа на [Координирано разкриване на уязвимости](https://www.microsoft.com/msrc/cvd/?WT.mc_id=academic-77807-sagibbon).
+
+---
+
+**Отказ от отговорност**:  
+Този документ е преведен с помощта на AI услуга за превод [Co-op Translator](https://github.com/Azure/co-op-translator). Въпреки че се стремим към точност, моля, имайте предвид, че автоматизираните преводи може да съдържат грешки или неточности. Оригиналният документ на неговия роден език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален човешки превод. Ние не носим отговорност за недоразумения или погрешни интерпретации, произтичащи от използването на този превод.
\ No newline at end of file
diff --git a/translations/bg/SUPPORT.md b/translations/bg/SUPPORT.md
new file mode 100644
index 00000000..0b585ac9
--- /dev/null
+++ b/translations/bg/SUPPORT.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "c9d207ff77b4bb46e46dc2b607a8ec1a",
+  "translation_date": "2025-08-27T21:56:40+00:00",
+  "source_file": "SUPPORT.md",
+  "language_code": "bg"
+}
+-->
+# Поддръжка
+
+## Как да съобщите за проблеми и да получите помощ  
+
+Този проект използва GitHub Issues за проследяване на грешки и заявки за нови функции. Моля, потърсете съществуващите проблеми, преди да създадете нови, за да избегнете дублиране. За нови проблеми, подайте вашата грешка или заявка за функция като нов Issue.
+
+За помощ и въпроси относно използването на този проект, моля, вижте [нашите насоки за принос](CONTRIBUTING.md).
+
+## Политика за поддръжка на Microsoft  
+
+Поддръжката за този проект е ограничена до изброените по-горе ресурси.
+
+---
+
+**Отказ от отговорност**:  
+Този документ е преведен с помощта на AI услуга за превод [Co-op Translator](https://github.com/Azure/co-op-translator). Въпреки че се стремим към точност, моля, имайте предвид, че автоматизираните преводи може да съдържат грешки или неточности. Оригиналният документ на неговия роден език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален човешки превод. Ние не носим отговорност за недоразумения или погрешни интерпретации, произтичащи от използването на този превод.
\ No newline at end of file
diff --git a/translations/bg/_404.md b/translations/bg/_404.md
new file mode 100644
index 00000000..d6d65565
--- /dev/null
+++ b/translations/bg/_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": "bg"
+}
+-->
+# Работим по въпроса
+
+Работим върху тази страница. Моля, проверете отново по-късно.
+
+Отворете [issue](https://github.com/microsoft/Web-Dev-For-Beginners/issues/new/choose), ако имате някакви въпроси.
+
+**[Обратно към началото](../../../../../../..)**
+
+---
+
+**Отказ от отговорност**:  
+Този документ е преведен с помощта на AI услуга за превод [Co-op Translator](https://github.com/Azure/co-op-translator). Въпреки че се стремим към точност, моля, имайте предвид, че автоматизираните преводи може да съдържат грешки или неточности. Оригиналният документ на неговия роден език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален човешки превод. Ние не носим отговорност за недоразумения или погрешни интерпретации, произтичащи от използването на този превод.
\ No newline at end of file
diff --git a/translations/bg/docs/_navbar.md b/translations/bg/docs/_navbar.md
new file mode 100644
index 00000000..f657849b
--- /dev/null
+++ b/translations/bg/docs/_navbar.md
@@ -0,0 +1,34 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "3bd2f51ecf4ac9b39277cba748943793",
+  "translation_date": "2025-08-27T22:15:17+00:00",
+  "source_file": "docs/_navbar.md",
+  "language_code": "bg"
+}
+-->
+- Преводи
+  - [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)
+
+---
+
+**Отказ от отговорност**:  
+Този документ е преведен с помощта на AI услуга за превод [Co-op Translator](https://github.com/Azure/co-op-translator). Въпреки че се стремим към точност, моля, имайте предвид, че автоматичните преводи може да съдържат грешки или неточности. Оригиналният документ на неговия изходен език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален превод от човек. Ние не носим отговорност за каквито и да е недоразумения или погрешни интерпретации, произтичащи от използването на този превод.
\ No newline at end of file
diff --git a/translations/bg/docs/_sidebar.md b/translations/bg/docs/_sidebar.md
new file mode 100644
index 00000000..5eef3e16
--- /dev/null
+++ b/translations/bg/docs/_sidebar.md
@@ -0,0 +1,51 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "655c91b5979de46f1d70d97f0c5f1d14",
+  "translation_date": "2025-08-27T22:14:49+00:00",
+  "source_file": "docs/_sidebar.md",
+  "language_code": "bg"
+}
+-->
+- Въведение
+  - [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)
+  
+- Основи на 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)
+
+- Игра за писане
+  - [11](../4-typing-game/typing-game/README.md)
+  
+- Разширение за браузър
+  - [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)
+
+- Космическа игра
+  - [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)
+
+- Банков проект
+  - [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)
+
+---
+
+**Отказ от отговорност**:  
+Този документ е преведен с помощта на AI услуга за превод [Co-op Translator](https://github.com/Azure/co-op-translator). Въпреки че се стремим към точност, моля, имайте предвид, че автоматизираните преводи може да съдържат грешки или неточности. Оригиналният документ на неговия роден език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален човешки превод. Ние не носим отговорност за недоразумения или погрешни интерпретации, произтичащи от използването на този превод.
\ No newline at end of file
diff --git a/translations/bg/for-teachers.md b/translations/bg/for-teachers.md
new file mode 100644
index 00000000..88cc072d
--- /dev/null
+++ b/translations/bg/for-teachers.md
@@ -0,0 +1,47 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "75cb51f7ca9ea0b097ef4a1287e9290c",
+  "translation_date": "2025-08-27T21:57:07+00:00",
+  "source_file": "for-teachers.md",
+  "language_code": "bg"
+}
+-->
+## За преподаватели
+
+Искате ли да използвате тази учебна програма във вашата класна стая? Чувствайте се свободни да го направите!
+
+Всъщност можете да я използвате директно в GitHub, като използвате GitHub Classroom.
+
+За да го направите, клонирайте този репозиторий. Ще трябва да създадете отделен репозиторий за всяка лекция, така че ще трябва да извлечете всяка папка в отделен репозиторий. По този начин [GitHub Classroom](https://classroom.github.com/classrooms) може да обработва всяка лекция поотделно.
+
+Тези [пълни инструкции](https://github.blog/2020-03-18-set-up-your-digital-classroom-with-github-classroom/) ще ви дадат представа как да настроите вашата класна стая.
+
+## Използване в Moodle, Canvas или Blackboard
+
+Тази учебна програма работи добре в тези системи за управление на обучението! Използвайте [файла за качване в Moodle](../../../../../../../teaching-files/webdev-moodle.mbz) за пълното съдържание или опитайте [файла Common Cartridge](../../../../../../../teaching-files/webdev-common-cartridge.imscc), който съдържа част от съдържанието. Moodle Cloud не поддържа пълни експорти на Common Cartridge, така че е за предпочитане да използвате файла за изтегляне на Moodle, който може да бъде качен в Canvas. Моля, уведомете ни как можем да подобрим този процес.
+
+![Moodle](../../translated_images/moodle.94eb93d714a50cb2c97435b408017dee224348b61bc86203ffd43a4f4e57b95f.bg.png)
+> Учебната програма в класна стая на Moodle
+
+![Canvas](../../translated_images/canvas.fbd605ff8e5b8aff567d398528ce113db304446b90b9cad55c654de3fdfcda34.bg.png)
+> Учебната програма в Canvas
+
+## Използване на репозитория в текущия му вид
+
+Ако искате да използвате този репозиторий в настоящия му вид, без да използвате GitHub Classroom, това също е възможно. Ще трябва да комуникирате с вашите ученици коя лекция да разгледате заедно.
+
+В онлайн формат (Zoom, Teams или друг) можете да създадете групи за дискусии за тестовете и да наставлявате учениците, за да ги подготвите за учене. След това поканете учениците да участват в тестовете и да изпратят своите отговори като 'issues' в определено време. Можете да направите същото с заданията, ако искате учениците да работят съвместно и открито.
+
+Ако предпочитате по-приватен формат, помолете учениците си да клонират учебната програма, лекция по лекция, в свои собствени GitHub репозитории като частни репозитории и да ви дадат достъп. След това те могат да завършат тестовете и заданията насаме и да ги изпратят до вас чрез 'issues' в репозитория на вашата класна стая.
+
+Има много начини да направите това работещо в онлайн класна стая. Моля, уведомете ни какво работи най-добре за вас!
+
+## Моля, споделете вашите мисли!
+
+Искаме да направим тази учебна програма полезна за вас и вашите ученици. Свържете се с нас в [Учителския ъгъл](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner) и отворете [**ново issue**](https://github.com/microsoft/Web-Dev-For-Beginners/issues/new/choose) за всякакви заявки, проблеми и обратна връзка.
+
+---
+
+**Отказ от отговорност**:  
+Този документ е преведен с помощта на AI услуга за превод [Co-op Translator](https://github.com/Azure/co-op-translator). Въпреки че се стремим към точност, моля, имайте предвид, че автоматизираните преводи може да съдържат грешки или неточности. Оригиналният документ на неговия роден език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален човешки превод. Ние не носим отговорност за недоразумения или погрешни интерпретации, произтичащи от използването на този превод.
\ No newline at end of file
diff --git a/translations/bg/lesson-template/README.md b/translations/bg/lesson-template/README.md
new file mode 100644
index 00000000..6eaf77f0
--- /dev/null
+++ b/translations/bg/lesson-template/README.md
@@ -0,0 +1,65 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "0494be70ad7fadd13a8c3d549c23e355",
+  "translation_date": "2025-08-27T23:07:04+00:00",
+  "source_file": "lesson-template/README.md",
+  "language_code": "bg"
+}
+-->
+# [Тема на урока]
+
+![Вградете видео тук](../../../lesson-template/video-url)
+
+## [Тест преди лекцията](../../../lesson-template/quiz-url)
+
+[Опишете какво ще научим]
+
+### Въведение
+
+Опишете какво ще бъде разгледано
+
+> Бележки
+
+### Предпоставки
+
+Какви стъпки трябва да са изпълнени преди този урок?
+
+### Подготовка
+
+Подготвителни стъпки за започване на урока
+
+---
+
+[Разгледайте съдържанието на части]
+
+## [Тема 1]
+
+### Задача:
+
+Работете заедно, за да подобрите постепенно вашата кодова база и да изградите проекта със споделен код:
+
+```html
+code blocks
+```
+
+✅ Проверка на знанията - използвайте този момент, за да разширите знанията на учениците с отворени въпроси
+
+## [Тема 2]
+
+## [Тема 3]
+
+🚀 Предизвикателство: Добавете предизвикателство за учениците, върху което да работят съвместно в клас, за да подобрят проекта
+
+По избор: добавете екранна снимка на потребителския интерфейс на завършения урок, ако е подходящо
+
+## [Тест след лекцията](../../../lesson-template/quiz-url)
+
+## Преглед и самостоятелно обучение
+
+**Краен срок за задание [MM/YY]**: [Име на заданието](assignment.md)
+
+---
+
+**Отказ от отговорност**:  
+Този документ е преведен с помощта на AI услуга за превод [Co-op Translator](https://github.com/Azure/co-op-translator). Въпреки че се стремим към точност, моля, имайте предвид, че автоматизираните преводи може да съдържат грешки или неточности. Оригиналният документ на неговия роден език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален човешки превод. Не носим отговорност за недоразумения или погрешни интерпретации, произтичащи от използването на този превод.
\ No newline at end of file
diff --git a/translations/bg/lesson-template/assignment.md b/translations/bg/lesson-template/assignment.md
new file mode 100644
index 00000000..786ec76c
--- /dev/null
+++ b/translations/bg/lesson-template/assignment.md
@@ -0,0 +1,23 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "b5f62ec256c7e43e771f0d3b4e1a9130",
+  "translation_date": "2025-08-27T23:07:22+00:00",
+  "source_file": "lesson-template/assignment.md",
+  "language_code": "bg"
+}
+-->
+# [Име на заданието]
+
+## Инструкции
+
+## Критерии за оценка
+
+| Критерии | Отлично | Задоволително | Нуждае се от подобрение |
+| -------- | --------- | -------- | ----------------- |
+|          |           |          |                   |
+
+---
+
+**Отказ от отговорност**:  
+Този документ е преведен с помощта на AI услуга за превод [Co-op Translator](https://github.com/Azure/co-op-translator). Въпреки че се стремим към точност, моля, имайте предвид, че автоматизираните преводи може да съдържат грешки или неточности. Оригиналният документ на неговия роден език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален човешки превод. Не носим отговорност за недоразумения или погрешни интерпретации, произтичащи от използването на този превод.
\ No newline at end of file
diff --git a/translations/bg/quiz-app/README.md b/translations/bg/quiz-app/README.md
new file mode 100644
index 00000000..a3559fed
--- /dev/null
+++ b/translations/bg/quiz-app/README.md
@@ -0,0 +1,191 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "5301875c55bb305e6046bed3a4fd06d2",
+  "translation_date": "2025-08-27T23:10:56+00:00",
+  "source_file": "quiz-app/README.md",
+  "language_code": "bg"
+}
+-->
+# Приложение за тестове
+
+Тези тестове са предварителни и последващи тестове към лекциите от учебната програма за наука за данни на https://aka.ms/webdev-beginners
+
+## Добавяне на преведен набор от тестове
+
+Добавете превод на тестовете, като създадете съответстващи структури на тестовете в папката `assets/translations`. Оригиналните тестове се намират в `assets/translations/en`. Тестовете са разделени на няколко групи. Уверете се, че номерацията съответства на правилния раздел на тестовете. В тази учебна програма има общо 40 теста, като броенето започва от 0.
+
+  
+<details>
+<summary>Ето как изглежда файлът за превод:</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>
+
+След като редактирате преводите, редактирайте файла `index.js` в папката за преводи, за да импортирате всички файлове, следвайки конвенциите в `en`.
+
+Редактирайте файла `index.js` в `assets/translations`, за да импортирате новите преведени файлове.
+
+Например, ако вашият JSON файл за превод е `ex.json`, направете 'ex' ключ за локализация, след това го въведете, както е показано по-долу, за да го импортирате:
+
+<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>
+
+## Стартиране на приложението за тестове локално
+
+### Предпоставки
+
+- Акаунт в GitHub
+- [Node.js и Git](https://nodejs.org/)
+
+### Инсталиране и настройка
+
+1. Създайте хранилище от този [шаблон](https://github.com/new?template_name=Web-Dev-For-Beginners&template_owner=microsoft) 
+
+1. Клонирайте новото си хранилище и навигирайте до папката quiz-app
+
+   ```bash
+   git clone https://github.com/your-github-organization/repo-name
+   cd repo-name/quiz-app
+   ```
+
+1. Инсталирайте npm пакетите и зависимостите
+
+   ```bash
+   npm install
+   ```
+
+### Създаване на приложението
+
+1. За да създадете решението, изпълнете:
+
+   ```bash
+   npm run build
+   ```
+
+### Стартиране на приложението
+
+1. За да стартирате решението, изпълнете:
+
+    ```bash
+    npm run dev
+    ```
+
+### [Опционално] Линтинг
+
+1. За да се уверите, че кодът е проверен, изпълнете:
+
+    ```bash
+    npm run lint
+    ```
+
+## Деплой на приложението за тестове в Azure 
+
+### Предпоставки
+- Абонамент за Azure. Регистрирайте се за безплатен [тук](https://aka.ms/azure-free).
+
+    _Оценка на разходите за деплой на това приложение за тестове: БЕЗПЛАТНО_
+
+[![Deploy to Azure](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/#create/Microsoft.StaticApp)
+
+След като влезете в Azure чрез горния линк, изберете абонамент и ресурсна група, след това:
+
+- Детайли за статичното уеб приложение: Посочете име и изберете хостинг план
+- Вход в GitHub: Задайте източника на деплой като GitHub, след това влезте и попълнете необходимите полета във формуляра:
+    - *Организация* – Изберете вашата организация.
+    - *Хранилище* – Изберете хранилището за учебната програма Web Dev for Beginners. 
+    - *Клон* - Изберете клон (main) 
+- Предварителни настройки за създаване: Azure Static Web Apps използва алгоритъм за откриване на рамката, използвана във вашето приложение. 
+    - *Местоположение на приложението* - ./quiz-app
+    - *Местоположение на API* -
+    - *Местоположение на изхода* - dist
+- Деплой: Кликнете 'Review + Create', след това 'Create'
+
+    След като деплойът е завършен, файл за работен процес ще бъде създаден в директорията *.github* на вашето хранилище. Този файл за работен процес съдържа инструкции за събития, които ще задействат повторен деплой на приложението в Azure, например, _**push** на клон **main**_ и др.
+
+    <details>
+    <summary>Примерен файл за работен процес</summary>
+    Ето как може да изглежда файлът за работен процес на 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>
+
+- След деплой: След като деплойът е завършен, кликнете върху 'Go to Deployment', след това 'View app in browser'.
+
+След като GitHub Action (работен процес) бъде изпълнен успешно, обновете страницата на живо, за да видите вашето приложение.
+
+---
+
+**Отказ от отговорност**:  
+Този документ е преведен с помощта на AI услуга за превод [Co-op Translator](https://github.com/Azure/co-op-translator). Въпреки че се стремим към точност, моля, имайте предвид, че автоматизираните преводи може да съдържат грешки или неточности. Оригиналният документ на неговия роден език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален човешки превод. Ние не носим отговорност за недоразумения или погрешни интерпретации, произтичащи от използването на този превод.
\ No newline at end of file
diff --git a/translations/ro/1-getting-started-lessons/1-intro-to-programming-languages/README.md b/translations/ro/1-getting-started-lessons/1-intro-to-programming-languages/README.md
new file mode 100644
index 00000000..fcf8be1d
--- /dev/null
+++ b/translations/ro/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:35:08+00:00",
+  "source_file": "1-getting-started-lessons/1-intro-to-programming-languages/README.md",
+  "language_code": "ro"
+}
+-->
+# Introducere în Limbaje de Programare și Instrumentele Meseriei
+
+Această lecție acoperă elementele de bază ale limbajelor de programare. Subiectele discutate aici se aplică majorității limbajelor de programare moderne. În secțiunea „Instrumentele Meseriei”, vei învăța despre software-uri utile care te ajută ca dezvoltator.
+
+![Intro Programming](../../../../translated_images/webdev101-programming.d6e3f98e61ac4bff0b27dcbf1c3f16c8ed46984866f2d29988929678b0058fde.ro.png)  
+> Sketchnote de [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Chestionar Pre-Lecție  
+[Chestionar pre-lecție](https://forms.office.com/r/dru4TE0U9n?origin=lprLink)
+
+## Introducere
+
+În această lecție, vom acoperi:
+
+- Ce este programarea?  
+- Tipuri de limbaje de programare  
+- Elemente de bază ale unui program  
+- Software-uri și instrumente utile pentru dezvoltatorii profesioniști  
+
+> Poți parcurge această lecție pe [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon)!
+
+## Ce este Programarea?
+
+Programarea (cunoscută și ca „codare”) este procesul de scriere a instrucțiunilor pentru un dispozitiv, cum ar fi un computer sau un dispozitiv mobil. Scriem aceste instrucțiuni folosind un limbaj de programare, care este apoi interpretat de dispozitiv. Aceste seturi de instrucțiuni pot fi denumite în diverse moduri, dar *program*, *program de calculator*, *aplicație (app)* și *executabil* sunt câteva denumiri populare.
+
+Un *program* poate fi orice este scris cu cod: site-uri web, jocuri și aplicații pentru telefon sunt programe. Deși este posibil să creezi un program fără a scrie cod, logica de bază este interpretată de dispozitiv, iar acea logică a fost cel mai probabil scrisă cu cod. Un program care *rulează* sau *execută* cod îndeplinește instrucțiuni. Dispozitivul pe care citești această lecție rulează un program pentru a o afișa pe ecran.
+
+✅ Fă puțină cercetare: cine este considerat a fi primul programator din lume?
+
+## Limbaje de Programare
+
+Limbajele de programare permit dezvoltatorilor să scrie instrucțiuni pentru un dispozitiv. Dispozitivele pot înțelege doar binar (1 și 0), iar pentru *majoritatea* dezvoltatorilor, aceasta nu este o metodă eficientă de comunicare. Limbajele de programare sunt vehiculul de comunicare între oameni și computere.
+
+Limbajele de programare vin în diferite formate și pot servi scopuri diferite. De exemplu, JavaScript este utilizat în principal pentru aplicații web, în timp ce Bash este folosit în principal pentru sisteme de operare.
+
+*Limbajele de nivel scăzut* necesită, de obicei, mai puțini pași decât *limbajele de nivel înalt* pentru ca un dispozitiv să interpreteze instrucțiunile. Totuși, ceea ce face limbajele de nivel înalt populare este lizibilitatea și suportul lor. JavaScript este considerat un limbaj de nivel înalt.
+
+Următorul cod ilustrează diferența dintre un limbaj de nivel înalt (JavaScript) și un limbaj de nivel scăzut (cod de asamblare ARM).
+
+```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
+```
+
+Crezi sau nu, *ambele fac același lucru*: afișează o secvență Fibonacci până la 10.
+
+✅ O secvență Fibonacci este [definită](https://en.wikipedia.org/wiki/Fibonacci_number) ca un set de numere în care fiecare număr este suma celor două precedente, începând de la 0 și 1. Primele 10 numere din secvența Fibonacci sunt 0, 1, 1, 2, 3, 5, 8, 13, 21 și 34.
+
+## Elemente ale unui Program
+
+O singură instrucțiune într-un program se numește *declarație* și, de obicei, are un caracter sau un spațiu care marchează unde se termină instrucțiunea, sau *terminatorul*. Modul în care un program termină variază în funcție de limbaj.
+
+Declarațiile dintr-un program pot depinde de date furnizate de un utilizator sau din alte surse pentru a executa instrucțiuni. Datele pot schimba comportamentul unui program, așa că limbajele de programare vin cu o modalitate de a stoca temporar datele pentru a fi utilizate mai târziu. Acestea se numesc *variabile*. Variabilele sunt declarații care instruiesc un dispozitiv să salveze date în memoria sa. Variabilele din programe sunt similare cu variabilele din algebră, unde au un nume unic, iar valoarea lor poate varia în timp.
+
+Există posibilitatea ca unele declarații să nu fie executate de un dispozitiv. Acest lucru se întâmplă, de obicei, intenționat, atunci când este scris de dezvoltator, sau accidental, când apare o eroare neașteptată. Acest tip de control asupra unei aplicații o face mai robustă și mai ușor de întreținut. De obicei, aceste schimbări de control au loc atunci când anumite condiții sunt îndeplinite. O declarație comună folosită în programarea modernă pentru a controla modul în care rulează un program este declarația `if..else`.
+
+✅ Vei învăța mai multe despre acest tip de declarație în lecțiile următoare.
+
+## Instrumentele Meseriei
+
+[![Tools of the Trade](https://img.youtube.com/vi/69WJeXGBdxg/0.jpg)](https://youtube.com/watch?v=69WJeXGBdxg "Tools of the Trade")
+
+> 🎥 Fă clic pe imaginea de mai sus pentru un videoclip despre instrumente
+
+În această secțiune, vei învăța despre câteva software-uri pe care le vei găsi foarte utile pe măsură ce îți începi călătoria ca dezvoltator profesionist.
+
+Un **mediu de dezvoltare** este un set unic de instrumente și funcționalități pe care un dezvoltator le folosește frecvent atunci când scrie software. Unele dintre aceste instrumente au fost personalizate pentru nevoile specifice ale unui dezvoltator și pot varia în timp, dacă acel dezvoltator își schimbă prioritățile în muncă, proiectele personale sau limbajul de programare utilizat. Mediile de dezvoltare sunt la fel de unice ca dezvoltatorii care le folosesc.
+
+### Editoare
+
+Unul dintre cele mai importante instrumente pentru dezvoltarea software este editorul. Editoarele sunt locurile unde scrii codul și, uneori, unde îl rulezi.
+
+Dezvoltatorii se bazează pe editoare din câteva motive suplimentare:
+
+- *Depanarea* ajută la descoperirea erorilor, trecând prin cod linie cu linie. Unele editoare au capabilități de depanare; acestea pot fi personalizate și adăugate pentru limbaje de programare specifice.  
+- *Colorarea sintaxei* adaugă culori și formatare textului din cod, făcându-l mai ușor de citit. Majoritatea editorilor permit personalizarea colorării sintaxei.  
+- *Extensii și Integrări* sunt instrumente specializate pentru dezvoltatori, create de dezvoltatori. Aceste instrumente nu sunt incluse în editorul de bază. De exemplu, mulți dezvoltatori documentează codul pentru a explica cum funcționează. Ei pot instala o extensie de verificare ortografică pentru a găsi greșeli de tipar în documentație. Majoritatea extensiilor sunt destinate utilizării într-un editor specific, iar majoritatea editorilor vin cu o modalitate de a căuta extensii disponibile.  
+- *Personalizarea* permite dezvoltatorilor să creeze un mediu de dezvoltare unic, adaptat nevoilor lor. Majoritatea editorilor sunt extrem de personalizabili și pot permite, de asemenea, dezvoltatorilor să creeze extensii personalizate.
+
+#### Editoare Populare și Extensii pentru Dezvoltare Web
+
+- [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/)  
+
+### Browsere
+
+Un alt instrument esențial este browserul. Dezvoltatorii web se bazează pe browser pentru a vedea cum rulează codul lor pe web. De asemenea, este folosit pentru a afișa elementele vizuale ale unei pagini web scrise în editor, cum ar fi HTML.
+
+Multe browsere vin cu *instrumente pentru dezvoltatori* (DevTools) care conțin un set de funcționalități utile și informații pentru a ajuta dezvoltatorii să colecteze și să capteze informații importante despre aplicația lor. De exemplu: Dacă o pagină web are erori, este uneori util să știi când au apărut. DevTools dintr-un browser pot fi configurate pentru a captura aceste informații.
+
+#### Browsere Populare ș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)  
+
+### Instrumente de Linie de Comandă
+
+Unii dezvoltatori preferă o interfață mai puțin grafică pentru sarcinile lor zilnice și se bazează pe linia de comandă pentru a realiza acest lucru. Scrierea codului necesită o cantitate semnificativă de tastare, iar unii dezvoltatori preferă să nu-și întrerupă fluxul pe tastatură. Ei folosesc scurtături de la tastatură pentru a comuta între ferestrele desktop, a lucra la fișiere diferite și a utiliza instrumente. Majoritatea sarcinilor pot fi realizate cu un mouse, dar un beneficiu al utilizării liniei de comandă este că multe pot fi realizate fără a comuta între mouse și tastatură. Un alt beneficiu al liniei de comandă este că poate fi configurată, iar configurația personalizată poate fi salvată, modificată ulterior și importată pe alte mașini de dezvoltare. Deoarece mediile de dezvoltare sunt atât de unice pentru fiecare dezvoltator, unii vor evita utilizarea liniei de comandă, alții se vor baza complet pe ea, iar unii preferă o combinație între cele două.
+
+### Opțiuni Populare pentru Linia de Comandă
+
+Opțiunile pentru linia de comandă diferă în funcție de sistemul de operare utilizat.
+
+*💻 = vine preinstalat pe sistemul de operare.*
+
+#### 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) (cunoscut și ca 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)  
+
+#### Instrumente Populare pentru Linia de Comandă
+
+- [Git](https://git-scm.com/) (💻 pe majoritatea sistemelor de operare)  
+- [NPM](https://www.npmjs.com/)  
+- [Yarn](https://classic.yarnpkg.com/en/docs/cli/)  
+
+### Documentație
+
+Când un dezvoltator dorește să învețe ceva nou, cel mai probabil va apela la documentație pentru a învăța cum să folosească acel lucru. Dezvoltatorii se bazează adesea pe documentație pentru a-i ghida în utilizarea corectă a instrumentelor și limbajelor, dar și pentru a dobândi cunoștințe mai profunde despre cum funcționează acestea.
+
+#### Documentație Populară despre Dezvoltarea Web
+
+- [Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web), de la Mozilla, editorii browserului [Firefox](https://www.mozilla.org/firefox/)  
+- [Frontend Masters](https://frontendmasters.com/learn/)  
+- [Web.dev](https://web.dev), de la Google, editorii browserului [Chrome](https://www.google.com/chrome/)  
+- [Documentația pentru dezvoltatori Microsoft](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers), pentru [Microsoft Edge](https://www.microsoft.com/edge)  
+- [W3 Schools](https://www.w3schools.com/where_to_start.asp)  
+
+✅ Fă puțină cercetare: Acum că știi elementele de bază ale mediului unui dezvoltator web, compară-l cu mediul unui designer web.
+
+---
+
+## 🚀 Provocare
+
+Compară câteva limbaje de programare. Care sunt trăsăturile unice ale JavaScript față de Java? Dar ale COBOL față de Go?
+
+## Chestionar Post-Lecție  
+[Chestionar post-lecție](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/2)
+
+## Recapitulare și Studiu Individual
+
+Studiază puțin despre diferitele limbaje disponibile pentru programatori. Încearcă să scrii o linie de cod într-un limbaj, apoi rescrie-o în alte două. Ce ai învățat?
+
+## Temă
+
+[Citirea Documentației](assignment.md)  
+
+---
+
+**Declinare de responsabilitate**:  
+Acest document a fost tradus folosind serviciul de traducere AI [Co-op Translator](https://github.com/Azure/co-op-translator). Deși ne străduim să asigurăm acuratețea, vă rugăm să rețineți că traducerile automate pot conține erori sau inexactități. Documentul original în limba sa natală ar trebui considerat sursa autoritară. Pentru informații critice, se recomandă traducerea profesională realizată de un specialist uman. Nu ne asumăm responsabilitatea pentru eventualele neînțelegeri sau interpretări greșite care pot apărea din utilizarea acestei traduceri.
\ No newline at end of file
diff --git a/translations/ro/1-getting-started-lessons/1-intro-to-programming-languages/assignment.md b/translations/ro/1-getting-started-lessons/1-intro-to-programming-languages/assignment.md
new file mode 100644
index 00000000..ebd2540f
--- /dev/null
+++ b/translations/ro/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-27T22:37:29+00:00",
+  "source_file": "1-getting-started-lessons/1-intro-to-programming-languages/assignment.md",
+  "language_code": "ro"
+}
+-->
+# Citirea Documentației
+
+## Instrucțiuni
+
+Există multe instrumente de care un dezvoltator web poate avea nevoie, disponibile în [documentația MDN pentru instrumente client-side](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview). Selectați 3 instrumente care nu sunt acoperite în lecție, explicați de ce un dezvoltator web le-ar folosi și căutați un instrument care se încadrează în această categorie, împărtășind documentația acestuia. Nu folosiți același exemplu de instrument din documentația MDN.
+
+## Criterii de Evaluare
+
+Exemplar | Adecvat | Necesită Îmbunătățiri
+--- | --- | -- |
+|Explicat de ce un dezvoltator web ar folosi instrumentul| Explicat cum, dar nu de ce dezvoltatorul ar folosi instrumentul| Nu a menționat cum sau de ce un dezvoltator ar folosi instrumentul  |
+
+---
+
+**Declinare de responsabilitate**:  
+Acest document a fost tradus folosind serviciul de traducere AI [Co-op Translator](https://github.com/Azure/co-op-translator). Deși ne străduim să asigurăm acuratețea, vă rugăm să rețineți că traducerile automate pot conține erori sau inexactități. Documentul original în limba sa natală ar trebui considerat sursa autoritară. Pentru informații critice, se recomandă traducerea profesională realizată de un specialist uman. Nu ne asumăm responsabilitatea pentru eventualele neînțelegeri sau interpretări greșite care pot apărea din utilizarea acestei traduceri.
\ No newline at end of file
diff --git a/translations/ro/1-getting-started-lessons/2-github-basics/README.md b/translations/ro/1-getting-started-lessons/2-github-basics/README.md
new file mode 100644
index 00000000..edab45ed
--- /dev/null
+++ b/translations/ro/1-getting-started-lessons/2-github-basics/README.md
@@ -0,0 +1,342 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "05666cecb8983a72cf0ce1d18932b5b7",
+  "translation_date": "2025-08-27T22:27:31+00:00",
+  "source_file": "1-getting-started-lessons/2-github-basics/README.md",
+  "language_code": "ro"
+}
+-->
+# Introducere în GitHub
+
+Această lecție acoperă elementele de bază ale GitHub, o platformă pentru găzduirea și gestionarea modificărilor aduse codului tău.
+
+![Intro în GitHub](../../../../translated_images/webdev101-github.8846d7971abef6f947909b4f9d343e2a23778aa716ca6b9d71df7174ee5009ac.ro.png)
+> Sketchnote de [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Chestionar înainte de lecție
+[Chestionar înainte de lecție](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/3)
+
+## Introducere
+
+În această lecție vom acoperi:
+
+- urmărirea muncii pe care o faci pe calculatorul tău
+- lucrul la proiecte împreună cu alții
+- cum să contribui la software open source
+
+### Cerințe preliminare
+
+Înainte de a începe, trebuie să verifici dacă Git este instalat. În terminal, tastează: 
+`git --version`
+
+Dacă Git nu este instalat, [descarcă Git](https://git-scm.com/downloads). Apoi, configurează profilul local Git în terminal:
+* `git config --global user.name "numele-tău"`
+* `git config --global user.email "emailul-tău"`
+
+Pentru a verifica dacă Git este deja configurat, poți tasta:
+`git config --list`
+
+De asemenea, vei avea nevoie de un cont GitHub, un editor de cod (cum ar fi Visual Studio Code) și să deschizi terminalul (sau: command prompt).
+
+Accesează [github.com](https://github.com/) și creează un cont dacă nu ai deja unul, sau conectează-te și completează profilul tău. 
+
+✅ GitHub nu este singurul depozit de cod din lume; există și altele, dar GitHub este cel mai cunoscut.
+
+### Pregătire
+
+Vei avea nevoie de un folder cu un proiect de cod pe calculatorul tău (laptop sau PC) și de un depozit public pe GitHub, care va servi drept exemplu pentru cum să contribui la proiectele altora.  
+
+---
+
+## Gestionarea codului
+
+Să presupunem că ai un folder local cu un proiect de cod și vrei să începi să îți urmărești progresul folosind git - sistemul de control al versiunilor. Unii oameni compară utilizarea git cu scrierea unei scrisori de dragoste către sinele tău din viitor. Citind mesajele de commit peste zile, săptămâni sau luni, vei putea să îți amintești de ce ai luat o anumită decizie sau să "revii" la o modificare - asta dacă scrii mesaje de commit bune.
+
+### Sarcină: Creează un depozit și comite cod  
+
+> Vezi videoclipul
+> 
+> [![Videoclip despre bazele Git și GitHub](https://img.youtube.com/vi/9R31OUPpxU4/0.jpg)](https://www.youtube.com/watch?v=9R31OUPpxU4)
+
+
+1. **Creează un depozit pe GitHub**. Pe GitHub.com, în fila de depozite sau din bara de navigare din dreapta sus, găsește butonul **new repo**.
+
+   1. Dă un nume depozitului tău (folderului)
+   1. Selectează **create repository**.
+
+1. **Navighează la folderul tău de lucru**. În terminal, schimbă directorul la folderul pe care vrei să începi să îl urmărești. Tastează:
+
+   ```bash
+   cd [name of your folder]
+   ```
+
+1. **Inițializează un depozit git**. În proiectul tău tastează:
+
+   ```bash
+   git init
+   ```
+
+1. **Verifică statusul**. Pentru a verifica statusul depozitului tastează:
+
+   ```bash
+   git status
+   ```
+
+   rezultatul poate arăta ceva de genul:
+
+   ```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
+   ```
+
+   De obicei, comanda `git status` îți spune lucruri precum ce fișiere sunt gata să fie _salvate_ în depozit sau ce fișiere au modificări pe care poate vrei să le păstrezi.
+
+1. **Adaugă toate fișierele pentru urmărire**
+   Acest proces este numit și "staging files"/ adăugarea fișierelor în zona de staging.
+
+   ```bash
+   git add .
+   ```
+
+   Argumentul `git add` plus `.` indică faptul că toate fișierele și modificările tale sunt pregătite pentru urmărire. 
+
+1. **Adaugă fișiere selectate pentru urmărire**
+
+   ```bash
+   git add [file or folder name]
+   ```
+
+   Acest lucru ne ajută să adăugăm doar fișierele selectate în zona de staging atunci când nu dorim să comitem toate fișierele deodată.
+
+1. **Elimină toate fișierele din zona de staging**
+
+   ```bash
+   git reset
+   ```
+
+   Această comandă ne ajută să eliminăm toate fișierele din zona de staging deodată.
+
+1. **Elimină un fișier specific din zona de staging**
+
+   ```bash
+   git reset [file or folder name]
+   ```
+
+   Această comandă ne ajută să eliminăm doar un fișier specific din zona de staging pe care nu dorim să îl includem în următorul commit.
+
+1. **Persistă munca ta**. În acest punct ai adăugat fișierele într-o zonă numită _staging area_. Un loc unde Git urmărește fișierele tale. Pentru a face modificarea permanentă, trebuie să _comitezi_ fișierele. Pentru a face acest lucru, creezi un _commit_ cu comanda `git commit`. Un _commit_ reprezintă un punct de salvare în istoria depozitului tău. Tastează următoarele pentru a crea un _commit_:
+
+   ```bash
+   git commit -m "first commit"
+   ```
+
+   Acest lucru comite toate fișierele tale, adăugând mesajul "first commit". Pentru mesajele de commit viitoare, vei dori să fii mai descriptiv pentru a transmite ce tip de modificare ai făcut.
+
+1. **Conectează depozitul local Git cu GitHub**. Un depozit Git este util pe calculatorul tău, dar la un moment dat vei dori să ai o copie de rezervă a fișierelor undeva și să inviți și alte persoane să lucreze cu tine pe depozit. Un loc excelent pentru asta este GitHub. Amintește-ți că am creat deja un depozit pe GitHub, așa că singurul lucru pe care trebuie să îl facem este să conectăm depozitul local Git cu GitHub. Comanda `git remote add` va face exact asta. Tastează următoarea comandă:
+
+   > Notă, înainte de a tasta comanda, accesează pagina depozitului tău GitHub pentru a găsi URL-ul depozitului. Îl vei folosi în comanda de mai jos. Înlocuiește ```https://github.com/username/repository_name.git``` cu URL-ul GitHub.
+
+   ```bash
+   git remote add origin https://github.com/username/repository_name.git
+   ```
+
+   Aceasta creează o _remote_, sau conexiune, numită "origin", care indică spre depozitul GitHub pe care l-ai creat anterior.
+
+1. **Trimite fișierele locale pe GitHub**. Până acum ai creat o _conexiune_ între depozitul local și depozitul GitHub. Să trimitem aceste fișiere pe GitHub cu următoarea comandă `git push`, astfel: 
+   
+   > Notă, numele ramurii tale poate fi diferit de ```main```.
+
+   ```bash
+   git push -u origin main
+   ```
+
+   Aceasta trimite commit-urile tale din ramura "main" pe GitHub.
+
+2. **Adaugă mai multe modificări**. Dacă vrei să continui să faci modificări și să le trimiți pe GitHub, va trebui doar să folosești următoarele trei comenzi:
+
+   ```bash
+   git add .
+   git commit -m "type your commit message here"
+   git push
+   ```
+
+   > Sfaturi, Poți adopta un fișier `.gitignore` pentru a preveni ca fișierele pe care nu vrei să le urmărești să apară pe GitHub - cum ar fi acel fișier de notițe pe care îl stochezi în același folder, dar care nu are loc într-un depozit public. Poți găsi șabloane pentru fișiere `.gitignore` la [.gitignore templates](https://github.com/github/gitignore).
+
+#### Mesaje de commit
+
+Un subiect excelent pentru un commit Git completează următoarea propoziție:
+Dacă se aplică, acest commit va <subiectul tău aici>
+
+Pentru subiect, folosește timpul prezent imperativ: "modifică" nu "modificat" sau "modificări". 
+La fel ca în subiect, în corpul mesajului (opțional) folosește timpul prezent imperativ. Corpul ar trebui să includă motivația pentru modificare și să contrasteze aceasta cu comportamentul anterior. Explici `de ce`, nu `cum`.
+
+✅ Ia câteva minute pentru a naviga pe GitHub. Poți găsi un mesaj de commit cu adevărat grozav? Poți găsi unul foarte minimal? Ce informații crezi că sunt cele mai importante și utile de transmis într-un mesaj de commit?
+
+### Sarcină: Colaborează
+
+Principalul motiv pentru care ai pus lucruri pe GitHub a fost să faci posibilă colaborarea cu alți dezvoltatori.
+
+## Lucrul la proiecte împreună cu alții
+
+> Vezi videoclipul
+>
+> [![Videoclip despre bazele Git și GitHub](https://img.youtube.com/vi/bFCM-PC3cu8/0.jpg)](https://www.youtube.com/watch?v=bFCM-PC3cu8)
+
+În depozitul tău, navighează la `Insights > Community` pentru a vedea cum se compară proiectul tău cu standardele comunității recomandate.
+
+   Iată câteva lucruri care pot îmbunătăți depozitul tău GitHub:
+   - **Descriere**. Ai adăugat o descriere pentru proiectul tău?
+   - **README**. Ai adăugat un README? GitHub oferă îndrumări pentru scrierea unui [README](https://docs.github.com/articles/about-readmes/?WT.mc_id=academic-77807-sagibbon).
+   - **Ghid de contribuție**. Proiectul tău are [ghiduri de contribuție](https://docs.github.com/articles/setting-guidelines-for-repository-contributors/?WT.mc_id=academic-77807-sagibbon)? 
+   - **Cod de conduită**. Un [Cod de conduită](https://docs.github.com/articles/adding-a-code-of-conduct-to-your-project/)? 
+   - **Licență**. Poate cel mai important, o [licență](https://docs.github.com/articles/adding-a-license-to-a-repository/)?
+
+
+Toate aceste resurse vor ajuta la integrarea noilor membri ai echipei. Și acestea sunt, de obicei, genul de lucruri pe care noii contribuitori le analizează înainte de a se uita la codul tău, pentru a afla dacă proiectul tău este locul potrivit pentru a-și petrece timpul.
+
+✅ Fișierele README, deși necesită timp pentru a fi pregătite, sunt adesea neglijate de mentori ocupați. Poți găsi un exemplu de README deosebit de descriptiv? Notă: există [instrumente pentru a ajuta la crearea unor README bune](https://www.makeareadme.com/) pe care s-ar putea să vrei să le încerci.
+
+### Sarcină: Combină niște cod
+
+Documentele de contribuție ajută oamenii să contribuie la proiect. Ele explică ce tipuri de contribuții cauți și cum funcționează procesul. Contribuitorii vor trebui să parcurgă o serie de pași pentru a putea contribui la depozitul tău pe GitHub:
+
+
+1. **Forking depozitul tău**. Probabil vei dori ca oamenii să _forkeze_ proiectul tău. Forking înseamnă crearea unei replici a depozitului tău pe profilul lor GitHub.
+1. **Clonează**. De acolo, vor clona proiectul pe calculatorul lor. 
+1. **Creează o ramură**. Vei dori să le ceri să creeze o _ramură_ pentru munca lor. 
+1. **Concentrează modificarea pe o singură zonă**. Cere contribuitorilor să își concentreze contribuțiile pe un singur lucru la un moment dat - astfel șansele ca tu să poți _combina_ munca lor sunt mai mari. Imaginează-ți că scriu o corecție de bug, adaugă o funcționalitate nouă și actualizează mai multe teste - ce se întâmplă dacă vrei sau poți implementa doar 2 din 3 sau 1 din 3 modificări?
+
+✅ Imaginează-ți o situație în care ramurile sunt deosebit de critice pentru scrierea și livrarea unui cod bun. Ce cazuri de utilizare îți vin în minte?
+
+> Notă, fii schimbarea pe care vrei să o vezi în lume și creează ramuri pentru propria ta muncă. Orice commit-uri pe care le faci vor fi făcute pe ramura pe care ești în prezent "checked out". Folosește `git status` pentru a vedea pe ce ramură te afli.
+
+Să parcurgem un flux de lucru al contribuitorului. Presupunem că contribuitorul a _forkat_ și _clonat_ depozitul, astfel încât are un depozit Git gata de lucru pe calculatorul său:
+
+1. **Creează o ramură**. Folosește comanda `git branch` pentru a crea o ramură care va conține modificările pe care intenționează să le contribuie:
+
+   ```bash
+   git branch [branch-name]
+   ```
+
+1. **Schimbă-te pe ramura de lucru**. Schimbă-te pe ramura specificată și actualizează directorul de lucru cu `git switch`:
+
+   ```bash
+   git switch [branch-name]
+   ```
+
+1. **Fă modificări**. În acest punct, vrei să adaugi modificările tale. Nu uita să îi spui lui Git despre ele cu următoarele comenzi:
+
+   ```bash
+   git add .
+   git commit -m "my changes"
+   ```
+
+   Asigură-te că dai commit-ului tău un nume bun, atât pentru tine, cât și pentru mentorul depozitului la care ajuți.
+
+1. **Combină munca ta cu ramura `main`**. La un moment dat, ai terminat de lucrat și vrei să combini munca ta cu cea din ramura `main`. Ramura `main` s-ar putea să se fi schimbat între timp, așa că asigură-te că o actualizezi mai întâi la cea mai recentă versiune cu următoarele comenzi:
+
+   ```bash
+   git switch main
+   git pull
+   ```
+
+   În acest punct, vrei să te asiguri că orice _conflicte_, situații în care Git nu poate _combina_ ușor modificările, apar în ramura ta de lucru. Prin urmare, rulează următoarele comenzi:
+
+   ```bash
+   git switch [branch_name]
+   git merge main
+   ```
+
+   Aceasta va aduce toate modificările din `main` în ramura ta și, sperăm, poți continua. Dacă nu, VS Code îți va spune unde Git este _confuz_ și doar modifici fișierele afectate pentru a indica ce conținut este cel mai precis.
+
+1. **Trimite munca ta pe GitHub**. Trimiterea muncii tale pe GitHub înseamnă două lucruri. Împingerea ramurii tale pe depozitul tău și apoi deschiderea unui PR, Pull Request.
+
+   ```bash
+   git push --set-upstream origin [branch-name]
+   ```
+
+   Comanda de mai sus creează ramura pe depozitul tău forked.
+
+1. **Deschide un PR**. Următorul pas este să deschizi un PR. Faci acest lucru navigând la depozitul forked pe GitHub. Vei vedea o indicație pe GitHub unde te întreabă dacă vrei să creezi un nou PR, dai click pe asta și vei fi dus la o interfață unde poți schimba titlul mesajului de commit, să îi dai o descriere mai potrivită. Acum mentorul depozitului pe care l-ai forked va vedea acest PR și _sperăm_ îl va aprecia și _combina_ PR-ul tău. Acum ești un contribuitor, yay :)
+
+1. **Curăță**. Este considerat o practică bună să _curăți_ după ce ai combinat cu succes un PR. Vrei să cureți atât ramura locală, cât și ramura pe care ai împins-o pe GitHub. Mai întâi, să o ștergem local cu următoarea comandă: 
+
+   ```bash
+   git branch -d [branch-name]
+   ```
+Asigură-te că accesezi pagina GitHub pentru repo-ul bifurcat și elimină ramura remote pe care tocmai ai împins-o.
+
+`Pull request` pare un termen ciudat, deoarece, în realitate, vrei să împingi modificările tale către proiect. Dar, menținătorul (proprietarul proiectului) sau echipa principală trebuie să ia în considerare modificările tale înainte de a le îmbina cu ramura "principală" a proiectului, așa că, de fapt, soliciți o decizie de modificare de la un menținător.
+
+Un pull request este locul unde poți compara și discuta diferențele introduse pe o ramură, cu recenzii, comentarii, teste integrate și altele. Un pull request bun urmează aproximativ aceleași reguli ca un mesaj de commit. Poți adăuga o referință la o problemă din tracker-ul de probleme, de exemplu, atunci când munca ta rezolvă o problemă. Acest lucru se face folosind un `#` urmat de numărul problemei. De exemplu, `#97`.
+
+🤞Să sperăm că toate verificările trec și proprietarul proiectului îmbină modificările tale în proiect🤞
+
+Actualizează ramura ta locală curentă cu toate commit-urile noi din ramura remote corespunzătoare de pe GitHub:
+
+`git pull`
+
+## Cum să contribui la open source
+
+Mai întâi, să găsim un repository (sau **repo**) pe GitHub care te interesează și la care ai dori să contribui cu o modificare. Vei dori să copiezi conținutul acestuia pe mașina ta.
+
+✅ O modalitate bună de a găsi repo-uri 'prietenoase pentru începători' este să [cauți după tag-ul 'good-first-issue'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/).
+
+![Copiază un repo local](../../../../translated_images/clone_repo.5085c48d666ead57664f050d806e325d7f883be6838c821e08bc823ab7c66665.ro.png)
+
+Există mai multe moduri de a copia codul. O modalitate este să "clonezi" conținutul repository-ului, folosind HTTPS, SSH sau GitHub CLI (Command Line Interface).
+
+Deschide terminalul și clonează repository-ul astfel:
+`git clone https://github.com/ProjectURL`
+
+Pentru a lucra la proiect, schimbă folderul:
+`cd ProjectURL`
+
+De asemenea, poți deschide întregul proiect folosind [Codespaces](https://github.com/features/codespaces), editorul de cod integrat / mediu de dezvoltare cloud al GitHub, sau [GitHub Desktop](https://desktop.github.com/).
+
+În cele din urmă, poți descărca codul într-un folder arhivat.
+
+### Câteva lucruri interesante despre GitHub
+
+Poți să dai stea, să urmărești și/sau să "forkezi" orice repository public pe GitHub. Poți găsi repository-urile marcate cu stea în meniul drop-down din dreapta sus. Este ca și cum ai salva un bookmark, dar pentru cod.
+
+Proiectele au un tracker de probleme, de obicei pe GitHub, în fila "Issues", dacă nu este indicat altfel, unde oamenii discută probleme legate de proiect. Iar fila Pull Requests este locul unde oamenii discută și revizuiesc modificările aflate în progres.
+
+Proiectele pot avea, de asemenea, discuții în forumuri, liste de e-mail sau canale de chat precum Slack, Discord sau IRC.
+
+✅ Aruncă o privire în noul tău repo GitHub și încearcă câteva lucruri, cum ar fi editarea setărilor, adăugarea de informații în repo-ul tău și crearea unui proiect (cum ar fi un panou Kanban). Sunt multe lucruri pe care le poți face!
+
+---
+
+## 🚀 Provocare
+
+Lucrează împreună cu un prieten la codul fiecăruia. Creați un proiect colaborativ, forkați codul, creați ramuri și îmbinați modificările.
+
+## Quiz post-lectură
+[Quiz post-lectură](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/4)
+
+## Recapitulare & Studiu individual
+
+Citește mai multe despre [contribuția la software open source](https://opensource.guide/how-to-contribute/#how-to-submit-a-contribution).
+
+[Git cheatsheet](https://training.github.com/downloads/github-git-cheat-sheet/).
+
+Exersează, exersează, exersează. GitHub are trasee de învățare excelente disponibile prin [skills.github.com](https://skills.github.com):
+
+- [Prima săptămână pe GitHub](https://skills.github.com/#first-week-on-github)
+
+Vei găsi și cursuri mai avansate.
+
+## Temă
+
+Completează [cursul Prima săptămână pe GitHub](https://skills.github.com/#first-week-on-github)
+
+---
+
+**Declinare de responsabilitate**:  
+Acest document a fost tradus folosind serviciul de traducere AI [Co-op Translator](https://github.com/Azure/co-op-translator). Deși ne străduim să asigurăm acuratețea, vă rugăm să fiți conștienți că traducerile automate pot conține erori sau inexactități. Documentul original în limba sa natală ar trebui considerat sursa autoritară. Pentru informații critice, se recomandă traducerea profesională realizată de un specialist uman. Nu ne asumăm responsabilitatea pentru eventualele neînțelegeri sau interpretări greșite care pot apărea din utilizarea acestei traduceri.
\ No newline at end of file
diff --git a/translations/ro/1-getting-started-lessons/3-accessibility/README.md b/translations/ro/1-getting-started-lessons/3-accessibility/README.md
new file mode 100644
index 00000000..5a3f08b9
--- /dev/null
+++ b/translations/ro/1-getting-started-lessons/3-accessibility/README.md
@@ -0,0 +1,244 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "e4cd5b1faed4adab5acf720f82798003",
+  "translation_date": "2025-08-27T22:30:25+00:00",
+  "source_file": "1-getting-started-lessons/3-accessibility/README.md",
+  "language_code": "ro"
+}
+-->
+# Crearea paginilor web accesibile
+
+![Totul despre accesibilitate](../../../../translated_images/webdev101-a11y.8ef3025c858d897a403a1a42c0897c76e11b724d9a8a0c0578dd4316f7507622.ro.png)  
+> Sketchnote de [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Test înainte de lecție  
+[Test înainte de lecție](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/5)
+
+> Puterea Web-ului constă în universalitatea sa. Accesul pentru toți, indiferent de dizabilitate, este un aspect esențial.  
+>  
+> \- Sir Timothy Berners-Lee, Director W3C și inventatorul World Wide Web
+
+Acest citat subliniază perfect importanța creării site-urilor accesibile. O aplicație care nu poate fi accesată de toți este, prin definiție, exclusivistă. Ca dezvoltatori web, ar trebui să avem mereu accesibilitatea în minte. Concentrându-ne pe acest aspect de la început, veți fi pe drumul cel bun pentru a vă asigura că toată lumea poate accesa paginile pe care le creați. În această lecție, veți învăța despre instrumentele care vă pot ajuta să vă asigurați că resursele web sunt accesibile și cum să construiți având accesibilitatea în vedere.
+
+> Puteți parcurge această lecție pe [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/accessibility/?WT.mc_id=academic-77807-sagibbon)!
+
+## Instrumente de utilizat
+
+### Cititoare de ecran
+
+Unul dintre cele mai cunoscute instrumente de accesibilitate sunt cititoarele de ecran.
+
+[Cititoarele de ecran](https://en.wikipedia.org/wiki/Screen_reader) sunt utilizate frecvent de persoanele cu deficiențe de vedere. Pe măsură ce ne asigurăm că un browser transmite corect informațiile pe care dorim să le împărtășim, trebuie să ne asigurăm și că un cititor de ecran face același lucru.
+
+La nivel de bază, un cititor de ecran va citi o pagină de sus în jos, în mod auditiv. Dacă pagina dvs. este doar text, cititorul va transmite informațiile într-un mod similar cu un browser. Desigur, paginile web sunt rareori doar text; ele vor conține linkuri, grafice, culori și alte componente vizuale. Trebuie să aveți grijă ca aceste informații să fie citite corect de un cititor de ecran.
+
+Fiecare dezvoltator web ar trebui să se familiarizeze cu un cititor de ecran. După cum am subliniat mai sus, acesta este clientul pe care utilizatorii dvs. îl vor folosi. La fel cum sunteți familiarizat cu modul în care funcționează un browser, ar trebui să învățați cum funcționează un cititor de ecran. Din fericire, cititoarele de ecran sunt integrate în majoritatea sistemelor de operare.
+
+Unele browsere au, de asemenea, instrumente și extensii integrate care pot citi textul cu voce tare sau pot oferi funcții de navigare de bază, cum ar fi [aceste instrumente de accesibilitate pentru browserul Edge](https://support.microsoft.com/help/4000734/microsoft-edge-accessibility-features). Acestea sunt, de asemenea, instrumente importante de accesibilitate, dar funcționează foarte diferit de cititoarele de ecran și nu ar trebui confundate cu instrumentele de testare pentru cititoare de ecran.
+
+✅ Încercați un cititor de ecran și un cititor de text pentru browser. Pe Windows, [Narrator](https://support.microsoft.com/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c172f109bdb1/?WT.mc_id=academic-77807-sagibbon) este inclus implicit, iar [JAWS](https://webaim.org/articles/jaws/) și [NVDA](https://www.nvaccess.org/about-nvda/) pot fi instalate. Pe macOS și iOS, [VoiceOver](https://support.apple.com/guide/voiceover/welcome/10) este instalat implicit.
+
+### Zoom
+
+Un alt instrument utilizat frecvent de persoanele cu deficiențe de vedere este funcția de zoom. Cel mai simplu tip de zoom este zoom-ul static, controlat prin `Control + semnul plus (+)` sau prin reducerea rezoluției ecranului. Acest tip de zoom determină redimensionarea întregii pagini, astfel încât utilizarea [designului responsiv](https://developer.mozilla.org/docs/Learn/CSS/CSS_layout/Responsive_Design) este importantă pentru a oferi o experiență bună utilizatorului la niveluri de zoom crescute.
+
+Un alt tip de zoom se bazează pe software specializat pentru a mări o zonă a ecranului și a o deplasa, similar cu utilizarea unei lupe reale. Pe Windows, [Magnifier](https://support.microsoft.com/windows/use-magnifier-to-make-things-on-the-screen-easier-to-see-414948ba-8b1c-d3bd-8615-0e5e32204198) este integrat, iar [ZoomText](https://www.freedomscientific.com/training/zoomtext/getting-started/) este un software de mărire terț cu mai multe funcții și o bază de utilizatori mai mare. Atât macOS, cât și iOS au un software de mărire integrat numit [Zoom](https://www.apple.com/accessibility/mac/vision/).
+
+### Verificatoare de contrast
+
+Culorile de pe site-uri web trebuie alese cu grijă pentru a răspunde nevoilor utilizatorilor daltoni sau persoanelor care au dificultăți în a vedea culorile cu contrast redus.
+
+✅ Testați un site web pe care îl utilizați frecvent pentru utilizarea culorilor cu o extensie de browser, cum ar fi [verificatorul de contrast al culorilor WCAG](https://microsoftedge.microsoft.com/addons/detail/wcag-color-contrast-check/idahaggnlnekelhgplklhfpchbfdmkjp?hl=en-US&WT.mc_id=academic-77807-sagibbon). Ce descoperiți?
+
+### Lighthouse
+
+În zona de instrumente pentru dezvoltatori din browserul dvs., veți găsi instrumentul Lighthouse. Acest instrument este important pentru a obține o primă vedere asupra accesibilității (precum și a altor analize) unui site web. Deși este important să nu vă bazați exclusiv pe Lighthouse, un scor de 100% este foarte util ca punct de referință.
+
+✅ Găsiți Lighthouse în panoul de instrumente pentru dezvoltatori al browserului dvs. și rulați o analiză pe orice site. Ce descoperiți?
+
+## Proiectarea pentru accesibilitate
+
+Accesibilitatea este un subiect relativ vast. Pentru a vă ajuta, există numeroase resurse disponibile.
+
+- [Accessible U - Universitatea din Minnesota](https://accessibility.umn.edu/your-role/web-developers)
+
+Deși nu vom putea acoperi fiecare aspect al creării site-urilor accesibile, mai jos sunt câteva principii de bază pe care veți dori să le implementați. Proiectarea unei pagini accesibile de la început este **întotdeauna** mai ușoară decât revenirea la o pagină existentă pentru a o face accesibilă.
+
+## Principii bune de afișare
+
+### Palete de culori sigure
+
+Oamenii văd lumea în moduri diferite, iar acest lucru include culorile. Când selectați o schemă de culori pentru site-ul dvs., ar trebui să vă asigurați că este accesibilă pentru toți. Un instrument excelent pentru generarea paletelor de culori este [Color Safe](http://colorsafe.co/).
+
+✅ Identificați un site web care are probleme majore în utilizarea culorilor. De ce?
+
+### Utilizați HTML-ul corect
+
+Cu CSS și JavaScript, este posibil să faceți ca orice element să arate ca orice tip de control. `<span>` ar putea fi utilizat pentru a crea un `<button>`, iar `<b>` ar putea deveni un hyperlink. Deși acest lucru ar putea fi considerat mai ușor de stilizat, nu transmite nimic unui cititor de ecran. Utilizați HTML-ul corespunzător atunci când creați controale pe o pagină. Dacă doriți un hyperlink, utilizați `<a>`. Utilizarea HTML-ului corect pentru controlul potrivit se numește utilizarea HTML-ului semantic.
+
+✅ Accesați orice site web și verificați dacă designerii și dezvoltatorii utilizează HTML-ul corect. Puteți găsi un buton care ar trebui să fie un link? Indiciu: faceți clic dreapta și alegeți 'View Page Source' în browserul dvs. pentru a vedea codul de bază.
+
+### Creați o ierarhie descriptivă a titlurilor
+
+Utilizatorii de cititoare de ecran [se bazează foarte mult pe titluri](https://webaim.org/projects/screenreadersurvey8/#finding) pentru a găsi informații și a naviga printr-o pagină. Scrierea unui conținut descriptiv pentru titluri și utilizarea etichetelor semantice pentru titluri sunt importante pentru crearea unui site ușor de navigat pentru utilizatorii de cititoare de ecran.
+
+### Utilizați indicii vizuale bune
+
+CSS oferă control complet asupra aspectului oricărui element de pe o pagină. Puteți crea casete de text fără contur sau hyperlinkuri fără subliniere. Din păcate, eliminarea acestor indicii poate face mai dificil pentru cineva care depinde de ele să recunoască tipul de control.
+
+## Importanța textului pentru linkuri
+
+Hyperlinkurile sunt esențiale pentru navigarea pe web. Prin urmare, asigurarea că un cititor de ecran poate citi corect linkurile permite tuturor utilizatorilor să navigheze pe site-ul dvs.
+
+### Cititoarele de ecran și linkurile
+
+Așa cum v-ați aștepta, cititoarele de ecran citesc textul linkurilor în același mod în care ar citi orice alt text de pe pagină. Având în vedere acest lucru, textul demonstrat mai jos ar putea părea perfect acceptabil.
+
+> Pinguinul mic, cunoscut uneori sub numele de pinguin zână, este cel mai mic pinguin din lume. [Click aici](https://en.wikipedia.org/wiki/Little_penguin) pentru mai multe informații.
+
+> Pinguinul mic, cunoscut uneori sub numele de pinguin zână, este cel mai mic pinguin din lume. Vizitați https://en.wikipedia.org/wiki/Little_penguin pentru mai multe informații.
+
+> **NOTE** După cum urmează să citiți, nu ar trebui **niciodată** să creați linkuri care arată ca cele de mai sus.
+
+Amintiți-vă, cititoarele de ecran sunt o interfață diferită de browsere, cu un set diferit de funcții.
+
+### Problema utilizării URL-ului
+
+Cititoarele de ecran citesc textul. Dacă un URL apare în text, cititorul de ecran va citi URL-ul. În general, URL-ul nu transmite informații semnificative și poate suna enervant. Este posibil să fi experimentat acest lucru dacă telefonul dvs. a citit vreodată cu voce tare un mesaj text cu un URL.
+
+### Problema cu "click aici"
+
+Cititoarele de ecran au, de asemenea, capacitatea de a citi doar hyperlinkurile de pe o pagină, la fel cum o persoană văzătoare ar scana o pagină pentru linkuri. Dacă textul linkului este mereu "click aici", utilizatorul va auzi doar "click aici, click aici, click aici, click aici, click aici, ..." Toate linkurile devin acum indistincte.
+
+### Text bun pentru linkuri
+
+Textul bun pentru linkuri descrie pe scurt ce se află pe partea cealaltă a linkului. În exemplul de mai sus despre pinguinii mici, linkul duce la pagina Wikipedia despre specie. Fraza *pinguini mici* ar fi un text perfect pentru link, deoarece clarifică ce va învăța cineva dacă face clic pe link - pinguini mici.
+
+> Pinguinul [mic](https://en.wikipedia.org/wiki/Little_penguin), cunoscut uneori sub numele de pinguin zână, este cel mai mic pinguin din lume.
+
+✅ Navigați pe web câteva minute pentru a găsi pagini care utilizează strategii obscure de linkuri. Comparați-le cu alte site-uri care au linkuri mai bune. Ce învățați?
+
+#### Note pentru motoarele de căutare
+
+Ca bonus suplimentar pentru asigurarea accesibilității site-ului dvs., veți ajuta motoarele de căutare să navigheze pe site-ul dvs. Motoarele de căutare utilizează textul linkurilor pentru a învăța subiectele paginilor. Deci, utilizarea unui text bun pentru linkuri ajută pe toată lumea!
+
+### ARIA
+
+Imaginați-vă următoarea pagină:
+
+| Produs       | Descriere          | Comandă      |  
+| ------------ | ------------------ | ------------ |  
+| Widget       | [Descriere](../../../../1-getting-started-lessons/3-accessibility/')   | [Comandă](../../../../1-getting-started-lessons/3-accessibility/') |  
+| Super widget | [Descriere](../../../../1-getting-started-lessons/3-accessibility/')   | [Comandă](../../../../1-getting-started-lessons/3-accessibility/') |  
+
+În acest exemplu, duplicarea textului pentru descriere și comandă are sens pentru cineva care folosește un browser. Totuși, cineva care folosește un cititor de ecran ar auzi doar cuvintele *descriere* și *comandă* repetate fără context.
+
+Pentru a sprijini aceste tipuri de scenarii, HTML acceptă un set de atribute cunoscute sub numele de [Aplicații Internet Accesibile și Bogate (ARIA)](https://developer.mozilla.org/docs/Web/Accessibility/ARIA). Aceste atribute vă permit să oferiți informații suplimentare cititoarelor de ecran.
+
+> **NOTE**: La fel ca multe aspecte ale HTML-ului, suportul pentru browsere și cititoare de ecran poate varia. Totuși, majoritatea clienților principali acceptă atributele ARIA.
+
+Puteți utiliza `aria-label` pentru a descrie linkul atunci când formatul paginii nu vă permite. Descrierea pentru widget ar putea fi setată astfel:
+
+``` html
+<a href="#" aria-label="Widget description">description</a>
+```
+
+✅ În general, utilizarea marcajului semantic, așa cum este descris mai sus, depășește utilizarea ARIA, dar uneori nu există un echivalent semantic pentru diverse widgeturi HTML. Un exemplu bun este un Arbore. Nu există un echivalent HTML pentru un arbore, așa că identificați `<div>` generic pentru acest element cu un rol și valori ARIA corespunzătoare. [Documentația MDN despre ARIA](https://developer.mozilla.org/docs/Web/Accessibility/ARIA) conține informații mai utile.
+
+```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>
+```
+
+## Imagini
+
+Este evident că cititoarele de ecran nu pot citi automat ce se află într-o imagine. Asigurarea accesibilității imaginilor nu necesită mult efort - acesta este scopul atributului `alt`. Toate imaginile semnificative ar trebui să aibă un `alt` care să descrie ce sunt.  
+Imaginile care sunt pur decorative ar trebui să aibă atributul `alt` setat la un șir gol: `alt=""`. Acest lucru împiedică cititoarele de ecran să anunțe inutil imaginea decorativă.
+
+✅ După cum v-ați aștepta, motoarele de căutare nu pot înțelege ce se află într-o imagine. Ele folosesc, de asemenea, textul alt. Deci, din nou, asigurarea accesibilității paginii dvs. oferă bonusuri suplimentare!
+
+## Tastatura
+
+Unii utilizatori nu pot folosi un mouse sau un trackpad, bazându-se în schimb pe interacțiuni cu tastatura pentru a trece de la un element la altul. Este important ca site-ul dvs. web să prezinte conținutul într-o ordine logică, astfel încât un utilizator de tastatură să poată accesa fiecare element interactiv pe măsură ce se deplasează în josul documentului. Dacă construiți paginile web cu marcaj semantic și utilizați CSS pentru a stiliza aspectul vizual, site-ul dvs. ar trebui să fie navigabil cu tastatura, dar este important să testați acest aspect manual. Aflați mai multe despre [strategiile de navigare cu tastatura](https://webaim.org/techniques/keyboard/).
+
+✅ Accesați orice site web și încercați să navigați prin el folosind doar tastatura. Ce funcționează, ce nu funcționează? De ce?
+
+## Rezumat
+
+Un web accesibil doar pentru unii nu este cu adevărat un 'world-wide web'. Cel mai bun mod de a vă asigura că site-urile pe care le creați sunt accesibile este să încorporați cele mai bune practici de accesibilitate de la început. Deși sunt implicate pași suplimentari, încorporarea acestor abilități în fluxul dvs. de lucru acum va însemna că toate paginile pe care le creați vor fi accesibile.
+
+---
+
+## 🚀 Provocare
+
+Luați acest HTML și rescrieți-l pentru a fi cât mai accesibil posibil, având în vedere strategiile pe care le-ați învățat.
+
+```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>
+```
+
+## Test după lecție  
+[Test după lecție](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/6)
+
+## Recapitulare și studiu individual
+Multe guverne au legi referitoare la cerințele de accesibilitate. Documentează-te despre legile privind accesibilitatea din țara ta. Ce este acoperit și ce nu? Un exemplu este [acest site web guvernamental](https://accessibility.blog.gov.uk/).
+
+## Temă
+
+[Analizează un site web inaccesibil](assignment.md)
+
+Credite: [Turtle Ipsum](https://github.com/Instrument/semantic-html-sample) de Instrument
+
+---
+
+**Declinare de responsabilitate**:  
+Acest document a fost tradus folosind serviciul de traducere AI [Co-op Translator](https://github.com/Azure/co-op-translator). Deși ne străduim să asigurăm acuratețea, vă rugăm să rețineți că traducerile automate pot conține erori sau inexactități. Documentul original în limba sa natală ar trebui considerat sursa autoritară. Pentru informații critice, se recomandă traducerea profesională realizată de un specialist uman. Nu ne asumăm responsabilitatea pentru eventualele neînțelegeri sau interpretări greșite care pot apărea din utilizarea acestei traduceri.
\ No newline at end of file
diff --git a/translations/ro/1-getting-started-lessons/3-accessibility/assignment.md b/translations/ro/1-getting-started-lessons/3-accessibility/assignment.md
new file mode 100644
index 00000000..8c99d002
--- /dev/null
+++ b/translations/ro/1-getting-started-lessons/3-accessibility/assignment.md
@@ -0,0 +1,29 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "a258597a194e77d4fd469b3cd976b29e",
+  "translation_date": "2025-08-27T22:34:42+00:00",
+  "source_file": "1-getting-started-lessons/3-accessibility/assignment.md",
+  "language_code": "ro"
+}
+-->
+# Analiza unui site inaccesibil
+
+## Instrucțiuni
+
+Identificați un site web despre care credeți că NU este accesibil și creați un plan de acțiune pentru a-i îmbunătăți accesibilitatea. 
+Prima sarcină va fi să identificați acest site, să detaliați modurile în care considerați că este inaccesibil fără a folosi instrumente analitice, apoi să îl supuneți unei analize Lighthouse. Capturați un pdf cu rezultatele acestei analize și creați un plan detaliat cu minimum zece puncte care să arate cum site-ul ar putea fi îmbunătățit.
+
+## Tabel pentru testarea accesibilității site-ului
+
+| Criterii | Exemplar | Adecvat | Necesită îmbunătățiri |
+|----------|----------|---------|-----------------------|
+|          | lipsesc <10% din cerințe | lipsesc 20% din cerințe | lipsesc 50% din cerințe |
+
+----
+Raportul studentului: include paragrafe despre cât de inaccesibil este site-ul, raportul Lighthouse capturat în format pdf, o listă de zece puncte pentru îmbunătățire, cu detalii despre cum să fie realizate aceste îmbunătățiri
+
+---
+
+**Declinare de responsabilitate**:  
+Acest document a fost tradus folosind serviciul de traducere AI [Co-op Translator](https://github.com/Azure/co-op-translator). Deși ne străduim să asigurăm acuratețea, vă rugăm să fiți conștienți că traducerile automate pot conține erori sau inexactități. Documentul original în limba sa natală ar trebui considerat sursa autoritară. Pentru informații critice, se recomandă traducerea profesională realizată de un specialist uman. Nu ne asumăm responsabilitatea pentru eventualele neînțelegeri sau interpretări greșite care pot apărea din utilizarea acestei traduceri.
\ No newline at end of file
diff --git a/translations/ro/1-getting-started-lessons/README.md b/translations/ro/1-getting-started-lessons/README.md
new file mode 100644
index 00000000..baa2c0f6
--- /dev/null
+++ b/translations/ro/1-getting-started-lessons/README.md
@@ -0,0 +1,31 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "04683f4cfa46004179b0404b89a3065c",
+  "translation_date": "2025-08-27T22:27:12+00:00",
+  "source_file": "1-getting-started-lessons/README.md",
+  "language_code": "ro"
+}
+-->
+# Introducere în Dezvoltarea Web
+
+În această secțiune a curriculumului, vei fi introdus în concepte care nu sunt bazate pe proiecte, dar care sunt importante pentru a deveni un dezvoltator profesionist.
+
+### Subiecte
+
+1. [Introducere în Limbaje de Programare și Instrumente de Lucru](1-intro-to-programming-languages/README.md)
+2. [Introducere în GitHub](2-github-basics/README.md)
+3. [Bazele Accesibilității](3-accessibility/README.md)
+
+### Credite
+
+Introducerea în Limbaje de Programare și Instrumente de Lucru a fost scrisă cu ♥️ de [Jasmine Greenaway](https://twitter.com/paladique)
+
+Introducerea în GitHub a fost scrisă cu ♥️ de [Floor Drees](https://twitter.com/floordrees)
+
+Bazele Accesibilității au fost scrise cu ♥️ de [Christopher Harrison](https://twitter.com/geektrainer)
+
+---
+
+**Declinare de responsabilitate**:  
+Acest document a fost tradus folosind serviciul de traducere AI [Co-op Translator](https://github.com/Azure/co-op-translator). Deși ne străduim să asigurăm acuratețea, vă rugăm să fiți conștienți că traducerile automate pot conține erori sau inexactități. Documentul original în limba sa natală ar trebui considerat sursa autoritară. Pentru informații critice, se recomandă traducerea profesională realizată de un specialist uman. Nu ne asumăm responsabilitatea pentru eventualele neînțelegeri sau interpretări greșite care pot apărea din utilizarea acestei traduceri.
\ No newline at end of file
diff --git a/translations/ro/2-js-basics/1-data-types/README.md b/translations/ro/2-js-basics/1-data-types/README.md
new file mode 100644
index 00000000..15cf6812
--- /dev/null
+++ b/translations/ro/2-js-basics/1-data-types/README.md
@@ -0,0 +1,214 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "fc6aef8ecfdd5b0ad2afa6e6ba52bfde",
+  "translation_date": "2025-08-27T22:12:09+00:00",
+  "source_file": "2-js-basics/1-data-types/README.md",
+  "language_code": "ro"
+}
+-->
+# Bazele JavaScript: Tipuri de Date
+
+![Bazele JavaScript - Tipuri de date](../../../../translated_images/webdev101-js-datatypes.4cc470179730702c756480d3ffa46507f746e5975ebf80f99fdaaf1cff09a7f4.ro.png)
+> Sketchnote de [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Chestionar Pre-Lecție
+[Chestionar pre-lecție](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/7)
+
+Această lecție acoperă bazele JavaScript, limbajul care oferă interactivitate pe web.
+
+> Poți parcurge această lecție pe [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-variables/?WT.mc_id=academic-77807-sagibbon)!
+
+[![Variabile](https://img.youtube.com/vi/JNIXfGiDWM8/0.jpg)](https://youtube.com/watch?v=JNIXfGiDWM8 "Variabile în JavaScript")
+
+[![Tipuri de date în JavaScript](https://img.youtube.com/vi/AWfA95eLdq8/0.jpg)](https://youtube.com/watch?v=AWfA95eLdq8 "Tipuri de date în JavaScript")
+
+> 🎥 Fă clic pe imaginile de mai sus pentru videoclipuri despre variabile și tipuri de date
+
+Să începem cu variabilele și tipurile de date care le populează!
+## Variabile
+
+Variabilele stochează valori care pot fi utilizate și modificate pe parcursul codului tău.
+
+Crearea și **declararea** unei variabile are următoarea sintaxă **[cuvânt cheie] [nume]**. Este alcătuită din două părți:
+
+- **Cuvânt cheie**. Cuvintele cheie pot fi `let` sau `var`.  
+
+✅ Cuvântul cheie `let` a fost introdus în ES6 și oferă variabilei tale un așa-numit _block scope_. Este recomandat să folosești `let` în loc de `var`. Vom acoperi mai în detaliu block scopes în părțile viitoare.
+- **Numele variabilei**, acesta este un nume ales de tine.
+
+### Sarcină - lucrul cu variabile
+
+1. **Declară o variabilă**. Să declarăm o variabilă folosind cuvântul cheie `let`:
+
+    ```javascript
+    let myVariable;
+    ```
+
+   `myVariable` a fost acum declarată folosind cuvântul cheie `let`. În prezent nu are o valoare.
+
+1. **Atribuie o valoare**. Stochează o valoare într-o variabilă folosind operatorul `=`, urmat de valoarea dorită.
+
+    ```javascript
+    myVariable = 123;
+    ```
+
+   > Notă: utilizarea lui `=` în această lecție înseamnă că folosim un "operator de atribuire", utilizat pentru a seta o valoare unei variabile. Nu denotă egalitate.
+
+   `myVariable` a fost acum *inițializată* cu valoarea 123.
+
+1. **Refactorizează**. Înlocuiește codul tău cu următoarea instrucțiune.
+
+    ```javascript
+    let myVariable = 123;
+    ```
+
+    De mai sus este numită _inițializare explicită_ atunci când o variabilă este declarată și i se atribuie o valoare în același timp.
+
+1. **Schimbă valoarea variabilei**. Schimbă valoarea variabilei în următorul mod:
+
+   ```javascript
+   myVariable = 321;
+   ```
+
+   Odată ce o variabilă este declarată, îi poți schimba valoarea în orice moment în codul tău folosind operatorul `=` și noua valoare.
+
+   ✅ Încearcă! Poți scrie JavaScript direct în browserul tău. Deschide o fereastră de browser și navighează la Developer Tools. În consolă, vei găsi un prompt; tastează `let myVariable = 123`, apasă Enter, apoi tastează `myVariable`. Ce se întâmplă? Notă, vei învăța mai multe despre aceste concepte în lecțiile următoare.
+
+## Constante
+
+Declararea și inițializarea unei constante urmează aceleași concepte ca o variabilă, cu excepția cuvântului cheie `const`. Constantele sunt de obicei declarate cu litere mari.
+
+```javascript
+const MY_VARIABLE = 123;
+```
+
+Constantele sunt similare variabilelor, cu două excepții:
+
+- **Trebuie să aibă o valoare**. Constantele trebuie să fie inițializate, altfel va apărea o eroare la rularea codului.
+- **Referința nu poate fi schimbată**. Referința unei constante nu poate fi schimbată odată ce a fost inițializată, altfel va apărea o eroare la rularea codului. Să analizăm două exemple:
+   - **Valoare simplă**. Următorul NU este permis:
+   
+      ```javascript
+      const PI = 3;
+      PI = 4; // not allowed
+      ```
+ 
+   - **Referința obiectului este protejată**. Următorul NU este permis.
+   
+      ```javascript
+      const obj = { a: 3 };
+      obj = { b: 5 } // not allowed
+      ```
+
+    - **Valoarea obiectului nu este protejată**. Următorul ESTE permis:
+    
+      ```javascript
+      const obj = { a: 3 };
+      obj.a = 5;  // allowed
+      ```
+
+      Mai sus schimbi valoarea obiectului, dar nu referința în sine, ceea ce este permis.
+
+   > Notă, un `const` înseamnă că referința este protejată de reasignare. Totuși, valoarea nu este _imutabilă_ și poate fi schimbată, mai ales dacă este o construcție complexă precum un obiect.
+
+## Tipuri de Date
+
+Variabilele pot stoca multe tipuri diferite de valori, cum ar fi numere și text. Aceste tipuri variate de valori sunt cunoscute sub numele de **tipuri de date**. Tipurile de date sunt o parte importantă a dezvoltării software-ului deoarece ajută dezvoltatorii să ia decizii despre cum ar trebui scris codul și cum ar trebui să ruleze software-ul. Mai mult, unele tipuri de date au caracteristici unice care ajută la transformarea sau extragerea de informații suplimentare dintr-o valoare.
+
+✅ Tipurile de date sunt denumite și primitive de date JavaScript, deoarece sunt cele mai de bază tipuri de date oferite de limbaj. Există 7 tipuri de date primitive: string, number, bigint, boolean, undefined, null și symbol. Gândește-te un minut la ce ar putea reprezenta fiecare dintre aceste primitive. Ce este un `zebra`? Dar `0`? `true`?
+
+### Numere
+
+În secțiunea anterioară, valoarea lui `myVariable` era un tip de date număr.
+
+`let myVariable = 123;`
+
+Variabilele pot stoca toate tipurile de numere, inclusiv zecimale sau numere negative. Numerele pot fi, de asemenea, utilizate cu operatori aritmetici, acoperiți în [secțiunea următoare](../../../../2-js-basics/1-data-types).
+
+### Operatorii Aritmetici
+
+Există mai multe tipuri de operatori pentru a efectua funcții aritmetice, iar câțiva sunt enumerați aici:
+
+| Simbol | Descriere                                                              | Exemplu                          |
+| ------ | ---------------------------------------------------------------------- | -------------------------------- |
+| `+`    | **Adunare**: Calculează suma a două numere                             | `1 + 2 //răspunsul așteptat este 3`   |
+| `-`    | **Scădere**: Calculează diferența dintre două numere                   | `1 - 2 //răspunsul așteptat este -1`  |
+| `*`    | **Înmulțire**: Calculează produsul a două numere                       | `1 * 2 //răspunsul așteptat este 2`   |
+| `/`    | **Împărțire**: Calculează câtul a două numere                          | `1 / 2 //răspunsul așteptat este 0.5` |
+| `%`    | **Rest**: Calculează restul împărțirii a două numere                   | `1 % 2 //răspunsul așteptat este 1`   |
+
+✅ Încearcă! Încearcă o operație aritmetică în consola browserului tău. Te surprind rezultatele?
+
+### Șiruri de caractere (Strings)
+
+Șirurile de caractere sunt seturi de caractere care se află între ghilimele simple sau duble.
+
+- `'Acesta este un șir de caractere'`
+- `"Acesta este și un șir de caractere"`
+- `let myString = 'Aceasta este o valoare de șir stocată într-o variabilă';`
+
+Amintește-ți să folosești ghilimele atunci când scrii un șir, altfel JavaScript va presupune că este un nume de variabilă.
+
+### Formatarea Șirurilor
+
+Șirurile sunt textuale și vor necesita formatare din când în când.
+
+Pentru a **concatena** două sau mai multe șiruri, sau pentru a le uni, folosește operatorul `+`.
+
+```javascript
+let myString1 = "Hello";
+let myString2 = "World";
+
+myString1 + myString2 + "!"; //HelloWorld!
+myString1 + " " + myString2 + "!"; //Hello World!
+myString1 + ", " + myString2 + "!"; //Hello, World!
+
+```
+
+✅ De ce `1 + 1 = 2` în JavaScript, dar `'1' + '1' = 11?` Gândește-te. Dar `'1' + 1`?
+
+**Template literals** sunt o altă modalitate de a formata șiruri, cu excepția faptului că în loc de ghilimele, se folosește backtick-ul. Orice nu este text simplu trebuie plasat în placeholder-ul `${ }`. Acest lucru include orice variabile care pot fi șiruri.
+
+```javascript
+let myString1 = "Hello";
+let myString2 = "World";
+
+`${myString1} ${myString2}!` //Hello World!
+`${myString1}, ${myString2}!` //Hello, World!
+```
+
+Poți atinge obiectivele tale de formatare cu oricare metodă, dar template literals vor respecta orice spații și linii noi.
+
+✅ Când ai folosi un template literal în loc de un șir simplu?
+
+### Booleeni
+
+Booleenii pot avea doar două valori: `true` sau `false`. Booleenii pot ajuta la luarea deciziilor despre ce linii de cod ar trebui să ruleze atunci când anumite condiții sunt îndeplinite. În multe cazuri, [operatorii](../../../../2-js-basics/1-data-types) ajută la setarea valorii unui booleean și vei observa adesea variabile fiind inițializate sau valorile lor fiind actualizate cu un operator.
+
+- `let myTrueBool = true`
+- `let myFalseBool = false`
+
+✅ O variabilă poate fi considerată 'truthy' dacă evaluează la un booleean `true`. Interesant, în JavaScript, [toate valorile sunt truthy cu excepția celor definite ca falsy](https://developer.mozilla.org/docs/Glossary/Truthy).
+
+---
+
+## 🚀 Provocare
+
+JavaScript este cunoscut pentru modurile sale surprinzătoare de a gestiona tipurile de date ocazional. Fă puțină cercetare despre aceste 'capcane'. De exemplu: sensibilitatea la majuscule poate fi problematică! Încearcă asta în consola ta: `let age = 1; let Age = 2; age == Age` (rezultă `false` -- de ce?). Ce alte capcane poți găsi?
+
+## Chestionar Post-Lecție
+[Chestionar post-lecție](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/8)
+
+## Recapitulare și Studiu Individual
+
+Aruncă o privire la [această listă de exerciții JavaScript](https://css-tricks.com/snippets/javascript/) și încearcă unul. Ce ai învățat?
+
+## Temă
+
+[Exerciții cu Tipuri de Date](assignment.md)
+
+---
+
+**Declinare de responsabilitate**:  
+Acest document a fost tradus folosind serviciul de traducere AI [Co-op Translator](https://github.com/Azure/co-op-translator). Deși ne străduim să asigurăm acuratețea, vă rugăm să fiți conștienți că traducerile automate pot conține erori sau inexactități. Documentul original în limba sa natală ar trebui considerat sursa autoritară. Pentru informații critice, se recomandă traducerea profesională realizată de un specialist uman. Nu ne asumăm responsabilitatea pentru eventualele neînțelegeri sau interpretări greșite care pot apărea din utilizarea acestei traduceri.
\ No newline at end of file
diff --git a/translations/ro/2-js-basics/1-data-types/assignment.md b/translations/ro/2-js-basics/1-data-types/assignment.md
new file mode 100644
index 00000000..947fcd5b
--- /dev/null
+++ b/translations/ro/2-js-basics/1-data-types/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "3869244ceda606c4969d8cdd82679867",
+  "translation_date": "2025-08-27T22:14:23+00:00",
+  "source_file": "2-js-basics/1-data-types/assignment.md",
+  "language_code": "ro"
+}
+-->
+# Practică Tipuri de Date
+
+## Instrucțiuni
+
+Imaginează-ți că construiești un coș de cumpărături. Scrie o documentație despre tipurile de date de care ai avea nevoie pentru a finaliza experiența de cumpărături. Cum ai ajuns la alegerile tale?
+
+## Criterii de Evaluare
+
+Criterii | Exemplar | Adecvat | Necesită Îmbunătățiri
+--- | --- | --- | --- |
+||Cele șase tipuri de date sunt enumerate și explorate în detaliu, documentând utilizarea lor|Patru tipuri de date sunt explorate|Două tipuri de date sunt explorate|
+
+---
+
+**Declinare de responsabilitate**:  
+Acest document a fost tradus folosind serviciul de traducere AI [Co-op Translator](https://github.com/Azure/co-op-translator). Deși ne străduim să asigurăm acuratețea, vă rugăm să fiți conștienți că traducerile automate pot conține erori sau inexactități. Documentul original în limba sa natală ar trebui considerat sursa autoritară. Pentru informații critice, se recomandă traducerea profesională realizată de un specialist uman. Nu ne asumăm responsabilitatea pentru eventualele neînțelegeri sau interpretări greșite care pot apărea din utilizarea acestei traduceri.
\ No newline at end of file
diff --git a/translations/ro/2-js-basics/2-functions-methods/README.md b/translations/ro/2-js-basics/2-functions-methods/README.md
new file mode 100644
index 00000000..497be524
--- /dev/null
+++ b/translations/ro/2-js-basics/2-functions-methods/README.md
@@ -0,0 +1,210 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "b4612bbb9ace984f374fcc80e3e035ad",
+  "translation_date": "2025-08-27T22:08:35+00:00",
+  "source_file": "2-js-basics/2-functions-methods/README.md",
+  "language_code": "ro"
+}
+-->
+# Bazele JavaScript: Metode și Funcții
+
+![Bazele JavaScript - Funcții](../../../../translated_images/webdev101-js-functions.be049c4726e94f8b7605c36330ac42eeb5cd8ed02bcdd60fdac778174d6cb865.ro.png)
+> Sketchnote de [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Chestionar înainte de curs
+[Chestionar înainte de curs](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/9)
+
+Când ne gândim la scrierea codului, ne dorim întotdeauna să ne asigurăm că acesta este ușor de citit. Deși poate suna contraintuitiv, codul este citit de multe ori mai des decât este scris. Un instrument esențial în trusa unui dezvoltator pentru a asigura un cod ușor de întreținut este **funcția**.
+
+[![Metode și Funcții](https://img.youtube.com/vi/XgKsD6Zwvlc/0.jpg)](https://youtube.com/watch?v=XgKsD6Zwvlc "Metode și Funcții")
+
+> 🎥 Fă clic pe imaginea de mai sus pentru un videoclip despre metode și funcții.
+
+> Poți parcurge această lecție pe [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-functions/?WT.mc_id=academic-77807-sagibbon)!
+
+## Funcții
+
+În esență, o funcție este un bloc de cod pe care îl putem executa la cerere. Acest lucru este perfect pentru scenariile în care trebuie să efectuăm aceeași sarcină de mai multe ori; în loc să duplicăm logica în mai multe locuri (ceea ce ar face dificilă actualizarea ulterioară), o putem centraliza într-un singur loc și o putem apela ori de câte ori avem nevoie - poți chiar să apelezi funcții din alte funcții!
+
+La fel de importantă este și abilitatea de a da un nume unei funcții. Deși poate părea banal, numele oferă o modalitate rapidă de a documenta o secțiune de cod. Poți să te gândești la asta ca la o etichetă pe un buton. Dacă fac clic pe un buton pe care scrie „Anulează cronometrul”, știu că va opri ceasul.
+
+## Crearea și apelarea unei funcții
+
+Sintaxa pentru o funcție arată astfel:
+
+```javascript
+function nameOfFunction() { // function definition
+ // function definition/body
+}
+```
+
+Dacă aș vrea să creez o funcție pentru a afișa un mesaj de salut, ar putea arăta astfel:
+
+```javascript
+function displayGreeting() {
+  console.log('Hello, world!');
+}
+```
+
+Ori de câte ori dorim să apelăm (sau să invocăm) funcția noastră, folosim numele funcției urmat de `()`. Merită menționat faptul că funcția noastră poate fi definită înainte sau după ce decidem să o apelăm; compilatorul JavaScript o va găsi pentru tine.
+
+```javascript
+// calling our function
+displayGreeting();
+```
+
+> **NOTE:** Există un tip special de funcție cunoscut sub numele de **metodă**, pe care l-ai folosit deja! De fapt, am văzut acest lucru în demonstrația noastră de mai sus când am folosit `console.log`. Ceea ce face o metodă diferită de o funcție este faptul că o metodă este atașată unui obiect (`console` în exemplul nostru), în timp ce o funcție este independentă. Vei auzi mulți dezvoltatori folosind acești termeni interschimbabil.
+
+### Cele mai bune practici pentru funcții
+
+Există câteva bune practici de reținut atunci când creezi funcții:
+
+- Ca întotdeauna, folosește nume descriptive pentru a ști ce va face funcția.
+- Folosește **camelCasing** pentru a combina cuvintele.
+- Păstrează funcțiile concentrate pe o sarcină specifică.
+
+## Transmiterea informațiilor către o funcție
+
+Pentru a face o funcție mai reutilizabilă, vei dori adesea să îi transmiți informații. Dacă luăm în considerare exemplul nostru `displayGreeting` de mai sus, acesta va afișa doar **Hello, world!**. Nu este cea mai utilă funcție pe care ai putea să o creezi. Dacă vrem să o facem puțin mai flexibilă, cum ar fi să permitem cuiva să specifice numele persoanei pe care o salutăm, putem adăuga un **parametru**. Un parametru (numit uneori și **argument**) este o informație suplimentară trimisă unei funcții.
+
+Parametrii sunt listați în partea de definiție între paranteze și sunt separați prin virgulă astfel:
+
+```javascript
+function name(param, param2, param3) {
+
+}
+```
+
+Putem actualiza funcția `displayGreeting` pentru a accepta un nume și a-l afișa.
+
+```javascript
+function displayGreeting(name) {
+  const message = `Hello, ${name}!`;
+  console.log(message);
+}
+```
+
+Când dorim să apelăm funcția noastră și să transmitem parametrul, îl specificăm între paranteze.
+
+```javascript
+displayGreeting('Christopher');
+// displays "Hello, Christopher!" when run
+```
+
+## Valori implicite
+
+Putem face funcția noastră și mai flexibilă adăugând mai mulți parametri. Dar ce se întâmplă dacă nu vrem să fie necesar să specificăm fiecare valoare? Continuând cu exemplul nostru de salut, am putea lăsa numele ca fiind obligatoriu (avem nevoie să știm pe cine salutăm), dar vrem să permitem personalizarea salutului, dacă se dorește. Dacă cineva nu dorește să-l personalizeze, oferim o valoare implicită. Pentru a oferi o valoare implicită unui parametru, o setăm în același mod în care setăm o valoare pentru o variabilă - `parameterName = 'defaultValue'`. Pentru a vedea un exemplu complet:
+
+```javascript
+function displayGreeting(name, salutation='Hello') {
+  console.log(`${salutation}, ${name}`);
+}
+```
+
+Când apelăm funcția, putem decide dacă dorim să setăm o valoare pentru `salutation`.
+
+```javascript
+displayGreeting('Christopher');
+// displays "Hello, Christopher"
+
+displayGreeting('Christopher', 'Hi');
+// displays "Hi, Christopher"
+```
+
+## Valori returnate
+
+Până acum, funcția pe care am construit-o va afișa întotdeauna rezultatul în [consolă](https://developer.mozilla.org/docs/Web/API/console). Uneori, acest lucru poate fi exact ceea ce căutăm, mai ales când creăm funcții care vor apela alte servicii. Dar ce se întâmplă dacă vreau să creez o funcție ajutătoare pentru a efectua un calcul și a returna valoarea astfel încât să o pot folosi în altă parte?
+
+Putem face acest lucru folosind o **valoare returnată**. O valoare returnată este oferită de funcție și poate fi stocată într-o variabilă la fel cum am putea stoca o valoare literală, cum ar fi un șir sau un număr.
+
+Dacă o funcție returnează ceva, atunci se folosește cuvântul cheie `return`. Cuvântul cheie `return` așteaptă o valoare sau o referință a ceea ce este returnat astfel:
+
+```javascript
+return myVariable;
+```  
+
+Am putea crea o funcție pentru a crea un mesaj de salut și a returna valoarea apelantului.
+
+```javascript
+function createGreetingMessage(name) {
+  const message = `Hello, ${name}`;
+  return message;
+}
+```
+
+Când apelăm această funcție, vom stoca valoarea într-o variabilă. Acest lucru este foarte asemănător cu modul în care am seta o variabilă la o valoare statică (cum ar fi `const name = 'Christopher'`).
+
+```javascript
+const greetingMessage = createGreetingMessage('Christopher');
+```
+
+## Funcții ca parametri pentru alte funcții
+
+Pe măsură ce progresezi în cariera ta de programator, vei întâlni funcții care acceptă alte funcții ca parametri. Acest truc interesant este utilizat frecvent atunci când nu știm când ceva se va întâmpla sau se va finaliza, dar știm că trebuie să efectuăm o operație ca răspuns.
+
+De exemplu, consideră [setTimeout](https://developer.mozilla.org/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout), care pornește un cronometru și va executa codul când acesta se finalizează. Trebuie să îi spunem ce cod dorim să executăm. Sună ca o sarcină perfectă pentru o funcție!
+
+Dacă rulezi codul de mai jos, după 3 secunde vei vedea mesajul **3 seconds has elapsed**.
+
+```javascript
+function displayDone() {
+  console.log('3 seconds has elapsed');
+}
+// timer value is in milliseconds
+setTimeout(displayDone, 3000);
+```
+
+### Funcții anonime
+
+Să analizăm din nou ce am construit. Creăm o funcție cu un nume care va fi folosit o singură dată. Pe măsură ce aplicația noastră devine mai complexă, ne putem imagina creând o mulțime de funcții care vor fi apelate doar o dată. Acest lucru nu este ideal. După cum se dovedește, nu trebuie întotdeauna să oferim un nume!
+
+Când transmitem o funcție ca parametru, putem sări peste crearea uneia în avans și, în schimb, să o construim ca parte a parametrului. Folosim același cuvânt cheie `function`, dar o construim direct ca parametru.
+
+Să rescriem codul de mai sus pentru a folosi o funcție anonimă:
+
+```javascript
+setTimeout(function() {
+  console.log('3 seconds has elapsed');
+}, 3000);
+```
+
+Dacă rulezi noul nostru cod, vei observa că obținem aceleași rezultate. Am creat o funcție, dar nu a trebuit să-i dăm un nume!
+
+### Funcții săgeată (Fat arrow functions)
+
+Un scurtcircuit comun în multe limbaje de programare (inclusiv JavaScript) este abilitatea de a folosi ceea ce se numește o funcție **săgeată** sau **fat arrow**. Aceasta folosește un indicator special `=>`, care arată ca o săgeată - de aici și numele! Prin utilizarea `=>`, putem sărim peste cuvântul cheie `function`.
+
+Să rescriem codul nostru încă o dată pentru a folosi o funcție săgeată:
+
+```javascript
+setTimeout(() => {
+  console.log('3 seconds has elapsed');
+}, 3000);
+```
+
+### Când să folosești fiecare strategie
+
+Acum ai văzut că avem trei moduri de a transmite o funcție ca parametru și te-ai putea întreba când să folosești fiecare. Dacă știi că vei folosi funcția de mai multe ori, creeaz-o în mod normal. Dacă o vei folosi doar într-o singură locație, în general este mai bine să folosești o funcție anonimă. Dacă folosești o funcție săgeată sau sintaxa mai tradițională `function` depinde de tine, dar vei observa că majoritatea dezvoltatorilor moderni preferă `=>`.
+
+---
+
+## 🚀 Provocare
+
+Poți să explici într-o propoziție diferența dintre funcții și metode? Încearcă!
+
+## Chestionar după curs
+[Chestionar după curs](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/10)
+
+## Recapitulare și studiu individual
+
+Merită să [citești mai multe despre funcțiile săgeată](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions), deoarece sunt din ce în ce mai utilizate în codurile moderne. Exersează scrierea unei funcții, apoi rescrie-o folosind această sintaxă.
+
+## Temă
+
+[Distracție cu Funcții](assignment.md)
+
+---
+
+**Declinarea responsabilității**:  
+Acest document a fost tradus folosind serviciul de traducere AI [Co-op Translator](https://github.com/Azure/co-op-translator). Deși depunem eforturi pentru a asigura acuratețea, vă rugăm să aveți în vedere că traducerile automate pot conține erori sau inexactități. Documentul original în limba sa nativă ar trebui considerat sursa autoritară. Pentru informații critice, se recomandă traducerea profesională realizată de un specialist uman. Nu ne asumăm răspunderea pentru eventualele neînțelegeri sau interpretări greșite care pot apărea din utilizarea acestei traduceri.
\ No newline at end of file
diff --git a/translations/ro/2-js-basics/2-functions-methods/assignment.md b/translations/ro/2-js-basics/2-functions-methods/assignment.md
new file mode 100644
index 00000000..f9ade45d
--- /dev/null
+++ b/translations/ro/2-js-basics/2-functions-methods/assignment.md
@@ -0,0 +1,27 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "8973f96157680a13e9446e4bb540ee57",
+  "translation_date": "2025-08-27T22:10:21+00:00",
+  "source_file": "2-js-basics/2-functions-methods/assignment.md",
+  "language_code": "ro"
+}
+-->
+# Distracție cu Funcții
+
+## Instrucțiuni
+
+Creează diferite funcții, atât funcții care returnează ceva, cât și funcții care nu returnează nimic.
+
+Vezi dacă poți crea o funcție care are un mix de parametri și parametri cu valori implicite.
+
+## Criterii de Evaluare
+
+| Criterii | Exemplu                                                                                 | Adecvat                                                          | Necesită Îmbunătățiri |
+| -------- | ---------------------------------------------------------------------------------------- | ---------------------------------------------------------------- | ---------------------- |
+|          | Soluția oferă două sau mai multe funcții bine realizate, cu parametri diverși            | Soluția funcționează cu o funcție și câțiva parametri            | Soluția conține erori  |
+
+---
+
+**Declinare de responsabilitate**:  
+Acest document a fost tradus folosind serviciul de traducere AI [Co-op Translator](https://github.com/Azure/co-op-translator). Deși ne străduim să asigurăm acuratețea, vă rugăm să rețineți că traducerile automate pot conține erori sau inexactități. Documentul original în limba sa natală ar trebui considerat sursa autoritară. Pentru informații critice, se recomandă traducerea profesională realizată de un specialist uman. Nu ne asumăm responsabilitatea pentru eventualele neînțelegeri sau interpretări greșite care pot apărea din utilizarea acestei traduceri.
\ No newline at end of file
diff --git a/translations/ro/2-js-basics/3-making-decisions/README.md b/translations/ro/2-js-basics/3-making-decisions/README.md
new file mode 100644
index 00000000..6b1c59d6
--- /dev/null
+++ b/translations/ro/2-js-basics/3-making-decisions/README.md
@@ -0,0 +1,232 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "888609c48329c280ca2477d2df40f2e5",
+  "translation_date": "2025-08-27T22:07:01+00:00",
+  "source_file": "2-js-basics/3-making-decisions/README.md",
+  "language_code": "ro"
+}
+-->
+# Elementele de bază ale JavaScript: Luarea deciziilor
+
+![Elementele de bază ale JavaScript - Luarea deciziilor](../../../../translated_images/webdev101-js-decisions.69e1b20f272dd1f0b1cb2f8adaff3ed2a77c4f91db96d8a0594132a353fa189a.ro.png)
+
+> Sketchnote de [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Test înainte de lecție
+
+[Test înainte de lecție](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/11)
+
+Luarea deciziilor și controlul ordinii în care rulează codul tău fac ca acesta să fie reutilizabil și robust. Această secțiune acoperă sintaxa pentru controlul fluxului de date în JavaScript și semnificația sa atunci când este utilizată cu tipurile de date Boolean.
+
+[![Luarea deciziilor](https://img.youtube.com/vi/SxTp8j-fMMY/0.jpg)](https://youtube.com/watch?v=SxTp8j-fMMY "Luarea deciziilor")
+
+> 🎥 Fă clic pe imaginea de mai sus pentru un videoclip despre luarea deciziilor.
+
+> Poți parcurge această lecție pe [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-if-else/?WT.mc_id=academic-77807-sagibbon)!
+
+## O recapitulare rapidă despre Booleans
+
+Booleans pot avea doar două valori: `true` sau `false`. Booleans ajută la luarea deciziilor despre ce linii de cod ar trebui să ruleze atunci când anumite condiții sunt îndeplinite.
+
+Setează un boolean să fie true sau false astfel:
+
+`let myTrueBool = true`  
+`let myFalseBool = false`
+
+✅ Booleans sunt denumite după matematicianul, filosoful și logicianul englez George Boole (1815–1864).
+
+## Operatori de comparație și Booleans
+
+Operatorii sunt utilizați pentru a evalua condiții prin realizarea de comparații care vor genera o valoare Boolean. Mai jos este o listă de operatori frecvent utilizați.
+
+| Simbol | Descriere                                                                                                                                                   | Exemplu            |
+| ------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ |
+| `<`    | **Mai mic decât**: Compară două valori și returnează tipul de date Boolean `true` dacă valoarea din partea stângă este mai mică decât cea din dreapta        | `5 < 6 // true`    |
+| `<=`   | **Mai mic sau egal cu**: Compară două valori și returnează tipul de date Boolean `true` dacă valoarea din partea stângă este mai mică sau egală cu cea din dreapta | `5 <= 6 // true`   |
+| `>`    | **Mai mare decât**: Compară două valori și returnează tipul de date Boolean `true` dacă valoarea din partea stângă este mai mare decât cea din dreapta       | `5 > 6 // false`   |
+| `>=`   | **Mai mare sau egal cu**: Compară două valori și returnează tipul de date Boolean `true` dacă valoarea din partea stângă este mai mare sau egală cu cea din dreapta | `5 >= 6 // false`  |
+| `===`  | **Egalitate strictă**: Compară două valori și returnează tipul de date Boolean `true` dacă valorile din dreapta și stânga sunt egale ȘI sunt de același tip de date | `5 === 6 // false` |
+| `!==`  | **Inegalitate**: Compară două valori și returnează valoarea Boolean opusă celei pe care ar returna-o un operator de egalitate strictă                        | `5 !== 6 // true`  |
+
+✅ Verifică-ți cunoștințele scriind câteva comparații în consola browserului tău. Te surprinde vreun rezultat returnat?
+
+## Instrucțiunea If
+
+Instrucțiunea if va rula codul dintre blocurile sale dacă condiția este adevărată.
+
+```javascript
+if (condition) {
+  //Condition is true. Code in this block will run.
+}
+```
+
+Operatorii logici sunt adesea utilizați pentru a forma condiția.
+
+```javascript
+let currentMoney;
+let laptopPrice;
+
+if (currentMoney >= laptopPrice) {
+  //Condition is true. Code in this block will run.
+  console.log("Getting a new laptop!");
+}
+```
+
+## Instrucțiunea If..Else
+
+Instrucțiunea `else` va rula codul dintre blocurile sale atunci când condiția este falsă. Este opțională cu o instrucțiune `if`.
+
+```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!");
+}
+```
+
+✅ Testează-ți înțelegerea acestui cod și a codului următor rulându-l în consola browserului. Schimbă valorile variabilelor currentMoney și laptopPrice pentru a modifica rezultatul `console.log()`.
+
+## Instrucțiunea Switch
+
+Instrucțiunea `switch` este utilizată pentru a efectua acțiuni diferite pe baza unor condiții diferite. Folosește instrucțiunea `switch` pentru a selecta unul dintre mai multe blocuri de cod care urmează să fie executate.
+
+```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}`);
+```
+
+✅ Testează-ți înțelegerea acestui cod și a codului următor rulându-l în consola browserului. Schimbă valorile variabilei a pentru a modifica rezultatul `console.log()`.
+
+## Operatori logici și Booleans
+
+Deciziile pot necesita mai mult de o comparație și pot fi legate între ele cu operatori logici pentru a produce o valoare Boolean.
+
+| Simbol | Descriere                                                                                     | Exemplu                                                                 |
+| ------ | --------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------- |
+| `&&`   | **Logic AND**: Compară două expresii Boolean. Returnează true **doar** dacă ambele părți sunt true | `(5 > 6) && (5 < 6 ) //O parte este falsă, cealaltă este adevărată. Returnează false` |
+| `\|\|` | **Logic OR**: Compară două expresii Boolean. Returnează true dacă cel puțin o parte este true     | `(5 > 6) \|\| (5 < 6) //O parte este falsă, cealaltă este adevărată. Returnează true` |
+| `!`    | **Logic NOT**: Returnează valoarea opusă unei expresii Boolean                                 | `!(5 > 6) // 5 nu este mai mare decât 6, dar "!" va returna true`       |
+
+## Condiții și decizii cu operatori logici
+
+Operatorii logici pot fi utilizați pentru a forma condiții în instrucțiuni if..else.
+
+```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!");
+}
+```
+
+### Operatorul de negație
+
+Până acum ai văzut cum poți folosi o instrucțiune `if...else` pentru a crea logică condițională. Orice intră într-un `if` trebuie să evalueze la true/false. Prin utilizarea operatorului `!` poți _nega_ expresia. Ar arăta astfel:
+
+```javascript
+if (!condition) {
+  // runs if condition is false
+} else {
+  // runs if condition is true
+}
+```
+
+### Expresii ternare
+
+`if...else` nu este singura modalitate de a exprima logica decizională. Poți folosi și ceva numit operator ternar. Sintaxa arată astfel:
+
+```javascript
+let variable = condition ? <return this if true> : <return this if false>
+```
+
+Mai jos este un exemplu mai concret:
+
+```javascript
+let firstNumber = 20;
+let secondNumber = 10;
+let biggestNumber = firstNumber > secondNumber ? firstNumber : secondNumber;
+```
+
+✅ Ia un minut să citești acest cod de câteva ori. Înțelegi cum funcționează acești operatori?
+
+Codul de mai sus afirmă că:
+
+- dacă `firstNumber` este mai mare decât `secondNumber`
+- atunci atribuie `firstNumber` lui `biggestNumber`
+- altfel atribuie `secondNumber`.
+
+Expresia ternară este doar o modalitate compactă de a scrie codul de mai jos:
+
+```javascript
+let biggestNumber;
+if (firstNumber > secondNumber) {
+  biggestNumber = firstNumber;
+} else {
+  biggestNumber = secondNumber;
+}
+```
+
+---
+
+## 🚀 Provocare
+
+Creează un program care este scris mai întâi cu operatori logici, apoi rescrie-l folosind o expresie ternară. Care este sintaxa ta preferată?
+
+---
+
+## Test după lecție
+
+[Test după lecție](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/12)
+
+## Recapitulare și studiu individual
+
+Citește mai multe despre numeroșii operatori disponibili utilizatorului [pe MDN](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators).
+
+Parcurge minunatul [operator lookup](https://joshwcomeau.com/operator-lookup/) al lui Josh Comeau!
+
+## Temă
+
+[Operatori](assignment.md)
+
+---
+
+**Declinare de responsabilitate**:  
+Acest document a fost tradus folosind serviciul de traducere AI [Co-op Translator](https://github.com/Azure/co-op-translator). Deși ne străduim să asigurăm acuratețea, vă rugăm să fiți conștienți că traducerile automate pot conține erori sau inexactități. Documentul original în limba sa natală ar trebui considerat sursa autoritară. Pentru informații critice, se recomandă traducerea profesională realizată de un specialist uman. Nu ne asumăm responsabilitatea pentru eventualele neînțelegeri sau interpretări greșite care pot apărea din utilizarea acestei traduceri.
\ No newline at end of file
diff --git a/translations/ro/2-js-basics/3-making-decisions/assignment.md b/translations/ro/2-js-basics/3-making-decisions/assignment.md
new file mode 100644
index 00000000..de55db6d
--- /dev/null
+++ b/translations/ro/2-js-basics/3-making-decisions/assignment.md
@@ -0,0 +1,54 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "bf62b82567e6f9bdf4abda9ae0ccb64a",
+  "translation_date": "2025-08-27T22:08:12+00:00",
+  "source_file": "2-js-basics/3-making-decisions/assignment.md",
+  "language_code": "ro"
+}
+-->
+# Operatori
+
+## Instrucțiuni
+
+Experimentează cu operatorii. Iată o sugestie pentru un program pe care îl poți implementa:
+
+Ai un set de studenți din două sisteme de notare diferite.
+
+### Primul sistem de notare
+
+Un sistem de notare este definit prin note de la 1 la 5, unde 3 și mai mult înseamnă că ai promovat cursul.
+
+### Al doilea sistem de notare
+
+Celălalt sistem de notare are următoarele calificative: `A, A-, B, B-, C, C-`, unde `A` este calificativul maxim, iar `C` este cel mai mic calificativ care înseamnă promovare.
+
+### Sarcina
+
+Având următorul array `allStudents`, care reprezintă toți studenții și notele lor, construiește un nou array `studentsWhoPass` care să conțină toți studenții care au promovat.
+
+> TIP, folosește un for-loop, if...else și operatori de comparație:
+
+```javascript
+let allStudents = [
+  'A',
+  'B-',
+  1,
+  4,
+  5,
+  2
+]
+
+let studentsWhoPass = [];
+```
+
+## Criterii de evaluare
+
+| Criterii | Exemplu de performanță         | Performanță adecvată          | Necesită îmbunătățiri           |
+| -------- | ------------------------------ | ----------------------------- | ------------------------------- |
+|          | Este prezentată o soluție completă | Este prezentată o soluție parțială | Este prezentată o soluție cu erori |
+
+---
+
+**Declinare de responsabilitate**:  
+Acest document a fost tradus folosind serviciul de traducere AI [Co-op Translator](https://github.com/Azure/co-op-translator). Deși ne străduim să asigurăm acuratețea, vă rugăm să fiți conștienți că traducerile automate pot conține erori sau inexactități. Documentul original în limba sa natală ar trebui considerat sursa autoritară. Pentru informații critice, se recomandă traducerea profesională realizată de un specialist uman. Nu ne asumăm responsabilitatea pentru eventualele neînțelegeri sau interpretări greșite care pot apărea din utilizarea acestei traduceri.
\ No newline at end of file
diff --git a/translations/ro/2-js-basics/4-arrays-loops/README.md b/translations/ro/2-js-basics/4-arrays-loops/README.md
new file mode 100644
index 00000000..a86ee8a9
--- /dev/null
+++ b/translations/ro/2-js-basics/4-arrays-loops/README.md
@@ -0,0 +1,147 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "3f7f87871312cf6cc12662da7d973182",
+  "translation_date": "2025-08-27T22:10:39+00:00",
+  "source_file": "2-js-basics/4-arrays-loops/README.md",
+  "language_code": "ro"
+}
+-->
+# Bazele JavaScript: Tablouri și Bucle
+
+![Bazele JavaScript - Tablouri](../../../../translated_images/webdev101-js-arrays.439d7528b8a294558d0e4302e448d193f8ad7495cc407539cc81f1afe904b470.ro.png)
+> Sketchnote de [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Chestionar înainte de lecție
+[Chestionar înainte de lecție](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/13)
+
+Această lecție acoperă elementele de bază ale JavaScript, limbajul care oferă interactivitate pe web. În această lecție, vei învăța despre tablouri și bucle, care sunt utilizate pentru a manipula datele.
+
+[![Tablouri](https://img.youtube.com/vi/1U4qTyq02Xw/0.jpg)](https://youtube.com/watch?v=1U4qTyq02Xw "Tablouri")
+
+[![Bucle](https://img.youtube.com/vi/Eeh7pxtTZ3k/0.jpg)](https://www.youtube.com/watch?v=Eeh7pxtTZ3k "Bucle")
+
+> 🎥 Fă clic pe imaginile de mai sus pentru videoclipuri despre tablouri și bucle.
+
+> Poți parcurge această lecție pe [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-arrays/?WT.mc_id=academic-77807-sagibbon)!
+
+## Tablouri
+
+Lucrul cu date este o sarcină comună în orice limbaj, iar aceasta devine mult mai ușoară atunci când datele sunt organizate într-un format structurat, cum ar fi tablourile. Cu tablourile, datele sunt stocate într-o structură similară unei liste. Un mare avantaj al tablourilor este că poți stoca diferite tipuri de date într-un singur tablou.
+
+✅ Tablourile sunt peste tot în jurul nostru! Poți să te gândești la un exemplu din viața reală al unui tablou, cum ar fi un ansamblu de panouri solare?
+
+Sintaxa pentru un tablou este o pereche de paranteze pătrate.
+
+```javascript
+let myArray = [];
+```
+
+Acesta este un tablou gol, dar tablourile pot fi declarate deja populate cu date. Valorile multiple dintr-un tablou sunt separate printr-o virgulă.
+
+```javascript
+let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
+```
+
+Valorile din tablou primesc o valoare unică numită **index**, un număr întreg care este atribuit pe baza distanței sale față de începutul tabloului. În exemplul de mai sus, valoarea de tip șir "Chocolate" are indexul 0, iar indexul pentru "Rocky Road" este 4. Folosește indexul împreună cu paranteze pătrate pentru a prelua, schimba sau insera valori în tablou.
+
+✅ Te surprinde faptul că indexul tablourilor începe de la zero? În unele limbaje de programare, indexurile încep de la 1. Există o istorie interesantă în spatele acestui lucru, pe care o poți [citi pe Wikipedia](https://en.wikipedia.org/wiki/Zero-based_numbering).
+
+```javascript
+let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
+iceCreamFlavors[2]; //"Vanilla"
+```
+
+Poți folosi indexul pentru a schimba o valoare, astfel:
+
+```javascript
+iceCreamFlavors[4] = "Butter Pecan"; //Changed "Rocky Road" to "Butter Pecan"
+```
+
+Și poți insera o valoare nouă la un anumit index astfel:
+
+```javascript
+iceCreamFlavors[5] = "Cookie Dough"; //Added "Cookie Dough"
+```
+
+✅ O metodă mai comună de a adăuga valori într-un tablou este utilizarea operatorilor de tablou, cum ar fi array.push().
+
+Pentru a afla câte elemente sunt într-un tablou, folosește proprietatea `length`.
+
+```javascript
+let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
+iceCreamFlavors.length; //5
+```
+
+✅ Încearcă singur! Folosește consola browserului pentru a crea și manipula un tablou propriu.
+
+## Bucle
+
+Buclele ne permit să efectuăm sarcini repetitive sau **iterative** și pot economisi mult timp și cod. Fiecare iterație poate varia în ceea ce privește variabilele, valorile și condițiile. Există diferite tipuri de bucle în JavaScript, iar acestea au mici diferențe, dar în esență fac același lucru: parcurg datele.
+
+### Bucle For
+
+Buclele `for` necesită 3 părți pentru a itera:
+- `counter` O variabilă care este de obicei inițializată cu un număr ce contorizează numărul de iterații
+- `condition` O expresie care folosește operatori de comparație pentru a opri bucla atunci când devine `false`
+- `iteration-expression` Se execută la sfârșitul fiecărei iterații, de obicei utilizată pentru a modifica valoarea contorului
+  
+```javascript
+// Counting up to 10
+for (let i = 0; i < 10; i++) {
+  console.log(i);
+}
+```
+
+✅ Rulează acest cod în consola browserului. Ce se întâmplă când faci mici modificări la contor, condiție sau expresia de iterație? Poți face să ruleze invers, creând un numărătoare inversă?
+
+### Bucle While
+
+Spre deosebire de sintaxa buclei `for`, buclele `while` necesită doar o condiție care va opri bucla atunci când condiția devine `false`. Condițiile din bucle se bazează de obicei pe alte valori, cum ar fi contoarele, și trebuie gestionate în timpul buclei. Valorile inițiale pentru contoare trebuie create în afara buclei, iar orice expresii pentru a îndeplini o condiție, inclusiv modificarea contorului, trebuie menținute în interiorul buclei.
+
+```javascript
+//Counting up to 10
+let i = 0;
+while (i < 10) {
+ console.log(i);
+ i++;
+}
+```
+
+✅ De ce ai alege o buclă for în loc de o buclă while? 17.000 de utilizatori au avut aceeași întrebare pe StackOverflow, iar unele dintre opinii [ar putea fi interesante pentru tine](https://stackoverflow.com/questions/39969145/while-loops-vs-for-loops-in-javascript).
+
+## Bucle și Tablouri
+
+Tablourile sunt adesea utilizate împreună cu buclele, deoarece majoritatea condițiilor necesită lungimea tabloului pentru a opri bucla, iar indexul poate fi și valoarea contorului.
+
+```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
+```
+
+✅ Experimentează parcurgând un tablou propriu în consola browserului.
+
+---
+
+## 🚀 Provocare
+
+Există și alte modalități de a parcurge tablourile, în afară de buclele for și while. Există [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). Rescrie bucla tabloului tău folosind una dintre aceste tehnici.
+
+## Chestionar după lecție
+[Chestionar după lecție](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/14)
+
+## Recapitulare și Studiu Individual
+
+Tablourile în JavaScript au multe metode atașate, care sunt extrem de utile pentru manipularea datelor. [Citește despre aceste metode](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array) și încearcă câteva dintre ele (cum ar fi push, pop, slice și splice) pe un tablou creat de tine.
+
+## Temă
+
+[Parcurge un Tablou](assignment.md)
+
+---
+
+**Declinare de responsabilitate**:  
+Acest document a fost tradus folosind serviciul de traducere AI [Co-op Translator](https://github.com/Azure/co-op-translator). Deși ne străduim să asigurăm acuratețea, vă rugăm să fiți conștienți că traducerile automate pot conține erori sau inexactități. Documentul original în limba sa natală ar trebui considerat sursa autoritară. Pentru informații critice, se recomandă traducerea profesională realizată de un specialist uman. Nu ne asumăm responsabilitatea pentru eventualele neînțelegeri sau interpretări greșite care pot apărea din utilizarea acestei traduceri.
\ No newline at end of file
diff --git a/translations/ro/2-js-basics/4-arrays-loops/assignment.md b/translations/ro/2-js-basics/4-arrays-loops/assignment.md
new file mode 100644
index 00000000..f8ac156f
--- /dev/null
+++ b/translations/ro/2-js-basics/4-arrays-loops/assignment.md
@@ -0,0 +1,27 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "8b2381170bd0fd2870f5889bb8620f02",
+  "translation_date": "2025-08-27T22:11:53+00:00",
+  "source_file": "2-js-basics/4-arrays-loops/assignment.md",
+  "language_code": "ro"
+}
+-->
+# Parcurge un Array
+
+## Instrucțiuni
+
+Creează un program care listează fiecare al 3-lea număr între 1-20 și îl afișează în consolă.
+
+> TIP: folosește un for-loop și modifică expresia de iterație
+
+## Criterii de evaluare
+
+| Criteriu | Exemplu                                  | Adecvat                  | Necesită îmbunătățiri          |
+| -------- | --------------------------------------- | ------------------------ | ------------------------------ |
+|          | Programul rulează corect și este comentat | Programul nu este comentat | Programul este incomplet sau are erori |
+
+---
+
+**Declinare de responsabilitate**:  
+Acest document a fost tradus folosind serviciul de traducere AI [Co-op Translator](https://github.com/Azure/co-op-translator). Deși ne străduim să asigurăm acuratețea, vă rugăm să fiți conștienți că traducerile automate pot conține erori sau inexactități. Documentul original în limba sa natală ar trebui considerat sursa autoritară. Pentru informații critice, se recomandă traducerea profesională realizată de un specialist uman. Nu ne asumăm responsabilitatea pentru eventualele neînțelegeri sau interpretări greșite care pot apărea din utilizarea acestei traduceri.
\ No newline at end of file
diff --git a/translations/ro/2-js-basics/README.md b/translations/ro/2-js-basics/README.md
new file mode 100644
index 00000000..28fb50a2
--- /dev/null
+++ b/translations/ro/2-js-basics/README.md
@@ -0,0 +1,28 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "cc9e70a2f096c67389c8acff1521fc27",
+  "translation_date": "2025-08-27T22:06:42+00:00",
+  "source_file": "2-js-basics/README.md",
+  "language_code": "ro"
+}
+-->
+# Introducere în JavaScript
+
+JavaScript este limbajul web-ului. În aceste patru lecții, vei învăța elementele de bază.
+
+### Subiecte
+
+1. [Variabile și Tipuri de Date](1-data-types/README.md)
+2. [Funcții și Metode](2-functions-methods/README.md)
+3. [Luarea Deciziilor cu JavaScript](3-making-decisions/README.md)
+4. [Tablouri și Bucle](4-arrays-loops/README.md)
+
+### Credite
+
+Aceste lecții au fost scrise cu ♥️ de [Jasmine Greenaway](https://twitter.com/paladique), [Christopher Harrison](https://twitter.com/geektrainer) și [Chris Noring](https://twitter.com/chris_noring)
+
+---
+
+**Declinare de responsabilitate**:  
+Acest document a fost tradus folosind serviciul de traducere AI [Co-op Translator](https://github.com/Azure/co-op-translator). Deși ne străduim să asigurăm acuratețea, vă rugăm să fiți conștienți că traducerile automate pot conține erori sau inexactități. Documentul original în limba sa natală ar trebui considerat sursa autoritară. Pentru informații critice, se recomandă traducerea profesională realizată de un specialist uman. Nu ne asumăm responsabilitatea pentru eventualele neînțelegeri sau interpretări greșite care pot apărea din utilizarea acestei traduceri.
\ No newline at end of file
diff --git a/translations/ro/3-terrarium/1-intro-to-html/README.md b/translations/ro/3-terrarium/1-intro-to-html/README.md
new file mode 100644
index 00000000..96b99765
--- /dev/null
+++ b/translations/ro/3-terrarium/1-intro-to-html/README.md
@@ -0,0 +1,251 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "46a0639e719b9cf1dfd062aa24cad639",
+  "translation_date": "2025-08-27T21:59:45+00:00",
+  "source_file": "3-terrarium/1-intro-to-html/README.md",
+  "language_code": "ro"
+}
+-->
+# Proiect Terrarium Partea 1: Introducere în HTML
+
+![Introducere în HTML](../../../../translated_images/webdev101-html.4389c2067af68e98280c1bde52b6c6269f399eaae3659b7c846018d8a7b0bbd9.ro.png)
+> Sketchnote de [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Test înainte de lecție
+
+[Test înainte de lecție](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/15)
+
+
+> Vizionați videoclipul
+
+> 
+> [![Videoclip despre bazele Git și GitHub](https://img.youtube.com/vi/1TvxJKBzhyQ/0.jpg)](https://www.youtube.com/watch?v=1TvxJKBzhyQ)
+
+### Introducere
+
+HTML, sau HyperText Markup Language, este „scheletul” web-ului. Dacă CSS „îmbracă” HTML-ul și JavaScript îi dă viață, HTML este corpul aplicației tale web. Sintaxa HTML reflectă chiar această idee, incluzând taguri precum "head", "body" și "footer".
+
+În această lecție, vom folosi HTML pentru a crea „scheletul” interfeței virtuale a terrariumului nostru. Va avea un titlu și trei coloane: o coloană dreaptă și una stângă unde vor fi plasate plantele care pot fi mutate, și o zonă centrală care va fi terrariumul propriu-zis, cu aspect de sticlă. Până la sfârșitul lecției, vei putea vedea plantele în coloane, dar interfața va arăta puțin ciudat; nu-ți face griji, în secțiunea următoare vei adăuga stiluri CSS pentru a îmbunătăți aspectul interfeței.
+
+### Sarcină
+
+Pe computerul tău, creează un folder numit 'terrarium' și, în interiorul acestuia, un fișier numit 'index.html'. Poți face acest lucru în Visual Studio Code după ce creezi folderul terrarium, deschizând o fereastră nouă VS Code, făcând clic pe 'open folder' și navigând la noul tău folder. Apasă pe butonul mic 'file' din panoul Explorer și creează noul fișier:
+
+![explorer în VS Code](../../../../translated_images/vs-code-index.e2986cf919471eb984a0afef231380c8b132b000635105f2397bd2754d1b689c.ro.png)
+
+Sau
+
+Folosește aceste comenzi în git bash:
+* `mkdir terrarium`
+* `cd terrarium`
+* `touch index.html`
+* `code index.html` sau `nano index.html`
+
+> Fișierele index.html indică unui browser că acesta este fișierul implicit dintr-un folder; URL-uri precum `https://anysite.com/test` ar putea fi construite folosind o structură de folder care include un folder numit `test` cu `index.html` în interior; `index.html` nu trebuie să apară în URL.
+
+---
+
+## DocType și tagurile html
+
+Prima linie a unui fișier HTML este doctype-ul său. Este puțin surprinzător că trebuie să ai această linie chiar în partea de sus a fișierului, dar aceasta spune browserelor mai vechi că pagina trebuie să fie redată în modul standard, urmând specificațiile actuale HTML.
+
+> Sfaturi: în VS Code, poți trece cursorul peste un tag și obține informații despre utilizarea sa din ghidurile de referință MDN.
+
+A doua linie ar trebui să fie tagul de deschidere `<html>`, urmat imediat de tagul său de închidere `</html>`. Aceste taguri sunt elementele rădăcină ale interfeței tale.
+
+### Sarcină
+
+Adaugă aceste linii în partea de sus a fișierului tău `index.html`:
+
+```HTML
+<!DOCTYPE html>
+<html></html>
+```
+
+✅ Există câteva moduri diferite care pot fi determinate prin setarea DocType-ului cu un șir de interogare: [Modul Quirks și Modul Standard](https://developer.mozilla.org/docs/Web/HTML/Quirks_Mode_and_Standards_Mode). Aceste moduri erau folosite pentru a sprijini browsere foarte vechi care nu mai sunt utilizate în mod obișnuit (Netscape Navigator 4 și Internet Explorer 5). Poți rămâne la declarația standard de doctype.
+
+---
+
+## 'Head'-ul documentului
+
+Zona 'head' a documentului HTML include informații esențiale despre pagina ta web, cunoscute și sub numele de [metadata](https://developer.mozilla.org/docs/Web/HTML/Element/meta). În cazul nostru, spunem serverului web către care va fi trimisă această pagină să fie redată, următoarele patru lucruri:
+
+-   titlul paginii
+-   metadatele paginii, inclusiv:
+    -   'setul de caractere', care indică ce codificare de caractere este utilizată în pagină
+    -   informații despre browser, inclusiv `x-ua-compatible`, care indică faptul că browserul IE=edge este acceptat
+    -   informații despre cum ar trebui să se comporte viewport-ul atunci când este încărcat. Setarea viewport-ului pentru a avea o scală inițială de 1 controlează nivelul de zoom atunci când pagina este încărcată pentru prima dată.
+
+### Sarcină
+
+Adaugă un bloc 'head' în documentul tău între tagurile de deschidere și închidere `<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>
+```
+
+✅ Ce s-ar întâmpla dacă ai seta un tag meta pentru viewport astfel: `<meta name="viewport" content="width=600">`? Citește mai multe despre [viewport](https://developer.mozilla.org/docs/Web/HTML/Viewport_meta_tag).
+
+---
+
+## 'Body'-ul documentului
+
+### Taguri HTML
+
+În HTML, adaugi taguri în fișierul .html pentru a crea elemente ale unei pagini web. Fiecare tag are de obicei un tag de deschidere și unul de închidere, cum ar fi: `<p>hello</p>` pentru a indica un paragraf. Creează corpul interfeței tale adăugând un set de taguri `<body>` în interiorul perechii de taguri `<html>`; acum, marcajul tău arată astfel:
+
+### Sarcină
+
+```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>
+```
+
+Acum, poți începe să construiești pagina ta. De obicei, folosești taguri `<div>` pentru a crea elementele separate ale unei pagini. Vom crea o serie de elemente `<div>` care vor conține imagini.
+
+### Imagini
+
+Un tag HTML care nu necesită un tag de închidere este `<img>`, deoarece are un element `src` care conține toate informațiile necesare pentru ca pagina să redea elementul.
+
+Creează un folder în aplicația ta numit `images` și, în acesta, adaugă toate imaginile din [folderul sursă](../../../../3-terrarium/solution/images); (există 14 imagini cu plante).
+
+### Sarcină
+
+Adaugă acele imagini ale plantelor în două coloane între tagurile `<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>
+```
+
+> Notă: Spans vs. Divs. Div-urile sunt considerate elemente 'block', iar Spans sunt 'inline'. Ce s-ar întâmpla dacă ai transforma aceste div-uri în span-uri?
+
+Cu acest marcaj, plantele apar acum pe ecran. Arată destul de rău, deoarece nu sunt încă stilizate folosind CSS, și vom face acest lucru în lecția următoare.
+
+Fiecare imagine are un text alternativ care va apărea chiar dacă nu poți vedea sau reda o imagine. Acesta este un atribut important de inclus pentru accesibilitate. Află mai multe despre accesibilitate în lecțiile viitoare; pentru moment, amintește-ți că atributul alt oferă informații alternative pentru o imagine dacă un utilizator, dintr-un motiv oarecare, nu o poate vizualiza (din cauza unei conexiuni lente, a unei erori în atributul src sau dacă utilizatorul folosește un cititor de ecran).
+
+✅ Ai observat că fiecare imagine are același tag alt? Este aceasta o practică bună? De ce sau de ce nu? Poți îmbunătăți acest cod?
+
+---
+
+## Marcaj semantic
+
+În general, este preferabil să folosești 'semantica' semnificativă atunci când scrii HTML. Ce înseamnă asta? Înseamnă să folosești taguri HTML pentru a reprezenta tipul de date sau interacțiune pentru care au fost concepute. De exemplu, textul principal al unui titlu pe o pagină ar trebui să folosească un tag `<h1>`.
+
+Adaugă următoarea linie chiar sub tagul de deschidere `<body>`:
+
+```html
+<h1>My Terrarium</h1>
+```
+
+Folosirea marcajului semantic, cum ar fi utilizarea titlurilor `<h1>` și a listelor neordonate `<ul>`, ajută cititoarele de ecran să navigheze printr-o pagină. În general, butoanele ar trebui să fie scrise ca `<button>` și listele ca `<li>`. Deși este _posibil_ să folosești elemente `<span>` stilizate special cu gestionare de clicuri pentru a imita butoanele, este mai bine pentru utilizatorii cu dizabilități să folosească tehnologii pentru a determina unde se află un buton pe o pagină și să interacționeze cu acesta, dacă elementul apare ca un buton. Din acest motiv, încearcă să folosești marcaj semantic cât mai mult posibil.
+
+✅ Aruncă o privire la un cititor de ecran și [cum interacționează cu o pagină web](https://www.youtube.com/watch?v=OUDV1gqs9GA). Poți vedea de ce marcajul non-semantic ar putea frustra utilizatorul?
+
+## Terrariumul
+
+Ultima parte a acestei interfețe implică crearea unui marcaj care va fi stilizat pentru a crea un terrarium.
+
+### Sarcină:
+
+Adaugă acest marcaj deasupra ultimului tag `</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>
+```
+
+✅ Deși ai adăugat acest marcaj pe ecran, nu vezi absolut nimic redat. De ce?
+
+---
+
+## 🚀Provocare
+
+Există câteva taguri 'mai vechi' în HTML care sunt încă distractive de utilizat, deși nu ar trebui să folosești taguri învechite precum [aceste taguri](https://developer.mozilla.org/docs/Web/HTML/Element#Obsolete_and_deprecated_elements) în marcajul tău. Totuși, poți folosi vechiul tag `<marquee>` pentru a face titlul h1 să se deruleze orizontal? (dacă o faci, nu uita să-l elimini ulterior)
+
+## Test după lecție
+
+[Test după lecție](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/16)
+
+## Recapitulare și studiu individual
+
+HTML este sistemul de construcție „testat și adevărat” care a ajutat la construirea web-ului așa cum îl cunoaștem astăzi. Află puțin despre istoria sa studiind câteva taguri vechi și noi. Poți să-ți dai seama de ce unele taguri au fost învechite și altele adăugate? Ce taguri ar putea fi introduse în viitor?
+
+Află mai multe despre construirea site-urilor pentru web și dispozitive mobile la [Microsoft Learn](https://docs.microsoft.com/learn/modules/build-simple-website/?WT.mc_id=academic-77807-sagibbon).
+
+
+## Temă
+
+[Exersează HTML-ul: Construiește un model de blog](assignment.md)
+
+---
+
+**Declinare de responsabilitate**:  
+Acest document a fost tradus folosind serviciul de traducere AI [Co-op Translator](https://github.com/Azure/co-op-translator). Deși ne străduim să asigurăm acuratețea, vă rugăm să rețineți că traducerile automate pot conține erori sau inexactități. Documentul original în limba sa natală ar trebui considerat sursa autoritară. Pentru informații critice, se recomandă traducerea profesională realizată de un specialist uman. Nu ne asumăm responsabilitatea pentru eventualele neînțelegeri sau interpretări greșite care pot apărea din utilizarea acestei traduceri.
\ No newline at end of file
diff --git a/translations/ro/3-terrarium/1-intro-to-html/assignment.md b/translations/ro/3-terrarium/1-intro-to-html/assignment.md
new file mode 100644
index 00000000..c33df6a2
--- /dev/null
+++ b/translations/ro/3-terrarium/1-intro-to-html/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "970776c81401c9aacb34f365edac6b53",
+  "translation_date": "2025-08-27T22:01:37+00:00",
+  "source_file": "3-terrarium/1-intro-to-html/assignment.md",
+  "language_code": "ro"
+}
+-->
+# Exersează HTML-ul: Creează un mockup de blog
+
+## Instrucțiuni
+
+Imaginează-ți că proiectezi sau reproiectezi site-ul tău personal. Creează un mockup grafic al site-ului tău, apoi notează codul HTML pe care l-ai folosi pentru a construi diferitele elemente ale site-ului. Poți face acest lucru pe hârtie și să-l scanezi sau să folosești un software la alegerea ta, asigurându-te că scrii manual codul HTML.
+
+## Criterii de evaluare
+
+| Criterii | Exemplar                                                                           | Adequat                                                                         | Necesită îmbunătățiri                                                             |
+| -------- | ---------------------------------------------------------------------------------- | -------------------------------------------------------------------------------- | --------------------------------------------------------------------------------- |
+|          | Un layout de blog este reprezentat vizual cu cel puțin 10 elemente de markup afișate | Un layout de blog este reprezentat vizual cu aproximativ 5 elemente de markup afișate | Un layout de blog este reprezentat vizual cu cel mult 3 elemente de markup afișate |
+
+---
+
+**Declinare de responsabilitate**:  
+Acest document a fost tradus folosind serviciul de traducere AI [Co-op Translator](https://github.com/Azure/co-op-translator). Deși ne străduim să asigurăm acuratețea, vă rugăm să rețineți că traducerile automate pot conține erori sau inexactități. Documentul original în limba sa natală ar trebui considerat sursa autoritară. Pentru informații critice, se recomandă traducerea profesională realizată de un specialist uman. Nu ne asumăm responsabilitatea pentru eventualele neînțelegeri sau interpretări greșite care pot apărea din utilizarea acestei traduceri.
\ No newline at end of file
diff --git a/translations/ro/3-terrarium/2-intro-to-css/README.md b/translations/ro/3-terrarium/2-intro-to-css/README.md
new file mode 100644
index 00000000..0145c04e
--- /dev/null
+++ b/translations/ro/3-terrarium/2-intro-to-css/README.md
@@ -0,0 +1,284 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "e375c2aeb94e2407f2667633d39580bd",
+  "translation_date": "2025-08-27T22:04:22+00:00",
+  "source_file": "3-terrarium/2-intro-to-css/README.md",
+  "language_code": "ro"
+}
+-->
+# Proiect Terrarium Partea 2: Introducere în CSS
+
+![Introducere în CSS](../../../../translated_images/webdev101-css.3f7af5991bf53a200d79e7257e5e450408d8ea97f5b531d31b2e3976317338ee.ro.png)
+> Sketchnote de [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Test înainte de lecție
+
+[Test înainte de lecție](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/17)
+
+### Introducere
+
+CSS, sau Cascading Style Sheets, rezolvă o problemă importantă în dezvoltarea web: cum să faci ca site-ul tău să arate bine. Stilizarea aplicațiilor le face mai ușor de utilizat și mai plăcute vizual; de asemenea, poți folosi CSS pentru a crea Design Web Responsiv (RWD) - permițând aplicațiilor tale să arate bine indiferent de dimensiunea ecranului pe care sunt afișate. CSS nu este doar despre aspect; specificațiile sale includ animații și transformări care pot permite interacțiuni sofisticate pentru aplicațiile tale. Grupul de lucru CSS ajută la menținerea specificațiilor CSS actuale; poți urmări activitatea lor pe [site-ul World Wide Web Consortium](https://www.w3.org/Style/CSS/members).
+
+> Notă, CSS este un limbaj care evoluează, la fel ca tot ce ține de web, și nu toate browserele suportă părțile mai noi ale specificației. Verifică întotdeauna implementările tale consultând [CanIUse.com](https://caniuse.com).
+
+În această lecție, vom adăuga stiluri la terrarium-ul nostru online și vom învăța mai multe despre câteva concepte CSS: cascada, moștenirea, utilizarea selectorilor, poziționarea și utilizarea CSS pentru a construi layout-uri. În proces, vom crea layout-ul terrarium-ului și vom construi efectiv terrarium-ul.
+
+### Prerechizite
+
+Ar trebui să ai HTML-ul pentru terrarium-ul tău construit și pregătit pentru a fi stilizat.
+
+> Vezi videoclipul
+
+> 
+> [![Videoclip despre bazele Git și GitHub](https://img.youtube.com/vi/6yIdOIV9p1I/0.jpg)](https://www.youtube.com/watch?v=6yIdOIV9p1I)
+
+### Sarcină
+
+În folderul terrarium-ului tău, creează un fișier nou numit `style.css`. Importă acel fișier în secțiunea `<head>`:
+
+```html
+<link rel="stylesheet" href="./style.css" />
+```
+
+---
+
+## Cascada
+
+Cascading Style Sheets încorporează ideea că stilurile 'cascadă', astfel încât aplicarea unui stil este ghidată de prioritatea sa. Stilurile setate de autorul unui site web au prioritate față de cele setate de un browser. Stilurile setate 'inline' au prioritate față de cele setate într-un fișier de stil extern.
+
+### Sarcină
+
+Adaugă stilul inline "color: red" la tag-ul `<h1>`:
+
+```HTML
+<h1 style="color: red">My Terrarium</h1>
+```
+
+Apoi, adaugă următorul cod în fișierul tău `style.css`:
+
+```CSS
+h1 {
+ color: blue;
+}
+```
+
+✅ Ce culoare se afișează în aplicația ta web? De ce? Poți găsi o modalitate de a suprascrie stilurile? Când ai vrea să faci acest lucru sau de ce nu?
+
+---
+
+## Moștenirea
+
+Stilurile sunt moștenite de la un stil al unui strămoș la un descendent, astfel încât elementele imbricate moștenesc stilurile părinților lor.
+
+### Sarcină
+
+Setează fontul corpului la un font dat și verifică fontul unui element imbricat:
+
+```CSS
+body {
+	font-family: helvetica, arial, sans-serif;
+}
+```
+
+Deschide consola browserului tău la tab-ul 'Elements' și observă fontul H1. Acesta moștenește fontul de la corp, așa cum este indicat în browser:
+
+![font moștenit](../../../../translated_images/1.cc07a5cbe114ad1d4728c35134584ac1b87db688eff83cf75985cf31fe0ed95c.ro.png)
+
+✅ Poți face ca un stil imbricat să moștenească o proprietate diferită?
+
+---
+
+## Selectori CSS
+
+### Tag-uri
+
+Până acum, fișierul tău `style.css` are doar câteva tag-uri stilizate, iar aplicația arată destul de ciudat:
+
+```CSS
+body {
+	font-family: helvetica, arial, sans-serif;
+}
+
+h1 {
+	color: #3a241d;
+	text-align: center;
+}
+```
+
+Acest mod de a stiliza un tag îți oferă control asupra elementelor unice, dar ai nevoie să controlezi stilurile multor plante din terrarium-ul tău. Pentru a face acest lucru, trebuie să folosești selectorii CSS.
+
+### Id-uri
+
+Adaugă un stil pentru a aranja containerele din stânga și dreapta. Deoarece există doar un container stânga și doar un container dreapta, acestea au id-uri în markup. Pentru a le stiliza, folosește `#`:
+
+```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;
+}
+```
+
+Aici, ai plasat aceste containere cu poziționare absolută la extremitățile stânga și dreapta ale ecranului și ai folosit procente pentru lățimea lor, astfel încât să se poată scala pentru ecrane mici de mobil.
+
+✅ Acest cod este destul de repetitiv, deci nu este "DRY" (Don't Repeat Yourself); poți găsi o modalitate mai bună de a stiliza aceste id-uri, poate cu un id și o clasă? Ar trebui să schimbi markup-ul și să refactorizezi CSS-ul:
+
+```html
+<div id="left-container" class="container"></div>
+```
+
+### Clase
+
+În exemplul de mai sus, ai stilizat două elemente unice pe ecran. Dacă vrei ca stilurile să se aplice la mai multe elemente pe ecran, poți folosi clase CSS. Fă acest lucru pentru a aranja plantele în containerele din stânga și dreapta.
+
+Observă că fiecare plantă din markup-ul HTML are o combinație de id-uri și clase. Id-urile aici sunt folosite de JavaScript-ul pe care îl vei adăuga mai târziu pentru a manipula plasarea plantelor în terrarium. Clasele, însă, oferă tuturor plantelor un stil dat.
+
+```html
+<div class="plant-holder">
+	<img class="plant" alt="plant" id="plant1" src="./images/plant1.png" />
+</div>
+```
+
+Adaugă următorul cod în fișierul tău `style.css`:
+
+```CSS
+.plant-holder {
+	position: relative;
+	height: 13%;
+	left: -10px;
+}
+
+.plant {
+	position: absolute;
+	max-width: 150%;
+	max-height: 150%;
+	z-index: 2;
+}
+```
+
+Notabil în acest fragment este amestecul de poziționare relativă și absolută, pe care îl vom acoperi în secțiunea următoare. Uită-te la modul în care înălțimile sunt gestionate prin procente:
+
+Ai setat înălțimea suportului pentru plante la 13%, un număr bun pentru a te asigura că toate plantele sunt afișate în fiecare container vertical fără a fi nevoie de derulare.
+
+Ai setat suportul pentru plante să se deplaseze spre stânga pentru a permite plantelor să fie mai centrate în containerul lor. Imaginile au o cantitate mare de fundal transparent pentru a le face mai ușor de mutat, așa că trebuie împinse spre stânga pentru a se potrivi mai bine pe ecran.
+
+Apoi, planta în sine are o lățime maximă de 150%. Acest lucru îi permite să se scaleze în jos pe măsură ce browserul se scalează în jos. Încearcă să redimensionezi browserul; plantele rămân în containerele lor, dar se scalează în jos pentru a se potrivi.
+
+De asemenea, este notabilă utilizarea z-index, care controlează altitudinea relativă a unui element (astfel încât plantele să stea deasupra containerului și să pară că sunt în interiorul terrarium-ului).
+
+✅ De ce ai nevoie atât de un selector CSS pentru suportul plantei, cât și pentru plantă?
+
+## Poziționarea CSS
+
+Amestecarea proprietăților de poziționare (există poziții statice, relative, fixe, absolute și sticky) poate fi puțin complicată, dar atunci când este făcută corect îți oferă un control bun asupra elementelor de pe paginile tale.
+
+Elementele poziționate absolut sunt poziționate relativ față de cei mai apropiați strămoși poziționați, iar dacă nu există niciunul, sunt poziționate conform corpului documentului.
+
+Elementele poziționate relativ sunt poziționate pe baza direcțiilor CSS pentru a-și ajusta plasarea față de poziția lor inițială.
+
+În exemplul nostru, `plant-holder` este un element poziționat relativ care este poziționat în interiorul unui container poziționat absolut. Comportamentul rezultat este că containerele barei laterale sunt fixate la stânga și dreapta, iar `plant-holder` este imbricat, ajustându-se în interiorul barelor laterale, oferind spațiu pentru ca plantele să fie plasate într-un rând vertical.
+
+> Planta în sine are, de asemenea, poziționare absolută, necesară pentru a o face mutabilă, așa cum vei descoperi în lecția următoare.
+
+✅ Experimentează cu schimbarea tipurilor de poziționare ale containerelor laterale și ale `plant-holder`. Ce se întâmplă?
+
+## Layout-uri CSS
+
+Acum vei folosi ceea ce ai învățat pentru a construi terrarium-ul propriu-zis, totul folosind CSS!
+
+Mai întâi, stilizează copiii div-ului `.terrarium` ca un dreptunghi rotunjit folosind 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;
+}
+```
+
+Observă utilizarea procentelor aici. Dacă reduci dimensiunea browserului, poți vedea cum borcanul se scalează de asemenea. De asemenea, observă procentele pentru lățimile și înălțimile elementelor borcanului și cum fiecare element este poziționat absolut în centru, fixat la partea de jos a viewport-ului.
+
+Folosim și `rem` pentru border-radius, o lungime relativă la font. Citește mai multe despre acest tip de măsurare relativă în [specificația CSS](https://www.w3.org/TR/css-values-3/#font-relative-lengths).
+
+✅ Încearcă să schimbi culorile borcanului și opacitatea față de cele ale pământului. Ce se întâmplă? De ce?
+
+---
+
+## 🚀Provocare
+
+Adaugă o strălucire 'bubble' în zona din stânga jos a borcanului pentru a-l face să arate mai asemănător cu sticla. Vei stiliza `.jar-glossy-long` și `.jar-glossy-short` pentru a arăta ca o strălucire reflectată. Iată cum ar arăta:
+
+![terrarium finalizat](../../../../translated_images/terrarium-final.2f07047ffc597d0a06b06cab28a77801a10dd12fdb6c7fc630e9c40665491c53.ro.png)
+
+Pentru a finaliza testul post-lecție, parcurge acest modul Learn: [Stilizează aplicația ta HTML cu CSS](https://docs.microsoft.com/learn/modules/build-simple-website/4-css-basics/?WT.mc_id=academic-77807-sagibbon)
+
+## Test după lecție
+
+[Test după lecție](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/18)
+
+## Recapitulare și studiu individual
+
+CSS pare înșelător de simplu, dar există multe provocări atunci când încerci să stilizezi o aplicație perfect pentru toate browserele și toate dimensiunile ecranului. CSS-Grid și Flexbox sunt instrumente care au fost dezvoltate pentru a face munca puțin mai structurată și mai fiabilă. Învață despre aceste instrumente jucând [Flexbox Froggy](https://flexboxfroggy.com/) și [Grid Garden](https://codepip.com/games/grid-garden/).
+
+## Temă
+
+[Refactorizare CSS](assignment.md)
+
+---
+
+**Declinarea responsabilității**:  
+Acest document a fost tradus utilizând serviciul de traducere AI [Co-op Translator](https://github.com/Azure/co-op-translator). Deși depunem eforturi pentru a asigura acuratețea, vă rugăm să aveți în vedere că traducerile automate pot conține erori sau inexactități. Documentul original în limba sa nativă ar trebui considerat sursa autoritară. Pentru informații critice, se recomandă traducerea profesională realizată de un specialist. Nu ne asumăm răspunderea pentru eventualele neînțelegeri sau interpretări greșite care pot apărea din utilizarea acestei traduceri.
\ No newline at end of file
diff --git a/translations/ro/3-terrarium/2-intro-to-css/assignment.md b/translations/ro/3-terrarium/2-intro-to-css/assignment.md
new file mode 100644
index 00000000..8628db79
--- /dev/null
+++ b/translations/ro/3-terrarium/2-intro-to-css/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "9d4d75af51aaccfe9af778f792c62919",
+  "translation_date": "2025-08-27T22:05:56+00:00",
+  "source_file": "3-terrarium/2-intro-to-css/assignment.md",
+  "language_code": "ro"
+}
+-->
+# Refactorizare CSS
+
+## Instrucțiuni
+
+Restilizează terariul folosind fie Flexbox, fie CSS Grid și realizează capturi de ecran pentru a arăta că l-ai testat pe mai multe browsere. Este posibil să fie nevoie să modifici structura HTML, așa că creează o nouă versiune a aplicației cu arta deja plasată pentru refactorizare. Nu te îngrijora de funcționalitatea de tragere a elementelor; pentru moment, refactorizează doar HTML-ul și CSS-ul.
+
+## Criterii de evaluare
+
+| Criterii | Exemplu                                                          | Adecvat                       | Necesită îmbunătățiri                |
+| -------- | ---------------------------------------------------------------- | ----------------------------- | ------------------------------------ |
+|          | Prezintă un terariu complet restilizat folosind Flexbox sau CSS Grid | Restilizează câteva elemente  | Nu reușește să restilizeze terariul deloc |
+
+---
+
+**Declinare de responsabilitate**:  
+Acest document a fost tradus folosind serviciul de traducere AI [Co-op Translator](https://github.com/Azure/co-op-translator). Deși ne străduim să asigurăm acuratețea, vă rugăm să fiți conștienți că traducerile automate pot conține erori sau inexactități. Documentul original în limba sa natală ar trebui considerat sursa autoritară. Pentru informații critice, se recomandă traducerea profesională realizată de un specialist uman. Nu ne asumăm responsabilitatea pentru eventualele neînțelegeri sau interpretări greșite care pot apărea din utilizarea acestei traduceri.
\ No newline at end of file
diff --git a/translations/ro/3-terrarium/3-intro-to-DOM-and-closures/README.md b/translations/ro/3-terrarium/3-intro-to-DOM-and-closures/README.md
new file mode 100644
index 00000000..9eac9573
--- /dev/null
+++ b/translations/ro/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:01:58+00:00",
+  "source_file": "3-terrarium/3-intro-to-DOM-and-closures/README.md",
+  "language_code": "ro"
+}
+-->
+# Proiect Terrarium Partea 3: Manipularea DOM-ului și o Închidere
+
+![DOM și o închidere](../../../../translated_images/webdev101-js.10280393044d7eaaec7e847574946add7ddae6be2b2194567d848b61d849334a.ro.png)
+> Sketchnote de [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Chestionar Pre-Lecție
+
+[Chestionar pre-lecție](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/19)
+
+### Introducere
+
+Manipularea DOM-ului, sau "Document Object Model", este un aspect esențial al dezvoltării web. Conform [MDN](https://developer.mozilla.org/docs/Web/API/Document_Object_Model/Introduction), "Document Object Model (DOM) este reprezentarea datelor obiectelor care compun structura și conținutul unui document pe web." Provocările legate de manipularea DOM-ului pe web au fost adesea motivul pentru utilizarea framework-urilor JavaScript în locul JavaScript-ului simplu pentru gestionarea DOM-ului, dar noi ne vom descurca pe cont propriu!
+
+În plus, această lecție va introduce ideea unei [închideri JavaScript (closure)](https://developer.mozilla.org/docs/Web/JavaScript/Closures), pe care o puteți considera ca o funcție închisă de o altă funcție, astfel încât funcția interioară are acces la domeniul funcției exterioare.
+
+> Închiderile JavaScript sunt un subiect vast și complex. Această lecție atinge doar ideea de bază că în codul acestui terrarium veți găsi o închidere: o funcție interioară și una exterioară construite astfel încât funcția interioară să aibă acces la domeniul funcției exterioare. Pentru mai multe informații despre cum funcționează acest lucru, vă rugăm să vizitați [documentația extinsă](https://developer.mozilla.org/docs/Web/JavaScript/Closures).
+
+Vom folosi o închidere pentru a manipula DOM-ul.
+
+Gândiți-vă la DOM ca la un arbore, care reprezintă toate modurile în care un document de pagină web poate fi manipulat. Diverse API-uri (Interfețe de Programare a Aplicațiilor) au fost scrise astfel încât programatorii, folosind limbajul lor de programare preferat, să poată accesa DOM-ul și să-l editeze, schimbe, rearanjeze și să-l gestioneze în alte moduri.
+
+![Reprezentarea arborelui DOM](../../../../translated_images/dom-tree.7daf0e763cbbba9273f9a66fe04c98276d7d23932309b195cb273a9cf1819b42.ro.png)
+
+> O reprezentare a DOM-ului și a marcajului HTML care îl referențiază. De la [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
+
+În această lecție, vom finaliza proiectul nostru interactiv de terrarium prin crearea JavaScript-ului care va permite utilizatorului să manipuleze plantele de pe pagină.
+
+### Prerechizite
+
+Ar trebui să aveți HTML-ul și CSS-ul pentru terrarium-ul vostru construite. Până la sfârșitul acestei lecții, veți putea muta plantele în și din terrarium prin tragere.
+
+### Sarcină
+
+În folderul terrarium, creați un fișier nou numit `script.js`. Importați acest fișier în secțiunea `<head>`:
+
+```html
+	<script src="./script.js" defer></script>
+```
+
+> Notă: folosiți `defer` atunci când importați un fișier JavaScript extern în fișierul HTML pentru a permite executarea JavaScript-ului doar după ce fișierul HTML a fost complet încărcat. De asemenea, puteți folosi atributul `async`, care permite scriptului să se execute în timp ce fișierul HTML este analizat, dar în cazul nostru, este important ca elementele HTML să fie complet disponibile pentru tragere înainte de a permite executarea scriptului de tragere.
+---
+
+## Elementele DOM
+
+Primul lucru pe care trebuie să-l faceți este să creați referințe la elementele pe care doriți să le manipulați în DOM. În cazul nostru, acestea sunt cele 14 plante care așteaptă în barele laterale.
+
+### Sarcină
+
+```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'));
+```
+
+Ce se întâmplă aici? Referiți documentul și căutați în DOM-ul său pentru a găsi un element cu un anumit Id. Vă amintiți din prima lecție despre HTML că ați dat Id-uri individuale fiecărei imagini de plantă (`id="plant1"`)? Acum veți folosi acel efort. După identificarea fiecărui element, transmiteți acel element unei funcții numite `dragElement` pe care o veți construi în curând. Astfel, elementul din HTML este acum activat pentru tragere, sau va fi în curând.
+
+✅ De ce referim elementele prin Id? De ce nu prin clasa lor CSS? Puteți consulta lecția anterioară despre CSS pentru a răspunde la această întrebare.
+
+---
+
+## Închiderea
+
+Acum sunteți gata să creați închiderea `dragElement`, care este o funcție exterioară ce închide o funcție sau funcții interioare (în cazul nostru, vom avea trei).
+
+Închiderile sunt utile atunci când una sau mai multe funcții trebuie să acceseze domeniul funcției exterioare. Iată un exemplu:
+
+```javascript
+function displayCandy(){
+	let candy = ['jellybeans'];
+	function addCandy(candyType) {
+		candy.push(candyType)
+	}
+	addCandy('gumdrops');
+}
+displayCandy();
+console.log(candy)
+```
+
+În acest exemplu, funcția `displayCandy` înconjoară o funcție care adaugă un nou tip de bomboană într-un array care există deja în funcție. Dacă ați rula acest cod, array-ul `candy` ar fi nedefinit, deoarece este o variabilă locală (locală pentru închidere).
+
+✅ Cum puteți face array-ul `candy` accesibil? Încercați să-l mutați în afara închiderii. În acest fel, array-ul devine global, în loc să rămână disponibil doar în domeniul local al închiderii.
+
+### Sarcină
+
+Sub declarațiile elementelor din `script.js`, creați o funcție:
+
+```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` primește obiectul său `terrariumElement` din declarațiile de la începutul scriptului. Apoi, setați câteva poziții locale la `0` pentru obiectul transmis funcției. Acestea sunt variabilele locale care vor fi manipulate pentru fiecare element pe măsură ce adăugați funcționalitatea de tragere și plasare în cadrul închiderii fiecărui element. Terrarium-ul va fi populat de aceste elemente trase, astfel încât aplicația trebuie să țină evidența locului în care sunt plasate.
+
+În plus, elementul terrarium transmis acestei funcții este atribuit unui eveniment `pointerdown`, care face parte din [web APIs](https://developer.mozilla.org/docs/Web/API) concepute pentru a ajuta la gestionarea DOM-ului. `onpointerdown` se declanșează atunci când un buton este apăsat sau, în cazul nostru, un element care poate fi tras este atins. Acest handler de evenimente funcționează atât pe [navigatoare web, cât și mobile](https://caniuse.com/?search=onpointerdown), cu câteva excepții.
+
+✅ [Handler-ul de evenimente `onclick`](https://developer.mozilla.org/docs/Web/API/GlobalEventHandlers/onclick) are mult mai mult suport cross-browser; de ce nu l-ați folosi aici? Gândiți-vă la tipul exact de interacțiune pe ecran pe care încercați să o creați aici.
+
+---
+
+## Funcția Pointerdrag
+
+Elementul `terrariumElement` este gata să fie tras; când evenimentul `onpointerdown` este declanșat, funcția `pointerDrag` este invocată. Adăugați acea funcție chiar sub această linie: `terrariumElement.onpointerdown = pointerDrag;`:
+
+### Sarcină 
+
+```javascript
+function pointerDrag(e) {
+	e.preventDefault();
+	console.log(e);
+	pos3 = e.clientX;
+	pos4 = e.clientY;
+}
+```
+
+Se întâmplă mai multe lucruri. În primul rând, preveniți evenimentele implicite care apar în mod normal la pointerdown folosind `e.preventDefault();`. În acest fel, aveți mai mult control asupra comportamentului interfeței.
+
+> Reveniți la această linie după ce ați construit complet fișierul script și încercați fără `e.preventDefault()` - ce se întâmplă?
+
+În al doilea rând, deschideți `index.html` într-o fereastră de browser și inspectați interfața. Când faceți clic pe o plantă, puteți vedea cum evenimentul 'e' este capturat. Explorați evenimentul pentru a vedea cât de multe informații sunt colectate de un singur eveniment pointer down!  
+
+Apoi, observați cum variabilele locale `pos3` și `pos4` sunt setate la e.clientX. Puteți găsi valorile `e` în panoul de inspecție. Aceste valori capturează coordonatele x și y ale plantei în momentul în care faceți clic pe ea sau o atingeți. Veți avea nevoie de un control detaliat asupra comportamentului plantelor pe măsură ce le faceți clic și le trageți, așa că țineți evidența coordonatelor lor.
+
+✅ Devine mai clar de ce această aplicație este construită cu o închidere mare? Dacă nu ar fi, cum ați menține domeniul pentru fiecare dintre cele 14 plante care pot fi trase?
+
+Completați funcția inițială adăugând încă două manipulări de evenimente pointer sub `pos4 = e.clientY`:
+
+```html
+document.onpointermove = elementDrag;
+document.onpointerup = stopElementDrag;
+```
+Acum indicați că doriți ca planta să fie trasă împreună cu pointerul pe măsură ce o mutați și ca gestul de tragere să se oprească atunci când deselectați planta. `onpointermove` și `onpointerup` fac parte din același API ca `onpointerdown`. Interfața va arunca erori acum, deoarece nu ați definit încă funcțiile `elementDrag` și `stopElementDrag`, așa că construiți-le în continuare.
+
+## Funcțiile elementDrag și stopElementDrag
+
+Veți completa închiderea adăugând încă două funcții interne care vor gestiona ce se întâmplă când trageți o plantă și când opriți tragerea acesteia. Comportamentul dorit este ca să puteți trage orice plantă în orice moment și să o plasați oriunde pe ecran. Această interfață este destul de nepretențioasă (nu există o zonă de plasare, de exemplu) pentru a vă permite să proiectați terrarium-ul exact așa cum vă place, adăugând, eliminând și repoziționând plantele.
+
+### Sarcină
+
+Adăugați funcția `elementDrag` imediat după acolada închisă a funcției `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';
+}
+```
+În această funcție, faceți multe modificări ale pozițiilor inițiale 1-4 pe care le-ați setat ca variabile locale în funcția exterioară. Ce se întâmplă aici?
+
+Pe măsură ce trageți, reasignați `pos1` făcându-l egal cu `pos3` (pe care l-ați setat mai devreme ca `e.clientX`) minus valoarea curentă `e.clientX`. Faceți o operațiune similară pentru `pos2`. Apoi, resetați `pos3` și `pos4` la noile coordonate X și Y ale elementului. Puteți urmări aceste schimbări în consolă pe măsură ce trageți. Apoi, manipulați stilul CSS al plantei pentru a-i seta noua poziție pe baza noilor poziții ale `pos1` și `pos2`, calculând coordonatele X și Y ale plantei pe baza comparării decalajului său cu aceste noi poziții.
+
+> `offsetTop` și `offsetLeft` sunt proprietăți CSS care setează poziția unui element pe baza celei a părintelui său; părintele său poate fi orice element care nu este poziționat ca `static`. 
+
+Toate aceste recalculări ale poziționării vă permit să ajustați fin comportamentul terrarium-ului și al plantelor sale.
+
+### Sarcină 
+
+Ultima sarcină pentru a completa interfața este să adăugați funcția `stopElementDrag` după acolada închisă a funcției `elementDrag`:
+
+```javascript
+function stopElementDrag() {
+	document.onpointerup = null;
+	document.onpointermove = null;
+}
+```
+
+Această funcție mică resetează evenimentele `onpointerup` și `onpointermove`, astfel încât să puteți fie să reluați progresul plantei voastre începând să o trageți din nou, fie să începeți să trageți o plantă nouă.
+
+✅ Ce se întâmplă dacă nu setați aceste evenimente la null?
+
+Acum ați finalizat proiectul vostru!
+
+🥇Felicitări! Ați terminat terrarium-ul vostru frumos. ![terrarium finalizat](../../../../translated_images/terrarium-final.0920f16e87c13a84cd2b553a5af9a3ad1cffbd41fbf8ce715d9e9c43809a5e2c.ro.png)
+
+---
+
+## 🚀Provocare
+
+Adăugați un nou handler de evenimente în închiderea voastră pentru a face ceva mai mult cu plantele; de exemplu, faceți dublu clic pe o plantă pentru a o aduce în față. Fiți creativi!
+
+## Chestionar Post-Lecție
+
+[Chestionar post-lecție](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/20)
+
+## Recapitulare & Studiu Individual
+
+Deși tragerea elementelor pe ecran pare trivială, există multe moduri de a face acest lucru și multe capcane, în funcție de efectul pe care îl căutați. De fapt, există un întreg [API de tragere și plasare](https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_API) pe care îl puteți încerca. Nu l-am folosit în acest modul deoarece efectul pe care l-am dorit a fost oarecum diferit, dar încercați acest API pe propriul proiect și vedeți ce puteți realiza.
+
+Găsiți mai multe informații despre evenimentele pointer pe [documentația W3C](https://www.w3.org/TR/pointerevents1/) și pe [documentația web MDN](https://developer.mozilla.org/docs/Web/API/Pointer_events).
+
+Verificați întotdeauna capabilitățile browserului folosind [CanIUse.com](https://caniuse.com/).
+
+## Temă
+
+[Lucrați puțin mai mult cu DOM-ul](assignment.md)
+
+---
+
+**Declinare de responsabilitate**:  
+Acest document a fost tradus folosind serviciul de traducere AI [Co-op Translator](https://github.com/Azure/co-op-translator). Deși ne străduim să asigurăm acuratețea, vă rugăm să fiți conștienți că traducerile automate pot conține erori sau inexactități. Documentul original în limba sa natală ar trebui considerat sursa autoritară. Pentru informații critice, se recomandă traducerea profesională realizată de un specialist uman. Nu ne asumăm responsabilitatea pentru eventualele neînțelegeri sau interpretări greșite care pot apărea din utilizarea acestei traduceri.
\ No newline at end of file
diff --git a/translations/ro/3-terrarium/3-intro-to-DOM-and-closures/assignment.md b/translations/ro/3-terrarium/3-intro-to-DOM-and-closures/assignment.md
new file mode 100644
index 00000000..8bf19cd6
--- /dev/null
+++ b/translations/ro/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:04:03+00:00",
+  "source_file": "3-terrarium/3-intro-to-DOM-and-closures/assignment.md",
+  "language_code": "ro"
+}
+-->
+# Lucrează puțin mai mult cu DOM-ul
+
+## Instrucțiuni
+
+Studiază DOM-ul mai în detaliu prin 'adoptarea' unui element DOM. Vizitează [lista interfețelor DOM](https://developer.mozilla.org/docs/Web/API/Document_Object_Model) de pe MDN și alege una. Găsește un exemplu de utilizare a acesteia pe un site web și scrie o explicație despre cum este folosită.
+
+## Criterii de evaluare
+
+| Criterii | Exemplară                                     | Adecvată                                         | Necesită îmbunătățiri   |
+| -------- | --------------------------------------------- | ------------------------------------------------ | ----------------------- |
+|          | Paragraful explicativ este prezentat, cu exemplu | Paragraful explicativ este prezentat, fără exemplu | Nu este prezentat niciun paragraf explicativ |
+
+---
+
+**Declinare de responsabilitate**:  
+Acest document a fost tradus folosind serviciul de traducere AI [Co-op Translator](https://github.com/Azure/co-op-translator). Deși ne străduim să asigurăm acuratețea, vă rugăm să rețineți că traducerile automate pot conține erori sau inexactități. Documentul original în limba sa natală ar trebui considerat sursa autoritară. Pentru informații critice, se recomandă traducerea profesională realizată de un specialist uman. Nu ne asumăm responsabilitatea pentru eventualele neînțelegeri sau interpretări greșite care pot apărea din utilizarea acestei traduceri.
\ No newline at end of file
diff --git a/translations/ro/3-terrarium/README.md b/translations/ro/3-terrarium/README.md
new file mode 100644
index 00000000..79c45467
--- /dev/null
+++ b/translations/ro/3-terrarium/README.md
@@ -0,0 +1,45 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "7965cd2bc5dc92ad888dc4c6ab2ab70a",
+  "translation_date": "2025-08-27T21:59:15+00:00",
+  "source_file": "3-terrarium/README.md",
+  "language_code": "ro"
+}
+-->
+# Terrariul Meu: Un proiect pentru a învăța despre HTML, CSS și manipularea DOM folosind JavaScript 🌵🌱
+
+Un mic exercițiu de tip drag and drop. Cu puțin HTML, JS și CSS, vei putea construi o interfață web, să o stilizezi și chiar să adaugi multiple interacțiuni la alegerea ta.
+
+![my terrarium](../../../translated_images/screenshot_gray.0c796099a1f9f25e40aa55ead81f268434c00af30d7092490759945eda63067d.ro.png)
+
+# Lecții
+
+1. [Introducere în HTML](./1-intro-to-html/README.md)
+2. [Introducere în CSS](./2-intro-to-css/README.md)
+3. [Introducere în DOM și JS Closures](./3-intro-to-DOM-and-closures/README.md)
+
+## Credite
+
+Scris cu ♥️ de [Jen Looper](https://www.twitter.com/jenlooper)
+
+Terrariul creat prin CSS a fost inspirat de borcanul de sticlă al lui Jakub Mandra [codepen](https://codepen.io/Rotarepmi/pen/rjpNZY).
+
+Ilustrațiile sunt desenate manual de [Jen Looper](http://jenlooper.com) cu ajutorul Procreate.
+
+## Publică Terrariul Tău
+
+Poți publica terrariul tău pe web folosind Azure Static Web Apps.
+
+1. Clonează acest repo
+
+2. Apasă acest buton
+
+[![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. Parcurge pașii din asistent pentru a crea aplicația ta. Asigură-te că setezi rădăcina aplicației fie la `/solution`, fie la rădăcina codului tău. Această aplicație nu are API, deci nu trebuie să te îngrijorezi în privința adăugării unuia. Un folder GitHub va fi creat în repository-ul clonat, care va ajuta serviciile de build ale Azure Static Web Apps să construiască și să publice aplicația ta la o nouă adresă URL.
+
+---
+
+**Declinare de responsabilitate**:  
+Acest document a fost tradus folosind serviciul de traducere AI [Co-op Translator](https://github.com/Azure/co-op-translator). Deși ne străduim să asigurăm acuratețea, vă rugăm să fiți conștienți că traducerile automate pot conține erori sau inexactități. Documentul original în limba sa natală ar trebui considerat sursa autoritară. Pentru informații critice, se recomandă traducerea profesională realizată de un specialist uman. Nu ne asumăm responsabilitatea pentru eventualele neînțelegeri sau interpretări greșite care pot apărea din utilizarea acestei traduceri.
\ No newline at end of file
diff --git a/translations/ro/3-terrarium/solution/README.md b/translations/ro/3-terrarium/solution/README.md
new file mode 100644
index 00000000..a91f1fe6
--- /dev/null
+++ b/translations/ro/3-terrarium/solution/README.md
@@ -0,0 +1,39 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "6329fbe8bd936068debd78cca6f09c0a",
+  "translation_date": "2025-08-27T22:06:17+00:00",
+  "source_file": "3-terrarium/solution/README.md",
+  "language_code": "ro"
+}
+-->
+# Terariul Meu: Un proiect pentru a învăța despre HTML, CSS și manipularea DOM folosind JavaScript 🌵🌱
+
+Un mic exercițiu de tip drag and drop. Cu puțin HTML, JS și CSS, poți construi o interfață web, să o stilizezi și să adaugi interacțiuni.
+
+![terariul meu](../../../../translated_images/screenshot_gray.0c796099a1f9f25e40aa55ead81f268434c00af30d7092490759945eda63067d.ro.png)
+
+## Credite
+
+Scris cu ♥️ de [Jen Looper](https://www.twitter.com/jenlooper)
+
+Terariul creat prin CSS a fost inspirat de borcanul de sticlă al lui Jakub Mandra [codepen](https://codepen.io/Rotarepmi/pen/rjpNZY).
+
+Ilustrațiile au fost desenate manual de [Jen Looper](http://jenlooper.com) folosind Procreate.
+
+## Publică Terariul Tău
+
+Poți publica terariul tău pe web folosind Azure Static Web Apps.
+
+1. Clonează acest depozit
+
+2. Apasă acest buton
+
+[![Butonul Deploy to Azure](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/?feature.customportal=false&WT.mc_id=academic-77807-sagibbon#create/Microsoft.StaticApp)
+
+3. Parcurge pașii din asistent pentru a-ți crea aplicația. Asigură-te că setezi rădăcina aplicației fie la `/solution`, fie la rădăcina codului tău. Această aplicație nu are un API, deci nu trebuie să te îngrijorezi de acest aspect. Un folder .github va fi creat în depozitul tău clonat, care va ajuta serviciul de build al Azure Static Web Apps să construiască și să publice aplicația ta la o nouă adresă URL.
+
+---
+
+**Declinare de responsabilitate**:  
+Acest document a fost tradus folosind serviciul de traducere AI [Co-op Translator](https://github.com/Azure/co-op-translator). Deși ne străduim să asigurăm acuratețea, vă rugăm să fiți conștienți că traducerile automate pot conține erori sau inexactități. Documentul original în limba sa natală ar trebui considerat sursa autoritară. Pentru informații critice, se recomandă traducerea profesională realizată de un specialist uman. Nu ne asumăm responsabilitatea pentru eventualele neînțelegeri sau interpretări greșite care pot apărea din utilizarea acestei traduceri.
\ No newline at end of file
diff --git a/translations/ro/4-typing-game/README.md b/translations/ro/4-typing-game/README.md
new file mode 100644
index 00000000..137b4ac8
--- /dev/null
+++ b/translations/ro/4-typing-game/README.md
@@ -0,0 +1,44 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "957547b822c40042e07d591c4fbfde4f",
+  "translation_date": "2025-08-27T23:07:31+00:00",
+  "source_file": "4-typing-game/README.md",
+  "language_code": "ro"
+}
+-->
+# Programare bazată pe evenimente - Construiește un joc de tastare
+
+## Introducere
+
+Tastarea este una dintre cele mai subestimate abilități ale unui dezvoltator. Capacitatea de a transfera rapid gândurile din mintea ta în editor permite creativității să curgă liber. Una dintre cele mai bune metode de a învăța este să te joci!
+
+> Așadar, hai să construim un joc de tastare!
+
+Vei folosi abilitățile de JavaScript, HTML și CSS pe care le-ai acumulat până acum pentru a crea un joc de tastare. Jocul va prezenta jucătorului un citat aleatoriu (folosim citate din [Sherlock Holmes](https://en.wikipedia.org/wiki/Sherlock_Holmes)) și va cronometra cât timp îi ia jucătorului să-l tasteze corect. Vei folosi abilitățile de JavaScript, HTML și CSS pe care le-ai acumulat până acum pentru a crea un joc de tastare.
+
+![demo](../../../4-typing-game/images/demo.gif)
+
+## Cerințe preliminare
+
+Această lecție presupune că ești familiarizat cu următoarele concepte:
+
+- Crearea de controale pentru input text și butoane
+- CSS și setarea stilurilor folosind clase
+- Bazele JavaScript
+  - Crearea unui array
+  - Generarea unui număr aleatoriu
+  - Obținerea timpului curent
+
+## Lecție
+
+[Crearea unui joc de tastare folosind programarea bazată pe evenimente](./typing-game/README.md)
+
+## Credite
+
+Scris cu ♥️ de [Christopher Harrison](http://www.twitter.com/geektrainer)
+
+---
+
+**Declinare de responsabilitate**:  
+Acest document a fost tradus folosind serviciul de traducere AI [Co-op Translator](https://github.com/Azure/co-op-translator). Deși ne străduim să asigurăm acuratețea, vă rugăm să fiți conștienți că traducerile automate pot conține erori sau inexactități. Documentul original în limba sa natală ar trebui considerat sursa autoritară. Pentru informații critice, se recomandă traducerea profesională realizată de un specialist uman. Nu ne asumăm responsabilitatea pentru eventualele neînțelegeri sau interpretări greșite care pot apărea din utilizarea acestei traduceri.
\ No newline at end of file
diff --git a/translations/ro/4-typing-game/solution/README.md b/translations/ro/4-typing-game/solution/README.md
new file mode 100644
index 00000000..6718426c
--- /dev/null
+++ b/translations/ro/4-typing-game/solution/README.md
@@ -0,0 +1,15 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "068cbb9b3c10a96d503f6cdd6c9ace8c",
+  "translation_date": "2025-08-27T23:07:53+00:00",
+  "source_file": "4-typing-game/solution/README.md",
+  "language_code": "ro"
+}
+-->
+Acesta este un substitut, lăsat gol în mod intenționat
+
+---
+
+**Declinare de responsabilitate**:  
+Acest document a fost tradus folosind serviciul de traducere AI [Co-op Translator](https://github.com/Azure/co-op-translator). Deși ne străduim să asigurăm acuratețea, vă rugăm să fiți conștienți că traducerile automate pot conține erori sau inexactități. Documentul original în limba sa natală ar trebui considerat sursa autoritară. Pentru informații critice, se recomandă traducerea profesională realizată de un specialist uman. Nu ne asumăm responsabilitatea pentru eventualele neînțelegeri sau interpretări greșite care pot apărea din utilizarea acestei traduceri.
\ No newline at end of file
diff --git a/translations/ro/4-typing-game/typing-game/README.md b/translations/ro/4-typing-game/typing-game/README.md
new file mode 100644
index 00000000..66ebd552
--- /dev/null
+++ b/translations/ro/4-typing-game/typing-game/README.md
@@ -0,0 +1,353 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "e982871b8388c59c22a41b73b5fca70f",
+  "translation_date": "2025-08-27T23:08:06+00:00",
+  "source_file": "4-typing-game/typing-game/README.md",
+  "language_code": "ro"
+}
+-->
+# Crearea unui joc folosind evenimente
+
+## Test înainte de lecție
+
+[Test înainte de lecție](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/21)
+
+## Programare bazată pe evenimente
+
+Când creăm o aplicație bazată pe browser, oferim o interfață grafică (GUI) pentru utilizator, astfel încât să poată interacționa cu ceea ce am construit. Cea mai comună modalitate de a interacționa cu browserul este prin clicuri și tastare în diverse elemente. Provocarea pe care o întâmpinăm ca dezvoltatori este că nu știm când utilizatorul va efectua aceste operațiuni!
+
+[Programarea bazată pe evenimente](https://en.wikipedia.org/wiki/Event-driven_programming) este denumirea tipului de programare pe care trebuie să o folosim pentru a crea GUI-ul. Dacă analizăm puțin această expresie, vedem că cuvântul cheie este **eveniment**. [Eveniment](https://www.merriam-webster.com/dictionary/event), conform Merriam-Webster, este definit ca "ceva care se întâmplă". Aceasta descrie perfect situația noastră. Știm că ceva se va întâmpla și dorim să executăm un cod ca răspuns, dar nu știm când va avea loc.
+
+Modalitatea prin care marcăm o secțiune de cod pe care dorim să o executăm este prin crearea unei funcții. Când ne gândim la [programarea procedurală](https://en.wikipedia.org/wiki/Procedural_programming), funcțiile sunt apelate într-o ordine specifică. Același lucru este valabil și pentru programarea bazată pe evenimente. Diferența constă în **modul** în care funcțiile vor fi apelate.
+
+Pentru a gestiona evenimentele (clicuri pe butoane, tastare etc.), înregistrăm **ascultători de evenimente**. Un ascultător de evenimente este o funcție care ascultă un eveniment și se execută ca răspuns. Ascultătorii de evenimente pot actualiza interfața, pot face apeluri către server sau orice altceva necesar ca răspuns la acțiunea utilizatorului. Adăugăm un ascultător de evenimente folosind [addEventListener](https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener) și furnizând o funcție de executat.
+
+> **NOTE:** Merită menționat că există numeroase modalități de a crea ascultători de evenimente. Poți folosi funcții anonime sau poți crea funcții denumite. Poți utiliza diverse scurtături, cum ar fi setarea proprietății `click` sau utilizarea `addEventListener`. În exercițiul nostru, ne vom concentra pe `addEventListener` și funcțiile anonime, deoarece aceasta este probabil cea mai comună tehnică folosită de dezvoltatorii web. Este, de asemenea, cea mai flexibilă, deoarece `addEventListener` funcționează pentru toate evenimentele, iar numele evenimentului poate fi furnizat ca parametru.
+
+### Evenimente comune
+
+Există [zeci de evenimente](https://developer.mozilla.org/docs/Web/Events) disponibile pentru a fi ascultate atunci când creezi o aplicație. Practic, orice acțiune a utilizatorului pe o pagină generează un eveniment, ceea ce îți oferă multă putere pentru a asigura experiența dorită. Din fericire, de obicei vei avea nevoie doar de câteva evenimente. Iată câteva dintre cele mai comune (inclusiv cele pe care le vom folosi pentru a crea jocul nostru):
+
+- [click](https://developer.mozilla.org/docs/Web/API/Element/click_event): Utilizatorul a dat clic pe ceva, de obicei un buton sau un hyperlink
+- [contextmenu](https://developer.mozilla.org/docs/Web/API/Element/contextmenu_event): Utilizatorul a dat clic dreapta
+- [select](https://developer.mozilla.org/docs/Web/API/Element/select_event): Utilizatorul a selectat un text
+- [input](https://developer.mozilla.org/docs/Web/API/Element/input_event): Utilizatorul a introdus un text
+
+## Crearea jocului
+
+Vom crea un joc pentru a explora modul în care funcționează evenimentele în JavaScript. Jocul nostru va testa abilitățile de tastare ale unui jucător, una dintre cele mai subestimate abilități pe care toți dezvoltatorii ar trebui să le aibă. Ar trebui să exersăm cu toții tastarea! Fluxul general al jocului va arăta astfel:
+
+- Jucătorul dă clic pe butonul de start și i se afișează un citat de tastat
+- Jucătorul tastează citatul cât de repede poate într-o casetă de text
+  - Pe măsură ce fiecare cuvânt este completat, următorul este evidențiat
+  - Dacă jucătorul face o greșeală, caseta de text devine roșie
+  - Când jucătorul completează citatul, se afișează un mesaj de succes cu timpul scurs
+
+Să construim jocul și să învățăm despre evenimente!
+
+### Structura fișierelor
+
+Vom avea nevoie de trei fișiere: **index.html**, **script.js** și **style.css**. Să le configurăm pentru a ne ușura munca.
+
+- Creează un folder nou pentru proiectul tău deschizând o fereastră de consolă sau terminal și executând următoarea comandă:
+
+```bash
+# Linux or macOS
+mkdir typing-game && cd typing-game
+
+# Windows
+md typing-game && cd typing-game
+```
+
+- Deschide Visual Studio Code
+
+```bash
+code .
+```
+
+- Adaugă trei fișiere în folderul din Visual Studio Code cu următoarele nume:
+  - index.html
+  - script.js
+  - style.css
+
+## Crearea interfeței utilizatorului
+
+Dacă analizăm cerințele, știm că vom avea nevoie de câteva elemente pe pagina HTML. Este ca o rețetă, unde avem nevoie de ingrediente:
+
+- Un loc pentru afișarea citatului pe care utilizatorul trebuie să-l tasteze
+- Un loc pentru afișarea mesajelor, cum ar fi un mesaj de succes
+- O casetă de text pentru tastare
+- Un buton de start
+
+Fiecare dintre acestea va avea nevoie de ID-uri pentru a putea lucra cu ele în JavaScript. Vom adăuga, de asemenea, referințe la fișierele CSS și JavaScript pe care le vom crea.
+
+Creează un fișier nou numit **index.html**. Adaugă următorul cod 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>
+```
+
+### Lansarea aplicației
+
+Este întotdeauna bine să dezvolți iterativ pentru a vedea cum arată lucrurile. Să lansăm aplicația. Există o extensie minunată pentru Visual Studio Code numită [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) care va găzdui aplicația local și va reîmprospăta browserul de fiecare dată când salvezi.
+
+- Instalează [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) urmând linkul și făcând clic pe **Install**
+  - Browserul te va solicita să deschizi Visual Studio Code, iar apoi Visual Studio Code te va solicita să efectuezi instalarea
+  - Repornește Visual Studio Code dacă este necesar
+- După instalare, în Visual Studio Code, apasă Ctrl-Shift-P (sau Cmd-Shift-P) pentru a deschide paleta de comenzi
+- Tastează **Live Server: Open with Live Server**
+  - Live Server va începe să găzduiască aplicația
+- Deschide un browser și navighează la **https://localhost:5500**
+- Acum ar trebui să vezi pagina pe care ai creat-o!
+
+Să adăugăm funcționalitate.
+
+## Adăugarea CSS-ului
+
+Cu HTML-ul creat, să adăugăm CSS-ul pentru stilizarea de bază. Trebuie să evidențiem cuvântul pe care jucătorul ar trebui să-l tasteze și să colorăm caseta de text dacă ceea ce a tastat este incorect. Vom face acest lucru cu două clase.
+
+Creează un fișier nou numit **style.css** și adaugă următoarea sintaxă.
+
+```css
+/* inside style.css */
+.highlight {
+  background-color: yellow;
+}
+
+.error {
+  background-color: lightcoral;
+  border: red;
+}
+```
+
+✅ În ceea ce privește CSS-ul, poți să-ți aranjezi pagina cum dorești. Petrece puțin timp pentru a face pagina mai atractivă:
+
+- Alege un font diferit
+- Colorează anteturile
+- Redimensionează elementele
+
+## JavaScript
+
+Cu interfața creată, este timpul să ne concentrăm pe JavaScript, care va oferi logica. Vom împărți acest proces în câțiva pași:
+
+- [Crearea constantelor](../../../../4-typing-game/typing-game)
+- [Ascultător de evenimente pentru a începe jocul](../../../../4-typing-game/typing-game)
+- [Ascultător de evenimente pentru tastare](../../../../4-typing-game/typing-game)
+
+Dar mai întâi, creează un fișier nou numit **script.js**.
+
+### Adăugarea constantelor
+
+Vom avea nevoie de câteva elemente pentru a ne ușura munca de programare. Din nou, similar cu o rețetă, iată de ce avem nevoie:
+
+- Un array cu lista tuturor citatelor
+- Un array gol pentru a stoca toate cuvintele din citatul curent
+- Un spațiu pentru a stoca indexul cuvântului pe care jucătorul îl tastează în prezent
+- Timpul la care jucătorul a dat clic pe start
+
+Vom avea nevoie și de referințe la elementele UI:
+
+- Caseta de text (**typed-value**)
+- Afișarea citatului (**quote**)
+- Mesajul (**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');
+```
+
+✅ Adaugă mai multe citate în jocul tău
+
+> **NOTE:** Putem recupera elementele oricând dorim în cod folosind `document.getElementById`. Deoarece vom face referire la aceste elemente în mod regulat, vom evita greșelile de tipar cu literale de șiruri folosind constante. Framework-uri precum [Vue.js](https://vuejs.org/) sau [React](https://reactjs.org/) te pot ajuta să gestionezi mai bine centralizarea codului.
+
+Petrece un minut pentru a viziona un videoclip despre utilizarea `const`, `let` și `var`.
+
+[![Tipuri de variabile](https://img.youtube.com/vi/JNIXfGiDWM8/0.jpg)](https://youtube.com/watch?v=JNIXfGiDWM8 "Tipuri de variabile")
+
+> 🎥 Fă clic pe imaginea de mai sus pentru un videoclip despre variabile.
+
+### Adăugarea logicii de start
+
+Pentru a începe jocul, jucătorul va da clic pe start. Desigur, nu știm când va face acest lucru. Aici intervine un [ascultător de evenimente](https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener). Un ascultător de evenimente ne va permite să ascultăm ceva care se întâmplă (un eveniment) și să executăm cod ca răspuns. În cazul nostru, dorim să executăm cod atunci când utilizatorul dă clic pe start.
+
+Când utilizatorul dă clic pe **start**, trebuie să selectăm un citat, să configurăm interfața utilizatorului și să configurăm urmărirea cuvântului curent și a timpului. Mai jos este JavaScript-ul pe care trebuie să-l adaugi; discutăm despre el imediat după blocul de cod.
+
+```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();
+});
+```
+
+Să analizăm codul!
+
+- Configurarea urmăririi cuvintelor
+  - Utilizarea [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) ne permite să selectăm aleatoriu un citat din array-ul `quotes`
+  - Convertim `quote` într-un array de `words` pentru a putea urmări cuvântul pe care jucătorul îl tastează în prezent
+  - `wordIndex` este setat la 0, deoarece jucătorul va începe cu primul cuvânt
+- Configurarea interfeței utilizatorului
+  - Creăm un array de `spanWords`, care conține fiecare cuvânt într-un element `span`
+    - Acest lucru ne va permite să evidențiem cuvântul pe afișaj
+  - `join` array-ul pentru a crea un șir pe care îl putem folosi pentru a actualiza `innerHTML` pe `quoteElement`
+    - Acest lucru va afișa citatul jucătorului
+  - Setăm `className` al primului element `span` la `highlight` pentru a-l evidenția ca galben
+  - Curățăm `messageElement` setând `innerText` la `''`
+- Configurarea casetei de text
+  - Golim `value` curent pe `typedValueElement`
+  - Setăm `focus` pe `typedValueElement`
+- Pornim cronometrul apelând `getTime`
+
+### Adăugarea logicii de tastare
+
+Pe măsură ce jucătorul tastează, se va genera un eveniment `input`. Acest ascultător de evenimente va verifica dacă jucătorul tastează corect cuvântul și va gestiona starea curentă a jocului. Revenind la **script.js**, adaugă următorul cod la final. Îl vom analiza imediat după.
+
+```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';
+  }
+});
+```
+
+Să analizăm codul! Începem prin a prelua cuvântul curent și valoarea pe care jucătorul a tastat-o până acum. Apoi avem o logică în cascadă, unde verificăm dacă citatul este complet, cuvântul este complet, cuvântul este corect sau (în final), dacă există o eroare.
+
+- Citatul este complet, indicat de faptul că `typedValue` este egal cu `currentWord`, iar `wordIndex` este egal cu unul mai puțin decât `length` al `words`
+  - Calculăm `elapsedTime` scăzând `startTime` din timpul curent
+  - Împărțim `elapsedTime` la 1.000 pentru a converti din milisecunde în secunde
+  - Afișăm un mesaj de succes
+- Cuvântul este complet, indicat de faptul că `typedValue` se termină cu un spațiu (sfârșitul unui cuvânt) și `typedValue` este egal cu `currentWord`
+  - Setăm `value` pe `typedElement` la `''` pentru a permite tastarea următorului cuvânt
+  - Incrementăm `wordIndex` pentru a trece la următorul cuvânt
+  - Parcurgem toți `childNodes` ai `quoteElement` pentru a seta `className` la `''` pentru a reveni la afișajul implicit
+  - Setăm `className` al cuvântului curent la `highlight` pentru a-l marca ca următorul cuvânt de tastat
+- Cuvântul este tastat corect (dar nu complet), indicat de faptul că `currentWord` începe cu `typedValue`
+  - Asigurăm afișarea implicită a `typedValueElement` prin golirea `className`
+- Dacă am ajuns până aici, avem o eroare
+  - Setăm `className` pe `typedValueElement` la `error`
+
+## Testarea aplicației
+
+Ai ajuns la final! Ultimul pas este să te asiguri că aplicația funcționează. Încearcă! Nu te îngrijora dacă apar erori; **toți dezvoltatorii** au erori. Examinează mesajele și depanează după cum este necesar.
+
+Dă clic pe **start** și începe să tastezi! Ar trebui să arate puțin ca animația pe care am văzut-o înainte.
+
+![Animație a jocului în acțiune](../../../../4-typing-game/images/demo.gif)
+
+---
+
+## 🚀 Provocare
+
+Adaugă mai multă funcționalitate
+
+- Dezactivează ascultătorul de evenimente `input` la finalizare și reactivează-l când se apasă butonul
+- Dezactivează caseta de text când jucătorul completează citatul
+- Afișează o casetă de dialog modală cu mesajul de succes
+- Stochează scorurile mari folosind [localStorage](https://developer.mozilla.org/docs/Web/API/Window/localStorage)
+
+## Chestionar de după curs
+
+[Chestionar de după curs](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/22)
+
+## Recapitulare și Studiu Individual
+
+Citește despre [toate evenimentele disponibile](https://developer.mozilla.org/docs/Web/Events) pentru dezvoltatori prin intermediul browserului web și gândește-te la scenariile în care ai folosi fiecare dintre ele.
+
+## Temă
+
+[Creează un nou joc de tastatură](assignment.md)
+
+---
+
+**Declinare de responsabilitate**:  
+Acest document a fost tradus folosind serviciul de traducere AI [Co-op Translator](https://github.com/Azure/co-op-translator). Deși ne străduim să asigurăm acuratețea, vă rugăm să fiți conștienți că traducerile automate pot conține erori sau inexactități. Documentul original în limba sa natală ar trebui considerat sursa autoritară. Pentru informații critice, se recomandă traducerea profesională realizată de un specialist uman. Nu ne asumăm responsabilitatea pentru eventualele neînțelegeri sau interpretări greșite care pot apărea din utilizarea acestei traduceri.
\ No newline at end of file
diff --git a/translations/ro/4-typing-game/typing-game/assignment.md b/translations/ro/4-typing-game/typing-game/assignment.md
new file mode 100644
index 00000000..1706280e
--- /dev/null
+++ b/translations/ro/4-typing-game/typing-game/assignment.md
@@ -0,0 +1,26 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "de5384c118e15e4d1d0eaa00fc01b112",
+  "translation_date": "2025-08-27T23:10:19+00:00",
+  "source_file": "4-typing-game/typing-game/assignment.md",
+  "language_code": "ro"
+}
+-->
+# Creează un nou joc de tastatură
+
+## Instrucțiuni
+
+Creează un joc mic care folosește evenimentele tastaturii pentru a realiza sarcini. Poate fi un alt tip de joc de tastare sau un joc artistic care desenează pixeli pe ecran la apăsarea tastelor. Fii creativ!
+
+## Criterii de evaluare
+
+| Criterii | Exemplu de excelență     | Adecvat                  | Necesită îmbunătățiri |
+| -------- | ------------------------ | ------------------------ | --------------------- |
+|          | Este prezentat un joc complet | Jocul este foarte minimal | Jocul are erori       |
+|          |                          |                          |                       |
+
+---
+
+**Declinare de responsabilitate**:  
+Acest document a fost tradus folosind serviciul de traducere AI [Co-op Translator](https://github.com/Azure/co-op-translator). Deși ne străduim să asigurăm acuratețea, vă rugăm să rețineți că traducerile automate pot conține erori sau inexactități. Documentul original în limba sa natală ar trebui considerat sursa autoritară. Pentru informații critice, se recomandă traducerea profesională realizată de un specialist uman. Nu ne asumăm responsabilitatea pentru eventualele neînțelegeri sau interpretări greșite care pot apărea din utilizarea acestei traduceri.
\ No newline at end of file
diff --git a/translations/ro/5-browser-extension/1-about-browsers/README.md b/translations/ro/5-browser-extension/1-about-browsers/README.md
new file mode 100644
index 00000000..18700557
--- /dev/null
+++ b/translations/ro/5-browser-extension/1-about-browsers/README.md
@@ -0,0 +1,182 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "0bb55e0b98600afab801eea115228873",
+  "translation_date": "2025-08-27T22:45:42+00:00",
+  "source_file": "5-browser-extension/1-about-browsers/README.md",
+  "language_code": "ro"
+}
+-->
+# Proiect de Extensie pentru Browser Partea 1: Totul despre Browsere
+
+![Browser sketchnote](../../../../translated_images/browser.60317c9be8b7f84adce43e30bff8d47a1ae15793beab762317b2bc6b74337c1a.ro.jpg)
+> Sketchnote de [Wassim Chegham](https://dev.to/wassimchegham/ever-wondered-what-happens-when-you-type-in-a-url-in-an-address-bar-in-a-browser-3dob)
+
+## Chestionar Pre-Lecție
+
+[Chestionar pre-lecție](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/23)
+
+### Introducere
+
+Extensiile pentru browser adaugă funcționalități suplimentare unui browser. Dar înainte de a construi una, ar trebui să înveți puțin despre cum funcționează browserele.
+
+### Despre browser
+
+În această serie de lecții, vei învăța cum să construiești o extensie pentru browser care va funcționa pe browserele Chrome, Firefox și Edge. În această parte, vei descoperi cum funcționează browserele și vei schița elementele extensiei pentru browser.
+
+Dar ce este exact un browser? Este o aplicație software care permite unui utilizator final să acceseze conținut de pe un server și să îl afișeze pe pagini web.
+
+✅ Un pic de istorie: primul browser s-a numit 'WorldWideWeb' și a fost creat de Sir Timothy Berners-Lee în 1990.
+
+![early browsers](../../../../translated_images/earlybrowsers.d984b711cdf3a42ddac919d46c4b5ca7232f68ccfbd81395e04e5a64c0015277.ro.jpg)
+> Câteva browsere timpurii, via [Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing)
+
+Când un utilizator se conectează la internet folosind o adresă URL (Uniform Resource Locator), de obicei utilizând Hypertext Transfer Protocol printr-o adresă `http` sau `https`, browserul comunică cu un server web și preia o pagină web.
+
+În acest moment, motorul de randare al browserului o afișează pe dispozitivul utilizatorului, care poate fi un telefon mobil, un desktop sau un laptop.
+
+Browserele au, de asemenea, capacitatea de a memora în cache conținutul, astfel încât să nu fie necesar să fie preluat de pe server de fiecare dată. Ele pot înregistra istoricul activității de navigare a utilizatorului, pot stoca 'cookies', care sunt mici fragmente de date ce conțin informații utilizate pentru a înregistra activitatea utilizatorului, și multe altele.
+
+Un lucru foarte important de reținut despre browsere este că nu toate sunt la fel! Fiecare browser are punctele sale forte și slăbiciuni, iar un dezvoltator web profesionist trebuie să înțeleagă cum să facă paginile web să funcționeze bine pe mai multe browsere. Acest lucru include gestionarea ecranelor mici, cum ar fi cele ale telefoanelor mobile, precum și a utilizatorilor care sunt offline.
+
+Un site web foarte util pe care ar trebui să-l salvezi în marcajele browserului tău preferat este [caniuse.com](https://www.caniuse.com). Când construiești pagini web, este foarte util să folosești listele de tehnologii suportate de caniuse pentru a-ți sprijini cel mai bine utilizatorii.
+
+✅ Cum poți afla ce browsere sunt cele mai populare în rândul utilizatorilor site-ului tău web? Verifică-ți analizele - poți instala diverse pachete de analiză ca parte a procesului tău de dezvoltare web, iar acestea îți vor spune ce browsere sunt cele mai utilizate de utilizatori.
+
+## Extensii pentru browser
+
+De ce ai vrea să construiești o extensie pentru browser? Este un instrument util pe care îl poți atașa browserului tău atunci când ai nevoie de acces rapid la sarcini pe care le repeți frecvent. De exemplu, dacă ai nevoie să verifici culorile pe diversele pagini web cu care interacționezi, ai putea instala o extensie pentru browser care include un selector de culori. Dacă ai dificultăți în a-ți aminti parolele, ai putea folosi o extensie pentru gestionarea parolelor.
+
+Extensiile pentru browser sunt și distractiv de dezvoltat. Ele tind să gestioneze un număr finit de sarcini pe care le îndeplinesc bine.
+
+✅ Care sunt extensiile tale preferate pentru browser? Ce sarcini îndeplinesc?
+
+### Instalarea extensiilor
+
+Înainte de a începe să construiești, aruncă o privire asupra procesului de construire și implementare a unei extensii pentru browser. Deși fiecare browser diferă puțin în modul în care gestionează această sarcină, procesul este similar pe Chrome și Firefox cu acest exemplu pe Edge:
+
+![captură de ecran a browserului Edge care arată pagina edge://extensions deschisă și meniul de setări deschis](../../../../translated_images/install-on-edge.d68781acaf0b3d3dada8b7507cde7a64bf74b7040d9818baaa9070668e819f90.ro.png)
+
+> Notă: Asigură-te că activezi modul dezvoltator și permiți extensii din alte magazine.
+
+În esență, procesul va fi:
+
+- construiește extensia folosind `npm run build` 
+- navighează în browser la panoul de extensii folosind butonul "Setări și altele" (pictograma `...`) din colțul din dreapta sus
+- dacă este o instalare nouă, alege `load unpacked` pentru a încărca o extensie nouă din folderul său de build (în cazul nostru este `/dist`) 
+- sau, apasă `reload` dacă reîncarci extensia deja instalată
+
+✅ Aceste instrucțiuni se referă la extensiile pe care le construiești tu; pentru a instala extensii care au fost lansate în magazinul de extensii al browserului asociat fiecărui browser, ar trebui să navighezi la acele [magazine](https://microsoftedge.microsoft.com/addons/Microsoft-Edge-Extensions-Home) și să instalezi extensia dorită.
+
+### Începe
+
+Vei construi o extensie pentru browser care afișează amprenta de carbon a regiunii tale, arătând consumul de energie al regiunii tale și sursa energiei. Extensia va avea un formular care colectează o cheie API pentru a putea accesa API-ul CO2 Signal.
+
+**Ai nevoie de:**
+
+- [o cheie API](https://www.co2signal.com/); introdu adresa ta de email în caseta de pe această pagină și vei primi una
+- [codul regiunii tale](http://api.electricitymap.org/v3/zones) corespunzător [Electricity Map](https://www.electricitymap.org/map) (în Boston, de exemplu, folosesc 'US-NEISO').
+- [codul de început](../../../../5-browser-extension/start). Descarcă folderul `start`; vei completa codul în acest folder.
+- [NPM](https://www.npmjs.com) - NPM este un instrument de gestionare a pachetelor; instalează-l local și pachetele listate în fișierul tău `package.json` vor fi instalate pentru a fi utilizate de activele tale web
+
+✅ Află mai multe despre gestionarea pachetelor în acest [excelent modul de învățare](https://docs.microsoft.com/learn/modules/create-nodejs-project-dependencies/?WT.mc_id=academic-77807-sagibbon)
+
+Acordă-ți un minut pentru a analiza baza de cod:
+
+dist
+    -|manifest.json (setările implicite sunt aici)
+    -|index.html (markup-ul HTML pentru front-end este aici)
+    -|background.js (JS-ul de fundal este aici)
+    -|main.js (JS-ul compilat)
+src
+    -|index.js (codul tău JS merge aici)
+
+✅ Odată ce ai la îndemână cheia API și codul regiunii, salvează-le undeva într-o notă pentru utilizare ulterioară.
+
+### Construiește HTML-ul pentru extensie
+
+Această extensie are două vizualizări. Una pentru a colecta cheia API și codul regiunii:
+
+![captură de ecran a extensiei finalizate deschise într-un browser, afișând un formular cu câmpuri pentru numele regiunii și cheia API.](../../../../translated_images/1.b6da8c1394b07491afeb6b2a8e5aca73ebd3cf478e27bcc9aeabb187e722648e.ro.png)
+
+Și a doua pentru a afișa consumul de carbon al regiunii:
+
+![captură de ecran a extensiei finalizate afișând valorile pentru consumul de carbon și procentajul combustibililor fosili pentru regiunea US-NEISO.](../../../../translated_images/2.1dae52ff0804224692cd648afbf2342955d7afe3b0101b617268130dfb427f55.ro.png)
+
+Să începem prin a construi HTML-ul pentru formular și să-l stilizăm cu CSS.
+
+În folderul `/dist`, vei construi un formular și o zonă de rezultate. În fișierul `index.html`, completează zona delimitată a formularului:
+
+```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>	
+```
+Acesta este formularul unde informațiile salvate vor fi introduse și salvate în stocarea locală.
+
+Apoi, creează zona de rezultate; sub ultimul tag de formular, adaugă câteva div-uri:
+
+```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>
+```
+În acest moment, poți încerca un build. Asigură-te că instalezi dependențele pachetelor acestei extensii:
+
+```
+npm install
+```
+
+Această comandă va folosi npm, Managerul de Pachete Node, pentru a instala webpack pentru procesul de construire al extensiei tale. Poți vedea rezultatul acestui proces uitându-te în `/dist/main.js` - vei vedea că codul a fost compilat.
+
+Deocamdată, extensia ar trebui să se construiască și, dacă o implementezi în Edge ca extensie, vei vedea un formular afișat frumos.
+
+Felicitări, ai făcut primii pași spre construirea unei extensii pentru browser. În lecțiile următoare, o vei face mai funcțională și mai utilă.
+
+---
+
+## 🚀 Provocare
+
+Aruncă o privire într-un magazin de extensii pentru browser și instalează una în browserul tău. Poți examina fișierele sale în moduri interesante. Ce descoperi?
+
+## Chestionar Post-Lecție
+
+[Chestionar post-lecție](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/24)
+
+## Recapitulare & Studiu Individual
+
+În această lecție ai învățat puțin despre istoria browserului web; profită de această ocazie pentru a învăța despre cum au imaginat inventatorii World Wide Web utilizarea sa citind mai multe despre istoria sa. Câteva site-uri utile includ:
+
+[Istoria Browserelor Web](https://www.mozilla.org/firefox/browsers/browser-history/)
+
+[Istoria Web-ului](https://webfoundation.org/about/vision/history-of-the-web/)
+
+[Un interviu cu Tim Berners-Lee](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)
+
+## Temă
+
+[Restilizează extensia ta](assignment.md)
+
+---
+
+**Declinare de responsabilitate**:  
+Acest document a fost tradus folosind serviciul de traducere AI [Co-op Translator](https://github.com/Azure/co-op-translator). Deși ne străduim să asigurăm acuratețea, vă rugăm să fiți conștienți că traducerile automate pot conține erori sau inexactități. Documentul original în limba sa natală ar trebui considerat sursa autoritară. Pentru informații critice, se recomandă traducerea profesională realizată de oameni. Nu ne asumăm responsabilitatea pentru eventualele neînțelegeri sau interpretări greșite care pot apărea din utilizarea acestei traduceri.
\ No newline at end of file
diff --git a/translations/ro/5-browser-extension/1-about-browsers/assignment.md b/translations/ro/5-browser-extension/1-about-browsers/assignment.md
new file mode 100644
index 00000000..b25b26a4
--- /dev/null
+++ b/translations/ro/5-browser-extension/1-about-browsers/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "e3c6f2a03c2336e60412612d870af547",
+  "translation_date": "2025-08-27T22:47:21+00:00",
+  "source_file": "5-browser-extension/1-about-browsers/assignment.md",
+  "language_code": "ro"
+}
+-->
+# Restilizează extensia ta
+
+## Instrucțiuni
+
+Codul sursă pentru această extensie vine complet cu stiluri, dar nu ești obligat să le folosești; personalizează extensia ta restilizând-o prin editarea fișierului său css.
+
+## Criterii de evaluare
+
+| Criteriu | Exemplu                                      | Adecvate              | Necesită îmbunătățiri |
+| -------- | -------------------------------------------- | --------------------- | --------------------- |
+|          | Codul este trimis cu stiluri noi funcționale | Stilizarea este incompletă | Stilurile sunt defecte |
+
+---
+
+**Declinarea responsabilității**:  
+Acest document a fost tradus folosind serviciul de traducere AI [Co-op Translator](https://github.com/Azure/co-op-translator). Deși depunem eforturi pentru a asigura acuratețea, vă rugăm să rețineți că traducerile automate pot conține erori sau inexactități. Documentul original în limba sa nativă ar trebui considerat sursa autoritară. Pentru informații critice, se recomandă traducerea profesională realizată de un specialist uman. Nu ne asumăm răspunderea pentru eventualele neînțelegeri sau interpretări greșite care pot apărea din utilizarea acestei traduceri.
\ No newline at end of file
diff --git a/translations/ro/5-browser-extension/2-forms-browsers-local-storage/README.md b/translations/ro/5-browser-extension/2-forms-browsers-local-storage/README.md
new file mode 100644
index 00000000..0341b705
--- /dev/null
+++ b/translations/ro/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:41:55+00:00",
+  "source_file": "5-browser-extension/2-forms-browsers-local-storage/README.md",
+  "language_code": "ro"
+}
+-->
+# Proiect Extensie de Browser Partea 2: Apelează un API, folosește Local Storage
+
+## Chestionar înainte de lecție
+
+[Chestionar înainte de lecție](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/25)
+
+### Introducere
+
+În această lecție, vei apela un API prin trimiterea formularului extensiei tale de browser și vei afișa rezultatele în extensie. În plus, vei învăța cum să stochezi date în local storage-ul browserului pentru referințe și utilizări viitoare.
+
+✅ Urmează segmentele numerotate din fișierele corespunzătoare pentru a ști unde să plasezi codul tău.
+
+### Configurează elementele pentru manipulare în extensie:
+
+Până acum, ai construit HTML-ul pentru formular și `<div>`-ul de rezultate al extensiei tale de browser. De acum înainte, va trebui să lucrezi în fișierul `/src/index.js` și să construiești extensia pas cu pas. Consultă [lecția anterioară](../1-about-browsers/README.md) pentru a-ți configura proiectul și pentru procesul de construire.
+
+Lucrând în fișierul `index.js`, începe prin a crea câteva variabile `const` pentru a reține valorile asociate diferitelor câmpuri:
+
+```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');
+```
+
+Toate aceste câmpuri sunt referite prin clasa CSS, așa cum ai configurat-o în HTML în lecția anterioară.
+
+### Adaugă ascultători de evenimente
+
+În continuare, adaugă ascultători de evenimente pentru formular și butonul de resetare care resetează formularul, astfel încât, dacă un utilizator trimite formularul sau apasă pe butonul de resetare, să se întâmple ceva. Adaugă și apelul pentru inițializarea aplicației la finalul fișierului:
+
+```JavaScript
+form.addEventListener('submit', (e) => handleSubmit(e));
+clearBtn.addEventListener('click', (e) => reset(e));
+init();
+```
+
+✅ Observă prescurtarea folosită pentru a asculta un eveniment de submit sau click și cum evenimentul este transmis funcțiilor handleSubmit sau reset. Poți scrie echivalentul acestei prescurtări într-un format mai lung? Care variantă îți place mai mult?
+
+### Construiește funcțiile init() și reset():
+
+Acum vei construi funcția care inițializează extensia, numită 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();
+}
+
+```
+
+În această funcție există o logică interesantă. Citind-o, poți vedea ce se întâmplă?
+
+- se configurează două `const` pentru a verifica dacă utilizatorul a stocat un APIKey și un cod de regiune în local storage.
+- dacă oricare dintre acestea este null, afișează formularul schimbând stilul său pentru a fi afișat ca 'block'.
+- ascunde zona de rezultate, mesajul de încărcare și butonul clearBtn și setează orice text de eroare ca fiind gol.
+- dacă există o cheie și o regiune, începe o rutină pentru:
+  - a apela API-ul pentru a obține date despre utilizarea carbonului
+  - a ascunde zona de rezultate
+  - a ascunde formularul
+  - a afișa butonul de resetare
+
+Înainte de a merge mai departe, este util să înveți despre un concept foarte important disponibil în browsere: [LocalStorage](https://developer.mozilla.org/docs/Web/API/Window/localStorage). LocalStorage este o modalitate utilă de a stoca șiruri de caractere în browser sub forma unei perechi `cheie-valoare`. Acest tip de stocare web poate fi manipulat prin JavaScript pentru a gestiona datele în browser. LocalStorage nu expiră, în timp ce SessionStorage, un alt tip de stocare web, este șters când browserul este închis. Diferitele tipuri de stocare au avantaje și dezavantaje în utilizarea lor.
+
+> Notă - extensia ta de browser are propriul local storage; fereastra principală a browserului este o instanță diferită și se comportă separat.
+
+Setezi APIKey pentru a avea o valoare de tip șir, de exemplu, și poți vedea că este setată în Edge prin "inspectarea" unei pagini web (poți face clic dreapta pe un browser pentru a inspecta) și mergând la fila Applications pentru a vedea stocarea.
+
+![Panoul de local storage](../../../../translated_images/localstorage.472f8147b6a3f8d141d9551c95a2da610ac9a3c6a73d4a1c224081c98bae09d9.ro.png)
+
+✅ Gândește-te la situații în care NU ai dori să stochezi anumite date în LocalStorage. În general, plasarea cheilor API în LocalStorage este o idee proastă! Poți vedea de ce? În cazul nostru, deoarece aplicația noastră este pur educativă și nu va fi publicată într-un magazin de aplicații, vom folosi această metodă.
+
+Observă că folosești Web API pentru a manipula LocalStorage, fie prin `getItem()`, `setItem()`, fie prin `removeItem()`. Este larg suportat în browsere.
+
+Înainte de a construi funcția `displayCarbonUsage()` care este apelată în `init()`, să construim funcționalitatea pentru gestionarea trimiterii inițiale a formularului.
+
+### Gestionează trimiterea formularului
+
+Creează o funcție numită `handleSubmit` care acceptă un argument de eveniment `(e)`. Oprește propagarea evenimentului (în acest caz, dorim să oprim browserul din a se reîmprospăta) și apelează o nouă funcție, `setUpUser`, transmițând argumentele `apiKey.value` și `region.value`. În acest fel, folosești cele două valori care sunt aduse prin formularul inițial atunci când câmpurile corespunzătoare sunt completate.
+
+```JavaScript
+function handleSubmit(e) {
+	e.preventDefault();
+	setUpUser(apiKey.value, region.value);
+}
+```
+
+✅ Reîmprospătează-ți memoria - HTML-ul pe care l-ai configurat în lecția anterioară are două câmpuri de intrare ale căror `valori` sunt capturate prin `const`-urile pe care le-ai configurat la începutul fișierului, și ambele sunt `required`, astfel încât browserul oprește utilizatorii din a introduce valori nule.
+
+### Configurează utilizatorul
+
+Trecând la funcția `setUpUser`, aici setezi valorile local storage pentru apiKey și regionName. Adaugă o nouă funcție:
+
+```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);
+}
+```
+
+Această funcție setează un mesaj de încărcare pentru a fi afișat în timp ce API-ul este apelat. În acest moment, ai ajuns la crearea celei mai importante funcții ale acestei extensii de browser!
+
+### Afișează utilizarea carbonului
+
+În cele din urmă, este timpul să interoghezi API-ul!
+
+Înainte de a merge mai departe, ar trebui să discutăm despre API-uri. API-urile, sau [Interfețele de Programare a Aplicațiilor](https://www.webopedia.com/TERM/A/API.html), sunt un element critic în trusa de instrumente a unui dezvoltator web. Ele oferă modalități standard pentru programe de a interacționa și de a comunica între ele. De exemplu, dacă construiești un site web care trebuie să interogheze o bază de date, cineva ar putea să fi creat un API pe care să-l folosești. Deși există multe tipuri de API-uri, unul dintre cele mai populare este un [API REST](https://www.smashingmagazine.com/2018/01/understanding-using-rest-api/).
+
+✅ Termenul 'REST' înseamnă 'Transfer de Stare Reprezentativă' și implică utilizarea unor URL-uri configurate diferit pentru a obține date. Fă puțină cercetare despre diferitele tipuri de API-uri disponibile pentru dezvoltatori. Ce format ți se pare atractiv?
+
+Există lucruri importante de remarcat despre această funcție. În primul rând, observă cuvântul cheie [`async`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/async_function). Scrierea funcțiilor astfel încât să ruleze asincron înseamnă că acestea așteaptă finalizarea unei acțiuni, cum ar fi returnarea datelor, înainte de a continua.
+
+Iată un videoclip rapid despre `async`:
+
+[![Async și Await pentru gestionarea promisiunilor](https://img.youtube.com/vi/YwmlRkrxvkk/0.jpg)](https://youtube.com/watch?v=YwmlRkrxvkk "Async și Await pentru gestionarea promisiunilor")
+
+> 🎥 Fă clic pe imaginea de mai sus pentru un videoclip despre async/await.
+
+Creează o nouă funcție pentru a interoga API-ul 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.';
+	}
+}
+```
+
+Aceasta este o funcție mare. Ce se întâmplă aici?
+
+- urmând cele mai bune practici, folosești cuvântul cheie `async` pentru a face ca această funcție să se comporte asincron. Funcția conține un bloc `try/catch`, deoarece va returna o promisiune atunci când API-ul returnează date. Deoarece nu ai control asupra vitezei cu care API-ul va răspunde (s-ar putea să nu răspundă deloc!), trebuie să gestionezi această incertitudine apelându-l asincron.
+- interoghezi API-ul co2signal pentru a obține datele regiunii tale, folosind cheia ta API. Pentru a folosi acea cheie, trebuie să folosești un tip de autentificare în parametrii antetului.
+- odată ce API-ul răspunde, atribui diferite elemente ale datelor de răspuns părților ecranului pe care le-ai configurat pentru a afișa aceste date.
+- dacă există o eroare sau dacă nu există niciun rezultat, afișezi un mesaj de eroare.
+
+✅ Utilizarea modelelor de programare asincronă este un alt instrument foarte util în trusa ta de instrumente. Citește [despre diferitele moduri](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/async_function) în care poți configura acest tip de cod.
+
+Felicitări! Dacă construiești extensia (`npm run build`) și o reîmprospătezi în panoul extensiilor, ai o extensie funcțională! Singurul lucru care nu funcționează este pictograma, iar acest lucru îl vei rezolva în lecția următoare.
+
+---
+
+## 🚀 Provocare
+
+Am discutat despre mai multe tipuri de API până acum în aceste lecții. Alege un API web și cercetează în detaliu ce oferă. De exemplu, aruncă o privire la API-urile disponibile în browsere, cum ar fi [HTML Drag and Drop API](https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_API). Ce face ca un API să fie grozav, în opinia ta?
+
+## Chestionar după lecție
+
+[Chestionar după lecție](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/26)
+
+## Recapitulare și studiu individual
+
+Ai învățat despre LocalStorage și API-uri în această lecție, ambele foarte utile pentru un dezvoltator web profesionist. Poți să te gândești cum funcționează aceste două lucruri împreună? Gândește-te cum ai arhitectura un site web care ar stoca elemente pentru a fi utilizate de un API.
+
+## Temă
+
+[Adoptă un API](assignment.md)
+
+---
+
+**Declinare de responsabilitate**:  
+Acest document a fost tradus folosind serviciul de traducere AI [Co-op Translator](https://github.com/Azure/co-op-translator). Deși ne străduim să asigurăm acuratețea, vă rugăm să fiți conștienți că traducerile automate pot conține erori sau inexactități. Documentul original în limba sa natală ar trebui considerat sursa autoritară. Pentru informații critice, se recomandă traducerea profesională realizată de un specialist uman. Nu ne asumăm responsabilitatea pentru eventualele neînțelegeri sau interpretări greșite care pot apărea din utilizarea acestei traduceri.
\ No newline at end of file
diff --git a/translations/ro/5-browser-extension/2-forms-browsers-local-storage/assignment.md b/translations/ro/5-browser-extension/2-forms-browsers-local-storage/assignment.md
new file mode 100644
index 00000000..6832d94e
--- /dev/null
+++ b/translations/ro/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:44:54+00:00",
+  "source_file": "5-browser-extension/2-forms-browsers-local-storage/assignment.md",
+  "language_code": "ro"
+}
+-->
+# Adoptă un API
+
+## Instrucțiuni
+
+APIs pot fi foarte distractive de utilizat. Iată o [listă cu multe API-uri gratuite](https://github.com/public-apis/public-apis). Alege un API și construiește o extensie de browser care rezolvă o problemă. Poate fi o problemă mică, cum ar fi lipsa suficientă de poze cu animale de companie (așadar, încearcă [dog CEO API](https://dog.ceo/dog-api/)) sau ceva mai mare - distrează-te!
+
+## Criterii de evaluare
+
+| Criteriu | Exemplară                                                                  | Adecvat                                 | Necesită îmbunătățiri   |
+| -------- | -------------------------------------------------------------------------- | ---------------------------------------- | ----------------------- |
+|          | O extensie completă de browser este trimisă folosind un API din lista de mai sus | O extensie parțială de browser este trimisă | Trimiterea conține erori |
+
+---
+
+**Declinare de responsabilitate**:  
+Acest document a fost tradus folosind serviciul de traducere AI [Co-op Translator](https://github.com/Azure/co-op-translator). Deși ne străduim să asigurăm acuratețea, vă rugăm să fiți conștienți că traducerile automate pot conține erori sau inexactități. Documentul original în limba sa natală ar trebui considerat sursa autoritară. Pentru informații critice, se recomandă traducerea profesională realizată de un specialist uman. Nu ne asumăm responsabilitatea pentru eventualele neînțelegeri sau interpretări greșite care pot apărea din utilizarea acestei traduceri.
\ No newline at end of file
diff --git a/translations/ro/5-browser-extension/3-background-tasks-and-performance/README.md b/translations/ro/5-browser-extension/3-background-tasks-and-performance/README.md
new file mode 100644
index 00000000..5a4d4ebf
--- /dev/null
+++ b/translations/ro/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:48:07+00:00",
+  "source_file": "5-browser-extension/3-background-tasks-and-performance/README.md",
+  "language_code": "ro"
+}
+-->
+# Proiect Extensie de Browser Partea 3: Învață despre Sarcini de Fundal și Performanță
+
+## Chestionar Pre-Lecție
+
+[Chestionar pre-lecție](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/27)
+
+### Introducere
+
+În ultimele două lecții ale acestui modul, ai învățat cum să construiești un formular și o zonă de afișare pentru datele preluate de la un API. Este o metodă foarte standard de a crea o prezență web. Ai învățat chiar și cum să gestionezi preluarea datelor în mod asincron. Extensia ta de browser este aproape completă.
+
+Mai rămâne să gestionezi câteva sarcini de fundal, inclusiv actualizarea culorii pictogramei extensiei, așa că acesta este un moment excelent pentru a discuta despre modul în care browserul gestionează acest tip de sarcini. Să ne gândim la aceste sarcini ale browserului în contextul performanței resurselor tale web pe măsură ce le construiești.
+
+## Bazele Performanței Web
+
+> "Performanța unui site web se referă la două lucruri: cât de repede se încarcă pagina și cât de repede rulează codul de pe ea." -- [Zack Grossbart](https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/)
+
+Subiectul despre cum să faci site-urile tale extrem de rapide pe toate tipurile de dispozitive, pentru toți utilizatorii, în toate situațiile, este, fără surpriză, vast. Iată câteva puncte de luat în considerare pe măsură ce construiești fie un proiect web standard, fie o extensie de browser.
+
+Primul lucru pe care trebuie să-l faci pentru a te asigura că site-ul tău funcționează eficient este să colectezi date despre performanța sa. Primul loc unde poți face acest lucru este în instrumentele de dezvoltare ale browserului tău web. În Edge, poți selecta butonul "Setări și altele" (pictograma cu trei puncte din colțul din dreapta sus al browserului), apoi navighează la Mai Multe Instrumente > Instrumente de Dezvoltare și deschide fila Performanță. De asemenea, poți folosi combinațiile de taste `Ctrl` + `Shift` + `I` pe Windows sau `Option` + `Command` + `I` pe Mac pentru a deschide instrumentele de dezvoltare.
+
+Fila Performanță conține un instrument de Profilare. Deschide un site web (încearcă, de exemplu, [https://www.microsoft.com](https://www.microsoft.com/?WT.mc_id=academic-77807-sagibbon)) și apasă butonul 'Record', apoi reîmprospătează site-ul. Oprește înregistrarea în orice moment și vei putea vedea rutinele generate pentru 'script', 'render' și 'paint' ale site-ului:
+
+![Profiler Edge](../../../../translated_images/profiler.5a4a62479c5df01cfec9aab74173dba13f91d2c968e1a1ae434c26165792df15.ro.png)
+
+✅ Vizitează [Documentația Microsoft](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) despre panoul Performanță în Edge
+
+> Sfat: pentru a obține o citire precisă a timpului de pornire al site-ului tău, golește memoria cache a browserului
+
+Selectează elemente din cronologia profilului pentru a mări evenimentele care se întâmplă în timp ce pagina ta se încarcă.
+
+Obține o imagine de ansamblu a performanței paginii tale selectând o parte din cronologia profilului și uitându-te la panoul de rezumat:
+
+![Snapshot profiler Edge](../../../../translated_images/snapshot.97750180ebcad73794a3594b36925eb5c8dbaac9e03fec7f9b974188c9ac63c7.ro.png)
+
+Verifică panoul Jurnal de Evenimente pentru a vedea dacă vreun eveniment a durat mai mult de 15 ms:
+
+![Jurnal de evenimente Edge](../../../../translated_images/log.804026979f3707e00eebcfa028b2b5a88cec6292f858767bb6703afba65a7d9c.ro.png)
+
+✅ Familiarizează-te cu instrumentul de profilare! Deschide instrumentele de dezvoltare pe acest site și vezi dacă există blocaje. Care este resursa care se încarcă cel mai lent? Dar cea mai rapidă?
+
+## Verificări de profilare
+
+În general, există câteva "zone problematice" pe care fiecare dezvoltator web ar trebui să le urmărească atunci când construiește un site pentru a evita surprizele neplăcute în momentul în care acesta este lansat în producție.
+
+**Dimensiunile resurselor**: Web-ul a devenit mai 'greu' și, prin urmare, mai lent, în ultimii ani. O parte din această greutate are legătură cu utilizarea imaginilor.
+
+✅ Răsfoiește [Arhiva Internetului](https://httparchive.org/reports/page-weight) pentru o perspectivă istorică asupra greutății paginilor și multe altele.
+
+O practică bună este să te asiguri că imaginile tale sunt optimizate și livrate la dimensiunea și rezoluția potrivită pentru utilizatorii tăi.
+
+**Traversări DOM**: Browserul trebuie să construiască Modelul Obiectului Documentului (DOM) pe baza codului pe care îl scrii, așa că este în interesul unei performanțe bune a paginii să păstrezi etichetele la minimum, folosind și stilizând doar ceea ce este necesar pentru pagină. În acest sens, CSS-ul excesiv asociat unei pagini ar putea fi optimizat; stilurile care trebuie utilizate doar pe o pagină nu trebuie incluse în foaia de stil principală, de exemplu.
+
+**JavaScript**: Fiecare dezvoltator JavaScript ar trebui să fie atent la scripturile care blochează randarea și care trebuie încărcate înainte ca restul DOM-ului să poată fi traversat și afișat în browser. Ia în considerare utilizarea `defer` cu scripturile tale inline (așa cum se face în modulul Terrarium).
+
+✅ Încearcă câteva site-uri pe un [site de testare a vitezei](https://www.webpagetest.org/) pentru a afla mai multe despre verificările comune care se fac pentru a determina performanța site-ului.
+
+Acum că ai o idee despre cum browserul afișează resursele pe care le trimiți, să analizăm ultimele câteva lucruri pe care trebuie să le faci pentru a finaliza extensia:
+
+### Creează o funcție pentru calcularea culorii
+
+Lucrând în `/src/index.js`, adaugă o funcție numită `calculateColor()` după seria de variabile `const` pe care le-ai setat pentru a avea acces la 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 } });
+}
+```
+
+Ce se întâmplă aici? Transmiți o valoare (intensitatea carbonului) din apelul API pe care l-ai finalizat în lecția anterioară, iar apoi calculezi cât de aproape este valoarea sa de indexul prezentat în array-ul de culori. Apoi trimiți acea valoare de culoare cea mai apropiată către runtime-ul Chrome.
+
+Runtime-ul Chrome are [un API](https://developer.chrome.com/extensions/runtime) care gestionează tot felul de sarcini de fundal, iar extensia ta profită de acest lucru:
+
+> "Folosește API-ul chrome.runtime pentru a prelua pagina de fundal, a returna detalii despre manifest și a asculta și răspunde la evenimente în ciclul de viață al aplicației sau extensiei. De asemenea, poți folosi acest API pentru a converti calea relativă a URL-urilor în URL-uri complet calificate."
+
+✅ Dacă dezvolți această extensie de browser pentru Edge, s-ar putea să te surprindă faptul că folosești un API Chrome. Versiunile mai noi ale browserului Edge rulează pe motorul browserului Chromium, așa că poți profita de aceste instrumente.
+
+> Notă: dacă vrei să profilezi o extensie de browser, lansează instrumentele de dezvoltare din interiorul extensiei, deoarece aceasta este propria sa instanță separată de browser.
+
+### Setează o culoare implicită pentru pictogramă
+
+Acum, în funcția `init()`, setează pictograma să fie generic verde la început, apelând din nou acțiunea `updateIcon` a Chrome:
+
+```JavaScript
+chrome.runtime.sendMessage({
+	action: 'updateIcon',
+		value: {
+			color: 'green',
+		},
+});
+```
+
+### Apelează funcția, execută apelul
+
+În continuare, apelează funcția pe care tocmai ai creat-o adăugând-o la promisiunea returnată de API-ul C02Signal:
+
+```JavaScript
+//let CO2...
+calculateColor(CO2);
+```
+
+Și, în final, în `/dist/background.js`, adaugă ascultătorul pentru aceste apeluri de acțiuni de fundal:
+
+```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);
+}
+```
+
+În acest cod, adaugi un ascultător pentru orice mesaje care ajung la managerul de sarcini de fundal. Dacă este numit 'updateIcon', atunci următorul cod este rulat pentru a desena o pictogramă de culoarea corespunzătoare folosind API-ul Canvas.
+
+✅ Vei învăța mai multe despre API-ul Canvas în [lecțiile despre Jocul Spațial](../../6-space-game/2-drawing-to-canvas/README.md).
+
+Acum, reconstruiește extensia (`npm run build`), reîmprospătează și lansează extensia și urmărește cum se schimbă culoarea. Este un moment bun să faci o plimbare sau să speli vasele? Acum știi!
+
+Felicitări, ai construit o extensie de browser utilă și ai învățat mai multe despre cum funcționează browserul și cum să-i profilezi performanța.
+
+---
+
+## 🚀 Provocare
+
+Investighează câteva site-uri open source care există de mult timp și, pe baza istoricului lor de pe GitHub, vezi dacă poți determina cum au fost optimizate de-a lungul anilor pentru performanță, dacă au fost optimizate. Care este cel mai comun punct sensibil?
+
+## Chestionar Post-Lecție
+
+[Chestionar post-lecție](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/28)
+
+## Recapitulare & Studiu Individual
+
+Ia în considerare abonarea la un [newsletter despre performanță](https://perf.email/)
+
+Investighează câteva dintre modurile în care browserele evaluează performanța web uitându-te prin filele de performanță din instrumentele lor web. Găsești diferențe majore?
+
+## Temă
+
+[Analizează un site pentru performanță](assignment.md)
+
+---
+
+**Declinare de responsabilitate**:  
+Acest document a fost tradus folosind serviciul de traducere AI [Co-op Translator](https://github.com/Azure/co-op-translator). Deși ne străduim să asigurăm acuratețea, vă rugăm să rețineți că traducerile automate pot conține erori sau inexactități. Documentul original în limba sa maternă ar trebui considerat sursa autoritară. Pentru informații critice, se recomandă traducerea profesională realizată de un specialist uman. Nu ne asumăm responsabilitatea pentru eventualele neînțelegeri sau interpretări greșite care pot apărea din utilizarea acestei traduceri.
\ No newline at end of file
diff --git a/translations/ro/5-browser-extension/3-background-tasks-and-performance/assignment.md b/translations/ro/5-browser-extension/3-background-tasks-and-performance/assignment.md
new file mode 100644
index 00000000..66504604
--- /dev/null
+++ b/translations/ro/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:50:33+00:00",
+  "source_file": "5-browser-extension/3-background-tasks-and-performance/assignment.md",
+  "language_code": "ro"
+}
+-->
+# Analizează un site pentru performanță
+
+Oferă un raport detaliat al unui site web, evidențiind zonele unde performanța este problematică. Analizează de ce site-ul este lent și ce ai putea face pentru a-l accelera. Nu te baza doar pe instrumentele browserului, ci cercetează și alte instrumente care pot ajuta la realizarea raportului.
+
+## Criterii de evaluare
+
+| Criterii | Exemplu                                                                                                   | Adecvat                     | Necesită îmbunătățiri         |
+| -------- | --------------------------------------------------------------------------------------------------------- | --------------------------- | ----------------------------- |
+|          | Este prezentat un raport cu detalii obținute nu doar din instrumentele browserului, ci și din instrumente terțe, dacă sunt disponibile | Este prezentat un raport de bază | Este prezentat un raport minimal |
+
+---
+
+**Declinare de responsabilitate**:  
+Acest document a fost tradus folosind serviciul de traducere AI [Co-op Translator](https://github.com/Azure/co-op-translator). Deși ne străduim să asigurăm acuratețea, vă rugăm să rețineți că traducerile automate pot conține erori sau inexactități. Documentul original în limba sa maternă ar trebui considerat sursa autoritară. Pentru informații critice, se recomandă traducerea profesională realizată de un specialist uman. Nu ne asumăm responsabilitatea pentru eventualele neînțelegeri sau interpretări greșite care pot apărea din utilizarea acestei traduceri.
\ No newline at end of file
diff --git a/translations/ro/5-browser-extension/README.md b/translations/ro/5-browser-extension/README.md
new file mode 100644
index 00000000..6642a6e1
--- /dev/null
+++ b/translations/ro/5-browser-extension/README.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "b121a279a6ab39878491f3e572673515",
+  "translation_date": "2025-08-27T22:40:56+00:00",
+  "source_file": "5-browser-extension/README.md",
+  "language_code": "ro"
+}
+-->
+# Construirea unei extensii de browser
+
+Construirea extensiilor de browser este o modalitate distractivă și interesantă de a analiza performanța aplicațiilor tale în timp ce creezi un alt tip de resursă web. Acest modul include lecții despre cum funcționează browserele și cum să implementezi o extensie de browser, cum să construiești un formular, să apelezi un API, să folosești stocarea locală și cum să evaluezi performanța site-ului tău web și să o îmbunătățești.
+
+Vei construi o extensie de browser care funcționează pe Edge, Chrome și Firefox. Această extensie, care este ca un mini site web adaptat pentru o sarcină foarte specifică, verifică [C02 Signal API](https://www.co2signal.com) pentru utilizarea energiei electrice și intensitatea carbonului într-o anumită regiune și oferă o evaluare a amprentei de carbon a regiunii respective.
+
+Extensia poate fi utilizată ad hoc de către un utilizator, odată ce o cheie API și un cod de regiune sunt introduse într-un formular, pentru a determina utilizarea locală a energiei electrice și, astfel, pentru a oferi date care pot influența deciziile utilizatorului legate de consumul de energie. De exemplu, poate fi preferabil să amâni utilizarea unui uscător de haine (o activitate intensă din punct de vedere al emisiilor de carbon) în timpul unei perioade de consum ridicat de energie electrică în regiunea ta.
+
+### Subiecte
+
+1. [Despre browser](1-about-browsers/README.md)
+2. [Formulare și stocare locală](2-forms-browsers-local-storage/README.md)
+3. [Sarcini de fundal și performanță](3-background-tasks-and-performance/README.md)
+
+### Credite
+
+![o extensie de browser verde](../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.ro.png)
+
+## Credite
+
+Ideea pentru acest declanșator de carbon web a fost oferită de Asim Hussain, lider la Microsoft al echipei Green Cloud Advocacy și autor al [Green Principles](https://principles.green/). Inițial, a fost un [proiect de site web](https://github.com/jlooper/green).
+
+Structura extensiei de browser a fost influențată de [extensia COVID a lui Adebola Adeniran](https://github.com/onedebos/covtension).
+
+Conceptul din spatele sistemului de pictograme „dot” a fost sugerat de structura pictogramelor din extensia de browser [Energy Lollipop](https://energylollipop.com/) pentru emisiile din California.
+
+Aceste lecții au fost scrise cu ♥️ de [Jen Looper](https://www.twitter.com/jenlooper)
+
+---
+
+**Declinare de responsabilitate**:  
+Acest document a fost tradus folosind serviciul de traducere AI [Co-op Translator](https://github.com/Azure/co-op-translator). Deși ne străduim să asigurăm acuratețea, vă rugăm să fiți conștienți că traducerile automate pot conține erori sau inexactități. Documentul original în limba sa maternă ar trebui considerat sursa autoritară. Pentru informații critice, se recomandă traducerea profesională realizată de un specialist uman. Nu ne asumăm responsabilitatea pentru eventualele neînțelegeri sau interpretări greșite care pot apărea din utilizarea acestei traduceri.
\ No newline at end of file
diff --git a/translations/ro/5-browser-extension/solution/README.md b/translations/ro/5-browser-extension/solution/README.md
new file mode 100644
index 00000000..fbc51a1d
--- /dev/null
+++ b/translations/ro/5-browser-extension/solution/README.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "fab4e6b4f0efcd587a9029d82991f597",
+  "translation_date": "2025-08-27T22:50:55+00:00",
+  "source_file": "5-browser-extension/solution/README.md",
+  "language_code": "ro"
+}
+-->
+# Extensia de Browser Carbon Trigger: Cod Complet
+
+Folosind API-ul C02 Signal de la tmrow pentru a monitoriza consumul de electricitate, construiește o extensie de browser care să îți ofere un memento direct în browser despre cât de intens este consumul de electricitate în regiunea ta. Utilizarea acestei extensii ad hoc te va ajuta să iei decizii informate cu privire la activitățile tale, bazându-te pe aceste informații.
+
+![captură de ecran a extensiei](../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.ro.png)
+
+## Începe
+
+Va trebui să ai [npm](https://npmjs.com) instalat. Descarcă o copie a acestui cod într-un folder de pe computerul tău.
+
+Instalează toate pachetele necesare:
+
+```
+npm install
+```
+
+Construiește extensia folosind webpack:
+
+```
+npm run build
+```
+
+Pentru a instala pe Edge, folosește meniul cu „trei puncte” din colțul din dreapta sus al browserului pentru a găsi panoul Extensii. De acolo, selectează „Load Unpacked” pentru a încărca o extensie nouă. La prompt, deschide folderul „dist” și extensia va fi încărcată. Pentru a o utiliza, vei avea nevoie de o cheie API pentru API-ul CO2 Signal ([obține una aici prin email](https://www.co2signal.com/) - introdu adresa ta de email în caseta de pe această pagină) și de [codul pentru regiunea ta](http://api.electricitymap.org/v3/zones) corespunzător [Electricity Map](https://www.electricitymap.org/map) (de exemplu, în Boston, folosesc „US-NEISO”).
+
+![instalare](../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.ro.png)
+
+Odată ce cheia API și regiunea sunt introduse în interfața extensiei, punctul colorat din bara extensiei browserului ar trebui să se schimbe pentru a reflecta consumul de energie din regiunea ta și să îți ofere o sugestie despre ce activități consumatoare de energie ar fi potrivite să le desfășori. Conceptul din spatele acestui sistem cu „punct” mi-a fost inspirat de [extensia Energy Lollipop](https://energylollipop.com/) pentru emisiile din California.
+
+---
+
+**Declinare de responsabilitate**:  
+Acest document a fost tradus folosind serviciul de traducere AI [Co-op Translator](https://github.com/Azure/co-op-translator). Deși ne străduim să asigurăm acuratețea, vă rugăm să fiți conștienți că traducerile automate pot conține erori sau inexactități. Documentul original în limba sa natală ar trebui considerat sursa autoritară. Pentru informații critice, se recomandă traducerea profesională realizată de un specialist uman. Nu ne asumăm responsabilitatea pentru eventualele neînțelegeri sau interpretări greșite care pot apărea din utilizarea acestei traduceri.
\ No newline at end of file
diff --git a/translations/ro/5-browser-extension/solution/translation/README.es.md b/translations/ro/5-browser-extension/solution/translation/README.es.md
new file mode 100644
index 00000000..517a8b04
--- /dev/null
+++ b/translations/ro/5-browser-extension/solution/translation/README.es.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "cbaf73f94a9ab4c680a10ef871e92948",
+  "translation_date": "2025-08-27T22:51:26+00:00",
+  "source_file": "5-browser-extension/solution/translation/README.es.md",
+  "language_code": "ro"
+}
+-->
+# Extensia de browser Carbon Trigger: Cod complet
+
+Folosind API-ul CO2 Signal de la tmrow pentru a urmări consumul de electricitate, creează o extensie de browser care să îți ofere un memento direct în browser despre consumul de electricitate din regiunea ta. Utilizarea acestei extensii ad hoc te va ajuta să iei decizii legate de activitățile tale bazându-te pe aceste informații.
+
+![captură de ecran extensie](../../../../../translated_images/extension-screenshot.352c4c3ba54e4041ad2f6af749d562cc5705f527b5826efd53d11c3528f5ae45.ro.png)
+
+## Început
+
+Va trebui să ai instalat [npm](https://npmjs.com). Descarcă o copie a acestui cod într-un folder de pe calculatorul tău.
+
+Instalează toate pachetele necesare:
+
+```
+npm install
+```
+
+Construiește extensia folosind webpack:
+
+```
+npm run build
+```
+
+Pentru a instala în Edge, folosește meniul cu 'trei puncte' din colțul din dreapta sus al browserului pentru a găsi panoul Extensii. De acolo, selectează 'Încărcare neambalată' pentru a adăuga o extensie nouă. Deschide folderul 'dist' când ți se cere, iar extensia va fi încărcată. Pentru a o utiliza, vei avea nevoie de o cheie API pentru API-ul CO2 Signal ([obține una aici prin e-mail](https://www.co2signal.com/) - introdu adresa ta de e-mail în câmpul de pe această pagină) și de [codul pentru regiunea ta](http://api.electricitymap.org/v3/zones) corespunzător [Hărții Electricității](https://www.electricitymap.org/map) (în Boston, de exemplu, folosesc 'US-NEISO').
+
+![instalare](../../../../../translated_images/install-on-edge.8bd0ee3ca7dcda1c5334b5195603a43c864e3b38d088b03d57376d25e77b9459.ro.png)
+
+Odată ce cheia API și regiunea sunt introduse în interfața extensiei, punctul colorat din bara extensiei browserului ar trebui să se schimbe pentru a reflecta consumul de energie din regiunea ta și să îți ofere un indicator despre activitățile cu consum mare de energie care ar fi potrivite pentru tine. Conceptul din spatele acestui sistem de "puncte" mi-a fost inspirat de [extensia Energy Lollipop](https://energylollipop.com/) pentru emisiile din California.
+
+---
+
+**Declinare de responsabilitate**:  
+Acest document a fost tradus folosind serviciul de traducere AI [Co-op Translator](https://github.com/Azure/co-op-translator). Deși ne străduim să asigurăm acuratețea, vă rugăm să rețineți că traducerile automate pot conține erori sau inexactități. Documentul original în limba sa natală ar trebui considerat sursa autoritară. Pentru informații critice, se recomandă traducerea profesională realizată de un specialist uman. Nu ne asumăm responsabilitatea pentru eventualele neînțelegeri sau interpretări greșite care pot apărea din utilizarea acestei traduceri.
\ No newline at end of file
diff --git a/translations/ro/5-browser-extension/solution/translation/README.fr.md b/translations/ro/5-browser-extension/solution/translation/README.fr.md
new file mode 100644
index 00000000..fde2b75f
--- /dev/null
+++ b/translations/ro/5-browser-extension/solution/translation/README.fr.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "9361268ca430b2579375009e1eceb5e5",
+  "translation_date": "2025-08-27T22:53:02+00:00",
+  "source_file": "5-browser-extension/solution/translation/README.fr.md",
+  "language_code": "ro"
+}
+-->
+# Extensia de browser Carbon Trigger: Cod finalizat
+
+Folosind API-ul C02 Signal de la tmrow pentru a monitoriza consumul de electricitate, creați o extensie de browser care să vă ofere un memento direct în browser despre consumul de electricitate din regiunea dumneavoastră. Utilizarea acestei extensii vă va ajuta să luați decizii informate cu privire la activitățile dumneavoastră pe baza acestor informații.
+
+![captură extensie](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.ro.png)
+
+## Început
+
+Trebuie să aveți [npm](https://npmjs.com) instalat. Descărcați o copie a acestui cod într-un folder de pe computerul dumneavoastră.
+
+Instalați toate pachetele necesare:
+
+```
+npm install
+```
+
+Construiți extensia folosind webpack:
+
+```
+npm run build
+```
+
+Pentru a instala pe Edge, utilizați meniul „trei puncte” din colțul din dreapta sus al browserului pentru a găsi panoul Extensii. De acolo, selectați „Încarcă extensia necomprimată” pentru a adăuga o extensie nouă. Deschideți folderul „dist” la solicitare, iar extensia va fi încărcată. Pentru a o utiliza, veți avea nevoie de o cheie API pentru API-ul CO2 Signal ([obțineți una prin e-mail aici](https://www.co2signal.com/) - introduceți adresa de e-mail în câmpul de pe această pagină) și de [codul pentru regiunea dumneavoastră](http://api.electricitymap.org/v3/zones) corespunzător [Hărții electricității](https://www.electricitymap.org/map) (de exemplu, în Boston, folosesc „US-NEISO”).
+
+![instalare](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.ro.png)
+
+După ce introduceți cheia API și regiunea în interfața extensiei, punctul colorat din bara extensiei browserului ar trebui să se schimbe pentru a reflecta consumul de energie din regiunea dumneavoastră și să vă ofere un indicator despre activitățile consumatoare de energie pe care ar fi potrivit să le desfășurați. Conceptul din spatele acestui sistem de „puncte” mi-a fost inspirat de [extensia Energy Lollipop](https://energylollipop.com/) pentru emisiile din California.
+
+---
+
+**Declinare de responsabilitate**:  
+Acest document a fost tradus folosind serviciul de traducere AI [Co-op Translator](https://github.com/Azure/co-op-translator). Deși ne străduim să asigurăm acuratețea, vă rugăm să fiți conștienți că traducerile automate pot conține erori sau inexactități. Documentul original în limba sa natală ar trebui considerat sursa autoritară. Pentru informații critice, se recomandă traducerea profesională realizată de un specialist uman. Nu ne asumăm responsabilitatea pentru eventualele neînțelegeri sau interpretări greșite care pot apărea din utilizarea acestei traduceri.
\ No newline at end of file
diff --git a/translations/ro/5-browser-extension/solution/translation/README.hi.md b/translations/ro/5-browser-extension/solution/translation/README.hi.md
new file mode 100644
index 00000000..313992c6
--- /dev/null
+++ b/translations/ro/5-browser-extension/solution/translation/README.hi.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "dd58ae1b7707034f055718c1b68bc8de",
+  "translation_date": "2025-08-27T22:51:57+00:00",
+  "source_file": "5-browser-extension/solution/translation/README.hi.md",
+  "language_code": "ro"
+}
+-->
+# Extensia de browser Carbon Trigger: Cod finalizat
+
+Folosind API-ul CO2 Signal de la tmrow pentru a urmări consumul de energie electrică, această extensie de browser vă oferă un memento despre cât de intens este consumul de energie electrică în zona dumneavoastră. Utilizarea acestei extensii vă poate ajuta să luați decizii informate cu privire la activitățile dumneavoastră, pe baza acestor informații.
+
+![Captură de ecran a extensiei](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.ro.png)
+
+## Începeți
+
+Trebuie să aveți instalat [npm](https://npmjs.com). Descărcați o copie a acestui cod într-un folder de pe computerul dumneavoastră.
+
+Instalați toate pachetele necesare:
+
+```
+npm install
+```
+
+Construiți extensia folosind webpack:
+
+```
+npm run build
+```
+
+Pentru a instala pe Edge, utilizați meniul „trei puncte” din colțul din dreapta sus al browserului pentru a găsi panoul de extensii. De acolo, selectați „Load unpacked” pentru a încărca o extensie nouă. La prompt, deschideți folderul „dist” și extensia va fi încărcată. Pentru a o utiliza, veți avea nevoie de o cheie API pentru CO2 Signal ([obțineți-o prin e-mail de aici](https://www.co2snal.com/) - introduceți adresa de e-mail în caseta de pe această pagină) și de [codul zonei dumneavoastră](http://api.electricitymap.org/v3/zones) de pe [Electricity Map](https://www.electricitymap.org/map) (de exemplu, pentru Boston, folosesc 'US-NEISO').
+
+![instalare](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.ro.png)
+
+Odată ce cheia API și codul zonei sunt introduse în interfața extensiei, punctul colorat din bara extensiei browserului ar trebui să reflecte consumul de energie din zona dumneavoastră și să vă ofere un indicator despre ce activități consumatoare de energie sunt potrivite pentru moment. Conceptul din spatele acestui sistem de „puncte” mi-a fost inspirat de [extensia Energy Lollipop](https://energylollipop.com/) pentru emisiile din California.
+
+---
+
+**Declinare de responsabilitate**:  
+Acest document a fost tradus folosind serviciul de traducere AI [Co-op Translator](https://github.com/Azure/co-op-translator). Deși ne străduim să asigurăm acuratețea, vă rugăm să fiți conștienți că traducerile automate pot conține erori sau inexactități. Documentul original în limba sa natală ar trebui considerat sursa autoritară. Pentru informații critice, se recomandă traducerea profesională realizată de un specialist uman. Nu ne asumăm responsabilitatea pentru eventualele neînțelegeri sau interpretări greșite care pot apărea din utilizarea acestei traduceri.
\ No newline at end of file
diff --git a/translations/ro/5-browser-extension/solution/translation/README.it.md b/translations/ro/5-browser-extension/solution/translation/README.it.md
new file mode 100644
index 00000000..c5fa3c2c
--- /dev/null
+++ b/translations/ro/5-browser-extension/solution/translation/README.it.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "9a6b22a2eff0f499b66236be973b24ad",
+  "translation_date": "2025-08-27T22:53:32+00:00",
+  "source_file": "5-browser-extension/solution/translation/README.it.md",
+  "language_code": "ro"
+}
+-->
+# Extensia de browser Carbon Trigger: cod pentru început
+
+Se va utiliza API-ul Signal CO2 de la tmrow pentru a monitoriza utilizarea energiei electrice, cu scopul de a crea o extensie de browser care să ofere un memento direct în browser despre cât de intensă este utilizarea energiei electrice în regiunea ta. Utilizarea acestei extensii personalizate va ajuta la evaluarea activităților proprii pe baza acestor informații.
+
+![captură de ecran a extensiei](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.ro.png)
+
+## Pentru a începe
+
+Este necesar ca [npm](https://npmjs.com) să fie instalat. Descarcă o copie a acestui cod într-un folder de pe computerul tău.
+
+Instalează toate pachetele necesare:
+
+```
+npm install
+```
+
+Construiește extensia folosind webpack:
+
+```
+npm run build
+```
+
+Pentru a instala pe Edge, folosește meniul „trei puncte” din colțul din dreapta sus al browserului pentru a accesa panoul Extensii. Dacă nu este deja activată, activează Modul dezvoltator (în partea de jos, stânga). Selectează „Încarcă necomprimat” pentru a adăuga o nouă extensie. Deschide folderul „dist” la prompt, iar extensia va fi încărcată. Pentru a o utiliza, vei avea nevoie de o cheie API pentru API-ul CO2 Signal (poți [obține una prin e-mail aici](https://www.co2signal.com/) - introdu adresa ta de e-mail în caseta de pe această pagină) și de [codul pentru regiunea ta](http://api.electricitymap.org/v3/zones) corespunzător [hărții electrice](https://www.electricitymap.org/map) (de exemplu, pentru Boston, „US-NEISO”).
+
+![instalare](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.ro.png)
+
+După ce cheia API și regiunea au fost introduse în interfața extensiei, punctul colorat din bara extensiei browserului ar trebui să se schimbe pentru a reflecta utilizarea energiei din regiune și să ofere o sugestie despre ce activități cu consum ridicat de energie ar fi potrivite de realizat. Conceptul din spatele acestui sistem de „puncte” a fost inspirat de [extensia Energy Lollipop](https://energylollipop.com/) pentru emisiile din California.
+
+---
+
+**Declinare de responsabilitate**:  
+Acest document a fost tradus folosind serviciul de traducere AI [Co-op Translator](https://github.com/Azure/co-op-translator). Deși ne străduim să asigurăm acuratețea, vă rugăm să fiți conștienți că traducerile automate pot conține erori sau inexactități. Documentul original în limba sa natală ar trebui considerat sursa autoritară. Pentru informații critice, se recomandă traducerea profesională realizată de un specialist uman. Nu ne asumăm responsabilitatea pentru eventualele neînțelegeri sau interpretări greșite care pot apărea din utilizarea acestei traduceri.
\ No newline at end of file
diff --git a/translations/ro/5-browser-extension/solution/translation/README.ja.md b/translations/ro/5-browser-extension/solution/translation/README.ja.md
new file mode 100644
index 00000000..9f819ff0
--- /dev/null
+++ b/translations/ro/5-browser-extension/solution/translation/README.ja.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "3f5e6821e0febccfc5d05e7c944d9e3d",
+  "translation_date": "2025-08-27T22:54:09+00:00",
+  "source_file": "5-browser-extension/solution/translation/README.ja.md",
+  "language_code": "ro"
+}
+-->
+# Extensie de browser Carbon Trigger: Cod finalizat
+
+Construiește o extensie de browser care utilizează API-ul CO2 Signal de la tmrow pentru a urmări consumul de energie și pentru a afișa, ca un memento, cât de intens este consumul de energie în regiunea ta. Folosind această extensie în mod ad-hoc, poți lua decizii informate cu privire la activitățile tale pe baza acestor informații.
+
+![extension screenshot](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.ro.png)
+
+## Introducere
+
+Este necesar să ai [npm](https://npmjs.com) instalat. Descarcă o copie a acestui cod într-un folder de pe computerul tău.
+
+Instalează toate pachetele necesare.
+
+```
+npm install
+```
+
+Construiește extensia folosind webpack.
+
+```
+npm run build
+```
+
+Pentru a instala pe Edge, găsește panoul „Extensii” din meniul „trei puncte” din colțul din dreapta sus al browserului. De acolo, selectează „Load Unpacked” pentru a încărca noua extensie. Când apare promptul, deschide folderul „dist” și extensia va fi încărcată. Pentru utilizare, vei avea nevoie de o cheie API pentru CO2 Signal ([obține una aici prin email](https://www.co2signal.com/) - introdu adresa ta de email în caseta de pe această pagină) și de [codul corespunzător regiunii tale](http://api.electricitymap.org/v3/zones) de pe [Electricity Map](https://www.electricitymap.org/map) (de exemplu, pentru Boston, folosește 'US-NEISO').
+
+![installing](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.ro.png)
+
+După ce introduci cheia API și regiunea în interfața extensiei, punctul colorat afișat în bara de extensii a browserului se va schimba, reflectând consumul de energie din regiunea ta. Acest lucru îți va indica ce activități care necesită energie sunt potrivite în acel moment. Conceptul sistemului „punct” mi-a fost inspirat de extensia [Energy Lollipop](https://energylollipop.com/) pentru emisiile din California.
+
+---
+
+**Declinare de responsabilitate**:  
+Acest document a fost tradus folosind serviciul de traducere AI [Co-op Translator](https://github.com/Azure/co-op-translator). Deși ne străduim să asigurăm acuratețea, vă rugăm să fiți conștienți că traducerile automate pot conține erori sau inexactități. Documentul original în limba sa maternă ar trebui considerat sursa autoritară. Pentru informații critice, se recomandă traducerea profesională realizată de un specialist uman. Nu ne asumăm responsabilitatea pentru eventualele neînțelegeri sau interpretări greșite care pot apărea din utilizarea acestei traduceri.
\ No newline at end of file
diff --git a/translations/ro/5-browser-extension/solution/translation/README.ms.md b/translations/ro/5-browser-extension/solution/translation/README.ms.md
new file mode 100644
index 00000000..4125fc72
--- /dev/null
+++ b/translations/ro/5-browser-extension/solution/translation/README.ms.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "21b364c158c8e4f698de65eeac16c9fe",
+  "translation_date": "2025-08-27T22:52:29+00:00",
+  "source_file": "5-browser-extension/solution/translation/README.ms.md",
+  "language_code": "ro"
+}
+-->
+# Extensia de browser Carbon Trigger: Cod complet
+
+Folosind API-ul CO2 Signal de la tmrow pentru a monitoriza consumul de electricitate, construiește o extensie de browser care îți permite să primești notificări în browser despre cât de intens este consumul de electricitate în regiunea ta. Utilizarea acestei extensii te va ajuta să iei decizii informate cu privire la activitățile tale, bazându-te pe aceste informații.
+
+![captură de ecran a extensiei de browser](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.ro.png)
+
+## Începe de aici
+
+Trebuie să ai instalat [npm](https://npmjs.com). Descarcă o copie a acestui cod într-un folder de pe computerul tău.
+
+Instalează toate pachetele necesare:
+
+```
+npm install
+```
+
+Construiește extensia folosind webpack:
+
+```
+npm run build
+```
+
+Pentru a instala extensia în Edge, folosește meniul „trei puncte” din colțul din dreapta sus al browserului pentru a accesa panoul Extensii. De acolo, selectează „Load Unpacked” pentru a încărca extensia. Deschide folderul „dist” la cerere, iar extensia va fi încărcată. Pentru a o utiliza, vei avea nevoie de o cheie API pentru API-ul CO2 Signal ([obține una prin e-mail aici](https://www.co2signal.com/) - introdu adresa ta de e-mail în caseta de pe această pagină) și [codul pentru regiunea ta](http://api.electricitymap.org/v3/zones), care corespunde cu [Electricity Map](https://www.electricitymap.org/map) (în Boston, de exemplu, eu folosesc „US-NEISO”).
+
+![descărcare în curs](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.ro.png)
+
+După ce introduci cheia API și regiunea în interfața extensiei, punctul colorat din bara extensiei browserului se va schimba pentru a reflecta consumul de energie din regiunea ta și îți va oferi sugestii despre activitățile potrivite pe care le poți desfășura. Conceptul din spatele sistemului „punct” mi-a fost inspirat de [extensia de browser Energy Lollipop](https://energylollipop.com/) pentru emisiile din California.
+
+---
+
+**Declinare de responsabilitate**:  
+Acest document a fost tradus folosind serviciul de traducere AI [Co-op Translator](https://github.com/Azure/co-op-translator). Deși ne străduim să asigurăm acuratețea, vă rugăm să fiți conștienți că traducerile automate pot conține erori sau inexactități. Documentul original în limba sa natală ar trebui considerat sursa autoritară. Pentru informații critice, se recomandă traducerea profesională realizată de un specialist uman. Nu ne asumăm responsabilitatea pentru eventualele neînțelegeri sau interpretări greșite care pot apărea din utilizarea acestei traduceri.
\ No newline at end of file
diff --git a/translations/ro/5-browser-extension/start/README.md b/translations/ro/5-browser-extension/start/README.md
new file mode 100644
index 00000000..81885ac2
--- /dev/null
+++ b/translations/ro/5-browser-extension/start/README.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "26fd39046d264ba185dcb086d3a8cf3e",
+  "translation_date": "2025-08-27T22:45:12+00:00",
+  "source_file": "5-browser-extension/start/README.md",
+  "language_code": "ro"
+}
+-->
+# Extensia de browser Carbon Trigger: Cod de început
+
+Folosind API-ul CO2 Signal de la tmrow pentru a monitoriza consumul de energie electrică, construiește o extensie de browser astfel încât să ai un memento direct în browser despre cât de intens este consumul de energie electrică în regiunea ta. Utilizarea acestei extensii în mod ad-hoc te va ajuta să iei decizii informate cu privire la activitățile tale, bazându-te pe aceste informații.
+
+![captură de ecran a extensiei](../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.ro.png)
+
+## Începe
+
+Va trebui să ai instalat [npm](https://npmjs.com). Descarcă o copie a acestui cod într-un folder de pe computerul tău.
+
+Instalează toate pachetele necesare:
+
+```
+npm install
+```
+
+Construiește extensia folosind webpack:
+
+```
+npm run build
+```
+
+Pentru a instala pe Edge, folosește meniul „trei puncte” din colțul din dreapta sus al browserului pentru a găsi panoul Extensii. De acolo, selectează „Load Unpacked” pentru a încărca o extensie nouă. La prompt, deschide folderul „dist” și extensia va fi încărcată. Pentru a o utiliza, vei avea nevoie de o cheie API pentru API-ul CO2 Signal ([obține una aici prin email](https://www.co2signal.com/) - introdu adresa ta de email în căsuța de pe această pagină) și de [codul pentru regiunea ta](http://api.electricitymap.org/v3/zones) corespunzător [Electricity Map](https://www.electricitymap.org/map) (de exemplu, în Boston, folosesc „US-NEISO”).
+
+![instalare](../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.ro.png)
+
+Odată ce cheia API și regiunea sunt introduse în interfața extensiei, punctul colorat din bara extensiei browserului ar trebui să se schimbe pentru a reflecta consumul de energie din regiunea ta și să îți ofere o sugestie despre ce activități consumatoare de energie ar fi potrivite să le desfășori. Conceptul din spatele acestui sistem de „puncte” mi-a fost inspirat de [extensia Energy Lollipop](https://energylollipop.com/) pentru emisiile din California.
+
+---
+
+**Declinare de responsabilitate**:  
+Acest document a fost tradus folosind serviciul de traducere AI [Co-op Translator](https://github.com/Azure/co-op-translator). Deși ne străduim să asigurăm acuratețea, vă rugăm să fiți conștienți că traducerile automate pot conține erori sau inexactități. Documentul original în limba sa natală ar trebui considerat sursa autoritară. Pentru informații critice, se recomandă traducerea profesională realizată de un specialist uman. Nu ne asumăm responsabilitatea pentru eventualele neînțelegeri sau interpretări greșite care pot apărea din utilizarea acestei traduceri.
\ No newline at end of file
diff --git a/translations/ro/6-space-game/1-introduction/README.md b/translations/ro/6-space-game/1-introduction/README.md
new file mode 100644
index 00000000..5cbd2c90
--- /dev/null
+++ b/translations/ro/6-space-game/1-introduction/README.md
@@ -0,0 +1,238 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "d9da6dc61fb712b29f65e108c79b8a5d",
+  "translation_date": "2025-08-27T22:23:39+00:00",
+  "source_file": "6-space-game/1-introduction/README.md",
+  "language_code": "ro"
+}
+-->
+# Construiește un Joc Spațial Partea 1: Introducere
+
+![video](../../../../6-space-game/images/pewpew.gif)
+
+## Chestionar Pre-Lecție
+
+[Chestionar pre-lecție](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/29)
+
+### Moștenire și Compoziție în dezvoltarea jocurilor
+
+În lecțiile anterioare, nu a fost nevoie să te preocupi prea mult de arhitectura aplicațiilor pe care le-ai construit, deoarece proiectele erau de dimensiuni mici. Totuși, pe măsură ce aplicațiile tale cresc în dimensiune și complexitate, deciziile arhitecturale devin mai importante. Există două abordări majore pentru crearea aplicațiilor mai mari în JavaScript: *compoziția* sau *moștenirea*. Ambele au avantaje și dezavantaje, dar să le explicăm în contextul unui joc.
+
+✅ Una dintre cele mai faimoase cărți de programare scrise vreodată este despre [design patterns](https://en.wikipedia.org/wiki/Design_Patterns).
+
+Într-un joc ai `obiecte de joc`, care sunt obiecte ce există pe un ecran. Asta înseamnă că au o locație într-un sistem de coordonate cartezian, caracterizată printr-o coordonată `x` și una `y`. Pe măsură ce dezvolți un joc, vei observa că toate obiectele de joc au o proprietate standard, comună pentru fiecare joc pe care îl creezi, și anume elemente care sunt:
+
+- **bazate pe locație** Majoritatea, dacă nu toate, elementele de joc sunt bazate pe locație. Asta înseamnă că au o locație, un `x` și un `y`.
+- **mobile** Acestea sunt obiecte care se pot deplasa într-o nouă locație. De obicei, acestea sunt un erou, un monstru sau un NPC (un personaj non-jucător), dar nu, de exemplu, un obiect static precum un copac.
+- **autodistructive** Aceste obiecte există doar pentru o perioadă de timp înainte de a se pregăti pentru ștergere. De obicei, acest lucru este reprezentat printr-un boolean `dead` sau `destroyed` care semnalează motorului de joc că acest obiect nu ar mai trebui să fie redat.
+- **cu timp de răcire** 'Timpul de răcire' este o proprietate tipică printre obiectele de scurtă durată. Un exemplu tipic este un text sau un efect grafic, precum o explozie, care ar trebui să fie vizibil doar pentru câteva milisecunde.
+
+✅ Gândește-te la un joc precum Pac-Man. Poți identifica cele patru tipuri de obiecte enumerate mai sus în acest joc?
+
+### Exprimarea comportamentului
+
+Tot ce am descris mai sus reprezintă comportamente pe care obiectele de joc le pot avea. Deci, cum codificăm aceste comportamente? Putem exprima acest comportament ca metode asociate fie claselor, fie obiectelor.
+
+**Clase**
+
+Ideea este să folosim `clase` împreună cu `moștenirea` pentru a adăuga un anumit comportament unei clase.
+
+✅ Moștenirea este un concept important de înțeles. Află mai multe din [articolul MDN despre moștenire](https://developer.mozilla.org/docs/Web/JavaScript/Inheritance_and_the_prototype_chain).
+
+Exprimat prin cod, un obiect de joc poate arăta astfel:
+
+```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();
+```
+
+✅ Ia câteva minute pentru a reimagina un erou din Pac-Man (de exemplu, Inky, Pinky sau Blinky) și cum ar fi scris în JavaScript.
+
+**Compoziție**
+
+O altă modalitate de a gestiona moștenirea obiectelor este prin utilizarea *Compoziției*. În acest caz, obiectele își exprimă comportamentul astfel:
+
+```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'); 
+```
+
+**Ce model ar trebui să folosesc?**
+
+Depinde de tine ce model alegi. JavaScript suportă ambele paradigme.
+
+--
+
+Un alt model comun în dezvoltarea jocurilor abordează problema gestionării experienței utilizatorului și a performanței jocului.
+
+## Modelul Pub/Sub
+
+✅ Pub/Sub înseamnă 'publish-subscribe'
+
+Acest model abordează ideea că părțile disparate ale aplicației tale nu ar trebui să știe una despre cealaltă. De ce? Este mult mai ușor să vezi ce se întâmplă în general dacă diversele părți sunt separate. De asemenea, devine mai ușor să schimbi brusc comportamentul dacă este necesar. Cum realizăm acest lucru? Facem acest lucru stabilind câteva concepte:
+
+- **mesaj**: Un mesaj este de obicei un șir de text însoțit de o sarcină opțională (o bucată de date care clarifică despre ce este vorba în mesaj). Un mesaj tipic într-un joc poate fi `KEY_PRESSED_ENTER`.
+- **publisher**: Acest element *publică* un mesaj și îl trimite tuturor abonaților.
+- **subscriber**: Acest element *ascultă* mesaje specifice și execută o sarcină ca rezultat al primirii acestui mesaj, cum ar fi tragerea unui laser.
+
+Implementarea este destul de mică, dar este un model foarte puternic. Iată cum poate fi implementat:
+
+```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))
+    }
+  }
+}
+
+```
+
+Pentru a folosi codul de mai sus, putem crea o implementare foarte mică:
+
+```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)
+  }
+});
+```
+
+Mai sus conectăm un eveniment de tastatură, `ArrowLeft`, și trimitem mesajul `HERO_MOVE_LEFT`. Ascultăm acest mesaj și mutăm `eroul` ca rezultat. Punctul forte al acestui model este că ascultătorul de evenimente și eroul nu știu unul despre celălalt. Poți remapa `ArrowLeft` la tasta `A`. În plus, ar fi posibil să faci ceva complet diferit pe `ArrowLeft` făcând câteva modificări în funcția `on` a eventEmitter-ului:
+
+```javascript
+eventEmitter.on(Messages.HERO_MOVE_LEFT, () => {
+  hero.move(5,0);
+});
+```
+
+Pe măsură ce lucrurile devin mai complicate odată cu creșterea jocului, acest model rămâne la fel de simplu, iar codul tău rămâne curat. Este cu adevărat recomandat să adopți acest model.
+
+---
+
+## 🚀 Provocare
+
+Gândește-te cum modelul pub-sub poate îmbunătăți un joc. Ce părți ar trebui să emită evenimente și cum ar trebui să reacționeze jocul la ele? Acum ai șansa să fii creativ, gândindu-te la un joc nou și la cum ar putea să se comporte părțile sale.
+
+## Chestionar Post-Lecție
+
+[Chestionar post-lecție](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/30)
+
+## Recapitulare și Studiu Individual
+
+Află mai multe despre Pub/Sub [citind despre el](https://docs.microsoft.com/azure/architecture/patterns/publisher-subscriber/?WT.mc_id=academic-77807-sagibbon).
+
+## Temă
+
+[Proiectează un joc](assignment.md)
+
+---
+
+**Declinare de responsabilitate**:  
+Acest document a fost tradus folosind serviciul de traducere AI [Co-op Translator](https://github.com/Azure/co-op-translator). Deși ne străduim să asigurăm acuratețea, vă rugăm să fiți conștienți că traducerile automate pot conține erori sau inexactități. Documentul original în limba sa natală ar trebui considerat sursa autoritară. Pentru informații critice, se recomandă traducerea profesională realizată de un specialist uman. Nu ne asumăm responsabilitatea pentru eventualele neînțelegeri sau interpretări greșite care pot apărea din utilizarea acestei traduceri.
\ No newline at end of file
diff --git a/translations/ro/6-space-game/1-introduction/assignment.md b/translations/ro/6-space-game/1-introduction/assignment.md
new file mode 100644
index 00000000..f9c48221
--- /dev/null
+++ b/translations/ro/6-space-game/1-introduction/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "009bdedee9cc82988264be8cb31f9bf4",
+  "translation_date": "2025-08-27T22:24:50+00:00",
+  "source_file": "6-space-game/1-introduction/assignment.md",
+  "language_code": "ro"
+}
+-->
+# Creează un joc
+
+## Instrucțiuni
+
+Folosind exemplele de cod din lecție, scrie o reprezentare a unui joc care îți place. Va trebui să fie un joc simplu, dar scopul este să folosești fie modelul de clasă, fie modelul de compoziție și modelul pub/sub pentru a arăta cum ar putea fi lansat un joc. Fii creativ!
+
+## Criterii de evaluare
+
+| Criterii | Exemplară                                               | Adecvată                                              | Necesită îmbunătățiri                              |
+| -------- | ------------------------------------------------------- | ----------------------------------------------------- | --------------------------------------------------- |
+|          | Trei elemente sunt plasate pe ecran și manipulate       | Două elemente sunt plasate pe ecran și manipulate     | Un element este plasat pe ecran și manipulat       |
+
+---
+
+**Declinare de responsabilitate**:  
+Acest document a fost tradus folosind serviciul de traducere AI [Co-op Translator](https://github.com/Azure/co-op-translator). Deși ne străduim să asigurăm acuratețea, vă rugăm să fiți conștienți că traducerile automate pot conține erori sau inexactități. Documentul original în limba sa natală ar trebui considerat sursa autoritară. Pentru informații critice, se recomandă traducerea profesională realizată de un specialist uman. Nu ne asumăm responsabilitatea pentru eventualele neînțelegeri sau interpretări greșite care pot apărea din utilizarea acestei traduceri.
\ No newline at end of file
diff --git a/translations/ro/6-space-game/2-drawing-to-canvas/README.md b/translations/ro/6-space-game/2-drawing-to-canvas/README.md
new file mode 100644
index 00000000..e070fd2c
--- /dev/null
+++ b/translations/ro/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:19:34+00:00",
+  "source_file": "6-space-game/2-drawing-to-canvas/README.md",
+  "language_code": "ro"
+}
+-->
+# Construiește un Joc Spațial Partea 2: Desenează Eroul și Monștrii pe Canvas
+
+## Chestionar Pre-Lecție
+
+[Chestionar pre-lecție](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/31)
+
+## Canvas-ul
+
+Canvas-ul este un element HTML care, în mod implicit, nu are conținut; este o pagină goală. Trebuie să adaugi conținut desenând pe el.
+
+✅ Citește [mai multe despre API-ul Canvas](https://developer.mozilla.org/docs/Web/API/Canvas_API) pe MDN.
+
+Iată cum este de obicei declarat, ca parte a corpului paginii:
+
+```html
+<canvas id="myCanvas" width="200" height="100"></canvas>
+```
+
+Mai sus setăm `id`, `width` și `height`.
+
+- `id`: setează acest atribut pentru a obține o referință atunci când ai nevoie să interacționezi cu el.
+- `width`: aceasta este lățimea elementului.
+- `height`: aceasta este înălțimea elementului.
+
+## Desenarea geometriei simple
+
+Canvas-ul folosește un sistem de coordonate cartezian pentru a desena lucruri. Astfel, utilizează o axă x și o axă y pentru a exprima unde se află ceva. Locația `0,0` este poziția din stânga sus, iar colțul din dreapta jos este ceea ce ai setat ca LĂȚIME și ÎNĂLȚIME ale canvas-ului.
+
+![grila canvas-ului](../../../../translated_images/canvas_grid.5f209da785ded492a01ece440e3032afe51efa500cc2308e5ea4252487ceaf0b.ro.png)
+> Imagine de la [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes)
+
+Pentru a desena pe elementul canvas, trebuie să urmezi pașii următori:
+
+1. **Obține o referință** la elementul Canvas.
+1. **Obține o referință** la elementul Context care se află pe elementul Canvas.
+1. **Efectuează o operațiune de desenare** folosind elementul Context.
+
+Codul pentru pașii de mai sus arată de obicei astfel:
+
+```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-ul Canvas se concentrează în principal pe forme 2D, dar poți desena și elemente 3D pe un site web; pentru aceasta, ai putea folosi [API-ul WebGL](https://developer.mozilla.org/docs/Web/API/WebGL_API).
+
+Poți desena o mulțime de lucruri cu API-ul Canvas, cum ar fi:
+
+- **Forme geometrice**, am arătat deja cum să desenezi un dreptunghi, dar există mult mai multe lucruri pe care le poți desena.
+- **Text**, poți desena text cu orice font și culoare dorești.
+- **Imagini**, poți desena o imagine bazată pe un fișier imagine, cum ar fi un .jpg sau .png, de exemplu.
+
+✅ Încearcă! Știi cum să desenezi un dreptunghi, poți desena un cerc pe o pagină? Aruncă o privire la câteva desene interesante realizate cu Canvas pe CodePen. Iată un [exemplu deosebit de impresionant](https://codepen.io/dissimulate/pen/KrAwx).
+
+## Încarcă și desenează un fișier imagine
+
+Poți încărca un fișier imagine creând un obiect `Image` și setând proprietatea sa `src`. Apoi, asculți evenimentul `load` pentru a ști când este gata să fie utilizat. Codul arată astfel:
+
+### Încarcă fișierul
+
+```javascript
+const img = new Image();
+img.src = 'path/to/my/image.png';
+img.onload = () => {
+  // image loaded and ready to be used
+}
+```
+
+### Model de încărcare a fișierului
+
+Este recomandat să înfășori codul de mai sus într-o construcție ca aceasta, astfel încât să fie mai ușor de utilizat și să încerci să-l manipulezi doar atunci când este complet încărcat:
+
+```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')
+}
+
+```
+
+Pentru a desena elemente de joc pe ecran, codul tău ar arăta astfel:
+
+```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);
+}
+```
+
+## Acum este momentul să începi să construiești jocul tău
+
+### Ce să construiești
+
+Vei construi o pagină web cu un element Canvas. Aceasta ar trebui să afișeze un ecran negru `1024*768`. Ți-am oferit două imagini:
+
+- Nava eroului
+
+   ![Nava eroului](../../../../translated_images/player.dd24c1afa8c71e9b82b2958946d4bad13308681392d4b5ddcc61a0e818ef8088.ro.png)
+
+- Monstru 5*5
+
+   ![Nava monstrului](../../../../translated_images/enemyShip.5df2a822c16650c2fb3c06652e8ec8120cdb9122a6de46b9a1a56d54db22657f.ro.png)
+
+### Pași recomandați pentru a începe dezvoltarea
+
+Localizează fișierele care au fost create pentru tine în subfolderul `your-work`. Acesta ar trebui să conțină următoarele:
+
+```bash
+-| assets
+  -| enemyShip.png
+  -| player.png
+-| index.html
+-| app.js
+-| package.json
+```
+
+Deschide copia acestui folder în Visual Studio Code. Trebuie să ai un mediu de dezvoltare local configurat, de preferat cu Visual Studio Code, NPM și Node instalate. Dacă nu ai `npm` configurat pe computerul tău, [iată cum să faci asta](https://www.npmjs.com/get-npm).
+
+Începe proiectul navigând la folderul `your_work`:
+
+```bash
+cd your-work
+npm start
+```
+
+Comanda de mai sus va porni un server HTTP la adresa `http://localhost:5000`. Deschide un browser și introdu acea adresă. Este o pagină goală acum, dar asta se va schimba.
+
+> Notă: pentru a vedea modificările pe ecran, reîmprospătează browserul.
+
+### Adaugă cod
+
+Adaugă codul necesar în `your-work/app.js` pentru a rezolva următoarele:
+
+1. **Desenează** un canvas cu fundal negru  
+   > sfat: adaugă două linii sub TODO-ul corespunzător în `/app.js`, setând elementul `ctx` să fie negru și coordonatele de sus/stânga la 0,0, iar înălțimea și lățimea să fie egale cu cele ale canvas-ului.
+2. **Încarcă** texturi  
+   > sfat: adaugă imaginile jucătorului și inamicului folosind `await loadTexture` și trecând calea imaginii. Nu le vei vedea încă pe ecran!
+3. **Desenează** eroul în centrul ecranului, în jumătatea de jos  
+   > sfat: folosește API-ul `drawImage` pentru a desena heroImg pe ecran, setând `canvas.width / 2 - 45` și `canvas.height - canvas.height / 4)`.
+4. **Desenează** 5*5 monștri  
+   > sfat: Acum poți debloca codul pentru a desena inamicii pe ecran. Apoi, mergi la funcția `createEnemies` și construiește-o.
+
+   Mai întâi, configurează câteva constante:
+
+    ```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;
+    ```
+
+    apoi, creează un ciclu pentru a desena matricea de monștri pe ecran:
+
+    ```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
+
+Rezultatul final ar trebui să arate astfel:
+
+![Ecran negru cu un erou și 5*5 monștri](../../../../translated_images/partI-solution.36c53b48c9ffae2a5e15496b23b604ba5393433e4bf91608a7a0a020eb7a2691.ro.png)
+
+## Soluție
+
+Te rugăm să încerci să rezolvi singur mai întâi, dar dacă te blochezi, aruncă o privire la o [soluție](../../../../6-space-game/2-drawing-to-canvas/solution/app.js).
+
+---
+
+## 🚀 Provocare
+
+Ai învățat despre desenarea cu API-ul Canvas concentrat pe 2D; aruncă o privire la [API-ul WebGL](https://developer.mozilla.org/docs/Web/API/WebGL_API) și încearcă să desenezi un obiect 3D.
+
+## Chestionar Post-Lecție
+
+[Chestionar post-lecție](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/32)
+
+## Recapitulare și Studiu Individual
+
+Află mai multe despre API-ul Canvas [citind despre el](https://developer.mozilla.org/docs/Web/API/Canvas_API).
+
+## Temă
+
+[Experimentează cu API-ul Canvas](assignment.md)
+
+---
+
+**Declinare de responsabilitate**:  
+Acest document a fost tradus folosind serviciul de traducere AI [Co-op Translator](https://github.com/Azure/co-op-translator). Deși ne străduim să asigurăm acuratețea, vă rugăm să rețineți că traducerile automate pot conține erori sau inexactități. Documentul original în limba sa natală ar trebui considerat sursa autoritară. Pentru informații critice, se recomandă traducerea profesională realizată de un specialist uman. Nu ne asumăm responsabilitatea pentru eventualele neînțelegeri sau interpretări greșite care pot apărea din utilizarea acestei traduceri.
\ No newline at end of file
diff --git a/translations/ro/6-space-game/2-drawing-to-canvas/assignment.md b/translations/ro/6-space-game/2-drawing-to-canvas/assignment.md
new file mode 100644
index 00000000..ee477f52
--- /dev/null
+++ b/translations/ro/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:20:51+00:00",
+  "source_file": "6-space-game/2-drawing-to-canvas/assignment.md",
+  "language_code": "ro"
+}
+-->
+# Joacă-te cu API-ul Canvas
+
+## Instrucțiuni
+
+Alege un element din API-ul Canvas și creează ceva interesant în jurul acestuia. Poți crea o mică galaxie de stele repetate? Poți crea o textură interesantă de linii colorate? Poți căuta inspirație pe CodePen (dar nu copia).
+
+## Criterii de evaluare
+
+| Criterii | Exemplu                                                  | Adequat                             | Necesită îmbunătățiri |
+| -------- | -------------------------------------------------------- | ----------------------------------- | --------------------- |
+|          | Codul este trimis și arată o textură sau o formă interesantă | Codul este trimis, dar nu funcționează | Codul nu este trimis  |
+
+---
+
+**Declinare de responsabilitate**:  
+Acest document a fost tradus folosind serviciul de traducere AI [Co-op Translator](https://github.com/Azure/co-op-translator). Deși ne străduim să asigurăm acuratețea, vă rugăm să rețineți că traducerile automate pot conține erori sau inexactități. Documentul original în limba sa natală ar trebui considerat sursa autoritară. Pentru informații critice, se recomandă traducerea profesională realizată de un specialist uman. Nu ne asumăm responsabilitatea pentru eventualele neînțelegeri sau interpretări greșite care pot apărea din utilizarea acestei traduceri.
\ No newline at end of file
diff --git a/translations/ro/6-space-game/3-moving-elements-around/README.md b/translations/ro/6-space-game/3-moving-elements-around/README.md
new file mode 100644
index 00000000..add52734
--- /dev/null
+++ b/translations/ro/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:17:40+00:00",
+  "source_file": "6-space-game/3-moving-elements-around/README.md",
+  "language_code": "ro"
+}
+-->
+# Construiește un Joc Spațial Partea 3: Adăugarea Mișcării
+
+## Chestionar Pre-Lecție
+
+[Chestionar pre-lecție](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/33)
+
+Jocurile nu sunt prea distractive până când nu ai extratereștri care se mișcă pe ecran! În acest joc, vom folosi două tipuri de mișcări:
+
+- **Mișcare prin tastatură/mouse**: când utilizatorul interacționează cu tastatura sau mouse-ul pentru a muta un obiect pe ecran.
+- **Mișcare indusă de joc**: când jocul mută un obiect la un anumit interval de timp.
+
+Deci, cum mutăm lucrurile pe un ecran? Totul se reduce la coordonatele carteziene: schimbăm locația (x, y) a obiectului și apoi redesenăm ecranul.
+
+De obicei, ai nevoie de următorii pași pentru a realiza *mișcarea* pe un ecran:
+
+1. **Setează o locație nouă** pentru un obiect; acest lucru este necesar pentru a percepe obiectul ca fiind mutat.
+2. **Curăță ecranul**, ecranul trebuie curățat între desene. Putem face acest lucru desenând un dreptunghi pe care îl umplem cu o culoare de fundal.
+3. **Redesenează obiectul** la noua locație. Procedând astfel, reușim în cele din urmă să mutăm obiectul dintr-o locație în alta.
+
+Iată cum poate arăta acest lucru în cod:
+
+```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);
+```
+
+✅ Te poți gândi la un motiv pentru care redesenarea eroului de mai multe cadre pe secundă ar putea genera costuri de performanță? Citește despre [alternative la acest model](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas).
+
+## Gestionarea evenimentelor de tastatură
+
+Gestionezi evenimentele atașând evenimente specifice la cod. Evenimentele de tastatură sunt declanșate pe întreaga fereastră, în timp ce evenimentele de mouse, cum ar fi un `click`, pot fi conectate la clicul pe un element specific. Vom folosi evenimente de tastatură pe tot parcursul acestui proiect.
+
+Pentru a gestiona un eveniment, trebuie să folosești metoda `addEventListener()` a ferestrei și să îi furnizezi doi parametri de intrare. Primul parametru este numele evenimentului, de exemplu `keyup`. Al doilea parametru este funcția care ar trebui să fie invocată ca rezultat al producerii evenimentului.
+
+Iată un exemplu:
+
+```javascript
+window.addEventListener('keyup', (evt) => {
+  // `evt.key` = string representation of the key
+  if (evt.key === 'ArrowUp') {
+    // do something
+  }
+})
+```
+
+Pentru evenimentele de tastatură, există două proprietăți pe eveniment pe care le poți folosi pentru a vedea ce tastă a fost apăsată:
+
+- `key`, aceasta este o reprezentare sub formă de șir a tastei apăsate, de exemplu `ArrowUp`.
+- `keyCode`, aceasta este o reprezentare numerică, de exemplu `37`, care corespunde cu `ArrowLeft`.
+
+✅ Manipularea evenimentelor de tastatură este utilă și în afara dezvoltării de jocuri. La ce alte utilizări te poți gândi pentru această tehnică?
+
+### Taste speciale: un avertisment
+
+Există unele taste *speciale* care afectează fereastra. Asta înseamnă că, dacă asculți un eveniment `keyup` și folosești aceste taste speciale pentru a muta eroul, se va efectua și o derulare orizontală. Din acest motiv, s-ar putea să vrei să *dezactivezi* acest comportament implicit al browserului pe măsură ce îți construiești jocul. Ai nevoie de un cod ca acesta:
+
+```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);
+```
+
+Codul de mai sus va asigura că tastele săgeți și tasta spațiu au comportamentul *implicit* dezactivat. Mecanismul de *dezactivare* are loc atunci când apelăm `e.preventDefault()`.
+
+## Mișcare indusă de joc
+
+Putem face lucrurile să se miște singure folosind temporizatoare precum funcțiile `setTimeout()` sau `setInterval()` care actualizează locația obiectului la fiecare tic, sau interval de timp. Iată cum poate arăta acest lucru:
+
+```javascript
+let id = setInterval(() => {
+  //move the enemy on the y axis
+  enemy.y += 10;
+})
+```
+
+## Bucla jocului
+
+Bucla jocului este un concept care reprezintă, în esență, o funcție care este invocată la intervale regulate. Se numește bucla jocului deoarece tot ceea ce ar trebui să fie vizibil pentru utilizator este desenat în cadrul buclei. Bucla jocului folosește toate obiectele de joc care fac parte din joc, desenându-le pe toate, cu excepția cazului în care, dintr-un motiv, nu mai fac parte din joc. De exemplu, dacă un obiect este un inamic care a fost lovit de un laser și explodează, nu mai face parte din bucla curentă a jocului (vei învăța mai multe despre acest lucru în lecțiile următoare).
+
+Iată cum poate arăta o buclă de joc, exprimată în cod:
+
+```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);
+```
+
+Bucla de mai sus este invocată la fiecare `200` de milisecunde pentru a redesena canvas-ul. Ai posibilitatea să alegi cel mai bun interval care are sens pentru jocul tău.
+
+## Continuarea Jocului Spațial
+
+Vei lua codul existent și îl vei extinde. Poți începe fie cu codul pe care l-ai finalizat în partea I, fie să folosești codul din [Partea II - starter](../../../../6-space-game/3-moving-elements-around/your-work).
+
+- **Mutarea eroului**: vei adăuga cod pentru a te asigura că poți muta eroul folosind tastele săgeți.
+- **Mutarea inamicilor**: va trebui, de asemenea, să adaugi cod pentru a te asigura că inamicii se mișcă de sus în jos la un anumit ritm.
+
+## Pași recomandați
+
+Găsește fișierele care au fost create pentru tine în subfolderul `your-work`. Ar trebui să conțină următoarele:
+
+```bash
+-| assets
+  -| enemyShip.png
+  -| player.png
+-| index.html
+-| app.js
+-| package.json
+```
+
+Îți începi proiectul în folderul `your_work` tastând:
+
+```bash
+cd your-work
+npm start
+```
+
+Comanda de mai sus va porni un server HTTP pe adresa `http://localhost:5000`. Deschide un browser și introdu acea adresă; în acest moment ar trebui să afișeze eroul și toți inamicii; nimic nu se mișcă - încă!
+
+### Adaugă cod
+
+1. **Adaugă obiecte dedicate** pentru `hero`, `enemy` și `game object`, acestea ar trebui să aibă proprietăți `x` și `y`. (Amintește-ți secțiunea despre [Moștenire sau compoziție](../README.md)).
+
+   *INDICIU* `game object` ar trebui să fie cel cu `x` și `y` și capacitatea de a se desena pe un canvas.
+
+   >sfat: începe prin a adăuga o nouă clasă GameObject cu constructorul său definit astfel, și apoi desenează-l pe canvas:
+  
+    ```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);
+      }
+    }
+    ```
+
+    Acum, extinde acest GameObject pentru a crea Hero și 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. **Adaugă gestionari de evenimente pentru taste** pentru a gestiona navigarea cu tastele (mută eroul sus/jos/stânga/dreapta).
+
+   *AMINTEȘTE-ȚI* că este un sistem cartezian, colțul din stânga sus este `0,0`. De asemenea, amintește-ți să adaugi cod pentru a opri *comportamentul implicit*.
+
+   >sfat: creează funcția ta onKeyDown și atașeaz-o la fereastră:
+
+   ```javascript
+    let onKeyDown = function (e) {
+	      console.log(e.keyCode);
+	        ...add the code from the lesson above to stop default behavior
+	      }
+    };
+
+    window.addEventListener("keydown", onKeyDown);
+   ```
+    
+   Verifică consola browserului în acest moment și urmărește tastele apăsate care sunt înregistrate.
+
+3. **Implementează** [Modelul Pub-Sub](../README.md), acesta va menține codul tău curat pe măsură ce urmezi părțile rămase.
+
+   Pentru a face acest ultim pas, poți:
+
+   1. **Adaugă un ascultător de evenimente** pe fereastră:
+
+       ```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. **Creează o clasă EventEmitter** pentru a publica și a te abona la mesaje:
+
+        ```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. **Adaugă constante** și configurează 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. **Inițializează jocul**
+
+    ```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. **Configurează bucla jocului**
+
+   Refactorizează funcția window.onload pentru a inițializa jocul și a configura o buclă de joc la un interval potrivit. Vei adăuga și o rază laser:
+
+    ```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. **Adaugă cod** pentru a muta inamicii la un anumit interval.
+
+    Refactorizează funcția `createEnemies()` pentru a crea inamicii și a-i adăuga în noua clasă 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 adaugă o funcție `createHero()` pentru a face un proces similar pentru erou.
+    
+    ```javascript
+    function createHero() {
+      hero = new Hero(
+        canvas.width / 2 - 45,
+        canvas.height - canvas.height / 4
+      );
+      hero.img = heroImg;
+      gameObjects.push(hero);
+    }
+    ```
+
+    și, în final, adaugă o funcție `drawGameObjects()` pentru a începe desenarea:
+
+    ```javascript
+    function drawGameObjects(ctx) {
+      gameObjects.forEach(go => go.draw(ctx));
+    }
+    ```
+
+    Inamicii tăi ar trebui să înceapă să avanseze spre nava ta spațială!
+
+---
+
+## 🚀 Provocare
+
+După cum poți vedea, codul tău poate deveni un „cod spaghetti” atunci când începi să adaugi funcții, variabile și clase. Cum poți organiza mai bine codul astfel încât să fie mai ușor de citit? Schițează un sistem pentru a-ți organiza codul, chiar dacă acesta rămâne într-un singur fișier.
+
+## Chestionar Post-Lecție
+
+[Chestionar post-lecție](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/34)
+
+## Recapitulare și Studiu Individual
+
+Deși scriem jocul nostru fără a folosi framework-uri, există multe framework-uri bazate pe JavaScript pentru dezvoltarea de jocuri pe canvas. Alocă timp pentru a face [cercetări despre acestea](https://github.com/collections/javascript-game-engines).
+
+## Temă
+
+[Comentează-ți codul](assignment.md)
+
+---
+
+**Declinarea responsabilității**:  
+Acest document a fost tradus utilizând serviciul de traducere AI [Co-op Translator](https://github.com/Azure/co-op-translator). Deși depunem eforturi pentru a asigura acuratețea, vă rugăm să rețineți că traducerile automate pot conține erori sau inexactități. Documentul original în limba sa nativă ar trebui considerat sursa autoritară. Pentru informații critice, se recomandă traducerea profesională realizată de un specialist uman. Nu ne asumăm răspunderea pentru eventualele neînțelegeri sau interpretări greșite care pot apărea din utilizarea acestei traduceri.
\ No newline at end of file
diff --git a/translations/ro/6-space-game/3-moving-elements-around/assignment.md b/translations/ro/6-space-game/3-moving-elements-around/assignment.md
new file mode 100644
index 00000000..ce65b9b7
--- /dev/null
+++ b/translations/ro/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:19:14+00:00",
+  "source_file": "6-space-game/3-moving-elements-around/assignment.md",
+  "language_code": "ro"
+}
+-->
+# Comentează Codul Tău
+
+## Instrucțiuni
+
+Parcurge fișierul tău /app.js din folderul jocului și găsește modalități de a-l comenta și organiza. Este foarte ușor ca codul să scape de sub control, iar acum este o ocazie bună să adaugi comentarii pentru a te asigura că ai un cod ușor de citit, pe care să-l poți folosi mai târziu.
+
+## Criterii de evaluare
+
+| Criteriu | Exemplary                                                          | Adequate                              | Needs Improvement                                              |
+| -------- | ------------------------------------------------------------------ | ------------------------------------- | -------------------------------------------------------------- |
+|          | Codul din `app.js` este complet comentat și organizat în blocuri logice | Codul din `app.js` este comentat adecvat | Codul din `app.js` este oarecum dezorganizat și lipsit de comentarii bune |
+
+---
+
+**Declinare de responsabilitate**:  
+Acest document a fost tradus folosind serviciul de traducere AI [Co-op Translator](https://github.com/Azure/co-op-translator). Deși ne străduim să asigurăm acuratețea, vă rugăm să fiți conștienți că traducerile automate pot conține erori sau inexactități. Documentul original în limba sa natală ar trebui considerat sursa autoritară. Pentru informații critice, se recomandă traducerea profesională realizată de un specialist uman. Nu ne asumăm responsabilitatea pentru eventualele neînțelegeri sau interpretări greșite care pot apărea din utilizarea acestei traduceri.
\ No newline at end of file
diff --git a/translations/ro/6-space-game/4-collision-detection/README.md b/translations/ro/6-space-game/4-collision-detection/README.md
new file mode 100644
index 00000000..a9b769d2
--- /dev/null
+++ b/translations/ro/6-space-game/4-collision-detection/README.md
@@ -0,0 +1,311 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "2e83e38c35dc003f046d7cc0bbfd4920",
+  "translation_date": "2025-08-27T22:21:11+00:00",
+  "source_file": "6-space-game/4-collision-detection/README.md",
+  "language_code": "ro"
+}
+-->
+# Construiește un Joc Spațial Partea 4: Adăugarea unui Laser și Detectarea Coliziunilor
+
+## Chestionar Pre-Lecție
+
+[Chestionar pre-lecție](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/35)
+
+În această lecție vei învăța cum să tragi cu lasere folosind JavaScript! Vom adăuga două lucruri în jocul nostru:
+
+- **Un laser**: acest laser este tras din nava eroului tău și se deplasează vertical în sus
+- **Detectarea coliziunilor**, ca parte a implementării capacității de a *trage*, vom adăuga și câteva reguli interesante de joc:
+   - **Laserul lovește inamicul**: Inamicul moare dacă este lovit de un laser
+   - **Laserul lovește partea de sus a ecranului**: Un laser este distrus dacă lovește partea de sus a ecranului
+   - **Coliziunea dintre inamic și erou**: Un inamic și eroul sunt distruși dacă se lovesc unul de altul
+   - **Inamicul lovește partea de jos a ecranului**: Un inamic și eroul sunt distruși dacă inamicul ajunge în partea de jos a ecranului
+
+Pe scurt, tu -- *eroul* -- trebuie să lovești toți inamicii cu un laser înainte ca aceștia să ajungă în partea de jos a ecranului.
+
+✅ Fă puțină cercetare despre primul joc pe calculator scris vreodată. Ce funcționalitate avea?
+
+Să fim eroici împreună!
+
+## Detectarea coliziunilor
+
+Cum facem detectarea coliziunilor? Trebuie să ne gândim la obiectele din joc ca la niște dreptunghiuri care se mișcă. De ce, te-ai putea întreba? Ei bine, imaginea folosită pentru a desena un obiect de joc este un dreptunghi: are un `x`, `y`, `lățime` și `înălțime`.
+
+Dacă două dreptunghiuri, adică un erou și un inamic, *se intersectează*, ai o coliziune. Ce ar trebui să se întâmple atunci depinde de regulile jocului. Pentru a implementa detectarea coliziunilor ai nevoie de următoarele:
+
+1. O metodă de a obține o reprezentare dreptunghiulară a unui obiect de joc, ceva de genul acesta:
+
+   ```javascript
+   rectFromGameObject() {
+     return {
+       top: this.y,
+       left: this.x,
+       bottom: this.y + this.height,
+       right: this.x + this.width
+     }
+   }
+   ```
+
+2. O funcție de comparație, care poate arăta astfel:
+
+   ```javascript
+   function intersectRect(r1, r2) {
+     return !(r2.left > r1.right ||
+       r2.right < r1.left ||
+       r2.top > r1.bottom ||
+       r2.bottom < r1.top);
+   }
+   ```
+
+## Cum distrugem lucruri
+
+Pentru a distruge lucruri într-un joc, trebuie să informezi jocul că nu ar mai trebui să deseneze acel obiect în bucla jocului care se declanșează la un anumit interval. O modalitate de a face acest lucru este să marchezi un obiect de joc ca fiind *mort* atunci când se întâmplă ceva, astfel:
+
+```javascript
+// collision happened
+enemy.dead = true
+```
+
+Apoi poți elimina obiectele *moarte* înainte de a redesena ecranul, astfel:
+
+```javascript
+gameObjects = gameObject.filter(go => !go.dead);
+```
+
+## Cum tragem cu un laser
+
+Tragerea cu un laser înseamnă să răspunzi la un eveniment de tastă și să creezi un obiect care se mișcă într-o anumită direcție. Prin urmare, trebuie să parcurgem următorii pași:
+
+1. **Creează un obiect laser**: din partea de sus a navei eroului, care, odată creat, începe să se miște în sus spre partea de sus a ecranului.
+2. **Atașează cod la un eveniment de tastă**: trebuie să alegem o tastă de pe tastatură care să reprezinte acțiunea de tragere a laserului de către jucător.
+3. **Creează un obiect de joc care arată ca un laser** atunci când tasta este apăsată.
+
+## Cooldown pentru laser
+
+Laserul trebuie să fie tras de fiecare dată când apeși o tastă, cum ar fi *space*, de exemplu. Pentru a preveni ca jocul să producă prea multe lasere într-un timp scurt, trebuie să remediem acest lucru. Soluția este implementarea unui așa-numit *cooldown*, un cronometru, care asigură că un laser poate fi tras doar la anumite intervale. Poți implementa acest lucru astfel:
+
+```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.
+    }
+  }
+}
+```
+
+✅ Consultă lecția 1 din seria jocului spațial pentru a-ți reaminti despre *cooldowns*.
+
+## Ce să construiești
+
+Vei lua codul existent (pe care ar fi trebuit să-l cureți și să-l refactorizezi) din lecția anterioară și îl vei extinde. Poți începe fie cu codul din partea a II-a, fie cu codul de la [Partea III - starter](../../../../../../../../../your-work).
+
+> sfat: laserul cu care vei lucra este deja în folderul tău de resurse și este referit de codul tău
+
+- **Adaugă detectarea coliziunilor**, când un laser se ciocnește cu ceva, următoarele reguli ar trebui să se aplice:
+   1. **Laserul lovește inamicul**: inamicul moare dacă este lovit de un laser
+   2. **Laserul lovește partea de sus a ecranului**: Un laser este distrus dacă lovește partea de sus a ecranului
+   3. **Coliziunea dintre inamic și erou**: un inamic și eroul sunt distruși dacă se lovesc unul de altul
+   4. **Inamicul lovește partea de jos a ecranului**: Un inamic și eroul sunt distruși dacă inamicul ajunge în partea de jos a ecranului
+
+## Pași recomandați
+
+Găsește fișierele care au fost create pentru tine în subfolderul `your-work`. Acesta ar trebui să conțină următoarele:
+
+```bash
+-| assets
+  -| enemyShip.png
+  -| player.png
+  -| laserRed.png
+-| index.html
+-| app.js
+-| package.json
+```
+
+Pornește proiectul din folderul `your_work` tastând:
+
+```bash
+cd your-work
+npm start
+```
+
+Comanda de mai sus va porni un server HTTP la adresa `http://localhost:5000`. Deschide un browser și introdu acea adresă, iar în acest moment ar trebui să afișeze eroul și toți inamicii, dar nimic nu se mișcă - încă :).
+
+### Adaugă cod
+
+1. **Configurează o reprezentare dreptunghiulară a obiectului tău de joc pentru a gestiona coliziunile** Codul de mai jos îți permite să obții o reprezentare dreptunghiulară a unui `GameObject`. Editează clasa GameObject pentru a o extinde:
+
+    ```javascript
+    rectFromGameObject() {
+        return {
+          top: this.y,
+          left: this.x,
+          bottom: this.y + this.height,
+          right: this.x + this.width,
+        };
+      }
+    ```
+
+2. **Adaugă cod care verifică coliziunile** Aceasta va fi o funcție nouă care testează dacă două dreptunghiuri se intersectează:
+
+    ```javascript
+    function intersectRect(r1, r2) {
+      return !(
+        r2.left > r1.right ||
+        r2.right < r1.left ||
+        r2.top > r1.bottom ||
+        r2.bottom < r1.top
+      );
+    }
+    ```
+
+3. **Adaugă capacitatea de a trage cu laserul**
+   1. **Adaugă un mesaj pentru evenimentul de tastă**. Tasta *space* ar trebui să creeze un laser chiar deasupra navei eroului. Adaugă trei constante în obiectul Messages:
+
+       ```javascript
+        KEY_EVENT_SPACE: "KEY_EVENT_SPACE",
+        COLLISION_ENEMY_LASER: "COLLISION_ENEMY_LASER",
+        COLLISION_ENEMY_HERO: "COLLISION_ENEMY_HERO",
+       ```
+
+   1. **Gestionează tasta space**. Editează funcția `window.addEventListener` pentru evenimentul keyup pentru a gestiona tasta space:
+
+      ```javascript
+        } else if(evt.keyCode === 32) {
+          eventEmitter.emit(Messages.KEY_EVENT_SPACE);
+        }
+      ```
+
+    1. **Adaugă ascultători**. Editează funcția `initGame()` pentru a te asigura că eroul poate trage când tasta space este apăsată:
+
+       ```javascript
+       eventEmitter.on(Messages.KEY_EVENT_SPACE, () => {
+        if (hero.canFire()) {
+          hero.fire();
+        }
+       ```
+
+       și adaugă o nouă funcție `eventEmitter.on()` pentru a asigura comportamentul atunci când un inamic se ciocnește cu un laser:
+
+          ```javascript
+          eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => {
+            first.dead = true;
+            second.dead = true;
+          })
+          ```
+
+   1. **Mișcă obiectul**, Asigură-te că laserul se deplasează treptat spre partea de sus a ecranului. Vei crea o nouă clasă Laser care extinde `GameObject`, așa cum ai făcut înainte: 
+   
+      ```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. **Gestionează coliziunile**, Implementează regulile de coliziune pentru laser. Adaugă o funcție `updateGameObjects()` care testează obiectele care se ciocnesc:
+
+      ```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);
+      }  
+      ```
+
+      Asigură-te că adaugi `updateGameObjects()` în bucla jocului din `window.onload`.
+
+   4. **Implementează cooldown** pentru laser, astfel încât să poată fi tras doar la anumite intervale.
+
+      În cele din urmă, editează clasa Hero astfel încât să poată gestiona cooldown-ul:
+
+       ```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;
+        }
+      }
+      ```
+
+În acest moment, jocul tău are ceva funcționalitate! Poți naviga cu tastele săgeți, trage cu laserul folosind tasta space, iar inamicii dispar când îi lovești. Bravo!
+
+---
+
+## 🚀 Provocare
+
+Adaugă o explozie! Aruncă o privire la resursele jocului din [repo-ul Space Art](../../../../6-space-game/solution/spaceArt/readme.txt) și încearcă să adaugi o explozie atunci când laserul lovește un extraterestru.
+
+## Chestionar Post-Lecție
+
+[Chestionar post-lecție](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/36)
+
+## Recapitulare și Studiu Individual
+
+Experimentează cu intervalele din jocul tău de până acum. Ce se întâmplă când le schimbi? Citește mai multe despre [evenimentele de temporizare în JavaScript](https://www.freecodecamp.org/news/javascript-timing-events-settimeout-and-setinterval/).
+
+## Temă
+
+[Explorează coliziunile](assignment.md)
+
+---
+
+**Declinare de responsabilitate**:  
+Acest document a fost tradus folosind serviciul de traducere AI [Co-op Translator](https://github.com/Azure/co-op-translator). Deși ne străduim să asigurăm acuratețea, vă rugăm să fiți conștienți că traducerile automate pot conține erori sau inexactități. Documentul original în limba sa natală ar trebui considerat sursa autoritară. Pentru informații critice, se recomandă traducerea profesională realizată de un specialist uman. Nu ne asumăm responsabilitatea pentru eventualele neînțelegeri sau interpretări greșite care pot apărea din utilizarea acestei traduceri.
\ No newline at end of file
diff --git a/translations/ro/6-space-game/4-collision-detection/assignment.md b/translations/ro/6-space-game/4-collision-detection/assignment.md
new file mode 100644
index 00000000..3920d327
--- /dev/null
+++ b/translations/ro/6-space-game/4-collision-detection/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "8a0a097b45e7c75a611e2795e4013f16",
+  "translation_date": "2025-08-27T22:22:47+00:00",
+  "source_file": "6-space-game/4-collision-detection/assignment.md",
+  "language_code": "ro"
+}
+-->
+# Explorează Coliziunile
+
+## Instrucțiuni
+
+Pentru a înțelege mai bine cum funcționează coliziunile, construiește un joc foarte simplu cu câteva obiecte care se ciocnesc. Fă-le să se miște prin apăsări de taste sau clicuri de mouse și creează un efect asupra unuia dintre obiecte atunci când este lovit. Poate fi ceva de genul unui meteorit care lovește Pământul sau mașinuțe tamponându-se. Fii creativ!
+
+## Criterii de evaluare
+
+| Criterii | Exemplu de performanță                                                                                                   | Adecvate                       | Necesită îmbunătățiri |
+| -------- | ------------------------------------------------------------------------------------------------------------------------ | ------------------------------ | ---------------------- |
+|          | Este produs un exemplu complet de cod funcțional, cu obiecte desenate pe canvas, coliziuni de bază și reacții care au loc | Codul este incomplet într-un fel | Codul nu funcționează corect |
+
+---
+
+**Declinare de responsabilitate**:  
+Acest document a fost tradus folosind serviciul de traducere AI [Co-op Translator](https://github.com/Azure/co-op-translator). Deși ne străduim să asigurăm acuratețea, vă rugăm să rețineți că traducerile automate pot conține erori sau inexactități. Documentul original în limba sa natală ar trebui considerat sursa autoritară. Pentru informații critice, se recomandă traducerea profesională realizată de un specialist uman. Nu ne asumăm responsabilitatea pentru eventualele neînțelegeri sau interpretări greșite care pot apărea din utilizarea acestei traduceri.
\ No newline at end of file
diff --git a/translations/ro/6-space-game/4-collision-detection/solution/README.md b/translations/ro/6-space-game/4-collision-detection/solution/README.md
new file mode 100644
index 00000000..d851b2d9
--- /dev/null
+++ b/translations/ro/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:23:24+00:00",
+  "source_file": "6-space-game/4-collision-detection/solution/README.md",
+  "language_code": "ro"
+}
+-->
+Acesta este un substitut, lăsat gol în mod intenționat
+
+---
+
+**Declinare de responsabilitate**:  
+Acest document a fost tradus folosind serviciul de traducere AI [Co-op Translator](https://github.com/Azure/co-op-translator). Deși ne străduim să asigurăm acuratețea, vă rugăm să fiți conștienți că traducerile automate pot conține erori sau inexactități. Documentul original în limba sa maternă ar trebui considerat sursa autoritară. Pentru informații critice, se recomandă traducerea profesională realizată de un specialist uman. Nu ne asumăm responsabilitatea pentru eventualele neînțelegeri sau interpretări greșite care pot apărea din utilizarea acestei traduceri.
\ No newline at end of file
diff --git a/translations/ro/6-space-game/4-collision-detection/your-work/README.md b/translations/ro/6-space-game/4-collision-detection/your-work/README.md
new file mode 100644
index 00000000..ddad2fbd
--- /dev/null
+++ b/translations/ro/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:23:10+00:00",
+  "source_file": "6-space-game/4-collision-detection/your-work/README.md",
+  "language_code": "ro"
+}
+-->
+Acesta este un substitut, lăsat gol în mod intenționat
+
+---
+
+**Declinare de responsabilitate**:  
+Acest document a fost tradus folosind serviciul de traducere AI [Co-op Translator](https://github.com/Azure/co-op-translator). Deși ne străduim să asigurăm acuratețea, vă rugăm să fiți conștienți că traducerile automate pot conține erori sau inexactități. Documentul original în limba sa natală ar trebui considerat sursa autoritară. Pentru informații critice, se recomandă traducerea profesională realizată de un specialist uman. Nu ne asumăm responsabilitatea pentru eventualele neînțelegeri sau interpretări greșite care pot apărea din utilizarea acestei traduceri.
\ No newline at end of file
diff --git a/translations/ro/6-space-game/5-keeping-score/README.md b/translations/ro/6-space-game/5-keeping-score/README.md
new file mode 100644
index 00000000..65767d4c
--- /dev/null
+++ b/translations/ro/6-space-game/5-keeping-score/README.md
@@ -0,0 +1,203 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "4e8250db84b027c9ff816b4e4c093457",
+  "translation_date": "2025-08-27T22:15:57+00:00",
+  "source_file": "6-space-game/5-keeping-score/README.md",
+  "language_code": "ro"
+}
+-->
+# Construiește un Joc Spațial Partea 5: Scor și Vieți
+
+## Test înainte de lecție
+
+[Test înainte de lecție](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/37)
+
+În această lecție, vei învăța cum să adaugi un sistem de scor în joc și să calculezi viețile.
+
+## Desenează text pe ecran
+
+Pentru a putea afișa scorul jocului pe ecran, trebuie să știi cum să plasezi text pe ecran. Răspunsul este utilizarea metodei `fillText()` pe obiectul canvas. Poți controla și alte aspecte, cum ar fi fontul utilizat, culoarea textului și chiar alinierea acestuia (stânga, dreapta, centru). Mai jos este un exemplu de cod care desenează text pe ecran.
+
+```javascript
+ctx.font = "30px Arial";
+ctx.fillStyle = "red";
+ctx.textAlign = "right";
+ctx.fillText("show this on the screen", 0, 0);
+```
+
+✅ Citește mai multe despre [cum să adaugi text pe un canvas](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_text) și simte-te liber să-l personalizezi pentru a arăta mai interesant!
+
+## Viața, ca un concept de joc
+
+Conceptul de a avea vieți într-un joc este doar un număr. În contextul unui joc spațial, este obișnuit să atribui un set de vieți care sunt scăzute una câte una atunci când nava ta suferă daune. Este plăcut să poți afișa o reprezentare grafică a acestora, cum ar fi mini-nave sau inimioare, în loc de un număr.
+
+## Ce să construiești
+
+Hai să adăugăm următoarele în jocul tău:
+
+- **Scorul jocului**: Pentru fiecare navă inamică distrusă, eroul ar trebui să primească puncte. Sugestia noastră este 100 de puncte per navă. Scorul jocului ar trebui să fie afișat în colțul din stânga jos.
+- **Vieți**: Nava ta are trei vieți. Pierzi o viață de fiecare dată când o navă inamică se ciocnește de tine. Scorul vieților ar trebui să fie afișat în colțul din dreapta jos și să fie format din următoarea grafică ![imagine viață](../../../../translated_images/life.6fb9f50d53ee0413cd91aa411f7c296e10a1a6de5c4a4197c718b49bf7d63ebf.ro.png).
+
+## Pași recomandați
+
+Localizează fișierele care au fost create pentru tine în subfolderul `your-work`. Acesta ar trebui să conțină următoarele:
+
+```bash
+-| assets
+  -| enemyShip.png
+  -| player.png
+  -| laserRed.png
+-| index.html
+-| app.js
+-| package.json
+```
+
+Pornește proiectul din folderul `your_work` tastând:
+
+```bash
+cd your-work
+npm start
+```
+
+Comanda de mai sus va porni un server HTTP la adresa `http://localhost:5000`. Deschide un browser și introdu acea adresă. În acest moment, ar trebui să vezi eroul și toți inamicii, iar când apeși săgețile stânga și dreapta, eroul se mișcă și poate doborî inamicii.
+
+### Adaugă cod
+
+1. **Copiază activele necesare** din folderul `solution/assets/` în folderul `your-work`; vei adăuga activul `life.png`. Adaugă `lifeImg` în funcția window.onload:
+
+    ```javascript
+    lifeImg = await loadTexture("assets/life.png");
+    ```
+
+1. Adaugă `lifeImg` în lista de active:
+
+    ```javascript
+    let heroImg,
+    ...
+    lifeImg,
+    ...
+    eventEmitter = new EventEmitter();
+    ```
+  
+2. **Adaugă variabile**. Adaugă cod care reprezintă scorul total (0) și viețile rămase (3), afișează aceste scoruri pe ecran.
+
+3. **Extinde funcția `updateGameObjects()`**. Extinde funcția `updateGameObjects()` pentru a gestiona coliziunile cu inamicii:
+
+    ```javascript
+    enemies.forEach(enemy => {
+        const heroRect = hero.rectFromGameObject();
+        if (intersectRect(heroRect, enemy.rectFromGameObject())) {
+          eventEmitter.emit(Messages.COLLISION_ENEMY_HERO, { enemy });
+        }
+      })
+    ```
+
+4. **Adaugă `life` și `points`**. 
+   1. **Inițializează variabilele**. Sub `this.cooldown = 0` în clasa `Hero`, setează viața și punctele:
+
+        ```javascript
+        this.life = 3;
+        this.points = 0;
+        ```
+
+   1. **Desenează variabilele pe ecran**. Afișează aceste valori pe ecran:
+
+        ```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. **Adaugă metode în bucla jocului**. Asigură-te că adaugi aceste funcții în funcția window.onload sub `updateGameObjects()`:
+
+        ```javascript
+        drawPoints();
+        drawLife();
+        ```
+
+1. **Implementează regulile jocului**. Implementează următoarele reguli ale jocului:
+
+   1. **Pentru fiecare coliziune între erou și inamic**, scade o viață.
+   
+      Extinde clasa `Hero` pentru a face această scădere:
+
+        ```javascript
+        decrementLife() {
+          this.life--;
+          if (this.life === 0) {
+            this.dead = true;
+          }
+        }
+        ```
+
+   2. **Pentru fiecare laser care lovește un inamic**, crește scorul jocului cu 100 de puncte.
+
+      Extinde clasa `Hero` pentru a face această creștere:
+    
+        ```javascript
+          incrementPoints() {
+            this.points += 100;
+          }
+        ```
+
+        Adaugă aceste funcții în emițătorii de evenimente de coliziune:
+
+        ```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();
+        });
+        ```
+
+✅ Fă puțină cercetare pentru a descoperi alte jocuri create folosind JavaScript/Canvas. Care sunt trăsăturile lor comune?
+
+La finalul acestei lucrări, ar trebui să vezi micile nave 'viață' în colțul din dreapta jos, punctele în colțul din stânga jos, și ar trebui să vezi cum numărul de vieți scade pe măsură ce te ciocnești cu inamicii și cum punctele cresc când dobori inamicii. Bravo! Jocul tău este aproape complet.
+
+---
+
+## 🚀 Provocare
+
+Codul tău este aproape complet. Poți să-ți imaginezi următorii pași?
+
+## Test după lecție
+
+[Test după lecție](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/38)
+
+## Recapitulare și Studiu Individual
+
+Cercetează câteva moduri prin care poți crește și scădea scorurile și viețile în joc. Există câteva motoare de joc interesante, cum ar fi [PlayFab](https://playfab.com). Cum ar putea utilizarea unuia dintre acestea să îmbunătățească jocul tău?
+
+## Temă
+
+[Construiește un Joc cu Scor](assignment.md)
+
+---
+
+**Declinare de responsabilitate**:  
+Acest document a fost tradus folosind serviciul de traducere AI [Co-op Translator](https://github.com/Azure/co-op-translator). Deși ne străduim să asigurăm acuratețea, vă rugăm să rețineți că traducerile automate pot conține erori sau inexactități. Documentul original în limba sa natală ar trebui considerat sursa autoritară. Pentru informații critice, se recomandă traducerea profesională realizată de un specialist uman. Nu ne asumăm responsabilitatea pentru eventualele neînțelegeri sau interpretări greșite care pot apărea din utilizarea acestei traduceri.
\ No newline at end of file
diff --git a/translations/ro/6-space-game/5-keeping-score/assignment.md b/translations/ro/6-space-game/5-keeping-score/assignment.md
new file mode 100644
index 00000000..8cea6091
--- /dev/null
+++ b/translations/ro/6-space-game/5-keeping-score/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "81f292dbda01685b91735e0398dc0504",
+  "translation_date": "2025-08-27T22:16:55+00:00",
+  "source_file": "6-space-game/5-keeping-score/assignment.md",
+  "language_code": "ro"
+}
+-->
+# Construiește un Joc de Scor
+
+## Instrucțiuni
+
+Creează un joc în care să afișezi viața și punctele într-un mod creativ. O sugestie ar fi să arăți viața sub formă de inimi și punctele ca un număr mare în partea de jos, centrat pe ecran. Aruncă o privire aici pentru [Resurse gratuite pentru jocuri](https://www.kenney.nl/)
+
+# Criterii de Evaluare
+
+| Criteriu | Exemplu               | Adecvat                     | Necesită Îmbunătățiri      |
+| -------- | --------------------- | --------------------------- | -------------------------- |
+|          | jocul complet este prezentat | jocul este parțial prezentat | jocul parțial conține erori |
+
+---
+
+**Declinare de responsabilitate**:  
+Acest document a fost tradus folosind serviciul de traducere AI [Co-op Translator](https://github.com/Azure/co-op-translator). Deși ne străduim să asigurăm acuratețea, vă rugăm să fiți conștienți că traducerile automate pot conține erori sau inexactități. Documentul original în limba sa natală ar trebui considerat sursa autoritară. Pentru informații critice, se recomandă traducerea profesională realizată de un specialist uman. Nu ne asumăm responsabilitatea pentru eventualele neînțelegeri sau interpretări greșite care pot apărea din utilizarea acestei traduceri.
\ No newline at end of file
diff --git a/translations/ro/6-space-game/5-keeping-score/solution/README.md b/translations/ro/6-space-game/5-keeping-score/solution/README.md
new file mode 100644
index 00000000..0f405b2b
--- /dev/null
+++ b/translations/ro/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:17:27+00:00",
+  "source_file": "6-space-game/5-keeping-score/solution/README.md",
+  "language_code": "ro"
+}
+-->
+Acesta este un substitut, lăsat gol în mod intenționat
+
+---
+
+**Declinare de responsabilitate**:  
+Acest document a fost tradus folosind serviciul de traducere AI [Co-op Translator](https://github.com/Azure/co-op-translator). Deși ne străduim să asigurăm acuratețea, vă rugăm să fiți conștienți că traducerile automate pot conține erori sau inexactități. Documentul original în limba sa natală ar trebui considerat sursa autoritară. Pentru informații critice, se recomandă traducerea profesională realizată de un specialist uman. Nu ne asumăm responsabilitatea pentru eventualele neînțelegeri sau interpretări greșite care pot apărea din utilizarea acestei traduceri.
\ No newline at end of file
diff --git a/translations/ro/6-space-game/5-keeping-score/your-work/README.md b/translations/ro/6-space-game/5-keeping-score/your-work/README.md
new file mode 100644
index 00000000..b37e4f72
--- /dev/null
+++ b/translations/ro/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:17:13+00:00",
+  "source_file": "6-space-game/5-keeping-score/your-work/README.md",
+  "language_code": "ro"
+}
+-->
+Acesta este un substitut, lăsat gol în mod intenționat
+
+---
+
+**Declinare de responsabilitate**:  
+Acest document a fost tradus folosind serviciul de traducere AI [Co-op Translator](https://github.com/Azure/co-op-translator). Deși ne străduim să asigurăm acuratețea, vă rugăm să fiți conștienți că traducerile automate pot conține erori sau inexactități. Documentul original în limba sa natală ar trebui considerat sursa autoritară. Pentru informații critice, se recomandă traducerea profesională realizată de un specialist uman. Nu ne asumăm responsabilitatea pentru eventualele neînțelegeri sau interpretări greșite care pot apărea din utilizarea acestei traduceri.
\ No newline at end of file
diff --git a/translations/ro/6-space-game/6-end-condition/README.md b/translations/ro/6-space-game/6-end-condition/README.md
new file mode 100644
index 00000000..4e810932
--- /dev/null
+++ b/translations/ro/6-space-game/6-end-condition/README.md
@@ -0,0 +1,236 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "01336cddd638242e99b133614111ea40",
+  "translation_date": "2025-08-27T22:25:10+00:00",
+  "source_file": "6-space-game/6-end-condition/README.md",
+  "language_code": "ro"
+}
+-->
+# Construiește un Joc Spațial Partea 6: Final și Restart
+
+## Chestionar Pre-Lecție
+
+[Chestionar pre-lecție](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/39)
+
+Există diferite moduri de a exprima o *condiție de final* într-un joc. Depinde de tine, ca creator al jocului, să decizi de ce jocul se termină. Iată câteva motive, presupunând că vorbim despre jocul spațial pe care l-ai construit până acum:
+
+- **Au fost distruse `N` nave inamice**: Este destul de comun ca, dacă împarți un joc în diferite niveluri, să fie necesar să distrugi `N` nave inamice pentru a completa un nivel.
+- **Nava ta a fost distrusă**: Există cu siguranță jocuri în care pierzi dacă nava ta este distrusă. O altă abordare comună este conceptul de vieți. De fiecare dată când nava ta este distrusă, pierzi o viață. Odată ce toate viețile sunt pierdute, pierzi jocul.
+- **Ai colectat `N` puncte**: O altă condiție comună de final este să colectezi puncte. Modul în care obții punctele depinde de tine, dar este destul de comun să atribui puncte pentru diverse activități, cum ar fi distrugerea unei nave inamice sau colectarea unor obiecte care *cad* atunci când sunt distruse.
+- **Completează un nivel**: Acest lucru poate implica mai multe condiții, cum ar fi distrugerea a `X` nave inamice, colectarea a `Y` puncte sau poate colectarea unui obiect specific.
+
+## Restart
+
+Dacă oamenilor le place jocul tău, este probabil să dorească să-l rejocă. Odată ce jocul se termină, indiferent de motiv, ar trebui să oferi o opțiune de restart.
+
+✅ Gândește-te puțin la condițiile în care consideri că un joc se termină și cum ești invitat să-l repornești.
+
+## Ce să construiești
+
+Vei adăuga aceste reguli jocului tău:
+
+1. **Câștigarea jocului**. Odată ce toate navele inamice au fost distruse, câștigi jocul. În plus, afișează un mesaj de victorie.
+1. **Restart**. Odată ce toate viețile sunt pierdute sau jocul este câștigat, ar trebui să oferi o modalitate de a reporni jocul. Amintește-ți! Va trebui să reinitializezi jocul, iar starea anterioară a jocului ar trebui să fie ștearsă.
+
+## Pași recomandați
+
+Găsește fișierele care au fost create pentru tine în subfolderul `your-work`. Acesta ar trebui să conțină următoarele:
+
+```bash
+-| assets
+  -| enemyShip.png
+  -| player.png
+  -| laserRed.png
+  -| life.png
+-| index.html
+-| app.js
+-| package.json
+```
+
+Pornește proiectul din folderul `your_work` tastând:
+
+```bash
+cd your-work
+npm start
+```
+
+Comanda de mai sus va porni un server HTTP la adresa `http://localhost:5000`. Deschide un browser și introdu acea adresă. Jocul tău ar trebui să fie într-o stare jucabilă.
+
+> sfat: pentru a evita avertismentele în Visual Studio Code, editează funcția `window.onload` pentru a apela `gameLoopId` așa cum este (fără `let`) și declară `gameLoopId` în partea de sus a fișierului, independent: `let gameLoopId;`
+
+### Adaugă cod
+
+1. **Urmărește condiția de final**. Adaugă cod care ține evidența numărului de inamici sau dacă nava eroului a fost distrusă, adăugând aceste două funcții:
+
+    ```javascript
+    function isHeroDead() {
+      return hero.life <= 0;
+    }
+
+    function isEnemiesDead() {
+      const enemies = gameObjects.filter((go) => go.type === "Enemy" && !go.dead);
+      return enemies.length === 0;
+    }
+    ```
+
+1. **Adaugă logică în handler-ele de mesaje**. Editează `eventEmitter` pentru a gestiona aceste condiții:
+
+    ```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. **Adaugă noi tipuri de mesaje**. Adaugă aceste Mesaje în obiectul constants:
+
+    ```javascript
+    GAME_END_LOSS: "GAME_END_LOSS",
+    GAME_END_WIN: "GAME_END_WIN",
+    ```
+
+2. **Adaugă cod pentru restart** care repornește jocul la apăsarea unui buton selectat.
+
+   1. **Ascultă apăsarea tastei `Enter`**. Editează eventListener-ul ferestrei pentru a asculta această apăsare:
+
+    ```javascript
+     else if(evt.key === "Enter") {
+        eventEmitter.emit(Messages.KEY_EVENT_ENTER);
+      }
+    ```
+
+   1. **Adaugă mesajul de restart**. Adaugă acest Mesaj în constantul Messages:
+
+        ```javascript
+        KEY_EVENT_ENTER: "KEY_EVENT_ENTER",
+        ```
+
+1. **Implementează regulile jocului**. Implementează următoarele reguli:
+
+   1. **Condiția de câștig a jucătorului**. Când toate navele inamice sunt distruse, afișează un mesaj de victorie.
+
+      1. Mai întâi, creează o funcție `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. Creează o funcție `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. **Logica de restart**. Când toate viețile sunt pierdute sau jucătorul a câștigat jocul, afișează că jocul poate fi repornit. În plus, repornește jocul când tasta de *restart* este apăsată (poți decide ce tastă să fie mapată pentru restart).
+
+      1. Creează funcția `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. Adaugă un apel la `eventEmitter` pentru a reseta jocul în `initGame()`:
+
+        ```javascript
+        eventEmitter.on(Messages.KEY_EVENT_ENTER, () => {
+          resetGame();
+        });
+        ```
+
+     1. Adaugă o funcție `clear()` în EventEmitter:
+
+        ```javascript
+        clear() {
+          this.listeners = {};
+        }
+        ```
+
+👽 💥 🚀 Felicitări, Căpitane! Jocul tău este complet! Bravo! 🚀 💥 👽
+
+---
+
+## 🚀 Provocare
+
+Adaugă un sunet! Poți adăuga un sunet pentru a îmbunătăți experiența de joc, poate atunci când există o lovitură de laser, sau când eroul moare sau câștigă? Aruncă o privire la acest [sandbox](https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_audio_play) pentru a învăța cum să redai sunete folosind JavaScript.
+
+## Chestionar Post-Lecție
+
+[Chestionar post-lecție](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/40)
+
+## Recapitulare și Studiu Individual
+
+Sarcina ta este să creezi un joc nou, așa că explorează câteva jocuri interesante pentru a vedea ce tip de joc ai putea construi.
+
+## Temă
+
+[Construiește un Joc Exemplu](assignment.md)
+
+---
+
+**Declinare de responsabilitate**:  
+Acest document a fost tradus folosind serviciul de traducere AI [Co-op Translator](https://github.com/Azure/co-op-translator). Deși ne străduim să asigurăm acuratețea, vă rugăm să rețineți că traducerile automate pot conține erori sau inexactități. Documentul original în limba sa natală ar trebui considerat sursa autoritară. Pentru informații critice, se recomandă traducerea profesională realizată de un specialist uman. Nu ne asumăm responsabilitatea pentru eventualele neînțelegeri sau interpretări greșite care pot apărea din utilizarea acestei traduceri.
\ No newline at end of file
diff --git a/translations/ro/6-space-game/6-end-condition/assignment.md b/translations/ro/6-space-game/6-end-condition/assignment.md
new file mode 100644
index 00000000..bd1004be
--- /dev/null
+++ b/translations/ro/6-space-game/6-end-condition/assignment.md
@@ -0,0 +1,33 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "24201cf428c7edba1ccec2a78a0dd8f8",
+  "translation_date": "2025-08-27T22:26:15+00:00",
+  "source_file": "6-space-game/6-end-condition/assignment.md",
+  "language_code": "ro"
+}
+-->
+# Construiește un Joc Simplu
+
+## Instrucțiuni
+
+Încearcă să construiești un joc mic în care să exersezi diferite condiții de final. Variază între obținerea unui număr de puncte, eroul pierde toate viețile sau toți monștrii sunt învinși. Construiește ceva simplu, cum ar fi un joc de aventură bazat pe consolă. Folosește fluxul de joc de mai jos ca inspirație:
+
+```
+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****
+```
+
+## Criterii de Evaluare
+
+| Criterii | Exemplar               | Adecvat                     | Necesită Îmbunătățiri      |
+| -------- | ---------------------- | --------------------------- | -------------------------- |
+|          | jocul complet este prezentat | jocul este parțial prezentat | jocul parțial conține erori |
+
+---
+
+**Declinare de responsabilitate**:  
+Acest document a fost tradus folosind serviciul de traducere AI [Co-op Translator](https://github.com/Azure/co-op-translator). Deși ne străduim să asigurăm acuratețea, vă rugăm să rețineți că traducerile automate pot conține erori sau inexactități. Documentul original în limba sa natală ar trebui considerat sursa autoritară. Pentru informații critice, se recomandă traducerea profesională realizată de un specialist uman. Nu ne asumăm responsabilitatea pentru eventualele neînțelegeri sau interpretări greșite care pot apărea din utilizarea acestei traduceri.
\ No newline at end of file
diff --git a/translations/ro/6-space-game/6-end-condition/solution/README.md b/translations/ro/6-space-game/6-end-condition/solution/README.md
new file mode 100644
index 00000000..bba63a72
--- /dev/null
+++ b/translations/ro/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:26:46+00:00",
+  "source_file": "6-space-game/6-end-condition/solution/README.md",
+  "language_code": "ro"
+}
+-->
+Acesta este un substitut, lăsat gol în mod intenționat
+
+---
+
+**Declinare de responsabilitate**:  
+Acest document a fost tradus folosind serviciul de traducere AI [Co-op Translator](https://github.com/Azure/co-op-translator). Deși ne străduim să asigurăm acuratețea, vă rugăm să rețineți că traducerile automate pot conține erori sau inexactități. Documentul original în limba sa natală ar trebui considerat sursa autoritară. Pentru informații critice, se recomandă traducerea profesională realizată de un specialist uman. Nu ne asumăm responsabilitatea pentru eventualele neînțelegeri sau interpretări greșite care pot apărea din utilizarea acestei traduceri.
\ No newline at end of file
diff --git a/translations/ro/6-space-game/6-end-condition/your-work/README.md b/translations/ro/6-space-game/6-end-condition/your-work/README.md
new file mode 100644
index 00000000..cf3760e0
--- /dev/null
+++ b/translations/ro/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:26:34+00:00",
+  "source_file": "6-space-game/6-end-condition/your-work/README.md",
+  "language_code": "ro"
+}
+-->
+Acesta este un substitut, lăsat gol în mod intenționat
+
+---
+
+**Declinare de responsabilitate**:  
+Acest document a fost tradus folosind serviciul de traducere AI [Co-op Translator](https://github.com/Azure/co-op-translator). Deși ne străduim să asigurăm acuratețea, vă rugăm să rețineți că traducerile automate pot conține erori sau inexactități. Documentul original în limba sa natală ar trebui considerat sursa autoritară. Pentru informații critice, se recomandă traducerea profesională realizată de un specialist uman. Nu ne asumăm responsabilitatea pentru eventualele neînțelegeri sau interpretări greșite care pot apărea din utilizarea acestei traduceri.
\ No newline at end of file
diff --git a/translations/ro/6-space-game/README.md b/translations/ro/6-space-game/README.md
new file mode 100644
index 00000000..ca27135d
--- /dev/null
+++ b/translations/ro/6-space-game/README.md
@@ -0,0 +1,45 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "c40a698395ee5102715f7880bba3f2e7",
+  "translation_date": "2025-08-27T22:15:30+00:00",
+  "source_file": "6-space-game/README.md",
+  "language_code": "ro"
+}
+-->
+# Construiește un Joc Spațial
+
+Un joc spațial pentru a învăța concepte mai avansate de JavaScript
+
+În această lecție vei învăța cum să construiești propriul tău joc spațial. Dacă ai jucat vreodată jocul "Space Invaders", acest joc are aceeași idee: să controlezi o navă spațială și să tragi în monștrii care coboară de sus. Iată cum va arăta jocul finalizat:
+
+![Joc finalizat](../../../6-space-game/images/pewpew.gif)
+
+În aceste șase lecții vei învăța următoarele:
+
+- **Interacționează** cu elementul Canvas pentru a desena lucruri pe ecran
+- **Înțelege** sistemul de coordonate cartezian
+- **Învață** modelul Pub-Sub pentru a crea o arhitectură de joc solidă, ușor de întreținut și extins
+- **Folosește** Async/Await pentru a încărca resursele jocului
+- **Gestionează** evenimentele de la tastatură
+
+## Prezentare generală
+
+- Teorie
+   - [Introducere în construirea jocurilor cu JavaScript](1-introduction/README.md)
+- Practică
+   - [Desenarea pe canvas](2-drawing-to-canvas/README.md)
+   - [Mutarea elementelor pe ecran](3-moving-elements-around/README.md)
+   - [Detectarea coliziunilor](4-collision-detection/README.md)
+   - [Păstrarea scorului](5-keeping-score/README.md)
+   - [Încheierea și repornirea jocului](6-end-condition/README.md)
+
+## Credite
+
+Resursele utilizate pentru acest joc provin de la https://www.kenney.nl/.  
+Dacă ești pasionat de construirea jocurilor, acestea sunt niște resurse excelente, multe sunt gratuite, iar unele sunt contra cost.
+
+---
+
+**Declinare de responsabilitate**:  
+Acest document a fost tradus folosind serviciul de traducere AI [Co-op Translator](https://github.com/Azure/co-op-translator). Deși ne străduim să asigurăm acuratețea, vă rugăm să fiți conștienți că traducerile automate pot conține erori sau inexactități. Documentul original în limba sa natală ar trebui considerat sursa autoritară. Pentru informații critice, se recomandă traducerea profesională realizată de un specialist uman. Nu ne asumăm responsabilitatea pentru eventualele neînțelegeri sau interpretări greșite care pot apărea din utilizarea acestei traduceri.
\ No newline at end of file
diff --git a/translations/ro/6-space-game/solution/README.md b/translations/ro/6-space-game/solution/README.md
new file mode 100644
index 00000000..c7a246e1
--- /dev/null
+++ b/translations/ro/6-space-game/solution/README.md
@@ -0,0 +1,15 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "068cbb9b3c10a96d503f6cdd6c9ace8c",
+  "translation_date": "2025-08-27T22:26:59+00:00",
+  "source_file": "6-space-game/solution/README.md",
+  "language_code": "ro"
+}
+-->
+Acesta este un substitut, lăsat gol în mod intenționat
+
+---
+
+**Declinare de responsabilitate**:  
+Acest document a fost tradus folosind serviciul de traducere AI [Co-op Translator](https://github.com/Azure/co-op-translator). Deși ne străduim să asigurăm acuratețea, vă rugăm să rețineți că traducerile automate pot conține erori sau inexactități. Documentul original în limba sa natală ar trebui considerat sursa autoritară. Pentru informații critice, se recomandă traducerea profesională realizată de un specialist uman. Nu ne asumăm responsabilitatea pentru eventualele neînțelegeri sau interpretări greșite care pot apărea din utilizarea acestei traduceri.
\ No newline at end of file
diff --git a/translations/ro/7-bank-project/1-template-route/README.md b/translations/ro/7-bank-project/1-template-route/README.md
new file mode 100644
index 00000000..0ecc06a5
--- /dev/null
+++ b/translations/ro/7-bank-project/1-template-route/README.md
@@ -0,0 +1,322 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "8da1b5e2c63f749808858c53f37b8ce7",
+  "translation_date": "2025-08-27T23:01:29+00:00",
+  "source_file": "7-bank-project/1-template-route/README.md",
+  "language_code": "ro"
+}
+-->
+# Construirea unei aplicații bancare Partea 1: Șabloane HTML și rute într-o aplicație web
+
+## Chestionar înainte de curs
+
+[Chestionar înainte de curs](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/41)
+
+### Introducere
+
+De la apariția JavaScript în browsere, site-urile web au devenit mai interactive și mai complexe ca niciodată. Tehnologiile web sunt acum utilizate frecvent pentru a crea aplicații complet funcționale care rulează direct în browser, pe care le numim [aplicații web](https://en.wikipedia.org/wiki/Web_application). Deoarece aplicațiile web sunt foarte interactive, utilizatorii nu doresc să aștepte reîncărcarea completă a paginii de fiecare dată când se efectuează o acțiune. De aceea, JavaScript este utilizat pentru a actualiza HTML-ul direct folosind DOM-ul, oferind o experiență mai fluidă utilizatorului.
+
+În această lecție, vom pune bazele pentru a crea o aplicație bancară web, utilizând șabloane HTML pentru a crea mai multe ecrane care pot fi afișate și actualizate fără a fi nevoie să reîncărcăm întreaga pagină HTML.
+
+### Cerințe preliminare
+
+Ai nevoie de un server web local pentru a testa aplicația web pe care o vom construi în această lecție. Dacă nu ai unul, poți instala [Node.js](https://nodejs.org) și să folosești comanda `npx lite-server` din folderul proiectului tău. Aceasta va crea un server web local și va deschide aplicația ta într-un browser.
+
+### Pregătire
+
+Pe computerul tău, creează un folder numit `bank` cu un fișier numit `index.html` în interiorul său. Vom începe cu acest [șablon HTML de bază](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>
+```
+
+---
+
+## Șabloane HTML
+
+Dacă dorești să creezi mai multe ecrane pentru o pagină web, o soluție ar fi să creezi un fișier HTML pentru fiecare ecran pe care vrei să-l afișezi. Totuși, această soluție vine cu unele inconveniente:
+
+- Trebuie să reîncarci întregul HTML atunci când schimbi ecranul, ceea ce poate fi lent.
+- Este dificil să partajezi date între diferitele ecrane.
+
+O altă abordare este să ai un singur fișier HTML și să definești mai multe [șabloane HTML](https://developer.mozilla.org/docs/Web/HTML/Element/template) folosind elementul `<template>`. Un șablon este un bloc HTML reutilizabil care nu este afișat de browser și trebuie instanțiat la runtime folosind JavaScript.
+
+### Sarcină
+
+Vom crea o aplicație bancară cu două ecrane: pagina de autentificare și tabloul de bord. Mai întâi, să adăugăm în corpul HTML un element de rezervă pe care îl vom folosi pentru a instanția diferitele ecrane ale aplicației noastre:
+
+```html
+<div id="app">Loading...</div>
+```
+
+Îi atribuim un `id` pentru a fi mai ușor de localizat cu JavaScript mai târziu.
+
+> Sfat: deoarece conținutul acestui element va fi înlocuit, putem pune un mesaj sau un indicator de încărcare care va fi afișat în timp ce aplicația se încarcă.
+
+Apoi, să adăugăm mai jos șablonul HTML pentru pagina de autentificare. Deocamdată vom pune doar un titlu și o secțiune care conține un link pe care îl vom folosi pentru navigare.
+
+```html
+<template id="login">
+  <h1>Bank App</h1>
+  <section>
+    <a href="/dashboard">Login</a>
+  </section>
+</template>
+```
+
+Apoi vom adăuga un alt șablon HTML pentru pagina tabloului de bord. Această pagină va conține diferite secțiuni:
+
+- Un antet cu un titlu și un link de deconectare
+- Soldul curent al contului bancar
+- O listă de tranzacții, afișată într-un tabel
+
+```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>
+```
+
+> Sfat: când creezi șabloane HTML, dacă vrei să vezi cum arată, poți comenta liniile `<template>` și `</template>` înconjurându-le cu `<!-- -->`.
+
+✅ De ce crezi că folosim atributele `id` pe șabloane? Am putea folosi altceva, cum ar fi clasele?
+
+## Afișarea șabloanelor cu JavaScript
+
+Dacă încerci fișierul HTML curent într-un browser, vei vedea că rămâne blocat afișând `Loading...`. Asta pentru că trebuie să adăugăm ceva cod JavaScript pentru a instanția și afișa șabloanele HTML.
+
+Instanțierea unui șablon se face de obicei în 3 pași:
+
+1. Recuperarea elementului șablonului din DOM, de exemplu folosind [`document.getElementById`](https://developer.mozilla.org/docs/Web/API/Document/getElementById).
+2. Clonarea elementului șablonului, folosind [`cloneNode`](https://developer.mozilla.org/docs/Web/API/Node/cloneNode).
+3. Atașarea acestuia la DOM sub un element vizibil, de exemplu folosind [`appendChild`](https://developer.mozilla.org/docs/Web/API/Node/appendChild).
+
+✅ De ce trebuie să clonăm șablonul înainte de a-l atașa la DOM? Ce crezi că s-ar întâmpla dacă am sări peste acest pas?
+
+### Sarcină
+
+Creează un fișier nou numit `app.js` în folderul proiectului tău și importă acel fișier în secțiunea `<head>` a HTML-ului:
+
+```html
+<script src="app.js" defer></script>
+```
+
+Acum, în `app.js`, vom crea o funcție nouă numită `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);
+}
+```
+
+Ce facem aici sunt exact cei 3 pași descriși mai sus. Instanțiem șablonul cu id-ul `templateId` și punem conținutul clonat al acestuia în elementul de rezervă al aplicației noastre. Observă că trebuie să folosim `cloneNode(true)` pentru a copia întreaga subarbore a șablonului.
+
+Acum, apelează această funcție cu unul dintre șabloane și privește rezultatul.
+
+```js
+updateRoute('login');
+```
+
+✅ Care este scopul acestui cod `app.innerHTML = '';`? Ce se întâmplă fără el?
+
+## Crearea rutelor
+
+Când vorbim despre o aplicație web, numim *Routing* intenția de a mapa **URL-urile** la ecrane specifice care ar trebui afișate. Pe un site web cu mai multe fișiere HTML, acest lucru se face automat, deoarece căile fișierelor sunt reflectate în URL. De exemplu, cu aceste fișiere în folderul proiectului tău:
+
+```
+mywebsite/index.html
+mywebsite/login.html
+mywebsite/admin/index.html
+```
+
+Dacă creezi un server web cu `mywebsite` ca root, maparea URL-urilor va fi:
+
+```
+https://site.com            --> mywebsite/index.html
+https://site.com/login.html --> mywebsite/login.html
+https://site.com/admin/     --> mywebsite/admin/index.html
+```
+
+Totuși, pentru aplicația noastră web folosim un singur fișier HTML care conține toate ecranele, așa că acest comportament implicit nu ne va ajuta. Trebuie să creăm această mapare manual și să actualizăm șablonul afișat folosind JavaScript.
+
+### Sarcină
+
+Vom folosi un obiect simplu pentru a implementa o [mapare](https://en.wikipedia.org/wiki/Associative_array) între căile URL și șabloanele noastre. Adaugă acest obiect în partea de sus a fișierului `app.js`.
+
+```js
+const routes = {
+  '/login': { templateId: 'login' },
+  '/dashboard': { templateId: 'dashboard' },
+};
+```
+
+Acum să modificăm puțin funcția `updateRoute`. În loc să trecem direct `templateId` ca argument, vrem să-l recuperăm mai întâi uitându-ne la URL-ul curent și apoi să folosim maparea noastră pentru a obține valoarea corespunzătoare a id-ului șablonului. Putem folosi [`window.location.pathname`](https://developer.mozilla.org/docs/Web/API/Location/pathname) pentru a obține doar secțiunea de cale din 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);
+}
+```
+
+Aici am mapat rutele declarate la șablonul corespunzător. Poți încerca să vezi dacă funcționează corect schimbând URL-ul manual în browserul tău.
+
+✅ Ce se întâmplă dacă introduci o cale necunoscută în URL? Cum am putea rezolva acest lucru?
+
+## Adăugarea navigației
+
+Următorul pas pentru aplicația noastră este să adăugăm posibilitatea de a naviga între pagini fără a fi nevoie să schimbăm URL-ul manual. Acest lucru implică două lucruri:
+
+1. Actualizarea URL-ului curent
+2. Actualizarea șablonului afișat pe baza noului URL
+
+Am rezolvat deja partea a doua cu funcția `updateRoute`, așa că trebuie să ne dăm seama cum să actualizăm URL-ul curent.
+
+Va trebui să folosim JavaScript și, mai specific, [`history.pushState`](https://developer.mozilla.org/docs/Web/API/History/pushState), care permite actualizarea URL-ului și crearea unei noi intrări în istoricul de navigare, fără reîncărcarea HTML-ului.
+
+> Notă: Deși elementul HTML de ancoră [`<a href>`](https://developer.mozilla.org/docs/Web/HTML/Element/a) poate fi utilizat singur pentru a crea hyperlinkuri către diferite URL-uri, va face ca browserul să reîncarce HTML-ul implicit. Este necesar să prevenim acest comportament atunci când gestionăm rutarea cu JavaScript personalizat, folosind funcția `preventDefault()` pe evenimentul de clic.
+
+### Sarcină
+
+Să creăm o funcție nouă pe care o putem folosi pentru a naviga în aplicația noastră:
+
+```js
+function navigate(path) {
+  window.history.pushState({}, path, path);
+  updateRoute();
+}
+```
+
+Această metodă mai întâi actualizează URL-ul curent pe baza căii date, apoi actualizează șablonul. Proprietatea `window.location.origin` returnează root-ul URL-ului, permițându-ne să reconstruim un URL complet dintr-o cale dată.
+
+Acum că avem această funcție, putem rezolva problema pe care o avem dacă o cale nu se potrivește cu nicio rută definită. Vom modifica funcția `updateRoute` adăugând o soluție de rezervă la una dintre rutele existente dacă nu putem găsi o potrivire.
+
+```js
+function updateRoute() {
+  const path = window.location.pathname;
+  const route = routes[path];
+
+  if (!route) {
+    return navigate('/login');
+  }
+
+  ...
+```
+
+Dacă o rută nu poate fi găsită, vom redirecționa acum la pagina de `login`.
+
+Acum să creăm o funcție pentru a obține URL-ul atunci când un link este clicat și pentru a preveni comportamentul implicit al browserului pentru linkuri:
+
+```js
+function onLinkClick(event) {
+  event.preventDefault();
+  navigate(event.target.href);
+}
+```
+
+Să completăm sistemul de navigare adăugând legături pentru *Login* și *Logout* în HTML.
+
+```html
+<a href="/dashboard" onclick="onLinkClick(event)">Login</a>
+...
+<a href="/login" onclick="onLinkClick(event)">Logout</a>
+```
+
+Obiectul `event` de mai sus capturează evenimentul de clic și îl transmite funcției noastre `onLinkClick`.
+
+Folosind atributul [`onclick`](https://developer.mozilla.org/docs/Web/API/GlobalEventHandlers/onclick), leagă evenimentul de clic la codul JavaScript, aici apelul funcției `navigate()`.
+
+Încearcă să dai clic pe aceste linkuri, ar trebui să poți naviga acum între diferitele ecrane ale aplicației tale.
+
+✅ Metoda `history.pushState` face parte din standardul HTML5 și este implementată în [toate browserele moderne](https://caniuse.com/?search=pushState). Dacă construiești o aplicație web pentru browsere mai vechi, există un truc pe care îl poți folosi în locul acestei API: utilizând un [hash (`#`)](https://en.wikipedia.org/wiki/URI_fragment) înainte de cale, poți implementa rutarea care funcționează cu navigarea obișnuită prin ancoră și nu reîncarcă pagina, deoarece scopul său era să creeze linkuri interne într-o pagină.
+
+## Gestionarea butoanelor de înainte și înapoi ale browserului
+
+Utilizarea `history.pushState` creează noi intrări în istoricul de navigare al browserului. Poți verifica asta ținând apăsat *butonul de înapoi* al browserului, ar trebui să afișeze ceva de genul acesta:
+
+![Captură de ecran a istoricului de navigare](../../../../translated_images/history.7fdabbafa521e06455b738d3dafa3ff41d3071deae60ead8c7e0844b9ed987d8.ro.png)
+
+Dacă încerci să dai clic pe butonul de înapoi de câteva ori, vei vedea că URL-ul curent se schimbă și istoricul este actualizat, dar același șablon continuă să fie afișat.
+
+Asta pentru că aplicația nu știe că trebuie să apelăm `updateRoute()` de fiecare dată când istoricul se schimbă. Dacă te uiți la documentația [`history.pushState`](https://developer.mozilla.org/docs/Web/API/History/pushState), poți vedea că dacă starea se schimbă - adică ne-am mutat la un URL diferit - evenimentul [`popstate`](https://developer.mozilla.org/docs/Web/API/Window/popstate_event) este declanșat. Vom folosi asta pentru a rezolva problema.
+
+### Sarcină
+
+Pentru a ne asigura că șablonul afișat este actualizat atunci când istoricul browserului se schimbă, vom atașa o funcție nouă care apelează `updateRoute()`. Vom face asta în partea de jos a fișierului `app.js`:
+
+```js
+window.onpopstate = () => updateRoute();
+updateRoute();
+```
+
+> Notă: am folosit o [funcție săgeată](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions) aici pentru a declara handler-ul evenimentului `popstate` pentru concizie, dar o funcție obișnuită ar funcționa la fel.
+
+Iată un videoclip de recapitulare despre funcțiile săgeată:
+
+[![Funcții săgeată](https://img.youtube.com/vi/OP6eEbOj2sc/0.jpg)](https://youtube.com/watch?v=OP6eEbOj2sc "Funcții săgeată")
+
+> 🎥 Dă clic pe imaginea de mai sus pentru un videoclip despre funcțiile săgeată.
+
+Acum încearcă să folosești butoanele de înainte și înapoi ale browserului și verifică dacă ruta afișată este actualizată corect de această dată.
+
+---
+
+## 🚀 Provocare
+
+Adaugă un nou șablon și o rută pentru o a treia pagină care afișează creditele pentru această aplicație.
+
+## Chestionar după curs
+
+[Chestionar după curs](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/42)
+
+## Recapitulare și studiu individual
+
+Rutarea este una dintre părțile surprinzător de dificile ale dezvoltării web, mai ales pe măsură ce web-ul trece de la comportamente de reîmprospătare a paginilor la reîmprospătări ale aplicațiilor de tip Single Page Application. Citește puțin despre [cum serviciul Azure Static Web App](https://docs.microsoft.com/azure/static-web-apps/routes/?WT.mc_id=academic-77807-sagibbon) gestionează rutarea. Poți explica de ce unele dintre deciziile descrise în acel document sunt necesare?
+
+## Temă
+
+[Îmbunătățește rutarea](assignment.md)
+
+---
+
+**Declinare de responsabilitate**:  
+Acest document a fost tradus folosind serviciul de traducere AI [Co-op Translator](https://github.com/Azure/co-op-translator). Deși ne străduim să asigurăm acuratețea, vă rugăm să rețineți că traducerile automate pot conține erori sau inexactități. Documentul original în limba sa natală ar trebui considerat sursa autoritară. Pentru informații critice, se recomandă traducerea profesională realizată de un specialist uman. Nu ne asumăm responsabilitatea pentru eventualele neînțelegeri sau interpretări greșite care pot apărea din utilizarea acestei traduceri.
\ No newline at end of file
diff --git a/translations/ro/7-bank-project/1-template-route/assignment.md b/translations/ro/7-bank-project/1-template-route/assignment.md
new file mode 100644
index 00000000..b10b2da5
--- /dev/null
+++ b/translations/ro/7-bank-project/1-template-route/assignment.md
@@ -0,0 +1,28 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "8223e429218befa731dd5bfd22299520",
+  "translation_date": "2025-08-27T23:03:28+00:00",
+  "source_file": "7-bank-project/1-template-route/assignment.md",
+  "language_code": "ro"
+}
+-->
+# Îmbunătățirea rutării
+
+## Instrucțiuni
+
+Declarația rutelor conține în prezent doar ID-ul șablonului care trebuie utilizat. Dar, atunci când afișăm o pagină nouă, uneori este nevoie de ceva mai mult. Să îmbunătățim implementarea rutării cu două funcționalități suplimentare:
+
+- Atribuie titluri fiecărui șablon și actualizează titlul ferestrei cu acest nou titlu atunci când șablonul se schimbă.
+- Adaugă o opțiune pentru a rula un cod după ce șablonul se schimbă. Ne dorim să afișăm `'Dashboard is shown'` în consola dezvoltatorului de fiecare dată când pagina dashboard este afișată.
+
+## Criterii de evaluare
+
+| Criteriu | Exemplu                                                                                                                            | Adecvat                                                                                                                                                                                   | Necesită îmbunătățiri                                  |
+| -------- | ----------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------ |
+|          | Cele două funcționalități sunt implementate și funcționează. Titlul și adăugarea codului funcționează și pentru o rută nouă adăugată în declarația `routes`. | Cele două funcționalități funcționează, dar comportamentul este hardcodat și nu configurabil prin declarația `routes`. Adăugarea unei a treia rute cu titlu și cod funcționează parțial sau deloc. | Una dintre funcționalități lipsește sau nu funcționează corect. |
+
+---
+
+**Declinare de responsabilitate**:  
+Acest document a fost tradus folosind serviciul de traducere AI [Co-op Translator](https://github.com/Azure/co-op-translator). Deși ne străduim să asigurăm acuratețea, vă rugăm să rețineți că traducerile automate pot conține erori sau inexactități. Documentul original în limba sa natală ar trebui considerat sursa autoritară. Pentru informații critice, se recomandă traducerea profesională realizată de un specialist uman. Nu ne asumăm responsabilitatea pentru eventualele neînțelegeri sau interpretări greșite care pot apărea din utilizarea acestei traduceri.
\ No newline at end of file
diff --git a/translations/ro/7-bank-project/2-forms/README.md b/translations/ro/7-bank-project/2-forms/README.md
new file mode 100644
index 00000000..eea61582
--- /dev/null
+++ b/translations/ro/7-bank-project/2-forms/README.md
@@ -0,0 +1,313 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "b667b7d601e2ee19acb5aa9d102dc9f3",
+  "translation_date": "2025-08-27T22:55:32+00:00",
+  "source_file": "7-bank-project/2-forms/README.md",
+  "language_code": "ro"
+}
+-->
+# Construirea unei aplicații bancare Partea 2: Crearea unui formular de autentificare și înregistrare
+
+## Chestionar înainte de lecție
+
+[Chestionar înainte de lecție](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/43)
+
+### Introducere
+
+În aproape toate aplicațiile web moderne, poți crea un cont pentru a avea propriul spațiu privat. Deoarece mai mulți utilizatori pot accesa o aplicație web simultan, este nevoie de un mecanism pentru a stoca separat datele personale ale fiecărui utilizator și pentru a selecta ce informații să fie afișate. Nu vom acoperi modul de gestionare [securizată a identității utilizatorului](https://en.wikipedia.org/wiki/Authentication), deoarece este un subiect amplu în sine, dar vom asigura că fiecare utilizator poate crea unul (sau mai multe) conturi bancare în aplicația noastră.
+
+În această parte vom folosi formulare HTML pentru a adăuga autentificare și înregistrare în aplicația noastră web. Vom vedea cum să trimitem datele către un API de server programatic și, în cele din urmă, cum să definim reguli de validare de bază pentru datele introduse de utilizator.
+
+### Prerechizite
+
+Trebuie să fi finalizat [șabloanele HTML și rutarea](../1-template-route/README.md) aplicației web pentru această lecție. De asemenea, trebuie să instalezi [Node.js](https://nodejs.org) și să [rulezi API-ul serverului](../api/README.md) local, astfel încât să poți trimite date pentru a crea conturi.
+
+**Notă importantă**  
+Vei avea două terminale deschise simultan, așa cum este indicat mai jos:  
+1. Pentru aplicația bancară principală pe care am construit-o în lecția [șabloane HTML și rutare](../1-template-route/README.md)  
+2. Pentru [API-ul serverului aplicației bancare](../api/README.md) pe care tocmai l-am configurat mai sus.  
+
+Trebuie să ai ambele servere pornite pentru a putea urma restul lecției. Ele ascultă pe porturi diferite (portul `3000` și portul `5000`), astfel încât totul ar trebui să funcționeze bine.
+
+Poți testa dacă serverul funcționează corect executând această comandă într-un terminal:
+
+```sh
+curl http://localhost:5000/api
+# -> should return "Bank API v1.0.0" as a result
+```
+
+---
+
+## Formular și controale
+
+Elementul `<form>` încadrează o secțiune a unui document HTML unde utilizatorul poate introduce și trimite date folosind controale interactive. Există o mulțime de controale de interfață utilizator (UI) care pot fi utilizate într-un formular, cele mai comune fiind elementele `<input>` și `<button>`.
+
+Există multe [tipuri](https://developer.mozilla.org/docs/Web/HTML/Element/input) de `<input>`. De exemplu, pentru a crea un câmp unde utilizatorul poate introduce numele de utilizator, poți folosi:
+
+```html
+<input id="username" name="username" type="text">
+```
+
+Atributul `name` va fi utilizat ca nume de proprietate atunci când datele formularului vor fi trimise. Atributul `id` este folosit pentru a asocia un `<label>` cu controlul formularului.
+
+> Consultă lista completă de [tipuri de `<input>`](https://developer.mozilla.org/docs/Web/HTML/Element/input) și [alte controale de formular](https://developer.mozilla.org/docs/Learn/Forms/Other_form_controls) pentru a-ți face o idee despre toate elementele UI native pe care le poți folosi pentru a construi interfața ta.
+
+✅ Reține că `<input>` este un [element gol](https://developer.mozilla.org/docs/Glossary/Empty_element) pe care *nu* ar trebui să adaugi o etichetă de închidere corespunzătoare. Totuși, poți folosi notația de auto-închidere `<input/>`, dar nu este necesar.
+
+Elementul `<button>` dintr-un formular este puțin special. Dacă nu specifici atributul `type`, acesta va trimite automat datele formularului către server atunci când este apăsat. Iată valorile posibile pentru `type`:
+
+- `submit`: Implicit într-un `<form>`, butonul declanșează acțiunea de trimitere a formularului.
+- `reset`: Butonul resetează toate controalele formularului la valorile lor inițiale.
+- `button`: Nu atribuie un comportament implicit când butonul este apăsat. Poți apoi să atribui acțiuni personalizate folosind JavaScript.
+
+### Sarcină
+
+Să începem prin a adăuga un formular în șablonul `login`. Vom avea nevoie de un câmp pentru *nume de utilizator* și un buton *Login*.
+
+```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>
+```
+
+Dacă te uiți mai atent, poți observa că am adăugat și un element `<label>` aici. Elementele `<label>` sunt folosite pentru a adăuga un nume controalelor UI, cum ar fi câmpul nostru pentru numele de utilizator. Etichetele sunt importante pentru lizibilitatea formularelor tale, dar vin și cu beneficii suplimentare:
+
+- Prin asocierea unei etichete cu un control de formular, ajută utilizatorii care folosesc tehnologii asistive (cum ar fi cititoarele de ecran) să înțeleagă ce date trebuie să furnizeze.
+- Poți face clic pe etichetă pentru a pune direct focus pe controlul asociat, făcându-l mai ușor de accesat pe dispozitivele cu ecran tactil.
+
+> [Accesibilitatea](https://developer.mozilla.org/docs/Learn/Accessibility/What_is_accessibility) pe web este un subiect foarte important care este adesea trecut cu vederea. Datorită [elementelor HTML semantice](https://developer.mozilla.org/docs/Learn/Accessibility/HTML), nu este dificil să creezi conținut accesibil dacă le folosești corect. Poți [citi mai multe despre accesibilitate](https://developer.mozilla.org/docs/Web/Accessibility) pentru a evita greșelile comune și pentru a deveni un dezvoltator responsabil.
+
+Acum vom adăuga un al doilea formular pentru înregistrare, chiar sub cel anterior:
+
+```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>
+```
+
+Folosind atributul `value`, putem defini o valoare implicită pentru un anumit câmp de introducere.  
+Observă, de asemenea, că câmpul pentru `balance` are tipul `number`. Arată diferit față de celelalte câmpuri? Încearcă să interacționezi cu el.
+
+✅ Poți naviga și interacționa cu formularele folosind doar tastatura? Cum ai face asta?
+
+## Trimiterea datelor către server
+
+Acum că avem o interfață funcțională, următorul pas este să trimitem datele către server. Să facem un test rapid folosind codul nostru actual: ce se întâmplă dacă faci clic pe butonul *Login* sau *Register*?
+
+Ai observat schimbarea în secțiunea URL a browserului?
+
+![Captură de ecran cu schimbarea URL-ului browserului după apăsarea butonului Register](../../../../translated_images/click-register.e89a30bf0d4bc9ca867dc537c4cea679a7c26368bd790969082f524fed2355bc.ro.png)
+
+Acțiunea implicită pentru un `<form>` este să trimită formularul către URL-ul serverului curent folosind metoda [GET](https://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.3), adăugând datele formularului direct la URL. Totuși, această metodă are unele dezavantaje:
+
+- Datele trimise sunt foarte limitate ca dimensiune (aproximativ 2000 de caractere)
+- Datele sunt vizibile direct în URL (nu este ideal pentru parole)
+- Nu funcționează cu încărcarea de fișiere
+
+De aceea, poți schimba metoda pentru a folosi [POST](https://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.5), care trimite datele formularului către server în corpul cererii HTTP, fără limitările anterioare.
+
+> Deși POST este metoda cea mai utilizată pentru trimiterea datelor, [în unele scenarii specifice](https://www.w3.org/2001/tag/doc/whenToUseGet.html) este preferabil să folosești metoda GET, de exemplu atunci când implementezi un câmp de căutare.
+
+### Sarcină
+
+Adaugă proprietățile `action` și `method` formularului de înregistrare:
+
+```html
+<form id="registerForm" action="//localhost:5000/api/accounts" method="POST">
+```
+
+Acum încearcă să înregistrezi un nou cont cu numele tău. După ce faci clic pe butonul *Register*, ar trebui să vezi ceva de genul acesta:
+
+![O fereastră de browser la adresa localhost:5000/api/accounts, afișând un șir JSON cu datele utilizatorului](../../../../translated_images/form-post.61de4ca1b964d91a9e338416e19f218504dd0af5f762fbebabfe7ae80edf885f.ro.png)
+
+Dacă totul merge bine, serverul ar trebui să răspundă cererii tale cu un răspuns [JSON](https://www.json.org/json-en.html) care conține datele contului creat.
+
+✅ Încearcă să te înregistrezi din nou cu același nume. Ce se întâmplă?
+
+## Trimiterea datelor fără reîncărcarea paginii
+
+După cum probabil ai observat, există o mică problemă cu abordarea pe care tocmai am folosit-o: când trimitem formularul, ieșim din aplicația noastră, iar browserul redirecționează către URL-ul serverului. Încercăm să evităm toate reîncărcările paginii în aplicația noastră web, deoarece construim o [aplicație cu o singură pagină (SPA)](https://en.wikipedia.org/wiki/Single-page_application).
+
+Pentru a trimite datele formularului către server fără a forța o reîncărcare a paginii, trebuie să folosim cod JavaScript. În loc să punem un URL în proprietatea `action` a unui element `<form>`, poți folosi orice cod JavaScript precedat de șirul `javascript:` pentru a efectua o acțiune personalizată. Folosind aceasta înseamnă că va trebui să implementezi câteva sarcini care anterior erau realizate automat de browser:
+
+- Preluarea datelor formularului
+- Convertirea și codificarea datelor formularului într-un format adecvat
+- Crearea cererii HTTP și trimiterea acesteia către server
+
+### Sarcină
+
+Înlocuiește `action` formularului de înregistrare cu:
+
+```html
+<form id="registerForm" action="javascript:register()">
+```
+
+Deschide `app.js` și adaugă o funcție nouă numită `register`:
+
+```js
+function register() {
+  const registerForm = document.getElementById('registerForm');
+  const formData = new FormData(registerForm);
+  const data = Object.fromEntries(formData);
+  const jsonData = JSON.stringify(data);
+}
+```
+
+Aici preluăm elementul formularului folosind `getElementById()` și folosim ajutorul [`FormData`](https://developer.mozilla.org/docs/Web/API/FormData) pentru a extrage valorile din controalele formularului ca un set de perechi cheie/valoare. Apoi convertim datele într-un obiect obișnuit folosind [`Object.fromEntries()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/fromEntries) și, în cele din urmă, serializăm datele în [JSON](https://www.json.org/json-en.html), un format utilizat frecvent pentru schimbul de date pe web.
+
+Datele sunt acum pregătite pentru a fi trimise către server. Creează o funcție nouă numită `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' };
+  }
+}
+```
+
+Ce face această funcție? În primul rând, observă cuvântul cheie `async` aici. Acesta înseamnă că funcția conține cod care va fi executat [**asincron**](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/async_function). Când este utilizat împreună cu cuvântul cheie `await`, permite așteptarea executării codului asincron - cum ar fi așteptarea răspunsului serverului aici - înainte de a continua.
+
+Iată un videoclip rapid despre utilizarea `async/await`:
+
+[![Async și Await pentru gestionarea promisiunilor](https://img.youtube.com/vi/YwmlRkrxvkk/0.jpg)](https://youtube.com/watch?v=YwmlRkrxvkk "Async și Await pentru gestionarea promisiunilor")
+
+> 🎥 Fă clic pe imaginea de mai sus pentru un videoclip despre async/await.
+
+Folosim API-ul `fetch()` pentru a trimite date JSON către server. Această metodă ia 2 parametri:
+
+- URL-ul serverului, așa că punem `//localhost:5000/api/accounts` aici.
+- Setările cererii. Aici setăm metoda la `POST` și furnizăm `body` pentru cerere. Deoarece trimitem date JSON către server, trebuie să setăm și antetul `Content-Type` la `application/json`, astfel încât serverul să știe cum să interpreteze conținutul.
+
+Deoarece serverul va răspunde cererii cu JSON, putem folosi `await response.json()` pentru a analiza conținutul JSON și a returna obiectul rezultat. Reține că această metodă este asincronă, așa că folosim cuvântul cheie `await` aici înainte de a returna pentru a ne asigura că orice erori în timpul analizei sunt de asemenea capturate.
+
+Acum adaugă ceva cod în funcția `register` pentru a apela `createAccount()`:
+
+```js
+const result = await createAccount(jsonData);
+```
+
+Deoarece folosim cuvântul cheie `await` aici, trebuie să adăugăm cuvântul cheie `async` înaintea funcției register:
+
+```js
+async function register() {
+```
+
+În cele din urmă, să adăugăm câteva loguri pentru a verifica rezultatul. Funcția finală ar trebui să arate astfel:
+
+```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);
+}
+```
+
+A fost un pic lung, dar am ajuns acolo! Dacă deschizi [instrumentele pentru dezvoltatori ale browserului](https://developer.mozilla.org/docs/Learn/Common_questions/What_are_browser_developer_tools) și încerci să înregistrezi un nou cont, nu ar trebui să vezi nicio schimbare pe pagina web, dar un mesaj va apărea în consolă confirmând că totul funcționează.
+
+![Captură de ecran care arată mesajul de log în consola browserului](../../../../translated_images/browser-console.efaf0b51aaaf67782a29e1a0bb32cc063f189b18e894eb5926e02f1abe864ec2.ro.png)
+
+✅ Crezi că datele sunt trimise către server în mod securizat? Ce se întâmplă dacă cineva ar putea intercepta cererea? Poți citi despre [HTTPS](https://en.wikipedia.org/wiki/HTTPS) pentru a afla mai multe despre comunicarea securizată a datelor.
+
+## Validarea datelor
+
+Dacă încerci să înregistrezi un nou cont fără să setezi mai întâi un nume de utilizator, poți vedea că serverul returnează o eroare cu codul de stare [400 (Bad Request)](https://developer.mozilla.org/docs/Web/HTTP/Status/400#:~:text=The%20HyperText%20Transfer%20Protocol%20(HTTP,%2C%20or%20deceptive%20request%20routing).).
+
+Înainte de a trimite date către un server, este o practică bună să [validezi datele formularului](https://developer.mozilla.org/docs/Learn/Forms/Form_validation) în prealabil, atunci când este posibil, pentru a te asigura că trimiți o cerere validă. Controalele formularului HTML5 oferă validare încorporată folosind diverse atribute:
+
+- `required`: câmpul trebuie completat, altfel formularul nu poate fi trimis.
+- `minlength` și `maxlength`: definește numărul minim și maxim de caractere în câmpurile text.
+- `min` și `max`: definește valoarea minimă și maximă a unui câmp numeric.
+- `type`: definește tipul de date așteptat, cum ar fi `number`, `email`, `file` sau [alte tipuri încorporate](https://developer.mozilla.org/docs/Web/HTML/Element/input). Acest atribut poate schimba și redarea vizuală a controlului formularului.
+- `pattern`: permite definirea unui model [expresie regulată](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Regular_Expressions) pentru a testa dacă datele introduse sunt valide sau nu.
+> Sfat: poți personaliza aspectul controalelor formularului în funcție de validitatea lor, folosind pseudo-clasele CSS `:valid` și `:invalid`.
+### Sarcină
+
+Există 2 câmpuri obligatorii pentru a crea un cont nou valid: numele de utilizator și moneda, celelalte câmpuri fiind opționale. Actualizează HTML-ul formularului, folosind atât atributul `required`, cât și textul din eticheta câmpului pentru a face acest lucru:
+
+```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>
+```
+
+Deși această implementare specifică a serverului nu impune limite stricte asupra lungimii maxime a câmpurilor, este întotdeauna o practică bună să definești limite rezonabile pentru orice introducere de text de la utilizator.
+
+Adaugă un atribut `maxlength` câmpurilor de text:
+
+```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">
+```
+
+Acum, dacă apeși butonul *Înregistrează-te* și un câmp nu respectă o regulă de validare pe care am definit-o, ar trebui să vezi ceva de genul acesta:
+
+![Captură de ecran care arată eroarea de validare atunci când încerci să trimiți formularul](../../../../translated_images/validation-error.8bd23e98d416c22f80076d04829a4bb718e0e550fd622862ef59008ccf0d5dce.ro.png)
+
+Validarea de acest tip, efectuată *înainte* de a trimite orice date către server, se numește validare **pe partea clientului**. Dar reține că nu este întotdeauna posibil să efectuezi toate verificările fără a trimite datele. De exemplu, nu putem verifica aici dacă există deja un cont cu același nume de utilizator fără a trimite o cerere către server. Validarea suplimentară efectuată pe server se numește validare **pe partea serverului**.
+
+De obicei, ambele trebuie implementate, iar utilizarea validării pe partea clientului îmbunătățește experiența utilizatorului prin oferirea unui feedback instantaneu, însă validarea pe partea serverului este esențială pentru a te asigura că datele utilizatorului pe care le manipulezi sunt corecte și sigure.
+
+---
+
+## 🚀 Provocare
+
+Afișează un mesaj de eroare în HTML dacă utilizatorul există deja.
+
+Iată un exemplu despre cum poate arăta pagina finală de autentificare după un pic de stilizare:
+
+![Captură de ecran a paginii de autentificare după adăugarea stilurilor CSS](../../../../translated_images/result.96ef01f607bf856aa9789078633e94a4f7664d912f235efce2657299becca483.ro.png)
+
+## Chestionar post-lectură
+
+[Chestionar post-lectură](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/44)
+
+## Recapitulare și studiu individual
+
+Dezvoltatorii au devenit foarte creativi în eforturile lor de a construi formulare, mai ales în ceea ce privește strategiile de validare. Află despre diferite fluxuri de formulare explorând [CodePen](https://codepen.com); poți găsi formulare interesante și inspiratoare?
+
+## Temă
+
+[Stilizează aplicația ta bancară](assignment.md)
+
+---
+
+**Declinare de responsabilitate**:  
+Acest document a fost tradus folosind serviciul de traducere AI [Co-op Translator](https://github.com/Azure/co-op-translator). Deși ne străduim să asigurăm acuratețea, vă rugăm să rețineți că traducerile automate pot conține erori sau inexactități. Documentul original în limba sa natală ar trebui considerat sursa autoritară. Pentru informații critice, se recomandă traducerea profesională realizată de un specialist uman. Nu ne asumăm responsabilitatea pentru eventualele neînțelegeri sau interpretări greșite care pot apărea din utilizarea acestei traduceri.
\ No newline at end of file
diff --git a/translations/ro/7-bank-project/2-forms/assignment.md b/translations/ro/7-bank-project/2-forms/assignment.md
new file mode 100644
index 00000000..18559172
--- /dev/null
+++ b/translations/ro/7-bank-project/2-forms/assignment.md
@@ -0,0 +1,27 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "474f3ab1ee755ca980fc9104a0316e17",
+  "translation_date": "2025-08-27T22:58:23+00:00",
+  "source_file": "7-bank-project/2-forms/assignment.md",
+  "language_code": "ro"
+}
+-->
+# Stilizează aplicația ta bancară
+
+## Instrucțiuni
+
+Creează un fișier nou `styles.css` și adaugă un link către acesta în fișierul tău curent `index.html`. În fișierul CSS pe care tocmai l-ai creat, adaugă câteva stiluri pentru a face paginile *Login* și *Dashboard* să arate plăcut și ordonat. Încearcă să creezi o temă de culori pentru a oferi aplicației tale o identitate proprie.
+
+> Sfat: poți modifica HTML-ul și să adaugi elemente și clase noi, dacă este necesar.
+
+## Criterii de evaluare
+
+| Criterii | Exemplu                                                                                                                | Adecvat                                                                       | Necesită îmbunătățiri                                                                        |
+| -------- | ---------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------- |
+|          | Toate paginile arată curate și ușor de citit, cu o temă de culori consistentă și secțiuni bine evidențiate.            | Paginile sunt stilizate, dar fără o temă sau cu secțiuni care nu sunt clar delimitate. | Paginile lipsesc de stilizare, secțiunile arată dezordonat și informațiile sunt greu de citit. |
+
+---
+
+**Declinare de responsabilitate**:  
+Acest document a fost tradus folosind serviciul de traducere AI [Co-op Translator](https://github.com/Azure/co-op-translator). Deși ne străduim să asigurăm acuratețea, vă rugăm să fiți conștienți că traducerile automate pot conține erori sau inexactități. Documentul original în limba sa natală ar trebui considerat sursa autoritară. Pentru informații critice, se recomandă traducerea profesională realizată de un specialist uman. Nu ne asumăm responsabilitatea pentru eventualele neînțelegeri sau interpretări greșite care pot apărea din utilizarea acestei traduceri.
\ No newline at end of file
diff --git a/translations/ro/7-bank-project/3-data/README.md b/translations/ro/7-bank-project/3-data/README.md
new file mode 100644
index 00000000..817856d0
--- /dev/null
+++ b/translations/ro/7-bank-project/3-data/README.md
@@ -0,0 +1,347 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "f587e913e3f7c0b1c549a05dd74ee8e5",
+  "translation_date": "2025-08-27T22:58:44+00:00",
+  "source_file": "7-bank-project/3-data/README.md",
+  "language_code": "ro"
+}
+-->
+# Construirea unei aplicații bancare Partea 3: Metode de preluare și utilizare a datelor
+
+## Chestionar înainte de lecție
+
+[Chestionar înainte de lecție](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/45)
+
+### Introducere
+
+La baza fiecărei aplicații web se află *datele*. Datele pot lua multe forme, dar scopul lor principal este întotdeauna să afișeze informații utilizatorului. Pe măsură ce aplicațiile web devin din ce în ce mai interactive și complexe, modul în care utilizatorul accesează și interacționează cu informațiile a devenit o parte esențială a dezvoltării web.
+
+În această lecție, vom vedea cum să preluăm date de la un server în mod asincron și să utilizăm aceste date pentru a afișa informații pe o pagină web fără a reîncărca HTML-ul.
+
+### Cerințe preliminare
+
+Trebuie să fi construit [Formularul de autentificare și înregistrare](../2-forms/README.md) al aplicației web pentru această lecție. De asemenea, trebuie să instalați [Node.js](https://nodejs.org) și să [rulați API-ul serverului](../api/README.md) local pentru a obține datele contului.
+
+Puteți testa dacă serverul funcționează corect executând această comandă într-un terminal:
+
+```sh
+curl http://localhost:5000/api
+# -> should return "Bank API v1.0.0" as a result
+```
+
+---
+
+## AJAX și preluarea datelor
+
+Site-urile web tradiționale actualizează conținutul afișat atunci când utilizatorul selectează un link sau trimite date printr-un formular, reîncărcând întreaga pagină HTML. De fiecare dată când trebuie încărcate date noi, serverul web returnează o pagină HTML complet nouă care trebuie procesată de browser, întrerupând acțiunea curentă a utilizatorului și limitând interacțiunile în timpul reîncărcării. Acest flux de lucru este cunoscut și sub denumirea de *Aplicație Multi-Pagină* sau *MPA*.
+
+![Fluxul de actualizare într-o aplicație multi-pagină](../../../../translated_images/mpa.7f7375a1a2d4aa779d3f928a2aaaf9ad76bcdeb05cfce2dc27ab126024050f51.ro.png)
+
+Pe măsură ce aplicațiile web au început să devină mai complexe și interactive, a apărut o tehnică nouă numită [AJAX (JavaScript și XML asincron)](https://en.wikipedia.org/wiki/Ajax_(programming)). Această tehnică permite aplicațiilor web să trimită și să preia date de la un server în mod asincron folosind JavaScript, fără a reîncărca pagina HTML, rezultând actualizări mai rapide și interacțiuni mai fluide. Când datele noi sunt primite de la server, pagina HTML curentă poate fi actualizată cu JavaScript folosind API-ul [DOM](https://developer.mozilla.org/docs/Web/API/Document_Object_Model). În timp, această abordare a evoluat în ceea ce este acum cunoscut sub numele de [*Aplicație Single-Pagină* sau *SPA*](https://en.wikipedia.org/wiki/Single-page_application).
+
+![Fluxul de actualizare într-o aplicație single-pagină](../../../../translated_images/spa.268ec73b41f992c2a21ef9294235c6ae597b3c37e2c03f0494c2d8857325cc57.ro.png)
+
+Când AJAX a fost introdus pentru prima dată, singurul API disponibil pentru preluarea datelor în mod asincron era [`XMLHttpRequest`](https://developer.mozilla.org/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest). Dar browserele moderne implementează acum API-ul mai convenabil și mai puternic [`Fetch`](https://developer.mozilla.org/docs/Web/API/Fetch_API), care folosește promisiuni și este mai potrivit pentru manipularea datelor JSON.
+
+> Deși toate browserele moderne acceptă API-ul `Fetch`, dacă doriți ca aplicația web să funcționeze pe browsere vechi sau de generație anterioară, este întotdeauna o idee bună să verificați [tabelul de compatibilitate pe caniuse.com](https://caniuse.com/fetch) mai întâi.
+
+### Sarcină
+
+În [lecția anterioară](../2-forms/README.md) am implementat formularul de înregistrare pentru a crea un cont. Acum vom adăuga cod pentru autentificarea utilizând un cont existent și preluarea datelor acestuia. Deschideți fișierul `app.js` și adăugați o nouă funcție `login`:
+
+```js
+async function login() {
+  const loginForm = document.getElementById('loginForm')
+  const user = loginForm.user.value;
+}
+```
+
+Începem prin a prelua elementul formularului cu `getElementById()`, apoi obținem numele de utilizator din câmpul de introducere cu `loginForm.user.value`. Fiecare control de formular poate fi accesat prin numele său (setat în HTML folosind atributul `name`) ca proprietate a formularului.
+
+În mod similar cu ceea ce am făcut pentru înregistrare, vom crea o altă funcție pentru a efectua o cerere către server, dar de această dată pentru preluarea datelor contului:
+
+```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' };
+  }
+}
+```
+
+Folosim API-ul `fetch` pentru a solicita date în mod asincron de la server, dar de această dată nu avem nevoie de alți parametri în afară de URL-ul pe care îl apelăm, deoarece doar interogăm date. În mod implicit, `fetch` creează o cerere HTTP [`GET`](https://developer.mozilla.org/docs/Web/HTTP/Methods/GET), ceea ce ne dorim aici.
+
+✅ `encodeURIComponent()` este o funcție care escapează caracterele speciale pentru URL. Ce probleme am putea avea dacă nu apelăm această funcție și folosim direct valoarea `user` în URL?
+
+Acum să actualizăm funcția `login` pentru a utiliza `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');
+}
+```
+
+Mai întâi, deoarece `getAccount` este o funcție asincronă, trebuie să o potrivim cu cuvântul cheie `await` pentru a aștepta rezultatul serverului. Ca în cazul oricărei cereri către server, trebuie să gestionăm și cazurile de eroare. Deocamdată vom adăuga doar un mesaj de log pentru a afișa eroarea și vom reveni la aceasta mai târziu.
+
+Apoi trebuie să stocăm datele undeva pentru a le putea utiliza ulterior pentru a afișa informațiile pe tabloul de bord. Deoarece variabila `account` nu există încă, vom crea o variabilă globală pentru aceasta în partea de sus a fișierului nostru:
+
+```js
+let account = null;
+```
+
+După ce datele utilizatorului sunt salvate într-o variabilă, putem naviga de la pagina *login* la *dashboard* folosind funcția `navigate()` pe care o avem deja.
+
+În cele din urmă, trebuie să apelăm funcția `login` atunci când formularul de autentificare este trimis, modificând HTML-ul:
+
+```html
+<form id="loginForm" action="javascript:login()">
+```
+
+Testați dacă totul funcționează corect prin înregistrarea unui cont nou și încercarea de a vă autentifica utilizând același cont.
+
+Înainte de a trece la partea următoare, putem completa funcția `register` adăugând acest cod la sfârșitul funcției:
+
+```js
+account = result;
+navigate('/dashboard');
+```
+
+✅ Știați că, în mod implicit, puteți apela API-uri ale serverului doar de pe *același domeniu și port* ca pagina web pe care o vizualizați? Acesta este un mecanism de securitate impus de browsere. Dar stați, aplicația noastră web rulează pe `localhost:3000`, în timp ce API-ul serverului rulează pe `localhost:5000`, de ce funcționează? Prin utilizarea unei tehnici numite [Cross-Origin Resource Sharing (CORS)](https://developer.mozilla.org/docs/Web/HTTP/CORS), este posibil să efectuați cereri HTTP cross-origin dacă serverul adaugă anteturi speciale la răspuns, permițând excepții pentru domenii specifice.
+
+> Aflați mai multe despre API-uri urmând această [lecție](https://docs.microsoft.com/learn/modules/use-apis-discover-museum-art/?WT.mc_id=academic-77807-sagibbon)
+
+## Actualizarea HTML-ului pentru afișarea datelor
+
+Acum că avem datele utilizatorului, trebuie să actualizăm HTML-ul existent pentru a le afișa. Știm deja cum să preluăm un element din DOM folosind, de exemplu, `document.getElementById()`. După ce aveți un element de bază, iată câteva API-uri pe care le puteți utiliza pentru a-l modifica sau pentru a adăuga elemente copil:
+
+- Utilizând proprietatea [`textContent`](https://developer.mozilla.org/docs/Web/API/Node/textContent) puteți schimba textul unui element. Rețineți că schimbarea acestei valori elimină toți copiii elementului (dacă există) și îi înlocuiește cu textul furnizat. Astfel, este și o metodă eficientă de a elimina toți copiii unui element dat prin atribuirea unui șir gol `''`.
+
+- Utilizând [`document.createElement()`](https://developer.mozilla.org/docs/Web/API/Document/createElement) împreună cu metoda [`append()`](https://developer.mozilla.org/docs/Web/API/ParentNode/append) puteți crea și atașa unul sau mai multe elemente copil noi.
+
+✅ Utilizând proprietatea [`innerHTML`](https://developer.mozilla.org/docs/Web/API/Element/innerHTML) a unui element este posibil să schimbați conținutul HTML al acestuia, dar aceasta ar trebui evitată deoarece este vulnerabilă la atacuri de tip [cross-site scripting (XSS)](https://developer.mozilla.org/docs/Glossary/Cross-site_scripting).
+
+### Sarcină
+
+Înainte de a trece la ecranul tabloului de bord, mai este un lucru pe care ar trebui să-l facem pe pagina *login*. În prezent, dacă încercați să vă autentificați cu un nume de utilizator care nu există, un mesaj este afișat în consolă, dar pentru un utilizator obișnuit nimic nu se schimbă și nu știți ce se întâmplă.
+
+Să adăugăm un element placeholder în formularul de autentificare unde putem afișa un mesaj de eroare, dacă este necesar. Un loc bun ar fi chiar înainte de butonul de autentificare `<button>`:
+
+```html
+...
+<div id="loginError"></div>
+<button>Login</button>
+...
+```
+
+Acest element `<div>` este gol, ceea ce înseamnă că nimic nu va fi afișat pe ecran până când nu adăugăm conținut în el. De asemenea, îi atribuim un `id` pentru a-l putea prelua ușor cu JavaScript.
+
+Reveniți la fișierul `app.js` și creați o nouă funcție helper `updateElement`:
+
+```js
+function updateElement(id, text) {
+  const element = document.getElementById(id);
+  element.textContent = text;
+}
+```
+
+Aceasta este destul de simplă: dat fiind un *id* de element și un *text*, va actualiza conținutul text al elementului DOM care corespunde `id`-ului. Să utilizăm această metodă în locul mesajului de eroare anterior din funcția `login`:
+
+```js
+if (data.error) {
+  return updateElement('loginError', data.error);
+}
+```
+
+Acum, dacă încercați să vă autentificați cu un cont invalid, ar trebui să vedeți ceva de genul acesta:
+
+![Captură de ecran care arată mesajul de eroare afișat în timpul autentificării](../../../../translated_images/login-error.416fe019b36a63276764c2349df5d99e04ebda54fefe60c715ee87a28d5d4ad0.ro.png)
+
+Acum avem un text de eroare care apare vizual, dar dacă încercați să-l utilizați cu un cititor de ecran, veți observa că nimic nu este anunțat. Pentru ca textul adăugat dinamic pe o pagină să fie anunțat de cititoarele de ecran, va trebui să folosească ceva numit [Live Region](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/ARIA_Live_Regions). Aici vom folosi un tip specific de live region numit alertă:
+
+```html
+<div id="loginError" role="alert"></div>
+```
+
+Implementați același comportament pentru erorile funcției `register` (nu uitați să actualizați HTML-ul).
+
+## Afișarea informațiilor pe tabloul de bord
+
+Folosind aceleași tehnici pe care tocmai le-am văzut, ne vom ocupa și de afișarea informațiilor contului pe pagina tabloului de bord.
+
+Acesta este aspectul unui obiect cont primit de la server:
+
+```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 }
+  ],
+}
+```
+
+> Notă: pentru a vă ușura munca, puteți utiliza contul `test` preexistent, care este deja populat cu date.
+
+### Sarcină
+
+Să începem prin a înlocui secțiunea "Balance" din HTML pentru a adăuga elemente placeholder:
+
+```html
+<section>
+  Balance: <span id="balance"></span><span id="currency"></span>
+</section>
+```
+
+Vom adăuga și o nouă secțiune chiar dedesubt pentru a afișa descrierea contului:
+
+```html
+<h2 id="description"></h2>
+```
+
+✅ Deoarece descrierea contului funcționează ca un titlu pentru conținutul de dedesubt, este marcată semantic ca un heading. Aflați mai multe despre cum [structura heading-urilor](https://www.nomensa.com/blog/2017/how-structure-headings-web-accessibility) este importantă pentru accesibilitate și analizați critic pagina pentru a determina ce altceva ar putea fi un heading.
+
+Apoi, vom crea o nouă funcție în `app.js` pentru a completa placeholder-ul:
+
+```js
+function updateDashboard() {
+  if (!account) {
+    return navigate('/login');
+  }
+
+  updateElement('description', account.description);
+  updateElement('balance', account.balance.toFixed(2));
+  updateElement('currency', account.currency);
+}
+```
+
+Mai întâi, verificăm că avem datele contului necesare înainte de a merge mai departe. Apoi folosim funcția `updateElement()` pe care am creat-o anterior pentru a actualiza HTML-ul.
+
+> Pentru a face afișarea soldului mai atractivă, folosim metoda [`toFixed(2)`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed) pentru a forța afișarea valorii cu 2 cifre după punctul zecimal.
+
+Acum trebuie să apelăm funcția `updateDashboard()` de fiecare dată când tabloul de bord este încărcat. Dacă ați terminat deja [tema lecției 1](../1-template-route/assignment.md), acest lucru ar trebui să fie simplu, altfel puteți utiliza următoarea implementare.
+
+Adăugați acest cod la sfârșitul funcției `updateRoute()`:
+
+```js
+if (typeof route.init === 'function') {
+  route.init();
+}
+```
+
+Și actualizați definiția rutelor cu:
+
+```js
+const routes = {
+  '/login': { templateId: 'login' },
+  '/dashboard': { templateId: 'dashboard', init: updateDashboard }
+};
+```
+
+Cu această modificare, de fiecare dată când pagina tabloului de bord este afișată, funcția `updateDashboard()` este apelată. După autentificare, ar trebui să puteți vedea soldul contului, moneda și descrierea.
+
+## Crearea rândurilor tabelului dinamic cu șabloane HTML
+
+În [prima lecție](../1-template-route/README.md) am folosit șabloane HTML împreună cu metoda [`appendChild()`](https://developer.mozilla.org/docs/Web/API/Node/appendChild) pentru a implementa navigarea în aplicația noastră. Șabloanele pot fi și mai mici și utilizate pentru a popula dinamic părți repetitive ale unei pagini.
+
+Vom folosi o abordare similară pentru a afișa lista tranzacțiilor în tabelul HTML.
+
+### Sarcină
+
+Adăugați un nou șablon în `<body>`-ul HTML:
+
+```html
+<template id="transaction">
+  <tr>
+    <td></td>
+    <td></td>
+    <td></td>
+  </tr>
+</template>
+```
+
+Acest șablon reprezintă un singur rând de tabel, cu cele 3 coloane pe care dorim să le populăm: *data*, *obiectul* și *suma* unei tranzacții.
+
+Apoi, adăugați această proprietate `id` la elementul `<tbody>` al tabelului din șablonul tabloului de bord pentru a-l găsi mai ușor folosind JavaScript:
+
+```html
+<tbody id="transactions"></tbody>
+```
+
+HTML-ul nostru este gata, să trecem la codul JavaScript și să creăm o nouă funcție `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;
+}
+```
+
+Această funcție face exact ceea ce sugerează numele său: folosind șablonul pe care l-am creat mai devreme, creează un nou rând de tabel și completează conținutul acestuia folosind datele tranzacției. Vom folosi aceasta în funcția `updateDashboard()` pentru a popula tabelul:
+
+```js
+const transactionsRows = document.createDocumentFragment();
+for (const transaction of account.transactions) {
+  const transactionRow = createTransactionRow(transaction);
+  transactionsRows.appendChild(transactionRow);
+}
+updateElement('transactions', transactionsRows);
+```
+
+Aici folosim metoda [`document.createDocumentFragment()`](https://developer.mozilla.org/docs/Web/API/Document/createDocumentFragment) care creează un nou fragment DOM pe care putem lucra, înainte de a-l atașa în final tabelului HTML.
+
+Mai este un lucru pe care trebuie să-l facem înainte ca acest cod să funcționeze, deoarece funcția noastră `updateElement()` acceptă în prezent doar conținut text. Să schimbăm puțin codul acesteia:
+
+```js
+function updateElement(id, textOrNode) {
+  const element = document.getElementById(id);
+  element.textContent = ''; // Removes all children
+  element.append(textOrNode);
+}
+```
+
+Folosim metoda [`append()`](https://developer.mozilla.org/docs/Web/API/ParentNode/append) deoarece permite atașarea fie a textului, fie a [nodurilor DOM](https://developer.mozilla.org/docs/Web/API/Node) la un element părinte, ceea ce este perfect pentru toate cazurile noastre de utilizare.
+Dacă încerci să te autentifici folosind contul `test`, ar trebui să vezi acum o listă de tranzacții pe tabloul de bord 🎉.
+
+---
+
+## 🚀 Provocare
+
+Lucrați împreună pentru a face pagina tabloului de bord să arate ca o aplicație bancară reală. Dacă deja ați stilizat aplicația, încercați să folosiți [media queries](https://developer.mozilla.org/docs/Web/CSS/Media_Queries) pentru a crea un [design responsiv](https://developer.mozilla.org/docs/Web/Progressive_web_apps/Responsive/responsive_design_building_blocks) care funcționează bine atât pe dispozitive desktop, cât și pe cele mobile.
+
+Iată un exemplu de pagină de tabloul de bord stilizată:
+
+![Captură de ecran a unui exemplu de rezultat al tabloului de bord după stilizare](../../../../translated_images/screen2.123c82a831a1d14ab2061994be2fa5de9cec1ce651047217d326d4773a6348e4.ro.png)
+
+## Quiz de după lecție
+
+[Quiz de după lecție](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/46)
+
+## Temă
+
+[Refactorizați și comentați codul](assignment.md)
+
+---
+
+**Declinare de responsabilitate**:  
+Acest document a fost tradus folosind serviciul de traducere AI [Co-op Translator](https://github.com/Azure/co-op-translator). Deși ne străduim să asigurăm acuratețea, vă rugăm să fiți conștienți că traducerile automate pot conține erori sau inexactități. Documentul original în limba sa natală ar trebui considerat sursa autoritară. Pentru informații critice, se recomandă traducerea profesională realizată de un specialist uman. Nu ne asumăm responsabilitatea pentru eventualele neînțelegeri sau interpretări greșite care pot apărea din utilizarea acestei traduceri.
\ No newline at end of file
diff --git a/translations/ro/7-bank-project/3-data/assignment.md b/translations/ro/7-bank-project/3-data/assignment.md
new file mode 100644
index 00000000..4ad9282d
--- /dev/null
+++ b/translations/ro/7-bank-project/3-data/assignment.md
@@ -0,0 +1,29 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "a4abf305ede1cfaadd56a8fab4b4c288",
+  "translation_date": "2025-08-27T23:01:04+00:00",
+  "source_file": "7-bank-project/3-data/assignment.md",
+  "language_code": "ro"
+}
+-->
+# Refactorizează și comentează codul tău
+
+## Instrucțiuni
+
+Pe măsură ce baza ta de cod crește, este important să refactorizezi frecvent codul pentru a-l menține ușor de citit și de întreținut în timp. Adaugă comentarii și refactorizează fișierul `app.js` pentru a îmbunătăți calitatea codului:
+
+- Extrage constante, cum ar fi URL-ul de bază al API-ului serverului
+- Factorizează codul similar: de exemplu, poți crea o funcție `sendRequest()` pentru a grupa codul utilizat atât în `createAccount()`, cât și în `getAccount()`
+- Reorganizează codul pentru a-l face mai ușor de citit și adaugă comentarii
+
+## Criterii de evaluare
+
+| Criteriu | Exemplu                                                                                                                                                     | Adecvat                                                                                          | Necesită îmbunătățiri                                                                     |
+| -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------- |
+|          | Codul este comentat, bine organizat în secțiuni diferite și ușor de citit. Constantele sunt extrase și a fost creată o funcție factorizată `sendRequest()`.   | Codul este curat, dar poate fi îmbunătățit cu mai multe comentarii, extragerea constantelor sau factorizare. | Codul este dezordonat, fără comentarii, constantele nu sunt extrase și codul nu este factorizat. |
+
+---
+
+**Declinare de responsabilitate**:  
+Acest document a fost tradus folosind serviciul de traducere AI [Co-op Translator](https://github.com/Azure/co-op-translator). Deși ne străduim să asigurăm acuratețea, vă rugăm să fiți conștienți că traducerile automate pot conține erori sau inexactități. Documentul original în limba sa natală ar trebui considerat sursa autoritară. Pentru informații critice, se recomandă traducerea profesională realizată de un specialist uman. Nu ne asumăm responsabilitatea pentru eventualele neînțelegeri sau interpretări greșite care pot apărea din utilizarea acestei traduceri.
\ No newline at end of file
diff --git a/translations/ro/7-bank-project/4-state-management/README.md b/translations/ro/7-bank-project/4-state-management/README.md
new file mode 100644
index 00000000..00e75d60
--- /dev/null
+++ b/translations/ro/7-bank-project/4-state-management/README.md
@@ -0,0 +1,294 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "4fa20c513e367e9cdd401bf49ae16e33",
+  "translation_date": "2025-08-27T23:04:12+00:00",
+  "source_file": "7-bank-project/4-state-management/README.md",
+  "language_code": "ro"
+}
+-->
+# Construirea unei aplicații bancare Partea 4: Concepte de gestionare a stării
+
+## Chestionar înainte de curs
+
+[Chestionar înainte de curs](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/47)
+
+### Introducere
+
+Pe măsură ce o aplicație web crește, devine o provocare să urmărești toate fluxurile de date. Ce cod obține datele, ce pagină le consumă, unde și când trebuie actualizate... este ușor să ajungi la un cod dezordonat, dificil de întreținut. Acest lucru este cu atât mai adevărat atunci când trebuie să partajezi date între diferite pagini ale aplicației tale, de exemplu datele utilizatorului. Conceptul de *gestionare a stării* a existat întotdeauna în toate tipurile de programe, dar pe măsură ce aplicațiile web continuă să crească în complexitate, devine un punct cheie de luat în considerare în timpul dezvoltării.
+
+În această ultimă parte, vom analiza aplicația pe care am construit-o pentru a regândi modul în care este gestionată starea, permițând suportul pentru reîmprospătarea browserului în orice moment și păstrarea datelor între sesiunile utilizatorului.
+
+### Cerințe preliminare
+
+Trebuie să fi finalizat partea de [preluare a datelor](../3-data/README.md) a aplicației web pentru această lecție. De asemenea, trebuie să instalați [Node.js](https://nodejs.org) și să [rulați serverul API](../api/README.md) local, astfel încât să puteți gestiona datele contului.
+
+Puteți testa dacă serverul funcționează corect executând această comandă într-un terminal:
+
+```sh
+curl http://localhost:5000/api
+# -> should return "Bank API v1.0.0" as a result
+```
+
+---
+
+## Regândirea gestionării stării
+
+În [lecția anterioară](../3-data/README.md), am introdus un concept de bază al stării în aplicația noastră cu variabila globală `account`, care conține datele bancare ale utilizatorului conectat în prezent. Cu toate acestea, implementarea noastră actuală are unele defecte. Încercați să reîmprospătați pagina când sunteți pe tabloul de bord. Ce se întâmplă?
+
+Există 3 probleme cu codul actual:
+
+- Starea nu este păstrată, deoarece o reîmprospătare a browserului vă duce înapoi la pagina de autentificare.
+- Există mai multe funcții care modifică starea. Pe măsură ce aplicația crește, poate deveni dificil să urmăriți modificările și este ușor să uitați să actualizați una.
+- Starea nu este curățată, astfel încât atunci când faceți clic pe *Logout*, datele contului sunt încă acolo, deși sunteți pe pagina de autentificare.
+
+Am putea actualiza codul nostru pentru a aborda aceste probleme una câte una, dar ar crea mai multă duplicare de cod și ar face aplicația mai complexă și dificil de întreținut. Sau am putea să ne oprim câteva minute și să ne regândim strategia.
+
+> Ce probleme încercăm cu adevărat să rezolvăm aici?
+
+[Gestionarea stării](https://en.wikipedia.org/wiki/State_management) se referă la găsirea unei abordări bune pentru a rezolva aceste două probleme particulare:
+
+- Cum să păstrăm fluxurile de date dintr-o aplicație ușor de înțeles?
+- Cum să menținem datele stării mereu sincronizate cu interfața utilizatorului (și invers)?
+
+Odată ce ai rezolvat aceste probleme, orice alte probleme pe care le-ai putea avea fie sunt deja rezolvate, fie au devenit mai ușor de rezolvat. Există multe abordări posibile pentru rezolvarea acestor probleme, dar vom merge cu o soluție comună care constă în **centralizarea datelor și a modurilor de a le modifica**. Fluxurile de date ar arăta astfel:
+
+![Schema care arată fluxurile de date între HTML, acțiunile utilizatorului și stare](../../../../translated_images/data-flow.fa2354e0908fecc89b488010dedf4871418a992edffa17e73441d257add18da4.ro.png)
+
+> Nu vom acoperi aici partea în care datele declanșează automat actualizarea vizualizării, deoarece este legată de concepte mai avansate de [Programare Reactivă](https://en.wikipedia.org/wiki/Reactive_programming). Este un subiect bun de aprofundare dacă sunteți interesat.
+
+✅ Există multe biblioteci care oferă abordări diferite pentru gestionarea stării, [Redux](https://redux.js.org) fiind o opțiune populară. Aruncați o privire asupra conceptelor și modelelor utilizate, deoarece este adesea o modalitate bună de a învăța ce probleme pot apărea în aplicațiile web mari și cum pot fi rezolvate.
+
+### Sarcină
+
+Vom începe cu puțină refactorizare. Înlocuiți declarația `account`:
+
+```js
+let account = null;
+```
+
+Cu:
+
+```js
+let state = {
+  account: null
+};
+```
+
+Ideea este să *centralizăm* toate datele aplicației noastre într-un singur obiect de stare. Deocamdată avem doar `account` în stare, deci nu se schimbă prea mult, dar creează o cale pentru evoluții.
+
+De asemenea, trebuie să actualizăm funcțiile care îl folosesc. În funcțiile `register()` și `login()`, înlocuiți `account = ...` cu `state.account = ...`;
+
+La începutul funcției `updateDashboard()`, adăugați această linie:
+
+```js
+const account = state.account;
+```
+
+Această refactorizare în sine nu a adus multe îmbunătățiri, dar ideea a fost să punem bazele pentru următoarele modificări.
+
+## Urmărirea modificărilor datelor
+
+Acum că am pus în aplicare obiectul `state` pentru a stoca datele noastre, următorul pas este să centralizăm actualizările. Scopul este să fie mai ușor să urmărim orice modificări și când se întâmplă.
+
+Pentru a evita modificările făcute obiectului `state`, este, de asemenea, o practică bună să îl considerăm [*imobil*](https://en.wikipedia.org/wiki/Immutable_object), ceea ce înseamnă că nu poate fi modificat deloc. De asemenea, înseamnă că trebuie să creați un nou obiect de stare dacă doriți să schimbați ceva în el. Procedând astfel, construiți o protecție împotriva efectelor secundare [nedorite](https://en.wikipedia.org/wiki/Side_effect_(computer_science)) și deschideți posibilități pentru noi funcționalități în aplicația dvs., cum ar fi implementarea funcțiilor de anulare/refacere, în timp ce faceți mai ușor de depanat. De exemplu, ați putea înregistra fiecare modificare făcută stării și păstra un istoric al modificărilor pentru a înțelege sursa unui bug.
+
+În JavaScript, puteți utiliza [`Object.freeze()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze) pentru a crea o versiune imobilă a unui obiect. Dacă încercați să faceți modificări unui obiect imobil, va fi generată o excepție.
+
+✅ Știți diferența dintre un obiect imobil *superficial* și unul *profund*? Puteți citi despre asta [aici](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze#What_is_shallow_freeze).
+
+### Sarcină
+
+Să creăm o nouă funcție `updateState()`:
+
+```js
+function updateState(property, newData) {
+  state = Object.freeze({
+    ...state,
+    [property]: newData
+  });
+}
+```
+
+În această funcție, creăm un nou obiect de stare și copiem datele din starea anterioară folosind [operatorul *spread (`...`)*](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/Spread_syntax#Spread_in_object_literals). Apoi suprascriem o anumită proprietate a obiectului de stare cu noile date folosind [notația cu paranteze](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Working_with_Objects#Objects_and_properties) `[property]` pentru atribuire. În cele din urmă, blocăm obiectul pentru a preveni modificările folosind `Object.freeze()`. Deocamdată avem doar proprietatea `account` stocată în stare, dar cu această abordare puteți adăuga câte proprietăți aveți nevoie în stare.
+
+Vom actualiza și inițializarea `state` pentru a ne asigura că starea inițială este, de asemenea, blocată:
+
+```js
+let state = Object.freeze({
+  account: null
+});
+```
+
+După aceea, actualizați funcția `register` înlocuind atribuirea `state.account = result;` cu:
+
+```js
+updateState('account', result);
+```
+
+Faceți același lucru cu funcția `login`, înlocuind `state.account = data;` cu:
+
+```js
+updateState('account', data);
+```
+
+Vom profita acum de ocazie pentru a rezolva problema datelor contului care nu sunt șterse atunci când utilizatorul face clic pe *Logout*.
+
+Creați o nouă funcție `logout()`:
+
+```js
+function logout() {
+  updateState('account', null);
+  navigate('/login');
+}
+```
+
+În `updateDashboard()`, înlocuiți redirecționarea `return navigate('/login');` cu `return logout()`;
+
+Încercați să înregistrați un nou cont, să vă deconectați și să vă conectați din nou pentru a verifica dacă totul funcționează corect.
+
+> Sfat: puteți analiza toate modificările stării adăugând `console.log(state)` la sfârșitul funcției `updateState()` și deschizând consola în instrumentele de dezvoltare ale browserului.
+
+## Păstrarea stării
+
+Majoritatea aplicațiilor web trebuie să păstreze datele pentru a funcționa corect. Toate datele critice sunt de obicei stocate într-o bază de date și accesate printr-un API de server, cum ar fi datele contului utilizatorului în cazul nostru. Dar uneori, este interesant să păstrezi unele date în aplicația client care rulează în browser, pentru o experiență mai bună a utilizatorului sau pentru a îmbunătăți performanța la încărcare.
+
+Când vrei să păstrezi datele în browserul tău, există câteva întrebări importante pe care ar trebui să le pui:
+
+- *Sunt datele sensibile?* Ar trebui să eviți stocarea oricăror date sensibile pe client, cum ar fi parolele utilizatorului.
+- *Pentru cât timp ai nevoie să păstrezi aceste date?* Plănuiești să accesezi aceste date doar pentru sesiunea curentă sau vrei să fie stocate pentru totdeauna?
+
+Există mai multe moduri de a stoca informații într-o aplicație web, în funcție de ceea ce vrei să realizezi. De exemplu, poți folosi URL-urile pentru a stoca o interogare de căutare și a o face partajabilă între utilizatori. De asemenea, poți folosi [cookie-uri HTTP](https://developer.mozilla.org/docs/Web/HTTP/Cookies) dacă datele trebuie să fie partajate cu serverul, cum ar fi informațiile de [autentificare](https://en.wikipedia.org/wiki/Authentication).
+
+O altă opțiune este să folosești una dintre numeroasele API-uri ale browserului pentru stocarea datelor. Două dintre ele sunt deosebit de interesante:
+
+- [`localStorage`](https://developer.mozilla.org/docs/Web/API/Window/localStorage): un [Key/Value store](https://en.wikipedia.org/wiki/Key%E2%80%93value_database) care permite păstrarea datelor specifice site-ului web curent între diferite sesiuni. Datele salvate în acesta nu expiră niciodată.
+- [`sessionStorage`](https://developer.mozilla.org/docs/Web/API/Window/sessionStorage): acesta funcționează la fel ca `localStorage`, cu excepția faptului că datele stocate în acesta sunt șterse când sesiunea se termină (când browserul este închis).
+
+Rețineți că ambele API-uri permit doar stocarea de [șiruri de caractere](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String). Dacă vrei să stochezi obiecte complexe, va trebui să le serializezi în formatul [JSON](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON) folosind [`JSON.stringify()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify).
+
+✅ Dacă vrei să creezi o aplicație web care nu funcționează cu un server, este posibil să creezi o bază de date pe client folosind API-ul [`IndexedDB`](https://developer.mozilla.org/docs/Web/API/IndexedDB_API). Acesta este rezervat pentru cazuri de utilizare avansate sau dacă ai nevoie să stochezi o cantitate semnificativă de date, deoarece este mai complex de utilizat.
+
+### Sarcină
+
+Ne dorim ca utilizatorii noștri să rămână conectați până când fac clic explicit pe butonul *Logout*, așa că vom folosi `localStorage` pentru a stoca datele contului. Mai întâi, să definim o cheie pe care o vom folosi pentru a stoca datele noastre.
+
+```js
+const storageKey = 'savedAccount';
+```
+
+Apoi adăugați această linie la sfârșitul funcției `updateState()`:
+
+```js
+localStorage.setItem(storageKey, JSON.stringify(state.account));
+```
+
+Cu aceasta, datele contului utilizatorului vor fi păstrate și mereu actualizate, deoarece am centralizat anterior toate actualizările stării. Aici începem să beneficiem de toate refactorizările anterioare 🙂.
+
+Deoarece datele sunt salvate, trebuie să ne ocupăm și de restaurarea lor atunci când aplicația este încărcată. Deoarece vom începe să avem mai mult cod de inițializare, ar putea fi o idee bună să creăm o nouă funcție `init`, care include și codul nostru anterior de la sfârșitul `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();
+```
+
+Aici recuperăm datele salvate, iar dacă există, actualizăm starea în consecință. Este important să facem acest lucru *înainte* de a actualiza ruta, deoarece ar putea exista cod care se bazează pe starea în timpul actualizării paginii.
+
+De asemenea, putem face pagina *Dashboard* pagina implicită a aplicației noastre, deoarece acum păstrăm datele contului. Dacă nu se găsesc date, tabloul de bord se ocupă de redirecționarea către pagina de *Login* oricum. În `updateRoute()`, înlocuiți fallback-ul `return navigate('/login');` cu `return navigate('/dashboard');`.
+
+Acum conectați-vă în aplicație și încercați să reîmprospătați pagina. Ar trebui să rămâneți pe tabloul de bord. Cu această actualizare, am rezolvat toate problemele inițiale...
+
+## Reîmprospătarea datelor
+
+...Dar s-ar putea să fi creat și o nouă problemă. Ups!
+
+Accesați tabloul de bord folosind contul `test`, apoi rulați această comandă într-un terminal pentru a crea o nouă tranzacție:
+
+```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
+```
+
+Încercați să reîmprospătați pagina tabloului de bord în browser acum. Ce se întâmplă? Vedeți noua tranzacție?
+
+Starea este păstrată pe termen nelimitat datorită `localStorage`, dar asta înseamnă și că nu este niciodată actualizată până când nu vă deconectați din aplicație și vă conectați din nou!
+
+O strategie posibilă pentru a rezolva acest lucru este să reîncărcăm datele contului de fiecare dată când tabloul de bord este încărcat, pentru a evita datele învechite.
+
+### Sarcină
+
+Creați o nouă funcție `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);
+}
+```
+
+Această metodă verifică dacă suntem conectați în prezent, apoi reîncarcă datele contului de pe server.
+
+Creați o altă funcție numită `refresh`:
+
+```js
+async function refresh() {
+  await updateAccountData();
+  updateDashboard();
+}
+```
+
+Aceasta actualizează datele contului, apoi se ocupă de actualizarea HTML-ului paginii tabloului de bord. Este ceea ce trebuie să apelăm atunci când ruta tabloului de bord este încărcată. Actualizați definiția rutei cu:
+
+```js
+const routes = {
+  '/login': { templateId: 'login' },
+  '/dashboard': { templateId: 'dashboard', init: refresh }
+};
+```
+
+Încercați să reîmprospătați tabloul de bord acum, ar trebui să afișeze datele contului actualizate.
+
+---
+
+## 🚀 Provocare
+
+Acum că reîncărcăm datele contului de fiecare dată când tabloul de bord este încărcat, credeți că mai trebuie să păstrăm *toate datele contului*?
+
+Încercați să lucrați împreună pentru a modifica ceea ce este salvat și încărcat din `localStorage` astfel încât să includă doar ceea ce este absolut necesar pentru ca aplicația să funcționeze.
+
+## Chestionar după curs
+[Chestionar post-lectură](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/48)
+
+## Temă
+
+[Implementează dialogul "Adaugă tranzacție"](assignment.md)
+
+Iată un exemplu de rezultat după finalizarea temei:
+
+![Captură de ecran care arată un exemplu de dialog "Adaugă tranzacție"](../../../../translated_images/dialog.93bba104afeb79f12f65ebf8f521c5d64e179c40b791c49c242cf15f7e7fab15.ro.png)
+
+---
+
+**Declinare de responsabilitate**:  
+Acest document a fost tradus folosind serviciul de traducere AI [Co-op Translator](https://github.com/Azure/co-op-translator). Deși ne străduim să asigurăm acuratețea, vă rugăm să rețineți că traducerile automate pot conține erori sau inexactități. Documentul original în limba sa maternă ar trebui considerat sursa autoritară. Pentru informații critice, se recomandă traducerea profesională realizată de un specialist uman. Nu ne asumăm responsabilitatea pentru eventualele neînțelegeri sau interpretări greșite care pot apărea din utilizarea acestei traduceri.
\ No newline at end of file
diff --git a/translations/ro/7-bank-project/4-state-management/assignment.md b/translations/ro/7-bank-project/4-state-management/assignment.md
new file mode 100644
index 00000000..8efd8b9a
--- /dev/null
+++ b/translations/ro/7-bank-project/4-state-management/assignment.md
@@ -0,0 +1,39 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "f23a868536c07da991b1d4e773161e25",
+  "translation_date": "2025-08-27T23:06:28+00:00",
+  "source_file": "7-bank-project/4-state-management/assignment.md",
+  "language_code": "ro"
+}
+-->
+# Implementați dialogul „Adaugă tranzacție”
+
+## Instrucțiuni
+
+Aplicația noastră bancară încă nu are o funcționalitate importantă: posibilitatea de a introduce tranzacții noi.
+Folosind tot ce ați învățat în cele patru lecții anterioare, implementați un dialog „Adaugă tranzacție”:
+
+- Adăugați un buton „Adaugă tranzacție” pe pagina de dashboard
+- Fie creați o pagină nouă cu un șablon HTML, fie utilizați JavaScript pentru a afișa/ascunde HTML-ul dialogului fără a părăsi pagina de dashboard (puteți folosi proprietatea [`hidden`](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/hidden) pentru asta sau clase CSS)
+- Asigurați-vă că gestionați [accesibilitatea pentru tastatură și cititoare de ecran](https://developer.paciellogroup.com/blog/2018/06/the-current-state-of-modal-dialog-accessibility/) pentru dialog
+- Implementați un formular HTML pentru a primi datele de intrare
+- Creați date JSON din datele formularului și trimiteți-le către API
+- Actualizați pagina de dashboard cu noile date
+
+Consultați [specificațiile API ale serverului](../api/README.md) pentru a vedea ce API trebuie să apelați și care este formatul JSON așteptat.
+
+Iată un exemplu de rezultat după finalizarea sarcinii:
+
+![Captură de ecran care arată un exemplu de dialog „Adaugă tranzacție”](../../../../translated_images/dialog.93bba104afeb79f12f65ebf8f521c5d64e179c40b791c49c242cf15f7e7fab15.ro.png)
+
+## Criterii de evaluare
+
+| Criteriu | Exemplară                                                                                         | Adecvat                                                                                                                | Necesită îmbunătățiri                        |
+| -------- | ------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- | --------------------------------------------|
+|          | Adăugarea unei tranzacții este implementată complet, urmând toate bunele practici prezentate în lecții. | Adăugarea unei tranzacții este implementată, dar nu urmează toate bunele practici prezentate în lecții sau funcționează doar parțial. | Adăugarea unei tranzacții nu funcționează deloc. |
+
+---
+
+**Declinare de responsabilitate**:  
+Acest document a fost tradus folosind serviciul de traducere AI [Co-op Translator](https://github.com/Azure/co-op-translator). Deși ne străduim să asigurăm acuratețea, vă rugăm să fiți conștienți că traducerile automate pot conține erori sau inexactități. Documentul original în limba sa natală ar trebui considerat sursa autoritară. Pentru informații critice, se recomandă traducerea profesională realizată de un specialist uman. Nu ne asumăm responsabilitatea pentru eventualele neînțelegeri sau interpretări greșite care pot apărea din utilizarea acestei traduceri.
\ No newline at end of file
diff --git a/translations/ro/7-bank-project/README.md b/translations/ro/7-bank-project/README.md
new file mode 100644
index 00000000..06f9d991
--- /dev/null
+++ b/translations/ro/7-bank-project/README.md
@@ -0,0 +1,35 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "830359535306594b448db6575ce5cdee",
+  "translation_date": "2025-08-27T22:54:37+00:00",
+  "source_file": "7-bank-project/README.md",
+  "language_code": "ro"
+}
+-->
+# :dollar: Construiește o Bancă
+
+În acest proiect, vei învăța cum să construiești o bancă fictivă. Aceste lecții includ instrucțiuni despre cum să proiectezi o aplicație web și să configurezi rutele, să construiești formulare, să gestionezi starea și să obții date dintr-un API de unde poți prelua informațiile băncii.
+
+| ![Screen1](../../../translated_images/screen1.baccbba0f1f93364672eb250d2fbd21574bb1caf79a2155022dc098a741cbdfe.ro.png) | ![Screen2](../../../translated_images/screen2.123c82a831a1d14ab2061994be2fa5de9cec1ce651047217d326d4773a6348e4.ro.png) |
+|--------------------------------|--------------------------------|
+
+## Lecții
+
+1. [Șabloane HTML și Rute într-o Aplicație Web](1-template-route/README.md)
+2. [Construiește un Formular de Autentificare și Înregistrare](2-forms/README.md)
+3. [Metode de Preluare și Utilizare a Datelor](3-data/README.md)
+4. [Concepte de Gestionare a Stării](4-state-management/README.md)
+
+### Credite
+
+Aceste lecții au fost scrise cu :hearts: de [Yohan Lasorsa](https://twitter.com/sinedied).
+
+Dacă ești interesat să înveți cum să construiești [API-ul serverului](/7-bank-project/api/README.md) utilizat în aceste lecții, poți urmări [această serie de videoclipuri](https://aka.ms/NodeBeginner) (în special videoclipurile 17 până la 21).
+
+De asemenea, poți arunca o privire la [acest tutorial interactiv Learn](https://aka.ms/learn/express-api).
+
+---
+
+**Declinare de responsabilitate**:  
+Acest document a fost tradus folosind serviciul de traducere AI [Co-op Translator](https://github.com/Azure/co-op-translator). Deși ne străduim să asigurăm acuratețea, vă rugăm să fiți conștienți că traducerile automate pot conține erori sau inexactități. Documentul original în limba sa natală ar trebui considerat sursa autoritară. Pentru informații critice, se recomandă traducerea profesională realizată de un specialist uman. Nu ne asumăm responsabilitatea pentru eventualele neînțelegeri sau interpretări greșite care pot apărea din utilizarea acestei traduceri.
\ No newline at end of file
diff --git a/translations/ro/7-bank-project/api/README.md b/translations/ro/7-bank-project/api/README.md
new file mode 100644
index 00000000..77a0bdca
--- /dev/null
+++ b/translations/ro/7-bank-project/api/README.md
@@ -0,0 +1,48 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "9884f8c8a61cf56214450f8b16a094ce",
+  "translation_date": "2025-08-27T22:55:01+00:00",
+  "source_file": "7-bank-project/api/README.md",
+  "language_code": "ro"
+}
+-->
+# API Bancară
+
+> API bancară construită cu [Node.js](https://nodejs.org) + [Express](https://expressjs.com/).
+
+API-ul este deja construit pentru tine și nu face parte din exercițiu.
+
+Totuși, dacă ești interesat să înveți cum să construiești un API ca acesta, poți urmări această serie de videoclipuri: https://aka.ms/NodeBeginner (videoclipurile 17 până la 21 acoperă exact acest API).
+
+De asemenea, poți arunca o privire la acest tutorial interactiv: https://aka.ms/learn/express-api
+
+## Pornirea serverului
+
+Asigură-te că ai instalat [Node.js](https://nodejs.org).
+
+1. Clonează acest repo [The Web-Dev-For-Beginners](https://github.com/microsoft/Web-Dev-For-Beginners).
+2. Deschide terminalul și navighează în folderul `Web-Dev-For-Beginners/7-bank-project/api`.
+3. Rulează `npm install` și așteaptă să se instaleze pachetele (poate dura ceva timp, în funcție de calitatea conexiunii tale la internet).
+4. După ce instalarea este finalizată, rulează `npm start` și ești gata de lucru.
+
+Serverul ar trebui să înceapă să asculte pe portul `5000`.
+*Acest server va rula împreună cu terminalul principal al aplicației bancare (ascultând pe portul `3000`), nu îl închide.*
+
+> Notă: toate înregistrările sunt stocate în memorie și nu sunt persistente, astfel încât, atunci când serverul este oprit, toate datele sunt pierdute.
+
+## Detalii API
+
+Rută                                         | Descriere
+---------------------------------------------|------------------------------------
+GET    /api/                                 | Obține informații despre server
+POST   /api/accounts/                        | Creează un cont, ex: `{ user: 'Yohan', description: 'My budget', currency: 'EUR', balance: 100 }`
+GET    /api/accounts/:user                   | Obține toate datele pentru contul specificat
+DELETE /api/accounts/:user                   | Șterge contul specificat
+POST   /api/accounts/:user/transactions      | Adaugă o tranzacție, ex: `{ date: '2020-07-23T18:25:43.511Z', object: 'Bought a book', amount: -20 }`
+DELETE  /api/accounts/:user/transactions/:id | Șterge tranzacția specificată
+
+---
+
+**Declinare de responsabilitate**:  
+Acest document a fost tradus folosind serviciul de traducere AI [Co-op Translator](https://github.com/Azure/co-op-translator). Deși ne străduim să asigurăm acuratețea, vă rugăm să rețineți că traducerile automate pot conține erori sau inexactități. Documentul original în limba sa natală ar trebui considerat sursa autoritară. Pentru informații critice, se recomandă traducerea profesională realizată de un specialist uman. Nu ne asumăm responsabilitatea pentru eventualele neînțelegeri sau interpretări greșite care pot apărea din utilizarea acestei traduceri.
\ No newline at end of file
diff --git a/translations/ro/7-bank-project/solution/README.md b/translations/ro/7-bank-project/solution/README.md
new file mode 100644
index 00000000..7958b923
--- /dev/null
+++ b/translations/ro/7-bank-project/solution/README.md
@@ -0,0 +1,27 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "461aa4fc74c6b1789c3a13b5d82c0cd9",
+  "translation_date": "2025-08-27T23:03:51+00:00",
+  "source_file": "7-bank-project/solution/README.md",
+  "language_code": "ro"
+}
+-->
+# Aplicație bancară
+
+> Soluție exemplu pentru proiectul aplicației bancare, construită cu HTML5, CSS și JavaScript simple (fără utilizarea de framework-uri sau biblioteci).
+
+## Rularea aplicației
+
+Mai întâi, asigură-te că [serverul API](../api/README.md) este pornit.
+
+Orice server web poate fi utilizat pentru a rula aplicația, dar, deoarece ar trebui să ai deja instalat [Node.js](https://nodejs.org) pentru a rula API-ul, poți:
+
+1. Clonează acest depozit folosind Git.
+2. Deschide un terminal, navighează la acest director, apoi rulează `npx lite-server .`. Acesta va porni un server web de dezvoltare pe portul `3000`.
+3. Deschide `http://localhost:3000` într-un browser pentru a rula aplicația.
+
+---
+
+**Declinare de responsabilitate**:  
+Acest document a fost tradus folosind serviciul de traducere AI [Co-op Translator](https://github.com/Azure/co-op-translator). Deși ne străduim să asigurăm acuratețea, vă rugăm să fiți conștienți că traducerile automate pot conține erori sau inexactități. Documentul original în limba sa natală ar trebui considerat sursa autoritară. Pentru informații critice, se recomandă traducerea profesională realizată de un specialist uman. Nu ne asumăm responsabilitatea pentru eventualele neînțelegeri sau interpretări greșite care pot apărea din utilizarea acestei traduceri.
\ No newline at end of file
diff --git a/translations/ro/8-code-editor/1-using-a-code-editor/README.md b/translations/ro/8-code-editor/1-using-a-code-editor/README.md
new file mode 100644
index 00000000..61f7ac0b
--- /dev/null
+++ b/translations/ro/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:37:49+00:00",
+  "source_file": "8-code-editor/1-using-a-code-editor/README.md",
+  "language_code": "ro"
+}
+-->
+# Utilizarea unui editor de cod
+
+Această lecție acoperă elementele de bază ale utilizării [VSCode.dev](https://vscode.dev), un editor de cod bazat pe web, astfel încât să poți face modificări în codul tău și să contribui la un proiect fără a instala nimic pe computerul tău.
+
+## Obiectivele învățării
+
+În această lecție, vei învăța cum să:
+
+- Utilizezi un editor de cod într-un proiect de cod
+- Urmărești modificările cu ajutorul controlului versiunilor
+- Personalizezi editorul pentru dezvoltare
+
+### Cerințe preliminare
+
+Înainte de a începe, va trebui să îți creezi un cont pe [GitHub](https://github.com). Accesează [GitHub](https://github.com/) și creează un cont dacă nu ai deja unul.
+
+### Introducere
+
+Un editor de cod este un instrument esențial pentru scrierea programelor și colaborarea la proiecte de cod existente. Odată ce înțelegi elementele de bază ale unui editor și cum să utilizezi funcțiile acestuia, vei putea să le aplici atunci când scrii cod.
+
+## Începutul cu VSCode.dev
+
+[VSCode.dev](https://vscode.dev) este un editor de cod pe web. Nu trebuie să instalezi nimic pentru a-l utiliza, la fel ca atunci când deschizi orice alt site web. Pentru a începe cu editorul, deschide următorul link: [https://vscode.dev](https://vscode.dev). Dacă nu ești conectat la [GitHub](https://github.com/), urmează instrucțiunile pentru a te conecta sau pentru a crea un cont nou și apoi conectează-te.
+
+După ce se încarcă, ar trebui să arate similar cu această imagine:
+
+![VSCode.dev implicit](../../../../translated_images/default-vscode-dev.5d06881d65c1b3234ce50cd9ed3b0028e6031ad5f5b441bcbed96bfa6311f6d0.ro.png)
+
+Există trei secțiuni principale, începând din partea stângă și mergând spre dreapta:
+
+1. _Bara de activitate_ care include câteva pictograme, cum ar fi lupa 🔎, roata dințată ⚙️ și altele câteva.
+2. Bara de activitate extinsă, care implicit este _Explorer_, numită _bara laterală_.
+3. Și, în final, zona de cod din dreapta.
+
+Fă clic pe fiecare dintre pictograme pentru a afișa un meniu diferit. După ce ai terminat, fă clic pe _Explorer_ pentru a reveni la punctul de plecare.
+
+Când începi să creezi cod sau să modifici cod existent, acest lucru se va întâmpla în cea mai mare zonă din dreapta. Vei folosi această zonă și pentru a vizualiza codul existent, ceea ce vei face în continuare.
+
+## Deschide un depozit GitHub
+
+Primul lucru de care ai nevoie este să deschizi un depozit GitHub. Există mai multe moduri de a deschide un depozit. În această secțiune vei vedea două moduri diferite prin care poți deschide un depozit pentru a începe să lucrezi la modificări.
+
+### 1. Cu editorul
+
+Folosește editorul pentru a deschide un depozit de la distanță. Dacă accesezi [VSCode.dev](https://vscode.dev), vei vedea un buton _"Open Remote Repository"_:
+
+![Deschide un depozit de la distanță](../../../../translated_images/open-remote-repository.bd9c2598b8949e7fc283cdfc8f4050c6205a7c7c6d3f78c4b135115d037d6fa2.ro.png)
+
+Poți folosi și paleta de comenzi. Paleta de comenzi este o casetă de introducere unde poți tasta orice cuvânt care face parte dintr-o comandă sau o acțiune pentru a găsi comanda potrivită de executat. Folosește meniul din stânga sus, apoi selectează _View_ și alege _Command Palette_, sau folosește următoarea combinație de taste: Ctrl-Shift-P (pe MacOS ar fi Command-Shift-P).
+
+![Meniul paletei](../../../../translated_images/palette-menu.4946174e07f426226afcdad707d19b8d5150e41591c751c45b5dee213affef91.ro.png)
+
+Odată ce meniul se deschide, tastează _open remote repository_ și apoi selectează prima opțiune. Vor apărea mai multe depozite din care faci parte sau pe care le-ai deschis recent. Poți folosi și un URL complet GitHub pentru a selecta unul. Folosește următorul URL și lipește-l în casetă:
+
+```
+https://github.com/microsoft/Web-Dev-For-Beginners
+```
+
+✅ Dacă totul a fost realizat cu succes, vei vedea toate fișierele acestui depozit încărcate în editorul de text.
+
+### 2. Utilizând URL-ul
+
+Poți folosi și un URL direct pentru a încărca un depozit. De exemplu, URL-ul complet pentru depozitul curent este [https://github.com/microsoft/Web-Dev-For-Beginners](https://github.com/microsoft/Web-Dev-For-Beginners), dar poți înlocui domeniul GitHub cu `VSCode.dev/github` și să încarci depozitul direct. URL-ul rezultat ar fi [https://vscode.dev/github/microsoft/Web-Dev-For-Beginners](https://vscode.dev/github/microsoft/Web-Dev-For-Beginners).
+
+## Editează fișiere
+
+Odată ce ai deschis depozitul în browser/vscode.dev, următorul pas este să faci actualizări sau modificări la proiect.
+
+### 1. Creează un fișier nou
+
+Poți crea un fișier fie într-un folder existent, fie în directorul/folderul rădăcină. Pentru a crea un fișier nou, deschide locația/directorul în care vrei să salvezi fișierul și selectează pictograma _'New file ...'_ din bara de activitate _(stânga)_, dă-i un nume și apasă Enter.
+
+![Creează un fișier nou](../../../../translated_images/create-new-file.2814e609c2af9aeb6c6fd53156c503ac91c3d538f9cac63073b2dd4a7631f183.ro.png)
+
+### 2. Editează și salvează un fișier în depozit
+
+Utilizarea vscode.dev este utilă ori de câte ori vrei să faci actualizări rapide la proiectul tău fără a încărca vreun software local.
+Pentru a-ți actualiza codul, fă clic pe pictograma 'Explorer', de asemenea localizată pe bara de activitate, pentru a vizualiza fișierele și folderele din depozit.
+Selectează un fișier pentru a-l deschide în zona de cod, fă modificările și salvează.
+
+![Editează un fișier](../../../../translated_images/edit-a-file.52c0ee665ef19f08119d62d63f395dfefddc0a4deb9268d73bfe791f52c5807a.ro.png)
+
+După ce ai terminat de actualizat proiectul, selectează pictograma _`source control`_ care conține toate modificările noi pe care le-ai făcut în depozit.
+
+Pentru a vizualiza modificările pe care le-ai făcut în proiect, selectează fișierul(ele) din folderul `Changes` din bara de activitate extinsă. Acest lucru va deschide un 'Working Tree' pentru a vedea vizual modificările pe care le-ai făcut în fișier. Roșu indică o omisiune din proiect, în timp ce verdele semnifică o adăugare.
+
+![Vizualizează modificările](../../../../translated_images/working-tree.c58eec08e6335c79cc708c0c220c0b7fea61514bd3c7fb7471905a864aceac7c.ro.png)
+
+Dacă ești mulțumit de modificările pe care le-ai făcut, plasează cursorul pe folderul `Changes` și fă clic pe butonul `+` pentru a stabili modificările. Stabilirea înseamnă pur și simplu pregătirea modificărilor pentru a le trimite pe GitHub.
+
+Dacă, totuși, nu ești confortabil cu unele modificări și vrei să le anulezi, plasează cursorul pe folderul `Changes` și selectează pictograma `undo`.
+
+Apoi, tastează un `commit message` _(O descriere a modificării pe care ai făcut-o proiectului)_, fă clic pe pictograma `check` pentru a confirma și trimite modificările.
+
+După ce ai terminat de lucrat la proiect, selectează pictograma `hamburger menu` din stânga sus pentru a reveni la depozitul de pe github.com.
+
+![Stabilește și confirmă modificările](../../../../8-code-editor/images/edit-vscode.dev.gif)
+
+## Utilizarea extensiilor
+
+Instalarea extensiilor pe VSCode îți permite să adaugi funcții noi și opțiuni personalizate pentru mediul de dezvoltare în editorul tău, pentru a-ți îmbunătăți fluxul de lucru. Aceste extensii te ajută, de asemenea, să adaugi suport pentru mai multe limbaje de programare și sunt adesea fie extensii generice, fie bazate pe limbaj.
+
+Pentru a naviga prin lista tuturor extensiilor disponibile, fă clic pe pictograma _`Extensions`_ din bara de activitate și începe să tastezi numele extensiei în câmpul de text etichetat _'Search Extensions in Marketplace'_.
+Vei vedea o listă de extensii, fiecare conținând **numele extensiei, numele editorului, o descriere de o propoziție, numărul de descărcări** și **un rating cu stele**.
+
+![Detalii extensii](../../../../translated_images/extension-details.9f8f1fd4e9eb2de5069ae413119eb8ee43172776383ebe2f7cf640e11df2e106.ro.png)
+
+Poți vizualiza, de asemenea, toate extensiile instalate anterior extinzând folderul _`Installed`_, extensiile populare utilizate de majoritatea dezvoltatorilor în folderul _`Popular`_ și extensiile recomandate pentru tine fie de utilizatori din același spațiu de lucru, fie pe baza fișierelor deschise recent în folderul _`recommended`_.
+
+![Vizualizează extensiile](../../../../translated_images/extensions.eca0e0c7f59a10b5c88be7fe24b3e32cca6b6058b35a49026c3a9d80b1813b7c.ro.png)
+
+### 1. Instalează extensii
+
+Pentru a instala o extensie, tastează numele extensiei în câmpul de căutare și fă clic pe ea pentru a vizualiza informații suplimentare despre extensie în zona de cod odată ce apare în bara de activitate extinsă.
+
+Poți face clic pe butonul _albastru de instalare_ din bara de activitate extinsă pentru a instala sau poți folosi butonul de instalare care apare în zona de cod odată ce selectezi extensia pentru a încărca informații suplimentare.
+
+![Instalează extensii](../../../../8-code-editor/images/install-extension.gif)
+
+### 2. Personalizează extensiile
+
+După instalarea extensiei, este posibil să fie nevoie să îi modifici comportamentul și să o personalizezi în funcție de preferințele tale. Pentru a face acest lucru, selectează pictograma Extensions, iar de această dată extensia ta va apărea în folderul _Installed_, fă clic pe _**pictograma Gear**_ și navighează la _Extensions Setting_.
+
+![Modifică setările extensiei](../../../../translated_images/extension-settings.21c752ae4f4cdb78a867f140ccd0680e04619d0c44bb4afb26373e54b829d934.ro.png)
+
+### 3. Gestionează extensiile
+
+După instalarea și utilizarea extensiei, vscode.dev oferă opțiuni pentru a gestiona extensia în funcție de diferite nevoi. De exemplu, poți alege să:
+
+- **Dezactivezi:** _(Dezactivezi temporar o extensie atunci când nu mai ai nevoie de ea, dar nu vrei să o dezinstalezi complet)_
+
+    Selectează extensia instalată din bara de activitate extinsă > fă clic pe pictograma Gear > selectează 'Disable' sau 'Disable (Workspace)' **SAU** Deschide extensia în zona de cod și fă clic pe butonul albastru Disable.
+
+- **Dezinstalezi:** Selectează extensia instalată din bara de activitate extinsă > fă clic pe pictograma Gear > selectează 'Uninstall' **SAU** Deschide extensia în zona de cod și fă clic pe butonul albastru Uninstall.
+
+---
+
+## Temă
+
+[Crează un site de tip CV folosind vscode.dev](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/8-code-editor/1-using-a-code-editor/assignment.md)
+
+## Recapitulare și studiu individual
+
+Citește mai multe despre [VSCode.dev](https://code.visualstudio.com/docs/editor/vscode-web?WT.mc_id=academic-0000-alfredodeza) și alte funcții ale acestuia.
+
+---
+
+**Declinare de responsabilitate**:  
+Acest document a fost tradus folosind serviciul de traducere AI [Co-op Translator](https://github.com/Azure/co-op-translator). Deși ne străduim să asigurăm acuratețea, vă rugăm să fiți conștienți că traducerile automate pot conține erori sau inexactități. Documentul original în limba sa natală ar trebui considerat sursa autoritară. Pentru informații critice, se recomandă traducerea profesională realizată de un specialist uman. Nu ne asumăm responsabilitatea pentru eventualele neînțelegeri sau interpretări greșite care pot apărea din utilizarea acestei traduceri.
\ No newline at end of file
diff --git a/translations/ro/8-code-editor/1-using-a-code-editor/assignment.md b/translations/ro/8-code-editor/1-using-a-code-editor/assignment.md
new file mode 100644
index 00000000..853535e3
--- /dev/null
+++ b/translations/ro/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:39:35+00:00",
+  "source_file": "8-code-editor/1-using-a-code-editor/assignment.md",
+  "language_code": "ro"
+}
+-->
+# Creează un site de tip CV folosind vscode.dev
+
+_Cât de tare ar fi ca un recrutor să îți ceară CV-ul și tu să îi trimiți un link?_ 😎
+
+## Obiective
+
+După această activitate, vei învăța cum să:
+
+- Creezi un site pentru a-ți prezenta CV-ul
+
+### Cerințe preliminare
+
+1. Un cont GitHub. Accesează [GitHub](https://github.com/) și creează un cont dacă nu ai deja unul.
+
+## Pași
+
+**Pasul 1:** Creează un nou repository GitHub și dă-i numele `my-resume`
+
+**Pasul 2:** Creează un fișier `index.html` în repository-ul tău. Vom adăuga cel puțin un fișier direct pe github.com, deoarece nu poți deschide un repository gol pe vscode.dev.
+
+Apasă pe linkul `creating a new file`, scrie numele `index.html` și selectează butonul `Commit new file`.
+
+![Creează un fișier nou pe github.com](../../../../translated_images/new-file-github.com.c886796d800e8056561829a181be1382c5303da9d902d8b2dd82b68a4806e21f.ro.png)
+
+**Pasul 3:** Deschide [VSCode.dev](https://vscode.dev) și selectează butonul `Open Remote Repository`.
+
+Copiază URL-ul repository-ului pe care tocmai l-ai creat pentru site-ul tău de CV și lipește-l în caseta de input:
+
+_Înlocuiește `your-username` cu numele tău de utilizator GitHub._
+
+```
+https://github.com/your-username/my-resume
+```
+
+✅ Dacă totul a fost realizat cu succes, vei vedea proiectul tău și fișierul index.html deschise în editorul de text din browser.
+
+![Creează un fișier nou](../../../../translated_images/project-on-vscode.dev.e79815a9a95ee7feac72ebe5c941c91279716be37c575dbdbf2f43bea2c7d8b6.ro.png)
+
+**Pasul 4:** Deschide fișierul `index.html`, lipește codul de mai jos în zona de cod și salvează.
+
+<details>
+    <summary><b>Cod HTML responsabil pentru conținutul site-ului tău de CV.</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>Numele Tău Aici!</title>
+            </head>
+            <body>
+                <header id="header">
+                    <!-- antetul CV-ului cu numele și titlul tău -->
+                    <h1>Numele Tău Aici!</h1>
+                    <hr>
+                    Rolul Tău!
+                    <hr>
+                </header>
+                <main>
+                    <article id="mainLeft">
+                        <section>
+                            <h2>CONTACT</h2>
+                            <!-- informații de contact, inclusiv social media -->
+                            <p>
+                                <i class="fa fa-envelope" aria-hidden="true"></i>
+                                <a href="mailto:username@domain.top-level domain">Scrie emailul tău aici</a>
+                            </p>
+                            <p>
+                                <i class="fab fa-github" aria-hidden="true"></i>
+                                <a href="github.com/yourGitHubUsername">Scrie numele tău de utilizator aici!</a>
+                            </p>
+                            <p>
+                                <i class="fab fa-linkedin" aria-hidden="true"></i>
+                                <a href="linkedin.com/yourLinkedInUsername">Scrie numele tău de utilizator aici!</a>
+                            </p>
+                        </section>
+                        <section>
+                            <h2>ABILITĂȚI</h2>
+                            <!-- abilitățile tale -->
+                            <ul>
+                                <li>Abilitatea 1!</li>
+                                <li>Abilitatea 2!</li>
+                                <li>Abilitatea 3!</li>
+                                <li>Abilitatea 4!</li>
+                            </ul>
+                        </section>
+                        <section>
+                            <h2>EDUCAȚIE</h2>
+                            <!-- educația ta -->
+                            <h3>Scrie cursul tău aici!</h3>
+                            <p>
+                                Scrie instituția ta aici!
+                            </p>
+                            <p>
+                                Data de început - Data de final
+                            </p>
+                        </section>            
+                    </article>
+                    <article id="mainRight">
+                        <section>
+                            <h2>DESPRE</h2>
+                            <!-- despre tine -->
+                            <p>Scrie câteva cuvinte despre tine!</p>
+                        </section>
+                        <section>
+                            <h2>EXPERIENȚĂ PROFESIONALĂ</h2>
+                            <!-- experiența ta profesională -->
+                            <h3>Titlul Jobului</h3>
+                            <p>
+                                Numele Organizației Aici | Luna de început – Luna de final
+                            </p>
+                            <ul>
+                                    <li>Sarcina 1 - Scrie ce ai făcut!</li>
+                                    <li>Sarcina 2 - Scrie ce ai făcut!</li>
+                                    <li>Scrie rezultatele/impactul contribuției tale</li>
+                                    
+                            </ul>
+                            <h3>Titlul Jobului 2</h3>
+                            <p>
+                                Numele Organizației Aici | Luna de început – Luna de final
+                            </p>
+                            <ul>
+                                    <li>Sarcina 1 - Scrie ce ai făcut!</li>
+                                    <li>Sarcina 2 - Scrie ce ai făcut!</li>
+                                    <li>Scrie rezultatele/impactul contribuției tale</li>
+                                    
+                            </ul>
+                        </section>
+                    </article>
+                </main>
+            </body>
+        </html>
+</details>
+
+Adaugă detaliile CV-ului tău pentru a înlocui _textul de tip placeholder_ din codul HTML.
+
+**Pasul 5:** Plasează cursorul pe folderul My-Resume, apasă pe pictograma `New File ...` și creează 2 fișiere noi în proiectul tău: `style.css` și `codeswing.json`.
+
+**Pasul 6:** Deschide fișierul `style.css`, lipește codul de mai jos și salvează.
+
+<details>
+        <summary><b>Cod CSS pentru formatul layout-ului site-ului.</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>
+
+**Pasul 6:** Deschide fișierul `codeswing.json`, lipește codul de mai jos și salvează.
+
+    {
+    "scripts": [],
+    "styles": []
+    }
+
+**Pasul 7:** Instalează extensia `Codeswing` pentru a vizualiza site-ul CV-ului în zona de cod.
+
+Apasă pe pictograma _`Extensions`_ din bara de activități și tastează Codeswing. Fie apasă pe _butonul albastru de instalare_ din bara de activități extinsă pentru a instala, fie folosește butonul de instalare care apare în zona de cod odată ce selectezi extensia pentru a încărca informații suplimentare. Imediat după instalarea extensiei, observă schimbările din proiectul tău 😃.
+
+![Instalează extensii](../../../../8-code-editor/images/install-extension.gif)
+
+Aceasta este ceea ce vei vedea pe ecranul tău după instalarea extensiei.
+
+![Extensia Codeswing în acțiune](../../../../translated_images/after-codeswing-extension-pb.0ebddddcf73b550994947a9084e35e2836c713ae13839d49628e3c764c1cfe83.ro.png)
+
+Dacă ești mulțumit de schimbările pe care le-ai făcut, plasează cursorul pe folderul `Changes` și apasă pe butonul `+` pentru a stoca modificările.
+
+Scrie un mesaj de commit _(O descriere a modificării pe care ai făcut-o proiectului)_ și confirmă modificările apăsând pe `check`. După ce ai terminat de lucrat la proiectul tău, selectează pictograma meniului hamburger din colțul stâng sus pentru a reveni la repository-ul de pe GitHub.
+
+Felicitări 🎉 Tocmai ai creat un site de tip CV folosind vscode.dev în câțiva pași.
+
+## 🚀 Provocare
+
+Deschide un repository remote la care ai permisiuni să faci modificări și actualizează câteva fișiere. Apoi, încearcă să creezi un nou branch cu modificările tale și să faci un Pull Request.
+
+## Recapitulare și Studiu Individual
+
+Citește mai multe despre [VSCode.dev](https://code.visualstudio.com/docs/editor/vscode-web?WT.mc_id=academic-0000-alfredodeza) și alte funcționalități ale acestuia.
+
+---
+
+**Declinare de responsabilitate**:  
+Acest document a fost tradus folosind serviciul de traducere AI [Co-op Translator](https://github.com/Azure/co-op-translator). Deși ne străduim să asigurăm acuratețea, vă rugăm să fiți conștienți că traducerile automate pot conține erori sau inexactități. Documentul original în limba sa natală ar trebui considerat sursa autoritară. Pentru informații critice, se recomandă traducerea profesională realizată de un specialist uman. Nu ne asumăm responsabilitatea pentru eventualele neînțelegeri sau interpretări greșite care pot apărea din utilizarea acestei traduceri.
\ No newline at end of file
diff --git a/translations/ro/CODE_OF_CONDUCT.md b/translations/ro/CODE_OF_CONDUCT.md
new file mode 100644
index 00000000..f538743d
--- /dev/null
+++ b/translations/ro/CODE_OF_CONDUCT.md
@@ -0,0 +1,23 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "b0a9b4cccd918195f58224d5793da1a6",
+  "translation_date": "2025-08-27T21:57:31+00:00",
+  "source_file": "CODE_OF_CONDUCT.md",
+  "language_code": "ro"
+}
+-->
+# Codul de Conduită pentru Proiectele Open Source Microsoft
+
+Acest proiect a adoptat [Codul de Conduită pentru Proiectele Open Source Microsoft](https://opensource.microsoft.com/codeofconduct/?WT.mc_id=academic-77807-sagibbon).
+
+Resurse:
+
+- [Codul de Conduită pentru Proiectele Open Source Microsoft](https://opensource.microsoft.com/codeofconduct/?WT.mc_id=academic-77807-sagibbon)
+- [Întrebări frecvente despre Codul de Conduită Microsoft](https://opensource.microsoft.com/codeofconduct/faq/?WT.mc_id=academic-77807-sagibbon)
+- Contactați [opencode@microsoft.com](mailto:opencode@microsoft.com) pentru întrebări sau nelămuriri
+
+---
+
+**Declinare de responsabilitate**:  
+Acest document a fost tradus folosind serviciul de traducere AI [Co-op Translator](https://github.com/Azure/co-op-translator). Deși ne străduim să asigurăm acuratețea, vă rugăm să fiți conștienți că traducerile automate pot conține erori sau inexactități. Documentul original în limba sa natală ar trebui considerat sursa autoritară. Pentru informații critice, se recomandă traducerea profesională realizată de un specialist uman. Nu ne asumăm responsabilitatea pentru eventualele neînțelegeri sau interpretări greșite care pot apărea din utilizarea acestei traduceri.
\ No newline at end of file
diff --git a/translations/ro/CONTRIBUTING.md b/translations/ro/CONTRIBUTING.md
new file mode 100644
index 00000000..ffc1701e
--- /dev/null
+++ b/translations/ro/CONTRIBUTING.md
@@ -0,0 +1,23 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "777400e9f0336c7ee2f9a1200a88478f",
+  "translation_date": "2025-08-27T21:58:52+00:00",
+  "source_file": "CONTRIBUTING.md",
+  "language_code": "ro"
+}
+-->
+# Contribuții
+
+Acest proiect acceptă contribuții și sugestii. Majoritatea contribuțiilor necesită ca tu să fii de acord cu un Acord de Licență pentru Contribuitori (CLA), declarând că ai dreptul și, de fapt, acorzi drepturile necesare pentru ca noi să folosim contribuția ta. Pentru mai multe detalii, vizitează [https://cla.microsoft.com](https://cla.microsoft.com/?WT.mc_id=academic-77807-sagibbon).
+
+Când trimiți un pull request, un bot CLA va determina automat dacă trebuie să furnizezi un CLA și va marca PR-ul corespunzător (de exemplu, etichetă, comentariu). Urmează pur și simplu instrucțiunile oferite de bot. Va trebui să faci acest lucru o singură dată pentru toate depozitele care folosesc CLA-ul nostru. Te rugăm, de asemenea, să încerci să ne spui de ce ai făcut acea modificare, astfel încât să înțelegem mai bine cererea ta.
+
+Acest proiect a adoptat [Codul de Conduită Microsoft Open Source](https://opensource.microsoft.com/codeofconduct/?WT.mc_id=academic-77807-sagibbon).  
+Pentru mai multe informații, consultă [FAQ-ul Codului de Conduită](https://opensource.microsoft.com/codeofconduct/faq/?WT.mc_id=academic-77807-sagibbon)  
+sau contactează [opencode@microsoft.com](mailto:opencode@microsoft.com) pentru orice întrebări sau comentarii suplimentare.
+
+---
+
+**Declinarea responsabilității**:  
+Acest document a fost tradus utilizând serviciul de traducere AI [Co-op Translator](https://github.com/Azure/co-op-translator). Deși depunem eforturi pentru a asigura acuratețea, vă rugăm să aveți în vedere că traducerile automate pot conține erori sau inexactități. Documentul original în limba sa nativă ar trebui considerat sursa autoritară. Pentru informații critice, se recomandă traducerea profesională realizată de un specialist uman. Nu ne asumăm răspunderea pentru eventualele neînțelegeri sau interpretări greșite care pot apărea din utilizarea acestei traduceri.
\ No newline at end of file
diff --git a/translations/ro/README.md b/translations/ro/README.md
new file mode 100644
index 00000000..3d9f605b
--- /dev/null
+++ b/translations/ro/README.md
@@ -0,0 +1,206 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "b672130244189715ac084c3259f6ab58",
+  "translation_date": "2025-08-27T21:53:09+00:00",
+  "source_file": "README.md",
+  "language_code": "ro"
+}
+-->
+[![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)  
+
+# Dezvoltare Web pentru Începători - Un Curriculum  
+
+Învață elementele de bază ale dezvoltării web cu cursul nostru cuprinzător de 12 săptămâni oferit de Microsoft Cloud Advocates. Fiecare dintre cele 24 de lecții explorează JavaScript, CSS și HTML prin proiecte practice precum terarii, extensii de browser și jocuri spațiale. Participă la quiz-uri, discuții și sarcini practice. Îmbunătățește-ți abilitățile și optimizează-ți retenția cunoștințelor cu pedagogia noastră bazată pe proiecte. Începe astăzi călătoria ta în programare!  
+
+#### 🧑‍🎓 _Ești student?_  
+
+Vizitează [**pagina Student Hub**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) unde vei găsi resurse pentru începători, pachete pentru studenți și chiar modalități de a obține un voucher gratuit pentru certificare. Aceasta este pagina pe care vrei să o salvezi și să o verifici periodic, deoarece conținutul este actualizat lunar.  
+
+### 📣 Anunț - _Curriculum Nou_ despre Generative AI pentru JavaScript tocmai a fost lansat  
+
+Nu rata noul nostru curriculum despre Generative AI!  
+
+Vizitează [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) pentru a începe!  
+
+<div>  
+  <img src="./images/background.png" width="600px" />  
+</div>  
+
+- Lecții care acoperă totul, de la elementele de bază la RAG.  
+- Interacționează cu personaje istorice folosind GenAI și aplicația noastră companion.  
+- Narațiune distractivă și captivantă, vei călători în timp!  
+
+<div>  
+  <img src="./images/character.png" width="600px" />  
+</div>  
+
+Fiecare lecție include o sarcină de completat, o verificare a cunoștințelor și o provocare pentru a te ghida în învățarea subiectelor precum:  
+- Prompting și ingineria prompturilor  
+- Generarea de aplicații text și imagine  
+- Aplicații de căutare  
+
+Vizitează [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) pentru a începe!  
+
+## 🌱 Începe  
+
+> **Profesori**, am [inclus câteva sugestii](for-teachers.md) despre cum să utilizați acest curriculum. Ne-ar plăcea să primim feedback-ul vostru [în forumul nostru de discuții](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!  
+
+**[Cursanți](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, pentru fiecare lecție, începeți cu un quiz de pre-lectură și continuați cu citirea materialului de lectură, completarea diferitelor activități și verificați înțelegerea voastră cu quiz-ul de post-lectură.  
+
+Pentru a îmbunătăți experiența de învățare, conectați-vă cu colegii voștri pentru a lucra împreună la proiecte! Discuțiile sunt încurajate în [forum-ul nostru de discuții](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), unde echipa noastră de moderatori va fi disponibilă pentru a răspunde întrebărilor voastre.  
+
+Pentru a vă continua educația, recomandăm cu tărie explorarea [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) pentru materiale de studiu suplimentare.  
+
+### 📋 Configurarea mediului  
+
+Acest curriculum are un mediu de dezvoltare gata de utilizare! Pe măsură ce începeți, puteți alege să rulați curriculum-ul într-un [Codespace](https://github.com/features/codespaces/) (_un mediu bazat pe browser, fără instalări necesare_) sau local pe computerul vostru folosind un editor de text precum [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).  
+
+#### Creați propriul vostru repository  
+Pentru a salva cu ușurință munca voastră, se recomandă să creați o copie proprie a acestui repository. Puteți face acest lucru făcând clic pe butonul **Use this template** din partea de sus a paginii. Acest lucru va crea un nou repository în contul vostru GitHub cu o copie a curriculum-ului.  
+
+Urmați acești pași:  
+1. **Fork Repository-ul**: Faceți clic pe butonul "Fork" din colțul din dreapta sus al acestei pagini.  
+2. **Clonați Repository-ul**:   `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`  
+
+#### Rularea curriculum-ului într-un Codespace  
+
+În copia voastră a acestui repository pe care ați creat-o, faceți clic pe butonul **Code** și selectați **Open with Codespaces**. Acest lucru va crea un nou Codespace pentru voi, unde puteți lucra.  
+
+<img src="./images/createcodespace.png" alt="Create codespace" style="width:270px;"/>  
+
+#### Rularea curriculum-ului local pe computerul vostru  
+
+Pentru a rula acest curriculum local pe computerul vostru, veți avea nevoie de un editor de text, un browser și un instrument de linie de comandă. Prima noastră lecție, [Introducere în Limbaje de Programare și Instrumente de Lucru](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/1-getting-started-lessons/1-intro-to-programming-languages), vă va ghida prin diverse opțiuni pentru fiecare dintre aceste instrumente, astfel încât să selectați ceea ce funcționează cel mai bine pentru voi.  
+
+Recomandarea noastră este să utilizați [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) ca editor, care are și un [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) integrat. Puteți descărca Visual Studio Code [aici](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).  
+
+1. Clonați repository-ul vostru pe computer. Puteți face acest lucru făcând clic pe butonul **Code** și copiind URL-ul:  
+
+    <img src="./images/createcodespace.png" alt="Copy your repository URL" style="width:270px;"/>  
+
+    Apoi, deschideți [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) în cadrul [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) și rulați următoarea comandă, înlocuind `<your-repository-url>` cu URL-ul pe care tocmai l-ați copiat:  
+
+    ```bash 
+    git clone <your-repository-url>
+    ```  
+
+2. Deschideți folderul în Visual Studio Code. Puteți face acest lucru făcând clic pe **File** > **Open Folder** și selectând folderul pe care tocmai l-ați clonat.  
+
+>  Extensii recomandate pentru Visual Studio Code:  
+>  
+> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - pentru a previzualiza paginile HTML direct în Visual Studio Code  
+> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - pentru a vă ajuta să scrieți cod mai rapid  
+
+## 📂 Fiecare lecție include:  
+
+- sketchnote opțional  
+- video suplimentar opțional  
+- quiz de încălzire înainte de lecție  
+- lecție scrisă  
+- pentru lecțiile bazate pe proiecte, ghiduri pas cu pas despre cum să construiți proiectul  
+- verificări ale cunoștințelor  
+- o provocare  
+- lectură suplimentară  
+- sarcină  
+- quiz de final de lecție  
+
+> **O notă despre quiz-uri**: Toate quiz-urile sunt conținute în folderul Quiz-app, 48 de quiz-uri în total, fiecare cu trei întrebări. Acestea sunt legate din cadrul lecțiilor, iar aplicația de quiz poate fi rulată local sau implementată pe Azure; urmați instrucțiunile din folderul `quiz-app`. Acestea sunt treptat localizate.  
+
+## 🗃️ Lecții  
+
+|     |                       Numele Proiectului                       |                            Concepte Predate                             | Obiective de Învățare                                                                                                               |                                                         Lecția Legată                                                          |         Autor          |  
+| :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |  
+| 01  |                     Începutul                      |           Introducere în Programare și Instrumente de Lucru           | Învață bazele din spatele majorității limbajelor de programare și despre software-ul care ajută dezvoltatorii profesioniști să-și facă treaba | [Introducere în Limbaje de Programare și Instrumente de Lucru](/1-getting-started-lessons/1-intro-to-programming-languages/README.md) |         Jasmine         |  
+| 02  |                     Începutul                      |             Bazele GitHub, inclusiv lucrul în echipă             | Cum să folosești GitHub în proiectul tău, cum să colaborezi cu alții pe o bază de cod                                                    |                            [Introducere în GitHub](/1-getting-started-lessons/2-github-basics/README.md)                             |          Floor          |  
+| 03  |                     Începutul                      |                             Accesibilitate                              | Învață bazele accesibilității web                                                                                               |                       [Fundamentele Accesibilității](/1-getting-started-lessons/3-accessibility/README.md)                       |       Christopher       |  
+| 04  |                        Bazele JS                         |                         Tipuri de Date în JavaScript                          | Bazele tipurilor de date în JavaScript                                                                                                 |                                       [Tipuri de Date](/2-js-basics/1-data-types/README.md)                                        |         Jasmine         |  
+| 05  |                        Bazele JS                         |                         Funcții și Metode                          | Învață despre funcții și metode pentru a gestiona fluxul logic al unei aplicații                                                             |                              [Funcții și Metode](/2-js-basics/2-functions-methods/README.md)                               | Jasmine și Christopher |  
+| 06  |                        Bazele JS                         |                        Luarea Deciziilor cu JS                        | Învață cum să creezi condiții în codul tău folosind metode de luare a deciziilor                                                           |                                 [Luarea Deciziilor](/2-js-basics/3-making-decisions/README.md)                                  |         Jasmine         |  
+| 07  |                        Bazele JS                         |                            Arrays și Bucle                            | Lucrează cu date folosind arrays și bucle în JavaScript                                                                                 |                                   [Arrays și Bucle](/2-js-basics/4-arrays-loops/README.md)                                    |         Jasmine         |  
+| 08  |       [Terariu](/3-terrarium/solution/README.md)       |                            HTML în Practică                            | Construiește HTML-ul pentru a crea un terariu online, concentrându-te pe crearea unui layout                                                         |                                 [Introducere în HTML](/3-terrarium/1-intro-to-html/README.md)                                 |           Jen           |  
+| 09  |       [Terariu](/3-terrarium/solution/README.md)       |                            CSS în Practică                             | Construiește CSS-ul pentru a stiliza terariul online, concentrându-te pe bazele CSS, inclusiv pe crearea paginii responsive                     |                                  [Introducere în CSS](/3-terrarium/2-intro-to-css/README.md)                                  |           Jen           |  
+| 10  |            [Terariu](/3-terrarium/solution/README.md)            |                 Closures în JavaScript, manipularea DOM                  | Construiește JavaScript-ul pentru a face terariul să funcționeze ca o interfață drag/drop, concentrându-te pe closures și manipularea DOM             |                  [Closures în JavaScript, manipularea DOM](/3-terrarium/3-intro-to-DOM-and-closures/README.md)                   |           Jen           |  
+| 11  |          [Joc de Tastare](/4-typing-game/solution/README.md)          |                          Construiește un Joc de Tastare                           | Învață cum să folosești evenimentele tastaturii pentru a conduce logica aplicației tale JavaScript                                                          |                                [Programare Bazată pe Evenimente](/4-typing-game/typing-game/README.md)                                |       Christopher       |  
+| 12  | [Green Browser Extension](/5-browser-extension/solution/README.md) |                         Lucrul cu browserele                          | Învață cum funcționează browserele, istoria lor și cum să creezi primele elemente ale unei extensii de browser                     |                               [Despre Browsere](/5-browser-extension/1-about-browsers/README.md)                                |           Jen           |
+| 13  | [Green Browser Extension](/5-browser-extension/solution/README.md) | Construirea unui formular, apelarea unui API și stocarea variabilelor în local storage | Construiește elementele JavaScript ale extensiei de browser pentru a apela un API folosind variabile stocate în local storage      |                [API-uri, Formulare și Local Storage](/5-browser-extension/2-forms-browsers-local-storage/README.md)             |           Jen           |
+| 14  | [Green Browser Extension](/5-browser-extension/solution/README.md) |          Procese de fundal în browser, performanța web                | Utilizează procesele de fundal ale browserului pentru a gestiona pictograma extensiei; învață despre performanța web și optimizări |             [Procese de Fundal și Performanță](/5-browser-extension/3-background-tasks-and-performance/README.md)               |           Jen           |
+| 15  |           [Space Game](/6-space-game/solution/README.md)           |             Dezvoltare avansată de jocuri cu JavaScript               | Învață despre Moștenire folosind atât Clase, cât și Compoziție, și despre modelul Pub/Sub, ca pregătire pentru construirea unui joc |                      [Introducere în Dezvoltarea Avansată de Jocuri](/6-space-game/1-introduction/README.md)                    |          Chris          |
+| 16  |           [Space Game](/6-space-game/solution/README.md)           |                           Desenarea pe canvas                         | Învață despre API-ul Canvas, utilizat pentru a desena elemente pe ecran                                                          |                                [Desenarea pe Canvas](/6-space-game/2-drawing-to-canvas/README.md)                               |          Chris          |
+| 17  |           [Space Game](/6-space-game/solution/README.md)           |                   Mișcarea elementelor pe ecran                       | Descoperă cum elementele pot căpăta mișcare folosind coordonatele carteziene și API-ul Canvas                                    |                           [Mișcarea Elementelor](/6-space-game/3-moving-elements-around/README.md)                              |          Chris          |
+| 18  |           [Space Game](/6-space-game/solution/README.md)           |                          Detectarea coliziunilor                      | Fă elementele să se ciocnească și să reacționeze între ele folosind apăsări de taste și oferă o funcție de cooldown pentru performanță |                              [Detectarea Coliziunilor](/6-space-game/4-collision-detection/README.md)                          |          Chris          |
+| 19  |           [Space Game](/6-space-game/solution/README.md)           |                             Punctajul                                 | Realizează calcule matematice bazate pe starea și performanța jocului                                                            |                                    [Punctajul](/6-space-game/5-keeping-score/README.md)                                         |          Chris          |
+| 20  |           [Space Game](/6-space-game/solution/README.md)           |                     Încheierea și repornirea jocului                  | Învață despre încheierea și repornirea jocului, inclusiv curățarea resurselor și resetarea valorilor variabilelor                 |                                [Condiția de Încheiere](/6-space-game/6-end-condition/README.md)                                 |          Chris          |
+| 21  |         [Banking App](/7-bank-project/solution/README.md)          |                 Șabloane HTML și Rute într-o aplicație web            | Învață cum să creezi structura arhitecturii unui site web cu mai multe pagini folosind rutare și șabloane HTML                   |                            [Șabloane HTML și Rute](/7-bank-project/1-template-route/README.md)                                  |          Yohan          |
+| 22  |         [Banking App](/7-bank-project/solution/README.md)          |                  Construirea unui formular de autentificare și înregistrare | Învață despre construirea formularelor și gestionarea rutinei de validare                                                        |                                           [Formulare](/7-bank-project/2-forms/README.md)                                        |          Yohan          |
+| 23  |         [Banking App](/7-bank-project/solution/README.md)          |                   Metode de preluare și utilizare a datelor           | Cum circulă datele în și din aplicația ta, cum să le preiei, stochezi și elimini                                                |                                            [Date](/7-bank-project/3-data/README.md)                                             |          Yohan          |
+| 24  |         [Banking App](/7-bank-project/solution/README.md)          |                      Concepte de gestionare a stării                  | Învață cum aplicația ta reține starea și cum să o gestionezi programatic                                                         |                                [Gestionarea Stării](/7-bank-project/4-state-management/README.md)                               |          Yohan          |
+
+
+## 🏫 Pedagogie
+
+Curriculum-ul nostru este conceput pe baza a două principii pedagogice cheie:
+* învățare bazată pe proiecte
+* teste frecvente
+
+Programul predă fundamentele JavaScript, HTML și CSS, precum și cele mai noi instrumente și tehnici utilizate de dezvoltatorii web de astăzi. Studenții vor avea oportunitatea de a dobândi experiență practică prin construirea unui joc de tastare, a unui terariu virtual, a unei extensii de browser eco-friendly, a unui joc în stil Space Invaders și a unei aplicații bancare pentru afaceri. La finalul seriei, studenții vor avea o înțelegere solidă a dezvoltării web.
+
+> 🎓 Poți parcurge primele câteva lecții din acest curriculum ca un [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) pe Microsoft Learn!
+
+Asigurându-ne că conținutul se aliniază cu proiectele, procesul devine mai captivant pentru studenți, iar reținerea conceptelor este îmbunătățită. De asemenea, am scris câteva lecții introductive despre bazele JavaScript-ului pentru a introduce conceptele, împreună cu un videoclip din colecția "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", ale cărei autori au contribuit la acest curriculum.
+
+În plus, un test cu miză redusă înainte de o clasă setează intenția studentului spre învățarea unui subiect, în timp ce un al doilea test după clasă asigură o reținere mai bună. Acest curriculum a fost conceput să fie flexibil și distractiv și poate fi parcurs în întregime sau parțial. Proiectele încep mici și devin din ce în ce mai complexe până la finalul ciclului de 12 săptămâni.
+
+Deși am evitat în mod intenționat introducerea framework-urilor JavaScript pentru a ne concentra pe abilitățile de bază necesare unui dezvoltator web înainte de a adopta un framework, un pas bun după finalizarea acestui curriculum ar fi învățarea despre Node.js printr-o altă colecție de videoclipuri: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
+
+> Vizitează [Codul nostru de Conduită](CODE_OF_CONDUCT.md) și ghidurile de [Contribuire](CONTRIBUTING.md). Apreciem feedback-ul tău constructiv!
+
+
+## 🧭 Acces offline
+
+Poți rula această documentație offline folosind [Docsify](https://docsify.js.org/#/). Clonează acest repo, [instalează Docsify](https://docsify.js.org/#/quickstart) pe mașina ta locală, apoi în folderul rădăcină al acestui repo, tastează `docsify serve`. Website-ul va fi servit pe portul 3000 pe localhost: `localhost:3000`.
+
+## 📘 PDF
+
+Un PDF cu toate lecțiile poate fi găsit [aici](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
+
+
+## 🎒 Alte Cursuri
+
+Echipa noastră produce și alte cursuri! Verifică:
+
+- [Generative AI for Beginners](https://aka.ms/genai-beginners)
+- [Generative AI for Beginners .NET](https://github.com/microsoft/Generative-AI-for-beginners-dotnet)
+- [Generative AI with JavaScript](https://github.com/microsoft/generative-ai-with-javascript)
+- [Generative AI with Java](https://github.com/microsoft/Generative-AI-for-beginners-java)
+- [AI for Beginners](https://aka.ms/ai-beginners)
+- [Data Science for Beginners](https://aka.ms/datascience-beginners)
+- [ML for Beginners](https://aka.ms/ml-beginners)
+- [Cybersecurity for Beginners](https://github.com/microsoft/Security-101)
+- [Web Dev for Beginners](https://aka.ms/webdev-beginners)
+- [IoT for Beginners](https://aka.ms/iot-beginners)
+- [XR Development for Beginners](https://github.com/microsoft/xr-development-for-beginners)
+- [Mastering GitHub Copilot for Agentic use](https://github.com/microsoft/Mastering-GitHub-Copilot-for-Paired-Programming)
+- [Mastering GitHub Copilot for C#/.NET Developers](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers)
+- [Choose Your Own Copilot Adventure](https://github.com/microsoft/CopilotAdventures)
+
+## Licență
+
+Acest depozit este licențiat sub licența MIT. Vezi fișierul [LICENSE](../../LICENSE) pentru mai multe informații.
+
+---
+
+**Declinare de responsabilitate**:  
+Acest document a fost tradus folosind serviciul de traducere AI [Co-op Translator](https://github.com/Azure/co-op-translator). Deși ne străduim să asigurăm acuratețea, vă rugăm să fiți conștienți că traducerile automate pot conține erori sau inexactități. Documentul original în limba sa natală ar trebui considerat sursa autoritară. Pentru informații critice, se recomandă traducerea profesională realizată de un specialist uman. Nu ne asumăm responsabilitatea pentru eventualele neînțelegeri sau interpretări greșite care pot apărea din utilizarea acestei traduceri.
\ No newline at end of file
diff --git a/translations/ro/SECURITY.md b/translations/ro/SECURITY.md
new file mode 100644
index 00000000..9a30bcab
--- /dev/null
+++ b/translations/ro/SECURITY.md
@@ -0,0 +1,51 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "4ecc3bf2e27983d4c780be6f26ee6228",
+  "translation_date": "2025-08-27T21:58:06+00:00",
+  "source_file": "SECURITY.md",
+  "language_code": "ro"
+}
+-->
+## Securitate
+
+Microsoft tratează cu maximă seriozitate securitatea produselor și serviciilor noastre software, inclusiv toate depozitele de cod sursă gestionate prin organizațiile noastre GitHub, care includ [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 [organizațiile noastre GitHub](https://opensource.microsoft.com/?WT.mc_id=academic-77807-sagibbon).
+
+Dacă credeți că ați descoperit o vulnerabilitate de securitate într-un depozit deținut de Microsoft care se încadrează în [definiția Microsoft a unei vulnerabilități de securitate](https://docs.microsoft.com/previous-versions/tn-archive/cc751383(v=technet.10)/?WT.mc_id=academic-77807-sagibbon), vă rugăm să ne raportați problema conform instrucțiunilor de mai jos.
+
+## Raportarea problemelor de securitate
+
+**Vă rugăm să nu raportați vulnerabilitățile de securitate prin probleme publice pe GitHub.**
+
+În schimb, raportați-le către Microsoft Security Response Center (MSRC) la [https://msrc.microsoft.com/create-report](https://msrc.microsoft.com/create-report/?WT.mc_id=academic-77807-sagibbon).
+
+Dacă preferați să trimiteți raportul fără a vă autentifica, trimiteți un e-mail la [secure@microsoft.com](mailto:secure@microsoft.com). Dacă este posibil, criptați mesajul folosind cheia noastră PGP; o puteți descărca de pe pagina [Microsoft Security Response Center PGP Key](https://www.microsoft.com/msrc/pgp-key-msrc/?WT.mc_id=academic-77807-sagibbon).
+
+Ar trebui să primiți un răspuns în termen de 24 de ore. Dacă, dintr-un motiv oarecare, nu primiți un răspuns, vă rugăm să reveniți prin e-mail pentru a vă asigura că am primit mesajul inițial. Informații suplimentare pot fi găsite la [microsoft.com/msrc](https://www.microsoft.com/msrc/?WT.mc_id=academic-77807-sagibbon).
+
+Vă rugăm să includeți informațiile solicitate mai jos (atât cât puteți furniza) pentru a ne ajuta să înțelegem mai bine natura și amploarea problemei posibile:
+
+  * Tipul problemei (de exemplu, depășire de buffer, injecție SQL, cross-site scripting etc.)
+  * Căile complete ale fișierelor sursă legate de manifestarea problemei
+  * Locația codului sursă afectat (tag/branch/commit sau URL direct)
+  * Orice configurație specială necesară pentru a reproduce problema
+  * Instrucțiuni pas cu pas pentru a reproduce problema
+  * Cod de tip proof-of-concept sau exploit (dacă este posibil)
+  * Impactul problemei, inclusiv modul în care un atacator ar putea exploata problema
+
+Aceste informații ne vor ajuta să prioritizăm mai rapid raportul dumneavoastră.
+
+Dacă raportați în cadrul unui program de recompense pentru bug-uri, rapoartele mai detaliate pot contribui la o recompensă mai mare. Vă rugăm să vizitați pagina [Microsoft Bug Bounty Program](https://microsoft.com/msrc/bounty/?WT.mc_id=academic-77807-sagibbon) pentru mai multe detalii despre programele noastre active.
+
+## Limbi preferate
+
+Preferăm ca toate comunicările să fie în limba engleză.
+
+## Politică
+
+Microsoft urmează principiul [Dezvăluirii Coordonate a Vulnerabilităților](https://www.microsoft.com/msrc/cvd/?WT.mc_id=academic-77807-sagibbon).
+
+---
+
+**Declinarea responsabilității**:  
+Acest document a fost tradus utilizând serviciul de traducere AI [Co-op Translator](https://github.com/Azure/co-op-translator). Deși depunem eforturi pentru a asigura acuratețea, vă rugăm să aveți în vedere că traducerile automate pot conține erori sau inexactități. Documentul original în limba sa nativă ar trebui considerat sursa autoritară. Pentru informații critice, se recomandă traducerea realizată de un profesionist uman. Nu ne asumăm răspunderea pentru eventualele neînțelegeri sau interpretări greșite care pot apărea din utilizarea acestei traduceri.
\ No newline at end of file
diff --git a/translations/ro/SUPPORT.md b/translations/ro/SUPPORT.md
new file mode 100644
index 00000000..258794db
--- /dev/null
+++ b/translations/ro/SUPPORT.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "c9d207ff77b4bb46e46dc2b607a8ec1a",
+  "translation_date": "2025-08-27T21:56:34+00:00",
+  "source_file": "SUPPORT.md",
+  "language_code": "ro"
+}
+-->
+# Suport
+
+## Cum să raportezi probleme și să obții ajutor  
+
+Acest proiect folosește GitHub Issues pentru a urmări erorile și cererile de funcționalități. Te rugăm să cauți printre problemele existente înainte de a raporta altele noi, pentru a evita duplicatele. Pentru probleme noi, raportează eroarea sau cererea ta de funcționalitate ca o problemă nouă.
+
+Pentru ajutor și întrebări legate de utilizarea acestui proiect, te rugăm să consulți [ghidul nostru de contribuție](CONTRIBUTING.md).
+
+## Politica de suport Microsoft  
+
+Suportul pentru acest proiect este limitat la resursele enumerate mai sus.
+
+---
+
+**Declinare de responsabilitate**:  
+Acest document a fost tradus folosind serviciul de traducere AI [Co-op Translator](https://github.com/Azure/co-op-translator). Deși ne străduim să asigurăm acuratețea, vă rugăm să rețineți că traducerile automate pot conține erori sau inexactități. Documentul original în limba sa natală ar trebui considerat sursa autoritară. Pentru informații critice, se recomandă traducerea profesională realizată de un specialist uman. Nu ne asumăm responsabilitatea pentru eventualele neînțelegeri sau interpretări greșite care pot apărea din utilizarea acestei traduceri.
\ No newline at end of file
diff --git a/translations/ro/_404.md b/translations/ro/_404.md
new file mode 100644
index 00000000..c8ebece4
--- /dev/null
+++ b/translations/ro/_404.md
@@ -0,0 +1,21 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "ea9f0804bd62f46d9808e953ec7fc459",
+  "translation_date": "2025-08-27T21:57:49+00:00",
+  "source_file": "_404.md",
+  "language_code": "ro"
+}
+-->
+# Lucrăm la aceasta
+
+Lucrăm la această pagină. Vă rugăm să reveniți mai târziu.
+
+Deschideți o [problemă](https://github.com/microsoft/Web-Dev-For-Beginners/issues/new/choose) dacă aveți întrebări.
+
+**[Înapoi acasă](../../../../../../..)**
+
+---
+
+**Declinare de responsabilitate**:  
+Acest document a fost tradus folosind serviciul de traducere AI [Co-op Translator](https://github.com/Azure/co-op-translator). Deși ne străduim să asigurăm acuratețea, vă rugăm să fiți conștienți că traducerile automate pot conține erori sau inexactități. Documentul original în limba sa natală ar trebui considerat sursa autoritară. Pentru informații critice, se recomandă traducerea profesională realizată de un specialist uman. Nu ne asumăm responsabilitatea pentru eventualele neînțelegeri sau interpretări greșite care pot apărea din utilizarea acestei traduceri.
\ No newline at end of file
diff --git a/translations/ro/docs/_navbar.md b/translations/ro/docs/_navbar.md
new file mode 100644
index 00000000..0a6563c5
--- /dev/null
+++ b/translations/ro/docs/_navbar.md
@@ -0,0 +1,34 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "3bd2f51ecf4ac9b39277cba748943793",
+  "translation_date": "2025-08-27T22:15:10+00:00",
+  "source_file": "docs/_navbar.md",
+  "language_code": "ro"
+}
+-->
+- Traduceri
+  - [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)
+
+---
+
+**Declinare de responsabilitate**:  
+Acest document a fost tradus folosind serviciul de traducere AI [Co-op Translator](https://github.com/Azure/co-op-translator). Deși ne străduim să asigurăm acuratețea, vă rugăm să fiți conștienți că traducerile automate pot conține erori sau inexactități. Documentul original în limba sa natală ar trebui considerat sursa autoritară. Pentru informații critice, se recomandă traducerea profesională realizată de un specialist uman. Nu ne asumăm responsabilitatea pentru eventualele neînțelegeri sau interpretări greșite care pot apărea din utilizarea acestei traduceri.
\ No newline at end of file
diff --git a/translations/ro/docs/_sidebar.md b/translations/ro/docs/_sidebar.md
new file mode 100644
index 00000000..79e2e318
--- /dev/null
+++ b/translations/ro/docs/_sidebar.md
@@ -0,0 +1,51 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "655c91b5979de46f1d70d97f0c5f1d14",
+  "translation_date": "2025-08-27T22:14:40+00:00",
+  "source_file": "docs/_sidebar.md",
+  "language_code": "ro"
+}
+-->
+- Introducere
+  - [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)
+  
+- Bazele 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)
+
+- Joc de tastare
+  - [11](../4-typing-game/typing-game/README.md)
+  
+- Extensie pentru browser
+  - [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)
+
+- Joc spațial
+  - [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)
+
+- Proiect bancar
+  - [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)
+
+---
+
+**Declinare de responsabilitate**:  
+Acest document a fost tradus folosind serviciul de traducere AI [Co-op Translator](https://github.com/Azure/co-op-translator). Deși ne străduim să asigurăm acuratețea, vă rugăm să rețineți că traducerile automate pot conține erori sau inexactități. Documentul original în limba sa natală ar trebui considerat sursa autoritară. Pentru informații critice, se recomandă traducerea profesională realizată de un specialist uman. Nu ne asumăm responsabilitatea pentru eventualele neînțelegeri sau interpretări greșite care pot apărea din utilizarea acestei traduceri.
\ No newline at end of file
diff --git a/translations/ro/for-teachers.md b/translations/ro/for-teachers.md
new file mode 100644
index 00000000..a2695ecd
--- /dev/null
+++ b/translations/ro/for-teachers.md
@@ -0,0 +1,47 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "75cb51f7ca9ea0b097ef4a1287e9290c",
+  "translation_date": "2025-08-27T21:56:53+00:00",
+  "source_file": "for-teachers.md",
+  "language_code": "ro"
+}
+-->
+## Pentru Educatori
+
+Doriți să folosiți acest curriculum în sala de clasă? Vă rugăm să o faceți!
+
+De fapt, îl puteți utiliza direct pe GitHub folosind GitHub Classroom.
+
+Pentru a face acest lucru, faceți un fork al acestui repo. Va trebui să creați un repo pentru fiecare lecție, așa că va trebui să extrageți fiecare folder într-un repo separat. În acest fel, [GitHub Classroom](https://classroom.github.com/classrooms) poate prelua fiecare lecție separat.
+
+Aceste [instrucțiuni complete](https://github.blog/2020-03-18-set-up-your-digital-classroom-with-github-classroom/) vă vor oferi o idee despre cum să vă configurați sala de clasă.
+
+## Utilizarea în Moodle, Canvas sau Blackboard
+
+Acest curriculum funcționează bine în aceste sisteme de management al învățării! Utilizați [fișierul de încărcare Moodle](../../../../../../../teaching-files/webdev-moodle.mbz) pentru conținutul complet sau încercați [fișierul Common Cartridge](../../../../../../../teaching-files/webdev-common-cartridge.imscc), care conține o parte din conținut. Moodle Cloud nu suportă exporturile complete Common Cartridge, așa că este de preferat să folosiți fișierul de descărcare Moodle, care poate fi încărcat în Canvas. Vă rugăm să ne spuneți cum putem îmbunătăți această experiență.
+
+![Moodle](../../translated_images/moodle.94eb93d714a50cb2c97435b408017dee224348b61bc86203ffd43a4f4e57b95f.ro.png)  
+> Curriculumul într-o clasă Moodle
+
+![Canvas](../../translated_images/canvas.fbd605ff8e5b8aff567d398528ce113db304446b90b9cad55c654de3fdfcda34.ro.png)  
+> Curriculumul în Canvas
+
+## Utilizarea repo-ului așa cum este
+
+Dacă doriți să utilizați acest repo în forma sa actuală, fără a folosi GitHub Classroom, acest lucru este posibil. Va trebui să comunicați cu studenții despre lecția pe care să o parcurgeți împreună.
+
+Într-un format online (Zoom, Teams sau altul), puteți forma săli de discuții pentru chestionare și să ghidați studenții pentru a-i ajuta să fie pregătiți să învețe. Apoi, invitați studenții să participe la chestionare și să își trimită răspunsurile ca 'issues' la un anumit moment. Puteți face același lucru cu temele, dacă doriți ca studenții să lucreze colaborativ în mod deschis.
+
+Dacă preferați un format mai privat, cereți studenților să facă fork curriculumului, lecție cu lecție, în propriile lor repo-uri GitHub private și să vă ofere acces. Apoi, aceștia pot completa chestionarele și temele în mod privat și vi le pot trimite prin issues pe repo-ul clasei.
+
+Există multe moduri de a face acest lucru să funcționeze într-un format de clasă online. Vă rugăm să ne spuneți ce funcționează cel mai bine pentru dumneavoastră!
+
+## Vă rugăm să ne oferiți feedback-ul dumneavoastră!
+
+Dorim să facem acest curriculum cât mai util pentru dumneavoastră și studenții dumneavoastră. Conectați-vă cu noi în [Teacher corner](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner) și deschideți un [**issue nou**](https://github.com/microsoft/Web-Dev-For-Beginners/issues/new/choose) pentru orice solicitări, erori sau feedback.
+
+---
+
+**Declinare de responsabilitate**:  
+Acest document a fost tradus folosind serviciul de traducere AI [Co-op Translator](https://github.com/Azure/co-op-translator). Deși ne străduim să asigurăm acuratețea, vă rugăm să rețineți că traducerile automate pot conține erori sau inexactități. Documentul original în limba sa natală ar trebui considerat sursa autoritară. Pentru informații critice, se recomandă traducerea profesională realizată de un specialist uman. Nu ne asumăm responsabilitatea pentru eventualele neînțelegeri sau interpretări greșite care pot apărea din utilizarea acestei traduceri.
\ No newline at end of file
diff --git a/translations/ro/lesson-template/README.md b/translations/ro/lesson-template/README.md
new file mode 100644
index 00000000..e7b33ff8
--- /dev/null
+++ b/translations/ro/lesson-template/README.md
@@ -0,0 +1,65 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "0494be70ad7fadd13a8c3d549c23e355",
+  "translation_date": "2025-08-27T23:06:55+00:00",
+  "source_file": "lesson-template/README.md",
+  "language_code": "ro"
+}
+-->
+# [Subiectul Lecției]
+
+![Inserați un videoclip aici](../../../lesson-template/video-url)
+
+## [Chestionar înainte de lecție](../../../lesson-template/quiz-url)
+
+[Descrieți ce vom învăța]
+
+### Introducere
+
+Descrieți ce va fi acoperit
+
+> Note
+
+### Cerințe preliminare
+
+Ce pași ar fi trebuit să fie parcurși înainte de această lecție?
+
+### Pregătire
+
+Pași pregătitori pentru a începe această lecție
+
+---
+
+[Parcurgeți conținutul în blocuri]
+
+## [Subiectul 1]
+
+### Sarcină:
+
+Lucrați împreună pentru a îmbunătăți progresiv baza de cod și pentru a construi proiectul cu cod partajat:
+
+```html
+code blocks
+```
+
+✅ Verificare cunoștințe - folosiți acest moment pentru a extinde cunoștințele studenților cu întrebări deschise
+
+## [Subiectul 2]
+
+## [Subiectul 3]
+
+🚀 Provocare: Adăugați o provocare pentru ca studenții să lucreze colaborativ în clasă pentru a îmbunătăți proiectul
+
+Opțional: adăugați o captură de ecran a interfeței lecției finalizate, dacă este cazul
+
+## [Chestionar după lecție](../../../lesson-template/quiz-url)
+
+## Recapitulare și Studiu Individual
+
+**Temă datorată [MM/YY]**: [Numele Temei](assignment.md)
+
+---
+
+**Declinare de responsabilitate**:  
+Acest document a fost tradus folosind serviciul de traducere AI [Co-op Translator](https://github.com/Azure/co-op-translator). Deși ne străduim să asigurăm acuratețea, vă rugăm să fiți conștienți că traducerile automate pot conține erori sau inexactități. Documentul original în limba sa natală ar trebui considerat sursa autoritară. Pentru informații critice, se recomandă traducerea profesională realizată de un specialist uman. Nu ne asumăm responsabilitatea pentru eventualele neînțelegeri sau interpretări greșite care pot apărea din utilizarea acestei traduceri.
\ No newline at end of file
diff --git a/translations/ro/lesson-template/assignment.md b/translations/ro/lesson-template/assignment.md
new file mode 100644
index 00000000..91ee073b
--- /dev/null
+++ b/translations/ro/lesson-template/assignment.md
@@ -0,0 +1,23 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "b5f62ec256c7e43e771f0d3b4e1a9130",
+  "translation_date": "2025-08-27T23:07:18+00:00",
+  "source_file": "lesson-template/assignment.md",
+  "language_code": "ro"
+}
+-->
+# [Numele Temei]
+
+## Instrucțiuni
+
+## Grilă de evaluare
+
+| Criterii | Exemplar | Adecvat | Necesită îmbunătățiri |
+| -------- | --------- | -------- | --------------------- |
+|          |           |          |                       |
+
+---
+
+**Declinare de responsabilitate**:  
+Acest document a fost tradus folosind serviciul de traducere AI [Co-op Translator](https://github.com/Azure/co-op-translator). Deși ne străduim să asigurăm acuratețea, vă rugăm să fiți conștienți că traducerile automate pot conține erori sau inexactități. Documentul original în limba sa maternă ar trebui considerat sursa autoritară. Pentru informații critice, se recomandă traducerea profesională realizată de un specialist uman. Nu ne asumăm responsabilitatea pentru eventualele neînțelegeri sau interpretări greșite care pot apărea din utilizarea acestei traduceri.
\ No newline at end of file
diff --git a/translations/ro/quiz-app/README.md b/translations/ro/quiz-app/README.md
new file mode 100644
index 00000000..eb53e3dd
--- /dev/null
+++ b/translations/ro/quiz-app/README.md
@@ -0,0 +1,191 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "5301875c55bb305e6046bed3a4fd06d2",
+  "translation_date": "2025-08-27T23:10:38+00:00",
+  "source_file": "quiz-app/README.md",
+  "language_code": "ro"
+}
+-->
+# Aplicație de Quiz
+
+Aceste quiz-uri sunt quiz-urile de dinainte și după lecții pentru curriculumul de știința datelor de la https://aka.ms/webdev-beginners
+
+## Adăugarea unui set de quiz-uri traduse
+
+Adaugă o traducere a quiz-urilor creând structuri de quiz corespunzătoare în folderele `assets/translations`. Quiz-urile originale se află în `assets/translations/en`. Quiz-urile sunt împărțite în mai multe grupuri. Asigură-te că numerotarea este aliniată cu secțiunea corectă a quiz-ului. În acest curriculum sunt în total 40 de quiz-uri, numerotarea începând de la 0.
+
+  
+<details>
+<summary>Iată structura unui fișier de traducere:</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>
+
+După ce editezi traducerile, editează fișierul index.js din folderul de traduceri pentru a importa toate fișierele conform convențiilor din `en`.
+
+Editează fișierul `index.js` din `assets/translations` pentru a importa noile fișiere traduse. 
+
+De exemplu, dacă traducerea ta JSON este în `ex.json`, folosește 'ex' ca cheie de localizare, apoi introdu-o astfel pentru a o importa:
+
+<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>
+
+## Rulează aplicația de Quiz local
+
+### Cerințe preliminare
+
+- Un cont GitHub
+- [Node.js și Git](https://nodejs.org/)
+
+### Instalare și configurare
+
+1. Creează un repository din acest [șablon](https://github.com/new?template_name=Web-Dev-For-Beginners&template_owner=microsoft) 
+
+1. Clonează noul tău repository și navighează la quiz-app
+
+   ```bash
+   git clone https://github.com/your-github-organization/repo-name
+   cd repo-name/quiz-app
+   ```
+
+1. Instalează pachetele npm și dependențele
+
+   ```bash
+   npm install
+   ```
+
+### Construiește aplicația
+
+1. Pentru a construi soluția, rulează:
+
+   ```bash
+   npm run build
+   ```
+
+### Pornește aplicația
+
+1. Pentru a rula soluția, rulează:
+
+    ```bash
+    npm run dev
+    ```
+
+### [Opțional] Linting
+
+1. Pentru a te asigura că codul este lintat, rulează:
+
+    ```bash
+    npm run lint
+    ```
+
+## Publică aplicația de Quiz pe Azure 
+
+### Cerințe preliminare
+- Un abonament Azure. Înscrie-te gratuit [aici](https://aka.ms/azure-free).
+
+    _Estimare cost pentru publicarea acestei aplicații de quiz: GRATUIT_
+
+[![Deploy to Azure](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/#create/Microsoft.StaticApp)
+
+După ce te autentifici pe Azure prin linkul de mai sus, selectează un abonament și un grup de resurse, apoi:
+
+- Detalii Static Web App: Oferă un nume și selectează un plan de găzduire
+- Autentificare GitHub: Setează sursa de publicare ca GitHub, apoi autentifică-te și completează câmpurile necesare din formular:
+    - *Organizație* – Alege organizația ta.
+    - *Repository* – Selectează repository-ul curriculumului Web Dev for Beginners. 
+    - *Branch* - Selectează un branch (main) 
+- Presetări de construire: Azure Static Web Apps folosește un algoritm de detectare pentru a identifica framework-ul utilizat în aplicația ta. 
+    - *Locația aplicației* - ./quiz-app
+    - *Locația API-ului* -
+    - *Locația output-ului* - dist
+- Publicare: Apasă 'Review + Create', apoi 'Create'
+
+    După publicare, un fișier workflow va fi creat în directorul *.github* al repository-ului tău. Acest fișier workflow conține instrucțiuni despre evenimentele care vor declanșa o re-publicare a aplicației pe Azure, de exemplu, _un **push** pe branch-ul **main**_ etc.
+
+    <details>
+    <summary>Exemplu de fișier Workflow</summary>
+    Iată un exemplu de cum ar putea arăta fișierul workflow pentru 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>
+
+- După publicare: După ce publicarea este completă, apasă pe 'Go to Deployment', apoi 'View app in browser'.
+
+După ce acțiunea GitHub (workflow-ul) este executată cu succes, reîmprospătează pagina live pentru a vizualiza aplicația ta.
+
+---
+
+**Declinare de responsabilitate**:  
+Acest document a fost tradus folosind serviciul de traducere AI [Co-op Translator](https://github.com/Azure/co-op-translator). Deși ne străduim să asigurăm acuratețea, vă rugăm să fiți conștienți că traducerile automate pot conține erori sau inexactități. Documentul original în limba sa natală ar trebui considerat sursa autoritară. Pentru informații critice, se recomandă traducerea profesională realizată de un specialist uman. Nu ne asumăm responsabilitatea pentru eventualele neînțelegeri sau interpretări greșite care pot apărea din utilizarea acestei traduceri.
\ No newline at end of file
diff --git a/translations/sr/1-getting-started-lessons/1-intro-to-programming-languages/README.md b/translations/sr/1-getting-started-lessons/1-intro-to-programming-languages/README.md
new file mode 100644
index 00000000..b64f4794
--- /dev/null
+++ b/translations/sr/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:36:41+00:00",
+  "source_file": "1-getting-started-lessons/1-intro-to-programming-languages/README.md",
+  "language_code": "sr"
+}
+-->
+# Увод у програмске језике и алате заната
+
+Ова лекција покрива основе програмских језика. Теме које су овде обрађене примењују се на већину савремених програмских језика данас. У одељку „Алатке заната“ научићете о корисном софтверу који вам помаже као програмеру.
+
+![Увод у програмирање](../../../../translated_images/webdev101-programming.d6e3f98e61ac4bff0b27dcbf1c3f16c8ed46984866f2d29988929678b0058fde.sr.png)  
+> Скетч од [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Квиз пре предавања  
+[Квиз пре предавања](https://forms.office.com/r/dru4TE0U9n?origin=lprLink)
+
+## Увод
+
+У овој лекцији ћемо обрадити:
+
+- Шта је програмирање?  
+- Типови програмских језика  
+- Основни елементи програма  
+- Корисни софтвер и алати за професионалног програмера  
+
+> Ову лекцију можете пратити на [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon)!
+
+## Шта је програмирање?
+
+Програмирање (познато и као кодирање) је процес писања инструкција за уређај као што је рачунар или мобилни уређај. Ове инструкције пишемо помоћу програмског језика, који уређај затим интерпретира. Ови скупови инструкција могу се називати различитим именима, али *програм*, *рачунарски програм*, *апликација (апп)* и *извршни фајл* су неки од популарних назива.
+
+*Програм* може бити било шта што је написано кодом; веб-сајтови, игре и апликације за телефоне су програми. Иако је могуће направити програм без писања кода, основна логика се интерпретира од стране уређаја, а та логика је највероватније написана кодом. Програм који *ради* или *извршава* код спроводи инструкције. Уређај на ком читате ову лекцију извршава програм како би је приказао на вашем екрану.
+
+✅ Урадите мало истраживање: ко се сматра првим програмером на свету?
+
+## Програмски језици
+
+Програмски језици омогућавају програмерима да пишу инструкције за уређај. Уређаји могу разумети само бинарни код (1 и 0), а за *већину* програмера то није ефикасан начин комуникације. Програмски језици су средство комуникације између људи и рачунара.
+
+Програмски језици долазе у различитим форматима и могу служити различитим сврхама. На пример, JavaScript се углавном користи за веб апликације, док се Bash углавном користи за оперативне системе.
+
+*Језици ниског нивоа* обично захтевају мање корака него *језици високог нивоа* да би уређај интерпретирао инструкције. Међутим, оно што чини језике високог нивоа популарним је њихова читљивост и подршка. JavaScript се сматра језиком високог нивоа.
+
+Следећи код илуструје разлику између језика високог нивоа (JavaScript) и језика ниског нивоа (ARM асемблерски код).
+
+```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
+```
+
+Веровали или не, *оба раде исту ствар*: исписују Фибоначијев низ до 10.
+
+✅ Фибоначијев низ је [дефинисан](https://en.wikipedia.org/wiki/Fibonacci_number) као скуп бројева где је сваки број збир два претходна, почевши од 0 и 1. Првих 10 бројева у Фибоначијевом низу су 0, 1, 1, 2, 3, 5, 8, 13, 21 и 34.
+
+## Елементи програма
+
+Једна инструкција у програму назива се *изјава* (statement) и обично има карактер или размак који означава где се инструкција завршава, или *терминира*. Начин на који програм терминира зависи од језика.
+
+Изјаве у програму могу се ослањати на податке које обезбеђује корисник или неки други извор како би извршиле инструкције. Подаци могу променити понашање програма, па програмски језици долазе са начином да привремено складиште податке како би се касније користили. Ово се назива *променљиве*. Променљиве су изјаве које упућују уређај да сачува податке у својој меморији. Променљиве у програмима су сличне променљивим у алгебри, где имају јединствено име и њихова вредност може да се мења током времена.
+
+Постоји могућност да неке изјаве не буду извршене од стране уређаја. Ово је обично намерно када их програмер напише или случајно када дође до неочекиване грешке. Ова врста контроле над апликацијом чини је робуснијом и лакшом за одржавање. Типично, ове промене у контроли дешавају се када су испуњени одређени услови. Уобичајена изјава која се користи у савременом програмирању за контролу начина на који програм ради је `if..else` изјава.
+
+✅ Више о овом типу изјаве научићете у наредним лекцијама.
+
+## Алатке заната
+
+[![Алатке заната](https://img.youtube.com/vi/69WJeXGBdxg/0.jpg)](https://youtube.com/watch?v=69WJeXGBdxg "Алатке заната")
+
+> 🎥 Кликните на слику изнад за видео о алатима
+
+У овом одељку ћете научити о неком софтверу који може бити веома користан док започињете своје професионално програмерско путовање.
+
+**Развојно окружење** је јединствен скуп алата и функција које програмер често користи приликом писања софтвера. Неки од ових алата су прилагођени специфичним потребама програмера и могу се мењати током времена ако програмер промени приоритете у раду, личним пројектима или када користи други програмски језик. Развојна окружења су јединствена као и програмери који их користе.
+
+### Уређивачи
+
+Један од најважнијих алата за развој софтвера је уређивач. Уређивачи су место где пишете свој код, а понекад и где га извршавате.
+
+Програмери се ослањају на уређиваче из неколико додатних разлога:
+
+- *Отклањање грешака* (debugging) помаже у откривању грешака и проблема корак по корак кроз код. Неки уређивачи имају могућности за отклањање грешака; могу се прилагодити и додати за специфичне програмске језике.  
+- *Синтаксно истицање* (syntax highlighting) додаје боје и формат текста коду, чинећи га лакшим за читање. Већина уређивача омогућава прилагођено истицање синтаксе.  
+- *Екстензије и интеграције* су специјализовани алати за програмере, од стране програмера. Ови алати нису уграђени у основни уређивач. На пример, многи програмери документују свој код како би објаснили како функционише. Могу инсталирати екстензију за проверу правописа како би пронашли грешке у документацији. Већина екстензија је намењена за употребу унутар одређеног уређивача, а већина уређивача долази са начином претраге доступних екстензија.  
+- *Прилагођавање* омогућава програмерима да креирају јединствено развојно окружење које одговара њиховим потребама. Већина уређивача је изузетно прилагодљива и може омогућити програмерима да креирају сопствене екстензије.  
+
+#### Популарни уређивачи и екстензије за веб развој
+
+- [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/)  
+
+### Прегледачи
+
+Још један важан алат је прегледач. Веб програмери се ослањају на прегледач како би видели како њихов код ради на вебу. Такође се користи за приказ визуелних елемената веб странице који су написани у уређивачу, попут HTML-а.
+
+Многи прегледачи долазе са *алатима за програмере* (DevTools) који садрже скуп корисних функција и информација за помоћ програмерима у прикупљању и хватању важних информација о њиховој апликацији. На пример: Ако веб страница има грешке, понекад је корисно знати када су се оне догодиле. DevTools у прегледачу може бити конфигурисан да ухвати ове информације.
+
+#### Популарни прегледачи и 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)  
+
+### Алатке командне линије
+
+Неки програмери више воле мање графички приказ за своје свакодневне задатке и ослањају се на командну линију да то постигну. Писање кода захтева значајну количину куцања и неки програмери више воле да не прекидају свој ток на тастатури. Они ће користити пречице на тастатури за пребацивање између прозора, рад на различитим фајловима и коришћење алата. Већина задатака може се обавити мишем, али једна од предности коришћења командне линије је што се много тога може урадити без потребе за пребацивањем између миша и тастатуре. Још једна предност командне линије је што је конфигурабилна и можете сачувати прилагођену конфигурацију, променити је касније и увезти је на друге развојне машине. Пошто су развојна окружења тако јединствена за сваког програмера, неки ће избегавати коришћење командне линије, неки ће се у потпуности ослањати на њу, а неки ће преферирати мешавину оба.
+
+### Популарне опције командне линије
+
+Опције за командну линију разликују се у зависности од оперативног система који користите.
+
+*💻 = долази унапред инсталирано на оперативном систему.*
+
+#### 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) (познат и као 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)  
+
+#### Популарни алати командне линије
+
+- [Git](https://git-scm.com/) (💻 на већини оперативних система)  
+- [NPM](https://www.npmjs.com/)  
+- [Yarn](https://classic.yarnpkg.com/en/docs/cli/)  
+
+### Документација
+
+Када програмер жели да научи нешто ново, највероватније ће се окренути документацији како би научио како да то користи. Програмери се често ослањају на документацију како би их водила кроз правилно коришћење алата и језика, али и како би стекли дубље знање о томе како они функционишу.
+
+#### Популарна документација о веб развоју
+
+- [Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web), од Mozille, издавача [Firefox](https://www.mozilla.org/firefox/) прегледача  
+- [Frontend Masters](https://frontendmasters.com/learn/)  
+- [Web.dev](https://web.dev), од Google-а, издавача [Chrome](https://www.google.com/chrome/)  
+- [Microsoft-ова документација за програмере](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers), за [Microsoft Edge](https://www.microsoft.com/edge)  
+- [W3 Schools](https://www.w3schools.com/where_to_start.asp)  
+
+✅ Урадите истраживање: Сада када знате основе окружења веб програмера, упоредите га са окружењем веб дизајнера.
+
+---
+
+## 🚀 Изазов
+
+Упоредите неке програмске језике. Које су јединствене карактеристике JavaScript-а у односу на Java? А шта је са COBOL-ом у односу на Go?
+
+## Квиз после предавања  
+[Квиз после предавања](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/2)
+
+## Преглед и самостално учење
+
+Проучите различите језике доступне програмеру. Покушајте да напишете једну линију кода на једном језику, а затим је препишите на два друга. Шта сте научили?
+
+## Задатак
+
+[Читање документације](assignment.md)  
+
+---
+
+**Одрицање од одговорности**:  
+Овај документ је преведен коришћењем услуге за превођење помоћу вештачке интелигенције [Co-op Translator](https://github.com/Azure/co-op-translator). Иако се трудимо да обезбедимо тачност, молимо вас да имате у виду да аутоматски преводи могу садржати грешке или нетачности. Оригинални документ на његовом изворном језику треба сматрати ауторитативним извором. За критичне информације препоручује се професионални превод од стране људи. Не преузимамо одговорност за било каква погрешна тумачења или неспоразуме који могу настати услед коришћења овог превода.
\ No newline at end of file
diff --git a/translations/sr/1-getting-started-lessons/1-intro-to-programming-languages/assignment.md b/translations/sr/1-getting-started-lessons/1-intro-to-programming-languages/assignment.md
new file mode 100644
index 00000000..4adacacf
--- /dev/null
+++ b/translations/sr/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-27T22:37:42+00:00",
+  "source_file": "1-getting-started-lessons/1-intro-to-programming-languages/assignment.md",
+  "language_code": "sr"
+}
+-->
+# Читање документације
+
+## Упутства
+
+Постоји много алата које веб програмер може користити, а који се налазе на [MDN документацији за алате на страни клијента](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview). Изаберите 3 алата који нису обухваћени у лекцији, објасните зашто би веб програмер користио тај алат и пронађите алат који спада у ову категорију и поделите његову документацију. Немојте користити исти пример алата као у MDN документацији.
+
+## Рубрика
+
+Изузетно | Задовољавајуће | Потребна побољшања
+--- | --- | -- |
+|Објашњено зашто би веб програмер користио алат| Објашњено како, али не и зашто би програмер користио алат| Није поменуто ни како ни зашто би програмер користио алат  |
+
+---
+
+**Одрицање од одговорности**:  
+Овај документ је преведен коришћењем услуге за превођење помоћу вештачке интелигенције [Co-op Translator](https://github.com/Azure/co-op-translator). Иако се трудимо да превод буде тачан, молимо вас да имате у виду да аутоматизовани преводи могу садржати грешке или нетачности. Оригинални документ на његовом изворном језику треба сматрати меродавним извором. За критичне информације препоручује се професионални превод од стране људи. Не преузимамо одговорност за било каква погрешна тумачења или неспоразуме који могу настати услед коришћења овог превода.
\ No newline at end of file
diff --git a/translations/sr/1-getting-started-lessons/2-github-basics/README.md b/translations/sr/1-getting-started-lessons/2-github-basics/README.md
new file mode 100644
index 00000000..fbe595c7
--- /dev/null
+++ b/translations/sr/1-getting-started-lessons/2-github-basics/README.md
@@ -0,0 +1,333 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "05666cecb8983a72cf0ce1d18932b5b7",
+  "translation_date": "2025-08-27T22:29:21+00:00",
+  "source_file": "1-getting-started-lessons/2-github-basics/README.md",
+  "language_code": "sr"
+}
+-->
+# Увод у GitHub
+
+Ова лекција покрива основе GitHub-а, платформе за хостовање и управљање изменама вашег кода.
+
+![Увод у GitHub](../../../../translated_images/webdev101-github.8846d7971abef6f947909b4f9d343e2a23778aa716ca6b9d71df7174ee5009ac.sr.png)
+> Скетч од [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Квиз пре предавања
+[Квиз пре предавања](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/3)
+
+## Увод
+
+У овој лекцији ћемо обрадити:
+
+- праћење рада на вашем рачунару
+- рад на пројектима са другима
+- како допринети софтверу отвореног кода
+
+### Предуслови
+
+Пре него што почнете, потребно је да проверите да ли је Git инсталиран. У терминалу укуцајте:  
+`git --version`
+
+Ако Git није инсталиран, [преузмите Git](https://git-scm.com/downloads). Затим подесите ваш локални Git профил у терминалу:
+* `git config --global user.name "ваше-име"`
+* `git config --global user.email "ваш-имејл"`
+
+Да бисте проверили да ли је Git већ конфигурисан, можете укуцати:
+`git config --list`
+
+Такође ће вам бити потребан GitHub налог, едитор за код (као што је Visual Studio Code), и потребно је да отворите терминал (или командну линију).
+
+Посетите [github.com](https://github.com/) и направите налог ако га већ немате, или се пријавите и попуните свој профил.
+
+✅ GitHub није једини репозиторијум за код на свету; постоје и други, али GitHub је најпознатији.
+
+### Припрема
+
+Потребан вам је фолдер са код пројектом на вашем локалном рачунару (лаптопу или десктопу) и јавни репозиторијум на GitHub-у, који ће служити као пример за то како допринети пројектима других.
+
+---
+
+## Управљање кодом
+
+Рецимо да имате локални фолдер са неким код пројектом и желите да почнете да пратите свој напредак користећи git - систем за контролу верзија. Неки људи пореде коришћење git-а са писањем љубавног писма себи у будућности. Читајући поруке о комитима данима, недељама или месецима касније, моћи ћете да се сетите зашто сте донели одређену одлуку или да "вратите" промену - то јест, ако пишете добре поруке о комитима.
+
+### Задатак: Направите репозиторијум и комитујте код  
+
+> Погледајте видео
+> 
+> [![Видео о основама Git-а и GitHub-а](https://img.youtube.com/vi/9R31OUPpxU4/0.jpg)](https://www.youtube.com/watch?v=9R31OUPpxU4)
+
+1. **Направите репозиторијум на GitHub-у**. На GitHub.com, у картици репозиторијума или из навигационе траке у горњем десном углу, пронађите дугме **new repo**.
+
+   1. Дајте вашем репозиторијуму (фолдеру) име.
+   1. Изаберите **create repository**.
+
+1. **Навигирајте до вашег радног фолдера**. У вашем терминалу, пребаците се у фолдер (такође познат као директоријум) који желите да почнете да пратите. Укуцајте:
+
+   ```bash
+   cd [name of your folder]
+   ```
+
+1. **Иницијализујте git репозиторијум**. У вашем пројекту укуцајте:
+
+   ```bash
+   git init
+   ```
+
+1. **Проверите статус**. Да бисте проверили статус вашег репозиторијума, укуцајте:
+
+   ```bash
+   git status
+   ```
+
+   излаз може изгледати овако:
+
+   ```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
+   ```
+
+   Обично команда `git status` вам говори ствари као што су који фајлови су спремни за _чување_ у репозиторијуму или имају измене које можда желите да сачувате.
+
+1. **Додајте све фајлове за праћење**  
+   Ово се такође назива постављање фајлова/додавање фајлова у staging area.
+
+   ```bash
+   git add .
+   ```
+
+   Аргумент `git add` са `.` означава да су сви ваши фајлови и измене спремни за праћење.
+
+1. **Додајте одабране фајлове за праћење**
+
+   ```bash
+   git add [file or folder name]
+   ```
+
+   Ово нам помаже да додамо само одабране фајлове у staging area када не желимо да комитујемо све фајлове одједном.
+
+1. **Уклони све фајлове из staging area**
+
+   ```bash
+   git reset
+   ```
+
+   Ова команда нам помаже да уклонимо све фајлове из staging area одједном.
+
+1. **Уклони одређени фајл из staging area**
+
+   ```bash
+   git reset [file or folder name]
+   ```
+
+   Ова команда нам помаже да уклонимо само одређени фајл из staging area који не желимо да укључимо у следећи комит.
+
+1. **Сачувајте свој рад**. У овом тренутку сте додали фајлове у такозвани _staging area_. Место где Git прати ваше фајлове. Да бисте промену учинили трајном, потребно је да _комитујете_ фајлове. Да бисте то урадили, креирајте _комит_ командом `git commit`. _Комит_ представља тачку чувања у историји вашег репозиторијума. Укуцајте следеће да бисте креирали _комит_:
+
+   ```bash
+   git commit -m "first commit"
+   ```
+
+   Ово комитује све ваше фајлове, додајући поруку "first commit". За будуће поруке о комитима, желећете да будете описнији како бисте пренели какву сте промену направили.
+
+1. **Повежите ваш локални Git репозиторијум са GitHub-ом**. Git репозиторијум је добар на вашем рачунару, али у неком тренутку желите да имате резервну копију ваших фајлова негде и такође позовете друге људе да раде са вама на вашем репозиторијуму. Једно такво одлично место је GitHub. Запамтите да смо већ креирали репозиторијум на GitHub-у, тако да је једино што треба да урадимо да повежемо наш локални Git репозиторијум са GitHub-ом. Команда `git remote add` ће то урадити. Укуцајте следећу команду:
+
+   > Напомена, пре него што укуцате команду, идите на страницу вашег GitHub репозиторијума да бисте пронашли URL репозиторијума. Користићете га у команди испод. Замените ```https://github.com/username/repository_name.git``` са вашим GitHub URL-ом.
+
+   ```bash
+   git remote add origin https://github.com/username/repository_name.git
+   ```
+
+   Ово креира _remote_, или везу, названу "origin" која показује на GitHub репозиторијум који сте раније креирали.
+
+1. **Пошаљите локалне фајлове на GitHub**. До сада сте креирали _везу_ између локалног репозиторијума и GitHub репозиторијума. Хајде да пошаљемо ове фајлове на GitHub следећом командом `git push`, овако: 
+   
+   > Напомена, име ваше гране може бити другачије од ```main```.
+
+   ```bash
+   git push -u origin main
+   ```
+
+   Ово шаље ваше комитове у вашу "main" грану на GitHub.
+
+2. **Додајте још измена**. Ако желите да наставите са прављењем измена и њиховим слањем на GitHub, само ћете морати да користите следеће три команде:
+
+   ```bash
+   git add .
+   git commit -m "type your commit message here"
+   git push
+   ```
+
+   > Савет, Можда ћете желети да усвојите `.gitignore` фајл како бисте спречили да фајлови које не желите да пратите буду видљиви на GitHub-у - као што је тај фајл са белешкама који чувате у истом фолдеру, али нема место у јавном репозиторијуму. Можете пронаћи шаблоне за `.gitignore` фајлове на [.gitignore templates](https://github.com/github/gitignore).
+
+#### Поруке о комитима
+
+Одлична порука о Git комиту завршава следећу реченицу:  
+Ако се примени, овај комит ће <ваша порука овде>
+
+За наслов користите императив, садашње време: "промени" уместо "променио" или "промене".  
+Као и у наслову, у телу (опционо) такође користите императив, садашње време. Тело треба да укључи мотивацију за промену и да је упореди са претходним понашањем. Објашњавате `зашто`, а не `како`.
+
+✅ Одвојите неколико минута да прегледате GitHub. Можете ли пронаћи заиста добру поруку о комиту? Можете ли пронаћи заиста минималну? Које информације мислите да су најважније и најкорисније за пренети у поруци о комиту?
+
+### Задатак: Сарадња
+
+Главни разлог за постављање ствари на GitHub је да се омогући сарадња са другим програмерима.
+
+## Рад на пројектима са другима
+
+> Погледајте видео
+>
+> [![Видео о основама Git-а и GitHub-а](https://img.youtube.com/vi/bFCM-PC3cu8/0.jpg)](https://www.youtube.com/watch?v=bFCM-PC3cu8)
+
+У вашем репозиторијуму, идите на `Insights > Community` да видите како ваш пројекат стоји у односу на препоручене стандарде заједнице.
+
+Ево неких ствари које могу побољшати ваш GitHub репозиторијум:
+- **Опис**. Да ли сте додали опис за ваш пројекат?
+- **README**. Да ли сте додали README? GitHub пружа смернице за писање [README](https://docs.github.com/articles/about-readmes/?WT.mc_id=academic-77807-sagibbon).
+- **Смернице за допринос**. Да ли ваш пројекат има [смернице за допринос](https://docs.github.com/articles/setting-guidelines-for-repository-contributors/?WT.mc_id=academic-77807-sagibbon)?
+- **Кодекс понашања**. Да ли ваш пројекат има [кодекс понашања](https://docs.github.com/articles/adding-a-code-of-conduct-to-your-project/)?
+- **Лиценца**. Можда најважније, да ли ваш пројекат има [лиценцу](https://docs.github.com/articles/adding-a-license-to-a-repository/)?
+
+Сви ови ресурси ће користити новим члановима тима. То су обично ствари које нови доприносиоци гледају пре него што уопште погледају ваш код, како би утврдили да ли је ваш пројекат право место за њих да проведу своје време.
+
+✅ README фајлови, иако захтевају време за припрему, често се занемарују од стране заузетих одржавалаца. Можете ли пронаћи пример посебно описног README-а? Напомена: постоје неки [алати за креирање добрих README-а](https://www.makeareadme.com/) које можда желите да испробате.
+
+### Задатак: Спојите код
+
+Документација о доприносу помаже људима да допринесу пројекту. Она објашњава које врсте доприноса тражите и како процес функционише. Доприносиоци ће морати да прођу кроз низ корака да би могли да допринесу вашем репозиторијуму на GitHub-у:
+
+1. **Fork вашег репозиторијума**. Вероватно ћете желети да људи _fork-ују_ ваш пројекат. Fork значи креирање реплике вашег репозиторијума на њиховом GitHub профилу.
+1. **Clone**. Након тога ће клонирати пројекат на свој локални рачунар.
+1. **Креирање гране**. Желите да их замолите да креирају _грану_ за свој рад.
+1. **Фокусирање на једну област**. Замолите доприносиоце да концентришу своје доприносе на једну ствар у исто време - на тај начин су веће шансе да можете _спојити_ њихов рад. Замислите да напишу исправку за баг, додају нову функцију и ажурирају неколико тестова - шта ако желите, или можете да имплементирате само 2 од 3, или 1 од 3 измене?
+
+✅ Замислите ситуацију где су гране посебно критичне за писање и испоруку доброг кода. Које случајеве употребе можете замислити?
+
+> Напомена, будите промена коју желите да видите у свету и креирајте гране за свој рад. Сви комитови које направите биће направљени на грани на којој сте тренутно "checked out". Користите `git status` да видите на којој грани се налазите.
+
+Хајде да прођемо кроз процес рада доприносиоца. Претпоставимо да је доприносилац већ _fork-овао_ и _клонирао_ репозиторијум, тако да има Git репозиторијум спреман за рад на свом локалном рачунару:
+
+1. **Креирање гране**. Користите команду `git branch` да креирате грану која ће садржати измене које намеравају да допринесу:
+
+   ```bash
+   git branch [branch-name]
+   ```
+
+1. **Пребацивање на радну грану**. Пребаците се на одређену грану и ажурирајте радни директоријум командом `git switch`:
+
+   ```bash
+   git switch [branch-name]
+   ```
+
+1. **Радите на изменама**. У овом тренутку желите да додате своје измене. Не заборавите да кажете Git-у о томе следећим командама:
+
+   ```bash
+   git add .
+   git commit -m "my changes"
+   ```
+
+   Уверите се да сте дали вашем комиту добро име, за ваше добро као и за одржаваоца репозиторијума на којем помажете.
+
+1. **Комбинујте свој рад са `main` граном**. У неком тренутку сте завршили са радом и желите да комбинујете свој рад са радом `main` гране. `main` грана је можда промењена у међувремену, па се уверите да сте је прво ажурирали на најновију верзију следећим командама:
+
+   ```bash
+   git switch main
+   git pull
+   ```
+
+   У овом тренутку желите да се уверите да се сви _конфликти_, ситуације где Git не може лако да _комбинује_ измене, дешавају у вашој радној грани. Зато покрените следеће команде:
+
+   ```bash
+   git switch [branch_name]
+   git merge main
+   ```
+
+   Ово ће донети све измене из `main` гране у вашу грану и надамо се да можете само наставити. Ако не, VS Code ће вам показати где је Git _збуњен_ и само измените погођене фајлове да кажете који садржај је најтачнији.
+
+1. **Пошаљите свој рад на GitHub**. Слање вашег рада на GitHub значи две ствари. Пушовање ваше гране на ваш репозиторијум и затим отварање PR-а (Pull Request).
+
+   ```bash
+   git push --set-upstream origin [branch-name]
+   ```
+
+   Горња команда креира грану на вашем fork-ованом репозиторијуму.
+
+1. **Отворите PR**. Затим, желите да отворите PR. То радите тако што навигујете до fork-ованог репозиторијума на GitHub-у. Видећете индикацију на GitHub-у где вас пита да ли желите да креирате нови PR, кликнете на то и бићете одведени на интерфејс где можете променити наслов поруке о комиту, дати ј
+Уверите се да одете на GitHub страницу за форковани репо и уклоните удаљену грану коју сте управо послали.
+
+`Pull request` изгледа као смешан термин јер заправо желите да "погурате" своје измене у пројекат. Али одржавалац (власник пројекта) или главни тим треба да размотри ваше измене пре него што их споји са "главном" граном пројекта, тако да заправо тражите одлуку о промени од одржаваоца.
+
+Pull request је место где се упоређују и дискутују разлике уведене на грани уз рецензије, коментаре, интегрисане тестове и још много тога. Добар pull request прати отприлике иста правила као и порука комита. Можете додати референцу на проблем у трагачу проблема, на пример када ваш рад решава неки проблем. Ово се ради коришћењем `#` праћеног бројем вашег проблема. На пример `#97`.
+
+🤞Држимо палчеве да сви тестови прођу и да власник(ци) пројекта споје ваше измене у пројекат🤞
+
+Ажурирајте своју тренутну локалну радну грану са свим новим комитима из одговарајуће удаљене гране на GitHub-у:
+
+`git pull`
+
+## Како допринети отвореном коду
+
+Прво, хајде да пронађемо репозиторијум (или **репо**) на GitHub-у који вас занима и коме бисте желели да допринесете неком променом. Желите да копирате његов садржај на свој рачунар.
+
+✅ Добар начин да пронађете репозиторијуме погодне за почетнике је [претрага по ознаци 'good-first-issue'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/).
+
+![Копирање репоа локално](../../../../translated_images/clone_repo.5085c48d666ead57664f050d806e325d7f883be6838c821e08bc823ab7c66665.sr.png)
+
+Постоји неколико начина за копирање кода. Један од начина је да "клонирате" садржај репозиторијума, користећи HTTPS, SSH или GitHub CLI (Command Line Interface).
+
+Отворите свој терминал и клонирајте репозиторијум овако:
+`git clone https://github.com/ProjectURL`
+
+Да бисте радили на пројекту, пребаците се у одговарајући фолдер:
+`cd ProjectURL`
+
+Такође можете отворити цео пројекат користећи [Codespaces](https://github.com/features/codespaces), GitHub-ов уграђени едитор кода / облачно развојно окружење, или [GitHub Desktop](https://desktop.github.com/).
+
+На крају, можете преузети код у зипованом фолдеру.
+
+### Неколико занимљивих ствари о GitHub-у
+
+Можете да означите звездицом, пратите или "форкујете" било који јавни репозиторијум на GitHub-у. Своје означене репозиторијуме можете пронаћи у падајућем менију у горњем десном углу. То је као обележавање, али за код.
+
+Пројекти имају трагач проблема, углавном на GitHub-у у картици "Issues", осим ако није другачије назначено, где људи дискутују о проблемима везаним за пројекат. А картица Pull Requests је место где људи дискутују и прегледају измене које су у току.
+
+Пројекти могу имати и дискусије на форумима, мејлинг листама или у чет каналима као што су Slack, Discord или IRC.
+
+✅ Погледајте свој нови GitHub репо и испробајте неколико ствари, као што су уређивање подешавања, додавање информација у свој репо и креирање пројекта (попут Канбан табле). Постоји много тога што можете да урадите!
+
+---
+
+## 🚀 Изазов
+
+Упарите се са пријатељем да радите на коду једно другог. Креирајте пројекат заједно, форкујте код, креирајте гране и спајајте измене.
+
+## Квиз након предавања
+[Квиз након предавања](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/4)
+
+## Преглед и самостално учење
+
+Прочитајте више о [доприносу софтверу отвореног кода](https://opensource.guide/how-to-contribute/#how-to-submit-a-contribution).
+
+[Git подсетник](https://training.github.com/downloads/github-git-cheat-sheet/).
+
+Вежбајте, вежбајте, вежбајте. GitHub има одличне путеве за учење доступне преко [skills.github.com](https://skills.github.com):
+
+- [Прва недеља на GitHub-у](https://skills.github.com/#first-week-on-github)
+
+Такође ћете пронаћи напредније курсеве.
+
+## Задатак
+
+Завршите [курс Прва недеља на GitHub-у](https://skills.github.com/#first-week-on-github)
+
+---
+
+**Одрицање од одговорности**:  
+Овај документ је преведен коришћењем услуге за превођење помоћу вештачке интелигенције [Co-op Translator](https://github.com/Azure/co-op-translator). Иако тежимо тачности, молимо вас да имате у виду да аутоматски преводи могу садржати грешке или нетачности. Оригинални документ на изворном језику треба сматрати ауторитативним извором. За критичне информације препоручује се професионални превод од стране људи. Не сносимо одговорност за било каква неспоразумевања или погрешна тумачења која могу произаћи из коришћења овог превода.
\ No newline at end of file
diff --git a/translations/sr/1-getting-started-lessons/3-accessibility/README.md b/translations/sr/1-getting-started-lessons/3-accessibility/README.md
new file mode 100644
index 00000000..69aee2aa
--- /dev/null
+++ b/translations/sr/1-getting-started-lessons/3-accessibility/README.md
@@ -0,0 +1,177 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "e4cd5b1faed4adab5acf720f82798003",
+  "translation_date": "2025-08-27T22:33:59+00:00",
+  "source_file": "1-getting-started-lessons/3-accessibility/README.md",
+  "language_code": "sr"
+}
+-->
+# Прављење приступачних веб страница
+
+![Све о приступачности](../../../../translated_images/webdev101-a11y.8ef3025c858d897a403a1a42c0897c76e11b724d9a8a0c0578dd4316f7507622.sr.png)  
+> Скетч од [Томоми Имура](https://twitter.com/girlie_mac)
+
+## Квиз пре предавања  
+[Квиз пре предавања](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/5)
+
+> Снага веба је у његовој универзалности. Приступ за све, без обзира на инвалидитет, је суштински аспект.  
+>  
+> \- Сер Тимоти Бернерс-Ли, директор W3C и проналазач Светске мреже
+
+Овај цитат савршено истиче важност креирања приступачних веб страница. Апликација која није доступна свима је, по дефиницији, искључива. Као веб програмери, увек треба да имамо приступачност на уму. Ако се фокусирате на то од самог почетка, бићете на добром путу да осигурате да сви могу приступити страницама које креирате. У овој лекцији ћете научити о алатима који вам могу помоћи да осигурате да ваши веб ресурси буду приступачни и како да градите са приступачношћу на уму.
+
+> Ову лекцију можете преузети на [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/accessibility/?WT.mc_id=academic-77807-sagibbon)!
+
+## Алатке за коришћење
+
+### Читачи екрана
+
+Један од најпознатијих алата за приступачност су читачи екрана.
+
+[Читачи екрана](https://en.wikipedia.org/wiki/Screen_reader) су уобичајени клијенти за особе са оштећењем вида. Док проводимо време осигуравајући да прегледач правилно преноси информације које желимо да поделимо, морамо такође осигурати да читач екрана ради исто.
+
+Најосновније, читач екрана ће звучно читати страницу од врха до дна. Ако је ваша страница само текст, читач ће пренети информације на сличан начин као прегледач. Наравно, веб странице ретко садрже само текст; оне ће садржати линкове, графику, боје и друге визуелне компоненте. Потребно је водити рачуна да се те информације правилно читају помоћу читача екрана.
+
+Сваки веб програмер треба да се упозна са читачем екрана. Као што је истакнуто, то је клијент који ће ваши корисници користити. На исти начин на који сте упознати са радом прегледача, требало би да научите како функционише читач екрана. Срећом, читачи екрана су уграђени у већину оперативних система.
+
+Неки прегледачи такође имају уграђене алате и екстензије који могу читати текст наглас или чак пружити неке основне навигационе функције, као што су [ови алати за приступачност у Edge прегледачу](https://support.microsoft.com/help/4000734/microsoft-edge-accessibility-features). Ово су такође важни алати за приступачност, али функционишу веома другачије од читача екрана и не треба их мешати са алатима за тестирање читача екрана.
+
+✅ Испробајте читач екрана и читач текста у прегледачу. На Windows-у је [Narrator](https://support.microsoft.com/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c172f109bdb1/?WT.mc_id=academic-77807-sagibbon) подразумевано укључен, а [JAWS](https://webaim.org/articles/jaws/) и [NVDA](https://www.nvaccess.org/about-nvda/) могу се инсталирати. На macOS-у и iOS-у, [VoiceOver](https://support.apple.com/guide/voiceover/welcome/10) је подразумевано укључен.
+
+### Зумирање
+
+Још један алат који често користе особе са оштећењем вида је зумирање. Најосновнији тип зумирања је статичко зумирање, које се контролише помоћу `Control + знак плус (+)` или смањењем резолуције екрана. Овај тип зумирања узрокује да се цела страница промени величину, па је коришћење [одзивног дизајна](https://developer.mozilla.org/docs/Learn/CSS/CSS_layout/Responsive_Design) важно за пружање доброг корисничког искуства на повећаним нивоима зумирања.
+
+Други тип зумирања ослања се на специјализовани софтвер за увећање једног дела екрана и померање, слично као коришћење праве лупе. На Windows-у је [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/) је софтвер треће стране за увећање са више функција и већом базом корисника. И macOS и iOS имају уграђени софтвер за увећање под називом [Zoom](https://www.apple.com/accessibility/mac/vision/).
+
+### Провера контраста
+
+Боје на веб страницама треба пажљиво бирати како би одговарале потребама корисника који су слепи за боје или имају потешкоће са гледањем боја ниског контраста.
+
+✅ Тестирајте веб страницу коју волите да користите за употребу боја помоћу екстензије за прегледач као што је [WCAG-ов проверач боја](https://microsoftedge.microsoft.com/addons/detail/wcag-color-contrast-check/idahaggnlnekelhgplklhfpchbfdmkjp?hl=en-US&WT.mc_id=academic-77807-sagibbon). Шта сте научили?
+
+### Lighthouse
+
+У области алата за програмере вашег прегледача, наћи ћете алат Lighthouse. Овај алат је важан за добијање првог погледа на приступачност (као и друге анализе) веб странице. Иако је важно не ослањати се искључиво на Lighthouse, резултат од 100% је веома користан као основа.
+
+✅ Пронађите Lighthouse у панелу алата за програмере вашег прегледача и покрените анализу било које странице. Шта сте открили?
+
+## Дизајнирање за приступачност
+
+Приступачност је релативно велика тема. Да бисмо вам помогли, доступни су бројни ресурси.
+
+- [Accessible U - Универзитет Минесоте](https://accessibility.umn.edu/your-role/web-developers)
+
+Иако нећемо моћи да покријемо сваки аспект креирања приступачних страница, испод су неки од основних принципа које ћете желети да примените. Дизајнирање приступачне странице од самог почетка је **увек** лакше него враћање на постојећу страницу да би се учинила приступачном.
+
+## Добри принципи приказа
+
+### Палете боја које су безбедне
+
+Људи виде свет на различите начине, а то укључује и боје. Када бирате шему боја за вашу страницу, требало би да осигурате да је приступачна за све. Један одличан [алат за генерисање палета боја је Color Safe](http://colorsafe.co/).
+
+✅ Идентификујте веб страницу која је веома проблематична у употреби боја. Зашто?
+
+### Коришћење исправног HTML-а
+
+Помоћу CSS-а и JavaScript-а могуће је учинити да било који елемент изгледа као било која врста контроле. `<span>` се може користити за креирање `<button>`, а `<b>` може постати хиперлинк. Иако се ово може сматрати лакшим за стилизовање, не преноси ништа читачу екрана. Користите одговарајући HTML када креирате контроле на страници. Ако желите хиперлинк, користите `<a>`. Коришћење исправног HTML-а за исправну контролу назива се коришћење семантичког HTML-а.
+
+✅ Идите на било коју веб страницу и видите да ли дизајнери и програмери правилно користе HTML. Можете ли пронаћи дугме које би требало да буде линк? Савет: десни клик и изаберите 'View Page Source' у вашем прегледачу да бисте погледали основни код.
+
+### Креирање описне хијерархије заглавља
+
+Корисници читача екрана [веома се ослањају на заглавља](https://webaim.org/projects/screenreadersurvey8/#finding) да би пронашли информације и навигирали кроз страницу. Писање описног садржаја заглавља и коришћење семантичких ознака заглавља су важни за креирање лако навигирајуће странице за кориснике читача екрана.
+
+### Коришћење добрих визуелних наговештаја
+
+CSS нуди потпуну контролу над изгледом било ког елемента на страници. Можете креирати текстуалне оквире без контуре или хиперлинкове без подвука. Нажалост, уклањање тих наговештаја може отежати некоме ко се ослања на њих да препозна тип контроле.
+
+## Важност текста линка
+
+Хиперлинкови су суштински за навигацију вебом. Као резултат, осигуравање да читач екрана правилно чита линкове омогућава свим корисницима да навигирају вашу страницу.
+
+### Читачи екрана и линкови
+
+Као што бисте очекивали, читачи екрана читају текст линка на исти начин као што би читали било који други текст на страници. Имајући то на уму, текст приказан испод може изгледати савршено прихватљиво.
+
+> Мали пингвин, понекад познат као бајковити пингвин, је најмањи пингвин на свету. [Кликните овде](https://en.wikipedia.org/wiki/Little_penguin) за више информација.
+
+> Мали пингвин, понекад познат као бајковити пингвин, је најмањи пингвин на свету. Посетите https://en.wikipedia.org/wiki/Little_penguin за више информација.
+
+> **NOTE** Као што ћете ускоро прочитати, никада не би требало да креирате линкове који изгледају као горе наведени.
+
+Запамтите, читачи екрана су другачији интерфејс од прегледача са другачијим сетом функција.
+
+### Проблем са коришћењем URL-а
+
+Читачи екрана читају текст. Ако се URL појави у тексту, читач екрана ће прочитати URL. Генерално говорећи, URL не преноси значајне информације и може звучати досадно. Можда сте то искусили ако вам је телефон икада звучно прочитао текстуалну поруку са URL-ом.
+
+### Проблем са "кликните овде"
+
+Читачи екрана такође имају могућност да читају само хиперлинкове на страници, на исти начин на који би особа са видом скенирала страницу за линкове. Ако је текст линка увек "кликните овде", све што ће корисник чути је "кликните овде, кликните овде, кликните овде, кликните овде, кликните овде, ..." Сви линкови сада су неразлучиви један од другог.
+
+### Добар текст линка
+
+Добар текст линка укратко описује шта се налази на другој страни линка. У горе наведеном примеру који говори о малим пингвинима, линк води на Википедијску страницу о врсти. Фраза *мали пингвини* би била савршен текст линка јер јасно указује шта ће неко научити ако кликне на линк - мали пингвини.
+
+> Мали [пингвин](https://en.wikipedia.org/wiki/Little_penguin), понекад познат као бајковити пингвин, је најмањи пингвин на свету.
+
+✅ Претражујте веб неколико минута да бисте пронашли странице које користе нејасне стратегије линковања. Упоредите их са другим, боље повезаним страницама. Шта сте научили?
+
+#### Напомене за претраживаче
+
+Као додатни бонус за осигуравање да ваша страница буде приступачна свима, помоћи ћете претраживачима да навигирају вашу страницу. Претраживачи користе текст линка да би научили теме страница. Дакле, коришћење доброг текста линка помаже свима!
+
+### ARIA
+
+Замислите следећу страницу:
+
+| Производ      | Опис              | Наручи       |
+| ------------- | ----------------- | ------------ |
+| Вигет         | [Опис](../../../../1-getting-started-lessons/3-accessibility/')       | [Наручи](../../../../1-getting-started-lessons/3-accessibility/') |
+| Супер вигет   | [Опис](../../../../1-getting-started-lessons/3-accessibility/')       | [Наручи](../../../../1-getting-started-lessons/3-accessibility/') |
+
+У овом примеру, дуплирање текста за опис и наручивање има смисла за некога ко користи прегледач. Међутим, неко ко користи читач екрана чуо би само речи *опис* и *наручи* поновљене без контекста.
+
+Да би подржали овакве сценарије, HTML подржава сет атрибута познатих као [Приступачне богате интернет апликације (ARIA)](https://developer.mozilla.org/docs/Web/Accessibility/ARIA). Ови атрибути вам омогућавају да пружите додатне информације читачима екрана.
+
+> **NOTE**: Као и многи аспекти HTML-а, подршка прегледача и читача екрана може варирати. Међутим, већина главних клијената подржава ARIA атрибуте.
+
+Можете користити `aria-label` да опишете линк када формат странице то не дозвољава. Опис за вигет могао би бити постављен као
+
+``` html
+<a href="#" aria-label="Widget description">description</a>
+```
+
+✅ Генерално, коришћење семантичког обележавања као што је горе описано надмашује употребу ARIA, али понекад не постоји семантички еквивалент за различите HTML видгете. Добар пример је дрво. Не постоји HTML еквивалент за дрво, па идентификујете генерички `<div>` за овај елемент са одговарајућом улогом и ARIA вредностима. [MDN документација о ARIA](https://developer.mozilla.org/docs/Web/Accessibility/ARIA) садржи више корисних информација.
+
+```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>
+```
+
+## Слике
+
+Подразумева се да читачи екрана не могу аутоматски да прочитају шта се налази на слици. Осигуравање да слике буду приступачне не захтева много рада - то је оно чему служи атрибут `alt`. Све значајне слике треба да имају `alt` који описује шта су.  
+Слике које су чисто декоративне треба да имају свој `alt` атрибут постављен на празан низ: `alt=""`. Ово спречава читаче екрана да непотребно најављују декоративну слику.
+
+✅ Као што можете очекивати, претраживачи такође не могу да разумеју шта се налази на слици. Они такође користе alt текст. Дакле, још једном, осигуравање да ваша страница буде приступачна пружа додатне бонусе!
+
+## Тастатура
+
+Неки корисници не могу да користе миш или тракпед, већ се ослањају на интеракције са тастатуром да би прелазили са једног елемента на други. Важно је да ваша веб страница представи ваш садржај логичним редоследом како би корисник тастатуре могао да приступи сваком интерактивном елементу док се креће низ документ. Ако градите своје веб странице са семантичким обележавањем и користите CSS за стилизовање њиховог визуелног изгледа, ваша страница би требало да буде навигирајућа помоћу тастатуре, али
+Многе владе имају законе који се односе на захтеве приступачности. Информишите се о законима о приступачности у вашој земљи. Шта је обухваћено, а шта није? Пример је [ова владина веб страница](https://accessibility.blog.gov.uk/).
+
+## Задатак
+
+[Анализирајте веб страницу која није приступачна](assignment.md)
+
+Заслуге: [Turtle Ipsum](https://github.com/Instrument/semantic-html-sample) од Instrument
+
+---
+
+**Одрицање од одговорности**:  
+Овај документ је преведен коришћењем услуге за превођење помоћу вештачке интелигенције [Co-op Translator](https://github.com/Azure/co-op-translator). Иако се трудимо да обезбедимо тачност, молимо вас да имате у виду да аутоматски преводи могу садржати грешке или нетачности. Оригинални документ на његовом изворном језику треба сматрати меродавним извором. За критичне информације, препоручује се професионални превод од стране људи. Не преузимамо одговорност за било каква погрешна тумачења или неспоразуме који могу настати услед коришћења овог превода.
\ No newline at end of file
diff --git a/translations/sr/1-getting-started-lessons/3-accessibility/assignment.md b/translations/sr/1-getting-started-lessons/3-accessibility/assignment.md
new file mode 100644
index 00000000..2daa023d
--- /dev/null
+++ b/translations/sr/1-getting-started-lessons/3-accessibility/assignment.md
@@ -0,0 +1,30 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "a258597a194e77d4fd469b3cd976b29e",
+  "translation_date": "2025-08-27T22:35:01+00:00",
+  "source_file": "1-getting-started-lessons/3-accessibility/assignment.md",
+  "language_code": "sr"
+}
+-->
+# Анализирајте недоступан сајт
+
+## Упутства
+
+Идентификујте веб-сајт за који сматрате да НИЈЕ доступан и направите акциони план за побољшање његове доступности.  
+Ваш први задатак биће да идентификујете овај сајт, детаљно опишете начине на које мислите да је недоступан без коришћења аналитичких алата, а затим га поднесете на анализу помоћу Lighthouse-а.  
+Сачувајте PDF резултата ове анализе и направите детаљан план са минимум десет тачака које показују како би сајт могао да се побољша.
+
+## Табела за тестирање доступности сајта
+
+| Критеријум | Изузетно | Прихватљиво | Потребно побољшање |
+|------------|----------|-------------|--------------------|
+|            | недостаје <10% онога што је потребно | недостаје 20% онога што је потребно | недостаје 50% онога што је потребно |
+
+----
+Извештај студента: укључује параграфе о томе колико је сајт недоступан, Lighthouse извештај сачуван у PDF формату, листу од десет тачака за побољшање, са детаљима о томе како их побољшати
+
+---
+
+**Одрицање од одговорности**:  
+Овај документ је преведен коришћењем услуге за превођење помоћу вештачке интелигенције [Co-op Translator](https://github.com/Azure/co-op-translator). Иако се трудимо да превод буде тачан, молимо вас да имате у виду да аутоматски преводи могу садржати грешке или нетачности. Оригинални документ на његовом изворном језику треба сматрати ауторитативним извором. За критичне информације препоручује се професионални превод од стране људи. Не преузимамо одговорност за било каква погрешна тумачења или неспоразуме који могу настати услед коришћења овог превода.
\ No newline at end of file
diff --git a/translations/sr/1-getting-started-lessons/README.md b/translations/sr/1-getting-started-lessons/README.md
new file mode 100644
index 00000000..070a70ea
--- /dev/null
+++ b/translations/sr/1-getting-started-lessons/README.md
@@ -0,0 +1,31 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "04683f4cfa46004179b0404b89a3065c",
+  "translation_date": "2025-08-27T22:27:24+00:00",
+  "source_file": "1-getting-started-lessons/README.md",
+  "language_code": "sr"
+}
+-->
+# Почетак са веб развојем
+
+У овом делу курикулума, бићете упознати са концептима који нису засновани на пројектима, али су важни за постајање професионалним програмером.
+
+### Теме
+
+1. [Увод у програмске језике и алате заната](1-intro-to-programming-languages/README.md)  
+2. [Увод у GitHub](2-github-basics/README.md)  
+3. [Основе приступачности](3-accessibility/README.md)  
+
+### Аутори
+
+Увод у програмске језике и алате заната написала је са ♥️ [Жасмин Гринавеј](https://twitter.com/paladique)  
+
+Увод у GitHub написала је са ♥️ [Флор Дрис](https://twitter.com/floordrees)  
+
+Основе приступачности написао је са ♥️ [Кристофер Харисон](https://twitter.com/geektrainer)  
+
+---
+
+**Одрицање од одговорности**:  
+Овај документ је преведен коришћењем услуге за превођење помоћу вештачке интелигенције [Co-op Translator](https://github.com/Azure/co-op-translator). Иако се трудимо да превод буде тачан, молимо вас да имате у виду да аутоматски преводи могу садржати грешке или нетачности. Оригинални документ на изворном језику треба сматрати меродавним извором. За критичне информације препоручује се професионални превод од стране људског преводиоца. Не преузимамо одговорност за било каква погрешна тумачења или неспоразуме који могу настати услед коришћења овог превода.
\ No newline at end of file
diff --git a/translations/sr/2-js-basics/1-data-types/README.md b/translations/sr/2-js-basics/1-data-types/README.md
new file mode 100644
index 00000000..53b741db
--- /dev/null
+++ b/translations/sr/2-js-basics/1-data-types/README.md
@@ -0,0 +1,215 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "fc6aef8ecfdd5b0ad2afa6e6ba52bfde",
+  "translation_date": "2025-08-27T22:13:52+00:00",
+  "source_file": "2-js-basics/1-data-types/README.md",
+  "language_code": "sr"
+}
+-->
+# Основе JavaScript-а: Типови података
+
+![Основе JavaScript-а - Типови података](../../../../translated_images/webdev101-js-datatypes.4cc470179730702c756480d3ffa46507f746e5975ebf80f99fdaaf1cff09a7f4.sr.png)
+> Скетчнота од [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Квиз пре предавања
+[Квиз пре предавања](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/7)
+
+Ова лекција покрива основе JavaScript-а, језика који омогућава интерактивност на вебу.
+
+> Ову лекцију можете проћи на [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-variables/?WT.mc_id=academic-77807-sagibbon)!
+
+[![Променљиве](https://img.youtube.com/vi/JNIXfGiDWM8/0.jpg)](https://youtube.com/watch?v=JNIXfGiDWM8 "Променљиве у JavaScript-у")
+
+[![Типови података у JavaScript-у](https://img.youtube.com/vi/AWfA95eLdq8/0.jpg)](https://youtube.com/watch?v=AWfA95eLdq8 "Типови података у JavaScript-у")
+
+> 🎥 Кликните на слике изнад за видео записе о променљивама и типовима података
+
+Хајде да почнемо са променљивама и типовима података који их попуњавају!
+
+## Променљиве
+
+Променљиве чувају вредности које се могу користити и мењати током вашег кода.
+
+Креирање и **декларисање** променљиве има следећу синтаксу **[кључна реч] [име]**. Састоји се од два дела:
+
+- **Кључна реч**. Кључне речи могу бити `let` или `var`.  
+
+✅ Кључна реч `let` је уведена у ES6 и даје вашој променљивој такозвани _блоковски опсег_. Препоручује се да користите `let` уместо `var`. Блоковске опсеге ћемо детаљније обрадити у будућим деловима.
+- **Име променљиве**, ово је име које сами бирате.
+
+### Задатак - рад са променљивама
+
+1. **Декларишите променљиву**. Хајде да декларишемо променљиву користећи кључну реч `let`:
+
+    ```javascript
+    let myVariable;
+    ```
+
+   `myVariable` је сада декларисана користећи кључну реч `let`. Тренутно нема вредност.
+
+1. **Доделите вредност**. Сачувајте вредност у променљивој помоћу оператора `=` праћеног очекиваном вредношћу.
+
+    ```javascript
+    myVariable = 123;
+    ```
+
+   > Напомена: употреба `=` у овој лекцији значи да користимо "оператор доделе", који се користи за постављање вредности променљивој. Не означава једнакост.
+
+   `myVariable` је сада *иницијализована* са вредношћу 123.
+
+1. **Рефакторишите**. Замените свој код следећом изјавом.
+
+    ```javascript
+    let myVariable = 123;
+    ```
+
+    Горње се назива _експлицитна иницијализација_ када је променљива декларисана и истовремено јој је додељена вредност.
+
+1. **Промените вредност променљиве**. Промените вредност променљиве на следећи начин:
+
+   ```javascript
+   myVariable = 321;
+   ```
+
+   Када је променљива декларисана, можете променити њену вредност у било ком тренутку у вашем коду помоћу оператора `=` и нове вредности.
+
+   ✅ Пробајте! Можете писати JavaScript директно у вашем претраживачу. Отворите прозор претраживача и идите на Developer Tools. У конзоли ћете пронаћи упит; укуцајте `let myVariable = 123`, притисните ентер, а затим укуцајте `myVariable`. Шта се дешава? Напомена, више о овим концептима ћете научити у наредним лекцијама.
+
+## Константе
+
+Декларација и иницијализација константе следи исте концепте као и променљива, са изузетком кључне речи `const`. Константе се обично декларишу са свим словима великим.
+
+```javascript
+const MY_VARIABLE = 123;
+```
+
+Константе су сличне променљивама, са два изузетка:
+
+- **Морају имати вредност**. Константе морају бити иницијализоване, иначе ће доћи до грешке приликом извршавања кода.
+- **Референца не може бити промењена**. Референца константе не може бити промењена након иницијализације, иначе ће доћи до грешке приликом извршавања кода. Хајде да погледамо два примера:
+   - **Једноставна вредност**. Следеће НИЈЕ дозвољено:
+   
+      ```javascript
+      const PI = 3;
+      PI = 4; // not allowed
+      ```
+ 
+   - **Референца објекта је заштићена**. Следеће НИЈЕ дозвољено.
+   
+      ```javascript
+      const obj = { a: 3 };
+      obj = { b: 5 } // not allowed
+      ```
+
+    - **Вредност објекта није заштићена**. Следеће ЈЕ дозвољено:
+    
+      ```javascript
+      const obj = { a: 3 };
+      obj.a = 5;  // allowed
+      ```
+
+      Горње мењате вредност објекта, али не и саму референцу, што је дозвољено.
+
+   > Напомена, `const` значи да је референца заштићена од поновног додељивања. Вредност није _непроменљива_ и може се променити, посебно ако је сложена структура као што је објекат.
+
+## Типови података
+
+Променљиве могу чувати различите типове вредности, као што су бројеви и текст. Ови различити типови вредности познати су као **типови података**. Типови података су важан део развоја софтвера јер помажу програмерима да донесу одлуке о томе како код треба да буде написан и како софтвер треба да ради. Штавише, неки типови података имају јединствене карактеристике које помажу у трансформацији или извлачењу додатних информација из вредности.
+
+✅ Типови података се такође називају JavaScript примитиви података, јер су то најнижи нивои типова података које језик пружа. Постоји 7 примитивних типова података: string, number, bigint, boolean, undefined, null и symbol. Одвојите минут да визуализујете шта сваки од ових примитива може представљати. Шта је `zebra`? А `0`? `true`?
+
+### Бројеви
+
+У претходном делу, вредност `myVariable` је била тип података број.
+
+`let myVariable = 123;`
+
+Променљиве могу чувати све типове бројева, укључујући децималне или негативне бројеве. Бројеви се такође могу користити са аритметичким операторима, који су обрађени у [следећем делу](../../../../2-js-basics/1-data-types).
+
+### Аритметички оператори
+
+Постоји неколико типова оператора који се користе приликом извршавања аритметичких функција, а неки су наведени овде:
+
+| Симбол | Опис                                                                     | Пример                          |
+| ------ | ------------------------------------------------------------------------ | -------------------------------- |
+| `+`    | **Сабирање**: Израчунава збир два броја                                  | `1 + 2 //очекивани одговор је 3`   |
+| `-`    | **Одузимање**: Израчунава разлику два броја                              | `1 - 2 //очекивани одговор је -1`  |
+| `*`    | **Множење**: Израчунава производ два броја                               | `1 * 2 //очекивани одговор је 2`   |
+| `/`    | **Дељење**: Израчунава количник два броја                                | `1 / 2 //очекивани одговор је 0.5` |
+| `%`    | **Остатак**: Израчунава остатак од дељења два броја                      | `1 % 2 //очекивани одговор је 1`   |
+
+✅ Пробајте! Пробајте аритметичку операцију у конзоли вашег претраживача. Да ли вас резултати изненађују?
+
+### Низови (Strings)
+
+Низови су скупови карактера који се налазе између једноструких или двоструких наводника.
+
+- `'Ово је низ'`
+- `"Ово је такође низ"`
+- `let myString = 'Ово је вредност низа сачувана у променљивој';`
+
+Запамтите да користите наводнике када пишете низ, иначе ће JavaScript претпоставити да је то име променљиве.
+
+### Форматирање низова
+
+Низови су текстуални и понекад ће захтевати форматирање.
+
+Да бисте **конкатенирали** два или више низова, или их спојили, користите оператор `+`.
+
+```javascript
+let myString1 = "Hello";
+let myString2 = "World";
+
+myString1 + myString2 + "!"; //HelloWorld!
+myString1 + " " + myString2 + "!"; //Hello World!
+myString1 + ", " + myString2 + "!"; //Hello, World!
+
+```
+
+✅ Зашто `1 + 1 = 2` у JavaScript-у, али `'1' + '1' = 11?` Размислите о томе. Шта је са `'1' + 1`?
+
+**Шаблонски литерали** су још један начин форматирања низова, осим што се уместо наводника користи апостроф. Све што није обичан текст мора бити постављено у заграде `${ }`. Ово укључује све променљиве које могу бити низови.
+
+```javascript
+let myString1 = "Hello";
+let myString2 = "World";
+
+`${myString1} ${myString2}!` //Hello World!
+`${myString1}, ${myString2}!` //Hello, World!
+```
+
+Можете постићи своје циљеве форматирања било којим методом, али шаблонски литерали ће поштовати све размаке и преломе линија.
+
+✅ Када бисте користили шаблонски литерал уместо обичног низа?
+
+### Булови (Booleans)
+
+Булови могу имати само две вредности: `true` или `false`. Булови могу помоћи у доношењу одлука о томе које линије кода треба да се изврше када су испуњени одређени услови. У многим случајевима, [оператори](../../../../2-js-basics/1-data-types) помажу у постављању вредности булова, и често ћете приметити и писати променљиве које се иницијализују или њихове вредности ажурирају помоћу оператора.
+
+- `let myTrueBool = true`
+- `let myFalseBool = false`
+
+✅ Променљива се може сматрати 'истинитом' ако се процени као булова `true`. Занимљиво је да су у JavaScript-у [све вредности истините осим ако нису дефинисане као лажне](https://developer.mozilla.org/docs/Glossary/Truthy).
+
+---
+
+## 🚀 Изазов
+
+JavaScript је познат по својим изненађујућим начинима руковања типовима података у одређеним ситуацијама. Истражите мало о овим 'замкама'. На пример: осетљивост на велика и мала слова може вас изненадити! Пробајте ово у вашој конзоли: `let age = 1; let Age = 2; age == Age` (резултат је `false` -- зашто?). Које друге замке можете пронаћи?
+
+## Квиз после предавања
+[Квиз после предавања](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/8)
+
+## Преглед и самостално учење
+
+Погледајте [ову листу JavaScript вежби](https://css-tricks.com/snippets/javascript/) и пробајте једну. Шта сте научили?
+
+## Задатак
+
+[Вежбање типова података](assignment.md)
+
+---
+
+**Одрицање од одговорности**:  
+Овај документ је преведен коришћењем услуге за превођење помоћу вештачке интелигенције [Co-op Translator](https://github.com/Azure/co-op-translator). Иако се трудимо да обезбедимо тачност, молимо вас да имате у виду да аутоматски преводи могу садржати грешке или нетачности. Оригинални документ на његовом изворном језику треба сматрати меродавним извором. За критичне информације препоручује се професионални превод од стране људи. Не преузимамо одговорност за било каква погрешна тумачења или неспоразуме који могу настати услед коришћења овог превода.
\ No newline at end of file
diff --git a/translations/sr/2-js-basics/1-data-types/assignment.md b/translations/sr/2-js-basics/1-data-types/assignment.md
new file mode 100644
index 00000000..c956fc73
--- /dev/null
+++ b/translations/sr/2-js-basics/1-data-types/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "3869244ceda606c4969d8cdd82679867",
+  "translation_date": "2025-08-27T22:14:34+00:00",
+  "source_file": "2-js-basics/1-data-types/assignment.md",
+  "language_code": "sr"
+}
+-->
+# Вежба са типовима података
+
+## Упутства
+
+Замислите да правите корпу за куповину. Напишите документацију о типовима података који би вам били потребни за комплетно искуство куповине. Како сте дошли до својих избора?
+
+## Рубрика
+
+Критеријум | Изузетно | Прихватљиво | Потребно побољшање
+--- | --- | --- | --- |
+||Шест типова података су наведени и детаљно истражени, уз документацију њихове употребе|Четири типа података су истражена|Два типа података су истражена|
+
+---
+
+**Одрицање од одговорности**:  
+Овај документ је преведен коришћењем услуге за превођење помоћу вештачке интелигенције [Co-op Translator](https://github.com/Azure/co-op-translator). Иако се трудимо да обезбедимо тачност, молимо вас да имате у виду да аутоматски преводи могу садржати грешке или нетачности. Оригинални документ на његовом изворном језику треба сматрати меродавним извором. За критичне информације препоручује се професионални превод од стране људи. Не преузимамо одговорност за било каква погрешна тумачења или неспоразуме који могу настати услед коришћења овог превода.
\ No newline at end of file
diff --git a/translations/sr/2-js-basics/2-functions-methods/README.md b/translations/sr/2-js-basics/2-functions-methods/README.md
new file mode 100644
index 00000000..1cca2919
--- /dev/null
+++ b/translations/sr/2-js-basics/2-functions-methods/README.md
@@ -0,0 +1,210 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "b4612bbb9ace984f374fcc80e3e035ad",
+  "translation_date": "2025-08-27T22:09:53+00:00",
+  "source_file": "2-js-basics/2-functions-methods/README.md",
+  "language_code": "sr"
+}
+-->
+# Основе JavaScript-а: Методи и функције
+
+![Основе JavaScript-а - Функције](../../../../translated_images/webdev101-js-functions.be049c4726e94f8b7605c36330ac42eeb5cd8ed02bcdd60fdac778174d6cb865.sr.png)
+> Скетч од [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Квиз пре предавања
+[Квиз пре предавања](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/9)
+
+Када размишљамо о писању кода, увек желимо да осигурамо да је наш код читљив. Иако ово може звучати контраинтуитивно, код се чита много више пута него што се пише. Један од основних алата у програмерском арсеналу за осигурање одрживог кода је **функција**.
+
+[![Методи и функције](https://img.youtube.com/vi/XgKsD6Zwvlc/0.jpg)](https://youtube.com/watch?v=XgKsD6Zwvlc "Методи и функције")
+
+> 🎥 Кликните на слику изнад за видео о методима и функцијама.
+
+> Ову лекцију можете проћи на [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-functions/?WT.mc_id=academic-77807-sagibbon)!
+
+## Функције
+
+У основи, функција је блок кода који можемо извршити на захтев. Ово је савршено за сценарије где треба да обавимо исти задатак више пута; уместо да дуплирамо логику на више места (што би било тешко ажурирати када дође време), можемо је централизовати на једном месту и позвати кад год нам је потребно да се операција изврши - чак можете позвати функције из других функција!
+
+Једнако важно је и могућност именовања функције. Иако ово може изгледати тривијално, име пружа брз начин за документовање дела кода. Можете то замислити као етикету на дугмету. Ако кликнем на дугме које пише "Откажи тајмер", знам да ће зауставити рад сата.
+
+## Креирање и позивање функције
+
+Синтакса за функцију изгледа овако:
+
+```javascript
+function nameOfFunction() { // function definition
+ // function definition/body
+}
+```
+
+Ако желим да креирам функцију за приказивање поздрава, могла би изгледати овако:
+
+```javascript
+function displayGreeting() {
+  console.log('Hello, world!');
+}
+```
+
+Кад год желимо да позовемо (или активирамо) нашу функцију, користимо име функције праћено са `()`. Важно је напоменути да наша функција може бити дефинисана пре или после него што одлучимо да је позовемо; JavaScript компајлер ће је пронаћи за вас.
+
+```javascript
+// calling our function
+displayGreeting();
+```
+
+> **NOTE:** Постоји посебан тип функције познат као **метод**, који сте већ користили! У ствари, видели смо ово у нашем демо примеру када смо користили `console.log`. Оно што метод разликује од функције је то што је метод везан за објекат (`console` у нашем примеру), док је функција независна. Многи програмери користе ове термине наизменично.
+
+### Најбоље праксе за функције
+
+Постоји неколико најбољих пракси које треба имати на уму приликом креирања функција:
+
+- Као и увек, користите описна имена како бисте знали шта функција ради
+- Користите **camelCasing** за спајање речи
+- Држите функције фокусиране на одређени задатак
+
+## Прослеђивање информација функцији
+
+Да би функција била више употребљива, често ћете желети да јој проследите информације. Ако узмемо у обзир наш пример `displayGreeting` изнад, он ће приказати само **Здраво, свет!**. Није баш најкориснија функција коју бисмо могли креирати. Ако желимо да је учинимо мало флексибилнијом, као што је омогућавање некоме да наведе име особе коју поздрављамо, можемо додати **параметар**. Параметар (понекад назван и **аргумент**) је додатна информација која се шаље функцији.
+
+Параметри се наводе у делу дефиниције унутар заграда и одвајају се зарезима, овако:
+
+```javascript
+function name(param, param2, param3) {
+
+}
+```
+
+Можемо ажурирати наш `displayGreeting` да прихвати име и да га прикаже.
+
+```javascript
+function displayGreeting(name) {
+  const message = `Hello, ${name}!`;
+  console.log(message);
+}
+```
+
+Када желимо да позовемо нашу функцију и проследимо параметар, наводимо га у заградама.
+
+```javascript
+displayGreeting('Christopher');
+// displays "Hello, Christopher!" when run
+```
+
+## Подразумеване вредности
+
+Можемо учинити нашу функцију још флексибилнијом додавањем више параметара. Али шта ако не желимо да захтевамо да свака вредност буде наведена? У складу са нашим примером поздрава, могли бисмо оставити име као обавезно (потребно нам је да знамо кога поздрављамо), али желимо да омогућимо да се сам поздрав прилагоди по жељи. Ако неко не жели да га прилагоди, пружамо подразумевану вредност. Да бисмо пружили подразумевану вредност параметру, постављамо је на исти начин као што постављамо вредност за променљиву - `parameterName = 'defaultValue'`. Да видимо комплетан пример:
+
+```javascript
+function displayGreeting(name, salutation='Hello') {
+  console.log(`${salutation}, ${name}`);
+}
+```
+
+Када позовемо функцију, можемо одлучити да ли желимо да поставимо вредност за `salutation`.
+
+```javascript
+displayGreeting('Christopher');
+// displays "Hello, Christopher"
+
+displayGreeting('Christopher', 'Hi');
+// displays "Hi, Christopher"
+```
+
+## Враћање вредности
+
+До сада, функција коју смо направили увек ће излазити на [конзолу](https://developer.mozilla.org/docs/Web/API/console). Понекад је то управо оно што тражимо, посебно када креирамо функције које ће позивати друге услуге. Али шта ако желим да направим помоћну функцију за израчунавање и да ми врати вредност како бих је могао користити негде другде?
+
+Ово можемо урадити коришћењем **враћене вредности**. Враћена вредност се враћа из функције и може се чувати у променљивој на исти начин као што бисмо могли чувати буквалну вредност као што је стринг или број.
+
+Ако функција враћа нешто, онда се користи кључна реч `return`. Кључна реч `return` очекује вредност или референцу онога што се враћа, овако:
+
+```javascript
+return myVariable;
+```  
+
+Могли бисмо креирати функцију за креирање поруке поздрава и враћање вредности позиваоцу.
+
+```javascript
+function createGreetingMessage(name) {
+  const message = `Hello, ${name}`;
+  return message;
+}
+```
+
+Када позивамо ову функцију, чуваћемо вредност у променљивој. Ово је исто као када бисмо поставили променљиву на статичку вредност (као `const name = 'Christopher'`).
+
+```javascript
+const greetingMessage = createGreetingMessage('Christopher');
+```
+
+## Функције као параметри за функције
+
+Како напредујете у својој програмерској каријери, наићи ћете на функције које прихватају функције као параметре. Овај занимљив трик се често користи када не знамо када ће се нешто догодити или завршити, али знамо да треба да извршимо операцију као одговор.
+
+Као пример, размислите о [setTimeout](https://developer.mozilla.org/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout), који започиње тајмер и извршава код када се заврши. Треба да му кажемо који код желимо да извршимо. Звучи као савршен посао за функцију!
+
+Ако покренете код испод, након 3 секунде видећете поруку **Прошло је 3 секунде**.
+
+```javascript
+function displayDone() {
+  console.log('3 seconds has elapsed');
+}
+// timer value is in milliseconds
+setTimeout(displayDone, 3000);
+```
+
+### Анонимне функције
+
+Хајде да поново погледамо оно што смо направили. Креирамо функцију са именом која ће се користити само једном. Како наша апликација постаје сложенија, можемо видети да креирамо много функција које ће бити позване само једном. Ово није идеално. Испоставља се да не морамо увек да пружимо име!
+
+Када прослеђујемо функцију као параметар, можемо заобићи креирање унапред и уместо тога је направити као део параметра. Користимо исту кључну реч `function`, али уместо тога је градимо као параметар.
+
+Хајде да препишемо код изнад да користимо анонимну функцију:
+
+```javascript
+setTimeout(function() {
+  console.log('3 seconds has elapsed');
+}, 3000);
+```
+
+Ако покренете наш нови код, приметићете да добијамо исте резултате. Направили смо функцију, али нисмо морали да јој дамо име!
+
+### Фат стрелице функције
+
+Један пречица која је уобичајена у многим програмским језицима (укључујући JavaScript) је могућност коришћења онога што се назива **стрелица** или **фат стрелице** функција. Користи посебан индикатор `=>`, који изгледа као стрелица - отуда име! Коришћењем `=>`, можемо прескочити кључну реч `function`.
+
+Хајде да поново препишемо наш код да користимо функцију фат стрелице:
+
+```javascript
+setTimeout(() => {
+  console.log('3 seconds has elapsed');
+}, 3000);
+```
+
+### Када користити коју стратегију
+
+Сада сте видели да имамо три начина да проследимо функцију као параметар и можда се питате када користити који. Ако знате да ћете функцију користити више пута, креирајте је на уобичајен начин. Ако ћете је користити само на једном месту, генерално је најбоље користити анонимну функцију. Да ли ћете користити функцију фат стрелице или традиционалнију синтаксу `function` зависи од вас, али приметићете да већина савремених програмера преферира `=>`.
+
+---
+
+## 🚀 Изазов
+
+Можете ли у једној реченици објаснити разлику између функција и метода? Покушајте!
+
+## Квиз после предавања
+[Квиз после предавања](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/10)
+
+## Преглед и самостално учење
+
+Вреди [прочитати мало више о функцијама стрелице](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions), јер се све више користе у кодним базама. Вежбајте писање функције, а затим је препишите користећи ову синтаксу.
+
+## Задатак
+
+[Забава са функцијама](assignment.md)
+
+---
+
+**Одрицање од одговорности**:  
+Овај документ је преведен коришћењем услуге за превођење помоћу вештачке интелигенције [Co-op Translator](https://github.com/Azure/co-op-translator). Иако се трудимо да обезбедимо тачност, молимо вас да имате у виду да аутоматски преводи могу садржати грешке или нетачности. Оригинални документ на његовом изворном језику треба сматрати меродавним извором. За критичне информације препоручује се професионални превод од стране људи. Не преузимамо одговорност за било каква погрешна тумачења или неспоразуме који могу настати услед коришћења овог превода.
\ No newline at end of file
diff --git a/translations/sr/2-js-basics/2-functions-methods/assignment.md b/translations/sr/2-js-basics/2-functions-methods/assignment.md
new file mode 100644
index 00000000..46b6a930
--- /dev/null
+++ b/translations/sr/2-js-basics/2-functions-methods/assignment.md
@@ -0,0 +1,27 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "8973f96157680a13e9446e4bb540ee57",
+  "translation_date": "2025-08-27T22:10:33+00:00",
+  "source_file": "2-js-basics/2-functions-methods/assignment.md",
+  "language_code": "sr"
+}
+-->
+# Забава са функцијама
+
+## Упутства
+
+Направите различите функције, како оне које враћају вредност, тако и оне које не враћају ништа.
+
+Покушајте да направите функцију која има мешавину параметара и параметара са подразумеваним вредностима.
+
+## Рубрика
+
+| Критеријум | Изузетно                                                                                 | Прихватљиво                                                     | Потребно побољшање |
+| ---------- | ---------------------------------------------------------------------------------------- | ---------------------------------------------------------------- | ------------------ |
+|            | Понуђено решење са две или више добро функционишућих функција са разноврсним параметрима   | Понуђено функционално решење са једном функцијом и неколико параметара | Решење има грешке  |
+
+---
+
+**Одрицање од одговорности**:  
+Овај документ је преведен коришћењем услуге за превођење помоћу вештачке интелигенције [Co-op Translator](https://github.com/Azure/co-op-translator). Иако се трудимо да обезбедимо тачност, молимо вас да имате у виду да аутоматски преводи могу садржати грешке или нетачности. Оригинални документ на његовом изворном језику треба сматрати меродавним извором. За критичне информације препоручује се професионални превод од стране људи. Не преузимамо одговорност за било каква погрешна тумачења или неспоразуме који могу настати услед коришћења овог превода.
\ No newline at end of file
diff --git a/translations/sr/2-js-basics/3-making-decisions/README.md b/translations/sr/2-js-basics/3-making-decisions/README.md
new file mode 100644
index 00000000..339780ba
--- /dev/null
+++ b/translations/sr/2-js-basics/3-making-decisions/README.md
@@ -0,0 +1,232 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "888609c48329c280ca2477d2df40f2e5",
+  "translation_date": "2025-08-27T22:07:46+00:00",
+  "source_file": "2-js-basics/3-making-decisions/README.md",
+  "language_code": "sr"
+}
+-->
+# Основе JavaScript-а: Доношење одлука
+
+![Основе JavaScript-а - Доношење одлука](../../../../translated_images/webdev101-js-decisions.69e1b20f272dd1f0b1cb2f8adaff3ed2a77c4f91db96d8a0594132a353fa189a.sr.png)
+
+> Скетч од [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Квиз пре предавања
+
+[Квиз пре предавања](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/11)
+
+Доношење одлука и контролисање редоследа извршавања кода чини ваш код поново употребљивим и робусним. Овај део покрива синтаксу за контролу тока података у JavaScript-у и њен значај када се користи са Буловим типовима података.
+
+[![Доношење одлука](https://img.youtube.com/vi/SxTp8j-fMMY/0.jpg)](https://youtube.com/watch?v=SxTp8j-fMMY "Доношење одлука")
+
+> 🎥 Кликните на слику изнад за видео о доношењу одлука.
+
+> Ову лекцију можете проћи на [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-if-else/?WT.mc_id=academic-77807-sagibbon)!
+
+## Кратак подсетник о Буловим вредностима
+
+Булови могу имати само две вредности: `true` или `false`. Булови помажу у доношењу одлука о томе који редови кода треба да се изврше када су испуњени одређени услови.
+
+Поставите своју булову вредност на true или false овако:
+
+`let myTrueBool = true`  
+`let myFalseBool = false`
+
+✅ Булови су добили име по енглеском математичару, филозофу и логичару Џорџу Булу (1815–1864).
+
+## Оператори поређења и Булови
+
+Оператори се користе за процену услова прављењем поређења која ће створити Булову вредност. Следи листа оператора који се често користе.
+
+| Симбол | Опис                                                                                                                                                   | Пример             |
+| ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ |
+| `<`    | **Мање од**: Поређује две вредности и враћа Булову вредност `true` ако је вредност са леве стране мања од вредности са десне стране                      | `5 < 6 // true`    |
+| `<=`   | **Мање или једнако**: Поређује две вредности и враћа Булову вредност `true` ако је вредност са леве стране мања или једнака вредности са десне стране     | `5 <= 6 // true`   |
+| `>`    | **Веће од**: Поређује две вредности и враћа Булову вредност `true` ако је вредност са леве стране већа од вредности са десне стране                      | `5 > 6 // false`   |
+| `>=`   | **Веће или једнако**: Поређује две вредности и враћа Булову вредност `true` ако је вредност са леве стране већа или једнака вредности са десне стране     | `5 >= 6 // false`  |
+| `===`  | **Строга једнакост**: Поређује две вредности и враћа Булову вредност `true` ако су вредности са леве и десне стране једнаке И истог типа података         | `5 === 6 // false` |
+| `!==`  | **Неједнакост**: Поређује две вредности и враћа супротну Булову вредност од оне коју би вратио оператор строге једнакости                                | `5 !== 6 // true`  |
+
+✅ Проверите своје знање тако што ћете написати нека поређења у конзоли вашег претраживача. Да ли вас неки враћени податак изненађује?
+
+## If изјава
+
+If изјава ће извршити код између својих блокова ако је услов тачан.
+
+```javascript
+if (condition) {
+  //Condition is true. Code in this block will run.
+}
+```
+
+Логички оператори се често користе за формирање услова.
+
+```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 изјава
+
+`else` изјава ће извршити код између својих блокова када је услов нетачан. Она је опционална уз `if` изјаву.
+
+```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!");
+}
+```
+
+✅ Тестирајте своје разумевање овог кода и следећег кода тако што ћете га покренути у конзоли претраживача. Промените вредности променљивих currentMoney и laptopPrice да бисте променили враћени `console.log()`.
+
+## Switch изјава
+
+`switch` изјава се користи за извршавање различитих радњи на основу различитих услова. Користите `switch` изјаву да бисте изабрали један од многих блокова кода који ће бити извршен.
+
+```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}`);
+```
+
+✅ Тестирајте своје разумевање овог кода и следећег кода тако што ћете га покренути у конзоли претраживача. Промените вредности променљиве a да бисте променили враћени `console.log()`.
+
+## Логички оператори и Булови
+
+Одлуке могу захтевати више од једног поређења и могу се повезати логичким операторима да би се произвела Булова вредност.
+
+| Симбол | Опис                                                                                     | Пример                                                                 |
+| ------ | ----------------------------------------------------------------------------------------- | --------------------------------------------------------------------- |
+| `&&`   | **Логичко И**: Поређује два Булова израза. Враћа true **само** ако су обе стране тачне    | `(5 > 6) && (5 < 6 ) //Једна страна је нетачна, друга је тачна. Враћа false` |
+| `\|\|` | **Логичко ИЛИ**: Поређује два Булова израза. Враћа true ако је бар једна страна тачна      | `(5 > 6) \|\| (5 < 6) //Једна страна је нетачна, друга је тачна. Враћа true` |
+| `!`    | **Логичко НЕ**: Враћа супротну вредност Буловог израза                                    | `!(5 > 6) // 5 није веће од 6, али "!" ће вратити true`               |
+
+## Услови и одлуке са логичким операторима
+
+Логички оператори могу се користити за формирање услова у if..else изјавама.
+
+```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!");
+}
+```
+
+### Оператор негације
+
+До сада сте видели како можете користити `if...else` изјаву за креирање условне логике. Све што уђе у `if` мора да се процени као true/false. Коришћењем оператора `!` можете _негирати_ израз. То би изгледало овако:
+
+```javascript
+if (!condition) {
+  // runs if condition is false
+} else {
+  // runs if condition is true
+}
+```
+
+### Тернарни изрази
+
+`if...else` није једини начин да се изрази логика одлуке. Такође можете користити нешто што се зове тернарни оператор. Синтакса за њега изгледа овако:
+
+```javascript
+let variable = condition ? <return this if true> : <return this if false>
+```
+
+Испод је конкретнији пример:
+
+```javascript
+let firstNumber = 20;
+let secondNumber = 10;
+let biggestNumber = firstNumber > secondNumber ? firstNumber : secondNumber;
+```
+
+✅ Одвојите минут да прочитате овај код неколико пута. Да ли разумете како ови оператори функционишу?
+
+Горњи код каже:
+
+- ако је `firstNumber` већи од `secondNumber`
+- онда доделите `firstNumber` променљивој `biggestNumber`
+- иначе доделите `secondNumber`.
+
+Тернарни израз је само компактнији начин писања кода испод:
+
+```javascript
+let biggestNumber;
+if (firstNumber > secondNumber) {
+  biggestNumber = firstNumber;
+} else {
+  biggestNumber = secondNumber;
+}
+```
+
+---
+
+## 🚀 Изазов
+
+Направите програм који је прво написан са логичким операторима, а затим га препишите користећи тернарни израз. Која синтакса вам више одговара?
+
+---
+
+## Квиз после предавања
+
+[Квиз после предавања](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/12)
+
+## Преглед и самостално учење
+
+Прочитајте више о многим операторима доступним кориснику [на MDN](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators).
+
+Прођите кроз сјајан [преглед оператора](https://joshwcomeau.com/operator-lookup/) Џоша Комоа!
+
+## Задатак
+
+[Оператори](assignment.md)
+
+---
+
+**Одрицање од одговорности**:  
+Овај документ је преведен коришћењем услуге за превођење помоћу вештачке интелигенције [Co-op Translator](https://github.com/Azure/co-op-translator). Иако се трудимо да обезбедимо тачност, молимо вас да имате у виду да аутоматски преводи могу садржати грешке или нетачности. Оригинални документ на његовом изворном језику треба сматрати меродавним извором. За критичне информације препоручује се професионални превод од стране људи. Не преузимамо одговорност за било каква погрешна тумачења или неспоразуме који могу настати услед коришћења овог превода.
\ No newline at end of file
diff --git a/translations/sr/2-js-basics/3-making-decisions/assignment.md b/translations/sr/2-js-basics/3-making-decisions/assignment.md
new file mode 100644
index 00000000..74b46ac5
--- /dev/null
+++ b/translations/sr/2-js-basics/3-making-decisions/assignment.md
@@ -0,0 +1,54 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "bf62b82567e6f9bdf4abda9ae0ccb64a",
+  "translation_date": "2025-08-27T22:08:27+00:00",
+  "source_file": "2-js-basics/3-making-decisions/assignment.md",
+  "language_code": "sr"
+}
+-->
+# Оператори
+
+## Упутства
+
+Играјте се са операторима. Ево предлога за програм који можете имплементирати:
+
+Имате групу студената из два различита система оцењивања.
+
+### Први систем оцењивања
+
+Један систем оцењивања је дефинисан оценама од 1 до 5, где оцена 3 и више значи да сте положили курс.
+
+### Други систем оцењивања
+
+Други систем оцењивања има следеће оцене: `A, A-, B, B-, C, C-`, где је `A` најбоља оцена, а `C` најнижа оцена за пролаз.
+
+### Задатак
+
+Дат је следећи низ `allStudents` који представља све студенте и њихове оцене. Конструишите нови низ `studentsWhoPass` који садржи све студенте који су положили.
+
+> TIP, користите for-петљу, if...else и операторе поређења:
+
+```javascript
+let allStudents = [
+  'A',
+  'B-',
+  1,
+  4,
+  5,
+  2
+]
+
+let studentsWhoPass = [];
+```
+
+## Рубрика
+
+| Критеријум | Изузетно                      | Прихватљиво                   | Потребно побољшање              |
+| ---------- | ----------------------------- | ----------------------------- | ------------------------------- |
+|            | Представљено је комплетно решење | Представљено је делимично решење | Представљено је решење са грешкама |
+
+---
+
+**Одрицање од одговорности**:  
+Овај документ је преведен коришћењем услуге за превођење помоћу вештачке интелигенције [Co-op Translator](https://github.com/Azure/co-op-translator). Иако се трудимо да превод буде тачан, молимо вас да имате у виду да аутоматизовани преводи могу садржати грешке или нетачности. Оригинални документ на његовом изворном језику треба сматрати меродавним извором. За критичне информације препоручује се професионални превод од стране људи. Не преузимамо одговорност за било каква погрешна тумачења или неспоразуме који могу настати услед коришћења овог превода.
\ No newline at end of file
diff --git a/translations/sr/2-js-basics/4-arrays-loops/README.md b/translations/sr/2-js-basics/4-arrays-loops/README.md
new file mode 100644
index 00000000..8866428c
--- /dev/null
+++ b/translations/sr/2-js-basics/4-arrays-loops/README.md
@@ -0,0 +1,147 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "3f7f87871312cf6cc12662da7d973182",
+  "translation_date": "2025-08-27T22:11:27+00:00",
+  "source_file": "2-js-basics/4-arrays-loops/README.md",
+  "language_code": "sr"
+}
+-->
+# Основе JavaScript-а: Низови и Петље
+
+![Основе JavaScript-а - Низови](../../../../translated_images/webdev101-js-arrays.439d7528b8a294558d0e4302e448d193f8ad7495cc407539cc81f1afe904b470.sr.png)  
+> Скетч од [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Квиз пре предавања  
+[Квиз пре предавања](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/13)
+
+Ова лекција покрива основе JavaScript-а, језика који омогућава интерактивност на вебу. У овој лекцији ћете научити о низовима и петљама, који се користе за манипулацију подацима.
+
+[![Низови](https://img.youtube.com/vi/1U4qTyq02Xw/0.jpg)](https://youtube.com/watch?v=1U4qTyq02Xw "Низови")
+
+[![Петље](https://img.youtube.com/vi/Eeh7pxtTZ3k/0.jpg)](https://www.youtube.com/watch?v=Eeh7pxtTZ3k "Петље")
+
+> 🎥 Кликните на слике изнад за видео записе о низовима и петљама.
+
+> Ову лекцију можете пратити на [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-arrays/?WT.mc_id=academic-77807-sagibbon)!
+
+## Низови
+
+Рад са подацима је чест задатак у било ком програмском језику, а тај задатак је много лакши када су подаци организовани у структурном формату, као што су низови. Са низовима, подаци се чувају у структури сличној листи. Једна од главних предности низова је што можете чувати различите типове података у једном низу.
+
+✅ Низови су свуда око нас! Можете ли смислити пример низа из стварног живота, као што је низ соларних панела?
+
+Синтакса за низ је пар угластих заграда.
+
+```javascript
+let myArray = [];
+```
+
+Ово је празан низ, али низови могу бити декларисани већ попуњени подацима. Вредности у низу се одвајају зарезом.
+
+```javascript
+let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
+```
+
+Вредности у низу добијају јединствену вредност која се зове **индекс**, цео број који се додељује на основу удаљености од почетка низа. У горњем примеру, стринг вредност "Chocolate" има индекс 0, а индекс "Rocky Road" је 4. Користите индекс са угластим заградама да бисте преузели, променили или убацили вредности у низ.
+
+✅ Да ли вас изненађује што низови почињу од нултог индекса? У неким програмским језицима индекси почињу од 1. Постоји занимљива историја око овога, коју можете [прочитати на Википедији](https://en.wikipedia.org/wiki/Zero-based_numbering).
+
+```javascript
+let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
+iceCreamFlavors[2]; //"Vanilla"
+```
+
+Можете користити индекс да промените вредност, овако:
+
+```javascript
+iceCreamFlavors[4] = "Butter Pecan"; //Changed "Rocky Road" to "Butter Pecan"
+```
+
+И можете убацити нову вредност на одређени индекс овако:
+
+```javascript
+iceCreamFlavors[5] = "Cookie Dough"; //Added "Cookie Dough"
+```
+
+✅ Чешћи начин додавања вредности у низ је коришћењем оператора као што је array.push().
+
+Да бисте сазнали колико ставки има у низу, користите својство `length`.
+
+```javascript
+let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
+iceCreamFlavors.length; //5
+```
+
+✅ Пробајте сами! Користите конзолу вашег претраживача да креирате и манипулишете низом који сами направите.
+
+## Петље
+
+Петље нам омогућавају да извршавамо понављајуће или **итеративне** задатке, и могу уштедети много времена и кода. Свака итерација може се разликовати у својим променљивама, вредностима и условима. Постоје различите врсте петљи у JavaScript-у, и све имају мале разлике, али у суштини раде исту ствар: пролазе кроз податке.
+
+### For петља
+
+`for` петља захтева 3 дела за итерацију:  
+- `counter` Променљива која се обично иницијализује бројем који броји број итерација  
+- `condition` Израз који користи операторе поређења да би зауставио петљу када је `false`  
+- `iteration-expression` Извршава се на крају сваке итерације, обично се користи за промену вредности бројача  
+
+```javascript
+// Counting up to 10
+for (let i = 0; i < 10; i++) {
+  console.log(i);
+}
+```
+
+✅ Покрените овај код у конзоли претраживача. Шта се дешава када направите мале промене у бројачу, услову или изразу итерације? Можете ли учинити да ради уназад, стварајући одбројавање?
+
+### While петља
+
+За разлику од синтаксе `for` петље, `while` петље захтевају само услов који ће зауставити петљу када услов постане `false`. Услови у петљама обично се ослањају на друге вредности као што су бројачи, и морају се управљати током трајања петље. Почетне вредности за бројаче морају бити креиране изван петље, а сви изрази за испуњавање услова, укључујући промену бројача, морају се одржавати унутар петље.
+
+```javascript
+//Counting up to 10
+let i = 0;
+while (i < 10) {
+ console.log(i);
+ i++;
+}
+```
+
+✅ Зашто бисте изабрали for петљу уместо while петље? 17 хиљада корисника имало је исто питање на StackOverflow-у, а нека од мишљења [могу вам бити занимљива](https://stackoverflow.com/questions/39969145/while-loops-vs-for-loops-in-javascript).
+
+## Петље и низови
+
+Низови се често користе са петљама јер већина услова захтева дужину низа да би зауставила петљу, а индекс може бити и вредност бројача.
+
+```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
+```
+
+✅ Експериментишите са проласком кроз низ који сами направите у конзоли вашег претраживача.
+
+---
+
+## 🚀 Изазов
+
+Постоје и други начини проласка кроз низове осим for и while петљи. Постоје [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), и [map](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/map). Препишите вашу петљу кроз низ користећи једну од ових техника.
+
+## Квиз после предавања  
+[Квиз после предавања](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/14)
+
+## Преглед и самостално учење
+
+Низови у JavaScript-у имају много метода који су изузетно корисни за манипулацију подацима. [Прочитајте о овим методама](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array) и испробајте неке од њих (као што су push, pop, slice и splice) на низу који сами направите.
+
+## Задатак
+
+[Пролазак кроз низ](assignment.md)
+
+---
+
+**Одрицање од одговорности**:  
+Овај документ је преведен коришћењем услуге за превођење помоћу вештачке интелигенције [Co-op Translator](https://github.com/Azure/co-op-translator). Иако настојимо да обезбедимо тачност, молимо вас да имате у виду да аутоматски преводи могу садржати грешке или нетачности. Оригинални документ на његовом изворном језику треба сматрати ауторитативним извором. За критичне информације препоручује се професионални превод од стране људи. Не преузимамо одговорност за било каква погрешна тумачења или неспоразуме који могу настати услед коришћења овог превода.
\ No newline at end of file
diff --git a/translations/sr/2-js-basics/4-arrays-loops/assignment.md b/translations/sr/2-js-basics/4-arrays-loops/assignment.md
new file mode 100644
index 00000000..4fdca298
--- /dev/null
+++ b/translations/sr/2-js-basics/4-arrays-loops/assignment.md
@@ -0,0 +1,27 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "8b2381170bd0fd2870f5889bb8620f02",
+  "translation_date": "2025-08-27T22:12:03+00:00",
+  "source_file": "2-js-basics/4-arrays-loops/assignment.md",
+  "language_code": "sr"
+}
+-->
+# Пролазак кроз низ
+
+## Упутства
+
+Направите програм који наводи сваки трећи број између 1-20 и исписује га у конзоли.
+
+> САВЕТ: користите for-петљу и измените израз за итерацију
+
+## Рубрика
+
+| Критеријум | Изузетно                               | Задовољавајуће           | Потребна побољшања             |
+| ---------- | ------------------------------------- | ------------------------ | ------------------------------ |
+|            | Програм ради исправно и коментарисан је | Програм није коментарисан | Програм је непотпун или има грешке |
+
+---
+
+**Одрицање од одговорности**:  
+Овај документ је преведен коришћењем услуге за превођење помоћу вештачке интелигенције [Co-op Translator](https://github.com/Azure/co-op-translator). Иако настојимо да обезбедимо тачност, молимо вас да имате у виду да аутоматски преводи могу садржати грешке или нетачности. Оригинални документ на његовом изворном језику треба сматрати меродавним извором. За критичне информације препоручује се професионални превод од стране људи. Не преузимамо одговорност за било каква погрешна тумачења или неспоразуме који могу произаћи из коришћења овог превода.
\ No newline at end of file
diff --git a/translations/sr/2-js-basics/README.md b/translations/sr/2-js-basics/README.md
new file mode 100644
index 00000000..8531e8c6
--- /dev/null
+++ b/translations/sr/2-js-basics/README.md
@@ -0,0 +1,28 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "cc9e70a2f096c67389c8acff1521fc27",
+  "translation_date": "2025-08-27T22:06:54+00:00",
+  "source_file": "2-js-basics/README.md",
+  "language_code": "sr"
+}
+-->
+# Увод у JavaScript
+
+JavaScript је језик веба. У овим четири лекције, научићете његове основе.
+
+### Теме
+
+1. [Променљиве и типови података](1-data-types/README.md)
+2. [Функције и методе](2-functions-methods/README.md)
+3. [Доношење одлука са JavaScript-ом](3-making-decisions/README.md)
+4. [Низови и петље](4-arrays-loops/README.md)
+
+### Аутори
+
+Ове лекције су написане са ♥️ од стране [Jasmine Greenaway](https://twitter.com/paladique), [Christopher Harrison](https://twitter.com/geektrainer) и [Chris Noring](https://twitter.com/chris_noring)
+
+---
+
+**Одрицање од одговорности**:  
+Овај документ је преведен коришћењем услуге за превођење помоћу вештачке интелигенције [Co-op Translator](https://github.com/Azure/co-op-translator). Иако се трудимо да обезбедимо тачност, молимо вас да имате у виду да аутоматски преводи могу садржати грешке или нетачности. Оригинални документ на његовом изворном језику треба сматрати меродавним извором. За критичне информације, препоручује се професионални превод од стране људи. Не преузимамо одговорност за било каква погрешна тумачења или неспоразуме који могу настати услед коришћења овог превода.
\ No newline at end of file
diff --git a/translations/sr/3-terrarium/1-intro-to-html/README.md b/translations/sr/3-terrarium/1-intro-to-html/README.md
new file mode 100644
index 00000000..86dd7210
--- /dev/null
+++ b/translations/sr/3-terrarium/1-intro-to-html/README.md
@@ -0,0 +1,249 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "46a0639e719b9cf1dfd062aa24cad639",
+  "translation_date": "2025-08-27T22:00:56+00:00",
+  "source_file": "3-terrarium/1-intro-to-html/README.md",
+  "language_code": "sr"
+}
+-->
+# Пројекат Тераријум, део 1: Увод у HTML
+
+![Увод у HTML](../../../../translated_images/webdev101-html.4389c2067af68e98280c1bde52b6c6269f399eaae3659b7c846018d8a7b0bbd9.sr.png)  
+> Скетч од [Томоми Имура](https://twitter.com/girlie_mac)
+
+## Квиз пре предавања
+
+[Квиз пре предавања](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/15)
+
+> Погледајте видео
+
+> 
+> [![Видео о основама Git-а и GitHub-а](https://img.youtube.com/vi/1TvxJKBzhyQ/0.jpg)](https://www.youtube.com/watch?v=1TvxJKBzhyQ)
+
+### Увод
+
+HTML, или Хипертекстуални Ознаковни Језик, представља „скелет“ веба. Ако CSS „облачи“ ваш HTML, а JavaScript му даје живот, онда је HTML тело ваше веб апликације. Чак и синтакса HTML-а одражава ту идеју, јер укључује ознаке као што су „head“, „body“ и „footer“.
+
+У овој лекцији ћемо користити HTML да направимо „скелет“ интерфејса нашег виртуелног тераријума. Имаће наслов и три колоне: десну и леву колону где ће се налазити биљке које се могу превлачити, и централни део који ће представљати стаклени тераријум. До краја ове лекције, моћи ћете да видите биљке у колонама, али интерфејс ће изгледати помало чудно; не брините, у следећем делу ћете додати CSS стилове како би интерфејс изгледао боље.
+
+### Задатак
+
+На вашем рачунару, направите фасциклу под називом 'terrarium' и унутар ње фајл под називом 'index.html'. Ово можете урадити у Visual Studio Code-у након што направите фасциклу тераријума тако што ћете отворити нови прозор VS Code-а, кликнути на 'open folder' и пронаћи вашу нову фасциклу. Кликните на мало дугме 'file' у панелу Explorer и направите нови фајл:
+
+![explorer у VS Code-у](../../../../translated_images/vs-code-index.e2986cf919471eb984a0afef231380c8b132b000635105f2397bd2754d1b689c.sr.png)
+
+Или
+
+Користите ове команде у вашем git bash-у:  
+* `mkdir terrarium`  
+* `cd terrarium`  
+* `touch index.html`  
+* `code index.html` или `nano index.html`  
+
+> index.html фајлови указују претраживачу да је то подразумевани фајл у фасцикли; URL-ови као што је `https://anysite.com/test` могу бити изграђени коришћењем структуре фасцикли која укључује фасциклу под називом `test` са `index.html` унутар ње; `index.html` не мора бити приказан у URL-у.
+
+---
+
+## DocType и html ознаке
+
+Први ред HTML фајла је његов doctype. Изненађујуће је што овај ред мора бити на самом врху фајла, али он говори старијим претраживачима да страница треба да се рендерује у стандардном режиму, пратећи тренутну html спецификацију.
+
+> Савет: у VS Code-у, можете прећи мишем преко ознаке и добити информације о њеној употреби из MDN референтних водича.
+
+Други ред треба да буде отварајућа ознака `<html>`, одмах праћена затварајућом ознаком `</html>`. Ове ознаке су коренски елементи вашег интерфејса.
+
+### Задатак
+
+Додајте ове редове на врх вашег `index.html` фајла:
+
+```HTML
+<!DOCTYPE html>
+<html></html>
+```
+
+✅ Постоји неколико различитих режима који се могу одредити постављањем DocType-а са упитним низом: [Quirks Mode и Standards Mode](https://developer.mozilla.org/docs/Web/HTML/Quirks_Mode_and_Standards_Mode). Ови режими су коришћени за подршку веома старим претраживачима који се данас ретко користе (Netscape Navigator 4 и Internet Explorer 5). Можете се држати стандардне декларације doctype-а.
+
+---
+
+## 'head' документа
+
+'Head' део HTML документа укључује кључне информације о вашој веб страници, познате као [метаподаци](https://developer.mozilla.org/docs/Web/HTML/Element/meta). У нашем случају, серверу на који ће ова страница бити послата за рендеровање, шаљемо ове четири ствари:
+
+-   наслов странице  
+-   метаподатке странице, укључујући:  
+    -   'character set', који указује на то који се кодни распоред користи на страници  
+    -   информације о претраживачу, укључујући `x-ua-compatible` који указује да је IE=edge претраживач подржан  
+    -   информације о томе како би viewport требало да се понаша када се страница учита. Постављање viewport-а да има почетни зум од 1 контролише ниво увећања када се страница први пут учита.  
+
+### Задатак
+
+Додајте 'head' блок у ваш документ између отварајућих и затварајућих `<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>
+```
+
+✅ Шта би се догодило ако поставите viewport мета ознаку овако: `<meta name="viewport" content="width=600">`? Прочитајте више о [viewport-у](https://developer.mozilla.org/docs/Web/HTML/Viewport_meta_tag).
+
+---
+
+## `body` документа
+
+### HTML ознаке
+
+У HTML-у, додајете ознаке у ваш .html фајл како бисте креирали елементе веб странице. Свака ознака обично има отварајућу и затварајућу ознаку, као што је: `<p>здраво</p>` за означавање пасуса. Креирајте тело вашег интерфејса додавањем скупа `<body>` ознака унутар `<html>` пара ознака; ваш код сада изгледа овако:
+
+### Задатак
+
+```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>
+```
+
+Сада можете почети са изградњом ваше странице. Обично користите `<div>` ознаке за креирање одвојених елемената на страници. Направићемо серију `<div>` елемената који ће садржати слике.
+
+### Слике
+
+Једна HTML ознака која не захтева затварајућу ознаку је `<img>` ознака, јер има `src` елемент који садржи све информације потребне страници за рендеровање елемента.
+
+Направите фасциклу у вашој апликацији под називом `images` и у њу додајте све слике из [фасцикле са изворним кодом](../../../../3-terrarium/solution/images); (постоји 14 слика биљака).
+
+### Задатак
+
+Додајте те слике биљака у две колоне између `<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>
+```
+
+> Напомена: Div-ови наспрам Span-ова. Div-ови се сматрају 'блок' елементима, а Span-ови 'inline'. Шта би се догодило ако бисте ове div-ове претворили у span-ове?
+
+Са овим кодом, биљке се сада појављују на екрану. Изгледају прилично лоше, јер још увек нису стилизоване помоћу CSS-а, што ћемо урадити у следећој лекцији.
+
+Свака слика има alt текст који ће се појавити чак и ако не можете да видите или рендерујете слику. Ово је важан атрибут за укључивање ради приступачности. Сазнајте више о приступачности у будућим лекцијама; за сада, запамтите да alt атрибут пружа алтернативне информације за слику ако корисник из неког разлога не може да је види (због споре везе, грешке у src атрибуту или ако корисник користи читач екрана).
+
+✅ Да ли сте приметили да свака слика има исти alt текст? Да ли је ово добра пракса? Зашто или зашто не? Можете ли побољшати овај код?
+
+---
+
+## Семантички ознаке
+
+Уопштено, пожељно је користити значајне 'семантичке' ознаке приликом писања HTML-а. Шта то значи? То значи да користите HTML ознаке које представљају тип података или интеракције за које су дизајниране. На пример, главни наслов текста на страници треба да користи `<h1>` ознаку.
+
+Додајте следећи ред одмах испод ваше отварајуће `<body>` ознаке:
+
+```html
+<h1>My Terrarium</h1>
+```
+
+Коришћење семантичког означавања, као што је коришћење `<h1>` за наслове и `<ul>` за неуређене листе, помаже читачима екрана да се крећу кроз страницу. Уопштено, дугмад треба писати као `<button>`, а листе као `<li>`. Иако је _могуће_ користити посебно стилизоване `<span>` елементе са обрађивачима кликова да би се имитирала дугмад, боље је за кориснике са инвалидитетом да користе технологије које одређују где се дугме налази на страници и да интерагују са њим ако се елемент појављује као дугме. Из тог разлога, покушајте да користите семантичке ознаке што је више могуће.
+
+✅ Погледајте читач екрана и [како он интерагује са веб страницом](https://www.youtube.com/watch?v=OUDV1gqs9GA). Можете ли видети зашто би несемантичке ознаке могле фрустрирати корисника?
+
+## Тераријум
+
+Последњи део овог интерфејса укључује креирање ознака које ће бити стилизоване да направе тераријум.
+
+### Задатак:
+
+Додајте овај код изнад последње `</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>
+```
+
+✅ Иако сте додали овај код на екран, не видите ништа што се рендерује. Зашто?
+
+---
+
+## 🚀Изазов
+
+Постоје неке занимљиве 'старе' ознаке у HTML-у које је и даље забавно испробати, иако не би требало да користите застареле ознаке као што су [ове ознаке](https://developer.mozilla.org/docs/Web/HTML/Element#Obsolete_and_deprecated_elements) у вашем коду. Ипак, можете ли користити стару `<marquee>` ознаку да натерате h1 наслов да се хоризонтално помера? (ако то урадите, не заборавите да је уклоните након тога)
+
+## Квиз након предавања
+
+[Квиз након предавања](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/16)
+
+## Преглед и самостално учење
+
+HTML је 'проверени и поуздани' систем градивних блокова који је помогао у изградњи веба какав данас познајемо. Сазнајте мало о његовој историји проучавајући старе и нове ознаке. Можете ли схватити зашто су неке ознаке застареле, а неке додате? Које ознаке би могле бити уведене у будућности?
+
+Сазнајте више о изградњи сајтова за веб и мобилне уређаје на [Microsoft Learn](https://docs.microsoft.com/learn/modules/build-simple-website/?WT.mc_id=academic-77807-sagibbon).
+
+## Задатак
+
+[Вежбајте ваш HTML: Направите макету блога](assignment.md)
+
+---
+
+**Одрицање од одговорности**:  
+Овај документ је преведен коришћењем услуге за превођење помоћу вештачке интелигенције [Co-op Translator](https://github.com/Azure/co-op-translator). Иако се трудимо да обезбедимо тачност, молимо вас да имате у виду да аутоматски преводи могу садржати грешке или нетачности. Оригинални документ на његовом изворном језику треба сматрати меродавним извором. За критичне информације препоручује се професионални превод од стране људи. Не преузимамо одговорност за било каква погрешна тумачења или неспоразуме који могу настати услед коришћења овог превода.
\ No newline at end of file
diff --git a/translations/sr/3-terrarium/1-intro-to-html/assignment.md b/translations/sr/3-terrarium/1-intro-to-html/assignment.md
new file mode 100644
index 00000000..0225d7e8
--- /dev/null
+++ b/translations/sr/3-terrarium/1-intro-to-html/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "970776c81401c9aacb34f365edac6b53",
+  "translation_date": "2025-08-27T22:01:51+00:00",
+  "source_file": "3-terrarium/1-intro-to-html/assignment.md",
+  "language_code": "sr"
+}
+-->
+# Вежбајте HTML: Направите макету блога
+
+## Упутства
+
+Замислите да дизајнирате или редизајнирате свој лични веб сајт. Направите графичку макету свог сајта, а затим запишите HTML код који бисте користили за креирање различитих елемената сајта. Ово можете урадити на папиру и скенирати, или користити софтвер по вашем избору, само се побрините да ручно напишете HTML код.
+
+## Рубрика
+
+| Критеријум | Изузетно                                                                           | Прихватљиво                                                                     | Потребно побољшање                                                                |
+| ---------- | ---------------------------------------------------------------------------------- | -------------------------------------------------------------------------------- | --------------------------------------------------------------------------------- |
+|            | Макета блога је визуелно представљена са најмање 10 елемената HTML кода            | Макета блога је визуелно представљена са око 5 елемената HTML кода               | Макета блога је визуелно представљена са највише 3 елемента HTML кода              |
+
+---
+
+**Одрицање од одговорности**:  
+Овај документ је преведен коришћењем услуге за превођење помоћу вештачке интелигенције [Co-op Translator](https://github.com/Azure/co-op-translator). Иако се трудимо да обезбедимо тачност, молимо вас да имате у виду да аутоматски преводи могу садржати грешке или нетачности. Оригинални документ на његовом изворном језику треба сматрати меродавним извором. За критичне информације препоручује се професионални превод од стране људи. Не преузимамо одговорност за било каква погрешна тумачења или неспоразуме који могу настати услед коришћења овог превода.
\ No newline at end of file
diff --git a/translations/sr/3-terrarium/2-intro-to-css/README.md b/translations/sr/3-terrarium/2-intro-to-css/README.md
new file mode 100644
index 00000000..8a78c90e
--- /dev/null
+++ b/translations/sr/3-terrarium/2-intro-to-css/README.md
@@ -0,0 +1,284 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "e375c2aeb94e2407f2667633d39580bd",
+  "translation_date": "2025-08-27T22:05:21+00:00",
+  "source_file": "3-terrarium/2-intro-to-css/README.md",
+  "language_code": "sr"
+}
+-->
+# Пројекат Тераријум, део 2: Увод у CSS
+
+![Увод у CSS](../../../../translated_images/webdev101-css.3f7af5991bf53a200d79e7257e5e450408d8ea97f5b531d31b2e3976317338ee.sr.png)
+> Скетч од [Томоми Имура](https://twitter.com/girlie_mac)
+
+## Квиз пре предавања
+
+[Квиз пре предавања](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/17)
+
+### Увод
+
+CSS, или Cascading Style Sheets, решава важан проблем веб развоја: како учинити да ваша веб страница изгледа лепо. Стилизовање ваших апликација их чини употребљивијим и лепшим; CSS можете користити и за креирање одзивног веб дизајна (RWD) - омогућавајући вашим апликацијама да изгледају добро без обзира на величину екрана на којем се приказују. CSS није само за улепшавање апликација; његова спецификација укључује анимације и трансформације које могу омогућити софистициране интеракције за ваше апликације. CSS Радна група помаже у одржавању актуелних CSS спецификација; можете пратити њихов рад на [сајту World Wide Web Consortium-а](https://www.w3.org/Style/CSS/members).
+
+> Напомена: CSS је језик који се развија, као и све на вебу, и не сви претраживачи подржавају новије делове спецификације. Увек проверите своје имплементације консултујући [CanIUse.com](https://caniuse.com).
+
+У овом предавању, додаћемо стилове нашем онлајн тераријуму и научити више о неколико CSS концепата: каскади, наслеђивању, коришћењу селектора, позиционирању и коришћењу CSS-а за изградњу распореда. У процесу ћемо распоредити тераријум и креирати сам тераријум.
+
+### Предуслов
+
+Требало би да имате HTML за ваш тераријум направљен и спреман за стилизовање.
+
+> Погледајте видео
+
+> 
+> [![Видео о основама Git-а и GitHub-а](https://img.youtube.com/vi/6yIdOIV9p1I/0.jpg)](https://www.youtube.com/watch?v=6yIdOIV9p1I)
+
+### Задатак
+
+У вашем фолдеру за тераријум, креирајте нову датотеку под називом `style.css`. Увезите ту датотеку у `<head>` секцију:
+
+```html
+<link rel="stylesheet" href="./style.css" />
+```
+
+---
+
+## Каскада
+
+Cascading Style Sheets укључују идеју да се стилови 'каскадно' примењују тако да је примена стила вођена његовим приоритетом. Стилови које постави аутор веб сајта имају приоритет над онима које постави претраживач. Стилови постављени 'inline' имају приоритет над онима постављеним у екстерној стилској датотеци.
+
+### Задатак
+
+Додајте inline стил "color: red" вашем `<h1>` тагу:
+
+```HTML
+<h1 style="color: red">My Terrarium</h1>
+```
+
+Затим, додајте следећи код у вашу `style.css` датотеку:
+
+```CSS
+h1 {
+ color: blue;
+}
+```
+
+✅ Која боја се приказује у вашој веб апликацији? Зашто? Можете ли пронаћи начин да надјачате стилове? Када бисте желели да то урадите, или зашто не?
+
+---
+
+## Наслеђивање
+
+Стилови се наслеђују од стила претка до потомка, тако да угнеждени елементи наслеђују стилове својих родитеља.
+
+### Задатак
+
+Поставите фонт тела на одређени фонт и проверите фонт угнежденог елемента:
+
+```CSS
+body {
+	font-family: helvetica, arial, sans-serif;
+}
+```
+
+Отворите конзолу вашег претраживача на картици 'Elements' и посматрајте фонт H1. Наслеђује свој фонт од тела, како је наведено у претраживачу:
+
+![наследни фонт](../../../../translated_images/1.cc07a5cbe114ad1d4728c35134584ac1b87db688eff83cf75985cf31fe0ed95c.sr.png)
+
+✅ Можете ли учинити да угнеждени стил наслеђује другачије својство?
+
+---
+
+## CSS Селектори
+
+### Тагови
+
+До сада, ваша `style.css` датотека има само неколико стилизованих тагова, и апликација изгледа прилично чудно:
+
+```CSS
+body {
+	font-family: helvetica, arial, sans-serif;
+}
+
+h1 {
+	color: #3a241d;
+	text-align: center;
+}
+```
+
+Овај начин стилизовања тагова вам даје контролу над јединственим елементима, али вам је потребна контрола над стиловима многих биљака у вашем тераријуму. Да бисте то урадили, потребно је да искористите CSS селекторе.
+
+### Идентификатори (Ids)
+
+Додајте мало стила за распоред левих и десних контејнера. Пошто постоји само један леви контејнер и само један десни контејнер, они добијају идентификаторе у маркупу. Да бисте их стилизовали, користите `#`:
+
+```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;
+}
+```
+
+Овде сте поставили ове контејнере са апсолутним позиционирањем на крајње леву и десну страну екрана, и користили проценат за њихову ширину како би могли да се скалирају за мале мобилне екране.
+
+✅ Овај код је прилично поновљен, што није "DRY" (Don't Repeat Yourself); можете ли пронаћи бољи начин да стилизујете ове идентификаторе, можда са идентификатором и класом? Потребно је да промените маркуп и рефакторишете CSS:
+
+```html
+<div id="left-container" class="container"></div>
+```
+
+### Класе
+
+У горњем примеру, стилизовали сте два јединствена елемента на екрану. Ако желите да стилови буду примењени на многе елементе на екрану, можете користити CSS класе. Урадите то за распоред биљака у левим и десним контејнерима.
+
+Приметите да свака биљка у HTML маркупу има комбинацију идентификатора и класа. Идентификатори се овде користе од стране JavaScript-а који ћете касније додати за манипулацију постављањем биљака у тераријуму. Класе, међутим, дају свим биљкама одређени стил.
+
+```html
+<div class="plant-holder">
+	<img class="plant" alt="plant" id="plant1" src="./images/plant1.png" />
+</div>
+```
+
+Додајте следеће у вашу `style.css` датотеку:
+
+```CSS
+.plant-holder {
+	position: relative;
+	height: 13%;
+	left: -10px;
+}
+
+.plant {
+	position: absolute;
+	max-width: 150%;
+	max-height: 150%;
+	z-index: 2;
+}
+```
+
+Приметно у овом исечку је мешавина релативног и апсолутног позиционирања, што ћемо покрити у следећем одељку. Погледајте начин на који се висине обрађују у процентима:
+
+Поставили сте висину држача биљака на 13%, добар број да осигурате да се све биљке приказују у сваком вертикалном контејнеру без потребе за скроловањем.
+
+Поставили сте држач биљака да се помери улево како би биљке биле више центриране унутар њиховог контејнера. Слике имају велики део транспарентне позадине како би биле лакше за превлачење, па их је потребно померити улево да би се боље уклопиле на екран.
+
+Затим, сама биљка добија максималну ширину од 150%. Ово јој омогућава да се скалира на мање како се претраживач скалира. Покушајте да промените величину вашег претраживача; биљке остају у својим контејнерима, али се скалирају да би се уклопиле.
+
+Такође је приметна употреба z-index-а, који контролише релативну висину елемента (тако да биљке седе на врху контејнера и изгледају као да су унутар тераријума).
+
+✅ Зашто вам требају и држач биљака и CSS селектор за биљке?
+
+## CSS Позиционирање
+
+Мешање својстава позиционирања (постоје static, relative, fixed, absolute и sticky позиције) може бити мало незгодно, али када се правилно уради, даје вам добру контролу над елементима на вашим страницама.
+
+Апсолутно позиционирани елементи се позиционирају релативно према најближим позиционираним прецима, а ако их нема, позиционирају се према телу документа.
+
+Релативно позиционирани елементи се позиционирају на основу CSS упутстава за прилагођавање њиховог положаја у односу на њихову почетну позицију.
+
+У нашем примеру, `plant-holder` је релативно позициониран елемент који је позициониран унутар апсолутно позиционираног контејнера. Резултатно понашање је да су бочни контејнери причвршћени лево и десно, а `plant-holder` је угнежден, прилагођавајући се унутар бочних контејнера, дајући простор за постављање биљака у вертикални ред.
+
+> Сама `plant` такође има апсолутно позиционирање, неопходно за њено превлачење, како ћете открити у следећем предавању.
+
+✅ Експериментишите са променом типова позиционирања бочних контејнера и `plant-holder`. Шта се дешава?
+
+## CSS Распореди
+
+Сада ћете користити оно што сте научили да изградите сам тераријум, све користећи CSS!
+
+Прво, стилизујте `.terrarium` div децу као заобљени правоугаоник користећи 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;
+}
+```
+
+Приметите употребу процената овде. Ако смањите ваш претраживач, можете видети како се тегла такође скалира. Такође приметите ширине и висине у процентима за елементе тегле и како је сваки елемент апсолутно позициониран у центру, причвршћен на дно приказа.
+
+Такође користимо `rem` за border-radius, дужину релативну према фонту. Прочитајте више о овом типу релативног мерења у [CSS спецификацији](https://www.w3.org/TR/css-values-3/#font-relative-lengths).
+
+✅ Покушајте да промените боје тегле и њену непрозирност у односу на боје земље. Шта се дешава? Зашто?
+
+---
+
+## 🚀Изазов
+
+Додајте 'мехур' сјај на доњи леви део тегле како би изгледала више као стакло. Стилизоваћете `.jar-glossy-long` и `.jar-glossy-short` да изгледају као рефлектовани сјај. Ево како би изгледало:
+
+![завршени тераријум](../../../../translated_images/terrarium-final.2f07047ffc597d0a06b06cab28a77801a10dd12fdb6c7fc630e9c40665491c53.sr.png)
+
+Да бисте завршили квиз након предавања, прођите кроз овај Learn модул: [Стилизујте вашу HTML апликацију са CSS-ом](https://docs.microsoft.com/learn/modules/build-simple-website/4-css-basics/?WT.mc_id=academic-77807-sagibbon)
+
+## Квиз након предавања
+
+[Квиз након предавања](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/18)
+
+## Преглед и самостално учење
+
+CSS изгледа обмањујуће једноставно, али постоје многи изазови када покушавате да савршено стилизујете апликацију за све претраживаче и све величине екрана. CSS-Grid и Flexbox су алати који су развијени да учине посао мало структуриранијим и поузданијим. Научите о овим алатима играјући [Flexbox Froggy](https://flexboxfroggy.com/) и [Grid Garden](https://codepip.com/games/grid-garden/).
+
+## Задатак
+
+[CSS Рефакторисање](assignment.md)
+
+---
+
+**Одрицање од одговорности**:  
+Овај документ је преведен коришћењем услуге за превођење помоћу вештачке интелигенције [Co-op Translator](https://github.com/Azure/co-op-translator). Иако се трудимо да обезбедимо тачност, молимо вас да имате у виду да аутоматски преводи могу садржати грешке или нетачности. Оригинални документ на његовом изворном језику треба сматрати меродавним извором. За критичне информације препоручује се професионални превод од стране људског преводиоца. Не преузимамо одговорност за било каква погрешна тумачења или неспоразуме који могу настати услед коришћења овог превода.
\ No newline at end of file
diff --git a/translations/sr/3-terrarium/2-intro-to-css/assignment.md b/translations/sr/3-terrarium/2-intro-to-css/assignment.md
new file mode 100644
index 00000000..e73cf3b5
--- /dev/null
+++ b/translations/sr/3-terrarium/2-intro-to-css/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "9d4d75af51aaccfe9af778f792c62919",
+  "translation_date": "2025-08-27T22:06:09+00:00",
+  "source_file": "3-terrarium/2-intro-to-css/assignment.md",
+  "language_code": "sr"
+}
+-->
+# CSS Рефакторисање
+
+## Упутства
+
+Прерадите изглед тераријума користећи или Flexbox или CSS Grid, и направите снимке екрана како бисте показали да сте га тестирали у неколико прегледача. Можда ћете морати да измените ознаке, па направите нову верзију апликације са уметничким елементима на месту за ваш рефактор. Не брините о томе да елементи буду превлачни; за сада само рефакторишите HTML и CSS.
+
+## Рубрика
+
+| Критеријум | Изузетно                                                         | Задовољавајуће                | Потребна побољшања                   |
+| ---------- | ---------------------------------------------------------------- | ----------------------------- | ------------------------------------ |
+|            | Потпуно прерађен тераријум користећи Flexbox или CSS Grid         | Прерађено неколико елемената  | Није уопште прерађен тераријум       |
+
+---
+
+**Одрицање од одговорности**:  
+Овај документ је преведен коришћењем услуге за превођење помоћу вештачке интелигенције [Co-op Translator](https://github.com/Azure/co-op-translator). Иако се трудимо да обезбедимо тачност, молимо вас да имате у виду да аутоматски преводи могу садржати грешке или нетачности. Оригинални документ на његовом изворном језику треба сматрати меродавним извором. За критичне информације препоручује се професионални превод од стране људи. Не преузимамо одговорност за било каква погрешна тумачења или неспоразуме који могу настати услед коришћења овог превода.
\ No newline at end of file
diff --git a/translations/sr/3-terrarium/3-intro-to-DOM-and-closures/README.md b/translations/sr/3-terrarium/3-intro-to-DOM-and-closures/README.md
new file mode 100644
index 00000000..fdafc97b
--- /dev/null
+++ b/translations/sr/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:03:24+00:00",
+  "source_file": "3-terrarium/3-intro-to-DOM-and-closures/README.md",
+  "language_code": "sr"
+}
+-->
+# Пројекат Тераријум, део 3: Манипулација DOM-ом и затварање
+
+![DOM и затварање](../../../../translated_images/webdev101-js.10280393044d7eaaec7e847574946add7ddae6be2b2194567d848b61d849334a.sr.png)
+> Скетч од [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Квиз пре предавања
+
+[Квиз пре предавања](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/19)
+
+### Увод
+
+Манипулација DOM-ом, или "Document Object Model", је кључни аспект веб развоја. Према [MDN](https://developer.mozilla.org/docs/Web/API/Document_Object_Model/Introduction), "Document Object Model (DOM) је представљање података објеката који чине структуру и садржај документа на вебу." Изазови око манипулације DOM-ом на вебу често су били разлог за коришћење JavaScript оквира уместо чистог JavaScript-а за управљање DOM-ом, али ми ћемо се снаћи сами!
+
+Поред тога, ова лекција ће представити идеју [JavaScript затварања](https://developer.mozilla.org/docs/Web/JavaScript/Closures), које можете замислити као функцију која је затворена унутар друге функције, тако да унутрашња функција има приступ опсегу спољашње функције.
+
+> JavaScript затварања су обимна и сложена тема. Ова лекција се бави најосновнијом идејом да у коду овог тераријума можете пронаћи затварање: унутрашњу функцију и спољашњу функцију конструисане на начин који омогућава унутрашњој функцији приступ опсегу спољашње функције. За много више информација о томе како ово функционише, посетите [опсежну документацију](https://developer.mozilla.org/docs/Web/JavaScript/Closures).
+
+Користићемо затварање за манипулацију DOM-ом.
+
+Замислите DOM као дрво које представља све начине на које се документ веб странице може манипулисати. Разни API-ји (интерфејси за програмирање апликација) су написани тако да програмери, користећи свој омиљени програмски језик, могу приступити DOM-у и уређивати, мењати, реорганизовати и на друге начине управљати њиме.
+
+![Представљање DOM дрвета](../../../../translated_images/dom-tree.7daf0e763cbbba9273f9a66fe04c98276d7d23932309b195cb273a9cf1819b42.sr.png)
+
+> Представљање DOM-а и HTML ознака које га референцирају. Од [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
+
+У овој лекцији завршићемо наш интерактивни пројекат тераријума креирањем JavaScript-а који ће омогућити кориснику да манипулише биљкама на страници.
+
+### Предуслов
+
+Требало би да имате HTML и CSS за ваш тераријум направљен. До краја ове лекције моћи ћете да премештате биљке унутар и ван тераријума тако што ћете их превлачити.
+
+### Задатак
+
+У вашем фолдеру за тераријум, креирајте нову датотеку под називом `script.js`. Увезите ту датотеку у `<head>` секцију:
+
+```html
+	<script src="./script.js" defer></script>
+```
+
+> Напомена: користите `defer` приликом увоза спољашње JavaScript датотеке у HTML датотеку како би се JavaScript извршио тек након што се HTML датотека у потпуности учита. Такође можете користити атрибут `async`, који омогућава скрипти да се извршава док се HTML датотека парсира, али у нашем случају је важно да HTML елементи буду у потпуности доступни за превлачење пре него што дозволимо извршавање скрипте за превлачење.
+---
+
+## DOM елементи
+
+Прво што треба да урадите је да креирате референце на елементе које желите да манипулишете у DOM-у. У нашем случају, то су 14 биљака које тренутно чекају у бочним тракама.
+
+### Задатак
+
+```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'));
+```
+
+Шта се овде дешава? Референцирате документ и претражујете његов DOM да бисте пронашли елемент са одређеним Id-јем. Сетите се у првој лекцији о HTML-у да сте дали индивидуалне Id-јеве свакој слици биљке (`id="plant1"`)? Сада ћете искористити тај напор. Након идентификовања сваког елемента, прослеђујете тај елемент функцији под називом `dragElement` коју ћете ускоро направити. Тако је елемент у HTML-у сада омогућен за превлачење, или ће бити ускоро.
+
+✅ Зашто реферишемо елементе по Id-ју? Зашто не по њиховој CSS класи? Можете се вратити на претходну лекцију о CSS-у да бисте одговорили на ово питање.
+
+---
+
+## Затварање
+
+Сада сте спремни да креирате затварање `dragElement`, које је спољашња функција која затвара унутрашњу функцију или функције (у нашем случају, имаћемо три).
+
+Затварања су корисна када једна или више функција требају приступити опсегу спољашње функције. Ево примера:
+
+```javascript
+function displayCandy(){
+	let candy = ['jellybeans'];
+	function addCandy(candyType) {
+		candy.push(candyType)
+	}
+	addCandy('gumdrops');
+}
+displayCandy();
+console.log(candy)
+```
+
+У овом примеру, функција `displayCandy` окружује функцију која додаје нову врсту слаткиша у низ који већ постоји у функцији. Ако бисте покренули овај код, низ `candy` би био недефинисан, јер је локална променљива (локална за затварање).
+
+✅ Како можете учинити да низ `candy` буде доступан? Покушајте да га преместите ван затварања. На тај начин, низ постаје глобалан, уместо да остане доступан само локалном опсегу затварања.
+
+### Задатак
+
+Испод декларација елемената у `script.js`, креирајте функцију:
+
+```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` добија свој објекат `terrariumElement` из декларација на врху скрипте. Затим постављате неке локалне позиције на `0` за објекат који је прослеђен функцији. Ово су локалне променљиве које ће бити манипулисане за сваки елемент док додајете функционалност превлачења и испуштања унутар затварања за сваки елемент. Тераријум ће бити попуњен овим превученим елементима, тако да апликација треба да прати где су постављени.
+
+Поред тога, `terrariumElement` који је прослеђен овој функцији добија догађај `pointerdown`, који је део [web API-ја](https://developer.mozilla.org/docs/Web/API) дизајнираних за помоћ у управљању DOM-ом. `onpointerdown` се активира када се притисне дугме, или у нашем случају, када се додирне елемент који се може превлачити. Овај обрађивач догађаја ради на [веб и мобилним претраживачима](https://caniuse.com/?search=onpointerdown), са неколико изузетака.
+
+✅ [Обрађивач догађаја `onclick`](https://developer.mozilla.org/docs/Web/API/GlobalEventHandlers/onclick) има много већу подршку међу претраживачима; зашто га не бисте користили овде? Размислите о тачној врсти интеракције са екраном коју покушавате да креирате овде.
+
+---
+
+## Функција Pointerdrag
+
+`terrariumElement` је спреман да се превлачи; када се активира догађај `onpointerdown`, позива се функција `pointerDrag`. Додајте ту функцију одмах испод ове линије: `terrariumElement.onpointerdown = pointerDrag;`:
+
+### Задатак 
+
+```javascript
+function pointerDrag(e) {
+	e.preventDefault();
+	console.log(e);
+	pos3 = e.clientX;
+	pos4 = e.clientY;
+}
+```
+
+Неколико ствари се дешава. Прво, спречавате подразумеване догађаје који се обично дешавају на `pointerdown` тако што користите `e.preventDefault();`. На овај начин имате већу контролу над понашањем интерфејса.
+
+> Вратите се на ову линију када потпуно изградите датотеку скрипте и пробајте без `e.preventDefault()` - шта се дешава?
+
+Друго, отворите `index.html` у прозору претраживача и инспектирајте интерфејс. Када кликнете на биљку, можете видети како се догађај 'e' хвата. Истражите догађај да видите колико информација се прикупља једним догађајем `pointerdown`!  
+
+Затим, обратите пажњу на то како се локалне променљиве `pos3` и `pos4` постављају на e.clientX. Можете пронаћи вредности `e` у панелу за инспекцију. Ове вредности хватају x и y координате биљке у тренутку када кликнете на њу или је додирнете. Требаће вам прецизна контрола над понашањем биљака док их кликате и превлачите, па пратите њихове координате.
+
+✅ Да ли постаје јасније зашто је цела апликација изграђена са једним великим затварањем? Ако није, како бисте одржавали опсег за сваку од 14 биљака које се могу превлачити?
+
+Завршите почетну функцију додавањем још две манипулације догађајима показивача испод `pos4 = e.clientY`:
+
+```html
+document.onpointermove = elementDrag;
+document.onpointerup = stopElementDrag;
+```
+Сада указујете да желите да биљка буде превучена заједно са показивачем док га померате, и да се гест превлачења заустави када одселектујете биљку. `onpointermove` и `onpointerup` су део истог API-ја као и `onpointerdown`. Интерфејс ће сада бацати грешке јер још нисте дефинисали функције `elementDrag` и `stopElementDrag`, па их следеће изградите.
+
+## Функције elementDrag и stopElementDrag
+
+Завршићете своје затварање додавањем још две унутрашње функције које ће управљати оним што се дешава када превлачите биљку и када престанете да је превлачите. Понашање које желите је да можете превући било коју биљку у било ком тренутку и поставити је било где на екрану. Овај интерфејс је прилично неограничен (на пример, нема зоне за испуштање) како би вам омогућио да дизајнирате свој тераријум тачно онако како желите додавањем, уклањањем и репозиционирањем биљака.
+
+### Задатак
+
+Додајте функцију `elementDrag` одмах након затварајуће витичасте заграде функције `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';
+}
+```
+У овој функцији, доста уређујете почетне позиције 1-4 које сте поставили као локалне променљиве у спољашњој функцији. Шта се овде дешава?
+
+Док превлачите, поново додељујете `pos1` тако што га постављате да буде једнак `pos3` (који сте раније поставили као `e.clientX`) минус тренутна вредност `e.clientX`. Сличну операцију радите за `pos2`. Затим, поново постављате `pos3` и `pos4` на нове X и Y координате елемента. Можете посматрати ове промене у конзоли док превлачите. Затим, манипулишете стилом CSS-а биљке да бисте поставили њену нову позицију на основу нових позиција `pos1` и `pos2`, рачунајући горње и леве X и Y координате биљке на основу поређења њеног офсета са овим новим позицијама.
+
+> `offsetTop` и `offsetLeft` су CSS својства која постављају позицију елемента на основу позиције његовог родитеља; његов родитељ може бити било који елемент који није позициониран као `static`. 
+
+Све ове прерачунавања позиционирања омогућавају вам да фино подесите понашање тераријума и његових биљака.
+
+### Задатак 
+
+Последњи задатак за завршетак интерфејса је додавање функције `stopElementDrag` након затварајуће витичасте заграде функције `elementDrag`:
+
+```javascript
+function stopElementDrag() {
+	document.onpointerup = null;
+	document.onpointermove = null;
+}
+```
+
+Ова мала функција ресетује догађаје `onpointerup` и `onpointermove` тако да можете или поново започети прогрес ваше биљке тако што ћете је поново почети превлачити, или почети превлачити нову биљку.
+
+✅ Шта се дешава ако не поставите ове догађаје на null?
+
+Сада сте завршили свој пројекат!
+
+🥇Честитамо! Завршили сте свој прелепи тераријум. ![завршени тераријум](../../../../translated_images/terrarium-final.0920f16e87c13a84cd2b553a5af9a3ad1cffbd41fbf8ce715d9e9c43809a5e2c.sr.png)
+
+---
+
+## 🚀Изазов
+
+Додајте нови обрађивач догађаја вашем затварању да урадите нешто више са биљкама; на пример, двоструким кликом на биљку доведите је у први план. Будите креативни!
+
+## Квиз после предавања
+
+[Квиз после предавања](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/20)
+
+## Преглед и самостално учење
+
+Иако превлачење елемената по екрану изгледа тривијално, постоји много начина да се то уради и много замки, у зависности од ефекта који желите. У ствари, постоји читав [API за превлачење и испуштање](https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_API) који можете испробати. Нисмо га користили у овом модулу јер је ефекат који смо желели био нешто другачији, али испробајте овај API на свом пројекту и видите шта можете постићи.
+
+Пронађите више информација о догађајима показивача у [W3C документацији](https://www.w3.org/TR/pointerevents1/) и на [MDN веб документацији](https://developer.mozilla.org/docs/Web/API/Pointer_events).
+
+Увек проверавајте могућности претраживача користећи [CanIUse.com](https://caniuse.com/).
+
+## Задатак
+
+[Радите мало више са DOM-ом](assignment.md)
+
+---
+
+**Одрицање од одговорности**:  
+Овај документ је преведен коришћењем услуге за превођење помоћу вештачке интелигенције [Co-op Translator](https://github.com/Azure/co-op-translator). Иако се трудимо да обезбедимо тачност, молимо вас да имате у виду да аутоматизовани преводи могу садржати грешке или нетачности. Оригинални документ на његовом изворном језику треба сматрати меродавним извором. За критичне информације препоручује се професионални превод од стране људи. Не преузимамо одговорност за било каква погрешна тумачења или неспоразуме који могу настати услед коришћења овог превода.
\ No newline at end of file
diff --git a/translations/sr/3-terrarium/3-intro-to-DOM-and-closures/assignment.md b/translations/sr/3-terrarium/3-intro-to-DOM-and-closures/assignment.md
new file mode 100644
index 00000000..1261fb6a
--- /dev/null
+++ b/translations/sr/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:04:15+00:00",
+  "source_file": "3-terrarium/3-intro-to-DOM-and-closures/assignment.md",
+  "language_code": "sr"
+}
+-->
+# Радите мало више са DOM-ом
+
+## Упутства
+
+Истражите DOM мало више тако што ћете 'усвојити' један DOM елемент. Посетите MDN-ову [листу DOM интерфејса](https://developer.mozilla.org/docs/Web/API/Document_Object_Model) и изаберите један. Пронађите пример његове употребе на неком веб сајту и напишите објашњење како се користи.
+
+## Рубрика
+
+| Критеријум | Изузетно                                     | Довољно                                         | Потребно побољшање       |
+| ---------- | ------------------------------------------- | ----------------------------------------------- | ----------------------- |
+|            | Написан је параграф са примером             | Написан је параграф без примера                 | Параграф није написан   |
+
+---
+
+**Одрицање од одговорности**:  
+Овај документ је преведен коришћењем услуге за превођење помоћу вештачке интелигенције [Co-op Translator](https://github.com/Azure/co-op-translator). Иако настојимо да обезбедимо тачност, молимо вас да имате у виду да аутоматски преводи могу садржати грешке или нетачности. Оригинални документ на његовом изворном језику треба сматрати ауторитативним извором. За критичне информације препоручује се професионални превод од стране људи. Не преузимамо одговорност за било каква погрешна тумачења или неспоразуме који могу настати услед коришћења овог превода.
\ No newline at end of file
diff --git a/translations/sr/3-terrarium/README.md b/translations/sr/3-terrarium/README.md
new file mode 100644
index 00000000..a89bd1bc
--- /dev/null
+++ b/translations/sr/3-terrarium/README.md
@@ -0,0 +1,45 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "7965cd2bc5dc92ad888dc4c6ab2ab70a",
+  "translation_date": "2025-08-27T21:59:34+00:00",
+  "source_file": "3-terrarium/README.md",
+  "language_code": "sr"
+}
+-->
+# Моја Тераријум: Пројекат за учење о HTML-у, CSS-у и манипулацији DOM-ом помоћу JavaScript-а 🌵🌱
+
+Мала вежба са превлачењем и пуштањем. Уз мало HTML-а, JS-а и CSS-а, моћи ћете да направите веб интерфејс, стилизујете га и чак додате више интеракција по вашем избору.
+
+![мој тераријум](../../../translated_images/screenshot_gray.0c796099a1f9f25e40aa55ead81f268434c00af30d7092490759945eda63067d.sr.png)
+
+# Лекције
+
+1. [Увод у HTML](./1-intro-to-html/README.md)  
+2. [Увод у CSS](./2-intro-to-css/README.md)  
+3. [Увод у DOM и затварања у JS-у](./3-intro-to-DOM-and-closures/README.md)  
+
+## Захвалнице
+
+Написано са ♥️ од стране [Џен Лупер](https://www.twitter.com/jenlooper)  
+
+Тераријум креиран помоћу CSS-а инспирисан је стакленом теглом Јакуба Мандре на [codepen](https://codepen.io/Rotarepmi/pen/rjpNZY).  
+
+Илустрације су ручно нацртане од стране [Џен Лупер](http://jenlooper.com) уз помоћ Procreate-а.  
+
+## Објавите свој Тераријум
+
+Можете објавити свој тераријум на вебу користећи Azure Static Web Apps.  
+
+1. Форкујте овај репозиторијум  
+
+2. Притисните ово дугме  
+
+[![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. Прођите кроз чаробњака за креирање апликације. Уверите се да сте поставили корен апликације на `/solution` или на корен ваше базе кода. У овој апликацији нема API-ја, тако да не морате да бринете о томе. Гитхаб фасцикла ће бити креирана у вашем форкованом репозиторијуму која ће помоћи Azure Static Web Apps-у да изгради и објави вашу апликацију на новој URL адреси.  
+
+---
+
+**Одрицање од одговорности**:  
+Овај документ је преведен коришћењем услуге за превођење помоћу вештачке интелигенције [Co-op Translator](https://github.com/Azure/co-op-translator). Иако се трудимо да обезбедимо тачност, молимо вас да имате у виду да аутоматски преводи могу садржати грешке или нетачности. Оригинални документ на његовом изворном језику треба сматрати ауторитативним извором. За критичне информације препоручује се професионални превод од стране људи. Не преузимамо одговорност за било каква погрешна тумачења или неспоразуме који могу настати услед коришћења овог превода.
\ No newline at end of file
diff --git a/translations/sr/3-terrarium/solution/README.md b/translations/sr/3-terrarium/solution/README.md
new file mode 100644
index 00000000..c6f65f18
--- /dev/null
+++ b/translations/sr/3-terrarium/solution/README.md
@@ -0,0 +1,39 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "6329fbe8bd936068debd78cca6f09c0a",
+  "translation_date": "2025-08-27T22:06:35+00:00",
+  "source_file": "3-terrarium/solution/README.md",
+  "language_code": "sr"
+}
+-->
+# Моја тераријум: Пројекат за учење о HTML-у, CSS-у и манипулацији DOM-ом уз помоћ JavaScript-а 🌵🌱
+
+Мала вежба са превлачењем и пуштањем елемената. Уз мало HTML-а, JS-а и CSS-а, можете направити веб интерфејс, стилизовати га и додати интеракцију.
+
+![мој тераријум](../../../../translated_images/screenshot_gray.0c796099a1f9f25e40aa55ead81f268434c00af30d7092490759945eda63067d.sr.png)
+
+## Кредити
+
+Написано са ♥️ од стране [Jen Looper](https://www.twitter.com/jenlooper)
+
+Тераријум креиран уз помоћ CSS-а инспирисан је стакленом теглом Јакуба Мандре [codepen](https://codepen.io/Rotarepmi/pen/rjpNZY).
+
+Илустрације су ручно нацртане од стране [Jen Looper](http://jenlooper.com) уз помоћ Procreate-а.
+
+## Објавите свој тераријум
+
+Можете објавити, или поставити свој тераријум на веб уз помоћ Azure Static Web Apps.
+
+1. Форкујте овај репозиторијум
+
+2. Притисните ово дугме
+
+[![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. Прођите кроз чаробњака за креирање апликације. Уверите се да сте поставили корен апликације на `/solution` или на корен ваше базе кода. У овој апликацији нема API-ја, тако да не морате бринути о додавању истог. `.github` фасцикла ће бити креирана у вашем форкованом репозиторијуму која ће помоћи Azure Static Web Apps сервису за изградњу и објављивање ваше апликације на нову URL адресу.
+
+---
+
+**Одрицање од одговорности**:  
+Овај документ је преведен коришћењем услуге за превођење помоћу вештачке интелигенције [Co-op Translator](https://github.com/Azure/co-op-translator). Иако се трудимо да превод буде тачан, молимо вас да имате у виду да аутоматизовани преводи могу садржати грешке или нетачности. Оригинални документ на његовом изворном језику треба сматрати меродавним извором. За критичне информације препоручује се професионални превод од стране људи. Не преузимамо одговорност за било каква погрешна тумачења или неспоразуме који могу настати услед коришћења овог превода.
\ No newline at end of file
diff --git a/translations/sr/4-typing-game/README.md b/translations/sr/4-typing-game/README.md
new file mode 100644
index 00000000..843474ee
--- /dev/null
+++ b/translations/sr/4-typing-game/README.md
@@ -0,0 +1,44 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "957547b822c40042e07d591c4fbfde4f",
+  "translation_date": "2025-08-27T23:07:46+00:00",
+  "source_file": "4-typing-game/README.md",
+  "language_code": "sr"
+}
+-->
+# Програмски модел заснован на догађајима - Направите игру куцања
+
+## Увод
+
+Куцање је једна од најпотцењенијих вештина програмера. Способност да брзо пренесете мисли из главе у уређивач омогућава слободан ток креативности. Један од најбољих начина да научите је кроз игру!
+
+> Хајде да направимо игру куцања!
+
+Користићете своје вештине у JavaScript-у, HTML-у и CSS-у које сте до сада стекли да направите игру куцања. Игра ће играчу приказати насумични цитат (користимо цитате [Шерлока Холмса](https://en.wikipedia.org/wiki/Sherlock_Holmes)) и мерити колико је времена играчу потребно да га тачно откуца. Користићете своје вештине у JavaScript-у, HTML-у и CSS-у које сте до сада стекли да направите игру куцања.
+
+![демо](../../../4-typing-game/images/demo.gif)
+
+## Предуслови
+
+Ова лекција претпоставља да сте упознати са следећим концептима:
+
+- Креирање текстуалних уноса и контролних дугмади
+- CSS и постављање стилова помоћу класа
+- Основе JavaScript-а
+  - Креирање низа
+  - Креирање насумичног броја
+  - Добијање тренутног времена
+
+## Лекција
+
+[Креирање игре куцања коришћењем програмирања заснованог на догађајима](./typing-game/README.md)
+
+## Захвалност
+
+Написано са ♥️ од стране [Кристофера Харисона](http://www.twitter.com/geektrainer)
+
+---
+
+**Одрицање од одговорности**:  
+Овај документ је преведен коришћењем услуге за превођење помоћу вештачке интелигенције [Co-op Translator](https://github.com/Azure/co-op-translator). Иако се трудимо да превод буде тачан, молимо вас да имате у виду да аутоматизовани преводи могу садржати грешке или нетачности. Оригинални документ на његовом изворном језику треба сматрати меродавним извором. За критичне информације препоручује се професионални превод од стране људи. Не преузимамо одговорност за било каква погрешна тумачења или неспоразуме који могу настати услед коришћења овог превода.
\ No newline at end of file
diff --git a/translations/sr/4-typing-game/solution/README.md b/translations/sr/4-typing-game/solution/README.md
new file mode 100644
index 00000000..2dfb89c6
--- /dev/null
+++ b/translations/sr/4-typing-game/solution/README.md
@@ -0,0 +1,15 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "068cbb9b3c10a96d503f6cdd6c9ace8c",
+  "translation_date": "2025-08-27T23:08:01+00:00",
+  "source_file": "4-typing-game/solution/README.md",
+  "language_code": "sr"
+}
+-->
+Ово је привремени текст, намерно остављен празан
+
+---
+
+**Одрицање од одговорности**:  
+Овај документ је преведен коришћењем услуге за превођење помоћу вештачке интелигенције [Co-op Translator](https://github.com/Azure/co-op-translator). Иако се трудимо да обезбедимо тачност, молимо вас да имате у виду да аутоматски преводи могу садржати грешке или нетачности. Оригинални документ на његовом изворном језику треба сматрати ауторитативним извором. За критичне информације препоручује се професионални превод од стране људи. Не преузимамо одговорност за било каква погрешна тумачења или неспоразуме који могу настати услед коришћења овог превода.
\ No newline at end of file
diff --git a/translations/sr/4-typing-game/typing-game/README.md b/translations/sr/4-typing-game/typing-game/README.md
new file mode 100644
index 00000000..68df818b
--- /dev/null
+++ b/translations/sr/4-typing-game/typing-game/README.md
@@ -0,0 +1,351 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "e982871b8388c59c22a41b73b5fca70f",
+  "translation_date": "2025-08-27T23:09:36+00:00",
+  "source_file": "4-typing-game/typing-game/README.md",
+  "language_code": "sr"
+}
+-->
+# Прављење игре користећи догађаје
+
+## Квиз пре предавања
+
+[Квиз пре предавања](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/21)
+
+## Програмирање засновано на догађајима
+
+Када правимо апликацију за веб прегледач, обезбеђујемо графички кориснички интерфејс (GUI) који корисник користи за интеракцију са оним што смо направили. Најчешћи начин интеракције са прегледачем је кликом и куцањем у различитим елементима. Изазов са којим се суочавамо као програмери је то што не знамо када ће корисник извршити те операције!
+
+[Програмирање засновано на догађајима](https://en.wikipedia.org/wiki/Event-driven_programming) је назив за тип програмирања који нам је потребан да бисмо направили наш GUI. Ако мало разложимо овај израз, видимо да је кључна реч овде **догађај**. [Догађај](https://www.merriam-webster.com/dictionary/event), према Merriam-Webster речнику, дефинисан је као "нешто што се дешава". Ово савршено описује нашу ситуацију. Знамо да ће се нешто догодити за шта желимо да извршимо неки код као одговор, али не знамо када ће се то десити.
+
+Начин на који означавамо део кода који желимо да извршимо је креирањем функције. Када размишљамо о [процедуралном програмирању](https://en.wikipedia.org/wiki/Procedural_programming), функције се позивају одређеним редоследом. Исто ће важити и за програмирање засновано на догађајима. Разлика је у томе **како** ће функције бити позване.
+
+Да бисмо обрадили догађаје (кликове на дугмад, куцање итд.), региструјемо **слушаоце догађаја**. Слушалац догађаја је функција која слуша да ли се догађај дешава и извршава се као одговор. Слушаоци догађаја могу ажурирати UI, позивати сервер или радити било шта друго што је потребно као одговор на акцију корисника. Додајемо слушаоца догађаја користећи [addEventListener](https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener) и пружајући функцију за извршење.
+
+> **NOTE:** Вреди нагласити да постоји много начина за креирање слушалаца догађаја. Можете користити анонимне функције или креирати именоване. Можете користити различите пречице, као што је постављање `click` својства или коришћење `addEventListener`. У нашем задатку ћемо се фокусирати на `addEventListener` и анонимне функције, јер је то вероватно најчешћа техника коју веб програмери користе. Такође је најфлексибилнија, јер `addEventListener` ради за све догађаје, а име догађаја може бити обезбеђено као параметар.
+
+### Уобичајени догађаји
+
+Постоје [десетине догађаја](https://developer.mozilla.org/docs/Web/Events) које можете слушати приликом креирања апликације. У суштини, све што корисник ради на страници покреће догађај, што вам даје много моћи да осигурате да добије искуство које желите. Срећом, обично ће вам требати само неколико догађаја. Ево неких уобичајених (укључујући два која ћемо користити приликом креирања наше игре):
+
+- [click](https://developer.mozilla.org/docs/Web/API/Element/click_event): Корисник је кликнуо на нешто, обично дугме или хиперлинк
+- [contextmenu](https://developer.mozilla.org/docs/Web/API/Element/contextmenu_event): Корисник је кликнуо десним тастером миша
+- [select](https://developer.mozilla.org/docs/Web/API/Element/select_event): Корисник је означио неки текст
+- [input](https://developer.mozilla.org/docs/Web/API/Element/input_event): Корисник је унео неки текст
+
+## Прављење игре
+
+Направићемо игру да истражимо како догађаји функционишу у JavaScript-у. Наша игра ће тестирати вештину куцања играча, што је једна од најпотцењенијих вештина коју сви програмери треба да имају. Сви бисмо требали да вежбамо куцање! Општи ток игре изгледаће овако:
+
+- Играч кликне на дугме за почетак и добија цитат за куцање
+- Играч куца цитат што брже може у текстуалном пољу
+  - Како заврши сваку реч, следећа се истиче
+  - Ако играч направи грешку, текстуално поље се обележава црвеном бојом
+  - Када играч заврши цитат, приказује се порука о успеху са протеклим временом
+
+Хајде да направимо нашу игру и научимо о догађајима!
+
+### Структура фајлова
+
+Биће нам потребна три фајла: **index.html**, **script.js** и **style.css**. Хајде да их поставимо како бисмо себи олакшали посао.
+
+- Направите нови фолдер за ваш рад отварањем конзоле или терминала и издавањем следеће команде:
+
+```bash
+# Linux or macOS
+mkdir typing-game && cd typing-game
+
+# Windows
+md typing-game && cd typing-game
+```
+
+- Отворите Visual Studio Code
+
+```bash
+code .
+```
+
+- Додајте три фајла у фолдер у Visual Studio Code-у са следећим именима:
+  - index.html
+  - script.js
+  - style.css
+
+## Креирање корисничког интерфејса
+
+Ако истражимо захтеве, знамо да ће нам бити потребно неколико елемената на нашој HTML страници. Ово је као рецепт, где нам требају неки састојци:
+
+- Место за приказ цитата који корисник треба да куца
+- Место за приказ порука, као што је порука о успеху
+- Текстуално поље за куцање
+- Дугме за почетак
+
+Сваки од ових елемената ће требати ID-еве како бисмо могли да радимо са њима у нашем JavaScript-у. Такође ћемо додати референце на CSS и JavaScript фајлове које ћемо креирати.
+
+Направите нови фајл под именом **index.html**. Додајте следећи 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>
+```
+
+### Покретање апликације
+
+Увек је најбоље развијати итеративно како бисмо видели како ствари изгледају. Хајде да покренемо нашу апликацију. Постоји одличан додатак за Visual Studio Code под називом [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) који ће локално хостовати вашу апликацију и освежити прегледач сваки пут када сачувате.
+
+- Инсталирајте [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) пратећи линк и кликом на **Install**
+  - Прегледач ће вас упитати да отворите Visual Studio Code, а затим ће вас Visual Studio Code упитати да извршите инсталацију
+  - Поново покрените Visual Studio Code ако вам то буде предложено
+- Када је инсталиран, у Visual Studio Code-у притисните Ctrl-Shift-P (или Cmd-Shift-P) да отворите командну палету
+- Укуцајте **Live Server: Open with Live Server**
+  - Live Server ће почети да хостује вашу апликацију
+- Отворите прегледач и идите на **https://localhost:5500**
+- Сада би требало да видите страницу коју сте направили!
+
+Хајде да додамо функционалност.
+
+## Додавање CSS-а
+
+Са нашим HTML-ом креираним, хајде да додамо CSS за основно стилизовање. Требаће нам да истакнемо реч коју играч треба да куца и да обојимо текстуално поље ако оно што је укуцао није тачно. Ово ћемо урадити са две класе.
+
+Направите нови фајл под именом **style.css** и додајте следећи синтакс:
+
+```css
+/* inside style.css */
+.highlight {
+  background-color: yellow;
+}
+
+.error {
+  background-color: lightcoral;
+  border: red;
+}
+```
+
+✅ Када је реч о CSS-у, можете распоредити своју страницу како год желите. Одвојите мало времена и учините страницу привлачнијом:
+
+- Изаберите другачији фонт
+- Обојите заглавља
+- Промените величину елемената
+
+## JavaScript
+
+Са нашим UI-јем креираним, време је да се фокусирамо на JavaScript који ће обезбедити логику. Разложићемо ово на неколико корака:
+
+- [Креирање константи](../../../../4-typing-game/typing-game)
+- [Слушалац догађаја за почетак игре](../../../../4-typing-game/typing-game)
+- [Слушалац догађаја за куцање](../../../../4-typing-game/typing-game)
+
+Али прво, направите нови фајл под именом **script.js**.
+
+### Додавање константи
+
+Биће нам потребно неколико ставки да бисмо себи олакшали програмирање. Опет, слично рецепту, ево шта ће нам бити потребно:
+
+- Низ са списком свих цитата
+- Празан низ за чување свих речи за тренутни цитат
+- Простор за чување индекса речи коју играч тренутно куца
+- Време када је играч кликнуо на почетак
+
+Такође ћемо желети референце на UI елементе:
+
+- Текстуално поље (**typed-value**)
+- Приказ цитата (**quote**)
+- Порука (**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');
+```
+
+✅ Додајте још цитата у вашу игру
+
+> **NOTE:** Елементе можемо добити кад год желимо у коду користећи `document.getElementById`. Због чињенице да ћемо се редовно позивати на ове елементе, избегаваћемо грешке са стринг литералима користећи константе. Фрејмворци као што су [Vue.js](https://vuejs.org/) или [React](https://reactjs.org/) могу вам помоћи да боље управљате централизацијом вашег кода.
+
+Одвојите минут да погледате видео о коришћењу `const`, `let` и `var`
+
+[![Типови променљивих](https://img.youtube.com/vi/JNIXfGiDWM8/0.jpg)](https://youtube.com/watch?v=JNIXfGiDWM8 "Типови променљивих")
+
+> 🎥 Кликните на слику изнад за видео о променљивима.
+
+### Додавање логике за почетак
+
+Да би започео игру, играч ће кликнути на дугме за почетак. Наравно, не знамо када ће кликнути на дугме за почетак. Овде долази у игру [слушалац догађаја](https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener). Слушалац догађаја ће нам омогућити да слушамо да ли се нешто дешава (догађај) и извршавамо код као одговор. У нашем случају, желимо да извршимо код када корисник кликне на дугме за почетак.
+
+Када корисник кликне на **start**, потребно је да изаберемо цитат, подесимо кориснички интерфејс и подесимо праћење тренутне речи и времена. Испод је JavaScript који треба да додате; објашњавамо га одмах након блока кода.
+
+```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();
+});
+```
+
+Хајде да разложимо код!
+
+- Подешавање праћења речи
+  - Коришћење [Math.floor](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Math/floor) и [Math.random](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Math/random) нам омогућава да насумично изаберемо цитат из низа `quotes`
+  - Конвертујемо `quote` у низ `words` како бисмо могли да пратимо реч коју играч тренутно куца
+  - `wordIndex` се поставља на 0, јер играч почиње са првом речју
+- Подешавање UI-ја
+  - Креирамо низ `spanWords`, који садржи сваку реч унутар `span` елемента
+    - Ово нам омогућава да истакнемо реч на приказу
+  - `join` низ да направимо стринг који можемо користити за ажурирање `innerHTML` на `quoteElement`
+    - Ово ће приказати цитат играчу
+  - Постављамо `className` првог `span` елемента на `highlight` да га истакнемо жутом бојом
+  - Чистимо `messageElement` постављањем `innerText` на `''`
+- Подешавање текстуалног поља
+  - Чистимо тренутни `value` на `typedValueElement`
+  - Постављамо `focus` на `typedValueElement`
+- Покрећемо тајмер позивањем `getTime`
+
+### Додавање логике за куцање
+
+Како играч куца, подиже се `input` догађај. Овај слушалац догађаја ће проверити да ли играч правилно куца реч и обрадити тренутни статус игре. Враћајући се на **script.js**, додајте следећи код на крај. Разложићемо га након тога.
+
+```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';
+  }
+});
+```
+
+Хајде да разложимо код! Почињемо тако што узимамо тренутну реч и вредност коју је играч до сада укуцао. Затим имамо логику водопада, где проверавамо да ли је цитат завршен, реч завршена, реч тачна или (на крају), да ли постоји грешка.
+
+- Цитат је завршен, што је означено тиме да је `typedValue` једнако `currentWord`, а `wordIndex` једнак један мање од `length` низа `words`
+  - Израчунавамо `elapsedTime` одузимањем `startTime` од тренутног времена
+  - Делимо `elapsedTime` са 1,000 да бисмо конвертовали из милисекунди у секунде
+  - Приказујемо поруку о успеху
+- Реч је завршена, што је означено тиме да `typedValue` завршава са размаком (крај речи) и да је `typedValue` једнако `currentWord`
+  - Постављамо `value` на `typedElement` на `''` да омогућимо куцање следеће речи
+  - Инкрементирамо `wordIndex` да пређемо на следећу реч
+  - Петљамо кроз све `childNodes` `quoteElement` да поставимо `className` на `''` да се врати на подразумевани приказ
+  - Постављамо `className` тренутне речи на `highlight` да је означимо као следећу реч за куцање
+- Реч је тренутно правилно укуцана (али није завршена), што је означено тиме да `currentWord` почиње са `typedValue`
+  - Осигуравамо да је `typedValueElement` приказан као подразумеван тако што чистимо `className`
+- Ако смо стигли овде, имамо грешку
+  - Постављамо `className` на `typedValueElement` на `error`
+
+## Тестирање апликације
+
+Стигли сте до краја! Последњи корак је да осигурате да наша апликација ради. Испробајте је! Не брините ако има грешака; **сви програмери** имају грешке. Испитајте поруке и дебагујте по потреби.
+
+Кликните на **start** и почните да куцате! Требало би да изгледа мало као анимација коју смо видели раније.
+
+![Анимација игре у акцији](../../../../4-typing-game/images/demo.gif)
+
+---
+
+## 🚀 Изазов
+
+Додајте више функционалности
+
+- Онемогућите слушалац `input
+- Чувајте најбоље резултате користећи [localStorage](https://developer.mozilla.org/docs/Web/API/Window/localStorage)
+
+## Квиз након предавања
+
+[Квиз након предавања](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/22)
+
+## Преглед и самостално учење
+
+Прочитајте о [свим доступним догађајима](https://developer.mozilla.org/docs/Web/Events) које програмер може користити преко веб прегледача и размислите о ситуацијама у којима бисте користили сваки од њих.
+
+## Задатак
+
+[Направите нову игру са тастатуром](assignment.md)
+
+---
+
+**Одрицање од одговорности**:  
+Овај документ је преведен коришћењем услуге за превођење помоћу вештачке интелигенције [Co-op Translator](https://github.com/Azure/co-op-translator). Иако се трудимо да обезбедимо тачност, молимо вас да имате у виду да аутоматски преводи могу садржати грешке или нетачности. Оригинални документ на његовом изворном језику треба сматрати меродавним извором. За критичне информације препоручује се професионални превод од стране људи. Не преузимамо одговорност за било каква погрешна тумачења или неспоразуме који могу настати услед коришћења овог превода.
\ No newline at end of file
diff --git a/translations/sr/4-typing-game/typing-game/assignment.md b/translations/sr/4-typing-game/typing-game/assignment.md
new file mode 100644
index 00000000..648340d1
--- /dev/null
+++ b/translations/sr/4-typing-game/typing-game/assignment.md
@@ -0,0 +1,26 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "de5384c118e15e4d1d0eaa00fc01b112",
+  "translation_date": "2025-08-27T23:10:32+00:00",
+  "source_file": "4-typing-game/typing-game/assignment.md",
+  "language_code": "sr"
+}
+-->
+# Направите нову игру са тастатуром
+
+## Упутства
+
+Направите малу игру која користи догађаје са тастатуре за извршавање задатака. То може бити другачија врста игре куцања или уметничка игра која боји пикселе на екрану при притиску на тастере. Будите креативни!
+
+## Критеријуми
+
+| Критеријум | Изузетно                | Довољно                 | Потребно побољшање |
+| ---------- | ----------------------- | ----------------------- | ------------------ |
+|            | Представљена је цела игра | Игра је веома минимална | Игра има грешке    |
+|            |                         |                         |                    |
+
+---
+
+**Одрицање од одговорности**:  
+Овај документ је преведен коришћењем услуге за превођење помоћу вештачке интелигенције [Co-op Translator](https://github.com/Azure/co-op-translator). Иако се трудимо да обезбедимо тачност, молимо вас да имате у виду да аутоматски преводи могу садржати грешке или нетачности. Оригинални документ на његовом изворном језику треба сматрати ауторитативним извором. За критичне информације препоручује се професионални превод од стране људи. Не преузимамо одговорност за било каква погрешна тумачења или неспоразуме који могу настати услед коришћења овог превода.
\ No newline at end of file
diff --git a/translations/sr/5-browser-extension/1-about-browsers/README.md b/translations/sr/5-browser-extension/1-about-browsers/README.md
new file mode 100644
index 00000000..eba40268
--- /dev/null
+++ b/translations/sr/5-browser-extension/1-about-browsers/README.md
@@ -0,0 +1,183 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "0bb55e0b98600afab801eea115228873",
+  "translation_date": "2025-08-27T22:46:45+00:00",
+  "source_file": "5-browser-extension/1-about-browsers/README.md",
+  "language_code": "sr"
+}
+-->
+# Пројекат проширења прегледача, део 1: Све о прегледачима
+
+![Скица прегледача](../../../../translated_images/browser.60317c9be8b7f84adce43e30bff8d47a1ae15793beab762317b2bc6b74337c1a.sr.jpg)  
+> Скица од [Wassim Chegham](https://dev.to/wassimchegham/ever-wondered-what-happens-when-you-type-in-a-url-in-an-address-bar-in-a-browser-3dob)
+
+## Квиз пре предавања
+
+[Квиз пре предавања](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/23)
+
+### Увод
+
+Проширења за прегледаче додају додатну функционалност прегледачу. Али пре него што направите једно, требало би да научите мало о томе како прегледачи функционишу.
+
+### О прегледачу
+
+У овој серији лекција научићете како да направите проширење за прегледач које ће радити на Chrome, Firefox и Edge прегледачима. У овом делу ћете открити како прегледачи функционишу и поставити основе за елементе проширења прегледача.
+
+Али шта је заправо прегледач? То је софтверска апликација која омогућава крајњем кориснику да приступи садржају са сервера и прикаже га на веб страницама.
+
+✅ Мало историје: први прегледач се звао 'WorldWideWeb' и направио га је сер Тимоти Бернерс-Ли 1990. године.
+
+![рани прегледачи](../../../../translated_images/earlybrowsers.d984b711cdf3a42ddac919d46c4b5ca7232f68ccfbd81395e04e5a64c0015277.sr.jpg)  
+> Неки од раних прегледача, преко [Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing)
+
+Када се корисник повеже на интернет користећи URL (Uniform Resource Locator) адресу, обично преко Hypertext Transfer Protocol-а путем `http` или `https` адресе, прегледач комуницира са веб сервером и преузима веб страницу.
+
+У том тренутку, рендеринг механизам прегледача приказује страницу на уређају корисника, који може бити мобилни телефон, десктоп или лаптоп.
+
+Прегледачи такође имају могућност кеширања садржаја како не би морали да га преузимају са сервера сваки пут. Они могу бележити историју активности корисника, чувати 'колачиће', који су мали делови података који садрже информације о корисничкој активности, и још много тога.
+
+Веома је важно запамтити да сви прегледачи нису исти! Сваки прегледач има своје предности и мане, и професионални веб програмер треба да разуме како да веб странице добро функционишу на различитим прегледачима. Ово укључује прилагођавање малим екранима, као што је екран мобилног телефона, као и корисницима који су офлајн.
+
+Веома користан сајт који би требало да сачувате у обележивачима у прегледачу који користите је [caniuse.com](https://www.caniuse.com). Када правите веб странице, веома је корисно користити листе подржаних технологија на caniuse како бисте најбоље подржали своје кориснике.
+
+✅ Како можете сазнати који су прегледачи најпопуларнији међу корисницима вашег веб сајта? Проверите своју аналитику - можете инсталирати различите пакете за аналитику као део процеса развоја веба, и они ће вам рећи који прегледачи се највише користе.
+
+## Проширења за прегледаче
+
+Зашто бисте желели да направите проширење за прегледач? То је корисна ствар коју можете додати свом прегледачу када вам је потребан брз приступ задацима које често понављате. На пример, ако често проверавате боје на различитим веб страницама, можете инсталирати проширење за избор боја. Ако имате проблема са памћењем лозинки, можете користити проширење за управљање лозинкама.
+
+Проширења за прегледаче су такође забавна за развој. Обично управљају ограниченим бројем задатака које обављају веома добро.
+
+✅ Која су ваша омиљена проширења за прегледаче? Које задатке обављају?
+
+### Инсталирање проширења
+
+Пре него што почнете са развојем, погледајте процес прављења и постављања проширења за прегледач. Иако се сваки прегледач мало разликује у начину на који управља овим задатком, процес је сличан на Chrome и Firefox прегледачима као у овом примеру за Edge:
+
+![снимак екрана Edge прегледача који приказује отворену страницу edge://extensions и мени са подешавањима](../../../../translated_images/install-on-edge.d68781acaf0b3d3dada8b7507cde7a64bf74b7040d9818baaa9070668e819f90.sr.png)
+
+> Напомена: Обавезно укључите режим за програмере и дозволите проширења из других продавница.
+
+У суштини, процес ће бити:
+
+- направите своје проширење користећи `npm run build`  
+- у прегледачу идите на страницу са проширењима користећи дугме "Подешавања и још" (икона `...`) у горњем десном углу  
+- ако је у питању нова инсталација, изаберите `load unpacked` да отпремите ново проширење из његовог фолдера за изградњу (у нашем случају то је `/dist`)  
+- или, кликните `reload` ако поново учитавате већ инсталирано проширење  
+
+✅ Ова упутства се односе на проширења која сами направите; да бисте инсталирали проширења која су објављена у продавници проширења за прегледач, требало би да одете на те [продавнице](https://microsoftedge.microsoft.com/addons/Microsoft-Edge-Extensions-Home) и инсталирате проширење по вашем избору.
+
+### Почетак
+
+Направићете проширење за прегледач које приказује угљенични отисак вашег региона, показујући потрошњу енергије и извор енергије у вашем региону. Проширење ће имати форму која прикупља API кључ како бисте могли да приступите  
+CO2 Signal API-ју.
+
+**Потребно вам је:**
+
+- [API кључ](https://www.co2signal.com/); унесите своју е-пошту у поље на овој страници и кључ ће вам бити послат  
+- [код за ваш регион](http://api.electricitymap.org/v3/zones) који одговара [Electricity Map](https://www.electricitymap.org/map) (на пример, у Бостону користим 'US-NEISO')  
+- [почетни код](../../../../5-browser-extension/start). Преузмите фолдер `start`; довршићете код у овом фолдеру.  
+- [NPM](https://www.npmjs.com) - NPM је алат за управљање пакетима; инсталирајте га локално и пакети наведени у вашем `package.json` фајлу ће бити инсталирани за употребу у вашим веб ресурсима  
+
+✅ Сазнајте више о управљању пакетима у овом [одличном модулу за учење](https://docs.microsoft.com/learn/modules/create-nodejs-project-dependencies/?WT.mc_id=academic-77807-sagibbon)
+
+Одвојите минут да прегледате базу кода:
+
+dist  
+    -|manifest.json (подразумеване поставке овде)  
+    -|index.html (HTML ознаке за предњи крај овде)  
+    -|background.js (JS за позадину овде)  
+    -|main.js (састављени JS)  
+src  
+    -|index.js (ваш JS код иде овде)  
+
+✅ Када имате свој API кључ и код региона, сачувајте их негде у белешци за будућу употребу.
+
+### Изградња HTML-а за проширење
+
+Ово проширење има два приказа. Један за прикупљање API кључа и кода региона:
+
+![снимак екрана завршеног проширења отвореног у прегледачу, приказује форму са уносима за име региона и API кључ.](../../../../translated_images/1.b6da8c1394b07491afeb6b2a8e5aca73ebd3cf478e27bcc9aeabb187e722648e.sr.png)
+
+И други за приказивање угљеничне потрошње региона:
+
+![снимак екрана завршеног проширења које приказује вредности за угљеничну потрошњу и проценат фосилних горива за регион US-NEISO.](../../../../translated_images/2.1dae52ff0804224692cd648afbf2342955d7afe3b0101b617268130dfb427f55.sr.png)
+
+Почнимо са изградњом HTML-а за форму и стилизовањем помоћу CSS-а.
+
+У фолдеру `/dist`, направите форму и област за резултате. У фајлу `index.html`, попуните означену област за форму:
+
+```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>	
+```  
+Ово је форма где ће се ваши сачувани подаци уносити и чувати у локалној меморији.
+
+Затим, направите област за резултате; испод завршног тега форме, додајте неке div-ове:
+
+```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>
+```  
+У овом тренутку, можете покушати изградњу. Обавезно инсталирајте зависности пакета овог проширења:
+
+```
+npm install
+```  
+
+Ова команда ће користити npm, Node Package Manager, за инсталирање webpack-а за процес изградње вашег проширења. Можете видети излаз овог процеса тако што ћете погледати у `/dist/main.js` - видећете да је код спакован.
+
+За сада, проширење би требало да се изгради и, ако га поставите у Edge као проширење, видећете уредно приказану форму.
+
+Честитамо, направили сте прве кораке ка изградњи проширења за прегледач. У наредним лекцијама учинићете га функционалнијим и кориснијим.
+
+---
+
+## 🚀 Изазов
+
+Погледајте продавницу проширења за прегледаче и инсталирајте једно у свој прегледач. Можете истражити његове фајлове на занимљиве начине. Шта откривате?
+
+## Квиз после предавања
+
+[Квиз после предавања](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/24)
+
+## Преглед и самостално учење
+
+У овој лекцији сте научили мало о историји веб прегледача; искористите ову прилику да сазнате више о томе како су изумитељи World Wide Web-а замислили његову употребу читајући више о његовој историји. Неки корисни сајтови укључују:
+
+[Историја веб прегледача](https://www.mozilla.org/firefox/browsers/browser-history/)
+
+[Историја веба](https://webfoundation.org/about/vision/history-of-the-web/)
+
+[Интервју са Тимом Бернерс-Лијем](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)
+
+## Задатак
+
+[Промените стил свог проширења](assignment.md)  
+
+---
+
+**Одрицање од одговорности**:  
+Овај документ је преведен коришћењем услуге за превођење помоћу вештачке интелигенције [Co-op Translator](https://github.com/Azure/co-op-translator). Иако настојимо да обезбедимо тачност, молимо вас да имате у виду да аутоматски преводи могу садржати грешке или нетачности. Оригинални документ на изворном језику треба сматрати ауторитативним извором. За критичне информације препоручује се професионални превод од стране људи. Не сносимо одговорност за било каква погрешна тумачења или неспоразуме који могу произаћи из коришћења овог превода.
\ No newline at end of file
diff --git a/translations/sr/5-browser-extension/1-about-browsers/assignment.md b/translations/sr/5-browser-extension/1-about-browsers/assignment.md
new file mode 100644
index 00000000..7bbfecb5
--- /dev/null
+++ b/translations/sr/5-browser-extension/1-about-browsers/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "e3c6f2a03c2336e60412612d870af547",
+  "translation_date": "2025-08-27T22:47:33+00:00",
+  "source_file": "5-browser-extension/1-about-browsers/assignment.md",
+  "language_code": "sr"
+}
+-->
+# Промените стил ваше екстензије
+
+## Упутства
+
+Код за ову екстензију долази са унапред дефинисаним стиловима, али не морате да их користите; учините екстензију јединственом тако што ћете изменити њен css фајл.
+
+## Рубрика
+
+| Критеријум | Изузетно                                    | Задовољавајуће        | Потребна побољшања |
+| ---------- | ------------------------------------------ | --------------------- | ------------------ |
+|            | Код је предат са функционалним новим стиловима | Стилови су непотпуни | Стилови су неисправни |
+
+---
+
+**Одрицање од одговорности**:  
+Овај документ је преведен коришћењем услуге за превођење помоћу вештачке интелигенције [Co-op Translator](https://github.com/Azure/co-op-translator). Иако тежимо тачности, молимо вас да будете свесни да аутоматски преводи могу садржати грешке или нетачности. Оригинални документ на његовом изворном језику треба сматрати ауторитативним извором. За критичне информације препоручује се професионални превод од стране људи. Не преузимамо одговорност за било каква погрешна тумачења или неспоразуме који могу настати услед коришћења овог превода.
\ No newline at end of file
diff --git a/translations/sr/5-browser-extension/2-forms-browsers-local-storage/README.md b/translations/sr/5-browser-extension/2-forms-browsers-local-storage/README.md
new file mode 100644
index 00000000..0a161457
--- /dev/null
+++ b/translations/sr/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:44:17+00:00",
+  "source_file": "5-browser-extension/2-forms-browsers-local-storage/README.md",
+  "language_code": "sr"
+}
+-->
+# Пројекат за проширење прегледача, део 2: Позив API-ја, коришћење локалног складишта
+
+## Квиз пре предавања
+
+[Квиз пре предавања](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/25)
+
+### Увод
+
+У овој лекцији, позваћете API тако што ћете послати форму вашег проширења за прегледач и приказати резултате у самом проширењу. Поред тога, научићете како можете чувати податке у локалном складишту вашег прегледача за будућу употребу.
+
+✅ Пратите нумерисане сегменте у одговарајућим фајловима како бисте знали где да поставите свој код.
+
+### Постављање елемената за манипулацију у проширењу:
+
+До сада сте направили HTML за форму и `<div>` за резултате вашег проширења за прегледач. Од сада ћете радити у фајлу `/src/index.js` и градити своје проширење корак по корак. Погледајте [претходну лекцију](../1-about-browsers/README.md) за подешавање пројекта и процес изградње.
+
+Радећи у вашем `index.js` фајлу, почните тако што ћете креирати неке `const` променљиве које ће држати вредности повезане са различитим пољима:
+
+```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');
+```
+
+Сва ова поља се референцирају преко њихових CSS класа, како сте их подесили у HTML-у у претходној лекцији.
+
+### Додавање слушалаца догађаја
+
+Затим, додајте слушаоце догађаја за форму и дугме за ресетовање које ресетује форму, тако да се нешто деси када корисник пошаље форму или кликне на дугме за ресетовање. На крају додајте позив за иницијализацију апликације на дну фајла:
+
+```JavaScript
+form.addEventListener('submit', (e) => handleSubmit(e));
+clearBtn.addEventListener('click', (e) => reset(e));
+init();
+```
+
+✅ Обратите пажњу на скраћеницу која се користи за слушање догађаја `submit` или `click`, и како се догађај прослеђује функцијама `handleSubmit` или `reset`. Можете ли написати еквивалент ове скраћенице у дужем формату? Који формат вам више одговара?
+
+### Изградња функција `init()` и `reset()`:
+
+Сада ћете изградити функцију која иницијализује проширење, а која се зове `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();
+}
+
+```
+
+У овој функцији постоји занимљива логика. Читајући је, можете ли видети шта се дешава?
+
+- Две `const` променљиве се постављају да провере да ли је корисник сачувао APIKey и регионални код у локалном складишту.
+- Ако је било која од њих `null`, приказује се форма тако што се њен стил мења на 'block'.
+- Сакривају се резултати, учитавање и дугме за ресетовање, а текст грешке се поставља на празан стринг.
+- Ако постоје кључ и регион, покреће се рутина за:
+  - позивање API-ја за добијање података о емисији угљеника,
+  - сакривање области резултата,
+  - сакривање форме,
+  - приказивање дугмета за ресетовање.
+
+Пре него што наставите, корисно је научити о веома важном концепту доступном у прегледачима: [LocalStorage](https://developer.mozilla.org/docs/Web/API/Window/localStorage). LocalStorage је користан начин за чување стрингова у прегледачу као `key-value` парова. Овај тип веб складишта може се манипулисати JavaScript-ом за управљање подацима у прегледачу. LocalStorage не истиче, док се SessionStorage, друга врста веб складишта, брише када се прегледач затвори. Различите врсте складишта имају своје предности и мане.
+
+> Напомена - ваше проширење за прегледач има своје локално складиште; главни прозор прегледача је другачија инстанца и понаша се одвојено.
+
+Ваш APIKey постављате да има стринг вредност, на пример, и можете видети да је постављен у Edge-у тако што "инспектирате" веб страницу (можете десним кликом на прегледач да инспектирате) и одете на картицу Applications да видите складиште.
+
+![Прозор локалног складишта](../../../../translated_images/localstorage.472f8147b6a3f8d141d9551c95a2da610ac9a3c6a73d4a1c224081c98bae09d9.sr.png)
+
+✅ Размислите о ситуацијама у којима НЕ бисте желели да чувате неке податке у LocalStorage. Уопштено, постављање API кључева у LocalStorage је лоша идеја! Можете ли видети зашто? У нашем случају, пошто је наша апликација искључиво за учење и неће бити објављена у продавници апликација, користићемо овај метод.
+
+Приметите да користите Web API за манипулацију LocalStorage-ом, било коришћењем `getItem()`, `setItem()`, или `removeItem()`. Широко је подржан у прегледачима.
+
+Пре него што изградите функцију `displayCarbonUsage()` која се позива у `init()`, направимо функционалност за обраду почетног слања форме.
+
+### Обрада слања форме
+
+Креирајте функцију названу `handleSubmit` која прихвата аргумент догађаја `(e)`. Зауставите догађај да се не шири (у овом случају, желимо да спречимо прегледач да се освежи) и позовите нову функцију, `setUpUser`, прослеђујући аргументе `apiKey.value` и `region.value`. На овај начин користите две вредности које се уносе преко почетне форме када се одговарајућа поља попуне.
+
+```JavaScript
+function handleSubmit(e) {
+	e.preventDefault();
+	setUpUser(apiKey.value, region.value);
+}
+```
+
+✅ Освежите своје памћење - HTML који сте поставили у претходној лекцији има два улазна поља чије се `вредности` хватају преко `const` променљивих које сте поставили на врху фајла, и оба су `обавезна`, тако да прегледач спречава кориснике да унесу празне вредности.
+
+### Постављање корисника
+
+Прелазимо на функцију `setUpUser`, овде постављате вредности локалног складишта за apiKey и regionName. Додајте нову функцију:
+
+```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);
+}
+```
+
+Ова функција поставља поруку о учитавању која се приказује док се API позива. У овом тренутку, стигли сте до креирања најважније функције овог проширења за прегледач!
+
+### Приказивање емисије угљеника
+
+Коначно, време је да упитате API!
+
+Пре него што наставимо, требало би да разговарамо о API-јевима. API-ји, или [Интерфејси за програмирање апликација](https://www.webopedia.com/TERM/A/API.html), су критичан елемент алатке веб програмера. Они пружају стандардне начине за програме да међусобно комуницирају и интерфејсују. На пример, ако градите веб сајт који треба да упита базу података, неко је можда креирао API који можете користити. Иако постоји много врста API-ја, један од најпопуларнијих је [REST API](https://www.smashingmagazine.com/2018/01/understanding-using-rest-api/).
+
+✅ Термин 'REST' означава 'Пренос репрезентативног стања' и подразумева коришћење различито конфигурисаних URL-ова за преузимање података. Урадите мало истраживање о различитим врстама API-ја доступним програмерима. Који формат вам се највише допада?
+
+Постоје важне ствари које треба приметити у овој функцији. Прво, приметите [`async` кључну реч](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/async_function). Писање ваших функција тако да раде асинхроно значи да чекају да се нека акција, као што је враћање података, заврши пре него што наставе.
+
+Ево кратког видеа о `async`:
+
+[![Async и Await за управљање обећањима](https://img.youtube.com/vi/YwmlRkrxvkk/0.jpg)](https://youtube.com/watch?v=YwmlRkrxvkk "Async и Await за управљање обећањима")
+
+> 🎥 Кликните на слику изнад за видео о async/await.
+
+Креирајте нову функцију за упитивање C02Signal API-ја:
+
+```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.';
+	}
+}
+```
+
+Ово је велика функција. Шта се овде дешава?
+
+- Пратећи најбоље праксе, користите `async` кључну реч да би ова функција радила асинхроно. Функција садржи `try/catch` блок јер ће вратити обећање када API врати податке. Пошто немате контролу над брзином којом ће API одговорити (можда уопште неће одговорити!), морате управљати овом неизвесношћу тако што ћете је позвати асинхроно.
+- Упитујете co2signal API да бисте добили податке о вашем региону, користећи ваш API кључ. Да бисте користили тај кључ, морате користити врсту аутентификације у параметрима заглавља.
+- Када API одговори, додељујете различите елементе његовог одговора деловима вашег екрана које сте поставили за приказивање ових података.
+- Ако постоји грешка или нема резултата, приказујете поруку о грешци.
+
+✅ Коришћење асинхроних програмских образаца је још један веома користан алат у вашем алату. Прочитајте [о различитим начинима](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/async_function) на које можете конфигурисати ову врсту кода.
+
+Честитамо! Ако изградите своје проширење (`npm run build`) и освежите га у панелу за проширења, имате функционално проширење! Једина ствар која не ради је икона, а то ћете поправити у следећој лекцији.
+
+---
+
+## 🚀 Изазов
+
+Разговарали смо о неколико врста API-ја до сада у овим лекцијама. Изаберите веб API и истражите детаљно шта нуди. На пример, погледајте API-је доступне у прегледачима као што је [HTML Drag and Drop API](https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_API). Шта по вашем мишљењу чини добар API?
+
+## Квиз после предавања
+
+[Квиз после предавања](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/26)
+
+## Преглед и самостално учење
+
+У овој лекцији сте научили о LocalStorage-у и API-јевима, оба веома корисна за професионалног веб програмера. Можете ли размислити о томе како ова два концепта раде заједно? Размислите о томе како бисте дизајнирали веб сајт који би чувао ставке које би користио API.
+
+## Задатак
+
+[Усвојите API](assignment.md)
+
+---
+
+**Одрицање од одговорности**:  
+Овај документ је преведен коришћењем услуге за превођење помоћу вештачке интелигенције [Co-op Translator](https://github.com/Azure/co-op-translator). Иако се трудимо да обезбедимо тачност, молимо вас да имате у виду да аутоматски преводи могу садржати грешке или нетачности. Оригинални документ на његовом изворном језику треба сматрати меродавним извором. За критичне информације препоручује се професионални превод од стране људи. Не преузимамо одговорност за било каква погрешна тумачења или неспоразуме који могу настати услед коришћења овог превода.
\ No newline at end of file
diff --git a/translations/sr/5-browser-extension/2-forms-browsers-local-storage/assignment.md b/translations/sr/5-browser-extension/2-forms-browsers-local-storage/assignment.md
new file mode 100644
index 00000000..431a91a5
--- /dev/null
+++ b/translations/sr/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:45:06+00:00",
+  "source_file": "5-browser-extension/2-forms-browsers-local-storage/assignment.md",
+  "language_code": "sr"
+}
+-->
+# Усвојите API
+
+## Упутства
+
+API-ји могу бити веома забавни за коришћење. Ево [листе многих бесплатних](https://github.com/public-apis/public-apis). Изаберите један API и направите екстензију за претраживач која решава неки проблем. То може бити мали проблем, као што је недостатак слика кућних љубимаца (па, пробајте [dog CEO API](https://dog.ceo/dog-api/)) или нешто веће - забавите се!
+
+## Рубрика
+
+| Критеријум | Изузетно                                                                  | Прихватљиво                              | Потребно побољшање      |
+| ---------- | ------------------------------------------------------------------------ | ---------------------------------------- | ----------------------- |
+|            | Комплетна екстензија за претраживач је предата користећи API са горње листе | Делимична екстензија за претраживач је предата | Предата екстензија има грешке |
+
+---
+
+**Одрицање од одговорности**:  
+Овај документ је преведен коришћењем услуге за превођење помоћу вештачке интелигенције [Co-op Translator](https://github.com/Azure/co-op-translator). Иако се трудимо да обезбедимо тачност, молимо вас да имате у виду да аутоматски преводи могу садржати грешке или нетачности. Оригинални документ на његовом изворном језику треба сматрати ауторитативним извором. За критичне информације препоручује се професионални превод од стране људи. Не преузимамо одговорност за било каква погрешна тумачења или неспоразуме који могу настати услед коришћења овог превода.
\ No newline at end of file
diff --git a/translations/sr/5-browser-extension/3-background-tasks-and-performance/README.md b/translations/sr/5-browser-extension/3-background-tasks-and-performance/README.md
new file mode 100644
index 00000000..d2d941f4
--- /dev/null
+++ b/translations/sr/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:49:58+00:00",
+  "source_file": "5-browser-extension/3-background-tasks-and-performance/README.md",
+  "language_code": "sr"
+}
+-->
+# Пројекат за проширење прегледача, део 3: Упознајте се са позадинским задацима и перформансама
+
+## Квиз пре предавања
+
+[Квиз пре предавања](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/27)
+
+### Увод
+
+У последње две лекције овог модула научили сте како да направите форму и простор за приказивање података преузетих са API-ја. Ово је веома стандардни начин креирања веб присуства на интернету. Чак сте научили како да асинхроно преузимате податке. Ваше проширење за прегледач је скоро завршено.
+
+Остаје да управљате неким позадинским задацима, укључујући освежавање боје иконе проширења, па је ово одличан тренутак да разговарамо о томе како прегледач управља оваквим задацима. Размислимо о овим задацима прегледача у контексту перформанси ваших веб ресурса док их градите.
+
+## Основе веб перформанси
+
+> "Перформансе вебсајта се односе на две ствари: колико брзо се страница учитава и колико брзо се код на њој извршава." -- [Зак Гросбарт](https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/)
+
+Тема како учинити ваше вебсајтове изузетно брзим на свим врстама уређаја, за све врсте корисника, у свим врстама ситуација, није изненађујуће обимна. Ево неколико тачака које треба имати на уму док градите стандардни веб пројекат или проширење за прегледач.
+
+Прва ствар коју треба да урадите како бисте осигурали да ваш сајт ради ефикасно је да прикупите податке о његовим перформансама. Прво место за то су алати за програмере у вашем веб прегледачу. У Edge-у, можете изабрати дугме "Подешавања и још" (икона три тачке у горњем десном углу прегледача), затим идите на Више алата > Алатке за програмере и отворите картицу Перформансе. Такође можете користити пречице на тастатури `Ctrl` + `Shift` + `I` на Windows-у или `Option` + `Command` + `I` на Mac-у да отворите алате за програмере.
+
+Картица Перформансе садржи алат за профилисање. Отворите вебсајт (покушајте, на пример, [https://www.microsoft.com](https://www.microsoft.com/?WT.mc_id=academic-77807-sagibbon)) и кликните на дугме 'Снимај', затим освежите сајт. Прекините снимање у било ком тренутку, и моћи ћете да видите рутине које се генеришу за 'скриптовање', 'рендеровање' и 'цртање' сајта:
+
+![Edge профилер](../../../../translated_images/profiler.5a4a62479c5df01cfec9aab74173dba13f91d2c968e1a1ae434c26165792df15.sr.png)
+
+✅ Посетите [Microsoft документацију](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) о картици Перформансе у Edge-у
+
+> Савет: да бисте добили тачно очитавање времена покретања вашег сајта, обришите кеш вашег прегледача
+
+Изаберите елементе временске линије профила да бисте се приближили догађајима који се дешавају док се ваша страница учитава.
+
+Добијте снимак перформанси ваше странице тако што ћете изабрати део временске линије профила и погледати панел са резимеом:
+
+![Снимак Edge профилера](../../../../translated_images/snapshot.97750180ebcad73794a3594b36925eb5c8dbaac9e03fec7f9b974188c9ac63c7.sr.png)
+
+Проверите панел Дневник догађаја да видите да ли је неки догађај трајао дуже од 15 ms:
+
+![Дневник догађаја Edge-а](../../../../translated_images/log.804026979f3707e00eebcfa028b2b5a88cec6292f858767bb6703afba65a7d9c.sr.png)
+
+✅ Упознајте свој профилер! Отворите алате за програмере на овом сајту и видите да ли постоје уска грла. Који је ресурс који се најспорије учитава? Најбрже?
+
+## Провере профилисања
+
+Уопштено, постоје неке "проблематичне области" које сваки веб програмер треба да прати приликом изградње сајта како би избегао непријатна изненађења када дође време за објављивање у продукцији.
+
+**Величине ресурса**: Веб је постао 'тежи', а самим тим и спорији, током последњих неколико година. Део ове тежине има везе са употребом слика.
+
+✅ Прегледајте [Интернет архиву](https://httparchive.org/reports/page-weight) за историјски преглед тежине страница и више.
+
+Добра пракса је да осигурате да су ваше слике оптимизоване и испоручене у одговарајућој величини и резолуцији за ваше кориснике.
+
+**Проласци кроз DOM**: Прегледач мора да изгради свој Модел објеката документа (DOM) на основу кода који напишете, па је у интересу добрих перформанси странице да ваши тагови буду минимални, користећи и стилизујући само оно што је страници потребно. У том смислу, вишак CSS-а повезан са страницом могао би бити оптимизован; стилови који треба да се користе само на једној страници не морају бити укључени у главни стилски лист, на пример.
+
+**JavaScript**: Сваки JavaScript програмер треба да пази на скрипте које блокирају рендеровање и које морају бити учитане пре него што остатак DOM-а може бити обрађен и приказан у прегледачу. Размотрите коришћење `defer` са вашим уграђеним скриптама (као што је урађено у модулу Terrarium).
+
+✅ Испробајте неке сајтове на [вебсајту за тестирање брзине сајта](https://www.webpagetest.org/) да бисте сазнали више о уобичајеним проверама које се раде за одређивање перформанси сајта.
+
+Сада када имате идеју како прегледач приказује ресурсе које му шаљете, погледајмо последње неколико ствари које треба да урадите да бисте завршили своје проширење:
+
+### Направите функцију за израчунавање боје
+
+Радећи у `/src/index.js`, додајте функцију под називом `calculateColor()` након серије `const` променљивих које сте поставили да бисте добили приступ 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 } });
+}
+```
+
+Шта се овде дешава? Прослеђујете вредност (интензитет угљеника) из API позива који сте завршили у претходној лекцији, а затим израчунавате колико је његова вредност близу индекса представљеног у низу боја. Затим ту најближу вредност боје шаљете преко chrome runtime-а.
+
+Chrome.runtime има [API](https://developer.chrome.com/extensions/runtime) који обрађује све врсте позадинских задатака, а ваше проширење то користи:
+
+> "Користите chrome.runtime API да бисте преузели позадинску страницу, вратили детаље о манифесту и слушали и одговарали на догађаје у животном циклусу апликације или проширења. Такође можете користити овај API да конвертујете релативне путање URL-ова у потпуно квалификоване URL-ове."
+
+✅ Ако развијате ово проширење за Edge, могло би вас изненадити што користите chrome API. Новије верзије Edge прегледача раде на Chromium прегледачком механизму, тако да можете користити ове алате.
+
+> Напомена: ако желите да профилишете проширење за прегледач, покрените алате за програмере из самог проширења, јер је оно засебна инстанца прегледача.
+
+### Поставите подразумевану боју иконе
+
+Сада, у функцији `init()`, поставите икону да буде генеричка зелена на почетку тако што ћете поново позвати chrome-ову акцију `updateIcon`:
+
+```JavaScript
+chrome.runtime.sendMessage({
+	action: 'updateIcon',
+		value: {
+			color: 'green',
+		},
+});
+```
+
+### Позовите функцију, извршите позив
+
+Затим, позовите ту функцију коју сте управо креирали додавањем у обећање које враћа C02Signal API:
+
+```JavaScript
+//let CO2...
+calculateColor(CO2);
+```
+
+И на крају, у `/dist/background.js`, додајте слушач за ове позадинске позиве акција:
+
+```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);
+}
+```
+
+У овом коду, додајете слушач за било које поруке које долазе до менаџера позадинских задатака. Ако се зове 'updateIcon', онда се извршава следећи код за цртање иконе одговарајуће боје користећи Canvas API.
+
+✅ Више ћете научити о Canvas API-ју у [лекцијама о свемирској игри](../../6-space-game/2-drawing-to-canvas/README.md).
+
+Сада, поново изградите своје проширење (`npm run build`), освежите и покрените своје проширење и гледајте како се боја мења. Да ли је време за одлазак у куповину или прање судова? Сада знате!
+
+Честитамо, направили сте корисно проширење за прегледач и научили више о томе како прегледач функционише и како профилисати његове перформансе.
+
+---
+
+## 🚀 Изазов
+
+Истражите неке вебсајтове отвореног кода који постоје већ дуго времена и, на основу њихове историје на GitHub-у, покушајте да утврдите како су оптимизовани током година за перформансе, ако уопште јесу. Која је најчешћа тачка проблема?
+
+## Квиз после предавања
+
+[Квиз после предавања](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/28)
+
+## Преглед и самостално учење
+
+Размотрите пријављивање на [билтен о перформансама](https://perf.email/)
+
+Истражите неке од начина на које прегледачи мере веб перформансе тако што ћете прегледати картице перформанси у њиховим веб алатима. Да ли налазите неке велике разлике?
+
+## Задатак
+
+[Анализирајте сајт за перформансе](assignment.md)
+
+---
+
+**Одрицање од одговорности**:  
+Овај документ је преведен коришћењем услуге за превођење помоћу вештачке интелигенције [Co-op Translator](https://github.com/Azure/co-op-translator). Иако се трудимо да обезбедимо тачност, молимо вас да имате у виду да аутоматски преводи могу садржати грешке или нетачности. Оригинални документ на његовом изворном језику треба сматрати меродавним извором. За критичне информације препоручује се професионални превод од стране људи. Не преузимамо одговорност за било каква погрешна тумачења или неспоразуме који могу настати услед коришћења овог превода.
\ No newline at end of file
diff --git a/translations/sr/5-browser-extension/3-background-tasks-and-performance/assignment.md b/translations/sr/5-browser-extension/3-background-tasks-and-performance/assignment.md
new file mode 100644
index 00000000..61affcd9
--- /dev/null
+++ b/translations/sr/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:50:47+00:00",
+  "source_file": "5-browser-extension/3-background-tasks-and-performance/assignment.md",
+  "language_code": "sr"
+}
+-->
+# Анализирајте сајт ради перформанси
+
+Пружите детаљан извештај о веб сајту, указујући на области где постоје проблеми са перформансама. Анализирајте зашто је сајт спор и шта можете урадити да га убрзате. Немојте се ослањати само на алате претраживача, већ истражите и друге алате који могу помоћи у изради вашег извештаја.
+
+## Рубрика
+
+| Критеријум | Изузетно                                                                                                  | Задовољавајуће              | Потребно побољшање            |
+| ---------- | --------------------------------------------------------------------------------------------------------- | --------------------------- | ----------------------------- |
+|            | Представљен је извештај са детаљима који нису засновани само на алатима претраживача, већ и на алатима трећих страна, ако су доступни | Представљен је основни извештај | Представљен је минималан извештај |
+
+---
+
+**Одрицање од одговорности**:  
+Овај документ је преведен коришћењем услуге за превођење помоћу вештачке интелигенције [Co-op Translator](https://github.com/Azure/co-op-translator). Иако се трудимо да обезбедимо тачност, молимо вас да имате у виду да аутоматски преводи могу садржати грешке или нетачности. Оригинални документ на његовом изворном језику треба сматрати меродавним извором. За критичне информације препоручује се професионални превод од стране људи. Не преузимамо одговорност за било каква погрешна тумачења или неспоразуме који могу настати услед коришћења овог превода.
\ No newline at end of file
diff --git a/translations/sr/5-browser-extension/README.md b/translations/sr/5-browser-extension/README.md
new file mode 100644
index 00000000..a53250d1
--- /dev/null
+++ b/translations/sr/5-browser-extension/README.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "b121a279a6ab39878491f3e572673515",
+  "translation_date": "2025-08-27T22:41:16+00:00",
+  "source_file": "5-browser-extension/README.md",
+  "language_code": "sr"
+}
+-->
+# Изградња екстензије за претраживач
+
+Изградња екстензија за претраживаче је забаван и занимљив начин да размислите о перформансама ваших апликација док правите другачију врсту веб ресурса. Овај модул укључује лекције о томе како претраживачи функционишу, како да поставите екстензију за претраживач, како да направите форму, позовете API, користите локално складиште, као и како да процените перформансе вашег веб сајта и побољшате их.
+
+Направићете екстензију за претраживач која ради на Edge, Chrome и Firefox. Ова екстензија, која је као мини веб сајт прилагођен веома специфичном задатку, проверава [C02 Signal API](https://www.co2signal.com) за употребу електричне енергије и интензитет угљеника у одређеном региону, и враћа очитавање о угљеничком отиску тог региона.
+
+Ову екстензију корисник може ад хок позвати након што унесе API кључ и код региона у форму, како би одредио локалну употребу електричне енергије и тиме добио податке који могу утицати на његове одлуке о употреби струје. На пример, можда би било пожељно одложити коришћење сушилице за веш (активност са високим угљеничким интензитетом) током периода велике потрошње електричне енергије у вашем региону.
+
+### Теме
+
+1. [О претраживачима](1-about-browsers/README.md)
+2. [Форме и локално складиште](2-forms-browsers-local-storage/README.md)
+3. [Позадински задаци и перформансе](3-background-tasks-and-performance/README.md)
+
+### Захвалнице
+
+![зелена екстензија за претраживач](../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.sr.png)
+
+## Захвалнице
+
+Идеју за овај веб пројекат о угљеничком отиску понудио је Асим Хусеин, лидер у Microsoft-у за тим Green Cloud Advocacy и аутор [Green Principles](https://principles.green/). Првобитно је то био [веб сајт пројекат](https://github.com/jlooper/green).
+
+Структура екстензије за претраживач је инспирисана [Adebola Adeniran-овом COVID екстензијом](https://github.com/onedebos/covtension).
+
+Концепт иза система 'тачка' иконе предложен је структуром икона екстензије за претраживач [Energy Lollipop](https://energylollipop.com/) за емисије у Калифорнији.
+
+Ове лекције су написане са ♥️ од стране [Jen Looper](https://www.twitter.com/jenlooper).
+
+---
+
+**Одрицање од одговорности**:  
+Овај документ је преведен коришћењем услуге за превођење помоћу вештачке интелигенције [Co-op Translator](https://github.com/Azure/co-op-translator). Иако се трудимо да обезбедимо тачност, молимо вас да имате у виду да аутоматски преводи могу садржати грешке или нетачности. Оригинални документ на његовом изворном језику треба сматрати меродавним извором. За критичне информације препоручује се професионални превод од стране људи. Не преузимамо одговорност за било каква погрешна тумачења или неспоразуме који могу настати услед коришћења овог превода.
\ No newline at end of file
diff --git a/translations/sr/5-browser-extension/solution/README.md b/translations/sr/5-browser-extension/solution/README.md
new file mode 100644
index 00000000..d6739b18
--- /dev/null
+++ b/translations/sr/5-browser-extension/solution/README.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "fab4e6b4f0efcd587a9029d82991f597",
+  "translation_date": "2025-08-27T22:51:16+00:00",
+  "source_file": "5-browser-extension/solution/README.md",
+  "language_code": "sr"
+}
+-->
+# Carbon Trigger Browser Extension: Завршен Код
+
+Користећи tmrow-ов C02 Signal API за праћење потрошње електричне енергије, направите екстензију за претраживач како бисте имали подсетник директно у вашем претраживачу о томе колико је потрошња електричне енергије у вашем региону велика. Коришћење ове екстензије ад хок ће вам помоћи да донесете одлуке о вашим активностима на основу ових информација.
+
+![скриншот екстензије](../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.sr.png)
+
+## Почетак
+
+Потребно је да имате инсталиран [npm](https://npmjs.com). Преузмите копију овог кода у фасциклу на вашем рачунару.
+
+Инсталирајте све потребне пакете:
+
+```
+npm install
+```
+
+Направите екстензију помоћу webpack-а:
+
+```
+npm run build
+```
+
+Да бисте инсталирали на Edge, користите мени са 'три тачке' у горњем десном углу претраживача да пронађете панел за екстензије. Одатле изаберите 'Load Unpacked' да учитате нову екстензију. Отворите фасциклу 'dist' када се појави упит и екстензија ће се учитати. Да бисте је користили, биће вам потребан API кључ за CO2 Signal API ([набавите га овде путем е-поште](https://www.co2signal.com/) - унесите вашу е-пошту у поље на овој страници) и [код за ваш регион](http://api.electricitymap.org/v3/zones) који одговара [Electricity Map](https://www.electricitymap.org/map) (на пример, у Бостону користим 'US-NEISO').
+
+![инсталирање](../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.sr.png)
+
+Када унесете API кључ и регион у интерфејс екстензије, обојена тачка у траци екстензије претраживача би требало да се промени како би одразила потрошњу енергије у вашем региону и дала вам смернице о томе које активности са великом потрошњом енергије би биле прикладне за вас. Концепт иза овог система 'тачке' добио сам од [Energy Lollipop екстензије](https://energylollipop.com/) за емисије у Калифорнији.
+
+---
+
+**Одрицање од одговорности**:  
+Овај документ је преведен коришћењем услуге за превођење помоћу вештачке интелигенције [Co-op Translator](https://github.com/Azure/co-op-translator). Иако се трудимо да обезбедимо тачност, молимо вас да имате у виду да аутоматски преводи могу садржати грешке или нетачности. Оригинални документ на његовом изворном језику треба сматрати ауторитативним извором. За критичне информације препоручује се професионални превод од стране људи. Не преузимамо одговорност за било каква погрешна тумачења или неспоразуме који могу настати услед коришћења овог превода.
\ No newline at end of file
diff --git a/translations/sr/5-browser-extension/solution/translation/README.es.md b/translations/sr/5-browser-extension/solution/translation/README.es.md
new file mode 100644
index 00000000..0b2f355e
--- /dev/null
+++ b/translations/sr/5-browser-extension/solution/translation/README.es.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "cbaf73f94a9ab4c680a10ef871e92948",
+  "translation_date": "2025-08-27T22:51:45+00:00",
+  "source_file": "5-browser-extension/solution/translation/README.es.md",
+  "language_code": "sr"
+}
+-->
+# Екстензија за прегледач Carbon Trigger: Комплетан код
+
+Користећи API за CO2 сигнал од tmrow за праћење потрошње електричне енергије, направите екстензију за прегледач како бисте имали подсетник директно у вашем прегледачу о потрошњи електричне енергије у вашем региону. Коришћење ове ад хок екстензије помоћи ће вам да доносите одлуке о вашим активностима на основу ових информација.
+
+![снимак екрана екстензије](../../../../../translated_images/extension-screenshot.352c4c3ba54e4041ad2f6af749d562cc5705f527b5826efd53d11c3528f5ae45.sr.png)
+
+## Почетак
+
+Потребно је да имате инсталиран [npm](https://npmjs.com). Преузмите копију овог кода у фасциклу на вашем рачунару.
+
+Инсталирајте све неопходне пакете:
+
+```
+npm install
+```
+
+Изградите екстензију помоћу webpack-а:
+
+```
+npm run build
+```
+
+Да бисте инсталирали у Edge-у, користите мени са 'три тачке' у горњем десном углу прегледача да пронађете панел за Екстензије. Одатле изаберите 'Учитај распаковано' да бисте учитали нову екстензију. Када се то затражи, отворите фасциклу 'dist' и екстензија ће бити учитана. Да бисте је користили, биће вам потребан API кључ за CO2 Signal API ([набавите га овде путем е-поште](https://www.co2signal.com/) - унесите вашу е-пошту у поље на овој страници) и [код за ваш регион](http://api.electricitymap.org/v3/zones) који одговара [Мапи електричне енергије](https://www.electricitymap.org/map) (на пример, у Бостону користим 'US-NEISO').
+
+![инсталирање](../../../../../translated_images/install-on-edge.8bd0ee3ca7dcda1c5334b5195603a43c864e3b38d088b03d57376d25e77b9459.sr.png)
+
+Када унесете API кључ и регион у интерфејс екстензије, тачка у боји на траци екстензије прегледача треба да се промени како би одражавала потрошњу енергије у вашем региону и дала вам индикатор о активностима са високом потрошњом енергије које би биле прикладне за вас. Концепт иза овог система "тачака" добио сам од [екстензије Energy Lollipop](https://energylollipop.com/) за емисије у Калифорнији.
+
+---
+
+**Одрицање од одговорности**:  
+Овај документ је преведен коришћењем услуге за превођење помоћу вештачке интелигенције [Co-op Translator](https://github.com/Azure/co-op-translator). Иако настојимо да обезбедимо тачност, молимо вас да имате у виду да аутоматизовани преводи могу садржати грешке или нетачности. Оригинални документ на његовом изворном језику треба сматрати меродавним извором. За критичне информације препоручује се професионални превод од стране људи. Не преузимамо одговорност за било каква погрешна тумачења или неспоразуме који могу настати услед коришћења овог превода.
\ No newline at end of file
diff --git a/translations/sr/5-browser-extension/solution/translation/README.fr.md b/translations/sr/5-browser-extension/solution/translation/README.fr.md
new file mode 100644
index 00000000..7556b197
--- /dev/null
+++ b/translations/sr/5-browser-extension/solution/translation/README.fr.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "9361268ca430b2579375009e1eceb5e5",
+  "translation_date": "2025-08-27T22:53:21+00:00",
+  "source_file": "5-browser-extension/solution/translation/README.fr.md",
+  "language_code": "sr"
+}
+-->
+# Екстензија за прегледач Carbon Trigger: Завршен Код
+
+Користећи API C02 Signal од tmrow за праћење потрошње електричне енергије, направите екстензију за прегледач како бисте могли директно у вашем прегледачу добијати подсетнике о потрошњи електричне енергије у вашем региону. Коришћење ове екстензије ће вам помоћи да донесете одлуке о вашим активностима на основу ових информација.
+
+![снимак екстензије](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.sr.png)
+
+## Почетак
+
+Потребно је да имате инсталиран [npm](https://npmjs.com). Преузмите копију овог кода у фасциклу на вашем рачунару.
+
+Инсталирајте све потребне пакете:
+
+```
+npm install
+```
+
+Изградите екстензију помоћу webpack-а:
+
+```
+npm run build
+```
+
+Да бисте инсталирали на Edge, користите мени са 'три тачке' у горњем десном углу прегледача да бисте пронашли панел за Екстензије. Одатле изаберите 'Учитај декомпресовану екстензију' да бисте учитали нову екстензију. Отворите фасциклу 'dist' када се то затражи, и екстензија ће се учитати. Да бисте је користили, биће вам потребан API кључ за CO2 Signal API ([набавите га овде путем е-поште](https://www.co2signal.com/) - унесите вашу е-пошту у поље на овој страници) и [код за ваш регион](http://api.electricitymap.org/v3/zones) који одговара [Мапи електричне енергије](https://www.electricitymap.org/map) (на пример, у Бостону користим 'US-NEISO').
+
+![инсталација](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.sr.png)
+
+Када унесете API кључ и регион у интерфејс екстензије, обојена тачка у траци екстензије прегледача треба да се промени како би одразила потрошњу енергије у вашем региону и дала вам индикатор о активностима које троше енергију, а које би било прикладно обављати. Концепт иза овог система 'тачака' инспирисан је [екстензијом Energy Lollipop](https://energylollipop.com/) за емисије у Калифорнији.
+
+---
+
+**Одрицање од одговорности**:  
+Овај документ је преведен коришћењем услуге за превођење помоћу вештачке интелигенције [Co-op Translator](https://github.com/Azure/co-op-translator). Иако се трудимо да обезбедимо тачност, молимо вас да имате у виду да аутоматизовани преводи могу садржати грешке или нетачности. Оригинални документ на његовом изворном језику треба сматрати ауторитативним извором. За критичне информације препоручује се професионални превод од стране људског преводиоца. Не преузимамо одговорност за било каква погрешна тумачења или неспоразуме који могу произаћи из коришћења овог превода.
\ No newline at end of file
diff --git a/translations/sr/5-browser-extension/solution/translation/README.hi.md b/translations/sr/5-browser-extension/solution/translation/README.hi.md
new file mode 100644
index 00000000..a8c03e94
--- /dev/null
+++ b/translations/sr/5-browser-extension/solution/translation/README.hi.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "dd58ae1b7707034f055718c1b68bc8de",
+  "translation_date": "2025-08-27T22:52:18+00:00",
+  "source_file": "5-browser-extension/solution/translation/README.hi.md",
+  "language_code": "sr"
+}
+-->
+# Карбон Триггер Браузер Екстензија: Завршен Код
+
+Користећи tmrow-ов C02 Signal API за праћење потрошње електричне енергије, направљена је браузер екстензија која вас подсећа на то колико је потрошња електричне енергије у вашем региону оптерећена. Коришћење ове екстензије може вам помоћи да донесете одлуке о својим активностима на основу ових информација.
+
+![Скриншот екстензије](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.sr.png)
+
+## Почетак
+
+Потребно је да инсталирате [npm](https://npmjs.com). Преузмите копију овог кода у неки фолдер на вашем рачунару.
+
+Инсталирајте све неопходне пакете:
+
+```
+npm install
+```
+
+Направите екстензију помоћу Webpack-а:
+
+```
+npm run build
+```
+
+Да бисте инсталирали на Edge, користите мени са „три тачке“ у горњем десном углу браузера да пронађете панел за екстензије. Одатле изаберите „Load unpacked“ да бисте учитали нову екстензију. На промпту отворите фолдер „dist“ и екстензија ће бити учитана. Да бисте је користили, потребан вам је API кључ за CO2 Signal ([добијте га овде путем е-поште](https://www.co2signal.com/) - унесите своју е-пошту у поље на тој страници) и [код за ваш регион](http://api.electricitymap.org/v3/zones) са [Electricity Map](https://www.electricitymap.org/map) (на пример, за Бостон, ја користим 'US-NEISO').
+
+![инсталирање](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.sr.png)
+
+Када унесете API кључ и регион у интерфејс екстензије, обојена тачка у траци браузер екстензије треба да се промени како би одражавала потрошњу енергије у вашем региону и дала вам показатељ које активности са великом потрошњом енергије су прикладне за ваше окружење. Концепт ове „тачкасте“ системе добио сам од [Energy Lollipop екстензије](https://energylollipop.com/) за емисије у Калифорнији.
+
+---
+
+**Одрицање од одговорности**:  
+Овај документ је преведен коришћењем услуге за превођење помоћу вештачке интелигенције [Co-op Translator](https://github.com/Azure/co-op-translator). Иако се трудимо да превод буде тачан, молимо вас да имате у виду да аутоматизовани преводи могу садржати грешке или нетачности. Оригинални документ на његовом изворном језику треба сматрати ауторитативним извором. За критичне информације препоручује се професионални превод од стране људи. Не преузимамо одговорност за било каква погрешна тумачења или неспоразуме који могу произаћи из коришћења овог превода.
\ No newline at end of file
diff --git a/translations/sr/5-browser-extension/solution/translation/README.it.md b/translations/sr/5-browser-extension/solution/translation/README.it.md
new file mode 100644
index 00000000..a93396c7
--- /dev/null
+++ b/translations/sr/5-browser-extension/solution/translation/README.it.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "9a6b22a2eff0f499b66236be973b24ad",
+  "translation_date": "2025-08-27T22:53:58+00:00",
+  "source_file": "5-browser-extension/solution/translation/README.it.md",
+  "language_code": "sr"
+}
+-->
+# Екстензија за прегледач Carbon Trigger: код за почетак
+
+Користићемо API Signal C02 од tmrow за праћење потрошње електричне енергије како бисмо направили екстензију за прегледач. Ова екстензија ће вам омогућити да директно у вашем прегледачу добијете подсетник о томе колико је потрошња електричне енергије у вашем региону. Коришћење ове екстензије ће вам помоћи да процените своје активности на основу ових информација.
+
+![снимак екрана екстензије](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.sr.png)
+
+## Како започети
+
+Потребно је да [npm](https://npmjs.com) буде инсталиран. Преузмите копију овог кода у фасциклу на вашем рачунару.
+
+Инсталирајте све потребне пакете:
+
+```
+npm install
+```
+
+Креирајте екстензију помоћу webpack-а:
+
+```
+npm run build
+```
+
+Да бисте инсталирали на Edge, користите мени "три тачке" у горњем десном углу прегледача да пронађете панел за Екстензије. Ако већ није активирано, укључите Режим за програмере (у доњем левом углу). Изаберите "Учитај декомпресовано" да бисте учитали нову екстензију. Отворите фасциклу "dist" када се појави упит, и екстензија ће бити учитана. Да бисте је користили, биће вам потребан API кључ за CO2 Signal API (можете га [добити овде путем е-поште](https://www.co2signal.com/) - унесите своју е-пошту у поље на овој страници) и [код за ваш регион](http://api.electricitymap.org/v3/zones) који одговара [електричној мапи](https://www.electricitymap.org/map) (на пример, за Бостон, "US-NEISO").
+
+![инсталација](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.sr.png)
+
+Када унесете API кључ и регион у интерфејс екстензије, обојена тачка у траци екстензије прегледача би требало да се промени како би одразила потрошњу енергије у региону и пружила смернице о томе које активности са високом потрошњом енергије би биле прикладне за извршавање. Концепт иза овог система "тачака" инспирисан је [екстензијом Energy Lollipop](https://energylollipop.com/) за емисије у Калифорнији.
+
+---
+
+**Одрицање од одговорности**:  
+Овај документ је преведен коришћењем услуге за превођење помоћу вештачке интелигенције [Co-op Translator](https://github.com/Azure/co-op-translator). Иако се трудимо да обезбедимо тачност, молимо вас да имате у виду да аутоматски преводи могу садржати грешке или нетачности. Оригинални документ на његовом изворном језику треба сматрати ауторитативним извором. За критичне информације препоручује се професионални превод од стране људи. Не преузимамо одговорност за било каква погрешна тумачења или неспоразуме који могу настати услед коришћења овог превода.
\ No newline at end of file
diff --git a/translations/sr/5-browser-extension/solution/translation/README.ja.md b/translations/sr/5-browser-extension/solution/translation/README.ja.md
new file mode 100644
index 00000000..b3f1bd91
--- /dev/null
+++ b/translations/sr/5-browser-extension/solution/translation/README.ja.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "3f5e6821e0febccfc5d05e7c944d9e3d",
+  "translation_date": "2025-08-27T22:54:28+00:00",
+  "source_file": "5-browser-extension/solution/translation/README.ja.md",
+  "language_code": "sr"
+}
+-->
+# Карбон Триггер: Екстензија за прегледач - Завршен код
+
+Изградите екстензију за прегледач која користи C02 Signal API од tmrow за праћење потрошње електричне енергије у вашем региону. Екстензија ће приказивати подсетник на вашем прегледачу о томе колико је потрошња електричне енергије висока, омогућавајући вам да на основу те информације доносите одлуке о својим активностима.
+
+![скриншот екстензије](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.sr.png)
+
+## Увод
+
+Потребно је да имате инсталиран [npm](https://npmjs.com). Преузмите копију овог кода у фасциклу на вашем рачунару.
+
+Инсталирајте све потребне пакете.
+
+```
+npm install
+```
+
+Изградите екстензију помоћу webpack-а.
+
+```
+npm run build
+```
+
+Да бисте инсталирали екстензију на Edge, пронађите панел „Екстензије“ у менију „три тачке“ у горњем десном углу прегледача. Одатле изаберите „Load Unpacked“ и учитајте нову екстензију. Када се појави упит, отворите фасциклу „dist“, и екстензија ће бити учитана. Да бисте је користили, потребан вам је API кључ за CO2 Signal ([набавите га овде путем е-поште](https://www.co2signal.com/) - унесите вашу е-пошту у поље на тој страници) и [код за ваш регион](http://api.electricitymap.org/v3/zones) који је компатибилан са [Electricity Map](https://www.electricitymap.org/map) (на пример, за Бостон користите 'US-NEISO').
+
+![инсталација](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.sr.png)
+
+Када унесете API кључ и регион у интерфејс екстензије, боја тачке која се приказује на траци екстензија у вашем прегледачу ће се мењати, одражавајући потрошњу енергије у вашем региону. Овај систем „тачке“ ће вам помоћи да одлучите које активности су прикладне у зависности од енергетске потрошње. Концепт овог система инспирисан је [Energy Lollipop екстензијом](https://energylollipop.com/) за емисије у Калифорнији.
+
+---
+
+**Одрицање од одговорности**:  
+Овај документ је преведен коришћењем услуге за превођење помоћу вештачке интелигенције [Co-op Translator](https://github.com/Azure/co-op-translator). Иако се трудимо да обезбедимо тачност, молимо вас да имате у виду да аутоматизовани преводи могу садржати грешке или нетачности. Оригинални документ на његовом изворном језику треба сматрати меродавним извором. За критичне информације препоручује се професионални превод од стране људи. Не преузимамо одговорност за било каква погрешна тумачења или неспоразуме који могу настати услед коришћења овог превода.
\ No newline at end of file
diff --git a/translations/sr/5-browser-extension/solution/translation/README.ms.md b/translations/sr/5-browser-extension/solution/translation/README.ms.md
new file mode 100644
index 00000000..88305c9a
--- /dev/null
+++ b/translations/sr/5-browser-extension/solution/translation/README.ms.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "21b364c158c8e4f698de65eeac16c9fe",
+  "translation_date": "2025-08-27T22:52:51+00:00",
+  "source_file": "5-browser-extension/solution/translation/README.ms.md",
+  "language_code": "sr"
+}
+-->
+# Додатак за прегледач Carbon Trigger: Комплетан Код
+
+Користећи API за CO2 сигнале од tmrow за праћење потрошње електричне енергије, направите додатак за прегледач који ће вас обавештавати о томе колико је велика потрошња електричне енергије у вашем региону. Коришћење овог додатка може вам помоћи да донесете одлуке о својим активностима на основу ових информација.
+
+![снимак додатка за прегледач](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.sr.png)
+
+## Почетак
+
+Потребно је да инсталирате [npm](https://npmjs.com). Преузмите копију овог кода у фасциклу на вашем рачунару.
+
+Инсталирајте све потребне пакете:
+
+```
+npm install
+```
+
+Направите додатак помоћу webpack-а:
+
+```
+npm run build
+```
+
+Да бисте га инсталирали у Edge прегледачу, користите мени са „три тачке“ у горњем десном углу прегледача да пронађете панел за Додатке. Одатле изаберите 'Load Unpacked' да бисте учитали нови додатак. Отворите фасциклу 'dist' када се то затражи, и додатак ће бити учитан. Да бисте га користили, потребан вам је API кључ за CO2 сигнале ([набавите га овде путем е-поште](https://www.co2signal.com/) - унесите своју е-пошту у поље на овој страници) и [код за ваш регион](http://api.electricitymap.org/v3/zones) који одговара [Електричној Мапи](https://www.electricitymap.org/map) (на пример, у Бостону користим 'US-NEISO').
+
+![преузимање](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.sr.png)
+
+Када унесете API кључ и регион у интерфејс додатка, обојена тачка на траци додатка у прегледачу ће се променити како би одразила потрошњу енергије у вашем региону и дала вам смернице о активностима које су прикладне за тренутну ситуацију. Концепт система 'тачке' инспирисан је [додатком за прегледач Energy Lollipop](https://energylollipop.com/) за емисије у Калифорнији.
+
+---
+
+**Одрицање од одговорности**:  
+Овај документ је преведен коришћењем услуге за превођење помоћу вештачке интелигенције [Co-op Translator](https://github.com/Azure/co-op-translator). Иако се трудимо да обезбедимо тачност, молимо вас да имате у виду да аутоматски преводи могу садржати грешке или нетачности. Оригинални документ на његовом изворном језику треба сматрати меродавним извором. За критичне информације препоручује се професионални превод од стране људи. Не преузимамо одговорност за било каква погрешна тумачења или неспоразуме који могу настати услед коришћења овог превода.
\ No newline at end of file
diff --git a/translations/sr/5-browser-extension/start/README.md b/translations/sr/5-browser-extension/start/README.md
new file mode 100644
index 00000000..f52fe1a5
--- /dev/null
+++ b/translations/sr/5-browser-extension/start/README.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "26fd39046d264ba185dcb086d3a8cf3e",
+  "translation_date": "2025-08-27T22:45:33+00:00",
+  "source_file": "5-browser-extension/start/README.md",
+  "language_code": "sr"
+}
+-->
+# Carbon Trigger Browser Extension: Почетни Код
+
+Користећи tmrow-ов C02 Signal API за праћење потрошње електричне енергије, направите екстензију за претраживач како бисте имали подсетник директно у вашем претраживачу о томе колико је потрошња електричне енергије у вашем региону велика. Коришћење ове екстензије ад хок ће вам помоћи да донесете одлуке о вашим активностима на основу ових информација.
+
+![скриншот екстензије](../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.sr.png)
+
+## Почетак
+
+Потребно је да имате [npm](https://npmjs.com) инсталиран. Преузмите копију овог кода у фасциклу на вашем рачунару.
+
+Инсталирајте све потребне пакете:
+
+```
+npm install
+```
+
+Направите екстензију помоћу webpack-а:
+
+```
+npm run build
+```
+
+Да бисте инсталирали на Edge, користите мени са 'три тачке' у горњем десном углу претраживача да пронађете панел за екстензије. Одатле изаберите 'Load Unpacked' да учитате нову екстензију. Отворите фасциклу 'dist' када се појави упит и екстензија ће се учитати. Да бисте је користили, потребан вам је API кључ за CO2 Signal API ([набавите га овде путем е-поште](https://www.co2signal.com/) - унесите вашу е-пошту у поље на овој страници) и [код за ваш регион](http://api.electricitymap.org/v3/zones) који одговара [Electricity Map](https://www.electricitymap.org/map) (на пример, у Бостону користим 'US-NEISO').
+
+![инсталирање](../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.sr.png)
+
+Када унесете API кључ и регион у интерфејс екстензије, обојена тачка у траци екстензије претраживача би требало да се промени како би одражавала потрошњу енергије у вашем региону и дала вам смернице о томе које активности са великом потрошњом енергије би биле прикладне за вас. Концепт иза овог система 'тачке' добио сам од [Energy Lollipop екстензије](https://energylollipop.com/) за емисије у Калифорнији.
+
+---
+
+**Одрицање од одговорности**:  
+Овај документ је преведен коришћењем услуге за превођење помоћу вештачке интелигенције [Co-op Translator](https://github.com/Azure/co-op-translator). Иако се трудимо да обезбедимо тачност, молимо вас да имате у виду да аутоматски преводи могу садржати грешке или нетачности. Оригинални документ на његовом изворном језику треба сматрати ауторитативним извором. За критичне информације препоручује се професионални превод од стране људи. Не преузимамо одговорност за било каква погрешна тумачења или неспоразуме који могу настати услед коришћења овог превода.
\ No newline at end of file
diff --git a/translations/sr/6-space-game/1-introduction/README.md b/translations/sr/6-space-game/1-introduction/README.md
new file mode 100644
index 00000000..faeac32c
--- /dev/null
+++ b/translations/sr/6-space-game/1-introduction/README.md
@@ -0,0 +1,238 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "d9da6dc61fb712b29f65e108c79b8a5d",
+  "translation_date": "2025-08-27T22:24:25+00:00",
+  "source_file": "6-space-game/1-introduction/README.md",
+  "language_code": "sr"
+}
+-->
+# Изградња свемирске игре, део 1: Увод
+
+![video](../../../../6-space-game/images/pewpew.gif)
+
+## Квиз пре предавања
+
+[Квиз пре предавања](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/29)
+
+### Наслеђивање и композиција у развоју игара
+
+У претходним лекцијама није било потребе да се превише бринете о дизајнерској архитектури апликација које сте правили, јер су пројекти били веома малог обима. Међутим, када ваше апликације почну да расту у величини и обиму, архитектонске одлуке постају значајније. Постоје два главна приступа за креирање већих апликација у JavaScript-у: *композиција* или *наслеђивање*. Оба приступа имају своје предности и мане, али хајде да их објаснимо у контексту игре.
+
+✅ Једна од најпознатијих књига о програмирању односи се на [шаблоне дизајна](https://en.wikipedia.org/wiki/Design_Patterns).
+
+У игри имате `објекте игре`, који су објекти који постоје на екрану. То значи да имају локацију у картезијанском координатном систему, коју карактеришу `x` и `y` координате. Како развијате игру, приметићете да сви ваши објекти игре имају стандардна својства, заједничка за сваку игру коју креирате, а то су елементи који су:
+
+- **засновани на локацији** Већина, ако не и сви, елементи игре су засновани на локацији. То значи да имају локацију, `x` и `y`.
+- **покретни** Ово су објекти који могу да се померају на нову локацију. То је обично херој, чудовиште или NPC (неконтролисани лик), али не, на пример, статичан објекат као што је дрво.
+- **самоуништавајући** Ови објекти постоје само одређено време пре него што се припреме за брисање. Обично је то представљено као `мртав` или `уништен` булеан који сигнализира игри да овај објекат више не треба да се приказује.
+- **са временским ограничењем** 'Временско ограничење' је типично својство краткотрајних објеката. Типичан пример је комад текста или графички ефекат попут експлозије који треба да се види само неколико милисекунди.
+
+✅ Размислите о игри као што је Pac-Man. Можете ли идентификовати четири типа објеката наведена изнад у овој игри?
+
+### Изражавање понашања
+
+Све што смо горе описали представља понашање које објекти игре могу имати. Како то можемо кодирати? Ово понашање можемо изразити као методе повезане са класама или објектима.
+
+**Класе**
+
+Идеја је да се користе `класе` у комбинацији са `наслеђивањем` како би се одређено понашање додало класи.
+
+✅ Наслеђивање је важан концепт за разумевање. Сазнајте више у [MDN чланку о наслеђивању](https://developer.mozilla.org/docs/Web/JavaScript/Inheritance_and_the_prototype_chain).
+
+Изражено кроз код, објекат игре обично изгледа овако:
+
+```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();
+```
+
+✅ Одвојите неколико минута да замислите Pac-Man хероја (на пример, Inky, Pinky или Blinky) и како би био написан у JavaScript-у.
+
+**Композиција**
+
+Други начин руковања наслеђивањем објеката је коришћењем *композиције*. Тада објекти изражавају своје понашање на следећи начин:
+
+```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'); 
+```
+
+**Који шаблон треба да користим?**
+
+На вама је да одлучите који шаблон ћете користити. JavaScript подржава оба ова парадигме.
+
+--
+
+Још један шаблон који је чест у развоју игара бави се проблемом управљања корисничким искуством и перформансама игре.
+
+## Pub/sub шаблон
+
+✅ Pub/Sub означава 'објави-претплати се'
+
+Овај шаблон се бави идејом да различити делови ваше апликације не би требало да знају једни за друге. Зашто је то важно? Олакшава разумевање шта се генерално дешава ако су различити делови раздвојени. Такође олакшава изненадну промену понашања ако је то потребно. Како то постижемо? Успостављамо неке концепте:
+
+- **порука**: Порука је обично текстуални низ праћен опционим садржајем (комадом података који појашњава о чему се ради у поруци). Типична порука у игри може бити `KEY_PRESSED_ENTER`.
+- **издавач**: Овај елемент *објављује* поруку и шаље је свим претплатницима.
+- **претплатник**: Овај елемент *слуша* одређене поруке и извршава неки задатак као резултат примања те поруке, као што је испаљивање ласера.
+
+Имплементација је прилично мала по величини, али је веома моћан шаблон. Ево како може бити имплементиран:
+
+```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))
+    }
+  }
+}
+
+```
+
+Да бисмо користили горњи код, можемо направити веома малу имплементацију:
+
+```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)
+  }
+});
+```
+
+Горе повезујемо догађај са тастатуре, `ArrowLeft`, и шаљемо поруку `HERO_MOVE_LEFT`. Слушамо ту поруку и као резултат померамо `хероја`. Снага овог шаблона је у томе што слушач догађаја и херој не знају једно за друго. Можете променити `ArrowLeft` у тастер `A`. Поред тога, могуће је урадити нешто потпуно другачије на `ArrowLeft` прављењем неколико измена у функцији `on` објекта eventEmitter:
+
+```javascript
+eventEmitter.on(Messages.HERO_MOVE_LEFT, () => {
+  hero.move(5,0);
+});
+```
+
+Како ствари постају сложеније када ваша игра расте, овај шаблон остаје исте сложености, а ваш код остаје чист. Препоручује се усвајање овог шаблона.
+
+---
+
+## 🚀 Изазов
+
+Размислите о томе како Pub-Sub шаблон може побољшати игру. Који делови би требало да емитују догађаје, а како би игра требало да реагује на њих? Сада је ваша шанса да будете креативни, размишљајући о новој игри и како би њени делови могли да се понашају.
+
+## Квиз после предавања
+
+[Квиз после предавања](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/30)
+
+## Преглед и самостално учење
+
+Сазнајте више о Pub/Sub шаблону [читајући о њему](https://docs.microsoft.com/azure/architecture/patterns/publisher-subscriber/?WT.mc_id=academic-77807-sagibbon).
+
+## Задатак
+
+[Направите макету игре](assignment.md)
+
+---
+
+**Одрицање од одговорности**:  
+Овај документ је преведен коришћењем услуге за превођење помоћу вештачке интелигенције [Co-op Translator](https://github.com/Azure/co-op-translator). Иако се трудимо да обезбедимо тачност, молимо вас да имате у виду да аутоматски преводи могу садржати грешке или нетачности. Оригинални документ на његовом изворном језику треба сматрати меродавним извором. За критичне информације препоручује се професионални превод од стране људи. Не преузимамо одговорност за било каква погрешна тумачења или неспоразуме који могу настати услед коришћења овог превода.
\ No newline at end of file
diff --git a/translations/sr/6-space-game/1-introduction/assignment.md b/translations/sr/6-space-game/1-introduction/assignment.md
new file mode 100644
index 00000000..5034a929
--- /dev/null
+++ b/translations/sr/6-space-game/1-introduction/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "009bdedee9cc82988264be8cb31f9bf4",
+  "translation_date": "2025-08-27T22:25:03+00:00",
+  "source_file": "6-space-game/1-introduction/assignment.md",
+  "language_code": "sr"
+}
+-->
+# Осмислите игру
+
+## Упутства
+
+Користећи примере кода из лекције, направите представу игре коју волите. Мора бити једноставна игра, али циљ је да користите или шаблон класе или шаблон композиције, као и pub/sub шаблон, како бисте показали како игра може да се покрене. Будите креативни!
+
+## Рубрика
+
+| Критеријум | Изузетно                                               | Прихватљиво                                           | Потребно побољшање                                 |
+| ---------- | ------------------------------------------------------ | ---------------------------------------------------- | -------------------------------------------------- |
+|            | Три елемента су постављена на екран и манипулисана      | Два елемента су постављена на екран и манипулисана   | Један елемент је постављен на екран и манипулисан |
+
+---
+
+**Одрицање од одговорности**:  
+Овај документ је преведен коришћењем услуге за превођење помоћу вештачке интелигенције [Co-op Translator](https://github.com/Azure/co-op-translator). Иако се трудимо да обезбедимо тачност, молимо вас да имате у виду да аутоматски преводи могу садржати грешке или нетачности. Оригинални документ на његовом изворном језику треба сматрати ауторитативним извором. За критичне информације препоручује се професионални превод од стране људи. Не преузимамо одговорност за било каква погрешна тумачења или неспоразуме који могу настати услед коришћења овог превода.
\ No newline at end of file
diff --git a/translations/sr/6-space-game/2-drawing-to-canvas/README.md b/translations/sr/6-space-game/2-drawing-to-canvas/README.md
new file mode 100644
index 00000000..9dde470d
--- /dev/null
+++ b/translations/sr/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:20:17+00:00",
+  "source_file": "6-space-game/2-drawing-to-canvas/README.md",
+  "language_code": "sr"
+}
+-->
+# Направите свемирску игру, део 2: Цртање хероја и чудовишта на платну
+
+## Квиз пре предавања
+
+[Квиз пре предавања](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/31)
+
+## Платно
+
+Платно је HTML елемент који по подразумеваном подешавању нема садржај; то је празна површина. Морате га попунити цртањем.
+
+✅ Прочитајте [више о Canvas API-ју](https://developer.mozilla.org/docs/Web/API/Canvas_API) на MDN.
+
+Ево како се обично декларише, као део тела странице:
+
+```html
+<canvas id="myCanvas" width="200" height="100"></canvas>
+```
+
+Горе постављамо `id`, `width` и `height`.
+
+- `id`: поставите ово да бисте добили референцу када треба да комуницирате са њим.
+- `width`: ово је ширина елемента.
+- `height`: ово је висина елемента.
+
+## Цртање једноставне геометрије
+
+Платно користи картезијански координатни систем за цртање. Због тога користи x-осу и y-осу да изрази где се нешто налази. Локација `0,0` је горњи леви угао, а доњи десни угао је оно што сте поставили као ШИРИНУ и ВИСИНУ платна.
+
+![мрежа платна](../../../../translated_images/canvas_grid.5f209da785ded492a01ece440e3032afe51efa500cc2308e5ea4252487ceaf0b.sr.png)  
+> Слика са [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes)
+
+Да бисте цртали на елементу платна, потребно је да прођете кроз следеће кораке:
+
+1. **Добијте референцу** на елемент платна.
+1. **Добијте референцу** на контекст елемента који се налази на платну.
+1. **Извршите операцију цртања** користећи контекст елемента.
+
+Код за горе наведене кораке обично изгледа овако:
+
+```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 се углавном фокусира на 2D облике, али можете цртати и 3D елементе на веб страници; за то можете користити [WebGL API](https://developer.mozilla.org/docs/Web/API/WebGL_API).
+
+Можете цртати разне ствари помоћу Canvas API-ја, као што су:
+
+- **Геометријски облици**, већ смо показали како се црта правоугаоник, али постоји много више што можете да нацртате.
+- **Текст**, можете нацртати текст са било којим фонтом и бојом коју желите.
+- **Слике**, можете нацртати слику на основу сликовног ресурса, као што је .jpg или .png, на пример.
+
+✅ Пробајте! Знате како да нацртате правоугаоник, можете ли нацртати круг на страници? Погледајте неке занимљиве цртеже на платну на CodePen-у. Ево [посебно импресивног примера](https://codepen.io/dissimulate/pen/KrAwx).
+
+## Учитавање и цртање сликовног ресурса
+
+Сликовни ресурс учитавате креирањем `Image` објекта и постављањем његовог `src` својства. Затим слушате `load` догађај да бисте знали када је спреман за употребу. Код изгледа овако:
+
+### Учитавање ресурса
+
+```javascript
+const img = new Image();
+img.src = 'path/to/my/image.png';
+img.onload = () => {
+  // image loaded and ready to be used
+}
+```
+
+### Шаблон за учитавање ресурса
+
+Препоручује се да горе наведено обмотате у конструкцију попут ове, како би било лакше за употребу и да бисте манипулисали њиме само када је потпуно учитан:
+
+```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')
+}
+
+```
+
+Да бисте нацртали ресурсе игре на екрану, ваш код би изгледао овако:
+
+```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);
+}
+```
+
+## Сада је време да почнете да правите своју игру
+
+### Шта направити
+
+Направићете веб страницу са Canvas елементом. Требало би да приказује црни екран `1024*768`. Обезбедили смо вам две слике:
+
+- Херојски брод
+
+   ![Херојски брод](../../../../translated_images/player.dd24c1afa8c71e9b82b2958946d4bad13308681392d4b5ddcc61a0e818ef8088.sr.png)
+
+- 5*5 чудовишта
+
+   ![Брод чудовишта](../../../../translated_images/enemyShip.5df2a822c16650c2fb3c06652e8ec8120cdb9122a6de46b9a1a56d54db22657f.sr.png)
+
+### Препоручени кораци за почетак развоја
+
+Пронађите датотеке које су креиране за вас у подфолдеру `your-work`. Требало би да садржи следеће:
+
+```bash
+-| assets
+  -| enemyShip.png
+  -| player.png
+-| index.html
+-| app.js
+-| package.json
+```
+
+Отворите копију овог фолдера у Visual Studio Code-у. Потребно је да имате подешено локално развојно окружење, пожељно са Visual Studio Code-ом, NPM-ом и Node-ом инсталираним. Ако немате подешен `npm` на вашем рачунару, [овде је објашњено како то да урадите](https://www.npmjs.com/get-npm).
+
+Започните свој пројекат тако што ћете отићи у фолдер `your_work`:
+
+```bash
+cd your-work
+npm start
+```
+
+Горе наведено ће покренути HTTP сервер на адреси `http://localhost:5000`. Отворите прегледач и унесите ту адресу. То је тренутно празна страница, али то ће се променити.
+
+> Напомена: да бисте видели промене на екрану, освежите прегледач.
+
+### Додајте код
+
+Додајте потребан код у `your-work/app.js` да решите следеће:
+
+1. **Нацртајте** платно са црном позадином  
+   > савет: додајте две линије испод одговарајућег TODO-а у `/app.js`, постављајући `ctx` елемент да буде црн, а горње/леве координате на 0,0, док висина и ширина треба да буду једнаке платну.
+2. **Учитајте** текстуре  
+   > савет: додајте слике играча и непријатеља користећи `await loadTexture` и прослеђујући путању до слике. Још увек их нећете видети на екрану!
+3. **Нацртајте** хероја у центру екрана у доњој половини  
+   > савет: користите `drawImage` API да нацртате heroImg на екрану, постављајући `canvas.width / 2 - 45` и `canvas.height - canvas.height / 4)`.
+4. **Нацртајте** 5*5 чудовишта  
+   > савет: сада можете да откоментирате код за цртање непријатеља на екрану. Затим идите у функцију `createEnemies` и изградите је.
+
+   Прво, поставите неке константе:
+
+    ```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;
+    ```
+
+    затим, направите петљу за цртање низа чудовишта на екрану:
+
+    ```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);
+        }
+      }
+    ```
+
+## Резултат
+
+Завршени резултат би требало да изгледа овако:
+
+![Црни екран са херојем и 5*5 чудовишта](../../../../translated_images/partI-solution.36c53b48c9ffae2a5e15496b23b604ba5393433e4bf91608a7a0a020eb7a2691.sr.png)
+
+## Решење
+
+Молимо вас да прво сами покушате да решите, али ако се заглавите, погледајте [решење](../../../../6-space-game/2-drawing-to-canvas/solution/app.js).
+
+---
+
+## 🚀 Изазов
+
+Научили сте о цртању помоћу Canvas API-ја фокусираног на 2D; погледајте [WebGL API](https://developer.mozilla.org/docs/Web/API/WebGL_API) и покушајте да нацртате 3D објекат.
+
+## Квиз после предавања
+
+[Квиз после предавања](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/32)
+
+## Преглед и самостално учење
+
+Сазнајте више о Canvas API-ју [читајући о њему](https://developer.mozilla.org/docs/Web/API/Canvas_API).
+
+## Задатак
+
+[Играјте се са Canvas API-јем](assignment.md)
+
+---
+
+**Одрицање од одговорности**:  
+Овај документ је преведен коришћењем услуге за превођење помоћу вештачке интелигенције [Co-op Translator](https://github.com/Azure/co-op-translator). Иако настојимо да обезбедимо тачност, молимо вас да имате у виду да аутоматски преводи могу садржати грешке или нетачности. Оригинални документ на његовом изворном језику треба сматрати меродавним извором. За критичне информације препоручује се професионални превод од стране људи. Не преузимамо одговорност за било каква погрешна тумачења или неспоразуме који могу настати услед коришћења овог превода.
\ No newline at end of file
diff --git a/translations/sr/6-space-game/2-drawing-to-canvas/assignment.md b/translations/sr/6-space-game/2-drawing-to-canvas/assignment.md
new file mode 100644
index 00000000..456580e3
--- /dev/null
+++ b/translations/sr/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:21:03+00:00",
+  "source_file": "6-space-game/2-drawing-to-canvas/assignment.md",
+  "language_code": "sr"
+}
+-->
+# Играјте се са Canvas API
+
+## Упутства
+
+Изаберите један елемент Canvas API и направите нешто занимљиво око њега. Можете ли направити малу галаксију од поновљених звезда? Можете ли направити занимљиву текстуру обојених линија? Можете погледати CodePen за инспирацију (али немојте копирати).
+
+## Рубрика
+
+| Критеријум | Изузетно                                                 | Довољно                            | Потребно побољшање     |
+| ---------- | ------------------------------------------------------- | ---------------------------------- | --------------------- |
+|            | Код је предат и приказује занимљиву текстуру или облик  | Код је предат, али не ради         | Код није предат        |
+
+---
+
+**Одрицање од одговорности**:  
+Овај документ је преведен коришћењем услуге за превођење помоћу вештачке интелигенције [Co-op Translator](https://github.com/Azure/co-op-translator). Иако настојимо да обезбедимо тачност, молимо вас да имате у виду да аутоматски преводи могу садржати грешке или нетачности. Оригинални документ на његовом изворном језику треба сматрати меродавним извором. За критичне информације препоручује се професионални превод од стране људи. Не преузимамо одговорност за било каква погрешна тумачења или неспоразуме који могу произаћи из коришћења овог превода.
\ No newline at end of file
diff --git a/translations/sr/6-space-game/3-moving-elements-around/README.md b/translations/sr/6-space-game/3-moving-elements-around/README.md
new file mode 100644
index 00000000..aecc63e7
--- /dev/null
+++ b/translations/sr/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:18:44+00:00",
+  "source_file": "6-space-game/3-moving-elements-around/README.md",
+  "language_code": "sr"
+}
+-->
+# Изградња свемирске игре, део 3: Додавање кретања
+
+## Квиз пре предавања
+
+[Квиз пре предавања](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/33)
+
+Игре нису баш забавне док се ванземаљци не почну кретати по екрану! У овој игри ћемо користити два типа кретања:
+
+- **Кретање помоћу тастатуре/мишa**: када корисник интерагује са тастатуром или мишем да би померио објекат на екрану.
+- **Кретање изазвано игром**: када игра помера објекат у одређеним временским интервалима.
+
+Како онда померамо ствари на екрану? Све се своди на координатни систем: мењамо локацију (x, y) објекта и затим поново цртамо екран.
+
+Типично, потребни су следећи кораци да би се постигло *кретање* на екрану:
+
+1. **Поставите нову локацију** за објекат; ово је потребно да би се објекат перципирао као да се померио.
+2. **Очистите екран**, екран треба очистити између цртања. Можемо га очистити цртањем правоугаоника који попуњавамо бојом позадине.
+3. **Поново нацртајте објекат** на новој локацији. На овај начин коначно постижемо померање објекта са једне локације на другу.
+
+Ево како то може изгледати у коду:
+
+```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);
+```
+
+✅ Можете ли смислити разлог зашто поновно цртање вашег хероја много пута у секунди може довести до проблема са перформансама? Прочитајте о [алтернативама овом шаблону](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas).
+
+## Обрада догађаја тастатуре
+
+Догађаје обрађујете тако што повезујете одређене догађаје са кодом. Догађаји тастатуре се активирају на целом прозору, док се догађаји миша, као што је `click`, могу повезати са кликом на одређени елемент. Кроз овај пројекат користићемо догађаје тастатуре.
+
+Да бисте обрадили догађај, потребно је да користите метод `addEventListener()` прозора и да му дате два улазна параметра. Први параметар је назив догађаја, на пример `keyup`. Други параметар је функција која треба да се позове као резултат догађаја.
+
+Ево примера:
+
+```javascript
+window.addEventListener('keyup', (evt) => {
+  // `evt.key` = string representation of the key
+  if (evt.key === 'ArrowUp') {
+    // do something
+  }
+})
+```
+
+За догађаје тастатуре постоје два својства на догађају која можете користити да видите који је тастер притиснут:
+
+- `key`, ово је стринг репрезентација притиснутог тастера, на пример `ArrowUp`
+- `keyCode`, ово је нумеричка репрезентација, на пример `37`, што одговара `ArrowLeft`.
+
+✅ Манипулација догађајима тастатуре је корисна и ван развоја игара. Које друге примене можете замислити за ову технику?
+
+### Посебни тастери: упозорење
+
+Постоје неки *посебни* тастери који утичу на прозор. То значи да ако слушате догађај `keyup` и користите ове посебне тастере за померање вашег хероја, то ће такође изазвати хоризонтално скроловање. Због тога ћете можда желети да *искључите* ово уграђено понашање прегледача док развијате своју игру. Потребан вам је код као овај:
+
+```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);
+```
+
+Горњи код ће осигурати да стрелице и тастер за размак имају своје *подразумевано* понашање искључено. Механизам *искључивања* се дешава када позовемо `e.preventDefault()`.
+
+## Кретање изазвано игром
+
+Можемо учинити да се ствари саме крећу користећи тајмере као што су функције `setTimeout()` или `setInterval()` које ажурирају локацију објекта на сваком интервалу. Ево како то може изгледати:
+
+```javascript
+let id = setInterval(() => {
+  //move the enemy on the y axis
+  enemy.y += 10;
+})
+```
+
+## Петља игре
+
+Петља игре је концепт који је у суштини функција која се позива у редовним интервалима. Зове се петља игре јер све што треба да буде видљиво кориснику се црта унутар петље. Петља игре користи све објекте игре који су део игре, цртајући све њих осим ако из неког разлога не би требало да буду део игре. На пример, ако је објекат непријатељ који је погођен ласером и експлодира, он више није део тренутне петље игре (о овоме ћете више научити у наредним лекцијама).
+
+Ево како петља игре обично изгледа, изражена у коду:
+
+```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);
+```
+
+Горња петља се позива сваких `200` милисекунди да би се поново нацртала платформа. Имате могућност да изаберете најбољи интервал који има смисла за вашу игру.
+
+## Наставак свемирске игре
+
+Узећете постојећи код и проширити га. Можете започети са кодом који сте завршили током првог дела или користити код из [Део II - почетак](../../../../6-space-game/3-moving-elements-around/your-work).
+
+- **Померање хероја**: додаћете код да осигурате да можете померати хероја помоћу стрелица.
+- **Померање непријатеља**: такође ћете морати да додате код да осигурате да се непријатељи померају од врха ка дну у одређеном темпу.
+
+## Препоручени кораци
+
+Пронађите датотеке које су креиране за вас у подфолдеру `your-work`. Требало би да садрже следеће:
+
+```bash
+-| assets
+  -| enemyShip.png
+  -| player.png
+-| index.html
+-| app.js
+-| package.json
+```
+
+Започните свој пројекат у фолдеру `your_work` тако што ћете укуцати:
+
+```bash
+cd your-work
+npm start
+```
+
+Горњи код ће покренути HTTP сервер на адреси `http://localhost:5000`. Отворите прегледач и унесите ту адресу, тренутно би требало да приказује хероја и све непријатеље; ништа се још не помера!
+
+### Додајте код
+
+1. **Додајте посебне објекте** за `hero`, `enemy` и `game object`, они би требало да имају својства `x` и `y`. (Запамтите део о [Наслеђивању или композицији](../README.md)).
+
+   *САВЕТ* `game object` би требало да буде онај са `x` и `y` и способношћу да се нацрта на платформи.
+
+   >савет: започните додавањем нове класе GameObject са њеним конструктором дефинисаним као доле, а затим је нацртајте на платформи:
+  
+    ```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);
+      }
+    }
+    ```
+
+    Сада проширите овај GameObject да бисте креирали Hero и 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. **Додајте обрађиваче догађаја тастатуре** за навигацију (померање хероја горе/доле, лево/десно)
+
+   *ЗАПАМТИТЕ* то је координатни систем, горњи леви угао је `0,0`. Такође запамтите да додате код за заустављање *подразумеваног понашања*.
+
+   >савет: креирајте своју функцију onKeyDown и повежите је са прозором:
+
+   ```javascript
+    let onKeyDown = function (e) {
+	      console.log(e.keyCode);
+	        ...add the code from the lesson above to stop default behavior
+	      }
+    };
+
+    window.addEventListener("keydown", onKeyDown);
+   ```
+    
+   Проверите конзолу вашег прегледача у овом тренутку и посматрајте притиске на тастере који се бележе.
+
+3. **Примените** [Pub sub pattern](../README.md), ово ће одржати ваш код чистим док следите преостале делове.
+
+   Да бисте урадили овај последњи део, можете:
+
+   1. **Додајте слушаоца догађаја** на прозор:
+
+       ```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. **Креирајте класу EventEmitter** за објављивање и претплату на поруке:
+
+        ```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. **Додајте константе** и подесите 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. **Иницијализујте игру**
+
+    ```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. **Подесите петљу игре**
+
+   Преформулишите функцију window.onload да иницијализује игру и подесите петљу игре на добар интервал. Такође ћете додати ласерски зрак:
+
+    ```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. **Додајте код** за померање непријатеља у одређеним интервалима
+
+    Преформулишите функцију `createEnemies()` да креира непријатеље и дода их у нову класу 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);
+        }
+      }
+    }
+    ```
+    
+    и додајте функцију `createHero()` да уради сличан процес за хероја.
+    
+    ```javascript
+    function createHero() {
+      hero = new Hero(
+        canvas.width / 2 - 45,
+        canvas.height - canvas.height / 4
+      );
+      hero.img = heroImg;
+      gameObjects.push(hero);
+    }
+    ```
+
+    и на крају, додајте функцију `drawGameObjects()` да започнете цртање:
+
+    ```javascript
+    function drawGameObjects(ctx) {
+      gameObjects.forEach(go => go.draw(ctx));
+    }
+    ```
+
+    Ваши непријатељи би требало да почну да напредују ка вашем свемирском броду!
+
+---
+
+## 🚀 Изазов
+
+Као што видите, ваш код може постати 'шпагети код' када почнете да додајете функције, променљиве и класе. Како можете боље организовати свој код тако да буде читљивији? Осмислите систем за организовање вашег кода, чак и ако он и даље остаје у једној датотеци.
+
+## Квиз после предавања
+
+[Квиз после предавања](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/34)
+
+## Преглед и самостално учење
+
+Иако пишемо нашу игру без коришћења оквира, постоји много оквира за развој игара заснованих на JavaScript платформи. Одвојите време да прочитате [о овим оквирима](https://github.com/collections/javascript-game-engines).
+
+## Задатак
+
+[Коментаришите свој код](assignment.md)
+
+---
+
+**Одрицање од одговорности**:  
+Овај документ је преведен коришћењем услуге за превођење помоћу вештачке интелигенције [Co-op Translator](https://github.com/Azure/co-op-translator). Иако се трудимо да обезбедимо тачност, молимо вас да имате у виду да аутоматизовани преводи могу садржати грешке или нетачности. Оригинални документ на његовом изворном језику треба сматрати ауторитативним извором. За критичне информације препоручује се професионални превод од стране људи. Не преузимамо одговорност за било каква погрешна тумачења или неспоразуме који могу настати услед коришћења овог превода.
\ No newline at end of file
diff --git a/translations/sr/6-space-game/3-moving-elements-around/assignment.md b/translations/sr/6-space-game/3-moving-elements-around/assignment.md
new file mode 100644
index 00000000..06f29836
--- /dev/null
+++ b/translations/sr/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:19:27+00:00",
+  "source_file": "6-space-game/3-moving-elements-around/assignment.md",
+  "language_code": "sr"
+}
+-->
+# Коментаришите свој код
+
+## Упутства
+
+Прегледајте ваш тренутни /app.js фајл у вашем фолдеру игре и пронађите начине да га коментаришете и уредите. Код се веома лако може отети контроли, а сада је добра прилика да додате коментаре како бисте осигурали да имате читљив код који можете користити касније.
+
+## Рубрика
+
+| Критеријум | Изузетно                                                          | Довољно                              | Потребно побољшање                                              |
+| ---------- | ---------------------------------------------------------------- | ------------------------------------ | -------------------------------------------------------------- |
+|            | Код у `app.js` је у потпуности коментарисан и организован у логичке блокове | Код у `app.js` је адекватно коментарисан | Код у `app.js` је донекле неорганизован и недостају добри коментари |
+
+---
+
+**Одрицање од одговорности**:  
+Овај документ је преведен коришћењем услуге за превођење помоћу вештачке интелигенције [Co-op Translator](https://github.com/Azure/co-op-translator). Иако настојимо да обезбедимо тачност, молимо вас да имате у виду да аутоматизовани преводи могу садржати грешке или нетачности. Оригинални документ на изворном језику треба сматрати ауторитативним извором. За критичне информације препоручује се професионални превод од стране људи. Не сносимо одговорност за било каква погрешна тумачења или неспоразуме који могу произаћи из коришћења овог превода.
\ No newline at end of file
diff --git a/translations/sr/6-space-game/4-collision-detection/README.md b/translations/sr/6-space-game/4-collision-detection/README.md
new file mode 100644
index 00000000..255b1917
--- /dev/null
+++ b/translations/sr/6-space-game/4-collision-detection/README.md
@@ -0,0 +1,311 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "2e83e38c35dc003f046d7cc0bbfd4920",
+  "translation_date": "2025-08-27T22:22:13+00:00",
+  "source_file": "6-space-game/4-collision-detection/README.md",
+  "language_code": "sr"
+}
+-->
+# Направите свемирску игру, део 4: Додавање ласера и детекција судара
+
+## Квиз пре предавања
+
+[Квиз пре предавања](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/35)
+
+У овом лекцији ћете научити како да пуцате ласере помоћу JavaScript-а! Додаћемо две ствари у нашу игру:
+
+- **Ласер**: овај ласер се испаљује из брода вашег хероја и креће вертикално нагоре
+- **Детекција судара**, као део имплементације способности *пуцања*, додаћемо и нека занимљива правила игре:
+   - **Ласер погоди непријатеља**: Непријатељ умире ако га погоди ласер
+   - **Ласер погоди врх екрана**: Ласер се уништава ако погоди горњи део екрана
+   - **Судар непријатеља и хероја**: Непријатељ и херој се уништавају ако се сударе
+   - **Непријатељ погоди дно екрана**: Непријатељ и херој се уништавају ако непријатељ стигне до дна екрана
+
+Укратко, ви -- *херој* -- морате погодити све непријатеље ласером пре него што стигну до дна екрана.
+
+✅ Урадите мало истраживање о првој рачунарској игри икада написаној. Која је била њена функционалност?
+
+Будимо херојски заједно!
+
+## Детекција судара
+
+Како да извршимо детекцију судара? Треба да замислимо наше објекте у игри као правоугаонике који се крећу. Зашто, питате се? Па, слика која се користи за цртање објекта у игри је правоугаоник: има `x`, `y`, `ширину` и `висину`.
+
+Ако се два правоугаоника, тј. херој и непријатељ *пресеку*, имате судар. Шта би требало да се догоди након тога зависи од правила игре. Да бисте имплементирали детекцију судара, потребно је следеће:
+
+1. Начин да добијете правоугаоник који представља објекат у игри, нешто овако:
+
+   ```javascript
+   rectFromGameObject() {
+     return {
+       top: this.y,
+       left: this.x,
+       bottom: this.y + this.height,
+       right: this.x + this.width
+     }
+   }
+   ```
+
+2. Функцију за поређење, која може изгледати овако:
+
+   ```javascript
+   function intersectRect(r1, r2) {
+     return !(r2.left > r1.right ||
+       r2.right < r1.left ||
+       r2.top > r1.bottom ||
+       r2.bottom < r1.top);
+   }
+   ```
+
+## Како уништавамо ствари
+
+Да бисте уништили ствари у игри, потребно је да игри кажете да више не треба да црта тај објекат у петљи игре која се покреће у одређеним интервалима. Један начин да то урадите је да означите објекат као *мртав* када се нешто догоди, овако:
+
+```javascript
+// collision happened
+enemy.dead = true
+```
+
+Затим можете да уклоните *мртве* објекте пре него што поново нацртате екран, овако:
+
+```javascript
+gameObjects = gameObject.filter(go => !go.dead);
+```
+
+## Како испаљујемо ласер
+
+Испаљивање ласера подразумева реаговање на догађај притискања тастера и креирање објекта који се креће у одређеном правцу. Због тога треба да извршимо следеће кораке:
+
+1. **Креирајте објекат ласера**: са врха брода нашег хероја, који по креирању почиње да се креће нагоре ка врху екрана.
+2. **Повежите код са догађајем притискања тастера**: треба да изаберемо тастер на тастатури који представља пуцање ласера од стране играча.
+3. **Креирајте објекат у игри који изгледа као ласер** када се притисне тастер.
+
+## Време за хлађење ласера
+
+Ласер треба да се испаљује сваки пут када притиснете тастер, на пример *space*. Да бисмо спречили игру да производи превише ласера у кратком времену, потребно је да то поправимо. Поправка се врши имплементацијом такозваног *времена за хлађење*, тајмера, који осигурава да ласер може да се испаљује само у одређеним интервалима. То можете имплементирати на следећи начин:
+
+```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.
+    }
+  }
+}
+```
+
+✅ Погледајте лекцију 1 у серији свемирске игре да се подсетите на *време за хлађење*.
+
+## Шта треба направити
+
+Узећете постојећи код (који сте требали очистити и рефакторисати) из претходне лекције и проширити га. Можете почети са кодом из дела II или користити код из [Део III - почетак](../../../../../../../../../your-work).
+
+> савет: ласер са којим ћете радити већ се налази у вашој фасцикли са ресурсима и референциран је у вашем коду
+
+- **Додајте детекцију судара**, када ласер удари нешто, треба да се примењују следећа правила:
+   1. **Ласер погоди непријатеља**: непријатељ умире ако га погоди ласер
+   2. **Ласер погоди врх екрана**: ласер се уништава ако погоди горњи део нашег екрана
+   3. **Судар непријатеља и хероја**: непријатељ и херој се уништавају ако се сударе
+   4. **Непријатељ погоди дно екрана**: непријатељ и херој се уништавају ако непријатељ стигне до дна екрана
+
+## Препоручени кораци
+
+Пронађите датотеке које су креиране за вас у подфасцикли `your-work`. Требало би да садрже следеће:
+
+```bash
+-| assets
+  -| enemyShip.png
+  -| player.png
+  -| laserRed.png
+-| index.html
+-| app.js
+-| package.json
+```
+
+Започните свој пројекат у фасцикли `your_work` тако што ћете укуцати:
+
+```bash
+cd your-work
+npm start
+```
+
+Горенаведено ће покренути HTTP сервер на адреси `http://localhost:5000`. Отворите прегледач и унесите ту адресу, тренутно би требало да приказује хероја и све непријатеље, ништа се још не помера :).
+
+### Додајте код
+
+1. **Подесите правоугаоник који представља ваш објекат у игри, ради детекције судара** Следећи код вам омогућава да добијете правоугаоник који представља `GameObject`. Уредите вашу GameObject класу да је проширите:
+
+    ```javascript
+    rectFromGameObject() {
+        return {
+          top: this.y,
+          left: this.x,
+          bottom: this.y + this.height,
+          right: this.x + this.width,
+        };
+      }
+    ```
+
+2. **Додајте код који проверава судар** Ово ће бити нова функција која тестира да ли се два правоугаоника пресеку:
+
+    ```javascript
+    function intersectRect(r1, r2) {
+      return !(
+        r2.left > r1.right ||
+        r2.right < r1.left ||
+        r2.top > r1.bottom ||
+        r2.bottom < r1.top
+      );
+    }
+    ```
+
+3. **Додајте могућност испаљивања ласера**
+   1. **Додајте поруку за догађај притискања тастера**. Тастер *space* треба да креира ласер непосредно изнад брода хероја. Додајте три константе у Messages објекат:
+
+       ```javascript
+        KEY_EVENT_SPACE: "KEY_EVENT_SPACE",
+        COLLISION_ENEMY_LASER: "COLLISION_ENEMY_LASER",
+        COLLISION_ENEMY_HERO: "COLLISION_ENEMY_HERO",
+       ```
+
+   1. **Обрадите тастер space**. Уредите функцију `window.addEventListener` за догађај keyup да обради тастер space:
+
+      ```javascript
+        } else if(evt.keyCode === 32) {
+          eventEmitter.emit(Messages.KEY_EVENT_SPACE);
+        }
+      ```
+
+    1. **Додајте слушаоце догађаја**. Уредите функцију `initGame()` да осигурате да херој може да пуца када се притисне тастер space:
+
+       ```javascript
+       eventEmitter.on(Messages.KEY_EVENT_SPACE, () => {
+        if (hero.canFire()) {
+          hero.fire();
+        }
+       ```
+
+       и додајте нову функцију `eventEmitter.on()` да осигурате понашање када непријатељ удари ласер:
+
+          ```javascript
+          eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => {
+            first.dead = true;
+            second.dead = true;
+          })
+          ```
+
+   1. **Померајте објекат**, Осигурајте да се ласер постепено креће ка врху екрана. Креираћете нову Laser класу која проширује `GameObject`, као што сте већ радили: 
+   
+      ```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. **Обрадите сударе**, Имплементирајте правила судара за ласер. Додајте функцију `updateGameObjects()` која тестира објекте који се сударају:
+
+      ```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);
+      }  
+      ```
+
+      Осигурајте да додате `updateGameObjects()` у вашу петљу игре у `window.onload`.
+
+   4. **Имплементирајте време за хлађење** за ласер, тако да може да се испаљује само у одређеним интервалима.
+
+      На крају, уредите Hero класу тако да може да има време за хлађење:
+
+       ```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;
+        }
+      }
+      ```
+
+У овом тренутку, ваша игра има неку функционалност! Можете се кретати помоћу стрелице на тастатури, пуцати ласер помоћу тастера space, и непријатељи нестају када их погодите. Браво!
+
+---
+
+## 🚀 Изазов
+
+Додајте експлозију! Погледајте ресурсе игре у [репозиторијуму Space Art](../../../../6-space-game/solution/spaceArt/readme.txt) и покушајте да додате експлозију када ласер погоди ванземаљца.
+
+## Квиз после предавања
+
+[Квиз после предавања](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/36)
+
+## Преглед и самостално учење
+
+Експериментишите са интервалима у вашој игри до сада. Шта се дешава када их промените? Прочитајте више о [JavaScript временским догађајима](https://www.freecodecamp.org/news/javascript-timing-events-settimeout-and-setinterval/).
+
+## Задатак
+
+[Истражите сударе](assignment.md)
+
+---
+
+**Одрицање од одговорности**:  
+Овај документ је преведен коришћењем услуге за превођење помоћу вештачке интелигенције [Co-op Translator](https://github.com/Azure/co-op-translator). Иако се трудимо да обезбедимо тачност, молимо вас да имате у виду да аутоматски преводи могу садржати грешке или нетачности. Оригинални документ на његовом изворном језику треба сматрати меродавним извором. За критичне информације препоручује се професионални превод од стране људи. Не преузимамо одговорност за било каква погрешна тумачења или неспоразуме који могу настати услед коришћења овог превода.
\ No newline at end of file
diff --git a/translations/sr/6-space-game/4-collision-detection/assignment.md b/translations/sr/6-space-game/4-collision-detection/assignment.md
new file mode 100644
index 00000000..f70345a8
--- /dev/null
+++ b/translations/sr/6-space-game/4-collision-detection/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "8a0a097b45e7c75a611e2795e4013f16",
+  "translation_date": "2025-08-27T22:23:02+00:00",
+  "source_file": "6-space-game/4-collision-detection/assignment.md",
+  "language_code": "sr"
+}
+-->
+# Истражите сударања
+
+## Упутства
+
+Да бисте боље разумели како сударања функционишу, направите веома малу игру са неколико предмета који се сударају. Учини да се крећу помоћу тастера или кликова мишем, и нека се нешто догоди једном од предмета када дође до сударања. То може бити нешто попут метеора који удара у Земљу или судара аутомобила на браник. Будите креативни!
+
+## Рубрика
+
+| Критеријум | Изузетно                                                                                                                | Задовољавајуће                 | Потребно побољшање |
+| ---------- | ----------------------------------------------------------------------------------------------------------------------- | ------------------------------ | ------------------ |
+|            | Комплетан функционалан пример кода је произведен, са предметима нацртаним на платну, основним сударањем и реакцијама    | Код је на неки начин непотпун  | Код не функционише |
+
+---
+
+**Одрицање од одговорности**:  
+Овај документ је преведен коришћењем услуге за превођење помоћу вештачке интелигенције [Co-op Translator](https://github.com/Azure/co-op-translator). Иако настојимо да обезбедимо тачност, молимо вас да имате у виду да аутоматски преводи могу садржати грешке или нетачности. Оригинални документ на његовом изворном језику треба сматрати меродавним извором. За критичне информације препоручује се професионални превод од стране људи. Не преузимамо одговорност за било каква погрешна тумачења или неспоразуме који могу настати услед коришћења овог превода.
\ No newline at end of file
diff --git a/translations/sr/6-space-game/4-collision-detection/solution/README.md b/translations/sr/6-space-game/4-collision-detection/solution/README.md
new file mode 100644
index 00000000..d9a9cc25
--- /dev/null
+++ b/translations/sr/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:23:34+00:00",
+  "source_file": "6-space-game/4-collision-detection/solution/README.md",
+  "language_code": "sr"
+}
+-->
+Ово је привремено место, намерно остављено празно
+
+---
+
+**Одрицање од одговорности**:  
+Овај документ је преведен коришћењем услуге за превођење помоћу вештачке интелигенције [Co-op Translator](https://github.com/Azure/co-op-translator). Иако се трудимо да обезбедимо тачност, молимо вас да имате у виду да аутоматски преводи могу садржати грешке или нетачности. Оригинални документ на његовом изворном језику треба сматрати меродавним извором. За критичне информације препоручује се професионални превод од стране људи. Не преузимамо одговорност за било каква погрешна тумачења или неспоразуме који могу настати услед коришћења овог превода.
\ No newline at end of file
diff --git a/translations/sr/6-space-game/4-collision-detection/your-work/README.md b/translations/sr/6-space-game/4-collision-detection/your-work/README.md
new file mode 100644
index 00000000..ae221424
--- /dev/null
+++ b/translations/sr/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:23:19+00:00",
+  "source_file": "6-space-game/4-collision-detection/your-work/README.md",
+  "language_code": "sr"
+}
+-->
+Ово је привремено место, намерно остављено празно
+
+---
+
+**Одрицање од одговорности**:  
+Овај документ је преведен коришћењем услуге за превођење помоћу вештачке интелигенције [Co-op Translator](https://github.com/Azure/co-op-translator). Иако се трудимо да превод буде тачан, молимо вас да имате у виду да аутоматски преводи могу садржати грешке или нетачности. Оригинални документ на његовом изворном језику треба сматрати меродавним извором. За критичне информације препоручује се професионални превод од стране људи. Не преузимамо одговорност за било каква погрешна тумачења или неспоразуме који могу настати услед коришћења овог превода.
\ No newline at end of file
diff --git a/translations/sr/6-space-game/5-keeping-score/README.md b/translations/sr/6-space-game/5-keeping-score/README.md
new file mode 100644
index 00000000..3bbc6c36
--- /dev/null
+++ b/translations/sr/6-space-game/5-keeping-score/README.md
@@ -0,0 +1,203 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "4e8250db84b027c9ff816b4e4c093457",
+  "translation_date": "2025-08-27T22:16:33+00:00",
+  "source_file": "6-space-game/5-keeping-score/README.md",
+  "language_code": "sr"
+}
+-->
+# Направите свемирску игру, део 5: Поени и животи
+
+## Квиз пре предавања
+
+[Квиз пре предавања](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/37)
+
+У овој лекцији ћете научити како да додате поене у игру и израчунате животе.
+
+## Цртање текста на екрану
+
+Да бисте могли да прикажете резултат игре на екрану, потребно је да знате како да поставите текст на екран. Одговор је коришћење методе `fillText()` на објекту canvas. Такође можете контролисати и друге аспекте, као што су који фонт да користите, боја текста и чак његово поравнање (лево, десно, центар). Испод је пример кода који црта текст на екрану.
+
+```javascript
+ctx.font = "30px Arial";
+ctx.fillStyle = "red";
+ctx.textAlign = "right";
+ctx.fillText("show this on the screen", 0, 0);
+```
+
+✅ Прочитајте више о [додавању текста на canvas](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_text), и слободно учините да ваш изгледа занимљивије!
+
+## Живот као концепт у игри
+
+Концепт живота у игри је само број. У контексту свемирске игре, уобичајено је доделити одређен број живота који се одузимају један по један када ваш брод претрпи оштећење. Лепо је ако можете приказати графички приказ овога, као што су мини-бродови или срца, уместо броја.
+
+## Шта треба направити
+
+Додајмо следеће у вашу игру:
+
+- **Резултат игре**: За сваки непријатељски брод који је уништен, херој треба да добије неке поене, предлажемо 100 поена по броду. Резултат игре треба да се приказује у доњем левом углу.
+- **Живот**: Ваш брод има три живота. Губите један живот сваки пут када се непријатељски брод судари са вама. Број живота треба да се приказује у доњем десном углу и да буде направљен од следеће графике ![слика живота](../../../../translated_images/life.6fb9f50d53ee0413cd91aa411f7c296e10a1a6de5c4a4197c718b49bf7d63ebf.sr.png).
+
+## Препоручени кораци
+
+Пронађите фајлове који су креирани за вас у подфолдеру `your-work`. Требало би да садрже следеће:
+
+```bash
+-| assets
+  -| enemyShip.png
+  -| player.png
+  -| laserRed.png
+-| index.html
+-| app.js
+-| package.json
+```
+
+Покрените свој пројекат у фолдеру `your_work` куцањем:
+
+```bash
+cd your-work
+npm start
+```
+
+Горњи команд ће покренути HTTP сервер на адреси `http://localhost:5000`. Отворите прегледач и унесите ту адресу. Тренутно би требало да се приказује херој и сви непријатељи, а када притиснете стрелице лево и десно, херој се помера и може да обара непријатеље.
+
+### Додавање кода
+
+1. **Копирајте потребне ресурсе** из фолдера `solution/assets/` у фолдер `your-work`; додаћете ресурс `life.png`. Додајте lifeImg у функцију window.onload: 
+
+    ```javascript
+    lifeImg = await loadTexture("assets/life.png");
+    ```
+
+1. Додајте `lifeImg` на листу ресурса:
+
+    ```javascript
+    let heroImg,
+    ...
+    lifeImg,
+    ...
+    eventEmitter = new EventEmitter();
+    ```
+  
+2. **Додајте променљиве**. Додајте код који представља ваш укупни резултат (0) и преостале животе (3), и прикажите ове резултате на екрану.
+
+3. **Проширите функцију `updateGameObjects()`**. Проширите функцију `updateGameObjects()` да обрађује сударе са непријатељима:
+
+    ```javascript
+    enemies.forEach(enemy => {
+        const heroRect = hero.rectFromGameObject();
+        if (intersectRect(heroRect, enemy.rectFromGameObject())) {
+          eventEmitter.emit(Messages.COLLISION_ENEMY_HERO, { enemy });
+        }
+      })
+    ```
+
+4. **Додајте `life` и `points`**. 
+   1. **Иницијализујте променљиве**. Испод `this.cooldown = 0` у класи `Hero`, подесите life и points:
+
+        ```javascript
+        this.life = 3;
+        this.points = 0;
+        ```
+
+   1. **Прикажите променљиве на екрану**. Прикажите ове вредности на екрану:
+
+        ```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. **Додајте методе у Game loop**. Уверите се да сте додали ове функције у вашу window.onload функцију испод `updateGameObjects()`:
+
+        ```javascript
+        drawPoints();
+        drawLife();
+        ```
+
+1. **Примените правила игре**. Примените следећа правила игре:
+
+   1. **За сваки судар хероја и непријатеља**, одузмите један живот.
+   
+      Проширите класу `Hero` да уради ово одузимање:
+
+        ```javascript
+        decrementLife() {
+          this.life--;
+          if (this.life === 0) {
+            this.dead = true;
+          }
+        }
+        ```
+
+   2. **За сваки ласер који погоди непријатеља**, повећајте резултат игре за 100 поена.
+
+      Проширите класу Hero да уради ово повећање:
+    
+        ```javascript
+          incrementPoints() {
+            this.points += 100;
+          }
+        ```
+
+        Додајте ове функције у ваше Collision Event Emitters:
+
+        ```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();
+        });
+        ```
+
+✅ Истражите друге игре које су направљене коришћењем JavaScript/Canvas. Које су њихове заједничке карактеристике?
+
+На крају овог рада, требало би да видите мале 'животне' бродове у доњем десном углу, поене у доњем левом углу, и требало би да видите како се број живота смањује када се сударите са непријатељима, а поени повећавају када пуцате на непријатеље. Браво! Ваша игра је скоро завршена.
+
+---
+
+## 🚀 Изазов
+
+Ваш код је скоро завршен. Можете ли замислити своје следеће кораке?
+
+## Квиз после предавања
+
+[Квиз после предавања](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/38)
+
+## Преглед и самостално учење
+
+Истражите неке начине на које можете повећавати и смањивати резултате игре и животе. Постоје занимљиви game engine-и као што је [PlayFab](https://playfab.com). Како би коришћење једног од њих побољшало вашу игру?
+
+## Задатак
+
+[Направите игру са поенима](assignment.md)
+
+---
+
+**Одрицање од одговорности**:  
+Овај документ је преведен коришћењем услуге за превођење помоћу вештачке интелигенције [Co-op Translator](https://github.com/Azure/co-op-translator). Иако се трудимо да обезбедимо тачност, молимо вас да имате у виду да аутоматски преводи могу садржати грешке или нетачности. Оригинални документ на његовом изворном језику треба сматрати меродавним извором. За критичне информације препоручује се професионални превод од стране људи. Не преузимамо одговорност за било каква погрешна тумачења или неспоразуме који могу настати услед коришћења овог превода.
\ No newline at end of file
diff --git a/translations/sr/6-space-game/5-keeping-score/assignment.md b/translations/sr/6-space-game/5-keeping-score/assignment.md
new file mode 100644
index 00000000..0609c6da
--- /dev/null
+++ b/translations/sr/6-space-game/5-keeping-score/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "81f292dbda01685b91735e0398dc0504",
+  "translation_date": "2025-08-27T22:17:07+00:00",
+  "source_file": "6-space-game/5-keeping-score/assignment.md",
+  "language_code": "sr"
+}
+-->
+# Направите игру са бодовима
+
+## Упутства
+
+Направите игру у којој приказујете животе и бодове на креативан начин. Један предлог је да животе прикажете као срца, а бодове као велики број у доњем централном делу екрана. Погледајте овде за [бесплатне ресурсе за игре](https://www.kenney.nl/)
+
+# Рубрика
+
+| Критеријум | Изузетно              | Прихватљиво                 | Потребно побољшање         |
+| ---------- | --------------------- | --------------------------- | -------------------------- |
+|            | цела игра је представљена | игра је делимично представљена | делимична игра садржи грешке |
+
+---
+
+**Одрицање од одговорности**:  
+Овај документ је преведен коришћењем услуге за превођење помоћу вештачке интелигенције [Co-op Translator](https://github.com/Azure/co-op-translator). Иако се трудимо да обезбедимо тачност, молимо вас да имате у виду да аутоматизовани преводи могу садржати грешке или нетачности. Оригинални документ на његовом изворном језику треба сматрати ауторитативним извором. За критичне информације препоручује се професионални превод од стране људског преводиоца. Не преузимамо одговорност за било каква погрешна тумачења или неспоразуме који могу настати услед коришћења овог превода.
\ No newline at end of file
diff --git a/translations/sr/6-space-game/5-keeping-score/solution/README.md b/translations/sr/6-space-game/5-keeping-score/solution/README.md
new file mode 100644
index 00000000..1832a6e6
--- /dev/null
+++ b/translations/sr/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:17:35+00:00",
+  "source_file": "6-space-game/5-keeping-score/solution/README.md",
+  "language_code": "sr"
+}
+-->
+Ово је привремено место, намерно остављено празно
+
+---
+
+**Одрицање од одговорности**:  
+Овај документ је преведен коришћењем услуге за превођење помоћу вештачке интелигенције [Co-op Translator](https://github.com/Azure/co-op-translator). Иако се трудимо да обезбедимо тачност, молимо вас да имате у виду да аутоматизовани преводи могу садржати грешке или нетачности. Оригинални документ на његовом изворном језику треба сматрати ауторитативним извором. За критичне информације препоручује се професионални превод од стране људског преводиоца. Не преузимамо одговорност за било каква погрешна тумачења или неспоразуме који могу настати услед коришћења овог превода.
\ No newline at end of file
diff --git a/translations/sr/6-space-game/5-keeping-score/your-work/README.md b/translations/sr/6-space-game/5-keeping-score/your-work/README.md
new file mode 100644
index 00000000..a6efaba0
--- /dev/null
+++ b/translations/sr/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:17:22+00:00",
+  "source_file": "6-space-game/5-keeping-score/your-work/README.md",
+  "language_code": "sr"
+}
+-->
+Ово је привремено место, намерно остављено празно
+
+---
+
+**Одрицање од одговорности**:  
+Овај документ је преведен коришћењем услуге за превођење помоћу вештачке интелигенције [Co-op Translator](https://github.com/Azure/co-op-translator). Иако настојимо да обезбедимо тачност, молимо вас да имате у виду да аутоматски преводи могу садржати грешке или нетачности. Оригинални документ на његовом изворном језику треба сматрати меродавним извором. За критичне информације препоручује се професионални превод од стране људи. Не преузимамо одговорност за било каква погрешна тумачења или неспоразуме који могу настати услед коришћења овог превода.
\ No newline at end of file
diff --git a/translations/sr/6-space-game/6-end-condition/README.md b/translations/sr/6-space-game/6-end-condition/README.md
new file mode 100644
index 00000000..94f1190f
--- /dev/null
+++ b/translations/sr/6-space-game/6-end-condition/README.md
@@ -0,0 +1,236 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "01336cddd638242e99b133614111ea40",
+  "translation_date": "2025-08-27T22:25:53+00:00",
+  "source_file": "6-space-game/6-end-condition/README.md",
+  "language_code": "sr"
+}
+-->
+# Направите свемирску игру, део 6: Крај и поновни почетак
+
+## Квиз пре предавања
+
+[Квиз пре предавања](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/39)
+
+Постоје различити начини да се изрази *услов за крај* у игри. На вама као креатору игре је да одредите зашто је игра завршена. Ево неких разлога, ако претпоставимо да говоримо о свемирској игри коју сте до сада правили:
+
+- **Уништили сте `N` непријатељских бродова**: Ово је прилично уобичајено ако игру делите на различите нивое, где је потребно уништити `N` непријатељских бродова да бисте завршили ниво.
+- **Ваш брод је уништен**: Постоје игре у којима губите ако је ваш брод уништен. Други уобичајени приступ је концепт живота. Сваки пут када је ваш брод уништен, одузима се један живот. Када изгубите све животе, губите игру.
+- **Сакупили сте `N` поена**: Још један уобичајени услов за крај је сакупљање поена. Како добијате поене зависи од вас, али је уобичајено да се поени додељују за различите активности, као што је уништавање непријатељског брода или сакупљање предмета који се *испусте* када су уништени.
+- **Завршили сте ниво**: Ово може укључивати неколико услова, као што су уништено `X` непријатељских бродова, сакупљено `Y` поена или можда сакупљен одређени предмет.
+
+## Поновни почетак
+
+Ако људи уживају у вашој игри, вероватно ће желети да је поново играју. Када се игра заврши из било ког разлога, требало би да понудите опцију за поновни почетак.
+
+✅ Размислите о условима под којима се игра завршава, а затим како се нуди опција за поновни почетак.
+
+## Шта треба направити
+
+Додаћете следећа правила у вашу игру:
+
+1. **Победа у игри**. Када су сви непријатељски бродови уништени, побеђујете у игри. Поред тога, прикажите неку врсту поруке о победи.
+1. **Поновни почетак**. Када изгубите све животе или победите у игри, требало би да понудите начин за поновни почетак игре. Запамтите! Потребно је да поново иницијализујете игру и очистите претходно стање игре.
+
+## Препоручени кораци
+
+Пронађите датотеке које су креиране за вас у подфолдеру `your-work`. Требало би да садрже следеће:
+
+```bash
+-| assets
+  -| enemyShip.png
+  -| player.png
+  -| laserRed.png
+  -| life.png
+-| index.html
+-| app.js
+-| package.json
+```
+
+Започните свој пројекат у фолдеру `your_work` тако што ћете укуцати:
+
+```bash
+cd your-work
+npm start
+```
+
+Горњи код ће покренути HTTP сервер на адреси `http://localhost:5000`. Отворите претраживач и унесите ту адресу. Ваша игра би требало да буде у стању да се игра.
+
+> савет: да бисте избегли упозорења у Visual Studio Code-у, измените функцију `window.onload` тако да позива `gameLoopId` без `let`, и декларишите `gameLoopId` на врху датотеке, независно: `let gameLoopId;`
+
+### Додајте код
+
+1. **Пратите услов за крај**. Додајте код који прати број непријатеља или ако је херојски брод уништен додавањем ове две функције:
+
+    ```javascript
+    function isHeroDead() {
+      return hero.life <= 0;
+    }
+
+    function isEnemiesDead() {
+      const enemies = gameObjects.filter((go) => go.type === "Enemy" && !go.dead);
+      return enemies.length === 0;
+    }
+    ```
+
+1. **Додајте логику у обрађиваче порука**. Измените `eventEmitter` да обрађује ове услове:
+
+    ```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. **Додајте нове типове порука**. Додајте ове поруке у објекат константи:
+
+    ```javascript
+    GAME_END_LOSS: "GAME_END_LOSS",
+    GAME_END_WIN: "GAME_END_WIN",
+    ```
+
+2. **Додајте код за поновни почетак** који поново покреће игру притиском на изабрано дугме.
+
+   1. **Слушајте притисак тастера `Enter`**. Измените слушач догађаја вашег прозора да слуша овај притисак:
+
+    ```javascript
+     else if(evt.key === "Enter") {
+        eventEmitter.emit(Messages.KEY_EVENT_ENTER);
+      }
+    ```
+
+   1. **Додајте поруку за поновни почетак**. Додајте ову поруку у константу Messages:
+
+        ```javascript
+        KEY_EVENT_ENTER: "KEY_EVENT_ENTER",
+        ```
+
+1. **Примените правила игре**. Примените следећа правила игре:
+
+   1. **Услов за победу играча**. Када су сви непријатељски бродови уништени, прикажите поруку о победи.
+
+      1. Прво, креирајте функцију `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. Креирајте функцију `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. **Логика за поновни почетак**. Када су сви животи изгубљени или играч победи у игри, прикажите да игра може бити поново покренута. Поред тога, поново покрените игру када се притисне тастер за *поновни почетак* (можете одлучити који тастер ће бити мапиран за поновни почетак).
+
+      1. Креирајте функцију `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. Додајте позив `eventEmitter`-у да ресетује игру у `initGame()`:
+
+        ```javascript
+        eventEmitter.on(Messages.KEY_EVENT_ENTER, () => {
+          resetGame();
+        });
+        ```
+
+     1. Додајте функцију `clear()` у EventEmitter:
+
+        ```javascript
+        clear() {
+          this.listeners = {};
+        }
+        ```
+
+👽 💥 🚀 Честитамо, Капетане! Ваша игра је завршена! Браво! 🚀 💥 👽
+
+---
+
+## 🚀 Изазов
+
+Додајте звук! Можете ли додати звук да побољшате игру, можда када се догоди погодак ласером, или када херој умре или победи? Погледајте овај [sandbox](https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_audio_play) да научите како да пуштате звук помоћу JavaScript-а.
+
+## Квиз после предавања
+
+[Квиз после предавања](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/40)
+
+## Преглед и самостално учење
+
+Ваш задатак је да направите нову узорну игру, па истражите неке занимљиве игре како бисте видели какав тип игре можете направити.
+
+## Задатак
+
+[Направите узорну игру](assignment.md)
+
+---
+
+**Одрицање од одговорности**:  
+Овај документ је преведен коришћењем услуге за превођење помоћу вештачке интелигенције [Co-op Translator](https://github.com/Azure/co-op-translator). Иако се трудимо да обезбедимо тачност, молимо вас да имате у виду да аутоматски преводи могу садржати грешке или нетачности. Оригинални документ на његовом изворном језику треба сматрати ауторитативним извором. За критичне информације препоручује се професионални превод од стране људи. Не преузимамо одговорност за било каква погрешна тумачења или неспоразуме који могу настати услед коришћења овог превода.
\ No newline at end of file
diff --git a/translations/sr/6-space-game/6-end-condition/assignment.md b/translations/sr/6-space-game/6-end-condition/assignment.md
new file mode 100644
index 00000000..b7065f5f
--- /dev/null
+++ b/translations/sr/6-space-game/6-end-condition/assignment.md
@@ -0,0 +1,33 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "24201cf428c7edba1ccec2a78a0dd8f8",
+  "translation_date": "2025-08-27T22:26:27+00:00",
+  "source_file": "6-space-game/6-end-condition/assignment.md",
+  "language_code": "sr"
+}
+-->
+# Направите пример игре
+
+## Упутства
+
+Покушајте да направите малу игру у којој ћете вежбати различите услове за крај игре. Промените услове између освајања одређеног броја поена, губитка свих живота хероја или пораза свих чудовишта. Направите нешто једноставно, попут авантуристичке игре засноване на конзоли. Користите следећи ток игре као инспирацију:
+
+```
+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****
+```
+
+## Рубрика
+
+| Критеријум | Изузетно              | Задовољавајуће              | Потребна побољшања         |
+| ---------- | --------------------- | --------------------------- | -------------------------- |
+|            | цела игра је представљена | игра је делимично представљена | делимична игра садржи грешке |
+
+---
+
+**Одрицање од одговорности**:  
+Овај документ је преведен коришћењем услуге за превођење помоћу вештачке интелигенције [Co-op Translator](https://github.com/Azure/co-op-translator). Иако се трудимо да превод буде тачан, молимо вас да имате у виду да аутоматизовани преводи могу садржати грешке или нетачности. Оригинални документ на његовом изворном језику треба сматрати меродавним извором. За критичне информације препоручује се професионални превод од стране људи. Не преузимамо одговорност за било каква погрешна тумачења или неспоразуме који могу настати услед коришћења овог превода.
\ No newline at end of file
diff --git a/translations/sr/6-space-game/6-end-condition/solution/README.md b/translations/sr/6-space-game/6-end-condition/solution/README.md
new file mode 100644
index 00000000..6d86c0ba
--- /dev/null
+++ b/translations/sr/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:26:54+00:00",
+  "source_file": "6-space-game/6-end-condition/solution/README.md",
+  "language_code": "sr"
+}
+-->
+Ово је привремено место, намерно остављено празно
+
+---
+
+**Одрицање од одговорности**:  
+Овај документ је преведен коришћењем услуге за превођење помоћу вештачке интелигенције [Co-op Translator](https://github.com/Azure/co-op-translator). Иако се трудимо да обезбедимо тачност, молимо вас да имате у виду да аутоматски преводи могу садржати грешке или нетачности. Оригинални документ на његовом изворном језику треба сматрати меродавним извором. За критичне информације препоручује се професионални превод од стране људи. Не преузимамо одговорност за било каква погрешна тумачења или неспоразуме који могу настати услед коришћења овог превода.
\ No newline at end of file
diff --git a/translations/sr/6-space-game/6-end-condition/your-work/README.md b/translations/sr/6-space-game/6-end-condition/your-work/README.md
new file mode 100644
index 00000000..6bee6d7b
--- /dev/null
+++ b/translations/sr/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:26:42+00:00",
+  "source_file": "6-space-game/6-end-condition/your-work/README.md",
+  "language_code": "sr"
+}
+-->
+Ово је привремено место, намерно остављено празно
+
+---
+
+**Одрицање од одговорности**:  
+Овај документ је преведен коришћењем услуге за превођење помоћу вештачке интелигенције [Co-op Translator](https://github.com/Azure/co-op-translator). Иако се трудимо да превод буде тачан, молимо вас да имате у виду да аутоматизовани преводи могу садржати грешке или нетачности. Оригинални документ на његовом изворном језику треба сматрати меродавним извором. За критичне информације препоручује се професионални превод од стране људи. Не преузимамо одговорност за било каква погрешна тумачења или неспоразуме који могу настати услед коришћења овог превода.
\ No newline at end of file
diff --git a/translations/sr/6-space-game/README.md b/translations/sr/6-space-game/README.md
new file mode 100644
index 00000000..f5d620ae
--- /dev/null
+++ b/translations/sr/6-space-game/README.md
@@ -0,0 +1,45 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "c40a698395ee5102715f7880bba3f2e7",
+  "translation_date": "2025-08-27T22:15:48+00:00",
+  "source_file": "6-space-game/README.md",
+  "language_code": "sr"
+}
+-->
+# Направите свемирску игру
+
+Свемирска игра за учење напреднијих основа JavaScript-а
+
+У овој лекцији ћете научити како да направите своју свемирску игру. Ако сте икада играли игру "Space Invaders", ова игра има сличну идеју: управљате свемирским бродом и пуцате на чудовишта која долазе одозго. Ево како ће изгледати завршена игра:
+
+![Завршена игра](../../../6-space-game/images/pewpew.gif)
+
+У ових шест лекција научићете следеће:
+
+- **Интеракција** са Canvas елементом за цртање на екрану
+- **Разумевање** картезијанског координатног система
+- **Учење** Pub-Sub шаблона за креирање звучне архитектуре игре која је лакша за одржавање и проширивање
+- **Коришћење** Async/Await за учитавање ресурса игре
+- **Руковање** догађајима са тастатуре
+
+## Преглед
+
+- Теорија
+   - [Увод у прављење игара са JavaScript-ом](1-introduction/README.md)
+- Практични део
+   - [Цртање на canvas-у](2-drawing-to-canvas/README.md)
+   - [Померање елемената по екрану](3-moving-elements-around/README.md)
+   - [Детекција судара](4-collision-detection/README.md)
+   - [Бодовање](5-keeping-score/README.md)
+   - [Завршетак и поновно покретање игре](6-end-condition/README.md)
+
+## Захвалнице
+
+Ресурси коришћени за ово су преузети са https://www.kenney.nl/.  
+Ако вас занима прављење игара, ово су заиста одлични ресурси, многи су бесплатни, а неки су плаћени.
+
+---
+
+**Одрицање од одговорности**:  
+Овај документ је преведен коришћењем услуге за превођење помоћу вештачке интелигенције [Co-op Translator](https://github.com/Azure/co-op-translator). Иако се трудимо да обезбедимо тачност, молимо вас да имате у виду да аутоматски преводи могу садржати грешке или нетачности. Оригинални документ на његовом изворном језику треба сматрати ауторитативним извором. За критичне информације препоручује се професионални превод од стране људи. Не преузимамо одговорност за било каква погрешна тумачења или неспоразуме који могу настати услед коришћења овог превода.
\ No newline at end of file
diff --git a/translations/sr/6-space-game/solution/README.md b/translations/sr/6-space-game/solution/README.md
new file mode 100644
index 00000000..496a1422
--- /dev/null
+++ b/translations/sr/6-space-game/solution/README.md
@@ -0,0 +1,15 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "068cbb9b3c10a96d503f6cdd6c9ace8c",
+  "translation_date": "2025-08-27T22:27:08+00:00",
+  "source_file": "6-space-game/solution/README.md",
+  "language_code": "sr"
+}
+-->
+Ово је привремено место, намерно остављено празно
+
+---
+
+**Одрицање од одговорности**:  
+Овај документ је преведен коришћењем услуге за превођење помоћу вештачке интелигенције [Co-op Translator](https://github.com/Azure/co-op-translator). Иако настојимо да обезбедимо тачност, молимо вас да имате у виду да аутоматски преводи могу садржати грешке или нетачности. Оригинални документ на његовом изворном језику треба сматрати меродавним извором. За критичне информације препоручује се професионални превод од стране људи. Не преузимамо одговорност за било каква погрешна тумачења или неспоразуме који могу настати услед коришћења овог превода.
\ No newline at end of file
diff --git a/translations/sr/7-bank-project/1-template-route/README.md b/translations/sr/7-bank-project/1-template-route/README.md
new file mode 100644
index 00000000..117b6864
--- /dev/null
+++ b/translations/sr/7-bank-project/1-template-route/README.md
@@ -0,0 +1,322 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "8da1b5e2c63f749808858c53f37b8ce7",
+  "translation_date": "2025-08-27T23:02:43+00:00",
+  "source_file": "7-bank-project/1-template-route/README.md",
+  "language_code": "sr"
+}
+-->
+# Изградња банкарске апликације, део 1: HTML шаблони и руте у веб апликацији
+
+## Квиз пре предавања
+
+[Квиз пре предавања](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/41)
+
+### Увод
+
+Од појаве JavaScript-а у претраживачима, веб-сајтови постају интерактивнији и сложенији него икада. Веб технологије се сада често користе за креирање потпуно функционалних апликација које раде директно у претраживачу, а које називамо [веб апликацијама](https://en.wikipedia.org/wiki/Web_application). Како су веб апликације веома интерактивне, корисници не желе да чекају да се цела страница поново учита сваки пут када се изврши нека акција. Зато се JavaScript користи за директно ажурирање HTML-а преко DOM-а, како би се обезбедило глатко корисничко искуство.
+
+У овој лекцији поставићемо основе за креирање банкарске веб апликације, користећи HTML шаблоне за креирање више екрана који могу бити приказани и ажурирани без потребе за поновним учитавањем целе HTML странице.
+
+### Предуслови
+
+Потребан вам је локални веб сервер за тестирање веб апликације коју ћемо изградити у овој лекцији. Ако га немате, можете инсталирати [Node.js](https://nodejs.org) и користити команду `npx lite-server` из вашег пројектног фолдера. Ово ће креирати локални веб сервер и отворити вашу апликацију у претраживачу.
+
+### Припрема
+
+На вашем рачунару креирајте фолдер под именом `bank` са фајлом `index.html` унутар њега. Почећемо са овим HTML [основним кодом](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 шаблони
+
+Ако желите да креирате више екрана за веб страницу, једно решење би било да креирате један HTML фајл за сваки екран који желите да прикажете. Међутим, ово решење има неке недостатке:
+
+- Морате поново учитати цео HTML приликом преласка са једног екрана на други, што може бити споро.
+- Тешко је делити податке између различитих екрана.
+
+Други приступ је да имате само један HTML фајл и дефинишете више [HTML шаблона](https://developer.mozilla.org/docs/Web/HTML/Element/template) користећи елемент `<template>`. Шаблон је поновљиви HTML блок који претраживач не приказује, а који се мора инстанцирати у току рада помоћу JavaScript-а.
+
+### Задатак
+
+Креираћемо банкарску апликацију са два екрана: страницу за пријаву и контролну таблу. Прво, додајмо у HTML тело елемент који ће служити као место за приказивање различитих екрана наше апликације:
+
+```html
+<div id="app">Loading...</div>
+```
+
+Додељујемо му `id` како бисмо га касније лакше пронашли помоћу JavaScript-а.
+
+> Савет: пошто ће садржај овог елемента бити замењен, можемо у њега ставити поруку или индикатор учитавања који ће се приказивати док се апликација учитава.
+
+Затим, додајмо испод HTML шаблон за страницу за пријаву. За сада ћемо у њега ставити само наслов и секцију која садржи линк који ћемо користити за навигацију.
+
+```html
+<template id="login">
+  <h1>Bank App</h1>
+  <section>
+    <a href="/dashboard">Login</a>
+  </section>
+</template>
+```
+
+Затим ћемо додати још један HTML шаблон за страницу контролне табле. Ова страница ће садржати различите секције:
+
+- Заглавље са насловом и линком за одјаву
+- Тренутно стање на банковном рачуну
+- Листу трансакција, приказану у табели
+
+```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>
+```
+
+> Савет: када креирате HTML шаблоне, ако желите да видите како ће изгледати, можете коментарисати линије `<template>` и `</template>` тако што ћете их обухватити са `<!-- -->`.
+
+✅ Зашто мислите да користимо `id` атрибуте на шаблонима? Да ли бисмо могли користити нешто друго, попут класа?
+
+## Приказивање шаблона помоћу JavaScript-а
+
+Ако пробате ваш тренутни HTML фајл у претраживачу, видећете да остаје заглављен на приказу `Loading...`. То је зато што треба да додамо JavaScript код за инстанцирање и приказивање HTML шаблона.
+
+Инстанцирање шаблона обично се ради у 3 корака:
+
+1. Проналажење елемента шаблона у DOM-у, на пример помоћу [`document.getElementById`](https://developer.mozilla.org/docs/Web/API/Document/getElementById).
+2. Клонирање елемента шаблона, користећи [`cloneNode`](https://developer.mozilla.org/docs/Web/API/Node/cloneNode).
+3. Додавање у DOM испод видљивог елемента, на пример помоћу [`appendChild`](https://developer.mozilla.org/docs/Web/API/Node/appendChild).
+
+✅ Зашто морамо клонирати шаблон пре него што га додамо у DOM? Шта мислите да би се десило ако бисмо прескочили овај корак?
+
+### Задатак
+
+Креирајте нови фајл под именом `app.js` у вашем пројектном фолдеру и увезите тај фајл у `<head>` секцију вашег HTML-а:
+
+```html
+<script src="app.js" defer></script>
+```
+
+Сада у `app.js`, креираћемо нову функцију `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);
+}
+```
+
+Овде радимо управо 3 корака описана изнад. Инстанцирамо шаблон са `id` вредношћу `templateId` и стављамо његов клонирани садржај унутар нашег елемента за апликацију. Имајте у виду да морамо користити `cloneNode(true)` како бисмо копирали цело стабло шаблона.
+
+Сада позовите ову функцију са једним од шаблона и погледајте резултат.
+
+```js
+updateRoute('login');
+```
+
+✅ Која је сврха овог кода `app.innerHTML = '';`? Шта се дешава без њега?
+
+## Креирање рута
+
+Када говоримо о веб апликацији, *рутирање* подразумева намеру да се **URL-ови** мапирају на одређене екране који треба да буду приказани. На веб-сајту са више HTML фајлова, ово се аутоматски ради јер се путање фајлова одражавају на URL. На пример, са овим фајловима у вашем пројектном фолдеру:
+
+```
+mywebsite/index.html
+mywebsite/login.html
+mywebsite/admin/index.html
+```
+
+Ако креирате веб сервер са `mywebsite` као кореном, мапирање URL-ова ће бити:
+
+```
+https://site.com            --> mywebsite/index.html
+https://site.com/login.html --> mywebsite/login.html
+https://site.com/admin/     --> mywebsite/admin/index.html
+```
+
+Међутим, за нашу веб апликацију користимо један HTML фајл који садржи све екране, тако да нам овај подразумевани начин неће помоћи. Морамо ручно креирати ову мапу и ажурирати приказани шаблон помоћу JavaScript-а.
+
+### Задатак
+
+Користићемо једноставан објекат за имплементацију [мапе](https://en.wikipedia.org/wiki/Associative_array) између URL путања и наших шаблона. Додајте овај објекат на врх вашег `app.js` фајла.
+
+```js
+const routes = {
+  '/login': { templateId: 'login' },
+  '/dashboard': { templateId: 'dashboard' },
+};
+```
+
+Сада мало изменимо функцију `updateRoute`. Уместо да директно прослеђујемо `templateId` као аргумент, желимо да га добијемо тако што ћемо прво погледати тренутни URL, а затим користити нашу мапу да добијемо одговарајућу вредност `templateId`. Можемо користити [`window.location.pathname`](https://developer.mozilla.org/docs/Web/API/Location/pathname) да добијемо само део путање из 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);
+}
+```
+
+Овде смо мапирали руте које смо декларисали на одговарајуће шаблоне. Можете проверити да ли ради исправно тако што ћете ручно променити URL у вашем претраживачу.
+
+✅ Шта се дешава ако унесете непознату путању у URL? Како бисмо могли решити овај проблем?
+
+## Додавање навигације
+
+Следећи корак за нашу апликацију је додавање могућности за навигацију између страница без потребе за ручним мењањем URL-а. Ово подразумева две ствари:
+
+1. Ажурирање тренутног URL-а  
+2. Ажурирање приказаног шаблона на основу новог URL-а  
+
+Други део смо већ решили функцијом `updateRoute`, тако да сада треба да смислимо како да ажурирамо тренутни URL.
+
+Мораћемо да користимо JavaScript, а конкретно [`history.pushState`](https://developer.mozilla.org/docs/Web/API/History/pushState), који омогућава ажурирање URL-а и креирање новог уноса у историји претраживања, без поновног учитавања HTML-а.
+
+> Напомена: Иако се HTML елемент за сидро [`<a href>`](https://developer.mozilla.org/docs/Web/HTML/Element/a) може користити самостално за креирање хипервеза ка различитим URL-овима, он ће подразумевано натерати претраживач да поново учита HTML. Неопходно је спречити ово понашање када се рутирање обрађује прилагођеним JavaScript-ом, користећи функцију `preventDefault()` на догађају клика.
+
+### Задатак
+
+Креирајмо нову функцију коју можемо користити за навигацију у нашој апликацији:
+
+```js
+function navigate(path) {
+  window.history.pushState({}, path, path);
+  updateRoute();
+}
+```
+
+Ова метода прво ажурира тренутни URL на основу дате путање, а затим ажурира шаблон. Особина `window.location.origin` враћа корен URL-а, омогућавајући нам да реконструишемо комплетан URL из дате путање.
+
+Сада када имамо ову функцију, можемо решити проблем који имамо ако путања не одговара ниједној дефинисаној рути. Изменићемо функцију `updateRoute` тако што ћемо додати резервну опцију за једну од постојећих рута ако не можемо пронаћи подударност.
+
+```js
+function updateRoute() {
+  const path = window.location.pathname;
+  const route = routes[path];
+
+  if (!route) {
+    return navigate('/login');
+  }
+
+  ...
+```
+
+Ако рута не може бити пронађена, сада ћемо бити преусмерени на страницу за пријаву.
+
+Сада креирајмо функцију за добијање URL-а када се кликне на линк и за спречавање подразумеваног понашања линка у претраживачу:
+
+```js
+function onLinkClick(event) {
+  event.preventDefault();
+  navigate(event.target.href);
+}
+```
+
+Довршимо систем навигације додавањем веза за *Пријаву* и *Одјаву* у HTML-у.
+
+```html
+<a href="/dashboard" onclick="onLinkClick(event)">Login</a>
+...
+<a href="/login" onclick="onLinkClick(event)">Logout</a>
+```
+
+Објекат `event` изнад хвата догађај `click` и прослеђује га нашој функцији `onLinkClick`.
+
+Користећи атрибут [`onclick`](https://developer.mozilla.org/docs/Web/API/GlobalEventHandlers/onclick), повежите догађај `click` са JavaScript кодом, овде позивом функције `navigate()`.
+
+Пробајте да кликнете на ове линкове, сада би требало да можете да се крећете између различитих екрана ваше апликације.
+
+✅ Метода `history.pushState` је део HTML5 стандарда и имплементирана је у [свим модерним претраживачима](https://caniuse.com/?search=pushState). Ако правите веб апликацију за старије претраживаче, постоји трик који можете користити уместо овог API-ја: коришћењем [хеша (`#`)](https://en.wikipedia.org/wiki/URI_fragment) пре путање можете имплементирати рутирање које ради са регуларном навигацијом сидра и не поново учитава страницу, јер му је сврха била да креира унутрашње линкове унутар странице.
+
+## Обрада дугмади за назад и напред у претраживачу
+
+Коришћењем `history.pushState` креирају се нови уноси у историји навигације претраживача. Можете то проверити тако што ћете држати *дугме за назад* у вашем претраживачу, требало би да прикаже нешто овако:
+
+![Снимак екрана историје навигације](../../../../translated_images/history.7fdabbafa521e06455b738d3dafa3ff41d3071deae60ead8c7e0844b9ed987d8.sr.png)
+
+Ако пробате да кликнете на дугме за назад неколико пута, видећете да се тренутни URL мења и историја се ажурира, али исти шаблон остаје приказан.
+
+То је зато што апликација не зна да треба да позове `updateRoute()` сваки пут када се историја промени. Ако погледате [документацију за `history.pushState`](https://developer.mozilla.org/docs/Web/API/History/pushState), можете видети да ако се стање промени - што значи да смо прешли на други URL - догађај [`popstate`](https://developer.mozilla.org/docs/Web/API/Window/popstate_event) се активира. Користићемо то да решимо овај проблем.
+
+### Задатак
+
+Да бисмо били сигурни да се приказани шаблон ажурира када се историја претраживача промени, повезаћемо нову функцију која позива `updateRoute()`. То ћемо урадити на дну нашег `app.js` фајла:
+
+```js
+window.onpopstate = () => updateRoute();
+updateRoute();
+```
+
+> Напомена: овде смо користили [arrow функцију](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions) за декларацију нашег обрађивача догађаја `popstate` ради концизности, али би обична функција радила исто.
+
+Ево видео подсетника о arrow функцијама:
+
+[![Arrow Functions](https://img.youtube.com/vi/OP6eEbOj2sc/0.jpg)](https://youtube.com/watch?v=OP6eEbOj2sc "Arrow Functions")
+
+> 🎥 Кликните на слику изнад за видео о arrow функцијама.
+
+Сада пробајте да користите дугмад за назад и напред у вашем претраживачу и проверите да ли се приказана рута исправно ажурира овог пута.
+
+---
+
+## 🚀 Изазов
+
+Додајте нови шаблон и руту за трећу страницу која приказује кредите за ову апликацију.
+
+## Квиз након предавања
+
+[Квиз након предавања](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/42)
+
+## Преглед и самостално учење
+
+Рутирање је један од изненађујуће сложених делова веб развоја, посебно како се веб креће од понашања са освежавањем странице ка освежавањима у апликацијама са једном страницом (SPA). Прочитајте мало о томе [како Azure Static Web App услуга](https://docs.microsoft.com/azure/static-web-apps/routes/?WT.mc_id=academic-77807-sagibbon) обрађује рутирање. Можете ли објаснити зашто су неке одлуке описане у том документу неопходне?
+
+## Задатак
+
+[Унапредите рутирање](assignment.md)
+
+---
+
+**Одрицање од одговорности**:  
+Овај документ је преведен коришћењем услуге за превођење помоћу вештачке интелигенције [Co-op Translator](https://github.com/Azure/co-op-translator). Иако се трудимо да обезбедимо тачност, молимо вас да имате у виду да аутоматски преводи могу садржати грешке или нетачности. Оригинални документ на његовом изворном језику треба сматрати меродавним извором. За критичне информације препоручује се професионални превод од стране људи. Не преузимамо одговорност за било каква погрешна тумачења или неспоразуме који могу настати услед коришћења овог превода.
\ No newline at end of file
diff --git a/translations/sr/7-bank-project/1-template-route/assignment.md b/translations/sr/7-bank-project/1-template-route/assignment.md
new file mode 100644
index 00000000..2086c983
--- /dev/null
+++ b/translations/sr/7-bank-project/1-template-route/assignment.md
@@ -0,0 +1,28 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "8223e429218befa731dd5bfd22299520",
+  "translation_date": "2025-08-27T23:03:44+00:00",
+  "source_file": "7-bank-project/1-template-route/assignment.md",
+  "language_code": "sr"
+}
+-->
+# Побољшајте рутирање
+
+## Упутства
+
+Тренутно декларација рута садржи само ID шаблона који треба користити. Али када се приказује нова страница, понекад је потребно мало више. Побољшајмо нашу имплементацију рутирања са две додатне функције:
+
+- Доделите наслове сваком шаблону и ажурирајте наслов прозора са овим новим насловом када се шаблон промени.
+- Додајте опцију за извршавање неког кода након промене шаблона. Желимо да испишемо `'Dashboard is shown'` у конзоли за програмере сваки пут када се прикаже страница контролне табле.
+
+## Рубрика
+
+| Критеријум | Изузетно                                                                                                                          | Прихватљиво                                                                                                                                                                                | Потребно побољшање                                    |
+| ---------- | ---------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------- |
+|            | Две функције су имплементиране и раде. Додавање наслова и кода такође функционише за нову руту додату у декларацију `routes`.       | Две функције раде, али је понашање фиксно и није конфигурабилно преко декларације `routes`. Додавање треће руте са насловом и додавањем кода не ради или ради делимично.                     | Једна од функција недостаје или не ради исправно.     |
+
+---
+
+**Одрицање од одговорности**:  
+Овај документ је преведен коришћењем услуге за превођење помоћу вештачке интелигенције [Co-op Translator](https://github.com/Azure/co-op-translator). Иако се трудимо да обезбедимо тачност, молимо вас да имате у виду да аутоматски преводи могу садржати грешке или нетачности. Оригинални документ на његовом изворном језику треба сматрати меродавним извором. За критичне информације препоручује се професионални превод од стране људи. Не преузимамо одговорност за било каква погрешна тумачења или неспоразуме који могу настати услед коришћења овог превода.
\ No newline at end of file
diff --git a/translations/sr/7-bank-project/2-forms/README.md b/translations/sr/7-bank-project/2-forms/README.md
new file mode 100644
index 00000000..37e88c09
--- /dev/null
+++ b/translations/sr/7-bank-project/2-forms/README.md
@@ -0,0 +1,202 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "b667b7d601e2ee19acb5aa9d102dc9f3",
+  "translation_date": "2025-08-27T22:57:45+00:00",
+  "source_file": "7-bank-project/2-forms/README.md",
+  "language_code": "sr"
+}
+-->
+# Изградња банкарске апликације, део 2: Израда форме за пријаву и регистрацију
+
+## Квиз пре предавања
+
+[Квиз пре предавања](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/43)
+
+### Увод
+
+У готово свим модерним веб апликацијама можете креирати налог како бисте имали свој приватни простор. Како више корисника може истовремено приступити веб апликацији, потребан је механизам за одвојено чување личних података сваког корисника и одабир информација које ће бити приказане. Нећемо се бавити тиме како [сигурно управљати идентитетом корисника](https://en.wikipedia.org/wiki/Authentication), јер је то обимна тема сама по себи, али ћемо осигурати да сваки корисник може креирати један (или више) банковних рачуна у нашој апликацији.
+
+У овом делу ћемо користити HTML форме за додавање пријаве и регистрације у нашу веб апликацију. Видећемо како да програмски шаљемо податке серверској API-ју и на крају како да дефинишемо основна правила за валидацију корисничких уноса.
+
+### Предуслови
+
+Потребно је да сте завршили [HTML шаблоне и рутирање](../1-template-route/README.md) веб апликације за ову лекцију. Такође, потребно је да инсталирате [Node.js](https://nodejs.org) и [покренете серверски API](../api/README.md) локално како бисте могли слати податке за креирање налога.
+
+**Имајте на уму**
+Имаћете два терминала која раде истовремено, како је наведено у наставку:
+1. За главну банкарску апликацију коју смо изградили у лекцији [HTML шаблони и рутирање](../1-template-route/README.md)
+2. За [серверски API банкарске апликације](../api/README.md) који смо управо подесили.
+
+Потребно је да оба сервера буду покренута како бисте могли пратити остатак лекције. Они слушају на различитим портовима (порт `3000` и порт `5000`), тако да би све требало да функционише без проблема.
+
+Можете тестирати да ли сервер ради исправно извршавањем ове команде у терминалу:
+
+```sh
+curl http://localhost:5000/api
+# -> should return "Bank API v1.0.0" as a result
+```
+
+---
+
+## Форма и контроле
+
+Елемент `<form>` обухвата део HTML документа где корисник може уносити и слати податке помоћу интерактивних контрола. Постоје разне корисничке интерфејс (UI) контроле које се могу користити унутар форме, а најчешће су елементи `<input>` и `<button>`.
+
+Постоји много различитих [типова](https://developer.mozilla.org/docs/Web/HTML/Element/input) `<input>` елемената. На пример, да бисте креирали поље где корисник може унети своје корисничко име, можете користити:
+
+```html
+<input id="username" name="username" type="text">
+```
+
+Атрибут `name` ће се користити као назив својства када се подаци форме шаљу. Атрибут `id` се користи за повезивање `<label>` елемента са контролом форме.
+
+> Погледајте целу листу [`<input>` типова](https://developer.mozilla.org/docs/Web/HTML/Element/input) и [друге контроле форме](https://developer.mozilla.org/docs/Learn/Forms/Other_form_controls) како бисте стекли идеју о свим нативним UI елементима које можете користити приликом изградње вашег интерфејса.
+
+✅ Имајте на уму да је `<input>` [празан елемент](https://developer.mozilla.org/docs/Glossary/Empty_element) коме *не треба* додавати одговарајућу завршну ознаку. Можете, међутим, користити само-затварајућу нотацију `<input/>`, али то није обавезно.
+
+Елемент `<button>` унутар форме је мало посебан. Ако не наведете његов атрибут `type`, аутоматски ће послати податке форме серверу када се притисне. Ево могућих вредности за `type`:
+
+- `submit`: Подразумевано унутар `<form>`, дугме покреће акцију слања форме.
+- `reset`: Дугме ресетује све контроле форме на њихове почетне вредности.
+- `button`: Не додељује подразумевано понашање када се дугме притисне. Можете му доделити прилагођене акције помоћу JavaScript-а.
+
+### Задатак
+
+Почнимо са додавањем форме у `login` шаблон. Биће нам потребно поље за *корисничко име* и дугме за *Пријаву*.
+
+```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>
+```
+
+Ако пажљивије погледате, приметићете да смо овде додали и `<label>` елемент. `<label>` елементи се користе за додавање назива UI контролама, као што је наше поље за корисничко име. Ознаке су важне за читљивост ваших форми, али такође долазе са додатним предностима:
+
+- Повезивањем ознаке са контролом форме, помаже корисницима који користе асистивне технологије (попут читача екрана) да разумеју које податке треба да унесу.
+- Можете кликнути на ознаку да бисте директно ставили фокус на повезани унос, што олакшава приступ на уређајима са екраном осетљивим на додир.
+
+> [Приступачност](https://developer.mozilla.org/docs/Learn/Accessibility/What_is_accessibility) на вебу је веома важна тема која се често занемарује. Захваљујући [семантичким HTML елементима](https://developer.mozilla.org/docs/Learn/Accessibility/HTML) није тешко креирати приступачан садржај ако их правилно користите. Можете [прочитати више о приступачности](https://developer.mozilla.org/docs/Web/Accessibility) како бисте избегли уобичајене грешке и постали одговоран програмер.
+
+Сада ћемо додати другу форму за регистрацију, одмах испод претходне:
+
+```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>
+```
+
+Коришћењем атрибута `value` можемо дефинисати подразумевану вредност за дати унос. Такође приметите да унос за `balance` има тип `number`. Да ли изгледа другачије од осталих уноса? Пробајте да интерагујете са њим.
+
+✅ Можете ли навигирати и интераговати са формама користећи само тастатуру? Како бисте то урадили?
+
+## Слање података серверу
+
+Сада када имамо функционалан UI, следећи корак је слање података серверу. Хајде да направимо брз тест користећи наш тренутни код: шта се дешава ако кликнете на дугме *Пријава* или *Регистрација*?
+
+Да ли сте приметили промену у URL секцији вашег претраживача?
+
+![Снимак екрана са променом URL-а претраживача након клика на дугме Регистрација](../../../../translated_images/click-register.e89a30bf0d4bc9ca867dc537c4cea679a7c26368bd790969082f524fed2355bc.sr.png)
+
+Подразумевана акција за `<form>` је слање форме на тренутни URL сервера користећи [GET метод](https://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.3), додајући податке форме директно у URL. Међутим, овај метод има неке недостатке:
+
+- Подаци који се шаљу су веома ограничени по величини (око 2000 карактера)
+- Подаци су директно видљиви у URL-у (што није добро за лозинке)
+- Не ради са отпремањем датотека
+
+Зато можете променити метод на [POST метод](https://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.5) који шаље податке форме серверу у телу HTTP захтева, без претходно наведених ограничења.
+
+> Иако је POST најчешће коришћен метод за слање података, [у неким специфичним сценаријима](https://www.w3.org/2001/tag/doc/whenToUseGet.html) је пожељно користити GET метод, на пример приликом имплементације поља за претрагу.
+
+### Задатак
+
+Додајте `action` и `method` својства форми за регистрацију:
+
+```html
+<form id="registerForm" action="//localhost:5000/api/accounts" method="POST">
+```
+
+Сада покушајте да региструјете нови налог са вашим именом. Након клика на дугме *Регистрација* требало би да видите нешто овако:
+
+![Прозор претраживача на адреси localhost:5000/api/accounts, приказује JSON низ са корисничким подацима](../../../../translated_images/form-post.61de4ca1b964d91a9e338416e19f218504dd0af5f762fbebabfe7ae80edf885f.sr.png)
+
+Ако све функционише како треба, сервер би требало да одговори на ваш захтев са [JSON](https://www.json.org/json-en.html) одговором који садржи податке о креираном налогу.
+
+✅ Покушајте поново да се региструјете са истим именом. Шта се дешава?
+> Савет: можете прилагодити изглед контроле вашег формулара у зависности од тога да ли су валидне или не, користећи CSS псеудо-класе `:valid` и `:invalid`.
+### Задатак
+
+Постоје два обавезна поља за креирање важећег новог налога: корисничко име и валута, док су остала поља опционална. Ажурирајте HTML форме, користећи и `required` атрибут и текст у ознаци поља тако да:
+
+```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>
+```
+
+Иако ова конкретна серверска имплементација не намеће специфична ограничења за максималну дужину поља, увек је добра пракса дефинисати разумна ограничења за унос текста од стране корисника.
+
+Додајте `maxlength` атрибут текстуалним пољима:
+
+```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">
+```
+
+Сада, ако притиснете дугме *Региструј се* и неко поље не поштује правило валидације које смо дефинисали, требало би да видите нешто овако:
+
+![Снимак екрана који приказује грешку валидације приликом покушаја слања форме](../../../../translated_images/validation-error.8bd23e98d416c22f80076d04829a4bb718e0e550fd622862ef59008ccf0d5dce.sr.png)
+
+Валидација која се извршава *пре* слања било каквих података серверу назива се **валидација на страни клијента**. Али имајте на уму да није увек могуће извршити све провере без слања података. На пример, овде не можемо проверити да ли већ постоји налог са истим корисничким именом без слања захтева серверу. Додатна валидација која се извршава на серверу назива се **валидација на страни сервера**.
+
+Обично је потребно имплементирати обе врсте валидације, и док валидација на страни клијента побољшава корисничко искуство пружајући тренутне повратне информације кориснику, валидација на страни сервера је кључна како би се осигурало да су подаци корисника које обрађујете исправни и безбедни.
+
+---
+
+## 🚀 Изазов
+
+Прикажите поруку о грешци у HTML-у ако корисник већ постоји.
+
+Ево примера како коначна страница за пријаву може изгледати након мало стилизовања:
+
+![Снимак екрана странице за пријаву након додавања CSS стилова](../../../../translated_images/result.96ef01f607bf856aa9789078633e94a4f7664d912f235efce2657299becca483.sr.png)
+
+## Квиз након предавања
+
+[Квиз након предавања](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/44)
+
+## Преглед и самостално учење
+
+Програмери су постали веома креативни у својим напорима за креирање форми, посебно када је реч о стратегијама валидације. Истражите различите токове форми прегледајући [CodePen](https://codepen.com); можете ли пронаћи неке занимљиве и инспиративне форме?
+
+## Задатак
+
+[Стилизујте своју апликацију за банку](assignment.md)
+
+---
+
+**Одрицање од одговорности**:  
+Овај документ је преведен коришћењем услуге за превођење помоћу вештачке интелигенције [Co-op Translator](https://github.com/Azure/co-op-translator). Иако се трудимо да превод буде тачан, молимо вас да имате у виду да аутоматизовани преводи могу садржати грешке или нетачности. Оригинални документ на његовом изворном језику треба сматрати меродавним извором. За критичне информације препоручује се професионални превод од стране људи. Не преузимамо одговорност за било каква погрешна тумачења или неспоразуме који могу настати услед коришћења овог превода.
\ No newline at end of file
diff --git a/translations/sr/7-bank-project/2-forms/assignment.md b/translations/sr/7-bank-project/2-forms/assignment.md
new file mode 100644
index 00000000..04cde0aa
--- /dev/null
+++ b/translations/sr/7-bank-project/2-forms/assignment.md
@@ -0,0 +1,27 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "474f3ab1ee755ca980fc9104a0316e17",
+  "translation_date": "2025-08-27T22:58:37+00:00",
+  "source_file": "7-bank-project/2-forms/assignment.md",
+  "language_code": "sr"
+}
+-->
+# Стилујте вашу апликацију за банкарство
+
+## Упутства
+
+Направите нову датотеку `styles.css` и додајте линк ка њој у вашој тренутној датотеци `index.html`. У CSS датотеци коју сте управо креирали, додајте стилове како би странице *Пријава* и *Контролна табла* изгледале лепо и уредно. Покушајте да направите колор тему како бисте апликацији дали сопствени бренд.
+
+> Савет: можете изменити HTML и додати нове елементе и класе ако је потребно.
+
+## Рубрика
+
+| Критеријум | Изузетно                                                                                                               | Прихватљиво                                                                       | Потребно побољшање                                                                             |
+| ---------- | ---------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------- |
+|            | Све странице изгледају чисто и читљиво, са доследном колор темом и различити делови су правилно истакнути.             | Странице су стилизоване, али без теме или са деловима који нису јасно разграничени. | Странице недостају стилови, делови изгледају неорганизовано и информације су тешке за читање. |
+
+---
+
+**Одрицање од одговорности**:  
+Овај документ је преведен коришћењем услуге за превођење помоћу вештачке интелигенције [Co-op Translator](https://github.com/Azure/co-op-translator). Иако се трудимо да превод буде тачан, молимо вас да имате у виду да аутоматизовани преводи могу садржати грешке или нетачности. Оригинални документ на његовом изворном језику треба сматрати меродавним извором. За критичне информације препоручује се професионални превод од стране људи. Не преузимамо одговорност за било каква погрешна тумачења или неспоразуме који могу настати услед коришћења овог превода.
\ No newline at end of file
diff --git a/translations/sr/7-bank-project/3-data/README.md b/translations/sr/7-bank-project/3-data/README.md
new file mode 100644
index 00000000..2adc7308
--- /dev/null
+++ b/translations/sr/7-bank-project/3-data/README.md
@@ -0,0 +1,335 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "f587e913e3f7c0b1c549a05dd74ee8e5",
+  "translation_date": "2025-08-27T23:00:15+00:00",
+  "source_file": "7-bank-project/3-data/README.md",
+  "language_code": "sr"
+}
+-->
+# Изградња апликације за банкарство, део 3: Методе за преузимање и коришћење података
+
+## Квиз пре предавања
+
+[Квиз пре предавања](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/45)
+
+### Увод
+
+У срцу сваке веб апликације налазе се *подаци*. Подаци могу имати различите облике, али њихова главна сврха је увек приказивање информација кориснику. Са веб апликацијама које постају све интерактивније и сложеније, начин на који корисник приступа и интерагује са информацијама сада је кључни део веб развоја.
+
+У овој лекцији ћемо видети како да асинхроно преузмемо податке са сервера и користимо те податке за приказивање информација на веб страници без поновног учитавања HTML-а.
+
+### Предуслови
+
+Потребно је да сте изградили [формулар за пријаву и регистрацију](../2-forms/README.md) као део веб апликације за ову лекцију. Такође, потребно је да инсталирате [Node.js](https://nodejs.org) и [покренете серверски API](../api/README.md) локално како бисте добили податке о налогу.
+
+Можете тестирати да ли сервер ради исправно извршавањем ове команде у терминалу:
+
+```sh
+curl http://localhost:5000/api
+# -> should return "Bank API v1.0.0" as a result
+```
+
+---
+
+## AJAX и преузимање података
+
+Традиционалне веб странице ажурирају приказани садржај када корисник изабере линк или пошаље податке путем формулара, поновним учитавањем целе HTML странице. Сваки пут када је потребно учитати нове податке, веб сервер враћа потпуно нову HTML страницу коју прегледач мора да обради, прекидајући тренутну акцију корисника и ограничавајући интеракције током учитавања. Овај радни ток се такође назива *вишестранична апликација* или *MPA*.
+
+![Радни ток ажурирања у вишестраничној апликацији](../../../../translated_images/mpa.7f7375a1a2d4aa779d3f928a2aaaf9ad76bcdeb05cfce2dc27ab126024050f51.sr.png)
+
+Када су веб апликације почеле да постају сложеније и интерактивније, појавила се нова техника звана [AJAX (асинхрони JavaScript и XML)](https://en.wikipedia.org/wiki/Ajax_(programming)). Ова техника омогућава веб апликацијама да шаљу и преузимају податке са сервера асинхроно користећи JavaScript, без потребе за поновним учитавањем HTML странице, што резултира бржим ажурирањима и глаткијим интеракцијама корисника. Када се нови подаци добију са сервера, тренутна HTML страница може бити ажурирана JavaScript-ом користећи [DOM](https://developer.mozilla.org/docs/Web/API/Document_Object_Model) API. Временом, овај приступ је еволуирао у оно што се сада назива [*једностранична апликација* или *SPA*](https://en.wikipedia.org/wiki/Single-page_application).
+
+![Радни ток ажурирања у једностраничној апликацији](../../../../translated_images/spa.268ec73b41f992c2a21ef9294235c6ae597b3c37e2c03f0494c2d8857325cc57.sr.png)
+
+Када је AJAX први пут уведен, једини API доступан за асинхроно преузимање података био је [`XMLHttpRequest`](https://developer.mozilla.org/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest). Међутим, модерни прегледачи сада имплементирају погоднији и моћнији [`Fetch` API](https://developer.mozilla.org/docs/Web/API/Fetch_API), који користи промисе и боље је прилагођен за манипулацију JSON подацима.
+
+> Иако сви модерни прегледачи подржавају `Fetch API`, ако желите да ваша веб апликација ради на застарелим или старим прегледачима, увек је добра идеја да прво проверите [табелу компатибилности на caniuse.com](https://caniuse.com/fetch).
+
+### Задатак
+
+У [претходној лекцији](../2-forms/README.md) имплементирали смо формулар за регистрацију ради креирања налога. Сада ћемо додати код за пријаву користећи постојећи налог и преузимање његових података. Отворите датотеку `app.js` и додајте нову функцију `login`:
+
+```js
+async function login() {
+  const loginForm = document.getElementById('loginForm')
+  const user = loginForm.user.value;
+}
+```
+
+Овде почињемо преузимањем елемента формулара помоћу `getElementById()`, а затим добијамо корисничко име из уноса помоћу `loginForm.user.value`. Свака контрола формулара може се приступити преко њеног имена (постављеног у HTML-у помоћу атрибута `name`) као својства формулара.
+
+На сличан начин као што смо урадили за регистрацију, креираћемо још једну функцију за извршавање захтева серверу, али овог пута за преузимање података о налогу:
+
+```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' };
+  }
+}
+```
+
+Користимо `fetch` API за асинхроно захтевање података са сервера, али овог пута не требају нам додатни параметри осим URL-а који позивамо, јер само упитујемо податке. Подразумевано, `fetch` креира [`GET`](https://developer.mozilla.org/docs/Web/HTTP/Methods/GET) HTTP захтев, што је оно што нам овде треба.
+
+✅ `encodeURIComponent()` је функција која избегава специјалне карактере за URL. Које проблеме бисмо могли имати ако не позовемо ову функцију и директно користимо вредност `user` у URL-у?
+
+Сада ажурирамо нашу функцију `login` да користи `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');
+}
+```
+
+Прво, пошто је `getAccount` асинхрона функција, морамо је ускладити са кључном речју `await` да бисмо сачекали резултат сервера. Као и код сваког захтева серверу, морамо се носити са случајевима грешке. За сада ћемо само додати поруку у лог за приказивање грешке и вратити се на то касније.
+
+Затим морамо да сачувамо податке негде како бисмо их касније могли користити за приказивање информација на контролној табли. Пошто променљива `account` још не постоји, креираћемо глобалну променљиву за њу на врху наше датотеке:
+
+```js
+let account = null;
+```
+
+Након што се кориснички подаци сачувају у променљивој, можемо се пребацити са странице *login* на *dashboard* користећи функцију `navigate()` коју већ имамо.
+
+На крају, потребно је да позовемо нашу функцију `login` када се формулар за пријаву пошаље, модификовањем HTML-а:
+
+```html
+<form id="loginForm" action="javascript:login()">
+```
+
+Тестирајте да ли све ради исправно тако што ћете регистровати нови налог и покушати да се пријавите користећи исти налог.
+
+Пре него што пређемо на следећи део, можемо такође довршити функцију `register` додавањем овога на крај функције:
+
+```js
+account = result;
+navigate('/dashboard');
+```
+
+✅ Да ли сте знали да подразумевано можете позивати серверске API-је само са *истог домена и порта* као веб страница коју гледате? Ово је безбедносни механизам који прегледачи спроводе. Али чекајте, наша веб апликација ради на `localhost:3000`, док серверски API ради на `localhost:5000`, зашто функционише? Коришћењем технике зване [Cross-Origin Resource Sharing (CORS)](https://developer.mozilla.org/docs/Web/HTTP/CORS), могуће је извршити HTTP захтеве преко различитих порекла ако сервер дода посебне заглавља у одговор, дозвољавајући изузетке за одређене домене.
+
+> Сазнајте више о API-јима кроз ову [лекцију](https://docs.microsoft.com/learn/modules/use-apis-discover-museum-art/?WT.mc_id=academic-77807-sagibbon)
+
+## Ажурирање HTML-а за приказивање података
+
+Сада када имамо корисничке податке, морамо ажурирати постојећи HTML да их прикажемо. Већ знамо како да преузмемо елемент из DOM-а, на пример користећи `document.getElementById()`. Након што имате основни елемент, ево неких API-ја које можете користити за његово модификовање или додавање дечијих елемената:
+
+- Коришћењем својства [`textContent`](https://developer.mozilla.org/docs/Web/API/Node/textContent) можете променити текст елемента. Имајте на уму да промена ове вредности уклања све дечије елементе (ако их има) и замењује их датим текстом. Као таква, ово је такође ефикасан метод за уклањање свих дечијих елемената датог елемента додељивањем празног низа `''`.
+
+- Коришћењем [`document.createElement()`](https://developer.mozilla.org/docs/Web/API/Document/createElement) заједно са методом [`append()`](https://developer.mozilla.org/docs/Web/API/ParentNode/append) можете креирати и додати један или више нових дечијих елемената.
+
+✅ Коришћењем својства [`innerHTML`](https://developer.mozilla.org/docs/Web/API/Element/innerHTML) елемента могуће је променити његов HTML садржај, али ово треба избегавати јер је рањиво на [нападе преко скриптовања сајта (XSS)](https://developer.mozilla.org/docs/Glossary/Cross-site_scripting).
+
+### Задатак
+
+Пре него што пређемо на екран контролне табле, постоји још једна ствар коју треба да урадимо на страници *login*. Тренутно, ако покушате да се пријавите са корисничким именом које не постоји, порука се приказује у конзоли, али за обичног корисника ништа се не мења и не знате шта се дешава.
+
+Додајмо елемент за резервисано место у формулару за пријаву где можемо приказати поруку о грешци ако је потребно. Добро место би било непосредно пре дугмета за пријаву `<button>`:
+
+```html
+...
+<div id="loginError"></div>
+<button>Login</button>
+...
+```
+
+Овај `<div>` елемент је празан, што значи да ништа неће бити приказано на екрану док му не додамо садржај. Такође му дајемо `id` како бисмо га лако могли преузети помоћу JavaScript-а.
+
+Вратите се у датотеку `app.js` и креирајте нову помоћну функцију `updateElement`:
+
+```js
+function updateElement(id, text) {
+  const element = document.getElementById(id);
+  element.textContent = text;
+}
+```
+
+Ова функција је прилично једноставна: датом *id*-у елемента и *тексту*, ажурираће текстуални садржај DOM елемента са одговарајућим `id`. Користимо ову методу уместо претходне поруке о грешци у функцији `login`:
+
+```js
+if (data.error) {
+  return updateElement('loginError', data.error);
+}
+```
+
+Сада, ако покушате да се пријавите са неважећим налогом, требало би да видите нешто овако:
+
+![Снимак екрана који приказује поруку о грешци током пријаве](../../../../translated_images/login-error.416fe019b36a63276764c2349df5d99e04ebda54fefe60c715ee87a28d5d4ad0.sr.png)
+
+Сада имамо текст грешке који се визуелно приказује, али ако га пробате са читачем екрана, приметићете да ништа није најављено. Да би текст који се динамички додаје на страницу био најављен од стране читача екрана, потребно је да користи нешто што се зове [Live Region](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/ARIA_Live_Regions). Овде ћемо користити специфичан тип live региона који се зове alert:
+
+```html
+<div id="loginError" role="alert"></div>
+```
+
+Имплементирајте исто понашање за грешке у функцији `register` (не заборавите да ажурирате HTML).
+
+## Приказивање информација на контролној табли
+
+Користећи исте технике које смо управо видели, такође ћемо се побринути за приказивање информација о налогу на страници контролне табле.
+
+Овако изгледа објекат налога добијен са сервера:
+
+```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 }
+  ],
+}
+```
+
+> Напомена: да бисте себи олакшали, можете користити већ постојећи налог `test` који је већ попуњен подацима.
+
+### Задатак
+
+Почнимо заменом секције "Balance" у HTML-у додавањем елемената за резервисано место:
+
+```html
+<section>
+  Balance: <span id="balance"></span><span id="currency"></span>
+</section>
+```
+
+Такође ћемо додати нову секцију одмах испод за приказивање описа налога:
+
+```html
+<h2 id="description"></h2>
+```
+
+✅ Пошто опис налога функционише као наслов за садржај испод њега, означен је семантички као заглавље. Сазнајте више о томе како је [структура заглавља](https://www.nomensa.com/blog/2017/how-structure-headings-web-accessibility) важна за приступачност и критички погледајте страницу да бисте утврдили шта још може бити заглавље.
+
+Затим ћемо креирати нову функцију у `app.js` за попуњавање резервисаног места:
+
+```js
+function updateDashboard() {
+  if (!account) {
+    return navigate('/login');
+  }
+
+  updateElement('description', account.description);
+  updateElement('balance', account.balance.toFixed(2));
+  updateElement('currency', account.currency);
+}
+```
+
+Прво, проверавамо да ли имамо податке о налогу који су нам потребни пре него што наставимо даље. Затим користимо функцију `updateElement()` коју смо раније креирали за ажурирање HTML-а.
+
+> Да би приказивање стања било лепше, користимо методу [`toFixed(2)`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed) да бисмо приморали приказивање вредности са 2 цифре након децималне тачке.
+
+Сада треба да позовемо нашу функцију `updateDashboard()` сваки пут када се учита страница контролне табле. Ако сте већ завршили [задатак из лекције 1](../1-template-route/assignment.md), ово би требало да буде једноставно, иначе можете користити следећу имплементацију.
+
+Додајте овај код на крај функције `updateRoute()`:
+
+```js
+if (typeof route.init === 'function') {
+  route.init();
+}
+```
+
+И ажурирајте дефиницију рута са:
+
+```js
+const routes = {
+  '/login': { templateId: 'login' },
+  '/dashboard': { templateId: 'dashboard', init: updateDashboard }
+};
+```
+
+Са овом променом, сваки пут када се прикаже страница контролне табле, позива се функција `updateDashboard()`. Након пријаве, требало би да можете да видите стање налога, валуту и опис.
+
+## Динамичко креирање редова табеле помоћу HTML шаблона
+
+У [првој лекцији](../1-template-route/README.md) користили смо HTML шаблоне заједно са методом [`appendChild()`](https://developer.mozilla.org/docs/Web/API/Node/appendChild) за имплементацију навигације у нашој апликацији. Шаблони могу бити и мањи и користити се за динамичко попуњавање поновљених делова странице.
+
+Користићемо сличан приступ за приказивање листе трансакција у HTML табели.
+
+### Задатак
+
+Додајте нови шаблон у HTML `<body>`:
+
+```html
+<template id="transaction">
+  <tr>
+    <td></td>
+    <td></td>
+    <td></td>
+  </tr>
+</template>
+```
+
+Овај шаблон представља један ред табеле, са 3 колоне које желимо да попунимо: *датум*, *објекат* и *износ* трансакције.
+
+Затим, додајте овај `id` атрибут у `<tbody>` елемент табеле унутар шаблона контролне табле како би га било лакше пронаћи помоћу JavaScript-а:
+
+```html
+<tbody id="transactions"></tbody>
+```
+
+Наш HTML је спреман, прелазимо на JavaScript код и креирамо нову функцију `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;
+}
+```
+
+Ова функција ради управо оно што њено име имплицира: користећи шаблон који смо раније креирали, креира нови ред табеле и попуњава његов садржај користећи податке о трансакцији. Користићемо ово у нашој функцији `updateDashboard()` за попуњавање табеле:
+
+```js
+const transactionsRows = document.createDocumentFragment();
+for (const transaction of account.transactions) {
+  const transactionRow = createTransactionRow(transaction);
+  transactionsRows.appendChild(transactionRow);
+}
+updateElement('transactions', transactionsRows);
+```
+
+Овде користимо методу [`document.createDocumentFragment()`](https://developer.mozilla.org/docs/Web/API/Document/createDocumentFragment
+Ако покушате да се пријавите користећи налог `test`, сада би требало да видите листу трансакција на контролној табли 🎉.
+
+---
+
+## 🚀 Изазов
+
+Радите заједно како бисте страницу контролне табле учинили да изгледа као права апликација за банкарство. Ако сте већ стилизовали своју апликацију, покушајте да користите [media queries](https://developer.mozilla.org/docs/Web/CSS/Media_Queries) за креирање [респонзивног дизајна](https://developer.mozilla.org/docs/Web/Progressive_web_apps/Responsive/responsive_design_building_blocks) који добро функционише и на десктоп и на мобилним уређајима.
+
+Ево примера стилизоване странице контролне табле:
+
+![Снимак екрана пример резултата контролне табле након стилизовања](../../../../translated_images/screen2.123c82a831a1d14ab2061994be2fa5de9cec1ce651047217d326d4773a6348e4.sr.png)
+
+## Квиз након предавања
+
+[Квиз након предавања](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/46)
+
+## Задатак
+
+[Рефакторишите и коментаришите свој код](assignment.md)
+
+---
+
+**Одрицање од одговорности**:  
+Овај документ је преведен коришћењем услуге за превођење помоћу вештачке интелигенције [Co-op Translator](https://github.com/Azure/co-op-translator). Иако се трудимо да обезбедимо тачност, имајте у виду да аутоматски преводи могу садржати грешке или нетачности. Оригинални документ на изворном језику треба сматрати ауторитативним извором. За критичне информације препоручује се професионални превод од стране људи. Не сносимо одговорност за било каква погрешна тумачења или неспоразуме који могу произаћи из коришћења овог превода.
\ No newline at end of file
diff --git a/translations/sr/7-bank-project/3-data/assignment.md b/translations/sr/7-bank-project/3-data/assignment.md
new file mode 100644
index 00000000..011ed29a
--- /dev/null
+++ b/translations/sr/7-bank-project/3-data/assignment.md
@@ -0,0 +1,29 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "a4abf305ede1cfaadd56a8fab4b4c288",
+  "translation_date": "2025-08-27T23:01:19+00:00",
+  "source_file": "7-bank-project/3-data/assignment.md",
+  "language_code": "sr"
+}
+-->
+# Рефакторишите и коментаришите ваш код
+
+## Упутства
+
+Како ваша база кода расте, важно је често рефакторисати код како би остао читљив и лак за одржавање током времена. Додајте коментаре и рефакторишите ваш `app.js` како бисте побољшали квалитет кода:
+
+- Издвојите константе, као што је основни URL серверског API-ја
+- Факторишите сличан код: на пример, можете креирати функцију `sendRequest()` да обједините код који се користи у функцијама `createAccount()` и `getAccount()`
+- Преуредите код како би био лакши за читање и додајте коментаре
+
+## Рубрика
+
+| Критеријум | Изузетно                                                                                                                                                     | Задовољавајуће                                                                                   | Потребна побољшања                                                                     |
+| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------- |
+|            | Код је коментарисан, добро организован у различите секције и лак за читање. Константе су издвојене и креирана је факторизована функција `sendRequest()`.         | Код је чист, али би могао бити побољшан са више коментара, издвајањем константи или факторизацијом. | Код је неуредан, није коментарисан, константе нису издвојене и код није факторизован.   |
+
+---
+
+**Одрицање од одговорности**:  
+Овај документ је преведен коришћењем услуге за превођење помоћу вештачке интелигенције [Co-op Translator](https://github.com/Azure/co-op-translator). Иако се трудимо да обезбедимо тачност, молимо вас да имате у виду да аутоматски преводи могу садржати грешке или нетачности. Оригинални документ на његовом изворном језику треба сматрати меродавним извором. За критичне информације, препоручује се професионални превод од стране људи. Не преузимамо одговорност за било каква погрешна тумачења или неспоразуме који могу настати услед коришћења овог превода.
\ No newline at end of file
diff --git a/translations/sr/7-bank-project/4-state-management/README.md b/translations/sr/7-bank-project/4-state-management/README.md
new file mode 100644
index 00000000..6402fc90
--- /dev/null
+++ b/translations/sr/7-bank-project/4-state-management/README.md
@@ -0,0 +1,275 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "4fa20c513e367e9cdd401bf49ae16e33",
+  "translation_date": "2025-08-27T23:05:45+00:00",
+  "source_file": "7-bank-project/4-state-management/README.md",
+  "language_code": "sr"
+}
+-->
+# Изградња апликације за банкарство, део 4: Концепти управљања стањем
+
+## Квиз пре предавања
+
+[Квиз пре предавања](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/47)
+
+### Увод
+
+Како веб апликација расте, постаје изазовно пратити све токове података. Који код добија податке, која страница их користи, где и када треба да се ажурирају... лако је завршити са неуредним кодом који је тешко одржавати. Ово је посебно тачно када треба да делите податке између различитих страница апликације, на пример корисничке податке. Концепт *управљања стањем* одувек је постојао у свим врстама програма, али како веб апликације постају све сложеније, сада је то кључна тачка о којој треба размишљати током развоја.
+
+У овом завршном делу, размотрићемо апликацију коју смо изградили како бисмо преиспитали начин управљања стањем, омогућавајући подршку за освежавање прегледача у било ком тренутку и чување података током корисничких сесија.
+
+### Предуслови
+
+Потребно је да сте завршили [преузимање података](../3-data/README.md) у оквиру веб апликације за ову лекцију. Такође, потребно је да инсталирате [Node.js](https://nodejs.org) и [покренете сервер API](../api/README.md) локално како бисте могли да управљате подацима о налогу.
+
+Можете тестирати да ли сервер ради исправно извршавањем ове команде у терминалу:
+
+```sh
+curl http://localhost:5000/api
+# -> should return "Bank API v1.0.0" as a result
+```
+
+---
+
+## Преиспитивање управљања стањем
+
+У [претходној лекцији](../3-data/README.md), увели смо основни концепт стања у нашој апликацији са глобалном променљивом `account` која садржи банкарске податке за тренутно пријављеног корисника. Међутим, наша тренутна имплементација има неке недостатке. Покушајте да освежите страницу док сте на контролној табли. Шта се дешава?
+
+Постоје три проблема са тренутним кодом:
+
+- Стање није сачувано, јер освежавање прегледача враћа вас на страницу за пријаву.
+- Постоји више функција које мењају стање. Како апликација расте, то може отежати праћење промена и лако је заборавити да ажурирате једну.
+- Стање није очишћено, па када кликнете на *Одјава*, подаци о налогу су и даље ту, иако сте на страници за пријаву.
+
+Могли бисмо ажурирати наш код да решимо ове проблеме један по један, али то би створило више дуплирања кода и учинило апликацију сложенијом и тежом за одржавање. Или бисмо могли да паузирамо на неколико минута и преиспитамо нашу стратегију.
+
+> Које проблеме заиста покушавамо да решимо овде?
+
+[Управљање стањем](https://en.wikipedia.org/wiki/State_management) се односи на проналажење доброг приступа за решавање ова два конкретна проблема:
+
+- Како учинити токове података у апликацији разумљивим?
+- Како одржати податке о стању увек синхронизованим са корисничким интерфејсом (и обрнуто)?
+
+Када се позабавите овим проблемима, било који други проблеми које можда имате могу бити већ решени или постати лакши за решавање. Постоји много могућих приступа за решавање ових проблема, али ми ћемо се определити за уобичајено решење које се састоји од **централизовања података и начина њиховог мењања**. Токови података би изгледали овако:
+
+![Шема која приказује токове података између HTML-а, корисничких акција и стања](../../../../translated_images/data-flow.fa2354e0908fecc89b488010dedf4871418a992edffa17e73441d257add18da4.sr.png)
+
+> Овде нећемо покривати део где подаци аутоматски покрећу ажурирање приказа, јер је то повезано са напреднијим концептима [реактивног програмирања](https://en.wikipedia.org/wiki/Reactive_programming). То је добра тема за дубље истраживање ако сте заинтересовани.
+
+✅ Постоји много библиотека са различитим приступима управљању стањем, [Redux](https://redux.js.org) је популарна опција. Погледајте концепте и обрасце који се користе, јер је то често добар начин да научите о потенцијалним проблемима са којима се можете суочити у великим веб апликацијама и како их можете решити.
+
+### Задатак
+
+Почећемо са мало рефакторисања. Замените декларацију `account`:
+
+```js
+let account = null;
+```
+
+Са:
+
+```js
+let state = {
+  account: null
+};
+```
+
+Идеја је да *централизујемо* све податке наше апликације у један објекат стања. Тренутно имамо само `account` у стању, па се много не мења, али то ствара пут за будуће измене.
+
+Такође морамо ажурирати функције које га користе. У функцијама `register()` и `login()`, замените `account = ...` са `state.account = ...`;
+
+На врху функције `updateDashboard()` додајте овај ред:
+
+```js
+const account = state.account;
+```
+
+Ово рефакторисање само по себи није донело много побољшања, али идеја је била да се постави основа за следеће промене.
+
+## Праћење промена података
+
+Сада када смо поставили објекат `state` за чување наших података, следећи корак је централизовање ажурирања. Циљ је да се олакша праћење било каквих промена и када се оне дешавају.
+
+Да бисмо избегли промене направљене на објекту `state`, такође је добра пракса да га сматрамо [*непроменљивим*](https://en.wikipedia.org/wiki/Immutable_object), што значи да га уопште не можемо мењати. То такође значи да морате креирати нови објекат стања ако желите да промените било шта у њему. На овај начин, градите заштиту од потенцијално нежељених [споредних ефеката](https://en.wikipedia.org/wiki/Side_effect_(computer_science)), и отварате могућности за нове функције у вашој апликацији, као што је имплементација undo/redo, док истовремено олакшавате дебаговање. На пример, могли бисте да бележите сваку промену направљену на стању и чувате историју промена како бисте разумели извор грешке.
+
+У JavaScript-у можете користити [`Object.freeze()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze) за креирање непроменљиве верзије објекта. Ако покушате да направите промене на непроменљивом објекту, биће подигнут изузетак.
+
+✅ Да ли знате разлику између *плитког* и *дубоког* непроменљивог објекта? Можете прочитати о томе [овде](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze#What_is_shallow_freeze).
+
+### Задатак
+
+Хајде да креирамо нову функцију `updateState()`:
+
+```js
+function updateState(property, newData) {
+  state = Object.freeze({
+    ...state,
+    [property]: newData
+  });
+}
+```
+
+У овој функцији креирамо нови објекат стања и копирамо податке из претходног стања користећи [*оператор ширења (`...`)*](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/Spread_syntax#Spread_in_object_literals). Затим замењујемо одређено својство објекта стања новим подацима користећи [нотацију са заградама](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Working_with_Objects#Objects_and_properties) `[property]` за доделу. На крају, закључавамо објекат како бисмо спречили модификације користећи `Object.freeze()`. Тренутно имамо само својство `account` у стању, али са овим приступом можете додати онолико својстава колико вам је потребно у стање.
+
+Такође ћемо ажурирати иницијализацију `state` како бисмо били сигурни да је почетно стање такође замрзнуто:
+
+```js
+let state = Object.freeze({
+  account: null
+});
+```
+
+Након тога, ажурирајте функцију `register` заменом `state.account = result;` са:
+
+```js
+updateState('account', result);
+```
+
+Урадите исто са функцијом `login`, заменом `state.account = data;` са:
+
+```js
+updateState('account', data);
+```
+
+Сада ћемо искористити прилику да решимо проблем са подацима о налогу који нису очишћени када корисник кликне на *Одјава*.
+
+Креирајте нову функцију `logout()`:
+
+```js
+function logout() {
+  updateState('account', null);
+  navigate('/login');
+}
+```
+
+У функцији `updateDashboard()`, замените преусмеравање `return navigate('/login');` са `return logout();`
+
+Покушајте да региструјете нови налог, одјавите се и поново пријавите да бисте проверили да ли све и даље ради исправно.
+
+> Савет: можете погледати све промене стања додавањем `console.log(state)` на крај `updateState()` и отварањем конзоле у алатима за развој вашег прегледача.
+
+## Чување стања
+
+Већини веб апликација је потребно да чувају податке како би исправно функционисале. Сви критични подаци обично се чувају у бази података и приступа им се преко серверског API-ја, као што су подаци о корисничком налогу у нашем случају. Али понекад је такође занимљиво чувати неке податке у клијентској апликацији која ради у вашем прегледачу, ради бољег корисничког искуства или ради побољшања перформанси учитавања.
+
+Када желите да чувате податке у вашем прегледачу, постоји неколико важних питања која треба да поставите себи:
+
+- *Да ли су подаци осетљиви?* Требало би избегавати чување било каквих осетљивих података на клијенту, као што су корисничке лозинке.
+- *Колико дуго вам је потребно да задржите ове податке?* Да ли планирате да приступите овим подацима само током тренутне сесије или желите да буду сачувани заувек?
+
+Постоји више начина за чување информација унутар веб апликације, у зависности од тога шта желите да постигнете. На пример, можете користити URL-ове за чување упита за претрагу и учинити их деливим између корисника. Такође можете користити [HTTP колачиће](https://developer.mozilla.org/docs/Web/HTTP/Cookies) ако подаци треба да се деле са сервером, као што су информације о [аутентификацији](https://en.wikipedia.org/wiki/Authentication).
+
+Друга опција је коришћење једног од многих API-ја прегледача за чување података. Два од њих су посебно занимљива:
+
+- [`localStorage`](https://developer.mozilla.org/docs/Web/API/Window/localStorage): [Key/Value store](https://en.wikipedia.org/wiki/Key%E2%80%93value_database) који омогућава чување података специфичних за тренутни веб сајт током различитих сесија. Подаци сачувани у њему никада не истичу.
+- [`sessionStorage`](https://developer.mozilla.org/docs/Web/API/Window/sessionStorage): ради исто као `localStorage`, осим што се подаци сачувани у њему бришу када сесија заврши (када се прегледач затвори).
+
+Имајте на уму да оба ова API-ја дозвољавају чување само [стрингова](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String). Ако желите да чувате сложене објекте, мораћете да их серијализујете у [JSON](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON) формат користећи [`JSON.stringify()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify).
+
+✅ Ако желите да креирате веб апликацију која не ради са сервером, могуће је креирати базу података на клијенту користећи [`IndexedDB` API](https://developer.mozilla.org/docs/Web/API/IndexedDB_API). Овај је резервисан за напредне случајеве употребе или ако треба да чувате значајну количину података, јер је сложенији за употребу.
+
+### Задатак
+
+Желимо да наши корисници остану пријављени док експлицитно не кликну на дугме *Одјава*, па ћемо користити `localStorage` за чување података о налогу. Прво, хајде да дефинишемо кључ који ћемо користити за чување наших података.
+
+```js
+const storageKey = 'savedAccount';
+```
+
+Затим додајте овај ред на крај функције `updateState()`:
+
+```js
+localStorage.setItem(storageKey, JSON.stringify(state.account));
+```
+
+Са овим, подаци о корисничком налогу ће бити сачувани и увек ажурирани, јер смо претходно централизовали сва наша ажурирања стања. Овде почињемо да уживамо у предностима свих наших претходних рефакторисања 🙂.
+
+Како су подаци сачувани, такође морамо водити рачуна о њиховом враћању када се апликација учита. Пошто ћемо почети да имамо више кода за иницијализацију, можда је добра идеја да креирамо нову функцију `init`, која такође укључује наш претходни код на крају `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();
+```
+
+Овде враћамо сачуване податке, и ако их има, ажурирамо стање у складу с тим. Важно је то урадити *пре* ажурирања руте, јер може постојати код који се ослања на стање током ажурирања странице.
+
+Такође можемо учинити страницу *Контролна табла* подразумеваном страницом наше апликације, јер сада чувамо податке о налогу. Ако подаци нису пронађени, контролна табла се брине о преусмеравању на страницу *Пријава*. У функцији `updateRoute()`, замените резервну `return navigate('/login');` са `return navigate('/dashboard');`.
+
+Сада се пријавите у апликацију и покушајте да освежите страницу. Требало би да останете на контролној табли. Са тим ажурирањем, решили смо све наше почетне проблеме...
+
+## Освежавање података
+
+...Али можда смо такође створили нови проблем. Опа!
+
+Идите на контролну таблу користећи налог `test`, а затим покрените ову команду у терминалу да бисте креирали нову трансакцију:
+
+```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
+```
+
+Покушајте да освежите страницу контролне табле у прегледачу сада. Шта се дешава? Да ли видите нову трансакцију?
+
+Стање је сачувано на неодређено време захваљујући `localStorage`, али то такође значи да се никада не ажурира док се не одјавите из апликације и поново пријавите!
+
+Једна могућа стратегија за решавање овог проблема је да се подаци о налогу поново учитавају сваки пут када се контролна табла учита, како би се избегли застарели подаци.
+
+### Задатак
+
+Креирајте нову функцију `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);
+}
+```
+
+Ова метода проверава да ли смо тренутно пријављени, а затим поново учитава податке о налогу са сервера.
+
+Креирајте још једну функцију под називом `refresh`:
+
+```js
+async function refresh() {
+  await updateAccountData();
+  updateDashboard();
+}
+```
+
+
+[Квиз након предавања](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/48)
+
+## Задатак
+
+[Имплементирајте дијалог "Додај трансакцију"](assignment.md)
+
+Ево примера резултата након завршетка задатка:
+
+![Снимак екрана који приказује пример дијалога "Додај трансакцију"](../../../../translated_images/dialog.93bba104afeb79f12f65ebf8f521c5d64e179c40b791c49c242cf15f7e7fab15.sr.png)
+
+---
+
+**Одрицање од одговорности**:  
+Овај документ је преведен коришћењем услуге за превођење помоћу вештачке интелигенције [Co-op Translator](https://github.com/Azure/co-op-translator). Иако се трудимо да обезбедимо тачност, молимо вас да имате у виду да аутоматски преводи могу садржати грешке или нетачности. Оригинални документ на његовом изворном језику треба сматрати ауторитативним извором. За критичне информације препоручује се професионални превод од стране људи. Не сносимо одговорност за било каква погрешна тумачења или неспоразуме који могу произаћи из коришћења овог превода.
\ No newline at end of file
diff --git a/translations/sr/7-bank-project/4-state-management/assignment.md b/translations/sr/7-bank-project/4-state-management/assignment.md
new file mode 100644
index 00000000..dcf0cc81
--- /dev/null
+++ b/translations/sr/7-bank-project/4-state-management/assignment.md
@@ -0,0 +1,39 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "f23a868536c07da991b1d4e773161e25",
+  "translation_date": "2025-08-27T23:06:46+00:00",
+  "source_file": "7-bank-project/4-state-management/assignment.md",
+  "language_code": "sr"
+}
+-->
+# Имплементација дијалога "Додај трансакцију"
+
+## Упутства
+
+Наша апликација за банкарство још увек нема једну важну функцију: могућност уноса нових трансакција. 
+Користећи све што сте научили у претходна четири часа, имплементирајте дијалог "Додај трансакцију":
+
+- Додајте дугме "Додај трансакцију" на страници контролне табле
+- Или креирајте нову страницу са HTML шаблоном, или користите JavaScript за приказ/скривање HTML дијалога без напуштања странице контролне табле (можете користити својство [`hidden`](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/hidden) за то, или CSS класе)
+- Уверите се да сте обрадили [доступност за тастатуру и читаче екрана](https://developer.paciellogroup.com/blog/2018/06/the-current-state-of-modal-dialog-accessibility/) за дијалог
+- Имплементирајте HTML форму за унос података
+- Креирајте JSON податке из података форме и пошаљите их на API
+- Ажурирајте страницу контролне табле новим подацима
+
+Погледајте [спецификације серверског API-ја](../api/README.md) да видите који API треба да позовете и који је очекивани JSON формат.
+
+Ево примера резултата након завршетка задатка:
+
+![Снимак екрана који приказује пример дијалога "Додај трансакцију"](../../../../translated_images/dialog.93bba104afeb79f12f65ebf8f521c5d64e179c40b791c49c242cf15f7e7fab15.sr.png)
+
+## Рубрика
+
+| Критеријум | Изузетно                                                                                       | Прихватљиво                                                                                                            | Потребно побољшање                           |
+| ---------- | --------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------- | --------------------------------------------|
+|            | Додавање трансакције је у потпуности имплементирано, пратећи све најбоље праксе из часова.      | Додавање трансакције је имплементирано, али не прати најбоље праксе из часова, или ради само делимично.                 | Додавање трансакције уопште не функционише.  |
+
+---
+
+**Одрицање од одговорности**:  
+Овај документ је преведен коришћењем услуге за превођење помоћу вештачке интелигенције [Co-op Translator](https://github.com/Azure/co-op-translator). Иако се трудимо да обезбедимо тачност, молимо вас да имате у виду да аутоматски преводи могу садржати грешке или нетачности. Оригинални документ на његовом изворном језику треба сматрати ауторитативним извором. За критичне информације препоручује се професионални превод од стране људи. Не преузимамо одговорност за било каква погрешна тумачења или неспоразуме који могу настати услед коришћења овог превода.
\ No newline at end of file
diff --git a/translations/sr/7-bank-project/README.md b/translations/sr/7-bank-project/README.md
new file mode 100644
index 00000000..0aa62308
--- /dev/null
+++ b/translations/sr/7-bank-project/README.md
@@ -0,0 +1,35 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "830359535306594b448db6575ce5cdee",
+  "translation_date": "2025-08-27T22:54:54+00:00",
+  "source_file": "7-bank-project/README.md",
+  "language_code": "sr"
+}
+-->
+# :dollar: Направите банку
+
+У овом пројекту ћете научити како да направите фиктивну банку. Ове лекције укључују упутства о томе како да распоредите веб апликацију и обезбедите руте, направите форме, управљате стањем и преузимате податке са API-ја од којег можете добити податке банке.
+
+| ![Screen1](../../../translated_images/screen1.baccbba0f1f93364672eb250d2fbd21574bb1caf79a2155022dc098a741cbdfe.sr.png) | ![Screen2](../../../translated_images/screen2.123c82a831a1d14ab2061994be2fa5de9cec1ce651047217d326d4773a6348e4.sr.png) |
+|--------------------------------|--------------------------------|
+
+## Лекције
+
+1. [HTML шаблони и руте у веб апликацији](1-template-route/README.md)
+2. [Направите форму за пријаву и регистрацију](2-forms/README.md)
+3. [Методе за преузимање и коришћење података](3-data/README.md)
+4. [Концепти управљања стањем](4-state-management/README.md)
+
+### Захвалнице
+
+Ове лекције су написане са :hearts: од стране [Јохана Ласорсе](https://twitter.com/sinedied).
+
+Ако сте заинтересовани да научите како да направите [серверски API](/7-bank-project/api/README.md) који се користи у овим лекцијама, можете пратити [ову серију видео снимака](https://aka.ms/NodeBeginner) (посебно видео снимке од 17 до 21).
+
+Такође можете погледати [овај интерактивни Learn туторијал](https://aka.ms/learn/express-api).
+
+---
+
+**Одрицање од одговорности**:  
+Овај документ је преведен коришћењем услуге за превођење помоћу вештачке интелигенције [Co-op Translator](https://github.com/Azure/co-op-translator). Иако се трудимо да обезбедимо тачност, молимо вас да имате у виду да аутоматски преводи могу садржати грешке или нетачности. Оригинални документ на његовом изворном језику треба сматрати меродавним извором. За критичне информације препоручује се професионални превод од стране људи. Не преузимамо одговорност за било каква погрешна тумачења или неспоразуме који могу настати услед коришћења овог превода.
\ No newline at end of file
diff --git a/translations/sr/7-bank-project/api/README.md b/translations/sr/7-bank-project/api/README.md
new file mode 100644
index 00000000..9006e197
--- /dev/null
+++ b/translations/sr/7-bank-project/api/README.md
@@ -0,0 +1,48 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "9884f8c8a61cf56214450f8b16a094ce",
+  "translation_date": "2025-08-27T22:55:21+00:00",
+  "source_file": "7-bank-project/api/README.md",
+  "language_code": "sr"
+}
+-->
+# Банкарски API
+
+> Банкарски API направљен уз помоћ [Node.js](https://nodejs.org) + [Express](https://expressjs.com/).
+
+API је већ направљен за вас и није део овог задатка.
+
+Међутим, ако желите да научите како да направите овакву API, можете пратити ову серију видео снимака: https://aka.ms/NodeBeginner (видеа од 17 до 21 покривају управо овај API).
+
+Такође, можете погледати овај интерактивни туторијал: https://aka.ms/learn/express-api
+
+## Покретање сервера
+
+Уверите се да имате инсталиран [Node.js](https://nodejs.org).
+
+1. Клонирајте овај репозиторијум [The Web-Dev-For-Beginners](https://github.com/microsoft/Web-Dev-For-Beginners).
+2. Отворите терминал и идите у фасциклу `Web-Dev-For-Beginners/7-bank-project/api`.
+3. Покрените `npm install` и сачекајте да се пакети инсталирају (може потрајати у зависности од брзине ваше интернет конекције).
+4. Када се инсталација заврши, покрените `npm start` и спремни сте за рад.
+
+Сервер би требало да почне да слуша на порту `5000`.
+*Овај сервер ће радити заједно са главним сервером апликације за банку (који слуша на порту `3000`), немојте га затварати.*
+
+> Напомена: сви уноси се чувају у меморији и нису перзистентни, тако да ће сви подаци бити изгубљени када се сервер заустави.
+
+## Детаљи о API-ју
+
+Рута                                        | Опис
+---------------------------------------------|------------------------------------
+GET    /api/                                 | Добијање информација о серверу
+POST   /api/accounts/                        | Креирање налога, нпр: `{ user: 'Yohan', description: 'My budget', currency: 'EUR', balance: 100 }`
+GET    /api/accounts/:user                   | Добијање свих података за одређени налог
+DELETE /api/accounts/:user                   | Брисање одређеног налога
+POST   /api/accounts/:user/transactions      | Додавање трансакције, нпр: `{ date: '2020-07-23T18:25:43.511Z', object: 'Bought a book', amount: -20 }`
+DELETE  /api/accounts/:user/transactions/:id | Брисање одређене трансакције
+
+---
+
+**Одрицање од одговорности**:  
+Овај документ је преведен коришћењем услуге за превођење помоћу вештачке интелигенције [Co-op Translator](https://github.com/Azure/co-op-translator). Иако се трудимо да превод буде тачан, молимо вас да имате у виду да аутоматизовани преводи могу садржати грешке или нетачности. Оригинални документ на његовом изворном језику треба сматрати меродавним извором. За критичне информације препоручује се професионални превод од стране људи. Не преузимамо одговорност за било каква погрешна тумачења или неспоразуме који могу настати услед коришћења овог превода.
\ No newline at end of file
diff --git a/translations/sr/7-bank-project/solution/README.md b/translations/sr/7-bank-project/solution/README.md
new file mode 100644
index 00000000..c01cb2b0
--- /dev/null
+++ b/translations/sr/7-bank-project/solution/README.md
@@ -0,0 +1,27 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "461aa4fc74c6b1789c3a13b5d82c0cd9",
+  "translation_date": "2025-08-27T23:04:05+00:00",
+  "source_file": "7-bank-project/solution/README.md",
+  "language_code": "sr"
+}
+-->
+# Банкарска апликација
+
+> Пример решења за пројекат банкарске апликације, направљен коришћењем чистог HTML5, CSS-а и JavaScript-а (без коришћења фрејмворкова или библиотека).
+
+## Покретање апликације
+
+Прво се уверите да је [API сервер](../api/README.md) покренут.
+
+Било који веб сервер може се користити за покретање апликације, али пошто већ треба да имате инсталиран [Node.js](https://nodejs.org) за покретање API-ја, можете:
+
+1. Клонирајте овај репозиторијум помоћу Git-а.
+2. Отворите терминал, идите у овај директоријум, а затим покрените `npx lite-server .`. Ово ће покренути развојни веб сервер на порту `3000`.
+3. Отворите `http://localhost:3000` у претраживачу да бисте покренули апликацију.
+
+---
+
+**Одрицање од одговорности**:  
+Овај документ је преведен коришћењем услуге за превођење помоћу вештачке интелигенције [Co-op Translator](https://github.com/Azure/co-op-translator). Иако се трудимо да обезбедимо тачност, молимо вас да имате у виду да аутоматски преводи могу садржати грешке или нетачности. Оригинални документ на његовом изворном језику треба сматрати ауторитативним извором. За критичне информације препоручује се професионални превод од стране људи. Не преузимамо одговорност за било каква погрешна тумачења или неспоразуме који могу настати услед коришћења овог превода.
\ No newline at end of file
diff --git a/translations/sr/8-code-editor/1-using-a-code-editor/README.md b/translations/sr/8-code-editor/1-using-a-code-editor/README.md
new file mode 100644
index 00000000..cd1b6096
--- /dev/null
+++ b/translations/sr/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:38:59+00:00",
+  "source_file": "8-code-editor/1-using-a-code-editor/README.md",
+  "language_code": "sr"
+}
+-->
+# Коришћење уређивача кода
+
+Ова лекција покрива основе коришћења [VSCode.dev](https://vscode.dev), веб-базираног уређивача кода, како бисте могли да правите измене у свом коду и доприносите пројекту без инсталирања било чега на вашем рачунару.
+
+## Циљеви учења
+
+У овој лекцији ћете научити како да:
+
+- Користите уређивач кода у пројекту
+- Пратите измене помоћу контроле верзија
+- Прилагодите уређивач за развој
+
+### Предуслови
+
+Пре него што почнете, потребно је да направите налог на [GitHub](https://github.com). Идите на [GitHub](https://github.com/) и направите налог ако га већ немате.
+
+### Увод
+
+Уређивач кода је основни алат за писање програма и сарадњу на постојећим пројектима. Када разумете основе уређивача и како да користите његове функције, моћи ћете да их примените приликом писања кода.
+
+## Почетак рада са VSCode.dev
+
+[VSCode.dev](https://vscode.dev) је уређивач кода на вебу. Не морате ништа да инсталирате да бисте га користили, баш као када отварате било који други веб сајт. Да бисте започели са уређивачем, отворите следећи линк: [https://vscode.dev](https://vscode.dev). Ако нисте пријављени на [GitHub](https://github.com/), пратите упутства да се пријавите или направите нови налог, а затим се пријавите.
+
+Када се учита, требало би да изгледа слично овој слици:
+
+![Подразумевани VSCode.dev](../../../../translated_images/default-vscode-dev.5d06881d65c1b3234ce50cd9ed3b0028e6031ad5f5b441bcbed96bfa6311f6d0.sr.png)
+
+Постоје три главна дела, почевши од крајње леве стране и крећући се удесно:
+
+1. _Трака активности_ која укључује неке иконе, као што су лупа 🔎, зупчаник ⚙️ и још неке.
+2. Проширена трака активности која подразумевано приказује _Истраживач_, назван _бочна трака_.
+3. И на крају, област за код са десне стране.
+
+Кликните на сваку од икона да бисте приказали различите меније. Када завршите, кликните на _Истраживач_ да се вратите на почетну позицију.
+
+Када почнете да креирате код или мењате постојећи код, то ће се дешавати у највећој области са десне стране. Ову област ћете користити и за визуализацију постојећег кода, што ћете урадити у наставку.
+
+## Отварање GitHub репозиторијума
+
+Прво што вам је потребно је да отворите GitHub репозиторијум. Постоји више начина за отварање репозиторијума. У овом делу видећете два различита начина на која можете отворити репозиторијум како бисте започели рад на изменама.
+
+### 1. Коришћењем уређивача
+
+Користите сам уређивач да отворите удаљени репозиторијум. Ако одете на [VSCode.dev](https://vscode.dev), видећете дугме _"Open Remote Repository"_:
+
+![Отвори удаљени репозиторијум](../../../../translated_images/open-remote-repository.bd9c2598b8949e7fc283cdfc8f4050c6205a7c7c6d3f78c4b135115d037d6fa2.sr.png)
+
+Такође можете користити палету команди. Палета команди је поље за унос у које можете уписати било коју реч која је део команде или акције да бисте пронашли одговарајућу команду за извршење. Користите мени у горњем левом углу, затим изаберите _View_, а потом _Command Palette_, или користите следећу пречицу на тастатури: Ctrl-Shift-P (на MacOS-у би то било Command-Shift-P).
+
+![Мени палете](../../../../translated_images/palette-menu.4946174e07f426226afcdad707d19b8d5150e41591c751c45b5dee213affef91.sr.png)
+
+Када се мени отвори, упишите _open remote repository_, а затим изаберите прву опцију. Више репозиторијума којима припадате или које сте недавно отворили ће се приказати. Такође можете користити пуну GitHub URL адресу да бисте изабрали један. Користите следећи URL и налепите га у поље:
+
+```
+https://github.com/microsoft/Web-Dev-For-Beginners
+```
+
+✅ Ако је успешно, видећете све датотеке за овај репозиторијум учитане у текстуалном уређивачу.
+
+### 2. Коришћењем URL-а
+
+Такође можете директно користити URL да бисте учитали репозиторијум. На пример, пуни URL за тренутни репозиторијум је [https://github.com/microsoft/Web-Dev-For-Beginners](https://github.com/microsoft/Web-Dev-For-Beginners), али можете заменити GitHub домен са `VSCode.dev/github` и директно учитати репозиторијум. Резултујући URL би био [https://vscode.dev/github/microsoft/Web-Dev-For-Beginners](https://vscode.dev/github/microsoft/Web-Dev-For-Beginners).
+
+## Уређивање датотека
+
+Када отворите репозиторијум у прегледачу или на vscode.dev, следећи корак је да направите ажурирања или измене у пројекту.
+
+### 1. Креирање нове датотеке
+
+Можете креирати датотеку унутар постојећег фолдера или је креирати у коренском директоријуму/фолдеру. Да бисте креирали нову датотеку, отворите локацију/директоријум у који желите да сачувате датотеку и изаберите икону _'New file ...'_ на траци активности _(лево)_, дајте јој име и притисните Enter.
+
+![Креирај нову датотеку](../../../../translated_images/create-new-file.2814e609c2af9aeb6c6fd53156c503ac91c3d538f9cac63073b2dd4a7631f183.sr.png)
+
+### 2. Уређивање и чување датотеке у репозиторијуму
+
+Коришћење vscode.dev је корисно када желите брзо да ажурирате свој пројекат без потребе за локалним учитавањем софтвера.  
+Да бисте ажурирали свој код, кликните на икону 'Explorer', која се такође налази на траци активности, да бисте видели датотеке и фолдере у репозиторијуму.  
+Изаберите датотеку да бисте је отворили у области за код, направите измене и сачувајте.
+
+![Уреди датотеку](../../../../translated_images/edit-a-file.52c0ee665ef19f08119d62d63f395dfefddc0a4deb9268d73bfe791f52c5807a.sr.png)
+
+Када завршите са ажурирањем пројекта, изаберите икону _`source control`_ која садржи све нове измене које сте направили у репозиторијуму.
+
+Да бисте видели измене које сте направили у пројекту, изаберите датотеке у фолдеру `Changes` на проширеној траци активности. Ово ће отворити 'Working Tree' где можете визуелно видети измене које сте направили у датотеци. Црвена боја означава изостављање у пројекту, док зелена означава додавање.
+
+![Прегледај измене](../../../../translated_images/working-tree.c58eec08e6335c79cc708c0c220c0b7fea61514bd3c7fb7471905a864aceac7c.sr.png)
+
+Ако сте задовољни изменама које сте направили, пређите мишем преко фолдера `Changes` и кликните на дугме `+` да бисте припремили измене. Припрема значи да припремате своје измене за комитовање на GitHub.
+
+Ако, међутим, нисте задовољни неким изменама и желите да их одбаците, пређите мишем преко фолдера `Changes` и изаберите икону `undo`.
+
+Затим, упишите `commit message` _(Опис измене коју сте направили у пројекту)_, кликните на икону `check` да бисте комитовали и послали своје измене.
+
+Када завршите са радом на пројекту, изаберите икону `hamburger menu` у горњем левом углу да бисте се вратили на репозиторијум на github.com.
+
+![Припреми и комитуј измене](../../../../8-code-editor/images/edit-vscode.dev.gif)
+
+## Коришћење екстензија
+
+Инсталирање екстензија на VSCode вам омогућава да додате нове функције и опције за прилагођавање развојног окружења у вашем уређивачу како бисте побољшали свој развојни ток. Ове екстензије такође помажу у додавању подршке за више програмских језика и често су или опште екстензије или екстензије засноване на језику.
+
+Да бисте прегледали листу свих доступних екстензија, кликните на икону _`Extensions`_ на траци активности и почните да куцате име екстензије у текстуално поље означено _'Search Extensions in Marketplace'_.  
+Видећете листу екстензија, од којих свака садржи **име екстензије, име издавача, једну реченицу описа, број преузимања** и **звездице за оцену**.
+
+![Детаљи екстензије](../../../../translated_images/extension-details.9f8f1fd4e9eb2de5069ae413119eb8ee43172776383ebe2f7cf640e11df2e106.sr.png)
+
+Такође можете прегледати све претходно инсталиране екстензије проширивањем фолдера _`Installed`_, популарне екстензије које користи већина програмера у фолдеру _`Popular`_ и препоручене екстензије за вас, било од стране корисника у истом радном простору или на основу недавно отворених датотека у фолдеру _`Recommended`_.
+
+![Преглед екстензија](../../../../translated_images/extensions.eca0e0c7f59a10b5c88be7fe24b3e32cca6b6058b35a49026c3a9d80b1813b7c.sr.png)
+
+### 1. Инсталирање екстензија
+
+Да бисте инсталирали екстензију, упишите име екстензије у поље за претрагу и кликните на њу да бисте видели додатне информације о екстензији у области за код када се појави на проширеној траци активности.
+
+Можете кликнути на _плаво дугме за инсталацију_ на проширеној траци активности да бисте инсталирали или користити дугме за инсталацију које се појављује у области за код када изаберете екстензију да бисте учитали додатне информације.
+
+![Инсталирај екстензије](../../../../8-code-editor/images/install-extension.gif)
+
+### 2. Прилагођавање екстензија
+
+Након инсталирања екстензије, можда ћете морати да модификујете њено понашање и прилагодите је на основу својих преференција. Да бисте то урадили, изаберите икону Extensions, и овог пута, ваша екстензија ће се појавити у фолдеру _Installed_, кликните на _**икону зупчаника**_ и идите на _Extensions Setting_.
+
+![Модификуј подешавања екстензије](../../../../translated_images/extension-settings.21c752ae4f4cdb78a867f140ccd0680e04619d0c44bb4afb26373e54b829d934.sr.png)
+
+### 3. Управљање екстензијама
+
+Након инсталирања и коришћења екстензије, vscode.dev нуди опције за управљање екстензијом на основу различитих потреба. На пример, можете изабрати да:
+
+- **Онемогућите:** _(Привремено онемогућите екстензију када вам више није потребна, али не желите да је потпуно деинсталирате)_
+
+    Изаберите инсталирану екстензију на проширеној траци активности > кликните на икону зупчаника > изаберите 'Disable' или 'Disable (Workspace)' **ИЛИ** Отворите екстензију у области за код и кликните на плаво дугме Disable.
+
+- **Деинсталирате:** Изаберите инсталирану екстензију на проширеној траци активности > кликните на икону зупчаника > изаберите 'Uninstall' **ИЛИ** Отворите екстензију у области за код и кликните на плаво дугме Uninstall.
+
+---
+
+## Задатак
+
+[Направите веб-сајт за резиме користећи vscode.dev](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/8-code-editor/1-using-a-code-editor/assignment.md)
+
+## Преглед и самостално учење
+
+Прочитајте више о [VSCode.dev](https://code.visualstudio.com/docs/editor/vscode-web?WT.mc_id=academic-0000-alfredodeza) и неким његовим другим функцијама.
+
+---
+
+**Одрицање од одговорности**:  
+Овај документ је преведен коришћењем услуге за превођење помоћу вештачке интелигенције [Co-op Translator](https://github.com/Azure/co-op-translator). Иако настојимо да обезбедимо тачност, молимо вас да имате у виду да аутоматски преводи могу садржати грешке или нетачности. Оригинални документ на његовом изворном језику треба сматрати меродавним извором. За критичне информације препоручује се професионални превод од стране људи. Не преузимамо одговорност за било каква погрешна тумачења или неспоразуме који могу настати услед коришћења овог превода.
\ No newline at end of file
diff --git a/translations/sr/8-code-editor/1-using-a-code-editor/assignment.md b/translations/sr/8-code-editor/1-using-a-code-editor/assignment.md
new file mode 100644
index 00000000..bf001e74
--- /dev/null
+++ b/translations/sr/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:40:32+00:00",
+  "source_file": "8-code-editor/1-using-a-code-editor/assignment.md",
+  "language_code": "sr"
+}
+-->
+# Направите веб-сајт за резиме користећи vscode.dev
+
+_Колико би било кул да вас рекрутер замоли за ваше резиме, а ви му пошаљете URL?_ 😎
+
+## Циљеви
+
+Након овог задатка, научићете како да:
+
+- Направите веб-сајт за приказивање вашег резимеа
+
+### Предуслови
+
+1. Налог на GitHub-у. Идите на [GitHub](https://github.com/) и направите налог ако га већ немате.
+
+## Кораци
+
+**Корак 1:** Направите нови GitHub репозиторијум и дајте му име `my-resume`
+
+**Корак 2:** Направите `index.html` датотеку у вашем репозиторијуму. Додаћемо бар једну датотеку док смо још на github.com јер не можете отворити празан репозиторијум на vscode.dev.
+
+Кликните на линк `creating a new file`, унесите име `index.html` и изаберите дугме `Commit new file`.
+
+![Направите нову датотеку на github.com](../../../../translated_images/new-file-github.com.c886796d800e8056561829a181be1382c5303da9d902d8b2dd82b68a4806e21f.sr.png)
+
+**Корак 3:** Отворите [VSCode.dev](https://vscode.dev) и изаберите дугме `Open Remote Repository`.
+
+Копирајте URL репозиторијума који сте управо направили за ваш сајт резимеа и налепите га у поље за унос:
+
+_Замените `your-username` са вашим GitHub корисничким именом._
+
+```
+https://github.com/your-username/my-resume
+```
+
+✅ Ако је успешно, видећете ваш пројекат и датотеку index.html отворену у текст едитору у претраживачу.
+
+![Направите нову датотеку](../../../../translated_images/project-on-vscode.dev.e79815a9a95ee7feac72ebe5c941c91279716be37c575dbdbf2f43bea2c7d8b6.sr.png)
+
+**Корак 4:** Отворите датотеку `index.html`, налепите код испод у ваш кодни простор и сачувајте.
+
+<details>
+    <summary><b>HTML код одговоран за садржај вашег веб-сајта резимеа.</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>Ваше име овде!</title>
+            </head>
+            <body>
+                <header id="header">
+                    <!-- заглавље резимеа са вашим именом и титулом -->
+                    <h1>Ваше име овде!</h1>
+                    <hr>
+                    Ваша улога!
+                    <hr>
+                </header>
+                <main>
+                    <article id="mainLeft">
+                        <section>
+                            <h2>КОНТАКТ</h2>
+                            <!-- контакт информације укључујући друштвене мреже -->
+                            <p>
+                                <i class="fa fa-envelope" aria-hidden="true"></i>
+                                <a href="mailto:username@domain.top-level domain">Унесите ваш емаил овде</a>
+                            </p>
+                            <p>
+                                <i class="fab fa-github" aria-hidden="true"></i>
+                                <a href="github.com/yourGitHubUsername">Унесите ваше корисничко име овде!</a>
+                            </p>
+                            <p>
+                                <i class="fab fa-linkedin" aria-hidden="true"></i>
+                                <a href="linkedin.com/yourLinkedInUsername">Унесите ваше корисничко име овде!</a>
+                            </p>
+                        </section>
+                        <section>
+                            <h2>ВЕШТИНЕ</h2>
+                            <!-- ваше вештине -->
+                            <ul>
+                                <li>Вештина 1!</li>
+                                <li>Вештина 2!</li>
+                                <li>Вештина 3!</li>
+                                <li>Вештина 4!</li>
+                            </ul>
+                        </section>
+                        <section>
+                            <h2>ОБРАЗОВАЊЕ</h2>
+                            <!-- ваше образовање -->
+                            <h3>Унесите ваш курс овде!</h3>
+                            <p>
+                                Унесите вашу институцију овде!
+                            </p>
+                            <p>
+                                Почетак - Крај
+                            </p>
+                        </section>            
+                    </article>
+                    <article id="mainRight">
+                        <section>
+                            <h2>О МЕНИ</h2>
+                            <!-- о вама -->
+                            <p>Унесите кратак текст о себи!</p>
+                        </section>
+                        <section>
+                            <h2>РАДНО ИСКУСТВО</h2>
+                            <!-- ваше радно искуство -->
+                            <h3>Назив посла</h3>
+                            <p>
+                                Назив организације овде | Месец почетка – Месец краја
+                            </p>
+                            <ul>
+                                    <li>Задатак 1 - Унесите шта сте радили!</li>
+                                    <li>Задатак 2 - Унесите шта сте радили!</li>
+                                    <li>Унесите резултате/утицај вашег доприноса</li>
+                                    
+                            </ul>
+                            <h3>Назив посла 2</h3>
+                            <p>
+                                Назив организације овде | Месец почетка – Месец краја
+                            </p>
+                            <ul>
+                                    <li>Задатак 1 - Унесите шта сте радили!</li>
+                                    <li>Задатак 2 - Унесите шта сте радили!</li>
+                                    <li>Унесите резултате/утицај вашег доприноса</li>
+                                    
+                            </ul>
+                        </section>
+                    </article>
+                </main>
+            </body>
+        </html>
+</details>
+
+Додајте детаље вашег резимеа да замените _текст за попуњавање_ у HTML коду.
+
+**Корак 5:** Пређите мишем преко фасцикле My-Resume, кликните на икону `New File ...` и направите 2 нове датотеке у вашем пројекту: `style.css` и `codeswing.json`.
+
+**Корак 6:** Отворите датотеку `style.css`, налепите код испод и сачувајте.
+
+<details>
+        <summary><b>CSS код за форматирање изгледа сајта.</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>
+
+**Корак 6:** Отворите датотеку `codeswing.json`, налепите код испод и сачувајте.
+
+    {
+    "scripts": [],
+    "styles": []
+    }
+
+**Корак 7:** Инсталирајте `Codeswing extension` да визуализујете веб-сајт резимеа у кодном простору.
+
+Кликните на икону _`Extensions`_ на траци активности и укуцајте Codeswing. Или кликните на _плаво дугме за инсталацију_ на проширеној траци активности да инсталирате или користите дугме за инсталацију које се појављује у кодном простору када изаберете екстензију за учитавање додатних информација. Одмах након инсталирања екстензије, посматрајте ваш кодни простор да видите промене у вашем пројекту 😃.
+
+![Инсталирајте екстензије](../../../../8-code-editor/images/install-extension.gif)
+
+Ово је оно што ћете видети на вашем екрану након што инсталирате екстензију.
+
+![Codeswing екстензија у акцији](../../../../translated_images/after-codeswing-extension-pb.0ebddddcf73b550994947a9084e35e2836c713ae13839d49628e3c764c1cfe83.sr.png)
+
+Ако сте задовољни променама које сте направили, пређите мишем преко фасцикле `Changes` и кликните на дугме `+` да поставите промене.
+
+Унесите поруку за commit _(Опис промене коју сте направили у пројекту)_ и потврдите ваше промене кликом на `check`. Када завршите рад на вашем пројекту, изаберите икону менија хамбургера у горњем левом углу да се вратите на репозиторијум на GitHub-у.
+
+Честитамо 🎉 Управо сте направили ваш веб-сајт резимеа користећи vscode.dev у неколико корака.
+
+## 🚀 Изазов
+
+Отворите удаљени репозиторијум за који имате дозволу да правите промене и ажурирајте неке датотеке. Затим, покушајте да направите нову грану са вашим променама и направите Pull Request.
+
+## Преглед и самостално учење
+
+Прочитајте више о [VSCode.dev](https://code.visualstudio.com/docs/editor/vscode-web?WT.mc_id=academic-0000-alfredodeza) и неким његовим другим функцијама.
+
+---
+
+**Одрицање од одговорности**:  
+Овај документ је преведен коришћењем услуге за превођење помоћу вештачке интелигенције [Co-op Translator](https://github.com/Azure/co-op-translator). Иако се трудимо да обезбедимо тачност, молимо вас да имате у виду да аутоматски преводи могу садржати грешке или нетачности. Оригинални документ на његовом изворном језику треба сматрати ауторитативним извором. За критичне информације препоручује се професионални превод од стране људи. Не преузимамо одговорност за било каква погрешна тумачења или неспоразуме који могу настати услед коришћења овог превода.
\ No newline at end of file
diff --git a/translations/sr/CODE_OF_CONDUCT.md b/translations/sr/CODE_OF_CONDUCT.md
new file mode 100644
index 00000000..dff5a6fd
--- /dev/null
+++ b/translations/sr/CODE_OF_CONDUCT.md
@@ -0,0 +1,23 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "b0a9b4cccd918195f58224d5793da1a6",
+  "translation_date": "2025-08-27T21:57:43+00:00",
+  "source_file": "CODE_OF_CONDUCT.md",
+  "language_code": "sr"
+}
+-->
+# Microsoft Кодекс понашања за отворени код
+
+Овај пројекат је усвојио [Microsoft Кодекс понашања за отворени код](https://opensource.microsoft.com/codeofconduct/?WT.mc_id=academic-77807-sagibbon).
+
+Ресурси:
+
+- [Microsoft Кодекс понашања за отворени код](https://opensource.microsoft.com/codeofconduct/?WT.mc_id=academic-77807-sagibbon)
+- [Microsoft Често постављана питања о Кодексу понашања](https://opensource.microsoft.com/codeofconduct/faq/?WT.mc_id=academic-77807-sagibbon)
+- Контактирајте [opencode@microsoft.com](mailto:opencode@microsoft.com) за питања или недоумице
+
+---
+
+**Одрицање од одговорности**:  
+Овај документ је преведен коришћењем услуге за превођење помоћу вештачке интелигенције [Co-op Translator](https://github.com/Azure/co-op-translator). Иако се трудимо да обезбедимо тачност, молимо вас да имате у виду да аутоматски преводи могу садржати грешке или нетачности. Оригинални документ на његовом изворном језику треба сматрати ауторитативним извором. За критичне информације препоручује се професионални превод од стране људи. Не преузимамо одговорност за било каква погрешна тумачења или неспоразуме који могу настати услед коришћења овог превода.
\ No newline at end of file
diff --git a/translations/sr/CONTRIBUTING.md b/translations/sr/CONTRIBUTING.md
new file mode 100644
index 00000000..83abb78e
--- /dev/null
+++ b/translations/sr/CONTRIBUTING.md
@@ -0,0 +1,23 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "777400e9f0336c7ee2f9a1200a88478f",
+  "translation_date": "2025-08-27T21:59:07+00:00",
+  "source_file": "CONTRIBUTING.md",
+  "language_code": "sr"
+}
+-->
+# Допринос
+
+Овај пројекат поздравља доприносе и предлоге. Већина доприноса захтева да се сложите са Уговором о лиценци за доприносе (CLA), којим потврђујете да имате право и да заиста дајете нам права да користимо ваш допринос. За више детаља, посетите [https://cla.microsoft.com](https://cla.microsoft.com/?WT.mc_id=academic-77807-sagibbon).
+
+Када пошаљете захтев за повлачење (pull request), CLA-бот ће аутоматски утврдити да ли је потребно да доставите CLA и одговарајуће означи ваш захтев (нпр. етикета, коментар). Само пратите упутства која вам бот пружи. Ово ћете морати да урадите само једном за све репозиторијуме који користе наш CLA. Молимо вас да нам такође кажете зашто сте направили ту промену како бисмо боље разумели ваш захтев.
+
+Овај пројекат је усвојио [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/?WT.mc_id=academic-77807-sagibbon).  
+За више информација, погледајте [Често постављана питања о Кодексу понашања](https://opensource.microsoft.com/codeofconduct/faq/?WT.mc_id=academic-77807-sagibbon)  
+или контактирајте [opencode@microsoft.com](mailto:opencode@microsoft.com) за било каква додатна питања или коментаре.
+
+---
+
+**Одрицање од одговорности**:  
+Овај документ је преведен коришћењем услуге за превођење помоћу вештачке интелигенције [Co-op Translator](https://github.com/Azure/co-op-translator). Иако се трудимо да обезбедимо тачност, молимо вас да имате у виду да аутоматски преводи могу садржати грешке или нетачности. Оригинални документ на његовом изворном језику треба сматрати ауторитативним извором. За критичне информације препоручује се професионални превод од стране људи. Не преузимамо одговорност за било каква погрешна тумачења или неспоразуме који могу настати услед коришћења овог превода.
\ No newline at end of file
diff --git a/translations/sr/README.md b/translations/sr/README.md
new file mode 100644
index 00000000..9a61a91f
--- /dev/null
+++ b/translations/sr/README.md
@@ -0,0 +1,206 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "b672130244189715ac084c3259f6ab58",
+  "translation_date": "2025-08-27T21:55:27+00:00",
+  "source_file": "README.md",
+  "language_code": "sr"
+}
+-->
+[![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)  
+
+# Веб развој за почетнике - Курикулум  
+
+Научите основе веб развоја уз наш свеобухватни 12-недељни курс који су креирали Microsoft Cloud Advocates. Свака од 24 лекције обухвата JavaScript, CSS и HTML кроз практичне пројекте као што су тераријуми, екстензије за претраживач и свемирске игре. Укључите се у квизове, дискусије и практичне задатке. Унапредите своје вештине и оптимизујте задржавање знања уз нашу ефикасну педагогију засновану на пројектима. Започните своје кодерско путовање данас!  
+
+#### 🧑‍🎓 _Да ли сте студент?_  
+
+Посетите [**Student Hub страницу**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) где ћете пронаћи ресурсе за почетнике, студентске пакете и чак начине да добијете бесплатан ваучер за сертификат. Ово је страница коју треба да обележите и повремено проверавате, јер садржај мењамо месечно.  
+
+### 📣 Обавештење - _Нови курикулум_ о генеративној вештачкој интелигенцији за JavaScript је управо објављен  
+
+Не пропустите наш нови курикулум о генеративној вештачкој интелигенцији!  
+
+Посетите [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) да започнете!  
+
+<div>  
+  <img src="./images/background.png" width="600px" />  
+</div>  
+
+- Лекције које покривају све од основа до RAG.  
+- Интеракција са историјским личностима уз GenAI и нашу пратећу апликацију.  
+- Забавна и ангажујућа нарација, путоваћете кроз време!  
+
+<div>  
+  <img src="./images/character.png" width="600px" />  
+</div>  
+
+Свака лекција укључује задатак за завршетак, проверу знања и изазов који вас води кроз теме као што су:  
+- Промптинг и инжењеринг промпта  
+- Генерисање апликација за текст и слике  
+- Апликације за претрагу  
+
+Посетите [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) да започнете!  
+
+## 🌱 Почетак  
+
+> **Наставници**, [укључили смо неке предлоге](for-teachers.md) о томе како да користите овај курикулум. Волели бисмо да чујемо ваше повратне информације [у нашем форуму за дискусију](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!  
+
+**[Ученици](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, за сваку лекцију, започните квизом пре предавања, наставите читањем материјала за предавање, завршите разне активности и проверите своје разумевање квизом након предавања.  
+
+Да бисте побољшали своје искуство учења, повежите се са својим вршњацима да заједно радите на пројектима! Дискусије су охрабрене у нашем [форуму за дискусију](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) где ће наш тим модератора бити доступан да одговори на ваша питања.  
+
+Да бисте додатно унапредили своје образовање, препоручујемо да истражите [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) за додатне материјале за учење.  
+
+### 📋 Постављање окружења  
+
+Овај курикулум има окружење за развој спремно за употребу! Када започнете, можете изабрати да покренете курикулум у [Codespace](https://github.com/features/codespaces/) (_окружење засновано на претраживачу, без потребе за инсталацијама_), или локално на вашем рачунару користећи текстуални едитор као што је [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).  
+
+#### Креирајте свој репозиторијум  
+Да бисте лако сачували свој рад, препоручује се да креирате своју копију овог репозиторијума. То можете урадити кликом на дугме **Use this template** на врху странице. Ово ће креирати нови репозиторијум на вашем GitHub налогу са копијом курикулума.  
+
+Следите ове кораке:  
+1. **Fork репозиторијума**: Кликните на дугме "Fork" у горњем десном углу ове странице.  
+2. **Клонирајте репозиторијум**:   `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`  
+
+#### Покретање курикулума у Codespace  
+
+У вашој копији овог репозиторијума коју сте креирали, кликните на дугме **Code** и изаберите **Open with Codespaces**. Ово ће креирати нови Codespace за рад.  
+
+<img src="./images/createcodespace.png" alt="Create codespace" style="width:270px;"/>  
+
+#### Покретање курикулума локално на вашем рачунару  
+
+Да бисте покренули овај курикулум локално на вашем рачунару, биће вам потребан текстуални едитор, претраживач и алат за командну линију. Наша прва лекција, [Увод у програмске језике и алате](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/1-getting-started-lessons/1-intro-to-programming-languages), ће вас провести кроз разне опције за сваки од ових алата како бисте изабрали оно што вам највише одговара.  
+
+Препоручујемо да користите [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) као ваш едитор, који такође има уграђени [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Можете преузети Visual Studio Code [овде](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).  
+
+1. Клонирајте свој репозиторијум на рачунар. То можете урадити кликом на дугме **Code** и копирањем URL-а:  
+
+    <img src="./images/createcodespace.png" alt="Copy your repository URL" style="width:270px;"/>  
+
+    Затим, отворите [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) унутар [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) и покрените следећу команду, замењујући `<your-repository-url>` са URL-ом који сте управо копирали:  
+
+    ```bash 
+    git clone <your-repository-url>
+    ```  
+
+2. Отворите фасциклу у Visual Studio Code. То можете урадити кликом на **File** > **Open Folder** и избором фасцикле коју сте управо клонирали.  
+
+>  Препоручене екстензије за Visual Studio Code:  
+>  
+> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - за преглед HTML страница унутар Visual Studio Code  
+> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - за брже писање кода  
+
+## 📂 Свака лекција укључује:  
+
+- опциони скетч  
+- опциони допунски видео  
+- квиз за загревање пре лекције  
+- писану лекцију  
+- за лекције засноване на пројектима, водиче корак по корак како изградити пројекат  
+- провере знања  
+- изазов  
+- допунско читање  
+- задатак  
+- квиз након лекције  
+
+> **Напомена о квизовима**: Сви квизови се налазе у фасцикли Quiz-app, укупно 48 квизова са по три питања. Линкови ка квизовима су укључени унутар лекција, а апликација за квиз може се покренути локално или поставити на Azure; пратите упутства у фасцикли `quiz-app`. Постепено се локализују.  
+
+## 🗃️ Лекције  
+
+|     |                       Назив пројекта                       |                            Концепти који се предају                             | Циљеви учења                                                                                                                 |                                                         Линкована лекција                                                          |         Аутор          |  
+| :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |  
+| 01  |                     Почетак                      |           Увод у програмирање и алате за рад           | Научите основне принципе већине програмских језика и о софтверу који помаже професионалним програмерима у њиховом раду | [Увод у програмске језике и алате](/1-getting-started-lessons/1-intro-to-programming-languages/README.md) |         Jasmine         |  
+| 02  |                     Почетак                      |             Основе GitHub-а, укључујући рад у тиму             | Како користити GitHub у вашем пројекту, како сарађивати са другима на бази кода                                                    |                            [Увод у GitHub](/1-getting-started-lessons/2-github-basics/README.md)                             |          Floor          |  
+| 03  |                     Почетак                      |                             Приступачност                              | Научите основе веб приступачности                                                                                               |                       [Основе приступачности](/1-getting-started-lessons/3-accessibility/README.md)                       |       Christopher       |  
+| 04  |                        Основе JS                         |                         Типови података у JavaScript-у                          | Основе типова података у JavaScript-у                                                                                                 |                                       [Типови података](/2-js-basics/1-data-types/README.md)                                        |         Jasmine         |  
+| 05  |                        Основе JS                         |                         Функције и методе                          | Научите о функцијама и методама за управљање логичким током апликације                                                             |                              [Функције и методе](/2-js-basics/2-functions-methods/README.md)                               | Jasmine и Christopher |  
+| 06  |                        Основе JS                         |                        Доношење одлука уз JS                        | Научите како креирати услове у вашем коду користећи методе за доношење одлука                                                           |                                 [Доношење одлука](/2-js-basics/3-making-decisions/README.md)                                  |         Jasmine         |  
+| 07  |                        Основе JS                         |                            Низови и петље                            | Рад са подацима користећи низове и петље у JavaScript-у                                                                                 |                                   [Низови и петље](/2-js-basics/4-arrays-loops/README.md)                                    |         Jasmine         |  
+| 08  |       [Тераријум](/3-terrarium/solution/README.md)       |                            HTML у пракси                            | Направите HTML за креирање онлајн тераријума, фокусирајући се на изградњу распореда                                                         |                                 [Увод у HTML](/3-terrarium/1-intro-to-html/README.md)                                 |           Jen           |  
+| 09  |       [Тераријум](/3-terrarium/solution/README.md)       |                            CSS у пракси                             | Направите CSS за стилизовање онлајн тераријума, фокусирајући се на основе CSS-а укључујући прављење странице одзивном                     |                                  [Увод у CSS](/3-terrarium/2-intro-to-css/README.md)                                  |           Jen           |  
+| 10  |            [Тераријум](/3-terrarium/solution/README.md)            |                 Затварања у JavaScript-у, манипулација DOM-ом                  | Направите JavaScript да тераријум функционише као интерфејс за превлачење/пуштање, фокусирајући се на затварања и манипулацију DOM-ом             |                  [Затварања у JavaScript-у, манипулација DOM-ом](/3-terrarium/3-intro-to-DOM-and-closures/README.md)                   |           Jen           |  
+| 11  |          [Игра куцања](/4-typing-game/solution/README.md)          |                          Направите игру куцања                           | Научите како користити догађаје са тастатуре за управљање логиком ваше JavaScript апликације                                                          |                                [Програмирање засновано на догађајима](/4-typing-game/typing-game/README.md)                                |       Christopher       |  
+| 12  | [Green Browser Extension](/5-browser-extension/solution/README.md) |                         Рад са претраживачима                          | Научите како претраживачи функционишу, њихову историју и како да направите прве елементе екстензије за претраживач                  |                               [О претраживачима](/5-browser-extension/1-about-browsers/README.md)                               |           Џен           |
+| 13  | [Green Browser Extension](/5-browser-extension/solution/README.md) | Изградња форме, позивање API-ја и чување променљивих у локалној меморији | Направите JavaScript елементе екстензије за претраживач како бисте позвали API користећи променљиве сачуване у локалној меморији     |                [API-ји, форме и локална меморија](/5-browser-extension/2-forms-browsers-local-storage/README.md)                |           Џен           |
+| 14  | [Green Browser Extension](/5-browser-extension/solution/README.md) |          Позадински процеси у претраживачу, веб перформансе             | Користите позадинске процесе претраживача за управљање иконом екстензије; научите о веб перформансама и оптимизацијама               |             [Позадински задаци и перформансе](/5-browser-extension/3-background-tasks-and-performance/README.md)                |           Џен           |
+| 15  |           [Space Game](/6-space-game/solution/README.md)           |             Напреднија израда игара са JavaScript-ом                   | Научите о наслеђивању користећи класе и композицију, као и Pub/Sub шаблон, као припрему за израду игре                              |                      [Увод у напредну израду игара](/6-space-game/1-introduction/README.md)                                     |          Крис           |
+| 16  |           [Space Game](/6-space-game/solution/README.md)           |                           Цртање на платну                             | Научите о Canvas API-ју, који се користи за цртање елемената на екрану                                                               |                                [Цртање на платну](/6-space-game/2-drawing-to-canvas/README.md)                                  |          Крис           |
+| 17  |           [Space Game](/6-space-game/solution/README.md)           |                   Померање елемената по екрану                         | Откријте како елементи могу добити кретање користећи координатни систем и Canvas API                                                |                           [Померање елемената](/6-space-game/3-moving-elements-around/README.md)                               |          Крис           |
+| 18  |           [Space Game](/6-space-game/solution/README.md)           |                          Детекција судара                              | Направите да се елементи сударају и реагују једни на друге користећи притиске на тастере и обезбедите функцију за хлађење игре      |                              [Детекција судара](/6-space-game/4-collision-detection/README.md)                                  |          Крис           |
+| 19  |           [Space Game](/6-space-game/solution/README.md)           |                             Чување резултата                           | Извршите математичке прорачуне на основу статуса и перформанси игре                                                                  |                                    [Чување резултата](/6-space-game/5-keeping-score/README.md)                                  |          Крис           |
+| 20  |           [Space Game](/6-space-game/solution/README.md)           |                     Завршетак и поновно покретање игре                 | Научите о завршетку и поновном покретању игре, укључујући чишћење ресурса и ресетовање вредности променљивих                        |                                [Услов за завршетак](/6-space-game/6-end-condition/README.md)                                    |          Крис           |
+| 21  |         [Banking App](/7-bank-project/solution/README.md)          |                 HTML шаблони и руте у веб апликацији                   | Научите како да направите структуру архитектуре веб сајта са више страница користећи руте и HTML шаблоне                            |                            [HTML шаблони и руте](/7-bank-project/1-template-route/README.md)                                   |          Јохан          |
+| 22  |         [Banking App](/7-bank-project/solution/README.md)          |                  Изградња форме за пријаву и регистрацију               | Научите о изради форми и руковању процедурама за валидацију                                                                          |                                           [Форме](/7-bank-project/2-forms/README.md)                                           |          Јохан          |
+| 23  |         [Banking App](/7-bank-project/solution/README.md)          |                   Методи за преузимање и коришћење података             | Како подаци улазе и излазе из ваше апликације, како их преузети, сачувати и уклонити                                                |                                            [Подаци](/7-bank-project/3-data/README.md)                                          |          Јохан          |
+| 24  |         [Banking App](/7-bank-project/solution/README.md)          |                      Концепти управљања стањем                         | Научите како ваша апликација задржава стање и како њиме управљати програмски                                                          |                                [Управљање стањем](/7-bank-project/4-state-management/README.md)                                |          Јохан          |
+
+
+## 🏫 Педагошки приступ
+
+Наш курикулум је осмишљен са два кључна педагошка принципа:
+* учење кроз пројекте
+* чести квизови
+
+Програм подучава основе JavaScript-а, HTML-а и CSS-а, као и најновије алате и технике које данашњи веб програмери користе. Студенти ће имати прилику да стекну практично искуство кроз израду игре за куцање, виртуелног тераријума, еко-пријатељске екстензије за претраживач, игре у стилу свемирских нападача и апликације за банкарство за предузећа. До краја серије, студенти ће стећи солидно разумевање веб развоја.
+
+> 🎓 Прве лекције из овог курикулума можете преузети као [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) на Microsoft Learn!
+
+Осигуравањем да садржај одговара пројектима, процес постаје занимљивији за студенте, а задржавање концепата се побољшава. Такође смо написали неколико уводних лекција о основама JavaScript-а за увођење концепата, уз видео из колекције "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", чији су неки аутори допринели овом курикулуму.
+
+Поред тога, квиз са ниским ризиком пре часа поставља намеру студента ка учењу теме, док други квиз након часа осигурава даље задржавање. Овај курикулум је осмишљен да буде флексибилан и забаван и може се узети у целини или делимично. Пројекти почињу малим и постају све сложенији до краја 12-недељног циклуса.
+
+Иако смо намерно избегли увођење JavaScript оквира како бисмо се концентрисали на основне вештине потребне као веб програмер пре усвајања оквира, добар следећи корак након завршетка овог курикулума био би учење о Node.js-у кроз другу колекцију видеа: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
+
+> Посетите наше [Правила понашања](CODE_OF_CONDUCT.md) и [Упутства за допринос](CONTRIBUTING.md). Добродошли сте да нам дате конструктивне повратне информације!
+
+
+## 🧭 Офлајн приступ
+
+Можете покренути ову документацију офлајн користећи [Docsify](https://docsify.js.org/#/). Форкујте овај репозиторијум, [инсталирајте Docsify](https://docsify.js.org/#/quickstart) на ваш локални рачунар, а затим у коренском фолдеру овог репозиторијума укуцајте `docsify serve`. Веб сајт ће бити покренут на порту 3000 на вашем localhost-у: `localhost:3000`.
+
+## 📘 PDF
+
+PDF свих лекција можете пронаћи [овде](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
+
+
+## 🎒 Остали курсеви
+
+Наш тим производи и друге курсеве! Погледајте:
+
+- [Генеративна AI за почетнике](https://aka.ms/genai-beginners)
+- [Генеративна AI за почетнике .NET](https://github.com/microsoft/Generative-AI-for-beginners-dotnet)
+- [Генеративна AI са JavaScript-ом](https://github.com/microsoft/generative-ai-with-javascript)
+- [Генеративна AI са Java-ом](https://github.com/microsoft/Generative-AI-for-beginners-java)
+- [AI за почетнике](https://aka.ms/ai-beginners)
+- [Наука о подацима за почетнике](https://aka.ms/datascience-beginners)
+- [Машинско учење за почетнике](https://aka.ms/ml-beginners)
+- [Сајбер безбедност за почетнике](https://github.com/microsoft/Security-101)
+- [Веб развој за почетнике](https://aka.ms/webdev-beginners)
+- [IoT за почетнике](https://aka.ms/iot-beginners)
+- [XR развој за почетнике](https://github.com/microsoft/xr-development-for-beginners)
+- [Мастеринг GitHub Copilot за агентску употребу](https://github.com/microsoft/Mastering-GitHub-Copilot-for-Paired-Programming)
+- [Мастеринг GitHub Copilot за C#/.NET програмере](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers)
+- [Изаберите своју Copilot авантуру](https://github.com/microsoft/CopilotAdventures)
+
+## Лиценца
+
+Овај репозиторијум је лиценциран под MIT лиценцом. Погледајте [Лиценцу](../../LICENSE) за више информација.
+
+---
+
+**Одрицање од одговорности**:  
+Овај документ је преведен коришћењем услуге за превођење помоћу вештачке интелигенције [Co-op Translator](https://github.com/Azure/co-op-translator). Иако се трудимо да обезбедимо тачност, молимо вас да имате у виду да аутоматски преводи могу садржати грешке или нетачности. Оригинални документ на његовом изворном језику треба сматрати меродавним извором. За критичне информације препоручује се професионални превод од стране људи. Не преузимамо одговорност за било каква погрешна тумачења или неспоразуме који могу настати услед коришћења овог превода.
\ No newline at end of file
diff --git a/translations/sr/SECURITY.md b/translations/sr/SECURITY.md
new file mode 100644
index 00000000..d7d570d7
--- /dev/null
+++ b/translations/sr/SECURITY.md
@@ -0,0 +1,51 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "4ecc3bf2e27983d4c780be6f26ee6228",
+  "translation_date": "2025-08-27T21:58:34+00:00",
+  "source_file": "SECURITY.md",
+  "language_code": "sr"
+}
+-->
+## Безбедност
+
+Мајкрософт озбиљно приступа безбедности својих софтверских производа и услуга, што укључује све репозиторијуме изворног кода којима управљају наше GitHub организације, као што су [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) и [наше GitHub организације](https://opensource.microsoft.com/?WT.mc_id=academic-77807-sagibbon).
+
+Ако верујете да сте пронашли безбедносни пропуст у било ком репозиторијуму у власништву Мајкрософта који испуњава [Мајкрософтову дефиницију безбедносног пропуста](https://docs.microsoft.com/previous-versions/tn-archive/cc751383(v=technet.10)/?WT.mc_id=academic-77807-sagibbon), молимо вас да нам то пријавите на начин описан у наставку.
+
+## Пријављивање безбедносних проблема
+
+**Молимо вас да не пријављујете безбедносне пропусте путем јавних GitHub проблема.**
+
+Уместо тога, пријавите их Microsoft Security Response Center (MSRC) на [https://msrc.microsoft.com/create-report](https://msrc.microsoft.com/create-report/?WT.mc_id=academic-77807-sagibbon).
+
+Ако више волите да пријавите безбедносни проблем без пријављивања, пошаљите имејл на [secure@microsoft.com](mailto:secure@microsoft.com). Ако је могуће, шифрујте своју поруку нашим PGP кључем; можете га преузети са странице [Microsoft Security Response Center PGP Key](https://www.microsoft.com/msrc/pgp-key-msrc/?WT.mc_id=academic-77807-sagibbon).
+
+Требало би да добијете одговор у року од 24 сата. Ако из неког разлога не добијете одговор, молимо вас да нас контактирате путем имејла како бисте се уверили да смо примили вашу оригиналну поруку. Додатне информације можете пронаћи на [microsoft.com/msrc](https://www.microsoft.com/msrc/?WT.mc_id=academic-77807-sagibbon).
+
+Молимо вас да укључите тражене информације наведене у наставку (што више можете да обезбедите) како бисте нам помогли да боље разумемо природу и обим могућег проблема:
+
+  * Тип проблема (нпр. препуњавање бафера, SQL инјекција, cross-site scripting, итд.)
+  * Пуне путање до изворних датотека које се односе на манифестацију проблема
+  * Локација погођеног изворног кода (ознака/грана/комит или директан URL)
+  * Сва посебна конфигурација потребна за репродукцију проблема
+  * Упутства корак по корак за репродукцију проблема
+  * Proof-of-concept или exploit код (ако је могуће)
+  * Утицај проблема, укључујући начин на који нападач може искористити проблем
+
+Ове информације ће нам помоћи да брже обрадимо ваш извештај.
+
+Ако пријављујете у оквиру програма за награду за багове, потпунији извештаји могу допринети већој награди. Молимо вас да посетите нашу страницу [Microsoft Bug Bounty Program](https://microsoft.com/msrc/bounty/?WT.mc_id=academic-77807-sagibbon) за више детаља о активним програмима.
+
+## Преферирани језици
+
+Преферирамо да сва комуникација буде на енглеском језику.
+
+## Политика
+
+Мајкрософт следи принцип [Координисаног откривања рањивости](https://www.microsoft.com/msrc/cvd/?WT.mc_id=academic-77807-sagibbon).
+
+---
+
+**Одрицање од одговорности**:  
+Овај документ је преведен коришћењем услуге за превођење помоћу вештачке интелигенције [Co-op Translator](https://github.com/Azure/co-op-translator). Иако се трудимо да обезбедимо тачност, молимо вас да имате у виду да аутоматизовани преводи могу садржати грешке или нетачности. Оригинални документ на његовом изворном језику треба сматрати ауторитативним извором. За критичне информације препоручује се професионални превод од стране људи. Не преузимамо одговорност за било каква погрешна тумачења или неспоразуме који могу настати услед коришћења овог превода.
\ No newline at end of file
diff --git a/translations/sr/SUPPORT.md b/translations/sr/SUPPORT.md
new file mode 100644
index 00000000..5506b71d
--- /dev/null
+++ b/translations/sr/SUPPORT.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "c9d207ff77b4bb46e46dc2b607a8ec1a",
+  "translation_date": "2025-08-27T21:56:47+00:00",
+  "source_file": "SUPPORT.md",
+  "language_code": "sr"
+}
+-->
+# Подршка
+
+## Како пријавити проблеме и добити помоћ  
+
+Овај пројекат користи GitHub Issues за праћење грешака и захтева за нове функције. Молимо вас да претражите постојеће проблеме пре него што пријавите нови, како бисте избегли дупликате. За нове проблеме, пријавите вашу грешку или захтев за функцију као нови Issue.
+
+За помоћ и питања у вези са коришћењем овог пројекта, погледајте [наше смернице за доприношење](CONTRIBUTING.md).
+
+## Политика подршке компаније Microsoft  
+
+Подршка за овај пројекат је ограничена на горе наведене ресурсе.
+
+---
+
+**Одрицање од одговорности**:  
+Овај документ је преведен коришћењем услуге за превођење помоћу вештачке интелигенције [Co-op Translator](https://github.com/Azure/co-op-translator). Иако се трудимо да обезбедимо тачност, молимо вас да имате у виду да аутоматски преводи могу садржати грешке или нетачности. Оригинални документ на његовом изворном језику треба сматрати меродавним извором. За критичне информације препоручује се професионални превод од стране људи. Не преузимамо одговорност за било каква погрешна тумачења или неспоразуме који могу настати услед коришћења овог превода.
\ No newline at end of file
diff --git a/translations/sr/_404.md b/translations/sr/_404.md
new file mode 100644
index 00000000..dbbf4f2e
--- /dev/null
+++ b/translations/sr/_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": "sr"
+}
+-->
+# У току је рад
+
+Радимо на овој страници. Молимо вас да проверите касније.
+
+Отворите [проблем](https://github.com/microsoft/Web-Dev-For-Beginners/issues/new/choose) ако имате било каквих питања.
+
+**[Назад на почетну](../../../../../../..)**
+
+---
+
+**Одрицање од одговорности**:  
+Овај документ је преведен коришћењем услуге за превођење помоћу вештачке интелигенције [Co-op Translator](https://github.com/Azure/co-op-translator). Иако се трудимо да обезбедимо тачност, молимо вас да имате у виду да аутоматски преводи могу садржати грешке или нетачности. Оригинални документ на његовом изворном језику треба сматрати ауторитативним извором. За критичне информације препоручује се професионални превод од стране људи. Не преузимамо одговорност за било каква погрешна тумачења или неспоразуме који могу настати услед коришћења овог превода.
\ No newline at end of file
diff --git a/translations/sr/docs/_navbar.md b/translations/sr/docs/_navbar.md
new file mode 100644
index 00000000..e8a9b101
--- /dev/null
+++ b/translations/sr/docs/_navbar.md
@@ -0,0 +1,34 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "3bd2f51ecf4ac9b39277cba748943793",
+  "translation_date": "2025-08-27T22:15:24+00:00",
+  "source_file": "docs/_navbar.md",
+  "language_code": "sr"
+}
+-->
+- Преводи
+  - [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)
+
+---
+
+**Одрицање од одговорности**:  
+Овај документ је преведен коришћењем услуге за превођење помоћу вештачке интелигенције [Co-op Translator](https://github.com/Azure/co-op-translator). Иако се трудимо да обезбедимо тачност, молимо вас да имате у виду да аутоматизовани преводи могу садржати грешке или нетачности. Оригинални документ на његовом изворном језику треба сматрати меродавним извором. За критичне информације препоручује се професионални превод од стране људи. Не преузимамо одговорност за било каква погрешна тумачења или неспоразуме који могу настати услед коришћења овог превода.
\ No newline at end of file
diff --git a/translations/sr/docs/_sidebar.md b/translations/sr/docs/_sidebar.md
new file mode 100644
index 00000000..f69ced35
--- /dev/null
+++ b/translations/sr/docs/_sidebar.md
@@ -0,0 +1,51 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "655c91b5979de46f1d70d97f0c5f1d14",
+  "translation_date": "2025-08-27T22:14:59+00:00",
+  "source_file": "docs/_sidebar.md",
+  "language_code": "sr"
+}
+-->
+- Увод
+  - [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)
+  
+- Основе ЈаваСкрипта
+  - [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)
+
+- Игра куцања
+  - [11](../4-typing-game/typing-game/README.md)
+  
+- Екстензија за прегледач
+  - [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)
+
+- Свемирска игра
+  - [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)
+
+- Банкарски пројекат
+  - [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)
+
+---
+
+**Одрицање од одговорности**:  
+Овај документ је преведен коришћењем услуге за превођење помоћу вештачке интелигенције [Co-op Translator](https://github.com/Azure/co-op-translator). Иако се трудимо да обезбедимо тачност, молимо вас да имате у виду да аутоматски преводи могу садржати грешке или нетачности. Оригинални документ на његовом изворном језику треба сматрати ауторитативним извором. За критичне информације препоручује се професионални превод од стране људи. Не сносимо одговорност за било каква погрешна тумачења или неспоразуме који могу произаћи из коришћења овог превода.
\ No newline at end of file
diff --git a/translations/sr/for-teachers.md b/translations/sr/for-teachers.md
new file mode 100644
index 00000000..fec5e345
--- /dev/null
+++ b/translations/sr/for-teachers.md
@@ -0,0 +1,47 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "75cb51f7ca9ea0b097ef4a1287e9290c",
+  "translation_date": "2025-08-27T21:57:19+00:00",
+  "source_file": "for-teachers.md",
+  "language_code": "sr"
+}
+-->
+## За наставнике
+
+Да ли бисте желели да користите овај наставни план у вашој учионици? Слободно га користите!
+
+Заправо, можете га користити директно на GitHub-у, уз помоћ GitHub Classroom-а.
+
+Да бисте то урадили, направите форк овог репозиторијума. Биће вам потребно да креирате репозиторијум за сваку лекцију, тако да ћете морати да издвојите сваки фолдер у посебан репозиторијум. На тај начин, [GitHub Classroom](https://classroom.github.com/classrooms) може да обради сваку лекцију засебно.
+
+Ова [потпуна упутства](https://github.blog/2020-03-18-set-up-your-digital-classroom-with-github-classroom/) ће вам дати идеју како да поставите вашу учионицу.
+
+## Коришћење у Moodle-у, Canvas-у или Blackboard-у
+
+Овај наставни план добро функционише у овим системима за управљање учењем! Користите [Moodle датотеку за отпремање](../../../../../../../teaching-files/webdev-moodle.mbz) за комплетан садржај, или пробајте [Common Cartridge датотеку](../../../../../../../teaching-files/webdev-common-cartridge.imscc) која садржи део садржаја. Moodle Cloud не подржава комплетне Common Cartridge извозе, па је пожељно користити Moodle датотеку за преузимање која се може отпремити у Canvas. Молимо вас да нам јавите како можемо побољшати ово искуство.
+
+![Moodle](../../translated_images/moodle.94eb93d714a50cb2c97435b408017dee224348b61bc86203ffd43a4f4e57b95f.sr.png)
+> Наставни план у Moodle учионици
+
+![Canvas](../../translated_images/canvas.fbd605ff8e5b8aff567d398528ce113db304446b90b9cad55c654de3fdfcda34.sr.png)
+> Наставни план у Canvas-у
+
+## Коришћење репозиторијума у тренутном облику
+
+Ако желите да користите овај репозиторијум у његовом тренутном облику, без коришћења GitHub Classroom-а, то је такође могуће. Биће потребно да комуницирате са вашим ученицима о томе коју лекцију да заједно обрађујете.
+
+У онлајн формату (Zoom, Teams или други) можете организовати групне собе за квизове и менторисати ученике како би се припремили за учење. Затим позовите ученике да учествују у квизовима и да предају своје одговоре као 'issues' у одређено време. Исто можете урадити са задацима ако желите да ученици раде заједно, јавно.
+
+Ако више волите приватнији формат, замолите ученике да направе форк наставног плана, лекцију по лекцију, у своје приватне GitHub репозиторијуме и да вам дају приступ. Тада могу приватно завршавати квизове и задатке и предавати их вама путем 'issues' на вашем репозиторијуму за учионицу.
+
+Постоји много начина да ово функционише у онлајн учионици. Молимо вас да нам јавите шта вам најбоље одговара!
+
+## Молимо вас да нам дате своје мишљење!
+
+Желимо да овај наставни план функционише за вас и ваше ученике. Повежите се са нама на [Teacher corner](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner) и отворите [**нови issue**](https://github.com/microsoft/Web-Dev-For-Beginners/issues/new/choose) за било какве захтеве, грешке и повратне информације.
+
+---
+
+**Одрицање од одговорности**:  
+Овај документ је преведен коришћењем услуге за превођење помоћу вештачке интелигенције [Co-op Translator](https://github.com/Azure/co-op-translator). Иако се трудимо да обезбедимо тачност, молимо вас да имате у виду да аутоматски преводи могу садржати грешке или нетачности. Оригинални документ на његовом изворном језику треба сматрати ауторитативним извором. За критичне информације препоручује се професионални превод од стране људи. Не преузимамо одговорност за било каква погрешна тумачења или неспоразуме који могу настати услед коришћења овог превода.
\ No newline at end of file
diff --git a/translations/sr/lesson-template/README.md b/translations/sr/lesson-template/README.md
new file mode 100644
index 00000000..82bbed42
--- /dev/null
+++ b/translations/sr/lesson-template/README.md
@@ -0,0 +1,65 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "0494be70ad7fadd13a8c3d549c23e355",
+  "translation_date": "2025-08-27T23:07:10+00:00",
+  "source_file": "lesson-template/README.md",
+  "language_code": "sr"
+}
+-->
+# [Тема лекције]
+
+![Убаците видео овде](../../../lesson-template/video-url)
+
+## [Квиз пре предавања](../../../lesson-template/quiz-url)
+
+[Опис онога што ћемо научити]
+
+### Увод
+
+Опис онога што ће бити обухваћено
+
+> Белешке
+
+### Предуслови
+
+Који кораци су требали бити обрађени пре ове лекције?
+
+### Припрема
+
+Припремни кораци за почетак ове лекције
+
+---
+
+[Прођите кроз садржај у блоковима]
+
+## [Тема 1]
+
+### Задатак:
+
+Радите заједно на постепеном унапређењу вашег кода како бисте изградили пројекат са заједничким кодом:
+
+```html
+code blocks
+```
+
+✅ Провера знања - искористите овај тренутак да проширите знање студената отвореним питањима
+
+## [Тема 2]
+
+## [Тема 3]
+
+🚀 Изазов: Додајте изазов за студенте да раде заједно у настави на унапређењу пројекта
+
+Опционо: додајте снимак екрана корисничког интерфејса завршене лекције ако је прикладно
+
+## [Квиз после предавања](../../../lesson-template/quiz-url)
+
+## Преглед и самостално учење
+
+**Рок за предају [MM/YY]**: [Назив задатка](assignment.md)
+
+---
+
+**Одрицање од одговорности**:  
+Овај документ је преведен коришћењем услуге за превођење помоћу вештачке интелигенције [Co-op Translator](https://github.com/Azure/co-op-translator). Иако се трудимо да превод буде тачан, молимо вас да имате у виду да аутоматизовани преводи могу садржати грешке или нетачности. Оригинални документ на његовом изворном језику треба сматрати меродавним извором. За критичне информације препоручује се професионални превод од стране људи. Не преузимамо одговорност за било каква погрешна тумачења или неспоразуме који могу настати услед коришћења овог превода.
\ No newline at end of file
diff --git a/translations/sr/lesson-template/assignment.md b/translations/sr/lesson-template/assignment.md
new file mode 100644
index 00000000..cb85aa26
--- /dev/null
+++ b/translations/sr/lesson-template/assignment.md
@@ -0,0 +1,23 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "b5f62ec256c7e43e771f0d3b4e1a9130",
+  "translation_date": "2025-08-27T23:07:26+00:00",
+  "source_file": "lesson-template/assignment.md",
+  "language_code": "sr"
+}
+-->
+# [Назив Задатка]
+
+## Упутства
+
+## Рубрика
+
+| Критеријуми | Изузетно | Прихватљиво | Потребно Побољшање |
+| ----------- | -------- | ----------- | ------------------ |
+|             |          |             |                    |
+
+---
+
+**Одрицање од одговорности**:  
+Овај документ је преведен коришћењем услуге за превођење помоћу вештачке интелигенције [Co-op Translator](https://github.com/Azure/co-op-translator). Иако се трудимо да обезбедимо тачност, молимо вас да имате у виду да аутоматизовани преводи могу садржати грешке или нетачности. Оригинални документ на његовом изворном језику треба сматрати меродавним извором. За критичне информације препоручује се професионални превод од стране људи. Не преузимамо одговорност за било каква погрешна тумачења или неспоразуме који могу настати услед коришћења овог превода.
\ No newline at end of file
diff --git a/translations/sr/quiz-app/README.md b/translations/sr/quiz-app/README.md
new file mode 100644
index 00000000..9786e8e0
--- /dev/null
+++ b/translations/sr/quiz-app/README.md
@@ -0,0 +1,191 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "5301875c55bb305e6046bed3a4fd06d2",
+  "translation_date": "2025-08-27T23:11:13+00:00",
+  "source_file": "quiz-app/README.md",
+  "language_code": "sr"
+}
+-->
+# Квиз апликација
+
+Ови квизови су предавања пре и после лекција у оквиру наставног плана и програма за науку о подацима на https://aka.ms/webdev-beginners
+
+## Додавање преведеног скупа квизова
+
+Додајте превод квиза креирањем одговарајућих структура квиза у фасцикли `assets/translations`. Канонски квизови се налазе у `assets/translations/en`. Квизови су подељени у неколико група. Уверите се да је нумерација усклађена са одговарајућим делом квиза. У овом наставном плану и програму постоји укупно 40 квизова, а бројање почиње од 0.
+
+  
+<details>
+<summary>Овако изгледа структура датотеке за превод:</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>
+
+Након уређивања превода, измените датотеку `index.js` у фасцикли за преводе како бисте увезли све датотеке пратећи конвенције у `en`.
+
+Измените датотеку `index.js` у `assets/translations` како бисте увезли нове преведене датотеке. 
+
+На пример, ако је ваш превод у JSON формату у датотеци `ex.json`, поставите 'ex' као кључ за локализацију, а затим га унесите као што је приказано испод за увоз:
+
+<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>
+
+## Покретање квиз апликације локално
+
+### Предуслови
+
+- Налог на GitHub-у
+- [Node.js и Git](https://nodejs.org/)
+
+### Инсталација и подешавање
+
+1. Креирајте репозиторијум из овог [темплејта](https://github.com/new?template_name=Web-Dev-For-Beginners&template_owner=microsoft) 
+
+1. Клонирајте свој нови репозиторијум и идите у фасциклу квиз апликације
+
+   ```bash
+   git clone https://github.com/your-github-organization/repo-name
+   cd repo-name/quiz-app
+   ```
+
+1. Инсталирајте npm пакете и зависности
+
+   ```bash
+   npm install
+   ```
+
+### Изградња апликације
+
+1. Да бисте изградили решење, покрените:
+
+   ```bash
+   npm run build
+   ```
+
+### Покретање апликације
+
+1. Да бисте покренули решење, покрените:
+
+    ```bash
+    npm run dev
+    ```
+
+### [Опционо] Линтовање
+
+1. Да бисте осигурали да је код линтован, покрените:
+
+    ```bash
+    npm run lint
+    ```
+
+## Деплој квиз апликације на Azure 
+
+### Предуслови
+- Azure претплата. Пријавите се за бесплатну претплату [овде](https://aka.ms/azure-free).
+
+    _Процена трошкова за деплој ове квиз апликације: БЕСПЛАТНО_
+
+[![Deploy to Azure](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/#create/Microsoft.StaticApp)
+
+Када се пријавите на Azure преко горњег линка, изаберите претплату и ресурсну групу, а затим:
+
+- Детаљи за Static Web App: Унесите име и изаберите план хостинга
+- Пријава на GitHub: Поставите извор деплоја као GitHub, затим се пријавите и попуните потребна поља у формулару:
+    - *Организација* – Изаберите своју организацију.
+    - *Репозиторијум* – Изаберите репозиторијум наставног плана и програма Web Dev for Beginners. 
+    - *Грана* - Изаберите грану (main) 
+- Пресети за изградњу: Azure Static Web Apps користи алгоритам за детекцију како би открио оквир који се користи у вашој апликацији. 
+    - *Локација апликације* - ./quiz-app
+    - *Локација API-ја* -
+    - *Локација излаза* - dist
+- Деплој: Кликните 'Review + Create', затим 'Create'
+
+    Када се деплој заврши, датотека за workflow ће бити креирана у *.github* директоријуму вашег репозиторијума. Ова workflow датотека садржи инструкције о догађајима који ће покренути поновни деплој апликације на Azure, на пример, _**push** на грану **main**_ итд.
+
+    <details>
+    <summary>Пример workflow датотеке</summary>
+    Ево примера како би workflow датотека за 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>
+
+- Пост-деплој: Након што је деплој завршен, кликните на 'Go to Deployment', затим 'View app in browser'.
+
+Када се ваш GitHub Action (workflow) успешно изврши, освежите живу страницу да бисте видели своју апликацију.
+
+---
+
+**Одрицање од одговорности**:  
+Овај документ је преведен коришћењем услуге за превођење помоћу вештачке интелигенције [Co-op Translator](https://github.com/Azure/co-op-translator). Иако се трудимо да обезбедимо тачност, молимо вас да имате у виду да аутоматски преводи могу садржати грешке или нетачности. Оригинални документ на његовом изворном језику треба сматрати ауторитативним извором. За критичне информације препоручује се професионални превод од стране људи. Не преузимамо одговорност за било каква погрешна тумачења или неспоразуме који могу настати услед коришћења овог превода.
\ No newline at end of file