diff --git a/translated_images/1.b6da8c1394b07491afeb6b2a8e5aca73ebd3cf478e27bcc9aeabb187e722648e.cs.png b/translated_images/1.b6da8c1394b07491afeb6b2a8e5aca73ebd3cf478e27bcc9aeabb187e722648e.cs.png
new file mode 100644
index 00000000..ae00c493
Binary files /dev/null and b/translated_images/1.b6da8c1394b07491afeb6b2a8e5aca73ebd3cf478e27bcc9aeabb187e722648e.cs.png differ
diff --git a/translated_images/1.b6da8c1394b07491afeb6b2a8e5aca73ebd3cf478e27bcc9aeabb187e722648e.hu.png b/translated_images/1.b6da8c1394b07491afeb6b2a8e5aca73ebd3cf478e27bcc9aeabb187e722648e.hu.png
new file mode 100644
index 00000000..ae5b7f7f
Binary files /dev/null and b/translated_images/1.b6da8c1394b07491afeb6b2a8e5aca73ebd3cf478e27bcc9aeabb187e722648e.hu.png differ
diff --git a/translated_images/1.b6da8c1394b07491afeb6b2a8e5aca73ebd3cf478e27bcc9aeabb187e722648e.sw.png b/translated_images/1.b6da8c1394b07491afeb6b2a8e5aca73ebd3cf478e27bcc9aeabb187e722648e.sw.png
new file mode 100644
index 00000000..5dcf910a
Binary files /dev/null and b/translated_images/1.b6da8c1394b07491afeb6b2a8e5aca73ebd3cf478e27bcc9aeabb187e722648e.sw.png differ
diff --git a/translated_images/1.cc07a5cbe114ad1d4728c35134584ac1b87db688eff83cf75985cf31fe0ed95c.cs.png b/translated_images/1.cc07a5cbe114ad1d4728c35134584ac1b87db688eff83cf75985cf31fe0ed95c.cs.png
new file mode 100644
index 00000000..2302da2d
Binary files /dev/null and b/translated_images/1.cc07a5cbe114ad1d4728c35134584ac1b87db688eff83cf75985cf31fe0ed95c.cs.png differ
diff --git a/translated_images/1.cc07a5cbe114ad1d4728c35134584ac1b87db688eff83cf75985cf31fe0ed95c.hu.png b/translated_images/1.cc07a5cbe114ad1d4728c35134584ac1b87db688eff83cf75985cf31fe0ed95c.hu.png
new file mode 100644
index 00000000..35c218b8
Binary files /dev/null and b/translated_images/1.cc07a5cbe114ad1d4728c35134584ac1b87db688eff83cf75985cf31fe0ed95c.hu.png differ
diff --git a/translated_images/1.cc07a5cbe114ad1d4728c35134584ac1b87db688eff83cf75985cf31fe0ed95c.sw.png b/translated_images/1.cc07a5cbe114ad1d4728c35134584ac1b87db688eff83cf75985cf31fe0ed95c.sw.png
new file mode 100644
index 00000000..390a3902
Binary files /dev/null and b/translated_images/1.cc07a5cbe114ad1d4728c35134584ac1b87db688eff83cf75985cf31fe0ed95c.sw.png differ
diff --git a/translated_images/2.1dae52ff0804224692cd648afbf2342955d7afe3b0101b617268130dfb427f55.cs.png b/translated_images/2.1dae52ff0804224692cd648afbf2342955d7afe3b0101b617268130dfb427f55.cs.png
new file mode 100644
index 00000000..a5c13c16
Binary files /dev/null and b/translated_images/2.1dae52ff0804224692cd648afbf2342955d7afe3b0101b617268130dfb427f55.cs.png differ
diff --git a/translated_images/2.1dae52ff0804224692cd648afbf2342955d7afe3b0101b617268130dfb427f55.hu.png b/translated_images/2.1dae52ff0804224692cd648afbf2342955d7afe3b0101b617268130dfb427f55.hu.png
new file mode 100644
index 00000000..5dda6018
Binary files /dev/null and b/translated_images/2.1dae52ff0804224692cd648afbf2342955d7afe3b0101b617268130dfb427f55.hu.png differ
diff --git a/translated_images/2.1dae52ff0804224692cd648afbf2342955d7afe3b0101b617268130dfb427f55.sw.png b/translated_images/2.1dae52ff0804224692cd648afbf2342955d7afe3b0101b617268130dfb427f55.sw.png
new file mode 100644
index 00000000..98e2213c
Binary files /dev/null and b/translated_images/2.1dae52ff0804224692cd648afbf2342955d7afe3b0101b617268130dfb427f55.sw.png differ
diff --git a/translated_images/after-codeswing-extension-pb.0ebddddcf73b550994947a9084e35e2836c713ae13839d49628e3c764c1cfe83.cs.png b/translated_images/after-codeswing-extension-pb.0ebddddcf73b550994947a9084e35e2836c713ae13839d49628e3c764c1cfe83.cs.png
new file mode 100644
index 00000000..3e2599c7
Binary files /dev/null and b/translated_images/after-codeswing-extension-pb.0ebddddcf73b550994947a9084e35e2836c713ae13839d49628e3c764c1cfe83.cs.png differ
diff --git a/translated_images/after-codeswing-extension-pb.0ebddddcf73b550994947a9084e35e2836c713ae13839d49628e3c764c1cfe83.hu.png b/translated_images/after-codeswing-extension-pb.0ebddddcf73b550994947a9084e35e2836c713ae13839d49628e3c764c1cfe83.hu.png
new file mode 100644
index 00000000..f8919d65
Binary files /dev/null and b/translated_images/after-codeswing-extension-pb.0ebddddcf73b550994947a9084e35e2836c713ae13839d49628e3c764c1cfe83.hu.png differ
diff --git a/translated_images/after-codeswing-extension-pb.0ebddddcf73b550994947a9084e35e2836c713ae13839d49628e3c764c1cfe83.sw.png b/translated_images/after-codeswing-extension-pb.0ebddddcf73b550994947a9084e35e2836c713ae13839d49628e3c764c1cfe83.sw.png
new file mode 100644
index 00000000..501868a6
Binary files /dev/null and b/translated_images/after-codeswing-extension-pb.0ebddddcf73b550994947a9084e35e2836c713ae13839d49628e3c764c1cfe83.sw.png differ
diff --git a/translated_images/background.148a8d43afde57303419a663f50daf586681bc2fabf833f66ef6954073983c66.cs.png b/translated_images/background.148a8d43afde57303419a663f50daf586681bc2fabf833f66ef6954073983c66.cs.png
new file mode 100644
index 00000000..de0364f5
Binary files /dev/null and b/translated_images/background.148a8d43afde57303419a663f50daf586681bc2fabf833f66ef6954073983c66.cs.png differ
diff --git a/translated_images/background.148a8d43afde57303419a663f50daf586681bc2fabf833f66ef6954073983c66.hu.png b/translated_images/background.148a8d43afde57303419a663f50daf586681bc2fabf833f66ef6954073983c66.hu.png
new file mode 100644
index 00000000..8608f23a
Binary files /dev/null and b/translated_images/background.148a8d43afde57303419a663f50daf586681bc2fabf833f66ef6954073983c66.hu.png differ
diff --git a/translated_images/background.148a8d43afde57303419a663f50daf586681bc2fabf833f66ef6954073983c66.sw.png b/translated_images/background.148a8d43afde57303419a663f50daf586681bc2fabf833f66ef6954073983c66.sw.png
new file mode 100644
index 00000000..3e926f6a
Binary files /dev/null and b/translated_images/background.148a8d43afde57303419a663f50daf586681bc2fabf833f66ef6954073983c66.sw.png differ
diff --git a/translated_images/backgroundColor.e19c3c60768150c8de229c89233ecb5d859aeabef0ada99d2236dd2c44c1510f.cs.png b/translated_images/backgroundColor.e19c3c60768150c8de229c89233ecb5d859aeabef0ada99d2236dd2c44c1510f.cs.png
new file mode 100644
index 00000000..3bd93a53
Binary files /dev/null and b/translated_images/backgroundColor.e19c3c60768150c8de229c89233ecb5d859aeabef0ada99d2236dd2c44c1510f.cs.png differ
diff --git a/translated_images/backgroundColor.e19c3c60768150c8de229c89233ecb5d859aeabef0ada99d2236dd2c44c1510f.hu.png b/translated_images/backgroundColor.e19c3c60768150c8de229c89233ecb5d859aeabef0ada99d2236dd2c44c1510f.hu.png
new file mode 100644
index 00000000..3bd93a53
Binary files /dev/null and b/translated_images/backgroundColor.e19c3c60768150c8de229c89233ecb5d859aeabef0ada99d2236dd2c44c1510f.hu.png differ
diff --git a/translated_images/backgroundColor.e19c3c60768150c8de229c89233ecb5d859aeabef0ada99d2236dd2c44c1510f.sw.png b/translated_images/backgroundColor.e19c3c60768150c8de229c89233ecb5d859aeabef0ada99d2236dd2c44c1510f.sw.png
new file mode 100644
index 00000000..3bd93a53
Binary files /dev/null and b/translated_images/backgroundColor.e19c3c60768150c8de229c89233ecb5d859aeabef0ada99d2236dd2c44c1510f.sw.png differ
diff --git a/translated_images/browser-console.efaf0b51aaaf67782a29e1a0bb32cc063f189b18e894eb5926e02f1abe864ec2.cs.png b/translated_images/browser-console.efaf0b51aaaf67782a29e1a0bb32cc063f189b18e894eb5926e02f1abe864ec2.cs.png
new file mode 100644
index 00000000..9f418f95
Binary files /dev/null and b/translated_images/browser-console.efaf0b51aaaf67782a29e1a0bb32cc063f189b18e894eb5926e02f1abe864ec2.cs.png differ
diff --git a/translated_images/browser-console.efaf0b51aaaf67782a29e1a0bb32cc063f189b18e894eb5926e02f1abe864ec2.hu.png b/translated_images/browser-console.efaf0b51aaaf67782a29e1a0bb32cc063f189b18e894eb5926e02f1abe864ec2.hu.png
new file mode 100644
index 00000000..be28686f
Binary files /dev/null and b/translated_images/browser-console.efaf0b51aaaf67782a29e1a0bb32cc063f189b18e894eb5926e02f1abe864ec2.hu.png differ
diff --git a/translated_images/browser-console.efaf0b51aaaf67782a29e1a0bb32cc063f189b18e894eb5926e02f1abe864ec2.sw.png b/translated_images/browser-console.efaf0b51aaaf67782a29e1a0bb32cc063f189b18e894eb5926e02f1abe864ec2.sw.png
new file mode 100644
index 00000000..dd71b540
Binary files /dev/null and b/translated_images/browser-console.efaf0b51aaaf67782a29e1a0bb32cc063f189b18e894eb5926e02f1abe864ec2.sw.png differ
diff --git a/translated_images/browser.60317c9be8b7f84adce43e30bff8d47a1ae15793beab762317b2bc6b74337c1a.cs.jpg b/translated_images/browser.60317c9be8b7f84adce43e30bff8d47a1ae15793beab762317b2bc6b74337c1a.cs.jpg
new file mode 100644
index 00000000..74bccd33
Binary files /dev/null and b/translated_images/browser.60317c9be8b7f84adce43e30bff8d47a1ae15793beab762317b2bc6b74337c1a.cs.jpg differ
diff --git a/translated_images/browser.60317c9be8b7f84adce43e30bff8d47a1ae15793beab762317b2bc6b74337c1a.hu.jpg b/translated_images/browser.60317c9be8b7f84adce43e30bff8d47a1ae15793beab762317b2bc6b74337c1a.hu.jpg
new file mode 100644
index 00000000..984cf9bd
Binary files /dev/null and b/translated_images/browser.60317c9be8b7f84adce43e30bff8d47a1ae15793beab762317b2bc6b74337c1a.hu.jpg differ
diff --git a/translated_images/browser.60317c9be8b7f84adce43e30bff8d47a1ae15793beab762317b2bc6b74337c1a.sw.jpg b/translated_images/browser.60317c9be8b7f84adce43e30bff8d47a1ae15793beab762317b2bc6b74337c1a.sw.jpg
new file mode 100644
index 00000000..18fc7b0b
Binary files /dev/null and b/translated_images/browser.60317c9be8b7f84adce43e30bff8d47a1ae15793beab762317b2bc6b74337c1a.sw.jpg differ
diff --git a/translated_images/canvas.fbd605ff8e5b8aff567d398528ce113db304446b90b9cad55c654de3fdfcda34.cs.png b/translated_images/canvas.fbd605ff8e5b8aff567d398528ce113db304446b90b9cad55c654de3fdfcda34.cs.png
new file mode 100644
index 00000000..9de65f57
Binary files /dev/null and b/translated_images/canvas.fbd605ff8e5b8aff567d398528ce113db304446b90b9cad55c654de3fdfcda34.cs.png differ
diff --git a/translated_images/canvas.fbd605ff8e5b8aff567d398528ce113db304446b90b9cad55c654de3fdfcda34.hu.png b/translated_images/canvas.fbd605ff8e5b8aff567d398528ce113db304446b90b9cad55c654de3fdfcda34.hu.png
new file mode 100644
index 00000000..dd0fab04
Binary files /dev/null and b/translated_images/canvas.fbd605ff8e5b8aff567d398528ce113db304446b90b9cad55c654de3fdfcda34.hu.png differ
diff --git a/translated_images/canvas.fbd605ff8e5b8aff567d398528ce113db304446b90b9cad55c654de3fdfcda34.sw.png b/translated_images/canvas.fbd605ff8e5b8aff567d398528ce113db304446b90b9cad55c654de3fdfcda34.sw.png
new file mode 100644
index 00000000..85be8c25
Binary files /dev/null and b/translated_images/canvas.fbd605ff8e5b8aff567d398528ce113db304446b90b9cad55c654de3fdfcda34.sw.png differ
diff --git a/translated_images/canvas_grid.5f209da785ded492a01ece440e3032afe51efa500cc2308e5ea4252487ceaf0b.cs.png b/translated_images/canvas_grid.5f209da785ded492a01ece440e3032afe51efa500cc2308e5ea4252487ceaf0b.cs.png
new file mode 100644
index 00000000..c0e65c34
Binary files /dev/null and b/translated_images/canvas_grid.5f209da785ded492a01ece440e3032afe51efa500cc2308e5ea4252487ceaf0b.cs.png differ
diff --git a/translated_images/canvas_grid.5f209da785ded492a01ece440e3032afe51efa500cc2308e5ea4252487ceaf0b.hu.png b/translated_images/canvas_grid.5f209da785ded492a01ece440e3032afe51efa500cc2308e5ea4252487ceaf0b.hu.png
new file mode 100644
index 00000000..b6004599
Binary files /dev/null and b/translated_images/canvas_grid.5f209da785ded492a01ece440e3032afe51efa500cc2308e5ea4252487ceaf0b.hu.png differ
diff --git a/translated_images/canvas_grid.5f209da785ded492a01ece440e3032afe51efa500cc2308e5ea4252487ceaf0b.sw.png b/translated_images/canvas_grid.5f209da785ded492a01ece440e3032afe51efa500cc2308e5ea4252487ceaf0b.sw.png
new file mode 100644
index 00000000..41c4a77f
Binary files /dev/null and b/translated_images/canvas_grid.5f209da785ded492a01ece440e3032afe51efa500cc2308e5ea4252487ceaf0b.sw.png differ
diff --git a/translated_images/character.5c0dd8e067ffd693c16e2c5b7412ab075a2215ce31f998305639fa3a05e14fbe.cs.png b/translated_images/character.5c0dd8e067ffd693c16e2c5b7412ab075a2215ce31f998305639fa3a05e14fbe.cs.png
new file mode 100644
index 00000000..0701afb0
Binary files /dev/null and b/translated_images/character.5c0dd8e067ffd693c16e2c5b7412ab075a2215ce31f998305639fa3a05e14fbe.cs.png differ
diff --git a/translated_images/character.5c0dd8e067ffd693c16e2c5b7412ab075a2215ce31f998305639fa3a05e14fbe.hu.png b/translated_images/character.5c0dd8e067ffd693c16e2c5b7412ab075a2215ce31f998305639fa3a05e14fbe.hu.png
new file mode 100644
index 00000000..f81251e6
Binary files /dev/null and b/translated_images/character.5c0dd8e067ffd693c16e2c5b7412ab075a2215ce31f998305639fa3a05e14fbe.hu.png differ
diff --git a/translated_images/character.5c0dd8e067ffd693c16e2c5b7412ab075a2215ce31f998305639fa3a05e14fbe.sw.png b/translated_images/character.5c0dd8e067ffd693c16e2c5b7412ab075a2215ce31f998305639fa3a05e14fbe.sw.png
new file mode 100644
index 00000000..81b07fbd
Binary files /dev/null and b/translated_images/character.5c0dd8e067ffd693c16e2c5b7412ab075a2215ce31f998305639fa3a05e14fbe.sw.png differ
diff --git a/translated_images/click-register.e89a30bf0d4bc9ca867dc537c4cea679a7c26368bd790969082f524fed2355bc.cs.png b/translated_images/click-register.e89a30bf0d4bc9ca867dc537c4cea679a7c26368bd790969082f524fed2355bc.cs.png
new file mode 100644
index 00000000..ccc65305
Binary files /dev/null and b/translated_images/click-register.e89a30bf0d4bc9ca867dc537c4cea679a7c26368bd790969082f524fed2355bc.cs.png differ
diff --git a/translated_images/click-register.e89a30bf0d4bc9ca867dc537c4cea679a7c26368bd790969082f524fed2355bc.hu.png b/translated_images/click-register.e89a30bf0d4bc9ca867dc537c4cea679a7c26368bd790969082f524fed2355bc.hu.png
new file mode 100644
index 00000000..ccc65305
Binary files /dev/null and b/translated_images/click-register.e89a30bf0d4bc9ca867dc537c4cea679a7c26368bd790969082f524fed2355bc.hu.png differ
diff --git a/translated_images/click-register.e89a30bf0d4bc9ca867dc537c4cea679a7c26368bd790969082f524fed2355bc.sw.png b/translated_images/click-register.e89a30bf0d4bc9ca867dc537c4cea679a7c26368bd790969082f524fed2355bc.sw.png
new file mode 100644
index 00000000..ccc65305
Binary files /dev/null and b/translated_images/click-register.e89a30bf0d4bc9ca867dc537c4cea679a7c26368bd790969082f524fed2355bc.sw.png differ
diff --git a/translated_images/clone_repo.5085c48d666ead57664f050d806e325d7f883be6838c821e08bc823ab7c66665.cs.png b/translated_images/clone_repo.5085c48d666ead57664f050d806e325d7f883be6838c821e08bc823ab7c66665.cs.png
new file mode 100644
index 00000000..8771467f
Binary files /dev/null and b/translated_images/clone_repo.5085c48d666ead57664f050d806e325d7f883be6838c821e08bc823ab7c66665.cs.png differ
diff --git a/translated_images/clone_repo.5085c48d666ead57664f050d806e325d7f883be6838c821e08bc823ab7c66665.hu.png b/translated_images/clone_repo.5085c48d666ead57664f050d806e325d7f883be6838c821e08bc823ab7c66665.hu.png
new file mode 100644
index 00000000..2079006b
Binary files /dev/null and b/translated_images/clone_repo.5085c48d666ead57664f050d806e325d7f883be6838c821e08bc823ab7c66665.hu.png differ
diff --git a/translated_images/clone_repo.5085c48d666ead57664f050d806e325d7f883be6838c821e08bc823ab7c66665.sw.png b/translated_images/clone_repo.5085c48d666ead57664f050d806e325d7f883be6838c821e08bc823ab7c66665.sw.png
new file mode 100644
index 00000000..c8815905
Binary files /dev/null and b/translated_images/clone_repo.5085c48d666ead57664f050d806e325d7f883be6838c821e08bc823ab7c66665.sw.png differ
diff --git a/translated_images/clone_repo.6a202fb230ab6bdd8e8f536661f12088315044ed26899f00b5815db04bff9217.cs.png b/translated_images/clone_repo.6a202fb230ab6bdd8e8f536661f12088315044ed26899f00b5815db04bff9217.cs.png
new file mode 100644
index 00000000..c2e254cc
Binary files /dev/null and b/translated_images/clone_repo.6a202fb230ab6bdd8e8f536661f12088315044ed26899f00b5815db04bff9217.cs.png differ
diff --git a/translated_images/clone_repo.6a202fb230ab6bdd8e8f536661f12088315044ed26899f00b5815db04bff9217.hu.png b/translated_images/clone_repo.6a202fb230ab6bdd8e8f536661f12088315044ed26899f00b5815db04bff9217.hu.png
new file mode 100644
index 00000000..ef6bd19a
Binary files /dev/null and b/translated_images/clone_repo.6a202fb230ab6bdd8e8f536661f12088315044ed26899f00b5815db04bff9217.hu.png differ
diff --git a/translated_images/clone_repo.6a202fb230ab6bdd8e8f536661f12088315044ed26899f00b5815db04bff9217.sw.png b/translated_images/clone_repo.6a202fb230ab6bdd8e8f536661f12088315044ed26899f00b5815db04bff9217.sw.png
new file mode 100644
index 00000000..0a48818f
Binary files /dev/null and b/translated_images/clone_repo.6a202fb230ab6bdd8e8f536661f12088315044ed26899f00b5815db04bff9217.sw.png differ
diff --git a/translated_images/create-a-fork.297ab42b4bd0af9989c1a00dc1ad10805a7e109296a5f47acebacaf5ff098a30.cs.png b/translated_images/create-a-fork.297ab42b4bd0af9989c1a00dc1ad10805a7e109296a5f47acebacaf5ff098a30.cs.png
new file mode 100644
index 00000000..7a07f685
Binary files /dev/null and b/translated_images/create-a-fork.297ab42b4bd0af9989c1a00dc1ad10805a7e109296a5f47acebacaf5ff098a30.cs.png differ
diff --git a/translated_images/create-a-fork.297ab42b4bd0af9989c1a00dc1ad10805a7e109296a5f47acebacaf5ff098a30.hu.png b/translated_images/create-a-fork.297ab42b4bd0af9989c1a00dc1ad10805a7e109296a5f47acebacaf5ff098a30.hu.png
new file mode 100644
index 00000000..c6e151c2
Binary files /dev/null and b/translated_images/create-a-fork.297ab42b4bd0af9989c1a00dc1ad10805a7e109296a5f47acebacaf5ff098a30.hu.png differ
diff --git a/translated_images/create-a-fork.297ab42b4bd0af9989c1a00dc1ad10805a7e109296a5f47acebacaf5ff098a30.sw.png b/translated_images/create-a-fork.297ab42b4bd0af9989c1a00dc1ad10805a7e109296a5f47acebacaf5ff098a30.sw.png
new file mode 100644
index 00000000..43b1f7b3
Binary files /dev/null and b/translated_images/create-a-fork.297ab42b4bd0af9989c1a00dc1ad10805a7e109296a5f47acebacaf5ff098a30.sw.png differ
diff --git a/translated_images/create-new-file-pb.0797800d977ec3ebf484be2545060e443a902973aaa5267219c07fe199b0e2d4.cs.png b/translated_images/create-new-file-pb.0797800d977ec3ebf484be2545060e443a902973aaa5267219c07fe199b0e2d4.cs.png
new file mode 100644
index 00000000..86905413
Binary files /dev/null and b/translated_images/create-new-file-pb.0797800d977ec3ebf484be2545060e443a902973aaa5267219c07fe199b0e2d4.cs.png differ
diff --git a/translated_images/create-new-file-pb.0797800d977ec3ebf484be2545060e443a902973aaa5267219c07fe199b0e2d4.hu.png b/translated_images/create-new-file-pb.0797800d977ec3ebf484be2545060e443a902973aaa5267219c07fe199b0e2d4.hu.png
new file mode 100644
index 00000000..753d1721
Binary files /dev/null and b/translated_images/create-new-file-pb.0797800d977ec3ebf484be2545060e443a902973aaa5267219c07fe199b0e2d4.hu.png differ
diff --git a/translated_images/create-new-file-pb.0797800d977ec3ebf484be2545060e443a902973aaa5267219c07fe199b0e2d4.sw.png b/translated_images/create-new-file-pb.0797800d977ec3ebf484be2545060e443a902973aaa5267219c07fe199b0e2d4.sw.png
new file mode 100644
index 00000000..aa206527
Binary files /dev/null and b/translated_images/create-new-file-pb.0797800d977ec3ebf484be2545060e443a902973aaa5267219c07fe199b0e2d4.sw.png differ
diff --git a/translated_images/create-new-file.2814e609c2af9aeb6c6fd53156c503ac91c3d538f9cac63073b2dd4a7631f183.cs.png b/translated_images/create-new-file.2814e609c2af9aeb6c6fd53156c503ac91c3d538f9cac63073b2dd4a7631f183.cs.png
new file mode 100644
index 00000000..a1fb99b5
Binary files /dev/null and b/translated_images/create-new-file.2814e609c2af9aeb6c6fd53156c503ac91c3d538f9cac63073b2dd4a7631f183.cs.png differ
diff --git a/translated_images/create-new-file.2814e609c2af9aeb6c6fd53156c503ac91c3d538f9cac63073b2dd4a7631f183.hu.png b/translated_images/create-new-file.2814e609c2af9aeb6c6fd53156c503ac91c3d538f9cac63073b2dd4a7631f183.hu.png
new file mode 100644
index 00000000..a1fb99b5
Binary files /dev/null and b/translated_images/create-new-file.2814e609c2af9aeb6c6fd53156c503ac91c3d538f9cac63073b2dd4a7631f183.hu.png differ
diff --git a/translated_images/create-new-file.2814e609c2af9aeb6c6fd53156c503ac91c3d538f9cac63073b2dd4a7631f183.sw.png b/translated_images/create-new-file.2814e609c2af9aeb6c6fd53156c503ac91c3d538f9cac63073b2dd4a7631f183.sw.png
new file mode 100644
index 00000000..a1fb99b5
Binary files /dev/null and b/translated_images/create-new-file.2814e609c2af9aeb6c6fd53156c503ac91c3d538f9cac63073b2dd4a7631f183.sw.png differ
diff --git a/translated_images/createcodespace.0238bbf4d7a8d955fa8fa7f7b6602a3cb6499a24708fbee589f83211c5a613b7.cs.png b/translated_images/createcodespace.0238bbf4d7a8d955fa8fa7f7b6602a3cb6499a24708fbee589f83211c5a613b7.cs.png
new file mode 100644
index 00000000..31c9b144
Binary files /dev/null and b/translated_images/createcodespace.0238bbf4d7a8d955fa8fa7f7b6602a3cb6499a24708fbee589f83211c5a613b7.cs.png differ
diff --git a/translated_images/createcodespace.0238bbf4d7a8d955fa8fa7f7b6602a3cb6499a24708fbee589f83211c5a613b7.hu.png b/translated_images/createcodespace.0238bbf4d7a8d955fa8fa7f7b6602a3cb6499a24708fbee589f83211c5a613b7.hu.png
new file mode 100644
index 00000000..295d1d8a
Binary files /dev/null and b/translated_images/createcodespace.0238bbf4d7a8d955fa8fa7f7b6602a3cb6499a24708fbee589f83211c5a613b7.hu.png differ
diff --git a/translated_images/createcodespace.0238bbf4d7a8d955fa8fa7f7b6602a3cb6499a24708fbee589f83211c5a613b7.sw.png b/translated_images/createcodespace.0238bbf4d7a8d955fa8fa7f7b6602a3cb6499a24708fbee589f83211c5a613b7.sw.png
new file mode 100644
index 00000000..4aa76c06
Binary files /dev/null and b/translated_images/createcodespace.0238bbf4d7a8d955fa8fa7f7b6602a3cb6499a24708fbee589f83211c5a613b7.sw.png differ
diff --git a/translated_images/data-flow.fa2354e0908fecc89b488010dedf4871418a992edffa17e73441d257add18da4.cs.png b/translated_images/data-flow.fa2354e0908fecc89b488010dedf4871418a992edffa17e73441d257add18da4.cs.png
new file mode 100644
index 00000000..65749f0b
Binary files /dev/null and b/translated_images/data-flow.fa2354e0908fecc89b488010dedf4871418a992edffa17e73441d257add18da4.cs.png differ
diff --git a/translated_images/data-flow.fa2354e0908fecc89b488010dedf4871418a992edffa17e73441d257add18da4.hu.png b/translated_images/data-flow.fa2354e0908fecc89b488010dedf4871418a992edffa17e73441d257add18da4.hu.png
new file mode 100644
index 00000000..303909d6
Binary files /dev/null and b/translated_images/data-flow.fa2354e0908fecc89b488010dedf4871418a992edffa17e73441d257add18da4.hu.png differ
diff --git a/translated_images/data-flow.fa2354e0908fecc89b488010dedf4871418a992edffa17e73441d257add18da4.sw.png b/translated_images/data-flow.fa2354e0908fecc89b488010dedf4871418a992edffa17e73441d257add18da4.sw.png
new file mode 100644
index 00000000..8fa1995d
Binary files /dev/null and b/translated_images/data-flow.fa2354e0908fecc89b488010dedf4871418a992edffa17e73441d257add18da4.sw.png differ
diff --git a/translated_images/default-vscode-dev.5d06881d65c1b3234ce50cd9ed3b0028e6031ad5f5b441bcbed96bfa6311f6d0.cs.png b/translated_images/default-vscode-dev.5d06881d65c1b3234ce50cd9ed3b0028e6031ad5f5b441bcbed96bfa6311f6d0.cs.png
new file mode 100644
index 00000000..ee4ddbc4
Binary files /dev/null and b/translated_images/default-vscode-dev.5d06881d65c1b3234ce50cd9ed3b0028e6031ad5f5b441bcbed96bfa6311f6d0.cs.png differ
diff --git a/translated_images/default-vscode-dev.5d06881d65c1b3234ce50cd9ed3b0028e6031ad5f5b441bcbed96bfa6311f6d0.hu.png b/translated_images/default-vscode-dev.5d06881d65c1b3234ce50cd9ed3b0028e6031ad5f5b441bcbed96bfa6311f6d0.hu.png
new file mode 100644
index 00000000..f5052e4e
Binary files /dev/null and b/translated_images/default-vscode-dev.5d06881d65c1b3234ce50cd9ed3b0028e6031ad5f5b441bcbed96bfa6311f6d0.hu.png differ
diff --git a/translated_images/default-vscode-dev.5d06881d65c1b3234ce50cd9ed3b0028e6031ad5f5b441bcbed96bfa6311f6d0.sw.png b/translated_images/default-vscode-dev.5d06881d65c1b3234ce50cd9ed3b0028e6031ad5f5b441bcbed96bfa6311f6d0.sw.png
new file mode 100644
index 00000000..f35fedea
Binary files /dev/null and b/translated_images/default-vscode-dev.5d06881d65c1b3234ce50cd9ed3b0028e6031ad5f5b441bcbed96bfa6311f6d0.sw.png differ
diff --git a/translated_images/dialog.93bba104afeb79f12f65ebf8f521c5d64e179c40b791c49c242cf15f7e7fab15.cs.png b/translated_images/dialog.93bba104afeb79f12f65ebf8f521c5d64e179c40b791c49c242cf15f7e7fab15.cs.png
new file mode 100644
index 00000000..34bf7cf9
Binary files /dev/null and b/translated_images/dialog.93bba104afeb79f12f65ebf8f521c5d64e179c40b791c49c242cf15f7e7fab15.cs.png differ
diff --git a/translated_images/dialog.93bba104afeb79f12f65ebf8f521c5d64e179c40b791c49c242cf15f7e7fab15.hu.png b/translated_images/dialog.93bba104afeb79f12f65ebf8f521c5d64e179c40b791c49c242cf15f7e7fab15.hu.png
new file mode 100644
index 00000000..c8774577
Binary files /dev/null and b/translated_images/dialog.93bba104afeb79f12f65ebf8f521c5d64e179c40b791c49c242cf15f7e7fab15.hu.png differ
diff --git a/translated_images/dialog.93bba104afeb79f12f65ebf8f521c5d64e179c40b791c49c242cf15f7e7fab15.sw.png b/translated_images/dialog.93bba104afeb79f12f65ebf8f521c5d64e179c40b791c49c242cf15f7e7fab15.sw.png
new file mode 100644
index 00000000..9388f3c0
Binary files /dev/null and b/translated_images/dialog.93bba104afeb79f12f65ebf8f521c5d64e179c40b791c49c242cf15f7e7fab15.sw.png differ
diff --git a/translated_images/dom-tree.7daf0e763cbbba9273f9a66fe04c98276d7d23932309b195cb273a9cf1819b42.cs.png b/translated_images/dom-tree.7daf0e763cbbba9273f9a66fe04c98276d7d23932309b195cb273a9cf1819b42.cs.png
new file mode 100644
index 00000000..6f97b9d0
Binary files /dev/null and b/translated_images/dom-tree.7daf0e763cbbba9273f9a66fe04c98276d7d23932309b195cb273a9cf1819b42.cs.png differ
diff --git a/translated_images/dom-tree.7daf0e763cbbba9273f9a66fe04c98276d7d23932309b195cb273a9cf1819b42.hu.png b/translated_images/dom-tree.7daf0e763cbbba9273f9a66fe04c98276d7d23932309b195cb273a9cf1819b42.hu.png
new file mode 100644
index 00000000..442819f3
Binary files /dev/null and b/translated_images/dom-tree.7daf0e763cbbba9273f9a66fe04c98276d7d23932309b195cb273a9cf1819b42.hu.png differ
diff --git a/translated_images/dom-tree.7daf0e763cbbba9273f9a66fe04c98276d7d23932309b195cb273a9cf1819b42.sw.png b/translated_images/dom-tree.7daf0e763cbbba9273f9a66fe04c98276d7d23932309b195cb273a9cf1819b42.sw.png
new file mode 100644
index 00000000..8ef0f2e8
Binary files /dev/null and b/translated_images/dom-tree.7daf0e763cbbba9273f9a66fe04c98276d7d23932309b195cb273a9cf1819b42.sw.png differ
diff --git a/translated_images/earlybrowsers.d984b711cdf3a42ddac919d46c4b5ca7232f68ccfbd81395e04e5a64c0015277.cs.jpg b/translated_images/earlybrowsers.d984b711cdf3a42ddac919d46c4b5ca7232f68ccfbd81395e04e5a64c0015277.cs.jpg
new file mode 100644
index 00000000..0944858c
Binary files /dev/null and b/translated_images/earlybrowsers.d984b711cdf3a42ddac919d46c4b5ca7232f68ccfbd81395e04e5a64c0015277.cs.jpg differ
diff --git a/translated_images/earlybrowsers.d984b711cdf3a42ddac919d46c4b5ca7232f68ccfbd81395e04e5a64c0015277.hu.jpg b/translated_images/earlybrowsers.d984b711cdf3a42ddac919d46c4b5ca7232f68ccfbd81395e04e5a64c0015277.hu.jpg
new file mode 100644
index 00000000..4d1f9815
Binary files /dev/null and b/translated_images/earlybrowsers.d984b711cdf3a42ddac919d46c4b5ca7232f68ccfbd81395e04e5a64c0015277.hu.jpg differ
diff --git a/translated_images/earlybrowsers.d984b711cdf3a42ddac919d46c4b5ca7232f68ccfbd81395e04e5a64c0015277.sw.jpg b/translated_images/earlybrowsers.d984b711cdf3a42ddac919d46c4b5ca7232f68ccfbd81395e04e5a64c0015277.sw.jpg
new file mode 100644
index 00000000..12754260
Binary files /dev/null and b/translated_images/earlybrowsers.d984b711cdf3a42ddac919d46c4b5ca7232f68ccfbd81395e04e5a64c0015277.sw.jpg differ
diff --git a/translated_images/edit-a-file-pb.263555922c14fc523f53f394da84b6e155b1c6d1835dfa572b33ea98a209ef94.cs.png b/translated_images/edit-a-file-pb.263555922c14fc523f53f394da84b6e155b1c6d1835dfa572b33ea98a209ef94.cs.png
new file mode 100644
index 00000000..a724cbeb
Binary files /dev/null and b/translated_images/edit-a-file-pb.263555922c14fc523f53f394da84b6e155b1c6d1835dfa572b33ea98a209ef94.cs.png differ
diff --git a/translated_images/edit-a-file-pb.263555922c14fc523f53f394da84b6e155b1c6d1835dfa572b33ea98a209ef94.hu.png b/translated_images/edit-a-file-pb.263555922c14fc523f53f394da84b6e155b1c6d1835dfa572b33ea98a209ef94.hu.png
new file mode 100644
index 00000000..bfbe2729
Binary files /dev/null and b/translated_images/edit-a-file-pb.263555922c14fc523f53f394da84b6e155b1c6d1835dfa572b33ea98a209ef94.hu.png differ
diff --git a/translated_images/edit-a-file-pb.263555922c14fc523f53f394da84b6e155b1c6d1835dfa572b33ea98a209ef94.sw.png b/translated_images/edit-a-file-pb.263555922c14fc523f53f394da84b6e155b1c6d1835dfa572b33ea98a209ef94.sw.png
new file mode 100644
index 00000000..17095918
Binary files /dev/null and b/translated_images/edit-a-file-pb.263555922c14fc523f53f394da84b6e155b1c6d1835dfa572b33ea98a209ef94.sw.png differ
diff --git a/translated_images/edit-a-file.52c0ee665ef19f08119d62d63f395dfefddc0a4deb9268d73bfe791f52c5807a.cs.png b/translated_images/edit-a-file.52c0ee665ef19f08119d62d63f395dfefddc0a4deb9268d73bfe791f52c5807a.cs.png
new file mode 100644
index 00000000..5ac66226
Binary files /dev/null and b/translated_images/edit-a-file.52c0ee665ef19f08119d62d63f395dfefddc0a4deb9268d73bfe791f52c5807a.cs.png differ
diff --git a/translated_images/edit-a-file.52c0ee665ef19f08119d62d63f395dfefddc0a4deb9268d73bfe791f52c5807a.hu.png b/translated_images/edit-a-file.52c0ee665ef19f08119d62d63f395dfefddc0a4deb9268d73bfe791f52c5807a.hu.png
new file mode 100644
index 00000000..d03255eb
Binary files /dev/null and b/translated_images/edit-a-file.52c0ee665ef19f08119d62d63f395dfefddc0a4deb9268d73bfe791f52c5807a.hu.png differ
diff --git a/translated_images/edit-a-file.52c0ee665ef19f08119d62d63f395dfefddc0a4deb9268d73bfe791f52c5807a.sw.png b/translated_images/edit-a-file.52c0ee665ef19f08119d62d63f395dfefddc0a4deb9268d73bfe791f52c5807a.sw.png
new file mode 100644
index 00000000..1330dfa2
Binary files /dev/null and b/translated_images/edit-a-file.52c0ee665ef19f08119d62d63f395dfefddc0a4deb9268d73bfe791f52c5807a.sw.png differ
diff --git a/translated_images/enemyShip.035a46787bff658cd126f2e02f640e60fc84536ee2d009a1a5792f3e0423c148.cs.png b/translated_images/enemyShip.035a46787bff658cd126f2e02f640e60fc84536ee2d009a1a5792f3e0423c148.cs.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.035a46787bff658cd126f2e02f640e60fc84536ee2d009a1a5792f3e0423c148.cs.png differ
diff --git a/translated_images/enemyShip.035a46787bff658cd126f2e02f640e60fc84536ee2d009a1a5792f3e0423c148.hu.png b/translated_images/enemyShip.035a46787bff658cd126f2e02f640e60fc84536ee2d009a1a5792f3e0423c148.hu.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.035a46787bff658cd126f2e02f640e60fc84536ee2d009a1a5792f3e0423c148.hu.png differ
diff --git a/translated_images/enemyShip.035a46787bff658cd126f2e02f640e60fc84536ee2d009a1a5792f3e0423c148.sw.png b/translated_images/enemyShip.035a46787bff658cd126f2e02f640e60fc84536ee2d009a1a5792f3e0423c148.sw.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.035a46787bff658cd126f2e02f640e60fc84536ee2d009a1a5792f3e0423c148.sw.png differ
diff --git a/translated_images/enemyShip.1a1354d7988de290ea352832e06745922d463e9a4a7cca3b8f89477e934b16b2.cs.png b/translated_images/enemyShip.1a1354d7988de290ea352832e06745922d463e9a4a7cca3b8f89477e934b16b2.cs.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.1a1354d7988de290ea352832e06745922d463e9a4a7cca3b8f89477e934b16b2.cs.png differ
diff --git a/translated_images/enemyShip.1a1354d7988de290ea352832e06745922d463e9a4a7cca3b8f89477e934b16b2.hu.png b/translated_images/enemyShip.1a1354d7988de290ea352832e06745922d463e9a4a7cca3b8f89477e934b16b2.hu.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.1a1354d7988de290ea352832e06745922d463e9a4a7cca3b8f89477e934b16b2.hu.png differ
diff --git a/translated_images/enemyShip.1a1354d7988de290ea352832e06745922d463e9a4a7cca3b8f89477e934b16b2.sw.png b/translated_images/enemyShip.1a1354d7988de290ea352832e06745922d463e9a4a7cca3b8f89477e934b16b2.sw.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.1a1354d7988de290ea352832e06745922d463e9a4a7cca3b8f89477e934b16b2.sw.png differ
diff --git a/translated_images/enemyShip.22cbee6ea27a5809ef09dddc81a4f77714de1a4c8fe2b29ee5d13651f8d60fe0.cs.png b/translated_images/enemyShip.22cbee6ea27a5809ef09dddc81a4f77714de1a4c8fe2b29ee5d13651f8d60fe0.cs.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.22cbee6ea27a5809ef09dddc81a4f77714de1a4c8fe2b29ee5d13651f8d60fe0.cs.png differ
diff --git a/translated_images/enemyShip.22cbee6ea27a5809ef09dddc81a4f77714de1a4c8fe2b29ee5d13651f8d60fe0.hu.png b/translated_images/enemyShip.22cbee6ea27a5809ef09dddc81a4f77714de1a4c8fe2b29ee5d13651f8d60fe0.hu.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.22cbee6ea27a5809ef09dddc81a4f77714de1a4c8fe2b29ee5d13651f8d60fe0.hu.png differ
diff --git a/translated_images/enemyShip.22cbee6ea27a5809ef09dddc81a4f77714de1a4c8fe2b29ee5d13651f8d60fe0.sw.png b/translated_images/enemyShip.22cbee6ea27a5809ef09dddc81a4f77714de1a4c8fe2b29ee5d13651f8d60fe0.sw.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.22cbee6ea27a5809ef09dddc81a4f77714de1a4c8fe2b29ee5d13651f8d60fe0.sw.png differ
diff --git a/translated_images/enemyShip.321ecb1b4eb21f2c5b74a5118216ac3cbdf4cda52de32993a6c157547e7539bd.cs.png b/translated_images/enemyShip.321ecb1b4eb21f2c5b74a5118216ac3cbdf4cda52de32993a6c157547e7539bd.cs.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.321ecb1b4eb21f2c5b74a5118216ac3cbdf4cda52de32993a6c157547e7539bd.cs.png differ
diff --git a/translated_images/enemyShip.321ecb1b4eb21f2c5b74a5118216ac3cbdf4cda52de32993a6c157547e7539bd.hu.png b/translated_images/enemyShip.321ecb1b4eb21f2c5b74a5118216ac3cbdf4cda52de32993a6c157547e7539bd.hu.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.321ecb1b4eb21f2c5b74a5118216ac3cbdf4cda52de32993a6c157547e7539bd.hu.png differ
diff --git a/translated_images/enemyShip.321ecb1b4eb21f2c5b74a5118216ac3cbdf4cda52de32993a6c157547e7539bd.sw.png b/translated_images/enemyShip.321ecb1b4eb21f2c5b74a5118216ac3cbdf4cda52de32993a6c157547e7539bd.sw.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.321ecb1b4eb21f2c5b74a5118216ac3cbdf4cda52de32993a6c157547e7539bd.sw.png differ
diff --git a/translated_images/enemyShip.4fbf2889e6129db41989c4c74999ae81dd8d4dd994f1df01f720e923a5749a36.cs.png b/translated_images/enemyShip.4fbf2889e6129db41989c4c74999ae81dd8d4dd994f1df01f720e923a5749a36.cs.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.4fbf2889e6129db41989c4c74999ae81dd8d4dd994f1df01f720e923a5749a36.cs.png differ
diff --git a/translated_images/enemyShip.4fbf2889e6129db41989c4c74999ae81dd8d4dd994f1df01f720e923a5749a36.hu.png b/translated_images/enemyShip.4fbf2889e6129db41989c4c74999ae81dd8d4dd994f1df01f720e923a5749a36.hu.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.4fbf2889e6129db41989c4c74999ae81dd8d4dd994f1df01f720e923a5749a36.hu.png differ
diff --git a/translated_images/enemyShip.4fbf2889e6129db41989c4c74999ae81dd8d4dd994f1df01f720e923a5749a36.sw.png b/translated_images/enemyShip.4fbf2889e6129db41989c4c74999ae81dd8d4dd994f1df01f720e923a5749a36.sw.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.4fbf2889e6129db41989c4c74999ae81dd8d4dd994f1df01f720e923a5749a36.sw.png differ
diff --git a/translated_images/enemyShip.5df2a822c16650c2fb3c06652e8ec8120cdb9122a6de46b9a1a56d54db22657f.cs.png b/translated_images/enemyShip.5df2a822c16650c2fb3c06652e8ec8120cdb9122a6de46b9a1a56d54db22657f.cs.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.5df2a822c16650c2fb3c06652e8ec8120cdb9122a6de46b9a1a56d54db22657f.cs.png differ
diff --git a/translated_images/enemyShip.5df2a822c16650c2fb3c06652e8ec8120cdb9122a6de46b9a1a56d54db22657f.hu.png b/translated_images/enemyShip.5df2a822c16650c2fb3c06652e8ec8120cdb9122a6de46b9a1a56d54db22657f.hu.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.5df2a822c16650c2fb3c06652e8ec8120cdb9122a6de46b9a1a56d54db22657f.hu.png differ
diff --git a/translated_images/enemyShip.5df2a822c16650c2fb3c06652e8ec8120cdb9122a6de46b9a1a56d54db22657f.sw.png b/translated_images/enemyShip.5df2a822c16650c2fb3c06652e8ec8120cdb9122a6de46b9a1a56d54db22657f.sw.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.5df2a822c16650c2fb3c06652e8ec8120cdb9122a6de46b9a1a56d54db22657f.sw.png differ
diff --git a/translated_images/enemyShip.62983ed4bfb2220fe28986c8c8c5e6f1528caf879a4290bddbf3550469374c5d.cs.png b/translated_images/enemyShip.62983ed4bfb2220fe28986c8c8c5e6f1528caf879a4290bddbf3550469374c5d.cs.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.62983ed4bfb2220fe28986c8c8c5e6f1528caf879a4290bddbf3550469374c5d.cs.png differ
diff --git a/translated_images/enemyShip.62983ed4bfb2220fe28986c8c8c5e6f1528caf879a4290bddbf3550469374c5d.hu.png b/translated_images/enemyShip.62983ed4bfb2220fe28986c8c8c5e6f1528caf879a4290bddbf3550469374c5d.hu.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.62983ed4bfb2220fe28986c8c8c5e6f1528caf879a4290bddbf3550469374c5d.hu.png differ
diff --git a/translated_images/enemyShip.62983ed4bfb2220fe28986c8c8c5e6f1528caf879a4290bddbf3550469374c5d.sw.png b/translated_images/enemyShip.62983ed4bfb2220fe28986c8c8c5e6f1528caf879a4290bddbf3550469374c5d.sw.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.62983ed4bfb2220fe28986c8c8c5e6f1528caf879a4290bddbf3550469374c5d.sw.png differ
diff --git a/translated_images/enemyShip.add7036e1c3c30144d4500534897f937d962ffb178f6d7dbb536c2b19f05d3b7.cs.png b/translated_images/enemyShip.add7036e1c3c30144d4500534897f937d962ffb178f6d7dbb536c2b19f05d3b7.cs.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.add7036e1c3c30144d4500534897f937d962ffb178f6d7dbb536c2b19f05d3b7.cs.png differ
diff --git a/translated_images/enemyShip.add7036e1c3c30144d4500534897f937d962ffb178f6d7dbb536c2b19f05d3b7.hu.png b/translated_images/enemyShip.add7036e1c3c30144d4500534897f937d962ffb178f6d7dbb536c2b19f05d3b7.hu.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.add7036e1c3c30144d4500534897f937d962ffb178f6d7dbb536c2b19f05d3b7.hu.png differ
diff --git a/translated_images/enemyShip.add7036e1c3c30144d4500534897f937d962ffb178f6d7dbb536c2b19f05d3b7.sw.png b/translated_images/enemyShip.add7036e1c3c30144d4500534897f937d962ffb178f6d7dbb536c2b19f05d3b7.sw.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.add7036e1c3c30144d4500534897f937d962ffb178f6d7dbb536c2b19f05d3b7.sw.png differ
diff --git a/translated_images/enemyShip.b39a140287683bf7a409e00e19b41f29793c9dea0220e5d9fb174978fec357a2.cs.png b/translated_images/enemyShip.b39a140287683bf7a409e00e19b41f29793c9dea0220e5d9fb174978fec357a2.cs.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.b39a140287683bf7a409e00e19b41f29793c9dea0220e5d9fb174978fec357a2.cs.png differ
diff --git a/translated_images/enemyShip.b39a140287683bf7a409e00e19b41f29793c9dea0220e5d9fb174978fec357a2.hu.png b/translated_images/enemyShip.b39a140287683bf7a409e00e19b41f29793c9dea0220e5d9fb174978fec357a2.hu.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.b39a140287683bf7a409e00e19b41f29793c9dea0220e5d9fb174978fec357a2.hu.png differ
diff --git a/translated_images/enemyShip.b39a140287683bf7a409e00e19b41f29793c9dea0220e5d9fb174978fec357a2.sw.png b/translated_images/enemyShip.b39a140287683bf7a409e00e19b41f29793c9dea0220e5d9fb174978fec357a2.sw.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.b39a140287683bf7a409e00e19b41f29793c9dea0220e5d9fb174978fec357a2.sw.png differ
diff --git a/translated_images/enemyShip.b9626ed228a17a323a180f11f359f96848de1c9ee48d76702b49cd1cc3ef3821.cs.png b/translated_images/enemyShip.b9626ed228a17a323a180f11f359f96848de1c9ee48d76702b49cd1cc3ef3821.cs.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.b9626ed228a17a323a180f11f359f96848de1c9ee48d76702b49cd1cc3ef3821.cs.png differ
diff --git a/translated_images/enemyShip.b9626ed228a17a323a180f11f359f96848de1c9ee48d76702b49cd1cc3ef3821.hu.png b/translated_images/enemyShip.b9626ed228a17a323a180f11f359f96848de1c9ee48d76702b49cd1cc3ef3821.hu.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.b9626ed228a17a323a180f11f359f96848de1c9ee48d76702b49cd1cc3ef3821.hu.png differ
diff --git a/translated_images/enemyShip.b9626ed228a17a323a180f11f359f96848de1c9ee48d76702b49cd1cc3ef3821.sw.png b/translated_images/enemyShip.b9626ed228a17a323a180f11f359f96848de1c9ee48d76702b49cd1cc3ef3821.sw.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.b9626ed228a17a323a180f11f359f96848de1c9ee48d76702b49cd1cc3ef3821.sw.png differ
diff --git a/translated_images/enemyShip.deb0477a7312f54d5e9b3f707b02af3cfa2cafa04e1e9a3dd5818e6ab0244b2c.cs.png b/translated_images/enemyShip.deb0477a7312f54d5e9b3f707b02af3cfa2cafa04e1e9a3dd5818e6ab0244b2c.cs.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.deb0477a7312f54d5e9b3f707b02af3cfa2cafa04e1e9a3dd5818e6ab0244b2c.cs.png differ
diff --git a/translated_images/enemyShip.deb0477a7312f54d5e9b3f707b02af3cfa2cafa04e1e9a3dd5818e6ab0244b2c.hu.png b/translated_images/enemyShip.deb0477a7312f54d5e9b3f707b02af3cfa2cafa04e1e9a3dd5818e6ab0244b2c.hu.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.deb0477a7312f54d5e9b3f707b02af3cfa2cafa04e1e9a3dd5818e6ab0244b2c.hu.png differ
diff --git a/translated_images/enemyShip.deb0477a7312f54d5e9b3f707b02af3cfa2cafa04e1e9a3dd5818e6ab0244b2c.sw.png b/translated_images/enemyShip.deb0477a7312f54d5e9b3f707b02af3cfa2cafa04e1e9a3dd5818e6ab0244b2c.sw.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.deb0477a7312f54d5e9b3f707b02af3cfa2cafa04e1e9a3dd5818e6ab0244b2c.sw.png differ
diff --git a/translated_images/enemyUFO.bf8585e4e8dcdb68e03f67a534d870334c5db3557ad4f960027eac7782cf7ceb.cs.png b/translated_images/enemyUFO.bf8585e4e8dcdb68e03f67a534d870334c5db3557ad4f960027eac7782cf7ceb.cs.png
new file mode 100644
index 00000000..0431526a
Binary files /dev/null and b/translated_images/enemyUFO.bf8585e4e8dcdb68e03f67a534d870334c5db3557ad4f960027eac7782cf7ceb.cs.png differ
diff --git a/translated_images/enemyUFO.bf8585e4e8dcdb68e03f67a534d870334c5db3557ad4f960027eac7782cf7ceb.hu.png b/translated_images/enemyUFO.bf8585e4e8dcdb68e03f67a534d870334c5db3557ad4f960027eac7782cf7ceb.hu.png
new file mode 100644
index 00000000..0431526a
Binary files /dev/null and b/translated_images/enemyUFO.bf8585e4e8dcdb68e03f67a534d870334c5db3557ad4f960027eac7782cf7ceb.hu.png differ
diff --git a/translated_images/enemyUFO.bf8585e4e8dcdb68e03f67a534d870334c5db3557ad4f960027eac7782cf7ceb.sw.png b/translated_images/enemyUFO.bf8585e4e8dcdb68e03f67a534d870334c5db3557ad4f960027eac7782cf7ceb.sw.png
new file mode 100644
index 00000000..0431526a
Binary files /dev/null and b/translated_images/enemyUFO.bf8585e4e8dcdb68e03f67a534d870334c5db3557ad4f960027eac7782cf7ceb.sw.png differ
diff --git a/translated_images/extension-details.9f8f1fd4e9eb2de5069ae413119eb8ee43172776383ebe2f7cf640e11df2e106.cs.png b/translated_images/extension-details.9f8f1fd4e9eb2de5069ae413119eb8ee43172776383ebe2f7cf640e11df2e106.cs.png
new file mode 100644
index 00000000..ed71ba78
Binary files /dev/null and b/translated_images/extension-details.9f8f1fd4e9eb2de5069ae413119eb8ee43172776383ebe2f7cf640e11df2e106.cs.png differ
diff --git a/translated_images/extension-details.9f8f1fd4e9eb2de5069ae413119eb8ee43172776383ebe2f7cf640e11df2e106.hu.png b/translated_images/extension-details.9f8f1fd4e9eb2de5069ae413119eb8ee43172776383ebe2f7cf640e11df2e106.hu.png
new file mode 100644
index 00000000..4dfc41e4
Binary files /dev/null and b/translated_images/extension-details.9f8f1fd4e9eb2de5069ae413119eb8ee43172776383ebe2f7cf640e11df2e106.hu.png differ
diff --git a/translated_images/extension-details.9f8f1fd4e9eb2de5069ae413119eb8ee43172776383ebe2f7cf640e11df2e106.sw.png b/translated_images/extension-details.9f8f1fd4e9eb2de5069ae413119eb8ee43172776383ebe2f7cf640e11df2e106.sw.png
new file mode 100644
index 00000000..ad84d05d
Binary files /dev/null and b/translated_images/extension-details.9f8f1fd4e9eb2de5069ae413119eb8ee43172776383ebe2f7cf640e11df2e106.sw.png differ
diff --git a/translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.cs.png b/translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.cs.png
new file mode 100644
index 00000000..47fcd342
Binary files /dev/null and b/translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.cs.png differ
diff --git a/translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.hu.png b/translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.hu.png
new file mode 100644
index 00000000..10ce755b
Binary files /dev/null and b/translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.hu.png differ
diff --git a/translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.sw.png b/translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.sw.png
new file mode 100644
index 00000000..bd8fb6d6
Binary files /dev/null and b/translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.sw.png differ
diff --git a/translated_images/extension-settings.21c752ae4f4cdb78a867f140ccd0680e04619d0c44bb4afb26373e54b829d934.cs.png b/translated_images/extension-settings.21c752ae4f4cdb78a867f140ccd0680e04619d0c44bb4afb26373e54b829d934.cs.png
new file mode 100644
index 00000000..47972a3d
Binary files /dev/null and b/translated_images/extension-settings.21c752ae4f4cdb78a867f140ccd0680e04619d0c44bb4afb26373e54b829d934.cs.png differ
diff --git a/translated_images/extension-settings.21c752ae4f4cdb78a867f140ccd0680e04619d0c44bb4afb26373e54b829d934.hu.png b/translated_images/extension-settings.21c752ae4f4cdb78a867f140ccd0680e04619d0c44bb4afb26373e54b829d934.hu.png
new file mode 100644
index 00000000..21b01698
Binary files /dev/null and b/translated_images/extension-settings.21c752ae4f4cdb78a867f140ccd0680e04619d0c44bb4afb26373e54b829d934.hu.png differ
diff --git a/translated_images/extension-settings.21c752ae4f4cdb78a867f140ccd0680e04619d0c44bb4afb26373e54b829d934.sw.png b/translated_images/extension-settings.21c752ae4f4cdb78a867f140ccd0680e04619d0c44bb4afb26373e54b829d934.sw.png
new file mode 100644
index 00000000..6815e47a
Binary files /dev/null and b/translated_images/extension-settings.21c752ae4f4cdb78a867f140ccd0680e04619d0c44bb4afb26373e54b829d934.sw.png differ
diff --git a/translated_images/extensions.eca0e0c7f59a10b5c88be7fe24b3e32cca6b6058b35a49026c3a9d80b1813b7c.cs.png b/translated_images/extensions.eca0e0c7f59a10b5c88be7fe24b3e32cca6b6058b35a49026c3a9d80b1813b7c.cs.png
new file mode 100644
index 00000000..0fe3b05d
Binary files /dev/null and b/translated_images/extensions.eca0e0c7f59a10b5c88be7fe24b3e32cca6b6058b35a49026c3a9d80b1813b7c.cs.png differ
diff --git a/translated_images/extensions.eca0e0c7f59a10b5c88be7fe24b3e32cca6b6058b35a49026c3a9d80b1813b7c.hu.png b/translated_images/extensions.eca0e0c7f59a10b5c88be7fe24b3e32cca6b6058b35a49026c3a9d80b1813b7c.hu.png
new file mode 100644
index 00000000..f2a3d40a
Binary files /dev/null and b/translated_images/extensions.eca0e0c7f59a10b5c88be7fe24b3e32cca6b6058b35a49026c3a9d80b1813b7c.hu.png differ
diff --git a/translated_images/extensions.eca0e0c7f59a10b5c88be7fe24b3e32cca6b6058b35a49026c3a9d80b1813b7c.sw.png b/translated_images/extensions.eca0e0c7f59a10b5c88be7fe24b3e32cca6b6058b35a49026c3a9d80b1813b7c.sw.png
new file mode 100644
index 00000000..86ee3f79
Binary files /dev/null and b/translated_images/extensions.eca0e0c7f59a10b5c88be7fe24b3e32cca6b6058b35a49026c3a9d80b1813b7c.sw.png differ
diff --git a/translated_images/favicon.37b561214b36d454f9fd1f725d77f310fe256eb88f2a0ae08b9cb18aeb30650c.cs.png b/translated_images/favicon.37b561214b36d454f9fd1f725d77f310fe256eb88f2a0ae08b9cb18aeb30650c.cs.png
new file mode 100644
index 00000000..26e0ae43
Binary files /dev/null and b/translated_images/favicon.37b561214b36d454f9fd1f725d77f310fe256eb88f2a0ae08b9cb18aeb30650c.cs.png differ
diff --git a/translated_images/favicon.37b561214b36d454f9fd1f725d77f310fe256eb88f2a0ae08b9cb18aeb30650c.hu.png b/translated_images/favicon.37b561214b36d454f9fd1f725d77f310fe256eb88f2a0ae08b9cb18aeb30650c.hu.png
new file mode 100644
index 00000000..26e0ae43
Binary files /dev/null and b/translated_images/favicon.37b561214b36d454f9fd1f725d77f310fe256eb88f2a0ae08b9cb18aeb30650c.hu.png differ
diff --git a/translated_images/favicon.37b561214b36d454f9fd1f725d77f310fe256eb88f2a0ae08b9cb18aeb30650c.sw.png b/translated_images/favicon.37b561214b36d454f9fd1f725d77f310fe256eb88f2a0ae08b9cb18aeb30650c.sw.png
new file mode 100644
index 00000000..26e0ae43
Binary files /dev/null and b/translated_images/favicon.37b561214b36d454f9fd1f725d77f310fe256eb88f2a0ae08b9cb18aeb30650c.sw.png differ
diff --git a/translated_images/form-post.61de4ca1b964d91a9e338416e19f218504dd0af5f762fbebabfe7ae80edf885f.cs.png b/translated_images/form-post.61de4ca1b964d91a9e338416e19f218504dd0af5f762fbebabfe7ae80edf885f.cs.png
new file mode 100644
index 00000000..06c8ef1f
Binary files /dev/null and b/translated_images/form-post.61de4ca1b964d91a9e338416e19f218504dd0af5f762fbebabfe7ae80edf885f.cs.png differ
diff --git a/translated_images/form-post.61de4ca1b964d91a9e338416e19f218504dd0af5f762fbebabfe7ae80edf885f.hu.png b/translated_images/form-post.61de4ca1b964d91a9e338416e19f218504dd0af5f762fbebabfe7ae80edf885f.hu.png
new file mode 100644
index 00000000..aed025d3
Binary files /dev/null and b/translated_images/form-post.61de4ca1b964d91a9e338416e19f218504dd0af5f762fbebabfe7ae80edf885f.hu.png differ
diff --git a/translated_images/form-post.61de4ca1b964d91a9e338416e19f218504dd0af5f762fbebabfe7ae80edf885f.sw.png b/translated_images/form-post.61de4ca1b964d91a9e338416e19f218504dd0af5f762fbebabfe7ae80edf885f.sw.png
new file mode 100644
index 00000000..1a4d7f3c
Binary files /dev/null and b/translated_images/form-post.61de4ca1b964d91a9e338416e19f218504dd0af5f762fbebabfe7ae80edf885f.sw.png differ
diff --git a/translated_images/history.7fdabbafa521e06455b738d3dafa3ff41d3071deae60ead8c7e0844b9ed987d8.cs.png b/translated_images/history.7fdabbafa521e06455b738d3dafa3ff41d3071deae60ead8c7e0844b9ed987d8.cs.png
new file mode 100644
index 00000000..d87eb032
Binary files /dev/null and b/translated_images/history.7fdabbafa521e06455b738d3dafa3ff41d3071deae60ead8c7e0844b9ed987d8.cs.png differ
diff --git a/translated_images/history.7fdabbafa521e06455b738d3dafa3ff41d3071deae60ead8c7e0844b9ed987d8.hu.png b/translated_images/history.7fdabbafa521e06455b738d3dafa3ff41d3071deae60ead8c7e0844b9ed987d8.hu.png
new file mode 100644
index 00000000..63d4909b
Binary files /dev/null and b/translated_images/history.7fdabbafa521e06455b738d3dafa3ff41d3071deae60ead8c7e0844b9ed987d8.hu.png differ
diff --git a/translated_images/history.7fdabbafa521e06455b738d3dafa3ff41d3071deae60ead8c7e0844b9ed987d8.sw.png b/translated_images/history.7fdabbafa521e06455b738d3dafa3ff41d3071deae60ead8c7e0844b9ed987d8.sw.png
new file mode 100644
index 00000000..6e2ebf02
Binary files /dev/null and b/translated_images/history.7fdabbafa521e06455b738d3dafa3ff41d3071deae60ead8c7e0844b9ed987d8.sw.png differ
diff --git a/translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.cs.png b/translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.cs.png
new file mode 100644
index 00000000..1ff77cdf
Binary files /dev/null and b/translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.cs.png differ
diff --git a/translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.hu.png b/translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.hu.png
new file mode 100644
index 00000000..5211b01d
Binary files /dev/null and b/translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.hu.png differ
diff --git a/translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.sw.png b/translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.sw.png
new file mode 100644
index 00000000..337880f9
Binary files /dev/null and b/translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.sw.png differ
diff --git a/translated_images/install-on-edge.d68781acaf0b3d3dada8b7507cde7a64bf74b7040d9818baaa9070668e819f90.cs.png b/translated_images/install-on-edge.d68781acaf0b3d3dada8b7507cde7a64bf74b7040d9818baaa9070668e819f90.cs.png
new file mode 100644
index 00000000..d007c8cc
Binary files /dev/null and b/translated_images/install-on-edge.d68781acaf0b3d3dada8b7507cde7a64bf74b7040d9818baaa9070668e819f90.cs.png differ
diff --git a/translated_images/install-on-edge.d68781acaf0b3d3dada8b7507cde7a64bf74b7040d9818baaa9070668e819f90.hu.png b/translated_images/install-on-edge.d68781acaf0b3d3dada8b7507cde7a64bf74b7040d9818baaa9070668e819f90.hu.png
new file mode 100644
index 00000000..d98662a5
Binary files /dev/null and b/translated_images/install-on-edge.d68781acaf0b3d3dada8b7507cde7a64bf74b7040d9818baaa9070668e819f90.hu.png differ
diff --git a/translated_images/install-on-edge.d68781acaf0b3d3dada8b7507cde7a64bf74b7040d9818baaa9070668e819f90.sw.png b/translated_images/install-on-edge.d68781acaf0b3d3dada8b7507cde7a64bf74b7040d9818baaa9070668e819f90.sw.png
new file mode 100644
index 00000000..8b025a93
Binary files /dev/null and b/translated_images/install-on-edge.d68781acaf0b3d3dada8b7507cde7a64bf74b7040d9818baaa9070668e819f90.sw.png differ
diff --git a/translated_images/laserGreen.89904f0f499455604f204b641dfe992cb6f688d5b1c82a2227d1674af84c0b20.cs.png b/translated_images/laserGreen.89904f0f499455604f204b641dfe992cb6f688d5b1c82a2227d1674af84c0b20.cs.png
new file mode 100644
index 00000000..cfd373b4
Binary files /dev/null and b/translated_images/laserGreen.89904f0f499455604f204b641dfe992cb6f688d5b1c82a2227d1674af84c0b20.cs.png differ
diff --git a/translated_images/laserGreen.89904f0f499455604f204b641dfe992cb6f688d5b1c82a2227d1674af84c0b20.hu.png b/translated_images/laserGreen.89904f0f499455604f204b641dfe992cb6f688d5b1c82a2227d1674af84c0b20.hu.png
new file mode 100644
index 00000000..cfd373b4
Binary files /dev/null and b/translated_images/laserGreen.89904f0f499455604f204b641dfe992cb6f688d5b1c82a2227d1674af84c0b20.hu.png differ
diff --git a/translated_images/laserGreen.89904f0f499455604f204b641dfe992cb6f688d5b1c82a2227d1674af84c0b20.sw.png b/translated_images/laserGreen.89904f0f499455604f204b641dfe992cb6f688d5b1c82a2227d1674af84c0b20.sw.png
new file mode 100644
index 00000000..cfd373b4
Binary files /dev/null and b/translated_images/laserGreen.89904f0f499455604f204b641dfe992cb6f688d5b1c82a2227d1674af84c0b20.sw.png differ
diff --git a/translated_images/laserGreenShot.e4fbfc4714c08a5b1a3e94429dde0e5ad4f010c25f0d0b6c321aea62014ed203.cs.png b/translated_images/laserGreenShot.e4fbfc4714c08a5b1a3e94429dde0e5ad4f010c25f0d0b6c321aea62014ed203.cs.png
new file mode 100644
index 00000000..816fdf33
Binary files /dev/null and b/translated_images/laserGreenShot.e4fbfc4714c08a5b1a3e94429dde0e5ad4f010c25f0d0b6c321aea62014ed203.cs.png differ
diff --git a/translated_images/laserGreenShot.e4fbfc4714c08a5b1a3e94429dde0e5ad4f010c25f0d0b6c321aea62014ed203.hu.png b/translated_images/laserGreenShot.e4fbfc4714c08a5b1a3e94429dde0e5ad4f010c25f0d0b6c321aea62014ed203.hu.png
new file mode 100644
index 00000000..816fdf33
Binary files /dev/null and b/translated_images/laserGreenShot.e4fbfc4714c08a5b1a3e94429dde0e5ad4f010c25f0d0b6c321aea62014ed203.hu.png differ
diff --git a/translated_images/laserGreenShot.e4fbfc4714c08a5b1a3e94429dde0e5ad4f010c25f0d0b6c321aea62014ed203.sw.png b/translated_images/laserGreenShot.e4fbfc4714c08a5b1a3e94429dde0e5ad4f010c25f0d0b6c321aea62014ed203.sw.png
new file mode 100644
index 00000000..816fdf33
Binary files /dev/null and b/translated_images/laserGreenShot.e4fbfc4714c08a5b1a3e94429dde0e5ad4f010c25f0d0b6c321aea62014ed203.sw.png differ
diff --git a/translated_images/laserRed.2040e11f55c0a40a9800af7a11247676b4969e6c87e697f29589f605a0192b05.cs.png b/translated_images/laserRed.2040e11f55c0a40a9800af7a11247676b4969e6c87e697f29589f605a0192b05.cs.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.2040e11f55c0a40a9800af7a11247676b4969e6c87e697f29589f605a0192b05.cs.png differ
diff --git a/translated_images/laserRed.2040e11f55c0a40a9800af7a11247676b4969e6c87e697f29589f605a0192b05.hu.png b/translated_images/laserRed.2040e11f55c0a40a9800af7a11247676b4969e6c87e697f29589f605a0192b05.hu.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.2040e11f55c0a40a9800af7a11247676b4969e6c87e697f29589f605a0192b05.hu.png differ
diff --git a/translated_images/laserRed.2040e11f55c0a40a9800af7a11247676b4969e6c87e697f29589f605a0192b05.sw.png b/translated_images/laserRed.2040e11f55c0a40a9800af7a11247676b4969e6c87e697f29589f605a0192b05.sw.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.2040e11f55c0a40a9800af7a11247676b4969e6c87e697f29589f605a0192b05.sw.png differ
diff --git a/translated_images/laserRed.381bc5555491ce677eedc34e728c7c4f5676ce6c74db68d8a4d82fde952cb8fb.cs.png b/translated_images/laserRed.381bc5555491ce677eedc34e728c7c4f5676ce6c74db68d8a4d82fde952cb8fb.cs.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.381bc5555491ce677eedc34e728c7c4f5676ce6c74db68d8a4d82fde952cb8fb.cs.png differ
diff --git a/translated_images/laserRed.381bc5555491ce677eedc34e728c7c4f5676ce6c74db68d8a4d82fde952cb8fb.hu.png b/translated_images/laserRed.381bc5555491ce677eedc34e728c7c4f5676ce6c74db68d8a4d82fde952cb8fb.hu.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.381bc5555491ce677eedc34e728c7c4f5676ce6c74db68d8a4d82fde952cb8fb.hu.png differ
diff --git a/translated_images/laserRed.381bc5555491ce677eedc34e728c7c4f5676ce6c74db68d8a4d82fde952cb8fb.sw.png b/translated_images/laserRed.381bc5555491ce677eedc34e728c7c4f5676ce6c74db68d8a4d82fde952cb8fb.sw.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.381bc5555491ce677eedc34e728c7c4f5676ce6c74db68d8a4d82fde952cb8fb.sw.png differ
diff --git a/translated_images/laserRed.69730edd76f0b3bd5a45ae075c3dd1a064017020ddff4b4c3f007c21d9a62ebc.cs.png b/translated_images/laserRed.69730edd76f0b3bd5a45ae075c3dd1a064017020ddff4b4c3f007c21d9a62ebc.cs.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.69730edd76f0b3bd5a45ae075c3dd1a064017020ddff4b4c3f007c21d9a62ebc.cs.png differ
diff --git a/translated_images/laserRed.69730edd76f0b3bd5a45ae075c3dd1a064017020ddff4b4c3f007c21d9a62ebc.hu.png b/translated_images/laserRed.69730edd76f0b3bd5a45ae075c3dd1a064017020ddff4b4c3f007c21d9a62ebc.hu.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.69730edd76f0b3bd5a45ae075c3dd1a064017020ddff4b4c3f007c21d9a62ebc.hu.png differ
diff --git a/translated_images/laserRed.69730edd76f0b3bd5a45ae075c3dd1a064017020ddff4b4c3f007c21d9a62ebc.sw.png b/translated_images/laserRed.69730edd76f0b3bd5a45ae075c3dd1a064017020ddff4b4c3f007c21d9a62ebc.sw.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.69730edd76f0b3bd5a45ae075c3dd1a064017020ddff4b4c3f007c21d9a62ebc.sw.png differ
diff --git a/translated_images/laserRed.b583dc1728eb8581da951a0ec74c42cf06cf6903e9b939c71baaf04ef1a60f90.cs.png b/translated_images/laserRed.b583dc1728eb8581da951a0ec74c42cf06cf6903e9b939c71baaf04ef1a60f90.cs.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.b583dc1728eb8581da951a0ec74c42cf06cf6903e9b939c71baaf04ef1a60f90.cs.png differ
diff --git a/translated_images/laserRed.b583dc1728eb8581da951a0ec74c42cf06cf6903e9b939c71baaf04ef1a60f90.hu.png b/translated_images/laserRed.b583dc1728eb8581da951a0ec74c42cf06cf6903e9b939c71baaf04ef1a60f90.hu.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.b583dc1728eb8581da951a0ec74c42cf06cf6903e9b939c71baaf04ef1a60f90.hu.png differ
diff --git a/translated_images/laserRed.b583dc1728eb8581da951a0ec74c42cf06cf6903e9b939c71baaf04ef1a60f90.sw.png b/translated_images/laserRed.b583dc1728eb8581da951a0ec74c42cf06cf6903e9b939c71baaf04ef1a60f90.sw.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.b583dc1728eb8581da951a0ec74c42cf06cf6903e9b939c71baaf04ef1a60f90.sw.png differ
diff --git a/translated_images/laserRed.cae9ab24ea9b18fd5fde4b22153f4d71291a363bd611de8108bc6a40cecefe24.cs.png b/translated_images/laserRed.cae9ab24ea9b18fd5fde4b22153f4d71291a363bd611de8108bc6a40cecefe24.cs.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.cae9ab24ea9b18fd5fde4b22153f4d71291a363bd611de8108bc6a40cecefe24.cs.png differ
diff --git a/translated_images/laserRed.cae9ab24ea9b18fd5fde4b22153f4d71291a363bd611de8108bc6a40cecefe24.hu.png b/translated_images/laserRed.cae9ab24ea9b18fd5fde4b22153f4d71291a363bd611de8108bc6a40cecefe24.hu.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.cae9ab24ea9b18fd5fde4b22153f4d71291a363bd611de8108bc6a40cecefe24.hu.png differ
diff --git a/translated_images/laserRed.cae9ab24ea9b18fd5fde4b22153f4d71291a363bd611de8108bc6a40cecefe24.sw.png b/translated_images/laserRed.cae9ab24ea9b18fd5fde4b22153f4d71291a363bd611de8108bc6a40cecefe24.sw.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.cae9ab24ea9b18fd5fde4b22153f4d71291a363bd611de8108bc6a40cecefe24.sw.png differ
diff --git a/translated_images/laserRed.d81ce4986f87c251d4fd93a2fcfb8215c90684ad71d59de7bb0c2561a8e76d56.cs.png b/translated_images/laserRed.d81ce4986f87c251d4fd93a2fcfb8215c90684ad71d59de7bb0c2561a8e76d56.cs.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.d81ce4986f87c251d4fd93a2fcfb8215c90684ad71d59de7bb0c2561a8e76d56.cs.png differ
diff --git a/translated_images/laserRed.d81ce4986f87c251d4fd93a2fcfb8215c90684ad71d59de7bb0c2561a8e76d56.hu.png b/translated_images/laserRed.d81ce4986f87c251d4fd93a2fcfb8215c90684ad71d59de7bb0c2561a8e76d56.hu.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.d81ce4986f87c251d4fd93a2fcfb8215c90684ad71d59de7bb0c2561a8e76d56.hu.png differ
diff --git a/translated_images/laserRed.d81ce4986f87c251d4fd93a2fcfb8215c90684ad71d59de7bb0c2561a8e76d56.sw.png b/translated_images/laserRed.d81ce4986f87c251d4fd93a2fcfb8215c90684ad71d59de7bb0c2561a8e76d56.sw.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.d81ce4986f87c251d4fd93a2fcfb8215c90684ad71d59de7bb0c2561a8e76d56.sw.png differ
diff --git a/translated_images/laserRed.e58ef8db2585dfbe451c9f46f4190d75f555479ddc24e2b75be28fe3a2894f24.cs.png b/translated_images/laserRed.e58ef8db2585dfbe451c9f46f4190d75f555479ddc24e2b75be28fe3a2894f24.cs.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.e58ef8db2585dfbe451c9f46f4190d75f555479ddc24e2b75be28fe3a2894f24.cs.png differ
diff --git a/translated_images/laserRed.e58ef8db2585dfbe451c9f46f4190d75f555479ddc24e2b75be28fe3a2894f24.hu.png b/translated_images/laserRed.e58ef8db2585dfbe451c9f46f4190d75f555479ddc24e2b75be28fe3a2894f24.hu.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.e58ef8db2585dfbe451c9f46f4190d75f555479ddc24e2b75be28fe3a2894f24.hu.png differ
diff --git a/translated_images/laserRed.e58ef8db2585dfbe451c9f46f4190d75f555479ddc24e2b75be28fe3a2894f24.sw.png b/translated_images/laserRed.e58ef8db2585dfbe451c9f46f4190d75f555479ddc24e2b75be28fe3a2894f24.sw.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.e58ef8db2585dfbe451c9f46f4190d75f555479ddc24e2b75be28fe3a2894f24.sw.png differ
diff --git a/translated_images/laserRed.e66e29ace6666064cf451ce990d73b779028e21542cded84ecad88577353aad1.cs.png b/translated_images/laserRed.e66e29ace6666064cf451ce990d73b779028e21542cded84ecad88577353aad1.cs.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.e66e29ace6666064cf451ce990d73b779028e21542cded84ecad88577353aad1.cs.png differ
diff --git a/translated_images/laserRed.e66e29ace6666064cf451ce990d73b779028e21542cded84ecad88577353aad1.hu.png b/translated_images/laserRed.e66e29ace6666064cf451ce990d73b779028e21542cded84ecad88577353aad1.hu.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.e66e29ace6666064cf451ce990d73b779028e21542cded84ecad88577353aad1.hu.png differ
diff --git a/translated_images/laserRed.e66e29ace6666064cf451ce990d73b779028e21542cded84ecad88577353aad1.sw.png b/translated_images/laserRed.e66e29ace6666064cf451ce990d73b779028e21542cded84ecad88577353aad1.sw.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.e66e29ace6666064cf451ce990d73b779028e21542cded84ecad88577353aad1.sw.png differ
diff --git a/translated_images/laserRed.e86e8fb629c6026e20cc7e8507f8a1f2fc82cc355117c721eb08ac67c40d3e6a.cs.png b/translated_images/laserRed.e86e8fb629c6026e20cc7e8507f8a1f2fc82cc355117c721eb08ac67c40d3e6a.cs.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.e86e8fb629c6026e20cc7e8507f8a1f2fc82cc355117c721eb08ac67c40d3e6a.cs.png differ
diff --git a/translated_images/laserRed.e86e8fb629c6026e20cc7e8507f8a1f2fc82cc355117c721eb08ac67c40d3e6a.hu.png b/translated_images/laserRed.e86e8fb629c6026e20cc7e8507f8a1f2fc82cc355117c721eb08ac67c40d3e6a.hu.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.e86e8fb629c6026e20cc7e8507f8a1f2fc82cc355117c721eb08ac67c40d3e6a.hu.png differ
diff --git a/translated_images/laserRed.e86e8fb629c6026e20cc7e8507f8a1f2fc82cc355117c721eb08ac67c40d3e6a.sw.png b/translated_images/laserRed.e86e8fb629c6026e20cc7e8507f8a1f2fc82cc355117c721eb08ac67c40d3e6a.sw.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.e86e8fb629c6026e20cc7e8507f8a1f2fc82cc355117c721eb08ac67c40d3e6a.sw.png differ
diff --git a/translated_images/laserRedShot.c39d066745996a71e5ffb0eeec4eff60fede6dc7fb65bdf8ef8b64193fda04c9.cs.png b/translated_images/laserRedShot.c39d066745996a71e5ffb0eeec4eff60fede6dc7fb65bdf8ef8b64193fda04c9.cs.png
new file mode 100644
index 00000000..28ecda5b
Binary files /dev/null and b/translated_images/laserRedShot.c39d066745996a71e5ffb0eeec4eff60fede6dc7fb65bdf8ef8b64193fda04c9.cs.png differ
diff --git a/translated_images/laserRedShot.c39d066745996a71e5ffb0eeec4eff60fede6dc7fb65bdf8ef8b64193fda04c9.hu.png b/translated_images/laserRedShot.c39d066745996a71e5ffb0eeec4eff60fede6dc7fb65bdf8ef8b64193fda04c9.hu.png
new file mode 100644
index 00000000..28ecda5b
Binary files /dev/null and b/translated_images/laserRedShot.c39d066745996a71e5ffb0eeec4eff60fede6dc7fb65bdf8ef8b64193fda04c9.hu.png differ
diff --git a/translated_images/laserRedShot.c39d066745996a71e5ffb0eeec4eff60fede6dc7fb65bdf8ef8b64193fda04c9.sw.png b/translated_images/laserRedShot.c39d066745996a71e5ffb0eeec4eff60fede6dc7fb65bdf8ef8b64193fda04c9.sw.png
new file mode 100644
index 00000000..28ecda5b
Binary files /dev/null and b/translated_images/laserRedShot.c39d066745996a71e5ffb0eeec4eff60fede6dc7fb65bdf8ef8b64193fda04c9.sw.png differ
diff --git a/translated_images/life.27144b6d4bfdea76e9613184ff89c93d44888d2c9068a8599553a4306cd539ea.cs.png b/translated_images/life.27144b6d4bfdea76e9613184ff89c93d44888d2c9068a8599553a4306cd539ea.cs.png
new file mode 100644
index 00000000..3487f796
Binary files /dev/null and b/translated_images/life.27144b6d4bfdea76e9613184ff89c93d44888d2c9068a8599553a4306cd539ea.cs.png differ
diff --git a/translated_images/life.27144b6d4bfdea76e9613184ff89c93d44888d2c9068a8599553a4306cd539ea.hu.png b/translated_images/life.27144b6d4bfdea76e9613184ff89c93d44888d2c9068a8599553a4306cd539ea.hu.png
new file mode 100644
index 00000000..3487f796
Binary files /dev/null and b/translated_images/life.27144b6d4bfdea76e9613184ff89c93d44888d2c9068a8599553a4306cd539ea.hu.png differ
diff --git a/translated_images/life.27144b6d4bfdea76e9613184ff89c93d44888d2c9068a8599553a4306cd539ea.sw.png b/translated_images/life.27144b6d4bfdea76e9613184ff89c93d44888d2c9068a8599553a4306cd539ea.sw.png
new file mode 100644
index 00000000..3487f796
Binary files /dev/null and b/translated_images/life.27144b6d4bfdea76e9613184ff89c93d44888d2c9068a8599553a4306cd539ea.sw.png differ
diff --git a/translated_images/life.2a159298dd98f4efde6d8b2792eaff08d6944f39e57dbfa65b0b3d7f27addf7e.cs.png b/translated_images/life.2a159298dd98f4efde6d8b2792eaff08d6944f39e57dbfa65b0b3d7f27addf7e.cs.png
new file mode 100644
index 00000000..3487f796
Binary files /dev/null and b/translated_images/life.2a159298dd98f4efde6d8b2792eaff08d6944f39e57dbfa65b0b3d7f27addf7e.cs.png differ
diff --git a/translated_images/life.2a159298dd98f4efde6d8b2792eaff08d6944f39e57dbfa65b0b3d7f27addf7e.hu.png b/translated_images/life.2a159298dd98f4efde6d8b2792eaff08d6944f39e57dbfa65b0b3d7f27addf7e.hu.png
new file mode 100644
index 00000000..3487f796
Binary files /dev/null and b/translated_images/life.2a159298dd98f4efde6d8b2792eaff08d6944f39e57dbfa65b0b3d7f27addf7e.hu.png differ
diff --git a/translated_images/life.2a159298dd98f4efde6d8b2792eaff08d6944f39e57dbfa65b0b3d7f27addf7e.sw.png b/translated_images/life.2a159298dd98f4efde6d8b2792eaff08d6944f39e57dbfa65b0b3d7f27addf7e.sw.png
new file mode 100644
index 00000000..3487f796
Binary files /dev/null and b/translated_images/life.2a159298dd98f4efde6d8b2792eaff08d6944f39e57dbfa65b0b3d7f27addf7e.sw.png differ
diff --git a/translated_images/life.466df3b1692a244ad9189538ae5184e6bb43165d7c3172f66b5a60790a1541cc.cs.png b/translated_images/life.466df3b1692a244ad9189538ae5184e6bb43165d7c3172f66b5a60790a1541cc.cs.png
new file mode 100644
index 00000000..3487f796
Binary files /dev/null and b/translated_images/life.466df3b1692a244ad9189538ae5184e6bb43165d7c3172f66b5a60790a1541cc.cs.png differ
diff --git a/translated_images/life.466df3b1692a244ad9189538ae5184e6bb43165d7c3172f66b5a60790a1541cc.hu.png b/translated_images/life.466df3b1692a244ad9189538ae5184e6bb43165d7c3172f66b5a60790a1541cc.hu.png
new file mode 100644
index 00000000..3487f796
Binary files /dev/null and b/translated_images/life.466df3b1692a244ad9189538ae5184e6bb43165d7c3172f66b5a60790a1541cc.hu.png differ
diff --git a/translated_images/life.466df3b1692a244ad9189538ae5184e6bb43165d7c3172f66b5a60790a1541cc.sw.png b/translated_images/life.466df3b1692a244ad9189538ae5184e6bb43165d7c3172f66b5a60790a1541cc.sw.png
new file mode 100644
index 00000000..3487f796
Binary files /dev/null and b/translated_images/life.466df3b1692a244ad9189538ae5184e6bb43165d7c3172f66b5a60790a1541cc.sw.png differ
diff --git a/translated_images/life.65a2aaceca87528424e6e93a36e953b58d4facfefbfd42dc4d6ad2db43076018.cs.png b/translated_images/life.65a2aaceca87528424e6e93a36e953b58d4facfefbfd42dc4d6ad2db43076018.cs.png
new file mode 100644
index 00000000..3487f796
Binary files /dev/null and b/translated_images/life.65a2aaceca87528424e6e93a36e953b58d4facfefbfd42dc4d6ad2db43076018.cs.png differ
diff --git a/translated_images/life.65a2aaceca87528424e6e93a36e953b58d4facfefbfd42dc4d6ad2db43076018.hu.png b/translated_images/life.65a2aaceca87528424e6e93a36e953b58d4facfefbfd42dc4d6ad2db43076018.hu.png
new file mode 100644
index 00000000..3487f796
Binary files /dev/null and b/translated_images/life.65a2aaceca87528424e6e93a36e953b58d4facfefbfd42dc4d6ad2db43076018.hu.png differ
diff --git a/translated_images/life.65a2aaceca87528424e6e93a36e953b58d4facfefbfd42dc4d6ad2db43076018.sw.png b/translated_images/life.65a2aaceca87528424e6e93a36e953b58d4facfefbfd42dc4d6ad2db43076018.sw.png
new file mode 100644
index 00000000..3487f796
Binary files /dev/null and b/translated_images/life.65a2aaceca87528424e6e93a36e953b58d4facfefbfd42dc4d6ad2db43076018.sw.png differ
diff --git a/translated_images/life.6fb9f50d53ee0413cd91aa411f7c296e10a1a6de5c4a4197c718b49bf7d63ebf.cs.png b/translated_images/life.6fb9f50d53ee0413cd91aa411f7c296e10a1a6de5c4a4197c718b49bf7d63ebf.cs.png
new file mode 100644
index 00000000..3487f796
Binary files /dev/null and b/translated_images/life.6fb9f50d53ee0413cd91aa411f7c296e10a1a6de5c4a4197c718b49bf7d63ebf.cs.png differ
diff --git a/translated_images/life.6fb9f50d53ee0413cd91aa411f7c296e10a1a6de5c4a4197c718b49bf7d63ebf.hu.png b/translated_images/life.6fb9f50d53ee0413cd91aa411f7c296e10a1a6de5c4a4197c718b49bf7d63ebf.hu.png
new file mode 100644
index 00000000..3487f796
Binary files /dev/null and b/translated_images/life.6fb9f50d53ee0413cd91aa411f7c296e10a1a6de5c4a4197c718b49bf7d63ebf.hu.png differ
diff --git a/translated_images/life.6fb9f50d53ee0413cd91aa411f7c296e10a1a6de5c4a4197c718b49bf7d63ebf.sw.png b/translated_images/life.6fb9f50d53ee0413cd91aa411f7c296e10a1a6de5c4a4197c718b49bf7d63ebf.sw.png
new file mode 100644
index 00000000..3487f796
Binary files /dev/null and b/translated_images/life.6fb9f50d53ee0413cd91aa411f7c296e10a1a6de5c4a4197c718b49bf7d63ebf.sw.png differ
diff --git a/translated_images/life.78b6e96a3003767e113e7d6fbb5d57fc59245a92579256c08af23c93f2e2b0a3.cs.png b/translated_images/life.78b6e96a3003767e113e7d6fbb5d57fc59245a92579256c08af23c93f2e2b0a3.cs.png
new file mode 100644
index 00000000..3487f796
Binary files /dev/null and b/translated_images/life.78b6e96a3003767e113e7d6fbb5d57fc59245a92579256c08af23c93f2e2b0a3.cs.png differ
diff --git a/translated_images/life.78b6e96a3003767e113e7d6fbb5d57fc59245a92579256c08af23c93f2e2b0a3.hu.png b/translated_images/life.78b6e96a3003767e113e7d6fbb5d57fc59245a92579256c08af23c93f2e2b0a3.hu.png
new file mode 100644
index 00000000..3487f796
Binary files /dev/null and b/translated_images/life.78b6e96a3003767e113e7d6fbb5d57fc59245a92579256c08af23c93f2e2b0a3.hu.png differ
diff --git a/translated_images/life.78b6e96a3003767e113e7d6fbb5d57fc59245a92579256c08af23c93f2e2b0a3.sw.png b/translated_images/life.78b6e96a3003767e113e7d6fbb5d57fc59245a92579256c08af23c93f2e2b0a3.sw.png
new file mode 100644
index 00000000..3487f796
Binary files /dev/null and b/translated_images/life.78b6e96a3003767e113e7d6fbb5d57fc59245a92579256c08af23c93f2e2b0a3.sw.png differ
diff --git a/translated_images/life.86d843ce9c23289c0094eff7154a7b6d3cada290b7db733424ee1c68864143c5.cs.png b/translated_images/life.86d843ce9c23289c0094eff7154a7b6d3cada290b7db733424ee1c68864143c5.cs.png
new file mode 100644
index 00000000..3487f796
Binary files /dev/null and b/translated_images/life.86d843ce9c23289c0094eff7154a7b6d3cada290b7db733424ee1c68864143c5.cs.png differ
diff --git a/translated_images/life.86d843ce9c23289c0094eff7154a7b6d3cada290b7db733424ee1c68864143c5.hu.png b/translated_images/life.86d843ce9c23289c0094eff7154a7b6d3cada290b7db733424ee1c68864143c5.hu.png
new file mode 100644
index 00000000..3487f796
Binary files /dev/null and b/translated_images/life.86d843ce9c23289c0094eff7154a7b6d3cada290b7db733424ee1c68864143c5.hu.png differ
diff --git a/translated_images/life.86d843ce9c23289c0094eff7154a7b6d3cada290b7db733424ee1c68864143c5.sw.png b/translated_images/life.86d843ce9c23289c0094eff7154a7b6d3cada290b7db733424ee1c68864143c5.sw.png
new file mode 100644
index 00000000..3487f796
Binary files /dev/null and b/translated_images/life.86d843ce9c23289c0094eff7154a7b6d3cada290b7db733424ee1c68864143c5.sw.png differ
diff --git a/translated_images/localstorage.472f8147b6a3f8d141d9551c95a2da610ac9a3c6a73d4a1c224081c98bae09d9.cs.png b/translated_images/localstorage.472f8147b6a3f8d141d9551c95a2da610ac9a3c6a73d4a1c224081c98bae09d9.cs.png
new file mode 100644
index 00000000..0953a688
Binary files /dev/null and b/translated_images/localstorage.472f8147b6a3f8d141d9551c95a2da610ac9a3c6a73d4a1c224081c98bae09d9.cs.png differ
diff --git a/translated_images/localstorage.472f8147b6a3f8d141d9551c95a2da610ac9a3c6a73d4a1c224081c98bae09d9.hu.png b/translated_images/localstorage.472f8147b6a3f8d141d9551c95a2da610ac9a3c6a73d4a1c224081c98bae09d9.hu.png
new file mode 100644
index 00000000..1d871474
Binary files /dev/null and b/translated_images/localstorage.472f8147b6a3f8d141d9551c95a2da610ac9a3c6a73d4a1c224081c98bae09d9.hu.png differ
diff --git a/translated_images/localstorage.472f8147b6a3f8d141d9551c95a2da610ac9a3c6a73d4a1c224081c98bae09d9.sw.png b/translated_images/localstorage.472f8147b6a3f8d141d9551c95a2da610ac9a3c6a73d4a1c224081c98bae09d9.sw.png
new file mode 100644
index 00000000..5df62569
Binary files /dev/null and b/translated_images/localstorage.472f8147b6a3f8d141d9551c95a2da610ac9a3c6a73d4a1c224081c98bae09d9.sw.png differ
diff --git a/translated_images/log.804026979f3707e00eebcfa028b2b5a88cec6292f858767bb6703afba65a7d9c.cs.png b/translated_images/log.804026979f3707e00eebcfa028b2b5a88cec6292f858767bb6703afba65a7d9c.cs.png
new file mode 100644
index 00000000..87228f22
Binary files /dev/null and b/translated_images/log.804026979f3707e00eebcfa028b2b5a88cec6292f858767bb6703afba65a7d9c.cs.png differ
diff --git a/translated_images/log.804026979f3707e00eebcfa028b2b5a88cec6292f858767bb6703afba65a7d9c.hu.png b/translated_images/log.804026979f3707e00eebcfa028b2b5a88cec6292f858767bb6703afba65a7d9c.hu.png
new file mode 100644
index 00000000..21b3386e
Binary files /dev/null and b/translated_images/log.804026979f3707e00eebcfa028b2b5a88cec6292f858767bb6703afba65a7d9c.hu.png differ
diff --git a/translated_images/log.804026979f3707e00eebcfa028b2b5a88cec6292f858767bb6703afba65a7d9c.sw.png b/translated_images/log.804026979f3707e00eebcfa028b2b5a88cec6292f858767bb6703afba65a7d9c.sw.png
new file mode 100644
index 00000000..1e0cd51e
Binary files /dev/null and b/translated_images/log.804026979f3707e00eebcfa028b2b5a88cec6292f858767bb6703afba65a7d9c.sw.png differ
diff --git a/translated_images/login-error.416fe019b36a63276764c2349df5d99e04ebda54fefe60c715ee87a28d5d4ad0.cs.png b/translated_images/login-error.416fe019b36a63276764c2349df5d99e04ebda54fefe60c715ee87a28d5d4ad0.cs.png
new file mode 100644
index 00000000..0a897e49
Binary files /dev/null and b/translated_images/login-error.416fe019b36a63276764c2349df5d99e04ebda54fefe60c715ee87a28d5d4ad0.cs.png differ
diff --git a/translated_images/login-error.416fe019b36a63276764c2349df5d99e04ebda54fefe60c715ee87a28d5d4ad0.hu.png b/translated_images/login-error.416fe019b36a63276764c2349df5d99e04ebda54fefe60c715ee87a28d5d4ad0.hu.png
new file mode 100644
index 00000000..f27972cb
Binary files /dev/null and b/translated_images/login-error.416fe019b36a63276764c2349df5d99e04ebda54fefe60c715ee87a28d5d4ad0.hu.png differ
diff --git a/translated_images/login-error.416fe019b36a63276764c2349df5d99e04ebda54fefe60c715ee87a28d5d4ad0.sw.png b/translated_images/login-error.416fe019b36a63276764c2349df5d99e04ebda54fefe60c715ee87a28d5d4ad0.sw.png
new file mode 100644
index 00000000..a15954f5
Binary files /dev/null and b/translated_images/login-error.416fe019b36a63276764c2349df5d99e04ebda54fefe60c715ee87a28d5d4ad0.sw.png differ
diff --git a/translated_images/meteorBig.1e452b3ad7af50adaafcbe25c82b2758be31cdff66d6b417b79f5453bf9ad3e0.cs.png b/translated_images/meteorBig.1e452b3ad7af50adaafcbe25c82b2758be31cdff66d6b417b79f5453bf9ad3e0.cs.png
new file mode 100644
index 00000000..b3cd5407
Binary files /dev/null and b/translated_images/meteorBig.1e452b3ad7af50adaafcbe25c82b2758be31cdff66d6b417b79f5453bf9ad3e0.cs.png differ
diff --git a/translated_images/meteorBig.1e452b3ad7af50adaafcbe25c82b2758be31cdff66d6b417b79f5453bf9ad3e0.hu.png b/translated_images/meteorBig.1e452b3ad7af50adaafcbe25c82b2758be31cdff66d6b417b79f5453bf9ad3e0.hu.png
new file mode 100644
index 00000000..b3cd5407
Binary files /dev/null and b/translated_images/meteorBig.1e452b3ad7af50adaafcbe25c82b2758be31cdff66d6b417b79f5453bf9ad3e0.hu.png differ
diff --git a/translated_images/meteorBig.1e452b3ad7af50adaafcbe25c82b2758be31cdff66d6b417b79f5453bf9ad3e0.sw.png b/translated_images/meteorBig.1e452b3ad7af50adaafcbe25c82b2758be31cdff66d6b417b79f5453bf9ad3e0.sw.png
new file mode 100644
index 00000000..b3cd5407
Binary files /dev/null and b/translated_images/meteorBig.1e452b3ad7af50adaafcbe25c82b2758be31cdff66d6b417b79f5453bf9ad3e0.sw.png differ
diff --git a/translated_images/meteorSmall.0d729bc71c12d41f26f077dfbecaccb9016e21e11dac7966e4f2de825e5de3b6.cs.png b/translated_images/meteorSmall.0d729bc71c12d41f26f077dfbecaccb9016e21e11dac7966e4f2de825e5de3b6.cs.png
new file mode 100644
index 00000000..a61e0e28
Binary files /dev/null and b/translated_images/meteorSmall.0d729bc71c12d41f26f077dfbecaccb9016e21e11dac7966e4f2de825e5de3b6.cs.png differ
diff --git a/translated_images/meteorSmall.0d729bc71c12d41f26f077dfbecaccb9016e21e11dac7966e4f2de825e5de3b6.hu.png b/translated_images/meteorSmall.0d729bc71c12d41f26f077dfbecaccb9016e21e11dac7966e4f2de825e5de3b6.hu.png
new file mode 100644
index 00000000..a61e0e28
Binary files /dev/null and b/translated_images/meteorSmall.0d729bc71c12d41f26f077dfbecaccb9016e21e11dac7966e4f2de825e5de3b6.hu.png differ
diff --git a/translated_images/meteorSmall.0d729bc71c12d41f26f077dfbecaccb9016e21e11dac7966e4f2de825e5de3b6.sw.png b/translated_images/meteorSmall.0d729bc71c12d41f26f077dfbecaccb9016e21e11dac7966e4f2de825e5de3b6.sw.png
new file mode 100644
index 00000000..a61e0e28
Binary files /dev/null and b/translated_images/meteorSmall.0d729bc71c12d41f26f077dfbecaccb9016e21e11dac7966e4f2de825e5de3b6.sw.png differ
diff --git a/translated_images/moodle.94eb93d714a50cb2c97435b408017dee224348b61bc86203ffd43a4f4e57b95f.cs.png b/translated_images/moodle.94eb93d714a50cb2c97435b408017dee224348b61bc86203ffd43a4f4e57b95f.cs.png
new file mode 100644
index 00000000..07bf7084
Binary files /dev/null and b/translated_images/moodle.94eb93d714a50cb2c97435b408017dee224348b61bc86203ffd43a4f4e57b95f.cs.png differ
diff --git a/translated_images/moodle.94eb93d714a50cb2c97435b408017dee224348b61bc86203ffd43a4f4e57b95f.hu.png b/translated_images/moodle.94eb93d714a50cb2c97435b408017dee224348b61bc86203ffd43a4f4e57b95f.hu.png
new file mode 100644
index 00000000..97f673bb
Binary files /dev/null and b/translated_images/moodle.94eb93d714a50cb2c97435b408017dee224348b61bc86203ffd43a4f4e57b95f.hu.png differ
diff --git a/translated_images/moodle.94eb93d714a50cb2c97435b408017dee224348b61bc86203ffd43a4f4e57b95f.sw.png b/translated_images/moodle.94eb93d714a50cb2c97435b408017dee224348b61bc86203ffd43a4f4e57b95f.sw.png
new file mode 100644
index 00000000..11a642a3
Binary files /dev/null and b/translated_images/moodle.94eb93d714a50cb2c97435b408017dee224348b61bc86203ffd43a4f4e57b95f.sw.png differ
diff --git a/translated_images/mpa.7f7375a1a2d4aa779d3f928a2aaaf9ad76bcdeb05cfce2dc27ab126024050f51.cs.png b/translated_images/mpa.7f7375a1a2d4aa779d3f928a2aaaf9ad76bcdeb05cfce2dc27ab126024050f51.cs.png
new file mode 100644
index 00000000..0e1eb720
Binary files /dev/null and b/translated_images/mpa.7f7375a1a2d4aa779d3f928a2aaaf9ad76bcdeb05cfce2dc27ab126024050f51.cs.png differ
diff --git a/translated_images/mpa.7f7375a1a2d4aa779d3f928a2aaaf9ad76bcdeb05cfce2dc27ab126024050f51.hu.png b/translated_images/mpa.7f7375a1a2d4aa779d3f928a2aaaf9ad76bcdeb05cfce2dc27ab126024050f51.hu.png
new file mode 100644
index 00000000..df19a278
Binary files /dev/null and b/translated_images/mpa.7f7375a1a2d4aa779d3f928a2aaaf9ad76bcdeb05cfce2dc27ab126024050f51.hu.png differ
diff --git a/translated_images/mpa.7f7375a1a2d4aa779d3f928a2aaaf9ad76bcdeb05cfce2dc27ab126024050f51.sw.png b/translated_images/mpa.7f7375a1a2d4aa779d3f928a2aaaf9ad76bcdeb05cfce2dc27ab126024050f51.sw.png
new file mode 100644
index 00000000..4f800fa9
Binary files /dev/null and b/translated_images/mpa.7f7375a1a2d4aa779d3f928a2aaaf9ad76bcdeb05cfce2dc27ab126024050f51.sw.png differ
diff --git a/translated_images/nebula.55c2933d36d035d359ef8d8422e7a7f260b3f6d15c026a18472bf8e71185d59c.cs.png b/translated_images/nebula.55c2933d36d035d359ef8d8422e7a7f260b3f6d15c026a18472bf8e71185d59c.cs.png
new file mode 100644
index 00000000..75523088
Binary files /dev/null and b/translated_images/nebula.55c2933d36d035d359ef8d8422e7a7f260b3f6d15c026a18472bf8e71185d59c.cs.png differ
diff --git a/translated_images/nebula.55c2933d36d035d359ef8d8422e7a7f260b3f6d15c026a18472bf8e71185d59c.hu.png b/translated_images/nebula.55c2933d36d035d359ef8d8422e7a7f260b3f6d15c026a18472bf8e71185d59c.hu.png
new file mode 100644
index 00000000..75523088
Binary files /dev/null and b/translated_images/nebula.55c2933d36d035d359ef8d8422e7a7f260b3f6d15c026a18472bf8e71185d59c.hu.png differ
diff --git a/translated_images/nebula.55c2933d36d035d359ef8d8422e7a7f260b3f6d15c026a18472bf8e71185d59c.sw.png b/translated_images/nebula.55c2933d36d035d359ef8d8422e7a7f260b3f6d15c026a18472bf8e71185d59c.sw.png
new file mode 100644
index 00000000..75523088
Binary files /dev/null and b/translated_images/nebula.55c2933d36d035d359ef8d8422e7a7f260b3f6d15c026a18472bf8e71185d59c.sw.png differ
diff --git a/translated_images/new-file-github.com.c886796d800e8056561829a181be1382c5303da9d902d8b2dd82b68a4806e21f.cs.png b/translated_images/new-file-github.com.c886796d800e8056561829a181be1382c5303da9d902d8b2dd82b68a4806e21f.cs.png
new file mode 100644
index 00000000..2f54a561
Binary files /dev/null and b/translated_images/new-file-github.com.c886796d800e8056561829a181be1382c5303da9d902d8b2dd82b68a4806e21f.cs.png differ
diff --git a/translated_images/new-file-github.com.c886796d800e8056561829a181be1382c5303da9d902d8b2dd82b68a4806e21f.hu.png b/translated_images/new-file-github.com.c886796d800e8056561829a181be1382c5303da9d902d8b2dd82b68a4806e21f.hu.png
new file mode 100644
index 00000000..87540075
Binary files /dev/null and b/translated_images/new-file-github.com.c886796d800e8056561829a181be1382c5303da9d902d8b2dd82b68a4806e21f.hu.png differ
diff --git a/translated_images/new-file-github.com.c886796d800e8056561829a181be1382c5303da9d902d8b2dd82b68a4806e21f.sw.png b/translated_images/new-file-github.com.c886796d800e8056561829a181be1382c5303da9d902d8b2dd82b68a4806e21f.sw.png
new file mode 100644
index 00000000..bfb6f5d8
Binary files /dev/null and b/translated_images/new-file-github.com.c886796d800e8056561829a181be1382c5303da9d902d8b2dd82b68a4806e21f.sw.png differ
diff --git a/translated_images/open-palette-menu.46dda01084738da84fc55100956fcc915f33e9de8c19813148ac3b1803871cff.cs.png b/translated_images/open-palette-menu.46dda01084738da84fc55100956fcc915f33e9de8c19813148ac3b1803871cff.cs.png
new file mode 100644
index 00000000..32ab60dc
Binary files /dev/null and b/translated_images/open-palette-menu.46dda01084738da84fc55100956fcc915f33e9de8c19813148ac3b1803871cff.cs.png differ
diff --git a/translated_images/open-palette-menu.46dda01084738da84fc55100956fcc915f33e9de8c19813148ac3b1803871cff.hu.png b/translated_images/open-palette-menu.46dda01084738da84fc55100956fcc915f33e9de8c19813148ac3b1803871cff.hu.png
new file mode 100644
index 00000000..d934d0f9
Binary files /dev/null and b/translated_images/open-palette-menu.46dda01084738da84fc55100956fcc915f33e9de8c19813148ac3b1803871cff.hu.png differ
diff --git a/translated_images/open-palette-menu.46dda01084738da84fc55100956fcc915f33e9de8c19813148ac3b1803871cff.sw.png b/translated_images/open-palette-menu.46dda01084738da84fc55100956fcc915f33e9de8c19813148ac3b1803871cff.sw.png
new file mode 100644
index 00000000..9213bbe5
Binary files /dev/null and b/translated_images/open-palette-menu.46dda01084738da84fc55100956fcc915f33e9de8c19813148ac3b1803871cff.sw.png differ
diff --git a/translated_images/open-remote-repository.bd9c2598b8949e7fc283cdfc8f4050c6205a7c7c6d3f78c4b135115d037d6fa2.cs.png b/translated_images/open-remote-repository.bd9c2598b8949e7fc283cdfc8f4050c6205a7c7c6d3f78c4b135115d037d6fa2.cs.png
new file mode 100644
index 00000000..2e552712
Binary files /dev/null and b/translated_images/open-remote-repository.bd9c2598b8949e7fc283cdfc8f4050c6205a7c7c6d3f78c4b135115d037d6fa2.cs.png differ
diff --git a/translated_images/open-remote-repository.bd9c2598b8949e7fc283cdfc8f4050c6205a7c7c6d3f78c4b135115d037d6fa2.hu.png b/translated_images/open-remote-repository.bd9c2598b8949e7fc283cdfc8f4050c6205a7c7c6d3f78c4b135115d037d6fa2.hu.png
new file mode 100644
index 00000000..ab7a8c2c
Binary files /dev/null and b/translated_images/open-remote-repository.bd9c2598b8949e7fc283cdfc8f4050c6205a7c7c6d3f78c4b135115d037d6fa2.hu.png differ
diff --git a/translated_images/open-remote-repository.bd9c2598b8949e7fc283cdfc8f4050c6205a7c7c6d3f78c4b135115d037d6fa2.sw.png b/translated_images/open-remote-repository.bd9c2598b8949e7fc283cdfc8f4050c6205a7c7c6d3f78c4b135115d037d6fa2.sw.png
new file mode 100644
index 00000000..94a3f6fd
Binary files /dev/null and b/translated_images/open-remote-repository.bd9c2598b8949e7fc283cdfc8f4050c6205a7c7c6d3f78c4b135115d037d6fa2.sw.png differ
diff --git a/translated_images/palette-menu.4946174e07f426226afcdad707d19b8d5150e41591c751c45b5dee213affef91.cs.png b/translated_images/palette-menu.4946174e07f426226afcdad707d19b8d5150e41591c751c45b5dee213affef91.cs.png
new file mode 100644
index 00000000..602ebb1c
Binary files /dev/null and b/translated_images/palette-menu.4946174e07f426226afcdad707d19b8d5150e41591c751c45b5dee213affef91.cs.png differ
diff --git a/translated_images/palette-menu.4946174e07f426226afcdad707d19b8d5150e41591c751c45b5dee213affef91.hu.png b/translated_images/palette-menu.4946174e07f426226afcdad707d19b8d5150e41591c751c45b5dee213affef91.hu.png
new file mode 100644
index 00000000..fba518be
Binary files /dev/null and b/translated_images/palette-menu.4946174e07f426226afcdad707d19b8d5150e41591c751c45b5dee213affef91.hu.png differ
diff --git a/translated_images/palette-menu.4946174e07f426226afcdad707d19b8d5150e41591c751c45b5dee213affef91.sw.png b/translated_images/palette-menu.4946174e07f426226afcdad707d19b8d5150e41591c751c45b5dee213affef91.sw.png
new file mode 100644
index 00000000..661eb2e2
Binary files /dev/null and b/translated_images/palette-menu.4946174e07f426226afcdad707d19b8d5150e41591c751c45b5dee213affef91.sw.png differ
diff --git a/translated_images/partI-solution.36c53b48c9ffae2a5e15496b23b604ba5393433e4bf91608a7a0a020eb7a2691.cs.png b/translated_images/partI-solution.36c53b48c9ffae2a5e15496b23b604ba5393433e4bf91608a7a0a020eb7a2691.cs.png
new file mode 100644
index 00000000..88783500
Binary files /dev/null and b/translated_images/partI-solution.36c53b48c9ffae2a5e15496b23b604ba5393433e4bf91608a7a0a020eb7a2691.cs.png differ
diff --git a/translated_images/partI-solution.36c53b48c9ffae2a5e15496b23b604ba5393433e4bf91608a7a0a020eb7a2691.hu.png b/translated_images/partI-solution.36c53b48c9ffae2a5e15496b23b604ba5393433e4bf91608a7a0a020eb7a2691.hu.png
new file mode 100644
index 00000000..88783500
Binary files /dev/null and b/translated_images/partI-solution.36c53b48c9ffae2a5e15496b23b604ba5393433e4bf91608a7a0a020eb7a2691.hu.png differ
diff --git a/translated_images/partI-solution.36c53b48c9ffae2a5e15496b23b604ba5393433e4bf91608a7a0a020eb7a2691.sw.png b/translated_images/partI-solution.36c53b48c9ffae2a5e15496b23b604ba5393433e4bf91608a7a0a020eb7a2691.sw.png
new file mode 100644
index 00000000..88783500
Binary files /dev/null and b/translated_images/partI-solution.36c53b48c9ffae2a5e15496b23b604ba5393433e4bf91608a7a0a020eb7a2691.sw.png differ
diff --git a/translated_images/plant1.a876180d8659acb9a51f95b2466b207b95dec201fafa23efcd4137fb62d0acb1.cs.png b/translated_images/plant1.a876180d8659acb9a51f95b2466b207b95dec201fafa23efcd4137fb62d0acb1.cs.png
new file mode 100644
index 00000000..0632233d
Binary files /dev/null and b/translated_images/plant1.a876180d8659acb9a51f95b2466b207b95dec201fafa23efcd4137fb62d0acb1.cs.png differ
diff --git a/translated_images/plant1.a876180d8659acb9a51f95b2466b207b95dec201fafa23efcd4137fb62d0acb1.hu.png b/translated_images/plant1.a876180d8659acb9a51f95b2466b207b95dec201fafa23efcd4137fb62d0acb1.hu.png
new file mode 100644
index 00000000..0632233d
Binary files /dev/null and b/translated_images/plant1.a876180d8659acb9a51f95b2466b207b95dec201fafa23efcd4137fb62d0acb1.hu.png differ
diff --git a/translated_images/plant1.a876180d8659acb9a51f95b2466b207b95dec201fafa23efcd4137fb62d0acb1.sw.png b/translated_images/plant1.a876180d8659acb9a51f95b2466b207b95dec201fafa23efcd4137fb62d0acb1.sw.png
new file mode 100644
index 00000000..0632233d
Binary files /dev/null and b/translated_images/plant1.a876180d8659acb9a51f95b2466b207b95dec201fafa23efcd4137fb62d0acb1.sw.png differ
diff --git a/translated_images/plant10.2f2c47804ae52dd3550b3f97782a76629d5819bba30e8a8b79933a9ccde606d4.cs.png b/translated_images/plant10.2f2c47804ae52dd3550b3f97782a76629d5819bba30e8a8b79933a9ccde606d4.cs.png
new file mode 100644
index 00000000..209ee5d2
Binary files /dev/null and b/translated_images/plant10.2f2c47804ae52dd3550b3f97782a76629d5819bba30e8a8b79933a9ccde606d4.cs.png differ
diff --git a/translated_images/plant10.2f2c47804ae52dd3550b3f97782a76629d5819bba30e8a8b79933a9ccde606d4.hu.png b/translated_images/plant10.2f2c47804ae52dd3550b3f97782a76629d5819bba30e8a8b79933a9ccde606d4.hu.png
new file mode 100644
index 00000000..209ee5d2
Binary files /dev/null and b/translated_images/plant10.2f2c47804ae52dd3550b3f97782a76629d5819bba30e8a8b79933a9ccde606d4.hu.png differ
diff --git a/translated_images/plant10.2f2c47804ae52dd3550b3f97782a76629d5819bba30e8a8b79933a9ccde606d4.sw.png b/translated_images/plant10.2f2c47804ae52dd3550b3f97782a76629d5819bba30e8a8b79933a9ccde606d4.sw.png
new file mode 100644
index 00000000..209ee5d2
Binary files /dev/null and b/translated_images/plant10.2f2c47804ae52dd3550b3f97782a76629d5819bba30e8a8b79933a9ccde606d4.sw.png differ
diff --git a/translated_images/plant11.0ce0081b0ef17aa1793cc5fe6d7de6f8cf7f8cfb24933c3c457386194fc10e77.cs.png b/translated_images/plant11.0ce0081b0ef17aa1793cc5fe6d7de6f8cf7f8cfb24933c3c457386194fc10e77.cs.png
new file mode 100644
index 00000000..201bec9e
Binary files /dev/null and b/translated_images/plant11.0ce0081b0ef17aa1793cc5fe6d7de6f8cf7f8cfb24933c3c457386194fc10e77.cs.png differ
diff --git a/translated_images/plant11.0ce0081b0ef17aa1793cc5fe6d7de6f8cf7f8cfb24933c3c457386194fc10e77.hu.png b/translated_images/plant11.0ce0081b0ef17aa1793cc5fe6d7de6f8cf7f8cfb24933c3c457386194fc10e77.hu.png
new file mode 100644
index 00000000..201bec9e
Binary files /dev/null and b/translated_images/plant11.0ce0081b0ef17aa1793cc5fe6d7de6f8cf7f8cfb24933c3c457386194fc10e77.hu.png differ
diff --git a/translated_images/plant11.0ce0081b0ef17aa1793cc5fe6d7de6f8cf7f8cfb24933c3c457386194fc10e77.sw.png b/translated_images/plant11.0ce0081b0ef17aa1793cc5fe6d7de6f8cf7f8cfb24933c3c457386194fc10e77.sw.png
new file mode 100644
index 00000000..201bec9e
Binary files /dev/null and b/translated_images/plant11.0ce0081b0ef17aa1793cc5fe6d7de6f8cf7f8cfb24933c3c457386194fc10e77.sw.png differ
diff --git a/translated_images/plant12.6b934c4312a00228719509ac56cd568ec45672bfdcc732bac7f42391035d606c.cs.png b/translated_images/plant12.6b934c4312a00228719509ac56cd568ec45672bfdcc732bac7f42391035d606c.cs.png
new file mode 100644
index 00000000..593e1573
Binary files /dev/null and b/translated_images/plant12.6b934c4312a00228719509ac56cd568ec45672bfdcc732bac7f42391035d606c.cs.png differ
diff --git a/translated_images/plant12.6b934c4312a00228719509ac56cd568ec45672bfdcc732bac7f42391035d606c.hu.png b/translated_images/plant12.6b934c4312a00228719509ac56cd568ec45672bfdcc732bac7f42391035d606c.hu.png
new file mode 100644
index 00000000..593e1573
Binary files /dev/null and b/translated_images/plant12.6b934c4312a00228719509ac56cd568ec45672bfdcc732bac7f42391035d606c.hu.png differ
diff --git a/translated_images/plant12.6b934c4312a00228719509ac56cd568ec45672bfdcc732bac7f42391035d606c.sw.png b/translated_images/plant12.6b934c4312a00228719509ac56cd568ec45672bfdcc732bac7f42391035d606c.sw.png
new file mode 100644
index 00000000..593e1573
Binary files /dev/null and b/translated_images/plant12.6b934c4312a00228719509ac56cd568ec45672bfdcc732bac7f42391035d606c.sw.png differ
diff --git a/translated_images/plant13.37d6ab2e2481421f0611f07685309cc07fe42d63e6abbaa963f972dbff7d176d.cs.png b/translated_images/plant13.37d6ab2e2481421f0611f07685309cc07fe42d63e6abbaa963f972dbff7d176d.cs.png
new file mode 100644
index 00000000..0f69b814
Binary files /dev/null and b/translated_images/plant13.37d6ab2e2481421f0611f07685309cc07fe42d63e6abbaa963f972dbff7d176d.cs.png differ
diff --git a/translated_images/plant13.37d6ab2e2481421f0611f07685309cc07fe42d63e6abbaa963f972dbff7d176d.hu.png b/translated_images/plant13.37d6ab2e2481421f0611f07685309cc07fe42d63e6abbaa963f972dbff7d176d.hu.png
new file mode 100644
index 00000000..0f69b814
Binary files /dev/null and b/translated_images/plant13.37d6ab2e2481421f0611f07685309cc07fe42d63e6abbaa963f972dbff7d176d.hu.png differ
diff --git a/translated_images/plant13.37d6ab2e2481421f0611f07685309cc07fe42d63e6abbaa963f972dbff7d176d.sw.png b/translated_images/plant13.37d6ab2e2481421f0611f07685309cc07fe42d63e6abbaa963f972dbff7d176d.sw.png
new file mode 100644
index 00000000..0f69b814
Binary files /dev/null and b/translated_images/plant13.37d6ab2e2481421f0611f07685309cc07fe42d63e6abbaa963f972dbff7d176d.sw.png differ
diff --git a/translated_images/plant14.908791477a46eb7f40a85155f53861fa5734be5075443b5c19f78e758f64d286.cs.png b/translated_images/plant14.908791477a46eb7f40a85155f53861fa5734be5075443b5c19f78e758f64d286.cs.png
new file mode 100644
index 00000000..221277ef
Binary files /dev/null and b/translated_images/plant14.908791477a46eb7f40a85155f53861fa5734be5075443b5c19f78e758f64d286.cs.png differ
diff --git a/translated_images/plant14.908791477a46eb7f40a85155f53861fa5734be5075443b5c19f78e758f64d286.hu.png b/translated_images/plant14.908791477a46eb7f40a85155f53861fa5734be5075443b5c19f78e758f64d286.hu.png
new file mode 100644
index 00000000..221277ef
Binary files /dev/null and b/translated_images/plant14.908791477a46eb7f40a85155f53861fa5734be5075443b5c19f78e758f64d286.hu.png differ
diff --git a/translated_images/plant14.908791477a46eb7f40a85155f53861fa5734be5075443b5c19f78e758f64d286.sw.png b/translated_images/plant14.908791477a46eb7f40a85155f53861fa5734be5075443b5c19f78e758f64d286.sw.png
new file mode 100644
index 00000000..221277ef
Binary files /dev/null and b/translated_images/plant14.908791477a46eb7f40a85155f53861fa5734be5075443b5c19f78e758f64d286.sw.png differ
diff --git a/translated_images/plant2.9e45efea224115b077fade85ce6871246bf85de20f419c57faed6b78e9ac7fcd.cs.png b/translated_images/plant2.9e45efea224115b077fade85ce6871246bf85de20f419c57faed6b78e9ac7fcd.cs.png
new file mode 100644
index 00000000..331ca68d
Binary files /dev/null and b/translated_images/plant2.9e45efea224115b077fade85ce6871246bf85de20f419c57faed6b78e9ac7fcd.cs.png differ
diff --git a/translated_images/plant2.9e45efea224115b077fade85ce6871246bf85de20f419c57faed6b78e9ac7fcd.hu.png b/translated_images/plant2.9e45efea224115b077fade85ce6871246bf85de20f419c57faed6b78e9ac7fcd.hu.png
new file mode 100644
index 00000000..331ca68d
Binary files /dev/null and b/translated_images/plant2.9e45efea224115b077fade85ce6871246bf85de20f419c57faed6b78e9ac7fcd.hu.png differ
diff --git a/translated_images/plant2.9e45efea224115b077fade85ce6871246bf85de20f419c57faed6b78e9ac7fcd.sw.png b/translated_images/plant2.9e45efea224115b077fade85ce6871246bf85de20f419c57faed6b78e9ac7fcd.sw.png
new file mode 100644
index 00000000..331ca68d
Binary files /dev/null and b/translated_images/plant2.9e45efea224115b077fade85ce6871246bf85de20f419c57faed6b78e9ac7fcd.sw.png differ
diff --git a/translated_images/plant3.06efdd0fa0c4b1152034312e11765b1a8fad48ebc00b72a3e7df657f66f45449.cs.png b/translated_images/plant3.06efdd0fa0c4b1152034312e11765b1a8fad48ebc00b72a3e7df657f66f45449.cs.png
new file mode 100644
index 00000000..d94bd097
Binary files /dev/null and b/translated_images/plant3.06efdd0fa0c4b1152034312e11765b1a8fad48ebc00b72a3e7df657f66f45449.cs.png differ
diff --git a/translated_images/plant3.06efdd0fa0c4b1152034312e11765b1a8fad48ebc00b72a3e7df657f66f45449.hu.png b/translated_images/plant3.06efdd0fa0c4b1152034312e11765b1a8fad48ebc00b72a3e7df657f66f45449.hu.png
new file mode 100644
index 00000000..d94bd097
Binary files /dev/null and b/translated_images/plant3.06efdd0fa0c4b1152034312e11765b1a8fad48ebc00b72a3e7df657f66f45449.hu.png differ
diff --git a/translated_images/plant3.06efdd0fa0c4b1152034312e11765b1a8fad48ebc00b72a3e7df657f66f45449.sw.png b/translated_images/plant3.06efdd0fa0c4b1152034312e11765b1a8fad48ebc00b72a3e7df657f66f45449.sw.png
new file mode 100644
index 00000000..d94bd097
Binary files /dev/null and b/translated_images/plant3.06efdd0fa0c4b1152034312e11765b1a8fad48ebc00b72a3e7df657f66f45449.sw.png differ
diff --git a/translated_images/plant4.3b78072b427727c6e6eb08eefc8451b248577412dd025002cefb707238e8bf46.cs.png b/translated_images/plant4.3b78072b427727c6e6eb08eefc8451b248577412dd025002cefb707238e8bf46.cs.png
new file mode 100644
index 00000000..c60f756c
Binary files /dev/null and b/translated_images/plant4.3b78072b427727c6e6eb08eefc8451b248577412dd025002cefb707238e8bf46.cs.png differ
diff --git a/translated_images/plant4.3b78072b427727c6e6eb08eefc8451b248577412dd025002cefb707238e8bf46.hu.png b/translated_images/plant4.3b78072b427727c6e6eb08eefc8451b248577412dd025002cefb707238e8bf46.hu.png
new file mode 100644
index 00000000..c60f756c
Binary files /dev/null and b/translated_images/plant4.3b78072b427727c6e6eb08eefc8451b248577412dd025002cefb707238e8bf46.hu.png differ
diff --git a/translated_images/plant4.3b78072b427727c6e6eb08eefc8451b248577412dd025002cefb707238e8bf46.sw.png b/translated_images/plant4.3b78072b427727c6e6eb08eefc8451b248577412dd025002cefb707238e8bf46.sw.png
new file mode 100644
index 00000000..c60f756c
Binary files /dev/null and b/translated_images/plant4.3b78072b427727c6e6eb08eefc8451b248577412dd025002cefb707238e8bf46.sw.png differ
diff --git a/translated_images/plant5.8ec58b18ac336fa8ec87ce1d5b433ee58c4918e67fdf0315d5407d80cbd97569.cs.png b/translated_images/plant5.8ec58b18ac336fa8ec87ce1d5b433ee58c4918e67fdf0315d5407d80cbd97569.cs.png
new file mode 100644
index 00000000..f2fe32fb
Binary files /dev/null and b/translated_images/plant5.8ec58b18ac336fa8ec87ce1d5b433ee58c4918e67fdf0315d5407d80cbd97569.cs.png differ
diff --git a/translated_images/plant5.8ec58b18ac336fa8ec87ce1d5b433ee58c4918e67fdf0315d5407d80cbd97569.hu.png b/translated_images/plant5.8ec58b18ac336fa8ec87ce1d5b433ee58c4918e67fdf0315d5407d80cbd97569.hu.png
new file mode 100644
index 00000000..f2fe32fb
Binary files /dev/null and b/translated_images/plant5.8ec58b18ac336fa8ec87ce1d5b433ee58c4918e67fdf0315d5407d80cbd97569.hu.png differ
diff --git a/translated_images/plant5.8ec58b18ac336fa8ec87ce1d5b433ee58c4918e67fdf0315d5407d80cbd97569.sw.png b/translated_images/plant5.8ec58b18ac336fa8ec87ce1d5b433ee58c4918e67fdf0315d5407d80cbd97569.sw.png
new file mode 100644
index 00000000..f2fe32fb
Binary files /dev/null and b/translated_images/plant5.8ec58b18ac336fa8ec87ce1d5b433ee58c4918e67fdf0315d5407d80cbd97569.sw.png differ
diff --git a/translated_images/plant6.ca4ff8372e6676b1ffed650fba21cb2af52c70df969a8203e57fb5bedd81e9f0.cs.png b/translated_images/plant6.ca4ff8372e6676b1ffed650fba21cb2af52c70df969a8203e57fb5bedd81e9f0.cs.png
new file mode 100644
index 00000000..82e0db0d
Binary files /dev/null and b/translated_images/plant6.ca4ff8372e6676b1ffed650fba21cb2af52c70df969a8203e57fb5bedd81e9f0.cs.png differ
diff --git a/translated_images/plant6.ca4ff8372e6676b1ffed650fba21cb2af52c70df969a8203e57fb5bedd81e9f0.hu.png b/translated_images/plant6.ca4ff8372e6676b1ffed650fba21cb2af52c70df969a8203e57fb5bedd81e9f0.hu.png
new file mode 100644
index 00000000..82e0db0d
Binary files /dev/null and b/translated_images/plant6.ca4ff8372e6676b1ffed650fba21cb2af52c70df969a8203e57fb5bedd81e9f0.hu.png differ
diff --git a/translated_images/plant6.ca4ff8372e6676b1ffed650fba21cb2af52c70df969a8203e57fb5bedd81e9f0.sw.png b/translated_images/plant6.ca4ff8372e6676b1ffed650fba21cb2af52c70df969a8203e57fb5bedd81e9f0.sw.png
new file mode 100644
index 00000000..82e0db0d
Binary files /dev/null and b/translated_images/plant6.ca4ff8372e6676b1ffed650fba21cb2af52c70df969a8203e57fb5bedd81e9f0.sw.png differ
diff --git a/translated_images/plant7.194d5a42fcf5a88c5dd4960c68e6f78707acdb4e21bf533a6a65f8d002ab660b.cs.png b/translated_images/plant7.194d5a42fcf5a88c5dd4960c68e6f78707acdb4e21bf533a6a65f8d002ab660b.cs.png
new file mode 100644
index 00000000..07cb7054
Binary files /dev/null and b/translated_images/plant7.194d5a42fcf5a88c5dd4960c68e6f78707acdb4e21bf533a6a65f8d002ab660b.cs.png differ
diff --git a/translated_images/plant7.194d5a42fcf5a88c5dd4960c68e6f78707acdb4e21bf533a6a65f8d002ab660b.hu.png b/translated_images/plant7.194d5a42fcf5a88c5dd4960c68e6f78707acdb4e21bf533a6a65f8d002ab660b.hu.png
new file mode 100644
index 00000000..07cb7054
Binary files /dev/null and b/translated_images/plant7.194d5a42fcf5a88c5dd4960c68e6f78707acdb4e21bf533a6a65f8d002ab660b.hu.png differ
diff --git a/translated_images/plant7.194d5a42fcf5a88c5dd4960c68e6f78707acdb4e21bf533a6a65f8d002ab660b.sw.png b/translated_images/plant7.194d5a42fcf5a88c5dd4960c68e6f78707acdb4e21bf533a6a65f8d002ab660b.sw.png
new file mode 100644
index 00000000..07cb7054
Binary files /dev/null and b/translated_images/plant7.194d5a42fcf5a88c5dd4960c68e6f78707acdb4e21bf533a6a65f8d002ab660b.sw.png differ
diff --git a/translated_images/plant8.7b247809ab0eb492105cac4f42b79ac771ce56e401fdf3df170b3b6ef03c5642.cs.png b/translated_images/plant8.7b247809ab0eb492105cac4f42b79ac771ce56e401fdf3df170b3b6ef03c5642.cs.png
new file mode 100644
index 00000000..a0d261a9
Binary files /dev/null and b/translated_images/plant8.7b247809ab0eb492105cac4f42b79ac771ce56e401fdf3df170b3b6ef03c5642.cs.png differ
diff --git a/translated_images/plant8.7b247809ab0eb492105cac4f42b79ac771ce56e401fdf3df170b3b6ef03c5642.hu.png b/translated_images/plant8.7b247809ab0eb492105cac4f42b79ac771ce56e401fdf3df170b3b6ef03c5642.hu.png
new file mode 100644
index 00000000..a0d261a9
Binary files /dev/null and b/translated_images/plant8.7b247809ab0eb492105cac4f42b79ac771ce56e401fdf3df170b3b6ef03c5642.hu.png differ
diff --git a/translated_images/plant8.7b247809ab0eb492105cac4f42b79ac771ce56e401fdf3df170b3b6ef03c5642.sw.png b/translated_images/plant8.7b247809ab0eb492105cac4f42b79ac771ce56e401fdf3df170b3b6ef03c5642.sw.png
new file mode 100644
index 00000000..a0d261a9
Binary files /dev/null and b/translated_images/plant8.7b247809ab0eb492105cac4f42b79ac771ce56e401fdf3df170b3b6ef03c5642.sw.png differ
diff --git a/translated_images/plant9.8fe614c01ded1b1ec05d1b4d6d527047b1ece5edba299c1c516aaf4b05eb19ed.cs.png b/translated_images/plant9.8fe614c01ded1b1ec05d1b4d6d527047b1ece5edba299c1c516aaf4b05eb19ed.cs.png
new file mode 100644
index 00000000..bc09a050
Binary files /dev/null and b/translated_images/plant9.8fe614c01ded1b1ec05d1b4d6d527047b1ece5edba299c1c516aaf4b05eb19ed.cs.png differ
diff --git a/translated_images/plant9.8fe614c01ded1b1ec05d1b4d6d527047b1ece5edba299c1c516aaf4b05eb19ed.hu.png b/translated_images/plant9.8fe614c01ded1b1ec05d1b4d6d527047b1ece5edba299c1c516aaf4b05eb19ed.hu.png
new file mode 100644
index 00000000..bc09a050
Binary files /dev/null and b/translated_images/plant9.8fe614c01ded1b1ec05d1b4d6d527047b1ece5edba299c1c516aaf4b05eb19ed.hu.png differ
diff --git a/translated_images/plant9.8fe614c01ded1b1ec05d1b4d6d527047b1ece5edba299c1c516aaf4b05eb19ed.sw.png b/translated_images/plant9.8fe614c01ded1b1ec05d1b4d6d527047b1ece5edba299c1c516aaf4b05eb19ed.sw.png
new file mode 100644
index 00000000..bc09a050
Binary files /dev/null and b/translated_images/plant9.8fe614c01ded1b1ec05d1b4d6d527047b1ece5edba299c1c516aaf4b05eb19ed.sw.png differ
diff --git a/translated_images/player.137ee0e47f895ffcdb50ba1b316936715ec8decfd6cee3258332a6c60e5d0d04.cs.png b/translated_images/player.137ee0e47f895ffcdb50ba1b316936715ec8decfd6cee3258332a6c60e5d0d04.cs.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.137ee0e47f895ffcdb50ba1b316936715ec8decfd6cee3258332a6c60e5d0d04.cs.png differ
diff --git a/translated_images/player.137ee0e47f895ffcdb50ba1b316936715ec8decfd6cee3258332a6c60e5d0d04.hu.png b/translated_images/player.137ee0e47f895ffcdb50ba1b316936715ec8decfd6cee3258332a6c60e5d0d04.hu.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.137ee0e47f895ffcdb50ba1b316936715ec8decfd6cee3258332a6c60e5d0d04.hu.png differ
diff --git a/translated_images/player.137ee0e47f895ffcdb50ba1b316936715ec8decfd6cee3258332a6c60e5d0d04.sw.png b/translated_images/player.137ee0e47f895ffcdb50ba1b316936715ec8decfd6cee3258332a6c60e5d0d04.sw.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.137ee0e47f895ffcdb50ba1b316936715ec8decfd6cee3258332a6c60e5d0d04.sw.png differ
diff --git a/translated_images/player.2887422f6982c3cd284b2bafd7551ff073a7b7b8a66edd2f0c2c722f94acfd5c.cs.png b/translated_images/player.2887422f6982c3cd284b2bafd7551ff073a7b7b8a66edd2f0c2c722f94acfd5c.cs.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.2887422f6982c3cd284b2bafd7551ff073a7b7b8a66edd2f0c2c722f94acfd5c.cs.png differ
diff --git a/translated_images/player.2887422f6982c3cd284b2bafd7551ff073a7b7b8a66edd2f0c2c722f94acfd5c.hu.png b/translated_images/player.2887422f6982c3cd284b2bafd7551ff073a7b7b8a66edd2f0c2c722f94acfd5c.hu.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.2887422f6982c3cd284b2bafd7551ff073a7b7b8a66edd2f0c2c722f94acfd5c.hu.png differ
diff --git a/translated_images/player.2887422f6982c3cd284b2bafd7551ff073a7b7b8a66edd2f0c2c722f94acfd5c.sw.png b/translated_images/player.2887422f6982c3cd284b2bafd7551ff073a7b7b8a66edd2f0c2c722f94acfd5c.sw.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.2887422f6982c3cd284b2bafd7551ff073a7b7b8a66edd2f0c2c722f94acfd5c.sw.png differ
diff --git a/translated_images/player.391fed427ede24f513d4b559cff8ff60f00818b31c81268b783a7f89054fda90.cs.png b/translated_images/player.391fed427ede24f513d4b559cff8ff60f00818b31c81268b783a7f89054fda90.cs.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.391fed427ede24f513d4b559cff8ff60f00818b31c81268b783a7f89054fda90.cs.png differ
diff --git a/translated_images/player.391fed427ede24f513d4b559cff8ff60f00818b31c81268b783a7f89054fda90.hu.png b/translated_images/player.391fed427ede24f513d4b559cff8ff60f00818b31c81268b783a7f89054fda90.hu.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.391fed427ede24f513d4b559cff8ff60f00818b31c81268b783a7f89054fda90.hu.png differ
diff --git a/translated_images/player.391fed427ede24f513d4b559cff8ff60f00818b31c81268b783a7f89054fda90.sw.png b/translated_images/player.391fed427ede24f513d4b559cff8ff60f00818b31c81268b783a7f89054fda90.sw.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.391fed427ede24f513d4b559cff8ff60f00818b31c81268b783a7f89054fda90.sw.png differ
diff --git a/translated_images/player.3c4f50182552a73a2b22542c75209c57231da2f51d88d571f198382e2fb3b45b.cs.png b/translated_images/player.3c4f50182552a73a2b22542c75209c57231da2f51d88d571f198382e2fb3b45b.cs.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.3c4f50182552a73a2b22542c75209c57231da2f51d88d571f198382e2fb3b45b.cs.png differ
diff --git a/translated_images/player.3c4f50182552a73a2b22542c75209c57231da2f51d88d571f198382e2fb3b45b.hu.png b/translated_images/player.3c4f50182552a73a2b22542c75209c57231da2f51d88d571f198382e2fb3b45b.hu.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.3c4f50182552a73a2b22542c75209c57231da2f51d88d571f198382e2fb3b45b.hu.png differ
diff --git a/translated_images/player.3c4f50182552a73a2b22542c75209c57231da2f51d88d571f198382e2fb3b45b.sw.png b/translated_images/player.3c4f50182552a73a2b22542c75209c57231da2f51d88d571f198382e2fb3b45b.sw.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.3c4f50182552a73a2b22542c75209c57231da2f51d88d571f198382e2fb3b45b.sw.png differ
diff --git a/translated_images/player.47bc9de0714c723dfe0705c328fb8769de71c87b99d340921c2247674d9d631a.cs.png b/translated_images/player.47bc9de0714c723dfe0705c328fb8769de71c87b99d340921c2247674d9d631a.cs.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.47bc9de0714c723dfe0705c328fb8769de71c87b99d340921c2247674d9d631a.cs.png differ
diff --git a/translated_images/player.47bc9de0714c723dfe0705c328fb8769de71c87b99d340921c2247674d9d631a.hu.png b/translated_images/player.47bc9de0714c723dfe0705c328fb8769de71c87b99d340921c2247674d9d631a.hu.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.47bc9de0714c723dfe0705c328fb8769de71c87b99d340921c2247674d9d631a.hu.png differ
diff --git a/translated_images/player.47bc9de0714c723dfe0705c328fb8769de71c87b99d340921c2247674d9d631a.sw.png b/translated_images/player.47bc9de0714c723dfe0705c328fb8769de71c87b99d340921c2247674d9d631a.sw.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.47bc9de0714c723dfe0705c328fb8769de71c87b99d340921c2247674d9d631a.sw.png differ
diff --git a/translated_images/player.57b3107c03012695cedb271fdda06900e2d0d9580ae5fab5c563fdb029ba8584.cs.png b/translated_images/player.57b3107c03012695cedb271fdda06900e2d0d9580ae5fab5c563fdb029ba8584.cs.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.57b3107c03012695cedb271fdda06900e2d0d9580ae5fab5c563fdb029ba8584.cs.png differ
diff --git a/translated_images/player.57b3107c03012695cedb271fdda06900e2d0d9580ae5fab5c563fdb029ba8584.hu.png b/translated_images/player.57b3107c03012695cedb271fdda06900e2d0d9580ae5fab5c563fdb029ba8584.hu.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.57b3107c03012695cedb271fdda06900e2d0d9580ae5fab5c563fdb029ba8584.hu.png differ
diff --git a/translated_images/player.57b3107c03012695cedb271fdda06900e2d0d9580ae5fab5c563fdb029ba8584.sw.png b/translated_images/player.57b3107c03012695cedb271fdda06900e2d0d9580ae5fab5c563fdb029ba8584.sw.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.57b3107c03012695cedb271fdda06900e2d0d9580ae5fab5c563fdb029ba8584.sw.png differ
diff --git a/translated_images/player.606f85953e5e564e7711d22697724750fdcc661d5f7c5295e2da7e46905fd322.cs.png b/translated_images/player.606f85953e5e564e7711d22697724750fdcc661d5f7c5295e2da7e46905fd322.cs.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.606f85953e5e564e7711d22697724750fdcc661d5f7c5295e2da7e46905fd322.cs.png differ
diff --git a/translated_images/player.606f85953e5e564e7711d22697724750fdcc661d5f7c5295e2da7e46905fd322.hu.png b/translated_images/player.606f85953e5e564e7711d22697724750fdcc661d5f7c5295e2da7e46905fd322.hu.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.606f85953e5e564e7711d22697724750fdcc661d5f7c5295e2da7e46905fd322.hu.png differ
diff --git a/translated_images/player.606f85953e5e564e7711d22697724750fdcc661d5f7c5295e2da7e46905fd322.sw.png b/translated_images/player.606f85953e5e564e7711d22697724750fdcc661d5f7c5295e2da7e46905fd322.sw.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.606f85953e5e564e7711d22697724750fdcc661d5f7c5295e2da7e46905fd322.sw.png differ
diff --git a/translated_images/player.680ea4c619b54fe160261abdfe2e68139dedacb8d884b6cb405b9a6ab162940d.cs.png b/translated_images/player.680ea4c619b54fe160261abdfe2e68139dedacb8d884b6cb405b9a6ab162940d.cs.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.680ea4c619b54fe160261abdfe2e68139dedacb8d884b6cb405b9a6ab162940d.cs.png differ
diff --git a/translated_images/player.680ea4c619b54fe160261abdfe2e68139dedacb8d884b6cb405b9a6ab162940d.hu.png b/translated_images/player.680ea4c619b54fe160261abdfe2e68139dedacb8d884b6cb405b9a6ab162940d.hu.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.680ea4c619b54fe160261abdfe2e68139dedacb8d884b6cb405b9a6ab162940d.hu.png differ
diff --git a/translated_images/player.680ea4c619b54fe160261abdfe2e68139dedacb8d884b6cb405b9a6ab162940d.sw.png b/translated_images/player.680ea4c619b54fe160261abdfe2e68139dedacb8d884b6cb405b9a6ab162940d.sw.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.680ea4c619b54fe160261abdfe2e68139dedacb8d884b6cb405b9a6ab162940d.sw.png differ
diff --git a/translated_images/player.bfe14f110bddf56d10a1989066d170af2ce6b1412626c37a7e184963e54c7ef4.cs.png b/translated_images/player.bfe14f110bddf56d10a1989066d170af2ce6b1412626c37a7e184963e54c7ef4.cs.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.bfe14f110bddf56d10a1989066d170af2ce6b1412626c37a7e184963e54c7ef4.cs.png differ
diff --git a/translated_images/player.bfe14f110bddf56d10a1989066d170af2ce6b1412626c37a7e184963e54c7ef4.hu.png b/translated_images/player.bfe14f110bddf56d10a1989066d170af2ce6b1412626c37a7e184963e54c7ef4.hu.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.bfe14f110bddf56d10a1989066d170af2ce6b1412626c37a7e184963e54c7ef4.hu.png differ
diff --git a/translated_images/player.bfe14f110bddf56d10a1989066d170af2ce6b1412626c37a7e184963e54c7ef4.sw.png b/translated_images/player.bfe14f110bddf56d10a1989066d170af2ce6b1412626c37a7e184963e54c7ef4.sw.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.bfe14f110bddf56d10a1989066d170af2ce6b1412626c37a7e184963e54c7ef4.sw.png differ
diff --git a/translated_images/player.c99c25d54a615ca088fc55515a6ee76c766fba0e31b167816062f3ab3d22fbcd.cs.png b/translated_images/player.c99c25d54a615ca088fc55515a6ee76c766fba0e31b167816062f3ab3d22fbcd.cs.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.c99c25d54a615ca088fc55515a6ee76c766fba0e31b167816062f3ab3d22fbcd.cs.png differ
diff --git a/translated_images/player.c99c25d54a615ca088fc55515a6ee76c766fba0e31b167816062f3ab3d22fbcd.hu.png b/translated_images/player.c99c25d54a615ca088fc55515a6ee76c766fba0e31b167816062f3ab3d22fbcd.hu.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.c99c25d54a615ca088fc55515a6ee76c766fba0e31b167816062f3ab3d22fbcd.hu.png differ
diff --git a/translated_images/player.c99c25d54a615ca088fc55515a6ee76c766fba0e31b167816062f3ab3d22fbcd.sw.png b/translated_images/player.c99c25d54a615ca088fc55515a6ee76c766fba0e31b167816062f3ab3d22fbcd.sw.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.c99c25d54a615ca088fc55515a6ee76c766fba0e31b167816062f3ab3d22fbcd.sw.png differ
diff --git a/translated_images/player.dd24c1afa8c71e9b82b2958946d4bad13308681392d4b5ddcc61a0e818ef8088.cs.png b/translated_images/player.dd24c1afa8c71e9b82b2958946d4bad13308681392d4b5ddcc61a0e818ef8088.cs.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.dd24c1afa8c71e9b82b2958946d4bad13308681392d4b5ddcc61a0e818ef8088.cs.png differ
diff --git a/translated_images/player.dd24c1afa8c71e9b82b2958946d4bad13308681392d4b5ddcc61a0e818ef8088.hu.png b/translated_images/player.dd24c1afa8c71e9b82b2958946d4bad13308681392d4b5ddcc61a0e818ef8088.hu.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.dd24c1afa8c71e9b82b2958946d4bad13308681392d4b5ddcc61a0e818ef8088.hu.png differ
diff --git a/translated_images/player.dd24c1afa8c71e9b82b2958946d4bad13308681392d4b5ddcc61a0e818ef8088.sw.png b/translated_images/player.dd24c1afa8c71e9b82b2958946d4bad13308681392d4b5ddcc61a0e818ef8088.sw.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.dd24c1afa8c71e9b82b2958946d4bad13308681392d4b5ddcc61a0e818ef8088.sw.png differ
diff --git a/translated_images/playerDamaged.181703f652fd5176d25dbc286cdab2b79c9d7470dfd95af344dbb024780b6176.cs.png b/translated_images/playerDamaged.181703f652fd5176d25dbc286cdab2b79c9d7470dfd95af344dbb024780b6176.cs.png
new file mode 100644
index 00000000..91d73b26
Binary files /dev/null and b/translated_images/playerDamaged.181703f652fd5176d25dbc286cdab2b79c9d7470dfd95af344dbb024780b6176.cs.png differ
diff --git a/translated_images/playerDamaged.181703f652fd5176d25dbc286cdab2b79c9d7470dfd95af344dbb024780b6176.hu.png b/translated_images/playerDamaged.181703f652fd5176d25dbc286cdab2b79c9d7470dfd95af344dbb024780b6176.hu.png
new file mode 100644
index 00000000..91d73b26
Binary files /dev/null and b/translated_images/playerDamaged.181703f652fd5176d25dbc286cdab2b79c9d7470dfd95af344dbb024780b6176.hu.png differ
diff --git a/translated_images/playerDamaged.181703f652fd5176d25dbc286cdab2b79c9d7470dfd95af344dbb024780b6176.sw.png b/translated_images/playerDamaged.181703f652fd5176d25dbc286cdab2b79c9d7470dfd95af344dbb024780b6176.sw.png
new file mode 100644
index 00000000..91d73b26
Binary files /dev/null and b/translated_images/playerDamaged.181703f652fd5176d25dbc286cdab2b79c9d7470dfd95af344dbb024780b6176.sw.png differ
diff --git a/translated_images/playerLeft.0f928412e66ba5d9455ccc99ef113088d2510843b23f8dbcd3106425b221979f.cs.png b/translated_images/playerLeft.0f928412e66ba5d9455ccc99ef113088d2510843b23f8dbcd3106425b221979f.cs.png
new file mode 100644
index 00000000..941cd3ac
Binary files /dev/null and b/translated_images/playerLeft.0f928412e66ba5d9455ccc99ef113088d2510843b23f8dbcd3106425b221979f.cs.png differ
diff --git a/translated_images/playerLeft.0f928412e66ba5d9455ccc99ef113088d2510843b23f8dbcd3106425b221979f.hu.png b/translated_images/playerLeft.0f928412e66ba5d9455ccc99ef113088d2510843b23f8dbcd3106425b221979f.hu.png
new file mode 100644
index 00000000..941cd3ac
Binary files /dev/null and b/translated_images/playerLeft.0f928412e66ba5d9455ccc99ef113088d2510843b23f8dbcd3106425b221979f.hu.png differ
diff --git a/translated_images/playerLeft.0f928412e66ba5d9455ccc99ef113088d2510843b23f8dbcd3106425b221979f.sw.png b/translated_images/playerLeft.0f928412e66ba5d9455ccc99ef113088d2510843b23f8dbcd3106425b221979f.sw.png
new file mode 100644
index 00000000..941cd3ac
Binary files /dev/null and b/translated_images/playerLeft.0f928412e66ba5d9455ccc99ef113088d2510843b23f8dbcd3106425b221979f.sw.png differ
diff --git a/translated_images/playerRight.e4825f489e29f73719f8e3197ba0e5742e2ffbc178641009b57fe254c6abdc38.cs.png b/translated_images/playerRight.e4825f489e29f73719f8e3197ba0e5742e2ffbc178641009b57fe254c6abdc38.cs.png
new file mode 100644
index 00000000..4e69314c
Binary files /dev/null and b/translated_images/playerRight.e4825f489e29f73719f8e3197ba0e5742e2ffbc178641009b57fe254c6abdc38.cs.png differ
diff --git a/translated_images/playerRight.e4825f489e29f73719f8e3197ba0e5742e2ffbc178641009b57fe254c6abdc38.hu.png b/translated_images/playerRight.e4825f489e29f73719f8e3197ba0e5742e2ffbc178641009b57fe254c6abdc38.hu.png
new file mode 100644
index 00000000..4e69314c
Binary files /dev/null and b/translated_images/playerRight.e4825f489e29f73719f8e3197ba0e5742e2ffbc178641009b57fe254c6abdc38.hu.png differ
diff --git a/translated_images/playerRight.e4825f489e29f73719f8e3197ba0e5742e2ffbc178641009b57fe254c6abdc38.sw.png b/translated_images/playerRight.e4825f489e29f73719f8e3197ba0e5742e2ffbc178641009b57fe254c6abdc38.sw.png
new file mode 100644
index 00000000..4e69314c
Binary files /dev/null and b/translated_images/playerRight.e4825f489e29f73719f8e3197ba0e5742e2ffbc178641009b57fe254c6abdc38.sw.png differ
diff --git a/translated_images/preview.9215f0a010074476f8ab66e6becf3c1b594a30cca0a28b88fb4f3f4821594dc0.cs.jpg b/translated_images/preview.9215f0a010074476f8ab66e6becf3c1b594a30cca0a28b88fb4f3f4821594dc0.cs.jpg
new file mode 100644
index 00000000..dede46e4
Binary files /dev/null and b/translated_images/preview.9215f0a010074476f8ab66e6becf3c1b594a30cca0a28b88fb4f3f4821594dc0.cs.jpg differ
diff --git a/translated_images/preview.9215f0a010074476f8ab66e6becf3c1b594a30cca0a28b88fb4f3f4821594dc0.hu.jpg b/translated_images/preview.9215f0a010074476f8ab66e6becf3c1b594a30cca0a28b88fb4f3f4821594dc0.hu.jpg
new file mode 100644
index 00000000..3f5b491f
Binary files /dev/null and b/translated_images/preview.9215f0a010074476f8ab66e6becf3c1b594a30cca0a28b88fb4f3f4821594dc0.hu.jpg differ
diff --git a/translated_images/preview.9215f0a010074476f8ab66e6becf3c1b594a30cca0a28b88fb4f3f4821594dc0.sw.jpg b/translated_images/preview.9215f0a010074476f8ab66e6becf3c1b594a30cca0a28b88fb4f3f4821594dc0.sw.jpg
new file mode 100644
index 00000000..4ba14288
Binary files /dev/null and b/translated_images/preview.9215f0a010074476f8ab66e6becf3c1b594a30cca0a28b88fb4f3f4821594dc0.sw.jpg differ
diff --git a/translated_images/profiler.5a4a62479c5df01cfec9aab74173dba13f91d2c968e1a1ae434c26165792df15.cs.png b/translated_images/profiler.5a4a62479c5df01cfec9aab74173dba13f91d2c968e1a1ae434c26165792df15.cs.png
new file mode 100644
index 00000000..ee9179ba
Binary files /dev/null and b/translated_images/profiler.5a4a62479c5df01cfec9aab74173dba13f91d2c968e1a1ae434c26165792df15.cs.png differ
diff --git a/translated_images/profiler.5a4a62479c5df01cfec9aab74173dba13f91d2c968e1a1ae434c26165792df15.hu.png b/translated_images/profiler.5a4a62479c5df01cfec9aab74173dba13f91d2c968e1a1ae434c26165792df15.hu.png
new file mode 100644
index 00000000..940425a1
Binary files /dev/null and b/translated_images/profiler.5a4a62479c5df01cfec9aab74173dba13f91d2c968e1a1ae434c26165792df15.hu.png differ
diff --git a/translated_images/profiler.5a4a62479c5df01cfec9aab74173dba13f91d2c968e1a1ae434c26165792df15.sw.png b/translated_images/profiler.5a4a62479c5df01cfec9aab74173dba13f91d2c968e1a1ae434c26165792df15.sw.png
new file mode 100644
index 00000000..16e6cb3b
Binary files /dev/null and b/translated_images/profiler.5a4a62479c5df01cfec9aab74173dba13f91d2c968e1a1ae434c26165792df15.sw.png differ
diff --git a/translated_images/project-on-vscode.dev.e79815a9a95ee7feac72ebe5c941c91279716be37c575dbdbf2f43bea2c7d8b6.cs.png b/translated_images/project-on-vscode.dev.e79815a9a95ee7feac72ebe5c941c91279716be37c575dbdbf2f43bea2c7d8b6.cs.png
new file mode 100644
index 00000000..dd282d86
Binary files /dev/null and b/translated_images/project-on-vscode.dev.e79815a9a95ee7feac72ebe5c941c91279716be37c575dbdbf2f43bea2c7d8b6.cs.png differ
diff --git a/translated_images/project-on-vscode.dev.e79815a9a95ee7feac72ebe5c941c91279716be37c575dbdbf2f43bea2c7d8b6.hu.png b/translated_images/project-on-vscode.dev.e79815a9a95ee7feac72ebe5c941c91279716be37c575dbdbf2f43bea2c7d8b6.hu.png
new file mode 100644
index 00000000..f11615b1
Binary files /dev/null and b/translated_images/project-on-vscode.dev.e79815a9a95ee7feac72ebe5c941c91279716be37c575dbdbf2f43bea2c7d8b6.hu.png differ
diff --git a/translated_images/project-on-vscode.dev.e79815a9a95ee7feac72ebe5c941c91279716be37c575dbdbf2f43bea2c7d8b6.sw.png b/translated_images/project-on-vscode.dev.e79815a9a95ee7feac72ebe5c941c91279716be37c575dbdbf2f43bea2c7d8b6.sw.png
new file mode 100644
index 00000000..71097348
Binary files /dev/null and b/translated_images/project-on-vscode.dev.e79815a9a95ee7feac72ebe5c941c91279716be37c575dbdbf2f43bea2c7d8b6.sw.png differ
diff --git a/translated_images/result.96ef01f607bf856aa9789078633e94a4f7664d912f235efce2657299becca483.cs.png b/translated_images/result.96ef01f607bf856aa9789078633e94a4f7664d912f235efce2657299becca483.cs.png
new file mode 100644
index 00000000..87fb47c9
Binary files /dev/null and b/translated_images/result.96ef01f607bf856aa9789078633e94a4f7664d912f235efce2657299becca483.cs.png differ
diff --git a/translated_images/result.96ef01f607bf856aa9789078633e94a4f7664d912f235efce2657299becca483.hu.png b/translated_images/result.96ef01f607bf856aa9789078633e94a4f7664d912f235efce2657299becca483.hu.png
new file mode 100644
index 00000000..046ff620
Binary files /dev/null and b/translated_images/result.96ef01f607bf856aa9789078633e94a4f7664d912f235efce2657299becca483.hu.png differ
diff --git a/translated_images/result.96ef01f607bf856aa9789078633e94a4f7664d912f235efce2657299becca483.sw.png b/translated_images/result.96ef01f607bf856aa9789078633e94a4f7664d912f235efce2657299becca483.sw.png
new file mode 100644
index 00000000..a6448812
Binary files /dev/null and b/translated_images/result.96ef01f607bf856aa9789078633e94a4f7664d912f235efce2657299becca483.sw.png differ
diff --git a/translated_images/screen1.baccbba0f1f93364672eb250d2fbd21574bb1caf79a2155022dc098a741cbdfe.cs.png b/translated_images/screen1.baccbba0f1f93364672eb250d2fbd21574bb1caf79a2155022dc098a741cbdfe.cs.png
new file mode 100644
index 00000000..9cf0bb02
Binary files /dev/null and b/translated_images/screen1.baccbba0f1f93364672eb250d2fbd21574bb1caf79a2155022dc098a741cbdfe.cs.png differ
diff --git a/translated_images/screen1.baccbba0f1f93364672eb250d2fbd21574bb1caf79a2155022dc098a741cbdfe.hu.png b/translated_images/screen1.baccbba0f1f93364672eb250d2fbd21574bb1caf79a2155022dc098a741cbdfe.hu.png
new file mode 100644
index 00000000..b7adc9b3
Binary files /dev/null and b/translated_images/screen1.baccbba0f1f93364672eb250d2fbd21574bb1caf79a2155022dc098a741cbdfe.hu.png differ
diff --git a/translated_images/screen1.baccbba0f1f93364672eb250d2fbd21574bb1caf79a2155022dc098a741cbdfe.sw.png b/translated_images/screen1.baccbba0f1f93364672eb250d2fbd21574bb1caf79a2155022dc098a741cbdfe.sw.png
new file mode 100644
index 00000000..354639ab
Binary files /dev/null and b/translated_images/screen1.baccbba0f1f93364672eb250d2fbd21574bb1caf79a2155022dc098a741cbdfe.sw.png differ
diff --git a/translated_images/screen2.123c82a831a1d14ab2061994be2fa5de9cec1ce651047217d326d4773a6348e4.cs.png b/translated_images/screen2.123c82a831a1d14ab2061994be2fa5de9cec1ce651047217d326d4773a6348e4.cs.png
new file mode 100644
index 00000000..ebc6cbb4
Binary files /dev/null and b/translated_images/screen2.123c82a831a1d14ab2061994be2fa5de9cec1ce651047217d326d4773a6348e4.cs.png differ
diff --git a/translated_images/screen2.123c82a831a1d14ab2061994be2fa5de9cec1ce651047217d326d4773a6348e4.hu.png b/translated_images/screen2.123c82a831a1d14ab2061994be2fa5de9cec1ce651047217d326d4773a6348e4.hu.png
new file mode 100644
index 00000000..ea4db91b
Binary files /dev/null and b/translated_images/screen2.123c82a831a1d14ab2061994be2fa5de9cec1ce651047217d326d4773a6348e4.hu.png differ
diff --git a/translated_images/screen2.123c82a831a1d14ab2061994be2fa5de9cec1ce651047217d326d4773a6348e4.sw.png b/translated_images/screen2.123c82a831a1d14ab2061994be2fa5de9cec1ce651047217d326d4773a6348e4.sw.png
new file mode 100644
index 00000000..6d36eb56
Binary files /dev/null and b/translated_images/screen2.123c82a831a1d14ab2061994be2fa5de9cec1ce651047217d326d4773a6348e4.sw.png differ
diff --git a/translated_images/screenshot.e7a5ad659e3645682a7d44bd944af8147012dc403b4965712a052214b42e77c1.cs.png b/translated_images/screenshot.e7a5ad659e3645682a7d44bd944af8147012dc403b4965712a052214b42e77c1.cs.png
new file mode 100644
index 00000000..b820ef94
Binary files /dev/null and b/translated_images/screenshot.e7a5ad659e3645682a7d44bd944af8147012dc403b4965712a052214b42e77c1.cs.png differ
diff --git a/translated_images/screenshot.e7a5ad659e3645682a7d44bd944af8147012dc403b4965712a052214b42e77c1.hu.png b/translated_images/screenshot.e7a5ad659e3645682a7d44bd944af8147012dc403b4965712a052214b42e77c1.hu.png
new file mode 100644
index 00000000..f570215a
Binary files /dev/null and b/translated_images/screenshot.e7a5ad659e3645682a7d44bd944af8147012dc403b4965712a052214b42e77c1.hu.png differ
diff --git a/translated_images/screenshot.e7a5ad659e3645682a7d44bd944af8147012dc403b4965712a052214b42e77c1.sw.png b/translated_images/screenshot.e7a5ad659e3645682a7d44bd944af8147012dc403b4965712a052214b42e77c1.sw.png
new file mode 100644
index 00000000..91cf2ab3
Binary files /dev/null and b/translated_images/screenshot.e7a5ad659e3645682a7d44bd944af8147012dc403b4965712a052214b42e77c1.sw.png differ
diff --git a/translated_images/screenshot_gray.0c796099a1f9f25e40aa55ead81f268434c00af30d7092490759945eda63067d.cs.png b/translated_images/screenshot_gray.0c796099a1f9f25e40aa55ead81f268434c00af30d7092490759945eda63067d.cs.png
new file mode 100644
index 00000000..704a8221
Binary files /dev/null and b/translated_images/screenshot_gray.0c796099a1f9f25e40aa55ead81f268434c00af30d7092490759945eda63067d.cs.png differ
diff --git a/translated_images/screenshot_gray.0c796099a1f9f25e40aa55ead81f268434c00af30d7092490759945eda63067d.hu.png b/translated_images/screenshot_gray.0c796099a1f9f25e40aa55ead81f268434c00af30d7092490759945eda63067d.hu.png
new file mode 100644
index 00000000..d063bfe0
Binary files /dev/null and b/translated_images/screenshot_gray.0c796099a1f9f25e40aa55ead81f268434c00af30d7092490759945eda63067d.hu.png differ
diff --git a/translated_images/screenshot_gray.0c796099a1f9f25e40aa55ead81f268434c00af30d7092490759945eda63067d.sw.png b/translated_images/screenshot_gray.0c796099a1f9f25e40aa55ead81f268434c00af30d7092490759945eda63067d.sw.png
new file mode 100644
index 00000000..4a51d959
Binary files /dev/null and b/translated_images/screenshot_gray.0c796099a1f9f25e40aa55ead81f268434c00af30d7092490759945eda63067d.sw.png differ
diff --git a/translated_images/shield.1b9412b7ca6610ab21f8836483f4e1ec7835b7fe61617f2cead3ff3317ddd56f.cs.png b/translated_images/shield.1b9412b7ca6610ab21f8836483f4e1ec7835b7fe61617f2cead3ff3317ddd56f.cs.png
new file mode 100644
index 00000000..b962a2f1
Binary files /dev/null and b/translated_images/shield.1b9412b7ca6610ab21f8836483f4e1ec7835b7fe61617f2cead3ff3317ddd56f.cs.png differ
diff --git a/translated_images/shield.1b9412b7ca6610ab21f8836483f4e1ec7835b7fe61617f2cead3ff3317ddd56f.hu.png b/translated_images/shield.1b9412b7ca6610ab21f8836483f4e1ec7835b7fe61617f2cead3ff3317ddd56f.hu.png
new file mode 100644
index 00000000..b962a2f1
Binary files /dev/null and b/translated_images/shield.1b9412b7ca6610ab21f8836483f4e1ec7835b7fe61617f2cead3ff3317ddd56f.hu.png differ
diff --git a/translated_images/shield.1b9412b7ca6610ab21f8836483f4e1ec7835b7fe61617f2cead3ff3317ddd56f.sw.png b/translated_images/shield.1b9412b7ca6610ab21f8836483f4e1ec7835b7fe61617f2cead3ff3317ddd56f.sw.png
new file mode 100644
index 00000000..b962a2f1
Binary files /dev/null and b/translated_images/shield.1b9412b7ca6610ab21f8836483f4e1ec7835b7fe61617f2cead3ff3317ddd56f.sw.png differ
diff --git a/translated_images/snapshot.97750180ebcad73794a3594b36925eb5c8dbaac9e03fec7f9b974188c9ac63c7.cs.png b/translated_images/snapshot.97750180ebcad73794a3594b36925eb5c8dbaac9e03fec7f9b974188c9ac63c7.cs.png
new file mode 100644
index 00000000..2e0e9612
Binary files /dev/null and b/translated_images/snapshot.97750180ebcad73794a3594b36925eb5c8dbaac9e03fec7f9b974188c9ac63c7.cs.png differ
diff --git a/translated_images/snapshot.97750180ebcad73794a3594b36925eb5c8dbaac9e03fec7f9b974188c9ac63c7.hu.png b/translated_images/snapshot.97750180ebcad73794a3594b36925eb5c8dbaac9e03fec7f9b974188c9ac63c7.hu.png
new file mode 100644
index 00000000..fc690695
Binary files /dev/null and b/translated_images/snapshot.97750180ebcad73794a3594b36925eb5c8dbaac9e03fec7f9b974188c9ac63c7.hu.png differ
diff --git a/translated_images/snapshot.97750180ebcad73794a3594b36925eb5c8dbaac9e03fec7f9b974188c9ac63c7.sw.png b/translated_images/snapshot.97750180ebcad73794a3594b36925eb5c8dbaac9e03fec7f9b974188c9ac63c7.sw.png
new file mode 100644
index 00000000..6c210153
Binary files /dev/null and b/translated_images/snapshot.97750180ebcad73794a3594b36925eb5c8dbaac9e03fec7f9b974188c9ac63c7.sw.png differ
diff --git a/translated_images/spa.268ec73b41f992c2a21ef9294235c6ae597b3c37e2c03f0494c2d8857325cc57.cs.png b/translated_images/spa.268ec73b41f992c2a21ef9294235c6ae597b3c37e2c03f0494c2d8857325cc57.cs.png
new file mode 100644
index 00000000..0316298b
Binary files /dev/null and b/translated_images/spa.268ec73b41f992c2a21ef9294235c6ae597b3c37e2c03f0494c2d8857325cc57.cs.png differ
diff --git a/translated_images/spa.268ec73b41f992c2a21ef9294235c6ae597b3c37e2c03f0494c2d8857325cc57.hu.png b/translated_images/spa.268ec73b41f992c2a21ef9294235c6ae597b3c37e2c03f0494c2d8857325cc57.hu.png
new file mode 100644
index 00000000..90c0a8b6
Binary files /dev/null and b/translated_images/spa.268ec73b41f992c2a21ef9294235c6ae597b3c37e2c03f0494c2d8857325cc57.hu.png differ
diff --git a/translated_images/spa.268ec73b41f992c2a21ef9294235c6ae597b3c37e2c03f0494c2d8857325cc57.sw.png b/translated_images/spa.268ec73b41f992c2a21ef9294235c6ae597b3c37e2c03f0494c2d8857325cc57.sw.png
new file mode 100644
index 00000000..9750200b
Binary files /dev/null and b/translated_images/spa.268ec73b41f992c2a21ef9294235c6ae597b3c37e2c03f0494c2d8857325cc57.sw.png differ
diff --git a/translated_images/speedLine.5bcabb93f48b5ae1fe081a6b8832ed314636560b7bb228889bfbeb75a0322490.cs.png b/translated_images/speedLine.5bcabb93f48b5ae1fe081a6b8832ed314636560b7bb228889bfbeb75a0322490.cs.png
new file mode 100644
index 00000000..03018e7f
Binary files /dev/null and b/translated_images/speedLine.5bcabb93f48b5ae1fe081a6b8832ed314636560b7bb228889bfbeb75a0322490.cs.png differ
diff --git a/translated_images/speedLine.5bcabb93f48b5ae1fe081a6b8832ed314636560b7bb228889bfbeb75a0322490.hu.png b/translated_images/speedLine.5bcabb93f48b5ae1fe081a6b8832ed314636560b7bb228889bfbeb75a0322490.hu.png
new file mode 100644
index 00000000..03018e7f
Binary files /dev/null and b/translated_images/speedLine.5bcabb93f48b5ae1fe081a6b8832ed314636560b7bb228889bfbeb75a0322490.hu.png differ
diff --git a/translated_images/speedLine.5bcabb93f48b5ae1fe081a6b8832ed314636560b7bb228889bfbeb75a0322490.sw.png b/translated_images/speedLine.5bcabb93f48b5ae1fe081a6b8832ed314636560b7bb228889bfbeb75a0322490.sw.png
new file mode 100644
index 00000000..03018e7f
Binary files /dev/null and b/translated_images/speedLine.5bcabb93f48b5ae1fe081a6b8832ed314636560b7bb228889bfbeb75a0322490.sw.png differ
diff --git a/translated_images/spritesheet.bec82852290b14ee8f814b4173f8d823658151a2402c2be8f15b17159290d1ab.cs.png b/translated_images/spritesheet.bec82852290b14ee8f814b4173f8d823658151a2402c2be8f15b17159290d1ab.cs.png
new file mode 100644
index 00000000..c7f6f709
Binary files /dev/null and b/translated_images/spritesheet.bec82852290b14ee8f814b4173f8d823658151a2402c2be8f15b17159290d1ab.cs.png differ
diff --git a/translated_images/spritesheet.bec82852290b14ee8f814b4173f8d823658151a2402c2be8f15b17159290d1ab.hu.png b/translated_images/spritesheet.bec82852290b14ee8f814b4173f8d823658151a2402c2be8f15b17159290d1ab.hu.png
new file mode 100644
index 00000000..c7f6f709
Binary files /dev/null and b/translated_images/spritesheet.bec82852290b14ee8f814b4173f8d823658151a2402c2be8f15b17159290d1ab.hu.png differ
diff --git a/translated_images/spritesheet.bec82852290b14ee8f814b4173f8d823658151a2402c2be8f15b17159290d1ab.sw.png b/translated_images/spritesheet.bec82852290b14ee8f814b4173f8d823658151a2402c2be8f15b17159290d1ab.sw.png
new file mode 100644
index 00000000..c7f6f709
Binary files /dev/null and b/translated_images/spritesheet.bec82852290b14ee8f814b4173f8d823658151a2402c2be8f15b17159290d1ab.sw.png differ
diff --git a/translated_images/starBackground.a897b8acb1b0587dbb2cdbf8beeaa388269510bb3ac3b4165f0141dc893045a2.cs.png b/translated_images/starBackground.a897b8acb1b0587dbb2cdbf8beeaa388269510bb3ac3b4165f0141dc893045a2.cs.png
new file mode 100644
index 00000000..7344ae88
Binary files /dev/null and b/translated_images/starBackground.a897b8acb1b0587dbb2cdbf8beeaa388269510bb3ac3b4165f0141dc893045a2.cs.png differ
diff --git a/translated_images/starBackground.a897b8acb1b0587dbb2cdbf8beeaa388269510bb3ac3b4165f0141dc893045a2.hu.png b/translated_images/starBackground.a897b8acb1b0587dbb2cdbf8beeaa388269510bb3ac3b4165f0141dc893045a2.hu.png
new file mode 100644
index 00000000..7344ae88
Binary files /dev/null and b/translated_images/starBackground.a897b8acb1b0587dbb2cdbf8beeaa388269510bb3ac3b4165f0141dc893045a2.hu.png differ
diff --git a/translated_images/starBackground.a897b8acb1b0587dbb2cdbf8beeaa388269510bb3ac3b4165f0141dc893045a2.sw.png b/translated_images/starBackground.a897b8acb1b0587dbb2cdbf8beeaa388269510bb3ac3b4165f0141dc893045a2.sw.png
new file mode 100644
index 00000000..7344ae88
Binary files /dev/null and b/translated_images/starBackground.a897b8acb1b0587dbb2cdbf8beeaa388269510bb3ac3b4165f0141dc893045a2.sw.png differ
diff --git a/translated_images/starBig.72e9c6d0d18f363d485fd26a32c346d269d465f6a87bc0ca5e94ecd34fcd7362.cs.png b/translated_images/starBig.72e9c6d0d18f363d485fd26a32c346d269d465f6a87bc0ca5e94ecd34fcd7362.cs.png
new file mode 100644
index 00000000..e38c77b7
Binary files /dev/null and b/translated_images/starBig.72e9c6d0d18f363d485fd26a32c346d269d465f6a87bc0ca5e94ecd34fcd7362.cs.png differ
diff --git a/translated_images/starBig.72e9c6d0d18f363d485fd26a32c346d269d465f6a87bc0ca5e94ecd34fcd7362.hu.png b/translated_images/starBig.72e9c6d0d18f363d485fd26a32c346d269d465f6a87bc0ca5e94ecd34fcd7362.hu.png
new file mode 100644
index 00000000..e38c77b7
Binary files /dev/null and b/translated_images/starBig.72e9c6d0d18f363d485fd26a32c346d269d465f6a87bc0ca5e94ecd34fcd7362.hu.png differ
diff --git a/translated_images/starBig.72e9c6d0d18f363d485fd26a32c346d269d465f6a87bc0ca5e94ecd34fcd7362.sw.png b/translated_images/starBig.72e9c6d0d18f363d485fd26a32c346d269d465f6a87bc0ca5e94ecd34fcd7362.sw.png
new file mode 100644
index 00000000..e38c77b7
Binary files /dev/null and b/translated_images/starBig.72e9c6d0d18f363d485fd26a32c346d269d465f6a87bc0ca5e94ecd34fcd7362.sw.png differ
diff --git a/translated_images/starSmall.ed78b961dbcd0898e8b9b721cbaaa8d54a0a1165a52a13f19650064add273eec.cs.png b/translated_images/starSmall.ed78b961dbcd0898e8b9b721cbaaa8d54a0a1165a52a13f19650064add273eec.cs.png
new file mode 100644
index 00000000..56bcfd58
Binary files /dev/null and b/translated_images/starSmall.ed78b961dbcd0898e8b9b721cbaaa8d54a0a1165a52a13f19650064add273eec.cs.png differ
diff --git a/translated_images/starSmall.ed78b961dbcd0898e8b9b721cbaaa8d54a0a1165a52a13f19650064add273eec.hu.png b/translated_images/starSmall.ed78b961dbcd0898e8b9b721cbaaa8d54a0a1165a52a13f19650064add273eec.hu.png
new file mode 100644
index 00000000..56bcfd58
Binary files /dev/null and b/translated_images/starSmall.ed78b961dbcd0898e8b9b721cbaaa8d54a0a1165a52a13f19650064add273eec.hu.png differ
diff --git a/translated_images/starSmall.ed78b961dbcd0898e8b9b721cbaaa8d54a0a1165a52a13f19650064add273eec.sw.png b/translated_images/starSmall.ed78b961dbcd0898e8b9b721cbaaa8d54a0a1165a52a13f19650064add273eec.sw.png
new file mode 100644
index 00000000..56bcfd58
Binary files /dev/null and b/translated_images/starSmall.ed78b961dbcd0898e8b9b721cbaaa8d54a0a1165a52a13f19650064add273eec.sw.png differ
diff --git a/translated_images/terrarium-final.0920f16e87c13a84cd2b553a5af9a3ad1cffbd41fbf8ce715d9e9c43809a5e2c.cs.png b/translated_images/terrarium-final.0920f16e87c13a84cd2b553a5af9a3ad1cffbd41fbf8ce715d9e9c43809a5e2c.cs.png
new file mode 100644
index 00000000..704a8221
Binary files /dev/null and b/translated_images/terrarium-final.0920f16e87c13a84cd2b553a5af9a3ad1cffbd41fbf8ce715d9e9c43809a5e2c.cs.png differ
diff --git a/translated_images/terrarium-final.0920f16e87c13a84cd2b553a5af9a3ad1cffbd41fbf8ce715d9e9c43809a5e2c.hu.png b/translated_images/terrarium-final.0920f16e87c13a84cd2b553a5af9a3ad1cffbd41fbf8ce715d9e9c43809a5e2c.hu.png
new file mode 100644
index 00000000..d063bfe0
Binary files /dev/null and b/translated_images/terrarium-final.0920f16e87c13a84cd2b553a5af9a3ad1cffbd41fbf8ce715d9e9c43809a5e2c.hu.png differ
diff --git a/translated_images/terrarium-final.0920f16e87c13a84cd2b553a5af9a3ad1cffbd41fbf8ce715d9e9c43809a5e2c.sw.png b/translated_images/terrarium-final.0920f16e87c13a84cd2b553a5af9a3ad1cffbd41fbf8ce715d9e9c43809a5e2c.sw.png
new file mode 100644
index 00000000..4a51d959
Binary files /dev/null and b/translated_images/terrarium-final.0920f16e87c13a84cd2b553a5af9a3ad1cffbd41fbf8ce715d9e9c43809a5e2c.sw.png differ
diff --git a/translated_images/terrarium-final.2f07047ffc597d0a06b06cab28a77801a10dd12fdb6c7fc630e9c40665491c53.cs.png b/translated_images/terrarium-final.2f07047ffc597d0a06b06cab28a77801a10dd12fdb6c7fc630e9c40665491c53.cs.png
new file mode 100644
index 00000000..1c0645db
Binary files /dev/null and b/translated_images/terrarium-final.2f07047ffc597d0a06b06cab28a77801a10dd12fdb6c7fc630e9c40665491c53.cs.png differ
diff --git a/translated_images/terrarium-final.2f07047ffc597d0a06b06cab28a77801a10dd12fdb6c7fc630e9c40665491c53.hu.png b/translated_images/terrarium-final.2f07047ffc597d0a06b06cab28a77801a10dd12fdb6c7fc630e9c40665491c53.hu.png
new file mode 100644
index 00000000..a584438e
Binary files /dev/null and b/translated_images/terrarium-final.2f07047ffc597d0a06b06cab28a77801a10dd12fdb6c7fc630e9c40665491c53.hu.png differ
diff --git a/translated_images/terrarium-final.2f07047ffc597d0a06b06cab28a77801a10dd12fdb6c7fc630e9c40665491c53.sw.png b/translated_images/terrarium-final.2f07047ffc597d0a06b06cab28a77801a10dd12fdb6c7fc630e9c40665491c53.sw.png
new file mode 100644
index 00000000..6c74a31f
Binary files /dev/null and b/translated_images/terrarium-final.2f07047ffc597d0a06b06cab28a77801a10dd12fdb6c7fc630e9c40665491c53.sw.png differ
diff --git a/translated_images/validation-error.8bd23e98d416c22f80076d04829a4bb718e0e550fd622862ef59008ccf0d5dce.cs.png b/translated_images/validation-error.8bd23e98d416c22f80076d04829a4bb718e0e550fd622862ef59008ccf0d5dce.cs.png
new file mode 100644
index 00000000..b175fc31
Binary files /dev/null and b/translated_images/validation-error.8bd23e98d416c22f80076d04829a4bb718e0e550fd622862ef59008ccf0d5dce.cs.png differ
diff --git a/translated_images/validation-error.8bd23e98d416c22f80076d04829a4bb718e0e550fd622862ef59008ccf0d5dce.hu.png b/translated_images/validation-error.8bd23e98d416c22f80076d04829a4bb718e0e550fd622862ef59008ccf0d5dce.hu.png
new file mode 100644
index 00000000..1b937b80
Binary files /dev/null and b/translated_images/validation-error.8bd23e98d416c22f80076d04829a4bb718e0e550fd622862ef59008ccf0d5dce.hu.png differ
diff --git a/translated_images/validation-error.8bd23e98d416c22f80076d04829a4bb718e0e550fd622862ef59008ccf0d5dce.sw.png b/translated_images/validation-error.8bd23e98d416c22f80076d04829a4bb718e0e550fd622862ef59008ccf0d5dce.sw.png
new file mode 100644
index 00000000..d04d728d
Binary files /dev/null and b/translated_images/validation-error.8bd23e98d416c22f80076d04829a4bb718e0e550fd622862ef59008ccf0d5dce.sw.png differ
diff --git a/translated_images/vs-code-index.e2986cf919471eb984a0afef231380c8b132b000635105f2397bd2754d1b689c.cs.png b/translated_images/vs-code-index.e2986cf919471eb984a0afef231380c8b132b000635105f2397bd2754d1b689c.cs.png
new file mode 100644
index 00000000..17ccc4f4
Binary files /dev/null and b/translated_images/vs-code-index.e2986cf919471eb984a0afef231380c8b132b000635105f2397bd2754d1b689c.cs.png differ
diff --git a/translated_images/vs-code-index.e2986cf919471eb984a0afef231380c8b132b000635105f2397bd2754d1b689c.hu.png b/translated_images/vs-code-index.e2986cf919471eb984a0afef231380c8b132b000635105f2397bd2754d1b689c.hu.png
new file mode 100644
index 00000000..b41b48cb
Binary files /dev/null and b/translated_images/vs-code-index.e2986cf919471eb984a0afef231380c8b132b000635105f2397bd2754d1b689c.hu.png differ
diff --git a/translated_images/vs-code-index.e2986cf919471eb984a0afef231380c8b132b000635105f2397bd2754d1b689c.sw.png b/translated_images/vs-code-index.e2986cf919471eb984a0afef231380c8b132b000635105f2397bd2754d1b689c.sw.png
new file mode 100644
index 00000000..70d08445
Binary files /dev/null and b/translated_images/vs-code-index.e2986cf919471eb984a0afef231380c8b132b000635105f2397bd2754d1b689c.sw.png differ
diff --git a/translated_images/webdev101-a11y.8ef3025c858d897a403a1a42c0897c76e11b724d9a8a0c0578dd4316f7507622.cs.png b/translated_images/webdev101-a11y.8ef3025c858d897a403a1a42c0897c76e11b724d9a8a0c0578dd4316f7507622.cs.png
new file mode 100644
index 00000000..c6d82de7
Binary files /dev/null and b/translated_images/webdev101-a11y.8ef3025c858d897a403a1a42c0897c76e11b724d9a8a0c0578dd4316f7507622.cs.png differ
diff --git a/translated_images/webdev101-a11y.8ef3025c858d897a403a1a42c0897c76e11b724d9a8a0c0578dd4316f7507622.hu.png b/translated_images/webdev101-a11y.8ef3025c858d897a403a1a42c0897c76e11b724d9a8a0c0578dd4316f7507622.hu.png
new file mode 100644
index 00000000..dc2d38d5
Binary files /dev/null and b/translated_images/webdev101-a11y.8ef3025c858d897a403a1a42c0897c76e11b724d9a8a0c0578dd4316f7507622.hu.png differ
diff --git a/translated_images/webdev101-a11y.8ef3025c858d897a403a1a42c0897c76e11b724d9a8a0c0578dd4316f7507622.sw.png b/translated_images/webdev101-a11y.8ef3025c858d897a403a1a42c0897c76e11b724d9a8a0c0578dd4316f7507622.sw.png
new file mode 100644
index 00000000..d7b4eda5
Binary files /dev/null and b/translated_images/webdev101-a11y.8ef3025c858d897a403a1a42c0897c76e11b724d9a8a0c0578dd4316f7507622.sw.png differ
diff --git a/translated_images/webdev101-css.3f7af5991bf53a200d79e7257e5e450408d8ea97f5b531d31b2e3976317338ee.cs.png b/translated_images/webdev101-css.3f7af5991bf53a200d79e7257e5e450408d8ea97f5b531d31b2e3976317338ee.cs.png
new file mode 100644
index 00000000..b2b91120
Binary files /dev/null and b/translated_images/webdev101-css.3f7af5991bf53a200d79e7257e5e450408d8ea97f5b531d31b2e3976317338ee.cs.png differ
diff --git a/translated_images/webdev101-css.3f7af5991bf53a200d79e7257e5e450408d8ea97f5b531d31b2e3976317338ee.hu.png b/translated_images/webdev101-css.3f7af5991bf53a200d79e7257e5e450408d8ea97f5b531d31b2e3976317338ee.hu.png
new file mode 100644
index 00000000..9d0868e4
Binary files /dev/null and b/translated_images/webdev101-css.3f7af5991bf53a200d79e7257e5e450408d8ea97f5b531d31b2e3976317338ee.hu.png differ
diff --git a/translated_images/webdev101-css.3f7af5991bf53a200d79e7257e5e450408d8ea97f5b531d31b2e3976317338ee.sw.png b/translated_images/webdev101-css.3f7af5991bf53a200d79e7257e5e450408d8ea97f5b531d31b2e3976317338ee.sw.png
new file mode 100644
index 00000000..4a7e106d
Binary files /dev/null and b/translated_images/webdev101-css.3f7af5991bf53a200d79e7257e5e450408d8ea97f5b531d31b2e3976317338ee.sw.png differ
diff --git a/translated_images/webdev101-github.8846d7971abef6f947909b4f9d343e2a23778aa716ca6b9d71df7174ee5009ac.cs.png b/translated_images/webdev101-github.8846d7971abef6f947909b4f9d343e2a23778aa716ca6b9d71df7174ee5009ac.cs.png
new file mode 100644
index 00000000..43b22eca
Binary files /dev/null and b/translated_images/webdev101-github.8846d7971abef6f947909b4f9d343e2a23778aa716ca6b9d71df7174ee5009ac.cs.png differ
diff --git a/translated_images/webdev101-github.8846d7971abef6f947909b4f9d343e2a23778aa716ca6b9d71df7174ee5009ac.hu.png b/translated_images/webdev101-github.8846d7971abef6f947909b4f9d343e2a23778aa716ca6b9d71df7174ee5009ac.hu.png
new file mode 100644
index 00000000..a7a20334
Binary files /dev/null and b/translated_images/webdev101-github.8846d7971abef6f947909b4f9d343e2a23778aa716ca6b9d71df7174ee5009ac.hu.png differ
diff --git a/translated_images/webdev101-github.8846d7971abef6f947909b4f9d343e2a23778aa716ca6b9d71df7174ee5009ac.sw.png b/translated_images/webdev101-github.8846d7971abef6f947909b4f9d343e2a23778aa716ca6b9d71df7174ee5009ac.sw.png
new file mode 100644
index 00000000..b2e867fb
Binary files /dev/null and b/translated_images/webdev101-github.8846d7971abef6f947909b4f9d343e2a23778aa716ca6b9d71df7174ee5009ac.sw.png differ
diff --git a/translated_images/webdev101-html.4389c2067af68e98280c1bde52b6c6269f399eaae3659b7c846018d8a7b0bbd9.cs.png b/translated_images/webdev101-html.4389c2067af68e98280c1bde52b6c6269f399eaae3659b7c846018d8a7b0bbd9.cs.png
new file mode 100644
index 00000000..21b82138
Binary files /dev/null and b/translated_images/webdev101-html.4389c2067af68e98280c1bde52b6c6269f399eaae3659b7c846018d8a7b0bbd9.cs.png differ
diff --git a/translated_images/webdev101-html.4389c2067af68e98280c1bde52b6c6269f399eaae3659b7c846018d8a7b0bbd9.hu.png b/translated_images/webdev101-html.4389c2067af68e98280c1bde52b6c6269f399eaae3659b7c846018d8a7b0bbd9.hu.png
new file mode 100644
index 00000000..c0d3c972
Binary files /dev/null and b/translated_images/webdev101-html.4389c2067af68e98280c1bde52b6c6269f399eaae3659b7c846018d8a7b0bbd9.hu.png differ
diff --git a/translated_images/webdev101-html.4389c2067af68e98280c1bde52b6c6269f399eaae3659b7c846018d8a7b0bbd9.sw.png b/translated_images/webdev101-html.4389c2067af68e98280c1bde52b6c6269f399eaae3659b7c846018d8a7b0bbd9.sw.png
new file mode 100644
index 00000000..7c3ae0c1
Binary files /dev/null and b/translated_images/webdev101-html.4389c2067af68e98280c1bde52b6c6269f399eaae3659b7c846018d8a7b0bbd9.sw.png differ
diff --git a/translated_images/webdev101-js-arrays.439d7528b8a294558d0e4302e448d193f8ad7495cc407539cc81f1afe904b470.cs.png b/translated_images/webdev101-js-arrays.439d7528b8a294558d0e4302e448d193f8ad7495cc407539cc81f1afe904b470.cs.png
new file mode 100644
index 00000000..e6ac008e
Binary files /dev/null and b/translated_images/webdev101-js-arrays.439d7528b8a294558d0e4302e448d193f8ad7495cc407539cc81f1afe904b470.cs.png differ
diff --git a/translated_images/webdev101-js-arrays.439d7528b8a294558d0e4302e448d193f8ad7495cc407539cc81f1afe904b470.hu.png b/translated_images/webdev101-js-arrays.439d7528b8a294558d0e4302e448d193f8ad7495cc407539cc81f1afe904b470.hu.png
new file mode 100644
index 00000000..b0511d4f
Binary files /dev/null and b/translated_images/webdev101-js-arrays.439d7528b8a294558d0e4302e448d193f8ad7495cc407539cc81f1afe904b470.hu.png differ
diff --git a/translated_images/webdev101-js-arrays.439d7528b8a294558d0e4302e448d193f8ad7495cc407539cc81f1afe904b470.sw.png b/translated_images/webdev101-js-arrays.439d7528b8a294558d0e4302e448d193f8ad7495cc407539cc81f1afe904b470.sw.png
new file mode 100644
index 00000000..64338ddd
Binary files /dev/null and b/translated_images/webdev101-js-arrays.439d7528b8a294558d0e4302e448d193f8ad7495cc407539cc81f1afe904b470.sw.png differ
diff --git a/translated_images/webdev101-js-datatypes.4cc470179730702c756480d3ffa46507f746e5975ebf80f99fdaaf1cff09a7f4.cs.png b/translated_images/webdev101-js-datatypes.4cc470179730702c756480d3ffa46507f746e5975ebf80f99fdaaf1cff09a7f4.cs.png
new file mode 100644
index 00000000..22759c57
Binary files /dev/null and b/translated_images/webdev101-js-datatypes.4cc470179730702c756480d3ffa46507f746e5975ebf80f99fdaaf1cff09a7f4.cs.png differ
diff --git a/translated_images/webdev101-js-datatypes.4cc470179730702c756480d3ffa46507f746e5975ebf80f99fdaaf1cff09a7f4.hu.png b/translated_images/webdev101-js-datatypes.4cc470179730702c756480d3ffa46507f746e5975ebf80f99fdaaf1cff09a7f4.hu.png
new file mode 100644
index 00000000..af5d3b91
Binary files /dev/null and b/translated_images/webdev101-js-datatypes.4cc470179730702c756480d3ffa46507f746e5975ebf80f99fdaaf1cff09a7f4.hu.png differ
diff --git a/translated_images/webdev101-js-datatypes.4cc470179730702c756480d3ffa46507f746e5975ebf80f99fdaaf1cff09a7f4.sw.png b/translated_images/webdev101-js-datatypes.4cc470179730702c756480d3ffa46507f746e5975ebf80f99fdaaf1cff09a7f4.sw.png
new file mode 100644
index 00000000..381dcc4a
Binary files /dev/null and b/translated_images/webdev101-js-datatypes.4cc470179730702c756480d3ffa46507f746e5975ebf80f99fdaaf1cff09a7f4.sw.png differ
diff --git a/translated_images/webdev101-js-decisions.69e1b20f272dd1f0b1cb2f8adaff3ed2a77c4f91db96d8a0594132a353fa189a.cs.png b/translated_images/webdev101-js-decisions.69e1b20f272dd1f0b1cb2f8adaff3ed2a77c4f91db96d8a0594132a353fa189a.cs.png
new file mode 100644
index 00000000..eb0c4377
Binary files /dev/null and b/translated_images/webdev101-js-decisions.69e1b20f272dd1f0b1cb2f8adaff3ed2a77c4f91db96d8a0594132a353fa189a.cs.png differ
diff --git a/translated_images/webdev101-js-decisions.69e1b20f272dd1f0b1cb2f8adaff3ed2a77c4f91db96d8a0594132a353fa189a.hu.png b/translated_images/webdev101-js-decisions.69e1b20f272dd1f0b1cb2f8adaff3ed2a77c4f91db96d8a0594132a353fa189a.hu.png
new file mode 100644
index 00000000..5bdf6c4c
Binary files /dev/null and b/translated_images/webdev101-js-decisions.69e1b20f272dd1f0b1cb2f8adaff3ed2a77c4f91db96d8a0594132a353fa189a.hu.png differ
diff --git a/translated_images/webdev101-js-decisions.69e1b20f272dd1f0b1cb2f8adaff3ed2a77c4f91db96d8a0594132a353fa189a.sw.png b/translated_images/webdev101-js-decisions.69e1b20f272dd1f0b1cb2f8adaff3ed2a77c4f91db96d8a0594132a353fa189a.sw.png
new file mode 100644
index 00000000..3adafef7
Binary files /dev/null and b/translated_images/webdev101-js-decisions.69e1b20f272dd1f0b1cb2f8adaff3ed2a77c4f91db96d8a0594132a353fa189a.sw.png differ
diff --git a/translated_images/webdev101-js-functions.be049c4726e94f8b7605c36330ac42eeb5cd8ed02bcdd60fdac778174d6cb865.cs.png b/translated_images/webdev101-js-functions.be049c4726e94f8b7605c36330ac42eeb5cd8ed02bcdd60fdac778174d6cb865.cs.png
new file mode 100644
index 00000000..0c22c11b
Binary files /dev/null and b/translated_images/webdev101-js-functions.be049c4726e94f8b7605c36330ac42eeb5cd8ed02bcdd60fdac778174d6cb865.cs.png differ
diff --git a/translated_images/webdev101-js-functions.be049c4726e94f8b7605c36330ac42eeb5cd8ed02bcdd60fdac778174d6cb865.hu.png b/translated_images/webdev101-js-functions.be049c4726e94f8b7605c36330ac42eeb5cd8ed02bcdd60fdac778174d6cb865.hu.png
new file mode 100644
index 00000000..2fc4000c
Binary files /dev/null and b/translated_images/webdev101-js-functions.be049c4726e94f8b7605c36330ac42eeb5cd8ed02bcdd60fdac778174d6cb865.hu.png differ
diff --git a/translated_images/webdev101-js-functions.be049c4726e94f8b7605c36330ac42eeb5cd8ed02bcdd60fdac778174d6cb865.sw.png b/translated_images/webdev101-js-functions.be049c4726e94f8b7605c36330ac42eeb5cd8ed02bcdd60fdac778174d6cb865.sw.png
new file mode 100644
index 00000000..5dd55c65
Binary files /dev/null and b/translated_images/webdev101-js-functions.be049c4726e94f8b7605c36330ac42eeb5cd8ed02bcdd60fdac778174d6cb865.sw.png differ
diff --git a/translated_images/webdev101-js.10280393044d7eaaec7e847574946add7ddae6be2b2194567d848b61d849334a.cs.png b/translated_images/webdev101-js.10280393044d7eaaec7e847574946add7ddae6be2b2194567d848b61d849334a.cs.png
new file mode 100644
index 00000000..4f5de6c9
Binary files /dev/null and b/translated_images/webdev101-js.10280393044d7eaaec7e847574946add7ddae6be2b2194567d848b61d849334a.cs.png differ
diff --git a/translated_images/webdev101-js.10280393044d7eaaec7e847574946add7ddae6be2b2194567d848b61d849334a.hu.png b/translated_images/webdev101-js.10280393044d7eaaec7e847574946add7ddae6be2b2194567d848b61d849334a.hu.png
new file mode 100644
index 00000000..4fa04096
Binary files /dev/null and b/translated_images/webdev101-js.10280393044d7eaaec7e847574946add7ddae6be2b2194567d848b61d849334a.hu.png differ
diff --git a/translated_images/webdev101-js.10280393044d7eaaec7e847574946add7ddae6be2b2194567d848b61d849334a.sw.png b/translated_images/webdev101-js.10280393044d7eaaec7e847574946add7ddae6be2b2194567d848b61d849334a.sw.png
new file mode 100644
index 00000000..f36360e3
Binary files /dev/null and b/translated_images/webdev101-js.10280393044d7eaaec7e847574946add7ddae6be2b2194567d848b61d849334a.sw.png differ
diff --git a/translated_images/webdev101-programming.d6e3f98e61ac4bff0b27dcbf1c3f16c8ed46984866f2d29988929678b0058fde.cs.png b/translated_images/webdev101-programming.d6e3f98e61ac4bff0b27dcbf1c3f16c8ed46984866f2d29988929678b0058fde.cs.png
new file mode 100644
index 00000000..5a6d45eb
Binary files /dev/null and b/translated_images/webdev101-programming.d6e3f98e61ac4bff0b27dcbf1c3f16c8ed46984866f2d29988929678b0058fde.cs.png differ
diff --git a/translated_images/webdev101-programming.d6e3f98e61ac4bff0b27dcbf1c3f16c8ed46984866f2d29988929678b0058fde.hu.png b/translated_images/webdev101-programming.d6e3f98e61ac4bff0b27dcbf1c3f16c8ed46984866f2d29988929678b0058fde.hu.png
new file mode 100644
index 00000000..6dd76608
Binary files /dev/null and b/translated_images/webdev101-programming.d6e3f98e61ac4bff0b27dcbf1c3f16c8ed46984866f2d29988929678b0058fde.hu.png differ
diff --git a/translated_images/webdev101-programming.d6e3f98e61ac4bff0b27dcbf1c3f16c8ed46984866f2d29988929678b0058fde.sw.png b/translated_images/webdev101-programming.d6e3f98e61ac4bff0b27dcbf1c3f16c8ed46984866f2d29988929678b0058fde.sw.png
new file mode 100644
index 00000000..57e94e3c
Binary files /dev/null and b/translated_images/webdev101-programming.d6e3f98e61ac4bff0b27dcbf1c3f16c8ed46984866f2d29988929678b0058fde.sw.png differ
diff --git a/translated_images/working-tree-pb.6cd43e5076f23ba3d017f7662394bd87f975e194a068556905e4cc99da9cbfdc.cs.png b/translated_images/working-tree-pb.6cd43e5076f23ba3d017f7662394bd87f975e194a068556905e4cc99da9cbfdc.cs.png
new file mode 100644
index 00000000..00a283fe
Binary files /dev/null and b/translated_images/working-tree-pb.6cd43e5076f23ba3d017f7662394bd87f975e194a068556905e4cc99da9cbfdc.cs.png differ
diff --git a/translated_images/working-tree-pb.6cd43e5076f23ba3d017f7662394bd87f975e194a068556905e4cc99da9cbfdc.hu.png b/translated_images/working-tree-pb.6cd43e5076f23ba3d017f7662394bd87f975e194a068556905e4cc99da9cbfdc.hu.png
new file mode 100644
index 00000000..3c30c510
Binary files /dev/null and b/translated_images/working-tree-pb.6cd43e5076f23ba3d017f7662394bd87f975e194a068556905e4cc99da9cbfdc.hu.png differ
diff --git a/translated_images/working-tree-pb.6cd43e5076f23ba3d017f7662394bd87f975e194a068556905e4cc99da9cbfdc.sw.png b/translated_images/working-tree-pb.6cd43e5076f23ba3d017f7662394bd87f975e194a068556905e4cc99da9cbfdc.sw.png
new file mode 100644
index 00000000..55f0189a
Binary files /dev/null and b/translated_images/working-tree-pb.6cd43e5076f23ba3d017f7662394bd87f975e194a068556905e4cc99da9cbfdc.sw.png differ
diff --git a/translated_images/working-tree.c58eec08e6335c79cc708c0c220c0b7fea61514bd3c7fb7471905a864aceac7c.cs.png b/translated_images/working-tree.c58eec08e6335c79cc708c0c220c0b7fea61514bd3c7fb7471905a864aceac7c.cs.png
new file mode 100644
index 00000000..05beda3a
Binary files /dev/null and b/translated_images/working-tree.c58eec08e6335c79cc708c0c220c0b7fea61514bd3c7fb7471905a864aceac7c.cs.png differ
diff --git a/translated_images/working-tree.c58eec08e6335c79cc708c0c220c0b7fea61514bd3c7fb7471905a864aceac7c.hu.png b/translated_images/working-tree.c58eec08e6335c79cc708c0c220c0b7fea61514bd3c7fb7471905a864aceac7c.hu.png
new file mode 100644
index 00000000..133307eb
Binary files /dev/null and b/translated_images/working-tree.c58eec08e6335c79cc708c0c220c0b7fea61514bd3c7fb7471905a864aceac7c.hu.png differ
diff --git a/translated_images/working-tree.c58eec08e6335c79cc708c0c220c0b7fea61514bd3c7fb7471905a864aceac7c.sw.png b/translated_images/working-tree.c58eec08e6335c79cc708c0c220c0b7fea61514bd3c7fb7471905a864aceac7c.sw.png
new file mode 100644
index 00000000..eee22615
Binary files /dev/null and b/translated_images/working-tree.c58eec08e6335c79cc708c0c220c0b7fea61514bd3c7fb7471905a864aceac7c.sw.png differ
diff --git a/translations/cs/1-getting-started-lessons/1-intro-to-programming-languages/README.md b/translations/cs/1-getting-started-lessons/1-intro-to-programming-languages/README.md
new file mode 100644
index 00000000..53735de0
--- /dev/null
+++ b/translations/cs/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-28T04:30:40+00:00",
+  "source_file": "1-getting-started-lessons/1-intro-to-programming-languages/README.md",
+  "language_code": "cs"
+}
+-->
+# Úvod do programovacích jazyků a nástrojů
+
+Tato lekce pokrývá základy programovacích jazyků. Témata zde uvedená se vztahují na většinu moderních programovacích jazyků. V části "Nástroje" se naučíte o užitečném softwaru, který vám jako vývojáři pomůže.
+
+![Úvod do programování](../../../../translated_images/webdev101-programming.d6e3f98e61ac4bff0b27dcbf1c3f16c8ed46984866f2d29988929678b0058fde.cs.png)
+> Sketchnote od [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Kvíz před lekcí
+[Kvíz před lekcí](https://forms.office.com/r/dru4TE0U9n?origin=lprLink)
+
+## Úvod
+
+V této lekci se budeme zabývat:
+
+- Co je programování?
+- Typy programovacích jazyků
+- Základní prvky programu
+- Užitečný software a nástroje pro profesionálního vývojáře
+
+> Tuto lekci si můžete projít na [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon)!
+
+## Co je programování?
+
+Programování (také známé jako kódování) je proces psaní instrukcí pro zařízení, jako je počítač nebo mobilní zařízení. Tyto instrukce píšeme pomocí programovacího jazyka, který je následně interpretován zařízením. Tyto sady instrukcí mohou být označovány různými názvy, například *program*, *počítačový program*, *aplikace (app)* nebo *spustitelný soubor*.
+
+*Program* může být cokoliv, co je napsáno pomocí kódu; webové stránky, hry a mobilní aplikace jsou programy. I když je možné vytvořit program bez psaní kódu, základní logika je interpretována zařízením a tato logika byla s největší pravděpodobností napsána pomocí kódu. Program, který *běží* nebo *provádí* kód, vykonává instrukce. Zařízení, na kterém čtete tuto lekci, právě spouští program, aby ji zobrazilo na vaší obrazovce.
+
+✅ Udělejte si malý průzkum: Kdo je považován za prvního programátora na světě?
+
+## Programovací jazyky
+
+Programovací jazyky umožňují vývojářům psát instrukce pro zařízení. Zařízení rozumí pouze binárnímu kódu (1 a 0), což však pro *většinu* vývojářů není příliš efektivní způsob komunikace. Programovací jazyky slouží jako prostředník mezi lidmi a počítači.
+
+Programovací jazyky mají různé formáty a mohou sloužit různým účelům. Například JavaScript se primárně používá pro webové aplikace, zatímco Bash se používá hlavně pro operační systémy.
+
+*Nízké úrovně jazyků* obvykle vyžadují méně kroků pro interpretaci instrukcí zařízením než *vysoké úrovně jazyků*. Co však činí vysoké úrovně jazyků populárními, je jejich čitelnost a podpora. JavaScript je považován za jazyk vysoké úrovně.
+
+Následující kód ukazuje rozdíl mezi jazykem vysoké úrovně (JavaScript) a jazykem nízké úrovně (ARM assembler).
+
+```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
+```
+
+Věřte nebo ne, *oba dělají totéž*: tisknou Fibonacciho posloupnost až do čísla 10.
+
+✅ Fibonacciho posloupnost je [definována](https://en.wikipedia.org/wiki/Fibonacci_number) jako sada čísel, kde každé číslo je součtem dvou předchozích, počínaje 0 a 1. Prvních 10 čísel Fibonacciho posloupnosti je 0, 1, 1, 2, 3, 5, 8, 13, 21 a 34.
+
+## Prvky programu
+
+Jednotlivá instrukce v programu se nazývá *příkaz* a obvykle má znak nebo mezeru, která označuje, kde příkaz končí, nebo *končí*. Způsob, jakým program končí, se liší podle jazyka.
+
+Příkazy v programu mohou záviset na datech poskytnutých uživatelem nebo z jiného zdroje, aby mohly vykonávat instrukce. Data mohou změnit chování programu, a proto programovací jazyky obsahují způsob, jak data dočasně uložit, aby mohla být použita později. Tyto způsoby se nazývají *proměnné*. Proměnné jsou příkazy, které zařízení instruují, aby uložilo data do své paměti. Proměnné v programech jsou podobné proměnným v algebře, kde mají jedinečný název a jejich hodnota se může časem měnit.
+
+Existuje možnost, že některé příkazy nebudou zařízením vykonány. To je obvykle záměrné, když je to napsáno vývojářem, nebo náhodné, když dojde k neočekávané chybě. Tento typ kontroly nad aplikací ji činí robustnější a lépe udržovatelnou. Tyto změny v řízení obvykle nastávají, když jsou splněny určité podmínky. Běžným příkazem používaným v moderním programování k řízení běhu programu je příkaz `if..else`.
+
+✅ O tomto typu příkazu se dozvíte více v následujících lekcích.
+
+## Nástroje
+
+[![Nástroje](https://img.youtube.com/vi/69WJeXGBdxg/0.jpg)](https://youtube.com/watch?v=69WJeXGBdxg "Nástroje")
+
+> 🎥 Klikněte na obrázek výše pro video o nástrojích
+
+V této části se dozvíte o některém softwaru, který může být velmi užitečný, když začínáte svou profesionální vývojářskou cestu.
+
+**Vývojové prostředí** je jedinečná sada nástrojů a funkcí, které vývojář často používá při psaní softwaru. Některé z těchto nástrojů byly přizpůsobeny specifickým potřebám vývojáře a mohou se časem měnit, pokud vývojář změní priority v práci, osobních projektech nebo při používání jiného programovacího jazyka. Vývojová prostředí jsou tak jedinečná jako vývojáři, kteří je používají.
+
+### Editory
+
+Jedním z nejdůležitějších nástrojů pro vývoj softwaru je editor. Editory jsou místem, kde píšete svůj kód a někdy i spouštíte svůj kód.
+
+Vývojáři spoléhají na editory z několika dalších důvodů:
+
+- *Ladění* pomáhá odhalit chyby a problémy tím, že prochází kód řádek po řádku. Některé editory mají schopnosti ladění; mohou být přizpůsobeny a přidány pro specifické programovací jazyky.
+- *Zvýraznění syntaxe* přidává barvy a formátování textu do kódu, což usnadňuje jeho čtení. Většina editorů umožňuje přizpůsobené zvýraznění syntaxe.
+- *Rozšíření a integrace* jsou specializované nástroje pro vývojáře, vytvořené vývojáři. Tyto nástroje nebyly součástí základního editoru. Například mnoho vývojářů dokumentuje svůj kód, aby vysvětlili, jak funguje. Mohou nainstalovat rozšíření pro kontrolu pravopisu, které pomáhá najít překlepy v dokumentaci. Většina rozšíření je určena pro použití v konkrétním editoru a většina editorů má způsob, jak vyhledávat dostupná rozšíření.
+- *Přizpůsobení* umožňuje vývojářům vytvořit jedinečné vývojové prostředí, které vyhovuje jejich potřebám. Většina editorů je extrémně přizpůsobitelná a může také umožnit vývojářům vytvářet vlastní rozšíření.
+
+#### Populární editory a rozšíření pro webový vývoj
+
+- [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)
+  - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker)
+  - [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare)
+  - [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
+- [Atom](https://atom.io/)
+  - [spell-check](https://atom.io/packages/spell-check)
+  - [teletype](https://atom.io/packages/teletype)
+  - [atom-beautify](https://atom.io/packages/atom-beautify)
+  
+- [Sublimetext](https://www.sublimetext.com/)
+  - [emmet](https://emmet.io/)
+  - [SublimeLinter](http://www.sublimelinter.com/en/stable/)
+
+### Prohlížeče
+
+Dalším klíčovým nástrojem je prohlížeč. Weboví vývojáři spoléhají na prohlížeč, aby viděli, jak jejich kód běží na webu. Prohlížeč se také používá k zobrazení vizuálních prvků webové stránky, které jsou napsány v editoru, jako je HTML.
+
+Mnoho prohlížečů obsahuje *nástroje pro vývojáře* (DevTools), které obsahují sadu užitečných funkcí a informací, jež pomáhají vývojářům shromažďovat a zachytávat důležité informace o jejich aplikaci. Například: Pokud má webová stránka chyby, je někdy užitečné vědět, kdy k nim došlo. DevTools v prohlížeči mohou být nakonfigurovány tak, aby tyto informace zachytily.
+
+#### Populární prohlížeče a DevTools
+
+- [Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)
+- [Chrome](https://developers.google.com/web/tools/chrome-devtools/)
+- [Firefox](https://developer.mozilla.org/docs/Tools)
+
+### Nástroje příkazového řádku
+
+Někteří vývojáři preferují méně grafické prostředí pro své každodenní úkoly a spoléhají na příkazový řádek. Psaní kódu vyžaduje značné množství psaní a někteří vývojáři preferují nepřerušovat svůj tok na klávesnici. Používají klávesové zkratky pro přepínání mezi okny na ploše, práci na různých souborech a používání nástrojů. Většinu úkolů lze provést myší, ale jednou z výhod příkazového řádku je, že mnoho věcí lze provést bez nutnosti přepínání mezi myší a klávesnicí. Další výhodou příkazového řádku je, že je konfigurovatelný a můžete uložit vlastní konfiguraci, později ji změnit a importovat ji do jiných vývojových strojů. Protože vývojová prostředí jsou tak jedinečná pro každého vývojáře, někteří se příkazovému řádku vyhýbají, někteří na něm zcela spoléhají a někteří preferují kombinaci obojího.
+
+### Populární možnosti příkazového řádku
+
+Možnosti příkazového řádku se liší podle operačního systému, který používáte.
+
+*💻 = předinstalováno v operačním systému.*
+
+#### 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) (také známý jako CMD) 💻
+- [Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)
+- [mintty](https://mintty.github.io/)
+  
+#### MacOS
+
+- [Terminal](https://support.apple.com/guide/terminal/open-or-quit-terminal-apd5265185d-f365-44cb-8b09-71a064a42125/mac) 💻
+- [iTerm](https://iterm2.com/)
+- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-macos?view=powershell-7/?WT.mc_id=academic-77807-sagibbon)
+
+#### Linux
+
+- [Bash](https://www.gnu.org/software/bash/manual/html_node/index.html) 💻
+- [KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)
+- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-linux?view=powershell-7/?WT.mc_id=academic-77807-sagibbon)
+
+#### Populární nástroje příkazového řádku
+
+- [Git](https://git-scm.com/) (💻 na většině operačních systémů)
+- [NPM](https://www.npmjs.com/)
+- [Yarn](https://classic.yarnpkg.com/en/docs/cli/)
+
+### Dokumentace
+
+Když se vývojář chce naučit něco nového, pravděpodobně se obrátí na dokumentaci, aby se naučil, jak to používat. Vývojáři často spoléhají na dokumentaci, aby je provedla správným používáním nástrojů a jazyků, a také aby získali hlubší znalosti o tom, jak fungují.
+
+#### Populární dokumentace o webovém vývoji
+
+- [Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web), od Mozilly, vydavatele prohlížeče [Firefox](https://www.mozilla.org/firefox/)
+- [Frontend Masters](https://frontendmasters.com/learn/)
+- [Web.dev](https://web.dev), od Googlu, vydavatele [Chrome](https://www.google.com/chrome/)
+- [Microsoftova vlastní dokumentace pro vývojáře](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers), pro [Microsoft Edge](https://www.microsoft.com/edge)
+- [W3 Schools](https://www.w3schools.com/where_to_start.asp)
+
+✅ Udělejte si průzkum: Nyní, když znáte základy prostředí webového vývojáře, porovnejte a kontrastujte je s prostředím webového designéra.
+
+---
+
+## 🚀 Výzva
+
+Porovnejte některé programovací jazyky. Jaké jsou jedinečné vlastnosti JavaScriptu oproti Javě? A co třeba COBOL oproti Go?
+
+## Kvíz po lekci
+[Kvíz po lekci](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/2)
+
+## Přehled a samostudium
+
+Prostudujte si různé jazyky dostupné pro programátora. Zkuste napsat jeden řádek v jednom jazyce a poté jej přepište do dvou dalších. Co jste se naučili?
+
+## Zadání
+
+[Čtení dokumentace](assignment.md)
+
+---
+
+**Prohlášení**:  
+Tento dokument byl přeložen pomocí služby pro automatický překlad [Co-op Translator](https://github.com/Azure/co-op-translator). I když se snažíme o přesnost, mějte prosím na paměti, že automatické překlady mohou obsahovat chyby nebo nepřesnosti. Původní dokument v jeho původním jazyce by měl být považován za autoritativní zdroj. Pro důležité informace se doporučuje profesionální lidský překlad. Neodpovídáme za žádné nedorozumění nebo nesprávné interpretace vyplývající z použití tohoto překladu.
\ No newline at end of file
diff --git a/translations/cs/1-getting-started-lessons/1-intro-to-programming-languages/assignment.md b/translations/cs/1-getting-started-lessons/1-intro-to-programming-languages/assignment.md
new file mode 100644
index 00000000..806e0201
--- /dev/null
+++ b/translations/cs/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-28T04:31:44+00:00",
+  "source_file": "1-getting-started-lessons/1-intro-to-programming-languages/assignment.md",
+  "language_code": "cs"
+}
+-->
+# Čtení dokumentace
+
+## Instrukce
+
+Existuje mnoho nástrojů, které může webový vývojář potřebovat, a které jsou uvedeny na [MDN dokumentaci pro nástroje na straně klienta](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview). Vyberte 3 nástroje, které nebyly pokryty v lekci, vysvětlete, proč by je webový vývojář použil, a vyhledejte nástroj, který spadá do této kategorie, a sdílejte jeho dokumentaci. Nepoužívejte stejný příklad nástroje jako v MDN dokumentaci.
+
+## Hodnocení
+
+Vynikající | Dostatečné | Potřebuje zlepšení
+--- | --- | -- |
+|Vysvětleno, proč by webový vývojář použil nástroj| Vysvětleno, jak, ale ne proč by vývojář použil nástroj| Nebylo zmíněno, jak nebo proč by vývojář použil nástroj |
+
+---
+
+**Prohlášení**:  
+Tento dokument byl přeložen pomocí služby AI pro překlady [Co-op Translator](https://github.com/Azure/co-op-translator). Ačkoli se snažíme o přesnost, mějte prosím na paměti, že automatizované překlady mohou obsahovat chyby nebo nepřesnosti. Původní dokument v jeho původním jazyce by měl být považován za autoritativní zdroj. Pro kritické informace se doporučuje profesionální lidský překlad. Neodpovídáme za žádná nedorozumění nebo nesprávné interpretace vyplývající z použití tohoto překladu.
\ No newline at end of file
diff --git a/translations/cs/1-getting-started-lessons/2-github-basics/README.md b/translations/cs/1-getting-started-lessons/2-github-basics/README.md
new file mode 100644
index 00000000..5206f659
--- /dev/null
+++ b/translations/cs/1-getting-started-lessons/2-github-basics/README.md
@@ -0,0 +1,339 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "05666cecb8983a72cf0ce1d18932b5b7",
+  "translation_date": "2025-08-28T04:38:44+00:00",
+  "source_file": "1-getting-started-lessons/2-github-basics/README.md",
+  "language_code": "cs"
+}
+-->
+# Úvod do GitHubu
+
+Tato lekce pokrývá základy GitHubu, platformy pro hostování a správu změn ve vašem kódu.
+
+![Úvod do GitHubu](../../../../translated_images/webdev101-github.8846d7971abef6f947909b4f9d343e2a23778aa716ca6b9d71df7174ee5009ac.cs.png)
+> Sketchnote od [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Kvíz před lekcí
+[Kvíz před lekcí](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/3)
+
+## Úvod
+
+V této lekci se naučíte:
+
+- sledovat práci, kterou děláte na svém počítači
+- pracovat na projektech s ostatními
+- jak přispívat do open source softwaru
+
+### Předpoklady
+
+Než začnete, musíte zkontrolovat, zda máte nainstalovaný Git. V terminálu napište:  
+`git --version`
+
+Pokud Git není nainstalován, [stáhněte Git](https://git-scm.com/downloads). Poté nastavte svůj lokální Git profil v terminálu:
+* `git config --global user.name "vaše-jméno"`
+* `git config --global user.email "váš-email"`
+
+Pro kontrolu, zda je Git již nakonfigurován, napište:
+`git config --list`
+
+Budete také potřebovat účet na GitHubu, editor kódu (například Visual Studio Code) a otevřený terminál (nebo příkazový řádek).
+
+Přejděte na [github.com](https://github.com/) a vytvořte si účet, pokud ho ještě nemáte, nebo se přihlaste a vyplňte svůj profil.
+
+✅ GitHub není jediným úložištěm kódu na světě; existují i další, ale GitHub je nejznámější.
+
+### Příprava
+
+Budete potřebovat složku s projektem kódu na svém lokálním počítači (notebooku nebo PC) a veřejné úložiště na GitHubu, které poslouží jako příklad, jak přispívat do projektů ostatních.
+
+---
+
+## Správa kódu
+
+Řekněme, že máte lokální složku s nějakým projektem kódu a chcete začít sledovat svůj pokrok pomocí gitu – systému pro správu verzí. Někteří lidé přirovnávají používání gitu k psaní milostného dopisu svému budoucímu já. Čtením vašich zpráv o commitech po dnech, týdnech nebo měsících si budete schopni vybavit, proč jste udělali určité rozhodnutí, nebo "vrátit zpět" změnu – samozřejmě za předpokladu, že píšete dobré zprávy o commitech.
+
+### Úkol: Vytvořte úložiště a commitujte kód  
+
+> Podívejte se na video  
+> 
+> [![Video o základech Gitu a GitHubu](https://img.youtube.com/vi/9R31OUPpxU4/0.jpg)](https://www.youtube.com/watch?v=9R31OUPpxU4)
+
+1. **Vytvořte úložiště na GitHubu**. Na GitHub.com, na záložce úložiště nebo z navigačního panelu vpravo nahoře, najděte tlačítko **new repo**.
+
+   1. Dejte svému úložišti (složce) název.
+   1. Vyberte **create repository**.
+
+1. **Přejděte do své pracovní složky**. V terminálu přepněte do složky (také známé jako adresář), kterou chcete začít sledovat. Napište:
+
+   ```bash
+   cd [name of your folder]
+   ```
+
+1. **Inicializujte git úložiště**. Ve svém projektu napište:
+
+   ```bash
+   git init
+   ```
+
+1. **Zkontrolujte stav**. Pro kontrolu stavu svého úložiště napište:
+
+   ```bash
+   git status
+   ```
+
+   Výstup může vypadat nějak takto:
+
+   ```output
+   Changes not staged for commit:
+   (use "git add <file>..." to update what will be committed)
+   (use "git checkout -- <file>..." to discard changes in working directory)
+
+        modified:   file.txt
+        modified:   file2.txt
+   ```
+
+   Typicky příkaz `git status` říká věci jako, které soubory jsou připraveny k _uložení_ do úložiště nebo mají změny, které byste mohli chtít zachovat.
+
+1. **Přidejte všechny soubory ke sledování**  
+   Toto se také nazývá staging souborů/přidávání souborů do staging oblasti.
+
+   ```bash
+   git add .
+   ```
+
+   Argument `git add` plus `.` označuje, že všechny vaše soubory a změny jsou připraveny ke sledování.
+
+1. **Přidejte vybrané soubory ke sledování**
+
+   ```bash
+   git add [file or folder name]
+   ```
+
+   To nám pomáhá přidat pouze vybrané soubory do staging oblasti, když nechceme commitovat všechny soubory najednou.
+
+1. **Zrušte staging všech souborů**
+
+   ```bash
+   git reset
+   ```
+
+   Tento příkaz nám pomáhá zrušit staging všech souborů najednou.
+
+1. **Zrušte staging konkrétního souboru**
+
+   ```bash
+   git reset [file or folder name]
+   ```
+
+   Tento příkaz nám pomáhá zrušit staging pouze konkrétního souboru najednou, který nechceme zahrnout do dalšího commitu.
+
+1. **Uložte svou práci**. V tomto bodě jste přidali soubory do tzv. _staging oblasti_. Místo, kde Git sleduje vaše soubory. Aby byla změna trvalá, musíte soubory _commitovat_. K tomu vytvoříte _commit_ pomocí příkazu `git commit`. _Commit_ představuje bod uložení v historii vašeho úložiště. Napište následující pro vytvoření _commitu_:
+
+   ```bash
+   git commit -m "first commit"
+   ```
+
+   Tento commit uloží všechny vaše soubory a přidá zprávu "first commit". Pro budoucí zprávy o commitech budete chtít být více popisní, abyste sdělili, jaký typ změny jste provedli.
+
+1. **Propojte své lokální Git úložiště s GitHubem**. Git úložiště je dobré na vašem počítači, ale v určitém bodě budete chtít mít zálohu svých souborů někde jinde a také pozvat ostatní, aby s vámi pracovali na vašem úložišti. Jedním z takových skvělých míst je GitHub. Pamatujte, že jsme již vytvořili úložiště na GitHubu, takže jediná věc, kterou musíme udělat, je propojit naše lokální Git úložiště s GitHubem. Příkaz `git remote add` to udělá. Napište následující příkaz:
+
+   > Poznámka: Před zadáním příkazu přejděte na stránku svého GitHub úložiště a najděte URL úložiště. Použijete ho v níže uvedeném příkazu. Nahraďte ```https://github.com/username/repository_name.git``` svým GitHub URL.
+
+   ```bash
+   git remote add origin https://github.com/username/repository_name.git
+   ```
+
+   Tento příkaz vytvoří _remote_, nebo spojení, nazvané "origin", které ukazuje na GitHub úložiště, které jste vytvořili dříve.
+
+1. **Pošlete lokální soubory na GitHub**. Doposud jste vytvořili _spojení_ mezi lokálním úložištěm a GitHub úložištěm. Pošlete tyto soubory na GitHub pomocí následujícího příkazu `git push`, takto: 
+
+   > Poznámka: Název vaší větve může být ve výchozím nastavení odlišný od ```main```.
+
+   ```bash
+   git push -u origin main
+   ```
+
+   Tento příkaz pošle vaše commity ve vaší větvi "main" na GitHub.
+
+2. **Přidávejte další změny**. Pokud chcete pokračovat v provádění změn a jejich posílání na GitHub, budete potřebovat pouze následující tři příkazy:
+
+   ```bash
+   git add .
+   git commit -m "type your commit message here"
+   git push
+   ```
+
+   > Tip: Možná budete chtít přijmout soubor `.gitignore`, abyste zabránili tomu, aby se soubory, které nechcete sledovat, objevily na GitHubu – například ten soubor s poznámkami, který ukládáte ve stejné složce, ale nemá místo ve veřejném úložišti. Šablony pro soubory `.gitignore` najdete na [.gitignore templates](https://github.com/github/gitignore).
+
+#### Zprávy o commitech
+
+Skvělý předmět zprávy o commitu dokončuje následující větu:  
+Pokud bude aplikováno, tento commit <váš předmět zde>
+
+Pro předmět použijte imperativní přítomný čas: "změnit" místo "změněno" nebo "změny".  
+Stejně jako v předmětu, i v těle (volitelném) použijte imperativní přítomný čas. Tělo by mělo zahrnovat motivaci ke změně a kontrastovat to s předchozím chováním. Vysvětlujete `proč`, ne `jak`.
+
+✅ Věnujte pár minut prohlížení GitHubu. Najdete opravdu skvělou zprávu o commitu? Najdete opravdu minimalistickou? Jaké informace si myslíte, že jsou nejdůležitější a nejužitečnější pro sdělení ve zprávě o commitu?
+
+### Úkol: Spolupracujte
+
+Hlavním důvodem pro umístění věcí na GitHub bylo umožnit spolupráci s ostatními vývojáři.
+
+## Práce na projektech s ostatními
+
+> Podívejte se na video  
+>
+> [![Video o základech Gitu a GitHubu](https://img.youtube.com/vi/bFCM-PC3cu8/0.jpg)](https://www.youtube.com/watch?v=bFCM-PC3cu8)
+
+Ve svém úložišti přejděte na `Insights > Community`, abyste viděli, jak váš projekt odpovídá doporučeným komunitním standardům.
+
+   Zde jsou některé věci, které mohou zlepšit vaše GitHub úložiště:
+   - **Popis**. Přidali jste popis svého projektu?
+   - **README**. Přidali jste README? GitHub poskytuje pokyny pro psaní [README](https://docs.github.com/articles/about-readmes/?WT.mc_id=academic-77807-sagibbon).
+   - **Pokyny pro přispívání**. Má váš projekt [pokyny pro přispívání](https://docs.github.com/articles/setting-guidelines-for-repository-contributors/?WT.mc_id=academic-77807-sagibbon)?
+   - **Kodex chování**. Má váš projekt [Kodex chování](https://docs.github.com/articles/adding-a-code-of-conduct-to-your-project/)?
+   - **Licence**. Možná nejdůležitější, má váš projekt [licenci](https://docs.github.com/articles/adding-a-license-to-a-repository/)?
+
+Všechny tyto zdroje budou přínosem pro onboarding nových členů týmu. A to jsou typicky věci, na které se noví přispěvatelé dívají, než se podívají na váš kód, aby zjistili, zda je váš projekt tím správným místem, kde by měli trávit svůj čas.
+
+✅ README soubory, i když jejich příprava zabere čas, jsou často přehlíženy zaneprázdněnými správci. Najdete příklad obzvláště popisného README? Poznámka: existují některé [nástroje pro vytvoření dobrých README](https://www.makeareadme.com/), které byste mohli vyzkoušet.
+
+### Úkol: Sloučte nějaký kód
+
+Dokumenty pro přispívání pomáhají lidem přispívat do projektu. Vysvětlují, jaké typy příspěvků hledáte a jak proces funguje. Přispěvatelé budou muset projít sérií kroků, aby mohli přispět do vašeho úložiště na GitHubu:
+
+1. **Forkování vašeho úložiště**. Pravděpodobně budete chtít, aby lidé _forkovali_ váš projekt. Forkování znamená vytvoření repliky vašeho úložiště na jejich GitHub profilu.
+1. **Klonování**. Odtud si projekt naklonují na svůj lokální počítač.
+1. **Vytvoření větve**. Budete chtít požádat je, aby vytvořili _větev_ pro svou práci.
+1. **Zaměření změny na jednu oblast**. Požádejte přispěvatele, aby se soustředili na jednu věc najednou – tím se zvýší šance, že budete moci jejich práci _sloučit_. Představte si, že opraví chybu, přidají novou funkci a aktualizují několik testů – co když chcete, nebo můžete implementovat pouze 2 ze 3, nebo 1 ze 3 změn?
+
+✅ Představte si situaci, kdy jsou větve obzvláště důležité pro psaní a dodávání kvalitního kódu. Jaké případy použití vás napadají?
+
+> Poznámka: Buďte změnou, kterou chcete vidět ve světě, a vytvářejte větve i pro svou vlastní práci. Jakékoliv commity, které provedete, budou provedeny na větvi, na kterou jste aktuálně "přepnuti". Použijte `git status`, abyste viděli, na které větvi právě jste.
+
+Pojďme projít workflow přispěvatele. Předpokládejme, že přispěvatel již _forkoval_ a _naklonoval_ úložiště, takže má Git úložiště připravené k práci na svém lokálním počítači:
+
+1. **Vytvoření větve**. Použijte příkaz `git branch` k vytvoření větve, která bude obsahovat změny, které chtějí přispět:
+
+   ```bash
+   git branch [branch-name]
+   ```
+
+1. **Přepnutí na pracovní větev**. Přepněte na specifikovanou větev a aktualizujte pracovní adresář pomocí `git switch`:
+
+   ```bash
+   git switch [branch-name]
+   ```
+
+1. **Práce**. V tomto bodě chcete přidat své změny. Nezapomeňte o tom informovat Git pomocí následujících příkazů:
+
+   ```bash
+   git add .
+   git commit -m "my changes"
+   ```
+
+   Ujistěte se, že dáváte svému commitu dobrý název, pro vaše dobro i pro správce úložiště, na kterém pomáháte.
+
+1. **Sloučení vaší práce s větví `main`**. V určitém bodě jste hotovi s prací a chcete sloučit svou práci s větví `main`. Větev `main` se mezitím mohla změnit, takže se ujistěte, že ji nejprve aktualizujete na nejnovější pomocí následujících příkazů:
+
+   ```bash
+   git switch main
+   git pull
+   ```
+
+   V tomto bodě se chcete ujistit, že jakékoliv _konflikty_, situace, kdy Git nemůže snadno _sloučit_ změny, se objeví ve vaší pracovní větvi. Proto spusťte následující příkazy:
+
+   ```bash
+   git switch [branch_name]
+   git merge main
+   ```
+
+   Tento příkaz přinese všechny změny z `main` do vaší větve a doufejme, že můžete pokračovat. Pokud ne, VS Code vám ukáže, kde je Git _zmatený_, a vy jen upravíte dotčené soubory, abyste určili, který obsah je nejpřesnější.
+
+1. **Pošlete svou práci na GitHub**. Poslání vaší práce na GitHub znamená dvě věci. Pushnutí vaší větve na vaše úložiště a poté otevření PR, Pull Request.
+
+   ```bash
+   git push --set-upstream origin [branch-name]
+   ```
+
+   Výše uvedený příkaz vytvoří větev na vašem forkovaném úložišti.
+
+1. **Otevřete PR**. Dále chcete otevřít PR. Uděláte to tak, že přejdete na forkované úložiště na GitHubu. Uvidíte indikaci na GitHubu, kde se vás zeptá, zda chcete vytvořit nový PR, kliknete na to a budete přesměrováni na rozhraní, kde můžete změnit název zprávy o commitu, dát jí vhodnější popis. Nyní správce úložiště, které jste forkovali, uvidí tento PR a _držte palce_, že ho ocení a _sloučí_ váš PR. Nyní jste přispěvatel, hurá :)
+
+1. **Úklid**. Je považováno za dobrý zvyk _uklidit_ po úspěšném sloučení PR. Chcete uklidit jak svou lokální větev, tak větev, kterou jste pushovali na GitHub. Nejprve ji smažte lokálně pomocí následujícího příkazu:
+
+   ```bash
+   git branch -d [branch-name]
+   ```
+Ujistěte se, že přejdete na stránku GitHub pro forknuté repo a odstraníte vzdálenou větev, kterou jste právě do něj nahráli.
+
+`Pull request` se může zdát jako zvláštní termín, protože ve skutečnosti chcete své změny "pushnout" do projektu. Ale správce (vlastník projektu) nebo hlavní tým musí zvážit vaše změny, než je sloučí s "hlavní" větví projektu, takže ve skutečnosti žádáte správce o rozhodnutí ohledně změny.
+
+Pull request je místo, kde můžete porovnávat a diskutovat rozdíly zavedené na větvi pomocí recenzí, komentářů, integrovaných testů a dalších nástrojů. Dobrý pull request se řídí přibližně stejnými pravidly jako zpráva o commitu. Můžete přidat odkaz na problém v trackeru problémů, například když vaše práce řeší nějaký problém. To se provádí pomocí `#` následovaného číslem vašeho problému. Například `#97`.
+
+🤞Držte palce, aby všechny kontroly prošly a vlastník(y) projektu sloučili vaše změny do projektu🤞
+
+Aktualizujte svou aktuální lokální pracovní větev všemi novými commity z odpovídající vzdálené větve na GitHubu:
+
+`git pull`
+
+## Jak přispět do open source
+
+Nejprve najděte na GitHubu repozitář (nebo **repo**), který vás zajímá a do kterého byste chtěli přispět změnou. Budete chtít zkopírovat jeho obsah na svůj počítač.
+
+✅ Dobrým způsobem, jak najít repozitáře vhodné pro začátečníky, je [vyhledávání podle tagu 'good-first-issue'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/).
+
+![Zkopírujte repo lokálně](../../../../translated_images/clone_repo.5085c48d666ead57664f050d806e325d7f883be6838c821e08bc823ab7c66665.cs.png)
+
+Existuje několik způsobů, jak zkopírovat kód. Jedním ze způsobů je "klonování" obsahu repozitáře pomocí HTTPS, SSH nebo GitHub CLI (Command Line Interface).
+
+Otevřete svůj terminál a klonujte repozitář takto:
+`git clone https://github.com/ProjectURL`
+
+Pro práci na projektu přepněte do správné složky:
+`cd ProjectURL`
+
+Celý projekt můžete také otevřít pomocí [Codespaces](https://github.com/features/codespaces), integrovaného editoru kódu / cloudového vývojového prostředí GitHubu, nebo [GitHub Desktop](https://desktop.github.com/).
+
+Nakonec můžete kód stáhnout ve formě zipovaného souboru.
+
+### Několik dalších zajímavých věcí o GitHubu
+
+Na GitHubu můžete "hvězdičkovat", sledovat nebo "forkovat" jakýkoli veřejný repozitář. Své hvězdičkované repozitáře najdete v rozbalovací nabídce v pravém horním rohu. Je to jako záložky, ale pro kód.
+
+Projekty mají tracker problémů, většinou na GitHubu v záložce "Issues", pokud není uvedeno jinak, kde lidé diskutují o problémech souvisejících s projektem. A záložka Pull Requests je místem, kde lidé diskutují a recenzují změny, které jsou v procesu.
+
+Projekty mohou mít také diskuse ve fórech, mailing listech nebo chatovacích kanálech jako Slack, Discord nebo IRC.
+
+✅ Prozkoumejte svůj nový GitHub repozitář a vyzkoušejte několik věcí, jako je úprava nastavení, přidání informací do repozitáře a vytvoření projektu (například Kanban board). Je toho hodně, co můžete dělat!
+
+---
+
+## 🚀 Výzva
+
+Spojte se s kamarádem a pracujte na kódu toho druhého. Vytvořte projekt společně, forkněte kód, vytvořte větve a sloučte změny.
+
+## Kvíz po přednášce
+[Kvíz po přednášce](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/4)
+
+## Přehled & Samostudium
+
+Přečtěte si více o [přispívání do open source softwaru](https://opensource.guide/how-to-contribute/#how-to-submit-a-contribution).
+
+[Git cheatsheet](https://training.github.com/downloads/github-git-cheat-sheet/).
+
+Procvičujte, procvičujte, procvičujte. GitHub má skvělé vzdělávací cesty dostupné na [skills.github.com](https://skills.github.com):
+
+- [První týden na GitHubu](https://skills.github.com/#first-week-on-github)
+
+Najdete zde také pokročilejší kurzy.
+
+## Úkol
+
+Dokončete [kurz První týden na GitHubu](https://skills.github.com/#first-week-on-github)
+
+---
+
+**Prohlášení**:  
+Tento dokument byl přeložen pomocí služby pro automatický překlad [Co-op Translator](https://github.com/Azure/co-op-translator). Ačkoli se snažíme o přesnost, mějte na paměti, že automatické překlady mohou obsahovat chyby nebo nepřesnosti. Původní dokument v jeho původním jazyce by měl být považován za autoritativní zdroj. Pro důležité informace doporučujeme profesionální lidský překlad. Neodpovídáme za žádné nedorozumění nebo nesprávné interpretace vyplývající z použití tohoto překladu.
\ No newline at end of file
diff --git a/translations/cs/1-getting-started-lessons/3-accessibility/README.md b/translations/cs/1-getting-started-lessons/3-accessibility/README.md
new file mode 100644
index 00000000..b03846df
--- /dev/null
+++ b/translations/cs/1-getting-started-lessons/3-accessibility/README.md
@@ -0,0 +1,183 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "e4cd5b1faed4adab5acf720f82798003",
+  "translation_date": "2025-08-28T04:35:31+00:00",
+  "source_file": "1-getting-started-lessons/3-accessibility/README.md",
+  "language_code": "cs"
+}
+-->
+# Vytváření přístupných webových stránek
+
+![Vše o přístupnosti](../../../../translated_images/webdev101-a11y.8ef3025c858d897a403a1a42c0897c76e11b724d9a8a0c0578dd4316f7507622.cs.png)  
+> Sketchnote od [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Kvíz před lekcí  
+[Kvíz před lekcí](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/5)
+
+> Síla webu spočívá v jeho univerzálnosti. Přístup pro každého, bez ohledu na postižení, je zásadní aspekt.  
+>  
+> \- Sir Timothy Berners-Lee, ředitel W3C a vynálezce World Wide Webu  
+
+Tento citát dokonale zdůrazňuje důležitost vytváření přístupných webových stránek. Aplikace, která není přístupná všem, je ze své podstaty vylučující. Jako weboví vývojáři bychom měli mít přístupnost vždy na paměti. Pokud se na ni zaměříte již od začátku, budete na dobré cestě k tomu, aby vaše stránky byly přístupné pro všechny. V této lekci se naučíte, jaké nástroje vám mohou pomoci zajistit přístupnost vašich webových prostředků a jak přístupnost zohlednit při vývoji.  
+
+> Tuto lekci si můžete projít na [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/accessibility/?WT.mc_id=academic-77807-sagibbon)!
+
+## Nástroje, které můžete použít
+
+### Čtečky obrazovky
+
+Jedním z nejznámějších nástrojů pro přístupnost jsou čtečky obrazovky.
+
+[Čtečky obrazovky](https://en.wikipedia.org/wiki/Screen_reader) jsou běžně používané klienty pro osoby se zrakovým postižením. Stejně jako se snažíme zajistit, aby prohlížeč správně zobrazoval informace, které chceme sdílet, musíme také zajistit, aby čtečka obrazovky dělala totéž.
+
+V nejzákladnější podobě čtečka obrazovky čte stránku odshora dolů nahlas. Pokud je vaše stránka pouze textová, čtečka předá informace podobně jako prohlížeč. Webové stránky však zřídka obsahují pouze text; obvykle obsahují odkazy, grafiku, barvy a další vizuální prvky. Je třeba dbát na to, aby čtečka obrazovky tyto informace správně interpretovala.
+
+Každý webový vývojář by se měl seznámit s čtečkou obrazovky. Jak bylo uvedeno výše, je to klient, který vaši uživatelé budou používat. Stejně jako znáte fungování prohlížeče, měli byste se naučit, jak funguje čtečka obrazovky. Naštěstí jsou čtečky obrazovky součástí většiny operačních systémů.
+
+Některé prohlížeče mají také vestavěné nástroje a rozšíření, která dokážou číst text nahlas nebo poskytovat základní navigační funkce, například [tyto nástroje zaměřené na přístupnost v prohlížeči Edge](https://support.microsoft.com/help/4000734/microsoft-edge-accessibility-features). Tyto nástroje jsou také důležité, ale fungují velmi odlišně od čteček obrazovky a neměly by být zaměňovány za nástroje pro testování čteček obrazovky.
+
+✅ Vyzkoušejte čtečku obrazovky a čtečku textu v prohlížeči. Ve Windows je standardně zahrnuta [Narrator](https://support.microsoft.com/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c172f109bdb1/?WT.mc_id=academic-77807-sagibbon), dále lze nainstalovat [JAWS](https://webaim.org/articles/jaws/) a [NVDA](https://www.nvaccess.org/about-nvda/). Na macOS a iOS je standardně nainstalován [VoiceOver](https://support.apple.com/guide/voiceover/welcome/10).
+
+### Přiblížení (Zoom)
+
+Dalším nástrojem, který běžně používají lidé se zrakovým postižením, je přiblížení. Nejzákladnější typ přiblížení je statický zoom, ovládaný pomocí `Control + znaménko plus (+)` nebo snížením rozlišení obrazovky. Tento typ přiblížení zvětší celou stránku, takže použití [responsivního designu](https://developer.mozilla.org/docs/Learn/CSS/CSS_layout/Responsive_Design) je důležité pro zajištění dobrého uživatelského zážitku při vyšších úrovních přiblížení.
+
+Další typ přiblížení spoléhá na specializovaný software, který zvětšuje jednu oblast obrazovky a posouvá ji, podobně jako při použití skutečné lupy. Ve Windows je vestavěný [Lupa](https://support.microsoft.com/windows/use-magnifier-to-make-things-on-the-screen-easier-to-see-414948ba-8b1c-d3bd-8615-0e5e32204198), zatímco [ZoomText](https://www.freedomscientific.com/training/zoomtext/getting-started/) je software třetí strany s více funkcemi a širší uživatelskou základnou. Na macOS a iOS je vestavěný software pro zvětšení obrazovky nazvaný [Zoom](https://www.apple.com/accessibility/mac/vision/).
+
+### Kontrola kontrastu
+
+Barvy na webových stránkách je třeba pečlivě vybírat, aby vyhovovaly potřebám uživatelů s barvoslepostí nebo osob, které mají potíže s viděním barev s nízkým kontrastem.
+
+✅ Otestujte oblíbenou webovou stránku na použití barev pomocí rozšíření prohlížeče, například [kontroloru kontrastu WCAG](https://microsoftedge.microsoft.com/addons/detail/wcag-color-contrast-check/idahaggnlnekelhgplklhfpchbfdmkjp?hl=en-US&WT.mc_id=academic-77807-sagibbon). Co jste zjistili?
+
+### Lighthouse
+
+V oblasti vývojářských nástrojů vašeho prohlížeče najdete nástroj Lighthouse. Tento nástroj je důležitý pro získání prvního pohledu na přístupnost (a další analýzy) webové stránky. I když není vhodné spoléhat se výhradně na Lighthouse, skóre 100 % je velmi užitečné jako základní ukazatel.
+
+✅ Najděte Lighthouse v panelu vývojářských nástrojů vašeho prohlížeče a spusťte analýzu na libovolné stránce. Co jste zjistili?
+
+## Navrhování pro přístupnost
+
+Přístupnost je poměrně rozsáhlé téma. Naštěstí existuje mnoho zdrojů, které vám mohou pomoci.
+
+- [Accessible U - University of Minnesota](https://accessibility.umn.edu/your-role/web-developers)
+
+I když nebudeme schopni pokrýt všechny aspekty vytváření přístupných stránek, níže jsou uvedeny některé základní principy, které byste měli implementovat. Navrhování přístupné stránky od začátku je **vždy** jednodušší než zpětné úpravy existující stránky.
+
+## Zásady dobrého zobrazení
+
+### Bezpečné barevné palety
+
+Lidé vidí svět různými způsoby, což zahrnuje i barvy. Při výběru barevného schématu pro váš web byste měli zajistit, že bude přístupné pro všechny. Skvělým [nástrojem pro generování barevných palet je Color Safe](http://colorsafe.co/).
+
+✅ Najděte webovou stránku, která má velké problémy s použitím barev. Proč?
+
+### Používejte správné HTML
+
+Pomocí CSS a JavaScriptu je možné vytvořit jakýkoli prvek, který vypadá jako jakýkoli typ ovládacího prvku. `<span>` by mohl být použit k vytvoření `<button>` a `<b>` by se mohl stát hypertextovým odkazem. I když to může být považováno za jednodušší pro stylování, čtečce obrazovky to nic neřekne. Používejte správné HTML při vytváření ovládacích prvků na stránce. Pokud chcete hypertextový odkaz, použijte `<a>`. Používání správného HTML pro správný ovládací prvek se nazývá využívání sémantického HTML.
+
+✅ Navštivte libovolnou webovou stránku a zjistěte, zda designéři a vývojáři používají HTML správně. Najdete tlačítko, které by mělo být odkazem? Tip: Klikněte pravým tlačítkem a vyberte 'Zobrazit zdroj stránky' ve vašem prohlížeči, abyste se podívali na základní kód.
+
+### Vytvořte popisnou hierarchii nadpisů
+
+Uživatelé čteček obrazovky [se silně spoléhají na nadpisy](https://webaim.org/projects/screenreadersurvey8/#finding) při hledání informací a navigaci na stránce. Psaní popisného obsahu nadpisů a používání sémantických značek nadpisů je důležité pro vytvoření snadno navigovatelné stránky pro uživatele čteček obrazovky.
+
+### Používejte dobré vizuální nápovědy
+
+CSS nabízí úplnou kontrolu nad vzhledem jakéhokoli prvku na stránce. Můžete vytvořit textová pole bez obrysu nebo hypertextové odkazy bez podtržení. Bohužel odstranění těchto nápověd může ztížit rozpoznání typu ovládacího prvku pro někoho, kdo na nich závisí.
+
+## Důležitost textu odkazů
+
+Hypertextové odkazy jsou klíčové pro navigaci na webu. Proto je důležité zajistit, aby čtečka obrazovky mohla správně číst odkazy, což umožní všem uživatelům navigovat na vašem webu.
+
+### Čtečky obrazovky a odkazy
+
+Jak byste očekávali, čtečky obrazovky čtou text odkazů stejným způsobem jako jakýkoli jiný text na stránce. S tímto na paměti se může zdát, že níže uvedený text je zcela přijatelný.
+
+> Malý tučňák, někdy známý jako pohádkový tučňák, je nejmenší tučňák na světě. [Klikněte zde](https://en.wikipedia.org/wiki/Little_penguin) pro více informací.
+
+> Malý tučňák, někdy známý jako pohádkový tučňák, je nejmenší tučňák na světě. Navštivte https://en.wikipedia.org/wiki/Little_penguin pro více informací.
+
+> **NOTE** Jak se brzy dozvíte, nikdy byste neměli vytvářet odkazy, které vypadají jako výše uvedené.
+
+Pamatujte, že čtečky obrazovky jsou jiné rozhraní než prohlížeče a mají jinou sadu funkcí.
+
+### Problém s použitím URL
+
+Čtečky obrazovky čtou text. Pokud se v textu objeví URL, čtečka obrazovky přečte URL. Obecně řečeno, URL nepředává smysluplné informace a může znít nepříjemně. Možná jste to zažili, pokud vám telefon někdy nahlas přečetl textovou zprávu s URL.
+
+### Problém s "klikněte zde"
+
+Čtečky obrazovky mají také schopnost číst pouze hypertextové odkazy na stránce, podobně jako by vidící osoba procházela stránku a hledala odkazy. Pokud je text odkazu vždy "klikněte zde", uživatel uslyší pouze "klikněte zde, klikněte zde, klikněte zde, klikněte zde, klikněte zde, ..." Všechny odkazy jsou nyní nerozlišitelné.
+
+### Dobrý text odkazu
+
+Dobrý text odkazu stručně popisuje, co je na druhé straně odkazu. V uvedeném příkladu o malých tučňácích odkazuje odkaz na stránku Wikipedie o tomto druhu. Fráze *malý tučňák* by byla ideálním textem odkazu, protože jasně říká, co se uživatel dozví, pokud na odkaz klikne - malý tučňák.
+
+> [Malý tučňák](https://en.wikipedia.org/wiki/Little_penguin), někdy známý jako pohádkový tučňák, je nejmenší tučňák na světě.
+
+✅ Procházejte web několik minut a najděte stránky, které používají nejasné strategie odkazování. Porovnejte je s jinými, lépe propojenými stránkami. Co jste zjistili?
+
+#### Poznámky k vyhledávačům
+
+Jako bonus za zajištění přístupnosti vašeho webu pomůžete také vyhledávačům navigovat na vašem webu. Vyhledávače používají text odkazů k pochopení témat stránek. Používání dobrého textu odkazů tedy pomáhá všem!
+
+### ARIA
+
+Představte si následující stránku:
+
+| Produkt      | Popis             | Objednat     |
+| ------------ | ----------------- | ------------ |
+| Widget       | [Popis](../../../../1-getting-started-lessons/3-accessibility/')      | [Objednat](../../../../1-getting-started-lessons/3-accessibility/') |
+| Super widget | [Popis](../../../../1-getting-started-lessons/3-accessibility/')      | [Objednat](../../../../1-getting-started-lessons/3-accessibility/') |
+
+V tomto příkladu dává smysl duplikovat text "popis" a "objednat" pro někoho, kdo používá prohlížeč. Uživatel čtečky obrazovky by však slyšel pouze slova *popis* a *objednat* opakovaně bez kontextu.
+
+Pro podporu těchto scénářů HTML podporuje sadu atributů známých jako [Accessible Rich Internet Applications (ARIA)](https://developer.mozilla.org/docs/Web/Accessibility/ARIA). Tyto atributy umožňují poskytovat čtečkám obrazovky další informace.
+
+> **NOTE**: Stejně jako u mnoha aspektů HTML se podpora prohlížečů a čteček obrazovky může lišit. Většina hlavních klientů však atributy ARIA podporuje.
+
+Pomocí `aria-label` můžete popsat odkaz, když formát stránky neumožňuje jinak. Popis pro widget by mohl být nastaven jako:
+
+``` html
+<a href="#" aria-label="Widget description">description</a>
+```
+
+✅ Obecně platí, že používání sémantického označení, jak bylo popsáno výše, má přednost před použitím ARIA, ale někdy neexistuje sémantický ekvivalent pro různé HTML widgety. Dobrým příkladem je stromová struktura. Pro tento prvek neexistuje HTML ekvivalent, takže generický `<div>` označíte správnou rolí a hodnotami ARIA. [Dokumentace MDN o ARIA](https://developer.mozilla.org/docs/Web/Accessibility/ARIA) obsahuje další užitečné informace.
+
+```html
+<h2 id="tree-label">File Viewer</h2>
+<div role="tree" aria-labelledby="tree-label">
+  <div role="treeitem" aria-expanded="false" tabindex="0">Uploads</div>
+</div>
+```
+
+## Obrázky
+
+Je samozřejmé, že čtečky obrazovky nemohou automaticky přečíst, co je na obrázku. Zajištění přístupnosti obrázků nevyžaduje mnoho práce - právě k tomu slouží atribut `alt`. Všechny smysluplné obrázky by měly mít atribut `alt`, který popisuje, co představují.  
+Obrázky, které jsou čistě dekorativní, by měly mít atribut `alt` nastavený na prázdný řetězec: `alt=""`. Tím se zabrání tomu, aby čtečky obrazovky zbytečně oznamovaly dekorativní obrázek.
+
+✅ Jak byste očekávali, vyhledávače také nemohou pochopit, co je na obrázku. Používají také text alt. Takže opět, zajištění přístupnosti vaší stránky přináší další výhody!
+
+## Klávesnice
+
+Někteří uživatelé nemohou používat myš nebo trackpad a spoléhají se na interakce pomocí klávesnice, aby se mohli pohybovat mezi jednotlivými prvky. Je důležité, aby váš web prezentoval obsah v logickém pořadí, aby uživatel klávesnice mohl přistupovat ke každému interaktivnímu prvku při pohybu dolů dokumentem. Pokud vytváříte své webové stránky s použitím sémantického označení a používáte CSS k úpravě jejich vizuálního rozvržení, váš web by měl být navigovatelný pomocí klávesnice, ale je důležité tento aspekt manuálně otestovat. Další informace o [strategiích navigace pomocí klávesnice](https://webaim.org/techniques/keyboard/).
+
+✅ Navštivte libovolnou webovou stránku a zkuste ji procházet pouze pomocí klávesnice. Co funguje, co nefunguje? Proč?
+
+## Shrnutí
+
+Web přístupný pouze některým není skutečně "celosvětový web". Nejlepší způsob, jak zajistit, že vámi vytvořené stránky budou přístupné, je začlenit osvědčené postupy přístupnosti již od začátku. I když to vyžaduje další kroky, začlenění těchto dovedností do vaše
+Mnoho vlád má zákony týkající se požadavků na přístupnost. Přečtěte si o zákonech o přístupnosti ve vaší zemi. Co je zahrnuto a co není? Příkladem může být [tato vládní webová stránka](https://accessibility.blog.gov.uk/).
+
+## Zadání
+
+[Analyzujte nepřístupný web](assignment.md)
+
+Poděkování: [Turtle Ipsum](https://github.com/Instrument/semantic-html-sample) od Instrument
+
+---
+
+**Prohlášení**:  
+Tento dokument byl přeložen pomocí služby pro automatický překlad [Co-op Translator](https://github.com/Azure/co-op-translator). Ačkoli se snažíme o přesnost, mějte prosím na paměti, že automatické překlady mohou obsahovat chyby nebo nepřesnosti. Původní dokument v jeho původním jazyce by měl být považován za autoritativní zdroj. Pro důležité informace doporučujeme profesionální lidský překlad. Neodpovídáme za žádné nedorozumění nebo nesprávné interpretace vyplývající z použití tohoto překladu.
\ No newline at end of file
diff --git a/translations/cs/1-getting-started-lessons/3-accessibility/assignment.md b/translations/cs/1-getting-started-lessons/3-accessibility/assignment.md
new file mode 100644
index 00000000..aec9e400
--- /dev/null
+++ b/translations/cs/1-getting-started-lessons/3-accessibility/assignment.md
@@ -0,0 +1,29 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "a258597a194e77d4fd469b3cd976b29e",
+  "translation_date": "2025-08-28T04:36:45+00:00",
+  "source_file": "1-getting-started-lessons/3-accessibility/assignment.md",
+  "language_code": "cs"
+}
+-->
+# Analyzujte nepřístupný web
+
+## Pokyny
+
+Najděte webovou stránku, o které si myslíte, že NENÍ přístupná, a vytvořte akční plán pro zlepšení její přístupnosti.  
+Vaším prvním úkolem bude identifikovat tento web, podrobně popsat způsoby, jakými si myslíte, že je nepřístupný, aniž byste použili analytické nástroje, a poté jej otestovat pomocí analýzy Lighthouse. Zachyťte výsledky této analýzy ve formátu PDF a vytvořte podrobný plán s minimálně deseti body, jak by se web mohl zlepšit.
+
+## Tabulka pro testování přístupnosti webu
+
+| Kritéria | Vynikající | Dostatečné | Potřebuje zlepšení |
+|----------|-----------|------------|--------------------|
+|          | chybí <10 % požadovaného | chybí 20 % požadovaného | chybí 50 % požadovaného |
+
+----
+Zpráva studenta: zahrnuje odstavce o tom, jak je web nepřístupný, zprávu Lighthouse zachycenou ve formátu PDF, seznam deseti bodů ke zlepšení s podrobnostmi, jak je zlepšit
+
+---
+
+**Prohlášení**:  
+Tento dokument byl přeložen pomocí služby pro automatický překlad [Co-op Translator](https://github.com/Azure/co-op-translator). I když se snažíme o co největší přesnost, mějte prosím na paměti, že automatické překlady mohou obsahovat chyby nebo nepřesnosti. Původní dokument v jeho původním jazyce by měl být považován za závazný zdroj. Pro důležité informace doporučujeme profesionální lidský překlad. Neodpovídáme za žádná nedorozumění nebo nesprávné výklady vyplývající z použití tohoto překladu.
\ No newline at end of file
diff --git a/translations/cs/1-getting-started-lessons/README.md b/translations/cs/1-getting-started-lessons/README.md
new file mode 100644
index 00000000..33e75186
--- /dev/null
+++ b/translations/cs/1-getting-started-lessons/README.md
@@ -0,0 +1,31 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "04683f4cfa46004179b0404b89a3065c",
+  "translation_date": "2025-08-28T04:29:11+00:00",
+  "source_file": "1-getting-started-lessons/README.md",
+  "language_code": "cs"
+}
+-->
+# Začínáme s vývojem webu
+
+V této části kurzu se seznámíte s koncepty, které nejsou založené na projektech, ale jsou důležité pro to, abyste se stali profesionálním vývojářem.
+
+### Témata
+
+1. [Úvod do programovacích jazyků a nástrojů](1-intro-to-programming-languages/README.md)
+2. [Úvod do GitHubu](2-github-basics/README.md)
+3. [Základy přístupnosti](3-accessibility/README.md)
+
+### Poděkování
+
+Úvod do programovacích jazyků a nástrojů byl napsán s ♥️ [Jasmine Greenaway](https://twitter.com/paladique)
+
+Úvod do GitHubu byl napsán s ♥️ [Floor Drees](https://twitter.com/floordrees)
+
+Základy přístupnosti byly napsány s ♥️ [Christopher Harrison](https://twitter.com/geektrainer)
+
+---
+
+**Prohlášení**:  
+Tento dokument byl přeložen pomocí služby pro automatický překlad [Co-op Translator](https://github.com/Azure/co-op-translator). Přestože se snažíme o přesnost, mějte prosím na paměti, že automatické překlady mohou obsahovat chyby nebo nepřesnosti. Původní dokument v jeho původním jazyce by měl být považován za autoritativní zdroj. Pro důležité informace doporučujeme profesionální lidský překlad. Neodpovídáme za žádná nedorozumění nebo nesprávné interpretace vyplývající z použití tohoto překladu.
\ No newline at end of file
diff --git a/translations/cs/2-js-basics/1-data-types/README.md b/translations/cs/2-js-basics/1-data-types/README.md
new file mode 100644
index 00000000..67850535
--- /dev/null
+++ b/translations/cs/2-js-basics/1-data-types/README.md
@@ -0,0 +1,215 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "fc6aef8ecfdd5b0ad2afa6e6ba52bfde",
+  "translation_date": "2025-08-28T04:08:54+00:00",
+  "source_file": "2-js-basics/1-data-types/README.md",
+  "language_code": "cs"
+}
+-->
+# Základy JavaScriptu: Datové typy
+
+![Základy JavaScriptu - Datové typy](../../../../translated_images/webdev101-js-datatypes.4cc470179730702c756480d3ffa46507f746e5975ebf80f99fdaaf1cff09a7f4.cs.png)
+> Sketchnote od [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Kvíz před lekcí
+[Kvíz před lekcí](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/7)
+
+Tato lekce pokrývá základy JavaScriptu, jazyka, který zajišťuje interaktivitu na webu.
+
+> Tuto lekci si můžete projít na [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-variables/?WT.mc_id=academic-77807-sagibbon)!
+
+[![Proměnné](https://img.youtube.com/vi/JNIXfGiDWM8/0.jpg)](https://youtube.com/watch?v=JNIXfGiDWM8 "Proměnné v JavaScriptu")
+
+[![Datové typy v JavaScriptu](https://img.youtube.com/vi/AWfA95eLdq8/0.jpg)](https://youtube.com/watch?v=AWfA95eLdq8 "Datové typy v JavaScriptu")
+
+> 🎥 Klikněte na obrázky výše pro videa o proměnných a datových typech
+
+Začněme s proměnnými a datovými typy, které je naplňují!
+
+## Proměnné
+
+Proměnné uchovávají hodnoty, které lze používat a měnit v průběhu vašeho kódu.
+
+Vytvoření a **deklarace** proměnné má následující syntaxi **[klíčové slovo] [název]**. Skládá se ze dvou částí:
+
+- **Klíčové slovo**. Klíčová slova mohou být `let` nebo `var`.  
+
+✅ Klíčové slovo `let` bylo zavedeno v ES6 a poskytuje proměnné tzv. _blokový rozsah_. Doporučuje se používat `let` místo `var`. Blokové rozsahy probereme podrobněji v dalších částech.
+- **Název proměnné**, což je název, který si sami zvolíte.
+
+### Úkol - práce s proměnnými
+
+1. **Deklarujte proměnnou**. Deklarujme proměnnou pomocí klíčového slova `let`:
+
+    ```javascript
+    let myVariable;
+    ```
+
+   `myVariable` byla nyní deklarována pomocí klíčového slova `let`. Momentálně nemá žádnou hodnotu.
+
+1. **Přiřaďte hodnotu**. Uložte hodnotu do proměnné pomocí operátoru `=`, následovaného očekávanou hodnotou.
+
+    ```javascript
+    myVariable = 123;
+    ```
+
+   > Poznámka: použití `=` v této lekci znamená, že používáme "přiřazovací operátor", který slouží k nastavení hodnoty proměnné. Neoznačuje rovnost.
+
+   `myVariable` byla nyní *inicializována* s hodnotou 123.
+
+1. **Refaktorujte**. Nahraďte svůj kód následujícím příkazem.
+
+    ```javascript
+    let myVariable = 123;
+    ```
+
+    Výše uvedené se nazývá _explicitní inicializace_, kdy je proměnná deklarována a zároveň jí je přiřazena hodnota.
+
+1. **Změňte hodnotu proměnné**. Změňte hodnotu proměnné následujícím způsobem:
+
+   ```javascript
+   myVariable = 321;
+   ```
+
+   Jakmile je proměnná deklarována, můžete její hodnotu kdykoli změnit ve svém kódu pomocí operátoru `=` a nové hodnoty.
+
+   ✅ Vyzkoušejte to! Můžete psát JavaScript přímo ve svém prohlížeči. Otevřete okno prohlížeče a přejděte do Nástrojů pro vývojáře. V konzoli najdete výzvu; napište `let myVariable = 123`, stiskněte Enter, poté napište `myVariable`. Co se stane? Poznámka: o těchto konceptech se dozvíte více v následujících lekcích.
+
+## Konstanty
+
+Deklarace a inicializace konstanty se řídí stejnými principy jako u proměnné, s výjimkou klíčového slova `const`. Konstanty se obvykle deklarují velkými písmeny.
+
+```javascript
+const MY_VARIABLE = 123;
+```
+
+Konstanty jsou podobné proměnným, s dvěma výjimkami:
+
+- **Musí mít hodnotu**. Konstanty musí být inicializovány, jinak při spuštění kódu dojde k chybě.
+- **Referenci nelze změnit**. Referenci konstanty nelze po inicializaci změnit, jinak při spuštění kódu dojde k chybě. Podívejme se na dva příklady:
+   - **Jednoduchá hodnota**. Následující NENÍ povoleno:
+   
+      ```javascript
+      const PI = 3;
+      PI = 4; // not allowed
+      ```
+ 
+   - **Reference objektu je chráněna**. Následující NENÍ povoleno.
+   
+      ```javascript
+      const obj = { a: 3 };
+      obj = { b: 5 } // not allowed
+      ```
+
+    - **Hodnota objektu není chráněna**. Následující JE povoleno:
+    
+      ```javascript
+      const obj = { a: 3 };
+      obj.a = 5;  // allowed
+      ```
+
+      Výše měníte hodnotu objektu, ale ne samotnou referenci, což je povoleno.
+
+   > Poznámka: `const` znamená, že reference je chráněna před přepisem. Hodnota však není _neměnná_ a může se změnit, zejména pokud jde o složitou strukturu, jako je objekt.
+
+## Datové typy
+
+Proměnné mohou uchovávat mnoho různých typů hodnot, jako jsou čísla a text. Tyto různé typy hodnot jsou známé jako **datový typ**. Datové typy jsou důležitou součástí vývoje softwaru, protože pomáhají vývojářům rozhodovat, jak by měl být kód napsán a jak by měl software fungovat. Navíc některé datové typy mají jedinečné vlastnosti, které pomáhají transformovat nebo extrahovat další informace z hodnoty.
+
+✅ Datové typy jsou také označovány jako primitivní datové typy JavaScriptu, protože jsou nejnižší úrovní datových typů poskytovaných jazykem. Existuje 7 primitivních datových typů: string, number, bigint, boolean, undefined, null a symbol. Udělejte si chvíli na představu, co každý z těchto primitivů může představovat. Co je `zebra`? A co `0`? `true`?
+
+### Čísla
+
+V předchozí části byla hodnota `myVariable` datového typu číslo.
+
+`let myVariable = 123;`
+
+Proměnné mohou uchovávat všechny typy čísel, včetně desetinných nebo záporných čísel. Čísla lze také používat s aritmetickými operátory, které jsou popsány v [další části](../../../../2-js-basics/1-data-types).
+
+### Aritmetické operátory
+
+Existuje několik typů operátorů, které lze použít při provádění aritmetických funkcí, a některé z nich jsou uvedeny zde:
+
+| Symbol | Popis                                                                   | Příklad                          |
+| ------ | ----------------------------------------------------------------------- | -------------------------------- |
+| `+`    | **Sčítání**: Vypočítá součet dvou čísel                                 | `1 + 2 //očekávaný výsledek je 3`   |
+| `-`    | **Odčítání**: Vypočítá rozdíl dvou čísel                                | `1 - 2 //očekávaný výsledek je -1`  |
+| `*`    | **Násobení**: Vypočítá součin dvou čísel                                | `1 * 2 //očekávaný výsledek je 2`   |
+| `/`    | **Dělení**: Vypočítá podíl dvou čísel                                   | `1 / 2 //očekávaný výsledek je 0.5` |
+| `%`    | **Zbytek**: Vypočítá zbytek z dělení dvou čísel                         | `1 % 2 //očekávaný výsledek je 1`   |
+
+✅ Vyzkoušejte to! Vyzkoušejte aritmetickou operaci v konzoli svého prohlížeče. Překvapily vás výsledky?
+
+### Řetězce
+
+Řetězce jsou sady znaků, které se nacházejí mezi jednoduchými nebo dvojitými uvozovkami.
+
+- `'Toto je řetězec'`
+- `"Toto je také řetězec"`
+- `let myString = 'Toto je hodnota řetězce uložená v proměnné';`
+
+Nezapomeňte použít uvozovky při psaní řetězce, jinak JavaScript předpokládá, že jde o název proměnné.
+
+### Formátování řetězců
+
+Řetězce jsou textové a čas od času budou vyžadovat formátování.
+
+Pro **spojení** dvou nebo více řetězců, nebo jejich spojení dohromady, použijte operátor `+`.
+
+```javascript
+let myString1 = "Hello";
+let myString2 = "World";
+
+myString1 + myString2 + "!"; //HelloWorld!
+myString1 + " " + myString2 + "!"; //Hello World!
+myString1 + ", " + myString2 + "!"; //Hello, World!
+
+```
+
+✅ Proč v JavaScriptu `1 + 1 = 2`, ale `'1' + '1' = 11?` Zamyslete se nad tím. A co `'1' + 1`?
+
+**Šablonové literály** jsou další způsob formátování řetězců, kromě uvozovek se používá zpětný apostrof. Cokoli, co není prostý text, musí být umístěno do zástupných symbolů `${ }`. To zahrnuje jakékoli proměnné, které mohou být řetězce.
+
+```javascript
+let myString1 = "Hello";
+let myString2 = "World";
+
+`${myString1} ${myString2}!` //Hello World!
+`${myString1}, ${myString2}!` //Hello, World!
+```
+
+Svých formátovacích cílů můžete dosáhnout oběma způsoby, ale šablonové literály budou respektovat jakékoli mezery a zalomení řádků.
+
+✅ Kdy byste použili šablonový literál místo prostého řetězce?
+
+### Booleovské hodnoty
+
+Booleovské hodnoty mohou mít pouze dvě hodnoty: `true` nebo `false`. Booleovské hodnoty mohou pomoci rozhodnout, které řádky kódu by se měly spustit, když jsou splněny určité podmínky. V mnoha případech [operátory](../../../../2-js-basics/1-data-types) pomáhají nastavit hodnotu booleovské hodnoty a často si všimnete a napíšete proměnné, které jsou inicializovány nebo jejich hodnoty aktualizovány pomocí operátoru.
+
+- `let myTrueBool = true`
+- `let myFalseBool = false`
+
+✅ Proměnná může být považována za 'pravdivou', pokud se vyhodnotí jako booleovská hodnota `true`. Zajímavé je, že v JavaScriptu jsou [všechny hodnoty pravdivé, pokud nejsou definovány jako nepravdivé](https://developer.mozilla.org/docs/Glossary/Truthy).
+
+---
+
+## 🚀 Výzva
+
+JavaScript je známý svými překvapivými způsoby, jak občas zacházet s datovými typy. Proveďte trochu výzkumu o těchto 'záludnostech'. Například: citlivost na velikost písmen může být zrádná! Vyzkoušejte toto ve své konzoli: `let age = 1; let Age = 2; age == Age` (vyhodnotí `false` -- proč?). Jaké další záludnosti můžete najít?
+
+## Kvíz po lekci
+[Kvíz po lekci](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/8)
+
+## Přehled & Samostudium
+
+Podívejte se na [tento seznam cvičení v JavaScriptu](https://css-tricks.com/snippets/javascript/) a zkuste jedno. Co jste se naučili?
+
+## Zadání
+
+[Procvičování datových typů](assignment.md)
+
+---
+
+**Upozornění**:  
+Tento dokument byl přeložen pomocí služby pro automatický překlad [Co-op Translator](https://github.com/Azure/co-op-translator). I když se snažíme o co největší přesnost, mějte prosím na paměti, že automatické překlady mohou obsahovat chyby nebo nepřesnosti. Původní dokument v jeho původním jazyce by měl být považován za závazný zdroj. Pro kritické informace se doporučuje profesionální lidský překlad. Nezodpovídáme za jakékoli nedorozumění nebo nesprávné interpretace vyplývající z použití tohoto překladu.
\ No newline at end of file
diff --git a/translations/cs/2-js-basics/1-data-types/assignment.md b/translations/cs/2-js-basics/1-data-types/assignment.md
new file mode 100644
index 00000000..9163bb29
--- /dev/null
+++ b/translations/cs/2-js-basics/1-data-types/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "3869244ceda606c4969d8cdd82679867",
+  "translation_date": "2025-08-28T04:09:38+00:00",
+  "source_file": "2-js-basics/1-data-types/assignment.md",
+  "language_code": "cs"
+}
+-->
+# Procvičování datových typů
+
+## Pokyny
+
+Představte si, že vytváříte nákupní košík. Napište dokumentaci o datových typech, které byste potřebovali k dokončení nákupního procesu. Jak jste dospěli ke svým rozhodnutím?
+
+## Hodnocení
+
+Kritéria | Vynikající | Přiměřené | Potřebuje zlepšení
+--- | --- | --- | --- |
+||Šest datových typů je uvedeno a podrobně prozkoumáno, včetně jejich využití|Čtyři datové typy jsou prozkoumány|Dva datové typy jsou prozkoumány|
+
+---
+
+**Prohlášení**:  
+Tento dokument byl přeložen pomocí služby pro automatický překlad [Co-op Translator](https://github.com/Azure/co-op-translator). I když se snažíme o přesnost, mějte na paměti, že automatické překlady mohou obsahovat chyby nebo nepřesnosti. Původní dokument v jeho původním jazyce by měl být považován za autoritativní zdroj. Pro důležité informace doporučujeme profesionální lidský překlad. Neodpovídáme za žádné nedorozumění nebo nesprávné interpretace vyplývající z použití tohoto překladu.
\ No newline at end of file
diff --git a/translations/cs/2-js-basics/2-functions-methods/README.md b/translations/cs/2-js-basics/2-functions-methods/README.md
new file mode 100644
index 00000000..6570d994
--- /dev/null
+++ b/translations/cs/2-js-basics/2-functions-methods/README.md
@@ -0,0 +1,210 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "b4612bbb9ace984f374fcc80e3e035ad",
+  "translation_date": "2025-08-28T04:05:20+00:00",
+  "source_file": "2-js-basics/2-functions-methods/README.md",
+  "language_code": "cs"
+}
+-->
+# Základy JavaScriptu: Metody a funkce
+
+![Základy JavaScriptu - Funkce](../../../../translated_images/webdev101-js-functions.be049c4726e94f8b7605c36330ac42eeb5cd8ed02bcdd60fdac778174d6cb865.cs.png)
+> Sketchnote od [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Kvíz před přednáškou
+[Kvíz před přednáškou](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/9)
+
+Když přemýšlíme o psaní kódu, vždy chceme zajistit, aby byl náš kód čitelný. I když to může znít paradoxně, kód se čte mnohem častěji, než se píše. Jedním ze základních nástrojů v arzenálu vývojáře pro zajištění udržovatelného kódu je **funkce**.
+
+[![Metody a funkce](https://img.youtube.com/vi/XgKsD6Zwvlc/0.jpg)](https://youtube.com/watch?v=XgKsD6Zwvlc "Metody a funkce")
+
+> 🎥 Klikněte na obrázek výše pro video o metodách a funkcích.
+
+> Tuto lekci si můžete projít na [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-functions/?WT.mc_id=academic-77807-sagibbon)!
+
+## Funkce
+
+Funkce je v podstatě blok kódu, který můžeme spustit na vyžádání. To je ideální pro situace, kdy potřebujeme provést stejný úkol vícekrát; místo duplicity logiky na různých místech (což by bylo obtížné aktualizovat, až přijde čas), ji můžeme centralizovat na jednom místě a volat ji, kdykoli potřebujeme operaci provést - funkce můžete dokonce volat z jiných funkcí!
+
+Neméně důležitá je schopnost pojmenovat funkci. I když se to může zdát triviální, název poskytuje rychlý způsob dokumentace části kódu. Můžete si to představit jako štítek na tlačítku. Pokud kliknu na tlačítko s nápisem "Zrušit časovač", vím, že zastaví běžící hodiny.
+
+## Vytvoření a volání funkce
+
+Syntaxe funkce vypadá následovně:
+
+```javascript
+function nameOfFunction() { // function definition
+ // function definition/body
+}
+```
+
+Pokud bych chtěl vytvořit funkci pro zobrazení pozdravu, mohla by vypadat takto:
+
+```javascript
+function displayGreeting() {
+  console.log('Hello, world!');
+}
+```
+
+Kdykoli chceme funkci volat (nebo ji spustit), použijeme název funkce následovaný `()`. Stojí za zmínku, že funkce může být definována před nebo po jejím volání; JavaScriptový kompilátor ji pro vás najde.
+
+```javascript
+// calling our function
+displayGreeting();
+```
+
+> **NOTE:** Existuje speciální typ funkce známý jako **metoda**, kterou už používáte! Ve skutečnosti jsme to viděli v našem příkladu výše, když jsme použili `console.log`. Rozdíl mezi metodou a funkcí je v tom, že metoda je připojena k objektu (v našem příkladu `console`), zatímco funkce je volně plovoucí. Mnoho vývojářů tyto termíny používá zaměnitelně.
+
+### Nejlepší postupy pro funkce
+
+Existuje několik osvědčených postupů, které je třeba mít na paměti při vytváření funkcí:
+
+- Vždy používejte popisné názvy, abyste věděli, co funkce dělá
+- Používejte **camelCasing** pro spojování slov
+- Udržujte funkce zaměřené na konkrétní úkol
+
+## Předávání informací funkci
+
+Aby byla funkce více použitelná, často do ní budete chtít předat informace. Pokud vezmeme náš příklad `displayGreeting` výše, zobrazí pouze **Hello, world!**. Není to zrovna nejpraktičtější funkce, kterou byste mohli vytvořit. Pokud ji chceme udělat trochu flexibilnější, například umožnit někomu specifikovat jméno osoby, kterou chceme pozdravit, můžeme přidat **parametr**. Parametr (někdy nazývaný také **argument**) je dodatečná informace zaslaná funkci.
+
+Parametry jsou uvedeny v části definice v závorkách a jsou odděleny čárkami, například takto:
+
+```javascript
+function name(param, param2, param3) {
+
+}
+```
+
+Můžeme aktualizovat naši funkci `displayGreeting`, aby přijímala jméno a zobrazila ho.
+
+```javascript
+function displayGreeting(name) {
+  const message = `Hello, ${name}!`;
+  console.log(message);
+}
+```
+
+Když chceme funkci volat a předat jí parametr, specifikujeme ho v závorkách.
+
+```javascript
+displayGreeting('Christopher');
+// displays "Hello, Christopher!" when run
+```
+
+## Výchozí hodnoty
+
+Funkci můžeme udělat ještě flexibilnější přidáním více parametrů. Ale co když nechceme, aby bylo nutné zadat každou hodnotu? Pokud zůstaneme u našeho příkladu pozdravu, můžeme ponechat jméno jako povinné (potřebujeme vědět, koho zdravíme), ale chceme umožnit, aby byl samotný pozdrav přizpůsoben podle potřeby. Pokud někdo nechce pozdrav přizpůsobit, poskytneme místo toho výchozí hodnotu. Výchozí hodnotu parametru nastavíme podobně jako hodnotu proměnné - `parameterName = 'defaultValue'`. Celý příklad:
+
+```javascript
+function displayGreeting(name, salutation='Hello') {
+  console.log(`${salutation}, ${name}`);
+}
+```
+
+Když funkci voláme, můžeme se rozhodnout, zda chceme nastavit hodnotu pro `salutation`.
+
+```javascript
+displayGreeting('Christopher');
+// displays "Hello, Christopher"
+
+displayGreeting('Christopher', 'Hi');
+// displays "Hi, Christopher"
+```
+
+## Návratové hodnoty
+
+Doposud funkce, kterou jsme vytvořili, vždy vypíše výstup do [konzole](https://developer.mozilla.org/docs/Web/API/console). Někdy to může být přesně to, co hledáme, zejména když vytváříme funkce, které budou volat jiné služby. Ale co když chci vytvořit pomocnou funkci pro provedení výpočtu a vrátit hodnotu zpět, abych ji mohl použít jinde?
+
+To můžeme udělat pomocí **návratové hodnoty**. Návratová hodnota je vrácena funkcí a může být uložena do proměnné stejně jako bychom mohli uložit literální hodnotu, například řetězec nebo číslo.
+
+Pokud funkce něco vrací, použije se klíčové slovo `return`. Klíčové slovo `return` očekává hodnotu nebo referenci toho, co se vrací, například takto:
+
+```javascript
+return myVariable;
+```  
+
+Můžeme vytvořit funkci pro vytvoření pozdravu a vrátit hodnotu zpět volajícímu.
+
+```javascript
+function createGreetingMessage(name) {
+  const message = `Hello, ${name}`;
+  return message;
+}
+```
+
+Při volání této funkce uložíme hodnotu do proměnné. Je to velmi podobné tomu, jak bychom nastavili proměnnou na statickou hodnotu (například `const name = 'Christopher'`).
+
+```javascript
+const greetingMessage = createGreetingMessage('Christopher');
+```
+
+## Funkce jako parametry pro funkce
+
+Jak budete postupovat ve své programátorské kariéře, narazíte na funkce, které přijímají funkce jako parametry. Tento šikovný trik se běžně používá, když nevíme, kdy něco nastane nebo skončí, ale víme, že potřebujeme provést operaci v reakci na to.
+
+Například [setTimeout](https://developer.mozilla.org/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout), který zahájí časovač a po jeho dokončení provede kód. Musíme mu říct, jaký kód chceme provést. Zní to jako ideální úkol pro funkci!
+
+Pokud spustíte níže uvedený kód, po 3 sekundách uvidíte zprávu **3 sekundy uplynuly**.
+
+```javascript
+function displayDone() {
+  console.log('3 seconds has elapsed');
+}
+// timer value is in milliseconds
+setTimeout(displayDone, 3000);
+```
+
+### Anonymní funkce
+
+Podívejme se znovu na to, co jsme vytvořili. Vytváříme funkci s názvem, která bude použita pouze jednou. Jak se naše aplikace stává složitější, můžeme si představit, že budeme vytvářet mnoho funkcí, které budou volány pouze jednou. To není ideální. Jak se ukazuje, ne vždy musíme poskytovat název!
+
+Když předáváme funkci jako parametr, můžeme obejít její předchozí vytvoření a místo toho ji vytvořit jako součást parametru. Používáme stejné klíčové slovo `function`, ale místo toho ji vytvoříme jako parametr.
+
+Přepišme výše uvedený kód tak, aby používal anonymní funkci:
+
+```javascript
+setTimeout(function() {
+  console.log('3 seconds has elapsed');
+}, 3000);
+```
+
+Pokud spustíte náš nový kód, všimnete si, že dostaneme stejné výsledky. Vytvořili jsme funkci, ale nemuseli jsme jí dát název!
+
+### Funkce s tučnou šipkou
+
+Jednou z běžných zkratek v mnoha programovacích jazycích (včetně JavaScriptu) je schopnost používat tzv. **arrow** nebo **fat arrow** funkce. Používá speciální indikátor `=>`, který vypadá jako šipka - odtud název! Použitím `=>` můžeme přeskočit klíčové slovo `function`.
+
+Přepišme náš kód ještě jednou, tentokrát s použitím funkce s tučnou šipkou:
+
+```javascript
+setTimeout(() => {
+  console.log('3 seconds has elapsed');
+}, 3000);
+```
+
+### Kdy použít kterou strategii
+
+Nyní jste viděli, že máme tři způsoby, jak předat funkci jako parametr, a možná se ptáte, kdy použít který. Pokud víte, že budete funkci používat více než jednou, vytvořte ji normálně. Pokud ji budete používat pouze na jednom místě, je obecně nejlepší použít anonymní funkci. Zda použijete funkci s tučnou šipkou nebo tradiční syntaxi `function`, je na vás, ale všimnete si, že většina moderních vývojářů preferuje `=>`.
+
+---
+
+## 🚀 Výzva
+
+Dokážete jednou větou vysvětlit rozdíl mezi funkcemi a metodami? Zkuste to!
+
+## Kvíz po přednášce
+[Kvíz po přednášce](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/10)
+
+## Přehled a samostudium
+
+Stojí za to [přečíst si něco více o funkcích s tučnou šipkou](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions), protože jsou stále častěji používány v kódových základnách. Procvičte si psaní funkce a poté ji přepište pomocí této syntaxe.
+
+## Úkol
+
+[Zábava s funkcemi](assignment.md)
+
+---
+
+**Prohlášení**:  
+Tento dokument byl přeložen pomocí služby pro automatický překlad [Co-op Translator](https://github.com/Azure/co-op-translator). Ačkoli se snažíme o přesnost, mějte prosím na paměti, že automatické překlady mohou obsahovat chyby nebo nepřesnosti. Původní dokument v jeho původním jazyce by měl být považován za závazný zdroj. Pro důležité informace doporučujeme profesionální lidský překlad. Neodpovídáme za žádné nedorozumění nebo nesprávné interpretace vyplývající z použití tohoto překladu.
\ No newline at end of file
diff --git a/translations/cs/2-js-basics/2-functions-methods/assignment.md b/translations/cs/2-js-basics/2-functions-methods/assignment.md
new file mode 100644
index 00000000..ffedc328
--- /dev/null
+++ b/translations/cs/2-js-basics/2-functions-methods/assignment.md
@@ -0,0 +1,27 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "8973f96157680a13e9446e4bb540ee57",
+  "translation_date": "2025-08-28T04:06:02+00:00",
+  "source_file": "2-js-basics/2-functions-methods/assignment.md",
+  "language_code": "cs"
+}
+-->
+# Zábava s funkcemi
+
+## Instrukce
+
+Vytvořte různé funkce, jak ty, které něco vracejí, tak i ty, které nic nevracejí.
+
+Zkuste vytvořit funkci, která kombinuje parametry a parametry s výchozími hodnotami.
+
+## Hodnocení
+
+| Kritéria | Vynikající                                                                          | Dostatečné                                                      | Potřebuje zlepšení |
+| -------- | ----------------------------------------------------------------------------------- | --------------------------------------------------------------- | ------------------ |
+|          | Řešení obsahuje dvě nebo více dobře fungujících funkcí s různorodými parametry      | Řešení obsahuje jednu funkci s několika parametry               | Řešení obsahuje chyby |
+
+---
+
+**Prohlášení**:  
+Tento dokument byl přeložen pomocí služby pro automatický překlad [Co-op Translator](https://github.com/Azure/co-op-translator). I když se snažíme o přesnost, mějte prosím na paměti, že automatické překlady mohou obsahovat chyby nebo nepřesnosti. Původní dokument v jeho původním jazyce by měl být považován za autoritativní zdroj. Pro důležité informace se doporučuje profesionální lidský překlad. Neodpovídáme za žádná nedorozumění nebo nesprávné interpretace vyplývající z použití tohoto překladu.
\ No newline at end of file
diff --git a/translations/cs/2-js-basics/3-making-decisions/README.md b/translations/cs/2-js-basics/3-making-decisions/README.md
new file mode 100644
index 00000000..21d44be0
--- /dev/null
+++ b/translations/cs/2-js-basics/3-making-decisions/README.md
@@ -0,0 +1,232 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "888609c48329c280ca2477d2df40f2e5",
+  "translation_date": "2025-08-28T04:06:57+00:00",
+  "source_file": "2-js-basics/3-making-decisions/README.md",
+  "language_code": "cs"
+}
+-->
+# Základy JavaScriptu: Rozhodování
+
+![Základy JavaScriptu - Rozhodování](../../../../translated_images/webdev101-js-decisions.69e1b20f272dd1f0b1cb2f8adaff3ed2a77c4f91db96d8a0594132a353fa189a.cs.png)
+
+> Sketchnote od [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Kvíz před lekcí
+
+[Kvíz před lekcí](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/11)
+
+Rozhodování a řízení pořadí, ve kterém váš kód běží, činí váš kód znovupoužitelným a robustním. Tato sekce pokrývá syntaxi pro řízení toku dat v JavaScriptu a její význam při použití s datovými typy Boolean.
+
+[![Rozhodování](https://img.youtube.com/vi/SxTp8j-fMMY/0.jpg)](https://youtube.com/watch?v=SxTp8j-fMMY "Rozhodování")
+
+> 🎥 Klikněte na obrázek výše pro video o rozhodování.
+
+> Tuto lekci si můžete projít na [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-if-else/?WT.mc_id=academic-77807-sagibbon)!
+
+## Krátké shrnutí o Booleanech
+
+Boolean může mít pouze dvě hodnoty: `true` nebo `false`. Booleany pomáhají rozhodovat, které řádky kódu by měly běžet, když jsou splněny určité podmínky.
+
+Nastavte svůj boolean na hodnotu true nebo false takto:
+
+`let myTrueBool = true`  
+`let myFalseBool = false`
+
+✅ Booleany jsou pojmenovány po anglickém matematikovi, filozofovi a logikovi Georgeovi Boolovi (1815–1864).
+
+## Operátory porovnání a Booleany
+
+Operátory se používají k vyhodnocení podmínek porovnáním, které vytvoří hodnotu Boolean. Následuje seznam často používaných operátorů.
+
+| Symbol | Popis                                                                                                                                                        | Příklad            |
+| ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------ |
+| `<`    | **Menší než**: Porovná dvě hodnoty a vrátí hodnotu `true`, pokud je hodnota na levé straně menší než na pravé                                                | `5 < 6 // true`    |
+| `<=`   | **Menší nebo rovno**: Porovná dvě hodnoty a vrátí hodnotu `true`, pokud je hodnota na levé straně menší nebo rovna pravé                                     | `5 <= 6 // true`   |
+| `>`    | **Větší než**: Porovná dvě hodnoty a vrátí hodnotu `true`, pokud je hodnota na levé straně větší než na pravé                                                | `5 > 6 // false`   |
+| `>=`   | **Větší nebo rovno**: Porovná dvě hodnoty a vrátí hodnotu `true`, pokud je hodnota na levé straně větší nebo rovna pravé                                     | `5 >= 6 // false`  |
+| `===`  | **Striktní rovnost**: Porovná dvě hodnoty a vrátí hodnotu `true`, pokud jsou hodnoty na pravé a levé straně stejné A mají stejný datový typ                  | `5 === 6 // false` |
+| `!==`  | **Nerovnost**: Porovná dvě hodnoty a vrátí opačnou hodnotu Boolean, než by vrátil operátor striktní rovnosti                                                | `5 !== 6 // true`  |
+
+✅ Ověřte si své znalosti tím, že napíšete několik porovnání do konzole vašeho prohlížeče. Překvapí vás některá vrácená data?
+
+## If Statement
+
+Příkaz `if` spustí kód mezi svými bloky, pokud je podmínka pravdivá.
+
+```javascript
+if (condition) {
+  //Condition is true. Code in this block will run.
+}
+```
+
+Logické operátory se často používají k vytvoření podmínky.
+
+```javascript
+let currentMoney;
+let laptopPrice;
+
+if (currentMoney >= laptopPrice) {
+  //Condition is true. Code in this block will run.
+  console.log("Getting a new laptop!");
+}
+```
+
+## If..Else Statement
+
+Příkaz `else` spustí kód mezi svými bloky, když je podmínka nepravdivá. Je volitelný s příkazem `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!");
+}
+```
+
+✅ Otestujte své porozumění tomuto kódu a následujícímu kódu tím, že ho spustíte v konzoli prohlížeče. Změňte hodnoty proměnných `currentMoney` a `laptopPrice`, abyste změnili vrácený `console.log()`.
+
+## Switch Statement
+
+Příkaz `switch` se používá k provádění různých akcí na základě různých podmínek. Použijte příkaz `switch` k výběru jednoho z mnoha bloků kódu, které mají být vykonány.
+
+```javascript
+switch (expression) {
+  case x:
+    // code block
+    break;
+  case y:
+    // code block
+    break;
+  default:
+  // code block
+}
+```
+
+```javascript
+// program using switch statement
+let a = 2;
+
+switch (a) {
+  case 1:
+    a = "one";
+    break;
+  case 2:
+    a = "two";
+    break;
+  default:
+    a = "not found";
+    break;
+}
+console.log(`The value is ${a}`);
+```
+
+✅ Otestujte své porozumění tomuto kódu a následujícímu kódu tím, že ho spustíte v konzoli prohlížeče. Změňte hodnoty proměnné `a`, abyste změnili vrácený `console.log()`.
+
+## Logické operátory a Booleany
+
+Rozhodování může vyžadovat více než jedno porovnání a může být spojeno pomocí logických operátorů k vytvoření hodnoty Boolean.
+
+| Symbol | Popis                                                                                     | Příklad                                                                 |
+| ------ | ----------------------------------------------------------------------------------------- | ----------------------------------------------------------------------- |
+| `&&`   | **Logické AND**: Porovná dvě Boolean výrazy. Vrátí true **pouze**, pokud jsou obě strany pravdivé | `(5 > 6) && (5 < 6 ) //Jedna strana je nepravdivá, druhá je pravdivá. Vrací false` |
+| `\|\|` | **Logické OR**: Porovná dvě Boolean výrazy. Vrátí true, pokud je alespoň jedna strana pravdivá | `(5 > 6) \|\| (5 < 6) //Jedna strana je nepravdivá, druhá je pravdivá. Vrací true` |
+| `!`    | **Logické NOT**: Vrátí opačnou hodnotu Boolean výrazu                                   | `!(5 > 6) // 5 není větší než 6, ale "!" vrátí true`                   |
+
+## Podmínky a rozhodování s logickými operátory
+
+Logické operátory mohou být použity k vytvoření podmínek v příkazech `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!");
+}
+```
+
+### Operátor negace
+
+Doposud jste viděli, jak můžete použít příkaz `if...else` k vytvoření podmíněné logiky. Cokoliv, co jde do `if`, musí být vyhodnoceno jako true/false. Použitím operátoru `!` můžete _negovat_ výraz. Vypadalo by to takto:
+
+```javascript
+if (!condition) {
+  // runs if condition is false
+} else {
+  // runs if condition is true
+}
+```
+
+### Ternární výrazy
+
+`if...else` není jediný způsob, jak vyjádřit rozhodovací logiku. Můžete také použít něco, co se nazývá ternární operátor. Syntaxe vypadá takto:
+
+```javascript
+let variable = condition ? <return this if true> : <return this if false>
+```
+
+Níže je konkrétnější příklad:
+
+```javascript
+let firstNumber = 20;
+let secondNumber = 10;
+let biggestNumber = firstNumber > secondNumber ? firstNumber : secondNumber;
+```
+
+✅ Věnujte chvíli čtení tohoto kódu několikrát. Rozumíte tomu, jak tyto operátory fungují?
+
+Výše uvedené říká:
+
+- pokud je `firstNumber` větší než `secondNumber`
+- pak přiřaďte `firstNumber` k `biggestNumber`
+- jinak přiřaďte `secondNumber`.
+
+Ternární výraz je jen kompaktní způsob, jak napsat následující kód:
+
+```javascript
+let biggestNumber;
+if (firstNumber > secondNumber) {
+  biggestNumber = firstNumber;
+} else {
+  biggestNumber = secondNumber;
+}
+```
+
+---
+
+## 🚀 Výzva
+
+Vytvořte program, který je nejprve napsán s logickými operátory, a poté ho přepište pomocí ternárního výrazu. Která syntaxe vám vyhovuje více?
+
+---
+
+## Kvíz po lekci
+
+[Kvíz po lekci](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/12)
+
+## Přehled & Samostudium
+
+Přečtěte si více o mnoha operátorech dostupných uživateli [na MDN](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators).
+
+Projděte si skvělý [přehled operátorů](https://joshwcomeau.com/operator-lookup/) od Joshe Comeaua!
+
+## Úkol
+
+[Operátory](assignment.md)
+
+---
+
+**Prohlášení**:  
+Tento dokument byl přeložen pomocí služby pro automatický překlad [Co-op Translator](https://github.com/Azure/co-op-translator). I když se snažíme o přesnost, mějte prosím na paměti, že automatické překlady mohou obsahovat chyby nebo nepřesnosti. Původní dokument v jeho původním jazyce by měl být považován za autoritativní zdroj. Pro důležité informace doporučujeme profesionální lidský překlad. Neodpovídáme za žádné nedorozumění nebo nesprávné interpretace vyplývající z použití tohoto překladu.
\ No newline at end of file
diff --git a/translations/cs/2-js-basics/3-making-decisions/assignment.md b/translations/cs/2-js-basics/3-making-decisions/assignment.md
new file mode 100644
index 00000000..7198e838
--- /dev/null
+++ b/translations/cs/2-js-basics/3-making-decisions/assignment.md
@@ -0,0 +1,54 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "bf62b82567e6f9bdf4abda9ae0ccb64a",
+  "translation_date": "2025-08-28T04:07:35+00:00",
+  "source_file": "2-js-basics/3-making-decisions/assignment.md",
+  "language_code": "cs"
+}
+-->
+# Operátory
+
+## Instrukce
+
+Vyzkoušejte si práci s operátory. Zde je návrh programu, který můžete implementovat:
+
+Máte skupinu studentů ze dvou různých systémů hodnocení.
+
+### První systém hodnocení
+
+Jeden systém hodnocení je definován známkami od 1 do 5, kde známka 3 a vyšší znamená, že student úspěšně absolvoval kurz.
+
+### Druhý systém hodnocení
+
+Druhý systém hodnocení obsahuje následující známky: `A, A-, B, B-, C, C-`, kde `A` je nejlepší známka a `C` je nejnižší známka, která znamená úspěšné absolvování.
+
+### Úkol
+
+Na základě následujícího pole `allStudents`, které reprezentuje všechny studenty a jejich známky, vytvořte nové pole `studentsWhoPass`, které bude obsahovat všechny studenty, kteří úspěšně absolvovali.
+
+> TIP: Použijte for-cyklus, if...else a porovnávací operátory:
+
+```javascript
+let allStudents = [
+  'A',
+  'B-',
+  1,
+  4,
+  5,
+  2
+]
+
+let studentsWhoPass = [];
+```
+
+## Hodnocení
+
+| Kritéria | Vynikající                    | Přiměřené                     | Vyžaduje zlepšení              |
+| -------- | ----------------------------- | ----------------------------- | ------------------------------ |
+|          | Je prezentováno kompletní řešení | Je prezentováno částečné řešení | Je prezentováno řešení s chybami |
+
+---
+
+**Prohlášení**:  
+Tento dokument byl přeložen pomocí služby pro automatický překlad [Co-op Translator](https://github.com/Azure/co-op-translator). Ačkoli se snažíme o přesnost, mějte prosím na paměti, že automatické překlady mohou obsahovat chyby nebo nepřesnosti. Původní dokument v jeho původním jazyce by měl být považován za autoritativní zdroj. Pro důležité informace se doporučuje profesionální lidský překlad. Neodpovídáme za žádné nedorozumění nebo nesprávné interpretace vyplývající z použití tohoto překladu.
\ No newline at end of file
diff --git a/translations/cs/2-js-basics/4-arrays-loops/README.md b/translations/cs/2-js-basics/4-arrays-loops/README.md
new file mode 100644
index 00000000..6090f76c
--- /dev/null
+++ b/translations/cs/2-js-basics/4-arrays-loops/README.md
@@ -0,0 +1,147 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "3f7f87871312cf6cc12662da7d973182",
+  "translation_date": "2025-08-28T04:10:34+00:00",
+  "source_file": "2-js-basics/4-arrays-loops/README.md",
+  "language_code": "cs"
+}
+-->
+# Základy JavaScriptu: Pole a cykly
+
+![JavaScript Basics - Arrays](../../../../translated_images/webdev101-js-arrays.439d7528b8a294558d0e4302e448d193f8ad7495cc407539cc81f1afe904b470.cs.png)
+> Sketchnote od [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Kvíz před lekcí
+[Kvíz před lekcí](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/13)
+
+Tato lekce se zabývá základy JavaScriptu, jazyka, který zajišťuje interaktivitu na webu. V této lekci se naučíte o polích a cyklech, které se používají k manipulaci s daty.
+
+[![Pole](https://img.youtube.com/vi/1U4qTyq02Xw/0.jpg)](https://youtube.com/watch?v=1U4qTyq02Xw "Pole")
+
+[![Cykly](https://img.youtube.com/vi/Eeh7pxtTZ3k/0.jpg)](https://www.youtube.com/watch?v=Eeh7pxtTZ3k "Cykly")
+
+> 🎥 Klikněte na obrázky výše pro videa o polích a cyklech.
+
+> Tuto lekci si můžete projít na [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-arrays/?WT.mc_id=academic-77807-sagibbon)!
+
+## Pole
+
+Práce s daty je běžným úkolem v každém programovacím jazyce, a je mnohem jednodušší, když jsou data organizována ve strukturovaném formátu, jako jsou pole. V polích jsou data uložena ve struktuře podobné seznamu. Jednou z hlavních výhod polí je, že můžete uložit různé typy dat do jednoho pole.
+
+✅ Pole jsou všude kolem nás! Dokážete si představit příklad pole z reálného života, například pole solárních panelů?
+
+Syntaxe pole je dvojice hranatých závorek.
+
+```javascript
+let myArray = [];
+```
+
+Toto je prázdné pole, ale pole mohou být deklarována již naplněná daty. Více hodnot v poli je odděleno čárkou.
+
+```javascript
+let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
+```
+
+Hodnotám v poli je přiřazena jedinečná hodnota nazývaná **index**, což je celé číslo, které je přiřazeno na základě jeho vzdálenosti od začátku pole. V příkladu výše má řetězcová hodnota "Chocolate" index 0 a index "Rocky Road" je 4. Pomocí indexu a hranatých závorek můžete získat, změnit nebo vložit hodnoty pole.
+
+✅ Překvapuje vás, že pole začínají na indexu nula? V některých programovacích jazycích začínají indexy na 1. Je za tím zajímavá historie, kterou si můžete [přečíst na Wikipedii](https://en.wikipedia.org/wiki/Zero-based_numbering).
+
+```javascript
+let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
+iceCreamFlavors[2]; //"Vanilla"
+```
+
+Pomocí indexu můžete změnit hodnotu, například takto:
+
+```javascript
+iceCreamFlavors[4] = "Butter Pecan"; //Changed "Rocky Road" to "Butter Pecan"
+```
+
+A můžete vložit novou hodnotu na daný index takto:
+
+```javascript
+iceCreamFlavors[5] = "Cookie Dough"; //Added "Cookie Dough"
+```
+
+✅ Běžnější způsob, jak přidat hodnoty do pole, je použití operátorů pole, jako je array.push()
+
+Chcete-li zjistit, kolik položek je v poli, použijte vlastnost `length`.
+
+```javascript
+let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
+iceCreamFlavors.length; //5
+```
+
+✅ Vyzkoušejte si to sami! Použijte konzoli svého prohlížeče k vytvoření a manipulaci s polem podle svého návrhu.
+
+## Cykly
+
+Cykly nám umožňují provádět opakující se nebo **iterativní** úkoly a mohou ušetřit spoustu času a kódu. Každá iterace se může lišit svými proměnnými, hodnotami a podmínkami. V JavaScriptu existují různé typy cyklů, které mají drobné rozdíly, ale v podstatě dělají totéž: procházejí data.
+
+### For cyklus
+
+Cyklus `for` vyžaduje 3 části pro iteraci:
+- `counter` Proměnná, která je obvykle inicializována číslem a počítá počet iterací
+- `condition` Výraz, který používá operátory porovnání a způsobí zastavení cyklu, když je `false`
+- `iteration-expression` Spouští se na konci každé iterace, obvykle se používá ke změně hodnoty counteru
+  
+```javascript
+// Counting up to 10
+for (let i = 0; i < 10; i++) {
+  console.log(i);
+}
+```
+
+✅ Spusťte tento kód v konzoli prohlížeče. Co se stane, když provedete malé změny v counteru, podmínce nebo výrazu iterace? Dokážete ho spustit pozpátku, vytvořit odpočítávání?
+
+### While cyklus
+
+Na rozdíl od syntaxe cyklu `for` vyžadují cykly `while` pouze podmínku, která zastaví cyklus, když se podmínka stane `false`. Podmínky v cyklech obvykle závisí na jiných hodnotách, jako jsou countery, a musí být spravovány během cyklu. Počáteční hodnoty counterů musí být vytvořeny mimo cyklus a jakékoli výrazy pro splnění podmínky, včetně změny counteru, musí být udržovány uvnitř cyklu.
+
+```javascript
+//Counting up to 10
+let i = 0;
+while (i < 10) {
+ console.log(i);
+ i++;
+}
+```
+
+✅ Proč byste si vybrali for cyklus místo while cyklu? 17 tisíc uživatelů mělo stejnou otázku na StackOverflow a některé názory [by vás mohly zajímat](https://stackoverflow.com/questions/39969145/while-loops-vs-for-loops-in-javascript).
+
+## Cykly a pole
+
+Pole se často používají s cykly, protože většina podmínek vyžaduje délku pole k zastavení cyklu a index může být také hodnotou counteru.
+
+```javascript
+let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
+
+for (let i = 0; i < iceCreamFlavors.length; i++) {
+  console.log(iceCreamFlavors[i]);
+} //Ends when all flavors are printed
+```
+
+✅ Experimentujte s procházením pole podle svého návrhu v konzoli prohlížeče. 
+
+---
+
+## 🚀 Výzva
+
+Existují i jiné způsoby procházení polí než pomocí for a while cyklů. Jsou to [forEach](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach), [for-of](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/for...of) a [map](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/map). Přepište svůj cyklus pole pomocí jedné z těchto technik.
+
+## Kvíz po lekci
+[Kvíz po lekci](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/14)
+
+## Přehled a samostudium
+
+Pole v JavaScriptu mají mnoho metod, které jsou velmi užitečné pro manipulaci s daty. [Přečtěte si o těchto metodách](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array) a vyzkoušejte některé z nich (jako push, pop, slice a splice) na poli podle svého návrhu.
+
+## Úkol
+
+[Procházení pole](assignment.md)
+
+---
+
+**Prohlášení**:  
+Tento dokument byl přeložen pomocí služby pro automatický překlad [Co-op Translator](https://github.com/Azure/co-op-translator). Ačkoli se snažíme o přesnost, mějte prosím na paměti, že automatické překlady mohou obsahovat chyby nebo nepřesnosti. Původní dokument v jeho původním jazyce by měl být považován za autoritativní zdroj. Pro důležité informace se doporučuje profesionální lidský překlad. Neodpovídáme za žádné nedorozumění nebo nesprávné interpretace vyplývající z použití tohoto překladu.
\ No newline at end of file
diff --git a/translations/cs/2-js-basics/4-arrays-loops/assignment.md b/translations/cs/2-js-basics/4-arrays-loops/assignment.md
new file mode 100644
index 00000000..acb460ea
--- /dev/null
+++ b/translations/cs/2-js-basics/4-arrays-loops/assignment.md
@@ -0,0 +1,27 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "8b2381170bd0fd2870f5889bb8620f02",
+  "translation_date": "2025-08-28T04:11:11+00:00",
+  "source_file": "2-js-basics/4-arrays-loops/assignment.md",
+  "language_code": "cs"
+}
+-->
+# Procházení pole
+
+## Pokyny
+
+Vytvořte program, který vypíše každé 3. číslo mezi 1-20 a zobrazí ho na konzoli.
+
+> TIP: použijte for-cyklus a upravte výraz iterace
+
+## Hodnocení
+
+| Kritéria | Vynikající                             | Přiměřené                | Vyžaduje zlepšení              |
+| -------- | -------------------------------------- | ------------------------ | ------------------------------ |
+|          | Program funguje správně a je okomentovaný | Program není okomentovaný | Program je neúplný nebo obsahuje chyby |
+
+---
+
+**Prohlášení**:  
+Tento dokument byl přeložen pomocí služby pro automatický překlad [Co-op Translator](https://github.com/Azure/co-op-translator). Ačkoli se snažíme o přesnost, mějte na paměti, že automatické překlady mohou obsahovat chyby nebo nepřesnosti. Původní dokument v jeho původním jazyce by měl být považován za autoritativní zdroj. Pro důležité informace doporučujeme profesionální lidský překlad. Neodpovídáme za žádná nedorozumění nebo nesprávné interpretace vyplývající z použití tohoto překladu.
\ No newline at end of file
diff --git a/translations/cs/2-js-basics/README.md b/translations/cs/2-js-basics/README.md
new file mode 100644
index 00000000..1b690e00
--- /dev/null
+++ b/translations/cs/2-js-basics/README.md
@@ -0,0 +1,28 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "cc9e70a2f096c67389c8acff1521fc27",
+  "translation_date": "2025-08-28T04:04:03+00:00",
+  "source_file": "2-js-basics/README.md",
+  "language_code": "cs"
+}
+-->
+# Úvod do JavaScriptu
+
+JavaScript je jazyk webu. V těchto čtyřech lekcích se naučíte jeho základy.
+
+### Témata
+
+1. [Proměnné a datové typy](1-data-types/README.md)
+2. [Funkce a metody](2-functions-methods/README.md)
+3. [Rozhodování v JavaScriptu](3-making-decisions/README.md)
+4. [Pole a cykly](4-arrays-loops/README.md)
+
+### Autoři
+
+Tyto lekce byly napsány s ♥️ [Jasmine Greenaway](https://twitter.com/paladique), [Christopher Harrison](https://twitter.com/geektrainer) a [Chris Noring](https://twitter.com/chris_noring)
+
+---
+
+**Upozornění**:  
+Tento dokument byl přeložen pomocí služby pro automatický překlad [Co-op Translator](https://github.com/Azure/co-op-translator). I když se snažíme o co největší přesnost, mějte prosím na paměti, že automatické překlady mohou obsahovat chyby nebo nepřesnosti. Původní dokument v jeho původním jazyce by měl být považován za závazný zdroj. Pro kritické informace doporučujeme profesionální lidský překlad. Neodpovídáme za žádná nedorozumění nebo nesprávné výklady vyplývající z použití tohoto překladu.
\ No newline at end of file
diff --git a/translations/cs/3-terrarium/1-intro-to-html/README.md b/translations/cs/3-terrarium/1-intro-to-html/README.md
new file mode 100644
index 00000000..340083b1
--- /dev/null
+++ b/translations/cs/3-terrarium/1-intro-to-html/README.md
@@ -0,0 +1,249 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "46a0639e719b9cf1dfd062aa24cad639",
+  "translation_date": "2025-08-28T04:14:26+00:00",
+  "source_file": "3-terrarium/1-intro-to-html/README.md",
+  "language_code": "cs"
+}
+-->
+# Projekt Terrárium Část 1: Úvod do HTML
+
+![Úvod do HTML](../../../../translated_images/webdev101-html.4389c2067af68e98280c1bde52b6c6269f399eaae3659b7c846018d8a7b0bbd9.cs.png)
+> Sketchnote od [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Kvíz před lekcí
+
+[Kvíz před lekcí](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/15)
+
+> Podívejte se na video
+
+> 
+> [![Video o základech Git a GitHub](https://img.youtube.com/vi/1TvxJKBzhyQ/0.jpg)](https://www.youtube.com/watch?v=1TvxJKBzhyQ)
+
+### Úvod
+
+HTML, neboli HyperText Markup Language, je „kostra“ webu. Pokud CSS „obléká“ váš HTML a JavaScript mu vdechuje život, HTML je tělo vaší webové aplikace. Syntaxe HTML dokonce tuto myšlenku odráží, protože obsahuje značky jako „head“, „body“ a „footer“.
+
+V této lekci použijeme HTML k vytvoření „kostry“ rozhraní našeho virtuálního terária. Bude mít název a tři sloupce: pravý a levý sloupec, kde budou umístěny přetahovatelné rostliny, a střední oblast, která bude samotné terárium vypadající jako sklo. Na konci této lekce budete schopni vidět rostliny ve sloupcích, ale rozhraní bude vypadat trochu zvláštně; nebojte se, v další části přidáte CSS styly, aby rozhraní vypadalo lépe.
+
+### Úkol
+
+Na svém počítači vytvořte složku nazvanou „terrarium“ a uvnitř ní soubor nazvaný „index.html“. Můžete to udělat ve Visual Studio Code po vytvoření složky terrarium tak, že otevřete nové okno VS Code, kliknete na „otevřít složku“ a přejdete do své nové složky. Klikněte na malé tlačítko „soubor“ v panelu Průzkumníka a vytvořte nový soubor:
+
+![průzkumník ve VS Code](../../../../translated_images/vs-code-index.e2986cf919471eb984a0afef231380c8b132b000635105f2397bd2754d1b689c.cs.png)
+
+Nebo
+
+Použijte tyto příkazy v git bash:
+* `mkdir terrarium`
+* `cd terrarium`
+* `touch index.html`
+* `code index.html` nebo `nano index.html`
+
+> Soubor index.html označuje prohlížeči, že se jedná o výchozí soubor ve složce; URL jako `https://anysite.com/test` může být vytvořena pomocí struktury složek, která zahrnuje složku nazvanou `test` s `index.html` uvnitř; `index.html` nemusí být vidět v URL.
+
+---
+
+## DocType a značky html
+
+První řádek souboru HTML je jeho doctype. Je trochu překvapivé, že tento řádek musí být na úplném vrcholu souboru, ale říká starším prohlížečům, že stránka musí být vykreslena ve standardním režimu podle aktuální specifikace HTML.
+
+> Tip: ve VS Code můžete najet myší na značku a získat informace o jejím použití z referenčních příruček MDN.
+
+Druhý řádek by měl být otevírací značka `<html>`, následovaná její zavírací značkou `</html>`. Tyto značky jsou kořenovými prvky vašeho rozhraní.
+
+### Úkol
+
+Přidejte tyto řádky na začátek svého souboru `index.html`:
+
+```HTML
+<!DOCTYPE html>
+<html></html>
+```
+
+✅ Existuje několik různých režimů, které lze určit nastavením DocType pomocí dotazovacího řetězce: [Quirks Mode a Standards Mode](https://developer.mozilla.org/docs/Web/HTML/Quirks_Mode_and_Standards_Mode). Tyto režimy dříve podporovaly opravdu staré prohlížeče, které se dnes běžně nepoužívají (Netscape Navigator 4 a Internet Explorer 5). Můžete se držet standardního deklarování doctype.
+
+---
+
+## Dokumentová část 'head'
+
+Oblast 'head' dokumentu HTML obsahuje klíčové informace o vaší webové stránce, známé také jako [metadata](https://developer.mozilla.org/docs/Web/HTML/Element/meta). V našem případě sdělujeme webovému serveru, na který bude tato stránka odeslána k vykreslení, tyto čtyři věci:
+
+-   název stránky
+-   metadata stránky včetně:
+    -   'character set', který informuje o tom, jaké kódování znaků je na stránce použito
+    -   informace o prohlížeči, včetně `x-ua-compatible`, což naznačuje, že je podporován prohlížeč IE=edge
+    -   informace o tom, jak by se měl viewport chovat při načtení. Nastavení viewportu na počáteční měřítko 1 ovládá úroveň přiblížení při prvním načtení stránky.
+
+### Úkol
+
+Přidejte blok 'head' do svého dokumentu mezi otevírací a zavírací značky `<html>`.
+
+```html
+<head>
+	<title>Welcome to my Virtual Terrarium</title>
+	<meta charset="utf-8" />
+	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
+	<meta name="viewport" content="width=device-width, initial-scale=1" />
+</head>
+```
+
+✅ Co by se stalo, kdybyste nastavili meta tag viewportu takto: `<meta name="viewport" content="width=600">`? Přečtěte si více o [viewportu](https://developer.mozilla.org/docs/Web/HTML/Viewport_meta_tag).
+
+---
+
+## Dokumentová část `body`
+
+### Značky HTML
+
+V HTML přidáváte značky do svého .html souboru, abyste vytvořili prvky webové stránky. Každá značka obvykle má otevírací a zavírací značku, například: `<p>ahoj</p>` pro označení odstavce. Vytvořte tělo svého rozhraní přidáním sady značek `<body>` uvnitř páru značek `<html>`; váš kód nyní vypadá takto:
+
+### Úkol
+
+```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>
+```
+
+Nyní můžete začít vytvářet svou stránku. Obvykle používáte značky `<div>` k vytvoření samostatných prvků na stránce. Vytvoříme sérii prvků `<div>`, které budou obsahovat obrázky.
+
+### Obrázky
+
+Jedna značka HTML, která nepotřebuje zavírací značku, je `<img>`, protože má prvek `src`, který obsahuje všechny informace, které stránka potřebuje k vykreslení položky.
+
+Vytvořte ve své aplikaci složku nazvanou `images` a do ní přidejte všechny obrázky ze složky [source code folder](../../../../3-terrarium/solution/images); (je tam 14 obrázků rostlin).
+
+### Úkol
+
+Přidejte tyto obrázky rostlin do dvou sloupců mezi značky `<body></body>`:
+
+```html
+<div id="page">
+	<div id="left-container" class="container">
+		<div class="plant-holder">
+			<img class="plant" alt="plant" id="plant1" src="./images/plant1.png" />
+		</div>
+		<div class="plant-holder">
+			<img class="plant" alt="plant" id="plant2" src="./images/plant2.png" />
+		</div>
+		<div class="plant-holder">
+			<img class="plant" alt="plant" id="plant3" src="./images/plant3.png" />
+		</div>
+		<div class="plant-holder">
+			<img class="plant" alt="plant" id="plant4" src="./images/plant4.png" />
+		</div>
+		<div class="plant-holder">
+			<img class="plant" alt="plant" id="plant5" src="./images/plant5.png" />
+		</div>
+		<div class="plant-holder">
+			<img class="plant" alt="plant" id="plant6" src="./images/plant6.png" />
+		</div>
+		<div class="plant-holder">
+			<img class="plant" alt="plant" id="plant7" src="./images/plant7.png" />
+		</div>
+	</div>
+	<div id="right-container" class="container">
+		<div class="plant-holder">
+			<img class="plant" alt="plant" id="plant8" src="./images/plant8.png" />
+		</div>
+		<div class="plant-holder">
+			<img class="plant" alt="plant" id="plant9" src="./images/plant9.png" />
+		</div>
+		<div class="plant-holder">
+			<img class="plant" alt="plant" id="plant10" src="./images/plant10.png" />
+		</div>
+		<div class="plant-holder">
+			<img class="plant" alt="plant" id="plant11" src="./images/plant11.png" />
+		</div>
+		<div class="plant-holder">
+			<img class="plant" alt="plant" id="plant12" src="./images/plant12.png" />
+		</div>
+		<div class="plant-holder">
+			<img class="plant" alt="plant" id="plant13" src="./images/plant13.png" />
+		</div>
+		<div class="plant-holder">
+			<img class="plant" alt="plant" id="plant14" src="./images/plant14.png" />
+		</div>
+	</div>
+</div>
+```
+
+> Poznámka: Spany vs. Divy. Divy jsou považovány za 'blokové' prvky, zatímco Spany jsou 'řádkové'. Co by se stalo, kdybyste tyto divy změnili na spany?
+
+S tímto kódem se rostliny nyní zobrazují na obrazovce. Vypadá to dost špatně, protože ještě nejsou stylizovány pomocí CSS, což uděláme v další lekci.
+
+Každý obrázek má alternativní text, který se zobrazí, i když obrázek nemůžete vidět nebo vykreslit. Toto je důležitý atribut pro zajištění přístupnosti. Více o přístupnosti se dozvíte v budoucích lekcích; prozatím si pamatujte, že atribut alt poskytuje alternativní informace o obrázku, pokud uživatel z nějakého důvodu nemůže obrázek zobrazit (kvůli pomalému připojení, chybě v atributu src nebo pokud uživatel používá čtečku obrazovky).
+
+✅ Všimli jste si, že každý obrázek má stejný alt tag? Je to dobrá praxe? Proč ano nebo ne? Můžete tento kód vylepšit?
+
+---
+
+## Sémantické značky
+
+Obecně je lepší používat smysluplnou 'sémantiku' při psaní HTML. Co to znamená? Znamená to, že používáte značky HTML k reprezentaci typu dat nebo interakce, pro které byly navrženy. Například hlavní textový nadpis na stránce by měl používat značku `<h1>`.
+
+Přidejte následující řádek hned pod otevírací značku `<body>`:
+
+```html
+<h1>My Terrarium</h1>
+```
+
+Používání sémantických značek, jako je použití nadpisů `<h1>` a neseřazených seznamů jako `<ul>`, pomáhá čtečkám obrazovky navigovat na stránce. Obecně by tlačítka měla být napsána jako `<button>` a seznamy jako `<li>`. I když je _možné_ použít speciálně stylizované prvky `<span>` s obslužnými funkcemi kliknutí k napodobení tlačítek, je lepší pro uživatele s omezením používat technologie k určení, kde na stránce se tlačítko nachází, a interagovat s ním, pokud se prvek objeví jako tlačítko. Z tohoto důvodu se snažte používat sémantické značky co nejvíce.
+
+✅ Podívejte se na čtečku obrazovky a [jak interaguje s webovou stránkou](https://www.youtube.com/watch?v=OUDV1gqs9GA). Vidíte, proč by nesémantické značky mohly uživatele frustrovat?
+
+## Terárium
+
+Poslední část tohoto rozhraní zahrnuje vytvoření značek, které budou stylizovány tak, aby vytvořily terárium.
+
+### Úkol:
+
+Přidejte tento kód nad poslední značku `</div>`:
+
+```html
+<div id="terrarium">
+	<div class="jar-top"></div>
+	<div class="jar-walls">
+		<div class="jar-glossy-long"></div>
+		<div class="jar-glossy-short"></div>
+	</div>
+	<div class="dirt"></div>
+	<div class="jar-bottom"></div>
+</div>
+```
+
+✅ I když jste přidali tento kód na obrazovku, nevidíte vůbec nic vykresleného. Proč?
+
+---
+
+## 🚀Výzva
+
+Existují některé „divoké“ starší značky v HTML, které je stále zábavné používat, i když byste neměli používat zastaralé značky, jako jsou [tyto značky](https://developer.mozilla.org/docs/Web/HTML/Element#Obsolete_and_deprecated_elements) ve svém kódu. Přesto, můžete použít starou značku `<marquee>` k tomu, aby se nadpis h1 posouval horizontálně? (pokud ano, nezapomeňte ji poté odstranit)
+
+## Kvíz po lekci
+
+[Kvíz po lekci](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/16)
+
+## Přehled & Samostudium
+
+HTML je „osvědčený“ systém stavebních bloků, který pomohl vytvořit web takový, jaký je dnes. Naučte se něco o jeho historii studiem starých i nových značek. Dokážete zjistit, proč byly některé značky zastaralé a jiné přidány? Jaké značky by mohly být zavedeny v budoucnu?
+
+Zjistěte více o vytváření webů pro web a mobilní zařízení na [Microsoft Learn](https://docs.microsoft.com/learn/modules/build-simple-website/?WT.mc_id=academic-77807-sagibbon).
+
+## Zadání
+
+[Procvičte si HTML: Vytvořte maketu blogu](assignment.md)
+
+---
+
+**Prohlášení**:  
+Tento dokument byl přeložen pomocí služby pro automatický překlad [Co-op Translator](https://github.com/Azure/co-op-translator). Ačkoli se snažíme o přesnost, mějte prosím na paměti, že automatické překlady mohou obsahovat chyby nebo nepřesnosti. Původní dokument v jeho původním jazyce by měl být považován za autoritativní zdroj. Pro důležité informace doporučujeme profesionální lidský překlad. Neodpovídáme za žádná nedorozumění nebo nesprávné interpretace vyplývající z použití tohoto překladu.
\ No newline at end of file
diff --git a/translations/cs/3-terrarium/1-intro-to-html/assignment.md b/translations/cs/3-terrarium/1-intro-to-html/assignment.md
new file mode 100644
index 00000000..5fb0cebf
--- /dev/null
+++ b/translations/cs/3-terrarium/1-intro-to-html/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "970776c81401c9aacb34f365edac6b53",
+  "translation_date": "2025-08-28T04:15:14+00:00",
+  "source_file": "3-terrarium/1-intro-to-html/assignment.md",
+  "language_code": "cs"
+}
+-->
+# Procvičte si HTML: Vytvořte návrh blogu
+
+## Instrukce
+
+Představte si, že navrhujete nebo přepracováváte svůj osobní web. Vytvořte grafický návrh svého webu a poté napište HTML kód, který byste použili k vytvoření jednotlivých prvků webu. Můžete to udělat na papíře a naskenovat, nebo použít software dle vašeho výběru, jen se ujistěte, že HTML kód píšete ručně.
+
+## Hodnocení
+
+| Kritéria | Vynikající                                                                        | Dostatečné                                                                     | Potřebuje zlepšení                                                               |
+| -------- | --------------------------------------------------------------------------------- | ------------------------------------------------------------------------------ | -------------------------------------------------------------------------------- |
+|          | Návrh blogu je vizuálně zobrazen s alespoň 10 prvky HTML kódu                     | Návrh blogu je vizuálně zobrazen s přibližně 5 prvky HTML kódu                 | Návrh blogu je vizuálně zobrazen s maximálně 3 prvky HTML kódu                   |
+
+---
+
+**Prohlášení**:  
+Tento dokument byl přeložen pomocí služby pro automatický překlad [Co-op Translator](https://github.com/Azure/co-op-translator). Ačkoli se snažíme o přesnost, mějte na paměti, že automatické překlady mohou obsahovat chyby nebo nepřesnosti. Původní dokument v jeho původním jazyce by měl být považován za autoritativní zdroj. Pro důležité informace doporučujeme profesionální lidský překlad. Neodpovídáme za žádné nedorozumění nebo nesprávné interpretace vyplývající z použití tohoto překladu.
\ No newline at end of file
diff --git a/translations/cs/3-terrarium/2-intro-to-css/README.md b/translations/cs/3-terrarium/2-intro-to-css/README.md
new file mode 100644
index 00000000..ff94cb41
--- /dev/null
+++ b/translations/cs/3-terrarium/2-intro-to-css/README.md
@@ -0,0 +1,284 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "e375c2aeb94e2407f2667633d39580bd",
+  "translation_date": "2025-08-28T04:16:58+00:00",
+  "source_file": "3-terrarium/2-intro-to-css/README.md",
+  "language_code": "cs"
+}
+-->
+# Projekt Terrárium, část 2: Úvod do CSS
+
+![Úvod do CSS](../../../../translated_images/webdev101-css.3f7af5991bf53a200d79e7257e5e450408d8ea97f5b531d31b2e3976317338ee.cs.png)
+> Sketchnote od [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Kvíz před lekcí
+
+[Kvíz před lekcí](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/17)
+
+### Úvod
+
+CSS, neboli Cascading Style Sheets, řeší důležitý problém webového vývoje: jak udělat, aby váš web vypadal hezky. Stylování aplikací je činí uživatelsky přívětivějšími a vizuálně atraktivnějšími; pomocí CSS můžete také vytvořit responzivní webový design (RWD) – díky tomu budou vaše aplikace vypadat dobře bez ohledu na velikost obrazovky, na které jsou zobrazeny. CSS není jen o vzhledu aplikace; jeho specifikace zahrnuje animace a transformace, které umožňují sofistikované interakce. CSS Working Group pomáhá udržovat aktuální specifikace CSS; jejich práci můžete sledovat na [stránkách World Wide Web Consortium](https://www.w3.org/Style/CSS/members).
+
+> Poznámka: CSS je jazyk, který se vyvíjí, stejně jako vše na webu, a ne všechny prohlížeče podporují novější části specifikace. Vždy ověřte své implementace na [CanIUse.com](https://caniuse.com).
+
+V této lekci přidáme styly do našeho online terrária a naučíme se více o několika konceptech CSS: kaskádě, dědičnosti, použití selektorů, pozicování a využití CSS k tvorbě rozvržení. V průběhu vytvoříme rozvržení terrária a samotné terrárium.
+
+### Předpoklady
+
+Měli byste mít připravený HTML pro vaše terrárium, který je připravený ke stylování.
+
+> Podívejte se na video
+
+> 
+> [![Video o základech Git a GitHub](https://img.youtube.com/vi/6yIdOIV9p1I/0.jpg)](https://www.youtube.com/watch?v=6yIdOIV9p1I)
+
+### Úkol
+
+Ve složce terrária vytvořte nový soubor s názvem `style.css`. Importujte tento soubor do sekce `<head>`:
+
+```html
+<link rel="stylesheet" href="./style.css" />
+```
+
+---
+
+## Kaskáda
+
+Cascading Style Sheets zahrnují myšlenku, že styly "kaskádují", což znamená, že aplikace stylu je řízena jeho prioritou. Styly nastavené autorem webu mají přednost před těmi, které nastaví prohlížeč. Styly nastavené "inline" mají přednost před těmi, které jsou nastaveny v externím stylovém souboru.
+
+### Úkol
+
+Přidejte inline styl "color: red" do vašeho tagu `<h1>`:
+
+```HTML
+<h1 style="color: red">My Terrarium</h1>
+```
+
+Poté přidejte následující kód do vašeho souboru `style.css`:
+
+```CSS
+h1 {
+ color: blue;
+}
+```
+
+✅ Která barva se zobrazí ve vaší webové aplikaci? Proč? Dokážete najít způsob, jak přepsat styly? Kdy byste to chtěli udělat, nebo proč ne?
+
+---
+
+## Dědičnost
+
+Styly se dědí od předka k potomkovi, takže vnořené prvky dědí styly svých rodičů.
+
+### Úkol
+
+Nastavte font těla na daný font a zkontrolujte font vnořeného prvku:
+
+```CSS
+body {
+	font-family: helvetica, arial, sans-serif;
+}
+```
+
+Otevřete konzoli prohlížeče na záložce 'Elements' a pozorujte font H1. Dědí svůj font z těla, jak je uvedeno v prohlížeči:
+
+![zděděný font](../../../../translated_images/1.cc07a5cbe114ad1d4728c35134584ac1b87db688eff83cf75985cf31fe0ed95c.cs.png)
+
+✅ Dokážete nastavit vnořenému stylu jinou vlastnost?
+
+---
+
+## Selektory CSS
+
+### Tagy
+
+Doposud váš soubor `style.css` obsahuje pouze několik stylovaných tagů a aplikace vypadá dost zvláštně:
+
+```CSS
+body {
+	font-family: helvetica, arial, sans-serif;
+}
+
+h1 {
+	color: #3a241d;
+	text-align: center;
+}
+```
+
+Tento způsob stylování tagu vám dává kontrolu nad unikátními prvky, ale potřebujete kontrolovat styly mnoha rostlin ve vašem terráriu. K tomu musíte využít selektory CSS.
+
+### Ids
+
+Přidejte nějaký styl pro rozvržení levého a pravého kontejneru. Protože existuje pouze jeden levý kontejner a jeden pravý kontejner, jsou v označení HTML označeny id. Pro jejich stylování použijte `#`:
+
+```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;
+}
+```
+
+Zde jste umístili tyto kontejnery absolutním pozicováním na krajní levý a pravý okraj obrazovky a použili procenta pro jejich šířku, aby se mohly přizpůsobit malým mobilním obrazovkám.
+
+✅ Tento kód je dost opakující se, tedy není "DRY" (Don't Repeat Yourself); dokážete najít lepší způsob, jak stylovat tyto id, možná pomocí id a třídy? Museli byste změnit označení HTML a refaktorovat CSS:
+
+```html
+<div id="left-container" class="container"></div>
+```
+
+### Třídy
+
+V předchozím příkladu jste stylovali dva unikátní prvky na obrazovce. Pokud chcete, aby styly platily pro mnoho prvků na obrazovce, můžete použít CSS třídy. Udělejte to pro rozvržení rostlin v levém a pravém kontejneru.
+
+Všimněte si, že každá rostlina v označení HTML má kombinaci id a tříd. Id jsou zde používány JavaScriptem, který přidáte později, aby manipuloval s umístěním rostlin v terráriu. Třídy však dávají všem rostlinám daný styl.
+
+```html
+<div class="plant-holder">
+	<img class="plant" alt="plant" id="plant1" src="./images/plant1.png" />
+</div>
+```
+
+Přidejte následující do vašeho souboru `style.css`:
+
+```CSS
+.plant-holder {
+	position: relative;
+	height: 13%;
+	left: -10px;
+}
+
+.plant {
+	position: absolute;
+	max-width: 150%;
+	max-height: 150%;
+	z-index: 2;
+}
+```
+
+Pozoruhodné v tomto úryvku je směs relativního a absolutního pozicování, které pokryjeme v další sekci. Podívejte se na způsob, jakým jsou výšky zpracovány pomocí procent:
+
+Nastavili jste výšku držáku rostlin na 13 %, což je dobré číslo, aby všechny rostliny byly zobrazeny v každém vertikálním kontejneru bez nutnosti posouvání.
+
+Držák rostlin je posunut doleva, aby rostliny byly více vycentrovány v jejich kontejneru. Obrázky mají velké množství průhledného pozadí, aby byly lépe přetahovatelné, takže je třeba je posunout doleva, aby lépe seděly na obrazovce.
+
+Poté je samotné rostlině dána maximální šířka 150 %. To jí umožňuje zmenšit se, jak se prohlížeč zmenšuje. Zkuste změnit velikost prohlížeče; rostliny zůstávají ve svých kontejnerech, ale zmenšují se, aby se vešly.
+
+Také je pozoruhodné použití z-indexu, který ovládá relativní výšku prvku (takže rostliny sedí na vrcholu kontejneru a vypadají, že sedí uvnitř terrária).
+
+✅ Proč potřebujete jak selektor pro držák rostlin, tak selektor pro rostlinu?
+
+## Pozicování CSS
+
+Míchání vlastností pozicování (existují statické, relativní, pevné, absolutní a lepivé pozice) může být trochu složité, ale pokud je provedeno správně, dává vám dobrou kontrolu nad prvky na vašich stránkách.
+
+Absolutně pozicované prvky jsou pozicovány relativně k jejich nejbližším pozicovaným předkům, a pokud žádní nejsou, jsou pozicovány podle těla dokumentu.
+
+Relativně pozicované prvky jsou pozicovány na základě pokynů CSS, které upravují jejich umístění od jejich počáteční pozice.
+
+V našem příkladu je `plant-holder` relativně pozicovaný prvek, který je pozicován uvnitř absolutně pozicovaného kontejneru. Výsledné chování je, že postranní kontejnery jsou připnuty vlevo a vpravo, a `plant-holder` je vnořený, upravující se uvnitř postranních kontejnerů, čímž vytváří prostor pro rostliny, aby byly umístěny ve vertikálním sloupci.
+
+> Samotná `plant` má také absolutní pozicování, což je nezbytné pro její přetahovatelnost, jak zjistíte v další lekci.
+
+✅ Experimentujte s přepínáním typů pozicování postranních kontejnerů a `plant-holder`. Co se stane?
+
+## Rozvržení CSS
+
+Nyní použijete, co jste se naučili, k vytvoření samotného terrária, vše pomocí CSS!
+
+Nejprve stylujte děti divu `.terrarium` jako zaoblený obdélník pomocí CSS:
+
+```CSS
+.jar-walls {
+	height: 80%;
+	width: 60%;
+	background: #d1e1df;
+	border-radius: 1rem;
+	position: absolute;
+	bottom: 0.5%;
+	left: 20%;
+	opacity: 0.5;
+	z-index: 1;
+}
+
+.jar-top {
+	width: 50%;
+	height: 5%;
+	background: #d1e1df;
+	position: absolute;
+	bottom: 80.5%;
+	left: 25%;
+	opacity: 0.7;
+	z-index: 1;
+}
+
+.jar-bottom {
+	width: 50%;
+	height: 1%;
+	background: #d1e1df;
+	position: absolute;
+	bottom: 0%;
+	left: 25%;
+	opacity: 0.7;
+}
+
+.dirt {
+	width: 60%;
+	height: 5%;
+	background: #3a241d;
+	position: absolute;
+	border-radius: 0 0 1rem 1rem;
+	bottom: 1%;
+	left: 20%;
+	opacity: 0.7;
+	z-index: -1;
+}
+```
+
+Všimněte si použití procent zde. Pokud zmenšíte svůj prohlížeč, můžete vidět, jak se nádoba také zmenšuje. Také si všimněte šířek a výšek procent pro prvky nádoby a jak je každý prvek absolutně pozicován ve středu, připnutý ke spodní části viewportu.
+
+Používáme také `rem` pro border-radius, což je délka relativní k fontu. Přečtěte si více o tomto typu relativního měření ve [specifikaci CSS](https://www.w3.org/TR/css-values-3/#font-relative-lengths).
+
+✅ Zkuste změnit barvy nádoby a její průhlednost oproti barvám hlíny. Co se stane? Proč?
+
+---
+
+## 🚀Výzva
+
+Přidejte "bublinkový" lesk do levé spodní oblasti nádoby, aby vypadala více jako skleněná. Budete stylovat `.jar-glossy-long` a `.jar-glossy-short`, aby vypadaly jako odražený lesk. Takto by to mělo vypadat:
+
+![hotové terrárium](../../../../translated_images/terrarium-final.2f07047ffc597d0a06b06cab28a77801a10dd12fdb6c7fc630e9c40665491c53.cs.png)
+
+Pro dokončení kvízu po lekci projděte tento modul Learn: [Stylování HTML aplikace pomocí CSS](https://docs.microsoft.com/learn/modules/build-simple-website/4-css-basics/?WT.mc_id=academic-77807-sagibbon)
+
+## Kvíz po lekci
+
+[Kvíz po lekci](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/18)
+
+## Recenze a samostudium
+
+CSS se zdá být klamně jednoduché, ale existuje mnoho výzev při pokusu o stylování aplikace dokonale pro všechny prohlížeče a všechny velikosti obrazovek. CSS-Grid a Flexbox jsou nástroje, které byly vyvinuty, aby byla práce trochu strukturovanější a spolehlivější. Naučte se o těchto nástrojích hraním [Flexbox Froggy](https://flexboxfroggy.com/) a [Grid Garden](https://codepip.com/games/grid-garden/).
+
+## Zadání
+
+[Refaktorování CSS](assignment.md)
+
+---
+
+**Prohlášení**:  
+Tento dokument byl přeložen pomocí služby AI pro překlady [Co-op Translator](https://github.com/Azure/co-op-translator). Ačkoli se snažíme o přesnost, mějte na paměti, že automatizované překlady mohou obsahovat chyby nebo nepřesnosti. Původní dokument v jeho původním jazyce by měl být považován za autoritativní zdroj. Pro důležité informace se doporučuje profesionální lidský překlad. Neodpovídáme za žádná nedorozumění nebo nesprávné interpretace vyplývající z použití tohoto překladu.
\ No newline at end of file
diff --git a/translations/cs/3-terrarium/2-intro-to-css/assignment.md b/translations/cs/3-terrarium/2-intro-to-css/assignment.md
new file mode 100644
index 00000000..fc58cbfe
--- /dev/null
+++ b/translations/cs/3-terrarium/2-intro-to-css/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "9d4d75af51aaccfe9af778f792c62919",
+  "translation_date": "2025-08-28T04:17:48+00:00",
+  "source_file": "3-terrarium/2-intro-to-css/assignment.md",
+  "language_code": "cs"
+}
+-->
+# Refaktorování CSS
+
+## Instrukce
+
+Přepracujte vzhled terária pomocí Flexboxu nebo CSS Grid a pořiďte snímky obrazovky, abyste ukázali, že jste jej otestovali v několika prohlížečích. Možná bude nutné upravit značkování, takže vytvořte novou verzi aplikace s umístěným uměním pro váš refaktor. Nemusíte si dělat starosti s tím, aby byly prvky přetahovatelné; prozatím pouze refaktorujte HTML a CSS.
+
+## Hodnocení
+
+| Kritéria | Vynikající                                                      | Dostatečné                  | Vyžaduje zlepšení                  |
+| -------- | --------------------------------------------------------------- | --------------------------- | ----------------------------------- |
+|          | Představte kompletně přepracované terárium pomocí Flexboxu nebo CSS Grid | Přepracujte několik prvků   | Nepřepracujte terárium vůbec       |
+
+---
+
+**Prohlášení**:  
+Tento dokument byl přeložen pomocí služby pro automatický překlad [Co-op Translator](https://github.com/Azure/co-op-translator). Ačkoli se snažíme o přesnost, mějte prosím na paměti, že automatické překlady mohou obsahovat chyby nebo nepřesnosti. Původní dokument v jeho původním jazyce by měl být považován za závazný zdroj. Pro důležité informace doporučujeme profesionální lidský překlad. Neodpovídáme za žádná nedorozumění nebo nesprávné interpretace vyplývající z použití tohoto překladu.
\ No newline at end of file
diff --git a/translations/cs/3-terrarium/3-intro-to-DOM-and-closures/README.md b/translations/cs/3-terrarium/3-intro-to-DOM-and-closures/README.md
new file mode 100644
index 00000000..b294378a
--- /dev/null
+++ b/translations/cs/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-28T04:20:09+00:00",
+  "source_file": "3-terrarium/3-intro-to-DOM-and-closures/README.md",
+  "language_code": "cs"
+}
+-->
+# Projekt Terrárium, část 3: Manipulace s DOM a uzávěr
+
+![DOM a uzávěr](../../../../translated_images/webdev101-js.10280393044d7eaaec7e847574946add7ddae6be2b2194567d848b61d849334a.cs.png)
+> Sketchnote od [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Kvíz před lekcí
+
+[Kvíz před lekcí](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/19)
+
+### Úvod
+
+Manipulace s DOM, neboli "Document Object Model", je klíčovým aspektem vývoje webu. Podle [MDN](https://developer.mozilla.org/docs/Web/API/Document_Object_Model/Introduction) je "Document Object Model (DOM) datovou reprezentací objektů, které tvoří strukturu a obsah dokumentu na webu." Výzvy spojené s manipulací s DOM na webu často vedly k používání JavaScriptových frameworků namísto čistého JavaScriptu pro správu DOM, ale my si vystačíme sami!
+
+Kromě toho tato lekce představí koncept [JavaScriptového uzávěru](https://developer.mozilla.org/docs/Web/JavaScript/Closures), který si můžete představit jako funkci uzavřenou jinou funkcí, takže vnitřní funkce má přístup k rozsahu vnější funkce.
+
+> JavaScriptové uzávěry jsou rozsáhlé a složité téma. Tato lekce se dotýká pouze základní myšlenky, že v kódu tohoto terrária najdete uzávěr: vnitřní funkci a vnější funkci, které jsou konstruovány tak, aby vnitřní funkce měla přístup k rozsahu vnější funkce. Pro mnohem více informací o tom, jak to funguje, navštivte [rozsáhlou dokumentaci](https://developer.mozilla.org/docs/Web/JavaScript/Closures).
+
+Uzávěr použijeme k manipulaci s DOM.
+
+Představte si DOM jako strom, který reprezentuje všechny způsoby, jak lze manipulovat s dokumentem webové stránky. Byla vytvořena různá API (Application Program Interfaces), aby programátoři mohli pomocí svého preferovaného programovacího jazyka přistupovat k DOM a upravovat, měnit, přeskupovat a jinak jej spravovat.
+
+![Reprezentace stromu DOM](../../../../translated_images/dom-tree.7daf0e763cbbba9273f9a66fe04c98276d7d23932309b195cb273a9cf1819b42.cs.png)
+
+> Reprezentace DOM a HTML značek, které na něj odkazují. Zdroj: [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
+
+V této lekci dokončíme náš interaktivní projekt terrária vytvořením JavaScriptu, který umožní uživateli manipulovat s rostlinami na stránce.
+
+### Předpoklady
+
+Měli byste mít vytvořený HTML a CSS pro vaše terrárium. Na konci této lekce budete schopni přesouvat rostliny do terrária a ven z něj pomocí přetahování.
+
+### Úkol
+
+Ve složce terrária vytvořte nový soubor s názvem `script.js`. Tento soubor importujte do sekce `<head>`:
+
+```html
+	<script src="./script.js" defer></script>
+```
+
+> Poznámka: při importu externího JavaScriptového souboru do HTML souboru použijte atribut `defer`, aby se JavaScript spustil až po úplném načtení HTML souboru. Můžete také použít atribut `async`, který umožňuje spuštění skriptu během parsování HTML souboru, ale v našem případě je důležité, aby byly HTML prvky plně dostupné pro přetahování před spuštěním skriptu pro přetahování.
+---
+
+## Prvky DOM
+
+První věc, kterou musíte udělat, je vytvořit reference na prvky, které chcete v DOM manipulovat. V našem případě to je 14 rostlin aktuálně čekajících v postranních panelech.
+
+### Úkol
+
+```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'));
+```
+
+Co se zde děje? Odkazujete na dokument a procházíte jeho DOM, abyste našli prvek s konkrétním Id. Pamatujete si, že jste v první lekci o HTML přiřadili jednotlivá Id ke každému obrázku rostliny (`id="plant1"`)? Nyní tuto práci využijete. Po identifikaci každého prvku předáte tento prvek funkci `dragElement`, kterou za chvíli vytvoříte. Tím se prvek v HTML stane přetahovatelným, nebo brzy bude.
+
+✅ Proč odkazujeme na prvky podle Id? Proč ne podle jejich CSS třídy? Můžete se vrátit k předchozí lekci o CSS, abyste na tuto otázku odpověděli.
+
+---
+
+## Uzávěr
+
+Nyní jste připraveni vytvořit uzávěr `dragElement`, což je vnější funkce, která uzavírá vnitřní funkci nebo funkce (v našem případě budou tři).
+
+Uzávěry jsou užitečné, když jedna nebo více funkcí potřebuje přístup k rozsahu vnější funkce. Zde je příklad:
+
+```javascript
+function displayCandy(){
+	let candy = ['jellybeans'];
+	function addCandy(candyType) {
+		candy.push(candyType)
+	}
+	addCandy('gumdrops');
+}
+displayCandy();
+console.log(candy)
+```
+
+V tomto příkladu funkce `displayCandy` obklopuje funkci, která přidává nový typ cukrovinky do pole, které již existuje ve funkci. Pokud byste tento kód spustili, pole `candy` by bylo nedefinované, protože je to lokální proměnná (lokální pro uzávěr).
+
+✅ Jak můžete zajistit, aby bylo pole `candy` přístupné? Zkuste jej přesunout mimo uzávěr. Tím se pole stane globálním, místo aby zůstalo dostupné pouze v lokálním rozsahu uzávěru.
+
+### Úkol
+
+Pod deklaracemi prvků v `script.js` vytvořte funkci:
+
+```javascript
+function dragElement(terrariumElement) {
+	//set 4 positions for positioning on the screen
+	let pos1 = 0,
+		pos2 = 0,
+		pos3 = 0,
+		pos4 = 0;
+	terrariumElement.onpointerdown = pointerDrag;
+}
+```
+
+`dragElement` získá svůj objekt `terrariumElement` z deklarací na začátku skriptu. Poté nastavíte některé lokální pozice na `0` pro objekt předaný do funkce. Tyto lokální proměnné budou manipulovány pro každý prvek, jakmile přidáte funkčnost přetahování a upouštění v rámci uzávěru pro každý prvek. Terrárium bude naplněno těmito přetaženými prvky, takže aplikace musí sledovat, kam jsou umístěny.
+
+Kromě toho je prvku `terrariumElement`, který je předán této funkci, přiřazena událost `pointerdown`, která je součástí [webových API](https://developer.mozilla.org/docs/Web/API) navržených pro správu DOM. `onpointerdown` se spustí, když je stisknuto tlačítko nebo v našem případě je dotčen přetahovatelný prvek. Tento obslužný program událostí funguje jak na [webových, tak mobilních prohlížečích](https://caniuse.com/?search=onpointerdown), s několika výjimkami.
+
+✅ [Obslužný program událostí `onclick`](https://developer.mozilla.org/docs/Web/API/GlobalEventHandlers/onclick) má mnohem větší podporu napříč prohlížeči; proč byste jej zde nepoužili? Zamyslete se nad konkrétním typem interakce, kterou se snažíte vytvořit.
+
+---
+
+## Funkce Pointerdrag
+
+Prvek `terrariumElement` je připraven k přetahování; když je událost `onpointerdown` spuštěna, je vyvolána funkce `pointerDrag`. Přidejte tuto funkci hned pod tento řádek: `terrariumElement.onpointerdown = pointerDrag;`:
+
+### Úkol 
+
+```javascript
+function pointerDrag(e) {
+	e.preventDefault();
+	console.log(e);
+	pos3 = e.clientX;
+	pos4 = e.clientY;
+}
+```
+
+Děje se několik věcí. Nejprve zabráníte výchozím událostem, které by normálně nastaly při pointerdown, pomocí `e.preventDefault();`. Tím získáte větší kontrolu nad chováním rozhraní.
+
+> Vraťte se k tomuto řádku, až budete mít skript kompletně vytvořen, a zkuste to bez `e.preventDefault()` - co se stane?
+
+Za druhé, otevřete `index.html` v okně prohlížeče a zkontrolujte rozhraní. Když kliknete na rostlinu, můžete vidět, jak je událost 'e' zachycena. Prozkoumejte událost a podívejte se, kolik informací je shromážděno jednou událostí pointerdown!  
+
+Dále si všimněte, jak jsou lokální proměnné `pos3` a `pos4` nastaveny na e.clientX. Tyto hodnoty můžete najít v inspekčním panelu. Tyto hodnoty zachycují souřadnice x a y rostliny v okamžiku, kdy na ni kliknete nebo se jí dotknete. Budete potřebovat jemnou kontrolu nad chováním rostlin při jejich klikání a přetahování, takže sledujete jejich souřadnice.
+
+✅ Je stále jasnější, proč je celá tato aplikace postavena na jednom velkém uzávěru? Pokud by tomu tak nebylo, jak byste udrželi rozsah pro každou ze 14 přetahovatelných rostlin?
+
+Dokončete počáteční funkci přidáním dalších dvou manipulací událostí pointer pod `pos4 = e.clientY`:
+
+```html
+document.onpointermove = elementDrag;
+document.onpointerup = stopElementDrag;
+```
+Nyní naznačujete, že chcete, aby se rostlina pohybovala spolu s ukazatelem, jakmile ji přetáhnete, a aby se gesto přetahování zastavilo, když rostlinu odznačíte. `onpointermove` a `onpointerup` jsou všechny součástí stejného API jako `onpointerdown`. Rozhraní nyní bude házet chyby, protože jste dosud nedefinovali funkce `elementDrag` a `stopElementDrag`, takže je vytvořte jako další.
+
+## Funkce elementDrag a stopElementDrag
+
+Uzávěr dokončíte přidáním dalších dvou vnitřních funkcí, které budou řešit, co se stane, když přetahujete rostlinu a přestanete ji přetahovat. Chování, které chcete, je, že můžete kdykoli přetáhnout jakoukoli rostlinu a umístit ji kamkoli na obrazovku. Toto rozhraní je poměrně neomezené (například zde není žádná zóna pro upuštění), aby vám umožnilo navrhnout vaše terrárium přesně podle vašich představ přidáváním, odebíráním a přemisťováním rostlin.
+
+### Úkol
+
+Přidejte funkci `elementDrag` hned za zavírací složenou závorku `pointerDrag`:
+
+```javascript
+function elementDrag(e) {
+	pos1 = pos3 - e.clientX;
+	pos2 = pos4 - e.clientY;
+	pos3 = e.clientX;
+	pos4 = e.clientY;
+	console.log(pos1, pos2, pos3, pos4);
+	terrariumElement.style.top = terrariumElement.offsetTop - pos2 + 'px';
+	terrariumElement.style.left = terrariumElement.offsetLeft - pos1 + 'px';
+}
+```
+V této funkci provádíte mnoho úprav počátečních pozic 1-4, které jste nastavili jako lokální proměnné ve vnější funkci. Co se zde děje?
+
+Při přetahování znovu přiřazujete `pos1` tak, že jej nastavíte na hodnotu `pos3` (kterou jste dříve nastavili jako `e.clientX`) minus aktuální hodnotu `e.clientX`. Podobnou operaci provádíte s `pos2`. Poté resetujete `pos3` a `pos4` na nové souřadnice X a Y prvku. Tyto změny můžete sledovat v konzoli při přetahování. Poté manipulujete s CSS stylem rostliny, abyste nastavili její novou pozici na základě nových pozic `pos1` a `pos2`, přičemž vypočítáváte souřadnice X a Y rostliny na základě porovnání jejího offsetu s těmito novými pozicemi.
+
+> `offsetTop` a `offsetLeft` jsou vlastnosti CSS, které nastavují pozici prvku na základě jeho rodiče; jeho rodičem může být jakýkoli prvek, který není pozicován jako `static`. 
+
+Všechny tyto přepočty pozic vám umožňují jemně doladit chování terrária a jeho rostlin.
+
+### Úkol 
+
+Posledním úkolem pro dokončení rozhraní je přidání funkce `stopElementDrag` za zavírací složenou závorku `elementDrag`:
+
+```javascript
+function stopElementDrag() {
+	document.onpointerup = null;
+	document.onpointermove = null;
+}
+```
+
+Tato malá funkce resetuje události `onpointerup` a `onpointermove`, takže můžete buď restartovat pohyb rostliny tím, že ji začnete znovu přetahovat, nebo začít přetahovat novou rostlinu.
+
+✅ Co se stane, pokud tyto události nenastavíte na null?
+
+Nyní jste dokončili svůj projekt!
+
+🥇Gratulujeme! Dokončili jste své krásné terrárium. ![hotové terrárium](../../../../translated_images/terrarium-final.0920f16e87c13a84cd2b553a5af9a3ad1cffbd41fbf8ce715d9e9c43809a5e2c.cs.png)
+
+---
+
+## 🚀Výzva
+
+Přidejte nový obslužný program událostí do svého uzávěru, aby rostliny dělaly něco navíc; například dvojitým kliknutím na rostlinu ji přesuňte do popředí. Buďte kreativní!
+
+## Kvíz po lekci
+
+[Kvíz po lekci](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/20)
+
+## Přehled a samostudium
+
+I když se přetahování prvků po obrazovce může zdát triviální, existuje mnoho způsobů, jak to udělat, a mnoho úskalí, v závislosti na efektu, kterého chcete dosáhnout. Ve skutečnosti existuje celé [API pro přetahování a upouštění](https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_API), které můžete vyzkoušet. V tomto modulu jsme jej nepoužili, protože efekt, který jsme chtěli, byl poněkud odlišný, ale zkuste toto API na svém vlastním projektu a uvidíte, čeho můžete dosáhnout.
+
+Najděte více informací o událostech pointer na [W3C dokumentaci](https://www.w3.org/TR/pointerevents1/) a na [MDN webové dokumentaci](https://developer.mozilla.org/docs/Web/API/Pointer_events).
+
+Vždy kontrolujte schopnosti prohlížečů pomocí [CanIUse.com](https://caniuse.com/).
+
+## Zadání
+
+[Pracujte trochu více s DOM](assignment.md)
+
+---
+
+**Prohlášení**:  
+Tento dokument byl přeložen pomocí služby pro automatický překlad [Co-op Translator](https://github.com/Azure/co-op-translator). I když se snažíme o přesnost, mějte na paměti, že automatické překlady mohou obsahovat chyby nebo nepřesnosti. Původní dokument v jeho původním jazyce by měl být považován za autoritativní zdroj. Pro důležité informace doporučujeme profesionální lidský překlad. Neodpovídáme za žádná nedorozumění nebo nesprávné interpretace vyplývající z použití tohoto překladu.
\ No newline at end of file
diff --git a/translations/cs/3-terrarium/3-intro-to-DOM-and-closures/assignment.md b/translations/cs/3-terrarium/3-intro-to-DOM-and-closures/assignment.md
new file mode 100644
index 00000000..2df91f72
--- /dev/null
+++ b/translations/cs/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-28T04:21:12+00:00",
+  "source_file": "3-terrarium/3-intro-to-DOM-and-closures/assignment.md",
+  "language_code": "cs"
+}
+-->
+# Pracujte trochu více s DOM
+
+## Pokyny
+
+Prozkoumejte DOM trochu více tím, že si 'adoptujete' jeden prvek DOM. Navštivte [seznam rozhraní DOM na MDN](https://developer.mozilla.org/docs/Web/API/Document_Object_Model) a vyberte si jedno. Najděte jeho použití na nějaké webové stránce na internetu a napište vysvětlení, jak je používán.
+
+## Hodnocení
+
+| Kritéria | Vynikající                                   | Dostatečné                                      | Potřebuje zlepšení      |
+| -------- | ------------------------------------------- | ----------------------------------------------- | ----------------------- |
+|          | Je předložen odstavec s příkladem           | Je předložen odstavec bez příkladu              | Není předložen žádný text |
+
+---
+
+**Prohlášení**:  
+Tento dokument byl přeložen pomocí služby pro automatický překlad [Co-op Translator](https://github.com/Azure/co-op-translator). Ačkoli se snažíme o přesnost, mějte prosím na paměti, že automatické překlady mohou obsahovat chyby nebo nepřesnosti. Původní dokument v jeho původním jazyce by měl být považován za autoritativní zdroj. Pro důležité informace doporučujeme profesionální lidský překlad. Neodpovídáme za žádné nedorozumění nebo nesprávné interpretace vyplývající z použití tohoto překladu.
\ No newline at end of file
diff --git a/translations/cs/3-terrarium/README.md b/translations/cs/3-terrarium/README.md
new file mode 100644
index 00000000..bc145768
--- /dev/null
+++ b/translations/cs/3-terrarium/README.md
@@ -0,0 +1,45 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "7965cd2bc5dc92ad888dc4c6ab2ab70a",
+  "translation_date": "2025-08-28T04:13:12+00:00",
+  "source_file": "3-terrarium/README.md",
+  "language_code": "cs"
+}
+-->
+# Můj terárium: Projekt pro učení HTML, CSS a manipulace s DOM pomocí JavaScriptu 🌵🌱
+
+Malé cvičení s přetahováním prvků. S trochou HTML, JS a CSS budete schopni vytvořit webové rozhraní, stylovat ho a dokonce přidat různé interakce dle vašeho výběru.
+
+![moje terárium](../../../translated_images/screenshot_gray.0c796099a1f9f25e40aa55ead81f268434c00af30d7092490759945eda63067d.cs.png)
+
+# Lekce
+
+1. [Úvod do HTML](./1-intro-to-html/README.md)
+2. [Úvod do CSS](./2-intro-to-css/README.md)
+3. [Úvod do DOM a uzávěrů v JS](./3-intro-to-DOM-and-closures/README.md)
+
+## Poděkování
+
+Napsáno s ♥️ od [Jen Looper](https://www.twitter.com/jenlooper)
+
+Terárium vytvořené pomocí CSS bylo inspirováno skleněnou nádobou od Jakuba Mandry na [codepen](https://codepen.io/Rotarepmi/pen/rjpNZY).
+
+Ilustrace jsou ručně kreslené [Jen Looper](http://jenlooper.com) s pomocí aplikace Procreate.
+
+## Nasazení vašeho terária
+
+Své terárium můžete nasadit nebo publikovat na webu pomocí Azure Static Web Apps.
+
+1. Forkněte toto repozitář
+
+2. Stiskněte toto tlačítko
+
+[![Tlačítko pro nasazení na Azure](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/?feature.customportal=false&WT.mc_id=academic-77807-sagibbon#create/Microsoft.StaticApp)
+
+3. Projděte průvodcem pro vytvoření vaší aplikace. Ujistěte se, že nastavíte kořen aplikace buď na `/solution` nebo na kořen vaší kódové základny. Tato aplikace neobsahuje žádné API, takže se tím nemusíte zabývat. Ve vašem forkovaném repozitáři bude vytvořena složka github, která pomůže službám Azure Static Web Apps sestavit a publikovat vaši aplikaci na novou URL adresu.
+
+---
+
+**Prohlášení**:  
+Tento dokument byl přeložen pomocí služby pro automatický překlad [Co-op Translator](https://github.com/Azure/co-op-translator). Ačkoli se snažíme o přesnost, mějte prosím na paměti, že automatické překlady mohou obsahovat chyby nebo nepřesnosti. Původní dokument v jeho původním jazyce by měl být považován za autoritativní zdroj. Pro důležité informace se doporučuje profesionální lidský překlad. Neodpovídáme za žádné nedorozumění nebo nesprávné interpretace vyplývající z použití tohoto překladu.
\ No newline at end of file
diff --git a/translations/cs/3-terrarium/solution/README.md b/translations/cs/3-terrarium/solution/README.md
new file mode 100644
index 00000000..05813746
--- /dev/null
+++ b/translations/cs/3-terrarium/solution/README.md
@@ -0,0 +1,39 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "6329fbe8bd936068debd78cca6f09c0a",
+  "translation_date": "2025-08-28T04:15:42+00:00",
+  "source_file": "3-terrarium/solution/README.md",
+  "language_code": "cs"
+}
+-->
+# Můj terárium: Projekt na naučení se HTML, CSS a manipulace s DOM pomocí JavaScriptu 🌵🌱
+
+Malá meditace s kódem typu drag and drop. S trochou HTML, JS a CSS můžete vytvořit webové rozhraní, upravit jeho styl a přidat interakci.
+
+![moje terárium](../../../../translated_images/screenshot_gray.0c796099a1f9f25e40aa55ead81f268434c00af30d7092490759945eda63067d.cs.png)
+
+## Poděkování
+
+Napsáno s ♥️  od [Jen Looper](https://www.twitter.com/jenlooper)
+
+Terárium vytvořené pomocí CSS bylo inspirováno skleněnou nádobou od Jakuba Mandry na [codepen](https://codepen.io/Rotarepmi/pen/rjpNZY).
+
+Ilustrace byly ručně nakresleny [Jen Looper](http://jenlooper.com) pomocí aplikace Procreate.
+
+## Publikujte své terárium
+
+Svůj terárium můžete publikovat na webu pomocí Azure Static Web Apps.
+
+1. Forkněte tento repozitář
+
+2. Stiskněte toto tlačítko
+
+[![Tlačítko pro nasazení na Azure](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/?feature.customportal=false&WT.mc_id=academic-77807-sagibbon#create/Microsoft.StaticApp)
+
+3. Projděte průvodcem vytvoření aplikace. Ujistěte se, že nastavíte kořen aplikace buď na `/solution` nebo na kořen vašeho kódu. V této aplikaci není žádné API, takže se tím nemusíte zabývat. Ve vašem forkovaném repozitáři bude vytvořena složka .github, která pomůže službě Azure Static Web Apps sestavit a publikovat vaši aplikaci na novou URL adresu.
+
+---
+
+**Prohlášení**:  
+Tento dokument byl přeložen pomocí služby pro automatický překlad [Co-op Translator](https://github.com/Azure/co-op-translator). Přestože se snažíme o přesnost, mějte prosím na paměti, že automatické překlady mohou obsahovat chyby nebo nepřesnosti. Původní dokument v jeho původním jazyce by měl být považován za autoritativní zdroj. Pro důležité informace doporučujeme profesionální lidský překlad. Neodpovídáme za žádná nedorozumění nebo nesprávné interpretace vyplývající z použití tohoto překladu.
\ No newline at end of file
diff --git a/translations/cs/4-typing-game/README.md b/translations/cs/4-typing-game/README.md
new file mode 100644
index 00000000..ea527ecc
--- /dev/null
+++ b/translations/cs/4-typing-game/README.md
@@ -0,0 +1,44 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "957547b822c40042e07d591c4fbfde4f",
+  "translation_date": "2025-08-28T04:25:41+00:00",
+  "source_file": "4-typing-game/README.md",
+  "language_code": "cs"
+}
+-->
+# Programování řízené událostmi - Vytvořte hru na psaní
+
+## Úvod
+
+Psaní je jednou z nejvíce podceňovaných dovedností vývojáře. Schopnost rychle přenášet myšlenky z hlavy do editoru umožňuje volný tok kreativity. Jedním z nejlepších způsobů, jak se učit, je hrát hru!
+
+> Tak pojďme vytvořit hru na psaní!
+
+Použijete dovednosti v JavaScriptu, HTML a CSS, které jste si dosud osvojili, k vytvoření hry na psaní. Hra hráči zobrazí náhodný citát (používáme citáty [Sherlocka Holmese](https://en.wikipedia.org/wiki/Sherlock_Holmes)) a změří, jak dlouho hráči trvá, než ho přesně napíše. Použijete dovednosti v JavaScriptu, HTML a CSS, které jste si dosud osvojili, k vytvoření hry na psaní.
+
+![demo](../../../4-typing-game/images/demo.gif)
+
+## Předpoklady
+
+Tato lekce předpokládá, že jste obeznámeni s následujícími koncepty:
+
+- Vytváření textových vstupů a ovládacích tlačítek
+- CSS a nastavování stylů pomocí tříd
+- Základy JavaScriptu
+  - Vytváření pole
+  - Generování náhodného čísla
+  - Získání aktuálního času
+
+## Lekce
+
+[Vytvoření hry na psaní pomocí programování řízeného událostmi](./typing-game/README.md)
+
+## Poděkování
+
+Napsáno s ♥️ od [Christopher Harrison](http://www.twitter.com/geektrainer)
+
+---
+
+**Prohlášení**:  
+Tento dokument byl přeložen pomocí služby pro automatický překlad [Co-op Translator](https://github.com/Azure/co-op-translator). I když se snažíme o přesnost, mějte na paměti, že automatické překlady mohou obsahovat chyby nebo nepřesnosti. Původní dokument v jeho původním jazyce by měl být považován za autoritativní zdroj. Pro kritické informace doporučujeme profesionální lidský překlad. Neodpovídáme za žádná nedorozumění nebo nesprávné interpretace vyplývající z použití tohoto překladu.
\ No newline at end of file
diff --git a/translations/cs/4-typing-game/solution/README.md b/translations/cs/4-typing-game/solution/README.md
new file mode 100644
index 00000000..a741a270
--- /dev/null
+++ b/translations/cs/4-typing-game/solution/README.md
@@ -0,0 +1,15 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "068cbb9b3c10a96d503f6cdd6c9ace8c",
+  "translation_date": "2025-08-28T04:28:51+00:00",
+  "source_file": "4-typing-game/solution/README.md",
+  "language_code": "cs"
+}
+-->
+Toto je zástupný text, záměrně ponechaný prázdný.
+
+---
+
+**Prohlášení**:  
+Tento dokument byl přeložen pomocí služby pro automatický překlad [Co-op Translator](https://github.com/Azure/co-op-translator). I když se snažíme o přesnost, mějte prosím na paměti, že automatické překlady mohou obsahovat chyby nebo nepřesnosti. Původní dokument v jeho původním jazyce by měl být považován za závazný zdroj. Pro důležité informace doporučujeme profesionální lidský překlad. Neodpovídáme za žádná nedorozumění nebo nesprávné výklady vyplývající z použití tohoto překladu.
\ No newline at end of file
diff --git a/translations/cs/4-typing-game/typing-game/README.md b/translations/cs/4-typing-game/typing-game/README.md
new file mode 100644
index 00000000..a1ebe216
--- /dev/null
+++ b/translations/cs/4-typing-game/typing-game/README.md
@@ -0,0 +1,353 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "e982871b8388c59c22a41b73b5fca70f",
+  "translation_date": "2025-08-28T04:27:32+00:00",
+  "source_file": "4-typing-game/typing-game/README.md",
+  "language_code": "cs"
+}
+-->
+# Vytvoření hry pomocí událostí
+
+## Kvíz před lekcí
+
+[Kvíz před lekcí](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/21)
+
+## Programování řízené událostmi
+
+Při vytváření aplikace pro prohlížeč poskytujeme grafické uživatelské rozhraní (GUI), které uživatel používá při interakci s tím, co jsme vytvořili. Nejčastějším způsobem interakce s prohlížečem je klikání a psaní do různých prvků. Výzvou pro nás jako vývojáře je, že nevíme, kdy uživatel tyto operace provede!
+
+[Programování řízené událostmi](https://en.wikipedia.org/wiki/Event-driven_programming) je název pro typ programování, který potřebujeme k vytvoření našeho GUI. Pokud tento termín trochu rozebereme, zjistíme, že klíčovým slovem je **událost**. [Událost](https://www.merriam-webster.com/dictionary/event), podle Merriam-Webster, je definována jako „něco, co se stane“. To dokonale popisuje naši situaci. Víme, že se něco stane, na co chceme reagovat spuštěním kódu, ale nevíme, kdy k tomu dojde.
+
+Část kódu, kterou chceme spustit, označíme vytvořením funkce. Když přemýšlíme o [procedurálním programování](https://en.wikipedia.org/wiki/Procedural_programming), funkce se volají v konkrétním pořadí. Totéž platí pro programování řízené událostmi. Rozdíl je v tom, **jak** se funkce volají.
+
+Pro zpracování událostí (klikání na tlačítka, psaní atd.) registrujeme **posluchače událostí**. Posluchač událostí je funkce, která čeká na to, až dojde k události, a poté se spustí. Posluchači událostí mohou aktualizovat uživatelské rozhraní, provádět volání na server nebo dělat cokoli jiného, co je potřeba v reakci na akci uživatele. Posluchače událostí přidáváme pomocí [addEventListener](https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener) a poskytujeme funkci, která se má spustit.
+
+> **NOTE:** Stojí za zmínku, že existuje mnoho způsobů, jak vytvořit posluchače událostí. Můžete použít anonymní funkce nebo vytvořit pojmenované. Můžete použít různé zkratky, jako je nastavení vlastnosti `click`, nebo použít `addEventListener`. V našem cvičení se zaměříme na `addEventListener` a anonymní funkce, protože je to pravděpodobně nejběžnější technika, kterou weboví vývojáři používají. Je také nejflexibilnější, protože `addEventListener` funguje pro všechny události a název události lze poskytnout jako parametr.
+
+### Běžné události
+
+Existuje [desítky událostí](https://developer.mozilla.org/docs/Web/Events), které můžete použít při vytváření aplikace. Prakticky vše, co uživatel na stránce udělá, vyvolá událost, což vám dává velkou moc zajistit, že dostane požadovaný zážitek. Naštěstí obvykle budete potřebovat jen několik málo událostí. Zde je několik běžných (včetně dvou, které použijeme při vytváření naší hry):
+
+- [click](https://developer.mozilla.org/docs/Web/API/Element/click_event): Uživatel kliknul na něco, obvykle na tlačítko nebo odkaz
+- [contextmenu](https://developer.mozilla.org/docs/Web/API/Element/contextmenu_event): Uživatel kliknul pravým tlačítkem myši
+- [select](https://developer.mozilla.org/docs/Web/API/Element/select_event): Uživatel označil nějaký text
+- [input](https://developer.mozilla.org/docs/Web/API/Element/input_event): Uživatel zadal nějaký text
+
+## Vytvoření hry
+
+Vytvoříme hru, abychom prozkoumali, jak události fungují v JavaScriptu. Naše hra otestuje schopnost hráče psát na klávesnici, což je jedna z nejvíce podceňovaných dovedností, kterou by měl mít každý vývojář. Všichni bychom měli trénovat psaní! Obecný průběh hry bude vypadat takto:
+
+- Hráč klikne na tlačítko start a zobrazí se mu citát, který má napsat
+- Hráč co nejrychleji napíše citát do textového pole
+  - Jakmile dokončí každé slovo, další se zvýrazní
+  - Pokud hráč udělá chybu, textové pole se zbarví červeně
+  - Když hráč dokončí citát, zobrazí se zpráva o úspěchu s uplynulým časem
+
+Pojďme hru vytvořit a naučit se něco o událostech!
+
+### Struktura souborů
+
+Budeme potřebovat celkem tři soubory: **index.html**, **script.js** a **style.css**. Začněme jejich nastavením, abychom si práci trochu usnadnili.
+
+- Vytvořte novou složku pro svou práci otevřením konzole nebo terminálového okna a zadáním následujícího příkazu:
+
+```bash
+# Linux or macOS
+mkdir typing-game && cd typing-game
+
+# Windows
+md typing-game && cd typing-game
+```
+
+- Otevřete Visual Studio Code
+
+```bash
+code .
+```
+
+- Přidejte do složky ve Visual Studio Code tři soubory s následujícími názvy:
+  - index.html
+  - script.js
+  - style.css
+
+## Vytvoření uživatelského rozhraní
+
+Pokud prozkoumáme požadavky, víme, že budeme potřebovat několik prvků na naší HTML stránce. Je to něco jako recept, kde potřebujeme nějaké ingredience:
+
+- Místo pro zobrazení citátu, který má uživatel napsat
+- Místo pro zobrazení zpráv, například zprávy o úspěchu
+- Textové pole pro psaní
+- Tlačítko start
+
+Každý z těchto prvků bude potřebovat ID, abychom s nimi mohli pracovat v našem JavaScriptu. Také přidáme odkazy na CSS a JavaScriptové soubory, které vytvoříme.
+
+Vytvořte nový soubor s názvem **index.html**. Přidejte následující 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>
+```
+
+### Spuštění aplikace
+
+Vždy je nejlepší vyvíjet iterativně, abychom viděli, jak věci vypadají. Spusťme naši aplikaci. Ve Visual Studio Code je skvělý rozšíření nazvané [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon), které bude hostovat vaši aplikaci lokálně a aktualizovat prohlížeč pokaždé, když uložíte.
+
+- Nainstalujte [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) podle odkazu a klikněte na **Install**
+  - Prohlížeč vás vyzve k otevření Visual Studio Code, a poté vás Visual Studio Code vyzve k provedení instalace
+  - Restartujte Visual Studio Code, pokud budete vyzváni
+- Po instalaci klikněte ve Visual Studio Code na Ctrl-Shift-P (nebo Cmd-Shift-P) pro otevření příkazové palety
+- Zadejte **Live Server: Open with Live Server**
+  - Live Server začne hostovat vaši aplikaci
+- Otevřete prohlížeč a přejděte na **https://localhost:5500**
+- Nyní byste měli vidět stránku, kterou jste vytvořili!
+
+Přidejme nějakou funkčnost.
+
+## Přidání CSS
+
+S naším HTML vytvořeným přidáme CSS pro základní stylování. Potřebujeme zvýraznit slovo, které by měl hráč psát, a zbarvit textové pole, pokud to, co napsal, není správné. Uděláme to pomocí dvou tříd.
+
+Vytvořte nový soubor s názvem **style.css** a přidejte následující syntax.
+
+```css
+/* inside style.css */
+.highlight {
+  background-color: yellow;
+}
+
+.error {
+  background-color: lightcoral;
+  border: red;
+}
+```
+
+✅ Co se týče CSS, můžete si stránku uspořádat podle svého. Věnujte trochu času tomu, aby stránka vypadala atraktivněji:
+
+- Vyberte jiný font
+- Zbarvěte nadpisy
+- Změňte velikost prvků
+
+## JavaScript
+
+S naším uživatelským rozhraním vytvořeným je čas zaměřit naši pozornost na JavaScript, který poskytne logiku. Rozdělíme to na několik kroků:
+
+- [Vytvoření konstant](../../../../4-typing-game/typing-game)
+- [Posluchač událostí pro spuštění hry](../../../../4-typing-game/typing-game)
+- [Posluchač událostí pro psaní](../../../../4-typing-game/typing-game)
+
+Nejprve však vytvořte nový soubor s názvem **script.js**.
+
+### Přidání konstant
+
+Budeme potřebovat několik položek, které nám usnadní programování. Opět, podobně jako recept, zde je, co budeme potřebovat:
+
+- Pole se seznamem všech citátů
+- Prázdné pole pro uložení všech slov aktuálního citátu
+- Prostor pro uložení indexu slova, které hráč právě píše
+- Čas, kdy hráč kliknul na start
+
+Také budeme chtít odkazy na prvky uživatelského rozhraní:
+
+- Textové pole (**typed-value**)
+- Zobrazení citátu (**quote**)
+- Zpráva (**message**)
+
+```javascript
+// inside script.js
+// all of our quotes
+const quotes = [
+    'When you have eliminated the impossible, whatever remains, however improbable, must be the truth.',
+    'There is nothing more deceptive than an obvious fact.',
+    'I ought to know by this time that when a fact appears to be opposed to a long train of deductions it invariably proves to be capable of bearing some other interpretation.',
+    'I never make exceptions. An exception disproves the rule.',
+    'What one man can invent another can discover.',
+    'Nothing clears up a case so much as stating it to another person.',
+    'Education never ends, Watson. It is a series of lessons, with the greatest for the last.',
+];
+// store the list of words and the index of the word the player is currently typing
+let words = [];
+let wordIndex = 0;
+// the starting time
+let startTime = Date.now();
+// page elements
+const quoteElement = document.getElementById('quote');
+const messageElement = document.getElementById('message');
+const typedValueElement = document.getElementById('typed-value');
+```
+
+✅ Přidejte do své hry více citátů
+
+> **NOTE:** Prvky můžeme kdykoli v kódu získat pomocí `document.getElementById`. Protože tyto prvky budeme pravidelně odkazovat, vyhneme se překlepům v řetězcových literálech použitím konstant. Frameworky jako [Vue.js](https://vuejs.org/) nebo [React](https://reactjs.org/) vám mohou pomoci lépe centralizovat váš kód.
+
+Věnujte chvíli sledování videa o používání `const`, `let` a `var`
+
+[![Typy proměnných](https://img.youtube.com/vi/JNIXfGiDWM8/0.jpg)](https://youtube.com/watch?v=JNIXfGiDWM8 "Typy proměnných")
+
+> 🎥 Klikněte na obrázek výše pro video o proměnných.
+
+### Přidání logiky spuštění
+
+Pro zahájení hry hráč klikne na start. Samozřejmě nevíme, kdy klikne na start. Zde přichází na řadu [posluchač událostí](https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener). Posluchač událostí nám umožní čekat na to, až se něco stane (událost), a spustit kód v reakci. V našem případě chceme spustit kód, když uživatel klikne na start.
+
+Když uživatel klikne na **start**, musíme vybrat citát, nastavit uživatelské rozhraní a nastavit sledování aktuálního slova a času. Níže je JavaScript, který budete potřebovat přidat; rozebereme ho hned po bloku skriptu.
+
+```javascript
+// at the end of script.js
+document.getElementById('start').addEventListener('click', () => {
+  // get a quote
+  const quoteIndex = Math.floor(Math.random() * quotes.length);
+  const quote = quotes[quoteIndex];
+  // Put the quote into an array of words
+  words = quote.split(' ');
+  // reset the word index for tracking
+  wordIndex = 0;
+
+  // UI updates
+  // Create an array of span elements so we can set a class
+  const spanWords = words.map(function(word) { return `<span>${word} </span>`});
+  // Convert into string and set as innerHTML on quote display
+  quoteElement.innerHTML = spanWords.join('');
+  // Highlight the first word
+  quoteElement.childNodes[0].className = 'highlight';
+  // Clear any prior messages
+  messageElement.innerText = '';
+
+  // Setup the textbox
+  // Clear the textbox
+  typedValueElement.value = '';
+  // set focus
+  typedValueElement.focus();
+  // set the event handler
+
+  // Start the timer
+  startTime = new Date().getTime();
+});
+```
+
+Rozeberme kód!
+
+- Nastavení sledování slov
+  - Použití [Math.floor](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Math/floor) a [Math.random](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Math/random) nám umožní náhodně vybrat citát z pole `quotes`
+  - Citát převedeme na pole `words`, abychom mohli sledovat slovo, které hráč právě píše
+  - `wordIndex` nastavíme na 0, protože hráč začne na prvním slově
+- Nastavení uživatelského rozhraní
+  - Vytvoříme pole `spanWords`, které obsahuje každé slovo uvnitř prvku `span`
+    - To nám umožní zvýraznit slovo na displeji
+  - `join` pole vytvoří řetězec, který můžeme použít k aktualizaci `innerHTML` na `quoteElement`
+    - To zobrazí citát hráči
+  - Nastavíme `className` prvního prvku `span` na `highlight`, aby byl zvýrazněn žlutě
+  - Vyčistíme `messageElement` nastavením `innerText` na `''`
+- Nastavení textového pole
+  - Vymažeme aktuální `value` na `typedValueElement`
+  - Nastavíme `focus` na `typedValueElement`
+- Spustíme časovač voláním `getTime`
+
+### Přidání logiky psaní
+
+Jak hráč píše, vyvolá se událost `input`. Tento posluchač událostí zkontroluje, zda hráč píše slovo správně, a zpracuje aktuální stav hry. Vraťte se do **script.js** a přidejte následující kód na konec. Rozebereme ho hned poté.
+
+```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';
+  }
+});
+```
+
+Rozeberme kód! Začneme tím, že získáme aktuální slovo a hodnotu, kterou hráč dosud napsal. Poté máme logiku typu „vodopád“, kde kontrolujeme, zda je citát dokončen, slovo je dokončeno, slovo je správné, nebo (nakonec), zda je chyba.
+
+- Citát je dokončen, což je indikováno tím, že `typedValue` je rovno `currentWord` a `wordIndex` je rovno jednomu méně než `length` `words`
+  - Vypočítáme `elapsedTime` odečtením `startTime` od aktuálního času
+  - `elapsedTime` vydělíme 1 000, abychom převedli z milisekund na sekundy
+  - Zobrazíme zprávu o úspěchu
+- Slovo je dokončeno, což je indikováno tím, že `typedValue` končí mezerou (konec slova) a `typedValue` je rovno `currentWord`
+  - Nastavíme `value` na `typedElement` na `''`, aby bylo možné napsat další slovo
+  - Zvýšíme `wordIndex`, abychom přešli na další slovo
+  - Projdeme všechny `childNodes` `quoteElement` a nastavíme `className` na `''`, abychom obnovili výchozí zobrazení
+  - Nastavíme `className` aktuálního slova na `highlight`, abychom ho označili jako další slovo k napsání
+- Slovo je aktuálně napsáno správně (ale není dokončeno), což je indikováno tím, že `currentWord` začíná `typedValue`
+  - Zajistíme, že `typedValueElement` je zobrazen jako výchozí, vymazáním `className`
+- Pokud jsme se dostali až sem, máme chybu
+  - Nastavíme `className` na `typedValueElement` na `error`
+
+## Otestujte svou aplikaci
+
+Dostali jste se na konec! Posledním krokem je zajistit, aby naše aplikace fungovala. Vyzkoušejte ji! Nebojte se, pokud jsou tam chyby; **všichni vývojáři** mají chyby. Prozkoumejte zprávy a laděte podle potřeby.
+
+Klikněte na **start** a začněte psát! Mělo by to vypadat trochu jako animace, kterou jsme viděli předtím.
+
+![Animace hry v akci](../../../../4-typing-game/images/demo.gif)
+
+---
+
+## 🚀 Výzva
+
+Přidejte více funkcí
+
+- Deaktivujte posluchač událostí `input` po dokončení a znovu ho aktivujte, když se klikne na tlačítko
+- Deaktivujte textové pole, když hráč dokončí citát
+- Zobrazte modální dialogové okno se zprávou o úspěchu
+- Ukládejte nejvyšší skóre pomocí [localStorage](https://developer.mozilla.org/docs/Web/API/Window/localStorage)
+
+## Kvíz po přednášce
+
+[Kvíz po přednášce](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/22)
+
+## Přehled & Samostudium
+
+Přečtěte si o [všech dostupných událostech](https://developer.mozilla.org/docs/Web/Events) pro vývojáře prostřednictvím webového prohlížeče a zamyslete se nad scénáři, ve kterých byste každou z nich použili.
+
+## Úkol
+
+[Vytvořte novou hru na klávesnici](assignment.md)
+
+---
+
+**Prohlášení**:  
+Tento dokument byl přeložen pomocí služby AI pro překlady [Co-op Translator](https://github.com/Azure/co-op-translator). I když se snažíme o přesnost, mějte prosím na paměti, že automatizované překlady mohou obsahovat chyby nebo nepřesnosti. Původní dokument v jeho původním jazyce by měl být považován za autoritativní zdroj. Pro důležité informace doporučujeme profesionální lidský překlad. Neodpovídáme za žádné nedorozumění nebo nesprávné interpretace vyplývající z použití tohoto překladu.
\ No newline at end of file
diff --git a/translations/cs/4-typing-game/typing-game/assignment.md b/translations/cs/4-typing-game/typing-game/assignment.md
new file mode 100644
index 00000000..7bb9c84d
--- /dev/null
+++ b/translations/cs/4-typing-game/typing-game/assignment.md
@@ -0,0 +1,26 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "de5384c118e15e4d1d0eaa00fc01b112",
+  "translation_date": "2025-08-28T04:28:36+00:00",
+  "source_file": "4-typing-game/typing-game/assignment.md",
+  "language_code": "cs"
+}
+-->
+# Vytvořte novou hru s klávesnicí
+
+## Pokyny
+
+Vytvořte malou hru, která využívá události klávesnice k provádění úkolů. Může to být jiný typ hry na psaní nebo umělecká hra, která maluje pixely na obrazovku při stisknutí kláves. Buďte kreativní!
+
+## Hodnocení
+
+| Kritéria | Vynikající               | Dostatečné              | Vyžaduje zlepšení |
+| -------- | ------------------------ | ----------------------- | ----------------- |
+|          | Je představena kompletní hra | Hra je velmi jednoduchá | Hra obsahuje chyby |
+|          |                          |                         |                   |
+
+---
+
+**Prohlášení**:  
+Tento dokument byl přeložen pomocí služby AI pro překlady [Co-op Translator](https://github.com/Azure/co-op-translator). Ačkoli se snažíme o přesnost, mějte prosím na paměti, že automatizované překlady mohou obsahovat chyby nebo nepřesnosti. Původní dokument v jeho původním jazyce by měl být považován za autoritativní zdroj. Pro důležité informace se doporučuje profesionální lidský překlad. Neodpovídáme za žádná nedorozumění nebo nesprávné interpretace vyplývající z použití tohoto překladu.
\ No newline at end of file
diff --git a/translations/cs/5-browser-extension/1-about-browsers/README.md b/translations/cs/5-browser-extension/1-about-browsers/README.md
new file mode 100644
index 00000000..66100cbe
--- /dev/null
+++ b/translations/cs/5-browser-extension/1-about-browsers/README.md
@@ -0,0 +1,182 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "0bb55e0b98600afab801eea115228873",
+  "translation_date": "2025-08-28T03:40:12+00:00",
+  "source_file": "5-browser-extension/1-about-browsers/README.md",
+  "language_code": "cs"
+}
+-->
+# Projekt rozšíření prohlížeče, část 1: Vše o prohlížečích
+
+![Sketchnote prohlížeče](../../../../translated_images/browser.60317c9be8b7f84adce43e30bff8d47a1ae15793beab762317b2bc6b74337c1a.cs.jpg)
+> Sketchnote od [Wassim Chegham](https://dev.to/wassimchegham/ever-wondered-what-happens-when-you-type-in-a-url-in-an-address-bar-in-a-browser-3dob)
+
+## Kvíz před přednáškou
+
+[Kvíz před přednáškou](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/23)
+
+### Úvod
+
+Rozšíření prohlížeče přidávají do prohlížeče další funkce. Než však začnete jedno vytvářet, měli byste se nejprve dozvědět něco o tom, jak prohlížeče fungují.
+
+### O prohlížeči
+
+V této sérii lekcí se naučíte, jak vytvořit rozšíření prohlížeče, které bude fungovat v prohlížečích Chrome, Firefox a Edge. V této části zjistíte, jak prohlížeče fungují, a vytvoříte základní prvky rozšíření prohlížeče.
+
+Co je vlastně prohlížeč? Je to softwarová aplikace, která umožňuje koncovému uživateli přistupovat k obsahu ze serveru a zobrazovat jej na webových stránkách.
+
+✅ Trocha historie: první prohlížeč se jmenoval 'WorldWideWeb' a byl vytvořen Sirem Timothym Berners-Leem v roce 1990.
+
+![rané prohlížeče](../../../../translated_images/earlybrowsers.d984b711cdf3a42ddac919d46c4b5ca7232f68ccfbd81395e04e5a64c0015277.cs.jpg)
+> Některé rané prohlížeče, via [Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing)
+
+Když se uživatel připojí k internetu pomocí adresy URL (Uniform Resource Locator), obvykle prostřednictvím protokolu Hypertext Transfer Protocol přes adresu `http` nebo `https`, prohlížeč komunikuje s webovým serverem a načte webovou stránku.
+
+V tomto okamžiku zobrazovací engine prohlížeče zobrazí stránku na zařízení uživatele, což může být mobilní telefon, stolní počítač nebo notebook.
+
+Prohlížeče také dokážou ukládat obsah do mezipaměti, aby jej nemusely pokaždé načítat ze serveru. Mohou zaznamenávat historii prohlížení uživatele, ukládat 'cookies', což jsou malé datové soubory obsahující informace o aktivitě uživatele, a mnoho dalšího.
+
+Je velmi důležité si uvědomit, že prohlížeče nejsou všechny stejné! Každý prohlížeč má své silné a slabé stránky, a profesionální webový vývojář musí rozumět tomu, jak zajistit, aby webové stránky fungovaly dobře napříč různými prohlížeči. To zahrnuje přizpůsobení malým obrazovkám, jako je mobilní telefon, stejně jako uživatelům, kteří jsou offline.
+
+Velmi užitečná webová stránka, kterou byste si měli uložit do záložek v preferovaném prohlížeči, je [caniuse.com](https://www.caniuse.com). Při vytváření webových stránek je velmi užitečné používat seznamy podporovaných technologií na caniuse, abyste mohli co nejlépe podpořit své uživatele.
+
+✅ Jak zjistíte, které prohlížeče jsou nejpopulárnější mezi uživateli vašeho webu? Zkontrolujte své analytické nástroje - můžete nainstalovat různé balíčky analytiky jako součást procesu vývoje webu, které vám řeknou, jaké prohlížeče jsou nejvíce používané.
+
+## Rozšíření prohlížeče
+
+Proč byste chtěli vytvořit rozšíření prohlížeče? Je to praktický nástroj, který se připojí k vašemu prohlížeči, když potřebujete rychlý přístup k úkolům, které často opakujete. Například pokud často kontrolujete barvy na různých webových stránkách, můžete si nainstalovat rozšíření prohlížeče s výběrem barev. Pokud máte potíže s pamatováním hesel, můžete použít rozšíření pro správu hesel.
+
+Vývoj rozšíření prohlížeče je také zábavný. Obvykle se zaměřují na omezený počet úkolů, které zvládají velmi dobře.
+
+✅ Jaká jsou vaše oblíbená rozšíření prohlížeče? Jaké úkoly plní?
+
+### Instalace rozšíření
+
+Než začnete vytvářet, podívejte se na proces vytváření a nasazení rozšíření prohlížeče. I když se každý prohlížeč trochu liší v tom, jak tento úkol spravuje, proces je podobný v Chrome a Firefoxu jako v tomto příkladu na Edge:
+
+![snímek obrazovky prohlížeče Edge zobrazující otevřenou stránku edge://extensions a otevřené nastavení](../../../../translated_images/install-on-edge.d68781acaf0b3d3dada8b7507cde7a64bf74b7040d9818baaa9070668e819f90.cs.png)
+
+> Poznámka: Ujistěte se, že jste zapnuli režim pro vývojáře a povolili rozšíření z jiných obchodů.
+
+V podstatě bude proces následující:
+
+- vytvořte své rozšíření pomocí `npm run build` 
+- v prohlížeči přejděte na panel rozšíření pomocí tlačítka "Nastavení a další" (ikona `...`) v pravém horním rohu
+- pokud jde o novou instalaci, vyberte `load unpacked`, abyste nahráli nové rozšíření z jeho složky sestavení (v našem případě je to `/dist`) 
+- nebo klikněte na `reload`, pokud znovu načítáte již nainstalované rozšíření
+
+✅ Tyto pokyny se týkají rozšíření, která si sami vytvoříte; pokud chcete nainstalovat rozšíření, která byla vydána v obchodě s rozšířeními prohlížeče, měli byste přejít na tyto [obchody](https://microsoftedge.microsoft.com/addons/Microsoft-Edge-Extensions-Home) a nainstalovat rozšíření podle svého výběru.
+
+### Začněte
+
+Budete vytvářet rozšíření prohlížeče, které zobrazí uhlíkovou stopu vašeho regionu, včetně spotřeby energie a zdroje energie. Rozšíření bude obsahovat formulář, který shromáždí API klíč, abyste mohli přistupovat k API CO2 Signal.
+
+**Potřebujete:**
+
+- [API klíč](https://www.co2signal.com/); zadejte svůj e-mail do pole na této stránce a klíč vám bude zaslán
+- [kód vašeho regionu](http://api.electricitymap.org/v3/zones) odpovídající [Electricity Map](https://www.electricitymap.org/map) (například v Bostonu používám 'US-NEISO').
+- [výchozí kód](../../../../5-browser-extension/start). Stáhněte si složku `start`; budete doplňovat kód v této složce.
+- [NPM](https://www.npmjs.com) - NPM je nástroj pro správu balíčků; nainstalujte jej lokálně a balíčky uvedené ve vašem souboru `package.json` budou připraveny k použití
+
+✅ Více o správě balíčků se dozvíte v tomto [vynikajícím modulu Learn](https://docs.microsoft.com/learn/modules/create-nodejs-project-dependencies/?WT.mc_id=academic-77807-sagibbon)
+
+Věnujte chvíli prozkoumání kódové základny:
+
+dist
+    -|manifest.json (výchozí nastavení zde)
+    -|index.html (HTML značení front-endu zde)
+    -|background.js (JS na pozadí zde)
+    -|main.js (sestavený JS)
+src
+    -|index.js (váš JS kód sem)
+
+✅ Jakmile budete mít svůj API klíč a kód regionu připravený, uložte je někam do poznámky pro budoucí použití.
+
+### Vytvořte HTML pro rozšíření
+
+Toto rozšíření má dvě zobrazení. Jedno pro shromáždění API klíče a kódu regionu:
+
+![snímek obrazovky dokončeného rozšíření otevřeného v prohlížeči, zobrazující formulář s poli pro název regionu a API klíč.](../../../../translated_images/1.b6da8c1394b07491afeb6b2a8e5aca73ebd3cf478e27bcc9aeabb187e722648e.cs.png)
+
+A druhé pro zobrazení uhlíkové spotřeby regionu:
+
+![snímek obrazovky dokončeného rozšíření zobrazujícího hodnoty uhlíkové spotřeby a procento fosilních paliv pro region US-NEISO.](../../../../translated_images/2.1dae52ff0804224692cd648afbf2342955d7afe3b0101b617268130dfb427f55.cs.png)
+
+Začněme vytvořením HTML pro formulář a jeho stylováním pomocí CSS.
+
+Ve složce `/dist` vytvořte formulář a oblast výsledků. V souboru `index.html` vyplňte vymezenou oblast formuláře:
+
+```HTML
+<form class="form-data" autocomplete="on">
+	<div>
+		<h2>New? Add your Information</h2>
+	</div>
+	<div>
+		<label for="region">Region Name</label>
+		<input type="text" id="region" required class="region-name" />
+	</div>
+	<div>
+		<label for="api">Your API Key from tmrow</label>
+		<input type="text" id="api" required class="api-key" />
+	</div>
+	<button class="search-btn">Submit</button>
+</form>	
+```
+Toto je formulář, kde budou vaše uložené informace zadány a uloženy do místního úložiště.
+
+Dále vytvořte oblast výsledků; pod poslední značku formuláře přidejte několik 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>
+```
+V tomto bodě můžete zkusit sestavení. Ujistěte se, že jste nainstalovali závislosti balíčků tohoto rozšíření:
+
+```
+npm install
+```
+
+Tento příkaz použije npm, správce balíčků Node, k instalaci webpacku pro proces sestavení vašeho rozšíření. Výstup tohoto procesu můžete vidět v `/dist/main.js` - uvidíte, že kód byl zkompilován.
+
+Prozatím by se rozšíření mělo sestavit a pokud jej nasadíte do Edge jako rozšíření, uvidíte čistě zobrazený formulář.
+
+Gratulujeme, udělali jste první kroky k vytvoření rozšíření prohlížeče. V následujících lekcích jej učiníte funkčnějším a užitečnějším.
+
+---
+
+## 🚀 Výzva
+
+Podívejte se na obchod s rozšířeními prohlížeče a nainstalujte si jedno do svého prohlížeče. Můžete zkoumat jeho soubory zajímavými způsoby. Co objevíte?
+
+## Kvíz po přednášce
+
+[Kvíz po přednášce](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/24)
+
+## Přehled & Samostudium
+
+V této lekci jste se dozvěděli něco o historii webového prohlížeče; využijte této příležitosti k tomu, abyste se dozvěděli více o tom, jak si vynálezci World Wide Webu představovali jeho využití, a přečtěte si více o jeho historii. Některé užitečné stránky zahrnují:
+
+[Historie webových prohlížečů](https://www.mozilla.org/firefox/browsers/browser-history/)
+
+[Historie webu](https://webfoundation.org/about/vision/history-of-the-web/)
+
+[Rozhovor s Timem Berners-Leem](https://www.theguardian.com/technology/2019/mar/12/tim-berners-lee-on-30-years-of-the-web-if-we-dream-a-little-we-can-get-the-web-we-want)
+
+## Úkol 
+
+[Upravte styl svého rozšíření](assignment.md)
+
+---
+
+**Prohlášení**:  
+Tento dokument byl přeložen pomocí služby pro automatický překlad [Co-op Translator](https://github.com/Azure/co-op-translator). I když se snažíme o přesnost, mějte prosím na paměti, že automatické překlady mohou obsahovat chyby nebo nepřesnosti. Původní dokument v jeho původním jazyce by měl být považován za autoritativní zdroj. Pro důležité informace se doporučuje profesionální lidský překlad. Neodpovídáme za žádná nedorozumění nebo nesprávné interpretace vyplývající z použití tohoto překladu.
\ No newline at end of file
diff --git a/translations/cs/5-browser-extension/1-about-browsers/assignment.md b/translations/cs/5-browser-extension/1-about-browsers/assignment.md
new file mode 100644
index 00000000..1afb4d5f
--- /dev/null
+++ b/translations/cs/5-browser-extension/1-about-browsers/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "e3c6f2a03c2336e60412612d870af547",
+  "translation_date": "2025-08-28T03:40:59+00:00",
+  "source_file": "5-browser-extension/1-about-browsers/assignment.md",
+  "language_code": "cs"
+}
+-->
+# Přizpůsobte si svůj rozšíření
+
+## Pokyny
+
+Základní kód tohoto rozšíření obsahuje styly, ale nemusíte je používat; upravte si rozšíření podle sebe tím, že upravíte jeho css soubor.
+
+## Hodnocení
+
+| Kritéria | Vynikající                                  | Dostatečné            | Vyžaduje zlepšení  |
+| -------- | ------------------------------------------- | --------------------- | ------------------ |
+|          | Kód je odevzdán s funkčními novými styly    | Styling je neúplný    | Styly obsahují chyby |
+
+---
+
+**Prohlášení**:  
+Tento dokument byl přeložen pomocí služby pro automatický překlad [Co-op Translator](https://github.com/Azure/co-op-translator). Ačkoli se snažíme o přesnost, mějte prosím na paměti, že automatické překlady mohou obsahovat chyby nebo nepřesnosti. Původní dokument v jeho původním jazyce by měl být považován za autoritativní zdroj. Pro důležité informace doporučujeme profesionální lidský překlad. Neodpovídáme za žádné nedorozumění nebo nesprávné interpretace vyplývající z použití tohoto překladu.
\ No newline at end of file
diff --git a/translations/cs/5-browser-extension/2-forms-browsers-local-storage/README.md b/translations/cs/5-browser-extension/2-forms-browsers-local-storage/README.md
new file mode 100644
index 00000000..2bd8c7e7
--- /dev/null
+++ b/translations/cs/5-browser-extension/2-forms-browsers-local-storage/README.md
@@ -0,0 +1,237 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "e10f168beac4e7b05e30e0eb5c92bf11",
+  "translation_date": "2025-08-28T03:51:12+00:00",
+  "source_file": "5-browser-extension/2-forms-browsers-local-storage/README.md",
+  "language_code": "cs"
+}
+-->
+# Projekt rozšíření prohlížeče, část 2: Volání API, použití místního úložiště
+
+## Kvíz před lekcí
+
+[Kvíz před lekcí](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/25)
+
+### Úvod
+
+V této lekci budete volat API odesláním formuláře vašeho rozšíření prohlížeče a zobrazovat výsledky v rozšíření. Navíc se naučíte, jak ukládat data do místního úložiště prohlížeče pro budoucí použití.
+
+✅ Postupujte podle očíslovaných segmentů v příslušných souborech, abyste věděli, kam umístit svůj kód.
+
+### Nastavení prvků pro manipulaci v rozšíření:
+
+Do této chvíle jste vytvořili HTML pro formulář a `<div>` pro výsledky vašeho rozšíření prohlížeče. Od této chvíle budete pracovat v souboru `/src/index.js` a postupně rozšiřovat své rozšíření. Odkazujte na [předchozí lekci](../1-about-browsers/README.md) ohledně nastavení projektu a procesu sestavení.
+
+Pracujte ve svém souboru `index.js` a začněte vytvořením několika `const` proměnných, které budou držet hodnoty spojené s různými poli:
+
+```JavaScript
+// form fields
+const form = document.querySelector('.form-data');
+const region = document.querySelector('.region-name');
+const apiKey = document.querySelector('.api-key');
+
+// results
+const errors = document.querySelector('.errors');
+const loading = document.querySelector('.loading');
+const results = document.querySelector('.result-container');
+const usage = document.querySelector('.carbon-usage');
+const fossilfuel = document.querySelector('.fossil-fuel');
+const myregion = document.querySelector('.my-region');
+const clearBtn = document.querySelector('.clear-btn');
+```
+
+Všechna tato pole jsou odkazována podle jejich CSS třídy, jak jste je nastavili v HTML v předchozí lekci.
+
+### Přidání posluchačů událostí
+
+Dále přidejte posluchače událostí pro formulář a tlačítko pro vymazání, které resetuje formulář, aby se při odeslání formuláře nebo kliknutí na tlačítko reset něco stalo. Na konec souboru přidejte volání inicializace aplikace:
+
+```JavaScript
+form.addEventListener('submit', (e) => handleSubmit(e));
+clearBtn.addEventListener('click', (e) => reset(e));
+init();
+```
+
+✅ Všimněte si zkráceného zápisu pro poslouchání událostí odeslání nebo kliknutí a jak je událost předána funkcím handleSubmit nebo reset. Dokážete napsat ekvivalent tohoto zkráceného zápisu v delším formátu? Který preferujete?
+
+### Vytvoření funkcí init() a reset():
+
+Nyní vytvoříte funkci, která inicializuje rozšíření, nazvanou init():
+
+```JavaScript
+function init() {
+	//if anything is in localStorage, pick it up
+	const storedApiKey = localStorage.getItem('apiKey');
+	const storedRegion = localStorage.getItem('regionName');
+
+	//set icon to be generic green
+	//todo
+
+	if (storedApiKey === null || storedRegion === null) {
+		//if we don't have the keys, show the form
+		form.style.display = 'block';
+		results.style.display = 'none';
+		loading.style.display = 'none';
+		clearBtn.style.display = 'none';
+		errors.textContent = '';
+	} else {
+        //if we have saved keys/regions in localStorage, show results when they load
+        displayCarbonUsage(storedApiKey, storedRegion);
+		results.style.display = 'none';
+		form.style.display = 'none';
+		clearBtn.style.display = 'block';
+	}
+};
+
+function reset(e) {
+	e.preventDefault();
+	//clear local storage for region only
+	localStorage.removeItem('regionName');
+	init();
+}
+
+```
+V této funkci je zajímavá logika. Při jejím čtení, vidíte, co se děje?
+
+- jsou nastaveny dvě `const`, které kontrolují, zda uživatel uložil APIKey a regionální kód do místního úložiště.
+- pokud je některá z těchto hodnot null, zobrazí se formulář změnou jeho stylu na 'block'.
+- skryjí se výsledky, načítání a clearBtn a nastaví se jakýkoli chybový text na prázdný řetězec.
+- pokud existuje klíč a region, spustí se rutina:
+  - volání API pro získání dat o uhlíkové spotřebě
+  - skrytí oblasti výsledků
+  - skrytí formuláře
+  - zobrazení tlačítka reset
+
+Než budete pokračovat, je užitečné se naučit o velmi důležitém konceptu dostupném v prohlížečích: [LocalStorage](https://developer.mozilla.org/docs/Web/API/Window/localStorage). LocalStorage je užitečný způsob ukládání řetězců v prohlížeči jako `key-value` pár. Tento typ webového úložiště lze manipulovat pomocí JavaScriptu pro správu dat v prohlížeči. LocalStorage nevyprší, zatímco SessionStorage, jiný typ webového úložiště, se vymaže při zavření prohlížeče. Různé typy úložišť mají své výhody a nevýhody.
+
+> Poznámka - vaše rozšíření prohlížeče má své vlastní místní úložiště; hlavní okno prohlížeče je jiná instance a chová se odděleně.
+
+Nastavíte hodnotu APIKey jako řetězec, například, a můžete vidět, že je nastavena v Edge tím, že "inspektujete" webovou stránku (můžete kliknout pravým tlačítkem na prohlížeč a inspektovat) a přejdete na kartu Aplikace, kde uvidíte úložiště.
+
+![Panel místního úložiště](../../../../translated_images/localstorage.472f8147b6a3f8d141d9551c95a2da610ac9a3c6a73d4a1c224081c98bae09d9.cs.png)
+
+✅ Zamyslete se nad situacemi, kdy byste NECHTĚLI ukládat některá data do LocalStorage. Obecně je umístění API klíčů do LocalStorage špatný nápad! Vidíte proč? V našem případě, protože naše aplikace je čistě pro učení a nebude nasazena do obchodu s aplikacemi, použijeme tuto metodu.
+
+Všimněte si, že používáte Web API pro manipulaci s LocalStorage, buď pomocí `getItem()`, `setItem()`, nebo `removeItem()`. Je široce podporováno napříč prohlížeči.
+
+Než vytvoříte funkci `displayCarbonUsage()`, která je volána v `init()`, vytvořte funkci pro zpracování počátečního odeslání formuláře.
+
+### Zpracování odeslání formuláře
+
+Vytvořte funkci nazvanou `handleSubmit`, která přijímá argument události `(e)`. Zastavte šíření události (v tomto případě chceme zastavit obnovení prohlížeče) a zavolejte novou funkci `setUpUser`, předávající argumenty `apiKey.value` a `region.value`. Tímto způsobem použijete dvě hodnoty, které jsou přivedeny prostřednictvím počátečního formuláře, když jsou příslušná pole vyplněna.
+
+```JavaScript
+function handleSubmit(e) {
+	e.preventDefault();
+	setUpUser(apiKey.value, region.value);
+}
+```
+✅ Osvěžte si paměť - HTML, které jste nastavili v poslední lekci, má dvě vstupní pole, jejichž `hodnoty` jsou zachyceny prostřednictvím `const`, které jste nastavili na začátku souboru, a obě jsou `povinné`, takže prohlížeč zastaví uživatele od zadání null hodnot.
+
+### Nastavení uživatele
+
+Pokračujeme funkcí `setUpUser`, zde nastavíte hodnoty místního úložiště pro apiKey a regionName. Přidejte novou funkci:
+
+```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);
+}
+```
+Tato funkce nastaví zprávu o načítání, která se zobrazí během volání API. V tomto bodě jste dospěli k vytvoření nejdůležitější funkce tohoto rozšíření prohlížeče!
+
+### Zobrazení uhlíkové spotřeby
+
+Konečně je čas dotázat se API!
+
+Než budeme pokračovat, měli bychom diskutovat o API. API, nebo [Application Programming Interfaces](https://www.webopedia.com/TERM/A/API.html), jsou klíčovým prvkem nástrojů webového vývojáře. Poskytují standardní způsoby, jak programy interagují a komunikují mezi sebou. Například pokud vytváříte webovou stránku, která potřebuje dotazovat databázi, někdo mohl vytvořit API, které můžete použít. Zatímco existuje mnoho typů API, jedním z nejpopulárnějších je [REST API](https://www.smashingmagazine.com/2018/01/understanding-using-rest-api/).
+
+✅ Termín 'REST' znamená 'Representational State Transfer' a zahrnuje použití různě konfigurovaných URL pro získání dat. Udělejte si malý průzkum o různých typech API dostupných vývojářům. Který formát vás oslovuje?
+
+Existují důležité věci, které je třeba poznamenat o této funkci. Nejprve si všimněte klíčového slova [`async`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/async_function). Psát své funkce tak, aby běžely asynchronně, znamená, že čekají na dokončení akce, jako je vrácení dat, než budou pokračovat.
+
+Zde je rychlé video o `async`:
+
+[![Async a Await pro správu slibů](https://img.youtube.com/vi/YwmlRkrxvkk/0.jpg)](https://youtube.com/watch?v=YwmlRkrxvkk "Async a Await pro správu slibů")
+
+> 🎥 Klikněte na obrázek výše pro video o async/await.
+
+Vytvořte novou funkci pro dotazování API C02Signal:
+
+```JavaScript
+import axios from '../node_modules/axios';
+
+async function displayCarbonUsage(apiKey, region) {
+	try {
+		await axios
+			.get('https://api.co2signal.com/v1/latest', {
+				params: {
+					countryCode: region,
+				},
+				headers: {
+					'auth-token': apiKey,
+				},
+			})
+			.then((response) => {
+				let CO2 = Math.floor(response.data.data.carbonIntensity);
+
+				//calculateColor(CO2);
+
+				loading.style.display = 'none';
+				form.style.display = 'none';
+				myregion.textContent = region;
+				usage.textContent =
+					Math.round(response.data.data.carbonIntensity) + ' grams (grams C02 emitted per kilowatt hour)';
+				fossilfuel.textContent =
+					response.data.data.fossilFuelPercentage.toFixed(2) +
+					'% (percentage of fossil fuels used to generate electricity)';
+				results.style.display = 'block';
+			});
+	} catch (error) {
+		console.log(error);
+		loading.style.display = 'none';
+		results.style.display = 'none';
+		errors.textContent = 'Sorry, we have no data for the region you have requested.';
+	}
+}
+```
+
+Toto je velká funkce. Co se zde děje?
+
+- podle osvědčených postupů používáte klíčové slovo `async`, aby se tato funkce chovala asynchronně. Funkce obsahuje blok `try/catch`, protože vrátí slib, když API vrátí data. Protože nemáte kontrolu nad rychlostí, jakou API odpoví (může vůbec neodpovědět!), musíte tuto nejistotu řešit voláním asynchronně. 
+- dotazujete API co2signal, abyste získali data o vašem regionu, pomocí vašeho API klíče. K použití tohoto klíče musíte použít typ autentizace v parametrech hlavičky.
+- jakmile API odpoví, přiřadíte různé prvky jeho odpovědi k částem obrazovky, které jste nastavili pro zobrazení těchto dat.
+- pokud dojde k chybě nebo pokud neexistuje žádný výsledek, zobrazíte chybovou zprávu.
+
+✅ Použití asynchronních programovacích vzorů je další velmi užitečný nástroj ve vašem arzenálu. Přečtěte si [o různých způsobech](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/async_function), jak můžete tento typ kódu konfigurovat.
+
+Gratulujeme! Pokud sestavíte své rozšíření (`npm run build`) a obnovíte jej v panelu rozšíření, máte funkční rozšíření! Jediná věc, která nefunguje, je ikona, a to opravíte v další lekci.
+
+---
+
+## 🚀 Výzva
+
+Diskutovali jsme o několika typech API v těchto lekcích. Vyberte webové API a podrobně prozkoumejte, co nabízí. Například se podívejte na API dostupná v prohlížečích, jako je [HTML Drag and Drop API](https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_API). Co podle vás dělá skvělé API?
+
+## Kvíz po lekci
+
+[Kvíz po lekci](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/26)
+
+## Přehled a samostudium
+
+V této lekci jste se naučili o LocalStorage a API, obojí velmi užitečné pro profesionálního webového vývojáře. Dokážete si představit, jak tyto dvě věci spolupracují? Přemýšlejte o tom, jak byste navrhli webovou stránku, která by ukládala položky pro použití API.
+
+## Úkol
+
+[Adoptujte API](assignment.md)
+
+---
+
+**Prohlášení**:  
+Tento dokument byl přeložen pomocí služby pro automatický překlad [Co-op Translator](https://github.com/Azure/co-op-translator). I když se snažíme o co největší přesnost, mějte prosím na paměti, že automatické překlady mohou obsahovat chyby nebo nepřesnosti. Původní dokument v jeho původním jazyce by měl být považován za závazný zdroj. Pro důležité informace doporučujeme profesionální lidský překlad. Neodpovídáme za žádná nedorozumění nebo nesprávné výklady vyplývající z použití tohoto překladu.
\ No newline at end of file
diff --git a/translations/cs/5-browser-extension/2-forms-browsers-local-storage/assignment.md b/translations/cs/5-browser-extension/2-forms-browsers-local-storage/assignment.md
new file mode 100644
index 00000000..4b7d31a9
--- /dev/null
+++ b/translations/cs/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-28T03:51:55+00:00",
+  "source_file": "5-browser-extension/2-forms-browsers-local-storage/assignment.md",
+  "language_code": "cs"
+}
+-->
+# Přijměte API
+
+## Instrukce
+
+Práce s API může být opravdu zábavná. Zde je [seznam mnoha bezplatných API](https://github.com/public-apis/public-apis). Vyberte si jedno API a vytvořte rozšíření pro prohlížeč, které řeší nějaký problém. Může to být tak malý problém, jako je nedostatek obrázků mazlíčků (vyzkoušejte například [dog CEO API](https://dog.ceo/dog-api/)) nebo něco většího – bavte se!
+
+## Hodnocení
+
+| Kritéria | Vynikající                                                               | Dostatečné                              | Potřebuje zlepšení      |
+| -------- | ----------------------------------------------------------------------- | --------------------------------------- | ----------------------- |
+|          | Bylo odevzdáno kompletní rozšíření prohlížeče využívající API ze seznamu | Bylo odevzdáno částečné rozšíření       | Odevzdané řešení obsahuje chyby |
+
+---
+
+**Prohlášení**:  
+Tento dokument byl přeložen pomocí služby pro automatický překlad [Co-op Translator](https://github.com/Azure/co-op-translator). I když se snažíme o přesnost, mějte prosím na paměti, že automatické překlady mohou obsahovat chyby nebo nepřesnosti. Původní dokument v jeho původním jazyce by měl být považován za autoritativní zdroj. Pro důležité informace doporučujeme profesionální lidský překlad. Neodpovídáme za žádná nedorozumění nebo nesprávné interpretace vyplývající z použití tohoto překladu.
\ No newline at end of file
diff --git a/translations/cs/5-browser-extension/3-background-tasks-and-performance/README.md b/translations/cs/5-browser-extension/3-background-tasks-and-performance/README.md
new file mode 100644
index 00000000..e9a08f61
--- /dev/null
+++ b/translations/cs/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-28T03:44:01+00:00",
+  "source_file": "5-browser-extension/3-background-tasks-and-performance/README.md",
+  "language_code": "cs"
+}
+-->
+# Projekt rozšíření prohlížeče, část 3: Naučte se o úlohách na pozadí a výkonu
+
+## Kvíz před lekcí
+
+[Kvíz před lekcí](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/27)
+
+### Úvod
+
+V posledních dvou lekcích tohoto modulu jste se naučili, jak vytvořit formulář a zobrazovací oblast pro data získaná z API. To je velmi standardní způsob, jak vytvořit webovou prezentaci. Dokonce jste se naučili, jak asynchronně získávat data. Vaše rozšíření prohlížeče je téměř hotové.
+
+Zbývá spravovat některé úlohy na pozadí, včetně aktualizace barvy ikony rozšíření, takže je to skvělý čas probrat, jak prohlížeč tyto úlohy spravuje. Pojďme se na tyto úlohy podívat v kontextu výkonu vašich webových prostředků při jejich vytváření.
+
+## Základy webového výkonu
+
+> "Výkon webových stránek je o dvou věcech: jak rychle se stránka načítá a jak rychle na ní běží kód." -- [Zack Grossbart](https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/)
+
+Téma, jak udělat vaše webové stránky extrémně rychlé na všech typech zařízení, pro všechny typy uživatelů a ve všech situacích, je pochopitelně rozsáhlé. Zde je několik bodů, které je třeba mít na paměti při vytváření standardního webového projektu nebo rozšíření prohlížeče.
+
+První věc, kterou musíte udělat, abyste zajistili efektivní běh vašeho webu, je shromáždit data o jeho výkonu. Prvním místem, kde to můžete udělat, jsou vývojářské nástroje vašeho webového prohlížeče. V Edge můžete vybrat tlačítko „Nastavení a další“ (ikona tří teček v pravém horním rohu prohlížeče), poté přejít na Další nástroje > Nástroje pro vývojáře a otevřít kartu Výkon. Klávesové zkratky `Ctrl` + `Shift` + `I` na Windows nebo `Option` + `Command` + `I` na Macu také otevřou vývojářské nástroje.
+
+Karta Výkon obsahuje nástroj Profilování. Otevřete webovou stránku (zkuste například [https://www.microsoft.com](https://www.microsoft.com/?WT.mc_id=academic-77807-sagibbon)) a klikněte na tlačítko „Záznam“, poté stránku obnovte. Záznam můžete kdykoli zastavit a uvidíte rutiny, které byly vytvořeny pro „skriptování“, „vykreslování“ a „malování“ stránky:
+
+![Edge profiler](../../../../translated_images/profiler.5a4a62479c5df01cfec9aab74173dba13f91d2c968e1a1ae434c26165792df15.cs.png)
+
+✅ Navštivte [dokumentaci Microsoftu](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) o panelu Výkon v Edge.
+
+> Tip: Chcete-li získat přesné údaje o době spuštění vašeho webu, vymažte mezipaměť prohlížeče.
+
+Vyberte prvky časové osy profilu, abyste přiblížili události, které se odehrávají během načítání stránky.
+
+Získejte snímek výkonu vaší stránky výběrem části časové osy profilu a pohledem na panel souhrnu:
+
+![Edge profiler snapshot](../../../../translated_images/snapshot.97750180ebcad73794a3594b36925eb5c8dbaac9e03fec7f9b974188c9ac63c7.cs.png)
+
+Zkontrolujte panel protokolu událostí a zjistěte, zda některá událost trvala déle než 15 ms:
+
+![Edge event log](../../../../translated_images/log.804026979f3707e00eebcfa028b2b5a88cec6292f858767bb6703afba65a7d9c.cs.png)
+
+✅ Seznamte se s vaším profilerem! Otevřete vývojářské nástroje na této stránce a zjistěte, zda existují nějaká úzká místa. Který prostředek se načítá nejpomaleji? Nejrychleji?
+
+## Kontroly profilování
+
+Obecně existují některé „problémové oblasti“, na které by si měl každý webový vývojář dávat pozor při vytváření webu, aby se vyhnul nepříjemným překvapením při nasazení do produkce.
+
+**Velikosti prostředků**: Web se v posledních letech stal „těžším“ a tím pádem pomalejším. Část této zátěže souvisí s používáním obrázků.
+
+✅ Prohlédněte si [Internetový archiv](https://httparchive.org/reports/page-weight) pro historický pohled na váhu stránek a další informace.
+
+Dobrou praxí je zajistit, aby vaše obrázky byly optimalizované a dodávané ve správné velikosti a rozlišení pro vaše uživatele.
+
+**Procházení DOM**: Prohlížeč musí vytvořit svůj model objektů dokumentu (DOM) na základě kódu, který napíšete, takže je v zájmu dobrého výkonu stránky udržovat značky minimální a používat a stylovat pouze to, co stránka potřebuje. V tomto ohledu by bylo možné optimalizovat přebytečné CSS spojené se stránkou; styly, které je třeba použít pouze na jedné stránce, nemusí být zahrnuty v hlavním stylovém souboru.
+
+**JavaScript**: Každý vývojář JavaScriptu by měl dávat pozor na „skripty blokující vykreslování“, které musí být načteny před tím, než může být zbytek DOM procházen a vykreslen do prohlížeče. Zvažte použití `defer` u vašich inline skriptů (jak je to provedeno v modulu Terrarium).
+
+✅ Vyzkoušejte některé stránky na [webu pro testování rychlosti stránek](https://www.webpagetest.org/), abyste se dozvěděli více o běžných kontrolách, které se provádějí pro určení výkonu stránek.
+
+Nyní, když máte představu o tom, jak prohlížeč vykresluje prostředky, které mu posíláte, podívejme se na posledních pár věcí, které musíte udělat, abyste dokončili své rozšíření:
+
+### Vytvořte funkci pro výpočet barvy
+
+V souboru `/src/index.js` přidejte funkci nazvanou `calculateColor()` za sérii proměnných `const`, které jste nastavili pro přístup k DOM:
+
+```JavaScript
+function calculateColor(value) {
+	let co2Scale = [0, 150, 600, 750, 800];
+	let colors = ['#2AA364', '#F5EB4D', '#9E4229', '#381D02', '#381D02'];
+
+	let closestNum = co2Scale.sort((a, b) => {
+		return Math.abs(a - value) - Math.abs(b - value);
+	})[0];
+	console.log(value + ' is closest to ' + closestNum);
+	let num = (element) => element > closestNum;
+	let scaleIndex = co2Scale.findIndex(num);
+
+	let closestColor = colors[scaleIndex];
+	console.log(scaleIndex, closestColor);
+
+	chrome.runtime.sendMessage({ action: 'updateIcon', value: { color: closestColor } });
+}
+```
+
+Co se zde děje? Předáte hodnotu (intenzitu uhlíku) z volání API, které jste dokončili v předchozí lekci, a poté vypočítáte, jak blízko je její hodnota indexu uvedenému v poli barev. Poté tuto nejbližší hodnotu barvy odešlete do runtime prostředí Chrome.
+
+Runtime prostředí Chrome má [API](https://developer.chrome.com/extensions/runtime), které zpracovává všechny druhy úloh na pozadí, a vaše rozšíření toho využívá:
+
+> „Použijte API chrome.runtime pro získání stránky na pozadí, vrácení podrobností o manifestu a naslouchání a reagování na události v životním cyklu aplikace nebo rozšíření. Toto API můžete také použít k převodu relativní cesty URL na plně kvalifikované URL.“
+
+✅ Pokud toto rozšíření prohlížeče vyvíjíte pro Edge, může vás překvapit, že používáte API Chrome. Novější verze prohlížeče Edge běží na jádře prohlížeče Chromium, takže můžete využívat tyto nástroje.
+
+> Poznámka: Pokud chcete profilovat rozšíření prohlížeče, spusťte vývojářské nástroje přímo v rámci rozšíření, protože se jedná o samostatnou instanci prohlížeče.
+
+### Nastavte výchozí barvu ikony
+
+Nyní v rámci funkce `init()` nastavte ikonu na obecnou zelenou barvu tím, že znovu zavoláte akci `updateIcon` prostředí Chrome:
+
+```JavaScript
+chrome.runtime.sendMessage({
+	action: 'updateIcon',
+		value: {
+			color: 'green',
+		},
+});
+```
+
+### Zavolejte funkci, proveďte volání
+
+Dále zavolejte funkci, kterou jste právě vytvořili, přidáním do promise vráceného API C02Signal:
+
+```JavaScript
+//let CO2...
+calculateColor(CO2);
+```
+
+A nakonec v souboru `/dist/background.js` přidejte posluchač pro tyto volání úloh na pozadí:
+
+```JavaScript
+chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) {
+	if (msg.action === 'updateIcon') {
+		chrome.browserAction.setIcon({ imageData: drawIcon(msg.value) });
+	}
+});
+//borrowed from energy lollipop extension, nice feature!
+function drawIcon(value) {
+	let canvas = document.createElement('canvas');
+	let context = canvas.getContext('2d');
+
+	context.beginPath();
+	context.fillStyle = value.color;
+	context.arc(100, 100, 50, 0, 2 * Math.PI);
+	context.fill();
+
+	return context.getImageData(50, 50, 100, 100);
+}
+```
+
+V tomto kódu přidáváte posluchač pro jakékoli zprávy přicházející do správce úloh na pozadí. Pokud je volání označeno jako 'updateIcon', spustí se následující kód pro vykreslení ikony správné barvy pomocí Canvas API.
+
+✅ O Canvas API se dozvíte více v [lekcích o vesmírné hře](../../6-space-game/2-drawing-to-canvas/README.md).
+
+Nyní znovu sestavte své rozšíření (`npm run build`), obnovte a spusťte své rozšíření a sledujte, jak se mění barva. Je čas na pochůzky nebo umytí nádobí? Teď už víte!
+
+Gratulujeme, vytvořili jste užitečné rozšíření prohlížeče a dozvěděli jste se více o tom, jak prohlížeč funguje a jak profilovat jeho výkon.
+
+---
+
+## 🚀 Výzva
+
+Prozkoumejte některé open source webové stránky, které existují již dlouhou dobu, a na základě jejich historie na GitHubu zjistěte, zda byly v průběhu let optimalizovány pro výkon, a pokud ano, jak. Jaký je nejčastější problém?
+
+## Kvíz po lekci
+
+[Kvíz po lekci](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/28)
+
+## Přehled a samostudium
+
+Zvažte přihlášení k odběru [newsletteru o výkonu](https://perf.email/).
+
+Prozkoumejte některé způsoby, jak prohlížeče měří výkon webu, prohlédnutím panelů výkonu ve svých webových nástrojích. Najdete nějaké zásadní rozdíly?
+
+## Zadání
+
+[Analyzujte web pro výkon](assignment.md)
+
+---
+
+**Prohlášení**:  
+Tento dokument byl přeložen pomocí služby pro automatický překlad [Co-op Translator](https://github.com/Azure/co-op-translator). I když se snažíme o přesnost, mějte na paměti, že automatické překlady mohou obsahovat chyby nebo nepřesnosti. Původní dokument v jeho původním jazyce by měl být považován za autoritativní zdroj. Pro důležité informace se doporučuje profesionální lidský překlad. Neodpovídáme za žádné nedorozumění nebo nesprávné interpretace vyplývající z použití tohoto překladu.
\ No newline at end of file
diff --git a/translations/cs/5-browser-extension/3-background-tasks-and-performance/assignment.md b/translations/cs/5-browser-extension/3-background-tasks-and-performance/assignment.md
new file mode 100644
index 00000000..cf17b555
--- /dev/null
+++ b/translations/cs/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-28T03:44:51+00:00",
+  "source_file": "5-browser-extension/3-background-tasks-and-performance/assignment.md",
+  "language_code": "cs"
+}
+-->
+# Analyzujte web pro výkon
+
+Poskytněte podrobnou zprávu o webové stránce, která ukazuje oblasti, kde je výkon problematický. Analyzujte, proč je stránka pomalá a co byste mohli udělat pro její zrychlení. Nespoléhejte se pouze na nástroje prohlížeče, ale proveďte průzkum dalších nástrojů, které mohou pomoci vaší zprávě.
+
+## Kritéria hodnocení
+
+| Kritéria | Vynikající                                                                                                 | Přiměřené                  | Vyžaduje zlepšení             |
+| -------- | ---------------------------------------------------------------------------------------------------------- | -------------------------- | ----------------------------- |
+|          | Zpráva je prezentována s detaily získanými nejen z nástrojů prohlížeče, ale i z nástrojů třetích stran, pokud jsou dostupné | Základní zpráva je prezentována | Minimální zpráva je prezentována |
+
+---
+
+**Prohlášení**:  
+Tento dokument byl přeložen pomocí služby pro automatický překlad [Co-op Translator](https://github.com/Azure/co-op-translator). I když se snažíme o přesnost, mějte prosím na paměti, že automatické překlady mohou obsahovat chyby nebo nepřesnosti. Původní dokument v jeho původním jazyce by měl být považován za autoritativní zdroj. Pro důležité informace doporučujeme profesionální lidský překlad. Neodpovídáme za žádné nedorozumění nebo nesprávné interpretace vyplývající z použití tohoto překladu.
\ No newline at end of file
diff --git a/translations/cs/5-browser-extension/README.md b/translations/cs/5-browser-extension/README.md
new file mode 100644
index 00000000..32ce9e8b
--- /dev/null
+++ b/translations/cs/5-browser-extension/README.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "b121a279a6ab39878491f3e572673515",
+  "translation_date": "2025-08-28T03:38:54+00:00",
+  "source_file": "5-browser-extension/README.md",
+  "language_code": "cs"
+}
+-->
+# Vytváření rozšíření pro prohlížeč
+
+Vytváření rozšíření pro prohlížeče je zábavný a zajímavý způsob, jak přemýšlet o výkonu vašich aplikací při vytváření jiného typu webového prostředku. Tento modul obsahuje lekce o tom, jak fungují prohlížeče, jak nasadit rozšíření pro prohlížeč, jak vytvořit formulář, volat API, používat místní úložiště a jak hodnotit výkon vašeho webu a zlepšovat ho.
+
+Vytvoříte rozšíření pro prohlížeč, které funguje na Edge, Chrome a Firefoxu. Toto rozšíření, které je jako mini webová stránka přizpůsobená velmi specifickému úkolu, kontroluje [C02 Signal API](https://www.co2signal.com) pro spotřebu elektřiny a uhlíkovou intenzitu v daném regionu a vrací údaj o uhlíkové stopě regionu.
+
+Toto rozšíření může být uživatelem ad hoc vyvoláno poté, co je do formuláře zadán klíč API a kód regionu, aby bylo možné určit místní spotřebu elektřiny a tím poskytnout data, která mohou ovlivnit rozhodnutí uživatele ohledně spotřeby elektřiny. Například může být vhodnější odložit spuštění sušičky prádla (činnost s vysokou uhlíkovou náročností) během období vysoké spotřeby elektřiny ve vašem regionu.
+
+### Témata
+
+1. [O prohlížeči](1-about-browsers/README.md)
+2. [Formuláře a místní úložiště](2-forms-browsers-local-storage/README.md)
+3. [Úlohy na pozadí a výkon](3-background-tasks-and-performance/README.md)
+
+### Poděkování
+
+![zelené rozšíření prohlížeče](../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.cs.png)
+
+## Poděkování
+
+Nápad na tento webový uhlíkový spouštěč nabídl Asim Hussain, vedoucí týmu Green Cloud Advocacy ve společnosti Microsoft a autor [Green Principles](https://principles.green/). Původně šlo o [projekt webové stránky](https://github.com/jlooper/green).
+
+Struktura rozšíření pro prohlížeč byla ovlivněna [rozšířením COVID od Adeboly Adenirana](https://github.com/onedebos/covtension).
+
+Koncept ikonového systému „teček“ byl inspirován strukturou ikon rozšíření prohlížeče [Energy Lollipop](https://energylollipop.com/) pro emise v Kalifornii.
+
+Tyto lekce byly napsány s ♥️ [Jen Looper](https://www.twitter.com/jenlooper).
+
+---
+
+**Prohlášení**:  
+Tento dokument byl přeložen pomocí služby pro automatický překlad [Co-op Translator](https://github.com/Azure/co-op-translator). I když se snažíme o přesnost, mějte prosím na paměti, že automatické překlady mohou obsahovat chyby nebo nepřesnosti. Původní dokument v jeho původním jazyce by měl být považován za závazný zdroj. Pro důležité informace doporučujeme profesionální lidský překlad. Neodpovídáme za žádná nedorozumění nebo nesprávné výklady vyplývající z použití tohoto překladu.
\ No newline at end of file
diff --git a/translations/cs/5-browser-extension/solution/README.md b/translations/cs/5-browser-extension/solution/README.md
new file mode 100644
index 00000000..a454eb97
--- /dev/null
+++ b/translations/cs/5-browser-extension/solution/README.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "fab4e6b4f0efcd587a9029d82991f597",
+  "translation_date": "2025-08-28T03:45:50+00:00",
+  "source_file": "5-browser-extension/solution/README.md",
+  "language_code": "cs"
+}
+-->
+# Rozšíření prohlížeče Carbon Trigger: Hotový kód
+
+Pomocí API C02 Signal od tmrow sledujte spotřebu elektřiny a vytvořte rozšíření prohlížeče, které vám přímo v prohlížeči připomene, jak náročná je spotřeba elektřiny ve vašem regionu. Používání tohoto rozšíření ad hoc vám pomůže činit rozhodnutí o vašich aktivitách na základě těchto informací.
+
+![snímek obrazovky rozšíření](../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.cs.png)
+
+## Začínáme
+
+Budete potřebovat mít nainstalovaný [npm](https://npmjs.com). Stáhněte si kopii tohoto kódu do složky na vašem počítači.
+
+Nainstalujte všechny potřebné balíčky:
+
+```
+npm install
+```
+
+Sestavte rozšíření pomocí webpacku:
+
+```
+npm run build
+```
+
+Pro instalaci na Edge použijte nabídku „tři tečky“ v pravém horním rohu prohlížeče a najděte panel Rozšíření. Odtud vyberte „Načíst nebalené“ pro načtení nového rozšíření. Na výzvu otevřete složku „dist“ a rozšíření se načte. Pro jeho použití budete potřebovat API klíč pro API CO2 Signal ([získejte ho zde e-mailem](https://www.co2signal.com/) – zadejte svůj e-mail do pole na této stránce) a [kód pro váš region](http://api.electricitymap.org/v3/zones) odpovídající [Electricity Map](https://www.electricitymap.org/map) (například v Bostonu používám „US-NEISO“).
+
+![instalace](../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.cs.png)
+
+Jakmile zadáte API klíč a region do rozhraní rozšíření, barevná tečka v liště rozšíření prohlížeče by se měla změnit tak, aby odrážela spotřebu energie ve vašem regionu, a poskytla vám doporučení, jaké energeticky náročné aktivity by pro vás byly vhodné. Koncept tohoto systému „teček“ mi byl inspirován rozšířením [Energy Lollipop](https://energylollipop.com/) pro emise v Kalifornii.
+
+---
+
+**Prohlášení**:  
+Tento dokument byl přeložen pomocí služby pro automatický překlad [Co-op Translator](https://github.com/Azure/co-op-translator). I když se snažíme o přesnost, mějte prosím na paměti, že automatické překlady mohou obsahovat chyby nebo nepřesnosti. Původní dokument v jeho původním jazyce by měl být považován za autoritativní zdroj. Pro důležité informace se doporučuje profesionální lidský překlad. Neodpovídáme za žádná nedorozumění nebo nesprávné interpretace vyplývající z použití tohoto překladu.
\ No newline at end of file
diff --git a/translations/cs/5-browser-extension/solution/translation/README.es.md b/translations/cs/5-browser-extension/solution/translation/README.es.md
new file mode 100644
index 00000000..11d9dc5b
--- /dev/null
+++ b/translations/cs/5-browser-extension/solution/translation/README.es.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "cbaf73f94a9ab4c680a10ef871e92948",
+  "translation_date": "2025-08-28T03:47:50+00:00",
+  "source_file": "5-browser-extension/solution/translation/README.es.md",
+  "language_code": "cs"
+}
+-->
+# Rozšíření prohlížeče Carbon Trigger: Kompletní kód
+
+Pomocí API CO2 Signal od tmrow pro sledování spotřeby elektřiny vytvořte rozšíření prohlížeče, které vám umožní mít přímo v prohlížeči připomínku o spotřebě elektřiny ve vašem regionu. Používání tohoto ad hoc rozšíření vám pomůže činit rozhodnutí o vašich aktivitách na základě těchto informací.
+
+![snímek obrazovky rozšíření](../../../../../translated_images/extension-screenshot.352c4c3ba54e4041ad2f6af749d562cc5705f527b5826efd53d11c3528f5ae45.cs.png)
+
+## Začínáme
+
+Musíte mít nainstalovaný [npm](https://npmjs.com). Stáhněte si kopii tohoto kódu do složky na vašem počítači.
+
+Nainstalujte všechny potřebné balíčky:
+
+```
+npm install
+```
+
+Sestavte rozšíření pomocí webpacku:
+
+```
+npm run build
+```
+
+Pro instalaci v Edge použijte nabídku 'tři tečky' v pravém horním rohu prohlížeče a najděte panel Rozšíření. Odtud vyberte 'Načíst nebalené' pro přidání nového rozšíření. Otevřete složku 'dist', když budete vyzváni, a rozšíření se načte. Pro jeho použití budete potřebovat API klíč pro CO2 Signal API ([získejte jej zde e-mailem](https://www.co2signal.com/) - zadejte svůj e-mail do pole na této stránce) a [kód pro váš region](http://api.electricitymap.org/v3/zones) odpovídající [Mapě elektřiny](https://www.electricitymap.org/map) (například v Bostonu používám 'US-NEISO').
+
+![instalace](../../../../../translated_images/install-on-edge.8bd0ee3ca7dcda1c5334b5195603a43c864e3b38d088b03d57376d25e77b9459.cs.png)
+
+Jakmile zadáte API klíč a region do rozhraní rozšíření, barevný bod na liště rozšíření prohlížeče by se měl změnit tak, aby odrážel spotřebu energie ve vašem regionu, a poskytl vám indikátor o aktivitách s vysokou spotřebou energie, které by pro vás byly vhodné. Koncept tohoto systému "bodů" jsem převzal z [rozšíření Energy Lollipop](https://energylollipop.com/) pro emise v Kalifornii.
+
+---
+
+**Upozornění**:  
+Tento dokument byl přeložen pomocí služby pro automatický překlad [Co-op Translator](https://github.com/Azure/co-op-translator). I když se snažíme o co největší přesnost, mějte prosím na paměti, že automatické překlady mohou obsahovat chyby nebo nepřesnosti. Původní dokument v jeho původním jazyce by měl být považován za závazný zdroj. Pro důležité informace doporučujeme profesionální lidský překlad. Neodpovídáme za žádná nedorozumění nebo nesprávné výklady vyplývající z použití tohoto překladu.
\ No newline at end of file
diff --git a/translations/cs/5-browser-extension/solution/translation/README.fr.md b/translations/cs/5-browser-extension/solution/translation/README.fr.md
new file mode 100644
index 00000000..b38e9886
--- /dev/null
+++ b/translations/cs/5-browser-extension/solution/translation/README.fr.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "9361268ca430b2579375009e1eceb5e5",
+  "translation_date": "2025-08-28T03:48:54+00:00",
+  "source_file": "5-browser-extension/solution/translation/README.fr.md",
+  "language_code": "cs"
+}
+-->
+# Rozšíření prohlížeče Carbon Trigger: Dokončený kód
+
+Pomocí API C02 Signal od tmrow pro sledování spotřeby elektřiny vytvořte rozšíření prohlížeče, které vám umožní mít přímo v prohlížeči připomínku o spotřebě elektřiny ve vaší oblasti. Používání tohoto ad hoc rozšíření vám pomůže činit rozhodnutí o vašich aktivitách na základě těchto informací.
+
+![snímek rozšíření](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.cs.png)
+
+## Začínáme
+
+Budete potřebovat mít nainstalovaný [npm](https://npmjs.com). Stáhněte si kopii tohoto kódu do složky na vašem počítači.
+
+Nainstalujte všechny potřebné balíčky:
+
+```
+npm install
+```
+
+Sestavte rozšíření pomocí webpacku:
+
+```
+npm run build
+```
+
+Pro instalaci na Edge použijte nabídku „tři tečky“ v pravém horním rohu prohlížeče a najděte panel Rozšíření. Odtud vyberte „Načíst nekomprimované rozšíření“ pro přidání nového rozšíření. Při výzvě otevřete složku „dist“ a rozšíření se načte. Pro jeho použití budete potřebovat API klíč pro API CO2 Signal ([získejte jej zde e-mailem](https://www.co2signal.com/) – zadejte svůj e-mail do pole na této stránce) a [kód pro vaši oblast](http://api.electricitymap.org/v3/zones) odpovídající [Mapě elektřiny](https://www.electricitymap.org/map) (například v Bostonu používám „US-NEISO“).
+
+![instalace](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.cs.png)
+
+Jakmile zadáte API klíč a region do rozhraní rozšíření, barevný bod v liště rozšíření prohlížeče by se měl změnit tak, aby odrážel spotřebu energie ve vaší oblasti, a poskytl vám indikátor, jaké energeticky náročné aktivity by bylo vhodné provádět. Koncept tohoto systému „bodů“ jsem převzal z [rozšíření Energy Lollipop](https://energylollipop.com/) pro kalifornské emise.
+
+---
+
+**Prohlášení**:  
+Tento dokument byl přeložen pomocí služby AI pro překlady [Co-op Translator](https://github.com/Azure/co-op-translator). Ačkoli se snažíme o přesnost, mějte prosím na paměti, že automatizované překlady mohou obsahovat chyby nebo nepřesnosti. Původní dokument v jeho původním jazyce by měl být považován za autoritativní zdroj. Pro důležité informace se doporučuje profesionální lidský překlad. Neodpovídáme za žádná nedorozumění nebo nesprávné interpretace vyplývající z použití tohoto překladu.
\ No newline at end of file
diff --git a/translations/cs/5-browser-extension/solution/translation/README.hi.md b/translations/cs/5-browser-extension/solution/translation/README.hi.md
new file mode 100644
index 00000000..a50cfe91
--- /dev/null
+++ b/translations/cs/5-browser-extension/solution/translation/README.hi.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "dd58ae1b7707034f055718c1b68bc8de",
+  "translation_date": "2025-08-28T03:46:18+00:00",
+  "source_file": "5-browser-extension/solution/translation/README.hi.md",
+  "language_code": "cs"
+}
+-->
+# Rozšíření prohlížeče Carbon Trigger: Hotový kód
+
+Použití API CO2 Signal od tmrow ke sledování spotřeby elektřiny, vytvoření rozšíření prohlížeče, které vám připomene, jak náročné je využívání elektřiny ve vašem regionu. Používání tohoto rozšíření vám pomůže rozhodovat se o vašich aktivitách na základě těchto informací.
+
+![Snímek obrazovky rozšíření](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.cs.png)
+
+## Začínáme
+
+Musíte mít nainstalovaný [npm](https://npmjs.com). Stáhněte si kopii tohoto kódu do složky na vašem počítači.
+
+Nainstalujte všechny potřebné balíčky:
+
+```
+npm install
+```
+
+Vytvořte rozšíření pomocí webpacku:
+
+```
+npm run build
+```
+
+Pro instalaci na Edge použijte nabídku „tři tečky“ v pravém horním rohu prohlížeče k nalezení panelu rozšíření. Odtud vyberte „Načíst nebalené“ pro načtení nového rozšíření. V zobrazeném dialogu otevřete složku „dist“ a rozšíření se načte. Pro jeho použití budete potřebovat API klíč CO2 Signal ([získat e-mailem zde](https://www.co2signal.com/) – zadejte svůj e-mail do pole na této stránce) a [kód vašeho regionu](http://api.electricitymap.org/v3/zones) z [Electricity Map](https://www.electricitymap.org/map) (například v Bostonu používám 'US-NEISO').
+
+![instalace](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.cs.png)
+
+Jakmile zadáte API klíč a region do rozhraní rozšíření, barevná tečka na liště rozšíření prohlížeče by se měla změnit tak, aby odrážela spotřebu energie ve vašem regionu, a poskytla vám indikátor, které energeticky náročné aktivity jsou pro vás vhodné. Koncept této „tečkové“ metody jsem převzal z rozšíření [Energy Lollipop](https://energylollipop.com/) pro emise v Kalifornii.
+
+---
+
+**Prohlášení**:  
+Tento dokument byl přeložen pomocí služby pro automatický překlad [Co-op Translator](https://github.com/Azure/co-op-translator). Ačkoli se snažíme o přesnost, mějte prosím na paměti, že automatické překlady mohou obsahovat chyby nebo nepřesnosti. Původní dokument v jeho původním jazyce by měl být považován za autoritativní zdroj. Pro důležité informace doporučujeme profesionální lidský překlad. Neodpovídáme za žádná nedorozumění nebo nesprávné interpretace vyplývající z použití tohoto překladu.
\ No newline at end of file
diff --git a/translations/cs/5-browser-extension/solution/translation/README.it.md b/translations/cs/5-browser-extension/solution/translation/README.it.md
new file mode 100644
index 00000000..0c86584f
--- /dev/null
+++ b/translations/cs/5-browser-extension/solution/translation/README.it.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "9a6b22a2eff0f499b66236be973b24ad",
+  "translation_date": "2025-08-28T03:46:47+00:00",
+  "source_file": "5-browser-extension/solution/translation/README.it.md",
+  "language_code": "cs"
+}
+-->
+# Rozšíření prohlížeče Carbon Trigger: kód pro začátek
+
+Budeme používat API Signal CO2 od tmrow k monitorování spotřeby elektřiny a vytvoříme rozšíření pro prohlížeč, které vám umožní mít přímo v prohlížeči připomínku o tom, jak náročná je spotřeba elektřiny ve vaší oblasti. Používání tohoto rozšíření vám pomůže lépe hodnotit své aktivity na základě těchto informací.
+
+![snímek obrazovky rozšíření](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.cs.png)
+
+## Začínáme
+
+Je nutné mít nainstalovaný [npm](https://npmjs.com). Stáhněte si kopii tohoto kódu do složky na svém počítači.
+
+Nainstalujte všechny potřebné balíčky:
+
+```
+npm install
+```
+
+Vytvořte rozšíření pomocí webpacku:
+
+```
+npm run build
+```
+
+Pro instalaci na Edge použijte nabídku "tři tečky" v pravém horním rohu prohlížeče a najděte panel Rozšíření. Pokud ještě není aktivní, zapněte režim vývojáře (v levém dolním rohu). Vyberte "Načíst nekomprimované" pro přidání nového rozšíření. Otevřete složku "dist" v zobrazeném dialogu a rozšíření bude načteno. Pro jeho použití budete potřebovat API klíč pro CO2 Signal API (můžete ho [získat zde e-mailem](https://www.co2signal.com/) - zadejte svůj e-mail do pole na této stránce) a [kód pro vaši oblast](http://api.electricitymap.org/v3/zones) odpovídající [elektrické mapě](https://www.electricitymap.org/map) (například v Bostonu "US-NEISO").
+
+![instalace](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.cs.png)
+
+Jakmile zadáte API klíč a region do rozhraní rozšíření, barevný bod v liště rozšíření prohlížeče by se měl změnit tak, aby odrážel spotřebu energie ve vaší oblasti. Poskytne vám také návod, které aktivity s vysokou spotřebou energie by bylo vhodné provádět. Koncept tohoto systému "bodů" byl inspirován [rozšířením Energy Lollipop](https://energylollipop.com/) pro emise v Kalifornii.
+
+---
+
+**Prohlášení**:  
+Tento dokument byl přeložen pomocí služby pro automatický překlad [Co-op Translator](https://github.com/Azure/co-op-translator). Přestože se snažíme o přesnost, mějte prosím na paměti, že automatické překlady mohou obsahovat chyby nebo nepřesnosti. Původní dokument v jeho původním jazyce by měl být považován za autoritativní zdroj. Pro důležité informace doporučujeme profesionální lidský překlad. Neodpovídáme za žádné nedorozumění nebo nesprávné interpretace vyplývající z použití tohoto překladu.
\ No newline at end of file
diff --git a/translations/cs/5-browser-extension/solution/translation/README.ja.md b/translations/cs/5-browser-extension/solution/translation/README.ja.md
new file mode 100644
index 00000000..9165e3a6
--- /dev/null
+++ b/translations/cs/5-browser-extension/solution/translation/README.ja.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "3f5e6821e0febccfc5d05e7c944d9e3d",
+  "translation_date": "2025-08-28T03:47:16+00:00",
+  "source_file": "5-browser-extension/solution/translation/README.ja.md",
+  "language_code": "cs"
+}
+-->
+# Rozšíření prohlížeče Carbon Trigger: Hotový kód
+
+Vytvořte rozšíření prohlížeče, které pomocí API CO2 Signal od tmrow sleduje spotřebu energie a zobrazuje připomínku o tom, jak vysoká je spotřeba energie ve vaší oblasti. Toto rozšíření můžete používat ad hoc, abyste mohli na základě těchto informací rozhodovat o svých aktivitách.
+
+![snímek obrazovky rozšíření](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.cs.png)
+
+## Začínáme
+
+Je nutné mít nainstalovaný [npm](https://npmjs.com). Stáhněte si kopii tohoto kódu do složky na vašem počítači.
+
+Nainstalujte všechny potřebné balíčky.
+
+```
+npm install
+```
+
+Sestavte rozšíření pomocí webpacku.
+
+```
+npm run build
+```
+
+Pro instalaci do Edge najděte panel „Rozšíření“ v nabídce „tři tečky“ v pravém horním rohu prohlížeče. Odtud vyberte „Načíst nebalené“ a načtěte nové rozšíření. Při výzvě otevřete složku „dist“ a rozšíření se načte. Pro použití budete potřebovat API klíč CO2 Signal ([získejte jej zde e-mailem](https://www.co2signal.com/) – zadejte svůj e-mail do pole na této stránce) a [kód pro vaši oblast](http://api.electricitymap.org/v3/zones) odpovídající [Electricity Map](https://www.electricitymap.org/map) (například pro Boston použijte 'US-NEISO').
+
+![instalace](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.cs.png)
+
+Po zadání API klíče a oblasti do rozhraní rozšíření se barevná tečka zobrazená na liště rozšíření prohlížeče změní, aby odrážela spotřebu energie ve vaší oblasti. Tím vám naznačí, jaké aktivity vyžadující energii jsou vhodné. Koncept tohoto „tečkového“ systému jsem převzal z [Energy Lollipop extension](https://energylollipop.com/) pro emise v Kalifornii.
+
+---
+
+**Prohlášení**:  
+Tento dokument byl přeložen pomocí služby pro automatický překlad [Co-op Translator](https://github.com/Azure/co-op-translator). I když se snažíme o přesnost, mějte prosím na paměti, že automatické překlady mohou obsahovat chyby nebo nepřesnosti. Původní dokument v jeho původním jazyce by měl být považován za autoritativní zdroj. Pro důležité informace doporučujeme profesionální lidský překlad. Neodpovídáme za žádná nedorozumění nebo nesprávné interpretace vyplývající z použití tohoto překladu.
\ No newline at end of file
diff --git a/translations/cs/5-browser-extension/solution/translation/README.ms.md b/translations/cs/5-browser-extension/solution/translation/README.ms.md
new file mode 100644
index 00000000..8de1df58
--- /dev/null
+++ b/translations/cs/5-browser-extension/solution/translation/README.ms.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "21b364c158c8e4f698de65eeac16c9fe",
+  "translation_date": "2025-08-28T03:48:24+00:00",
+  "source_file": "5-browser-extension/solution/translation/README.ms.md",
+  "language_code": "cs"
+}
+-->
+# Rozšíření prohlížeče Carbon Trigger: Kompletní kód
+
+Pomocí API CO2 Signal od tmrow pro sledování spotřeby elektřiny vytvořte rozšíření prohlížeče, které vás bude upozorňovat na aktuální úroveň spotřeby elektřiny ve vašem regionu. Používání tohoto rozšíření vám pomůže lépe zvažovat své aktivity na základě těchto informací.
+
+![snímek obrazovky rozšíření prohlížeče](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.cs.png)
+
+## Začínáme
+
+Nejprve si nainstalujte [npm](https://npmjs.com). Stáhněte si kopii tohoto kódu do složky na svém počítači.
+
+Nainstalujte všechny potřebné balíčky:
+
+```
+npm install
+```
+
+Vytvořte rozšíření pomocí webpacku:
+
+```
+npm run build
+```
+
+Pro instalaci v Edge použijte nabídku „tři tečky“ v pravém horním rohu prohlížeče a najděte panel Rozšíření. Odtud vyberte „Načíst nebalené“ pro přidání nového rozšíření. Otevřete složku „dist“ na výzvu a rozšíření se načte. Pro jeho použití budete potřebovat API klíč pro CO2 Signal ([získejte jej zde prostřednictvím e-mailu](https://www.co2signal.com/) – zadejte svůj e-mail do pole na této stránce) a [kód pro váš region](http://api.electricitymap.org/v3/zones), který odpovídá [Electricity Map](https://www.electricitymap.org/map) (například v Bostonu používám „US-NEISO“).
+
+![stahování](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.cs.png)
+
+Jakmile zadáte API klíč a region do rozhraní rozšíření, barevný bod na liště rozšíření prohlížeče se změní tak, aby odrážel spotřebu energie ve vašem regionu, a poskytne vám doporučení ohledně vhodných aktivit. Koncept systému „barevných bodů“ jsem převzal z [rozšíření prohlížeče Energy Lollipop](https://energylollipop.com/) pro Kalifornii.
+
+---
+
+**Prohlášení**:  
+Tento dokument byl přeložen pomocí služby pro automatický překlad [Co-op Translator](https://github.com/Azure/co-op-translator). Ačkoli se snažíme o přesnost, mějte prosím na paměti, že automatické překlady mohou obsahovat chyby nebo nepřesnosti. Původní dokument v jeho původním jazyce by měl být považován za autoritativní zdroj. Pro důležité informace se doporučuje profesionální lidský překlad. Neodpovídáme za žádná nedorozumění nebo nesprávné interpretace vyplývající z použití tohoto překladu.
\ No newline at end of file
diff --git a/translations/cs/5-browser-extension/start/README.md b/translations/cs/5-browser-extension/start/README.md
new file mode 100644
index 00000000..62848aef
--- /dev/null
+++ b/translations/cs/5-browser-extension/start/README.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "26fd39046d264ba185dcb086d3a8cf3e",
+  "translation_date": "2025-08-28T03:45:19+00:00",
+  "source_file": "5-browser-extension/start/README.md",
+  "language_code": "cs"
+}
+-->
+# Rozšíření prohlížeče Carbon Trigger: Výchozí kód
+
+Pomocí API CO2 Signal od tmrow pro sledování spotřeby elektřiny vytvořte rozšíření prohlížeče, které vám přímo v prohlížeči připomene, jak náročná je spotřeba elektřiny ve vaší oblasti. Používání tohoto rozšíření vám pomůže lépe se rozhodovat o vašich aktivitách na základě těchto informací.
+
+![snímek obrazovky rozšíření](../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.cs.png)
+
+## Začínáme
+
+Budete potřebovat mít nainstalovaný [npm](https://npmjs.com). Stáhněte si kopii tohoto kódu do složky na vašem počítači.
+
+Nainstalujte všechny potřebné balíčky:
+
+```
+npm install
+```
+
+Sestavte rozšíření pomocí webpacku:
+
+```
+npm run build
+```
+
+Pro instalaci na Edge použijte nabídku „tři tečky“ v pravém horním rohu prohlížeče a najděte panel Rozšíření. Odtud vyberte „Načíst nebalené“ pro načtení nového rozšíření. Na výzvu otevřete složku „dist“ a rozšíření se načte. Pro jeho použití budete potřebovat API klíč pro API CO2 Signal ([získejte jej zde e-mailem](https://www.co2signal.com/) – zadejte svůj e-mail do pole na této stránce) a [kód pro vaši oblast](http://api.electricitymap.org/v3/zones) odpovídající [Electricity Map](https://www.electricitymap.org/map) (například v Bostonu používám „US-NEISO“).
+
+![instalace](../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.cs.png)
+
+Jakmile zadáte API klíč a region do rozhraní rozšíření, barevná tečka na liště rozšíření prohlížeče by se měla změnit tak, aby odrážela spotřebu energie ve vaší oblasti, a poskytne vám doporučení, jaké energeticky náročné aktivity by pro vás byly vhodné. Koncept tohoto systému „teček“ jsem převzal z rozšíření [Energy Lollipop](https://energylollipop.com/) pro emise v Kalifornii.
+
+---
+
+**Prohlášení**:  
+Tento dokument byl přeložen pomocí služby pro automatický překlad [Co-op Translator](https://github.com/Azure/co-op-translator). Ačkoli se snažíme o přesnost, mějte prosím na paměti, že automatické překlady mohou obsahovat chyby nebo nepřesnosti. Původní dokument v jeho původním jazyce by měl být považován za autoritativní zdroj. Pro důležité informace doporučujeme profesionální lidský překlad. Neodpovídáme za žádná nedorozumění nebo nesprávné interpretace vyplývající z použití tohoto překladu.
\ No newline at end of file
diff --git a/translations/cs/6-space-game/1-introduction/README.md b/translations/cs/6-space-game/1-introduction/README.md
new file mode 100644
index 00000000..c1eaf921
--- /dev/null
+++ b/translations/cs/6-space-game/1-introduction/README.md
@@ -0,0 +1,238 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "d9da6dc61fb712b29f65e108c79b8a5d",
+  "translation_date": "2025-08-28T04:03:04+00:00",
+  "source_file": "6-space-game/1-introduction/README.md",
+  "language_code": "cs"
+}
+-->
+# Vytvořte vesmírnou hru, část 1: Úvod
+
+![video](../../../../6-space-game/images/pewpew.gif)
+
+## Kvíz před lekcí
+
+[Kvíz před lekcí](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/29)
+
+### Dědičnost a kompozice ve vývoji her
+
+V předchozích lekcích nebylo třeba příliš řešit návrhovou architekturu aplikací, které jste vytvářeli, protože projekty byly velmi malé. Jakmile však vaše aplikace rostou co do velikosti a rozsahu, stávají se architektonická rozhodnutí důležitějšími. Existují dva hlavní přístupy k vytváření větších aplikací v JavaScriptu: *kompozice* nebo *dědičnost*. Oba přístupy mají své výhody a nevýhody, ale pojďme si je vysvětlit v kontextu hry.
+
+✅ Jedna z nejslavnějších knih o programování se zabývá [návrhovými vzory](https://en.wikipedia.org/wiki/Design_Patterns).
+
+Ve hře máte `herní objekty`, což jsou objekty, které existují na obrazovce. To znamená, že mají umístění v kartézském souřadnicovém systému, charakterizované souřadnicemi `x` a `y`. Při vývoji hry si všimnete, že všechny vaše herní objekty mají standardní vlastnosti, které jsou společné pro každou hru, kterou vytvoříte, konkrétně prvky, které jsou:
+
+- **založené na umístění** Většina, ne-li všechny herní prvky, jsou založené na umístění. To znamená, že mají souřadnice `x` a `y`.
+- **pohyblivé** Jedná se o objekty, které se mohou přesunout na nové místo. Typicky jde o hrdinu, monstrum nebo NPC (nehratelnou postavu), ale například ne o statický objekt, jako je strom.
+- **sebedestruktivní** Tyto objekty existují pouze po určitou dobu, než se nastaví k odstranění. Obvykle je to reprezentováno booleanem `dead` nebo `destroyed`, který signalizuje hernímu enginu, že tento objekt by již neměl být vykreslován.
+- **s časovým omezením** 'Časové omezení' je typická vlastnost krátkodobých objektů. Typickým příkladem je text nebo grafický efekt, jako je exploze, který by měl být viditelný jen několik milisekund.
+
+✅ Přemýšlejte o hře jako Pac-Man. Dokážete v této hře identifikovat čtyři výše uvedené typy objektů?
+
+### Vyjádření chování
+
+Vše, co jsme popsali výše, jsou chování, která mohou herní objekty mít. Jak je tedy zakódujeme? Toto chování můžeme vyjádřit jako metody spojené buď s třídami, nebo objekty.
+
+**Třídy**
+
+Myšlenkou je použít `třídy` ve spojení s `dědičností`, abychom přidali určité chování třídě.
+
+✅ Dědičnost je důležitý koncept k pochopení. Přečtěte si více v [článku MDN o dědičnosti](https://developer.mozilla.org/docs/Web/JavaScript/Inheritance_and_the_prototype_chain).
+
+Vyjádřeno pomocí kódu, herní objekt může typicky vypadat takto:
+
+```javascript
+
+//set up the class GameObject
+class GameObject {
+  constructor(x, y, type) {
+    this.x = x;
+    this.y = y;
+    this.type = type;
+  }
+}
+
+//this class will extend the GameObject's inherent class properties
+class Movable extends GameObject {
+  constructor(x,y, type) {
+    super(x,y, type)
+  }
+
+//this movable object can be moved on the screen
+  moveTo(x, y) {
+    this.x = x;
+    this.y = y;
+  }
+}
+
+//this is a specific class that extends the Movable class, so it can take advantage of all the properties that it inherits
+class Hero extends Movable {
+  constructor(x,y) {
+    super(x,y, 'Hero')
+  }
+}
+
+//this class, on the other hand, only inherits the GameObject properties
+class Tree extends GameObject {
+  constructor(x,y) {
+    super(x,y, 'Tree')
+  }
+}
+
+//a hero can move...
+const hero = new Hero();
+hero.moveTo(5,5);
+
+//but a tree cannot
+const tree = new Tree();
+```
+
+✅ Věnujte pár minut tomu, abyste si představili hrdinu z Pac-Mana (například Inky, Pinky nebo Blinky) a jak by byl napsán v JavaScriptu.
+
+**Kompozice**
+
+Jiný způsob, jak řešit dědičnost objektů, je použití *kompozice*. Poté objekty vyjadřují své chování takto:
+
+```javascript
+//create a constant gameObject
+const gameObject = {
+  x: 0,
+  y: 0,
+  type: ''
+};
+
+//...and a constant movable
+const movable = {
+  moveTo(x, y) {
+    this.x = x;
+    this.y = y;
+  }
+}
+//then the constant movableObject is composed of the gameObject and movable constants
+const movableObject = {...gameObject, ...movable};
+
+//then create a function to create a new Hero who inherits the movableObject properties
+function createHero(x, y) {
+  return {
+    ...movableObject,
+    x,
+    y,
+    type: 'Hero'
+  }
+}
+//...and a static object that inherits only the gameObject properties
+function createStatic(x, y, type) {
+  return {
+    ...gameObject
+    x,
+    y,
+    type
+  }
+}
+//create the hero and move it
+const hero = createHero(10,10);
+hero.moveTo(5,5);
+//and create a static tree which only stands around
+const tree = createStatic(0,0, 'Tree'); 
+```
+
+**Který vzor bych měl použít?**
+
+Je na vás, který vzor si vyberete. JavaScript podporuje oba tyto přístupy.
+
+--
+
+Další vzor běžný ve vývoji her řeší problém správy uživatelského zážitku a výkonu hry.
+
+## Vzor Pub/Sub
+
+✅ Pub/Sub znamená 'publish-subscribe' (publikovat-odebírat)
+
+Tento vzor se zabývá myšlenkou, že různé části vaší aplikace by o sobě neměly vědět. Proč? Protože je mnohem snazší pochopit, co se obecně děje, pokud jsou jednotlivé části oddělené. Také je snazší náhle změnit chování, pokud je to potřeba. Jak toho dosáhneme? Zavedením několika konceptů:
+
+- **zpráva**: Zpráva je obvykle textový řetězec doplněný volitelným obsahem (daty, která upřesňují, o čem zpráva je). Typická zpráva ve hře může být `KEY_PRESSED_ENTER`.
+- **vydavatel**: Tento prvek *publikuje* zprávu a odesílá ji všem odběratelům.
+- **odběratel**: Tento prvek *naslouchá* konkrétním zprávám a provádí určitou akci v důsledku přijetí této zprávy, například vystřelení laseru.
+
+Implementace je poměrně malá, ale jde o velmi silný vzor. Zde je ukázka, jak může být implementován:
+
+```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))
+    }
+  }
+}
+
+```
+
+Pro použití výše uvedeného kódu můžeme vytvořit velmi malou implementaci:
+
+```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)
+  }
+});
+```
+
+Výše propojujeme událost klávesnice, `ArrowLeft`, a odesíláme zprávu `HERO_MOVE_LEFT`. Nasloucháme této zprávě a v důsledku toho pohybujeme `hrdinou`. Síla tohoto vzoru spočívá v tom, že posluchač událostí a hrdina o sobě navzájem nevědí. Můžete přemapovat `ArrowLeft` na klávesu `A`. Navíc by bylo možné udělat něco úplně jiného na `ArrowLeft` provedením několika úprav funkce `on` v eventEmitteru:
+
+```javascript
+eventEmitter.on(Messages.HERO_MOVE_LEFT, () => {
+  hero.move(5,0);
+});
+```
+
+Jakmile se vaše hra stane složitější, tento vzor zůstává stejně jednoduchý a váš kód zůstává čistý. Je opravdu doporučeno tento vzor přijmout.
+
+---
+
+## 🚀 Výzva
+
+Přemýšlejte o tom, jak může vzor pub-sub vylepšit hru. Které části by měly emitovat události a jak by na ně měla hra reagovat? Teď máte šanci být kreativní a přemýšlet o nové hře a o tom, jak by se její části mohly chovat.
+
+## Kvíz po lekci
+
+[Kvíz po lekci](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/30)
+
+## Recenze a samostudium
+
+Zjistěte více o Pub/Sub [přečtením tohoto článku](https://docs.microsoft.com/azure/architecture/patterns/publisher-subscriber/?WT.mc_id=academic-77807-sagibbon).
+
+## Zadání
+
+[Navrhněte koncept hry](assignment.md)
+
+---
+
+**Prohlášení**:  
+Tento dokument byl přeložen pomocí služby pro automatický překlad [Co-op Translator](https://github.com/Azure/co-op-translator). Ačkoli se snažíme o přesnost, mějte prosím na paměti, že automatické překlady mohou obsahovat chyby nebo nepřesnosti. Původní dokument v jeho původním jazyce by měl být považován za autoritativní zdroj. Pro důležité informace doporučujeme profesionální lidský překlad. Neodpovídáme za žádná nedorozumění nebo nesprávné interpretace vyplývající z použití tohoto překladu.
\ No newline at end of file
diff --git a/translations/cs/6-space-game/1-introduction/assignment.md b/translations/cs/6-space-game/1-introduction/assignment.md
new file mode 100644
index 00000000..1b49b56b
--- /dev/null
+++ b/translations/cs/6-space-game/1-introduction/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "009bdedee9cc82988264be8cb31f9bf4",
+  "translation_date": "2025-08-28T04:03:43+00:00",
+  "source_file": "6-space-game/1-introduction/assignment.md",
+  "language_code": "cs"
+}
+-->
+# Vytvořte návrh hry
+
+## Instrukce
+
+Pomocí ukázek kódu z lekce vytvořte reprezentaci hry, kterou máte rádi. Musí se jednat o jednoduchou hru, ale cílem je použít buď vzor třídy, nebo kompoziční vzor a vzor pub/sub, abyste ukázali, jak by mohla hra začít. Buďte kreativní!
+
+## Hodnocení
+
+| Kritéria | Vynikající                                             | Přiměřené                                           | Potřebuje zlepšení                                |
+| -------- | ----------------------------------------------------- | -------------------------------------------------- | ------------------------------------------------ |
+|          | Na obrazovku jsou umístěny tři prvky a manipulováno s nimi | Na obrazovku jsou umístěny dva prvky a manipulováno s nimi | Na obrazovku je umístěn jeden prvek a manipulováno s ním |
+
+---
+
+**Prohlášení**:  
+Tento dokument byl přeložen pomocí služby AI pro překlady [Co-op Translator](https://github.com/Azure/co-op-translator). Ačkoli se snažíme o přesnost, mějte prosím na paměti, že automatizované překlady mohou obsahovat chyby nebo nepřesnosti. Původní dokument v jeho původním jazyce by měl být považován za autoritativní zdroj. Pro důležité informace se doporučuje profesionální lidský překlad. Neodpovídáme za žádné nedorozumění nebo nesprávné interpretace vyplývající z použití tohoto překladu.
\ No newline at end of file
diff --git a/translations/cs/6-space-game/2-drawing-to-canvas/README.md b/translations/cs/6-space-game/2-drawing-to-canvas/README.md
new file mode 100644
index 00000000..dc0a9248
--- /dev/null
+++ b/translations/cs/6-space-game/2-drawing-to-canvas/README.md
@@ -0,0 +1,230 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "41be8d35e7f30aa9dad10773c35e89c4",
+  "translation_date": "2025-08-28T03:59:40+00:00",
+  "source_file": "6-space-game/2-drawing-to-canvas/README.md",
+  "language_code": "cs"
+}
+-->
+# Vytvořte vesmírnou hru, část 2: Kreslení hrdiny a monster na plátno
+
+## Kvíz před přednáškou
+
+[Kvíz před přednáškou](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/31)
+
+## Plátno
+
+Plátno je HTML prvek, který nemá ve výchozím nastavení žádný obsah; je to prázdná plocha. Musíte na něj kreslit, abyste něco přidali.
+
+✅ Přečtěte si [více o Canvas API](https://developer.mozilla.org/docs/Web/API/Canvas_API) na MDN.
+
+Takto se obvykle deklaruje jako součást těla stránky:
+
+```html
+<canvas id="myCanvas" width="200" height="100"></canvas>
+```
+
+Výše nastavujeme `id`, `width` a `height`.
+
+- `id`: nastavte toto, abyste mohli získat referenci, když s tím budete potřebovat pracovat.
+- `width`: šířka prvku.
+- `height`: výška prvku.
+
+## Kreslení jednoduché geometrie
+
+Plátno používá kartézský souřadnicový systém pro kreslení objektů. Používá tedy osu x a osu y k vyjádření, kde se něco nachází. Poloha `0,0` je v levém horním rohu a pravý dolní roh odpovídá šířce a výšce plátna, které jste nastavili.
+
+![mřížka plátna](../../../../translated_images/canvas_grid.5f209da785ded492a01ece440e3032afe51efa500cc2308e5ea4252487ceaf0b.cs.png)
+> Obrázek z [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes)
+
+Pro kreslení na prvek plátna musíte projít následujícími kroky:
+
+1. **Získat referenci** na prvek plátna.
+1. **Získat referenci** na prvek kontextu, který se nachází na plátně.
+1. **Provést kreslící operaci** pomocí prvku kontextu.
+
+Kód pro výše uvedené kroky obvykle vypadá takto:
+
+```javascript
+// draws a red rectangle
+//1. get the canvas reference
+canvas = document.getElementById("myCanvas");
+
+//2. set the context to 2D to draw basic shapes
+ctx = canvas.getContext("2d");
+
+//3. fill it with the color red
+ctx.fillStyle = 'red';
+
+//4. and draw a rectangle with these parameters, setting location and size
+ctx.fillRect(0,0, 200, 200) // x,y,width, height
+```
+
+✅ Canvas API se většinou zaměřuje na 2D tvary, ale můžete také kreslit 3D objekty na webovou stránku; k tomu můžete použít [WebGL API](https://developer.mozilla.org/docs/Web/API/WebGL_API).
+
+S Canvas API můžete kreslit různé věci, například:
+
+- **Geometrické tvary**, už jsme ukázali, jak nakreslit obdélník, ale je toho mnohem více, co můžete nakreslit.
+- **Text**, můžete kreslit text s libovolným fontem a barvou.
+- **Obrázky**, můžete kreslit obrázky na základě obrazových souborů, jako je .jpg nebo .png.
+
+✅ Vyzkoušejte to! Už víte, jak nakreslit obdélník, dokážete nakreslit kruh na stránku? Podívejte se na některé zajímavé kresby na plátně na CodePen. Tady je [zvláště působivý příklad](https://codepen.io/dissimulate/pen/KrAwx).
+
+## Načtení a kreslení obrazového souboru
+
+Obrazový soubor načtete vytvořením objektu `Image` a nastavením jeho vlastnosti `src`. Poté posloucháte událost `load`, abyste věděli, kdy je připraven k použití. Kód vypadá takto:
+
+### Načtení souboru
+
+```javascript
+const img = new Image();
+img.src = 'path/to/my/image.png';
+img.onload = () => {
+  // image loaded and ready to be used
+}
+```
+
+### Vzor pro načtení souboru
+
+Doporučuje se zabalit výše uvedené do konstrukce, jako je tato, aby bylo snazší jej použít a manipulovat s ním pouze tehdy, když je plně načten:
+
+```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')
+}
+
+```
+
+Pro vykreslení herních souborů na obrazovku by váš kód vypadal takto:
+
+```javascript
+async function run() {
+  const heroImg = await loadAsset('hero.png')
+  const monsterImg = await loadAsset('monster.png')
+
+  canvas = document.getElementById("myCanvas");
+  ctx = canvas.getContext("2d");
+  ctx.drawImage(heroImg, canvas.width/2,canvas.height/2);
+  ctx.drawImage(monsterImg, 0,0);
+}
+```
+
+## Nyní je čas začít vytvářet vaši hru
+
+### Co vytvořit
+
+Vytvoříte webovou stránku s prvkem plátna. Měla by zobrazovat černou obrazovku `1024*768`. Poskytli jsme vám dva obrázky:
+
+- Loď hrdiny
+
+   ![Loď hrdiny](../../../../translated_images/player.dd24c1afa8c71e9b82b2958946d4bad13308681392d4b5ddcc61a0e818ef8088.cs.png)
+
+- 5*5 monstrum
+
+   ![Loď monstra](../../../../translated_images/enemyShip.5df2a822c16650c2fb3c06652e8ec8120cdb9122a6de46b9a1a56d54db22657f.cs.png)
+
+### Doporučené kroky pro zahájení vývoje
+
+Najděte soubory, které byly vytvořeny pro vás ve složce `your-work`. Měla by obsahovat následující:
+
+```bash
+-| assets
+  -| enemyShip.png
+  -| player.png
+-| index.html
+-| app.js
+-| package.json
+```
+
+Otevřete kopii této složky ve Visual Studio Code. Měli byste mít nastavené lokální vývojové prostředí, nejlépe s Visual Studio Code, NPM a Node. Pokud nemáte na svém počítači nastavený `npm`, [zde je návod, jak to udělat](https://www.npmjs.com/get-npm).
+
+Začněte svůj projekt navigací do složky `your_work`:
+
+```bash
+cd your-work
+npm start
+```
+
+Výše uvedené spustí HTTP server na adrese `http://localhost:5000`. Otevřete prohlížeč a zadejte tuto adresu. Zatím je to prázdná stránka, ale to se změní.
+
+> Poznámka: abyste viděli změny na obrazovce, obnovte prohlížeč.
+
+### Přidání kódu
+
+Přidejte potřebný kód do `your-work/app.js`, abyste vyřešili následující:
+
+1. **Nakreslete** plátno s černým pozadím
+   > tip: přidejte dva řádky pod příslušné TODO v `/app.js`, nastavte prvek `ctx` na černou barvu a souřadnice nahoře/vlevo na 0,0 a výšku a šířku na hodnoty plátna.
+2. **Načtěte** textury
+   > tip: přidejte obrázky hráče a nepřítele pomocí `await loadTexture` a předáním cesty k obrázku. Zatím je na obrazovce neuvidíte!
+3. **Nakreslete** hrdinu do středu obrazovky ve spodní polovině
+   > tip: použijte API `drawImage` k nakreslení heroImg na obrazovku, nastavte `canvas.width / 2 - 45` a `canvas.height - canvas.height / 4)`;
+4. **Nakreslete** 5*5 monster
+   > tip: Nyní můžete odkomentovat kód pro vykreslení nepřátel na obrazovku. Poté přejděte do funkce `createEnemies` a vytvořte ji.
+
+   Nejprve nastavte některé konstanty:
+
+    ```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;
+    ```
+
+    poté vytvořte smyčku pro vykreslení pole monster na obrazovku:
+
+    ```javascript
+    for (let x = START_X; x < STOP_X; x += 98) {
+        for (let y = 0; y < 50 * 5; y += 50) {
+          ctx.drawImage(enemyImg, x, y);
+        }
+      }
+    ```
+
+## Výsledek
+
+Hotový výsledek by měl vypadat takto:
+
+![Černá obrazovka s hrdinou a 5*5 monstry](../../../../translated_images/partI-solution.36c53b48c9ffae2a5e15496b23b604ba5393433e4bf91608a7a0a020eb7a2691.cs.png)
+
+## Řešení
+
+Nejprve se pokuste vyřešit to sami, ale pokud se zaseknete, podívejte se na [řešení](../../../../6-space-game/2-drawing-to-canvas/solution/app.js).
+
+---
+
+## 🚀 Výzva
+
+Naučili jste se kreslit pomocí Canvas API zaměřeného na 2D; podívejte se na [WebGL API](https://developer.mozilla.org/docs/Web/API/WebGL_API) a zkuste nakreslit 3D objekt.
+
+## Kvíz po přednášce
+
+[Kvíz po přednášce](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/32)
+
+## Přehled a samostudium
+
+Zjistěte více o Canvas API [čtením o něm](https://developer.mozilla.org/docs/Web/API/Canvas_API).
+
+## Úkol
+
+[Vyzkoušejte si práci s Canvas API](assignment.md)
+
+---
+
+**Prohlášení**:  
+Tento dokument byl přeložen pomocí služby pro automatický překlad [Co-op Translator](https://github.com/Azure/co-op-translator). I když se snažíme o přesnost, mějte prosím na paměti, že automatické překlady mohou obsahovat chyby nebo nepřesnosti. Původní dokument v jeho původním jazyce by měl být považován za autoritativní zdroj. Pro důležité informace se doporučuje profesionální lidský překlad. Neodpovídáme za žádná nedorozumění nebo nesprávné interpretace vyplývající z použití tohoto překladu.
\ No newline at end of file
diff --git a/translations/cs/6-space-game/2-drawing-to-canvas/assignment.md b/translations/cs/6-space-game/2-drawing-to-canvas/assignment.md
new file mode 100644
index 00000000..8a589412
--- /dev/null
+++ b/translations/cs/6-space-game/2-drawing-to-canvas/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "ca1cf78a4c60df77ab32a154ec024d7f",
+  "translation_date": "2025-08-28T04:00:17+00:00",
+  "source_file": "6-space-game/2-drawing-to-canvas/assignment.md",
+  "language_code": "cs"
+}
+-->
+# Hrajte si s API Canvas
+
+## Pokyny
+
+Vyberte jeden prvek API Canvas a vytvořte kolem něj něco zajímavého. Dokážete vytvořit malou galaxii opakujících se hvězd? Dokážete vytvořit zajímavou texturu barevných čar? Můžete se podívat na CodePen pro inspiraci (ale nekopírujte).
+
+## Hodnocení
+
+| Kritéria | Vynikající                                               | Přiměřené                          | Vyžaduje zlepšení     |
+| -------- | -------------------------------------------------------- | ---------------------------------- | --------------------- |
+|          | Kód je odevzdán a ukazuje zajímavou texturu nebo tvar    | Kód je odevzdán, ale nefunguje     | Kód není odevzdán     |
+
+---
+
+**Prohlášení**:  
+Tento dokument byl přeložen pomocí služby AI pro překlady [Co-op Translator](https://github.com/Azure/co-op-translator). Ačkoli se snažíme o přesnost, mějte prosím na paměti, že automatizované překlady mohou obsahovat chyby nebo nepřesnosti. Původní dokument v jeho původním jazyce by měl být považován za autoritativní zdroj. Pro důležité informace se doporučuje profesionální lidský překlad. Nenese odpovědnost za žádné nedorozumění nebo nesprávné interpretace vyplývající z použití tohoto překladu.
\ No newline at end of file
diff --git a/translations/cs/6-space-game/3-moving-elements-around/README.md b/translations/cs/6-space-game/3-moving-elements-around/README.md
new file mode 100644
index 00000000..7ca7fe98
--- /dev/null
+++ b/translations/cs/6-space-game/3-moving-elements-around/README.md
@@ -0,0 +1,402 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "23f088add24f0f1fa51014a9e27ea280",
+  "translation_date": "2025-08-28T03:53:34+00:00",
+  "source_file": "6-space-game/3-moving-elements-around/README.md",
+  "language_code": "cs"
+}
+-->
+# Vytvořte vesmírnou hru, část 3: Přidání pohybu
+
+## Kvíz před přednáškou
+
+[Kvíz před přednáškou](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/33)
+
+Hry nejsou moc zábavné, dokud se na obrazovce nezačnou pohybovat mimozemšťané! V této hře využijeme dva typy pohybu:
+
+- **Pohyb pomocí klávesnice/myši**: když uživatel interaguje s klávesnicí nebo myší, aby přesunul objekt na obrazovce.
+- **Pohyb vyvolaný hrou**: když hra pohybuje objektem v určitém časovém intervalu.
+
+Jak tedy pohybujeme objekty na obrazovce? Vše je o kartézských souřadnicích: změníme polohu (x, y) objektu a poté obrazovku znovu vykreslíme.
+
+Obvykle potřebujete následující kroky k dosažení *pohybu* na obrazovce:
+
+1. **Nastavit novou polohu** objektu; to je nutné, aby se objekt jevil jako pohybující se.
+2. **Vyčistit obrazovku**, obrazovka musí být mezi jednotlivými vykresleními vyčištěna. Můžeme ji vyčistit vykreslením obdélníku, který vyplníme barvou pozadí.
+3. **Znovu vykreslit objekt** na nové poloze. Tímto konečně dosáhneme přesunu objektu z jednoho místa na druhé.
+
+Takto to může vypadat v kódu:
+
+```javascript
+//set the hero's location
+hero.x += 5;
+// clear the rectangle that hosts the hero
+ctx.clearRect(0, 0, canvas.width, canvas.height);
+// redraw the game background and hero
+ctx.fillRect(0, 0, canvas.width, canvas.height)
+ctx.fillStyle = "black";
+ctx.drawImage(heroImg, hero.x, hero.y);
+```
+
+✅ Dokážete si představit důvod, proč by opakované vykreslování vašeho hrdiny mnohokrát za sekundu mohlo způsobit výkonové problémy? Přečtěte si o [alternativách k tomuto vzoru](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas).
+
+## Zpracování událostí klávesnice
+
+Události zpracováváte tak, že kódu připojíte konkrétní události. Události klávesnice se spouštějí na celém okně, zatímco události myši, jako je `click`, mohou být připojeny ke kliknutí na konkrétní prvek. V tomto projektu budeme používat události klávesnice.
+
+Pro zpracování události musíte použít metodu `addEventListener()` okna a poskytnout jí dva vstupní parametry. Prvním parametrem je název události, například `keyup`. Druhým parametrem je funkce, která by měla být vyvolána v důsledku proběhnutí události.
+
+Příklad:
+
+```javascript
+window.addEventListener('keyup', (evt) => {
+  // `evt.key` = string representation of the key
+  if (evt.key === 'ArrowUp') {
+    // do something
+  }
+})
+```
+
+Pro události klávesnice existují dvě vlastnosti na události, které můžete použít k zjištění, která klávesa byla stisknuta:
+
+- `key`, což je textová reprezentace stisknuté klávesy, například `ArrowUp`.
+- `keyCode`, což je číselná reprezentace, například `37`, odpovídá `ArrowLeft`.
+
+✅ Manipulace s událostmi klávesnice je užitečná i mimo vývoj her. Jaké další využití této techniky vás napadá?
+
+### Speciální klávesy: upozornění
+
+Existují některé *speciální* klávesy, které ovlivňují okno. To znamená, že pokud posloucháte událost `keyup` a použijete tyto speciální klávesy k pohybu svého hrdiny, provede se také horizontální posouvání. Z tohoto důvodu možná budete chtít *vypnout* toto vestavěné chování prohlížeče při vytváření své hry. Potřebujete kód jako tento:
+
+```javascript
+let onKeyDown = function (e) {
+  console.log(e.keyCode);
+  switch (e.keyCode) {
+    case 37:
+    case 39:
+    case 38:
+    case 40: // Arrow keys
+    case 32:
+      e.preventDefault();
+      break; // Space
+    default:
+      break; // do not block other keys
+  }
+};
+
+window.addEventListener('keydown', onKeyDown);
+```
+
+Výše uvedený kód zajistí, že šipkové klávesy a mezerník budou mít své *výchozí* chování vypnuté. Mechanismus *vypnutí* se provede, když zavoláme `e.preventDefault()`.
+
+## Pohyb vyvolaný hrou
+
+Můžeme nechat objekty pohybovat se samy pomocí časovačů, jako jsou funkce `setTimeout()` nebo `setInterval()`, které aktualizují polohu objektu při každém tiknutí nebo časovém intervalu. Takto to může vypadat:
+
+```javascript
+let id = setInterval(() => {
+  //move the enemy on the y axis
+  enemy.y += 10;
+})
+```
+
+## Herní smyčka
+
+Herní smyčka je koncept, který je v podstatě funkcí vyvolávanou v pravidelných intervalech. Nazývá se herní smyčka, protože vše, co by mělo být viditelné pro uživatele, je vykresleno v této smyčce. Herní smyčka využívá všechny herní objekty, které jsou součástí hry, a vykresluje je, pokud z nějakého důvodu již nejsou součástí hry. Například pokud je objekt nepřítel, který byl zasažen laserem a explodoval, již není součástí aktuální herní smyčky (o tom se dozvíte více v dalších lekcích).
+
+Takto může typická herní smyčka vypadat, vyjádřená v kódu:
+
+```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);
+```
+
+Výše uvedená smyčka je vyvolávána každých `200` milisekund, aby znovu vykreslila plátno. Máte možnost zvolit nejlepší interval, který dává smysl pro vaši hru.
+
+## Pokračování vesmírné hry
+
+Vezmete existující kód a rozšíříte ho. Buď začněte s kódem, který jste dokončili během části I, nebo použijte kód z [části II - startovací](../../../../6-space-game/3-moving-elements-around/your-work).
+
+- **Pohyb hrdiny**: přidáte kód, který zajistí, že můžete hrdinu pohybovat pomocí šipek.
+- **Pohyb nepřátel**: také budete muset přidat kód, který zajistí, že se nepřátelé pohybují shora dolů v daném tempu.
+
+## Doporučené kroky
+
+Najděte soubory, které byly vytvořeny pro vás ve složce `your-work`. Měla by obsahovat následující:
+
+```bash
+-| assets
+  -| enemyShip.png
+  -| player.png
+-| index.html
+-| app.js
+-| package.json
+```
+
+Svůj projekt spustíte ve složce `your_work` zadáním:
+
+```bash
+cd your-work
+npm start
+```
+
+Výše uvedené spustí HTTP server na adrese `http://localhost:5000`. Otevřete prohlížeč a zadejte tuto adresu, právě teď by měl zobrazit hrdinu a všechny nepřátele; zatím se nic nepohybuje!
+
+### Přidání kódu
+
+1. **Přidejte dedikované objekty** pro `hero`, `enemy` a `game object`, měly by mít vlastnosti `x` a `y`. (Pamatujte na část o [dědičnosti nebo kompozici](../README.md)).
+
+   *TIP* `game object` by měl být ten, který má `x` a `y` a schopnost vykreslit se na plátno.
+
+   >tip: začněte přidáním nové třídy GameObject s jejím konstruktorem, jak je uvedeno níže, a poté ji vykreslete na plátno:
+  
+    ```javascript
+        
+    class GameObject {
+      constructor(x, y) {
+        this.x = x;
+        this.y = y;
+        this.dead = false;
+        this.type = "";
+        this.width = 0;
+        this.height = 0;
+        this.img = undefined;
+      }
+    
+      draw(ctx) {
+        ctx.drawImage(this.img, this.x, this.y, this.width, this.height);
+      }
+    }
+    ```
+
+    Nyní rozšiřte tento GameObject, abyste vytvořili Hero a Enemy.
+    
+    ```javascript
+    class Hero extends GameObject {
+      constructor(x, y) {
+        ...it needs an x, y, type, and speed
+      }
+    }
+    ```
+
+    ```javascript
+    class Enemy extends GameObject {
+      constructor(x, y) {
+        super(x, y);
+        (this.width = 98), (this.height = 50);
+        this.type = "Enemy";
+        let id = setInterval(() => {
+          if (this.y < canvas.height - this.height) {
+            this.y += 5;
+          } else {
+            console.log('Stopped at', this.y)
+            clearInterval(id);
+          }
+        }, 300)
+      }
+    }
+    ```
+
+2. **Přidejte zpracování událostí kláves** pro navigaci (pohyb hrdiny nahoru/dolů vlevo/vpravo)
+
+   *PAMATUJTE* je to kartézský systém, levý horní roh je `0,0`. Také nezapomeňte přidat kód pro zastavení *výchozího chování*.
+
+   >tip: vytvořte svou funkci onKeyDown a připojte ji k oknu:
+
+   ```javascript
+    let onKeyDown = function (e) {
+	      console.log(e.keyCode);
+	        ...add the code from the lesson above to stop default behavior
+	      }
+    };
+
+    window.addEventListener("keydown", onKeyDown);
+   ```
+    
+   Zkontrolujte konzoli svého prohlížeče v tomto bodě a sledujte zaznamenané stisky kláves.
+
+3. **Implementujte** [Pub sub pattern](../README.md), což udrží váš kód čistý, jak budete pokračovat v dalších částech.
+
+   Pro tuto poslední část můžete:
+
+   1. **Přidat posluchač událostí** na okno:
+
+       ```javascript
+        window.addEventListener("keyup", (evt) => {
+          if (evt.key === "ArrowUp") {
+            eventEmitter.emit(Messages.KEY_EVENT_UP);
+          } else if (evt.key === "ArrowDown") {
+            eventEmitter.emit(Messages.KEY_EVENT_DOWN);
+          } else if (evt.key === "ArrowLeft") {
+            eventEmitter.emit(Messages.KEY_EVENT_LEFT);
+          } else if (evt.key === "ArrowRight") {
+            eventEmitter.emit(Messages.KEY_EVENT_RIGHT);
+          }
+        });
+        ```
+
+    1. **Vytvořit třídu EventEmitter** pro publikování a odběr zpráv:
+
+        ```javascript
+        class EventEmitter {
+          constructor() {
+            this.listeners = {};
+          }
+        
+          on(message, listener) {
+            if (!this.listeners[message]) {
+              this.listeners[message] = [];
+            }
+            this.listeners[message].push(listener);
+          }
+        
+          emit(message, payload = null) {
+            if (this.listeners[message]) {
+              this.listeners[message].forEach((l) => l(message, payload));
+            }
+          }
+        }
+        ```
+
+    1. **Přidat konstanty** a nastavit 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. **Inicializovat hru**
+
+    ```javascript
+    function initGame() {
+      gameObjects = [];
+      createEnemies();
+      createHero();
+    
+      eventEmitter.on(Messages.KEY_EVENT_UP, () => {
+        hero.y -=5 ;
+      })
+    
+      eventEmitter.on(Messages.KEY_EVENT_DOWN, () => {
+        hero.y += 5;
+      });
+    
+      eventEmitter.on(Messages.KEY_EVENT_LEFT, () => {
+        hero.x -= 5;
+      });
+    
+      eventEmitter.on(Messages.KEY_EVENT_RIGHT, () => {
+        hero.x += 5;
+      });
+    }
+    ```
+
+1. **Nastavit herní smyčku**
+
+   Refaktorujte funkci window.onload, aby inicializovala hru a nastavila herní smyčku na vhodný interval. Také přidáte laserový paprsek:
+
+    ```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. **Přidejte kód** pro pohyb nepřátel v určitém intervalu
+
+    Refaktorujte funkci `createEnemies()`, aby vytvořila nepřátele a přidala je do nové třídy gameObjects:
+
+    ```javascript
+    function createEnemies() {
+      const MONSTER_TOTAL = 5;
+      const MONSTER_WIDTH = MONSTER_TOTAL * 98;
+      const START_X = (canvas.width - MONSTER_WIDTH) / 2;
+      const STOP_X = START_X + MONSTER_WIDTH;
+    
+      for (let x = START_X; x < STOP_X; x += 98) {
+        for (let y = 0; y < 50 * 5; y += 50) {
+          const enemy = new Enemy(x, y);
+          enemy.img = enemyImg;
+          gameObjects.push(enemy);
+        }
+      }
+    }
+    ```
+    
+    a přidejte funkci `createHero()`, která provede podobný proces pro hrdinu.
+    
+    ```javascript
+    function createHero() {
+      hero = new Hero(
+        canvas.width / 2 - 45,
+        canvas.height - canvas.height / 4
+      );
+      hero.img = heroImg;
+      gameObjects.push(hero);
+    }
+    ```
+
+    a nakonec přidejte funkci `drawGameObjects()`, která zahájí vykreslování:
+
+    ```javascript
+    function drawGameObjects(ctx) {
+      gameObjects.forEach(go => go.draw(ctx));
+    }
+    ```
+
+    Vaši nepřátelé by měli začít postupovat na vaši vesmírnou loď!
+
+---
+
+## 🚀 Výzva
+
+Jak vidíte, váš kód se může proměnit v "špagetový kód", když začnete přidávat funkce, proměnné a třídy. Jak můžete lépe organizovat svůj kód, aby byl čitelnější? Navrhněte systém pro organizaci svého kódu, i když stále zůstává v jednom souboru.
+
+## Kvíz po přednášce
+
+[Kvíz po přednášce](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/34)
+
+## Přehled a samostudium
+
+I když píšeme naši hru bez použití frameworků, existuje mnoho JavaScriptových frameworků pro vývoj her na plátně. Udělejte si čas na [čtení o těchto](https://github.com/collections/javascript-game-engines).
+
+## Úkol
+
+[Okomentujte svůj kód](assignment.md)
+
+---
+
+**Prohlášení**:  
+Tento dokument byl přeložen pomocí služby pro automatický překlad [Co-op Translator](https://github.com/Azure/co-op-translator). Ačkoli se snažíme o přesnost, mějte prosím na paměti, že automatické překlady mohou obsahovat chyby nebo nepřesnosti. Původní dokument v jeho původním jazyce by měl být považován za autoritativní zdroj. Pro důležité informace doporučujeme profesionální lidský překlad. Neodpovídáme za žádné nedorozumění nebo nesprávné interpretace vyplývající z použití tohoto překladu.
\ No newline at end of file
diff --git a/translations/cs/6-space-game/3-moving-elements-around/assignment.md b/translations/cs/6-space-game/3-moving-elements-around/assignment.md
new file mode 100644
index 00000000..0e29cb21
--- /dev/null
+++ b/translations/cs/6-space-game/3-moving-elements-around/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "ccfcd8c2932761359fbaff3d6b01ace4",
+  "translation_date": "2025-08-28T03:54:19+00:00",
+  "source_file": "6-space-game/3-moving-elements-around/assignment.md",
+  "language_code": "cs"
+}
+-->
+# Komentujte svůj kód
+
+## Pokyny
+
+Projděte si svůj aktuální soubor /app.js ve složce hry a najděte způsoby, jak jej okomentovat a uspořádat. Je velmi snadné, aby se kód stal nepřehledným, a teď je skvělá příležitost přidat komentáře, abyste zajistili, že váš kód bude čitelný a budete jej moci později snadno použít.
+
+## Hodnocení
+
+| Kritéria | Vynikající                                                        | Dostatečné                          | Vyžaduje zlepšení                                              |
+| -------- | ----------------------------------------------------------------- | ----------------------------------- | -------------------------------------------------------------- |
+|          | Kód v `app.js` je plně okomentovaný a uspořádaný do logických bloků | Kód v `app.js` je dostatečně okomentovaný | Kód v `app.js` je poněkud neuspořádaný a postrádá kvalitní komentáře |
+
+---
+
+**Prohlášení**:  
+Tento dokument byl přeložen pomocí služby pro automatický překlad [Co-op Translator](https://github.com/Azure/co-op-translator). Ačkoli se snažíme o přesnost, mějte na paměti, že automatické překlady mohou obsahovat chyby nebo nepřesnosti. Původní dokument v jeho původním jazyce by měl být považován za autoritativní zdroj. Pro důležité informace se doporučuje profesionální lidský překlad. Neodpovídáme za žádné nedorozumění nebo nesprávné interpretace vyplývající z použití tohoto překladu.
\ No newline at end of file
diff --git a/translations/cs/6-space-game/4-collision-detection/README.md b/translations/cs/6-space-game/4-collision-detection/README.md
new file mode 100644
index 00000000..36c5dcd2
--- /dev/null
+++ b/translations/cs/6-space-game/4-collision-detection/README.md
@@ -0,0 +1,311 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "2e83e38c35dc003f046d7cc0bbfd4920",
+  "translation_date": "2025-08-28T03:57:28+00:00",
+  "source_file": "6-space-game/4-collision-detection/README.md",
+  "language_code": "cs"
+}
+-->
+# Vytvořte vesmírnou hru, část 4: Přidání laseru a detekce kolizí
+
+## Kvíz před lekcí
+
+[Kvíz před lekcí](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/35)
+
+V této lekci se naučíte střílet lasery pomocí JavaScriptu! Do naší hry přidáme dvě věci:
+
+- **Laser**: tento laser bude vystřelen z lodi vašeho hrdiny a bude se pohybovat vertikálně nahoru
+- **Detekce kolizí**, jako součást implementace schopnosti *střílet* přidáme také několik herních pravidel:
+   - **Laser zasáhne nepřítele**: Nepřítel zemře, pokud ho zasáhne laser
+   - **Laser zasáhne horní část obrazovky**: Laser bude zničen, pokud zasáhne horní část obrazovky
+   - **Kolize nepřítele a hrdiny**: Nepřítel i hrdina budou zničeni, pokud do sebe narazí
+   - **Nepřítel zasáhne spodní část obrazovky**: Nepřítel i hrdina budou zničeni, pokud nepřítel zasáhne spodní část obrazovky
+
+Stručně řečeno, vy -- *hrdina* -- musíte zasáhnout všechny nepřátele laserem, než se dostanou na spodní část obrazovky.
+
+✅ Udělejte si malý průzkum o úplně první počítačové hře, která byla kdy napsána. Jaká byla její funkčnost?
+
+Buďme hrdinové společně!
+
+## Detekce kolizí
+
+Jak provádíme detekci kolizí? Musíme si představit herní objekty jako obdélníky, které se pohybují. Proč? Protože obrázek použitý k vykreslení herního objektu je obdélník: má `x`, `y`, `šířku` a `výšku`.
+
+Pokud se dva obdélníky, například hrdina a nepřítel, *protnou*, dojde ke kolizi. Co by se mělo stát, záleží na pravidlech hry. K implementaci detekce kolizí tedy potřebujete následující:
+
+1. Způsob, jak získat obdélníkové vyjádření herního objektu, například takto:
+
+   ```javascript
+   rectFromGameObject() {
+     return {
+       top: this.y,
+       left: this.x,
+       bottom: this.y + this.height,
+       right: this.x + this.width
+     }
+   }
+   ```
+
+2. Porovnávací funkci, která může vypadat takto:
+
+   ```javascript
+   function intersectRect(r1, r2) {
+     return !(r2.left > r1.right ||
+       r2.right < r1.left ||
+       r2.top > r1.bottom ||
+       r2.bottom < r1.top);
+   }
+   ```
+
+## Jak ničíme objekty
+
+Abychom mohli ve hře něco zničit, musíme hře sdělit, že tento objekt již nemá být vykreslen v herní smyčce, která se spouští v určitém intervalu. Jedním ze způsobů je označit herní objekt jako *mrtvý*, když se něco stane, například takto:
+
+```javascript
+// collision happened
+enemy.dead = true
+```
+
+Poté můžete *mrtvé* objekty odstranit před opětovným vykreslením obrazovky, například takto:
+
+```javascript
+gameObjects = gameObject.filter(go => !go.dead);
+```
+
+## Jak vystřelit laser
+
+Vystřelení laseru znamená reagovat na klávesovou událost a vytvořit objekt, který se pohybuje určitým směrem. Musíme tedy provést následující kroky:
+
+1. **Vytvořit laserový objekt**: z horní části lodi našeho hrdiny, který se po vytvoření začne pohybovat směrem nahoru k horní části obrazovky.
+2. **Přiřadit kód ke klávesové události**: musíme vybrat klávesu na klávesnici, která bude představovat střelbu laseru hráčem.
+3. **Vytvořit herní objekt, který vypadá jako laser**, když je klávesa stisknuta.
+
+## Časový limit pro laser
+
+Laser musí být vystřelen pokaždé, když stisknete klávesu, například *mezerník*. Aby hra nevytvářela příliš mnoho laserů v krátkém čase, musíme to opravit. Řešením je implementace tzv. *časového limitu*, časovače, který zajistí, že laser může být vystřelen jen v určitých intervalech. To můžete implementovat následujícím způsobem:
+
+```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.
+    }
+  }
+}
+```
+
+✅ Podívejte se na lekci 1 v sérii vesmírných her, abyste si připomněli, jak fungují *časové limity*.
+
+## Co vytvořit
+
+Vezmete stávající kód (který byste měli vyčistit a refaktorovat) z předchozí lekce a rozšíříte ho. Buď začněte s kódem z části II, nebo použijte kód z [části III - startovací](../../../../6-space-game/4-collision-detection/your-work).
+
+> tip: laser, se kterým budete pracovat, je již ve vaší složce s prostředky a je odkazován vaším kódem
+
+- **Přidejte detekci kolizí**, když laser narazí na něco, měla by platit následující pravidla:
+   1. **Laser zasáhne nepřítele**: nepřítel zemře, pokud ho zasáhne laser
+   2. **Laser zasáhne horní část obrazovky**: laser bude zničen, pokud zasáhne horní část obrazovky
+   3. **Kolize nepřítele a hrdiny**: nepřítel i hrdina budou zničeni, pokud do sebe narazí
+   4. **Nepřítel zasáhne spodní část obrazovky**: nepřítel i hrdina budou zničeni, pokud nepřítel zasáhne spodní část obrazovky
+
+## Doporučené kroky
+
+Najděte soubory, které byly pro vás vytvořeny ve složce `your-work`. Měla by obsahovat následující:
+
+```bash
+-| assets
+  -| enemyShip.png
+  -| player.png
+  -| laserRed.png
+-| index.html
+-| app.js
+-| package.json
+```
+
+Spusťte svůj projekt ve složce `your_work` zadáním:
+
+```bash
+cd your-work
+npm start
+```
+
+Tím se spustí HTTP server na adrese `http://localhost:5000`. Otevřete prohlížeč a zadejte tuto adresu, aktuálně by se měl zobrazit hrdina a všichni nepřátelé, nic se však zatím nehýbe :).
+
+### Přidání kódu
+
+1. **Nastavte obdélníkové vyjádření svého herního objektu pro zpracování kolizí**. Následující kód umožňuje získat obdélníkové vyjádření `GameObject`. Upravte svou třídu GameObject, aby ji rozšířila:
+
+    ```javascript
+    rectFromGameObject() {
+        return {
+          top: this.y,
+          left: this.x,
+          bottom: this.y + this.height,
+          right: this.x + this.width,
+        };
+      }
+    ```
+
+2. **Přidejte kód, který kontroluje kolize**. Toto bude nová funkce, která testuje, zda se dva obdélníky protínají:
+
+    ```javascript
+    function intersectRect(r1, r2) {
+      return !(
+        r2.left > r1.right ||
+        r2.right < r1.left ||
+        r2.top > r1.bottom ||
+        r2.bottom < r1.top
+      );
+    }
+    ```
+
+3. **Přidejte schopnost střílet laser**
+   1. **Přidejte zprávu pro klávesovou událost**. Klávesa *mezerník* by měla vytvořit laser těsně nad lodí hrdiny. Přidejte tři konstanty do objektu Messages:
+
+       ```javascript
+        KEY_EVENT_SPACE: "KEY_EVENT_SPACE",
+        COLLISION_ENEMY_LASER: "COLLISION_ENEMY_LASER",
+        COLLISION_ENEMY_HERO: "COLLISION_ENEMY_HERO",
+       ```
+
+   1. **Zpracujte klávesu mezerník**. Upravte funkci `window.addEventListener` pro událost keyup, aby zpracovávala mezerník:
+
+      ```javascript
+        } else if(evt.keyCode === 32) {
+          eventEmitter.emit(Messages.KEY_EVENT_SPACE);
+        }
+      ```
+
+    1. **Přidejte posluchače**. Upravte funkci `initGame()`, aby hrdina mohl střílet, když je stisknut mezerník:
+
+       ```javascript
+       eventEmitter.on(Messages.KEY_EVENT_SPACE, () => {
+        if (hero.canFire()) {
+          hero.fire();
+        }
+       ```
+
+       a přidejte novou funkci `eventEmitter.on()`, aby se zajistilo chování, když nepřítel narazí na laser:
+
+          ```javascript
+          eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => {
+            first.dead = true;
+            second.dead = true;
+          })
+          ```
+
+   1. **Pohyb objektu**, zajistěte, aby se laser postupně pohyboval k horní části obrazovky. Vytvoříte novou třídu Laser, která rozšiřuje `GameObject`, stejně jako dříve: 
+   
+      ```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. **Zpracování kolizí**, implementujte pravidla kolizí pro laser. Přidejte funkci `updateGameObjects()`, která testuje kolidující objekty:
+
+      ```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);
+      }  
+      ```
+
+      Ujistěte se, že jste přidali `updateGameObjects()` do herní smyčky v `window.onload`.
+
+   4. **Implementujte časový limit** pro laser, aby mohl být vystřelen jen v určitých intervalech.
+
+      Nakonec upravte třídu Hero, aby mohla používat časový limit:
+
+       ```javascript
+      class Hero extends GameObject {
+        constructor(x, y) {
+          super(x, y);
+          (this.width = 99), (this.height = 75);
+          this.type = "Hero";
+          this.speed = { x: 0, y: 0 };
+          this.cooldown = 0;
+        }
+        fire() {
+          gameObjects.push(new Laser(this.x + 45, this.y - 10));
+          this.cooldown = 500;
+    
+          let id = setInterval(() => {
+            if (this.cooldown > 0) {
+              this.cooldown -= 100;
+            } else {
+              clearInterval(id);
+            }
+          }, 200);
+        }
+        canFire() {
+          return this.cooldown === 0;
+        }
+      }
+      ```
+
+V tomto bodě má vaše hra určitou funkčnost! Můžete se pohybovat pomocí šipek, střílet laser mezerníkem a nepřátelé zmizí, když je zasáhnete. Skvělá práce!
+
+---
+
+## 🚀 Výzva
+
+Přidejte explozi! Podívejte se na herní prostředky v [repozitáři Space Art](../../../../6-space-game/solution/spaceArt/readme.txt) a zkuste přidat explozi, když laser zasáhne mimozemšťana.
+
+## Kvíz po lekci
+
+[Kvíz po lekci](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/36)
+
+## Přehled a samostudium
+
+Experimentujte s intervaly ve své hře. Co se stane, když je změníte? Přečtěte si více o [časových událostech v JavaScriptu](https://www.freecodecamp.org/news/javascript-timing-events-settimeout-and-setinterval/).
+
+## Zadání
+
+[Prozkoumejte kolize](assignment.md)
+
+---
+
+**Prohlášení**:  
+Tento dokument byl přeložen pomocí služby pro automatický překlad [Co-op Translator](https://github.com/Azure/co-op-translator). Ačkoli se snažíme o přesnost, mějte prosím na paměti, že automatické překlady mohou obsahovat chyby nebo nepřesnosti. Původní dokument v jeho původním jazyce by měl být považován za závazný zdroj. Pro důležité informace doporučujeme profesionální lidský překlad. Neodpovídáme za žádná nedorozumění nebo nesprávné interpretace vyplývající z použití tohoto překladu.
\ No newline at end of file
diff --git a/translations/cs/6-space-game/4-collision-detection/assignment.md b/translations/cs/6-space-game/4-collision-detection/assignment.md
new file mode 100644
index 00000000..e4cf7938
--- /dev/null
+++ b/translations/cs/6-space-game/4-collision-detection/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "8a0a097b45e7c75a611e2795e4013f16",
+  "translation_date": "2025-08-28T03:58:14+00:00",
+  "source_file": "6-space-game/4-collision-detection/assignment.md",
+  "language_code": "cs"
+}
+-->
+# Prozkoumejte Kolize
+
+## Instrukce
+
+Abyste lépe pochopili, jak kolize fungují, vytvořte velmi malou hru s několika objekty, které se srážejí. Nechte je pohybovat pomocí stisků kláves nebo kliknutí myší a zajistěte, aby se při srážce s jedním z objektů něco stalo. Může to být například meteorit narážející do Země nebo autíčka na autodromu. Buďte kreativní!
+
+## Hodnocení
+
+| Kritéria | Vynikající                                                                                                               | Dostatečné                    | Potřebuje zlepšení |
+| -------- | ------------------------------------------------------------------------------------------------------------------------ | ----------------------------- | ------------------ |
+|          | Je vytvořen kompletní funkční vzorový kód, objekty jsou vykresleny na plátno, dochází k základním kolizím a reakcím       | Kód je v nějakém ohledu neúplný | Kód nefunguje správně |
+
+---
+
+**Prohlášení**:  
+Tento dokument byl přeložen pomocí služby AI pro překlady [Co-op Translator](https://github.com/Azure/co-op-translator). Ačkoli se snažíme o přesnost, mějte prosím na paměti, že automatizované překlady mohou obsahovat chyby nebo nepřesnosti. Původní dokument v jeho původním jazyce by měl být považován za autoritativní zdroj. Pro důležité informace se doporučuje profesionální lidský překlad. Neodpovídáme za žádná nedorozumění nebo nesprávné interpretace vyplývající z použití tohoto překladu.
\ No newline at end of file
diff --git a/translations/cs/6-space-game/4-collision-detection/solution/README.md b/translations/cs/6-space-game/4-collision-detection/solution/README.md
new file mode 100644
index 00000000..01344432
--- /dev/null
+++ b/translations/cs/6-space-game/4-collision-detection/solution/README.md
@@ -0,0 +1,15 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "068cbb9b3c10a96d503f6cdd6c9ace8c",
+  "translation_date": "2025-08-28T03:58:31+00:00",
+  "source_file": "6-space-game/4-collision-detection/solution/README.md",
+  "language_code": "cs"
+}
+-->
+Toto je zástupný text, záměrně ponechaný prázdný
+
+---
+
+**Prohlášení**:  
+Tento dokument byl přeložen pomocí služby pro automatický překlad [Co-op Translator](https://github.com/Azure/co-op-translator). I když se snažíme o co největší přesnost, mějte prosím na paměti, že automatické překlady mohou obsahovat chyby nebo nepřesnosti. Původní dokument v jeho původním jazyce by měl být považován za závazný zdroj. Pro důležité informace doporučujeme profesionální lidský překlad. Neodpovídáme za žádná nedorozumění nebo nesprávné výklady vyplývající z použití tohoto překladu.
\ No newline at end of file
diff --git a/translations/cs/6-space-game/4-collision-detection/your-work/README.md b/translations/cs/6-space-game/4-collision-detection/your-work/README.md
new file mode 100644
index 00000000..049b6f60
--- /dev/null
+++ b/translations/cs/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-28T03:58:45+00:00",
+  "source_file": "6-space-game/4-collision-detection/your-work/README.md",
+  "language_code": "cs"
+}
+-->
+Toto je zástupný text, záměrně ponechaný prázdný
+
+---
+
+**Prohlášení**:  
+Tento dokument byl přeložen pomocí služby pro automatický překlad [Co-op Translator](https://github.com/Azure/co-op-translator). I když se snažíme o přesnost, mějte prosím na paměti, že automatické překlady mohou obsahovat chyby nebo nepřesnosti. Původní dokument v jeho původním jazyce by měl být považován za autoritativní zdroj. Pro důležité informace doporučujeme profesionální lidský překlad. Neodpovídáme za žádná nedorozumění nebo nesprávné interpretace vyplývající z použití tohoto překladu.
\ No newline at end of file
diff --git a/translations/cs/6-space-game/5-keeping-score/README.md b/translations/cs/6-space-game/5-keeping-score/README.md
new file mode 100644
index 00000000..cc6bbe4e
--- /dev/null
+++ b/translations/cs/6-space-game/5-keeping-score/README.md
@@ -0,0 +1,203 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "4e8250db84b027c9ff816b4e4c093457",
+  "translation_date": "2025-08-28T03:55:08+00:00",
+  "source_file": "6-space-game/5-keeping-score/README.md",
+  "language_code": "cs"
+}
+-->
+# Vytvořte vesmírnou hru, část 5: Skóre a životy
+
+## Kvíz před lekcí
+
+[Kvíz před lekcí](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/37)
+
+V této lekci se naučíte, jak přidat skóre do hry a počítat životy.
+
+## Zobrazení textu na obrazovce
+
+Abyste mohli zobrazit skóre hry na obrazovce, musíte vědět, jak umístit text na plátno. Odpovědí je použití metody `fillText()` na objektu canvas. Můžete také ovládat další aspekty, jako je použití konkrétního fontu, barvy textu nebo jeho zarovnání (vlevo, vpravo, na střed). Níže je ukázka kódu, který vykresluje text na obrazovce.
+
+```javascript
+ctx.font = "30px Arial";
+ctx.fillStyle = "red";
+ctx.textAlign = "right";
+ctx.fillText("show this on the screen", 0, 0);
+```
+
+✅ Přečtěte si více o [přidávání textu na plátno](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_text) a klidně si svůj text upravte, aby vypadal lépe!
+
+## Život jako herní koncept
+
+Koncept života ve hře je pouze číslo. V kontextu vesmírné hry je běžné přiřadit určitý počet životů, které se odečítají jeden po druhém, když vaše loď utrpí poškození. Je hezké, pokud můžete zobrazit grafickou reprezentaci, například malé lodě nebo srdce, místo pouhého čísla.
+
+## Co vytvořit
+
+Přidejte do své hry následující:
+
+- **Herní skóre**: Za každou zničenou nepřátelskou loď by měl hrdina získat body, doporučujeme 100 bodů za loď. Herní skóre by mělo být zobrazeno vlevo dole.
+- **Životy**: Vaše loď má tři životy. Ztratíte jeden život pokaždé, když do vás narazí nepřátelská loď. Počet životů by měl být zobrazen vpravo dole a měl by být tvořen následující grafikou ![obrázek života](../../../../translated_images/life.6fb9f50d53ee0413cd91aa411f7c296e10a1a6de5c4a4197c718b49bf7d63ebf.cs.png).
+
+## Doporučené kroky
+
+Najděte soubory, které byly vytvořeny pro vás ve složce `your-work`. Měly by obsahovat následující:
+
+```bash
+-| assets
+  -| enemyShip.png
+  -| player.png
+  -| laserRed.png
+-| index.html
+-| app.js
+-| package.json
+```
+
+Spusťte svůj projekt ve složce `your_work` zadáním:
+
+```bash
+cd your-work
+npm start
+```
+
+Tím se spustí HTTP server na adrese `http://localhost:5000`. Otevřete prohlížeč a zadejte tuto adresu. V tuto chvíli by se měl zobrazit hrdina a všichni nepřátelé, a když stisknete šipky vlevo a vpravo, hrdina se pohybuje a může sestřelovat nepřátele.
+
+### Přidání kódu
+
+1. **Zkopírujte potřebné soubory** ze složky `solution/assets/` do složky `your-work`; přidáte soubor `life.png`. Přidejte `lifeImg` do funkce `window.onload`:
+
+    ```javascript
+    lifeImg = await loadTexture("assets/life.png");
+    ```
+
+1. Přidejte `lifeImg` do seznamu aktiv:
+
+    ```javascript
+    let heroImg,
+    ...
+    lifeImg,
+    ...
+    eventEmitter = new EventEmitter();
+    ```
+  
+2. **Přidejte proměnné**. Přidejte kód, který reprezentuje vaše celkové skóre (0) a zbývající životy (3), a zobrazte tyto hodnoty na obrazovce.
+
+3. **Rozšiřte funkci `updateGameObjects()`**. Rozšiřte funkci `updateGameObjects()`, aby zpracovávala kolize s nepřáteli:
+
+    ```javascript
+    enemies.forEach(enemy => {
+        const heroRect = hero.rectFromGameObject();
+        if (intersectRect(heroRect, enemy.rectFromGameObject())) {
+          eventEmitter.emit(Messages.COLLISION_ENEMY_HERO, { enemy });
+        }
+      })
+    ```
+
+4. **Přidejte `life` a `points`**. 
+   1. **Inicializujte proměnné**. Pod `this.cooldown = 0` ve třídě `Hero` nastavte životy a body:
+
+        ```javascript
+        this.life = 3;
+        this.points = 0;
+        ```
+
+   1. **Zobrazte proměnné na obrazovce**. Vykreslete tyto hodnoty na obrazovku:
+
+        ```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. **Přidejte metody do herní smyčky**. Ujistěte se, že tyto funkce přidáte do funkce `window.onload` pod `updateGameObjects()`:
+
+        ```javascript
+        drawPoints();
+        drawLife();
+        ```
+
+1. **Implementujte herní pravidla**. Implementujte následující pravidla:
+
+   1. **Za každou kolizi hrdiny s nepřítelem** odečtěte jeden život.
+   
+      Rozšiřte třídu `Hero`, aby toto odečítání prováděla:
+
+        ```javascript
+        decrementLife() {
+          this.life--;
+          if (this.life === 0) {
+            this.dead = true;
+          }
+        }
+        ```
+
+   2. **Za každý laser, který zasáhne nepřítele**, přičtěte ke skóre 100 bodů.
+
+      Rozšiřte třídu `Hero`, aby toto přičítání prováděla:
+    
+        ```javascript
+          incrementPoints() {
+            this.points += 100;
+          }
+        ```
+
+        Přidejte tyto funkce do vašich 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();
+        });
+        ```
+
+✅ Udělejte si malý průzkum a zjistěte, jaké další hry byly vytvořeny pomocí JavaScriptu/Canvasu. Jaké mají společné rysy?
+
+Na konci této práce byste měli vidět malé lodě symbolizující životy vpravo dole, body vlevo dole a měli byste vidět, jak se počet životů snižuje při kolizích s nepřáteli a body přibývají při sestřelování nepřátel. Skvělá práce! Vaše hra je téměř hotová.
+
+---
+
+## 🚀 Výzva
+
+Váš kód je téměř hotový. Dokážete si představit své další kroky?
+
+## Kvíz po lekci
+
+[Kvíz po lekci](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/38)
+
+## Přehled a samostudium
+
+Prozkoumejte způsoby, jak můžete zvyšovat a snižovat herní skóre a životy. Existují zajímavé herní enginy, jako je [PlayFab](https://playfab.com). Jak by použití jednoho z nich mohlo vylepšit vaši hru?
+
+## Zadání
+
+[Postavte hru se skóre](assignment.md)
+
+---
+
+**Prohlášení**:  
+Tento dokument byl přeložen pomocí služby pro automatický překlad [Co-op Translator](https://github.com/Azure/co-op-translator). I když se snažíme o co největší přesnost, mějte prosím na paměti, že automatické překlady mohou obsahovat chyby nebo nepřesnosti. Původní dokument v jeho původním jazyce by měl být považován za závazný zdroj. Pro důležité informace doporučujeme profesionální lidský překlad. Neodpovídáme za žádná nedorozumění nebo nesprávné výklady vyplývající z použití tohoto překladu.
\ No newline at end of file
diff --git a/translations/cs/6-space-game/5-keeping-score/assignment.md b/translations/cs/6-space-game/5-keeping-score/assignment.md
new file mode 100644
index 00000000..a88781ce
--- /dev/null
+++ b/translations/cs/6-space-game/5-keeping-score/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "81f292dbda01685b91735e0398dc0504",
+  "translation_date": "2025-08-28T03:55:43+00:00",
+  "source_file": "6-space-game/5-keeping-score/assignment.md",
+  "language_code": "cs"
+}
+-->
+# Vytvořte bodovací hru
+
+## Instrukce
+
+Vytvořte hru, ve které kreativně zobrazíte životy a body. Jeden z návrhů je zobrazit životy jako srdce a body jako velké číslo ve spodní části obrazovky uprostřed. Podívejte se na [Zdarma herní zdroje](https://www.kenney.nl/)
+
+# Hodnocení
+
+| Kritéria | Vynikající             | Přiměřené                   | Vyžaduje zlepšení          |
+| -------- | ---------------------- | --------------------------- | -------------------------- |
+|          | kompletní hra je prezentována | hra je částečně prezentována | částečná hra obsahuje chyby |
+
+---
+
+**Prohlášení**:  
+Tento dokument byl přeložen pomocí služby pro automatický překlad [Co-op Translator](https://github.com/Azure/co-op-translator). Ačkoli se snažíme o přesnost, mějte prosím na paměti, že automatické překlady mohou obsahovat chyby nebo nepřesnosti. Původní dokument v jeho původním jazyce by měl být považován za závazný zdroj. Pro důležité informace doporučujeme profesionální lidský překlad. Neodpovídáme za žádná nedorozumění nebo nesprávné interpretace vyplývající z použití tohoto překladu.
\ No newline at end of file
diff --git a/translations/cs/6-space-game/5-keeping-score/solution/README.md b/translations/cs/6-space-game/5-keeping-score/solution/README.md
new file mode 100644
index 00000000..69180812
--- /dev/null
+++ b/translations/cs/6-space-game/5-keeping-score/solution/README.md
@@ -0,0 +1,15 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "068cbb9b3c10a96d503f6cdd6c9ace8c",
+  "translation_date": "2025-08-28T03:56:00+00:00",
+  "source_file": "6-space-game/5-keeping-score/solution/README.md",
+  "language_code": "cs"
+}
+-->
+Toto je zástupný text, záměrně ponechaný prázdný
+
+---
+
+**Prohlášení**:  
+Tento dokument byl přeložen pomocí služby pro automatický překlad [Co-op Translator](https://github.com/Azure/co-op-translator). Ačkoli se snažíme o přesnost, mějte prosím na paměti, že automatické překlady mohou obsahovat chyby nebo nepřesnosti. Původní dokument v jeho původním jazyce by měl být považován za autoritativní zdroj. Pro důležité informace doporučujeme profesionální lidský překlad. Neodpovídáme za žádné nedorozumění nebo nesprávné interpretace vyplývající z použití tohoto překladu.
\ No newline at end of file
diff --git a/translations/cs/6-space-game/5-keeping-score/your-work/README.md b/translations/cs/6-space-game/5-keeping-score/your-work/README.md
new file mode 100644
index 00000000..777a3add
--- /dev/null
+++ b/translations/cs/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-28T03:56:13+00:00",
+  "source_file": "6-space-game/5-keeping-score/your-work/README.md",
+  "language_code": "cs"
+}
+-->
+Toto je zástupný text, záměrně ponechaný prázdný
+
+---
+
+**Prohlášení**:  
+Tento dokument byl přeložen pomocí služby pro automatický překlad [Co-op Translator](https://github.com/Azure/co-op-translator). Ačkoli se snažíme o přesnost, mějte prosím na paměti, že automatické překlady mohou obsahovat chyby nebo nepřesnosti. Původní dokument v jeho původním jazyce by měl být považován za autoritativní zdroj. Pro důležité informace doporučujeme profesionální lidský překlad. Neodpovídáme za žádná nedorozumění nebo nesprávné interpretace vyplývající z použití tohoto překladu.
\ No newline at end of file
diff --git a/translations/cs/6-space-game/6-end-condition/README.md b/translations/cs/6-space-game/6-end-condition/README.md
new file mode 100644
index 00000000..fdbe02ed
--- /dev/null
+++ b/translations/cs/6-space-game/6-end-condition/README.md
@@ -0,0 +1,236 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "01336cddd638242e99b133614111ea40",
+  "translation_date": "2025-08-28T04:01:08+00:00",
+  "source_file": "6-space-game/6-end-condition/README.md",
+  "language_code": "cs"
+}
+-->
+# Vytvořte vesmírnou hru, část 6: Konec a restart
+
+## Kvíz před přednáškou
+
+[Kvíz před přednáškou](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/39)
+
+Existuje několik způsobů, jak vyjádřit *konečný stav* ve hře. Je na vás jako na tvůrci hry, abyste určili, proč hra skončila. Zde jsou některé důvody, pokud předpokládáme, že mluvíme o vesmírné hře, kterou jste dosud vytvářeli:
+
+- **Zničeno `N` nepřátelských lodí**: Je běžné, že pokud rozdělíte hru na různé úrovně, musíte zničit `N` nepřátelských lodí, abyste úroveň dokončili.
+- **Vaše loď byla zničena**: Existují hry, kde prohrajete, pokud je vaše loď zničena. Dalším běžným přístupem je koncept životů. Pokaždé, když je vaše loď zničena, odečte se jeden život. Jakmile ztratíte všechny životy, hra končí.
+- **Nasbíráno `N` bodů**: Dalším běžným konečným stavem je nasbírání bodů. Jak získáte body, je na vás, ale je běžné přiřadit body různým aktivitám, jako je zničení nepřátelské lodi nebo sbírání předmětů, které se objeví, když jsou zničeny.
+- **Dokončení úrovně**: To může zahrnovat několik podmínek, jako je zničení `X` nepřátelských lodí, nasbírání `Y` bodů nebo třeba získání konkrétního předmětu.
+
+## Restartování
+
+Pokud se lidem vaše hra líbí, pravděpodobně ji budou chtít hrát znovu. Jakmile hra skončí z jakéhokoliv důvodu, měli byste nabídnout možnost restartu.
+
+✅ Zamyslete se nad tím, za jakých podmínek podle vás hra končí, a jak jste vyzváni k restartu.
+
+## Co vytvořit
+
+Do své hry přidáte tyto pravidla:
+
+1. **Výhra ve hře**. Jakmile budou zničeny všechny nepřátelské lodě, vyhráváte hru. Navíc zobrazte nějakou zprávu o vítězství.
+1. **Restart**. Jakmile ztratíte všechny životy nebo vyhrajete hru, měli byste nabídnout možnost restartu hry. Pamatujte! Budete muset znovu inicializovat hru a vymazat předchozí stav hry.
+
+## Doporučené kroky
+
+Najděte soubory, které byly vytvořeny pro vás ve složce `your-work`. Měly by obsahovat následující:
+
+```bash
+-| assets
+  -| enemyShip.png
+  -| player.png
+  -| laserRed.png
+  -| life.png
+-| index.html
+-| app.js
+-| package.json
+```
+
+Spusťte svůj projekt ve složce `your_work` zadáním:
+
+```bash
+cd your-work
+npm start
+```
+
+Výše uvedené spustí HTTP server na adrese `http://localhost:5000`. Otevřete prohlížeč a zadejte tuto adresu. Vaše hra by měla být v hratelném stavu.
+
+> tip: abyste se vyhnuli varováním ve Visual Studio Code, upravte funkci `window.onload`, aby volala `gameLoopId` tak, jak je (bez `let`), a deklarujte `gameLoopId` na začátku souboru samostatně: `let gameLoopId;`
+
+### Přidání kódu
+
+1. **Sledování konečného stavu**. Přidejte kód, který sleduje počet nepřátel nebo zda byla hrdinská loď zničena, přidáním těchto dvou funkcí:
+
+    ```javascript
+    function isHeroDead() {
+      return hero.life <= 0;
+    }
+
+    function isEnemiesDead() {
+      const enemies = gameObjects.filter((go) => go.type === "Enemy" && !go.dead);
+      return enemies.length === 0;
+    }
+    ```
+
+1. **Přidání logiky do zpracování zpráv**. Upravte `eventEmitter`, aby zpracovával tyto podmínky:
+
+    ```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. **Přidání nových typů zpráv**. Přidejte tyto zprávy do objektu constants:
+
+    ```javascript
+    GAME_END_LOSS: "GAME_END_LOSS",
+    GAME_END_WIN: "GAME_END_WIN",
+    ```
+
+2. **Přidání restartovacího kódu**. Přidejte kód, který restartuje hru po stisknutí vybraného tlačítka.
+
+   1. **Poslouchejte stisk klávesy `Enter`**. Upravte eventListener okna, aby poslouchal tento stisk:
+
+    ```javascript
+     else if(evt.key === "Enter") {
+        eventEmitter.emit(Messages.KEY_EVENT_ENTER);
+      }
+    ```
+
+   1. **Přidání restartovací zprávy**. Přidejte tuto zprávu do constants Messages:
+
+        ```javascript
+        KEY_EVENT_ENTER: "KEY_EVENT_ENTER",
+        ```
+
+1. **Implementace pravidel hry**. Implementujte následující pravidla hry:
+
+   1. **Podmínka výhry hráče**. Když jsou zničeny všechny nepřátelské lodě, zobrazte zprávu o vítězství.
+
+      1. Nejprve vytvořte funkci `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. Vytvořte funkci `endGame()`:
+
+        ```javascript
+        function endGame(win) {
+          clearInterval(gameLoopId);
+        
+          // set a delay so we are sure any paints have finished
+          setTimeout(() => {
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            ctx.fillStyle = "black";
+            ctx.fillRect(0, 0, canvas.width, canvas.height);
+            if (win) {
+              displayMessage(
+                "Victory!!! Pew Pew... - Press [Enter] to start a new game Captain Pew Pew",
+                "green"
+              );
+            } else {
+              displayMessage(
+                "You died !!! Press [Enter] to start a new game Captain Pew Pew"
+              );
+            }
+          }, 200)  
+        }
+        ```
+
+   1. **Logika restartu**. Když jsou ztraceny všechny životy nebo hráč vyhrál hru, zobrazte, že hru lze restartovat. Navíc restartujte hru, když je stisknuta klávesa *restart* (můžete rozhodnout, která klávesa bude mapována na restart).
+
+      1. Vytvořte funkci `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. Přidejte volání `eventEmitter` pro resetování hry v `initGame()`:
+
+        ```javascript
+        eventEmitter.on(Messages.KEY_EVENT_ENTER, () => {
+          resetGame();
+        });
+        ```
+
+     1. Přidejte funkci `clear()` do EventEmitter:
+
+        ```javascript
+        clear() {
+          this.listeners = {};
+        }
+        ```
+
+👽 💥 🚀 Gratulujeme, kapitáne! Vaše hra je hotová! Skvělá práce! 🚀 💥 👽
+
+---
+
+## 🚀 Výzva
+
+Přidejte zvuk! Dokážete přidat zvuk, který zlepší herní zážitek, třeba při zásahu laserem, smrti hrdiny nebo vítězství? Podívejte se na tento [sandbox](https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_audio_play), abyste se naučili, jak přehrávat zvuk pomocí JavaScriptu.
+
+## Kvíz po přednášce
+
+[Kvíz po přednášce](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/40)
+
+## Přehled a samostudium
+
+Vaším úkolem je vytvořit novou ukázkovou hru, takže prozkoumejte některé zajímavé hry, abyste zjistili, jaký typ hry byste mohli vytvořit.
+
+## Úkol
+
+[Vytvořte ukázkovou hru](assignment.md)
+
+---
+
+**Prohlášení**:  
+Tento dokument byl přeložen pomocí služby pro automatizovaný překlad [Co-op Translator](https://github.com/Azure/co-op-translator). Ačkoli se snažíme o přesnost, mějte na paměti, že automatizované překlady mohou obsahovat chyby nebo nepřesnosti. Původní dokument v jeho původním jazyce by měl být považován za autoritativní zdroj. Pro důležité informace se doporučuje profesionální lidský překlad. Neodpovídáme za žádná nedorozumění nebo nesprávné interpretace vyplývající z použití tohoto překladu.
\ No newline at end of file
diff --git a/translations/cs/6-space-game/6-end-condition/assignment.md b/translations/cs/6-space-game/6-end-condition/assignment.md
new file mode 100644
index 00000000..9d4538d8
--- /dev/null
+++ b/translations/cs/6-space-game/6-end-condition/assignment.md
@@ -0,0 +1,33 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "24201cf428c7edba1ccec2a78a0dd8f8",
+  "translation_date": "2025-08-28T04:01:41+00:00",
+  "source_file": "6-space-game/6-end-condition/assignment.md",
+  "language_code": "cs"
+}
+-->
+# Vytvořte ukázkovou hru
+
+## Pokyny
+
+Zkuste vytvořit malou hru, ve které si procvičíte různé koncové podmínky. Střídejte mezi dosažením určitého počtu bodů, ztrátou všech životů hrdiny nebo poražením všech monster. Vytvořte něco jednoduchého, například dobrodružnou hru založenou na konzoli. Použijte níže uvedený průběh hry jako inspiraci:
+
+```
+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****
+```
+
+## Hodnocení
+
+| Kritéria | Vynikající             | Přiměřené                   | Potřebuje zlepšení         |
+| -------- | ---------------------- | --------------------------- | -------------------------- |
+|          | celá hra je prezentována | hra je částečně prezentována | částečná hra obsahuje chyby |
+
+---
+
+**Prohlášení**:  
+Tento dokument byl přeložen pomocí služby pro automatický překlad [Co-op Translator](https://github.com/Azure/co-op-translator). Ačkoli se snažíme o přesnost, mějte prosím na paměti, že automatické překlady mohou obsahovat chyby nebo nepřesnosti. Původní dokument v jeho původním jazyce by měl být považován za autoritativní zdroj. Pro důležité informace se doporučuje profesionální lidský překlad. Neodpovídáme za žádná nedorozumění nebo nesprávné interpretace vyplývající z použití tohoto překladu.
\ No newline at end of file
diff --git a/translations/cs/6-space-game/6-end-condition/solution/README.md b/translations/cs/6-space-game/6-end-condition/solution/README.md
new file mode 100644
index 00000000..0c2287a0
--- /dev/null
+++ b/translations/cs/6-space-game/6-end-condition/solution/README.md
@@ -0,0 +1,15 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "068cbb9b3c10a96d503f6cdd6c9ace8c",
+  "translation_date": "2025-08-28T04:01:57+00:00",
+  "source_file": "6-space-game/6-end-condition/solution/README.md",
+  "language_code": "cs"
+}
+-->
+Toto je zástupný text, záměrně ponechaný prázdný
+
+---
+
+**Prohlášení**:  
+Tento dokument byl přeložen pomocí služby pro automatický překlad [Co-op Translator](https://github.com/Azure/co-op-translator). I když se snažíme o přesnost, mějte prosím na paměti, že automatické překlady mohou obsahovat chyby nebo nepřesnosti. Původní dokument v jeho původním jazyce by měl být považován za autoritativní zdroj. Pro důležité informace se doporučuje profesionální lidský překlad. Neodpovídáme za žádná nedorozumění nebo nesprávné interpretace vyplývající z použití tohoto překladu.
\ No newline at end of file
diff --git a/translations/cs/6-space-game/6-end-condition/your-work/README.md b/translations/cs/6-space-game/6-end-condition/your-work/README.md
new file mode 100644
index 00000000..b9460ef6
--- /dev/null
+++ b/translations/cs/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-28T04:02:12+00:00",
+  "source_file": "6-space-game/6-end-condition/your-work/README.md",
+  "language_code": "cs"
+}
+-->
+Toto je zástupný text, záměrně ponechaný prázdný
+
+---
+
+**Prohlášení**:  
+Tento dokument byl přeložen pomocí služby pro automatický překlad [Co-op Translator](https://github.com/Azure/co-op-translator). I když se snažíme o přesnost, mějte prosím na paměti, že automatické překlady mohou obsahovat chyby nebo nepřesnosti. Původní dokument v jeho původním jazyce by měl být považován za závazný zdroj. Pro důležité informace doporučujeme profesionální lidský překlad. Neodpovídáme za žádná nedorozumění nebo nesprávné výklady vyplývající z použití tohoto překladu.
\ No newline at end of file
diff --git a/translations/cs/6-space-game/README.md b/translations/cs/6-space-game/README.md
new file mode 100644
index 00000000..5b280bc9
--- /dev/null
+++ b/translations/cs/6-space-game/README.md
@@ -0,0 +1,45 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "c40a698395ee5102715f7880bba3f2e7",
+  "translation_date": "2025-08-28T03:52:21+00:00",
+  "source_file": "6-space-game/README.md",
+  "language_code": "cs"
+}
+-->
+# Vytvořte vesmírnou hru
+
+Vesmírná hra pro výuku pokročilejších základů JavaScriptu
+
+V této lekci se naučíte, jak vytvořit vlastní vesmírnou hru. Pokud jste někdy hráli hru "Space Invaders", tato hra má stejný princip: ovládat vesmírnou loď a střílet na příšery, které přicházejí shora. Takto bude vypadat hotová hra:
+
+![Hotová hra](../../../6-space-game/images/pewpew.gif)
+
+V těchto šesti lekcích se naučíte následující:
+
+- **Interakce** s prvkem Canvas pro kreslení na obrazovku
+- **Porozumění** kartézskému souřadnicovému systému
+- **Osvojení** vzoru Pub-Sub pro vytvoření kvalitní herní architektury, která je snadno udržovatelná a rozšiřitelná
+- **Využití** Async/Await pro načítání herních zdrojů
+- **Zpracování** událostí klávesnice
+
+## Přehled
+
+- Teorie
+   - [Úvod do tvorby her s JavaScriptem](1-introduction/README.md)
+- Praxe
+   - [Kreslení na canvas](2-drawing-to-canvas/README.md)
+   - [Pohyb prvků po obrazovce](3-moving-elements-around/README.md)
+   - [Detekce kolizí](4-collision-detection/README.md)
+   - [Počítání skóre](5-keeping-score/README.md)
+   - [Ukončení a restartování hry](6-end-condition/README.md)
+
+## Poděkování
+
+Použité zdroje pocházejí z https://www.kenney.nl/.  
+Pokud vás baví tvorba her, jedná se o opravdu skvělé zdroje – mnoho z nich je zdarma, některé jsou placené.
+
+---
+
+**Prohlášení**:  
+Tento dokument byl přeložen pomocí služby pro automatický překlad [Co-op Translator](https://github.com/Azure/co-op-translator). Ačkoli se snažíme o přesnost, mějte prosím na paměti, že automatické překlady mohou obsahovat chyby nebo nepřesnosti. Původní dokument v jeho původním jazyce by měl být považován za autoritativní zdroj. Pro důležité informace doporučujeme profesionální lidský překlad. Neodpovídáme za žádné nedorozumění nebo nesprávné interpretace vyplývající z použití tohoto překladu.
\ No newline at end of file
diff --git a/translations/cs/6-space-game/solution/README.md b/translations/cs/6-space-game/solution/README.md
new file mode 100644
index 00000000..327a86e1
--- /dev/null
+++ b/translations/cs/6-space-game/solution/README.md
@@ -0,0 +1,15 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "068cbb9b3c10a96d503f6cdd6c9ace8c",
+  "translation_date": "2025-08-28T03:56:26+00:00",
+  "source_file": "6-space-game/solution/README.md",
+  "language_code": "cs"
+}
+-->
+Toto je zástupný text, záměrně ponechaný prázdný
+
+---
+
+**Prohlášení**:  
+Tento dokument byl přeložen pomocí služby pro automatický překlad [Co-op Translator](https://github.com/Azure/co-op-translator). Ačkoli se snažíme o přesnost, mějte prosím na paměti, že automatické překlady mohou obsahovat chyby nebo nepřesnosti. Původní dokument v jeho původním jazyce by měl být považován za autoritativní zdroj. Pro důležité informace doporučujeme profesionální lidský překlad. Neodpovídáme za žádné nedorozumění nebo nesprávné interpretace vyplývající z použití tohoto překladu.
\ No newline at end of file
diff --git a/translations/cs/7-bank-project/1-template-route/README.md b/translations/cs/7-bank-project/1-template-route/README.md
new file mode 100644
index 00000000..601b7ad8
--- /dev/null
+++ b/translations/cs/7-bank-project/1-template-route/README.md
@@ -0,0 +1,322 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "8da1b5e2c63f749808858c53f37b8ce7",
+  "translation_date": "2025-08-28T03:37:25+00:00",
+  "source_file": "7-bank-project/1-template-route/README.md",
+  "language_code": "cs"
+}
+-->
+# Vytvoření bankovní aplikace, část 1: HTML šablony a trasy ve webové aplikaci
+
+## Kvíz před lekcí
+
+[Kvíz před lekcí](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/41)
+
+### Úvod
+
+Od příchodu JavaScriptu do prohlížečů se webové stránky stávají interaktivnějšími a složitějšími než kdy dříve. Webové technologie se nyní běžně používají k vytváření plně funkčních aplikací, které běží přímo v prohlížeči, a nazýváme je [webové aplikace](https://en.wikipedia.org/wiki/Web_application). Protože jsou webové aplikace vysoce interaktivní, uživatelé nechtějí čekat na úplné načtení stránky pokaždé, když provedou nějakou akci. Proto se používá JavaScript k přímé aktualizaci HTML pomocí DOM, aby se zajistil plynulejší uživatelský zážitek.
+
+V této lekci položíme základy pro vytvoření bankovní webové aplikace, přičemž použijeme HTML šablony k vytvoření více obrazovek, které lze zobrazit a aktualizovat bez nutnosti znovu načítat celou HTML stránku.
+
+### Předpoklady
+
+Pro testování webové aplikace, kterou v této lekci vytvoříme, potřebujete lokální webový server. Pokud ho nemáte, můžete nainstalovat [Node.js](https://nodejs.org) a použít příkaz `npx lite-server` z vaší složky projektu. Tím vytvoříte lokální webový server a otevřete svou aplikaci v prohlížeči.
+
+### Příprava
+
+Na svém počítači vytvořte složku s názvem `bank` a uvnitř ní soubor s názvem `index.html`. Začneme s tímto HTML [boilerplate](https://en.wikipedia.org/wiki/Boilerplate_code):
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Bank App</title>
+  </head>
+  <body>
+    <!-- This is where you'll work -->
+  </body>
+</html>
+```
+
+---
+
+## HTML šablony
+
+Pokud chcete vytvořit více obrazovek pro webovou stránku, jedním řešením by bylo vytvořit jeden HTML soubor pro každou obrazovku, kterou chcete zobrazit. Toto řešení však přináší určité nevýhody:
+
+- Při přepínání obrazovek musíte znovu načíst celé HTML, což může být pomalé.
+- Je obtížné sdílet data mezi různými obrazovkami.
+
+Dalším přístupem je mít pouze jeden HTML soubor a definovat více [HTML šablon](https://developer.mozilla.org/docs/Web/HTML/Element/template) pomocí elementu `<template>`. Šablona je znovupoužitelný HTML blok, který není prohlížečem zobrazen, a musí být instancován za běhu pomocí JavaScriptu.
+
+### Úkol
+
+Vytvoříme bankovní aplikaci se dvěma obrazovkami: přihlašovací stránkou a dashboardem. Nejprve přidáme do těla HTML zástupný prvek, který použijeme k instancování různých obrazovek naší aplikace:
+
+```html
+<div id="app">Loading...</div>
+```
+
+Dáváme mu `id`, aby bylo později snazší ho najít pomocí JavaScriptu.
+
+> Tip: protože obsah tohoto prvku bude nahrazen, můžeme do něj vložit zprávu nebo indikátor načítání, který se zobrazí během načítání aplikace.
+
+Dále přidáme pod HTML šablonu pro přihlašovací stránku. Prozatím do ní vložíme pouze nadpis a sekci obsahující odkaz, který použijeme k navigaci.
+
+```html
+<template id="login">
+  <h1>Bank App</h1>
+  <section>
+    <a href="/dashboard">Login</a>
+  </section>
+</template>
+```
+
+Poté přidáme další HTML šablonu pro stránku dashboardu. Tato stránka bude obsahovat různé sekce:
+
+- Hlavičku s nadpisem a odkazem pro odhlášení
+- Aktuální zůstatek na bankovním účtu
+- Seznam transakcí, zobrazený v tabulce
+
+```html
+<template id="dashboard">
+  <header>
+    <h1>Bank App</h1>
+    <a href="/login">Logout</a>
+  </header>
+  <section>
+    Balance: 100$
+  </section>
+  <section>
+    <h2>Transactions</h2>
+    <table>
+      <thead>
+        <tr>
+          <th>Date</th>
+          <th>Object</th>
+          <th>Amount</th>
+        </tr>
+      </thead>
+      <tbody></tbody>
+    </table>
+  </section>
+</template>
+```
+
+> Tip: při vytváření HTML šablon, pokud chcete vidět, jak budou vypadat, můžete zakomentovat řádky `<template>` a `</template>` obklopením pomocí `<!-- -->`.
+
+✅ Proč si myslíte, že používáme atributy `id` na šablonách? Mohli bychom použít něco jiného, například třídy?
+
+## Zobrazení šablon pomocí JavaScriptu
+
+Pokud zkusíte svůj aktuální HTML soubor v prohlížeči, uvidíte, že se zasekne na zobrazení `Loading...`. To je proto, že musíme přidat nějaký JavaScriptový kód, který instancuje a zobrazí HTML šablony.
+
+Instancování šablony se obvykle provádí ve 3 krocích:
+
+1. Získání elementu šablony v DOM, například pomocí [`document.getElementById`](https://developer.mozilla.org/docs/Web/API/Document/getElementById).
+2. Klonování elementu šablony pomocí [`cloneNode`](https://developer.mozilla.org/docs/Web/API/Node/cloneNode).
+3. Připojení k DOM pod viditelný prvek, například pomocí [`appendChild`](https://developer.mozilla.org/docs/Web/API/Node/appendChild).
+
+✅ Proč musíme šablonu klonovat před jejím připojením k DOM? Co si myslíte, že by se stalo, kdybychom tento krok přeskočili?
+
+### Úkol
+
+Vytvořte nový soubor s názvem `app.js` ve složce projektu a importujte tento soubor do sekce `<head>` vašeho HTML:
+
+```html
+<script src="app.js" defer></script>
+```
+
+Nyní v `app.js` vytvoříme novou funkci `updateRoute`:
+
+```js
+function updateRoute(templateId) {
+  const template = document.getElementById(templateId);
+  const view = template.content.cloneNode(true);
+  const app = document.getElementById('app');
+  app.innerHTML = '';
+  app.appendChild(view);
+}
+```
+
+To, co zde děláme, je přesně 3 kroky popsané výše. Instancujeme šablonu s `id` `templateId` a její klonovaný obsah vložíme do našeho zástupného prvku aplikace. Všimněte si, že musíme použít `cloneNode(true)`, abychom zkopírovali celý podstrom šablony.
+
+Nyní zavolejte tuto funkci s jednou ze šablon a podívejte se na výsledek.
+
+```js
+updateRoute('login');
+```
+
+✅ Jaký je účel tohoto kódu `app.innerHTML = '';`? Co se stane bez něj?
+
+## Vytváření tras
+
+Když mluvíme o webové aplikaci, nazýváme *Routing* záměr mapovat **URL** na konkrétní obrazovky, které by měly být zobrazeny. Na webové stránce s více HTML soubory se to děje automaticky, protože cesty k souborům se odrážejí v URL. Například s těmito soubory ve vaší složce projektu:
+
+```
+mywebsite/index.html
+mywebsite/login.html
+mywebsite/admin/index.html
+```
+
+Pokud vytvoříte webový server s `mywebsite` jako kořen, mapování URL bude:
+
+```
+https://site.com            --> mywebsite/index.html
+https://site.com/login.html --> mywebsite/login.html
+https://site.com/admin/     --> mywebsite/admin/index.html
+```
+
+Nicméně, pro naši webovou aplikaci používáme jeden HTML soubor obsahující všechny obrazovky, takže toto výchozí chování nám nepomůže. Musíme tuto mapu vytvořit ručně a aktualizovat zobrazenou šablonu pomocí JavaScriptu.
+
+### Úkol
+
+Použijeme jednoduchý objekt k implementaci [mapy](https://en.wikipedia.org/wiki/Associative_array) mezi cestami URL a našimi šablonami. Přidejte tento objekt na začátek vašeho souboru `app.js`.
+
+```js
+const routes = {
+  '/login': { templateId: 'login' },
+  '/dashboard': { templateId: 'dashboard' },
+};
+```
+
+Nyní trochu upravíme funkci `updateRoute`. Místo toho, abychom přímo předávali `templateId` jako argument, chceme ho získat nejprve pohledem na aktuální URL a poté použít naši mapu k získání odpovídající hodnoty `templateId`. Můžeme použít [`window.location.pathname`](https://developer.mozilla.org/docs/Web/API/Location/pathname) k získání pouze části cesty z URL.
+
+```js
+function updateRoute() {
+  const path = window.location.pathname;
+  const route = routes[path];
+
+  const template = document.getElementById(route.templateId);
+  const view = template.content.cloneNode(true);
+  const app = document.getElementById('app');
+  app.innerHTML = '';
+  app.appendChild(view);
+}
+```
+
+Zde jsme namapovali trasy, které jsme deklarovali, na odpovídající šablonu. Můžete vyzkoušet, že to funguje správně, změnou URL ručně ve vašem prohlížeči.
+
+✅ Co se stane, pokud zadáte neznámou cestu do URL? Jak bychom to mohli vyřešit?
+
+## Přidání navigace
+
+Dalším krokem pro naši aplikaci je přidání možnosti navigace mezi stránkami bez nutnosti ručně měnit URL. To zahrnuje dvě věci:
+
+1. Aktualizaci aktuálního URL
+2. Aktualizaci zobrazené šablony na základě nového URL
+
+Druhou část jsme již vyřešili pomocí funkce `updateRoute`, takže musíme zjistit, jak aktualizovat aktuální URL.
+
+Budeme muset použít JavaScript a konkrétně [`history.pushState`](https://developer.mozilla.org/docs/Web/API/History/pushState), který umožňuje aktualizovat URL a vytvořit nový záznam v historii prohlížení, aniž by se HTML znovu načítalo.
+
+> Poznámka: Zatímco HTML prvek kotvy [`<a href>`](https://developer.mozilla.org/docs/Web/HTML/Element/a) může být použit samostatně k vytvoření hypertextových odkazů na různé URL, ve výchozím nastavení způsobí, že prohlížeč znovu načte HTML. Je nutné zabránit tomuto chování při zpracování tras pomocí vlastního JavaScriptu, použitím funkce preventDefault() na události kliknutí.
+
+### Úkol
+
+Vytvořme novou funkci, kterou můžeme použít k navigaci v naší aplikaci:
+
+```js
+function navigate(path) {
+  window.history.pushState({}, path, path);
+  updateRoute();
+}
+```
+
+Tato metoda nejprve aktualizuje aktuální URL na základě zadané cesty, poté aktualizuje šablonu. Vlastnost `window.location.origin` vrací kořen URL, což nám umožňuje rekonstruovat kompletní URL ze zadané cesty.
+
+Nyní, když máme tuto funkci, můžeme se postarat o problém, který máme, pokud cesta neodpovídá žádné definované trase. Upravením funkce `updateRoute` přidáme záložní trasu na jednu z existujících tras, pokud nemůžeme najít shodu.
+
+```js
+function updateRoute() {
+  const path = window.location.pathname;
+  const route = routes[path];
+
+  if (!route) {
+    return navigate('/login');
+  }
+
+  ...
+```
+
+Pokud nelze najít trasu, nyní přesměrujeme na stránku `login`.
+
+Nyní vytvořme funkci pro získání URL při kliknutí na odkaz a zabránění výchozímu chování odkazu prohlížeče:
+
+```js
+function onLinkClick(event) {
+  event.preventDefault();
+  navigate(event.target.href);
+}
+```
+
+Dokončeme navigační systém přidáním vazeb na naše odkazy *Login* a *Logout* v HTML.
+
+```html
+<a href="/dashboard" onclick="onLinkClick(event)">Login</a>
+...
+<a href="/login" onclick="onLinkClick(event)">Logout</a>
+```
+
+Objekt `event` výše zachytí událost `click` a předá ji naší funkci `onLinkClick`.
+
+Pomocí atributu [`onclick`](https://developer.mozilla.org/docs/Web/API/GlobalEventHandlers/onclick) připojte událost `click` k JavaScriptovému kódu, zde volání funkce `navigate()`.
+
+Zkuste kliknout na tyto odkazy, nyní byste měli být schopni navigovat mezi různými obrazovkami vaší aplikace.
+
+✅ Metoda `history.pushState` je součástí standardu HTML5 a je implementována ve [všech moderních prohlížečích](https://caniuse.com/?search=pushState). Pokud vytváříte webovou aplikaci pro starší prohlížeče, existuje trik, který můžete použít místo této API: použití [hash (`#`)](https://en.wikipedia.org/wiki/URI_fragment) před cestou vám umožní implementovat trasování, které funguje s běžnou navigací kotvy a nenačítá stránku znovu, protože jeho účelem bylo vytvořit interní odkazy na stránce.
+
+## Zpracování tlačítek zpět a vpřed v prohlížeči
+
+Použití `history.pushState` vytváří nové záznamy v historii navigace prohlížeče. Můžete to zkontrolovat podržením *tlačítka zpět* vašeho prohlížeče, mělo by zobrazit něco jako toto:
+
+![Screenshot historie navigace](../../../../translated_images/history.7fdabbafa521e06455b738d3dafa3ff41d3071deae60ead8c7e0844b9ed987d8.cs.png)
+
+Pokud zkusíte několikrát kliknout na tlačítko zpět, uvidíte, že se aktuální URL mění a historie se aktualizuje, ale stále se zobrazuje stejná šablona.
+
+To je proto, že aplikace neví, že je potřeba zavolat `updateRoute()` pokaždé, když se historie změní. Pokud se podíváte na [dokumentaci `history.pushState`](https://developer.mozilla.org/docs/Web/API/History/pushState), můžete vidět, že pokud se stav změní - což znamená, že jsme se přesunuli na jiné URL - je vyvolána událost [`popstate`](https://developer.mozilla.org/docs/Web/API/Window/popstate_event). Použijeme to k vyřešení tohoto problému.
+
+### Úkol
+
+Abychom zajistili, že zobrazená šablona bude aktualizována, když se historie prohlížeče změní, připojíme novou funkci, která volá `updateRoute()`. Uděláme to na konci našeho souboru `app.js`:
+
+```js
+window.onpopstate = () => updateRoute();
+updateRoute();
+```
+
+> Poznámka: zde jsme použili [arrow function](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions) k deklaraci našeho obslužného programu události `popstate` pro stručnost, ale běžná funkce by fungovala stejně.
+
+Zde je video o arrow funkcích:
+
+[![Arrow Functions](https://img.youtube.com/vi/OP6eEbOj2sc/0.jpg)](https://youtube.com/watch?v=OP6eEbOj2sc "Arrow Functions")
+
+> 🎥 Klikněte na obrázek výše pro video o arrow funkcích.
+
+Nyní zkuste použít tlačítka zpět a vpřed ve vašem prohlížeči a zkontrolujte, že zobrazená trasa je tentokrát správně aktualizována.
+
+---
+
+## 🚀 Výzva
+
+Přidejte novou šablonu a trasu pro třetí stránku, která zobrazuje kredity této aplikace.
+
+## Kvíz po lekci
+
+[Kvíz po lekci](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/42)
+
+## Přehled a samostudium
+
+Trasování je jednou z překvapivě složitých částí vývoje webu, zejména když se web přesouvá od chování při obnovování stránky k obnovování stránky v aplikacích typu Single Page Application. Přečtěte si něco o [tom, jak služba Azure Static Web App](https://docs.microsoft.com/azure/static-web-apps/routes/?WT.mc_id=academic-77807-sagibbon) řeší trasování. Dokážete vysvětlit, proč jsou některá rozhodnutí popsaná v tomto dokumentu nezbytná?
+
+## Zadání
+
+[Vylepšete trasování](assignment.md)
+
+---
+
+**Prohlášení**:  
+Tento dokument byl přeložen pomocí služby pro automatický překlad [Co-op Translator](https://github.com/Azure/co-op-translator). I když se snažíme o přesnost, mějte prosím na paměti, že automatické překlady mohou obsahovat chyby nebo nepřesnosti. Původní dokument v jeho původním jazyce by měl být považován za autoritativní zdroj. Pro důležité informace doporučujeme profesionální lidský překlad. Neodpovídáme za žádná nedorozumění nebo nesprávné interpretace vyplývající z použití tohoto překladu.
\ No newline at end of file
diff --git a/translations/cs/7-bank-project/1-template-route/assignment.md b/translations/cs/7-bank-project/1-template-route/assignment.md
new file mode 100644
index 00000000..425b1ab9
--- /dev/null
+++ b/translations/cs/7-bank-project/1-template-route/assignment.md
@@ -0,0 +1,28 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "8223e429218befa731dd5bfd22299520",
+  "translation_date": "2025-08-28T03:38:21+00:00",
+  "source_file": "7-bank-project/1-template-route/assignment.md",
+  "language_code": "cs"
+}
+-->
+# Vylepšení směrování
+
+## Pokyny
+
+Deklarace tras aktuálně obsahuje pouze ID šablony, kterou je třeba použít. Ale při zobrazování nové stránky je někdy potřeba něco víc. Vylepšeme naši implementaci směrování dvěma dalšími funkcemi:
+
+- Přidejte názvy ke každé šabloně a aktualizujte název okna pomocí tohoto nového názvu, když se šablona změní.
+- Přidejte možnost spustit nějaký kód po změně šablony. Chceme, aby se v konzoli pro vývojáře pokaždé, když se zobrazí stránka dashboardu, vytisklo `'Dashboard is shown'`.
+
+## Hodnocení
+
+| Kritéria | Vynikající                                                                                                                         | Přiměřené                                                                                                                                                                                 | Potřebuje zlepšení                                     |
+| -------- | ---------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------- |
+|          | Obě funkce jsou implementovány a fungují. Přidání názvu a kódu funguje také pro novou trasu přidanou do deklarace `routes`.         | Obě funkce fungují, ale chování je pevně zakódováno a není konfigurovatelné prostřednictvím deklarace `routes`. Přidání třetí trasy s názvem a přidáním kódu nefunguje nebo funguje částečně. | Jedna z funkcí chybí nebo nefunguje správně.          |
+
+---
+
+**Prohlášení**:  
+Tento dokument byl přeložen pomocí služby pro automatický překlad [Co-op Translator](https://github.com/Azure/co-op-translator). Ačkoli se snažíme o přesnost, mějte na paměti, že automatické překlady mohou obsahovat chyby nebo nepřesnosti. Původní dokument v jeho původním jazyce by měl být považován za autoritativní zdroj. Pro důležité informace se doporučuje profesionální lidský překlad. Neodpovídáme za žádná nedorozumění nebo nesprávné interpretace vyplývající z použití tohoto překladu.
\ No newline at end of file
diff --git a/translations/cs/7-bank-project/2-forms/README.md b/translations/cs/7-bank-project/2-forms/README.md
new file mode 100644
index 00000000..e2c5b203
--- /dev/null
+++ b/translations/cs/7-bank-project/2-forms/README.md
@@ -0,0 +1,313 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "b667b7d601e2ee19acb5aa9d102dc9f3",
+  "translation_date": "2025-08-28T03:30:55+00:00",
+  "source_file": "7-bank-project/2-forms/README.md",
+  "language_code": "cs"
+}
+-->
+# Vytvoření bankovní aplikace, část 2: Přihlášení a registrační formulář
+
+## Kvíz před lekcí
+
+[Kvíz před lekcí](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/43)
+
+### Úvod
+
+V téměř všech moderních webových aplikacích si můžete vytvořit účet, abyste měli svůj vlastní soukromý prostor. Protože k webové aplikaci může přistupovat více uživatelů současně, je potřeba mechanismus, který umožní ukládat osobní údaje každého uživatele odděleně a vybrat, které informace zobrazit. Nebudeme se zabývat tím, jak [bezpečně spravovat identitu uživatele](https://en.wikipedia.org/wiki/Authentication), protože je to samostatné rozsáhlé téma, ale zajistíme, aby si každý uživatel mohl vytvořit jeden (nebo více) bankovních účtů v naší aplikaci.
+
+V této části použijeme HTML formuláře k přidání přihlášení a registrace do naší webové aplikace. Ukážeme si, jak programově odesílat data na serverovou API, a nakonec jak definovat základní pravidla validace pro vstupy uživatele.
+
+### Předpoklady
+
+Musíte mít dokončenou část [HTML šablony a směrování](../1-template-route/README.md) webové aplikace pro tuto lekci. Také je potřeba nainstalovat [Node.js](https://nodejs.org) a [spustit serverovou API](../api/README.md) lokálně, abyste mohli odesílat data pro vytvoření účtů.
+
+**Poznámka**
+Budete mít spuštěné dva terminály současně, jak je uvedeno níže:
+1. Pro hlavní bankovní aplikaci, kterou jsme vytvořili v lekci [HTML šablony a směrování](../1-template-route/README.md)
+2. Pro [serverovou API bankovní aplikace](../api/README.md), kterou jsme právě nastavili výše.
+
+Pro pokračování v lekci je potřeba mít oba servery spuštěné. Poslouchají na různých portech (port `3000` a port `5000`), takže by vše mělo fungovat bez problémů.
+
+Můžete otestovat, zda server běží správně, spuštěním tohoto příkazu v terminálu:
+
+```sh
+curl http://localhost:5000/api
+# -> should return "Bank API v1.0.0" as a result
+```
+
+---
+
+## Formulář a ovládací prvky
+
+Element `<form>` obklopuje část HTML dokumentu, kde uživatel může zadávat a odesílat data pomocí interaktivních ovládacích prvků. Existuje mnoho různých uživatelských rozhraní (UI) ovládacích prvků, které lze použít v rámci formuláře, nejběžnějšími jsou elementy `<input>` a `<button>`.
+
+Existuje mnoho různých [typů](https://developer.mozilla.org/docs/Web/HTML/Element/input) `<input>`, například pro vytvoření pole, kde uživatel může zadat své uživatelské jméno, můžete použít:
+
+```html
+<input id="username" name="username" type="text">
+```
+
+Atribut `name` bude použit jako název vlastnosti při odesílání dat formuláře. Atribut `id` se používá k propojení `<label>` s ovládacím prvkem formuláře.
+
+> Podívejte se na celý seznam [typů `<input>`](https://developer.mozilla.org/docs/Web/HTML/Element/input) a [dalších ovládacích prvků formuláře](https://developer.mozilla.org/docs/Learn/Forms/Other_form_controls), abyste získali představu o všech nativních UI prvcích, které můžete použít při vytváření svého rozhraní.
+
+✅ Všimněte si, že `<input>` je [prázdný element](https://developer.mozilla.org/docs/Glossary/Empty_element), ke kterému byste *neměli* přidávat odpovídající uzavírací tag. Můžete však použít samouzavírací notaci `<input/>`, ale není to nutné.
+
+Element `<button>` v rámci formuláře je trochu speciální. Pokud nespecifikujete jeho atribut `type`, automaticky odešle data formuláře na server při stisknutí. Zde jsou možné hodnoty atributu `type`:
+
+- `submit`: Výchozí hodnota v rámci `<form>`, tlačítko spustí akci odeslání formuláře.
+- `reset`: Tlačítko resetuje všechny ovládací prvky formuláře na jejich počáteční hodnoty.
+- `button`: Nepřiřazuje žádné výchozí chování při stisknutí tlačítka. Můžete mu pak přiřadit vlastní akce pomocí JavaScriptu.
+
+### Úkol
+
+Začněme přidáním formuláře do šablony `login`. Budeme potřebovat pole pro *uživatelské jméno* a tlačítko *Přihlásit*.
+
+```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>
+```
+
+Pokud se podíváte blíže, můžete si všimnout, že jsme zde také přidali element `<label>`. Elementy `<label>` se používají k přidání názvu k UI ovládacím prvkům, jako je naše pole pro uživatelské jméno. Popisky jsou důležité pro čitelnost vašich formulářů, ale přinášejí také další výhody:
+
+- Propojením popisku s ovládacím prvkem formuláře pomáhá uživatelům, kteří používají asistivní technologie (například čtečku obrazovky), pochopit, jaká data se od nich očekávají.
+- Kliknutím na popisek můžete přímo zaměřit přidružený vstup, což usnadňuje jeho dosažení na zařízeních s dotykovou obrazovkou.
+
+> [Přístupnost](https://developer.mozilla.org/docs/Learn/Accessibility/What_is_accessibility) na webu je velmi důležité téma, které je často přehlíženo. Díky [semantickým HTML elementům](https://developer.mozilla.org/docs/Learn/Accessibility/HTML) není obtížné vytvářet přístupný obsah, pokud je používáte správně. Můžete si [přečíst více o přístupnosti](https://developer.mozilla.org/docs/Web/Accessibility), abyste se vyhnuli běžným chybám a stali se odpovědným vývojářem.
+
+Nyní přidáme druhý formulář pro registraci, hned pod ten předchozí:
+
+```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>
+```
+
+Pomocí atributu `value` můžeme definovat výchozí hodnotu pro daný vstup.
+Všimněte si také, že vstup pro `balance` má typ `number`. Vypadá jinak než ostatní vstupy? Zkuste s ním interagovat.
+
+✅ Dokážete navigovat a interagovat s formuláři pouze pomocí klávesnice? Jak byste to udělali?
+
+## Odesílání dat na server
+
+Nyní, když máme funkční UI, dalším krokem je odeslání dat na server. Udělejme rychlý test pomocí našeho aktuálního kódu: co se stane, když kliknete na tlačítko *Přihlásit* nebo *Registrovat*?
+
+Všimli jste si změny v sekci URL vašeho prohlížeče?
+
+![Screenshot změny URL prohlížeče po kliknutí na tlačítko Registrovat](../../../../translated_images/click-register.e89a30bf0d4bc9ca867dc537c4cea679a7c26368bd790969082f524fed2355bc.cs.png)
+
+Výchozí akce pro `<form>` je odeslání formuláře na aktuální URL serveru pomocí [metody GET](https://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.3), připojením dat formuláře přímo k URL. Tato metoda má však některé nedostatky:
+
+- Odesílaná data jsou velmi omezená velikostí (asi 2000 znaků)
+- Data jsou přímo viditelná v URL (není ideální pro hesla)
+- Nepracuje s nahráváním souborů
+
+Proto ji můžete změnit na použití [metody POST](https://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.5), která odesílá data formuláře na server v těle HTTP požadavku, bez předchozích omezení.
+
+> Zatímco POST je nejčastěji používaná metoda pro odesílání dat, [v některých specifických scénářích](https://www.w3.org/2001/tag/doc/whenToUseGet.html) je vhodnější použít metodu GET, například při implementaci vyhledávacího pole.
+
+### Úkol
+
+Přidejte vlastnosti `action` a `method` do registračního formuláře:
+
+```html
+<form id="registerForm" action="//localhost:5000/api/accounts" method="POST">
+```
+
+Nyní zkuste zaregistrovat nový účet se svým jménem. Po kliknutí na tlačítko *Registrovat* byste měli vidět něco takového:
+
+![Okno prohlížeče na adrese localhost:5000/api/accounts, zobrazující JSON řetězec s uživatelskými daty](../../../../translated_images/form-post.61de4ca1b964d91a9e338416e19f218504dd0af5f762fbebabfe7ae80edf885f.cs.png)
+
+Pokud vše proběhne správně, server by měl odpovědět na váš požadavek [JSON](https://www.json.org/json-en.html) odpovědí obsahující data účtu, který byl vytvořen.
+
+✅ Zkuste se zaregistrovat znovu se stejným jménem. Co se stane?
+
+## Odesílání dat bez obnovení stránky
+
+Jak jste si pravděpodobně všimli, existuje drobný problém s přístupem, který jsme právě použili: při odeslání formuláře se dostaneme z naší aplikace a prohlížeč přesměruje na URL serveru. Snažíme se vyhnout všem obnovením stránky v naší webové aplikaci, protože vytváříme [jednostránkovou aplikaci (SPA)](https://en.wikipedia.org/wiki/Single-page_application).
+
+Abychom odeslali data formuláře na server bez vynucení obnovení stránky, musíme použít JavaScriptový kód. Místo zadání URL do vlastnosti `action` elementu `<form>` můžete použít jakýkoli JavaScriptový kód předcházený řetězcem `javascript:`, abyste provedli vlastní akci. Použití tohoto přístupu také znamená, že budete muset implementovat některé úkoly, které byly dříve prováděny automaticky prohlížečem:
+
+- Získání dat formuláře
+- Konverze a kódování dat formuláře do vhodného formátu
+- Vytvoření HTTP požadavku a jeho odeslání na server
+
+### Úkol
+
+Nahraďte vlastnost `action` registračního formuláře:
+
+```html
+<form id="registerForm" action="javascript:register()">
+```
+
+Otevřete `app.js` a přidejte novou funkci s názvem `register`:
+
+```js
+function register() {
+  const registerForm = document.getElementById('registerForm');
+  const formData = new FormData(registerForm);
+  const data = Object.fromEntries(formData);
+  const jsonData = JSON.stringify(data);
+}
+```
+
+Zde získáváme element formuláře pomocí `getElementById()` a používáme pomocníka [`FormData`](https://developer.mozilla.org/docs/Web/API/FormData) k extrakci hodnot z ovládacích prvků formuláře jako sadu dvojic klíč/hodnota. Poté data převedeme na běžný objekt pomocí [`Object.fromEntries()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/fromEntries) a nakonec data serializujeme do [JSON](https://www.json.org/json-en.html), formátu běžně používaného pro výměnu dat na webu.
+
+Data jsou nyní připravena k odeslání na server. Vytvořte novou funkci s názvem `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' };
+  }
+}
+```
+
+Co tato funkce dělá? Nejprve si všimněte klíčového slova `async`. To znamená, že funkce obsahuje kód, který bude prováděn [**asynchronně**](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/async_function). Při použití spolu s klíčovým slovem `await` umožňuje čekat na provedení asynchronního kódu – například čekání na odpověď serveru – před pokračováním.
+
+Zde je rychlé video o použití `async/await`:
+
+[![Async a Await pro správu slibů](https://img.youtube.com/vi/YwmlRkrxvkk/0.jpg)](https://youtube.com/watch?v=YwmlRkrxvkk "Async a Await pro správu slibů")
+
+> 🎥 Klikněte na obrázek výše pro video o async/await.
+
+Používáme API `fetch()` k odeslání JSON dat na server. Tato metoda přijímá 2 parametry:
+
+- URL serveru, takže zde zadáme `//localhost:5000/api/accounts`.
+- Nastavení požadavku. Zde nastavíme metodu na `POST` a poskytneme `body` požadavku. Protože odesíláme JSON data na server, musíme také nastavit hlavičku `Content-Type` na `application/json`, aby server věděl, jak interpretovat obsah.
+
+Protože server odpoví na požadavek JSONem, můžeme použít `await response.json()` k analýze JSON obsahu a vrácení výsledného objektu. Všimněte si, že tato metoda je asynchronní, takže zde používáme klíčové slovo `await`, abychom zajistili, že budou zachyceny i chyby během analýzy.
+
+Nyní přidejte nějaký kód do funkce `register`, aby volala `createAccount()`:
+
+```js
+const result = await createAccount(jsonData);
+```
+
+Protože zde používáme klíčové slovo `await`, musíme přidat klíčové slovo `async` před funkci register:
+
+```js
+async function register() {
+```
+
+Nakonec přidejme nějaké logy pro kontrolu výsledku. Finální funkce by měla vypadat takto:
+
+```js
+async function register() {
+  const registerForm = document.getElementById('registerForm');
+  const formData = new FormData(registerForm);
+  const jsonData = JSON.stringify(Object.fromEntries(formData));
+  const result = await createAccount(jsonData);
+
+  if (result.error) {
+    return console.log('An error occurred:', result.error);
+  }
+
+  console.log('Account created!', result);
+}
+```
+
+Bylo to trochu dlouhé, ale dostali jsme se tam! Pokud otevřete [nástroje pro vývojáře prohlížeče](https://developer.mozilla.org/docs/Learn/Common_questions/What_are_browser_developer_tools) a zkusíte zaregistrovat nový účet, neměli byste vidět žádnou změnu na webové stránce, ale v konzoli se objeví zpráva potvrzující, že vše funguje.
+
+![Screenshot zobrazující zprávu v konzoli prohlížeče](../../../../translated_images/browser-console.efaf0b51aaaf67782a29e1a0bb32cc063f189b18e894eb5926e02f1abe864ec2.cs.png)
+
+✅ Myslíte si, že data jsou odesílána na server bezpečně? Co kdyby někdo dokázal zachytit požadavek? Můžete si přečíst o [HTTPS](https://en.wikipedia.org/wiki/HTTPS), abyste se dozvěděli více o bezpečné komunikaci dat.
+
+## Validace dat
+
+Pokud se pokusíte zaregistrovat nový účet bez zadání uživatelského jména, můžete vidět, že server vrátí chybu se stavovým kódem [400 (Špatný požadavek)](https://developer.mozilla.org/docs/Web/HTTP/Status/400#:~:text=The%20HyperText%20Transfer%20Protocol%20(HTTP,%2C%20or%20deceptive%20request%20routing).).
+
+Před odesláním dat na server je dobré [validovat data formuláře](https://developer.mozilla.org/docs/Learn/Forms/Form_validation) předem, kdykoli je to možné, abyste zajistili, že odesíláte platný požadavek. HTML5 ovládací prvky formuláře poskytují vestavěnou validaci pomocí různých atributů:
+
+- `required`: pole musí být vyplněno, jinak nelze formulář odeslat.
+- `minlength` a `maxlength`: definují minimální a maximální počet znaků v textových polích.
+- `min` a `max`: definují minimální a maximální hodnotu číselného pole.
+- `type`: definuje typ očekávaných dat, jako `number`, `email`, `file` nebo [jiné vestavěné typy](https://developer.mozilla.org/docs/Web/HTML/Element/input). Tento atribut může také změnit vizuální zobrazení ovládacího prvku formuláře.
+- `pattern`: umožňuje definovat [regulární výraz](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Regular_Expressions) pro testování, zda jsou zadaná data platná nebo ne.
+> Tip: vzhled ovládacích prvků formuláře můžete přizpůsobit podle toho, zda jsou platné nebo neplatné, pomocí pseudo-tříd CSS `:valid` a `:invalid`.
+### Úkol
+
+Existují 2 povinná pole pro vytvoření platného nového účtu: uživatelské jméno a měna, ostatní pole jsou volitelná. Aktualizujte HTML formuláře tak, aby používalo atribut `required` a text v popisku pole:
+
+```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>
+```
+
+I když tato konkrétní implementace serveru neomezuje maximální délku polí, je vždy dobrým zvykem definovat rozumné limity pro jakýkoli textový vstup od uživatele.
+
+Přidejte atribut `maxlength` do textových polí:
+
+```html
+<input id="user" name="user" type="text" maxlength="20" required>
+...
+<input id="currency" name="currency" type="text" value="$" maxlength="5" required>
+...
+<input id="description" name="description" type="text" maxlength="100">
+```
+
+Pokud nyní stisknete tlačítko *Registrovat* a některé pole nesplňuje pravidlo validace, které jsme definovali, měli byste vidět něco takového:
+
+![Snímek obrazovky zobrazující chybu validace při pokusu o odeslání formuláře](../../../../translated_images/validation-error.8bd23e98d416c22f80076d04829a4bb718e0e550fd622862ef59008ccf0d5dce.cs.png)
+
+Validace, která se provádí *před* odesláním jakýchkoli dat na server, se nazývá **validace na straně klienta**. Ale mějte na paměti, že není vždy možné provést všechny kontroly bez odeslání dat. Například zde nemůžeme ověřit, zda již existuje účet se stejným uživatelským jménem, aniž bychom odeslali požadavek na server. Další validace prováděná na serveru se nazývá **validace na straně serveru**.
+
+Obvykle je potřeba implementovat obě. Zatímco validace na straně klienta zlepšuje uživatelský zážitek tím, že poskytuje okamžitou zpětnou vazbu uživateli, validace na straně serveru je klíčová pro zajištění, že data uživatele, se kterými pracujete, jsou správná a bezpečná.
+
+---
+
+## 🚀 Výzva
+
+Zobrazte chybovou zprávu v HTML, pokud uživatel již existuje.
+
+Zde je příklad, jak může vypadat finální přihlašovací stránka po troše stylování:
+
+![Snímek obrazovky přihlašovací stránky po přidání stylů CSS](../../../../translated_images/result.96ef01f607bf856aa9789078633e94a4f7664d912f235efce2657299becca483.cs.png)
+
+## Kvíz po přednášce
+
+[Kvíz po přednášce](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/44)
+
+## Přehled & Samostudium
+
+Vývojáři byli velmi kreativní při vytváření formulářů, zejména pokud jde o strategie validace. Zjistěte více o různých způsobech práce s formuláři prohlížením [CodePen](https://codepen.com); najdete nějaké zajímavé a inspirativní formuláře?
+
+## Zadání
+
+[Stylujte svou bankovní aplikaci](assignment.md)
+
+---
+
+**Prohlášení**:  
+Tento dokument byl přeložen pomocí služby AI pro překlady [Co-op Translator](https://github.com/Azure/co-op-translator). Ačkoli se snažíme o přesnost, mějte prosím na paměti, že automatizované překlady mohou obsahovat chyby nebo nepřesnosti. Původní dokument v jeho původním jazyce by měl být považován za autoritativní zdroj. Pro důležité informace se doporučuje profesionální lidský překlad. Nenese odpovědnost za žádné nedorozumění nebo nesprávné interpretace vyplývající z použití tohoto překladu.
\ No newline at end of file
diff --git a/translations/cs/7-bank-project/2-forms/assignment.md b/translations/cs/7-bank-project/2-forms/assignment.md
new file mode 100644
index 00000000..b1d96176
--- /dev/null
+++ b/translations/cs/7-bank-project/2-forms/assignment.md
@@ -0,0 +1,27 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "474f3ab1ee755ca980fc9104a0316e17",
+  "translation_date": "2025-08-28T03:32:02+00:00",
+  "source_file": "7-bank-project/2-forms/assignment.md",
+  "language_code": "cs"
+}
+-->
+# Upravte vzhled své bankovní aplikace
+
+## Instrukce
+
+Vytvořte nový soubor `styles.css` a přidejte na něj odkaz ve svém aktuálním souboru `index.html`. V právě vytvořeném souboru CSS přidejte nějaké styly, aby stránky *Přihlášení* a *Dashboard* vypadaly hezky a přehledně. Pokuste se vytvořit barevné schéma, které dá vaší aplikaci vlastní značku.
+
+> Tip: můžete upravit HTML a přidat nové prvky a třídy, pokud je to potřeba.
+
+## Hodnocení
+
+| Kritéria | Vynikající                                                                                                              | Přiměřené                                                                     | Potřebuje zlepšení                                                                             |
+| -------- | ----------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------- |
+|          | Všechny stránky vypadají čistě a přehledně, s konzistentním barevným schématem a jasně oddělenými sekcemi.              | Stránky jsou stylizované, ale bez jednotného schématu nebo s nejasně oddělenými sekcemi. | Stránky postrádají stylizaci, sekce vypadají neuspořádaně a informace jsou obtížně čitelné. |
+
+---
+
+**Prohlášení**:  
+Tento dokument byl přeložen pomocí služby pro automatický překlad [Co-op Translator](https://github.com/Azure/co-op-translator). Ačkoli se snažíme o přesnost, mějte prosím na paměti, že automatické překlady mohou obsahovat chyby nebo nepřesnosti. Původní dokument v jeho původním jazyce by měl být považován za autoritativní zdroj. Pro důležité informace doporučujeme profesionální lidský překlad. Neodpovídáme za žádné nedorozumění nebo nesprávné interpretace vyplývající z použití tohoto překladu.
\ No newline at end of file
diff --git a/translations/cs/7-bank-project/3-data/README.md b/translations/cs/7-bank-project/3-data/README.md
new file mode 100644
index 00000000..c29ae465
--- /dev/null
+++ b/translations/cs/7-bank-project/3-data/README.md
@@ -0,0 +1,347 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "f587e913e3f7c0b1c549a05dd74ee8e5",
+  "translation_date": "2025-08-28T03:26:28+00:00",
+  "source_file": "7-bank-project/3-data/README.md",
+  "language_code": "cs"
+}
+-->
+# Vytvoření bankovní aplikace, část 3: Metody získávání a používání dat
+
+## Kvíz před lekcí
+
+[Kvíz před lekcí](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/45)
+
+### Úvod
+
+Základem každé webové aplikace jsou *data*. Data mohou mít různé podoby, ale jejich hlavním účelem je vždy zobrazit informace uživateli. S tím, jak se webové aplikace stávají stále interaktivnějšími a složitějšími, je způsob, jakým uživatel přistupuje k informacím a jak s nimi pracuje, klíčovou součástí vývoje webu.
+
+V této lekci se naučíme, jak asynchronně získávat data ze serveru a používat je k zobrazení informací na webové stránce bez nutnosti znovu načítat HTML.
+
+### Předpoklady
+
+Pro tuto lekci musíte mít vytvořenou část webové aplikace [Přihlašovací a registrační formulář](../2-forms/README.md). Také je potřeba nainstalovat [Node.js](https://nodejs.org) a [spustit serverovou API](../api/README.md) lokálně, abyste získali data o účtu.
+
+Můžete ověřit, zda server běží správně, spuštěním tohoto příkazu v terminálu:
+
+```sh
+curl http://localhost:5000/api
+# -> should return "Bank API v1.0.0" as a result
+```
+
+---
+
+## AJAX a získávání dat
+
+Tradiční webové stránky aktualizují zobrazovaný obsah, když uživatel vybere odkaz nebo odešle data pomocí formuláře, a to znovunačtením celé HTML stránky. Pokaždé, když je potřeba načíst nová data, webový server vrátí zcela novou HTML stránku, kterou musí prohlížeč zpracovat, což přeruší aktuální akci uživatele a omezí interakce během načítání. Tento postup se také nazývá *vícestránková aplikace* (Multi-Page Application, MPA).
+
+![Pracovní postup aktualizace ve vícestránkové aplikaci](../../../../translated_images/mpa.7f7375a1a2d4aa779d3f928a2aaaf9ad76bcdeb05cfce2dc27ab126024050f51.cs.png)
+
+S rostoucí složitostí a interaktivitou webových aplikací se objevila nová technika nazvaná [AJAX (Asynchronous JavaScript and XML)](https://en.wikipedia.org/wiki/Ajax_(programming)). Tato technika umožňuje webovým aplikacím asynchronně odesílat a získávat data ze serveru pomocí JavaScriptu, aniž by bylo nutné znovu načítat HTML stránku. Výsledkem jsou rychlejší aktualizace a plynulejší interakce uživatele. Když jsou ze serveru přijata nová data, aktuální HTML stránka může být také aktualizována pomocí JavaScriptu a API [DOM](https://developer.mozilla.org/docs/Web/API/Document_Object_Model). Postupem času se tento přístup vyvinul do toho, co dnes nazýváme [*jednostránková aplikace* (Single-Page Application, SPA)](https://en.wikipedia.org/wiki/Single-page_application).
+
+![Pracovní postup aktualizace v jednostránkové aplikaci](../../../../translated_images/spa.268ec73b41f992c2a21ef9294235c6ae597b3c37e2c03f0494c2d8857325cc57.cs.png)
+
+Když byl AJAX poprvé představen, jediným dostupným API pro asynchronní získávání dat bylo [`XMLHttpRequest`](https://developer.mozilla.org/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest). Moderní prohlížeče však nyní implementují pohodlnější a výkonnější [`Fetch` API](https://developer.mozilla.org/docs/Web/API/Fetch_API), které využívá promises a je lépe přizpůsobené pro manipulaci s JSON daty.
+
+> I když všechny moderní prohlížeče podporují `Fetch API`, pokud chcete, aby vaše webová aplikace fungovala na starších prohlížečích, je vždy dobré zkontrolovat [tabulku kompatibility na caniuse.com](https://caniuse.com/fetch).
+
+### Úkol
+
+V [předchozí lekci](../2-forms/README.md) jsme implementovali registrační formulář pro vytvoření účtu. Nyní přidáme kód pro přihlášení pomocí existujícího účtu a získání jeho dat. Otevřete soubor `app.js` a přidejte novou funkci `login`:
+
+```js
+async function login() {
+  const loginForm = document.getElementById('loginForm')
+  const user = loginForm.user.value;
+}
+```
+
+Začneme tím, že získáme prvek formuláře pomocí `getElementById()` a poté získáme uživatelské jméno z inputu pomocí `loginForm.user.value`. Každý ovládací prvek formuláře lze přistupovat podle jeho názvu (nastaveného v HTML pomocí atributu `name`) jako vlastnosti formuláře.
+
+Podobně jako jsme to udělali pro registraci, vytvoříme další funkci pro provedení požadavku na server, tentokrát pro získání dat o účtu:
+
+```js
+async function getAccount(user) {
+  try {
+    const response = await fetch('//localhost:5000/api/accounts/' + encodeURIComponent(user));
+    return await response.json();
+  } catch (error) {
+    return { error: error.message || 'Unknown error' };
+  }
+}
+```
+
+Používáme `fetch` API k asynchronnímu požadavku na data ze serveru, ale tentokrát nepotřebujeme žádné další parametry kromě URL, protože pouze dotazujeme data. Ve výchozím nastavení `fetch` vytváří HTTP požadavek typu [`GET`](https://developer.mozilla.org/docs/Web/HTTP/Methods/GET), což je přesně to, co zde potřebujeme.
+
+✅ `encodeURIComponent()` je funkce, která escapuje speciální znaky pro URL. Jaké problémy bychom mohli mít, pokud bychom tuto funkci nevolali a použili přímo hodnotu `user` v URL?
+
+Nyní aktualizujeme naši funkci `login`, aby používala `getAccount`:
+
+```js
+async function login() {
+  const loginForm = document.getElementById('loginForm')
+  const user = loginForm.user.value;
+  const data = await getAccount(user);
+
+  if (data.error) {
+    return console.log('loginError', data.error);
+  }
+
+  account = data;
+  navigate('/dashboard');
+}
+```
+
+Protože je `getAccount` asynchronní funkce, musíme ji spárovat s klíčovým slovem `await`, abychom počkali na výsledek serveru. Stejně jako u každého požadavku na server musíme také řešit chybové případy. Prozatím přidáme pouze zprávu do logu, která zobrazí chybu, a vrátíme se k tomu později.
+
+Poté musíme data uložit někam, abychom je mohli později použít k zobrazení informací na dashboardu. Protože proměnná `account` zatím neexistuje, vytvoříme globální proměnnou na začátku našeho souboru:
+
+```js
+let account = null;
+```
+
+Po uložení uživatelských dat do proměnné můžeme přejít ze stránky *login* na *dashboard* pomocí funkce `navigate()`, kterou již máme.
+
+Nakonec musíme zavolat naši funkci `login`, když je odeslán přihlašovací formulář, a to úpravou HTML:
+
+```html
+<form id="loginForm" action="javascript:login()">
+```
+
+Otestujte, zda vše funguje správně, registrací nového účtu a pokusem o přihlášení pomocí stejného účtu.
+
+Než přejdeme k další části, můžeme také dokončit funkci `register` přidáním tohoto na konec funkce:
+
+```js
+account = result;
+navigate('/dashboard');
+```
+
+✅ Věděli jste, že ve výchozím nastavení můžete volat serverové API pouze z *téže domény a portu*, na kterém si prohlížíte webovou stránku? Toto je bezpečnostní mechanismus vynucovaný prohlížeči. Ale počkat, naše webová aplikace běží na `localhost:3000`, zatímco serverová API běží na `localhost:5000`, proč to funguje? Pomocí techniky nazvané [Cross-Origin Resource Sharing (CORS)](https://developer.mozilla.org/docs/Web/HTTP/CORS) je možné provádět cross-origin HTTP požadavky, pokud server přidá do odpovědi speciální hlavičky, které umožňují výjimky pro specifické domény.
+
+> Více o API se dozvíte v této [lekci](https://docs.microsoft.com/learn/modules/use-apis-discover-museum-art/?WT.mc_id=academic-77807-sagibbon)
+
+## Aktualizace HTML pro zobrazení dat
+
+Nyní, když máme uživatelská data, musíme aktualizovat existující HTML, aby je zobrazovalo. Již víme, jak získat prvek z DOM pomocí například `document.getElementById()`. Po získání základního prvku zde jsou některá API, která můžete použít k jeho úpravě nebo přidání podřízených prvků:
+
+- Pomocí vlastnosti [`textContent`](https://developer.mozilla.org/docs/Web/API/Node/textContent) můžete změnit text prvku. Všimněte si, že změna této hodnoty odstraní všechny podřízené prvky (pokud nějaké existují) a nahradí je poskytnutým textem. Proto je to také efektivní metoda pro odstranění všech podřízených prvků daného prvku přiřazením prázdného řetězce `''`.
+
+- Pomocí [`document.createElement()`](https://developer.mozilla.org/docs/Web/API/Document/createElement) spolu s metodou [`append()`](https://developer.mozilla.org/docs/Web/API/ParentNode/append) můžete vytvořit a připojit jeden nebo více nových podřízených prvků.
+
+✅ Pomocí vlastnosti [`innerHTML`](https://developer.mozilla.org/docs/Web/API/Element/innerHTML) prvku je také možné změnit jeho HTML obsah, ale tato metoda by měla být vyhnuta, protože je zranitelná vůči [útokům typu cross-site scripting (XSS)](https://developer.mozilla.org/docs/Glossary/Cross-site_scripting).
+
+### Úkol
+
+Než přejdeme na obrazovku dashboardu, je tu ještě jedna věc, kterou bychom měli udělat na stránce *login*. Aktuálně, pokud se pokusíte přihlásit s uživatelským jménem, které neexistuje, zobrazí se zpráva v konzoli, ale pro běžného uživatele se nic nezmění a neví, co se děje.
+
+Přidáme zástupný prvek do přihlašovacího formuláře, kde můžeme v případě potřeby zobrazit chybovou zprávu. Dobré místo by bylo těsně před přihlašovacím `<button>`:
+
+```html
+...
+<div id="loginError"></div>
+<button>Login</button>
+...
+```
+
+Tento `<div>` prvek je prázdný, což znamená, že na obrazovce se nic nezobrazí, dokud do něj nepřidáme nějaký obsah. Také mu dáme `id`, abychom ho mohli snadno získat pomocí JavaScriptu.
+
+Vraťte se do souboru `app.js` a vytvořte novou pomocnou funkci `updateElement`:
+
+```js
+function updateElement(id, text) {
+  const element = document.getElementById(id);
+  element.textContent = text;
+}
+```
+
+Tato funkce je poměrně jednoduchá: na základě *id* prvku a *textu* aktualizuje textový obsah DOM prvku s odpovídajícím `id`. Použijme tuto metodu místo předchozí chybové zprávy ve funkci `login`:
+
+```js
+if (data.error) {
+  return updateElement('loginError', data.error);
+}
+```
+
+Nyní, pokud se pokusíte přihlásit s neplatným účtem, měli byste vidět něco takového:
+
+![Snímek obrazovky zobrazující chybovou zprávu během přihlášení](../../../../translated_images/login-error.416fe019b36a63276764c2349df5d99e04ebda54fefe60c715ee87a28d5d4ad0.cs.png)
+
+Nyní máme chybový text, který se zobrazuje vizuálně, ale pokud to zkusíte s čtečkou obrazovky, všimnete si, že se nic neoznamuje. Aby byl text, který je dynamicky přidán na stránku, oznámen čtečkami obrazovky, bude potřeba použít něco, co se nazývá [Live Region](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/ARIA_Live_Regions). Zde použijeme specifický typ live regionu nazývaný alert:
+
+```html
+<div id="loginError" role="alert"></div>
+```
+
+Implementujte stejnou funkci pro chyby ve funkci `register` (nezapomeňte aktualizovat HTML).
+
+## Zobrazení informací na dashboardu
+
+Pomocí stejných technik, které jsme právě viděli, se postaráme také o zobrazení informací o účtu na stránce dashboardu.
+
+Takto vypadá objekt účtu přijatý ze serveru:
+
+```json
+{
+  "user": "test",
+  "currency": "$",
+  "description": "Test account",
+  "balance": 75,
+  "transactions": [
+    { "id": "1", "date": "2020-10-01", "object": "Pocket money", "amount": 50 },
+    { "id": "2", "date": "2020-10-03", "object": "Book", "amount": -10 },
+    { "id": "3", "date": "2020-10-04", "object": "Sandwich", "amount": -5 }
+  ],
+}
+```
+
+> Poznámka: Pro usnadnění můžete použít předem existující účet `test`, který je již naplněn daty.
+
+### Úkol
+
+Začněme tím, že nahradíme sekci "Balance" v HTML přidáním zástupných prvků:
+
+```html
+<section>
+  Balance: <span id="balance"></span><span id="currency"></span>
+</section>
+```
+
+Také přidáme novou sekci těsně pod ní pro zobrazení popisu účtu:
+
+```html
+<h2 id="description"></h2>
+```
+
+✅ Protože popis účtu funguje jako nadpis pro obsah pod ním, je označen sémanticky jako nadpis. Zjistěte více o tom, jak je [struktura nadpisů](https://www.nomensa.com/blog/2017/how-structure-headings-web-accessibility) důležitá pro přístupnost, a kriticky se podívejte na stránku, abyste zjistili, co dalšího by mohlo být nadpisem.
+
+Dále vytvoříme novou funkci v `app.js`, která vyplní zástupné prvky:
+
+```js
+function updateDashboard() {
+  if (!account) {
+    return navigate('/login');
+  }
+
+  updateElement('description', account.description);
+  updateElement('balance', account.balance.toFixed(2));
+  updateElement('currency', account.currency);
+}
+```
+
+Nejprve ověříme, že máme potřebná data o účtu, než budeme pokračovat. Poté použijeme funkci `updateElement()`, kterou jsme vytvořili dříve, k aktualizaci HTML.
+
+> Aby byl zůstatek zobrazen hezčí, používáme metodu [`toFixed(2)`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed), která vynutí zobrazení hodnoty se dvěma desetinnými místy.
+
+Nyní musíme zavolat naši funkci `updateDashboard()` pokaždé, když je načtena stránka dashboardu. Pokud jste již dokončili [úkol z lekce 1](../1-template-route/assignment.md), mělo by to být jednoduché, jinak můžete použít následující implementaci.
+
+Přidejte tento kód na konec funkce `updateRoute()`:
+
+```js
+if (typeof route.init === 'function') {
+  route.init();
+}
+```
+
+A aktualizujte definici tras s:
+
+```js
+const routes = {
+  '/login': { templateId: 'login' },
+  '/dashboard': { templateId: 'dashboard', init: updateDashboard }
+};
+```
+
+S touto změnou se při každém zobrazení stránky dashboardu zavolá funkce `updateDashboard()`. Po přihlášení byste pak měli být schopni vidět zůstatek účtu, měnu a popis.
+
+## Dynamické vytváření řádků tabulky pomocí HTML šablon
+
+V [první lekci](../1-template-route/README.md) jsme použili HTML šablony spolu s metodou [`appendChild()`](https://developer.mozilla.org/docs/Web/API/Node/appendChild) k implementaci navigace v naší aplikaci. Šablony mohou být také menší a použity k dynamickému vyplnění opakujících se částí stránky.
+
+Použijeme podobný přístup k zobrazení seznamu transakcí v HTML tabulce.
+
+### Úkol
+
+Přidejte novou šablonu do `<body>` HTML:
+
+```html
+<template id="transaction">
+  <tr>
+    <td></td>
+    <td></td>
+    <td></td>
+  </tr>
+</template>
+```
+
+Tato šablona představuje jeden řádek tabulky se třemi sloupci, které chceme vyplnit: *datum*, *objekt* a *částka* transakce.
+
+Poté přidejte tuto vlastnost `id` k `<tbody>` elementu tabulky v šabloně dashboardu, aby bylo snazší ji najít pomocí JavaScriptu:
+
+```html
+<tbody id="transactions"></tbody>
+```
+
+Naše HTML je připraveno, přepněme na JavaScriptový kód a vytvořme novou funkci `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;
+}
+```
+
+Tato funkce dělá přesně to, co její název napovídá: pomocí šablony, kterou jsme vytvořili dříve, vytvoří nový řádek tabulky a vyplní jeho obsah pomocí dat transakce. Použijeme ji ve funkci `updateDashboard()` k naplnění tabulky:
+
+```js
+const transactionsRows = document.createDocumentFragment();
+for (const transaction of account.transactions) {
+  const transactionRow = createTransactionRow(transaction);
+  transactionsRows.appendChild(transactionRow);
+}
+updateElement('transactions', transactionsRows);
+```
+
+Zde používáme metodu [`document.createDocumentFragment()`](https://developer.mozilla.org/docs/Web/API/Document/createDocumentFragment), která vytvoří nový DOM fragment, na kterém můžeme pracovat, než jej nakonec připojíme k naší HTML tabulce.
+
+Ještě musíme udělat jednu věc, než tento kód bude fungovat, protože naše funkce `updateElement()` aktuálně podporuje pouze textový obsah. Trochu upravíme její kód:
+
+```js
+function updateElement(id, textOrNode) {
+  const element = document.getElementById(id);
+  element.textContent = ''; // Removes all children
+  element.append(textOrNode);
+}
+```
+
+Používáme metodu [`append()`](https://developer.mozilla.org/docs/Web/API/ParentNode/append), protože umožňuje připojit buď text, nebo [DOM uzly](https://developer.mozilla.org/docs/Web/API/Node) k nadřazenému prvku, což je ideální pro všechny naše případy použití.
+Pokud se pokusíte přihlásit pomocí účtu `test`, měli byste nyní na hlavním panelu vidět seznam transakcí 🎉.
+
+---
+
+## 🚀 Výzva
+
+Spolupracujte na tom, aby stránka hlavního panelu vypadala jako skutečná bankovní aplikace. Pokud jste již svou aplikaci upravili, zkuste použít [media queries](https://developer.mozilla.org/docs/Web/CSS/Media_Queries) k vytvoření [responzivního designu](https://developer.mozilla.org/docs/Web/Progressive_web_apps/Responsive/responsive_design_building_blocks), který bude dobře fungovat jak na stolních počítačích, tak na mobilních zařízeních.
+
+Zde je příklad upravené stránky hlavního panelu:
+
+![Screenshot příkladu výsledku hlavního panelu po úpravě](../../../../translated_images/screen2.123c82a831a1d14ab2061994be2fa5de9cec1ce651047217d326d4773a6348e4.cs.png)
+
+## Kvíz po přednášce
+
+[Kvíz po přednášce](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/46)
+
+## Úkol
+
+[Refaktorujte a okomentujte svůj kód](assignment.md)
+
+---
+
+**Prohlášení**:  
+Tento dokument byl přeložen pomocí služby pro automatický překlad [Co-op Translator](https://github.com/Azure/co-op-translator). I když se snažíme o přesnost, mějte prosím na paměti, že automatické překlady mohou obsahovat chyby nebo nepřesnosti. Původní dokument v jeho původním jazyce by měl být považován za autoritativní zdroj. Pro důležité informace doporučujeme profesionální lidský překlad. Neodpovídáme za žádná nedorozumění nebo nesprávné interpretace vyplývající z použití tohoto překladu.
\ No newline at end of file
diff --git a/translations/cs/7-bank-project/3-data/assignment.md b/translations/cs/7-bank-project/3-data/assignment.md
new file mode 100644
index 00000000..4680dda6
--- /dev/null
+++ b/translations/cs/7-bank-project/3-data/assignment.md
@@ -0,0 +1,29 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "a4abf305ede1cfaadd56a8fab4b4c288",
+  "translation_date": "2025-08-28T03:27:31+00:00",
+  "source_file": "7-bank-project/3-data/assignment.md",
+  "language_code": "cs"
+}
+-->
+# Refaktorujte a komentujte svůj kód
+
+## Pokyny
+
+Jak vaše kódová základna roste, je důležité pravidelně refaktorovat kód, aby byl čitelný a udržovatelný v průběhu času. Přidejte komentáře a refaktorujte svůj `app.js`, abyste zlepšili kvalitu kódu:
+
+- Extrahujte konstanty, jako je základní URL adresa serverového API
+- Zjednodušte podobný kód: například můžete vytvořit funkci `sendRequest()`, která sloučí kód používaný v `createAccount()` a `getAccount()`
+- Přeskupte kód tak, aby byl přehlednější, a přidejte komentáře
+
+## Hodnocení
+
+| Kritéria | Vynikající                                                                                                                                                     | Dostatečné                                                                                       | Vyžaduje zlepšení                                                                     |
+| -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------- |
+|          | Kód je okomentovaný, dobře organizovaný do různých sekcí a snadno čitelný. Konstanty jsou extrahovány a byla vytvořena zjednodušená funkce `sendRequest()`.     | Kód je čistý, ale stále by mohl být vylepšen více komentáři, extrakcí konstant nebo zjednodušením. | Kód je chaotický, neokomentovaný, konstanty nejsou extrahovány a kód není zjednodušen. |
+
+---
+
+**Prohlášení**:  
+Tento dokument byl přeložen pomocí služby pro automatický překlad [Co-op Translator](https://github.com/Azure/co-op-translator). I když se snažíme o přesnost, mějte prosím na paměti, že automatické překlady mohou obsahovat chyby nebo nepřesnosti. Původní dokument v jeho původním jazyce by měl být považován za autoritativní zdroj. Pro důležité informace se doporučuje profesionální lidský překlad. Neodpovídáme za žádná nedorozumění nebo nesprávné interpretace vyplývající z použití tohoto překladu.
\ No newline at end of file
diff --git a/translations/cs/7-bank-project/4-state-management/README.md b/translations/cs/7-bank-project/4-state-management/README.md
new file mode 100644
index 00000000..82303196
--- /dev/null
+++ b/translations/cs/7-bank-project/4-state-management/README.md
@@ -0,0 +1,294 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "4fa20c513e367e9cdd401bf49ae16e33",
+  "translation_date": "2025-08-28T03:34:35+00:00",
+  "source_file": "7-bank-project/4-state-management/README.md",
+  "language_code": "cs"
+}
+-->
+# Vytvoření bankovní aplikace, část 4: Koncepty správy stavu
+
+## Kvíz před lekcí
+
+[Kvíz před lekcí](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/47)
+
+### Úvod
+
+Jak webová aplikace roste, stává se stále obtížnější sledovat všechny datové toky. Který kód získává data, která stránka je využívá, kde a kdy je třeba je aktualizovat... snadno se dostanete k nepořádnému kódu, který je těžké udržovat. To platí zejména tehdy, když potřebujete sdílet data mezi různými stránkami aplikace, například uživatelská data. Koncept *správy stavu* existoval vždy ve všech typech programů, ale jak webové aplikace rostou na složitosti, stává se klíčovým bodem, o kterém je třeba během vývoje přemýšlet.
+
+V této závěrečné části se podíváme na aplikaci, kterou jsme vytvořili, a přehodnotíme, jak je spravován stav, abychom umožnili podporu obnovení prohlížeče kdykoli a zachování dat mezi uživatelskými relacemi.
+
+### Předpoklady
+
+Musíte mít dokončenou část [získávání dat](../3-data/README.md) webové aplikace pro tuto lekci. Také je třeba nainstalovat [Node.js](https://nodejs.org) a [spustit serverové API](../api/README.md) lokálně, abyste mohli spravovat data účtu.
+
+Můžete otestovat, zda server běží správně, spuštěním tohoto příkazu v terminálu:
+
+```sh
+curl http://localhost:5000/api
+# -> should return "Bank API v1.0.0" as a result
+```
+
+---
+
+## Přehodnocení správy stavu
+
+V [předchozí lekci](../3-data/README.md) jsme představili základní koncept stavu v naší aplikaci pomocí globální proměnné `account`, která obsahuje bankovní data aktuálně přihlášeného uživatele. Naše současná implementace má však několik nedostatků. Zkuste obnovit stránku, když jste na přehledu. Co se stane?
+
+V aktuálním kódu jsou tři problémy:
+
+- Stav není zachován, protože obnovení prohlížeče vás vrátí na přihlašovací stránku.
+- Existuje více funkcí, které stav upravují. Jak aplikace roste, může být obtížné sledovat změny a snadno zapomenete na aktualizaci jedné z nich.
+- Stav není vyčištěn, takže když kliknete na *Odhlásit se*, data účtu tam stále jsou, i když jste na přihlašovací stránce.
+
+Mohli bychom aktualizovat náš kód, abychom tyto problémy řešili jeden po druhém, ale to by vedlo k většímu duplicitnímu kódu a aplikace by byla složitější a obtížněji udržovatelná. Nebo bychom si mohli na pár minut udělat pauzu a přehodnotit naši strategii.
+
+> Jaké problémy se zde vlastně snažíme vyřešit?
+
+[Správa stavu](https://en.wikipedia.org/wiki/State_management) je o nalezení dobrého přístupu k řešení těchto dvou konkrétních problémů:
+
+- Jak udržet datové toky v aplikaci srozumitelné?
+- Jak udržet data stavu vždy synchronizovaná s uživatelským rozhraním (a naopak)?
+
+Jakmile se o tyto problémy postaráte, jakékoli další problémy, které byste mohli mít, mohou být buď již vyřešeny, nebo se staly snazšími k řešení. Existuje mnoho možných přístupů k řešení těchto problémů, ale my se zaměříme na běžné řešení, které spočívá v **centralizaci dat a způsobů jejich změny**. Datové toky by vypadaly takto:
+
+![Schéma zobrazující datové toky mezi HTML, uživatelskými akcemi a stavem](../../../../translated_images/data-flow.fa2354e0908fecc89b488010dedf4871418a992edffa17e73441d257add18da4.cs.png)
+
+> Zde se nebudeme zabývat částí, kde data automaticky spouštějí aktualizaci zobrazení, protože je to spojeno s pokročilejšími koncepty [reaktivního programování](https://en.wikipedia.org/wiki/Reactive_programming). Je to dobré téma k dalšímu studiu, pokud se chcete ponořit hlouběji.
+
+✅ Existuje mnoho knihoven s různými přístupy ke správě stavu, přičemž [Redux](https://redux.js.org) je populární volbou. Podívejte se na koncepty a vzory, které používají, protože často poskytují dobrý přehled o potenciálních problémech, kterým můžete čelit ve velkých webových aplikacích, a o tom, jak je lze řešit.
+
+### Úkol
+
+Začneme malou refaktorizací. Nahraďte deklaraci `account`:
+
+```js
+let account = null;
+```
+
+Tímto:
+
+```js
+let state = {
+  account: null
+};
+```
+
+Myšlenkou je *centralizovat* všechna data naší aplikace do jediného objektu stavu. Zatím máme ve stavu pouze `account`, takže se toho moc nezmění, ale vytváříme tím cestu pro budoucí rozšíření.
+
+Musíme také aktualizovat funkce, které jej používají. Ve funkcích `register()` a `login()` nahraďte `account = ...` za `state.account = ...`;
+
+Na začátek funkce `updateDashboard()` přidejte tento řádek:
+
+```js
+const account = state.account;
+```
+
+Tato refaktorizace sama o sobě nepřinesla mnoho vylepšení, ale myšlenkou bylo položit základy pro další změny.
+
+## Sledování změn dat
+
+Nyní, když jsme zavedli objekt `state` pro ukládání našich dat, dalším krokem je centralizace aktualizací. Cílem je usnadnit sledování jakýchkoli změn a kdy k nim dochází.
+
+Abychom zabránili provádění změn v objektu `state`, je také dobré považovat jej za [*neměnný*](https://en.wikipedia.org/wiki/Immutable_object), což znamená, že jej nelze vůbec upravovat. To také znamená, že musíte vytvořit nový objekt stavu, pokud chcete v něm něco změnit. Tímto způsobem si vytvoříte ochranu proti potenciálně nežádoucím [vedlejším efektům](https://en.wikipedia.org/wiki/Side_effect_(computer_science)) a otevřete možnosti pro nové funkce ve vaší aplikaci, jako je implementace funkce zpět/znovu, a zároveň usnadníte ladění. Například byste mohli zaznamenávat každou změnu provedenou ve stavu a uchovávat historii změn, abyste pochopili zdroj chyby.
+
+V JavaScriptu můžete použít [`Object.freeze()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze) k vytvoření neměnné verze objektu. Pokud se pokusíte provést změny v neměnném objektu, bude vyvolána výjimka.
+
+✅ Znáte rozdíl mezi *mělkým* a *hlubokým* neměnným objektem? Můžete si o tom přečíst [zde](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze#What_is_shallow_freeze).
+
+### Úkol
+
+Vytvořme novou funkci `updateState()`:
+
+```js
+function updateState(property, newData) {
+  state = Object.freeze({
+    ...state,
+    [property]: newData
+  });
+}
+```
+
+V této funkci vytváříme nový objekt stavu a kopírujeme data z předchozího stavu pomocí [*operátoru rozbalení (`...`)*](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/Spread_syntax#Spread_in_object_literals). Poté přepíšeme konkrétní vlastnost objektu stavu novými daty pomocí [notace hranatých závorek](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Working_with_Objects#Objects_and_properties) `[property]` pro přiřazení. Nakonec objekt uzamkneme, aby nebylo možné provádět úpravy, pomocí `Object.freeze()`. Zatím máme ve stavu pouze vlastnost `account`, ale s tímto přístupem můžete do stavu přidat tolik vlastností, kolik potřebujete.
+
+Také aktualizujeme inicializaci `state`, abychom zajistili, že počáteční stav bude také zmrazen:
+
+```js
+let state = Object.freeze({
+  account: null
+});
+```
+
+Poté aktualizujte funkci `register` nahrazením přiřazení `state.account = result;` za:
+
+```js
+updateState('account', result);
+```
+
+Uděláme totéž s funkcí `login`, kde nahradíme `state.account = data;` za:
+
+```js
+updateState('account', data);
+```
+
+Nyní využijeme příležitosti k opravě problému, kdy data účtu nejsou vymazána, když uživatel klikne na *Odhlásit se*.
+
+Vytvořte novou funkci `logout()`:
+
+```js
+function logout() {
+  updateState('account', null);
+  navigate('/login');
+}
+```
+
+V `updateDashboard()` nahraďte přesměrování `return navigate('/login');` za `return logout();`;
+
+Zkuste zaregistrovat nový účet, odhlásit se a znovu se přihlásit, abyste ověřili, že vše stále funguje správně.
+
+> Tip: můžete se podívat na všechny změny stavu přidáním `console.log(state)` na konec `updateState()` a otevřením konzole v nástrojích pro vývojáře vašeho prohlížeče.
+
+## Zachování stavu
+
+Většina webových aplikací potřebuje uchovávat data, aby mohla správně fungovat. Všechna kritická data jsou obvykle uložena v databázi a přistupuje se k nim prostřednictvím serverového API, jako jsou například uživatelská data účtu v našem případě. Někdy je však také zajímavé uchovávat některá data na klientské aplikaci běžící ve vašem prohlížeči, pro lepší uživatelský zážitek nebo pro zlepšení výkonu načítání.
+
+Když chcete uchovávat data ve vašem prohlížeči, měli byste si položit několik důležitých otázek:
+
+- *Jsou data citlivá?* Měli byste se vyhnout ukládání jakýchkoli citlivých dat na klienta, jako jsou uživatelská hesla.
+- *Jak dlouho potřebujete tato data uchovávat?* Plánujete přistupovat k těmto datům pouze během aktuální relace, nebo je chcete uchovávat navždy?
+
+Existuje několik způsobů, jak ukládat informace uvnitř webové aplikace, v závislosti na tom, čeho chcete dosáhnout. Například můžete použít URL k uložení vyhledávacího dotazu a umožnit jeho sdílení mezi uživateli. Můžete také použít [HTTP cookies](https://developer.mozilla.org/docs/Web/HTTP/Cookies), pokud je potřeba data sdílet se serverem, například informace o [autentizaci](https://en.wikipedia.org/wiki/Authentication).
+
+Další možností je použití jedné z mnoha API pro ukládání dat v prohlížeči. Dvě z nich jsou obzvláště zajímavé:
+
+- [`localStorage`](https://developer.mozilla.org/docs/Web/API/Window/localStorage): [Key/Value store](https://en.wikipedia.org/wiki/Key%E2%80%93value_database), který umožňuje uchovávat data specifická pro aktuální webovou stránku mezi různými relacemi. Data uložená v něm nikdy nevyprší.
+- [`sessionStorage`](https://developer.mozilla.org/docs/Web/API/Window/sessionStorage): funguje stejně jako `localStorage`, kromě toho, že data uložená v něm jsou vymazána, když relace skončí (když je prohlížeč zavřen).
+
+Všimněte si, že obě tato API umožňují ukládat pouze [řetězce](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String). Pokud chcete ukládat složité objekty, budete je muset serializovat do formátu [JSON](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON) pomocí [`JSON.stringify()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify).
+
+✅ Pokud chcete vytvořit webovou aplikaci, která nepracuje se serverem, je také možné vytvořit databázi na klientovi pomocí [`IndexedDB` API](https://developer.mozilla.org/docs/Web/API/IndexedDB_API). Toto je vyhrazeno pro pokročilé případy použití nebo pokud potřebujete ukládat významné množství dat, protože je složitější na použití.
+
+### Úkol
+
+Chceme, aby naši uživatelé zůstali přihlášeni, dokud explicitně nekliknou na tlačítko *Odhlásit se*, takže použijeme `localStorage` k ukládání dat účtu. Nejprve definujme klíč, který použijeme k ukládání našich dat.
+
+```js
+const storageKey = 'savedAccount';
+```
+
+Poté přidejte tento řádek na konec funkce `updateState()`:
+
+```js
+localStorage.setItem(storageKey, JSON.stringify(state.account));
+```
+
+Tímto způsobem budou data uživatelského účtu zachována a vždy aktuální, protože jsme dříve centralizovali všechny aktualizace stavu. Zde začínáme těžit ze všech našich předchozích refaktorů 🙂.
+
+Protože jsou data uložena, musíme se také postarat o jejich obnovení při načtení aplikace. Vzhledem k tomu, že začneme mít více inicializačního kódu, může být dobrý nápad vytvořit novou funkci `init`, která také zahrnuje náš předchozí kód na konci `app.js`:
+
+```js
+function init() {
+  const savedAccount = localStorage.getItem(storageKey);
+  if (savedAccount) {
+    updateState('account', JSON.parse(savedAccount));
+  }
+
+  // Our previous initialization code
+  window.onpopstate = () => updateRoute();
+  updateRoute();
+}
+
+init();
+```
+
+Zde načítáme uložená data a pokud nějaká existují, aktualizujeme stav odpovídajícím způsobem. Je důležité to udělat *před* aktualizací trasy, protože během aktualizace stránky může být kód závislý na stavu.
+
+Můžeme také nastavit stránku *Dashboard* jako výchozí stránku naší aplikace, protože nyní zachováváme data účtu. Pokud žádná data nenajdeme, přehled se stejně postará o přesměrování na stránku *Login*. V `updateRoute()` nahraďte výchozí `return navigate('/login');` za `return navigate('/dashboard');`.
+
+Nyní se přihlaste do aplikace a zkuste obnovit stránku. Měli byste zůstat na přehledu. Touto aktualizací jsme se postarali o všechny naše počáteční problémy...
+
+## Aktualizace dat
+
+...Ale možná jsme také vytvořili nový problém. Ups!
+
+Přejděte na přehled pomocí účtu `test`, poté spusťte tento příkaz v terminálu pro vytvoření nové transakce:
+
+```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
+```
+
+Zkuste nyní obnovit stránku přehledu v prohlížeči. Co se stane? Vidíte novou transakci?
+
+Stav je zachován na neurčito díky `localStorage`, ale to také znamená, že se nikdy neaktualizuje, dokud se z aplikace neodhlásíte a znovu nepřihlásíte!
+
+Jednou z možných strategií, jak to opravit, je znovu načíst data účtu pokaždé, když je přehled načten, aby se předešlo zastaralým datům.
+
+### Úkol
+
+Vytvořte novou funkci `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);
+}
+```
+
+Tato metoda ověřuje, že jsme aktuálně přihlášeni, a poté znovu načte data účtu ze serveru.
+
+Vytvořte další funkci s názvem `refresh`:
+
+```js
+async function refresh() {
+  await updateAccountData();
+  updateDashboard();
+}
+```
+
+Tato funkce aktualizuje data účtu a poté se postará o aktualizaci HTML stránky přehledu. To je to, co potřebujeme zavolat, když je načtena trasa přehledu. Aktualizujte definici trasy na:
+
+```js
+const routes = {
+  '/login': { templateId: 'login' },
+  '/dashboard': { templateId: 'dashboard', init: refresh }
+};
+```
+
+Zkuste nyní obnovit přehled, měl by zobrazit aktualizovaná data účtu.
+
+---
+
+## 🚀 Výzva
+
+Nyní, když znovu načítáme data účtu pokaždé, když je přehled načten, myslíte si, že stále potřebujeme zachovávat *všechna data účtu*?
+
+Zkuste společně změnit, co je uloženo a načítáno z `localStorage`, aby zahrnovalo pouze to, co je pro fungování aplikace absolutně nezbytné.
+
+## Kvíz po lekci
+[Post-přednáškový kvíz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/48)
+
+## Úkol
+
+[Implementujte dialog "Přidat transakci"](assignment.md)
+
+Zde je příklad výsledku po dokončení úkolu:
+
+![Snímek obrazovky zobrazující příklad dialogu "Přidat transakci"](../../../../translated_images/dialog.93bba104afeb79f12f65ebf8f521c5d64e179c40b791c49c242cf15f7e7fab15.cs.png)
+
+---
+
+**Prohlášení**:  
+Tento dokument byl přeložen pomocí služby AI pro překlady [Co-op Translator](https://github.com/Azure/co-op-translator). Ačkoli se snažíme o přesnost, mějte prosím na paměti, že automatizované překlady mohou obsahovat chyby nebo nepřesnosti. Původní dokument v jeho původním jazyce by měl být považován za autoritativní zdroj. Pro důležité informace se doporučuje profesionální lidský překlad. Neodpovídáme za žádné nedorozumění nebo nesprávné interpretace vyplývající z použití tohoto překladu.
\ No newline at end of file
diff --git a/translations/cs/7-bank-project/4-state-management/assignment.md b/translations/cs/7-bank-project/4-state-management/assignment.md
new file mode 100644
index 00000000..73b53662
--- /dev/null
+++ b/translations/cs/7-bank-project/4-state-management/assignment.md
@@ -0,0 +1,39 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "f23a868536c07da991b1d4e773161e25",
+  "translation_date": "2025-08-28T03:35:45+00:00",
+  "source_file": "7-bank-project/4-state-management/assignment.md",
+  "language_code": "cs"
+}
+-->
+# Implementace dialogu "Přidat transakci"
+
+## Pokyny
+
+Naše bankovní aplikace stále postrádá jednu důležitou funkci: možnost zadat nové transakce.
+Použijte vše, co jste se naučili v předchozích čtyřech lekcích, a implementujte dialog "Přidat transakci":
+
+- Přidejte tlačítko "Přidat transakci" na stránku dashboardu
+- Vytvořte buď novou stránku s HTML šablonou, nebo použijte JavaScript k zobrazení/skrytí HTML dialogu bez opuštění stránky dashboardu (můžete použít vlastnost [`hidden`](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/hidden) nebo CSS třídy)
+- Ujistěte se, že zpracováváte [přístupnost pro klávesnici a čtečky obrazovky](https://developer.paciellogroup.com/blog/2018/06/the-current-state-of-modal-dialog-accessibility/) pro dialog
+- Implementujte HTML formulář pro příjem vstupních dat
+- Vytvořte JSON data z dat formuláře a odešlete je na API
+- Aktualizujte stránku dashboardu s novými daty
+
+Podívejte se na [specifikace serverového API](../api/README.md), abyste zjistili, které API je potřeba volat a jaký je očekávaný formát JSON.
+
+Zde je příklad výsledku po dokončení úkolu:
+
+![Screenshot zobrazující příklad dialogu "Přidat transakci"](../../../../translated_images/dialog.93bba104afeb79f12f65ebf8f521c5d64e179c40b791c49c242cf15f7e7fab15.cs.png)
+
+## Hodnocení
+
+| Kritéria | Vynikající                                                                                       | Přiměřené                                                                                                              | Potřebuje zlepšení                          |
+| -------- | ------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------- | ------------------------------------------- |
+|          | Přidání transakce je kompletně implementováno podle všech nejlepších postupů z lekcí.            | Přidání transakce je implementováno, ale ne podle nejlepších postupů z lekcí, nebo funguje jen částečně.               | Přidání transakce vůbec nefunguje.          |
+
+---
+
+**Prohlášení**:  
+Tento dokument byl přeložen pomocí služby pro automatický překlad [Co-op Translator](https://github.com/Azure/co-op-translator). I když se snažíme o přesnost, mějte na paměti, že automatické překlady mohou obsahovat chyby nebo nepřesnosti. Původní dokument v jeho původním jazyce by měl být považován za autoritativní zdroj. Pro kritické informace se doporučuje profesionální lidský překlad. Nenese odpovědnost za žádné nedorozumění nebo nesprávné interpretace vyplývající z použití tohoto překladu.
\ No newline at end of file
diff --git a/translations/cs/7-bank-project/README.md b/translations/cs/7-bank-project/README.md
new file mode 100644
index 00000000..4c35d91a
--- /dev/null
+++ b/translations/cs/7-bank-project/README.md
@@ -0,0 +1,35 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "830359535306594b448db6575ce5cdee",
+  "translation_date": "2025-08-28T03:23:38+00:00",
+  "source_file": "7-bank-project/README.md",
+  "language_code": "cs"
+}
+-->
+# :dollar: Vytvořte banku
+
+V tomto projektu se naučíte, jak vytvořit fiktivní banku. Tyto lekce obsahují pokyny, jak navrhnout webovou aplikaci, vytvořit trasy, sestavit formuláře, spravovat stav a získávat data z API, ze kterého můžete načítat data banky.
+
+| ![Screen1](../../../translated_images/screen1.baccbba0f1f93364672eb250d2fbd21574bb1caf79a2155022dc098a741cbdfe.cs.png) | ![Screen2](../../../translated_images/screen2.123c82a831a1d14ab2061994be2fa5de9cec1ce651047217d326d4773a6348e4.cs.png) |
+|--------------------------------|--------------------------------|
+
+## Lekce
+
+1. [HTML šablony a trasy ve webové aplikaci](1-template-route/README.md)
+2. [Vytvoření přihlašovacího a registračního formuláře](2-forms/README.md)
+3. [Metody získávání a používání dat](3-data/README.md)
+4. [Koncepty správy stavu](4-state-management/README.md)
+
+### Poděkování
+
+Tyto lekce byly napsány s :hearts: od [Yohan Lasorsa](https://twitter.com/sinedied).
+
+Pokud máte zájem naučit se, jak vytvořit [serverové API](/7-bank-project/api/README.md) použité v těchto lekcích, můžete sledovat [tuto sérii videí](https://aka.ms/NodeBeginner) (zejména videa 17 až 21).
+
+Můžete se také podívat na [tento interaktivní výukový program Learn](https://aka.ms/learn/express-api).
+
+---
+
+**Prohlášení**:  
+Tento dokument byl přeložen pomocí služby pro automatický překlad [Co-op Translator](https://github.com/Azure/co-op-translator). I když se snažíme o přesnost, mějte na paměti, že automatické překlady mohou obsahovat chyby nebo nepřesnosti. Původní dokument v jeho původním jazyce by měl být považován za autoritativní zdroj. Pro důležité informace se doporučuje profesionální lidský překlad. Neodpovídáme za žádná nedorozumění nebo nesprávné interpretace vyplývající z použití tohoto překladu.
\ No newline at end of file
diff --git a/translations/cs/7-bank-project/api/README.md b/translations/cs/7-bank-project/api/README.md
new file mode 100644
index 00000000..00bb5599
--- /dev/null
+++ b/translations/cs/7-bank-project/api/README.md
@@ -0,0 +1,48 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "9884f8c8a61cf56214450f8b16a094ce",
+  "translation_date": "2025-08-28T03:27:58+00:00",
+  "source_file": "7-bank-project/api/README.md",
+  "language_code": "cs"
+}
+-->
+# Bank API
+
+> Bank API vytvořené pomocí [Node.js](https://nodejs.org) + [Express](https://expressjs.com/).
+
+API je již vytvořené a není součástí tohoto cvičení.
+
+Pokud se však chcete naučit, jak vytvořit podobné API, můžete sledovat tuto sérii videí: https://aka.ms/NodeBeginner (videa 17 až 21 pokrývají přesně toto API).
+
+Můžete se také podívat na tento interaktivní tutoriál: https://aka.ms/learn/express-api
+
+## Spuštění serveru
+
+Ujistěte se, že máte nainstalovaný [Node.js](https://nodejs.org).
+
+1. Naklonujte tento repozitář [The Web-Dev-For-Beginners](https://github.com/microsoft/Web-Dev-For-Beginners).
+2. Otevřete terminál a přejděte do složky `Web-Dev-For-Beginners/7-bank-project/api`.
+3. Spusťte `npm install` a počkejte, až se nainstalují balíčky (může to chvíli trvat v závislosti na kvalitě vašeho internetového připojení).
+4. Po dokončení instalace spusťte `npm start` a je to hotovo.
+
+Server by měl začít naslouchat na portu `5000`.
+*Tento server bude běžet společně s hlavním serverem bankovní aplikace (naslouchajícím na portu `3000`), nezavírejte ho.*
+
+> Poznámka: všechny záznamy jsou uloženy v paměti a nejsou trvale uchovány, takže při zastavení serveru se všechna data ztratí.
+
+## Podrobnosti o API
+
+Route                                        | Popis
+---------------------------------------------|------------------------------------
+GET    /api/                                 | Získat informace o serveru
+POST   /api/accounts/                        | Vytvořit účet, např.: `{ user: 'Yohan', description: 'My budget', currency: 'EUR', balance: 100 }`
+GET    /api/accounts/:user                   | Získat všechna data pro zadaný účet
+DELETE /api/accounts/:user                   | Odstranit zadaný účet
+POST   /api/accounts/:user/transactions      | Přidat transakci, např.: `{ date: '2020-07-23T18:25:43.511Z', object: 'Bought a book', amount: -20 }`
+DELETE  /api/accounts/:user/transactions/:id | Odstranit zadanou transakci
+
+---
+
+**Prohlášení**:  
+Tento dokument byl přeložen pomocí služby pro automatický překlad [Co-op Translator](https://github.com/Azure/co-op-translator). Ačkoli se snažíme o přesnost, mějte prosím na paměti, že automatické překlady mohou obsahovat chyby nebo nepřesnosti. Původní dokument v jeho původním jazyce by měl být považován za autoritativní zdroj. Pro důležité informace se doporučuje profesionální lidský překlad. Nenese odpovědnost za žádné nedorozumění nebo nesprávné interpretace vyplývající z použití tohoto překladu.
\ No newline at end of file
diff --git a/translations/cs/7-bank-project/solution/README.md b/translations/cs/7-bank-project/solution/README.md
new file mode 100644
index 00000000..7cd4a78b
--- /dev/null
+++ b/translations/cs/7-bank-project/solution/README.md
@@ -0,0 +1,27 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "461aa4fc74c6b1789c3a13b5d82c0cd9",
+  "translation_date": "2025-08-28T03:28:22+00:00",
+  "source_file": "7-bank-project/solution/README.md",
+  "language_code": "cs"
+}
+-->
+# Bankovní aplikace
+
+> Příklad řešení projektu bankovní aplikace, vytvořený pomocí čistého HTML5, CSS a JavaScriptu (bez použití frameworků nebo knihoven).
+
+## Spuštění aplikace
+
+Nejprve se ujistěte, že máte spuštěný [API server](../api/README.md).
+
+Pro spuštění aplikace lze použít jakýkoliv webový server, ale protože byste měli mít nainstalovaný [Node.js](https://nodejs.org) pro spuštění API, můžete:
+
+1. Naklonovat tento repozitář pomocí Git.
+2. Otevřít terminál, přejít do tohoto adresáře a spustit `npx lite-server .`. Tím se spustí vývojový webový server na portu `3000`.
+3. Otevřít `http://localhost:3000` v prohlížeči pro spuštění aplikace.
+
+---
+
+**Upozornění**:  
+Tento dokument byl přeložen pomocí služby pro automatický překlad [Co-op Translator](https://github.com/Azure/co-op-translator). I když se snažíme o co největší přesnost, mějte prosím na paměti, že automatické překlady mohou obsahovat chyby nebo nepřesnosti. Původní dokument v jeho původním jazyce by měl být považován za závazný zdroj. Pro důležité informace doporučujeme profesionální lidský překlad. Neodpovídáme za žádná nedorozumění nebo nesprávné výklady vyplývající z použití tohoto překladu.
\ No newline at end of file
diff --git a/translations/cs/8-code-editor/1-using-a-code-editor/README.md b/translations/cs/8-code-editor/1-using-a-code-editor/README.md
new file mode 100644
index 00000000..8f347eb9
--- /dev/null
+++ b/translations/cs/8-code-editor/1-using-a-code-editor/README.md
@@ -0,0 +1,174 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "7aa6e4f270d38d9cb17f2b5bd86b863d",
+  "translation_date": "2025-08-28T04:23:29+00:00",
+  "source_file": "8-code-editor/1-using-a-code-editor/README.md",
+  "language_code": "cs"
+}
+-->
+# Používání editoru kódu
+
+Tato lekce pokrývá základy používání [VSCode.dev](https://vscode.dev), webového editoru kódu, abyste mohli upravovat svůj kód a přispívat do projektu, aniž byste museli cokoli instalovat na svůj počítač.
+
+<!----
+TODO: přidat volitelný obrázek
+![Používání editoru kódu](../../../../translated_images/webdev101-vscode-dev.f53c14e8dad231ea09d9e07a2db4a01551d2dc6cdf21225038389e11156af023.cs.png)
+> Sketchnote od [Jméno autora](https://example.com)
+---->
+
+<!---
+## Kvíz před lekcí
+[Kvíz před lekcí](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/3)
+---->
+
+## Cíle učení
+
+V této lekci se naučíte:
+
+- Používat editor kódu v projektu
+- Sledovat změny pomocí verzovacího systému
+- Přizpůsobit editor pro vývoj
+
+### Předpoklady
+
+Než začnete, budete si muset vytvořit účet na [GitHub](https://github.com). Přejděte na [GitHub](https://github.com/) a vytvořte si účet, pokud ho ještě nemáte.
+
+### Úvod
+
+Editor kódu je nezbytný nástroj pro psaní programů a spolupráci na existujících projektech. Jakmile pochopíte základy editoru a naučíte se využívat jeho funkce, budete je moci aplikovat při psaní kódu.
+
+## Začínáme s VSCode.dev
+
+[VSCode.dev](https://vscode.dev) je editor kódu na webu. Nemusíte nic instalovat, stačí ho otevřít jako jakoukoli jinou webovou stránku. Chcete-li začít s editorem, otevřete následující odkaz: [https://vscode.dev](https://vscode.dev). Pokud nejste přihlášeni na [GitHub](https://github.com/), postupujte podle pokynů k přihlášení nebo vytvoření nového účtu a poté se přihlaste.
+
+Po načtení by měl editor vypadat podobně jako na tomto obrázku:
+
+![Výchozí VSCode.dev](../../../../translated_images/default-vscode-dev.5d06881d65c1b3234ce50cd9ed3b0028e6031ad5f5b441bcbed96bfa6311f6d0.cs.png)
+
+Existují tři hlavní sekce, od levé strany směrem doprava:
+
+1. _Panel aktivit_, který obsahuje několik ikon, jako lupa 🔎, ozubené kolečko ⚙️ a další.
+1. Rozšířený panel aktivit, který ve výchozím nastavení zobrazuje _Průzkumník_, nazývaný _postranní panel_.
+1. A nakonec oblast kódu napravo.
+
+Klikněte na každou z ikon, abyste zobrazili různé nabídky. Po dokončení klikněte na _Průzkumník_, abyste se vrátili na výchozí obrazovku.
+
+Když začnete vytvářet kód nebo upravovat existující kód, bude se to odehrávat v největší oblasti napravo. Tuto oblast budete také používat k vizualizaci existujícího kódu, což si vyzkoušíte v další části.
+
+## Otevření GitHub repozitáře
+
+První věc, kterou budete potřebovat, je otevřít GitHub repozitář. Existuje několik způsobů, jak repozitář otevřít. V této sekci si ukážeme dva různé způsoby, jak můžete repozitář otevřít a začít pracovat na změnách.
+
+### 1. Pomocí editoru
+
+Použijte samotný editor k otevření vzdáleného repozitáře. Pokud přejdete na [VSCode.dev](https://vscode.dev), uvidíte tlačítko _"Open Remote Repository"_:
+
+![Otevřít vzdálený repozitář](../../../../translated_images/open-remote-repository.bd9c2598b8949e7fc283cdfc8f4050c6205a7c7c6d3f78c4b135115d037d6fa2.cs.png)
+
+Můžete také použít příkazovou paletu. Příkazová paleta je vstupní pole, do kterého můžete zadat libovolné slovo, které je součástí příkazu nebo akce, abyste našli správný příkaz k provedení. Použijte nabídku vlevo nahoře, poté vyberte _View_ a následně _Command Palette_, nebo použijte následující klávesovou zkratku: Ctrl-Shift-P (na MacOS Command-Shift-P).
+
+![Nabídka palety](../../../../translated_images/palette-menu.4946174e07f426226afcdad707d19b8d5150e41591c751c45b5dee213affef91.cs.png)
+
+Jakmile se nabídka otevře, napište _open remote repository_ a poté vyberte první možnost. Zobrazí se vám seznam repozitářů, kterých jste součástí nebo které jste nedávno otevřeli. Můžete také použít úplnou URL adresu GitHubu k výběru jednoho z nich. Použijte následující URL a vložte ji do pole:
+
+```
+https://github.com/microsoft/Web-Dev-For-Beginners
+```
+
+✅ Pokud bylo úspěšné, uvidíte všechny soubory tohoto repozitáře načtené v textovém editoru.
+
+### 2. Použití URL
+
+Repozitář můžete také načíst přímo pomocí URL. Například úplná URL aktuálního repozitáře je [https://github.com/microsoft/Web-Dev-For-Beginners](https://github.com/microsoft/Web-Dev-For-Beginners), ale můžete nahradit doménu GitHubu `VSCode.dev/github` a načíst repozitář přímo. Výsledná URL by byla [https://vscode.dev/github/microsoft/Web-Dev-For-Beginners](https://vscode.dev/github/microsoft/Web-Dev-For-Beginners).
+
+## Úprava souborů
+
+Jakmile máte repozitář otevřený v prohlížeči/vscode.dev, dalším krokem bude provádění aktualizací nebo změn projektu.
+
+### 1. Vytvoření nového souboru
+
+Můžete vytvořit soubor buď uvnitř existující složky, nebo v kořenovém adresáři/složce. Chcete-li vytvořit nový soubor, otevřete umístění/složku, do které chcete soubor uložit, a vyberte ikonu _'New file ...'_ na panelu aktivit _(vlevo)_, pojmenujte ho a stiskněte Enter.
+
+![Vytvoření nového souboru](../../../../translated_images/create-new-file.2814e609c2af9aeb6c6fd53156c503ac91c3d538f9cac63073b2dd4a7631f183.cs.png)
+
+### 2. Úprava a uložení souboru v repozitáři
+
+Používání vscode.dev je užitečné, kdykoli chcete rychle aktualizovat svůj projekt, aniž byste museli načítat jakýkoli software lokálně.  
+Chcete-li aktualizovat svůj kód, klikněte na ikonu 'Explorer', která se také nachází na panelu aktivit, abyste zobrazili soubory a složky v repozitáři.  
+Vyberte soubor, který chcete otevřít v oblasti kódu, proveďte změny a uložte.
+
+![Úprava souboru](../../../../translated_images/edit-a-file.52c0ee665ef19f08119d62d63f395dfefddc0a4deb9268d73bfe791f52c5807a.cs.png)
+
+Jakmile dokončíte aktualizaci projektu, vyberte ikonu _`source control`_, která obsahuje všechny nové změny, které jste provedli v repozitáři.
+
+Chcete-li zobrazit změny, které jste provedli ve svém projektu, vyberte soubor(y) ve složce `Changes` na rozšířeném panelu aktivit. Tím se otevře 'Working Tree', kde vizuálně uvidíte změny, které jste provedli v souboru. Červená barva označuje vynechání projektu, zatímco zelená značí přidání.
+
+![Zobrazení změn](../../../../translated_images/working-tree.c58eec08e6335c79cc708c0c220c0b7fea61514bd3c7fb7471905a864aceac7c.cs.png)
+
+Pokud jste spokojeni se změnami, které jste provedli, najeďte na složku `Changes` a klikněte na tlačítko `+`, abyste změny připravili ke commitu. Připravení znamená přípravu změn k jejich odeslání na GitHub.
+
+Pokud však nejste spokojeni s některými změnami a chcete je zrušit, najeďte na složku `Changes` a vyberte ikonu `undo`.
+
+Poté zadejte `commit message` _(popis změny, kterou jste provedli v projektu)_, klikněte na ikonu `check`, abyste změny commitovali a odeslali.
+
+Jakmile dokončíte práci na projektu, vyberte ikonu `hamburger menu` vlevo nahoře, abyste se vrátili do repozitáře na github.com.
+
+![Připravení a commit změn](../../../../8-code-editor/images/edit-vscode.dev.gif)
+
+## Používání rozšíření
+
+Instalace rozšíření na VSCode vám umožňuje přidávat nové funkce a možnosti přizpůsobení vývojového prostředí ve vašem editoru, což zlepšuje váš vývojový proces. Tato rozšíření také pomáhají přidávat podporu pro různé programovací jazyky a často jsou buď obecná, nebo zaměřená na konkrétní jazyk.
+
+Chcete-li procházet seznam všech dostupných rozšíření, klikněte na ikonu _`Extensions`_ na panelu aktivit a začněte psát název rozšíření do textového pole označeného _'Search Extensions in Marketplace'_.  
+Uvidíte seznam rozšíření, z nichž každé obsahuje **název rozšíření, jméno vydavatele, jednovětný popis, počet stažení** a **hodnocení hvězdičkami**.
+
+![Detaily rozšíření](../../../../translated_images/extension-details.9f8f1fd4e9eb2de5069ae413119eb8ee43172776383ebe2f7cf640e11df2e106.cs.png)
+
+Můžete také zobrazit všechna dříve nainstalovaná rozšíření rozbalením složky _`Installed`_, populární rozšíření používaná většinou vývojářů ve složce _`Popular`_ a doporučená rozšíření pro vás buď od uživatelů ve stejném workspace, nebo na základě vašich nedávno otevřených souborů ve složce _`Recommended`_.
+
+![Zobrazení rozšíření](../../../../translated_images/extensions.eca0e0c7f59a10b5c88be7fe24b3e32cca6b6058b35a49026c3a9d80b1813b7c.cs.png)
+
+### 1. Instalace rozšíření
+
+Chcete-li nainstalovat rozšíření, napište jeho název do vyhledávacího pole a klikněte na něj, abyste zobrazili další informace o rozšíření v oblasti kódu, jakmile se objeví na rozšířeném panelu aktivit.
+
+Můžete buď kliknout na _modré tlačítko instalace_ na rozšířeném panelu aktivit, nebo použít tlačítko instalace, které se objeví v oblasti kódu, jakmile vyberete rozšíření k načtení dalších informací.
+
+![Instalace rozšíření](../../../../8-code-editor/images/install-extension.gif)
+
+### 2. Přizpůsobení rozšíření
+
+Po instalaci rozšíření možná budete chtít upravit jeho chování a přizpůsobit ho podle svých preferencí. Chcete-li to provést, vyberte ikonu Extensions, a tentokrát se vaše rozšíření objeví ve složce _Installed_, klikněte na _**ikonu ozubeného kolečka**_ a přejděte na _Extensions Setting_.
+
+![Úprava nastavení rozšíření](../../../../translated_images/extension-settings.21c752ae4f4cdb78a867f140ccd0680e04619d0c44bb4afb26373e54b829d934.cs.png)
+
+### 3. Správa rozšíření
+
+Po instalaci a používání rozšíření nabízí vscode.dev možnosti správy rozšíření podle různých potřeb. Například můžete:
+
+- **Deaktivovat:** _(Dočasně deaktivujete rozšíření, když ho již nepotřebujete, ale nechcete ho úplně odinstalovat)_
+
+    Vyberte nainstalované rozšíření na rozšířeném panelu aktivit > klikněte na ikonu ozubeného kolečka > vyberte 'Disable' nebo 'Disable (Workspace)' **NEBO** otevřete rozšíření v oblasti kódu a klikněte na modré tlačítko Disable.
+
+- **Odinstalovat:** Vyberte nainstalované rozšíření na rozšířeném panelu aktivit > klikněte na ikonu ozubeného kolečka > vyberte 'Uninstall' **NEBO** otevřete rozšíření v oblasti kódu a klikněte na modré tlačítko Uninstall.
+
+---
+
+## Zadání
+
+[Vytvořte webovou stránku životopisu pomocí vscode.dev](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/8-code-editor/1-using-a-code-editor/assignment.md)
+
+<!----
+## Kvíz po lekci
+[Kvíz po lekci](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/4)
+---->
+
+## Přehled a samostudium
+
+Přečtěte si více o [VSCode.dev](https://code.visualstudio.com/docs/editor/vscode-web?WT.mc_id=academic-0000-alfredodeza) a některých jeho dalších funkcích.
+
+---
+
+**Prohlášení**:  
+Tento dokument byl přeložen pomocí služby pro automatický překlad [Co-op Translator](https://github.com/Azure/co-op-translator). Ačkoli se snažíme o přesnost, mějte prosím na paměti, že automatické překlady mohou obsahovat chyby nebo nepřesnosti. Původní dokument v jeho původním jazyce by měl být považován za autoritativní zdroj. Pro důležité informace doporučujeme profesionální lidský překlad. Neodpovídáme za žádná nedorozumění nebo nesprávné interpretace vyplývající z použití tohoto překladu.
\ No newline at end of file
diff --git a/translations/cs/8-code-editor/1-using-a-code-editor/assignment.md b/translations/cs/8-code-editor/1-using-a-code-editor/assignment.md
new file mode 100644
index 00000000..0f24625b
--- /dev/null
+++ b/translations/cs/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-28T04:24:55+00:00",
+  "source_file": "8-code-editor/1-using-a-code-editor/assignment.md",
+  "language_code": "cs"
+}
+-->
+# Vytvořte webovou stránku s životopisem pomocí vscode.dev
+
+_Jak skvělé by bylo, kdyby vás personalista požádal o životopis a vy byste mu poslali URL?_ 😎
+
+## Cíle
+
+Po tomto úkolu se naučíte:
+
+- Vytvořit webovou stránku pro prezentaci svého životopisu
+
+### Předpoklady
+
+1. Účet na GitHubu. Přejděte na [GitHub](https://github.com/) a vytvořte si účet, pokud ho ještě nemáte.
+
+## Kroky
+
+**Krok 1:** Vytvořte nový GitHub repozitář a pojmenujte ho `my-resume`
+
+**Krok 2:** Vytvořte soubor `index.html` ve svém repozitáři. Přidáme alespoň jeden soubor přímo na github.com, protože prázdný repozitář nelze otevřít ve vscode.dev.
+
+Klikněte na odkaz `creating a new file`, zadejte název `index.html` a vyberte tlačítko `Commit new file`.
+
+![Vytvoření nového souboru na github.com](../../../../translated_images/new-file-github.com.c886796d800e8056561829a181be1382c5303da9d902d8b2dd82b68a4806e21f.cs.png)
+
+**Krok 3:** Otevřete [VSCode.dev](https://vscode.dev) a vyberte tlačítko `Open Remote Repository`.
+
+Zkopírujte URL repozitáře, který jste právě vytvořili pro svůj web s životopisem, a vložte jej do vstupního pole:
+
+_Nahraďte `your-username` svým uživatelským jménem na GitHubu._
+
+```
+https://github.com/your-username/my-resume
+```
+
+✅ Pokud vše proběhlo úspěšně, uvidíte svůj projekt a soubor index.html otevřený v textovém editoru v prohlížeči.
+
+![Vytvoření nového souboru](../../../../translated_images/project-on-vscode.dev.e79815a9a95ee7feac72ebe5c941c91279716be37c575dbdbf2f43bea2c7d8b6.cs.png)
+
+**Krok 4:** Otevřete soubor `index.html`, vložte do něj níže uvedený kód a uložte.
+
+<details>
+    <summary><b>HTML kód odpovědný za obsah vašeho webu s životopisem.</b></summary>
+    
+        <html>
+
+            <head>
+                <link href="style.css" rel="stylesheet">
+                <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
+                <title>Vaše jméno sem!</title>
+            </head>
+            <body>
+                <header id="header">
+                    <!-- záhlaví životopisu s vaším jménem a titulem -->
+                    <h1>Vaše jméno sem!</h1>
+                    <hr>
+                    Vaše role!
+                    <hr>
+                </header>
+                <main>
+                    <article id="mainLeft">
+                        <section>
+                            <h2>KONTAKT</h2>
+                            <!-- kontaktní informace včetně sociálních sítí -->
+                            <p>
+                                <i class="fa fa-envelope" aria-hidden="true"></i>
+                                <a href="mailto:username@domain.top-level domain">Zadejte svůj e-mail zde</a>
+                            </p>
+                            <p>
+                                <i class="fab fa-github" aria-hidden="true"></i>
+                                <a href="github.com/yourGitHubUsername">Zadejte své uživatelské jméno zde!</a>
+                            </p>
+                            <p>
+                                <i class="fab fa-linkedin" aria-hidden="true"></i>
+                                <a href="linkedin.com/yourLinkedInUsername">Zadejte své uživatelské jméno zde!</a>
+                            </p>
+                        </section>
+                        <section>
+                            <h2>DOVEDNOSTI</h2>
+                            <!-- vaše dovednosti -->
+                            <ul>
+                                <li>Dovednost 1!</li>
+                                <li>Dovednost 2!</li>
+                                <li>Dovednost 3!</li>
+                                <li>Dovednost 4!</li>
+                            </ul>
+                        </section>
+                        <section>
+                            <h2>VZDĚLÁNÍ</h2>
+                            <!-- vaše vzdělání -->
+                            <h3>Zadejte svůj obor zde!</h3>
+                            <p>
+                                Zadejte svou instituci zde!
+                            </p>
+                            <p>
+                                Začátek - Konec
+                            </p>
+                        </section>            
+                    </article>
+                    <article id="mainRight">
+                        <section>
+                            <h2>O MNĚ</h2>
+                            <!-- něco o vás -->
+                            <p>Napište něco o sobě!</p>
+                        </section>
+                        <section>
+                            <h2>PRACOVNÍ ZKUŠENOSTI</h2>
+                            <!-- vaše pracovní zkušenosti -->
+                            <h3>Název pozice</h3>
+                            <p>
+                                Název organizace sem | Měsíc začátku – Měsíc konce
+                            </p>
+                            <ul>
+                                    <li>Úkol 1 - Popište, co jste dělali!</li>
+                                    <li>Úkol 2 - Popište, co jste dělali!</li>
+                                    <li>Popište výsledky/dopad vašeho přínosu</li>
+                                    
+                            </ul>
+                            <h3>Název pozice 2</h3>
+                            <p>
+                                Název organizace sem | Měsíc začátku – Měsíc konce
+                            </p>
+                            <ul>
+                                    <li>Úkol 1 - Popište, co jste dělali!</li>
+                                    <li>Úkol 2 - Popište, co jste dělali!</li>
+                                    <li>Popište výsledky/dopad vašeho přínosu</li>
+                                    
+                            </ul>
+                        </section>
+                    </article>
+                </main>
+            </body>
+        </html>
+</details>
+
+Nahraďte _zástupný text_ ve výše uvedeném HTML kódu detaily svého životopisu.
+
+**Krok 5:** Najděte složku My-Resume, klikněte na ikonu `New File ...` a vytvořte ve svém projektu 2 nové soubory: `style.css` a `codeswing.json`.
+
+**Krok 6:** Otevřete soubor `style.css`, vložte do něj níže uvedený kód a uložte.
+
+<details>
+        <summary><b>CSS kód pro formátování rozvržení stránky.</b></summary>
+            
+            body {
+                font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+                font-size: 16px;
+                max-width: 960px;
+                margin: auto;
+            }
+            h1 {
+                font-size: 3em;
+                letter-spacing: .6em;
+                padding-top: 1em;
+                padding-bottom: 1em;
+            }
+
+            h2 {
+                font-size: 1.5em;
+                padding-bottom: 1em;
+            }
+
+            h3 {
+                font-size: 1em;
+                padding-bottom: 1em;
+            }
+            main { 
+                display: grid;
+                grid-template-columns: 40% 60%;
+                margin-top: 3em;
+            }
+            header {
+                text-align: center;
+                margin: auto 2em;
+            }
+
+            section {
+                margin: auto 1em 4em 2em;
+            }
+
+            i {
+                margin-right: .5em;
+            }
+
+            p {
+                margin: .2em auto
+            }
+
+            hr {
+                border: none;
+                background-color: lightgray;
+                height: 1px;
+            }
+
+            h1, h2, h3 {
+                font-weight: 100;
+                margin-bottom: 0;
+            }
+            #mainLeft {
+                border-right: 1px solid lightgray;
+            }
+            
+</details>
+
+**Krok 6:** Otevřete soubor `codeswing.json`, vložte do něj níže uvedený kód a uložte.
+
+    {
+    "scripts": [],
+    "styles": []
+    }
+
+**Krok 7:** Nainstalujte rozšíření `Codeswing`, abyste mohli vizualizovat webovou stránku s životopisem v kódovací oblasti.
+
+Klikněte na ikonu _`Extensions`_ na panelu aktivit a zadejte Codeswing. Klikněte na _modré tlačítko instalace_ na rozšířeném panelu aktivit nebo použijte tlačítko instalace, které se objeví v kódovací oblasti po výběru rozšíření. Ihned po instalaci rozšíření sledujte změny ve svém projektu 😃.
+
+![Instalace rozšíření](../../../../8-code-editor/images/install-extension.gif)
+
+Toto uvidíte na obrazovce po instalaci rozšíření.
+
+![Codeswing v akci](../../../../translated_images/after-codeswing-extension-pb.0ebddddcf73b550994947a9084e35e2836c713ae13839d49628e3c764c1cfe83.cs.png)
+
+Pokud jste spokojeni se změnami, které jste provedli, najděte složku `Changes` a klikněte na tlačítko `+`, abyste změny připravili ke commitu.
+
+Zadejte zprávu ke commitu _(popis změn, které jste provedli v projektu)_ a potvrďte změny kliknutím na `check`. Po dokončení práce na projektu vyberte ikonu hamburgerového menu v levém horním rohu a vraťte se do repozitáře na GitHubu.
+
+Gratulujeme 🎉 Právě jste vytvořili webovou stránku s životopisem pomocí vscode.dev v několika krocích.
+
+## 🚀 Výzva
+
+Otevřete vzdálený repozitář, ke kterému máte oprávnění provádět změny, a aktualizujte některé soubory. Poté zkuste vytvořit novou větev se svými změnami a vytvořit Pull Request.
+
+## Recenze a samostudium
+
+Přečtěte si více o [VSCode.dev](https://code.visualstudio.com/docs/editor/vscode-web?WT.mc_id=academic-0000-alfredodeza) a některých jeho dalších funkcích.
+
+---
+
+**Prohlášení**:  
+Tento dokument byl přeložen pomocí služby pro automatický překlad [Co-op Translator](https://github.com/Azure/co-op-translator). Ačkoli se snažíme o přesnost, mějte prosím na paměti, že automatické překlady mohou obsahovat chyby nebo nepřesnosti. Původní dokument v jeho původním jazyce by měl být považován za autoritativní zdroj. Pro důležité informace doporučujeme profesionální lidský překlad. Neodpovídáme za žádné nedorozumění nebo nesprávné interpretace vyplývající z použití tohoto překladu.
\ No newline at end of file
diff --git a/translations/cs/CODE_OF_CONDUCT.md b/translations/cs/CODE_OF_CONDUCT.md
new file mode 100644
index 00000000..1b49db58
--- /dev/null
+++ b/translations/cs/CODE_OF_CONDUCT.md
@@ -0,0 +1,23 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "b0a9b4cccd918195f58224d5793da1a6",
+  "translation_date": "2025-08-28T03:23:15+00:00",
+  "source_file": "CODE_OF_CONDUCT.md",
+  "language_code": "cs"
+}
+-->
+# Kodex chování pro otevřený zdroj Microsoftu
+
+Tento projekt přijal [Kodex chování pro otevřený zdroj Microsoftu](https://opensource.microsoft.com/codeofconduct/?WT.mc_id=academic-77807-sagibbon).
+
+Zdroje:
+
+- [Kodex chování pro otevřený zdroj Microsoftu](https://opensource.microsoft.com/codeofconduct/?WT.mc_id=academic-77807-sagibbon)
+- [FAQ ke Kodexu chování Microsoftu](https://opensource.microsoft.com/codeofconduct/faq/?WT.mc_id=academic-77807-sagibbon)
+- Kontaktujte [opencode@microsoft.com](mailto:opencode@microsoft.com) s dotazy nebo obavami
+
+---
+
+**Prohlášení**:  
+Tento dokument byl přeložen pomocí služby pro automatický překlad [Co-op Translator](https://github.com/Azure/co-op-translator). Ačkoli se snažíme o přesnost, mějte prosím na paměti, že automatické překlady mohou obsahovat chyby nebo nepřesnosti. Původní dokument v jeho původním jazyce by měl být považován za autoritativní zdroj. Pro důležité informace doporučujeme profesionální lidský překlad. Neodpovídáme za žádné nedorozumění nebo nesprávné interpretace vyplývající z použití tohoto překladu.
\ No newline at end of file
diff --git a/translations/cs/CONTRIBUTING.md b/translations/cs/CONTRIBUTING.md
new file mode 100644
index 00000000..b45ec5cd
--- /dev/null
+++ b/translations/cs/CONTRIBUTING.md
@@ -0,0 +1,23 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "777400e9f0336c7ee2f9a1200a88478f",
+  "translation_date": "2025-08-28T03:21:19+00:00",
+  "source_file": "CONTRIBUTING.md",
+  "language_code": "cs"
+}
+-->
+# Přispívání
+
+Tento projekt vítá příspěvky a návrhy. Většina příspěvků vyžaduje, abyste souhlasili s Dohodou o licenci přispěvatele (CLA), která potvrzuje, že máte právo a skutečně udělujete práva k použití vašeho příspěvku. Pro více informací navštivte [https://cla.microsoft.com](https://cla.microsoft.com/?WT.mc_id=academic-77807-sagibbon).
+
+Když odešlete pull request, CLA-bot automaticky určí, zda je potřeba poskytnout CLA, a příslušně označí PR (např. štítkem, komentářem). Jednoduše postupujte podle pokynů poskytnutých botem. Toto budete muset udělat pouze jednou pro všechny repozitáře, které používají naši CLA. Prosíme také, abyste se pokusili vysvětlit, proč jste tuto změnu provedli, abychom lépe pochopili vaši žádost.
+
+Tento projekt přijal [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/?WT.mc_id=academic-77807-sagibbon).  
+Pro více informací si přečtěte [Často kladené dotazy ke Kodexu chování](https://opensource.microsoft.com/codeofconduct/faq/?WT.mc_id=academic-77807-sagibbon)  
+nebo kontaktujte [opencode@microsoft.com](mailto:opencode@microsoft.com) s jakýmikoli dalšími dotazy nebo připomínkami.
+
+---
+
+**Prohlášení**:  
+Tento dokument byl přeložen pomocí služby pro automatický překlad [Co-op Translator](https://github.com/Azure/co-op-translator). Ačkoli se snažíme o přesnost, mějte prosím na paměti, že automatické překlady mohou obsahovat chyby nebo nepřesnosti. Původní dokument v jeho původním jazyce by měl být považován za autoritativní zdroj. Pro důležité informace doporučujeme profesionální lidský překlad. Neodpovídáme za žádná nedorozumění nebo nesprávné interpretace vyplývající z použití tohoto překladu.
\ No newline at end of file
diff --git a/translations/cs/README.md b/translations/cs/README.md
new file mode 100644
index 00000000..c13254b8
--- /dev/null
+++ b/translations/cs/README.md
@@ -0,0 +1,210 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "efa251c5fc089367f0a81c572874afca",
+  "translation_date": "2025-08-28T03:19:32+00:00",
+  "source_file": "README.md",
+  "language_code": "cs"
+}
+-->
+[![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)  
+
+[![Microsoft Azure AI Foundry Discord](https://dcbadge.limes.pink/api/server/ByRwuEEgH4)](https://discord.com/invite/ByRwuEEgH4)  
+
+Postupujte podle těchto kroků, abyste mohli začít používat tyto zdroje:  
+1. **Forkněte repozitář**: Klikněte [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)  
+2. **Naklonujte repozitář**:   `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`  
+3. [**Připojte se na Discord Azure AI Foundry a setkejte se s experty a dalšími vývojáři**](https://discord.com/invite/ByRwuEEgH4)  
+
+# Webový vývoj pro začátečníky - Kurikulum  
+
+Naučte se základy webového vývoje s naším 12týdenním komplexním kurzem od Microsoft Cloud Advocates. Každá z 24 lekcí se zaměřuje na JavaScript, CSS a HTML prostřednictvím praktických projektů, jako jsou terária, rozšíření pro prohlížeče a vesmírné hry. Zapojte se do kvízů, diskusí a praktických úkolů. Zlepšete své dovednosti a optimalizujte si zapamatování znalostí díky našemu efektivnímu přístupu založenému na projektech. Začněte svou cestu kódování ještě dnes!  
+
+#### 🧑‍🎓 _Jste student?_  
+
+Navštivte [**stránku Student Hub**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon), kde najdete zdroje pro začátečníky, studentské balíčky a dokonce způsoby, jak získat voucher na certifikát zdarma. Tuto stránku si uložte do záložek a pravidelně ji kontrolujte, protože obsah měníme každý měsíc.  
+
+### 📣 Oznámení - _Nové kurikulum_ o generativní AI pro JavaScript bylo právě vydáno  
+
+Nezmeškejte naše nové kurikulum o generativní AI!  
+
+Navštivte [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) a začněte!  
+
+![Pozadí](../../translated_images/background.148a8d43afde57303419a663f50daf586681bc2fabf833f66ef6954073983c66.cs.png)  
+
+- Lekce pokrývající vše od základů po RAG.  
+- Interakce s historickými postavami pomocí GenAI a naší doprovodné aplikace.  
+- Zábavný a poutavý příběh, budete cestovat časem!  
+
+![Postava](../../translated_images/character.5c0dd8e067ffd693c16e2c5b7412ab075a2215ce31f998305639fa3a05e14fbe.cs.png)  
+
+Každá lekce obsahuje úkol k dokončení, kontrolu znalostí a výzvu, která vás provede učením témat, jako jsou:  
+- Tvorba promptů a jejich inženýrství  
+- Generování textových a obrazových aplikací  
+- Vyhledávací aplikace  
+
+Navštivte [https://aka.ms/genai-js-course](../../[https:/aka.ms/genai-js-course) a začněte!  
+
+## 🌱 Začínáme  
+
+> **Učitelé**, [zahrnuli jsme několik návrhů](for-teachers.md), jak toto kurikulum využít. Budeme rádi za vaši zpětnou vazbu [v našem diskusním fóru](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!  
+
+**[Studenti](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, u každé lekce začněte kvízem před přednáškou, pokračujte čtením materiálů, dokončete různé aktivity a ověřte si své znalosti kvízem po přednášce.  
+
+Pro zlepšení vašeho vzdělávacího zážitku se spojte se svými vrstevníky a pracujte na projektech společně! Diskuse jsou podporovány v našem [diskusním fóru](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), kde bude náš tým moderátorů k dispozici, aby odpověděl na vaše otázky.  
+
+Pro další vzdělávání důrazně doporučujeme prozkoumat [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) pro další studijní materiály.  
+
+### 📋 Nastavení vašeho prostředí  
+
+Toto kurikulum má připravené vývojové prostředí! Jakmile začnete, můžete si vybrat, zda budete kurikulum spouštět v [Codespace](https://github.com/features/codespaces/) (_prostředí založené na prohlížeči, bez nutnosti instalace_), nebo lokálně na vašem počítači pomocí textového editoru, jako je [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).  
+
+#### Vytvořte si svůj repozitář  
+Abyste mohli snadno ukládat svou práci, doporučujeme vytvořit si vlastní kopii tohoto repozitáře. Můžete to udělat kliknutím na tlačítko **Use this template** v horní části stránky. Tím se vytvoří nový repozitář ve vašem GitHub účtu s kopií kurikula.  
+
+Postupujte podle těchto kroků:  
+1. **Forkněte repozitář**: Klikněte na tlačítko "Fork" v pravém horním rohu této stránky.  
+2. **Naklonujte repozitář**:   `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`  
+
+#### Spuštění kurikula v Codespace  
+
+Ve vaší kopii tohoto repozitáře, kterou jste vytvořili, klikněte na tlačítko **Code** a vyberte **Open with Codespaces**. Tím se vytvoří nový Codespace, ve kterém můžete pracovat.  
+
+[!Codespace](../..)./images/createcodespace.png)  
+
+#### Spuštění kurikula lokálně na vašem počítači  
+
+Pro spuštění tohoto kurikula lokálně na vašem počítači budete potřebovat textový editor, prohlížeč a nástroj příkazového řádku. Naše první lekce, [Úvod do programovacích jazyků a nástrojů](../../1-getting-started-lessons/1-intro-to-programming-languages), vás provede různými možnostmi pro každý z těchto nástrojů, abyste si mohli vybrat, co vám nejlépe vyhovuje.  
+
+Naše doporučení je použít [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) jako váš editor, který má také vestavěný [Terminál](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Visual Studio Code si můžete stáhnout [zde](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).  
+
+1. Naklonujte svůj repozitář na váš počítač. Můžete to udělat kliknutím na tlačítko **Code** a zkopírováním URL:  
+
+    [!CodeSpace](./images/createcodespace.png)  
+
+    Poté otevřete [Terminál](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) ve [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) a spusťte následující příkaz, nahraďte `<your-repository-url>` URL, kterou jste právě zkopírovali:  
+
+    ```bash 
+    git clone <your-repository-url>
+    ```  
+
+2. Otevřete složku ve Visual Studio Code. Můžete to udělat kliknutím na **File** > **Open Folder** a výběrem složky, kterou jste právě naklonovali.  
+
+>  Doporučené rozšíření pro Visual Studio Code:  
+>  
+> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - pro náhled HTML stránek přímo ve Visual Studio Code  
+> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - pro rychlejší psaní kódu  
+
+## 📂 Každá lekce obsahuje:  
+
+- volitelný sketchnote  
+- volitelný doplňkový video materiál  
+- zahřívací kvíz před lekcí  
+- psanou lekci  
+- u lekcí založených na projektech, podrobné návody, jak projekt vytvořit  
+- kontrolu znalostí  
+- výzvu  
+- doplňkové čtení  
+- úkol  
+- [kvíz po lekci](https://ff-quizzes.netlify.app/)  
+
+> **Poznámka ke kvízům**: Všechny kvízy jsou obsaženy ve složce Quiz-app, celkem 48 kvízů po třech otázkách. Jsou dostupné [zde](https://ff-quizzes.netlify.app/) a aplikaci kvízů lze spustit lokálně nebo nasadit na Azure; postupujte podle pokynů ve složce `quiz-app`.  
+
+## 🗃️ Lekce  
+
+|     |                       Název projektu                       |                            Učené koncepty                             | Cíle učení                                                                                                                         |                                                         Odkaz na lekci                                                          |         Autor          |  
+| :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |  
+| 01  |                     Začínáme                      |           Úvod do programování a nástrojů           | Naučte se základní principy většiny programovacích jazyků a o softwaru, který pomáhá profesionálním vývojářům při práci | [Úvod do programovacích jazyků a nástrojů](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) |         Jasmine         |  
+| 02  |                     Začínáme                      |             Základy GitHubu, včetně práce v týmu             | Jak používat GitHub ve vašem projektu, jak spolupracovat s ostatními na kódové základně                                                    |                            [Úvod do GitHubu](./1-getting-started-lessons/2-github-basics/README.md)                             |          Floor          |  
+| 03  |                     Začínáme                      |                             Přístupnost                              | Naučte se základy webové přístupnosti                                                                                               |                       [Základy přístupnosti](./1-getting-started-lessons/3-accessibility/README.md)                       |       Christopher       |  
+| 04  |                        Základy JS                         |                         Datové typy v JavaScriptu                          | Základy datových typů v JavaScriptu                                                                                                 |                                       [Datové typy](./2-js-basics/1-data-types/README.md)                                        |         Jasmine         |  
+| 05  |                        Základy JS                         |                         Funkce a metody                          | Naučte se o funkcích a metodách pro řízení logického toku aplikace                                                             |                              [Funkce a metody](./2-js-basics/2-functions-methods/README.md)                               | Jasmine a Christopher |  
+| 06  |                        Základy JS                         |                        Rozhodování v JS                        | Naučte se vytvářet podmínky ve vašem kódu pomocí metod rozhodování                                                           |                                 [Rozhodování](./2-js-basics/3-making-decisions/README.md)                                  |         Jasmine         |  
+| 07  |                        Základy JS                         |                            Pole a smyčky                            | Práce s daty pomocí polí a smyček v JavaScriptu                                                                                 |                                   [Pole a smyčky](./2-js-basics/4-arrays-loops/README.md)                                    |         Jasmine         |  
+| 08  |       [Terárium](./3-terrarium/solution/README.md)       |                            HTML v praxi                            | Vytvořte HTML pro online terárium, zaměřte se na tvorbu rozvržení                                                         |                                 [Úvod do HTML](./3-terrarium/1-intro-to-html/README.md)                                 |           Jen           |  
+| 09  |       [Terárium](./3-terrarium/solution/README.md)       |                            CSS v praxi                             | Vytvořte CSS pro stylizaci online terária, zaměřte se na základy CSS včetně vytvoření responzivní stránky                     |                                  [Úvod do CSS](./3-terrarium/2-intro-to-css/README.md)                                  |           Jen           |  
+| 10  |            [Terrarium](./3-terrarium/solution/README.md)            |                 JavaScript Closures, manipulace s DOM                  | Vytvořte JavaScript, který umožní teráriu fungovat jako rozhraní pro přetahování, se zaměřením na uzávěry a manipulaci s DOM         |                  [JavaScript Closures, manipulace s DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md)                   |           Jen           |
+| 11  |          [Typing Game](./4-typing-game/solution/README.md)          |                          Vytvořte hru na psaní                         | Naučte se používat události klávesnice k řízení logiky vaší JavaScriptové aplikace                                                  |                                [Programování řízené událostmi](./4-typing-game/typing-game/README.md)                            |       Christopher       |
+| 12  | [Green Browser Extension](./5-browser-extension/solution/README.md) |                         Práce s prohlížeči                             | Naučte se, jak fungují prohlížeče, jejich historii a jak vytvořit první prvky rozšíření prohlížeče                                   |                               [O prohlížečích](./5-browser-extension/1-about-browsers/README.md)                                |           Jen           |
+| 13  | [Green Browser Extension](./5-browser-extension/solution/README.md) | Vytvoření formuláře, volání API a ukládání proměnných do lokálního úložiště | Vytvořte JavaScriptové prvky rozšíření prohlížeče, které volají API pomocí proměnných uložených v lokálním úložišti                 |                [API, formuláře a lokální úložiště](./5-browser-extension/2-forms-browsers-local-storage/README.md)              |           Jen           |
+| 14  | [Green Browser Extension](./5-browser-extension/solution/README.md) |          Procesy na pozadí v prohlížeči, výkon webu                    | Použijte procesy na pozadí prohlížeče k řízení ikony rozšíření; naučte se o výkonu webu a některých optimalizacích                  |             [Úkoly na pozadí a výkon](./5-browser-extension/3-background-tasks-and-performance/README.md)                      |           Jen           |
+| 15  |           [Space Game](./6-space-game/solution/README.md)           |             Pokročilejší vývoj her s JavaScriptem                      | Naučte se o dědičnosti pomocí tříd a kompozice a o vzoru Pub/Sub, jako přípravu na tvorbu hry                                       |                      [Úvod do pokročilého vývoje her](./6-space-game/1-introduction/README.md)                                  |          Chris          |
+| 16  |           [Space Game](./6-space-game/solution/README.md)           |                           Kreslení na plátno                           | Naučte se o Canvas API, které se používá k vykreslování prvků na obrazovku                                                         |                                [Kreslení na plátno](./6-space-game/2-drawing-to-canvas/README.md)                               |          Chris          |
+| 17  |           [Space Game](./6-space-game/solution/README.md)           |                   Pohyb prvků po obrazovce                             | Objevte, jak mohou prvky získat pohyb pomocí kartézských souřadnic a Canvas API                                                    |                           [Pohyb prvků](./6-space-game/3-moving-elements-around/README.md)                                      |          Chris          |
+| 18  |           [Space Game](./6-space-game/solution/README.md)           |                          Detekce kolizí                                | Umožněte prvkům kolidovat a reagovat na sebe pomocí stisků kláves a přidejte funkci cooldown pro zajištění výkonu hry               |                              [Detekce kolizí](./6-space-game/4-collision-detection/README.md)                                   |          Chris          |
+| 19  |           [Space Game](./6-space-game/solution/README.md)           |                             Počítání skóre                             | Provádějte matematické výpočty na základě stavu hry a jejího výkonu                                                                 |                                    [Počítání skóre](./6-space-game/5-keeping-score/README.md)                                   |          Chris          |
+| 20  |           [Space Game](./6-space-game/solution/README.md)           |                     Ukončení a restartování hry                        | Naučte se o ukončení a restartování hry, včetně vyčištění prostředků a resetování hodnot proměnných                                 |                                [Podmínka ukončení](./6-space-game/6-end-condition/README.md)                                    |          Chris          |
+| 21  |         [Banking App](./7-bank-project/solution/README.md)          |                 HTML šablony a směrování ve webové aplikaci            | Naučte se, jak vytvořit strukturu architektury vícestránkového webu pomocí směrování a HTML šablon                                 |                            [HTML šablony a směrování](./7-bank-project/1-template-route/README.md)                              |          Yohan          |
+| 22  |         [Banking App](./7-bank-project/solution/README.md)          |                  Vytvoření přihlašovacího a registračního formuláře    | Naučte se o tvorbě formulářů a zpracování validačních rutin                                                                         |                                           [Formuláře](./7-bank-project/2-forms/README.md)                                       |          Yohan          |
+| 23  |         [Banking App](./7-bank-project/solution/README.md)          |                   Metody získávání a používání dat                     | Jak data proudí do vaší aplikace a z ní, jak je získávat, ukládat a likvidovat                                                     |                                            [Data](./7-bank-project/3-data/README.md)                                            |          Yohan          |
+| 24  |         [Banking App](./7-bank-project/solution/README.md)          |                      Koncepty správy stavu                             | Naučte se, jak vaše aplikace uchovává stav a jak jej programově spravovat                                                          |                                [Správa stavu](./7-bank-project/4-state-management/README.md)                                    |          Yohan          |
+
+
+## 🏫 Pedagogika
+
+Náš vzdělávací program je navržen s ohledem na dvě klíčové pedagogické principy:
+* učení založené na projektech
+* časté kvízy
+
+Program učí základy JavaScriptu, HTML a CSS, stejně jako nejnovější nástroje a techniky používané dnešními webovými vývojáři. Studenti získají praktické zkušenosti při tvorbě hry na psaní, virtuálního terária, ekologického rozšíření prohlížeče, hry ve stylu Space Invaders a bankovní aplikace pro firmy. Na konci série studenti získají pevné základy webového vývoje.
+
+
+> 🎓 První lekce tohoto vzdělávacího programu si můžete vyzkoušet jako [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) na Microsoft Learn!
+
+Díky tomu, že obsah odpovídá projektům, je proces pro studenty poutavější a zlepšuje se zapamatování konceptů. Také jsme napsali několik úvodních lekcí o základech JavaScriptu, které představují koncepty, doplněné videem ze série "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" s video tutoriály, na jejichž tvorbě se podíleli někteří autoři tohoto vzdělávacího programu.
+
+Navíc nízkostresový kvíz před hodinou nastaví záměr studenta na učení daného tématu, zatímco druhý kvíz po hodině zajistí lepší zapamatování. Tento vzdělávací program byl navržen tak, aby byl flexibilní a zábavný, a lze jej absolvovat celý nebo jen jeho část. Projekty začínají jednoduše a postupně se stávají složitějšími během 12týdenního cyklu.
+
+Záměrně jsme se vyhnuli zavádění JavaScriptových frameworků, abychom se soustředili na základní dovednosti potřebné jako webový vývojář před přijetím frameworku. Dobrou další etapou po dokončení tohoto vzdělávacího programu by bylo naučit se o Node.js prostřednictvím jiné série videí: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
+
+> Navštivte naše [Pravidla chování](CODE_OF_CONDUCT.md) a [Pokyny pro přispívání](CONTRIBUTING.md). Uvítáme vaši konstruktivní zpětnou vazbu!
+
+
+## 🧭 Offline přístup
+
+Tuto dokumentaci můžete spustit offline pomocí [Docsify](https://docsify.js.org/#/). Forkněte tento repozitář, [nainstalujte Docsify](https://docsify.js.org/#/quickstart) na svůj lokální počítač a poté v kořenové složce tohoto repozitáře zadejte `docsify serve`. Webová stránka bude spuštěna na portu 3000 na vašem localhostu: `localhost:3000`.
+
+## 📘 PDF
+
+PDF všech lekcí najdete [zde](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
+
+
+## 🎒 Další kurzy
+
+Náš tým vytváří další kurzy! Podívejte se na:
+
+- [Generativní AI pro začátečníky](https://aka.ms/genai-beginners)
+- [Generativní AI pro začátečníky .NET](https://github.com/microsoft/Generative-AI-for-beginners-dotnet)
+- [Generativní AI s JavaScriptem](https://github.com/microsoft/generative-ai-with-javascript)
+- [Generativní AI s Javou](https://github.com/microsoft/Generative-AI-for-beginners-java)
+- [AI pro začátečníky](https://aka.ms/ai-beginners)
+- [Data Science pro začátečníky](https://aka.ms/datascience-beginners)
+- [ML pro začátečníky](https://aka.ms/ml-beginners)
+- [Kybernetická bezpečnost pro začátečníky](https://github.com/microsoft/Security-101)
+- [Webový vývoj pro začátečníky](https://aka.ms/webdev-beginners)
+- [IoT pro začátečníky](https://aka.ms/iot-beginners)
+- [Vývoj XR pro začátečníky](https://github.com/microsoft/xr-development-for-beginners)
+- [Ovládnutí GitHub Copilot pro agentické použití](https://github.com/microsoft/Mastering-GitHub-Copilot-for-Paired-Programming)
+- [Ovládnutí GitHub Copilot pro vývojáře C#/.NET](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers)
+- [Vyberte si vlastní dobrodružství s Copilotem](https://github.com/microsoft/CopilotAdventures)
+
+## Licence
+
+Tento repozitář je licencován pod licencí MIT. Další informace najdete v souboru [LICENSE](../../LICENSE).
+
+---
+
+**Prohlášení**:  
+Tento dokument byl přeložen pomocí služby pro automatický překlad [Co-op Translator](https://github.com/Azure/co-op-translator). Ačkoli se snažíme o přesnost, mějte prosím na paměti, že automatické překlady mohou obsahovat chyby nebo nepřesnosti. Původní dokument v jeho původním jazyce by měl být považován za autoritativní zdroj. Pro důležité informace doporučujeme profesionální lidský překlad. Neodpovídáme za žádné nedorozumění nebo nesprávné interpretace vyplývající z použití tohoto překladu.
\ No newline at end of file
diff --git a/translations/cs/SECURITY.md b/translations/cs/SECURITY.md
new file mode 100644
index 00000000..f06cda9f
--- /dev/null
+++ b/translations/cs/SECURITY.md
@@ -0,0 +1,51 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "4ecc3bf2e27983d4c780be6f26ee6228",
+  "translation_date": "2025-08-28T03:21:59+00:00",
+  "source_file": "SECURITY.md",
+  "language_code": "cs"
+}
+-->
+## Zabezpečení
+
+Microsoft bere bezpečnost svých softwarových produktů a služeb vážně, což zahrnuje všechny repozitáře zdrojového kódu spravované prostřednictvím našich organizací na GitHubu, mezi které patří [Microsoft](https://github.com/Microsoft), [Azure](https://github.com/Azure), [DotNet](https://github.com/dotnet), [AspNet](https://github.com/aspnet), [Xamarin](https://github.com/xamarin) a [naše GitHub organizace](https://opensource.microsoft.com/?WT.mc_id=academic-77807-sagibbon).
+
+Pokud se domníváte, že jste objevili bezpečnostní zranitelnost v jakémkoli repozitáři vlastněném Microsoftem, která odpovídá [definici bezpečnostní zranitelnosti podle Microsoftu](https://docs.microsoft.com/previous-versions/tn-archive/cc751383(v=technet.10)/?WT.mc_id=academic-77807-sagibbon), nahlaste ji prosím podle níže uvedených pokynů.
+
+## Nahlášení bezpečnostních problémů
+
+**Prosím, nenahlašujte bezpečnostní zranitelnosti prostřednictvím veřejných GitHub issues.**
+
+Místo toho je nahlaste Microsoft Security Response Center (MSRC) na [https://msrc.microsoft.com/create-report](https://msrc.microsoft.com/create-report/?WT.mc_id=academic-77807-sagibbon).
+
+Pokud dáváte přednost odeslání bez přihlášení, pošlete e-mail na [secure@microsoft.com](mailto:secure@microsoft.com). Pokud je to možné, zašifrujte svou zprávu pomocí našeho PGP klíče; stáhněte si jej z [Microsoft Security Response Center PGP Key page](https://www.microsoft.com/msrc/pgp-key-msrc/?WT.mc_id=academic-77807-sagibbon).
+
+Odpověď byste měli obdržet do 24 hodin. Pokud z nějakého důvodu neobdržíte odpověď, prosím, kontaktujte nás znovu e-mailem, abyste se ujistili, že jsme vaši původní zprávu obdrželi. Další informace naleznete na [microsoft.com/msrc](https://www.microsoft.com/msrc/?WT.mc_id=academic-77807-sagibbon).
+
+Prosím, zahrňte níže uvedené požadované informace (v co největší míře), abychom lépe pochopili povahu a rozsah možného problému:
+
+  * Typ problému (např. přetečení vyrovnávací paměti, SQL injection, cross-site scripting atd.)
+  * Plné cesty ke zdrojovým souborům souvisejícím s projevem problému
+  * Umístění postiženého zdrojového kódu (tag/branch/commit nebo přímá URL)
+  * Jakákoli speciální konfigurace potřebná k reprodukci problému
+  * Krok za krokem pokyny k reprodukci problému
+  * Proof-of-concept nebo exploit kód (pokud je to možné)
+  * Dopad problému, včetně toho, jak by útočník mohl problém zneužít
+
+Tyto informace nám pomohou rychleji zpracovat vaši zprávu.
+
+Pokud hlásíte v rámci programu odměn za chyby, podrobnější zprávy mohou přispět k vyšší odměně. Navštivte prosím stránku [Microsoft Bug Bounty Program](https://microsoft.com/msrc/bounty/?WT.mc_id=academic-77807-sagibbon) pro více informací o našich aktivních programech.
+
+## Preferované jazyky
+
+Preferujeme, aby veškerá komunikace probíhala v angličtině.
+
+## Politika
+
+Microsoft se řídí principem [Koordinovaného zveřejňování zranitelností](https://www.microsoft.com/msrc/cvd/?WT.mc_id=academic-77807-sagibbon).
+
+---
+
+**Prohlášení**:  
+Tento dokument byl přeložen pomocí služby pro automatický překlad [Co-op Translator](https://github.com/Azure/co-op-translator). Ačkoli se snažíme o přesnost, mějte na paměti, že automatické překlady mohou obsahovat chyby nebo nepřesnosti. Původní dokument v jeho původním jazyce by měl být považován za autoritativní zdroj. Pro důležité informace se doporučuje profesionální lidský překlad. Neodpovídáme za žádná nedorozumění nebo nesprávné interpretace vyplývající z použití tohoto překladu.
\ No newline at end of file
diff --git a/translations/cs/SUPPORT.md b/translations/cs/SUPPORT.md
new file mode 100644
index 00000000..540552e2
--- /dev/null
+++ b/translations/cs/SUPPORT.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "c9d207ff77b4bb46e46dc2b607a8ec1a",
+  "translation_date": "2025-08-28T03:20:43+00:00",
+  "source_file": "SUPPORT.md",
+  "language_code": "cs"
+}
+-->
+# Podpora
+
+## Jak nahlásit problémy a získat pomoc  
+
+Tento projekt používá GitHub Issues k sledování chyb a požadavků na funkce. Před nahlášením nového problému prosím prohledejte existující problémy, abyste se vyhnuli duplicitám. Pro nové problémy nahlaste svou chybu nebo požadavek na funkci jako nový Issue.
+
+Pro pomoc a dotazy ohledně používání tohoto projektu se prosím podívejte na [naše pokyny pro přispěvatele](CONTRIBUTING.md).
+
+## Podpora od Microsoftu  
+
+Podpora pro tento projekt je omezena na výše uvedené zdroje.
+
+---
+
+**Prohlášení**:  
+Tento dokument byl přeložen pomocí služby AI pro překlady [Co-op Translator](https://github.com/Azure/co-op-translator). Ačkoli se snažíme o přesnost, mějte prosím na paměti, že automatizované překlady mohou obsahovat chyby nebo nepřesnosti. Původní dokument v jeho původním jazyce by měl být považován za autoritativní zdroj. Pro důležité informace se doporučuje profesionální lidský překlad. Neodpovídáme za žádné nedorozumění nebo nesprávné interpretace vyplývající z použití tohoto překladu.
\ No newline at end of file
diff --git a/translations/cs/_404.md b/translations/cs/_404.md
new file mode 100644
index 00000000..230cb0b9
--- /dev/null
+++ b/translations/cs/_404.md
@@ -0,0 +1,21 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "ea9f0804bd62f46d9808e953ec7fc459",
+  "translation_date": "2025-08-28T03:20:59+00:00",
+  "source_file": "_404.md",
+  "language_code": "cs"
+}
+-->
+# Práce probíhá
+
+Na této stránce pracujeme. Zkuste to prosím znovu později.
+
+Otevřete [issue](https://github.com/microsoft/Web-Dev-For-Beginners/issues/new/choose), pokud máte nějaké dotazy.
+
+**[Zpět na hlavní stránku](../../../../../../..)**
+
+---
+
+**Prohlášení**:  
+Tento dokument byl přeložen pomocí služby pro automatický překlad [Co-op Translator](https://github.com/Azure/co-op-translator). I když se snažíme o přesnost, mějte prosím na paměti, že automatické překlady mohou obsahovat chyby nebo nepřesnosti. Původní dokument v jeho původním jazyce by měl být považován za autoritativní zdroj. Pro důležité informace se doporučuje profesionální lidský překlad. Neodpovídáme za žádné nedorozumění nebo nesprávné interpretace vyplývající z použití tohoto překladu.
\ No newline at end of file
diff --git a/translations/cs/docs/_navbar.md b/translations/cs/docs/_navbar.md
new file mode 100644
index 00000000..a6e71d14
--- /dev/null
+++ b/translations/cs/docs/_navbar.md
@@ -0,0 +1,34 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "3bd2f51ecf4ac9b39277cba748943793",
+  "translation_date": "2025-08-28T04:12:03+00:00",
+  "source_file": "docs/_navbar.md",
+  "language_code": "cs"
+}
+-->
+- Překlady
+  - [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)
+
+---
+
+**Prohlášení**:  
+Tento dokument byl přeložen pomocí služby pro automatický překlad [Co-op Translator](https://github.com/Azure/co-op-translator). Ačkoli se snažíme o přesnost, mějte prosím na paměti, že automatické překlady mohou obsahovat chyby nebo nepřesnosti. Původní dokument v jeho původním jazyce by měl být považován za autoritativní zdroj. Pro důležité informace doporučujeme profesionální lidský překlad. Neodpovídáme za žádné nedorozumění nebo nesprávné interpretace vyplývající z použití tohoto překladu.
\ No newline at end of file
diff --git a/translations/cs/docs/_sidebar.md b/translations/cs/docs/_sidebar.md
new file mode 100644
index 00000000..26eb21bc
--- /dev/null
+++ b/translations/cs/docs/_sidebar.md
@@ -0,0 +1,51 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "655c91b5979de46f1d70d97f0c5f1d14",
+  "translation_date": "2025-08-28T04:11:38+00:00",
+  "source_file": "docs/_sidebar.md",
+  "language_code": "cs"
+}
+-->
+- Úvod
+  - [1](../1-getting-started-lessons/1-intro-to-programming-languages/README.md)
+  - [2](../1-getting-started-lessons/2-github-basics/README.md)
+  - [3](../1-getting-started-lessons/3-accessibility/README.md)
+  
+- Základy JS
+  - [4](../2-js-basics/1-data-types/README.md)
+  - [5](../2-js-basics/2-functions-methods/README.md)
+  - [6](../2-js-basics/3-making-decisions/README.md)
+  - [7](../2-js-basics/4-arrays-loops/README.md)
+
+- HTML, CSS, JS
+  - [8](../3-terrarium/1-intro-to-html/README.md)
+  - [9](../3-terrarium/2-intro-to-css/README.md)
+  - [10](../3-terrarium/3-intro-to-DOM-and-closures/README.md)
+
+- Hra na psaní
+  - [11](../4-typing-game/typing-game/README.md)
+  
+- Rozšíření pro prohlížeč
+  - [12](../5-browser-extension/1-about-browsers/README.md)
+  - [13](../5-browser-extension/2-forms-browsers-local-storage/README.md)
+  - [14](../5-browser-extension/3-background-tasks-and-performance/README.md)
+
+- Vesmírná hra
+  - [15](../6-space-game/1-introduction/README.md)
+  - [16](../6-space-game/2-drawing-to-canvas/README.md)
+  - [17](../6-space-game/3-moving-elements-around/README.md)
+  - [18](../6-space-game/4-collision-detection/README.md)
+  - [19](../6-space-game/5-keeping-score/README.md)
+  - [20](../6-space-game/6-end-condition/README.md)
+
+- Bankovní projekt
+  - [21](../7-bank-project/1-template-route/README.md)
+  - [22](../7-bank-project/2-forms/README.md)
+  - [23](../7-bank-project/3-data/README.md)
+  - [24](../7-bank-project/4-state-management/README.md)
+
+---
+
+**Prohlášení**:  
+Tento dokument byl přeložen pomocí služby pro automatický překlad [Co-op Translator](https://github.com/Azure/co-op-translator). Ačkoli se snažíme o přesnost, mějte prosím na paměti, že automatické překlady mohou obsahovat chyby nebo nepřesnosti. Původní dokument v jeho původním jazyce by měl být považován za autoritativní zdroj. Pro důležité informace doporučujeme profesionální lidský překlad. Neodpovídáme za žádné nedorozumění nebo nesprávné interpretace vyplývající z použití tohoto překladu.
\ No newline at end of file
diff --git a/translations/cs/for-teachers.md b/translations/cs/for-teachers.md
new file mode 100644
index 00000000..7c77a36d
--- /dev/null
+++ b/translations/cs/for-teachers.md
@@ -0,0 +1,47 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "75cb51f7ca9ea0b097ef4a1287e9290c",
+  "translation_date": "2025-08-28T03:22:47+00:00",
+  "source_file": "for-teachers.md",
+  "language_code": "cs"
+}
+-->
+## Pro pedagogy
+
+Chtěli byste použít tento výukový plán ve své třídě? Klidně do toho!
+
+Ve skutečnosti jej můžete použít přímo na GitHubu pomocí GitHub Classroom.
+
+Abyste to mohli udělat, forkněte toto repozitáře. Budete muset vytvořit repozitář pro každou lekci, takže budete muset extrahovat každou složku do samostatného repozitáře. Tímto způsobem může [GitHub Classroom](https://classroom.github.com/classrooms) zpracovat každou lekci zvlášť.
+
+Tyto [podrobné instrukce](https://github.blog/2020-03-18-set-up-your-digital-classroom-with-github-classroom/) vám poskytnou představu, jak nastavit svou třídu.
+
+## Použití v Moodle, Canvas nebo Blackboard
+
+Tento výukový plán skvěle funguje v těchto systémech pro správu výuky! Použijte [soubor pro nahrání do Moodle](../../../../../../../teaching-files/webdev-moodle.mbz) pro kompletní obsah, nebo vyzkoušejte [soubor Common Cartridge](../../../../../../../teaching-files/webdev-common-cartridge.imscc), který obsahuje část obsahu. Moodle Cloud nepodporuje kompletní exporty Common Cartridge, takže je lepší použít soubor pro Moodle, který lze nahrát do Canvas. Dejte nám vědět, jak můžeme tento proces zlepšit.
+
+![Moodle](../../translated_images/moodle.94eb93d714a50cb2c97435b408017dee224348b61bc86203ffd43a4f4e57b95f.cs.png)  
+> Výukový plán v prostředí Moodle
+
+![Canvas](../../translated_images/canvas.fbd605ff8e5b8aff567d398528ce113db304446b90b9cad55c654de3fdfcda34.cs.png)  
+> Výukový plán v prostředí Canvas
+
+## Použití repozitáře tak, jak je
+
+Pokud byste chtěli použít tento repozitář v jeho aktuální podobě, bez použití GitHub Classroom, je to také možné. Budete muset studentům sdělit, kterou lekci mají společně projít.
+
+V online formátu (Zoom, Teams nebo jiném) můžete vytvořit breakout místnosti pro kvízy a mentorovat studenty, aby se připravili na učení. Poté pozvěte studenty ke kvízům a nechte je odevzdat své odpovědi jako 'issues' v určitém čase. Stejný postup můžete použít i pro úkoly, pokud chcete, aby studenti pracovali společně a veřejně.
+
+Pokud preferujete soukromější formát, požádejte studenty, aby si forknuli výukový plán, lekci po lekci, do svých vlastních soukromých repozitářů na GitHubu a dali vám k nim přístup. Poté mohou dokončit kvízy a úkoly soukromě a odevzdat je vám prostřednictvím issues ve vašem třídním repozitáři.
+
+Existuje mnoho způsobů, jak tento výukový plán přizpůsobit online výuce. Dejte nám vědět, co vám funguje nejlépe!
+
+## Podělte se s námi o své názory!
+
+Chceme, aby tento výukový plán fungoval pro vás a vaše studenty. Spojte se s námi v [Teacher corner](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner) a otevřete [**nový issue**](https://github.com/microsoft/Web-Dev-For-Beginners/issues/new/choose) pro jakékoli požadavky, chyby a zpětnou vazbu.
+
+---
+
+**Prohlášení**:  
+Tento dokument byl přeložen pomocí služby pro automatický překlad [Co-op Translator](https://github.com/Azure/co-op-translator). Ačkoli se snažíme o přesnost, mějte prosím na paměti, že automatické překlady mohou obsahovat chyby nebo nepřesnosti. Původní dokument v jeho původním jazyce by měl být považován za autoritativní zdroj. Pro důležité informace doporučujeme profesionální lidský překlad. Neodpovídáme za žádná nedorozumění nebo nesprávné interpretace vyplývající z použití tohoto překladu.
\ No newline at end of file
diff --git a/translations/cs/lesson-template/README.md b/translations/cs/lesson-template/README.md
new file mode 100644
index 00000000..54b867f0
--- /dev/null
+++ b/translations/cs/lesson-template/README.md
@@ -0,0 +1,65 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "0494be70ad7fadd13a8c3d549c23e355",
+  "translation_date": "2025-08-28T04:12:27+00:00",
+  "source_file": "lesson-template/README.md",
+  "language_code": "cs"
+}
+-->
+# [Téma lekce]
+
+![Vložit video zde](../../../lesson-template/video-url)
+
+## [Kvíz před přednáškou](../../../lesson-template/quiz-url)
+
+[Popište, co se naučíme]
+
+### Úvod
+
+Popište, co bude obsahem
+
+> Poznámky
+
+### Předpoklady
+
+Jaké kroky by měly být splněny před touto lekcí?
+
+### Příprava
+
+Přípravné kroky pro zahájení této lekce
+
+---
+
+[Projděte obsah v blocích]
+
+## [Téma 1]
+
+### Úkol:
+
+Spolupracujte na postupném vylepšování svého kódu, abyste vytvořili projekt se sdíleným kódem:
+
+```html
+code blocks
+```
+
+✅ Kontrola znalostí - využijte tento okamžik k rozšíření znalostí studentů pomocí otevřených otázek
+
+## [Téma 2]
+
+## [Téma 3]
+
+🚀 Výzva: Přidejte výzvu, na které studenti mohou společně pracovat ve třídě, aby vylepšili projekt
+
+Volitelné: přidejte snímek obrazovky dokončeného uživatelského rozhraní lekce, pokud je to vhodné
+
+## [Kvíz po přednášce](../../../lesson-template/quiz-url)
+
+## Přehled & Samostudium
+
+**Úkol k odevzdání [MM/RR]**: [Název úkolu](assignment.md)
+
+---
+
+**Prohlášení**:  
+Tento dokument byl přeložen pomocí služby pro automatizovaný překlad [Co-op Translator](https://github.com/Azure/co-op-translator). I když se snažíme o přesnost, mějte prosím na paměti, že automatizované překlady mohou obsahovat chyby nebo nepřesnosti. Původní dokument v jeho původním jazyce by měl být považován za autoritativní zdroj. Pro důležité informace doporučujeme profesionální lidský překlad. Neodpovídáme za žádná nedorozumění nebo nesprávné interpretace vyplývající z použití tohoto překladu.
\ No newline at end of file
diff --git a/translations/cs/lesson-template/assignment.md b/translations/cs/lesson-template/assignment.md
new file mode 100644
index 00000000..4cb606be
--- /dev/null
+++ b/translations/cs/lesson-template/assignment.md
@@ -0,0 +1,23 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "b5f62ec256c7e43e771f0d3b4e1a9130",
+  "translation_date": "2025-08-28T04:12:46+00:00",
+  "source_file": "lesson-template/assignment.md",
+  "language_code": "cs"
+}
+-->
+# [Název úkolu]
+
+## Pokyny
+
+## Hodnoticí kritéria
+
+| Kritéria | Vynikající | Dostatečné | Vyžaduje zlepšení |
+| -------- | ---------- | ---------- | ----------------- |
+|          |            |            |                   |
+
+---
+
+**Prohlášení**:  
+Tento dokument byl přeložen pomocí služby AI pro překlady [Co-op Translator](https://github.com/Azure/co-op-translator). Ačkoli se snažíme o přesnost, mějte prosím na paměti, že automatizované překlady mohou obsahovat chyby nebo nepřesnosti. Původní dokument v jeho původním jazyce by měl být považován za autoritativní zdroj. Pro důležité informace se doporučuje profesionální lidský překlad. Neodpovídáme za žádná nedorozumění nebo nesprávné interpretace vyplývající z použití tohoto překladu.
\ No newline at end of file
diff --git a/translations/cs/quiz-app/README.md b/translations/cs/quiz-app/README.md
new file mode 100644
index 00000000..1ca0c044
--- /dev/null
+++ b/translations/cs/quiz-app/README.md
@@ -0,0 +1,191 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "5301875c55bb305e6046bed3a4fd06d2",
+  "translation_date": "2025-08-28T04:21:53+00:00",
+  "source_file": "quiz-app/README.md",
+  "language_code": "cs"
+}
+-->
+# Kvízová aplikace
+
+Tyto kvízy slouží jako přednáškové a popřednáškové kvízy pro kurikulum datové vědy na https://aka.ms/webdev-beginners
+
+## Přidání přeložené sady kvízů
+
+Přidejte překlad kvízu vytvořením odpovídajících struktur kvízů ve složkách `assets/translations`. Kanonické kvízy se nacházejí v `assets/translations/en`. Kvízy jsou rozděleny do několika skupin. Ujistěte se, že číslování odpovídá správné sekci kvízu. Celkem je v tomto kurikulu 40 kvízů, přičemž číslování začíná od 0.
+
+  
+<details>
+<summary>Takto vypadá struktura souboru s překladem:</summary>
+
+```
+[
+    {
+        "title": "A title",
+        "complete": "A complete button title",
+        "error": "An error message upon selecting the wrong answer",
+        "quizzes": [
+            {
+                "id": 1,
+                "title": "Title",
+                "quiz": [
+                    {
+                        "questionText": "The question asked",
+                        "answerOptions": [
+                            {
+                                "answerText": "Option 1 title",
+                                "isCorrect": true
+                            },
+                            {
+                                "answerText": "Option 2 title",
+                                "isCorrect": false
+                            }
+                        ]
+                    }
+                ]
+            }
+        ]
+    }
+]
+```
+</details>
+
+Po úpravě překladů upravte soubor index.js ve složce s překlady, aby importoval všechny soubory podle konvencí v `en`.
+
+Upravte soubor `index.js` v `assets/translations`, aby importoval nové přeložené soubory.
+
+Například pokud je váš překlad JSON v `ex.json`, nastavte 'ex' jako lokalizační klíč a zadejte jej, jak je uvedeno níže, pro import:
+
+<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>
+
+## Spuštění kvízové aplikace lokálně
+
+### Předpoklady
+
+- Účet na GitHubu
+- [Node.js a Git](https://nodejs.org/)
+
+### Instalace a nastavení
+
+1. Vytvořte repozitář z této [šablony](https://github.com/new?template_name=Web-Dev-For-Beginners&template_owner=microsoft) 
+
+1. Naklonujte svůj nový repozitář a přejděte do složky quiz-app
+
+   ```bash
+   git clone https://github.com/your-github-organization/repo-name
+   cd repo-name/quiz-app
+   ```
+
+1. Nainstalujte balíčky npm a závislosti
+
+   ```bash
+   npm install
+   ```
+
+### Sestavení aplikace
+
+1. Pro sestavení řešení spusťte:
+
+   ```bash
+   npm run build
+   ```
+
+### Spuštění aplikace
+
+1. Pro spuštění řešení spusťte:
+
+    ```bash
+    npm run dev
+    ```
+
+### [Volitelné] Lintování
+
+1. Pro zajištění, že je kód lintován, spusťte:
+
+    ```bash
+    npm run lint
+    ```
+
+## Nasazení kvízové aplikace na Azure 
+
+### Předpoklady
+- Předplatné Azure. Zaregistrujte se zdarma [zde](https://aka.ms/azure-free).
+
+    _Odhad nákladů na nasazení této kvízové aplikace: ZDARMA_
+
+[![Deploy to Azure](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/#create/Microsoft.StaticApp)
+
+Jakmile se přihlásíte na Azure prostřednictvím výše uvedeného odkazu, vyberte předplatné a skupinu prostředků:
+
+- Detaily statické webové aplikace: Zadejte název a vyberte hostingový plán
+- Přihlášení na GitHub: Nastavte svůj zdroj nasazení jako GitHub, poté se přihlaste a vyplňte požadovaná pole ve formuláři:
+    - *Organizace* – Vyberte svou organizaci.
+    - *Repozitář* – Vyberte repozitář kurikula Web Dev for Beginners. 
+    - *Větev* - Vyberte větev (main) 
+- Předvolby sestavení: Azure Static Web Apps používá detekční algoritmus k určení frameworku použitého ve vaší aplikaci. 
+    - *Umístění aplikace* - ./quiz-app
+    - *Umístění API* -
+    - *Umístění výstupu* - dist
+- Nasazení: Klikněte na 'Review + Create', poté na 'Create'
+
+    Po nasazení bude ve složce *.github* vašeho repozitáře vytvořen soubor workflow. Tento soubor workflow obsahuje instrukce o událostech, které spustí opětovné nasazení aplikace na Azure, například _**push** na větev **main**_ atd.
+
+    <details>
+    <summary>Příklad souboru workflow</summary>
+    Zde je příklad, jak může vypadat soubor 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>
+
+- Po nasazení: Po dokončení nasazení klikněte na 'Go to Deployment' a poté na 'View app in browser'.
+
+Jakmile bude GitHub Action (workflow) úspěšně proveden, obnovte živou stránku, abyste viděli svou aplikaci.
+
+---
+
+**Upozornění**:  
+Tento dokument byl přeložen pomocí služby pro automatický překlad [Co-op Translator](https://github.com/Azure/co-op-translator). I když se snažíme o přesnost, mějte prosím na paměti, že automatické překlady mohou obsahovat chyby nebo nepřesnosti. Původní dokument v jeho původním jazyce by měl být považován za závazný zdroj. Pro důležité informace se doporučuje profesionální lidský překlad. Nezodpovídáme za jakékoli nedorozumění nebo nesprávné interpretace vyplývající z použití tohoto překladu.
\ No newline at end of file
diff --git a/translations/hu/1-getting-started-lessons/1-intro-to-programming-languages/README.md b/translations/hu/1-getting-started-lessons/1-intro-to-programming-languages/README.md
new file mode 100644
index 00000000..b4aead3e
--- /dev/null
+++ b/translations/hu/1-getting-started-lessons/1-intro-to-programming-languages/README.md
@@ -0,0 +1,198 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "c63675cfaf1d223b37bb9fecbfe7c252",
+  "translation_date": "2025-08-28T04:29:57+00:00",
+  "source_file": "1-getting-started-lessons/1-intro-to-programming-languages/README.md",
+  "language_code": "hu"
+}
+-->
+# Bevezetés a programozási nyelvekbe és az eszközök világába
+
+Ez a lecke a programozási nyelvek alapjait tárgyalja. Az itt bemutatott témák a legtöbb modern programozási nyelvre alkalmazhatók. Az „Eszközök világa” részben megismerkedhetsz hasznos szoftverekkel, amelyek segítenek fejlesztőként.
+
+![Intro Programming](../../../../translated_images/webdev101-programming.d6e3f98e61ac4bff0b27dcbf1c3f16c8ed46984866f2d29988929678b0058fde.hu.png)
+> Sketchnote: [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Előadás előtti kvíz
+[Előadás előtti kvíz](https://forms.office.com/r/dru4TE0U9n?origin=lprLink)
+
+## Bevezetés
+
+Ebben a leckében az alábbiakról lesz szó:
+
+- Mi a programozás?
+- Programozási nyelvek típusai
+- Egy program alapvető elemei
+- Hasznos szoftverek és eszközök a profi fejlesztők számára
+
+> Ezt a leckét elérheted a [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon) oldalán!
+
+## Mi a programozás?
+
+A programozás (más néven kódolás) az a folyamat, amely során utasításokat írunk egy eszköz, például számítógép vagy mobil eszköz számára. Ezeket az utasításokat programozási nyelven írjuk, amelyet az eszköz értelmez. Ezeket az utasításokat különböző neveken ismerhetjük, például *program*, *számítógépes program*, *alkalmazás (app)* vagy *futtatható fájl*.
+
+Egy *program* bármi lehet, amit kóddal írtak; weboldalak, játékok és telefonos alkalmazások is programok. Bár lehetséges programot létrehozni kódolás nélkül, az alapvető logikát az eszköz értelmezi, és ezt a logikát valószínűleg kóddal írták. Egy program, amely *fut* vagy *végrehajt* kódot, éppen utasításokat hajt végre. Az eszköz, amelyen ezt a leckét olvasod, egy programot futtat, hogy megjelenítse a képernyődön.
+
+✅ Kutass egy kicsit: kit tartanak a világ első számítógépes programozójának?
+
+## Programozási nyelvek
+
+A programozási nyelvek lehetővé teszik a fejlesztők számára, hogy utasításokat írjanak egy eszköz számára. Az eszközök csak bináris (1-esek és 0-ák) formátumot értenek, ami a *legtöbb* fejlesztő számára nem túl hatékony kommunikációs mód. A programozási nyelvek hidat képeznek az emberek és a számítógépek közötti kommunikációban.
+
+A programozási nyelvek különböző formátumokban léteznek, és különböző célokat szolgálhatnak. Például a JavaScript elsősorban webalkalmazásokhoz használatos, míg a Bash elsősorban operációs rendszerekhez.
+
+Az *alacsony szintű nyelvek* általában kevesebb lépést igényelnek az eszköz számára az utasítások értelmezéséhez, mint a *magas szintű nyelvek*. A magas szintű nyelvek azonban olvashatóságuk és támogatottságuk miatt népszerűek. A JavaScript például magas szintű nyelvnek számít.
+
+Az alábbi kód példát mutat arra, hogy egy magas szintű nyelv (JavaScript) és egy alacsony szintű nyelv (ARM assembly kód) hogyan különbözik egymástól.
+
+```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
+```
+
+Hihetetlen, de *mindkettő ugyanazt csinálja*: egy Fibonacci-sorozatot nyomtat ki 10-ig.
+
+✅ A Fibonacci-sorozatot úgy [határozzák meg](https://en.wikipedia.org/wiki/Fibonacci_number), mint egy számhalmazt, ahol minden szám az előző kettő összege, kezdve 0-val és 1-gyel. Az első 10 szám a Fibonacci-sorozatban: 0, 1, 1, 2, 3, 5, 8, 13, 21 és 34.
+
+## Egy program elemei
+
+Egy program egyetlen utasítását *utasításnak* nevezzük, amely általában egy karakterrel vagy sortöréssel jelzi, hogy hol ér véget, vagyis *lezárul*. Az, hogy egy program hogyan zárul le, nyelvenként eltérő.
+
+Az utasítások egy programban gyakran a felhasználó által megadott vagy máshonnan származó adatokra támaszkodnak az utasítások végrehajtásához. Az adatok megváltoztathatják a program viselkedését, ezért a programozási nyelvek lehetőséget biztosítanak arra, hogy az adatokat ideiglenesen tároljuk, hogy később felhasználhassuk őket. Ezeket *változóknak* nevezzük. A változók olyan utasítások, amelyek arra utasítják az eszközt, hogy adatokat tároljon a memóriájában. A változók a programozásban hasonlóak az algebrában használt változókhoz: egyedi nevük van, és értékük idővel változhat.
+
+Előfordulhat, hogy egyes utasításokat az eszköz nem hajt végre. Ez általában a fejlesztő szándékos döntése, vagy véletlenül történik, amikor váratlan hiba lép fel. Az alkalmazás feletti ilyen típusú kontroll robusztusabbá és karbantarthatóbbá teszi azt. Ezek a kontrollváltozások általában bizonyos feltételek teljesülésekor következnek be. Egy gyakori utasítás, amelyet a modern programozásban használnak a program futásának irányítására, az `if..else` utasítás.
+
+✅ Erről az utasítástípusról a következő leckékben tanulsz majd többet.
+
+## Eszközök világa
+
+[![Eszközök világa](https://img.youtube.com/vi/69WJeXGBdxg/0.jpg)](https://youtube.com/watch?v=69WJeXGBdxg "Eszközök világa")
+
+> 🎥 Kattints a fenti képre egy videóért az eszközökről
+
+Ebben a részben megismerkedhetsz néhány olyan szoftverrel, amelyet hasznosnak találhatsz, amikor elkezded szakmai fejlesztői utadat.
+
+Egy **fejlesztői környezet** egyedi eszközök és funkciók halmaza, amelyeket a fejlesztők gyakran használnak szoftverírás közben. Ezeket az eszközöket a fejlesztő egyedi igényeihez igazították, és idővel változhatnak, ha a fejlesztő prioritásai megváltoznak a munkában, személyes projektekben, vagy ha más programozási nyelvet használ.
+
+### Szerkesztők
+
+Az egyik legfontosabb eszköz a szoftverfejlesztésben a szerkesztő. A szerkesztők azok a helyek, ahol a kódot írod, és néha futtatod is.
+
+A fejlesztők több okból is támaszkodnak a szerkesztőkre:
+
+- A *hibakeresés* segít feltárni a hibákat és problémákat, lépésről lépésre végighaladva a kódon. Néhány szerkesztő rendelkezik hibakeresési funkciókkal, amelyek testreszabhatók és hozzáadhatók bizonyos programozási nyelvekhez.
+- A *szintaxiskiemelés* színeket és szövegformázást ad a kódhoz, megkönnyítve annak olvasását. A legtöbb szerkesztő lehetővé teszi a szintaxiskiemelés testreszabását.
+- Az *extensionök és integrációk* speciális eszközök, amelyeket fejlesztők készítettek fejlesztők számára. Ezek az eszközök nem voltak beépítve az alap szerkesztőbe. Például sok fejlesztő dokumentálja a kódját, hogy elmagyarázza, hogyan működik. Telepíthetnek helyesírás-ellenőrző bővítményt, hogy segítsenek megtalálni a dokumentációban lévő elírásokat.
+- A *testreszabás* lehetővé teszi a fejlesztők számára, hogy egyedi fejlesztői környezetet hozzanak létre saját igényeikhez igazítva.
+
+#### Népszerű szerkesztők és webfejlesztési bővítmények
+
+- [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/)
+
+### Böngészők
+
+Egy másik kulcsfontosságú eszköz a böngésző. A webfejlesztők a böngészőre támaszkodnak, hogy lássák, hogyan fut a kódjuk a weben. A böngésző megjeleníti azokat a vizuális elemeket is, amelyeket a szerkesztőben írtak, például a HTML-t.
+
+Sok böngésző rendelkezik *fejlesztői eszközökkel* (DevTools), amelyek hasznos funkciókat és információkat tartalmaznak, hogy segítsenek a fejlesztőknek fontos adatokat gyűjteni az alkalmazásukról.
+
+#### Népszerű böngészők és 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)
+
+### Parancssori eszközök
+
+Néhány fejlesztő kevésbé grafikus nézetet részesít előnyben napi feladataihoz, és a parancssorra támaszkodik. A parancssor lehetővé teszi, hogy billentyűzeten maradva gyorsan végezz el feladatokat, anélkül hogy az egeret használnád.
+
+#### Népszerű parancssori lehetőségek
+
+- Windows: [Powershell](https://docs.microsoft.com/powershell/scripting/overview?view=powershell-7/?WT.mc_id=academic-77807-sagibbon), CMD
+- MacOS: [Terminal](https://support.apple.com/guide/terminal/open-or-quit-terminal-apd5265185d-f365-44cb-8b09-71a064a42125/mac), iTerm
+- Linux: [Bash](https://www.gnu.org/software/bash/manual/html_node/index.html), KDE Konsole
+
+#### Népszerű parancssori eszközök
+
+- [Git](https://git-scm.com/)
+- [NPM](https://www.npmjs.com/)
+- [Yarn](https://classic.yarnpkg.com/en/docs/cli/)
+
+### Dokumentáció
+
+A fejlesztők gyakran dokumentációhoz fordulnak, hogy új dolgokat tanuljanak meg, vagy mélyebb ismereteket szerezzenek.
+
+#### Népszerű dokumentációk
+
+- [Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web)
+- [Frontend Masters](https://frontendmasters.com/learn/)
+- [Web.dev](https://web.dev)
+- [Microsoft fejlesztői dokumentáció](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers)
+- [W3 Schools](https://www.w3schools.com/where_to_start.asp)
+
+✅ Kutass: Most, hogy ismered a webfejlesztői környezet alapjait, hasonlítsd össze egy webdizájner környezetével.
+
+---
+
+## 🚀 Kihívás
+
+Hasonlíts össze néhány programozási nyelvet. Milyen egyedi jellemzői vannak a JavaScriptnek a Javához képest? És mi a helyzet a COBOL és a Go esetében?
+
+## Előadás utáni kvíz
+[Előadás utáni kvíz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/2)
+
+## Áttekintés és önálló tanulás
+
+Tanulmányozd a programozók számára elérhető különböző nyelveket. Próbálj meg írni egy sort egy nyelven, majd írd át két másik nyelvre. Mit tanultál?
+
+## Feladat
+
+[Dokumentáció olvasása](assignment.md)
+
+---
+
+**Felelősség kizárása**:  
+Ez a dokumentum az AI fordítási szolgáltatás, a [Co-op Translator](https://github.com/Azure/co-op-translator) segítségével lett lefordítva. Bár törekszünk a pontosságra, kérjük, vegye figyelembe, hogy az automatikus fordítások hibákat vagy pontatlanságokat tartalmazhatnak. Az eredeti dokumentum az eredeti nyelvén tekintendő hiteles forrásnak. Fontos információk esetén javasolt professzionális, emberi fordítást igénybe venni. Nem vállalunk felelősséget semmilyen félreértésért vagy téves értelmezésért, amely a fordítás használatából eredhet.
\ No newline at end of file
diff --git a/translations/hu/1-getting-started-lessons/1-intro-to-programming-languages/assignment.md b/translations/hu/1-getting-started-lessons/1-intro-to-programming-languages/assignment.md
new file mode 100644
index 00000000..cb13060f
--- /dev/null
+++ b/translations/hu/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-28T04:31:36+00:00",
+  "source_file": "1-getting-started-lessons/1-intro-to-programming-languages/assignment.md",
+  "language_code": "hu"
+}
+-->
+# A dokumentáció olvasása
+
+## Útmutató
+
+Számos olyan eszköz létezik, amelyre egy webfejlesztőnek szüksége lehet, és amelyek megtalálhatók az [MDN dokumentációjában az ügyféloldali eszközökről](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview). Válassz ki 3 olyan eszközt, amelyet a leckében nem tárgyaltunk, magyarázd el, miért használná egy webfejlesztő, és keress egy eszközt, amely ebbe a kategóriába tartozik, majd oszd meg annak dokumentációját. Ne használj az MDN dokumentációban szereplő példákat.
+
+## Értékelési szempontok
+
+Kiemelkedő | Megfelelő | Fejlesztésre szorul
+--- | --- | -- |
+|Elmagyarázta, miért használná a webfejlesztő az eszközt| Elmagyarázta, hogyan, de nem miért használná a fejlesztő az eszközt| Nem említette, hogyan vagy miért használná a fejlesztő az eszközt  |
+
+---
+
+**Felelősségkizárás**:  
+Ez a dokumentum az [Co-op Translator](https://github.com/Azure/co-op-translator) AI fordítási szolgáltatás segítségével készült. Bár törekszünk a pontosságra, kérjük, vegye figyelembe, hogy az automatikus fordítások hibákat vagy pontatlanságokat tartalmazhatnak. Az eredeti dokumentum az eredeti nyelvén tekintendő hiteles forrásnak. Kritikus információk esetén javasolt a professzionális, emberi fordítás igénybevétele. Nem vállalunk felelősséget a fordítás használatából eredő félreértésekért vagy téves értelmezésekért.
\ No newline at end of file
diff --git a/translations/hu/1-getting-started-lessons/2-github-basics/README.md b/translations/hu/1-getting-started-lessons/2-github-basics/README.md
new file mode 100644
index 00000000..e9c7f878
--- /dev/null
+++ b/translations/hu/1-getting-started-lessons/2-github-basics/README.md
@@ -0,0 +1,333 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "05666cecb8983a72cf0ce1d18932b5b7",
+  "translation_date": "2025-08-28T04:37:43+00:00",
+  "source_file": "1-getting-started-lessons/2-github-basics/README.md",
+  "language_code": "hu"
+}
+-->
+# Bevezetés a GitHub használatába
+
+Ez a lecke a GitHub alapjait ismerteti, amely egy platform a kód tárolására és változásainak kezelésére.
+
+![Bevezetés a GitHub használatába](../../../../translated_images/webdev101-github.8846d7971abef6f947909b4f9d343e2a23778aa716ca6b9d71df7174ee5009ac.hu.png)
+> Sketchnote készítette: [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Előzetes kvíz
+[Előzetes kvíz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/3)
+
+## Bevezetés
+
+Ebben a leckében az alábbiakat fogjuk áttekinteni:
+
+- a munkád nyomon követése a saját gépeden
+- projektek közös munkája másokkal
+- hogyan járulhatsz hozzá nyílt forráskódú szoftverekhez
+
+### Előfeltételek
+
+Mielőtt elkezdenéd, ellenőrizd, hogy telepítve van-e a Git. A terminálban írd be:  
+`git --version`
+
+Ha a Git nincs telepítve, [töltsd le a Git-et](https://git-scm.com/downloads). Ezután állítsd be a helyi Git profilt a terminálban:
+* `git config --global user.name "your-name"`
+* `git config --global user.email "your-email"`
+
+Ellenőrizheted, hogy a Git már konfigurálva van-e, ha beírod:
+`git config --list`
+
+Szükséged lesz egy GitHub fiókra, egy kódszerkesztőre (például Visual Studio Code), és meg kell nyitnod a terminált (vagy: parancssort).
+
+Látogass el a [github.com](https://github.com/) oldalra, és hozz létre egy fiókot, ha még nem tetted meg, vagy jelentkezz be, és töltsd ki a profilodat.
+
+✅ A GitHub nem az egyetlen kód-tároló a világon; vannak mások is, de a GitHub a legismertebb.
+
+### Felkészülés
+
+Szükséged lesz egy mappára a helyi gépeden (laptop vagy PC), amely tartalmaz egy kódprojektet, valamint egy nyilvános GitHub-tárhelyre, amely példaként szolgál arra, hogyan járulhatsz hozzá mások projektjeihez.
+
+---
+
+## Kódkezelés
+
+Tegyük fel, hogy van egy mappád helyben, amely tartalmaz egy kódprojektet, és szeretnéd elkezdeni nyomon követni a haladásodat a git verziókezelő rendszer segítségével. Néhányan úgy hasonlítják a git használatát, mintha szerelmes levelet írnál a jövőbeli önmagadnak. Ha napokkal, hetekkel vagy hónapokkal később olvasod a commit üzeneteidet, emlékezni fogsz arra, miért hoztál egy adott döntést, vagy vissza tudsz állítani egy változtatást – persze csak akkor, ha jó "commit üzeneteket" írsz.
+
+### Feladat: Hozz létre egy tárhelyet és commitolj kódot  
+
+> Nézd meg a videót
+> 
+> [![Git és GitHub alapok videó](https://img.youtube.com/vi/9R31OUPpxU4/0.jpg)](https://www.youtube.com/watch?v=9R31OUPpxU4)
+
+1. **Tárhely létrehozása a GitHub-on**. A GitHub.com oldalon, a tárhelyek fülön, vagy a jobb felső navigációs sávban keresd meg az **új tárhely** gombot.
+
+   1. Adj nevet a tárhelyednek (mappának).
+   1. Válaszd ki a **tárhely létrehozása** opciót.
+
+1. **Navigálj a munkamappádhoz**. A terminálban válts arra a mappára (más néven könyvtárra), amelyet nyomon szeretnél követni. Írd be:
+
+   ```bash
+   cd [name of your folder]
+   ```
+
+1. **Git tárhely inicializálása**. A projektedben írd be:
+
+   ```bash
+   git init
+   ```
+
+1. **Állapot ellenőrzése**. A tárhely állapotának ellenőrzéséhez írd be:
+
+   ```bash
+   git status
+   ```
+
+   Az eredmény valahogy így nézhet ki:
+
+   ```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
+   ```
+
+   Általában a `git status` parancs olyan információkat ad, mint például mely fájlok állnak készen a _mentésre_ a tárhelyen, vagy melyeken vannak olyan változások, amelyeket érdemes lehet megőrizni.
+
+1. **Minden fájl hozzáadása nyomon követéshez**  
+   Ezt nevezik fájlok staging területre való hozzáadásának.
+
+   ```bash
+   git add .
+   ```
+
+   A `git add` plusz `.` argumentum azt jelzi, hogy minden fájl és változás nyomon követésre kerül.
+
+1. **Kiválasztott fájlok hozzáadása nyomon követéshez**
+
+   ```bash
+   git add [file or folder name]
+   ```
+
+   Ez segít abban, hogy csak kiválasztott fájlokat adj hozzá a staging területre, amikor nem akarod egyszerre az összes fájlt commitolni.
+
+1. **Minden fájl unstagingelése**
+
+   ```bash
+   git reset
+   ```
+
+   Ez a parancs segít egyszerre minden fájlt unstagingelni.
+
+1. **Egy adott fájl unstagingelése**
+
+   ```bash
+   git reset [file or folder name]
+   ```
+
+   Ez a parancs segít csak egy adott fájlt unstagingelni, amelyet nem akarsz a következő commitba belefoglalni.
+
+1. **Munkád megőrzése**. Ezen a ponton hozzáadtad a fájlokat az úgynevezett _staging területre_. Ez egy hely, ahol a Git nyomon követi a fájljaidat. Ahhoz, hogy a változtatásokat véglegessé tedd, _commitolnod_ kell a fájlokat. Ehhez hozz létre egy _commitot_ a `git commit` paranccsal. A _commit_ egy mentési pontot képvisel a tárhelyed történetében. Írd be a következőt a _commit_ létrehozásához:
+
+   ```bash
+   git commit -m "first commit"
+   ```
+
+   Ez commitolja az összes fájlodat, hozzáadva az "első commit" üzenetet. A jövőbeli commit üzeneteknél érdemes lesz részletesebb leírást adni, hogy pontosan közvetítsd, milyen típusú változtatást végeztél.
+
+1. **Kapcsold össze a helyi Git tárhelyedet a GitHubbal**. Egy Git tárhely jó a gépeden, de egy ponton szeretnéd a fájljaidat valahol biztonsági mentésként tárolni, és másokat is meghívni, hogy dolgozzanak veled a tárhelyeden. Egy ilyen nagyszerű hely erre a GitHub. Emlékezz, hogy már létrehoztunk egy tárhelyet a GitHubon, így csak össze kell kapcsolnunk a helyi Git tárhelyet a GitHubbal. A `git remote add` parancs pontosan ezt teszi. Írd be a következő parancsot:
+
+   > Megjegyzés: mielőtt beírod a parancsot, menj a GitHub tárhelyed oldalára, hogy megtaláld a tárhely URL-jét. Ezt fogod használni az alábbi parancsban. Cseréld ki ```https://github.com/username/repository_name.git```-et a GitHub URL-edre.
+
+   ```bash
+   git remote add origin https://github.com/username/repository_name.git
+   ```
+
+   Ez létrehoz egy _távoli kapcsolatot_, amelyet "origin"-nek neveznek, és amely a korábban létrehozott GitHub tárhelyre mutat.
+
+1. **Helyi fájlok küldése a GitHubra**. Eddig létrehoztál egy _kapcsolatot_ a helyi tárhely és a GitHub tárhely között. Küldjük el ezeket a fájlokat a GitHubra a következő `git push` paranccsal:
+
+   > Megjegyzés: az alapértelmezett branch neve eltérhet ```main```-től.
+
+   ```bash
+   git push -u origin main
+   ```
+
+   Ez elküldi a commitjaidat a "main" branchben a GitHubra.
+
+2. **További változtatások hozzáadása**. Ha folytatni szeretnéd a változtatások végrehajtását és azok GitHubra való feltöltését, csak a következő három parancsot kell használnod:
+
+   ```bash
+   git add .
+   git commit -m "type your commit message here"
+   git push
+   ```
+
+   > Tipp: Érdemes lehet egy `.gitignore` fájlt is alkalmazni, hogy megakadályozd, hogy olyan fájlok, amelyeket nem akarsz nyomon követni, megjelenjenek a GitHubon – például az a jegyzetfájl, amelyet ugyanabban a mappában tárolsz, de nincs helye egy nyilvános tárhelyen. `.gitignore` fájl sablonokat találhatsz itt: [.gitignore templates](https://github.com/github/gitignore).
+
+#### Commit üzenetek
+
+Egy nagyszerű Git commit tárgy sor a következő mondatot fejezi be:
+Ha alkalmazzuk, ez a commit <ide jön a tárgy sorod>
+
+A tárgy sorban használj felszólító, jelen idejű formát: "változtat" nem "változtatott" vagy "változtatások".  
+Ahogy a tárgy sorban, a törzsben (opcionális) is használj felszólító, jelen idejű formát. A törzsnek tartalmaznia kell a változtatás motivációját, és ezt össze kell hasonlítani a korábbi viselkedéssel. A `miértet` magyarázod, nem a `hogyan-t`.
+
+✅ Szánj néhány percet arra, hogy böngéssz a GitHubon. Találsz egy igazán nagyszerű commit üzenetet? Találsz egy igazán minimálisat? Szerinted milyen információk a legfontosabbak és leghasznosabbak egy commit üzenetben?
+
+### Feladat: Együttműködés
+
+A fő ok, amiért a dolgokat a GitHubra helyeztük, az volt, hogy lehetővé tegyük a közös munkát más fejlesztőkkel.
+
+## Közös munka másokkal
+
+> Nézd meg a videót
+>
+> [![Git és GitHub alapok videó](https://img.youtube.com/vi/bFCM-PC3cu8/0.jpg)](https://www.youtube.com/watch?v=bFCM-PC3cu8)
+
+A tárhelyeden navigálj az `Insights > Community` menüponthoz, hogy megnézd, hogyan viszonyul a projekted az ajánlott közösségi szabványokhoz.
+
+   Íme néhány dolog, ami javíthatja a GitHub tárhelyedet:
+   - **Leírás**. Adtál leírást a projektedhez?
+   - **README**. Készítettél README-t? A GitHub útmutatást nyújt a [README írásához](https://docs.github.com/articles/about-readmes/?WT.mc_id=academic-77807-sagibbon).
+   - **Hozzájárulási irányelvek**. Van a projektednek [hozzájárulási irányelve](https://docs.github.com/articles/setting-guidelines-for-repository-contributors/?WT.mc_id=academic-77807-sagibbon)?
+   - **Magatartási kódex**. Van [magatartási kódex](https://docs.github.com/articles/adding-a-code-of-conduct-to-your-project/)?
+   - **Licenc**. Talán a legfontosabb, van [licenc](https://docs.github.com/articles/adding-a-license-to-a-repository/)?
+
+Ezek az erőforrások elősegítik az új csapattagok beilleszkedését. Ezek általában azok a dolgok, amelyeket az új hozzájárulók megnéznek, mielőtt egyáltalán megnéznék a kódodat, hogy eldöntsék, a projekted megfelelő hely-e számukra, hogy időt töltsenek vele.
+
+✅ A README fájlok, bár időt igényelnek az elkészítésük, gyakran elhanyagoltak az elfoglalt karbantartók által. Találsz példát egy különösen leíró jellegű README-re? Megjegyzés: vannak [eszközök, amelyek segítenek jó README-ket készíteni](https://www.makeareadme.com/), amelyeket érdemes kipróbálni.
+
+### Feladat: Kód összevonása
+
+A hozzájárulási dokumentumok segítenek az embereknek hozzájárulni a projekthez. Elmagyarázzák, milyen típusú hozzájárulásokat keresel, és hogyan működik a folyamat. A hozzájárulóknak egy sor lépést kell követniük, hogy hozzájárulhassanak a GitHub tárhelyedhez:
+
+1. **Tárhelyed fork-olása**. Valószínűleg azt szeretnéd, hogy az emberek _forkolják_ a projektedet. A forkolás azt jelenti, hogy létrehoznak egy másolatot a tárhelyedről a GitHub profiljukon.
+1. **Klónozás**. Innen klónozzák a projektet a helyi gépükre.
+1. **Branch létrehozása**. Azt szeretnéd, hogy hozzanak létre egy _branch-et_ a munkájukhoz.
+1. **Változtatásuk egy területre koncentrálása**. Kérd meg a hozzájárulókat, hogy koncentrálják a hozzájárulásaikat egy dologra egyszerre – így nagyobb az esélye annak, hogy _össze tudod vonni_ a munkájukat. Képzeld el, hogy írnak egy hibajavítást, hozzáadnak egy új funkciót, és frissítenek több tesztet – mi van, ha csak 2-ből 3-at, vagy 1-ből 3 változtatást tudsz vagy akarsz megvalósítani?
+
+✅ Képzelj el egy helyzetet, ahol a branch-ek különösen kritikusak a jó kód írásához és szállításához. Milyen felhasználási esetek jutnak eszedbe?
+
+> Megjegyzés: légy te magad a változás, amit látni szeretnél a világban, és hozz létre branch-eket a saját munkádhoz is. Bármilyen commitot készítesz, az azon a branch-en lesz, amelyen éppen "ki vagy jelentkezve". Használd a `git status` parancsot, hogy lásd, melyik branch az.
+
+Nézzük meg egy hozzájáruló munkafolyamatát. Tegyük fel, hogy a hozzájáruló már _forkolta_ és _klónozta_ a tárhelyet, így van egy Git tárhelye, amely készen áll a munkára a helyi gépén:
+
+1. **Branch létrehozása**. Használd a `git branch` parancsot egy branch létrehozásához, amely tartalmazza a változtatásokat, amelyeket hozzájárulni szeretne:
+
+   ```bash
+   git branch [branch-name]
+   ```
+
+1. **Váltás a munkabranch-re**. Válts az adott branch-re, és frissítsd a munkakönyvtárat a `git switch` paranccsal:
+
+   ```bash
+   git switch [branch-name]
+   ```
+
+1. **Munka elvégzése**. Ezen a ponton hozzáadhatod a változtatásaidat. Ne felejtsd el tájékoztatni a Git-et a következő parancsokkal:
+
+   ```bash
+   git add .
+   git commit -m "my changes"
+   ```
+
+   Ügyelj arra, hogy jó nevet adj a commitodnak, a saját érdekedben, valamint annak a tárhely karbantartójának érdekében, akinek segítesz.
+
+1. **Munkád összevonása a `main` branch-csel**. Egy ponton befejezed a munkát, és össze akarod vonni a munkádat a `main` branch-csel. A `main` branch közben változhatott, ezért győződj meg róla, hogy először frissíted a legújabb verzióra a következő parancsokkal:
+
+   ```bash
+   git switch main
+   git pull
+   ```
+
+   Ezen a ponton győződj meg arról, hogy minden _konfliktus_, olyan helyzetek, ahol a Git nem tudja könnyen _összevonni_ a változtatásokat, a munkabranch-edben történik. Ezért futtasd a következő parancsokat:
+
+   ```bash
+   git switch [branch_name]
+   git merge main
+   ```
+
+   Ez behozza az összes változtatást a `main` branch-ből a branch-edbe, és remélhetőleg folytathatod. Ha nem, a VS Code megmutatja, hol van a Git _zavarban_, és csak módosítanod kell az érintett fájlokat, hogy megmondhasd, melyik tartalom a legpontosabb.
+
+1. **Munkád küldése a GitHubra**. A munkád GitHubra küldése két dolgot jelent. A branch-ed feltöltése a tárhelyedre, majd egy PR (Pull Request) megnyitása.
+
+   ```bash
+   git push --set-upstream origin [branch-name]
+   ```
+
+   A fenti parancs létrehozza a branch-et a forkolt tárhelyeden.
+
+1. **PR meg
+Győződj meg róla, hogy a GitHub oldalán a forkolt repóhoz tartozó távoli ágat eltávolítod, miután feltöltötted rá a változtatásaidat.
+
+A `Pull request` kifejezés elsőre furcsának tűnhet, hiszen valójában a változtatásaidat szeretnéd "feltolni" a projekthez. Azonban a karbantartónak (a projekt tulajdonosának) vagy a fő csapatnak el kell bírálnia a változtatásaidat, mielőtt azokat egyesítenék a projekt "main" ágával, így valójában egy döntést kérsz a karbantartótól a változtatásaidról.
+
+A pull request egy hely, ahol összehasonlíthatod és megvitathatod az ágon végzett változtatásokat véleményekkel, megjegyzésekkel, integrált tesztekkel és egyebekkel. Egy jó pull request nagyjából ugyanazokat a szabályokat követi, mint egy commit üzenet. Hivatkozhatsz egy problémára az issue trackerben, például ha a munkád megold egy problémát. Ezt úgy teheted meg, hogy a `#` jelet követően beírod a probléma számát, például `#97`.
+
+🤞Reméljük, hogy minden ellenőrzés sikeresen lefut, és a projekt tulajdonosa(i) egyesítik a változtatásaidat a projekttel🤞
+
+Frissítsd a helyi munkafiókodat az összes új commit-tal, amely a megfelelő távoli ágon található a GitHubon:
+
+`git pull`
+
+## Hogyan járulj hozzá nyílt forráskódú projektekhez
+
+Először is, keress egy olyan GitHub repót (**repo**), amely érdekel, és amelyhez szeretnél hozzájárulni. A tartalmát le kell másolnod a gépedre.
+
+✅ Egy jó módszer kezdőbarát repók keresésére, ha [a 'good-first-issue' címkére keresel](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/).
+
+![Egy repo helyi másolása](../../../../translated_images/clone_repo.5085c48d666ead57664f050d806e325d7f883be6838c821e08bc823ab7c66665.hu.png)
+
+Számos módja van a kód másolásának. Az egyik módja a repó tartalmának "klónozása" HTTPS, SSH vagy a GitHub CLI (Command Line Interface) használatával.
+
+Nyisd meg a terminált, és klónozd a repót az alábbi módon:
+`git clone https://github.com/ProjectURL`
+
+A projekten való munkához válts a megfelelő mappára:
+`cd ProjectURL`
+
+A teljes projektet megnyithatod a [Codespaces](https://github.com/features/codespaces) segítségével, amely a GitHub beépített kódszerkesztője / felhőalapú fejlesztési környezete, vagy a [GitHub Desktop](https://desktop.github.com/) használatával.
+
+Végül letöltheted a kódot egy tömörített mappában is.
+
+### Néhány további érdekesség a GitHubról
+
+Bármely nyilvános repót a GitHubon "csillagozhatsz", "figyelhetsz" vagy "forkolhatsz". A csillagozott repóidat a jobb felső legördülő menüben találod meg. Ez olyan, mint a könyvjelzőzés, csak kódokhoz.
+
+A projekteknek van egy issue trackere, amely többnyire a GitHubon az "Issues" fül alatt található, hacsak máshol nincs feltüntetve. Itt az emberek a projekttel kapcsolatos problémákat vitatják meg. A Pull Requests fülön pedig az éppen folyamatban lévő változtatásokat vitatják meg és vizsgálják felül.
+
+A projekteknek lehetnek fórumai, levelezőlistái vagy csevegőcsatornái, például Slack, Discord vagy IRC.
+
+✅ Nézz körül az új GitHub repódban, és próbálj ki néhány dolgot, például a beállítások szerkesztését, információk hozzáadását a repóhoz, vagy egy projekt létrehozását (például egy Kanban táblát). Rengeteg mindent kipróbálhatsz!
+
+---
+
+## 🚀 Kihívás
+
+Dolgozz együtt egy barátoddal egymás kódján. Hozzatok létre egy közös projektet, forkoljatok kódot, hozzatok létre ágakat, és egyesítsétek a változtatásokat.
+
+## Utólagos kvíz
+[Utólagos kvíz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/4)
+
+## Áttekintés és önálló tanulás
+
+Olvass többet a [nyílt forráskódú szoftverekhez való hozzájárulásról](https://opensource.guide/how-to-contribute/#how-to-submit-a-contribution).
+
+[Git puskázó](https://training.github.com/downloads/github-git-cheat-sheet/).
+
+Gyakorolj, gyakorolj, gyakorolj. A GitHub remek tanulási útvonalakat kínál a [skills.github.com](https://skills.github.com) oldalon:
+
+- [Első hét a GitHubon](https://skills.github.com/#first-week-on-github)
+
+Itt haladóbb kurzusokat is találsz.
+
+## Feladat
+
+Teljesítsd az [Első hét a GitHubon kurzust](https://skills.github.com/#first-week-on-github).
+
+---
+
+**Felelősség kizárása**:  
+Ez a dokumentum az AI fordítási szolgáltatás [Co-op Translator](https://github.com/Azure/co-op-translator) segítségével lett lefordítva. Bár törekszünk a pontosságra, kérjük, vegye figyelembe, hogy az automatikus fordítások hibákat vagy pontatlanságokat tartalmazhatnak. Az eredeti dokumentum az eredeti nyelvén tekintendő hiteles forrásnak. Kritikus információk esetén javasolt professzionális emberi fordítást igénybe venni. Nem vállalunk felelősséget semmilyen félreértésért vagy téves értelmezésért, amely a fordítás használatából eredhet.
\ No newline at end of file
diff --git a/translations/hu/1-getting-started-lessons/3-accessibility/README.md b/translations/hu/1-getting-started-lessons/3-accessibility/README.md
new file mode 100644
index 00000000..d530c861
--- /dev/null
+++ b/translations/hu/1-getting-started-lessons/3-accessibility/README.md
@@ -0,0 +1,173 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "e4cd5b1faed4adab5acf720f82798003",
+  "translation_date": "2025-08-28T04:33:39+00:00",
+  "source_file": "1-getting-started-lessons/3-accessibility/README.md",
+  "language_code": "hu"
+}
+-->
+# Hozzáférhető weboldalak létrehozása
+
+![Minden az akadálymentességről](../../../../translated_images/webdev101-a11y.8ef3025c858d897a403a1a42c0897c76e11b724d9a8a0c0578dd4316f7507622.hu.png)
+> Sketchnote készítette: [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Előadás előtti kvíz
+[Előadás előtti kvíz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/5)
+
+> Az internet ereje az egyetemességében rejlik. Az akadálymentes hozzáférés mindenki számára, a fogyatékosságtól függetlenül, alapvető fontosságú.
+>
+> \- Sir Timothy Berners-Lee, a W3C igazgatója és a világháló feltalálója
+
+Ez az idézet tökéletesen rávilágít arra, hogy miért fontos akadálymentes weboldalakat készíteni. Egy alkalmazás, amely nem érhető el mindenki számára, definíció szerint kirekesztő. Webfejlesztőként mindig szem előtt kell tartanunk az akadálymentességet. Ha már a kezdetektől erre összpontosítunk, jó úton járunk afelé, hogy mindenki számára elérhetővé tegyük az általunk készített oldalakat. Ebben a leckében megismerheted azokat az eszközöket, amelyek segítenek az akadálymentesség biztosításában, és megtanulhatod, hogyan építsd be ezt a szemléletet a munkádba.
+
+> Ezt a leckét elérheted a [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/accessibility/?WT.mc_id=academic-77807-sagibbon) oldalán!
+
+## Használható eszközök
+
+### Képernyőolvasók
+
+Az egyik legismertebb akadálymentességi eszköz a képernyőolvasó.
+
+A [képernyőolvasók](https://en.wikipedia.org/wiki/Screen_reader) olyan kliensek, amelyeket leggyakrabban látássérültek használnak. Ahogyan időt szánunk arra, hogy a böngésző megfelelően közvetítse az általunk megosztani kívánt információkat, úgy arra is figyelnünk kell, hogy a képernyőolvasó is helyesen tegye ezt.
+
+A legegyszerűbb formájában a képernyőolvasó felülről lefelé, hallhatóan olvassa fel az oldalt. Ha az oldal csak szövegből áll, az olvasó hasonló módon közvetíti az információkat, mint egy böngésző. Természetesen a weboldalak ritkán állnak csupán szövegből; tartalmazhatnak linkeket, grafikákat, színeket és más vizuális elemeket. Gondoskodni kell arról, hogy ezeket az információkat a képernyőolvasó helyesen olvassa fel.
+
+Minden webfejlesztőnek érdemes megismerkednie egy képernyőolvasóval. Ahogyan ismered a böngészők működését, úgy a képernyőolvasók működését is meg kell tanulnod. Szerencsére a legtöbb operációs rendszerbe beépítve található képernyőolvasó.
+
+Néhány böngészőben beépített eszközök és bővítmények is találhatók, amelyek képesek szöveget felolvasni, vagy alapvető navigációs funkciókat biztosítani, például [ezek az Edge böngésző akadálymentességi eszközei](https://support.microsoft.com/help/4000734/microsoft-edge-accessibility-features). Ezek szintén fontos akadálymentességi eszközök, de működésük jelentősen eltér a képernyőolvasóktól, és nem szabad őket képernyőolvasó-tesztelő eszközökkel összetéveszteni.
+
+✅ Próbálj ki egy képernyőolvasót és egy böngésző szövegfelolvasót. Windows rendszeren a [Narrátor](https://support.microsoft.com/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c172f109bdb1/?WT.mc_id=academic-77807-sagibbon) alapértelmezetten elérhető, de telepíthető a [JAWS](https://webaim.org/articles/jaws/) és az [NVDA](https://www.nvaccess.org/about-nvda/) is. macOS-en és iOS-en a [VoiceOver](https://support.apple.com/guide/voiceover/welcome/10) alapértelmezetten elérhető.
+
+### Nagyítás
+
+A látássérültek által gyakran használt másik eszköz a nagyítás. A legegyszerűbb típus a statikus nagyítás, amelyet a `Control + plusz jel (+)` billentyűkombinációval vagy a képernyőfelbontás csökkentésével lehet vezérelni. Ez a nagyítás az egész oldalt átméretezi, ezért fontos a [reszponzív dizájn](https://developer.mozilla.org/docs/Learn/CSS/CSS_layout/Responsive_Design) alkalmazása, hogy a felhasználói élmény nagyított nézetben is megfelelő legyen.
+
+Egy másik típusú nagyítás speciális szoftvereket használ, amelyek a képernyő egy adott területét nagyítják fel, és pásztáznak, hasonlóan egy valódi nagyítóhoz. Windows rendszeren a [Nagyító](https://support.microsoft.com/windows/use-magnifier-to-make-things-on-the-screen-easier-to-see-414948ba-8b1c-d3bd-8615-0e5e32204198) beépített eszköz, míg a [ZoomText](https://www.freedomscientific.com/training/zoomtext/getting-started/) egy harmadik féltől származó nagyítószoftver, amely több funkcióval és nagyobb felhasználói bázissal rendelkezik. macOS-en és iOS-en a beépített nagyítószoftver neve [Zoom](https://www.apple.com/accessibility/mac/vision/).
+
+### Kontrasztellenőrzők
+
+A weboldalak színeit gondosan kell megválasztani, hogy megfeleljenek a színtévesztők vagy a gyenge kontrasztú színeket nehezen látók igényeinek.
+
+✅ Tesztelj egy általad kedvelt weboldalt a színek használatára egy böngészőbővítménnyel, például a [WCAG színellenőrzőjével](https://microsoftedge.microsoft.com/addons/detail/wcag-color-contrast-check/idahaggnlnekelhgplklhfpchbfdmkjp?hl=en-US&WT.mc_id=academic-77807-sagibbon). Mit tanultál?
+
+### Lighthouse
+
+A böngésződ fejlesztői eszközei között megtalálod a Lighthouse eszközt. Ez az eszköz fontos, hogy első ránézésre felmérd egy weboldal akadálymentességét (és más elemzéseket is végez). Bár nem szabad kizárólag a Lighthouse-ra hagyatkozni, egy 100%-os eredmény jó kiindulópont.
+
+✅ Keresd meg a Lighthouse-t a böngésződ fejlesztői eszközei között, és futtass elemzést bármelyik weboldalon. Mit fedeztél fel?
+
+## Akadálymentes tervezés
+
+Az akadálymentesség viszonylag nagy téma. Segítségképpen számos forrás áll rendelkezésre.
+
+- [Accessible U - University of Minnesota](https://accessibility.umn.edu/your-role/web-developers)
+
+Bár nem tudunk minden aspektust lefedni az akadálymentes oldalak létrehozásával kapcsolatban, az alábbiakban néhány alapvető elvet ismertetünk, amelyeket érdemes megvalósítani. Egy akadálymentes oldal megtervezése a kezdetektől **mindig** könnyebb, mint egy meglévő oldal utólagos akadálymentesítése.
+
+## Jó megjelenítési elvek
+
+### Színhelyes paletták
+
+Az emberek különböző módon látják a világot, beleértve a színeket is. Amikor színsémát választasz az oldaladhoz, győződj meg róla, hogy az mindenki számára hozzáférhető. Egy nagyszerű [eszköz színpaletták generálásához a Color Safe](http://colorsafe.co/).
+
+✅ Azonosíts egy weboldalt, amely nagyon problémás a színek használatában. Miért?
+
+### Használj megfelelő HTML-t
+
+A CSS és a JavaScript segítségével bármelyik elem bármilyen vezérlőelemmé alakítható. Egy `<span>` lehet egy `<button>`, és egy `<b>` válhat hiperhivatkozássá. Bár ez egyszerűbbé teheti a stílusozást, semmit sem közvetít a képernyőolvasók számára. Használj megfelelő HTML-t, amikor vezérlőelemeket hozol létre egy oldalon. Ha hiperhivatkozást szeretnél, használj `<a>` elemet. A megfelelő HTML használata a megfelelő vezérlőhöz a szemantikus HTML alkalmazásának nevezik.
+
+✅ Látogass el bármelyik weboldalra, és nézd meg, hogy a tervezők és fejlesztők megfelelően használják-e a HTML-t. Találsz olyan gombot, amelynek linknek kellene lennie? Tipp: kattints jobb gombbal, és válaszd a 'Forrás megtekintése' lehetőséget a böngésződben, hogy megnézd az alapul szolgáló kódot.
+
+### Készíts leíró címsorhierarchiát
+
+A képernyőolvasó felhasználók [nagyban támaszkodnak a címsorokra](https://webaim.org/projects/screenreadersurvey8/#finding), hogy információkat találjanak és navigáljanak egy oldalon. A leíró címsortartalom írása és a szemantikus címsorcímkék használata fontos az egyszerűen navigálható oldalak létrehozásához a képernyőolvasó felhasználók számára.
+
+### Használj jó vizuális jeleket
+
+A CSS teljes irányítást biztosít az oldal bármely elemének megjelenése felett. Létrehozhatsz szövegdobozokat körvonal nélkül, vagy hiperhivatkozásokat aláhúzás nélkül. Sajnos ezeknek a jeleknek az eltávolítása megnehezítheti azok felismerését azok számára, akik ezekre támaszkodnak.
+
+## A link szövegének fontossága
+
+A hiperhivatkozások alapvető fontosságúak az interneten való navigációhoz. Ezért biztosítani kell, hogy a képernyőolvasók megfelelően olvassák fel a linkeket, hogy minden felhasználó navigálhasson az oldaladon.
+
+### Képernyőolvasók és linkek
+
+Ahogy várható, a képernyőolvasók ugyanúgy olvassák a link szövegét, mint az oldal bármely más szövegét. Ezt szem előtt tartva az alábbi példák elfogadhatónak tűnhetnek.
+
+> A kis pingvin, más néven tündérpingvin, a világ legkisebb pingvinje. [Kattints ide](https://en.wikipedia.org/wiki/Little_penguin) további információkért.
+
+> A kis pingvin, más néven tündérpingvin, a világ legkisebb pingvinje. Látogasd meg a https://en.wikipedia.org/wiki/Little_penguin oldalt további információkért.
+
+> **MEGJEGYZÉS** Ahogy hamarosan olvasni fogod, **soha** ne hozz létre linkeket, amelyek úgy néznek ki, mint a fenti példák.
+
+Ne feledd, hogy a képernyőolvasók más interfészek, mint a böngészők, és más funkciókkal rendelkeznek.
+
+### A probléma az URL használatával
+
+A képernyőolvasók felolvassák a szöveget. Ha egy URL megjelenik a szövegben, a képernyőolvasó felolvassa az URL-t. Általában az URL nem közvetít értelmes információt, és zavaró lehet. Talán már tapasztaltad ezt, ha a telefonod valaha hangosan felolvasott egy URL-t tartalmazó szöveges üzenetet.
+
+### A probléma a "kattints ide" használatával
+
+A képernyőolvasók képesek csak a hiperhivatkozásokat felolvasni egy oldalon, hasonlóan ahhoz, ahogy egy látó ember átfutja az oldalt linkek után kutatva. Ha a link szövege mindig "kattints ide", a felhasználó csak annyit hall, hogy "kattints ide, kattints ide, kattints ide, kattints ide, kattints ide, ...". Az összes link megkülönböztethetetlenné válik egymástól.
+
+### Jó link szöveg
+
+A jó link szöveg röviden leírja, hogy mi található a link másik oldalán. Az előző példában, amely a kis pingvinekről szól, a link a faj Wikipedia-oldalára mutat. A *kis pingvinek* kifejezés tökéletes link szöveg lenne, mivel egyértelművé teszi, hogy mit tudhat meg valaki, ha rákattint a linkre - a kis pingvinekről.
+
+> A [kis pingvin](https://en.wikipedia.org/wiki/Little_penguin), más néven tündérpingvin, a világ legkisebb pingvinje.
+
+✅ Böngéssz az interneten néhány percig, hogy találj oldalakat, amelyek homályos linkelési stratégiákat használnak. Hasonlítsd össze őket más, jobban linkelt oldalakkal. Mit tanultál?
+
+#### Keresőmotorok megjegyzései
+
+Az akadálymentesség biztosításával nemcsak a felhasználóknak segítesz, hanem a keresőmotoroknak is, hogy könnyebben navigáljanak az oldaladon. A keresőmotorok a link szövegét használják az oldalak témáinak megértéséhez. Tehát a jó link szöveg mindenki számára előnyös!
+
+### ARIA
+
+Képzeld el a következő oldalt:
+
+| Termék       | Leírás            | Rendelés      |
+| ------------ | ----------------- | ------------- |
+| Widget       | [Leírás](../../../../1-getting-started-lessons/3-accessibility/')     | [Rendelés](../../../../1-getting-started-lessons/3-accessibility/') |
+| Szuper widget | [Leírás](../../../../1-getting-started-lessons/3-accessibility/')     | [Rendelés](../../../../1-getting-started-lessons/3-accessibility/') |
+
+Ebben a példában a leírás és rendelés szöveg ismétlése érthető egy böngészőt használó számára. Azonban egy képernyőolvasót használó személy csak a *leírás* és *rendelés* szavakat hallaná ismétlődve, kontextus nélkül.
+
+Az ilyen helyzetek támogatására a HTML támogat egy attribútumkészletet, amelyet [Accessible Rich Internet Applications (ARIA)](https://developer.mozilla.org/docs/Web/Accessibility/ARIA) néven ismerünk. Ezek az attribútumok lehetővé teszik, hogy további információkat adj meg a képernyőolvasók számára.
+
+> **MEGJEGYZÉS**: Mint sok más HTML-funkció esetében, a böngésző- és képernyőolvasó-támogatás változhat. Azonban a legtöbb főbb kliens támogatja az ARIA attribútumokat.
+
+Az `aria-label` segítségével leírhatod a linket, ha az oldal formátuma nem teszi lehetővé. A widget leírása például így állítható be:
+
+``` html
+<a href="#" aria-label="Widget description">description</a>
+```
+
+✅ Általánosságban elmondható, hogy a fent leírt szemantikus jelölés használata előnyt élvez az ARIA használatával szemben, de néha nincs szemantikus megfelelője bizonyos HTML-widgeteknek. Jó példa erre egy fa (tree). Nincs HTML-egyenérték egy fához, ezért az ilyen elemeket egy általános `<div>`-ként azonosítod a megfelelő szerepkörrel és ARIA-értékekkel. Az [MDN ARIA dokumentációja](https://developer.mozilla.org/docs/Web/Accessibility/ARIA) további hasznos információkat tartalmaz.
+
+```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>
+```
+
+## Képek
+
+Magától értetődik, hogy a képernyőolvasók nem tudják automatikusan elolvasni, mi van egy képen. A képek akadálymentessé tétele nem igényel sok munkát - erre való az `alt` attribútum. Minden jelentőséggel bíró képnek rendelkeznie kell egy `alt` attribútummal, amely leírja, hogy mi van rajta. 
+A pusztán dekoratív képek `alt` attribútumát üres karakterláncra kell állítani: `alt=""`. Ez megakadályozza, hogy a képernyőolvasók feleslegesen bejelentsék a dekoratív képet.
+
+✅ Ahogy várható, a keresőmotorok sem képesek megérteni, mi van
+Számos kormány rendelkezik törvényekkel az akadálymentességi követelményekről. Tájékozódj saját országod akadálymentességi törvényeiről. Mi tartozik ezek hatálya alá, és mi nem? Például [ez a kormányzati weboldal](https://accessibility.blog.gov.uk/).
+
+## Feladat
+ 
+[Elemezz egy nem akadálymentesített weboldalt](assignment.md)
+
+Köszönet: [Turtle Ipsum](https://github.com/Instrument/semantic-html-sample) az Instrumenttől
+
+---
+
+**Felelősség kizárása**:  
+Ez a dokumentum az AI fordítási szolgáltatás [Co-op Translator](https://github.com/Azure/co-op-translator) segítségével lett lefordítva. Bár törekszünk a pontosságra, kérjük, vegye figyelembe, hogy az automatikus fordítások hibákat vagy pontatlanságokat tartalmazhatnak. Az eredeti dokumentum az eredeti nyelvén tekintendő hiteles forrásnak. Kritikus információk esetén javasolt professzionális emberi fordítást igénybe venni. Nem vállalunk felelősséget az ebből a fordításból eredő félreértésekért vagy téves értelmezésekért.
\ No newline at end of file
diff --git a/translations/hu/1-getting-started-lessons/3-accessibility/assignment.md b/translations/hu/1-getting-started-lessons/3-accessibility/assignment.md
new file mode 100644
index 00000000..ff06f2b8
--- /dev/null
+++ b/translations/hu/1-getting-started-lessons/3-accessibility/assignment.md
@@ -0,0 +1,28 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "a258597a194e77d4fd469b3cd976b29e",
+  "translation_date": "2025-08-28T04:36:37+00:00",
+  "source_file": "1-getting-started-lessons/3-accessibility/assignment.md",
+  "language_code": "hu"
+}
+-->
+# Elemezzen egy hozzáférhetetlen weboldalt
+
+## Útmutató
+
+Azonosítson egy weboldalt, amelyről úgy gondolja, hogy NEM hozzáférhető, és készítsen egy cselekvési tervet annak hozzáférhetőségének javítására. Az első feladata az lesz, hogy azonosítsa ezt az oldalt, részletezze, hogy milyen módon gondolja, hogy nem hozzáférhető, anélkül hogy elemző eszközöket használna, majd végezzen rajta egy Lighthouse elemzést. Rögzítse az elemzés eredményeit pdf formátumban, és készítsen egy részletes tervet, amely legalább tíz pontot tartalmaz arról, hogyan lehetne az oldalt javítani.
+
+## Táblázat a weboldal hozzáférhetőségének teszteléséhez
+
+| Kritérium | Kiváló | Megfelelő | Javításra szorul |
+|-----------|--------|-----------|------------------|
+|           | a szükségesek <10%-a hiányzik | a szükségesek 20%-a hiányzik | a szükségesek 50%-a hiányzik |
+
+----
+Hallgatói Jelentés: tartalmazza a bekezdéseket arról, hogy az oldal mennyire hozzáférhetetlen, a Lighthouse jelentést pdf formátumban, egy tíz pontból álló listát a javítási javaslatokkal, részletezve, hogyan lehetne javítani
+
+---
+
+**Felelősségkizárás**:  
+Ez a dokumentum az [Co-op Translator](https://github.com/Azure/co-op-translator) AI fordítási szolgáltatás segítségével készült. Bár törekszünk a pontosságra, kérjük, vegye figyelembe, hogy az automatikus fordítások hibákat vagy pontatlanságokat tartalmazhatnak. Az eredeti dokumentum az eredeti nyelvén tekintendő hiteles forrásnak. Kritikus információk esetén javasolt a professzionális, emberi fordítás igénybevétele. Nem vállalunk felelősséget a fordítás használatából eredő félreértésekért vagy téves értelmezésekért.
\ No newline at end of file
diff --git a/translations/hu/1-getting-started-lessons/README.md b/translations/hu/1-getting-started-lessons/README.md
new file mode 100644
index 00000000..67666778
--- /dev/null
+++ b/translations/hu/1-getting-started-lessons/README.md
@@ -0,0 +1,31 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "04683f4cfa46004179b0404b89a3065c",
+  "translation_date": "2025-08-28T04:29:03+00:00",
+  "source_file": "1-getting-started-lessons/README.md",
+  "language_code": "hu"
+}
+-->
+# Webfejlesztés alapjai
+
+Ebben a tananyagban olyan, nem projektalapú fogalmakat ismerhetsz meg, amelyek elengedhetetlenek ahhoz, hogy profi fejlesztővé válj.
+
+### Témák
+
+1. [Bevezetés a programozási nyelvekbe és eszközökbe](1-intro-to-programming-languages/README.md)
+2. [Bevezetés a GitHub használatába](2-github-basics/README.md)
+3. [Az akadálymentesség alapjai](3-accessibility/README.md)
+
+### Köszönetnyilvánítás
+
+A "Bevezetés a programozási nyelvekbe és eszközökbe" fejezetet ♥️-val írta [Jasmine Greenaway](https://twitter.com/paladique)
+
+A "Bevezetés a GitHub használatába" fejezetet ♥️-val írta [Floor Drees](https://twitter.com/floordrees)
+
+Az "Az akadálymentesség alapjai" fejezetet ♥️-val írta [Christopher Harrison](https://twitter.com/geektrainer)
+
+---
+
+**Felelősségkizárás**:  
+Ez a dokumentum az [Co-op Translator](https://github.com/Azure/co-op-translator) AI fordítási szolgáltatás segítségével készült. Bár törekszünk a pontosságra, kérjük, vegye figyelembe, hogy az automatikus fordítások hibákat vagy pontatlanságokat tartalmazhatnak. Az eredeti dokumentum az eredeti nyelvén tekintendő hiteles forrásnak. Kritikus információk esetén javasolt a professzionális, emberi fordítás igénybevétele. Nem vállalunk felelősséget a fordítás használatából eredő félreértésekért vagy téves értelmezésekért.
\ No newline at end of file
diff --git a/translations/hu/2-js-basics/1-data-types/README.md b/translations/hu/2-js-basics/1-data-types/README.md
new file mode 100644
index 00000000..7cfc36c1
--- /dev/null
+++ b/translations/hu/2-js-basics/1-data-types/README.md
@@ -0,0 +1,215 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "fc6aef8ecfdd5b0ad2afa6e6ba52bfde",
+  "translation_date": "2025-08-28T04:08:13+00:00",
+  "source_file": "2-js-basics/1-data-types/README.md",
+  "language_code": "hu"
+}
+-->
+# JavaScript Alapok: Adattípusok
+
+![JavaScript Alapok - Adattípusok](../../../../translated_images/webdev101-js-datatypes.4cc470179730702c756480d3ffa46507f746e5975ebf80f99fdaaf1cff09a7f4.hu.png)
+> Sketchnote készítette: [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Előadás előtti kvíz
+[Előadás előtti kvíz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/7)
+
+Ez a lecke a JavaScript alapjait tárgyalja, amely a webes interaktivitást biztosítja.
+
+> Ezt a leckét elérheted a [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-variables/?WT.mc_id=academic-77807-sagibbon) oldalon!
+
+[![Változók](https://img.youtube.com/vi/JNIXfGiDWM8/0.jpg)](https://youtube.com/watch?v=JNIXfGiDWM8 "Változók JavaScriptben")
+
+[![Adattípusok JavaScriptben](https://img.youtube.com/vi/AWfA95eLdq8/0.jpg)](https://youtube.com/watch?v=AWfA95eLdq8 "Adattípusok JavaScriptben")
+
+> 🎥 Kattints a fenti képekre a változókról és adattípusokról szóló videókért!
+
+Kezdjük a változókkal és az őket kitöltő adattípusokkal!
+
+## Változók
+
+A változók értékeket tárolnak, amelyeket a kódodban felhasználhatsz és módosíthatsz.
+
+Egy változó létrehozása és **deklarálása** a következő szintaxist követi: **[kulcsszó] [név]**. Ez két részből áll:
+
+- **Kulcsszó**. A kulcsszavak lehetnek `let` vagy `var`.  
+
+✅ A `let` kulcsszót az ES6 vezette be, és úgynevezett _blokkszkópot_ ad a változónak. Ajánlott a `let` használata a `var` helyett. A blokkszkópokat részletesebben a későbbi részekben tárgyaljuk.
+- **A változó neve**, amelyet te választasz meg.
+
+### Feladat - változókkal való munka
+
+1. **Deklarálj egy változót**. Deklaráljunk egy változót a `let` kulcsszóval:
+
+    ```javascript
+    let myVariable;
+    ```
+
+   A `myVariable` most már deklarálva van a `let` kulcsszóval. Jelenleg nincs értéke.
+
+1. **Érték hozzárendelése**. Tárolj egy értéket egy változóban az `=` operátorral, amelyet az elvárt érték követ.
+
+    ```javascript
+    myVariable = 123;
+    ```
+
+   > Megjegyzés: az `=` használata ebben a leckében azt jelenti, hogy egy "hozzárendelési operátort" használunk, amelyet egy változó értékének beállítására használunk. Nem jelenti az egyenlőséget.
+
+   A `myVariable` most már *inicializálva* van a 123 értékkel.
+
+1. **Refaktorálás**. Cseréld le a kódodat a következő utasításra.
+
+    ```javascript
+    let myVariable = 123;
+    ```
+
+    A fentieket _explicit inicializálásnak_ nevezzük, amikor egy változót deklarálnak és egyidejűleg értéket rendelnek hozzá.
+
+1. **Változó értékének módosítása**. Módosítsd a változó értékét a következő módon:
+
+   ```javascript
+   myVariable = 321;
+   ```
+
+   Miután egy változót deklaráltál, bármikor módosíthatod az értékét a kódodban az `=` operátorral és az új értékkel.
+
+   ✅ Próbáld ki! Írhatsz JavaScriptet közvetlenül a böngésződben. Nyiss meg egy böngészőablakot, és navigálj a Fejlesztői Eszközökhöz. A konzolban találsz egy promptot; írd be: `let myVariable = 123`, nyomj Entert, majd írd be: `myVariable`. Mi történik? Megjegyzés: ezekről a fogalmakról többet tanulsz a következő leckékben.
+
+## Konstansok
+
+Egy konstans deklarálása és inicializálása ugyanazokat az elveket követi, mint egy változóé, azzal a kivétellel, hogy a `const` kulcsszót használjuk. A konstansokat általában nagybetűkkel deklarálják.
+
+```javascript
+const MY_VARIABLE = 123;
+```
+
+A konstansok hasonlóak a változókhoz, két kivétellel:
+
+- **Kell, hogy legyen értékük**. A konstansokat inicializálni kell, különben hiba lép fel a kód futtatásakor.
+- **A hivatkozás nem módosítható**. A konstans hivatkozása nem módosítható az inicializálás után, különben hiba lép fel a kód futtatásakor. Nézzünk két példát:
+   - **Egyszerű érték**. A következő NEM megengedett:
+   
+      ```javascript
+      const PI = 3;
+      PI = 4; // not allowed
+      ```
+ 
+   - **Objektum hivatkozása védett**. A következő NEM megengedett.
+   
+      ```javascript
+      const obj = { a: 3 };
+      obj = { b: 5 } // not allowed
+      ```
+
+    - **Objektum értéke nincs védve**. A következő MEGENGEDETT:
+    
+      ```javascript
+      const obj = { a: 3 };
+      obj.a = 5;  // allowed
+      ```
+
+      A fenti példában az objektum értékét módosítod, de nem magát a hivatkozást, ami megengedett.
+
+   > Megjegyzés: a `const` azt jelenti, hogy a hivatkozás védett az újrahozzárendeléstől. Az érték azonban nem _változtathatatlan_, és módosítható, különösen, ha összetett szerkezetről, például objektumról van szó.
+
+## Adattípusok
+
+A változók különböző típusú értékeket tárolhatnak, például számokat és szövegeket. Ezeket a különböző értéktípusokat **adattípusoknak** nevezzük. Az adattípusok fontos szerepet játszanak a szoftverfejlesztésben, mivel segítenek a fejlesztőknek döntéseket hozni arról, hogyan kell megírni a kódot és hogyan kell működnie a szoftvernek. Ezenkívül néhány adattípusnak egyedi tulajdonságai vannak, amelyek segítenek átalakítani vagy további információkat kinyerni egy értékből.
+
+✅ Az adattípusokat JavaScript adatprimitíveknek is nevezik, mivel ezek a legalacsonyabb szintű adattípusok, amelyeket a nyelv biztosít. 7 primitív adattípus létezik: string, number, bigint, boolean, undefined, null és symbol. Szánj egy percet arra, hogy elképzeld, mit képviselhetnek ezek a primitívek. Mi az a `zebra`? Mi a helyzet a `0`-val? `true`?
+
+### Számok
+
+Az előző szakaszban a `myVariable` értéke egy szám adattípus volt.
+
+`let myVariable = 123;`
+
+A változók mindenféle számot tárolhatnak, beleértve a tizedeseket vagy negatív számokat. A számok aritmetikai operátorokkal is használhatók, amelyeket a [következő szakaszban](../../../../2-js-basics/1-data-types) tárgyalunk.
+
+### Aritmetikai operátorok
+
+Számos operátor létezik aritmetikai műveletek végrehajtására, és néhányat itt felsorolunk:
+
+| Szimbólum | Leírás                                                                  | Példa                           |
+| --------- | ---------------------------------------------------------------------- | ------------------------------- |
+| `+`       | **Összeadás**: Két szám összegét számítja ki                          | `1 + 2 //elvárt válasz: 3`      |
+| `-`       | **Kivonás**: Két szám különbségét számítja ki                         | `1 - 2 //elvárt válasz: -1`     |
+| `*`       | **Szorzás**: Két szám szorzatát számítja ki                           | `1 * 2 //elvárt válasz: 2`      |
+| `/`       | **Osztás**: Két szám hányadosát számítja ki                           | `1 / 2 //elvárt válasz: 0.5`    |
+| `%`       | **Maradék**: Két szám osztásából származó maradékot számítja ki       | `1 % 2 //elvárt válasz: 1`      |
+
+✅ Próbáld ki! Próbálj ki egy aritmetikai műveletet a böngésződ konzoljában. Meglepnek az eredmények?
+
+### Szövegek
+
+A szövegek karakterek halmazai, amelyek egyes vagy dupla idézőjelek között helyezkednek el.
+
+- `'Ez egy szöveg'`
+- `"Ez is egy szöveg"`
+- `let myString = 'Ez egy szövegérték, amelyet egy változóban tárolunk';`
+
+Ne felejtsd el idézőjeleket használni, amikor szöveget írsz, különben a JavaScript azt feltételezi, hogy változónév.
+
+### Szövegek formázása
+
+A szövegek szövegesek, és időnként formázásra szorulnak.
+
+Két vagy több szöveg **összefűzéséhez**, vagyis összekapcsolásához használd a `+` operátort.
+
+```javascript
+let myString1 = "Hello";
+let myString2 = "World";
+
+myString1 + myString2 + "!"; //HelloWorld!
+myString1 + " " + myString2 + "!"; //Hello World!
+myString1 + ", " + myString2 + "!"; //Hello, World!
+
+```
+
+✅ Miért van az, hogy JavaScriptben `1 + 1 = 2`, de `'1' + '1' = 11`? Gondolkodj el rajta. Mi a helyzet `'1' + 1`-gyel?
+
+**Template literálok** egy másik módja a szövegek formázásának, kivéve, hogy idézőjelek helyett backtick-et használunk. Minden, ami nem egyszerű szöveg, helyőrzőkbe `${ }` kell kerüljön. Ez magában foglalja azokat a változókat is, amelyek szövegek lehetnek.
+
+```javascript
+let myString1 = "Hello";
+let myString2 = "World";
+
+`${myString1} ${myString2}!` //Hello World!
+`${myString1}, ${myString2}!` //Hello, World!
+```
+
+A formázási céljaidat bármelyik módszerrel elérheted, de a template literálok tiszteletben tartják a szóközöket és a sortöréseket.
+
+✅ Mikor használnál template literált egy egyszerű szöveg helyett?
+
+### Booleans
+
+A Booleans csak két értéket vehet fel: `true` vagy `false`. A Booleans segíthet eldönteni, hogy mely kódsorok fussanak, amikor bizonyos feltételek teljesülnek. Sok esetben az [operátorok](../../../../2-js-basics/1-data-types) segítenek a Boolean értékének beállításában, és gyakran észreveszed, hogy változókat inicializálnak vagy értéküket operátorral frissítik.
+
+- `let myTrueBool = true`
+- `let myFalseBool = false`
+
+✅ Egy változó "igaznak" tekinthető, ha Boolean `true`-ra értékelődik. Érdekes módon JavaScriptben [minden érték igaznak tekinthető, kivéve, ha hamisnak van definiálva](https://developer.mozilla.org/docs/Glossary/Truthy).
+
+---
+
+## 🚀 Kihívás
+
+A JavaScript hírhedt a meglepő módjairól, ahogyan néha kezeli az adattípusokat. Kutass egy kicsit ezekről a "csapdákról". Például: az érzékenység a kis- és nagybetűkre problémát okozhat! Próbáld ki ezt a konzolban: `let age = 1; let Age = 2; age == Age` (eredmény: `false` -- miért?). Milyen más csapdákat találsz?
+
+## Előadás utáni kvíz
+[Előadás utáni kvíz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/8)
+
+## Áttekintés és önálló tanulás
+
+Nézd meg [ezt a JavaScript gyakorlatok listát](https://css-tricks.com/snippets/javascript/), és próbálj ki egyet. Mit tanultál?
+
+## Feladat
+
+[Adattípusok gyakorlása](assignment.md)
+
+---
+
+**Felelősség kizárása**:  
+Ez a dokumentum az AI fordítási szolgáltatás, a [Co-op Translator](https://github.com/Azure/co-op-translator) segítségével lett lefordítva. Bár törekszünk a pontosságra, kérjük, vegye figyelembe, hogy az automatikus fordítások hibákat vagy pontatlanságokat tartalmazhatnak. Az eredeti dokumentum az eredeti nyelvén tekintendő hiteles forrásnak. Kritikus információk esetén javasolt professzionális emberi fordítást igénybe venni. Nem vállalunk felelősséget semmilyen félreértésért vagy téves értelmezésért, amely a fordítás használatából eredhet.
\ No newline at end of file
diff --git a/translations/hu/2-js-basics/1-data-types/assignment.md b/translations/hu/2-js-basics/1-data-types/assignment.md
new file mode 100644
index 00000000..0288c7ea
--- /dev/null
+++ b/translations/hu/2-js-basics/1-data-types/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "3869244ceda606c4969d8cdd82679867",
+  "translation_date": "2025-08-28T04:09:31+00:00",
+  "source_file": "2-js-basics/1-data-types/assignment.md",
+  "language_code": "hu"
+}
+-->
+# Adattípusok gyakorlása
+
+## Útmutató
+
+Képzeld el, hogy egy bevásárlókosarat építesz. Írj néhány dokumentációt azokról az adattípusokról, amelyekre szükséged lenne a vásárlási élmény megvalósításához. Hogyan jutottál el a választásaidhoz?
+
+## Értékelési szempontok
+
+Kritériumok | Kiváló | Megfelelő | Fejlesztésre szorul
+--- | --- | --- | --- |
+||A hat adattípus fel van sorolva és részletesen bemutatva, dokumentálva azok használatát|Négy adattípus van bemutatva|Két adattípus van bemutatva|
+
+---
+
+**Felelősség kizárása**:  
+Ez a dokumentum az AI fordítási szolgáltatás [Co-op Translator](https://github.com/Azure/co-op-translator) segítségével lett lefordítva. Bár törekszünk a pontosságra, kérjük, vegye figyelembe, hogy az automatikus fordítások hibákat vagy pontatlanságokat tartalmazhatnak. Az eredeti dokumentum az eredeti nyelvén tekintendő hiteles forrásnak. Kritikus információk esetén javasolt professzionális emberi fordítást igénybe venni. Nem vállalunk felelősséget semmilyen félreértésért vagy téves értelmezésért, amely a fordítás használatából eredhet.
\ No newline at end of file
diff --git a/translations/hu/2-js-basics/2-functions-methods/README.md b/translations/hu/2-js-basics/2-functions-methods/README.md
new file mode 100644
index 00000000..77ea1a48
--- /dev/null
+++ b/translations/hu/2-js-basics/2-functions-methods/README.md
@@ -0,0 +1,210 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "b4612bbb9ace984f374fcc80e3e035ad",
+  "translation_date": "2025-08-28T04:04:39+00:00",
+  "source_file": "2-js-basics/2-functions-methods/README.md",
+  "language_code": "hu"
+}
+-->
+# JavaScript alapok: Metódusok és függvények
+
+![JavaScript alapok - Függvények](../../../../translated_images/webdev101-js-functions.be049c4726e94f8b7605c36330ac42eeb5cd8ed02bcdd60fdac778174d6cb865.hu.png)
+> Sketchnote készítette: [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Előadás előtti kvíz
+[Előadás előtti kvíz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/9)
+
+Amikor kódot írunk, mindig arra törekszünk, hogy az olvasható legyen. Bár ez elsőre ellentmondásosnak tűnhet, a kódot sokkal többször olvassák, mint írják. Az egyik alapvető eszköz a fejlesztők számára az olvasható és karbantartható kód biztosításához a **függvény**.
+
+[![Metódusok és függvények](https://img.youtube.com/vi/XgKsD6Zwvlc/0.jpg)](https://youtube.com/watch?v=XgKsD6Zwvlc "Metódusok és függvények")
+
+> 🎥 Kattints a fenti képre a metódusokról és függvényekről szóló videóért.
+
+> Ezt a leckét elérheted a [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-functions/?WT.mc_id=academic-77807-sagibbon) oldalán!
+
+## Függvények
+
+A függvény alapvetően egy kódrészlet, amelyet igény szerint végrehajthatunk. Ez tökéletes olyan helyzetekben, amikor ugyanazt a feladatot többször kell elvégezni; ahelyett, hogy a logikát több helyen megismételnénk (ami nehézkessé tenné a frissítést), egy helyre központosíthatjuk, és akkor hívhatjuk meg, amikor szükség van rá – sőt, függvényeket más függvényekből is meghívhatunk!
+
+Ugyanilyen fontos a függvény elnevezése. Bár ez triviálisnak tűnhet, a név gyors módot biztosít a kód egy részének dokumentálására. Ezt úgy is elképzelhetjük, mint egy gomb címkéjét. Ha rákattintok egy "Időzítő törlése" feliratú gombra, tudom, hogy az megállítja az órát.
+
+## Függvény létrehozása és meghívása
+
+A függvény szintaxisa a következőképpen néz ki:
+
+```javascript
+function nameOfFunction() { // function definition
+ // function definition/body
+}
+```
+
+Ha szeretnék létrehozni egy függvényt, amely üdvözlő szöveget jelenít meg, az így nézhet ki:
+
+```javascript
+function displayGreeting() {
+  console.log('Hello, world!');
+}
+```
+
+Amikor meg akarjuk hívni (vagy aktiválni) a függvényt, a függvény nevét követjük `()`-kal. Érdemes megjegyezni, hogy a függvényt definiálhatjuk azelőtt vagy azután, hogy meghívnánk; a JavaScript fordító megtalálja nekünk.
+
+```javascript
+// calling our function
+displayGreeting();
+```
+
+> **NOTE:** Létezik egy speciális típusú függvény, amelyet **metódusnak** nevezünk, és amit már használtál is! Valójában láttuk ezt a fenti példában, amikor a `console.log`-ot használtuk. A metódus abban különbözik a függvénytől, hogy egy objektumhoz van csatolva (például a `console`-hoz), míg a függvény szabadon lebeg. Sok fejlesztő ezeket a kifejezéseket felcserélve használja.
+
+### Függvények legjobb gyakorlatai
+
+Néhány jó tanács, amit érdemes szem előtt tartani függvények létrehozásakor:
+
+- Mindig használj beszédes neveket, hogy tudd, mit csinál a függvény
+- Használj **camelCase**-t a szavak összekapcsolásához
+- Tartsd a függvényeket egy adott feladatra fókuszálva
+
+## Információ átadása függvényeknek
+
+Ahhoz, hogy egy függvény rugalmasabb legyen, gyakran szeretnénk információt átadni neki. Ha a fenti `displayGreeting` példát nézzük, az csak **Hello, world!**-ot jelenít meg. Ez nem a leghasznosabb függvény, amit létrehozhatunk. Ha egy kicsit rugalmasabbá szeretnénk tenni, például lehetővé tenni, hogy megadjuk az üdvözlendő személy nevét, hozzáadhatunk egy **paramétert**. A paraméter (néha **argumentumnak** is nevezik) egy kiegészítő információ, amelyet a függvénynek küldünk.
+
+A paramétereket a definícióban zárójelek között soroljuk fel, vesszővel elválasztva, például így:
+
+```javascript
+function name(param, param2, param3) {
+
+}
+```
+
+Frissíthetjük a `displayGreeting` függvényt, hogy elfogadjon egy nevet, és azt jelenítse meg.
+
+```javascript
+function displayGreeting(name) {
+  const message = `Hello, ${name}!`;
+  console.log(message);
+}
+```
+
+Amikor meg akarjuk hívni a függvényt, és átadni a paramétert, azt a zárójelekben adjuk meg.
+
+```javascript
+displayGreeting('Christopher');
+// displays "Hello, Christopher!" when run
+```
+
+## Alapértelmezett értékek
+
+Még rugalmasabbá tehetjük a függvényt, ha több paramétert adunk hozzá. De mi van akkor, ha nem akarjuk, hogy minden értéket kötelezően meg kelljen adni? Az üdvözlő példánál maradva, a nevet kötelezővé tehetjük (hiszen tudnunk kell, kit üdvözlünk), de az üdvözlés szövegét opcionálissá tehetjük. Ha valaki nem akarja testre szabni, alapértelmezett értéket adunk meg. Az alapértelmezett értéket úgy állítjuk be, mint egy változó értékét - `parameterName = 'defaultValue'`. Egy teljes példa:
+
+```javascript
+function displayGreeting(name, salutation='Hello') {
+  console.log(`${salutation}, ${name}`);
+}
+```
+
+Amikor meghívjuk a függvényt, eldönthetjük, hogy megadunk-e értéket a `salutation` paraméternek.
+
+```javascript
+displayGreeting('Christopher');
+// displays "Hello, Christopher"
+
+displayGreeting('Christopher', 'Hi');
+// displays "Hi, Christopher"
+```
+
+## Visszatérési értékek
+
+Eddig a függvényünk mindig a [konzolra](https://developer.mozilla.org/docs/Web/API/console) írt ki. Néha ez pontosan az, amit keresünk, különösen akkor, amikor olyan függvényeket hozunk létre, amelyek más szolgáltatásokat hívnak meg. De mi van akkor, ha egy segédfüggvényt szeretnék létrehozni, amely egy számítást végez, és visszaadja az értéket, hogy máshol felhasználhassam?
+
+Ezt úgy érhetjük el, hogy **visszatérési értéket** használunk. A visszatérési értéket a függvény adja vissza, és ugyanúgy tárolhatjuk egy változóban, mint egy szöveget vagy számot.
+
+Ha egy függvény visszaad valamit, akkor a `return` kulcsszót használjuk. A `return` kulcsszó egy értéket vagy hivatkozást vár, amit visszaadunk, például így:
+
+```javascript
+return myVariable;
+```  
+
+Létrehozhatunk egy függvényt, amely üdvözlő üzenetet készít, és visszaadja az értéket a hívónak.
+
+```javascript
+function createGreetingMessage(name) {
+  const message = `Hello, ${name}`;
+  return message;
+}
+```
+
+Amikor meghívjuk ezt a függvényt, az értéket egy változóban tároljuk. Ez ugyanaz, mint amikor egy változót statikus értékre állítunk (például `const name = 'Christopher'`).
+
+```javascript
+const greetingMessage = createGreetingMessage('Christopher');
+```
+
+## Függvények függvények paramétereként
+
+Ahogy haladsz a programozói pályádon, találkozni fogsz olyan függvényekkel, amelyek más függvényeket fogadnak paraméterként. Ez a trükk gyakran akkor hasznos, amikor nem tudjuk, mikor fog valami megtörténni vagy befejeződni, de tudjuk, hogy egy műveletet végre kell hajtanunk válaszként.
+
+Például a [setTimeout](https://developer.mozilla.org/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout), amely elindít egy időzítőt, és kódot hajt végre, amikor az lejár. Meg kell mondanunk neki, milyen kódot akarunk végrehajtani. Ez tökéletes feladat egy függvény számára!
+
+Ha futtatod az alábbi kódot, 3 másodperc múlva megjelenik az üzenet: **3 másodperc eltelt**.
+
+```javascript
+function displayDone() {
+  console.log('3 seconds has elapsed');
+}
+// timer value is in milliseconds
+setTimeout(displayDone, 3000);
+```
+
+### Névtelen függvények
+
+Nézzük meg újra, amit építettünk. Létrehozunk egy függvényt névvel, amelyet csak egyszer fogunk használni. Ahogy az alkalmazásunk bonyolultabbá válik, láthatjuk, hogy sok olyan függvényt hozunk létre, amelyet csak egyszer hívunk meg. Ez nem ideális. Mint kiderül, nem mindig kell nevet adnunk!
+
+Amikor egy függvényt paraméterként adunk át, elkerülhetjük, hogy előre létrehozzuk, és helyette a paraméter részeként építhetjük meg. Ugyanazt a `function` kulcsszót használjuk, de a paraméter részeként építjük meg.
+
+Írjuk át a fenti kódot névtelen függvény használatára:
+
+```javascript
+setTimeout(function() {
+  console.log('3 seconds has elapsed');
+}, 3000);
+```
+
+Ha futtatod az új kódot, ugyanazt az eredményt kapod. Létrehoztunk egy függvényt, de nem kellett nevet adnunk neki!
+
+### Fat arrow függvények
+
+Sok programozási nyelvben (beleértve a JavaScriptet is) gyakori rövidítés az úgynevezett **arrow** vagy **fat arrow** függvények használata. Ez egy speciális `=>` jelölést használ, amely egy nyílra hasonlít – innen a név! Az `=>` használatával kihagyhatjuk a `function` kulcsszót.
+
+Írjuk át a kódot még egyszer, hogy fat arrow függvényt használjunk:
+
+```javascript
+setTimeout(() => {
+  console.log('3 seconds has elapsed');
+}, 3000);
+```
+
+### Mikor melyik stratégiát használjuk?
+
+Most láttad, hogy három módja van annak, hogy függvényt adjunk át paraméterként, és talán azon gondolkodsz, mikor melyiket használjuk. Ha tudod, hogy a függvényt többször fogod használni, hozd létre normál módon. Ha csak egy helyen fogod használni, általában a névtelen függvény a legjobb választás. Hogy fat arrow függvényt vagy a hagyományos `function` szintaxist használod, az rajtad múlik, de észre fogod venni, hogy a modern fejlesztők többsége az `=>`-t részesíti előnyben.
+
+---
+
+## 🚀 Kihívás
+
+Meg tudod fogalmazni egy mondatban a különbséget a függvények és a metódusok között? Próbáld meg!
+
+## Előadás utáni kvíz
+[Előadás utáni kvíz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/10)
+
+## Áttekintés és önálló tanulás
+
+Érdemes [további információkat olvasni a fat arrow függvényekről](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions), mivel egyre gyakrabban használják őket a kódokban. Gyakorold egy függvény írását, majd írd át ezt a szintaxist használva.
+
+## Feladat
+
+[Szórakozás a függvényekkel](assignment.md)
+
+---
+
+**Felelősség kizárása**:  
+Ez a dokumentum az AI fordítási szolgáltatás [Co-op Translator](https://github.com/Azure/co-op-translator) segítségével lett lefordítva. Bár törekszünk a pontosságra, kérjük, vegye figyelembe, hogy az automatikus fordítások hibákat vagy pontatlanságokat tartalmazhatnak. Az eredeti dokumentum az eredeti nyelvén tekintendő hiteles forrásnak. Kritikus információk esetén javasolt professzionális emberi fordítást igénybe venni. Nem vállalunk felelősséget semmilyen félreértésért vagy téves értelmezésért, amely a fordítás használatából eredhet.
\ No newline at end of file
diff --git a/translations/hu/2-js-basics/2-functions-methods/assignment.md b/translations/hu/2-js-basics/2-functions-methods/assignment.md
new file mode 100644
index 00000000..28529ccd
--- /dev/null
+++ b/translations/hu/2-js-basics/2-functions-methods/assignment.md
@@ -0,0 +1,27 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "8973f96157680a13e9446e4bb540ee57",
+  "translation_date": "2025-08-28T04:05:56+00:00",
+  "source_file": "2-js-basics/2-functions-methods/assignment.md",
+  "language_code": "hu"
+}
+-->
+# Játék a függvényekkel
+
+## Útmutató
+
+Hozz létre különböző függvényeket, beleértve azokat is, amelyek visszaadnak valamit, és azokat is, amelyek nem adnak vissza semmit.
+
+Próbálj meg olyan függvényt készíteni, amely vegyesen tartalmaz paramétereket és alapértelmezett értékű paramétereket.
+
+## Értékelési szempontok
+
+| Kritérium | Kiemelkedő                                                                              | Megfelelő                                                         | Fejlesztésre szorul |
+| --------- | --------------------------------------------------------------------------------------- | ----------------------------------------------------------------- | ------------------- |
+|           | A megoldás két vagy több jól működő, változatos paraméterekkel rendelkező függvényt kínál | A megoldás egy működő függvényt és néhány paramétert tartalmaz    | A megoldás hibás   |
+
+---
+
+**Felelősség kizárása**:  
+Ez a dokumentum az AI fordítási szolgáltatás [Co-op Translator](https://github.com/Azure/co-op-translator) segítségével lett lefordítva. Bár törekszünk a pontosságra, kérjük, vegye figyelembe, hogy az automatikus fordítások hibákat vagy pontatlanságokat tartalmazhatnak. Az eredeti dokumentum az eredeti nyelvén tekintendő hiteles forrásnak. Fontos információk esetén javasolt professzionális emberi fordítást igénybe venni. Nem vállalunk felelősséget semmilyen félreértésért vagy téves értelmezésért, amely a fordítás használatából eredhet.
\ No newline at end of file
diff --git a/translations/hu/2-js-basics/3-making-decisions/README.md b/translations/hu/2-js-basics/3-making-decisions/README.md
new file mode 100644
index 00000000..902b192e
--- /dev/null
+++ b/translations/hu/2-js-basics/3-making-decisions/README.md
@@ -0,0 +1,232 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "888609c48329c280ca2477d2df40f2e5",
+  "translation_date": "2025-08-28T04:06:33+00:00",
+  "source_file": "2-js-basics/3-making-decisions/README.md",
+  "language_code": "hu"
+}
+-->
+# JavaScript Alapok: Döntéshozatal
+
+![JavaScript Alapok - Döntéshozatal](../../../../translated_images/webdev101-js-decisions.69e1b20f272dd1f0b1cb2f8adaff3ed2a77c4f91db96d8a0594132a353fa189a.hu.png)
+
+> Sketchnote készítette: [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Előadás előtti kvíz
+
+[Előadás előtti kvíz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/11)
+
+A döntéshozatal és a kód futási sorrendjének irányítása újrahasznosíthatóvá és robusztussá teszi a kódot. Ez a rész bemutatja a JavaScript adatfolyamának irányításához szükséges szintaxist, valamint annak jelentőségét a Boolean adattípusokkal való használat során.
+
+[![Döntéshozatal](https://img.youtube.com/vi/SxTp8j-fMMY/0.jpg)](https://youtube.com/watch?v=SxTp8j-fMMY "Döntéshozatal")
+
+> 🎥 Kattints a fenti képre a döntéshozatalról szóló videóért.
+
+> Ezt a leckét elérheted a [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-if-else/?WT.mc_id=academic-77807-sagibbon) oldalon!
+
+## Rövid áttekintés a Booleans-ról
+
+A Booleans csak két értéket vehet fel: `true` vagy `false`. A Booleans segít eldönteni, hogy melyik kódsor fusson le, amikor bizonyos feltételek teljesülnek.
+
+Állítsd be a Boolean értékét `true` vagy `false` értékre így:
+
+`let myTrueBool = true`  
+`let myFalseBool = false`
+
+✅ A Booleans az angol matematikusról, filozófusról és logikusról, George Boole-ról (1815–1864) kapta a nevét.
+
+## Összehasonlító operátorok és Booleans
+
+Az operátorokat arra használjuk, hogy feltételeket értékeljünk ki, összehasonlításokat végezzünk, amelyek Boolean értéket hoznak létre. Az alábbiakban néhány gyakran használt operátor található.
+
+| Szimbólum | Leírás                                                                                                                                                     | Példa              |
+| --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ |
+| `<`       | **Kisebb mint**: Összehasonlít két értéket, és `true` Boolean adattípust ad vissza, ha a bal oldali érték kisebb, mint a jobb oldali                        | `5 < 6 // true`    |
+| `<=`      | **Kisebb vagy egyenlő**: Összehasonlít két értéket, és `true` Boolean adattípust ad vissza, ha a bal oldali érték kisebb vagy egyenlő, mint a jobb oldali   | `5 <= 6 // true`   |
+| `>`       | **Nagyobb mint**: Összehasonlít két értéket, és `true` Boolean adattípust ad vissza, ha a bal oldali érték nagyobb, mint a jobb oldali                      | `5 > 6 // false`   |
+| `>=`      | **Nagyobb vagy egyenlő**: Összehasonlít két értéket, és `true` Boolean adattípust ad vissza, ha a bal oldali érték nagyobb vagy egyenlő, mint a jobb oldali | `5 >= 6 // false`  |
+| `===`     | **Szigorú egyenlőség**: Összehasonlít két értéket, és `true` Boolean adattípust ad vissza, ha a jobb és bal oldali értékek egyenlők ÉS azonos adattípusúak  | `5 === 6 // false` |
+| `!==`     | **Egyenlőtlenség**: Összehasonlít két értéket, és az ellenkező Boolean értéket adja vissza, mint amit a szigorú egyenlőség operátor adna                     | `5 !== 6 // true`  |
+
+✅ Ellenőrizd a tudásodat úgy, hogy néhány összehasonlítást írsz a böngésződ konzoljába. Meglepett valamelyik visszaadott adat?
+
+## If utasítás
+
+Az if utasítás lefuttatja a kódot a blokkjai között, ha a feltétel igaz.
+
+```javascript
+if (condition) {
+  //Condition is true. Code in this block will run.
+}
+```
+
+Logikai operátorokat gyakran használnak a feltétel kialakításához.
+
+```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 utasítás
+
+Az `else` utasítás lefuttatja a kódot a blokkjai között, amikor a feltétel hamis. Ez opcionális az `if` utasítással.
+
+```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!");
+}
+```
+
+✅ Teszteld a kód megértését úgy, hogy futtatod a böngésző konzoljában. Változtasd meg a currentMoney és laptopPrice változók értékeit, hogy megváltoztasd a visszaadott `console.log()`-ot.
+
+## Switch utasítás
+
+A `switch` utasítást arra használjuk, hogy különböző feltételek alapján különböző műveleteket hajtsunk végre. Használd a `switch` utasítást, hogy kiválaszd, melyik kódblokkot kell végrehajtani.
+
+```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}`);
+```
+
+✅ Teszteld a kód megértését úgy, hogy futtatod a böngésző konzoljában. Változtasd meg az `a` változó értékét, hogy megváltoztasd a visszaadott `console.log()`-ot.
+
+## Logikai operátorok és Booleans
+
+A döntésekhez több összehasonlításra is szükség lehet, amelyeket logikai operátorokkal lehet összefűzni, hogy Boolean értéket kapjunk.
+
+| Szimbólum | Leírás                                                                                     | Példa                                                                 |
+| --------- | ------------------------------------------------------------------------------------------- | --------------------------------------------------------------------- |
+| `&&`      | **Logikai ÉS**: Összehasonlít két Boolean kifejezést. Csak akkor ad vissza true értéket, ha mindkét oldal igaz | `(5 > 6) && (5 < 6 ) //Az egyik oldal hamis, a másik igaz. Visszaad false-t` |
+| `\|\|`    | **Logikai VAGY**: Összehasonlít két Boolean kifejezést. Akkor ad vissza true értéket, ha legalább az egyik oldal igaz | `(5 > 6) \|\| (5 < 6) //Az egyik oldal hamis, a másik igaz. Visszaad true-t` |
+| `!`       | **Logikai NEM**: A Boolean kifejezés ellentétes értékét adja vissza                         | `!(5 > 6) // 5 nem nagyobb, mint 6, de a "!" visszaad true-t`         |
+
+## Feltételek és döntések logikai operátorokkal
+
+Logikai operátorokat használhatunk feltételek kialakítására if..else utasításokban.
+
+```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!");
+}
+```
+
+### Negációs operátor
+
+Eddig láthattad, hogyan használhatod az `if...else` utasítást feltételes logika létrehozására. Bármi, ami az `if`-be kerül, true/false értékre kell kiértékelődjön. A `!` operátor használatával _tagadhatod_ a kifejezést. Ez így néz ki:
+
+```javascript
+if (!condition) {
+  // runs if condition is false
+} else {
+  // runs if condition is true
+}
+```
+
+### Ternáris kifejezések
+
+Az `if...else` nem az egyetlen módja a döntési logika kifejezésének. Használhatsz úgynevezett ternáris operátort is. Ennek szintaxisa így néz ki:
+
+```javascript
+let variable = condition ? <return this if true> : <return this if false>
+```
+
+Az alábbiakban egy kézzelfoghatóbb példa látható:
+
+```javascript
+let firstNumber = 20;
+let secondNumber = 10;
+let biggestNumber = firstNumber > secondNumber ? firstNumber : secondNumber;
+```
+
+✅ Szánj egy percet arra, hogy többször elolvasd ezt a kódot. Érted, hogyan működnek ezek az operátorok?
+
+A fentiek azt mondják ki:
+
+- ha `firstNumber` nagyobb, mint `secondNumber`
+- akkor rendeld hozzá a `firstNumber`-t a `biggestNumber`-hez
+- különben rendeld hozzá a `secondNumber`-t.
+
+A ternáris kifejezés csak egy tömör módja annak, hogy az alábbi kódot megírjuk:
+
+```javascript
+let biggestNumber;
+if (firstNumber > secondNumber) {
+  biggestNumber = firstNumber;
+} else {
+  biggestNumber = secondNumber;
+}
+```
+
+---
+
+## 🚀 Kihívás
+
+Hozz létre egy programot, amelyet először logikai operátorokkal írsz meg, majd írd át ternáris kifejezéssel. Melyik szintaxist részesíted előnyben?
+
+---
+
+## Előadás utáni kvíz
+
+[Előadás utáni kvíz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/12)
+
+## Áttekintés és önálló tanulás
+
+Olvass többet a felhasználó számára elérhető számos operátorról [az MDN-en](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators).
+
+Nézd át Josh Comeau csodálatos [operátor keresőjét](https://joshwcomeau.com/operator-lookup/)!
+
+## Feladat
+
+[Operátorok](assignment.md)
+
+---
+
+**Felelősség kizárása**:  
+Ez a dokumentum az AI fordítási szolgáltatás, a [Co-op Translator](https://github.com/Azure/co-op-translator) segítségével lett lefordítva. Bár törekszünk a pontosságra, kérjük, vegye figyelembe, hogy az automatikus fordítások hibákat vagy pontatlanságokat tartalmazhatnak. Az eredeti dokumentum az eredeti nyelvén tekintendő hiteles forrásnak. Kritikus információk esetén javasolt professzionális emberi fordítást igénybe venni. Nem vállalunk felelősséget semmilyen félreértésért vagy téves értelmezésért, amely a fordítás használatából eredhet.
\ No newline at end of file
diff --git a/translations/hu/2-js-basics/3-making-decisions/assignment.md b/translations/hu/2-js-basics/3-making-decisions/assignment.md
new file mode 100644
index 00000000..6015197f
--- /dev/null
+++ b/translations/hu/2-js-basics/3-making-decisions/assignment.md
@@ -0,0 +1,54 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "bf62b82567e6f9bdf4abda9ae0ccb64a",
+  "translation_date": "2025-08-28T04:07:27+00:00",
+  "source_file": "2-js-basics/3-making-decisions/assignment.md",
+  "language_code": "hu"
+}
+-->
+# Operátorok
+
+## Útmutató
+
+Próbáld ki az operátorokat. Íme egy javaslat egy programra, amit megvalósíthatsz:
+
+Van egy halmaz diákokkal, akik két különböző osztályozási rendszerben szerepelnek.
+
+### Első osztályozási rendszer
+
+Az egyik osztályozási rendszerben az osztályzatok 1-5 között vannak, ahol 3 és annál magasabb osztályzat azt jelenti, hogy a diák teljesítette a kurzust.
+
+### Második osztályozási rendszer
+
+A másik osztályozási rendszerben a következő osztályzatok vannak: `A, A-, B, B-, C, C-`, ahol az `A` a legjobb osztályzat, és a `C` a legalacsonyabb, ami még megfelel.
+
+### Feladat
+
+Az alábbi `allStudents` tömböt kapva, amely az összes diákot és azok osztályzatait tartalmazza, készíts egy új tömböt `studentsWhoPass` néven, amely csak azokat a diákokat tartalmazza, akik megfeleltek.
+
+> TIP, használj for-ciklust, if...else-t és összehasonlító operátorokat:
+
+```javascript
+let allStudents = [
+  'A',
+  'B-',
+  1,
+  4,
+  5,
+  2
+]
+
+let studentsWhoPass = [];
+```
+
+## Értékelési szempontok
+
+| Kritérium | Kiemelkedő                     | Megfelelő                     | Fejlesztésre szorul             |
+| --------- | ------------------------------ | ----------------------------- | ------------------------------- |
+|           | Teljes megoldás bemutatva      | Részleges megoldás bemutatva  | Hibás megoldás bemutatva        |
+
+---
+
+**Felelősség kizárása**:  
+Ez a dokumentum az AI fordítási szolgáltatás, a [Co-op Translator](https://github.com/Azure/co-op-translator) segítségével lett lefordítva. Bár törekszünk a pontosságra, kérjük, vegye figyelembe, hogy az automatikus fordítások hibákat vagy pontatlanságokat tartalmazhatnak. Az eredeti dokumentum az eredeti nyelvén tekintendő hiteles forrásnak. Kritikus információk esetén javasolt professzionális, emberi fordítást igénybe venni. Nem vállalunk felelősséget semmilyen félreértésért vagy téves értelmezésért, amely a fordítás használatából eredhet.
\ No newline at end of file
diff --git a/translations/hu/2-js-basics/4-arrays-loops/README.md b/translations/hu/2-js-basics/4-arrays-loops/README.md
new file mode 100644
index 00000000..f727fe09
--- /dev/null
+++ b/translations/hu/2-js-basics/4-arrays-loops/README.md
@@ -0,0 +1,147 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "3f7f87871312cf6cc12662da7d973182",
+  "translation_date": "2025-08-28T04:10:06+00:00",
+  "source_file": "2-js-basics/4-arrays-loops/README.md",
+  "language_code": "hu"
+}
+-->
+# JavaScript Alapok: Tömbök és Ciklusok
+
+![JavaScript Alapok - Tömbök](../../../../translated_images/webdev101-js-arrays.439d7528b8a294558d0e4302e448d193f8ad7495cc407539cc81f1afe904b470.hu.png)
+> Sketchnote készítette: [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Előadás előtti kvíz
+[Előadás előtti kvíz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/13)
+
+Ez a lecke a JavaScript alapjait tárgyalja, amely a weben az interaktivitást biztosítja. Ebben a leckében megtanulod a tömbök és ciklusok használatát, amelyek az adatok kezelésére szolgálnak.
+
+[![Tömbök](https://img.youtube.com/vi/1U4qTyq02Xw/0.jpg)](https://youtube.com/watch?v=1U4qTyq02Xw "Tömbök")
+
+[![Ciklusok](https://img.youtube.com/vi/Eeh7pxtTZ3k/0.jpg)](https://www.youtube.com/watch?v=Eeh7pxtTZ3k "Ciklusok")
+
+> 🎥 Kattints a fenti képekre a tömbökről és ciklusokról szóló videókért.
+
+> Ezt a leckét elvégezheted a [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-arrays/?WT.mc_id=academic-77807-sagibbon) oldalán!
+
+## Tömbök
+
+Az adatokkal való munka minden programozási nyelvben gyakori feladat, és sokkal egyszerűbb, ha az adatok strukturált formátumban, például tömbökben vannak tárolva. A tömbök segítségével az adatok egy listához hasonló struktúrában tárolhatók. A tömbök egyik nagy előnye, hogy különböző típusú adatokat is tárolhatunk egy tömbben.
+
+✅ A tömbök mindenhol körülvesznek minket! Tudsz mondani egy valós példát egy tömbre, például egy napelem tömbre?
+
+A tömb szintaxisa egy pár szögletes zárójel.
+
+```javascript
+let myArray = [];
+```
+
+Ez egy üres tömb, de a tömbök már eleve adatokkal feltöltve is deklarálhatók. A tömbben lévő értékeket vesszővel választjuk el egymástól.
+
+```javascript
+let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
+```
+
+A tömb értékeihez egyedi érték, az úgynevezett **index** van hozzárendelve, amely egy egész szám, és a tömb elejétől való távolság alapján van meghatározva. A fenti példában a "Chocolate" sztring érték indexe 0, míg a "Rocky Road" indexe 4. Az indexet szögletes zárójelekkel használhatjuk az értékek lekérésére, módosítására vagy beszúrására.
+
+✅ Meglep, hogy a tömbök indexe nullával kezdődik? Néhány programozási nyelvben az indexek 1-től kezdődnek. Ennek érdekes története van, amelyről [itt olvashatsz a Wikipédián](https://en.wikipedia.org/wiki/Zero-based_numbering).
+
+```javascript
+let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
+iceCreamFlavors[2]; //"Vanilla"
+```
+
+Az indexet felhasználhatjuk egy érték módosítására, például így:
+
+```javascript
+iceCreamFlavors[4] = "Butter Pecan"; //Changed "Rocky Road" to "Butter Pecan"
+```
+
+És új értéket is beszúrhatunk egy adott indexre, például így:
+
+```javascript
+iceCreamFlavors[5] = "Cookie Dough"; //Added "Cookie Dough"
+```
+
+✅ Gyakoribb módja az értékek hozzáadásának egy tömbhöz az olyan tömb operátorok használata, mint az array.push()
+
+Ha meg szeretnéd tudni, hány elem van egy tömbben, használd a `length` tulajdonságot.
+
+```javascript
+let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
+iceCreamFlavors.length; //5
+```
+
+✅ Próbáld ki magad! Használd a böngésződ konzolját, hogy létrehozz és manipulálj egy saját tömböt.
+
+## Ciklusok
+
+A ciklusok lehetővé teszik, hogy ismétlődő vagy **iteratív** feladatokat hajtsunk végre, és rengeteg időt és kódot takaríthatunk meg velük. Minden iteráció változhat a változókban, értékekben és feltételekben. A JavaScriptben különböző típusú ciklusok léteznek, amelyek mindegyike apró eltérésekkel ugyanazt a célt szolgálja: adatokat iterálni.
+
+### For ciklus
+
+A `for` ciklusnak 3 részre van szüksége az iterációhoz:
+- `counter` Egy változó, amelyet általában egy számmal inicializálnak, és az iterációk számát számolja
+- `condition` Egy kifejezés, amely összehasonlító operátorokat használ, hogy a ciklus akkor álljon le, amikor `false` lesz
+- `iteration-expression` Minden iteráció végén fut, általában a számláló értékének megváltoztatására használják
+  
+```javascript
+// Counting up to 10
+for (let i = 0; i < 10; i++) {
+  console.log(i);
+}
+```
+
+✅ Futtasd ezt a kódot a böngésződ konzoljában. Mi történik, ha apró változtatásokat eszközölsz a számlálón, a feltételen vagy az iterációs kifejezésen? Tudsz visszafelé futtatni egy visszaszámlálást?
+
+### While ciklus
+
+A `for` ciklus szintaxisától eltérően a `while` ciklusoknak csak egy feltételre van szükségük, amely leállítja a ciklust, amikor a feltétel `false` lesz. A ciklusok feltételei általában más értékekre, például számlálókra támaszkodnak, és ezeket a ciklus során kezelni kell. A számlálók kezdőértékeit a cikluson kívül kell létrehozni, és minden kifejezést, amely megfelel egy feltételnek, beleértve a számláló módosítását, a cikluson belül kell fenntartani.
+
+```javascript
+//Counting up to 10
+let i = 0;
+while (i < 10) {
+ console.log(i);
+ i++;
+}
+```
+
+✅ Miért választanál for ciklust a while ciklus helyett? 17 ezer nézőnek volt ugyanez a kérdése a StackOverflow-n, és néhány vélemény [érdekes lehet számodra](https://stackoverflow.com/questions/39969145/while-loops-vs-for-loops-in-javascript).
+
+## Ciklusok és Tömbök
+
+A tömböket gyakran használják ciklusokkal, mert a legtöbb feltétel a tömb hosszát használja a ciklus leállításához, és az index lehet a számláló értéke is.
+
+```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
+```
+
+✅ Kísérletezz egy saját tömbbel, és iterálj rajta a böngésződ konzoljában.
+
+---
+
+## 🚀 Kihívás
+
+A tömbök iterálására más módszerek is léteznek a for és while ciklusokon kívül. Ilyenek például a [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), és [map](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/map). Írd át a tömb iterációdat ezek egyikének használatával.
+
+## Előadás utáni kvíz
+[Előadás utáni kvíz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/14)
+
+## Áttekintés és Önálló Tanulás
+
+A JavaScript tömbök számos hasznos metódust tartalmaznak az adatok manipulálására. [Olvass ezekről a metódusokról](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array), és próbálj ki néhányat (például push, pop, slice és splice) egy saját tömbön.
+
+## Feladat
+
+[Tömb iterálása](assignment.md)
+
+---
+
+**Felelősség kizárása**:  
+Ez a dokumentum az AI fordítási szolgáltatás [Co-op Translator](https://github.com/Azure/co-op-translator) segítségével lett lefordítva. Bár törekszünk a pontosságra, kérjük, vegye figyelembe, hogy az automatikus fordítások hibákat vagy pontatlanságokat tartalmazhatnak. Az eredeti dokumentum az eredeti nyelvén tekintendő hiteles forrásnak. Fontos információk esetén javasolt professzionális emberi fordítást igénybe venni. Nem vállalunk felelősséget semmilyen félreértésért vagy téves értelmezésért, amely a fordítás használatából eredhet.
\ No newline at end of file
diff --git a/translations/hu/2-js-basics/4-arrays-loops/assignment.md b/translations/hu/2-js-basics/4-arrays-loops/assignment.md
new file mode 100644
index 00000000..f1703056
--- /dev/null
+++ b/translations/hu/2-js-basics/4-arrays-loops/assignment.md
@@ -0,0 +1,27 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "8b2381170bd0fd2870f5889bb8620f02",
+  "translation_date": "2025-08-28T04:11:05+00:00",
+  "source_file": "2-js-basics/4-arrays-loops/assignment.md",
+  "language_code": "hu"
+}
+-->
+# Tömb bejárása
+
+## Utasítások
+
+Készíts egy programot, amely felsorolja az 1 és 20 közötti minden 3. számot, és kiírja a konzolra.
+
+> TIP: használj for-ciklust, és módosítsd az iterációs kifejezést
+
+## Értékelési szempontok
+
+| Kritérium | Kiváló                                 | Megfelelő                | Fejlesztésre szorul            |
+| --------- | -------------------------------------- | ------------------------ | ------------------------------ |
+|           | A program helyesen fut és kommentált   | A program nincs kommentálva | A program hiányos vagy hibás   |
+
+---
+
+**Felelősség kizárása**:  
+Ez a dokumentum az AI fordítási szolgáltatás [Co-op Translator](https://github.com/Azure/co-op-translator) segítségével lett lefordítva. Bár törekszünk a pontosságra, kérjük, vegye figyelembe, hogy az automatikus fordítások hibákat vagy pontatlanságokat tartalmazhatnak. Az eredeti dokumentum az eredeti nyelvén tekintendő hiteles forrásnak. Fontos információk esetén javasolt professzionális emberi fordítást igénybe venni. Nem vállalunk felelősséget semmilyen félreértésért vagy téves értelmezésért, amely a fordítás használatából eredhet.
\ No newline at end of file
diff --git a/translations/hu/2-js-basics/README.md b/translations/hu/2-js-basics/README.md
new file mode 100644
index 00000000..8c232dcd
--- /dev/null
+++ b/translations/hu/2-js-basics/README.md
@@ -0,0 +1,28 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "cc9e70a2f096c67389c8acff1521fc27",
+  "translation_date": "2025-08-28T04:03:56+00:00",
+  "source_file": "2-js-basics/README.md",
+  "language_code": "hu"
+}
+-->
+# Bevezetés a JavaScriptbe
+
+A JavaScript a web nyelve. Ebben a négy leckében megismerheted az alapjait.
+
+### Témakörök
+
+1. [Változók és adattípusok](1-data-types/README.md)  
+2. [Függvények és metódusok](2-functions-methods/README.md)  
+3. [Döntéshozatal JavaScriptben](3-making-decisions/README.md)  
+4. [Tömbök és ciklusok](4-arrays-loops/README.md)  
+
+### Köszönetnyilvánítás
+
+Ezeket a leckéket ♥️-vel írták: [Jasmine Greenaway](https://twitter.com/paladique), [Christopher Harrison](https://twitter.com/geektrainer) és [Chris Noring](https://twitter.com/chris_noring)
+
+---
+
+**Felelősség kizárása**:  
+Ez a dokumentum az AI fordítási szolgáltatás, a [Co-op Translator](https://github.com/Azure/co-op-translator) segítségével lett lefordítva. Bár törekszünk a pontosságra, kérjük, vegye figyelembe, hogy az automatikus fordítások hibákat vagy pontatlanságokat tartalmazhatnak. Az eredeti dokumentum az eredeti nyelvén tekintendő hiteles forrásnak. Kritikus információk esetén javasolt professzionális emberi fordítást igénybe venni. Nem vállalunk felelősséget semmilyen félreértésért vagy téves értelmezésért, amely a fordítás használatából eredhet.
\ No newline at end of file
diff --git a/translations/hu/3-terrarium/1-intro-to-html/README.md b/translations/hu/3-terrarium/1-intro-to-html/README.md
new file mode 100644
index 00000000..b7c60950
--- /dev/null
+++ b/translations/hu/3-terrarium/1-intro-to-html/README.md
@@ -0,0 +1,251 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "46a0639e719b9cf1dfd062aa24cad639",
+  "translation_date": "2025-08-28T04:13:52+00:00",
+  "source_file": "3-terrarium/1-intro-to-html/README.md",
+  "language_code": "hu"
+}
+-->
+# Terrárium Projekt 1. rész: Bevezetés a HTML-be
+
+![Bevezetés a HTML-be](../../../../translated_images/webdev101-html.4389c2067af68e98280c1bde52b6c6269f399eaae3659b7c846018d8a7b0bbd9.hu.png)
+> Sketchnote készítette: [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Előadás előtti kvíz
+
+[Előadás előtti kvíz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/15)
+
+
+> Nézd meg a videót
+
+> 
+> [![Git és GitHub alapok videó](https://img.youtube.com/vi/1TvxJKBzhyQ/0.jpg)](https://www.youtube.com/watch?v=1TvxJKBzhyQ)
+
+### Bevezetés
+
+A HTML, vagyis a HyperText Markup Language, a web 'csontváza'. Ha a CSS 'felöltözteti' a HTML-t, és a JavaScript életre kelti, akkor a HTML a webalkalmazás teste. A HTML szintaxisa is tükrözi ezt az elképzelést, mivel tartalmaz "head", "body" és "footer" tageket.
+
+Ebben a leckében a HTML segítségével fogjuk felépíteni a virtuális terráriumunk felületének 'csontvázát'. Lesz egy címe és három oszlopa: egy jobb és egy bal oszlop, ahol a húzható növények találhatók, valamint egy középső terület, amely maga az üvegszerű terrárium lesz. A lecke végére látni fogod a növényeket az oszlopokban, de a felület kissé furcsán fog kinézni; ne aggódj, a következő részben CSS stílusokat adunk hozzá, hogy jobban nézzen ki.
+
+### Feladat
+
+A számítógépeden hozz létre egy 'terrarium' nevű mappát, és azon belül egy 'index.html' nevű fájlt. Ezt megteheted a Visual Studio Code-ban, miután létrehoztad a terrarium mappát, egy új VS Code ablak megnyitásával, a 'mappa megnyitása' opcióra kattintva, és az új mappádra navigálva. Az Explorer panelen kattints a kis 'fájl' gombra, és hozd létre az új fájlt:
+
+![explorer a VS Code-ban](../../../../translated_images/vs-code-index.e2986cf919471eb984a0afef231380c8b132b000635105f2397bd2754d1b689c.hu.png)
+
+Vagy
+
+Használhatod ezeket a parancsokat a git bash-ben:
+* `mkdir terrarium`
+* `cd terrarium`
+* `touch index.html`
+* `code index.html` vagy `nano index.html`
+
+> Az index.html fájlok azt jelzik a böngészőnek, hogy ez az alapértelmezett fájl egy mappában; az olyan URL-ek, mint például `https://anysite.com/test`, egy olyan mappastruktúrából épülhetnek fel, amely tartalmaz egy `test` nevű mappát, benne egy `index.html` fájllal; az `index.html` nem feltétlenül jelenik meg az URL-ben.
+
+---
+
+## A DocType és a html tagek
+
+A HTML fájl első sora a doctype. Meglepő lehet, hogy ennek a sornak a fájl legfelső részén kell lennie, de ez azt jelzi a régebbi böngészőknek, hogy az oldal megjelenítését szabványos módban kell végezni, a jelenlegi HTML specifikáció szerint.
+
+> Tipp: a VS Code-ban az egérmutatót egy tag fölé helyezve információkat kaphatsz annak használatáról az MDN Reference útmutatók alapján.
+
+A második sornak a `<html>` tag nyitó tagjának kell lennie, amelyet most azonnal követ a záró tag `</html>`. Ezek a tagek az interfész gyökérelemei.
+
+### Feladat
+
+Add hozzá ezeket a sorokat az `index.html` fájlod tetejére:
+
+```HTML
+<!DOCTYPE html>
+<html></html>
+```
+
+✅ A DocType beállításával különböző módok határozhatók meg: [Quirks Mode és Standards Mode](https://developer.mozilla.org/docs/Web/HTML/Quirks_Mode_and_Standards_Mode). Ezek a módok nagyon régi böngészők támogatására szolgáltak, amelyeket manapság már nem igazán használnak (például Netscape Navigator 4 és Internet Explorer 5). Maradj a szabványos doctype deklarációnál.
+
+---
+
+## A dokumentum 'head' része
+
+A HTML dokumentum 'head' területe tartalmazza a weboldal alapvető információit, más néven [metaadatokat](https://developer.mozilla.org/docs/Web/HTML/Element/meta). Esetünkben a következő négy dolgot adjuk meg a webkiszolgálónak, amelyhez az oldal elküldésre kerül megjelenítés céljából:
+
+-   az oldal címe
+-   metaadatok, beleértve:
+    -   a 'karakterkészletet', amely megadja, hogy milyen karakterkódolást használ az oldal
+    -   böngészőinformációk, beleértve az `x-ua-compatible` beállítást, amely jelzi, hogy az IE=edge böngésző támogatott
+    -   információk arról, hogyan viselkedjen a nézetablak az oldal betöltésekor. A nézetablak kezdeti méretezésének 1-re állítása szabályozza a nagyítási szintet az oldal első betöltésekor.
+
+### Feladat
+
+Adj hozzá egy 'head' blokkot a dokumentumodhoz a `<html>` nyitó és záró tagek közé.
+
+```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>
+```
+
+✅ Mi történne, ha egy ilyen viewport meta tag-et állítanál be: `<meta name="viewport" content="width=600">`? Olvass többet a [viewport](https://developer.mozilla.org/docs/Web/HTML/Viewport_meta_tag) témájáról.
+
+---
+
+## A dokumentum `body` része
+
+### HTML tagek
+
+A HTML-ben tageket adsz hozzá a .html fájlodhoz, hogy létrehozd a weboldal elemeit. Minden tag általában egy nyitó és egy záró tagból áll, például: `<p>hello</p>` egy bekezdés jelölésére. Hozd létre az interfész 'body' részét úgy, hogy hozzáadsz egy `<body>` tagpárt a `<html>` tagek közé; a jelölésed most így néz ki:
+
+### Feladat
+
+```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>
+```
+
+Most elkezdheted az oldal felépítését. Általában `<div>` tageket használsz az oldal különálló elemeinek létrehozásához. Hozz létre egy sor `<div>` elemet, amelyek képeket fognak tartalmazni.
+
+### Képek
+
+Egy HTML tag, amely nem igényel záró tagot, az `<img>` tag, mert van egy `src` eleme, amely tartalmazza az összes információt, amely az elem megjelenítéséhez szükséges.
+
+Hozz létre egy `images` nevű mappát az alkalmazásodban, és abba helyezd el az összes képet a [forráskód mappából](../../../../3-terrarium/solution/images); (14 növény képe van).
+
+### Feladat
+
+Add hozzá ezeket a növényképeket két oszlopba a `<body></body>` tagek közé:
+
+```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>
+```
+
+> Megjegyzés: Spans vs. Divs. A Div-ek 'blokk' elemeknek számítanak, míg a Spans 'soros' elemek. Mi történne, ha ezeket a div-eket span-ekké alakítanád?
+
+Ezzel a jelöléssel a növények most megjelennek a képernyőn. Elég rosszul néz ki, mert még nincsenek CSS-sel formázva, de ezt a következő leckében fogjuk megtenni.
+
+Minden képnek van alternatív szövege, amely akkor is megjelenik, ha a képet nem lehet látni vagy megjeleníteni. Ez egy fontos attribútum a hozzáférhetőség érdekében. A hozzáférhetőségről a későbbi leckékben tanulhatsz többet; egyelőre jegyezd meg, hogy az alt attribútum alternatív információt nyújt egy képről, ha a felhasználó valamilyen okból nem tudja megtekinteni azt (például lassú kapcsolat, hiba a src attribútumban, vagy ha a felhasználó képernyőolvasót használ).
+
+✅ Észrevetted, hogy minden képnek ugyanaz az alt tagje? Ez jó gyakorlat? Miért igen vagy miért nem? Tudod javítani ezt a kódot?
+
+---
+
+## Szemantikus jelölés
+
+Általánosságban előnyösebb, ha értelmes 'szemantikát' használsz a HTML írásakor. Mit jelent ez? Azt jelenti, hogy olyan HTML tageket használsz, amelyek az adott adat vagy interakció típusának megfelelően lettek tervezve. Például az oldal főcímének `<h1>` tagot kell használnia.
+
+Add hozzá a következő sort közvetlenül a nyitó `<body>` tag alá:
+
+```html
+<h1>My Terrarium</h1>
+```
+
+A szemantikus jelölés, például a címek `<h1>`-ként és a rendezetlen listák `<ul>`-ként való megjelenítése segíti a képernyőolvasókat az oldal navigálásában. Általánosságban a gombokat `<button>`-ként kell írni, a listákat pedig `<li>`-ként. Bár _lehetséges_ speciálisan formázott `<span>` elemeket használni kattintáskezelőkkel a gombok utánzására, jobb a fogyatékkal élő felhasználók számára, ha a technológiák meghatározhatják, hogy az oldalon hol található egy gomb, és interakcióba léphetnek vele, ha az elem gombként jelenik meg. Emiatt próbálj meg minél több szemantikus jelölést használni.
+
+✅ Nézd meg, hogyan működik egy képernyőolvasó, és [hogyan lép kapcsolatba egy weboldallal](https://www.youtube.com/watch?v=OUDV1gqs9GA). Látod, miért lehet frusztráló a nem szemantikus jelölés a felhasználó számára?
+
+## A terrárium
+
+Az interfész utolsó része olyan jelölést tartalmaz, amelyet stílusozni fogunk, hogy terráriumot hozzunk létre.
+
+### Feladat:
+
+Add hozzá ezt a jelölést az utolsó `</div>` tag fölé:
+
+```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>
+```
+
+✅ Annak ellenére, hogy hozzáadtad ezt a jelölést a képernyőhöz, semmi sem jelenik meg. Miért?
+
+---
+
+## 🚀Kihívás
+
+Vannak néhány 'régebbi' HTML tag, amelyekkel még mindig szórakoztató játszani, bár nem szabad elavult tageket, például [ezeket a tageket](https://developer.mozilla.org/docs/Web/HTML/Element#Obsolete_and_deprecated_elements) használni a jelölésedben. Mégis, tudod használni a régi `<marquee>` taget, hogy az h1 cím vízszintesen görögjön? (ha megteszed, ne felejtsd el utána eltávolítani)
+
+## Előadás utáni kvíz
+
+[Előadás utáni kvíz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/16)
+
+## Áttekintés és önálló tanulás
+
+A HTML az a 'kipróbált és bevált' építőkocka-rendszer, amely segített a webet azzá alakítani, ami ma. Ismerd meg egy kicsit a történelmét azáltal, hogy tanulmányozod a régi és új tageket. Ki tudod találni, miért vontak vissza néhány taget, és miért adtak hozzá újakat? Milyen tagek jelenhetnek meg a jövőben?
+
+Tudj meg többet a web- és mobiloldalak készítéséről a [Microsoft Learn](https://docs.microsoft.com/learn/modules/build-simple-website/?WT.mc_id=academic-77807-sagibbon) oldalon.
+
+
+## Feladat
+
+[Gyakorold a HTML-t: Készíts egy blog makettet](assignment.md)
+
+---
+
+**Felelősség kizárása**:  
+Ez a dokumentum az AI fordítási szolgáltatás [Co-op Translator](https://github.com/Azure/co-op-translator) segítségével lett lefordítva. Bár igyekszünk pontosságra törekedni, kérjük, vegye figyelembe, hogy az automatikus fordítások hibákat vagy pontatlanságokat tartalmazhatnak. Az eredeti dokumentum az eredeti nyelvén tekintendő hiteles forrásnak. Kritikus információk esetén javasolt professzionális emberi fordítást igénybe venni. Nem vállalunk felelősséget semmilyen félreértésért vagy téves értelmezésért, amely a fordítás használatából eredhet.
\ No newline at end of file
diff --git a/translations/hu/3-terrarium/1-intro-to-html/assignment.md b/translations/hu/3-terrarium/1-intro-to-html/assignment.md
new file mode 100644
index 00000000..1a2a5fe8
--- /dev/null
+++ b/translations/hu/3-terrarium/1-intro-to-html/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "970776c81401c9aacb34f365edac6b53",
+  "translation_date": "2025-08-28T04:15:06+00:00",
+  "source_file": "3-terrarium/1-intro-to-html/assignment.md",
+  "language_code": "hu"
+}
+-->
+# Gyakorold az HTML-t: Készíts egy blog makettet
+
+## Útmutató
+
+Képzeld el, hogy éppen tervezed vagy újratervezed a személyes weboldaladat. Készíts egy grafikai makettet az oldaladról, majd írd le azokat az HTML kódokat, amelyeket az oldal különböző elemeinek felépítéséhez használnál. Ezt megteheted papíron, amit később be is szkennelhetsz, vagy használhatsz bármilyen általad választott szoftvert, de ügyelj arra, hogy az HTML kódot kézzel írd meg.
+
+## Értékelési szempontok
+
+| Kritérium | Kiemelkedő                                                                         | Megfelelő                                                                        | Fejlesztésre szoruló                                                              |
+| --------- | ---------------------------------------------------------------------------------- | -------------------------------------------------------------------------------- | --------------------------------------------------------------------------------- |
+|           | A blog elrendezése vizuálisan megjelenik, legalább 10 HTML elemmel                 | A blog elrendezése vizuálisan megjelenik, körülbelül 5 HTML elemmel              | A blog elrendezése vizuálisan megjelenik, legfeljebb 3 HTML elemmel               |
+
+---
+
+**Felelősség kizárása**:  
+Ez a dokumentum az AI fordítási szolgáltatás, a [Co-op Translator](https://github.com/Azure/co-op-translator) segítségével lett lefordítva. Bár törekszünk a pontosságra, kérjük, vegye figyelembe, hogy az automatikus fordítások hibákat vagy pontatlanságokat tartalmazhatnak. Az eredeti dokumentum az eredeti nyelvén tekintendő hiteles forrásnak. Fontos információk esetén javasolt professzionális, emberi fordítást igénybe venni. Nem vállalunk felelősséget semmilyen félreértésért vagy téves értelmezésért, amely a fordítás használatából eredhet.
\ No newline at end of file
diff --git a/translations/hu/3-terrarium/2-intro-to-css/README.md b/translations/hu/3-terrarium/2-intro-to-css/README.md
new file mode 100644
index 00000000..3bf263df
--- /dev/null
+++ b/translations/hu/3-terrarium/2-intro-to-css/README.md
@@ -0,0 +1,284 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "e375c2aeb94e2407f2667633d39580bd",
+  "translation_date": "2025-08-28T04:16:19+00:00",
+  "source_file": "3-terrarium/2-intro-to-css/README.md",
+  "language_code": "hu"
+}
+-->
+# Terrárium Projekt 2. rész: Bevezetés a CSS-be
+
+![Bevezetés a CSS-be](../../../../translated_images/webdev101-css.3f7af5991bf53a200d79e7257e5e450408d8ea97f5b531d31b2e3976317338ee.hu.png)
+> Sketchnote készítette: [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Előadás előtti kvíz
+
+[Előadás előtti kvíz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/17)
+
+### Bevezetés
+
+A CSS, vagyis Cascading Style Sheets, egy fontos problémát old meg a webfejlesztésben: hogyan tegyük szép megjelenésűvé a weboldalunkat. Az alkalmazások stílusozása nemcsak használhatóbbá és esztétikusabbá teszi őket, hanem lehetővé teszi a Reszponzív Webdesign (RWD) létrehozását is – így az alkalmazások jól mutatnak bármilyen képernyőméreten. A CSS nem csupán az alkalmazások szépítéséről szól; a specifikációja animációkat és transzformációkat is tartalmaz, amelyek lehetővé teszik kifinomult interakciók létrehozását. A CSS Munkacsoport segít a jelenlegi CSS specifikációk karbantartásában; munkájukat követheted a [World Wide Web Consortium weboldalán](https://www.w3.org/Style/CSS/members).
+
+> Fontos megjegyezni, hogy a CSS egy folyamatosan fejlődő nyelv, mint minden a weben, és nem minden böngésző támogatja a specifikáció újabb részeit. Mindig ellenőrizd a megvalósításokat a [CanIUse.com](https://caniuse.com) segítségével.
+
+Ebben a leckében stílusokat adunk az online terráriumunkhoz, és megismerkedünk több CSS fogalommal: a kaszkáddal, az örökléssel, valamint a szelektorok, pozicionálás és a CSS használatával történő elrendezés készítésével. A folyamat során elrendezzük a terráriumot, és létrehozzuk magát a terráriumot.
+
+### Előfeltétel
+
+A terrárium HTML-jének már készen kell lennie, hogy stílusokat adhass hozzá.
+
+> Nézd meg a videót
+
+> 
+> [![Git és GitHub alapok videó](https://img.youtube.com/vi/6yIdOIV9p1I/0.jpg)](https://www.youtube.com/watch?v=6yIdOIV9p1I)
+
+### Feladat
+
+A terrárium mappádban hozz létre egy új fájlt `style.css` néven. Importáld ezt a fájlt a `<head>` szekcióba:
+
+```html
+<link rel="stylesheet" href="./style.css" />
+```
+
+---
+
+## A kaszkád
+
+A Cascading Style Sheets a stílusok „kaszkádjának” ötletét foglalja magában, amely szerint a stílus alkalmazása prioritás alapján történik. A weboldal készítője által beállított stílusok prioritást élveznek a böngésző által beállítottakkal szemben. Az „inline” stílusok pedig prioritást élveznek a külső stíluslapokon beállítottakkal szemben.
+
+### Feladat
+
+Adj hozzá egy „color: red” inline stílust az `<h1>` taghez:
+
+```HTML
+<h1 style="color: red">My Terrarium</h1>
+```
+
+Ezután add hozzá a következő kódot a `style.css` fájlhoz:
+
+```CSS
+h1 {
+ color: blue;
+}
+```
+
+✅ Milyen szín jelenik meg a webalkalmazásodban? Miért? Találsz módot a stílusok felülírására? Mikor lenne erre szükség, vagy miért nem?
+
+---
+
+## Öröklés
+
+A stílusok öröklődnek az őselem stílusából a leszármazottba, így a beágyazott elemek öröklik a szülőik stílusait.
+
+### Feladat
+
+Állítsd be a body betűtípusát egy adott betűtípusra, és ellenőrizd egy beágyazott elem betűtípusát:
+
+```CSS
+body {
+	font-family: helvetica, arial, sans-serif;
+}
+```
+
+Nyisd meg a böngésződ konzolját az 'Elements' fülön, és figyeld meg az H1 betűtípusát. A body betűtípusát örökli, ahogy azt a böngésző jelzi:
+
+![örökölt betűtípus](../../../../translated_images/1.cc07a5cbe114ad1d4728c35134584ac1b87db688eff83cf75985cf31fe0ed95c.hu.png)
+
+✅ Tudsz egy beágyazott stílust úgy beállítani, hogy egy másik tulajdonságot örököljön?
+
+---
+
+## CSS szelektorok
+
+### Tag-ek
+
+Eddig a `style.css` fájlodban csak néhány tag van stílusozva, és az alkalmazás elég furcsán néz ki:
+
+```CSS
+body {
+	font-family: helvetica, arial, sans-serif;
+}
+
+h1 {
+	color: #3a241d;
+	text-align: center;
+}
+```
+
+Ez a tag stílusozási módja lehetővé teszi, hogy egyedi elemeket irányíts, de szükséged van arra, hogy sok növény stílusát irányítsd a terráriumodban. Ehhez a CSS szelektorokat kell használnod.
+
+### Id-k
+
+Adj stílust a bal és jobb konténerek elrendezéséhez. Mivel csak egy bal és egy jobb konténer van, ezek id-t kapnak a markupban. A stílusozáshoz használd a `#` jelet:
+
+```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;
+}
+```
+
+Itt abszolút pozicionálással helyezted el ezeket a konténereket a képernyő bal és jobb szélére, és százalékokat használtál a szélességükhöz, hogy kicsi mobilképernyőkön is méretezhetők legyenek.
+
+✅ Ez a kód elég ismétlődő, tehát nem „DRY” (Don't Repeat Yourself); találsz jobb módot ezeknek az id-knek a stílusozására, esetleg egy id és egy osztály kombinációjával? Ehhez módosítanod kellene a markupot, és újra kellene strukturálnod a CSS-t:
+
+```html
+<div id="left-container" class="container"></div>
+```
+
+### Osztályok
+
+A fenti példában két egyedi elemet stílusoztál a képernyőn. Ha azt szeretnéd, hogy a stílusok sok elemre vonatkozzanak a képernyőn, CSS osztályokat használhatsz. Tedd ezt a növények elrendezéséhez a bal és jobb konténerekben.
+
+Figyeld meg, hogy minden növény a HTML markupban id-k és osztályok kombinációjával rendelkezik. Az id-ket itt a JavaScript használja, amelyet később hozzáadsz, hogy manipuláld a terrárium növényelhelyezését. Az osztályok viszont minden növénynek adott stílust biztosítanak.
+
+```html
+<div class="plant-holder">
+	<img class="plant" alt="plant" id="plant1" src="./images/plant1.png" />
+</div>
+```
+
+Add hozzá a következőt a `style.css` fájlhoz:
+
+```CSS
+.plant-holder {
+	position: relative;
+	height: 13%;
+	left: -10px;
+}
+
+.plant {
+	position: absolute;
+	max-width: 150%;
+	max-height: 150%;
+	z-index: 2;
+}
+```
+
+Figyelemre méltó ebben a részletben a relatív és abszolút pozicionálás keveréke, amelyet a következő szekcióban tárgyalunk. Nézd meg, hogyan kezelik a magasságokat százalékokkal:
+
+A növénytartó magasságát 13%-ra állítottad, ami jó szám ahhoz, hogy minden növény megjelenjen minden függőleges konténerben görgetés nélkül.
+
+A növénytartót balra mozgattad, hogy a növények jobban középre kerüljenek a konténerükben. A képeknek nagy mennyiségű átlátszó háttere van, hogy könnyebben lehessen őket húzni, ezért balra kell tolni őket, hogy jobban illeszkedjenek a képernyőn.
+
+Ezután magának a növénynek 150%-os max-szélességet adtál. Ez lehetővé teszi, hogy a böngésző méretének csökkenésével arányosan csökkenjen. Próbáld meg átméretezni a böngésződet; a növények a konténereikben maradnak, de méretük csökken, hogy illeszkedjenek.
+
+Szintén figyelemre méltó a z-index használata, amely az elem relatív magasságát szabályozza (így a növények a konténer tetején helyezkednek el, és úgy tűnik, mintha a terráriumban lennének).
+
+✅ Miért van szükséged külön növénytartó és növény CSS szelektorra?
+
+## CSS pozicionálás
+
+A pozíció tulajdonságok keverése (statikus, relatív, fix, abszolút és ragadós pozíciók) kissé trükkös lehet, de ha megfelelően alkalmazzák, jó irányítást biztosít az elemek elhelyezésében az oldalakon.
+
+Az abszolút pozicionált elemek a legközelebbi pozicionált őselemhez viszonyítva helyezkednek el, és ha nincs ilyen, akkor a dokumentum törzséhez viszonyítva.
+
+A relatív pozicionált elemek a CSS utasításai alapján helyezkednek el, amelyek elmozdítják őket az eredeti helyüktől.
+
+A példánkban a `plant-holder` egy relatív pozicionált elem, amely egy abszolút pozicionált konténerben helyezkedik el. Az eredmény az, hogy az oldalsáv konténerek balra és jobbra vannak rögzítve, a növénytartó pedig beágyazott, és függőleges sorban helyet ad a növényeknek.
+
+> Maga a `plant` is abszolút pozicionált, ami szükséges ahhoz, hogy húzható legyen, ahogy a következő leckében felfedezed.
+
+✅ Kísérletezz az oldalsó konténerek és a növénytartó pozíciótípusainak cseréjével. Mi történik?
+
+## CSS elrendezések
+
+Most azt fogod használni, amit tanultál, hogy CSS segítségével megépítsd magát a terráriumot!
+
+Először stílusozt a `.terrarium` div gyermekeit, hogy lekerekített téglalapként jelenjenek meg:
+
+```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;
+}
+```
+
+Figyeld meg a százalékok használatát itt. Ha lecsökkented a böngésződ méretét, láthatod, hogyan méreteződik a terrárium is. Figyeld meg az üveg elemek szélességét és magasságát százalékban, valamint azt, hogy minden elem abszolút pozicionált a középpontban, rögzítve az ablak aljához.
+
+A `rem` használatát is alkalmazzuk a border-radius esetében, amely egy betűtípus-alapú relatív hossz. Olvass többet erről a relatív mértékről a [CSS specifikációban](https://www.w3.org/TR/css-values-3/#font-relative-lengths).
+
+✅ Próbáld meg megváltoztatni az üveg színeit és átlátszóságát a föld színeivel szemben. Mi történik? Miért?
+
+---
+
+## 🚀Kihívás
+
+Adj egy „buborék” csillogást az üveg bal alsó részéhez, hogy üvegszerűbbnek tűnjön. A `.jar-glossy-long` és `.jar-glossy-short` elemeket fogod stílusozni, hogy visszatükröződő csillogást hozz létre. Így fog kinézni:
+
+![kész terrárium](../../../../translated_images/terrarium-final.2f07047ffc597d0a06b06cab28a77801a10dd12fdb6c7fc630e9c40665491c53.hu.png)
+
+A kvíz befejezéséhez menj végig ezen a Learn modulon: [Stílusozd HTML alkalmazásodat CSS-sel](https://docs.microsoft.com/learn/modules/build-simple-website/4-css-basics/?WT.mc_id=academic-77807-sagibbon)
+
+## Előadás utáni kvíz
+
+[Előadás utáni kvíz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/18)
+
+## Áttekintés és önálló tanulás
+
+A CSS megtévesztően egyszerűnek tűnik, de számos kihívást jelent, amikor egy alkalmazást tökéletesen szeretnénk stílusozni minden böngészőre és képernyőméretre. A CSS-Grid és a Flexbox olyan eszközök, amelyeket azért fejlesztettek ki, hogy a munka egy kicsit strukturáltabb és megbízhatóbb legyen. Ismerd meg ezeket az eszközöket a [Flexbox Froggy](https://flexboxfroggy.com/) és a [Grid Garden](https://codepip.com/games/grid-garden/) játékokkal.
+
+## Feladat
+
+[CSS Refaktorálás](assignment.md)
+
+---
+
+**Felelősség kizárása**:  
+Ez a dokumentum az AI fordítási szolgáltatás, a [Co-op Translator](https://github.com/Azure/co-op-translator) segítségével lett lefordítva. Bár törekszünk a pontosságra, kérjük, vegye figyelembe, hogy az automatikus fordítások hibákat vagy pontatlanságokat tartalmazhatnak. Az eredeti dokumentum az eredeti nyelvén tekintendő hiteles forrásnak. Kritikus információk esetén javasolt professzionális emberi fordítást igénybe venni. Nem vállalunk felelősséget a fordítás használatából eredő félreértésekért vagy téves értelmezésekért.
\ No newline at end of file
diff --git a/translations/hu/3-terrarium/2-intro-to-css/assignment.md b/translations/hu/3-terrarium/2-intro-to-css/assignment.md
new file mode 100644
index 00000000..3451902d
--- /dev/null
+++ b/translations/hu/3-terrarium/2-intro-to-css/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "9d4d75af51aaccfe9af778f792c62919",
+  "translation_date": "2025-08-28T04:17:41+00:00",
+  "source_file": "3-terrarium/2-intro-to-css/assignment.md",
+  "language_code": "hu"
+}
+-->
+# CSS Átalakítás
+
+## Útmutató
+
+Stílusozd újra a terráriumot Flexbox vagy CSS Grid használatával, és készíts képernyőképeket, hogy bemutasd, több böngészőben is tesztelted. Lehet, hogy módosítanod kell a jelölést, ezért hozz létre az alkalmazás egy új verzióját, amelyben a művészi elemek már a helyükön vannak az átalakításhoz. Ne aggódj az elemek húzhatóvá tételével kapcsolatban; egyelőre csak az HTML-t és a CSS-t alakítsd át.
+
+## Értékelési szempontok
+
+| Kritérium | Kiváló                                                          | Megfelelő                    | Fejlesztésre szorul                  |
+| --------- | ---------------------------------------------------------------- | ---------------------------- | ------------------------------------- |
+|           | Teljesen újra stílusozott terrárium Flexbox vagy CSS Grid használatával | Néhány elem újra stílusozása | A terrárium stílusának teljes hiánya |
+
+---
+
+**Felelősség kizárása**:  
+Ez a dokumentum az AI fordítási szolgáltatás [Co-op Translator](https://github.com/Azure/co-op-translator) segítségével lett lefordítva. Bár törekszünk a pontosságra, kérjük, vegye figyelembe, hogy az automatikus fordítások hibákat vagy pontatlanságokat tartalmazhatnak. Az eredeti dokumentum az eredeti nyelvén tekintendő hiteles forrásnak. Fontos információk esetén javasolt professzionális, emberi fordítást igénybe venni. Nem vállalunk felelősséget semmilyen félreértésért vagy téves értelmezésért, amely a fordítás használatából eredhet.
\ No newline at end of file
diff --git a/translations/hu/3-terrarium/3-intro-to-DOM-and-closures/README.md b/translations/hu/3-terrarium/3-intro-to-DOM-and-closures/README.md
new file mode 100644
index 00000000..7564a3ff
--- /dev/null
+++ b/translations/hu/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-28T04:19:22+00:00",
+  "source_file": "3-terrarium/3-intro-to-DOM-and-closures/README.md",
+  "language_code": "hu"
+}
+-->
+# Terrárium Projekt 3. rész: DOM Manipuláció és Zárvány
+
+![DOM és egy zárvány](../../../../translated_images/webdev101-js.10280393044d7eaaec7e847574946add7ddae6be2b2194567d848b61d849334a.hu.png)
+> Sketchnote készítette: [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Előadás Előtti Kvíz
+
+[Előadás előtti kvíz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/19)
+
+### Bevezetés
+
+A DOM, vagyis a "Document Object Model" manipulálása a webfejlesztés egyik kulcsfontosságú aspektusa. Az [MDN](https://developer.mozilla.org/docs/Web/API/Document_Object_Model/Introduction) szerint: "A Document Object Model (DOM) a weben található dokumentumok szerkezetét és tartalmát alkotó objektumok adatábrázolása." A DOM manipulációjával kapcsolatos kihívások gyakran vezettek ahhoz, hogy JavaScript keretrendszereket használjunk ahelyett, hogy tiszta JavaScriptet alkalmaznánk a DOM kezelésére, de mi most saját magunk fogjuk megoldani!
+
+Ezenkívül ebben a leckében bevezetjük a [JavaScript zárvány](https://developer.mozilla.org/docs/Web/JavaScript/Closures) fogalmát, amelyet úgy képzelhetsz el, mint egy olyan függvényt, amelyet egy másik függvény zár körül, így a belső függvény hozzáférhet a külső függvény hatóköréhez.
+
+> A JavaScript zárványok egy hatalmas és összetett téma. Ez a lecke csak az alapötletet érinti, miszerint a terrárium kódjában található egy zárvány: egy belső és egy külső függvény, amelyek úgy vannak felépítve, hogy a belső függvény hozzáférjen a külső függvény hatóköréhez. Ha többet szeretnél megtudni arról, hogyan működik ez, látogasd meg az [alapos dokumentációt](https://developer.mozilla.org/docs/Web/JavaScript/Closures).
+
+Egy zárványt fogunk használni a DOM manipulálására.
+
+Gondolj a DOM-ra úgy, mint egy fára, amely a weboldal dokumentumának minden manipulálható módját ábrázolja. Különböző API-k (Application Program Interfaces) készültek, hogy a programozók a választott programozási nyelvük segítségével hozzáférhessenek a DOM-hoz, és szerkeszthessék, módosíthassák, átrendezhetik, vagy más módon kezelhessék azt.
+
+![DOM fa ábrázolás](../../../../translated_images/dom-tree.7daf0e763cbbba9273f9a66fe04c98276d7d23932309b195cb273a9cf1819b42.hu.png)
+
+> A DOM és a hozzá tartozó HTML jelölés ábrázolása. Forrás: [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
+
+Ebben a leckében befejezzük az interaktív terrárium projektünket azzal, hogy létrehozzuk a JavaScriptet, amely lehetővé teszi a felhasználó számára, hogy manipulálja az oldalon található növényeket.
+
+### Előfeltétel
+
+A terráriumod HTML-jének és CSS-ének már készen kell lennie. A lecke végére képes leszel a növényeket a terráriumba mozgatni és onnan kivenni, azokat húzással.
+
+### Feladat
+
+A terrárium mappádban hozz létre egy új fájlt `script.js` néven. Importáld ezt a fájlt a `<head>` szekcióba:
+
+```html
+	<script src="./script.js" defer></script>
+```
+
+> Megjegyzés: használd a `defer` attribútumot, amikor egy külső JavaScript fájlt importálsz a HTML fájlba, hogy a JavaScript csak akkor fusson le, amikor a HTML fájl teljesen betöltődött. Használhatnád az `async` attribútumot is, amely lehetővé teszi a szkript futtatását a HTML fájl elemzése közben, de a mi esetünkben fontos, hogy a HTML elemek teljesen elérhetők legyenek a húzáshoz, mielőtt a húzási szkriptet végrehajtanánk.
+---
+
+## A DOM elemek
+
+Az első dolog, amit meg kell tenned, hogy létrehozol hivatkozásokat azokra az elemekre, amelyeket manipulálni szeretnél a DOM-ban. A mi esetünkben ezek a 14 növény, amelyek jelenleg az oldalsávokban várakoznak.
+
+### Feladat
+
+```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'));
+```
+
+Mi történik itt? A dokumentumot hivatkozod meg, és annak DOM-jában keresel egy adott Id-vel rendelkező elemet. Emlékszel, hogy az első HTML leckében egyedi Id-ket adtál minden növényképnek (`id="plant1"`)? Most hasznát veszed ennek az erőfeszítésnek. Miután azonosítottad az egyes elemeket, átadod azokat egy `dragElement` nevű függvénynek, amelyet hamarosan megépítesz. Így az adott HTML elem húzhatóvá válik, vagy hamarosan azzá válik.
+
+✅ Miért hivatkozunk az elemekre Id alapján? Miért nem a CSS osztályuk alapján? Emlékezz vissza a CSS leckére, hogy megválaszold ezt a kérdést.
+
+---
+
+## A Zárvány
+
+Most készen állsz a `dragElement` zárvány létrehozására, amely egy külső függvény, amely egy vagy több belső függvényt zár körül (a mi esetünkben három lesz).
+
+A zárványok hasznosak, amikor egy vagy több függvénynek hozzá kell férnie egy külső függvény hatóköréhez. Íme egy példa:
+
+```javascript
+function displayCandy(){
+	let candy = ['jellybeans'];
+	function addCandy(candyType) {
+		candy.push(candyType)
+	}
+	addCandy('gumdrops');
+}
+displayCandy();
+console.log(candy)
+```
+
+Ebben a példában a `displayCandy` függvény körülvesz egy olyan függvényt, amely egy új cukortípust ad hozzá egy már létező tömbhöz. Ha futtatnád ezt a kódot, a `candy` tömb undefined lenne, mivel ez egy lokális változó (a zárványhoz lokális).
+
+✅ Hogyan tehetnéd elérhetővé a `candy` tömböt? Próbáld meg a zárványon kívülre helyezni. Így a tömb globálissá válik, ahelyett, hogy csak a zárvány lokális hatókörében maradna.
+
+### Feladat
+
+A `script.js` fájlban az elemek deklarációi alatt hozz létre egy függvényt:
+
+```javascript
+function dragElement(terrariumElement) {
+	//set 4 positions for positioning on the screen
+	let pos1 = 0,
+		pos2 = 0,
+		pos3 = 0,
+		pos4 = 0;
+	terrariumElement.onpointerdown = pointerDrag;
+}
+```
+
+A `dragElement` a `terrariumElement` objektumot a szkript tetején lévő deklarációkból kapja. Ezután néhány lokális pozíciót állít be `0` értékre az adott függvénybe átadott objektumhoz. Ezek azok a lokális változók, amelyeket minden egyes elemhez manipulálni fogsz, miközben húzási és ejtési funkcionalitást adsz hozzá a zárványon belül. A terráriumot ezekkel a húzott elemekkel fogod feltölteni, így az alkalmazásnak nyomon kell követnie, hogy hova helyezték őket.
+
+Ezenkívül a `terrariumElement`, amelyet átadsz ennek a függvénynek, egy `pointerdown` eseményt kap, amely a [web API-k](https://developer.mozilla.org/docs/Web/API) része, és a DOM kezelésére lett tervezve. Az `onpointerdown` akkor fut le, amikor egy gombot megnyomnak, vagy a mi esetünkben egy húzható elemet megérintenek. Ez az eseménykezelő mind [webes, mind mobilböngészőkön](https://caniuse.com/?search=onpointerdown) működik, néhány kivétellel.
+
+✅ Az [onclick eseménykezelő](https://developer.mozilla.org/docs/Web/API/GlobalEventHandlers/onclick) sokkal szélesebb körű támogatottsággal rendelkezik a böngészők között; miért nem használod itt? Gondolj arra, hogy pontosan milyen típusú képernyőinterakciót próbálsz létrehozni.
+
+---
+
+## A Pointerdrag függvény
+
+A `terrariumElement` készen áll arra, hogy húzható legyen; amikor az `onpointerdown` esemény lefut, a `pointerDrag` függvény hívódik meg. Add hozzá ezt a függvényt közvetlenül az alábbi sor alá: `terrariumElement.onpointerdown = pointerDrag;`:
+
+### Feladat 
+
+```javascript
+function pointerDrag(e) {
+	e.preventDefault();
+	console.log(e);
+	pos3 = e.clientX;
+	pos4 = e.clientY;
+}
+```
+
+Több dolog történik. Először is, megakadályozod az alapértelmezett eseményeket, amelyek normálisan pointerdown esetén történnének, az `e.preventDefault();` használatával. Így nagyobb kontrollt kapsz a felület viselkedése felett.
+
+> Térj vissza ehhez a sorhoz, amikor teljesen megépítetted a szkript fájlt, és próbáld ki `e.preventDefault()` nélkül - mi történik?
+
+Másodszor, nyisd meg az `index.html` fájlt egy böngészőablakban, és vizsgáld meg a felületet. Amikor rákattintasz egy növényre, láthatod, hogyan rögzíti az 'e' esemény az adatokat. Nézd meg az eseményt, hogy lásd, mennyi információt gyűjt egy pointer down esemény!
+
+Ezután vedd észre, hogyan állítod be a lokális `pos3` és `pos4` változókat az `e.clientX` értékére. Ezek az értékek rögzítik a növény x és y koordinátáit abban a pillanatban, amikor rákattintasz vagy megérinted. Finomhangolásra lesz szükséged a növények viselkedésének irányításához, amikor kattintasz és húzod őket, ezért nyomon követed a koordinátáikat.
+
+✅ Kezd világosabbá válni, miért épül az egész alkalmazás egy nagy zárványra? Ha nem így lenne, hogyan tartanád fenn a hatókört mind a 14 húzható növényhez?
+
+Fejezd be az inicializáló függvényt azzal, hogy hozzáadsz még két pointer esemény manipulációt a `pos4 = e.clientY` alá:
+
+```html
+document.onpointermove = elementDrag;
+document.onpointerup = stopElementDrag;
+```
+Most azt jelzed, hogy a növényt a pointerrel együtt akarod húzni, amikor mozgatod, és hogy a húzási gesztusnak meg kell állnia, amikor elengeded a növényt. Az `onpointermove` és `onpointerup` ugyanannak az API-nak a részei, mint az `onpointerdown`. A felület most hibákat fog dobni, mivel még nem definiáltad az `elementDrag` és a `stopElementDrag` függvényeket, ezért építsd ki azokat következő lépésként.
+
+## Az elementDrag és stopElementDrag függvények
+
+A zárványodat két további belső függvénnyel fogod befejezni, amelyek kezelik, mi történik, amikor egy növényt húzol, és amikor abbahagyod a húzását. Az a viselkedés, amit el akarsz érni, hogy bármikor húzhatsz egy növényt, és bárhová elhelyezheted az oldalon. Ez a felület meglehetősen szabad (például nincs ejtési zóna), hogy lehetővé tegye számodra a terráriumod szabad tervezését azáltal, hogy növényeket adsz hozzá, távolítasz el, és helyezel át.
+
+### Feladat
+
+Add hozzá az `elementDrag` függvényt közvetlenül a `pointerDrag` záró kapcsos zárójele után:
+
+```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';
+}
+```
+Ebben a függvényben sokat módosítasz azokon a kezdeti pozíciókon (1-4), amelyeket lokális változóként állítottál be a külső függvényben. Mi történik itt?
+
+Húzás közben újra hozzárendeled a `pos1`-et úgy, hogy egyenlővé teszed a `pos3`-mal (amit korábban `e.clientX`-ként állítottál be), mínusz az aktuális `e.clientX` értékkel. Hasonló műveletet végzel a `pos2`-vel is. Ezután újra beállítod a `pos3` és `pos4` értékét az elem új X és Y koordinátáira. Ezeket a változásokat figyelheted a konzolban húzás közben. Ezután módosítod a növény CSS stílusát, hogy beállítsd az új pozícióját az `offsetTop` és `offsetLeft` alapján.
+
+> Az `offsetTop` és `offsetLeft` CSS tulajdonságok, amelyek egy elem pozícióját állítják be a szülőjéhez képest; a szülő bármely olyan elem lehet, amely nincs `static` pozícióban.
+
+Ez az újrapozícionálás lehetővé teszi, hogy finomhangold a terrárium és a növények viselkedését.
+
+### Feladat 
+
+Az utolsó feladat a felület befejezéséhez az, hogy hozzáadd a `stopElementDrag` függvényt az `elementDrag` záró kapcsos zárójele után:
+
+```javascript
+function stopElementDrag() {
+	document.onpointerup = null;
+	document.onpointermove = null;
+}
+```
+
+Ez a kis függvény visszaállítja az `onpointerup` és `onpointermove` eseményeket, hogy újraindíthasd a növény mozgatását, vagy elkezdhess egy új növényt húzni.
+
+✅ Mi történik, ha nem állítod nullára ezeket az eseményeket?
+
+Most befejezted a projektedet!
+
+🥇Gratulálunk! Elkészítetted a gyönyörű terráriumodat! ![befejezett terrárium](../../../../translated_images/terrarium-final.0920f16e87c13a84cd2b553a5af9a3ad1cffbd41fbf8ce715d9e9c43809a5e2c.hu.png)
+
+---
+
+## 🚀Kihívás
+
+Adj új eseménykezelőt a zárványodhoz, hogy valami mást is csináljon a növényekkel; például dupla kattintással hozd előre egy növényt. Légy kreatív!
+
+## Előadás Utáni Kvíz
+
+[Előadás utáni kvíz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/20)
+
+## Áttekintés és Önálló Tanulás
+
+Bár az elemek húzása a képernyőn triviálisnak tűnhet, számos módja van ennek, és sok buktatója lehet, attól függően, hogy milyen hatást szeretnél elérni. Valójában létezik egy teljes [drag and drop API](https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_API), amelyet kipróbálhatsz. Nem használtuk ezt az API-t ebben a modulban, mert a kívánt hatás kissé eltérő volt, de próbáld ki ezt az API-t egy saját projekteden, és nézd meg, mit érhetsz el.
+
+További információkat találhatsz a pointer eseményekről a [W3C dokumentációban](https://www.w3.org/TR/pointerevents1/) és az [MDN webes dokumentációban](https://developer.mozilla.org/docs/Web/API/Pointer_events).
+
+Mindig ellenőrizd a böngésző képességeit a [CanIUse.com](https://caniuse.com/) segítségével.
+
+## Feladat
+
+[Dolgozz egy kicsit többet a DOM-mal](assignment.md)
+
+---
+
+**Felelősség kizárása**:  
+Ez a dokumentum az AI fordítási szolgáltatás, a [Co-op Translator](https://github.com/Azure/co-op-translator) segítségével lett lefordítva. Bár törekszünk a pontosságra, kérjük, vegye figyelembe, hogy az automatikus fordítások hibákat vagy pontatlanságokat tartalmazhatnak. Az eredeti dokumentum az eredeti nyelvén tekintendő hiteles forrásnak. Kritikus információk esetén javasolt professzionális emberi fordítást igénybe venni. Nem vállalunk felelősséget semmilyen félreértésért vagy téves értelmezésért, amely a fordítás használatából eredhet.
\ No newline at end of file
diff --git a/translations/hu/3-terrarium/3-intro-to-DOM-and-closures/assignment.md b/translations/hu/3-terrarium/3-intro-to-DOM-and-closures/assignment.md
new file mode 100644
index 00000000..383b15b2
--- /dev/null
+++ b/translations/hu/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-28T04:21:04+00:00",
+  "source_file": "3-terrarium/3-intro-to-DOM-and-closures/assignment.md",
+  "language_code": "hu"
+}
+-->
+# Dolgozzunk még egy kicsit a DOM-mal
+
+## Útmutató
+
+Ismerd meg jobban a DOM-ot azáltal, hogy "örökbe fogadsz" egy DOM-elemet. Látogasd meg az MDN [DOM interfészek listáját](https://developer.mozilla.org/docs/Web/API/Document_Object_Model), és válassz egyet. Keresd meg, hogyan használják egy weboldalon, és írj egy magyarázatot arról, hogyan alkalmazzák.
+
+## Értékelési szempontok
+
+| Kritérium | Kiváló                                      | Megfelelő                                       | Fejlesztésre szorul     |
+| --------- | ------------------------------------------- | ------------------------------------------------ | ----------------------- |
+|           | Bekezdéses leírás példával                 | Bekezdéses leírás példa nélkül                  | Nincs leírás bemutatva |
+
+---
+
+**Felelősség kizárása**:  
+Ez a dokumentum az AI fordítási szolgáltatás [Co-op Translator](https://github.com/Azure/co-op-translator) segítségével lett lefordítva. Bár törekszünk a pontosságra, kérjük, vegye figyelembe, hogy az automatikus fordítások hibákat vagy pontatlanságokat tartalmazhatnak. Az eredeti dokumentum az eredeti nyelvén tekintendő hiteles forrásnak. Kritikus információk esetén javasolt professzionális emberi fordítást igénybe venni. Nem vállalunk felelősséget az ebből a fordításból eredő félreértésekért vagy téves értelmezésekért.
\ No newline at end of file
diff --git a/translations/hu/3-terrarium/README.md b/translations/hu/3-terrarium/README.md
new file mode 100644
index 00000000..d9960bae
--- /dev/null
+++ b/translations/hu/3-terrarium/README.md
@@ -0,0 +1,45 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "7965cd2bc5dc92ad888dc4c6ab2ab70a",
+  "translation_date": "2025-08-28T04:13:01+00:00",
+  "source_file": "3-terrarium/README.md",
+  "language_code": "hu"
+}
+-->
+# Terráriumom: Egy projekt HTML, CSS és DOM manipuláció tanulásához JavaScript segítségével 🌵🌱
+
+Egy kis drag and drop kód-meditáció. Egy kevés HTML, JS és CSS segítségével képes leszel egy webes felületet létrehozni, azt stílusozni, sőt, többféle interakciót is hozzáadhatsz, amit csak szeretnél.
+
+![terráriumom](../../../translated_images/screenshot_gray.0c796099a1f9f25e40aa55ead81f268434c00af30d7092490759945eda63067d.hu.png)
+
+# Leckék
+
+1. [Bevezetés a HTML-be](./1-intro-to-html/README.md)
+2. [Bevezetés a CSS-be](./2-intro-to-css/README.md)
+3. [Bevezetés a DOM-ba és JS Closures](./3-intro-to-DOM-and-closures/README.md)
+
+## Köszönetnyilvánítás
+
+Írta ♥️-val [Jen Looper](https://www.twitter.com/jenlooper)
+
+A CSS segítségével létrehozott terráriumot Jakub Mandra üvegedényes [codepen](https://codepen.io/Rotarepmi/pen/rjpNZY) projektje inspirálta.
+
+A grafikát kézzel rajzolta [Jen Looper](http://jenlooper.com) a Procreate segítségével.
+
+## A terrárium közzététele
+
+A terráriumodat közzéteheted az interneten az Azure Static Web Apps használatával.
+
+1. Forkold ezt a repót
+
+2. Nyomd meg ezt a gombot
+
+[![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. Kövesd végig a varázslót az alkalmazás létrehozásához. Ügyelj arra, hogy az alkalmazás gyökérkönyvtárát `/solution`-re vagy a kódod gyökérkönyvtárára állítsd. Ebben az alkalmazásban nincs API, így emiatt nem kell aggódnod. Egy GitHub mappa fog létrejönni a forkolt repódban, amely segíti az Azure Static Web Apps építési szolgáltatásait, hogy felépítsék és közzétegyék az alkalmazásodat egy új URL-en.
+
+---
+
+**Felelősség kizárása**:  
+Ez a dokumentum az [Co-op Translator](https://github.com/Azure/co-op-translator) AI fordítási szolgáltatás segítségével került lefordításra. Bár törekszünk a pontosságra, kérjük, vegye figyelembe, hogy az automatikus fordítások hibákat vagy pontatlanságokat tartalmazhatnak. Az eredeti dokumentum az eredeti nyelvén tekintendő hiteles forrásnak. Kritikus információk esetén javasolt professzionális emberi fordítást igénybe venni. Nem vállalunk felelősséget semmilyen félreértésért vagy téves értelmezésért, amely a fordítás használatából eredhet.
\ No newline at end of file
diff --git a/translations/hu/3-terrarium/solution/README.md b/translations/hu/3-terrarium/solution/README.md
new file mode 100644
index 00000000..2f990d92
--- /dev/null
+++ b/translations/hu/3-terrarium/solution/README.md
@@ -0,0 +1,39 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "6329fbe8bd936068debd78cca6f09c0a",
+  "translation_date": "2025-08-28T04:15:32+00:00",
+  "source_file": "3-terrarium/solution/README.md",
+  "language_code": "hu"
+}
+-->
+# Az én terráriumom: Egy projekt HTML, CSS és DOM manipuláció tanulásához JavaScript segítségével 🌵🌱
+
+Egy kis drag and drop kódmeditáció. Egy kis HTML, JS és CSS használatával létrehozhatsz egy webes felületet, stílusozhatod, és interakciót adhatsz hozzá.
+
+![az én terráriumom](../../../../translated_images/screenshot_gray.0c796099a1f9f25e40aa55ead81f268434c00af30d7092490759945eda63067d.hu.png)
+
+## Köszönetnyilvánítás
+
+Írta ♥️-val [Jen Looper](https://www.twitter.com/jenlooper)
+
+A CSS segítségével létrehozott terráriumot Jakub Mandra üvegedényes [codepen](https://codepen.io/Rotarepmi/pen/rjpNZY) projektje inspirálta.
+
+A grafikát [Jen Looper](http://jenlooper.com) kézzel rajzolta Procreate használatával.
+
+## Telepítsd a terráriumodat
+
+A terráriumodat közzéteheted az interneten az Azure Static Web Apps segítségével.
+
+1. Forkold ezt a repót
+
+2. Nyomd meg ezt a gombot
+
+[![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. Kövesd a varázslót az alkalmazásod létrehozásához. Ügyelj arra, hogy az alkalmazás gyökérkönyvtárát `/solution`-re vagy a kódbázisod gyökerére állítsd. Ebben az alkalmazásban nincs API, így emiatt nem kell aggódnod. Egy .github mappa jön létre a forkolt repódban, amely segíti az Azure Static Web Apps build szolgáltatását az alkalmazásod új URL-re történő felépítésében és közzétételében.
+
+---
+
+**Felelősség kizárása**:  
+Ez a dokumentum az AI fordítási szolgáltatás [Co-op Translator](https://github.com/Azure/co-op-translator) segítségével lett lefordítva. Bár törekszünk a pontosságra, kérjük, vegye figyelembe, hogy az automatikus fordítások hibákat vagy pontatlanságokat tartalmazhatnak. Az eredeti dokumentum az eredeti nyelvén tekintendő hiteles forrásnak. Kritikus információk esetén javasolt professzionális emberi fordítást igénybe venni. Nem vállalunk felelősséget semmilyen félreértésért vagy téves értelmezésért, amely a fordítás használatából eredhet.
\ No newline at end of file
diff --git a/translations/hu/4-typing-game/README.md b/translations/hu/4-typing-game/README.md
new file mode 100644
index 00000000..3b879477
--- /dev/null
+++ b/translations/hu/4-typing-game/README.md
@@ -0,0 +1,44 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "957547b822c40042e07d591c4fbfde4f",
+  "translation_date": "2025-08-28T04:25:33+00:00",
+  "source_file": "4-typing-game/README.md",
+  "language_code": "hu"
+}
+-->
+# Eseményvezérelt programozás - Építs egy gépelős játékot
+
+## Bevezetés
+
+A gépelés az egyik leginkább alábecsült készség a fejlesztők körében. Az a képesség, hogy gyorsan át tudd vinni a gondolataidat a fejedből a szerkesztődbe, lehetővé teszi, hogy a kreativitás szabadon áramoljon. Az egyik legjobb módja a tanulásnak, ha játszol!
+
+> Szóval, építsünk egy gépelős játékot!
+
+A JavaScript, HTML és CSS ismereteidet fogod felhasználni, amelyeket eddig megszereztél, hogy létrehozz egy gépelős játékot. A játék egy véletlenszerű idézetet fog megjeleníteni a játékosnak (mi [Sherlock Holmes](https://en.wikipedia.org/wiki/Sherlock_Holmes) idézeteket használunk), és mérni fogja, mennyi idő alatt tudja azt pontosan begépelni. A JavaScript, HTML és CSS ismereteidet fogod felhasználni, amelyeket eddig megszereztél, hogy létrehozz egy gépelős játékot.
+
+![demo](../../../4-typing-game/images/demo.gif)
+
+## Előfeltételek
+
+Ez a lecke feltételezi, hogy ismered a következő fogalmakat:
+
+- Szövegbevitel és gombvezérlők létrehozása
+- CSS és stílusok beállítása osztályok használatával
+- JavaScript alapok
+  - Tömb létrehozása
+  - Véletlenszám generálása
+  - Az aktuális idő lekérése
+
+## Lecke
+
+[Hogyan készítsünk gépelős játékot eseményvezérelt programozással](./typing-game/README.md)
+
+## Köszönetnyilvánítás
+
+Írta ♥️-val [Christopher Harrison](http://www.twitter.com/geektrainer)
+
+---
+
+**Felelősség kizárása**:  
+Ez a dokumentum az AI fordítási szolgáltatás, a [Co-op Translator](https://github.com/Azure/co-op-translator) segítségével lett lefordítva. Bár törekszünk a pontosságra, kérjük, vegye figyelembe, hogy az automatikus fordítások hibákat vagy pontatlanságokat tartalmazhatnak. Az eredeti dokumentum az eredeti nyelvén tekintendő hiteles forrásnak. Kritikus információk esetén javasolt professzionális emberi fordítást igénybe venni. Nem vállalunk felelősséget semmilyen félreértésért vagy téves értelmezésért, amely a fordítás használatából eredhet.
\ No newline at end of file
diff --git a/translations/hu/4-typing-game/solution/README.md b/translations/hu/4-typing-game/solution/README.md
new file mode 100644
index 00000000..a1e09063
--- /dev/null
+++ b/translations/hu/4-typing-game/solution/README.md
@@ -0,0 +1,15 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "068cbb9b3c10a96d503f6cdd6c9ace8c",
+  "translation_date": "2025-08-28T04:28:47+00:00",
+  "source_file": "4-typing-game/solution/README.md",
+  "language_code": "hu"
+}
+-->
+Ez egy helyőrző, szándékosan üresen hagyva
+
+---
+
+**Felelősség kizárása**:  
+Ez a dokumentum az AI fordítási szolgáltatás [Co-op Translator](https://github.com/Azure/co-op-translator) segítségével lett lefordítva. Bár törekszünk a pontosságra, kérjük, vegye figyelembe, hogy az automatikus fordítások hibákat vagy pontatlanságokat tartalmazhatnak. Az eredeti dokumentum az eredeti nyelvén tekintendő hiteles forrásnak. Kritikus információk esetén javasolt professzionális emberi fordítást igénybe venni. Nem vállalunk felelősséget semmilyen félreértésért vagy téves értelmezésért, amely a fordítás használatából eredhet.
\ No newline at end of file
diff --git a/translations/hu/4-typing-game/typing-game/README.md b/translations/hu/4-typing-game/typing-game/README.md
new file mode 100644
index 00000000..d97958a6
--- /dev/null
+++ b/translations/hu/4-typing-game/typing-game/README.md
@@ -0,0 +1,332 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "e982871b8388c59c22a41b73b5fca70f",
+  "translation_date": "2025-08-28T04:26:38+00:00",
+  "source_file": "4-typing-game/typing-game/README.md",
+  "language_code": "hu"
+}
+-->
+# Játék készítése események segítségével
+
+## Előadás előtti kvíz
+
+[Előadás előtti kvíz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/21)
+
+## Eseményvezérelt programozás
+
+Amikor böngészőalapú alkalmazást készítünk, grafikus felhasználói felületet (GUI) biztosítunk a felhasználónak, hogy interakcióba léphessen az általunk létrehozott alkalmazással. A böngészővel való interakció leggyakoribb módja a különböző elemekre kattintás és gépelés. Fejlesztőként az a kihívás, hogy nem tudjuk, mikor fogják ezeket a műveleteket végrehajtani!
+
+Az [eseményvezérelt programozás](https://hu.wikipedia.org/wiki/Esem%C3%A9nyvez%C3%A9relt_programoz%C3%A1s) az a programozási típus, amelyet a GUI létrehozásához kell alkalmaznunk. Ha kicsit lebontjuk ezt a kifejezést, a kulcsszó az **esemény**. Az [esemény](https://www.merriam-webster.com/dictionary/event) a Merriam-Webster szerint "valami, ami történik". Ez tökéletesen leírja a helyzetünket. Tudjuk, hogy valami történni fog, amire kódot szeretnénk végrehajtani válaszként, de nem tudjuk, mikor fog bekövetkezni.
+
+Az a mód, ahogyan megjelöljük a végrehajtandó kódrészletet, az egy függvény létrehozása. Ha a [procedurális programozásra](https://hu.wikipedia.org/wiki/Procedur%C3%A1lis_programoz%C3%A1s) gondolunk, a függvényeket meghatározott sorrendben hívjuk meg. Ez az eseményvezérelt programozásnál is igaz lesz. A különbség az, **hogyan** hívjuk meg a függvényeket.
+
+Az események (gombkattintás, gépelés stb.) kezeléséhez **eseményfigyelőket** regisztrálunk. Az eseményfigyelő egy olyan függvény, amely figyeli, hogy bekövetkezik-e egy esemény, és válaszul végrehajtódik. Az eseményfigyelők frissíthetik a felhasználói felületet, hívásokat indíthatnak a szerver felé, vagy bármi mást elvégezhetnek a felhasználó műveletére válaszul. Eseményfigyelőt az [addEventListener](https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener) használatával adunk hozzá, és megadjuk a végrehajtandó függvényt.
+
+> **NOTE:** Érdemes kiemelni, hogy számos módja van eseményfigyelők létrehozásának. Használhatunk névtelen függvényeket vagy elnevezett függvényeket. Különböző rövidítéseket is alkalmazhatunk, például a `click` tulajdonság beállítását vagy az `addEventListener` használatát. A gyakorlatban az `addEventListener`-re és névtelen függvényekre fogunk összpontosítani, mivel ez a leggyakoribb technika, amelyet a webfejlesztők használnak. Ez a legflexibilisebb is, mivel az `addEventListener` minden eseményhez működik, és az esemény nevét paraméterként adhatjuk meg.
+
+### Gyakori események
+
+[Számos esemény](https://developer.mozilla.org/docs/Web/Events) áll rendelkezésre, amelyeket figyelhetünk egy alkalmazás létrehozásakor. Alapvetően bármi, amit a felhasználó egy oldalon tesz, eseményt vált ki, ami nagy hatalmat ad nekünk ahhoz, hogy biztosítsuk a kívánt élményt. Szerencsére általában csak néhány eseményre van szükségünk. Íme néhány gyakori esemény (beleértve azt a kettőt, amelyet a játékunk létrehozásakor használni fogunk):
+
+- [click](https://developer.mozilla.org/docs/Web/API/Element/click_event): A felhasználó valamire kattintott, általában egy gombra vagy hivatkozásra
+- [contextmenu](https://developer.mozilla.org/docs/Web/API/Element/contextmenu_event): A felhasználó a jobb egérgombbal kattintott
+- [select](https://developer.mozilla.org/docs/Web/API/Element/select_event): A felhasználó kijelölt egy szöveget
+- [input](https://developer.mozilla.org/docs/Web/API/Element/input_event): A felhasználó szöveget írt be
+
+## A játék létrehozása
+
+Egy játékot fogunk készíteni, hogy felfedezzük, hogyan működnek az események a JavaScriptben. A játékunk a játékos gépelési képességét fogja tesztelni, ami az egyik leginkább alábecsült készség, amelyet minden fejlesztőnek gyakorolnia kellene. A játék általános menete a következő lesz:
+
+- A játékos rákattint a start gombra, és megjelenik egy idézet, amelyet be kell gépelnie
+- A játékos a lehető leggyorsabban begépeli az idézetet egy szövegmezőbe
+  - Minden egyes szó befejezésekor a következő kiemelésre kerül
+  - Ha a játékos elgépel, a szövegmező pirosra vált
+  - Amikor a játékos befejezi az idézetet, egy sikerüzenet jelenik meg az eltelt idővel együtt
+
+Építsük meg a játékot, és tanuljunk az eseményekről!
+
+### Fájlstruktúra
+
+Három fájlra lesz szükségünk: **index.html**, **script.js** és **style.css**. Kezdjük ezek beállításával, hogy megkönnyítsük a munkánkat.
+
+- Hozz létre egy új mappát a munkádhoz egy konzol vagy terminál ablak megnyitásával, és add ki a következő parancsot:
+
+```bash
+# Linux or macOS
+mkdir typing-game && cd typing-game
+
+# Windows
+md typing-game && cd typing-game
+```
+
+- Nyisd meg a Visual Studio Code-ot
+
+```bash
+code .
+```
+
+- Adj hozzá három fájlt a mappához a Visual Studio Code-ban a következő nevekkel:
+  - index.html
+  - script.js
+  - style.css
+
+## A felhasználói felület létrehozása
+
+Ha megvizsgáljuk a követelményeket, tudjuk, hogy néhány elemre lesz szükségünk a HTML-oldalunkon. Ez olyan, mint egy recept, ahol szükségünk van néhány hozzávalóra:
+
+- Egy hely az idézet megjelenítésére, amelyet a felhasználónak be kell gépelnie
+- Egy hely az üzenetek megjelenítésére, például egy sikerüzenet
+- Egy szövegmező a gépeléshez
+- Egy start gomb
+
+Mindegyikhez szükség lesz ID-kre, hogy a JavaScriptben dolgozhassunk velük. Hozzáadjuk a hivatkozásokat a CSS- és JavaScript-fájlokra is, amelyeket létrehozunk.
+
+Hozz létre egy új fájlt **index.html** néven. Add hozzá a következő HTML-t:
+
+```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>
+```
+
+### Az alkalmazás elindítása
+
+Mindig a legjobb iteratívan fejleszteni, hogy lássuk, hogyan néz ki a munkánk. Indítsuk el az alkalmazást. A Visual Studio Code-hoz van egy remek bővítmény, a [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon), amely helyileg hosztolja az alkalmazást, és minden mentéskor frissíti a böngészőt.
+
+- Telepítsd a [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) bővítményt a link követésével, majd kattints az **Install** gombra
+  - A böngésző felkér, hogy nyisd meg a Visual Studio Code-ot, majd a Visual Studio Code felkér a telepítés végrehajtására
+  - Indítsd újra a Visual Studio Code-ot, ha szükséges
+- A telepítés után a Visual Studio Code-ban nyomd meg a Ctrl-Shift-P (vagy Cmd-Shift-P) billentyűkombinációt a parancspaletta megnyitásához
+- Írd be: **Live Server: Open with Live Server**
+  - A Live Server elindítja az alkalmazás hosztolását
+- Nyiss meg egy böngészőt, és navigálj a **https://localhost:5500** címre
+- Most már látnod kell az általad létrehozott oldalt!
+
+Adjunk hozzá némi funkcionalitást.
+
+## A CSS hozzáadása
+
+A HTML elkészítése után adjuk hozzá az alapvető stílusokat a CSS segítségével. Ki kell emelnünk azt a szót, amelyet a játékosnak gépelnie kell, és színezni kell a szövegmezőt, ha a beírt szöveg helytelen. Ezt két osztály segítségével fogjuk megtenni.
+
+Hozz létre egy új fájlt **style.css** néven, és add hozzá a következő szintaxist.
+
+```css
+/* inside style.css */
+.highlight {
+  background-color: yellow;
+}
+
+.error {
+  background-color: lightcoral;
+  border: red;
+}
+```
+
+✅ A CSS esetében a saját ízlésed szerint alakíthatod az oldal elrendezését. Szánj egy kis időt arra, hogy az oldal vonzóbbá váljon:
+
+- Válassz másik betűtípust
+- Színezd ki a fejlécet
+- Állítsd be az elemek méretét
+
+## JavaScript
+
+A felhasználói felület elkészítése után ideje a JavaScriptre összpontosítani, amely biztosítja a logikát. Ezt néhány lépésre bontjuk:
+
+- [Konstansok létrehozása](../../../../4-typing-game/typing-game)
+- [Eseményfigyelő a játék indításához](../../../../4-typing-game/typing-game)
+- [Eseményfigyelő a gépeléshez](../../../../4-typing-game/typing-game)
+
+Először azonban hozz létre egy új fájlt **script.js** néven.
+
+### A konstansok hozzáadása
+
+Néhány elemre szükségünk lesz, hogy megkönnyítsük a programozást. Ismét, mint egy recept, itt van, amire szükségünk lesz:
+
+- Tömb az összes idézet listájával
+- Üres tömb az aktuális idézet szavainak tárolására
+- Hely az aktuálisan gépelt szó indexének tárolására
+- Az idő, amikor a játékos a start gombra kattintott
+
+Szükségünk lesz továbbá a felhasználói felület elemeire való hivatkozásokra:
+
+- A szövegmező (**typed-value**)
+- Az idézet megjelenítése (**quote**)
+- Az üzenet (**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');
+```
+
+✅ Adj hozzá több idézetet a játékodhoz
+
+> **NOTE:** Az elemeket bármikor lekérhetjük a kódban a `document.getElementById` használatával. Mivel ezeket az elemeket rendszeresen hivatkozni fogjuk, elkerüljük a string literálokkal való elírásokat konstansok használatával. Az olyan keretrendszerek, mint a [Vue.js](https://vuejs.org/) vagy a [React](https://reactjs.org/), segíthetnek a kód központosításának jobb kezelésében.
+
+Szánj egy percet arra, hogy megnézz egy videót a `const`, `let` és `var` használatáról.
+
+[![Változótípusok](https://img.youtube.com/vi/JNIXfGiDWM8/0.jpg)](https://youtube.com/watch?v=JNIXfGiDWM8 "Változótípusok")
+
+> 🎥 Kattints a fenti képre egy videóért a változókról.
+
+### Indítási logika hozzáadása
+
+A játék elindításához a játékos a start gombra kattint. Természetesen nem tudjuk, mikor fogják megnyomni a start gombot. Itt jön képbe egy [eseményfigyelő](https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener). Az eseményfigyelő lehetővé teszi számunkra, hogy figyeljünk valamire (egy eseményre), és kódot hajtsunk végre válaszként. Ebben az esetben kódot szeretnénk végrehajtani, amikor a felhasználó a start gombra kattint.
+
+Amikor a felhasználó a **start** gombra kattint, ki kell választanunk egy idézetet, be kell állítanunk a felhasználói felületet, és el kell indítanunk a szó- és időkövetést. Az alábbi JavaScriptet kell hozzáadnod; a kódrészlet után megbeszéljük.
+
+```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();
+});
+```
+
+Nézzük meg részletesen a kódot!
+
+- Szókövetés beállítása
+  - A [Math.floor](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Math/floor) és a [Math.random](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Math/random) használatával véletlenszerűen választunk egy idézetet a `quotes` tömbből
+  - Az `quote`-ot átalakítjuk egy `words` tömbbé, hogy nyomon követhessük, melyik szót gépeli éppen a játékos
+  - A `wordIndex` értékét 0-ra állítjuk, mivel a játékos az első szóval kezdi
+- Felhasználói felület beállítása
+  - Létrehozunk egy `spanWords` tömböt, amely minden szót egy `span` elembe helyez
+    - Ez lehetővé teszi számunkra, hogy kiemeljük a megjelenített szót
+  - A tömböt `join`-nal egy stringgé alakítjuk, amelyet az `quoteElement` `innerHTML`-jének frissítésére használunk
+    - Ez megjeleníti az idézetet a játékos számára
+  - Az első `span` elem `className` értékét `highlight`-ra állítjuk, hogy sárgával kiemeljük
+  - Az `messageElement`-et kiürítjük az `innerText` értékének `''`-re állításával
+- Szövegmező beállítása
+  - Töröljük az aktuális `value` értéket a `typedValueElement`-ben
+  - A fókuszt a `typedValueElement`-re állítjuk
+- Az időzítőt a `getTime` meghívásával indítjuk el
+
+### Gépelési logika hozzáadása
+
+Amikor a játékos gépel, egy `input` esemény váltódik ki. Ez az eseményfigyelő ellenőrzi, hogy a játékos helyesen gépel-e, és kezeli a játék aktuális állapotát. Térjünk vissza a **script.js** fájlhoz, és adjuk hozzá a következő kódot a végére. Utána részletesen megbeszéljük.
+
+```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';
+  }
+});
+```
+
+Nézzük meg részletesen a kódot! Először lekérjük az aktuális szót és a játékos által eddig begépelt értéket. Ezután egy logikai lépcsőzetet követünk, ahol ellenőrizzük, hogy az idézet teljes-e, a szó teljes-e, a szó helyes-e, vagy (végül), ha hiba történt.
+
+- Az idézet teljes, ha a `typedValue` megegyezik a `currentWord`-del, és a `wordIndex` egyenlő a `words` `length`-jének eggyel csökkentett értékével
+  - Az `elapsedTime`-ot kiszámítjuk úgy, hogy kivonjuk a `startTime`-ból az aktuális időt
+  - Az `elapsedTime`-ot elosztjuk 1.000-rel, hogy milliszekundumból másodpercre váltsuk
+  - Megjelenítünk egy sikerüzenetet
+- A szó teljes, ha a `typedValue` szóközzel végződik (egy szó vége), és a `typedValue` megegyezik a `currentWord`-del
+  - A `typedElement` `value` értékét `''`-re állítjuk, hogy lehetővé tegyük a következő szó begépelését
+  - A `wordIndex`-et növeljük, hogy a következő szóra lépjünk
+  - Végigmegyünk az `quoteElement` összes `childNodes` elemén, és az `className` értékét `''`-re állítjuk, hogy visszaállítsuk az alapértelmezett megjelenítést
+  - Az aktuális szó `className` értékét `highlight`-ra állítjuk, hogy megjelöljük a következő begépelendő szót
+- A szó jelenleg helyesen van begépelve (de nem teljes), ha a `currentWord`
+- Tárold a legmagasabb pontszámokat a [localStorage](https://developer.mozilla.org/docs/Web/API/Window/localStorage) segítségével
+
+## Előadás utáni kvíz
+
+[Előadás utáni kvíz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/22)
+
+## Áttekintés és önálló tanulás
+
+Olvass utána a [böngésző által elérhető összes eseménynek](https://developer.mozilla.org/docs/Web/Events), és gondold át, hogy melyik eseményt milyen helyzetekben használnád.
+
+## Feladat
+
+[Hozz létre egy új billentyűzetes játékot](assignment.md)
+
+---
+
+**Felelősség kizárása**:  
+Ez a dokumentum az AI fordítási szolgáltatás, a [Co-op Translator](https://github.com/Azure/co-op-translator) segítségével lett lefordítva. Bár törekszünk a pontosságra, kérjük, vegye figyelembe, hogy az automatikus fordítások hibákat vagy pontatlanságokat tartalmazhatnak. Az eredeti dokumentum az eredeti nyelvén tekintendő hiteles forrásnak. Kritikus információk esetén javasolt professzionális emberi fordítást igénybe venni. Nem vállalunk felelősséget semmilyen félreértésért vagy téves értelmezésért, amely a fordítás használatából eredhet.
\ No newline at end of file
diff --git a/translations/hu/4-typing-game/typing-game/assignment.md b/translations/hu/4-typing-game/typing-game/assignment.md
new file mode 100644
index 00000000..cea883f8
--- /dev/null
+++ b/translations/hu/4-typing-game/typing-game/assignment.md
@@ -0,0 +1,26 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "de5384c118e15e4d1d0eaa00fc01b112",
+  "translation_date": "2025-08-28T04:28:30+00:00",
+  "source_file": "4-typing-game/typing-game/assignment.md",
+  "language_code": "hu"
+}
+-->
+# Hozz létre egy új billentyűzetes játékot
+
+## Útmutató
+
+Készíts egy kis játékot, amely billentyűzetes eseményeket használ fel feladatok végrehajtására. Lehet egy különböző típusú gépelős játék, vagy egy művészeti jellegű játék, amely billentyűleütésekre pixeleket fest a képernyőre. Légy kreatív!
+
+## Értékelési szempontok
+
+| Kritérium | Kiemelkedő              | Megfelelő                | Fejlesztésre szorul |
+| --------- | ----------------------- | ------------------------ | ------------------- |
+|           | Egy teljes játék kerül bemutatásra | A játék nagyon minimális | A játék hibákat tartalmaz |
+|           |                         |                          |                     |
+
+---
+
+**Felelősség kizárása**:  
+Ez a dokumentum az AI fordítási szolgáltatás [Co-op Translator](https://github.com/Azure/co-op-translator) segítségével lett lefordítva. Bár törekszünk a pontosságra, kérjük, vegye figyelembe, hogy az automatikus fordítások hibákat vagy pontatlanságokat tartalmazhatnak. Az eredeti dokumentum az eredeti nyelvén tekintendő hiteles forrásnak. Kritikus információk esetén javasolt professzionális emberi fordítást igénybe venni. Nem vállalunk felelősséget semmilyen félreértésért vagy téves értelmezésért, amely a fordítás használatából eredhet.
\ No newline at end of file
diff --git a/translations/hu/5-browser-extension/1-about-browsers/README.md b/translations/hu/5-browser-extension/1-about-browsers/README.md
new file mode 100644
index 00000000..437edc4a
--- /dev/null
+++ b/translations/hu/5-browser-extension/1-about-browsers/README.md
@@ -0,0 +1,182 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "0bb55e0b98600afab801eea115228873",
+  "translation_date": "2025-08-28T03:39:37+00:00",
+  "source_file": "5-browser-extension/1-about-browsers/README.md",
+  "language_code": "hu"
+}
+-->
+# Böngészőbővítmény Projekt 1. rész: Minden a böngészőkről
+
+![Böngésző sketchnote](../../../../translated_images/browser.60317c9be8b7f84adce43e30bff8d47a1ae15793beab762317b2bc6b74337c1a.hu.jpg)
+> Sketchnote készítette: [Wassim Chegham](https://dev.to/wassimchegham/ever-wondered-what-happens-when-you-type-in-a-url-in-an-address-bar-in-a-browser-3dob)
+
+## Előadás előtti kvíz
+
+[Előadás előtti kvíz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/23)
+
+### Bevezetés
+
+A böngészőbővítmények további funkciókat adnak a böngészőhöz. Mielőtt elkezdenéd egyet készíteni, érdemes egy kicsit megismerni, hogyan működnek a böngészők.
+
+### A böngészőről
+
+Ebben a leckesorozatban megtanulhatod, hogyan készíts böngészőbővítményt, amely működik Chrome, Firefox és Edge böngészőkben. Ebben a részben felfedezheted, hogyan működnek a böngészők, és felépítheted a böngészőbővítmény elemeit.
+
+De mi is pontosan a böngésző? Ez egy szoftveralkalmazás, amely lehetővé teszi a végfelhasználó számára, hogy hozzáférjen egy szerver tartalmához, és megjelenítse azt weboldalakon.
+
+✅ Egy kis történelem: az első böngészőt 'WorldWideWeb'-nek hívták, és Sir Timothy Berners-Lee készítette 1990-ben.
+
+![korai böngészők](../../../../translated_images/earlybrowsers.d984b711cdf3a42ddac919d46c4b5ca7232f68ccfbd81395e04e5a64c0015277.hu.jpg)
+> Néhány korai böngésző, via [Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing)
+
+Amikor a felhasználó csatlakozik az internethez egy URL (Uniform Resource Locator) cím használatával, általában Hypertext Transfer Protocol segítségével, `http` vagy `https` címen keresztül, a böngésző kommunikál egy webszerverrel, és lekéri a weboldalt.
+
+Ezen a ponton a böngésző renderelő motorja megjeleníti azt a felhasználó eszközén, amely lehet mobiltelefon, asztali számítógép vagy laptop.
+
+A böngészők képesek a tartalom gyorsítótárazására is, így nem kell minden alkalommal a szerverről lekérni. Rögzíthetik a felhasználó böngészési tevékenységének előzményeit, tárolhatnak 'cookie'-kat, amelyek kis adatdarabok, és információkat tartalmaznak a felhasználó tevékenységének tárolására, és még sok másra.
+
+Fontos megjegyezni, hogy a böngészők nem egyformák! Mindegyik böngészőnek megvannak az erősségei és gyengeségei, és egy profi webfejlesztőnek értenie kell, hogyan lehet a weboldalakat jól működtetni különböző böngészőkben. Ez magában foglalja a kis nézetablakok, például mobiltelefonok kezelését, valamint az offline felhasználók kiszolgálását.
+
+Egy igazán hasznos weboldal, amelyet érdemes könyvjelzőzni a kedvenc böngésződben, a [caniuse.com](https://www.caniuse.com). Amikor weboldalakat készítesz, nagyon hasznos a caniuse által támogatott technológiák listáit használni, hogy a lehető legjobban támogathasd a felhasználóidat.
+
+✅ Hogyan tudhatod meg, mely böngészők a legnépszerűbbek a weboldalad felhasználói körében? Ellenőrizd az analitikát - különböző analitikai csomagokat telepíthetsz a webfejlesztési folyamat részeként, amelyek megmutatják, mely böngészőket használják leggyakrabban.
+
+## Böngészőbővítmények
+
+Miért érdemes böngészőbővítményt készíteni? Ez egy praktikus eszköz, amelyet a böngészőhöz csatolhatsz, ha gyors hozzáférésre van szükséged olyan feladatokhoz, amelyeket gyakran ismételsz. Például, ha gyakran kell ellenőrizned a színeket a különböző weboldalakon, amelyeket használsz, telepíthetsz egy színválasztó böngészőbővítményt. Ha nehezen emlékszel jelszavakra, használhatsz egy jelszókezelő böngészőbővítményt.
+
+A böngészőbővítmények fejlesztése szórakoztató is. Általában egy meghatározott számú feladatot kezelnek, amelyeket jól elvégeznek.
+
+✅ Melyek a kedvenc böngészőbővítményeid? Milyen feladatokat látnak el?
+
+### Bővítmények telepítése
+
+Mielőtt elkezdenéd a fejlesztést, nézd meg a böngészőbővítmény készítésének és telepítésének folyamatát. Bár minden böngésző kicsit eltérően kezeli ezt a feladatot, a folyamat hasonló Chrome és Firefox esetében az Edge példájához:
+
+![képernyőkép az Edge böngészőről, amely az edge://extensions oldalt és a beállítások menüt mutatja](../../../../translated_images/install-on-edge.d68781acaf0b3d3dada8b7507cde7a64bf74b7040d9818baaa9070668e819f90.hu.png)
+
+> Megjegyzés: Győződj meg róla, hogy bekapcsoltad a fejlesztői módot, és engedélyezted a bővítmények telepítését más áruházakból.
+
+Lényegében a folyamat így néz ki:
+
+- készítsd el a bővítményt `npm run build` használatával
+- navigálj a böngészőben a bővítmények panelre a "Beállítások és továbbiak" gomb (a `...` ikon) segítségével a jobb felső sarokban
+- ha új telepítésről van szó, válaszd a `load unpacked` opciót, hogy feltölts egy új bővítményt a build mappájából (esetünkben ez a `/dist`)
+- vagy kattints a `reload` gombra, ha már telepített bővítményt frissítesz
+
+✅ Ezek az utasítások az általad készített bővítményekre vonatkoznak; ha olyan bővítményeket szeretnél telepíteni, amelyeket a böngésző bővítményáruházában tettek közzé, navigálj ezekre az [áruházakra](https://microsoftedge.microsoft.com/addons/Microsoft-Edge-Extensions-Home), és telepítsd a választott bővítményt.
+
+### Kezdj neki
+
+Egy olyan böngészőbővítményt fogsz készíteni, amely megjeleníti a régiód szénlábnyomát, bemutatva az energiafelhasználást és az energiaforrást. A bővítmény tartalmazni fog egy űrlapot, amely API kulcsot gyűjt, hogy hozzáférhess a CO2 Signal API-jához.
+
+**Amire szükséged lesz:**
+
+- [egy API kulcs](https://www.co2signal.com/); add meg az e-mail címedet az oldalon, és küldenek neked egyet
+- a [régiód kódja](http://api.electricitymap.org/v3/zones), amely megfelel az [Electricity Map](https://www.electricitymap.org/map) térképének (például Bostonban 'US-NEISO'-t használok)
+- a [kezdő kód](../../../../5-browser-extension/start). Töltsd le a `start` mappát; ebben a mappában fogod kiegészíteni a kódot.
+- [NPM](https://www.npmjs.com) - Az NPM egy csomagkezelő eszköz; telepítsd helyileg, és a `package.json` fájlban felsorolt csomagok telepítve lesznek a webes eszközöd számára
+
+✅ Tudj meg többet a csomagkezelésről ebben a [kiváló Learn modulban](https://docs.microsoft.com/learn/modules/create-nodejs-project-dependencies/?WT.mc_id=academic-77807-sagibbon)
+
+Szánj egy percet a kódbázis átnézésére:
+
+dist
+    -|manifest.json (alapértelmezések itt)
+    -|index.html (front-end HTML markup itt)
+    -|background.js (háttér JS itt)
+    -|main.js (összeállított JS)
+src
+    -|index.js (a JS kódod ide kerül)
+
+✅ Miután megvan az API kulcsod és a régiókódod, tárold ezeket valahol jegyzetként későbbi használatra.
+
+### Készítsd el a bővítmény HTML-jét
+
+Ez a bővítmény két nézetet tartalmaz. Az egyik az API kulcs és a régiókód begyűjtésére szolgál:
+
+![képernyőkép a kész bővítményről, amely egy űrlapot mutat a régió neve és az API kulcs mezőkkel.](../../../../translated_images/1.b6da8c1394b07491afeb6b2a8e5aca73ebd3cf478e27bcc9aeabb187e722648e.hu.png)
+
+A másik pedig a régió szénfelhasználását jeleníti meg:
+
+![képernyőkép a kész bővítményről, amely a szénfelhasználás és a fosszilis üzemanyag százalékos arányát mutatja az US-NEISO régióban.](../../../../translated_images/2.1dae52ff0804224692cd648afbf2342955d7afe3b0101b617268130dfb427f55.hu.png)
+
+Kezdjük azzal, hogy elkészítjük az űrlap HTML-jét, és CSS-sel formázzuk.
+
+A `/dist` mappában készíts egy űrlapot és egy eredményterületet. Az `index.html` fájlban töltsd ki az űrlap területét:
+
+```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>	
+```
+Ez az az űrlap, ahol a mentett információkat be lehet vinni és helyi tárolóba menteni.
+
+Ezután készítsd el az eredményterületet; az utolsó űrlap címke alatt adj hozzá néhány div-et:
+
+```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>
+```
+Ezen a ponton megpróbálhatod a buildet. Győződj meg róla, hogy telepítetted a bővítmény csomagfüggőségeit:
+
+```
+npm install
+```
+
+Ez a parancs az npm-et, a Node Package Manager-t használja, hogy telepítse a webpack-et a bővítmény build folyamatához. A folyamat kimenetét a `/dist/main.js` fájlban láthatod - itt látható, hogy a kód össze lett csomagolva.
+
+Egyelőre a bővítménynek épülnie kell, és ha Edge-be telepíted bővítményként, egy szépen megjelenített űrlapot fogsz látni.
+
+Gratulálok, megtetted az első lépéseket egy böngészőbővítmény készítése felé. A következő leckékben funkcionálisabbá és hasznosabbá teszed.
+
+---
+
+## 🚀 Kihívás
+
+Nézz körül egy böngészőbővítmény áruházban, és telepíts egyet a böngésződbe. Érdekes módon megvizsgálhatod a fájljait. Mit fedezel fel?
+
+## Előadás utáni kvíz
+
+[Előadás utáni kvíz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/24)
+
+## Áttekintés és önálló tanulás
+
+Ebben a leckében egy kicsit megismerkedtél a web böngésző történetével; használd ki ezt az alkalmat, hogy többet megtudj a World Wide Web feltalálóinak elképzeléseiről, és olvass többet a történetéről. Néhány hasznos oldal:
+
+[A web böngészők története](https://www.mozilla.org/firefox/browsers/browser-history/)
+
+[A web története](https://webfoundation.org/about/vision/history-of-the-web/)
+
+[Interjú Tim Berners-Lee-vel](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)
+
+## Feladat 
+
+[Stílusozd újra a bővítményedet](assignment.md)
+
+---
+
+**Felelősség kizárása**:  
+Ez a dokumentum az AI fordítási szolgáltatás [Co-op Translator](https://github.com/Azure/co-op-translator) segítségével lett lefordítva. Bár törekszünk a pontosságra, kérjük, vegye figyelembe, hogy az automatikus fordítások hibákat vagy pontatlanságokat tartalmazhatnak. Az eredeti dokumentum az eredeti nyelvén tekintendő hiteles forrásnak. Kritikus információk esetén javasolt professzionális emberi fordítást igénybe venni. Nem vállalunk felelősséget semmilyen félreértésért vagy téves értelmezésért, amely a fordítás használatából eredhet.
\ No newline at end of file
diff --git a/translations/hu/5-browser-extension/1-about-browsers/assignment.md b/translations/hu/5-browser-extension/1-about-browsers/assignment.md
new file mode 100644
index 00000000..df5de85d
--- /dev/null
+++ b/translations/hu/5-browser-extension/1-about-browsers/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "e3c6f2a03c2336e60412612d870af547",
+  "translation_date": "2025-08-28T03:40:52+00:00",
+  "source_file": "5-browser-extension/1-about-browsers/assignment.md",
+  "language_code": "hu"
+}
+-->
+# Alakítsd át a bővítményed stílusát
+
+## Útmutató
+
+Ennek a bővítménynek a kódbázisa már tartalmaz stílusokat, de nem kötelező ezeket használnod; tedd egyedivé a bővítményedet azáltal, hogy szerkeszted a css fájlját.
+
+## Értékelési szempontok
+
+| Kritérium | Kiemelkedő                                  | Megfelelő             | Fejlesztésre szorul |
+| --------- | ------------------------------------------- | --------------------- | ------------------- |
+|           | A kód működőképes új stílusokkal van beküldve | A stílusok hiányosak  | A stílusok hibásak  |
+
+---
+
+**Felelősség kizárása**:  
+Ez a dokumentum az AI fordítási szolgáltatás [Co-op Translator](https://github.com/Azure/co-op-translator) segítségével lett lefordítva. Bár törekszünk a pontosságra, kérjük, vegye figyelembe, hogy az automatikus fordítások hibákat vagy pontatlanságokat tartalmazhatnak. Az eredeti dokumentum az eredeti nyelvén tekintendő hiteles forrásnak. Kritikus információk esetén javasolt professzionális emberi fordítást igénybe venni. Nem vállalunk felelősséget semmilyen félreértésért vagy téves értelmezésért, amely a fordítás használatából eredhet.
\ No newline at end of file
diff --git a/translations/hu/5-browser-extension/2-forms-browsers-local-storage/README.md b/translations/hu/5-browser-extension/2-forms-browsers-local-storage/README.md
new file mode 100644
index 00000000..4440b3a1
--- /dev/null
+++ b/translations/hu/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-28T03:50:37+00:00",
+  "source_file": "5-browser-extension/2-forms-browsers-local-storage/README.md",
+  "language_code": "hu"
+}
+-->
+# Böngészőbővítmény projekt 2. rész: API hívása, helyi tárolás használata
+
+## Előadás előtti kvíz
+
+[Előadás előtti kvíz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/25)
+
+### Bevezetés
+
+Ebben a leckében egy API-t fogsz meghívni a böngészőbővítményed űrlapjának beküldésével, és megjeleníted az eredményeket a bővítményben. Emellett megtanulod, hogyan tárolhatsz adatokat a böngésződ helyi tárolójában későbbi felhasználásra.
+
+✅ Kövesd a megfelelő fájlokban található számozott szegmenseket, hogy tudd, hova kell elhelyezni a kódot.
+
+### Az elemek beállítása a bővítmény manipulálásához:
+
+Eddig elkészítetted a HTML-t az űrlaphoz és az eredmények `<div>` eleméhez a böngészőbővítményedben. Mostantól a `/src/index.js` fájlban kell dolgoznod, és lépésről lépésre építened a bővítményt. Tekintsd át az [előző leckét](../1-about-browsers/README.md), amely segít a projekt beállításában és a build folyamatban.
+
+Az `index.js` fájlban kezdj azzal, hogy létrehozol néhány `const` változót, amelyek az egyes mezőkhöz kapcsolódó értékeket tárolják:
+
+```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');
+```
+
+Ezeket a mezőket a CSS osztályuk alapján hivatkozod meg, ahogyan azt az előző leckében a HTML-ben beállítottad.
+
+### Eseményfigyelők hozzáadása
+
+Ezután adj eseményfigyelőket az űrlaphoz és a törlés gombhoz, amely visszaállítja az űrlapot, hogy ha a felhasználó beküldi az űrlapot vagy rákattint a törlés gombra, történjen valami. Add hozzá az alkalmazás inicializálására szolgáló hívást a fájl aljára:
+
+```JavaScript
+form.addEventListener('submit', (e) => handleSubmit(e));
+clearBtn.addEventListener('click', (e) => reset(e));
+init();
+```
+
+✅ Figyeld meg a rövidített szintaxist, amelyet az űrlap beküldésére vagy kattintási eseményre való figyeléshez használnak, és hogy az eseményt hogyan adják át a handleSubmit vagy reset függvényeknek. Meg tudnád írni ennek a rövidített szintaxisnak a hosszabb változatát? Melyiket részesíted előnyben?
+
+### Az init() és reset() függvények felépítése:
+
+Most létrehozod a bővítmény inicializálására szolgáló függvényt, amelyet init()-nek hívnak:
+
+```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();
+}
+
+```
+
+Ebben a függvényben érdekes logika található. Átolvasva látod, mi történik?
+
+- két `const` változót állítasz be, hogy ellenőrizd, tárolt-e a felhasználó APIKey-t és régiókódot a helyi tárolóban.
+- ha bármelyik érték null, az űrlapot megjeleníted úgy, hogy a stílusát 'block'-ra állítod.
+- elrejted az eredményeket, a betöltést és a clearBtn-t, valamint az esetleges hibaüzenetet üres szövegre állítod.
+- ha van kulcs és régió, elindítasz egy rutint:
+  - API hívás a szén-dioxid használati adatok lekérésére
+  - az eredmények területének elrejtése
+  - az űrlap elrejtése
+  - a visszaállítás gomb megjelenítése
+
+Mielőtt továbbmennél, hasznos megismerni egy nagyon fontos böngészőben elérhető koncepciót: [LocalStorage](https://developer.mozilla.org/docs/Web/API/Window/localStorage). A LocalStorage hasznos módja annak, hogy sztringeket tárolj a böngészőben `key-value` párok formájában. Ez a fajta webes tárolás JavaScript segítségével manipulálható, hogy adatokat kezeljen a böngészőben. A LocalStorage nem jár le, míg a SessionStorage, egy másik fajta webes tárolás, törlődik, amikor a böngészőt bezárják. A különböző tárolási típusoknak vannak előnyei és hátrányai.
+
+> Megjegyzés - a böngészőbővítményednek saját helyi tárolója van; a fő böngészőablak egy különálló példány, és külön viselkedik.
+
+Az APIKey-t például sztring értékként állítod be, és láthatod, hogy az Edge böngészőben be van állítva, ha "megtekinted" egy weboldalt (jobb gombbal kattintva a böngészőben), és az Alkalmazások fülre mész, hogy lásd a tárolást.
+
+![Helyi tároló panel](../../../../translated_images/localstorage.472f8147b6a3f8d141d9551c95a2da610ac9a3c6a73d4a1c224081c98bae09d9.hu.png)
+
+✅ Gondolj olyan helyzetekre, amikor NEM lenne célszerű adatokat tárolni a LocalStorage-ban. Általánosságban véve, API kulcsokat helyi tárolóban elhelyezni rossz ötlet! Látod, miért? A mi esetünkben, mivel az alkalmazásunk kizárólag tanulási célokat szolgál, és nem kerül alkalmazásboltba, ezt a módszert fogjuk használni.
+
+Figyeld meg, hogy a Web API-t használod a LocalStorage manipulálására, akár `getItem()`, `setItem()`, vagy `removeItem()` segítségével. Széles körben támogatott a böngészőkben.
+
+Mielőtt megépítenéd a `displayCarbonUsage()` függvényt, amelyet az `init()` hív meg, építsd ki az űrlap beküldésének kezelésére szolgáló funkciót.
+
+### Az űrlap beküldésének kezelése
+
+Hozz létre egy `handleSubmit` nevű függvényt, amely elfogad egy esemény argumentumot `(e)`. Állítsd meg az esemény propagálását (ebben az esetben meg akarod akadályozni, hogy a böngésző frissüljön), és hívd meg egy új függvényt, a `setUpUser`-t, amelynek átadod az `apiKey.value` és `region.value` argumentumokat. Így használod azt a két értéket, amelyet az űrlap megfelelő mezőinek kitöltésekor hozol be.
+
+```JavaScript
+function handleSubmit(e) {
+	e.preventDefault();
+	setUpUser(apiKey.value, region.value);
+}
+```
+
+✅ Frissítsd az emlékezeted - az előző leckében beállított HTML-ben két bemeneti mező van, amelyek `value` értékeit a fájl tetején beállított `const` változók rögzítik, és mindkettő `required`, így a böngésző megakadályozza, hogy a felhasználók null értékeket adjanak meg.
+
+### A felhasználó beállítása
+
+Haladj tovább a `setUpUser` függvényhez, itt állítod be a helyi tároló értékeit az apiKey és regionName számára. Adj hozzá egy új függvényt:
+
+```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);
+}
+```
+
+Ez a függvény egy betöltési üzenetet állít be, amely megjelenik, amíg az API hívás megtörténik. Ezen a ponton elérkeztél a böngészőbővítmény legfontosabb funkciójának létrehozásához!
+
+### Szén-dioxid használat megjelenítése
+
+Végül itt az idő, hogy lekérdezd az API-t!
+
+Mielőtt továbbmennénk, beszéljünk az API-król. Az API-k, vagyis [Application Programming Interfaces](https://www.webopedia.com/TERM/A/API.html), a webfejlesztők eszköztárának kritikus elemei. Szabványos módokat biztosítanak a programok közötti interakcióhoz és interfészhez. Például, ha egy weboldalt építesz, amelynek adatbázist kell lekérdeznie, valaki létrehozhatott egy API-t, amelyet használhatsz. Bár sokféle API létezik, az egyik legnépszerűbb a [REST API](https://www.smashingmagazine.com/2018/01/understanding-using-rest-api/).
+
+✅ A 'REST' kifejezés a 'Representational State Transfer' rövidítése, és különböző URL-ek konfigurálásával történő adatlekérést jelent. Végezz egy kis kutatást a fejlesztők számára elérhető API-k különböző típusairól. Melyik formátum tetszik neked?
+
+Fontos dolgokat kell megjegyezni erről a függvényről. Először is, figyeld meg az [`async` kulcsszót](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/async_function). Ha a függvényeidet aszinkron módon írod meg, akkor azok várnak egy művelet, például adat visszaadása befejezésére, mielőtt folytatnák.
+
+Itt egy rövid videó az `async`-ról:
+
+[![Async és Await ígéretek kezelésére](https://img.youtube.com/vi/YwmlRkrxvkk/0.jpg)](https://youtube.com/watch?v=YwmlRkrxvkk "Async és Await ígéretek kezelésére")
+
+> 🎥 Kattints a fenti képre egy videóért az async/await-ról.
+
+Hozz létre egy új függvényt a C02Signal API lekérdezésére:
+
+```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.';
+	}
+}
+```
+
+Ez egy nagy függvény. Mi történik itt?
+
+- a legjobb gyakorlatokat követve az `async` kulcsszót használod, hogy ez a függvény aszinkron módon viselkedjen. A függvény tartalmaz egy `try/catch` blokkot, mivel ígéretet ad vissza, amikor az API adatokat küld. Mivel nincs kontrollod az API válaszának sebessége felett (lehet, hogy egyáltalán nem válaszol!), ezt a bizonytalanságot aszinkron módon kell kezelni.
+- a co2signal API-t kérdezed le, hogy megszerezd a régiód adatait az API kulcsod használatával. Ahhoz, hogy ezt a kulcsot használd, egyfajta hitelesítést kell alkalmaznod a fejléc paramétereiben.
+- amikor az API válaszol, az adatainak különböző elemeit hozzárendeled a képernyő azon részeihez, amelyeket az adatok megjelenítésére állítottál be.
+- ha hiba van, vagy nincs eredmény, hibaüzenetet jelenítesz meg.
+
+✅ Az aszinkron programozási minták használata egy másik nagyon hasznos eszköz a fejlesztői eszköztáradban. Olvass [a különböző módokról](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/async_function), ahogyan ezt a típusú kódot konfigurálhatod.
+
+Gratulálok! Ha build-elsz (`npm run build`) és frissíted a bővítményt az eszközök panelen, működő bővítményed van! Az egyetlen dolog, ami nem működik, az ikon, és ezt a következő leckében fogod kijavítani.
+
+---
+
+## 🚀 Kihívás
+
+Eddig többféle API-t tárgyaltunk ezekben a leckékben. Válassz egy webes API-t, és kutasd fel részletesen, mit kínál. Például nézd meg a böngészőkben elérhető API-kat, mint például a [HTML Drag and Drop API](https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_API). Mi tesz egy API-t nagyszerűvé szerinted?
+
+## Előadás utáni kvíz
+
+[Előadás utáni kvíz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/26)
+
+## Áttekintés és önálló tanulás
+
+Ebben a leckében a LocalStorage-ról és az API-król tanultál, amelyek mind nagyon hasznosak a profi webfejlesztő számára. Gondold át, hogyan működnek együtt ezek a dolgok. Gondold át, hogyan építenél fel egy weboldalt, amely elemeket tárolna, hogy egy API használhassa őket.
+
+## Feladat
+
+[Adoptálj egy API-t](assignment.md)
+
+---
+
+**Felelősség kizárása**:  
+Ez a dokumentum az AI fordítási szolgáltatás [Co-op Translator](https://github.com/Azure/co-op-translator) segítségével lett lefordítva. Bár törekszünk a pontosságra, kérjük, vegye figyelembe, hogy az automatikus fordítások hibákat vagy pontatlanságokat tartalmazhatnak. Az eredeti dokumentum az eredeti nyelvén tekintendő hiteles forrásnak. Kritikus információk esetén javasolt professzionális emberi fordítást igénybe venni. Nem vállalunk felelősséget semmilyen félreértésért vagy téves értelmezésért, amely a fordítás használatából eredhet.
\ No newline at end of file
diff --git a/translations/hu/5-browser-extension/2-forms-browsers-local-storage/assignment.md b/translations/hu/5-browser-extension/2-forms-browsers-local-storage/assignment.md
new file mode 100644
index 00000000..0cf81b53
--- /dev/null
+++ b/translations/hu/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-28T03:51:46+00:00",
+  "source_file": "5-browser-extension/2-forms-browsers-local-storage/assignment.md",
+  "language_code": "hu"
+}
+-->
+# Fogadj örökbe egy API-t
+
+## Útmutató
+
+Az API-kkal nagyon szórakoztató lehet játszani. Itt van egy [lista sok ingyenes API-ról](https://github.com/public-apis/public-apis). Válassz egy API-t, és készíts egy böngészőbővítményt, amely megold egy problémát. Ez lehet egy egészen apró probléma, például hogy nincs elég háziállatos kép (próbáld ki például a [dog CEO API-t](https://dog.ceo/dog-api/)), vagy valami nagyobb - érezd jól magad!
+
+## Értékelési szempontok
+
+| Kritérium | Kiemelkedő                                                                  | Megfelelő                                | Fejlesztésre szorul     |
+| --------- | -------------------------------------------------------------------------- | ---------------------------------------- | ----------------------- |
+|           | Egy teljes böngészőbővítmény került benyújtásra a fenti listából választott API használatával | Egy részleges böngészőbővítmény került benyújtásra | A benyújtott munka hibákat tartalmaz |
+
+---
+
+**Felelősség kizárása**:  
+Ez a dokumentum az AI fordítási szolgáltatás [Co-op Translator](https://github.com/Azure/co-op-translator) segítségével lett lefordítva. Bár törekszünk a pontosságra, kérjük, vegye figyelembe, hogy az automatikus fordítások hibákat vagy pontatlanságokat tartalmazhatnak. Az eredeti dokumentum az eredeti nyelvén tekintendő hiteles forrásnak. Kritikus információk esetén javasolt professzionális emberi fordítást igénybe venni. Nem vállalunk felelősséget semmilyen félreértésért vagy téves értelmezésért, amely a fordítás használatából eredhet.
\ No newline at end of file
diff --git a/translations/hu/5-browser-extension/3-background-tasks-and-performance/README.md b/translations/hu/5-browser-extension/3-background-tasks-and-performance/README.md
new file mode 100644
index 00000000..76cebf92
--- /dev/null
+++ b/translations/hu/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-28T03:42:38+00:00",
+  "source_file": "5-browser-extension/3-background-tasks-and-performance/README.md",
+  "language_code": "hu"
+}
+-->
+# Böngészőbővítmény projekt 3. rész: Ismerd meg a háttérfeladatokat és a teljesítményt
+
+## Előadás előtti kvíz
+
+[Előadás előtti kvíz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/27)
+
+### Bevezetés
+
+Az előző két leckében megtanultad, hogyan készíts egy űrlapot és egy megjelenítési területet az API-ból lekért adatok számára. Ez egy nagyon szokványos módja annak, hogy webes jelenlétet hozz létre az interneten. Még azt is megtanultad, hogyan kezeld az adatok aszinkron lekérését. A böngészőbővítményed már majdnem kész.
+
+Már csak néhány háttérfeladatot kell kezelni, például a bővítmény ikon színének frissítését. Ezért ez egy remek alkalom arra, hogy beszéljünk arról, hogyan kezeli a böngésző az ilyen típusú feladatokat. Gondolkodjunk el ezekről a böngészőfeladatokról a webes eszközeid teljesítményének kontextusában, miközben építed őket.
+
+## Webes teljesítmény alapjai
+
+> "A weboldal teljesítménye két dologról szól: milyen gyorsan töltődik be az oldal, és milyen gyorsan fut rajta a kód." -- [Zack Grossbart](https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/)
+
+Az a téma, hogy hogyan teheted a weboldalaidat villámgyorssá mindenféle eszközön, mindenféle felhasználó számára, mindenféle helyzetben, nem meglepő módon rendkívül kiterjedt. Íme néhány szempont, amit érdemes szem előtt tartani, akár egy szokványos webes projektet, akár egy böngészőbővítményt építesz.
+
+Az első dolog, amit meg kell tenned annak érdekében, hogy biztosítsd, hogy az oldalad hatékonyan működik, az, hogy adatokat gyűjtesz a teljesítményéről. Az első hely, ahol ezt megteheted, a böngésződ fejlesztői eszközei. Edge-ben válaszd ki a "Beállítások és továbbiak" gombot (a három pont ikon a böngésző jobb felső sarkában), majd navigálj a További eszközök > Fejlesztői eszközök menüpontra, és nyisd meg a Teljesítmény lapot. Windows rendszeren a `Ctrl` + `Shift` + `I`, Mac-en pedig az `Option` + `Command` + `I` billentyűkombinációval is megnyithatod a fejlesztői eszközöket.
+
+A Teljesítmény lap tartalmaz egy Profilozó eszközt. Nyiss meg egy weboldalt (próbáld ki például a [https://www.microsoft.com](https://www.microsoft.com/?WT.mc_id=academic-77807-sagibbon) oldalt), és kattints a 'Felvétel' gombra, majd frissítsd az oldalt. Bármikor leállíthatod a felvételt, és megtekintheted azokat a rutinokat, amelyek a 'script', 'render' és 'paint' műveleteket generálják az oldalon:
+
+![Edge profilozó](../../../../translated_images/profiler.5a4a62479c5df01cfec9aab74173dba13f91d2c968e1a1ae434c26165792df15.hu.png)
+
+✅ Látogasd meg a [Microsoft Dokumentációt](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) az Edge Teljesítmény paneljéről
+
+> Tipp: hogy pontos képet kapj az oldalad indítási idejéről, töröld a böngésződ gyorsítótárát
+
+Válassz ki elemeket a profil idővonalából, hogy ráközelíts azokra az eseményekre, amelyek az oldal betöltése közben történnek.
+
+Készíts pillanatképet az oldal teljesítményéről úgy, hogy kiválasztasz egy részt a profil idővonalából, és megnézed az összefoglaló panelt:
+
+![Edge profilozó pillanatkép](../../../../translated_images/snapshot.97750180ebcad73794a3594b36925eb5c8dbaac9e03fec7f9b974188c9ac63c7.hu.png)
+
+Ellenőrizd az Eseménynapló panelt, hogy lássad, van-e olyan esemény, amely több mint 15 ms-ig tartott:
+
+![Edge eseménynapló](../../../../translated_images/log.804026979f3707e00eebcfa028b2b5a88cec6292f858767bb6703afba65a7d9c.hu.png)
+
+✅ Ismerd meg a profilozódat! Nyisd meg a fejlesztői eszközöket ezen az oldalon, és nézd meg, vannak-e szűk keresztmetszetek. Mi a leglassabban betöltődő eszköz? A leggyorsabb?
+
+## Profilozási ellenőrzések
+
+Általánosságban elmondható, hogy vannak bizonyos "problémás területek", amelyeket minden webfejlesztőnek figyelnie kell, amikor oldalt épít, hogy elkerülje a kellemetlen meglepetéseket, amikor eljön az idő a produkciós környezetbe való telepítésre.
+
+**Eszközméretek**: Az internet az elmúlt években "nehezebb" és így lassabb lett. Ennek a súlynak egy része a képek használatával kapcsolatos.
+
+✅ Nézz körül az [Internet Archívumban](https://httparchive.org/reports/page-weight) egy történeti áttekintésért az oldalak súlyáról és egyebekről.
+
+Jó gyakorlat, hogy biztosítsd, hogy a képeid optimalizáltak legyenek, és a megfelelő méretben és felbontásban kerüljenek a felhasználóidhoz.
+
+**DOM bejárások**: A böngészőnek fel kell építenie a Dokumentum Objektum Modelljét az általad írt kód alapján, ezért a jó oldal teljesítmény érdekében érdemes minimalizálni a tageket, csak azt használni és formázni, amire az oldalnak szüksége van. Ehhez kapcsolódóan az oldalhoz tartozó felesleges CSS optimalizálható; például azokat a stílusokat, amelyeket csak egy oldalon kell használni, nem szükséges a fő stíluslapba belefoglalni.
+
+**JavaScript**: Minden JavaScript fejlesztőnek figyelnie kell azokra a 'render-blokkoló' szkriptekre, amelyeket be kell tölteni, mielőtt a DOM többi része bejárható és megjeleníthető lenne a böngészőben. Fontold meg a `defer` használatát az inline szkriptekkel (ahogy a Terrárium modulban is történik).
+
+✅ Próbálj ki néhány oldalt egy [Weboldal sebességteszt weboldalon](https://www.webpagetest.org/), hogy többet megtudj azokról a gyakori ellenőrzésekről, amelyeket az oldal teljesítményének meghatározására végeznek.
+
+Most, hogy van egy elképzelésed arról, hogyan rendereli a böngésző azokat az eszközöket, amelyeket küldesz neki, nézzük meg az utolsó néhány dolgot, amit meg kell tenned a bővítményed befejezéséhez:
+
+### Hozz létre egy színkalkuláló függvényt
+
+A `/src/index.js` fájlban adj hozzá egy `calculateColor()` nevű függvényt a DOM-hoz való hozzáférést biztosító `const` változók sorozata után:
+
+```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 } });
+}
+```
+
+Mi történik itt? Átadsz egy értéket (a szén-dioxid intenzitást) az előző leckében befejezett API-hívásból, majd kiszámítod, hogy az értéke mennyire közel áll a színek tömbjében bemutatott indexhez. Ezután elküldöd ezt a legközelebbi színértéket a chrome runtime-nak.
+
+A chrome.runtime rendelkezik [egy API-val](https://developer.chrome.com/extensions/runtime), amely mindenféle háttérfeladatot kezel, és a bővítményed ezt használja:
+
+> "Használd a chrome.runtime API-t a háttéroldal lekérésére, a manifest részleteinek visszaadására, valamint az alkalmazás vagy bővítmény életciklusában bekövetkező események figyelésére és kezelésére. Ezzel az API-val a relatív URL-eket teljesen kvalifikált URL-ekké is konvertálhatod."
+
+✅ Ha Edge böngészőre fejleszted ezt a bővítményt, meglephet, hogy chrome API-t használsz. Az újabb Edge böngészőverziók a Chromium böngészőmotoron futnak, így kihasználhatod ezeket az eszközöket.
+
+> Megjegyzés: ha böngészőbővítményt szeretnél profilozni, indítsd el a fejlesztői eszközöket magából a bővítményből, mivel az egy külön böngészőpéldányként működik.
+
+### Állíts be egy alapértelmezett ikon színt
+
+Most, az `init()` függvényben állítsd az ikont egy általános zöld színre azáltal, hogy ismét meghívod a chrome `updateIcon` műveletét:
+
+```JavaScript
+chrome.runtime.sendMessage({
+	action: 'updateIcon',
+		value: {
+			color: 'green',
+		},
+});
+```
+
+### Hívd meg a függvényt, hajtsd végre a hívást
+
+Ezután hívd meg az előbb létrehozott függvényt azzal, hogy hozzáadod a C02Signal API által visszaadott ígérethez:
+
+```JavaScript
+//let CO2...
+calculateColor(CO2);
+```
+
+Végül, a `/dist/background.js` fájlban add hozzá a hallgatót ezekhez a háttérfeladat-hívásokhoz:
+
+```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);
+}
+```
+
+Ebben a kódban hozzáadsz egy hallgatót minden olyan üzenethez, amely a háttérfeladat-kezelőhöz érkezik. Ha az 'updateIcon' nevet kapja, akkor a következő kód fut le, hogy a megfelelő színű ikont rajzolja meg a Canvas API segítségével.
+
+✅ A Canvas API-ról többet fogsz tanulni a [Űrjáték leckékben](../../6-space-game/2-drawing-to-canvas/README.md).
+
+Most építsd újra a bővítményedet (`npm run build`), frissítsd és indítsd el a bővítményedet, és figyeld meg, ahogy a szín változik. Jó alkalom mosogatni vagy elintézni valamit? Most már tudod!
+
+Gratulálok, hasznos böngészőbővítményt készítettél, és többet tanultál arról, hogyan működik a böngésző, és hogyan profilozd annak teljesítményét.
+
+---
+
+## 🚀 Kihívás
+
+Vizsgálj meg néhány nyílt forráskódú weboldalt, amelyek már régóta léteznek, és a GitHub történetük alapján próbáld meg meghatározni, hogyan optimalizálták őket az évek során a teljesítmény érdekében, ha egyáltalán. Mi a leggyakoribb probléma?
+
+## Előadás utáni kvíz
+
+[Előadás utáni kvíz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/28)
+
+## Áttekintés és önálló tanulás
+
+Fontold meg, hogy feliratkozol egy [teljesítmény hírlevélre](https://perf.email/)
+
+Vizsgáld meg, hogy a böngészők milyen módon mérik a webes teljesítményt, ha átnézed a teljesítmény lapokat a webes eszközeikben. Találsz jelentős különbségeket?
+
+## Feladat
+
+[Elemezz egy oldalt a teljesítmény szempontjából](assignment.md)
+
+---
+
+**Felelősség kizárása**:  
+Ez a dokumentum az AI fordítási szolgáltatás, a [Co-op Translator](https://github.com/Azure/co-op-translator) segítségével lett lefordítva. Bár törekszünk a pontosságra, kérjük, vegye figyelembe, hogy az automatikus fordítások hibákat vagy pontatlanságokat tartalmazhatnak. Az eredeti dokumentum az eredeti nyelvén tekintendő hiteles forrásnak. Kritikus információk esetén javasolt professzionális emberi fordítást igénybe venni. Nem vállalunk felelősséget semmilyen félreértésért vagy téves értelmezésért, amely a fordítás használatából eredhet.
\ No newline at end of file
diff --git a/translations/hu/5-browser-extension/3-background-tasks-and-performance/assignment.md b/translations/hu/5-browser-extension/3-background-tasks-and-performance/assignment.md
new file mode 100644
index 00000000..17ee8415
--- /dev/null
+++ b/translations/hu/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-28T03:44:43+00:00",
+  "source_file": "5-browser-extension/3-background-tasks-and-performance/assignment.md",
+  "language_code": "hu"
+}
+-->
+# Elemezze egy weboldal teljesítményét
+
+Készítsen részletes jelentést egy weboldalról, amely bemutatja, hol vannak teljesítménybeli problémák. Elemezze, miért lassú az oldal, és mit tehetne annak gyorsítása érdekében. Ne csak a böngésző eszközeire támaszkodjon, hanem végezzen kutatást más eszközökről is, amelyek segíthetnek a jelentés elkészítésében.
+
+## Értékelési szempontok
+
+| Kritérium | Kiemelkedő                                                                                                 | Megfelelő                   | Fejlesztésre szorul           |
+| --------- | ---------------------------------------------------------------------------------------------------------- | --------------------------- | ----------------------------- |
+|           | Részletes jelentés készül, amely nemcsak böngésző eszközökből, hanem harmadik féltől származó eszközökből is merít, ha elérhető | Alapvető jelentés készül    | Minimális jelentés készül     |
+
+---
+
+**Felelősség kizárása**:  
+Ez a dokumentum az AI fordítási szolgáltatás, a [Co-op Translator](https://github.com/Azure/co-op-translator) segítségével lett lefordítva. Bár törekszünk a pontosságra, kérjük, vegye figyelembe, hogy az automatikus fordítások hibákat vagy pontatlanságokat tartalmazhatnak. Az eredeti dokumentum az eredeti nyelvén tekintendő hiteles forrásnak. Kritikus információk esetén javasolt professzionális emberi fordítást igénybe venni. Nem vállalunk felelősséget semmilyen félreértésért vagy téves értelmezésért, amely a fordítás használatából eredhet.
\ No newline at end of file
diff --git a/translations/hu/5-browser-extension/README.md b/translations/hu/5-browser-extension/README.md
new file mode 100644
index 00000000..5de4e822
--- /dev/null
+++ b/translations/hu/5-browser-extension/README.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "b121a279a6ab39878491f3e572673515",
+  "translation_date": "2025-08-28T03:38:42+00:00",
+  "source_file": "5-browser-extension/README.md",
+  "language_code": "hu"
+}
+-->
+# Böngészőbővítmény készítése
+
+A böngészőbővítmények készítése szórakoztató és érdekes módja annak, hogy más szemszögből gondolkodjunk az alkalmazásaink teljesítményéről, miközben egy eltérő típusú webes eszközt hozunk létre. Ez a modul olyan leckéket tartalmaz, amelyek bemutatják, hogyan működnek a böngészők, hogyan lehet böngészőbővítményt telepíteni, űrlapot készíteni, API-t hívni, helyi tárolót használni, valamint hogyan lehet felmérni és javítani a weboldalad teljesítményét.
+
+Egy olyan böngészőbővítményt fogsz készíteni, amely működik Edge, Chrome és Firefox böngészőkben. Ez a bővítmény, amely egy adott feladatra szabott mini weboldalhoz hasonlít, a [C02 Signal API](https://www.co2signal.com) segítségével ellenőrzi egy adott régió villamosenergia-felhasználását és szén-dioxid-intenzitását, majd visszaadja a régió szénlábnyomának értékelését.
+
+Ez a bővítmény ad hoc módon hívható meg a felhasználó által, miután egy API-kulcsot és régiókódot adott meg egy űrlapon. Ezáltal meghatározható a helyi villamosenergia-felhasználás, és olyan adatokat nyújt, amelyek befolyásolhatják a felhasználó villamosenergia-használati döntéseit. Például előnyösebb lehet elhalasztani egy ruhaszárító (egy szén-dioxid-intenzív tevékenység) használatát a régióban tapasztalható magas villamosenergia-felhasználás idején.
+
+### Témakörök
+
+1. [A böngészőről](1-about-browsers/README.md)
+2. [Űrlapok és helyi tároló](2-forms-browsers-local-storage/README.md)
+3. [Háttérfeladatok és teljesítmény](3-background-tasks-and-performance/README.md)
+
+### Köszönetnyilvánítás
+
+![egy zöld böngészőbővítmény](../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.hu.png)
+
+## Köszönetnyilvánítás
+
+A webes szén-dioxid-figyelő ötletét Asim Hussain, a Microsoft Zöld Felhő Advocacy csapatának vezetője és a [Green Principles](https://principles.green/) szerzője ajánlotta. Eredetileg egy [weboldal projektként](https://github.com/jlooper/green) indult.
+
+A böngészőbővítmény struktúráját [Adebola Adeniran COVID bővítménye](https://github.com/onedebos/covtension) inspirálta.
+
+A „pont” ikonrendszer koncepcióját a [Energy Lollipop](https://energylollipop.com/) böngészőbővítmény ikonstruktúrája ihlette, amely a kaliforniai kibocsátásokat követi.
+
+Ezeket a leckéket ♥️-val írta [Jen Looper](https://www.twitter.com/jenlooper).
+
+---
+
+**Felelősség kizárása**:  
+Ez a dokumentum az AI fordítási szolgáltatás [Co-op Translator](https://github.com/Azure/co-op-translator) segítségével lett lefordítva. Bár törekszünk a pontosságra, kérjük, vegye figyelembe, hogy az automatikus fordítások hibákat vagy pontatlanságokat tartalmazhatnak. Az eredeti dokumentum az eredeti nyelvén tekintendő hiteles forrásnak. Kritikus információk esetén javasolt professzionális emberi fordítást igénybe venni. Nem vállalunk felelősséget semmilyen félreértésért vagy téves értelmezésért, amely a fordítás használatából eredhet.
\ No newline at end of file
diff --git a/translations/hu/5-browser-extension/solution/README.md b/translations/hu/5-browser-extension/solution/README.md
new file mode 100644
index 00000000..f0609490
--- /dev/null
+++ b/translations/hu/5-browser-extension/solution/README.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "fab4e6b4f0efcd587a9029d82991f597",
+  "translation_date": "2025-08-28T03:45:39+00:00",
+  "source_file": "5-browser-extension/solution/README.md",
+  "language_code": "hu"
+}
+-->
+# Carbon Trigger böngészőbővítmény: Kész kód
+
+A tmrow CO2 Signal API-ját használva az áramfogyasztás nyomon követésére, készíts egy böngészőbővítményt, amely emlékeztetőt ad a böngésződben arról, hogy mennyire terhelt az áramfogyasztás a régiódban. Az ad hoc használat segít abban, hogy az információk alapján döntéseket hozz a tevékenységeidről.
+
+![bővítmény képernyőkép](../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.hu.png)
+
+## Első lépések
+
+Szükséged lesz a [npm](https://npmjs.com) telepítésére. Töltsd le a kód egy példányát egy mappába a számítógépeden.
+
+Telepítsd az összes szükséges csomagot:
+
+```
+npm install
+```
+
+Építsd meg a bővítményt a webpack segítségével:
+
+```
+npm run build
+```
+
+Edge böngészőn való telepítéshez használd a böngésző jobb felső sarkában található 'három pont' menüt, hogy megtaláld a Bővítmények panelt. Ott válaszd a 'Kicsomagolt betöltése' opciót egy új bővítmény betöltéséhez. A megjelenő ablakban nyisd meg a 'dist' mappát, és a bővítmény betöltődik. A használathoz szükséged lesz egy API kulcsra a CO2 Signal API-hoz ([itt szerezhetsz egyet e-mailben](https://www.co2signal.com/) - add meg az e-mail címedet az oldalon található mezőben), valamint a régiódhoz tartozó [kódra](http://api.electricitymap.org/v3/zones), amely megfelel az [Electricity Map](https://www.electricitymap.org/map) térképének (például Bostonban én az 'US-NEISO' kódot használom).
+
+![telepítés](../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.hu.png)
+
+Miután az API kulcsot és a régiót megadtad a bővítmény felületén, a böngészőbővítmény sávjában lévő színes pontnak meg kell változnia, hogy tükrözze a régiód energiafogyasztását, és iránymutatást adjon arról, hogy milyen energiaigényes tevékenységek lennének megfelelőek számodra. Ennek a 'pont' rendszernek az ötletét a [Energy Lollipop bővítmény](https://energylollipop.com/) adta, amely a kaliforniai kibocsátásokat követi.
+
+---
+
+**Felelősség kizárása**:  
+Ez a dokumentum az AI fordítási szolgáltatás, a [Co-op Translator](https://github.com/Azure/co-op-translator) segítségével került lefordításra. Bár törekszünk a pontosságra, kérjük, vegye figyelembe, hogy az automatikus fordítások hibákat vagy pontatlanságokat tartalmazhatnak. Az eredeti dokumentum az eredeti nyelvén tekintendő hiteles forrásnak. Kritikus információk esetén javasolt professzionális emberi fordítást igénybe venni. Nem vállalunk felelősséget az ebből a fordításból eredő félreértésekért vagy téves értelmezésekért.
\ No newline at end of file
diff --git a/translations/hu/5-browser-extension/solution/translation/README.es.md b/translations/hu/5-browser-extension/solution/translation/README.es.md
new file mode 100644
index 00000000..1c3d9e3a
--- /dev/null
+++ b/translations/hu/5-browser-extension/solution/translation/README.es.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "cbaf73f94a9ab4c680a10ef871e92948",
+  "translation_date": "2025-08-28T03:47:37+00:00",
+  "source_file": "5-browser-extension/solution/translation/README.es.md",
+  "language_code": "hu"
+}
+-->
+# Carbon Trigger böngészőbővítmény: Teljes kód
+
+A tmrow CO2 Signal API-ját használva az áramfogyasztás nyomon követésére, hozzon létre egy böngészőbővítményt, amely közvetlenül a böngészőjében emlékeztetőt ad az Ön régiójának áramfogyasztásáról. Ennek az ad hoc bővítménynek a használata segít döntéseket hozni a tevékenységeiről ezen információk alapján.
+
+![extension screenshot](../../../../../translated_images/extension-screenshot.352c4c3ba54e4041ad2f6af749d562cc5705f527b5826efd53d11c3528f5ae45.hu.png)
+
+## Kezdés
+
+Telepítenie kell a [npm](https://npmjs.com) programot. Töltse le ennek a kódnak egy példányát a számítógépén egy mappába.
+
+Telepítse az összes szükséges csomagot:
+
+```
+npm install
+```
+
+Építse meg a bővítményt a webpack segítségével:
+
+```
+npm run build
+```
+
+Edge böngészőben való telepítéshez használja a böngésző jobb felső sarkában található 'három pont' menüt, hogy megtalálja a Bővítmények panelt. Innen válassza a 'Kicsomagolt betöltése' opciót egy új bővítmény betöltéséhez. Amikor a rendszer kéri, nyissa meg a 'dist' mappát, és a bővítmény betöltődik. A használathoz szüksége lesz egy API kulcsra a CO2 Signal API-hoz ([itt szerezhet egyet e-mailben](https://www.co2signal.com/) - írja be az e-mail címét az oldal mezőjébe), valamint a régiójához tartozó [kódra](http://api.electricitymap.org/v3/zones), amely megfelel az [Electricity Map](https://www.electricitymap.org/map) térképének (például Bostonban én az 'US-NEISO' kódot használom).
+
+![installing](../../../../../translated_images/install-on-edge.8bd0ee3ca7dcda1c5334b5195603a43c864e3b38d088b03d57376d25e77b9459.hu.png)
+
+Miután az API kulcsot és a régiót megadta a bővítmény felületén, a böngésző bővítménysávjában lévő színes pontnak meg kell változnia, hogy tükrözze az Ön régiójának energiafogyasztását, és jelezze, hogy milyen magas energiafogyasztású tevékenységek lennének megfelelőek az Ön számára. Ennek a "pont" rendszernek a koncepcióját a [Energy Lollipop bővítmény](https://energylollipop.com/) adta, amely Kalifornia kibocsátásait mutatja.
+
+---
+
+**Felelősség kizárása**:  
+Ez a dokumentum az AI fordítási szolgáltatás, a [Co-op Translator](https://github.com/Azure/co-op-translator) segítségével lett lefordítva. Bár törekszünk a pontosságra, kérjük, vegye figyelembe, hogy az automatikus fordítások hibákat vagy pontatlanságokat tartalmazhatnak. Az eredeti dokumentum az eredeti nyelvén tekintendő hiteles forrásnak. Kritikus információk esetén javasolt professzionális emberi fordítást igénybe venni. Nem vállalunk felelősséget semmilyen félreértésért vagy téves értelmezésért, amely a fordítás használatából eredhet.
\ No newline at end of file
diff --git a/translations/hu/5-browser-extension/solution/translation/README.fr.md b/translations/hu/5-browser-extension/solution/translation/README.fr.md
new file mode 100644
index 00000000..f1c51717
--- /dev/null
+++ b/translations/hu/5-browser-extension/solution/translation/README.fr.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "9361268ca430b2579375009e1eceb5e5",
+  "translation_date": "2025-08-28T03:48:43+00:00",
+  "source_file": "5-browser-extension/solution/translation/README.fr.md",
+  "language_code": "hu"
+}
+-->
+# Carbon Trigger böngészőbővítmény: Elkészült kód
+
+A tmrow CO2 Signal API-ját használva az áramfogyasztás nyomon követésére hozz létre egy böngészőbővítményt, amely közvetlenül a böngésződben emlékeztet az adott régió áramfogyasztására. Ennek az ad hoc bővítménynek a használata segíthet abban, hogy az információk alapján mérlegeld a tevékenységeidet.
+
+![bővítmény képernyőkép](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.hu.png)
+
+## Kezdés
+
+Szükséged lesz a [npm](https://npmjs.com) telepítésére. Töltsd le a kód egy példányát a számítógéped egy mappájába.
+
+Telepítsd a szükséges csomagokat:
+
+```
+npm install
+```
+
+Fordítsd le a bővítményt a webpack segítségével:
+
+```
+npm run build
+```
+
+Edge böngészőre való telepítéshez használd a böngésző jobb felső sarkában található 'három pont' menüt, hogy megtaláld a Bővítmények panelt. Innen válaszd a 'Kicsomagolt bővítmény betöltése' opciót egy új bővítmény betöltéséhez. A megjelenő ablakban nyisd meg a 'dist' mappát, és a bővítmény betöltődik. A használathoz szükséged lesz egy API kulcsra a CO2 Signal API-hoz ([itt szerezhetsz egyet e-mailben](https://www.co2signal.com/) - add meg az e-mail címedet az oldalon található mezőben), valamint a régiód [kódjára](http://api.electricitymap.org/v3/zones), amely megfelel az [Electricity Map](https://www.electricitymap.org/map) térképének (például Boston esetében az 'US-NEISO' kódot használom).
+
+![telepítés](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.hu.png)
+
+Miután az API kulcsot és a régiót megadtad a bővítmény felületén, a böngésző bővítménysávjában található színes pontnak meg kell változnia, hogy tükrözze a régiód energiafogyasztását, és jelezze, hogy milyen energiaigényes tevékenységek végzése lenne megfelelő. A 'pontok' mögötti koncepciót az [Energy Lollipop bővítmény](https://energylollipop.com/) adta, amely a kaliforniai kibocsátásokat követi.
+
+---
+
+**Felelősség kizárása**:  
+Ez a dokumentum az AI fordítási szolgáltatás, a [Co-op Translator](https://github.com/Azure/co-op-translator) segítségével lett lefordítva. Bár törekszünk a pontosságra, kérjük, vegye figyelembe, hogy az automatikus fordítások hibákat vagy pontatlanságokat tartalmazhatnak. Az eredeti dokumentum az eredeti nyelvén tekintendő hiteles forrásnak. Kritikus információk esetén javasolt professzionális emberi fordítást igénybe venni. Nem vállalunk felelősséget semmilyen félreértésért vagy téves értelmezésért, amely a fordítás használatából eredhet.
\ No newline at end of file
diff --git a/translations/hu/5-browser-extension/solution/translation/README.hi.md b/translations/hu/5-browser-extension/solution/translation/README.hi.md
new file mode 100644
index 00000000..c615bc2c
--- /dev/null
+++ b/translations/hu/5-browser-extension/solution/translation/README.hi.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "dd58ae1b7707034f055718c1b68bc8de",
+  "translation_date": "2025-08-28T03:46:08+00:00",
+  "source_file": "5-browser-extension/solution/translation/README.hi.md",
+  "language_code": "hu"
+}
+-->
+# Carbon Trigger böngészőbővítmény: Teljes kód
+
+A tmrow CO2 Signal API-ját használva az áramfogyasztás nyomon követésére, egy böngészőbővítményt hozunk létre, amely emlékeztetőt ad arról, hogy az Ön régiójában mennyire terhelt az áramhasználat. Ennek a bővítménynek az alkalmi használata segíthet abban, hogy ezen információk alapján döntsön a tevékenységeiről.
+
+![Bővítmény képernyőkép](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.hu.png)
+
+## Kezdés
+
+Először telepítse az [npm](https://npmjs.com) csomagot. Töltse le a kód egy példányát a számítógépére egy mappába.
+
+Telepítse az összes szükséges csomagot:
+
+```
+npm install
+```
+
+Hozza létre a bővítményt a Webpack segítségével:
+
+```
+npm run build
+```
+
+Az Edge böngészőben való telepítéshez használja a böngésző jobb felső sarkában található 'három pont' menüt az Extension Panel megkereséséhez. Ott válassza a 'Load unpacked' opciót egy új bővítmény betöltéséhez. A megjelenő ablakban nyissa meg a 'dist' mappát, és a bővítmény betöltődik. A használathoz szüksége lesz egy CO2 Signal API kulcsra ([e-mailben itt szerezhető be](https://www.co2snal.com/) - adja meg e-mail címét az oldalon található mezőben), valamint [az Ön régiójának kódjára](http://api.electricitymap.org/v3/zones) az [Electricity Map](https://www.electricitymap.org/map) oldalról (például Boston esetében én az 'US-NEISO' kódot használom).
+
+![Telepítés](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.hu.png)
+
+Miután az API kulcsot és a régiót megadta a bővítmény felületén, a böngésző bővítménysávjában megjelenő színes pontnak tükröznie kell az Ön régiójának energiahasználatát, és jeleznie kell, hogy az energiaigényes tevékenységek mennyire megfelelőek az adott időpontban. Ennek a 'pont' rendszernek a koncepcióját a kaliforniai kibocsátásokhoz készült [Energy Lollipop bővítmény](https://energylollipop.com/) inspirálta.
+
+---
+
+**Felelősség kizárása**:  
+Ez a dokumentum az AI fordítási szolgáltatás, a [Co-op Translator](https://github.com/Azure/co-op-translator) segítségével lett lefordítva. Bár törekszünk a pontosságra, kérjük, vegye figyelembe, hogy az automatikus fordítások hibákat vagy pontatlanságokat tartalmazhatnak. Az eredeti dokumentum az eredeti nyelvén tekintendő hiteles forrásnak. Fontos információk esetén javasolt professzionális, emberi fordítást igénybe venni. Nem vállalunk felelősséget semmilyen félreértésért vagy téves értelmezésért, amely a fordítás használatából eredhet.
\ No newline at end of file
diff --git a/translations/hu/5-browser-extension/solution/translation/README.it.md b/translations/hu/5-browser-extension/solution/translation/README.it.md
new file mode 100644
index 00000000..295d0d70
--- /dev/null
+++ b/translations/hu/5-browser-extension/solution/translation/README.it.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "9a6b22a2eff0f499b66236be973b24ad",
+  "translation_date": "2025-08-28T03:46:37+00:00",
+  "source_file": "5-browser-extension/solution/translation/README.it.md",
+  "language_code": "hu"
+}
+-->
+# Carbon Trigger böngészőbővítmény: kezdőkód
+
+A tmrow Signal CO2 API-ját fogjuk használni az áramfogyasztás nyomon követésére, hogy egy böngészőbővítményt hozzunk létre. Ez a bővítmény közvetlenül a böngészőben emlékeztet arra, hogy mennyire terheli az áramfogyasztás a régiódat. Ennek az egyedi bővítménynek a használata segít abban, hogy tevékenységeidet ezek alapján az információk alapján értékeld.
+
+![a bővítmény képernyőképe](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.hu.png)
+
+## Kezdés
+
+Győződj meg róla, hogy az [npm](https://npmjs.com) telepítve van. Töltsd le a kód egy példányát a számítógéped egy mappájába.
+
+Telepítsd a szükséges csomagokat:
+
+```
+npm install
+```
+
+Hozd létre a bővítményt a webpack segítségével:
+
+```
+npm run build
+```
+
+Edge böngészőhöz való telepítéshez használd a böngésző jobb felső sarkában található "három pont" menüt, hogy megtaláld a Bővítmények panelt. Ha még nincs bekapcsolva, kapcsold be a Fejlesztői módot (a bal alsó sarokban). Válaszd a "Kitömörített bővítmény betöltése" opciót egy új bővítmény hozzáadásához. A megjelenő ablakban nyisd meg a "dist" mappát, és a bővítmény betöltődik. A használathoz szükséged lesz egy API kulcsra a CO2 Signal API-hoz (ezt [itt szerezheted meg e-mailben](https://www.co2signal.com/) - add meg az e-mail címedet az oldalon található mezőben), valamint a [régiód kódjára](http://api.electricitymap.org/v3/zones), amely megfelel az [elektromos térkép](https://www.electricitymap.org/map) régiójának (például Boston esetében "US-NEISO").
+
+![telepítés](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.hu.png)
+
+Miután megadtad az API kulcsot és a régiót a bővítmény felületén, a böngésző bővítménysávjában található színes pontnak meg kell változnia, hogy tükrözze a régió energiafogyasztását. Ez egyben útmutatást is ad arról, hogy mely nagy energiaigényű tevékenységek végrehajtása lenne megfelelő. Ennek a "pontozási" rendszernek az alapötletét a [California Energy Lollipop](https://energylollipop.com/) bővítmény biztosította.
+
+---
+
+**Felelősség kizárása**:  
+Ez a dokumentum az AI fordítási szolgáltatás, a [Co-op Translator](https://github.com/Azure/co-op-translator) segítségével lett lefordítva. Bár törekszünk a pontosságra, kérjük, vegye figyelembe, hogy az automatikus fordítások hibákat vagy pontatlanságokat tartalmazhatnak. Az eredeti dokumentum az eredeti nyelvén tekintendő hiteles forrásnak. Kritikus információk esetén javasolt professzionális emberi fordítást igénybe venni. Nem vállalunk felelősséget semmilyen félreértésért vagy téves értelmezésért, amely a fordítás használatából eredhet.
\ No newline at end of file
diff --git a/translations/hu/5-browser-extension/solution/translation/README.ja.md b/translations/hu/5-browser-extension/solution/translation/README.ja.md
new file mode 100644
index 00000000..888547a5
--- /dev/null
+++ b/translations/hu/5-browser-extension/solution/translation/README.ja.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "3f5e6821e0febccfc5d05e7c944d9e3d",
+  "translation_date": "2025-08-28T03:47:06+00:00",
+  "source_file": "5-browser-extension/solution/translation/README.ja.md",
+  "language_code": "hu"
+}
+-->
+# Carbon Trigger böngészőbővítmény: Kész kód
+
+Építs egy böngészőbővítményt, amely a tmrow CO2 Signal API-t használja az energiafogyasztás nyomon követésére, és emlékeztetőként megjeleníti, hogy a régiódban mennyire magas az energiafogyasztás. Ezt a bővítményt ad hoc módon használhatod, hogy az információk alapján dönts a tevékenységeidről.
+
+![extension screenshot](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.hu.png)
+
+## Kezdés
+
+Szükséged lesz az [npm](https://npmjs.com) telepítésére. Töltsd le a kód másolatát egy mappába a számítógépeden.
+
+Telepítsd az összes szükséges csomagot.
+
+```
+npm install
+```
+
+Építsd meg a bővítményt a webpack segítségével.
+
+```
+npm run build
+```
+
+Edge böngészőre való telepítéshez keresd meg a böngésző jobb felső sarkában található „három pont” menüben az „Extensions” panelt. Ott válaszd a „Load Unpacked” opciót, hogy betöltsd az új bővítményt. A megjelenő ablakban nyisd meg a „dist” mappát, és a bővítmény betöltődik. A használathoz szükséged lesz a CO2 Signal API API-kulcsára ([itt szerezhetsz egyet e-mailben](https://www.co2signal.com/) - írd be az e-mail címedet az oldalon található mezőbe), valamint a régiódnak megfelelő [kódra](http://api.electricitymap.org/v3/zones) az [Electricity Map](https://www.electricitymap.org/map) alapján (például Boston esetében 'US-NEISO').
+
+![installing](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.hu.png)
+
+Miután megadtad az API-kulcsot és a régiót a bővítmény felületén, a böngésző bővítménysávjában megjelenő színes pont változni fog, tükrözve a régiód energiafogyasztását. Ez segít eldönteni, hogy milyen energiaigényes tevékenységeket érdemes végezni. Ennek a „pont” rendszernek az ötletét a kaliforniai kibocsátásokhoz készült [Energy Lollipop bővítmény](https://energylollipop.com/) inspirálta.
+
+---
+
+**Felelősség kizárása**:  
+Ez a dokumentum az AI fordítási szolgáltatás, a [Co-op Translator](https://github.com/Azure/co-op-translator) segítségével lett lefordítva. Bár törekszünk a pontosságra, kérjük, vegye figyelembe, hogy az automatikus fordítások hibákat vagy pontatlanságokat tartalmazhatnak. Az eredeti dokumentum az eredeti nyelvén tekintendő hiteles forrásnak. Kritikus információk esetén javasolt professzionális emberi fordítást igénybe venni. Nem vállalunk felelősséget semmilyen félreértésért vagy téves értelmezésért, amely a fordítás használatából eredhet.
\ No newline at end of file
diff --git a/translations/hu/5-browser-extension/solution/translation/README.ms.md b/translations/hu/5-browser-extension/solution/translation/README.ms.md
new file mode 100644
index 00000000..d10bc4dd
--- /dev/null
+++ b/translations/hu/5-browser-extension/solution/translation/README.ms.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "21b364c158c8e4f698de65eeac16c9fe",
+  "translation_date": "2025-08-28T03:48:11+00:00",
+  "source_file": "5-browser-extension/solution/translation/README.ms.md",
+  "language_code": "hu"
+}
+-->
+# Carbon Trigger Böngészőbővítmény: Teljes Kód
+
+A tmrow CO2 Signal API használatával nyomon követheted az áramfogyasztást, és létrehozhatsz egy böngészőbővítményt, amely figyelmeztetéseket ad a böngésződben arról, hogy mennyire terhelt az adott régió áramfogyasztása. Ennek a bővítménynek a használata segíthet abban, hogy tevékenységeidet ezen információk alapján mérlegeld.
+
+![böngészőbővítmény képernyőképe](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.hu.png)
+
+## Kezdjük innen
+
+Először telepítened kell az [npm](https://npmjs.com) alkalmazást. Töltsd le ennek a kódnak egy példányát a számítógéped egy mappájába.
+
+Telepítsd az összes szükséges csomagot:
+
+```
+npm install
+```
+
+Építsd meg a bővítményt a webpack segítségével:
+
+```
+npm run build
+```
+
+Edge böngészőben való telepítéshez használd a böngésző jobb felső sarkában található 'három pont' menüt, hogy megtaláld a Bővítmények panelt. Ott válaszd a 'Load Unpacked' opciót, hogy betöltsd az új bővítményt. Nyisd meg a 'dist' mappát a kérésre, és a bővítmény betöltődik. A használathoz szükséged lesz egy API kulcsra a CO2 Signal API-hoz ([itt szerezhetsz egyet e-mailben](https://www.co2signal.com/) - írd be az e-mail címedet az oldalon található mezőbe), valamint a régiód [kódjára](http://api.electricitymap.org/v3/zones), amely megfelel az [Electricity Map](https://www.electricitymap.org/map) térképének (például Bostonban én az 'US-NEISO' kódot használom).
+
+![letöltés folyamatban](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.hu.png)
+
+Miután az API kulcsot és a régiót megadtad a bővítmény felületén, a böngészőbővítmény sávjában lévő színes pont megváltozik, hogy tükrözze a régió energiafogyasztását, és útmutatást adjon arról, hogy milyen tevékenységek végezhetők az adott időszakban. Ennek a 'pont' rendszernek az ötletét a [Lollipop Energy böngészőbővítmény](https://energylollipop.com/) adta, amelyet Kalifornia kibocsátásaihoz fejlesztettek ki.
+
+---
+
+**Felelősség kizárása**:  
+Ez a dokumentum az AI fordítási szolgáltatás, a [Co-op Translator](https://github.com/Azure/co-op-translator) segítségével lett lefordítva. Bár törekszünk a pontosságra, kérjük, vegye figyelembe, hogy az automatikus fordítások hibákat vagy pontatlanságokat tartalmazhatnak. Az eredeti dokumentum az eredeti nyelvén tekintendő hiteles forrásnak. Kritikus információk esetén javasolt professzionális emberi fordítást igénybe venni. Nem vállalunk felelősséget semmilyen félreértésért vagy téves értelmezésért, amely a fordítás használatából eredhet.
\ No newline at end of file
diff --git a/translations/hu/5-browser-extension/start/README.md b/translations/hu/5-browser-extension/start/README.md
new file mode 100644
index 00000000..0d656cbd
--- /dev/null
+++ b/translations/hu/5-browser-extension/start/README.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "26fd39046d264ba185dcb086d3a8cf3e",
+  "translation_date": "2025-08-28T03:45:07+00:00",
+  "source_file": "5-browser-extension/start/README.md",
+  "language_code": "hu"
+}
+-->
+# Carbon Trigger böngészőbővítmény: Kezdő kód
+
+A tmrow CO2 Signal API-ját használva követheted az áramfogyasztást, és készíthetsz egy böngészőbővítményt, amely emlékeztetőt ad a böngésződben arról, hogy mennyire terhelt a régiód áramhasználata. Az ilyen jellegű bővítmény segíthet abban, hogy az információk alapján jobban megfontold a tevékenységeidet.
+
+![bővítmény képernyőkép](../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.hu.png)
+
+## Első lépések
+
+Szükséged lesz a [npm](https://npmjs.com) telepítésére. Töltsd le a kód egy példányát egy mappába a számítógépeden.
+
+Telepítsd a szükséges csomagokat:
+
+```
+npm install
+```
+
+Építsd meg a bővítményt a webpack segítségével:
+
+```
+npm run build
+```
+
+Edge böngészőn való telepítéshez használd a böngésző jobb felső sarkában található 'három pont' menüt, hogy megtaláld a Bővítmények panelt. Ott válaszd a 'Betöltés csomagolatlanul' opciót, hogy új bővítményt tölts be. A megjelenő ablakban nyisd meg a 'dist' mappát, és a bővítmény betöltődik. Használatához szükséged lesz egy API kulcsra a CO2 Signal API-hoz ([itt szerezhetsz egyet e-mailben](https://www.co2signal.com/) - add meg az e-mail címedet az oldalon található mezőben), valamint a régiódhoz tartozó [kódra](http://api.electricitymap.org/v3/zones), amely megfelel az [Electricity Map](https://www.electricitymap.org/map) térképének (például Bostonban én az 'US-NEISO' kódot használom).
+
+![telepítés](../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.hu.png)
+
+Miután az API kulcsot és a régiót megadtad a bővítmény felületén, a böngészőbővítmény sávjában lévő színes pontnak meg kell változnia, hogy tükrözze a régiód energiahasználatát, és iránymutatást adjon arról, hogy milyen energiaigényes tevékenységek lennének megfelelőek számodra. Ennek a 'pont' rendszernek az ötletét a [Energy Lollipop bővítmény](https://energylollipop.com/) adta, amely a kaliforniai kibocsátásokat követi.
+
+---
+
+**Felelősség kizárása**:  
+Ez a dokumentum az AI fordítási szolgáltatás [Co-op Translator](https://github.com/Azure/co-op-translator) segítségével lett lefordítva. Bár törekszünk a pontosságra, kérjük, vegye figyelembe, hogy az automatikus fordítások hibákat vagy pontatlanságokat tartalmazhatnak. Az eredeti dokumentum az eredeti nyelvén tekintendő hiteles forrásnak. Kritikus információk esetén javasolt professzionális emberi fordítást igénybe venni. Nem vállalunk felelősséget semmilyen félreértésért vagy téves értelmezésért, amely a fordítás használatából eredhet.
\ No newline at end of file
diff --git a/translations/hu/6-space-game/1-introduction/README.md b/translations/hu/6-space-game/1-introduction/README.md
new file mode 100644
index 00000000..d4994482
--- /dev/null
+++ b/translations/hu/6-space-game/1-introduction/README.md
@@ -0,0 +1,238 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "d9da6dc61fb712b29f65e108c79b8a5d",
+  "translation_date": "2025-08-28T04:02:39+00:00",
+  "source_file": "6-space-game/1-introduction/README.md",
+  "language_code": "hu"
+}
+-->
+# Űrjáték készítése 1. rész: Bevezetés
+
+![video](../../../../6-space-game/images/pewpew.gif)
+
+## Előadás előtti kvíz
+
+[Előadás előtti kvíz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/29)
+
+### Öröklődés és kompozíció a játékfejlesztésben
+
+Korábbi leckékben nem volt szükség az alkalmazások tervezési architektúrájának mélyebb átgondolására, mivel a projektek nagyon kis méretűek voltak. Azonban, ahogy az alkalmazások mérete és összetettsége növekszik, az architekturális döntések egyre fontosabbá válnak. Két fő megközelítés létezik nagyobb alkalmazások létrehozására JavaScriptben: *kompozíció* vagy *öröklődés*. Mindkettőnek vannak előnyei és hátrányai, de nézzük meg őket egy játék kontextusában.
+
+✅ Az egyik leghíresebb programozási könyv a [tervezési mintákról](https://en.wikipedia.org/wiki/Design_Patterns) szól.
+
+Egy játékban vannak `játékobjektumok`, amelyek a képernyőn létező objektumok. Ez azt jelenti, hogy van helyük egy derékszögű koordináta-rendszerben, amelyet egy `x` és `y` koordináta jellemez. Ahogy fejleszted a játékot, észre fogod venni, hogy minden játékobjektum rendelkezik egy standard tulajdonsággal, amely minden játékban közös, nevezetesen olyan elemekkel, amelyek:
+
+- **helyalapúak** A legtöbb, ha nem minden, játékelem helyalapú. Ez azt jelenti, hogy van helyük, egy `x` és `y`.
+- **mozgathatóak** Ezek olyan objektumok, amelyek új helyre tudnak mozogni. Ez általában egy hős, egy szörny vagy egy NPC (nem játékos karakter), de például nem egy statikus objektum, mint egy fa.
+- **önmegsemmisítőek** Ezek az objektumok csak egy meghatározott ideig léteznek, mielőtt törlésre kerülnek. Általában ezt egy `halott` vagy `megsemmisült` logikai érték jelzi, amely azt mutatja a játékmotornak, hogy ezt az objektumot már nem kell megjeleníteni.
+- **lehűlési idővel rendelkeznek** A 'lehűlési idő' tipikus tulajdonság a rövid életű objektumok között. Egy tipikus példa egy szövegrészlet vagy grafikai effekt, mint például egy robbanás, amelyet csak néhány milliszekundumig kell látni.
+
+✅ Gondolj egy játékra, mint például a Pac-Man. Fel tudod ismerni a fent felsorolt négy objektumtípust ebben a játékban?
+
+### Viselkedés kifejezése
+
+Minden, amit fent leírtunk, olyan viselkedés, amelyet a játékobjektumok birtokolhatnak. Hogyan kódoljuk ezeket? Ezt a viselkedést osztályokhoz vagy objektumokhoz társított metódusokként fejezhetjük ki.
+
+**Osztályok**
+
+Az ötlet az, hogy `osztályokat` használjunk az `öröklődéssel` együtt, hogy egy bizonyos viselkedést hozzáadjunk egy osztályhoz.
+
+✅ Az öröklődés egy fontos fogalom, amit érdemes megérteni. Tudj meg többet az [MDN öröklődésről szóló cikkéből](https://developer.mozilla.org/docs/Web/JavaScript/Inheritance_and_the_prototype_chain).
+
+Kód formájában kifejezve egy játékobjektum általában így nézhet ki:
+
+```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();
+```
+
+✅ Szánj néhány percet arra, hogy újragondolj egy Pac-Man hőst (például Inky, Pinky vagy Blinky), és hogyan lehetne JavaScriptben megírni.
+
+**Kompozíció**
+
+Az objektumöröklődés kezelésének másik módja a *kompozíció* használata. Ekkor az objektumok így fejezik ki viselkedésüket:
+
+```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'); 
+```
+
+**Melyik mintát válasszam?**
+
+Rajtatok múlik, melyik mintát választjátok. A JavaScript mindkét paradigmát támogatja.
+
+--
+
+Egy másik, játékfejlesztésben gyakori minta a játék felhasználói élményének és teljesítményének kezelésére szolgál.
+
+## Pub/sub minta
+
+✅ A Pub/Sub jelentése 'publish-subscribe' (közzététel-feliratkozás)
+
+Ez a minta azt az elképzelést valósítja meg, hogy az alkalmazás különböző részei ne ismerjék egymást. Miért van ez így? Ezáltal sokkal könnyebb átlátni, mi történik általánosságban, ha a különböző részek el vannak választva. Emellett könnyebb hirtelen megváltoztatni a viselkedést, ha szükséges. Hogyan érhetjük ezt el? Néhány fogalom bevezetésével:
+
+- **üzenet**: Az üzenet általában egy szöveges karakterlánc, amelyhez opcionálisan egy adatcsomag (payload) társul, amely tisztázza, miről szól az üzenet. Egy tipikus üzenet egy játékban lehet például `KEY_PRESSED_ENTER`.
+- **közzétevő**: Ez az elem *közzétesz* egy üzenetet, és elküldi azt minden feliratkozónak.
+- **feliratkozó**: Ez az elem *figyel* bizonyos üzenetekre, és valamilyen feladatot hajt végre az üzenet fogadásának eredményeként, például lézert lő ki.
+
+A megvalósítás mérete kicsi, de nagyon erős minta. Így lehet megvalósítani:
+
+```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))
+    }
+  }
+}
+
+```
+
+A fenti kódot használva létrehozhatunk egy nagyon kicsi implementációt:
+
+```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)
+  }
+});
+```
+
+A fentiekben összekapcsolunk egy billentyűzet eseményt, `ArrowLeft`, és elküldjük a `HERO_MOVE_LEFT` üzenetet. Figyelünk erre az üzenetre, és ennek eredményeként mozgatjuk a `hőst`. Ennek a mintának az ereje abban rejlik, hogy az eseményfigyelő és a hős nem ismerik egymást. Át lehet térképezni az `ArrowLeft`-et az `A` billentyűre. Emellett lehetséges valami teljesen mást csinálni az `ArrowLeft`-re, ha néhány módosítást végzünk az eventEmitter `on` függvényében:
+
+```javascript
+eventEmitter.on(Messages.HERO_MOVE_LEFT, () => {
+  hero.move(5,0);
+});
+```
+
+Ahogy a játék bonyolultabbá válik, ez a minta ugyanazon a komplexitási szinten marad, és a kód tiszta marad. Nagyon ajánlott ezt a mintát alkalmazni.
+
+---
+
+## 🚀 Kihívás
+
+Gondold át, hogyan javíthatja a pub-sub minta egy játékot. Mely részeknek kellene eseményeket kibocsátaniuk, és hogyan kellene a játéknak reagálnia rájuk? Most itt az alkalom, hogy kreatív legyél, és gondolj egy új játékra, valamint arra, hogyan viselkednének annak részei.
+
+## Előadás utáni kvíz
+
+[Előadás utáni kvíz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/30)
+
+## Áttekintés és önálló tanulás
+
+Tudj meg többet a Pub/Sub-ról [olvasd el róla](https://docs.microsoft.com/azure/architecture/patterns/publisher-subscriber/?WT.mc_id=academic-77807-sagibbon).
+
+## Feladat
+
+[Mock up egy játékot](assignment.md)
+
+---
+
+**Felelősség kizárása**:  
+Ez a dokumentum az AI fordítási szolgáltatás, a [Co-op Translator](https://github.com/Azure/co-op-translator) segítségével lett lefordítva. Bár törekszünk a pontosságra, kérjük, vegye figyelembe, hogy az automatikus fordítások hibákat vagy pontatlanságokat tartalmazhatnak. Az eredeti dokumentum az eredeti nyelvén tekintendő hiteles forrásnak. Kritikus információk esetén javasolt professzionális emberi fordítást igénybe venni. Nem vállalunk felelősséget semmilyen félreértésért vagy téves értelmezésért, amely a fordítás használatából eredhet.
\ No newline at end of file
diff --git a/translations/hu/6-space-game/1-introduction/assignment.md b/translations/hu/6-space-game/1-introduction/assignment.md
new file mode 100644
index 00000000..2ebb900d
--- /dev/null
+++ b/translations/hu/6-space-game/1-introduction/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "009bdedee9cc82988264be8cb31f9bf4",
+  "translation_date": "2025-08-28T04:03:36+00:00",
+  "source_file": "6-space-game/1-introduction/assignment.md",
+  "language_code": "hu"
+}
+-->
+# Készíts egy játékot
+
+## Útmutató
+
+Használd a leckében található kódmintákat, hogy megalkoss egy olyan játékot, amit szívesen játszol. Egyszerű játéknak kell lennie, de a cél az, hogy vagy az osztály- vagy a kompozíciós mintát, valamint a pub/sub mintát alkalmazd, hogy bemutasd, hogyan indulhat el egy játék. Légy kreatív!
+
+## Értékelési szempontok
+
+| Kritérium | Kiemelkedő                                             | Megfelelő                                             | Fejlesztésre szoruló                               |
+| --------- | ------------------------------------------------------ | ---------------------------------------------------- | -------------------------------------------------- |
+|           | Három elem van elhelyezve a képernyőn és manipulálva   | Két elem van elhelyezve a képernyőn és manipulálva   | Egy elem van elhelyezve a képernyőn és manipulálva |
+
+---
+
+**Felelősség kizárása**:  
+Ez a dokumentum az AI fordítási szolgáltatás [Co-op Translator](https://github.com/Azure/co-op-translator) segítségével lett lefordítva. Bár törekszünk a pontosságra, kérjük, vegye figyelembe, hogy az automatikus fordítások hibákat vagy pontatlanságokat tartalmazhatnak. Az eredeti dokumentum az eredeti nyelvén tekintendő hiteles forrásnak. Kritikus információk esetén javasolt professzionális emberi fordítást igénybe venni. Nem vállalunk felelősséget semmilyen félreértésért vagy téves értelmezésért, amely a fordítás használatából eredhet.
\ No newline at end of file
diff --git a/translations/hu/6-space-game/2-drawing-to-canvas/README.md b/translations/hu/6-space-game/2-drawing-to-canvas/README.md
new file mode 100644
index 00000000..5bbf7a62
--- /dev/null
+++ b/translations/hu/6-space-game/2-drawing-to-canvas/README.md
@@ -0,0 +1,230 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "41be8d35e7f30aa9dad10773c35e89c4",
+  "translation_date": "2025-08-28T03:59:10+00:00",
+  "source_file": "6-space-game/2-drawing-to-canvas/README.md",
+  "language_code": "hu"
+}
+-->
+# Űrjáték készítése 2. rész: Hős és szörnyek rajzolása a vászonra
+
+## Előadás előtti kvíz
+
+[Előadás előtti kvíz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/31)
+
+## A vászon (Canvas)
+
+A vászon egy HTML elem, amely alapértelmezetten nem tartalmaz semmilyen tartalmat; egy üres lap. Neked kell tartalommal megtöltened, azaz rajzolnod rá.
+
+✅ Olvass [többet a Canvas API-ról](https://developer.mozilla.org/docs/Web/API/Canvas_API) az MDN-en.
+
+Általában így deklaráljuk, az oldal törzsének részeként:
+
+```html
+<canvas id="myCanvas" width="200" height="100"></canvas>
+```
+
+A fenti példában beállítjuk az `id`, `width` és `height` értékeket.
+
+- `id`: ezt állítsd be, hogy hivatkozni tudj rá, amikor interakcióba lépsz vele.
+- `width`: ez az elem szélessége.
+- `height`: ez az elem magassága.
+
+## Egyszerű geometriai alakzatok rajzolása
+
+A vászon egy derékszögű koordináta-rendszert használ a rajzoláshoz. Ezért x- és y-tengelyeket használ annak kifejezésére, hogy valami hol helyezkedik el. A `0,0` hely a bal felső sarok, míg a jobb alsó sarok az, amit a vászon SZÉLESSÉGÉNEK és MAGASSÁGÁNAK állítottál be.
+
+![a vászon rácsa](../../../../translated_images/canvas_grid.5f209da785ded492a01ece440e3032afe51efa500cc2308e5ea4252487ceaf0b.hu.png)  
+> Kép forrása: [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes)
+
+Ahhoz, hogy rajzolni tudj a vászon elemre, a következő lépéseket kell végrehajtanod:
+
+1. **Szerezz egy hivatkozást** a vászon elemre.
+2. **Szerezz egy hivatkozást** a vászon elemhez tartozó kontextus elemre.
+3. **Hajts végre egy rajzolási műveletet** a kontextus elem segítségével.
+
+A fenti lépésekhez tartozó kód általában így néz ki:
+
+```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
+```
+
+✅ A Canvas API főként 2D alakzatokra fókuszál, de 3D elemeket is rajzolhatsz egy weboldalra; ehhez például a [WebGL API-t](https://developer.mozilla.org/docs/Web/API/WebGL_API) használhatod.
+
+A Canvas API-val rengeteg dolgot rajzolhatsz, például:
+
+- **Geometriai alakzatokat**: már megmutattuk, hogyan lehet téglalapot rajzolni, de ennél sokkal többet is lehet.
+- **Szöveget**: bármilyen betűtípussal és színnel rajzolhatsz szöveget.
+- **Képeket**: például .jpg vagy .png formátumú képeket is megjeleníthetsz.
+
+✅ Próbáld ki! Már tudod, hogyan kell téglalapot rajzolni, meg tudsz rajzolni egy kört is az oldalon? Nézd meg néhány érdekes Canvas rajzot a CodePen-en. Itt van egy [különösen lenyűgöző példa](https://codepen.io/dissimulate/pen/KrAwx).
+
+## Kép eszköz betöltése és megjelenítése
+
+Egy kép eszközt úgy tölthetsz be, hogy létrehozol egy `Image` objektumot, és beállítod a `src` tulajdonságát. Ezután figyelned kell a `load` eseményt, hogy tudd, mikor áll készen a használatra. A kód így néz ki:
+
+### Eszköz betöltése
+
+```javascript
+const img = new Image();
+img.src = 'path/to/my/image.png';
+img.onload = () => {
+  // image loaded and ready to be used
+}
+```
+
+### Eszköz betöltési minta
+
+Ajánlott a fentieket egy olyan szerkezetbe csomagolni, mint az alábbi, hogy könnyebb legyen használni, és csak akkor próbálj manipulálni vele, amikor teljesen betöltődött:
+
+```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')
+}
+
+```
+
+Ahhoz, hogy játékeszközöket rajzolj a képernyőre, a kódod így nézhet ki:
+
+```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);
+}
+```
+
+## Most kezdheted el a játékod építését
+
+### Mit kell építeni
+
+Egy weboldalt kell készítened egy vászon elemmel. A vászonnak egy fekete képernyőt kell megjelenítenie `1024*768` méretben. Két képet biztosítottunk számodra:
+
+- Hős hajó
+
+   ![Hős hajó](../../../../translated_images/player.dd24c1afa8c71e9b82b2958946d4bad13308681392d4b5ddcc61a0e818ef8088.hu.png)
+
+- 5*5 szörny
+
+   ![Szörny hajó](../../../../translated_images/enemyShip.5df2a822c16650c2fb3c06652e8ec8120cdb9122a6de46b9a1a56d54db22657f.hu.png)
+
+### Ajánlott lépések a fejlesztés megkezdéséhez
+
+Keresd meg a `your-work` almappában létrehozott fájlokat. Ezeknek a következőket kell tartalmazniuk:
+
+```bash
+-| assets
+  -| enemyShip.png
+  -| player.png
+-| index.html
+-| app.js
+-| package.json
+```
+
+Nyisd meg ennek a mappának a másolatát a Visual Studio Code-ban. Helyi fejlesztési környezetet kell beállítanod, lehetőleg Visual Studio Code-dal, NPM-mel és Node-dal telepítve. Ha még nincs `npm` telepítve a számítógépeden, [itt van, hogyan teheted meg](https://www.npmjs.com/get-npm).
+
+Indítsd el a projektedet úgy, hogy navigálsz a `your_work` mappába:
+
+```bash
+cd your-work
+npm start
+```
+
+A fenti parancs egy HTTP szervert indít el a `http://localhost:5000` címen. Nyiss meg egy böngészőt, és írd be ezt a címet. Egyelőre egy üres oldal jelenik meg, de ez hamarosan megváltozik.
+
+> Megjegyzés: a képernyőn történő változások megtekintéséhez frissítsd a böngészőt.
+
+### Kód hozzáadása
+
+Add hozzá a szükséges kódot a `your-work/app.js` fájlhoz az alábbiak megoldásához:
+
+1. **Rajzolj** egy vásznat fekete háttérrel  
+   > Tipp: adj hozzá két sort a megfelelő TODO alá az `/app.js` fájlban, beállítva a `ctx` elemet feketére, a bal felső koordinátákat 0,0-ra, a magasságot és szélességet pedig a vászon méretéhez igazítva.
+2. **Töltsd be** a textúrákat  
+   > Tipp: add hozzá a játékos és az ellenség képeit az `await loadTexture` használatával, és add meg a kép elérési útját. Egyelőre még nem fogod látni őket a képernyőn!
+3. **Rajzold meg** a hőst a képernyő közepén, az alsó felében  
+   > Tipp: használd a `drawImage` API-t a heroImg képernyőre rajzolásához, beállítva a `canvas.width / 2 - 45` és `canvas.height - canvas.height / 4)` értékeket.
+4. **Rajzolj** 5*5 szörnyet  
+   > Tipp: Most már kikommentelheted a kódot, hogy az ellenségeket a képernyőre rajzolja. Ezután menj a `createEnemies` függvényhez, és építsd ki.
+
+   Először állíts be néhány konstansot:
+
+    ```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;
+    ```
+
+    majd hozz létre egy ciklust, amely az ellenségek tömbjét rajzolja a képernyőre:
+
+    ```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);
+        }
+      }
+    ```
+
+## Eredmény
+
+A kész eredménynek így kell kinéznie:
+
+![Fekete képernyő hőssel és 5*5 szörnnyel](../../../../translated_images/partI-solution.36c53b48c9ffae2a5e15496b23b604ba5393433e4bf91608a7a0a020eb7a2691.hu.png)
+
+## Megoldás
+
+Próbáld meg először magad megoldani, de ha elakadsz, nézd meg a [megoldást](../../../../6-space-game/2-drawing-to-canvas/solution/app.js).
+
+---
+
+## 🚀 Kihívás
+
+Megtanultál rajzolni a 2D-re fókuszáló Canvas API-val; nézd meg a [WebGL API-t](https://developer.mozilla.org/docs/Web/API/WebGL_API), és próbálj meg egy 3D objektumot rajzolni.
+
+## Előadás utáni kvíz
+
+[Előadás utáni kvíz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/32)
+
+## Áttekintés és önálló tanulás
+
+Tudj meg többet a Canvas API-ról, ha [elolvasod róla](https://developer.mozilla.org/docs/Web/API/Canvas_API).
+
+## Feladat
+
+[Játssz a Canvas API-val](assignment.md)
+
+---
+
+**Felelősség kizárása**:  
+Ez a dokumentum az AI fordítási szolgáltatás, a [Co-op Translator](https://github.com/Azure/co-op-translator) segítségével lett lefordítva. Bár törekszünk a pontosságra, kérjük, vegye figyelembe, hogy az automatikus fordítások hibákat vagy pontatlanságokat tartalmazhatnak. Az eredeti dokumentum az eredeti nyelvén tekintendő hiteles forrásnak. Kritikus információk esetén javasolt professzionális emberi fordítást igénybe venni. Nem vállalunk felelősséget semmilyen félreértésért vagy téves értelmezésért, amely a fordítás használatából eredhet.
\ No newline at end of file
diff --git a/translations/hu/6-space-game/2-drawing-to-canvas/assignment.md b/translations/hu/6-space-game/2-drawing-to-canvas/assignment.md
new file mode 100644
index 00000000..42ae9007
--- /dev/null
+++ b/translations/hu/6-space-game/2-drawing-to-canvas/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "ca1cf78a4c60df77ab32a154ec024d7f",
+  "translation_date": "2025-08-28T04:00:10+00:00",
+  "source_file": "6-space-game/2-drawing-to-canvas/assignment.md",
+  "language_code": "hu"
+}
+-->
+# Játssz a Canvas API-val
+
+## Útmutató
+
+Válassz ki egy elemet a Canvas API-ból, és alkoss valami érdekeset köré. Tudsz egy kis galaxist létrehozni ismétlődő csillagokból? Tudsz egy érdekes textúrát készíteni színes vonalakból? Inspirációért nézz körül a CodePen-en (de ne másolj).
+
+## Értékelési szempontok
+
+| Kritérium | Kiemelkedő                                                | Megfelelő                          | Fejlesztésre szorul   |
+| --------- | --------------------------------------------------------- | ---------------------------------- | --------------------- |
+|           | A beküldött kód érdekes textúrát vagy formát mutat        | A kód be van küldve, de nem fut    | A kód nincs beküldve |
+
+---
+
+**Felelősség kizárása**:  
+Ez a dokumentum az AI fordítási szolgáltatás [Co-op Translator](https://github.com/Azure/co-op-translator) segítségével lett lefordítva. Bár törekszünk a pontosságra, kérjük, vegye figyelembe, hogy az automatikus fordítások hibákat vagy pontatlanságokat tartalmazhatnak. Az eredeti dokumentum az eredeti nyelvén tekintendő hiteles forrásnak. Kritikus információk esetén javasolt professzionális emberi fordítást igénybe venni. Nem vállalunk felelősséget semmilyen félreértésért vagy téves értelmezésért, amely a fordítás használatából eredhet.
\ No newline at end of file
diff --git a/translations/hu/6-space-game/3-moving-elements-around/README.md b/translations/hu/6-space-game/3-moving-elements-around/README.md
new file mode 100644
index 00000000..d75cd40e
--- /dev/null
+++ b/translations/hu/6-space-game/3-moving-elements-around/README.md
@@ -0,0 +1,400 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "23f088add24f0f1fa51014a9e27ea280",
+  "translation_date": "2025-08-28T03:52:56+00:00",
+  "source_file": "6-space-game/3-moving-elements-around/README.md",
+  "language_code": "hu"
+}
+-->
+# Űrjáték építése 3. rész: Mozgás hozzáadása
+
+## Előadás előtti kvíz
+
+[Előadás előtti kvíz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/33)
+
+A játékok nem igazán szórakoztatóak, amíg nem látunk ide-oda mozgó idegeneket a képernyőn! Ebben a játékban kétféle mozgást fogunk használni:
+
+- **Billentyűzet/egér mozgás**: amikor a felhasználó a billentyűzettel vagy egérrel mozgat egy objektumot a képernyőn.
+- **Játék által vezérelt mozgás**: amikor a játék egy objektumot mozgat bizonyos időközönként.
+
+De hogyan mozgatunk dolgokat a képernyőn? Az egész a derékszögű koordinátákról szól: megváltoztatjuk az objektum helyét (x, y), majd újrarajzoljuk a képernyőt.
+
+Általában a következő lépések szükségesek a *mozgás* megvalósításához a képernyőn:
+
+1. **Új hely beállítása** egy objektum számára; ez szükséges ahhoz, hogy az objektum mozgását érzékeljük.
+2. **Képernyő törlése**, a képernyőt minden rajzolás között törölni kell. Ezt úgy tehetjük meg, hogy egy téglalapot rajzolunk, amelyet háttérszínnel töltünk ki.
+3. **Objektum újrarajzolása** az új helyen. Ezzel végül elérjük, hogy az objektum egyik helyről a másikra mozogjon.
+
+Így nézhet ki ez a kódban:
+
+```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);
+```
+
+✅ Tudsz olyan okot mondani, amiért a hősöd másodpercenkénti többszöri újrarajzolása teljesítménybeli költségeket okozhat? Olvass utána az [alternatíváknak ehhez a mintához](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas).
+
+## Billentyűesemények kezelése
+
+Az eseményeket úgy kezeled, hogy konkrét eseményeket kapcsolsz kódhoz. A billentyűesemények az egész ablakra vonatkoznak, míg az egéresemények, például a `click`, egy adott elem kattintásához kapcsolhatók. Ebben a projektben végig billentyűeseményeket fogunk használni.
+
+Egy esemény kezeléséhez az ablak `addEventListener()` metódusát kell használnod, és két bemeneti paramétert kell megadnod. Az első paraméter az esemény neve, például `keyup`. A második paraméter az a függvény, amelyet az esemény bekövetkezésekor meg kell hívni.
+
+Íme egy példa:
+
+```javascript
+window.addEventListener('keyup', (evt) => {
+  // `evt.key` = string representation of the key
+  if (evt.key === 'ArrowUp') {
+    // do something
+  }
+})
+```
+
+A billentyűeseményeknél két tulajdonságot használhatsz az eseményen belül, hogy megtudd, melyik billentyűt nyomták meg:
+
+- `key`, ez a megnyomott billentyű szöveges ábrázolása, például `ArrowUp`
+- `keyCode`, ez egy számérték, például `37`, amely az `ArrowLeft`-nek felel meg.
+
+✅ A billentyűesemények manipulálása a játékfejlesztésen kívül is hasznos lehet. Milyen más felhasználási módokat tudsz elképzelni ehhez a technikához?
+
+### Speciális billentyűk: egy figyelmeztetés
+
+Vannak bizonyos *speciális* billentyűk, amelyek hatással vannak az ablakra. Ez azt jelenti, hogy ha például egy `keyup` eseményt figyelsz, és ezeket a speciális billentyűket használod a hősöd mozgatására, akkor az vízszintes görgetést is végrehajt. Emiatt érdemes lehet *kikapcsolni* ezt a beépített böngészői viselkedést, miközben a játékodat építed. Ehhez ilyen kódra van szükséged:
+
+```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);
+```
+
+A fenti kód biztosítja, hogy a nyílbillentyűk és a szóköz billentyű *alapértelmezett* viselkedése ki legyen kapcsolva. A *kikapcsolás* mechanizmusa az `e.preventDefault()` hívásakor történik.
+
+## Játék által vezérelt mozgás
+
+Mozgást önállóan is létrehozhatunk időzítők, például a `setTimeout()` vagy `setInterval()` függvények segítségével, amelyek minden időintervallumban frissítik az objektum helyét. Így nézhet ki:
+
+```javascript
+let id = setInterval(() => {
+  //move the enemy on the y axis
+  enemy.y += 10;
+})
+```
+
+## A játékciklus
+
+A játékciklus egy olyan koncepció, amely lényegében egy rendszeres időközönként meghívott függvény. Játékciklusnak hívják, mert minden, amit a felhasználónak látnia kell, ebben a ciklusban kerül kirajzolásra. A játékciklus az összes játékobjektumot használja, amelyek a játék részét képezik, és mindet kirajzolja, hacsak valamilyen okból már nem részei a játéknak. Például, ha egy objektum egy ellenség, amelyet egy lézer eltalált és felrobbant, akkor az már nem része az aktuális játékciklusnak (erről többet tanulsz a következő leckékben).
+
+Így nézhet ki egy játékciklus kódban kifejezve:
+
+```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);
+```
+
+A fenti ciklus minden `200` milliszekundumban meghívódik, hogy újrarajzolja a vásznat. Te döntheted el, hogy melyik időköz a legmegfelelőbb a játékodhoz.
+
+## Az Űrjáték folytatása
+
+A meglévő kódot fogod bővíteni. Vagy az I. részben elkészült kóddal kezdj, vagy használd a [II. rész kezdőkódját](../../../../6-space-game/3-moving-elements-around/your-work).
+
+- **A hős mozgatása**: kódot fogsz hozzáadni, hogy a hőst a nyílbillentyűkkel lehessen mozgatni.
+- **Ellenségek mozgatása**: kódot kell hozzáadnod, hogy az ellenségek fentről lefelé mozogjanak egy adott sebességgel.
+
+## Ajánlott lépések
+
+Keresd meg a `your-work` almappában létrehozott fájlokat. Ezeknek a következőket kell tartalmazniuk:
+
+```bash
+-| assets
+  -| enemyShip.png
+  -| player.png
+-| index.html
+-| app.js
+-| package.json
+```
+
+A projektet a `your_work` mappában az alábbi paranccsal indíthatod el:
+
+```bash
+cd your-work
+npm start
+```
+
+A fenti parancs egy HTTP szervert indít a `http://localhost:5000` címen. Nyiss meg egy böngészőt, és írd be ezt a címet. Jelenleg a hős és az összes ellenség megjelenik; de még semmi sem mozog!
+
+### Kód hozzáadása
+
+1. **Hozz létre dedikált objektumokat** a `hero`, `enemy` és `game object` számára, amelyeknek `x` és `y` tulajdonságaik vannak. (Emlékezz a [Öröklődés vagy kompozíció](../README.md) részre).
+
+   *TIPP*: Kezdd azzal, hogy hozzáadsz egy új GameObject osztályt az alábbi konstruktorral, majd rajzold ki a vászonra:
+  
+    ```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);
+      }
+    }
+    ```
+
+    Most bővítsd ki ezt a GameObject osztályt, hogy létrehozd a Hero-t és az Enemy-t.
+    
+    ```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. **Adj hozzá billentyűesemény-kezelőket**, hogy kezeld a hős navigációját (mozgatás fel/le, balra/jobbra).
+
+   *EMLÉKEZZ*: Ez egy derékszögű koordinátarendszer, a bal felső sarok a `0,0`. Ne felejtsd el hozzáadni a kódot az *alapértelmezett viselkedés* leállításához.
+
+   >tipp: Hozd létre az onKeyDown függvényedet, és csatold az ablakhoz:
+
+   ```javascript
+    let onKeyDown = function (e) {
+	      console.log(e.keyCode);
+	        ...add the code from the lesson above to stop default behavior
+	      }
+    };
+
+    window.addEventListener("keydown", onKeyDown);
+   ```
+    
+   Nézd meg a böngésződ konzolját, és figyeld, ahogy a billentyűleütések naplózódnak.
+
+3. **Valósítsd meg** a [Pub-sub mintát](../README.md), hogy a kódod tiszta maradjon a további részek során.
+
+   Ehhez az utolsó részhez:
+
+   1. **Adj hozzá egy eseményfigyelőt** az ablakhoz:
+
+       ```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. **Hozz létre egy EventEmitter osztályt**, hogy üzeneteket publikálj és iratkozz fel rájuk:
+
+        ```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. **Adj hozzá konstansokat**, és állítsd be az EventEmitter-t:
+
+        ```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. **Inicializáld a játékot**
+
+    ```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. **Állítsd be a játékciklust**
+
+   Refaktoráld az `window.onload` függvényt, hogy inicializálja a játékot, és állíts be egy játékciklust egy megfelelő időközönként. Adj hozzá egy lézersugarat is:
+
+    ```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. **Adj hozzá kódot**, hogy az ellenségek bizonyos időközönként mozogjanak.
+
+    Refaktoráld a `createEnemies()` függvényt, hogy létrehozza az ellenségeket, és hozzáadja őket az új gameObjects osztályhoz:
+
+    ```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);
+        }
+      }
+    }
+    ```
+    
+    Adj hozzá egy `createHero()` függvényt, hogy hasonló folyamatot végezzen a hős számára.
+    
+    ```javascript
+    function createHero() {
+      hero = new Hero(
+        canvas.width / 2 - 45,
+        canvas.height - canvas.height / 4
+      );
+      hero.img = heroImg;
+      gameObjects.push(hero);
+    }
+    ```
+
+    Végül adj hozzá egy `drawGameObjects()` függvényt, hogy elindítsd a rajzolást:
+
+    ```javascript
+    function drawGameObjects(ctx) {
+      gameObjects.forEach(go => go.draw(ctx));
+    }
+    ```
+
+    Az ellenségeid elkezdenek közeledni a hős űrhajód felé!
+
+---
+
+## 🚀 Kihívás
+
+Ahogy láthatod, a kódod könnyen "spagetti kóddá" válhat, amikor elkezdesz funkciókat, változókat és osztályokat hozzáadni. Hogyan tudnád jobban megszervezni a kódodat, hogy olvashatóbb legyen? Vázolj fel egy rendszert a kódod megszervezésére, még akkor is, ha az egy fájlban marad.
+
+## Előadás utáni kvíz
+
+[Előadás utáni kvíz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/34)
+
+## Áttekintés és önálló tanulás
+
+Bár a játékunkat keretrendszerek használata nélkül írjuk, számos JavaScript-alapú vászonkeretrendszer létezik a játékfejlesztéshez. Szánj időt arra, hogy [olvass ezekről](https://github.com/collections/javascript-game-engines).
+
+## Feladat
+
+[Kommentáld a kódodat](assignment.md)
+
+---
+
+**Felelősség kizárása**:  
+Ez a dokumentum az AI fordítási szolgáltatás, a [Co-op Translator](https://github.com/Azure/co-op-translator) segítségével lett lefordítva. Bár törekszünk a pontosságra, kérjük, vegye figyelembe, hogy az automatikus fordítások hibákat vagy pontatlanságokat tartalmazhatnak. Az eredeti dokumentum az eredeti nyelvén tekintendő hiteles forrásnak. Fontos információk esetén javasolt professzionális, emberi fordítást igénybe venni. Nem vállalunk felelősséget semmilyen félreértésért vagy téves értelmezésért, amely a fordítás használatából eredhet.
\ No newline at end of file
diff --git a/translations/hu/6-space-game/3-moving-elements-around/assignment.md b/translations/hu/6-space-game/3-moving-elements-around/assignment.md
new file mode 100644
index 00000000..74ff09bc
--- /dev/null
+++ b/translations/hu/6-space-game/3-moving-elements-around/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "ccfcd8c2932761359fbaff3d6b01ace4",
+  "translation_date": "2025-08-28T03:54:11+00:00",
+  "source_file": "6-space-game/3-moving-elements-around/assignment.md",
+  "language_code": "hu"
+}
+-->
+# Kommentáld a kódodat
+
+## Útmutató
+
+Nézd át a jelenlegi /app.js fájlodat a játék mappájában, és keress módokat arra, hogy kommenteket adj hozzá, valamint rendezd át. A kód nagyon könnyen kaotikussá válhat, és most jó alkalom arra, hogy kommenteket adj hozzá, hogy olvashatóbb legyen, és később is könnyen használható maradjon.
+
+## Értékelési szempontok
+
+| Kritérium | Kiemelkedő                                                      | Megfelelő                              | Fejlesztésre szorul                                              |
+| --------- | --------------------------------------------------------------- | -------------------------------------- | ---------------------------------------------------------------- |
+|           | Az `app.js` kód teljesen kommentált és logikai blokkokra van osztva | Az `app.js` kód megfelelően kommentált | Az `app.js` kód kissé rendezetlen és hiányoznak a jó kommentek   |
+
+---
+
+**Felelősség kizárása**:  
+Ez a dokumentum az AI fordítási szolgáltatás, a [Co-op Translator](https://github.com/Azure/co-op-translator) segítségével lett lefordítva. Bár törekszünk a pontosságra, kérjük, vegye figyelembe, hogy az automatikus fordítások hibákat vagy pontatlanságokat tartalmazhatnak. Az eredeti dokumentum az eredeti nyelvén tekintendő hiteles forrásnak. Kritikus információk esetén javasolt professzionális, emberi fordítást igénybe venni. Nem vállalunk felelősséget semmilyen félreértésért vagy téves értelmezésért, amely a fordítás használatából eredhet.
\ No newline at end of file
diff --git a/translations/hu/6-space-game/4-collision-detection/README.md b/translations/hu/6-space-game/4-collision-detection/README.md
new file mode 100644
index 00000000..89f1ea14
--- /dev/null
+++ b/translations/hu/6-space-game/4-collision-detection/README.md
@@ -0,0 +1,311 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "2e83e38c35dc003f046d7cc0bbfd4920",
+  "translation_date": "2025-08-28T03:56:54+00:00",
+  "source_file": "6-space-game/4-collision-detection/README.md",
+  "language_code": "hu"
+}
+-->
+# Űrjáték építése 4. rész: Lézer hozzáadása és ütközések érzékelése
+
+## Előadás előtti kvíz
+
+[Előadás előtti kvíz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/35)
+
+Ebben a leckében megtanulod, hogyan lőj lézereket JavaScript segítségével! Két dolgot fogunk hozzáadni a játékhoz:
+
+- **Egy lézer**: ez a lézer a hősöd hajójából indul, és függőlegesen felfelé halad
+- **Ütközés érzékelése**, a lövés képességének megvalósítása részeként néhány játék szabályt is hozzáadunk:
+   - **Lézer eltalálja az ellenséget**: Az ellenség meghal, ha eltalálja egy lézer
+   - **Lézer eléri a képernyő tetejét**: A lézer megsemmisül, ha eléri a képernyő felső részét
+   - **Ellenség és hős ütközése**: Az ellenség és a hős megsemmisül, ha összeütköznek
+   - **Ellenség eléri a képernyő alját**: Az ellenség és a hős megsemmisül, ha az ellenség eléri a képernyő alját
+
+Röviden, neked -- *a hősnek* -- el kell találnod az összes ellenséget lézerrel, mielőtt azok elérik a képernyő alját.
+
+✅ Kutass egy kicsit az első számítógépes játék után, amit valaha írtak. Mi volt a funkciója?
+
+Legyünk együtt hősök!
+
+## Ütközés érzékelése
+
+Hogyan érzékeljük az ütközéseket? A játékobjektumokat mozgó téglalapokként kell elképzelnünk. Miért? Nos, a játékobjektum megrajzolásához használt kép egy téglalap: van `x`, `y`, `szélesség` és `magasság`.
+
+Ha két téglalap, például a hős és az ellenség *metszi egymást*, akkor ütközés történik. Hogy mi történjen ilyenkor, az a játék szabályaitól függ. Az ütközés érzékeléséhez tehát a következőkre van szükség:
+
+1. Egy módszer, amely téglalapként ábrázolja a játékobjektumot, valami ilyesmi:
+
+   ```javascript
+   rectFromGameObject() {
+     return {
+       top: this.y,
+       left: this.x,
+       bottom: this.y + this.height,
+       right: this.x + this.width
+     }
+   }
+   ```
+
+2. Egy összehasonlító függvény, amely így nézhet ki:
+
+   ```javascript
+   function intersectRect(r1, r2) {
+     return !(r2.left > r1.right ||
+       r2.right < r1.left ||
+       r2.top > r1.bottom ||
+       r2.bottom < r1.top);
+   }
+   ```
+
+## Hogyan semmisítsünk meg dolgokat
+
+Ahhoz, hogy valamit megsemmisítsünk a játékban, jelezni kell a játéknak, hogy többé ne rajzolja ki az adott elemet a játékciklusban, amely bizonyos időközönként frissül. Ennek egyik módja, hogy a játékobjektumot *halottnak* jelöljük, amikor valami történik, például így:
+
+```javascript
+// collision happened
+enemy.dead = true
+```
+
+Ezután kiszűrheted a *halott* objektumokat, mielőtt újrarajzolnád a képernyőt, például így:
+
+```javascript
+gameObjects = gameObject.filter(go => !go.dead);
+```
+
+## Hogyan lőjünk lézert
+
+A lézer kilövése azt jelenti, hogy reagálunk egy billentyű-eseményre, és létrehozunk egy objektumot, amely egy bizonyos irányba mozog. Ezért a következő lépéseket kell végrehajtani:
+
+1. **Lézer objektum létrehozása**: a hős hajójának tetejéről, amely létrehozáskor felfelé kezd mozogni a képernyő teteje felé.
+2. **Kód hozzárendelése egy billentyű-eseményhez**: ki kell választanunk egy billentyűt a billentyűzeten, amely a lézer kilövését jelképezi.
+3. **Játékobjektum létrehozása, amely lézerként néz ki**, amikor a billentyűt lenyomják.
+
+## Lézer hűtési idő
+
+A lézernek minden alkalommal ki kell lőnie, amikor megnyomsz egy billentyűt, például a *szóközt*. Annak érdekében, hogy a játék ne hozzon létre túl sok lézert rövid idő alatt, ezt meg kell oldanunk. A megoldás egy úgynevezett *hűtési idő* (cooldown) bevezetése, egy időzítő, amely biztosítja, hogy a lézer csak bizonyos időközönként lőhető ki. Ezt így lehet megvalósítani:
+
+```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.
+    }
+  }
+}
+```
+
+✅ Nézd meg az űrjáték sorozat 1. leckéjét, hogy emlékeztesd magad a *hűtési idő* fogalmára.
+
+## Mit kell építeni
+
+A meglévő kódot (amit az előző leckében már megtisztítottál és átalakítottál) kell kiegészítened. Kezdheted a II. rész kódjával, vagy használhatod a [III. rész kezdő kódját](../../../../../../../../../your-work).
+
+> Tipp: a lézer, amivel dolgozni fogsz, már az eszközök mappádban van, és a kódod hivatkozik rá.
+
+- **Ütközés érzékelés hozzáadása**, amikor egy lézer ütközik valamivel, a következő szabályok érvényesek:
+   1. **Lézer eltalálja az ellenséget**: az ellenség meghal, ha eltalálja egy lézer
+   2. **Lézer eléri a képernyő tetejét**: A lézer megsemmisül, ha eléri a képernyő felső részét
+   3. **Ellenség és hős ütközése**: az ellenség és a hős megsemmisül, ha összeütköznek
+   4. **Ellenség eléri a képernyő alját**: Az ellenség és a hős megsemmisül, ha az ellenség eléri a képernyő alját
+
+## Ajánlott lépések
+
+Keresd meg azokat a fájlokat, amelyeket a `your-work` almappában hoztak létre számodra. Ezeknek a következőket kell tartalmazniuk:
+
+```bash
+-| assets
+  -| enemyShip.png
+  -| player.png
+  -| laserRed.png
+-| index.html
+-| app.js
+-| package.json
+```
+
+A projektet a `your_work` mappában indíthatod el az alábbi parancs begépelésével:
+
+```bash
+cd your-work
+npm start
+```
+
+Ez elindít egy HTTP szervert a `http://localhost:5000` címen. Nyiss meg egy böngészőt, és írd be ezt a címet, jelenleg a hős és az összes ellenség látható, de semmi sem mozog - még :).
+
+### Kód hozzáadása
+
+1. **Állítsd be a játékobjektum téglalap ábrázolását az ütközések kezeléséhez** Az alábbi kód lehetővé teszi, hogy téglalap ábrázolást kapj egy `GameObject`-ről. Szerkeszd a GameObject osztályt, hogy kiterjeszd:
+
+    ```javascript
+    rectFromGameObject() {
+        return {
+          top: this.y,
+          left: this.x,
+          bottom: this.y + this.height,
+          right: this.x + this.width,
+        };
+      }
+    ```
+
+2. **Adj hozzá kódot, amely ellenőrzi az ütközést** Ez egy új függvény lesz, amely teszteli, hogy két téglalap metszi-e egymást:
+
+    ```javascript
+    function intersectRect(r1, r2) {
+      return !(
+        r2.left > r1.right ||
+        r2.right < r1.left ||
+        r2.top > r1.bottom ||
+        r2.bottom < r1.top
+      );
+    }
+    ```
+
+3. **Adj hozzá lézer kilövési képességet**
+   1. **Adj hozzá billentyű-esemény üzenetet**. A *szóköz* billentyűnek lézert kell létrehoznia közvetlenül a hős hajója felett. Adj hozzá három konstansot a Messages objektumhoz:
+
+       ```javascript
+        KEY_EVENT_SPACE: "KEY_EVENT_SPACE",
+        COLLISION_ENEMY_LASER: "COLLISION_ENEMY_LASER",
+        COLLISION_ENEMY_HERO: "COLLISION_ENEMY_HERO",
+       ```
+
+   1. **Kezeld a szóköz billentyűt**. Szerkeszd a `window.addEventListener` keyup függvényt, hogy kezelje a szóközt:
+
+      ```javascript
+        } else if(evt.keyCode === 32) {
+          eventEmitter.emit(Messages.KEY_EVENT_SPACE);
+        }
+      ```
+
+    1. **Adj hozzá hallgatókat**. Szerkeszd az `initGame()` függvényt, hogy biztosítsd, hogy a hős lőni tudjon, amikor a szóköz billentyűt lenyomják:
+
+       ```javascript
+       eventEmitter.on(Messages.KEY_EVENT_SPACE, () => {
+        if (hero.canFire()) {
+          hero.fire();
+        }
+       ```
+
+       és adj hozzá egy új `eventEmitter.on()` függvényt, hogy biztosítsd a viselkedést, amikor egy ellenség ütközik egy lézerrel:
+
+          ```javascript
+          eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => {
+            first.dead = true;
+            second.dead = true;
+          })
+          ```
+
+   1. **Mozgasd az objektumot**, Biztosítsd, hogy a lézer fokozatosan a képernyő tetejére mozogjon. Létrehozol egy új Laser osztályt, amely kiterjeszti a `GameObject`-et, ahogy korábban:
+
+      ```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. **Kezeld az ütközéseket**, Valósítsd meg a lézer ütközési szabályait. Adj hozzá egy `updateGameObjects()` függvényt, amely teszteli az ütköző objektumokat:
+
+      ```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);
+      }  
+      ```
+
+      Biztosítsd, hogy az `updateGameObjects()` bekerüljön a játékciklusba a `window.onload`-ban.
+
+   4. **Valósítsd meg a lézer hűtési idejét**, hogy csak bizonyos időközönként lehessen kilőni.
+
+      Végül szerkeszd a Hero osztályt, hogy hűtési időt tudjon kezelni:
+
+       ```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;
+        }
+      }
+      ```
+
+Ezen a ponton a játékod már némi funkcionalitással rendelkezik! A nyílbillentyűkkel navigálhatsz, a szóköz billentyűvel lézert lőhetsz, és az ellenségek eltűnnek, amikor eltalálod őket. Szép munka!
+
+---
+
+## 🚀 Kihívás
+
+Adj hozzá egy robbanást! Nézd meg a játék eszközeit a [Space Art repo](../../../../6-space-game/solution/spaceArt/readme.txt) mappában, és próbálj meg robbanást hozzáadni, amikor a lézer eltalál egy idegent.
+
+## Előadás utáni kvíz
+
+[Előadás utáni kvíz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/36)
+
+## Áttekintés és önálló tanulás
+
+Kísérletezz az eddigi játékod időközeivel. Mi történik, ha megváltoztatod őket? Olvass többet a [JavaScript időzítési eseményekről](https://www.freecodecamp.org/news/javascript-timing-events-settimeout-and-setinterval/).
+
+## Feladat
+
+[Fedezd fel az ütközéseket](assignment.md)
+
+---
+
+**Felelősség kizárása**:  
+Ez a dokumentum az AI fordítási szolgáltatás, a [Co-op Translator](https://github.com/Azure/co-op-translator) segítségével lett lefordítva. Bár törekszünk a pontosságra, kérjük, vegye figyelembe, hogy az automatikus fordítások hibákat vagy pontatlanságokat tartalmazhatnak. Az eredeti dokumentum az eredeti nyelvén tekintendő hiteles forrásnak. Kritikus információk esetén javasolt professzionális emberi fordítást igénybe venni. Nem vállalunk felelősséget az ebből a fordításból eredő félreértésekért vagy téves értelmezésekért.
\ No newline at end of file
diff --git a/translations/hu/6-space-game/4-collision-detection/assignment.md b/translations/hu/6-space-game/4-collision-detection/assignment.md
new file mode 100644
index 00000000..2b033ccf
--- /dev/null
+++ b/translations/hu/6-space-game/4-collision-detection/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "8a0a097b45e7c75a611e2795e4013f16",
+  "translation_date": "2025-08-28T03:58:07+00:00",
+  "source_file": "6-space-game/4-collision-detection/assignment.md",
+  "language_code": "hu"
+}
+-->
+# Fedezd fel az ütközéseket
+
+## Útmutató
+
+Ahhoz, hogy jobban megértsd, hogyan működnek az ütközések, készíts egy nagyon kicsi játékot néhány ütköző elemmel. Mozgasd őket billentyűleütésekkel vagy egérkattintásokkal, és érj el valamilyen reakciót az egyik elemnél, amikor ütközés történik. Ez lehet például egy meteor, ami eltalálja a Földet, vagy ütköző autók. Légy kreatív!
+
+## Értékelési szempontok
+
+| Kritérium | Kiemelkedő                                                                                                              | Megfelelő                     | Fejlesztésre szorul |
+| --------- | ----------------------------------------------------------------------------------------------------------------------- | ----------------------------- | ------------------- |
+|           | Teljesen működő kódmintát készít, amelyben az elemek megjelennek a vásznon, alapvető ütközések történnek, és reakciók zajlanak | A kód valamilyen módon hiányos | A kód hibásan működik |
+
+---
+
+**Felelősség kizárása**:  
+Ez a dokumentum az AI fordítási szolgáltatás, a [Co-op Translator](https://github.com/Azure/co-op-translator) segítségével lett lefordítva. Bár törekszünk a pontosságra, kérjük, vegye figyelembe, hogy az automatikus fordítások hibákat vagy pontatlanságokat tartalmazhatnak. Az eredeti dokumentum az eredeti nyelvén tekintendő hiteles forrásnak. Kritikus információk esetén javasolt professzionális emberi fordítást igénybe venni. Nem vállalunk felelősséget semmilyen félreértésért vagy téves értelmezésért, amely a fordítás használatából eredhet.
\ No newline at end of file
diff --git a/translations/hu/6-space-game/4-collision-detection/solution/README.md b/translations/hu/6-space-game/4-collision-detection/solution/README.md
new file mode 100644
index 00000000..cec8292d
--- /dev/null
+++ b/translations/hu/6-space-game/4-collision-detection/solution/README.md
@@ -0,0 +1,15 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "068cbb9b3c10a96d503f6cdd6c9ace8c",
+  "translation_date": "2025-08-28T03:58:26+00:00",
+  "source_file": "6-space-game/4-collision-detection/solution/README.md",
+  "language_code": "hu"
+}
+-->
+Ez egy helyőrző, szándékosan üresen hagyva
+
+---
+
+**Felelősség kizárása**:  
+Ez a dokumentum az AI fordítási szolgáltatás [Co-op Translator](https://github.com/Azure/co-op-translator) segítségével lett lefordítva. Bár törekszünk a pontosságra, kérjük, vegye figyelembe, hogy az automatikus fordítások hibákat vagy pontatlanságokat tartalmazhatnak. Az eredeti dokumentum az eredeti nyelvén tekintendő hiteles forrásnak. Kritikus információk esetén javasolt professzionális emberi fordítást igénybe venni. Nem vállalunk felelősséget semmilyen félreértésért vagy téves értelmezésért, amely a fordítás használatából eredhet.
\ No newline at end of file
diff --git a/translations/hu/6-space-game/4-collision-detection/your-work/README.md b/translations/hu/6-space-game/4-collision-detection/your-work/README.md
new file mode 100644
index 00000000..e6c76315
--- /dev/null
+++ b/translations/hu/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-28T03:58:40+00:00",
+  "source_file": "6-space-game/4-collision-detection/your-work/README.md",
+  "language_code": "hu"
+}
+-->
+Ez egy helyőrző, szándékosan üresen hagyva
+
+---
+
+**Felelősség kizárása**:  
+Ez a dokumentum az AI fordítási szolgáltatás [Co-op Translator](https://github.com/Azure/co-op-translator) segítségével lett lefordítva. Bár törekszünk a pontosságra, kérjük, vegye figyelembe, hogy az automatikus fordítások hibákat vagy pontatlanságokat tartalmazhatnak. Az eredeti dokumentum az eredeti nyelvén tekintendő hiteles forrásnak. Kritikus információk esetén javasolt professzionális emberi fordítást igénybe venni. Nem vállalunk felelősséget semmilyen félreértésért vagy téves értelmezésért, amely a fordítás használatából eredhet.
\ No newline at end of file
diff --git a/translations/hu/6-space-game/5-keeping-score/README.md b/translations/hu/6-space-game/5-keeping-score/README.md
new file mode 100644
index 00000000..a6a89476
--- /dev/null
+++ b/translations/hu/6-space-game/5-keeping-score/README.md
@@ -0,0 +1,203 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "4e8250db84b027c9ff816b4e4c093457",
+  "translation_date": "2025-08-28T03:54:44+00:00",
+  "source_file": "6-space-game/5-keeping-score/README.md",
+  "language_code": "hu"
+}
+-->
+# Űrjáték készítése 5. rész: Pontszám és életek
+
+## Előadás előtti kvíz
+
+[Előadás előtti kvíz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/37)
+
+Ebben a leckében megtanulod, hogyan adj pontszámot a játékhoz, és hogyan számold az életeket.
+
+## Szöveg megjelenítése a képernyőn
+
+Ahhoz, hogy a játék pontszámát megjelenítsd a képernyőn, tudnod kell, hogyan helyezz el szöveget a képernyőn. A megoldás a `fillText()` metódus használata a canvas objektumon. Ezen kívül más tulajdonságokat is szabályozhatsz, például a betűtípust, a szöveg színét és az igazítást (balra, jobbra, középre). Az alábbi kódrészlet példát mutat arra, hogyan lehet szöveget rajzolni a képernyőre.
+
+```javascript
+ctx.font = "30px Arial";
+ctx.fillStyle = "red";
+ctx.textAlign = "right";
+ctx.fillText("show this on the screen", 0, 0);
+```
+
+✅ Olvass többet arról, [hogyan adhatsz szöveget egy canvashoz](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_text), és bátran tedd a sajátodat még látványosabbá!
+
+## Az élet, mint játékkoncepció
+
+Az élet fogalma egy játékban csupán egy szám. Egy űrjáték kontextusában gyakori, hogy egy meghatározott számú életet adunk, amelyek egyenként csökkennek, amikor a hajód sérülést szenved. Jó, ha ezt grafikusan is meg tudod jeleníteni, például minihajókkal vagy szívekkel a szám helyett.
+
+## Mit kell elkészíteni?
+
+Adjuk hozzá a következőket a játékodhoz:
+
+- **Játék pontszám**: Minden ellenséges hajó megsemmisítése után a hősnek pontokat kell kapnia, javasoljuk, hogy hajónként 100 pontot. A játék pontszámát a bal alsó sarokban kell megjeleníteni.
+- **Élet**: A hajódnak három élete van. Minden alkalommal, amikor egy ellenséges hajó neked ütközik, elveszítesz egy életet. Az életek számát a jobb alsó sarokban kell megjeleníteni, és a következő grafikából kell állnia: ![élet kép](../../../../translated_images/life.6fb9f50d53ee0413cd91aa411f7c296e10a1a6de5c4a4197c718b49bf7d63ebf.hu.png).
+
+## Ajánlott lépések
+
+Keresd meg azokat a fájlokat, amelyeket a `your-work` almappában hoztunk létre számodra. Ezeknek a következőket kell tartalmazniuk:
+
+```bash
+-| assets
+  -| enemyShip.png
+  -| player.png
+  -| laserRed.png
+-| index.html
+-| app.js
+-| package.json
+```
+
+Indítsd el a projektedet a `your_work` mappában az alábbi parancs beírásával:
+
+```bash
+cd your-work
+npm start
+```
+
+A fenti parancs egy HTTP szervert indít a `http://localhost:5000` címen. Nyiss meg egy böngészőt, és írd be ezt a címet. Jelenleg a hős és az összes ellenség megjelenik, és amikor a bal és jobb nyilakat lenyomod, a hős mozog, és le tudja lőni az ellenségeket.
+
+### Kód hozzáadása
+
+1. **Másold át a szükséges eszközöket** a `solution/assets/` mappából a `your-work` mappába; hozzá kell adnod egy `life.png` eszközt. Add hozzá a lifeImg-t a window.onload függvényhez:
+
+    ```javascript
+    lifeImg = await loadTexture("assets/life.png");
+    ```
+
+1. Add hozzá a `lifeImg`-t az eszközök listájához:
+
+    ```javascript
+    let heroImg,
+    ...
+    lifeImg,
+    ...
+    eventEmitter = new EventEmitter();
+    ```
+  
+2. **Adj hozzá változókat**. Adj hozzá kódot, amely a teljes pontszámot (0) és a hátralévő életeket (3) képviseli, és jelenítsd meg ezeket a képernyőn.
+
+3. **Bővítsd az `updateGameObjects()` függvényt**. Bővítsd az `updateGameObjects()` függvényt, hogy kezelje az ellenséges ütközéseket:
+
+    ```javascript
+    enemies.forEach(enemy => {
+        const heroRect = hero.rectFromGameObject();
+        if (intersectRect(heroRect, enemy.rectFromGameObject())) {
+          eventEmitter.emit(Messages.COLLISION_ENEMY_HERO, { enemy });
+        }
+      })
+    ```
+
+4. **Adj hozzá életet és pontokat**. 
+   1. **Inicializáld a változókat**. A `this.cooldown = 0` alatt a `Hero` osztályban állítsd be az életet és a pontokat:
+
+        ```javascript
+        this.life = 3;
+        this.points = 0;
+        ```
+
+   1. **Rajzold ki a változókat a képernyőre**. Jelenítsd meg ezeket az értékeket a képernyőn:
+
+        ```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. **Adj hozzá metódusokat a játékciklushoz**. Győződj meg róla, hogy ezeket a függvényeket hozzáadod a window.onload függvényhez az `updateGameObjects()` alatt:
+
+        ```javascript
+        drawPoints();
+        drawLife();
+        ```
+
+1. **Valósítsd meg a játékszabályokat**. Valósítsd meg a következő játékszabályokat:
+
+   1. **Minden hős és ellenség ütközés esetén** vonj le egy életet.
+   
+      Bővítsd a `Hero` osztályt, hogy ezt a levonást elvégezze:
+
+        ```javascript
+        decrementLife() {
+          this.life--;
+          if (this.life === 0) {
+            this.dead = true;
+          }
+        }
+        ```
+
+   2. **Minden lézer, amely eltalál egy ellenséget**, növelje a játék pontszámát 100 ponttal.
+
+      Bővítsd a Hero osztályt, hogy ezt a növelést elvégezze:
+    
+        ```javascript
+          incrementPoints() {
+            this.points += 100;
+          }
+        ```
+
+        Add hozzá ezeket a függvényeket az ütközési eseménykibocsátókhoz:
+
+        ```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();
+        });
+        ```
+
+✅ Kutass egy kicsit, hogy felfedezd, milyen más játékokat készítettek JavaScript/Canvas használatával. Mik a közös jellemzőik?
+
+A munka végére a jobb alsó sarokban kis "élet" hajókat kell látnod, a bal alsó sarokban a pontszámot, és látnod kell, ahogy az életek száma csökken, amikor ütközöl az ellenségekkel, és a pontszámod nő, amikor lelövöd az ellenségeket. Szép munka! A játékod majdnem kész.
+
+---
+
+## 🚀 Kihívás
+
+A kódod majdnem kész. El tudod képzelni, mik lehetnek a következő lépések?
+
+## Előadás utáni kvíz
+
+[Előadás utáni kvíz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/38)
+
+## Áttekintés és önálló tanulás
+
+Kutatásokat végezhetsz arról, hogyan lehet növelni és csökkenteni a játék pontszámát és életeit. Vannak érdekes játékmotorok, mint például a [PlayFab](https://playfab.com). Hogyan javíthatná ezek használata a játékodat?
+
+## Feladat
+
+[Pontszám alapú játék készítése](assignment.md)
+
+---
+
+**Felelősség kizárása**:  
+Ez a dokumentum az AI fordítási szolgáltatás [Co-op Translator](https://github.com/Azure/co-op-translator) segítségével lett lefordítva. Bár törekszünk a pontosságra, kérjük, vegye figyelembe, hogy az automatikus fordítások hibákat vagy pontatlanságokat tartalmazhatnak. Az eredeti dokumentum az eredeti nyelvén tekintendő hiteles forrásnak. Kritikus információk esetén javasolt professzionális emberi fordítást igénybe venni. Nem vállalunk felelősséget semmilyen félreértésért vagy téves értelmezésért, amely a fordítás használatából eredhet.
\ No newline at end of file
diff --git a/translations/hu/6-space-game/5-keeping-score/assignment.md b/translations/hu/6-space-game/5-keeping-score/assignment.md
new file mode 100644
index 00000000..923ef9f8
--- /dev/null
+++ b/translations/hu/6-space-game/5-keeping-score/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "81f292dbda01685b91735e0398dc0504",
+  "translation_date": "2025-08-28T03:55:37+00:00",
+  "source_file": "6-space-game/5-keeping-score/assignment.md",
+  "language_code": "hu"
+}
+-->
+# Építs egy pontozós játékot
+
+## Útmutató
+
+Hozz létre egy játékot, amelyben az életet és a pontokat kreatív módon jeleníted meg. Egy javaslat, hogy az életet szívekként mutasd, a pontokat pedig egy nagy számként a képernyő alsó középső részén. Nézd meg itt: [Ingyenes játékforrások](https://www.kenney.nl/)
+
+# Értékelési szempontok
+
+| Kritérium | Kiemelkedő            | Megfelelő                  | Fejlesztésre szorul        |
+| --------- | --------------------- | -------------------------- | -------------------------- |
+|           | teljes játék bemutatva | részben bemutatott játék   | részleges játék hibákat tartalmaz |
+
+---
+
+**Felelősség kizárása**:  
+Ez a dokumentum az AI fordítási szolgáltatás, a [Co-op Translator](https://github.com/Azure/co-op-translator) segítségével lett lefordítva. Bár törekszünk a pontosságra, kérjük, vegye figyelembe, hogy az automatikus fordítások hibákat vagy pontatlanságokat tartalmazhatnak. Az eredeti dokumentum az eredeti nyelvén tekintendő hiteles forrásnak. Kritikus információk esetén javasolt professzionális emberi fordítást igénybe venni. Nem vállalunk felelősséget semmilyen félreértésért vagy téves értelmezésért, amely a fordítás használatából eredhet.
\ No newline at end of file
diff --git a/translations/hu/6-space-game/5-keeping-score/solution/README.md b/translations/hu/6-space-game/5-keeping-score/solution/README.md
new file mode 100644
index 00000000..b9f42e9a
--- /dev/null
+++ b/translations/hu/6-space-game/5-keeping-score/solution/README.md
@@ -0,0 +1,15 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "068cbb9b3c10a96d503f6cdd6c9ace8c",
+  "translation_date": "2025-08-28T03:55:55+00:00",
+  "source_file": "6-space-game/5-keeping-score/solution/README.md",
+  "language_code": "hu"
+}
+-->
+Ez egy helyőrző, szándékosan üresen hagyva
+
+---
+
+**Felelősség kizárása**:  
+Ez a dokumentum az AI fordítási szolgáltatás, a [Co-op Translator](https://github.com/Azure/co-op-translator) segítségével lett lefordítva. Bár törekszünk a pontosságra, kérjük, vegye figyelembe, hogy az automatikus fordítások hibákat vagy pontatlanságokat tartalmazhatnak. Az eredeti dokumentum az eredeti nyelvén tekintendő hiteles forrásnak. Kritikus információk esetén javasolt professzionális emberi fordítást igénybe venni. Nem vállalunk felelősséget semmilyen félreértésért vagy téves értelmezésért, amely a fordítás használatából eredhet.
\ No newline at end of file
diff --git a/translations/hu/6-space-game/5-keeping-score/your-work/README.md b/translations/hu/6-space-game/5-keeping-score/your-work/README.md
new file mode 100644
index 00000000..10b1c2d5
--- /dev/null
+++ b/translations/hu/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-28T03:56:08+00:00",
+  "source_file": "6-space-game/5-keeping-score/your-work/README.md",
+  "language_code": "hu"
+}
+-->
+Ez egy helyőrző, szándékosan üresen hagyva
+
+---
+
+**Felelősség kizárása**:  
+Ez a dokumentum az AI fordítási szolgáltatás, a [Co-op Translator](https://github.com/Azure/co-op-translator) segítségével lett lefordítva. Bár törekszünk a pontosságra, kérjük, vegye figyelembe, hogy az automatikus fordítások hibákat vagy pontatlanságokat tartalmazhatnak. Az eredeti dokumentum az eredeti nyelvén tekintendő hiteles forrásnak. Kritikus információk esetén javasolt professzionális emberi fordítást igénybe venni. Nem vállalunk felelősséget semmilyen félreértésért vagy téves értelmezésért, amely a fordítás használatából eredhet.
\ No newline at end of file
diff --git a/translations/hu/6-space-game/6-end-condition/README.md b/translations/hu/6-space-game/6-end-condition/README.md
new file mode 100644
index 00000000..afae6bca
--- /dev/null
+++ b/translations/hu/6-space-game/6-end-condition/README.md
@@ -0,0 +1,236 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "01336cddd638242e99b133614111ea40",
+  "translation_date": "2025-08-28T04:00:46+00:00",
+  "source_file": "6-space-game/6-end-condition/README.md",
+  "language_code": "hu"
+}
+-->
+# Űrjáték készítése 6. rész: Befejezés és újrakezdés
+
+## Előadás előtti kvíz
+
+[Előadás előtti kvíz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/39)
+
+Számos módja van annak, hogy kifejezzük egy játék *befejezési feltételét*. A játék készítőjeként rajtad múlik, hogy meghatározd, miért ér véget a játék. Íme néhány ok, ha feltételezzük, hogy az eddig épített űrjátékról van szó:
+
+- **`N` ellenséges hajó megsemmisítése**: Gyakori, hogy egy játékot különböző szintekre osztanak, és egy szint teljesítéséhez meg kell semmisíteni `N` ellenséges hajót.
+- **A hajód megsemmisült**: Vannak olyan játékok, ahol elveszíted a játékot, ha a hajód megsemmisül. Egy másik gyakori megközelítés az, hogy életek fogalmát vezetik be. Minden alkalommal, amikor a hajód megsemmisül, egy életet levonnak. Ha minden élet elfogy, akkor vége a játéknak.
+- **`N` pontot gyűjtöttél**: Egy másik gyakori befejezési feltétel, hogy pontokat gyűjts. Az, hogy hogyan szerzel pontokat, rajtad múlik, de gyakori, hogy pontokat rendelnek különböző tevékenységekhez, például ellenséges hajó megsemmisítéséhez vagy tárgyak gyűjtéséhez, amelyeket a tárgyak *eldobnak*, amikor megsemmisülnek.
+- **Egy szint teljesítése**: Ez több feltételt is magában foglalhat, például `X` ellenséges hajó megsemmisítése, `Y` pontok gyűjtése, vagy esetleg egy adott tárgy begyűjtése.
+
+## Újrakezdés
+
+Ha az emberek élvezik a játékodat, valószínűleg újra szeretnék játszani. Amikor a játék bármilyen okból véget ér, biztosítsd az újrakezdés lehetőségét.
+
+✅ Gondolkodj el azon, hogy milyen feltételek mellett ér véget egy játék, és hogyan ösztönöznek az újrakezdésre.
+
+## Mit kell építeni
+
+A következő szabályokat fogod hozzáadni a játékodhoz:
+
+1. **A játék megnyerése**. Ha minden ellenséges hajót megsemmisítettél, megnyered a játékot. Ezen kívül jeleníts meg valamilyen győzelmi üzenetet.
+1. **Újrakezdés**. Ha minden életed elfogyott, vagy megnyerted a játékot, biztosítsd az újrakezdés lehetőségét. Ne feledd! Újra kell inicializálnod a játékot, és a korábbi játékállapotot törölni kell.
+
+## Ajánlott lépések
+
+Keresd meg azokat a fájlokat, amelyeket a `your-work` almappában hoztak létre számodra. Ezeknek a következőket kell tartalmazniuk:
+
+```bash
+-| assets
+  -| enemyShip.png
+  -| player.png
+  -| laserRed.png
+  -| life.png
+-| index.html
+-| app.js
+-| package.json
+```
+
+Indítsd el a projektedet a `your_work` mappában az alábbi parancs begépelésével:
+
+```bash
+cd your-work
+npm start
+```
+
+Ez elindít egy HTTP szervert a `http://localhost:5000` címen. Nyiss meg egy böngészőt, és írd be ezt a címet. A játékodnak játszható állapotban kell lennie.
+
+> Tipp: hogy elkerüld a figyelmeztetéseket a Visual Studio Code-ban, szerkeszd a `window.onload` függvényt úgy, hogy a `gameLoopId`-t hívja meg (a `let` nélkül), és deklaráld a `gameLoopId`-t a fájl tetején, külön: `let gameLoopId;`
+
+### Kód hozzáadása
+
+1. **Befejezési feltétel követése**. Adj hozzá kódot, amely nyomon követi az ellenségek számát, vagy hogy a hős hajó megsemmisült-e, az alábbi két függvény hozzáadásával:
+
+    ```javascript
+    function isHeroDead() {
+      return hero.life <= 0;
+    }
+
+    function isEnemiesDead() {
+      const enemies = gameObjects.filter((go) => go.type === "Enemy" && !go.dead);
+      return enemies.length === 0;
+    }
+    ```
+
+1. **Logika hozzáadása az üzenetkezelőkhöz**. Szerkeszd az `eventEmitter`-t, hogy kezelje ezeket a feltételeket:
+
+    ```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. **Új üzenettípusok hozzáadása**. Add hozzá ezeket az üzeneteket a constants objektumhoz:
+
+    ```javascript
+    GAME_END_LOSS: "GAME_END_LOSS",
+    GAME_END_WIN: "GAME_END_WIN",
+    ```
+
+2. **Újrakezdési kód hozzáadása**. Adj hozzá kódot, amely újraindítja a játékot egy kiválasztott gomb megnyomásával.
+
+   1. **Hallgatás az `Enter` billentyű lenyomására**. Szerkeszd az ablakod eventListener-jét, hogy figyeljen erre a lenyomásra:
+
+    ```javascript
+     else if(evt.key === "Enter") {
+        eventEmitter.emit(Messages.KEY_EVENT_ENTER);
+      }
+    ```
+
+   1. **Újrakezdési üzenet hozzáadása**. Add hozzá ezt az üzenetet az üzenetek constants objektumhoz:
+
+        ```javascript
+        KEY_EVENT_ENTER: "KEY_EVENT_ENTER",
+        ```
+
+1. **Játékszabályok megvalósítása**. Valósítsd meg a következő játékszabályokat:
+
+   1. **Játékos győzelmi feltétele**. Ha minden ellenséges hajót megsemmisítettél, jeleníts meg egy győzelmi üzenetet.
+
+      1. Először hozz létre egy `displayMessage()` függvényt:
+
+        ```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. Hozz létre egy `endGame()` függvényt:
+
+        ```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. **Újrakezdési logika**. Ha minden élet elfogyott, vagy a játékos megnyerte a játékot, jelenítsd meg, hogy a játék újrakezdhető. Ezen kívül indítsd újra a játékot, amikor az *újrakezdés* gombot megnyomják (te döntheted el, melyik gomb legyen az újrakezdéshez hozzárendelve).
+
+      1. Hozz létre egy `resetGame()` függvényt:
+
+        ```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. Adj hozzá egy hívást az `eventEmitter`-hez, hogy újraindítsa a játékot az `initGame()`-ben:
+
+        ```javascript
+        eventEmitter.on(Messages.KEY_EVENT_ENTER, () => {
+          resetGame();
+        });
+        ```
+
+     1. Adj hozzá egy `clear()` függvényt az EventEmitter-hez:
+
+        ```javascript
+        clear() {
+          this.listeners = {};
+        }
+        ```
+
+👽 💥 🚀 Gratulálok, Kapitány! A játékod elkészült! Szép munka! 🚀 💥 👽
+
+---
+
+## 🚀 Kihívás
+
+Adj hozzá hangot! Tudsz hangot hozzáadni, hogy fokozd a játékélményt, például amikor lézer találat történik, vagy a hős meghal vagy győz? Nézd meg ezt a [sandboxot](https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_audio_play), hogy megtanuld, hogyan lehet hangot lejátszani JavaScript segítségével.
+
+## Előadás utáni kvíz
+
+[Előadás utáni kvíz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/40)
+
+## Áttekintés és önálló tanulás
+
+A feladatod, hogy készíts egy új mintajátékot, ezért fedezd fel néhány érdekes játékot, hogy inspirációt kapj, milyen típusú játékot építhetnél.
+
+## Feladat
+
+[Mintajáték készítése](assignment.md)
+
+---
+
+**Felelősség kizárása**:  
+Ez a dokumentum az AI fordítási szolgáltatás [Co-op Translator](https://github.com/Azure/co-op-translator) segítségével lett lefordítva. Bár törekszünk a pontosságra, kérjük, vegye figyelembe, hogy az automatikus fordítások hibákat vagy pontatlanságokat tartalmazhatnak. Az eredeti dokumentum az eredeti nyelvén tekintendő hiteles forrásnak. Kritikus információk esetén javasolt professzionális emberi fordítást igénybe venni. Nem vállalunk felelősséget semmilyen félreértésért vagy téves értelmezésért, amely a fordítás használatából eredhet.
\ No newline at end of file
diff --git a/translations/hu/6-space-game/6-end-condition/assignment.md b/translations/hu/6-space-game/6-end-condition/assignment.md
new file mode 100644
index 00000000..4000c91b
--- /dev/null
+++ b/translations/hu/6-space-game/6-end-condition/assignment.md
@@ -0,0 +1,33 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "24201cf428c7edba1ccec2a78a0dd8f8",
+  "translation_date": "2025-08-28T04:01:34+00:00",
+  "source_file": "6-space-game/6-end-condition/assignment.md",
+  "language_code": "hu"
+}
+-->
+# Készíts egy Példa Játékot
+
+## Útmutató
+
+Próbálj meg egy kis játékot készíteni, ahol különböző befejezési feltételeket gyakorolsz. Változtass például azon, hogy hány pontot kell elérni, a hős elveszíti az összes életét, vagy az összes szörnyet legyőzik. Készíts valami egyszerűt, például egy konzol alapú kalandjátékot. Használd az alábbi játékmenetet inspirációként:
+
+```
+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****
+```
+
+## Értékelési Szempontok
+
+| Kritérium | Kiváló                 | Megfelelő                  | Fejlesztésre Szorul        |
+| --------- | ---------------------- | -------------------------- | -------------------------- |
+|           | teljes játék bemutatva | játék részben bemutatva    | részleges játék hibákat tartalmaz |
+
+---
+
+**Felelősség kizárása**:  
+Ez a dokumentum az AI fordítási szolgáltatás, a [Co-op Translator](https://github.com/Azure/co-op-translator) segítségével lett lefordítva. Bár törekszünk a pontosságra, kérjük, vegye figyelembe, hogy az automatikus fordítások hibákat vagy pontatlanságokat tartalmazhatnak. Az eredeti dokumentum az eredeti nyelvén tekintendő hiteles forrásnak. Kritikus információk esetén javasolt professzionális emberi fordítást igénybe venni. Nem vállalunk felelősséget semmilyen félreértésért vagy téves értelmezésért, amely a fordítás használatából eredhet.
\ No newline at end of file
diff --git a/translations/hu/6-space-game/6-end-condition/solution/README.md b/translations/hu/6-space-game/6-end-condition/solution/README.md
new file mode 100644
index 00000000..9a22ef50
--- /dev/null
+++ b/translations/hu/6-space-game/6-end-condition/solution/README.md
@@ -0,0 +1,15 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "068cbb9b3c10a96d503f6cdd6c9ace8c",
+  "translation_date": "2025-08-28T04:01:53+00:00",
+  "source_file": "6-space-game/6-end-condition/solution/README.md",
+  "language_code": "hu"
+}
+-->
+Ez egy helyőrző, szándékosan üresen hagyva
+
+---
+
+**Felelősség kizárása**:  
+Ez a dokumentum az AI fordítási szolgáltatás [Co-op Translator](https://github.com/Azure/co-op-translator) segítségével lett lefordítva. Bár törekszünk a pontosságra, kérjük, vegye figyelembe, hogy az automatikus fordítások hibákat vagy pontatlanságokat tartalmazhatnak. Az eredeti dokumentum az eredeti nyelvén tekintendő hiteles forrásnak. Fontos információk esetén javasolt professzionális, emberi fordítást igénybe venni. Nem vállalunk felelősséget semmilyen félreértésért vagy téves értelmezésért, amely a fordítás használatából eredhet.
\ No newline at end of file
diff --git a/translations/hu/6-space-game/6-end-condition/your-work/README.md b/translations/hu/6-space-game/6-end-condition/your-work/README.md
new file mode 100644
index 00000000..14203062
--- /dev/null
+++ b/translations/hu/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-28T04:02:06+00:00",
+  "source_file": "6-space-game/6-end-condition/your-work/README.md",
+  "language_code": "hu"
+}
+-->
+Ez egy helyőrző, szándékosan üresen hagyva
+
+---
+
+**Felelősségkizárás**:  
+Ez a dokumentum az [Co-op Translator](https://github.com/Azure/co-op-translator) AI fordítási szolgáltatás segítségével készült. Bár törekszünk a pontosságra, kérjük, vegye figyelembe, hogy az automatikus fordítások hibákat vagy pontatlanságokat tartalmazhatnak. Az eredeti dokumentum az eredeti nyelvén tekintendő hiteles forrásnak. Kritikus információk esetén javasolt professzionális, emberi fordítást igénybe venni. Nem vállalunk felelősséget a fordítás használatából eredő félreértésekért vagy téves értelmezésekért.
\ No newline at end of file
diff --git a/translations/hu/6-space-game/README.md b/translations/hu/6-space-game/README.md
new file mode 100644
index 00000000..de06af31
--- /dev/null
+++ b/translations/hu/6-space-game/README.md
@@ -0,0 +1,45 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "c40a698395ee5102715f7880bba3f2e7",
+  "translation_date": "2025-08-28T03:52:11+00:00",
+  "source_file": "6-space-game/README.md",
+  "language_code": "hu"
+}
+-->
+# Készíts egy Űrjátékot
+
+Egy űrjáték, amely segít elsajátítani a haladó JavaScript alapokat
+
+Ebben a leckében megtanulhatod, hogyan készítsd el saját űrjátékodat. Ha valaha játszottál a "Space Invaders" játékkal, akkor ez a játék hasonló ötletre épül: irányíts egy űrhajót, és lőj le szörnyeket, amelyek felülről érkeznek. Így fog kinézni a kész játék:
+
+![Kész játék](../../../6-space-game/images/pewpew.gif)
+
+Ebben a hat leckében a következőket fogod megtanulni:
+
+- **Interakció** a Canvas elemmel, hogy dolgokat rajzolj a képernyőre
+- **Megértés** a derékszögű koordináta-rendszer működéséről
+- **Tanulás** a Pub-Sub mintáról, hogy könnyebben karbantartható és bővíthető játékarchitektúrát hozz létre
+- **Használat** az Async/Await segítségével a játék erőforrásainak betöltéséhez
+- **Kezelés** a billentyűzet eseményeinek feldolgozásához
+
+## Áttekintés
+
+- Elmélet
+   - [Bevezetés a játékok készítésébe JavaScript segítségével](1-introduction/README.md)
+- Gyakorlat
+   - [Rajzolás a canvasra](2-drawing-to-canvas/README.md)
+   - [Elemek mozgatása a képernyőn](3-moving-elements-around/README.md)
+   - [Ütközésérzékelés](4-collision-detection/README.md)
+   - [Pontszám nyilvántartása](5-keeping-score/README.md)
+   - [A játék befejezése és újraindítása](6-end-condition/README.md)
+
+## Köszönetnyilvánítás
+
+Az ehhez használt eszközök a https://www.kenney.nl/ oldalról származnak.  
+Ha érdekel a játékfejlesztés, ezek igazán jó eszközök, sok közülük ingyenes, néhány pedig fizetős.
+
+---
+
+**Felelősség kizárása**:  
+Ez a dokumentum az AI fordítási szolgáltatás, a [Co-op Translator](https://github.com/Azure/co-op-translator) segítségével lett lefordítva. Bár törekszünk a pontosságra, kérjük, vegye figyelembe, hogy az automatikus fordítások hibákat vagy pontatlanságokat tartalmazhatnak. Az eredeti dokumentum az eredeti nyelvén tekintendő hiteles forrásnak. Kritikus információk esetén javasolt professzionális emberi fordítást igénybe venni. Nem vállalunk felelősséget semmilyen félreértésért vagy téves értelmezésért, amely a fordítás használatából eredhet.
\ No newline at end of file
diff --git a/translations/hu/6-space-game/solution/README.md b/translations/hu/6-space-game/solution/README.md
new file mode 100644
index 00000000..c9d85986
--- /dev/null
+++ b/translations/hu/6-space-game/solution/README.md
@@ -0,0 +1,15 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "068cbb9b3c10a96d503f6cdd6c9ace8c",
+  "translation_date": "2025-08-28T03:56:21+00:00",
+  "source_file": "6-space-game/solution/README.md",
+  "language_code": "hu"
+}
+-->
+Ez egy helyőrző, szándékosan üresen hagyva
+
+---
+
+**Felelősség kizárása**:  
+Ez a dokumentum az AI fordítási szolgáltatás [Co-op Translator](https://github.com/Azure/co-op-translator) segítségével lett lefordítva. Bár törekszünk a pontosságra, kérjük, vegye figyelembe, hogy az automatikus fordítások hibákat vagy pontatlanságokat tartalmazhatnak. Az eredeti dokumentum az eredeti nyelvén tekintendő hiteles forrásnak. Fontos információk esetén javasolt professzionális emberi fordítást igénybe venni. Nem vállalunk felelősséget semmilyen félreértésért vagy téves értelmezésért, amely a fordítás használatából eredhet.
\ No newline at end of file
diff --git a/translations/hu/7-bank-project/1-template-route/README.md b/translations/hu/7-bank-project/1-template-route/README.md
new file mode 100644
index 00000000..a57cff12
--- /dev/null
+++ b/translations/hu/7-bank-project/1-template-route/README.md
@@ -0,0 +1,322 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "8da1b5e2c63f749808858c53f37b8ce7",
+  "translation_date": "2025-08-28T03:36:38+00:00",
+  "source_file": "7-bank-project/1-template-route/README.md",
+  "language_code": "hu"
+}
+-->
+# Banki alkalmazás készítése 1. rész: HTML sablonok és útvonalak egy webalkalmazásban
+
+## Előadás előtti kvíz
+
+[Előadás előtti kvíz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/41)
+
+### Bevezetés
+
+A JavaScript megjelenése óta a böngészőkben a weboldalak interaktívabbá és összetettebbé váltak, mint valaha. A webes technológiákat ma már gyakran használják teljes funkcionalitású alkalmazások létrehozására, amelyek közvetlenül a böngészőben futnak, és amelyeket [webalkalmazásoknak](https://en.wikipedia.org/wiki/Web_application) nevezünk. Mivel a webalkalmazások rendkívül interaktívak, a felhasználók nem szeretnének minden egyes művelet végrehajtásakor teljes oldalfrissítést várni. Ezért használják a JavaScriptet az HTML közvetlen frissítésére a DOM segítségével, hogy gördülékenyebb felhasználói élményt nyújtsanak.
+
+Ebben a leckében lefektetjük egy banki webalkalmazás alapjait, HTML sablonokat használva több képernyő létrehozásához, amelyeket frissítés nélkül megjeleníthetünk és módosíthatunk.
+
+### Előfeltétel
+
+Szükséged lesz egy helyi webszerverre, hogy tesztelhesd a webalkalmazást, amelyet ebben a leckében készítünk. Ha nincs ilyen, telepítsd a [Node.js](https://nodejs.org) programot, és használd a `npx lite-server` parancsot a projektmappádból. Ez létrehoz egy helyi webszervert, és megnyitja az alkalmazásodat egy böngészőben.
+
+### Előkészület
+
+A számítógépeden hozz létre egy `bank` nevű mappát, benne egy `index.html` nevű fájllal. Kezdjük ezzel az HTML [alapsablonnal](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 sablonok
+
+Ha több képernyőt szeretnél létrehozni egy weboldalhoz, az egyik megoldás az lehet, hogy minden megjeleníteni kívánt képernyőhöz külön HTML fájlt hozol létre. Ez a megoldás azonban néhány kényelmetlenséggel jár:
+
+- Az egész HTML-t újra kell tölteni képernyőváltáskor, ami lassú lehet.
+- Nehéz adatokat megosztani a különböző képernyők között.
+
+Egy másik megközelítés az, hogy csak egy HTML fájlt használunk, és több [HTML sablont](https://developer.mozilla.org/docs/Web/HTML/Element/template) definiálunk a `<template>` elem segítségével. A sablon egy újrafelhasználható HTML blokk, amelyet a böngésző nem jelenít meg, és amelyet futásidőben JavaScript segítségével kell létrehozni.
+
+### Feladat
+
+Készítsünk egy banki alkalmazást két képernyővel: a bejelentkezési oldallal és a vezérlőpulttal. Először adjunk hozzá egy helyőrző elemet az HTML törzséhez, amelyet az alkalmazás különböző képernyőinek megjelenítésére használunk:
+
+```html
+<div id="app">Loading...</div>
+```
+
+Egy `id` attribútumot adunk neki, hogy később JavaScript segítségével könnyebben megtaláljuk.
+
+> Tipp: mivel ennek az elemnek a tartalma cserélve lesz, tehetünk bele egy betöltési üzenetet vagy jelzőt, amely az alkalmazás betöltése közben jelenik meg.
+
+Ezután adjuk hozzá az HTML sablont a bejelentkezési oldalhoz. Egyelőre csak egy címet és egy szekciót helyezünk el benne, amely egy navigációs linket tartalmaz.
+
+```html
+<template id="login">
+  <h1>Bank App</h1>
+  <section>
+    <a href="/dashboard">Login</a>
+  </section>
+</template>
+```
+
+Majd adjunk hozzá egy másik HTML sablont a vezérlőpult oldalhoz. Ez az oldal különböző szekciókat fog tartalmazni:
+
+- Egy fejlécet címmel és kijelentkezési linkkel
+- A bankszámla aktuális egyenlegét
+- Egy tranzakciós listát, amely egy táblázatban jelenik meg
+
+```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>
+```
+
+> Tipp: HTML sablonok létrehozásakor, ha meg szeretnéd nézni, hogyan fog kinézni, a `<template>` és `</template>` sorokat megjegyzésbe teheted `<!-- -->` használatával.
+
+✅ Miért használunk `id` attribútumokat a sablonokon? Használhatnánk valami mást, például osztályokat?
+
+## Sablonok megjelenítése JavaScript segítségével
+
+Ha megnyitod a jelenlegi HTML fájlt egy böngészőben, azt fogod látni, hogy a `Loading...` üzenetnél elakad. Ez azért van, mert JavaScript kódot kell hozzáadnunk a HTML sablonok létrehozásához és megjelenítéséhez.
+
+Egy sablon létrehozása általában 3 lépésben történik:
+
+1. A sablonelem lekérése a DOM-ból, például [`document.getElementById`](https://developer.mozilla.org/docs/Web/API/Document/getElementById) használatával.
+2. A sablonelem klónozása [`cloneNode`](https://developer.mozilla.org/docs/Web/API/Node/cloneNode) segítségével.
+3. A DOM-hoz való csatolása egy látható elem alá, például [`appendChild`](https://developer.mozilla.org/docs/Web/API/Node/appendChild) használatával.
+
+✅ Miért kell klónozni a sablont, mielőtt a DOM-hoz csatoljuk? Mi történne, ha kihagynánk ezt a lépést?
+
+### Feladat
+
+Hozz létre egy új fájlt `app.js` néven a projektmappádban, és importáld ezt a fájlt az HTML `<head>` szekciójába:
+
+```html
+<script src="app.js" defer></script>
+```
+
+Most a `app.js` fájlban hozzunk létre egy új `updateRoute` nevű függvényt:
+
+```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);
+}
+```
+
+Itt pontosan a fent leírt 3 lépést hajtjuk végre. Létrehozzuk a sablont a `templateId` azonosítóval, és annak klónozott tartalmát az alkalmazás helyőrzőjébe helyezzük. Figyelj arra, hogy a `cloneNode(true)` használatával az egész sablonfát másoljuk.
+
+Most hívd meg ezt a függvényt az egyik sablonnal, és nézd meg az eredményt.
+
+```js
+updateRoute('login');
+```
+
+✅ Mi a célja ennek a kódnak: `app.innerHTML = '';`? Mi történik nélküle?
+
+## Útvonalak létrehozása
+
+Webalkalmazás esetén az *útvonalkezelés* azt jelenti, hogy **URL-eket** rendelünk hozzá a megjelenítendő képernyőkhöz. Egy több HTML fájlt tartalmazó weboldalon ez automatikusan történik, mivel a fájlútvonalak tükröződnek az URL-ben. Például, ha ezek a fájlok vannak a projektmappádban:
+
+```
+mywebsite/index.html
+mywebsite/login.html
+mywebsite/admin/index.html
+```
+
+Ha létrehozol egy webszervert `mywebsite` gyökérként, az URL-hozzárendelés így néz ki:
+
+```
+https://site.com            --> mywebsite/index.html
+https://site.com/login.html --> mywebsite/login.html
+https://site.com/admin/     --> mywebsite/admin/index.html
+```
+
+Azonban a webalkalmazásunkhoz egyetlen HTML fájlt használunk, amely az összes képernyőt tartalmazza, így ez az alapértelmezett viselkedés nem segít nekünk. Ezt a hozzárendelést manuálisan kell létrehoznunk, és JavaScript segítségével frissítenünk a megjelenített sablont.
+
+### Feladat
+
+Egy egyszerű objektumot fogunk használni, hogy megvalósítsunk egy [térképet](https://en.wikipedia.org/wiki/Associative_array) az URL-útvonalak és a sablonjaink között. Add hozzá ezt az objektumot az `app.js` fájl tetejére.
+
+```js
+const routes = {
+  '/login': { templateId: 'login' },
+  '/dashboard': { templateId: 'dashboard' },
+};
+```
+
+Most módosítsuk egy kicsit az `updateRoute` függvényt. Ahelyett, hogy közvetlenül a `templateId`-t adnánk át argumentumként, először meg kell néznünk az aktuális URL-t, majd a térképünket használva meg kell szereznünk a megfelelő sablonazonosítót. A [`window.location.pathname`](https://developer.mozilla.org/docs/Web/API/Location/pathname) segítségével csak az URL útvonal szakaszát kapjuk meg.
+
+```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);
+}
+```
+
+Itt az általunk deklarált útvonalakat hozzárendeltük a megfelelő sablonhoz. Kipróbálhatod, hogy helyesen működik-e, ha manuálisan megváltoztatod az URL-t a böngésződben.
+
+✅ Mi történik, ha egy ismeretlen útvonalat írsz be az URL-be? Hogyan oldhatnánk meg ezt?
+
+## Navigáció hozzáadása
+
+Az alkalmazásunk következő lépése az, hogy lehetőséget adjunk az oldalak közötti navigációra anélkül, hogy manuálisan kellene megváltoztatni az URL-t. Ez két dolgot jelent:
+
+1. Az aktuális URL frissítése
+2. A megjelenített sablon frissítése az új URL alapján
+
+A második részt már megoldottuk az `updateRoute` függvénnyel, így ki kell találnunk, hogyan frissítsük az aktuális URL-t.
+
+JavaScriptet kell használnunk, pontosabban a [`history.pushState`](https://developer.mozilla.org/docs/Web/API/History/pushState) metódust, amely lehetővé teszi az URL frissítését és egy új bejegyzés létrehozását a böngészési előzményekben, anélkül, hogy újratöltenénk az HTML-t.
+
+> Megjegyzés: Bár az HTML horgony elem [`<a href>`](https://developer.mozilla.org/docs/Web/HTML/Element/a) önmagában is használható különböző URL-ekre mutató hivatkozások létrehozására, alapértelmezés szerint újratölti az HTML-t. Ezt a viselkedést meg kell akadályoznunk, amikor egyedi JavaScript útvonalkezelést használunk, a `preventDefault()` függvény használatával a kattintási eseményen.
+
+### Feladat
+
+Hozzunk létre egy új függvényt, amelyet az alkalmazásunkban navigációra használhatunk:
+
+```js
+function navigate(path) {
+  window.history.pushState({}, path, path);
+  updateRoute();
+}
+```
+
+Ez a metódus először frissíti az aktuális URL-t az adott útvonal alapján, majd frissíti a sablont. A `window.location.origin` tulajdonság visszaadja az URL gyökerét, lehetővé téve, hogy egy adott útvonalból teljes URL-t állítsunk össze.
+
+Most, hogy megvan ez a függvény, foglalkozhatunk azzal a problémával, amely akkor jelentkezik, ha egy útvonal nem egyezik a meghatározott útvonalak egyikével sem. Módosítjuk az `updateRoute` függvényt úgy, hogy hozzáadunk egy visszaesést egy meglévő útvonalhoz, ha nem találunk egyezést.
+
+```js
+function updateRoute() {
+  const path = window.location.pathname;
+  const route = routes[path];
+
+  if (!route) {
+    return navigate('/login');
+  }
+
+  ...
+```
+
+Ha egy útvonal nem található, mostantól a `login` oldalra irányítunk.
+
+Most hozzunk létre egy függvényt, amely az URL-t kapja meg, amikor egy linkre kattintanak, és megakadályozza a böngésző alapértelmezett link viselkedését:
+
+```js
+function onLinkClick(event) {
+  event.preventDefault();
+  navigate(event.target.href);
+}
+```
+
+Egészítsük ki a navigációs rendszert azzal, hogy kötéseket adunk az HTML *Bejelentkezés* és *Kijelentkezés* linkjeihez.
+
+```html
+<a href="/dashboard" onclick="onLinkClick(event)">Login</a>
+...
+<a href="/login" onclick="onLinkClick(event)">Logout</a>
+```
+
+A fenti `event` objektum rögzíti a `click` eseményt, és átadja azt az `onLinkClick` függvényünknek.
+
+Az [`onclick`](https://developer.mozilla.org/docs/Web/API/GlobalEventHandlers/onclick) attribútum használatával kötjük a `click` eseményt JavaScript kódhoz, itt a `navigate()` függvény hívásához.
+
+Próbáld ki ezeket a linkeket, most már képesnek kell lenned az alkalmazás különböző képernyői között navigálni.
+
+✅ A `history.pushState` metódus az HTML5 szabvány része, és [minden modern böngészőben](https://caniuse.com/?search=pushState) implementálva van. Ha webalkalmazást készítesz régebbi böngészőkhöz, van egy trükk, amelyet használhatsz ennek az API-nak a helyett: a [hash (`#`)](https://en.wikipedia.org/wiki/URI_fragment) használatával az útvonalkezelést megvalósíthatod, amely működik a szokásos horgonynavigációval, és nem tölti újra az oldalt, mivel eredetileg belső hivatkozások létrehozására szolgált egy oldalon belül.
+
+## A böngésző vissza- és előre gombjainak kezelése
+
+A `history.pushState` használata új bejegyzéseket hoz létre a böngésző navigációs előzményeiben. Ezt ellenőrizheted, ha lenyomva tartod a böngésződ *vissza gombját*, valami ilyesmit kell látnod:
+
+![Navigációs előzmények képernyőképe](../../../../translated_images/history.7fdabbafa521e06455b738d3dafa3ff41d3071deae60ead8c7e0844b9ed987d8.hu.png)
+
+Ha néhányszor rákattintasz a vissza gombra, látni fogod, hogy az aktuális URL megváltozik, és az előzmények frissülnek, de ugyanaz a sablon jelenik meg.
+
+Ez azért van, mert az alkalmazás nem tudja, hogy minden alkalommal, amikor az előzmények megváltoznak, meg kell hívnunk az `updateRoute()` függvényt. Ha megnézed a [`history.pushState` dokumentációját](https://developer.mozilla.org/docs/Web/API/History/pushState), láthatod, hogy ha az állapot megváltozik - azaz egy másik URL-re léptünk -, a [`popstate`](https://developer.mozilla.org/docs/Web/API/Window/popstate_event) esemény aktiválódik. Ezt fogjuk használni a probléma megoldására.
+
+### Feladat
+
+Annak biztosítása érdekében, hogy a megjelenített sablon frissüljön, amikor a böngésző előzményei megváltoznak, egy új függvényt csatolunk, amely meghívja az `updateRoute()` függvényt. Ezt az `app.js` fájl alján tesszük meg:
+
+```js
+window.onpopstate = () => updateRoute();
+updateRoute();
+```
+
+> Megjegyzés: itt egy [nyílfüggvényt](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions) használtunk a `popstate` eseménykezelő deklarálásához tömörség érdekében, de egy hagyományos függvény is ugyanúgy működne.
+
+Itt van egy frissítő videó a nyílfüggvényekről:
+
+[![Nyílfüggvények](https://img.youtube.com/vi/OP6eEbOj2sc/0.jpg)](https://youtube.com/watch?v=OP6eEbOj2sc "Nyílfüggvények")
+
+> 🎥 Kattints a fenti képre egy videóért a nyílfüggvényekről.
+
+Most próbáld ki a böngésződ vissza- és előre gombjait, és ellenőrizd, hogy a megjelenített útvonal helyesen frissül-e ezúttal.
+
+---
+
+## 🚀 Kihívás
+
+Adj hozzá egy új sablont és útvonalat egy harmadik oldalhoz, amely az alkalmazás készítőinek nevét mutatja.
+
+## Előadás utáni kvíz
+
+[Előadás utáni kvíz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/42)
+
+## Áttekintés és önálló tanulás
+
+Az útvonalkezelés a webfejlesztés egyik meglepően bonyolult része, különösen, ahogy a web a lapfrissítési viselkedésekről az Egylapos Alkalmazások lapfrissítéseire vált. Olvass egy kicsit arról, hogy az [Azure Static Web App szolgáltatás](https://docs.microsoft.com/azure/static-web-apps/routes/?WT.mc_id=academic-77807-sagibbon) hogyan kezeli az útvonalakat. Meg tudod magyarázni, miért szükségesek az ott leírt döntések?
+
+## Feladat
+
+[Fejleszd az útvonalkezelést](assignment.md)
+
+---
+
+**Felelősség kizárása**:  
+Ez a dokumentum az AI fordítási szolgáltatás, a [Co-op Translator](https://github.com/Azure/co-op-translator) segítségével lett lefordítva. Bár törekszünk a pontosságra, kérjük, vegye figyelembe, hogy az automatikus fordítások hibákat vagy pontatlanságokat tartalmazhatnak. Az eredeti dokumentum az eredeti nyelvén tekintendő hiteles forrásnak. Kritikus információk esetén javasolt professzionális, emberi fordítást igénybe venni. Nem vállalunk felelősséget semmilyen félreértésért vagy téves értelmezésért, amely a fordítás használatából eredhet.
\ No newline at end of file
diff --git a/translations/hu/7-bank-project/1-template-route/assignment.md b/translations/hu/7-bank-project/1-template-route/assignment.md
new file mode 100644
index 00000000..cd6fbcd5
--- /dev/null
+++ b/translations/hu/7-bank-project/1-template-route/assignment.md
@@ -0,0 +1,28 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "8223e429218befa731dd5bfd22299520",
+  "translation_date": "2025-08-28T03:38:13+00:00",
+  "source_file": "7-bank-project/1-template-route/assignment.md",
+  "language_code": "hu"
+}
+-->
+# Javítsuk a routingot
+
+## Útmutató
+
+A jelenlegi útvonalak deklarációja csak a használni kívánt sablon azonosítóját tartalmazza. Azonban egy új oldal megjelenítésekor néha ennél többre van szükség. Fejlesszük tovább a routing megvalósítását két további funkcióval:
+
+- Adjunk címeket minden sablonnak, és frissítsük az ablak címét az új címmel, amikor a sablon megváltozik.
+- Adjunk hozzá egy lehetőséget, hogy kódot futtassunk a sablon megváltozása után. Azt szeretnénk, hogy minden alkalommal, amikor a dashboard oldal megjelenik, a fejlesztői konzolban megjelenjen a következő üzenet: `'Dashboard is shown'`.
+
+## Értékelési szempontok
+
+| Kritérium | Kiváló                                                                                                                             | Megfelelő                                                                                                                                                                                 | Fejlesztésre szorul                                      |
+| --------- | ----------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- |
+|           | A két funkció megvalósítva és működik. A cím és a kód hozzáadása egy új útvonalhoz a `routes` deklarációban szintén működik.         | A két funkció működik, de a viselkedés hardkódolt, és nem konfigurálható a `routes` deklaráción keresztül. Egy harmadik útvonal hozzáadása címmel és kóddal nem működik, vagy csak részben. | Az egyik funkció hiányzik vagy nem működik megfelelően. |
+
+---
+
+**Felelősség kizárása**:  
+Ez a dokumentum az AI fordítási szolgáltatás, a [Co-op Translator](https://github.com/Azure/co-op-translator) segítségével lett lefordítva. Bár törekszünk a pontosságra, kérjük, vegye figyelembe, hogy az automatikus fordítások hibákat vagy pontatlanságokat tartalmazhatnak. Az eredeti dokumentum az eredeti nyelvén tekintendő hiteles forrásnak. Kritikus információk esetén javasolt professzionális emberi fordítást igénybe venni. Nem vállalunk felelősséget semmilyen félreértésért vagy téves értelmezésért, amely a fordítás használatából eredhet.
\ No newline at end of file
diff --git a/translations/hu/7-bank-project/2-forms/README.md b/translations/hu/7-bank-project/2-forms/README.md
new file mode 100644
index 00000000..6fe003c7
--- /dev/null
+++ b/translations/hu/7-bank-project/2-forms/README.md
@@ -0,0 +1,203 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "b667b7d601e2ee19acb5aa9d102dc9f3",
+  "translation_date": "2025-08-28T03:30:07+00:00",
+  "source_file": "7-bank-project/2-forms/README.md",
+  "language_code": "hu"
+}
+-->
+# Banki alkalmazás készítése 2. rész: Bejelentkezési és regisztrációs űrlap létrehozása
+
+## Előadás előtti kvíz
+
+[Előadás előtti kvíz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/43)
+
+### Bevezetés
+
+Szinte minden modern webalkalmazásban lehetőséged van fiók létrehozására, hogy saját privát tered legyen. Mivel egyszerre több felhasználó is hozzáférhet egy webalkalmazáshoz, szükség van egy mechanizmusra, amely külön tárolja az egyes felhasználók személyes adatait, és kiválasztja, hogy mely információkat jelenítse meg. Nem térünk ki arra, hogyan kell [biztonságosan kezelni a felhasználói azonosítást](https://en.wikipedia.org/wiki/Authentication), mivel ez önmagában is egy kiterjedt téma, de gondoskodunk arról, hogy minden felhasználó létrehozhasson egy (vagy több) bankszámlát az alkalmazásunkban.
+
+Ebben a részben HTML-űrlapokat fogunk használni a bejelentkezés és regisztráció hozzáadásához a webalkalmazásunkhoz. Megnézzük, hogyan lehet programozottan adatokat küldeni egy szerver API-nak, és végül hogyan lehet alapvető érvényességi szabályokat meghatározni a felhasználói bemenetekhez.
+
+### Előfeltétel
+
+El kell végezned a webalkalmazás [HTML sablonok és útvonalak](../1-template-route/README.md) leckéjét. Telepítened kell a [Node.js](https://nodejs.org) alkalmazást, és [helyileg futtatnod kell a szerver API-t](../api/README.md), hogy adatokat tudj küldeni a fiókok létrehozásához.
+
+**Fontos megjegyzés**  
+Két terminált kell egyszerre futtatnod, az alábbiak szerint:  
+1. Az általunk készített fő banki alkalmazás számára, amelyet a [HTML sablonok és útvonalak](../1-template-route/README.md) leckében készítettünk.  
+2. A [Banki alkalmazás szerver API](../api/README.md) számára, amelyet az előzőekben állítottunk be.  
+
+A lecke folytatásához mindkét szervert futtatnod kell. Ezek különböző portokon hallgatnak (port `3000` és port `5000`), így minden rendben kell, hogy működjön.
+
+Ellenőrizheted, hogy a szerver megfelelően fut-e, ha végrehajtod az alábbi parancsot egy terminálban:
+
+```sh
+curl http://localhost:5000/api
+# -> should return "Bank API v1.0.0" as a result
+```
+
+---
+
+## Űrlapok és vezérlők
+
+A `<form>` elem egy HTML-dokumentum azon szakaszát foglalja magában, ahol a felhasználó adatokat adhat meg és küldhet el interaktív vezérlők segítségével. Számos felhasználói felület (UI) vezérlő használható egy űrlapon belül, amelyek közül a leggyakoribbak a `<input>` és `<button>` elemek.
+
+Számos különböző [típus](https://developer.mozilla.org/docs/Web/HTML/Element/input) létezik a `<input>` elemekhez. Például, ha egy mezőt szeretnél létrehozni, ahol a felhasználó megadhatja a felhasználónevét, használhatod az alábbi kódot:
+
+```html
+<input id="username" name="username" type="text">
+```
+
+A `name` attribútumot a tulajdonság nevének használják, amikor az űrlap adatait elküldik. Az `id` attribútumot pedig arra használják, hogy egy `<label>` elemet társítsanak az űrlapvezérlőhöz.
+
+> Nézd meg a [`<input>` típusok](https://developer.mozilla.org/docs/Web/HTML/Element/input) és [egyéb űrlapvezérlők](https://developer.mozilla.org/docs/Learn/Forms/Other_form_controls) teljes listáját, hogy képet kapj az összes natív UI-elemről, amelyet használhatsz az UI építésekor.
+
+✅ Fontos megjegyezni, hogy a `<input>` egy [üres elem](https://developer.mozilla.org/docs/Glossary/Empty_element), amelyhez *nem* kell záró címkét hozzáadni. Használhatod azonban az önzáró `<input/>` jelölést, de ez nem kötelező.
+
+A `<button>` elem egy űrlapon belül kicsit különleges. Ha nem adsz meg `type` attribútumot, akkor alapértelmezés szerint elküldi az űrlap adatait a szervernek, amikor megnyomják. Az alábbiakban láthatók a lehetséges `type` értékek:
+
+- `submit`: Alapértelmezett érték egy `<form>`-on belül, a gomb az űrlap elküldését indítja el.
+- `reset`: A gomb visszaállítja az összes űrlapvezérlőt az eredeti értékeire.
+- `button`: Nem rendel alapértelmezett viselkedést a gombhoz. Egyedi műveleteket rendelhetsz hozzá JavaScript segítségével.
+
+### Feladat
+
+Kezdjük azzal, hogy hozzáadunk egy űrlapot a `login` sablonhoz. Szükségünk lesz egy *felhasználónév* mezőre és egy *Bejelentkezés* gombra.
+
+```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>
+```
+
+Ha közelebbről megnézed, észreveheted, hogy itt egy `<label>` elemet is hozzáadtunk. A `<label>` elemeket arra használják, hogy nevet adjanak a UI-vezérlőknek, például a felhasználónév mezőnknek. A címkék fontosak az űrlapok olvashatósága szempontjából, de további előnyökkel is járnak:
+
+- Egy címke társítása egy űrlapvezérlőhöz segíti a segítő technológiákat használó felhasználókat (például képernyőolvasót), hogy megértsék, milyen adatokat várnak tőlük.
+- A címkére kattintva közvetlenül a kapcsolódó bemenetre helyezheted a fókuszt, ami megkönnyíti az elérést érintőképernyős eszközökön.
+
+> A [hozzáférhetőség](https://developer.mozilla.org/docs/Learn/Accessibility/What_is_accessibility) a weben egy nagyon fontos téma, amelyet gyakran figyelmen kívül hagynak. A [szemantikus HTML-elemek](https://developer.mozilla.org/docs/Learn/Accessibility/HTML) használatával nem nehéz hozzáférhető tartalmat létrehozni, ha megfelelően használod őket. [Olvass többet a hozzáférhetőségről](https://developer.mozilla.org/docs/Web/Accessibility), hogy elkerüld a gyakori hibákat, és felelősségteljes fejlesztővé válj.
+
+Most adjunk hozzá egy második űrlapot a regisztrációhoz, közvetlenül az előző alá:
+
+```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>
+```
+
+A `value` attribútum használatával alapértelmezett értéket adhatunk meg egy adott bemenethez.  
+Figyeld meg, hogy a `balance` mezőhöz a `number` típust használtuk. Másképp néz ki, mint a többi mező? Próbáld ki, hogyan lehet vele interakcióba lépni.
+
+✅ Tudsz navigálni és interakcióba lépni az űrlapokkal csak billentyűzet használatával? Hogyan tennéd ezt?
+
+## Adatok elküldése a szervernek
+
+Most, hogy van egy működő felhasználói felületünk, a következő lépés az adatok elküldése a szervernek. Próbáljuk ki gyorsan a jelenlegi kódunkkal: mi történik, ha rákattintasz a *Bejelentkezés* vagy *Regisztráció* gombra?
+
+Észrevetted a változást a böngésződ URL-sávjában?
+
+![Képernyőkép a böngésző URL-változásáról a Regisztráció gombra kattintás után](../../../../translated_images/click-register.e89a30bf0d4bc9ca867dc537c4cea679a7c26368bd790969082f524fed2355bc.hu.png)
+
+Az alapértelmezett művelet egy `<form>` esetében az, hogy az űrlapot elküldi az aktuális szerver URL-jére a [GET metódus](https://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.3) használatával, az űrlap adatait közvetlenül az URL-hez fűzve. Ez a módszer azonban néhány hátránnyal jár:
+
+- Az elküldött adatok mérete nagyon korlátozott (kb. 2000 karakter).
+- Az adatok közvetlenül láthatók az URL-ben (nem ideális jelszavak esetén).
+- Nem működik fájlok feltöltésével.
+
+Ezért megváltoztathatod a metódust [POST metódusra](https://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.5), amely az űrlap adatait a HTTP-kérés törzsében küldi el a szervernek, az előző korlátozások nélkül.
+
+> Bár a POST a leggyakrabban használt módszer az adatok elküldésére, [bizonyos speciális esetekben](https://www.w3.org/2001/tag/doc/whenToUseGet.html) előnyösebb lehet a GET metódus használata, például keresőmező megvalósításakor.
+
+### Feladat
+
+Adj hozzá `action` és `method` tulajdonságokat a regisztrációs űrlaphoz:
+
+```html
+<form id="registerForm" action="//localhost:5000/api/accounts" method="POST">
+```
+
+Most próbálj meg regisztrálni egy új fiókot a neveddel. A *Regisztráció* gombra kattintás után valami ilyesmit kell látnod:
+
+![Böngészőablak a localhost:5000/api/accounts címen, amely JSON-karakterláncot mutat a felhasználói adatokkal](../../../../translated_images/form-post.61de4ca1b964d91a9e338416e19f218504dd0af5f762fbebabfe7ae80edf885f.hu.png)
+
+Ha minden rendben van, a szerver válaszol a kérésedre egy [JSON](https://www.json.org/json-en.html) válasszal, amely tartalmazza a létrehozott fiók adatait.
+
+✅ Próbálj meg újra regisztrálni ugyanazzal a névvel. Mi történik?
+Tipp: A `:valid` és `:invalid` CSS pszeudo-osztályok használatával testre szabhatod az űrlapvezérlők megjelenését attól függően, hogy érvényesek-e vagy sem.
+### Feladat
+
+Egy új fiók létrehozásához két kötelező mező van: a felhasználónév és a pénznem, a többi mező opcionális. Frissítsd a form HTML-jét úgy, hogy a `required` attribútumot és a mező címkéjében szereplő szöveget is használd:
+
+```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>
+```
+
+Bár ez a konkrét szervermegvalósítás nem szab meg konkrét korlátokat a mezők maximális hosszára, mindig jó gyakorlat ésszerű korlátokat meghatározni a felhasználói szövegbevitelnél.
+
+Adj hozzá egy `maxlength` attribútumot a szövegmezőkhöz:
+
+```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">
+```
+
+Ha most megnyomod a *Regisztráció* gombot, és egy mező nem felel meg az általunk meghatározott érvényességi szabályoknak, akkor valami ilyesmit kellene látnod:
+
+![Képernyőkép, amely a validációs hibát mutatja, amikor megpróbáljuk elküldeni az űrlapot](../../../../translated_images/validation-error.8bd23e98d416c22f80076d04829a4bb718e0e550fd622862ef59008ccf0d5dce.hu.png)
+
+Az ilyen validáció, amely *mielőtt* bármilyen adatot elküldenénk a szervernek történik, **kliensoldali** validációnak nevezik. De vedd figyelembe, hogy nem mindig lehetséges minden ellenőrzést elvégezni az adatok elküldése nélkül. Például itt nem tudjuk ellenőrizni, hogy létezik-e már egy fiók ugyanazzal a felhasználónévvel, anélkül hogy kérés küldenénk a szervernek. A szerveren végzett további ellenőrzést **szerveroldali** validációnak nevezzük.
+
+Általában mindkettőt meg kell valósítani, és bár a kliensoldali validáció javítja a felhasználói élményt azáltal, hogy azonnali visszajelzést ad a felhasználónak, a szerveroldali validáció elengedhetetlen annak biztosításához, hogy a kezelt felhasználói adatok megbízhatóak és biztonságosak legyenek.
+
+---
+
+## 🚀 Kihívás
+
+Mutass egy hibaüzenetet a HTML-ben, ha a felhasználó már létezik.
+
+Íme egy példa arra, hogyan nézhet ki a végleges bejelentkezési oldal egy kis stílus hozzáadása után:
+
+![Képernyőkép a bejelentkezési oldalról, miután CSS stílusokat adtunk hozzá](../../../../translated_images/result.96ef01f607bf856aa9789078633e94a4f7664d912f235efce2657299becca483.hu.png)
+
+## Előadás utáni kvíz
+
+[Előadás utáni kvíz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/44)
+
+## Áttekintés és önálló tanulás
+
+A fejlesztők nagyon kreatívak lettek az űrlapkészítési megoldásaikban, különösen a validációs stratégiák terén. Ismerd meg a különböző űrlapfolyamatokat a [CodePen](https://codepen.com) böngészésével; találsz érdekes és inspiráló űrlapokat?
+
+## Feladat
+
+[Stílusozd a banki alkalmazásodat](assignment.md)
+
+---
+
+**Felelősségkizárás**:  
+Ez a dokumentum az [Co-op Translator](https://github.com/Azure/co-op-translator) AI fordítási szolgáltatás segítségével készült. Bár törekszünk a pontosságra, kérjük, vegye figyelembe, hogy az automatikus fordítások hibákat vagy pontatlanságokat tartalmazhatnak. Az eredeti dokumentum az eredeti nyelvén tekintendő hiteles forrásnak. Kritikus információk esetén javasolt a professzionális, emberi fordítás igénybevétele. Nem vállalunk felelősséget a fordítás használatából eredő félreértésekért vagy téves értelmezésekért.
\ No newline at end of file
diff --git a/translations/hu/7-bank-project/2-forms/assignment.md b/translations/hu/7-bank-project/2-forms/assignment.md
new file mode 100644
index 00000000..b5e6458c
--- /dev/null
+++ b/translations/hu/7-bank-project/2-forms/assignment.md
@@ -0,0 +1,27 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "474f3ab1ee755ca980fc9104a0316e17",
+  "translation_date": "2025-08-28T03:31:52+00:00",
+  "source_file": "7-bank-project/2-forms/assignment.md",
+  "language_code": "hu"
+}
+-->
+# Stílusozd a banki alkalmazásodat
+
+## Útmutató
+
+Hozz létre egy új `styles.css` fájlt, és adj hozzá egy hivatkozást a jelenlegi `index.html` fájlodhoz. Az imént létrehozott CSS fájlban adj hozzá némi stílust, hogy a *Bejelentkezés* és *Irányítópult* oldalak szépek és rendezettek legyenek. Próbálj meg egy színtémát létrehozni, hogy az alkalmazásod saját arculatot kapjon.
+
+> Tipp: ha szükséges, módosíthatod a HTML-t, és új elemeket vagy osztályokat adhatsz hozzá.
+
+## Értékelési szempontok
+
+| Kritérium | Kiváló                                                                                                                 | Megfelelő                                                                     | Fejlesztésre szoruló                                                                         |
+| --------- | ----------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------- |
+|           | Az összes oldal tiszta és jól olvasható, egységes színtémával, és a különböző szekciók megfelelően kiemelkednek.        | Az oldalak stílusozottak, de nincs téma, vagy a szekciók nem egyértelműen elkülönítettek. | Az oldalak stílustalanok, a szekciók rendezetlenek, és az információ nehezen olvasható.       |
+
+---
+
+**Felelősség kizárása**:  
+Ez a dokumentum az AI fordítási szolgáltatás [Co-op Translator](https://github.com/Azure/co-op-translator) segítségével lett lefordítva. Bár törekszünk a pontosságra, kérjük, vegye figyelembe, hogy az automatikus fordítások hibákat vagy pontatlanságokat tartalmazhatnak. Az eredeti dokumentum az eredeti nyelvén tekintendő hiteles forrásnak. Fontos információk esetén javasolt professzionális emberi fordítást igénybe venni. Nem vállalunk felelősséget semmilyen félreértésért vagy téves értelmezésért, amely a fordítás használatából eredhet.
\ No newline at end of file
diff --git a/translations/hu/7-bank-project/3-data/README.md b/translations/hu/7-bank-project/3-data/README.md
new file mode 100644
index 00000000..0128182e
--- /dev/null
+++ b/translations/hu/7-bank-project/3-data/README.md
@@ -0,0 +1,308 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "f587e913e3f7c0b1c549a05dd74ee8e5",
+  "translation_date": "2025-08-28T03:25:32+00:00",
+  "source_file": "7-bank-project/3-data/README.md",
+  "language_code": "hu"
+}
+-->
+# Banki alkalmazás készítése 3. rész: Adatok lekérése és felhasználása
+
+## Előadás előtti kvíz
+
+[Előadás előtti kvíz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/45)
+
+### Bevezetés
+
+Minden webalkalmazás középpontjában az *adatok* állnak. Az adatok sokféle formát ölthetnek, de fő céljuk mindig az, hogy információt jelenítsenek meg a felhasználó számára. Ahogy a webalkalmazások egyre interaktívabbá és összetettebbé válnak, az, hogy a felhasználó hogyan fér hozzá az információkhoz és hogyan lép velük kapcsolatba, kulcsfontosságúvá vált a webfejlesztésben.
+
+Ebben a leckében azt fogjuk megvizsgálni, hogyan lehet aszinkron módon adatokat lekérni egy szerverről, és ezeket az adatokat úgy megjeleníteni egy weboldalon, hogy közben ne kelljen újratölteni az oldalt.
+
+### Előfeltétel
+
+Ehhez a leckéhez szükséges, hogy már elkészítetted a webalkalmazás [Bejelentkezési és Regisztrációs űrlap](../2-forms/README.md) részét. Továbbá telepítened kell a [Node.js](https://nodejs.org) alkalmazást, és helyileg futtatnod kell a [szerver API-t](../api/README.md), hogy hozzáférj a fiókadatokhoz.
+
+Ellenőrizheted, hogy a szerver megfelelően fut-e, ha a következő parancsot futtatod egy terminálban:
+
+```sh
+curl http://localhost:5000/api
+# -> should return "Bank API v1.0.0" as a result
+```
+
+---
+
+## AJAX és adatlekérés
+
+A hagyományos weboldalak akkor frissítik a megjelenített tartalmat, amikor a felhasználó egy linkre kattint vagy adatokat küld be egy űrlapon keresztül, azáltal, hogy újratöltik a teljes HTML oldalt. Minden alkalommal, amikor új adatokat kell betölteni, a webszerver egy teljesen új HTML oldalt küld vissza, amelyet a böngészőnek fel kell dolgoznia, megszakítva ezzel a felhasználó aktuális tevékenységét, és korlátozva az interakciókat az újratöltés ideje alatt. Ezt a munkafolyamatot *többoldalas alkalmazásnak* vagy *MPA-nak* nevezik.
+
+![Frissítési munkafolyamat egy többoldalas alkalmazásban](../../../../translated_images/mpa.7f7375a1a2d4aa779d3f928a2aaaf9ad76bcdeb05cfce2dc27ab126024050f51.hu.png)
+
+Amikor a webalkalmazások egyre összetettebbé és interaktívabbá váltak, megjelent egy új technika, az [AJAX (Asynchronous JavaScript and XML)](https://en.wikipedia.org/wiki/Ajax_(programming)). Ez a technika lehetővé teszi, hogy a webalkalmazások JavaScript segítségével aszinkron módon küldjenek és fogadjanak adatokat a szerverről, anélkül hogy újratöltenék az oldalt. Ez gyorsabb frissítéseket és gördülékenyebb felhasználói élményt eredményez. Amikor új adatok érkeznek a szervertől, a jelenlegi HTML oldalt JavaScript segítségével frissíthetjük a [DOM](https://developer.mozilla.org/docs/Web/API/Document_Object_Model) API használatával. Idővel ez a megközelítés fejlődött, és ma már *egyetlen oldalas alkalmazásnak* vagy *SPA-nak* nevezik.
+
+![Frissítési munkafolyamat egy egyoldalas alkalmazásban](../../../../translated_images/spa.268ec73b41f992c2a21ef9294235c6ae597b3c37e2c03f0494c2d8857325cc57.hu.png)
+
+Amikor az AJAX először megjelent, az egyetlen elérhető API az aszinkron adatlekéréshez az [`XMLHttpRequest`](https://developer.mozilla.org/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest) volt. Azonban a modern böngészők már támogatják a kényelmesebb és erőteljesebb [`Fetch` API-t](https://developer.mozilla.org/docs/Web/API/Fetch_API), amely ígéreteket használ, és jobban alkalmas JSON adatok kezelésére.
+
+> Bár minden modern böngésző támogatja a `Fetch API`-t, ha azt szeretnéd, hogy a webalkalmazásod régebbi böngészőkön is működjön, mindig érdemes először ellenőrizni a [caniuse.com kompatibilitási táblázatát](https://caniuse.com/fetch).
+
+### Feladat
+
+Az [előző leckében](../2-forms/README.md) megvalósítottuk a regisztrációs űrlapot egy fiók létrehozásához. Most kódot fogunk hozzáadni a meglévő fiókkal való bejelentkezéshez és az adatok lekéréséhez. Nyisd meg az `app.js` fájlt, és adj hozzá egy új `login` függvényt:
+
+```js
+async function login() {
+  const loginForm = document.getElementById('loginForm')
+  const user = loginForm.user.value;
+}
+```
+
+Itt az `getElementById()` segítségével először lekérjük az űrlap elemet, majd az `loginForm.user.value` segítségével megszerezzük a felhasználónevet az input mezőből. Minden űrlapvezérlő elérhető a nevével (amelyet a HTML-ben a `name` attribútummal állítunk be) az űrlap tulajdonságaként.
+
+Hasonlóan a regisztrációhoz, létrehozunk egy másik függvényt a szerver kérés végrehajtásához, de ezúttal a fiókadatok lekérésére:
+
+```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' };
+  }
+}
+```
+
+A `fetch` API-t használjuk az adatok aszinkron lekérésére a szerverről, de ezúttal nincs szükségünk további paraméterekre a hívandó URL-en kívül, mivel csak adatokat kérdezünk le. Alapértelmezés szerint a `fetch` egy [`GET`](https://developer.mozilla.org/docs/Web/HTTP/Methods/GET) HTTP kérést hoz létre, amely pontosan az, amire itt szükségünk van.
+
+✅ Az `encodeURIComponent()` egy olyan függvény, amely speciális karaktereket kódol URL-ekhez. Milyen problémák merülhetnek fel, ha nem hívjuk meg ezt a függvényt, és közvetlenül használjuk a `user` értéket az URL-ben?
+
+Most frissítsük a `login` függvényünket, hogy használja a `getAccount`-ot:
+
+```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');
+}
+```
+
+Először, mivel a `getAccount` egy aszinkron függvény, az `await` kulcsszóval kell párosítanunk, hogy megvárjuk a szerver eredményét. Mint minden szerver kérésnél, itt is kezelni kell a hibás eseteket. Egyelőre csak egy naplóüzenetet adunk hozzá a hiba megjelenítéséhez, és később visszatérünk rá.
+
+Ezután el kell mentenünk az adatokat valahova, hogy később felhasználhassuk őket a műszerfal információinak megjelenítéséhez. Mivel az `account` változó még nem létezik, létrehozunk egy globális változót a fájl tetején:
+
+```js
+let account = null;
+```
+
+Miután a felhasználói adatokat elmentettük egy változóba, a *bejelentkezési* oldalról a *műszerfalra* navigálhatunk a már meglévő `navigate()` függvény használatával.
+
+Végül, a `login` függvényünket akkor kell meghívni, amikor a bejelentkezési űrlapot elküldik, az alábbi HTML módosításával:
+
+```html
+<form id="loginForm" action="javascript:login()">
+```
+
+Teszteld, hogy minden megfelelően működik-e, ha regisztrálsz egy új fiókot, majd megpróbálsz bejelentkezni ugyanazzal a fiókkal.
+
+Mielőtt továbblépnénk a következő részre, kiegészíthetjük a `register` függvényt az alábbi kóddal a függvény végén:
+
+```js
+account = result;
+navigate('/dashboard');
+```
+
+✅ Tudtad, hogy alapértelmezés szerint csak ugyanazon *domainről és portról* hívhatsz szerver API-kat, mint amelyen a megtekintett weboldal fut? Ez egy böngészők által érvényesített biztonsági mechanizmus. De várjunk csak, a webalkalmazásunk a `localhost:3000`-en fut, míg a szerver API a `localhost:5000`-en, akkor miért működik? A [Cross-Origin Resource Sharing (CORS)](https://developer.mozilla.org/docs/Web/HTTP/CORS) nevű technika használatával lehetőség van kereszt-domain HTTP kérések végrehajtására, ha a szerver speciális fejléceket ad a válaszhoz, amelyek engedélyezik az adott domainek kivételeit.
+
+> Tudj meg többet az API-król ebben a [leckében](https://docs.microsoft.com/learn/modules/use-apis-discover-museum-art/?WT.mc_id=academic-77807-sagibbon).
+
+## HTML frissítése az adatok megjelenítéséhez
+
+Most, hogy megvannak a felhasználói adatok, frissítenünk kell a meglévő HTML-t, hogy megjelenítse azokat. Már tudjuk, hogyan lehet egy elemet lekérni a DOM-ból például a `document.getElementById()` segítségével. Miután van egy alap elemünk, az alábbi API-kat használhatjuk annak módosítására vagy gyermekelemek hozzáadására:
+
+- A [`textContent`](https://developer.mozilla.org/docs/Web/API/Node/textContent) tulajdonság használatával megváltoztathatjuk egy elem szövegét. Ne feledd, hogy ennek az értéknek a megváltoztatása eltávolítja az elem összes gyermekét (ha van), és helyettesíti a megadott szöveggel. Ezért ez egy hatékony módszer is lehet egy adott elem összes gyermekének eltávolítására, ha üres karakterláncot (`''`) rendelünk hozzá.
+
+- A [`document.createElement()`](https://developer.mozilla.org/docs/Web/API/Document/createElement) és az [`append()`](https://developer.mozilla.org/docs/Web/API/ParentNode/append) metódusok használatával új gyermekelemeket hozhatunk létre és csatolhatunk.
+
+✅ Az [`innerHTML`](https://developer.mozilla.org/docs/Web/API/Element/innerHTML) tulajdonság használatával egy elem HTML tartalmát is megváltoztathatjuk, de ezt kerülni kell, mivel sebezhető a [cross-site scripting (XSS)](https://developer.mozilla.org/docs/Glossary/Cross-site_scripting) támadásokkal szemben.
+
+### Feladat
+
+Mielőtt továbblépnénk a műszerfal képernyőre, van még egy dolog, amit meg kell tennünk a *bejelentkezési* oldalon. Jelenleg, ha megpróbálsz bejelentkezni egy nem létező felhasználónévvel, egy üzenet jelenik meg a konzolban, de egy átlagos felhasználó számára semmi sem változik, és nem tudja, mi történik.
+
+Adjunk hozzá egy helyőrző elemet a bejelentkezési űrlaphoz, ahol szükség esetén megjeleníthetünk egy hibaüzenetet. Egy jó hely lehet például a bejelentkezési `<button>` előtt:
+
+```html
+...
+<div id="loginError"></div>
+<button>Login</button>
+...
+```
+
+Ez a `<div>` elem üres, ami azt jelenti, hogy semmi sem jelenik meg a képernyőn, amíg nem adunk hozzá tartalmat. Az `id` attribútumot is megadjuk, hogy könnyen lekérhessük JavaScript segítségével.
+
+Térj vissza az `app.js` fájlhoz, és hozz létre egy új segédfüggvényt `updateElement` néven:
+
+```js
+function updateElement(id, text) {
+  const element = document.getElementById(id);
+  element.textContent = text;
+}
+```
+
+Ez a függvény egyszerű: egy elem *id*-jét és *szövegét* megadva frissíti a DOM elem szövegtartalmát a megfelelő `id` alapján. Használjuk ezt a metódust a korábbi hibaüzenet helyett a `login` függvényben:
+
+```js
+if (data.error) {
+  return updateElement('loginError', data.error);
+}
+```
+
+Most, ha megpróbálsz bejelentkezni egy érvénytelen fiókkal, valami ilyesmit kell látnod:
+
+![Képernyőkép a bejelentkezés során megjelenő hibaüzenetről](../../../../translated_images/login-error.416fe019b36a63276764c2349df5d99e04ebda54fefe60c715ee87a28d5d4ad0.hu.png)
+
+Most már van egy vizuálisan megjelenő hibaüzenetünk, de ha képernyőolvasóval próbálod, észre fogod venni, hogy semmi sem kerül bejelentésre. Ahhoz, hogy a dinamikusan hozzáadott szöveget a képernyőolvasók bejelentsék, egy úgynevezett [Live Region](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/ARIA_Live_Regions) használatára van szükség. Itt egy speciális típusú live region-t, egy figyelmeztetést (alert) fogunk használni:
+
+```html
+<div id="loginError" role="alert"></div>
+```
+
+Ugyanezt a viselkedést valósítsd meg a `register` függvény hibái esetén is (ne felejtsd el frissíteni a HTML-t).
+
+## Információk megjelenítése a műszerfalon
+
+Ugyanezeket a technikákat használva gondoskodunk a fiókadatok megjelenítéséről a műszerfal oldalon.
+
+Ez így néz ki egy szervertől kapott fiókobjektum:
+
+```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 }
+  ],
+}
+```
+
+> Megjegyzés: hogy megkönnyítsük a dolgodat, használhatod az előre feltöltött `test` fiókot, amely már tartalmaz adatokat.
+
+### Feladat
+
+Kezdjük azzal, hogy a HTML-ben lecseréljük az "Egyenleg" szekciót helyőrző elemekre:
+
+```html
+<section>
+  Balance: <span id="balance"></span><span id="currency"></span>
+</section>
+```
+
+Hozzáadunk egy új szekciót is közvetlenül alatta, hogy megjelenítsük a fiókleírást:
+
+```html
+<h2 id="description"></h2>
+```
+
+✅ Mivel a fiókleírás címként funkcionál az alatta lévő tartalomhoz, szemantikailag címsorként van megjelölve. Tudj meg többet arról, hogy a [címsorok struktúrája](https://www.nomensa.com/blog/2017/how-structure-headings-web-accessibility) miért fontos az akadálymentesség szempontjából, és vizsgáld meg kritikusan az oldalt, hogy meghatározd, mi más lehetne címsor.
+
+Ezután hozzunk létre egy új függvényt az `app.js` fájlban a helyőrzők kitöltéséhez:
+
+```js
+function updateDashboard() {
+  if (!account) {
+    return navigate('/login');
+  }
+
+  updateElement('description', account.description);
+  updateElement('balance', account.balance.toFixed(2));
+  updateElement('currency', account.currency);
+}
+```
+
+Először ellenőrizzük, hogy rendelkezünk-e a szükséges fiókadatokkal, mielőtt továbbmennénk. Ezután a korábban létrehozott `updateElement()` függvényt használjuk a HTML frissítéséhez.
+
+> Az egyenleg megjelenítésének szebbé tételéhez a [`toFixed(2)`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed) metódust használjuk, hogy az értéket 2 tizedesjeggyel jelenítsük meg.
+
+Most minden alkalommal, amikor a műszerfal betöltődik, meg kell hívnunk az `updateDashboard()` függvényt. Ha már befejezted az [1. lecke feladatát](../1-template-route/assignment.md), ez egyszerű lesz, különben használhatod az alábbi megvalósítást.
+
+Add hozzá ezt a kódot az `updateRoute()` függvény végéhez:
+
+```js
+if (typeof route.init === 'function') {
+  route.init();
+}
+```
+
+És frissítsd az útvonalak definícióját az alábbiak szerint:
+
+```js
+const routes = {
+  '/login': { templateId: 'login' },
+  '/dashboard': { templateId: 'dashboard', init: updateDashboard }
+};
+```
+
+Ezzel a változtatással minden alkalommal, amikor a műszerfal oldal megjelenik, az `updateDashboard()` függvény hívódik meg. Bejelentkezés után látnod kell a fiók egyenlegét, pénznemét és leírását.
+
+## Táblasorok dinamikus létrehozása HTML sablonokkal
+
+Az [első leckében](../1-template-route/README.md) HTML sablonokat használtunk a navigáció megvalósításához az alkalmazásunkban. A sablonok kisebbek is lehetnek, és használhatók az oldal ismétlődő részeinek dinamikus kitöltésére.
+
+Hasonló megközelítést fogunk alkalmazni a tranzakciók listájának megjelenítésére a HTML táblázatban.
+
+### Feladat
+
+Adj hozzá egy új sablont a HTML `<body>` részéhez:
+
+```html
+<template id="transaction">
+  <tr>
+    <td></td>
+    <td></td>
+    <td></td>
+  </tr>
+</template>
+```
+
+Ez a sablon egyetlen táblasort képvisel, a tranzakció három oszlopával: *dátum*, *tárgy* és *összeg*.
+
+Ezután add hozzá ezt az `id` tulajdonságot a táblázat `<tbody>` eleméhez a műszerfal sablonban, hogy könnyebben megtalálható legyen JavaScript segítségével:
+
+```html
+<tbody id="transactions"></tbody>
+```
+Ha a `test` fiókot használod a bejelentkezéshez, most már látnod kell a tranzakciók listáját a vezérlőpulton 🎉.
+
+---
+
+## 🚀 Kihívás
+
+Dolgozzatok együtt azon, hogy a vezérlőpult oldal úgy nézzen ki, mint egy valódi banki alkalmazás. Ha már formáztátok az alkalmazást, próbáljátok meg használni a [media queries](https://developer.mozilla.org/docs/Web/CSS/Media_Queries) funkciót, hogy [reszponzív dizájnt](https://developer.mozilla.org/docs/Web/Progressive_web_apps/Responsive/responsive_design_building_blocks) hozzatok létre, amely jól működik mind asztali, mind mobil eszközökön.
+
+Íme egy példa egy formázott vezérlőpult oldalra:
+
+![Példa a vezérlőpult oldal formázása utáni eredményre](../../../../translated_images/screen2.123c82a831a1d14ab2061994be2fa5de9cec1ce651047217d326d4773a6348e4.hu.png)
+
+## Előadás utáni kvíz
+
+[Előadás utáni kvíz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/46)
+
+## Feladat
+
+[Refaktoráld és kommentáld a kódodat](assignment.md)
+
+---
+
+**Felelősségkizárás**:  
+Ez a dokumentum az [Co-op Translator](https://github.com/Azure/co-op-translator) AI fordítási szolgáltatás segítségével készült. Bár törekszünk a pontosságra, kérjük, vegye figyelembe, hogy az automatikus fordítások hibákat vagy pontatlanságokat tartalmazhatnak. Az eredeti dokumentum az eredeti nyelvén tekintendő hiteles forrásnak. Kritikus információk esetén javasolt a professzionális, emberi fordítás igénybevétele. Nem vállalunk felelősséget a fordítás használatából eredő félreértésekért vagy téves értelmezésekért.
\ No newline at end of file
diff --git a/translations/hu/7-bank-project/3-data/assignment.md b/translations/hu/7-bank-project/3-data/assignment.md
new file mode 100644
index 00000000..c2e553ac
--- /dev/null
+++ b/translations/hu/7-bank-project/3-data/assignment.md
@@ -0,0 +1,29 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "a4abf305ede1cfaadd56a8fab4b4c288",
+  "translation_date": "2025-08-28T03:27:22+00:00",
+  "source_file": "7-bank-project/3-data/assignment.md",
+  "language_code": "hu"
+}
+-->
+# Refaktoráld és kommentáld a kódodat
+
+## Útmutató
+
+Ahogy a kódbázisod növekszik, fontos, hogy rendszeresen refaktoráld a kódodat, hogy az hosszú távon is olvasható és karbantartható maradjon. Adj hozzá kommenteket, és refaktoráld az `app.js` fájlt a kódminőség javítása érdekében:
+
+- Emeld ki a konstansokat, például a szerver API alap URL-jét
+- Egységesítsd a hasonló kódokat: például létrehozhatsz egy `sendRequest()` függvényt, amely egyesíti a `createAccount()` és a `getAccount()` által használt kódot
+- Szervezd át a kódot, hogy könnyebben olvasható legyen, és adj hozzá kommenteket
+
+## Értékelési szempontok
+
+| Kritérium | Kiemelkedő                                                                                                                                                   | Megfelelő                                                                                         | Fejlesztésre szorul                                                                     |
+| --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------- |
+|           | A kód kommentelt, jól szervezett különböző szekciókba, és könnyen olvasható. A konstansok ki vannak emelve, és egy egységesített `sendRequest()` függvény létre lett hozva. | A kód tiszta, de további kommentekkel, konstansok kiemelésével vagy egységesítéssel még javítható. | A kód rendezetlen, nincs kommentelve, a konstansok nincsenek kiemelve, és nincs egységesítve. |
+
+---
+
+**Felelősség kizárása**:  
+Ez a dokumentum az [Co-op Translator](https://github.com/Azure/co-op-translator) AI fordítási szolgáltatás segítségével lett lefordítva. Bár törekszünk a pontosságra, kérjük, vegye figyelembe, hogy az automatikus fordítások hibákat vagy pontatlanságokat tartalmazhatnak. Az eredeti dokumentum az eredeti nyelvén tekintendő hiteles forrásnak. Fontos információk esetén javasolt professzionális emberi fordítást igénybe venni. Nem vállalunk felelősséget semmilyen félreértésért vagy téves értelmezésért, amely a fordítás használatából eredhet.
\ No newline at end of file
diff --git a/translations/hu/7-bank-project/4-state-management/README.md b/translations/hu/7-bank-project/4-state-management/README.md
new file mode 100644
index 00000000..d0ca3104
--- /dev/null
+++ b/translations/hu/7-bank-project/4-state-management/README.md
@@ -0,0 +1,240 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "4fa20c513e367e9cdd401bf49ae16e33",
+  "translation_date": "2025-08-28T03:33:48+00:00",
+  "source_file": "7-bank-project/4-state-management/README.md",
+  "language_code": "hu"
+}
+-->
+# Banki alkalmazás építése 4. rész: Az állapotkezelés alapjai
+
+## Előadás előtti kvíz
+
+[Előadás előtti kvíz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/47)
+
+### Bevezetés
+
+Ahogy egy webalkalmazás növekszik, egyre nehezebb nyomon követni az adatáramlásokat. Melyik kód kapja meg az adatokat, melyik oldal használja fel, hol és mikor kell frissíteni... könnyen előfordulhat, hogy a kód rendezetlenné válik, és nehéz lesz karbantartani. Ez különösen igaz, ha az adatokat több oldal között kell megosztani az alkalmazásban, például a felhasználói adatokat. Az *állapotkezelés* fogalma mindig is létezett mindenféle programban, de ahogy a webalkalmazások egyre bonyolultabbá válnak, ez ma már kulcsfontosságú szempont a fejlesztés során.
+
+Ebben az utolsó részben áttekintjük az eddig épített alkalmazást, hogy újragondoljuk az állapotkezelést, lehetővé téve a böngésző frissítésének támogatását bármely ponton, és az adatok megőrzését a felhasználói munkamenetek között.
+
+### Előfeltétel
+
+El kell végezned a webalkalmazás [adatlekérdezés](../3-data/README.md) részét ehhez a leckéhez. Telepítened kell a [Node.js](https://nodejs.org) programot, és [futtatnod kell a szerver API-t](../api/README.md) helyileg, hogy kezelhesd a fiókadatokat.
+
+Ellenőrizheted, hogy a szerver megfelelően fut-e, ha végrehajtod ezt a parancsot egy terminálban:
+
+```sh
+curl http://localhost:5000/api
+# -> should return "Bank API v1.0.0" as a result
+```
+
+---
+
+## Az állapotkezelés újragondolása
+
+Az [előző leckében](../3-data/README.md) bevezettünk egy alapvető állapotfogalmat az alkalmazásunkban a globális `account` változóval, amely a jelenleg bejelentkezett felhasználó banki adatait tartalmazza. Azonban a jelenlegi megvalósításunknak vannak hibái. Próbáld meg frissíteni az oldalt, amikor a műszerfalon vagy. Mi történik?
+
+A jelenlegi kóddal három probléma van:
+
+- Az állapot nem marad meg, mivel a böngésző frissítése visszavisz a bejelentkezési oldalra.
+- Több funkció is módosítja az állapotot. Ahogy az alkalmazás növekszik, nehéz lehet nyomon követni a változásokat, és könnyen elfelejthetjük frissíteni az egyiket.
+- Az állapot nincs törölve, így amikor a *Kijelentkezés* gombra kattintasz, a fiókadatok még mindig ott vannak, annak ellenére, hogy a bejelentkezési oldalon vagy.
+
+Frissíthetnénk a kódunkat, hogy egyenként kezeljük ezeket a problémákat, de ez több kódismétlést eredményezne, és az alkalmazás bonyolultabbá és nehezebben karbantarthatóvá válna. Vagy megállhatnánk néhány percre, és újragondolhatnánk a stratégiánkat.
+
+> Milyen problémákat próbálunk valójában megoldani?
+
+Az [állapotkezelés](https://en.wikipedia.org/wiki/State_management) lényege, hogy megtaláljuk a megfelelő megközelítést e két konkrét probléma megoldására:
+
+- Hogyan lehet az adatáramlásokat egy alkalmazásban érthetővé tenni?
+- Hogyan lehet az állapotadatokat mindig szinkronban tartani a felhasználói felülettel (és fordítva)?
+
+Ha ezekkel foglalkoztál, bármilyen más probléma, amivel szembesülsz, vagy már megoldódott, vagy könnyebben megoldhatóvá vált. Számos lehetséges megközelítés létezik ezeknek a problémáknak a megoldására, de mi egy általános megoldást választunk, amely abból áll, hogy **központosítjuk az adatokat és a változtatás módjait**. Az adatáramlások így néznének ki:
+
+![Séma, amely az adatáramlásokat mutatja a HTML, a felhasználói műveletek és az állapot között](../../../../translated_images/data-flow.fa2354e0908fecc89b488010dedf4871418a992edffa17e73441d257add18da4.hu.png)
+
+> Itt nem térünk ki arra a részre, ahol az adatok automatikusan frissítik a nézetet, mivel ez a [Reaktív programozás](https://en.wikipedia.org/wiki/Reactive_programming) fejlettebb fogalmaihoz kapcsolódik. Ez egy jó következő téma, ha mélyebben bele szeretnél merülni.
+
+✅ Számos könyvtár létezik különböző megközelítésekkel az állapotkezeléshez, például a [Redux](https://redux.js.org), amely egy népszerű opció. Nézd meg a használt fogalmakat és mintákat, mivel ez gyakran jó módja annak, hogy megértsd, milyen potenciális problémákkal szembesülhetsz nagy webalkalmazásokban, és hogyan lehet ezeket megoldani.
+
+### Feladat
+
+Kezdjünk egy kis refaktorálással. Cseréld ki az `account` deklarációt:
+
+```js
+let account = null;
+```
+
+Erre:
+
+```js
+let state = {
+  account: null
+};
+```
+
+Az ötlet az, hogy *központosítsuk* az összes alkalmazásadatot egyetlen állapotobjektumban. Jelenleg csak az `account` van az állapotban, így ez nem sokat változtat, de megnyitja az utat a további fejlesztések előtt.
+
+Frissítenünk kell az ezt használó funkciókat is. A `register()` és `login()` funkciókban cseréld ki az `account = ...` sort `state.account = ...`-ra.
+
+Az `updateDashboard()` függvény tetején add hozzá ezt a sort:
+
+```js
+const account = state.account;
+```
+
+Ez a refaktorálás önmagában nem hozott sok javulást, de az ötlet az volt, hogy lefektessük az alapokat a következő változtatásokhoz.
+
+## Az adatok változásainak nyomon követése
+
+Most, hogy létrehoztuk az `state` objektumot az adatok tárolására, a következő lépés az, hogy központosítsuk a frissítéseket. A cél az, hogy könnyebb legyen nyomon követni az esetleges változásokat és azok időpontját.
+
+Az `state` objektum módosításának elkerülése érdekében jó gyakorlatnak számít, ha azt [*változatlannak*](https://en.wikipedia.org/wiki/Immutable_object) tekintjük, ami azt jelenti, hogy egyáltalán nem lehet módosítani. Ez azt is jelenti, hogy új állapotobjektumot kell létrehoznod, ha bármit meg akarsz változtatni benne. Ezzel védelmet építesz ki a potenciálisan nem kívánt [mellékhatások](https://en.wikipedia.org/wiki/Side_effect_(computer_science)) ellen, és lehetőséget nyitsz új funkciók bevezetésére az alkalmazásodban, például visszavonás/újra végrehajtás megvalósítására, miközben megkönnyíted a hibakeresést. Például naplózhatod az állapoton végrehajtott minden változást, és nyilvántarthatod a változások történetét, hogy megértsd egy hiba forrását.
+
+JavaScriptben az [`Object.freeze()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze) használatával hozhatsz létre változatlan objektumot. Ha megpróbálsz változtatásokat végrehajtani egy változatlan objektumon, kivétel keletkezik.
+
+✅ Tudod, mi a különbség a *sekély* és a *mély* változatlan objektum között? Erről [itt](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze#What_is_shallow_freeze) olvashatsz.
+
+### Feladat
+
+Hozzunk létre egy új `updateState()` függvényt:
+
+```js
+function updateState(property, newData) {
+  state = Object.freeze({
+    ...state,
+    [property]: newData
+  });
+}
+```
+
+Ebben a függvényben létrehozunk egy új állapotobjektumot, és az előző állapotból másoljuk az adatokat a [*spread (`...`) operátor*](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/Spread_syntax#Spread_in_object_literals) segítségével. Ezután felülírunk egy adott tulajdonságot az állapotobjektumban az új adatokkal a [zárójel notáció](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Working_with_Objects#Objects_and_properties) `[property]` használatával. Végül zároljuk az objektumot, hogy megakadályozzuk a módosításokat az `Object.freeze()` segítségével. Jelenleg csak az `account` tulajdonságot tároljuk az állapotban, de ezzel a megközelítéssel annyi tulajdonságot adhatsz hozzá az állapothoz, amennyire szükséged van.
+
+Frissítsük az `state` inicializálását is, hogy az inicializálási állapot is zárolva legyen:
+
+```js
+let state = Object.freeze({
+  account: null
+});
+```
+
+Ezután frissítsd a `register` függvényt az `state.account = result;` helyett:
+
+```js
+updateState('account', result);
+```
+
+Ugyanezt tedd a `login` függvénnyel, cseréld ki az `state.account = data;` sort:
+
+```js
+updateState('account', data);
+```
+
+Most kihasználhatjuk az alkalmat, hogy kijavítsuk azt a problémát, hogy a fiókadatok nem törlődnek, amikor a felhasználó a *Kijelentkezés* gombra kattint.
+
+Hozz létre egy új `logout()` függvényt:
+
+```js
+function logout() {
+  updateState('account', null);
+  navigate('/login');
+}
+```
+
+Az `updateDashboard()` függvényben cseréld ki az `return navigate('/login');` átirányítást `return logout();`-ra.
+
+Próbálj meg regisztrálni egy új fiókot, kijelentkezni, majd újra bejelentkezni, hogy ellenőrizd, minden továbbra is megfelelően működik-e.
+
+> Tipp: Nyomon követheted az összes állapotváltozást, ha hozzáadod a `console.log(state)` sort az `updateState()` függvény aljára, és megnyitod a böngésződ fejlesztői eszközeinek konzolját.
+
+## Az állapot megőrzése
+
+A legtöbb webalkalmazásnak szüksége van az adatok megőrzésére a megfelelő működés érdekében. Az összes kritikus adatot általában egy adatbázisban tárolják, és egy szerver API-n keresztül érik el, például a felhasználói fiókadatokat az esetünkben. De néha az is érdekes lehet, ha néhány adatot a böngésződben futó kliensalkalmazásban tárolsz, a jobb felhasználói élmény vagy a betöltési teljesítmény javítása érdekében.
+
+Amikor adatokat szeretnél tárolni a böngésződben, néhány fontos kérdést fel kell tenned magadnak:
+
+- *Érzékeny-e az adat?* Kerüld az érzékeny adatok, például a felhasználói jelszavak tárolását a kliensen.
+- *Meddig van szükséged az adatok megőrzésére?* Csak az aktuális munkamenethez szeretnéd elérni ezeket az adatokat, vagy örökre tárolni szeretnéd őket?
+
+Számos módja van az információk tárolásának egy webalkalmazásban, attól függően, hogy mit szeretnél elérni. Például használhatod az URL-eket egy keresési lekérdezés tárolására, és megoszthatóvá teheted más felhasználók között. Használhatsz [HTTP sütiket](https://developer.mozilla.org/docs/Web/HTTP/Cookies), ha az adatokat meg kell osztani a szerverrel, például az [azonosítási](https://en.wikipedia.org/wiki/Authentication) információkat.
+
+Egy másik lehetőség, hogy a böngésző API-k egyikét használod az adatok tárolására. Két különösen érdekes lehetőség van:
+
+- [`localStorage`](https://developer.mozilla.org/docs/Web/API/Window/localStorage): egy [kulcs/érték tároló](https://en.wikipedia.org/wiki/Key%E2%80%93value_database), amely lehetővé teszi az adott webhelyhez tartozó adatok megőrzését különböző munkamenetek között. Az itt tárolt adatok soha nem járnak le.
+- [`sessionStorage`](https://developer.mozilla.org/docs/Web/API/Window/sessionStorage): ez ugyanúgy működik, mint a `localStorage`, kivéve, hogy az itt tárolt adatok törlődnek, amikor a munkamenet véget ér (amikor a böngészőt bezárod).
+
+Fontos megjegyezni, hogy mindkét API csak [sztringeket](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String) képes tárolni. Ha összetett objektumokat szeretnél tárolni, akkor azokat a [JSON](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON) formátumba kell sorosítanod a [`JSON.stringify()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify) használatával.
+
+✅ Ha olyan webalkalmazást szeretnél létrehozni, amely nem működik szerverrel, az [`IndexedDB` API](https://developer.mozilla.org/docs/Web/API/IndexedDB_API) használatával kliensoldali adatbázist is létrehozhatsz. Ez az opció fejlettebb esetekre vagy jelentős mennyiségű adat tárolására van fenntartva, mivel bonyolultabb a használata.
+
+### Feladat
+
+Azt szeretnénk, hogy a felhasználók bejelentkezve maradjanak, amíg kifejezetten nem kattintanak a *Kijelentkezés* gombra, ezért a `localStorage`-t fogjuk használni a fiókadatok tárolására. Először definiáljunk egy kulcsot, amelyet az adatok tárolására használunk.
+
+```js
+const storageKey = 'savedAccount';
+```
+
+Ezután add hozzá ezt a sort az `updateState()` függvény végéhez:
+
+```js
+localStorage.setItem(storageKey, JSON.stringify(state.account));
+```
+
+Ezzel a felhasználói fiókadatok megőrzésre kerülnek, és mindig naprakészek lesznek, mivel korábban központosítottuk az összes állapotfrissítést. Itt kezdjük el élvezni az összes korábbi refaktorálás előnyeit 🙂.
+
+Mivel az adatok mentésre kerülnek, gondoskodnunk kell azok visszaállításáról is, amikor az alkalmazás betöltődik. Mivel egyre több inicializáló kódunk lesz, érdemes lehet létrehozni egy új `init` függvényt, amely tartalmazza az `app.js` alján található korábbi kódunkat is:
+
+```js
+function init() {
+  const savedAccount = localStorage.getItem(storageKey);
+  if (savedAccount) {
+    updateState('account', JSON.parse(savedAccount));
+  }
+
+  // Our previous initialization code
+  window.onpopstate = () => updateRoute();
+  updateRoute();
+}
+
+init();
+```
+
+Itt visszakeressük a mentett adatokat, és ha van ilyen, frissítjük az állapotot ennek megfelelően. Fontos, hogy ezt *azelőtt* tegyük meg, hogy frissítenénk az útvonalat, mivel az oldalfrissítés során lehet, hogy van olyan kód, amely az állapotra támaszkodik.
+
+Az *Irányítópult* oldalt is megtehetjük az alkalmazásunk alapértelmezett oldalának, mivel most már megőrizzük a fiókadatokat. Ha nem található adat, az irányítópult gondoskodik a *Bejelentkezés* oldalra történő átirányításról. Az `updateRoute()` függvényben cseréld ki az alapértelmezett `return navigate('/login');` sort `return navigate('/dashboard');`-ra.
+
+Most jelentkezz be az alkalmazásba, és próbáld meg frissíteni az oldalt. Az irányítópulton kell maradnod. Ezzel a frissítéssel gondoskodtunk az összes kezdeti problémánkról...
+
+## Az adatok frissítése
+
+...De lehet, hogy egy új problémát is létrehoztunk. Hoppá!
+
+Lépj az irányítópultra a `test` fiókkal, majd futtasd le ezt a parancsot egy terminálban egy új tranzakció létrehozásához:
+
+```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
+```
+
+Most próbáld meg frissíteni az irányítópult oldalt a böngészőben. Mi történik? Látod az új tranzakciót?
+
+Az állapot a `localStorage`-nak köszönhetően határozatlan ideig megmarad, de ez azt is jelenti, hogy soha nem frissül, amíg ki nem jelentkezel az alkalmazás
+[Előadás utáni kvíz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/48)
+
+## Feladat
+
+[Valósítsd meg az „Új tranzakció hozzáadása” párbeszédablakot](assignment.md)
+
+Íme egy példakép az elkészült feladat eredményéről:
+
+![Példa az „Új tranzakció hozzáadása” párbeszédablakra](../../../../translated_images/dialog.93bba104afeb79f12f65ebf8f521c5d64e179c40b791c49c242cf15f7e7fab15.hu.png)
+
+---
+
+**Felelősség kizárása**:  
+Ez a dokumentum az AI fordítási szolgáltatás, a [Co-op Translator](https://github.com/Azure/co-op-translator) segítségével lett lefordítva. Bár törekszünk a pontosságra, kérjük, vegye figyelembe, hogy az automatikus fordítások hibákat vagy pontatlanságokat tartalmazhatnak. Az eredeti dokumentum az eredeti nyelvén tekintendő hiteles forrásnak. Kritikus információk esetén javasolt professzionális emberi fordítást igénybe venni. Nem vállalunk felelősséget semmilyen félreértésért vagy téves értelmezésért, amely a fordítás használatából eredhet.
\ No newline at end of file
diff --git a/translations/hu/7-bank-project/4-state-management/assignment.md b/translations/hu/7-bank-project/4-state-management/assignment.md
new file mode 100644
index 00000000..1f968d84
--- /dev/null
+++ b/translations/hu/7-bank-project/4-state-management/assignment.md
@@ -0,0 +1,39 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "f23a868536c07da991b1d4e773161e25",
+  "translation_date": "2025-08-28T03:35:36+00:00",
+  "source_file": "7-bank-project/4-state-management/assignment.md",
+  "language_code": "hu"
+}
+-->
+# "Tranzakció hozzáadása" párbeszédpanel megvalósítása
+
+## Útmutató
+
+Banki alkalmazásunkból még mindig hiányzik egy fontos funkció: az új tranzakciók rögzítésének lehetősége. 
+A korábbi négy leckében tanultakat felhasználva valósítsd meg a "Tranzakció hozzáadása" párbeszédpanelt:
+
+- Adj hozzá egy "Tranzakció hozzáadása" gombot a vezérlőpult oldalán
+- Hozz létre egy új oldalt egy HTML sablonnal, vagy használd a JavaScriptet a párbeszédpanel HTML-jének megjelenítésére/elrejtésére anélkül, hogy elhagynád a vezérlőpult oldalt (ehhez használhatod a [`hidden`](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/hidden) tulajdonságot vagy CSS osztályokat)
+- Gondoskodj a párbeszédpanel [billentyűzet- és képernyőolvasó hozzáférhetőségéről](https://developer.paciellogroup.com/blog/2018/06/the-current-state-of-modal-dialog-accessibility/)
+- Valósíts meg egy HTML űrlapot az adatok beviteléhez
+- Az űrlap adataiból hozz létre JSON adatokat, és küldd el az API-nak
+- Frissítsd a vezérlőpult oldalt az új adatokkal
+
+Nézd meg a [szerver API specifikációit](../api/README.md), hogy megtudd, melyik API-t kell meghívnod, és milyen JSON formátumot várnak.
+
+Íme egy példa az elkészült feladat eredményére:
+
+![Példa képernyőkép a "Tranzakció hozzáadása" párbeszédpanelről](../../../../translated_images/dialog.93bba104afeb79f12f65ebf8f521c5d64e179c40b791c49c242cf15f7e7fab15.hu.png)
+
+## Értékelési szempontok
+
+| Kritérium | Kiváló                                                                                          | Megfelelő                                                                                                              | Fejlesztésre szorul                          |
+| --------- | ----------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- |
+|           | A tranzakció hozzáadása teljes mértékben megvalósítva, a leckékben látott legjobb gyakorlatok szerint. | A tranzakció hozzáadása megvalósítva, de nem a leckékben látott legjobb gyakorlatok szerint, vagy csak részben működik. | A tranzakció hozzáadása egyáltalán nem működik. |
+
+---
+
+**Felelősség kizárása**:  
+Ez a dokumentum az AI fordítási szolgáltatás [Co-op Translator](https://github.com/Azure/co-op-translator) segítségével lett lefordítva. Bár törekszünk a pontosságra, kérjük, vegye figyelembe, hogy az automatikus fordítások hibákat vagy pontatlanságokat tartalmazhatnak. Az eredeti dokumentum az eredeti nyelvén tekintendő hiteles forrásnak. Kritikus információk esetén javasolt professzionális emberi fordítást igénybe venni. Nem vállalunk felelősséget semmilyen félreértésért vagy téves értelmezésért, amely a fordítás használatából eredhet.
\ No newline at end of file
diff --git a/translations/hu/7-bank-project/README.md b/translations/hu/7-bank-project/README.md
new file mode 100644
index 00000000..7a72dff8
--- /dev/null
+++ b/translations/hu/7-bank-project/README.md
@@ -0,0 +1,35 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "830359535306594b448db6575ce5cdee",
+  "translation_date": "2025-08-28T03:23:29+00:00",
+  "source_file": "7-bank-project/README.md",
+  "language_code": "hu"
+}
+-->
+# :dollar: Bank építése
+
+Ebben a projektben megtanulhatod, hogyan építs fel egy képzeletbeli bankot. Ezek a leckék útmutatást adnak egy webalkalmazás elrendezéséhez és útvonalainak kialakításához, űrlapok létrehozásához, állapot kezeléséhez, valamint adatok lekéréséhez egy API-ból, amelyből elérheted a bank adatait.
+
+| ![Screen1](../../../translated_images/screen1.baccbba0f1f93364672eb250d2fbd21574bb1caf79a2155022dc098a741cbdfe.hu.png) | ![Screen2](../../../translated_images/screen2.123c82a831a1d14ab2061994be2fa5de9cec1ce651047217d326d4773a6348e4.hu.png) |
+|--------------------------------|--------------------------------|
+
+## Leckék
+
+1. [HTML sablonok és útvonalak egy webalkalmazásban](1-template-route/README.md)
+2. [Bejelentkezési és regisztrációs űrlap létrehozása](2-forms/README.md)
+3. [Adatok lekérésének és használatának módszerei](3-data/README.md)
+4. [Állapotkezelés alapfogalmai](4-state-management/README.md)
+
+### Köszönetnyilvánítás
+
+Ezeket a leckéket :hearts:-szal írta [Yohan Lasorsa](https://twitter.com/sinedied).
+
+Ha érdekel, hogyan építsd fel a leckékben használt [szerver API-t](/7-bank-project/api/README.md), kövesd [ezt a videósorozatot](https://aka.ms/NodeBeginner) (különösen a 17–21. videókat).
+
+Ezenkívül megtekintheted [ezt az interaktív Learn oktatóanyagot](https://aka.ms/learn/express-api).
+
+---
+
+**Felelősség kizárása**:  
+Ez a dokumentum az AI fordítási szolgáltatás [Co-op Translator](https://github.com/Azure/co-op-translator) segítségével lett lefordítva. Bár törekszünk a pontosságra, kérjük, vegye figyelembe, hogy az automatikus fordítások hibákat vagy pontatlanságokat tartalmazhatnak. Az eredeti dokumentum az eredeti nyelvén tekintendő hiteles forrásnak. Kritikus információk esetén javasolt professzionális emberi fordítást igénybe venni. Nem vállalunk felelősséget semmilyen félreértésért vagy téves értelmezésért, amely a fordítás használatából eredhet.
\ No newline at end of file
diff --git a/translations/hu/7-bank-project/api/README.md b/translations/hu/7-bank-project/api/README.md
new file mode 100644
index 00000000..4ef1000e
--- /dev/null
+++ b/translations/hu/7-bank-project/api/README.md
@@ -0,0 +1,48 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "9884f8c8a61cf56214450f8b16a094ce",
+  "translation_date": "2025-08-28T03:27:48+00:00",
+  "source_file": "7-bank-project/api/README.md",
+  "language_code": "hu"
+}
+-->
+# Bank API
+
+> Bank API, amelyet [Node.js](https://nodejs.org) + [Express](https://expressjs.com/) segítségével készítettek.
+
+Az API már készen áll, és nem része a feladatnak.
+
+Ha azonban szeretnéd megtanulni, hogyan készíts ilyen API-t, kövesd ezt a videósorozatot: https://aka.ms/NodeBeginner (a 17–21. videók pontosan ezt az API-t fedik le).
+
+Ezenkívül megnézheted ezt az interaktív oktatóanyagot is: https://aka.ms/learn/express-api
+
+## A szerver futtatása
+
+Győződj meg róla, hogy telepítve van a [Node.js](https://nodejs.org).
+
+1. Klónozd le ezt a repót: [The Web-Dev-For-Beginners](https://github.com/microsoft/Web-Dev-For-Beginners).
+2. Nyisd meg a terminált, és navigálj a `Web-Dev-For-Beginners/7-bank-project/api` mappába.
+3. Futtasd az `npm install` parancsot, és várd meg, amíg a csomagok telepítése befejeződik (ez eltarthat egy ideig az internetkapcsolat minőségétől függően).
+4. Amikor a telepítés befejeződött, futtasd az `npm start` parancsot, és már készen is vagy.
+
+A szervernek a `5000` porton kell elindulnia.
+*Ez a szerver együtt fog futni a fő banki alkalmazás szerver termináljával (amely a `3000` porton hallgat), ne zárd be.*
+
+> Megjegyzés: minden bejegyzés a memóriában tárolódik, és nem kerül mentésre, így ha a szerver leáll, minden adat elveszik.
+
+## API részletei
+
+Útvonal                                     | Leírás
+--------------------------------------------|------------------------------------
+GET    /api/                                | Szerverinformációk lekérése
+POST   /api/accounts/                       | Fiók létrehozása, például: `{ user: 'Yohan', description: 'My budget', currency: 'EUR', balance: 100 }`
+GET    /api/accounts/:user                  | Az adott fiók összes adatának lekérése
+DELETE /api/accounts/:user                  | Az adott fiók törlése
+POST   /api/accounts/:user/transactions     | Tranzakció hozzáadása, például: `{ date: '2020-07-23T18:25:43.511Z', object: 'Bought a book', amount: -20 }`
+DELETE  /api/accounts/:user/transactions/:id | Az adott tranzakció törlése
+
+---
+
+**Felelősség kizárása**:  
+Ez a dokumentum az AI fordítási szolgáltatás, a [Co-op Translator](https://github.com/Azure/co-op-translator) segítségével lett lefordítva. Bár törekszünk a pontosságra, kérjük, vegye figyelembe, hogy az automatikus fordítások hibákat vagy pontatlanságokat tartalmazhatnak. Az eredeti dokumentum az eredeti nyelvén tekintendő hiteles forrásnak. Fontos információk esetén javasolt professzionális emberi fordítást igénybe venni. Nem vállalunk felelősséget semmilyen félreértésért vagy téves értelmezésért, amely a fordítás használatából eredhet.
\ No newline at end of file
diff --git a/translations/hu/7-bank-project/solution/README.md b/translations/hu/7-bank-project/solution/README.md
new file mode 100644
index 00000000..bcc74846
--- /dev/null
+++ b/translations/hu/7-bank-project/solution/README.md
@@ -0,0 +1,27 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "461aa4fc74c6b1789c3a13b5d82c0cd9",
+  "translation_date": "2025-08-28T03:28:15+00:00",
+  "source_file": "7-bank-project/solution/README.md",
+  "language_code": "hu"
+}
+-->
+# Banki alkalmazás
+
+> Példa megoldás a banki alkalmazás projekthez, amely tisztán HTML5, CSS és JavaScript használatával készült (keretrendszerek vagy könyvtárak nélkül).
+
+## Az alkalmazás futtatása
+
+Először győződj meg róla, hogy az [API szerver](../api/README.md) fut.
+
+Bármilyen webszerver használható az alkalmazás futtatásához, de mivel az [Node.js](https://nodejs.org) telepítve kell legyen az API futtatásához, megteheted a következőket:
+
+1. Klónozd le ezt a repót Git segítségével.
+2. Nyiss meg egy terminált, navigálj ebbe a könyvtárba, majd futtasd a `npx lite-server .` parancsot. Ez elindít egy fejlesztői webszervert a `3000`-es porton.
+3. Nyisd meg a böngészőben a `http://localhost:3000` címet az alkalmazás futtatásához.
+
+---
+
+**Felelősség kizárása**:  
+Ez a dokumentum az AI fordítási szolgáltatás [Co-op Translator](https://github.com/Azure/co-op-translator) segítségével lett lefordítva. Bár törekszünk a pontosságra, kérjük, vegye figyelembe, hogy az automatikus fordítások hibákat vagy pontatlanságokat tartalmazhatnak. Az eredeti dokumentum az eredeti nyelvén tekintendő hiteles forrásnak. Fontos információk esetén javasolt professzionális emberi fordítást igénybe venni. Nem vállalunk felelősséget semmilyen félreértésért vagy téves értelmezésért, amely a fordítás használatából eredhet.
\ No newline at end of file
diff --git a/translations/hu/8-code-editor/1-using-a-code-editor/README.md b/translations/hu/8-code-editor/1-using-a-code-editor/README.md
new file mode 100644
index 00000000..05d2337a
--- /dev/null
+++ b/translations/hu/8-code-editor/1-using-a-code-editor/README.md
@@ -0,0 +1,155 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "7aa6e4f270d38d9cb17f2b5bd86b863d",
+  "translation_date": "2025-08-28T04:22:42+00:00",
+  "source_file": "8-code-editor/1-using-a-code-editor/README.md",
+  "language_code": "hu"
+}
+-->
+# Kódszerkesztő használata
+
+Ez a lecke bemutatja a [VSCode.dev](https://vscode.dev) webalapú kódszerkesztő alapjait, amely lehetővé teszi, hogy módosítsd a kódodat és hozzájárulj egy projekthez anélkül, hogy bármit telepítenél a számítógépedre.
+
+## Tanulási célok
+
+Ebben a leckében megtanulod:
+
+- Hogyan használj kódszerkesztőt egy kódprojektben
+- Hogyan kövesd nyomon a változásokat verziókezeléssel
+- Hogyan testre szabhatod a szerkesztőt fejlesztéshez
+
+### Előfeltételek
+
+Mielőtt elkezdenéd, létre kell hoznod egy fiókot a [GitHub](https://github.com) oldalon. Látogass el a [GitHub](https://github.com/) oldalra, és hozz létre egy fiókot, ha még nem tetted meg.
+
+### Bevezetés
+
+A kódszerkesztő alapvető eszköz a programok írásához és meglévő kódprojektekben való együttműködéshez. Ha megérted a szerkesztő alapjait és megtanulod, hogyan használd ki a funkcióit, alkalmazni tudod őket a kódírás során.
+
+## Első lépések a VSCode.dev használatával
+
+A [VSCode.dev](https://vscode.dev) egy webalapú kódszerkesztő. Nem szükséges semmit telepíteni a használatához, csak meg kell nyitni, mint bármely más weboldalt. A szerkesztő elindításához nyisd meg a következő linket: [https://vscode.dev](https://vscode.dev). Ha nem vagy bejelentkezve a [GitHub](https://github.com/) oldalra, kövesd az utasításokat a bejelentkezéshez vagy hozz létre egy új fiókot, majd jelentkezz be.
+
+Amikor betöltődik, hasonlóan kell kinéznie, mint az alábbi kép:
+
+![Alapértelmezett VSCode.dev](../../../../translated_images/default-vscode-dev.5d06881d65c1b3234ce50cd9ed3b0028e6031ad5f5b441bcbed96bfa6311f6d0.hu.png)
+
+Három fő szekció van, balról jobbra haladva:
+
+1. Az _aktivitási sáv_, amely néhány ikont tartalmaz, például nagyítót 🔎, fogaskereket ⚙️ és néhány másikat.
+2. Az aktivitási sáv kibővített része, amely alapértelmezés szerint az _Explorer_, más néven _oldalsáv_.
+3. Végül a kódterület a jobb oldalon.
+
+Kattints az ikonokra, hogy különböző menüket jeleníts meg. Ha végeztél, kattints az _Explorer_-re, hogy visszatérj az alapállapotba.
+
+Amikor elkezdesz kódot írni vagy meglévő kódot módosítani, az a legnagyobb területen, a jobb oldalon fog történni. Ezt a területet fogod használni a meglévő kód megtekintésére is, amit a következő lépésben fogsz megtenni.
+
+## GitHub-repozitórium megnyitása
+
+Az első lépés egy GitHub-repozitórium megnyitása. Többféle módon lehet megnyitni egy repozitóriumot. Ebben a szekcióban két különböző módszert láthatsz, amelyekkel elkezdheted a változtatásokon való munkát.
+
+### 1. A szerkesztővel
+
+Használd magát a szerkesztőt egy távoli repozitórium megnyitásához. Ha ellátogatsz a [VSCode.dev](https://vscode.dev) oldalra, látni fogsz egy _"Open Remote Repository"_ gombot:
+
+![Távoli repozitórium megnyitása](../../../../translated_images/open-remote-repository.bd9c2598b8949e7fc283cdfc8f4050c6205a7c7c6d3f78c4b135115d037d6fa2.hu.png)
+
+Használhatod a parancspalettát is. A parancspaletta egy beviteli mező, ahol bármilyen szót beírhatsz, amely egy parancs vagy művelet része, hogy megtaláld a megfelelő parancsot. Használd a bal felső menüt, majd válaszd a _View_ opciót, és válaszd a _Command Palette_-t, vagy használd a következő billentyűkombinációt: Ctrl-Shift-P (MacOS esetén Command-Shift-P).
+
+![Paletta menü](../../../../translated_images/palette-menu.4946174e07f426226afcdad707d19b8d5150e41591c751c45b5dee213affef91.hu.png)
+
+Amikor a menü megnyílik, írd be, hogy _open remote repository_, majd válaszd az első opciót. Több repozitórium, amelynek tagja vagy, vagy amelyet nemrég megnyitottál, megjelenik. Használhatsz egy teljes GitHub URL-t is a kiválasztáshoz. Használd a következő URL-t, és illeszd be a mezőbe:
+
+```
+https://github.com/microsoft/Web-Dev-For-Beginners
+```
+
+✅ Ha sikeres, az összes fájlt látni fogod a repozitóriumban, betöltve a szövegszerkesztőbe.
+
+### 2. URL használatával
+
+URL-t is használhatsz egy repozitórium betöltéséhez. Például a jelenlegi repozitórium teljes URL-je [https://github.com/microsoft/Web-Dev-For-Beginners](https://github.com/microsoft/Web-Dev-For-Beginners), de a GitHub domain helyett `VSCode.dev/github`-ot használva közvetlenül betöltheted a repozitóriumot. Az eredményül kapott URL: [https://vscode.dev/github/microsoft/Web-Dev-For-Beginners](https://vscode.dev/github/microsoft/Web-Dev-For-Beginners).
+
+## Fájlok szerkesztése
+
+Miután megnyitottad a repozitóriumot a böngészőben vagy a vscode.dev-ben, a következő lépés a projekt frissítése vagy módosítása.
+
+### 1. Új fájl létrehozása
+
+Új fájlt hozhatsz létre egy meglévő mappában, vagy a gyökérkönyvtárban/mappában. Új fájl létrehozásához nyisd meg azt a helyet/könyvtárat, ahová a fájlt menteni szeretnéd, és válaszd a _'New file ...'_ ikont az aktivitási sávon _(bal oldalon)_, adj neki nevet, majd nyomd meg az Entert.
+
+![Új fájl létrehozása](../../../../translated_images/create-new-file.2814e609c2af9aeb6c6fd53156c503ac91c3d538f9cac63073b2dd4a7631f183.hu.png)
+
+### 2. Fájl szerkesztése és mentése a repozitóriumban
+
+A vscode.dev különösen hasznos, ha gyors frissítéseket szeretnél végrehajtani a projekteden anélkül, hogy bármilyen szoftvert helyileg betöltenél. A kód frissítéséhez kattints az 'Explorer' ikonra, amely szintén az aktivitási sávon található, hogy megtekintsd a repozitórium fájljait és mappáit. Válassz ki egy fájlt, hogy megnyisd a kódterületen, végezd el a módosításokat, majd mentsd el.
+
+![Fájl szerkesztése](../../../../translated_images/edit-a-file.52c0ee665ef19f08119d62d63f395dfefddc0a4deb9268d73bfe791f52c5807a.hu.png)
+
+Miután befejezted a projekt frissítését, válaszd a _`source control`_ ikont, amely tartalmazza az összes új változtatást, amit a repozitóriumhoz hozzáadtál.
+
+A projektedben végrehajtott változtatások megtekintéséhez válaszd ki a fájl(oka)t a `Changes` mappában a kibővített aktivitási sávon. Ez megnyit egy 'Working Tree'-t, amelyben vizuálisan láthatod a fájlban végrehajtott változtatásokat. A piros szín a projektből való kihagyást jelzi, míg a zöld szín hozzáadást.
+
+![Változtatások megtekintése](../../../../translated_images/working-tree.c58eec08e6335c79cc708c0c220c0b7fea61514bd3c7fb7471905a864aceac7c.hu.png)
+
+Ha elégedett vagy a végrehajtott változtatásokkal, vidd az egeret a `Changes` mappára, és kattints a `+` gombra a változtatások szakaszolásához. A szakaszolás egyszerűen azt jelenti, hogy előkészíted a változtatásokat a GitHub-ra való elkötelezéshez.
+
+Ha azonban nem vagy elégedett néhány változtatással, és el szeretnéd vetni őket, vidd az egeret a `Changes` mappára, és válaszd az `undo` ikont.
+
+Ezután írj be egy `commit message`-t _(A projektben végrehajtott változtatások leírása)_, kattints a `check icon`-ra az elkötelezéshez és a változtatások feltöltéséhez.
+
+Miután befejezted a projekteden való munkát, válaszd a bal felső sarokban található `hamburger menu icon`-t, hogy visszatérj a repozitóriumhoz a github.com oldalon.
+
+![Változtatások szakaszolása és elkötelezése](../../../../8-code-editor/images/edit-vscode.dev.gif)
+
+## Bővítmények használata
+
+A bővítmények telepítése a VSCode-ban lehetővé teszi, hogy új funkciókat és testreszabott fejlesztési környezeti opciókat adj a szerkesztődhöz, hogy javítsd a fejlesztési munkafolyamatot. Ezek a bővítmények segítenek több programozási nyelv támogatásának hozzáadásában, és gyakran általános vagy nyelv-specifikus bővítmények.
+
+Az összes elérhető bővítmény listájának böngészéséhez kattints az _`Extensions icon`_-ra az aktivitási sávon, és kezdj el gépelni a bővítmény nevét a _'Search Extensions in Marketplace'_ feliratú szövegmezőbe. Látni fogsz egy listát a bővítményekről, amelyek mindegyike tartalmazza **a bővítmény nevét, a kiadó nevét, egy mondatos leírást, a letöltések számát** és **egy csillagos értékelést**.
+
+![Bővítmény részletei](../../../../translated_images/extension-details.9f8f1fd4e9eb2de5069ae413119eb8ee43172776383ebe2f7cf640e11df2e106.hu.png)
+
+Megtekintheted az összes korábban telepített bővítményt az _`Installed folder`_ kibővítésével, a legtöbb fejlesztő által használt népszerű bővítményeket a _`Popular folder`_-ben, valamint az ajánlott bővítményeket, amelyeket ugyanazon munkaterület felhasználói vagy a nemrég megnyitott fájlok alapján ajánlanak a _`recommended folder`_-ben.
+
+![Bővítmények megtekintése](../../../../translated_images/extensions.eca0e0c7f59a10b5c88be7fe24b3e32cca6b6058b35a49026c3a9d80b1813b7c.hu.png)
+
+### 1. Bővítmények telepítése
+
+Bővítmény telepítéséhez írd be a bővítmény nevét a keresőmezőbe, és kattints rá, hogy további információkat tekints meg róla a kódterületen, miután megjelenik a kibővített aktivitási sávon.
+
+Kattinthatsz a _kék telepítés gombra_ a kibővített aktivitási sávon, vagy használhatod a telepítés gombot, amely a kódterületen jelenik meg, miután kiválasztottad a bővítményt, hogy betöltsd a további információkat.
+
+![Bővítmények telepítése](../../../../8-code-editor/images/install-extension.gif)
+
+### 2. Bővítmények testreszabása
+
+A bővítmény telepítése után lehet, hogy módosítanod kell annak működését, és testre kell szabnod a preferenciáid alapján. Ehhez válaszd ki a Bővítmények ikont, és ezúttal a bővítményed megjelenik az _Installed folder_-ben, kattints a _**Gear icon**_-ra, és navigálj az _Extensions Setting_ menüponthoz.
+
+![Bővítmény beállításainak módosítása](../../../../translated_images/extension-settings.21c752ae4f4cdb78a867f140ccd0680e04619d0c44bb4afb26373e54b829d934.hu.png)
+
+### 3. Bővítmények kezelése
+
+A bővítmény telepítése és használata után a vscode.dev különböző lehetőségeket kínál a bővítmény kezelésére az igényeid alapján. Például dönthetsz úgy, hogy:
+
+- **Letiltod:** _(Ideiglenesen letilthatsz egy bővítményt, ha már nincs rá szükséged, de nem akarod teljesen eltávolítani)_
+
+    Válaszd ki a telepített bővítményt a kibővített aktivitási sávon > kattints a Gear ikonra > válaszd a 'Disable' vagy 'Disable (Workspace)' opciót **VAGY** Nyisd meg a bővítményt a kódterületen, és kattints a kék Letiltás gombra.
+
+- **Eltávolítod:** Válaszd ki a telepített bővítményt a kibővített aktivitási sávon > kattints a Gear ikonra > válaszd az 'Uninstall' opciót **VAGY** Nyisd meg a bővítményt a kódterületen, és kattints a kék Eltávolítás gombra.
+
+---
+
+## Feladat
+
+[Hozz létre egy önéletrajz weboldalt a vscode.dev segítségével](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/8-code-editor/1-using-a-code-editor/assignment.md)
+
+## Áttekintés és önálló tanulás
+
+Olvass többet a [VSCode.dev](https://code.visualstudio.com/docs/editor/vscode-web?WT.mc_id=academic-0000-alfredodeza) funkcióiról és egyéb lehetőségeiről.
+
+---
+
+**Felelősség kizárása**:  
+Ez a dokumentum az AI fordítási szolgáltatás, a [Co-op Translator](https://github.com/Azure/co-op-translator) segítségével lett lefordítva. Bár törekszünk a pontosságra, kérjük, vegye figyelembe, hogy az automatikus fordítások hibákat vagy pontatlanságokat tartalmazhatnak. Az eredeti dokumentum az eredeti nyelvén tekintendő hiteles forrásnak. Kritikus információk esetén javasolt professzionális emberi fordítást igénybe venni. Nem vállalunk felelősséget semmilyen félreértésért vagy téves értelmezésért, amely a fordítás használatából eredhet.
\ No newline at end of file
diff --git a/translations/hu/8-code-editor/1-using-a-code-editor/assignment.md b/translations/hu/8-code-editor/1-using-a-code-editor/assignment.md
new file mode 100644
index 00000000..c98c4cf0
--- /dev/null
+++ b/translations/hu/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-28T04:24:28+00:00",
+  "source_file": "8-code-editor/1-using-a-code-editor/assignment.md",
+  "language_code": "hu"
+}
+-->
+# Készíts egy önéletrajz-weboldalt a vscode.dev segítségével
+
+_Milyen menő lenne, ha egy toborzó elkérné az önéletrajzodat, és te egy URL-t küldenél neki?_ 😎
+
+## Célkitűzések
+
+E feladat elvégzése után megtanulod, hogyan:
+
+- Hozz létre egy weboldalt, amely bemutatja az önéletrajzodat
+
+### Előfeltételek
+
+1. Egy GitHub-fiók. Látogass el a [GitHub](https://github.com/) oldalra, és hozz létre egy fiókot, ha még nincs.
+
+## Lépések
+
+**1. lépés:** Hozz létre egy új GitHub-tárházat, és nevezd el `my-resume` néven.
+
+**2. lépés:** Hozz létre egy `index.html` fájlt a tárházadban. Legalább egy fájlt hozzá kell adnunk a github.com-on, mert üres tárházat nem lehet megnyitni a vscode.dev-en.
+
+Kattints a `creating a new file` linkre, írd be a fájl nevét `index.html`, majd válaszd a `Commit new file` gombot.
+
+![Új fájl létrehozása a github.com-on](../../../../translated_images/new-file-github.com.c886796d800e8056561829a181be1382c5303da9d902d8b2dd82b68a4806e21f.hu.png)
+
+**3. lépés:** Nyisd meg a [VSCode.dev](https://vscode.dev) oldalt, és válaszd az `Open Remote Repository` gombot.
+
+Másold ki az éppen létrehozott tárház URL-jét, és illeszd be a bemeneti mezőbe:
+
+_Cseréld ki a `your-username` részt a GitHub-felhasználónevedre._
+
+```
+https://github.com/your-username/my-resume
+```
+
+✅ Ha sikeres volt, látni fogod a projektedet és az `index.html` fájlt a böngésző szövegszerkesztőjében.
+
+![Új fájl létrehozása](../../../../translated_images/project-on-vscode.dev.e79815a9a95ee7feac72ebe5c941c91279716be37c575dbdbf2f43bea2c7d8b6.hu.png)
+
+**4. lépés:** Nyisd meg az `index.html` fájlt, illeszd be az alábbi kódot a kódrészbe, majd mentsd el.
+
+<details>
+    <summary><b>HTML kód az önéletrajz-weboldalad tartalmához.</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>A neved ide kerül!</title>
+            </head>
+            <body>
+                <header id="header">
+                    <!-- önéletrajz fejléc a neveddel és a pozícióddal -->
+                    <h1>A neved ide kerül!</h1>
+                    <hr>
+                    A szereped!
+                    <hr>
+                </header>
+                <main>
+                    <article id="mainLeft">
+                        <section>
+                            <h2>KAPCSOLAT</h2>
+                            <!-- elérhetőségek, beleértve a közösségi médiát -->
+                            <p>
+                                <i class="fa fa-envelope" aria-hidden="true"></i>
+                                <a href="mailto:username@domain.top-level domain">Írd ide az e-mail címedet</a>
+                            </p>
+                            <p>
+                                <i class="fab fa-github" aria-hidden="true"></i>
+                                <a href="github.com/yourGitHubUsername">Írd ide a felhasználónevedet!</a>
+                            </p>
+                            <p>
+                                <i class="fab fa-linkedin" aria-hidden="true"></i>
+                                <a href="linkedin.com/yourLinkedInUsername">Írd ide a felhasználónevedet!</a>
+                            </p>
+                        </section>
+                        <section>
+                            <h2>KÉSZSÉGEK</h2>
+                            <!-- a készségeid -->
+                            <ul>
+                                <li>Készség 1!</li>
+                                <li>Készség 2!</li>
+                                <li>Készség 3!</li>
+                                <li>Készség 4!</li>
+                            </ul>
+                        </section>
+                        <section>
+                            <h2>OKTATÁS</h2>
+                            <!-- az oktatásod -->
+                            <h3>Írd ide a kurzusodat!</h3>
+                            <p>
+                                Írd ide az intézményedet!
+                            </p>
+                            <p>
+                                Kezdési - Befejezési dátum
+                            </p>
+                        </section>            
+                    </article>
+                    <article id="mainRight">
+                        <section>
+                            <h2>RÓLAM</h2>
+                            <!-- rólad -->
+                            <p>Írj egy rövid bemutatkozást magadról!</p>
+                        </section>
+                        <section>
+                            <h2>MUNKAHELYI TAPASZTALAT</h2>
+                            <!-- a munkatapasztalatod -->
+                            <h3>Munkakör</h3>
+                            <p>
+                                Szervezet neve ide kerül | Kezdési hónap – Befejezési hónap
+                            </p>
+                            <ul>
+                                    <li>Feladat 1 - Írd le, mit csináltál!</li>
+                                    <li>Feladat 2 - Írd le, mit csináltál!</li>
+                                    <li>Írd le a hozzájárulásod eredményeit/hatását</li>
+                                    
+                            </ul>
+                            <h3>Munkakör 2</h3>
+                            <p>
+                                Szervezet neve ide kerül | Kezdési hónap – Befejezési hónap
+                            </p>
+                            <ul>
+                                    <li>Feladat 1 - Írd le, mit csináltál!</li>
+                                    <li>Feladat 2 - Írd le, mit csináltál!</li>
+                                    <li>Írd le a hozzájárulásod eredményeit/hatását</li>
+                                    
+                            </ul>
+                        </section>
+                    </article>
+                </main>
+            </body>
+        </html>
+</details>
+
+Cseréld ki az _ideiglenes szöveget_ az önéletrajzod adataira a HTML-kódban.
+
+**5. lépés:** Vidd az egeret a My-Resume mappa fölé, kattints az `Új fájl ...` ikonra, és hozz létre 2 új fájlt a projektedben: `style.css` és `codeswing.json`.
+
+**6. lépés:** Nyisd meg a `style.css` fájlt, illeszd be az alábbi kódot, majd mentsd el.
+
+<details>
+        <summary><b>CSS kód a weboldal elrendezésének formázásához.</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. lépés:** Nyisd meg a `codeswing.json` fájlt, illeszd be az alábbi kódot, majd mentsd el.
+
+    {
+    "scripts": [],
+    "styles": []
+    }
+
+**7. lépés:** Telepítsd a `Codeswing bővítményt`, hogy megtekinthesd az önéletrajz-weboldalt a kódrészben.
+
+Kattints az _`Extensions`_ ikonra az aktivitási sávon, és írd be, hogy Codeswing. Kattints a _kék telepítés gombra_ az aktivitási sáv kibővített részén, vagy használd a telepítés gombot, amely a kódrészben jelenik meg, miután kiválasztottad a bővítményt. A bővítmény telepítése után figyeld meg a projektedben történt változásokat 😃
+
+![Bővítmények telepítése](../../../../8-code-editor/images/install-extension.gif)
+
+Ezt fogod látni a képernyődön, miután telepítetted a bővítményt.
+
+![Codeswing bővítmény működés közben](../../../../translated_images/after-codeswing-extension-pb.0ebddddcf73b550994947a9084e35e2836c713ae13839d49628e3c764c1cfe83.hu.png)
+
+Ha elégedett vagy a változtatásokkal, vidd az egeret a `Changes` mappa fölé, és kattints a `+` gombra a változtatások színpadra állításához.
+
+Írj be egy commit üzenetet _(A projektben végrehajtott változtatások leírása)_, majd kattints a `pipa` gombra a változtatások elkötelezéséhez. Ha végeztél a projekttel, válaszd a bal felső sarokban lévő hamburger menü ikont, hogy visszatérj a GitHub-tárházhoz.
+
+Gratulálok 🎉 Most néhány lépésben létrehoztad az önéletrajz-weboldaladat a vscode.dev segítségével.
+
+## 🚀 Kihívás
+
+Nyiss meg egy távoli tárházat, amelyhez van jogosultságod változtatásokat végrehajtani, és frissíts néhány fájlt. Ezután próbálj meg létrehozni egy új ágat a változtatásaiddal, és készíts egy Pull Requestet.
+
+## Áttekintés és önálló tanulás
+
+Olvass többet a [VSCode.dev](https://code.visualstudio.com/docs/editor/vscode-web?WT.mc_id=academic-0000-alfredodeza) oldalról és annak egyéb funkcióiról.
+
+---
+
+**Felelősség kizárása**:  
+Ez a dokumentum az AI fordítási szolgáltatás, a [Co-op Translator](https://github.com/Azure/co-op-translator) segítségével került lefordításra. Bár törekszünk a pontosságra, kérjük, vegye figyelembe, hogy az automatikus fordítások hibákat vagy pontatlanságokat tartalmazhatnak. Az eredeti dokumentum az eredeti nyelvén tekintendő hiteles forrásnak. Kritikus információk esetén javasolt professzionális emberi fordítást igénybe venni. Nem vállalunk felelősséget semmilyen félreértésért vagy téves értelmezésért, amely a fordítás használatából eredhet.
\ No newline at end of file
diff --git a/translations/hu/CODE_OF_CONDUCT.md b/translations/hu/CODE_OF_CONDUCT.md
new file mode 100644
index 00000000..e2a12f2d
--- /dev/null
+++ b/translations/hu/CODE_OF_CONDUCT.md
@@ -0,0 +1,23 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "b0a9b4cccd918195f58224d5793da1a6",
+  "translation_date": "2025-08-28T03:23:07+00:00",
+  "source_file": "CODE_OF_CONDUCT.md",
+  "language_code": "hu"
+}
+-->
+# Microsoft Nyílt Forráskódú Magatartási Kódex
+
+Ez a projekt a [Microsoft Nyílt Forráskódú Magatartási Kódexét](https://opensource.microsoft.com/codeofconduct/?WT.mc_id=academic-77807-sagibbon) fogadta el.
+
+Erőforrások:
+
+- [Microsoft Nyílt Forráskódú Magatartási Kódex](https://opensource.microsoft.com/codeofconduct/?WT.mc_id=academic-77807-sagibbon)
+- [Microsoft Magatartási Kódex GYIK](https://opensource.microsoft.com/codeofconduct/faq/?WT.mc_id=academic-77807-sagibbon)
+- Kérdésekkel vagy aggályokkal forduljon az [opencode@microsoft.com](mailto:opencode@microsoft.com) címhez
+
+---
+
+**Felelősségkizárás**:  
+Ez a dokumentum az [Co-op Translator](https://github.com/Azure/co-op-translator) AI fordítószolgáltatás segítségével lett lefordítva. Bár törekszünk a pontosságra, kérjük, vegye figyelembe, hogy az automatikus fordítások hibákat vagy pontatlanságokat tartalmazhatnak. Az eredeti dokumentum az eredeti nyelvén tekintendő hiteles forrásnak. Kritikus információk esetén javasolt professzionális, emberi fordítást igénybe venni. Nem vállalunk felelősséget a fordítás használatából eredő félreértésekért vagy téves értelmezésekért.
\ No newline at end of file
diff --git a/translations/hu/CONTRIBUTING.md b/translations/hu/CONTRIBUTING.md
new file mode 100644
index 00000000..1faaf75b
--- /dev/null
+++ b/translations/hu/CONTRIBUTING.md
@@ -0,0 +1,22 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "777400e9f0336c7ee2f9a1200a88478f",
+  "translation_date": "2025-08-28T03:21:11+00:00",
+  "source_file": "CONTRIBUTING.md",
+  "language_code": "hu"
+}
+-->
+# Hozzájárulás
+
+Ez a projekt örömmel fogadja a hozzájárulásokat és javaslatokat. A legtöbb hozzájárulás esetében szükséges, hogy elfogadj egy Hozzájárulói Licencszerződést (CLA), amelyben kijelented, hogy jogod van és ténylegesen megadod nekünk a jogot, hogy felhasználjuk a hozzájárulásodat. További részletekért látogass el a [https://cla.microsoft.com](https://cla.microsoft.com/?WT.mc_id=academic-77807-sagibbon) oldalra.
+
+Amikor benyújtasz egy pull requestet, a CLA-bot automatikusan meghatározza, hogy szükséges-e CLA-t biztosítanod, és ennek megfelelően megjelöli a PR-t (pl. címke, megjegyzés). Egyszerűen kövesd a bot által adott utasításokat. Ezt csak egyszer kell megtenned az összes olyan repó esetében, amely a CLA-t használja. Kérjük, próbáld meg azt is elmagyarázni, hogy miért végezted el a változtatást, hogy jobban megértsük a kérésedet.
+
+Ez a projekt elfogadta a [Microsoft Nyílt Forráskódú Magatartási Kódexét](https://opensource.microsoft.com/codeofconduct/?WT.mc_id=academic-77807-sagibbon).
+További információért lásd a [Magatartási Kódex GYIK](https://opensource.microsoft.com/codeofconduct/faq/?WT.mc_id=academic-77807-sagibbon) oldalt, vagy lépj kapcsolatba a [opencode@microsoft.com](mailto:opencode@microsoft.com) címen bármilyen további kérdéssel vagy megjegyzéssel.
+
+---
+
+**Felelősség kizárása**:  
+Ez a dokumentum az [Co-op Translator](https://github.com/Azure/co-op-translator) AI fordítási szolgáltatás segítségével lett lefordítva. Bár törekszünk a pontosságra, kérjük, vegye figyelembe, hogy az automatikus fordítások hibákat vagy pontatlanságokat tartalmazhatnak. Az eredeti dokumentum az eredeti nyelvén tekintendő hiteles forrásnak. Fontos információk esetén javasolt professzionális emberi fordítást igénybe venni. Nem vállalunk felelősséget semmilyen félreértésért vagy téves értelmezésért, amely a fordítás használatából eredhet.
\ No newline at end of file
diff --git a/translations/hu/README.md b/translations/hu/README.md
new file mode 100644
index 00000000..06f15bb7
--- /dev/null
+++ b/translations/hu/README.md
@@ -0,0 +1,209 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "efa251c5fc089367f0a81c572874afca",
+  "translation_date": "2025-08-28T03:18:02+00:00",
+  "source_file": "README.md",
+  "language_code": "hu"
+}
+-->
+[![GitHub licenc](https://img.shields.io/github/license/microsoft/Web-Dev-For-Beginners.svg)](https://github.com/microsoft/Web-Dev-For-Beginners/blob/master/LICENSE)  
+[![GitHub közreműködők](https://img.shields.io/github/contributors/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/)  
+[![GitHub hibák](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/)  
+[![PR-k üdvözölve](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)  
+
+[![GitHub figyelők](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 forkok](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 csillagok](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)  
+
+[![Nyisd meg a Visual Studio Code-ban](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)  
+
+[![Microsoft Azure AI Foundry Discord](https://dcbadge.limes.pink/api/server/ByRwuEEgH4)](https://discord.com/invite/ByRwuEEgH4)  
+
+Kövesd az alábbi lépéseket, hogy elkezdhesd használni ezeket az erőforrásokat:  
+1. **Forkold a repót**: Kattints ide [![GitHub forkok](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)  
+2. **Klónozd a repót**:   `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`  
+3. [**Csatlakozz az Azure AI Foundry Discordhoz, és találkozz szakértőkkel és fejlesztőkkel**](https://discord.com/invite/ByRwuEEgH4)  
+
+# Webfejlesztés kezdőknek - Tananyag  
+
+Tanuld meg a webfejlesztés alapjait a Microsoft Cloud Advocates 12 hetes átfogó kurzusával. A 24 lecke során JavaScript, CSS és HTML ismereteket sajátíthatsz el gyakorlati projekteken keresztül, mint például terráriumok, böngészőbővítmények és űrjátékok. Vegyél részt kvízeken, vitákon és gyakorlati feladatokon. Fejleszd képességeidet és optimalizáld a tudásod projektalapú tanulási módszerünkkel. Kezdd el a kódolási utadat még ma!  
+
+#### 🧑‍🎓 _Diák vagy?_  
+
+Látogasd meg a [**Student Hub oldalt**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon), ahol kezdőknek szóló forrásokat, diákcsomagokat és akár ingyenes tanúsítványkuponokat is találhatsz. Ez az az oldal, amit érdemes könyvjelzőzni és időnként visszanézni, mivel havonta frissítjük a tartalmat.  
+
+### 📣 Bejelentés - _Új tananyag_ a Generatív AI-ról JavaScripthez most jelent meg  
+
+Ne hagyd ki az új Generatív AI tananyagot!  
+
+Látogasd meg a [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) oldalt, hogy elkezdhesd!  
+
+![Háttér](../../translated_images/background.148a8d43afde57303419a663f50daf586681bc2fabf833f66ef6954073983c66.hu.png)  
+
+- Leckék az alapoktól a RAG-ig.  
+- Interakció történelmi karakterekkel a GenAI és a társalkalmazásunk segítségével.  
+- Szórakoztató és lebilincselő narratíva, időutazásban lesz részed!  
+
+![karakter](../../translated_images/character.5c0dd8e067ffd693c16e2c5b7412ab075a2215ce31f998305639fa3a05e14fbe.hu.png)  
+
+Minden lecke tartalmaz egy feladatot, egy tudásellenőrzőt és egy kihívást, hogy megtanulhasd az alábbi témákat:  
+- Promptolás és prompt mérnökség  
+- Szöveg- és képalkalmazások generálása  
+- Keresési alkalmazások  
+
+Látogasd meg a [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) oldalt, hogy elkezdhesd!  
+
+## 🌱 Kezdés  
+
+> **Tanárok**, [adtunk néhány javaslatot](for-teachers.md) arra, hogyan használhatjátok ezt a tananyagot. Örömmel várjuk visszajelzéseiteket [a vitafórumunkon](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!  
+
+**[Tanulók](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, minden leckénél kezdjétek egy előzetes kvízzel, majd olvassátok el az előadási anyagot, végezzétek el a különböző tevékenységeket, és ellenőrizzétek a megértéseteket az utólagos kvízzel.  
+
+A tanulási élmény fokozása érdekében kapcsolódjatok össze társaitokkal, hogy együtt dolgozzatok a projekteken! A viták ösztönzöttek a [vitafórumunkon](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), ahol moderátoraink válaszolnak a kérdéseitekre.  
+
+További tanulmányaitokhoz erősen ajánljuk, hogy fedezzétek fel a [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) további tananyagainkat.  
+
+### 📋 Környezet beállítása  
+
+Ez a tananyag egy előre elkészített fejlesztési környezettel rendelkezik! Kezdésként választhatsz, hogy a tananyagot egy [Codespace](https://github.com/features/codespaces/) (_böngészőalapú, telepítést nem igénylő környezet_) vagy a saját számítógépeden, egy szövegszerkesztővel, például a [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) segítségével futtatod.  
+
+#### Hozd létre a repódat  
+Ahhoz, hogy könnyen elmentsd a munkádat, javasoljuk, hogy hozz létre egy saját másolatot erről a repóról. Ezt a **Use this template** gombra kattintva teheted meg az oldal tetején. Ez egy új repót hoz létre a GitHub fiókodban a tananyag másolatával.  
+
+Kövesd az alábbi lépéseket:  
+1. **Forkold a repót**: Kattints a "Fork" gombra az oldal jobb felső sarkában.  
+2. **Klónozd a repót**:   `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`  
+
+#### A tananyag futtatása Codespace-ben  
+
+A saját másolatodban, amit létrehoztál, kattints a **Code** gombra, és válaszd a **Open with Codespaces** lehetőséget. Ez létrehoz egy új Codespace-t, ahol dolgozhatsz.  
+
+[!Codespace](../..)./images/createcodespace.png)  
+
+#### A tananyag futtatása helyileg a számítógépeden  
+
+Ahhoz, hogy helyileg futtasd a tananyagot a számítógépeden, szükséged lesz egy szövegszerkesztőre, egy böngészőre és egy parancssori eszközre. Az első leckénk, [Bevezetés a programozási nyelvekbe és eszközökbe](../../1-getting-started-lessons/1-intro-to-programming-languages), végigvezet a különböző lehetőségeken, hogy kiválaszthasd, mi működik a legjobban számodra.  
+
+Ajánlásunk a [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) használata, amely beépített [Terminállal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) is rendelkezik. A Visual Studio Code-ot [innen töltheted le](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).  
+
+1. Klónozd a repódat a számítógépedre. Ezt a **Code** gombra kattintva és az URL másolásával teheted meg:  
+
+    [!CodeSpace](./images/createcodespace.png)  
+
+    Ezután nyisd meg a [Terminált](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) a [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) belül, és futtasd az alábbi parancsot, az `<your-repository-url>` helyére illesztve a másolt URL-t:  
+
+    ```bash 
+    git clone <your-repository-url>
+    ```  
+
+2. Nyisd meg a mappát a Visual Studio Code-ban. Ezt a **File** > **Open Folder** lehetőséggel teheted meg, és válaszd ki a most klónozott mappát.  
+
+>  Ajánlott Visual Studio Code bővítmények:  
+>  
+> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - HTML oldalak előnézetéhez a Visual Studio Code-on belül  
+> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - hogy gyorsabban írhass kódot  
+
+## 📂 Minden lecke tartalmazza:  
+
+- opcionális sketchnote  
+- opcionális kiegészítő videó  
+- előzetes bemelegítő kvíz  
+- írott lecke  
+- projektalapú leckéknél lépésről lépésre útmutatók a projekt elkészítéséhez  
+- tudásellenőrzők  
+- egy kihívás  
+- kiegészítő olvasmány  
+- feladat  
+- [utólagos kvíz](https://ff-quizzes.netlify.app/)  
+
+> **Megjegyzés a kvízekről**: Minden kvíz a Quiz-app mappában található, összesen 48 darab, mindegyik három kérdéssel. Ezek elérhetők [itt](https://ff-quizzes.netlify.app/), a kvíz alkalmazás helyileg is futtatható vagy Azure-ra telepíthető; kövesd az utasításokat a `quiz-app` mappában.  
+
+## 🗃️ Leckék  
+
+|     |                       Projekt neve                       |                            Tanított fogalmak                             | Tanulási célok                                                                                                                 |                                                         Kapcsolódó lecke                                                          |         Szerző          |  
+| :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |  
+| 01  |                     Kezdés                      |           Bevezetés a programozásba és az eszközök világába           | Ismerd meg a legtöbb programozási nyelv alapjait és a szoftvereket, amelyek segítik a profi fejlesztők munkáját | [Bevezetés a programozási nyelvekbe és eszközökbe](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) |         Jasmine         |  
+| 02  |                     Kezdés                      |             GitHub alapjai, csapatmunkával együtt             | Hogyan használd a GitHubot a projektedben, hogyan működj együtt másokkal egy kódbázison                                                    |                            [Bevezetés a GitHubba](./1-getting-started-lessons/2-github-basics/README.md)                             |          Floor          |  
+| 03  |                     Kezdés                      |                             Hozzáférhetőség                              | Ismerd meg a webes hozzáférhetőség alapjait                                                                                               |                       [Hozzáférhetőség alapjai](./1-getting-started-lessons/3-accessibility/README.md)                       |       Christopher       |  
+| 04  |                        JS Alapok                         |                         JavaScript adattípusok                          | A JavaScript adattípusainak alapjai                                                                                                 |                                       [Adattípusok](./2-js-basics/1-data-types/README.md)                                        |         Jasmine         |  
+| 05  |                        JS Alapok                         |                         Függvények és metódusok                          | Ismerd meg a függvényeket és metódusokat, hogy kezeld az alkalmazás logikai folyamatait                                                             |                              [Függvények és metódusok](./2-js-basics/2-functions-methods/README.md)                               | Jasmine és Christopher |  
+| 06  |                        JS Alapok                         |                        Döntéshozatal JS-ben                        | Tanuld meg, hogyan hozz létre feltételeket a kódodban döntéshozatali módszerekkel                                                           |                                 [Döntéshozatal](./2-js-basics/3-making-decisions/README.md)                                  |         Jasmine         |  
+| 07  |                        JS Alapok                         |                            Tömbök és ciklusok                            | Dolgozz adatokkal JavaScript tömbök és ciklusok segítségével                                                                                 |                                   [Tömbök és ciklusok](./2-js-basics/4-arrays-loops/README.md)                                    |         Jasmine         |  
+| 08  |       [Terrárium](./3-terrarium/solution/README.md)       |                            HTML a gyakorlatban                            | Építsd meg a HTML-t egy online terráriumhoz, a layout kialakítására összpontosítva                                                         |                                 [Bevezetés a HTML-be](./3-terrarium/1-intro-to-html/README.md)                                 |           Jen           |  
+| 09  |       [Terrárium](./3-terrarium/solution/README.md)       |                            CSS a gyakorlatban                             | Építsd meg a CSS-t az online terráriumhoz, a CSS alapjaira összpontosítva, beleértve az oldal reszponzívvá tételét                     |                                  [Bevezetés a CSS-be](./3-terrarium/2-intro-to-css/README.md)                                  |           Jen           |  
+| 10  |            [Terrárium](./3-terrarium/solution/README.md)            |                 JavaScript lezárások, DOM manipuláció                  | Készítsd el a JavaScriptet, hogy a terrárium húzás/ejtés interfészként működjön, a lezárásokra és a DOM manipulációra összpontosítva |                  [JavaScript lezárások, DOM manipuláció](./3-terrarium/3-intro-to-DOM-and-closures/README.md)                   |           Jen           |
+| 11  |          [Gépírás játék](./4-typing-game/solution/README.md)          |                          Gépírás játék készítése                       | Tanuld meg, hogyan használhatod a billentyűzet eseményeit JavaScript alkalmazásod logikájának vezérlésére                          |                                [Eseményvezérelt programozás](./4-typing-game/typing-game/README.md)                                |       Christopher       |
+| 12  | [Zöld böngészőbővítmény](./5-browser-extension/solution/README.md) |                         Böngészőkkel való munka                        | Ismerd meg, hogyan működnek a böngészők, történetüket, és hogyan hozhatod létre egy böngészőbővítmény első elemeit                 |                               [A böngészőkről](./5-browser-extension/1-about-browsers/README.md)                                |           Jen           |
+| 13  | [Zöld böngészőbővítmény](./5-browser-extension/solution/README.md) | Űrlap készítése, API hívása és változók tárolása helyi tárolóban       | Készítsd el böngészőbővítményed JavaScript elemeit, hogy API-t hívhass helyi tárolóban tárolt változók segítségével                |                [API-k, űrlapok és helyi tároló](./5-browser-extension/2-forms-browsers-local-storage/README.md)                 |           Jen           |
+| 14  | [Zöld böngészőbővítmény](./5-browser-extension/solution/README.md) |          Háttérfolyamatok a böngészőben, webes teljesítmény            | Használd a böngésző háttérfolyamatait az ikon kezelésére; ismerd meg a webes teljesítményt és néhány optimalizálási lehetőséget    |             [Háttérfeladatok és teljesítmény](./5-browser-extension/3-background-tasks-and-performance/README.md)              |           Jen           |
+| 15  |           [Űrjáték](./6-space-game/solution/README.md)           |             Fejlettebb játékfejlesztés JavaScriptben                  | Ismerd meg az öröklődést osztályok és kompozíciók segítségével, valamint a Pub/Sub mintát, hogy felkészülj egy játék készítésére   |                      [Bevezetés a fejlett játékfejlesztésbe](./6-space-game/1-introduction/README.md)                       |          Chris          |
+| 16  |           [Űrjáték](./6-space-game/solution/README.md)           |                           Rajzolás vászonra                           | Ismerd meg a Canvas API-t, amelyet elemek képernyőre rajzolására használnak                                                        |                                [Rajzolás vászonra](./6-space-game/2-drawing-to-canvas/README.md)                                |          Chris          |
+| 17  |           [Űrjáték](./6-space-game/solution/README.md)           |                   Elemek mozgatása a képernyőn                        | Fedezd fel, hogyan lehet mozgást adni az elemeknek a derékszögű koordináták és a Canvas API segítségével                          |                           [Elemek mozgatása](./6-space-game/3-moving-elements-around/README.md)                           |          Chris          |
+| 18  |           [Űrjáték](./6-space-game/solution/README.md)           |                          Ütközésérzékelés                             | Készítsd el, hogy az elemek ütközzenek és reagáljanak egymásra billentyűleütések segítségével, valamint biztosíts egy cooldown funkciót a játék teljesítményének érdekében |                              [Ütközésérzékelés](./6-space-game/4-collision-detection/README.md)                              |          Chris          |
+| 19  |           [Űrjáték](./6-space-game/solution/README.md)           |                             Pontszám vezetése                         | Végezz matematikai számításokat a játék állapota és teljesítménye alapján                                                          |                                    [Pontszám vezetése](./6-space-game/5-keeping-score/README.md)                                    |          Chris          |
+| 20  |           [Űrjáték](./6-space-game/solution/README.md)           |                     Játék befejezése és újraindítása                   | Ismerd meg, hogyan lehet befejezni és újraindítani a játékot, beleértve az eszközök tisztítását és a változók értékeinek visszaállítását |                                [A befejezési feltétel](./6-space-game/6-end-condition/README.md)                                 |          Chris          |
+| 21  |         [Banki alkalmazás](./7-bank-project/solution/README.md)          |                 HTML sablonok és útvonalak egy webalkalmazásban       | Tanuld meg, hogyan hozhatod létre egy többoldalas weboldal architektúrájának vázát útvonalak és HTML sablonok segítségével         |                            [HTML sablonok és útvonalak](./7-bank-project/1-template-route/README.md)                             |          Yohan          |
+| 22  |         [Banki alkalmazás](./7-bank-project/solution/README.md)          |                  Bejelentkezési és regisztrációs űrlap készítése       | Ismerd meg, hogyan készíthetsz űrlapokat és kezelheted az érvényesítési rutinokat                                                  |                                           [Űrlapok](./7-bank-project/2-forms/README.md)                                           |          Yohan          |
+| 23  |         [Banki alkalmazás](./7-bank-project/solution/README.md)          |                   Adatok lekérése és használata                       | Ismerd meg, hogyan áramlik az adat az alkalmazásodba és ki belőle, hogyan lehet lekérni, tárolni és eldobni                       |                                            [Adatok](./7-bank-project/3-data/README.md)                                            |          Yohan          |
+| 24  |         [Banki alkalmazás](./7-bank-project/solution/README.md)          |                      Állapotkezelés fogalmai                          | Ismerd meg, hogyan őrzi meg az alkalmazásod az állapotot, és hogyan kezelheted programozottan                                      |                                [Állapotkezelés](./7-bank-project/4-state-management/README.md)                                |          Yohan          |
+
+
+## 🏫 Pedagógia
+
+Tananyagunk két kulcsfontosságú pedagógiai elvet követ:
+* projektalapú tanulás
+* gyakori kvízek
+
+A program megtanítja a JavaScript, HTML és CSS alapjait, valamint a legújabb eszközöket és technikákat, amelyeket a mai webfejlesztők használnak. A diákok lehetőséget kapnak arra, hogy gyakorlati tapasztalatot szerezzenek gépírás játék, virtuális terrárium, környezetbarát böngészőbővítmény, űrjáték és üzleti banki alkalmazás készítésével. A sorozat végére a diákok szilárd webfejlesztési ismereteket szereznek.
+
+> 🎓 A tananyag első néhány leckéjét [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) formájában is elvégezheted a Microsoft Learn platformon!
+
+A tartalom projektekhez való igazítása révén a tanulási folyamat érdekesebbé válik a diákok számára, és a fogalmak megértése is tartósabb lesz. Emellett több JavaScript alapokat bemutató kezdő leckét is írtunk, amelyeket a "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" videósorozat kísér, amelynek néhány szerzője hozzájárult ehhez a tananyaghoz.
+
+Ezenkívül egy alacsony tétű kvíz az óra előtt segít a diákoknak a téma iránti érdeklődés felkeltésében, míg egy második kvíz az óra után elősegíti a fogalmak további rögzítését. Ez a tananyag rugalmas és szórakoztató, és teljes egészében vagy részben is elvégezhető. A projektek kicsiben kezdődnek, és a 12 hetes ciklus végére egyre összetettebbé válnak.
+
+Bár szándékosan kerültük a JavaScript keretrendszerek bevezetését, hogy a webfejlesztőként szükséges alapvető készségekre koncentráljunk, mielőtt keretrendszert alkalmaznánk, a tananyag befejezése után jó következő lépés lehet a Node.js megismerése egy másik videósorozat segítségével: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
+
+> Látogasd meg a [Magatartási kódexünket](CODE_OF_CONDUCT.md) és a [Hozzájárulási irányelveinket](CONTRIBUTING.md). Örömmel fogadjuk az építő jellegű visszajelzéseidet!
+
+
+## 🧭 Offline hozzáférés
+
+Ezt a dokumentációt offline is futtathatod a [Docsify](https://docsify.js.org/#/) segítségével. Forkold ezt a repót, [telepítsd a Docsify-t](https://docsify.js.org/#/quickstart) a helyi gépedre, majd a repó gyökérmappájában írd be: `docsify serve`. A weboldal a localhost 3000-es portján lesz elérhető: `localhost:3000`.
+
+## 📘 PDF
+
+Az összes lecke PDF formátumban megtalálható [itt](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
+
+
+## 🎒 Egyéb kurzusok
+
+Csapatunk más kurzusokat is készít! Nézd meg:
+
+- [Generatív AI kezdőknek](https://aka.ms/genai-beginners)
+- [Generatív AI kezdőknek .NET](https://github.com/microsoft/Generative-AI-for-beginners-dotnet)
+- [Generatív AI JavaScript-tel](https://github.com/microsoft/generative-ai-with-javascript)
+- [Generatív AI Java-val](https://github.com/microsoft/Generative-AI-for-beginners-java)
+- [AI kezdőknek](https://aka.ms/ai-beginners)
+- [Adattudomány kezdőknek](https://aka.ms/datascience-beginners)
+- [ML kezdőknek](https://aka.ms/ml-beginners)
+- [Kiberbiztonság kezdőknek](https://github.com/microsoft/Security-101)
+- [Webfejlesztés kezdőknek](https://aka.ms/webdev-beginners)
+- [IoT kezdőknek](https://aka.ms/iot-beginners)
+- [XR fejlesztés kezdőknek](https://github.com/microsoft/xr-development-for-beginners)
+- [GitHub Copilot elsajátítása ügynöki használatra](https://github.com/microsoft/Mastering-GitHub-Copilot-for-Paired-Programming)
+- [GitHub Copilot elsajátítása C#/.NET fejlesztők számára](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers)
+- [Válaszd ki saját Copilot kalandodat](https://github.com/microsoft/CopilotAdventures)
+
+## Licenc
+
+Ez a repó az MIT licenc alatt van licencelve. További információért lásd a [LICENC](../../LICENSE) fájlt.
+
+---
+
+**Felelősség kizárása**:  
+Ez a dokumentum az AI fordítási szolgáltatás, a [Co-op Translator](https://github.com/Azure/co-op-translator) segítségével lett lefordítva. Bár törekszünk a pontosságra, kérjük, vegye figyelembe, hogy az automatikus fordítások hibákat vagy pontatlanságokat tartalmazhatnak. Az eredeti dokumentum az eredeti nyelvén tekintendő hiteles forrásnak. Kritikus információk esetén javasolt professzionális emberi fordítást igénybe venni. Nem vállalunk felelősséget semmilyen félreértésért vagy téves értelmezésért, amely a fordítás használatából eredhet.
\ No newline at end of file
diff --git a/translations/hu/SECURITY.md b/translations/hu/SECURITY.md
new file mode 100644
index 00000000..17522796
--- /dev/null
+++ b/translations/hu/SECURITY.md
@@ -0,0 +1,51 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "4ecc3bf2e27983d4c780be6f26ee6228",
+  "translation_date": "2025-08-28T03:21:44+00:00",
+  "source_file": "SECURITY.md",
+  "language_code": "hu"
+}
+-->
+## Biztonság
+
+A Microsoft komolyan veszi szoftvertermékei és szolgáltatásai biztonságát, beleértve az összes forráskód-tárházat, amelyeket GitHub szervezeteinken keresztül kezelünk, mint például [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) és [GitHub szervezeteink](https://opensource.microsoft.com/?WT.mc_id=academic-77807-sagibbon).
+
+Ha úgy gondolja, hogy biztonsági sebezhetőséget talált bármely Microsoft tulajdonában lévő tárházban, amely megfelel [a Microsoft biztonsági sebezhetőség definíciójának](https://docs.microsoft.com/previous-versions/tn-archive/cc751383(v=technet.10)/?WT.mc_id=academic-77807-sagibbon), kérjük, jelentse nekünk az alábbiakban leírt módon.
+
+## Biztonsági problémák jelentése
+
+**Kérjük, ne jelentsen biztonsági sebezhetőségeket nyilvános GitHub problémákon keresztül.**
+
+Ehelyett jelentse őket a Microsoft Security Response Center (MSRC) oldalán: [https://msrc.microsoft.com/create-report](https://msrc.microsoft.com/create-report/?WT.mc_id=academic-77807-sagibbon).
+
+Ha inkább bejelentkezés nélkül szeretne jelentést tenni, küldjön e-mailt a [secure@microsoft.com](mailto:secure@microsoft.com) címre. Ha lehetséges, titkosítsa üzenetét PGP kulcsunkkal; töltse le azt a [Microsoft Security Response Center PGP Key oldalról](https://www.microsoft.com/msrc/pgp-key-msrc/?WT.mc_id=academic-77807-sagibbon).
+
+24 órán belül választ kell kapnia. Ha valamilyen okból nem kap választ, kérjük, kövesse nyomon e-mailben, hogy megbizonyosodjon arról, hogy megkaptuk az eredeti üzenetét. További információkért látogasson el a [microsoft.com/msrc](https://www.microsoft.com/msrc/?WT.mc_id=academic-77807-sagibbon) oldalra.
+
+Kérjük, hogy a lehető legtöbb alábbi információt adja meg, hogy segítsen nekünk jobban megérteni a lehetséges probléma természetét és kiterjedését:
+
+  * A probléma típusa (pl. puffer túlcsordulás, SQL injekció, cross-site scripting stb.)
+  * Az érintett forrásfájl(ok) teljes elérési útja, ahol a probléma megjelenik
+  * Az érintett forráskód helye (tag/ág/commit vagy közvetlen URL)
+  * Bármilyen speciális konfiguráció, amely szükséges a probléma reprodukálásához
+  * Lépésről lépésre leírt utasítások a probléma reprodukálásához
+  * Proof-of-concept vagy exploit kód (ha lehetséges)
+  * A probléma hatása, beleértve azt, hogy egy támadó hogyan használhatná ki a problémát
+
+Ez az információ segít nekünk gyorsabban feldolgozni a jelentését.
+
+Ha hibajutalomért jelent, a részletesebb jelentések hozzájárulhatnak magasabb jutalomhoz. Kérjük, látogasson el a [Microsoft Bug Bounty Program](https://microsoft.com/msrc/bounty/?WT.mc_id=academic-77807-sagibbon) oldalra további információkért az aktív programjainkról.
+
+## Előnyben részesített nyelvek
+
+Előnyben részesítjük, ha minden kommunikáció angol nyelven történik.
+
+## Irányelv
+
+A Microsoft a [Koordinált sebezhetőség-feltárás](https://www.microsoft.com/msrc/cvd/?WT.mc_id=academic-77807-sagibbon) elvét követi.
+
+---
+
+**Felelősség kizárása**:  
+Ez a dokumentum az AI fordítási szolgáltatás, a [Co-op Translator](https://github.com/Azure/co-op-translator) segítségével lett lefordítva. Bár törekszünk a pontosságra, kérjük, vegye figyelembe, hogy az automatikus fordítások hibákat vagy pontatlanságokat tartalmazhatnak. Az eredeti dokumentum az eredeti nyelvén tekintendő hiteles forrásnak. Kritikus információk esetén javasolt professzionális emberi fordítást igénybe venni. Nem vállalunk felelősséget semmilyen félreértésért vagy téves értelmezésért, amely a fordítás használatából eredhet.
\ No newline at end of file
diff --git a/translations/hu/SUPPORT.md b/translations/hu/SUPPORT.md
new file mode 100644
index 00000000..f6921d6a
--- /dev/null
+++ b/translations/hu/SUPPORT.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "c9d207ff77b4bb46e46dc2b607a8ec1a",
+  "translation_date": "2025-08-28T03:20:37+00:00",
+  "source_file": "SUPPORT.md",
+  "language_code": "hu"
+}
+-->
+# Támogatás
+
+## Hogyan lehet hibákat jelenteni és segítséget kérni  
+
+Ez a projekt a GitHub Issues-t használja a hibák és funkciókérések nyomon követésére. Kérjük, keresse meg a meglévő problémákat, mielőtt újakat jelentene be, hogy elkerülje a duplikációkat. Új problémák esetén jelentse be a hibát vagy funkciókérést új Issue-ként.
+
+Segítségért és kérdésekért a projekt használatával kapcsolatban, kérjük, tekintse meg [a hozzájárulási irányelveinket](CONTRIBUTING.md).
+
+## Microsoft Támogatási Irányelv  
+
+A projekt támogatása az itt felsorolt erőforrásokra korlátozódik.
+
+---
+
+**Felelősség kizárása**:  
+Ez a dokumentum az AI fordítási szolgáltatás [Co-op Translator](https://github.com/Azure/co-op-translator) segítségével lett lefordítva. Bár törekszünk a pontosságra, kérjük, vegye figyelembe, hogy az automatikus fordítások hibákat vagy pontatlanságokat tartalmazhatnak. Az eredeti dokumentum az eredeti nyelvén tekintendő hiteles forrásnak. Kritikus információk esetén javasolt professzionális emberi fordítást igénybe venni. Nem vállalunk felelősséget semmilyen félreértésért vagy téves értelmezésért, amely a fordítás használatából eredhet.
\ No newline at end of file
diff --git a/translations/hu/_404.md b/translations/hu/_404.md
new file mode 100644
index 00000000..fc22111b
--- /dev/null
+++ b/translations/hu/_404.md
@@ -0,0 +1,21 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "ea9f0804bd62f46d9808e953ec7fc459",
+  "translation_date": "2025-08-28T03:20:53+00:00",
+  "source_file": "_404.md",
+  "language_code": "hu"
+}
+-->
+# Folyamatban lévő munka
+
+Ezen az oldalon dolgozunk. Kérjük, térjen vissza később.
+
+Nyisson egy [problémát](https://github.com/microsoft/Web-Dev-For-Beginners/issues/new/choose), ha bármilyen kérdése van.
+
+**[Vissza a főoldalra](../../../../../../..)**
+
+---
+
+**Felelősség kizárása**:  
+Ez a dokumentum az AI fordítási szolgáltatás, a [Co-op Translator](https://github.com/Azure/co-op-translator) segítségével lett lefordítva. Bár törekszünk a pontosságra, kérjük, vegye figyelembe, hogy az automatikus fordítások hibákat vagy pontatlanságokat tartalmazhatnak. Az eredeti dokumentum az eredeti nyelvén tekintendő hiteles forrásnak. Kritikus információk esetén javasolt professzionális emberi fordítást igénybe venni. Nem vállalunk felelősséget semmilyen félreértésért vagy téves értelmezésért, amely a fordítás használatából eredhet.
\ No newline at end of file
diff --git a/translations/hu/docs/_navbar.md b/translations/hu/docs/_navbar.md
new file mode 100644
index 00000000..82722a2b
--- /dev/null
+++ b/translations/hu/docs/_navbar.md
@@ -0,0 +1,34 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "3bd2f51ecf4ac9b39277cba748943793",
+  "translation_date": "2025-08-28T04:11:56+00:00",
+  "source_file": "docs/_navbar.md",
+  "language_code": "hu"
+}
+-->
+- Fordítások
+  - [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)
+
+---
+
+**Felelősség kizárása**:  
+Ez a dokumentum az AI fordítási szolgáltatás, a [Co-op Translator](https://github.com/Azure/co-op-translator) segítségével lett lefordítva. Bár törekszünk a pontosságra, kérjük, vegye figyelembe, hogy az automatikus fordítások hibákat vagy pontatlanságokat tartalmazhatnak. Az eredeti dokumentum az eredeti nyelvén tekintendő hiteles forrásnak. Kritikus információk esetén javasolt professzionális emberi fordítást igénybe venni. Nem vállalunk felelősséget semmilyen félreértésért vagy téves értelmezésért, amely a fordítás használatából eredhet.
\ No newline at end of file
diff --git a/translations/hu/docs/_sidebar.md b/translations/hu/docs/_sidebar.md
new file mode 100644
index 00000000..f1c59edf
--- /dev/null
+++ b/translations/hu/docs/_sidebar.md
@@ -0,0 +1,51 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "655c91b5979de46f1d70d97f0c5f1d14",
+  "translation_date": "2025-08-28T04:11:27+00:00",
+  "source_file": "docs/_sidebar.md",
+  "language_code": "hu"
+}
+-->
+- Bevezetés
+  - [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 Alapok
+  - [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)
+
+- Gépelős játék
+  - [11](../4-typing-game/typing-game/README.md)
+  
+- Böngészőbővítmény
+  - [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)
+
+- Űrjáték
+  - [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)
+
+- Bank Projekt
+  - [21](../7-bank-project/1-template-route/README.md)
+  - [22](../7-bank-project/2-forms/README.md)
+  - [23](../7-bank-project/3-data/README.md)
+  - [24](../7-bank-project/4-state-management/README.md)
+
+---
+
+**Felelősség kizárása**:  
+Ez a dokumentum az AI fordítási szolgáltatás, a [Co-op Translator](https://github.com/Azure/co-op-translator) segítségével lett lefordítva. Bár törekszünk a pontosságra, kérjük, vegye figyelembe, hogy az automatikus fordítások hibákat vagy pontatlanságokat tartalmazhatnak. Az eredeti dokumentum az eredeti nyelvén tekintendő hiteles forrásnak. Kritikus információk esetén javasolt professzionális emberi fordítást igénybe venni. Nem vállalunk felelősséget semmilyen félreértésért vagy téves értelmezésért, amely a fordítás használatából eredhet.
\ No newline at end of file
diff --git a/translations/hu/for-teachers.md b/translations/hu/for-teachers.md
new file mode 100644
index 00000000..f9319972
--- /dev/null
+++ b/translations/hu/for-teachers.md
@@ -0,0 +1,47 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "75cb51f7ca9ea0b097ef4a1287e9290c",
+  "translation_date": "2025-08-28T03:22:27+00:00",
+  "source_file": "for-teachers.md",
+  "language_code": "hu"
+}
+-->
+## Oktatóknak
+
+Szeretné használni ezt a tananyagot az osztályában? Nyugodtan tegye meg!
+
+Valójában a GitHubon belül is használhatja, ha a GitHub Classroomot használja.
+
+Ehhez forkolja ezt a repót. Minden leckéhez létre kell hoznia egy külön repót, így minden mappát külön repóba kell kiválasztania. Így a [GitHub Classroom](https://classroom.github.com/classrooms) külön-külön tudja kezelni az egyes leckéket.
+
+Ezek az [részletes útmutatók](https://github.blog/2020-03-18-set-up-your-digital-classroom-with-github-classroom/) segítenek abban, hogyan állítsa be az osztályát.
+
+## Használata Moodle-ben, Canvasben vagy Blackboardban
+
+Ez a tananyag jól működik ezekben a tanulásmenedzsment rendszerekben! Használja a [Moodle feltöltési fájlt](../../../../../../../teaching-files/webdev-moodle.mbz) a teljes tartalomhoz, vagy próbálja ki a [Common Cartridge fájlt](../../../../../../../teaching-files/webdev-common-cartridge.imscc), amely néhány tartalmat tartalmaz. A Moodle Cloud nem támogatja a teljes Common Cartridge exportokat, ezért célszerűbb a Moodle letöltési fájlt használni, amely feltölthető a Canvasba. Kérjük, ossza meg velünk, hogyan javíthatnánk ezen az élményen.
+
+![Moodle](../../translated_images/moodle.94eb93d714a50cb2c97435b408017dee224348b61bc86203ffd43a4f4e57b95f.hu.png)
+> A tananyag egy Moodle osztályteremben
+
+![Canvas](../../translated_images/canvas.fbd605ff8e5b8aff567d398528ce113db304446b90b9cad55c654de3fdfcda34.hu.png)
+> A tananyag a Canvasben
+
+## A repó használata jelenlegi formájában
+
+Ha szeretné a repót a jelenlegi formájában használni, GitHub Classroom nélkül, az is lehetséges. Ebben az esetben kommunikálnia kell a diákjaival, hogy melyik leckén dolgozzanak együtt.
+
+Online formátumban (Zoom, Teams vagy más) például létrehozhat csoportszobákat a kvízekhez, és mentorálhatja a diákokat, hogy felkészüljenek a tanulásra. Ezután meghívhatja a diákokat a kvízekre, és kérheti, hogy egy adott időpontban 'issues' formájában nyújtsák be a válaszaikat. Ugyanezt megteheti a feladatokkal is, ha azt szeretné, hogy a diákok nyíltan, együttműködve dolgozzanak.
+
+Ha inkább egy privátabb formátumot részesít előnyben, kérje meg a diákjait, hogy forkolják a tananyagot, leckéről leckére, saját GitHub repóikba privát repóként, és adjanak Önnek hozzáférést. Ezután a diákok privát módon kitölthetik a kvízeket és feladatokat, és azokat az Ön osztálytermi repóján keresztül issues formájában nyújthatják be.
+
+Számos módja van annak, hogy ez működjön egy online osztálytermi formátumban. Kérjük, ossza meg velünk, hogy Önnek mi működik a legjobban!
+
+## Kérjük, ossza meg velünk a véleményét!
+
+Szeretnénk, ha ez a tananyag az Ön és a diákjai számára is megfelelően működne. Vegye fel velünk a kapcsolatot a [Tanári sarokban](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner), és nyisson egy [**új issue-t**](https://github.com/microsoft/Web-Dev-For-Beginners/issues/new/choose) bármilyen kérés, hiba vagy visszajelzés esetén.
+
+---
+
+**Felelősség kizárása**:  
+Ez a dokumentum az AI fordítási szolgáltatás, a [Co-op Translator](https://github.com/Azure/co-op-translator) segítségével került lefordításra. Bár törekszünk a pontosságra, kérjük, vegye figyelembe, hogy az automatikus fordítások hibákat vagy pontatlanságokat tartalmazhatnak. Az eredeti dokumentum az eredeti nyelvén tekintendő hiteles forrásnak. Kritikus információk esetén javasolt professzionális emberi fordítást igénybe venni. Nem vállalunk felelősséget a fordítás használatából eredő félreértésekért vagy téves értelmezésekért.
\ No newline at end of file
diff --git a/translations/hu/lesson-template/README.md b/translations/hu/lesson-template/README.md
new file mode 100644
index 00000000..d73b5937
--- /dev/null
+++ b/translations/hu/lesson-template/README.md
@@ -0,0 +1,65 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "0494be70ad7fadd13a8c3d549c23e355",
+  "translation_date": "2025-08-28T04:12:17+00:00",
+  "source_file": "lesson-template/README.md",
+  "language_code": "hu"
+}
+-->
+# [Lecke Témája]
+
+![Videó beágyazása itt](../../../lesson-template/video-url)
+
+## [Előzetes kvíz](../../../lesson-template/quiz-url)
+
+[Leírás arról, hogy mit fogunk tanulni]
+
+### Bevezetés
+
+Ismertetés arról, hogy mit fogunk lefedni
+
+> Jegyzetek
+
+### Előfeltétel
+
+Milyen lépéseket kellett volna már teljesíteni a lecke előtt?
+
+### Felkészülés
+
+Előkészítő lépések a lecke megkezdéséhez
+
+---
+
+[Lépjünk végig a tartalmon blokkokban]
+
+## [1. Téma]
+
+### Feladat:
+
+Dolgozzatok együtt, hogy fokozatosan fejlesszétek a kódbázist, és építsétek meg a projektet közös kóddal:
+
+```html
+code blocks
+```
+
+✅ Tudásellenőrzés - használd ki ezt a pillanatot, hogy nyitott kérdésekkel bővítsd a diákok ismereteit
+
+## [2. Téma]
+
+## [3. Téma]
+
+🚀 Kihívás: Adj egy feladatot a diákoknak, amelyen közösen dolgozhatnak az órán, hogy továbbfejlesszék a projektet
+
+Opcionális: adj egy képernyőképet a befejezett lecke felhasználói felületéről, ha releváns
+
+## [Utólagos kvíz](../../../lesson-template/quiz-url)
+
+## Áttekintés és Önálló Tanulás
+
+**Határidő [HH/ÉÉ]**: [Feladat Neve](assignment.md)
+
+---
+
+**Felelősség kizárása**:  
+Ez a dokumentum az AI fordítási szolgáltatás, a [Co-op Translator](https://github.com/Azure/co-op-translator) segítségével lett lefordítva. Bár törekszünk a pontosságra, kérjük, vegye figyelembe, hogy az automatikus fordítások hibákat vagy pontatlanságokat tartalmazhatnak. Az eredeti dokumentum az eredeti nyelvén tekintendő hiteles forrásnak. Kritikus információk esetén javasolt professzionális emberi fordítást igénybe venni. Nem vállalunk felelősséget semmilyen félreértésért vagy téves értelmezésért, amely a fordítás használatából eredhet.
\ No newline at end of file
diff --git a/translations/hu/lesson-template/assignment.md b/translations/hu/lesson-template/assignment.md
new file mode 100644
index 00000000..673faec2
--- /dev/null
+++ b/translations/hu/lesson-template/assignment.md
@@ -0,0 +1,23 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "b5f62ec256c7e43e771f0d3b4e1a9130",
+  "translation_date": "2025-08-28T04:12:40+00:00",
+  "source_file": "lesson-template/assignment.md",
+  "language_code": "hu"
+}
+-->
+# [Feladat neve]
+
+## Útmutatások
+
+## Értékelési szempontok
+
+| Kritérium | Kiváló | Megfelelő | Fejlesztésre szorul |
+| --------- | ------- | --------- | ------------------- |
+|           |         |           |                     |
+
+---
+
+**Felelősségkizárás**:  
+Ezt a dokumentumot az [Co-op Translator](https://github.com/Azure/co-op-translator) AI fordítási szolgáltatás segítségével fordítottuk le. Bár törekszünk a pontosságra, kérjük, vegye figyelembe, hogy az automatikus fordítások hibákat vagy pontatlanságokat tartalmazhatnak. Az eredeti dokumentum az eredeti nyelvén tekintendő hiteles forrásnak. Kritikus információk esetén javasolt a professzionális, emberi fordítás igénybevétele. Nem vállalunk felelősséget a fordítás használatából eredő félreértésekért vagy téves értelmezésekért.
\ No newline at end of file
diff --git a/translations/hu/quiz-app/README.md b/translations/hu/quiz-app/README.md
new file mode 100644
index 00000000..fd0cbea2
--- /dev/null
+++ b/translations/hu/quiz-app/README.md
@@ -0,0 +1,191 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "5301875c55bb305e6046bed3a4fd06d2",
+  "translation_date": "2025-08-28T04:21:34+00:00",
+  "source_file": "quiz-app/README.md",
+  "language_code": "hu"
+}
+-->
+# Kvíz alkalmazás
+
+Ezek a kvízek a data science tananyag előtti és utáni előadásokhoz kapcsolódó kvízek a következő oldalon: https://aka.ms/webdev-beginners
+
+## Fordított kvízkészlet hozzáadása
+
+Adj hozzá egy kvízfordítást úgy, hogy létrehozod a megfelelő kvízstruktúrákat az `assets/translations` mappákban. Az eredeti kvízek az `assets/translations/en` mappában találhatók. A kvízek több csoportba vannak osztva. Ügyelj arra, hogy a számozás igazodjon a megfelelő kvízszekcióhoz. Ebben a tananyagban összesen 40 kvíz található, a számozás 0-tól kezdődik.
+
+  
+<details>
+<summary>Íme, hogyan néz ki egy fordítási fájl:</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>
+
+A fordítások szerkesztése után szerkeszd a translation mappában található index.js fájlt, hogy importáld az összes fájlt az `en` mappában található konvenciók szerint.
+
+Szerkeszd az `index.js` fájlt az `assets/translations` mappában, hogy importáld az új fordított fájlokat.
+
+Például, ha a fordítás JSON fájlod neve `ex.json`, akkor az 'ex' lesz a lokalizációs kulcs, és az alábbiak szerint add hozzá az importáláshoz:
+
+<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>
+
+## A Kvíz alkalmazás futtatása helyben
+
+### Előfeltételek
+
+- Egy GitHub fiók
+- [Node.js és Git](https://nodejs.org/)
+
+### Telepítés és beállítás
+
+1. Hozz létre egy repót ebből a [sablonból](https://github.com/new?template_name=Web-Dev-For-Beginners&template_owner=microsoft) 
+
+1. Klónozd az új repót, és navigálj a kvíz-alkalmazás mappájába
+
+   ```bash
+   git clone https://github.com/your-github-organization/repo-name
+   cd repo-name/quiz-app
+   ```
+
+1. Telepítsd az npm csomagokat és függőségeket
+
+   ```bash
+   npm install
+   ```
+
+### Az alkalmazás felépítése
+
+1. Az alkalmazás felépítéséhez futtasd:
+
+   ```bash
+   npm run build
+   ```
+
+### Az alkalmazás indítása
+
+1. Az alkalmazás futtatásához futtasd:
+
+    ```bash
+    npm run dev
+    ```
+
+### [Opcionális] Lintelés
+
+1. A kód lintelésének biztosításához futtasd:
+
+    ```bash
+    npm run lint
+    ```
+
+## A Kvíz alkalmazás telepítése Azure-ra 
+
+### Előfeltételek
+- Egy Azure előfizetés. Itt regisztrálhatsz ingyenesen: [itt](https://aka.ms/azure-free).
+
+    _A kvíz alkalmazás telepítésének becsült költsége: INGYENES_
+
+[![Deploy to Azure](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/#create/Microsoft.StaticApp)
+
+Miután bejelentkeztél az Azure-ra a fenti linken keresztül, válassz egy előfizetést és egy erőforráscsoportot, majd:
+
+- Statikus webalkalmazás részletei: Adj meg egy nevet, és válassz egy tárhelyi tervet
+- GitHub bejelentkezés: Állítsd be a telepítési forrást GitHub-ra, majd jelentkezz be, és töltsd ki az űrlap szükséges mezőit:
+    - *Szervezet* – Válaszd ki a szervezetedet.
+    - *Repository* – Válaszd ki a Web Dev for Beginners tananyag repóját. 
+    - *Branch* - Válassz egy ágat (main) 
+- Build Presets: Az Azure Static Web Apps egy észlelési algoritmust használ az alkalmazásodban használt keretrendszer felismerésére. 
+    - *App location* - ./quiz-app
+    - *Api location* -
+    - *Output location* - dist
+- Telepítés: Kattints a 'Review + Create', majd a 'Create' gombra.
+
+    Miután a telepítés megtörtént, egy workflow fájl jön létre a repo *.github* könyvtárában. Ez a workflow fájl tartalmazza azokat az eseményeket, amelyek újratelepítést indítanak az alkalmazás Azure-ra, például _egy **push** a **main** ágon stb.
+
+    <details>
+    <summary>Példa Workflow fájl</summary>
+    Íme, hogyan nézhet ki a GitHub Actions workflow fájl:
+    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>
+
+- Telepítés után: Miután a telepítés befejeződött, kattints a 'Go to Deployment', majd a 'View app in browser' gombra.
+
+Miután a GitHub Action (workflow) sikeresen lefutott, frissítsd az élő oldalt, hogy megtekinthesd az alkalmazásodat.
+
+---
+
+**Felelősség kizárása**:  
+Ez a dokumentum az AI fordítási szolgáltatás [Co-op Translator](https://github.com/Azure/co-op-translator) segítségével lett lefordítva. Bár törekszünk a pontosságra, kérjük, vegye figyelembe, hogy az automatikus fordítások hibákat vagy pontatlanságokat tartalmazhatnak. Az eredeti dokumentum az eredeti nyelvén tekintendő hiteles forrásnak. Kritikus információk esetén javasolt professzionális emberi fordítást igénybe venni. Nem vállalunk felelősséget semmilyen félreértésért vagy téves értelmezésért, amely a fordítás használatából eredhet.
\ No newline at end of file
diff --git a/translations/sw/1-getting-started-lessons/1-intro-to-programming-languages/README.md b/translations/sw/1-getting-started-lessons/1-intro-to-programming-languages/README.md
new file mode 100644
index 00000000..05ed696f
--- /dev/null
+++ b/translations/sw/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-28T04:29:18+00:00",
+  "source_file": "1-getting-started-lessons/1-intro-to-programming-languages/README.md",
+  "language_code": "sw"
+}
+-->
+# Utangulizi wa Lugha za Programu na Zana za Kazi
+
+Somo hili linashughulikia misingi ya lugha za programu. Mada zilizojadiliwa hapa zinatumika kwa lugha nyingi za programu za kisasa leo. Katika sehemu ya 'Zana za Kazi', utajifunza kuhusu programu muhimu inayokusaidia kama msanidi programu.
+
+![Intro Programming](../../../../translated_images/webdev101-programming.d6e3f98e61ac4bff0b27dcbf1c3f16c8ed46984866f2d29988929678b0058fde.sw.png)
+> Sketchnote na [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Maswali Kabla ya Somo
+[Maswali kabla ya somo](https://forms.office.com/r/dru4TE0U9n?origin=lprLink)
+
+## Utangulizi
+
+Katika somo hili, tutajadili:
+
+- Programu ni nini?
+- Aina za lugha za programu
+- Vipengele vya msingi vya programu
+- Programu muhimu na zana kwa msanidi programu mtaalamu
+
+> Unaweza kuchukua somo hili kwenye [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon)!
+
+## Programu ni Nini?
+
+Programu (inayojulikana pia kama kuandika kodi) ni mchakato wa kuandika maagizo kwa kifaa kama kompyuta au kifaa cha mkononi. Tunaandika maagizo haya kwa kutumia lugha ya programu, ambayo kisha hutafsiriwa na kifaa. Seti hizi za maagizo zinaweza kuitwa kwa majina mbalimbali, lakini *programu*, *programu ya kompyuta*, *programu tumizi (app)*, na *executable* ni baadhi ya majina maarufu.
+
+*Programu* inaweza kuwa chochote kilichoandikwa kwa kodi; tovuti, michezo, na programu za simu ni programu. Ingawa inawezekana kuunda programu bila kuandika kodi, mantiki ya msingi inatafsiriwa na kifaa na mantiki hiyo labda iliandikwa kwa kodi. Programu inayotekeleza au kuendesha kodi inatekeleza maagizo. Kifaa unachosoma somo hili nacho kinaendesha programu ili kuonyesha kwenye skrini yako.
+
+✅ Fanya utafiti kidogo: Nani anachukuliwa kuwa mpangaji wa kompyuta wa kwanza duniani?
+
+## Lugha za Programu
+
+Lugha za programu huwezesha wasanidi programu kuandika maagizo kwa kifaa. Vifaa vinaweza kuelewa tu binary (1s na 0s), na kwa *wengi* wa wasanidi programu hiyo si njia bora ya kuwasiliana. Lugha za programu ni njia ya mawasiliano kati ya binadamu na kompyuta.
+
+Lugha za programu zinakuja katika miundo tofauti na zinaweza kutumikia madhumuni tofauti. Kwa mfano, JavaScript hutumika hasa kwa programu za wavuti, wakati Bash hutumika hasa kwa mifumo ya uendeshaji.
+
+*Lugha za kiwango cha chini* kwa kawaida zinahitaji hatua chache zaidi kuliko *lugha za kiwango cha juu* kwa kifaa kutafsiri maagizo. Hata hivyo, kinachofanya lugha za kiwango cha juu kuwa maarufu ni usomaji wake na msaada wake. JavaScript inachukuliwa kuwa lugha ya kiwango cha juu.
+
+Kodi ifuatayo inaonyesha tofauti kati ya lugha ya kiwango cha juu na JavaScript na lugha ya kiwango cha chini na 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
+```
+
+Amini usiamini, *zote zinafanya kitu kimoja*: kuchapisha mlolongo wa Fibonacci hadi 10.
+
+✅ Mlolongo wa Fibonacci [unafafanuliwa](https://en.wikipedia.org/wiki/Fibonacci_number) kama seti ya namba ambapo kila namba ni jumla ya mbili zilizotangulia, kuanzia 0 na 1. Namba 10 za kwanza zinazofuata mlolongo wa Fibonacci ni 0, 1, 1, 2, 3, 5, 8, 13, 21 na 34.
+
+## Vipengele vya Programu
+
+Maagizo moja katika programu huitwa *tamko* na kwa kawaida litakuwa na herufi au nafasi ya mstari inayoweka alama mahali ambapo tamko linaisha, au *linamalizika*. Jinsi programu inavyomalizika hutofautiana na kila lugha.
+
+Matamko ndani ya programu yanaweza kutegemea data inayotolewa na mtumiaji au mahali pengine ili kutekeleza maagizo. Data inaweza kubadilisha jinsi programu inavyofanya kazi, kwa hivyo lugha za programu huja na njia ya kuhifadhi data kwa muda ili iweze kutumika baadaye. Hizi huitwa *vigezo*. Vigezo ni matamko yanayoelekeza kifaa kuhifadhi data kwenye kumbukumbu yake. Vigezo katika programu ni sawa na vigezo katika algebra, ambapo vina jina la kipekee na thamani yake inaweza kubadilika kwa muda.
+
+Kuna uwezekano kwamba baadhi ya matamko hayatatekelezwa na kifaa. Hii kwa kawaida hufanyika kwa makusudi wakati imeandikwa na msanidi programu au kwa bahati mbaya wakati kosa lisilotarajiwa linatokea. Udhibiti wa aina hii juu ya programu hufanya iwe thabiti zaidi na rahisi kudumisha. Kwa kawaida, mabadiliko haya ya udhibiti hutokea wakati hali fulani zinatimizwa. Tamko la kawaida linalotumika katika programu za kisasa kudhibiti jinsi programu inavyofanya kazi ni tamko la `if..else`.
+
+✅ Utajifunza zaidi kuhusu aina hii ya tamko katika masomo yanayofuata.
+
+## Zana za Kazi
+
+[![Tools of the Trade](https://img.youtube.com/vi/69WJeXGBdxg/0.jpg)](https://youtube.com/watch?v=69WJeXGBdxg "Tools of the Trade")
+
+> 🎥 Bofya picha hapo juu kwa video kuhusu zana
+
+Katika sehemu hii, utajifunza kuhusu programu ambazo unaweza kuona kuwa ni muhimu sana unapoanza safari yako ya maendeleo ya kitaalamu.
+
+**Mazingira ya maendeleo** ni seti ya kipekee ya zana na vipengele ambavyo msanidi programu hutumia mara kwa mara wakati wa kuandika programu. Baadhi ya zana hizi zimeboreshwa kwa mahitaji maalum ya msanidi programu, na zinaweza kubadilika kwa muda ikiwa msanidi programu atabadilisha vipaumbele katika kazi, miradi ya kibinafsi, au anapotumia lugha tofauti ya programu. Mazingira ya maendeleo ni ya kipekee kama wasanidi programu wanaoyatumia.
+
+### Vihariri
+
+Moja ya zana muhimu zaidi kwa maendeleo ya programu ni kihariri. Vihariri ni mahali unapandika kodi yako na wakati mwingine mahali unapotekeleza kodi yako.
+
+Wasanidi programu hutegemea vihariri kwa sababu kadhaa za ziada:
+
+- *Kutatua hitilafu* husaidia kugundua hitilafu na makosa kwa kupitia kodi, mstari kwa mstari. Baadhi ya vihariri vina uwezo wa kutatua hitilafu; vinaweza kuboreshwa na kuongezwa kwa lugha maalum za programu.
+- *Kuwainua sintaksia* huongeza rangi na muundo wa maandishi kwenye kodi, na kuifanya iwe rahisi kusoma. Vihariri vingi huruhusu kubinafsisha sintaksia.
+- *Viendelezi na Muunganiko* ni zana maalum kwa wasanidi programu, na kwa wasanidi programu. Zana hizi hazikujengwa ndani ya kihariri cha msingi. Kwa mfano, wasanidi programu wengi huandika maelezo ya kodi yao kuelezea jinsi inavyofanya kazi. Wanaweza kusakinisha kiendelezi cha kuangalia tahajia ili kusaidia kugundua makosa ya tahajia ndani ya maelezo. Viendelezi vingi vinakusudiwa kutumika ndani ya kihariri maalum, na vihariri vingi huja na njia ya kutafuta viendelezi vinavyopatikana.
+- *Kubinafsisha* huwezesha wasanidi programu kuunda mazingira ya kipekee ya maendeleo yanayokidhi mahitaji yao. Vihariri vingi vinaweza kubinafsishwa sana na vinaweza pia kuruhusu wasanidi programu kuunda viendelezi vya kibinafsi.
+
+#### Vihariri Maarufu na Viendelezi vya Maendeleo ya Wavuti
+
+- [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/)
+
+### Vivinjari
+
+Zana nyingine muhimu ni kivinjari. Wasanidi programu wa wavuti hutegemea kivinjari kuona jinsi kodi yao inavyofanya kazi kwenye wavuti. Pia hutumika kuonyesha vipengele vya kuona vya ukurasa wa wavuti vilivyoandikwa kwenye kihariri, kama HTML.
+
+Vivinjari vingi huja na *zana za wasanidi programu* (DevTools) ambazo zina seti ya vipengele muhimu na taarifa za kusaidia wasanidi programu kukusanya na kunasa taarifa muhimu kuhusu programu yao. Kwa mfano: Ikiwa ukurasa wa wavuti una makosa, wakati mwingine ni muhimu kujua yalitokea lini. DevTools katika kivinjari inaweza kusanidiwa kunasa taarifa hii.
+
+#### Vivinjari Maarufu na 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)
+
+### Zana za Laini ya Amri
+
+Baadhi ya wasanidi programu wanapendelea mtazamo usio wa picha kwa kazi zao za kila siku na hutegemea laini ya amri kufanikisha hili. Kuandika kodi kunahitaji kiasi kikubwa cha kuandika, na baadhi ya wasanidi programu wanapendelea kutoingiliwa na mtiririko wao kwenye kibodi. Watatumia njia za mkato za kibodi kubadilisha kati ya madirisha ya desktop, kufanya kazi kwenye faili tofauti, na kutumia zana. Kazi nyingi zinaweza kukamilishwa kwa panya, lakini faida moja ya kutumia laini ya amri ni kwamba mengi yanaweza kufanywa na zana za laini ya amri bila hitaji la kubadilisha kati ya panya na kibodi. Faida nyingine ya laini ya amri ni kwamba zinaweza kusanidiwa na unaweza kuhifadhi usanidi wa kibinafsi, kuubadilisha baadaye, na kuuingiza kwenye mashine nyingine za maendeleo. Kwa sababu mazingira ya maendeleo ni ya kipekee kwa kila msanidi programu, wengine wataepuka kutumia laini ya amri, wengine wataitegemea kabisa, na wengine wanapendelea mchanganyiko wa zote mbili.
+
+### Chaguo Maarufu za Laini ya Amri
+
+Chaguo za laini ya amri zitatofautiana kulingana na mfumo wa uendeshaji unaotumia.
+
+*💻 = inakuja ikiwa imewekwa awali kwenye mfumo wa uendeshaji.*
+
+#### 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) (inayojulikana pia kama 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)
+
+#### Zana Maarufu za Laini ya Amri
+
+- [Git](https://git-scm.com/) (💻 kwenye mifumo mingi ya uendeshaji)
+- [NPM](https://www.npmjs.com/)
+- [Yarn](https://classic.yarnpkg.com/en/docs/cli/)
+
+### Nyaraka
+
+Wakati msanidi programu anataka kujifunza kitu kipya, mara nyingi atageukia nyaraka kujifunza jinsi ya kutumia. Wasanidi programu mara nyingi hutegemea nyaraka kuwaongoza jinsi ya kutumia zana na lugha ipasavyo, na pia kupata maarifa ya kina ya jinsi inavyofanya kazi.
+
+#### Nyaraka Maarufu za Maendeleo ya Wavuti
+
+- [Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web), kutoka Mozilla, wachapishaji wa kivinjari cha [Firefox](https://www.mozilla.org/firefox/)
+- [Frontend Masters](https://frontendmasters.com/learn/)
+- [Web.dev](https://web.dev), kutoka Google, wachapishaji wa [Chrome](https://www.google.com/chrome/)
+- [Nyaraka za wasanidi programu wa Microsoft](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers), kwa [Microsoft Edge](https://www.microsoft.com/edge)
+- [W3 Schools](https://www.w3schools.com/where_to_start.asp)
+
+✅ Fanya utafiti: Sasa kwa kuwa unajua misingi ya mazingira ya msanidi programu wa wavuti, linganisha na ulinganishe na mazingira ya mbunifu wa wavuti.
+
+---
+
+## 🚀 Changamoto
+
+Linganisheni baadhi ya lugha za programu. Ni sifa gani za kipekee za JavaScript dhidi ya Java? Na vipi kuhusu COBOL dhidi ya Go?
+
+## Maswali Baada ya Somo
+[Maswali baada ya somo](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/2)
+
+## Mapitio na Kujisomea
+
+Jifunze kidogo kuhusu lugha tofauti zinazopatikana kwa msanidi programu. Jaribu kuandika mstari mmoja katika lugha moja, kisha uandike tena katika lugha mbili nyingine. Umejifunza nini?
+
+## Kazi
+
+[Kusoma Nyaraka](assignment.md)
+
+---
+
+**Kanusho**:  
+Hati hii imetafsiriwa kwa kutumia huduma ya kutafsiri ya AI [Co-op Translator](https://github.com/Azure/co-op-translator). Ingawa tunajitahidi kuhakikisha usahihi, tafadhali fahamu kuwa tafsiri za kiotomatiki zinaweza kuwa na makosa au kutokuwa sahihi. Hati ya asili katika lugha yake ya awali inapaswa kuzingatiwa kama chanzo cha mamlaka. Kwa taarifa muhimu, tafsiri ya kitaalamu ya binadamu inapendekezwa. Hatutawajibika kwa kutoelewana au tafsiri zisizo sahihi zinazotokana na matumizi ya tafsiri hii.
\ No newline at end of file
diff --git a/translations/sw/1-getting-started-lessons/1-intro-to-programming-languages/assignment.md b/translations/sw/1-getting-started-lessons/1-intro-to-programming-languages/assignment.md
new file mode 100644
index 00000000..45efe101
--- /dev/null
+++ b/translations/sw/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-28T04:31:29+00:00",
+  "source_file": "1-getting-started-lessons/1-intro-to-programming-languages/assignment.md",
+  "language_code": "sw"
+}
+-->
+# Kusoma Nyaraka
+
+## Maelekezo
+
+Kuna zana nyingi ambazo msanidi wa wavuti anaweza kuhitaji ambazo ziko kwenye [MDN documentation for client-side tooling](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview). Chagua zana 3 ambazo hazijashughulikiwa katika somo, eleza kwa nini msanidi wa wavuti angezitumia, na tafuta zana inayofaa chini ya kategoria hii na ushiriki nyaraka zake. Usitumie mfano wa zana sawa kwenye nyaraka za MDN.
+
+## Rubric
+
+Bora Zaidi | Inayotosheleza | Inahitaji Kuboresha
+--- | --- | -- |
+|Imeeleza kwa nini msanidi wa wavuti angeitumia zana| Imeeleza jinsi, lakini si kwa nini msanidi wa wavuti angeitumia zana| Haikutaja jinsi au kwa nini msanidi wa wavuti angeitumia zana  |
+
+---
+
+**Kanusho**:  
+Hati hii imetafsiriwa kwa kutumia huduma ya kutafsiri ya AI [Co-op Translator](https://github.com/Azure/co-op-translator). Ingawa tunajitahidi kuhakikisha usahihi, tafadhali fahamu kuwa tafsiri za kiotomatiki zinaweza kuwa na makosa au kutokuwa sahihi. Hati ya asili katika lugha yake ya awali inapaswa kuzingatiwa kama chanzo cha mamlaka. Kwa taarifa muhimu, tafsiri ya kitaalamu ya binadamu inapendekezwa. Hatutawajibika kwa kutokuelewana au tafsiri zisizo sahihi zinazotokana na matumizi ya tafsiri hii.
\ No newline at end of file
diff --git a/translations/sw/1-getting-started-lessons/2-github-basics/README.md b/translations/sw/1-getting-started-lessons/2-github-basics/README.md
new file mode 100644
index 00000000..0e6e2d82
--- /dev/null
+++ b/translations/sw/1-getting-started-lessons/2-github-basics/README.md
@@ -0,0 +1,339 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "05666cecb8983a72cf0ce1d18932b5b7",
+  "translation_date": "2025-08-28T04:36:52+00:00",
+  "source_file": "1-getting-started-lessons/2-github-basics/README.md",
+  "language_code": "sw"
+}
+-->
+# Utangulizi wa GitHub
+
+Somo hili linashughulikia misingi ya GitHub, jukwaa la kuhifadhi na kusimamia mabadiliko ya msimbo wako.
+
+![Utangulizi wa GitHub](../../../../translated_images/webdev101-github.8846d7971abef6f947909b4f9d343e2a23778aa716ca6b9d71df7174ee5009ac.sw.png)
+> Sketchnote na [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Jaribio Kabla ya Somo
+[Jaribio kabla ya somo](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/3)
+
+## Utangulizi
+
+Katika somo hili, tutashughulikia:
+
+- kufuatilia kazi unayofanya kwenye mashine yako
+- kufanya kazi kwenye miradi na wengine
+- jinsi ya kuchangia programu huria
+
+### Mahitaji ya Awali
+
+Kabla ya kuanza, hakikisha Git imewekwa. Katika terminal andika:  
+`git --version`
+
+Ikiwa Git haijawekwa, [pakua Git](https://git-scm.com/downloads). Kisha, weka wasifu wako wa Git wa ndani kwenye terminal:  
+* `git config --global user.name "jina-lako"`
+* `git config --global user.email "barua-pepe-yako"`
+
+Ili kuthibitisha kama Git tayari imewekwa, unaweza kuandika:  
+`git config --list`
+
+Utahitaji pia akaunti ya GitHub, mhariri wa msimbo (kama Visual Studio Code), na ufungue terminal yako (au: command prompt).
+
+Tembelea [github.com](https://github.com/) na unda akaunti ikiwa bado huna, au ingia na ujaze wasifu wako.
+
+✅ GitHub si jukwaa pekee la kuhifadhi msimbo duniani; yapo mengine, lakini GitHub ndilo linalojulikana zaidi.
+
+### Maandalizi
+
+Utahitaji folda yenye mradi wa msimbo kwenye mashine yako ya ndani (laptop au PC), na hifadhi ya umma kwenye GitHub, ambayo itatumika kama mfano wa jinsi ya kuchangia kwenye miradi ya wengine.
+
+---
+
+## Usimamizi wa Msimbo
+
+Tuseme una folda ya ndani yenye mradi wa msimbo na unataka kuanza kufuatilia maendeleo yako ukitumia git - mfumo wa kudhibiti matoleo. Watu wengine hulinganisha kutumia git na kuandika barua ya mapenzi kwa nafsi yako ya baadaye. Ukisoma ujumbe wako wa "commit" baada ya siku, wiki, au miezi, utaweza kukumbuka kwa nini ulifanya uamuzi fulani, au "kurudisha nyuma" mabadiliko - yaani, unapokuwa umeandika ujumbe mzuri wa "commit".
+
+### Kazi: Unda Hifadhi na Uweke Msimbo  
+
+> Tazama video  
+>  
+> [![Video ya misingi ya Git na GitHub](https://img.youtube.com/vi/9R31OUPpxU4/0.jpg)](https://www.youtube.com/watch?v=9R31OUPpxU4)
+
+1. **Unda hifadhi kwenye GitHub**. Kwenye GitHub.com, katika kichupo cha hifadhi, au kutoka kwenye upau wa urambazaji juu-kulia, tafuta kitufe cha **new repo**.
+
+   1. Pea hifadhi yako (folda) jina.
+   1. Chagua **create repository**.
+
+1. **Nenda kwenye folda yako ya kazi**. Katika terminal yako, badilisha hadi folda (inayojulikana pia kama saraka) unayotaka kuanza kufuatilia. Andika:
+
+   ```bash
+   cd [name of your folder]
+   ```
+
+1. **Anzisha hifadhi ya git**. Katika mradi wako andika:
+
+   ```bash
+   git init
+   ```
+
+1. **Angalia hali**. Ili kuangalia hali ya hifadhi yako andika:
+
+   ```bash
+   git status
+   ```
+
+   Matokeo yanaweza kuonekana kama haya:
+
+   ```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
+   ```
+
+   Kwa kawaida, amri ya `git status` inakuambia vitu kama faili gani ziko tayari _kuhifadhiwa_ kwenye hifadhi au zina mabadiliko unayoweza kutaka kuhifadhi.
+
+1. **Ongeza faili zote kwa kufuatilia**  
+   Hii pia inaitwa kuweka faili kwenye eneo la kusubiri.
+
+   ```bash
+   git add .
+   ```
+
+   Amri ya `git add` pamoja na hoja ya `.` inaonyesha kuwa faili zako zote na mabadiliko yako yameongezwa kwa kufuatilia.
+
+1. **Ongeza faili zilizochaguliwa kwa kufuatilia**
+
+   ```bash
+   git add [file or folder name]
+   ```
+
+   Hii inatusaidia kuongeza faili zilizochaguliwa tu kwenye eneo la kusubiri wakati hatutaki kuhifadhi faili zote mara moja.
+
+1. **Ondoa faili zote kutoka eneo la kusubiri**
+
+   ```bash
+   git reset
+   ```
+
+   Amri hii inatusaidia kuondoa faili zote kutoka eneo la kusubiri mara moja.
+
+1. **Ondoa faili maalum kutoka eneo la kusubiri**
+
+   ```bash
+   git reset [file or folder name]
+   ```
+
+   Amri hii inatusaidia kuondoa faili maalum tu kutoka eneo la kusubiri mara moja ikiwa hatutaki kuijumuisha kwenye "commit" inayofuata.
+
+1. **Hifadhi kazi yako**. Kwa sasa umeongeza faili kwenye eneo linaloitwa _staging area_. Mahali ambapo Git inafuatilia faili zako. Ili kufanya mabadiliko yawe ya kudumu unahitaji _kuhifadhi_ faili. Ili kufanya hivyo, unda _commit_ kwa kutumia amri ya `git commit`. _Commit_ inawakilisha hatua ya kuhifadhi katika historia ya hifadhi yako. Andika yafuatayo kuunda _commit_:
+
+   ```bash
+   git commit -m "first commit"
+   ```
+
+   Hii inahifadhi faili zako zote, ikiongeza ujumbe "first commit". Kwa ujumbe wa baadaye wa "commit" utataka kuwa na maelezo zaidi ili kueleza aina ya mabadiliko uliyofanya.
+
+1. **Unganisha hifadhi yako ya Git ya ndani na GitHub**. Hifadhi ya Git ni nzuri kwenye mashine yako lakini wakati fulani utataka kuwa na nakala rudufu ya faili zako mahali pengine na pia kuwaalika watu wengine kufanya kazi na wewe kwenye hifadhi yako. Mahali pazuri pa kufanya hivyo ni GitHub. Kumbuka tayari tumeunda hifadhi kwenye GitHub kwa hivyo tunachohitaji kufanya ni kuunganisha hifadhi yetu ya Git ya ndani na GitHub. Amri ya `git remote add` itafanya hivyo. Andika amri ifuatayo:
+
+   > Kumbuka, kabla ya kuandika amri, nenda kwenye ukurasa wa hifadhi yako ya GitHub ili kupata URL ya hifadhi. Utaitumia kwenye amri hapa chini. Badilisha ```https://github.com/username/repository_name.git``` na URL yako ya GitHub.
+
+   ```bash
+   git remote add origin https://github.com/username/repository_name.git
+   ```
+
+   Hii inaunda _remote_, au muunganisho, unaoitwa "origin" unaoelekeza kwenye hifadhi ya GitHub uliyounda awali.
+
+1. **Tuma faili za ndani kwenda GitHub**. Hadi sasa umeunda _muunganisho_ kati ya hifadhi ya ndani na hifadhi ya GitHub. Hebu tutume faili hizi kwenda GitHub kwa kutumia amri ifuatayo `git push`, kama ifuatavyo:  
+   
+   > Kumbuka, jina la tawi lako linaweza kuwa tofauti kwa chaguo-msingi kutoka ```main```.
+
+   ```bash
+   git push -u origin main
+   ```
+
+   Hii inatuma "commit" zako kwenye tawi lako la "main" kwenda GitHub.
+
+2. **Kuongeza mabadiliko zaidi**. Ikiwa unataka kuendelea kufanya mabadiliko na kuyasukuma kwenda GitHub utahitaji tu kutumia amri hizi tatu:
+
+   ```bash
+   git add .
+   git commit -m "type your commit message here"
+   git push
+   ```
+
+   > Kidokezo, unaweza pia kutaka kutumia faili ya `.gitignore` ili kuzuia faili ambazo hutaki kufuatilia zisionekane kwenye GitHub - kama faili ya maelezo unayohifadhi kwenye folda hiyo hiyo lakini haina nafasi kwenye hifadhi ya umma. Unaweza kupata violezo vya faili za `.gitignore` kwenye [.gitignore templates](https://github.com/github/gitignore).
+
+#### Ujumbe wa Commit
+
+Ujumbe mzuri wa Git commit unakamilisha sentensi ifuatayo:  
+Ikiwa utatumika, commit hii itafanya <weka ujumbe wako hapa>
+
+Kwa kichwa cha ujumbe tumia hali ya amri, wakati wa sasa: "badilisha" si "ilibadilishwa" wala "inabadilisha".  
+Kama ilivyo kwenye kichwa, kwenye mwili (hiari) pia tumia hali ya amri, wakati wa sasa. Mwili unapaswa kujumuisha motisha ya mabadiliko na kulinganisha haya na tabia ya awali. Unaelezea `kwa nini`, si `jinsi`.
+
+✅ Chukua dakika chache kuvinjari GitHub. Je, unaweza kupata ujumbe wa commit mzuri sana? Je, unaweza kupata ujumbe wa commit wa kawaida sana? Unafikiri ni taarifa gani muhimu zaidi na yenye manufaa kuwasilisha kwenye ujumbe wa commit?
+
+### Kazi: Kushirikiana
+
+Sababu kuu ya kuweka vitu kwenye GitHub ilikuwa kufanya iwezekane kushirikiana na waendelezaji wengine.
+
+## Kufanya kazi kwenye miradi na wengine
+
+> Tazama video  
+>  
+> [![Video ya misingi ya Git na GitHub](https://img.youtube.com/vi/bFCM-PC3cu8/0.jpg)](https://www.youtube.com/watch?v=bFCM-PC3cu8)
+
+Katika hifadhi yako, nenda kwenye `Insights > Community` ili kuona jinsi mradi wako unavyolinganishwa na viwango vya jamii vinavyopendekezwa.
+
+   Hapa kuna mambo ambayo yanaweza kuboresha hifadhi yako ya GitHub:  
+   - **Maelezo**. Je, umeongeza maelezo kwa mradi wako?  
+   - **README**. Je, umeongeza README? GitHub hutoa mwongozo wa kuandika [README](https://docs.github.com/articles/about-readmes/?WT.mc_id=academic-77807-sagibbon).  
+   - **Mwongozo wa kuchangia**. Je, mradi wako una [mwongozo wa kuchangia](https://docs.github.com/articles/setting-guidelines-for-repository-contributors/?WT.mc_id=academic-77807-sagibbon)?  
+   - **Kanuni za Maadili**. [Kanuni za Maadili](https://docs.github.com/articles/adding-a-code-of-conduct-to-your-project/).  
+   - **Leseni**. Labda muhimu zaidi, [leseni](https://docs.github.com/articles/adding-a-license-to-a-repository/).  
+
+Rasilimali hizi zote zitafaidi wanachama wapya wa timu. Na haya ndiyo mambo ambayo kawaida wachangiaji wapya huangalia kabla hata ya kuangalia msimbo wako, ili kugundua kama mradi wako ni mahali sahihi pa kutumia muda wao.
+
+✅ Faili za README, ingawa zinachukua muda kuandaa, mara nyingi hupuuzwa na waangalizi wenye shughuli nyingi. Je, unaweza kupata mfano wa README iliyoelezea vizuri sana? Kumbuka: kuna baadhi ya [zana za kusaidia kuunda README nzuri](https://www.makeareadme.com/) ambazo unaweza kupenda kujaribu.
+
+### Kazi: Unganisha msimbo fulani
+
+Nyaraka za kuchangia husaidia watu kuchangia mradi. Inaelezea aina gani za michango unayotafuta na jinsi mchakato unavyofanya kazi. Wachangiaji watahitaji kupitia hatua kadhaa ili waweze kuchangia kwenye hifadhi yako kwenye GitHub:
+
+1. **Kufork hifadhi yako**. Labda utataka watu _wafork_ mradi wako. Kufork kunamaanisha kuunda nakala ya hifadhi yako kwenye wasifu wao wa GitHub.  
+1. **Clone**. Kutoka hapo wata-clone mradi kwenye mashine yao ya ndani.  
+1. **Unda tawi**. Utataka kuwaomba waunde _tawi_ kwa kazi yao.  
+1. **Lenga mabadiliko yao kwenye eneo moja**. Waombe wachangiaji kulenga michango yao kwenye jambo moja kwa wakati mmoja - kwa njia hiyo nafasi ya kuweza _kuunganisha_ kazi yao ni kubwa zaidi. Fikiria wanaandika marekebisho ya hitilafu, kuongeza kipengele kipya, na kusasisha majaribio kadhaa - je, ikiwa unataka, au unaweza kutekeleza 2 kati ya 3, au 1 kati ya 3 mabadiliko?
+
+✅ Fikiria hali ambapo matawi ni muhimu sana kwa kuandika na kusafirisha msimbo mzuri. Unaweza kufikiria matumizi gani?
+
+> Kumbuka, kuwa mabadiliko unayotaka kuona duniani, na uunde matawi kwa kazi yako mwenyewe pia. Mabadiliko yoyote unayofanya yatafanywa kwenye tawi ambalo umechagua kwa sasa. Tumia `git status` kuona ni tawi gani hilo.
+
+Hebu tupitie mtiririko wa mchango. Fikiria mchangiaji tayari ame-_fork_ na _clone_ hifadhi kwa hivyo wana hifadhi ya Git tayari kwa kazi, kwenye mashine yao ya ndani:
+
+1. **Unda tawi**. Tumia amri `git branch` kuunda tawi ambalo litakuwa na mabadiliko wanayokusudia kuchangia:
+
+   ```bash
+   git branch [branch-name]
+   ```
+
+1. **Badilisha hadi tawi la kazi**. Badilisha hadi tawi maalum na usasishe saraka ya kazi kwa `git switch`:
+
+   ```bash
+   git switch [branch-name]
+   ```
+
+1. **Fanya kazi**. Kwa wakati huu unataka kuongeza mabadiliko yako. Usisahau kumwambia Git kuhusu hilo kwa kutumia amri zifuatazo:
+
+   ```bash
+   git add .
+   git commit -m "my changes"
+   ```
+
+   Hakikisha unatoa jina zuri kwa commit yako, kwa manufaa yako na pia kwa mwangalizi wa hifadhi unayesaidia.
+
+1. **Unganisha kazi yako na tawi la `main`**. Wakati fulani unamaliza kazi na unataka kuunganisha kazi yako na ile ya tawi la `main`. Tawi la `main` linaweza kuwa limebadilika wakati huo kwa hivyo hakikisha kwanza unasasisha hadi la hivi karibuni kwa kutumia amri zifuatazo:
+
+   ```bash
+   git switch main
+   git pull
+   ```
+
+   Kwa wakati huu unataka kuhakikisha kuwa mizozo yoyote, hali ambapo Git haiwezi _kuunganisha_ mabadiliko kwa urahisi, inatokea kwenye tawi lako la kazi. Kwa hivyo endesha amri zifuatazo:
+
+   ```bash
+   git switch [branch_name]
+   git merge main
+   ```
+
+   Hii italeta mabadiliko yote kutoka `main` kwenye tawi lako na kwa matumaini utaweza kuendelea. Ikiwa sivyo, VS Code itakuonyesha mahali ambapo Git _imechanganyikiwa_ na unarekebisha faili zilizoathiriwa ili kusema ni maudhui gani yaliyo sahihi zaidi.
+
+1. **Tuma kazi yako kwenda GitHub**. Kutuma kazi yako kwenda GitHub kunamaanisha mambo mawili. Kusukuma tawi lako kwenye hifadhi yako na kisha kufungua PR, Pull Request.
+
+   ```bash
+   git push --set-upstream origin [branch-name]
+   ```
+
+   Amri hapo juu inaunda tawi kwenye hifadhi yako ya forked.
+
+1. **Fungua PR**. Hatua inayofuata ni kufungua PR. Unaifanya kwa kwenda kwenye hifadhi yako ya forked kwenye GitHub. Utaona kiashiria kwenye GitHub kinachokuuliza ikiwa unataka kuunda PR mpya, bonyeza hiyo na utaelekezwa kwenye kiolesura ambapo unaweza kubadilisha kichwa cha ujumbe wa commit, kutoa maelezo yanayofaa zaidi. Sasa mwangalizi wa hifadhi uliyofork ataona PR hii na _vidole vimevukwa_ wataithamini na _kuunganisha_ PR yako. Sasa wewe ni mchangiaji, hongera :)
+
+1. **Safisha**. Inachukuliwa kuwa ni mazoea mazuri _kusafisha_ baada ya kufanikiwa kuunganisha PR. Unataka kusafisha tawi lako la ndani na tawi ulilosukuma kwenda GitHub. Kwanza, futa tawi hilo kwa ndani kwa kutumia amri ifuatayo:
+
+   ```bash
+   git branch -d [branch-name]
+   ```
+Hakikisha unaenda kwenye ukurasa wa GitHub wa repo uliyo-fork na uondoe tawi la remote ambalo umesukuma kwake.
+
+`Pull request` inaonekana kama neno la ajabu kwa sababu kwa kweli unataka kusukuma mabadiliko yako kwenye mradi. Lakini msimamizi (mmiliki wa mradi) au timu ya msingi inahitaji kuzingatia mabadiliko yako kabla ya kuyachanganya na tawi la "main" la mradi, kwa hivyo kwa kweli unatoa ombi la uamuzi wa mabadiliko kutoka kwa msimamizi.
+
+Pull request ni mahali pa kulinganisha na kujadili tofauti zilizotolewa kwenye tawi kwa kutumia ukaguzi, maoni, majaribio yaliyojumuishwa, na zaidi. Pull request nzuri inafuata takriban sheria sawa na ujumbe wa commit. Unaweza kuongeza rejea kwa tatizo kwenye tracker ya masuala, pale ambapo kazi yako kwa mfano inatatua tatizo. Hii inafanyika kwa kutumia `#` ikifuatiwa na namba ya tatizo lako. Kwa mfano `#97`.
+
+🤞Kidole kimoja juu kwamba ukaguzi wote unapita na mmiliki wa mradi wanachanganya mabadiliko yako kwenye mradi🤞
+
+Sasisha tawi lako la kazi la ndani na commits zote mpya kutoka kwenye tawi la remote linalolingana kwenye GitHub:
+
+`git pull`
+
+## Jinsi ya kuchangia kwenye open source
+
+Kwanza, tafuta repo kwenye GitHub inayokuvutia na ambayo ungependa kuchangia mabadiliko. Utataka kunakili maudhui yake kwenye mashine yako.
+
+✅ Njia nzuri ya kupata repo za 'rafiki kwa wanaoanza' ni [kutafuta kwa tag 'good-first-issue'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/).
+
+![Nakili repo kwa ndani](../../../../translated_images/clone_repo.5085c48d666ead57664f050d806e325d7f883be6838c821e08bc823ab7c66665.sw.png)
+
+Kuna njia kadhaa za kunakili code. Njia moja ni "kufanya clone" ya maudhui ya repo, kwa kutumia HTTPS, SSH, au GitHub CLI (Command Line Interface).
+
+Fungua terminal yako na fanya clone ya repo kama hivi:
+`git clone https://github.com/ProjectURL`
+
+Ili kufanya kazi kwenye mradi, nenda kwenye folda sahihi:
+`cd ProjectURL`
+
+Unaweza pia kufungua mradi mzima kwa kutumia [Codespaces](https://github.com/features/codespaces), mhariri wa code wa GitHub / mazingira ya maendeleo ya wingu, au [GitHub Desktop](https://desktop.github.com/).
+
+Mwisho, unaweza kupakua code kwenye folda iliyobanwa (zipped).
+
+### Mambo machache ya kuvutia kuhusu GitHub
+
+Unaweza ku-star, ku-watch, na/au "fork" repo yoyote ya umma kwenye GitHub. Unaweza kupata repo zako ulizo-star kwenye menyu ya kushuka juu kulia. Ni kama kuweka alama ya kurasa, lakini kwa code.
+
+Miradi ina tracker ya masuala, mara nyingi kwenye GitHub katika tab ya "Issues" isipokuwa imeonyeshwa vinginevyo, ambapo watu wanajadili masuala yanayohusiana na mradi. Na tab ya Pull Requests ni mahali ambapo watu wanajadili na kukagua mabadiliko yanayoendelea.
+
+Miradi inaweza pia kuwa na majadiliano kwenye majukwaa, orodha za barua pepe, au njia za mazungumzo kama Slack, Discord au IRC.
+
+✅ Angalia repo yako mpya ya GitHub na jaribu mambo kadhaa, kama kuhariri mipangilio, kuongeza maelezo kwenye repo yako, na kuunda mradi (kama bodi ya Kanban). Kuna mengi unaweza kufanya!
+
+---
+
+## 🚀 Changamoto
+
+Shirikiana na rafiki kufanya kazi kwenye code ya kila mmoja. Unda mradi kwa pamoja, fanya fork ya code, unda matawi, na changanya mabadiliko.
+
+## Jaribio la Baada ya Somo
+[Jaribio la baada ya somo](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/4)
+
+## Mapitio na Kujisomea
+
+Soma zaidi kuhusu [kuchangia kwenye programu za open source](https://opensource.guide/how-to-contribute/#how-to-submit-a-contribution).
+
+[Git cheatsheet](https://training.github.com/downloads/github-git-cheat-sheet/).
+
+Fanya mazoezi, mazoezi, mazoezi. GitHub ina njia nzuri za kujifunza zinazopatikana kupitia [skills.github.com](https://skills.github.com):
+
+- [Wiki ya Kwanza kwenye GitHub](https://skills.github.com/#first-week-on-github)
+
+Pia utapata kozi za hali ya juu zaidi.
+
+## Kazi
+
+Kamilisha [kozi ya Wiki ya Kwanza kwenye GitHub](https://skills.github.com/#first-week-on-github)
+
+---
+
+**Kanusho**:  
+Hati hii imetafsiriwa kwa kutumia huduma ya tafsiri ya AI [Co-op Translator](https://github.com/Azure/co-op-translator). Ingawa tunajitahidi kuhakikisha usahihi, tafsiri za kiotomatiki zinaweza kuwa na makosa au kutokuwa sahihi. Hati ya asili katika lugha yake ya awali inapaswa kuchukuliwa kama chanzo cha mamlaka. Kwa taarifa muhimu, tafsiri ya kitaalamu ya binadamu inapendekezwa. Hatutawajibika kwa kutoelewana au tafsiri zisizo sahihi zinazotokana na matumizi ya tafsiri hii.
\ No newline at end of file
diff --git a/translations/sw/1-getting-started-lessons/3-accessibility/README.md b/translations/sw/1-getting-started-lessons/3-accessibility/README.md
new file mode 100644
index 00000000..52c7d5a3
--- /dev/null
+++ b/translations/sw/1-getting-started-lessons/3-accessibility/README.md
@@ -0,0 +1,245 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "e4cd5b1faed4adab5acf720f82798003",
+  "translation_date": "2025-08-28T04:31:52+00:00",
+  "source_file": "1-getting-started-lessons/3-accessibility/README.md",
+  "language_code": "sw"
+}
+-->
+# Kuunda Kurasa za Wavuti Zinazofikika
+
+![Yote Kuhusu Ufikiaji](../../../../translated_images/webdev101-a11y.8ef3025c858d897a403a1a42c0897c76e11b724d9a8a0c0578dd4316f7507622.sw.png)
+> Sketchnote na [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Maswali ya Awali ya Somo
+[Maswali ya awali ya somo](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/5)
+
+> Nguvu ya Wavuti iko katika ulimwengu wake wote. Ufikiaji kwa kila mtu bila kujali ulemavu ni kipengele muhimu.
+>
+> \- Sir Timothy Berners-Lee, Mkurugenzi wa W3C na mvumbuzi wa Mtandao wa Ulimwengu Wote
+
+Nukuu hii inaangazia kikamilifu umuhimu wa kuunda tovuti zinazofikika. Programu ambayo haiwezi kufikiwa na kila mtu kwa asili yake ni ya ubaguzi. Kama watengenezaji wa wavuti, tunapaswa kila mara kuwa na ufikiaji akilini. Kwa kuzingatia hili tangu mwanzo, utakuwa kwenye njia sahihi ya kuhakikisha kila mtu anaweza kufikia kurasa unazounda. Katika somo hili, utajifunza kuhusu zana zinazoweza kukusaidia kuhakikisha mali zako za wavuti zinaweza kufikiwa na jinsi ya kujenga kwa kuzingatia ufikiaji.
+
+> Unaweza kuchukua somo hili kwenye [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/accessibility/?WT.mc_id=academic-77807-sagibbon)!
+
+## Zana za Kutumia
+
+### Wasomaji wa Skrini
+
+Moja ya zana zinazojulikana zaidi za ufikiaji ni wasomaji wa skrini.
+
+[Wasomaji wa skrini](https://en.wikipedia.org/wiki/Screen_reader) ni wateja wanaotumiwa sana na watu wenye ulemavu wa kuona. Tunapojitahidi kuhakikisha kivinjari kinaonyesha taarifa tunazotaka kushiriki, tunapaswa pia kuhakikisha msomaji wa skrini anafanya hivyo.
+
+Kwa kiwango cha msingi, msomaji wa skrini atasoma ukurasa kutoka juu hadi chini kwa sauti. Ikiwa ukurasa wako ni maandishi tu, msomaji atawasilisha taarifa kwa njia sawa na kivinjari. Bila shaka, kurasa za wavuti mara chache huwa maandishi tu; zitakuwa na viungo, picha, rangi, na vipengele vingine vya kuona. Ni muhimu kuhakikisha kwamba taarifa hii inasomwa kwa usahihi na msomaji wa skrini.
+
+Kila mtengenezaji wa wavuti anapaswa kufahamiana na msomaji wa skrini. Kama ilivyoonyeshwa hapo juu, ni mteja ambaye watumiaji wako watatumia. Kama vile unavyojua jinsi kivinjari kinavyofanya kazi, unapaswa kujifunza jinsi msomaji wa skrini anavyofanya kazi. Kwa bahati nzuri, wasomaji wa skrini wamejengwa ndani ya mifumo mingi ya uendeshaji.
+
+Vivinjari vingine pia vina zana zilizojengwa ndani na viendelezi vinavyoweza kusoma maandishi kwa sauti au hata kutoa vipengele vya msingi vya urambazaji, kama [hizi zana za kivinjari cha Edge zinazolenga ufikiaji](https://support.microsoft.com/help/4000734/microsoft-edge-accessibility-features). Hizi pia ni zana muhimu za ufikiaji, lakini hufanya kazi tofauti sana na wasomaji wa skrini na hazipaswi kuchanganywa na zana za kupima wasomaji wa skrini.
+
+✅ Jaribu msomaji wa skrini na msomaji wa maandishi wa kivinjari. Kwenye Windows, [Narrator](https://support.microsoft.com/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c172f109bdb1/?WT.mc_id=academic-77807-sagibbon) imejumuishwa kwa chaguo-msingi, na [JAWS](https://webaim.org/articles/jaws/) na [NVDA](https://www.nvaccess.org/about-nvda/) zinaweza pia kusakinishwa. Kwenye macOS na iOS, [VoiceOver](https://support.apple.com/guide/voiceover/welcome/10) imejumuishwa kwa chaguo-msingi.
+
+### Kuza
+
+Zana nyingine inayotumiwa sana na watu wenye ulemavu wa kuona ni kuza. Aina ya msingi zaidi ya kuza ni kuza tuli, inayodhibitiwa kupitia `Control + alama ya kuongeza (+)` au kwa kupunguza azimio la skrini. Aina hii ya kuza husababisha ukurasa mzima kubadilika ukubwa, kwa hivyo kutumia [muundo unaojibika](https://developer.mozilla.org/docs/Learn/CSS/CSS_layout/Responsive_Design) ni muhimu ili kutoa uzoefu mzuri wa mtumiaji katika viwango vya juu vya kuza.
+
+Aina nyingine ya kuza hutegemea programu maalum ya kukuza eneo moja la skrini na kusogeza, kama kutumia kioo cha kukuza halisi. Kwenye Windows, [Magnifier](https://support.microsoft.com/windows/use-magnifier-to-make-things-on-the-screen-easier-to-see-414948ba-8b1c-d3bd-8615-0e5e32204198) imejengwa ndani, na [ZoomText](https://www.freedomscientific.com/training/zoomtext/getting-started/) ni programu ya kukuza ya wahusika wa tatu yenye vipengele zaidi na msingi mkubwa wa watumiaji. MacOS na iOS zote zina programu ya kukuza iliyojengwa ndani inayoitwa [Zoom](https://www.apple.com/accessibility/mac/vision/).
+
+### Kagua Mlinganisho wa Rangi
+
+Rangi kwenye tovuti zinahitaji kuchaguliwa kwa uangalifu ili kujibu mahitaji ya watumiaji wenye upofu wa rangi au watu wanaopata ugumu wa kuona rangi zenye utofauti mdogo.
+
+✅ Jaribu tovuti unayoipenda kwa matumizi ya rangi kwa kutumia kiendelezi cha kivinjari kama [kagua mlinganisho wa rangi wa WCAG](https://microsoftedge.microsoft.com/addons/detail/wcag-color-contrast-check/idahaggnlnekelhgplklhfpchbfdmkjp?hl=en-US&WT.mc_id=academic-77807-sagibbon). Unajifunza nini?
+
+### Lighthouse
+
+Katika eneo la zana za msanidi wa kivinjari chako, utapata zana ya Lighthouse. Zana hii ni muhimu kupata mtazamo wa kwanza wa ufikiaji (pamoja na uchambuzi mwingine) wa tovuti. Ingawa ni muhimu kutotegemea Lighthouse pekee, alama ya 100% ni muhimu kama msingi.
+
+✅ Tafuta Lighthouse kwenye jopo la zana za msanidi wa kivinjari chako na fanya uchambuzi kwenye tovuti yoyote. Unagundua nini?
+
+## Kubuni kwa Ufikiaji
+
+Ufikiaji ni mada kubwa kiasi. Ili kukusaidia, kuna rasilimali nyingi zinazopatikana.
+
+- [Accessible U - Chuo Kikuu cha Minnesota](https://accessibility.umn.edu/your-role/web-developers)
+
+Ingawa hatutaweza kufunika kila kipengele cha kuunda tovuti zinazofikika, hapa chini kuna kanuni za msingi unazotaka kutekeleza. Kubuni ukurasa unaofikika tangu mwanzo ni **rahisi zaidi** kuliko kurudi kwenye ukurasa uliopo ili kuufanya ufikike.
+
+## Kanuni Nzuri za Onyesho
+
+### Paleti za Rangi Salama
+
+Watu huona ulimwengu kwa njia tofauti, na hii inajumuisha rangi. Unapochagua mpango wa rangi kwa tovuti yako, unapaswa kuhakikisha inafikika kwa wote. Zana moja nzuri ya [kuzalisha paleti za rangi ni Color Safe](http://colorsafe.co/).
+
+✅ Tambua tovuti ambayo ina matatizo makubwa katika matumizi yake ya rangi. Kwa nini?
+
+### Tumia HTML Sahihi
+
+Kwa kutumia CSS na JavaScript, inawezekana kufanya kipengele chochote kionekane kama aina yoyote ya udhibiti. `<span>` inaweza kutumika kuunda `<button>`, na `<b>` inaweza kuwa kiungo. Ingawa hii inaweza kuonekana rahisi kuunda, haifanyi chochote kwa msomaji wa skrini. Tumia HTML sahihi unapounda vidhibiti kwenye ukurasa. Ikiwa unataka kiungo, tumia `<a>`. Kutumia HTML sahihi kwa udhibiti sahihi kunaitwa kutumia Semantic HTML.
+
+✅ Nenda kwenye tovuti yoyote na uone kama wabunifu na watengenezaji wanatumia HTML ipasavyo. Je, unaweza kupata kitufe ambacho kinapaswa kuwa kiungo? Kidokezo: bonyeza kulia na uchague 'View Page Source' kwenye kivinjari chako ili kuangalia msimbo wa msingi.
+
+### Unda Hierakia ya Vichwa Inayoelezea
+
+Watumiaji wa wasomaji wa skrini [wanategemea sana vichwa](https://webaim.org/projects/screenreadersurvey8/#finding) kupata taarifa na kuvinjari kupitia ukurasa. Kuandika maudhui ya kichwa yanayoelezea na kutumia lebo za kichwa za semantic ni muhimu kwa kuunda tovuti inayoweza kuvinjari kwa urahisi kwa watumiaji wa wasomaji wa skrini.
+
+### Tumia Vidokezo Vizuri vya Kuonekana
+
+CSS inatoa udhibiti kamili juu ya mwonekano wa kipengele chochote kwenye ukurasa. Unaweza kuunda visanduku vya maandishi bila mduara au viungo bila mstari wa chini. Kwa bahati mbaya, kuondoa vidokezo hivyo kunaweza kufanya iwe changamoto zaidi kwa mtu anayevitegemea kutambua aina ya udhibiti.
+
+## Umuhimu wa Maandishi ya Viungo
+
+Viungo ni msingi wa kuvinjari wavuti. Kwa hivyo, kuhakikisha msomaji wa skrini anaweza kusoma viungo ipasavyo huruhusu watumiaji wote kuvinjari tovuti yako.
+
+### Wasomaji wa Skrini na Viungo
+
+Kama unavyotarajia, wasomaji wa skrini husoma maandishi ya viungo kwa njia sawa na wanavyosoma maandishi mengine kwenye ukurasa. Kwa kuzingatia hili, maandishi yaliyoonyeshwa hapa chini yanaweza kuonekana yanakubalika.
+
+> Penguin mdogo, wakati mwingine hujulikana kama penguin wa hadithi, ndiye penguin mdogo zaidi duniani. [Bonyeza hapa](https://en.wikipedia.org/wiki/Little_penguin) kwa maelezo zaidi.
+
+> Penguin mdogo, wakati mwingine hujulikana kama penguin wa hadithi, ndiye penguin mdogo zaidi duniani. Tembelea https://en.wikipedia.org/wiki/Little_penguin kwa maelezo zaidi.
+
+> **NOTE** Kama unavyosoma, unapaswa **kamwe** kuunda viungo vinavyoonekana kama hapo juu.
+
+Kumbuka, wasomaji wa skrini ni kiolesura tofauti na vivinjari vyenye seti tofauti za vipengele.
+
+### Tatizo la Kutumia URL
+
+Wasomaji wa skrini husoma maandishi. Ikiwa URL inaonekana kwenye maandishi, msomaji wa skrini atasoma URL. Kwa ujumla, URL haiwasilishi taarifa yenye maana, na inaweza kusikika inakera. Huenda umepata uzoefu huu ikiwa simu yako imewahi kusoma ujumbe wa maandishi wenye URL kwa sauti.
+
+### Tatizo la "bonyeza hapa"
+
+Wasomaji wa skrini pia wana uwezo wa kusoma viungo pekee kwenye ukurasa, sawa na jinsi mtu mwenye kuona anavyotafuta viungo kwenye ukurasa. Ikiwa maandishi ya kiungo kila mara ni "bonyeza hapa", mtumiaji atasikia tu "bonyeza hapa, bonyeza hapa, bonyeza hapa, bonyeza hapa, bonyeza hapa, ..." Viungo vyote sasa havitofautiani.
+
+### Maandishi Mazuri ya Kiungo
+
+Maandishi mazuri ya kiungo yanaelezea kwa ufupi kilicho upande wa pili wa kiungo. Katika mfano hapo juu unaozungumzia penguin mdogo, kiungo ni kwa ukurasa wa Wikipedia kuhusu spishi hiyo. Kifungu *penguin mdogo* kingefanya maandishi bora ya kiungo kwani kinaweka wazi kile mtu atajifunza ikiwa atabonyeza kiungo - penguin mdogo.
+
+> [Penguin mdogo](https://en.wikipedia.org/wiki/Little_penguin), wakati mwingine hujulikana kama penguin wa hadithi, ndiye penguin mdogo zaidi duniani.
+
+✅ Vinjari wavuti kwa dakika chache ili kupata kurasa zinazotumia mikakati isiyoeleweka ya kuunganisha. Linganisha na tovuti zingine zilizounganishwa vizuri. Unajifunza nini?
+
+#### Vidokezo vya Injini za Utafutaji
+
+Kama bonasi ya ziada kwa kuhakikisha tovuti yako inafikika kwa wote, utasaidia injini za utafutaji kuvinjari tovuti yako pia. Injini za utafutaji hutumia maandishi ya viungo kujifunza mada za kurasa. Kwa hivyo kutumia maandishi mazuri ya viungo husaidia kila mtu!
+
+### ARIA
+
+Fikiria ukurasa ufuatao:
+
+| Bidhaa        | Maelezo           | Agiza         |
+| ------------- | ----------------- | ------------- |
+| Widget        | [Maelezo](../../../../1-getting-started-lessons/3-accessibility/')    | [Agiza](../../../../1-getting-started-lessons/3-accessibility/')  |
+| Super widget  | [Maelezo](../../../../1-getting-started-lessons/3-accessibility/')    | [Agiza](../../../../1-getting-started-lessons/3-accessibility/')  |
+
+Katika mfano huu, kurudia maandishi ya maelezo na agiza kuna mantiki kwa mtu anayetumia kivinjari. Hata hivyo, mtu anayetumia msomaji wa skrini atasikia tu maneno *maelezo* na *agiza* yakirudiwa bila muktadha.
+
+Ili kusaidia hali kama hizi, HTML inasaidia seti ya sifa zinazojulikana kama [Programu Tajiri za Mtandao Zinazofikika (ARIA)](https://developer.mozilla.org/docs/Web/Accessibility/ARIA). Sifa hizi hukuruhusu kutoa taarifa za ziada kwa wasomaji wa skrini.
+
+> **NOTE**: Kama vipengele vingi vya HTML, usaidizi wa kivinjari na msomaji wa skrini unaweza kutofautiana. Hata hivyo, wateja wengi wa kawaida wanasaidia sifa za ARIA.
+
+Unaweza kutumia `aria-label` kuelezea kiungo wakati muundo wa ukurasa haukuruhusu. Maelezo ya widget yanaweza kuwekwa kama
+
+``` html
+<a href="#" aria-label="Widget description">description</a>
+```
+
+✅ Kwa ujumla, kutumia alama za Semantic kama ilivyoelezwa hapo juu kunapita matumizi ya ARIA, lakini wakati mwingine hakuna sawa wa semantic kwa vidhibiti mbalimbali vya HTML. Mfano mzuri ni Mti. Hakuna sawa wa HTML kwa mti, kwa hivyo unatambulisha `<div>` ya jumla kwa kipengele hiki na jukumu sahihi na maadili ya aria. [Nyaraka za MDN kuhusu ARIA](https://developer.mozilla.org/docs/Web/Accessibility/ARIA) zina taarifa zaidi muhimu.
+
+```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>
+```
+
+## Picha
+
+Ni wazi kwamba wasomaji wa skrini hawawezi kusoma kiotomatiki kilicho kwenye picha. Kuhakikisha picha zinaweza kufikiwa hakuhitaji kazi nyingi - ndicho `alt` kinachohusu. Picha zote zenye maana zinapaswa kuwa na `alt` kuelezea ni nini.
+
+Picha ambazo ni za mapambo tu zinapaswa kuwa na sifa ya `alt` iliyowekwa kwa kamba tupu: `alt=""`. Hii huzuia wasomaji wa skrini kutangaza picha ya mapambo bila sababu.
+
+✅ Kama unavyotarajia, injini za utafutaji pia haziwezi kuelewa kilicho kwenye picha. Zinatumia pia maandishi ya alt. Kwa hivyo mara nyingine tena, kuhakikisha ukurasa wako unafikika hutoa bonasi za ziada!
+
+## Kibodi
+
+Baadhi ya watumiaji hawawezi kutumia panya au pedi ya kugusa, badala yake wanategemea mwingiliano wa kibodi ili kuhamia kutoka kipengele kimoja hadi kingine. Ni muhimu kwa tovuti yako kuwasilisha maudhui yako kwa mpangilio wa kimantiki ili mtumiaji wa kibodi aweze kufikia kila kipengele kinachoweza kuingiliana wanaposhuka kwenye hati. Ikiwa unajenga kurasa zako za wavuti kwa alama za semantic na kutumia CSS kuunda mpangilio wao wa kuona, tovuti yako inapaswa kuwa na uwezo wa kuvinjari kwa kibodi, lakini ni muhimu kupima kipengele hiki kwa mikono. Jifunze zaidi kuhusu [mikakati ya urambazaji wa kibodi](https://webaim.org/techniques/keyboard/).
+
+✅ Nenda kwenye tovuti yoyote na jaribu kuvinjari kupitia hiyo kwa kutumia kibodi pekee. Nini kinafanya kazi, nini hakifanyi kazi? Kwa nini?
+
+## Muhtasari
+
+Wavuti inayofikika kwa baadhi si kweli 'wavuti ya ulimwengu wote'. Njia bora ya kuhakikisha tovuti unazounda zinaweza kufikiwa ni kujumuisha mbinu bora za ufikiaji tangu mwanzo. Ingawa kuna hatua za ziada zinazohusika, kujumuisha ujuzi huu katika mtiririko wako wa kazi sasa kutamaanisha kurasa zote unazounda zitafikika.
+
+---
+
+## 🚀 Changamoto
+
+Chukua HTML hii na uandike upya ili iweze kufikiwa zaidi, kwa kuzingatia mikakati uliyojifunza.
+
+```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>
+```
+
+## Maswali ya Baada ya Somo
+[Maswali ya baada ya somo](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/6)
+
+## Mapitio na Kujisomea
+Serikali nyingi zina sheria kuhusu mahitaji ya upatikanaji. Soma kuhusu sheria za upatikanaji za nchi yako. Ni nini kinachojumuishwa, na nini hakijajumuishwa? Mfano ni [tovuti hii ya serikali](https://accessibility.blog.gov.uk/).
+
+## Kazi
+ 
+[Chambua tovuti isiyo na upatikanaji](assignment.md)
+
+Marejeleo: [Turtle Ipsum](https://github.com/Instrument/semantic-html-sample) na Instrument
+
+---
+
+**Kanusho**:  
+Hati hii imetafsiriwa kwa kutumia huduma ya kutafsiri ya AI [Co-op Translator](https://github.com/Azure/co-op-translator). Ingawa tunajitahidi kuhakikisha usahihi, tafadhali fahamu kuwa tafsiri za kiotomatiki zinaweza kuwa na makosa au kutokuwa sahihi. Hati ya asili katika lugha yake ya awali inapaswa kuzingatiwa kama chanzo cha mamlaka. Kwa taarifa muhimu, tafsiri ya kitaalamu ya binadamu inapendekezwa. Hatutawajibika kwa kutoelewana au tafsiri zisizo sahihi zinazotokana na matumizi ya tafsiri hii.
\ No newline at end of file
diff --git a/translations/sw/1-getting-started-lessons/3-accessibility/assignment.md b/translations/sw/1-getting-started-lessons/3-accessibility/assignment.md
new file mode 100644
index 00000000..a384bffd
--- /dev/null
+++ b/translations/sw/1-getting-started-lessons/3-accessibility/assignment.md
@@ -0,0 +1,29 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "a258597a194e77d4fd469b3cd976b29e",
+  "translation_date": "2025-08-28T04:36:30+00:00",
+  "source_file": "1-getting-started-lessons/3-accessibility/assignment.md",
+  "language_code": "sw"
+}
+-->
+# Changanua Tovuti Isiyofikika
+
+## Maelekezo
+
+Tambua tovuti ambayo unaamini HAIFIKIKI na tengeneza mpango wa hatua za kuboresha ufikikaji wake. 
+Kazi yako ya kwanza itakuwa kutambua tovuti hii, kueleza kwa kina njia ambazo unadhani haifikiki bila kutumia zana za uchambuzi, kisha uifanyie uchambuzi wa Lighthouse. Chukua pdf ya matokeo ya uchambuzi huu na uandike mpango wa kina wenye angalau vidokezo kumi vinavyoonyesha jinsi tovuti inaweza kuboreshwa.
+
+## Jedwali la Kupima Ufikikaji wa Tovuti
+
+| Kigezo  | Bora Kabisa | Kutosha | Inahitaji Kuboreshwa |
+|---------|-------------|---------|----------------------|
+|         | inakosa <10% ya kinachohitajika | inakosa 20% ya kinachohitajika | inakosa 50% ya kinachohitajika |
+
+----
+Ripoti ya Mwanafunzi: inajumuisha aya kuhusu jinsi tovuti isivyofikika, ripoti ya Lighthouse iliyochukuliwa katika pdf, orodha ya vidokezo kumi vya kuboresha, pamoja na maelezo ya jinsi ya kuboresha.
+
+---
+
+**Kanusho**:  
+Hati hii imetafsiriwa kwa kutumia huduma ya tafsiri ya AI [Co-op Translator](https://github.com/Azure/co-op-translator). Ingawa tunajitahidi kwa usahihi, tafadhali fahamu kuwa tafsiri za kiotomatiki zinaweza kuwa na makosa au kutokuwa sahihi. Hati ya asili katika lugha yake ya awali inapaswa kuzingatiwa kama chanzo cha mamlaka. Kwa taarifa muhimu, inashauriwa kutumia huduma ya tafsiri ya kitaalamu ya binadamu. Hatutawajibika kwa maelewano mabaya au tafsiri zisizo sahihi zinazotokana na matumizi ya tafsiri hii.
\ No newline at end of file
diff --git a/translations/sw/1-getting-started-lessons/README.md b/translations/sw/1-getting-started-lessons/README.md
new file mode 100644
index 00000000..65236872
--- /dev/null
+++ b/translations/sw/1-getting-started-lessons/README.md
@@ -0,0 +1,31 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "04683f4cfa46004179b0404b89a3065c",
+  "translation_date": "2025-08-28T04:28:56+00:00",
+  "source_file": "1-getting-started-lessons/README.md",
+  "language_code": "sw"
+}
+-->
+# Kuanza na Maendeleo ya Wavuti
+
+Katika sehemu hii ya mtaala, utatambulishwa kwa dhana zisizo za miradi ambazo ni muhimu ili kuwa msanidi programu mtaalamu.
+
+### Mada
+
+1. [Utangulizi wa Lugha za Uprogramu na Zana za Kazi](1-intro-to-programming-languages/README.md)
+2. [Utangulizi wa GitHub](2-github-basics/README.md)
+3. [Misingi ya Ufikiaji](3-accessibility/README.md)
+
+### Shukrani
+
+Utangulizi wa Lugha za Uprogramu na Zana za Kazi uliandikwa kwa ♥️ na [Jasmine Greenaway](https://twitter.com/paladique)
+
+Utangulizi wa GitHub uliandikwa kwa ♥️ na [Floor Drees](https://twitter.com/floordrees)
+
+Misingi ya Ufikiaji iliandikwa kwa ♥️ na [Christopher Harrison](https://twitter.com/geektrainer)
+
+---
+
+**Kanusho**:  
+Hati hii imetafsiriwa kwa kutumia huduma ya kutafsiri ya AI [Co-op Translator](https://github.com/Azure/co-op-translator). Ingawa tunajitahidi kuhakikisha usahihi, tafadhali fahamu kuwa tafsiri za kiotomatiki zinaweza kuwa na makosa au kutokuwa sahihi. Hati ya asili katika lugha yake ya awali inapaswa kuzingatiwa kama chanzo cha mamlaka. Kwa taarifa muhimu, tafsiri ya kitaalamu ya binadamu inapendekezwa. Hatutawajibika kwa kutoelewana au tafsiri zisizo sahihi zinazotokana na matumizi ya tafsiri hii.
\ No newline at end of file
diff --git a/translations/sw/2-js-basics/1-data-types/README.md b/translations/sw/2-js-basics/1-data-types/README.md
new file mode 100644
index 00000000..8d51a0ee
--- /dev/null
+++ b/translations/sw/2-js-basics/1-data-types/README.md
@@ -0,0 +1,215 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "fc6aef8ecfdd5b0ad2afa6e6ba52bfde",
+  "translation_date": "2025-08-28T04:07:42+00:00",
+  "source_file": "2-js-basics/1-data-types/README.md",
+  "language_code": "sw"
+}
+-->
+# Misingi ya JavaScript: Aina za Data
+
+![Misingi ya JavaScript - Aina za Data](../../../../translated_images/webdev101-js-datatypes.4cc470179730702c756480d3ffa46507f746e5975ebf80f99fdaaf1cff09a7f4.sw.png)  
+> Sketchnote na [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Jaribio la Kabla ya Somo  
+[Jaribio la kabla ya somo](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/7)
+
+Somo hili linashughulikia misingi ya JavaScript, lugha inayowezesha mwingiliano kwenye wavuti.
+
+> Unaweza kuchukua somo hili kwenye [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-variables/?WT.mc_id=academic-77807-sagibbon)!
+
+[![Variables](https://img.youtube.com/vi/JNIXfGiDWM8/0.jpg)](https://youtube.com/watch?v=JNIXfGiDWM8 "Variables in JavaScript")
+
+[![Data Types in JavaScript](https://img.youtube.com/vi/AWfA95eLdq8/0.jpg)](https://youtube.com/watch?v=AWfA95eLdq8 "Data Types in JavaScript")
+
+> 🎥 Bonyeza picha zilizo juu kwa video kuhusu variables na aina za data.
+
+Tuanze na variables na aina za data zinazojaza variables hizo!
+
+## Variables
+
+Variables huhifadhi thamani ambazo zinaweza kutumika na kubadilishwa ndani ya msimbo wako.
+
+Kuunda na **kutangaza** variable kuna sintaksia ifuatayo **[keyword] [name]**. Inajumuisha sehemu mbili:
+
+- **Keyword**. Keywords zinaweza kuwa `let` au `var`.  
+
+✅ Neno kuu `let` lilianzishwa katika ES6 na linatoa kile kinachoitwa _block scope_ kwa variable yako. Inapendekezwa utumie `let` badala ya `var`. Tutashughulikia block scopes kwa undani zaidi katika sehemu zijazo.  
+- **Jina la variable**, hili ni jina unalochagua mwenyewe.
+
+### Kazi - Kufanya kazi na variables
+
+1. **Tangaza variable**. Tuseme tunatangaza variable kwa kutumia neno kuu `let`:
+
+    ```javascript
+    let myVariable;
+    ```
+
+   `myVariable` sasa imetangazwa kwa kutumia neno kuu `let`. Kwa sasa haina thamani yoyote.
+
+1. **Weka thamani**. Hifadhi thamani kwenye variable kwa kutumia operator `=` ikifuatiwa na thamani inayotarajiwa.
+
+    ```javascript
+    myVariable = 123;
+    ```
+
+   > Kumbuka: matumizi ya `=` katika somo hili yanamaanisha tunatumia "assignment operator", inayotumika kuweka thamani kwenye variable. Haimaanishi usawa.
+
+   `myVariable` sasa imepewa thamani ya 123.
+
+1. **Badilisha msimbo**. Badilisha msimbo wako na taarifa ifuatayo.
+
+    ```javascript
+    let myVariable = 123;
+    ```
+
+    Hii inaitwa _explicit initialization_ ambapo variable inatangazwa na kupewa thamani kwa wakati mmoja.
+
+1. **Badilisha thamani ya variable**. Badilisha thamani ya variable kwa njia ifuatayo:
+
+   ```javascript
+   myVariable = 321;
+   ```
+
+   Mara baada ya kutangaza variable, unaweza kubadilisha thamani yake wakati wowote kwenye msimbo wako kwa kutumia operator `=` na thamani mpya.
+
+   ✅ Jaribu! Unaweza kuandika JavaScript moja kwa moja kwenye kivinjari chako. Fungua dirisha la kivinjari na uende kwenye Developer Tools. Katika console, utapata prompt; andika `let myVariable = 123`, bonyeza return, kisha andika `myVariable`. Nini kinatokea? Kumbuka, utajifunza zaidi kuhusu dhana hizi katika masomo yanayofuata.
+
+## Constants
+
+Kutangaza na kuanzisha constant kunafuata dhana sawa na variable, isipokuwa kwa neno kuu `const`. Constants mara nyingi hutangazwa kwa herufi kubwa zote.
+
+```javascript
+const MY_VARIABLE = 123;
+```
+
+Constants zinafanana na variables, isipokuwa kwa tofauti mbili:
+
+- **Lazima ziwe na thamani**. Constants lazima ziwe zimeanzishwa, vinginevyo kosa litatokea wakati wa kuendesha msimbo.  
+- **Marejeleo hayawezi kubadilishwa**. Marejeleo ya constant hayawezi kubadilishwa mara baada ya kuanzishwa, vinginevyo kosa litatokea wakati wa kuendesha msimbo. Hebu tuangalie mifano miwili:  
+   - **Thamani rahisi**. Ifuatayo HAIRUHUSIWI:
+   
+      ```javascript
+      const PI = 3;
+      PI = 4; // not allowed
+      ```
+ 
+   - **Marejeleo ya kitu yanalindwa**. Ifuatayo HAIRUHUSIWI:
+   
+      ```javascript
+      const obj = { a: 3 };
+      obj = { b: 5 } // not allowed
+      ```
+
+    - **Thamani ya kitu haijalindwa**. Ifuatayo INARUHUSIWA:
+    
+      ```javascript
+      const obj = { a: 3 };
+      obj.a = 5;  // allowed
+      ```
+
+      Hapo juu unabadilisha thamani ya kitu lakini si marejeleo yenyewe, ambayo inaruhusiwa.
+
+   > Kumbuka, `const` inamaanisha marejeleo yanalindwa dhidi ya kupewa upya. Hata hivyo, thamani si _immutable_ na inaweza kubadilika, hasa ikiwa ni muundo changamano kama kitu.
+
+## Aina za Data
+
+Variables zinaweza kuhifadhi aina mbalimbali za thamani, kama namba na maandishi. Aina hizi mbalimbali za thamani zinajulikana kama **aina za data**. Aina za data ni sehemu muhimu ya maendeleo ya programu kwa sababu zinawasaidia watengenezaji kufanya maamuzi kuhusu jinsi msimbo unavyopaswa kuandikwa na jinsi programu inavyopaswa kufanya kazi. Zaidi ya hayo, baadhi ya aina za data zina sifa za kipekee zinazosaidia kubadilisha au kutoa taarifa za ziada kwenye thamani.
+
+✅ Aina za Data pia hujulikana kama primitives za data za JavaScript, kwani ni aina za data za kiwango cha chini kabisa zinazotolewa na lugha. Kuna primitives 7 za msingi: string, number, bigint, boolean, undefined, null, na symbol. Chukua dakika moja kufikiria kila moja ya primitives hizi inawakilisha nini. `zebra` ni nini? Vipi kuhusu `0`? `true`?
+
+### Namba
+
+Katika sehemu iliyopita, thamani ya `myVariable` ilikuwa aina ya data ya namba.
+
+`let myVariable = 123;`
+
+Variables zinaweza kuhifadhi aina zote za namba, ikiwa ni pamoja na desimali au namba hasi. Namba pia zinaweza kutumika na arithmetic operators, ambazo zitashughulikiwa katika [sehemu inayofuata](../../../../2-js-basics/1-data-types).
+
+### Arithmetic Operators
+
+Kuna aina kadhaa za operators za kutumia unapofanya kazi za hesabu, na baadhi zimeorodheshwa hapa:
+
+| Alama  | Maelezo                                                                 | Mfano                           |
+| ------ | ----------------------------------------------------------------------- | -------------------------------- |
+| `+`    | **Kuongeza**: Inahesabu jumla ya namba mbili                            | `1 + 2 //jibu linalotarajiwa ni 3`   |
+| `-`    | **Kutoa**: Inahesabu tofauti ya namba mbili                             | `1 - 2 //jibu linalotarajiwa ni -1`  |
+| `*`    | **Kuzidisha**: Inahesabu bidhaa ya namba mbili                          | `1 * 2 //jibu linalotarajiwa ni 2`   |
+| `/`    | **Kugawanya**: Inahesabu mgawo wa namba mbili                           | `1 / 2 //jibu linalotarajiwa ni 0.5` |
+| `%`    | **Remainder**: Inahesabu mabaki kutoka kwa mgawanyo wa namba mbili      | `1 % 2 //jibu linalotarajiwa ni 1`   |
+
+✅ Jaribu! Jaribu operesheni ya hesabu kwenye console ya kivinjari chako. Je, matokeo yanakushangaza?
+
+### Strings
+
+Strings ni seti za herufi zinazokaa kati ya alama za nukuu moja au mbili.
+
+- `'Hii ni string'`  
+- `"Hii pia ni string"`  
+- `let myString = 'Hii ni thamani ya string iliyohifadhiwa kwenye variable';`
+
+Kumbuka kutumia nukuu unapokuwa unaandika string, vinginevyo JavaScript itadhani ni jina la variable.
+
+### Kuweka Muundo wa Strings
+
+Strings ni maandishi, na mara kwa mara zitahitaji kuwekwa muundo.
+
+Ili **kuunganisha** strings mbili au zaidi, au kuziunganisha pamoja, tumia operator `+`.
+
+```javascript
+let myString1 = "Hello";
+let myString2 = "World";
+
+myString1 + myString2 + "!"; //HelloWorld!
+myString1 + " " + myString2 + "!"; //Hello World!
+myString1 + ", " + myString2 + "!"; //Hello, World!
+
+```
+
+✅ Kwa nini `1 + 1 = 2` katika JavaScript, lakini `'1' + '1' = 11?` Fikiria kuhusu hilo. Vipi kuhusu `'1' + 1`?
+
+**Template literals** ni njia nyingine ya kuweka muundo wa strings, isipokuwa badala ya nukuu, backtick hutumika. Kitu chochote ambacho si maandishi ya kawaida lazima kiwekwe ndani ya placeholders `${ }`. Hii inajumuisha variables zozote ambazo zinaweza kuwa strings.
+
+```javascript
+let myString1 = "Hello";
+let myString2 = "World";
+
+`${myString1} ${myString2}!` //Hello World!
+`${myString1}, ${myString2}!` //Hello, World!
+```
+
+Unaweza kufanikisha malengo yako ya kuweka muundo kwa njia yoyote, lakini template literals zitaheshimu nafasi na mistari mipya.
+
+✅ Ni lini utatumia template literal badala ya string ya kawaida?
+
+### Booleans
+
+Booleans zinaweza kuwa na thamani mbili tu: `true` au `false`. Booleans zinaweza kusaidia kufanya maamuzi kuhusu mistari gani ya msimbo inapaswa kuendeshwa wakati masharti fulani yanapokamilika. Katika hali nyingi, [operators](../../../../2-js-basics/1-data-types) husaidia kuweka thamani ya Boolean na mara nyingi utaona na kuandika variables zikianzishwa au thamani zao zikisasishwa kwa operator.
+
+- `let myTrueBool = true`  
+- `let myFalseBool = false`
+
+✅ Variable inaweza kuchukuliwa kuwa 'truthy' ikiwa inatathminiwa kuwa boolean `true`. Cha kufurahisha, katika JavaScript, [thamani zote ni truthy isipokuwa zifafanuliwe kama falsy](https://developer.mozilla.org/docs/Glossary/Truthy).
+
+---
+
+## 🚀 Changamoto
+
+JavaScript inajulikana kwa njia zake za kushangaza za kushughulikia aina za data mara kwa mara. Fanya utafiti kidogo kuhusu 'mambo ya kushangaza' haya. Kwa mfano: usikivu wa herufi kubwa na ndogo unaweza kukusumbua! Jaribu hili kwenye console yako: `let age = 1; let Age = 2; age == Age` (linatoa `false` -- kwa nini?). Ni mambo gani mengine ya kushangaza unaweza kupata?
+
+## Jaribio la Baada ya Somo  
+[Jaribio la baada ya somo](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/8)
+
+## Mapitio na Kujisomea
+
+Angalia [orodha hii ya mazoezi ya JavaScript](https://css-tricks.com/snippets/javascript/) na jaribu moja. Umejifunza nini?
+
+## Kazi
+
+[Mazoezi ya Aina za Data](assignment.md)
+
+---
+
+**Kanusho**:  
+Hati hii imetafsiriwa kwa kutumia huduma ya tafsiri ya AI [Co-op Translator](https://github.com/Azure/co-op-translator). Ingawa tunajitahidi kuhakikisha usahihi, tafsiri za kiotomatiki zinaweza kuwa na makosa au kutokuwa sahihi. Hati ya asili katika lugha yake ya awali inapaswa kuchukuliwa kama chanzo cha mamlaka. Kwa taarifa muhimu, tafsiri ya kitaalamu ya binadamu inapendekezwa. Hatutawajibika kwa kutoelewana au tafsiri zisizo sahihi zinazotokana na matumizi ya tafsiri hii.
\ No newline at end of file
diff --git a/translations/sw/2-js-basics/1-data-types/assignment.md b/translations/sw/2-js-basics/1-data-types/assignment.md
new file mode 100644
index 00000000..c09f97e3
--- /dev/null
+++ b/translations/sw/2-js-basics/1-data-types/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "3869244ceda606c4969d8cdd82679867",
+  "translation_date": "2025-08-28T04:09:25+00:00",
+  "source_file": "2-js-basics/1-data-types/assignment.md",
+  "language_code": "sw"
+}
+-->
+# Mazoezi ya Aina za Data
+
+## Maelekezo
+
+Fikiria unaunda toroli ya ununuzi. Andika nyaraka kuhusu aina za data ambazo ungehitaji kukamilisha uzoefu wako wa ununuzi. Ulichaguaje aina hizo?
+
+## Rubric
+
+Vigezo | Bora Kabisa | Inaridhisha | Inahitaji Kuboreshwa
+--- | --- | --- | --- |
+||Aina sita za data zimeorodheshwa na kuchunguzwa kwa kina, zikielezea matumizi yake|Aina nne za data zimechunguzwa|Aina mbili za data zimechunguzwa|
+
+---
+
+**Kanusho**:  
+Hati hii imetafsiriwa kwa kutumia huduma ya kutafsiri ya AI [Co-op Translator](https://github.com/Azure/co-op-translator). Ingawa tunajitahidi kuhakikisha usahihi, tafadhali fahamu kuwa tafsiri za kiotomatiki zinaweza kuwa na makosa au kutokuwa sahihi. Hati ya asili katika lugha yake ya awali inapaswa kuzingatiwa kama chanzo cha mamlaka. Kwa taarifa muhimu, tafsiri ya kitaalamu ya binadamu inapendekezwa. Hatutawajibika kwa kutoelewana au tafsiri zisizo sahihi zinazotokana na matumizi ya tafsiri hii.
\ No newline at end of file
diff --git a/translations/sw/2-js-basics/2-functions-methods/README.md b/translations/sw/2-js-basics/2-functions-methods/README.md
new file mode 100644
index 00000000..8da48c03
--- /dev/null
+++ b/translations/sw/2-js-basics/2-functions-methods/README.md
@@ -0,0 +1,210 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "b4612bbb9ace984f374fcc80e3e035ad",
+  "translation_date": "2025-08-28T04:04:10+00:00",
+  "source_file": "2-js-basics/2-functions-methods/README.md",
+  "language_code": "sw"
+}
+-->
+# Misingi ya JavaScript: Mbinu na Kazi
+
+![Misingi ya JavaScript - Kazi](../../../../translated_images/webdev101-js-functions.be049c4726e94f8b7605c36330ac42eeb5cd8ed02bcdd60fdac778174d6cb865.sw.png)  
+> Sketchnote na [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Jaribio la Kabla ya Somo  
+[Jaribio la kabla ya somo](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/9)
+
+Tunapofikiria kuhusu kuandika msimbo, tunapaswa kuhakikisha kuwa msimbo wetu unasomeka. Ingawa hili linaweza kuonekana kinyume na matarajio, msimbo husomwa mara nyingi zaidi kuliko unavyoandikwa. Chombo kimoja muhimu katika kisanduku cha zana cha msanidi programu kuhakikisha msimbo unaoweza kudumishwa ni **kazi**.
+
+[![Mbinu na Kazi](https://img.youtube.com/vi/XgKsD6Zwvlc/0.jpg)](https://youtube.com/watch?v=XgKsD6Zwvlc "Mbinu na Kazi")
+
+> 🎥 Bofya picha hapo juu kwa video kuhusu mbinu na kazi.
+
+> Unaweza kuchukua somo hili kwenye [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-functions/?WT.mc_id=academic-77807-sagibbon)!
+
+## Kazi
+
+Kwa msingi wake, kazi ni kipande cha msimbo ambacho tunaweza kukitekeleza tunapohitaji. Hii ni bora kwa hali ambapo tunahitaji kufanya kazi ile ile mara kadhaa; badala ya kurudia mantiki hiyo katika maeneo mengi (ambayo ingekuwa ngumu kusasisha baadaye), tunaweza kuiweka mahali pamoja na kuipigia simu tunapohitaji kazi hiyo kufanyika - unaweza hata kupigia kazi kutoka kwa kazi nyingine!
+
+Jambo jingine muhimu ni uwezo wa kuipa kazi jina. Ingawa hili linaweza kuonekana dogo, jina linatoa njia ya haraka ya kuandika maelezo ya sehemu ya msimbo. Unaweza kufikiria hili kama lebo kwenye kitufe. Nikibonyeza kitufe kilichoandikwa "Sitisha kipima muda", najua kitakomesha saa inayoendelea.
+
+## Kuunda na Kupigia Kazi Simu
+
+Sintaksia ya kazi inaonekana kama ifuatavyo:
+
+```javascript
+function nameOfFunction() { // function definition
+ // function definition/body
+}
+```
+
+Ikiwa ningetaka kuunda kazi ya kuonyesha salamu, ingeonekana hivi:
+
+```javascript
+function displayGreeting() {
+  console.log('Hello, world!');
+}
+```
+
+Tunapohitaji kupigia kazi simu (au kuiita), tunatumia jina la kazi likifuatiwa na `()`. Ni vyema kutambua kuwa kazi yetu inaweza kufafanuliwa kabla au baada ya kuamua kuipigia simu; mkusanyaji wa JavaScript ataipeleleza kwa ajili yako.
+
+```javascript
+// calling our function
+displayGreeting();
+```
+
+> **NOTE:** Kuna aina maalum ya kazi inayojulikana kama **mbinu**, ambayo tayari umekuwa ukitumia! Kwa kweli, tuliona hili katika onyesho letu hapo juu tulipotumia `console.log`. Tofauti kati ya mbinu na kazi ni kwamba mbinu imeambatanishwa na kitu (`console` katika mfano wetu), wakati kazi ni huru. Utasikia wasanidi programu wengi wakitumia maneno haya kwa kubadilishana.
+
+### Mazoea Bora ya Kazi
+
+Kuna mazoea machache bora ya kuzingatia unapounda kazi:
+
+- Kama kawaida, tumia majina yanayoelezea ili ujue kazi itafanya nini  
+- Tumia **camelCasing** kuunganisha maneno  
+- Weka kazi zako zikilenga kazi maalum  
+
+## Kupitisha Taarifa kwa Kazi
+
+Ili kufanya kazi iweze kutumika tena mara nyingi, mara nyingi utataka kupitisha taarifa ndani yake. Tukizingatia mfano wetu wa `displayGreeting` hapo juu, itaonyesha tu **Hello, world!**. Sio kazi yenye manufaa sana ambayo mtu anaweza kuunda. Ikiwa tunataka kuifanya iwe rahisi zaidi, kama kuruhusu mtu kutaja jina la mtu wa kusalimiwa, tunaweza kuongeza **kigezo**. Kigezo (wakati mwingine huitwa **hoja**) ni taarifa ya ziada inayotumwa kwa kazi.
+
+Vigezo huorodheshwa katika sehemu ya ufafanuzi ndani ya mabano na hutenganishwa kwa koma kama ifuatavyo:
+
+```javascript
+function name(param, param2, param3) {
+
+}
+```
+
+Tunaweza kusasisha `displayGreeting` yetu kukubali jina na kulionyesha.
+
+```javascript
+function displayGreeting(name) {
+  const message = `Hello, ${name}!`;
+  console.log(message);
+}
+```
+
+Tunapohitaji kupigia kazi simu na kupitisha kigezo, tunakitaja ndani ya mabano.
+
+```javascript
+displayGreeting('Christopher');
+// displays "Hello, Christopher!" when run
+```
+
+## Thamani Chaguo-Msingi
+
+Tunaweza kufanya kazi yetu iwe rahisi zaidi kwa kuongeza vigezo zaidi. Lakini vipi ikiwa hatutaki kila thamani iwe ya lazima? Tukizingatia mfano wetu wa salamu, tunaweza kuacha jina kuwa la lazima (tunapaswa kujua tunamsalimu nani), lakini tunataka kuruhusu salamu yenyewe kubadilishwa kama mtu anavyotaka. Ikiwa mtu hataki kuibadilisha, tunatoa thamani chaguo-msingi badala yake. Ili kutoa thamani chaguo-msingi kwa kigezo, tunaiweka kwa njia ile ile tunavyoweka thamani kwa kigezo - `parameterName = 'defaultValue'`. Ili kuona mfano kamili:
+
+```javascript
+function displayGreeting(name, salutation='Hello') {
+  console.log(`${salutation}, ${name}`);
+}
+```
+
+Tunapopigia kazi simu, tunaweza kuamua ikiwa tunataka kuweka thamani kwa `salutation`.
+
+```javascript
+displayGreeting('Christopher');
+// displays "Hello, Christopher"
+
+displayGreeting('Christopher', 'Hi');
+// displays "Hi, Christopher"
+```
+
+## Thamani za Kurudisha
+
+Hadi sasa kazi tuliyojenga itatoa matokeo kila mara kwenye [console](https://developer.mozilla.org/docs/Web/API/console). Wakati mwingine hii inaweza kuwa kile tunachotafuta hasa, hasa tunapounda kazi ambazo zitakuwa zikihusiana na huduma nyingine. Lakini vipi ikiwa nataka kuunda kazi ya kusaidia kufanya hesabu na kutoa thamani hiyo ili niitumie mahali pengine?
+
+Tunaweza kufanya hivyo kwa kutumia **thamani ya kurudisha**. Thamani ya kurudisha inarudishwa na kazi, na inaweza kuhifadhiwa kwenye kigezo sawa na tunavyoweza kuhifadhi thamani ya moja kwa moja kama kamba au namba.
+
+Ikiwa kazi inarudisha kitu basi neno kuu `return` linatumika. Neno kuu `return` linatarajia thamani au rejeleo la kile kinachorudishwa kama ifuatavyo:
+
+```javascript
+return myVariable;
+```  
+
+Tunaweza kuunda kazi ya kuunda ujumbe wa salamu na kurudisha thamani hiyo kwa mpigaji simu.
+
+```javascript
+function createGreetingMessage(name) {
+  const message = `Hello, ${name}`;
+  return message;
+}
+```
+
+Tunapopigia kazi simu, tutahifadhi thamani hiyo kwenye kigezo. Hii ni sawa na tunavyoweka kigezo kwa thamani ya tuli (kama `const name = 'Christopher'`).
+
+```javascript
+const greetingMessage = createGreetingMessage('Christopher');
+```
+
+## Kazi kama Vigezo kwa Kazi
+
+Unapopiga hatua katika taaluma yako ya programu, utakutana na kazi zinazokubali kazi kama vigezo. Mbinu hii nzuri hutumika mara nyingi tunapokuwa hatujui ni lini kitu kitatokea au kukamilika, lakini tunajua tunahitaji kufanya kazi fulani kama mwitikio.
+
+Kwa mfano, fikiria [setTimeout](https://developer.mozilla.org/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout), ambayo huanzisha kipima muda na itatekeleza msimbo inapokamilika. Tunahitaji kuiambia ni msimbo gani tunataka utekelezwe. Hii inaonekana kama kazi bora kwa kazi!
+
+Ukikimbia msimbo hapa chini, baada ya sekunde 3 utaona ujumbe **3 seconds has elapsed**.
+
+```javascript
+function displayDone() {
+  console.log('3 seconds has elapsed');
+}
+// timer value is in milliseconds
+setTimeout(displayDone, 3000);
+```
+
+### Kazi Zisizo na Majina
+
+Hebu tuangalie tena tulichojenga. Tunaunda kazi yenye jina ambayo itatumika mara moja tu. Kadri programu yetu inavyokuwa ngumu zaidi, tunaweza kujikuta tukitengeneza kazi nyingi ambazo zitatumika mara moja tu. Hili si bora. Kama inavyotokea, hatuhitaji kila mara kutoa jina!
+
+Tunapopitisha kazi kama kigezo tunaweza kupitisha kuunda moja mapema na badala yake kuijenga kama sehemu ya kigezo. Tunatumia neno kuu `function`, lakini badala yake tunaijenga kama kigezo.
+
+Hebu tuandike upya msimbo hapo juu ili kutumia kazi isiyo na jina:
+
+```javascript
+setTimeout(function() {
+  console.log('3 seconds has elapsed');
+}, 3000);
+```
+
+Ukikimbia msimbo wetu mpya utaona tunapata matokeo yale yale. Tumeunda kazi, lakini hatukuhitaji kuipa jina!
+
+### Kazi za Mishale Mafupi
+
+Njia moja ya mkato inayotumika sana katika lugha nyingi za programu (ikiwa ni pamoja na JavaScript) ni uwezo wa kutumia kile kinachoitwa **arrow** au **fat arrow** function. Inatumia kiashiria maalum cha `=>`, ambacho kinaonekana kama mshale - hivyo jina! Kwa kutumia `=>`, tunaweza kuruka neno kuu `function`.
+
+Hebu tuandike upya msimbo wetu mara nyingine tena ili kutumia kazi ya mshale mfupi:
+
+```javascript
+setTimeout(() => {
+  console.log('3 seconds has elapsed');
+}, 3000);
+```
+
+### Wakati wa Kutumia Kila Mkakati
+
+Sasa umeona tuna njia tatu za kupitisha kazi kama kigezo na unaweza kuwa unajiuliza ni lini utumie kila moja. Ikiwa unajua utatumia kazi hiyo zaidi ya mara moja, iunde kama kawaida. Ikiwa utaitumia kwa eneo moja tu, kwa kawaida ni bora kutumia kazi isiyo na jina. Ikiwa utatumia kazi ya mshale mfupi au sintaksia ya jadi ya `function` ni juu yako, lakini utaona wasanidi programu wengi wa kisasa wanapendelea `=>`.
+
+---
+
+## 🚀 Changamoto
+
+Je, unaweza kuelezea kwa sentensi moja tofauti kati ya kazi na mbinu? Jaribu!
+
+## Jaribio la Baada ya Somo  
+[Jaribio la baada ya somo](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/10)
+
+## Mapitio na Kujisomea
+
+Inafaa [kusoma zaidi kuhusu kazi za mshale](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions), kwani zinatumiwa zaidi katika misimbo ya programu. Fanya mazoezi ya kuandika kazi, kisha uandike upya kwa kutumia sintaksia hii.
+
+## Kazi
+
+[Furahia na Kazi](assignment.md)
+
+---
+
+**Kanusho**:  
+Hati hii imetafsiriwa kwa kutumia huduma ya kutafsiri ya AI [Co-op Translator](https://github.com/Azure/co-op-translator). Ingawa tunajitahidi kuhakikisha usahihi, tafadhali fahamu kuwa tafsiri za kiotomatiki zinaweza kuwa na makosa au kutokuwa sahihi. Hati ya asili katika lugha yake ya awali inapaswa kuzingatiwa kama chanzo cha mamlaka. Kwa taarifa muhimu, tafsiri ya kitaalamu ya binadamu inapendekezwa. Hatutawajibika kwa kutoelewana au tafsiri zisizo sahihi zinazotokana na matumizi ya tafsiri hii.
\ No newline at end of file
diff --git a/translations/sw/2-js-basics/2-functions-methods/assignment.md b/translations/sw/2-js-basics/2-functions-methods/assignment.md
new file mode 100644
index 00000000..54ff2146
--- /dev/null
+++ b/translations/sw/2-js-basics/2-functions-methods/assignment.md
@@ -0,0 +1,27 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "8973f96157680a13e9446e4bb540ee57",
+  "translation_date": "2025-08-28T04:05:50+00:00",
+  "source_file": "2-js-basics/2-functions-methods/assignment.md",
+  "language_code": "sw"
+}
+-->
+# Furaha na Fomula
+
+## Maelekezo
+
+Tengeneza fomula tofauti, zikiwemo fomula zinazorejesha kitu na zile ambazo hazirejeshi chochote.
+
+Jaribu kutengeneza fomula yenye mchanganyiko wa vigezo vya kawaida na vigezo vyenye thamani za msingi.
+
+## Rubric
+
+| Kigezo   | Kilele                                                                                 | Kinachokubalika                                                | Kinachohitaji Kuboresha |
+| -------- | -------------------------------------------------------------------------------------- | ------------------------------------------------------------- | ----------------------- |
+|          | Suluhisho linatolewa na fomula mbili au zaidi zinazofanya kazi vizuri na vigezo tofauti | Suluhisho linalofanya kazi linatolewa na fomula moja na vigezo vichache | Suluhisho lina kasoro |
+
+---
+
+**Kanusho**:  
+Hati hii imetafsiriwa kwa kutumia huduma ya kutafsiri ya AI [Co-op Translator](https://github.com/Azure/co-op-translator). Ingawa tunajitahidi kuhakikisha usahihi, tafadhali fahamu kuwa tafsiri za kiotomatiki zinaweza kuwa na makosa au kutokuwa sahihi. Hati ya asili katika lugha yake ya awali inapaswa kuzingatiwa kama chanzo cha mamlaka. Kwa taarifa muhimu, tafsiri ya kitaalamu ya binadamu inapendekezwa. Hatutawajibika kwa kutoelewana au tafsiri zisizo sahihi zinazotokana na matumizi ya tafsiri hii.
\ No newline at end of file
diff --git a/translations/sw/2-js-basics/3-making-decisions/README.md b/translations/sw/2-js-basics/3-making-decisions/README.md
new file mode 100644
index 00000000..90c0f221
--- /dev/null
+++ b/translations/sw/2-js-basics/3-making-decisions/README.md
@@ -0,0 +1,232 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "888609c48329c280ca2477d2df40f2e5",
+  "translation_date": "2025-08-28T04:06:09+00:00",
+  "source_file": "2-js-basics/3-making-decisions/README.md",
+  "language_code": "sw"
+}
+-->
+# Misingi ya JavaScript: Kufanya Maamuzi
+
+![Misingi ya JavaScript - Kufanya maamuzi](../../../../translated_images/webdev101-js-decisions.69e1b20f272dd1f0b1cb2f8adaff3ed2a77c4f91db96d8a0594132a353fa189a.sw.png)
+
+> Sketchnote na [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Maswali ya Kabla ya Somo
+
+[Maswali ya kabla ya somo](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/11)
+
+Kufanya maamuzi na kudhibiti mpangilio wa jinsi msimbo wako unavyoendeshwa hufanya msimbo wako uweze kutumika tena na kuwa imara. Sehemu hii inashughulikia sintaksia ya kudhibiti mtiririko wa data katika JavaScript na umuhimu wake unapotumika na aina ya data ya Boolean.
+
+[![Kufanya Maamuzi](https://img.youtube.com/vi/SxTp8j-fMMY/0.jpg)](https://youtube.com/watch?v=SxTp8j-fMMY "Kufanya Maamuzi")
+
+> 🎥 Bofya picha hapo juu kwa video kuhusu kufanya maamuzi.
+
+> Unaweza kuchukua somo hili kwenye [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-if-else/?WT.mc_id=academic-77807-sagibbon)!
+
+## Muhtasari Mfupi Kuhusu Booleans
+
+Booleans zinaweza kuwa na thamani mbili tu: `true` au `false`. Booleans husaidia kufanya maamuzi kuhusu mistari gani ya msimbo inapaswa kuendeshwa wakati masharti fulani yanatimizwa.
+
+Weka Boolean yako kuwa `true` au `false` kama hivi:
+
+`let myTrueBool = true`  
+`let myFalseBool = false`
+
+✅ Booleans zilipewa jina la George Boole, mtaalamu wa hesabu, falsafa na mantiki wa Kiingereza (1815–1864).
+
+## Waendeshaji wa Kulinganisha na Booleans
+
+Waendeshaji hutumika kutathmini masharti kwa kufanya kulinganisha ambako kutazalisha thamani ya Boolean. Hii hapa ni orodha ya waendeshaji wanaotumika mara kwa mara.
+
+| Alama  | Maelezo                                                                                                                                                     | Mfano              |
+| ------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ |
+| `<`    | **Chini ya**: Inalinganisha thamani mbili na kurudisha aina ya data ya Boolean `true` ikiwa thamani upande wa kushoto ni ndogo kuliko ya kulia               | `5 < 6 // true`    |
+| `<=`   | **Chini au sawa na**: Inalinganisha thamani mbili na kurudisha aina ya data ya Boolean `true` ikiwa thamani upande wa kushoto ni ndogo au sawa na ya kulia   | `5 <= 6 // true`   |
+| `>`    | **Kubwa kuliko**: Inalinganisha thamani mbili na kurudisha aina ya data ya Boolean `true` ikiwa thamani upande wa kushoto ni kubwa kuliko ya kulia          | `5 > 6 // false`   |
+| `>=`   | **Kubwa au sawa na**: Inalinganisha thamani mbili na kurudisha aina ya data ya Boolean `true` ikiwa thamani upande wa kushoto ni kubwa au sawa na ya kulia   | `5 >= 6 // false`  |
+| `===`  | **Usawa mkali**: Inalinganisha thamani mbili na kurudisha aina ya data ya Boolean `true` ikiwa thamani upande wa kulia na kushoto ni sawa NA ni aina sawa    | `5 === 6 // false` |
+| `!==`  | **Kutokuwepo usawa**: Inalinganisha thamani mbili na kurudisha thamani ya Boolean kinyume na kile ambacho waendeshaji wa usawa mkali ungerudisha            | `5 !== 6 // true`  |
+
+✅ Angalia uelewa wako kwa kuandika kulinganisha kadhaa kwenye koni ya kivinjari chako. Je, data yoyote iliyorejeshwa inakushangaza?
+
+## Tamko la If
+
+Tamko la `if` litaendesha msimbo uliopo kati ya vizuizi vyake ikiwa sharti ni `true`.
+
+```javascript
+if (condition) {
+  //Condition is true. Code in this block will run.
+}
+```
+
+Waendeshaji wa mantiki mara nyingi hutumika kuunda sharti.
+
+```javascript
+let currentMoney;
+let laptopPrice;
+
+if (currentMoney >= laptopPrice) {
+  //Condition is true. Code in this block will run.
+  console.log("Getting a new laptop!");
+}
+```
+
+## Tamko la If..Else
+
+Tamko la `else` litaendesha msimbo uliopo kati ya vizuizi vyake wakati sharti ni `false`. Ni hiari na tamko la `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!");
+}
+```
+
+✅ Jaribu uelewa wako wa msimbo huu na msimbo ufuatao kwa kuendesha kwenye koni ya kivinjari. Badilisha thamani za vigezo vya `currentMoney` na `laptopPrice` ili kubadilisha kile kinachorejeshwa na `console.log()`.
+
+## Tamko la Switch
+
+Tamko la `switch` linatumika kufanya vitendo tofauti kulingana na masharti tofauti. Tumia tamko la `switch` kuchagua moja ya vizuizi vingi vya msimbo kuendeshwa.
+
+```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}`);
+```
+
+✅ Jaribu uelewa wako wa msimbo huu na msimbo ufuatao kwa kuendesha kwenye koni ya kivinjari. Badilisha thamani za kigezo `a` ili kubadilisha kile kinachorejeshwa na `console.log()`.
+
+## Waendeshaji wa Mantiki na Booleans
+
+Maamuzi yanaweza kuhitaji kulinganisha zaidi ya moja, na yanaweza kuunganishwa pamoja na waendeshaji wa mantiki ili kuzalisha thamani ya Boolean.
+
+| Alama  | Maelezo                                                                                     | Mfano                                                                 |
+| ------ | ------------------------------------------------------------------------------------------- | --------------------------------------------------------------------- |
+| `&&`   | **Mantiki AND**: Inalinganisha maelezo mawili ya Boolean. Inarudisha `true` **tu** ikiwa pande zote mbili ni `true` | `(5 > 6) && (5 < 6 ) //Upande mmoja ni false, mwingine ni true. Inarudisha false` |
+| `\|\|` | **Mantiki OR**: Inalinganisha maelezo mawili ya Boolean. Inarudisha `true` ikiwa angalau upande mmoja ni `true`     | `(5 > 6) \|\| (5 < 6) //Upande mmoja ni false, mwingine ni true. Inarudisha true` |
+| `!`    | **Mantiki NOT**: Inarudisha thamani kinyume ya maelezo ya Boolean                             | `!(5 > 6) // 5 si kubwa kuliko 6, lakini "!" itarudisha true`         |
+
+## Masharti na Maamuzi kwa Waendeshaji wa Mantiki
+
+Waendeshaji wa mantiki wanaweza kutumika kuunda masharti katika tamko la `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!");
+}
+```
+
+### Waendeshaji wa Negation
+
+Umeona hadi sasa jinsi unavyoweza kutumia tamko la `if...else` kuunda mantiki ya masharti. Kila kitu kinachoingia kwenye `if` kinahitaji kutathminiwa kuwa `true` au `false`. Kwa kutumia waendeshaji wa `!` unaweza _kukanusha_ maelezo. Inaweza kuonekana kama hivi:
+
+```javascript
+if (!condition) {
+  // runs if condition is false
+} else {
+  // runs if condition is true
+}
+```
+
+### Maelezo ya Ternary
+
+`if...else` si njia pekee ya kueleza mantiki ya maamuzi. Unaweza pia kutumia kitu kinachoitwa waendeshaji wa ternary. Sintaksia yake inaonekana kama hivi:
+
+```javascript
+let variable = condition ? <return this if true> : <return this if false>
+```
+
+Hapa chini kuna mfano wa kueleweka zaidi:
+
+```javascript
+let firstNumber = 20;
+let secondNumber = 10;
+let biggestNumber = firstNumber > secondNumber ? firstNumber : secondNumber;
+```
+
+✅ Chukua dakika kusoma msimbo huu mara kadhaa. Je, unaelewa jinsi waendeshaji hawa wanavyofanya kazi?
+
+Hapo juu inasema kwamba:
+
+- ikiwa `firstNumber` ni kubwa kuliko `secondNumber`
+- basi weka `firstNumber` kwa `biggestNumber`
+- vinginevyo weka `secondNumber`.
+
+Maelezo ya ternary ni njia fupi ya kuandika msimbo hapa chini:
+
+```javascript
+let biggestNumber;
+if (firstNumber > secondNumber) {
+  biggestNumber = firstNumber;
+} else {
+  biggestNumber = secondNumber;
+}
+```
+
+---
+
+## 🚀 Changamoto
+
+Unda programu ambayo imeandikwa kwanza kwa waendeshaji wa mantiki, kisha iandike upya kwa kutumia maelezo ya ternary. Je, ni sintaksia ipi unayopendelea?
+
+---
+
+## Maswali ya Baada ya Somo
+
+[Maswali ya baada ya somo](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/12)
+
+## Mapitio na Kujisomea
+
+Soma zaidi kuhusu waendeshaji wengi waliopo kwa mtumiaji [kwenye MDN](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators).
+
+Pitisha kupitia zana nzuri ya Josh Comeau ya [operator lookup](https://joshwcomeau.com/operator-lookup/)!
+
+## Kazi
+
+[Waendeshaji](assignment.md)
+
+---
+
+**Kanusho**:  
+Hati hii imetafsiriwa kwa kutumia huduma ya tafsiri ya AI [Co-op Translator](https://github.com/Azure/co-op-translator). Ingawa tunajitahidi kwa usahihi, tafadhali fahamu kuwa tafsiri za kiotomatiki zinaweza kuwa na makosa au kutokuwa sahihi. Hati ya asili katika lugha yake ya awali inapaswa kuzingatiwa kama chanzo cha mamlaka. Kwa taarifa muhimu, inashauriwa kutumia huduma ya tafsiri ya kitaalamu ya binadamu. Hatutawajibika kwa kutoelewana au tafsiri zisizo sahihi zinazotokana na matumizi ya tafsiri hii.
\ No newline at end of file
diff --git a/translations/sw/2-js-basics/3-making-decisions/assignment.md b/translations/sw/2-js-basics/3-making-decisions/assignment.md
new file mode 100644
index 00000000..b2842ea0
--- /dev/null
+++ b/translations/sw/2-js-basics/3-making-decisions/assignment.md
@@ -0,0 +1,54 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "bf62b82567e6f9bdf4abda9ae0ccb64a",
+  "translation_date": "2025-08-28T04:07:19+00:00",
+  "source_file": "2-js-basics/3-making-decisions/assignment.md",
+  "language_code": "sw"
+}
+-->
+# Opereta
+
+## Maelekezo
+
+Jaribu kutumia opereta. Hapa kuna pendekezo la programu unayoweza kutekeleza:
+
+Una seti ya wanafunzi kutoka mifumo miwili tofauti ya upangaji alama.
+
+### Mfumo wa kwanza wa upangaji alama
+
+Mfumo mmoja wa upangaji alama unaelezewa kama alama zikiwa kati ya 1-5 ambapo 3 na zaidi inamaanisha umefaulu somo.
+
+### Mfumo wa pili wa upangaji alama
+
+Mfumo mwingine wa upangaji alama una alama zifuatazo `A, A-, B, B-, C, C-` ambapo `A` ni alama ya juu kabisa na `C` ni alama ya chini inayokubalika kufaulu.
+
+### Kazi
+
+Ukipatiwa safu `allStudents` inayowakilisha wanafunzi wote na alama zao, tengeneza safu mpya `studentsWhoPass` inayojumuisha wanafunzi wote waliopasi.
+
+> TIP, tumia for-loop na if...else pamoja na opereta za kulinganisha:
+
+```javascript
+let allStudents = [
+  'A',
+  'B-',
+  1,
+  4,
+  5,
+  2
+]
+
+let studentsWhoPass = [];
+```
+
+## Rubric
+
+| Vigezo   | Bora kabisa                   | Inaridhisha                  | Inahitaji Kuboresha             |
+| -------- | ----------------------------- | ---------------------------- | ------------------------------- |
+|          | Suluhisho kamili limewasilishwa | Suluhisho la sehemu limewasilishwa | Suluhisho lenye hitilafu limewasilishwa |
+
+---
+
+**Kanusho**:  
+Hati hii imetafsiriwa kwa kutumia huduma ya tafsiri ya AI [Co-op Translator](https://github.com/Azure/co-op-translator). Ingawa tunajitahidi kuhakikisha usahihi, tafadhali fahamu kuwa tafsiri za kiotomatiki zinaweza kuwa na makosa au kutokuwa sahihi. Hati ya asili katika lugha yake ya awali inapaswa kuzingatiwa kama chanzo cha mamlaka. Kwa taarifa muhimu, tafsiri ya kitaalamu ya binadamu inapendekezwa. Hatutawajibika kwa kutoelewana au tafsiri zisizo sahihi zinazotokana na matumizi ya tafsiri hii.
\ No newline at end of file
diff --git a/translations/sw/2-js-basics/4-arrays-loops/README.md b/translations/sw/2-js-basics/4-arrays-loops/README.md
new file mode 100644
index 00000000..6c8d7143
--- /dev/null
+++ b/translations/sw/2-js-basics/4-arrays-loops/README.md
@@ -0,0 +1,147 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "3f7f87871312cf6cc12662da7d973182",
+  "translation_date": "2025-08-28T04:09:43+00:00",
+  "source_file": "2-js-basics/4-arrays-loops/README.md",
+  "language_code": "sw"
+}
+-->
+# Msingi wa JavaScript: Arrays na Loops
+
+![Msingi wa JavaScript - Arrays](../../../../translated_images/webdev101-js-arrays.439d7528b8a294558d0e4302e448d193f8ad7495cc407539cc81f1afe904b470.sw.png)  
+> Sketchnote na [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Jaribio la Kabla ya Somo  
+[Jaribio la kabla ya somo](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/13)
+
+Somo hili linashughulikia misingi ya JavaScript, lugha inayowezesha mwingiliano kwenye wavuti. Katika somo hili, utajifunza kuhusu arrays na loops, ambavyo hutumika kudhibiti data.
+
+[![Arrays](https://img.youtube.com/vi/1U4qTyq02Xw/0.jpg)](https://youtube.com/watch?v=1U4qTyq02Xw "Arrays")
+
+[![Loops](https://img.youtube.com/vi/Eeh7pxtTZ3k/0.jpg)](https://www.youtube.com/watch?v=Eeh7pxtTZ3k "Loops")
+
+> 🎥 Bonyeza picha zilizo juu kwa video kuhusu arrays na loops.
+
+> Unaweza kuchukua somo hili kwenye [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-arrays/?WT.mc_id=academic-77807-sagibbon)!
+
+## Arrays
+
+Kufanya kazi na data ni kazi ya kawaida kwa lugha yoyote ya programu, na ni rahisi zaidi wakati data imepangwa katika muundo wa kimuundo, kama arrays. Kwa kutumia arrays, data huhifadhiwa katika muundo unaofanana na orodha. Faida kubwa ya arrays ni kwamba unaweza kuhifadhi aina tofauti za data katika array moja.
+
+✅ Arrays zipo kila mahali! Je, unaweza kufikiria mfano wa maisha halisi wa array, kama safu ya paneli za jua?
+
+Sintaksia ya array ni jozi ya mabano ya mraba.
+
+```javascript
+let myArray = [];
+```
+
+Hii ni array tupu, lakini arrays zinaweza kutangazwa tayari zikiwa na data. Thamani nyingi katika array hutenganishwa kwa koma.
+
+```javascript
+let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
+```
+
+Thamani za array hupewa thamani ya kipekee inayoitwa **index**, ambayo ni namba kamili inayotolewa kulingana na umbali wake kutoka mwanzo wa array. Katika mfano hapo juu, thamani ya string "Chocolate" ina index ya 0, na index ya "Rocky Road" ni 4. Tumia index na mabano ya mraba ili kupata, kubadilisha, au kuingiza thamani za array.
+
+✅ Je, inakushangaza kwamba arrays huanza na index ya sifuri? Katika baadhi ya lugha za programu, indexes huanza na 1. Kuna historia ya kuvutia kuhusu hili, ambayo unaweza [kusoma kwenye Wikipedia](https://en.wikipedia.org/wiki/Zero-based_numbering).
+
+```javascript
+let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
+iceCreamFlavors[2]; //"Vanilla"
+```
+
+Unaweza kutumia index kubadilisha thamani, kama hivi:
+
+```javascript
+iceCreamFlavors[4] = "Butter Pecan"; //Changed "Rocky Road" to "Butter Pecan"
+```
+
+Na unaweza kuingiza thamani mpya kwenye index fulani kama hivi:
+
+```javascript
+iceCreamFlavors[5] = "Cookie Dough"; //Added "Cookie Dough"
+```
+
+✅ Njia ya kawaida zaidi ya kuongeza thamani kwenye array ni kwa kutumia opereta wa array kama array.push()
+
+Ili kujua idadi ya vitu vilivyomo kwenye array, tumia mali ya `length`.
+
+```javascript
+let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
+iceCreamFlavors.length; //5
+```
+
+✅ Jaribu mwenyewe! Tumia console ya kivinjari chako kuunda na kudhibiti array ya ubunifu wako mwenyewe.
+
+## Loops
+
+Loops hutuwezesha kufanya kazi za kurudiwa au **iterative**, na zinaweza kuokoa muda mwingi na msimbo. Kila iteration inaweza kutofautiana katika vigezo, thamani, na masharti. Kuna aina tofauti za loops katika JavaScript, na zote zina tofauti ndogo, lakini kimsingi hufanya kitu kimoja: kurudia data.
+
+### For Loop
+
+`for` loop inahitaji sehemu 3 ili kurudia:
+- `counter` Kigezo ambacho kawaida huanzishwa na namba inayohesabu idadi ya iterations  
+- `condition` Usemi unaotumia opereta za kulinganisha kusababisha loop kusimama wakati ni `false`  
+- `iteration-expression` Huendeshwa mwishoni mwa kila iteration, kawaida hutumika kubadilisha thamani ya counter  
+
+```javascript
+// Counting up to 10
+for (let i = 0; i < 10; i++) {
+  console.log(i);
+}
+```
+
+✅ Endesha msimbo huu kwenye console ya kivinjari. Nini hutokea unapofanya mabadiliko madogo kwenye counter, condition, au iteration expression? Je, unaweza kuifanya iende kinyume, ikitengeneza hesabu ya kurudi nyuma?
+
+### While loop
+
+Tofauti na sintaksia ya `for` loop, `while` loops zinahitaji tu sharti ambalo litasimamisha loop wakati sharti linakuwa `false`. Masharti katika loops kawaida hutegemea thamani nyingine kama counters, na lazima yasimamiwe wakati wa loop. Thamani za kuanzia za counters lazima ziundwe nje ya loop, na usemi wowote wa kukidhi sharti, ikiwa ni pamoja na kubadilisha counter, lazima udumishwe ndani ya loop.
+
+```javascript
+//Counting up to 10
+let i = 0;
+while (i < 10) {
+ console.log(i);
+ i++;
+}
+```
+
+✅ Kwa nini ungechagua for loop badala ya while loop? Watazamaji 17,000 walikuwa na swali sawa kwenye StackOverflow, na baadhi ya maoni [yanaweza kukuvutia](https://stackoverflow.com/questions/39969145/while-loops-vs-for-loops-in-javascript).
+
+## Loops na Arrays
+
+Arrays mara nyingi hutumiwa na loops kwa sababu masharti mengi yanahitaji urefu wa array kusimamisha loop, na index pia inaweza kuwa thamani ya counter.
+
+```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
+```
+
+✅ Jaribu kurudia array ya ubunifu wako mwenyewe kwenye console ya kivinjari. 
+
+---
+
+## 🚀 Changamoto
+
+Kuna njia nyingine za kurudia arrays zaidi ya for na while loops. Kuna [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), na [map](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/map). Andika upya loop yako ya array ukitumia mojawapo ya mbinu hizi.
+
+## Jaribio la Baada ya Somo  
+[Jaribio la baada ya somo](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/14)
+
+## Mapitio na Kujisomea
+
+Arrays katika JavaScript zina mbinu nyingi zilizoambatanishwa nazo, ambazo ni muhimu sana kwa kudhibiti data. [Soma kuhusu mbinu hizi](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array) na ujaribu baadhi yao (kama push, pop, slice na splice) kwenye array ya ubunifu wako.
+
+## Kazi
+
+[Kurudia Array](assignment.md)
+
+---
+
+**Kanusho**:  
+Hati hii imetafsiriwa kwa kutumia huduma ya tafsiri ya AI [Co-op Translator](https://github.com/Azure/co-op-translator). Ingawa tunajitahidi kuhakikisha usahihi, tafadhali fahamu kuwa tafsiri za kiotomatiki zinaweza kuwa na makosa au kutokuwa sahihi. Hati ya asili katika lugha yake ya awali inapaswa kuzingatiwa kama chanzo cha mamlaka. Kwa taarifa muhimu, tafsiri ya kitaalamu ya binadamu inapendekezwa. Hatutawajibika kwa kutoelewana au tafsiri zisizo sahihi zinazotokana na matumizi ya tafsiri hii.
\ No newline at end of file
diff --git a/translations/sw/2-js-basics/4-arrays-loops/assignment.md b/translations/sw/2-js-basics/4-arrays-loops/assignment.md
new file mode 100644
index 00000000..e7afdae9
--- /dev/null
+++ b/translations/sw/2-js-basics/4-arrays-loops/assignment.md
@@ -0,0 +1,27 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "8b2381170bd0fd2870f5889bb8620f02",
+  "translation_date": "2025-08-28T04:10:59+00:00",
+  "source_file": "2-js-basics/4-arrays-loops/assignment.md",
+  "language_code": "sw"
+}
+-->
+# Kurudia Kundi
+
+## Maelekezo
+
+Tengeneza programu inayoorodhesha kila namba ya 3 kati ya 1-20 na kuichapisha kwenye console.
+
+> TIP: tumia for-loop na badilisha usemi wa kurudia
+
+## Rubric
+
+| Vigezo   | Bora Zaidi                              | Inaridhisha              | Inahitaji Kuboresha            |
+| -------- | --------------------------------------- | ------------------------ | ------------------------------ |
+|          | Programu inaendeshwa vizuri na ina maelezo | Programu haina maelezo  | Programu haijakamilika au ina hitilafu |
+
+---
+
+**Kanusho**:  
+Hati hii imetafsiriwa kwa kutumia huduma ya tafsiri ya AI [Co-op Translator](https://github.com/Azure/co-op-translator). Ingawa tunajitahidi kwa usahihi, tafadhali fahamu kuwa tafsiri za kiotomatiki zinaweza kuwa na makosa au kutokuwa sahihi. Hati ya asili katika lugha yake ya awali inapaswa kuzingatiwa kama chanzo cha mamlaka. Kwa taarifa muhimu, inashauriwa kutumia tafsiri ya kitaalamu ya binadamu. Hatutawajibika kwa maelewano mabaya au tafsiri zisizo sahihi zinazotokana na matumizi ya tafsiri hii.
\ No newline at end of file
diff --git a/translations/sw/2-js-basics/README.md b/translations/sw/2-js-basics/README.md
new file mode 100644
index 00000000..184d4a76
--- /dev/null
+++ b/translations/sw/2-js-basics/README.md
@@ -0,0 +1,28 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "cc9e70a2f096c67389c8acff1521fc27",
+  "translation_date": "2025-08-28T04:03:49+00:00",
+  "source_file": "2-js-basics/README.md",
+  "language_code": "sw"
+}
+-->
+# Utangulizi wa JavaScript
+
+JavaScript ni lugha ya wavuti. Katika masomo haya manne, utajifunza misingi yake.
+
+### Mada
+
+1. [Vigezo na Aina za Data](1-data-types/README.md)
+2. [Kazi na Mbinu](2-functions-methods/README.md)
+3. [Kufanya Maamuzi na JavaScript](3-making-decisions/README.md)
+4. [Mifuatano na Vitanzi](4-arrays-loops/README.md)
+
+### Shukrani
+
+Masomo haya yaliandikwa kwa ♥️ na [Jasmine Greenaway](https://twitter.com/paladique), [Christopher Harrison](https://twitter.com/geektrainer) na [Chris Noring](https://twitter.com/chris_noring)
+
+---
+
+**Kanusho**:  
+Hati hii imetafsiriwa kwa kutumia huduma ya kutafsiri ya AI [Co-op Translator](https://github.com/Azure/co-op-translator). Ingawa tunajitahidi kuhakikisha usahihi, tafadhali fahamu kuwa tafsiri za kiotomatiki zinaweza kuwa na makosa au kutokuwa sahihi. Hati ya asili katika lugha yake ya awali inapaswa kuzingatiwa kama chanzo cha mamlaka. Kwa taarifa muhimu, tafsiri ya kitaalamu ya binadamu inapendekezwa. Hatutawajibika kwa kutoelewana au tafsiri zisizo sahihi zinazotokana na matumizi ya tafsiri hii.
\ No newline at end of file
diff --git a/translations/sw/3-terrarium/1-intro-to-html/README.md b/translations/sw/3-terrarium/1-intro-to-html/README.md
new file mode 100644
index 00000000..753a53e2
--- /dev/null
+++ b/translations/sw/3-terrarium/1-intro-to-html/README.md
@@ -0,0 +1,249 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "46a0639e719b9cf1dfd062aa24cad639",
+  "translation_date": "2025-08-28T04:13:21+00:00",
+  "source_file": "3-terrarium/1-intro-to-html/README.md",
+  "language_code": "sw"
+}
+-->
+# Mradi wa Terrarium Sehemu ya 1: Utangulizi wa HTML
+
+![Utangulizi wa HTML](../../../../translated_images/webdev101-html.4389c2067af68e98280c1bde52b6c6269f399eaae3659b7c846018d8a7b0bbd9.sw.png)
+> Sketchnote na [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Maswali ya Awali ya Somo
+
+[Maswali ya awali ya somo](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/15)
+
+> Tazama video
+
+> 
+> [![Video ya misingi ya Git na GitHub](https://img.youtube.com/vi/1TvxJKBzhyQ/0.jpg)](https://www.youtube.com/watch?v=1TvxJKBzhyQ)
+
+### Utangulizi
+
+HTML, au HyperText Markup Language, ni 'mfupa' wa wavuti. Ikiwa CSS 'inapamba' HTML yako na JavaScript inaihuisha, basi HTML ni mwili wa programu yako ya wavuti. Sintaksia ya HTML hata inaakisi wazo hilo, kwani inajumuisha lebo za "head", "body", na "footer".
+
+Katika somo hili, tutatumia HTML kuweka mpangilio wa 'mfupa' wa kiolesura cha terrarium yetu ya mtandaoni. Itakuwa na kichwa na safu tatu: safu ya kulia na ya kushoto ambapo mimea inayoweza kuburutwa itawekwa, na eneo la katikati ambalo litakuwa terrarium yenye muonekano wa glasi. Mwishoni mwa somo hili, utaweza kuona mimea kwenye safu, lakini kiolesura kitaonekana kuwa cha ajabu kidogo; usijali, katika sehemu inayofuata utaongeza mitindo ya CSS kwenye kiolesura ili kiwe na muonekano mzuri.
+
+### Kazi
+
+Kwenye kompyuta yako, tengeneza folda inayoitwa 'terrarium' na ndani yake, faili inayoitwa 'index.html'. Unaweza kufanya hivi kwenye Visual Studio Code baada ya kutengeneza folda ya terrarium kwa kufungua dirisha jipya la VS Code, kubofya 'open folder', na kuvinjari hadi folda yako mpya. Bofya kitufe kidogo cha 'file' kwenye paneli ya Explorer na tengeneza faili mpya:
+
+![explorer katika VS Code](../../../../translated_images/vs-code-index.e2986cf919471eb984a0afef231380c8b132b000635105f2397bd2754d1b689c.sw.png)
+
+Au
+
+Tumia amri hizi kwenye git bash yako:
+* `mkdir terrarium`
+* `cd terrarium`
+* `touch index.html`
+* `code index.html` au `nano index.html`
+
+> Faili za index.html zinaonyesha kwa kivinjari kuwa ni faili chaguo-msingi katika folda; URL kama `https://anysite.com/test` inaweza kujengwa kwa kutumia muundo wa folda unaojumuisha folda inayoitwa `test` na `index.html` ndani yake; `index.html` haipaswi kuonekana kwenye URL.
+
+---
+
+## DocType na lebo za html
+
+Mstari wa kwanza wa faili ya HTML ni doctype yake. Ni jambo la kushangaza kidogo kwamba unahitaji kuwa na mstari huu juu kabisa ya faili, lakini unaiambia kivinjari cha zamani kwamba kivinjari kinahitaji kuonyesha ukurasa kwa hali ya kawaida, kufuata maelezo ya sasa ya html.
+
+> Kidokezo: katika VS Code, unaweza kuelekeza mshale juu ya lebo na kupata maelezo kuhusu matumizi yake kutoka kwa mwongozo wa Marejeleo ya MDN.
+
+Mstari wa pili unapaswa kuwa lebo ya kufungua `<html>`, ikifuatiwa mara moja na lebo yake ya kufunga `</html>`. Lebo hizi ni vipengele vya mizizi vya kiolesura chako.
+
+### Kazi
+
+Ongeza mistari hii juu ya faili yako ya `index.html`:
+
+```HTML
+<!DOCTYPE html>
+<html></html>
+```
+
+✅ Kuna hali tofauti ambazo zinaweza kuamuliwa kwa kuweka DocType na kamba ya maswali: [Quirks Mode na Standards Mode](https://developer.mozilla.org/docs/Web/HTML/Quirks_Mode_and_Standards_Mode). Hali hizi zilikuwa zikiunga mkono vivinjari vya zamani sana ambavyo havitumiki sana siku hizi (Netscape Navigator 4 na Internet Explorer 5). Unaweza kushikilia tamko la kawaida la doctype.
+
+---
+
+## 'Head' ya hati
+
+Eneo la 'head' la hati ya HTML linajumuisha taarifa muhimu kuhusu ukurasa wako wa wavuti, pia inajulikana kama [metadata](https://developer.mozilla.org/docs/Web/HTML/Element/meta). Katika kesi yetu, tunaiambia seva ya wavuti ambayo ukurasa huu utatumwa kuonyeshwa, mambo haya manne:
+
+-   kichwa cha ukurasa
+-   metadata ya ukurasa ikijumuisha:
+    -   'character set', inayosema kuhusu aina ya usimbaji wa herufi unaotumika kwenye ukurasa
+    -   taarifa za kivinjari, ikijumuisha `x-ua-compatible` ambayo inaonyesha kuwa kivinjari cha IE=edge kinaungwa mkono
+    -   taarifa kuhusu jinsi viewport inavyopaswa kujiendesha inapopakuliwa. Kuweka viewport kuwa na kiwango cha awali cha 1 kunadhibiti kiwango cha kuza wakati ukurasa unapopakuliwa kwa mara ya kwanza.
+
+### Kazi
+
+Ongeza kizuizi cha 'head' kwenye hati yako kati ya lebo za kufungua na kufunga `<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>
+```
+
+✅ Nini kitatokea ikiwa utaweka lebo ya meta ya viewport kama hii: `<meta name="viewport" content="width=600">`? Soma zaidi kuhusu [viewport](https://developer.mozilla.org/docs/Web/HTML/Viewport_meta_tag).
+
+---
+
+## 'Body' ya hati
+
+### Lebo za HTML
+
+Katika HTML, unaongeza lebo kwenye faili yako ya .html ili kuunda vipengele vya ukurasa wa wavuti. Kila lebo kwa kawaida ina lebo ya kufungua na kufunga, kama hii: `<p>hello</p>` kuonyesha aya. Tengeneza mwili wa kiolesura chako kwa kuongeza seti ya lebo za `<body>` ndani ya jozi la lebo za `<html>`; markup yako sasa inaonekana kama hii:
+
+### Kazi
+
+```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>
+```
+
+Sasa, unaweza kuanza kujenga ukurasa wako. Kwa kawaida, unatumia lebo za `<div>` kuunda vipengele tofauti kwenye ukurasa. Tutatengeneza mfululizo wa vipengele vya `<div>` ambavyo vitakuwa na picha.
+
+### Picha
+
+Lebo moja ya html ambayo haihitaji lebo ya kufunga ni `<img>`, kwa sababu ina kipengele cha `src` ambacho kina taarifa zote zinazohitajika na ukurasa kuonyesha kipengele.
+
+Tengeneza folda kwenye programu yako inayoitwa `images` na ndani yake, ongeza picha zote kwenye folda ya [source code](../../../../3-terrarium/solution/images); (kuna picha 14 za mimea).
+
+### Kazi
+
+Ongeza picha hizo za mimea kwenye safu mbili kati ya lebo za `<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>
+```
+
+> Kumbuka: Spans vs. Divs. Divs zinachukuliwa kuwa vipengele vya 'block', na Spans ni 'inline'. Nini kitatokea ikiwa utabadilisha divs hizi kuwa spans?
+
+Kwa markup hii, mimea sasa inaonekana kwenye skrini. Inaonekana vibaya, kwa sababu bado haijapambwa kwa kutumia CSS, na tutafanya hivyo katika somo linalofuata.
+
+Kila picha ina maandishi mbadala ambayo yataonekana hata kama huwezi kuona au kuonyesha picha. Hili ni sifa muhimu ya kujumuisha kwa upatikanaji. Jifunze zaidi kuhusu upatikanaji katika masomo ya baadaye; kwa sasa, kumbuka kuwa sifa ya alt inatoa taarifa mbadala kwa picha ikiwa mtumiaji kwa sababu fulani hawezi kuiona (kwa sababu ya muunganisho wa polepole, hitilafu katika sifa ya src, au ikiwa mtumiaji anatumia msomaji wa skrini).
+
+✅ Je, uliona kwamba kila picha ina lebo ya alt sawa? Je, hii ni mazoea mazuri? Kwa nini au kwa nini siyo? Je, unaweza kuboresha msimbo huu?
+
+---
+
+## Markup ya Semantiki
+
+Kwa ujumla, ni bora kutumia 'semantiki' yenye maana unapandika HTML. Hii inamaanisha nini? Inamaanisha kwamba unatumia lebo za HTML kuwakilisha aina ya data au mwingiliano ambazo zilitengenezwa kwa ajili yake. Kwa mfano, maandishi ya kichwa kikuu kwenye ukurasa yanapaswa kutumia lebo ya `<h1>`.
+
+Ongeza mstari ufuatao chini ya lebo yako ya kufungua `<body>`:
+
+```html
+<h1>My Terrarium</h1>
+```
+
+Kutumia markup ya semantiki kama kuwa na vichwa kuwa `<h1>` na orodha zisizo na mpangilio kuonyeshwa kama `<ul>` husaidia wasomaji wa skrini kuvinjari ukurasa. Kwa ujumla, vifungo vinapaswa kuandikwa kama `<button>` na orodha ziwe `<li>`. Ingawa inawezekana kutumia vipengele vya `<span>` vilivyopambwa maalum na vipangaji vya kubofya kuiga vifungo, ni bora kwa watumiaji wenye ulemavu kutumia teknolojia kuamua wapi kwenye ukurasa kifungo kinapatikana, na kuingiliana nacho, ikiwa kipengele kinaonekana kama kifungo. Kwa sababu hii, jaribu kutumia markup ya semantiki kadri iwezekanavyo.
+
+✅ Tazama msomaji wa skrini na [jinsi unavyoshirikiana na ukurasa wa wavuti](https://www.youtube.com/watch?v=OUDV1gqs9GA). Je, unaweza kuona kwa nini kuwa na markup isiyo ya semantiki inaweza kumkera mtumiaji?
+
+## Terrarium
+
+Sehemu ya mwisho ya kiolesura hiki inahusisha kuunda markup ambayo itapambwa ili kuunda terrarium.
+
+### Kazi:
+
+Ongeza markup hii juu ya lebo ya mwisho ya `</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>
+```
+
+✅ Ingawa umeongeza markup hii kwenye skrini, huoni chochote kinachoonyeshwa. Kwa nini?
+
+---
+
+## 🚀Changamoto
+
+Kuna lebo za 'zamani' za HTML ambazo bado ni za kufurahisha kucheza nazo, ingawa hupaswi kutumia lebo zilizopitwa na wakati kama [lebo hizi](https://developer.mozilla.org/docs/Web/HTML/Element#Obsolete_and_deprecated_elements) kwenye markup yako. Bado, unaweza kutumia lebo ya zamani ya `<marquee>` kufanya kichwa cha h1 kitembee kwa usawa? (ukifanya hivyo, usisahau kuiondoa baadaye)
+
+## Maswali ya Baada ya Somo
+
+[Maswali ya baada ya somo](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/16)
+
+## Mapitio na Kujifunza Mwenyewe
+
+HTML ni mfumo wa ujenzi wa 'kujaribiwa na kuthibitishwa' ambao umeisaidia wavuti kuwa kile ilivyo leo. Jifunze kidogo kuhusu historia yake kwa kusoma lebo za zamani na mpya. Je, unaweza kuelewa kwa nini lebo zingine zilipitwa na wakati na zingine ziliongezwa? Ni lebo gani zinaweza kuletwa siku zijazo?
+
+Jifunze zaidi kuhusu kujenga tovuti kwa wavuti na vifaa vya mkononi kwenye [Microsoft Learn](https://docs.microsoft.com/learn/modules/build-simple-website/?WT.mc_id=academic-77807-sagibbon).
+
+## Kazi
+
+[Zoezi la HTML: Tengeneza mfano wa blogu](assignment.md)
+
+---
+
+**Kanusho**:  
+Hati hii imetafsiriwa kwa kutumia huduma ya kutafsiri ya AI [Co-op Translator](https://github.com/Azure/co-op-translator). Ingawa tunajitahidi kuhakikisha usahihi, tafadhali fahamu kuwa tafsiri za kiotomatiki zinaweza kuwa na makosa au kutokuwa sahihi. Hati ya asili katika lugha yake ya awali inapaswa kuzingatiwa kama chanzo cha mamlaka. Kwa taarifa muhimu, tafsiri ya kitaalamu ya binadamu inapendekezwa. Hatutawajibika kwa kutoelewana au tafsiri zisizo sahihi zinazotokana na matumizi ya tafsiri hii.
\ No newline at end of file
diff --git a/translations/sw/3-terrarium/1-intro-to-html/assignment.md b/translations/sw/3-terrarium/1-intro-to-html/assignment.md
new file mode 100644
index 00000000..8859c38a
--- /dev/null
+++ b/translations/sw/3-terrarium/1-intro-to-html/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "970776c81401c9aacb34f365edac6b53",
+  "translation_date": "2025-08-28T04:14:57+00:00",
+  "source_file": "3-terrarium/1-intro-to-html/assignment.md",
+  "language_code": "sw"
+}
+-->
+# Jifunze HTML: Tengeneza muundo wa blogu
+
+## Maelekezo
+
+Fikiria unasanifu au unasanifu upya tovuti yako binafsi. Tengeneza muundo wa kielelezo wa tovuti yako, kisha andika alama za HTML ambazo ungetumia kujenga vipengele mbalimbali vya tovuti hiyo. Unaweza kufanya hivi kwenye karatasi na kuichanganua, au kutumia programu unayoipenda, hakikisha tu unaandika alama za HTML kwa mkono.
+
+## Rubric
+
+| Vigezo   | Bora Zaidi                                                                        | Inayokubalika                                                                    | Inahitaji Kuboresha                                                              |
+| -------- | --------------------------------------------------------------------------------- | -------------------------------------------------------------------------------- | -------------------------------------------------------------------------------- |
+|          | Muundo wa blogu unaonyeshwa kwa picha na angalau vipengele 10 vya alama za HTML   | Muundo wa blogu unaonyeshwa kwa picha na takriban vipengele 5 vya alama za HTML | Muundo wa blogu unaonyeshwa kwa picha na si zaidi ya vipengele 3 vya alama za HTML |
+
+---
+
+**Kanusho**:  
+Hati hii imetafsiriwa kwa kutumia huduma ya kutafsiri ya AI [Co-op Translator](https://github.com/Azure/co-op-translator). Ingawa tunajitahidi kuhakikisha usahihi, tafadhali fahamu kuwa tafsiri za kiotomatiki zinaweza kuwa na makosa au kutokuwa sahihi. Hati ya asili katika lugha yake ya awali inapaswa kuzingatiwa kama chanzo cha mamlaka. Kwa taarifa muhimu, tafsiri ya kitaalamu ya binadamu inapendekezwa. Hatutawajibika kwa kutoelewana au tafsiri zisizo sahihi zinazotokana na matumizi ya tafsiri hii.
\ No newline at end of file
diff --git a/translations/sw/3-terrarium/2-intro-to-css/README.md b/translations/sw/3-terrarium/2-intro-to-css/README.md
new file mode 100644
index 00000000..a4d3c31e
--- /dev/null
+++ b/translations/sw/3-terrarium/2-intro-to-css/README.md
@@ -0,0 +1,284 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "e375c2aeb94e2407f2667633d39580bd",
+  "translation_date": "2025-08-28T04:15:50+00:00",
+  "source_file": "3-terrarium/2-intro-to-css/README.md",
+  "language_code": "sw"
+}
+-->
+# Mradi wa Terrarium Sehemu ya 2: Utangulizi wa CSS
+
+![Utangulizi wa CSS](../../../../translated_images/webdev101-css.3f7af5991bf53a200d79e7257e5e450408d8ea97f5b531d31b2e3976317338ee.sw.png)
+> Sketchnote na [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Maswali ya Kabla ya Somo
+
+[Maswali ya kabla ya somo](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/17)
+
+### Utangulizi
+
+CSS, au Cascading Style Sheets, hutatua tatizo muhimu katika ukuzaji wa wavuti: jinsi ya kufanya tovuti yako ionekane vizuri. Kuweka mitindo kwenye programu zako hufanya ziwe rahisi kutumia na kuvutia zaidi; unaweza pia kutumia CSS kuunda Muundo wa Wavuti Unaotikia (Responsive Web Design - RWD) - kuruhusu programu zako zionekane vizuri bila kujali ukubwa wa skrini zinapoonyeshwa. CSS si tu kuhusu kufanya programu yako ionekane vizuri; vipengele vyake vinajumuisha michoro na mabadiliko ambayo yanaweza kuwezesha mwingiliano wa hali ya juu kwa programu zako. Kikundi cha Kazi cha CSS husaidia kudumisha vipengele vya sasa vya CSS; unaweza kufuatilia kazi yao kwenye [tovuti ya World Wide Web Consortium](https://www.w3.org/Style/CSS/members).
+
+> Kumbuka, CSS ni lugha inayobadilika, kama kila kitu kwenye wavuti, na si vivinjari vyote vinavyounga mkono vipengele vipya vya vipimo. Daima hakikisha utekelezaji wako kwa kushauriana na [CanIUse.com](https://caniuse.com).
+
+Katika somo hili, tutaongeza mitindo kwenye terrarium yetu ya mtandaoni na kujifunza zaidi kuhusu dhana kadhaa za CSS: mfululizo, urithi, na matumizi ya vichagua, upangaji, na kutumia CSS kujenga miundo. Katika mchakato huo tutapanga terrarium na kuunda terrarium yenyewe.
+
+### Mahitaji ya Awali
+
+Unapaswa kuwa na HTML ya terrarium yako tayari kujengewa mitindo.
+
+> Tazama video
+
+> 
+> [![Video ya misingi ya Git na GitHub](https://img.youtube.com/vi/6yIdOIV9p1I/0.jpg)](https://www.youtube.com/watch?v=6yIdOIV9p1I)
+
+### Kazi
+
+Katika folda yako ya terrarium, unda faili mpya inayoitwa `style.css`. Ingiza faili hiyo katika sehemu ya `<head>`:
+
+```html
+<link rel="stylesheet" href="./style.css" />
+```
+
+---
+
+## Mfululizo
+
+Cascading Style Sheets zinajumuisha wazo kwamba mitindo 'inafuatana' kwa namna kwamba matumizi ya mtindo yanaongozwa na kipaumbele chake. Mitindo iliyowekwa na mwandishi wa tovuti ina kipaumbele juu ya ile iliyowekwa na kivinjari. Mitindo iliyowekwa 'inline' ina kipaumbele juu ya ile iliyowekwa katika karatasi ya mitindo ya nje.
+
+### Kazi
+
+Ongeza mtindo wa inline "color: red" kwenye tagi yako ya `<h1>`:
+
+```HTML
+<h1 style="color: red">My Terrarium</h1>
+```
+
+Kisha, ongeza msimbo ufuatao kwenye faili yako ya `style.css`:
+
+```CSS
+h1 {
+ color: blue;
+}
+```
+
+✅ Ni rangi gani inaonyeshwa kwenye programu yako ya wavuti? Kwa nini? Je, unaweza kupata njia ya kuondoa mitindo? Ni lini ungependa kufanya hivi, au kwa nini usifanye?
+
+---
+
+## Urithi
+
+Mitindo inarithiwa kutoka kwa mtindo wa babu kwenda kwa mzao, kwa namna kwamba vipengele vilivyowekwa ndani vinarithii mitindo ya wazazi wao.
+
+### Kazi
+
+Weka fonti ya mwili kwa fonti fulani, na angalia fonti ya kipengele kilichowekwa ndani:
+
+```CSS
+body {
+	font-family: helvetica, arial, sans-serif;
+}
+```
+
+Fungua koni ya kivinjari chako kwenye kichupo cha 'Elements' na angalia fonti ya H1. Inarithii fonti yake kutoka kwa mwili, kama ilivyoelezwa ndani ya kivinjari:
+
+![fonti iliyorithiwa](../../../../translated_images/1.cc07a5cbe114ad1d4728c35134584ac1b87db688eff83cf75985cf31fe0ed95c.sw.png)
+
+✅ Je, unaweza kufanya mtindo wa ndani urithi mali tofauti?
+
+---
+
+## Vichagua vya CSS
+
+### Tagi
+
+Hadi sasa, faili yako ya `style.css` ina tagi chache tu zilizowekwa mitindo, na programu inaonekana ya ajabu:
+
+```CSS
+body {
+	font-family: helvetica, arial, sans-serif;
+}
+
+h1 {
+	color: #3a241d;
+	text-align: center;
+}
+```
+
+Njia hii ya kuweka mtindo kwenye tagi inakupa udhibiti wa vipengele vya kipekee, lakini unahitaji kudhibiti mitindo ya mimea mingi katika terrarium yako. Ili kufanya hivyo, unahitaji kutumia vichagua vya CSS.
+
+### Ids
+
+Ongeza mtindo wa kupanga vyombo vya kushoto na kulia. Kwa kuwa kuna chombo kimoja tu cha kushoto na kimoja cha kulia, vimepewa ids katika markup. Ili kuweka mitindo yao, tumia `#`:
+
+```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;
+}
+```
+
+Hapa, umeweka vyombo hivi kwa upangaji wa kabisa kwenye upande wa kushoto na kulia wa skrini, na umetumia asilimia kwa upana wao ili viweze kupanuka kwa skrini ndogo za simu.
+
+✅ Msimbo huu unarudiwa sana, hivyo si "DRY" (Don't Repeat Yourself); je, unaweza kupata njia bora ya kuweka mitindo ya ids hizi, labda kwa id na darasa? Ungehitaji kubadilisha markup na kurekebisha CSS:
+
+```html
+<div id="left-container" class="container"></div>
+```
+
+### Madarasa
+
+Katika mfano hapo juu, uliweka mitindo kwa vipengele viwili vya kipekee kwenye skrini. Ikiwa unataka mitindo itumike kwa vipengele vingi kwenye skrini, unaweza kutumia madarasa ya CSS. Fanya hivi kupanga mimea katika vyombo vya kushoto na kulia.
+
+Angalia kwamba kila mmea katika markup ya HTML una mchanganyiko wa ids na madarasa. Ids hapa zinatumiwa na JavaScript ambayo utaongeza baadaye kudhibiti uwekaji wa mimea ya terrarium. Madarasa, hata hivyo, yanatoa mitindo fulani kwa mimea yote.
+
+```html
+<div class="plant-holder">
+	<img class="plant" alt="plant" id="plant1" src="./images/plant1.png" />
+</div>
+```
+
+Ongeza yafuatayo kwenye faili yako ya `style.css`:
+
+```CSS
+.plant-holder {
+	position: relative;
+	height: 13%;
+	left: -10px;
+}
+
+.plant {
+	position: absolute;
+	max-width: 150%;
+	max-height: 150%;
+	z-index: 2;
+}
+```
+
+Jambo la muhimu katika kipande hiki ni mchanganyiko wa upangaji wa jamaa na kabisa, ambao tutajadili katika sehemu inayofuata. Angalia jinsi urefu unavyoshughulikiwa kwa asilimia:
+
+Umeweka urefu wa mmiliki wa mmea kuwa 13%, namba nzuri kuhakikisha kwamba mimea yote inaonyeshwa katika kila chombo cha wima bila hitaji la kusogeza.
+
+Umeweka mmiliki wa mmea kusogea kushoto ili kuruhusu mimea kuwa katikati zaidi ndani ya chombo chao. Picha zina kiasi kikubwa cha mandharinyuma ya uwazi ili kufanya ziweze kuburuzwa zaidi, hivyo zinahitaji kusukumwa kushoto ili zitoshe vizuri kwenye skrini.
+
+Kisha, mmea wenyewe umepewa upana wa juu wa 150%. Hii inaruhusu kupungua kadri kivinjari kinavyopungua. Jaribu kupunguza kivinjari chako; mimea inabaki katika vyombo vyake lakini inapungua ili kutoshea.
+
+Jambo lingine la muhimu ni matumizi ya z-index, ambayo inadhibiti urefu wa jamaa wa kipengele (ili mimea ikae juu ya chombo na ionekane kuwa ndani ya terrarium).
+
+✅ Kwa nini unahitaji mmiliki wa mmea na kichagua cha mmea cha CSS?
+
+## Upangaji wa CSS
+
+Kuchanganya mali za nafasi (kuna nafasi za static, relative, fixed, absolute, na sticky) kunaweza kuwa changamoto kidogo, lakini ukifanywa vizuri hukupa udhibiti mzuri wa vipengele kwenye kurasa zako.
+
+Vipengele vilivyowekwa kabisa vinapangwa kulingana na babu zao walio na nafasi, na ikiwa hakuna, vinapangwa kulingana na mwili wa hati.
+
+Vipengele vilivyowekwa jamaa vinapangwa kulingana na maelekezo ya CSS ya kurekebisha nafasi yake kutoka nafasi yake ya awali.
+
+Katika mfano wetu, `plant-holder` ni kipengele kilichowekwa jamaa ambacho kimepangwa ndani ya chombo kilichowekwa kabisa. Tabia inayotokana ni kwamba vyombo vya upande vimewekwa kushoto na kulia, na `plant-holder` imewekwa ndani, ikijirekebisha ndani ya vyombo vya upande, ikitoa nafasi kwa mimea kuwekwa katika safu ya wima.
+
+> `plant` yenyewe pia ina nafasi ya kabisa, muhimu kwa kuifanya iweze kuburuzwa, kama utakavyogundua katika somo lijalo.
+
+✅ Jaribu kubadilisha aina za nafasi za vyombo vya upande na `plant-holder`. Nini kinatokea?
+
+## Miundo ya CSS
+
+Sasa utatumia kile ulichojifunza kujenga terrarium yenyewe, yote kwa kutumia CSS!
+
+Kwanza, weka mitindo kwa watoto wa div ya `.terrarium` kama mstatili wa mviringo kwa kutumia 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;
+}
+```
+
+Angalia matumizi ya asilimia hapa. Ukipunguza kivinjari chako, unaweza kuona jinsi jar inavyopungua pia. Pia angalia upana na urefu wa asilimia kwa vipengele vya jar na jinsi kila kipengele kinavyowekwa kabisa katikati, kikiwa kimewekwa chini ya viewport.
+
+Tunatumia `rem` kwa border-radius, kipimo kinachohusiana na fonti. Soma zaidi kuhusu aina hii ya kipimo cha jamaa katika [vipimo vya CSS](https://www.w3.org/TR/css-values-3/#font-relative-lengths).
+
+✅ Jaribu kubadilisha rangi za jar na uwazi dhidi ya zile za udongo. Nini kinatokea? Kwa nini?
+
+---
+
+## 🚀Changamoto
+
+Ongeza 'bubble' ya mwangaza kwenye eneo la chini kushoto la jar ili ionekane kama kioo. Utakuwa unaweka mitindo kwa `.jar-glossy-long` na `.jar-glossy-short` ili ionekane kama mwangaza unaoakisiwa. Hivi ndivyo itakavyokuwa:
+
+![terrarium iliyokamilika](../../../../translated_images/terrarium-final.2f07047ffc597d0a06b06cab28a77801a10dd12fdb6c7fc630e9c40665491c53.sw.png)
+
+Ili kukamilisha maswali ya baada ya somo, pitia moduli hii ya Kujifunza: [Weka mitindo kwa programu yako ya HTML kwa CSS](https://docs.microsoft.com/learn/modules/build-simple-website/4-css-basics/?WT.mc_id=academic-77807-sagibbon)
+
+## Maswali ya Baada ya Somo
+
+[Maswali ya baada ya somo](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/18)
+
+## Mapitio na Kujisomea
+
+CSS inaonekana rahisi, lakini kuna changamoto nyingi wakati wa kujaribu kuweka mitindo ya programu kikamilifu kwa vivinjari vyote na ukubwa wote wa skrini. CSS-Grid na Flexbox ni zana ambazo zimetengenezwa kufanya kazi iwe na muundo zaidi na ya kuaminika. Jifunze kuhusu zana hizi kwa kucheza [Flexbox Froggy](https://flexboxfroggy.com/) na [Grid Garden](https://codepip.com/games/grid-garden/).
+
+## Kazi
+
+[Urekebishaji wa CSS](assignment.md)
+
+---
+
+**Kanusho**:  
+Hati hii imetafsiriwa kwa kutumia huduma ya kutafsiri ya AI [Co-op Translator](https://github.com/Azure/co-op-translator). Ingawa tunajitahidi kuhakikisha usahihi, tafadhali fahamu kuwa tafsiri za kiotomatiki zinaweza kuwa na makosa au kutokuwa sahihi. Hati ya asili katika lugha yake ya awali inapaswa kuzingatiwa kama chanzo cha mamlaka. Kwa taarifa muhimu, tafsiri ya kitaalamu ya binadamu inapendekezwa. Hatutawajibika kwa kutoelewana au tafsiri zisizo sahihi zinazotokana na matumizi ya tafsiri hii.
\ No newline at end of file
diff --git a/translations/sw/3-terrarium/2-intro-to-css/assignment.md b/translations/sw/3-terrarium/2-intro-to-css/assignment.md
new file mode 100644
index 00000000..fc270b5a
--- /dev/null
+++ b/translations/sw/3-terrarium/2-intro-to-css/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "9d4d75af51aaccfe9af778f792c62919",
+  "translation_date": "2025-08-28T04:17:33+00:00",
+  "source_file": "3-terrarium/2-intro-to-css/assignment.md",
+  "language_code": "sw"
+}
+-->
+# Urekebishaji wa CSS
+
+## Maelekezo
+
+Badilisha muonekano wa terrarium ukitumia ama Flexbox au CSS Grid, na piga picha za skrini kuonyesha kuwa umeijaribu kwenye vivinjari kadhaa. Huenda ukahitaji kubadilisha markup, kwa hivyo tengeneza toleo jipya la programu na sanaa ikiwa tayari kwa urekebishaji wako. Usijali kuhusu kufanya vipengele viweze kuburuzwa; kwa sasa rekebisha tu HTML na CSS.
+
+## Rubric
+
+| Vigezo   | Bora Kabisa                                                      | Inaridhisha                  | Inahitaji Kuboresha                  |
+| -------- | ---------------------------------------------------------------- | ---------------------------- | ------------------------------------ |
+|          | Wasilisha terrarium iliyorekebishwa kabisa ukitumia Flexbox au CSS Grid | Rekebisha baadhi ya vipengele | Shindwa kurekebisha terrarium kabisa |
+
+---
+
+**Kanusho**:  
+Hati hii imetafsiriwa kwa kutumia huduma ya kutafsiri ya AI [Co-op Translator](https://github.com/Azure/co-op-translator). Ingawa tunajitahidi kuhakikisha usahihi, tafadhali fahamu kuwa tafsiri za kiotomatiki zinaweza kuwa na makosa au kutokuwa sahihi. Hati ya asili katika lugha yake ya awali inapaswa kuzingatiwa kama chanzo cha mamlaka. Kwa taarifa muhimu, tafsiri ya kitaalamu ya binadamu inapendekezwa. Hatutawajibika kwa kutoelewana au tafsiri zisizo sahihi zinazotokana na matumizi ya tafsiri hii.
\ No newline at end of file
diff --git a/translations/sw/3-terrarium/3-intro-to-DOM-and-closures/README.md b/translations/sw/3-terrarium/3-intro-to-DOM-and-closures/README.md
new file mode 100644
index 00000000..c6daa4fb
--- /dev/null
+++ b/translations/sw/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-28T04:17:56+00:00",
+  "source_file": "3-terrarium/3-intro-to-DOM-and-closures/README.md",
+  "language_code": "sw"
+}
+-->
+# Mradi wa Terrarium Sehemu ya 3: Udhibiti wa DOM na Closure
+
+![DOM na closure](../../../../translated_images/webdev101-js.10280393044d7eaaec7e847574946add7ddae6be2b2194567d848b61d849334a.sw.png)
+> Sketchnote na [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Jaribio la Kabla ya Somo
+
+[Jaribio la kabla ya somo](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/19)
+
+### Utangulizi
+
+Kudhibiti DOM, au "Document Object Model", ni kipengele muhimu cha ukuzaji wa wavuti. Kulingana na [MDN](https://developer.mozilla.org/docs/Web/API/Document_Object_Model/Introduction), "Document Object Model (DOM) ni uwakilishi wa data wa vitu vinavyounda muundo na maudhui ya hati kwenye wavuti." Changamoto zinazohusiana na udhibiti wa DOM kwenye wavuti mara nyingi zimekuwa sababu ya kutumia mifumo ya JavaScript badala ya JavaScript ya kawaida ili kudhibiti DOM, lakini tutaweza kufanya hivyo sisi wenyewe!
+
+Zaidi ya hayo, somo hili litatambulisha wazo la [closure ya JavaScript](https://developer.mozilla.org/docs/Web/JavaScript/Closures), ambayo unaweza kufikiria kama kazi iliyofungwa na kazi nyingine ili kazi ya ndani iweze kufikia upeo wa kazi ya nje.
+
+> Closure za JavaScript ni mada pana na ngumu. Somo hili linagusia wazo la msingi kabisa kwamba katika msimbo wa terrarium hii, utapata closure: kazi ya ndani na kazi ya nje iliyojengwa kwa njia inayoruhusu kazi ya ndani kufikia upeo wa kazi ya nje. Kwa maelezo zaidi kuhusu jinsi hii inavyofanya kazi, tafadhali tembelea [nyaraka za kina](https://developer.mozilla.org/docs/Web/JavaScript/Closures).
+
+Tutatumia closure kudhibiti DOM.
+
+Fikiria DOM kama mti, unaowakilisha njia zote ambazo hati ya ukurasa wa wavuti inaweza kudhibitiwa. API mbalimbali (Application Program Interfaces) zimeandikwa ili kuruhusu programu, kwa kutumia lugha yao ya programu wanayoipenda, kufikia DOM na kuhariri, kubadilisha, kupanga upya, na kuisimamia kwa njia nyingine.
+
+![Uwakilishi wa mti wa DOM](../../../../translated_images/dom-tree.7daf0e763cbbba9273f9a66fe04c98276d7d23932309b195cb273a9cf1819b42.sw.png)
+
+> Uwakilishi wa DOM na alama za HTML zinazorejelea. Kutoka kwa [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
+
+Katika somo hili, tutakamilisha mradi wetu wa terrarium wa mwingiliano kwa kuunda JavaScript itakayomruhusu mtumiaji kudhibiti mimea kwenye ukurasa.
+
+### Mahitaji ya Awali
+
+Unapaswa kuwa na HTML na CSS ya terrarium yako tayari imejengwa. Kufikia mwisho wa somo hili utaweza kuhamisha mimea ndani na nje ya terrarium kwa kuiburuta.
+
+### Kazi
+
+Katika folda yako ya terrarium, tengeneza faili mpya inayoitwa `script.js`. Ingiza faili hiyo katika sehemu ya `<head>`:
+
+```html
+	<script src="./script.js" defer></script>
+```
+
+> Kumbuka: tumia `defer` unapojumuisha faili ya nje ya JavaScript kwenye faili ya html ili kuruhusu JavaScript kutekelezwa tu baada ya faili ya HTML kupakiwa kikamilifu. Unaweza pia kutumia sifa ya `async`, ambayo inaruhusu script kutekelezwa wakati faili ya HTML inachambuliwa, lakini katika kesi yetu, ni muhimu kuwa na vipengele vya HTML vinavyopatikana kikamilifu kwa kuburuta kabla ya kuruhusu script ya kuburuta kutekelezwa.
+---
+
+## Vipengele vya DOM
+
+Jambo la kwanza unalohitaji kufanya ni kuunda marejeleo kwa vipengele unavyotaka kudhibiti katika DOM. Katika kesi yetu, ni mimea 14 ambayo kwa sasa inasubiri kwenye upau wa pembeni.
+
+### Kazi
+
+```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'));
+```
+
+Nini kinaendelea hapa? Unarejelea hati na kutafuta kupitia DOM yake ili kupata kipengele chenye Id fulani. Kumbuka katika somo la kwanza la HTML kwamba ulitoa Id za kipekee kwa kila picha ya mmea (`id="plant1"`)? Sasa utatumia juhudi hiyo. Baada ya kutambua kila kipengele, unapitisha kipengele hicho kwa kazi inayoitwa `dragElement` ambayo utajenga muda mfupi baadaye. Hivyo, kipengele katika HTML sasa kinaweza kuburudishwa, au kitakuwa hivi karibuni.
+
+✅ Kwa nini tunarejelea vipengele kwa Id? Kwa nini si kwa darasa la CSS? Unaweza kurejelea somo la awali la CSS kujibu swali hili.
+
+---
+
+## Closure
+
+Sasa uko tayari kuunda closure ya `dragElement`, ambayo ni kazi ya nje inayofunga kazi ya ndani au kazi (katika kesi yetu, tutakuwa na tatu).
+
+Closure ni muhimu wakati kazi moja au zaidi zinahitaji kufikia upeo wa kazi ya nje. Hapa kuna mfano:
+
+```javascript
+function displayCandy(){
+	let candy = ['jellybeans'];
+	function addCandy(candyType) {
+		candy.push(candyType)
+	}
+	addCandy('gumdrops');
+}
+displayCandy();
+console.log(candy)
+```
+
+Katika mfano huu, kazi ya `displayCandy` inazunguka kazi inayosukuma aina mpya ya pipi kwenye safu ambayo tayari ipo kwenye kazi. Ikiwa ungeendesha msimbo huu, safu ya `candy` ingekuwa haijafafanuliwa, kwa kuwa ni kigezo cha ndani (cha ndani kwa closure).
+
+✅ Unawezaje kufanya safu ya `candy` ipatikane? Jaribu kuihamisha nje ya closure. Kwa njia hii, safu inakuwa ya kimataifa, badala ya kubaki tu inapatikana kwa upeo wa ndani wa closure.
+
+### Kazi
+
+Chini ya matamko ya vipengele katika `script.js`, tengeneza kazi:
+
+```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` hupata kitu chake cha `terrariumElement` kutoka kwa matamko juu ya script. Kisha, unaweka nafasi za ndani kwa `0` kwa kipengele kilichopitishwa kwenye kazi. Hizi ni vigezo vya ndani ambavyo vitadhibitiwa kwa kila kipengele unapoongeza utendaji wa kuburuta na kuacha ndani ya closure kwa kila kipengele. Terrarium itajazwa na vipengele hivi vilivyoburudishwa, kwa hivyo programu inahitaji kufuatilia mahali vinapowekwa.
+
+Zaidi ya hayo, kipengele cha terrarium kinachopitishwa kwa kazi hii kinapewa tukio la `pointerdown`, ambalo ni sehemu ya [web APIs](https://developer.mozilla.org/docs/Web/API) iliyoundwa kusaidia na usimamizi wa DOM. `onpointerdown` hufanyika wakati kitufe kinapobonyezwa, au katika kesi yetu, kipengele kinachoweza kuburudishwa kinapoguswa. Mdhibiti wa tukio hili hufanya kazi kwenye [vivinjari vya wavuti na simu](https://caniuse.com/?search=onpointerdown), na baadhi ya tofauti.
+
+✅ Mdhibiti wa tukio [`onclick`](https://developer.mozilla.org/docs/Web/API/GlobalEventHandlers/onclick) una msaada mkubwa zaidi wa kivinjari; kwa nini usingetumia hapa? Fikiria aina halisi ya mwingiliano wa skrini unayojaribu kuunda hapa.
+
+---
+
+## Kazi ya Pointerdrag
+
+`terrariumElement` iko tayari kuburudishwa; wakati tukio la `onpointerdown` linapofanyika, kazi ya `pointerDrag` inaitwa. Ongeza kazi hiyo chini ya mstari huu: `terrariumElement.onpointerdown = pointerDrag;`:
+
+### Kazi 
+
+```javascript
+function pointerDrag(e) {
+	e.preventDefault();
+	console.log(e);
+	pos3 = e.clientX;
+	pos4 = e.clientY;
+}
+```
+
+Mambo kadhaa hufanyika. Kwanza, unazuia matukio ya msingi ambayo kawaida hutokea kwenye pointerdown kwa kutumia `e.preventDefault();`. Kwa njia hii unakuwa na udhibiti zaidi juu ya tabia ya kiolesura.
+
+> Rudi kwenye mstari huu unapomaliza kujenga faili ya script na ujaribu bila `e.preventDefault()` - nini kinatokea?
+
+Pili, fungua `index.html` kwenye dirisha la kivinjari, na ukague kiolesura. Unapobofya mmea, unaweza kuona jinsi tukio la 'e' linavyonaswa. Chunguza tukio ili kuona ni kiasi gani cha taarifa kinachokusanywa na tukio moja la pointerdown!  
+
+Kisha, angalia jinsi vigezo vya ndani `pos3` na `pos4` vinavyowekwa kwa e.clientX. Unaweza kupata maadili ya `e` kwenye kidirisha cha ukaguzi. Maadili haya yanakamata viwianishi vya x na y vya mmea wakati unapoibofya au kuigusa. Utahitaji udhibiti wa kina juu ya tabia ya mimea unapobofya na kuiburuta, kwa hivyo unafuatilia viwianishi vyake.
+
+✅ Je, inazidi kuwa wazi kwa nini programu hii yote imejengwa na closure moja kubwa? Ikiwa haikuwa hivyo, ungewezaje kudumisha upeo kwa kila moja ya mimea 14 inayoweza kuburudishwa?
+
+Kamilisha kazi ya awali kwa kuongeza udhibiti wa matukio mawili zaidi ya pointer chini ya `pos4 = e.clientY`:
+
+```html
+document.onpointermove = elementDrag;
+document.onpointerup = stopElementDrag;
+```
+Sasa unaonyesha kwamba unataka mmea uburudishwe pamoja na pointer unapouhamisha, na kwa ishara ya kuburuta kusimama unapochagua mmea. `onpointermove` na `onpointerup` zote ni sehemu ya API sawa na `onpointerdown`. Kiolesura sasa kitatoa makosa kwa kuwa bado hujafafanua kazi za `elementDrag` na `stopElementDrag`, kwa hivyo zijenge baadaye.
+
+## Kazi za elementDrag na stopElementDrag
+
+Utamaliza closure yako kwa kuongeza kazi mbili za ndani ambazo zitasimamia kinachotokea unapoburuta mmea na kusimamisha kuburuta. Tabia unayotaka ni kwamba unaweza kuburuta mmea wowote wakati wowote na kuuweka mahali popote kwenye skrini. Kiolesura hiki hakina maoni mengi (hakuna eneo la kuacha kwa mfano) ili kukuruhusu kubuni terrarium yako jinsi unavyotaka kwa kuongeza, kuondoa, na kupanga upya mimea.
+
+### Kazi
+
+Ongeza kazi ya `elementDrag` mara baada ya kufunga mabano ya `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';
+}
+```
+Katika kazi hii, unafanya mabadiliko mengi ya nafasi za awali 1-4 ulizoweka kama vigezo vya ndani katika kazi ya nje. Nini kinaendelea hapa?
+
+Unapoburuta, unabadilisha `pos1` kwa kuifanya iwe sawa na `pos3` (ambayo uliweka awali kama `e.clientX`) ukiondoa thamani ya sasa ya `e.clientX`. Unafanya operesheni sawa kwa `pos2`. Kisha, unarudisha upya `pos3` na `pos4` kwa viwianishi vipya vya X na Y vya kipengele. Unaweza kutazama mabadiliko haya kwenye console unapoburuta. Kisha, unadhibiti mtindo wa css wa mmea ili kuweka nafasi yake mpya kulingana na nafasi mpya za `pos1` na `pos2`, ukihesabu viwianishi vya juu na kushoto vya mmea kulingana na kulinganisha ofseti yake na nafasi hizi mpya.
+
+> `offsetTop` na `offsetLeft` ni mali za CSS zinazoweka nafasi ya kipengele kulingana na ile ya mzazi wake; mzazi wake unaweza kuwa kipengele chochote ambacho hakijawekwa kama `static`. 
+
+Hesabu hii yote ya nafasi inaruhusu wewe kurekebisha tabia ya terrarium na mimea yake.
+
+### Kazi 
+
+Kazi ya mwisho ya kukamilisha kiolesura ni kuongeza kazi ya `stopElementDrag` baada ya kufunga mabano ya `elementDrag`:
+
+```javascript
+function stopElementDrag() {
+	document.onpointerup = null;
+	document.onpointermove = null;
+}
+```
+
+Kazi hii ndogo inarudisha matukio ya `onpointerup` na `onpointermove` kuwa tupu ili uweze kuanzisha upya maendeleo ya mmea wako kwa kuanza kuiburuta tena, au kuanza kuburuta mmea mpya.
+
+✅ Nini kinatokea ikiwa hautoi matukio haya kuwa tupu?
+
+Sasa umekamilisha mradi wako!
+
+🥇Hongera! Umehitimisha terrarium yako nzuri. ![terrarium iliyokamilika](../../../../translated_images/terrarium-final.0920f16e87c13a84cd2b553a5af9a3ad1cffbd41fbf8ce715d9e9c43809a5e2c.sw.png)
+
+---
+
+## 🚀Changamoto
+
+Ongeza mdhibiti mpya wa tukio kwenye closure yako ili kufanya jambo zaidi kwa mimea; kwa mfano, bofya mara mbili mmea ili kuleta mbele. Kuwa mbunifu!
+
+## Jaribio la Baada ya Somo
+
+[Jaribio la baada ya somo](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/20)
+
+## Mapitio na Kujisomea
+
+Ingawa kuburuta vipengele kwenye skrini kunaonekana rahisi, kuna njia nyingi za kufanya hivi na mitego mingi, kulingana na athari unayotafuta. Kwa kweli, kuna [API ya kuburuta na kuacha](https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_API) ambayo unaweza kujaribu. Hatukutumia API hii katika moduli hii kwa sababu athari tuliyotaka ilikuwa tofauti kidogo, lakini jaribu API hii kwenye mradi wako mwenyewe na uone unachoweza kufanikisha.
+
+Pata maelezo zaidi kuhusu matukio ya pointer kwenye [nyaraka za W3C](https://www.w3.org/TR/pointerevents1/) na kwenye [nyaraka za wavuti za MDN](https://developer.mozilla.org/docs/Web/API/Pointer_events).
+
+Daima angalia uwezo wa kivinjari kwa kutumia [CanIUse.com](https://caniuse.com/).
+
+## Kazi
+
+[Fanya kazi zaidi na DOM](assignment.md)
+
+---
+
+**Kanusho**:  
+Hati hii imetafsiriwa kwa kutumia huduma ya kutafsiri ya AI [Co-op Translator](https://github.com/Azure/co-op-translator). Ingawa tunajitahidi kuhakikisha usahihi, tafadhali fahamu kuwa tafsiri za kiotomatiki zinaweza kuwa na makosa au kutokuwa sahihi. Hati ya asili katika lugha yake ya awali inapaswa kuzingatiwa kama chanzo cha mamlaka. Kwa taarifa muhimu, tafsiri ya kitaalamu ya binadamu inapendekezwa. Hatutawajibika kwa kutoelewana au tafsiri zisizo sahihi zinazotokana na matumizi ya tafsiri hii.
\ No newline at end of file
diff --git a/translations/sw/3-terrarium/3-intro-to-DOM-and-closures/assignment.md b/translations/sw/3-terrarium/3-intro-to-DOM-and-closures/assignment.md
new file mode 100644
index 00000000..ed97b5d5
--- /dev/null
+++ b/translations/sw/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-28T04:20:58+00:00",
+  "source_file": "3-terrarium/3-intro-to-DOM-and-closures/assignment.md",
+  "language_code": "sw"
+}
+-->
+# Fanya kazi zaidi na DOM
+
+## Maelekezo
+
+Fanya utafiti zaidi kuhusu DOM kwa 'kuchukua' kipengele cha DOM. Tembelea [orodha ya interfaces za DOM](https://developer.mozilla.org/docs/Web/API/Document_Object_Model) kwenye MDN na chagua moja. Tafuta jinsi inavyotumika kwenye tovuti mtandaoni, kisha andika maelezo ya jinsi inavyotumika.
+
+## Rubric
+
+| Vigezo   | Bora kabisa                                | Inayotosheleza                                | Inahitaji Uboreshaji    |
+| -------- | ------------------------------------------ | --------------------------------------------- | ----------------------- |
+|          | Maelezo ya kifungu yamewasilishwa, na mfano | Maelezo ya kifungu yamewasilishwa, bila mfano | Hakuna maelezo yaliyotolewa |
+
+---
+
+**Kanusho**:  
+Hati hii imetafsiriwa kwa kutumia huduma ya tafsiri ya AI [Co-op Translator](https://github.com/Azure/co-op-translator). Ingawa tunajitahidi kuhakikisha usahihi, tafsiri za kiotomatiki zinaweza kuwa na makosa au kutokuwa sahihi. Hati ya asili katika lugha yake ya awali inapaswa kuchukuliwa kama chanzo cha mamlaka. Kwa taarifa muhimu, tafsiri ya kitaalamu ya binadamu inapendekezwa. Hatutawajibika kwa kutoelewana au tafsiri zisizo sahihi zinazotokana na matumizi ya tafsiri hii.
\ No newline at end of file
diff --git a/translations/sw/3-terrarium/README.md b/translations/sw/3-terrarium/README.md
new file mode 100644
index 00000000..fcb17643
--- /dev/null
+++ b/translations/sw/3-terrarium/README.md
@@ -0,0 +1,45 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "7965cd2bc5dc92ad888dc4c6ab2ab70a",
+  "translation_date": "2025-08-28T04:12:52+00:00",
+  "source_file": "3-terrarium/README.md",
+  "language_code": "sw"
+}
+-->
+# Terrarium Yangu: Mradi wa kujifunza kuhusu HTML, CSS, na udhibiti wa DOM kwa kutumia JavaScript 🌵🌱
+
+Mradi mdogo wa kuburuta na kudondosha. Kwa kutumia HTML, JS, na CSS kidogo, utaweza kujenga kiolesura cha wavuti, kukipamba, na hata kuongeza mwingiliano mbalimbali wa chaguo lako.
+
+![terrarium yangu](../../../translated_images/screenshot_gray.0c796099a1f9f25e40aa55ead81f268434c00af30d7092490759945eda63067d.sw.png)
+
+# Masomo
+
+1. [Utangulizi wa HTML](./1-intro-to-html/README.md)
+2. [Utangulizi wa CSS](./2-intro-to-css/README.md)
+3. [Utangulizi wa DOM na JS Closures](./3-intro-to-DOM-and-closures/README.md)
+
+## Shukrani
+
+Imeandikwa kwa ♥️ na [Jen Looper](https://www.twitter.com/jenlooper)
+
+Terrarium iliyoundwa kwa kutumia CSS ilihamasishwa na jar ya kioo ya Jakub Mandra [codepen](https://codepen.io/Rotarepmi/pen/rjpNZY).
+
+Sanaa ya michoro imechorwa kwa mkono na [Jen Looper](http://jenlooper.com) kwa msaada wa Procreate.
+
+## Chapisha Terrarium Yako
+
+Unaweza kuchapisha, au kuweka terrarium yako mtandaoni kwa kutumia Azure Static Web Apps.
+
+1. Fanya fork ya repo hii
+
+2. Bonyeza kitufe hiki
+
+[![Kitufe cha Chapisha kwa Azure](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/?feature.customportal=false&WT.mc_id=academic-77807-sagibbon#create/Microsoft.StaticApp)
+
+3. Fuata hatua za mwongozo wa kuunda programu yako. Hakikisha unaweka mzizi wa programu kuwa ama `/solution` au mzizi wa msimbo wako. Hakuna API katika programu hii, kwa hivyo usijali kuhusu kuongeza hiyo. Folda ya github itaundwa kwenye repo yako ya fork ambayo itasaidia huduma za ujenzi za Azure Static Web Apps kujenga na kuchapisha programu yako kwenye URL mpya.
+
+---
+
+**Kanusho**:  
+Hati hii imetafsiriwa kwa kutumia huduma ya kutafsiri ya AI [Co-op Translator](https://github.com/Azure/co-op-translator). Ingawa tunajitahidi kwa usahihi, tafadhali fahamu kuwa tafsiri za kiotomatiki zinaweza kuwa na makosa au kutokuwa sahihi. Hati ya asili katika lugha yake ya awali inapaswa kuzingatiwa kama chanzo cha mamlaka. Kwa taarifa muhimu, tafsiri ya kitaalamu ya binadamu inapendekezwa. Hatutawajibika kwa kutoelewana au tafsiri zisizo sahihi zinazotokana na matumizi ya tafsiri hii.
\ No newline at end of file
diff --git a/translations/sw/3-terrarium/solution/README.md b/translations/sw/3-terrarium/solution/README.md
new file mode 100644
index 00000000..dd6d9f74
--- /dev/null
+++ b/translations/sw/3-terrarium/solution/README.md
@@ -0,0 +1,39 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "6329fbe8bd936068debd78cca6f09c0a",
+  "translation_date": "2025-08-28T04:15:22+00:00",
+  "source_file": "3-terrarium/solution/README.md",
+  "language_code": "sw"
+}
+-->
+# Terrarium Yangu: Mradi wa kujifunza kuhusu HTML, CSS, na udhibiti wa DOM kwa kutumia JavaScript 🌵🌱
+
+Mradi mdogo wa kuburudisha akili kwa kuburuta na kudondosha. Kwa kutumia HTML, JS, na CSS kidogo, unaweza kujenga kiolesura cha wavuti, kukipamba, na kuongeza mwingiliano.
+
+![terrarium yangu](../../../../translated_images/screenshot_gray.0c796099a1f9f25e40aa55ead81f268434c00af30d7092490759945eda63067d.sw.png)
+
+## Shukrani
+
+Imeandikwa kwa ♥️ na [Jen Looper](https://www.twitter.com/jenlooper)
+
+Terrarium iliyoundwa kupitia CSS ilihamasishwa na jarida la kioo la Jakub Mandra [codepen](https://codepen.io/Rotarepmi/pen/rjpNZY).
+
+Kazi ya sanaa ilichorwa kwa mkono na [Jen Looper](http://jenlooper.com) kwa kutumia Procreate.
+
+## Chapisha Terrarium Yako
+
+Unaweza kuchapisha, au kuweka terrarium yako mtandaoni kwa kutumia Azure Static Web Apps.
+
+1. Fanya nakala ya repo hii
+
+2. Bonyeza kitufe hiki
+
+[![Kitufe cha Chapisha kwa Azure](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/?feature.customportal=false&WT.mc_id=academic-77807-sagibbon#create/Microsoft.StaticApp)
+
+3. Fuata hatua za mwongozo wa kuunda programu yako. Hakikisha unaweka mzizi wa programu kuwa ama `/solution` au mzizi wa msimbo wako. Hakuna API katika programu hii, kwa hivyo usijali kuhusu kuongeza hiyo. Folda ya .github itaundwa katika repo yako iliyofanyiwa nakala ambayo itasaidia huduma ya ujenzi ya Azure Static Web Apps kujenga na kuchapisha programu yako kwenye URL mpya.
+
+---
+
+**Kanusho**:  
+Hati hii imetafsiriwa kwa kutumia huduma ya kutafsiri ya AI [Co-op Translator](https://github.com/Azure/co-op-translator). Ingawa tunajitahidi kuhakikisha usahihi, tafadhali fahamu kuwa tafsiri za kiotomatiki zinaweza kuwa na makosa au kutokuwa sahihi. Hati ya asili katika lugha yake ya awali inapaswa kuzingatiwa kama chanzo cha mamlaka. Kwa taarifa muhimu, tafsiri ya kitaalamu ya binadamu inapendekezwa. Hatutawajibika kwa kutoelewana au tafsiri zisizo sahihi zinazotokana na matumizi ya tafsiri hii.
\ No newline at end of file
diff --git a/translations/sw/4-typing-game/README.md b/translations/sw/4-typing-game/README.md
new file mode 100644
index 00000000..896ddd8f
--- /dev/null
+++ b/translations/sw/4-typing-game/README.md
@@ -0,0 +1,44 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "957547b822c40042e07d591c4fbfde4f",
+  "translation_date": "2025-08-28T04:25:25+00:00",
+  "source_file": "4-typing-game/README.md",
+  "language_code": "sw"
+}
+-->
+# Programu Inayoendeshwa na Matukio - Unda Mchezo wa Kuandika
+
+## Utangulizi
+
+Kuandika ni mojawapo ya ujuzi unaopuuzwa sana kwa msanidi programu. Uwezo wa kuhamisha mawazo haraka kutoka kichwani mwako hadi kwenye mhariri wako huruhusu ubunifu kutiririka bila kizuizi. Mojawapo ya njia bora za kujifunza ni kucheza mchezo!
+
+> Kwa hivyo, hebu tuunde mchezo wa kuandika!
+
+Utatumia ujuzi wa JavaScript, HTML na CSS ambao umekuza hadi sasa kuunda mchezo wa kuandika. Mchezo utamwonyesha mchezaji nukuu ya bahati nasibu (tunatumia nukuu za [Sherlock Holmes](https://en.wikipedia.org/wiki/Sherlock_Holmes)) na kupima muda ambao mchezaji anachukua kuandika kwa usahihi. Utatumia ujuzi wa JavaScript, HTML na CSS ambao umekuza hadi sasa kuunda mchezo wa kuandika.
+
+![demo](../../../4-typing-game/images/demo.gif)
+
+## Mahitaji ya Awali
+
+Somo hili linadhani unafahamu dhana zifuatazo:
+
+- Kuunda udhibiti wa pembejeo ya maandishi na vifungo
+- CSS na kuweka mitindo kwa kutumia madarasa
+- Misingi ya JavaScript
+  - Kuunda orodha
+  - Kuunda nambari ya bahati nasibu
+  - Kupata muda wa sasa
+
+## Somo
+
+[Kuunda mchezo wa kuandika kwa kutumia programu inayoendeshwa na matukio](./typing-game/README.md)
+
+## Shukrani
+
+Imeandikwa kwa ♥️ na [Christopher Harrison](http://www.twitter.com/geektrainer)
+
+---
+
+**Kanusho**:  
+Hati hii imetafsiriwa kwa kutumia huduma ya kutafsiri ya AI [Co-op Translator](https://github.com/Azure/co-op-translator). Ingawa tunajitahidi kuhakikisha usahihi, tafadhali fahamu kuwa tafsiri za kiotomatiki zinaweza kuwa na makosa au kutokuwa sahihi. Hati ya asili katika lugha yake ya awali inapaswa kuzingatiwa kama chanzo cha mamlaka. Kwa taarifa muhimu, tafsiri ya kitaalamu ya binadamu inapendekezwa. Hatutawajibika kwa kutoelewana au tafsiri zisizo sahihi zinazotokana na matumizi ya tafsiri hii.
\ No newline at end of file
diff --git a/translations/sw/4-typing-game/solution/README.md b/translations/sw/4-typing-game/solution/README.md
new file mode 100644
index 00000000..3d47a170
--- /dev/null
+++ b/translations/sw/4-typing-game/solution/README.md
@@ -0,0 +1,15 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "068cbb9b3c10a96d503f6cdd6c9ace8c",
+  "translation_date": "2025-08-28T04:28:42+00:00",
+  "source_file": "4-typing-game/solution/README.md",
+  "language_code": "sw"
+}
+-->
+Hii ni nafasi ya kuweka, imeachwa wazi kwa makusudi
+
+---
+
+**Kanusho**:  
+Hati hii imetafsiriwa kwa kutumia huduma ya kutafsiri ya AI [Co-op Translator](https://github.com/Azure/co-op-translator). Ingawa tunajitahidi kuhakikisha usahihi, tafadhali fahamu kuwa tafsiri za kiotomatiki zinaweza kuwa na makosa au kutokuwa sahihi. Hati ya asili katika lugha yake ya awali inapaswa kuzingatiwa kama chanzo cha mamlaka. Kwa taarifa muhimu, tafsiri ya kitaalamu ya binadamu inapendekezwa. Hatutawajibika kwa kutoelewana au tafsiri zisizo sahihi zinazotokana na matumizi ya tafsiri hii.
\ No newline at end of file
diff --git a/translations/sw/4-typing-game/typing-game/README.md b/translations/sw/4-typing-game/typing-game/README.md
new file mode 100644
index 00000000..45e28a45
--- /dev/null
+++ b/translations/sw/4-typing-game/typing-game/README.md
@@ -0,0 +1,353 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "e982871b8388c59c22a41b73b5fca70f",
+  "translation_date": "2025-08-28T04:25:49+00:00",
+  "source_file": "4-typing-game/typing-game/README.md",
+  "language_code": "sw"
+}
+-->
+# Kuunda Mchezo kwa Kutumia Matukio
+
+## Jaribio Kabla ya Somo
+
+[Jaribio kabla ya somo](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/21)
+
+## Uprogramishaji Unaotegemea Matukio
+
+Unapounda programu inayotegemea kivinjari, tunatoa kiolesura cha mtumiaji (GUI) kwa mtumiaji kutumia wakati wa kuingiliana na kile tulichounda. Njia ya kawaida ya kuingiliana na kivinjari ni kupitia kubofya na kuandika kwenye vipengele mbalimbali. Changamoto tunayokutana nayo kama watengenezaji ni kwamba hatujui ni lini mtumiaji atafanya shughuli hizi!
+
+[Uprogramishaji unaotegemea matukio](https://en.wikipedia.org/wiki/Event-driven_programming) ni jina la aina ya uprogramishaji tunaohitaji kufanya ili kuunda GUI yetu. Tukichambua kidogo, tunaona neno kuu hapa ni **tukio**. [Tukio](https://www.merriam-webster.com/dictionary/event), kulingana na Merriam-Webster, linafafanuliwa kama "kitu kinachotokea". Hii inaelezea hali yetu kikamilifu. Tunajua kitu kitatokea ambacho tunataka kutekeleza msimbo fulani kama jibu, lakini hatujui ni lini kitatokea.
+
+Njia tunayotumia kuashiria sehemu ya msimbo tunayotaka kutekeleza ni kwa kuunda kazi (function). Tunapofikiria kuhusu [uprogramishaji wa utaratibu](https://en.wikipedia.org/wiki/Procedural_programming), kazi hufanywa kwa mpangilio maalum. Hili pia litakuwa kweli kwa uprogramishaji unaotegemea matukio. Tofauti ni **jinsi** kazi zitakavyoitwa.
+
+Ili kushughulikia matukio (kubofya kitufe, kuandika, n.k.), tunasajili **wasikilizaji wa matukio**. Msikilizaji wa tukio ni kazi inayosikiliza tukio litokee na kutekeleza kama jibu. Wasikilizaji wa matukio wanaweza kusasisha UI, kupiga simu kwa seva, au kufanya chochote kingine kinachohitajika kama jibu kwa kitendo cha mtumiaji. Tunaongeza msikilizaji wa tukio kwa kutumia [addEventListener](https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener), na kutoa kazi ya kutekeleza.
+
+> **NOTE:** Ni vyema kuangazia kwamba kuna njia nyingi za kuunda wasikilizaji wa matukio. Unaweza kutumia kazi zisizo na majina, au kuunda zile zenye majina. Unaweza kutumia njia za mkato mbalimbali, kama kuweka mali ya `click`, au kutumia `addEventListener`. Katika zoezi letu, tutaangazia `addEventListener` na kazi zisizo na majina, kwani hii ndiyo mbinu inayotumiwa zaidi na watengenezaji wa wavuti. Pia ni mbinu inayobadilika zaidi, kwani `addEventListener` inafanya kazi kwa matukio yote, na jina la tukio linaweza kutolewa kama parameter.
+
+### Matukio ya Kawaida
+
+Kuna [matukio mengi](https://developer.mozilla.org/docs/Web/Events) yanayopatikana kwako kusikiliza unapounda programu. Kimsingi, chochote mtumiaji anachofanya kwenye ukurasa huchochea tukio, ambalo linakupa nguvu nyingi kuhakikisha wanapata uzoefu unaotaka. Kwa bahati nzuri, mara nyingi utahitaji matukio machache tu. Hapa kuna machache ya kawaida (ikiwemo mawili tutakayotumia tunapounda mchezo wetu):
+
+- [click](https://developer.mozilla.org/docs/Web/API/Element/click_event): Mtumiaji alibofya kitu, kawaida kitufe au kiungo
+- [contextmenu](https://developer.mozilla.org/docs/Web/API/Element/contextmenu_event): Mtumiaji alibofya kitufe cha kulia cha panya
+- [select](https://developer.mozilla.org/docs/Web/API/Element/select_event): Mtumiaji alichagua maandishi fulani
+- [input](https://developer.mozilla.org/docs/Web/API/Element/input_event): Mtumiaji aliingiza maandishi fulani
+
+## Kuunda Mchezo
+
+Tutaunda mchezo ili kuchunguza jinsi matukio yanavyofanya kazi katika JavaScript. Mchezo wetu utajaribu ujuzi wa kuandika wa mchezaji, ambao ni mojawapo ya ujuzi unaopuuzwa sana ambao watengenezaji wote wanapaswa kuwa nao. Sote tunapaswa kufanya mazoezi ya kuandika! Mtiririko wa jumla wa mchezo utaonekana hivi:
+
+- Mchezaji anabofya kitufe cha kuanza na kupewa nukuu ya kuandika
+- Mchezaji anaandika nukuu haraka iwezekanavyo kwenye kisanduku cha maandishi
+  - Kila neno linapokamilika, linalofuata linaangaziwa
+  - Ikiwa mchezaji atafanya kosa la tahajia, kisanduku cha maandishi kinabadilika kuwa nyekundu
+  - Mchezaji anapokamilisha nukuu, ujumbe wa mafanikio unaonyeshwa pamoja na muda uliotumika
+
+Hebu tujenge mchezo wetu, na tujifunze kuhusu matukio!
+
+### Muundo wa Faili
+
+Tutahitaji jumla ya faili tatu: **index.html**, **script.js** na **style.css**. Hebu tuanze kwa kuziandaa ili kufanya maisha yetu yawe rahisi kidogo.
+
+- Unda folda mpya kwa kazi yako kwa kufungua dirisha la koni au terminal na kutoa amri ifuatayo:
+
+```bash
+# Linux or macOS
+mkdir typing-game && cd typing-game
+
+# Windows
+md typing-game && cd typing-game
+```
+
+- Fungua Visual Studio Code
+
+```bash
+code .
+```
+
+- Ongeza faili tatu kwenye folda katika Visual Studio Code zenye majina yafuatayo:
+  - index.html
+  - script.js
+  - style.css
+
+## Unda Kiolesura cha Mtumiaji
+
+Tukichunguza mahitaji, tunajua tutahitaji vipengele vichache kwenye ukurasa wetu wa HTML. Hii ni kama mapishi, ambapo tunahitaji viungo:
+
+- Mahali pa kuonyesha nukuu kwa mtumiaji kuandika
+- Mahali pa kuonyesha ujumbe wowote, kama ujumbe wa mafanikio
+- Kisanduku cha maandishi kwa kuandika
+- Kitufe cha kuanza
+
+Kila moja ya hivi vitahitaji vitambulisho (IDs) ili tuweze kufanya kazi navyo katika JavaScript yetu. Pia tutaongeza marejeleo kwa faili za CSS na JavaScript tunazotaka kuunda.
+
+Unda faili mpya iitwayo **index.html**. Ongeza HTML ifuatayo:
+
+```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>
+```
+
+### Zindua Programu
+
+Ni bora kila wakati kuendeleza hatua kwa hatua ili kuona jinsi mambo yanavyoonekana. Hebu tuzindue programu yetu. Kuna kiendelezi kizuri kwa Visual Studio Code kinachoitwa [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) ambacho kitaendesha programu yako kwa ndani na kusasisha kivinjari kila unapohifadhi.
+
+- Sakinisha [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) kwa kufuata kiungo na kubofya **Install**
+  - Utaombwa na kivinjari kufungua Visual Studio Code, kisha na Visual Studio Code kufanya usakinishaji
+  - Anzisha upya Visual Studio Code ikiwa utaombwa
+- Mara baada ya kusakinishwa, katika Visual Studio Code, bofya Ctrl-Shift-P (au Cmd-Shift-P) kufungua paleti ya amri
+- Andika **Live Server: Open with Live Server**
+  - Live Server itaanza kuendesha programu yako
+- Fungua kivinjari na uende kwenye **https://localhost:5500**
+- Sasa unapaswa kuona ukurasa uliouunda!
+
+Hebu tuongeze utendakazi.
+
+## Ongeza CSS
+
+Kwa HTML yetu kuundwa, hebu tuongeze CSS kwa mtindo wa msingi. Tunahitaji kuangazia neno ambalo mchezaji anapaswa kuandika, na kubadilisha rangi ya kisanduku cha maandishi ikiwa kile walichoandika si sahihi. Tutafanya hivi kwa madarasa mawili.
+
+Unda faili mpya iitwayo **style.css** na ongeza sintaksia ifuatayo.
+
+```css
+/* inside style.css */
+.highlight {
+  background-color: yellow;
+}
+
+.error {
+  background-color: lightcoral;
+  border: red;
+}
+```
+
+✅ Kuhusu CSS, unaweza kupanga ukurasa wako jinsi unavyopenda. Chukua muda kidogo na ufanye ukurasa uonekane wa kuvutia zaidi:
+
+- Chagua fonti tofauti
+- Ongeza rangi kwenye vichwa vya habari
+- Badilisha ukubwa wa vipengele
+
+## JavaScript
+
+Kwa UI yetu kuundwa, ni wakati wa kuzingatia JavaScript ambayo itatoa mantiki. Tutagawanya hili katika hatua chache:
+
+- [Unda constants](../../../../4-typing-game/typing-game)
+- [Msikilizaji wa tukio la kuanza mchezo](../../../../4-typing-game/typing-game)
+- [Msikilizaji wa tukio la kuandika](../../../../4-typing-game/typing-game)
+
+Lakini kwanza, unda faili mpya iitwayo **script.js**.
+
+### Ongeza Constants
+
+Tutahitaji vitu vichache ili kufanya maisha yetu yawe rahisi kwa uprogramishaji. Tena, sawa na mapishi, hapa kuna tunachohitaji:
+
+- Orodha ya nukuu zote
+- Orodha tupu ya kuhifadhi maneno yote ya nukuu ya sasa
+- Nafasi ya kuhifadhi faharasa ya neno ambalo mchezaji analoandika kwa sasa
+- Muda ambao mchezaji alibofya kuanza
+
+Pia tutahitaji marejeleo kwa vipengele vya UI:
+
+- Kisanduku cha maandishi (**typed-value**)
+- Onyesho la nukuu (**quote**)
+- Ujumbe (**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');
+```
+
+✅ Endelea na ongeza nukuu zaidi kwenye mchezo wako
+
+> **NOTE:** Tunaweza kupata vipengele wakati wowote tunapotaka kwenye msimbo kwa kutumia `document.getElementById`. Kwa sababu tutarejelea vipengele hivi mara kwa mara, tutaepuka makosa ya tahajia kwa kutumia constants. Mfumo kama [Vue.js](https://vuejs.org/) au [React](https://reactjs.org/) unaweza kukusaidia kudhibiti msimbo wako vizuri zaidi.
+
+Chukua dakika moja kutazama video kuhusu kutumia `const`, `let` na `var`
+
+[![Aina za vigezo](https://img.youtube.com/vi/JNIXfGiDWM8/0.jpg)](https://youtube.com/watch?v=JNIXfGiDWM8 "Aina za vigezo")
+
+> 🎥 Bofya picha hapo juu kwa video kuhusu vigezo.
+
+### Ongeza Mantiki ya Kuanza
+
+Ili kuanza mchezo, mchezaji atabofya kuanza. Bila shaka, hatujui ni lini watabofya kuanza. Hapa ndipo [msikilizaji wa tukio](https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener) anapokuja. Msikilizaji wa tukio ataturuhusu kusikiliza kitu kitokee (tukio) na kutekeleza msimbo kama jibu. Katika hali yetu, tunataka kutekeleza msimbo wakati mtumiaji anapobofya kuanza.
+
+Mtumiaji anapobofya **start**, tunahitaji kuchagua nukuu, kuandaa kiolesura cha mtumiaji, na kuandaa ufuatiliaji wa neno la sasa na muda. Hapa chini kuna JavaScript unayohitaji kuongeza; tutajadili baada ya kizuizi cha msimbo.
+
+```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();
+});
+```
+
+Hebu tuchambue msimbo!
+
+- Andaa ufuatiliaji wa maneno
+  - Kutumia [Math.floor](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Math/floor) na [Math.random](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Math/random) kunaturuhusu kuchagua nukuu kwa bahati nasibu kutoka kwenye safu ya `quotes`
+  - Tunabadilisha `quote` kuwa safu ya `words` ili tuweze kufuatilia neno ambalo mchezaji analoandika kwa sasa
+  - `wordIndex` inakuwa 0, kwani mchezaji ataanza na neno la kwanza
+- Andaa UI
+  - Unda safu ya `spanWords`, ambayo ina kila neno ndani ya kipengele cha `span`
+    - Hii itaturuhusu kuangazia neno kwenye onyesho
+  - `join` safu ili kuunda kamba ambayo tunaweza kutumia kusasisha `innerHTML` kwenye `quoteElement`
+    - Hii itaonyesha nukuu kwa mchezaji
+  - Weka `className` ya kipengele cha kwanza cha `span` kuwa `highlight` ili kuangazia kama njano
+  - Safisha `messageElement` kwa kuweka `innerText` kuwa `''`
+- Andaa kisanduku cha maandishi
+  - Futa `value` ya sasa kwenye `typedValueElement`
+  - Weka `focus` kwa `typedValueElement`
+- Anzisha kipima muda kwa kuita `getTime`
+
+### Ongeza Mantiki ya Kuandika
+
+Mchezaji anapoandika, tukio la `input` litachochewa. Msikilizaji wa tukio hili atahakikisha mchezaji anaandika neno kwa usahihi, na kushughulikia hali ya sasa ya mchezo. Tukirudi kwenye **script.js**, ongeza msimbo ufuatao mwishoni. Tutauchambua baadaye.
+
+```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';
+  }
+});
+```
+
+Hebu tuchambue msimbo! Tunaanza kwa kuchukua neno la sasa na thamani ambayo mchezaji ameandika hadi sasa. Kisha tuna mantiki ya mfululizo, ambapo tunaangalia ikiwa nukuu imekamilika, neno limekamilika, neno ni sahihi, au (hatimaye), ikiwa kuna kosa.
+
+- Nukuu imekamilika, inayoonyeshwa na `typedValue` kuwa sawa na `currentWord`, na `wordIndex` kuwa sawa na moja pungufu ya `length` ya `words`
+  - Hesabu `elapsedTime` kwa kutoa `startTime` kutoka kwa muda wa sasa
+  - Gawanya `elapsedTime` kwa 1,000 kubadilisha kutoka milisekunde hadi sekunde
+  - Onyesha ujumbe wa mafanikio
+- Neno limekamilika, inayoonyeshwa na `typedValue` kuishia na nafasi (mwisho wa neno) na `typedValue` kuwa sawa na `currentWord`
+  - Weka `value` kwenye `typedElement` kuwa `''` kuruhusu neno linalofuata kuandikwa
+  - Ongeza `wordIndex` ili kuhamia kwenye neno linalofuata
+  - Pitia `childNodes` zote za `quoteElement` kuweka `className` kuwa `''` kurudisha onyesho la kawaida
+  - Weka `className` ya neno la sasa kuwa `highlight` kuashiria kama neno linalofuata kuandika
+- Neno limeandikwa kwa usahihi (lakini halijakamilika), inayoonyeshwa na `currentWord` kuanza na `typedValue`
+  - Hakikisha `typedValueElement` linaonyeshwa kama kawaida kwa kufuta `className`
+- Ikiwa tumefika hapa, tuna kosa
+  - Weka `className` kwenye `typedValueElement` kuwa `error`
+
+## Jaribu Programu Yako
+
+Umefika mwisho! Hatua ya mwisho ni kuhakikisha programu yetu inafanya kazi. Jaribu! Usijali ikiwa kuna makosa; **watengenezaji wote** hukutana na makosa. Chunguza ujumbe na urekebishe kama inavyohitajika.
+
+Bofya **start**, na anza kuandika! Inapaswa kuonekana kama uhuishaji tulioona awali.
+
+![Uhuishaji wa mchezo ukiwa kazini](../../../../4-typing-game/images/demo.gif)
+
+---
+
+## 🚀 Changamoto
+
+Ongeza utendakazi zaidi
+
+- Lemaza msikilizaji wa tukio la `input` baada ya kukamilika, na uuwezeshe tena wakati kitufe kinapobofya
+- Lemaza kisanduku cha maandishi wakati mchezaji anakamilisha nukuu
+- Onyesha kisanduku cha mazungumzo cha modal chenye ujumbe wa mafanikio
+- Hifadhi alama za juu ukitumia [localStorage](https://developer.mozilla.org/docs/Web/API/Window/localStorage)
+
+## Jaribio Baada ya Somo
+
+[Jaribio baada ya somo](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/22)
+
+## Mapitio na Kujisomea
+
+Soma kuhusu [matukio yote yanayopatikana](https://developer.mozilla.org/docs/Web/Events) kwa msanidi kupitia kivinjari cha wavuti, na fikiria hali ambazo ungeweza kutumia kila moja.
+
+## Kazi
+
+[Tengeneza mchezo mpya wa kibodi](assignment.md)
+
+---
+
+**Kanusho**:  
+Hati hii imetafsiriwa kwa kutumia huduma ya tafsiri ya AI [Co-op Translator](https://github.com/Azure/co-op-translator). Ingawa tunajitahidi kuhakikisha usahihi, tafsiri za kiotomatiki zinaweza kuwa na makosa au kutokuwa sahihi. Hati ya asili katika lugha yake ya awali inapaswa kuzingatiwa kama chanzo cha mamlaka. Kwa taarifa muhimu, tafsiri ya kitaalamu ya binadamu inapendekezwa. Hatutawajibika kwa kutokuelewana au tafsiri zisizo sahihi zinazotokana na matumizi ya tafsiri hii.
\ No newline at end of file
diff --git a/translations/sw/4-typing-game/typing-game/assignment.md b/translations/sw/4-typing-game/typing-game/assignment.md
new file mode 100644
index 00000000..1f01c381
--- /dev/null
+++ b/translations/sw/4-typing-game/typing-game/assignment.md
@@ -0,0 +1,26 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "de5384c118e15e4d1d0eaa00fc01b112",
+  "translation_date": "2025-08-28T04:28:24+00:00",
+  "source_file": "4-typing-game/typing-game/assignment.md",
+  "language_code": "sw"
+}
+-->
+# Unda mchezo mpya wa kibodi
+
+## Maelekezo
+
+Unda mchezo mdogo unaotumia matukio ya kibodi kufanya kazi. Inaweza kuwa aina tofauti ya mchezo wa kuandika, au mchezo wa sanaa unaochora pikseli kwenye skrini kwa kugusa funguo. Kuwa mbunifu!
+
+## Rubric
+
+| Kigezo   | Kilele                  | Kinachokubalika         | Kinachohitaji Kuboresha |
+| -------- | ----------------------- | ----------------------- | ----------------------- |
+|          | Mchezo kamili umeonyeshwa | Mchezo ni wa kiwango cha chini | Mchezo una matatizo       |
+|          |                         |                         |                         |
+
+---
+
+**Kanusho**:  
+Hati hii imetafsiriwa kwa kutumia huduma ya kutafsiri ya AI [Co-op Translator](https://github.com/Azure/co-op-translator). Ingawa tunajitahidi kuhakikisha usahihi, tafadhali fahamu kuwa tafsiri za kiotomatiki zinaweza kuwa na makosa au kutokuwa sahihi. Hati ya asili katika lugha yake ya awali inapaswa kuzingatiwa kama chanzo cha mamlaka. Kwa taarifa muhimu, tafsiri ya kitaalamu ya binadamu inapendekezwa. Hatutawajibika kwa kutoelewana au tafsiri zisizo sahihi zinazotokana na matumizi ya tafsiri hii.
\ No newline at end of file
diff --git a/translations/sw/5-browser-extension/1-about-browsers/README.md b/translations/sw/5-browser-extension/1-about-browsers/README.md
new file mode 100644
index 00000000..82c58d1b
--- /dev/null
+++ b/translations/sw/5-browser-extension/1-about-browsers/README.md
@@ -0,0 +1,182 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "0bb55e0b98600afab801eea115228873",
+  "translation_date": "2025-08-28T03:39:05+00:00",
+  "source_file": "5-browser-extension/1-about-browsers/README.md",
+  "language_code": "sw"
+}
+-->
+# Mradi wa Kiendelezi cha Kivinjari Sehemu ya 1: Yote Kuhusu Vivinjari
+
+![Mchoro wa kivinjari](../../../../translated_images/browser.60317c9be8b7f84adce43e30bff8d47a1ae15793beab762317b2bc6b74337c1a.sw.jpg)
+> Mchoro na [Wassim Chegham](https://dev.to/wassimchegham/ever-wondered-what-happens-when-you-type-in-a-url-in-an-address-bar-in-a-browser-3dob)
+
+## Maswali ya Awali ya Somo
+
+[Maswali ya awali ya somo](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/23)
+
+### Utangulizi
+
+Viendelezi vya kivinjari vinaongeza utendaji wa ziada kwenye kivinjari. Lakini kabla ya kujenga kimoja, unapaswa kujifunza kidogo kuhusu jinsi vivinjari vinavyofanya kazi.
+
+### Kuhusu Kivinjari
+
+Katika mfululizo huu wa masomo, utajifunza jinsi ya kujenga kiendelezi cha kivinjari ambacho kitafanya kazi kwenye vivinjari vya Chrome, Firefox, na Edge. Katika sehemu hii, utagundua jinsi vivinjari vinavyofanya kazi na kuunda vipengele vya kiendelezi cha kivinjari.
+
+Lakini kivinjari ni nini hasa? Ni programu ya kompyuta inayomruhusu mtumiaji kufikia maudhui kutoka kwa seva na kuyaonyesha kwenye kurasa za wavuti.
+
+✅ Historia kidogo: kivinjari cha kwanza kilikuwa kinaitwa 'WorldWideWeb' na kilitengenezwa na Sir Timothy Berners-Lee mwaka 1990.
+
+![Vivinjari vya awali](../../../../translated_images/earlybrowsers.d984b711cdf3a42ddac919d46c4b5ca7232f68ccfbd81395e04e5a64c0015277.sw.jpg)
+> Baadhi ya vivinjari vya awali, kupitia [Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing)
+
+Wakati mtumiaji anapounganishwa kwenye mtandao kwa kutumia anwani ya URL (Uniform Resource Locator), kawaida kupitia Hypertext Transfer Protocol kwa anwani ya `http` au `https`, kivinjari huwasiliana na seva ya wavuti na kuchukua ukurasa wa wavuti.
+
+Kwa wakati huu, injini ya uonyeshaji ya kivinjari huonyesha ukurasa huo kwenye kifaa cha mtumiaji, ambacho kinaweza kuwa simu ya mkononi, kompyuta ya mezani, au kompyuta ndogo.
+
+Vivinjari pia vina uwezo wa kuhifadhi maudhui ili isiwe lazima ipatikane kutoka kwa seva kila wakati. Vinaweza kurekodi historia ya shughuli za kuvinjari za mtumiaji, kuhifadhi 'cookies', ambazo ni vipande vidogo vya data vinavyohifadhi taarifa zinazotumika kuhifadhi shughuli za mtumiaji, na zaidi.
+
+Jambo muhimu sana la kukumbuka kuhusu vivinjari ni kwamba havifanani! Kila kivinjari kina nguvu na udhaifu wake, na mtaalamu wa maendeleo ya wavuti anahitaji kuelewa jinsi ya kufanya kurasa za wavuti zifanye kazi vizuri kwenye vivinjari tofauti. Hii inajumuisha kushughulikia maonyesho madogo kama vile ya simu ya mkononi, pamoja na mtumiaji ambaye yuko nje ya mtandao.
+
+Tovuti muhimu sana ambayo unapaswa kuiweka alama kwenye kivinjari unachopendelea kutumia ni [caniuse.com](https://www.caniuse.com). Unapojenga kurasa za wavuti, ni muhimu kutumia orodha za teknolojia zinazoungwa mkono za caniuse ili uweze kuwasaidia watumiaji wako vyema.
+
+✅ Unawezaje kujua vivinjari gani vinavyopendwa zaidi na watumiaji wa tovuti yako? Angalia takwimu zako - unaweza kusakinisha vifurushi mbalimbali vya takwimu kama sehemu ya mchakato wako wa maendeleo ya wavuti, na vitakuambia vivinjari gani vinavyotumiwa zaidi na vivinjari maarufu.
+
+## Viendelezi vya Kivinjari
+
+Kwa nini ungependa kujenga kiendelezi cha kivinjari? Ni kitu cha manufaa cha kuambatisha kwenye kivinjari chako unapohitaji kufikia haraka kazi unazofanya mara kwa mara. Kwa mfano, ikiwa unajikuta ukihitaji kuangalia rangi kwenye kurasa mbalimbali za wavuti unazoshirikiana nazo, unaweza kusakinisha kiendelezi cha kivinjari cha kuchagua rangi. Ikiwa unapata shida kukumbuka nywila, unaweza kutumia kiendelezi cha kivinjari cha usimamizi wa nywila.
+
+Viendelezi vya kivinjari ni vya kufurahisha kuendeleza pia. Kwa kawaida vinashughulikia idadi ndogo ya kazi ambazo hufanya vizuri.
+
+✅ Ni viendelezi gani vya kivinjari unavyovipenda? Ni kazi gani vinazofanya?
+
+### Kusakinisha Viendelezi
+
+Kabla ya kuanza kujenga, angalia mchakato wa kujenga na kupeleka kiendelezi cha kivinjari. Ingawa kila kivinjari kinatofautiana kidogo katika jinsi kinavyosimamia kazi hii, mchakato ni sawa kwenye Chrome na Firefox kama mfano huu kwenye Edge:
+
+![Picha ya skrini ya kivinjari cha Edge ikionyesha ukurasa wa edge://extensions uliofunguliwa na menyu ya mipangilio iliyofunguliwa](../../../../translated_images/install-on-edge.d68781acaf0b3d3dada8b7507cde7a64bf74b7040d9818baaa9070668e819f90.sw.png)
+
+> Kumbuka: Hakikisha kuwasha hali ya msanidi programu na kuruhusu viendelezi kutoka maduka mengine.
+
+Kwa ufupi, mchakato utakuwa:
+
+- jenga kiendelezi chako kwa kutumia `npm run build`  
+- tembelea kivinjari kwenye sehemu ya viendelezi kwa kutumia kitufe cha "Settings and more" (ikoni ya `...`) kwenye kona ya juu kulia  
+- ikiwa ni usakinishaji mpya, chagua `load unpacked` kupakia kiendelezi kipya kutoka kwenye folda yake ya kujenga (katika kesi yetu ni `/dist`)  
+- au, bonyeza `reload` ikiwa unapakua tena kiendelezi kilichosakinishwa tayari  
+
+✅ Maelekezo haya yanahusu viendelezi unavyojijengea mwenyewe; ili kusakinisha viendelezi ambavyo vimeachiliwa kwenye duka la viendelezi vya kivinjari linalohusiana na kila kivinjari, unapaswa kutembelea [maduka hayo](https://microsoftedge.microsoft.com/addons/Microsoft-Edge-Extensions-Home) na kusakinisha kiendelezi unachopendelea.
+
+### Anza
+
+Unakwenda kujenga kiendelezi cha kivinjari kinachoonyesha alama ya kaboni ya eneo lako, ikionyesha matumizi ya nishati ya eneo lako na chanzo cha nishati hiyo. Kiendelezi kitakuwa na fomu inayokusanya funguo ya API ili uweze kufikia API ya CO2 Signal.
+
+**Unahitaji:**
+
+- [funguo ya API](https://www.co2signal.com/); weka barua pepe yako kwenye kisanduku kwenye ukurasa huu na moja itatumwa kwako  
+- [msimbo wa eneo lako](http://api.electricitymap.org/v3/zones) unaolingana na [Ramani ya Umeme](https://www.electricitymap.org/map) (katika Boston, kwa mfano, ninatumia 'US-NEISO').  
+- [msimbo wa kuanzia](../../../../5-browser-extension/start). Pakua folda ya `start`; utakuwa unakamilisha msimbo katika folda hii.  
+- [NPM](https://www.npmjs.com) - NPM ni chombo cha usimamizi wa vifurushi; kisakinishe ndani na vifurushi vilivyoorodheshwa kwenye faili yako ya `package.json` vitasakinishwa kwa matumizi na mali zako za wavuti  
+
+✅ Jifunze zaidi kuhusu usimamizi wa vifurushi katika [moduli bora ya kujifunza](https://docs.microsoft.com/learn/modules/create-nodejs-project-dependencies/?WT.mc_id=academic-77807-sagibbon)
+
+Chukua dakika moja kuangalia msimbo wa msingi:
+
+dist  
+    -|manifest.json (mipangilio ya chaguo-msingi hapa)  
+    -|index.html (alama ya HTML ya mbele hapa)  
+    -|background.js (JS ya nyuma hapa)  
+    -|main.js (JS iliyojengwa)  
+src  
+    -|index.js (msimbo wako wa JS unakwenda hapa)  
+
+✅ Mara tu unapokuwa na funguo yako ya API na msimbo wa eneo tayari, hifadhi hizo mahali fulani kwenye noti kwa matumizi ya baadaye.
+
+### Jenga HTML kwa Kiendelezi
+
+Kiendelezi hiki kina maonyesho mawili. Moja ya kukusanya funguo ya API na msimbo wa eneo:
+
+![Picha ya skrini ya kiendelezi kilichokamilika kikiwa wazi kwenye kivinjari, kikionyesha fomu yenye pembejeo za jina la eneo na funguo ya API.](../../../../translated_images/1.b6da8c1394b07491afeb6b2a8e5aca73ebd3cf478e27bcc9aeabb187e722648e.sw.png)
+
+Na ya pili kuonyesha matumizi ya kaboni ya eneo:
+
+![Picha ya skrini ya kiendelezi kilichokamilika kikionyesha thamani za matumizi ya kaboni na asilimia ya mafuta ya kisukuku kwa eneo la US-NEISO.](../../../../translated_images/2.1dae52ff0804224692cd648afbf2342955d7afe3b0101b617268130dfb427f55.sw.png)
+
+Tuanzie kwa kujenga HTML ya fomu na kuipamba kwa CSS.
+
+Katika folda ya `/dist`, utajenga fomu na eneo la matokeo. Katika faili ya `index.html`, jaza eneo la fomu lililowekwa:
+
+```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>	
+```  
+Hii ni fomu ambapo taarifa zako zilizohifadhiwa zitaingizwa na kuhifadhiwa kwenye hifadhi ya ndani.
+
+Kisha, tengeneza eneo la matokeo; chini ya tagi ya mwisho ya fomu, ongeza divs kadhaa:
+
+```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>
+```  
+Kwa wakati huu, unaweza kujaribu kujenga. Hakikisha kusakinisha utegemezi wa vifurushi vya kiendelezi hiki:
+
+```
+npm install
+```  
+
+Amri hii itatumia npm, Meneja wa Vifurushi vya Node, kusakinisha webpack kwa mchakato wa kujenga kiendelezi chako. Webpack ni kifurushi kinachosimamia kuunganisha msimbo. Unaweza kuona matokeo ya mchakato huu kwa kuangalia `/dist/main.js` - utaona msimbo umeunganishwa.
+
+Kwa sasa, kiendelezi kinapaswa kujengwa na, ikiwa utakipeleka kwenye Edge kama kiendelezi, utaona fomu ikionyeshwa vizuri.
+
+Hongera, umechukua hatua za kwanza kuelekea kujenga kiendelezi cha kivinjari. Katika masomo yanayofuata, utakiimarisha na kukifanya kiwe na manufaa zaidi.
+
+---
+
+## 🚀 Changamoto
+
+Angalia duka la viendelezi vya kivinjari na usakinishe kimoja kwenye kivinjari chako. Unaweza kuchunguza faili zake kwa njia za kuvutia. Unagundua nini?
+
+## Maswali ya Baada ya Somo
+
+[Maswali ya baada ya somo](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/24)
+
+## Mapitio na Kujisomea
+
+Katika somo hili ulijifunza kidogo kuhusu historia ya kivinjari cha wavuti; tumia fursa hii kujifunza kuhusu jinsi wavumbuzi wa Mtandao Walimwengu walivyotazamia matumizi yake kwa kusoma zaidi kuhusu historia yake. Baadhi ya tovuti muhimu ni:
+
+[Historia ya Vivinjari vya Wavuti](https://www.mozilla.org/firefox/browsers/browser-history/)
+
+[Historia ya Mtandao](https://webfoundation.org/about/vision/history-of-the-web/)
+
+[Mazungumzo na 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)
+
+## Kazi  
+
+[Badilisha muonekano wa kiendelezi chako](assignment.md)
+
+---
+
+**Kanusho**:  
+Hati hii imetafsiriwa kwa kutumia huduma ya tafsiri ya AI [Co-op Translator](https://github.com/Azure/co-op-translator). Ingawa tunajitahidi kwa usahihi, tafadhali fahamu kuwa tafsiri za kiotomatiki zinaweza kuwa na makosa au kutokuwa sahihi. Hati ya asili katika lugha yake ya awali inapaswa kuzingatiwa kama chanzo cha mamlaka. Kwa taarifa muhimu, inashauriwa kutumia tafsiri ya kitaalamu ya binadamu. Hatutawajibika kwa maelewano mabaya au tafsiri zisizo sahihi zinazotokana na matumizi ya tafsiri hii.
\ No newline at end of file
diff --git a/translations/sw/5-browser-extension/1-about-browsers/assignment.md b/translations/sw/5-browser-extension/1-about-browsers/assignment.md
new file mode 100644
index 00000000..0d62ef4d
--- /dev/null
+++ b/translations/sw/5-browser-extension/1-about-browsers/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "e3c6f2a03c2336e60412612d870af547",
+  "translation_date": "2025-08-28T03:40:46+00:00",
+  "source_file": "5-browser-extension/1-about-browsers/assignment.md",
+  "language_code": "sw"
+}
+-->
+# Badilisha Muonekano wa Kiendelezi Chako
+
+## Maelekezo
+
+Msingi wa msimbo wa kiendelezi hiki unakuja ukiwa na mitindo tayari, lakini hauhitaji kuitumia; fanya kiendelezi chako kiwe cha kipekee kwa kubadilisha mitindo yake kwa kuhariri faili ya css.
+
+## Rubric
+
+| Vigezo   | Bora Zaidi                                  | Inayokubalika         | Inahitaji Kuboresha |
+| -------- | ------------------------------------------- | --------------------- | ------------------- |
+|          | Msimbo umetumwa ukiwa na mitindo mipya inayofanya kazi | Mitindo haijakamilika | Mitindo ina kasoro  |
+
+---
+
+**Kanusho**:  
+Hati hii imetafsiriwa kwa kutumia huduma ya kutafsiri ya AI [Co-op Translator](https://github.com/Azure/co-op-translator). Ingawa tunajitahidi kuhakikisha usahihi, tafadhali fahamu kuwa tafsiri za kiotomatiki zinaweza kuwa na makosa au kutokuwa sahihi. Hati ya asili katika lugha yake ya awali inapaswa kuzingatiwa kama chanzo cha mamlaka. Kwa taarifa muhimu, tafsiri ya kitaalamu ya binadamu inapendekezwa. Hatutawajibika kwa kutokuelewana au tafsiri zisizo sahihi zinazotokana na matumizi ya tafsiri hii.
\ No newline at end of file
diff --git a/translations/sw/5-browser-extension/2-forms-browsers-local-storage/README.md b/translations/sw/5-browser-extension/2-forms-browsers-local-storage/README.md
new file mode 100644
index 00000000..b7419f47
--- /dev/null
+++ b/translations/sw/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-28T03:49:31+00:00",
+  "source_file": "5-browser-extension/2-forms-browsers-local-storage/README.md",
+  "language_code": "sw"
+}
+-->
+# Mradi wa Kiongezi cha Kivinjari Sehemu ya 2: Kuita API, kutumia Hifadhi ya Ndani
+
+## Jaribio Kabla ya Somo
+
+[Jaribio kabla ya somo](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/25)
+
+### Utangulizi
+
+Katika somo hili, utaita API kwa kuwasilisha fomu ya kiongezi chako cha kivinjari na kuonyesha matokeo kwenye kiongezi chako. Zaidi ya hayo, utajifunza jinsi ya kuhifadhi data kwenye hifadhi ya ndani ya kivinjari chako kwa matumizi ya baadaye.
+
+✅ Fuata sehemu zilizo na namba kwenye faili husika ili ujue wapi pa kuweka msimbo wako.
+
+### Sanidi vipengele vya kudhibiti kwenye kiongezi:
+
+Kufikia wakati huu, umeshajenga HTML ya fomu na `<div>` ya matokeo kwa ajili ya kiongezi chako cha kivinjari. Kuanzia sasa, utahitaji kufanya kazi kwenye faili `/src/index.js` na kujenga kiongezi chako hatua kwa hatua. Rejelea [somo lililopita](../1-about-browsers/README.md) kuhusu jinsi ya kusanidi mradi wako na mchakato wa ujenzi.
+
+Ukifanya kazi kwenye faili yako ya `index.js`, anza kwa kuunda baadhi ya vigezo vya `const` kushikilia thamani zinazohusiana na sehemu mbalimbali:
+
+```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');
+```
+
+Sehemu hizi zote zinarejelewa kwa darasa lao la CSS, kama ulivyoweka kwenye HTML katika somo lililopita.
+
+### Ongeza wasikilizaji
+
+Kisha, ongeza wasikilizaji wa matukio kwenye fomu na kitufe cha kufuta ambacho kinaseti upya fomu, ili kwamba mtumiaji akiwakilisha fomu au kubofya kitufe hicho cha kufuta, kitu fulani kitokee, na ongeza mwito wa kuanzisha programu mwishoni mwa faili:
+
+```JavaScript
+form.addEventListener('submit', (e) => handleSubmit(e));
+clearBtn.addEventListener('click', (e) => reset(e));
+init();
+```
+
+✅ Angalia njia fupi inayotumika kusikiliza tukio la kuwasilisha au kubofya, na jinsi tukio linavyopitishwa kwa kazi ya `handleSubmit` au `reset`. Je, unaweza kuandika njia sawa ya njia fupi hii kwa muundo mrefu? Unapendelea ipi?
+
+### Jenga kazi ya init() na kazi ya reset():
+
+Sasa utaenda kujenga kazi inayowasha kiongezi, inayoitwa 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();
+}
+
+```
+
+Katika kazi hii, kuna mantiki ya kuvutia. Ukiisoma, unaweza kuona nini kinatokea?
+
+- `const` mbili zimewekwa ili kuangalia kama mtumiaji ameweka APIKey na msimbo wa eneo kwenye hifadhi ya ndani.
+- Ikiwa mojawapo ya hizo ni `null`, onyesha fomu kwa kubadilisha mtindo wake kuwa 'block'.
+- Ficha matokeo, kipakiaji, na `clearBtn` na weka maandishi yoyote ya kosa kuwa kamba tupu.
+- Ikiwa kuna ufunguo na eneo, anza utaratibu wa:
+  - kuita API kupata data ya matumizi ya kaboni
+  - ficha eneo la matokeo
+  - ficha fomu
+  - onyesha kitufe cha kuweka upya
+
+Kabla ya kuendelea, ni muhimu kujifunza kuhusu dhana muhimu inayopatikana kwenye vivinjari: [LocalStorage](https://developer.mozilla.org/docs/Web/API/Window/localStorage). LocalStorage ni njia muhimu ya kuhifadhi kamba kwenye kivinjari kama jozi ya `key-value`. Aina hii ya hifadhi ya wavuti inaweza kudhibitiwa na JavaScript ili kusimamia data kwenye kivinjari. LocalStorage haimaliziki muda wake, wakati SessionStorage, aina nyingine ya hifadhi ya wavuti, husafishwa kivinjari kinapofungwa. Aina mbalimbali za hifadhi zina faida na hasara katika matumizi yao.
+
+> Kumbuka - kiongezi chako cha kivinjari kina hifadhi yake ya ndani; dirisha kuu la kivinjari ni mfano tofauti na linafanya kazi kando.
+
+Unaweka APIKey yako kuwa na thamani ya kamba, kwa mfano, na unaweza kuona kwamba imewekwa kwenye Edge kwa "kukagua" ukurasa wa wavuti (unaweza kubofya kulia kivinjari ili kukagua) na kwenda kwenye kichupo cha Programu ili kuona hifadhi.
+
+![Eneo la hifadhi ya ndani](../../../../translated_images/localstorage.472f8147b6a3f8d141d9551c95a2da610ac9a3c6a73d4a1c224081c98bae09d9.sw.png)
+
+✅ Fikiria kuhusu hali ambapo usingependa kuhifadhi data fulani kwenye LocalStorage. Kwa ujumla, kuweka API Keys kwenye LocalStorage ni wazo mbaya! Unaweza kuona kwa nini? Katika kesi yetu, kwa kuwa programu yetu ni ya kujifunza tu na haitachapishwa kwenye duka la programu, tutatumia njia hii.
+
+Angalia kwamba unatumia Web API kudhibiti LocalStorage, ama kwa kutumia `getItem()`, `setItem()`, au `removeItem()`. Inasaidiwa sana kwenye vivinjari.
+
+Kabla ya kujenga kazi ya `displayCarbonUsage()` inayoitwa kwenye `init()`, hebu tujenge utendaji wa kushughulikia uwasilishaji wa fomu ya awali.
+
+### Shughulikia uwasilishaji wa fomu
+
+Unda kazi inayoitwa `handleSubmit` inayokubali hoja ya tukio `(e)`. Zuia tukio lisiendelee (katika kesi hii, tunataka kuzuia kivinjari kisirejeshe upya) na uite kazi mpya, `setUpUser`, ukipitisha hoja `apiKey.value` na `region.value`. Kwa njia hii, unatumia thamani mbili zinazopatikana kupitia fomu ya awali wakati sehemu husika zimejazwa.
+
+```JavaScript
+function handleSubmit(e) {
+	e.preventDefault();
+	setUpUser(apiKey.value, region.value);
+}
+```
+
+✅ Kumbuka - HTML uliyoiweka kwenye somo lililopita ina sehemu mbili za kuingiza ambazo `values` zake zinakamatwa kupitia `const` ulizoweka juu ya faili, na zote ni `required` hivyo kivinjari kinazuia watumiaji kuingiza thamani tupu.
+
+### Sanidi mtumiaji
+
+Ukisonga mbele kwenye kazi ya `setUpUser`, hapa ndipo unapoweka thamani za hifadhi ya ndani kwa apiKey na regionName. Ongeza kazi mpya:
+
+```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);
+}
+```
+
+Kazi hii inaweka ujumbe wa kupakia kuonyesha wakati API inaitwa. Kufikia hatua hii, umefika kwenye hatua ya kuunda kazi muhimu zaidi ya kiongezi hiki cha kivinjari!
+
+### Onyesha Matumizi ya Kaboni
+
+Hatimaye, ni wakati wa kuuliza API!
+
+Kabla ya kuendelea zaidi, tunapaswa kujadili API. API, au [Application Programming Interfaces](https://www.webopedia.com/TERM/A/API.html), ni kipengele muhimu katika zana ya msanidi wa wavuti. Zinatoa njia za kawaida kwa programu kuingiliana na kuwasiliana. Kwa mfano, ikiwa unajenga tovuti inayohitaji kuuliza hifadhidata, mtu anaweza kuwa ameunda API kwa ajili yako kutumia. Ingawa kuna aina nyingi za API, moja ya maarufu zaidi ni [REST API](https://www.smashingmagazine.com/2018/01/understanding-using-rest-api/).
+
+✅ Neno 'REST' linamaanisha 'Representational State Transfer' na lina sifa ya kutumia URL zilizosanidiwa kwa njia mbalimbali kupata data. Fanya utafiti kidogo juu ya aina mbalimbali za API zinazopatikana kwa wasanidi. Ni muundo gani unakuvutia?
+
+Kuna mambo muhimu ya kuzingatia kuhusu kazi hii. Kwanza, angalia neno [`async`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/async_function). Kuandika kazi zako ili zifanye kazi kwa njia isiyo ya moja kwa moja inamaanisha kwamba zinasubiri hatua fulani, kama vile data kurudishwa, kukamilika kabla ya kuendelea.
+
+Hapa kuna video fupi kuhusu `async`:
+
+[![Async na Await kwa kudhibiti ahadi](https://img.youtube.com/vi/YwmlRkrxvkk/0.jpg)](https://youtube.com/watch?v=YwmlRkrxvkk "Async na Await kwa kudhibiti ahadi")
+
+> 🎥 Bofya picha hapo juu kwa video kuhusu async/await.
+
+Unda kazi mpya ya kuuliza API ya 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.';
+	}
+}
+```
+
+Hii ni kazi kubwa. Nini kinaendelea hapa?
+
+- Ukifuata mbinu bora, unatumia neno `async` kufanya kazi hii ifanye kazi kwa njia isiyo ya moja kwa moja. Kazi hiyo ina kizuizi cha `try/catch` kwani itarudisha ahadi wakati API inarudisha data. Kwa sababu huna udhibiti wa kasi ambayo API itajibu (inaweza isijibu kabisa!), unahitaji kushughulikia hali hii kwa kuiita kwa njia isiyo ya moja kwa moja.
+- Unauliza API ya co2signal kupata data ya eneo lako, ukitumia API Key yako. Ili kutumia ufunguo huo, lazima utumie aina ya uthibitishaji kwenye vigezo vya kichwa.
+- Mara API inapojibu, unapeleka vipengele mbalimbali vya data yake ya majibu kwenye sehemu za skrini yako ulizoweka kuonyesha data hii.
+- Ikiwa kuna kosa, au ikiwa hakuna matokeo, unaonyesha ujumbe wa kosa.
+
+✅ Kutumia mifumo ya programu isiyo ya moja kwa moja ni zana nyingine muhimu sana kwenye zana yako. Soma [kuhusu njia mbalimbali](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/async_function) unazoweza kusanidi aina hii ya msimbo.
+
+Hongera! Ukijenga kiongezi chako (`npm run build`) na kukisasisha kwenye paneli ya viongezi, unayo kiongezi kinachofanya kazi! Kitu pekee ambacho hakifanyi kazi ni ikoni, na utarekebisha hilo kwenye somo lijalo.
+
+---
+
+## 🚀 Changamoto
+
+Tumeelezea aina kadhaa za API hadi sasa katika masomo haya. Chagua API ya wavuti na utafiti kwa kina kile inachotoa. Kwa mfano, angalia API zinazopatikana ndani ya vivinjari kama [HTML Drag and Drop API](https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_API). Kwa maoni yako, ni nini kinachofanya API kuwa bora?
+
+## Jaribio Baada ya Somo
+
+[Jaribio baada ya somo](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/26)
+
+## Mapitio na Kujisomea
+
+Umejifunza kuhusu LocalStorage na API katika somo hili, vyote ni muhimu sana kwa msanidi wa wavuti wa kitaalamu. Je, unaweza kufikiria jinsi vitu hivi viwili vinavyofanya kazi pamoja? Fikiria jinsi unavyoweza kuunda tovuti ambayo ingeweza kuhifadhi vitu vya kutumiwa na API.
+
+## Kazi
+
+[Adopt an API](assignment.md)
+
+---
+
+**Kanusho**:  
+Hati hii imetafsiriwa kwa kutumia huduma ya kutafsiri ya AI [Co-op Translator](https://github.com/Azure/co-op-translator). Ingawa tunajitahidi kuhakikisha usahihi, tafadhali fahamu kuwa tafsiri za kiotomatiki zinaweza kuwa na makosa au kutokuwa sahihi. Hati ya asili katika lugha yake ya awali inapaswa kuzingatiwa kama chanzo cha mamlaka. Kwa taarifa muhimu, tafsiri ya kitaalamu ya binadamu inapendekezwa. Hatutawajibika kwa kutoelewana au tafsiri zisizo sahihi zinazotokana na matumizi ya tafsiri hii.
\ No newline at end of file
diff --git a/translations/sw/5-browser-extension/2-forms-browsers-local-storage/assignment.md b/translations/sw/5-browser-extension/2-forms-browsers-local-storage/assignment.md
new file mode 100644
index 00000000..7a846782
--- /dev/null
+++ b/translations/sw/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-28T03:51:40+00:00",
+  "source_file": "5-browser-extension/2-forms-browsers-local-storage/assignment.md",
+  "language_code": "sw"
+}
+-->
+# Kubali API
+
+## Maelekezo
+
+API zinaweza kuwa za kufurahisha sana kucheza nazo. Hapa kuna [orodha ya nyingi za bure](https://github.com/public-apis/public-apis). Chagua API, na tengeneza kiendelezi cha kivinjari kinachotatua tatizo. Inaweza kuwa tatizo dogo kama kutokuwa na picha za kutosha za wanyama kipenzi (kwa hivyo, jaribu [dog CEO API](https://dog.ceo/dog-api/)) au kitu kikubwa zaidi - furahia!
+
+## Rubric
+
+| Kigezo   | Bora kabisa                                                              | Inayotosheleza                          | Inahitaji Kuboresha     |
+| -------- | ------------------------------------------------------------------------ | --------------------------------------- | ----------------------- |
+|          | Kiendelezi kamili cha kivinjari kimewasilishwa kikitumia API kutoka orodha hapo juu | Kiendelezi cha kivinjari cha sehemu kimewasilishwa | Uwasilishaji una matatizo |
+
+---
+
+**Kanusho**:  
+Hati hii imetafsiriwa kwa kutumia huduma ya kutafsiri ya AI [Co-op Translator](https://github.com/Azure/co-op-translator). Ingawa tunajitahidi kuhakikisha usahihi, tafadhali fahamu kuwa tafsiri za kiotomatiki zinaweza kuwa na makosa au kutokuwa sahihi. Hati ya asili katika lugha yake ya awali inapaswa kuzingatiwa kama chanzo cha mamlaka. Kwa taarifa muhimu, tafsiri ya kitaalamu ya binadamu inapendekezwa. Hatutawajibika kwa kutoelewana au tafsiri zisizo sahihi zinazotokana na matumizi ya tafsiri hii.
\ No newline at end of file
diff --git a/translations/sw/5-browser-extension/3-background-tasks-and-performance/README.md b/translations/sw/5-browser-extension/3-background-tasks-and-performance/README.md
new file mode 100644
index 00000000..ade7a3f4
--- /dev/null
+++ b/translations/sw/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-28T03:41:38+00:00",
+  "source_file": "5-browser-extension/3-background-tasks-and-performance/README.md",
+  "language_code": "sw"
+}
+-->
+# Mradi wa Kiendelezi cha Kivinjari Sehemu ya 3: Jifunze kuhusu Kazi za Nyuma na Utendaji
+
+## Maswali ya Awali ya Somo
+
+[Maswali ya awali ya somo](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/27)
+
+### Utangulizi
+
+Katika masomo mawili yaliyopita ya moduli hii, ulijifunza jinsi ya kujenga fomu na eneo la kuonyesha data inayopatikana kutoka kwa API. Hii ni njia ya kawaida ya kuunda uwepo wa mtandao. Pia ulijifunza jinsi ya kushughulikia upatikanaji wa data kwa njia isiyo ya moja kwa moja. Kiendelezi chako cha kivinjari karibu kimekamilika.
+
+Kazi iliyobaki ni kusimamia baadhi ya kazi za nyuma, ikiwa ni pamoja na kubadilisha rangi ya ikoni ya kiendelezi, kwa hivyo huu ni wakati mzuri wa kuzungumzia jinsi kivinjari kinavyosimamia aina hii ya kazi. Hebu tufikirie kuhusu kazi hizi za kivinjari katika muktadha wa utendaji wa mali zako za mtandao unapoziunda.
+
+## Misingi ya Utendaji wa Mtandao
+
+> "Utendaji wa tovuti unahusu mambo mawili: jinsi ukurasa unavyopakia haraka, na jinsi msimbo wake unavyotekelezwa haraka." -- [Zack Grossbart](https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/)
+
+Mada ya jinsi ya kufanya tovuti zako ziwe za haraka sana kwenye aina zote za vifaa, kwa aina zote za watumiaji, katika hali zote, bila shaka ni pana. Hapa kuna mambo ya kuzingatia unapoanzisha mradi wa kawaida wa mtandao au kiendelezi cha kivinjari.
+
+Jambo la kwanza unalohitaji kufanya ili kuhakikisha tovuti yako inafanya kazi kwa ufanisi ni kukusanya data kuhusu utendaji wake. Mahali pa kwanza pa kufanya hivyo ni katika zana za msanidi programu za kivinjari chako cha mtandao. Katika Edge, unaweza kuchagua kitufe cha "Mipangilio na zaidi" (ikoni ya nukta tatu juu kulia ya kivinjari), kisha uende kwenye Zana Zaidi > Zana za Msanidi Programu na kufungua kichupo cha Utendaji. Unaweza pia kutumia njia za mkato za kibodi `Ctrl` + `Shift` + `I` kwenye Windows au `Option` + `Command` + `I` kwenye Mac kufungua zana za msanidi programu.
+
+Kichupo cha Utendaji kina chombo cha Profaili. Fungua tovuti (jaribu, kwa mfano, [https://www.microsoft.com](https://www.microsoft.com/?WT.mc_id=academic-77807-sagibbon)) na bonyeza kitufe cha 'Rekodi', kisha upya tovuti. Acha kurekodi wakati wowote, na utaweza kuona taratibu zinazozalishwa ili 'kuandika', 'kutoa', na 'kupaka rangi' tovuti:
+
+![Edge profiler](../../../../translated_images/profiler.5a4a62479c5df01cfec9aab74173dba13f91d2c968e1a1ae434c26165792df15.sw.png)
+
+✅ Tembelea [Nyaraka za Microsoft](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) kuhusu paneli ya Utendaji katika Edge
+
+> Kidokezo: ili kupata usomaji sahihi wa muda wa kuanza wa tovuti yako, futa akiba ya kivinjari chako
+
+Chagua vipengele vya ratiba ya profaili ili kukuza matukio yanayotokea wakati ukurasa wako unapopakia.
+
+Pata muhtasari wa utendaji wa ukurasa wako kwa kuchagua sehemu ya ratiba ya profaili na kuangalia paneli ya muhtasari:
+
+![Edge profiler snapshot](../../../../translated_images/snapshot.97750180ebcad73794a3594b36925eb5c8dbaac9e03fec7f9b974188c9ac63c7.sw.png)
+
+Angalia paneli ya Rekodi ya Matukio ili kuona kama kuna tukio lolote lililochukua zaidi ya ms 15:
+
+![Edge event log](../../../../translated_images/log.804026979f3707e00eebcfa028b2b5a88cec6292f858767bb6703afba65a7d9c.sw.png)
+
+✅ Fahamu profaili yako! Fungua zana za msanidi programu kwenye tovuti hii na uone kama kuna vikwazo vyovyote. Ni mali gani inayopakia polepole zaidi? Haraka zaidi?
+
+## Ukaguzi wa Profaili
+
+Kwa ujumla, kuna baadhi ya "eneo la matatizo" ambalo kila msanidi programu wa mtandao anapaswa kuangalia anapojenga tovuti ili kuepuka mshangao mbaya wakati wa kupeleka kwenye uzalishaji.
+
+**Ukubwa wa mali**: Mtandao umekuwa 'mzito', na hivyo polepole, katika miaka ya hivi karibuni. Baadhi ya uzito huu unahusiana na matumizi ya picha.
+
+✅ Tazama kupitia [Arki za Mtandao](https://httparchive.org/reports/page-weight) kwa mtazamo wa kihistoria wa uzito wa ukurasa na zaidi.
+
+Mazoezi mazuri ni kuhakikisha kuwa picha zako zimeboreshwa na zinatolewa kwa ukubwa sahihi na azimio kwa watumiaji wako.
+
+**Uchunguzi wa DOM**: Kivinjari kinapaswa kujenga Mfano wa Kitu cha Nyaraka kulingana na msimbo unaoandika, kwa hivyo ni kwa maslahi ya utendaji mzuri wa ukurasa kuweka lebo zako kuwa ndogo, ukitumia na kuunda tu kile ambacho ukurasa unahitaji. Kwa hatua hii, CSS ya ziada inayohusishwa na ukurasa inaweza kuboreshwa; mitindo inayohitajika kutumika tu kwenye ukurasa mmoja haitahitaji kujumuishwa kwenye karatasi kuu ya mitindo, kwa mfano.
+
+**JavaScript**: Kila msanidi programu wa JavaScript anapaswa kuangalia 'skripti zinazozuia utoaji' ambazo lazima zipakuliwe kabla ya DOM nyingine kutazamwa na kupakwa rangi kwenye kivinjari. Fikiria kutumia `defer` na skripti zako za ndani (kama inavyofanyika katika moduli ya Terrarium).
+
+✅ Jaribu baadhi ya tovuti kwenye [Tovuti ya Mtihani wa Kasi ya Tovuti](https://www.webpagetest.org/) ili kujifunza zaidi kuhusu ukaguzi wa kawaida unaofanywa ili kubaini utendaji wa tovuti.
+
+Sasa kwa kuwa una wazo la jinsi kivinjari kinavyotoa mali unazotuma kwake, hebu tuangalie mambo machache ya mwisho unayohitaji kufanya ili kukamilisha kiendelezi chako:
+
+### Unda kazi ya kuhesabu rangi
+
+Ukifanya kazi katika `/src/index.js`, ongeza kazi inayoitwa `calculateColor()` baada ya mfululizo wa `const` unaoweka ili kupata ufikiaji wa 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 } });
+}
+```
+
+Nini kinaendelea hapa? Unapitisha thamani (ukali wa kaboni) kutoka kwa API uliyokamilisha katika somo la mwisho, kisha unahesabu jinsi thamani yake ilivyo karibu na faharasa iliyowasilishwa katika safu ya rangi. Kisha unapeleka thamani ya rangi iliyo karibu zaidi kwa runtime ya chrome.
+
+Runtime ya chrome ina [API](https://developer.chrome.com/extensions/runtime) inayoshughulikia aina zote za kazi za nyuma, na kiendelezi chako kinatumia hiyo:
+
+> "Tumia API ya chrome.runtime kupata ukurasa wa nyuma, kurudisha maelezo kuhusu manifest, na kusikiliza na kujibu matukio katika mzunguko wa maisha wa programu au kiendelezi. Unaweza pia kutumia API hii kubadilisha njia ya jamaa ya URL kuwa URL zilizo na sifa kamili."
+
+✅ Ikiwa unakua kiendelezi hiki cha kivinjari kwa Edge, inaweza kushangaza kwamba unatumia API ya chrome. Matoleo mapya ya kivinjari cha Edge yanaendesha injini ya kivinjari ya Chromium, kwa hivyo unaweza kutumia zana hizi.
+
+> Kumbuka, ikiwa unataka kuprofaili kiendelezi cha kivinjari, fungua zana za msanidi programu kutoka ndani ya kiendelezi chenyewe, kwani ni kivinjari chake tofauti.
+
+### Weka rangi ya ikoni ya msingi
+
+Sasa, katika kazi ya `init()`, weka ikoni kuwa kijani cha kawaida kuanza kwa tena kuita hatua ya `updateIcon` ya chrome:
+
+```JavaScript
+chrome.runtime.sendMessage({
+	action: 'updateIcon',
+		value: {
+			color: 'green',
+		},
+});
+```
+
+### Ita kazi, tekeleza mwito
+
+Kisha, ita kazi hiyo uliyounda kwa kuiongeza kwenye ahadi inayorejeshwa na API ya C02Signal:
+
+```JavaScript
+//let CO2...
+calculateColor(CO2);
+```
+
+Na hatimaye, katika `/dist/background.js`, ongeza msikilizaji wa miito hii ya hatua za nyuma:
+
+```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);
+}
+```
+
+Katika msimbo huu, unaongeza msikilizaji wa ujumbe wowote unaokuja kwa msimamizi wa kazi za nyuma. Ikiwa unaitwa 'updateIcon', basi msimbo unaofuata unatekelezwa kuchora ikoni ya rangi sahihi kwa kutumia API ya Canvas.
+
+✅ Utajifunza zaidi kuhusu API ya Canvas katika [Masomo ya Mchezo wa Anga](../../6-space-game/2-drawing-to-canvas/README.md).
+
+Sasa, jenga upya kiendelezi chako (`npm run build`), upya na uzindue kiendelezi chako, na uangalie rangi ikibadilika. Je, ni wakati mzuri wa kufanya shughuli au kuosha vyombo? Sasa unajua!
+
+Hongera, umejenga kiendelezi cha kivinjari chenye manufaa na kujifunza zaidi kuhusu jinsi kivinjari kinavyofanya kazi na jinsi ya kuprofaili utendaji wake.
+
+---
+
+## 🚀 Changamoto
+
+Chunguza baadhi ya tovuti za chanzo huria ambazo zimekuwepo kwa muda mrefu, na, kulingana na historia yao ya GitHub, angalia kama unaweza kubaini jinsi zilivyoboreshwa kwa miaka kwa utendaji, ikiwa ziliboreshwa. Ni eneo gani la matatizo linalojirudia zaidi?
+
+## Maswali ya Baada ya Somo
+
+[Maswali ya baada ya somo](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/28)
+
+## Mapitio na Kujisomea
+
+Fikiria kujisajili kwa [jarida la utendaji](https://perf.email/)
+
+Chunguza baadhi ya njia ambazo vivinjari hupima utendaji wa mtandao kwa kuangalia kupitia vichupo vya utendaji katika zana zao za mtandao. Je, unapata tofauti kubwa yoyote?
+
+## Kazi
+
+[Chambua tovuti kwa utendaji](assignment.md)
+
+---
+
+**Kanusho**:  
+Hati hii imetafsiriwa kwa kutumia huduma ya kutafsiri ya AI [Co-op Translator](https://github.com/Azure/co-op-translator). Ingawa tunajitahidi kuhakikisha usahihi, tafadhali fahamu kuwa tafsiri za kiotomatiki zinaweza kuwa na makosa au kutokuwa sahihi. Hati ya asili katika lugha yake ya awali inapaswa kuzingatiwa kama chanzo cha mamlaka. Kwa taarifa muhimu, tafsiri ya kitaalamu ya binadamu inapendekezwa. Hatutawajibika kwa kutoelewana au tafsiri zisizo sahihi zinazotokana na matumizi ya tafsiri hii.
\ No newline at end of file
diff --git a/translations/sw/5-browser-extension/3-background-tasks-and-performance/assignment.md b/translations/sw/5-browser-extension/3-background-tasks-and-performance/assignment.md
new file mode 100644
index 00000000..77a6a68f
--- /dev/null
+++ b/translations/sw/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-28T03:44:36+00:00",
+  "source_file": "5-browser-extension/3-background-tasks-and-performance/assignment.md",
+  "language_code": "sw"
+}
+-->
+# Changanua tovuti kwa utendaji
+
+Toa ripoti ya kina kuhusu tovuti, ikionyesha maeneo ambapo utendaji una matatizo. Changanua kwa nini tovuti ni polepole na nini unaweza kufanya ili kuharakisha. Usitegemee tu zana za kivinjari, bali fanya utafiti kuhusu zana nyingine ambazo zinaweza kusaidia ripoti yako.
+
+## Rubric
+
+| Kigezo   | Bora Zaidi                                                                                                 | Inayotosheleza              | Inahitaji Kuboresha           |
+| -------- | ---------------------------------------------------------------------------------------------------------- | --------------------------- | ----------------------------- |
+|          | Ripoti inatolewa ikiwa na maelezo yanayotokana si tu na zana za kivinjari bali pia zana za watu wengine ikiwa zinapatikana | Ripoti ya msingi inatolewa  | Ripoti ya kiwango cha chini inatolewa |
+
+---
+
+**Kanusho**:  
+Hati hii imetafsiriwa kwa kutumia huduma ya tafsiri ya AI [Co-op Translator](https://github.com/Azure/co-op-translator). Ingawa tunajitahidi kuhakikisha usahihi, tafadhali fahamu kuwa tafsiri za kiotomatiki zinaweza kuwa na makosa au kutokuwa sahihi. Hati ya asili katika lugha yake ya awali inapaswa kuzingatiwa kama chanzo cha mamlaka. Kwa taarifa muhimu, tafsiri ya kitaalamu ya binadamu inapendekezwa. Hatutawajibika kwa kutoelewana au tafsiri zisizo sahihi zinazotokana na matumizi ya tafsiri hii.
\ No newline at end of file
diff --git a/translations/sw/5-browser-extension/README.md b/translations/sw/5-browser-extension/README.md
new file mode 100644
index 00000000..4c63f145
--- /dev/null
+++ b/translations/sw/5-browser-extension/README.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "b121a279a6ab39878491f3e572673515",
+  "translation_date": "2025-08-28T03:38:29+00:00",
+  "source_file": "5-browser-extension/README.md",
+  "language_code": "sw"
+}
+-->
+# Kujenga Kiendelezi cha Kivinjari
+
+Kujenga viendelezi vya vivinjari ni njia ya kufurahisha na ya kuvutia ya kufikiria kuhusu utendaji wa programu zako huku ukijenga aina tofauti ya rasilimali ya wavuti. Moduli hii inajumuisha masomo kuhusu jinsi vivinjari vinavyofanya kazi, jinsi ya kupeleka kiendelezi cha kivinjari, jinsi ya kujenga fomu, kuita API, kutumia hifadhi ya ndani, na jinsi ya kupima utendaji wa tovuti yako na kuiboresha.
+
+Utajenga kiendelezi cha kivinjari kinachofanya kazi kwenye Edge, Chrome, na Firefox. Kiendelezi hiki, ambacho ni kama tovuti ndogo iliyoundwa kwa kazi maalum, huchunguza [C02 Signal API](https://www.co2signal.com) ili kupata matumizi ya umeme na kiwango cha kaboni kwa eneo fulani, na kurudisha ripoti kuhusu athari za kaboni za eneo hilo.
+
+Kiendelezi hiki kinaweza kuitwa na mtumiaji wakati wowote baada ya kuingiza API key na msimbo wa eneo kwenye fomu ili kubaini matumizi ya umeme ya eneo hilo na hivyo kutoa data inayoweza kuathiri maamuzi ya mtumiaji kuhusu matumizi ya umeme. Kwa mfano, inaweza kuwa bora kuchelewesha kutumia mashine ya kukausha nguo (shughuli yenye matumizi makubwa ya kaboni) wakati wa kipindi cha matumizi makubwa ya umeme katika eneo lako.
+
+### Mada
+
+1. [Kuhusu kivinjari](1-about-browsers/README.md)
+2. [Fomu na hifadhi ya ndani](2-forms-browsers-local-storage/README.md)
+3. [Kazi za nyuma na utendaji](3-background-tasks-and-performance/README.md)
+
+### Shukrani
+
+![kiendelezi cha kivinjari cha kijani](../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.sw.png)
+
+## Shukrani
+
+Wazo la kichocheo hiki cha kaboni ya wavuti lilitolewa na Asim Hussain, kiongozi wa Microsoft wa timu ya Green Cloud Advocacy na mwandishi wa [Green Principles](https://principles.green/). Hapo awali lilikuwa [mradi wa tovuti](https://github.com/jlooper/green).
+
+Muundo wa kiendelezi cha kivinjari uliathiriwa na [kiendelezi cha COVID cha Adebola Adeniran](https://github.com/onedebos/covtension).
+
+Wazo la mfumo wa ikoni ya 'nukta' lilipendekezwa na muundo wa ikoni wa [Energy Lollipop](https://energylollipop.com/) kiendelezi cha kivinjari kwa uzalishaji wa California.
+
+Masomo haya yaliandikwa kwa ♥️ na [Jen Looper](https://www.twitter.com/jenlooper)
+
+---
+
+**Kanusho**:  
+Hati hii imetafsiriwa kwa kutumia huduma ya tafsiri ya AI [Co-op Translator](https://github.com/Azure/co-op-translator). Ingawa tunajitahidi kuhakikisha usahihi, tafadhali fahamu kuwa tafsiri za kiotomatiki zinaweza kuwa na makosa au kutokuwa sahihi. Hati ya asili katika lugha yake ya awali inapaswa kuzingatiwa kama chanzo cha mamlaka. Kwa taarifa muhimu, tafsiri ya kitaalamu ya binadamu inapendekezwa. Hatutawajibika kwa kutoelewana au tafsiri zisizo sahihi zinazotokana na matumizi ya tafsiri hii.
\ No newline at end of file
diff --git a/translations/sw/5-browser-extension/solution/README.md b/translations/sw/5-browser-extension/solution/README.md
new file mode 100644
index 00000000..67580424
--- /dev/null
+++ b/translations/sw/5-browser-extension/solution/README.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "fab4e6b4f0efcd587a9029d82991f597",
+  "translation_date": "2025-08-28T03:45:28+00:00",
+  "source_file": "5-browser-extension/solution/README.md",
+  "language_code": "sw"
+}
+-->
+# Kiongezo cha Kivinjari cha Carbon Trigger: Msimbo Uliokamilika
+
+Kwa kutumia API ya C02 Signal ya tmrow kufuatilia matumizi ya umeme, tengeneza kiongezo cha kivinjari ili uweze kuwa na kikumbusho moja kwa moja kwenye kivinjari chako kuhusu uzito wa matumizi ya umeme katika eneo lako. Kutumia kiongezo hiki kwa njia ya ad hoc kutakusaidia kufanya maamuzi kuhusu shughuli zako kulingana na taarifa hizi.
+
+![picha ya kiongezo](../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.sw.png)
+
+## Kuanza
+
+Utahitaji kuwa na [npm](https://npmjs.com) iliyosakinishwa. Pakua nakala ya msimbo huu kwenye folda kwenye kompyuta yako.
+
+Sakinisha vifurushi vyote vinavyohitajika:
+
+```
+npm install
+```
+
+Jenga kiongezo kutoka webpack
+
+```
+npm run build
+```
+
+Ili kusakinisha kwenye Edge, tumia menyu ya 'alama tatu' kwenye kona ya juu kulia ya kivinjari ili kupata paneli ya Viongezo. Kutoka hapo, chagua 'Load Unpacked' ili kupakia kiongezo kipya. Fungua folda ya 'dist' unapoulizwa, na kiongezo kitapakiwa. Ili kutumia, utahitaji API key ya API ya CO2 Signal ([pata moja hapa kupitia barua pepe](https://www.co2signal.com/) - weka barua pepe yako kwenye kisanduku kwenye ukurasa huu) na [msimbo wa eneo lako](http://api.electricitymap.org/v3/zones) unaolingana na [Ramani ya Umeme](https://www.electricitymap.org/map) (kwa mfano, huko Boston, mimi hutumia 'US-NEISO').
+
+![kusakinisha](../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.sw.png)
+
+Baada ya API key na eneo kuingizwa kwenye kiolesura cha kiongezo, nukta ya rangi kwenye upau wa viongezo vya kivinjari inapaswa kubadilika ili kuonyesha matumizi ya nishati ya eneo lako na kukupa mwongozo kuhusu shughuli zinazotumia nishati nyingi ambazo zinafaa kufanya. Wazo nyuma ya mfumo huu wa 'nukta' lilitolewa kwangu na [kiongezo cha Energy Lollipop](https://energylollipop.com/) kwa uzalishaji wa California.
+
+---
+
+**Kanusho**:  
+Hati hii imetafsiriwa kwa kutumia huduma ya kutafsiri ya AI [Co-op Translator](https://github.com/Azure/co-op-translator). Ingawa tunajitahidi kuhakikisha usahihi, tafadhali fahamu kuwa tafsiri za kiotomatiki zinaweza kuwa na makosa au kutokuwa sahihi. Hati asilia katika lugha yake ya awali inapaswa kuzingatiwa kama chanzo cha mamlaka. Kwa taarifa muhimu, tafsiri ya kitaalamu ya binadamu inapendekezwa. Hatutawajibika kwa kutoelewana au tafsiri zisizo sahihi zinazotokana na matumizi ya tafsiri hii.
\ No newline at end of file
diff --git a/translations/sw/5-browser-extension/solution/translation/README.es.md b/translations/sw/5-browser-extension/solution/translation/README.es.md
new file mode 100644
index 00000000..73b10ed9
--- /dev/null
+++ b/translations/sw/5-browser-extension/solution/translation/README.es.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "cbaf73f94a9ab4c680a10ef871e92948",
+  "translation_date": "2025-08-28T03:47:27+00:00",
+  "source_file": "5-browser-extension/solution/translation/README.es.md",
+  "language_code": "sw"
+}
+-->
+# Upanuzi wa Kivinjari wa Carbon Trigger: Msimbo Kamili
+
+Kwa kutumia API ya CO2 Signal ya tmrow kufuatilia matumizi ya umeme, tengeneza upanuzi wa kivinjari ili uweze kuwa na kikumbusho moja kwa moja kwenye kivinjari chako kuhusu matumizi ya umeme katika eneo lako. Kutumia upanuzi huu wa ad hoc kutakusaidia kufanya maamuzi kuhusu shughuli zako kwa kuzingatia taarifa hii.
+
+![picha ya upanuzi](../../../../../translated_images/extension-screenshot.352c4c3ba54e4041ad2f6af749d562cc5705f527b5826efd53d11c3528f5ae45.sw.png)
+
+## Kuanza
+
+Utahitaji kuwa na [npm](https://npmjs.com) imewekwa. Pakua nakala ya msimbo huu kwenye folda ya kompyuta yako.
+
+Sakinisha vifurushi vyote muhimu:
+
+```
+npm install
+```
+
+Jenga upanuzi kutoka webpack:
+
+```
+npm run build
+```
+
+Ili kusakinisha kwenye Edge, tumia menyu ya 'alama tatu' kwenye kona ya juu kulia ya kivinjari ili kupata paneli ya Viongezi. Kutoka hapo, chagua 'Pakia bila kufungasha' ili kupakia upanuzi mpya. Fungua folda ya 'dist' unapoulizwa, na upanuzi utapakiwa. Ili kuitumia, utahitaji ufunguo wa API kwa API ya CO2 Signal ([pata hapa kwa barua pepe](https://www.co2signal.com/) - ingiza barua pepe yako kwenye kisanduku cha ukurasa huu) na [msimbo wa eneo lako](http://api.electricitymap.org/v3/zones) unaolingana na [Ramani ya Umeme](https://www.electricitymap.org/map) (kwa mfano, huko Boston, ninatumia 'US-NEISO').
+
+![kusakinisha](../../../../../translated_images/install-on-edge.8bd0ee3ca7dcda1c5334b5195603a43c864e3b38d088b03d57376d25e77b9459.sw.png)
+
+Baada ya kuingiza ufunguo wa API na eneo kwenye kiolesura cha upanuzi, nukta ya rangi kwenye upau wa upanuzi wa kivinjari inapaswa kubadilika ili kuonyesha matumizi ya nishati ya eneo lako na kukupa kiashiria kuhusu shughuli za matumizi makubwa ya nishati ambazo zinaweza kufaa kwako. Wazo nyuma ya mfumo huu wa "nukta" nililipata kutoka kwa [upanuzi wa Energy Lollipop](https://energylollipop.com/) kwa uzalishaji wa California.
+
+---
+
+**Kanusho**:  
+Hati hii imetafsiriwa kwa kutumia huduma ya kutafsiri ya AI [Co-op Translator](https://github.com/Azure/co-op-translator). Ingawa tunajitahidi kuhakikisha usahihi, tafadhali fahamu kuwa tafsiri za kiotomatiki zinaweza kuwa na makosa au kutokuwa sahihi. Hati ya asili katika lugha yake ya awali inapaswa kuzingatiwa kama chanzo cha mamlaka. Kwa taarifa muhimu, tafsiri ya kitaalamu ya binadamu inapendekezwa. Hatutawajibika kwa kutoelewana au tafsiri zisizo sahihi zinazotokana na matumizi ya tafsiri hii.
\ No newline at end of file
diff --git a/translations/sw/5-browser-extension/solution/translation/README.fr.md b/translations/sw/5-browser-extension/solution/translation/README.fr.md
new file mode 100644
index 00000000..c912971b
--- /dev/null
+++ b/translations/sw/5-browser-extension/solution/translation/README.fr.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "9361268ca430b2579375009e1eceb5e5",
+  "translation_date": "2025-08-28T03:48:34+00:00",
+  "source_file": "5-browser-extension/solution/translation/README.fr.md",
+  "language_code": "sw"
+}
+-->
+# Ugani wa Kivinjari wa Carbon Trigger: Msimbo Uliokamilika
+
+Kwa kutumia API ya C02 Signal kutoka tmrow kufuatilia matumizi ya umeme, tengeneza ugani wa kivinjari ili uweze kupata ukumbusho moja kwa moja kwenye kivinjari chako kuhusu matumizi ya umeme katika eneo lako. Kutumia ugani huu wa dharura kutakusaidia kufanya maamuzi kuhusu shughuli zako kwa kuzingatia taarifa hizi.
+
+![picha ya ugani](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.sw.png)
+
+## Kuanza
+
+Utahitaji kuwa na [npm](https://npmjs.com) iliyosakinishwa. Pakua nakala ya msimbo huu kwenye folda ya kompyuta yako.
+
+Sakinisha vifurushi vyote vinavyohitajika:
+
+```
+npm install
+```
+
+Jenga ugani kutoka webpack
+
+```
+npm run build
+```
+
+Ili kusakinisha kwenye Edge, tumia menyu ya 'alama tatu' kwenye kona ya juu kulia ya kivinjari ili kupata paneli ya Ugani. Kutoka hapo, chagua 'Pakia ugani usiobanwa' ili kupakia ugani mpya. Fungua folda ya 'dist' unapoulizwa, na ugani utapakiwa. Ili kuitumia, utahitaji ufunguo wa API kwa API ya CO2 Signal ([pata moja hapa kwa barua pepe](https://www.co2signal.com/) - ingiza barua pepe yako kwenye kisanduku kwenye ukurasa huu) na [msimbo wa eneo lako](http://api.electricitymap.org/v3/zones) unaolingana na [Ramani ya Umeme](https://www.electricitymap.org/map) (kwa mfano, huko Boston, mimi hutumia 'US-NEISO').
+
+![usakinishaji](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.sw.png)
+
+Baada ya kuingiza ufunguo wa API na eneo kwenye kiolesura cha ugani, nukta ya rangi kwenye upau wa ugani wa kivinjari inapaswa kubadilika ili kuonyesha matumizi ya nishati ya eneo lako na kukupa kiashiria kuhusu shughuli zinazotumia nishati ambazo zinafaa kufanywa. Wazo nyuma ya mfumo huu wa 'nukta' lilinipa msukumo kutoka kwa [ugani wa Energy Lollipop](https://energylollipop.com/) kwa uzalishaji wa hewa chafu huko California.
+
+---
+
+**Kanusho**:  
+Hati hii imetafsiriwa kwa kutumia huduma ya kutafsiri ya AI [Co-op Translator](https://github.com/Azure/co-op-translator). Ingawa tunajitahidi kuhakikisha usahihi, tafadhali fahamu kuwa tafsiri za kiotomatiki zinaweza kuwa na makosa au kutokuwa sahihi. Hati ya asili katika lugha yake ya awali inapaswa kuzingatiwa kama chanzo cha mamlaka. Kwa taarifa muhimu, tafsiri ya kitaalamu ya binadamu inapendekezwa. Hatutawajibika kwa kutokuelewana au tafsiri zisizo sahihi zinazotokana na matumizi ya tafsiri hii.
\ No newline at end of file
diff --git a/translations/sw/5-browser-extension/solution/translation/README.hi.md b/translations/sw/5-browser-extension/solution/translation/README.hi.md
new file mode 100644
index 00000000..05ed0e38
--- /dev/null
+++ b/translations/sw/5-browser-extension/solution/translation/README.hi.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "dd58ae1b7707034f055718c1b68bc8de",
+  "translation_date": "2025-08-28T03:45:59+00:00",
+  "source_file": "5-browser-extension/solution/translation/README.hi.md",
+  "language_code": "sw"
+}
+-->
+# Kiongezo cha Kivinjari cha Carbon Trigger: Msimbo Uliokamilika
+
+Kutumia API ya CO2 Signal ya tmrow kufuatilia matumizi ya umeme, tunajenga kiongezo cha kivinjari ili kukukumbusha jinsi matumizi ya umeme katika eneo lako yalivyo mazito kupitia kivinjari chako. Kutumia kiongezo hiki kwa muda mfupi kutakusaidia kufanya maamuzi kuhusu shughuli zako kulingana na taarifa hii.
+
+![Picha ya skrini ya kiongezo](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.sw.png)
+
+## Kuanza
+
+Unahitaji kusakinisha [npm](https://npmjs.com). Pakua nakala ya msimbo huu kwenye folda kwenye kompyuta yako.
+
+Sakinisha vifurushi vyote muhimu:
+
+```
+npm install
+```
+
+Tengeneza kiongezo kwa kutumia webpack:
+
+```
+npm run build
+```
+
+Ili kusakinisha kwenye Edge, tumia menyu ya 'nukta tatu' kwenye kona ya juu kulia ya kivinjari ili kupata paneli ya viongezo. Kutoka hapo, chagua 'Load unpacked' ili kupakia kiongezo kipya. Fungua folda ya 'dist' kwenye prompt, na kiongezo kitapakiwa. Ili kutumia, utahitaji API key ya CO2 Signal ([ipate kupitia barua pepe hapa](https://www.co2snal.com/) - weka barua pepe yako kwenye kisanduku cha ukurasa huo) na [msimbo wa eneo lako](http://api.electricitymap.org/v3/zones) kutoka [ramani ya umeme](https://www.electricitymap.org/map) (kwa mfano, huko Boston, ninatumia 'US-NEISO').
+
+![kusakinisha](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.sw.png)
+
+Baada ya API key na msimbo wa eneo kuingizwa kwenye kiolesura cha kiongezo, nukta ya rangi kwenye bar ya viongezo vya kivinjari inapaswa kubadilika ili kuonyesha matumizi ya nishati ya eneo lako na kukupa kiashiria cha shughuli nzito za nishati zinazofaa kwa utendaji wako. Wazo la mfumo huu wa 'nukta' lilinipatia na [kiongezo cha Energy Lollipop](https://energylollipop.com/) kwa uzalishaji wa California.
+
+---
+
+**Kanusho**:  
+Hati hii imetafsiriwa kwa kutumia huduma ya kutafsiri ya AI [Co-op Translator](https://github.com/Azure/co-op-translator). Ingawa tunajitahidi kuhakikisha usahihi, tafadhali fahamu kuwa tafsiri za kiotomatiki zinaweza kuwa na makosa au kutokuwa sahihi. Hati ya asili katika lugha yake ya awali inapaswa kuzingatiwa kama chanzo cha mamlaka. Kwa taarifa muhimu, tafsiri ya kitaalamu ya binadamu inapendekezwa. Hatutawajibika kwa kutoelewana au tafsiri zisizo sahihi zinazotokana na matumizi ya tafsiri hii.
\ No newline at end of file
diff --git a/translations/sw/5-browser-extension/solution/translation/README.it.md b/translations/sw/5-browser-extension/solution/translation/README.it.md
new file mode 100644
index 00000000..5fc98374
--- /dev/null
+++ b/translations/sw/5-browser-extension/solution/translation/README.it.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "9a6b22a2eff0f499b66236be973b24ad",
+  "translation_date": "2025-08-28T03:46:28+00:00",
+  "source_file": "5-browser-extension/solution/translation/README.it.md",
+  "language_code": "sw"
+}
+-->
+# Ugani wa Kivinjari wa Carbon Trigger: Msimbo wa Kuanza
+
+Tutatumia API ya Signal CO2 kutoka tmrow kufuatilia matumizi ya umeme ili kuunda ugani wa kivinjari, hivyo kuwa na ukumbusho moja kwa moja kwenye kivinjari chako kuhusu jinsi matumizi ya umeme yalivyo mazito katika eneo lako. Kutumia ugani huu maalum kutasaidia kutathmini shughuli zako kulingana na taarifa hizi.
+
+![picha ya ugani](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.sw.png)
+
+## Kuanza
+
+Ni muhimu kuwa na [npm](https://npmjs.com) iliyosakinishwa. Pakua nakala ya msimbo huu kwenye folda kwenye kompyuta yako.
+
+Sakinisha vifurushi vyote vinavyohitajika:
+
+```
+npm install
+```
+
+Unda ugani kwa kutumia webpack:
+
+```
+npm run build
+```
+
+Ili kusakinisha kwenye Edge, tumia menyu ya "alama tatu" kwenye kona ya juu kulia ya kivinjari ili kupata paneli ya Ugani. Ikiwa haijawashwa tayari, washa Hali ya Msanidi Programu (chini kushoto). Chagua "Pakia isiyoshinikizwa" ili kupakia ugani mpya. Fungua folda ya "dist" kwenye dirisha la maelekezo, na ugani utawekwa. Ili kuitumia, utahitaji ufunguo wa API kwa API ya CO2 Signal (unaweza [kuupata hapa kupitia barua pepe](https://www.co2signal.com/) - weka barua pepe yako kwenye kisanduku kwenye ukurasa huu) na [msimbo wa eneo lako](http://api.electricitymap.org/v3/zones) unaolingana na [ramani ya umeme](https://www.electricitymap.org/map) (kwa mfano, huko Boston, "US-NEISO").
+
+![usakinishaji](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.sw.png)
+
+Mara tu ufunguo wa API na eneo vimeingizwa kwenye kiolesura cha ugani, nukta ya rangi kwenye upau wa ugani wa kivinjari inapaswa kubadilika ili kuonyesha matumizi ya nishati ya eneo hilo na kutoa mwongozo kuhusu shughuli za matumizi makubwa ya nishati zinazofaa kufanywa. Wazo la mfumo huu wa "nukta" lilitolewa na [ugani wa Energy Lollipop](https://energylollipop.com/) kwa uzalishaji wa California.
+
+---
+
+**Kanusho**:  
+Hati hii imetafsiriwa kwa kutumia huduma ya kutafsiri ya AI [Co-op Translator](https://github.com/Azure/co-op-translator). Ingawa tunajitahidi kuhakikisha usahihi, tafadhali fahamu kuwa tafsiri za kiotomatiki zinaweza kuwa na makosa au kutokuwa sahihi. Hati asilia katika lugha yake ya awali inapaswa kuzingatiwa kama chanzo cha mamlaka. Kwa taarifa muhimu, tafsiri ya kitaalamu ya binadamu inapendekezwa. Hatutawajibika kwa kutoelewana au tafsiri zisizo sahihi zinazotokana na matumizi ya tafsiri hii.
\ No newline at end of file
diff --git a/translations/sw/5-browser-extension/solution/translation/README.ja.md b/translations/sw/5-browser-extension/solution/translation/README.ja.md
new file mode 100644
index 00000000..9afb98ed
--- /dev/null
+++ b/translations/sw/5-browser-extension/solution/translation/README.ja.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "3f5e6821e0febccfc5d05e7c944d9e3d",
+  "translation_date": "2025-08-28T03:46:57+00:00",
+  "source_file": "5-browser-extension/solution/translation/README.ja.md",
+  "language_code": "sw"
+}
+-->
+# Kiongezo cha Kivinjari cha Carbon Trigger: Msimbo Uliokamilika
+
+Tunajenga kiongezo cha kivinjari kinachotumia API ya CO2 Signal ya tmrow ili kufuatilia matumizi ya nishati katika eneo lako. Kiongezo hiki kitaonyesha ukumbusho kwenye kivinjari chako kuhusu kiwango cha matumizi ya nishati katika eneo lako. Kwa kutumia kiongezo hiki kwa njia ya ad hoc, unaweza kufanya maamuzi kuhusu shughuli zako kulingana na taarifa hii.
+
+![picha ya kiongezo](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.sw.png)
+
+## Kuanza
+
+Unahitaji kuwa na [npm](https://npmjs.com) iliyosakinishwa. Pakua nakala ya msimbo huu kwenye folda kwenye kompyuta yako.
+
+Sakinisha vifurushi vyote vinavyohitajika.
+
+```
+npm install
+```
+
+Jenga kiongezo kutoka webpack.
+
+```
+npm run build
+```
+
+Ili kusakinisha kwenye Edge, tafuta paneli ya "Viongezo" kutoka kwenye menyu ya "alama tatu" kwenye kona ya juu kulia ya kivinjari. Kutoka hapo, chagua "Load Unpacked" na upakie kiongezo kipya. Fungua folda ya "dist" unapoulizwa, na kiongezo kitawekwa. Ili kutumia, unahitaji API key ya CO2 Signal ([pata moja hapa kupitia barua pepe](https://www.co2signal.com/) - ingiza barua pepe yako kwenye kisanduku cha ukurasa huo) na [code ya eneo lako](http://api.electricitymap.org/v3/zones) inayolingana na [Electricity Map](https://www.electricitymap.org/map) (kwa mfano, Boston hutumia 'US-NEISO').
+
+![kusakinisha](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.sw.png)
+
+Baada ya kuingiza API key na eneo kwenye kiolesura cha kiongezo, nukta yenye rangi itakayoonekana kwenye upau wa viongezo vya kivinjari chako itabadilika ili kuonyesha kiwango cha matumizi ya nishati katika eneo lako. Hii itakusaidia kuamua ni shughuli gani zinazohitaji nishati zinafaa kufanywa. Wazo la mfumo huu wa "nukta" lilitokana na [Energy Lollipop extension](https://energylollipop.com/) kwa ajili ya uzalishaji wa California.
+
+---
+
+**Kanusho**:  
+Hati hii imetafsiriwa kwa kutumia huduma ya kutafsiri ya AI [Co-op Translator](https://github.com/Azure/co-op-translator). Ingawa tunajitahidi kuhakikisha usahihi, tafadhali fahamu kuwa tafsiri za kiotomatiki zinaweza kuwa na makosa au kutokuwa sahihi. Hati ya asili katika lugha yake ya awali inapaswa kuzingatiwa kama chanzo cha mamlaka. Kwa taarifa muhimu, tafsiri ya kitaalamu ya binadamu inapendekezwa. Hatutawajibika kwa kutokuelewana au tafsiri zisizo sahihi zinazotokana na matumizi ya tafsiri hii.
\ No newline at end of file
diff --git a/translations/sw/5-browser-extension/solution/translation/README.ms.md b/translations/sw/5-browser-extension/solution/translation/README.ms.md
new file mode 100644
index 00000000..c184e240
--- /dev/null
+++ b/translations/sw/5-browser-extension/solution/translation/README.ms.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "21b364c158c8e4f698de65eeac16c9fe",
+  "translation_date": "2025-08-28T03:48:00+00:00",
+  "source_file": "5-browser-extension/solution/translation/README.ms.md",
+  "language_code": "sw"
+}
+-->
+# Kiendelezi cha Kivinjari cha Carbon Trigger: Msimbo Kamili
+
+Kwa kutumia API ya Ishara ya CO2 ya tmrow kufuatilia matumizi ya umeme, tengeneza kiendelezi cha kivinjari ili uweze kupokea arifa kwenye kivinjari chako kuhusu uzito wa matumizi ya umeme katika eneo lako. Kutumia kiendelezi hiki hasa kutakusaidia kufanya maamuzi kuhusu shughuli zako kulingana na taarifa hizi.
+
+![picha ya kiendelezi cha kivinjari](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.sw.png)
+
+## Kuanza Hapa
+
+Unahitaji kusakinisha [npm](https://npmjs.com). Pakua nakala ya msimbo huu kwenye folda kwenye kompyuta yako.
+
+Sakinisha vifurushi vyote vinavyohitajika:
+
+```
+npm install
+```
+
+Tengeneza kiendelezi kwa kutumia webpack:
+
+```
+npm run build
+```
+
+Ili kusakinisha kwenye Edge, tumia menyu ya 'alama tatu' kwenye kona ya juu kulia ya kivinjari ili kupata paneli ya Viendelezi. Kutoka hapo, chagua 'Load Unpacked' ili kupakia kiendelezi kipya. Fungua folda ya 'dist' unapoulizwa, na kiendelezi kitapakiwa. Ili kutumia, utahitaji ufunguo wa API kwa API ya Ishara ya CO2 ([pata moja hapa kupitia barua pepe](https://www.co2signal.com/) - weka barua pepe yako kwenye kisanduku kwenye ukurasa huu) na [msimbo wa eneo lako](http://api.electricitymap.org/v3/zones) unaolingana na [Ramani ya Umeme](https://www.electricitymap.org/map) (kwa mfano, huko Boston, mimi hutumia 'US-NEISO').
+
+![kupakua](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.sw.png)
+
+Baada ya ufunguo wa API na eneo kuingizwa kwenye kiolesura cha kiendelezi, nukta ya rangi kwenye upau wa kiendelezi cha kivinjari itabadilika ili kuonyesha matumizi ya nishati ya eneo lako na kukupa mapendekezo kuhusu shughuli nzito zinazofaa kufanya. Wazo la mfumo huu wa 'nukta' lilinipa msukumo kutoka kwa [kiendelezi cha kivinjari cha Energy Lollipop](https://energylollipop.com/) kwa uzalishaji wa California.
+
+---
+
+**Kanusho**:  
+Hati hii imetafsiriwa kwa kutumia huduma ya tafsiri ya AI [Co-op Translator](https://github.com/Azure/co-op-translator). Ingawa tunajitahidi kuhakikisha usahihi, tafsiri za kiotomatiki zinaweza kuwa na makosa au kutokuwa sahihi. Hati ya asili katika lugha yake ya awali inapaswa kuchukuliwa kama chanzo cha mamlaka. Kwa taarifa muhimu, tafsiri ya kitaalamu ya binadamu inapendekezwa. Hatutawajibika kwa kutoelewana au tafsiri zisizo sahihi zinazotokana na matumizi ya tafsiri hii.
\ No newline at end of file
diff --git a/translations/sw/5-browser-extension/start/README.md b/translations/sw/5-browser-extension/start/README.md
new file mode 100644
index 00000000..bcf0e134
--- /dev/null
+++ b/translations/sw/5-browser-extension/start/README.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "26fd39046d264ba185dcb086d3a8cf3e",
+  "translation_date": "2025-08-28T03:44:57+00:00",
+  "source_file": "5-browser-extension/start/README.md",
+  "language_code": "sw"
+}
+-->
+# Kiongezo cha Kivinjari cha Carbon Trigger: Msingi wa Msimbo
+
+Kwa kutumia API ya C02 Signal ya tmrow kufuatilia matumizi ya umeme, tengeneza kiongezo cha kivinjari ili uweze kuwa na kikumbusho moja kwa moja kwenye kivinjari chako kuhusu uzito wa matumizi ya umeme katika eneo lako. Kutumia kiongezo hiki kwa njia ya ad hoc kutakusaidia kufanya maamuzi kuhusu shughuli zako kulingana na taarifa hizi.
+
+![picha ya kiongezo](../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.sw.png)
+
+## Kuanza
+
+Utahitaji kuwa na [npm](https://npmjs.com) iliyosakinishwa. Pakua nakala ya msimbo huu kwenye folda kwenye kompyuta yako.
+
+Sakinisha vifurushi vyote vinavyohitajika:
+
+```
+npm install
+```
+
+Jenga kiongezo kutoka webpack
+
+```
+npm run build
+```
+
+Ili kusakinisha kwenye Edge, tumia menyu ya 'alama tatu' kwenye kona ya juu kulia ya kivinjari ili kupata paneli ya Viongezo. Kutoka hapo, chagua 'Pakia Bila Kufungasha' ili kupakia kiongezo kipya. Fungua folda ya 'dist' unapoulizwa na kiongezo kitapakiwa. Ili kutumia, utahitaji ufunguo wa API kwa API ya CO2 Signal ([pata moja hapa kupitia barua pepe](https://www.co2signal.com/) - weka barua pepe yako kwenye kisanduku kwenye ukurasa huu) na [msimbo wa eneo lako](http://api.electricitymap.org/v3/zones) unaolingana na [Ramani ya Umeme](https://www.electricitymap.org/map) (kwa mfano, huko Boston, natumia 'US-NEISO').
+
+![kusakinisha](../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.sw.png)
+
+Baada ya kuingiza ufunguo wa API na eneo kwenye kiolesura cha kiongezo, nukta ya rangi kwenye upau wa viongezo vya kivinjari inapaswa kubadilika ili kuonyesha matumizi ya nishati ya eneo lako na kukupa mwongozo kuhusu shughuli zinazotumia nishati nyingi ambazo zinafaa kwako kufanya. Wazo nyuma ya mfumo huu wa 'nukta' lilitolewa kwangu na [kiongezo cha Energy Lollipop](https://energylollipop.com/) kwa utoaji wa hewa chafu wa California.
+
+---
+
+**Kanusho**:  
+Hati hii imetafsiriwa kwa kutumia huduma ya kutafsiri ya AI [Co-op Translator](https://github.com/Azure/co-op-translator). Ingawa tunajitahidi kuhakikisha usahihi, tafadhali fahamu kuwa tafsiri za kiotomatiki zinaweza kuwa na makosa au kutokuwa sahihi. Hati ya asili katika lugha yake ya awali inapaswa kuzingatiwa kama chanzo cha mamlaka. Kwa taarifa muhimu, tafsiri ya kitaalamu ya binadamu inapendekezwa. Hatutawajibika kwa kutoelewana au tafsiri zisizo sahihi zinazotokana na matumizi ya tafsiri hii.
\ No newline at end of file
diff --git a/translations/sw/6-space-game/1-introduction/README.md b/translations/sw/6-space-game/1-introduction/README.md
new file mode 100644
index 00000000..d70e6e68
--- /dev/null
+++ b/translations/sw/6-space-game/1-introduction/README.md
@@ -0,0 +1,238 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "d9da6dc61fb712b29f65e108c79b8a5d",
+  "translation_date": "2025-08-28T04:02:16+00:00",
+  "source_file": "6-space-game/1-introduction/README.md",
+  "language_code": "sw"
+}
+-->
+# Jenga Mchezo wa Anga Sehemu ya 1: Utangulizi
+
+![video](../../../../6-space-game/images/pewpew.gif)
+
+## Jaribio la Kabla ya Somo
+
+[Jaribio la kabla ya somo](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/29)
+
+### Urithi na Muundo katika Utengenezaji wa Michezo
+
+Katika masomo ya awali, hakukuwa na haja kubwa ya kufikiria kuhusu usanifu wa programu za programu ulizojenga, kwa kuwa miradi ilikuwa midogo kwa wigo. Hata hivyo, programu zako zinapokua kwa ukubwa na wigo, maamuzi ya usanifu yanakuwa muhimu zaidi. Kuna mbinu mbili kuu za kuunda programu kubwa katika JavaScript: *muundo* au *urithi*. Kuna faida na hasara kwa zote mbili, lakini hebu tuzieleze katika muktadha wa mchezo.
+
+✅ Moja ya vitabu maarufu zaidi vya programu vilivyowahi kuandikwa inahusu [mifumo ya usanifu](https://en.wikipedia.org/wiki/Design_Patterns).
+
+Katika mchezo, una `vitu vya mchezo` ambavyo ni vitu vinavyoonekana kwenye skrini. Hii inamaanisha vina eneo kwenye mfumo wa kuratibu wa Cartesian, unaojulikana kwa kuwa na kuratibu za `x` na `y`. Unapokua na mchezo, utagundua kuwa vitu vyote vya mchezo vina sifa za kawaida, zinazoshirikiana kwa kila mchezo unaounda, yaani vipengele ambavyo ni:
+
+- **vinavyotegemea eneo** Karibu vitu vyote vya mchezo vinategemea eneo. Hii inamaanisha vina eneo, `x` na `y`.
+- **vinavyohamishika** Hivi ni vitu vinavyoweza kuhamia eneo jipya. Kwa kawaida ni shujaa, mnyama au NPC (mhusika asiye mchezaji), lakini si kwa mfano, kitu kisichohamishika kama mti.
+- **vinavyojiharibu** Vitu hivi vinaishi kwa muda maalum kabla ya kujiondoa. Kwa kawaida hii inawakilishwa na boolean ya `dead` au `destroyed` inayoiambia injini ya mchezo kuwa kitu hiki hakipaswi kuonyeshwa tena.
+- **kupoa** 'Kupoa' ni sifa ya kawaida kati ya vitu vya muda mfupi. Mfano wa kawaida ni kipande cha maandishi au athari ya picha kama mlipuko ambao unapaswa kuonekana kwa milisekunde chache tu.
+
+✅ Fikiria kuhusu mchezo kama Pac-Man. Je, unaweza kutambua aina nne za vitu vilivyoorodheshwa hapo juu katika mchezo huu?
+
+### Kuelezea Tabia
+
+Yote tuliyoelezea hapo juu ni tabia ambazo vitu vya mchezo vinaweza kuwa nazo. Kwa hivyo, tunaziwekaje kwenye msimbo? Tunaweza kuelezea tabia hizi kama mbinu zinazohusishwa na darasa au vitu.
+
+**Darasa**
+
+Wazo ni kutumia `darasa` pamoja na `urithi` ili kuongeza tabia fulani kwenye darasa.
+
+✅ Urithi ni dhana muhimu kuelewa. Jifunze zaidi kupitia [makala ya MDN kuhusu urithi](https://developer.mozilla.org/docs/Web/JavaScript/Inheritance_and_the_prototype_chain).
+
+Ikiwa imeonyeshwa kupitia msimbo, kitu cha mchezo kinaweza kuonekana kama hivi:
+
+```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();
+```
+
+✅ Chukua dakika chache kufikiria tena shujaa wa Pac-Man (Inky, Pinky au Blinky, kwa mfano) na jinsi ambavyo ingeandikwa katika JavaScript.
+
+**Muundo**
+
+Njia tofauti ya kushughulikia urithi wa vitu ni kwa kutumia *Muundo*. Kisha, vitu vinaelezea tabia zao kama hivi:
+
+```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'); 
+```
+
+**Ni muundo upi unapaswa kutumia?**
+
+Ni juu yako kuchagua muundo unaopendelea. JavaScript inasaidia paradigms zote mbili.
+
+--
+
+Muundo mwingine wa kawaida katika utengenezaji wa michezo unashughulikia tatizo la kushughulikia uzoefu wa mtumiaji wa mchezo na utendaji.
+
+## Muundo wa Pub/Sub
+
+✅ Pub/Sub inasimama kwa 'chapisha-jiandikishe'
+
+Muundo huu unashughulikia wazo kwamba sehemu tofauti za programu yako hazipaswi kujua kuhusu kila moja. Kwa nini? Inafanya iwe rahisi zaidi kuona kinachoendelea kwa ujumla ikiwa sehemu mbalimbali zimetenganishwa. Pia inafanya iwe rahisi kubadilisha tabia ghafla ikiwa unahitaji. Tunafanikisha hili kwa kuanzisha dhana fulani:
+
+- **ujumbe**: Ujumbe kwa kawaida ni mfuatano wa maandishi unaoambatana na mzigo wa hiari (kipande cha data kinachoeleza ujumbe unahusu nini). Ujumbe wa kawaida katika mchezo unaweza kuwa `KEY_PRESSED_ENTER`.
+- **mchapishaji**: Kipengele hiki *huchapisha* ujumbe na kuutuma kwa wote waliojiandikisha.
+- **mjiandikishaji**: Kipengele hiki *husikiliza* ujumbe maalum na hufanya kazi fulani kama matokeo ya kupokea ujumbe huu, kama vile kufyatua laser.
+
+Utekelezaji ni mdogo kwa ukubwa lakini ni muundo wenye nguvu sana. Hivi ndivyo unavyoweza kutekelezwa:
+
+```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))
+    }
+  }
+}
+
+```
+
+Ili kutumia msimbo hapo juu tunaweza kuunda utekelezaji mdogo sana:
+
+```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)
+  }
+});
+```
+
+Hapo juu tunaunganisha tukio la kibodi, `ArrowLeft` na kutuma ujumbe wa `HERO_MOVE_LEFT`. Tunasikiliza ujumbe huo na kumsogeza `shujaa` kama matokeo. Nguvu ya muundo huu ni kwamba msikilizaji wa tukio na shujaa hawajui kuhusu kila mmoja. Unaweza kubadilisha `ArrowLeft` kuwa kitufe cha `A`. Zaidi ya hayo, inawezekana kufanya kitu tofauti kabisa kwenye `ArrowLeft` kwa kufanya mabadiliko machache kwenye kazi ya `on` ya eventEmitter:
+
+```javascript
+eventEmitter.on(Messages.HERO_MOVE_LEFT, () => {
+  hero.move(5,0);
+});
+```
+
+Mambo yanapokuwa magumu zaidi wakati mchezo wako unakua, muundo huu hubaki sawa kwa ugumu na msimbo wako hubaki safi. Inapendekezwa sana kutumia muundo huu.
+
+---
+
+## 🚀 Changamoto
+
+Fikiria jinsi muundo wa pub-sub unavyoweza kuboresha mchezo. Ni sehemu zipi zinapaswa kutoa matukio, na mchezo unapaswa kujibu vipi? Sasa ni nafasi yako kuwa mbunifu, ukifikiria mchezo mpya na jinsi sehemu zake zinaweza kuishi.
+
+## Jaribio la Baada ya Somo
+
+[Jaribio la baada ya somo](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/30)
+
+## Mapitio na Kujisomea
+
+Jifunze zaidi kuhusu Pub/Sub kwa [kusoma kuhusu hilo](https://docs.microsoft.com/azure/architecture/patterns/publisher-subscriber/?WT.mc_id=academic-77807-sagibbon).
+
+## Kazi
+
+[Chora mfano wa mchezo](assignment.md)
+
+---
+
+**Kanusho**:  
+Hati hii imetafsiriwa kwa kutumia huduma ya kutafsiri ya AI [Co-op Translator](https://github.com/Azure/co-op-translator). Ingawa tunajitahidi kuhakikisha usahihi, tafadhali fahamu kuwa tafsiri za kiotomatiki zinaweza kuwa na makosa au kutokuwa sahihi. Hati ya asili katika lugha yake ya awali inapaswa kuzingatiwa kama chanzo cha mamlaka. Kwa taarifa muhimu, tafsiri ya kitaalamu ya binadamu inapendekezwa. Hatutawajibika kwa kutoelewana au tafsiri zisizo sahihi zinazotokana na matumizi ya tafsiri hii.
\ No newline at end of file
diff --git a/translations/sw/6-space-game/1-introduction/assignment.md b/translations/sw/6-space-game/1-introduction/assignment.md
new file mode 100644
index 00000000..35023d70
--- /dev/null
+++ b/translations/sw/6-space-game/1-introduction/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "009bdedee9cc82988264be8cb31f9bf4",
+  "translation_date": "2025-08-28T04:03:29+00:00",
+  "source_file": "6-space-game/1-introduction/assignment.md",
+  "language_code": "sw"
+}
+-->
+# Unda mchezo
+
+## Maelekezo
+
+Kutumia sampuli za msimbo katika somo, andika uwakilishi wa mchezo unaoupenda. Lazima uwe mchezo rahisi, lakini lengo ni kutumia muundo wa darasa au muundo wa mchanganyiko pamoja na muundo wa pub/sub kuonyesha jinsi mchezo unavyoweza kuzinduliwa. Kuwa mbunifu!
+
+## Rubric
+
+| Vigezo  | Bora kabisa                                           | Inayotosheleza                                      | Inayohitaji Uboreshaji                             |
+| -------- | ----------------------------------------------------- | --------------------------------------------------- | -------------------------------------------------- |
+|          | Vipengele vitatu vimewekwa kwenye skrini na kudhibitiwa | Vipengele viwili vimewekwa kwenye skrini na kudhibitiwa | Kipengele kimoja kimewekwa kwenye skrini na kudhibitiwa |
+
+---
+
+**Kanusho**:  
+Hati hii imetafsiriwa kwa kutumia huduma ya tafsiri ya AI [Co-op Translator](https://github.com/Azure/co-op-translator). Ingawa tunajitahidi kuhakikisha usahihi, tafsiri za kiotomatiki zinaweza kuwa na makosa au kutokuwa sahihi. Hati ya asili katika lugha yake ya awali inapaswa kuchukuliwa kama chanzo cha mamlaka. Kwa taarifa muhimu, tafsiri ya kitaalamu ya binadamu inapendekezwa. Hatutawajibika kwa kutoelewana au tafsiri zisizo sahihi zinazotokana na matumizi ya tafsiri hii.
\ No newline at end of file
diff --git a/translations/sw/6-space-game/2-drawing-to-canvas/README.md b/translations/sw/6-space-game/2-drawing-to-canvas/README.md
new file mode 100644
index 00000000..ce3e6349
--- /dev/null
+++ b/translations/sw/6-space-game/2-drawing-to-canvas/README.md
@@ -0,0 +1,230 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "41be8d35e7f30aa9dad10773c35e89c4",
+  "translation_date": "2025-08-28T03:58:49+00:00",
+  "source_file": "6-space-game/2-drawing-to-canvas/README.md",
+  "language_code": "sw"
+}
+-->
+# Jenga Mchezo wa Anga Sehemu ya 2: Chora Shujaa na Wanyama wa Ajabu kwenye Canvas
+
+## Jaribio la Kabla ya Somo
+
+[Jaribio la kabla ya somo](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/31)
+
+## Canvas
+
+Canvas ni kipengele cha HTML ambacho kwa default hakina maudhui; ni kama ubao tupu. Unahitaji kuongeza maudhui kwa kuchora juu yake.
+
+✅ Soma [zaidi kuhusu Canvas API](https://developer.mozilla.org/docs/Web/API/Canvas_API) kwenye MDN.
+
+Hivi ndivyo kawaida kinavyotangazwa, kama sehemu ya mwili wa ukurasa:
+
+```html
+<canvas id="myCanvas" width="200" height="100"></canvas>
+```
+
+Hapo juu tunaset `id`, `width` na `height`.
+
+- `id`: weka hii ili uweze kupata rejeleo unapohitaji kuingiliana nacho.
+- `width`: hii ni upana wa kipengele.
+- `height`: hii ni urefu wa kipengele.
+
+## Kuchora maumbo rahisi
+
+Canvas inatumia mfumo wa kuratibu wa Cartesian kuchora vitu. Kwa hivyo, inatumia mhimili wa x na mhimili wa y kueleza mahali kitu kilipo. Eneo la `0,0` ni kona ya juu kushoto, na kona ya chini kulia ni kile ulichosema kuwa WIDTH na HEIGHT ya canvas.
+
+![gridi ya canvas](../../../../translated_images/canvas_grid.5f209da785ded492a01ece440e3032afe51efa500cc2308e5ea4252487ceaf0b.sw.png)
+> Picha kutoka [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes)
+
+Ili kuchora kwenye kipengele cha canvas, utahitaji kupitia hatua zifuatazo:
+
+1. **Pata rejeleo** la kipengele cha Canvas.
+1. **Pata rejeleo** la kipengele cha Context kinachokaa kwenye kipengele cha canvas.
+1. **Fanya operesheni ya kuchora** ukitumia kipengele cha context.
+
+Kodi ya hatua zilizo juu kawaida inaonekana kama hivi:
+
+```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 inazingatia zaidi maumbo ya 2D, lakini unaweza pia kuchora vipengele vya 3D kwenye tovuti; kwa hili, unaweza kutumia [WebGL API](https://developer.mozilla.org/docs/Web/API/WebGL_API).
+
+Unaweza kuchora vitu vya aina mbalimbali ukitumia Canvas API kama:
+
+- **Maumbo ya kijiometri**, tayari tumeonyesha jinsi ya kuchora mstatili, lakini kuna mengi zaidi unayoweza kuchora.
+- **Maandishi**, unaweza kuchora maandishi kwa fonti na rangi yoyote unayotaka.
+- **Picha**, unaweza kuchora picha ukitumia mali ya picha kama .jpg au .png kwa mfano.
+
+✅ Jaribu! Unajua jinsi ya kuchora mstatili, unaweza kuchora duara kwenye ukurasa? Angalia baadhi ya michoro ya kuvutia ya Canvas kwenye CodePen. Hapa kuna [mfano wa kuvutia sana](https://codepen.io/dissimulate/pen/KrAwx).
+
+## Pakia na chora mali ya picha
+
+Unapakia mali ya picha kwa kuunda kipengele cha `Image` na kuweka mali yake ya `src`. Kisha unasikiliza tukio la `load` ili kujua wakati iko tayari kutumika. Kodi inaonekana kama hii:
+
+### Pakia mali
+
+```javascript
+const img = new Image();
+img.src = 'path/to/my/image.png';
+img.onload = () => {
+  // image loaded and ready to be used
+}
+```
+
+### Muundo wa kupakia mali
+
+Inapendekezwa kufunga kodi iliyo juu katika muundo kama huu, ili iwe rahisi kutumia na ujaribu kuibadilisha tu wakati imepakiwa kikamilifu:
+
+```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')
+}
+
+```
+
+Ili kuchora mali za mchezo kwenye skrini, kodi yako itaonekana kama hii:
+
+```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);
+}
+```
+
+## Sasa ni wakati wa kuanza kujenga mchezo wako
+
+### Unachopaswa kujenga
+
+Utajenga ukurasa wa wavuti wenye kipengele cha Canvas. Inapaswa kuonyesha skrini nyeusi `1024*768`. Tumekupa picha mbili:
+
+- Meli ya shujaa
+
+   ![Meli ya shujaa](../../../../translated_images/player.dd24c1afa8c71e9b82b2958946d4bad13308681392d4b5ddcc61a0e818ef8088.sw.png)
+
+- Meli ya wanyama wa ajabu 5*5
+
+   ![Meli ya wanyama wa ajabu](../../../../translated_images/enemyShip.5df2a822c16650c2fb3c06652e8ec8120cdb9122a6de46b9a1a56d54db22657f.sw.png)
+
+### Hatua zinazopendekezwa za kuanza maendeleo
+
+Tafuta faili ambazo zimeundwa kwa ajili yako kwenye folda ndogo ya `your-work`. Inapaswa kuwa na yafuatayo:
+
+```bash
+-| assets
+  -| enemyShip.png
+  -| player.png
+-| index.html
+-| app.js
+-| package.json
+```
+
+Fungua nakala ya folda hii kwenye Visual Studio Code. Unahitaji kuwa na mazingira ya maendeleo ya ndani yaliyosetiwa, ikiwezekana na Visual Studio Code ikiwa na NPM na Node imewekwa. Ikiwa huna `npm` kwenye kompyuta yako, [hapa kuna jinsi ya kufanya hivyo](https://www.npmjs.com/get-npm).
+
+Anza mradi wako kwa kuingia kwenye folda ya `your_work`:
+
+```bash
+cd your-work
+npm start
+```
+
+Hapo juu kutaanzisha HTTP Server kwenye anwani `http://localhost:5000`. Fungua kivinjari na ingiza anwani hiyo. Ni ukurasa tupu kwa sasa, lakini hiyo itabadilika.
+
+> Kumbuka: ili kuona mabadiliko kwenye skrini yako, fresha kivinjari chako.
+
+### Ongeza kodi
+
+Ongeza kodi inayohitajika kwenye `your-work/app.js` ili kutatua yafuatayo:
+
+1. **Chora** canvas yenye mandhari nyeusi
+   > kidokezo: ongeza mistari miwili chini ya TODO inayofaa kwenye `/app.js`, ukiseti kipengele cha `ctx` kuwa nyeusi na kuratibu za juu/kushoto kuwa 0,0 na urefu na upana kuwa sawa na canvas.
+2. **Pakia** textures
+   > kidokezo: ongeza picha za mchezaji na adui ukitumia `await loadTexture` na kupitisha njia ya picha. Hautaona kwenye skrini bado!
+3. **Chora** shujaa katikati ya skrini katika nusu ya chini
+   > kidokezo: tumia API ya `drawImage` kuchora heroImg kwenye skrini, ukiseti `canvas.width / 2 - 45` na `canvas.height - canvas.height / 4)`;
+4. **Chora** wanyama wa ajabu 5*5
+   > kidokezo: Sasa unaweza kuondoa maoni ya kodi ya kuchora maadui kwenye skrini. Kisha, nenda kwenye kazi ya `createEnemies` na iunde.
+
+   Kwanza, weka constants:
+
+    ```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;
+    ```
+
+    kisha, unda kitanzi cha kuchora safu ya wanyama wa ajabu kwenye skrini:
+
+    ```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);
+        }
+      }
+    ```
+
+## Matokeo
+
+Matokeo ya mwisho yanapaswa kuonekana kama hivi:
+
+![Skrini nyeusi yenye shujaa na wanyama wa ajabu 5*5](../../../../translated_images/partI-solution.36c53b48c9ffae2a5e15496b23b604ba5393433e4bf91608a7a0a020eb7a2691.sw.png)
+
+## Suluhisho
+
+Tafadhali jaribu kutatua mwenyewe kwanza lakini ukikwama, angalia [suluhisho](../../../../6-space-game/2-drawing-to-canvas/solution/app.js)
+
+---
+
+## 🚀 Changamoto
+
+Umejifunza kuhusu kuchora ukitumia Canvas API inayozingatia 2D; angalia [WebGL API](https://developer.mozilla.org/docs/Web/API/WebGL_API), na jaribu kuchora kipengele cha 3D.
+
+## Jaribio la Baada ya Somo
+
+[Jaribio la baada ya somo](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/32)
+
+## Mapitio na Kujisomea
+
+Jifunze zaidi kuhusu Canvas API kwa [kusoma kuhusu hilo](https://developer.mozilla.org/docs/Web/API/Canvas_API).
+
+## Kazi
+
+[Cheza na Canvas API](assignment.md)
+
+---
+
+**Kanusho**:  
+Hati hii imetafsiriwa kwa kutumia huduma ya kutafsiri ya AI [Co-op Translator](https://github.com/Azure/co-op-translator). Ingawa tunajitahidi kuhakikisha usahihi, tafadhali fahamu kuwa tafsiri za kiotomatiki zinaweza kuwa na makosa au kutokuwa sahihi. Hati ya asili katika lugha yake ya awali inapaswa kuzingatiwa kama chanzo cha mamlaka. Kwa taarifa muhimu, tafsiri ya kitaalamu ya binadamu inapendekezwa. Hatutawajibika kwa kutoelewana au tafsiri zisizo sahihi zinazotokana na matumizi ya tafsiri hii.
\ No newline at end of file
diff --git a/translations/sw/6-space-game/2-drawing-to-canvas/assignment.md b/translations/sw/6-space-game/2-drawing-to-canvas/assignment.md
new file mode 100644
index 00000000..61ce8375
--- /dev/null
+++ b/translations/sw/6-space-game/2-drawing-to-canvas/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "ca1cf78a4c60df77ab32a154ec024d7f",
+  "translation_date": "2025-08-28T04:00:01+00:00",
+  "source_file": "6-space-game/2-drawing-to-canvas/assignment.md",
+  "language_code": "sw"
+}
+-->
+# Cheza na Canvas API
+
+## Maelekezo
+
+Chagua kipengele kimoja cha Canvas API na unda kitu cha kuvutia kuzunguka nacho. Je, unaweza kuunda galaksi ndogo ya nyota zinazojirudia? Je, unaweza kuunda muundo wa kuvutia wa mistari ya rangi? Unaweza kutazama CodePen kwa msukumo (lakini usinakili).
+
+## Rubric
+
+| Vigezo   | Bora                                                     | Inayotosheleza                     | Inahitaji Kuboresha   |
+| -------- | -------------------------------------------------------- | ---------------------------------- | --------------------- |
+|          | Nambari imewasilishwa ikionyesha muundo au umbo la kuvutia | Nambari imewasilishwa, lakini haifanyi kazi | Nambari haijawasilishwa |
+
+---
+
+**Kanusho**:  
+Hati hii imetafsiriwa kwa kutumia huduma ya tafsiri ya AI [Co-op Translator](https://github.com/Azure/co-op-translator). Ingawa tunajitahidi kwa usahihi, tafadhali fahamu kuwa tafsiri za kiotomatiki zinaweza kuwa na makosa au kutokuwa sahihi. Hati ya asili katika lugha yake ya awali inapaswa kuzingatiwa kama chanzo cha mamlaka. Kwa taarifa muhimu, inashauriwa kutumia huduma ya tafsiri ya kitaalamu ya binadamu. Hatutawajibika kwa maelewano mabaya au tafsiri zisizo sahihi zinazotokana na matumizi ya tafsiri hii.
\ No newline at end of file
diff --git a/translations/sw/6-space-game/3-moving-elements-around/README.md b/translations/sw/6-space-game/3-moving-elements-around/README.md
new file mode 100644
index 00000000..e98c94c3
--- /dev/null
+++ b/translations/sw/6-space-game/3-moving-elements-around/README.md
@@ -0,0 +1,402 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "23f088add24f0f1fa51014a9e27ea280",
+  "translation_date": "2025-08-28T03:52:30+00:00",
+  "source_file": "6-space-game/3-moving-elements-around/README.md",
+  "language_code": "sw"
+}
+-->
+# Jenga Mchezo wa Anga Sehemu ya 3: Kuongeza Mwendo
+
+## Jaribio la Kabla ya Somo
+
+[Jaribio la kabla ya somo](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/33)
+
+Michezo haiwi ya kufurahisha sana hadi pale unapokuwa na viumbe wa kigeni wakizunguka kwenye skrini! Katika mchezo huu, tutatumia aina mbili za mwendo:
+
+- **Mwendo wa Kibodi/Panya**: pale mtumiaji anaposhirikiana na kibodi au panya ili kusogeza kitu kwenye skrini.
+- **Mwendo unaosababishwa na mchezo**: pale mchezo unapohamisha kitu kwa muda maalum.
+
+Kwa hiyo, tunahamishaje vitu kwenye skrini? Yote inahusu kuratibu kwa kutumia mfumo wa Cartesian: tunabadilisha eneo (x, y) la kitu na kisha kuchora tena skrini.
+
+Kwa kawaida, unahitaji hatua zifuatazo ili kufanikisha *mwendo* kwenye skrini:
+
+1. **Weka eneo jipya** la kitu; hii inahitajika ili kuonekana kama kitu kimesogea.
+2. **Futa skrini**, skrini inahitaji kufutwa kati ya michoro. Tunaweza kuifuta kwa kuchora mstatili na kuujaza kwa rangi ya mandharinyuma.
+3. **Chora tena kitu** kwenye eneo jipya. Kwa kufanya hivi, tunafanikisha kusogeza kitu kutoka eneo moja hadi jingine.
+
+Hivi ndivyo inavyoweza kuonekana kwenye msimbo:
+
+```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);
+```
+
+✅ Je, unaweza kufikiria sababu kwa nini kuchora tena shujaa wako mara nyingi kwa sekunde kunaweza kusababisha gharama za utendaji? Soma kuhusu [mbadala wa muundo huu](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas).
+
+## Kushughulikia Matukio ya Kibodi
+
+Unashughulikia matukio kwa kuambatanisha matukio maalum na msimbo. Matukio ya kibodi huchochewa kwenye dirisha lote wakati matukio ya panya kama `click` yanaweza kuunganishwa na kubofya kipengele maalum. Tutatumia matukio ya kibodi katika mradi huu wote.
+
+Ili kushughulikia tukio, unahitaji kutumia njia ya `addEventListener()` ya dirisha na kuipatia vigezo viwili vya pembejeo. Kigezo cha kwanza ni jina la tukio, kwa mfano `keyup`. Kigezo cha pili ni kazi ambayo inapaswa kuitwa kama matokeo ya tukio kutokea.
+
+Hapa kuna mfano:
+
+```javascript
+window.addEventListener('keyup', (evt) => {
+  // `evt.key` = string representation of the key
+  if (evt.key === 'ArrowUp') {
+    // do something
+  }
+})
+```
+
+Kwa matukio ya funguo, kuna mali mbili kwenye tukio unazoweza kutumia kuona ni funguo gani ilibonyezwa:
+
+- `key`, hii ni uwakilishi wa kamba wa funguo iliyobonyezwa, kwa mfano `ArrowUp`
+- `keyCode`, hii ni uwakilishi wa nambari, kwa mfano `37`, inahusiana na `ArrowLeft`.
+
+✅ Udhibiti wa matukio ya funguo ni muhimu hata nje ya maendeleo ya michezo. Je, unaweza kufikiria matumizi mengine ya mbinu hii?
+
+### Funguo Maalum: Tahadhari
+
+Kuna funguo zingine *maalum* ambazo huathiri dirisha. Hii inamaanisha kuwa ikiwa unasikiliza tukio la `keyup` na unatumia funguo hizi maalum kusogeza shujaa wako, pia itasababisha kurasa kusogea kwa usawa. Kwa sababu hiyo, unaweza kutaka *kuzima* tabia hii ya kawaida ya kivinjari unapojenga mchezo wako. Unahitaji msimbo kama huu:
+
+```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);
+```
+
+Msimbo hapo juu utahakikisha kuwa funguo za mishale na funguo ya nafasi zimezimwa tabia yao ya *kawaida*. Utaratibu wa *kuzima* hutokea tunapopiga `e.preventDefault()`.
+
+## Mwendo Unaosababishwa na Mchezo
+
+Tunaweza kufanya vitu visogee vyenyewe kwa kutumia vipima muda kama vile kazi ya `setTimeout()` au `setInterval()` ambayo inasasisha eneo la kitu kwa kila muda maalum. Hivi ndivyo inavyoweza kuonekana:
+
+```javascript
+let id = setInterval(() => {
+  //move the enemy on the y axis
+  enemy.y += 10;
+})
+```
+
+## Mzunguko wa Mchezo
+
+Mzunguko wa mchezo ni dhana ambayo kimsingi ni kazi inayochochewa kwa vipindi vya kawaida. Unaitwa mzunguko wa mchezo kwa sababu kila kitu kinachopaswa kuonekana kwa mtumiaji kinachorwa ndani ya mzunguko. Mzunguko wa mchezo hutumia vitu vyote vya mchezo ambavyo ni sehemu ya mchezo, kuchora vyote isipokuwa kwa sababu fulani havipaswi kuwa sehemu ya mchezo tena. Kwa mfano, ikiwa kitu ni adui aliyepigwa na miale ya laser na kulipuka, hakipo tena katika mzunguko wa sasa wa mchezo (utajifunza zaidi kuhusu hili katika masomo yanayofuata).
+
+Hivi ndivyo mzunguko wa mchezo unavyoweza kuonekana, ukiwakilishwa kwa msimbo:
+
+```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);
+```
+
+Mzunguko hapo juu unachochewa kila baada ya milisekunde `200` ili kuchora tena canvas. Una uwezo wa kuchagua muda bora unaofaa kwa mchezo wako.
+
+## Kuendelea na Mchezo wa Anga
+
+Utachukua msimbo uliopo na kuupanua. Ama anza na msimbo uliokamilisha wakati wa sehemu ya I au tumia msimbo katika [Sehemu ya II - mwanzo](../../../../6-space-game/3-moving-elements-around/your-work).
+
+- **Kusogeza shujaa**: utaongeza msimbo kuhakikisha unaweza kusogeza shujaa kwa kutumia funguo za mishale.
+- **Kusogeza maadui**: pia utahitaji kuongeza msimbo kuhakikisha maadui wanasogea kutoka juu kwenda chini kwa kasi fulani.
+
+## Hatua Zinazopendekezwa
+
+Tafuta faili ambazo zimeundwa kwa ajili yako kwenye folda ndogo ya `your-work`. Inapaswa kuwa na yafuatayo:
+
+```bash
+-| assets
+  -| enemyShip.png
+  -| player.png
+-| index.html
+-| app.js
+-| package.json
+```
+
+Anzisha mradi wako kwenye folda ya `your_work` kwa kuandika:
+
+```bash
+cd your-work
+npm start
+```
+
+Hii itaanzisha Seva ya HTTP kwenye anwani `http://localhost:5000`. Fungua kivinjari na uweke anwani hiyo, kwa sasa inapaswa kuonyesha shujaa na maadui wote; hakuna kinachosogea - bado!
+
+### Ongeza Msimbo
+
+1. **Ongeza vitu maalum** kwa `hero`, `enemy`, na `game object`, vinapaswa kuwa na mali za `x` na `y`. (Kumbuka sehemu kuhusu [Urithi au muundo](../README.md)).
+
+   *KIDOKEZO* `game object` inapaswa kuwa na `x` na `y` na uwezo wa kujichora kwenye canvas.
+
+   >kidokezo: anza kwa kuongeza darasa jipya la GameObject na mjengo wake kama ifuatavyo, kisha ichore kwenye 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);
+      }
+    }
+    ```
+
+    Sasa, panua GameObject ili kuunda Hero na 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. **Ongeza vishughulikia matukio ya funguo** kushughulikia urambazaji wa funguo (sogeza shujaa juu/chini kushoto/kulia).
+
+   *KUMBUKA* ni mfumo wa Cartesian, kona ya juu-kushoto ni `0,0`. Pia kumbuka kuongeza msimbo wa kusimamisha *tabia ya kawaida*.
+
+   >kidokezo: unda kazi yako ya onKeyDown na uambatanishe kwenye dirisha:
+
+   ```javascript
+    let onKeyDown = function (e) {
+	      console.log(e.keyCode);
+	        ...add the code from the lesson above to stop default behavior
+	      }
+    };
+
+    window.addEventListener("keydown", onKeyDown);
+   ```
+    
+   Angalia koni ya kivinjari chako kwa wakati huu, na uangalie funguo zinazobonyezwa zikiripotiwa.
+
+3. **Tekeleza** [Mfumo wa Pub sub](../README.md), hii itahakikisha msimbo wako unasalia safi unapofuata sehemu zinazobaki.
+
+   Ili kufanya sehemu hii ya mwisho, unaweza:
+
+   1. **Ongeza msikilizaji wa tukio** kwenye dirisha:
+
+       ```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. **Unda darasa la EventEmitter** kuchapisha na kujiandikisha kwa ujumbe:
+
+        ```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. **Ongeza vigezo vya kudumu** na usanidi 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. **Anzisha mchezo**
+
+    ```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. **Sanidi mzunguko wa mchezo**
+
+   Rekebisha kazi ya window.onload ili kuanzisha mchezo na kusanidi mzunguko wa mchezo kwa muda mzuri. Pia utaongeza miale ya 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. **Ongeza msimbo** wa kusogeza maadui kwa muda fulani
+
+    Rekebisha kazi ya `createEnemies()` ili kuunda maadui na kuwasukuma kwenye darasa jipya la 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);
+        }
+      }
+    }
+    ```
+    
+    na ongeza kazi ya `createHero()` kufanya mchakato sawa kwa shujaa.
+    
+    ```javascript
+    function createHero() {
+      hero = new Hero(
+        canvas.width / 2 - 45,
+        canvas.height - canvas.height / 4
+      );
+      hero.img = heroImg;
+      gameObjects.push(hero);
+    }
+    ```
+
+    na hatimaye, ongeza kazi ya `drawGameObjects()` ili kuanza kuchora:
+
+    ```javascript
+    function drawGameObjects(ctx) {
+      gameObjects.forEach(go => go.draw(ctx));
+    }
+    ```
+
+    Maadui wako wanapaswa kuanza kusonga kuelekea kwenye chombo cha anga cha shujaa wako!
+
+---
+
+## 🚀 Changamoto
+
+Kama unavyoona, msimbo wako unaweza kuwa 'msimbo wa tambi' unapoongeza kazi, vigezo, na madarasa. Unawezaje kupanga msimbo wako vizuri zaidi ili uwe rahisi kusoma? Chora mfumo wa kupanga msimbo wako, hata kama bado unakaa kwenye faili moja.
+
+## Jaribio la Baada ya Somo
+
+[Jaribio la baada ya somo](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/34)
+
+## Mapitio na Kujisomea
+
+Ingawa tunaandika mchezo wetu bila kutumia mifumo, kuna mifumo mingi ya JavaScript inayotegemea canvas kwa ajili ya maendeleo ya michezo. Chukua muda kufanya [usomaji kuhusu hizi](https://github.com/collections/javascript-game-engines).
+
+## Kazi
+
+[Toa maoni kwenye msimbo wako](assignment.md)
+
+---
+
+**Kanusho**:  
+Hati hii imetafsiriwa kwa kutumia huduma ya kutafsiri ya AI [Co-op Translator](https://github.com/Azure/co-op-translator). Ingawa tunajitahidi kuhakikisha usahihi, tafadhali fahamu kuwa tafsiri za kiotomatiki zinaweza kuwa na makosa au kutokuwa sahihi. Hati ya asili katika lugha yake ya awali inapaswa kuzingatiwa kama chanzo cha mamlaka. Kwa taarifa muhimu, tafsiri ya kitaalamu ya binadamu inapendekezwa. Hatutawajibika kwa kutoelewana au tafsiri zisizo sahihi zinazotokana na matumizi ya tafsiri hii.
\ No newline at end of file
diff --git a/translations/sw/6-space-game/3-moving-elements-around/assignment.md b/translations/sw/6-space-game/3-moving-elements-around/assignment.md
new file mode 100644
index 00000000..6bf99e90
--- /dev/null
+++ b/translations/sw/6-space-game/3-moving-elements-around/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "ccfcd8c2932761359fbaff3d6b01ace4",
+  "translation_date": "2025-08-28T03:54:04+00:00",
+  "source_file": "6-space-game/3-moving-elements-around/assignment.md",
+  "language_code": "sw"
+}
+-->
+# Toa Maoni Kwenye Nambari Yako
+
+## Maelekezo
+
+Pitisha faili yako ya sasa ya /app.js kwenye folda ya mchezo wako, na tafuta njia za kutoa maoni na kuipanga vizuri. Ni rahisi sana kwa nambari kuharibika, na sasa ni nafasi nzuri ya kuongeza maoni ili kuhakikisha kuwa una nambari inayosomeka ili uweze kuitumia baadaye.
+
+## Rubric
+
+| Vigezo   | Bora Kabisa                                                      | Inayotosheleza                      | Inayohitaji Uboreshaji                                         |
+| -------- | ---------------------------------------------------------------- | ----------------------------------- | ------------------------------------------------------------- |
+|          | Nambari ya `app.js` imepewa maoni kikamilifu na imepangwa katika sehemu za kimantiki | Nambari ya `app.js` imepewa maoni vya kutosha | Nambari ya `app.js` imepangwa vibaya na inakosa maoni mazuri |
+
+---
+
+**Kanusho**:  
+Hati hii imetafsiriwa kwa kutumia huduma ya tafsiri ya AI [Co-op Translator](https://github.com/Azure/co-op-translator). Ingawa tunajitahidi kuhakikisha usahihi, tafsiri za kiotomatiki zinaweza kuwa na makosa au kutokuwa sahihi. Hati ya asili katika lugha yake ya awali inapaswa kuchukuliwa kama chanzo cha mamlaka. Kwa taarifa muhimu, tafsiri ya kitaalamu ya binadamu inapendekezwa. Hatutawajibika kwa kutoelewana au tafsiri zisizo sahihi zinazotokana na matumizi ya tafsiri hii.
\ No newline at end of file
diff --git a/translations/sw/6-space-game/4-collision-detection/README.md b/translations/sw/6-space-game/4-collision-detection/README.md
new file mode 100644
index 00000000..5973fd89
--- /dev/null
+++ b/translations/sw/6-space-game/4-collision-detection/README.md
@@ -0,0 +1,311 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "2e83e38c35dc003f046d7cc0bbfd4920",
+  "translation_date": "2025-08-28T03:56:31+00:00",
+  "source_file": "6-space-game/4-collision-detection/README.md",
+  "language_code": "sw"
+}
+-->
+# Jenga Mchezo wa Anga Sehemu ya 4: Kuongeza Laser na Kugundua Migongano
+
+## Maswali ya Awali ya Somo
+
+[Maswali ya awali ya somo](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/35)
+
+Katika somo hili utajifunza jinsi ya kurusha laser kwa kutumia JavaScript! Tutaongeza vitu viwili kwenye mchezo wetu:
+
+- **Laser**: laser hii inarushwa kutoka kwenye chombo cha shujaa wako na kwenda juu wima.
+- **Ugunduzi wa migongano**, kama sehemu ya kutekeleza uwezo wa *kurusha*, tutaongeza sheria nzuri za mchezo:
+   - **Laser inagonga adui**: Adui hufa ikiwa atagongwa na laser.
+   - **Laser inagonga sehemu ya juu ya skrini**: Laser inaharibiwa ikiwa itagonga sehemu ya juu ya skrini.
+   - **Adui na shujaa wanagongana**: Adui na shujaa wanaharibiwa ikiwa watagongana.
+   - **Adui anagonga chini ya skrini**: Adui na shujaa wanaharibiwa ikiwa adui atagonga chini ya skrini.
+
+Kwa ufupi, wewe -- *shujaa* -- unahitaji kugonga maadui wote kwa laser kabla hawajafika chini ya skrini.
+
+✅ Fanya utafiti kidogo kuhusu mchezo wa kwanza kabisa wa kompyuta uliowahi kuandikwa. Je, ulikuwa na uwezo gani?
+
+Tuwe mashujaa pamoja!
+
+## Ugunduzi wa Migongano
+
+Tunafanyaje ugunduzi wa migongano? Tunahitaji kufikiria vitu vya mchezo wetu kama mstatili unaosogea. Kwa nini? Kwa sababu picha inayotumika kuchora kitu cha mchezo ni mstatili: ina `x`, `y`, `width` na `height`.
+
+Ikiwa mistatili miwili, yaani shujaa na adui *inagongana*, kuna mgongano. Kinachotakiwa kutokea baada ya hapo kinategemea sheria za mchezo. Ili kutekeleza ugunduzi wa migongano unahitaji yafuatayo:
+
+1. Njia ya kupata uwakilishi wa mstatili wa kitu cha mchezo, kitu kama hiki:
+
+   ```javascript
+   rectFromGameObject() {
+     return {
+       top: this.y,
+       left: this.x,
+       bottom: this.y + this.height,
+       right: this.x + this.width
+     }
+   }
+   ```
+
+2. Kazi ya kulinganisha, kazi hii inaweza kuonekana kama hii:
+
+   ```javascript
+   function intersectRect(r1, r2) {
+     return !(r2.left > r1.right ||
+       r2.right < r1.left ||
+       r2.top > r1.bottom ||
+       r2.bottom < r1.top);
+   }
+   ```
+
+## Tunaharibu vipi vitu
+
+Ili kuharibu vitu kwenye mchezo, unahitaji kuujulisha mchezo kwamba haupaswi tena kuchora kipengele hicho kwenye mzunguko wa mchezo unaotokea kwa muda fulani. Njia ya kufanya hivyo ni kuweka alama kitu cha mchezo kama *kimekufa* pale kitu fulani kinapotokea, kama hivi:
+
+```javascript
+// collision happened
+enemy.dead = true
+```
+
+Kisha unaweza kuendelea kuchuja vitu *vilivyokufa* kabla ya kuchora tena skrini, kama hivi:
+
+```javascript
+gameObjects = gameObject.filter(go => !go.dead);
+```
+
+## Tunarushaje laser
+
+Kurusha laser kunamaanisha kujibu tukio la kubonyeza kitufe na kuunda kipengele kinachosogea katika mwelekeo fulani. Kwa hivyo tunahitaji kufanya hatua zifuatazo:
+
+1. **Unda kipengele cha laser**: kutoka juu ya chombo cha shujaa wako, ambacho mara tu kinapoundwa kinaanza kusogea juu kuelekea sehemu ya juu ya skrini.
+2. **Ambatanisha msimbo kwenye tukio la kitufe**: tunahitaji kuchagua kitufe kwenye kibodi kinachowakilisha mchezaji anayepiga laser.
+3. **Unda kipengele cha mchezo kinachoonekana kama laser** pale kitufe kinapobonyezwa.
+
+## Muda wa kupumzika kwa laser yetu
+
+Laser inahitaji kurushwa kila wakati unapobonyeza kitufe, kama *space* kwa mfano. Ili kuzuia mchezo kuzalisha laser nyingi sana kwa muda mfupi, tunahitaji kurekebisha hili. Suluhisho ni kutekeleza kinachoitwa *cooldown*, kipima muda, kinachohakikisha kwamba laser inaweza kurushwa mara chache tu. Unaweza kutekeleza hivyo kwa njia ifuatayo:
+
+```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.
+    }
+  }
+}
+```
+
+✅ Rejelea somo la 1 katika mfululizo wa michezo ya anga ili kujikumbusha kuhusu *cooldowns*.
+
+## Kitu cha Kujenga
+
+Utachukua msimbo uliopo (ambao unapaswa kuwa umesafisha na kuufanyia marekebisho) kutoka somo lililopita, na kuupanua. Anza na msimbo kutoka Sehemu ya II au tumia msimbo katika [Sehemu ya III - mwanzo](../../../../../../../../../your-work).
+
+> tip: laser unayofanyia kazi tayari ipo kwenye folda ya mali zako na imerejelewa na msimbo wako.
+
+- **Ongeza ugunduzi wa migongano**, pale laser inapogongana na kitu, sheria zifuatazo zinapaswa kutumika:
+   1. **Laser inagonga adui**: adui hufa ikiwa atagongwa na laser.
+   2. **Laser inagonga sehemu ya juu ya skrini**: Laser inaharibiwa ikiwa itagonga sehemu ya juu ya skrini yetu.
+   3. **Adui na shujaa wanagongana**: Adui na shujaa wanaharibiwa ikiwa watagongana.
+   4. **Adui anagonga chini ya skrini**: Adui na shujaa wanaharibiwa ikiwa adui atagonga chini ya skrini.
+
+## Hatua Zinazopendekezwa
+
+Tafuta faili ambazo zimeundwa kwa ajili yako kwenye folda ndogo ya `your-work`. Inapaswa kuwa na yafuatayo:
+
+```bash
+-| assets
+  -| enemyShip.png
+  -| player.png
+  -| laserRed.png
+-| index.html
+-| app.js
+-| package.json
+```
+
+Anza mradi wako kwenye folda ya `your_work` kwa kuandika:
+
+```bash
+cd your-work
+npm start
+```
+
+Hii itaanzisha HTTP Server kwenye anwani `http://localhost:5000`. Fungua kivinjari na ingiza anwani hiyo, kwa sasa inapaswa kuonyesha shujaa na maadui wote, hakuna kinachosogea - bado :).
+
+### Ongeza Msimbo
+
+1. **Sanidi uwakilishi wa mstatili wa kipengele chako cha mchezo, ili kushughulikia migongano** Msimbo ulio hapa chini unakuruhusu kupata uwakilishi wa mstatili wa `GameObject`. Hariri darasa lako la GameObject ili kulipanua:
+
+    ```javascript
+    rectFromGameObject() {
+        return {
+          top: this.y,
+          left: this.x,
+          bottom: this.y + this.height,
+          right: this.x + this.width,
+        };
+      }
+    ```
+
+2. **Ongeza msimbo unaochunguza migongano** Hii itakuwa kazi mpya inayojaribu kama mistatili miwili inagongana:
+
+    ```javascript
+    function intersectRect(r1, r2) {
+      return !(
+        r2.left > r1.right ||
+        r2.right < r1.left ||
+        r2.top > r1.bottom ||
+        r2.bottom < r1.top
+      );
+    }
+    ```
+
+3. **Ongeza uwezo wa kurusha laser**
+   1. **Ongeza ujumbe wa tukio la kitufe**. Kitufe cha *space* kinapaswa kuunda laser juu ya chombo cha shujaa. Ongeza vigezo vitatu kwenye kitu cha Messages:
+
+       ```javascript
+        KEY_EVENT_SPACE: "KEY_EVENT_SPACE",
+        COLLISION_ENEMY_LASER: "COLLISION_ENEMY_LASER",
+        COLLISION_ENEMY_HERO: "COLLISION_ENEMY_HERO",
+       ```
+
+   1. **Shughulikia kitufe cha space**. Hariri kazi ya `window.addEventListener` keyup ili kushughulikia space:
+
+      ```javascript
+        } else if(evt.keyCode === 32) {
+          eventEmitter.emit(Messages.KEY_EVENT_SPACE);
+        }
+      ```
+
+    1. **Ongeza wasikilizaji**. Hariri kazi ya `initGame()` ili kuhakikisha kwamba shujaa anaweza kurusha pale space inapobonyezwa:
+
+       ```javascript
+       eventEmitter.on(Messages.KEY_EVENT_SPACE, () => {
+        if (hero.canFire()) {
+          hero.fire();
+        }
+       ```
+
+       na ongeza kazi mpya ya `eventEmitter.on()` ili kuhakikisha tabia pale adui anapogongana na laser:
+
+          ```javascript
+          eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => {
+            first.dead = true;
+            second.dead = true;
+          })
+          ```
+
+   1. **Sogeza kipengele**, Hakikisha laser inasogea juu ya skrini hatua kwa hatua. Utaunda darasa jipya la Laser linalopanua `GameObject`, kama ulivyofanya awali: 
+   
+      ```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. **Shughulikia migongano**, Tekeleza sheria za migongano kwa laser. Ongeza kazi ya `updateGameObjects()` inayojaribu vitu vinavyogongana kwa migongano:
+
+      ```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);
+      }  
+      ```
+
+      Hakikisha unaongeza `updateGameObjects()` kwenye mzunguko wa mchezo wako katika `window.onload`.
+
+   4. **Tekeleza muda wa kupumzika** kwa laser, ili iweze kurushwa mara chache tu.
+
+      Hatimaye, hariri darasa la Hero ili liweze kupumzika:
+
+       ```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;
+        }
+      }
+      ```
+
+Kwa hatua hii, mchezo wako una baadhi ya uwezo! Unaweza kusogea kwa kutumia funguo za mshale, kurusha laser kwa space bar, na maadui wanatoweka unapowagonga. Hongera!
+
+---
+
+## 🚀 Changamoto
+
+Ongeza mlipuko! Angalia mali za mchezo katika [repo ya Space Art](../../../../6-space-game/solution/spaceArt/readme.txt) na jaribu kuongeza mlipuko pale laser inapogonga mgeni.
+
+## Maswali ya Baada ya Somo
+
+[Maswali ya baada ya somo](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/36)
+
+## Mapitio na Kujisomea
+
+Jaribu kubadilisha vipindi kwenye mchezo wako hadi sasa. Nini kinatokea unapovibadilisha? Soma zaidi kuhusu [matukio ya muda ya JavaScript](https://www.freecodecamp.org/news/javascript-timing-events-settimeout-and-setinterval/).
+
+## Kazi
+
+[Chunguza migongano](assignment.md)
+
+---
+
+**Kanusho**:  
+Hati hii imetafsiriwa kwa kutumia huduma ya tafsiri ya AI [Co-op Translator](https://github.com/Azure/co-op-translator). Ingawa tunajitahidi kwa usahihi, tafadhali fahamu kuwa tafsiri za kiotomatiki zinaweza kuwa na makosa au kutokuwa sahihi. Hati asili katika lugha yake ya awali inapaswa kuzingatiwa kama chanzo cha mamlaka. Kwa taarifa muhimu, inashauriwa kutumia huduma ya mtafsiri wa kibinadamu mtaalamu. Hatutawajibika kwa kutoelewana au tafsiri zisizo sahihi zinazotokana na matumizi ya tafsiri hii.
\ No newline at end of file
diff --git a/translations/sw/6-space-game/4-collision-detection/assignment.md b/translations/sw/6-space-game/4-collision-detection/assignment.md
new file mode 100644
index 00000000..8b6c7276
--- /dev/null
+++ b/translations/sw/6-space-game/4-collision-detection/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "8a0a097b45e7c75a611e2795e4013f16",
+  "translation_date": "2025-08-28T03:58:01+00:00",
+  "source_file": "6-space-game/4-collision-detection/assignment.md",
+  "language_code": "sw"
+}
+-->
+# Chunguza Migongano
+
+## Maelekezo
+
+Ili kuelewa vyema jinsi migongano inavyofanya kazi, tengeneza mchezo mdogo sana wenye vitu vichache vinavyogongana. Fanya vitu hivyo viweze kusogea kwa kutumia vitufe vya kibodi au kubofya panya, na hakikisha kitu fulani kinatokea kwa moja ya vitu hivyo kinapogongwa. Inaweza kuwa kitu kama kimondo kinachogonga dunia, au magari yanayogongana. Kuwa mbunifu!
+
+## Rubric
+
+| Vigezo   | Bora kabisa                                                                                                              | Inaridhisha                  | Inahitaji Kuboresha |
+| -------- | ------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | ------------------- |
+|          | Mfano wa msimbo unaofanya kazi kikamilifu umetolewa, na vitu vimechorwa kwenye canvas, migongano ya msingi inatokea, na matokeo yanaonekana | Msimbo haujakamilika kwa namna fulani | Msimbo haufanyi kazi |
+
+---
+
+**Kanusho**:  
+Hati hii imetafsiriwa kwa kutumia huduma ya kutafsiri ya AI [Co-op Translator](https://github.com/Azure/co-op-translator). Ingawa tunajitahidi kuhakikisha usahihi, tafadhali fahamu kuwa tafsiri za kiotomatiki zinaweza kuwa na makosa au kutokuwa sahihi. Hati ya asili katika lugha yake ya awali inapaswa kuzingatiwa kama chanzo cha mamlaka. Kwa taarifa muhimu, tafsiri ya kitaalamu ya binadamu inapendekezwa. Hatutawajibika kwa kutoelewana au tafsiri zisizo sahihi zinazotokana na matumizi ya tafsiri hii.
\ No newline at end of file
diff --git a/translations/sw/6-space-game/4-collision-detection/solution/README.md b/translations/sw/6-space-game/4-collision-detection/solution/README.md
new file mode 100644
index 00000000..4b2fd7b7
--- /dev/null
+++ b/translations/sw/6-space-game/4-collision-detection/solution/README.md
@@ -0,0 +1,15 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "068cbb9b3c10a96d503f6cdd6c9ace8c",
+  "translation_date": "2025-08-28T03:58:21+00:00",
+  "source_file": "6-space-game/4-collision-detection/solution/README.md",
+  "language_code": "sw"
+}
+-->
+Hii ni nafasi ya kujaza, imeachwa wazi kimakusudi
+
+---
+
+**Kanusho**:  
+Hati hii imetafsiriwa kwa kutumia huduma ya kutafsiri ya AI [Co-op Translator](https://github.com/Azure/co-op-translator). Ingawa tunajitahidi kuhakikisha usahihi, tafadhali fahamu kuwa tafsiri za kiotomatiki zinaweza kuwa na makosa au kutokuwa sahihi. Hati ya asili katika lugha yake ya awali inapaswa kuzingatiwa kama chanzo cha mamlaka. Kwa taarifa muhimu, tafsiri ya kitaalamu ya binadamu inapendekezwa. Hatutawajibika kwa kutoelewana au tafsiri zisizo sahihi zinazotokana na matumizi ya tafsiri hii.
\ No newline at end of file
diff --git a/translations/sw/6-space-game/4-collision-detection/your-work/README.md b/translations/sw/6-space-game/4-collision-detection/your-work/README.md
new file mode 100644
index 00000000..78ab32a5
--- /dev/null
+++ b/translations/sw/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-28T03:58:36+00:00",
+  "source_file": "6-space-game/4-collision-detection/your-work/README.md",
+  "language_code": "sw"
+}
+-->
+Hii ni nafasi ya kuweka, imeachwa wazi kwa makusudi
+
+---
+
+**Kanusho**:  
+Hati hii imetafsiriwa kwa kutumia huduma ya kutafsiri ya AI [Co-op Translator](https://github.com/Azure/co-op-translator). Ingawa tunajitahidi kuhakikisha usahihi, tafadhali fahamu kuwa tafsiri za kiotomatiki zinaweza kuwa na makosa au kutokuwa sahihi. Hati ya asili katika lugha yake ya awali inapaswa kuzingatiwa kama chanzo cha mamlaka. Kwa taarifa muhimu, tafsiri ya kitaalamu ya binadamu inapendekezwa. Hatutawajibika kwa kutoelewana au tafsiri zisizo sahihi zinazotokana na matumizi ya tafsiri hii.
\ No newline at end of file
diff --git a/translations/sw/6-space-game/5-keeping-score/README.md b/translations/sw/6-space-game/5-keeping-score/README.md
new file mode 100644
index 00000000..1cdcbcc8
--- /dev/null
+++ b/translations/sw/6-space-game/5-keeping-score/README.md
@@ -0,0 +1,203 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "4e8250db84b027c9ff816b4e4c093457",
+  "translation_date": "2025-08-28T03:54:25+00:00",
+  "source_file": "6-space-game/5-keeping-score/README.md",
+  "language_code": "sw"
+}
+-->
+# Jenga Mchezo wa Anga Sehemu ya 5: Alama na Maisha
+
+## Maswali ya Awali ya Somo
+
+[Maswali ya awali ya somo](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/37)
+
+Katika somo hili, utajifunza jinsi ya kuongeza alama kwenye mchezo na kuhesabu maisha.
+
+## Chora maandishi kwenye skrini
+
+Ili kuweza kuonyesha alama za mchezo kwenye skrini, unahitaji kujua jinsi ya kuweka maandishi kwenye skrini. Jibu ni kutumia njia ya `fillText()` kwenye kitu cha canvas. Unaweza pia kudhibiti vipengele vingine kama fonti ya kutumia, rangi ya maandishi, na hata mpangilio wake (kushoto, kulia, katikati). Hapa chini kuna msimbo unaochora maandishi kwenye skrini.
+
+```javascript
+ctx.font = "30px Arial";
+ctx.fillStyle = "red";
+ctx.textAlign = "right";
+ctx.fillText("show this on the screen", 0, 0);
+```
+
+✅ Soma zaidi kuhusu [jinsi ya kuongeza maandishi kwenye canvas](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_text), na jisikie huru kufanya yako ionekane ya kuvutia zaidi!
+
+## Maisha, kama dhana ya mchezo
+
+Dhana ya kuwa na maisha kwenye mchezo ni namba tu. Katika muktadha wa mchezo wa anga, ni kawaida kupewa seti ya maisha ambayo hupunguzwa moja moja unapopata uharibifu kwenye chombo chako. Ni vizuri ikiwa unaweza kuonyesha uwakilishi wa picha wa hili kama vyombo vidogo au mioyo badala ya namba.
+
+## Kitu cha Kujenga
+
+Tuongeze yafuatayo kwenye mchezo wako:
+
+- **Alama za mchezo**: Kwa kila chombo cha adui kinachoharibiwa, shujaa anapaswa kupewa alama, tunapendekeza alama 100 kwa kila chombo. Alama za mchezo zinapaswa kuonyeshwa chini kushoto.
+- **Maisha**: Chombo chako kina maisha matatu. Unapoteza maisha kila wakati chombo cha adui kinapogongana na chombo chako. Alama ya maisha inapaswa kuonyeshwa chini kulia na iwe na picha ifuatayo ![picha ya maisha](../../../../translated_images/life.6fb9f50d53ee0413cd91aa411f7c296e10a1a6de5c4a4197c718b49bf7d63ebf.sw.png).
+
+## Hatua Zinazopendekezwa
+
+Tafuta faili ambazo zimeundwa kwa ajili yako kwenye folda ndogo ya `your-work`. Inapaswa kuwa na yafuatayo:
+
+```bash
+-| assets
+  -| enemyShip.png
+  -| player.png
+  -| laserRed.png
+-| index.html
+-| app.js
+-| package.json
+```
+
+Anzisha mradi wako kwenye folda ya `your_work` kwa kuandika:
+
+```bash
+cd your-work
+npm start
+```
+
+Hii itaanzisha seva ya HTTP kwenye anwani `http://localhost:5000`. Fungua kivinjari na ingiza anwani hiyo, kwa sasa inapaswa kuonyesha shujaa na maadui wote, na unapobonyeza mishale ya kushoto na kulia, shujaa husogea na anaweza kupiga maadui.
+
+### Ongeza Msimbo
+
+1. **Nakili mali zinazohitajika** kutoka folda ya `solution/assets/` kwenda kwenye folda ya `your-work`; utaongeza mali ya `life.png`. Ongeza lifeImg kwenye kazi ya window.onload:
+
+    ```javascript
+    lifeImg = await loadTexture("assets/life.png");
+    ```
+
+1. Ongeza `lifeImg` kwenye orodha ya mali:
+
+    ```javascript
+    let heroImg,
+    ...
+    lifeImg,
+    ...
+    eventEmitter = new EventEmitter();
+    ```
+  
+2. **Ongeza vigezo**. Ongeza msimbo unaowakilisha alama zako za jumla (0) na maisha yaliyosalia (3), onyesha alama hizi kwenye skrini.
+
+3. **Panua kazi ya `updateGameObjects()`**. Panua kazi ya `updateGameObjects()` kushughulikia migongano ya maadui:
+
+    ```javascript
+    enemies.forEach(enemy => {
+        const heroRect = hero.rectFromGameObject();
+        if (intersectRect(heroRect, enemy.rectFromGameObject())) {
+          eventEmitter.emit(Messages.COLLISION_ENEMY_HERO, { enemy });
+        }
+      })
+    ```
+
+4. **Ongeza `maisha` na `alama`**. 
+   1. **Anzisha vigezo**. Chini ya `this.cooldown = 0` kwenye darasa la `Hero`, weka maisha na alama:
+
+        ```javascript
+        this.life = 3;
+        this.points = 0;
+        ```
+
+   1. **Chora vigezo kwenye skrini**. Chora thamani hizi kwenye skrini:
+
+        ```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. **Ongeza mbinu kwenye mzunguko wa mchezo**. Hakikisha unaongeza kazi hizi kwenye kazi ya window.onload chini ya `updateGameObjects()`:
+
+        ```javascript
+        drawPoints();
+        drawLife();
+        ```
+
+1. **Tekeleza sheria za mchezo**. Tekeleza sheria zifuatazo za mchezo:
+
+   1. **Kwa kila mgongano wa shujaa na adui**, punguza maisha.
+
+      Panua darasa la `Hero` kufanya upunguzaji huu:
+
+        ```javascript
+        decrementLife() {
+          this.life--;
+          if (this.life === 0) {
+            this.dead = true;
+          }
+        }
+        ```
+
+   2. **Kwa kila laser inayogonga adui**, ongeza alama za mchezo kwa alama 100.
+
+      Panua darasa la Hero kufanya ongezeko hili:
+    
+        ```javascript
+          incrementPoints() {
+            this.points += 100;
+          }
+        ```
+
+        Ongeza kazi hizi kwenye Emitters za Matukio ya Migongano:
+
+        ```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();
+        });
+        ```
+
+✅ Fanya utafiti kidogo kugundua michezo mingine iliyoundwa kwa kutumia JavaScript/Canvas. Je, ni sifa gani za kawaida wanazo?
+
+Mwisho wa kazi hii, unapaswa kuona vyombo vidogo vya 'maisha' chini kulia, alama chini kushoto, na unapaswa kuona hesabu ya maisha yako ikipungua unapogongana na maadui na alama zako zikiongezeka unapopiga maadui. Hongera! Mchezo wako karibu umekamilika.
+
+---
+
+## 🚀 Changamoto
+
+Msimbo wako karibu umekamilika. Je, unaweza kufikiria hatua zako zinazofuata?
+
+## Maswali ya Baada ya Somo
+
+[Maswali ya baada ya somo](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/38)
+
+## Mapitio na Kujisomea
+
+Fanya utafiti kuhusu njia ambazo unaweza kuongeza na kupunguza alama za mchezo na maisha. Kuna injini za michezo za kuvutia kama [PlayFab](https://playfab.com). Je, kutumia moja ya hizi kungeboresha mchezo wako?
+
+## Kazi
+
+[Jenga Mchezo wa Alama](assignment.md)
+
+---
+
+**Kanusho**:  
+Hati hii imetafsiriwa kwa kutumia huduma ya kutafsiri ya AI [Co-op Translator](https://github.com/Azure/co-op-translator). Ingawa tunajitahidi kuhakikisha usahihi, tafadhali fahamu kuwa tafsiri za kiotomatiki zinaweza kuwa na makosa au kutokuwa sahihi. Hati asilia katika lugha yake ya awali inapaswa kuchukuliwa kama chanzo cha mamlaka. Kwa taarifa muhimu, tafsiri ya kitaalamu ya binadamu inapendekezwa. Hatutawajibika kwa kutoelewana au tafsiri zisizo sahihi zinazotokana na matumizi ya tafsiri hii.
\ No newline at end of file
diff --git a/translations/sw/6-space-game/5-keeping-score/assignment.md b/translations/sw/6-space-game/5-keeping-score/assignment.md
new file mode 100644
index 00000000..1942c59f
--- /dev/null
+++ b/translations/sw/6-space-game/5-keeping-score/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "81f292dbda01685b91735e0398dc0504",
+  "translation_date": "2025-08-28T03:55:31+00:00",
+  "source_file": "6-space-game/5-keeping-score/assignment.md",
+  "language_code": "sw"
+}
+-->
+# Jenga Mchezo wa Alama
+
+## Maelekezo
+
+Tengeneza mchezo ambapo unaonyesha maisha na alama kwa njia ya ubunifu. Pendekezo ni kuonyesha maisha kama mioyo na alama kama namba kubwa katikati ya sehemu ya chini ya skrini. Angalia hapa kwa [Rasilimali za bure za michezo](https://www.kenney.nl/)
+
+# Rubric
+
+| Vigezo   | Bora kabisa            | Inaridhisha                 | Inahitaji Kuboresha        |
+| -------- | ---------------------- | --------------------------- | -------------------------- |
+|          | mchezo kamili umeonyeshwa | sehemu ya mchezo imeonyeshwa | sehemu ya mchezo ina hitilafu |
+
+---
+
+**Kanusho**:  
+Hati hii imetafsiriwa kwa kutumia huduma ya kutafsiri ya AI [Co-op Translator](https://github.com/Azure/co-op-translator). Ingawa tunajitahidi kuhakikisha usahihi, tafadhali fahamu kuwa tafsiri za kiotomatiki zinaweza kuwa na makosa au kutokuwa sahihi. Hati ya asili katika lugha yake ya awali inapaswa kuzingatiwa kama chanzo cha mamlaka. Kwa taarifa muhimu, tafsiri ya kitaalamu ya binadamu inapendekezwa. Hatutawajibika kwa kutoelewana au tafsiri zisizo sahihi zinazotokana na matumizi ya tafsiri hii.
\ No newline at end of file
diff --git a/translations/sw/6-space-game/5-keeping-score/solution/README.md b/translations/sw/6-space-game/5-keeping-score/solution/README.md
new file mode 100644
index 00000000..0eb3fdfa
--- /dev/null
+++ b/translations/sw/6-space-game/5-keeping-score/solution/README.md
@@ -0,0 +1,15 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "068cbb9b3c10a96d503f6cdd6c9ace8c",
+  "translation_date": "2025-08-28T03:55:51+00:00",
+  "source_file": "6-space-game/5-keeping-score/solution/README.md",
+  "language_code": "sw"
+}
+-->
+Hii ni nafasi ya kuweka, imeachwa wazi kwa makusudi
+
+---
+
+**Kanusho**:  
+Hati hii imetafsiriwa kwa kutumia huduma ya tafsiri ya AI [Co-op Translator](https://github.com/Azure/co-op-translator). Ingawa tunajitahidi kuhakikisha usahihi, tafsiri za kiotomatiki zinaweza kuwa na makosa au kutokuwa sahihi. Hati ya asili katika lugha yake ya awali inapaswa kuchukuliwa kama chanzo cha mamlaka. Kwa taarifa muhimu, tafsiri ya kitaalamu ya binadamu inapendekezwa. Hatutawajibika kwa kutoelewana au tafsiri zisizo sahihi zinazotokana na matumizi ya tafsiri hii.
\ No newline at end of file
diff --git a/translations/sw/6-space-game/5-keeping-score/your-work/README.md b/translations/sw/6-space-game/5-keeping-score/your-work/README.md
new file mode 100644
index 00000000..1be824a9
--- /dev/null
+++ b/translations/sw/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-28T03:56:04+00:00",
+  "source_file": "6-space-game/5-keeping-score/your-work/README.md",
+  "language_code": "sw"
+}
+-->
+Hii ni nafasi ya kuweka, imeachwa wazi kwa makusudi
+
+---
+
+**Kanusho**:  
+Hati hii imetafsiriwa kwa kutumia huduma ya kutafsiri ya AI [Co-op Translator](https://github.com/Azure/co-op-translator). Ingawa tunajitahidi kuhakikisha usahihi, tafadhali fahamu kuwa tafsiri za kiotomatiki zinaweza kuwa na makosa au kutokuwa sahihi. Hati ya asili katika lugha yake ya awali inapaswa kuzingatiwa kama chanzo cha mamlaka. Kwa taarifa muhimu, tafsiri ya kitaalamu ya binadamu inapendekezwa. Hatutawajibika kwa kutokuelewana au tafsiri zisizo sahihi zinazotokana na matumizi ya tafsiri hii.
\ No newline at end of file
diff --git a/translations/sw/6-space-game/6-end-condition/README.md b/translations/sw/6-space-game/6-end-condition/README.md
new file mode 100644
index 00000000..81fb70b7
--- /dev/null
+++ b/translations/sw/6-space-game/6-end-condition/README.md
@@ -0,0 +1,236 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "01336cddd638242e99b133614111ea40",
+  "translation_date": "2025-08-28T04:00:23+00:00",
+  "source_file": "6-space-game/6-end-condition/README.md",
+  "language_code": "sw"
+}
+-->
+# Jenga Mchezo wa Anga Sehemu ya 6: Mwisho na Kuanzisha Tena
+
+## Maswali ya Awali ya Somo
+
+[Maswali ya awali ya somo](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/39)
+
+Kuna njia tofauti za kuonyesha *hali ya mwisho* katika mchezo. Ni juu yako kama mtengenezaji wa mchezo kuamua ni kwa nini mchezo umeisha. Hapa kuna sababu kadhaa, tukizingatia tunazungumzia mchezo wa anga ambao umekuwa ukijenga hadi sasa:
+
+- **`N` Meli za maadui zimeharibiwa**: Ni jambo la kawaida ikiwa unagawanya mchezo katika viwango tofauti kwamba unahitaji kuharibu `N` meli za maadui ili kukamilisha kiwango.
+- **Meli yako imeharibiwa**: Kuna michezo ambapo unapoteza mchezo ikiwa meli yako imeharibiwa. Njia nyingine ya kawaida ni kuwa na dhana ya maisha. Kila wakati meli yako inaharibiwa, inapunguza maisha. Mara maisha yote yanapopotea, basi unapoteza mchezo.
+- **Umekusanya `N` alama**: Hali nyingine ya kawaida ya mwisho ni kukusanya alama. Jinsi unavyopata alama ni juu yako, lakini ni jambo la kawaida kupeana alama kwa shughuli mbalimbali kama kuharibu meli ya adui au labda kukusanya vitu ambavyo vinaweza *kuanguka* wakati vinaharibiwa.
+- **Kukamilisha kiwango**: Hii inaweza kuhusisha masharti kadhaa kama `X` meli za maadui zimeharibiwa, `Y` alama zimekusanywa au labda kwamba kipengele maalum kimekusanywa.
+
+## Kuanzisha Tena
+
+Ikiwa watu wanapenda mchezo wako, kuna uwezekano wa kutaka kuucheza tena. Mara mchezo unapomalizika kwa sababu yoyote, unapaswa kutoa chaguo la kuanzisha tena.
+
+✅ Fikiria kidogo kuhusu masharti ambayo unadhani mchezo unamalizika, na kisha jinsi unavyohimizwa kuanzisha tena.
+
+## Kitu cha Kujenga
+
+Utakuwa unaongeza sheria hizi kwenye mchezo wako:
+
+1. **Kushinda mchezo**. Mara meli zote za maadui zinapoharibiwa, unashinda mchezo. Zaidi ya hayo, onyesha ujumbe wa ushindi.
+1. **Kuanzisha tena**. Mara maisha yako yote yanapopotea au mchezo unashinda, unapaswa kutoa njia ya kuanzisha tena mchezo. Kumbuka! Utahitaji kuanzisha upya mchezo na hali ya awali ya mchezo inapaswa kufutwa.
+
+## Hatua Zinazopendekezwa
+
+Tafuta faili ambazo zimeundwa kwako katika folda ndogo ya `your-work`. Inapaswa kuwa na yafuatayo:
+
+```bash
+-| assets
+  -| enemyShip.png
+  -| player.png
+  -| laserRed.png
+  -| life.png
+-| index.html
+-| app.js
+-| package.json
+```
+
+Anzisha mradi wako katika folda ya `your_work` kwa kuandika:
+
+```bash
+cd your-work
+npm start
+```
+
+Hii itaanzisha Seva ya HTTP kwenye anwani `http://localhost:5000`. Fungua kivinjari na ingiza anwani hiyo. Mchezo wako unapaswa kuwa katika hali inayoweza kuchezwa.
+
+> kidokezo: ili kuepuka maonyo katika Visual Studio Code, hariri kazi ya `window.onload` ili kuita `gameLoopId` kama ilivyo (bila `let`), na tangaza `gameLoopId` juu ya faili, kwa kujitegemea: `let gameLoopId;`
+
+### Ongeza Msimbo
+
+1. **Fuata hali ya mwisho**. Ongeza msimbo unaofuatilia idadi ya maadui, au ikiwa meli ya shujaa imeharibiwa kwa kuongeza kazi hizi mbili:
+
+    ```javascript
+    function isHeroDead() {
+      return hero.life <= 0;
+    }
+
+    function isEnemiesDead() {
+      const enemies = gameObjects.filter((go) => go.type === "Enemy" && !go.dead);
+      return enemies.length === 0;
+    }
+    ```
+
+1. **Ongeza mantiki kwa wahandaji wa ujumbe**. Hariri `eventEmitter` kushughulikia hali hizi:
+
+    ```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. **Ongeza aina mpya za ujumbe**. Ongeza Ujumbe huu kwenye kitu cha constants:
+
+    ```javascript
+    GAME_END_LOSS: "GAME_END_LOSS",
+    GAME_END_WIN: "GAME_END_WIN",
+    ```
+
+2. **Ongeza msimbo wa kuanzisha tena** msimbo unaoanzisha tena mchezo kwa kubonyeza kitufe kilichochaguliwa.
+
+   1. **Sikiliza bonyeza kitufe `Enter`**. Hariri msikilizaji wa tukio la dirisha lako ili kusikiliza bonyeza hili:
+
+    ```javascript
+     else if(evt.key === "Enter") {
+        eventEmitter.emit(Messages.KEY_EVENT_ENTER);
+      }
+    ```
+
+   1. **Ongeza ujumbe wa kuanzisha tena**. Ongeza Ujumbe huu kwenye constants ya Ujumbe wako:
+
+        ```javascript
+        KEY_EVENT_ENTER: "KEY_EVENT_ENTER",
+        ```
+
+1. **Tekeleza sheria za mchezo**. Tekeleza sheria zifuatazo za mchezo:
+
+   1. **Hali ya ushindi wa mchezaji**. Wakati meli zote za maadui zimeharibiwa, onyesha ujumbe wa ushindi.
+
+      1. Kwanza, unda kazi ya `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. Unda kazi ya `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. **Mantiki ya kuanzisha tena**. Wakati maisha yote yanapopotea au mchezaji ameshinda mchezo, onyesha kwamba mchezo unaweza kuanzishwa tena. Zaidi ya hayo, anzisha tena mchezo wakati kitufe cha *kuanzisha tena* kinapobonyezwa (unaweza kuamua ni kitufe gani kinapaswa kuhusishwa na kuanzisha tena).
+
+      1. Unda kazi ya `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. Ongeza mwito kwa `eventEmitter` ili kuanzisha tena mchezo katika `initGame()`:
+
+        ```javascript
+        eventEmitter.on(Messages.KEY_EVENT_ENTER, () => {
+          resetGame();
+        });
+        ```
+
+     1. Ongeza kazi ya `clear()` kwa EventEmitter:
+
+        ```javascript
+        clear() {
+          this.listeners = {};
+        }
+        ```
+
+👽 💥 🚀 Hongera, Kapteni! Mchezo wako umekamilika! Umefanya kazi nzuri! 🚀 💥 👽
+
+---
+
+## 🚀 Changamoto
+
+Ongeza sauti! Je, unaweza kuongeza sauti ili kuboresha uchezaji wa mchezo wako, labda wakati kuna pigo la leza, au shujaa anakufa au kushinda? Angalia [sandbox](https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_audio_play) ili kujifunza jinsi ya kucheza sauti kwa kutumia JavaScript.
+
+## Maswali ya Baada ya Somo
+
+[Maswali ya baada ya somo](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/40)
+
+## Mapitio na Kujisomea
+
+Kazi yako ni kuunda mfano mpya wa mchezo, kwa hivyo chunguza baadhi ya michezo ya kuvutia huko nje ili kuona ni aina gani ya mchezo unaweza kujenga.
+
+## Kazi
+
+[Jenga Mfano wa Mchezo](assignment.md)
+
+---
+
+**Kanusho**:  
+Hati hii imetafsiriwa kwa kutumia huduma ya tafsiri ya AI [Co-op Translator](https://github.com/Azure/co-op-translator). Ingawa tunajitahidi kwa usahihi, tafadhali fahamu kuwa tafsiri za kiotomatiki zinaweza kuwa na makosa au kutokuwa sahihi. Hati ya asili katika lugha yake ya awali inapaswa kuzingatiwa kama chanzo cha mamlaka. Kwa taarifa muhimu, inashauriwa kutumia tafsiri ya kitaalamu ya binadamu. Hatutawajibika kwa maelewano mabaya au tafsiri zisizo sahihi zinazotokana na matumizi ya tafsiri hii.
\ No newline at end of file
diff --git a/translations/sw/6-space-game/6-end-condition/assignment.md b/translations/sw/6-space-game/6-end-condition/assignment.md
new file mode 100644
index 00000000..ebc7ad13
--- /dev/null
+++ b/translations/sw/6-space-game/6-end-condition/assignment.md
@@ -0,0 +1,33 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "24201cf428c7edba1ccec2a78a0dd8f8",
+  "translation_date": "2025-08-28T04:01:28+00:00",
+  "source_file": "6-space-game/6-end-condition/assignment.md",
+  "language_code": "sw"
+}
+-->
+# Jenga Mchezo Mfano
+
+## Maelekezo
+
+Jaribu kujenga mchezo mdogo ambapo unajifunza hali tofauti za kumaliza mchezo. Badilisha kati ya kupata idadi fulani ya pointi, shujaa kupoteza maisha yote au wanyama wote kushindwa. Jenga kitu rahisi kama mchezo wa kusisimua unaotumia console. Tumia mtiririko wa mchezo hapa chini kama msukumo:
+
+```
+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****
+```
+
+## Rubric
+
+| Kigezo   | Bora kabisa            | Inayotosheleza             | Inahitaji Kuboresha         |
+| -------- | ---------------------- | -------------------------- | -------------------------- |
+|          | mchezo kamili umeonyeshwa | mchezo umeonyeshwa kwa sehemu | sehemu ya mchezo ina kasoro |
+
+---
+
+**Kanusho**:  
+Hati hii imetafsiriwa kwa kutumia huduma ya tafsiri ya AI [Co-op Translator](https://github.com/Azure/co-op-translator). Ingawa tunajitahidi kwa usahihi, tafadhali fahamu kuwa tafsiri za kiotomatiki zinaweza kuwa na makosa au kutokuwa sahihi. Hati ya asili katika lugha yake ya awali inapaswa kuzingatiwa kama chanzo cha mamlaka. Kwa taarifa muhimu, inashauriwa kutumia huduma ya tafsiri ya kitaalamu ya binadamu. Hatutawajibika kwa maelewano mabaya au tafsiri zisizo sahihi zinazotokana na matumizi ya tafsiri hii.
\ No newline at end of file
diff --git a/translations/sw/6-space-game/6-end-condition/solution/README.md b/translations/sw/6-space-game/6-end-condition/solution/README.md
new file mode 100644
index 00000000..835eccde
--- /dev/null
+++ b/translations/sw/6-space-game/6-end-condition/solution/README.md
@@ -0,0 +1,15 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "068cbb9b3c10a96d503f6cdd6c9ace8c",
+  "translation_date": "2025-08-28T04:01:48+00:00",
+  "source_file": "6-space-game/6-end-condition/solution/README.md",
+  "language_code": "sw"
+}
+-->
+Hii ni nafasi ya kuweka, imeachwa wazi kwa makusudi
+
+---
+
+**Kanusho**:  
+Hati hii imetafsiriwa kwa kutumia huduma ya kutafsiri ya AI [Co-op Translator](https://github.com/Azure/co-op-translator). Ingawa tunajitahidi kuhakikisha usahihi, tafadhali fahamu kuwa tafsiri za kiotomatiki zinaweza kuwa na makosa au kutokuwa sahihi. Hati ya asili katika lugha yake ya awali inapaswa kuzingatiwa kama chanzo cha mamlaka. Kwa taarifa muhimu, tafsiri ya kitaalamu ya binadamu inapendekezwa. Hatutawajibika kwa kutokuelewana au tafsiri zisizo sahihi zinazotokana na matumizi ya tafsiri hii.
\ No newline at end of file
diff --git a/translations/sw/6-space-game/6-end-condition/your-work/README.md b/translations/sw/6-space-game/6-end-condition/your-work/README.md
new file mode 100644
index 00000000..8a7ecac3
--- /dev/null
+++ b/translations/sw/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-28T04:02:02+00:00",
+  "source_file": "6-space-game/6-end-condition/your-work/README.md",
+  "language_code": "sw"
+}
+-->
+Hii ni nafasi ya kuweka, imeachwa wazi kwa makusudi
+
+---
+
+**Kanusho**:  
+Hati hii imetafsiriwa kwa kutumia huduma ya tafsiri ya AI [Co-op Translator](https://github.com/Azure/co-op-translator). Ingawa tunajitahidi kuhakikisha usahihi, tafadhali fahamu kuwa tafsiri za kiotomatiki zinaweza kuwa na makosa au kutokuwa sahihi. Hati ya asili katika lugha yake ya awali inapaswa kuzingatiwa kama chanzo cha mamlaka. Kwa taarifa muhimu, tafsiri ya kitaalamu ya binadamu inapendekezwa. Hatutawajibika kwa kutoelewana au tafsiri zisizo sahihi zinazotokana na matumizi ya tafsiri hii.
\ No newline at end of file
diff --git a/translations/sw/6-space-game/README.md b/translations/sw/6-space-game/README.md
new file mode 100644
index 00000000..a7f3a3a0
--- /dev/null
+++ b/translations/sw/6-space-game/README.md
@@ -0,0 +1,45 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "c40a698395ee5102715f7880bba3f2e7",
+  "translation_date": "2025-08-28T03:52:01+00:00",
+  "source_file": "6-space-game/README.md",
+  "language_code": "sw"
+}
+-->
+# Jenga Mchezo wa Anga
+
+Mchezo wa anga wa kufundisha misingi ya hali ya juu ya JavaScript
+
+Katika somo hili utajifunza jinsi ya kujenga mchezo wako wa anga. Ikiwa umewahi kucheza mchezo wa "Space Invaders", mchezo huu una wazo sawa: kuongoza chombo cha anga na kufyatua risasi kwa viumbe wa ajabu wanaoshuka kutoka juu. Hivi ndivyo mchezo utakavyokuwa ukimalizika:
+
+![Mchezo uliokamilika](../../../6-space-game/images/pewpew.gif)
+
+Katika masomo haya sita utajifunza yafuatayo:
+
+- **Kushirikiana** na kipengele cha Canvas kuchora vitu kwenye skrini
+- **Kuelewa** mfumo wa kuratibu wa Cartesian
+- **Kujifunza** muundo wa Pub-Sub ili kuunda usanifu wa mchezo ulio rahisi kudumisha na kupanua
+- **Kufaidika** na Async/Await kupakia rasilimali za mchezo
+- **Kushughulikia** matukio ya kibodi
+
+## Muhtasari
+
+- Nadharia
+   - [Utangulizi wa kujenga michezo kwa JavaScript](1-introduction/README.md)
+- Mazoezi
+   - [Kuchora kwenye canvas](2-drawing-to-canvas/README.md)
+   - [Kusogeza vitu kwenye skrini](3-moving-elements-around/README.md)
+   - [Kutambua migongano](4-collision-detection/README.md)
+   - [Kuweka alama za ushindi](5-keeping-score/README.md)
+   - [Kumaliza na kuanzisha tena mchezo](6-end-condition/README.md)
+
+## Shukrani
+
+Rasilimali zilizotumika kwa hili zilitoka https://www.kenney.nl/.  
+Ikiwa unapenda kujenga michezo, hizi ni rasilimali nzuri sana, nyingi ni za bure na nyingine ni za kulipia.
+
+---
+
+**Kanusho**:  
+Hati hii imetafsiriwa kwa kutumia huduma ya tafsiri ya AI [Co-op Translator](https://github.com/Azure/co-op-translator). Ingawa tunajitahidi kuhakikisha usahihi, tafsiri za kiotomatiki zinaweza kuwa na makosa au kutokuwa sahihi. Hati ya asili katika lugha yake ya awali inapaswa kuchukuliwa kama chanzo cha mamlaka. Kwa taarifa muhimu, tafsiri ya kitaalamu ya binadamu inapendekezwa. Hatutawajibika kwa kutoelewana au tafsiri zisizo sahihi zinazotokana na matumizi ya tafsiri hii.
\ No newline at end of file
diff --git a/translations/sw/6-space-game/solution/README.md b/translations/sw/6-space-game/solution/README.md
new file mode 100644
index 00000000..3e398f67
--- /dev/null
+++ b/translations/sw/6-space-game/solution/README.md
@@ -0,0 +1,15 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "068cbb9b3c10a96d503f6cdd6c9ace8c",
+  "translation_date": "2025-08-28T03:56:17+00:00",
+  "source_file": "6-space-game/solution/README.md",
+  "language_code": "sw"
+}
+-->
+Hii ni nafasi ya kuweka, imeachwa wazi kwa makusudi
+
+---
+
+**Kanusho**:  
+Hati hii imetafsiriwa kwa kutumia huduma ya kutafsiri ya AI [Co-op Translator](https://github.com/Azure/co-op-translator). Ingawa tunajitahidi kuhakikisha usahihi, tafadhali fahamu kuwa tafsiri za kiotomatiki zinaweza kuwa na makosa au kutokuwa sahihi. Hati ya asili katika lugha yake ya awali inapaswa kuzingatiwa kama chanzo cha mamlaka. Kwa taarifa muhimu, tafsiri ya kitaalamu ya binadamu inapendekezwa. Hatutawajibika kwa kutokuelewana au tafsiri zisizo sahihi zinazotokana na matumizi ya tafsiri hii.
\ No newline at end of file
diff --git a/translations/sw/7-bank-project/1-template-route/README.md b/translations/sw/7-bank-project/1-template-route/README.md
new file mode 100644
index 00000000..e1069463
--- /dev/null
+++ b/translations/sw/7-bank-project/1-template-route/README.md
@@ -0,0 +1,322 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "8da1b5e2c63f749808858c53f37b8ce7",
+  "translation_date": "2025-08-28T03:35:55+00:00",
+  "source_file": "7-bank-project/1-template-route/README.md",
+  "language_code": "sw"
+}
+-->
+# Jenga Programu ya Benki Sehemu ya 1: Violezo vya HTML na Njia katika Programu ya Wavuti
+
+## Maswali ya Kabla ya Somo
+
+[Jaribio la kabla ya somo](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/41)
+
+### Utangulizi
+
+Tangu kuanzishwa kwa JavaScript kwenye vivinjari, tovuti zimekuwa za mwingiliano zaidi na ngumu zaidi kuliko hapo awali. Teknolojia za wavuti sasa zinatumika sana kuunda programu kamili zinazofanya kazi moja kwa moja kwenye kivinjari, tunazoziita [programu za wavuti](https://en.wikipedia.org/wiki/Web_application). Kwa kuwa programu za wavuti ni za mwingiliano wa hali ya juu, watumiaji hawataki kusubiri upakiaji wa ukurasa mzima kila wakati kitendo kinapofanywa. Ndiyo maana JavaScript inatumika kusasisha HTML moja kwa moja kwa kutumia DOM, ili kutoa uzoefu laini wa mtumiaji.
+
+Katika somo hili, tutaweka misingi ya kuunda programu ya benki ya wavuti, kwa kutumia violezo vya HTML kuunda skrini nyingi ambazo zinaweza kuonyeshwa na kusasishwa bila kupakia upya ukurasa mzima wa HTML.
+
+### Mahitaji ya Awali
+
+Unahitaji seva ya wavuti ya ndani ili kujaribu programu ya wavuti tutakayojenga katika somo hili. Ikiwa huna, unaweza kusakinisha [Node.js](https://nodejs.org) na kutumia amri `npx lite-server` kutoka kwenye folda ya mradi wako. Hii itaunda seva ya wavuti ya ndani na kufungua programu yako kwenye kivinjari.
+
+### Maandalizi
+
+Kwenye kompyuta yako, tengeneza folda inayoitwa `bank` na faili inayoitwa `index.html` ndani yake. Tutaanza na [msingi wa HTML](https://en.wikipedia.org/wiki/Boilerplate_code) huu:
+
+```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>
+```
+
+---
+
+## Violezo vya HTML
+
+Ikiwa unataka kuunda skrini nyingi kwa ukurasa wa wavuti, suluhisho moja litakuwa kuunda faili moja ya HTML kwa kila skrini unayotaka kuonyesha. Hata hivyo, suluhisho hili lina changamoto kadhaa:
+
+- Lazima upakie upya HTML nzima unapobadilisha skrini, jambo ambalo linaweza kuwa polepole.
+- Ni vigumu kushiriki data kati ya skrini tofauti.
+
+Njia nyingine ni kuwa na faili moja tu ya HTML, na kufafanua [violezo vya HTML](https://developer.mozilla.org/docs/Web/HTML/Element/template) vingi kwa kutumia kipengele cha `<template>`. Kiolezo ni kipande cha HTML kinachoweza kutumika tena ambacho hakionyeshwi na kivinjari, na kinahitaji kuanzishwa wakati wa utekelezaji kwa kutumia JavaScript.
+
+### Kazi
+
+Tutaunda programu ya benki yenye skrini mbili: ukurasa wa kuingia na dashibodi. Kwanza, ongeza kipengele cha nafasi katika mwili wa HTML ambacho tutatumia kuanzisha skrini tofauti za programu yetu:
+
+```html
+<div id="app">Loading...</div>
+```
+
+Tunatoa kipengele hiki `id` ili iwe rahisi kukipata kwa JavaScript baadaye.
+
+> Kidokezo: kwa kuwa maudhui ya kipengele hiki yatabadilishwa, tunaweza kuweka ujumbe wa kupakia au kiashiria ambacho kitaonyeshwa wakati programu inajipakia.
+
+Kisha, ongeza kiolezo cha HTML kwa ukurasa wa kuingia. Kwa sasa tutaweka tu kichwa na sehemu yenye kiungo ambacho tutatumia kufanya urambazaji.
+
+```html
+<template id="login">
+  <h1>Bank App</h1>
+  <section>
+    <a href="/dashboard">Login</a>
+  </section>
+</template>
+```
+
+Halafu tutaongeza kiolezo kingine cha HTML kwa ukurasa wa dashibodi. Ukurasa huu utakuwa na sehemu tofauti:
+
+- Kichwa chenye jina na kiungo cha kutoka
+- Mizania ya sasa ya akaunti ya benki
+- Orodha ya miamala, inayoonyeshwa kwenye jedwali
+
+```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>
+```
+
+> Kidokezo: unapounda violezo vya HTML, ikiwa unataka kuona jinsi vitakavyoonekana, unaweza kutoa maoni kwenye mistari ya `<template>` na `</template>` kwa kuzifunga na `<!-- -->`.
+
+✅ Kwa nini unadhani tunatumia sifa za `id` kwenye violezo? Je, tungeweza kutumia kitu kingine kama madarasa?
+
+## Kuonyesha violezo kwa JavaScript
+
+Ukijaribu faili yako ya sasa ya HTML kwenye kivinjari, utaona kwamba inakwama ikionyesha `Loading...`. Hii ni kwa sababu tunahitaji kuongeza msimbo wa JavaScript ili kuanzisha na kuonyesha violezo vya HTML.
+
+Kuanzisha kiolezo kawaida hufanywa kwa hatua 3:
+
+1. Pata kipengele cha kiolezo kwenye DOM, kwa mfano kwa kutumia [`document.getElementById`](https://developer.mozilla.org/docs/Web/API/Document/getElementById).
+2. Nakili kipengele cha kiolezo, kwa kutumia [`cloneNode`](https://developer.mozilla.org/docs/Web/API/Node/cloneNode).
+3. Kiunganishe kwenye DOM chini ya kipengele kinachoonekana, kwa mfano kwa kutumia [`appendChild`](https://developer.mozilla.org/docs/Web/API/Node/appendChild).
+
+✅ Kwa nini tunahitaji kunakili kiolezo kabla ya kukiunganisha kwenye DOM? Unadhani nini kingetokea kama tungeacha hatua hii?
+
+### Kazi
+
+Tengeneza faili mpya inayoitwa `app.js` kwenye folda ya mradi wako na uingize faili hiyo kwenye sehemu ya `<head>` ya HTML yako:
+
+```html
+<script src="app.js" defer></script>
+```
+
+Sasa kwenye `app.js`, tutaunda kazi mpya inayoitwa `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);
+}
+```
+
+Tunachofanya hapa ni hatua zile zile 3 zilizoelezwa hapo juu. Tunaanzisha kiolezo chenye kitambulisho `templateId`, na kuweka maudhui yake yaliyonakiliwa ndani ya nafasi ya programu yetu. Kumbuka kwamba tunahitaji kutumia `cloneNode(true)` ili kunakili mti mzima wa kiolezo.
+
+Sasa ita kazi hii na moja ya violezo na uangalie matokeo.
+
+```js
+updateRoute('login');
+```
+
+✅ Madhumuni ya msimbo huu `app.innerHTML = '';` ni nini? Nini hutokea bila hiyo?
+
+## Kuunda njia
+
+Tunapozungumzia programu ya wavuti, tunaita *Urambazaji* nia ya kuoanisha **URLs** na skrini maalum ambazo zinapaswa kuonyeshwa. Katika tovuti yenye faili nyingi za HTML, hii hufanyika kiotomatiki kwa kuwa njia za faili zinaonyeshwa kwenye URL. Kwa mfano, ukiwa na faili hizi kwenye folda ya mradi wako:
+
+```
+mywebsite/index.html
+mywebsite/login.html
+mywebsite/admin/index.html
+```
+
+Ukiunda seva ya wavuti na `mywebsite` kama mzizi, ulinganifu wa URL utakuwa:
+
+```
+https://site.com            --> mywebsite/index.html
+https://site.com/login.html --> mywebsite/login.html
+https://site.com/admin/     --> mywebsite/admin/index.html
+```
+
+Hata hivyo, kwa programu yetu ya wavuti tunatumia faili moja ya HTML iliyo na skrini zote, kwa hivyo tabia hii ya msingi haitatusaidia. Tunapaswa kuunda ramani hii kwa mikono na kusasisha kiolezo kinachoonyeshwa kwa kutumia JavaScript.
+
+### Kazi
+
+Tutatumia kitu rahisi kutekeleza [ramani](https://en.wikipedia.org/wiki/Associative_array) kati ya njia za URL na violezo vyetu. Ongeza kitu hiki mwanzoni mwa faili yako ya `app.js`.
+
+```js
+const routes = {
+  '/login': { templateId: 'login' },
+  '/dashboard': { templateId: 'dashboard' },
+};
+```
+
+Sasa wacha tubadilishe kidogo kazi ya `updateRoute`. Badala ya kupitisha moja kwa moja `templateId` kama hoja, tunataka kuipata kwa kwanza kuangalia URL ya sasa, halafu kutumia ramani yetu kupata thamani ya kitambulisho cha kiolezo kinacholingana. Tunaweza kutumia [`window.location.pathname`](https://developer.mozilla.org/docs/Web/API/Location/pathname) kupata sehemu ya njia kutoka kwenye 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);
+}
+```
+
+Hapa tumeoanisha njia tulizotangaza na kiolezo kinacholingana. Unaweza kujaribu kuona kama inafanya kazi kwa kubadilisha URL kwa mikono kwenye kivinjari chako.
+
+✅ Nini hutokea ukiingiza njia isiyojulikana kwenye URL? Tunawezaje kutatua hili?
+
+## Kuongeza urambazaji
+
+Hatua inayofuata kwa programu yetu ni kuongeza uwezekano wa kuvinjari kati ya kurasa bila kubadilisha URL kwa mikono. Hii inajumuisha mambo mawili:
+
+1. Kusasisha URL ya sasa
+2. Kusasisha kiolezo kinachoonyeshwa kulingana na URL mpya
+
+Tayari tulishughulikia sehemu ya pili na kazi ya `updateRoute`, kwa hivyo tunapaswa kufikiria jinsi ya kusasisha URL ya sasa.
+
+Tutahitaji kutumia JavaScript na hasa [`history.pushState`](https://developer.mozilla.org/docs/Web/API/History/pushState) ambayo inaruhusu kusasisha URL na kuunda ingizo jipya kwenye historia ya kuvinjari, bila kupakia upya HTML.
+
+> Kidokezo: Ingawa kipengele cha HTML cha nanga [`<a href>`](https://developer.mozilla.org/docs/Web/HTML/Element/a) kinaweza kutumika peke yake kuunda viungo vya URL tofauti, kitafanya kivinjari kipakie upya HTML kwa chaguo-msingi. Ni muhimu kuzuia tabia hii wakati wa kushughulikia urambazaji kwa JavaScript maalum, kwa kutumia kazi ya `preventDefault()` kwenye tukio la kubofya.
+
+### Kazi
+
+Tengeneza kazi mpya ambayo tunaweza kutumia kuvinjari kwenye programu yetu:
+
+```js
+function navigate(path) {
+  window.history.pushState({}, path, path);
+  updateRoute();
+}
+```
+
+Njia hii kwanza inasasisha URL ya sasa kulingana na njia iliyotolewa, kisha inasasisha kiolezo. Sifa ya `window.location.origin` inarudisha mzizi wa URL, ikituruhusu kuunda URL kamili kutoka kwa njia iliyotolewa.
+
+Sasa kwa kuwa tuna kazi hii, tunaweza kushughulikia tatizo tulilonalo ikiwa njia haifanani na njia yoyote iliyofafanuliwa. Tutabadilisha kazi ya `updateRoute` kwa kuongeza njia ya kurudi kwa moja ya njia zilizopo ikiwa hatuwezi kupata mechi.
+
+```js
+function updateRoute() {
+  const path = window.location.pathname;
+  const route = routes[path];
+
+  if (!route) {
+    return navigate('/login');
+  }
+
+  ...
+```
+
+Ikiwa njia haiwezi kupatikana, sasa tutarudi kwenye ukurasa wa `login`.
+
+Sasa wacha tuunde kazi ya kupata URL wakati kiungo kinabofya, na kuzuia tabia ya kawaida ya kiungo cha kivinjari:
+
+```js
+function onLinkClick(event) {
+  event.preventDefault();
+  navigate(event.target.href);
+}
+```
+
+Wacha tukamilishe mfumo wa urambazaji kwa kuongeza viungo kwenye viungo vyetu vya *Login* na *Logout* kwenye HTML.
+
+```html
+<a href="/dashboard" onclick="onLinkClick(event)">Login</a>
+...
+<a href="/login" onclick="onLinkClick(event)">Logout</a>
+```
+
+Kipengele cha `event` hapo juu, kinakamata tukio la `click` na kukipitisha kwenye kazi yetu ya `onLinkClick`.
+
+Kwa kutumia sifa ya [`onclick`](https://developer.mozilla.org/docs/Web/API/GlobalEventHandlers/onclick) funga tukio la `click` kwenye msimbo wa JavaScript, hapa ni wito wa kazi ya `navigate()`.
+
+Jaribu kubofya viungo hivi, sasa unapaswa kuwa na uwezo wa kuvinjari kati ya skrini tofauti za programu yako.
+
+✅ Njia ya `history.pushState` ni sehemu ya kiwango cha HTML5 na kutekelezwa katika [vivinjari vyote vya kisasa](https://caniuse.com/?search=pushState). Ikiwa unajenga programu ya wavuti kwa vivinjari vya zamani, kuna mbinu unaweza kutumia badala ya API hii: kutumia [alama ya reli (`#`)](https://en.wikipedia.org/wiki/URI_fragment) kabla ya njia unaweza kutekeleza urambazaji unaofanya kazi na urambazaji wa kawaida wa nanga na haupakii upya ukurasa, kwani lengo lake lilikuwa kuunda viungo vya ndani ndani ya ukurasa.
+
+## Kushughulikia vitufe vya nyuma na mbele vya kivinjari
+
+Kutumia `history.pushState` huunda ingizo mpya kwenye historia ya urambazaji wa kivinjari. Unaweza kuangalia hilo kwa kushikilia *kitufe cha nyuma* cha kivinjari chako, kinapaswa kuonyesha kitu kama hiki:
+
+![Picha ya historia ya urambazaji](../../../../translated_images/history.7fdabbafa521e06455b738d3dafa3ff41d3071deae60ead8c7e0844b9ed987d8.sw.png)
+
+Ukijaribu kubofya kitufe cha nyuma mara chache, utaona kwamba URL ya sasa inabadilika na historia inasasishwa, lakini kiolezo kile kile kinaendelea kuonyeshwa.
+
+Hii ni kwa sababu programu haijui kwamba tunahitaji kuita `updateRoute()` kila wakati historia inabadilika. Ukichunguza [nyaraka za `history.pushState`](https://developer.mozilla.org/docs/Web/API/History/pushState), unaweza kuona kwamba ikiwa hali inabadilika - ikimaanisha kwamba tumehamia URL tofauti - tukio la [`popstate`](https://developer.mozilla.org/docs/Web/API/Window/popstate_event) linachochewa. Tutatumia hilo kurekebisha tatizo hilo.
+
+### Kazi
+
+Ili kuhakikisha kiolezo kinachoonyeshwa kinasasishwa wakati historia ya kivinjari inabadilika, tutaambatisha kazi mpya inayoiita `updateRoute()`. Tutafanya hivyo mwishoni mwa faili yetu ya `app.js`:
+
+```js
+window.onpopstate = () => updateRoute();
+updateRoute();
+```
+
+> Kidokezo: tumetumia [kazi ya mshale](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions) hapa kutangaza mshughulikiaji wa tukio la `popstate` kwa ufupi, lakini kazi ya kawaida ingefanya kazi sawa.
+
+Hapa kuna video ya kukumbusha kuhusu kazi za mshale:
+
+[![Kazi za Mshale](https://img.youtube.com/vi/OP6eEbOj2sc/0.jpg)](https://youtube.com/watch?v=OP6eEbOj2sc "Kazi za Mshale")
+
+> 🎥 Bofya picha hapo juu kwa video kuhusu kazi za mshale.
+
+Sasa jaribu kutumia vitufe vya nyuma na mbele vya kivinjari chako, na angalia kwamba njia inayoonyeshwa inasasishwa kwa usahihi wakati huu.
+
+---
+
+## 🚀 Changamoto
+
+Ongeza kiolezo kipya na njia kwa ukurasa wa tatu unaoonyesha sifa za programu hii.
+
+## Maswali ya Baada ya Somo
+
+[Jaribio la baada ya somo](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/42)
+
+## Mapitio na Kujisomea
+
+Urambazaji ni moja ya sehemu za kushangaza ngumu za maendeleo ya wavuti, hasa wakati wavuti inavyohamia kutoka kwa tabia za upakiaji wa ukurasa hadi upakiaji wa kurasa za Programu Moja ya Ukurasa. Soma kidogo kuhusu [jinsi huduma ya Azure Static Web App](https://docs.microsoft.com/azure/static-web-apps/routes/?WT.mc_id=academic-77807-sagibbon) inavyoshughulikia urambazaji. Je, unaweza kueleza kwa nini baadhi ya maamuzi yaliyoelezwa kwenye hati hiyo ni muhimu?
+
+## Kazi
+
+[Boresha urambazaji](assignment.md)
+
+---
+
+**Kanusho**:  
+Hati hii imetafsiriwa kwa kutumia huduma ya tafsiri ya AI [Co-op Translator](https://github.com/Azure/co-op-translator). Ingawa tunajitahidi kuhakikisha usahihi, tafsiri za kiotomatiki zinaweza kuwa na makosa au kutokuwa sahihi. Hati ya asili katika lugha yake ya awali inapaswa kuchukuliwa kama chanzo cha mamlaka. Kwa taarifa muhimu, tafsiri ya kitaalamu ya binadamu inapendekezwa. Hatutawajibika kwa kutoelewana au tafsiri zisizo sahihi zinazotokana na matumizi ya tafsiri hii.
\ No newline at end of file
diff --git a/translations/sw/7-bank-project/1-template-route/assignment.md b/translations/sw/7-bank-project/1-template-route/assignment.md
new file mode 100644
index 00000000..cd1e56a4
--- /dev/null
+++ b/translations/sw/7-bank-project/1-template-route/assignment.md
@@ -0,0 +1,28 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "8223e429218befa731dd5bfd22299520",
+  "translation_date": "2025-08-28T03:38:06+00:00",
+  "source_file": "7-bank-project/1-template-route/assignment.md",
+  "language_code": "sw"
+}
+-->
+# Boresha njia za usafirishaji
+
+## Maelekezo
+
+Tangazo la njia kwa sasa lina kitambulisho cha kiolezo pekee cha kutumia. Lakini wakati wa kuonyesha ukurasa mpya, mara nyingine zaidi inahitajika. Hebu tuboreshe utekelezaji wa njia zetu kwa kuongeza vipengele viwili vya ziada:
+
+- Toa vichwa kwa kila kiolezo na sasisha kichwa cha dirisha na kichwa kipya wakati kiolezo kinabadilika.
+- Ongeza chaguo la kuendesha msimbo fulani baada ya kiolezo kubadilika. Tunataka kuchapisha `'Dashboard is shown'` kwenye koni ya msanidi programu kila wakati ukurasa wa dashibodi unapoonyeshwa.
+
+## Rubric
+
+| Vigezo   | Bora Zaidi                                                                                                                         | Inayotosheleza                                                                                                                                                                            | Inahitaji Kuboresha                                    |
+| -------- | ---------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------- |
+|          | Vipengele viwili vimewekwa na vinafanya kazi. Kichwa na nyongeza ya msimbo pia vinafanya kazi kwa njia mpya iliyoongezwa kwenye tangazo la `routes`. | Vipengele viwili vinafanya kazi, lakini tabia imewekwa moja kwa moja na si rahisi kubadilishwa kupitia tangazo la `routes`. Kuongeza njia ya tatu na kichwa na nyongeza ya msimbo haifanyi kazi au inafanya kazi kwa sehemu. | Kipengele kimoja kinakosekana au hakifanyi kazi vizuri. |
+
+---
+
+**Kanusho**:  
+Hati hii imetafsiriwa kwa kutumia huduma ya tafsiri ya AI [Co-op Translator](https://github.com/Azure/co-op-translator). Ingawa tunajitahidi kuhakikisha usahihi, tafadhali fahamu kuwa tafsiri za kiotomatiki zinaweza kuwa na makosa au kutokuwa sahihi. Hati ya asili katika lugha yake ya awali inapaswa kuzingatiwa kama chanzo cha mamlaka. Kwa taarifa muhimu, inashauriwa kutumia huduma ya tafsiri ya kitaalamu ya binadamu. Hatutawajibika kwa maelewano mabaya au tafsiri zisizo sahihi zinazotokana na matumizi ya tafsiri hii.
\ No newline at end of file
diff --git a/translations/sw/7-bank-project/2-forms/README.md b/translations/sw/7-bank-project/2-forms/README.md
new file mode 100644
index 00000000..e418bef9
--- /dev/null
+++ b/translations/sw/7-bank-project/2-forms/README.md
@@ -0,0 +1,313 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "b667b7d601e2ee19acb5aa9d102dc9f3",
+  "translation_date": "2025-08-28T03:28:30+00:00",
+  "source_file": "7-bank-project/2-forms/README.md",
+  "language_code": "sw"
+}
+-->
+# Jenga Programu ya Benki Sehemu ya 2: Unda Fomu ya Kuingia na Kusajili
+
+## Maswali ya Awali ya Somo
+
+[Maswali ya awali ya somo](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/43)
+
+### Utangulizi
+
+Katika karibu programu zote za wavuti za kisasa, unaweza kuunda akaunti ili kuwa na nafasi yako binafsi. Kwa kuwa watumiaji wengi wanaweza kufikia programu ya wavuti kwa wakati mmoja, unahitaji mfumo wa kuhifadhi data ya kila mtumiaji kwa njia tofauti na kuchagua ni taarifa gani ya kuonyesha. Hatutajadili jinsi ya kudhibiti [utambulisho wa mtumiaji kwa usalama](https://en.wikipedia.org/wiki/Authentication) kwa undani, kwani ni mada pana, lakini tutahakikisha kila mtumiaji anaweza kuunda akaunti moja (au zaidi) ya benki kwenye programu yetu.
+
+Katika sehemu hii tutatumia fomu za HTML kuongeza kuingia na usajili kwenye programu yetu ya wavuti. Tutaona jinsi ya kutuma data kwa API ya seva kwa njia ya programu, na hatimaye jinsi ya kufafanua sheria za msingi za uthibitishaji wa maingizo ya mtumiaji.
+
+### Mahitaji ya Awali
+
+Unahitaji kuwa umekamilisha [violezo vya HTML na njia za usafirishaji](../1-template-route/README.md) za programu ya wavuti kwa somo hili. Pia unahitaji kusakinisha [Node.js](https://nodejs.org) na [kuendesha API ya seva](../api/README.md) kwa ndani ili uweze kutuma data kuunda akaunti.
+
+**Kumbuka**
+Utakuwa na terminal mbili zinazoendesha kwa wakati mmoja kama ilivyoorodheshwa hapa chini:
+1. Kwa programu kuu ya benki tuliyojenga katika somo la [violezo vya HTML na njia za usafirishaji](../1-template-route/README.md)
+2. Kwa [API ya seva ya Benki](../api/README.md) tuliyoandaa hapo juu.
+
+Unahitaji seva zote mbili ziwe zinafanya kazi ili kufuata somo hili. Zinasikiliza kwenye bandari tofauti (bandari `3000` na bandari `5000`) kwa hivyo kila kitu kinapaswa kufanya kazi vizuri.
+
+Unaweza kujaribu kama seva inaendesha vizuri kwa kutekeleza amri hii kwenye terminal:
+
+```sh
+curl http://localhost:5000/api
+# -> should return "Bank API v1.0.0" as a result
+```
+
+---
+
+## Fomu na Vidhibiti
+
+Kipengele cha `<form>` kinajumuisha sehemu ya hati ya HTML ambapo mtumiaji anaweza kuingiza na kutuma data kwa kutumia vidhibiti vya maingiliano. Kuna aina mbalimbali za vidhibiti vya kiolesura cha mtumiaji (UI) vinavyoweza kutumika ndani ya fomu, maarufu zaidi ni vipengele vya `<input>` na `<button>`.
+
+Kuna aina nyingi za [maingizo](https://developer.mozilla.org/docs/Web/HTML/Element/input), kwa mfano, kuunda sehemu ambapo mtumiaji anaweza kuingiza jina lake la mtumiaji unaweza kutumia:
+
+```html
+<input id="username" name="username" type="text">
+```
+
+Sifa ya `name` itatumika kama jina la mali wakati data ya fomu itatumwa. Sifa ya `id` hutumika kuhusisha `<label>` na kidhibiti cha fomu.
+
+> Angalia orodha nzima ya [aina za `<input>`](https://developer.mozilla.org/docs/Web/HTML/Element/input) na [vidhibiti vingine vya fomu](https://developer.mozilla.org/docs/Learn/Forms/Other_form_controls) ili kupata wazo la vipengele vyote vya UI vya asili unavyoweza kutumia unapojenga UI yako.
+
+✅ Kumbuka kwamba `<input>` ni [kipengele tupu](https://developer.mozilla.org/docs/Glossary/Empty_element) ambacho haupaswi kuongeza tagi ya kufunga inayolingana. Hata hivyo, unaweza kutumia noti ya kujifunga `<input/>`, lakini si lazima.
+
+Kipengele cha `<button>` ndani ya fomu ni maalum kidogo. Ikiwa hautaainisha sifa yake ya `type`, itatuma data ya fomu kwa seva moja kwa moja inapobonyezwa. Hapa kuna maadili yanayowezekana ya `type`:
+
+- `submit`: Chaguo-msingi ndani ya `<form>`, kitufe kinachochea hatua ya kutuma fomu.
+- `reset`: Kitufe kinarejesha vidhibiti vyote vya fomu kwenye maadili yao ya awali.
+- `button`: Hakuna tabia ya chaguo-msingi inayotolewa wakati kitufe kinabonywa. Unaweza kisha kupeana vitendo maalum kwa kutumia JavaScript.
+
+### Kazi
+
+Tuanzie kwa kuongeza fomu kwenye kiolezo cha `login`. Tutahitaji sehemu ya *username* na kitufe cha *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>
+```
+
+Ukichunguza kwa karibu, unaweza kugundua kwamba pia tumeongeza kipengele cha `<label>` hapa. Vipengele vya `<label>` hutumika kuongeza jina kwa vidhibiti vya UI, kama sehemu yetu ya jina la mtumiaji. Lebo ni muhimu kwa usomaji wa fomu zako, lakini pia huja na faida za ziada:
+
+- Kwa kuhusisha lebo na kidhibiti cha fomu, inasaidia watumiaji wanaotumia teknolojia za usaidizi (kama msomaji wa skrini) kuelewa data wanayotarajiwa kutoa.
+- Unaweza kubofya lebo moja kwa moja kuweka umakini kwenye maingizo yanayohusiana, na kufanya iwe rahisi kufikia kwenye vifaa vya skrini ya kugusa.
+
+> [Ufikivu](https://developer.mozilla.org/docs/Learn/Accessibility/What_is_accessibility) kwenye wavuti ni mada muhimu sana ambayo mara nyingi hupuuzwa. Shukrani kwa [vipengele vya HTML vya semantiki](https://developer.mozilla.org/docs/Learn/Accessibility/HTML) si vigumu kuunda maudhui yanayofikika ikiwa utavitumia ipasavyo. Unaweza [kusoma zaidi kuhusu ufikivu](https://developer.mozilla.org/docs/Web/Accessibility) ili kuepuka makosa ya kawaida na kuwa msanidi programu mwenye uwajibikaji.
+
+Sasa tutaongeza fomu ya pili kwa usajili, chini ya ile ya awali:
+
+```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>
+```
+
+Kwa kutumia sifa ya `value` tunaweza kufafanua thamani ya chaguo-msingi kwa maingizo fulani.
+Pia angalia kwamba maingizo ya `balance` yana aina ya `number`. Je, yanaonekana tofauti na maingizo mengine? Jaribu kuingiliana nayo.
+
+✅ Je, unaweza kuvinjari na kuingiliana na fomu kwa kutumia kibodi pekee? Ungefanya hivyo vipi?
+
+## Kutuma Data kwa Seva
+
+Sasa kwa kuwa tuna UI inayofanya kazi, hatua inayofuata ni kutuma data kwa seva. Hebu tufanye jaribio la haraka kwa kutumia msimbo wetu wa sasa: nini kinatokea ukibonyeza kitufe cha *Login* au *Register*?
+
+Je, uliona mabadiliko katika sehemu ya URL ya kivinjari chako?
+
+![Picha ya skrini ya mabadiliko ya URL ya kivinjari baada ya kubonyeza kitufe cha Register](../../../../translated_images/click-register.e89a30bf0d4bc9ca867dc537c4cea679a7c26368bd790969082f524fed2355bc.sw.png)
+
+Hatua ya chaguo-msingi kwa `<form>` ni kutuma fomu kwa URL ya seva ya sasa kwa kutumia [njia ya GET](https://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.3), ikiongeza data ya fomu moja kwa moja kwenye URL. Njia hii ina mapungufu kadhaa:
+
+- Data inayotumwa ni ndogo sana kwa ukubwa (karibu herufi 2000)
+- Data inaonekana moja kwa moja kwenye URL (si nzuri kwa nywila)
+- Haifanyi kazi na upakiaji wa faili
+
+Ndiyo maana unaweza kubadilisha kutumia [njia ya POST](https://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.5) ambayo hutuma data ya fomu kwa seva kwenye mwili wa ombi la HTTP, bila mapungufu ya awali.
+
+> Ingawa POST ni njia inayotumika sana kutuma data, [katika hali fulani maalum](https://www.w3.org/2001/tag/doc/whenToUseGet.html) ni bora kutumia njia ya GET, unapotekeleza sehemu ya utafutaji kwa mfano.
+
+### Kazi
+
+Ongeza sifa za `action` na `method` kwenye fomu ya usajili:
+
+```html
+<form id="registerForm" action="//localhost:5000/api/accounts" method="POST">
+```
+
+Sasa jaribu kusajili akaunti mpya kwa jina lako. Baada ya kubonyeza kitufe cha *Register* unapaswa kuona kitu kama hiki:
+
+![Dirisha la kivinjari kwenye anwani localhost:5000/api/accounts, likionyesha mfuatano wa JSON na data ya mtumiaji](../../../../translated_images/form-post.61de4ca1b964d91a9e338416e19f218504dd0af5f762fbebabfe7ae80edf885f.sw.png)
+
+Ikiwa kila kitu kinaenda vizuri, seva inapaswa kujibu ombi lako na majibu ya [JSON](https://www.json.org/json-en.html) yanayojumuisha data ya akaunti iliyoundwa.
+
+✅ Jaribu kusajili tena kwa jina lile lile. Nini kinatokea?
+
+## Kutuma Data Bila Kurudisha Ukurasa
+
+Kama ulivyogundua, kuna tatizo kidogo na mbinu tuliyotumia: wakati wa kutuma fomu, tunatoka kwenye programu yetu na kivinjari kinahamia URL ya seva. Tunajaribu kuepuka kurudisha kurasa zote kwenye programu yetu ya wavuti, kwani tunatengeneza [Programu ya Ukurasa Mmoja (SPA)](https://en.wikipedia.org/wiki/Single-page_application).
+
+Ili kutuma data ya fomu kwa seva bila kulazimisha kurudisha ukurasa, tunapaswa kutumia msimbo wa JavaScript. Badala ya kuweka URL kwenye sifa ya `action` ya kipengele cha `<form>`, unaweza kutumia msimbo wowote wa JavaScript unaoanza na `javascript:` kufanya hatua maalum. Kutumia hii pia kunamaanisha kwamba utalazimika kutekeleza kazi ambazo hapo awali zilifanywa kiotomatiki na kivinjari:
+
+- Kupata data ya fomu
+- Kubadilisha na kuweka data ya fomu kwa muundo unaofaa
+- Kuunda ombi la HTTP na kulituma kwa seva
+
+### Kazi
+
+Badilisha sifa ya `action` ya fomu ya usajili na:
+
+```html
+<form id="registerForm" action="javascript:register()">
+```
+
+Fungua `app.js` na ongeza kazi mpya inayoitwa `register`:
+
+```js
+function register() {
+  const registerForm = document.getElementById('registerForm');
+  const formData = new FormData(registerForm);
+  const data = Object.fromEntries(formData);
+  const jsonData = JSON.stringify(data);
+}
+```
+
+Hapa tunapata kipengele cha fomu kwa kutumia `getElementById()` na kutumia msaidizi wa [`FormData`](https://developer.mozilla.org/docs/Web/API/FormData) kutoa maadili kutoka kwa vidhibiti vya fomu kama seti ya jozi za ufunguo/thamani. Kisha tunabadilisha data kuwa kitu cha kawaida kwa kutumia [`Object.fromEntries()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/fromEntries) na hatimaye tunasajili data kwa [JSON](https://www.json.org/json-en.html), muundo unaotumika sana kwa kubadilishana data kwenye wavuti.
+
+Data sasa iko tayari kutumwa kwa seva. Unda kazi mpya inayoitwa `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' };
+  }
+}
+```
+
+Kazi hii inafanya nini? Kwanza, angalia neno kuu `async` hapa. Hii inamaanisha kwamba kazi ina msimbo ambao utatekelezwa [**kwa njia isiyo ya moja kwa moja**](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/async_function). Inapotumika pamoja na neno kuu `await`, inaruhusu kusubiri msimbo wa asinkroni utekelezwe - kama kusubiri majibu ya seva hapa - kabla ya kuendelea.
+
+Hapa kuna video fupi kuhusu matumizi ya `async/await`:
+
+[![Async na Await kwa kudhibiti ahadi](https://img.youtube.com/vi/YwmlRkrxvkk/0.jpg)](https://youtube.com/watch?v=YwmlRkrxvkk "Async na Await kwa kudhibiti ahadi")
+
+> 🎥 Bonyeza picha hapo juu kwa video kuhusu async/await.
+
+Tunatumia API ya `fetch()` kutuma data ya JSON kwa seva. Njia hii inachukua vigezo 2:
+
+- URL ya seva, kwa hivyo tunaweka tena `//localhost:5000/api/accounts` hapa.
+- Mipangilio ya ombi. Hapo ndipo tunapoweka njia kuwa `POST` na kutoa `body` ya ombi. Kwa kuwa tunatuma data ya JSON kwa seva, tunahitaji pia kuweka kichwa cha `Content-Type` kuwa `application/json` ili seva ijue jinsi ya kutafsiri maudhui.
+
+Kwa kuwa seva itajibu ombi kwa JSON, tunaweza kutumia `await response.json()` kuchambua maudhui ya JSON na kurudisha kitu kinachotokana. Kumbuka kwamba njia hii ni ya asinkroni, kwa hivyo tunatumia neno kuu `await` hapa kabla ya kurudisha ili kuhakikisha makosa yoyote wakati wa kuchambua pia yanakamatwa.
+
+Sasa ongeza msimbo fulani kwenye kazi ya `register` ili kuita `createAccount()`:
+
+```js
+const result = await createAccount(jsonData);
+```
+
+Kwa sababu tunatumia neno kuu `await` hapa, tunahitaji kuongeza neno kuu `async` kabla ya kazi ya register:
+
+```js
+async function register() {
+```
+
+Hatimaye, ongeza magogo fulani ili kuangalia matokeo. Kazi ya mwisho inapaswa kuonekana kama hii:
+
+```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);
+}
+```
+
+Hiyo ilikuwa ndefu kidogo lakini tumefika! Ukifungua [zana za msanidi programu wa kivinjari](https://developer.mozilla.org/docs/Learn/Common_questions/What_are_browser_developer_tools), na kujaribu kusajili akaunti mpya, hautaona mabadiliko yoyote kwenye ukurasa wa wavuti lakini ujumbe utaonekana kwenye console ukithibitisha kwamba kila kitu kinafanya kazi.
+
+![Picha ya skrini inayoonyesha ujumbe wa logi kwenye console ya kivinjari](../../../../translated_images/browser-console.efaf0b51aaaf67782a29e1a0bb32cc063f189b18e894eb5926e02f1abe864ec2.sw.png)
+
+✅ Je, unadhani data inatumwa kwa seva kwa usalama? Je, ikiwa mtu angeweza kunasa ombi hilo? Unaweza kusoma kuhusu [HTTPS](https://en.wikipedia.org/wiki/HTTPS) ili kujua zaidi kuhusu mawasiliano salama ya data.
+
+## Uthibitishaji wa Data
+
+Ukijaribu kusajili akaunti mpya bila kuweka jina la mtumiaji kwanza, unaweza kuona kwamba seva inarudisha kosa na msimbo wa hali [400 (Ombi Mbaya)](https://developer.mozilla.org/docs/Web/HTTP/Status/400#:~:text=The%20HyperText%20Transfer%20Protocol%20(HTTP,%2C%20or%20deceptive%20request%20routing).).
+
+Kabla ya kutuma data kwa seva ni mazoea mazuri [kuthibitisha data ya fomu](https://developer.mozilla.org/docs/Learn/Forms/Form_validation) mapema inapowezekana, ili kuhakikisha unatumia ombi halali. Vidhibiti vya fomu vya HTML5 vinatoa uthibitishaji wa ndani kwa kutumia sifa mbalimbali:
+
+- `required`: sehemu inahitaji kujazwa vinginevyo fomu haiwezi kutumwa.
+- `minlength` na `maxlength`: hufafanua idadi ndogo na kubwa ya herufi katika sehemu za maandishi.
+- `min` na `max`: hufafanua thamani ndogo na kubwa ya sehemu ya nambari.
+- `type`: hufafanua aina ya data inayotarajiwa, kama `number`, `email`, `file` au [aina nyingine za ndani](https://developer.mozilla.org/docs/Web/HTML/Element/input). Sifa hii inaweza pia kubadilisha muonekano wa kidhibiti cha fomu.
+- `pattern`: inaruhusu kufafanua [mwelekeo wa maneno ya kawaida](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Regular_Expressions) ili kujaribu ikiwa data iliyoingizwa ni halali au la.
+> Kidokezo: unaweza kubadilisha mwonekano wa vidhibiti vya fomu yako kulingana na kama ni sahihi au si sahihi kwa kutumia `:valid` na `:invalid` CSS pseudo-classes.
+### Kazi
+
+Kuna sehemu mbili zinazohitajika ili kuunda akaunti mpya halali: jina la mtumiaji na sarafu, huku sehemu zingine zikiwa za hiari. Sasisha HTML ya fomu, ukitumia sifa ya `required` na maandishi kwenye lebo ya sehemu ili:
+
+```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>
+```
+
+Ingawa utekelezaji huu wa seva hauweki mipaka maalum kwa urefu wa juu wa sehemu, ni mazoea mazuri kila wakati kufafanua mipaka inayofaa kwa maandishi yoyote yanayoingizwa na mtumiaji.
+
+Ongeza sifa ya `maxlength` kwenye sehemu za maandishi:
+
+```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">
+```
+
+Sasa ukibonyeza kitufe cha *Register* na sehemu yoyote haizingatii sheria ya uthibitishaji tuliyofafanua, utaona kitu kama hiki:
+
+![Picha ya skrini inayoonyesha kosa la uthibitishaji wakati wa kujaribu kuwasilisha fomu](../../../../translated_images/validation-error.8bd23e98d416c22f80076d04829a4bb718e0e550fd622862ef59008ccf0d5dce.sw.png)
+
+Uthibitishaji kama huu unaofanywa *kabla* ya kutuma data yoyote kwa seva unaitwa uthibitishaji wa **upande wa mteja**. Lakini kumbuka kuwa si mara zote inawezekana kufanya ukaguzi wote bila kutuma data. Kwa mfano, hatuwezi kuangalia hapa kama akaunti tayari ipo na jina la mtumiaji sawa bila kutuma ombi kwa seva. Uthibitishaji wa ziada unaofanywa kwenye seva unaitwa uthibitishaji wa **upande wa seva**.
+
+Kwa kawaida, zote mbili zinahitaji kutekelezwa, na ingawa kutumia uthibitishaji wa upande wa mteja huboresha uzoefu wa mtumiaji kwa kutoa maoni ya haraka, uthibitishaji wa upande wa seva ni muhimu ili kuhakikisha kuwa data ya mtumiaji unayoshughulikia ni sahihi na salama.
+
+---
+
+## 🚀 Changamoto
+
+Onyesha ujumbe wa kosa kwenye HTML ikiwa mtumiaji tayari yupo.
+
+Hapa kuna mfano wa jinsi ukurasa wa kuingia wa mwisho unaweza kuonekana baada ya kuongeza mtindo kidogo:
+
+![Picha ya skrini ya ukurasa wa kuingia baada ya kuongeza mitindo ya CSS](../../../../translated_images/result.96ef01f607bf856aa9789078633e94a4f7664d912f235efce2657299becca483.sw.png)
+
+## Jaribio la Baada ya Somo
+
+[Jaribio la baada ya somo](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/44)
+
+## Mapitio na Kujisomea
+
+Watengenezaji wamekuwa wabunifu sana kuhusu juhudi zao za kujenga fomu, hasa kuhusu mikakati ya uthibitishaji. Jifunze kuhusu mtiririko tofauti wa fomu kwa kuangalia [CodePen](https://codepen.com); unaweza kupata fomu za kuvutia na zenye kuhamasisha?
+
+## Kazi
+
+[Pamba programu yako ya benki](assignment.md)
+
+---
+
+**Kanusho**:  
+Hati hii imetafsiriwa kwa kutumia huduma ya tafsiri ya AI [Co-op Translator](https://github.com/Azure/co-op-translator). Ingawa tunajitahidi kuhakikisha usahihi, tafsiri za kiotomatiki zinaweza kuwa na makosa au kutokuwa sahihi. Hati ya asili katika lugha yake ya awali inapaswa kuchukuliwa kama chanzo cha mamlaka. Kwa taarifa muhimu, tafsiri ya kitaalamu ya binadamu inapendekezwa. Hatutawajibika kwa kutoelewana au tafsiri zisizo sahihi zinazotokana na matumizi ya tafsiri hii.
\ No newline at end of file
diff --git a/translations/sw/7-bank-project/2-forms/assignment.md b/translations/sw/7-bank-project/2-forms/assignment.md
new file mode 100644
index 00000000..2f2c55a3
--- /dev/null
+++ b/translations/sw/7-bank-project/2-forms/assignment.md
@@ -0,0 +1,27 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "474f3ab1ee755ca980fc9104a0316e17",
+  "translation_date": "2025-08-28T03:31:45+00:00",
+  "source_file": "7-bank-project/2-forms/assignment.md",
+  "language_code": "sw"
+}
+-->
+# Pamba programu yako ya benki
+
+## Maelekezo
+
+Tengeneza faili mpya ya `styles.css` na uongeze kiungo chake kwenye faili lako la sasa la `index.html`. Katika faili la CSS ulilounda, ongeza mtindo ili kufanya kurasa za *Login* na *Dashboard* zionekane vizuri na nadhifu. Jaribu kuunda mandhari ya rangi ili kutoa chapa ya kipekee kwa programu yako.
+
+> Kidokezo: unaweza kurekebisha HTML na kuongeza vipengele na madarasa mapya ikiwa inahitajika.
+
+## Rubric
+
+| Vigezo   | Bora kabisa                                                                                                             | Inaridhisha                                                                  | Inahitaji Kuboresha                                                                             |
+| -------- | ----------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------- |
+|          | Kurasa zote zinaonekana safi na zinasomeka, zikiwa na mandhari ya rangi thabiti na sehemu tofauti zimetenganishwa vyema. | Kurasa zimepambwa lakini bila mandhari au sehemu hazijatenganishwa waziwazi. | Kurasa hazina mapambo, sehemu zinaonekana zimevurugika na taarifa ni ngumu kusoma.            |
+
+---
+
+**Kanusho**:  
+Hati hii imetafsiriwa kwa kutumia huduma ya tafsiri ya AI [Co-op Translator](https://github.com/Azure/co-op-translator). Ingawa tunajitahidi kuhakikisha usahihi, tafsiri za kiotomatiki zinaweza kuwa na makosa au kutokuwa sahihi. Hati ya asili katika lugha yake ya awali inapaswa kuchukuliwa kama chanzo cha mamlaka. Kwa taarifa muhimu, tafsiri ya kitaalamu ya binadamu inapendekezwa. Hatutawajibika kwa kutoelewana au tafsiri zisizo sahihi zinazotokana na matumizi ya tafsiri hii.
\ No newline at end of file
diff --git a/translations/sw/7-bank-project/3-data/README.md b/translations/sw/7-bank-project/3-data/README.md
new file mode 100644
index 00000000..8d493828
--- /dev/null
+++ b/translations/sw/7-bank-project/3-data/README.md
@@ -0,0 +1,347 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "f587e913e3f7c0b1c549a05dd74ee8e5",
+  "translation_date": "2025-08-28T03:23:46+00:00",
+  "source_file": "7-bank-project/3-data/README.md",
+  "language_code": "sw"
+}
+-->
+# Jenga Programu ya Benki Sehemu ya 3: Njia za Kupata na Kutumia Data
+
+## Jaribio la Kabla ya Somo
+
+[Jaribio la kabla ya somo](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/45)
+
+### Utangulizi
+
+Katika msingi wa kila programu ya wavuti kuna *data*. Data inaweza kuwa katika aina mbalimbali, lakini lengo lake kuu daima ni kuonyesha taarifa kwa mtumiaji. Kwa kuwa programu za wavuti zinazidi kuwa za mwingiliano na changamano, jinsi mtumiaji anavyopata na kuingiliana na taarifa sasa ni sehemu muhimu ya maendeleo ya wavuti.
+
+Katika somo hili, tutaona jinsi ya kupata data kutoka kwa seva kwa njia isiyo ya moja kwa moja, na kutumia data hiyo kuonyesha taarifa kwenye ukurasa wa wavuti bila kupakia upya HTML.
+
+### Mahitaji ya Awali
+
+Unahitaji kuwa umejenga sehemu ya [Fomu ya Kuingia na Kusajili](../2-forms/README.md) ya programu ya wavuti kwa somo hili. Pia unahitaji kusakinisha [Node.js](https://nodejs.org) na [kuendesha API ya seva](../api/README.md) kwa ndani ili upate data ya akaunti.
+
+Unaweza kujaribu kama seva inafanya kazi vizuri kwa kutekeleza amri hii kwenye terminal:
+
+```sh
+curl http://localhost:5000/api
+# -> should return "Bank API v1.0.0" as a result
+```
+
+---
+
+## AJAX na Kupata Data
+
+Tovuti za jadi husasisha maudhui yanayoonyeshwa wakati mtumiaji anapochagua kiungo au kutuma data kwa kutumia fomu, kwa kupakia upya ukurasa mzima wa HTML. Kila wakati data mpya inahitajika kupakiwa, seva ya wavuti inarudisha ukurasa mpya wa HTML ambao unahitaji kuchakatwa na kivinjari, jambo ambalo linakatiza hatua ya sasa ya mtumiaji na kupunguza mwingiliano wakati wa kupakia upya. Mtiririko huu pia huitwa *Programu ya Ukurasa Mbalimbali* au *MPA*.
+
+![Mtiririko wa usasishaji katika programu ya ukurasa mbalimbali](../../../../translated_images/mpa.7f7375a1a2d4aa779d3f928a2aaaf9ad76bcdeb05cfce2dc27ab126024050f51.sw.png)
+
+Wakati programu za wavuti zilianza kuwa changamano zaidi na za mwingiliano, mbinu mpya iliyoitwa [AJAX (Asynchronous JavaScript and XML)](https://en.wikipedia.org/wiki/Ajax_(programming)) ilianzishwa. Mbinu hii inaruhusu programu za wavuti kutuma na kupokea data kutoka kwa seva kwa njia isiyo ya moja kwa moja kwa kutumia JavaScript, bila kupakia upya ukurasa wa HTML, na hivyo kusababisha usasishaji wa haraka na mwingiliano laini wa mtumiaji. Wakati data mpya inapokelewa kutoka kwa seva, ukurasa wa sasa wa HTML unaweza pia kusasishwa kwa kutumia API ya [DOM](https://developer.mozilla.org/docs/Web/API/Document_Object_Model). Kwa muda, mbinu hii imebadilika na kuwa kile kinachoitwa sasa [*Programu ya Ukurasa Mmoja* au *SPA*](https://en.wikipedia.org/wiki/Single-page_application).
+
+![Mtiririko wa usasishaji katika programu ya ukurasa mmoja](../../../../translated_images/spa.268ec73b41f992c2a21ef9294235c6ae597b3c37e2c03f0494c2d8857325cc57.sw.png)
+
+Wakati AJAX ilipoanzishwa kwa mara ya kwanza, API pekee iliyopatikana ya kupata data kwa njia isiyo ya moja kwa moja ilikuwa [`XMLHttpRequest`](https://developer.mozilla.org/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest). Lakini vivinjari vya kisasa sasa pia vinaunga mkono API rahisi na yenye nguvu zaidi ya [`Fetch`](https://developer.mozilla.org/docs/Web/API/Fetch_API), ambayo hutumia ahadi (promises) na inafaa zaidi kwa kuchakata data ya JSON.
+
+> Ingawa vivinjari vyote vya kisasa vinaunga mkono `Fetch API`, ikiwa unataka programu yako ya wavuti ifanye kazi kwenye vivinjari vya zamani, ni wazo zuri kila wakati kuangalia [jedwali la utangamano kwenye caniuse.com](https://caniuse.com/fetch) kwanza.
+
+### Kazi
+
+Katika [somo lililopita](../2-forms/README.md) tulitekeleza fomu ya usajili ili kuunda akaunti. Sasa tutaongeza msimbo wa kuingia kwa kutumia akaunti iliyopo, na kupata data yake. Fungua faili `app.js` na ongeza kazi mpya ya `login`:
+
+```js
+async function login() {
+  const loginForm = document.getElementById('loginForm')
+  const user = loginForm.user.value;
+}
+```
+
+Hapa tunaanza kwa kupata kipengele cha fomu kwa kutumia `getElementById()`, kisha tunapata jina la mtumiaji kutoka kwenye ingizo kwa kutumia `loginForm.user.value`. Kila kidhibiti cha fomu kinaweza kupatikana kwa jina lake (lililowekwa kwenye HTML kwa kutumia sifa ya `name`) kama mali ya fomu.
+
+Kwa njia sawa na tulivyofanya kwa usajili, tutaunda kazi nyingine ya kutekeleza ombi la seva, lakini wakati huu kwa kupata data ya akaunti:
+
+```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' };
+  }
+}
+```
+
+Tunatumia API ya `fetch` kuomba data kutoka kwa seva kwa njia isiyo ya moja kwa moja, lakini wakati huu hatuhitaji vigezo vya ziada zaidi ya URL ya kupiga, kwa kuwa tunatafuta tu data. Kwa chaguo-msingi, `fetch` huunda ombi la HTTP la [`GET`](https://developer.mozilla.org/docs/Web/HTTP/Methods/GET), ambalo ndilo tunalotafuta hapa.
+
+✅ `encodeURIComponent()` ni kazi inayotoroka herufi maalum kwa URL. Ni masuala gani tunaweza kuwa nayo ikiwa hatutaita kazi hii na kutumia moja kwa moja thamani ya `user` kwenye URL?
+
+Sasa wacha tusasishe kazi yetu ya `login` ili kutumia `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');
+}
+```
+
+Kwanza, kwa kuwa `getAccount` ni kazi ya njia isiyo ya moja kwa moja, tunahitaji kuilinganisha na neno kuu `await` ili kusubiri matokeo ya seva. Kama ilivyo kwa ombi lolote la seva, pia tunapaswa kushughulikia kesi za makosa. Kwa sasa tutaongeza tu ujumbe wa logi kuonyesha kosa, na tutarudi kwenye hili baadaye.
+
+Kisha tunapaswa kuhifadhi data mahali fulani ili tuweze kuitumia baadaye kuonyesha taarifa za dashibodi. Kwa kuwa kigezo `account` bado hakipo, tutaumba kigezo cha kimataifa kwa ajili yake juu ya faili yetu:
+
+```js
+let account = null;
+```
+
+Baada ya data ya mtumiaji kuhifadhiwa kwenye kigezo, tunaweza kuhamia kutoka ukurasa wa *login* kwenda kwenye *dashboard* kwa kutumia kazi ya `navigate()` ambayo tayari tunayo.
+
+Hatimaye, tunahitaji kuita kazi yetu ya `login` wakati fomu ya kuingia inapotumwa, kwa kurekebisha HTML:
+
+```html
+<form id="loginForm" action="javascript:login()">
+```
+
+Jaribu kama kila kitu kinafanya kazi vizuri kwa kusajili akaunti mpya na kujaribu kuingia kwa kutumia akaunti hiyo hiyo.
+
+Kabla ya kuendelea na sehemu inayofuata, tunaweza pia kukamilisha kazi ya `register` kwa kuongeza hii mwishoni mwa kazi:
+
+```js
+account = result;
+navigate('/dashboard');
+```
+
+✅ Je, unajua kwamba kwa chaguo-msingi, unaweza tu kuita API za seva kutoka kwa *kikoa na bandari sawa* na ukurasa wa wavuti unaotazama? Hii ni mbinu ya usalama inayotekelezwa na vivinjari. Lakini subiri, programu yetu ya wavuti inaendesha kwenye `localhost:3000` ilhali API ya seva inaendesha kwenye `localhost:5000`, kwa nini inafanya kazi? Kwa kutumia mbinu inayoitwa [Cross-Origin Resource Sharing (CORS)](https://developer.mozilla.org/docs/Web/HTTP/CORS), inawezekana kutekeleza maombi ya HTTP ya asili tofauti ikiwa seva itaongeza vichwa maalum kwenye jibu, kuruhusu ubaguzi kwa vikoa maalum.
+
+> Jifunze zaidi kuhusu API kwa kuchukua [somo hili](https://docs.microsoft.com/learn/modules/use-apis-discover-museum-art/?WT.mc_id=academic-77807-sagibbon)
+
+## Sasisha HTML Kuonyesha Data
+
+Sasa kwa kuwa tuna data ya mtumiaji, tunapaswa kusasisha HTML iliyopo ili kuionyesha. Tayari tunajua jinsi ya kupata kipengele kutoka kwa DOM kwa kutumia kwa mfano `document.getElementById()`. Baada ya kuwa na kipengele cha msingi, hapa kuna baadhi ya API unazoweza kutumia kubadilisha au kuongeza vipengele vya watoto kwake:
+
+- Kwa kutumia mali ya [`textContent`](https://developer.mozilla.org/docs/Web/API/Node/textContent) unaweza kubadilisha maandishi ya kipengele. Kumbuka kwamba kubadilisha thamani hii huondoa watoto wote wa kipengele (ikiwa wapo) na kuibadilisha na maandishi yaliyotolewa. Kwa hivyo, pia ni njia bora ya kuondoa watoto wote wa kipengele fulani kwa kupeana kamba tupu `''` kwake.
+
+- Kwa kutumia [`document.createElement()`](https://developer.mozilla.org/docs/Web/API/Document/createElement) pamoja na mbinu ya [`append()`](https://developer.mozilla.org/docs/Web/API/ParentNode/append) unaweza kuunda na kuambatisha kipengele kipya au zaidi cha mtoto.
+
+✅ Kwa kutumia mali ya [`innerHTML`](https://developer.mozilla.org/docs/Web/API/Element/innerHTML) ya kipengele pia inawezekana kubadilisha maudhui yake ya HTML, lakini hii inapaswa kuepukwa kwa kuwa ni hatarishi kwa mashambulizi ya [cross-site scripting (XSS)](https://developer.mozilla.org/docs/Glossary/Cross-site_scripting).
+
+### Kazi
+
+Kabla ya kuendelea na skrini ya dashibodi, kuna jambo moja zaidi tunalopaswa kufanya kwenye ukurasa wa *login*. Hivi sasa, ikiwa unajaribu kuingia na jina la mtumiaji ambalo halipo, ujumbe unaonyeshwa kwenye console lakini kwa mtumiaji wa kawaida hakuna kinachobadilika na hujui kinachoendelea.
+
+Wacha tuongeze kipengele cha nafasi kwenye fomu ya kuingia ambapo tunaweza kuonyesha ujumbe wa kosa ikiwa inahitajika. Mahali pazuri litakuwa kabla tu ya kitufe cha `<button>` cha kuingia:
+
+```html
+...
+<div id="loginError"></div>
+<button>Login</button>
+...
+```
+
+Kipengele hiki cha `<div>` ni tupu, ikimaanisha kuwa hakuna kitakachoonyeshwa kwenye skrini hadi tuongeze maudhui kwake. Pia tunakipa `id` ili tuweze kukipata kwa urahisi kwa kutumia JavaScript.
+
+Rudi kwenye faili `app.js` na uunde kazi mpya ya msaidizi `updateElement`:
+
+```js
+function updateElement(id, text) {
+  const element = document.getElementById(id);
+  element.textContent = text;
+}
+```
+
+Hii ni rahisi sana: kwa kupewa *id* ya kipengele na *maandishi*, itasasisha maudhui ya maandishi ya kipengele cha DOM chenye `id` inayolingana. Wacha tutumie mbinu hii badala ya ujumbe wa kosa wa awali kwenye kazi ya `login`:
+
+```js
+if (data.error) {
+  return updateElement('loginError', data.error);
+}
+```
+
+Sasa ikiwa unajaribu kuingia na akaunti batili, unapaswa kuona kitu kama hiki:
+
+![Picha ya skrini inayoonyesha ujumbe wa kosa unaoonyeshwa wakati wa kuingia](../../../../translated_images/login-error.416fe019b36a63276764c2349df5d99e04ebda54fefe60c715ee87a28d5d4ad0.sw.png)
+
+Sasa tuna maandishi ya kosa yanayoonekana, lakini ikiwa unajaribu kutumia kisomaji cha skrini utagundua kuwa hakuna kinachotangazwa. Ili maandishi yanayoongezwa kwa nguvu kwenye ukurasa yatangazwe na visomaji vya skrini, yatahitaji kutumia kitu kinachoitwa [Live Region](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/ARIA_Live_Regions). Hapa tutatumia aina maalum ya live region inayoitwa alert:
+
+```html
+<div id="loginError" role="alert"></div>
+```
+
+Tekeleza tabia sawa kwa makosa ya kazi ya `register` (usisahau kusasisha HTML).
+
+## Onyesha Taarifa kwenye Dashibodi
+
+Kwa kutumia mbinu zile zile tulizoona hivi punde, tutashughulikia pia kuonyesha taarifa za akaunti kwenye ukurasa wa dashibodi.
+
+Hivi ndivyo kitu cha akaunti kinavyoonekana kutoka kwa seva:
+
+```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 }
+  ],
+}
+```
+
+> Kumbuka: ili kurahisisha kazi yako, unaweza kutumia akaunti ya `test` iliyopo tayari na data.
+
+### Kazi
+
+Wacha tuanze kwa kubadilisha sehemu ya "Balance" kwenye HTML ili kuongeza vipengele vya nafasi:
+
+```html
+<section>
+  Balance: <span id="balance"></span><span id="currency"></span>
+</section>
+```
+
+Pia tutaongeza sehemu mpya chini yake ili kuonyesha maelezo ya akaunti:
+
+```html
+<h2 id="description"></h2>
+```
+
+✅ Kwa kuwa maelezo ya akaunti hufanya kazi kama kichwa cha maudhui yaliyo chini yake, yamewekwa alama kwa njia ya kimaandishi kama kichwa. Jifunze zaidi kuhusu jinsi [muundo wa vichwa](https://www.nomensa.com/blog/2017/how-structure-headings-web-accessibility) ni muhimu kwa ufikivu, na chunguza kwa makini ukurasa ili kubaini nini kingine kinaweza kuwa kichwa.
+
+Ifuatayo, tutaunda kazi mpya kwenye `app.js` ili kujaza nafasi:
+
+```js
+function updateDashboard() {
+  if (!account) {
+    return navigate('/login');
+  }
+
+  updateElement('description', account.description);
+  updateElement('balance', account.balance.toFixed(2));
+  updateElement('currency', account.currency);
+}
+```
+
+Kwanza, tunahakikisha kuwa tuna data ya akaunti tunayohitaji kabla ya kuendelea. Kisha tunatumia kazi ya `updateElement()` tuliyoijenga awali kusasisha HTML.
+
+> Ili kufanya maonyesho ya salio yaonekane vizuri zaidi, tunatumia mbinu [`toFixed(2)`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed) kulazimisha kuonyesha thamani na tarakimu 2 baada ya nukta ya desimali.
+
+Sasa tunahitaji kuita kazi yetu ya `updateDashboard()` kila wakati dashibodi inapopakiwa. Ikiwa tayari umemaliza [kazi ya somo la 1](../1-template-route/assignment.md) hii inapaswa kuwa rahisi, vinginevyo unaweza kutumia utekelezaji ufuatao.
+
+Ongeza msimbo huu mwishoni mwa kazi ya `updateRoute()`:
+
+```js
+if (typeof route.init === 'function') {
+  route.init();
+}
+```
+
+Na sasisha ufafanuzi wa njia na:
+
+```js
+const routes = {
+  '/login': { templateId: 'login' },
+  '/dashboard': { templateId: 'dashboard', init: updateDashboard }
+};
+```
+
+Kwa mabadiliko haya, kila wakati ukurasa wa dashibodi unaponyeshwa, kazi ya `updateDashboard()` inaitwa. Baada ya kuingia, unapaswa kisha kuona salio la akaunti, sarafu na maelezo.
+
+## Unda Mistari ya Jedwali kwa Nguvu kwa Kutumia Violezo vya HTML
+
+Katika [somo la kwanza](../1-template-route/README.md) tulitumia violezo vya HTML pamoja na mbinu ya [`appendChild()`](https://developer.mozilla.org/docs/Web/API/Node/appendChild) kutekeleza urambazaji katika programu yetu. Violezo vinaweza pia kuwa vidogo na kutumika kujaza sehemu zinazojirudia za ukurasa kwa nguvu.
+
+Tutatumia mbinu sawa kuonyesha orodha ya miamala kwenye jedwali la HTML.
+
+### Kazi
+
+Ongeza kiolezo kipya kwenye `<body>` ya HTML:
+
+```html
+<template id="transaction">
+  <tr>
+    <td></td>
+    <td></td>
+    <td></td>
+  </tr>
+</template>
+```
+
+Kiolezo hiki kinawakilisha mstari mmoja wa jedwali, na safu 3 tunazotaka kujaza: *tarehe*, *kitu* na *kiasi* cha muamala.
+
+Kisha, ongeza mali hii ya `id` kwenye kipengele cha `<tbody>` cha jedwali ndani ya kiolezo cha dashibodi ili iwe rahisi kukipata kwa kutumia JavaScript:
+
+```html
+<tbody id="transactions"></tbody>
+```
+
+HTML yetu iko tayari, wacha tugeukie msimbo wa JavaScript na kuunda kazi mpya `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;
+}
+```
+
+Kazi hii inafanya kile jina lake linavyopendekeza: kwa kutumia kiolezo tulichounda awali, inaunda mstari mpya wa jedwali na kujaza maudhui yake kwa kutumia data ya muamala. Tutatumia hii kwenye kazi yetu ya `updateDashboard()` kujaza jedwali:
+
+```js
+const transactionsRows = document.createDocumentFragment();
+for (const transaction of account.transactions) {
+  const transactionRow = createTransactionRow(transaction);
+  transactionsRows.appendChild(transactionRow);
+}
+updateElement('transactions', transactionsRows);
+```
+
+Hapa tunatumia mbinu [`document.createDocumentFragment()`](https://developer.mozilla.org/docs/Web/API/Document/createDocumentFragment) ambayo huunda kipande kipya cha DOM ambacho tunaweza kufanya kazi nacho, kabla ya hatimaye kukiambatisha kwenye jedwali letu la HTML.
+
+Bado kuna jambo moja zaidi tunalopaswa kufanya kabla ya msimbo huu kufanya kazi, kwa kuwa kazi yetu ya `updateElement()` kwa sasa inasaidia maudhui ya maandishi pekee. Wacha tubadilishe msimbo wake kidogo:
+
+```js
+function updateElement(id, textOrNode) {
+  const element = document.getElementById(id);
+  element.textContent = ''; // Removes all children
+  element.append(textOrNode);
+}
+```
+
+Tunatumia mbinu ya [`append()`](https://developer.mozilla.org/docs/Web/API/ParentNode/append) kwa kuwa inaruhusu kuambatisha maandishi au [DOM Nodes](https://developer.mozilla.org/docs/Web/API/Node) kwenye kipengele cha mzazi, ambayo ni kamilifu kwa matumizi yetu yote.
+Ukijaribu kutumia akaunti ya `test` kuingia, sasa unapaswa kuona orodha ya miamala kwenye dashibodi 🎉.
+
+---
+
+## 🚀 Changamoto
+
+Fanyeni kazi pamoja ili kufanya ukurasa wa dashibodi uonekane kama programu halisi ya benki. Ikiwa tayari umeweka mtindo kwenye programu yako, jaribu kutumia [media queries](https://developer.mozilla.org/docs/Web/CSS/Media_Queries) kuunda [muundo unaojibika](https://developer.mozilla.org/docs/Web/Progressive_web_apps/Responsive/responsive_design_building_blocks) unaofanya kazi vizuri kwenye vifaa vya mezani na vya mkononi.
+
+Hapa kuna mfano wa ukurasa wa dashibodi uliowekwa mtindo:
+
+![Picha ya skrini ya mfano wa matokeo ya dashibodi baada ya kuweka mtindo](../../../../translated_images/screen2.123c82a831a1d14ab2061994be2fa5de9cec1ce651047217d326d4773a6348e4.sw.png)
+
+## Maswali Baada ya Somo
+
+[Maswali baada ya somo](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/46)
+
+## Kazi ya Nyumbani
+
+[Rekebisha na ongeza maoni kwenye msimbo wako](assignment.md)
+
+---
+
+**Kanusho**:  
+Hati hii imetafsiriwa kwa kutumia huduma ya tafsiri ya AI [Co-op Translator](https://github.com/Azure/co-op-translator). Ingawa tunajitahidi kuhakikisha usahihi, tafsiri za kiotomatiki zinaweza kuwa na makosa au kutokuwa sahihi. Hati asilia katika lugha yake ya awali inapaswa kuzingatiwa kama chanzo cha mamlaka. Kwa taarifa muhimu, tafsiri ya kitaalamu ya binadamu inapendekezwa. Hatutawajibika kwa kutoelewana au tafsiri zisizo sahihi zinazotokana na matumizi ya tafsiri hii.
\ No newline at end of file
diff --git a/translations/sw/7-bank-project/3-data/assignment.md b/translations/sw/7-bank-project/3-data/assignment.md
new file mode 100644
index 00000000..d6b8870d
--- /dev/null
+++ b/translations/sw/7-bank-project/3-data/assignment.md
@@ -0,0 +1,29 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "a4abf305ede1cfaadd56a8fab4b4c288",
+  "translation_date": "2025-08-28T03:27:15+00:00",
+  "source_file": "7-bank-project/3-data/assignment.md",
+  "language_code": "sw"
+}
+-->
+# Rekebisha na ongeza maelezo kwenye msimbo wako
+
+## Maelekezo
+
+Kadri msimbo wako unavyokua, ni muhimu kuurekebisha mara kwa mara ili uwe rahisi kusoma na kudumisha kwa muda. Ongeza maelezo na rekebisha `app.js` yako ili kuboresha ubora wa msimbo:
+
+- Toa vigezo vya kudumu, kama URL ya msingi ya API ya seva
+- Fanya msimbo unaofanana kuwa wa pamoja: kwa mfano, unaweza kuunda kazi ya `sendRequest()` ili kuunganisha msimbo unaotumika katika `createAccount()` na `getAccount()`
+- Panga upya msimbo ili uwe rahisi kusoma, na ongeza maelezo
+
+## Rubric
+
+| Kigezo   | Bora Zaidi                                                                                                                                                     | Inayotosheleza                                                                                   | Inayohitaji Kuboresha                                                                 |
+| -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- |
+|          | Msimbo umeelezewa, umepangwa vizuri katika sehemu tofauti na rahisi kusoma. Vigezo vya kudumu vimetolewa na kazi ya `sendRequest()` imeundwa.                  | Msimbo ni safi lakini bado unaweza kuboreshwa kwa maelezo zaidi, kutoa vigezo vya kudumu au kufanya msimbo wa pamoja. | Msimbo ni ovyo, haujaelezewa, vigezo vya kudumu havijatolewa na msimbo haujafanywa wa pamoja. |
+
+---
+
+**Kanusho**:  
+Hati hii imetafsiriwa kwa kutumia huduma ya kutafsiri ya AI [Co-op Translator](https://github.com/Azure/co-op-translator). Ingawa tunajitahidi kuhakikisha usahihi, tafadhali fahamu kuwa tafsiri za kiotomatiki zinaweza kuwa na makosa au kutokuwa sahihi. Hati ya asili katika lugha yake ya awali inapaswa kuzingatiwa kama chanzo cha mamlaka. Kwa taarifa muhimu, tafsiri ya kitaalamu ya binadamu inapendekezwa. Hatutawajibika kwa kutokuelewana au tafsiri zisizo sahihi zinazotokana na matumizi ya tafsiri hii.
\ No newline at end of file
diff --git a/translations/sw/7-bank-project/4-state-management/README.md b/translations/sw/7-bank-project/4-state-management/README.md
new file mode 100644
index 00000000..c9504d17
--- /dev/null
+++ b/translations/sw/7-bank-project/4-state-management/README.md
@@ -0,0 +1,294 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "4fa20c513e367e9cdd401bf49ae16e33",
+  "translation_date": "2025-08-28T03:32:10+00:00",
+  "source_file": "7-bank-project/4-state-management/README.md",
+  "language_code": "sw"
+}
+-->
+# Jenga Programu ya Benki Sehemu ya 4: Dhana za Usimamizi wa Hali
+
+## Jaribio la Kabla ya Somo
+
+[Jaribio la kabla ya somo](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/47)
+
+### Utangulizi
+
+Kadri programu ya wavuti inavyokua, inakuwa changamoto kufuatilia mtiririko wa data zote. Ni msimbo gani unapata data, ni ukurasa gani unaoitumia, wapi na lini inahitaji kusasishwa... ni rahisi kuishia na msimbo mchafu ambao ni mgumu kudumisha. Hii ni kweli hasa unapohitaji kushiriki data kati ya kurasa tofauti za programu yako, kwa mfano data za mtumiaji. Dhana ya *usimamizi wa hali* imekuwepo kila wakati katika aina zote za programu, lakini kadri programu za wavuti zinavyokua kwa ugumu, sasa ni jambo muhimu kufikiria wakati wa maendeleo.
+
+Katika sehemu hii ya mwisho, tutaangalia programu tuliyojenga ili kufikiria upya jinsi hali inavyosimamiwa, kuruhusu msaada wa kuburudisha kivinjari wakati wowote, na kuhifadhi data katika vipindi vya mtumiaji.
+
+### Sharti
+
+Unahitaji kuwa umekamilisha sehemu ya [kupata data](../3-data/README.md) ya programu ya wavuti kwa somo hili. Pia unahitaji kusakinisha [Node.js](https://nodejs.org) na [kuendesha API ya seva](../api/README.md) kwa ndani ili uweze kusimamia data za akaunti.
+
+Unaweza kujaribu kama seva inafanya kazi vizuri kwa kutekeleza amri hii kwenye terminal:
+
+```sh
+curl http://localhost:5000/api
+# -> should return "Bank API v1.0.0" as a result
+```
+
+---
+
+## Fikiria Upya Usimamizi wa Hali
+
+Katika [somo lililopita](../3-data/README.md), tulianzisha dhana ya msingi ya hali katika programu yetu kwa kutumia kigezo cha kimataifa `account` ambacho kina data za benki za mtumiaji aliyesajiliwa kwa sasa. Hata hivyo, utekelezaji wetu wa sasa una kasoro kadhaa. Jaribu kuburudisha ukurasa ukiwa kwenye dashibodi. Nini kinatokea?
+
+Kuna masuala 3 na msimbo wa sasa:
+
+- Hali haijahifadhiwa, kwani kuburudisha kivinjari kunakurudisha kwenye ukurasa wa kuingia.
+- Kuna kazi nyingi zinazobadilisha hali. Kadri programu inavyokua, inaweza kuwa vigumu kufuatilia mabadiliko na ni rahisi kusahau kusasisha moja.
+- Hali haijasafishwa, kwa hivyo unapobofya *Ondoka* data za akaunti bado zipo ingawa uko kwenye ukurasa wa kuingia.
+
+Tunaweza kusasisha msimbo wetu kushughulikia masuala haya moja baada ya lingine, lakini ingeunda urudufu wa msimbo zaidi na kufanya programu kuwa ngumu zaidi na ngumu kudumisha. Au tunaweza kusimama kwa dakika chache na kufikiria upya mkakati wetu.
+
+> Ni matatizo gani hasa tunajaribu kutatua hapa?
+
+[Usimamizi wa hali](https://en.wikipedia.org/wiki/State_management) unahusu kupata mbinu nzuri ya kutatua matatizo haya mawili maalum:
+
+- Jinsi ya kuweka mtiririko wa data katika programu kuwa rahisi kueleweka?
+- Jinsi ya kuweka data ya hali kila wakati inalingana na kiolesura cha mtumiaji (na kinyume chake)?
+
+Ukishughulikia haya, masuala mengine yoyote unayoweza kuwa nayo yanaweza kuwa tayari yametatuliwa au kuwa rahisi kutatua. Kuna mbinu nyingi zinazowezekana za kutatua matatizo haya, lakini tutaenda na suluhisho la kawaida linalojumuisha **kuzingatia data na njia za kuibadilisha**. Mtiririko wa data ungeenda kama hivi:
+
+![Mchoro unaoonyesha mtiririko wa data kati ya HTML, vitendo vya mtumiaji na hali](../../../../translated_images/data-flow.fa2354e0908fecc89b488010dedf4871418a992edffa17e73441d257add18da4.sw.png)
+
+> Hatutashughulikia hapa sehemu ambapo data inachochea kiotomatiki sasisho la mwonekano, kwani inahusiana na dhana za hali ya juu za [Programu Tenda](https://en.wikipedia.org/wiki/Reactive_programming). Ni somo zuri la kufuatilia ikiwa uko tayari kwa uchambuzi wa kina.
+
+✅ Kuna maktaba nyingi huko nje zenye mbinu tofauti za usimamizi wa hali, [Redux](https://redux.js.org) ikiwa chaguo maarufu. Angalia dhana na mifumo inayotumika kwani mara nyingi ni njia nzuri ya kujifunza masuala gani ya uwezo unaweza kukabiliana nayo katika programu kubwa za wavuti na jinsi yanavyoweza kutatuliwa.
+
+### Kazi
+
+Tutaanza na marekebisho kidogo. Badilisha tangazo la `account`:
+
+```js
+let account = null;
+```
+
+Na:
+
+```js
+let state = {
+  account: null
+};
+```
+
+Wazo ni *kuzingatia* data zote za programu yetu katika kitu kimoja cha hali. Kwa sasa tuna `account` pekee katika hali kwa hivyo haibadiliki sana, lakini inaunda njia ya mabadiliko.
+
+Pia tunapaswa kusasisha kazi zinazotumia. Katika kazi za `register()` na `login()`, badilisha `account = ...` na `state.account = ...`;
+
+Kwenye mwanzo wa kazi ya `updateDashboard()`, ongeza mstari huu:
+
+```js
+const account = state.account;
+```
+
+Marekebisho haya yenyewe hayajaleta maboresho makubwa, lakini wazo lilikuwa kuweka msingi wa mabadiliko yanayofuata.
+
+## Fuatilia Mabadiliko ya Data
+
+Sasa kwa kuwa tumeweka kitu cha `state` kuhifadhi data zetu, hatua inayofuata ni kuzingatia masasisho. Lengo ni kufanya iwe rahisi kufuatilia mabadiliko yoyote na wakati yanatokea.
+
+Ili kuepuka kuwa na mabadiliko yanayofanywa kwa kitu cha `state`, pia ni mazoea mazuri kuzingatia kuwa [*hakibadiliki*](https://en.wikipedia.org/wiki/Immutable_object), ikimaanisha kuwa haiwezi kubadilishwa kabisa. Hii pia inamaanisha kuwa unapaswa kuunda kitu kipya cha hali ikiwa unataka kubadilisha chochote ndani yake. Kwa kufanya hivyo, unajenga ulinzi dhidi ya [athari za upande](https://en.wikipedia.org/wiki/Side_effect_(computer_science)) zisizohitajika, na kufungua uwezekano wa vipengele vipya katika programu yako kama kutekeleza undo/redo, huku pia ukifanya iwe rahisi kufuatilia hitilafu. Kwa mfano, unaweza kuandika kila mabadiliko yaliyofanywa kwa hali na kuweka historia ya mabadiliko ili kuelewa chanzo cha hitilafu.
+
+Katika JavaScript, unaweza kutumia [`Object.freeze()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze) kuunda toleo lisilobadilika la kitu. Ukijaribu kufanya mabadiliko kwa kitu kisichobadilika, kutatokea hitilafu.
+
+✅ Je, unajua tofauti kati ya kitu *kisichobadilika cha juu juu* na *kisichobadilika cha kina*? Unaweza kusoma kuhusu hilo [hapa](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze#What_is_shallow_freeze).
+
+### Kazi
+
+Hebu tuunde kazi mpya ya `updateState()`:
+
+```js
+function updateState(property, newData) {
+  state = Object.freeze({
+    ...state,
+    [property]: newData
+  });
+}
+```
+
+Katika kazi hii, tunaunda kitu kipya cha hali na kunakili data kutoka kwa hali ya awali kwa kutumia [*spread (`...`) operator*](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/Spread_syntax#Spread_in_object_literals). Kisha tunabadilisha mali fulani ya kitu cha hali na data mpya kwa kutumia [bracket notation](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Working_with_Objects#Objects_and_properties) `[property]` kwa ugawaji. Hatimaye, tunafungia kitu ili kuzuia mabadiliko kwa kutumia `Object.freeze()`. Kwa sasa tuna mali ya `account` pekee iliyohifadhiwa katika hali, lakini kwa mbinu hii unaweza kuongeza mali nyingi kama unavyohitaji katika hali.
+
+Pia tutasasisha uanzishaji wa `state` kuhakikisha hali ya awali imefungwa pia:
+
+```js
+let state = Object.freeze({
+  account: null
+});
+```
+
+Baada ya hapo, sasisha kazi ya `register` kwa kubadilisha ugawaji wa `state.account = result;` na:
+
+```js
+updateState('account', result);
+```
+
+Fanya vivyo hivyo na kazi ya `login`, ukibadilisha `state.account = data;` na:
+
+```js
+updateState('account', data);
+```
+
+Sasa tutachukua nafasi ya kurekebisha suala la data za akaunti kutosafishwa wakati mtumiaji anabofya *Ondoka*.
+
+Unda kazi mpya `logout()`:
+
+```js
+function logout() {
+  updateState('account', null);
+  navigate('/login');
+}
+```
+
+Katika `updateDashboard()`, badilisha uelekezaji `return navigate('/login');` na `return logout()`;
+
+Jaribu kusajili akaunti mpya, kutoka na kuingia tena ili kuhakikisha kila kitu kinafanya kazi vizuri.
+
+> Kidokezo: unaweza kuangalia mabadiliko yote ya hali kwa kuongeza `console.log(state)` chini ya `updateState()` na kufungua koni katika zana za maendeleo za kivinjari chako.
+
+## Hifadhi Hali
+
+Programu nyingi za wavuti zinahitaji kuhifadhi data ili kufanya kazi kwa usahihi. Data zote muhimu kawaida huhifadhiwa kwenye hifadhidata na kufikiwa kupitia API ya seva, kama data za akaunti ya mtumiaji katika kesi yetu. Lakini wakati mwingine, pia ni muhimu kuhifadhi data fulani kwenye programu ya mteja inayotumika kwenye kivinjari chako, kwa uzoefu bora wa mtumiaji au kuboresha utendaji wa upakiaji.
+
+Unapotaka kuhifadhi data kwenye kivinjari chako, kuna maswali machache muhimu unayopaswa kujiuliza:
+
+- *Je, data ni nyeti?* Unapaswa kuepuka kuhifadhi data yoyote nyeti kwa mteja, kama nywila za mtumiaji.
+- *Unahitaji kuhifadhi data hii kwa muda gani?* Je, unapanga kufikia data hii tu kwa kikao cha sasa au unataka ihifadhiwe milele?
+
+Kuna njia nyingi za kuhifadhi taarifa ndani ya programu ya wavuti, kulingana na kile unachotaka kufanikisha. Kwa mfano, unaweza kutumia URL kuhifadhi swali la utafutaji, na kuifanya iweze kushirikiwa kati ya watumiaji. Unaweza pia kutumia [vidakuzi vya HTTP](https://developer.mozilla.org/docs/Web/HTTP/Cookies) ikiwa data inahitaji kushirikiwa na seva, kama taarifa za [uthibitishaji](https://en.wikipedia.org/wiki/Authentication).
+
+Chaguo jingine ni kutumia mojawapo ya API nyingi za kivinjari za kuhifadhi data. Mbili kati ya hizo ni za kuvutia hasa:
+
+- [`localStorage`](https://developer.mozilla.org/docs/Web/API/Window/localStorage): hifadhi ya [Key/Value](https://en.wikipedia.org/wiki/Key%E2%80%93value_database) inayoruhusu kuhifadhi data maalum kwa tovuti ya sasa katika vipindi tofauti. Data iliyohifadhiwa ndani yake haimaliziki.
+- [`sessionStorage`](https://developer.mozilla.org/docs/Web/API/Window/sessionStorage): hii inafanya kazi sawa na `localStorage` isipokuwa kwamba data iliyohifadhiwa ndani yake inafutwa wakati kikao kinapoisha (wakati kivinjari kinafungwa).
+
+Kumbuka kuwa API hizi mbili huruhusu tu kuhifadhi [nyuzi](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String). Ikiwa unataka kuhifadhi vitu changamano, utahitaji kuibadilisha kuwa muundo wa [JSON](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON) kwa kutumia [`JSON.stringify()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify).
+
+✅ Ikiwa unataka kuunda programu ya wavuti isiyofanya kazi na seva, pia inawezekana kuunda hifadhidata kwa mteja kwa kutumia [`IndexedDB` API](https://developer.mozilla.org/docs/Web/API/IndexedDB_API). Hii inahifadhiwa kwa matumizi ya hali ya juu au ikiwa unahitaji kuhifadhi kiasi kikubwa cha data, kwani ni ngumu zaidi kutumia.
+
+### Kazi
+
+Tunataka watumiaji wetu wabaki wameingia hadi watakapobofya wazi kitufe cha *Ondoka*, kwa hivyo tutatumia `localStorage` kuhifadhi data za akaunti. Kwanza, hebu tuelezee ufunguo ambao tutatumia kuhifadhi data zetu.
+
+```js
+const storageKey = 'savedAccount';
+```
+
+Kisha ongeza mstari huu mwishoni mwa kazi ya `updateState()`:
+
+```js
+localStorage.setItem(storageKey, JSON.stringify(state.account));
+```
+
+Kwa hili, data za akaunti ya mtumiaji zitahifadhiwa na kila wakati zitakuwa za kisasa kwani tulizingatia hapo awali masasisho yote ya hali yetu. Hapa ndipo tunapoanza kufaidika na marekebisho yetu ya awali 🙂.
+
+Kwa kuwa data imehifadhiwa, pia tunapaswa kushughulikia urejeshaji wake wakati programu inapakuliwa. Kwa kuwa tutaanza kuwa na msimbo zaidi wa uanzishaji, inaweza kuwa wazo nzuri kuunda kazi mpya ya `init`, ambayo pia inajumuisha msimbo wetu wa awali chini ya `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();
+```
+
+Hapa tunarejesha data iliyohifadhiwa, na ikiwa ipo tunasasisha hali ipasavyo. Ni muhimu kufanya hivi *kabla* ya kusasisha njia, kwani kunaweza kuwa na msimbo unaotegemea hali wakati wa sasisho la ukurasa.
+
+Pia tunaweza kufanya ukurasa wa *Dashibodi* kuwa ukurasa chaguo-msingi wa programu yetu, kwani sasa tunahifadhi data za akaunti. Ikiwa hakuna data inayopatikana, dashibodi inashughulikia kuelekeza kwenye ukurasa wa *Kuingia* hata hivyo. Katika `updateRoute()`, badilisha fallback `return navigate('/login');` na `return navigate('/dashboard');`.
+
+Sasa ingia kwenye programu na jaribu kuburudisha ukurasa. Unapaswa kubaki kwenye dashibodi. Kwa sasisho hilo tumeshughulikia masuala yetu yote ya awali...
+
+## Sasisha Data
+
+...Lakini pia tunaweza kuwa tumeunda suala jipya. Oops!
+
+Nenda kwenye dashibodi ukitumia akaunti ya `test`, kisha endesha amri hii kwenye terminal kuunda muamala mpya:
+
+```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
+```
+
+Jaribu kuburudisha ukurasa wa dashibodi kwenye kivinjari sasa. Nini kinatokea? Je, unaona muamala mpya?
+
+Hali imehifadhiwa milele shukrani kwa `localStorage`, lakini hiyo pia inamaanisha kuwa haijasasishwa hadi utoke kwenye programu na kuingia tena!
+
+Mkakati mmoja unaowezekana wa kurekebisha hilo ni kupakia tena data za akaunti kila wakati dashibodi inapopakuliwa, ili kuepuka data zilizokwama.
+
+### Kazi
+
+Unda kazi mpya `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);
+}
+```
+
+Njia hii inakagua kuwa kwa sasa tumeingia kisha inapakia tena data za akaunti kutoka kwa seva.
+
+Unda kazi nyingine inayoitwa `refresh`:
+
+```js
+async function refresh() {
+  await updateAccountData();
+  updateDashboard();
+}
+```
+
+Hii inasasisha data za akaunti, kisha inashughulikia kusasisha HTML ya ukurasa wa dashibodi. Hii ndiyo tunahitaji kuita wakati njia ya dashibodi inapopakuliwa. Sasisha ufafanuzi wa njia na:
+
+```js
+const routes = {
+  '/login': { templateId: 'login' },
+  '/dashboard': { templateId: 'dashboard', init: refresh }
+};
+```
+
+Jaribu kupakia tena dashibodi sasa, inapaswa kuonyesha data za akaunti zilizosasishwa.
+
+---
+
+## 🚀 Changamoto
+
+Sasa kwa kuwa tunapakia tena data za akaunti kila wakati dashibodi inapopakuliwa, unafikiri bado tunahitaji kuhifadhi *data zote za akaunti*?
+
+Jaribu kufanya kazi pamoja kubadilisha kile kinachohifadhiwa na kupakiwa kutoka `localStorage` ili kujumuisha tu kile kinachohitajika kabisa kwa programu kufanya kazi.
+
+## Jaribio la Baada ya Somo
+[Jaribio la baada ya somo](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/48)
+
+## Kazi
+
+[Tekeleza dirisha la "Ongeza muamala"](assignment.md)
+
+Hapa kuna mfano wa matokeo baada ya kukamilisha kazi:
+
+![Picha ya skrini inayoonyesha mfano wa dirisha la "Ongeza muamala"](../../../../translated_images/dialog.93bba104afeb79f12f65ebf8f521c5d64e179c40b791c49c242cf15f7e7fab15.sw.png)
+
+---
+
+**Kanusho**:  
+Hati hii imetafsiriwa kwa kutumia huduma ya tafsiri ya AI [Co-op Translator](https://github.com/Azure/co-op-translator). Ingawa tunajitahidi kwa usahihi, tafadhali fahamu kuwa tafsiri za kiotomatiki zinaweza kuwa na makosa au kutokuwa sahihi. Hati ya asili katika lugha yake ya awali inapaswa kuzingatiwa kama chanzo cha mamlaka. Kwa taarifa muhimu, inashauriwa kutumia tafsiri ya kitaalamu ya binadamu. Hatutawajibika kwa maelewano mabaya au tafsiri zisizo sahihi zinazotokana na matumizi ya tafsiri hii.
\ No newline at end of file
diff --git a/translations/sw/7-bank-project/4-state-management/assignment.md b/translations/sw/7-bank-project/4-state-management/assignment.md
new file mode 100644
index 00000000..4681f8f0
--- /dev/null
+++ b/translations/sw/7-bank-project/4-state-management/assignment.md
@@ -0,0 +1,39 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "f23a868536c07da991b1d4e773161e25",
+  "translation_date": "2025-08-28T03:35:26+00:00",
+  "source_file": "7-bank-project/4-state-management/assignment.md",
+  "language_code": "sw"
+}
+-->
+# Tekeleza "Ongeza muamala" dirisha la mazungumzo
+
+## Maelekezo
+
+App yetu ya benki bado inakosa kipengele muhimu: uwezo wa kuingiza miamala mipya. 
+Kutumia kila kitu ambacho umejifunza katika masomo manne yaliyopita, tekeleza dirisha la mazungumzo la "Ongeza muamala":
+
+- Ongeza kitufe cha "Ongeza muamala" kwenye ukurasa wa dashibodi
+- Ama tengeneza ukurasa mpya na kiolezo cha HTML, au tumia JavaScript kuonyesha/kuficha HTML ya dirisha bila kuondoka kwenye ukurasa wa dashibodi (unaweza kutumia mali ya [`hidden`](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/hidden) kwa hilo, au darasa za CSS)
+- Hakikisha unashughulikia [ufikivu wa kibodi na msomaji wa skrini](https://developer.paciellogroup.com/blog/2018/06/the-current-state-of-modal-dialog-accessibility/) kwa dirisha
+- Tekeleza fomu ya HTML kupokea data ya pembejeo
+- Tengeneza data ya JSON kutoka kwa data ya fomu na uitume kwa API
+- Sasisha ukurasa wa dashibodi na data mpya
+
+Angalia [maelezo ya API ya seva](../api/README.md) ili kuona ni API gani unahitaji kuita na ni muundo gani wa JSON unaotarajiwa.
+
+Hapa kuna mfano wa matokeo baada ya kukamilisha kazi:
+
+![Picha ya skrini inayoonyesha mfano wa dirisha la mazungumzo la "Ongeza muamala"](../../../../translated_images/dialog.93bba104afeb79f12f65ebf8f521c5d64e179c40b791c49c242cf15f7e7fab15.sw.png)
+
+## Rubric
+
+| Vigezo   | Bora kabisa                                                                                      | Inayotosha                                                                                                             | Inayohitaji Uboreshaji                      |
+| -------- | ------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------- | ------------------------------------------- |
+|          | Kuongeza muamala kumetekelezwa kikamilifu kufuatia mazoea bora yote yaliyoonekana katika masomo. | Kuongeza muamala kumetekelezwa, lakini hakufuata mazoea bora yaliyoonekana katika masomo, au inafanya kazi kwa sehemu. | Kuongeza muamala hakufanyi kazi kabisa.     |
+
+---
+
+**Kanusho**:  
+Hati hii imetafsiriwa kwa kutumia huduma ya kutafsiri ya AI [Co-op Translator](https://github.com/Azure/co-op-translator). Ingawa tunajitahidi kuhakikisha usahihi, tafadhali fahamu kuwa tafsiri za kiotomatiki zinaweza kuwa na makosa au kutokuwa sahihi. Hati ya asili katika lugha yake ya awali inapaswa kuzingatiwa kama chanzo cha mamlaka. Kwa taarifa muhimu, tafsiri ya kitaalamu ya binadamu inapendekezwa. Hatutawajibika kwa kutoelewana au tafsiri zisizo sahihi zinazotokana na matumizi ya tafsiri hii.
\ No newline at end of file
diff --git a/translations/sw/7-bank-project/README.md b/translations/sw/7-bank-project/README.md
new file mode 100644
index 00000000..cbc0c145
--- /dev/null
+++ b/translations/sw/7-bank-project/README.md
@@ -0,0 +1,35 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "830359535306594b448db6575ce5cdee",
+  "translation_date": "2025-08-28T03:23:21+00:00",
+  "source_file": "7-bank-project/README.md",
+  "language_code": "sw"
+}
+-->
+# :dollar: Jenga Benki
+
+Katika mradi huu, utajifunza jinsi ya kujenga benki ya kufikirika. Masomo haya yanajumuisha maelekezo ya jinsi ya kupanga programu ya wavuti na kutoa njia, kujenga fomu, kusimamia hali (state), na kupata data kutoka kwa API ambayo unaweza kutumia kupata data ya benki.
+
+| ![Screen1](../../../translated_images/screen1.baccbba0f1f93364672eb250d2fbd21574bb1caf79a2155022dc098a741cbdfe.sw.png) | ![Screen2](../../../translated_images/screen2.123c82a831a1d14ab2061994be2fa5de9cec1ce651047217d326d4773a6348e4.sw.png) |
+|--------------------------------|--------------------------------|
+
+## Masomo
+
+1. [Violezo vya HTML na Njia katika Programu ya Wavuti](1-template-route/README.md)
+2. [Jenga Fomu ya Kuingia na Kusajili](2-forms/README.md)
+3. [Mbinu za Kupata na Kutumia Data](3-data/README.md)
+4. [Mafunzo ya Usimamizi wa Hali](4-state-management/README.md)
+
+### Shukrani
+
+Masomo haya yaliandikwa kwa :hearts: na [Yohan Lasorsa](https://twitter.com/sinedied).
+
+Ikiwa una nia ya kujifunza jinsi ya kujenga [API ya seva](/7-bank-project/api/README.md) inayotumika katika masomo haya, unaweza kufuata [mfululizo huu wa video](https://aka.ms/NodeBeginner) (hasa video za 17 hadi 21).
+
+Unaweza pia kuangalia [mafunzo haya ya kujifunza kwa njia ya mwingiliano](https://aka.ms/learn/express-api).
+
+---
+
+**Kanusho**:  
+Hati hii imetafsiriwa kwa kutumia huduma ya kutafsiri ya AI [Co-op Translator](https://github.com/Azure/co-op-translator). Ingawa tunajitahidi kuhakikisha usahihi, tafadhali fahamu kuwa tafsiri za kiotomatiki zinaweza kuwa na makosa au kutokuwa sahihi. Hati ya asili katika lugha yake ya awali inapaswa kuzingatiwa kama chanzo cha mamlaka. Kwa taarifa muhimu, tafsiri ya kitaalamu ya binadamu inapendekezwa. Hatutawajibika kwa kutoelewana au tafsiri zisizo sahihi zinazotokana na matumizi ya tafsiri hii.
\ No newline at end of file
diff --git a/translations/sw/7-bank-project/api/README.md b/translations/sw/7-bank-project/api/README.md
new file mode 100644
index 00000000..cefe8921
--- /dev/null
+++ b/translations/sw/7-bank-project/api/README.md
@@ -0,0 +1,48 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "9884f8c8a61cf56214450f8b16a094ce",
+  "translation_date": "2025-08-28T03:27:38+00:00",
+  "source_file": "7-bank-project/api/README.md",
+  "language_code": "sw"
+}
+-->
+# API ya Benki
+
+> API ya Benki iliyojengwa kwa [Node.js](https://nodejs.org) + [Express](https://expressjs.com/).
+
+API tayari imejengwa kwa ajili yako na si sehemu ya zoezi.
+
+Hata hivyo, kama unataka kujifunza jinsi ya kujenga API kama hii unaweza kufuata mfululizo wa video hizi: https://aka.ms/NodeBeginner (video za 17 hadi 21 zinashughulikia API hii hasa).
+
+Unaweza pia kuangalia mafunzo haya ya maingiliano: https://aka.ms/learn/express-api
+
+## Kuendesha seva
+
+Hakikisha umeweka [Node.js](https://nodejs.org).
+
+1. Git clone repo hii [The Web-Dev-For-Beginners](https://github.com/microsoft/Web-Dev-For-Beginners).
+2. Fungua terminal yako na nenda kwenye folda ya `Web-Dev-For-Beginners/7-bank-project/api`
+2. Run `npm install` na subiri vifurushi vimalize kusakinishwa (inaweza kuchukua muda kulingana na ubora wa muunganisho wako wa intaneti).
+3. Baada ya usakinishaji kukamilika, run `npm start` na uko tayari kuendelea.
+
+Seva inapaswa kuanza kusikiliza kwenye port `5000`.
+*Seva hii itakuwa inaendesha pamoja na terminal kuu ya programu ya benki (ikisikiliza kwenye port `3000`), usiifunge.*
+
+> Kumbuka: maingizo yote yanahifadhiwa kwenye kumbukumbu na hayahifadhiwi, hivyo seva ikisimamishwa data zote zinapotea.
+
+## Maelezo ya API
+
+Njia                                         | Maelezo
+---------------------------------------------|------------------------------------
+GET    /api/                                 | Pata taarifa za seva
+POST   /api/accounts/                        | Unda akaunti, mfano: `{ user: 'Yohan', description: 'My budget', currency: 'EUR', balance: 100 }`
+GET    /api/accounts/:user                   | Pata data zote za akaunti maalum
+DELETE /api/accounts/:user                   | Futa akaunti maalum
+POST   /api/accounts/:user/transactions      | Ongeza muamala, mfano: `{ date: '2020-07-23T18:25:43.511Z', object: 'Bought a book', amount: -20 }`
+DELETE  /api/accounts/:user/transactions/:id | Futa muamala maalum
+
+---
+
+**Kanusho**:  
+Hati hii imetafsiriwa kwa kutumia huduma ya tafsiri ya AI [Co-op Translator](https://github.com/Azure/co-op-translator). Ingawa tunajitahidi kwa usahihi, tafadhali fahamu kuwa tafsiri za kiotomatiki zinaweza kuwa na makosa au kutokuwa sahihi. Hati ya asili katika lugha yake ya awali inapaswa kuzingatiwa kama chanzo cha mamlaka. Kwa taarifa muhimu, inashauriwa kutumia tafsiri ya kitaalamu ya binadamu. Hatutawajibika kwa maelewano mabaya au tafsiri zisizo sahihi zinazotokana na matumizi ya tafsiri hii.
\ No newline at end of file
diff --git a/translations/sw/7-bank-project/solution/README.md b/translations/sw/7-bank-project/solution/README.md
new file mode 100644
index 00000000..fd025ba2
--- /dev/null
+++ b/translations/sw/7-bank-project/solution/README.md
@@ -0,0 +1,27 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "461aa4fc74c6b1789c3a13b5d82c0cd9",
+  "translation_date": "2025-08-28T03:28:09+00:00",
+  "source_file": "7-bank-project/solution/README.md",
+  "language_code": "sw"
+}
+-->
+# Programu ya benki
+
+> Suluhisho la mfano kwa mradi wa programu ya benki, iliyojengwa kwa kutumia HTML5, CSS, na JavaScript ya kawaida (bila kutumia fremu au maktaba).
+
+## Kuendesha programu
+
+Kwanza hakikisha kuwa una [seva ya API](../api/README.md) inayoendesha.
+
+Seva yoyote ya wavuti inaweza kutumika kuendesha programu, lakini kwa kuwa unapaswa kuwa na [Node.js](https://nodejs.org) tayari imewekwa ili kuendesha API, unaweza:
+
+1. Fanya Git clone ya repo hii.
+2. Fungua terminal, nenda kwenye saraka hii, kisha endesha `npx lite-server .`. Itaanzisha seva ya maendeleo ya wavuti kwenye bandari `3000`
+3. Fungua `http://localhost:3000` kwenye kivinjari ili kuendesha programu.
+
+---
+
+**Kanusho**:  
+Hati hii imetafsiriwa kwa kutumia huduma ya tafsiri ya AI [Co-op Translator](https://github.com/Azure/co-op-translator). Ingawa tunajitahidi kuhakikisha usahihi, tafadhali fahamu kuwa tafsiri za kiotomatiki zinaweza kuwa na makosa au kutokuwa sahihi. Hati asilia katika lugha yake ya awali inapaswa kuzingatiwa kama chanzo cha mamlaka. Kwa taarifa muhimu, tafsiri ya kitaalamu ya binadamu inapendekezwa. Hatutawajibika kwa kutoelewana au tafsiri zisizo sahihi zinazotokana na matumizi ya tafsiri hii.
\ No newline at end of file
diff --git a/translations/sw/8-code-editor/1-using-a-code-editor/README.md b/translations/sw/8-code-editor/1-using-a-code-editor/README.md
new file mode 100644
index 00000000..9ccb92f4
--- /dev/null
+++ b/translations/sw/8-code-editor/1-using-a-code-editor/README.md
@@ -0,0 +1,159 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "7aa6e4f270d38d9cb17f2b5bd86b863d",
+  "translation_date": "2025-08-28T04:22:08+00:00",
+  "source_file": "8-code-editor/1-using-a-code-editor/README.md",
+  "language_code": "sw"
+}
+-->
+# Kutumia mhariri wa msimbo
+
+Somo hili linashughulikia misingi ya kutumia [VSCode.dev](https://vscode.dev), mhariri wa msimbo unaotegemea wavuti, ili uweze kufanya mabadiliko kwenye msimbo wako na kuchangia mradi bila kusakinisha chochote kwenye kompyuta yako.
+
+## Malengo ya Kujifunza
+
+Katika somo hili, utajifunza jinsi ya:
+
+- Kutumia mhariri wa msimbo katika mradi wa msimbo
+- Kufuatilia mabadiliko kwa kutumia udhibiti wa toleo
+- Kubinafsisha mhariri kwa ajili ya maendeleo
+
+### Mahitaji ya Awali
+
+Kabla ya kuanza, utahitaji kuunda akaunti na [GitHub](https://github.com). Tembelea [GitHub](https://github.com/) na uunde akaunti ikiwa bado huna.
+
+### Utangulizi
+
+Mhariri wa msimbo ni zana muhimu kwa kuandika programu na kushirikiana katika miradi ya msimbo iliyopo. Mara unapofahamu misingi ya mhariri na jinsi ya kutumia vipengele vyake, utaweza kuzitumia unapokuwa unaandika msimbo.
+
+## Kuanza na VSCode.dev
+
+[VSCode.dev](https://vscode.dev) ni mhariri wa msimbo unaopatikana mtandaoni. Huna haja ya kusakinisha chochote ili kuitumia, ni kama kufungua tovuti nyingine yoyote. Ili kuanza na mhariri huu, fungua kiungo kifuatacho: [https://vscode.dev](https://vscode.dev). Ikiwa hujaingia kwenye [GitHub](https://github.com/), fuata maagizo ili kuingia au kuunda akaunti mpya kisha uingie.
+
+Mara inaposheheni, inapaswa kuonekana kama picha hii:
+
+![Default VSCode.dev](../../../../translated_images/default-vscode-dev.5d06881d65c1b3234ce50cd9ed3b0028e6031ad5f5b441bcbed96bfa6311f6d0.sw.png)
+
+Kuna sehemu kuu tatu, kuanzia kushoto kabisa kuelekea kulia:
+
+1. _Activity bar_ ambayo ina ikoni kadhaa, kama kioo cha kukuza 🔎, gia ⚙️, na nyingine chache.
+2. _Side bar_ iliyopanuliwa ambayo kwa kawaida huonyesha _Explorer_.
+3. Mwisho, eneo la msimbo upande wa kulia.
+
+Bonyeza kila ikoni ili kuonyesha menyu tofauti. Ukimaliza, bonyeza _Explorer_ ili urudi pale ulipoanzia.
+
+Unapoanza kuunda msimbo au kurekebisha msimbo uliopo, itafanyika katika eneo kubwa zaidi upande wa kulia. Utatumia eneo hili pia kuona msimbo uliopo, jambo ambalo utafanya baadaye.
+
+## Kufungua Hifadhi ya GitHub
+
+Jambo la kwanza unalohitaji ni kufungua hifadhi ya GitHub. Kuna njia nyingi za kufungua hifadhi. Katika sehemu hii utaona njia mbili tofauti za kufungua hifadhi ili uanze kufanya mabadiliko.
+
+### 1. Kupitia mhariri
+
+Tumia mhariri kufungua hifadhi ya mbali. Ukienda [VSCode.dev](https://vscode.dev) utaona kitufe cha _"Open Remote Repository"_:
+
+![Open remote repository](../../../../translated_images/open-remote-repository.bd9c2598b8949e7fc283cdfc8f4050c6205a7c7c6d3f78c4b135115d037d6fa2.sw.png)
+
+Unaweza pia kutumia _command palette_. _Command palette_ ni kisanduku cha kuingiza ambapo unaweza kuandika neno lolote linalohusiana na amri au hatua ili kupata amri sahihi ya kutekeleza. Tumia menyu upande wa juu-kushoto, kisha uchague _View_, na kisha uchague _Command Palette_, au tumia njia ya mkato ya kibodi: Ctrl-Shift-P (kwa MacOS itakuwa Command-Shift-P).
+
+![Palette Menu](../../../../translated_images/palette-menu.4946174e07f426226afcdad707d19b8d5150e41591c751c45b5dee213affef91.sw.png)
+
+Mara menyu inapofunguka, andika _open remote repository_, kisha uchague chaguo la kwanza. Hifadhi nyingi ambazo ni sehemu yako au ulizofungua hivi karibuni zitaonekana. Unaweza pia kutumia URL kamili ya GitHub kuchagua moja. Tumia URL ifuatayo na ubandike kwenye kisanduku:
+
+```
+https://github.com/microsoft/Web-Dev-For-Beginners
+```
+
+✅ Ikiwa imefanikiwa, utaona faili zote za hifadhi hii zimepakiwa kwenye mhariri wa maandishi.
+
+### 2. Kutumia URL
+
+Unaweza pia kutumia URL moja kwa moja kupakia hifadhi. Kwa mfano, URL kamili ya hifadhi ya sasa ni [https://github.com/microsoft/Web-Dev-For-Beginners](https://github.com/microsoft/Web-Dev-For-Beginners), lakini unaweza kubadilisha kikoa cha GitHub na `VSCode.dev/github` na kupakia hifadhi moja kwa moja. URL inayotokana itakuwa [https://vscode.dev/github/microsoft/Web-Dev-For-Beginners](https://vscode.dev/github/microsoft/Web-Dev-For-Beginners).
+
+## Kuhariri Faili
+
+Mara unapofungua hifadhi kwenye kivinjari/VSCode.dev, hatua inayofuata itakuwa kufanya masasisho au mabadiliko kwenye mradi.
+
+### 1. Kuunda faili mpya
+
+Unaweza kuunda faili ndani ya folda iliyopo, au kuiunda kwenye folda kuu. Ili kuunda faili mpya, fungua eneo/folda unayotaka faili ihifadhiwe na uchague ikoni ya _'New file ...'_ kwenye _activity bar_ (kushoto), ipe jina na bonyeza _enter_.
+
+![Create a new file](../../../../translated_images/create-new-file.2814e609c2af9aeb6c6fd53156c503ac91c3d538f9cac63073b2dd4a7631f183.sw.png)
+
+### 2. Kuhariri na kuhifadhi faili kwenye hifadhi
+
+Kutumia VSCode.dev ni muhimu wakati wowote unapotaka kufanya masasisho ya haraka kwenye mradi wako bila kupakia programu yoyote ndani ya kompyuta.
+
+Ili kusasisha msimbo wako, bonyeza ikoni ya 'Explorer', pia iliyopo kwenye _activity bar_ ili kuona faili na folda kwenye hifadhi. Chagua faili ili kufungua kwenye eneo la msimbo, fanya mabadiliko yako na uhifadhi.
+
+![Edit a file](../../../../translated_images/edit-a-file.52c0ee665ef19f08119d62d63f395dfefddc0a4deb9268d73bfe791f52c5807a.sw.png)
+
+Mara unapomaliza kusasisha mradi wako, chagua ikoni ya _`source control`_ ambayo ina mabadiliko yote mapya uliyofanya kwenye hifadhi yako.
+
+Ili kuona mabadiliko uliyofanya kwenye mradi wako, chagua faili kwenye folda ya `Changes` kwenye _side bar_ iliyopanuliwa. Hii itafungua 'Working Tree' ili kuona mabadiliko uliyofanya kwenye faili. Rangi nyekundu inaonyesha kilichofutwa, wakati kijani kinaonyesha kilichoongezwa.
+
+![View changes](../../../../translated_images/working-tree.c58eec08e6335c79cc708c0c220c0b7fea61514bd3c7fb7471905a864aceac7c.sw.png)
+
+Ikiwa unaridhika na mabadiliko uliyofanya, weka kipanya kwenye folda ya `Changes` na bonyeza kitufe cha `+` ili kuweka mabadiliko. Kuweka mabadiliko kunamaanisha kuandaa mabadiliko yako ili kuyachapisha kwenye GitHub.
+
+Ikiwa hujaridhika na baadhi ya mabadiliko na unataka kuyafuta, weka kipanya kwenye folda ya `Changes` na uchague ikoni ya `undo`.
+
+Kisha, andika `commit message` _(Maelezo ya mabadiliko uliyofanya kwenye mradi)_, bonyeza ikoni ya `check` ili kuyachapisha.
+
+Mara unapomaliza kufanya kazi kwenye mradi wako, chagua ikoni ya `hamburger menu` juu kushoto ili kurudi kwenye hifadhi kwenye github.com.
+
+![Stage & commit changes](../../../../8-code-editor/images/edit-vscode.dev.gif)
+
+## Kutumia Viongezeo
+
+Kusakinisha viongezeo kwenye VSCode hukuruhusu kuongeza vipengele vipya na chaguo za mazingira ya maendeleo yaliyobinafsishwa kwenye mhariri wako ili kuboresha mtiririko wa kazi wa maendeleo. Viongezeo hivi pia husaidia kuongeza msaada kwa lugha mbalimbali za programu na mara nyingi huwa ni viongezeo vya jumla au vya lugha maalum.
+
+Ili kuvinjari orodha ya viongezeo vyote vinavyopatikana, bonyeza ikoni ya _`Extensions`_ kwenye _activity bar_ na uanze kuandika jina la kiongezeo kwenye kisanduku cha maandishi kilichoandikwa _'Search Extensions in Marketplace'_.
+
+Utaona orodha ya viongezeo, kila kimoja kikiwa na **jina la kiongezeo, jina la mchapishaji, maelezo mafupi, idadi ya upakuaji** na **alama za nyota**.
+
+![Extension details](../../../../translated_images/extension-details.9f8f1fd4e9eb2de5069ae413119eb8ee43172776383ebe2f7cf640e11df2e106.sw.png)
+
+Unaweza pia kuona viongezeo vyote vilivyosakinishwa hapo awali kwa kupanua folda ya _`Installed`_, viongezeo maarufu vinavyotumiwa na watengenezaji wengi kwenye folda ya _`Popular`_, na viongezeo vilivyopendekezwa kwa ajili yako kulingana na faili ulizofungua hivi karibuni kwenye folda ya _`Recommended`_.
+
+![View extensions](../../../../translated_images/extensions.eca0e0c7f59a10b5c88be7fe24b3e32cca6b6058b35a49026c3a9d80b1813b7c.sw.png)
+
+### 1. Kusakinisha Viongezeo
+
+Ili kusakinisha kiongezeo, andika jina la kiongezeo kwenye kisanduku cha utafutaji na bonyeza juu yake ili kuona maelezo ya ziada kuhusu kiongezeo kwenye eneo la msimbo mara kinapoonekana kwenye _side bar_ iliyopanuliwa.
+
+Unaweza kubonyeza kitufe cha _blue install_ kwenye _side bar_ iliyopanuliwa ili kusakinisha au kutumia kitufe cha kusakinisha kinachoonekana kwenye eneo la msimbo mara unapochagua kiongezeo ili kupakia maelezo ya ziada.
+
+![Install extensions](../../../../8-code-editor/images/install-extension.gif)
+
+### 2. Kubinafsisha Viongezeo
+
+Baada ya kusakinisha kiongezeo, huenda ukahitaji kurekebisha tabia yake na kuibinafsisha kulingana na mapendeleo yako. Ili kufanya hivyo, chagua ikoni ya Viongezeo, na wakati huu, kiongezeo chako kitaonekana kwenye folda ya _Installed_, bonyeza _**Gear icon**_ na uende kwenye _Extensions Setting_.
+
+![Modify extension settings](../../../../translated_images/extension-settings.21c752ae4f4cdb78a867f140ccd0680e04619d0c44bb4afb26373e54b829d934.sw.png)
+
+### 3. Kusimamia Viongezeo
+
+Baada ya kusakinisha na kutumia kiongezeo, VSCode.dev inatoa chaguo za kusimamia kiongezeo kulingana na mahitaji tofauti. Kwa mfano, unaweza kuchagua:
+
+- **Kuzima:** _(Unazima kiongezeo kwa muda ikiwa hukihitaji lakini hutaki kukiondoa kabisa)_
+
+    Chagua kiongezeo kilichosakinishwa kwenye _side bar_ iliyopanuliwa > bonyeza ikoni ya Gear > chagua 'Disable' au 'Disable (Workspace)' **AU** Fungua kiongezeo kwenye eneo la msimbo na bonyeza kitufe cha bluu cha Disable.
+
+- **Kuondoa:** Chagua kiongezeo kilichosakinishwa kwenye _side bar_ iliyopanuliwa > bonyeza ikoni ya Gear > chagua 'Uninstall' **AU** Fungua kiongezeo kwenye eneo la msimbo na bonyeza kitufe cha bluu cha Uninstall.
+
+---
+
+## Kazi ya Nyumbani
+
+[Unda tovuti ya wasifu ukitumia vscode.dev](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/8-code-editor/1-using-a-code-editor/assignment.md)
+
+## Mapitio na Kujisomea
+
+Soma zaidi kuhusu [VSCode.dev](https://code.visualstudio.com/docs/editor/vscode-web?WT.mc_id=academic-0000-alfredodeza) na baadhi ya vipengele vyake vingine.
+
+---
+
+**Kanusho**:  
+Hati hii imetafsiriwa kwa kutumia huduma ya kutafsiri ya AI [Co-op Translator](https://github.com/Azure/co-op-translator). Ingawa tunajitahidi kuhakikisha usahihi, tafadhali fahamu kuwa tafsiri za kiotomatiki zinaweza kuwa na makosa au kutokuwa sahihi. Hati ya asili katika lugha yake ya awali inapaswa kuzingatiwa kama chanzo cha mamlaka. Kwa taarifa muhimu, tafsiri ya kitaalamu ya binadamu inapendekezwa. Hatutawajibika kwa kutoelewana au tafsiri zisizo sahihi zinazotokana na matumizi ya tafsiri hii.
\ No newline at end of file
diff --git a/translations/sw/8-code-editor/1-using-a-code-editor/assignment.md b/translations/sw/8-code-editor/1-using-a-code-editor/assignment.md
new file mode 100644
index 00000000..949f6ede
--- /dev/null
+++ b/translations/sw/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-28T04:24:01+00:00",
+  "source_file": "8-code-editor/1-using-a-code-editor/assignment.md",
+  "language_code": "sw"
+}
+-->
+# Unda Tovuti ya Resume kwa kutumia vscode.dev
+
+_Je, itakuwa ya kuvutia kiasi gani ikiwa mwajiri ataomba resume yako na wewe unamtumia url?_ 😎
+
+## Malengo
+
+Baada ya kazi hii, utajifunza jinsi ya:
+
+- Kuunda tovuti ya kuonyesha resume yako
+
+### Mahitaji ya Awali
+
+1. Akaunti ya GitHub. Tembelea [GitHub](https://github.com/) na unda akaunti ikiwa bado huna.
+
+## Hatua
+
+**Hatua ya 1:** Unda Hifadhi Mpya ya GitHub na uitie jina `my-resume`
+
+**Hatua ya 2:** Unda faili `index.html` kwenye hifadhi yako. Tutaongeza angalau faili moja tukiwa bado kwenye github.com kwa sababu huwezi kufungua hifadhi tupu kwenye vscode.dev.
+
+Bonyeza kiungo cha `creating a new file`, andika jina `index.html` na uchague kitufe cha `Commit new file`.
+
+![Unda faili mpya kwenye github.com](../../../../translated_images/new-file-github.com.c886796d800e8056561829a181be1382c5303da9d902d8b2dd82b68a4806e21f.sw.png)
+
+**Hatua ya 3:** Fungua [VSCode.dev](https://vscode.dev) na uchague kitufe cha `Open Remote Repository`.
+
+Nakili url ya hifadhi uliyounda kwa ajili ya tovuti yako ya resume na uiweke kwenye kisanduku cha ingizo:
+
+_Badilisha `your-username` na jina la mtumiaji wa GitHub wako._
+
+```
+https://github.com/your-username/my-resume
+```
+
+✅ Ikiwa imefanikiwa, utaona mradi wako na faili ya index.html ikifunguliwa kwenye mhariri wa maandishi kwenye kivinjari.
+
+![Unda faili mpya](../../../../translated_images/project-on-vscode.dev.e79815a9a95ee7feac72ebe5c941c91279716be37c575dbdbf2f43bea2c7d8b6.sw.png)
+
+**Hatua ya 4:** Fungua faili `index.html`, weka msimbo ulio hapa chini kwenye eneo lako la msimbo na uhifadhi.
+
+<details>
+    <summary><b>Msimbo wa HTML unaohusika na maudhui ya tovuti yako ya resume.</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>Jina Lako Linaenda Hapa!</title>
+            </head>
+            <body>
+                <header id="header">
+                    <!-- kichwa cha resume chenye jina lako na cheo -->
+                    <h1>Jina Lako Linaenda Hapa!</h1>
+                    <hr>
+                    Nafasi Yako!
+                    <hr>
+                </header>
+                <main>
+                    <article id="mainLeft">
+                        <section>
+                            <h2>MAWASILIANO</h2>
+                            <!-- maelezo ya mawasiliano ikijumuisha mitandao ya kijamii -->
+                            <p>
+                                <i class="fa fa-envelope" aria-hidden="true"></i>
+                                <a href="mailto:username@domain.top-level domain">Andika barua pepe yako hapa</a>
+                            </p>
+                            <p>
+                                <i class="fab fa-github" aria-hidden="true"></i>
+                                <a href="github.com/yourGitHubUsername">Andika jina lako hapa!</a>
+                            </p>
+                            <p>
+                                <i class="fab fa-linkedin" aria-hidden="true"></i>
+                                <a href="linkedin.com/yourLinkedInUsername">Andika jina lako hapa!</a>
+                            </p>
+                        </section>
+                        <section>
+                            <h2>UJUZI</h2>
+                            <!-- ujuzi wako -->
+                            <ul>
+                                <li>Ujuzi 1!</li>
+                                <li>Ujuzi 2!</li>
+                                <li>Ujuzi 3!</li>
+                                <li>Ujuzi 4!</li>
+                            </ul>
+                        </section>
+                        <section>
+                            <h2>ELIMU</h2>
+                            <!-- elimu yako -->
+                            <h3>Andika kozi yako hapa!</h3>
+                            <p>
+                                Andika taasisi yako hapa!
+                            </p>
+                            <p>
+                                Tarehe ya Kuanza - Tarehe ya Kumaliza
+                            </p>
+                        </section>            
+                    </article>
+                    <article id="mainRight">
+                        <section>
+                            <h2>KUHUSU</h2>
+                            <!-- kuhusu wewe -->
+                            <p>Andika maelezo mafupi kuhusu wewe!</p>
+                        </section>
+                        <section>
+                            <h2>UZOEFU WA KAZI</h2>
+                            <!-- uzoefu wako wa kazi -->
+                            <h3>Kichwa cha Kazi</h3>
+                            <p>
+                                Jina la Shirika Linaenda Hapa | Mwezi wa Kuanza – Mwezi wa Kumaliza
+                            </p>
+                            <ul>
+                                    <li>Kazi 1 - Andika ulichofanya!</li>
+                                    <li>Kazi 2 - Andika ulichofanya!</li>
+                                    <li>Andika matokeo/athari ya mchango wako</li>
+                                    
+                            </ul>
+                            <h3>Kichwa cha Kazi 2</h3>
+                            <p>
+                                Jina la Shirika Linaenda Hapa | Mwezi wa Kuanza – Mwezi wa Kumaliza
+                            </p>
+                            <ul>
+                                    <li>Kazi 1 - Andika ulichofanya!</li>
+                                    <li>Kazi 2 - Andika ulichofanya!</li>
+                                    <li>Andika matokeo/athari ya mchango wako</li>
+                                    
+                            </ul>
+                        </section>
+                    </article>
+                </main>
+            </body>
+        </html>
+</details>
+
+Ongeza maelezo ya resume yako ili kuchukua nafasi ya _maandishi ya mfano_ kwenye msimbo wa html.
+
+**Hatua ya 5:** Peleka mshale kwenye folda ya My-Resume, bonyeza ikoni ya `New File ...` na unda faili 2 mpya kwenye mradi wako: faili `style.css` na faili `codeswing.json`.
+
+**Hatua ya 6:** Fungua faili `style.css`, weka msimbo ulio hapa chini na uhifadhi.
+
+<details>
+        <summary><b>Msimbo wa CSS wa kupanga mpangilio wa tovuti.</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>
+
+**Hatua ya 6:** Fungua faili `codeswing.json`, weka msimbo ulio hapa chini na uhifadhi.
+
+    {
+    "scripts": [],
+    "styles": []
+    }
+
+**Hatua ya 7:** Sakinisha `Codeswing extension` ili kuona tovuti ya resume kwenye eneo la msimbo.
+
+Bonyeza ikoni ya _`Extensions`_ kwenye upau wa shughuli na andika Codeswing. Aidha bonyeza kitufe cha _bluu cha kusakinisha_ kwenye upau wa shughuli ulioongezwa ili kusakinisha au tumia kitufe cha kusakinisha kinachoonekana kwenye eneo la msimbo mara tu unapochagua kiendelezi ili kupakia maelezo ya ziada. Mara tu baada ya kusakinisha kiendelezi, angalia eneo lako la msimbo ili kuona mabadiliko kwenye mradi wako 😃.
+
+![Sakinisha viendelezi](../../../../8-code-editor/images/install-extension.gif)
+
+Hivi ndivyo utakavyoona kwenye skrini yako baada ya kusakinisha kiendelezi.
+
+![Codeswing extension in action](../../../../translated_images/after-codeswing-extension-pb.0ebddddcf73b550994947a9084e35e2836c713ae13839d49628e3c764c1cfe83.sw.png)
+
+Ikiwa unaridhika na mabadiliko uliyofanya, peleka mshale kwenye folda ya `Changes` na bonyeza kitufe cha `+` ili kuweka mabadiliko.
+
+Andika ujumbe wa commit _(Maelezo ya mabadiliko uliyofanya kwenye mradi)_ na thibitisha mabadiliko yako kwa kubonyeza `check`. Mara tu unapomaliza kufanya kazi kwenye mradi wako, chagua ikoni ya menyu ya hamburger kwenye kona ya juu kushoto ili kurudi kwenye hifadhi ya GitHub.
+
+Hongera 🎉 Umeunda tovuti yako ya resume kwa kutumia vscode.dev kwa hatua chache.
+
+## 🚀 Changamoto
+
+Fungua hifadhi ya mbali ambayo una ruhusa ya kufanya mabadiliko na sasisha baadhi ya faili. Kisha, jaribu kuunda tawi jipya na mabadiliko yako na ufanye Ombi la Kuvuta.
+
+## Tathmini na Kujisomea
+
+Soma zaidi kuhusu [VSCode.dev](https://code.visualstudio.com/docs/editor/vscode-web?WT.mc_id=academic-0000-alfredodeza) na baadhi ya vipengele vyake vingine.
+
+---
+
+**Kanusho**:  
+Hati hii imetafsiriwa kwa kutumia huduma ya tafsiri ya AI [Co-op Translator](https://github.com/Azure/co-op-translator). Ingawa tunajitahidi kwa usahihi, tafadhali fahamu kuwa tafsiri za kiotomatiki zinaweza kuwa na makosa au kutokuwa sahihi. Hati ya asili katika lugha yake ya awali inapaswa kuzingatiwa kama chanzo cha mamlaka. Kwa taarifa muhimu, inashauriwa kutumia huduma ya tafsiri ya kitaalamu ya binadamu. Hatutawajibika kwa maelewano mabaya au tafsiri zisizo sahihi zinazotokana na matumizi ya tafsiri hii.
\ No newline at end of file
diff --git a/translations/sw/CODE_OF_CONDUCT.md b/translations/sw/CODE_OF_CONDUCT.md
new file mode 100644
index 00000000..58382e6b
--- /dev/null
+++ b/translations/sw/CODE_OF_CONDUCT.md
@@ -0,0 +1,23 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "b0a9b4cccd918195f58224d5793da1a6",
+  "translation_date": "2025-08-28T03:23:01+00:00",
+  "source_file": "CODE_OF_CONDUCT.md",
+  "language_code": "sw"
+}
+-->
+# Kanuni za Maadili ya Microsoft Open Source
+
+Mradi huu umechukua [Kanuni za Maadili za Microsoft Open Source](https://opensource.microsoft.com/codeofconduct/?WT.mc_id=academic-77807-sagibbon).
+
+Rasilimali:
+
+- [Kanuni za Maadili za Microsoft Open Source](https://opensource.microsoft.com/codeofconduct/?WT.mc_id=academic-77807-sagibbon)
+- [Maswali Yanayoulizwa Mara kwa Mara kuhusu Kanuni za Maadili za Microsoft](https://opensource.microsoft.com/codeofconduct/faq/?WT.mc_id=academic-77807-sagibbon)
+- Wasiliana na [opencode@microsoft.com](mailto:opencode@microsoft.com) kwa maswali au wasiwasi
+
+---
+
+**Kanusho**:  
+Hati hii imetafsiriwa kwa kutumia huduma ya kutafsiri ya AI [Co-op Translator](https://github.com/Azure/co-op-translator). Ingawa tunajitahidi kuhakikisha usahihi, tafadhali fahamu kuwa tafsiri za kiotomatiki zinaweza kuwa na makosa au kutokuwa sahihi. Hati ya asili katika lugha yake ya awali inapaswa kuzingatiwa kama chanzo cha mamlaka. Kwa taarifa muhimu, tafsiri ya kitaalamu ya binadamu inapendekezwa. Hatutawajibika kwa kutoelewana au tafsiri zisizo sahihi zinazotokana na matumizi ya tafsiri hii.
\ No newline at end of file
diff --git a/translations/sw/CONTRIBUTING.md b/translations/sw/CONTRIBUTING.md
new file mode 100644
index 00000000..c3b05f46
--- /dev/null
+++ b/translations/sw/CONTRIBUTING.md
@@ -0,0 +1,28 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "777400e9f0336c7ee2f9a1200a88478f",
+  "translation_date": "2025-08-28T03:21:04+00:00",
+  "source_file": "CONTRIBUTING.md",
+  "language_code": "sw"
+}
+-->
+# Kuchangia
+
+Mradi huu unakaribisha michango na mapendekezo. Michango mingi inahitaji wewe
+kukubaliana na Mkataba wa Leseni ya Mchangiaji (CLA) unaoeleza kwamba una haki ya
+na kwa kweli unatoa, haki kwetu kutumia mchango wako. Kwa maelezo zaidi, tembelea
+[https://cla.microsoft.com](https://cla.microsoft.com/?WT.mc_id=academic-77807-sagibbon).
+
+Unapowasilisha ombi la kuvuta (pull request), CLA-bot itatambua kiotomatiki kama unahitaji
+kutoa CLA na itaweka alama kwenye PR ipasavyo (mfano, lebo, maoni). Fuata tu
+maelekezo yanayotolewa na bot. Utahitaji kufanya hivi mara moja tu kwenye hifadhi zote zinazotumia CLA yetu. Tafadhali jaribu pia kutueleza kwa nini ulifanya mabadiliko hayo ili tuweze kuelewa vyema ombi lako.
+
+Mradi huu umechukua [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/?WT.mc_id=academic-77807-sagibbon).
+Kwa maelezo zaidi, angalia [Maswali Yanayoulizwa Mara kwa Mara kuhusu Kanuni za Maadili](https://opensource.microsoft.com/codeofconduct/faq/?WT.mc_id=academic-77807-sagibbon)
+au wasiliana na [opencode@microsoft.com](mailto:opencode@microsoft.com) kwa maswali au maoni ya ziada.
+
+---
+
+**Kanusho**:  
+Hati hii imetafsiriwa kwa kutumia huduma ya kutafsiri ya AI [Co-op Translator](https://github.com/Azure/co-op-translator). Ingawa tunajitahidi kuhakikisha usahihi, tafadhali fahamu kuwa tafsiri za kiotomatiki zinaweza kuwa na makosa au kutokuwa sahihi. Hati ya asili katika lugha yake ya awali inapaswa kuzingatiwa kama chanzo cha mamlaka. Kwa taarifa muhimu, tafsiri ya kitaalamu ya binadamu inapendekezwa. Hatutawajibika kwa kutoelewana au tafsiri zisizo sahihi zinazotokana na matumizi ya tafsiri hii.
\ No newline at end of file
diff --git a/translations/sw/README.md b/translations/sw/README.md
new file mode 100644
index 00000000..9edf9b62
--- /dev/null
+++ b/translations/sw/README.md
@@ -0,0 +1,207 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "efa251c5fc089367f0a81c572874afca",
+  "translation_date": "2025-08-28T03:16:51+00:00",
+  "source_file": "README.md",
+  "language_code": "sw"
+}
+-->
+[![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)  
+
+[![Microsoft Azure AI Foundry Discord](https://dcbadge.limes.pink/api/server/ByRwuEEgH4)](https://discord.com/invite/ByRwuEEgH4)  
+
+Fuata hatua hizi kuanza kutumia rasilimali hizi:  
+1. **Fork Hifadhi**: Bonyeza [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)  
+2. **Clone Hifadhi**:   `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`  
+3. [**Jiunge na Azure AI Foundry Discord na kutana na wataalamu na watengenezaji wenzako**](https://discord.com/invite/ByRwuEEgH4)  
+
+# Maendeleo ya Wavuti kwa Kompyuta - Mtaala  
+
+Jifunze misingi ya maendeleo ya wavuti kupitia kozi yetu ya wiki 12 iliyoandaliwa na Microsoft Cloud Advocates. Kila somo kati ya masomo 24 linachunguza JavaScript, CSS, na HTML kupitia miradi ya vitendo kama terrariums, viendelezi vya kivinjari, na michezo ya anga. Shiriki katika maswali, mijadala, na kazi za vitendo. Boresha ujuzi wako na uimarisha maarifa yako kwa kutumia mbinu yetu ya kujifunza kwa miradi. Anza safari yako ya usimbaji leo!  
+
+#### 🧑‍🎓 _Je, wewe ni mwanafunzi?_  
+
+Tembelea [**Ukurasa wa Student Hub**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) ambapo utapata rasilimali za kompyuta, vifurushi vya wanafunzi, na hata njia za kupata vocha ya cheti bila malipo. Huu ni ukurasa wa kuweka alama na kuangalia mara kwa mara kwani tunabadilisha maudhui kila mwezi.  
+
+### 📣 Tangazo - _Mtaala Mpya_ wa Generative AI kwa JavaScript umetolewa  
+
+Usikose mtaala wetu mpya wa Generative AI!  
+
+Tembelea [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) kuanza!  
+
+![Background](../../translated_images/background.148a8d43afde57303419a663f50daf586681bc2fabf833f66ef6954073983c66.sw.png)  
+
+- Masomo yanayofunika kila kitu kutoka misingi hadi RAG.  
+- Jadiliana na wahusika wa kihistoria ukitumia GenAI na programu yetu ya usaidizi.  
+- Hadithi ya kufurahisha na ya kuvutia, utasafiri kupitia wakati!  
+
+![character](../../translated_images/character.5c0dd8e067ffd693c16e2c5b7412ab075a2215ce31f998305639fa3a05e14fbe.sw.png)  
+
+Kila somo linajumuisha kazi ya kukamilisha, ukaguzi wa maarifa, na changamoto ya kukuongoza kujifunza mada kama:  
+- Kuunda maelezo na uhandisi wa maelezo  
+- Uundaji wa programu za maandishi na picha  
+- Programu za utafutaji  
+
+Tembelea [https://aka.ms/genai-js-course](../../[https:/aka.ms/genai-js-course) kuanza!  
+
+## 🌱 Kuanza  
+
+> **Walimu**, tumetoa [mapendekezo kadhaa](for-teachers.md) ya jinsi ya kutumia mtaala huu. Tunapenda maoni yako [katika jukwaa letu la majadiliano](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!  
+
+**[Wanafunzi](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, kwa kila somo, anza na jaribio la awali la somo na endelea kwa kusoma nyenzo za somo, kukamilisha shughuli mbalimbali, na angalia uelewa wako kwa jaribio la baada ya somo.  
+
+Ili kuboresha uzoefu wako wa kujifunza, ungana na wenzako kufanya kazi kwenye miradi pamoja! Mijadala inahimizwa katika [jukwaa letu la majadiliano](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) ambapo timu yetu ya wasimamizi itapatikana kujibu maswali yako.  
+
+Ili kuendeleza elimu yako, tunapendekeza sana kuchunguza [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) kwa nyenzo za ziada za masomo.  
+
+### 📋 Kuweka mazingira yako  
+
+Mtaala huu una mazingira ya maendeleo tayari! Unapoanza, unaweza kuchagua kuendesha mtaala katika [Codespace](https://github.com/features/codespaces/) (_mazingira yanayotegemea kivinjari, hakuna haja ya kusakinisha_), au kwa ndani kwenye kompyuta yako ukitumia mhariri wa maandishi kama [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).  
+
+#### Unda hifadhi yako  
+Ili kuhifadhi kazi yako kwa urahisi, inashauriwa kwamba uunde nakala yako mwenyewe ya hifadhi hii. Unaweza kufanya hivyo kwa kubonyeza kitufe cha **Use this template** juu ya ukurasa. Hii itaunda hifadhi mpya katika akaunti yako ya GitHub yenye nakala ya mtaala.  
+
+Fuata hatua hizi:  
+1. **Fork Hifadhi**: Bonyeza kitufe cha "Fork" kwenye kona ya juu-kulia ya ukurasa huu.  
+2. **Clone Hifadhi**:   `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`  
+
+#### Kuendesha mtaala katika Codespace  
+
+Katika nakala yako ya hifadhi hii uliyounda, bonyeza kitufe cha **Code** na uchague **Open with Codespaces**. Hii itaunda Codespace mpya kwako kufanya kazi ndani yake.  
+
+[!Codespace](../..)./images/createcodespace.png)  
+
+#### Kuendesha mtaala kwa ndani kwenye kompyuta yako  
+
+Ili kuendesha mtaala huu kwa ndani kwenye kompyuta yako, utahitaji mhariri wa maandishi, kivinjari, na zana ya mstari wa amri. Somo letu la kwanza, [Utangulizi wa Lugha za Programu na Zana za Kazi](../../1-getting-started-lessons/1-intro-to-programming-languages), litakutembeza kupitia chaguo mbalimbali kwa kila moja ya zana hizi ili uchague kinachokufaa zaidi.  
+
+Pendekezo letu ni kutumia [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) kama mhariri wako, ambao pia una [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) iliyojengwa ndani. Unaweza kupakua Visual Studio Code [hapa](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).  
+
+1. Clone hifadhi yako kwenye kompyuta yako. Unaweza kufanya hivyo kwa kubonyeza kitufe cha **Code** na kunakili URL:  
+
+    [!CodeSpace](./images/createcodespace.png)  
+
+    Kisha, fungua [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) ndani ya [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) na endesha amri ifuatayo, ukibadilisha `<your-repository-url>` na URL uliyokopi:  
+
+    ```bash 
+    git clone <your-repository-url>
+    ```  
+
+2. Fungua folda katika Visual Studio Code. Unaweza kufanya hivyo kwa kubonyeza **File** > **Open Folder** na kuchagua folda uliyoclone.  
+
+>  Mapendekezo ya viendelezi vya Visual Studio Code:  
+>  
+> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - kuonyesha kurasa za HTML ndani ya Visual Studio Code  
+> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - kusaidia kuandika msimbo haraka  
+
+## 📂 Kila somo linajumuisha:  
+
+- sketchnote ya hiari  
+- video ya ziada ya hiari  
+- jaribio la kujiandaa kabla ya somo  
+- somo lililoandikwa  
+- kwa masomo yanayotegemea miradi, mwongozo wa hatua kwa hatua wa jinsi ya kujenga mradi  
+- ukaguzi wa maarifa  
+- changamoto  
+- usomaji wa ziada  
+- kazi  
+- [jaribio la baada ya somo](https://ff-quizzes.netlify.app/)  
+
+> **Kuhusu maswali**: Maswali yote yamejumuishwa katika folda ya Quiz-app, maswali 48 ya jumla yenye maswali matatu kila moja. Yanapatikana [hapa](https://ff-quizzes.netlify.app/) programu ya maswali inaweza kuendeshwa kwa ndani au kupelekwa Azure; fuata maelekezo katika folda ya `quiz-app`.  
+
+## 🗃️ Masomo  
+
+|     |                       Jina la Mradi                       |                            Dhana Zinazofundishwa                             | Malengo ya Kujifunza                                                                                                                 |                                                         Somo Lililounganishwa                                                          |         Mwandishi          |  
+| :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |  
+| 01  |                     Kuanza                      |           Utangulizi wa Lugha za Programu na Zana za Kazi           | Jifunze misingi ya lugha nyingi za programu na kuhusu programu zinazosaidia watengenezaji wa kitaalamu kufanya kazi zao | [Utangulizi wa Lugha za Programu na Zana za Kazi](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) |         Jasmine         |  
+| 02  |                     Kuanza                      |             Misingi ya GitHub, ikijumuisha kufanya kazi na timu             | Jinsi ya kutumia GitHub katika mradi wako, jinsi ya kushirikiana na wengine kwenye msingi wa msimbo                                                    |                            [Utangulizi wa GitHub](./1-getting-started-lessons/2-github-basics/README.md)                             |          Floor          |  
+| 03  |                     Kuanza                      |                             Ufikiaji                              | Jifunze misingi ya ufikiaji wa wavuti                                                                                               |                       [Misingi ya Ufikiaji](./1-getting-started-lessons/3-accessibility/README.md)                       |       Christopher       |  
+| 04  |                        Misingi ya JS                         |                         Aina za Takwimu za JavaScript                          | Misingi ya aina za takwimu za JavaScript                                                                                                 |                                       [Aina za Takwimu](./2-js-basics/1-data-types/README.md)                                        |         Jasmine         |  
+| 05  |                        Misingi ya JS                         |                         Kazi na Mbinu                          | Jifunze kuhusu kazi na mbinu za kudhibiti mtiririko wa mantiki wa programu                                                             |                              [Kazi na Mbinu](./2-js-basics/2-functions-methods/README.md)                               | Jasmine na Christopher |  
+| 06  |                        Misingi ya JS                         |                        Kufanya Maamuzi na JS                        | Jifunze jinsi ya kuunda hali katika msimbo wako kwa kutumia mbinu za kufanya maamuzi                                                           |                                 [Kufanya Maamuzi](./2-js-basics/3-making-decisions/README.md)                                  |         Jasmine         |  
+| 07  |                        Misingi ya JS                         |                            Arrays na Loops                            | Fanya kazi na takwimu kwa kutumia arrays na loops katika JavaScript                                                                                 |                                   [Arrays na Loops](./2-js-basics/4-arrays-loops/README.md)                                    |         Jasmine         |  
+| 08  |       [Terrarium](./3-terrarium/solution/README.md)       |                            HTML kwa Vitendo                            | Jenga HTML kuunda terrarium mtandaoni, ukizingatia kujenga mpangilio                                                         |                                 [Utangulizi wa HTML](./3-terrarium/1-intro-to-html/README.md)                                 |           Jen           |  
+| 09  |       [Terrarium](./3-terrarium/solution/README.md)       |                            CSS kwa Vitendo                             | Jenga CSS kuunda mtindo wa terrarium mtandaoni, ukizingatia misingi ya CSS ikijumuisha kufanya ukurasa uwe msikivu                     |                                  [Utangulizi wa CSS](./3-terrarium/2-intro-to-css/README.md)                                  |           Jen           |  
+| 10  |            [Terrarium](./3-terrarium/solution/README.md)            |                 JavaScript Closures, DOM manipulation                  | Jenga JavaScript ili kufanya terrarium ifanye kazi kama kiolesura cha buruta/dondosha, ukizingatia closures na udhibiti wa DOM      |                  [JavaScript Closures, DOM manipulation](./3-terrarium/3-intro-to-DOM-and-closures/README.md)                   |           Jen           |
+| 11  |          [Typing Game](./4-typing-game/solution/README.md)          |                          Jenga Mchezo wa Kuandika                      | Jifunze jinsi ya kutumia matukio ya kibodi kuendesha mantiki ya programu yako ya JavaScript                                         |                                [Event-Driven Programming](./4-typing-game/typing-game/README.md)                                |       Christopher       |
+| 12  | [Green Browser Extension](./5-browser-extension/solution/README.md) |                         Kufanya Kazi na Vivinjari                      | Jifunze jinsi vivinjari vinavyofanya kazi, historia yake, na jinsi ya kuunda vipengele vya kwanza vya kiendelezi cha kivinjari      |                               [About Browsers](./5-browser-extension/1-about-browsers/README.md)                                |           Jen           |
+| 13  | [Green Browser Extension](./5-browser-extension/solution/README.md) | Kujenga fomu, kuita API na kuhifadhi vigezo katika hifadhi ya ndani     | Jenga vipengele vya JavaScript vya kiendelezi chako cha kivinjari ili kuita API kwa kutumia vigezo vilivyohifadhiwa ndani           |                [APIs, Forms, and Local Storage](./5-browser-extension/2-forms-browsers-local-storage/README.md)                 |           Jen           |
+| 14  | [Green Browser Extension](./5-browser-extension/solution/README.md) |          Michakato ya nyuma kwenye kivinjari, utendaji wa wavuti        | Tumia michakato ya nyuma ya kivinjari kudhibiti ikoni ya kiendelezi; jifunze kuhusu utendaji wa wavuti na baadhi ya mbinu za uboreshaji |             [Background Tasks and Performance](./5-browser-extension/3-background-tasks-and-performance/README.md)              |           Jen           |
+| 15  |           [Space Game](./6-space-game/solution/README.md)           |             Maendeleo ya Mchezo wa Juu Zaidi na JavaScript             | Jifunze kuhusu Urithi kwa kutumia Madarasa na Muundo na muundo wa Pub/Sub, kama maandalizi ya kujenga mchezo                       |                      [Introduction to Advanced Game Development](./6-space-game/1-introduction/README.md)                       |          Chris          |
+| 16  |           [Space Game](./6-space-game/solution/README.md)           |                           Kuchora kwenye canvas                        | Jifunze kuhusu Canvas API, inayotumika kuchora vipengele kwenye skrini                                                               |                                [Drawing to Canvas](./6-space-game/2-drawing-to-canvas/README.md)                                |          Chris          |
+| 17  |           [Space Game](./6-space-game/solution/README.md)           |                   Kusogeza vipengele kwenye skrini                     | Gundua jinsi vipengele vinavyoweza kupata mwendo kwa kutumia kuratibu za cartesian na Canvas API                                    |                           [Moving Elements Around](./6-space-game/3-moving-elements-around/README.md)                           |          Chris          |
+| 18  |           [Space Game](./6-space-game/solution/README.md)           |                          Kugundua migongano                            | Fanya vipengele vigongane na kuathiriana kwa kutumia vibonyezo na toa kazi ya kupoa ili kuhakikisha utendaji wa mchezo              |                              [Collision Detection](./6-space-game/4-collision-detection/README.md)                              |          Chris          |
+| 19  |           [Space Game](./6-space-game/solution/README.md)           |                             Kuhesabu alama                              | Fanya mahesabu ya kihisabati kulingana na hali ya mchezo na utendaji                                                                |                                    [Keeping Score](./6-space-game/5-keeping-score/README.md)                                    |          Chris          |
+| 20  |           [Space Game](./6-space-game/solution/README.md)           |                     Kumaliza na kuanzisha upya mchezo                  | Jifunze kuhusu kumaliza na kuanzisha upya mchezo, ikiwa ni pamoja na kusafisha mali na kuweka upya thamani za vigezo                |                                [The Ending Condition](./6-space-game/6-end-condition/README.md)                                 |          Chris          |
+| 21  |         [Banking App](./7-bank-project/solution/README.md)          |                 Violezo vya HTML na Njia katika Programu ya Wavuti     | Jifunze jinsi ya kuunda muundo wa usanifu wa tovuti yenye kurasa nyingi kwa kutumia njia na violezo vya HTML                        |                            [HTML Templates and Routes](./7-bank-project/1-template-route/README.md)                             |          Yohan          |
+| 22  |         [Banking App](./7-bank-project/solution/README.md)          |                  Jenga Fomu ya Kuingia na Usajili                      | Jifunze kuhusu kujenga fomu na kushughulikia taratibu za uthibitishaji                                                              |                                           [Forms](./7-bank-project/2-forms/README.md)                                           |          Yohan          |
+| 23  |         [Banking App](./7-bank-project/solution/README.md)          |                   Njia za Kupata na Kutumia Data                       | Jinsi data inavyotiririka ndani na nje ya programu yako, jinsi ya kuipata, kuihifadhi, na kuitupa                                  |                                            [Data](./7-bank-project/3-data/README.md)                                            |          Yohan          |
+| 24  |         [Banking App](./7-bank-project/solution/README.md)          |                      Dhana za Usimamizi wa Hali                        | Jifunze jinsi programu yako inavyohifadhi hali na jinsi ya kuisimamia kwa njia ya programu                                          |                                [State Management](./7-bank-project/4-state-management/README.md)                                |          Yohan          |
+
+
+## 🏫 Pedagojia
+
+Mtaala wetu umeundwa kwa kuzingatia kanuni mbili kuu za pedagogia:
+* kujifunza kwa miradi
+* maswali ya mara kwa mara
+
+Programu hii inafundisha misingi ya JavaScript, HTML, na CSS, pamoja na zana na mbinu za kisasa zinazotumiwa na watengenezaji wa wavuti wa leo. Wanafunzi watapata fursa ya kupata uzoefu wa vitendo kwa kujenga mchezo wa kuandika, terrarium ya mtandaoni, kiendelezi cha kivinjari kinachojali mazingira, mchezo wa mtindo wa space-invader, na programu ya benki kwa biashara. Mwisho wa mfululizo, wanafunzi watakuwa wamepata uelewa thabiti wa maendeleo ya wavuti.
+
+> 🎓 Unaweza kuchukua masomo machache ya kwanza ya mtaala huu kama [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) kwenye Microsoft Learn!
+
+Kwa kuhakikisha kuwa maudhui yanalingana na miradi, mchakato unakuwa wa kuvutia zaidi kwa wanafunzi na uhifadhi wa dhana utaongezeka. Pia tuliandika masomo kadhaa ya kuanzia katika misingi ya JavaScript ili kuanzisha dhana, pamoja na video kutoka "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" mkusanyiko wa mafunzo ya video, baadhi ya waandishi wake walichangia mtaala huu.
+
+Aidha, jaribio la hatari ndogo kabla ya darasa huweka nia ya mwanafunzi kuelekea kujifunza mada, wakati jaribio la pili baada ya darasa huhakikisha uhifadhi zaidi. Mtaala huu uliundwa kuwa rahisi na wa kufurahisha na unaweza kuchukuliwa kwa ukamilifu au sehemu. Miradi huanza ndogo na kuwa ngumu zaidi mwishoni mwa mzunguko wa wiki 12.
+
+Ingawa tumekusudia kuepuka kuanzisha mifumo ya JavaScript ili kuzingatia ujuzi wa msingi unaohitajika kama mtengenezaji wa wavuti kabla ya kupitisha mfumo, hatua nzuri inayofuata baada ya kukamilisha mtaala huu itakuwa kujifunza kuhusu Node.js kupitia mkusanyiko mwingine wa video: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
+
+> Tembelea [Kanuni za Maadili](CODE_OF_CONDUCT.md) na miongozo ya [Kuchangia](CONTRIBUTING.md). Tunakaribisha maoni yako ya kujenga!
+
+## 🧭 Ufikiaji wa Nje ya Mtandao
+
+Unaweza kuendesha nyaraka hizi nje ya mtandao kwa kutumia [Docsify](https://docsify.js.org/#/). Fork repo hii, [sakinisha Docsify](https://docsify.js.org/#/quickstart) kwenye mashine yako ya ndani, kisha kwenye folda ya mizizi ya repo hii, andika `docsify serve`. Tovuti itahudumiwa kwenye bandari 3000 kwenye localhost yako: `localhost:3000`.
+
+## 📘 PDF
+
+PDF ya masomo yote inaweza kupatikana [hapa](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
+
+## 🎒 Kozi Nyingine
+
+Timu yetu inazalisha kozi nyingine! Angalia:
+
+- [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)
+
+## Leseni
+
+Repo hii imesajiliwa chini ya leseni ya MIT. Tazama faili ya [LICENSE](../../LICENSE) kwa maelezo zaidi.
+
+---
+
+**Kanusho**:  
+Hati hii imetafsiriwa kwa kutumia huduma ya tafsiri ya AI [Co-op Translator](https://github.com/Azure/co-op-translator). Ingawa tunajitahidi kuhakikisha usahihi, tafadhali fahamu kuwa tafsiri za kiotomatiki zinaweza kuwa na makosa au kutokuwa sahihi. Hati ya asili katika lugha yake ya awali inapaswa kuzingatiwa kama chanzo cha mamlaka. Kwa taarifa muhimu, tafsiri ya kitaalamu ya binadamu inapendekezwa. Hatutawajibika kwa kutoelewana au tafsiri zisizo sahihi zinazotokana na matumizi ya tafsiri hii.
\ No newline at end of file
diff --git a/translations/sw/SECURITY.md b/translations/sw/SECURITY.md
new file mode 100644
index 00000000..556077f1
--- /dev/null
+++ b/translations/sw/SECURITY.md
@@ -0,0 +1,51 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "4ecc3bf2e27983d4c780be6f26ee6228",
+  "translation_date": "2025-08-28T03:21:28+00:00",
+  "source_file": "SECURITY.md",
+  "language_code": "sw"
+}
+-->
+## Usalama
+
+Microsoft inachukulia usalama wa bidhaa na huduma zetu za programu kwa uzito, ikijumuisha hazina zote za msimbo wa chanzo zinazodhibitiwa kupitia mashirika yetu ya GitHub, ambayo ni pamoja na [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), na [mashirika yetu ya GitHub](https://opensource.microsoft.com/?WT.mc_id=academic-77807-sagibbon).
+
+Ikiwa unaamini umebaini udhaifu wa kiusalama katika hazina yoyote inayomilikiwa na Microsoft inayokidhi [ufafanuzi wa Microsoft wa udhaifu wa kiusalama](https://docs.microsoft.com/previous-versions/tn-archive/cc751383(v=technet.10)/?WT.mc_id=academic-77807-sagibbon), tafadhali ripoti kwetu kama ilivyoelezwa hapa chini.
+
+## Kuripoti Masuala ya Usalama
+
+**Tafadhali usiripoti udhaifu wa kiusalama kupitia masuala ya umma ya GitHub.**
+
+Badala yake, tafadhali ripoti kwa Kituo cha Majibu ya Usalama cha Microsoft (MSRC) kupitia [https://msrc.microsoft.com/create-report](https://msrc.microsoft.com/create-report/?WT.mc_id=academic-77807-sagibbon).
+
+Ikiwa unapendelea kuwasilisha bila kuingia, tuma barua pepe kwa [secure@microsoft.com](mailto:secure@microsoft.com). Ikiwezekana, enkripti ujumbe wako kwa kutumia ufunguo wetu wa PGP; tafadhali pakua kutoka kwa [Ukurasa wa Ufunguo wa PGP wa Kituo cha Majibu ya Usalama cha Microsoft](https://www.microsoft.com/msrc/pgp-key-msrc/?WT.mc_id=academic-77807-sagibbon).
+
+Unapaswa kupokea majibu ndani ya saa 24. Ikiwa kwa sababu fulani hutapokea, tafadhali fuatilia kupitia barua pepe ili kuhakikisha tumepokea ujumbe wako wa awali. Maelezo ya ziada yanapatikana kwenye [microsoft.com/msrc](https://www.microsoft.com/msrc/?WT.mc_id=academic-77807-sagibbon).
+
+Tafadhali jumuisha maelezo yaliyoombwa hapa chini (kadri unavyoweza kutoa) ili kutusaidia kuelewa vyema asili na upeo wa tatizo linalowezekana:
+
+  * Aina ya tatizo (mfano, kufurika kwa buffer, sindano ya SQL, maandishi ya tovuti ya msalaba, n.k.)
+  * Njia kamili za faili za chanzo zinazohusiana na udhihirisho wa tatizo
+  * Eneo la msimbo wa chanzo ulioathiriwa (tagi/tawi/ahadi au URL ya moja kwa moja)
+  * Mipangilio yoyote maalum inayohitajika ili kuzalisha tatizo
+  * Maelekezo ya hatua kwa hatua ya kuzalisha tatizo
+  * Uthibitisho wa dhana au msimbo wa shambulio (ikiwezekana)
+  * Athari ya tatizo, ikijumuisha jinsi mshambulizi anaweza kutumia tatizo hilo
+
+Maelezo haya yatatusaidia kushughulikia ripoti yako haraka zaidi.
+
+Ikiwa unaripoti kwa ajili ya zawadi ya hitilafu, ripoti kamili zaidi zinaweza kuchangia tuzo ya juu zaidi. Tafadhali tembelea ukurasa wetu wa [Mpango wa Zawadi ya Hitilafu wa Microsoft](https://microsoft.com/msrc/bounty/?WT.mc_id=academic-77807-sagibbon) kwa maelezo zaidi kuhusu programu zetu zinazotumika.
+
+## Lugha Zinazopendelewa
+
+Tunapendelea mawasiliano yote yawe kwa Kiingereza.
+
+## Sera
+
+Microsoft inafuata kanuni ya [Ufunuo wa Udhaifu Ulio Ratibiwa](https://www.microsoft.com/msrc/cvd/?WT.mc_id=academic-77807-sagibbon).
+
+---
+
+**Kanusho**:  
+Hati hii imetafsiriwa kwa kutumia huduma ya tafsiri ya AI [Co-op Translator](https://github.com/Azure/co-op-translator). Ingawa tunajitahidi kuhakikisha usahihi, tafsiri za kiotomatiki zinaweza kuwa na makosa au kutokuwa sahihi. Hati ya asili katika lugha yake ya awali inapaswa kuchukuliwa kama chanzo cha mamlaka. Kwa taarifa muhimu, tafsiri ya kitaalamu ya binadamu inapendekezwa. Hatutawajibika kwa kutoelewana au tafsiri zisizo sahihi zinazotokana na matumizi ya tafsiri hii.
\ No newline at end of file
diff --git a/translations/sw/SUPPORT.md b/translations/sw/SUPPORT.md
new file mode 100644
index 00000000..c318c9eb
--- /dev/null
+++ b/translations/sw/SUPPORT.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "c9d207ff77b4bb46e46dc2b607a8ec1a",
+  "translation_date": "2025-08-28T03:20:31+00:00",
+  "source_file": "SUPPORT.md",
+  "language_code": "sw"
+}
+-->
+# Msaada
+
+## Jinsi ya kuripoti matatizo na kupata msaada  
+
+Mradi huu unatumia GitHub Issues kufuatilia hitilafu na maombi ya vipengele vipya. Tafadhali tafuta matatizo yaliyopo kabla ya kuripoti matatizo mapya ili kuepuka marudio. Kwa matatizo mapya, ripoti hitilafu yako au ombi la kipengele kama Issue mpya.
+
+Kwa msaada na maswali kuhusu jinsi ya kutumia mradi huu, tafadhali rejelea [miongozo yetu ya kuchangia](CONTRIBUTING.md).
+
+## Sera ya Msaada ya Microsoft  
+
+Msaada kwa mradi huu umepunguzwa kwa rasilimali zilizoorodheshwa hapo juu.
+
+---
+
+**Kanusho**:  
+Hati hii imetafsiriwa kwa kutumia huduma ya tafsiri ya AI [Co-op Translator](https://github.com/Azure/co-op-translator). Ingawa tunajitahidi kuhakikisha usahihi, tafsiri za kiotomatiki zinaweza kuwa na makosa au kutokuwa sahihi. Hati ya asili katika lugha yake ya awali inapaswa kuchukuliwa kama chanzo cha mamlaka. Kwa taarifa muhimu, tafsiri ya kitaalamu ya binadamu inapendekezwa. Hatutawajibika kwa kutoelewana au tafsiri zisizo sahihi zinazotokana na matumizi ya tafsiri hii.
\ No newline at end of file
diff --git a/translations/sw/_404.md b/translations/sw/_404.md
new file mode 100644
index 00000000..01513a2b
--- /dev/null
+++ b/translations/sw/_404.md
@@ -0,0 +1,21 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "ea9f0804bd62f46d9808e953ec7fc459",
+  "translation_date": "2025-08-28T03:20:49+00:00",
+  "source_file": "_404.md",
+  "language_code": "sw"
+}
+-->
+# Kazi inaendelea
+
+Tunaendelea kufanya kazi kwenye ukurasa huu. Tafadhali rudi baadaye.
+
+Fungua [issue](https://github.com/microsoft/Web-Dev-For-Beginners/issues/new/choose) ikiwa una maswali yoyote.
+
+**[Rudi nyumbani](../../../../../../..)**
+
+---
+
+**Kanusho**:  
+Hati hii imetafsiriwa kwa kutumia huduma ya tafsiri ya AI [Co-op Translator](https://github.com/Azure/co-op-translator). Ingawa tunajitahidi kuhakikisha usahihi, tafsiri za kiotomatiki zinaweza kuwa na makosa au kutokuwa sahihi. Hati ya asili katika lugha yake ya awali inapaswa kuchukuliwa kama chanzo cha mamlaka. Kwa taarifa muhimu, tafsiri ya kitaalamu ya binadamu inapendekezwa. Hatutawajibika kwa kutoelewana au tafsiri zisizo sahihi zinazotokana na matumizi ya tafsiri hii.
\ No newline at end of file
diff --git a/translations/sw/docs/_navbar.md b/translations/sw/docs/_navbar.md
new file mode 100644
index 00000000..d63ad2a4
--- /dev/null
+++ b/translations/sw/docs/_navbar.md
@@ -0,0 +1,34 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "3bd2f51ecf4ac9b39277cba748943793",
+  "translation_date": "2025-08-28T04:11:49+00:00",
+  "source_file": "docs/_navbar.md",
+  "language_code": "sw"
+}
+-->
+- Tafsiri
+  - [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)
+
+---
+
+**Kanusho**:  
+Hati hii imetafsiriwa kwa kutumia huduma ya kutafsiri ya AI [Co-op Translator](https://github.com/Azure/co-op-translator). Ingawa tunajitahidi kuhakikisha usahihi, tafadhali fahamu kuwa tafsiri za kiotomatiki zinaweza kuwa na makosa au kutokuwa sahihi. Hati ya asili katika lugha yake ya awali inapaswa kuzingatiwa kama chanzo cha mamlaka. Kwa taarifa muhimu, tafsiri ya kitaalamu ya binadamu inapendekezwa. Hatutawajibika kwa kutoelewana au tafsiri zisizo sahihi zinazotokana na matumizi ya tafsiri hii.
\ No newline at end of file
diff --git a/translations/sw/docs/_sidebar.md b/translations/sw/docs/_sidebar.md
new file mode 100644
index 00000000..4dbf9923
--- /dev/null
+++ b/translations/sw/docs/_sidebar.md
@@ -0,0 +1,51 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "655c91b5979de46f1d70d97f0c5f1d14",
+  "translation_date": "2025-08-28T04:11:17+00:00",
+  "source_file": "docs/_sidebar.md",
+  "language_code": "sw"
+}
+-->
+- Utangulizi  
+  - [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)  
+
+- Msingi wa 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)  
+
+- Mchezo wa Kuandika  
+  - [11](../4-typing-game/typing-game/README.md)  
+
+- Kiendelezi cha Kivinjari  
+  - [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)  
+
+- Mchezo wa Anga  
+  - [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)  
+
+- Mradi wa Benki  
+  - [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)  
+
+---
+
+**Kanusho**:  
+Hati hii imetafsiriwa kwa kutumia huduma ya kutafsiri ya AI [Co-op Translator](https://github.com/Azure/co-op-translator). Ingawa tunajitahidi kuhakikisha usahihi, tafadhali fahamu kuwa tafsiri za kiotomatiki zinaweza kuwa na makosa au kutokuwa sahihi. Hati ya asili katika lugha yake ya awali inapaswa kuzingatiwa kama chanzo cha mamlaka. Kwa taarifa muhimu, tafsiri ya kitaalamu ya binadamu inapendekezwa. Hatutawajibika kwa kutoelewana au tafsiri zisizo sahihi zinazotokana na matumizi ya tafsiri hii.
\ No newline at end of file
diff --git a/translations/sw/for-teachers.md b/translations/sw/for-teachers.md
new file mode 100644
index 00000000..3168ef69
--- /dev/null
+++ b/translations/sw/for-teachers.md
@@ -0,0 +1,47 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "75cb51f7ca9ea0b097ef4a1287e9290c",
+  "translation_date": "2025-08-28T03:22:14+00:00",
+  "source_file": "for-teachers.md",
+  "language_code": "sw"
+}
+-->
+## Kwa Walimu
+
+Je, ungependa kutumia mtaala huu darasani kwako? Tafadhali jisikie huru kufanya hivyo!
+
+Kwa kweli, unaweza kuutumia moja kwa moja ndani ya GitHub kwa kutumia GitHub Classroom.
+
+Ili kufanya hivyo, fanya fork ya repo hii. Utahitaji kuunda repo kwa kila somo, kwa hivyo utahitaji kutoa kila folda na kuiweka kwenye repo tofauti. Kwa njia hiyo, [GitHub Classroom](https://classroom.github.com/classrooms) itaweza kuchukua kila somo moja moja.
+
+Maelezo haya [kamili](https://github.blog/2020-03-18-set-up-your-digital-classroom-with-github-classroom/) yatakupa mwongozo wa jinsi ya kuandaa darasa lako.
+
+## Kutumia katika Moodle, Canvas au Blackboard
+
+Mtaala huu unafanya kazi vizuri katika mifumo hii ya Usimamizi wa Kujifunza! Tumia [faili ya kupakia Moodle](../../../../../../../teaching-files/webdev-moodle.mbz) kwa maudhui kamili, au jaribu [faili ya Common Cartridge](../../../../../../../teaching-files/webdev-common-cartridge.imscc) ambayo ina baadhi ya maudhui. Moodle Cloud haiungi mkono usafirishaji kamili wa Common Cartridge, kwa hivyo ni bora kutumia faili ya kupakua ya Moodle ambayo inaweza kupakiwa kwenye Canvas. Tafadhali tujulishe jinsi tunavyoweza kuboresha uzoefu huu.
+
+![Moodle](../../translated_images/moodle.94eb93d714a50cb2c97435b408017dee224348b61bc86203ffd43a4f4e57b95f.sw.png)  
+> Mtaala katika darasa la Moodle
+
+![Canvas](../../translated_images/canvas.fbd605ff8e5b8aff567d398528ce113db304446b90b9cad55c654de3fdfcda34.sw.png)  
+> Mtaala katika Canvas
+
+## Kutumia repo kama ilivyo
+
+Ikiwa ungependa kutumia repo hii kama ilivyo sasa, bila kutumia GitHub Classroom, hilo linawezekana pia. Utahitaji kuwajulisha wanafunzi wako somo gani la kufanyia kazi pamoja.
+
+Katika muundo wa mtandaoni (Zoom, Teams, au nyinginezo) unaweza kuunda vyumba vya vikundi kwa ajili ya majaribio, na kuwaelekeza wanafunzi ili kuwasaidia kujiandaa kujifunza. Kisha waalike wanafunzi kwenye majaribio na wawasilishe majibu yao kama 'issues' kwa wakati fulani. Unaweza kufanya vivyo hivyo na kazi za nyumbani ikiwa unataka wanafunzi wafanye kazi kwa kushirikiana waziwazi.
+
+Ikiwa unapendelea muundo wa faragha zaidi, waombe wanafunzi wako wafanye fork ya mtaala, somo kwa somo, kwenye repo zao za GitHub kama repo za faragha, na wakupe ufikiaji. Kisha wanaweza kukamilisha majaribio na kazi za nyumbani kwa faragha na kukuwasilishia kupitia issues kwenye repo yako ya darasa.
+
+Kuna njia nyingi za kufanya hili lifanye kazi katika muundo wa darasa la mtandaoni. Tafadhali tujulishe ni njia gani inakufaa zaidi!
+
+## Tafadhali tupe maoni yako!
+
+Tunataka kufanya mtaala huu ufanye kazi kwa ajili yako na wanafunzi wako. Ungana nasi katika [Teacher corner](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner) na fungua [**issue mpya**](https://github.com/microsoft/Web-Dev-For-Beginners/issues/new/choose) kwa maombi yoyote, hitilafu na maoni.
+
+---
+
+**Kanusho**:  
+Hati hii imetafsiriwa kwa kutumia huduma ya kutafsiri ya AI [Co-op Translator](https://github.com/Azure/co-op-translator). Ingawa tunajitahidi kuhakikisha usahihi, tafadhali fahamu kuwa tafsiri za kiotomatiki zinaweza kuwa na makosa au kutokuwa sahihi. Hati asilia katika lugha yake ya awali inapaswa kuzingatiwa kama chanzo cha mamlaka. Kwa taarifa muhimu, tafsiri ya kitaalamu ya binadamu inapendekezwa. Hatutawajibika kwa kutoelewana au tafsiri zisizo sahihi zinazotokana na matumizi ya tafsiri hii.
\ No newline at end of file
diff --git a/translations/sw/lesson-template/README.md b/translations/sw/lesson-template/README.md
new file mode 100644
index 00000000..65b41204
--- /dev/null
+++ b/translations/sw/lesson-template/README.md
@@ -0,0 +1,65 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "0494be70ad7fadd13a8c3d549c23e355",
+  "translation_date": "2025-08-28T04:12:10+00:00",
+  "source_file": "lesson-template/README.md",
+  "language_code": "sw"
+}
+-->
+# [Mada ya Somo]
+
+![Weka video hapa](../../../lesson-template/video-url)
+
+## [Jaribio la kabla ya somo](../../../lesson-template/quiz-url)
+
+[Eleza kile tutakachojifunza]
+
+### Utangulizi
+
+Eleza kile kitakachojadiliwa
+
+> Vidokezo
+
+### Mahitaji ya awali
+
+Ni hatua zipi zinapaswa kuwa zimekamilika kabla ya somo hili?
+
+### Maandalizi
+
+Hatua za maandalizi kuanza somo hili
+
+---
+
+[Pitisha maudhui kwa hatua]
+
+## [Mada 1]
+
+### Kazi:
+
+Fanyeni kazi pamoja kuboresha msimbo wenu hatua kwa hatua ili kujenga mradi kwa kutumia msimbo wa pamoja:
+
+```html
+code blocks
+```
+
+✅ Ukaguzi wa Maarifa - tumia muda huu kupanua uelewa wa wanafunzi kwa maswali ya wazi
+
+## [Mada 2]
+
+## [Mada 3]
+
+🚀 Changamoto: Ongeza changamoto kwa wanafunzi kufanya kazi kwa pamoja darasani ili kuboresha mradi
+
+Hiari: ongeza picha ya skrini ya UI ya somo lililokamilika ikiwa inafaa
+
+## [Jaribio la baada ya somo](../../../lesson-template/quiz-url)
+
+## Mapitio na Kujisomea
+
+**Kazi Inayopaswa Kukamilika [MM/YY]**: [Jina la Kazi](assignment.md)
+
+---
+
+**Kanusho**:  
+Hati hii imetafsiriwa kwa kutumia huduma ya tafsiri ya AI [Co-op Translator](https://github.com/Azure/co-op-translator). Ingawa tunajitahidi kuhakikisha usahihi, tafsiri za kiotomatiki zinaweza kuwa na makosa au kutokuwa sahihi. Hati ya asili katika lugha yake ya awali inapaswa kuzingatiwa kama chanzo cha mamlaka. Kwa taarifa muhimu, tafsiri ya kitaalamu ya binadamu inapendekezwa. Hatutawajibika kwa kutoelewana au tafsiri zisizo sahihi zinazotokana na matumizi ya tafsiri hii.
\ No newline at end of file
diff --git a/translations/sw/lesson-template/assignment.md b/translations/sw/lesson-template/assignment.md
new file mode 100644
index 00000000..79b553c2
--- /dev/null
+++ b/translations/sw/lesson-template/assignment.md
@@ -0,0 +1,23 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "b5f62ec256c7e43e771f0d3b4e1a9130",
+  "translation_date": "2025-08-28T04:12:35+00:00",
+  "source_file": "lesson-template/assignment.md",
+  "language_code": "sw"
+}
+-->
+# [Jina la Kazi]
+
+## Maelekezo
+
+## Rubric
+
+| Vigezo | Bora Zaidi | Inayotosheleza | Inayohitaji Uboreshaji |
+| ------- | ---------- | ------------- | ---------------------- |
+|         |            |               |                        |
+
+---
+
+**Kanusho**:  
+Hati hii imetafsiriwa kwa kutumia huduma ya tafsiri ya AI [Co-op Translator](https://github.com/Azure/co-op-translator). Ingawa tunajitahidi kuhakikisha usahihi, tafsiri za kiotomatiki zinaweza kuwa na makosa au kutokuwa sahihi. Hati ya asili katika lugha yake ya awali inapaswa kuchukuliwa kama chanzo cha mamlaka. Kwa taarifa muhimu, tafsiri ya kitaalamu ya binadamu inapendekezwa. Hatutawajibika kwa kutoelewana au tafsiri zisizo sahihi zinazotokana na matumizi ya tafsiri hii.
\ No newline at end of file
diff --git a/translations/sw/quiz-app/README.md b/translations/sw/quiz-app/README.md
new file mode 100644
index 00000000..00de76db
--- /dev/null
+++ b/translations/sw/quiz-app/README.md
@@ -0,0 +1,191 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "5301875c55bb305e6046bed3a4fd06d2",
+  "translation_date": "2025-08-28T04:21:18+00:00",
+  "source_file": "quiz-app/README.md",
+  "language_code": "sw"
+}
+-->
+# Programu ya Maswali ya Quiz
+
+Maswali haya ni ya kabla na baada ya mihadhara katika mtaala wa sayansi ya data kwenye https://aka.ms/webdev-beginners
+
+## Kuongeza seti ya maswali yaliyotafsiriwa
+
+Ongeza tafsiri ya maswali kwa kuunda miundo inayolingana ya maswali katika folda za `assets/translations`. Maswali ya msingi yapo kwenye `assets/translations/en`. Maswali yamegawanywa katika makundi kadhaa. Hakikisha unalinganisha namba na sehemu sahihi ya maswali. Kuna jumla ya maswali 40 katika mtaala huu, na hesabu inaanza kutoka 0.
+
+  
+<details>
+<summary>Hivi ndivyo faili ya tafsiri inavyopaswa kuwa:</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>
+
+Baada ya kuhariri tafsiri, hariri faili ya index.js katika folda ya tafsiri ili kuingiza faili zote kufuatia kanuni za `en`.
+
+Hariri faili ya `index.js` katika `assets/translations` ili kuingiza faili mpya zilizotafsiriwa. 
+
+Kwa mfano, ikiwa tafsiri yako ya JSON ipo kwenye `ex.json`, tumia 'ex' kama ufunguo wa utafsiri, kisha ingiza kama inavyoonyeshwa hapa chini:
+
+<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>
+
+## Endesha Programu ya Maswali ya Quiz kwa Lokal
+
+### Mahitaji ya Awali
+
+- Akaunti ya GitHub
+- [Node.js na Git](https://nodejs.org/)
+
+### Kusakinisha na Kuweka
+
+1. Unda hazina kutoka kwa [template](https://github.com/new?template_name=Web-Dev-For-Beginners&template_owner=microsoft) 
+
+1. Kloni hazina yako mpya, na nenda kwenye programu ya quiz-app
+
+   ```bash
+   git clone https://github.com/your-github-organization/repo-name
+   cd repo-name/quiz-app
+   ```
+
+1. Sakinisha vifurushi vya npm na utegemezi
+
+   ```bash
+   npm install
+   ```
+
+### Jenga Programu
+
+1. Ili kujenga suluhisho, endesha:
+
+   ```bash
+   npm run build
+   ```
+
+### Anzisha Programu
+
+1. Ili kuendesha suluhisho, endesha:
+
+    ```bash
+    npm run dev
+    ```
+
+### [Hiari] Kukagua Kanuni
+
+1. Ili kuhakikisha kanuni imekaguliwa, endesha:
+
+    ```bash
+    npm run lint
+    ```
+
+## Tuma Programu ya Maswali ya Quiz kwenye Azure 
+
+### Mahitaji ya Awali
+- Usajili wa Azure. Jisajili bure [hapa](https://aka.ms/azure-free).
+
+    _Makadirio ya Gharama ya kutuma programu hii ya quiz: BURE_
+
+[![Deploy to Azure](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/#create/Microsoft.StaticApp)
+
+Baada ya kuingia kwenye Azure kupitia kiungo hapo juu, chagua usajili na kikundi cha rasilimali kisha:
+
+- Maelezo ya Programu ya Wavuti ya Static: Toa jina na uchague mpango wa upangishaji
+- Kuingia kwa GitHub: Weka chanzo cha utumaji kama GitHub kisha ingia na ujaze sehemu zinazohitajika kwenye fomu:
+    - *Shirika* – Chagua shirika lako.
+    - *Hazina* – Chagua hazina ya mtaala wa Web Dev for Beginners. 
+    - *Tawi* - Chagua tawi (main) 
+- Mapendeleo ya Ujenzi: Azure Static Web Apps hutumia algorithimu ya kugundua mfumo uliotumika katika programu yako. 
+    - *Mahali pa Programu* - ./quiz-app
+    - *Mahali pa Api* -
+    - *Mahali pa Matokeo* - dist
+- Utumaji: Bonyeza 'Review + Create', kisha 'Create'
+
+    Baada ya kutumwa, faili ya mtiririko wa kazi (workflow) itaundwa kwenye saraka ya *.github* ya hazina yako. Faili hii ya mtiririko wa kazi ina maagizo ya matukio ambayo yataanzisha utumaji upya wa programu kwenye Azure, kwa mfano, _**push** kwenye tawi **main**_ n.k.
+
+    <details>
+    <summary>Faili ya Mfano ya Mtiririko wa Kazi</summary>
+    Hapa kuna mfano wa jinsi faili ya mtiririko wa kazi wa GitHub Actions inaweza kuonekana:
+    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>
+
+- Baada ya Utumaji: Baada ya utumaji kukamilika, bonyeza 'Go to Deployment' kisha 'View app in browser'.
+
+Baada ya Hatua ya GitHub Action (mtiririko wa kazi) kutekelezwa kwa mafanikio, fresha ukurasa wa moja kwa moja ili kuona programu yako.
+
+---
+
+**Kanusho**:  
+Hati hii imetafsiriwa kwa kutumia huduma ya kutafsiri ya AI [Co-op Translator](https://github.com/Azure/co-op-translator). Ingawa tunajitahidi kuhakikisha usahihi, tafadhali fahamu kuwa tafsiri za kiotomatiki zinaweza kuwa na makosa au kutokuwa sahihi. Hati ya asili katika lugha yake ya awali inapaswa kuzingatiwa kama chanzo cha mamlaka. Kwa taarifa muhimu, tafsiri ya kitaalamu ya binadamu inapendekezwa. Hatutawajibika kwa kutoelewana au tafsiri zisizo sahihi zinazotokana na matumizi ya tafsiri hii.
\ No newline at end of file